Web Design:给实验室UI们的一堂课(下)

Web Design:给实验室UI们的一堂课(下)

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

Web Design:给实验室UI们的一堂课(下)

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

Web Design:给实验室UI们的一堂课(下)

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

Web Design:给实验室UI们的一堂课(下)

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

Web Design:给实验室UI们的一堂课(下)

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

Web Design:给实验室UI们的一堂课(下)

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

Web Design:给实验室UI们的一堂课(下)

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

Web Design:给实验室UI们的一堂课(下)

Web Design:给实验室UI们的一堂课(下)

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

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

 

Web Design:给实验室UI们的一堂课(下)

Web Design:给实验室UI们的一堂课(下)

 

Web Design:给实验室UI们的一堂课(下)

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

Web Design:给实验室UI们的一堂课(下)

 

【讲稿】

最后一句话,既然大家选择做设计,那就做好,个人的能力越弱,在团队中的替代程度就越高。大家不喜欢听别人喊你“美工”“作图的”,包括现在在软院都是UI不受重视,那么你就要对自己的设计负责。只有你把你的作品当设计出的作品而不是赶工赶出来的大作业,你的作品才能算是作品。

       就说这么多,谢谢大家。

Web Design:给实验室UI们的一堂课(下)

 

 

 

 

 

 

 

 

 

 

 

---------

  最后讲完了回过来一看,也就算是个入门的了,很多想讲的、值得去讲的都没讲出来,以后有时间的吧。

 

  “狗拿耗子....”.......

Web Design:给实验室UI们的一堂课(下),布布扣,bubuko.com

Web Design:给实验室UI们的一堂课(下)

上一篇:Json.Net6.0入门学习试水篇


下一篇:asp.net发邮件功能