分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一次作品展示，想要视觉效果更高级，需要通过各种细节综合打磨。那么在今天推荐的这份作品中，我认为打磨比较好的细节以及我们可以从学习的主要有以下几点：
在我近期帮星友看的作品集中，发现很多人的作品本来还不错的，结果被糟糕的展示给减分了，很是可惜。我给不少人提的建议之一是先提升自己的审美，但他们遇到的问题是不知道看啥，判断不了哪些才是好的作品，以及怎么用到自己作品中去。这些问题不知你是否也有遇到？如果有同样的困扰，今天的文章一定要看完了，因为全是干货。
所以我在星球中利用审美打卡，每天帮大家搜集一些比较好的展示方式作为参考，同时提升审美，一举两得。这组Behance高级作品就是在打卡中给大家做的分享。接下来，我将逐个分析这几个细节部分，方便用到咱们自己的作品集中。
投影的本质就是给画面打造空间感，并突出界面内容，对于这一点我后面也会做一些延展，可能会有一些观点你没听过的。在看作品集的过程中我有发现很多人不注意投影的运用，但它其实是非常重要的作品加分手段。
1）投影要干净轻盈
投影在取色的时候，可以选择与背景颜色相近的颜色，然后略微加深一些，不要用纯黑色来做投影，会显脏。投影的颜色永远都需要结合环境的颜色，就想象成界面中有一个太阳光打过来，会反射周围的环境色，所以带有环境色的投影会显得更自然。
比如下面这个界面展示就是把背景色和投影颜色调整为品牌橙色的色相，只是把饱和度降低到了很浅的程度，看起来就很舒服。
再比如我之前做的一个banner，右边的卡片堆叠的效果，叠起来的投影层就是用到了蓝色的投影，看起来就会显得非常干净。
另外，要注意投影的距离不要太小显得不自然，颜色太深会显脏。
2）投影要针对特定的颜色进行微调
使用不同的投影透明度取决于产生投影物体的颜色。对于较暗的物体，投影需要做得更强，而对于较亮的物体，投影应该是更浅一些。
如果不注意这一点的话，假设两个投影都具有相同的不透明度，那么较亮物体的投影会在较暗物体的投影旁边看起来更暗。
比如下面的按钮投影透明度，投影透明度都是50%透明度时，白色按钮看起来会比蓝色的更深，可能要降低到30%左右才显得比较一致。
3）投影要符合现实规律
高级投影应该要结合现实规律，做到近实远虚。
上面这张图的投影就是有些问题的，更远的投影反而显得更深，其实应该要改的更浅一些才好。
做到这一点有2个小技巧：
如果是在sketch和figma中做投影的话，也可以叠加多层投影来做，大家可以尝试下。
前面提到，投影在做展示的时候，其作用就是打造空间感，围绕这一点我们也可以做些延展。
1）增加简单图形
在作品下面增加简单图形，既不干扰作品，又能通过穿插增加空间感。
2）增加插画元素
用一些品牌插画，元素，甚至图标给作品增加穿插，增加空间感。
3）增加3D元素
给作品增加简单3D元素，比如球、三角之类的元素。
来自Behance，审美打卡
我曾经做的界面包装
4）改变材质
把界面做成毛玻璃效果，再做穿插，进一步增强空间感
来自behance，星球审美打卡
5）深色界面
有人问，如果界面本身就是深色的怎么办？其实也是基于空间感的原理，给画面增加一些元素，与背景拉开关系就好。比如下面这样
来自behance，星球审美打卡
来自dribbble，星球审美打卡
来自dribbble，星球审美打卡
想要提升作品的逼格，使用大量的留白是非常好的技巧。但在给星友沟通作品集的时候，得到一个奇怪的说法，说是要把作品限定在多少页以内才更好。
我觉得这有的本末倒置了，作品要多放精华内容没错，但不是以页数来体现的，展示的时候还是以提升逼格为主，不要影响作品本身的视觉效果。每一页PPT，重点展示一件作品就足够了，物以稀为贵，像一些大牌奢侈品就特别喜欢大留白。
Apple手机官网截图
香奈儿官网截图
举一个反例，下面是某位星友的作品，其实这样的网页展示，一个页面单独整理在一页是最好的。当然前提是每一页的设计差别较大，如果太类似的话，放一页就够了。如果网页比较长的话，可以按分屏来展示。
星友作品截图
就像开头的作品那样调整下，逼格立马就能上来。
作品在做展示的时候，不论是自己设计还是用样机，有一个标准就是一定不能让人看不清细节，不能做了角度变化之后丢失细节。
像开头的作品展示，都是用了一些相对没那么夸张的角度，这样做的一个好处是能看到细节，即使是想带一些角度，增强设计感的话，也一定要以能看到细节为标准。比如像下面这样就可以了。
我也给大家举一些反例，比如像下面这位同学的展示角度就比较奇怪，其实像这种内容较多的界面，摆正就可以了，不然细节全都看不清。
星友作品截图
一个作品中的配图其实非常关键，甚至配图能直接把你糟糕的设计拯救过来。但遗憾的时候，很多人在展示的过程中不大重视自己的配图，我在跟星友交流过程中会发现大家对于配图存在一个误区，就是觉得配图一定要是真实的，有些人甚至觉得作品里呈现的一定是要去线上截图。
我想说，如果这样做会把你坑得很惨。原因有以下2点：
既然配图这种重要，那怎么做好配图这个事呢？有几个小技巧：
1）符合调性
配图要符合产品的调性，像开头的作品中，黑白干净是它的关键调性，那么选的图也是这个范的。
2）真实可信
尽量让配图看起来真实，别偷懒用重复的图，包括图中用到的数据也尽量真实。像下面这位星友的作品展示就有内容重复的问题，稍微花点时间就可以优化好了。
星友作品截图
3）加强设计感
在放界面展示图的时候，界面中放的图尽量多一些设计感，体现你的审美。
关于高质量配图我之前也有专门写文章《如何选到设计感强的配图，我总结了这7个实用方法》，文章中也分享了很多我自己收藏的高质量配图，大家有需要的也可以去阅读下载。
最后总结下，今天主要是从作品展示的角度，给大家介绍了如何利用好投影、投影原理延展、留白、角度、配图等方面给自己的作品展示加分。
这些技巧操作起来很简单，但又非常有效，具备很强的实用性。彩云希望大家把这些常用技巧真正用到自己的作品集中去，提升逼格，找到自己理想的工作！
原文地址：彩云译设计（公众号）
作者：彩云Sky
转载请注明：学UI网》Behance首页推荐的作品集为什么这么高级？我们能从中学到什么？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站链接：https://coolbackgrounds.io/
网站介绍：Cool Background 是由5个开源生成器整理组成的彩色渐变图像集合在一起的工具集，内置5种不同的背景风格，每一种风格还提供了简单的参数配置。非常的炫酷美观。
低模三角形
粒子
CSS渐变
阶梯渐变
图片
使用方式：左侧选择不规则形状、图形、渐变背景、图片等，右侧可以选择不同的色彩组合，选择适合自己的色彩风格后，点击下载即可。
网站链接：https://www.fengtupic.com/colortool
网站介绍：内含180种渐变配色方案，特别好看美观，适合各种场景模式下的背景使用。
使用方式：选择适合自己场景的渐变色，可拷贝css格式，也可下载png格式。
网站链接：https://pigment.shapefactory.co/
网站介绍：可通过改变饱和度、色温和色系改变配色方案，还可通过查看场景效果观察此配色方案呈现效果。
网站截图
饱和度 亮度 颜色
选中和更多
使用方式：左侧可以选择不同的饱和度和亮度，选择其他色调，右侧放大可查看场景配色效果。
网站介绍：Color Space 是一款非常实用的渐变生成器，我们只需要选择一个颜色，就可以快速生成20-30种不同风格的配色方案。同时还提供了梯度和三色渐变选项，可以快速生成配色并查看 CSS 代码。
网站截图
输入颜色代码或选择颜色
生成方案
更多与修改
CSS代码模式
三色渐变
使用方式：上面输入色值，自动出来渐变方案，还可左右滑动选择适合自己的搭配方案
网站链接：https://color.adobe.com/zh/create/color-wheel
网站介绍：可自由选择色环上不同的颜色值，依照类比、单色、三原色、补色等不同搭配模式进行搭配，下面展示一系列色值。同时可将看到的好的图片色纸上传上来，自动配比色值，同时，还能查看背景色与文字的对比度检测，非常适合网站多色搭配。
色轮
辅助工具
使用方式：滑动多tab滑块，选择色环颜色做不同类型搭配；利用协助工具查看文字与背景的对比检测。
网站介绍：这个网站是基于最大的官方品牌颜色做整理，包含了众多品牌颜色官网的配色方案，可作为网站或者品牌配色的借鉴。
颜色方案
选中后复制下载
使用方式：选择好相关品牌的色彩调性，可查看色值，可复制色值，也可以下载相关色值，超级方便。
网站链接：https://colorleap.app/home
网站介绍：一键生成复古风图片色调分离，可以选择年代搜索过去180种配色方案。
年份选择
年份列表
代表图片和查看颜色
查看颜色和查看图片
使用方式：选择年代，选择图片风格的配色方案，查看颜色，复制相关色调即可。
网站介绍：ColorBox 是选择一个颜色，会生成一个颜色系列的颜色工具。可以帮助我们轻松地创建非常炫酷的色彩集，配色页面还有大量的个性化选项，满足我们的任何需求。
网站截图
饱和
使用方式：左侧可以添加不同的颜色分类值，右侧调整搭配的颜色系列和同色系和补色系不同选择，曲线直观展示出色调和饱和度的变化幅度。
网站链接：https://www.eggradients.com/
网站介绍：Eggradients 是一款收录了最新设计趋势渐变色彩的配色网站，以鸡蛋的形式展现，支持一键复制。
预选颜色
渐变调色板
使用方式：选择适合自己设计场景的配色方案，复制即可。
网站链接：https://webkul.github.io/coolhue/sketch-plugin/
网站介绍：CoolHue 2.0是一款免费的 Sketch 渐变配色插件和收集工具。
使用方式：在sketch下载插件，直接点击插件，选择相关配色。
网站链接：https://www.ls.graphics/meshgradients
网站介绍：包含100多个免费的渐变色合集，支持 Sketch、PNG、AI、JPG、EPS 等多种格式下载。
网站截图
翻译截图
渐变截图
使用方式：可选择ai、eps、jpg、png格式，选择好看的渐变色下载即可。
网站链接：https://www.grabient.com/
网站介绍：Grabient 一个非常漂亮且实用的渐变网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。
网站截图
调整角度
调整颜色
渐变比例
使用方式：选择适合自己风格的配色方案，点开调整渐变梯度，下载即可。
后续仍然会给大家持续带来 #学UI网干货分享（其中包括在线配色网站、在线工具、插件等）
谢谢大家的持续关注！~
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
首先，探讨这个问题，意义何在？
笔者认为，有两点意义。
首先，作为用户，我们可以用到好用的产品；其次，作为从业者，我们可以找到学习的榜样。
明确了意义，我们再回到问题本身：怎样算是品质？如何判断？
个人认为，和周到一样，是否拥有高品质，也是用户的主观感受说了算。
在涉及体验细节的小需求上，避免所有的不周到，就是周到。
这是关于周到与否的判断，相对比较容易。但是关于品质与否的判断，笔者没有找到这么简单的判断逻辑。所以我们尝试换一种方法。
豆瓣的高分电影，比如《千与千寻》、《美丽人生》和《肖申克的救赎》，它们肯定存在不同之处，但同时也有一些共同特点（主人公都面临极大困境，但都心怀希望和目标，通过各种努力走出了困境）。
高分电影如此，高品质的交互设计，也是如此。
这一大段，就尝试去探索这些共同的特点，以便去发现、或者去验证，那些在交互设计方面拥有高品质的产品。
1 看着简单
之前在《以不变应万变：浅析信息架构》这篇中提过，只有简单，才能让用户马上找到掌控感、进而感觉良好。
高品质的交互设计，一定是要让用户感觉良好的，所以看起来一定是简单的。
2 用着顺
个人观点，互联网产品有两类较为特殊的初级用户，一类是零经验的三岁小孩，一类是智能手机之前没怎么接触过互联网的老人。
一般情况下，大家习惯把用户分成三类：初级用户、中级用户和高级用户。其中初级用户的使用经验最少。
高品质的交互设计，会让初级用户很容易上手。稍加练习之后，初级用户也会像中高级用户一样，用起来很顺。
iPhone 的交互设计是很优秀的，所以三岁小孩也能很快上手操作。
小孩的心智比较纯粹，没有受到社会大染缸的污染。用手机时他们会根据自己有限的生活经验去积极尝试操作。
老人和小孩则有点相反，部分老人可能思维比较固化，好奇心、积极性等方面都不如小孩，所以老人在用手机时可能会有点畏手畏脚。
微信作为一款交互设计十分优秀的产品，如今拥有智能手机的老人基本都在用。有的可能是自己学会的，有的可能是子女教会的。整体而言，笔者观察周围的老人，用微信用的还比较顺畅。
个人觉得，交互设计的高品质，是感性、理性和实践的完美融合。
曾经有人问巴菲特的合伙人查理·芒格，如果只能用一个词儿来形容你的成功，会是什么？芒格回答说，是“理性”。
老子曾经说过：“人生于世，有情有智。有情，故人伦谐和而相温相暖；有智，故明理通达而理事不乱。情者，智之附也；智者，情之主也。以情统智，则人昏庸而事颠倒；以智统情，则人聪慧而事合度”。
简·奥斯汀的小说《理智与情感》，虽然写的是小镇的恋爱与琐事，但背后折射出来的洞见——“要有真情感，更要用理智控制情感”，与老子的观点也是不谋而合。
做人做事，需要理性和感性。做交互设计，也是如此。
芒格、老子和简·奥斯汀，在强调做事业和做人方面，都是理性在先、感性在后。
做交互设计，就是在做用户体验，核心是用户的主观感受。所以笔者认为，此时是感性在先、理性在后。
交互设计里的感性，有两层意思。
第一层是微观层面，主要是性格上的敏锐度，比如我们平常听到的性格敏感、心思细腻等；第二层是宏观层面，也就是品位。
量变引起质变。微观上积累的多，才会带来品位的提升。
交互设计里的理性，其标志是做出正确的决策。
那怎样判断决策是否正确？
个人观点，有两块“试金石”可担此重任。
第一块“试金石”是来自最优竞品的检验，第二块“试金石”是自我检验。
最优竞品是一块很好的“试金石”。如果能和最优竞品一决高下或者“三足鼎立”，说明品质很不错；如果和最优竞品差距太大，则说明没有达到高品质。
然而现状则是，市面上的最优竞品，也就是交互设计方面达到高品质的产品，为数不多。这就意味着很多领域的产品是不存在最优竞品的，此其一。
其二，与其被动的等待最优竞品的检验，不如主动成为最优竞品。要做到这一点，则需要第二块“试金石”，也即优秀的自我检验能力。这个优秀的自我检验能力，其实也基本等同于做出高品质交互设计的能力。
实践就是一个反复试错、反复打磨、反复验证感性和理性的过程。
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网》交互设计：如何做到品质？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从上图来看，似乎UI交互设计还真是UI设计和交互设计的结合。不过具体区别如何，还是让我们来看看三者的对比吧！
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界面上。
UI设计相关人群：
UI设计师，界面设计师，网页设计师。
交互设计相关人群：
UX设计师，交互设计师，UE设计师，产品经理，网页设计师，产品经理。
UI交互设计相关人群:
UI设计师，界面设计师，交互设计师，网页设计师，UX设计师，产品经理。
从相关的工作人群来看，不同的设计工作类型，涉及的人群也尽不相同。UI设计的相关人群主要是工作中包涵该部分的人，除了专业的UI设计师，界面设计师，网页设计师等也是它的工作人群。而交互设计涉及的人群更广，交互设计师、UX设计师自然不在话下。另外，需要表达设计想法的产品经理运营人员也是其中一员。最后，UI交互设计所涉及的范围比两者稍广，包含了UI设计人群和大部分交互设计人群。
UI设计案例：
如上图所示，UI设计主要在于通过对用户界面的色彩，布局，文字排版等方面进行设计，以保证整体界面的美观。
UI交互设计案例：
小编这边选取了一个简单的UI交互作为案例，这个交互的效果是通过点击UI界面中按钮出现不同的图片。这种将交互体现在UI界面上的设计，就是UI交互设计。UI交互设计包含了各式各样的交互效果，如下列刷新、进度条、图片轮播等，小编就不再一一例举了。
交互设计案例：
而这种以人机互动为目的，注重用户体验的设计则称为交互设计。
从以上的案例不难看出，UI设计主要以界面美观为主，以静态的方式呈现居多（也有以动图动画形进行呈现）。交互方式是静态的。UI交互设计是在UI的基础上进行交互设计，以偏动态的形式存在。交互设计则以用户体验为主，以动态的形式存在。
UI设计工具：
PS（Photoshop）：适用于界面设计，图标设计，手绘等。
AI （Illustration）：适合创建徽标、图标、草图、排版和其他矢量图。
Sketch：适合图标、界面设计，支持多文件分层，切片等插件。
交互设计工具
Axure：老牌原型设计工具，适用于制作中高保真交互原型。
Mockplus：适合创建快速交互原型，简单高效，同时支持团队协作。
摹客：适合一键切图，生成智能标注，生成图层代码，交互演示，设计协作。
UI交互设计工具：
PS，AI，Sketch，Mockplus、摹客原型设计工具。
从使用的工具来看，UI设计主要以图形、图标、界面设计工具为主；交互设计主要以原型设计，交互设计工具为主；而UI交互设计则囊括了前两者使用的所有工具。
看完本文后，小编相信大家对UI交互设计，UI设计，交互设计三者的关系已经有所了解了。简单来说：UI是为了好看，交互设计是为了好用，UI交互设计就是好看又好用。如果想从事UI交互设计相关的工作，小编建议不妨在了解它们的基本定义后，开始学习一些技能知识，着手开始练习设计。这样可以帮助大家在UI交互设计的路上快速成长！
原文地址：慕客
作者：慕客产品协作设计
转载请注明：学UI网》UI设计、交互设计、UI交互设计的联系和区别是什么？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
标准圆环图
图表中间空心的部分用来展示数据的总数，用圆环的弧长和颜色表示不同数据的占比，图表旁边有图例用来解释说明。
布尔圆环图
布尔圆环图就像是给圆环图做了布尔运算，只表示正负两个值。
比如想重点突出完成率，就使用绿色圆环来表示68%的完成率，圆环其他部分为灰色，同理想重点突出反弹率，就使用红色圆环来表示83%的反弹率，圆环其他部分为灰色。
圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。
标签圆环图
悬停状态
在标准圆环图中，鼠标悬停在圆环图上时，跳出分段名称+百分比+数量值的弹窗。在标签圆环图中，悬停的圆环部分突出显示，其余部分淡出处理。
点选状态
图表段可以是交互式的，点击对应的分段时，右侧的图例也会同步高亮显示。
焦点状态
焦点状态和上面提到的悬停状态类似，唯一的区别在于，焦点状态选中分段后有一个放大+描边的圆环效果，突出展示数据。
空状态
当没有可用的数据时，应该在图表上表明这一点，并给出提示引导用户去点击。
错误状态
使用分类颜色
保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据，同色系颜色常用在直方图中。
最多使用五个分段
当圆环图包含多个数据分段时，图标会变得难以理解，为保证图标的清晰，尽可能将分段控制在 2-3 段，不要超过5段。如果数据过多，可以考虑使用柱状图、条形图等其他形式的图表。
保证数据准确
圆环图的所有分段加起来的数值应该始终为 100%，没有有多段数据占比过小，可以一起汇总到“其他”分段中。
按顺序排列数据
圆环图的份分段应从12点位置开始按最大值排序，然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。
不要将时间分段
原文地址：Clip设计夹（公众号）
作者：Clippp
转载请注明：学UI网》数据可视化图表设计指南：圆环图
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
-
let myChart = this.$echarts.init(document.getElementById('plant-charts'));
-
// 绘制图表
-
myChart.setOption({
-
tooltip: {
-
formatter: '{c}' //设置单位
-
},
-
//图例样式
-
legend: {
-
data: ['宽带情况', '数据量'],
-
textStyle: {//图例文字的样式
-
color: '#fff',
-
fontSize: 12,
-
padding: [0, 20, 0, 0]
-
}
-
},
-
grid: { //设置图标距离父级div的间距
-
top: "10",
-
left: "0",
-
right: "15",
-
bottom: "10",
-
containLabel: true
-
},
-
xAxis: {
-
type: 'category',
-
boundaryGap: false,
-
data: ['2015','2016','2017','2018','2019','2020','2021'],
-
axisLabel: {
-
interval: '0', //类目轴(category)中用数值表示显示间隔，0为显示所有，1为隔一个显示一个，以此类推
-
textStyle: { //文字样式
-
color: '#62799C',
-
fontSize: '12'
-
},
-
},
-
-
axisTick: { //y轴刻度线不显示
-
show: false
-
},
-
},
-
yAxis: {
-
type: 'value',
-
//show: false,
-
axisLabel: {
-
textStyle: { //文字样式
-
color: '#62799C',
-
fontSize: '12'
-
},
-
-
},
-
// 控制网格线
-
splitLine: {
-
// 改变轴线颜色
-
lineStyle: {
-
color: '#2a2a2d'
-
}
-
},
-
axisTick: { //y轴刻度线
-
show: false
-
},
-
},
-
series: [{
-
data: [5000,6000,7000,4400,3200,4500,6800],
-
type: 'line',
-
itemStyle: {
-
normal: {
-
color: 'rgba(62,139,222,1)'//线颜色
-
}
-
},
-
areaStyle: {
-
normal: {
-
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折线图颜色渐变
-
offset: 0,
-
color: 'rgba(62,139,222,0.6)'
-
}, {
-
offset: 1,
-
color: 'rgba(62,139,222,0.01)'
-
}])
-
}
-
},
-
}]
-
});
-
//图例
legend: {undefined
icon: "circle",
//icon形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none,
itemWidth: 10, // 设置icon宽度
itemHeight: 10, // 设置icon高度
itemGap: 40, // 设置间距
// top: '5%',//竖直位置
// left: 'center',//水平位置
x: 50,//水平位置
y: 200,//竖直位置
orient: "vertical",//设置显示顺序，默认水平（水平，竖直）
textStyle: {undefined
color: "#000"
},//文本样式
// 使用回调函数（设置文本显示内容，例如 加百分号）
formatter: function(name) {undefined
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0, l = data.length; i < l; i++) {undefined
total += data[i].value;
if (data[i].name == name) {undefined
tarValue = data[i].value;
}
}
var p = ((tarValue / total) * 100).toFixed(2);
return name + " " + " " + p + "%";
},
},
让信息架构，和产品架构，产生“化学反应”
这个信息架构的角度，具体而言，就是只包含一级频道的交互设计。
核心功能、辅助功能、重大功能，作为产品的三大类功能，更多是从发展的角度来划分。
除此之外，大部分 App 都还有一些非常基础的功能，比如“个人资料”、“我的收藏”、“设置”、“搜索”等，此类功能，我们称其为通用功能。
核心功能、辅助功能、重大功能和通用功能，是产品的四大类功能。
总的来说，本文主要以底部 tab 导航的 App 为例，探讨一下，如何在一级频道来落地产品的四大类功能。
01 宏观上讲，怎样更好的摆放四大类功能？
网易云音乐是我个人很喜欢的一款产品，日常用的也比较多。不过，它的新版（6.0 系列）给我的直观感受是，有点复杂了，我甚至在很长时间里找不到“私人 FM”这个以前常用的功能。
给我类似感受的产品，还有 Keep 和知乎。
究竟是什么，让我觉得，这些产品变得有点复杂了？
个人简单总结了一下，最直接的一个原因，是这些 App 都新增了重大功能，并给这个重大功能单独加了一个一级频道。
比如 Keep 的“计划”频道、知乎的“会员”频道、网易云音乐的“视频”和“云村”频道，都分别占用一个一级频道。
企业为什么这么设计？个人的猜测，这些重大功能于企业而言，很重要，要么肩负商业化使命，要么被寄予厚望，所以企业就单独给了一个一级频道。
这是一个相对简单的逻辑。但如果想要更好的去平衡用户体验和商业化之间的关系，那我们就需要考虑更多的因素。
之前在信息架构那篇文章里，个人的建议是，如果想让 App 始终保持简单，那就只保留 4 个 tab，也即只有 4 个一级频道。
如何将产品的四大类功能、以及未来很大概率会不断出现的重大功能，以接近最优的方式，安置在寸土寸金的 4 个一级频道上？
我想，这中间一定有一些原则，值得我们探讨和参考。
1 和重要程度保持一致
通常而言，重要程度越高，分配到的空间就越多。这是一个比较普世的道理。
也就是说，这条原则，主要会影响到，四大类功能，各自占用多少空间比较合适。
我们有 4 个一级频道，每个一级频道代表了 25% 的空间。
再来看四大类功能，按其大概的重要程度，简单的分析一下。
先说核心功能，这个最重要。
核心功能是立足之本和护城河。先换个角度看这个问题，假设有三种可能，即核心功能可以占用一个、两个或三个一级频道。
先用下排除法。三个一级频道难免显得过多，剩余的三种功能挤在一个一级频道里也会显得过分拥挤；一个一级频道的话，倒也可以，但是平分四分之一的空间很难体现出核心功能的重要性。
相比之下，两个一级频道就显得较为合适。
综合考虑到有四大类功能，通常两个一级频道也不会完全给核心功能所用。
所以，核心功能，大概占用一个半一级频道，也即 40% 左右的空间即可。
再说通用功能，这个比较容易。
此类功能通常比较多，重要程度可能不及重大功能，但是又不能没有，所以通常我们也会单独给一个一级频道，就是“我”或者“设置”之类的一级频道，大概占用 25% 的空间即可。
第三，说下重大功能，这个比较重要。
通常而言，重大功能的重要性仅次于核心功能，而且重大功能可以有多个，再考虑到通用功能一般单独占用一个一级频道。
那么，相对而言，重大功能，完全可以单独占用一个一级频道，甚至更多，大概占用 30% 左右的空间即可。
最后，说下辅助功能，这个比较特殊。
首先，很多产品是没有辅助功能的；其次，辅助功能是个小功能；最后，辅助功能的数量一般也不多。
总的来说，辅助功能是没有必要单独给一个一级频道的。再考虑到 4 个一级频道所剩空间已经不多，所以，辅助功能一般和重大功能共用一个一级频道即可，大概占用 5% 左右的空间。
2 和使用频率保持一致
通常而言，用户用的越多的功能，就排的越靠前。
也就是说，这条原则主要决定四大类功能的排序问题。
具体而言，用户用的最多的是核心功能，所以核心功能最靠前。
重大功能和通用功能，有时候很难说哪个使用频率更高，比如微信里的“搜一搜”和“收藏”。但是比较明确的是，很多 App 在诞生之初，并没有重大功能，只有核心功能和通用功能。
所以自然而然，通用功能排在了核心功能后面。
个人有个猜测，一方面，有时候很难说清重大功能和通用功能，哪个使用频率更高；另一方面，通用功能起初是排在最后的。
所以，当重大功能出现时，就延续了旧传统：通用功能依然排在最后。最终结果就是，重大功能和辅助功能排在中间。
值得一提的是，现在市面上开始出现两类现象。
其一是，有一些拥有 5 个一级频道的 App，开始把核心功能放到中间那个频道，比如 Keep 的“运动”频道。
其二是，企业开始人为的控制打开 App 时默认展示哪一个频道，而且默认显示哪一个频道，存在多种情况，例子依然包括 Keep：以前默认显示中间的“运动”频道，现在默认显示“计划”频道。
个人觉得，对企业而言，这两类做法，都是得不偿失的。
因为这样做，会让 “从左起，1、2、3、4”这个排序失去价值。没有这个前提，也就谈不上“和用户的使用频率保持一致。
而且，这种默认不显示左边第一个频道的做法，有时候会让用户产生一种被绑架的感觉（默认显示收费频道），有时会让用户感觉企业在自作聪明（默认没显示收费频道，但也没显示核心频道）。
3 符合用户预期
主要有两个预期，逻辑预期和习惯预期。
3.1 逻辑预期
用户确实很懒，但不代表用户不会思考。
比如前文提到的，网易云音乐的“私人 FM“功能，在我的认知里面，”私人 FM“和”每日推荐“一样，都是个性化推荐，性质极其相似，应该放在一起。
所以，当我在新版里的“每日推荐”旁边找不到“私人 FM”时，心里就觉得很奇怪很不解，心想这么好的功能不会是给删了吧。
后来某一天，当我在第三个一级频道“我的”里面发现“私人 FM“的时候，我又觉很别扭，不好用。
在新版里面，一开始我是去“发现”频道的“动作库”找的，怎么找都找不到，跟找不到网易云音乐的“私人 FM“是一样的心情。
因为我觉得，“动作训练”和“动作库”，是很接近的一对事物，从逻辑上来讲，用户会觉得这俩事物挨在一起，或者会猜他们是不是挨在一起。
3.2 习惯预期
这里的用户习惯，主要有两类。一类是自家产品培养出来的，一类是市面上的产品培养出来的。
通常情况，一级频道的设计，是要符合用户习惯的。
最忌讳的情况是，自己一手培养的用户习惯，到最后自己再一手去打破，这样很容易引起用户的烦躁、不满和失望等负面情绪。
比如 3.1 段的两个例子，同样也没有符合用户的习惯预期。因为在最开始，网易云音乐的“每日推荐”和“私人 FM“是挨在一切的，Keep 的“动作训练”和“动作库”也是融合在一起的。
4 良好的扩展性
就一级频道而言，重大功能和通用功能是最有可能扩展出更多子功能的。所以，就扩展性而言，需要重点照顾到这两类功能。
通用功能大部分都收纳在“我”这个一级频道，通常也是一个列表的样式，天然自带良好的扩展性。所以，扩展性的难点和重点，最后是落在了重大功能这里。
在一级频道，重大功能的展现形式，通常有两种。
一种是像核心功能一样，直接把重大功能的内容铺陈出来，典型代表是网易云音乐的“云村”。另外一种是把各个重大功能都收纳起来，只展示一个入口，典型代表是微信的“发现”频道。
对企业而言，现实问题是，当重大功能的数量上升到两个、三个甚至更多时，如何展示他们？
市面上的常规做法，也是两种。
一种是像网易云音乐和 Keep 这样的，直接开辟一个新的一级频道，供重大功能使用。还有一种是微信这种，把所有重大功能都收纳起来，有新的重大功能出现时，新增一行列表即可。
个人推荐微信这种做法，因为这种做法的扩展性最好，可以应对无穷尽的重大功能。
至此，我们简单总结一下。个人看法，四大类功能，具体咋摆放，并没有标准答案，但是可以参考以上 4 个原则。
02 微观上讲，有没有补充和例外？
有。借这个话题，聊两个比较特殊的问题。
1 顶部标题栏的两侧，适合放什么功能？
先来分析一下这个位置，顶部标题栏的两侧，位于屏幕的左上角或右上角，是个很显眼的位置。
个人认为，有三类功能比较适合这个位置。
第一类，是和当前页面内容有密切关系的功能。比如“编辑”型功能，可参考微信读书“书架”频道的“编辑”。再比如“新增”型功能，可参考 Twitter 首页信息流的发推图标。此类功能，最适合这个位置，而且一般也没有更合适的位置来摆放他们。
第二类，是比较高频的通用功能或重大功能，比如搜索、消息、设置等。
第三类，是某些高频功能的快捷入口，比如微信的扫一扫和收付款。
除此之外，如果是一个比较低频的功能，不管是通用功能、重大功能还是辅助功能，放在这里，都不合适，因为会对用户形成打扰。
2 一个功能，最多可以出现几次？
大部分功能，在 App 里只会出现一次。但在日常使用各种 App 的时候，我们也会多次看到同一个功能，在不同的地方。
有时候，能看到三次，比如搜索，在微信、知乎和网易云音乐都出现了三次，我们也不会觉得哪里不对劲儿。实际上，搜索虽然出现了三次，但也没有引起我们的特别注意。
还有一些功能，是出现了两次。我们在第二次看到的时候，会有点烦躁，心想怎么又来了；有时候会有点困惑，心想下次我该用哪一个，哪一个最快捷。
这中间有什么原则可以参考吗？
先来看下搜索，在微信、知乎和网易云音乐，都是比较高频的功能。换句话说，用户在不同的一级频道，都有可能需要搜索一下，所以搜索出现三次，在不同的一级频道，是有这个需求存在的。
搜索以外的功能，个人认为，只有一类适合出现多次，通常两次足矣。
那就是，此类功能确实比较高频，同时路径又比较长，使用起来不够方便。这时候，就适合给此类功能一个快捷入口。这个快捷入口，一般是出现在标题栏。
一个功能，如果只是单纯的重复出现两次，两次都没出现在标题栏。那给用户的感觉，就是，App 并不是在给我提供快捷入口，而可能只是通过重复的方式来强推这个功能，就容易产生烦躁和困惑的负面情绪。
文章来源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户体验四维度的概念、价值以及相互之间的关系
用户体验，是用户在使用产品过程中建立起来的一种纯主观感受。
解读用户体验，可以有很多视角。本文提供一个以人为本的视角：用户体验四维度。具体如下。
HI X：Human Interface Experience，人与界面的交互体验。
HC X：Human Content Experience，人与内容的交互体验。
HH X：Human Human Experience，人与人的交互体验。
HB X：Human Brand Experience，人与品牌的交互体验。
用户体验四维度
01 四维度的概念
怎样判断一款产品有几个维度？这就要从四维度的概念说起。
1. HI X（人与界面的交互体验）
HI X 是指用户在浏览、阅读、操作界面过程中产生的主观感受。
HI X 既受信息架构、交互设计和UI设计的影响，也受根需求和功能架构的影响。主要依托手机和电脑的互联网产品，天然存在界面。所以，HI X 属于基础属性，所有产品都有。
2. HC X（人与内容的交互体验）
HC X 是指用户在消费内容时，内容本身带给用户的主观感受。
这里的内容，既包括衣服、鞋子等实体商品，也包括文章、图片、视频等虚拟内容。诸如淘宝、网易严选等电商产品，以及公众号、Instagram、抖音等 UGC 产品，都具备 HC X 属性。
3. HH X（人与人的交互体验）
HH X 是指用户与其他用户、产品工作人员沟通交流时产生的主观感受，或产品的社区氛围、沟通氛围带给用户的主观感受。
所以 HH X 有两层含义。第一层发生在用户与用户之间，是指当用户扎堆或沟通交流时，交流氛围、交流内容带给用户的主观感受。第二层发生在用户与产品工作人员之间，是指当产品依靠人力向用户提供咨询、售后、配送等服务时，产品工作人员的服务行为带给用户的主观感受。
关于第一层含义，不管是更强调社区属性的产品，比如天涯社区、豆瓣小组、百度贴吧，还是更强调内容属性的产品，比如公众号、微博、小红书的笔记，都具备 HH X 属性。
关于第二层含义，常见的 HH X 由客服人员提供。如果是电商产品，提供人员还包括快递员和售后人员等。
4. HB X（人与品牌的交互体验）
HB X 是指当用户想起、谈论起品牌，或使用品牌的产品、体验品牌的服务时，品牌带给用户的主观感受。
只要一款产品做成了品牌，它就有 HB X 属性。
HB X 会直接影响到我们是否信任、喜欢一个品牌，以及是否会使用它的产品和服务。所以，我们对 HB X 往往会有一个抓重点的综合评价。就像一个外向活泼的女生，虽然在外向程度方面和一个内向安静的男生不一致，但双方也可能会选择在一起，因为内向、外向并非双方关注的重点。
因为 HB X 牵涉到对品牌的综合评价，所以就像工作都有一段试用期、恋爱都有一段了解期一样，HB X 的形成往往也需要较长时间，通常至少要 3~5 年。
02 四维度的价值
每一个维度，各有什么价值？
1. HI X（人与界面的交互体验）
作为基础属性，HI X 的价值主要体现在以下两方面。
如果是一款只具有 HI X 属性的工具型产品，比如视频会议产品 Zoom，那于这款产品而言，HI X 就是一切，这款产品的成败也几乎完全取决于 HI X。
如果是一款同时具有 HC X、HH X 属性的内容型社区型产品，比如 B 站、快手这些视频类产品，那此时的 HI X 就会扮演一个类似交通出行（基础设施）的角色。如果 HI X 比较差，这个“出行”过程就会像出去玩时的塞车一样，让人难受；如果 HI X 很优秀，这个“出行”过程就会像准点的高铁、飞机一样，又快又爽。
2. HC X（人与内容的交互体验）
HC X 主要从内容层面影响用户满意度。
如果 HC X 比较好，用户消费时的决策时间就会被大大缩减，同时用户满意度也会比较高。比如淘宝上就有一些原创设计、质量不错、价格不贵的精品小店，很受欢迎。我们去网易严选、优衣库天猫旗舰店这些质量不错、设计不错、价格适中的店铺买 东西时，也会很快很省心。
以上说的是电商产品，对于 UGC 类的内容产品，也是类似的道理。比如站酷上的首页推荐和编辑推荐，相对而言，HC X 比较不错，所以看这些内容的用户也会比较多。
3. HH X（人与人的交互体验）
HH X 是用户情绪的最大影响因素，在情感方面对用户具有最大吸引力。物以类聚，人以群分。HH X 良好的产品，会像一场谈笑风生、其乐融融的聚会，吸引用户去扎堆。
良好的 HH X 往往意味着良好的氛围，它不仅能带给我们诸如轻松、愉快等积极情绪，还能在一定程度上带给我们一种归属感。最终的结果，就是我们喜欢用这款产品。比如 B 站的 HH X 就比较好，具体而言就是弹幕氛围比较欢乐友好，这样的氛围带给用户的感觉是比较好的，用户也喜欢在 B 站就着弹幕看视频。
4. HB X（人与品牌的交互体验）
HB X 事关品牌能不能以正面形象住进用户心里。
良好的 HB X，往往意味着良好的品牌美誉度和忠诚度。HB X 良好的产品，就像你信任和喜欢的男/女朋友一样，他/她会在你心里占据一定的分量和地位，让你乐意介绍给家人和朋友认识。比如苹果的 Mac，就有很高的品牌美誉度和忠诚度，用户也很乐意把 Mac 推荐给身边的朋友。
03 四维度的关系
四维度之间存在怎样的关系?
1. HI X 是另外三个维度的基础
HI X 作为基本维度，相当于“水之源，木之本”。如果把用户体验四维度比作一个金字塔的话，塔底的基石一定是 HI X，塔尖则是 HB X。
2. HC X 通常是 HH X 的基础
HH X 的产生，通常离不开 HC X。也就是说，通常得有一个合适的“内容”或“主题”，才能把人聚拢过来。比如结婚的时候，你可以邀请到很多亲朋好友来参加婚礼，但在平时，你很难邀请到这么多人。我们在 B 站看视频的时候，弹幕通常比较欢乐友好，氛围不错，但如果没有这些视频，也就不会有这些弹幕，以及不错的社区氛围。
3. HI X、HC X 和 HH X 共同构成了 HB X 的基础
HC X、HH X 和 HI X 一样，都可以成就 HB X。
以早期 Keep 为例，刚开始只有课程这个功能，也就是说只有 HI X 和 HC X 这两个属性。其中，HI X 还可以，HC X 比较优秀。在此基础上，慢慢发展出了社区功能（HH X 属性），而且做得不错。再往后，有了“自律给我自由”的品牌精神。在课程、社区、品牌精神等因素的助力下，Keep 有了不错的品牌美誉度和忠诚度。也就是说，HC X、HH X 和品牌精神等因素，一起成就了良好的 HB X。
4. HB X 也可以仅有 HI X 这一个基础
有些产品并不具有 HC X 和 HH X 这两个属性，而是仅有 HI X 这一个属性。单凭一个良好的 HI X，也可以成就良好的 HB X。
比如 Zoom，作为一款开视频会议的工具应用，它最初只有 HI X 这一个属性。但是因为很好用，HI X 很优秀，所以如今的 Zoom 即便没有内容（HC X）和社区（HH X）属性，依然成了一个在全球都很受欢迎的品牌，拥有了不错的 HB X。
总的来说，在四维度的金字塔里面，它们的关系如下图所示。
文章来源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com