蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一次作品展示，想要视觉效果更高级，需要通过各种细节综合打磨。那么在今天推荐的这份作品中，我认为打磨比较好的细节以及我们可以从学习的主要有以下几点：

1. 高级投影
2. 投影的延展运用
3. 留白艺术
4. 合适的展示角度
5. 强设计感配图

在我近期帮星友看的作品集中，发现很多人的作品本来还不错的，结果被糟糕的展示给减分了，很是可惜。我给不少人提的建议之一是先提升自己的审美，但他们遇到的问题是不知道看啥，判断不了哪些才是好的作品，以及怎么用到自己作品中去。这些问题不知你是否也有遇到？如果有同样的困扰，今天的文章一定要看完了，因为全是干货。

所以我在星球中利用审美打卡，每天帮大家搜集一些比较好的展示方式作为参考，同时提升审美，一举两得。这组Behance高级作品就是在打卡中给大家做的分享。接下来，我将逐个分析这几个细节部分，方便用到咱们自己的作品集中。

1、高级投影  

投影的本质就是给画面打造空间感，并突出界面内容，对于这一点我后面也会做一些延展，可能会有一些观点你没听过的。在看作品集的过程中我有发现很多人不注意投影的运用，但它其实是非常重要的作品加分手段。

1）投影要干净轻盈

投影在取色的时候，可以选择与背景颜色相近的颜色，然后略微加深一些，不要用纯黑色来做投影，会显脏。投影的颜色永远都需要结合环境的颜色，就想象成界面中有一个太阳光打过来，会反射周围的环境色，所以带有环境色的投影会显得更自然。

比如下面这个界面展示就是把背景色和投影颜色调整为品牌橙色的色相，只是把饱和度降低到了很浅的程度，看起来就很舒服。

再比如我之前做的一个banner，右边的卡片堆叠的效果，叠起来的投影层就是用到了蓝色的投影，看起来就会显得非常干净。

另外，要注意投影的距离不要太小显得不自然，颜色太深会显脏。

2）投影要针对特定的颜色进行微调

使用不同的投影透明度取决于产生投影物体的颜色。对于较暗的物体，投影需要做得更强，而对于较亮的物体，投影应该是更浅一些。

如果不注意这一点的话，假设两个投影都具有相同的不透明度，那么较亮物体的投影会在较暗物体的投影旁边看起来更暗。

比如下面的按钮投影透明度，投影透明度都是50%透明度时，白色按钮看起来会比蓝色的更深，可能要降低到30%左右才显得比较一致。

3）投影要符合现实规律

高级投影应该要结合现实规律，做到近实远虚。

上面这张图的投影就是有些问题的，更远的投影反而显得更深，其实应该要改的更浅一些才好。

做到这一点有2个小技巧：

• 1）如果在PS中设置投影的话，可以通过调整PS的投影等高线。

如果是在sketch和figma中做投影的话，也可以叠加多层投影来做，大家可以尝试下。

• 2）在做展示的时候，弥散的范围建议在6倍左右会比较舒服，当然这个也更要根据你选的投影颜色和透明度综合来调整。

2、投影延展  

前面提到，投影在做展示的时候，其作用就是打造空间感，围绕这一点我们也可以做些延展。

1）增加简单图形

在作品下面增加简单图形，既不干扰作品，又能通过穿插增加空间感。

2）增加插画元素

用一些品牌插画，元素，甚至图标给作品增加穿插，增加空间感。

3）增加3D元素

给作品增加简单3D元素，比如球、三角之类的元素。

来自Behance，审美打卡

我曾经做的界面包装

4）改变材质

把界面做成毛玻璃效果，再做穿插，进一步增强空间感

来自behance，星球审美打卡

5）深色界面

有人问，如果界面本身就是深色的怎么办？其实也是基于空间感的原理，给画面增加一些元素，与背景拉开关系就好。比如下面这样

来自behance，星球审美打卡

来自dribbble，星球审美打卡

来自dribbble，星球审美打卡

3、大量留白  

想要提升作品的逼格，使用大量的留白是非常好的技巧。但在给星友沟通作品集的时候，得到一个奇怪的说法，说是要把作品限定在多少页以内才更好。

我觉得这有的本末倒置了，作品要多放精华内容没错，但不是以页数来体现的，展示的时候还是以提升逼格为主，不要影响作品本身的视觉效果。每一页PPT，重点展示一件作品就足够了，物以稀为贵，像一些大牌奢侈品就特别喜欢大留白。

Apple手机官网截图

香奈儿官网截图

举一个反例，下面是某位星友的作品，其实这样的网页展示，一个页面单独整理在一页是最好的。当然前提是每一页的设计差别较大，如果太类似的话，放一页就够了。如果网页比较长的话，可以按分屏来展示。

星友作品截图

就像开头的作品那样调整下，逼格立马就能上来。

4、展示角度  

作品在做展示的时候，不论是自己设计还是用样机，有一个标准就是一定不能让人看不清细节，不能做了角度变化之后丢失细节。

像开头的作品展示，都是用了一些相对没那么夸张的角度，这样做的一个好处是能看到细节，即使是想带一些角度，增强设计感的话，也一定要以能看到细节为标准。比如像下面这样就可以了。

我也给大家举一些反例，比如像下面这位同学的展示角度就比较奇怪，其实像这种内容较多的界面，摆正就可以了，不然细节全都看不清。

星友作品截图

5、高质量配图  

一个作品中的配图其实非常关键，甚至配图能直接把你糟糕的设计拯救过来。但遗憾的时候，很多人在展示的过程中不大重视自己的配图，我在跟星友交流过程中会发现大家对于配图存在一个误区，就是觉得配图一定要是真实的，有些人甚至觉得作品里呈现的一定是要去线上截图。

我想说，如果这样做会把你坑得很惨。原因有以下2点：

1. 线上的图存在非常多不可控因素，所带来的视觉效果不一定代表你真实的视觉设计能力
2. 审美是设计师的核心能力，如果你放一堆审美不在线的图，那别人有理由怀疑你的审美是有问题的。

既然配图这种重要，那怎么做好配图这个事呢？有几个小技巧：

1）符合调性

配图要符合产品的调性，像开头的作品中，黑白干净是它的关键调性，那么选的图也是这个范的。

2）真实可信

尽量让配图看起来真实，别偷懒用重复的图，包括图中用到的数据也尽量真实。像下面这位星友的作品展示就有内容重复的问题，稍微花点时间就可以优化好了。

星友作品截图

3）加强设计感

在放界面展示图的时候，界面中放的图尽量多一些设计感，体现你的审美。

关于高质量配图我之前也有专门写文章《如何选到设计感强的配图，我总结了这7个实用方法》，文章中也分享了很多我自己收藏的高质量配图，大家有需要的也可以去阅读下载。

总结  

最后总结下，今天主要是从作品展示的角度，给大家介绍了如何利用好投影、投影原理延展、留白、角度、配图等方面给自己的作品展示加分。

这些技巧操作起来很简单，但又非常有效，具备很强的实用性。彩云希望大家把这些常用技巧真正用到自己的作品集中去，提升逼格，找到自己理想的工作！

原文地址：彩云译设计（公众号）

作者：彩云Sky

转载请注明：学UI网》Behance首页推荐的作品集为什么这么高级？我们能从中学到什么？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

首先，探讨这个问题，意义何在？

笔者认为，有两点意义。

首先，作为用户，我们可以用到好用的产品；其次，作为从业者，我们可以找到学习的榜样。

明确了意义，我们再回到问题本身：怎样算是品质？如何判断？

个人认为，和周到一样，是否拥有高品质，也是用户的主观感受说了算。

在涉及体验细节的小需求上，避免所有的不周到，就是周到。

这是关于周到与否的判断，相对比较容易。但是关于品质与否的判断，笔者没有找到这么简单的判断逻辑。所以我们尝试换一种方法。

豆瓣的高分电影，比如《千与千寻》、《美丽人生》和《肖申克的救赎》，它们肯定存在不同之处，但同时也有一些共同特点（主人公都面临极大困境，但都心怀希望和目标，通过各种努力走出了困境）。

高分电影如此，高品质的交互设计，也是如此。

这一大段，就尝试去探索这些共同的特点，以便去发现、或者去验证，那些在交互设计方面拥有高品质的产品。

1 看着简单

之前在《以不变应万变：浅析信息架构》这篇中提过，只有简单，才能让用户马上找到掌控感、进而感觉良好。

高品质的交互设计，一定是要让用户感觉良好的，所以看起来一定是简单的。

2 用着顺

个人观点，互联网产品有两类较为特殊的初级用户，一类是零经验的三岁小孩，一类是智能手机之前没怎么接触过互联网的老人。

一般情况下，大家习惯把用户分成三类：初级用户、中级用户和高级用户。其中初级用户的使用经验最少。

高品质的交互设计，会让初级用户很容易上手。稍加练习之后，初级用户也会像中高级用户一样，用起来很顺。

iPhone 的交互设计是很优秀的，所以三岁小孩也能很快上手操作。

小孩的心智比较纯粹，没有受到社会大染缸的污染。用手机时他们会根据自己有限的生活经验去积极尝试操作。

老人和小孩则有点相反，部分老人可能思维比较固化，好奇心、积极性等方面都不如小孩，所以老人在用手机时可能会有点畏手畏脚。

微信作为一款交互设计十分优秀的产品，如今拥有智能手机的老人基本都在用。有的可能是自己学会的，有的可能是子女教会的。整体而言，笔者观察周围的老人，用微信用的还比较顺畅。

02 交互设计：如何做到品质？

个人觉得，交互设计的高品质，是感性、理性和实践的完美融合。

曾经有人问巴菲特的合伙人查理·芒格，如果只能用一个词儿来形容你的成功，会是什么？芒格回答说，是“理性”。

老子曾经说过：“人生于世，有情有智。有情，故人伦谐和而相温相暖；有智，故明理通达而理事不乱。情者，智之附也；智者，情之主也。以情统智，则人昏庸而事颠倒；以智统情，则人聪慧而事合度”。

简·奥斯汀的小说《理智与情感》，虽然写的是小镇的恋爱与琐事，但背后折射出来的洞见——“要有真情感，更要用理智控制情感”，与老子的观点也是不谋而合。

做人做事，需要理性和感性。做交互设计，也是如此。

芒格、老子和简·奥斯汀，在强调做事业和做人方面，都是理性在先、感性在后。

做交互设计，就是在做用户体验，核心是用户的主观感受。所以笔者认为，此时是感性在先、理性在后。

交互设计里的感性，有两层意思。

第一层是微观层面，主要是性格上的敏锐度，比如我们平常听到的性格敏感、心思细腻等；第二层是宏观层面，也就是品位。

量变引起质变。微观上积累的多，才会带来品位的提升。

交互设计里的理性，其标志是做出正确的决策。

那怎样判断决策是否正确？

个人观点，有两块“试金石”可担此重任。

第一块“试金石”是来自最优竞品的检验，第二块“试金石”是自我检验。

最优竞品是一块很好的“试金石”。如果能和最优竞品一决高下或者“三足鼎立”，说明品质很不错；如果和最优竞品差距太大，则说明没有达到高品质。

然而现状则是，市面上的最优竞品，也就是交互设计方面达到高品质的产品，为数不多。这就意味着很多领域的产品是不存在最优竞品的，此其一。

其二，与其被动的等待最优竞品的检验，不如主动成为最优竞品。要做到这一点，则需要第二块“试金石”，也即优秀的自我检验能力。这个优秀的自我检验能力，其实也基本等同于做出高品质交互设计的能力。

实践就是一个反复试错、反复打磨、反复验证感性和理性的过程。

1 培养语感

大家都学过英语，所以应该也都听说过“语感”这个词儿。

英语语感好的人，会有这个优势：较少依赖语法，同时较少犯语法错误。

就像游泳一样，熟练了以后，身体已经对动作形成很深记忆，完成动作就几乎不依赖大脑思考，同时也不会犯错。

在语文里，“语感”被提起的次数就少了很多。大家每天都在用中文，甚至每天都在听说读写。对中文都很熟练，好像大家的语感都差不多。

但实际上，和英语一样，语文方面的语感，也存在一定差距。看看百度百科对“语感”的解释就知道了。

语感，是比较直接、迅速地感悟语言文字的能力，是语文水平的重要组成部分。它是对语言文字分析、理解、体会、吸收全过程的高度浓缩。语感是一种经验色彩很浓的能力，其中牵涉到学习经验、生活经验、心理经验、情感经验，包含着理解能力、判断能力、联想能力等诸多因素。

这个解释包含了四个经验、三个能力。每个经验、每个能力的获得都需要一定量的练习。不同的人，底子不同，练习的量存在不同，所以语文方面的语感必然存在不同。

像语感里提到的心理经验、情感经验，在不同的语言里是相通的，且和交互设计里的主观感受存在相通之处。所以，在笔者看来，一定程度上，作为母语的语文，其语感是英语语感的基础，也是交互设计语感的基础。

啥是交互设计的语感？

和语文的语感类似，交互设计的语感，就是比较直接、迅速地感知交互设计优劣的能力，是交互设计水平的重要组成部分。

这个语感，和乔布斯口中“科技和人文的十字路口”中的“人文”，以及媒体和从业人员口中的“人文素养”，也有相通和相似之处。

苹果的设备之所以在交互设计方面拥有高品质，和乔布斯早年深受嬉皮士文化、民谣和摇滚歌手 Bob Dylan、禅文化、日式美学、字体设计等人文艺术方面的熏陶密切相关。

上世纪 90 年代，张小龙在开发 Foxmail 时，想必作为程序员的他并没有太多交互设计方面的经验，彼时这方面的理论和著作也少，张小龙更多是凭感觉在做。但是 Foxmail 就做到了交互设计方面的高品质并且产品广受欢迎，想必张小龙的语感也是极佳。而据网络资料显示，张小龙本人喜欢阅读、电影和 Michael Jackson 的音乐，也有比较深厚的人文素养。

所以，在笔者看来，交互设计语感的内核，或者广义的交互设计语感，就是语文的语感，或者更进一步，是人文和艺术的语感。

狭义的交互设计语感，则是直接、迅速感知交互设计优劣的能力。

冰冻三尺，非一日之寒。一个广义语感，一个狭义语感，加起来基本等同于先天基因和人生经验之和。

听起来有点定型的感觉。那这俩语感，还能培养吗？当然可以。咋培养？

个人观点，广义的语感和狭义的语感需要同时培养。广义的语感是内核。正所谓水涨船高，这个内核越好，狭义的语感也会越好。

先说广义的语感，即人文和艺术方面的素养。个人认为，主要受性格和练习影响。性格则主要受遗传基因和童年经历影响。

天生内向的人，通常内心会更加细腻。这种细腻，对于日后建立丰富的精神世界和情感世界，是一种优势。

所谓祸兮，福之所依。有些人的优势，则是建立在童年不愉快的经历上。

比如美剧《千谎百计》里测谎公司的莉亚，童年时期暴力的父亲经常殴打她，使她学会了迅速判断别人的心情。莉亚没有受过任何专业训练，但是童年不幸的遭遇使她在识别微表情方面异常敏锐，最终被莱特曼博士力邀加入了团队。

性格有优势的话，自然是加分项。没有优势的话，也可以通过后天的练习来弥补。

这个后天的练习，在笔者看来，非常重要的一点，是来自书影音的熏陶。

简单说说书影音。

首先，一定要看一些文学性强的作品，感受“思无邪”之美。因为这些是人类内心深处共同的精神家园。个人的理解，文学性强，是指满含人间烟火味、但无半点名利心的作品，比如《诗经》、《草房子》、《城南旧事》等。

其次，一定要看一些思想性强的作品，感受大道的至简之美。因为这些对于理性、对于探索事物的本质非常有益。具体的作品，可以参考《道德经》、《巴菲特致股东的信》等。

最后，影视剧要多看，书更要多读。原因如下。

影视作品在刺激我们视觉和听觉的同时，留给我们思考和想象的空间，通常都没有文字留给我们的多，此其一；

其二，影视作品里的语言基本以对话为主，而小说等书籍中除了对话，还有很多关于环境、人物、心理、情感以及哲理等的描写。

基于这两点，虽然有些人可能天生就是视觉动物，但阅读始终是无法替代的，在培养语感方面也发挥着更为重要和基础的作用。

整体而言，如果目标是高品质的交互设计，在书影音的选择上面，笔者就建议大家去选一些经典的作品。具体而言，豆瓣评分和豆瓣 Top 250 榜单会是不错的参考。

再说下狭义的语感，即对交互设计的感知能力。

这个完全是后天训练出来的。如果这方面的语感不够好，则进步空间很大。主要方式就是多用交互设计方面高品质的产品。

举个例子，可能我们很多人用的第一台电脑都是 Windows 系统，后来一部分人改用了 Mac。Mac 用久了，就再也用不惯 Windows。这就是语感提高的典型例子。

我们常用的一些产品，比如微信、iOS、快手等，在交互设计方面都拥有很高的品质。

这些日常使用的产品，客观上也在潜移默化的提升我们的语感。最终的结果，也会对整个行业的交互设计提出更高的要求。

这里笔者再向大家推荐一个涉及网页端和后台管理、编辑的产品，交互设计方面很优秀，那就是博客搭建平台 SquareSpace。笔者自己的工作室网站 SnowDesign.Me 就是基于这个平台搭建的。

2 理性思考

交互设计要做到高品质，就要求从信息架构到交互设计，大大小小的无数细节，其决策几乎全部是正确的。这是一个很高的要求，背后必须要有理性思考的支撑。

现实情况是，很多团队做不到这一点。

然而，交互设计，从构思、到设计、到优化、到讨论、到修改，每一个环节我们都有理性思考，那又为什么做不到高品质？

在笔者看来，这些理性思考还存在进步空间。只有优秀的理性思考，才能设计出优秀的交互设计。

个人观点，优秀的理性思考，通常是一种独立思考，主要有 3 个维度，分别是：逻辑、全面、权重。

以微信为例，如果换个团队，有可能会把朋友圈作为一级 tab 单独拿出来。因为大家使用朋友圈的频率很高，这样少点一下会更方便。这在逻辑上完全没问题。

但微信团队的考虑，个人推测，至少有这 3 点：

1. 微信坚持只有 4 个 tab；

2. 朋友圈是个插件功能，可拆卸，作为一级 tab 不合适；

3. 少点一下，更方便。

这里面权重最高的是第 1 条，权重最低的是第 3 条。综合来看，微信是不会把朋友圈单独作为一级 tab 的。

这个例子很有意思，笔者觉着它在一定程度上反映了我们很多人存在的不足。

我们很多从业者，在进行理性思考的时候，逻辑方面基本没问题。但是在全面和权重这两点上，可能会做的不到位。这就导致我们无法做出正确的决策。这样的细节一多，必然导致我们无法做出高品质的交互设计。

所以，要想在理性思考方面达到优秀，就需要同时做到这三点：逻辑准确、考虑全面、权重正确。这还只是一个细节的决策，所有细节的决策，都要如此。加起来会是一个庞大的工程。

这里再顺便强调一下“全面”。

这个全面，一定要去抓、并抓到事物的本质和核心。

所谓大道至简，本质一般都不复杂。一个可供参考的数字是，本质通常只有 1-2 个点，影响本质的因素通常有 4 个左右的点。再具体的，可以参考一篇旧文：《找到本质需求：聊聊内容分类》。

还有一个影响因素，就是社会压力。

很多时候，我们不愿去独立思考，而是直接参考别人的设计。一来省事儿，二来也容易找到归属感和安全感。而独立思考，可能会把我们带入到一种蓦然回首“空无一人”的“孤独”状态。

但是朴素的辩证法告诉过我们，凡事都有两面。选择了白天，就会失去黑夜。所以，关于社会压力的问题，本质上可能是一个选择题，同时也包含了每个人对孤独、安全感等话题的理解和接纳程度，此处就不深入讨论了。

3 反复实践

先说理性思考这块儿。

因为互联网产品总是会更新，所以不管是新人还是老人，只要目标是高品质的交互设计，总会碰到很多未知的或超越经验范畴的问题。

面对新问题，很少有人能在第一版的初步想法上就做出正确的决策，也就是做到逻辑、全面和权重的完美无误。人类大脑中的想法，通常都是先有后优。选定一个方案通常都需要有多个方案的比较和权衡，优化选中的方案也包含了无数细节的调优。

Foxmail、QQ 邮箱和微信的交互设计都很优秀，为张小龙提供了大量成功经验。即便如此，微信上新功能的时候，张小龙也还要通过反复试用不同的版本来找到那个正确的版本，更别说我们这些没有多少成功经验的普通大众了。

不管是选定方案的大决策，还是细节调优的小决策，要想变成正确的决策，都需要大量的实践。这个实践既包含理性思考的支撑，也包含了感性语感的检验。

因为语感就类似品位，也会影响到交互设计的品质。

如前所述，交互设计的语感，既包含人文艺术这个广义的语感，也包含感知交互设计这个狭义的语感。

培养广义的语感，需要经年累月的实践，少则一二十年，多则一生的时间。如果想要一直保持那个状态，就需要一直实践。重点在于优秀文化的熏陶以及自己的吸收，还有自己不断的观察与思考。

培养狭义的语感，也需要大量的实践。重点就是日常多用交互设计优秀的产品。

类似游泳需要让身体而非大脑记住动作，我们需要让控制感性而非理性的那部分大脑，记住并习惯于用过的所有优秀产品。

如果广义语感和狭义语感都很棒，当体验到品质不高的交互设计时，很有可能，马上就会产生不太舒服的感觉；而当体验到高品质的交互设计时，极有可能，也会很快产生诸如开心、满足之类的积极情绪。

结语

交互设计，如果看着简单、用着顺，则基本为高品质。

一边培养人文艺术方面的广义语感，一边培养感知交互设计方面的狭义语感；

理性思考要在逻辑、全面和权重这三方面都做到尽善尽美，全面这块一定要抓到事物的本质和核心；

第一版方案做不到高品质是正常和普遍的，做出错误的决策也是难免的，最重要的是在培养语感和理性思考方面反复实践，直到打磨出高品质的交互设计为止。

以上三点，可以帮助我们做出高品质的交互设计。

最后，借乔布斯的一句话来结束本文。

你要熟悉人类在各领域的优秀成果，尝试将之融入你在做的事情里。

原文地址：SnowDesignStudio（公众号）

作者：Leeo

转载请注明：学UI网》交互设计：如何做到品质？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

展示一：

展示二：

展示三：

展示四：

展示五：

转载请注明：学UI网》2022设计作品精选 | 数据可视化

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

 为什么选择蓝色？

理由很多，我这里罗列一些：

1、人们就是喜欢蓝色

问卷调查显示大部分人把蓝色当做它们最喜欢的颜色。因此蓝色被认为是全球最安全的颜色。

色彩偏好是视觉体验中的重要一环：

2、与大自然的关联

蓝色与净水、晴空等自然景观能够产生强烈的关联，这提高了人们对它的喜好。

3、界面设计的通用颜色

从一个界面设计师的角度来看，蓝色绝对是一个有用的颜色。红色、橙色和绿色通常都是有含义的，例如错误、警示和完成。蓝色相对来说就成为了非常好的选择。

4、科技创新感

这也是很多公司使用这个颜色的原因。

5、安全感

在旅游网站上，蓝色是一种非常通用的色彩，因为它可以表达可以依赖的感觉，这对于旅游来说是件好事。

6、让产品看起来更加可信

很多情况下，说服用户使用我们的产品至关重要。这时，蓝色就可以表现出信赖感。很多像Dell、IBM、Intel、AT&T和支付宝这样的科技公司利用蓝色来传递信誉信息，因为他们的产品是人们每天都要依赖的。

7、色弱

很多种色弱患者（如最常见的红绿色盲）都可以看得到蓝色，这一点上蓝色明显优于诸如绿色和红色等其他颜色（Z Yuhan：幸运的是，色盲虽然在百种男性中的发病率高达10%，在亚洲人里却十分少见）。

普通人看到的颜色 VS 色弱患者看到的颜色：

Facebook用蓝色，因为扎克伯格就是色盲患者，他说：“蓝色对我来说是最丰富的颜色，我可以看到所有种类的蓝色。”

结论

我希望读完本文，你能了解为何蓝色在设计师中如此流行。然而这并不意味着你应该把你的方案的主色调改成蓝色。

蓝色也不是最好的万能色，万能色并不存在。

在一个网站或App上行得通的颜色，可能在另一个上就不能用了。最安全的方法还是根据目标用户的喜好来选择。

所以最终，用在你设计上的最佳色彩应该是你的用户所认为的最佳色彩。

Z Yuhan：我发现我的手机上橙色比较多，文化差异，还是这几年激烈竞争的变化？

原文地址：babich

译文地址：知乎

译者：Z Yuhan

 转载请注明：学UI网》为什么界面设计大多喜欢用蓝色？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

Part1 界面设计工具的发展历程

• 1. 第一阶段是最早期界面设计领域刚刚起步，设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具，因此界面设计师在界面的绘制、文件的交付上都存在一定不便。
• 2. 第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件，但其作为一款专门针对界面设计的工具，以其高效、小巧的优势迅速占领界面设计市场，逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺，出现了Principle、Flinto、Protopie等专门设计界面动效的工具，一般设计师都会将其搭配使用。
• 3. 当前阶段各种新兴设计工具如XD、Figma、Framer Web逐渐走进设计师们的视野，它们专注于界面设计领域，不断挖掘和突破Sketch的短板，为设计师们打造更良好的使用体验。

Part2 界面设计工具的未来发展趋势

界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展，旨在实现更高效的设计生产活动。

1. 云端性

随着云计算的发展，界面设计工具也在逐步走向云端化。设计从本地转向云端，不再依赖于本地硬件的性能，云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制，只要有网络，设计师可以随时随地的工作，临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。

2. 协作性

3. 通用性

Part3 界面设计工具推荐 

1. UI工具篇

1）Windows用户也可随心使用

2）云端文件使用不卡顿，支持离线编辑

Figma创建的文件全部存储在用户的云端账户中，不占用本地内存。当文件过大时，sketch会出现卡顿现象，拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小，大文件也几乎不存在卡顿的情况。

3）一键导入sketch文件

4）更强大的组件功能

Figma和Sketch都拥有组件功能。当原始组件更改时，复制组件就会同步变化，在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步，复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时，原始组件不受影响。此时二者的关联逻辑仍然存在，当再次修改原始组件，复制组件仍然会同步变化。相比于Sketch，Figma把组件做的更加灵活限制更少。

同时Figma也在不断优化其组件功能，在Config Europe大会上，Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件，在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。

如下图中的按钮组件，设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。

5）与代码紧密结合

6）一键恢复历史版本

7）团队协作

除了设计师之间的协作，Figma也有效提高了设计评审的效率。与在工作群截设计图标红再描述相比，Figma的评论功能使得同事可以在设计文件中实时标注讨论方案，提高了线上评审效率。

2. 动效工具篇

Framer Web的核心亮点是什么？

1）网页端全平台可用

相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑，Framer Web是一款基于浏览器的在线设计工具，因此windows用户也可以安心使用。同时个人版本免费，大大降低了设计师的使用成本。

2）文件导入

Framer Web可通过import选项导入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真动效。

3）轻松实现复杂动效

Magic Motion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后，可以在Magic Motion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态，那么在画板切换时该元素就会生成补间动画发生相应变化。

4）从设计到代码

目前Framer Web 已经可以实现导出相应动效代码，但导出的效果仍有待完善，只是可以导出Transiton的参数而已。

Framer Web放弃了攻占界面设计领域的策略，转而和Figma官方达成积极的战略合作，专注于做专业的动效设计软件。因此Framer Web非常适合和Figma搭配使用。随着产品策略的调整，相信在不久的将来Framer Web还会为设计师们提供更丰富、高效的动效设计功能，非常值得期待。

3. 插件篇

4. 协作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研发的高效设计协作平台。XSHOW连接了产品经理、开发等各个不同工种，提高了设计资源输出和分发效率。设计师将设计文件上传到XSHOW，就可以将文件链接分享给产品经理、开发等同学。

产品经理在手机小程序上就可以预览方案，设计师每次更新的方案也可以直接预览。开发同学可以直接查看标注和切片。同组设计师也可以直接下载源文件、甚至查看历史迭代版本。

XSHOW是如何实现高效协作的？

对于设计师

1）可视化上传文件

2）记录所有版本迭代，轻松找回第一稿

3）灵活丰富的分享权限

对于项目管理者

1） 直观了解团队输出,组建团队展示能力空间

2）方案变更及时知道

 

1 

3）便捷组建项目和管理团队成员

对于合作产品经理或甲方

1）多端查看更方便

 

2）查看历史变更

Part 4 结语

原文地址：腾讯ISUX（公众号）

作者：ISUX

Illustration: Outcrowd

1、构思仪表盘界面的大脑

让我们深入研究设计解剖学。仪表盘的“父母”是客户端、设计人员和开发人员，每个组件设计都需要他们的合作产出，所有关键点在一开始要做出说明。

智人是由胚胎发展而来的。首先形成的是脑细胞和神经细胞，然后是身体的其他细胞。这正是任何可行的项目应该遵循的方式。第一个阶段是最重要的。如果你忽视这个阶段，再花哨的设计也不能挽救局面。这正是为仪表盘的长期发展奠定基础。

仪表盘如果会说话的话，它会问“我为什么出生？谁需要我?“。

试问你能回答吗？因此你需要明确:

• 仪表盘将如何助力公司目标?
• 什么结构，功能和视觉效果将帮助仪表盘服务好用户?
• 哪种设计最适合目标受众?

这些问题的答案将构成你的设计理念基础。

Perls

仪表盘中没有琐碎的细节。

仪表盘显示的信息应该使用户能够做出决策。设计师的工作是帮助用户解决问题，而不是让他们使用一堆很酷的小工具。任何对目标不起作用的事情都会与目标背道而驰。

从项目的最初阶段到最后阶段，设计师必须关注公司的目标、仪表盘的目标和用户的目标。

否则，仪表盘将永远不会做的更好。

Clover

2. 数据及关键指标选择:循环系统

仪表盘数据就像循环的血液。我们必须理解它们来自哪里，当用户需要它们时如何处理，以及应该如何可视化。

设计师需要理解数据的目的。显然，这将帮助他们选择合适的组件，但还有更多的工作要做。例如，用户希望在屏幕上看到大量不同的读数。你不需要移除任何东西来清除一些空间，但你可以做的是突出最重要的元素，并在视觉上“弱化”次要的东西。然而，要做到这一点，你必须知道数据的优先级。

Bidding Car

最重要的指标是哪些数据能帮助达成目标。例如:

• 显示实际成功率;
• 影响产品的感知方式;
• 激励创造产品的团队。

参数的选择也需要了解用户。用户应该看到哪个关键指标，他们认为什么样的可视化表现最容易理解？

人们喜欢看到与他们的目标相符的数字。

Panch

3. 仪表盘结构:骨架

想象进入一个酒店房间，看到一张床，一张桌子和椅子，一面镜子和一个壁橱。甚至不用打开壁橱，你就能猜到里面有什么。吹风机、拖鞋和毛巾都在你想要的地方——有人确保了这些。一个好的仪表盘就像那个房间。它是干净的，整洁的，可预测的。你马上就能看到所有的要点，凭直觉知道在哪里可以找到其余的内容。

设计师有自己的工具来确保整洁。

1) 层次结构

首先，你得整理思绪。在开始设计之前，一定要对所有数据进行排序，将其分类，了解什么是最先发生的，什么是最后发生的，接下来是什么等等。确定用户必须马上看到的关键内容。

视觉层次结构必须反映信息层次结构。

数据层次结构通过小组件的大小和位置表示。如果你的读者从左到右阅读，关键信息必须放在左上角，最不相关的信息将在右下角。

对数据排序的方法将取决于仪表盘的用途。重要的是根据信息的优先级组织信息，并创建逻辑场景。

把信息面板看作是一个故事，而不是一系列数据点。

2) 网格

网格对于创建页面的总体布局、排序、平衡和对齐元素非常有用。

3) 信息模块

模块系统类似于公寓的分区。卧室是用来睡觉的，餐厅是用来吃饭的——每个区域都有自己的功能。你的舒适度取决于他们所处位置的便利程度。糟糕的布局不能通过装修或家具来修复。相应地，必须提前考虑模块划分。

模块帮助显示内容层次结构，根据数据的重要性、相关性和逻辑连接对数据进行分组。每个模块都应该在给定的流程中服务于特定的目的。

4) 连续性和接近性

如果你去厨房需要经过有两扇门的走廊，这是一个糟糕的布局。互连的流程假定逻辑接近。如果一个模块中的流程需要来自另一个模块的信息，那么布局上应该保证数据的连续性。这一点必须提前考虑，这样用户就不必在晦涩的存储空间中寻找他们需要的信息。

Illustration: Outcrowd

所有相关信息都应按重要到不重要的顺序进行分组，并就近放置。

5) 分离模块

没有人需要一个延伸到卧室的厨房。为了将一个模块与另一个模块分开，你需要负空间。确保从一开始就考虑到这一点:将负空间视为需要视觉平衡的设计元素的组合。

Wingle

4. 功能:肌肉

功能和工具的数量由仪表盘的用途及其用户的关键目标决定。

要想自由活动，人类只需要两条腿，狗需要四条腿，蜘蛛需要八条腿。一个功能太多的仪表盘就像一条六条腿的狗一样，这有点令人毛骨悚然。

不要在控制面板上放置过多的工具。用户只需要手边有必要的东西。过多的可用工具会让人们感到困惑，并吓走他们，因为它看起来太复杂了。个性化总是比标准化好。

Band

5.小组件:重要的器官

如果屏幕上有超过5到7个小组件，人们就很难理解内容。因此，我们的工作是让相关数据易读，但不过量。用户应该在几秒钟内理解他们所看到的内容。

数据可视化工具包括:

• 表格
• 图表
• 示意图
• 卡片
• 指标
• 地图
• 图片
• 分组
• 筛选器
• 列表
• 选择树

Activity

小组件的选择取决于仪表盘的用途和用户。想想以下几点:

• 哪个组件能最好地显示一个特定的KPI?
• 用户可以立即看到什么?
• 哪个组件是用户最容易理解的?
• 什么可以帮助用户更快地找到他们需要的东西?

选择易于理解和阅读的小组件。

这里是一个令人困惑的小组件的例子:

想想主要的“目标”来吸引用户的注意力。例如，如果你的优先级是绩效目标，你应该使用数字;如果你需要比较值，用直线或柱状图会很好;为了激励团队，可以使用带有相关亮点的排行榜。

不正确选择的小组件或默认小组件模板可能会使用户混淆或导致他们误解数据。

最好的解决方案是分析和测试的结果。

最好的小组件设计是极简和易于阅读的。例如，一个3D图表可能看起来令人印象深刻，但它占用了用户太多的注意力，最终证明会分散用户的注意力。这也适用于渐变、过度使用颜色和过多的细节。

6. 视觉设计:一般技巧

我们已经创建了仪表盘的思想和身体。唯一要做的就是皮肤——最外层。这可以根据优秀设计的基本原则来实现，但仍有一些新的需要注意的细节。

1) 简单

仪表盘应该像你喜欢工作的桌子一样干净:它必须只有必要的文件和工具，没有干扰。

MEMO

2) 颜色

仪表盘颜色的选择必须有一个目的:尽可能清晰地显示信息。颜色跨度越大，就越难把数据展示清晰。所以不要让仪表盘的颜色过多。使用同一颜色的深浅是一个好的办法。

首先要选择底色，然后是补色。每种颜色都必须有特定的用途。一种颜色可以用来组合元素，另一种颜色可以用来高亮。颜色还能体现一个元素是积极的还是消极的。

避免使用可能有负面含义的颜色。例如，在这个例子中，红色看起来像是代表坏的和不受欢迎的东西:

如果仪表盘提供了可定制的颜色，确保所有可用的选择看起来都比较舒服。

选择颜色组合的一个好工具是Adobe color CC。

3) 突出

语义高亮应该与视觉高亮相对应。为了突出一个元素，你可以使用颜色(对比度，亮度)，形状，大小，负空间等。

4) 可读性和数字格式化

这是确保视觉清晰度的重要因素:干净的布局，视觉层次，重点突出，对比元素，适当的字体，这些字体也必须具有对比性和易读性。

高精度的数字格式很难理解。最好把所有的数字都四舍五入，然后把较长的数字尾巴去掉。

7. 适应性

在实践中，当用户优先考虑桌面版本时，在移动版本之前创建网页版本是合理的。如果你的目标用户主要使用的是手机版本，那么你可以先从移动设备着手构建仪表盘，然后再开发桌面版本。

Snap

总结

设计一个好的仪表盘不是一件容易的事情。我们把它比作人类的发展，因为它是一个很好的方式来呈现重要的东西。当你在设计仪表盘时，请不断地问自己:是否一切都已就绪？有多余的肢体吗?身体的各个部位协同工作吗?用户会喜欢这个结果吗？它有用吗？

正如你所看到的，视觉设计实际上是设计师最不应该担心的事情。

最后，彩云再分享一组常用的后台图表界面组件库，相信会对大家的日常设计工作有帮助，

本文翻译已获得作者的正式授权。

原文地址：medium

作者：Erik Messaki

译文地址：彩云译设计（公众号）

译者：彩云Sky

转载请注明：学UI网》后台界面设计的7条原则

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司