移动端界面中的版面设计原理

1、移动端界面 中的版式设计原理 Layout Design 我总觉得 页面不太好看 但是我 又说不出来 你觉得这好看？ 你的审美 要加强啊 我不懂设计， 但是我就是觉得 不协调 说不出 哪里好 也说不出 哪里不好 其实设计本身就是一门理性的学科，审美 因人而异，只有言之有理的设计才能够说 服别人。当设计师拿到产品的原型开始做 设计时，如果只是单纯的按照原型进行而 不考虑任何规则，那么很多时候就会产生 一些不协调的结果。设计完之后产品不满 意，自己也不满意。 在UI设计中其实也存在大量的版式设计原 理，如果产品和设计都能对版式设计有一 定的了解，那么设计师拿到原型的时候， 评审设计输出稿的时候大家

2、都能更好地理 解对方的设计。以下我总结了几种常见的 版式设计原理，是工作当中做出良好视觉 效果的前提。 01 信息的排布 HOW TO MAKE A BERUTIFUL UI? 对任何信息进行排布的设计的四大原则 对齐 重复 亲密 对比 对齐除了能建立 一种清晰精巧的 外观，还能方便 开发的实现。基 于从左上至右下 的阅读习惯，移 动端界面中内容 的排布通常使用 左对齐和居中对 齐，表单填写的 输入项用右对齐。 设计和做其他事情一样，也要有轻重缓急之分，不要 让用户去找重点/需要注意的地方，应该让用户流畅 地接收到我们想要传达的重要的信息。 重复和对比是一套组合拳，让设计中的视觉元素在整个设计

3、中 重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。 那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的 不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。 在排布复杂信息的时 候，如果没有规则地 排布那么文本的可读 性就会降低。组织信 息可以根据亲密性的 原则，把彼此相关的 信息靠近，归组在一 起。 如果多个项相互之间 存在很近的亲密性， 它们就会成为一个视 觉单元，而不是多个 孤立的元素。这有助 于减少混乱，为读者 提供清晰的结构。 在设计表达的时候， 一定要考虑内容的易 读性。适当使用图形 可以增加易读性和设 计感，而且图形的理 解比文字更高效。 那些用文

4、字方式表现 时显得冗长的说明， 一旦换成可视化的表 现方式也会变得简明 清晰，可视化的图形 可以将说明/标题/数 值这种比较生硬的内 容，以比较柔和的方 式呈现出来。 02 图片的使用 HOW TO USE PICTURE? App的页面结 构和文本确定 之后，就要开 始安排图标/按 钮/图片的安排 了，这时页面 也就从单纯文 本的“阅读” 型结构调整为 “观看”型结 构，对于页面 的易读性以及 页面整体的效 果会产生巨大 的影响。 页面中图片所占的 比率叫做图版率， 通常情况下降低图 版率会给人一种宁 静典雅、高级的感 觉。提升图版率会 有充满活力，使画 面有富有感染力的 效果。 实际中也跟

5、选取图 片的元素/色调/表 达出来的情感有关 系，合适的图片也 能散发出整个应用 的气质，直接传达 给人“高级”， “平民化”，“友 好”等不同的感觉。 在内容比较少但是又想 提高版面率的话可以采 用一些色块，或者抽象 化模拟现实存在的物件， 例如电影票，书本纸张， 优惠券，便签等的效果， 使界面更友好也降低空 洞的感觉。 通过这种方式也可以改 变页面所呈现出的视觉 感受，只是这种方法最 多改变页面的色调/质 感，并不能改改变“阅 读”内容的比例，这点 是需要注意的。 03 颜色的使用 HOW TO USE COLOR? 不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界 面中通常需

6、要选取主色，标准色，点晴色。移动端与网页端稍微不同， 主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。 通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调 的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/ 腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范， 确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/ 按钮/icon等地方，通常起强调和引导阅读的作用。 主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准 色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之 间的选择上便有不同的方法。第一种是邻近色配色(

7、色相环上邻近的 颜色)，这种方法比较常用因为色相柔和过渡也非常自然。 第二种是同色系配 色(色相一致，饱 和度不同)，主色 和点晴色都在统一 的色相上，给用户 一种一致化的感受。 第三种是点亮 色配色，主色 用相对沉稳的 颜色，点晴色 采用一个高亮 的颜色，起带 动页面气氛， 强调重点的作 用。 第四种是中性色 配色，用一些中 性的色彩为基调 搭配，弱化干扰。 这种方法在移动 端是最常见的方 法。 还有一些渐 变，明暗调 对比，多色 搭配等方法 在这里不一 一说明，你 感受一下。 04 留白的使用 HOW TO USE WHITE COLOR? 不单单是文字和图片需要设计，留白也是构成页面排版

8、必不可少的因 素。所有的白都是“有目的的留白”，带有明确的目的来控制页面的 空间构成。 常见的手法有几种，第一通过留白来减轻页面带给用户的负担。 首屏对一个应用来说十分重要，因此一些比较复杂的应用首评都堆积 了大量的入口。如果无节制的添加，页面中包含的内容太多时，会给 人一种页面狭窄的感觉，给用户带来强烈的压迫感，所以元素太多有 时候反而不是好事。留白能使页面的空间感更强，视线更开阔，通过 留白来减轻页面的压迫感，使用户进入一种轻松的氛围。 第二通过留白区分 元素的存在，弱化 元素与元素之间的 阻隔。 表单项与表单项之 间，按钮与按钮之 间，段落与段落之 间这种有联系但又 需要区分的元素用 留

9、白的方式可以轻 易造成一种视觉上 的识别，同时也能 给用户一种干净整 洁的感觉。 第三通过留白有目的的突出表达的重点。“设计 包含着对差异的控制。 不断重复相同的工作使我懂得，重要的是要限制 那些差异，只保留那些最关键的。”这句话出自 原拓哉的“白”一书中，通过留白去限制页面中 的差异使内容突出是最简单自然的表达方式。减 少页面的元素以及杂乱的色彩，让用户可以快速 聚焦到产品本身，这种方法在电商类的应用上被 大量的使用 第四留白赋予页面构成产生不同的变化。版式设 计中要有节奏感，这也是我一直强调了。 传统杂志在每一页翻开都会有不同的视觉感受， 我认为在app内很多板块之间的也是可以局部去 突出

10、个性或特点的。 留白可以赋予页面轻重缓急的变化，也可以营造 出不同的视觉氛围，通过留白去改变版式再配合 四大原则可以产生出不同的效果。 留白不是一定要用白色去填充界 面，而是营造出一种空间与距离 的感觉，自然与舒适境界 05 视觉心理的运用 HOW TO USE PHD? 在观看事物时，往往会产生一些不同的视觉心理，例如两个等宽 的正方形和圆形放在一起，你一定会觉得正方形更宽。在版式设 计中同样大量运用这些科学视觉方法对用户进行视觉上的引导， 也能让设计师快速找到一些排版布局的方法。 首先最常见方 法是的是灵活 运用黄金分割 比，文本与线 段的间隔，图 片的长宽比等 地方都可以通 过黄金分割比

11、 快速的设定。 比如通栏高度 的设定等等。 在界面排布中，往 往圆角和圆形比直 角更容易让人接受， 更加亲切。 直角通常用在需要 更全面展示的地方， 例如用户的照片， 唱片封面，艺术作 品，商品展示等地 方。在个人类的 feed或者头像，板 块的样式等使用圆 角会有更好的效果。 在全局页面的排 版中也要避免单 调，增加节奏感。 在上文我也提到 过排版要有轻重 缓急之分，这样 让用户在观看的 过程中不会感到 冗长，无趣。 图片也是有不同的 色调的，通过蒙版 的方法可以控制这 种色调。 如果选择比较明亮 的色调可以减轻这 种对用户的压迫感， 选择比较暗的色调 可以让整个画面更 沉稳，内容显示更 为清晰。 06 去设计化 NO DESIGN? 最后这段不是版式设计原理，更像是一种设计的心境。 古人在写诗的时候有一种手法叫白描，原拓哉也曾强调 “最美的设计是虚无”，在界面设计中同样追求一种“让 用户感受不到设计”的境界。每一条线/每一行文字/每一 个按钮的存在都是都有它存在的理由。 它不加无意义的修饰、不须陪村和烘托，让用户更关注内 容的主体，弱化对视觉的认知。甚至于用户在滑动时看到 一个按钮或一行文字也感觉这是理所当然的存在。“菩提 本无树，明镜亦非台”，做