有关网站网页设计中的那些事儿分享
从这周起，将汇总QQ交流群中每天回复读者的一个网页设计方面的问题，按照一周的周期集结成文章，每周五发布在博客并共享在群中，供大家阅读参考。相较于我们经常发布的设计教程，这样的问答对于个人来说更有针对性，离我们日常的设计工作更近一些。我个人也有这样的体会，有时会有一两个问题长期停留在脑子里，得不到解决，偶然的碰到刚好涉及到这方面的文章，会有一下子豁然开朗的感觉。所以这样的形式也是非常有价值的。以下就是第1周的所有问题和答复，希望在设计对大家有所帮助。
一、质感的表现、作品好坏的评价(小李飞刀于8月24日星期五)
网站里怎么表现质感啊，很干净，很震撼的感觉。望群主给解答，最好具体些，比如导航光亮的感觉有几种表现方式，布局应该怎么布局，请问怎么知道自己做的作品是好还是不好，比如海报超市的海报。怎么才能改进觉得自己的问题宽泛了，也可能是我没说清楚。总之希望群主能听到我的心声，我遇到瓶颈了，不知道什么是好作品，对于海报。
答复： 光亮感觉的设计看上去样式很多，其实主要在于细节方面的变化，如果要问具体有多少种设计样式的话，可以说多到无穷尽。关键是看元素的结构以及高光和阴影的变化。不同的元素结构和光线效果就能产生不同的元素样式。随便举几个例子来说明：
上面这四个元素，由于结构和光线的不同，差异应该说还是非常明显的。具体在你的设计中应该使用哪种风格，哪种色彩，要和设计的信息内容相关联，要能产生视觉上的联想。举个例子，如果你要设计一个关于汽车拉力赛的设计，很显然，这种干净而光亮的风格是不合适的，而更应该考虑粗糙、原始、自然的视觉感受，可能你需要用到的更多的某种粗糙的笔刷的效果，而不是上面的这些设计风格。
回答你的第二个问题，关于如何评价作品的好坏的问题。有人说这完全是仁者见仁，智者见智，完全没有标准。我个人感觉这种说法只说对了某一部分，不能说概括了全部。好的设计应该是有他的某些标准的，例如，要展示的产品的特性或者表达的某种概念是否在设计中得到了较好的体现?重要的信息在视觉上得到了重要的体现而次要的信息做了次要的处理?色彩方案和产品是否契合?整个的设计气氛够不够?我想对于这些问题，应该还是有一些比较一致的看法的。
二、资源分类、遇到瓶颈再提高(Weison于2012年8月27日星期一)
飞鱼哥，您好!听过你的几次讲座和看了你的BLOG，感觉你很专业。我是一名毕业两个多月的设计专业类的学生，打算从事网页设计相关的工作(界面设计)， 现在我想请教你几个问题：
1.在日常生活中，我会搜集一些我觉得有意思的、很有质感的图片和网站，但一多就不方便查找和管理，我想请教一下该如何分门别类呢?
2.我的PS技术已经很熟练了，但感觉设计出来的作品还不够高质量，还不能给人一种心灵的摄服力，就是一种看完后会觉得”哇，真好”的感觉，我想请教一下，我该如何做才能这种效果呢?
3. 觉得我的设计思维还不够开阔，虽然看过很多别人的设计，但一到了实际工作中，想来想去都只有加点渐变、投影、高光等，我该怎么做才能做到有创意呢? 附上我的作品，期待你的指点，谢谢!
答复 ：我来逐条回答。
1、我个人经验最好的分类方法是按照设计涉及的行业来分类，例如酒店、教育、设计工作室等，按照这些名字创建文件夹，将相关的设计作品分类放入。之前我还按照风格分过类，比如中国风、web2.0风格等等，但发现需要的时候不容易找到，因为我们想要参考借鉴别的的作品的时候的想法通常是”让我看看别人做过的有关酒店的网站是什么样的?”所以这时我们只需要找到酒店的那个文件夹就行了，非常便捷。
2、其实这是所有设计师追求的目标，看过你给我发的个人作品后，我建议你在下面两点上下功夫。首先是设计的细节。我们可以观察到，所有让我们在内心不由自主喊出”哇，真好!”的作品可以说在细节方面是无可挑剔的。拿你的作品来说，我个人觉得还需要在细节上有所提高，简单 的举两个例子，比如：
中国海军网中，项目列表和页面左侧的距离太小，让页面看上去满满当当，有些拥挤。文字的黑色和背景白色对比度太大，文字很多就会让整个页面显得脏，建议在保证可阅读性的前提下调成灰色。虚线分割线相较于文字来说明显是次要的元素，所以不要做的这么显眼，再低调处理一下应该更好。
标题多样化军事任务左侧的海浪图标和标题内容契合度不够，图标本身也不够明晰，打眼一看不知道是什么东西，风格和整个页面的风格也不太搭，所以你可以看到，单单一个图标的使用就要考虑非常多的东西，而这些可以说都是细节，什么时候这些问题都考虑到了，设计的水平也就提高了。另外，理论研究的背景色绿色和直击前沿的背景色蓝色接触的地方看上去很模糊，让人感觉设计上还不够用心，在网页设计中，像这些1像素的地方往往正是设计美感体现出来的地方。
细节考虑到了以后，接下来就是设计的气氛了。气氛是个很难说明白的东西，我个人的理解是，网页设计整体的气氛是靠各个元素视觉风格上的统一来营造的，要保证整体的气氛足够，必须要有设计方向上的统一。举个例子，看下图：
这是大家都很熟悉的荒野求生的主持人贝尔的一个专题页面，大家可以观察到，无论页面上的哪个元素，写在石头上的导航、破旧磨损过的文字kv、粗糙笔触画出的内容分割线以及撕裂的纸张构成的内容背景在视觉风格上都是既有差别而方向上统一的。所以打开这个页面，扑面而来的就是原始、自然、充满野性的气息了，这是我们在做设计中营造令人深入情景的值得注意的一个方面。
3、这个问题说明你做的、看的还不够多，表现手法欠缺和不足。再拿上面的页面来说，假如让你做这个页面，你能想到用写在石头上的导航、破旧磨损过的文字kv、粗糙笔触画出的内容分割线以及撕裂的纸张来去完成每一部分的信息内容，既让他们发挥原有的功能性，还能保证视觉上的感受吗?这是多多练习以后才能达到的水准，所以还是老话，多学、多做总没错。关于你说的加渐变、高光等手法、只是代表了一 类型的设计风格，看到上面充满野性的设计页面，我想我们一下就能明白自己的局限了。
三、利用css框架快速布局(ds于2012年8月28日星期二)
您好!老师。我想请教下老师，我div+css排版 框架如何才能搭的快一些，排版页面也能迅速一些，您有没有成熟的div+css的框架体系，为我们分享一些您的结构。同时有没有好的建议可以给我!
答复：我自己对于用css排版没有速度上的迫切要求，所以一直使用EditPlus手写。如果你需要某种现成的框架来提升排版效率的话，可以试试 960网格系统，960网格系统不仅提供了设计时所需要的psd模板文件，而且对于前期的代码也是支持的。使用框架虽然能够提高前期设计和排版的效率，但是前提是要熟悉框架的结构和预设值。960网格系统基本的排版代码如下：
<div class="container_12"> /*表示960像素内总共有12栏*/
<div class="grid_7 prefix_1"> /*共占7栏，前面预留1栏 */
<div class="grid_2 alpha"> /*共占2栏，第一行的第一个类选择器需要添加alpha类 */
</div>
<div class="grid_3">
</div>
<div class="grid_2 omega"> /*共占2栏，第一行的最后一个类选择器需要添加omega类*/
</div>
</div>
<div class="grid_3 suffix_1"> /*共占7栏，后面留出1栏*/
</div>
</div>
四、有没有所谓的设计行业规范?(LoidCo于2012年8月29日星期三)
想请教一下大家，在网页设计中，有没有所谓的设计行业规范呢?比如字体一般默认用宋体 双数的字号，或者过去很多网站的logo设计都是包括图标+中文+域名这样的。而像下面的导航中选中状态一般如何设计是符合行业规范的?像花瓣这样 导航条中选中状态用红色 那如果我的标志色是蓝色 用蓝色是合适的吗?
答复：我个人认为，不存在所谓的行业标准，怎么设计都行，关键考量的点在于信息表达的是否清晰、用户的体验是否良好以及视觉上舒服不舒服。所谓的设计规范，也只能说是大家常用，时间久了似乎就成了设计的规矩了，实际上这些所谓的设计规矩随时能够打破，比如大家在使用中文字体时，用12像素和14像素的文字，原因是这两个字体大小既保证了可读性看上去还很美观，但是如果作为标题来说，14像素大小的文字有时也显得过于小了，这时候22或者24像素的大小也许更为适合。再比如黑体相较于宋体很少用在正文中，原因也是一般正文14像素大小的黑体可读性不如宋体好，但是如果放在设计某些宣传口号中，黑体也许更为合适。所以要视情况来定，既没必要刻意的去打破这些习惯，更不要被这些习惯所束缚。对于英文来说，网页设计中常会涉及到非衬线字体中的 Arial，Tahoma，Verdana以及衬线字体中的Georgia字体，这些都是会经常用到的字体。
五、网站信赖感、调整设计中焦躁情绪(溪于2012年8月30日星期四)
1、在设计中怎么样给人安全感?比如：网银/支付宝支付页面?色彩搭配还是构图坚固?
2、怎么引导用户更有继续观看的欲望?或者说怎么在构图中设置悬念?
3、怎么调节关于设计倦怠的情绪?处在这种时期总会莫名狂躁…
答复：第一个问题。你想说的问题应该是一个网站如何给访问者以信赖感?让访问者放心的在其上填写个人信息、进行资金方面的敏感信息的操作?这的确是个问题。但是影响到访问者对一个网站的信赖感的因素非常多，你说的视觉方面因素例如色彩搭配、构图等因素只是其中的一个方面，而且可能还一 小的方面。但这并不是说视觉方面不重要，想想一个面目狰狞、飘满广告的网站能让人在上面进行敏感信息的操作吗?但是下面的因素也许能让我们产生更多的信赖感：
1、品牌的知名度。我个人的网上账户操作基本上都是用支付宝来完成，但是哪天苹果或者微软推出本地的第三方支付服务，我想我是会放心的尝试一下的。
2、优质的服务。快捷无障碍的支付体验，快速的提现、转账、信用卡还款等功能。
3、良好的用户体验。这体现在网站的每一个细节，比如，在填写信用卡号时，将信用卡号以四位一组自动断开，或者是清晰简洁的表单说明文字等等，往往是网站的细节最能留住人。
4、舒服的视觉感受。这就是你上面提到的色彩搭配、构图等等要素。
一个好的网站要做的东西很多，视觉方面的东西是我们最直观感受到的，但相较于网站的信息以及功能来讲，却不是最重要的方面，而这些东西才是我们最应该关注的地方。
第二个问题。我个人觉得没有那么玄，我做东西从没有在构图中设置悬念的意识，呵呵，可能水平还不够，我觉得东西做好了用户自然有观看的欲望。
第三个问题。这应该是一个比较普遍的问题，大家在做设计的过程中应该都有这种感受，尤其是任务重、时间紧的情况下，更是焦躁不堪，表现在设计上就是考虑不充分，东抓一把，西抓一把，刚冒出一个想法，赶紧就去实施，没做两步，只要一遇到需要耐心慢慢去做的地方，马上改换另外一套方案，做两步，又感觉不行，越做越焦躁、越焦躁越做不好，成了恶性循环。为避免这种情况，我个人觉得在无论时间多紧，还是不要急于动手，前期的考虑、草图绝对是必要的，一定要克制自己打开PS的欲望，一点一点做并且按照考虑好的方向坚决执行，我想这样既能保证作品的质量，也能让设计过程没那么煎熬，真的焦躁了，歇一歇，干点别的也是一个好方法。
一、质感的表现、作品好坏的评价(小李飞刀于8月24日星期五)
网站里怎么表现质感啊，很干净，很震撼的感觉。望群主给解答，最好具体些，比如导航光亮的感觉有几种表现方式，布局应该怎么布局，请问怎么知道自己做的作品是好还是不好，比如海报超市的海报。怎么才能改进觉得自己的问题宽泛了，也可能是我没说清楚。总之希望群主能听到我的心声，我遇到瓶颈了，不知道什么是好作品，对于海报。
答复： 光亮感觉的设计看上去样式很多，其实主要在于细节方面的变化，如果要问具体有多少种设计样式的话，可以说多到无穷尽。关键是看元素的结构以及高光和阴影的变化。不同的元素结构和光线效果就能产生不同的元素样式。随便举几个例子来说明：
上面这四个元素，由于结构和光线的不同，差异应该说还是非常明显的。具体在你的设计中应该使用哪种风格，哪种色彩，要和设计的信息内容相关联，要能产生视觉上的联想。举个例子，如果你要设计一个关于汽车拉力赛的设计，很显然，这种干净而光亮的风格是不合适的，而更应该考虑粗糙、原始、自然的视觉感受，可能你需要用到的更多的某种粗糙的笔刷的效果，而不是上面的这些设计风格。回答你的第二个问题，关于如何评价作品的好坏的问题。有人说这完全是仁者见仁，智者见智，完全没有标准。我个人感觉这种说法只说对了某一部分，不能说概括了全部。好的设计应该是有他的某些标准的，例如，要展示的产品的特性或者表达的某种概念是否在设计中得到了较好的体现?重要的信息在视觉上得到了重要的体现而次要的信息做了次要的处理?色彩方案和产品是否契合?整个的设计气氛够不够?我想对于这些问题，应该还是有一些比较一致的看法的。
二、资源分类、遇到瓶颈再提高(Weison于2012年8月27日星期一)
飞鱼哥，您好!听过你的几次讲座和看了你的BLOG，感觉你很专业。我是一名毕业两个多月的设计专业类的学生，打算从事网页设计相关的工作(界面设计)， 现在我想请教你几个问题：
1.在日常生活中，我会搜集一些我觉得有意思的、很有质感的图片和网站，但一多就不方便查找和管理，我想请教一下该如何分门别类呢?
2.我的PS技术已经很熟练了，但感觉设计出来的作品还不够高质量，还不能给人一种心灵的摄服力，就是一种看完后会觉得”哇，真好”的感觉，我想请教一下，我该如何做才能这种效果呢?
3. 觉得我的设计思维还不够开阔，虽然看过很多别人的设计，但一到了实际工作中，想来想去都只有加点渐变、投影、高光等，我该怎么做才能做到有创意呢? 附上我的作品，期待你的指点，谢谢!
答复 ：我来逐条回答。
1、我个人经验最好的分类方法是按照设计涉及的行业来分类，例如酒店、教育、设计工作室等，按照这些名字创建文件夹，将相关的设计作品分类放入。之前我还按照风格分过类，比如中国风、web2.0风格等等，但发现需要的时候不容易找到，因为我们想要参考借鉴别的的作品的时候的想法通常是”让我看看别人做过的有关酒店的网站是什么样的?”所以这时我们只需要找到酒店的那个文件夹就行了，非常便捷。
2、其实这是所有设计师追求的目标，看过你给我发的个人作品后，我建议你在下面两点上下功夫。首先是设计的细节。我们可以观察到，所有让我们在内心不由自主喊出”哇，真好!”的作品可以说在细节方面是无可挑剔的。拿你的作品来说，我个人觉得还需要在细节上有所提高，简单 的举两个例子，比如：
中国海军网中，项目列表和页面左侧的距离太小，让页面看上去满满当当，有些拥挤。文字的黑色和背景白色对比度太大，文字很多就会让整个页面显得脏，建议在保证可阅读性的前提下调成灰色。虚线分割线相较于文字来说明显是次要的元素，所以不要做的这么显眼，再低调处理一下应该更好。 标题多样化军事任务左侧的海浪图标和标题内容契合度不够，图标本身也不够明晰，打眼一看不知道是什么东西，风格和整个页面的风格也不太搭，所以你可以看到，单单一个图标的使用就要考虑非常多的东西，而这些可以说都是细节，什么时候这些问题都考虑到了，设计的水平也就提高了。另外，理论研究的背景色绿色和直击前沿的背景色蓝色接触的地方看上去很模糊，让人感觉设计上还不够用心，在网页设计中，像这些1像素的地方往往正是设计美感体现出来的地方。细节考虑到了以后，接下来就是设计的气氛了。气氛是个很难说明白的东西，我个人的理解是，网页设计整体的气氛是靠各个元素视觉风格上的统一来营造的，要保证整体的气氛足够，必须要有设计方向上的统一。举个例子，看下图：
这是大家都很熟悉的荒野求生的主持人贝尔的一个专题页面，大家可以观察到，无论页面上的哪个元素，写在石头上的导航、破旧磨损过的文字kv、粗糙笔触画出的内容分割线以及撕裂的纸张构成的内容背景在视觉风格上都是既有差别而方向上统一的。所以打开这个页面，扑面而来的就是原始、自然、充满野性的气息了，这是我们在做设计中营造令人深入情景的值得注意的一个方面。3、这个问题说明你做的、看的还不够多，表现手法欠缺和不足。再拿上面的页面来说，假如让你做这个页面，你能想到用写在石头上的导航、破旧磨损过的文字kv、粗糙笔触画出的内容分割线以及撕裂的纸张来去完成每一部分的信息内容，既让他们发挥原有的功能性，还能保证视觉上的感受吗?这是多多练习以后才能达到的水准，所以还是老话，多学、多做总没错。关于你说的加渐变、高光等手法、只是代表了一 类型的设计风格，看到上面充满野性的设计页面，我想我们一下就能明白自己的局限了。
三、利用css框架快速布局(ds于2012年8月28日星期二)
您好!老师。我想请教下老师，我div+css排版 框架如何才能搭的快一些，排版页面也能迅速一些，您有没有成熟的div+css的框架体系，为我们分享一些您的结构。同时有没有好的建议可以给我!
答复：我自己对于用css排版没有速度上的迫切要求，所以一直使用EditPlus手写。如果你需要某种现成的框架来提升排版效率的话，可以试试 960网格系统，960网格系统不仅提供了设计时所需要的psd模板文件，而且对于前期的代码也是支持的。使用框架虽然能够提高前期设计和排版的效率，但是前提是要熟悉框架的结构和预设值。960网格系统基本的排版代码如下：
<div class="container_12"> /*表示960像素内总共有12栏*/
<div class="grid_7 prefix_1"> /*共占7栏，前面预留1栏 */
<div class="grid_2 alpha"> /*共占2栏，第一行的第一个类选择器需要添加alpha类 */
</div>
<div class="grid_3">
</div>
<div class="grid_2 omega"> /*共占2栏，第一行的最后一个类选择器需要添加omega类*/
</div>
</div>
<div class="grid_3 suffix_1"> /*共占7栏，后面留出1栏*/
</div>
</div>
四、有没有所谓的设计行业规范?(LoidCo于2012年8月29日星期三)
想请教一下大家，在网页设计中，有没有所谓的设计行业规范呢?比如字体一般默认用宋体 双数的字号，或者过去很多网站的logo设计都是包括图标+中文+域名这样的。而像下面的导航中选中状态一般如何设计是符合行业规范的?像花瓣这样 导航条中选中状态用红色 那如果我的标志色是蓝色 用蓝色是合适的吗?
答复：我个人认为，不存在所谓的行业标准，怎么设计都行，关键考量的点在于信息表达的是否清晰、用户的体验是否良好以及视觉上舒服不舒服。所谓的设计规范，也只能说是大家常用，时间久了似乎就成了设计的规矩了，实际上这些所谓的设计规矩随时能够打破，比如大家在使用中文字体时，用12像素和14像素的文字，原因是这两个字体大小既保证了可读性看上去还很美观，但是如果作为标题来说，14像素大小的文字有时也显得过于小了，这时候22或者24像素的大小也许更为适合。再比如黑体相较于宋体很少用在正文中，原因也是一般正文14像素大小的黑体可读性不如宋体好，但是如果放在设计某些宣传口号中，黑体也许更为合适。所以要视情况来定，既没必要刻意的去打破这些习惯，更不要被这些习惯所束缚。对于英文来说，网页设计中常会涉及到非衬线字体中的 Arial，Tahoma，Verdana以及衬线字体中的Georgia字体，这些都是会经常用到的字体。
五、网站信赖感、调整设计中焦躁情绪(溪于2012年8月30日星期四)
1、在设计中怎么样给人安全感?比如：网银/支付宝支付页面?色彩搭配还是构图坚固?
2、怎么引导用户更有继续观看的欲望?或者说怎么在构图中设置悬念?
3、怎么调节关于设计倦怠的情绪?处在这种时期总会莫名狂躁…
答复：第一个问题。你想说的问题应该是一个网站如何给访问者以信赖感?让访问者放心的在其上填写个人信息、进行资金方面的敏感信息的操作?这的确是个问题。但是影响到访问者对一个网站的信赖感的因素非常多，你说的视觉方面因素例如色彩搭配、构图等因素只是其中的一个方面，而且可能还一 小的方面。但这并不是说视觉方面不重要，想想一个面目狰狞、飘满广告的网站能让人在上面进行敏感信息的操作吗?但是下面的因素也许能让我们产生更多的信赖感：
1、品牌的知名度。我个人的网上账户操作基本上都是用支付宝来完成，但是哪天苹果或者微软推出本地的第三方支付服务，我想我是会放心的尝试一下的。
2、优质的服务。快捷无障碍的支付体验，快速的提现、转账、信用卡还款等功能。
3、良好的用户体验。这体现在网站的每一个细节，比如，在填写信用卡号时，将信用卡号以四位一组自动断开，或者是清晰简洁的表单说明文字等等，往往是网站的细节最能留住人。
4、舒服的视觉感受。这就是你上面提到的色彩搭配、构图等等要素。
一个好的网站要做的东西很多，视觉方面的东西是我们最直观感受到的，但相较于网站的信息以及功能来讲，却不是最重要的方面，而这些东西才是我们最应该关注的地方。
第二个问题。我个人觉得没有那么玄，我做东西从没有在构图中设置悬念的意识，呵呵，可能水平还不够，我觉得东西做好了用户自然有观看的欲望。
第三个问题。这应该是一个比较普遍的问题，大家在做设计的过程中应该都有这种感受，尤其是任务重、时间紧的情况下，更是焦躁不堪，表现在设计上就是考虑不充分，东抓一把，西抓一把，刚冒出一个想法，赶紧就去实施，没做两步，只要一遇到需要耐心慢慢去做的地方，马上改换另外一套方案，做两步，又感觉不行，越做越焦躁、越焦躁越做不好，成了恶性循环。为避免这种情况，我个人觉得在无论时间多紧，还是不要急于动手，前期的考虑、草图绝对是必要的，一定要克制自己打开PS的欲望，一点一点做并且按照考虑好的方向坚决执行，我想这样既能保证作品的质量，也能让设计过程没那么煎熬，真的焦躁了，歇一歇，干点别的也是一个好方法。
