我们了解了“数字色彩”以后，就会知道网页中的颜色会受到各种不同环境的影响。即使你的网页使用了非常合理、非常漂亮的配色方案，但是如果每个人浏览的时候看到的效果都各不相同，那么你的配色方案的意愿就不能够非常好地传达给浏览者。

那么我们要通过什么方法才能解决这一问题呢？

答案就是——216网页安全色。

216网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。所以使用216网页安全色进行网页配色可以避免原有的颜色失真问题。

网络安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值（DAC Count）为0、51、102、153、204、255时构成的颜色组合，它一共有 6 * 6 * 6 = 216 种颜色（其中彩色为210种，非彩色为6种）。

216网页安全色在需要实现高精度的渐变效果或显示真彩图像或照片时会有一定的欠缺，但用于显示徽标或者二维平面效果时却是绰绰有余的。

不过我们也可以看到很多站点利用其他非网页安全色做到了新颖独特的设计风格，所以我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色，而是应该更好地搭配使用安全色合非安全色。

216网页安全色是根据当前计算机设备的情况通过无数次反复分析论证得到的结果，这对于一个网页设计师来说是必备的常识，且利用它可以拟定出更安全、更出色的网页配色方案。

网上可以找到的色板样式很多，我个人比较喜欢这个形式，颜色渐变与色值比较清晰，供大家参考：

另外如果印刷需要，请以CMYK为准，可以去看下这个链接：传送门

之前一篇文章参见：网页视觉设计与配色方案参考。

┾━┾━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄

本文由水宿鸟De设计笔记首发，作者水宿鸟， BLOG中任何文字、图像皆采用知识共享署名-非商业性使用-禁止演绎2.5中国大陆许可协议进行许可。商业网站、纸媒体如需转载，须经本人同意。欢迎非商业网站、媒体转载，但必须注明出处和链接。违者皆构成侵权。QQ:287589972。

这些文章也不错，不妨一尝：
网页视觉设计与配色方案参考	水宿鸟De设计笔记｜VOL.2	水宿鸟De设计笔记｜VOL.1	水宿鸟De设计笔记｜VOL.3	水宿鸟De设计笔记即日起改用新域名ipujia.com
无觅

水宿鸟

此作品原作者为 Natalie Shau 她的作品，对比强烈，构图大胆，让人印象深刻；适合为服装设计师表达理念，适合装饰现代主义的家居，适合做夸张的网页和封面。可以看到，她也不可避免受到了超现实主义的影响，又和mark ryden有类似的表现手法，尤其是她的画作，模仿的痕迹比较明显。但无论如何，才22岁，如此年轻，就已经足够让人高山仰止而惊艳不已了。

┾━┾━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄

本文由水宿鸟De设计笔记首发，作者水宿鸟， BLOG中任何文字皆采用知识共享署名-非商业性使用-禁止演绎2.5中国大陆许可协议进行许可。商业网站、纸媒体如需转载，须经本人同意。欢迎非商业网站、媒体转载，但必须注明出处和链接。违者皆构成侵权。

转文一篇，from 我叫光耀 by 光耀，看后很受启发，收藏在此，时时鞭策。

近期在做的几个事情：梳理互联网运营体系及方法，理清web产品设计的若干边界点，精读Donald A. Norman，Alan Cooper一些经典设计类著作。这里把自己近期的一些思路稍作整理抛出来。

1. 一个产品的逻辑应该包括：业务逻辑和基础人机交互设计。对于大多数企业应该首先关注业务逻辑，即该产品需要满足用户的核心需求。比如SaaS产品是满足企业通过互联网方式优化企业管理流程的需求。基础人机交互的设计更多的是在优化可用性、易用性等体验过程。

2. 交互设计在web上可以分成两类：交互流程设计和交互方式设计。交流流程可以理解为页面流的设计，与信息架构紧密关联；而很多人对于交互的理解其实是属于交互方式这一类，最简单的例子比如按钮与链接的选择，下拉菜单与单选按钮的选择等等。

3. 视觉设计和界面设计。web设计的最后一步是视觉设计，也就是所有web产品最终的表现都需要通过视觉来呈现。视觉设计师“弥补网站框架层逻辑排布”的视觉呈现问题。视觉设计应该聚焦在运转是否良好上，对于网站的结构、信息传达，再如传到品牌形象。而界面设计（User Interface）更广义，人与机器互动过程中那个层面都叫用户界面。这个意义上讲视觉、交互等都只是界面的一部分而已；狭义的界面设计则更多是考虑可交互元素的布局。在和业内的朋友交流，经常会得到这样的反馈：我们是小公司，分工没有那么细，不符合国情云云。我的观点是：团队如何分工，职位如何设定都没关系，但是你的设计逻辑要清晰，不能因为没有某个岗位你的产品就少了这个环节。

4. 对于业务部门的主管及项目团队而言，不懂互联网没关系，怕就怕自以为很懂互联网。业务线的任何人需要不断更新知识。昨天认为对的事情，今天可能就会被自己否定。所以如果不承认这个动态的变化，最终落败的是产品和企业。

最近很多同事看上了苹果电脑的丽黑体，纷纷表示丽黑更耐看、更耐用、耐把玩。这让我大叹苹果特性与人性的兼容。

对唯美的追求，总是那么动彻人心。字体背后，还真有一丝余味。

这里除了比微软雅黑更舒服的苹果黑体，再介绍一种字体：开源字体—文泉驿正黑，非常适合三版使用，文泉驿一直是开源字体中的佼佼者。用中文Linux系统的一般都会用这个字体作为补充（Linux下的字体太少了）。

文泉驿正黑体是一个“自由字体“。该字体包含了所有常用简体中文、繁体中文所需要的汉字(最新版本包含超过20924个汉字，完整覆盖GB2312/Big5以及GBK标准字符集)。作为黑体中文字体，文泉驿正黑为非衬线字体，笔画对比度明显，也特别适合屏幕汉字显示以及文档标题字体。

苹果丽黑字体下载：

http://www.plunder.com/LiHeiProPC-ttf-tar-gz-download-e24dfc109b.htm

文泉驿正黑字体下载：

http://www.xdowns.com/article/251/Article_1410.html

附图是魔兽世界⋯⋯网上找来的，感谢mac，我依旧隔离各种游戏⋯⋯

┾━┾━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄

本文由水宿鸟De设计笔记首发，作者水宿鸟， BLOG中任何文字皆采用知识共享署名-非商业性使用-禁止演绎2.5中国大陆许可协议进行许可。商业网站、纸媒体如需转载，须经本人同意。欢迎非商业网站、媒体转载，但必须注明出处和链接。违者皆构成侵权。

在网上开店的朋友经常问我同一个问题：

哎，你看人家店面装修的⋯⋯啧啧，这店招上用的是什么字体啊？

我答不上来。我说我充其量可以认得出宋体、黑体、楷体、还有汉仪系列⋯⋯对于更多衬线字体，我更是无能为力。

关于字体的研究让我想起苹果老板乔布斯年轻时专学各种衬线和无衬线字体的故事，他说“那是一种科学永远无法捕捉的充满美感、历史感和艺术感的微妙”，当然，这段经历对后来的苹果设计尤为重要，乔布斯将字体、间距、排版技巧等全部所学融入了Mac⋯⋯

可见对字体的把握对于设计师来说是件多么重要的事情。从图形的混拼和色彩的暴力中跳出来，你会留意到，还有“字体”这一儒雅的设计的存在。

点此查看：什么是衬线字体与无衬线字体？

如果你还在尝试寻找一款属于自己的无衬线体，普加UED小组推荐你试试下面的网站：

http://www.myfonts.com/WhatTheFont/

它可以使你寻找字体的效率提高三倍以上。

来看一个例子：

这是我用Apple  Chancery字体打出的kisspujia字样

将此图片提交到上面推荐的网站。跳转页面：

看不懂英文的朋友我来简单解释一下，在这个页面中，网站将会对你输入的英文进行拆解比较。比如上图中，程序识别出图片中字母为k，确定无误，然后校对下一个字母。如果中途出现错误，你可以在文字框中纠正成正确的字母。

最后敲下确定，字体识别就完成了。

结果：Apple  Chancery。

OK，视觉设计师们和骨灰级字体收藏家们，去体验下吧！

┾━┾━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄

本文由水宿鸟De设计笔记首发，作者水宿鸟， BLOG中任何文字皆采用知识共享署名-非商业性使用-禁止演绎2.5中国大陆许可协议进行许可。商业网站、纸媒体如需转载，须经本人同意。欢迎非商业网站、媒体转载，但必须注明出处和链接。违者皆构成侵权。

在西方国家的字母体系，分成两大字族：serif（衬线字体）及sans serif（无衬线字体）。 其中typewriter打字机字体，虽然也是sans serif，但由于他是等距字，所以另独立出一个Typewriter字族出来。

serif的意思是，在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直横的不同而有不同。 相反的，sans serif就没有这些额外装饰，而且笔画粗细大致上是差不多。

像Times、Times New Roman等都是属于serif的字体，而Arial、helvetica则是属于sans serif的字体。

serif和sans serif的一般比较

serif的字体较易辨识，也因此易读性较高。 反之sans serif则较醒目，但在走文阅读的情况下，sans serif容易造成字母辨识的困扰，常会有来回重读及上下行错乱的情形。

serif强调了字母笔画的开始及结束，因此较易前后连续性的辨识。

serif强调一个word，而非单一的字母，反之sans serif则较强调个别字母。

在很小字的场合，通常sans serif会较serif字体较为清晰。

适用于不同用途通常文章的内文、正文使用的是易读性较佳的serif字体，这可增加易读性，而且长时间阅读下因为会以word为单位来阅读，较不容易疲倦。 而标题、表格内用字则采用较醒目的sans serif字体，他需要显著、醒目，但不必长时间盯着这些字来阅读。

像DM、海报类，为求醒目，他的短篇的段落也会采用sans serif字体。 但在书籍、报章杂志，正文有相当篇幅的情形下，应采用serif字体来减轻读者阅读上的负担。

中文的情况在中文的情形也是有相当于serif的字体，例如明（宋）体就是serif的，他通常是和Times Roman字族来搭配的。 而黑体、圆体就相当于是sans serif的字体。

在中文直排的情况，比较不容易显现serif/sans serif之间的差异性，但是在目前中文横排相当的普遍的情形下，以上所述及的易读性、醒目性也是适用于中文。

很常看到中文出版书籍、杂志，内文使用了不易阅读，但却很醒目的黑体或圆体，这对读者来说，在长期阅读之下很容易就引起眼睛不舒服，似乎是应该尽量避免才是。

身为视觉设计师，如果还不曾深入了解颜色和怎样配色，就好比交互设计师不曾拥有Flickr、twitter、豆瓣账号一样可怕。

普加UED小组推荐给大家一个很好的在线网页配色配色网站：

http://colorschemedesigner.com/

你可以通过设置抽取你需要的颜色数值。网页文字配色方案？放心，这里依然帮你想到了。

■■★●◆pink（粉红）
■■★●◆crimson（腥红）
■■★●◆lavenderblush（苍白的紫罗兰红）
■■★●◆palevioletred（脸红的淡紫红）
■■★●◆hotpink（热情的粉红）
■■★●◆mediumvioletred（适中的紫罗兰红）
■■★●◆orchid（兰花紫）
■■★●◆thistle（苍紫）
■■★●◆plum（轻紫）
■■★●◆violet（紫罗兰）
■■★●◆magenta（洋紫)
■■★●◆fuchsia（紫红）
■■★●◆darkmagenta（深洋紫）
■■★●◆purple（紫）
■■★●◆mediumorchid（适中的兰花紫）
■■★●◆darkviolet（深紫罗兰）
■■★●◆indigo（靓青）
■■★●◆blueviolet（蓝紫罗兰）
■■★●◆mediumpurple（适中的紫）
■■★●◆mediumslateblue（适中的的板岩蓝）
■■★●◆slateblue（板岩蓝）
■■★●◆darkslateblue（深板岩蓝）
■■★●◆lavender（熏衣草花的淡紫）
■■★●◆ghostwhite（幽灵白）
■■★●◆blue（蓝）
■■★●◆mediumblue（适中的蓝）
■■★●◆midnightblue（午夜蓝）
■■★●◆darkblue（深蓝）
■■★●◆navy（海军蓝）
■■★●◆royalblue（皇家蓝）
■■★●◆cornflowerblue（矢车菊蓝）
■■★●◆lightsteelblue（淡钢蓝）
■■★●◆lightslategray（浅石板灰）
■■★●◆slategray（石板灰）
■■★●◆dodgerblue（道奇蓝）
■■★●◆aliceblue（爱丽丝蓝）
■■★●◆steelblue（钢蓝）
■■★●◆lightskyblue（淡天蓝）
■■★●◆skyblue（天蓝）
■■★●◆deepskyblue（深天蓝）
■■★●◆lightblue（淡蓝）
■■★●◆powderblue（火药蓝）
■■★●◆cadetblue（军校蓝）
■■★●◆azure（蔚蓝）
■■★●◆lightcyan（淡青）
■■★●◆paleturquoise（苍白的宝石绿）
■■★●◆cyan（青）
■■★●◆aqua（水绿）
■■★●◆darkturquoise（深宝石绿）
■■★●◆darkslategray（深石板灰）
■■★●◆darkcyan（深青色）
■■★●◆teal（水鸭色）
■■★●◆mediumturquoise（适中的宝石绿）
■■★●◆lightseagreen（浅海洋绿）
■■★●◆turquoise（宝石绿）
■■★●◆aquamarine（碧绿）
■■★●◆mediumaquamarine（适中的碧绿）
■■★●◆mediumspringgreen（适中的春天绿）
■■★●◆mintcream（薄荷奶油）
■■★●◆springgreen（春天绿）
■■★●◆mediumseagreen（适中的海洋绿）
■■★●◆seagreen（海洋绿）
■■★●◆honeydew（浅粉红）
■■★●◆lightgreen（浅绿）
■■★●◆palegreen（苍白绿）
■■★●◆darkseagreen（深海洋绿）
■■★●◆limegreen（柠檬绿）
■■★●◆lime（柠檬）
■■★●◆forestgreen（森林绿）
■■★●◆chartreuse（查特酒绿）
■■★●◆lawngreen（草坪绿）
■■★●◆greenyellow（绿黄）
■■★●◆darkolivegreen（深橄榄绿）
■■★●◆yellowgreen（黄绿）
■■★●◆olivedrab（橄榄褐）
■■★●◆beige（米色）
■■★●◆lightgoldenrodyellow（浅秋黄）
■■★●◆ivory（象牙白）
■■★●◆lightyellow（浅黄）
■■★●◆yellow（黄）
■■★●◆olive（橄榄）
■■★●◆darkkhaki（深卡其布）
■■★●◆lemonchiffon（柠檬沙）
■■★●◆palegoldenrod（灰秋）
■■★●◆khaki（卡其布）
■■★●◆gold（金）
■■★●◆cornsilk（玉米）
■■★●◆goldenrod（秋）
■■★●◆darkgoldenrod（深秋）

■■★●◆floralwhite（白花）
■■★●◆oldlace（浅米色）
■■★●◆wheat（小麦）
■■★●◆moccasin（鹿皮）
■■★●◆orange（橙）
■■★●◆papayawhip（木瓜）
■■★●◆blanchedalmond（漂白后的杏仁）
■■★●◆navajowhite（耐而节白）
■■★●◆antiquewhite（古白）
■■★●◆tan（晒）
■■★●◆burlywood（树干）
■■★●◆bisque（乳脂）
■■★●◆darkorange（深橙色）
■■★●◆linen（亚麻）
■■★●◆peru（秘鲁）
■■★●◆sandybrown（沙棕）
■■★●◆chocolate（巧克力）
■■★●◆chocolatesaddlebrown（马鞍棕）
■■★●◆seashell（海贝）
■■★●◆sienna（土黄赭）
■■★●◆lightsalmon（浅肉）
■■★●◆coral（珊瑚）
■■★●◆orangered（橙红）
■■★●◆tomato（番茄色）
■■★●◆mistyrose（雾中玫瑰）
■■★●◆salmon（肉）
■■★●◆snow（雪）
■■★●◆lightcoral（浅珊瑚）
■■★●◆rosybrown（玫瑰棕）
■■★●◆indianred（浅粉红）
■■★●◆red（红）
■■★●◆brown（棕）
■■★●◆firebrick（火砖）
■■★●◆darkred（深红）
■■★●◆maroon（粟色）
■■★●◆white（白）
■■★●◆whitesmoke（烟白）
■■★●◆gainsboro（赶死部落）
■■★●◆lightgrey（浅灰）
■■★●◆silver（银白）
■■★●◆darkgray（深灰）
■■★●◆dimgray（暗灰）
■■★●◆black（黑）

如果打算涉足视觉设计，上面的色彩列表一定对你有所帮助。当然，我想你也可以用它来测试显示器的偏色程度。

┾━┾━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄

本文由水宿鸟De设计笔记首发，作者水宿鸟， BLOG中任何文字皆采用知识共享署名-非商业性使用-禁止演绎2.5中国大陆许可协议进行许可。商业网站、纸媒体如需转载，须经本人同意。非商业网站、媒体可以随便转载，但必须注明出处或链接。违者皆构成侵权。