UI设计排版的核心要点有哪些？-优漫动游

　　重复性的元素可以是图案、文字、色彩、空间格式等，重复能增强条理性和界面的统一感，节奏和韵律也需要重复来实现。实际工作中经常能够看到很多类似的版式设计，版式设计是现代设计艺术的重要组成部分，是视觉传达的重要手段。

　　UI界面中的版心

　　在海报设计或者书籍排版中中常常用到版心的概念，把比较重要的信息都放在设定的中心区域内，让版式更加具有一定的透气性；在版心的面积比也可以叫”版心率“，版面率越高，可排版的内容越多，反之则越少

　　网格系统的运用

　　网格系统又叫栅格系统，早期的Web网页设计时开始运用这样的方法，

　　运用网格系统的目的，前面我也提到了其实主要是2个，

　　第一是提升页面条理性的有效设计方法，让排版更加有参考的标准；

　　第二是避免不同设计师设定的间距不同等造成的设计的结果不一致，导致项目延期等风险的发生。

　　栅格实际界面中的运用形式中，可以看到App Store的栅格化采用了左边距40右边距40列12间距20，Medium采用了左边距36右边距36列10间距44，不同产品的栅格定义不同，需要根据自己的产品而定

　　重量级对比

　　色块对比

　　通过对色块通过颜色和饱和度的调节对比，让画面中元素的层次以及重量级的引导，起到明显的作用；不理论是印象笔记的微信强引导的绿色button，还是小红书强引导的白色button都是与其他button采用不同的设计重量级进行区分，而知乎的“选择器”操作则选中button采用高饱和的颜色未选中则选用低饱和的颜色进行对比

　　字重对比

　　通过对标题加粗运用重色、内容运用浅色低饱和的方式，产生视觉差，提高用户的浏览效率以及表达产品的视觉层次；可以看到以下3个案例中很明确的运用了字重对比的版式设计语言进行层次的区分

　　亲密性/贴近度

　　通过对相同属性元素模块化或者区域分隔造成的一种视觉上的相对独立性，使得界面的层次清晰有序，提高用户的识别效率；在以下案例中可以看到京东APP与优酷APP的设计语言都运用了卡片形式制造亲密性，而微信读书则采用了“水槽”分割来制造亲密性版式设计

　　点缀与变化

　　在界面设计中很多时候会出现单纯的图片或者文章类的重复性排版，容易造成视觉上的单调感，我们可以增加修饰性的元素来制造变化，也可以通过穿插不同形式的内容来打破乏味的版式；在优酷的适配标题中可以看到增加了心形或者火苗的点缀形式，而Twitter的的文字列中增加了icon图标；在Medium中对重复性信息中间增加横向滑动的内容来打破枯燥单调的版式设计

　　节奏/重复

　　节奏感，可以让画面元素或者组合呈现一致性的排列，从而达到阅读效率的提升；在App Store的样式采用了列表重复的版式设计，而在大众点评的版式设计中采用了瀑布流的设计语言。