网页 UI 设计模型 — 布局样式

一：卡片

Google+

卡片式布局能够让网站以摘要形势呈现大量内容，卡片式风格在现在也是大行其道。

作为可点击的信息容器：小尺寸的预览足够让用户找到需要的信息。每个网站的卡片风格其实是不一样的，大多数包含图片和描述。

卡片式风格和响应式网站是绝配，由于每个卡片都是独立的，他们无论放在哪个位置都能适应屏幕。对于内容较多的网站，卡片有很多好处：

· 直观 — 不需要说明信息；
· 响应式设计便利性 — 每个独立的卡片能够很好适应屏幕；
· 易分享 — 便于分享特定内容到社交媒体网站；
· 通用 — 适用于各种风格的网站。

要点：

1. 整个卡片可点击而不只是部分；
2. 每个卡片聚焦一个中心概念；
3. 选择图片时考虑小屏用户的体验，需要为不同的设备剪裁；
4. 不需要太复杂，简洁是卡片的灵魂，基础的图片加精简描述即可。

二：网格

Youtube

网格结构能够使浏览更加容易，卡片通常是放在网格中。网格在尺寸、空间和栏目数量都有可能变化，YouTube 遵循了严格的网格系统，有些网站则故意避开这种直来直去的风样式，如 Huffington post：

Huffington post

要点：

1. 格外留意白色的间隙，空隙越大每个卡片内容得到的关注就越多，但速度可能会越慢。
2. 一致性非常重要，尤其是考虑到多屏适配问题。确保布局在每个响应节点都能够被识别。
3. 新手可以从基础的 12 栏布局开始，推荐一个工具：960js。

三：杂志样式

TIME

此类网站经常需要更新大量内容，杂志风格有多变的栏目、卡片、和头条打破单一的网格布局。屏幕的左侧通常会排列一些卡片，而右侧会有一些文本链接。

以 Buzzfeed 为例：第一栏是特定的内容，图片旁边有详细的描述；中间是即时的新闻，图片下方带有简单描述；最后一栏是排行，排列的图片并没有描述。请注意他们的字体：通过文字的颜色和尺寸变化来创造视觉层级。

BuzzFeed

要点：

1. 和印刷杂志一样，这类风格着重于图片。屏幕的中间通常会有一个主要的图片来吸引用户注意力，之后才会浏览更小的次级图片；
2. 这种样式通常会在一侧放置水平/垂直菜单。

四：无边框样式

Apple

这种样式将极简主义带入另一个层级，去除了所以不必要的视觉元素。相较于传统的区块分割，这种样式依赖于视觉、组合和常识来维系结构。

传统上来说，网页设计用线条和高度结构化的布局来呈现信息。无边框样式让内容更加突出，但是需要注意保持视觉层次感。Apple 网站抛去了所有边框，链接全部以文字形式代替，用很清楚的视觉设计来表达内容关系。

要点：

1. 排版对无边框设计相当重要，尺寸、字号、颜色都能传递信息。Apple 在标题使用大文字，对二级描述用相对较小的文字，给链接的文字加上蓝色；
2. 为防止用户困惑，让大部分元素可点击。如果用户对某个元素感到困惑，他们大多数会去点击测试是否可交互；
3. 内容量很大的网站很难采取这种样式。

5. 分屏

laurenwickware

分屏适用于给两个同等重要的元素进行排版，同时这两个元素类型对立，用户在开始的时候就要进行选择。

要点：

1. 分屏适用于强烈对比。用对立的特征将两边区分开来，如不同颜色、不同的文字尺寸、不同的图片；
2. 保留一个独立的统一的导航菜单，最理想的是在最上方，适用于两边屏幕；
3. 分屏样式对内容的扩展不太友好，所以内容较多的网站不建议使用。

6. F 模式

Yelp

如果网站有很多内容，尤其是文字的话，F 模式非常合适。

Nielsen Norman 小组的视觉追踪研究揭露了用户的内容浏览模式非常像 F 或 E。用户会从右上角开始浏览，然后水平的浏览，之后转向下一行，直到找到感兴趣的内容。

当网站有很多内容的时候，F 模型将其组织成水平的行，上下并列。这位用户的视觉移动铺好了道路，并且给力设计师更多的控制力。

要点：

1. 将重要的内容放在左右两边，这两边的终端是用户开始和结束他们视觉搜索的地方。而短暂的停留也可了用户思考的空隙；
2. 在新段落的开始处放上引诱性的关键字，此外在段落中高亮关键字；
3. 开始的两行是最重要的，如果用户刚开始没有找到想要的信息，他们就会离开；
4. 在右边栏展示相关的但没有联系的内容，这块区域可以被看到，但是存在于视觉浏览进程之外；

七：Z 模式

KFC

和 F 模式一样，Z 模式布局模仿用户自然浏览方法。然而，Z 模式更适用于内容较少的网站。通过合理的放置视觉信息，Z 模式可以很好捕捉和引导用户视觉重点。

用户从左上角开始，随后视觉向中间移动，然后从底部左边开始。可以在中间放置一个图片。

要点：

1. 强召唤行为放置在右边：用户在此处会暂停一下，然后接着移动；
2. 将最重要的召唤行为放置在右上角；
3. Z 模型在同一个页面能够不断的重复，以便于用户寻找到浏览节奏；

八：对称放射

wikipedia

虽然这种样式很难使用，但是处理好了之后确是非常美观的。通常是中心点放很多链接，而中心点可以放公司 Logo 或公司名称。

要点：

1. 这种样式很少见，所以处理得当的话会非常吸引用户；
2. 将最重要的元素放置在中间；
3. 在中间点周围放置链接的时候，不要将整个圆封闭起来。例如 Wikipedia 上下方都会留出空白，这样会给与用户创造视觉停留空间，减少要压迫感。

九：不对称

Honda

不对称能够创造张力和活力 — 虽然并不适用于每个网站，但是如果你想要网站更加有活力可以考虑，并且能够清晰展示重点。

不对称元素会让眼球运转更加快速，合理使用的话可以创造动态空间。然而，这样样式很难用在实际中，它容易导致视觉层次错乱，扁平化处理又会比较难看。

要点：

1. 使用颜色来高亮视觉不对称的效果；
2. 为了创造不对称但是组织有序的效果，在图片的另一半放置一些文字；
3. 但有锋利边缘的物体能够增加视觉重量，但是必须小心使用，因为会立马创造视觉不平衡。