web网页设计注意事项

成功的网页设计不照抄传统设计，也不只是在平庸的页面基础之上创造一些设计演变，创新的网页设计，亮点必须贯穿始末。下面介绍web网页设计注意事项，希望可以帮助到大家。

1. 创新多于陈旧，才能称之为“好”

成功的网页设计不照抄传统设计，也不只是在平庸的页面基础之上创造一些设计演变，创新的网页设计，亮点必须贯穿始末，对产品的体现要在品质上面进行全面烘托，使产品有个面目全新的“华丽出场”，在这一点上，绝不能让设计之火熄灭，让灵感之火燃尽。好在各种页面设计元素层出不穷，为网页设计本身提供大量变换素材和完美的可能性。

2. 好的网站，设计要跟产品相配

网页设计再美观，风格与产品背道而驰，也只能说是很差劲的网站，中国人喜欢欧美风格的网站，原因是欧美分格的网站，设计简洁，主题鲜明，质感强烈，适合大多数产品，但也有特例，比如感觉吧STUDIO最近的一个网站设计项目，是坦洋工夫红茶的网站，该网站崇尚历史题材和中国韵味，这样的网站就要求用比较浓重的中国风和相当精致的细节来体现其一流品质，原因：工夫红茶本身是比较考究的中国传统文化。

3. 网页设计要符合基本审美

网站在实用的基础上，设计也要在基本审美上达标，另外再做设计延伸(我们称之为创新)，审美上成功的网页WEB，再加之创新,能够让人赏心悦目，激发想象，事半功倍;审美上不过关，做再多创新只能徒劳无功，或者是让人产生反感。

4. 上等的网页设计帮助客户了解产品

网页设计运用得当，一样能开口说话，传递产品的多方面信息，为你省略很多冗繁的文字描述，这就是许多FLASH动画网站文字甚少的缘由，设计和动画在视觉上，通过不同的形式，来表达产品的尊贵形态，优越品质，使用方法，卓越效果，企业气势和消费者购买欲望等等…

5. 优秀的网页设计不崇尚张扬

网站说到底，是一种工具，是用来传递公司产品信息的。网站的设计不宜张扬，网站之余人，可以比作两个朋友面对面，网站网页，可以是一个尊贵的朋友，但决不能是一个外表傲慢的朋友。无论网站做的有多漂亮精致，大方是必须的，张扬是不可行的，要为网站的亲和力留出一席之地，让网站和人达成和谐。

6. 让网站诚实传递信息

良好的网页设计，在设计上不传递与产品本身不符合的信息，不误导和过度激励客户，这就是所谓的网站道德，赋予网站生命之后，也要赋予它品性，相信浏览者也会为正直的网站加分的。

7. 功底深厚的设计是耐看的

今日时尚，明日黄花，不是做一个好的网站的宗旨，真正经典的网站，经的住推敲和时间的考验。我有一个朋友，他要我帮他做一个网站，要求是一打开网站就知道是绝无仅有的，十年后再打开，也还是不同凡响的。我这个朋友就是在网站要耐看方面是比较有认知的。

8. 可靠的网站要求准确性

网站达成精美之后，我们要谈到网站的精确性，这些就是我们所说的细节问题，如果你看到一个漂亮的网站，但是上面的文字是重叠的，图片是未经处理的，数据是错误的或者是一两年前的数据，那是不是有一种“吃苍蝇”的感受?好的网站应当是生动的，前进的，准确的。

9.完美的设计不造成资源浪费

这里所说的资源，指的是制作网站前后所造成的人力财力浪费，做一个好的网站，设计和程序都要偏向完美，这需要制作双方相互配合，达成共识，使网站设计制作稳步发展，成就一个功能完善，设计上乘的网站，省去了后续程序修改和页面改版的人力财力浪费。做一个精美的网站用3年，胜过3个月翻新一下你的平庸网页，不要在网站上浪费财力，要做，就做适合的，好的，有品质的。

10. 杰出的网页设计越少越好

为什么我们一方面要求创新，一方面又不提倡太多设计呢?有句话叫做“简洁不等于简单”，还有个成语叫“画蛇添足”，太过于丰富花哨的网站，目的到底是展示网站本身呢，还是烘托产品呢?设计是要有的，但设计不是目的，设计只是一种衬托产品的手段，我们提倡创新，但不提倡无目的的创新。

1.简洁、易操作、避免输入

鉴于手机屏幕狭小，要做好页面设计，简洁便成了必然的要求。简洁并不单指设计的不拥挤，同时还包括页面板式和图形图像的简练概括。就现行的手机屏幕而言，页面上一行的字数最多能容纳14个中文字符，所以，移动互联网页面的板式结构要相对简单，呈现形式最好单列布局。由于屏幕太小，不足以观察到页面中细微的设计，所以图像的设计要以简洁为主，要让用户对页面内容一目了然，而花里胡哨的设计只会干扰用户的视觉。良好的用户体验下的设计应当遵循少即是多的原则，简单的交互、清晰的提示和反馈，少而精确的用户请求，从简单、易操作中准确的满足用户需求。另外，还应尽可能的减少用户输入，避免给用户增加负担。

2.信息扁平化原则

所谓信息扁平化原则，就是指减少信息层次关系，用户用最少的页面跳转操作找到想要的东西。现在大多数移动互联网页面设计信息结构都以深度为主，整个信息结构的链接呈现树状结构，用户想找到自己想要的信息，要一层一层的点击链接，这样导致用户操作的复杂性，在每一次页面跳转是，都会损失掉用户的流量，严重影响到用户使用。在这种情况下信息的扁平化显得尤为重要。我们可以通过增加Tab将并列的信息显示在同一个界面内，以减少页面的跳转;增加流程的便捷通道，如图(1)，在页面A中增加到达C的快捷方式，虽然在程序上讲C还是第4层，但对于用户而言C却变成了第3层，这样无疑就增强了用户体验度。3.增强交互性和通用性移动互联网页面设计要加强交互性的设计。使用手机浏览网页的过程实际上就是用户与页面进行交流的过程，因此良好的交互设计是提升用户体验的重要因素。另外，移动互联网页设计师应充分考虑各种型号手机屏幕大小，不能单单依靠UC浏览器来自动调整页面布局和大小，要增强页面设计的通用性。

4.重视色彩搭配，少用图

移动互联网页面色彩要和桌面网站色调统一、搭配协调。在此，我建议：(1)在同一个页面中，颜色种类不易过多。颜色太多会使用户觉得页面太杂乱，混淆视觉，用户难以分清主次关系;(2)颜色搭配分清主次，色调要统一;(3)尽量使用同色系颜色，同色系的颜色容易使页面色调统一，但需要注意的是，在一些小的元素上可以适当搭配小面积的其他颜色，避免呆板。另外，尽量减少用图，使用图片能美化页面，但同时也会使加载速度变慢，增加用户流量。结束语：移动互联网发展势头日渐凶猛，其页面设计也越来越重视用户体验和人性化，越来越多的设计师将设计重心转移到用户体验上，现实证明，基于用户体验的移动互联网页面设计可以更好的提高用户满意度，以用户为中心的页面设计正在为移动互联网开拓一个崭新的人机交流局面。

1、留白

在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。

高效控制留白的技巧

各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个人感觉的，不过都能从实践中锻炼出来。

·使用网格辅助设计：利用网格当然能帮助你理解元素之间的空白。

·不断尝试：不断尝试—失败—尝试，直到找到最佳方案。

·留白并不是浪费空间：空白并不总是等着你去填充的。

·没错，少就是多：与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。

2、像素级的完美

有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节，一些别人几乎无法察觉的细节。我所说的“像素级的完 美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线，不如多加一些细节。细节可以是细微的渐变，也完全可以只是一条1像素宽的细线(用作表现阴影或高光)。有了这些细节， 你的设计会大不一样。有些设计师在这方面特擅长：Collis Ta’eed，David Leggett以及Wolfgang Bartelme。

完美细节小贴士

要在这一技巧上达到完美，不断的实践尤为重要。如您所见，一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变，费尽心力做一些实实在在的置于某对象之上的效果。

·一定要注重细节：小细节完善内容感官是关键。

·思考像素级问题：描边、渐变、线条、阴影等等，不用太宽大也能有效增强设计

·前后对比：应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。

3、文字排列与字体选用的诀窍

尽管设计师大都不会亲自撰写网站的实际内容，不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。

网页设计中字体选用的快速决断

看了上面这么多好例子，将来你选用起字体来应该会更加得心应手。不过，为什么他们给人的感觉这么好?下一次在你自己的设计中，你又该如何运用?

·是否可读?不要怕尝试粗大的字体

·你可否考虑过间距?间距对于可读性有很大决定作用

·你的字体带给人什么情绪?确保字体选择适合你的设计风格

4、元素的组织

设计师这一职业对很多人都有吸引力，因为那些制造创意的过程，实在是十分有趣。我知道组织内容的过程就没有那么有趣了，不过一旦你养成了组织内容的好习惯，你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定，比如说，这站点是什么类型?某项特定内容在页面上的重要性如何?

如何放置内容，以及放到哪里，可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是，先决定你的设计需要达到的效果。例如，你是在做卖东西的网站吗?是要做内容展示吗?或者是在做一个用户注册页?推广页面?等等……

组织内容小贴士

你当然可能会遇到需要打破常规，选用非同寻常方式的时候，不过你还是可以遵循这些简单技巧，以保证内容结构和阅读顺序的良好。

·你为何而设计?如前所述，确定设计的目标。

·利用网格：网格帮助你发挥页面的最大潜能。

·测试元素位置：以访问者的角度考察内容的易用性。

·移除所有不必要元素：不必要的东西都应该被消灭，或者至少不要放到显眼的地方。

·注意力的均衡：有些东西需要被简单化，好让另外的事物闪耀光辉。

5、自我克制与精妙细节

设计师总是在寻找制造冲击力的方式，总是想做一个独一无二的设计，创造些前所未有的效果。不过有时候通过自我克制也能形成冲击力。量变产生质变，过多的“好”也会带出不好的结果。好的设计师晓得平衡点在哪里，并且能避免让过多的特殊效果毁了一项设计。

运用精妙细节的小贴士

我认为，精妙细节能让一项好的设计升华为灿烂夺目的设计。如果你还在寻找让设计与众不同的方法，精妙细节是个不错的尝试方向。 以下是关于运用精妙细节的小贴士：

·创建细节图层：不要在一个笔刷或材质上吊死，多加些图层，多做点细节。

·尝试不同透明度和色彩：有时候只有 3% 的不透明度也能产生正面影响。

·拒绝缩手缩脚：不要担心太多细微，或者太不明显。

21世纪是网络信息的时代，各种主题的网站层出不穷，例如比较热门的电子商务网站、社交网站、视频网站等。虽然网页设计发展的时间不长，但是网页设计已经有了质的飞跃;要求不再仅是信息的传达美观和功能的实用，更注重整体设计的审美效应。审美效应指在艺术鉴赏过程中，我们总是从艺术作品的可视层面开始，然后经过我们复杂的精神活动，进而引发我们内心深处的某种情绪、感情。

每个网站设计都有自己的风格，广义的“风格”是网站的整体形象给浏览者的综合感受;狭义指设计师作品中所表现出来的创作个性与艺术个性。不一样的个性表现出来的风格不同，不同风格的网站给人的审美感受不同。网站的艺术个性是整体设计的一部分，整体大于局部。从宏观的角度分析，设计风格的审美效应概括起来主要是宁静、轻松、严谨、庄重;当然人们的情绪感受不止这些，通常我们拒绝消极情绪的设计，除了少数特殊的网站。

一、审美效应——宁静

宁静，顾名思义是安宁平静的意思。这种平和心态的审美效应走的是中庸之道，网页设计风格趋于简洁明快的中性化设计，没有明显的个性倾向。此类风格最大的禁忌是大面积使用鲜艳的色彩以及强烈的对比设计。首先减少颜色的使用，配色向低饱和度的灰色系靠拢，因为灰色最容易让人心里平静。其次更多的留白，一是能突出主体，二是白色没有任何倾向是最具包容性的色彩，俗话说有容乃大最符合了中庸之道。再是体现整体设计的安宁，不宜采用醒目的大标题设计，减少视觉效果的设计，版面布局和内容的形式越是简单效果越好，比如单页布局是最优的选择。近两年这种极简主义越来越受人们欢迎，越是简洁越是平易近人。

二、审美效应——轻松

轻松，与宁静相比心境稍更愉悦。轻松是一种舒服的感觉，网页设计风格既可是温馨亲切的，也可是清新美好、富有生机的。该类审美效应网页设计风格最重要是对元素的情感倾向掌控。1.色彩元素情感影响占有比例最大，高饱和度的配色充满动感和生命力，让人充满惊喜让人愉悦;中饱和度的色彩搭配给人柔和温暖的感觉能够奠定温馨的基调;总之明亮鲜艳的暖色系色彩面积一定要比例最大。2.页面适当的采用圆滑、流动性的造型，可以让风格更柔，让人感到亲切。3.网站标志、字体、版式布局的等细节设计需更具创意性和趣味性，才能让人看着愉悦;反之呆板无趣的设计使人感到沉闷。4.高质量的大幅图片搭配也能愉悦观者，比如韩国清新插画很受欢迎。5.可爱的动物、美丽的植物等有生命力的元素应用可以使设计富有生机;综合的看整体设计对这些元素的运用应当繁简适中，过多的设计只会适得其反，让人产生反感的情绪。此类网页设计风格适合尺度较宽，属休闲类的网站典型比如购物网站、社交网站、娱乐网站。

三、审美效应——严谨

严谨，严肃谨慎的意思。严谨意味着注重逻辑和细节，这是一种认真仔细的心态。网页风格傾于完美精致，追求细节设计。主要设计特点是：1.页面结构清晰，主次分明的布局，所以采用“T”结构布局较多。所谓“T”结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母“T”，所以我们称之为“T”形布局。这是网页设计中用的最广返的一种布局方式。2.单一纯色的搭配，暖色较少，总体色彩倾向冷色和中性色，给人冷静沉着的感觉。3.选择造型规整有序，充满理性4.注重细节的设计，如阴影，倒角，质感，层次和空间，立体感;细节的设计更显品质和诚信。现在很多的企业网站设计选择此风格，苹果公司是这一风格的领导者，苹果曾经引发了人们对视觉质感的追求，金属质感表现给人很酷的感觉非常符合苹果的风格。

四、审美效应——庄重

庄重，庄严隆重充满权威性。要体现权威，是营造一种气势，只有中规中矩设计风格适合。这一风格设计要点：1.页面布局构图要对称、均衡;2.配色不宜太过轻飘和花哨，由其要拒绝糖果色的页面设计及半透明配色;浓郁的色彩尽显厚重大气，可效仿宫廷的色彩搭配;3.醒目的大标题设计必不可少，字体设计要清晰易读;4.拒绝破坏严肃气氛的个性化造型和趣味设计;5.采用内容、图片及素材必须具有权威性;元素不再多，选择有一个到两个能压住页面视觉中心的视觉元素;整体设计要整齐、秩序显得规矩。此类风格最适合政府性质的网站以及要体现权威机构的网站。

近几年网页设计风潮充分说明人们对审美效应的重视。例如空间和层次感的设计流行包括半透明、阴影、立体感等，让用户的情境意识觉醒。例如各种质感的肌理元素的运用充分调动人们的视觉和触觉的心理感受，或柔软、坚硬，或光滑、粗糙。可是一味的追求对视觉特效的审美效应也是不正确的;设计精美的图形界面和优雅适度的动画效果能够给人带来愉悦的享受;但是网页上那些闪动不停的广告条幅和屏幕中飞来飞去的弹出框以及四处充斥的造型复杂的图标、一连串的水晶效果的按钮、各种为炫技而堆叠的软件特效是否让你心生反感?