如何提升UI设计的高级感？来看高手的深入分析！
如何提升UI设计的高级感？来看高手的深入分析！
完美，不是因为没有什么可以增加，而是没有什么可以减少。
创建美观、可用和高效的 UI 界面需要花费时间进行设计细节的打磨，本文从视觉和情感化设计两个方面来说说如何提升 UI 设计的高级感。
在互联网产品日趋成熟的今天，你会发现所有的 App 越来越像，似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。一个 App 设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的 UI 设计。本节总结了 12 个简单直观的提升设计感的小细节，一起来学习。
1. 使用颜色深浅构建层次结构
在对 UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。如果可以的话，你甚至可以采用两到三种颜色：
主要内容使用深灰色（诸如标题，但是不要用纯黑）
次要内容使用灰色（比如商品介绍）
辅助性内容采用浅灰色（比如发布日期）
2. 统一色调
选择一种基础色，再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
3. 干净的阴影
阴影是 UI 设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
4. 个性的图标设计
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
5. Tab 的设计感
Tab 是 App 设计中最常见的控件之一，它源自 Material Design 的设计规范。现在很多 iOS 产品当中也开始使用这种导航栏样式来进行设计，而原本属于 iOS 规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab 和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态。因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。例如虾米音乐的 Tab 选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的 Tab 就被创造出来了。
6. 无框设计 去繁从简
在 UI 设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力，让内容更聚焦。
7. 统一设计元素
在 App 中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观。这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
8. 符合产品气质的字体
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。虽然默认字体可以满足大多数 App 的设计需求。但会出现一个问题就是，系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微。例如在运动类 App 中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
9. 第三方图标风格统一
大多数 App 都支持三方登陆，他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计。一个设计精致的 App 不应漏过任何的细节，我们可以以自家 App 的图标风格为依据，对第三方图标进行优化设计。
10. 图片中寻找色彩
App 中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式，为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
11. 提高图片质量
图片的质量影响着整个 App 的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想。而低品质的图片会瞬间拉低 App 的质感。在 App 设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用。即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
12. 卡片式设计
现在的 UI 界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。
