1、用户体验设计(UED)讲座,2016.11.18,WEB交互设计规范 及界面设计,主讲人：李真 副教授 高级工艺美术师 高级工程师,目 录,用户体验设计(UED)讲座,没有无缘的对，也没有无故的美，跟我学，开始吧！,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,目录,一、 基础规范,01 网页宽度02 搜索框设计规范基础规范应用场景03 页码设计规范普通页码翻页小型页码翻页04 广告设计规范,05 文字的编排与设计文字大小文字颜色文字行距英文字体规范文字链接06 整齐的概念和应用07 模块化表现08 页脚信息,WEB交互设计规范及界面设计,网页构图的技巧,一、网页
2、宽度,最新显示器分辨率比例调查：目前主流分辨率 1024X768，在此状态下，默认使用950的网页宽度，与腾讯网首页统一尺寸。,特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 910（腾讯网等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品),WEB交互设计规范及界面设计,网页构图的技巧,不同浏览器，不同分辨率下网页第一屏最大可视区域：,说明： 比如1024768下IE7.0的可视面积是（1024-21）（768-148） 综合上面所有的数据，结论如下： 最保守的一屏大小是IE6下800600：779432
3、 最广泛使用的一屏大小是IE6下1024768 ：1003600,WEB交互设计规范及界面设计,网页构图的技巧,一、网页宽度,二、搜索框设计规范,1.基础规范,文本框a. 搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框 c. 文本框的长度不得少于130个像素 高度不得低于18个像素,帮助信息a. 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等， b. “限定标签提示”一般放在搜索框的上面 c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字” 可设置灰色(#cccccc)显示，点击输入框后提示文字消失。
4、提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有真正帮助的提示，”请输入关键词”这样的提示不应出现.,搜索按钮a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标，而不能采用其他元素。,WEB交互设计规范及界面设计,网页构图的技巧,d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况：,文字形式：搭配使用：图形形式：,c. 搜索button规范文字为“搜索”避免采用其他描述。比如：,使用SOSO引擎的可考虑在搜索框前加SOSO LOGO,同一个web产品中搜索的位置和表现形式尽量保持一致,WEB交互设计规范及界面设计,二、搜索框设计规
5、范,网页构图的技巧,2. 应用场景强表现方式：,加大搜索框的显示，输入框内采用大字体（14号）突出搜索button的表现，更直观，更有点击欲位置放在页头的中间并明显标示,WEB交互设计规范及界面设计,二、搜索框设计规范,网页构图的技巧,输入框内采用小字体（12号） 长度大约以刚好放完提示文字为基准弱化搜索button的表现，可考虑用icon代替 搜索框通常放在页头的右上角,2. 应用场景弱表现方式：,WEB交互设计规范及界面设计,二、搜索框设计规范,网页构图的技巧,三、页码设计规范,1.普通页码翻页的表现方法： 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码
6、翻页区，由上下翻页按钮与页码显示区构成；三为跳转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。,链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示,WEB交互设计规范及界面设计,网页构图的技巧,链接页码为简明独立，不加任何修饰的数字形式链接颜色由当前页面设计决定数字大小建议为12-14px ,以易于点击为原则.,2. 小型页码翻页的表现方法：,详见产品页码翻页普用标准,WEB交互设计规范及界面设计,网页构图的技巧,三、页码设计规范,四、广告设计规范,禁止模仿任何windows标准控件，windows标准控件包括但不限于：鼠标指针、按钮以及窗口
7、控制按钮等。,可参考广告、营销消息与营销邮件体验规范,不要使用按钮作长句广告： 错误案例：腾讯网避免出现企鹅形象广告,WEB交互设计规范及界面设计,网页构图的技巧,五、文字的编排与设计,文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。需突出的内容部分、新闻标题、栏目标题等多使用14号字体广告内容、辅助信息或介绍性文字等多使用12号字体避免大面积使用加粗字体,总体原则：提高文字的辨识性和页面的易读性,网页构图的技巧,2文字颜色：同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色,特别注意：菜单尽量不使用12号加粗，这样会导
8、致复杂的文字难以辨认。多采用14号加粗,一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。,WEB交互设计规范及界面设计,网页构图的技巧,五、文字的编排与设计,灰黑色 当使用灰色为文字颜色时，正灰色的明度数值（B）不大于30%。 当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（B）作相应调整。 因为不同纯色亮度不同，黄色亮度最高，蓝色/紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（B）应该越低。,正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前，首先要明确一这个判断的衡量标准。我们是以Ps的颜色系统为讨论基础的。,建议使用：,WEB交互设计
9、规范及界面设计,网页构图的技巧,五、文字的编排与设计,深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有,建议使用天蓝色的： 纯蓝色：,WEB交互设计规范及界面设计,五、文字的编排与设计,网页构图的技巧,其他颜色 当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。,WEB交互设计规范及界面设计,五、文字的编排与设计,网页构图的技巧,3文字行距： 视觉最佳行距是字体大小的1.3-1.6倍 12号宋体，
10、我们一般使用的行距为8-9个像素。 14号宋体，我们一般使用的行距为10-11个像素。 正文多采用14号字，行距可适当调整为10-16个像素。,4英文字体的使用： 英文建议使用Arial：Arial与Helvetica / Univers并列为目前的标准无衬线字体（Sans Serif），字型依据Unicode标准包含多国语言文字在内。Arial比例及字重和Helvetica(mac上用的字体)极之相近,系统自带并能与汉字匹配的点阵字比较:,WEB交互设计规范及界面设计,五、文字的编排与设计,网页构图的技巧,Arial字体 优点:比例及字重（weight）和Helvetica极之相近 ; 没有
11、下划线贴边的问题；Q字没尾巴；字高整齐缺点:大写I与小写L无法区分下划线:,Tahoma字体 优点:字宽较阔,字母间距较窄，恒定1px（阅读单个字母有困难）形态上符合汉字“方块字”点阵字；能区分大写I与小写L缺点:12号字有下划线贴边的问题；Q字有尾巴；字高不整齐下划线:,WEB交互设计规范及界面设计,五、文字的编排与设计,网页构图的技巧,Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐下划线:,应用案例,WEB交互设计规范及界面设计,五、文字的编排与设计,网页构图的技巧,CSS书写
12、规范,各主要网站字体使用情况,font-family:Helvetica,Arial,simsun;,WEB交互设计规范及界面设计,五、文字的编排与设计,网页构图的技巧,隐性链接： 对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。,5文字链接： 文字链接形式不得超过3种颜色（规定其中一种为主链接色）。 显性链接： 大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。,WEB交互设计规范及界面设计,五、文字的编排与设计,网页构图的技巧,六、整齐的概念和应用
13、,类似这样“豆腐块”的文字排列，在大型网站中尤为重要。 如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。对齐 网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。 并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。使我们的设计更有序。更方便阅读。,WEB交互设计规范及界面设计,网页构图的技巧,首页上摘要无须空格。,内容正文应该空两格。,WEB交互设计规范及界面设计,六、整齐的概念和应用,网页构图的技巧,“豆腐块”四周应该空留均匀适当的间隔,WEB交互设计规范及界面设计,六、整齐的概念和应用,网页构图的技巧,模
14、块化的几类参考表现：单线3-5个像素的圆角内边修饰 ,七、模块化表现,设计准则：同一个网站采用的模块化表现应该是全部统一的。,WEB交互设计规范及界面设计,网页构图的技巧,页脚信息按照从上到下的排列次序为:1、内部导航2、外部导航3、各类许可证、授权声明4、英文版权信息“Copyright ”5、中文版权信息6、各类网络安全/工商证明/技术支持 LOGO各链接间隔统一使用”| ”建议采用12号字， 禁止使用加粗字体,八、页脚信息,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计
15、,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,
16、网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,WEB交互设计规范及界面设计,网页构图的技巧,栅格设计系统 “grid systems”（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,1919年德
17、国著名建筑家沃尔特格罗佩斯（Walt Gropius）在魏玛建立国立包豪斯学院。包豪斯的平面设计基本是在荷兰“风格派”和俄国“构成主义”的影响下形成的。因此，具有高度理性化、功能化、简单化、减少主义化和几何形式化的特点。 1928年，朱斯特施密特（Joost Schmidt）发展出了一套新的理性设计系统和方法。 20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到
18、世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。 1965年，在美国的芝加哥成立了一家新的平面设计公司尤尼马克设计公司（Unimark），主要设计人员包括有拉尔夫依克斯特朗姆（Ralph Eckerstrom）、詹姆斯佛格曼（James Fogleman）、马西莫维格涅里（Massimo Vignelli，1934-）等。尤尼马克设计公司的设计思想基本是国际主义的：强调平面设计上的标准化，采用方格网络为设计依据，目的是良好的视觉传 达功能。这家公司发展很快，不
19、久就成为一家拥有402名工作人员、在全世界设有48个设计事务所的大型国际设计公司。国际主义平面设计在这家公司的业务中 得到很大的成功，而企业的规模又使得这个风格在世界各地得到进一步推广。,历史,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,网页设计中的栅格系统 网页栅格系统是从平面栅格系统中发展而来。以规则的网格阵列来指导和规范网页中的版面布局以及信息分布 。 对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,
20、网页配色的技巧,栅格系统的设计原理及应用,在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下： W =（an）+（n-1）i 由于a+i=A， 可得：(An) i = W,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,Yahoo的网站页面宽度为W=950px每个区块与区块的间隔为i=10px 如果应用上面的公式，可以推出A=40px，既Yahoo首页横向版式设计采用的栅格系统为： （40n）- 10 = W,Web界面设计规范,网页构图的技巧,WEB交互设计规
21、范及界面设计,网页配色的技巧,Yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式： W = c * N + g * (N - 1) + 2 *
22、 m 一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为： W = c * N + g * (N - 1) + g = (c + g) * N 将c+g标记为C, 公式变得非常简单： W = C * N,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,页面结构较复杂,门户型网站首页宽度为950px/960px,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,神奇的960,设计师们对苹果情有独衷。在 1024 x 768 的分辨率下，打开Firefox：,Firefox窗体的大小约为 974 x 650. 减
23、掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960 x 650.栅格系统最早出现在平面设计领域，设计师们爱用苹果，苹果下浏览器的默认宽度为960px, 于是960就这么“自然”地出现了。,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,950的来历,具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，分割成6列时,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,W的含义变为去除Margin的总宽
24、度，公式变化为： W = N * C - g 将上面的公式实例化一下: 950 = 12 * 80 - 10 950 = 16 * 60 - 10 950 = 24 * 40 - 10 这就形成了960蛋糕的三种常见切法。,950的来历,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,12 x 80,16 x 60,24 x 40,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,Yahoo! 24 x 40,淘宝商城 大的两栏布局 24 x 40 主体部分使用740的 栅格划分,网易 16 x 60,Web界面设计规范,网页构
25、图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,黄金分割 黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 x, 使得： x / 1 = (1 - x) / x 化为简单的二次方程： x2 + x - 1 = 0 正数解为： x = (sqrt(5) - 1) / 2 = 0.618 这就是黄金分割。 这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。 （这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，感兴趣的
26、Google吧）在平面设计领域，黄金分割点被广泛采用。比如下面这种图：,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,960栅格，实际宽度是950. 对于 24 x 40 的情景， 最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15,宽度方向上的栅格但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,高度方向上的栅格 高度值560 可以让高宽比接近黄金分割。 针对560, 我们采用 14 x 40 栅格,Web界面设计规范,网页
27、构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,栅格系统的优势,能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。 基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。 栅格系统更多的是一种布局思想。对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。,Web界面设计规范,网页构图的技巧,WEB交互设计规范及界面设计,网页配色的技巧,网页删格化设计,Web界面设计规范,网页构图的技巧,网页配色的技巧,WEB交互设计规范及界面设计,UI三色搭配原则,UI三色搭配原
28、则,配色七定律,选择配色方案的调色板 配色方案、有时就像雨后春笋办突然从脑子里接二连三的蹦出来，但更多的情况下，我们可以使用一些计划性的方法。,01. 将你的目的表现出来在此之前，让我们明确目的和设计理念。一个有着含义的调色板是良好的设计要素之一。 我们可以问自己以下几个问题。 1、你想通过设计传递什么样的信息？ 2、设计的目的是什么？想传递什么情报？想引导用户什么？ 3、他包含了怎样的感情和意识？,02. 明确你的目标用户颜色所面对的每一个人都是不同的。同一个颜色，因为每个人的个性、文化背景，经验的不同会产生不同的效果。考虑到这一点，我们就需要明白，当用户面对这样的设计时，会表现出怎样的反应
29、。由于颜色有着不同的含义，在创建一个调色板时了解你所面对的用户的感情是非常重要的。,一些颜色的含义，在世界的任何地方都是通用的，但有些则不是。绿色，一般是植物的颜色，看到他们就会联想到自然。但是红色就不一样了，他会因为文化的不同而不同。在西洋文化中红色代表的是：火（英: Fire）、暴力（英: Violence）、纷争（英: Warfare），有时也会表示爱（英: Love）或者热情（英: Passion）。但是在中国则表示的是繁荣（英: Prosperity）和幸福（英: Happiness）。,03. 了解配色方案的基本要素 选择配色时，你需要了解一些关于配色的基本知识。配色的基本，就是配
30、色组合的基本理论和构造，具有实践性的指南。他从如何使用色轮以及每一个的意义都总结的十分全面。,04. 试着去寻找灵感有的时候视觉化的必要的配色方案很难设计出来。那种时候，可以从别的设计师的作品中获得灵感。 列举两个对于配色来说相当方便的网站，Dribbble 和 Behance。有时你想给你的材料设计找一些特殊的灵感时，推荐 Material UI 这个网站。平板式的配色调色板，你可以利用FlatUIColor 这个完整。上面所列举的几个网站都非常的方便。接下来让我们从不同的设计之中所产生的效果里一起来看一看吧。这样独特而意外的方法，可以让你创建一些更有意思的调色版。例如，室内设计就是非常不错
31、的案例之一。 当你想创建一些不同的配色方案，不妨试着转变一下思路，利用其他文化的设计。举个栗子、韩国的音乐MV、实用的多彩的调色板让人印象深刻。每一个场景，都可以给你的灵感提供参考。我们也可以从日常生活中获得灵感的启发。当你走出去，室外的任何一个景色都可以作为参考。当你看到了令人激动的配色时，就可以把他们做成配色版了。你可以利用Photoshop，或者一些在线工具，来调整我们所找到的配色方案。,05. 制作属于你的风格指南设计系统你所需要知道的风格指南是，将所有的设计要素放在统一的设计框架之中。在这之中包含了包括按钮或字体等全部的设计要素。我们在设计时应该思考什么样的按钮或导航菜单才是应该被选
32、用的。在实践中如何使用风格指南，在这里有一些网页的案例可以参考。设计师一起来学习，精心挑选的50个知名品牌的风格指南这篇文章，详细介绍了知名平牌是如何利用风格指南，可以用来参考。因为它可以是一个简单的草图，所以在使用配色版之前，可以方便的帮助你做出你自己的风格指南。一目了然的知道利用什么样的设计要素，那么也就会明白该使用怎样的配色来进行制作了。选择设计制作时用的调色板时，要有KISS（略: Keep it Simple, stupid）（越简单越好）这样的思路。首先，尽可能的减少颜色，我们需要考虑下面几点。 背景色（英: Background） /主色（英: Primary Color）/次要
33、色（英: Secondary Color） 警告色（英: Error Color） /成功色（英: Success Color）主色，作为一个重要的CTA（Call to Action）按钮或强调色被使用着，很多公司将他利用在LOGO设计上。次要色、一般利用他来区别动作行为的颜色。举个例子，在警告和成功所使用的颜色，通常使用绿色和红色，如同下面的例子，你可以利用他们来设计从而将当前状态信息传递给用户。,06. 选择调色板如果你已经想好了设计灵感，完成了风格指南并做了一些简单的草图，那么接下来你就可以选择调色板了。一些基本的调色板，艺术家们通常将他们以相近的颜色排列在一起，这是一个非常不错的方法
34、。我们可以从这些配色方案中可以获得一些灵感作为参考。就让我们一起来看看如何从尝试出的许许多多的配色方案中取得最合适的方案吧。正如前面所说，当你在挑选配色方案的时候，为了明确目，传递出怎样的信息情感给用户，你可以尝试着问自己以下几个问题。 这个配色用起来很简单吗？ 用什么颜色影响力最大，最能引人注目。 使用的这个颜色有必要让他更亮/更暗一点吗？用户在什么时候使用商品或者设计？ 你想通过设计传递什么样的信息？可以这么说，因为风格指南，颜色在设计中所担任的工作不同，各种各样的颜色的重量也是不同的（英: Weight）。举个例子、强调色比背景色所使用的次数就要多一些。对于这一点你可以做一些练习，在实际
35、页面中你可以将颜色依重要程度的不同来放进大小不同的形状中。下面是 Invision 的调色板。 考虑到强调色等颜色、配色以图形的模式在下面表现出来了。,向大师学色彩 “凡事预则立，不预则废”，这句话一样适用于设计时的配色。一个有血有肉的设计，在配色前一定是经过了色彩的筛选和斟酌。那么，我们的配色方案如何得来？是否需要一定的科学验证量化？还是仅仅依靠直觉？我想这是一个很有弹性的问题。,名画里的配色 配色方案的其中一个来源就是大师的作品。对，特别是印象派时期的几位大师，尤其擅长运用色彩来表现自然光线，这一巨大的配色宝典拿到手中，你还敢说自己没有配色灵感吗？ 梵高的向日葵采用浓烈的黄为其主色，黄色和
36、绿色的搭配显出热情洋溢。,向大师生学色彩,梵高也有温情的时候，这颗开花的杏树就是运用了朦胧温和的蓝绿配色，增加了一点柔和的粉白。,向大师生学色彩,星月夜充满了瑰丽的想象，蓝色星空和黄色星月光辉，对比色交相呼应。,德加的舞蹈女孩的配色透出一种暧昧和透明感，低饱和度的配色系一直是我的大爱。,莫奈的干草垛的逆光色彩处理，运用冷暖间杂的色彩对比，显出了活泼,摄影作品配色 大师的作品毕竟还是人造，那么接下我们将也学会在摄影作品中吸取配色灵感。大自然应该是最厉害的配色大师了，你必定能从观察自然中学到一招半式。 高广大的自然风景，有美好的冷暖色调，过渡非常自然,就只是从一只小鸟的身体中都能借来最跳脱的配色,
37、从一盘食物中获取色彩，鲑鱼粉的各种表现都非常鲜美活泼，这简直是美食系配色的最佳选择,如何吸取颜色 这些唾手可得的配色方案，都并不需要你冥思苦想，反而需要你有一双善于发现的眼睛。因此，在如海浩渺的作品中，我们尽量需要找那些色彩有层次的对象。 你不可能从一张黑白照片中挑选配色，这显然无颜色可选。下图中左边的作品显然比右边的作品更能吸取到可用的色彩。因此，色彩单一的照片并不利于我们吸取可用的颜色。,吸取图片的颜色，先用视线扫描整个图片，然后找到那些影响力最大的色彩。当然，这些色彩也是深深浅浅，但你要找出能从色环上肉眼可轻易发现的不同色域。 从日本浮世绘大师德川广重的画作中最容易吸取到的色彩就是蓝、绿
38、、粉红这三种色彩，其次是一点黄色。,吸取颜色的时候，例如粉红色也有饱和度的高低，这时，你尽量在中档饱和度的这个区域内选择。这是我在这幅作品中所吸取的配色。,运用配色首先，我们要明确一点：黑白灰是不参与配色的。但黑白灰却不太容易界定，比较简单的辨别方法就是，色值在#000000（纯黑）和#FFFFFF（纯白）之间的过渡地带都是灰色。虽然看起来并不起眼，其实黑白灰在配色中却发挥了非常大的作用。这样说吧，如果说你的配色只是一道甜点或一道菜品，那么黑白灰就是主食。当然，你不能说一定要有主食这一餐才好吃，但我们毕竟是依靠主食而生存的。我们的配色方案的建立是基于一幅作品，好，我们今天就拿一幅大师的作品来做
39、例子。莫奈的日本桥，这幅作品其实并不一定那么好吸取颜色，但整体配色又是如此的清幽明媚。,1、找到主色 日本桥的主色其实非常显而易见，绿！那么，我们就根据画面上不同深浅分别吸取三种层次的绿，这也是绿色的阴影、中调和高光的表现。,2、找到辅色 我们可以从作品中观察到，日本桥的桥身其实完全是“浸淫”在环境光的作用下，而这些环境光除了植物的绿色就是水的蓝色。蓝色即是辅色，而辅色只需要选择一个色值。,3、找出强调色 所谓强调色，其实也就是能从主色中跳出来的色彩，如果是双色调的作品，那么，这个色彩有时候也可以作为辅色.很显然我们的大师莫奈并不满足双色调，因此，我们可以来找到强调色。乍一看去世粉白色，但是，
40、大自然中其实是没有纯白或纯黑的色彩的，因此，画家们在作画时通过小小的对比技巧就能让低饱和度高明度的“某某”色彩扮演白的角色。 粉白作为强调色并不稀奇，因为整个画面都被大面积的绿色所覆盖了。虽然这种婴儿粉并不强烈。颜色，不能独论啊！,4、再次调整配色 吸取颜色的目的并不是立刻拿来就用，而是学会观察这些配色，看到它们被排列成色板时是否协调。为什么要选5种颜色，多一个色彩或少一个色彩可以吗？我的答案是当然可以，全看你最后配色时需要如何运用。 根据这一配色方案，我做了一个杂志封面。可以看出，运用了这一配色方案的设计也带着一种安静的、清幽的感觉。,后记 配色绝对不是信手拈来，根据不同的设计主题来选取不同
41、的灵感来源才是最灵活的取色方式。这当然就需要你能敏于色彩所带来的情感信息。,扁平化设计的五个特点,自从Windows8的Metro风格出来后，扁平式的设计风开始成为网页设计和UI设计的年度流行设计趋势，但现在我们不称它为Metro风格了，国外设计师都说是Flat Design(即扁平化设计)，或者你很讨厌Metro风格，但你不定讨厌Flat Design，它的设计很有特色，那么什么是扁平化设计呢?国外设计师Carrie Cousins在网站上介绍了扁平化的五个特点，下面看看扁平化设计(Flat Design)的五个特点：,编排设计及photoshop基础实例,1.拒绝特效,扁平化设计的五个特点
42、,扁平化这个词来自于这种设计所使用的样式和形状，它完全属于二次元世界，一个简单的形状加没有景深的平面，不叫扁平化都浪费这个词了。 这个概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。 这一设计趋势极力避免任何拟物化设计的元素，这导致这一设计风格在其它平台有时候显得突兀，前景图片、按钮、文本和导航栏与背景图片格格不入，各成一派。 那么，扁平化的效果如何呢? 因为这种设计有着鲜明的视觉效果，它所使用的元素之间有清晰的层次和布局，这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到
43、手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。,2.界面元素,扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标之类。设计师们通常坚持使用简单的外形(矩形或者圆形)，并且尽量突出外形，这些元素一律为直角(极少的一些为圆角)。 这些用户界面元素方便用户点击，这能极大的减少用户学习新交互方式的成本，因为用户凭经验就能大概知道每个按钮的作用。 此外，扁平化除了简单的形状之外，还包括大胆的配色。但是需要注意的是，扁平化设计不是说简单的搞些形状和颜色搭配起来就行，它和其他设计风格一样，是由许
44、多的概念与方法组成的。,3.优化排版,由于扁平化设计的使用特别简单的元素，排版就成了很重要的一环，排版好坏直接影响视觉效果，甚至可能间接影响用户体验。 字体是排版中很重要的一部分，和其他元素相辅相成。想想看，一款花体字在扁平化的界面里得有多突兀。上图是一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大分之众多，其中有些字体会在特殊的情景下会有意想不到的效果。但注意，过犹不及，不要使用那些极为生僻的字体，因为保不齐它就把你带进坑里了。 如何使用字体也是一门学问，要学会让不同的字体表达不同的概念，通过字体告诉用户这某一设计/功能的含义，努力使字体成为你简化设计的有力武器。,4.如何配色,扁平化
45、设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时，扁平化设计中的配色还意味着更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种。 而且扁平化设计中，往往倾向于使用单色调，尤其是纯色，并且不做任何淡化或柔化处理(最受欢迎的颜色是纯色和二次色)。另外还有一些颜色也挺受欢迎，如复古色(浅橙、紫色、绿色、蓝色等)。,5.最简方案,设计师要尽量简化自己的设计方案，避免不必要的元素在设计中出现。简单的颜色和字体就足够了，如果你还想添加点什么，尽量选择简单的图案。 扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效的把商品组织起来，以
46、简单但合理方式排列。,伪扁平化设计,最近还有一种趋势值得关注，一些设计师把某一项特效融入整体的扁平化之中，是其成为一种独特的效果。比如说，在简单的按钮加一点点渐变或阴影，从而使这种风格成为其特色，产生出一种扁平化设计的变种。这种设计要比单纯的扁平化更具有适用性和灵活性。,渐变色的回归,重新流行的“新”渐变设计的案例并不只有这么点儿。更多采用类似渐变设计的网站正如同雨后春笋般涌现，类型已经不拘泥于专题页，从产品展示到电商网站，不一而足。现在所流行的渐变设计其实并没有什么特别与众不同的规范，或者规则，它可以是多种不同色彩支架你的加变，可以是从中央到周围的辐射，可以是从上到下的自然变化，也可以是从角
47、落辐射到其他位置，它可以作为设计的主视觉而存在，也可以是诸多特性中的一个。渐变最实在的一点在于设计师可以轻松驾驭，使用范畴不拘泥于一时一地，自由随性地使用同样可以创造实相当不错的效果。,扁平化配色与渐变,渐变配色的回归正巧是在扁平化大行其道的今天，所以它不可避免地同大量扁平化的元素搭配到了一起，而其中最值得考虑的因素，就是色彩。某些用色最大胆、跨度范围最大的渐变色设计干脆直接就从扁平化配色中“借用”色彩。 这些色彩的使用让色彩的渐变同如今网站的现代风更加贴合，显得更加符合趋势。将渐变的设计同扁平化设计的美学特征融为一体，或者在Material Design 风格的界面中适当加入一些柔和的色彩组
48、合，都是能带来不错的效果。 渐变色的使用对于其他的设计趋势而言，是一个不错的补充，渐变本身的缓冲作用，使得你即使要重设计也无需从头再来。,双色调的加入,双色调的加入,双色渐变是渐变设计中的很重要的组成部分。而双色渐变同其他设计趋势的结合效果拔群，这一点值得再三强调。 而双色调渐变的唯一缺点，大概是被用的太多了。如果你稍加注意就会发现，确确实实有一大堆网站采用了双色渐变来作为背景或者主要视觉模块，似乎没有哪种双色搭配没人用过。蓝绿和橙红搭配是用的最多的。 谨慎使用这一趋势，因为确实很容易与别的网站“撞衫”。,渐变背景图,渐变的回归，使得我们再次可以看到许多拥有景深或者纵深的背景图。虚拟现实的流行
49、让越来越多的设计师尝试更加现实、更加立体的网站设计，毫无疑问，你会在未来看到更多这样的设计。扁平化设计确实时尚而更易于接受，但是它缺少富有现实质感的元素也是不争的试试。试想一下自然中元素给人的感受和体验。渐变色的使用很好地缓解了这个局面，毕竟自然界中很少有特别纯粹特别单一的色彩。不难想象，渐变色和阴影背后的概念和规则是相通的。它们为设计创造了深度和层次。,图片上的渐变色叠加,作为一种设计趋势，在图片上叠加色彩已经流行了相当长的一段时间。而从图片上的单色色彩叠加，到渐变色的叠加，是一个相当自然的“推导”过程。 在页面的背景、头图中加入渐变的色彩叠加，可以让它们的整体感更强，从而让用户注意到其他的更加重要、关键的元素，强化页面的可读性。这种设计对于大图的作用尤其明显。在图片上叠加渐变色的技巧在于平衡色彩和图片之间的关系。色调是否要同图片的含义相匹配？叠加后能否看清图片中的细节？不同的色彩搭配方式带来的结果可能是截然相反的。,
