Web Design：给实验室UI们的一堂课（下）

浏览数：22 / 时间：2015年06月09日

【讲稿】From top to down，自顶向下哈，首部栏、导航栏之后一般是页面的主模块，也就是Body部分，这一块儿才是你网站的核心内容，文章、新闻、动态、数据、图表、相册等都是在这儿体现出来。在web1.0时代的时候，没有首部栏、导航栏都是字、主要的东西就是Body;而web2.0时候大家开始觉得说，我网站得再美化美化，越做越花哨，很多网站都在搞大图、精图、阴影、高光、渐变，各种图片、色块特效，但是蛋疼的是内容却在缩水，打开一个页面，正文三四行，其他全是导航、热点推荐、广告推荐等，网站已经废掉了。在现在的web3.0，就是最近几年，又重提了之前的web1.0的主张：内容至上！确实，没有内容的网站是无法让用户长时间停留的。

【讲稿】最后就是网页的footer部分，他的作用是页尾导航和版权说明copyright @XXX 2013。在书里面，这就相当于最后一篇的文末致谢或者说是末页声明，没有什么核心的内容。页尾导航主要是当用户滚动整个页面到了最下端之后，又想看别的东西，再滚上去的页面体验肯定很差，尤其是网页比较长，好不容易滚动到下面，又得一下一下转滚轮给轱辘上去，所以，这时候就有页尾导航了，但是最近几年也有新的形式出现，比如说“返回顶部”“快速返回”等，点一下，通过Js函数，页面直接就轱辘回上面了。

【讲稿】其他的页面结构元素还有：侧边栏导航、侧边栏、页面内导航、分页导航、搜索栏等等。每个结构元素都有自己的作用，但是这些东西不是越全越多越好，还是要根据网站的实际内容需要来订制。Think More, Design less,某些角度上也可以这么理解。

【讲稿】内容布局设计的话，主要围绕的是内容放在哪儿、怎么放、放多少。在结构布局确定之后，页面上每个版块是什么也都确定了，就像一本书，提纲目录写完了，确切的每篇文章是什么，就该往里填了。内容布局设计的话还涉及到内容排布、内容组织，一篇博客，为什么有的网站发出来就好看，有的网站发出来就不好看，网站里面的0.618黄金分割点在哪里，这些都是属于内容排布。这块儿UI设计师们需要和网站编辑、内容编辑配合。给了你一推doc文档，怎么组织，怎么用，这就是设计师们需要考虑的了。

【讲稿】我们做完了结构布局、内容布局，怎么样网站变得更美观，那就是需要界面美化。美化的方法有很多、动画、图片、配色、阴影、渐变等等。每个网站都有自己的背景色或者背景图、每个按钮都有自己的初始样式和自己的按下样式、网站的logo、每个小的Icon都需要各位画出来或者P出来，这些就是网页设计师的主要工作：画图。我不会画图，只会一下前端需要的简单的抠图、切图的简单操作，各位UI们是专业的，相信经过特定的训练，各位在网页素材的绘制上会做的很好的。

【讲稿】最后我要提的是交互设计，User experience design，也叫做用户体验设计，设计时候要做的就是通过特效、性能优化来让用户获得更好的使用体验，不要让用户用完吐槽你说：“什么破玩意，怎么用啊”。一些常见的用户交互设计，例如等待加载、延迟函数、动画、下拉刷新、上拉加载等等。在很多大公司里，UI, user interface 和 User experience design是分开的，而UX这个东西每个设计师都得会，因为大部分时候网站整体的风格是由页面设计师决定的。

【讲稿】说到怎么做设计，我这里直接和怎么学设计揉在一起讲。我认识很多人，PS会用，成天抱着本特效书在那儿看，然后设计出来的东西一坨一坨的。他还挺当回事，整的你连吐槽的懒得吐了。首先，你得对当前最主流的设计风格有所了解，你设计出来的网站如果是左图这样的话你就可以收工不用干了，大家学了这么长时间的PS，连什么是好看什么是不好看都分不出来的话，PS也就白学了，本来打算今天吐槽一下web组大一、大二的设计，但是为了考虑。现在最主流的web设计风格有哪些？比如扁平化、大页面、极简、图形抽象化等等。这些设计风格或者说主流的设计是什么样的怎么学？上网站。

【讲稿】推荐大家经常模图，我说的模图不是说，呦，这个图用了个正片叠底、用了个蜡纸特效，我也试试，我说的模图是让大家去一些好的交流的网站，比如lofter、比如点点这些文艺青年、UI青年扎堆的网站，去看看他们的设计，模仿他们的设计去画，从最基础的icon画起，从最基础的配色做起，不要一作图就想着那些稀奇古怪的效果。

同时推荐大家多浏览素材网站，保存下自己的资料库，这些存下来的资料是各位以后做设计的宝库。推荐大家多问问身边人的意见，一个人说不好看可能是审美不同，十个人说不好看那就是你设计的毛病，也许众口难调，但是，你最起码要让大多数人看到之后说“还凑合”。多一些挑剔的眼光，无论是自己的设计还是别人的设计，练就一身吐槽绝技，没事儿多吐自己的槽，自黑才是真的黑。

【讲稿】其实今天说了这么多，大部分我都是在简介，WEB design中有很多值得仔细研究的，比如说扁平化，扁平化的配色有很多讲究，颜色要不能冲撞，色块间的形状搭配等等，扁平化的icon也是可以做的；比如电商网站和企业宣传网站、比如政府网站和个人展示主页，这些网站的设计风格都不同。比如字体搭配，海报的字体、标题图片的字体、按钮中的字体都是不一样的，web中用到的字体和ps上的字体是不同的，虽然现在已经有webfont的技术，但是还是要考虑到性能、速度等等。比如分辨率，现在的屏幕越来越大，如何让你的设计不再拘泥于1024px之内，而是在大屏幕上也有很好的展示效果。有时候也需要考虑旧款浏览器的兼容性，可能你设计的特效没法实现，这时就需要你去和前端工程师一起合作考虑替代方案等等等等，希望以后有机会跟大家在某些专题上再分享更多。推荐大家看一些网页设计的书、博客、网站，再配合上大家不断练习不断实践，web design能力会提高的。