超实用！移动端界面中的版式设计原理(上)

ustinlam：“我总觉得页面不是很好，但我说不出来”，“我不懂设计，但我只是觉得不协调”，“你觉得这很好吗？”你的审美观应该得到加强，”这些听起来熟悉的话往往是产品和设计矛盾的开始。还有一种评价叫做好或坏，我相信很多人也有同理心的无助。

事实上，设计本身就是一门理性的学科，审美因人而异，只有合理的设计才能说服他人。当设计师得到产品的原型并开始设计时，如果他们只是遵循原型而不考虑任何规则，那么很多时候就会产生一些不协调的结果。设计完成后，产品不满意，他们也不满意。

事实上，UI设计中也有很多布局设计原则。如果产品和设计能够对布局设计有一定的了解，那么当设计师获得原型并评估设计输出草案时，每个人都能更好地理解彼此的设计。下面我总结了几个常见的布局设计原则，这是在工作中取得良好视觉效果的前提。

1. 信息的排布

在安排任何信息时，首先要掌握的是对齐/重复/亲密/对比，贯穿设计的四个原则。

对齐不仅可以建立一个清晰和精致的外观，而且可以很容易地实现开发。基于从左到右的阅读习惯，移动终端界面中内容的布局通常使用左对齐和中间对齐，表格中填写的输入项目使用右对齐。

和做其他事情一样，设计也应该有优先事项。不要让用户找到关键点/需要注意的地方。用户应该能够顺利地接收我们想要传达的重要信息。重复和比较是一套组合拳，使设计中的视觉元素在整个设计中重复出现，不仅可以增加组织性，还可以增强统一性，降低用户认知的难度。然后，当需要突出关键点时，可以使用比较技术，如图片大小或颜色的不同，以便用户能够直观地感受到最重要的信息。

在安排复杂的信息时，如果不规则地安排，文本的可读性就会降低。组织信息可以接近彼此的相关信息，并根据亲密性的原则将其组合在一起。如果多个项目相互接近，它们将成为视觉单元，而不是多个孤立的元素。这有助于减少混乱，为读者提供清晰的结构。

在设计表达时，我们必须考虑内容的可读性。适当使用图形可以增加可读性和设计感，对图形的理解比文本更有效。一旦用可视化的表达方式取代可视化的表达方式，那些在用文字表达时显得冗长的解释就会变得简洁清晰。可视化的图形可以以相对柔和的方式呈现描述/标题/值等僵硬的内容。

2. 图片的使用

在确定应用程序的页面结构和文本后，有必要开始安排图标/按钮/图片。此时，页面将从简单文本的“阅读”结构调整为“观看”结构，这将对页面的可读性和页面的整体效果产生巨大影响。页面中图片的比例称为图片版本率。通常，降低图片版本率会给人一种安静、优雅和先进的感觉。提高图片版本率将充满活力，使图片具有感染力。

事实上，这也与选择图片的元素/色调/表达的情感有关。合适的图片也能散发出整个应用的气质，直接向人们传达不同的感受，如“先进”、“平民化”和“友好”。

如果内容较少，但想要提高布局率，可以使用一些色块或抽象来模拟真实对象，如电影票、书籍、纸张、优惠券、笔记等，使界面更加友好，减少空虚感。这样，页面的视觉体验也可以改变，但这种方法最多可以改变页面的颜色/纹理，而不能改变“阅读”内容的比例，这需要注意。

3. 颜色的使用

不同的颜色可以给用户带来不同的感觉，这应该是常识。在移动终端界面中，通常需要选择主色、标准色和晴色。移动终端与网页终端略有不同。虽然主色决定了图片风格的颜色，但通常不会大面积使用。通常在导航栏/部分按钮/icon/出现在特殊页面和其他地方会有点阳光明媚。统一的主色调也可以让用户找到品牌感的归属，如网易红/腾讯蓝/京东红/阿里橙等。标准颜色是指确定文本/线段/图标/背景等颜色的整个移动界面的颜色规范。标题文本/按钮/图标通常用于标题，通常起到强调和引导阅读的作用。

主色可能有不止一种选择，画龙点睛通常由两三种颜色组成。标准色是一组从强到弱的标准色。因此，有不同的方法来选择明亮的颜色和主色，主色和主色。第一种是相邻颜色的颜色匹配（相邻颜色在色调环上）。这种方法更常用，因为柔和的色调过渡也非常自然。

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

第三种是明亮的颜色匹配，主色相对平静的颜色，明亮的颜色，推动页面氛围，强调关键作用。

第四种是中性配色，以一些中性配色为基调，弱化干扰。这种方法是移动终端最常见的方法。

还有一些渐变、明暗对比、多色搭配等方法在这里不一一解释，你可以感受一下。

未完待续。