解析快速提升界面视觉功底的设计技巧

提升视觉基本功的方法：刻意练习版、质、形、色、字新年即将来临，相信大家屁股都坐不住了，都等着回家吃年夜饭。小编也一样，恨不得马上放假，完全没心思上班、写文章。所以今天这篇文章将是年前的最后一篇文章啦， 在这里，小编祝大家新春快乐，过个好年，新的一年里，也更加幸福美满。

| 序言

为一名设计师，除了要进行分析和梳理产品需求的能力，视觉基础力，更是会直接影响到该设计师Level的几大点之一。而分析梳理产品需求的能力，更多的是靠项目堆积下来的，但视觉基础能力，除了在项目中成长外，还能通过刻意练习，来达到一个突飞猛进的状态。

光努力练习就可以了吗?也不全是，很多设计师朋友盲目的对Dribbble跟Behance上的优秀作品进行临摹，缺乏思考，发现最后一旦需要原创了，手上水平还是没太大提升。所以光临摹也是不行的，还需要掌握方法。在这里，小编对视觉表现层分别从几个维度来进行了一下总结，分享一下这几年来提升手头能力时，得到的一些经验跟方法，希望能对部分小伙伴们有所帮助。

| 页面视觉构成几大要素

在一个完整的页面的视觉设计当中，我们可以把其几个核心视觉点进行分解，单独罗列。某些在多个页面设计中，我们可以理解为几大核心点，如『版，质，形，色，字』

版-版式及厚度，版式间距会直接影响到页面的张力及空间感

质-页面风格，肌理维度，整个产品视觉调性，形-大面积区域的形状，控件尺寸比例，icon形状的统一性

色-颜色风格，页面色相，彩度，明度整体风格统一性字-字体的样式，字体，字号，衬线，内容识别性像这些核心元素，我们可以进行进行刻意练习，来提升综合的视觉基础能力，不过首要，我们需要理解并进行梳理。

| 何为版？

版，在界面设计当中，版式会直接影响到用户该页面的理解能力，良好的信息传达力离不开科学的组织布局。信息之间层级关系的罗列展示非常重要，适当的布局，能展示不同信息的差异化，提升用户理解阅读效率，而且视觉上也非常美观大方。

因子一：亲密性这里我们可以通过一个很简单的话术来表达，那就是『同类相近，异类相远』，物以类聚，人以群分。信息联系紧密的，间距相近，信息维度差异大的，间距要远，这样不但视觉上错落有致，而且对于用户理解信息，也是非常有效快速的。

因子二：节奏性

节奏性指的就是在同一个页面内容中，间距呈有规则的变化。所以这也要求这间距的样式不要太多，尽量使用倍数，比如1x、2x、3x、4x。比如现需设计一个让用户感受到轻松愉悦的页面，可以使用较大的栅格间距比例，以12为基准，比如间距一律使用12、24、36、48。如果是信息较为紧密的，则可以使用8的倍数，如8、16、24、32等。当然，这也不是绝对值，具体使用情况，还得根据实际情况跟业务场景而定。

从手动量的尺寸来看，京东金融app的间距是以4为单位进行倍增，但用的则是较大的间距，如24、28、32、36、40、44。而Airbnb则是以12的单位进行缩放，如12、24、36、48、60的单位，不同的栅格比例，传递出来的心理暗示，也是不一样的。所以间距通常没有绝对的设定值，而是根据业务进行适当调整，有规律的进行变化组合。

因子三：页面结构比例

关于页面的节奏比例，大家可以多研究一下黄金比例。黄金比例是在界面设计当中用的较多的一个比例，此比例通过了自然界大数据的验证。在实际项目中，使用黄比例的作品，往往更具有美感，令人赏心悦目。

除了黄金比例，其实还有着白银铂金等比例，这类比例也是具有着较多的美感的。相信很多同学不知道，这里也发出来让各位同学知晓下。网址可自行百度：黄金比例在线生成。

| 何为质？

质，是视觉语言组成的重要部分，页面的风格特征，肌理虚实都靠它来表达。产品的质地风格应当与产品的整体形象保持一致，是多个页面统一风格的重要组成元素。好的质感表现，不仅能帮助用户认识及记住产品特征，更能让产品迅速拉开与同类产品的区别，做到别具一格。这里简单给大家介绍几种常见的风格类型。

样式一：大卡片、轻投影式这种风格在iOS11后更是变的普及了起来，因为微投影能在很好的拉开层级提升空间感的同时，还能让页面变的更为细腻。像苹果的Appstore跟大量其它产品，都使用了这类较为不错的样式。不过要注意的是，渐变样式不能太过于厚重，页面留白要大。另外卡片圆角及投影参数，之前有给小伙伴们提供过的，卡片圆角半径≈卡片宽度的0.04%，阴影颜色=按钮颜色的 Alpha50%，x=0，y=按钮高度的20%，模糊值=按钮高度的50%，扩展=按钮高度的 -15%，高级又简单，完美!

样式二：高纯度渐变在近两年，渐变风又开始变的流行起来，不过跟以前阴影较为厚重的渐变相比，新的渐变样式，变得更为扁平更为轻量化了起来。在Dribbble流行起渐变风之后，国内各大应用也开始使用流行起来，如淘宝与京东金融、优酷、饿了么等主流应用开始纷纷效仿。同样在渐变的配色方案中，不适合多类颜色同时渐变，渐变的两个颜色在一个色系上进行微调即可。

优秀案例by Ervin Halebic