界面内容组织

人类的视觉并不会像相机那样，不加区别的把所有的东西平等地记录下来，而是首先会给看到的信息分类，然后把信息组织起来传递给大脑。其实人脑是很善于发现规律的，而发现规律其实是有助于快速的理解接收到的信息，即使是没有规律的事物，人眼和大脑也会下意识的尝试着去创造规律。那么设计页面时候，需要遵循的一个普适规则。

靠近：隔得近的物体，大脑会把它们自动分为一类，

对齐：对齐的信息给人的感觉更像是同一个平面或者层级，通常还会把对齐和靠近一起使用

类比，样式类似，形状颜色或者风格类似的东西，大脑很容易把它们划分到同一个层级。

隔离：就是用线或者是卡片或者是间距来强制给大脑做区分。

如果希望用户把一些图片，文字标题相互之间是有关联的，就把这些东西相邻放置，这是靠近的原则。

那么除了把相关的信息靠近放置以外，对齐展示也是一个分类的好方法。无论是这种左对齐还是右对齐，人脑的都会认为这种规律是一种信息的分类对齐，这是对齐的原则。

大脑还会把看到的相同样式的信息归为一类，这就是设计师常用的方法，比如相同的字号、相同颜色的图标、相同类型的图片等等，会把它归为一类，这就是类比。

还有就是隔离，界面设计为了区分信息的结构关系和层次用线性或者留白的方式。如果想使用线或者用框来分割内容的话，可以先尝试不划线或不画框，只调整这个间距就能达隔离的效果的话，那么尽量的是不要在页面上添加这种分割线或者分割框。

层次结构

在几秒钟内，用户就能明确知道要点和页面元素之间的关系，并且顺利完成当前任务。建立视觉层次结构可以通过大小，对比，颜色，肌理，留白，空间，可感知的视觉重要，好的设计它的视觉层次结构分明且符合用户阅读习惯。

视觉重量

如何去衡量视觉重量，影响视觉重量的因素有大小、对比、颜色、留白、形状、位置等等，那么在一个界面中如何把握视觉重量的比例，下面看几个例子:

卡片设计

相对于传统的那种列表式的布局也许这种卡片式的布局能够更好的打破原有的框架，传统的列表下面它就是一个纵向滚动的操作，它的展示内容是非常有限的。而像卡片式的布局能够在纵向的内容流里面增加横向滑动的区域而且看起来会更整体，还可以把不同维度的内容放到这种卡片里面，使内容区分的同时还能保持整个界面的统一性。

卡片其实它是一个拟真的元素，它是可以被覆盖，被堆叠，被移动，被滑动的，它有更好的拓展性，可以更好的拓展内容模块。也不能盲目的使用卡片设计，如果屏幕空间足够的话可以用卡片法做一个区分，但是当空间比较有限的时候，就要斟酌一下适不适合用卡片法来堆叠特别多内容的页面。

无框设计

无框设计可以看到整个页面里面没有边框没有任何的分割线，仅仅用间距来区分内容的版块。它比较适用以大图为主而且内容是有规律的，比较适用小众且垂直的产品是以图片为主的产品。它的内容有规律的（留白间距上下的内容相对一致的，重复的，亲密的）这样用户就会下意识的将它们分成一个组。

小众且垂直的产品：是一般情况下，它指的是目标用户，比较聚焦，功能比较单一简洁的产品。

分割线

这条线其实它能够起到分割组织或者是细化的作用，它能够帮助用户了解页面的层次，赋予整个的内容有组织性，条理性。它可以分为全出血的风格线和内嵌式的风格线。

全出血指的是一条横线贯穿整个页面，它一般是为了区分更加独立性的内容信息，在相关的内容进行分割就可以让用户浏览大量相关内容的时更加高效。比如说像早期的qq的消息列表。

内嵌式分割线不是一个全出血纵向贯穿从头到尾，它会在线的两端留有缺口来区分统一模块下的相关内容，类似于卡片法的模块分割。这样可以罗列多个层级关系的东西。像内嵌式的分割线比较适合划分有关联性的内容，同时它可以提升浏览的效率。

间距

在设计界面的时候，将元素分好类之后在模块和模块之间，段落和段落之间，或者是标题与正文之间，可以划定几个固定的高度。在为整个页面排版的时候，要严格按照这几个间距来进行排布，合理的使用隔离从而使整个页面有节奏感。

比如大的边框间隔是20个像素，那么下一个层级间隔是16个像素，在下一个层级间隔是8个像素。把这几个数值定义好，那么到了相关的分割的时候就使用固定的数值，这样页面才会看起来条理清晰，层次明晰。

总结：没有经过合理组织的页面其实就会像一个集贸市场或者夜市一样比较杂乱无章，用户打开它以后会表现出无所适从，因为满屏都是重点，那么用户找不到自己需要的信息或者很难找到自己需要的信息的，当我们把海量的信息和内容摆在用户面前的时候，其实和没有信息差不太多，因为用户无暇消化这么多的信息。如果不是故意的要设计这样的效果的话，那么应该在信息的选择上有取舍。

内容强调

强调是设计师把页面重点用更为显眼或者明确的方式传递给用户，虽然对信息进行了归纳和组织，但是设计师在设计一个页面的时候，整个页面上一定会有一个重点，组织是设计师对已有信息进行梳理和归纳而强调却是设计师主动的一个思考和传达。

太多的信息等于没有信息，太多的强调等于没有强调。

设计师应该控制内容的强弱，通过对比传达自己想要传达的信息，哪些是重要的，哪些是需要弱化的。只强调用户需要达成的目标以及支撑他们做决定的一个关键的信息就ok了，其他的信息就弱化它。

设计统一

在第一次看到一种设计的时，人们的大脑会去寻找它的模式和规律并且记住它，当再次看到类似的设计的时候大脑就会开始匹配之前的记忆模式和规律，不再需要太多的思考。不管何种形式的规律，统一的设计能够降低用户的学习成本。

设计时需要字体，颜色，样式，结构的统一，借鉴已经成型设计规律或模板，借鉴用户已经形成的心智模型。

举个例子，报纸的版式是有一定的规律的，比如日期，出版社，最重要的内容等。其实报纸和手机APP是一样的，无论何种报纸它的版式大致上都是一致的，对应到设计产品的时统一的设计它是可以弥补一些设计上的不足。

直觉设计

所谓的直觉设计，就是依靠用户已经形成的这种心智模型。

比如说在名片上面一般都会印姓名职位公司电话邮箱地址等等这些信息。其实这些信息是有固定的格式的，设计时其实不用加文本标签或者是title用户就知道它是什么东西。那么可以就完全的摒弃掉标签和图标，通过用户成熟的心智模型来让设计变得更加的简洁。

视觉方向

眼动仪

眼动仪早在19世纪的时候人们就通过考察人类的这个眼球的运动来研究人们的心理活动了。通过分析记录到的眼动的数据来探讨眼动和人的心理活动之间的关系。通过收集的数据可以观测到用户在整个页面上视觉的顺序方向以及注视的时长的每个部分，记录人们在处理这种视觉信息时眼动的这种轨迹特征。对于产品的页面布局或者是结构来它是有一定的辅助作用的。但是不能完全的相信眼动仪，因为人的大脑是非常复杂的，不能确定用户盯在这个地方长期看的原因是否这个地方特别重要，但是可以作为一种参考的数据，随着这种技术革新的推广，越来越多的用户研究的行业的人员会在产品设计和研发过程中引用这种这种技术尝试读懂用户眼中的产品和体验，但是不可以过度的去依赖眼动数据。

布局模式 ：设计师要做的就是通过视觉引导，让用户能快速完成任务和达到预期目标，常用的视觉引导有F式布局模式和Z式布局模式。

F式布局模式

F式布局源于NNGroup的一项眼动研究项目，他们跟踪了超过200名用户浏览各种网页时的眼动轨迹，发现用户的眼球快速浏览网页时，尤其是在快速浏览文字内容的时候，眼球的运动轨迹类似字母F（如上图浏览网页视线热区图），并且整个运动过程遵循下面三个部分:

（1）用户先会沿着水平方向浏览，优先浏览内容块的上部，这个时候的眼动构成了字母F最上面一横。

（2）接下来视线会沿着屏幕左侧向下垂直扫视，寻找段落中能引起兴趣点的内容，当他们发现引起他们兴趣的内容之时，继续横向仔细浏览，而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些，而这个视线轨迹则构成了字母F中间的一横。

（3）接下来用户会将视线移到屏幕左侧，继续向下浏览。

如何运用F式布局?

F式布局让设计师能够更好控制内容的可见性。

（1）确定内容的优先级如果设计师对于页面中内容的轻重缓急有着足够的了解，那么就可以结合用户的浏览习惯，将重要的内容排布在用户视线时常停留的位置。让这些呈现重要内容的“热点区域”承载核心的交互。

（2）设置初始预期文本的前几段内容是非常之重要的。尽量让最核心、最重点的内容放置在页面的顶端，这也是为什么标题、引言和导航栏是如此的重要的原因。

（3）为速读而设计用户通常不会一个字一个词地阅读文章，而是通过意群来获取内容，所以，设计师需要将可能包含用户感兴趣内容的意群按照F式布局来排布。

（4）善用侧边栏侧边栏通常可以帮助用户深入到下一个层级，用户的交互也更加的深入，提供用户想要看到的内容，而不是广告、相关文章和小控件这样的东西。将它设计成为用户找到特定内容的工具。最常见的设计是目录列表，标签云和“最多点击”文章列表。

（5）避免无聊的布局 F式布局最大的问题是它会让整个页面看起来比较无聊。相似而重复的内容出现在整个页面的不同位置，用户很可能在相似的布局中快速感到疲倦。所以，设计师需要创造一些和打破尴尬格局的元素，让用户不断调整注意力，持续的阅读。

当然，F式布局是遵循人类浏览信息的趋势和习惯的，它能帮设计师优化布局与结构，设计师并不一定非得这么用。有趣的设计和良好的可读性同等重要，有的时候兼顾两者并不难。

Z式布局模式

从字面意思可以看出，Z形布局是沿着Z的图形追踪，用户在扫描时候从左到右，从上到下，这是眼睛在页面中的自然移动模式。 Z形结构不会把注意力放在文字为核心，往往是突出行动按钮，在一些机简的设计项目中运用比较多，往往只需要一个简单的图片和文字，关键的地点案例，作为突出即可。Z布局，在平时网页设计中尤其运用频繁，它的规则适用于大多数网站设计，在传递品牌同时，也能很好的凸现内容。

如何运用Z式布局?

在布局之前先问自己几个问题:

(1)当用户打开这个页面时候，你希望他注意到那些信息?

(2)你希望他们以什么样顺序查看你的信息?

(3)你想让他做什么?

Z布局的前提其实很简单，在页面上加上Z，然后把重要的信息放到Z上，让用户在扫描路径上看见这些重要元素。所以Z视觉动线，最核心的是你需要传递给用户那些有价值的信息。

手机操作热区

通过调研大概得出的是，单手操作手机的用户占50%。一只手支撑一只手操作的可能占到35%，双手操作的用户可能只占15%。那么在单手操作的情况下，使用右手拇指操作的又占70%。左手拇指操作的占30%。这里是这个iphone随着屏幕尺寸变化的这个拇指。随着屏幕的增大。对于屏幕上每个区域操作的难易程度是有变化的。

绿色是最容易操作的区域，橙色是可以操作的区域，红色是不通过调整手势是无法触及的区域。那么不可以把高频操作的不管是按钮啊还是各种交互的控件放在红色区里面。设计我们整个页面的时候，要尽量把我们需要用户和用户交互的控件和操作放在绿色或者是橙色的区域。