Web Design：给实验室UI们的一堂课（上）
实验室的UI越来越水，设计什么的做的一塌糊涂，所以拖了很久，就想给他们讲一下设计或者说入门吧，上周末才倒出来时间。
这里放上PPT和讲稿吧，懒得去整理板式了。
主要讲了一下Web Design怎么做，大概有什么，然后怎么去做吧，没有什么技术性的东西，属于入门吧。
【讲稿】：
好，我们开始今天的设计讲座，我更倾向于叫做设计沙龙，因为讲座的话是我在讲大家在听，而设计这个东西，每个人都有自己的想法，都有自己独一无二的idea，我希望能够和大家分享我做web这两年来积攒下的经验或者是点滴吧。
好久没有给实验室做沙龙了，其实我还是挺喜欢跟实验室的学弟学妹或者说是学长学姐一起开沙龙或者是讨论东西的，这次准备不太周到，讲的不好的地方，大家多多包涵吧。
【讲稿】中午席铭学长发了个惨无人道的人人，然后我就光荣躺枪被黑了。跟UI组的同学们可能还不太熟，这里简单列了一下我的情况吧。姓李名森，12级，在大一的时候在实验室的Windows Phone组做应用开发，在学C#之后接触到做网站，然后我觉得这一个方向更吸引我，所以现在在转行做Web FrontEnd Engineer,就是大家平时说的前端，前端不是个好活，被后端鄙视，被UI欺负，各位有打算转前端的可以联系我，专业坑学弟学妹。虽然说我是一个前端coder，但是我现在也非常喜欢去做WEB的设计，包括界面和交互设计、也包括网站功能设计。我主要玩的是css、js这两个传统的前端工具，然后有时候也会写点php来实现一些好玩的功能。自己没事也做一些喜欢的网站，比如我和几个朋友一起做起来的darling网，我们有好的功能设计、好的前端，现在就缺个UI了。
【讲稿】今天主要给UI们做一次web设计入门吧，之前给Pm组、Web组都讲过类似的东西，但是针对的方向不同，可能在给pm做沙龙的时候，更倾向于去让他们学会设计web产品、包括设计原则等等，而给web组讲的话主要是技术性的，比如如何实现滚动刷新、如何通过css来改善你的网站。而今天呢，主要想讲的是，关于界面设计和交互设计，因为这些才是一个好的web designer,一个好的 uI应该去做的。在座各位应该都用了几年的电脑，读了一年软件之后对网站这个东西应该是非常熟悉，但是【念PPT】。
【讲稿】第一个版块儿，什么是web design?web 设计是什么？自从我做web之后呢，很多人都说“呦，你是做网页的吧，你是写网页的吧，这个我也会不就是<html>吗”，我只能笑着说“是是是”。然后我认识很多做UI的，不对，不应该叫做UI的，应该叫“用PS的”，他们常说“web设计啊，我会啊，不就是拿PS画个页面吗？”埋汰我可以，埋汰web design绝对不行，【点】扇死丫！
【讲稿】粗略的来讲，抛去主要负责数据处理、模型处理的后端版块儿，一个web的前端设计可以分为这些板块：【念PPT】。
【讲稿】结构布局是指什么呢？我认为哈，结构布局主要指的是网页的界面元素布局和网页的前端逻辑，比如说，大家天天上网，刷网页，但是，一个网站的结构元素、结构布局有哪些？ 这些又怎么设计呢？
【讲稿】按照一个常用网站的模式，我们排除掉那些full-screen、single-page，现在一个常见的网站，会有header首部栏，我们可以把一本书当做一个网站，那首部栏就是这本书的书皮，它往往是丰富多彩带图片、高端大气带特效的，它最直接的反应了网站的主要内容、这是一个什么网站、这是一个关于什么的网站、网站的主题是什么，一般是图片、大色块、flash动画，高度的话一般在100px左右，你不可能整个页面一半都是你这header图吧，你要这么干了，就是标题党了。有的时候首部栏也可以被当做广告栏，还是置顶的，所以这块儿的广告一般都比较贵= =
【讲稿】很多网站设计的时候首部栏被简化了，因为没有什么固定要介绍说明的，比如腾讯新闻，没有必要做一张逼格非常高的图放在那儿，然后通过图片告诉大家“我们是做新闻的，不是卖水果的”，所以有的功能性比较强，页面指示比较明确的网站，喜欢把nav导航栏当做首部来使用。Nav导航栏，像是我们之前说的那个例子书里面的目录，简明扼要，想看什么直接翻过去，导航也是，想看娱乐、音乐、体育，直接点进去就行可。这种情况在门户网站、官方网站上出现的比较明显，但是在很多的企业网站、或者是宣传网站上，使用图片类的比较多，因为一图胜千言嘛。图片总是能抓得住用户的眼球，就像各位做一个海报一样，你海报上要是平铺的都是字，肯定很少人在那儿看完，你要是换个美女图的话，很多少年们都会羞涩的观望的。