16个保姆级UI界面版式设计实用小技巧

2022-02-18 点击量：

我为大家整理了非常实用的，实际工作中学来即用的版式设计小技巧，希望你都能读懂、吸收、运用~提升自己的设计能力和水平；

懒人目录

一.前言

二.UI界面中实战版式技巧分析

三.总结思考

一. 前言

在做UI界面的时候，很多时候我们需要去看很多的产品进行竞品分析、市场调研，不论是交互逻辑还是设计细节，非常占用设计师的时间成本，在这里我为大家分析和整理了常用的一些实战设计小技巧，帮助大家节省一些搜集资料的时间，希望帮助设计师们提高设计品质和效率！

二. UI界面中实战版式技巧分析

1. 版面中的空间关系元素

在界面版式设计中，可以运用平面设计中的结构思考方法去理解UI界面中的空间元素结构的分布对应，下面以新闻类客户端为例进行页面元素分析

2. 内容过多处理方法

为了让阅读更有效，可以采用不同标题规格、不同编排比例或不同色底进行层次上的划分

3. 模块化分割方法

线条分割和空间分割的区别，分割线给人一种压迫感，而空间的分割给人更加轻松的阅读感受

4. 如何改变版面图版率与视觉空间比重

我们来看下qq音乐会员中心页面的设计，不同的等级对应不同的颜色card，运用颜色填充背景吸引用户增加界面专属比重，起到账户切换视觉的引导作用，嘉瑞广告，是一个很好的设计思路

5. 根据主题选择配图及配色方案

我们在做设计时很多时候会去追求“高级灰”、“高逼格”亦或者是“独特性”，其实更重要的是要符合产品的调性和产品对象人群，不能一味的去追求自我的“设计追求”，比如下面的2个案例就很好的表达出了产品的调性，明确的告诉用户我是做什么产品的，为什么样的人群去服务的

6. 画面焦点

表示在画面中相对更加突出的内容，让用户在浏览产品时能够第一视觉捕捉用户的眼球；焦点是相对的，在大页面中可以是焦点，在小模块中也可以是焦点

6.1 页面中焦点

采用模态效果的弹窗给人以不可忽视的方式出现

6.2 模块中的焦点

我们可以看到在优酷的“我的”页面信息以卡片的形式呈现，而会员购买入口则以一种带有色彩倾向性的颜色设计，表达了其的重要性；还有优酷的首页精选的卡片中“全网独播”等角标的设计在每一个模块中都很抢眼，很容易就能够捕捉到用户的视觉重心；苹果手机自带日历中当前日期的红色选中态以绝对的焦点方式设计呈现给用户

7. 界面平衡

平衡是版面元素上下左右比例都比较适中，给人一种稳定和平衡的视觉感受。平衡的版式设计可以让画面稳定不会产生上下比重失衡的现象，平衡的比例构图令人愉悦，而不平衡的设计会造成不稳定的分散注意力。视觉平衡是指在设计中的负元素和正元素比例相对合适，设计师的作用就是发挥元素的视觉重量的构图平衡。

8. 字体的选择

很多时候有的设计师在做界面时候都希望全端的字体能够统一，最好的办法是嵌入文字包，但给代码包增加了负担，所以我们需要去取舍！很多国产安卓手机都有自己的系统字体，要实际调研真机效果（如差异不大非必须嵌入字体）苹果和安卓常用字体如下

 9. 有节奏感的版式设计