注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

网页中的平面设计  

2012-09-27 22:49:32|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

公司安排的轮流培训已经轮到了自己,所以准备了这次的《网页中的平面设计》。


首先看看即将来到的WIN8。

00

WIN8的UI名称叫METRO,看过他们UI的可能很多人会说不好看很简单。Metro中真的很少用到金属光泽、阴影、外发光,更多的是朴素的背景颜色(黑、白等)、简洁的二维图标加上清晰的文字,还有就是七彩的点缀色!和苹果的iOS、谷歌的Android界面最大的区别在于:后两种都是以应用为主要呈现对象,而Metro界面强调的是信息本身,而不是冗余的界面元素。而METRO的设计灵感来源也就是地铁站里的各种标示牌(Metro本来是英文中地铁的意思)。


再看METRO中很多小块的,但是不管是图片,ICON还是纯粹的文字看上去并不凌乱,这是为什么呢?


也许大家会想这样子的风格可以用来设计网页吗?这当然可以啦!


接下来,先再看看一个METRO风格的网页设计:

01


为什么会有这样的设计?


2004年,自己刚出来工作的那年,做网页宽都是700+像素,因为当年显示器主流都是800*600的分辨率。


随着硬件发展显示器越来越大,网页设计中宽都变成了1000像素宽,而现在一般来说都是950和960像素宽,也有更宽的。


2011年,朋友介绍了一个视频,视频中所讲的就是未来的显示端(PC显示器、移动终端设备)设计方向——像报纸一样排版设计。


说到这样的排版设计,其实在之前我们所做的项目中就有两个——木头盒子、潮顽社。


还有一个网站是之前也一直在上的,最近也改版了“视觉中国”,大家可以自己搜索一下,他们现在也是使用的平面排版化的布局方式。


而以上所有的设计其实都是使用的栅格化布局。而栅格化的排版方式是平面设计中非常重要的一个规范。接下来就说说有关于网站中的一些平面设计——网页中的平面设计。

02


看下边张图片:

03

这是一张从天猫首页截取的图片,这个图分成了两个部分:左边是所有的LOGO,右边是广告图片。左边LOGO都是左对齐排版,这个没有什么好讲的,但是右边这些分开成为一小块一小块的图片,而且图片上都写上了文字,而且所有文字都是放到左上角,这样子虽然排的图片很多,但是却不会让人感觉凌乱。而且为了保证视觉上的统一性,所有文字都是上小下大。大家可以想像一下,如果文字的位置和大小都很随意的话,会不会看上去感觉很累。而且当这样子排列的时候都尽量不使用什么效果(阴影、发光等),以避免造成视觉上的脏乱感。而METRO中的设计也是这个原因,所以从视觉上不会觉得乱。


上边主要说的是对图片如何进行排列,其实当我们在制作一个BANNER的时候一样会使用到平面设计中的知识。


接下来,我们再看一个BANNER。

04

大家只需要看一秒,这时候大家看到了什么信息?首先问一下,是关于什么的内容?具体文字是什么?有哪些颜色组成?有哪些图片?

想好这些问题后,接着再看。我们视觉如果下图所展示一样,我们首先看到的是中间那块黄色区域。但是整体上我们也能看到所展示的图片。而设计者传达给浏览者的东西也就是黄色那块区域的内容——打折信息。

现在再问一下,为什么要 个BANNER要这样设计?

首先,看一下给出来的文字“最炫数码,5折起疯抢”。这时候就可以根据炫,可以想到五彩缤纷。数码产品,这些就是什么笔记本,平板、手机什么的,然后再确定一个设计风格,而这个使用的就是比较平面化的一种风格,通过颜色的视觉差来传达信息。当在看这个BANNER的时候,如果不是非常认真去看,就不会记住上边到底有哪些东西,但是只需要看一眼却又能知道是什么内容,那么设计的目的就达到了。


然后再回头来看看这个培训资料本身的设计。

08

看一下最开始做的两个被PASS掉的封面设计。当我做出来第一个后,总感觉文字和背景不和,背景给人一种很活跃的感觉,但是文字的感觉是非常静态的,而且所有文字都是一个字体,更加让感觉不到有什么动感!所以把文字做成了斜体,而且把“平”、“计”两个延长的那一笔末端也做成了一斜角,这样子感觉出来了。第二个就是斜的文字,但是因为下边的英文的问题来了。虽然不知道这句英文翻译对没有,在做完设计后我给朋友看了一下,她一直说英文感觉不好,她建议把英文放到中文上边,因为她觉得在下边让整个设计感觉有种压抑的感觉。对于她的建议我非常不同意,但是她说的问题也确实存在,后来发现了一个更好的方法,就是把英文和中文再分开一点,这种感觉就消失了。封面就这么完成了。为什么内容上我每一个大的内容都会用不同的颜色,首先我想配合封面,还有就是我不想全是同一种底色,让大家犯困。

  评论这张
 
阅读(348)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017