万字干货！全新 UI 视角帮你掌握「界面三重构」的知识点( 四 ) 编辑导语：好的界面设计有利

3.跷跷板原理四角压边的本质是跷跷板原理，通过调整元素让界面达到平衡。
跷跷板原理本质是平衡，需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。
在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大，右边的重量小，但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计会被大量运用。

文章图片
4.8点网格（4点网格）8点网格理论来源于谷歌MaterialDesign的设计语言， 4点网格理论来源于苹果iOS的设计语言。
个人还是更加喜欢iOS的4点网格，因为原子单位越小，可呈现的方式越多，可解决的问题方案也越多。
8点网格可以理解为最小单位，其他使用的单位都为8的倍数。 8点网格多用于DIV盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用8的倍数。

文章图片
苹果和谷歌都是在定义产品系统中的度量单位，西方人一直想定义度量这个问题，其中最有名的就是勒·柯布西耶的《模度》，他的理论是以西方人的的比例结构来定义规范，并不能适用于全世界更多的人种比如东方人、非洲人。
但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的，最小为44pt 。 iOS定义了人类使用触控屏的基本度量， 44pt也是4的倍率，这才是我喜欢iOS的4点网格的真正原因。
5.视觉流引导读者在看界面的时候，眼睛的视线受到画面内容的吸引，就会产生一个视觉先后的次序，将这些视觉集中点的先后依次连起来，就形成了视觉流导向。
设计师经常会考虑版面或界面上的文字是否会被阅读，实际上很多文字都不会被阅读，但是可能会被浏览。
视觉眼动仪可以检测到人们如何浏览一个页面的，从找到切入点，到了解界面中信息关注的先后次序，从而调整界面元素，来引导用户去关注重要且有用的信息。常用的视觉流导向有F模式、Z模式、古腾堡图表法等。
（1）F模式
尼尔森F型视觉模型由JakobNielsen于2006年提出，他指出用户在浏览界面时，视线动线会呈现宛如英文字母F的形状，这种视觉浏览模式主要包括以下三个方面：
读者的眼睛会先从顶部开始，从左到右水平移动，浏览的上半部分会形成一条横向的运动轨迹，这就是F形状的第一条横线。读者的目光会向下移动，并再开始从左到右观察，但浏览的视觉动线长度会相对短些，这就是形成了F形状的第二条横线。读者从界面左边的部分进行垂直扫描，以较短的长度向下扫描，此时读者的阅读速度较慢，而且更有条理性和系统性，这样就形成了F形状的一条竖线。
文章图片
根据尼尔森F模型，我们可以得出几个心理暗示：
读者在浏览界面时是快速扫视，不会仔细阅读每一个界面内容。界面的头两段文字无比重要，多用小标题、短句引起阅读者注意。将重要的内容放在最上边，将重要的信息显示在标题和段落的前部显示给读者。（2）Z模式
Z模式是基于用户从左到右自上而下的阅读习惯，用户首先关注的上半部页面的内容，依照从头部的左边到右边，再沿着对角线浏览下一部分的中部左到中部右，循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。