一、官方规范
对于刚开始思考 UI 元素尺寸的新人，通常第一反应都是去看官方规范，新人都以为官方设计规范的作用就是告诉你们元素的大小和怎么设置，只要看完了就能懂得如何设计 iOS 或 Android 应用。而实际上，这些规范并不能帮助你们解决这个问题，因为设计规范涵盖的内容远远比这些复杂，比如我们之前翻译过的 iOS 规范。
我们想要搞清楚 iOS 和 Android 官方元素的具体尺寸，最好的方法就是去下载它们的官方 UI-Kits，如下图的安卓组件库所示。
官方并不会提供一个列表，逐一罗列每个元素的长宽和其它参数，所以想要弄明白参数的问题，要自己在这两套素材库中选中元素才能查看其尺寸。如下图左侧这个按钮，我们就能看见它的各项属性：宽 359pt、高 57pt、圆角 14pt；右侧的 Alert 提示框则宽 270pt、高 230pt、圆角 14pt。
因为 iOS 组件库下载下来的都是 dmg 格式的文件，很多 windows 用户不知道该怎么打开它，这里只需要百度搜索「DMG 提取器/查看器」就能下载到专门的解压工具了。
在初期，我们想要设计出符合官方规范的界面，就可以严格照搬官方的元素设置。但是，即使官方的源文件所包含的元素及字体已经非常多了，在实际设计过程中，还是会出现它们无法覆盖的元素类型，需要依靠我们自己去给出尺寸。
还有如字体的应用，官方源文件使用的语言是英文，光是官方应用的两种 SF 字体，就包含了十几种字重，所以我们可以看见文字应用面板中密密麻麻的字体类型。在真实的中文设计场景下，我们是不可能照搬这种规范的！
所以每一个学习UI设计的新手，都必须要明白，官方的规范终究只是一种建议，我们可以选择遵守也可以选择不遵守。如果一味的照搬这些内容，我们是无法设计出有趣个性化的界面的，比如下面这几款已经看不到 “ iOS 设计 ”的应用。
官方的参数决定我们设计的下限，当你不知道该怎么做，或者设计的目标就是以系统原生的体验和视觉为准，那么照搬就行了！后面文章要说的，就是脱离开这些束缚之后，该怎么自定义 UI 元素的尺寸。
二、尺寸设置原则
UI 和平面不一样的地方，就是极其关注元素属性的具体数值。平面的排版无论是海报或画册，使用百分比、目测的形式就足以让我们做出很多优秀的作品，无需紧盯着其中出现的每个元素的长宽高的数值。而 UI 的设计中，无论字体、图标还是按钮，都需要我们严谨地定义它们的长宽高，如下图设计一个按钮的操作：拖拉出矩形之后，我们依然需要到属性设置的对话框中去输入精确到1pt的数值。
这么做是因为在电子屏幕中，图像的呈现是由屏幕中的像素点来完成的，像素点是最小的显示单位，一个像素只能显示一个颜色，所以如果设置了带有小数点的数值，那么这个元素的边缘就会虚化。所以为了避免这种情况的出现，我们就得用整数来定义元素的长和宽。
这当中还涉及到不少比较复杂的屏幕显示原理问题，尤其是和像素倍率相关的基础知识，我会在另外的文章里分享。
需要注意的是，文章中出现的所有尺寸数值的单位，默认以 iOS 官方规定的逻辑像素单位「pt」为准，即 XD 和 Sketch 默认画布的单位，若在 PS 中设计需要在这个基础上乘以 2。
只有分隔线，是唯一可以不使用整数的特例。因为 1pt 的分隔线看起来会非常粗，一点也不精致，感兴趣的同学可以自己在 Sketch 或 XD 中画个列表然后用 1pt 的线条做分隔，再导出到手机里观看效果。即使是官方应用，也主要使用 0.5pt 的线条做分隔。
无论是在 iOS 还是在 Android 的规范中，都提到过使用 8 x 8 的网格做辅助，这导致网上有很多片面的文章会反复强调对元素的尺寸使用 8 的倍数。
iOS: 使用 8px 网格系统：网格系统可以让线条和图像内容在所有尺寸上保持清晰，无需太多的修饰和锐化。将图形边界对齐到网格上，减少按比例缩小图像时出现的半像素和内容模糊的情况。
Android：所有组件都与间隔为 8dp 的基准网格对齐。排版/文字与间隔为 4dp 的基准网格对齐。在工具中的图标同样与间隔为 4dp 的基准网格对齐。
实际上，我们在真实的设计环境中，建议大家使用 4 的倍数作为一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好处我会在后面的文章中做说明。如果发现 4 的倍数无法满足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我们就可以使用一般的偶数如18、22、26 等。
以上就是我们一开始要建立的元素尺寸原则，精简完即：
使用整数，只有分隔线可以使用 0.5 的小数
使用 4 的倍数，根据实际情况可以切换成一般偶数。
有了这样的原则，并养成习惯，我们就能在每次设计前对元素尺寸有个大致判断，然后再根据需要按 4 的倍数调整
开始我使用 280pt 宽，44pt 高的尺寸，但是觉得有点僵硬，太正式了！这时候反思认为应该是输入框太矮导致的，所以高度上改成 44+(4x2)=52pt 。这时候又觉得太高了，实际输入内容也没那么宽，于是再对高减 4，宽减 40，获取最终结果。
所以，因为这样的操作原则，决定了 UI 元素的尺寸不是凭感觉用鼠标拖拽出来的（拖动效率太低），而是在元素的属性栏中填入它们的数值。UI 的设计过程就是一个不停键入参数和调整参数的过程。
这里要声明，在我的描述体系中，控件指的是：界面中最基本的交互单位，如按钮、滑块、开关、分页控件等，更复杂的如动态卡片，功能快速入口等，就归入组件中，便于我们理解。
下面，我会根据前面定义的基础原则，分别讲解控件应该使用的尺寸范围。
一、按钮 ( Buttons )
按钮是界面交互操作中使用最频繁的控件了，当然按钮呈现的形式也多种多样，比如可以是文字、图片、图标、卡通形象等等。在这里，我们只聚焦于矩形的基础按钮。
在进入具体参数的讲解前，要先理解一点，按钮实际上是所有控件中最复杂的一个。并不是因为在设计样式上复杂，而是因为按钮承载了最多的产品诉求，权重差异极大，例如看下面的案例。
在上图里，可以点击的东西不少，我们只说外观是标准样式的按钮，就有 9 个。而这里面，权重最高的必然是 “加入购物车”。权重最低的，则是前往新品页。
要定义按钮尺寸，我们首先需要整理清楚不同的按钮在界面或整个应用中的权重。尺寸和权重是成正比关系的。当然，颜色也是对重要性表现的关键因素，不过不在这里展开。
按钮高度
当我们设计按钮时，优先从高度入手，再去定义宽。为了便于新手理解，我首先从高度上来匹配权重，分成高、中、低三类：
- 高权重：40-56pt
- 中权重：24-40pt
- 底权重：12-24pt
高权重的按钮，类似登录页的注册、登录，购物详情页的购买，流程页中的下一步，它们的最小高度应该从 40pt 开始递增。低于这个数值，那么按钮就很难在页面中起到视觉支撑的作用，因为会感觉到它太细了。
中权重的按钮，类似个人主页的关注、点赞、评论按钮等。这个层级的按钮依旧有比较高的交互频次，所以我们必须得保证它易于点击。24pt 是在我经验中便于点击得最小尺寸了。这种按钮通常是组件中的一部分，不像层级最高的按钮常常是处于一个孤立的空间，所以高度如果超出 40pt，就会对当前模块产生直观的破坏。
低权重的按钮，就类似查看更多、标签、详情等类型，相对于交互属性，这类按钮具备更多的提示属性，只要让用户能看见，又不需要太显眼。尺寸不大于 24pt，能容纳内部文字或图形元素即可。
按钮宽度
主流的按钮都是横向的长方形，正方形的也有，但就是不能变成纵向的矩形。
按钮的宽度主要和内容挂钩，内容数量越多，按钮自然也就越宽。唯一的例外，只有高权重的按钮，可以无视内容的长度。因为它们需要更多的区域，往往都是撑满屏幕内容区域或横跨屏幕的，可以特殊处理。
普通按钮，左右边界与内容的距离过大，就会让按钮看起来非常的不协调。所以我们要根据内容的长度来设置按钮的宽。左右间距的大小，应该小于或等于上下间距的 2 倍。
按钮圆角
最后，按钮尺寸还有一个属性，就是按钮的圆角。矩形的四角有三种类型，即直角、圆角和半圆。
为矩形设置圆角，是为了让按钮看起来有一定的圆润感不会显得太尖锐锋利，这种圆角的数值要给得更加谨慎，只要超出了一定的范畴，就会对视觉的和谐产生影响，我习惯称呼为——半圆不圆，如下图右侧的错误案例。
所以，我们在设计圆角的过程中，一定要仔细感受圆角在画面中的和谐性。而圆角的设置范围，小于等于高度的 1/4。例如，一个 24pt 的圆角矩形，圆角的尺寸就应该不大于 6pt。
以上就是按钮相关尺寸定义的说明，当然，在真实的设计需求中可能遇到很多无法满足的情况，这就需要大家多做尝试了。
二、输入框 ( Text Fields )
输入框也是比较常用的控件之一，它和按钮有非常接近的外形。最常见的就是登录页账号密码输入框，以及首页上方的搜索栏了。
输入框的高度，常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤，比如我用下面学生的案例做个演示。
三、步进器 ( Steppers )
常见的步进器，就是输入框和按钮的结合。左右有两个用来增加数量的按钮，中间是允许我们直接键入数字的输入框。在尺寸上，它也介于两者之间，高度在 28-40pt 之间。下面我再用学员的作业做次演示，当低于 28pt 以后，就会发现在屏幕中的占比实在太小了。
步进器中常见的错误，是在我们在绘制左右两个按钮，设置外框的圆角时，并没有合理的去掉内侧的圆角，这是绝对不应该忽略的细节。
四、下拉菜单 ( Dropdown Menus )
下拉菜单要注意它具有多种状态，默认、展开和选中。默认状态与输入框类似，主流的高度也使用 36-56pt。但是，当菜单展开后，下方多出来的选项菜单，就值得注意了。
菜单的宽度正常情况下与默认状态相同，而高度根据里面包含的选项数量决定。单行选项的高度，不大于默认的选项框。但也不能过小，新手很容易在弹出菜单中设定过小的高度，使个控件看起来会非常的别扭。
五、开关 ( Switches )
开关也是按钮的一种形式，通常出现在设置页的列表中，上方就是它主流的几种样式。在设计开关的时候，要先确定一个矩形区域，高度使用 24-32pt，宽度则用 1:2 的比例。如高度使用 28pt，那么宽大致可以使用 56pt，之后再将其他细节填入。
六、滑块 ( Sliders )
滑块形式接近开关，通常在中间有一个操作节点，下面有一个用来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。
节点如果做的太小，不仅会显得难看，而且会让人觉得很难操作。它的直径应该在 16-28pt 之间。而下方的横线，宽度由所在内容区域的宽决定，高度一般在1-4pt 之间。
七、页面指示器 ( Page Controls )
指示器用来展示元素序列，虽然在 APP 中没有太重要的作用，但既然我们加进去，就要让它看起来和谐。大多数人在定义指示器时，不是太大，就是太小。可以只从后面提供的尺寸中选择，就能保证指示器的尺寸不会出错。
指示器主要是圆形和矩形两种形式：
- 圆形：8、10、12pt ( 直径 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示红点 ( Badges )
提示红点也是大多数应用会使用的一个控件，它的大小应该在 24-32 pt 之间。作为一个圆形，这个控件设计起来很容易，但设计师往往忽略一件事，那就是如果中间的数值超过 10 变成 2 位以后，要怎么处理。
在设计这样的元素时，我们要用一个矩形元素来表现，即画一个正方形，然后将圆角设成最大，那它看上去就是一个圆形。那么每增加一位字符，我们就需要为这个矩形增加该字符的宽度，可以用左右间距判断。
因为相同字号下，不同英文、数字的宽度都是不一样的，所以我们要根据实际输入的字段长度去决定圆角矩形的宽度。
九、分页控件 ( Tabs )
后一个控件，就是分页控件了，安卓中的 Tabs。这个元素在设计时也受到排版空间的影响。较为宽松的排版风格，高度就比较大，若拥挤则反之。下面是高度的取值：
- 高权重：40-48pt
- 低权重：28-36pt
分页控件主要应用在头部和页面中部的组件中，如下方的案例：
虽然很多时候分页器没有背景色，但是背景的矩形框是必须画出来的，即隐藏填充和描边，这样我们就可以通过垂直居中的方式，来确定中间文字的位置。
一个完整的分页控件，里面会包含两个或以上的选项，所以定义每个选项的宽是必要的。通常，我们有两种定义方法，一种是选项少时，直接进行均分显示，另一种是选项较多，采取定宽模式，宽度最小建议在 64pt以上，才不会显得过度拥挤。
分页控件选项处于选中状态时，有的设计是修改背景色，有的是修改文字属性，但今天最常见的就是加入下划线。这个元素如果定义得不好，会让整个控件看起来非常粗糙，它需要在样式中能起到画龙点睛的作用。
下划线分为两种，一种是贴在控件底部的，另一种是在文字下方悬浮的。两种方式线条应该使用的高度都不应该大于 2pt。宽度的话，前者和每个选项背景区域相等，后者则可以在 8-16pt 间（小于文字总宽）。下面是正确设计效果：
十、尾声
前面说到了不少控件的尺寸，那么真实应用的效果会如何呢？下面我就用原型的方式，不考虑样式与色彩将它们组合到完整的页面中去。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从视觉空间、字体性格、颜色情绪三个大方面来谈一下我对视觉知识的部分理解！目录如下
空间感：空间感( sense of space)是指艺术形象通过一定手法引起的类似现实空间的审美感受。艺术家通过特定的瞬间造型和空间深度的追求，使人联想到其活动、生活的环境空间。在绘画、摄摄影艺术中，形象存在于二维平面中，但通过构图、透视、线条走向、光影和色彩处理，使人感受到空间的整体性、立体性。
而在我理解总结，空间感其实就是运用各种手法，打造出画面的空间纵深感，让二维的画面变成三维，从而提升画面的品质、细节、冲击力。
我们以人物海报为例对比几张图，直观感受一下：
无空间感：
有空间感：
我们直观的可以看到，都是人物海报，下面的两张明显更有品质感。有空间感的图，画面会更高级。
那是因为空间感会让你的画面更有层次，更灵动和富有场景感。这就是空间感的有点。
空间感，其实就是打造画面纵深，让元素之间形成前后关系，那有哪些方法来打造画面纵深呢？我们总结了5个方法来分享给大家：
1.3.1 构图
富有极强透视线的构图能很直观地表现出空间感。
比如
这类
这类拥有很强透视的构图，不用做别的，光构图就能体现出很强的空间感了。
实际运用中，我们还可以利用标题文案排列出这种透视构图来打造空间感：
1.3.2 虚实
虚实分为：
1.轮廓虚实
2.颜色虚实
轮廓虚实：两个相同的元素，轮廓模糊的在空间上会感觉处于轮廓实的元素后方。
这是两个元素，放到一起就会感觉上是在同一个平面上的。没有虚实关系。
如果把其中一个圆的轮廓虚化：
是不是就会感觉出右边的会在左边的前面，拉出了前后的空间感。这就是我们的轮廓虚实了。
颜色虚实：越贴近背景色的颜色，在空间上会感觉处于后方。
还是这两个元素，如果把其中的一个颜色调成和背景贴近：
两相比较，颜色更实的飞碟，会处于颜色较浅的飞碟前面。
1.3.3 大小
越大元素会感觉越近，越小的元素感觉越远。
在实际操作中我们一般可以利用不同元素来制作这个效果。
比如这是一堆元素，如果大小都差不多，就会感觉是平铺在一起的，没有空间关系。
如果调整它们的大小， 重新摆放，通过近大远小的原理，就可以很轻易地打造出元素之间的前后关系，从而营造出空间感了。
大小对比空间再其他画面中的应用：
1.3.4 明暗对比
除了虚实、大小之外，明暗也能对比出前后关系，从而营造空间感。
通过纹理层次的明暗对比，一明一暗的对比，也能拉出前后关系。从而营造空间感。
1.3.5 穿插
利用元素相互穿插产生的前后关系，也能营造出空间感。
这是1个元素和两个圆的平铺，没有交集。
如果我给他们穿插重叠在一起：
那就能产生元素之后的叠压前后关系，从而也能营造空间感。
利用在海报中：
以上这五种方式就是我们今天分享给大家的方法啦，
在视觉海报的打造中，基本都不是只靠其中一种方法去打造空间感，而是3种，甚至5种一起运用，可以让塑造的空间感的更有层次细节和冲击力。
比如：轮廓虚实+颜色虚实+大小，或者：穿插+大小+明暗。
大家一定要灵活运用，自由组合，以画面最优效果为目标去做，不要局限在某一个框架里。
字体也有字体的性格，不同的字体会呈现出不同的字体性格特征，比如高矮胖瘦、敏捷、邪恶、可爱、优雅文艺等等等等。通过精准地对字体的结构，笔画粗细，细节调整，字体效果等的处理表现字体的差异化，使字体的性格调性，与画面内容相匹配。
2.2.1 力量感、沉稳
特点：横细竖粗/留白少/重心偏下/转折笔直
2.2.2 可爱
特点：圆润/不规则/扩张
2.2.3 优雅
弧度/纤细/重心偏高
2.2.4 活力
特点：倾斜/笔画延伸/笔画干脆，转折弯曲很少
字体还有各种各样的性格，比如魔幻、哥特、血腥、恐怖等等。
我们在做项目的时候，字体的感觉就一定要抓得准，符合整个画面的调性：
比如这种欧式哥特的画风， 字体就可以加一下哥特元素，点缀点玫瑰、藤条。
刚硬科技的画风，字体笔画就可以粗一些，添加点科技感和几何图形，营造超前科技的感觉：
植物自然的风格笔画就可以柔和一些，带有弧度，把一些画面元素图形化点缀在上面：
2.3.1 字型特点的提取
具体实操怎么做的呢？我们今天就给大家分享一个案例，看看是怎么操作的：
这是一张视觉，我们要给他做一个主标题，这个主标题的字型特点应该如何从图里提取呢？
我们要提炼出三个点出来才能知道如何去做：
1.风格
我们先分析这张图，它的一个风格是有点魔幻+复古，神话传说加西域古代的一种史诗感。
我们可以找一些神话类史诗的类似的参考看看：
特征：
1.复古
2.重心高.
3.不用那么特别复古可用衬线体变形
2.特征
这个我们可以从人物身上去提取，人物有盔甲，我们可以把盔甲的特征提取出来：
3.配色
颜色也不是乱选的，一定要和图能呼应关联起来，那颜色怎么选呢？其实画面里已经帮我们选好了配色。我们观察一下画面：
整体偏冷调，墨绿色居多。，对比色有红色和黄色。
那我们为了突出字体，又能和画面呼应，那黄色就是再好不过的选择了。
那到这我们的设计目标就比较明确了：
2.3.2 字型设计
1.基础字型：
虽然是往复古了去做，但也不是真做成甲骨文，还是结合一下使用场景，和识别度。参考中也有部分是使用宋体去变形的，所以我们可以先选一个宋体的字体出来当做基础字型。
为了保证识别度，我们可以只做部分复古。
这里我挑灵下面“火”字，因为这个字处在中间，比较显目。
2.调整重心
参考复古类型的字体重心都会往上偏移，让字体稍显长一些。
3.加入特征
（1）锋锐：默认字体上有很多圆润的地方，我们都改成尖锐的感觉。
把每一个笔画都改掉：
（2）弯曲的尖角：
图形提炼：
加入到字体当中：
字型到这里就完成啦。
（3）字体转折的厚度：
字型完成了，字体转折的厚度我可以再字体效果上去做。在笔画中间加一个层次，以明暗分隔开，以实现盔甲上这种转折的厚度：
全部加上，看下完成效果：
结合到画面中看下：
效果还是很不错的，整体风格也比较统一。
这一块就是关于字体性格的内容，我们继续往下看！
接下来我们来说下关于颜色情绪的问题！
配色感觉不对？颜色脏？配色不高级？
这些问题一直困扰着我们。应该怎么配色呢？其实颜色也是有规律可循的，这篇文章就是带给大家一些颜色方面的启发，让你了解配色的底层逻辑，从而更明确快捷地配出想要的颜色。
认识色彩饱和度的情绪：
因为不同的配色会带给观者不同的情绪感受，只有在先了解不同颜色特性的基础上才能为我们的配色指明方向。我们做出的画面想要传递什么感觉，这种感觉对应什么颜色？
只有搞懂了逻辑，在之后的工作中，才能为我们的配色方案指明方向，而不会一开始就被难住。
如果我想配一个积极热闹活泼的画面，颜色怎么配呢？ 如果想配一个温柔恬静小清新的画面颜色又该如何选择呢？他们都有什么特点，为什么会这样？往下看
3.1.1 积极活力
我们先来看几组图片
用吸管工具提取一下它们的颜色观察
我们可以看到这类海报视觉上都能给人一种热闹、动感、活力的feel。
通过颜色提取，再观察它们选色的位置，可以发现它们的的配色的纯度和饱和度都非常高。
这是为什么呢？接下来我们降低饱和度看看会发生什么：
可以很明显的感受到画面中已经失去了那种动感、热闹和活力的感觉了，整体更趋于平稳和安静。
所以，高饱和度的配色会带给观者活力，动感，热闹的情绪。常常应用于一些电商、运动品牌的视觉项目中，用来渲染or打造年轻、活力、热闹、动感等氛围。
3.1.2 温柔平静
我们再来看一组:
这一类图片就会给人一种文艺小清新的feel，这类配色和热闹、运动的感觉完全不同。
都是低饱和度高明度的颜色。所以，低饱和度的颜色会给人传达平和、放松、舒适的心情。
3.1.3 轻松休闲
这一类的图片就给人以中正休闲的感觉。饱和度都趋于中性，不过高，也不会过低。
其实原理就是在取色器里，
我们看同一张图片，给我们的感觉：
高饱和度配色给人感觉冲击力很强，具有活力，对比非常强烈。
中饱和度画面就弱了一级，视觉冲击力没那么强。画面会放松一些，适合传递休闲的感觉。
使用低饱和度的颜色时，我们看到画面更冷静了，有些高级灰的感觉。
在以往的实际工作当中，我也是先用饱和度来定画面的大情绪基调，只有大的感觉对了，后面才不会出大问题。比如像一些战斗、pk、热血类的banner，都用高饱和颜色:
我们可以来吸取他们的颜色看看：
基本都是靠右边的颜色。
而像我在做下面这种类型的banner时，就会使用到中饱和度的颜色，给人一种轻松休闲的感觉：
我们再看下他们的色域：
都是趋于中间的位置。
最后一种低饱和的颜色，像下面这种作品，就有一种文艺、清新的感觉：
再来看看他们的颜色色域
都是比较靠左的颜色。
用饱和度来定画面的大基调，还是非常好用的，可以说是屡试不爽，大家可以好好理解并且用起来！
总结：
高纯度，高饱和度的颜色，会让人感觉激动、积极、动感、醒目、记忆深刻等特点感官，常常应用于一些电商、运动品牌的视觉项目中，用来衬托年轻、活力、热闹、动感等氛围。
中饱和度的颜色饱和度和纯度都适中，显得中正平和，又不会有低饱和度那样的“平缓“，想要视觉年轻一些，但又不想饱和度那么的强烈，可以尝试选择中度的颜色。
低饱和度的颜色，会给人平和，舒适的感受，常常会结合大量无彩色一起使用，让画面传递出简约，自然，小清新文艺的感觉。
配色的方法有很多，搭配在一起千变万化，但都离不开一个点。你想给别人传递什么感觉？是要年轻、活跃，还是安静、唯美？只有明确方向，在想想这个方向上的颜色有什么规律可循？搞清楚目的，我们再去做配色是不是就会轻松很多？
作者：菜心工作室 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
关于比较
审美是一个宏大的话题，无论是文学、影视、视觉、时尚等我们都可以审视它们的 “美”。不同领域的 “美” 有不同的形式，不同的立场，不同的角度，不同的原则。
在这里，我们不谈具体某个领域审美的规则和方式，我们来讲讲提升审美的具体做法。
讲一个例子，在国内，我们普遍觉得女生在对穿衣打扮的审美上比男生更优，对于其它经过设计的事物所展现的审美也比男生更好。这种差别在高中时期便逐渐放大，在大学中就能明显得感觉出来这一点。
这是由于基因天赋论导致的吗？
是也不是。女生爱美这点是一个既成的事实，有比较大的先天因素，而因为对美好事物的追求比男生更强烈，所以在审美上整体大于男性。
但大家要注意，这个因果关系的模型太过简陋，我们要进一步来分析为什么对美好事物的追求就能导致审美上的差异，这就是我们提升审美的关键，先从衣品讲起。
原因1：
基于对美的追求，女生往往会花更多的时间在穿衣打扮上，也就意味着要购物。无论是在商场还是淘宝，女生逛起来的热情与时长都远远大于男生，这造成了女生在查看数量上也远远大于男生。
这就和很多设计前辈告诉你要 “多看” 的做法是一样的，通过量变引起质变，只要你看的够多，审美自然就可以提升了。
这话说的颇有道理，但依旧在推理上站不住脚。因为，量变为什么一定就能产生质变？这个变化的逻辑依据是什么？在青铜段位里打了一万盘，也不代表一定能打进最强王者不是。
所以，这就是要引入第二个原因，关于对比。
原因2：
女生逛街能逛这么久，往往在除了看以外，还会做一件事，就是大量的试衣服（此处被我言中的女性同学可以点个赞让我看见你们的双手），经常抱了一整箩筐的衣服进试衣间，在里面对着镜子鼓捣摆 Pose 大半个小时，然后才能挑选一两件自己喜欢的出来，或者干脆一件也不要。
嗯，不要问我是怎么知道的……
在这个过程里，就发生了提升审美中最重要的一环 —— 对比。通过大量的对比，来找出好看的、高级的、适合自己的衣服。也因为对比，女生们就通过实践来了解到，什么样的衣服是好看的，什么样的是丑的不适合自己的。
这个过程实际上收窄了选择的范围，比如一个个子比较高挑五官比较立体的女生，是很难在比较过后还会选择那些可爱、少女、小鸟依人的设计。很可能会偏向运动、男友、中性等风格。
而在有了具体的偏向以后，她们依旧会深入到这个范围，继续观察、尝试、对比，然后再次提升对这些东西的理解和审美。
所以，看吧，审美的提升第一步就是这么简单，通过大量的观察，然后对比和筛选，就能非常直接的提升我们的审美，这个提升的过程完全依靠的是人的主观能动性。
日常生活中我们遇到的绝大多数某些人审美比自己更好的人，都是因为他们在某些方面看过的，比较的比我们更多，而不是依靠天赋的加持，这个思路落实到创作中也一样。
当然，我丝毫不怀疑人类的历史长河里，有极少数人打娘胎里就因为染色体中某些基因片段神秘的律动，而获得了独特的审美与创作天赋，但那始终是一个可以忽略的概率。审美的提升是个人主动的行为，不要祈祷上帝在你身上投的骰子能得到你要的结果。
即使抛开这群有 “天赋” 的神仙，也依旧还有很多第二梯队、第三梯队的老法师们通过奋斗逼的经历功成名就不是。
所以别这么自恋总要搬达芬奇、毕加索、梵高等人举例，每次忍不住想要把锅甩给天赋前，就问问自己钥匙配嘛？
什么？您配？
您配几把……
具体案例
不正经到此为止，正经脸……
既然说了那么多关于比较的问题，空口白话难以令人信服，所谓没图我说个……锤子。因为很多新人都会说，你觉得大多数设计案例看起来都挺好，觉得挑不出什么毛病啊。
所以，下面我挑了几个与设计有关的方向，并找了一些案例出来，你们来看看同类型中，哪一张图是最优的。
而没被选上的那些，对于你选出来的图而言，它们当然都是有 “问题的”。
人像摄影
美食摄影
室内设计
产品设计
海报设计
管理界面
UI APP 界面
小结
审美提升的第一步，就是从对比开始，因为这个世界对所有事物的评判，都有不同方向的两个极端。善恶、美丑、高矮、胖瘦，是对立而相互依存。
就像左拉的《陪衬人》中所讲的：
“……另一个却总是奇丑无比，丑得刺眼，使路人不禁要看她几眼，并且拿她和她的同伴作个比较。要知道，你上了圈套。那个丑女子要是独自走在街上，会吓你一跳；那个相貌平常的，会被你毫不在意地忽略过去。但当她们结伴而行时，一个人的丑就提高了另一个人的美。”
之前我们讲了关于审美提升的第一步对比，但是我们留了一个疑问，为什么依靠对比我们可以提升，或者只靠对比我们就一定可以提升审美嘛？审美提升起来就如此容易？
当然不是！
对比的过程只是表象，我们还要追究深层次的原因，那就是“推理”。
在系统性提升审美的道路上，最大的敌人就是——主观感受。因为无论我怎么解释和审美提升相关的方法，总有人会觉得它就是依靠个人审美，不同人审美不一样，总能找出有的人就喜欢网红脸但看不上汤唯或者高圆圆的案例。
没错，每个人都有自己的审美，无论喜欢什么稀奇古怪的东西都可以，存在即合理。但是，设计师该拥有的审美是不能这么随意的，因为作为专业人士，我们的审美就要符合 “专业” 的要求，即通过客观标准来评价事物的内在价值。
比如茶、酒、咖啡这类饮品，都已经拥有非常成熟的市场，会根据产品的价值形成对应的价格。而有趣的是，这些饮品都不是甜的，都不符合我们本能的喜好。所以，还有很多人不接受它们，只喜欢带有甜味的饮料。这种个人的选择上，任何人都可以偏爱一杯 1 元不到的雀巢的速溶拿铁，厌弃红标瑰夏冰滴，但无论你怎么想，也无法改变它们价值不对等的事实，瑰夏手冲有远远超出速溶的口感和品质。
但超出的部分在哪里？答不答得上来，就是内行和外行的区别。
内行经过专业的训练可以品尝出其中蕴含的风味、口感，解释它们与产地气候的联系，储藏运输的条件，以及冲制过程的步骤。但外行往往只能给出好喝、甘甜、顺滑、难喝、太苦之类零碎、没有体系的评价。
如果设计师对设计相关的作品只能做到和外行一样的水平，那么他也只能是设计师中的外行，并且缺乏成为优秀设计师的必要基础。
所以，接下来我们来探究一下，作品的评价为什么重要！
丹尼尔·卡尼曼的畅销书《思考快与慢》中，将我们的思考方式简单的划分成了两个部分，用了非常简单粗暴的 “系统1”、“系统2” 命名。简单概括它们的含义，就是系统 1 是联想式思维，系统2是规则式思维，也可以看成是直觉与慎思的区别。
先说系统1，直觉是我们大脑对日常接受信息简化处理的产物，我们的大脑就像处理器一样，每天都要面对海量的信息通过视觉、味觉等五感导入，如果它没有任何区别的对这些内容进行深度、缜密的分析，那么它一定会超负荷运转并最终自我毁灭。
所以生物的演化，让我们的大脑进化出了一套可以对信息进行过滤和简化的系统，格式塔心理学中关于视觉对物体简化、完形的理论，也是由其产生，这就是我们对很多事物下意识反应的来源。比如在走路的过程中，看见一辆自行车直挺挺的从远处像你冲过来，那么你会马上感觉到危险并往某个方向规避，整个过程会在不到1秒的时间内完成。
而系统2，就是对事物进行逻辑推导的深入思考，如果用它来处理危险的事件，那么结果可能是我们先判断这辆自行车行驶的轨迹并得出它前进的方向与我站立的位置相交，并且它的时速约为 40km， 在撞到我的时间还有3S，如果以这种速度撞在我们身上，大概率会发生……
“BONG～”
那就不用想可能会发生什么事情，你已经被撞飞了，可以直接得到结果。类似的事情还有很多，无论是对与危险的，还是日常事务的作用，系统1都发挥出了极其重要的作用。也因为它的有效，而导致我们对它依赖过度。所以，很多人在对于美丑的审视上只依靠系统 1 来完成，而不会深入去思考各中原由。
系统 1 对美丑的判断，是个人的，但它并没有 “审” 的过程，专业的分析也就无从谈起。斯洛曼和费恩巴赫所著的 《知识的错觉》 里提到：
"直觉给予我们一个简化的、粗略的，而且通常足够好的分析，这让我们产生错觉，自以为所知甚广。但是当我们慎思时，我们才意识到事物实际上何其复杂，我们真的只是略知皮毛。"
审美和品尝美酒、咖啡一样，需要通过了解专业的知识，培养系统的分析方式进行刻意练习，逐渐摆脱依靠我们直觉做出的不可靠的判断。
因为任何优秀的设计作品，在创作过程中都不可能是随性而为的，都是经过创作者深思熟虑后的产物，我们对优秀作品的评价，就是通过专业的知识对其创作逻辑进行推导，哪里有亮点，哪些是败笔，都是清晰可见的。
它不仅帮助我们判断别人作品的优劣，也可以分析我们自己作品的不足，从而得到改进的思路。所以为什么说审美要先于实践，如果连什么是好的都不了解，自己设计出来的东西都不知道如何评价，又谈何进步？
在我自己的教学经验中，这个问题所表现出来的差异就很有意思。如有一些审美能力较差的学生第一次设计 Banner ，花了非常多精力和时间，自我感觉不错，但是作品质量极差，会在得到否定的评价以后表示诧异和茫然，因为他们已经预感应该得到赞美与肯定。而审美较好的学生则是在完成作业以后充分的发现自己设计的东西和较好的作品之间的差距，那么他希望在我这里获取的，就是如何缩小这种差距的具体方式，而不是对其作品做出评价，因为他们自己也会觉得作品质量差的没评价的必要。
但不幸的是，在商业视觉设计的领域中，提升我们的专业评价的能力，并不如其它行业一般有固定的流程和教学，按笔者自己长期的经验来看，如果我们盲目的从艺术、设计、心理多个学科的基础理论开始学起，那提升的速度太缓慢，需要的周期太长，而且有非常强烈的挫败感，如果没有好老师的引导，还容易钻牛角尖误入歧途。
所以，第一部分的对比，重要性才能体现出来。我们要通过实践作为基础，来系统性的提升我们的专业审美能力，通过应用推理的能力，抑制我们无所不在的直觉。
前面扯了这么一大堆，都是在纸面上的探讨，不太接地气，只分析一通原因，和你该如何提升审美没太多关系，这是最气人的。所以，最后一部分，我们来讲讲具体实施的做法。
先声明，审美提升是要通过刻意练习的步骤的，谁也不可能只通过区区几篇文章就以为自己已经明白了，所以需要执行下面这个循环步骤：
• 采集：大量观察和收集作品
• 对比：留下它们中最好的
• 分析：寻找优劣差异的原因
开始前，还要解释一件事，就是我们提升审美都要先从某个点开始突破，从你最感兴趣的，或是工作关联度最高的设计类型开始，而不是无差别的乱看。与美术学相关的所有设计中，底层的原则都是近似的，精通一种，就能更容易理解其它种类的作品。
1.采集
观察的来源多种多样，强烈建议初期只使用花瓣即可，不要分心到太多的平台上，选择太多往往不是好事，会增加干扰，让我们疲于奔命，模糊一开始的目标。
例如首先要提升在 APP 方面的审美，我们先在花瓣中创建一个 APP 的画板，然后搜索 APP 相关的关键字，但不需要关注第一页弹出的采集结果，直接查看 “画板” 选项。
画板是别的用户自己整理的采集合集，我们可以通过封面简单筛选出你喜欢的，然后打开它们，浏览里面收集的作品。
然后尽量按自己最高的要求来找到能让自己觉得满意的作品，再将它们 “采集” 到自己创建的画板中，并设定一个数量，比如采集到500张为止。
2.对比：
达到目标的数量就停下来，因为再采集下去能带来的作用已经非常有限了。虽然采集中已经包含了选择和对比的过程，但我们要更进一步，在自己的选出来的作品里进行比较。相信在完成这个步骤以后，你们已经可以明显感觉到最后 100 张收集的质量是远远高于前 100 张的。在罗子雄 TEDX 的演讲中就说过：你回头看三个月前收集的作品，会发现它们都是垃圾……
更极端一点，那就是我们只在挑选的作品中留下最好的十分之一，听起来是不是很刺激。
也就是我们要开始在自己选出来的作品中，你要删掉其中的 450 张作品 （最好有留底），即使当中有一些你非常喜欢，而且它们都是你的劳动果实。但就因为这样，你才会更慎重的进行比较。因为多数人的采集只是走马观花，后面根本就不会看这些东西。
当然，这个过程推荐用 Eagle 或者 花瓣 PRO 客户端，操作起来会更顺手一点。
3.分析：
在上一步操作里，我们会动用我们脑海里所有关于理性的分析方法来解释它们的优劣，并得出结论，虽然这些想法可能很幼稚或漏洞百出，但不要担心，最后一步就是用来解决这个问题的。
我们捉对挑选一些作品出来，在剩下的作品中和已经被你否决掉的作品各选一张，然后将它们排列到一起，对比它们的优缺点，比如下图是我从我自己画板中找出的近期和早期的采集作品。
专业的分析是怎么得出的？当然不像朱熹提出的 “格物致知” 一般盯着它们思考，就能把设计的理论给格出来，这条路是走不通的，所以才有王阳明 “知行合一” 的教诲。
我们要把对比的内容进行细化，把一套作品看成若干细节的合集，明确比较的目标，这样才能得到理想的结果，比如：
• 字体
• 配色
• 布局
• 配图
• ……
比如我们挑文字出来分析，这时候局势已经比较明朗了，上侧的设计中文字是能被清晰识别的，在不同的字段类型中字重有对应的调整，主次有序。而下侧的文字应用则缺乏对比，部分文字甚至和背景都无法做出区分，且字重几乎没有变化，使用了多种字体没有整体性，导致最后的阅读感受极差。
同理，你可以再试试分析其它几个细节，是不是简单多了。如果这时候你再觉得手足无措，完全分析不出什么具体的东西怎么办？
学啊！
如对比到配色，我们解释不出为什么右图的配色不行，那就针对配色去了解相关的配色技巧、理论，网上可以搜索的分享就一大堆了，比如关于色彩对比、用色比例等等，将你学到的知识现学现用套进这两张作品中，也就可以很快的得到验证。
后面每出现这样的问题，就现学现卖，不仅可以直接提升我们对作品的理解能力，还能巩固我们学过的理论知识。多分析几组对比，你就会发现对于这类作品的审美和理解已经得到了质的飞跃，这时候，你就可以以留下的这几十张作品作为你接受的下限，去收集新的作品，完成下一次循环。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
创建美观、可用和高效的UI界面需要花费时间进行设计细节的打磨，本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。
在互联网产品日趋成熟的今天，你会发现所有的App越来越像，似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节，一起来学习。
1.1 使用颜色深浅构建层次结构
在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。如果可以的话，你甚至可以采用两到三种颜色：
主要内容使用深灰色（诸如标题，但是不要用纯黑）
次要内容使用灰色（比如商品介绍）
辅助性内容采用浅灰色（比如发布日期）
类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：
大多数的文本采用正常的字重（400到500，具体取决于字体）
对于需要强调的文字采用较重的字重（600到700，具体取决于字体）
▲主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃。通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
1.2 统一色调
选择一种基础色，再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
1.3 干净的阴影
阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致。如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
阴影不一定是黑色的，还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
1.4 个性的图标设计
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了。要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。
1.5 Tab的设计感
Tab是App设计中最常见的控件之一，它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态。因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
1.6 无框设计 去繁从简
在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力，让内容更聚焦。
使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。
1.7 统一设计元素
在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观。这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
1.8 符合产品气质的字体
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是，系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
1.9 第三方图标风格统一
大多数App都支持三方登陆，他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计。一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。
1.10 图片中寻找色彩
App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式，为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
1.11 提高图片质量
图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用。即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
1.12 卡片式设计
现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。
2.1 提示性文字
语言是情感化设计最直接的利器，拟人化的对白相比冰冷的话语更能获得用户的好感，赋予产品的新的生命力。例如App那些push推送通知，因为用户每天收到的PUSH实在是太多了，早已心如止水！这个时候，你就需要一条成本低、效率高的PUSH文案，去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣，让人看到会心一笑。
2.2 下拉刷新
下拉刷新是用户在App使用中经常进行的操作，常见的下拉刷新设计是图标加文字的形式，这种设计简单、直观，但毫无设计感，不能引发用户任何的情绪。
下拉刷新是一种临时状态，丰富它的设计细节不会造成与产品界面的格格不入，相反，一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿，暗示正在快马加鞭的加载新内容，小鹿形象延续了品牌logo。作为资讯类产品，内容更新速度至关重要，奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感，瞬间就让下拉刷新变得生动有趣。
2.3 头像设计
个人中心页与用户信息密切相关，用户的虚拟形象在这里得以展现，常见的设计是一个用户头像加登陆文字的形式，这种默认的头像设计无法得到用户的认同感。
现在很多的产品已经放弃了死板的默认头像，给用户更多的选择。赋予产品一些人格魅力，可以让产品富有生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系。例如美团外卖和躺平，它们各自的身份都代表了产品的气质和用户的属性，让用户产生一种身份的认同感。
2.4 缺省页化解负面情绪
通常状态是，当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式，这种简陋的设计会给用户心理造成很大的落差，陷入负面情绪中。情感化设计在此时就可发挥巨大的作用，它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大，根据产品属性和品牌延展图形，结合动效或插画等情感化设计，可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景，让用户会心一笑，使产品充满了趣味性。
2.5 标签栏微动效
情感化设计变得越来越丰富，图标设计上升至可以展示动画效果。通过动效的使用，标签栏切换变得不再死板。用户在频繁切换页面时，不再觉得单调。精心设计的动态效果，能够缓解用户等待时焦躁的心情，从心理上缩短用户等待时长，让品牌更加深入人心。
2.6 模拟用户行为
如果一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化，播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。
情感化设计可以拉近用户与产品之间的距离，在更深的层面体现出对人性的关怀，为人们带去情感上的愉悦和感动。洞悉用户的行为，换位思考去满足用户的需求，情感交流就产生了。例如当你截屏了一张图片，打开微信对话框时就会自动显示这张图片，提前预知了你发截图的需求。
再例如很多观众都习惯了在电影结尾等彩蛋的习惯，因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时，你会发现影片详情页会有彩蛋提醒，告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息，就不必再为了不确定的彩蛋期待浪费时间啦。
2.7 有趣的细节设计
俗话说：有趣的灵魂万里挑一，可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中，有些有趣的设计是隐形的，需要用户自己去发现，当用户找到这颗彩蛋时，就会获得一份喜悦和乐趣，增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右，你会打开鬼畜区的新世界(⊙o⊙)（友情提示：记得戴上耳机或调小音量）其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母，发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕！
有些有趣的设计又是显性的，目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员，不仅可以尊享丰富的影视资源，还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕，让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性，一方面也丰富了弹幕区的多样化，可谓一举两得了。
总的来说：UI设计的“高级感”意味着在视觉层面要从细微之处着手，创造出精致富有设计感的画面；另一方面要从情感化设计出发，使用户与产品产生情感上的共鸣，获得更高层次的使用体验。
作者：印迹_ 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在我们之前的文章中，同理心思维，在工作和生活中有着怎样的应用？关于产品原创和服务设计都有提到“同理心”，今天想来系统地分享一下。它不仅应用在旅行的产品和服务上，还可以应用在每天生活的方方面面，提高我们生活和工作的效率。
提到B端设计你是否经常听到这样的声音：
刚转B端那段时间，我相信每一个设计师都曾有过这样的困惑。
设计师在实际工作的时候经常会遇到自己的设计方案与业务需求高度融合，由于B端的行业属性，缺乏完善的数据验证，常常到了最后也区分不了设计师真正的能力体现在何处，这就导致团队成员对设计师的价值认识不够全面。
那么我们B端设计的价值又该如何体现？今天本文将从4个方面进行阐述，一起来看一下吧~
B端设计师追求工作中如何体现价值的时候，我们得先明白B端的设计价值是什么。
那么何为B端的设计价值呢？
百度百科中设计价值的含义是：把一种计划、规划、设想通过视觉的形式传达出来的活动过程。今天本文中的B端设计价值分为视觉设计、交互体验以及业务流程优化，通过信息传达的改变，帮助客户降本增效的方式获取收益。
如果将B端整个生命流程进行剖析，我们会更好的理解其设计价值。
B端产品与C端产品不同，它需要市场销售人员利用自身的能力以及资源向目标企业进行销售或者在一些大型展会上对外演示，据有关资料表明人所感知的信息的80%的信息来自视觉，这就需要对产品的功能进行视觉化展示。
因为竞争激烈，经常需要在众多竞争者中进行厮杀。在技术水平趋同的情况下，视觉起到了非常大的作用。特别是在展会期间，假如两家公司技术水平相当，演示的视觉完全碾压对手，让客户有着良好的品牌印象，这将产生快速的口碑影响，而这些将影响用户的最终决定。
这一步需要我们理念进行升华，将视觉视角切换至体验视角。
企业是我们B端设计的重要客户，它是一个具有不同成员角色的群体组织。该组织为了工作管理的效率，会有不同的权限体系。权限的不同关注的信息也有所不同，这需要我们在设计中依据权限，考虑不同信息呈现优先级。
功能繁琐是很多同学对B端的第一印象。因其有着不同角色的参与，每个角色因为岗位职责的不同，所参与公司的业务流程存在差异，这意味着需要将不同的功能在遵循产品体验一致性的基础上汇聚在一起。
业务价值对于B端设计特别重要，这是企业决定购买B端产品的出发点。我们在说业务设计的时候，需围绕企业“降本增效”理念，让用户觉得有用，完成企业的管理需求。
举个例子，比如我们做了一款报销系统产品，帮助用户解决财务报销过程复杂、冗长的问题。通过前期参与用户调研，洞察业务，挖掘需求的突破点，找到当前背景下最优的业务流程解决方案。企业员工使用我们的产品后少填写信息，更快速的拿到了报销费用，平均比传统流程节省了20分钟。假设企业员工平均时薪60元，那么这个100人的企业每周可以节省1.6万的人力支出，而一年可以节省76.8万左右的支出。
在了解了设计价值的体现后，我们知道B端设计的落脚点在业务价值的赋能上。当我们实实在在的解决了业务问题，而不是产品外层视觉与交互的表层需求，才能让我们的设计价值最大化，让设计得到团队其他成员的认可。接下来结合工作经验阐述下设计师可以赋能业务的点。
很多B端设计师都是被动的接到产品经理的低保真，然后根据低保真的需求直接输出设计稿，妥妥的沦为一个画图的美工，这会使得自己在团队内部被定义为一个工具人。
那我们的发力点该是什么？借用Jesse James Garrett的理论用户体验五要素这个专业名称（表现层、框架层、结构层、范围层、战略层）。单纯的视觉设计虽然容易感知，但它却属于五要素的最顶层，价值有限，无法准确传达最底层战略层的含义，我们需要往下突破才能凸显我们的价值。
当我们在收到需求的时候，需要具备系统化思维，从底层战略开始，首先了解业务需求背后的价值，同产品经理对其业务目标后，帮助他梳理业务需求，结合用户目标以及当前的技术能力等多方因素系统性思考最优的设计解决方案。
只有发挥了我们的主观能动性，改变单点视角，具备系统化思考的能力，才能更好出结果，体现我们的价值。
功能复杂繁琐的B端为了最大化的保证设计的一致性、提升开发的效率以及方便产品的迭代优化，组件规范是我们产品必不可少的工具。
那目前市面上的组件规范这么完善，对于我们设计师而言自身的价值是否无法体现了呢？其实它存在2个问题：
1、业务属性不符。虽然市面上存在众多的第三方组件，但由于设计的出发点不同（公司不同影响的业务属性不同），导致市面上的组件不一定与自家产品属性贴合，需要我们结合产品愿景以及业务规划进行重新设计；
2、业务特性不贴合。我们见到的很多组件只能归于基础组件，可以保证基础的设计一致性，但由于业务领域的独特性，在一些专业的场景中有着强烈的业务属性，需要我们对一些基础组件进行组合，进行更专业的沉淀，这样在实际使用的时候会更加高效。例如高级筛选、不同的场景弹框等。
不管B端还是C端的设计目的都是为了解决业务问题（业务目标的达成也是KPI考核的重要目标），我们始终要以业务目标作为我们的关键目标。
我们设计师需要参与整个行业生态的搭建，做到体验结构展示清晰，核心信息简洁明了，降低用户的操作门槛，通过提高体验效率（缩减时间成本），节省企业的人力成本。
对业务需求的赋能其实就是要求我们进行需求的挖掘，发现更多的业务增长点，提供当前背景下最优的解决方案。需要例如我们可以主动的进行XX调研活动，给出XX解决方案，最后给公司带来了XX业务价值。
项目复盘对于我们设计师的能力成长的作用是巨大的。它之所是最快的学习方式，因为它在是实践中的反馈，这种直观的经验沉淀最终会融入自己解决问题的知识体系架构，而这将进一步反辅自己的职业成长。
复盘可以让我们站在第三方角度，重新对项目流程进行全面的回顾与总结。结合不同的反馈，客观的了解当前设计在整个业务目标中的价值，这是对我们设计量化最佳途径。不单单对于个人，团队内部的其他成员也可以通过复盘加深对设计信任感的建立，他们可以看到我们的设计思路，更深层次的了解我们的设计价值。
设计价值的体现建立在一朝一夕的积累上，如果想在B端设计中体现价值，一定要透过现象看本质，站在业务的角度，寻找真正的发力点，让自己参与业务赋能的同时共同成长。
作者：江鸟的设计生活
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在百度百科的定义中，阻力是物体在流体中相对运动所产生与运动方向相反的力。自然界中存在许多类型的阻力，比如空气阻力、水流阻力，各种各样的生物因此进化出相应的身体特征去减少阻力。如下图所示，拥有流线型外形的海豚掌握独特的减少湍流摩擦阻力的游泳方法，这使其游速在某些条件下可以达到每小时 70-100km，远超现代潜艇的航速。
人类为了摆脱自然界设计的阻力，做了许许多多的努力。采用纤维模仿鲨鱼皮肤结构的鲨鱼皮泳衣能够降低 30% 的水阻，提高人类游泳速度。汽车的流线型设计减小涡旋作用或避免涡旋的形成大大地减低了空气对其的阻力。
在人类社会，人为设计的阻力也无时无刻不在。为了公共安全设立的安检、为了交通安全而严格控制不同区域的最高车速、为了社会安定而设立的法律，诸如此类的阻力都无时无刻规范着人类的行为。
类似地，对于互联网产品，用户在使用时也会被刻意地或非刻意地设计出的阻力所影响，这些阻力会阻碍用户完成目标。
在认知心理学中，我们接受外部世界的刺激之后做出反应的过程中，涉及到我们如何感知、学习、推理、记忆，以及如何把意图转化为行为。人类数十万年的进化过程中，对于感知、学习、推理、记忆的神经结构已经初步进化形成，大多数的人保持着相似的认知能力和认知缺陷。用户在使用产品时感受到的阻力往往来自于设计师未能充分了解用户的认知能力，从而设计出容易导致用户犯下认知性错误的产品。以下常见的人类的认知特点影响了我们感知和获取信息的过程。
对于一件新事物，我们感知它的方式通常受到三个因素影响：过往的经验、周围的环境、当下的目标。我们通过过往的经验将已知概念套用在新事物上，帮助我们理解。一旦产品界面中与用户的经验预期相悖，就会产生阻力。
面对一个我们从未使用过的机器设备时，我们很少愿意耐心阅读完它的说明书再去使用它，而是自信满满的希望通过简单的摆弄和熟悉就能够了解它的使用方法。《点石成金：访客至上的Web和移动可用性设计秘笈》一书中的第一条可用性原则就是“Don't let me think（不要让我思考）”，作者认为设计者在设计一个界面时，最好能够做到让界面清晰易懂、一目了然，让用户能够不必过多的思考就能够使用它，帮助用户跨越思考过程，让用户能够轻松做出复杂的决策，减少认知压力。
我们可能都经历过心流状态，当我们在极度专注地做某件事时完全沉浸其中并且非常高效，但如果意外地被打扰，会让我们很烦躁。
有关任务执行的研究文献中就曾经提到过：中断会导致错误，而且人们容易遗忘之前的位置或状态。当一个任务打断了另外一个，重新启动需要的时间会让每个任务都变慢。
打扰我们的事情可能是工作时突然的一声噪声，也可能是在使用软件时冗余的弹窗、过多的页面跳转、无意的误操作等等。界面中过多的干扰会打断用户的心流，造成用户的使用阻力。
认知负荷理论（Cognitive Load Theory）是在 20 世纪 80 年代由澳大利亚教育学家 J.Sweller 提出，由于对人类学习认知和教学指导提供了新的理论框架，该理论在教育领域成为重要的心理学指导理论，在交互设计领域也存在着借鉴意义，理论的主要内容如下：
认知负荷是指外部信息进入个体短期记忆后中后所需要的注意力资源和记忆容量，被分类为内在认知负荷、外部认知负荷以及相关认知负荷（如下图）。当任务需要消耗的注意力和记忆容量超出学习者的极限时，就会导致认知超负荷，超出的部分将不会被学习者有效获取。
不同的呈现形式形成的外部认知负荷是不同的，一般来说，文字>图式>视听。因此，为了避免认知超负荷给用户带来的使用阻力，我们应该设法简化信息来降低内在认知负荷，通过更合理的信息可视化形式和信息架构构建降低外部认知负荷。
如下图，基于上述的用户的认知能力分析，合理的降低阻力，能够让用户在使用产品时效率更高，成本更低。在提高交互效率方面我们可以通过减少操作步骤、提高传达效率、减少页面跳转来达到目的。在降低交互成本方面，我们可以通过降低操作难度、减少用户思考来实现,同时通过降低认知负荷减少用户的认知负担。阻力并不是越小越好，在某些场景下，我们需要增加阻力和提高用户的使用成本，进而提升用户体验或达成产品目标。通过提高防错能力、提供安全感和营造仪式感来优化体验。通过筛选用户和内容把控社区生态。通过功能引导和歧视性策略来迎合商业目的。
类似于一个倒金字塔结构，交互流程中的每一个步骤都伴随着流失。通过以下减少操作步骤的方法，可以降低用户行为路径中的阻力。
不同的控件有着不同的应用场景，控件的选用不当会形成多余的操作步骤。我们需要深入了解每个控件的属性和应用场景才能够做到灵活运用。
举一个例子，在微信的朋友圈发布页中编辑内容后点击取消后，弹出警告框显示“不保留”和“保留”按钮，但是考虑到用户可能会误操作点击取消按钮的场景，此处应增加一个按钮让用户回到编辑状态，否则不管用户选择哪个选项都会退出发布页重新进入，从而使用户多了一步操作。下厨房的发布页就考虑到了这个问题，使用了默认有返回操作的上拉菜单控件作为提示方式，即使在误操作场景下也不会增加操作步骤。
控件方面这里就不展开讲了，大家可以通过阅读 iOS 人机交互指南和安卓 Material Design 规范来深入学习。
任务都存在其复杂性，当我们无法简化它时，可以考虑将复杂性移交给系统，使其代替用户操作。
比如我们可以利用用户已经在产品中填写过的信息来帮助用户填写相关信息。例如通过身份证号码自动识别出用户的生日和性别，自动为用户填充。
预判用户行为分为两种方式，第一种是在用户操作前，预判可能发生的用户行为，以建议的形式为用户提供选择，缩短用户行为路径。
比如拍摄照片后，打开微信聊天页面，微信会以气泡的形式询问用户是否要发送图片，如下图。
第二种是由于用户的认知错误进行了非目标操作时，系统提前识别引导用户进入正确的流程并完成任务。
比如支付宝聊天界面中，很多用户误以为可以直接通过输入框输入金额数后点击发送就可以转账，但实际上只会发出一条消息。支付宝贴心地在用户输入数字后外显转账功能，从而避免了用户的错误操作，如下图。
不合理的信息架构和流程设计会增加用户的操作步骤。比如最新 iOS13 的信息应用，将 iOS12 原有的使用分段控件整合信息的方式改为了 iOS13 的列表形式，导致从一级页面（A）进入到二级页面（B或C）后，如果想切换信息列表还需要返回到一级页面再次选择，增加了一步操作。iOS13 的这种改动可能考虑到用户切换信息列表的频率没有那么高，希望用户专注于当前的信息列表，但是我这样的用户经常查看过滤信息列表，担心是否有重要信息被屏蔽，多出的一步操作还是给我带来不小的使用阻力。
淘宝订单模块的做法就比较合理，从一级页面（A）进入二级的任何页面（B 或 C）后，二级页面可以在标签栏互相切换，而不需要退回一级页面再次选择二级页面，从而节省了一步操作。
快捷方式有跳转类和功能类两种，跳转类的快捷方式可以帮助用户快速触达或回退到某个页面。
比如我们可以通过长按 iOS 应用图标调出功能的快捷方式使用，减少中间的操作步骤。淘宝可以在大多数页面通过快捷方式快速回退到首页。
功能类的快捷方式提供给用户更快捷的方式完成复杂或较多的任务，比如哔哩哔哩的一键三连。被苹果收购的应用快捷指令可以自定义系统以及第三方应用的复杂任务，并且在下次一键即可完成。
米哈里·契克森米哈赖在《心流：最佳体验心理学》中将“最佳体验”定义为：当我们在做某些事情时，那种全神贯注、投入忘我的状态。这种状态下，我们身心合一，甚至感觉不到时间的存在，技术水平也会达到顶峰，在这件事情完成之后我们会有一种充满能量和非常满足的感受。然而，周围突然的干扰或环境刺激都有可能打破心流体验。
用户在使用软件产品时很少有心流体验，因为过多的页面的跳转和刷新会中断用户心流，冗余的页面层级会增加用户的理解成本和操作成本。针对这个问题，我们可以提高单个页面的动态容量，在不跳转页面的前提下使用户完成任务，为用户创造在视觉感受层面上的心流体验，下面是一些方法举例。
覆盖层是出现并覆盖在原页面上层的一个弹出窗口，可以由用户触发或系统自动触发，在网页端和移动端都有着广泛应用。我们通常可以将其用于输入内容、附加信息、子页面信息外显、显示操作指令等。
模态覆盖层一般由点击触发，通常出现后会伴随亮盒效果，使用户聚焦于覆盖层上的任务，用户操作完毕后才可以进行覆盖层外的其他操作。模态覆盖层的大小不固定，它可以是一个小型的显示警示信息的弹窗，也可能是一个篇幅很大的信息介绍，在保持上下文的情况下展示更多信息，避免了用户迷失在各种页面跳转中。
如下图，behance的首页点击一个作品后，会在当前页面上生成一个模态覆盖层供用户浏览详细的作品内容，而不是跳转到新的页面。在设计师浏览单个作品的场景中，一般只需要 1-3 分钟的浏览后就会关闭页面，模态覆盖层的方式使得打开和关闭的操作更加流畅，提高了设计师的浏览效率。
模态覆盖层在移动端同样也有着应用。如果前后两个页面存在较强的关联性，为了避免用户产生明显的割裂感，一般适合采用模态覆盖层的方式展示新页面。如下图，知乎使用模态覆盖层展示评论。
详情覆盖层在网页端通过光标移入触发，触发后不需要刷新页面既可显示附加信息。如下图Boss直聘中光标移入某条招聘介绍时，会触发详情覆盖层展示出次级页面的详细岗位信息，避免了跳转新页面。
嵌入层类似于抽屉，需要的时候将其展开，不需要的时候将其收起。与模态层不同之处在于，展开后也不会遮盖页面的其他信息和影响其他操作。嵌入层的主要的应用场景有：拓展内容、展示下级内容。
如下图，微博的发现页面的功能图标可以通过嵌入层进行拓展从而展示更多功能。
Xmind的嵌入层展示了格式的下级内容，可以在保持能够继续编辑脑图的前提下进行格式设置。
对于内容丰富的页面，希望用户能够通过尽可能少的跳转就能够触达。我们可以将列表导航、宫格导航修改为标签导航或分页的形式。
把某些操作难度大耗费成本高的操作使用新技术解决，比如人脸识别和 OCR 技术可以降低信息输入成本，不但帮助用户使用较少的时间完成任务，也降低了用户的犯错几率和使用阻力。
手势的优化也是降低操作难度的可行方法，优化的方式有增加多手势操作和加大热区。比如在 App Store 首页进入应用推荐页后，针对不同使用场景的用户提供了三种退出的方式，大大降低了操作难度。
举一个反例，得到的书籍详情页中，查看详情的按钮热区只存在于文字上，但是用户的使用习惯会误认为整块区域都可以点击，因此每次点击多次失败后才理解热区的正确位置，如果将热区扩大到整个区域就可以降低操作的难度。
想要了解更多交互手势知识可以拓展阅读： 交互手势的容错性和逻辑性
用户的每一次思考都伴随着流失的风险。有时用户对于我们提供的选择不是很了解，会纠结和疑惑不同选择之间的区别，最终可能导致放弃选择进而流失。我们需要做的是为用户提供默认选择，同时允许用户切换到其他选择，以此来减少思考，降低使用阻力。
以手机淘宝查看相似宝贝功能改版为例，在旧版中，长按淘宝某个商品会出现「找相似」和「找同款」的按钮选项，点击后会跳转到对应页面。在新版中，长按淘宝某个商品会直接跳转到「相似宝贝」页面展示商品，同时可以通过分段控件切换为「同款宝贝」。我猜测的改版原因是，由于旧版的第二步给用户的两个选项让用户过多思考，导致第二步的流失率过高，很多用户没能体验到「相似宝贝」和「同款宝贝」功能的的特色。改版后直接将更高频的「相似宝贝」的商品页展示给用户，同时也很方便地去切换到「同款宝贝」，这种交互形式的变化让用户无需思考就可以迅速体验到功能的特色、并在熟悉后下次会继续使用。
我们通过过往的经验将已知概念套用在新事物上，帮助我们理解。一旦交互界面中与用户的经验预期相悖，就会产生阻力。
上文提到过，我们习惯于从过去获得的经验中获得对于当下问题的解决方案。甚至对于重复出现的问题，我们已经形成了条件反射和肌肉记忆去解决它们而不是再次思考。因此，当设计缺乏一致性时，不但会导致我们已经形成的条件反射和肌肉记忆失效，还会更容易导致错误的发生。此时我们不得不从条件反射的无意识操作转换为消耗注意力的缓慢操作，从而形成阻力。为了避免这些阻力，我们需要确保按键的一致性、交互文案的一致性、交互手势的一致性。
如下图，警告框的按钮位置一旦第一次用户经过使用熟悉后，之后用户会进行无意识地快速操作，此时如果某个警告框缺乏一致性就会导致错误的发生。
内在负荷是任务中包含的信息和用户固有的认知结构产生交互作品而形成的负荷。体现在界面中的信息就是文案的设计了，它也是产品设计中重要的一环。悖于用户认知结构的文案设计会带给用户理解上的阻力。一份合格的文案设计需要做到简洁易懂、重点突出、无歧义性和保持一致。
如果能够做到简洁，就不要冗余。确保每一个字都有其存在的意义。大部分用户会对冗余的大段文字产生畏难情绪，从而放弃阅读。词汇的选择要符合用户人群的认知范围，不应该使用用户难以理解的各种黑话和行话。在此基础上，如果能够通过形象生动的修辞手法帮助用户快速理解，就更胜一筹了，比如针对垃圾分类，一些网友发明的快速记忆方法就是一个很不错的例子，如下图。
一段文案中可能有些是重点内容，有些是解释内容，并不是所有内容都需要让用户阅读并理解。大部分情况下只需要突出重点内容告知用户，能够引导用户下一步行动就足够了，至于其他解释性或者不重要的内容弱化即可。
针对前两条规则，我们以 12306 以及飞猪的学生票和成人票的选择弹窗作为案例进行对比。如下图所示，每一次购买火车票的过程中，当我遇到 12306 的这个弹窗，都会让我用不少时间去进行理解和思考。首先在个人看来，“温馨提示”在任何弹窗上都是占用空间没有实际意义的存在，如果没有标题，直接展示正文即可；其次，正文的内容重点信息不突出，其中有一个句子“请凭购票时所使用的有效身份证件原件和附有学生火车票优惠卡的有效学生证原件换票乘车。”过于长和复杂，很考验用户的短期记忆和耐心；最后，按钮文字没有提供操作路径，用户想知道如何操作需要先阅读完上面的文案。
飞猪的案例就避免了 12306 所存在的问题，做到了简洁易懂和重点突出，如下图。
表意清晰指的是文案传达的含义明确、不含糊、不存在歧义。下图是一款社交软件的警告框文案，文案的歧义让用户疑惑“取消”按钮是取消约会还是取消本次操作。经过修改后歧义性就消失了。
同一个软件系统中，表达相同概念的用词一致。模块中的相似文案，语法表达方式一致。上文提到我们人类很少愿意思考的特点，一旦一个软件系统出现表示同一个概念，但是名称不一样的词语，我们大脑就不得不开始被迫思考：“这个词语和之前那个很接近但是有些不一样，它们是同一个东西吗？”这个思考过程从而形成了不小的阻力。《认知与设计》一书中提到一条规则：“同一个名称，就是同一个东西；不同的名称，就是不同的东西。”因此，一致性是撰写交互文案的一条重要原则。
当信息的内在负荷不能再进行降低时，通过改变信息的呈现方式、结构设计和逻辑安排来将复杂信息可视化，降低外在负荷，使信息更容易被用户接受和理解。这里涉及到信息可视化这个课题，这里就不做展开了。
阻力并不是越小越好，在某些场景下，我们需要提高阻力提高用户的使用成本达成某些目的。
类似于马路上的减速带，在车辆进入需要低速行驶区域时进行阻碍。我们通常在用户容易犯错的操作前设定一定的阻力，减缓用户的操作的节奏，达到防错的目的。如下图，在蓝湖中如果要删除一个项目，就需要先输入项目的名称后才能成功删除，通过增加阻力提高了防错能力。
针对涉及到用户隐私的敏感操作，通过设计特定的交互流程让用户体验到安全感，比如通过增加指纹、面部识别等操作降低用户对于危险和风险的担忧，增加用户的确定感和可控感。
生活中大部分的时刻都是单调乏味的，我们需要使用各种仪式点缀它。与此类似，在用户的操作行为路径里增加一些不必要的过程，也能成为用户体验旅程中的点睛之笔。
就像多年前坚果手机一代的包装，设计师别具匠心的将包装设计为一次充满着童趣的体验，虽然拆包装的过程时间增加，但是给予用户似曾相识的场景是不可替代的。
看似使用起来费力的微信摇一摇，可以加强用户的参与感和仪式感，就仿佛融合着一种占卜未知世界的神秘体验，这种感觉是点击无法给予的。当初支付宝基于 LBS 和 AR 技术推出了 AR 实景红包，众多用户不惜跨越“千山万水”收集线索图去寻找红包，并乐此不疲。尽管增加了操作成本和使用阻力，但是这些富于互动性和趣味性的体验带给用户的仪式感也是不可多得的。
用户的属性和其产生的内容质量对于产品的社区生态建设有很大的影响。对于社区的认同感越高的核心用户越多，内容质量就越高，进而社区对潜在用户的吸引力就越大。一旦一些修养低或居心不良的用户大量涌入社区，就会同时带来大量的负面内容，造成对其他用户的干扰，甚至导致他们大量流失。因此，为了让一个产品的社区生态能够健康发展，我们需要采取一些筛选方法来设置阻力，以此来筛选出对平台有益的用户和内容。
很多产品在冷启动阶段，为了避免垃圾用户和提高社区质量，会设立邀请制来控制用户来源，然后根据现有用户的使用反馈进行可控的优化迭代。这种方式可以有效地降低初期的运营成本，保持服务器稳定，甚至可以制造一种供不应求的感觉，获得更多的讨论度。
网络骗局在社交类产品屡见不鲜，婚恋类产品更是重灾区。很多推行高端婚恋或高端社交的产品为了保证用户质量，不仅严防死守，还会设立价格门槛，不付费直接无法使用，这在现今已经广泛推行的基础服务免费、增值服务收费的收费模式中很少见，但是确实有效地进行了用户筛选。
通过设置测试题将用户分成不同的群体，进行具有针对性的权限设置。比如 B 站转正时需要完成具有社区特色的晋级考试，需要花费的时间成本比较高，通过这种方式筛选出真正认同 B 站社区文化的优质用户，给予这些用户更多在社区中互动的权限，从而也大量减少了低质量用户的负面行为。
上述的三种用户筛选方法是否适用，需要考虑的产品属性。不同维度的筛选用户的方法还有很多，这里只是简单举例。
不同的内容形式对于社区的价值是不一样，我们可以通过一定的方式引导用户生产对于社区建设更有利的内容。比如微信发布朋友圈时并没有直接给用户提供纯文字信息的输入方式，如果用户想要发布纯文字内容，需要长按发布按钮才能进入相应界面。原因是微信官方认为相对于纯文字内容，附有图片的内容对于其他用户更具有吸引力，通过阻碍用户使用纯文字发布、鼓励用户使用配图发布使得整体的朋友圈社区的内容能够吸引用户浏览更长的时间，从而也可以使朋友圈广告得到更多的曝光。
有时产品的商业目标和用户目标存在一定冲突时，损失一定的用户体验满足商业目标是不得不进行的选择，这需要我们进行合理的平衡。
为了迎合商业目标，我们有时需要针对一些功能设置一定操作阻力将其进行弱化，然后引导用户去使用我们希望其使用的一些特定功能。这类阻力设计最为常见，比如通过强化按钮对比进行功能的引导，如下图。
歧视性策略常见的的应用方式就是通过 VIP 制度或等级制度将用户进行身份区分，针对身份等级低的用户设置使用阻力，以便于引导其投入更多精力和资源，或者通过此方式给予高等级用户优越感，刺激其进行分享炫耀。
16 年发布的支付宝生活圈就是一个很好的案例，芝麻信用 750 分以上才可以使用的歧视性策略非常简单粗暴。很多达标的土豪用户在朋友圈炫耀生活圈的截图，等待朋友们的膜拜点赞。互联网产品中，每增加一个动作，用户都会呈几何级流失，但是支付宝的歧视性策略给了用户巨大的动力完成了截图、保存、打开微信、分享照片等一系列动作，帮助支付宝生活圈实现了刷屏传播的效果。
虽然让用户畅通无阻地使用产品是我们的目标，但是有时还需要我们合理地限制。不同的使用场景和商业目的共同影响着设计策略。在如今互联网产品越来越趋于存量竞争的态势下，我们更多的工作开始专注于产品的优化。希望本文能够提供相应的思路，助力你在产品优化探索中找到可行的切入点。
参考资料：
《微交互：细节设计成就卓越产品》作者：Dan Saffer
《心流》作者：米哈里·契克森米哈赖
《web界面设计》作者：Bill Scott / Theresa Neil
《认知与设计》作者：Jeff Johnson
《阻力设计：探索质量和数据间的平衡点》IXDC 演讲，作者：王毓莹
《点石成金》作者： 史蒂夫·克鲁克
《设计心理学2:管理复杂》作者：唐纳德·A·诺曼
作者：Ballen成明
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Wonder是一款面向Z世代群体信息获取的探索型产品，虽然我们在产品探索的路上没能走的更远，但作为设计师非常珍视参加创新产品探索的机会，创新本身就是一种积累，在产品搭建过程中深入了解用户需求，设计上自我突破、追求极致。以下历程和设计经验想与大家分享。
首先从了解我们的年轻用户开始。通过桌面、田野用户调研，我们了解到，在信息内容消费方面，Z世代群体更偏向于个性化、多元化、高颜值的信息内容体验。再进一步拆解诉求，我们发现用户大致可以分为效率型及消遣型两大类，效率型用户偏向于便捷易用、信息聚焦的消费形式，而消遣型用户更期望有丰富的内容让他们逛起来、刷起来。针对两大类不同的用户诉求，我们进行了区隔化设计。
在框架搭建上，我们利用面板可变性和固定性两个维度来定义框架，首先是首页场景面板，它具有可变性，可以承载不同的内容例如搜索、信息流场景。再次，定义了位居二层的搜索面板，作为核心场景，具有固定性，是恒定不变的功能位于可变场景之上。最后，两处功能区具有固定性，头部承载基础功能，底部承载两大消费场景。最终将框架转化为具体设计，分别承载了丰富的兴趣内容分发场景和简单的聚焦场景。
搜索框位于内容之上跨内容恒定存在，形成了搜索框置底的首页双层面板交互形式，和满足首页逛起来的内容消费场景、聚焦搜索的简单搜索场景来满足用户的不同诉求。加上两处固定的功能区域，头部基础功能，底部bar承载左效率、右娱乐两大内容场景，构成了差异化首页框架。冠以兴趣内容躁模式、简单搜索禅模式姓名，炫酷的交互手势切换模式加持，最终构成了首页双模式、可承载多元场景的框架设计。
同时，头部留有Doodle品牌区域，在丰富的节日运营活动中，柠檬精通过不同的装扮和道具，和用户进行互动
随着我们对用户的深入了解，有了更细致的解读。根据用户调研我们发现Z世代群体更倾向于基于兴趣圈层的信息消费形式，愿意为兴趣买单、寻找同好，并致力于为兴趣圈层贡献价值。因此我们对整体的框架和布局进行了体验升级探索。
我们将用户诉求拆解为可落实的设计目标，并聚焦「体验统一」「快速筛选」「特色感知」「重点突出」4个核心设计目标。框架层面，我们依托星球形象设计，运用头部循环交互框架形式，使内容直观清晰呈现，不同星球凸显不同内容特点，又保证了6大内容体验统一。
底bar定义为基础功能承载，语音核心能力固定不变，消息作为社区互动重要基础能力、个人中心便捷用户快速回访社区资产。在页面的架构上，根据金刚位运营模块特性，将模块设计为可组合、可灵活配置，以支持随时更替的运营诉求。
对于重点互动场景，运用动态入口设计吸引互动，并在二级页打造全场景的沉浸式互动氛围。
最后，将UGC无限流至于信息层级底部，打造纵向浏览、逛内容体验。
在项目正式启动前，组织脑暴会开展年轻化设计语言提炼，结合用户研究团队调研报告，通过Image board建立设计理念和模型表达，通过收集、归纳、提炼、总结路径，提炼设计语言基因。
圈定关键页面、核心控件开展带有年轻化设计语言基因的方案探索，并扩大覆盖到重点页面验证、聚焦、收拢，最终确定产品的年轻化设计语言。
柠檬精是Wonder App的官方IP形象。取自「我酸了」流行语，以柠檬为基础原型，设计保留了柠檬最突出的特征，色彩以品牌色—柠檬黄为主色调，整体造型拟人化、年轻化以增强形象的延展性及实体化后的可动性。IP形象与业务属性及产品气质也较吻合，同用户互动场景应用打造差异化记忆点。
不断完善形象在各种场景中的应用及延展，制作系列表情，用更多元的表现形式将柠檬精的性格描绘得更加丰满，为品牌注入更多亲和有趣的情感，拉近与用户的距离。
伴随产品兴趣圈层的升级，3D柠檬精也结合星球概念，差异化造型与兴趣内容对应，去赋予不同兴趣星球特色，帮助年轻用户找到社区、身份归属感，增强人与社区链接感。
大星球塑造中，通过不同星球的特色元素构建场景，同用户产生行为共鸣，吸引用户进入圈子。
设计一定不是“拍脑袋”的想象，更多是基于用户特性、诉求、使用场景的一步步推导、演进的结果。设计也并不局限于最终的界面效果呈现，整个产出过程都在设计，也都有设计发挥的空间。记得在日常的设计中多挖掘用户诉求、洞察机会点，并抱着提供解决方案而非一次性结果的视角，动态的、可延展的看待、设计事物。
随暂别应用市场，依然感谢大家的阅读，期望这趟年轻化设计之旅能够带给设计师们一些启发。期待看到更多有趣的、创新的、别出心裁的年轻化设计。
作者：百度MEUX
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
01
什么是灵动岛（Dynamic island）
2022苹果秋季新品发布会，备受关注的新一代iPhone如期而至，此次发布会最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计，首次采用了「药丸」挖孔屏。虽然「药丸」在安卓阵营中并不是什么新鲜玩意，但一向以创新著称的苹果还是玩出了不一样的花样，带来了全新的交互方式，模糊了硬件和软件的界限，通过实时变化显示重要的提醒、通知以及简单的功能操作，苹果把这一创新称之为灵动岛（Dynamic island）。
02
灵动岛能做什么 / 不能做什么
灵动岛其实可以简单的理解为基于前置摄像头区域拓展的消息通知和快捷操作的新交互方式。
来电
当有来电时，灵动岛会发生变化，并在后台打电话时显示通话时间和声音波纹。
音乐
有点类似于锁屏后的音乐功能操作，保留了基本的播放、暂停、前进、后退等功能。
Airpods
连接AirPods后，AirPods的型号外观和当前电量会一起显示。
导航
显示导航方向和距离，并且能够在适当的时候放大显示更多导航信息。
Face ID
以前Face ID认证会显示在屏幕中间，现在集成于灵动岛的扩展功能之中。
充电
当充电时，会显示充电的状态以及当前电量百分比。
当然，目前除了官方展示的这些功能以外，还会有更多的应用方式，在此不一一列举。但灵动岛也并不是万能的，例如会存在以下的局限性：
重度使用场景
从官方给出的样例来看，灵动岛更多的是承担了消息通知和提醒的作用，并不适用于重度使用和复杂交互等场景，例如消息聊天、刷短视频、买卖交易等等。
过于复杂的图形
受限于前置物理摄像头，灵动岛这个区域并不能显示过于复杂的图形，并需要避开摄像头区域，因为该区域是不能显示任何图像的。
软硬件的边界
灵动岛的实际效果并不会像宣传图中那样好，特别是在反光强烈的户外。摄像头的挖孔清晰可见的，即使是在黑色不发光的OLED屏幕上，软件和硬件的界限还是能够明显区分。
03
对于灵动岛的各方反应
新事物的出现，总会伴随着支持和反对两种声音，此次灵动岛的创新交互，自然也是褒贬不一，还需要经受时间的考验，因为即使是苹果这样的公司也难免会犯错，比如3D Touch、MacBook上的Touch bar等。
支持方认为「灵动岛是继刘海屏之后的又一个成功设计，甚至会超越刘海屏，更受欢迎」。
「灵动岛的设计非常讨巧，同时也给挖孔屏带来了更多的想象空间」。
而反对方的理由也十分充分，首先是罗永浩第一时间发表了自己的观点，表面上是硬赞这个创新，但实则是讽刺了这样多此一举的方式，「先在脸上涂屎，然后再把屎的颜色调整得跟粉底差不多」
很多的舆论认为，灵动岛的创新是苹果的一种无奈和妥协，因为自从第一代iPhone革新性的使用触摸屏之后，十多年以来手机在工业设计方面并没有太多的创新，大部分厂家是在屏幕分辨率，后盖材质，摄像头像素上面做文章，而苹果作为一个工业设计创新的公司，也只能通过后置摄像头模组的排列来维持每一代iPhone的变化。所以此次灵动岛的创新，被认为是工业设计乏力之后推动交互设计创新的无奈之举。
但无论支持还是反对，前置摄像头挖孔屏终究是一个过渡性的方案，最终会被全面屏所替代，而在这个过渡时期，很明显苹果的解决思路与国内的绝大多数厂商都不一样。
04
为什么国产手机不做灵动岛
国产手机的前置摄像头解决方案除了「刘海」以外，单摄像头「圆孔」和双摄像头「药丸」设计都已经非常成熟，但是为什么经过这么多年的迭代，依然没有创新呢？
思维方式的差异
国产手机厂商的思路跟苹果相反，希望尽可能的把前置摄像头做得越小越好，甚至头部的厂商尝试探索升降摄像头和屏下摄像头的解决方案，目的就是为了把前置摄像头隐藏。而苹果的思路则是，既然现阶段的技术没有办法把前置摄像头隐藏，那么干脆就以此为基础，把这个区域运用到极致。
缺少创新和引领者
似乎国内的用户更关心的是电量是否持久、屏幕刷新率高不高、拍照功能强不强大等问题，秉持着「人民需要什么，我们就造什么」的成功理念，各大厂商也开始在这些方面内卷，从60Hz到120Hz刷新率，从千万像素到一亿像素，从莱卡加持到一英寸大底传感器... 大家都在做从1到100的事情，而很少有关注从0到1，因为这样做的性价比的确不高。
市场的接受和认可程度
当刘海屏第一次出现的时候，很多用户都在吐槽，其中也包括很多苹果的忠实用户，宁愿买iphone8P也不愿意使用刘海屏的iPhone X。而经过一两年的审美教育以及国产手机的跟风之后，才慢慢的被更多用户所接受。因此国内的厂商很难有信心通过一己之力去改变用户习惯，并赢得市场的认可。我相信，苹果发布以后，各大厂商已经在积极的学习和模仿，新的一轮内卷即将拉开帷幕。
即便如此，国产厂商也并不是完全没有在前置摄像头的区域努力尝试过。例如魅族曾经在前置摄像头上显示当前电量，称之为「环形电量」，并尽可能的使其与状态栏的其它信息融为一体。
荣耀的通话时间胶囊和自拍胶囊，都以前置摄像头为基础做延展，可以看得出在想尽办法的规避前置摄像头所带来的不好体验。
虽然VIVO的原子通知不是围绕前置摄像头区域拓展，但从效果和想法来看，也与灵动岛的概念比较类似。
HTC曾经出过一款HTC U Ultra，当然那时候还没有全面屏的概念，所以HTC把它称之为副屏，可以显示消息通知、音乐播放操作、App快捷入口等等。
除此以外，几乎所有刘海屏的手机都有把刘海隐藏起来的功能。
05
对设计师的影响
灵动岛的出现，对 iOS 原本通知、交互、卡片、弹窗等一系列交互规范进行了解构再重做，就好比「刘海屏」首次出现的时候，需要设计师对全新交互逻辑、卡片行为、动画等重新适配。那么对于「灵动岛」我想需要考虑的是这几个方面。
新的交互方式
之所以叫灵动岛，就是因为它是「灵动」的，拥有不同的状态变化，以适应各种功能提示和操作。设计师在使用这个功能的时候，需要充分考虑其场景，恰如其分的给予提醒而不给用户带来过多的打扰。
新的容器
不同形态的容器可以装载不同的内容，相比于以往常规的通知提醒，新的容器可以展示更多的信息，甚至是简单的功能操作。在提出解决方案的时候，留给设计师更多的想象空间。
新的表达方式
灵动岛相当于一个永远在桌面上的岛屿，比任何App的优先级都要高，所以会成为各个应用的必争之地，使用一种好的表达方式，必然能够达到事半功倍的效果，因此也是考验设计师在寸土寸金的区域中，通过视觉化手段表达的能力。
最后，我想苹果的初衷是为了更好的用户体验，消除一部分用户对于挖孔屏的焦虑，如果能够真正的站在用户的角度、克制的去使用新的交互方式，会得到用户的喜爱和市场的认可。
我认为灵动岛既是一种创新也是一种妥协，对于工业设计硬件创新乏力的妥协，更是对技术发展的妥协。我也相信，真正的全面屏时代终究会到来，期待那个时候苹果再一次给我们带来真正意义上的，里程碑式的，创新！
作者：捡蘑菇的人
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
潮流是个轮回，不光我们看的衣服、化妆品、哪怕是那些短视频，同样的事情也发生在用户界面（UI）设计中。从模仿现实世界物体的界面到没有任何修饰的极简界面，不同的风格优缺点各异。只有学习并了解了历史上曾流行的趋势，你才能进行新的尝试。这对于创新、推动设计行业的发展和提升你自己的设计能力都是至关重要的。下面本文将介绍十大UI设计趋势，对每位设计师来说都值得一看。
拟态主义是用来设计最早的图形用户界面的视觉方法。在拟态主义中，设计元素模仿现实世界中的对应物来连接物理世界和数字世界。最著名的例子是回收站的图标，它模仿了现实生活中的回收站。
当个人电脑或智能手机首次出现时，设计师需要将它们设计成第一次使用的人也能理解的样子。因此，拟态主义设计将与现实世界的相似性置于视觉吸引力之上，以确保直观的用户体验。
苹果公司的iOS操作系统便在早期版本中于用户界面上大量使用了拟态设计。
早期苹果app和软件的视觉界面模仿现实生活中的物体，就算是首次使用的用户也能一眼就看明白
2010年初之前，拟态设计是行业标准。这种设计美学大大方便了人们过渡到数字平台。但随着越来越多的人成为数字原住民，缺乏想象的设计元素对用户体验而言变得不再那么重要。此外，因为高度拟真，所以拟态主义设计元素需要大量的技术能力。人们数字素养的提升为新的UI设计风格兴起铺平了道路。
受极简主义艺术运动的影响，UI设计领域也开始刮起极简的风潮。极简主义的主要原则是 “少即是多”。极简主义并不是空洞和模糊的设计。它推崇的是 “少即时多”–正如美国作家Joshua Becker的书名所言–意味着要简化视觉空间，换句话说，使用更少的元素，以便能够突显最重要的东西。
极简主义界面优雅简洁，注重每个元素的功能，重视负空间和大胆的颜色、字体之间的组合。总的来说，极简主义的用户界面可以非常实用，因为没有任何装饰性元素。因此–如果设计得好的话–用户会有一个高度直观的设计之旅。极简主义界面往往拥有一种优雅而精致的视觉吸引力。
作家Alan Trotter的网站采用了极简UI设计，用户需点击突出显示的单词来查看隐藏内容
极简主义于20世纪50年代末在纽约兴起，其主要特征是秩序、简单和和谐。极简主义的 “少即是多 “原则后来被德国工业设计师迪特尔-拉姆斯改编为 “少而精 “，列为他的“好设计原则”之一。也有人解释这一原则为：”好的设计是尽可能少的设计”。
“一个形状、一个体积、一种颜色、一个表面，它们是独立存在的，不应该沦为整体的一部分。形状和材料不应该被它们所处的环境所改变。” – 唐纳德-贾德，美国艺术家
除了极简主义本身，许多其他的UI设计趋势–包括扁平化设计–都或多或少地遵循了极简主义的原则。
扁平化设计是一种以简约为中心的UI设计美学，它将界面设计的范式从现实中的物体转移到元素的图解简化。这种UI趋势代表了一种实质性的技术优势，尤其是在移动设备上，因为它提升了设备的加载速度。扁平化设计使用极简的方式处理UI元素，不添加任何阴影或装饰物。在个性和视觉吸引力上，扁平化设计很大程度依赖于明亮的色彩和高超的字体排版技术。例如，设计师会寻找本身便足够有趣的字体，但它们的笔画要均匀，并且符合极简美学的风格。
扁平化设计在2012年随着Windows 8、苹果的iOS 7和谷歌的Material Design的发布而获得关注。然而，在某种程度上，扁平化设计缺乏视觉功能可见性，用户有可能不知道哪些元素可以互动。
iOS 7控制中心采取扁平化设计
2.0版本的扁平化设计诞生后，其视觉功能可见性和使用性得到提升。扁平化设计开始利用微妙的阴影或颜色变化来突出互动元素，向用户表明如何与设计进行互动。这些微妙的变化有助于增加深度和维度，从而提高使用性，扁平化设计的视觉效果干净整洁不杂乱。
包豪斯界面设计风格围绕几何图形如半圆形、圆形、矩形、三角形等展开，采用各种创新字体和非干扰、非功能性的细节。这种设计风格依赖于设计元素本身：线条、形状、颜色。包豪斯主义的特点为抽象的形状和平衡的形式。
1919年，德国魏玛开始了包豪斯艺术和设计运动，从而衍伸出了包豪斯用户界面设计风格。包豪斯艺术和设计运动通过将手工业与艺术相结合，在艺术与工业之间架起了一座桥梁。包豪斯运动的基本原则是 “形式服从功能”。这一原则深刻地影响了后世的设计。根据这一原则，从物体的预期功能或目的出发，设计师设计出简单的几何图形，从而制造出一种极简主义美学。它倡导的是一种几何的、抽象的风格，没有什么情感或情绪，也没有什么历史元素。
包豪斯风格下的数字界面有一种优雅、现代和简洁的视觉吸引力。
“将包豪斯原则运用到现代产品设计中，意味着要勇于面对纷杂的质疑。”- Melanie Daveid，用户体验设计师和艺术总监，以及Adobe Live主持人
深色模式的用户界面令浅色文本位于深色背景上。这种颜色方案减少了设备屏幕发出的亮度，一些研究指出，它有助于通过减少眼睛的疲劳来改善人体视觉。这种能潜在改善眼睛疲劳的功能对于用户需要阅读大量内容的界面特别有帮助。而且深色模式在一定程度上有助于节约电量。深色主题界面的诞生是对暗字明底方案的反击，后者模拟了墨字白纸的外观。
深色模式趋势出现在2016年，当时Twitter试验了一个暗色底的颜色方案。不过，在深色背景上使用亮色文本的操作其实早已出现–比如说《黑客帝国》电影中深色屏幕上的绿色数字。但深色模式真正流行开来是得益于苹果。苹果公司在iOS 13的更新中发布了深色模式选项，从那以后，深色模式成为许多界面中的常见选项，用户可以在浅色和深色界面之间进行选择。
深色模式vs浅色模式
深色模式的用户界面具有鲜明、时尚和现代的特征，对眼睛更加温和。因此，深色模式的流行可能缘于解决用户用眼过度问题的需要。如果你的产品需要用户长时间观看屏幕，不妨考虑添加一个深色模式选项。
就拿深色模式来说现在身边很多朋友都在用，所以我们以前不喜欢的，在未来的某一天还是会重新爱上的。
作者：马克笔设计留学
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计的小编 http://www.lanlanwork.com