如何设计好UI界面：排版篇

艺中人

排版是界面设计中最基本的，也最重要的，就像是绘画中的造型设计，要是形体不准，上面的细节装饰再丰富也是徒劳。

好的排版能有效地向用户传递关键信息，同时也能提升产品的用户体验，排版已经变成了设计师越来越重视的一个环节，下面总结了一些排版的知识点，希望可以和大家一起成长。

界面设计的6个关键点：

1 留白

2 放大比例

3 对齐与平衡

4 父子主次关系

5 穿插与分割

6 人物与界面关系

1.留白

设计最重要的一点是清晰，所以留白的主要目的是突出重要信息，合理的利用空间关系，使重要的信息一目了然，同时可以让界面透气。

留白的多少，是由界面功能的性质决定的。

1.一般基本功能留白的空间，不会太大，以功能清晰为原则。

2.一些特殊功能的留白空间，会根据界面性质，选择多留出空间，用来增加界面特有的气氛。

或是用来突出重点信息，或是为了符合功能的特点。

file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-8773.png

2.放大比例

界面设计中，让人眼前一亮又印象深刻的，一个最简单的方法，就是打破自己的设计习惯，打破常规，放大功能之间的比例，给画面增加视觉冲击力。

下面看一个案例：

示例a：file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-10941.png

示例b：

file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-12620.png

a和b哪个界面更吸引你？是不是一目了然的a？

3.对齐和画面平衡

对齐是界面设计中一个重要的细节，可以无形中提升画面的整体品质，也是对UI设计师是否合格的一个基本判定。

1.对齐是界面中各个功能之间的调整，比如：文字之间的对齐，文字与界面间距的等比对齐，界面与界面之间的细微对齐调整。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-2921.png

2.对齐也是让画面保持平衡的一种手段，避免画面出现视觉上的不对称不舒服，让画面失衡。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-2726.png

3.对齐不只是信息之间的对齐，还包括画面中功能之间相互呼应的“对齐”，比如图中的左上角和右下角的区域间的对应，避免了一头过重而让画面失去平衡。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-8032.png

4.对齐也包括界面中，功能之间倾斜角度的一致性。

file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-14415.png

整个界面相关功能的倾斜度都是一致的，包括弹窗、文字和背景装饰，会让画面更有动感。

4. 父子主次关系

是指界面中的层级关系，不只是点击操作上的顺序展现，还有视觉上的主次功能先后顺序的展示。

1. 在界面设计中，点击出现的先后顺序的展现，比如切换按钮界面。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-31964.png

2. 视觉上的观看顺序，比如合成功能，技能树。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-797.pngfile:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-11985.png

5.穿插与分割

1.在二次元风格的界面中出现的比较多，也是二次元界面的排版特点，可以让画面更加有活力和动感，也更接近漫画和杂志的排版布局。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-452.png

2.还可以更好的制造出空间感，让画面层次更加丰富。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-4717.png

6.人物与界面关系

其实，游戏UI界面就是，人物与功能和背景三者之间相互衬托相互穿插的展示。

1.一般以角色为主的界面，都是功能围绕角色进行排版设计，比如选择角色界面、换装界面、抽卡界面等。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-24794.png

2.以功能为主的界面，角色会用来衬托功能进行展示，比如7日登录界面、恭喜获得界面、一些奖励界面和一些活动界面等。file:///C:\Users\masc\AppData\Local\Temp\ksohtml\wps_clip_image-23944.png

而背景会根据游戏世界观和游戏本身的风格进行设计，用来装饰和衬托整个画面。

但是，不论怎样设计，都要记住游戏界面是为信息服务的，虽然我们可以加装饰，做各种形式的展示，但是信息部分一定要清晰直观，要第一时间传递给玩家。

同时，整个画面要保持视觉上的平衡。

总结

不论什么样的游戏风格，制作过程中这些思考都是必不可少的，只有通过思考制作出来的界面，才是有灵魂的。