web网页设计的原则 web页面设计原则

根据实际的用户反馈，表单设计中更大的文字输入框、适度的留白空间会让人更有填写的欲望，优雅的动画效果也能增加填写的趣味。下面介绍web网页设计的原则，希望对您有帮助。

(一)保持醒目和简洁

我们经常会遇到一个问题，非常多的用户抱怨注册表单需要太多的信息。如果你设计的网站正在想办法增加注册用户数量，那么首先必须保证设计的表单尽可能的简洁，易于填写。同时对于着重强调的版块和信息，在设计时可以采用更醒目的方式加以强调。

(二)合理组织信息

对于较为复杂、填写项多的表单，如果不对信息进行组织，很容易显得繁杂混乱，让用户在一开始就产生抵触的情绪，甚至选择放弃。合理有层次的组织信息，可以利用框线、空间间隔、颜色的不同，按照不同信息的类别、属性和相关性进行区块的划分，用步骤条指示当前的进程。清晰的浏览线，合理的标签、提示文字及按钮的排布，避免不必要的信息重复出现，能够降低用户的视觉负担和物理负担。

(三)更大的输入框

根据实际的用户反馈，表单设计中更大的文字输入框、适度的留白空间会让人更有填写的欲望，优雅的动画效果也能增加填写的趣味。设计师在设计表单的过程中，需要缓和不同输入元素之间的冲突。加粗的文字提示用户哪些区域已经填写了，哪些区域还空着，当激活某一输入框时，它会变成淡蓝色，提示光标现在所处的位置。

(四)为用户节省时间

需要花大量时间填写的表单容易让人失去耐心，用户是懒惰而繁忙的，试着删去所有不必要的填写项，考虑除了让用户机械的通过键盘在表单上输入数据外，还有没有别的更优方式(如后续进行用研调查)收集所需信息。

(五)一条龙服务的设计理念

表单的终点并不是提交，设计师在设计的时候需要抱着为用户提供一条龙服务的理念，形成流程闭环，避免用户在中途跳出。一个好的表单设计，不仅需要考虑用户填写前的引导、填写时的及时校验与帮助、还需要考虑填写后的整个流程体验。思考用户填写表单的初衷是什么，让他在填写完表单后能够最快得到他最想要的东西。即便是他暂时无法得到的，也需要告诉他相应的原因和能够进行的替代操作。

(六)提供设计关怀

根据不完全统计，互联网中大约有12%的人具有或轻或重的色觉障碍。如果将色彩作为区分不可点击文本和可点击链接的唯一元素，可能会让这部分的人使用时出现困难。我们在设计表单的过程中可以通过给链接文字加下划虚线、使用按钮或其他形状做区分，让这类用户能更加清楚的知道哪些是可点击的区域。

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

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

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

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

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

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

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

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

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

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

6. 让网站诚实传递信息

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

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

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

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

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

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

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

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

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

网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。由于企业需要通过网站呈现产品、服务、理念、文化，或向大众提供某种功能服务。因此网页设计必须首先明确设计站点的目的和用户的需求，从而做出切实可行的设计方案。以下就是小编为您整理的网站页面设计原则。

主题明确

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。

Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。

为了做到主题鲜明突出，要点明确，应该使配色和图片围绕预定的主题;调动一切手段充分表现网站点的个性和情趣，办出网站的特点。充分利用已有信息，如客户手册.公共关系文档.技术手册和数据库等。

设计思路

简洁实用：这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。

使用方便：同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美

整体性好：一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。

网站形象突出：一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。

页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。

交互式强：发挥网络的优势，是每个使用者都参与到其中来，这样的设计才能算成功的设计。这样的网页才算真正的美的设计。

版式设计

网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。

版式设计通过文字图形的空间组合，表达出和谐与美。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。

色彩作用

色彩是艺术表现的要素之一。在网页设计中，设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合.搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。如果企业有CIS(企业形象识别系统)，应按照其中的VI进行色彩运用。

形式内容

为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。

灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

空间的构成

网络上的三维空间是一个假想空间，这种空间关系需借助动静变化.图像的比例关系等空间因素表现出来。 在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。

网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。

虚拟现实

人们已不满足于HTML(标准通用标记语言下的一个应用)编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在Web网上展示其迷人的风采，于是VRML语言出现了。VRML是一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多地为虚拟现实环境服务。

多媒体

网络资源的优势之一是多媒体功能。要吸引浏览者注意力，网页的内容可以用三维动画、FLASH等来表现。但要由于网络宽带的限制，在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。

便于使用

如果人们看不懂或很难看懂您的网站，那么，他如何了解你的企业信息和服务项目呢?使用一些醒目的标题或文字来突出您的产品与服务。并且即使您拥有最棒的产品，如果客户从您的网站上看不清楚您在介绍什么或不清楚如何受益的话，他们是不会喜欢您的网站的，这对于网页设计而言是失败的。

十年前，互联网刚刚处于雏形阶段，到如今，整个产业的格局已呈”大而不倒”的局面。而互联网的阵线也拉长了，从传统的”老式桌面”到各式各样的便携式设备，从由互联网引领的”大数据时代”，再到存储的新革命”云概念”。而设备呢?手表、眼镜各种以网络为基础的可穿戴设备正在蓬勃发展。如穿越到十年前，向别人描述今日的网络现状，他肯定会一笑而过，认为这只不过是”海市蜃楼”般的幻想。但十年后的今天，这些革新一一实现，不再是触手不可及的幻象，这所有的技术革新切切实实的就在我们身边。感谢那些为互联网做出贡献的革命者们!

新时代的网页设计充满了各种新技术、各种新的jQuery脚本、各种响应式网页设计——但我们依然不能忽略最基本的网页设计基础。新时代的网页设计以响应式理论为蓝本，力图在不同设备上呈现一致的网页浏览体验。而响应式时代依然不便的设计基本准则又是什么呢?一起来看看下面的七条，望诸君设计时铭记于心。

1.优秀的网页设计应该简约，并且完整

设计大师往往都是哲学家，他们往往保持一种包容的设计态度，不会采用极端的设计方式，他们的设计往往是一种平衡之美。我们可以画出一个横轴，左边是简约、右边是完整，而最好的设计会聪明的选取中值。网页设计必须简约，任何无用的特质都必须移除;与此同时，网页设计必须能够满足用户需求。太简单的网页如果没有空能支撑，那么从里到外就真的是”空洞无物”了。太复杂的网页如果缺少简约的收束，那么便会”尾大不掉”，让用户阅读困难。“言简意赅”的设计才是好设计，一个设计师的掌控力得以体现。总结起来就是一句话：一个布局、风格具有简约美，同时又能提供大量有价值信息的网站必定受用户欢迎。

2. 用户往往缺乏耐心

互联网充满了机遇，每个人都想通过简单的操作便能获取所需信息。互联网的信息浩瀚如海，你并不是唯一的信息提供者。亘古不变的是：用户的时间宝贵，他们缺乏耐心。如果你不能提供便捷的信息，那么他们会选择离开，进而寻找其他网站来谋求信息。想要做好这一点?说白了，就是信息层级要清晰，加载速度要快。

3. 网页设计必须具备一致性

想像一下你作为网络浏览者时的经历：你在浏览网页时，一般都不会详细阅读内容，你会快速滑动页面，大致浏览一遍，如果看到感兴趣的信息便停下，进行仔细阅读。这是一种用户习惯。万物作而弗始，生而弗有，为而弗恃，功成而弗居。夫唯弗居，是以不去。——道德经

在John Allsopp《网页设计之道》中有这样一句话，大致是这么一种意思：设计师不应该作为用户的对立，设计师应该尊重用户的习惯，让设计适应用户的习惯，而不是做一个高高在上的独裁者。功成身退，这似乎有种”伟大的设计是隐形”的意味。好了，我们把话题扯回来，用户的这种阅读习惯意味着什么?这意味着设计必须具有高度的一致性，用户看到前面的布局，对后面的布局有一种”预期”：他会认为后面的页面布局也是如此，不要破坏用户的阅读节奏感。同样的，同一页面的各个元素以及各个子页面之间必须要具备一致的联系性，也就是说设计师的设计模式应该专一，再举个简单的例子，如果主页的导航栏布置在上方，子页面的导航栏布置在侧边，你认为用户会高兴吗?

4.将导航菜单作为交互的”核心”

上面已经提到过，各个页面的导航栏必须具备一致性。有时候，好的网页设计和差的网页设计差距就在导航菜单，好的导航菜单成就了一款设计，坏的导航毁灭了一例网站。每当用户有问题时，他都会习惯性的翻阅导航菜单，这也是用户习惯，要注意。个人认为，导航是网页设计的核心元素，影响到网站的交互性，至于要怎么设计，仁者见仁，智者见智了。

5. 留白和信息同样重要

“内容为王”、”内容至上”是吗?那我就提供大量丰富信息，把网站全部都填满。”这种设计思想真是大错特错，太片面了。你要有这样一种观念：留白也是设计的一部分，那些不使用的空间也能发挥其作用。从用户的角度来说，留白很好，让布局更有条理，信息更清晰。太刚强的事物容易折断，有张有弛才能长久。网页设计也是同理，多给用户一点阅读呼吸空间，让他们感受到网页设计的”节奏感”。各位可以自行想象一下，如果一款网页中一点留白都没有，到处都是密密麻麻的文字和图像，你会感到舒服吗?

6.用心的设计都有清晰的视觉层级

明智的设计师不光会创造内容，还知道如何高效组织内容，传递信息。视觉层级对于信息呈递来说异常重要，优秀的视觉层级还能帮助设计师强化设计理念。

空间排布、间距使用、整体布局，关于这些的探讨已经够多了，归根结底，无非是为了打造优秀的视觉层级。

7.永远不要忽略字体

内容为王，那么内容是由什么包装的呢?答案是字体，这种小小的细节能造就大差异。字体的清晰与否决定了信息呈递的结果。