转载声明：文章来源https://zhuanlan.zhihu.com/p/78997883

视觉表现在UI设计中的重要程度无需多言，同时作品的细节表现也很大程度影响着使用者的体验效果。今天范儿姐就跟大家分享一些UI设计中视觉方面的流行趋势和技巧~

01创意动画增加趣味性

公众喜欢有趣，可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号，融合到产品设计中，从而提升视觉的一致性，创造富有特有性格的产品界面。

微交互是建立在移动端上微妙视觉效果的小动画，而图标动画是微交互其中的一种。它的目的是吸引用户，让用户感觉顺畅、愉悦。

02留白分隔使界面更加透气

在 UI 界面中，最常见的分隔方式是用细线对模块进行划分，但随着设计重心趋向简约，注重内容本身，传统的分隔线方式就略显多余。

根据格式塔亲密原则，通过留白控制间距大小，可以清晰地划分模块层级，同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。

03按钮色彩凸显重要性

在给用户提供多个选择的时候，可以通过色彩所传递的情绪是积极还是消极的，来简单快速地进行设计。

如果你的网站或者 APP 涉及到重要性不同的若干交互，除了按钮都要标识出相应的文本标签内容以外，还可以借助色彩填充与否来进一步区分层级结构：

有色彩填充的按钮、幽灵按钮（无色彩填充、有边框）以及无边框无填充按钮来区分。而在少数情况下，对于系统有重要影响的、破坏性的或者限制性的按钮，也应该突出显示，但是可以使用红色来进行强调和警告。

04品牌形象插画塑造高辨识度 ID

随着软件技术的提升，3D 插画在这几年中大受欢迎，很多应用都使用 3D 渲染产品，如：星巴克、Keep、毒App 等等，因为它真实立体，有着更高的转化率。

05用阴影替代边框

想要凸显一些元素，并不一定需要依靠描边。使用阴影则可以起到同样的效果，单独使用则会显得更加整洁。描边+阴影则会显得过于杂乱。

使用相对不那么具有侵略性的小阴影无疑让效果更加轻松，看起来也不会突兀。

06注重内容

重内容、轻 UI，把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点，就是文字都是黑白灰，将彩色交给图片去传达，让用户关注内容即可。

07合适的界面字体
字体的选择是由产品属性或品牌特性的关键词而决定。
一般中文字体种类分为：黑体、宋体、仿宋、楷体等；英文字体种类分为：无衬线体、衬线体、意大利斜体、手写体、黑字体等。

线上中文字体推荐使用思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简。其中 iOS 系统默认中文字体是「苹方PingFang」，Android 系统中文字体使用「思源黑体Noto Sans CJK」。

线上英文字体推荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系统默认英文字体为「San Francisco」，Android 系统默认英文字体为「Roboto」。

线上数字字体推荐使用DIN、Helvetica Neue。

DIN 起源于 1995 年的德国，无衬线字体，易用耐看、字形开放，是设计师最爱的几类字体之一，适合显示比较长的大号数字，但是小字号的情况下识别度较低。

Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外，还是 Helvetica 的升级版，拥有了更多的字重，可以作为 iOS 和 Android 跨平台数字字体使用。