超级实用的设计原理，你知道吗？

版权申明：本文出自“夜路设计师”原创，感谢“夜路设计师”的原创教程分享！

前言

设计本身就是一门理性的学科，审美因人而异，只有言之有理的设计才能够说服别人。当设计师拿到产品原型开始做设计时，如果只是单纯的按照原型进行而不考虑任何规则，那么必然就会产生一些不协调的结果。

设计完之后也无法用专业知识说服甲方，在UI设计中其实也存在大量的版式设计原理，如果产品和设计都能对版式设计有一定的了解，那么评审设计输出稿的时候，大家也就能够更好地理解对方的设计。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

1.信息的排布

对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。

对齐除了能建立一种清晰精巧的外观，还能方便开发的实现。基于从左上至右下的阅读习惯，移动端界面中内容的排布通常使用左对齐和居中对齐，表单填写的输入项使用右对齐。

做设计和做其他的事情是一样，也有轻重缓急，不要让用户去发现重点和所需要注意的地方、作为设计师我们应该引导用户、使其顺畅、舒适的接收到我们所要传达的信息。重复和对比好比是一套组合拳，重复使页面更有条理性和统一性、同时也有利于用户的接收，降低用户识别度。突出重点信息的时候就该用到对比了。

在排布复杂信息的时候，如果没有规则地排布那么文本的可读性就会降低。组织信息可以根据亲密性的原则，把彼此相关的信息靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于减少混乱，为读者提供清晰的结构。

在设计表达的时候，一定要考虑内容的易读性。适当使用图形可以增加易读性和设计感，而且图形的理解比文字更高效。那些用文字方式表现时显得冗长的说明，一旦换成可视化的表现方式也会变得简明清晰，可视化的图形可以将说明/标题/数值这种比较生硬的内容，以比较柔和的方式呈现出来。(如下图)

2.图片的使用

图片在设计中也是占比非常大，想象下，如何一篇文章通篇都是文本、用户很容易产生视觉疲劳。图片的色调选择，所表达出来的调性大不相同，合适的图片也能散发出整个应用的气质，直接传达给人"高级"，"平民化"，"友好"等不同的感觉。

在内容比较少但是又想提高版面率的话可以采用一些色块，或者抽象化模拟现实存在的物件，例如电影票，书本纸张，优惠券，便签等的效果，使界面更友好也降低空洞的感觉。

3.颜色的使用

不同的颜色可以带给用户不同的视觉感受，这点应该是常识。在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/腾讯蓝/京东红/阿里橙等等。

• 邻近色配色(色相环上邻近的颜色)，这种方法比较常用因为色相柔和过渡也非常自然。

• 同色系配色(色相一致，饱和度不同)，主色和点晴色都在统一的色相上，给用户一种一致化的感受。

• 点亮色配色，主色用相对沉稳的颜色，点晴色采用一个高亮的颜色，起带动页面气氛，强调重点的作用。

• 中性色配色，用一些中性的色彩为基调搭配，弱化干扰。这种方法在移动端是最常见的方法。

4.留白的艺术留白

作用之一就是突出主题；降低次要元素对于主题的影响，过多的元素干扰会分散用户视觉注意力，留白在视觉上给与主题充分的主导地位。（如百度搜索）

适当的留白可以提升作品整体的通透性、空间感，而这样的作品更易于用户接受，给人的感觉也更加舒适！再比如我们平时看的书，书中字与字之间、行与行之间、段与段之间都存在着大小不等的留白空间，这些留白目的就是增加整体的通透性，进而提升整体的可阅读性！

相信很多上班族都经历过早高峰和晚高峰的公交车或者地铁，感受一下，说下你的感受？（我胸闷气短～）

不要误以为留白是万能的！其实并不是所有的作品都需要大面积的留白，比如：有气氛类的活动、节日、功能性很强的详情页等，如果还采用大面积留白的方式做，反而会适得其反；留白固然重要，但是不能盲目的追求一种形式，掌握好留白的比例很重要；灵活运用才是王道！

‘FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/’