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

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咨询、用户体验公司、软件界面设计公司

01  Cool Backgrounds

网站链接：https://coolbackgrounds.io/

网站介绍：Cool Background 是由5个开源生成器整理组成的彩色渐变图像集合在一起的工具集，内置5种不同的背景风格，每一种风格还提供了简单的参数配置。非常的炫酷美观。

低模三角形

粒子

CSS渐变

阶梯渐变

图片

使用方式：左侧选择不规则形状、图形、渐变背景、图片等，右侧可以选择不同的色彩组合，选择适合自己的色彩风格后，点击下载即可。

02 180种渐变背景

网站链接：https://www.fengtupic.com/colortool

网站介绍：内含180种渐变配色方案，特别好看美观，适合各种场景模式下的背景使用。

使用方式：选择适合自己场景的渐变色，可拷贝css格式，也可下载png格式。

03 Pigment

网站链接：https://pigment.shapefactory.co/

网站介绍：可通过改变饱和度、色温和色系改变配色方案，还可通过查看场景效果观察此配色方案呈现效果。

网站截图

饱和度  亮度 颜色

选中和更多

使用方式：左侧可以选择不同的饱和度和亮度，选择其他色调，右侧放大可查看场景配色效果。

04 ColorSpace

网站链接：https://mycolor.space/

网站介绍：Color Space 是一款非常实用的渐变生成器，我们只需要选择一个颜色，就可以快速生成20-30种不同风格的配色方案。同时还提供了梯度和三色渐变选项，可以快速生成配色并查看 CSS 代码。

网站截图

输入颜色代码或选择颜色

生成方案

更多与修改

CSS代码模式

三色渐变

使用方式：上面输入色值，自动出来渐变方案，还可左右滑动选择适合自己的搭配方案

05 Adobe Color

网站链接：https://color.adobe.com/zh/create/color-wheel

网站介绍：可自由选择色环上不同的颜色值，依照类比、单色、三原色、补色等不同搭配模式进行搭配，下面展示一系列色值。同时可将看到的好的图片色纸上传上来，自动配比色值，同时，还能查看背景色与文字的对比度检测，非常适合网站多色搭配。

色轮

辅助工具

使用方式：滑动多tab滑块，选择色环颜色做不同类型搭配；利用协助工具查看文字与背景的对比检测。

06 BrandColors

网站链接：https://brandcolors.net/

网站介绍：这个网站是基于最大的官方品牌颜色做整理，包含了众多品牌颜色官网的配色方案，可作为网站或者品牌配色的借鉴。

颜色方案

选中后复制下载

使用方式：选择好相关品牌的色彩调性，可查看色值，可复制色值，也可以下载相关色值，超级方便。

07 Color Leap

网站链接：https://colorleap.app/home

网站介绍：一键生成复古风图片色调分离，可以选择年代搜索过去180种配色方案。

年份选择

年份列表

代表图片和查看颜色

查看颜色和查看图片

使用方式：选择年代，选择图片风格的配色方案，查看颜色，复制相关色调即可。

08 ColorBox

网站链接：https://www.colorbox.io/

网站介绍：ColorBox 是选择一个颜色，会生成一个颜色系列的颜色工具。可以帮助我们轻松地创建非常炫酷的色彩集，配色页面还有大量的个性化选项，满足我们的任何需求。

网站截图

饱和

使用方式：左侧可以添加不同的颜色分类值，右侧调整搭配的颜色系列和同色系和补色系不同选择，曲线直观展示出色调和饱和度的变化幅度。

09 Eggradients

网站链接：https://www.eggradients.com/

网站介绍：Eggradients 是一款收录了最新设计趋势渐变色彩的配色网站，以鸡蛋的形式展现，支持一键复制。

预选颜色

渐变调色板

使用方式：选择适合自己设计场景的配色方案，复制即可。

10 CoolHue 2.0

网站链接：https://webkul.github.io/coolhue/sketch-plugin/

网站介绍：CoolHue 2.0是一款免费的 Sketch 渐变配色插件和收集工具。

使用方式：在sketch下载插件，直接点击插件，选择相关配色。

11 Free Mesh Gradient Collection

网站链接：https://www.ls.graphics/meshgradients

网站介绍：包含100多个免费的渐变色合集，支持 Sketch、PNG、AI、JPG、EPS 等多种格式下载。

网站截图

翻译截图

渐变截图

使用方式：可选择ai、eps、jpg、png格式，选择好看的渐变色下载即可。

12 Grabient

网站链接：https://www.grabient.com/

网站介绍：Grabient 一个非常漂亮且实用的渐变网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

网站截图

调整角度

调整颜色

渐变比例

使用方式：选择适合自己风格的配色方案，点开调整渐变梯度，下载即可。

转载请注明：学UI网》12种超级好用的-免费渐变神器

蓝蓝设计建立了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交互设计还真是UI设计和交互设计的结合。不过具体区别如何，还是让我们来看看三者的对比吧！

1. UI交互设计vs UI设计vs交互设计对比之概念

UI设计

UI设计或称界面设计（英文UserInterface Design, 缩写为UID），它是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计主要分为实体UI和虚拟UI两种，互联网行业常见的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。

交互设计

交互设计（英文Interaction Design, 缩写IXD），它主要指的是两个或多个个体之间交流和互动方式的设计，以达成某种设计产品的目的。交互设计的目标一般从“可用性”和”用户体验“两个层面出发，以帮助解决用户需求。

UI交互设计

其实小编从多方查找资料发现，UI交互设计这个术语是非常模糊的。在小编不断对比整理下，终于得出了它的基本概念。从广义上来说，UI设计是可以包含交互设计的，在这样的情况下。简单来说，把交互设计的理念体现在UI界面上，就是UI交互设计。

从设计重心方面来看，UI设计的重心是色彩和视觉，以界面美观设计为主，主要考虑产品看起来怎么样。而交互设计则是以用户为中心进行人机互动部分的设计，主要考虑产品用起来怎么样。而UI交互设计则需要兼顾UI与交互两个方面进行设计，将交互的理念体现在UI界面上。

2. UI交互设计vs UI设计vs交互设计对比之工作人群

UI设计相关人群：

UI设计师，界面设计师，网页设计师。

交互设计相关人群：

UX设计师，交互设计师，UE设计师，产品经理，网页设计师，产品经理。

UI交互设计相关人群:

UI设计师，界面设计师，交互设计师，网页设计师，UX设计师，产品经理。

从相关的工作人群来看，不同的设计工作类型，涉及的人群也尽不相同。UI设计的相关人群主要是工作中包涵该部分的人，除了专业的UI设计师，界面设计师，网页设计师等也是它的工作人群。而交互设计涉及的人群更广，交互设计师、UX设计师自然不在话下。另外，需要表达设计想法的产品经理运营人员也是其中一员。最后，UI交互设计所涉及的范围比两者稍广，包含了UI设计人群和大部分交互设计人群。

3. UI交互设计vs UI设计vs交互设计对比之例子

UI设计案例：

如上图所示，UI设计主要在于通过对用户界面的色彩，布局，文字排版等方面进行设计，以保证整体界面的美观。

UI交互设计案例：

小编这边选取了一个简单的UI交互作为案例，这个交互的效果是通过点击UI界面中按钮出现不同的图片。这种将交互体现在UI界面上的设计，就是UI交互设计。UI交互设计包含了各式各样的交互效果，如下列刷新、进度条、图片轮播等，小编就不再一一例举了。

交互设计案例：

而这种以人机互动为目的，注重用户体验的设计则称为交互设计。

从以上的案例不难看出，UI设计主要以界面美观为主，以静态的方式呈现居多（也有以动图动画形进行呈现）。交互方式是静态的。UI交互设计是在UI的基础上进行交互设计，以偏动态的形式存在。交互设计则以用户体验为主，以动态的形式存在。

4. UI交互设计vs UI设计vs交互设计对比之工具

UI设计工具：

PS（Photoshop）：适用于界面设计，图标设计，手绘等。

AI （Illustration）：适合创建徽标、图标、草图、排版和其他矢量图。

Sketch：适合图标、界面设计，支持多文件分层，切片等插件。

交互设计工具

Axure：老牌原型设计工具，适用于制作中高保真交互原型。

Mockplus：适合创建快速交互原型，简单高效，同时支持团队协作。

摹客：适合一键切图，生成智能标注，生成图层代码，交互演示，设计协作。

UI交互设计工具：

PS，AI，Sketch，Mockplus、摹客原型设计工具。

从使用的工具来看，UI设计主要以图形、图标、界面设计工具为主；交互设计主要以原型设计，交互设计工具为主；而UI交互设计则囊括了前两者使用的所有工具。

看完本文后，小编相信大家对UI交互设计，UI设计，交互设计三者的关系已经有所了解了。简单来说：UI是为了好看，交互设计是为了好用，UI交互设计就是好看又好用。如果想从事UI交互设计相关的工作，小编建议不妨在了解它们的基本定义后，开始学习一些技能知识，着手开始练习设计。这样可以帮助大家在UI交互设计的路上快速成长！

原文地址：慕客

作者：慕客产品协作设计

 转载请注明：学UI网》UI设计、交互设计、UI交互设计的联系和区别是什么？

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

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

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

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

3种圆环图样式 

标准圆环图

图表中间空心的部分用来展示数据的总数，用圆环的弧长和颜色表示不同数据的占比，图表旁边有图例用来解释说明。

布尔圆环图

布尔圆环图就像是给圆环图做了布尔运算，只表示正负两个值。

比如想重点突出完成率，就使用绿色圆环来表示68%的完成率，圆环其他部分为灰色，同理想重点突出反弹率，就使用红色圆环来表示83%的反弹率，圆环其他部分为灰色。

圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。

标签圆环图

圆环图交互状态分析 

悬停状态

在标准圆环图中，鼠标悬停在圆环图上时，跳出分段名称+百分比+数量值的弹窗。在标签圆环图中，悬停的圆环部分突出显示，其余部分淡出处理。

点选状态

图表段可以是交互式的，点击对应的分段时，右侧的图例也会同步高亮显示。

焦点状态

焦点状态和上面提到的悬停状态类似，唯一的区别在于，焦点状态选中分段后有一个放大+描边的圆环效果，突出展示数据。

空状态

当没有可用的数据时，应该在图表上表明这一点，并给出提示引导用户去点击。

错误状态

圆环图使用指南 

使用分类颜色

保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据，同色系颜色常用在直方图中。

最多使用五个分段

当圆环图包含多个数据分段时，图标会变得难以理解，为保证图标的清晰，尽可能将分段控制在 2-3 段，不要超过5段。如果数据过多，可以考虑使用柱状图、条形图等其他形式的图表。

保证数据准确

圆环图的所有分段加起来的数值应该始终为 100%，没有有多段数据占比过小，可以一起汇总到“其他”分段中。

按顺序排列数据

圆环图的份分段应从12点位置开始按最大值排序，然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。

不要将时间分段

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学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咨询、用户体验公司、软件界面设计公司

那么，如何设计出一款界面精美的移动端App呢？

如果你是为iOS设计应用程序，那么此文你可以好好看一看。我们都知道用户界面会直接影响到用户体验。所以本文中，我首先精心挑选了12款最佳iOS移动应用程序模板和案例，它们都有着优秀的iOS用户界面设计（iOS设计模式）和良好的用户体验，涵盖生活类，杂志类，体育类，天气类，网上购物类等等。此外，本文还提供了一些iOS人机界面设计指南。希望能对您有所帮助。

1. City App

类别：导航

系统要求：支持iOS 9.0以上

City App是一个iOS应用程序模板，也是一款以用户为中心的信息类集合软件。City App用于提供城市指南解决方案，并可以显示你所在城市的有趣地点，并加以描述性介绍。

用户还可以直接通过相机照片搜索图片所在定位，一张图片就是一个数据的集合。Admin后台可集中管理地点数据，但您可以对其编辑，更新或删除。来自世界各地的风景优美的图片是界面色彩的主要构成，非常美观。

2. Triibe

类别：生活方式

系统要求：iOS 9.3或更高版本，与iPhone，iPad和iPod touch兼容

Triibe是一个引领全新的社区类iOS应用程序，它是专门为制作达人设计的一款产品。它提供一种最简洁、直观的方式展示你的手工创作和学习创意。任何题材设计，包括工艺，烹饪，家居，时尚等等，都可以得到展示。该App的一大特色使其精美的界面，用户在这里上传和展示其手工作品，搭配纯净的浅色背景，几乎和任何的设计作品都能呼应。

3. Design Events near you

类别：活动

系统要求：没有限制

Design Events，顾名思义，就给人一种充满设计感的印象。它是由来自印度的一位才华横溢的设计师Johny vino设计的。它一款典型的iOS应用程序，主要用于发现你身边的各种设计活动以及您所在城市和附近地区的各种户外活动。它可以智能的进行有趣的活动推荐。该App的动画交互和过渡都非常简洁流畅，搭配明快的配色，让人觉得眼前一亮。

4. Trove

类别：播客和时尚

系统要求：iOS 9.0或更高版本，与iPhone，iPad和iPod touch兼容

这是一个非常酷炫时尚的iOS应用程序。借助Trove，您可以随时随地找到自己喜欢的风格，获取来自世界顶级风格影响者的无尽灵感和建议，追随顶级时尚博主。浏览“精选”服装，可以发现并关注与您风格一致的博客。此外，“My feed”选项卡，可以让您随时查看收藏夹，并将物品添加到您的收藏夹中，以便稍后再购买或可以选择立即购买，你的所有选择都是自由的。

5. Nowait Guest

类别：食品和饮料

系统要求：iOS 9.0或更高版本，与iPhone，iPad和iPod touch兼容

Nowait Guest是一个简化生活的iOS App。使用该应用程序，可以为您节约大量的订餐等待时间，很餐厅都已经开始投入使用该App，以方便其顾客可以提早了解其订餐情况，包括Chili’s，Buffalo Wild Wings，First Watch等。用户在家时，就可以随时查看附件餐厅的当前等待时间，然后做出决定是否前往。餐厅的图片使用非常吸睛，整个界面看起来让人觉得“垂涎三尺”。

6. The New York Times

类别：杂志和报纸

系统要求：iOS 9.0或更高版本，与iPhone，iPad和iPod touch兼容

这是一款家喻户晓的应用程序，帮助您随时随地掌握最新信息，对于新闻爱好者和喜欢阅读的用户而言，这是一款比书美观，但和书一样能用文字传达信息的程序。该程序与iPhone，iPad和Apple Watch的NYT应用程序一起获得过闻类应用程序奖项。它具有新闻快讯，多任务处理，晨报和晚报，播客，保存文章以供日后在任何设备上阅读等功能。

7. iPhone X – Todo Concept

类别：杂志和报纸

系统要求：iOS 9.0或更高版本。与iPhone，iPad和iPod touch兼容

iPhone X – Todo Concept是由Jee-Jeong为Norde设计。它是基于iPhone X概念而制作的一个新原型。该原型的草图和psd模型都可以免费下载。它是设计师特别为iPhone X的发布而设计的。它的动画过度和转换都非常流利，其色彩选择鲜明大胆，极富感染力。留白的界面设计模式，和各种纯色背景都能形成鲜明对比，突出了重要信息，又美化了界面。

8. Cloud Music Offline MP3 Music

类别：音乐

系统要求：iOS 9.3或更高版本，与iPhone，iPad和iPod touch兼容

对于喜欢听音乐的人来说，这是一款不容错过的音乐应用程序。您可以轻松地将音乐从云端下载到您的设备并脱机播放。您的设备上就是一个无限量的音乐库。其音乐播放列表非常有趣，设置了动画多样的操作按钮。整个界面白色纯背景，干净而简洁，用户的注意力会停留在其喜欢的音乐上，不会分散。该程序支持所有最流行的音乐文件格式：.flac .mp3，.aiff，.m4a，.wav 等等。

9. KicksOnFire: Buy Sneakers

类别：运动

系统要求：iOS 8.0或更高版本，与iPhone，iPad和iPod touch兼容

这个应用程序是是专为运动鞋发烧友设计的，主要是推送新款运动鞋的特别发布日期及其相关新闻。该程序是App Store下载量最大的运动鞋发布日历类应用程序，不仅是获得第一手运动鞋咨询，您还可以在这里购买您最喜爱的运动鞋。其推送会基于您的个人资料智能进行个性化的发布和价格估算。

10. Airbnb

类别：旅行

系统要求：iOS 9.0或更高版本，与iPhone，iPad和iPod touch兼容

家喻户晓的一款App，风靡全球。当您准备旅行，从Airbnb开始享受难忘的旅行体验吧。这里，所有关于旅行的事情都变得更加美好，比如寻找旅行冒险，远游或找到一个全新的地方。游客可以获得度假屋租赁，体验一种新体验，并在世界各地参观的地方。如果您有房屋待租，Airbnb也是一个最佳平台，在这里，你绝对会当一个优秀的“房东”。

11. Local Weather Radar & Forecast

类别：天气

系统要求：iOS 9.0或更高版本，与iPhone，iPad和iPod touch兼容

该程序是一个当地突破性的天气新闻播报App，也是一个美国本地，乃至世界各地的交通应用程序。只需一个点击，就可以来回切换地位，以便随时查看您的朋友和家人所在地的天气情况。该程序还可以以小时来记录您所在地区的气温变化情况，形成以个独特的“气温变化”列表。

12. Sofa

类别：电影，电视和书籍

系统要求：iOS 9.3或更高版本，与iPhone，iPad和iPod touch兼容

这是一款iPhone应用程序，是可以让您沉浸在书籍，电影或电视节目中度过美好时光的一款App。您可以自定义创建电影，电视节目，书籍等列表，也可以将电影，电视节目和书籍添加到任何列表中。当您需要搜索某一条目时，可以通过向下滑动操作来直接解锁。

以上是2018年12个非常棒的iOS移动应用程序，它们中的大部分都位于App Store排行榜的首位，下载次数和使用人数都几位可观。看了这么多成功的iOS应用程序，作为设计师，你有没有思考过，这些App成功的秘诀的是什么？

不难发现，出色的用户界面和用户体验至关重要。iOS设计主题将就明晰、尊重和深度，这意味着，在整个iOS系统中，文字在任何尺寸的设备上都是清晰易读的，图标是精确而清晰的，并且需要流畅的动画和交互，有序的视觉层次等等。总之，您设计出来的App需要满足用户对质量和功能的高期望值，才有可能成功。

那么，设计一个美观精细的iOS移动界面都有哪些必须注意的点呢？

1. 排版

1）字体

字体选择不宜多，多则杂乱。只需使用单个字体并使用几种字体变体即可。苹果公司使用San Francisco，并根据产品功能选择字体。例如，在iOS 7中使用Myriad（Pro）Light，在iOS 9中使用SF-UI。在iOS 10中，旧金山变体是SF UI Text和SF UI Display。你只需按照规则即可。但为了达到文字的易读性和可读性俱佳，关于字体选择和字体布局，你还是要根据具体情况仔细斟酌。

2）字体大小

iOS的字体大小有其比较明确的规范，具体查看下表：

2. UI设计中的颜色

色彩的魔力不言而喻，人都是视觉性的动物。颜色可以传达活力和信息，提供视觉连续性，响应用户行为提供反馈、帮助人们可视化数据。自iOS 7以来，Apple一直在为其操作系统界面和预设应用程序设置色彩明朗鲜艳的调色板。关于颜色的选择比较自由，你可以使用下面列出的默认iOS调色板，也可以自己定制，以便在同类App中可以脱颖而出。

了解更多：如何在UI设计中明智地使用颜色来创建完美的UI界面？

3. 图标

iOS的图标风格是简单易懂，并且专注于某个功能点或者信息点。通常情况下，iOS应用程序需要使用到不同尺寸的图标。比如，用户在安装某一App后，在主屏幕可能需要使用较小的图标，但该程序在App Store里又需要更大的图标。关于iOS图标大小，也有比较明确的规范：

4. iOS 11中的更新

1）加粗的导航设置

这几乎是iOS 11中最令人印象深刻的变化。使用粗体标题可以让用户快速了解其当前位置，并进行快速标签切换。

2）界面布局中的空白区域

iOS 11的标题文本包含一组元素，其中包含图片和描述，这些元素可以保持组元素之间的较大间距。在这种情况下，设计元素保持足够的间距并且可以用于区分不必要的装饰元素之间的层次关系。

地址：Mockplus

作者：jongde

 转载请注明：学UI网》iOS界面设计：12个优秀案例激发你的灵感

蓝蓝设计建立了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咨询、用户体验公司、软件界面设计公司