视觉设计 - UCD大社区

扁平化设计与色彩趋势

波希米亚 — 2013-05-03 09:11:55

Making it Work: Flat Design and Color Trends
Designmodo版权所有
作者：Carrie Cousins
译者：UCD翻译小组，波希米亚
原文地址： http://designmodo.com/flat-design-colors/

这篇文章将展示很多很酷的范例，甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话，你打算怎么做？给点提示，色彩是扁平化趋势中最重要的一部分。

扁平化设计进修

扁平化设计你可以通俗的理解为：使用简单特效，或者无特效来创建的设计方案，它不包含三维属性。诸如投影、斜面、浮雕、渐变等特效都不要在设计中使用。

扁平化设计给人的感觉通常都很简洁，即使它可以做的很复杂。简单、直接、友好的特性也使得它广受移动界面和时尚网站设计的青睐。

想了解更多扁平化设计趋势，可以看之前的这篇文章。

定义调色板

说到色彩，扁平化设计中会用到很多，但设计师们通常会选择大胆的和鲜亮的来使用。怎样使用色彩让设计各有不同？设计师们打开调色板，多数时会选鲜亮的，饱和度高的来用，偶尔也会使用灰色或黑色。而包括彩虹调色板在内的很多传统配色规则都被抛出窗外。

其实归根结底就是色调与饱和度的匹配。虽然在色调上，设计师可以有很多选择，但一般开始会选互为镜像的色深。它要么是一个主色或辅色的组合，要么是色盘的另一部分，包含了更多的黑白色混合。

一提扁平化设计的色彩方案，人们就会想到高饱和、鲜亮、复古或单色块之类的。并不是说这是唯一的选择，只是发展趋势让它们变的流行。

鲜亮的色彩

鲜亮的色彩为扁平化设计创造出一种与众不同的感觉。因为它在亮背景和暗背景下都能获得很好的对比度，以吸引用户的注意。这正是它成为扁平化设计色彩趋势的原因。

从哪里开始？

FlatUIColors.com 网站上有很多扁平化设计的流行色调，是项目起步的好选择。无论是明亮的蓝色、绿色，还是黄色、橙色，你都能从中找到流行色的缩影。这个网站最重要的一点就是，你可以免费选择和下载色值到本地。（就个人而言，我对灰色调情有独钟。）

Designmodo 已将亮色设计大纲进一步地整合到了最近发布的 Flat UI Free 套件中，包括扁平化设计，流行的图标以及调色板（对配色新手来说，这简直太赞了），而且界面更易用。

在设计中使用严格的原色的情况并不常见，比如纯红、纯蓝、纯黄，一般都混色使用。如果你想自己做配色方案，请注意简洁。记得选择类似的色调和饱和度，当然，也可以采纳我们的建议。

亮色：可以尝试把这些色彩组合，或混合在一起使用。它们在白色或黑色背景上都有很好表现。

比较流行的有：蓝色，绿色和紫色。

复古色

复古色也是扁平化设计中一种流行的方案。

这些建立在鲜亮颜色基础上的不饱和色彩，加之白色内容的反差，看起来更柔和。是不是有种老校区的感觉。复古色的配色方案往往包含大量的橙色和黄色，偶尔也有红和蓝。

复古色很常见的是用在主色和辅色上，因为它们给人感觉很舒缓。

复古色：这类色彩适合作为主色元素出现，配以图案或柔和的色彩，效果最佳。

比较流行的有：橙色，桃色，梅子色和深蓝色。

单一色

单一色方案正在被日益普及。它依赖于黑色和白色的单一颜色来创造新的色调。

大多单一色彩方案都是一个基本色搭配另外2-3种其他色调。最流行的色调就是蓝色，但也有设计师采用黑色（或灰色）作为基色，用红色代表按钮或动作。另一种做法是利用颜色差异。比如蓝色，你可以添加绿色调进去，来创建一个蓝绿色的方案。

同时，单一色方案在移动和App设计中也极为流行。

单一色：与其他色调方案一样，通过调节对比度，可以在父颜色基础上得到很多不同的色调。比如原始颜色对比度是100%，你可以看看调成50%，20%和8%后分别是什么样子。

比较流行的有：蓝色，灰色和绿色。

结论

其实真正使扁平化设计火起来的原因是：这个概念很新，且有趣。你可以在项目中体会这一点。

一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是件很酷的事情。现在，超越传统配色的束缚，去创造一个更舒适的扁平化色彩方案吧。

来吧，下载 Flat UI Free 或使用现有的配色方案，开始你的项目吧。

源地址：http://blog.b3inside.com/design/flat-design-and-color-trends/

【CDC品牌维生素】颜色叠加在品牌中的运用

CDCer — 2013-02-28 21:01:18

我们通常研究色彩，去理解色彩的情感时，是为了想通过色彩这一具有强烈表现力的视觉因素来唤起观者的各种情绪，通过色彩表达设计者想要去反应的情感。而色彩的表现手法和方式，往往很少会有设计师去注意。而本文，主要通过一些优秀的品牌设计案例向大家介绍色彩叠加在品牌设计中的运用。

　　所谓叠加，即我们预先生成出来的图形、属性特征等被调用叠合在一个基本图形上的过程或方法。叠加模式把图像的“基色”颜色与“混合色”颜色相混合产生一种中间色。 “基色”内颜色比“混合色”颜色暗的颜色使“混合色”颜色倍增，比“混合色”颜色亮的颜色将使“混合色”颜色被遮盖，而图像内的高亮部分和阴影部分保持不变，因此对黑色或白色像素着色时叠加模式是不起作用的。

北冈秋吉所创作的漫画女孩，他将图像左边叠加上一层红色，唯独露出眼珠没有覆盖，女孩右眼由于受到微红背景的影响，在人的视觉感受上和发卡的蓝颜色一致，而事实上，两只眼睛都是灰色的。这种“拮抗过程”证明了你眼前欺骗了你，而实质上颜色是受到亮度影响的。就如毕加索创造的蓝色时代，整幅画作感觉只有蓝色，但就是巧妙的通过亮度关系来让人物和环境变得分明。所以谈论色彩的叠加，就不得不说说颜色的亮度关系了。

下面是关于色彩叠加运用在品牌设计中的案例：

　　葡萄牙电力集团（EDP Energias）

EDP Energias是葡萄牙最大能源公司（http://www.edp.pt/en），新的形象由纽约的 Stefan Sagmeister 公司设计。将logo设计成动态变化的，在实际运用中色彩采取高亮的红和深色的红，不同亮度关系的红色随着变换的形状转变而相互叠加，形成有趣的图形。新的标识由七个基本形态组成，设计师还设计出了一系列图标，这些图标和新的标识一样，运用基本几何形，通过明度不同的红之间叠加而形成有趣的形象。

The Great Catering Company

　　食品的艺术

　　 The Great Catering Company 作为一家食品公司，它不仅带给消费者食物和服务，还通过艺术形式去定位餐饮和描绘它。这种尝试是创新的，现代的。通过一个创造性的过程去了解食物，让消费者参与到了烹饪的艺术之中。设计师运用绘画和使用不同的食物创造出了有意思的视觉语言。这种原生的色彩，以极具亲和力的水彩形式将色彩叠加，大胆的将彩色插图作为主要视觉装置，独特的品牌表现方式令人难忘。

Mikhailov & Partners公关策略顾问公司

Mikhailov & Partners是俄罗斯创办最早的公关顾问公司之一(http://m-p.ru/eng/)。新标志用黄色，橙色，淡蓝色，紫色和珊瑚五种颜色进行互相叠加，以创建可识别的6种不同图像，代表智慧，力量，成功，发展和成长，信念和承诺。鲜艳的颜色也出现在其他视频设备和灰度图像进行了对比。该项目由俄罗斯设计公司IVR设计。

云储存服务商CX（MovingBrands）

要想在接近饱和的云储存市场中脱颖而出，给CX设计出一套独特的品牌形象无疑是MovingBrands要解决的首要问题。将“CX”作logo的字母元素，运用夺人眼球的色彩将字母“C”和“X”叠加，而在实际的运用中，所衍生出来的形象更为灵活多变，不光是在颜色上的变换叠加，在图形元素上的叠加，更是千变万化，充满了无限能量。MovingBrands把其诠释为“Cloud to the Power of X”，意在传达通过来自云端的无限（“X”代表无限）力量。

卑诗省电影和传媒局

寻找一个独特的身份，确立一个适合的视觉形象，更好地拥抱变化正是BCFM要去做的，smashLAB设计公司，运用坚实感的文字，代表该组织的稳定性。然后将像光晕，朦胧叠加开来的色彩，利用丰富的色彩斑点放置在浅色背景下，运用到整个识别系统中，感觉似在探索什么，奋的，但视觉上一致的感觉。其结果是非常独特的，灵活的可视化的，有效地传达BCFM先进和前瞻的思维性质。新的识别系统将广泛的色彩传达的能量配合着相对硬朗的logo，表达出了他们的专业性，坚固性。

卑诗省电影和传媒局官网：http://www.bcfm.ca/

smashLAB设计公司：http://www.smashlab.com/

通过上面的例子，我们应该对颜色叠加在品牌中的运用有了些了解：

　　在品牌设计中，使用颜色叠加的手法，需要根据色的实际属性，以及色彩学的规律出发，避免脏乱的情况出现，在形式上和色彩上寻求差异化，能让品牌在竞争激烈的市场中脱颖而出，具有独特性。色彩在叠加运用上，抱持严谨、专业的态度，每种不同形式的叠加都能出现完全不同的视觉效果，比如案例中食品公司运用的就是水彩的叠加手法，表现出了一种原生态的品牌形象，区别于其它，显得生态、有机。

　　在色彩的叠加运用中，要根据每块颜色的构成关系，明暗、色调以及面积的大小掌握好节奏进行调整修改，不同的色彩在不同的明度、纯度、色调以及形状上给人的重量感都是有很大区别的，冷的调比暖色调轻，明度高的比明度低的轻，在构成中要注意这些基本的色彩规律，使得在运用过程中显得协调、整体。

　　任何色块在构成中不应是孤立出现的，它需要同种或同类色块的上下、前后、左右诸方向彼此互相呼应。并以点、线、面的形式作出疏密、虚实、大小的丰富变化。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=7006)

源地址：http://cdc.tencent.com/?p=7006

5°专场视觉设计小析

山木 — 2013-02-16 08:31:27

这个主题是2012年下半年的一次内部分享，迟迟未形成文章，马上过年了赶紧整理起来，顺便给视觉设计师们拜年了！！！我自己内心的一个呼唤，明年脱离“苦逼”二字……

网站的专场设计，应该算是网页视觉设计师的必修课，应该也算是最基本功。她所需要的设计理论都是最基本，但同时也是最重要的。设计理论版本多如牛毛，我这里仅仅整理5个方面来分析网页专场设计的一些方法，本人并非大师或资深，欢迎各式拍砖。

设计理论每人都会或多或少的知道一些，但是我们作品是给谁看的，我们的真正用户是谁，用户的特性是什么，每个网站针对的用户都不同，在这里简单介绍下我们内部总结的阿里巴巴B类用户的特性：

在了解自己所针对的用户特性之后，我们做设计就会更有针对性，对作品的创意也会更贴近用户情景。在这里我分成5个方面来表述专场设计所需的基本功。

1°创意设计

说到创意，应该是设计师最擅长，但肯定也是最头疼的问题，如何评判一个创意的好坏，借用周董的一句话“哎呦，不错哦”。当别人看到你的页面的时候，能发出这种感慨，那基本上你的这个页面应该是做到位了。这里介绍5种小方法：

2°版式设计

版式设计应该算是最基本的设计原则，这个虽然阐述起来比较简单，如果要运用的好还是需要多下工夫。这里通过一个简单的例子来解释版式设计中的几个原则：

3°色彩设计
这里的色彩设计并不是对色彩理论的解释，也不是对色彩感觉的解释，因为本人是个色彩感觉一般的设计师。这里只说3个原则：色彩对比、色彩大小与形状、彩色位置。

通过以上的3种原则，用在网页上的例子很多，这里没有讲到的互补色、对比色、色差、色温等等众多色彩理论大家有需要可以百度下……这里多少一句废话，彩色不易用多，且最好有重色压压。

4°趣味设计

趣味设计更多的是一种亲切感，并不是所有的页面都要求有，但是偶尔为之，会让页面添色不少。

5°前端知识

最近做了1688的首页，越来越觉得前端需要懂的东西太多了，自己知道的仅仅是皮毛而已，这里不讲如何写代码，只说图片大小，这个是关系到页面的加载时间。

PS的存储大致可分为两种（网页设计常用到的）：有损存储JPG格式，无损存储（PNG、GIF）。这两种图片的区别在于：

再一个需要我们关注的问题是：控制图片的大小问题，同一张图片不同的格式大小会有不同，我们需要在保真的前提下选择尽量小的图片格式。

以上这些内容是本人今年专场方面的一个总结，希望能对读者有些许帮助，也欢迎拍砖，互相学习。

源地址：http://www.aliued.cn/2013/02/06/five.html

视觉隐喻碎碎念

Danis — 2013-02-01 15:12:16

什么概念？

在我们做界面设计时，如果使用用户熟悉的来自真实世界的物体的图案来作为界面元素，

用户会比较容易地学会产品的使用，这种手法就是视觉隐喻（metaphoric）。

隐喻范围可以从整个界面到工具栏上的一颗小按钮。

几种类型？

1 整体隐喻

整个界面都用隐喻的设计方法，最典型的例子就是游戏，整个现实的场景搬到游戏里面，用户一看就知道，

自己是在街上还是海上，房子是可以进去的，路人是可以问话的...

另外还有一些工具类、索引类的整体隐喻界面，比如日历、时间显示、播放器、手写板、阅读器、名片夹等。

2 装饰隐喻

在界面局部使用一些拟物的设计手法，增加界面的真实感和美观度。

比如一些机械机理的使用，电影场景的重现，平常小物品的装饰，自然现象借鉴等。

3 功能隐喻

用隐喻的手法暗示某些功能或显示某种状态，让它们更好辨认，降低用户认知成本。

如应用图标、按钮上的图标、按钮本身、拖动滑块凹槽、时间选择器等。

好处是什么？

因为界面元素是用户熟悉的事物（物体或者使用方式），用户的大脑能更轻易地进行推理，在界面元素与功能之间建立直觉联系，而不必了解产品真实的运行机制。简单用图表示如下：

坏处是什么？

任何事情都有利弊，而且可能在某个临界点，利会变弊。

1 挑战用户认知

不是说降低用户的认知成本么？对，前提是用户有相关的经验，而且能够辨认出来产生关联。

所以如果隐喻的对象太小众，可能有人不认识；

如果设计太抽象/难看/复杂/不像...，可能有人不认识。

2 产生噪音

真实世界的东西细节较多，比较复杂。

过多的装饰元素使得界面复杂，过多地抠细节使得图像复杂，可能装饰会变成噪音，

影响用户对有价值内容的阅读和对功能的理解。

3 长远看可能降低降低效率

这是从书上（about face 3）看到的说法，

隐喻能让新手用户更快地接受理解产品，

但太过忠实于现实世界的规矩，可能反而失去了计算机世界的优点，

一旦用户熟悉产品后，难以形成高效率，形成习惯用法（如鼠标右键，现实世界没有，却相当高效）。

应该怎么做？

从坏处出发，再结合计算机世界的特点，就能总结一些做法。

1 尊重文化

不同地区、不同年龄、不同领域的用户有其独特的知识架构和文化认同，

先搞清楚产品是给哪帮人用的，然后才着手设计。

举几个例子：

日本人翻书遵照我们古时候从右到左的习惯（看过漫画的都知道），而我们是从左到右，

如果我们要做翻书的拟物设计，是否遵从相关的习惯？（没验证过啊）。

在印度，摇头表示赞同，点头表示否定。在印度这个表情就悲剧了：。

在土耳其，大拇指是一种侮辱性手势。那这些表情也悲剧了：

所以，先研究再动手，

如果懒得去先做研究，那就找最简单的最常见的对象当隐喻原型，不要有侥幸心理。

2 别忘了初衷

如果是为了更好看，赋予产品更多情感的因素，不要过火，好看的目的达到了就好了，别光想着要很像真的。

如果是为了暗示某种状态或操作，不要过火，觉得用户可以理解的时候就好了，别光想着要很像真的。

有时候多个写实图标摆在一起比抽象图标难理解，就值得我们反思。

3 基于现实超越现实

也可以说打着有限的现实的幌子做无限的虚拟的事。

比如文件夹的逻辑，“文件夹里放文件”是现实，

文件夹里放n个文件夹，n个文件夹里还可以放n个文件，这就是超越。

再比如iPhone的timepicker，滚轮是现实，滚轮上的数据可以n多，就是超越。

源地址：http://blog.sina.com.cn/s/blog_65b4f8d501018onm.html

视觉设计传达的4件东西

Danis — 2012-12-28 10:36:54

在大家着迷用户体验设计，关注用户研究、人机交互的时候，视觉设计好像被遗忘了。

我想说的是，视觉设计一如既往地重要着。

视觉设计处在产品表现层，跟诺曼先生提出的情感化设计本能层设计水平直接相关。

如果想让用户一见钟情进而买单，让客户点头通过方案，给他们视觉上的第一印象至关重要。

没有视觉的最终落地，前面的研究和交互，似乎都将付诸东流。

因为视觉设计至少做了这四件事情：

1 传达“品牌”。

视觉设计形成一种氛围，与公司品牌建立联系。

既是一种宣传，也加深了用户对品牌的认知度。

兰芝的产品、界面和包装都是一致的蓝

2 传达“美感”。

漂亮的东西总是比丑陋的东西容易被人接受。

这里指的“美感”应该是“恰当地漂亮”，

每个人的审美不一样，甲之熊掌乙之砒霜，所以所谓的美感因人而异，因目标用户打造。

小孩认为的美跟大人认为的美也许是不一样的。

男人认为的美跟女人认为的美也许是不一样的。

文艺青年的美跟土老板认为的美也许是不一样的。

甚至同一个人身上，当他扮演不同的角色的时候，也应该给他恰当的美。

比如一个人潮人医生，他使用的手机界面应该新潮，而使用的医疗器械界面却应该简约。

漂亮的产品也许会让用户痴迷并忘记一部分学习成本

3 传达“信息”。

它将产品上的信息/数据视觉化，以容易识别、容易理解的方式表达出来。

比如对于信息优先级的识别，通过视觉对比让用户知道我们想给他优先看什么。

从报纸的设计可以读出信息优先级

比如对于信息关联度的识别，哪些内容跟哪些内容是相关的，哪些是包含被包含的。

边框是区分逻辑关系的一种视觉手段

比如通过树状图、热点图等图形表达数据的统计，比纯粹罗列数据更好理解。

4 传达“行为”。

交互的理念通过视觉传达，视觉暗示将行为、状态传达给用户。

一个操作的线索，操作的过程，操作的结果都需要视觉来交待。

比如愤怒的小鸟，在拉动弹弓，拉到什么程度，弹出小鸟，砸中积木，整个过程都是丰富的视觉效果在负责交待。

最后举个例子，在一颗按钮身上可以也许可以体现出来这四件事情：

这颗麦当劳的按钮，

红色的主色，中间有些许黄色的光晕，透露“品牌”。

质感、发光的处理代表“美感”。

鼠标悬停、按下的时候（这个是我yy的，实际上他们没有做 =.=），有相应的状态反馈，传递“交互”。

按钮上的字说明“信息”。

源地址：http://blog.sina.com.cn/s/blog_65b4f8d501017tv2.html

登录图的趣味设计

山木 — 2012-12-25 09:20:43

阿里巴巴登录页面左侧一直都会有个banner，这个图片因为位置、环境的特殊性，跟我们平常做的首页banner的设计思路会有所不同。首页banner更注重的是信息传达，登录左侧的这个banner偏重情感化设计，情感化设计除了节日、事件的氛围之后，还有就是趣味性。

趣味设计是一个比较大的概念，在这里我狭隘的把趣味设计分成两个部分来介绍，1.主体元素的创意；2.背景元素的处理。每次在做这个banner的时候，都非常的纠结，当然最纠结的地方就是创意，虽然创意是给非常主观的东西，但是我们还是可以通过对一些元素处理找到创意点。

A.线描——来自现实场景，超越现实场景的表现力

线描的方式是我比较常用的形式，这种形式相对简单，很容易上手，效果也比较有张力。先找一个相对合适的场景，对着现实的场景勾出想要的线条，再对线条进行粗细、颜色的调整。举个例子如下：

1.如果我们需要一个仓库的线描场景，我们先找到一个满足我们需求的仓库场景，对场景进行线描绘制。

2.画出线描后根据背景色的主色调对线条进行粗细及颜色调整。然后再添加一些实物做一下对比。

3.同样的方法，绘制其他与之相关的元素，组合到一起，最终效果如下：

B.夸张——原本是1，表现为3，让1+1>2

夸张的手法我们见的非常多，以现实实物为蓝本，用夸张的手法来表现实物，使之更具表现力。以此来吸引用户的目光。下面例子为冬季采购的banner设计。

1.跟线描一样，找一个类似我们可以用的场景图片，用卡通的形式绘制货车，对局部细节进行适当的夸张，贴近自己想要的感觉。

2.有了这个基本元素之后，把货车的层高加至3层，夸张我们平常印象中的货车，增加货车表现力。

3.一层的货车被夸张绘制成三层之后，增加了货车的表现力，同时增加了货车的趣味性。后面只需要添加一些辅助性的元素，加强主题所需的氛围即可，最终效果如下。

C.重构——对现实的实物进行重组，再设计

重构在工业设计中用的比较多，这种设计方法尤其能体现趣味性，本来不相干的几个事物，通过重构再设计，组合在一起的时候，会给人眼前一亮的感觉。

1.灯泡和建筑都是我们生活中比较常见的事物，二者组合到一起的画面不是很常见，当我们想到这两个元素的时候，通过重构、正负形等设计手法，让他们联系到一起。

2.主体形状有了之后，灯丝是我们设计最好发挥的地方，把主题文案与灯丝相结合。

3.通过对灯泡形状、灯丝和建筑三者的重构再设计，让三者融合在一个画面里面，改变了一般灯泡的感觉，增加了灯泡的趣味性。

画面的主体元素确立后，背景的处理相对就简单些，背景处理大部分是通过笔刷、色块堆积、不规则形状、羽化、水粉等手法进行处理。处理方式大家各有各的方法，这里给大家展示一些背景处理的案例。

设计理论和设计方法肯定非常的多，这里只是介绍几种，希望大家能再补充。欢迎大家随时拍砖。

源地址：http://www.aliued.cn/2012/12/22/fun-design.html

关于扁平化界面风格的设计美学讨论

c7210 — 2012-12-25 09:17:15

似乎真的没发生什么，也就是玛雅人过了个年。本周的更新如约和大家见面，视觉方面的一篇悠悠闲闲的小文章，关于扁平化与拟物化风格的讨论。

我个人对这方面的话题是蛮关注的，偶尔在微博上弱弱的念叨两句，也会有不少朋友来发表各自的看法，确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的，其中有些比较公允务实，有些则比较偏颇；所谓偏颇，也就是片面表达某种风格一定比某种风格更好，以及好在哪里。说真的，都有一定的道理，都能看出发表论调的设计师的思考和激情。

有人说了你怎么这么没节操呢，你到底觉得哪种好呢？我要说的是叭，在我看来这个事情里的的确确不应该存在哪个强于哪个的争议，因为它根本就不是个非黑即白非美即丑泾渭分明的问题；脱离了实际产品的上下文环境，脱离了产品功能与目标用户群类型之间的关联，所谓好与不好的命题压根就不成立。

说的具体些，远的不讲，单说Beforweb这边的视觉风格，除了每篇文章的图标以外，可以说是彻彻底底的扁平化了(当然，细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框，这个不算数...)，但如果有人说我是扁平风格的卫道者的话，我会很不开心，因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面，最典型的包括语音备忘录、iBooks、iPad里的日历等等，它们的界面让我觉得亲切自然，让我可以在冰冷的电子设备当中找到现实生活的真实感，就这么简单。

下面这些截图来自我平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒，我着实在这些东西上花掉不少钱，但如果它们的界面没有采用如此逼真的拟物化设计，如果他们只是干巴巴的功能和数据陈列或是Metro风，我是绝不会在它们身上花半毛钱的。

之前看到过一句话，大意是，Metro风格让人看到未来，而拟物化则让人感觉像是回到家里一样。说的挺不错的；人不可能一直呆在家里，也无法始终飘逸洒脱的在外面寻求新鲜与未来感。我喜欢听真人使用真实乐器演奏的音乐，但这不妨碍我偶尔听听电子的东西。

今天自己念叨的有点多了，我们还是进入译文的正文叭。作者从扁平化风格出发，慢慢引出了相对“公允”的看法，我个人觉得比那些单纯强调某种风格的文章要有点意思。走着。

如今，关于“扁平化”与“拟物化”孰优孰劣的争论在圈子里此起彼伏的。我(英文原文作者)个人总是会被极简设计所吸引，所以扁平化的界面设计风格确实是我的菜。

什么是扁平化设计

在实际当中，“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面。

Layervault的设计师Allen Grinshtein曾经在HackerNews的一篇文章当中说：

“长久以来，网站的界面风格似乎都在遵从着同一种设计美学，大家都在用斜面、渐变、阴影一类的效果来突出界面元素的质感。对于设计师们来说，制作这类‘可爱’的元素简直变成了行规甚至是荣誉。不过对于我们，以及为数不多的其他一些设计师来说，这种惯用的方式并非一定正确。”

去Layervault看上几眼，四处转转，你会发现他们所追求的这种于简约当中体现出的视觉美感。看到我们一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用产品中被潜移默化的颠覆着，也是蛮有意思的事情。下面是其他一些例子：

Squarespace

新版的Squarespace几乎完全采用了扁平化的视觉风格，只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现，其实他们的产品在功能逻辑上还是蛮复杂的，但这一切都隐含在简约直白的界面背后，你真的可以从中隐约感受到其设计团队付出的心血。

相关阅读：简洁至上的Web设计 - 创意要素及设计技巧

Facebook

另外一个大家所熟悉的例子就是Facebook了。

“Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外，其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色，至少我们可以说这种设计风格对于Facebook来说是完全适用的。” - Ian Storm Taylor(Segment.io)

Rdio

Rdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格，你很难找到使用了阴影、渐变等效果的界面元素。

Nest

我曾经作为前端工程师参与过Nest的网站开发，现在依然记得他们的设计师对扁平风格的热情追求。在他们的网站中，实际的产品及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介载体(网站本身)当中，虚实结合，让访问者可以很容易的将注意力聚焦在产品上，而不会被网站界面上的视觉元素所干扰。

Beforweb

本小站乱入...译者C7210注

对拟物化的逆袭

正如20世纪建筑界当中的极简主义运动，扁平化设计风格的逐渐兴起也可以被看作是对多年以来过度设计、过度雕琢的界面风格的逆袭；尤其是最近一段时间，苹果一直以来的拟物风格被诟病的蛮犀利的。

Wikipedia对拟物化(“仿制品”、“Skeuomorph”)的定义是：

原有物件中某些必需的形式在新的设计中已不再必要，但新设计仍模仿旧有形式，以使新的外观让人感觉熟悉和亲切。

举个例子，我们通常会为界面当中的按钮添加渐变和投影效果，因为现实当中的按钮就是具有这些视觉特征的，即使这些效果对于界面元素的功能来说没有任何实际意义。又譬如有些天气方面的应用会使用温度计的形式来展示气温；在现实世界中，这种实体的存在是必需的，而在应用软件当中，温度计的形象则纯粹是装饰性的。

日历应用当中皮革质地的设计元素是必需的吗？如果按钮上不使用3D质感，用户是否还知道它们可以被点击？有多少装饰性的元素是真正必要的？

“在现实生活中，当按钮被按下时，你可以清楚的感受到它的弹性，但在桌面设备或移动设备的显示屏上，你无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实体本该具有的反馈效应，至少对我来说这是一种很蹩脚的、不符合预期的体验。” - Allan Yu (svpply / eBay)

形式服务于功能

20世纪建筑界的极简主义运动当中提出了一些著名的口号，包括“形式服务于功能(form follows function)”、“少即是多(less is more)”等等，直到今天我们依然会谈到这些。此外，我个人非常喜欢米开朗基罗在被问到他是怎样创作大卫雕像时回答的：

“很简单。我只要凿去多余的石头，留下有用的。”

对于界面设计来说，也是同样的道理；37signals的家伙们在这方面的本事是有目共睹的。要在实际当中卓有成效的实现扁平化风格的设计美学，作为设计师，我们本质上最需要关注的是产品功能如何运作，而不仅仅是考虑视觉呈现方面的问题。

扁平还是拟物？只是个选择的问题

至少我没有见到任何研究报告表明拟物风格的按钮会带来更多的点击量。的确，有足够多的理论和实践结论可以证明在视觉上能产生更强对比效果的交互元素可以更好的引起用户的注意，但我相信，在某些上下文环境中，一个扁平化的橘色按钮所带来的对比效应会高于具有凸起质感的按钮。所以，上下文，也就是具体产品的具体界面环境，是这里的一个关键要素。我们来看看其他设计师的一些看法：

“这件事和时装时尚有些类似。当某种风格被全面普及之后，作为设计师，要想脱颖而出，你就得反其道而行之。” - Cemre Güngör (Branch)

“如果有人告诉你‘拟物化是不好的设计’，这就相当于在说‘紫色是丑陋的颜色’，没有任何意义。” - Sacha Greif

“为什么要在没有任何实际证据的情况下贬低某种设计风格，同时抬高另外一种？忽略产品的实际功能与整体体验而单纯追求某种设计风格，这并不是一件令人兴奋和愉悦的事。” - Geoff Steams (YouTube)

设计的好坏不是“美学”可以决定的

对设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来，相比于拟物化而言，扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

无论采用怎样的风格，优秀的界面设计都需要遵从一些共通的设计原则：

一致性

通过具有一致性的设计模式及视觉风格，为用户建立起完整一致的心智模型，使产品更加易用，提升整体体验。

对比

通过对配色、尺寸和布局的调整，使可点击的界面元素在视觉上与其他元素形成鲜明的对比。

布局

可以尝试使用960gs一类的网格布局为界面设定视觉规范，使用户的视线可以跟随内容本身所界定出的路径自然的移动，增强界面的视觉平衡。

层级化

最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来，简单的说，就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素，而将其他操作元素置于次要位置，这可以使界面得到最有针对性的优化和简化。

“我个人的经验是，无论扁平化还是拟物化都没什么所谓，最重要的是界面能够让用户在最短的时间内清楚的识别出信息和功能的层级关系，并且很容易的知道接下来应该做什么。” - Caroline Keem

目标用户

不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格，而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。

反馈

当点击行为发生时，要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式，例如在用户执行操作后，使用旋转图标提示用户系统正在进行响应。

推荐阅读：为用户的成功操作提供正面反馈

降低“摩擦力”

无论采用怎样的视觉风格，都要使界面尽量简化，减少用户完成目标所需执行的操作，打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本，增加功能的复杂度，进而降低转化率。

相关阅读：表单设计与转化率的提升

鼓励探索

了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能，并开始向“高级用户”的阶段进发时，要为他们的探索和学习行为进行必要的指引与“奖励”回馈。

原型

无论风格如何，界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作，特别是通过草图或线框原型进行的探索。识别出最核心的用例需求，使用原型不断尝试和验证，为接下来的界面设计工作打下坚实的基础。

“扁平化风格的逐渐盛行固然有它的道理，但本质上它只是设计美学当中的一种；与仿古、高光、金属质感、木质等视觉效果相同，对视觉风格的选择必须以良好的信息架构及交互模式为基础。” - Mike Cuesta (carecloud)

源地址：http://beforweb.com/node/142

建立良好的视觉层级

yangmei — 2012-12-07 20:21:35

随着互联网信息爆炸式增长，用户浏览单个网页时，并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看，为什么？

一、 视觉层级为什么重要

左侧是设计师期望用户的浏览方式，右侧为用户实际的浏览方式—摘自《Don’t make me think》

用户来到一个网站有他自己特定的目标，如阅读新闻、购物、查看新消息，然而信息量太大，逐一查看需要大量时间，这就要求网站能抓住主流用户特征，将重点推送给他，用户找到自己的目标或感兴趣的点，才有可能继续浏览或产生下一步动作，否则就会离开。

用户时间有限加上互联网信息量巨大，这两项原因正是考验视觉设计师要建立良好的视觉层级呈现给用户，帮助用户快速找到目标的功力。

二、 建立良好视觉层级的作用

1、提高识别效率

2、激发受众兴趣

举几个例子：

左地图是市级展示的地名，当用户搜索到街道级别时，才会把本街区内的店铺展示给用户，在特定的情况下只展示必要的信息，有利于用户高效找到自己的目标

我们看新闻时首先要关注的当天的头条新闻，其次是编辑推荐的，时代周刊首页很好的让头条新闻和logo一起第一眼被我们捕捉到，主次处理的很清晰

辛德勒名单电影中的某镜头，通过色彩强烈的对比拉开视觉层次，给观众留下了深刻的印象同时成为经典

三、 如何建立视觉层级

我整理了三个方向内容供大家参考：

1、决定不要展示什么

页面简约的前提是所呈现的内容都是主流用户多数情况下必需的，这样可以让设计师专注于解决有限的重要问题，而不是大量的信息没有经过筛选就开始排列优先级

上图是我们家中常用的遥控器，大多数功能使用量很少甚至一次都没有用过，右图将不常用的功能键做简单的删除，前后对比，后者看起来让人轻松多了—摘自《简约至上》

再由设计师对剩下的按键进行设计，相信遥控器使用起来会更简单，干扰更少。

Outlook邮件网页界面，默认情况下对邮件的操作入口都是隐藏的，只有当用户选择了邮件之后，才会出现对邮件的操作，同时不常用的操作也会被隐藏到下拉菜单中，如“答复”菜单下隐藏的“全部答复、转发”，这种隐藏非核心内容的处理方式，能让用户更集中于他可关注的信息和主要操作

2、 深度加工信息

为了更快速的让信息被感知和接收，我们需要对信息进行加工，简单的文字罗列需要用户静下心阅读，而经过深层分析的比表层分析的信息，给用户留下的印象会深刻很多。

举个例子：国家地理蓝鲸网站为了呼吁保护蓝鲸，首先要让人们了解蓝鲸的特征及当前的威胁，网站通过动态的将蓝鲸与其他生物和人造物进行对比，形象直观的传达蓝鲸的重量、大小，加上视频展示目前蓝鲸的主要生活威胁，用户即使不阅读文字也能大致明白网站想要传达的信息

3、组织信息

1） 表达信息之间的关系

信息之间的关系有并列、关联、包含、因果等，每种关系都可以通过多种视觉表现形式来传达，这块可以深入去探讨，我大致举一些实际项目过程中对信息关系处理的案例，来看看前后的变化

信息的关联

设计中的留白是很重要的元素，它能很直接的影响用户对信息关联关系的理解，如上图，因为留白的不当，“楚中天”被轻易理解为“林蛋大”

信息的并列

对软件中众多功能进行并列的分块组织，能让用户在大块中再寻找小块，提高识别效率，如Excel界面，当我们想要对字体样式进行编辑时，能很快定位到第二模块进行寻找，而不受其他模块的干扰

案例：外贸邮界面优化

上面的是我们外贸邮界面目前的状态，所有的操作都并列摆放，随着功能的增多，用户识别的效率大大降低，优化的方案是将相关的操作进行分组，正是运用关联和并列的信息关系进行设计

信息的因果顺序关系

上图是一个减肥饮料的广告，通过前后人物的变化，轻松的表达产品的功效，而在我们网页界面中，主要还是通过色彩的对比和方向指向来传达顺序关系

如常见的步骤条，当前步骤为最显著焦点，已进行的为二级，让人感受为已激活的，未走过的步骤为灰色，层级最弱

下图是PayPal支付页面的一次优化过程，老版视觉虽然有层级区别，却打乱了完成任务的视线顺序，优化后强调行动点，行动前的视觉顺序在同一方向上，顺序的关系很明显，能提升用户的任务完成率。

信息的包含关系

Fluent新型电子邮件界面，箭头指向、缩进的表现形式很清晰的表达信息的包含关系，虽然这个创业团队没有成功，但产品的设计还是很值得借鉴的

2） 呈现信息的重要级别

理顺信息之间的关系之后，把握整体页面的重点，再和次要信息拉开层次呈现给用户，这是视觉设计师在设计单个页面时发挥功力的重点

不多说，看一些案例：）

上图是Airbnb的租房信息detail页面，租客在租房时最关心的信息为：房间实景、价格、房东的信息；看它的detail信息，也存在很多种类型，但用户最关心的三类信息因为位置、占用的面积大小让租客一眼就能掌握房子的基本信息，如有兴趣再继续看更多详情。

上图是设计师对数据表格的优化过程，第一版为简单的信息罗列；去掉重复的文案后并将表格本身的设计弱化，突出内容本身，第二版相对清晰了很多；第三版继续将重点进行加粗，改变排列方式可再次减少文案重复情况；第四版是该表格用户调研过程中反映最好的版本，因为用户会长期使用该表格来获取数据，设计将非重点文案进行隐藏，用户鼠标移上后才显示该数据代表的含义，教育过一次后用户再看这个表格就不再受众多解释文案的干扰，直接获取想要的信息；一个看似简单的表格，抓住重点信息，优化空间还是很大的。

上图我们团队对alibaba.com提供的服务介绍页面进行改版的项目，改版前的设计层级区分不明显，使得用户进入该页面时不能快速了解服务的概况，来判断是否继续深入了解；而改版后通过大小的对比，呈现抓住用户第一眼印象的信息，初步判断符合自己的需求，用户才会继续浏览。

3）围绕用户行为设计层次

把握整体页面的重点是设计的前提，但如何才能判断重点？这需要我们了解用户特征，以及他来到该页面的主要任务是什么，再进行设计能保证我们做了正确的事，否则设计的再有层次感也不一定是用户想要的。

支付宝近期在测试新版首页，我们来到支付宝首页最常进行的操作就是登录，而老版首页视觉第一焦点是导航及活动推广位，导航只要在固定的位置，用户在需要时能找到就已经达到目的了，它不应该成为页面的视觉焦点，除非用户经常在导航进行切换以了解网站提供的服务，在这点上新版首页弱化了导航及其他应用入口，强化支付宝本身的品牌传达及登录行为，很符合主流用户的行为习惯

近期在团队内部推进后台风格的改版，也涉及到这点，左图为后台延续了多年的导航风格，作为操作型界面，用户目的性很强，导航的强化会干扰用户对内容的识别效率，

右图为根据用户行为特征，弱化导航的设计，这样可以将用户的焦点集中在主内容操作区。

经过在线调研，得出的数据结论表明：新风格导航虽然在视觉上进行弱化，但寻找某任务入口的点击率要高于老风格，且寻找时间略低于老风格，总体新风格表现更好。

相反，如果我们没有足够了解用户的行为特征，如在原有页面上增加新功能，再强化也有可能轻易被忽略，举个我们实际项目例子：

下面左图框出部分是增加的功能，希望买家在发询盘给供应商时能对当前的采购需求建组并复用上次的内容，在内部讨论时，大家都觉得要强化该选项，让它成为其他内容的统领，然而调研的结果却大相径庭，用户无法理解这块内容或干脆以为是贴的广告内容而忽略；

调整后的版本把新选项弱化为简单的选择，复用询盘的功能分开，得到了用户和行业专家的认可

设计和用户期望一致，视觉层级才是有效的。

总结一下，建立有效的视觉层级主要从以下四个方面着手：

1、简约：有选择的展现信息，让用户在有限的信息中发现重点

2、组织：预先对信息进行科学的分类，整理好优先级，可以得到更好的传播效果

3、呈现：多种表现方法结合，呈现最好的视觉层级效果，这个点细化后有很多可挖，这里总结了几个点，欢迎继续哈

4、引导：遵循用户习惯，同时给予适当的引导推荐

一些拙见，与君共勉：）

源地址：http://www.aliued.com/2012/12/06/1355/

商业插画的风格赏析

MELL — 2012-11-14 09:24:27

摘要：插画的领域很广，关于插画每个人都有不同的见解，这次我主要分享一些商业插画的风格和应用。主要分成三大点去分析。希望能用最简单，直白的文字让大家认识插画的分支——商业插画。

一商业插画的概念

商业插画顾名思义就是以商业为目的，绘制符合商品和吸引大众的插图。和我们以往认识的工艺美术和传统派的绘画有很大的区别，也不同漫画。传统绘画是纯创作而和设计不沾边，而漫画有故事性，延续性。而插画有属于自己的领域和诠释。商业插画很多时候要单张表达它叙述的内容，要和内容相辅相成。所以要成为成功的插画师，我总结了一下几点。

●要有一定的美术基础。

●对色彩敏感。

●对设计有一定的认知。

●要掌握不同的绘画手法和软件。

●懂得发现生活，有所感悟。

●对潮流的把握度。对市场的了解。

拥有这些技能，才能运用到不同的商品中，在绘制的时候得心应手。

商业插画的寿命是短暂。不同的时代有着不同的流行走向，这点和服装设计有点相似，虽然这是商业插画的悲哀，但是它一时的辉煌是不能比拟的。一张好的插画，更胜文字，它能迅速捕获你的眼球，更能表达言语无法表达的情感。这就是商业插画，拥有一种让你不断追求，不断思考，不断创新的魅力。

二商业插画的风格和应用

商业插画的风格发展到现是多姿多彩，不限风格和手法，这里只归类一些常用的商业风格，加上自己对这些风格的一些应用的理解。

●时尚风格

时尚的风格比较多用于关于女性商品，商场招贴或者是一些宣传册上，多用矢量或者拼贴的方式变现，和服装，广告行业挂钩较多。

●唯美风格

多用于记事本，贺卡，游戏，相册等等地方，多见水彩，数码绘画等来实现。唯美不一定是人物，可以是场景，只要是渲染一种浪漫或者是心情的气氛。

●卡通风格

这种风格用的比较广泛，从小孩到老人都能接受的的风格。它不止用在动画片上，现在还广泛用在儿童读物，杂志，互联网上等等。而且不局限任何软件和手法绘制。

●新锐风格

这是一种前卫和讲究创意的插画。颜色通常不是黑白就是非常绚丽。多用矢量绘制。多用于衣服，纹身，广告，活动。

●装饰风格

这是一种低调的艺术画，现今也有很多商品都用装饰风格，多用线条或者色块去变现。多用矢量绘制，用于家居，布艺，衣服等等上。

三商业插画赏析

商业插画发展到今天，已经不止用在招贴和海报上，它广泛地应用在不同的商品上。风格也从一种演变成另一种新生的风格，或是两种或者以上的风格结合再衍生新的风格来结合商品来运用。但是无论是什么风格或者是什么商品，商业插画都需要无限的想象力，才能不断地更新和进步，刺激大众的购买欲望。以下主要用不同的风格放在平面或者广告上的演示。我们现在来看看以上列出的风格用在商业上比较好的案例。

时尚风格

这是典型的时尚风格的插画。富有张力和动感的线条和色彩，和时尚的形象结合，Chicaloca是韩国一个插画大师笔下的卡通形象，后被作为一个时尚品牌，有很多插画相关的时尚产品，已经流行了很多年。Chicaloca是代表年轻、积极、华丽、激情、时尚的品牌。　Chicaloca 从时装品牌发展成为时尚全品牌，当中包括服装，饰品，时尚文具，起居、厨卫用品等。一个积极的形象可以影响很多人，当你和画里的内容产生共鸣，这就是一个成功的作品。

……………………………………………………………………………………………………………………………………………………………………………..

唯美风格

这是韩国一个叫Jetoy猫的网站，唯美复古的画风加上原创的猫咪形象，不由得让所有女生都感到温暖和可爱。Jetoy品牌追求理念就是：让生活在都市中繁忙了一天的人们感受到童年时代淘气可爱的生活，让我们的生活更加充满纯真的梦想。Jetoy主要的定位是女性，产品都是为文具和一些可爱的杂货服务。所以唯美风格主要也是针对一些喜欢浪漫和温暖的女生商品。

……………………………………………………………………………………………………………………………………………………………………………..

卡通风格

这个卡通的形象叫PAUL FRANK，用矢量加明快的色彩形成的一个猴子卡通。然后从这个形象衍生了很多产品，都深得全球年轻人的喜欢。

Qoo是可口可乐日本分公司创作的一个形象。定位是儿童市场，但是它天然呆的形象不但儿童喜欢，也深得其他年龄层的人所热爱，Qoo名字的起因是日本人喜欢喝完酒发出那种很满足的声音，所以改名叫Qoo，而每个广告的结尾就是喝上一口然后发出Qoo的声音，和形象相结合，每个人喜欢去模仿它。虽然它现在没有以前那么红，但是它一时的热度却胜过很多公司的卡通形象。

……………………………………………………………………………………………………………………………………………………………………………..

新锐风格

这是ADIDAS的一则广告，画中是一个著名的女插画家的作品。和三叶草CROSSOVER出的平面广告。，阿迪的三叶草主要走年轻，潮流的路线，让很多追求潮流的年轻人都爱不释手，所以三叶草也不断会找国内外的新锐插画合作，宣传张扬自己和插画家的个性和新潮。

……………………………………………………………………………………………………………………………………………………………………………..

装饰风格

装饰风格的东西一般是经过一些规则或者是无规则的排列，用得比较广泛，通常用一些小元素从点到面排列出来，第一款手机壳用的就是规则排列，看起来整齐大方。第二款手机壳就是无规则排列，再加上粉嫩的色彩，让很多女生都爱不释手。

总结，只要你喜欢和用心去画，每个人都是插画师。

源地址：http://uedc.163.com/10189.html

网页中的手绘应用

姚小M — 2012-11-02 10:14:11

手绘元素通常是用在纸上的，但是它们被越来越多的用在网站设计上面，这些速写元素令网站极具个性并能为访问者提供有趣的体验。手绘风格的引入，对于互联网应用作品起到了一个积极的影响。不同的主题和绘画风格，使其表现形式具有原创性，给设计带来了多元化，人性化的特征。

我们先来看一些网络中的案例：

节庆主题插画

GOOGLE每一次节日活动的banner设计都别出心裁，这很大程度要归功于应景且独特的的手绘风格作品。

QQ浏览器中的闪屏设计，另一种视角展现节日主题。

网页中的插图

韩国保险类网站，五张插图使不同的保险内容一目了然。

韩国智能生活网站首页，信息量大的首页使用手绘素材比起真实素材来说更容易统一风格。

电商的品牌延伸

韩国电商网站，结合标志把卡通形象场景化，运用在网页每个类目中，增强品牌识别性和趣味性。

虚拟服务电商网站中的手绘应用

跟随网络世界蓬勃发展起来的是虚拟产业，将我们的数字化生活变得方便快捷。设计来源于生活，QQ网购充值中心主营虚拟服务业务，如话费，网游，保险，彩票等，常规的设计受到素材的限制，局限性很大。如何传播品牌形象，令消费者轻松愉悦的体验虚拟服务，这就需要我们的设计更加个性化，将情感因素溶入视觉形象中，借助虚拟形象来作为充值中心的情感载体，宣传和强化卡通形象，不管是大众传播、人际传播，还是组织传播，都可以互相渗透，综合运用。

生动化传播—卡通形象

生动化传播的要点在于形象生动、轻松互动，它能拉近卡通形象与受众间的距离，全方位带动受众的视觉和思考。卡通形象传播诉求的重点是引起形象联想，既以外在形象标准为核心，又有着内在本质内容。一套以卡通形象为核心的系统，能增强品牌传播效果。

充值小人胸口的“充”字为标识性的特点，根据不同的主题搭配表情和道具。

平台tips中的运用，增加一些趣味性。

运营活动tips中的运用，虚拟形象组件化，节省了创作步骤提高了工作效率。

运营活动中的运用，如节日、卡通角色家庭系列、情景主题、flash小游戏等等。

事件化传播—节庆插图

卡通形象的事件化传播是围绕卡通形象利用具有新闻价值以及社会影响的人物或事件，吸引受众关注。有利于培养卡通形象爱好者对该形象的忠诚度。我们以节日主题为创作了一系列的插图，对节日的美好祝福和情感表达，让用户自然而然的产生亲近感，激发共鸣。

充值中心首页的广告位、登录框以及每日精选中的运用

故事化传播—四格漫画

这不是一个故事的时代，而是一个讲述与表达的时代。多格漫画是现在网络中最流行的一种宣传手段，画面分格来完成一个小故事或一个创意点子的表现形式对于品牌的建立起到很好的带入作用。画面不需很复杂，角色也不要太多，对白精简，让人容易轻松阅读，强调叙事，可以吸引用户连续的关注。

在互联网高速发展的今天，网络文化也越来越看重自我个性和情感的表达，这与插画的内在特质不谋而合，最终促进网页在表现形式上的丰富与更新。

源地址：http://ecd.tencent.com/use-hand-painted-in-web-page.html

“小清新”风格的视觉表现

zhangqun — 2012-09-27 13:00:11

“小清新”，近些年才流行起来的一个新名词，用来描述一种文化现象，定义某一类音乐、文学、摄影作品的风格，也随之衍生成为对爱好这类风格的人的称谓。在平时工作中经常能听到耳熟能详的交谈：“某某某的设计风格很小清新……”、“这个颜色太小清新了不太合适”……

其实作为视觉设计师，我对这类风格在视觉上的表现一直很疑惑，究竟怎么样的设计才算是有小清新感觉的呢？难道这只是一种说不清道不明的感觉吗？在最近参与的一次运营分享培训时，也有运营同学问我，怎么样才可以PS出有小清新风格的图片呢，这也引发了我对这一类视觉设计表现的深入思考。以下是我整理的几方面内容，帮助我提取对这一类风格在视觉表现层的关键点，只是一点拙见，一点设计感悟而已。

首先，在我们所能看到的“小清新”里面，哪里些元素是最有特色或者说代表性的？
为此我找了大量的带有“小清新”tag的图片，发现女人永远是这一类风格图片中出现频率最高的，无论是背影还是传说中的45度角，还有带旅行元素的如老式的皮箱、铁路、背包等，以及微单相机、阳光、有特色的静物之类的元素，并且在摄影手法上，大光圈、故意的过度曝光、逆光拍摄，随意的lomo风格等等。

其次，除了上面提到的常见元素以外，色彩当然也是很重要的一方面。但是从“小清新”的字面意思理解，她的用色完全就是淡淡的很清爽的那一类色系吗？我通过她以及其他2个衍生的关键词做了一下情绪版的分析，并且通过Colorhunter这个站点提取了关键色彩并做了微调，在其中寻找到色彩上的变化。

再次，通过刚才的情绪版分析提取用色，发现其实在“小清新”的视觉用色中，色彩的饱和度并不高，并且从整个色立体模型来看，她处于明度轴最高位的下方，是带有灰色调的，这也许为了更好的展示这样的视觉风格所独有的，或怀旧或忧伤的感觉。以下图两种色彩模型为例：

冷色系

暖色系

最后，我们在web页面设计中遇到的“小清新”设计风格，具体的表现在哪些地方呢？
1.色彩，这个上面已经提到过了这个风格在色立体中的位置，她也是用户获取信息过程中最快能让用户感受到的。
2.页面框架,根据上述的分析，这样的设计风格对于页面框架布局毫不吝啬的使用留白，或者简单的线条对模块之间的关系进行分割，在这样的设计风格方面，个人觉得豆瓣、网易印象派都做的挺不错的。

3.关于质感，“小清新”的设计质感是轻量级的，或者说干脆抛弃了质感的使用，取而代之的是干净整洁的大色块。
4.图形元素与质感一样，也尽可能的使用了简单的表现方式，比如图形倒角、icon等无不简约，但又不失细节。总之，设计风格还是取决于产品本身的定位，风格必须与产品本身是匹配的。

最近感觉还是挺浮躁的，写写文章可以练心。马上要放假了，偷闲以这篇博文作为对前段时间一点设计心得的总结，不是设计高手，只是一个混迹设计圈多年的老油条，文中也许有词不达意的地方，还请一笑而过吧。

源地址：http://www.aliued.cn/2012/09/27/%e5%b0%8f%e6%b8%85%e6%96%b0%e9%a3%8e%e6%a0%bc%e7%9a%84%e8%a7%86%e8%a7%89%e8%a1%a8%e7%8e%b0.html

审美、效用与情感——关于icon和Logo设计的一些想法

西乔 — 2012-09-16 10:27:54

你们觉得iWork 3个icon里哪个最好。 Pages, Keynote 还是 Numbers?

虽然Pages和Keynote拥有非常精致的造型和拟真效果，但是就icon设计而言，Numbers要超过它们。 Numbers脱胎于现实中的物体但又不是完全模拟它们，形象更简洁有力。

从表意性上，Numbers 对图表工具的概念进行了成功的提取和抽象，相信任何人第一次见到这个icon的时候都能认出它是一种什么工具，但墨水瓶（Pages)的象征性太模糊，演讲台（Keynote）是一个人们不熟悉的且特征不明显的事物。人们在通过icon形象识别出工具用途时要更困难。

从辨识度上，透视和视角的选用形成了很强的立体感，配色也非常鲜明。这些都提高了你从dock条上把它辨识出来的几率。它的小尺寸表现也好于其它两者。

Icon的成功更多取决于它是否能有效表意（功能、用途或者非常鲜明的个性特征）并且具有很强区分度，容易认出并建立关联。而不是在于它是否材质更漂亮或更拟真。

为什么iOS UI上所有的icon都限制为圆角矩形？

有一些设备的UI上的icon允许透明通道，也就是允许icon是各种形状的。这显然让设计师有更大的发挥余地，能够创作出更漂亮的作品。

但是iPhone的桌面是一个访问频率非常高、空间有限、icon放置密度非常高的环境。icon之间的间距没法很大，如果不统一上面几十个icon的形状，会导致一个非常杂乱的界面，icon之间也会彼此干扰。（虽然LaunchPad也是这种罗列icon的方式，但拥有较大的空间和间距，情况会好一点。）所以规整统一的形状可以带来良好的节奏和协调的感官，同时也可以和设备的整体外形相呼应。

此外，设定这一“游戏规则”也平均了icon们的风格和水准。目前app stone上已经上架了10W个应用，也就有10W个icon，设计水平参差不齐。但统一的形状和iOS官方icon设计所引导的风格，让最差的设计师也不会做出烂得超过底线，影响整个设备UI的icon来。即使你啥都不会，选一个背景色，在上面放一个字母，也能成为你的icon，而且效果也不太坏。所以在iOS设备上你不会看到那种一堆icon里突然冒出一个特别土带着粗大的锯齿边和蹩脚阴影的刺眼玩意。

从iOS的开发定位来看，Apple一直都选用的是一个平均化但是最能保证整体效果的方案。让一个工程师，仅仅利用默认控件，也能做出可用可看的App。

设计和艺术的区别之一正是“设计是带着镣铐跳舞”。

游戏规则的设定，就是为了保障整个游戏的可玩性和所有玩家的利益，我想对所有icon外形的限制（包括HIG中对许多控件及交互方式的限制）就是整个平台设计策略的一环。

为什么Adobe套装里的icon都做成那个样子？

CS2在04年发布，CS3在07年发布。这3年间Adobe做了很多重要的战略调整，事件之一是收购了Marcomedia，并且更强调工具之间的兼容性，并提供一些平台化工具。Adobe需要推出更多套装，并在里面包含更多应用。从提供工具变成了提供工具箱。

CS3刚出来的时候，对icon设计进行了重大的改变，当然获得了大量恶评，理由都是一个丑。就单个icon来看，CS3的PS图标比CS2差几个级别，Adobe不是找不到好设计师，为什么要这么做。

看完这张图就明白了。Adobe的设计工具都比较难以根据功能来提取出一个具象概念，只好用羽毛，花朵，树叶这种很“精神层面”的的物体来表示。当套装变得更大，设计师桌面上需要放下更多Adobe应用的icon时会出现什么状况，他的鼠标会在几个icon之间遊移。当然假以时日，反射弧会被建立，也会通过摆放位置来进行记忆，但对于新用户而言，这无疑是一个悲剧。

展示这张图不是为了说明Adobe的新icon们在色相环上的分布，而是为了说明有它们工具数量的庞大。

CS3系列后的新icon虽然不好看，但无疑极为直观，无需建立对象及其象征物之间的关联，这不是表意而是直接对着你喊出来，“我是PS”。文字带来最快速的反应。

风格强烈，你可以轻易识别出它们是属于一个Adobe的。

此外它最大化利用了系统中icon的尺寸限制，一整个大色块。所以你会发现它们无论是在dock条还是windows桌面上，都是抢眼的。

设计过程中如何做决策，美的标准是什么，我借用一下《data visualization》一书中的观点：novel （创新)， informative (这里可以理解为否实现设计的功能，传达出需要传达的信息）, efficient （能否有效地达成设计诉求）, aesthetic （是否有视觉魅力）。受众、目标和情境是设计开始之前必须回答的问题，一个不能保障可用性（有效达成目标，满足需求，适配于使用情境）的设计，再好看再创新也是失败的。Adobe的选择也正是基于这一点。

OS X官方App中最打动你的icon是哪个？

Automator. 这是一个通过点击拖拽这些操作在不同应用间创建工作流（批处理）的工具。这用一个拿着管道（连接件)的高科技机器人来表示最非常恰当的。精密、冷酷、充满魅力的质感，直接就是苹果的气质的体现。

它打动我是因为它是一个被人格化的icon，也是OS X官方icon中唯一一个拟人化的设计。用一个令人爱不释手的高科技机器人来表达一个编程工具。Automator代表了apple script的最高成就，这种东西对于编程语言的意义，相当于GUI对桌面系统。高科技机器人带给我们的，正是利用高水平的技术和工业设计，提供了生产率，降低了使用门槛和成本。这个形象是不是也让你作为一个普通人也有兴趣去尝试编写程序。比Terminal的icon给你的心理压力小多了吧。

这个设计在可用性和美观的标准之上，体现对情感的传递。它建立的不仅仅是效用，而是喜爱。很多时候，感性认识比理性认识对于人们做出决定更为关键。

新版的icon更换了质感，简化了材质上的细节，加深对比度和整体颜色，强化了轮廓。我感觉是一个从炫目、模拟真实质感->更简洁和抽象、和环境能搭配的变化过程。新版的在小尺寸下表现也更好。

NeXT的logo是不是很丑？

很多人都知道它是Jobs请Paul Rand花了10W刀设计的。

首先我觉得它并不好看。但是好看绝对不是一个LOGO设计是否成功的唯一标准。

首先试图追溯Paul为什么要这样设计NeXT的logo

这就是NeXT cube， NeXT computer的机箱，它最大的特征就是方正（据说Jobs花了很大代价追究8个角的锐利，就像用尺规工具在纸上画出来的那样干净准确）、极简（用色纯粹，没有多余的线条和装饰）。这个工设放到30年后来看都毫不逊色。

这是NeXTSTEP / OPENSTEP 1.0 (released in 1989)。该 GUI 的图标很大，48×48像素，包含更多颜色，从1.0开始支持彩色，已经可以看到现代 GUI 的影子。

比较一下同年代的其它GUI水准。

Windows 2.0x (released in 1987)

OS/2 1.20 (released in 1989)

Desktop Computer操作系统之GUI发展 http://blog.csdn.net/greenhand_/article/details/7787861

N e X T 这4个字母的颜色，搞设计的同学应能容易联想到CMYK，现在找不到原设计图了，没法取到精确色值，但我推测都是满值的。大红 M100%Y100%, 绿色 C100%Y100%，黄色Y100%，品红M100%。
我的一个在苹果工作过的朋友，在那个年代见过NeXT的LOGO，他的印象是颜色非常艳丽饱满，这也正是Paul想传达给消费者的关于这个产品的特征。在当时的印刷平均条件下，Paul的这个用色选择是大胆，同时也是成功的。

Paul 从NeXT的经典产品中抽离除了最本质的几个特征。立方体，极简，纯黑的底色，还有颜色丰富、富有魅力的GUI。

抽象的过程就是一个简化的过程，也是一个靠近事物本质的过程。得到本质以后，其他一切都只是从属，都可以根据恰当的条件进行省略。

Jobs看到方案问Paul, 还有其它可选方案吗？Paul 说：“没有，我已经解决了你的问题。付钱吧。想要可选方案？找别人去吧。”

我的理解是，设计是为了解决问题达成诉求，所以最合适的方案当然只有一个。Paul自信他提出的这个设计就是这个最合适的方案，因为它已经解决了“品牌传达”这个最核心的问题。

Paul 是包豪斯设计思想的继承者，同时为商业服务的使用美术大师，他喜欢拼贴风格，拼贴可以突破空间的限制，用色强烈，造型简单，追求准确的传达而不是盲目的创新。Jobs的评价也是这样，认为Paul 是艺术家和商业问题解决者的结合，认为 Paul 的设计很 emotional（感性），同时又很 intellectual（理智）。

所以关于这个问题我想说的是，美的标准是变化的，建立在时代和文化背景上的，在观看一件历史上的设计或者艺术作品时，只有理解了它的背景、出发点和诉求之后，才能触摸到它的本质，学习到它的成功之处。同时对于一件为商业服务的设计而言，“有效”是最核心的，而不是“好看”或者什么别的。当然达到有效的手段有很多种，比如创新、情感化，视觉表现手法当然也在其中。

为什么世界五百强中大部分的Logo都很“难看”？

回答完了上一个问题之后，我觉得这个问题也不用回答了。

我给难看加上了引号是因为审美永远是一个相对标准，随个人偏好、时代定位和文化背景所变化。

世界500强公司能做大往往也有着悠久的历史。他们的LOGO穿过了几个文明快速发展、观念快速变化的时代，其传播载体和条件也在不断更新。无论它们是否还符合现在的审美，它们在当时的背景下都已经完成了品牌传达的目标，建立了鲜明识别度，并且成为企业文化的一部分。

源地址：http://blog.xiqiao.info/2012/09/13/1254

Mac Ｗin 网页字体显示方案

icoli — 2012-08-26 17:31:51

Mac在诞生的时候就把对字体处理尽可能接近原貌成为它很大的一个卖点，而在这些年亲身使用后，个人感觉Mac下的字体确实看起来比Win下舒服些，特别是在浏览网页时，字体比较“珠圆玉润”，可惜的是Mac目前并不是主流，大多数还是Win用户。所以即使你所使用是Mac，在设计仍然要记得平衡Win下的效果。

Mac和Win的显示区别

截了段文字做了个对比,很容易看得出来，字体显示起来是有很大的差别的。

Mac下文字是渲染过，比较饱满，Win下更像素化些，看起来很清晰。具体什么因素造成了这个差别，已经有不少的讨论了。 Joel Spolsky「Font smoothing, anti-aliasing, and sub-pixel rendering」总结了各自的区别。

苹果认为，字体渲染算法的目标应尽可能还原字体的设计，即使代价是造成些许模糊。
微软认为，字符的形状应和像素契合，以防止模糊，提高可读性，即便扭曲了字体的构造。

Typekkit 「Type rendering: operating systems 」也总结了一段

Mac OS X users see Core Text, Windows 7 and Windows Vista users see either DirectWrite or GDI, and Windows XP users see GDI. For now,

还有更多，我就不摘过来了，大家可自行搜索。

默认字体&CSS字体设置

字体的差异不仅是渲染的效果，其实Mac和Win的默认字体也是不一样的，Mac是“华文黑体(Heiti SC Light 和 Heiti SC Medium)”，Win是“宋体(Simsun)”，所以在页面没设置默认字体的情况下，同个页面在2个系统同时展示的中文字体也是不一样。（字体效果可以见刚才的2个系统字体对比图）。有种特殊的情况，即使命名了默认中文字体Mac也会使用系统默认字体，不知这算不算是一个Bug，情况如下：

font-family:"宋体" Mac下无法认出宋体，Win可以认出
font-family:"simsun" Mac和Win都可以认出宋体

在使用中文命名时，还可能会遇上CSS编码导致发生乱码的问题：

综合发生的情况，建议在设置字体时都使用英文描述，这些是从网上找了相关中英文字体的命名：

宋体: SimSun
黑体: SimHei
华文细黑: STHeiti Light [STXihei]
华文黑体: STHeiti
微软雅黑: Microsoft YaHei
微软正黑体: Microsoft JhengHei
新宋体: NSimSun
新细明体: PMingLiU
仿宋: FangSong
楷体: KaiTi
更多中文字体的英文名称的文档

暂定的解决方案

在设计时候如何能够平衡Mac和Win的设计差别? Win下面可以在PS中使用“宋体无渲染”完全还原默认系统的文字效果，但Mac下可能系统的文字渲染和PS中的文字渲染算法不一样，总是有点差别，没办法完全的还原。

所以在考虑到网站的用户是以Win为主，PS中又能够完全的还原Win下文字的显示效果，同时之前的一段中发现在Win下面有不错效果在Mac下也会有不错的表现之后，有了一个暂定的方案：

统一使用“宋体无渲染”为默认文字，先保证在Win系统下的显示效果
在CSS中不订下默认字体，根据系统格式调整
在网页上线后在Mac下再进行一次复查，保证Mac下的显示效果

目前这个是能考虑到的暂定的方案，看到这篇文章的设计师们有没有更好的解决方案？

【延伸阅读】

针对Mac单独优化字体 mac下网页中文字体优化

Mac下字体研究关于MacOS下字体的一些研究

源地址：http://icojump.in/?p=2200

响应式字体排印：基础

vivianalive — 2012-08-03 18:44:31

响应式字体排印：基础
Responsive Typography: The Basics
英文原文链接： http://informationarchitects.net/blog/responsive-typography-the-basics/
作者：Oliver Reichenstein
译者：vivianalive

我们建网站，一般是从定义正文文本开始。正文文本的定义决定了你主要内容栏的宽度，而其它的属性以前则几乎是遵循它本身。以前是如此。直到不久前，屏幕分辨率还是基本相近。现在我们面对的是各种大小的屏幕和分辨率。情况变得复杂多了。借着网站重新发布的热火，我匆匆地写了一篇关于响应式字体排印的博文，焦点是我们最近的实验相关：响应式字体排印。如果不了解iA的历史，你可能会忽略掉我们新网站上的一些响应式字体排印和设计方面的关键要素。我没有把与该话题相关的文章整理一起，相反，我决定从头开始，一步一步解释响应式排印。下面是第一步。为了避免给任何可能大小的屏幕设计不同的布局，许多web设计师采用了响应式web设计这一概念。简单地说，这个理念是，你的布局可以自动按照屏幕的分辨率来调整。它有多种解释。我最喜欢的是：

自适应布局：分步地调整布局以适应有限种(屏幕)大小。
流体布局：持续不断地调整布局以适应各种可能的宽度。

虽然两者都有优缺点，我相信，分段尽可能少的自适应设计是最好的。因为可读性比拥有一个总是和viewpoint（视口）一样宽的布局更重要。这个观点本身所涉及的因素相当复杂，值得商榷。但为了确保最佳的可读性，须控制文本大小（内容栏的宽度），因此流体布局带来的问题比它解决的多。更多这方面的内容下次再讲。注意：响应式设计已经结合了许多宏观的字体排印问题（字体大小、行高、列宽）。所以响应式设计在许多方面已经结合了响应式字体排印。我们发布在网站上的第一篇关于响应式字体排印的文章主要是关于我们使用分级字体（译注：字体大小阶梯式地改变）。我想在下篇文章中讲分级，现在深入讲屏幕上响应式宏观字体排印的基础。

选择一种字体

正确的基调

你早晚要决定使用那种字体。你对字体的选择基本就决定了基调，但，由于每种字体都有它自己的品质且要求（或限制）特定的处理方法，字体的选择会带来诸多视觉和技术上的结果。有了web字体，你现在有很多的字体可以选择，于是找到一种合适的字体又变成一项挑战。我们通过为这个网站设计自己的字体来实验分级字体。我们选择了一种衬线字体，因为它符合我们的基调，映照了我们内容的文雅（至少我们是这么认为）。我们给iA Writer选择的是一种等宽字体。因为我们软件的主要目的是帮你获得第一份草稿，我们特地选了Nitti--一种让人同时感觉有力和细心的字体。选择一种等宽字体这一决定，也是由于第一代iPad系统不能自动调整比例字体的间距。我们没有使用一种可能被渲染得很糟糕的比例字体，而是决定直接选一种等宽字体。

衬线还是无衬线？

通常选择会落在衬线和无衬线之间。这本身就是一个复杂的问题，但有一条简单的经验法则或许可以帮你：衬线字体是一名牧师，无衬线字体是一名黑客。谁也不比谁更好，但是由于种种原因，衬线字体更具专制感，而无衬线字体更加民主。记住，这可是夹在两条弯弯曲曲的线中五千年的印刷史，所以别太认真。许多人还是认为，就屏幕上的字体排印，“衬线还是无衬线”这个问题本身就能回答。实际上没那么简单。与普遍观念相反，如果你设置的正文字体大于12像素，衬线和无衬线的表现就会一样好。低于12像素，衬线字体渲染的不够锐利，但反正（这把我们带到第二点）在现代的显示器上12像素实在太小。

大小？

你的正文字体的大小并非由你的个人喜好决定。它取决于阅读距离。考虑到通常电脑要比书本远，桌面字体的尺寸需要比印刷品上使用的字体更大。下边的插图说明，正文文本离你越远，它就应该更大。两个黑色的A和两个红色的A的尺寸相同。但由于右边放的较远，看上去更小。右图中的红色A看上去和左图中的黑色A一样大：你把文本放得越远，它看起来就越小。文本放的越远，你需要把它设的更大来弥补一个更大的阅读距离。到底要多大，这里边也有学问。如果你没有经验，一个好用的办法是，手举一本印刷良好的书，把它放到一个能够让你舒服地阅读的距离，同时朝你的网站看来比较。没有web设计经验的平面设计师会对，web上良好的正文字体与印刷品相比需要达到的大小感到吃惊。注意，只有当你把它边靠边比较时它才算大，在一定距离看则不会。如果在增大正文字体大小来匹配后，新的文字大小一开始吓到你，别担心，这是正常的。不过，一旦你习惯了它，你就不会再去用“标准”的字体大小了。我们自2006年开始推广这些“perspectively proportional(远视比例)”字体大小。一开始，我们宣扬用16像素Georgia做正文字体的基准引来不少愤怒的眼光和嘲笑，但现在它或多或少已经是一项共同标准。随着分辨率的不断提高，那项标准正慢慢过时。后边还会讲到。

行高和对比度

虽然正文文字大小可以通过距离观察的方法来估算，行高则需要一些调整。考虑到更大的阅读距离和（我们所说的）像素点问题，最好给屏幕文本比印刷文本更多一点的行高。140%是一个不错的基准，但当然，这取决于你所用的字体。今天你要确保对比度不是太低（如，灰色文字在浅灰色背景上）或太花哨（如，粉红色在黄色上）。由于屏幕字体排印是设计为白底黑字，用较暗的背景会遇到点困难，但如果做的正确的话，也可以。现代高对比度屏幕让深灰色文字或浅灰色背景的使用也成为可能，取代深黑色字体加白色背景。但这也并非最重要的问题。

iPhone vs iPad

关于响应式字体排印的很多东西，我们都是在为我们的写作应用找最佳字体的过程中学到的。当我们设计完iPad版iA Writer的时候，我们花了一周时间去寻找最佳的字体排印定义。那时，iPad的高分辨率是一个全新的挑战，我们花了很久才理解它的工作方式。当Apple先后推出iPhone和iPad上的视网膜屏幕，一切又变了。我们可以写一本书来解释我们是如何找到iA Writer字体标志性的外观，但还有许多更为普遍的东西要说，所以我就直入正题。如果你拿我们当前的iPhone版Writer同iPad版比较，你会发现它们的字体不一样。为什么要在iPhone和iPad上用不同的字体大小？如果你认真地阅读了前面的解释，你可能已经猜到了。

虽然阅读距离不总是一样，通常你会把iPad拿的稍微远一点。不管你是在早餐桌上用iPad，坐沙发上时放在膝盖上，或者躺在床上把iPad放在脸的正前方，你的这些阅读距离都不同。这是一想全新的挑战，因为在台式机或笔记本电脑上的阅读距离不会变化那么大。为了使它在各种场景下都能使用，我们选用最远的阅读距离来定义字体大小。其结果是，你在床上阅读它时，文字可能会感觉比通常的大一点，但并非不舒服。通常你也不会在床上使用一个躺在你肚子上的写作应用。
iPhone上你能拥有的屏幕资源更少一些，所以你不得不做出调整。

幸运的是，iPhone被拿着时和脸的距离更近，所以虽不得不使用更小的文字，但效果很好。从一个平均的阅读距离看，iPhone和iPad的文字大小感觉上差不多。由于iPhone被拿的更近，行高可以更紧一些。这也有必要，因为屏幕更小。你在为屏幕做设计的时候，并非事事如愿。交互设计是一项工程：它不是关于寻找最完美的设计，而是寻找最佳的折中方案。在我们的情况，我们不得不降低行高，并缩留小留白和字符间距：这些调整如此微妙，如果你不知道，你就不会注意到间距有多小。为什么我们不干脆去掉留白？留白不是为了美观，它让文字呼吸，帮助眼睛从一行跳到另一行。如果你觉得这些听起来全都很深奥：不行，目前为止，我们才涉及基础内容。

桌面电脑呢？

有些人抱怨Mac版Writer的字体太大。就像我们须要为iPad（拿在不同阅读距离）版选择，数个最小字体中最大的一个，我们为Mac版做了同样的选择。那时我们的基准是24英寸高分辨率的iMac，在其上感知的大小和别的设备基本一样。因为可以运行iA Writer的Mac电脑型号有限，我们可以确定不同可能的分辨率。我们观察了各种可能的配置，以确定该文字大小对大多数机器来说是最好的折中方案。你也许会问“为什么不直接让用户来选择文字大小呢？嗯，调整文字大小不是喜好的问题，而是阅读距离的问题。由于大多数网站和应用的文字过小，新顾客一开始会选择他们习惯的文字大小，也就是：文字太小，无法体验到我们写作应用的全部乐趣。其主要原因不是我们想把特定外观强加给全部用户：我们想要的是，不用设置或摸索就能用好iA Writer，你用它唯一能做的事情就是写作。这已成为它成功的公开秘密，改变这一点会糟蹋它的核心功能。（我们需要提高的是，面向视力不良者的无障碍功能的集成）。好，那为什么不按照设备的分辨率自动调整？那样不就是真正的响应式字体排印？的确如此，我们也正在做一些类似的事情。目前，为适应分辨率，你还须要选择正确的视觉重量，以确定该字体排印真的如期望那样适应各种大小和分辨率。此外，文字大小和字体的分辨率光学也会改变。这也是为什么iA Writer的Mac，iPad 1/2和iPad3版本都有不同的分级。要解释分级数字字体背后的完整逻辑，解释我们新网站背后的思考，我需要更多一点时间和空间。所以，请耐心等待第二部分。

源地址：http://ilite.me/translation/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AD%97%E4%BD%93%E6%8E%92%E5%8D%B0%EF%BC%9A%E5%9F%BA%E7%A1%80/

浅谈图片优化的方法

海的女儿6931 — 2012-07-25 10:22:34

在网站优化中，如果图片优化得好，不但可以提高页面的加载速度，提升网站的用户体验，而且还可以通过图片优化来节省网站的带宽。那么作为页面构建工程师应该采用什么方法来优化图片，既能保证UI的还原度，又使图片最精简呢？下面我就个人经验，来简单介绍一下图片优化的方法，首先我们了解一些图片方面的知识：

1. 矢量图与位图。

矢量图：缩放、旋转不失真的图像格式，不管你离多近去看都看不到图形的最小单位。存储的文件较小，但是很难表现色彩层次丰富的逼真图像效果。你可以理解成完美的圆型、抛物线等形状。
位图：又叫栅格图、像素图，最小单位由像素构成，缩放、旋转会失真。举个例子来说，位图就好比十字绣，远看时画面细腻多彩，近看时能看到每一针的色彩过渡。

十字绣十字绣放大

下表为矢量图和位图的对比：

2.有损压缩、无损压缩。

有损压缩：特点是保持颜色的逐渐变化，根据人眼观察现实世界的突然变化, 然后使用附近的颜色通过渐变或其他形式进行填充。因为素点的数据信息，所以存储量会降低，还不会影响图像的还原度质会有所下降。JPG是有损压缩格式，在存储图像时会把图像分解成8*8像素的网格单单独优化。举个例子：白色小块为8*8px，黑色底色块为32*32px，当小白块已经不是纯白色了，它周围的小白块却很尖锐，如下图所示：

右上角的白色格子刚好没有在8*8像素的网格单元中，所以保存时会跟周围的8*8的网格单元颜色融合，下图的效果：

这就是平时保存JPG图片时图像会模糊的原因，下面是几张彩色图的局部对比效果：

无损压缩：利用数据的统计冗余进行压缩，真实的记录图像上每个像素点的数据信息。他的原理是先判断哪些颜色相同，哪些不同，将相同颜色的数据信息进行压缩记录，把不同的数据另外保存。多次存储后图片的品质不会下降。

为什么无损压缩的图也会有失真的？因为他的压缩原理是通过索引图像上相同区域的颜色进行压缩和还原，也就是说只有在图像的颜色数量小于我们可以保存的颜色数量时，才能真实的记录和还原图像，否则就会丢失一些图像信息。例如，PNG-8和GIF格式：

而PNG24为真彩色所以颜色表为空，不会失真。

3. PNG 、GIF 、JPG图片对比。

在我们进行图像优化技术前，需要学习有关的图片格式的一些技术细节。每个图形格式都有自己的优势和弱点，知道他们会使你得到更好的视觉质量和压缩品质。

网页图片优化是网页加速中非常重要的一步，对图片进行压缩，不仅能够节约带宽，并且加快网页的速度。我们常用的图片编辑软件都可以在压缩图片。

PNG-8 的高压缩比

切图时，有时选择 PNG-8 可以获得更高的压缩比。注意，是 PNG-8，不是 PNG-24。不过有些情况下还是 GIF 或 JPG 会小一些，需要根据实际情况调试以选择最佳方案。

PNG-24 的优化技巧，使用色调分离：

拿微博左侧导航的小icon为例，压缩后的图像大小对比如下图：

PS色调分离的操作步骤如下：

对比大小：

使用工具优化后，还能够小一些：

请注意，上图中原本是GIF格式的图片被改为了PNG格式。所以，在使用工具优化时后需要再查看一下文件格式是否被更改，避免漏过某些图片没有优化。

图片优化在微博首页上的应用：

1. 图型类、照片类

对于图像格式的选择，我们还需要考虑图片的使用场景或功能，概括为两类：图型类、照片类

图型类：图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性，颜色数量较少。

图型类一般可以使用PNG格式或者GIF格式。优化时可采用PNG格式为PNG8或者PNG24，品质为32，如果色彩有损失可采用品质64或者128。

例如：首页左导的图标、feed区图标、勋章图、表情动画都属于图形。

照片类：照片通常含有百万数量级的颜色，包括平滑的颜色过度和渐变，如果是图形较为复杂，图中有时会出现真实的照片。

照片类一般用PNG和JPG。可以根据图片色彩的丰富程度而定。

PNG的品质一般要到128。JPG的品质一般要在70-80之间，以噪点的程度确定。

例如：皮肤背景图、发布器、按钮背景、发布器下方的tips、右侧广告、用户头像、用户发布的图片。

2. 通用类、随机类

按照首页图片出现的频率分成：通用类、随机类

通用类：每个人首页都会看到，图标、按钮、小背景。

例如，顶部托盘图标、左导图标、feed区图标、发布器图标、身份图标、操作类图标、状态类图标、按钮。尽可能的采用PNG的格式保存，文件会相对来说较小一些。

下图为微博的按钮和左侧导航icon小图的，使用GIF和PNG格式的大小对比：

下图为微博的按钮背景图分别使用GIF和PNG格式保存的大小对比：

随机类：根据自己定义和发布的内容而定。

A. 表情GIF

可以使用FireWorks或者ImageReady，建议使用ImageReady。

最好是手动一张张的调整，因为这些表情图的色彩值都比较少，如果使用比较大的颜色时会存储量较大。

另外，批处理的话也是需要一个文件夹一个文件夹去处理，表情的文件夹太多了，基本上批处理还是很慢。批处理如果是使用FireWorks的话，有的动画会出现变快或者是缺边的情况。

手动处理时，根据索引色的多少来存，一般来说4-128索引色存储。

B. 换肤类图片：

采用JPG格式或者PNG格式。

皮肤的主要背景图中如含有真实的照片或者文字，可采用JPG格式，为了保证更接近设计图需采用85以上的品质压缩图片。如果色彩跨度不大的背景图片，可采用PNG格式。

C. 勋章类：

目前有GIF和PNG两种格式，GIF的是小图、PNG的是中图和大图。品质选128即可。

这个目录批处理比较快。因为都是在同一个文件夹里。但是手动的话会更小一点。

D. 各种广告：

发布器下方tips、右侧广告、底部广告。采用JPG格式或者PNG格式。

E. 用户相关图：

头像、用户发布的图这个需要在后台控制压缩品质。采用JPG格式或者PNG格式。

图片优化工具Smush.it 介绍

Smush.it 是 YUI 团队制作的一款基于 YUI 的在线图片优化工具。

它是基于以下四条图片优化建议制作的服务：

· 移除 JPG 中的 meta 数据。

· 优化 JPG 的压缩率。

· 转化特定 GIF 图片到可索引的 PNG 格式图片。

· 从可索引的图片中移除没用到颜色信息。

所以使用 Smush.it 压缩图片可以删除图片中多余的字节而不改变图片的视觉效果和质量。

在实际使用中发现：

· 它还能把某些JPG图片转化为PNG图片。

· 对于PNG24真彩色图片，能够去掉一些肉眼察觉不到的颜色信息，弥补photoshop和firework优化不了PNG24图片的不足。

· 可以优化GIF动画图片。

Smush.it 使用

方法一：使用Firefox的插件Yslow里的Tools工具中的All Smush.it™

拿微博首页为例：

Firebug，使用Yslow工具，运行后，选择Tools

点击All Smush.it™，会自动跳转到http://www.smushit.com/ysmush.it/得到下图:

点击按钮Download Smushed Images后，会让下载一个zip的压缩文件。

方法二：直接登录 Smush.it 的网站，把需要压缩图片的url粘贴到输入框中（或者从本地电脑上选取图片），点击 Smush 就可以进行图片压缩，然后 Smuch.it 就会提供一个优化报表，显示图片压缩比率和节省了多少字节，并且提供一个可下载包含压缩后的图片文件的压缩包。

下图为直接填写线上URL的方式（以逗号隔开）：

下图为从本地电脑上选取图片的方式：

下图为优化结果：

归纳:

让我们再回顾一下重点：

1. 选择合适的格式：用JPG保存照片、用GIF保存动画，其他图片使用PNG保存，并尽可能用PNG8。

2. PNG24图片的压缩技巧。

3. Smush.it的使用。

源地址：http://udc.weibo.com/2012/07/%e6%b5%85%e8%b0%88%e5%9b%be%e7%89%87%e4%bc%98%e5%8c%96%e7%9a%84%e6%96%b9%e6%b3%95/?utm_source=rss&utm_medium=rss&utm_campaign=%25e6%25b5%2585%25e8%25b0%2588%25e5%259b%25be%25e7%2589%2587%25e4%25bc%2598%25e5%258c%2596%25e7%259a

倾听色彩的声音

serena.dong — 2012-07-19 15:29:01

前言

色彩是一个网站的情绪表达方式或者说是性格特征的体现，每种颜色都有着属于自己的声音。作为一种视觉元素，色彩是很难被量化被衡量的，也很难用理性的角度去分析和阐述它，我现在试着用另外一个角度去试图衡量网页的色彩，一种尝试。从最基础的色彩本质、色彩搭配形式、及色彩对用户的潜在影响和心理暗示等着手，去分析色彩，读懂色彩，让色彩帮设计师说话。

一、色彩的基础知识

色彩的三大要素
1.色相
我们最常见的色谱“虹”就是把颜色按照“ 红橙黄绿青蓝紫 ”依次过渡渐变，色相两端分别是暖色、冷色中间为中间色或中型色。

2.明度
明度就是色彩的明暗差别，如深红、大红以及粉红等。

3.饱和度
饱和度是指色彩的鲜艳程度，也称色彩的纯度。

二、不可思议的色彩魔力

1.色彩有魔力，选色需谨慎！
快餐店给我们的印象一般是座位很多，效率很高，顾客吃完就走，不会停留很长时间。有人喜欢和朋友约在快餐店碰面，但其实快餐店并不适合等人。这是因为很多快餐店的装潢以桔黄色或红色为主，这两种颜色虽然有使人心情愉悦、兴奋以及增进食欲的作用，但也会使人感觉时间漫长。如果在这样的环境中等人，会越来越烦躁。

请两个人做一个实验，让其中一人进入粉红色壁纸、深红色地毯的红色系房间，让另外一人进入蓝色壁纸、蓝色地毯的蓝色系房间。不给他们任何计时器，让他们凭感觉在一小时后从房间中出来。结果，在红色系房间中的人在40~50分钟后便出来了，而蓝色系房间中的人在70~80分钟后还没有出来。有人说，这是因为红色的房间让人觉得不舒服，所以感觉时间特别漫长。确实有这个原因，但也不尽然。最主要的原因是人的时间感会被周围的颜色扰乱。同样道理，高血压的人忌红色。

再举个例子，在时下非常流行的休闲运动潜水中，人需要携带氧气瓶。一个氧气瓶大约可以持续40~50分钟供氧，但是大多数潜水者将一个氧气瓶的氧气用光后，却感觉在水中只下潜了20分钟左右。海洋里的各色鱼类和漂亮珊瑚可以吸引潜水者的注意力，因此会感觉时间过得很快，这是原因之一。更重要的是，海底是被海水包围的一个蓝色世界。正是蓝色麻痹了潜水者对时间的感觉，使他感觉到的时间比实际的时间短。（部分资料来自-《每天懂点色彩心理学》）
2.听见色彩的声音
以上故事和实验都证明了，颜色是可以左右用户的情绪，也可以影响用户判断的。既然色彩潜意识在影响这着我们，那设计师必须学会善用色彩，在设计的时候，用色彩去正确传达产品的本质和内涵。当色彩被正确传达后，便能与用户产生心灵共鸣，产品也就能更深入人心。

黄色：青春、乐观、豁达。常被作为点睛之笔。
红色：活力、速度、紧迫感，常用于促销打折甩卖等。
蓝色：信任、安全、有底蕴，常用于企业、银行、安全中心等行业机构。
绿色：生命力、轻松、天然、无污染，常用于保健品等行业。
橙色：积极、进取、活力，阿里巴巴色也是橙色，常用于唤起行动，如button的颜色也常用橙色。
粉色：浪漫、女人，常用于女性消费行业，女性产品等。
黑色：影响力、时髦、严肃，常用于奢侈品营销等。
紫色：安抚、冷静、神秘，常用于美妆或抗老的女性产品设计中等。

当我们了解了颜色后，就能更加准确的掌握我们的页面风格的定位，用颜色去阐述你的产品。经常做“脑部运动”，联想游戏等。

3.色彩与营销、品牌
每种特定的行业，都有相似的产品色彩倾向性

大部分知名品牌的logo倾向于用色彩相近的色调

三、色彩搭配

以下以banner为例，简单剖析下色彩的搭配技巧及色彩搭配组合方式以及搭配呈现的视觉效果。

单色搭配：由一种色相的不同明度组成的搭配，这种搭配很好的体验了明暗的层次感。

近似色搭配：相邻的两到三个颜色称职为近似色。如下图（橙色/褐色/黄色），这种搭配比较让人赏心悦目，低对比度，较和谐。

补色搭配：色环中相对的两个色相搭配。颜色对比强烈，传达能量、活力、兴奋等意思，补色中最好让一个颜色多，一个颜色少。如下图（紫色和黄色）。

分裂补色搭配：同时用补色及类比色的方法确定颜色关系，就称为分裂补色。这种搭配，既有类比色的低对比度，又有补色的力量感，形成一种即和谐又有重点的颜色关系，如下图，红色文字就显得特别的铿锵有力，特别突出。

原色的搭配：大部分是在儿童产品上，色彩明快，这样的搭配在欧美也非常流行，如蓝红搭配，frickr的logo以及麦当劳的logo色与主色调红黄色搭配等。

四、如何准确定位你的色彩

前面分析的是通过颜色去感觉情绪。这里简单写，如何根据产品去捕捉色彩，也就是所谓的MOOD BOARD(情绪版)。
情绪版是指对要设计的产品以及相关主题方向的的色彩，影像，图片等其他材料的收集，从而引起某些情绪反应，以此作为设计方向或者是形式的参考。（具体请参考情绪版(Mood board)操作流程的新思考——晓千）
1.原生关键词选择
首先，通过对产品的理解与认识，以及用户调研等得出体验关键词（Experience Keywords）。
2.衍生关键词
针对所得到的关键词，扩容信息，通过头脑风暴画出关键词的思维导图，寻找扩展关键词。
3. 收集相关图片，提取图片生成情绪版
通过“原生关键词”和“衍生关键词”，通过网络渠道，收集了大量的对应的素材图并配合定性访谈。
4. 衍生关键词的分析——分维诠释
5. 对情绪版进行“色彩分析”和“质感分析”

色彩提取工具：http://kuler.adobe.com/#create/fromanimage

总结

色彩是种感觉，当我们学会读懂色彩，听到他们的声音，就可以做到熟能生巧，跟随着流行的趋势去游刃有余的驾驭它。我的见解大多也是基于前人的分享总结，同时结合了自我的一些观点。总之，多看，多想以及多临摹，都可以帮助设计师在色彩感觉训练上事半功倍。成功的配色方案，一定是理性+感性的结合，所以设计师要做个感情细致，情感丰富的感性之人，题外话：）。

源地址：http://www.aliued.cn/2012/07/18/%e5%80%be%e5%90%ac%e8%89%b2%e5%bd%a9%e7%9a%84%e5%a3%b0%e9%9f%b3.html

矢量图标的管理和应用

一淘UX — 2012-07-16 16:45:16

设计的循环

毕加索终生喜欢画牛。年轻时他画的牛体形庞大，有血有肉，威武雄壮。但随着年龄的增长，他画的牛越来越突显筋骨。到他八十多岁时，他画的牛只有瘳瘳数笔，乍看上去就象一副牛的骨架。那些牛的外在的皮毛、血肉全没有了，只剩一副具有牛的神韵的骨架了。

设计也同样，过去我们借助工具希望把我们的设计做的很饱满很逼真，通过渐变、高光、投影等手段把效果做的很绚丽，但是随着设计风格的推进，简约越来越受设计师们推崇，可能因为我们生活在一个嘈杂的社会，设计师们希望通过简化设计，去除一些无用的元素凸显产品主要功能为我们的科技生活带来一些宁静；

我们仿佛看到了大师画11副牛时思考的画面。简单——真实——简练；

图标设计

图标是网站、软件设计不可避免的涉及到元素，在过去各个大公司在图标设计上有自己不同的理解，微软的图标设计的原则是数位化，非真实生活中有的。苹果公司的图标设计更偏于写实。但今天他们对图标的表现风格却有了一些共识——扁平化！虽然图标在页面、软件中的存在地位是勿用质疑的，但是设计师还是希望降低图标对内容的干扰，图标设计时设计师更注重图标形本身所能传达的含义，用户是否可以很直觉的了解图标形的含义。

科技带来的挑战

科技日新月异的今天，市面上各种分辨率、各种显示精度的显示设备层出不穷，在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求；如设计师为iphone 3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示（new ipad）上展现就不尽人意了。那这么多的显示设备，那么多的图标尺寸设计师难道要一个一个去优化去设计吗？

传统位图形式的图标应用使设计师在不同平台上花费很多重复的工作量，而且还未必能做到面面俱到。矢量图标技术在网站、app中的应用就显得尤为重要了；

矢量技术在图标上的应用

现在可以承载矢量图形，同时又可以在app、web上使用的主要有svg和我们熟悉的字体文件；在这里我们主要介绍后者——图标字体；顾名思义图标字体是将图标以字体文件为载体在页面中展现，前段工程师可以通过控制字体的方式控制图标的大小颜色；

图标字体的特点：

1、高兼容性；因为是矢量格式所以图标在不同分辨率不同显示精度的显示设备下都不会出现模糊的情况；

2、易于控制；因为是字体格式，所以可以通过css控制图标的大小、色彩实现投影、浮雕等效果，也可以通过两个图标叠加方式的方式实现更多丰富的效果；

3、方便管理查询；由于图标字体的灵活调用并展现，我们在可以把他们集合展现在一个页面上，设计师或则前端工程师可以方便查询或预览部门效果；

4、文件非常轻量；一个项目如果只需要20个图标，一份图标字体文件的大小可能不超过15K。

5、减轻设计师的工作量；对于苦逼的设计师来说一个图标只要画一次，可以衍生出不同尺寸，那绝对是福音；

图标字体制作

首先是制作字体软件，大家可以使用Font Creator Program、Fontographer、FontLab Studio；我们这里主要介绍如何用FontLab Studio制作一个带有图标的字体，非常简单；

1、复制一个已在AI或ps里画好的图形，图形的路径必须是封闭的；

2、用fontlab打开一个字体，拷贝图形并替换某个文字图形，调整图形大小（以虚框为标准，大小不要超过虚框）

3、将制作好的图标导出ttf字体格式；

前端应用

第一步：使用font-face声明字体

@font-face {font-family: 'uxiconfont';src: url('uxiconfont.eot'); /* IE9*/src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('uxiconfont.woff') format('woff'), /* chrome、firefox */url('uxiconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('uxiconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */}

第二步：定义使用iconfont的样式

.iconfont{font-family:"uxiconfont";font-size:16px;font-style:normal;}

第三步：挑选相应图标并获取字体编码，应用于页面

iconfont">!

源地址：http://ux.etao.com/posts/221

跟紧时代，让你的设计更加popular

EE — 2012-07-11 09:05:54

如今，随着智能手机、平板电脑等移动手持设备的普及，越来越多的Web网站都在向这些平台做兼容。同时，这些移动设备上的视觉设计与交互设计也在影响着Web端的设计。

所以，现在我们的设计是不是要变得更加的popular一点呢？是不是可以总结出一些方法让我们的web端产品跟上时代的脚步呢？

源地址：http://uedc.163.com/9543.html

效果图进阶展现，给效果图赋予思想和生命

adalili — 2012-07-11 08:48:10

设计师所做的每个作品都像是自己的孩子一样，在孕育的过程中思考了很多，但这些思考的过程、思考的方法并不是单单一张效果图就能够展现的；设计师有很多专业层面的认知，效果图上并不能展现，加上设计本来就是相对感性的，所以很多时候分歧就这样产生了。

不要用蓝色的，换个颜色试试，试试绿色、紫色、橙色，都试试吧……；这个元素大一些，那个元素也大一些，还有那个也大些……；不要用这个字体，换个别的试试……；尝试把这个模块整体放在左边，下面那个模块拿到右边去，不还是整体放在上面试试……OH，My God！每个设计师背后都有一群指点江山的神！呀……

每当别人叫你改这改那的时候，作为设计师的你难道能做的就是自怨自怜，一边舔舐受伤的心，一边改自己的作品？在这个时候有没有想过为什么，有没有对自己的设计效果图充分的负责任呢？

第一步：100%界面展现+设计思路

将效果图100%界面展现并配以自己的设计思路，这对于设计师发效果图来说是最基本的了（效果图由于文章图片宽度要求进行了压缩）。如上图所示，为百度手机输入法V2.1版默认界面和换主题界面效果，阐明设计理由，方便需求方知道你为什么这么设计，对于一些不合理的需求是曾经尝试过并且pass掉了。

对于重要的项目，不能简单几句阐明设计理由的，可以采用PPT等形式，多页阐述设计过程和思路，并最终100%界面展现的设计效果图。如上图所示，百度手机输入法Logo改版时，我们从最初的改版目的、关键词思路扩展、收缩关键词、颜色搭配、元素搭配、实际效果在手机端展现等多角度，说明为什么Logo设计采用如此的形状和颜色。

最终新版百度手机输入法Logo为上图所示。

效果图展现基本Taps：
1. 效果图要保存成实际大小，或者不影响需求方对效果判断的尺寸
2. 将图片保存成.png或者尽可能质量高的.jpg或者.gif格式，不要让效果图色彩有损失
3. 阐明设计理由：为什么要用这几种颜色搭配？为什么图标要设计成这样的质感？为什么要使用这种字体？…… 如果是重要项目，思考更为复杂和成体系的，可以考虑PPT等形式进行整体阐述
4. 如果是手机端界面设计，尽量提供文件供需求方实际上机测试看效果。

第二步：赋予思想和生命，融入情景化设计

上述所说的第一步是作为一个设计师交付效果图最最基本的需求。在完成第一步后，如果想给你的效果图更为加分，那么就需要给效果图赋予思想和生命，融入情感化的设计。关于这点大家可以尝试从如下几方面入手。

整合：将几个关键界面整合在一张图上，如上图所示，百度手机浏览器Android版的效果图，将起始页、输入状态、进度条读取、未读取等状态进行了整合。这样做方便需求方根据交互流程图对照，能够对软件有比较整体的感觉。任何设计都不是孤立存在的，放在一起更能够让需求方明白设计师的整体考虑，尽可能减少一个界面、一个细节效果修饰的近乎完美，但是在整套界面中搭配存在不和谐的情况。也能够让需求方明白你有全局考虑的意识。

动态效果：越来越多的软件设计从添加动效这个角度提升用户使用感受，动效可以使界面与界面间切换看起来更为衔接和流畅，但是如何能够让需求方或者开发方明白设计师希望表现得动效是怎样的。这个时候如果能够在效果图初稿阶段稍许添加一些，就可以让需求方在第一时间感受到效果，用尽可能少得成本有所体现。如上图所示，某软件的效果图中，就简单展示了拨盘滚动、更多相关信息滚动等效果。当然效果初稿确认后，如果需要更为真实的动效，还需要制作动态Demo，更为高阶的效果展示暂时不予讨论。

情景化：正如上面所说，每个设计元素都不是孤立存在的一样，效果图也是可以有思想和生命的。如上图所示，百度手机浏览器Logo设计的效果图，完成这样已经完成第一步了，100%的效果展现+设计思路。

设计是很感性的，除了专业的理论用以支撑和说服外，如何才能让设计师在设计过程中想要传达和表述的意境，想要带给用户的使用感受最直观的传达……那只完成第一步就远远不够了，这时可以在第一步的基础上，辅助一些情景化的效果图，将设计师心中的想法直观的表现出来。如上图所示，百度手机浏览器的小熊Logo，他是活的，他可以悲伤、可以快乐、可以蹦跳、甚至可以飞翔……这样做为了能够说明，这个Logo在未来有很好的延展性。

他不是孤零零的哦！在这个世界上他又自己的朋友！这样做是为了说明，除了日常以标准样式出现外，在特定的节日或者根据特定的人群，他是可以个性化定制的，为后期运营打下了很好的基础。

作为一款产品的Logo，最终在产品应用上的展现是他的使命。如上图所示，效果图充分展现了Logo在未来使用的各个场景的效果：启动界面、桌面图标、桌面Widget等。一方面能够让设计师在考虑之初，仔细审核设计是否可以应用于各个场景，是否需要根据场景做相应的变形；另一方面，也可以让需求方直观的感受到，设计在未来应用中的实际效果。

他不仅不是孤零零的，有自己的朋友，他甚至有自己生活的事业，他是一只冲破了第一宇宙速度的熊，他高高在宇宙看着地球上的一切一切……

通过上述第一步、第二步的工作，需求方能够通过效果图清楚明白在设计过程中都考虑过什么，设计配上、界面布局等等一切都是有理由的，他们能够和设计师感同身受，这个时候推动效果被最终使用的几率就大大增加了，虽然看似多花了时间，但是后期不断调整修改的时间会大大减少。很多时候并不是背后的“神”们有多难搞，而是在思想上没有同步，设计师没有明白需求方要的究竟是什么，需求方也没有最终明白设计师究竟想表达的是什么。

效果图展现进阶Taps：
1. 有相互关联的几个关键界面，放在一整张图上面予以一并展示
2. 涉及到动态交互的，提供简单的动态效果
3. 设计是感性的，通过情感化的效果图让需求方明白在设计过程中都做了哪些思考……

在上述Tips的后面，我添加了……，是因为这样还是远远不够的，后续还有更多可以为效果图做的事情。设计作品就像是设计师的孩子，而效果图则是这个孩子第一次接受世界审视的机会，如果你真爱自己的孩子的话，就请好好包装，让效果图不再是冷冰冰，而是可以传达你的思想和感受的载体，给效果图赋予思想和生命吧！

转载请注明出自”百度MUX”

源地址：http://mux.baidu.com/?p=2605

网页核心内容对视觉表现的影响

wantfee — 2012-06-11 08:45:44

“对信息的优化和提炼永远都是设计的第一步。”这是百度联盟用户体验中心Banner上的一句话。在自己做网页设计的过程中，越来越对这样的概括有了切身的体会和想法。当然，这句精炼的句子其实包含了非常多的内容，我个人认为，至少包括这四个方面：一、从网站的整个诉求来讲，网页上需要放置哪些信息才能更好的实现网站的诉求？哪些信息是需要保留的？而哪些信息是需要放置在其他页面甚至干脆舍弃掉的？二、对于已经确定放置于页面的信息，如何更好的撰写文字、挑选图片才能达成功能性和视觉上美观的完美统一？三、区分信息的重要程度，哪些是重要的，需要着重表现的？而哪些是次要一些的信息？四、区分出信息的主次后，在布局、色彩、尺寸上，即在视觉上如何更好的突出和表现？

这四个部分的每一部分几乎都有讨论不完的话题，那么在这篇文章中我只就第四个方面，也就是网页上核心内容和视觉表现的关系来梳理和概括一下自己在这方面的一些理解，尽量的将我所考虑到的内容都写出来，同时举一些具体的案例来说明我的观点，便于大家更好地理解。

一、核心内容对于页面布局的影响

下图是一个提供WordPress网站建设的公司，在它的主页上从上到下可以看到这样几部分信息：导航、Logo、口号、作品展示、选择我们的理由、联系表单、日志列表、邮件订阅、Twitter信息以及版权信息。其中的第一视觉无疑是公司的口号和作品展示，这就是此网站主页上的核心内容。因为作为一个网站建设公司来讲，直观的让客户知道你是干什么的？干的怎么样？应该是客户最想要了解的内容。那么对于核心内容，在视觉上做了哪些考虑呢？

我们可以看到，在宣传口号上设计师给”wordpress”这个词应用了非常大的文字尺寸，并且颜色上和其他文字区别开，使用了较深的灰色，强调本公司是建设专门以wordpress为后台的网站。在宣传口号的下方的作品展示图的尺寸很大，宽度达到了540像素，而整个的设计宽度是1000像素，在主页上这样大尺寸的展示图能够非常清晰而直接的让客户看到作品的原貌，从而对于公司的制作水准有了一个直观的印象。而这样的大尺寸的作品展示其实已经隐约的决定了整个网站的布局。想想看，在屏幕的左上方区域摆放上一个宽540像素，高460像素的矩形之后，接下来的区域该放置哪些信息，其实就像是摆放积木一样，按照重要程度挨个放置就行了。当然这并非是唯一的布局方式，但是无论何种布局方式，我们的想法都应该在功能性的考虑的范围内进行。所以创意我们可以有，但是要明白和天马行空的纯创意的区别。

如果上面的页面布局仍然让人觉得中规中矩的话，下面的一个酒店的主页的布局也许会让我们感觉有些新意。可以看到，此设计的背景用了大幅的食物图片，导航和主内容区只占到整个页面高度的三分之一，让背景的图片大面积的呈现出来，和上面的设计一样，这样布局的目的并非单纯是为了标新立异或者是为了视觉上的美观，而是该酒店的特色也许就在于餐饮方面，所以为了对核心内容进行突出，在布局上做了相应的考虑。再下面的一张餐厅也在主视觉部分强调了美味的食物，但两者采用了完全不同的布局方式，虽然各自有信息架构方面的独特考虑，但是也不妨将它们看作同样一种核心内容的两种不同的创意方式。

二、核心内容对于色彩方案的影响

Lofter是网易提供的轻博客服务，其中的信息类型主要有四类：即：图片、音乐、文字、视频。关于Lofer的模板设计，木偶同学在《LOFTER轻博模板设计》一文中对主要展示图片的模板的有如下设计方面的考虑，”该模板通常是为了满足摄影用户，图片展示面积要够大，够爽；模板首页一屏能看多图；背景要暗，突显当前图片；边框的设计让图片更突出，或让图片更精美。”通过分析和理解此设计思路，我们能够发现，其中的图片展示面积要够大，也就是我们上面提到的布局方面的考虑，而背景要暗即是我们这里要讨论的对于色彩方案的影响。

从木偶同学的完成作品中我们可以看到，按照设计思路做出来的灰色的背景平静而低调，和白色的图片边框和背景形成鲜明的对比，而灰白的色彩方案和色彩多变的图片不会冲突，无论图片怎么变化都能和灰色和白色百搭，所以彩色的图片在白色的背景和边框的映衬下更加抢眼，让照片这样重要的信息在视觉方面得到了充分的表达。

另外的一个例子来自于韩国的搜索引擎服务网站Naver。liuman0722在《高效的设计可视化》一文中针对Naver的设计写到”韩国著名门户/搜索引擎网站Naver旗下的Naver Shopping，其产品定位即提供商品的搜索服务，通过搜索商品名称，可以按照商品类别列出几乎韩国所有的大型电子商务网站提供的该商品链接。所以在界面上，用强对比色调突出搜索功能和导航区（页面左上角的绿色区域）。通过视觉化引导，让用户专注于核心内容，聚焦用户视线的焦点，在白色为主色调的页面，视线会先看到强色调的部分，所以也可以用强色调来突出核心内容，让用户的视觉聚焦在那里。”

所有的视觉设计都是围绕信息来做的，我们必须首先梳理好了信息的内容和结构，才能知道应该在哪里施以重墨，在哪里点到为止。反过来，很多的设计思路和想法可以说本身已经暗含在信息中了，比如我们上面提到的布局和色彩方案。只要提炼和优化好了信息，怎么来做其实在梳理信息的过程中就渐渐的明晰了。

源地址：http://startwmlife.com/web-core-content-of-the-visual-performance/