好的设计能够帮助企业提升数据，同时还可以提供用户一个良好的使用体验。GoodUI 总结了一个长达69条设计原则的清单（不断增加中），列举了他们认为非常重要的设计要点。

与以往的一些文章不一样的是这里提到的69点其中有一部分 GoodUI 已经通过 AB Test 验证过可行性。当然分析报告是需要付费的，单篇39美金。

不过今天讨论的重点并不是付费报告，而是这69条设计原则。我按照自己的理解将它们翻译成了中文并配上图片，希望对大家有所帮助。

本篇文章内容及图片均来自于GoodUI，如有翻译不恰当的地方欢迎大家指正。

01 尝试使用一列的布局替代多列布局

02 给用户一些小的利益，别看上去那么赤裸裸

03 合并相似的功能

04 尝试展示来自用户的赞扬，而不是自我表扬

05 重复核心行动点

06 统一视觉规范，提升可识别性

07 尝试使用推荐的口吻，而不是让用户感觉面对一台冷冰冰的机器

08 给用户吃「后悔药」的机会

09 告诉用户产品适用的人群，而不是人人都通用

10 将文案写得更加的直接，而不是一堆废话

11 增强主行动点的视觉冲击力，提升它在页面中的可对比性

12 让用户知道你从哪儿来更易于拉近与用户的关系

13 将表单做的简单点，确保用户在抓狂之前能进入下一步

14 尽量将用户需要选择的訊息展示出来而不是藏起来

15 页面的排版需要考虑用户是否会漏掉底部訊息

16 如果页面的底部有需要关注的行动点，别让文中过多的外链带走了用户

17 确保用户知道自己目前的状态

18 将利益点融合在行动点中，增强用户的点击欲望

19 将行动点与当前訊息结合起来

20 将简要的表单合并到页面中，减少调整页面带来的用户流失

21 适当的增加延迟动效，让用户感知到页面的变化

22 让新用户从尝试产品入手，而不是一来就面对冷冰冰的注册表单

23 减少使用线框，这会过多的吸引用户注意力，而且会让页面看上去透不过气

24 给用户推销你能给他带来的利益，而不是功能

25 一定要注意0结果页面的设计，这也是引导用户的好地方

26 给用户选择退出的权利，特别是邮件订阅

27 注意界面元素的一致性，降低用户学习成本

28 给下拉框增加一些预设值，降低用户填写成本

29 延续用户日常的使用习惯，而不是重新创造

30 尝试告诉用做些事情降低自己的损失，而不是提升收益

31 提升页面的视觉层次，增强可阅读性

32 将同类的操作合并在一起，降低用户的认知成本

33 表单及时校验，而不是统一提交后在告诉用户填错了

34 尝试将表单输入变得更加宽容，让用户的填写更加简单

35 通过时间增强紧迫感

36 提供用户可预见性的操作，降低用户的心理成本

37 尽可能的帮助用户选择，而不是让用户想破脑袋

38 尽可能将操作区域放大，降低用户操作成本

39 页面加载速度很重要，尽可能让用户感受到你的网站速度很快

40 如果可以，增加键盘快捷键，提升操作效率

41 尝试通过对比来让用户感知到性价比

42 尝试对进度条进行「设计」来降低用户等待的焦虑

43 根据用户选择逐步展示訊息，降低无效訊息对用户的干扰

44 有时候较小的承诺比「夸海口」会更容易让用户信服

45 尝试将提示訊息弱化，减少对用户操作的干扰

46 尽量通过系统的功能来简化用户的操作

47 用文本配合图标来降低用户的认知成本

48 用更自然的语言代替冷冰冰的机器

49 放出一些摘要訊息来帮助用户识别是否需要进一步了解

50 在关键的页面增加用户权益訊息，增强用户进一步操作的信心

51 将价格进行换算，让用户感觉这很便宜

52 记得在成功页面感谢用户

53 将数字转化成易于用户阅读的形式，而不是冷冰冰的机器语言

54 告诉用户选择的权利和自由「诱惑力」

55 尝试让语言更具「诱惑力」

56 通过设计引导用户的注意力

57 通过友好的对比来展示产品，为用户做决定提供帮助

58 通过任务机制来提升用户的满足感

59 让用户了解接下来将要发生什么事情

60 尝试用更幽默一些的语言文案

61 任何操作之后都要给出反馈，让用户知道操作已经生效

62 注意动效的真实使用情况（Amazon 的类目菜单就是一个很好的例子）

63 注意排版的，不要让訊息过于拥挤

64 尝试用讲故事的方式来传递訊息，增强用户的代入感

65 尽量给用户展示真实的訊息，不要欺骗

66 随着用户的不断熟悉简化界面

67 试着用用户的口吻展示訊息

68 在表单中增加一些提示訊息，减少错误的几率

69 最后，用简单的文案传递核心关注的訊息，少一些废话

这69条设计原则虽然针对 Web 设计，但有些部分在移动产品设计中同样有效。翻译过程只保留了图片和标题，更多详细内容可以访问 GoodUI 官网：

http://goodui.org/

从字体设计、制图到页面版式，设计总有那么几条通用的原则，然而，到了网页设计，设计师们就开始随意地“跟着感觉走"，倒不是说他们故意违反规则，而是，他们中的大多数，压根儿不清楚这些规则，更难过的是，知道的，也不了解怎么去用。擦干泪水，看看下面这些原则如何应用到实践中：

一、平 衡

平衡感挺难拿捏的。网页上呈现出的平衡有两种——对称和不对称。我们都很习惯了看对称的图片，就像我们小时候剪纸花，都会折叠起来剪，打开以后图案就是对称的,这种对称的平衡很好识别，可是，当遇到不对称构图，如何做平衡？

Subtraction网站在多处位置展示了不对称平衡里面的一些重要原则。你看，作为主Banner的那只狗的照片——狗身上的黑色全压在画面左侧了，这时候画面右侧出现了一个X，这看似随意的灰色X，可是平衡画面的关键因素！这样一来，你的视线就会被牵扯到画面中间。除了在Banner图里面，在网页的页头中也出现了这样的设计——菜单栏的大小和颜色都相对重。那么在Subtraction的logo这条，就对应用了黑字白底，再在上面加上黑线，这样上下会相对平衡一些。

二、比 例

对于网页元素来说，并不是看得清楚就好，或者文本多长就弄多大，它的排布跟网页的平衡视觉上强调谁有很大关系。

而到底如何去权衡这些元素的大小，跟每个元素本身的性质有很大关系，举个例子：你在浏览两栏式的网页的时候，一般会发现右边的框要比左边的框大，也放了一些关键的訊息在里面。这是由人的视觉习惯决定——哪怕是文本框放在左侧，目录这些元数据放在右侧，也会不自觉的看向右边。所以说，元数据在右边占地方是不太科学的。有些人喜欢每栏一样宽度的栅格布局，另外的人可能喜欢黄金分割率，也就是右边的框是左边框的1.62倍。

1.有些网页主要根据重要程度来安排设计比例

在这个页面上，各元素的比例控制得很好。不仅是视觉上的层次很好，意义上的层次也很好。从产品的logo开始:（1）然后引导用户的行为（2）再到文字比较密集的相关介绍（3）排布都很合理。图文混排的区域，标题的权重和正文隔开，还有和左侧icon的关系都很注意。浏览这个页面的时候也会觉得整体非常协调。不过以上这个例子有点老，网页展现很平面。

2、有些通过交互设计来强化网页上展现的比例

比如这个国际广告奖D&AD的网站，在滑动内页时候，菜单栏占页面的比例会相对缩小，这样人的注意力会更集中于中间部分，更注意阅读内容。

三、节奏

网页上的节奏感非常重要，甚至比数据更重要。尤其那些数据量大，页面长的网页。比如这个叫Digg的网站，页面上出现了双目录，但也是遵循了节奏感方面的一些原则。

Digg首先在header部分展示出的是一个水平的导航栏，然后跳到主要内容的展示部分，每篇文章依次列开。这就给读者一种连续的感觉，会顺着往下滑。而这个小技巧也被用在了右侧的Top 10文章排列中。

如果所有的元素在网页上的权重都一样，那也太乏味了，大多数人会避之唯恐不及。而如果页面上面变化太多，又会显得很乱。这就违反了同一性的原理（下面会讲）。最重要的是要在网页的某些部分保留一致性。每个部分的节奏感是根据各个不同的需要决定的，就像Digg，但整体也需要通过颜色或形状呈现一致性。

四、强调

在设计中，恐怕没有比圆形更有魅力的图案了，尤其是在充斥着四边形的网页上。一个圆圈并不需要借助亮眼的颜色或留白，仅仅靠它的形状特点就能轻松引起用户的注意。回想一下，你的眼睛是不是总能被新近流行的标志所吸引？不过“圆形”最大的魅力其实还是发挥在Logo上。

如上图，A List Apart用了不止一个“圆形”来突显出其Logo。你不仅能通过其旁边那个有着发行编码的标志(1)注意到它，也能通过右手边几个更小的标志注意到T恤促销訊息（买买买的玄机所在）。

你还可以通过使用”留白“或”颜色“来起到强调的作用。它们可配合”图形“使用，但通常情况下你不必用全，一两个即可。三个元素的同时使用会造成一种过于夸张的吸引力，让用户很难再去注意页面其他的部分，尤其是主要内容。

Google同时放了“留白”和“颜色”两个大招刷存在感。颜色鲜艳的Google标志和周围大面积的白色区域总能即刻吸引你的眼球。Google如此设计不仅强化了其标志，还能使你的目光自然地从左到右：你的目光可以准确地找到搜索输入框，同时自然地移向右边的主搜索键。Google能够提供给用户最优质的搜索结果，其中一个成功因素恰恰就是充分利用了基础视觉技术，为网页打造出极佳的易用感。

五、整体感

整体感是一个见仁见智的概念，一种“合而为一”的感受，没有元素有悖于设计氛围和感觉

上图是一个展示整体感的优秀例子——Dave Werner的portfolio作品集。其每一页都有网站手稿、图钉和其他一些杂七杂八的玩意儿，他把这些元素结合在一起并且打造出了整体感。既没有一样元素显得过于突兀，也没有出现迥异的整体风格。

在他的portfolio作品集中，即便有很多看上去千差外别的分散个体元素，其实也都被笔记和草图掩盖了：这甚至形成了他作品集独有的设计风格。他的作品集里不存在一个网页，你在上面看不到任何图钉（用于组合界面元素）的痕迹。

你可能还不是大牛（我也不是= =），希望你在这些例子中能吸收到一点设计经验，既能做出心仪的视觉效果，也能让用户情不自禁地看向你最想展示的内容。

嗯，擦干眼泪修图去吧。

---------------------------------------------------------------------------

转载请与我联系，并注明文章来源：

特赞（www.tezign.com ）| 产品策划 |贵妃奶黄包

知乎专栏：读点儿设计 - 知乎专栏

初入平面设计的朋友，还不知道平面设计该学些什么，推荐阅读：0基础同学如何自学平面设计？平面设计需要学些什么？

很多知友都在纠结学平面设计是报班还是自学？自学到底能不能行，我的答案是能。很多从事平面设计的朋友，并非都是科班出身，或因为起初的热爱、或因不期而遇的偶然，才得以进入这个行业，更有甚者可与科班同学一比高下。其实他们只是找准了正确的学习方向，获得了优秀的学习资源，才能完成从0基础的外行到内行的蜕变。当然，前提是要热爱这个行业。

报班学习也好、自学成才也罢，你都得找个好的老师教你才行，加上自己的努力才有可能在2~3个月后学有所成，取得跨入这个行业的资格。如果你不缺钱、时间又充裕，即使报班价格高点也能接受，那就报班吧，如果和我一样总是对那些培训班耿耿于怀，希望时间自由，那就选择自学吧，在网上找到好的老师教你，绝对不比线下培训班差。

我在自学过程中主要经历了三个阶段：1.学习祁连山老师免费的《PS大神通关教程》，初步认识PS，花费0元。2.学习敬伟老师的《敬伟培训PS教程》，深入学习了软件操作，对平面设计开始有了概念，花费260元。3.学习腾讯游戏高级设计师Gordan的《网页设计高级教程》，系统地学习平面设计理论及实战，花费399元。在这三个不同阶段中，过程崎岖，充满戏剧。

现在我从事的是网页设计方面的工作，进入这个行业也纯属偶然。我记得那是我大二上学期的时候，不知怎么的，头脑一股发热突然对摄影感兴趣了起来，我想少一技不如多一技吧，我就在网上买了本单反摄影教程，看着玩儿，当时我还没买单反相机呢，就想学学怎么把照片拍得好看，买回来后，偶然发现书里附带的光盘里居然有一套祁连山老师录播的CS3版本的PS教程，老师在开篇，介绍到用PS鼠绘手表的案例运用，我感觉非常新鲜就开始学了起来，一口气从头学到了尾，感觉超有成就感。后来我到网上到处去找到了老师的鼠绘手表的案例，也跟着开始模仿了一个，从此就开始了和ps打交道的生涯了。

现在回过头看，祁连山老师的PS教程做得很棒，感谢他给了我一次很好的PS软件启蒙教育。最新教程是CS6版本了，大家也可以去看看这套免费的《PS大神通关教程》。

临摹作品：鼠绘手表（2013年4月）| PS软件制作

在13年ps版本已经出到CS6了，所以当时我学那套CS3版本的ps教程，算是比较老的了，但老师把软件操作的知识点都是讲到位了的。学完过后我发现，ps是会了但依旧只停留在了解软件功能的层面上，而且还有些更深入的高级技巧，我想再系统的学习一下啊。后来一次偶然，在网上收PS教程时，让我看到了敬伟老师的凤姐变美女-PS教程，顿时就被老师给折服了，于是我就在网上买了一套敬伟老师最新版本的PS教程，也是录播好了的那种，必须是正版的（希望大家支持原创，支持正版），当时花了我260个大洋，不过现在降价到69元了。课程前前后后有100多个小时，整套学下来，在软件操作层面上几乎没有问题了，算是精通了吧。在这套PS教程中也开始学到了一些基本的色彩理论知识，也开始对平面设计有了一定的了解，不再是单纯的以学习软件为目的，直到15年6月毕业后找到了第一份平面设计工作（印刷类物料设计）。

在校期间作品：俱乐部招新海报（2013年9~11月）| PS软件

从上面图片可以看出，在没有充足的理论指导下创作出来的作品，在版面的控制会比较随意，或略显学生气。

然而的然而是，非科班出身的我，没有系统专业的教育背景，当每天都与平面设计打着交道，很快在不到一个月的时间里，就暴露出了自己的不足，虽说PS软件操作没有问题，但是设计思维还欠缺很大一截，下意识里觉得该给自己充充电，是时候系统全面的学一下平面设计思维层面的东西了，不然就真的难以胜任接下来的工作了。由于公司离家近，下班后，我就留在办公室，顺着帖子文章留下的QQ号，加入PS交流学习群。开始游走在各种培训机构的YY语音、QQ直播课堂中听老师讲公开课，想给自己充充电。每次进入不同的房间就得修改一次马甲、几经折腾就疲惫了。通常这样的公开课，都是以免费来吸引学生，然后以讲座的形式，蛊惑洗脑招收学生。学费都在六七千，由于刚毕业，工资都只能够生活，这样的公开课我也是放弃了，一是时间不自由，二是费用太贵，报班就更是不可能的啦。所以，到后来我就明白了一个道理，免费的就是最贵的，因为你要为之付出更多的时间成本。相关好文推荐：要为自己的未来花些钱，花得漂亮，才能活得精致...

毕业后的第一个设计案例：（2015年7月）| PS软件

后来的后来，又一个偶然的广告将我带到了勤学网这个自学平台，正好满足了我对平面设计的学习需求——系统正版、高清录播、还要价格实惠。在浏览的过程中，我发现里面不仅有讲软件操作和实战案例的课程，还有三大构成、素描基础之类的设计理论，看完一些课程的简介，算是和老师惺惺相惜，就觉得这是我现阶段自我提升最为需要的东西。我赶紧把网站添加到书签里，下定决心，让自己从这里出发，早日蜕变成一位真正的合格的优秀设计师。创造出好的设计，服务人类。（哈哈，是不是感觉有点太夸了，其实在我的观念里，好的设计就是以人为本，解决问题服务人类的。）等到8月，迎来了毕业后的第一次发工资，发完工资的第二天，回到办公室，花了我399个大洋，立即买了他们的课程，开始了第三阶段的学习之旅。因为当时的工作是做印刷类物料会比较多，而且成都这边的广告公司传文档都是CDR的居多，所以我就系统的学习了全套的CDR教程，同时也习得了更多的设计理论以指导我更好的去设计，下图是我学习后的第一个月用CDR做的海报。

海报DM单相关设计：（2015年9~10月）| CDR+PS软件

易拉宝设计：（2015年9月）| CDR软件

我的第一本画册设计：（2015年10月）| CDR软件

VI设计应用练习作品：（2015年11月）| CDR+PS软件

那段时间里，我几乎每天都会去参加学习，我知道没有专业背景的自己，需要付出比别人更多的努力，通过那段时间的学习，也让我看到了自己在设计道路上未来的希望。也感谢自己的选择和努力。

过完2016年春节后，回到成都这边，换了一个工作，开始改做网页设计了，从印刷类平面到网页设计，跨度还是蛮大的，于是用PS做设计的比例又开始多了起来，不过其中的基本设计理论都共通的，只是呈现的介质不同罢了，值得庆幸的是我买的一年会员还没到期，开始学习里面的网页设计教程，特别喜欢腾讯游戏的高级设计师Gordan主讲的网页设计高级教程，现在仍然在不断的学习成长中，从中学到的知识技巧都能够很好的应用到工作当中。也非常感谢勤学网这个平台提供了这么有优秀的网络课程，不但免去了高昂的学费，还换来了曾经以为只有培训班才能达到的学习效果。

近期做的DM单设计：（2016年4月）| PS软件

近期的网页设计作品：（2016年5月）| PS软件

近期的网页专题作品：（2016年6月）| PS软件

一路摸着石头过河的学过来，直到今天端着平面设计这个饭碗，这一切都纯属偶然。

如果光盘里没有PS教程，也许就不会让我切身感受到了PS的神奇魔力，也许就会错过敬伟培训的PS教程，就不会把我带入设计的大门，毕业后的第一份工作也许就是去干销售或者进入化工厂什么的，那个偶然广告也注定是个垃圾广告。所以人生的轨迹，总是在一次次不经意的偶然间，发生着不可逆转的变化。

所以只要热爱这个设计这个行业，找准好的老师，找到好的资源，持之以恒，不花冤枉钱也是能够通过自学学好平面设计的，最后希望所有从0基础学习的朋友们都能学有所成，前行路上，我们一起加油。

最后，@酷coo豆将自己学习过的教程整理成册：希望有同样学习需求的朋友可以从中参考一二：http://www.xxriji.cn/career/9.html

作者：@酷coo豆 ；发表于知乎，原文唯一地址：https://zhuanlan.zhihu.com/p/21267134 ，未经许可禁止转载，盗用追究法律责任。

发现一个很有意思的制作网页的教程，一步一步添加 CSS 来润色一个网页。教的都是 CSS 的基础以及一些设计原则。我把它翻译成了中文，大家可以花一点时间浏览一下。

打开网页的时候如下图，大家不要惊慌。按照链接一步一步点就行。

最终结果

中文版链接： 用四分钟创建一个网页

原版链接：Web Design in 4 Minutes

项目 Github 主页：Github - jgthms/web-design-in-4-minutes

原作者：JEREMY THOMAS

　　企业官网的重要性相信大家都很清楚了，现在最关键的是如何设计一款代表企业文化、产品的网站。不仅要提高注重提高企业网站的美观，更有网站的优化问题需要布局好。今天深圳亚网互联小编就来谈一谈企业官网网页设计，企业该如何着手?

企业网页设计 ，有什么要点需要留意?

　　关于网页设计该如何着手的问题，企业网站设计，一般涉及以下的不同阶段：

　　1.确定网站主题

　　网站主题就是你的网站所要包含的主要内容，特别是企业网站更需要一个明确的网站主题，才能集中资源，突显产品服务和企业特色。

　　2.搜集建设网站材料

　　确定网站主题以后，你就可以开始在网站主题相关范围内搜集建设网站的材料了。要让自己的网站内容充实，能够吸引访客用户，就需要广泛搜集网页设计的材料，去芜存菁。网站材料可以从你公司的产品目录、公司和产品介绍及推广资料寻找，也可以从互联网上参考同业的网站，或从报纸杂志和多媒体上搜集亦可以。

　　3.网站规划

　　网站设计是否成功，很大程度上取决于网站设计者的规划水平;网站规划做得好，才能建设一个专业的企业网站。网站规划涉及许多网页设计的知识和经验，而且范围很广，其中包括：网站结构、网页栏目设置、网站风格、颜色搭配、版面布局等等。

　　4.选择合适的网页设计工具

　　现时的网页设计工具很多，有编辑HTML网页设计的软件，亦有线上CMS内容管理系统，选择时要考虑企业自身的需要，例如是否要经常自行更新网站内容、员工的网页设计能力等等。

　　5.网站制作

　　这是把网站材料，按照网站规划实现建设网站的过程。

　　6.网站测试

　　这是网页製作完毕后，把网站发佈到网页寄存商的Web服务器空间上测试的过程，目的是确保网站在不同浏览器都显示正常，而且网页每个链结都能连到正确的页面，没有死链的问题。

　　7.网站推广

　　网页制作完成后，还要不断推广，才能让更多的人认识它。推广的方法有很多，例如注册搜寻引擎、搜寻引擎优化、加入点击广告等。当然，如果你在网页设计初期，已经充分考虑搜寻引擎优化的因素，建立搜寻引擎友好的网站，日后网站推广的投资和工作便可以节省不少。

　　8.网站维护

　　网站维护是指经常更新网站内容，才能够吸引和留住访客。如果你的网站是CMS内容管理系统建立的，日后网站维护的工作便会容易方便许多。

“摘要：想要在当前众多的网页设计中突显出来,合理的排版与布局,是网站设计师不容忽视的要点之一。”

任何一个具有创意的网页设计方案，都会把目光聚焦在布局和色彩搭配上。这个餐饮o2o网站独特的地方，就是在用户界面上推出了各种吸引眼球的甜点冰淇淋。网站的排版布局比较简约大气，适当的留白，再加上一些美观的字体设计，让整体看起来更加时尚有活力。

网站设计有一个终极目标，介绍鼓励用户去点击、去操作。这些操作行为包括注册或者查询内容等。这样就要求设计师能够把登录注册按钮突显出来，让用户一下子就能注意到，设计师需要以用户的角度出发去考虑这些问题，才能做出更好的用户体验设计。

大量的文字描述会给人一种沉闷的感觉，这个餐饮网站通过大量的食品图片加上少量的注释，很好的解决了这一问题，“我们的食物有多好吃，不用多说，看图就知道了！”

网页布局在网页设计中起到了很大的作用，不仅能让网页整体看起来更协调，还能提升网站本身内容的质量。

作者：品创设计

来源：用户体验设计|ueui

微信公众号：PBIDS2008

Q：网页设计的尺寸是多少？

制作网页时，我们选用的分辨率是 72像素/英寸，使用的画布尺寸1920*1080px。

但是并不代表我们可以在整个画布上作图。
网页的布局主要有两种，左右型布局 和 居中型布局。布局的不一致，使得可设计的空间也不相同。

左右布局，灵活性强， UI 的限制小；左边通栏为导航栏，宽度没有具体的限制，可根据实际情况调整；右侧为内容版块范围，是网站内容的展示区域。

居中布局， 中间的黄色部分为有效的显示局域，用于网站内容的展示；换句话说，两边均为留白，没有实际用途，只是为了适配而存在；内容显示的区域，最好控制在 1000-1200px。

Q：选择什么样的字体？

字体设计的总原则是：可辨识性和易读性。

中文建议使用 微软雅黑 字体，英文则建议使用 arial无衬线字体，常用的字体字号大小有以下几种：

12px 是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容；14px 则适用于非突出性的普通正文内容；16px 或者 18px 适用于突出性的标题内容。

网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要 优先使用偶数字号。

字体规格也不需要太多，最好使用三种混搭。

如果需要更多层次的区别，可以用改变字体颜色或者加粗的方式来实现。

Q：字体间距舒适范围是多少？

相邻两个文字的间距，其实不需要太过介意，除了特殊的需求之外，都可以使用默认数值的间距。

行间距，推荐以 字体大小的1.5—2倍 作为参考；段间距，推荐以 字体大小的2—2.5倍 作为参考。

即，当选用14px 的字体时，行间距：21—28px；段间距：8px—35px。

Q：字体颜色设计技巧？

主文字颜色，建议使用 公司品牌的VI颜色，可提高公司网站与公司VI之间的关联，增加可辨识性和记忆性。

正文字体颜色，保险起见，选用易读性的深灰色，建议选用 #333333到#666666 之间的颜色。

辅助性的，注释类的文字，则可以选用#999999之类的比较浅的颜色。

如果，你对颜色驾驭能力比较强，你也可以选用 偏公司VI颜色的深色，作为正文字体颜色或者辅助性文字颜色。

例如公司的品牌色是蓝色，那么，正文字体就可以选用偏蓝的深色。这样处理之后，文字就带有了环境色，网站整体色调将更加和谐。

Q：其他需要注意的事项有哪些？

做网页设计时，你还要特别 注意网页的首屏内容，在构图和内容呈现上，首屏模块的设计至关重要。

除去任务栏，浏览器菜单栏以及状态栏的高度，剩下的是首屏的高度。Window XP的首屏高度平均值是580px，Window 7的首屏高度平均值是710px。

综合考虑到Window XP已经逐渐退出市场，在实际操作时，我们 以710px 作为依据。

如下图所示，黄色区域则是我们设计时需要着重考虑的首屏范围。

另外，是关于图片尺寸的问题。需要 全屏显示的图片，宽度尺寸严格设计为1920px。

但是值得注意的是，图片内容的有效范围不能超过网页内容的有效范围，即 控制在1200px以内。避免遇到小屏幕设备时，内容显示不全，而造成訊息的遗漏的情况。

"CSS设计奖" 每年颁发给设计优秀的网站，在保证功能性和可用性的前提下，最大限度的在网站设计方面有所创新。今年，有32个网站获此殊荣，请点击以下网址欣赏。

01 亚历山大·罗谢作品集

网址：http://www.alexandrerochet.com/

法国艺术总监和设计师亚历山大·罗谢的作品集。

02 因为回忆

网址：http://www.because-recollection.com/

从结实音乐至今已有十年， 对于这个周年纪念日，通过一个互动的旅程可以勾起对音乐的全部回忆。

03 优选品牌

网址：https://bonnemarque.se/

优选品牌是“从制造者的混乱中诞生”中诞生的新品牌。

04 骑士的挑战

网址：https://cavalierchallenge.com/

姿势和平衡是创建骑士系列游戏平台的的第一个挑战。

05 音弦冲浪者

网址：http://chordsurfer.redbull.com/

发现一个音乐和欢乐的世界，冲浪到红牛电视的节日，使用WebGL技术实现无限赛跑。

06 崩溃

网址：http://www.cssdesignawards.com/woty2016/collapse

崩溃是社会的终结模拟器，使用真实数据来创建个性化的体验。

07 匡威钻石

网址：http://counterclimate.converse.com/

大都市是一个霓虹灯环状，未来的反乌托邦世界。

08 加密使命

网址：http://www.cryptarismission.com/（需翻墙）

加密是美国军方的最需要的STEM技能，以WebGL游戏进行测试。

09 在地狱中颤抖

网址：http://falter.madebywild.com/#en

你敢看看镜子，体验过今天的生活地狱吗？

10 美丽的菲利波

网址：http://www.filippobello.com/en/

贝洛：虚拟体验超越了已知的界限。

11 空洞

网址：http://hollow.org.uk/

漫步在森林的世界里，用空心探索地球的历史。

12 猎人在我们中间

网址：http://dev.weareglow.com/syfy_hunters/

利用WebGL和Three JS等Web技术，Glow与Syfy合作创建了一个互动体验，将猎人的世界带入生活。

13 IFLY 50

网址：https://www.ifly50.com/en_cn/50

为了庆祝 "IFLY KLM" 杂志标志性的第五十版，我们创造了极致的旅行收藏！

14 INRA70年

网址：http://70ans.inra.fr/

訊息和通信技术70周年，通过互动之旅探索农业研究的国家研究所历史。

15 珍妮·约翰内森作品集

网址：http://www.jennyjohannesson.com/ （需翻墙）

珍妮·约翰内森的作品集，由珍妮在加州设计，阿里斯蒂德Benoist在法国完成。

16 2016年KIKK文化节

网址：http://www.kikk.be/2016/

KIKK是一个国际数字和创意文化节。

17 Kontra K在你身边

网址：http://andeinerseite.video/

第一人称的实时动作和移动体验，让你用一个手指完成刺杀。

18 最后的高卢

网址：http://lederniergaulois.nouvelles-ecritures.francetv.fr/

通过创新和身临其境情景，体验 “最后的传奇与盖尔” 的故事。

19 基因座

网址：http://www.locus-solus.it/en/（需翻墙）

一点点的盖·奥伦蒂愿景收集在一个限量版由Exteta，它风靡与60年代，在那里的颜色满足设计，任何事情都可以发生！

20 明实验室

网址：https://minglabs.com/en

明，光明的意思。明实验室的工作，是两个最强大的光源（太阳和月亮）的融合 。

21 现在你看我2

网址：http://www.nowyouseeme.movie/

越接近，越看不到。 通过滚轮控制缩放，展示各种幻想场景。

22 克丘亚语Lookbook2016

网址：http://lookbook.quechua.com/spring-summer-2016/en

通过互动之旅探索南非克丘亚语2016年新春/夏季系列！

23 RESN

网址：http://resn.co.nz/

RESN是一个创造性的数字机构。

24 七山自然的组合

网址：http://www.sevenhillswholefoods.com/experience/

探索七山旅程：沉浸和情感之旅，介绍七山意识和关心质量和相关人员。

25 空间顾问

网址：http://www.space-advisor.ca/en/#

空间顾问是纪录片 “超越地球” 的互动体验版：新空间的开始。

26 春夏2016

网址：http://springsummer.dk/

我们通过品牌服务，数字故事，引人入胜的内容和丰富的购物体验建立强大的品牌。

27 SyFy：魔术师

网址：http://www.brakebillsu.com/

一个互动网站，展示了新的SyFy系列“魔术师”，每次一集播出时解锁特殊的神奇内容。

28 时代

网址：https://thefwa.com/

所有新的时代，是进化还是革命？ 一个3年的过程，创造最好的时代。

29 电影任务

网址：https://www.valerian.bnpparibas/

电影任务使你沉浸在电影式的体验中：瓦莱里安和千行星的城市。

30 VHS 复古看守者

网址：http://retrominder.tv/

90秒挑战你的复古文化。

31 战争1996

网址：http://www.warof1996.com/

互动WebGL经验，探讨1996年战争对促进电影的影响，独立日：复活。

32 WAAARK

网址：http://waaark.com/

法国创意网络工作室出品。

——————————————————————————————————————————

我们不是干货的生产者，我们只是优秀的搬运工

感谢原作者的辛勤归纳

主要是自己手动打字整理总结的之前的，可能有些不全，是为了防止自己忘记，加深记忆。

网页的版式设计通常包括：视觉元素及其组织形式、页面间的专场以及网站的导航形式等。“视觉元素的组织”包括元素的大小和数量、表格的布局、散点组合与块状组合、主题形象的体现、留白效果的表现、图与文的关系、曲线与直线的组织、水平线与垂直线以及斜线的比较，等等。根据不同的组织形式，可以将网页的版式大致划分为以下几种类型：骨骼型、满版型、分割型、中轴型、倾斜型、对称型、焦点型、三角型、自由型。

骨骼型：网页中骨骼型是一种规范、严谨的分割方式，类似于报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。通常以竖向分栏居多。这种版式给人以和谐、理性的美。

骨骼型版式常为综合门户、新闻媒体类网站所采用。

例如：crl.cn

满版型

满版型页面以图像充满整版。主要以图像为诉求点，可将部分文字置于图像之上。视觉传达效果直观而突出，给人以生动大方的感觉。

满版型版式被各种网站所采用，其中以韩国网站居多。

例如：http:세명대학교

http://www.t1j.co.kr/

http://event.kt.co.kr/

分割型

分割型版式指把真个页面分成上下或左右两部分，分别安排图片或文字内容。两部分形成对比，使图片部分感性而具表现力，文字部分则理性而具说服力。可以调整图片和文字所占的面积比例，来调节对比的强弱。如果图片比例过大，文字字体过于纤细，段落疏松，会造成视觉心理的不平衡，显得生硬。如果通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。

例如：http://www.hitom.co.kr/

http://www.vonosoup.co.kr/

中轴型

中轴型版式指沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。中轴型版式为各类网站所采用。

例如：http://torchrelay.beijing2008.cn/

http://www.samsungypm.com/

倾斜型

倾斜型版式是将页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。

倾斜型版式为各类网站所采用。

例如：휴비스 메인 | Huvis

Welcome previsualsdesign.com - Hostmonster.com

http://www.coca-cola.com.ar/elladococacola/

对称型

对称型版式的页面给人稳定、严谨、理性的感觉。对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。四角型对称也是其中一种，指在页面四角安排相应的视觉元素。

对称型版式为各类网站所采用。

例如：http://pianteepassione/com/

피망 - 즐거움이 다르다! 피망

焦点型

焦点型的网页版式通过对浏览者视线的诱导，可以使页面产生强烈的视觉效果，如集聚感或膨胀感等。

焦点型分三种情况：

中心---将图片或文字置于页面的视觉中心。

向心---视觉元素引导浏览者的视线向页面中心聚拢。

离心---视觉元素引导浏览者的视线向外辐射。

例如：行政書士 講座ナビ

http://musicaltalk.cafe24.com/

Buy Lubricants, Jelly & Sex Toys for Couples online | K-Y®

三角型

三角型版式指网页各视觉元素呈三角形或多角形排流。正三角形最具稳定性，倒三角形则可产生动感。侧三角形构成一种均衡版式，既安定又有动感。

例如：티티호스팅

ペレーダ | molten モルテンスポーツ事業本部

http://orions.co.kr/

自由型

自由型版式的页面具有活泼、轻快的气氛。

自由型版式也可应用于多种网站。

例如：http://9dan.aekung.co.kr/

http://www.sonnorl.co.kr/

本文源于@酷coo豆的回答：想要从事网页设计，需要学习哪些软件？我大一，因为专业的问题需要自学？

一、平面设计与网页设计

自从@酷coo豆 由平面设计，转向了网页设计后。感觉到两者之间有着太多的共性，共同的基础理论、常用的设计软件都大同小异。其最大的不同就是承载媒介的区别——一个是“印刷纸张”，一个是电子屏幕。所以对于网页设计需要学什么软件，其主要还是以Photoshop为主，包括UI也是一样。

另外由于是电子屏幕上的设计，相对传统平面设计多了时间、空间两个维度的变量。时间上的延伸，可以推演出更多的交互，和动态效果；空间上：体现在其版面可以上下滚动或左右切换，不受固定尺寸的约束。但其本质还是平面设计！只是网页设计在交互方面可以发挥更多的创意；而平面设计则可以在印刷工艺、材质、印刷刀版上的变换，做出更多颇有创意，触手可及的互动效果来。

我在《认识一下什么是平面》一文中也分享了自己的观点：广告设计师、UI设计师、网页设计师、等设计岗位，则正是朝着各自不同领域专研细分的发展结果，而广义的平面设计则更像是对这些职位的一个更加笼统的称谓。

二、网页设计需要学什么软件？

以下则是上述问题是全部回答内容。 ↓↓↓

1. 必学Photoshop软件

既然是网页设计，那么Photoshop自然是必须要学的咯。在写代码前，我时常用photoshop来完成网站内页效果图的制作。学习Photoshop不是最终目的，其更需要的是：要懂一些视觉层面、设计理论以及交互设计相关的知识，以避免一些常识性错误。

▼用PS完成的：网页设计标注图

2.掌握Dreamweaver软件

懂点HTML、CSS前段代码，并掌握Dreamweaver（点击下载DW），是一个网页设计师的标配。DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，重设计、轻代码所见即所得是初学的必备。因为网页设计稿完成后，它只是一张静态的图片，此时还需要你配合web前段工程师，在浏览器中重构设计稿，你的工作才算完成。

关于配合

虽然在实际工作中，写代码是由前段工程师负责，但掌握一些代码知识是必须的。你必须明白你设计出来的东西，哪些该用代码实现、那些该用图片实现，方便你更好地切图、以及图片资源输出以提高效率。相信在这样的情况下，你会和Web前段配合得很愉快的。

每天工作时，我的Partner（前段工程师）就坐在我的旁边，每天交流密切，感情甚好。还好我懂点代码，偷笑:-D。

精通以上两款软件，对于从事网页设计工作是足够了的。如果需要更好的提升、以及团队协作。可学习以下一些软件。

3.illustrator软件、CorelDRAW

处理矢量图形、提取一些素材、同事之间协作，可能会用得到。CorelDRAW软件同理。

4.After effect软件

用于做一些网页所需的动画效果制作，可导出为mp4、swf等多种格式。可能也有人会想到用Flash，不过感觉用flash有些过时，没必再要学了。

以上就是 @酷coo豆 整理的有关“从事网页设计需要学什么软件？”问题的全部内容，最后感谢你的阅读。

——

三、拓展阅读

网页设计的核心技能是视觉、交互、代码，这是网页设计师自家技能的一亩三分田，值得我们在上面一直去下功夫的，其相关度由强到弱。

相关教程：网页设计自学教程（来自BAT网页设计师的实力巨献）

网站建设流程：

1. 解析需求——2. 交互设计——3. 视觉设计——4. 网页重构——5. 调试上线，其具体的内容，过几天我将在「平面设计学习日记 - 知乎专栏」详细分享一下其制作流程。

实例说明：

▲浏览器测试 | 代码撰写 | PS输出的设计稿。

上图为 @酷coo豆 制作平面设计设计学习日记网（http://www.xxriji.cn）的过程截图，像这种比较简单的网站就主要运用到Photoshop、Dreamweaver软件就可搞定。上图中编写代码用的是件sublime_text（用Dreamweaver也行，看个人习惯）。

（完）

——

版权声明

作者：@酷coo豆 ，公众号：followdesign；

原文地址：https://zhuanlan.zhihu.com/p/24856761

主站：平面设计学习日记网（www.xxriji.cn/）

本文为@酷coo豆原创，首发于知乎与平面设计学习日记网。非商业转载请注明「作者」、「原文地址」，若需商业转载或用于培训转载请联@酷coo豆 获得授权。