如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

发好看的国外设计作品，总有人会评论你换成汉字试试。不过确实有很多人存在疑问：看国外的作品真的有用吗？今天这篇超全面的教程，教你一个正确观看优秀作品的姿势，保证能让你换一双看作品的眼睛。

之前听一位同学在公司看国外作品学习的时候，公司的一个老员工发现了，就过来语重心长地和他说，你看这些东西没用的，学不到东西，就是在浪费时间等等，类似这样的话说了一堆。听到这个话题的时候就特别的亲切，因为在开始接触设计的时候，和那位老员工的想法一样。但是随着对设计的理解越来越深，接触的项目多了以后，这种想法慢慢就淡化了。

其实新人对研究国外作品这件事存在误区是很正常的，毕竟应用的文字不一样，内容多数我们也看不懂，把时间花在这上面给人的第一感觉确实有点不合适，哪有直接去看国内的作品来得过瘾。我们暂时抛开作品的数量与质量不谈，来聊聊这个话题。

我们平时在工作中完成的作品，里面基本都会包含文字、图片或图形、色彩这几种基本元素，不管你做的是海报、logo还是画册都离不开它们，比如纯文字类型的海报、公告、条幅。

纯图片形式的灯箱、画册、展板、品大片。

纯图形的UI图标、布展装饰、logo徽章。

包括纯颜色的手机屏保、背景墙之类的设计，这些基本的设计元素，会在设计作品中单独出现。

而更多的设计作品都是这几种元素同时出现的结果，这些海报中，文字、图片、图形、色彩这几种元素都占全了。注意，这些海报用的都是中文，属于国内的海报对吧？也能够在这上面学到一些东西，那我们换几张国外的作品看看，有什么不一样的地方。

日本的、欧洲的等等都是优质的设计作品，我们可以来分析一下这些作品，风格、技法、表现形式暂时可以抛开。

构成他们的元素和国产海报有什么区别？都存在文字、图片、图形包括色彩，唯一的区别就是上面说的，不同的国家，使用的文字会不太一样。那么这种文字上的差异真的会影响到我们对这个作品的研究、欣赏吗？

答案很明显，不会的。了解一些构成知识的同学都知道，构成版面的基本元素就是点、线、面，而文字、图片、图形包括色彩，他们在版面中整体来看，本质上就是点线面的具象表现。那我们在欣赏这些作品的时候，完全可以把文字看成是点线面的存在，这样的话也就没有必要纠结他用的是哪个国家的文字了。

像这张国外的海报，我们把这里存在的视觉元素标注出来，他们本质上就是这些东西。

国内的也一样，如果你看到的是这些东西，还需要纠结这是哪个国家的作品吗？

版面中的所有视觉元素，都可以看成是点线面的存在。

来做一组实验，这张英文海报，我们把这里面的英文，替换成汉字。前后对比一下，海报的整体感觉，基本没有出现什么变化。

再换一组，感觉基本一致。

再来一组，这回我们把英文替换成日文。类似这个版面构成的形式，我们把文字替换成英文、汉字，变化也不会很多，依然很美观。我们研究、学习、欣赏优秀作品的时候，一定不能受到类似「看国外的设计没用」这类思维的束缚，不然的话你会错过很多的。

不光从构成的角度看这个问题是这样，其实从设计发展的角度来看，也能得出同样的结论。因为现代设计教育的起源来自德国的包豪斯，后来包豪斯的理念传到了美国，又通过美国传遍了整个世界。包括我们现在学习的平面设计体系，都是一脉相承的。从这个起源的角度来看，也不存在国内、国外那么大的差别。都是一个门派的，只要做的好，那看谁的都一样。说了这么多，应该能看出来，我们是鼓励大家去多看优秀作品的。那么坚持做这件事，又能得到什么呢？下面就来说一下，为什么要养成欣赏优秀作品的习惯？

欣赏优秀作品的习惯

先来看看这个习惯能给我们带来的好处有哪些。

1. 提升审美

长时间欣赏优秀的作品，会对我们个人的审美能力有质的提升，帮助我们开阔眼界。眼高手低虽然是个贬义词，不过这对于正在成长的我们来说是好事，最起码能让自己对自己的能力有一个比较清晰的认知，知道自己做的不够好，这样会有动力不断的鞭策自己学习新的东西，把专业做到更好。

2. 培养兴趣

如果我们对这个行业没兴趣的话，就算你再有设计天赋，也很难做好的。坚持看优秀的作品给我们提供持续的刺激，说不定哪幅作品就非常合你的胃口，勾起你的兴趣，让你花时间去研究。

3. 利用碎片化的时间学习

平时都很忙很累，再懒一点，就没什么完整的时间学习。这个时候如果能把碎片化的时间利用上，我们坐地铁、坐公交、午休、睡觉前，包括上厕所的时候都是可以通过欣赏这些优秀的作品提升自己的，这也是一个提升学习效率的习惯。

4. 为设计提供灵感和参照

这也是最重要的一点，不知道你有没有一接到项目，大脑就一片空白的感觉，是因为你干活干的太少的原因吗？不一定，有不少人每天不停的干活还这样。其实出现这种状况的主要原因就是看东西看的太少。很多好的形式我们见都没有见过，怎么可能有印象，没印象就更不可能把他们应用到我们平时的工作中了。

所以说，我们想有好的想法、无尽的灵感，必须通过看优秀作品这个成本低、见效快的方式来提升了，并且通过我们持续不断的积累，得到的东西会越来越多，这是一种可以不断提升自己的方式。

当然了，欣赏优秀作品也是有方法的，走马观花的看一大堆，最后能得到的可能只有审美的提升。就是感觉自己周围的人做的东西都是垃圾，轮到自己做，发现自己也很垃圾。那为了避免这个悲剧发生在你的身上，下面分享一些欣赏优秀作品的正确方法。

如何欣赏作品

我们欣赏作品的场景主要有两种，第一种是有目的、有针对性的去看；第二种是没有针对性的看。这两种场景要看的东西差不多，细节上会有一些差异，我们先来了解一下有针对性的。一般来说，有目的有针对性指的是我们接到了具体的项目，但是这个项目以前没有接触过，需要了解一下别人都是怎么做的，然后带着问题去寻找答案。

先从项目要求入手，就是看看你做的内容是关于什么的，比如你要做日本寿司海报，就去搜集这方面的作品。有些同学在搜索的时候很实在，要做关于寿司的海报就专门去找日本寿司的作品，这种方式的缺陷特别明显，如果你要做的这个项目品类能找到的优秀作品很多还好，不过多数情况下，优秀作品是不那么好找的。这个时候把思路打开，选择的余地就会大很多。

比如把日本寿司海报这个关键词缩减成日本料理海报，优秀作品的数量会成倍的增加。

或者你要做的是海报，那我们搜索的时候除了海报，还可以找日式的包装、画册。

网站、插画等等作品，都会给我们带来很多的思路。

数量的问题，这也是我们推荐看国外优秀作品的一个原因，光去找中文的作品，在一个小品类里，很难找到足够多的优秀作品，一般的东西又没有什么学习的价值，这时候加入国外的东西会让我们的选择余地更大、思路更广。我们在搜集作品的同时，连带关于项目的一些图片、文字材料都可以一起搜索，这样能帮助我们更深的理解这个项目，学到更多的知识。

其实学习这个行为不是非得上学、看书才能学，我们设计师在接触各种项目的时候，通过与客户沟通和查阅项目相关资料的过程也是在学习，而且我觉得这种学习方式比我们单纯的去上学读书更深刻、实用。学到的东西也是在工作中甚至生活中用得上。

在找到这些优秀作品以后，就可以尝试去寻找这些作品共同的规律。

比如文字，如果文字属于同一种题材的设计，就算是不同国家的作品，我们也会在里面找到一些共同的特征。比如这些关于食品的字体，都会表现出属于食物的那份圆润的特征，这就是一种规律。这些规律性的东西总结出来，就可以尝试应用到自己的作品中。这个是学习大的规律，在这个大规律的基础上，再去关注这里面的一些小的细节。想做好东西，稍小的细节也很重要。

再比如文字组的形式。文字的主要作用是传递信息，那么如何、美观的把文字表现出来就要靠文字组了。一款作品做的是否优秀，通过观察文字组的处理是否细致，很容易看出来。信息的层级关系需要文字组来表现，主标题、副标题、段落文字、时间、装饰性的文字等等，这些文字可不是随便扔到版面中就行了，它们都是通过设计师的处理，以文字组合的形式分布在版面的各个位置。

这里面每一个文字组合都是一个小的个体，比如很常见的日期的处理方式就有很多，像这张海报里日期文字组合的处理方式。

我们看到了觉得这个形式不错，就可以记下来。那这些处理方式我们见过了，遇到合适的项目，换一个字体，或者调整一下数字，就能应用到自己的项目中了，这些组合形式，你没看见、没有印象，自己拍脑袋是很难想出来的。

包括这种产品或图形的表现排列形式，在做画册、杂志、头图、详情页、海报、展板的时候经常会碰到。

自己排不好的话，就可以借鉴这些作品的形式和规律，再上手就轻松多了。如果你想做的是logo设计，也可以去观察优秀作品的细节，比如字体与图形的比例、文字与图形的间距是多少、文字与文字的间距如何控制，包括别人的创意点在哪，这些东西都是可以在别人的作品中学到的。

△ 《高手的平面课堂！解锁LOGO设计新技巧》

就像异形同构这篇文章，你看到了这类作品，就能回忆起这款 logo 使用的是异形同构中的边线同构这个方式设计的，这种方式有哪些特点？如何能设计出类似的作品？教程里都讲过了，这样又把之前学到东西巩固了一遍。

△ 《平面设计中，如何通过“抄袭”优秀的作品成为高手？》

包括你看过的作品，他们的网格是怎么划分的。使用的是什么样的字体、构图如何都可以作为我们思考学习的方向，关于这几点的详细内容，在之前的文章里很细致的讲过，没看过的同学可以去看看。

如果是没有针对性的看作品，和上面的思考路径是一致的，只不过是利用碎片化的时间来学习而已，更灵活一些，可以快速浏览，也可以观察细节。如果你有收藏整理这些材料的习惯会更好，拿出来就能用，收集整理的越多、越细致，以后工作起来越轻松。

案例演示

所谓的创意就是我们把不同的元素重新发散、打散、重组呈现的过程。能够保证有想法、思路的前提就是见识，要见过很多好东西，有了很深的印象以后才能凭借这些印象，学到的东西设计成新的、属于你自己的作品。下面给大家演示一遍，我们看多了优秀作品以后，再去做设计的时候会发生什么变化。

比如我们要用这些材料来设计一款网页头图。

看到这些材料，可能会想到以前在哪见过，类似这种左右放置的图配文形式。

产品价格的处理方式见过这样的。

文字的形式全部使用黑体和无衬线字体，很多作品都是这样处理的，放在一起很和谐。

还见过所有的文字组，都以左对齐的形式进行排列的作品。

只要有印象，我们在设计的过程中就会下意识的往这些方向上靠，设计出的作品也会接近前面的那些规则。

在这些规则影响的基础上，如果我们还见过衬线体搭配无衬线体的作品，图叠字的形式，也能做出接近的风格作品。

同样内容，不同的表现形式。你看过的优秀作品越多，选择的空间就越大。

我们再来看这个案例，一张艺术展的海报。

整体的骨架是这样的，这种骨架布局的方式来自于左边这个案例，类似的形式有很多。

主体文字组合的结构是因为见过类似的组合方式，在文字量近似的情况下，我们的文字组合也可以设计成类似的形式。

如果说我们设计的这个文字组合之间，距离稍远，也有很多的作品会使用线的分割来解决这个问题。

包括其他文字组合的布局方式，也是参照这种轴线式的排列方法。文字使用的是宋体搭配西文衬线体的方式，中文的宋体和西文的衬线体具有类似的笔画特征，基础文字的统一性能够得到保障。

将和主题相关的照片填充到划分好的网格中，这里面使用的照片是同一张照片的不同局部，这种对照片重复的处理方式也很常见，在给版面增加变化的同时，也会制造出一定的故事性，引发受众的联想。

一张海报从无到有的创作过程。

想设计出不错的作品，没有大量的积累，对优秀的作品没有印象是肯定行不通的。

总结

怎么样，是不是觉得多看看优秀的作品还是有用的？不管是国外的、国内的都一样能学到很多。类似我是做电商的，看印刷品的设计没用；我是做包装的，看版式的作品没用；我专门做商业项目的，看艺术类的项目没用；我们公司是做金融产品的，那看其他行业的东西都没用。遇到这种言论，我们可以冷静的思考一下，是真的没用，还是这个人，他不会用。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

为什么你的设计看起来很乱？在此之前我们先了解一个概念，我们怎样看这个世界？

我们通过眼睛看世界，眼（又称眼睛，目）是一个可以感知光线的器官。那么结论来了，我们看到这个世界，其实本质就是看到了光。举个例子，晴空万里时我们可以看到很远很远的距离，反之在漆黑的屋子里，我们什么都看不见。

我们再来了解第二个问题，眼睛是怎样成像的？眼睛通过调节晶状体的弯曲程度（屈光）来改变晶状体焦距获得倒立的、缩小的实像。简单来说，成像原理就是晶状体来改变焦距，简单一点解释决定成像的重要因素是焦距。

你的设计看起来很乱，往往在这几个方面出了问题：

• 明暗关系紊乱；
• 视觉焦点不明确，画面没有重点；
• 颜色杂乱，毫无章法。

明暗

明暗是指画中物体受光、背光和反光部分的明暗度变化以及对这种变化的表现方法。明暗分亮面，灰面，暗面，以及明暗交界线，反光五大调子。单个物体明暗关系，暗部（反光，投影）＞灰面＞亮面。整体关系，靠近光源暗部＞远离光源……画画核心画的是光，遵循光照的自然规律即可。

去色检查画面明暗关系

从上至下三张图依次是去色之后的黑白图；运用色相和饱和度给画面赋予一个颜色的单色图；原图。

从下图可以粗略得出结论，明暗（光源色）+固有色=色彩。调色之前先处理明暗，画面颜色处理起来就非常简单了。

最近火爆的国产硬核科幻片海报，即使去掉颜色，黑白关系依旧明确清楚。好的设计即使没有任何颜色，依旧是一副好的素描画。我所理解的明暗关系与色彩的关系相当于人体与衣服妆容的关系，对于一个美女是否漂亮，衣服妆容的搭配是你能达到漂亮的上限，然而你的脸型，身高，气质，皮肤才是你能达到的惊为天人的基础。

视觉焦点

视觉焦点究其概念，是让我们的视线多停留几秒的视觉元素，我们在画面中第一眼就能看到的元素，画面中的「主角」。

对画面的视觉漏斗进行分类：

• 视觉焦点：想看不见都很难，表现突出；
• 重要元素：不经意就能看见；
• 辅助元素：仔细看看也能看见（类似买理财产品的最右下角的小标注，「投资有风险，理财需谨慎」）

高斯模糊法看视觉焦点

眯着眼睛看形，睁着眼睛看细节。把画面模糊调到一定程度，然后看画面，如果画面仍然能看清楚「主角」，那么画面的视觉中心就是可以的。下图画面即使模糊了，我们依然能看清「男主角」沈腾以及飞驰人生四个大字，虽然原图背景复杂以及其他装饰物很多，依然不影响画面的整体协调感，元素多且杂而不乱。

这上面的两个例子看出，即使画面模糊了，还是能清晰看到画面表达的主题。那么模糊度多少合适呢，一般调整到上面所说的视觉漏斗中重要元素看起来刚好模糊到看不清就可以了。

色彩

色彩是附着在物品上由于光的照射产品漫反射的颜色，可以粗略按色彩元素分为光源色，固有色和漫反射产生的环境色。按照长期的实践经验来看，通常比较和谐的配色方式是除了产品的固有色之外，尽量把光源色和环境色统一在三种颜色（黑白灰不算颜色）之内，颜色比例尽量类光源色的主色调占据画面百分之八十的面积，其他环境色作为补充。

色彩插件检查配色

谷歌插件 palette.site 能分析出画面颜色的状态以及画面中几种主要的颜色，借助这个插件能很轻松检查画面是否超过了3种颜色（黑白灰不算颜色），如果超过三种颜色，那么页面就需要做减法，或者将颜色统一在一个色系里，用明度以及饱和度区分。

插件的使用方法：可以直接使用浏览器下载，然后也可以在浏览器中选择一张图片，右键「在新标签中打开图片」，然后再「点击右上角的插件按钮」分析颜色状态。

从上面的两个案例中可以看出，两个 banner 的颜色分析基本都在三种颜色以内，特别是下面的看起来比较复杂的颜色，总共分析的颜色也就红黄蓝，其中蓝色还是点缀色的存在。

今天的内容就说到这里了，我们回顾一下重点内容，解决画面看起来很乱可以有以下方法：

• 去色检查画面明暗关系
• 高斯模糊法看视觉焦点
• 色彩插件检查配色

设计虽没有近路，但可以少走弯路。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

 

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

 

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

作者： John Saito | 翻译： 正_青_春 审校： 凌艺蜻

我从设计中学到的一件事是你无法取悦所有人。你可以尝试，但你最终会得到一个大打折扣的设计，而且无法让任何人满意。

当你试图让所有人满意时，你会失去你的重点，你会开发一些人们不需要的功能，你所写的用户也根本不会去读。

好的设计就是完全围绕一个清晰的目标。这一点非常重要！

过去的一个月里，我一直在和在设计中有明确清晰目标的设计师交流，他们来自Google，Airbnb，Slack, Dropbox等等, 我想窥视他们的内心，看看是什么驱动他们做出决定以及是什么在指引他们的设计，以下是我学到的一些内容。

UXRen

1、从问题开始，而不是答案

 你是否注册了新产品，然后第二天就忘记密码？这已经无数次地发生在我身上。如果我向你求助，你会建议我做什么？

 有些人可能会建议我直接写下密码，轻松，问题解决了。但是安全专家不会推荐写下密码，因为那并不安全。

好的设计师不会直接跳到解决方案，他们会花时间去理解问题。

 那么，好的设计师会怎么做？好的设计师不会直接跳到解决方案。他们会花时间去了解问题。他们提出问题并找出原因、背景和限制：你一般怎么记录你的密码？你总是随身携带手机吗？你有多少密码？

你越了解问题，你越能找到解决问题的切入点。深入理解给你自信，深入理解就是把你的初步想法转化为实际深入的观点。

我询问了Google 智能助理的产品设计师Adriana Olmos关于她解决问题的方法。当她的利益相关者提出需求时，他们经常根据解决方案而不是问题来定位他们的想法。“我试图去了解他们解决问题的理论基础是什么”她说，从那时起，我与他们一起去了解用户最底层的需求，并了解背后的原因，然后来做优化迭代。了解了原因，如何去做就顺理成章了。

了解了问题的来龙去脉，你就可以找到解决问题的方法了。 评论(0) 浏览(2641)

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

身为设计师，你是否遇到过以下情况：

你花费了大量时间来构思与设计，却得到需求方一句“这画面根本没有冲击力！”遇到这种情况我们常会把问题抛向运营同学，但定神反思一下：为什么我们会被带偏？画面如何才能具备强烈的视觉冲击力以说服他人？

什么样的画面，会让你觉得很有冲击力？想必影响因素众多，而今天我们就跟大家聊聊故事性、可读性、空间感这三个维度。

故事性

故事性主要从情绪、氛围和趣味性三个方面来表现。

• 情绪

先从情绪开始聊，你的画面是想表现出积极上进、欢乐还是愤怒？

画面整体的情绪需要依靠主体情绪都深入刻画，情绪能带动用户的视觉感受，帮助用户更好的从图案中获取与主题相关联的信息，从而引起读者的共鸣，最终达到推广的目的。

 

• 氛围

其次，就是氛围的把控。除了画面主体的刻画，氛围的把控至关重要。

氛围把控的好坏，直接影响到画面的统一性，这也是为什么很多同学一碰到复杂构图就逃避的原因。只要我们把握住一点，“一切的氛围只为突出主体！” 掌握这一点，相信很多同学都驾驭复杂的构图！

• 趣味性

与前两者不同，画面的趣味性并非一种技能项，而源于你内心有多有趣！

职业化的人大多都是有职业病的，设计师的职业病应该是对视觉的敏锐度！我做广告那几年，路过地铁站或者公交站台，经常会被好的海报所吸引，也常会驻足研究海报设计者背后的思考。他是如何进行版式编排，如何对画面进行构图，如何做创意推导……如果是我，好的地方我要怎么学，坏的地方我会怎么做！

 

之所举我过去生活的这一例子，其实是想说：每个设计师身上的DNA不一样，感兴趣的事情也各自不同，所做的设计也不一样，这些都取决于你是一个怎样有趣的灵魂！

趣味性在你的画面里，大部分来源于你生活中的积累！设计源于生活，趣味源于有趣的灵魂！

但是，在商业项目中仅仅有故事性还远远不够！商业设计创作中，需要更深挖项目背景，要知道项目所面对的人群、品牌调性、推广目的、投放时间及媒介等。

以这次我们接到的新年运营活动为例，需求面向企业内部，需求方想要体现在春节来临之际对公司内部员工的关怀，目的为增强员工归属感，传达新春关怀。

我们通过对信息的梳理，脑暴得到上图的内容，推导出所需元素，接着绘制草图。

 

Tips：足够完善的草图＝节约时间

这里提一个项目实施中的小Tips：我们在很多项目实践中总结出并反复验证过：草图越详细，后续就越能快速地完成项目，甚至能腾出更多的思考时间！ 绘制中一旦静下心来，你就可以好好享受源源不断的灵感。只要软件不生疏，绘制起来其实是很快！切记勿要边做边想，这样只会徒劳！

 

我们通过对情绪、氛围、趣味性三个维度进行结合，画面以小哥做舞龙状态，周围围绕着祥云、锦鲤、红包、以及顺丰的元素，整个画面氛围营造一种新年的喜庆！让画面自己讲故事！

 

可读性

 

• 构图与板式

为保证画面信息的可读性，可运用版心理论、三分线构图法、黄金分割比例等规则来验证自己在构图上的严谨性，这些规则可有效的规避主体不够突出、重心不稳等常见的版式问题。

01. 版心理论

以常见的矩形版面来说，其版心为四边形，具有四个角。我们可以把角理解成点，而版心就是通过四个点连线建立起来的。改变任何一个点的位置，版心的轮廓都会发生变化。

所以，四个点也直接影响了画面的张力，角越多张力越大，元素覆盖两个点会显得张力不足，四个点又会显得过于饱满。因此我们推荐三个点，最后一个点做弱化处理，整体就会显得透气！

02. 三分线构图

三分线构图被广泛运用，摄影、设计、绘画等艺术创作。指把画面横分三分，每一分中心都可放置主体，这种构图会使得主体和装饰元素更显得紧凑有力。它也是最基础的构图技巧，相信大家经常运用，就不赘述。

03. 黄金分割比例

黄金分割比例是现今公认的美学定律，蕴含丰富的审美价值，是视觉上最舒服的比例，与三分线构图法异曲同工。

• 节奏

画面节奏可以使画面错位布局，营造空间，增强画面的节奏感。

如下图所示，“S型“构图是非常常见的一种构图方式，形式灵活多变，往往S型构图有着明显的层次关系，元素在空间上可以分为前、中、后景；其次，S型构图可以有效的引导读者的阅读顺序，达到视觉引导阅读的作用，从主体作为出发点，保证画面的阅读井井有条。

 

空间感

  

最后就是画面的空间感，但相信设计师在漫长的艺考生涯中，早已学会如何去运用虚实、肌理、色彩去区分主体与装饰元素之间的关系，还没掌握的小伙伴赶紧去温习你的旧课本吧！

 

 结语

 

Anyway, 以上就是有关新春运营活动的设计总结，从案例中我们习得如何通过故事性、可读性和空间感三维来增强画面的冲击力。这一方法也可以应用在项目设计完毕后，通过以上三点内容去验证设计的合理性和有效性。最后来复习下：

• 故事性 - 你的画面能自己讲故事、表达情绪，当然趣味性也必不可少；

• 可读性 - 在保证图文条理清晰、信息层级表达准确的前提下­­­­，对版式、构图以及画面节奏的把控十分必要；

• 空间感 - 增加画面的色彩层次、肌理、光影的表现，这样能更好地表现画面层级间的空间感。

每个设计师都是独立、富有创意又有趣的个体，希望这一分享可以为大家打开一些新的思路！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

 

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

从不同维度对Icon设计进行解析，整理一整套Icon设计的法则

网络上有很多关于Icon设计的文章，一些文章从部分维度切入讲述Icon的设计理念，但大部分缺乏整体性。

所以我尝试把自己的思考方式结合其他人的设计理念整理了一个完整的Icon设计法则，通过简单易懂的描述语言，并且结合设计案例呈现出来，希望能够对大家有所帮助。文章使用的案例只代表个人观点，并不代表相关产品。

本文重点讲述Icon设计思维，关于Icon的具体定义以及具体的制作过程就不再赘述，网络上有很多相关文章都有讲述。

从不同维度对Icon设计进行解析，整理一整套Icon的设计法则。每一个产品中都有不同类型的Icon，产品通过Icon可以快速的向用户传递语意，通过独特的设计语言让用户形成对于产品的认知心智。Icon的重要性就不言而喻了。

ICON的设计法则-菱形设计法则，主要包括语意、层级、设计形式、风格、一致性、范围。而其他的设计思考也是这个设计法则的变体，中心思想没有发生变化。通过对以上设计思考点的聚合，来设计能够传递Icon语意，并且能够清晰展现产品结构和信息层级的Icon系统，通过差异化的设计形式展现产品设计的独特风格，让具有一致性的设计语言传递信息，和用户形成共鸣。

层级

第一层级Icon

第二级别Icon

第三层级Icon

第一层级的Icon一般指首页的井字入口Icon，让用户快速获取入口信息，完成对产品流量的分流，让用户快速完成自己的任务。这种类型的Icon是级别最高的，无论是面积、形式感、视觉冲击力都应该是最突出的，这种高层级的Icon可以简单通过一下三种方法表现，1、拟物化的设计方式增加视觉重心和吸引力。2、通过细节的增加呈现Icon设计的复杂形式感。3、采用冲击力强的色彩对比，抓住用户的关注点。除此之外具体的思考过程，后文也会详细讲述。

下图分别是“自如” “每日优鲜” “大众点评”的首页入口Icon，分别采用了拟物化设计，细节添加，色彩对比的设计方法。

第二级Icon归纳为导航类型的Icon，引导用户操作产品，完成用户的任务，同时传递品牌特色。这种Icon类似真实街道中的指向标。第二层级的Icon不需要做的视觉重点非常重，能够让用户认知到，并且了解Icon传递的信息，在操作行为上产生预期就可以。通常的设计样式是线型Icon或者是面型Icon。

下图分别是“自如” “每日优鲜” “大众点评”的二级Icon系统

第三类Icon是语意型Icon，主要是向用户传递信息，烘托信息氛围，并且引导用户浏览信息。这种类型的Icon视觉相对较轻，且不可点击，具体的设计思考在后续的内容展开。

下图分别是“自如” “每日优鲜” “大众点评”的三级Icon系统

以上三级的划分并不是说Icon只有这几种类型，这样划分是从功能和视觉上进行区分便于设计同学理解，当然在具体的设计过程中也可以对Icon进行更细化的区分，最主要根据具体的需求去定义Icon的层级，然后再采用对应层级的设计语言。

语意    

1）、Icon背后的语意(Icon的特性归纳）

2）、Icon的可识别性(Icon的特点表现)

Icon的重要意义是抓住用户能够通过图像式的语言快速获取产品信息。所以在Icon的设计之前，需要思考Icon背后传递的文字语意，理解语意，构建对于语意的多维拆解（比如沙发是由靠背、两个扶手、四条腿构成，重心要稳，和床有哪些区别等等）。同时还需要思考Icon图形化之后的可识别性，基于对用户认知的了解，归纳Icon设计中需要具体表达的几个关键特点，迎合用户的认知心里。帮助用户快速的获取Icon想要传递的信息，如果不能快速的获取，反而增加了用户获取信息的成本，那就本末倒置，削弱了用户的使用体验。

例：下图是“大众点评”二级Icon设计的语意表现思考方法

设计形式

1）、外形

2）、表达方式

3）、色彩组合

4）、Icon特色

外形是Icon 的基本形态，不同的形态传递不同的视觉感受，构建不同的心智。同时Icon的外形决定了内部元素的设计。

Icon的表达方式主要两种，分别是线型Icon，面型Icon。线型Icon形式抽象、简洁，便于用户识别，用户认知成本较低，缺点是Icon容易极简，造成了似是而非，可识别性降低。面性Icon相对线型Icon视觉重心更突出，便于用户聚焦，设计表现形式会更丰富，缺点是可能会过于复杂，造成信息层级混乱，增加了用户的认知成本。

色彩组合，就是Icon中的色彩语言，在设计Icon的过程中通常包括单色系的Icon和色彩组合系列的Icon。通过不同颜色的组合传递产品的品牌形象和产品特质，在设计Icon的过程中，尤其是导航Icon的过程中不建议使用超过两种颜色的Icon，这样容易使用户视觉疲劳。

Icon特色是Icon在设计过程中的细节，这些细节是体现Icon自身精致的部分，同时也会影响用户对于产品和品牌的认知联系。影响产品的感性认知触达用户内心。

例：下图以“大众点评”中的“拍视频”icon做举例说明

风格

1）、品牌理念

2）、产品特色

3）、视觉特色

品牌理念是是指产品背后的定义和想要传递的价值。通过简介的符号、文字传递给用户的认知、理解、印象、感受。通过塑造品牌理念的塑造，和用户在感性层面形成共鸣。融入品牌基因的Icon系统具有更好的辨识性和认同感。这需要设计师和业务团队一起沟通产品，深入理解业务，总结出关键词语表达品牌，最终和业务团队达成统一共识。

产品特色指产品在同行业中的定位差异，核型竞争力。通过简洁的视觉语言进行表现。通常的产品特色体现在业务范围、用户群体，使用场景，产品功能等。在这四个维度中总结归纳成可落地的具体的表达关键词，进一步具象化。

视觉特色指在竞品分析中，总结得到在视觉层面其他产品中可以借鉴的感性共性和自己产品定位差异性的结合。通过可借鉴的共性传递行业的特点，而差异化的视觉表现可突出自己产品的特色和竞争力。

例：继续以“拍视频”Icon为例子进一步解释说明

一致性

一致性的综合表现在圆角、透明度、线条粗细 、间距、颜色、层级、渐变、特色细节。

Icon的一致性有利于降低用户的认知成本，便于品牌传递，而Icon的非一致性会增加用户的跳出感，降低用户对于产品专业度的认可。通常情况下可以通过以上8个维度进行分析和提炼。前七个维度大家比较好理解。重点解释一下第八个维度“特色细节”，特色细节是设计师通过对于产品和业务的理解主观加入的一些关键性视觉表现的点，增加产品一致性的基因，可能是断线，尖角，原点等等标志性元素。

例：下图通过对“大众点评”Icon做拆解进一步从六个维度说明Icon系统的一致性（并不是说每一个icon的设计必须包含八个维度）

范围

视觉范围和热区范围

随着Sketch的普及，更多的设计师开始采用一倍的设计画布输出设计方案，但在设计的过程中需要注意视觉面积和物理面积，两个Icon的物理尺寸大小是一样的，视觉感性的面积偶尔会变化。所以需要在设计完Icon之后，对Icon进行排列，进行视觉对比，发现视觉的不一致性。

热区范围是代码定义的用户可操作的交互面积，视觉是感知不到的。热区范围的确定有利于开发工程师和设计师达成视觉方案的一致。避免后期由于大家对于方案设计、开发理解的不同，增加后续沟通的成本。通常情况下会出现的问题就是

1、界面开发的还原度低

2、热区范围过小，用户无法点击

3、Icon的热区范围不一致。

总结

在设计的过程中，Icon的样式可以借鉴，但要根据自己的产品做形式上的调整，具体可以通过上述谈到的几个维度作为切入点调整Icon。同时在设计的过程中避免无穷的细化，因为有些细节用户根本不会观察到，这样做只能是设计师的自嗨。设计师容易漏掉的是热区范围的确定，尽管Ios平台和Android平台都有对于Icon范围的定义，但针对产品的icon热区范围调整还是要有设计师自己的想法。这样才能增加Icon设计的思考价值，也更符合产品自身的特色。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里 

 

科技不仅改变生活，而且正在改变着我们的生活习惯！不管哪行哪业，不去了解的科技，就面临着被淘汰的危险！电商作为离互联网最近的行业，或许能从这些高科技里找到一些方向和启发！

 

NO.10 踩不湿的鞋子

Vessi鞋，号称世界上第一个100%防水针织鞋

它看起来跟普通的鞋子无异，

但是它具有超强的防水性能，

100%防水能力

并且360°无死角

小水坑我们不放在眼里

甚至可以

直！接！踩！

Vessi鞋的秘密在于它的针织面料专利，

这个称为 Flash Knit 的面料一共有 3 层，

分为不同的功能面料，

这使得它比简单的防水涂层强得多。

第一层也是最外面一层是弹力编织层，由聚酯纤维和尼龙混纺而成，起到防水、拒水、防风的效果；

第二层是纳米过滤层，能进一步起到防水、吸湿作用，最里面一层是透气内层，帮助脚部排汗。

NO.9 材料界的“变形金刚”

下面这些彩色的小卡片—— Formcard

是由英国设计师PeterMarigold

所研发的一种神奇的修补塑料卡，

它可谓是材料中的百变星君，

想变啥就变啥

将原本硬邦邦的卡片放到热水中，

就会变软，

然后就可以捏成各种形状啦！

比如~

手机支架

高级一点的车载支架也是可以滴~

修补雨伞，哪里坏了补哪里

so easy~

虽然看起来软，

但是硬度堪比尼龙。

它的材料是一种

基于生物塑料而

完全无毒的淀粉材料

表面着色的颜料也是安全的。

值得一提的是——

这种修补塑料可以重复使用无数次，

只需要用热水泡一下，就能重新使用。

NO.8 一种“分裂”的材料

杜邦™ Tyvek® 特卫强®

有这样一种材料

防水的同时还透气

是一种会呼吸的材料

硬的跟纸一样

软的像布一样

明明脆弱的跟纸一样，

2个200斤的胖子都未必能把它撕破！

还能用于各种酷炫的手工艺品

既可以当作女生喜欢的包包

还可以变身为时尚的服饰！

杜邦™ Tyvek® 特卫强®

特别的材料特性让它成为设计师们的宠儿

各种创意设计、产品层出不穷

NO.7能修复的黑科技抹布

XG防水珠划痕修复布

这一款黑科技“魔术布”

只需3s即可快速修复车划痕

这块“魔术布”采用

聚酯纤维以及“氧化铈”成分打造。

氧化铈具有特有的切削力，

再加上聚酯纤维布具有摩擦力，

车漆表面的划痕可以快速被修复。

不仅如此，

修复的同时“魔术布”

中含有的乳化蜡成分，

可迅速附着保护漆面，

相当于再给车车做一个美容~

一块“魔术布”可使用15次左右

无论新车、旧车、深色车、亮光漆均可适用

绿色制剂成分还可以保护你的双手

NO.6 擅长堵的材料

FLEX TAPE 防水胶

水流不停

这胶带一拍就堵住了

网上称之为世界最强防水胶——

FLEX TAPE

家里水桶破了个大洞？

一拍，搞定！

家里水管爆了？

一拍，搞定！

NO.5 传说中最变态的黑科技涂料

LINE-X 涂料

据说任何东西涂上他

都刀枪不入坚不可摧，比如

西瓜涂上之后能抵抗锤子的猛击

鸡蛋涂上之后能弹起来了

汽车用钥匙刮都没任何损伤了

在活水表面涂上一层涂料

你都可以在水面

走起魔鬼的步伐

FLEX TAPE 材料

已经应用在各个领域，

尤其是军事、汽车领域

比如美国五角大楼

海军陆战队的悍马

NO.4 具有“生命力”的水泥

生物混凝土Bio-concerte

它依托于芽孢杆菌的神奇生命力

这种细菌产生的孢子

能在没有食物和氧气的情况下

存活200年之久

它将作为细菌营养来源的乳酸钙

混合搅拌成混凝土

若混凝土开裂

雨水渗透进去

休眠中的细菌通过代谢

把钙和碳酸离子结合

形成石灰石，逐渐弥合裂缝

建筑物的使用寿命

有望大大延长

实在是太神奇啦！

NO.3 能屈能伸，时软时硬的材料

P4U

国外有一种材料叫 D3O

在常规状态下是柔软的

却能防住突然的受力撞击

非常安全

鸡蛋摔不碎，防撞防震能力一流

目前已经有上百种产品用到了D3O这种材料

从手机壳到护膝再到芭蕾舞鞋

再也不怕手机碎屏了

中国市场对D3O也有强烈的需求

但 是

前期中国企业从国外采购时遇到不少阻力

难道国内就不能开发出类似的材料吗？

我们就不能做出“国产版的D3O吗”？？

可以的！

它就是前面提到的

P4U

NO.2 能吃的塑料袋

这款塑料袋非常环保

由红薯、玉米、马铃薯与植物油

等12种可食用原料做成

100%有机食品

就连印刷字的油墨都是可以吃的

不仅如此

它的韧性和耐用性

不输普通塑料袋

扛得住重物，挨得过焚烧

更重要的是

它具有生物可降解性

在野外它180天就可自然降解

埋进土里45天，扔进水中1天

沸水中15秒就可以完全溶解

一个塑料袋虽小，却足以改变世界啊

NO.1 点沙成土，造福人类

可以让沙漠变成土壤的黏合剂

重庆交通大学力学教授

易志坚带领研究团队

经过7年的反复试验

研发出一种

可以让沙漠变成土壤的黏合剂

这是一种从植物中提取的

植物纤维黏合剂

它能赋予沙粒一种约束

使得沙粒像土壤一样能从任何方向结合

具有自修复和自调节的特性

将沙子与黏合剂混合后

把水倒进沙坑里再也不会轻易流失了

这项伟大的发明可以让沙漠变良田

中国科研团队已经在内蒙古阿拉善盟的

25亩沙漠里进行了实地实验，并取得成功

未来，我们将会看到

越来越多的沙漠逐渐变成绿洲

沙漠不再是寸草不生

反而可以种植瓜果蔬菜

造福人类的发明，大赞！

 

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

 

一个简单的按钮需要经历无数次推敲，才能整合为设计语言。今天主讲设计语言中的基础部分，组件部分的其中一个部分-按钮。设计语言从结构上分为：基础部分、规则规范部分和业务部分，后面我也会把其它部分补全。

基础部分的画布大小是250000×56000，共47个组件部分；规格规范部分就很庞大了（工业设计、交互设计、平面设计、设计心理学等）；业务部分是按系列来分的，有主次之分，目前只分了两个系列（N和S），N系列对应基础组块，S系列对应嵌套定制组块。我把一个系列的主系列称为主版，把子系列称为子版。N系列的一个子版大概有50个页面，每个页面又包含三种样式，每个系列中大概有20个子系列。工程量很大，大致算了一下，要做完两个大系列（N和S）需要做：50（页面）x3（样式）x20（系列数）x2（大系列类别）=6000（页面）。

以上简单描述的这些工作，目前都是我一个人在做，这东西成型以后，做一套网站（从前期到上线），最快只需要15分钟。而我做它的目的也很简单，就是希望帮助企业竖立品牌形象，并用专业知识解决他们所面临的问题，质量高价格低。我的信仰是帮助企业或个人实现社会价值，赋予企业或个人一定的能力，让他们为这个社会做一定的贡献，履行一定的社会责任。先利他再利己，集体利益和集体主义优先。从成本评估到定价，我是不赚钱，但只要我能活着，就一定履行我的社会责任。

说的有点多了，言归正传，这章其实不难，但有些基础知识需要细心讲解，对于有些设计师而言废话较多，但对于新手而言却有可学之处，多多体谅一下吧。

目录

1.网格基数的设置

2.按钮的基础规范

3.按钮的字符限制

4.按钮的交互状态

1.网格基数的设置

这里的网格不是平面设计中的网格系统，是包含在绘图工具中的网格功能，虽然它俩在本质上是相同的，但现在先不要给它俩做过多的区分。用绘图工具绘制网格能帮助我们约束模块，使模块的比例存在一定的关系。例如我就拿尺寸大小为137×31的按钮A，和尺寸大小为128×32的按钮B举例，尺寸大小为137×31的按钮A是不规范的，宽137和高31是不存在比例关系的。而尺寸大小为128×32的按钮B就是规范的，宽128和高32不仅是倍数关系（128/32=4倍），而且两个数都可以整除我们在全局中设的基数4（32/4=8，128/4=32，这里的4为基数）。

当我们理解了按钮的比例关系后，我们就要在绘图工具中（AI、Ps、Sketch、Affinity Designer）找到我们的网格功能，设一个数为基准，定其为基数，然后按照这个基数来进行按钮的绘制，按钮就相对是比较规范的。因为设置完一个基数后，只要你在网格上画按钮，都是存在一定的比例关系的。那如何用绘图工具设置网格基数呢，在Ps绘图工具中找到：【编辑】-【首选项】-【参考线、网格和切片】- 弹出首选项对话框 -【网格 – 网格线间隔 / 子网格】- 网格线间隔设为【4】- 子网格设为【1】；

在Affinity Designer矢量工具中找到：【视图】-【网格和轴管理器】- 弹出网格和吸附轴对话框 -【基本】- 间距设为【4】- 分割设为【1】。这里为什么要把网格基数设置为【4】呢。这是谷歌Material Design绘制小组件的规范，而模块之间定义的基数则为【8】，这里的度量单位是DP，平时绘制网页的话单位用px像素就可以。

2.按钮的基础规范

当我们会运用绘图工具中的网格功能，设置基数来绘制按钮，用熟练了就会相当讲究，每一个细小的间距都应该符合倍数关系，不仅物理位置上能得到统一，视觉上也能满足一定的美感，例如下图所示。

当我们理解了如何用网格功能绘制一个按钮后，接下来就可以理解按钮的边角的曲率设置了。那我把按钮的边角分为三种样式：直角、曲率圆角和圆角。直角就是边角呈90度的角，曲率圆角和圆角的差别在于，曲率圆角的角弧度没有那么大，而圆角的角弧度就是一半个圆。我将按钮的曲率按照不同的样式分布展示了出来，如下图所示。

理解了按钮边角的三种样式，要怎么设置他们呢。直角设置无曲率/90度直角。圆角就设置为50%的曲率，刚好就是半个圆。而曲率圆角就稍微有点麻烦，因为曲率圆角是要根据按钮的大小做相对的变化的。按钮的尺寸变大曲率就应该也随之变大，按钮尺寸越大差异越明显。另外曲率弧度的值也应该有一定的倍数关系或基数关系，例如：4/8/16, 4/6/8，4/8/12，都是可取的。

理解了如何设置网格基数，如何设置圆角的曲率，就要讲到按钮的常用尺寸了，要注意的是这个常用尺寸是基于Web端的，道理是相同的，就看设计师如何在移动端上进行设置了。常用的按钮尺寸有：24px、32px、40px、48px，超出48px的按钮都属于特殊按钮，需要进行单独设置的。

这里的尺寸不是死的，设计师可以根据自己的理解进行尺寸的设置。而采用这几个尺寸（24px、32px、40px、48px）的目的是更好的统一并规范按钮，因为24px、32px、40px、48px都是4的倍数，数与数之间也都是±8的关系，另外在绘制按钮时尺寸也可以平分，留出按钮上下均等的距离，另外这几个数值从Web端的体验上来看，比例也是相对更合适的，所以采用这几个数较为规范一些。

3.按钮的字符限制

一个按钮包含和“无图标”和“有图标”两种形式，无图标比较好处理，直接把相应文本放在按钮中水平、垂直居中就可以了，然后再算清文本与边框之间的距离就可以了。

那设计有图标的按钮时，就要考虑把图标的内边距算出来，并与图标到按钮外边距的距离算出来。

当我们掌握的以上几种绘制按钮的方法，就可以绘制出一整套符合规范的按钮组件。

英文也一样，英文与中文的差别在于细微的尺寸差异。英文字体结构要比中文字体结构看上去更小一些，英文的字符长度也要比中文长很多。但问题不大，只要把控好文本/图标和按钮边角的距离，按照基数递增，就不会有什么问题。

4.按钮的交互状态

一个按钮的交互状态有四种，分布是：无状态、hover（触碰）、点击后、禁止。采用的配色可以递增（由浅到深），也可以递减（由深到浅）。按钮交互状态的配色深浅也是根据整体页面有关的。如果整体的调性偏深，配色可以递减（由深到浅），如果整体的调性偏浅，配色可以递增（由浅到深）。

而颜色按钮的交互状态是根据配色的色阶决定的，同理配色递增（由浅到深），配色递减（由深到浅）。

另外附上一张彩色按钮状态效果图，配色为明亮柔和。

这些按钮的绘制看似简单的不得了，其实都是些高精度的工作，差一个像素点都不可以，当然更需要具备一定的毅力与耐心。我觉得做设计应该追求，重视体验和功能，让形式追随内容，而不是内容追随形式，就这样吧。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在我们的设计工作当中最不可缺乏的就是创意了，那这种创意是从何而来呢？当我们拿到一个项目时最熟悉不过的流程的就是小组讨论，那小组讨论中占据大部分的就是“头脑风暴”了，我们先来系统介绍一下头脑风暴。 

【一】什么是头脑风暴法？

头脑风暴法(Brain storming)， 该方法主要由价值工程工作小组人员在正常融洽和不受任何限制的气氛中以会议形式进行讨论、座谈，打破常规，积极思考，畅所欲言，充分发表看法。它最早是精神病理学上的用语，指精神病患者的精神错乱状态而言的，如今转而为无限制的自由联想和讨论，其目的在于产生新观念或激发创新设想。 

 

【二】头脑风暴法的组织形式

（1）设主持人一名，主持人只主持会议

（2）设置记录员1-2名，要求认真将与会者每一设想不论好坏都完整记录下来

（3）小组人数一般为6-10人

（4）最好由不同专业或不同岗位者组成

（5）时间一般为20-60分钟；（发散/收敛/整理3回合）

主持人和主持的注意事项：

（1）提前了解会议主题及可能的引言内容

（2）控制好自己主持人的气场

（3）控制好时间

（4）照顾好每一位成员；让每个人都能发言

（5）引导会议流畅展开

（6）保持团队积极参与气氛

（7）适度延伸发展发言者的想法

（8）随机应变   

【三】头脑风暴法遵循的主要原则

       （1）自由奔放思考

         

       （2）不批判

         

       （3）以量求质

         

       （4）搭便车，想法无专利

        

焦点时刻： 

      蓝蓝设计组织部分小组成员以“如何成为一家很牛的UI设计公司？”为主题进行了一次头脑风暴活动。我们将过程做了一下梳理。 

   （1）主持人引言之后，与会者每个人进行了积极地思考并将想法写在便利贴上

        

   （2）每人根据自己的想法畅所欲言，并延伸其他人的想法。

   （3）将便利贴适度的分类整理。

        

   （4）最后我们整理出来了结果（wow！/有了更好/基础的）     

     

             

总结： 

脑力激荡并不是为了提出主意让他人去评估和选择。通常在最后阶段，本组成员会自己评估这些主意并从中挑选出解决问题的方法贯彻整个解决方案的每一步都必须对小组成员透明，并有责任分配给每一人以便他们在其中担任重要的角色。在项目还未明朗时，必须有一个共同的决策过程来推进协作努力的成果并对任务进行重新分配。在重要转折点上，需要有评判标准来决定小组讨论是否朝着最终的答案行进。在整个过程中需要不断的鼓励，以便让参与者保持他们的热情。

 通过这个过程，员工的亲身参与，对“很棒的UI设计公司”的定义，再落实行动，向着WOW的方面努力！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

什么是阻力？

用户使用App时需要穿越层层页面，在穿越这些页面时需要消耗时间和精力，称之为阻力。

首先探讨一下品类方面的阻力。

如图，这是几个电商App界面，一眼望过去并不知道哪个页面是哪家电商，其实这个并不重要。如果你到一个平台购物，往往不是因为线上产品用户体验不一样，而是因为卖的商品不一样，或者商品的价格亦或配送速度不一样。所以这里它们长的一样我觉得没有太大问题，甚至我认为他们之间雷同是一件好事，用户省去了切换的成本，尤其是新平台跟老平台长得像都是没什么问题的，这样用户切换新平台阻力就小了很多。

但是当我们需要定义一个新品类时，这个思路就会不一样。

定义新品类

举个例子，国际化品牌Airbnb，在2014年的改版中做了很大的调整，这次改版后发现，要找房子下单，搜索浏览和操作效率并不是很高，但是他们还是做了这种低效高颜值的选择。

对大多数人来说，私人房屋短租给其他人的这种服务是个新产品，是高端还是低端用户其实没有概念。所以在2014年Airbnb重新推广的时候，他的设计理念是各位房客先别管这个产品是什么样的模式，先说这个事情是不是看起来很酷。是不是酷这件事对于一个新产品是重要的，如果我用过一个酷的产品，分享给朋友。对方往往也会因为我分享的产品酷而觉得我这个人很酷。有些实用性还不错但是品牌调性没那么高的产品，用户使用完后会觉得“把这个产品分享给别人，并不会给我加分”而止步分享。鉴于此，我认为Airbnb高颜值虽然一定程度上牺牲了效率，但是拔高了品牌调性，也就提高了产品的推荐值，是一个正确的选择。

那么当我们需要重新定义一个已有品类时，我们的思路是什么呢？

重新定义品类

这是我们2016年发版的首页设计，自如和跟之前的租房平台不太一样，所以我们的首页设计要重新定义一个品类。以前，尤其是我们80后对于租房会有什么样的感受都是有一些认知的，比如说黑中介…其实大家都有一些印象，被坑过的80后不在少数。自如出现的时候可能就需要重新整理大家对于这个品类的认知。所以我们在设计首页的时候，先用一个高颜值大图展现一下房子是什么样子（因为我们的房子确实颜值很高品质不错），搜索按纽也不是很大。所传达的思路是我们希望用户在找房子之前对我们的平台有些认知，或者说对租房这个品类，打破固有的刻板印象，有重新的认知。我把这种重新定义已有品类的设计方法定义为“我们不一样”。

在今年，自如的影响力大了很多，在这个背景下我们进行了新一轮的改版。虽然从用户的角度讲可能进APP第一件事是要找房子，但是从企业的角度，企业有很多想要传达给用户的信息，这个页面也是让用户知晓其他业务的入口（自如给大多数人的印象是一个租房平台，但是我们也有像保洁，搬家这类的服务）这些入口也许用户当时不会点击，可是当他需要用保洁，或者搬家的时候就会想到好像自如有这么一个业务，之后他会去自如的首页找。所以多条业务线的并列呈现，也有类似广告曝光的作用。

我用这张图来代替我们的原型图，我们要展现多条用户线的时候很依赖于这个界面上的多个按纽，当时就想能不能顺着这个思路在尽可能的情况下做的好看一点。我们之所以觉得这个界面给你的感觉没那么好，是因为这个界面信息量太大了，还有色彩的冲撞过猛了。 

我觉得色彩的间隙太小了，应该加大，所以加了一些白框，让这些颜色之间离的更远，颜色间的冲撞也就比较小。

然后再看这个颜色本身，我们是不是可以选一些相对共性的颜色，比如把标准的红绿蓝改成红，暖绿，和偏绿的蓝（暖蓝），然后把选中的颜色找他的扩展色，用扩展色画出一些按纽。

这就是我们后来首页的样子。

低频应用的阻力设计

作为一个低频使用的App，跟高频使用的App阻力设计思路最重要的不同点是什么呢？我从学习成本这点来切入。

学习成本

微信的聊天记录删除功能，有一点学习成本。

用户在使用中偶尔向左滑发现了可以删除聊天记录，通过偶尔的触发，用户学会了这样删除聊天记录。通过后期每天不断地使用强化了对这个功能点的记忆。

但是我们的低频App似乎没有这个机会，由于使用次数比较少，有些功能隐藏起来的话用户大概率永远都不会去用。设计时不但要把点赞的按纽放出来，而且点赞的时候还要告诉用户，点赞后飘在右上角。

告诉用户收藏之后，收藏列表可以点击右上角这个按钮查看。我们不但要把所有的功能摆出来，而且还要告诉用户这个功能下一步怎么走。因为他如果这次没学会，以后可能也不会用这个App了，这点跟高频的产品不一样。

点击数据

我们设计首页的时候对于点击数据会有一个预期和目标，但是往往数据反馈会跟设计初衷多少有些不相符。大家可以猜一下哪是点击率最高的…在这里我只能告诉大家一个大概的排名。我们当初希望是租房的点击高一些，因为用户点击后可以了解我们有多少个租房产品，所以我们把它在视觉上设计的重了一些。但是其实搜索是排在他前面的，用户对于大面积的区域像banner这类东西是有免疫力的，所以不管做的多花哨其实用户会习惯性的忽略掉，也就是视觉中心和实际的交互中心不见得一样。合租在租房的前面，整租都可以在前面，看来用户还是比较仔细的看了我们的界面，而且可以断定大家对于合租是什么东西了解的很清晰。

可以看到，“租房”这个按纽我们刚开始设计的时候，感觉应该是高的，因为这个是总集，我们在后期的访问中发现用户认为这个是表示分类，所以设计的虽然明显，但是用户仍然认为这个不可点。

减少阻力

减少阻力，需要跟用户的预期相符。

租房按纽怎么做交互才能让用户感到顺畅？租房的按纽包括右边的四种，其实是个1.5级（介于一级页面和二级页面之间）的界面，所以点击左侧的租房，用户会进入“租房”页面。而右边的这四个Button应该还在，只是这四个按纽变成放大精细版。包括租房Button的底图，也是放大放在页面最上面，这跟用户的预期才比较一致。

从首页到列表，到详情再到下单及更深层的页面，页面的ICON和精细程度和用力程度都不一样，层级越深视觉冲击越轻。

如图，最右侧预约那一列，假设设计师有足够精力和时间，是否可以把最右侧的页面做的视觉更丰富，甚至跟首页一样？然而我们现在的规范里面仍然不允许做的更花哨，原因是我们认为在前半段的时候，用户需要一些阻力来提升注意力，从首页先认知这个租房APP跟他平时认知的不一样，接下来有一些信息的输入比如图片，再往后，如果一旦点约看或者是点签约，这时他的决策做好了，产品要做的事就是一步步往以最快的速度，完成这个事情，不要让他有任何的犹豫，不要让他分心，任何的分心都有一定的概率让这个流程中止甚至是终止。

如图，我把整个流程的信息阻力画了一个曲线，首页阻力是最大的，越往后越小，实质性的信息越多。决策前需要让用户提升注意力，所以信息量要大，表达要丰富。一旦决策后，信息的传达以最简洁的排他形式存在，让用户路径尽可能的缩短也让信息阻力尽可能的变小。

以上就是是我对信息阻力设计的整理，希望大家能够有所收获。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。