没跑了，都是套路啊：12种永恒不改的UI设计模式
标签（空格分隔）： UI设计
如果你是网页设计者，或是想要踏入、想要了解UI设计模式的人，本文将探索12个成功的网页布局模式的示例，满足你的一切好奇心——因为一切网页设计的套路都在这里啦！
本文将从以下12点出发分析：
- 卡片式排版（Cards）
- 网格式排版（Grids）
- 杂志风格布局（Magazine-style layout）
- 排版自由布局（Container-free format）
- 分割屏幕（Split Screen）
- 单页Web应用程序(Single-page Web Apps）
- F模式（F Pattern）
- Z模式（Z Pattern）
- 水平对称（Horizontal Symmetry）
- 近似水平对称（Approximate Horizontal Symmetry）
- 垂直对称（Vertical Symmetry）
- 不对称（Asymmetry）
示例：
Facebook
浏览是网站互动的很大一部分，需要展示每个项目的详细信息。
卡片作为可点击信息的容器，优点是体积小，可帮助用户找到他们想要的内容。 卡的风格因每个网站而异，但大多数包含图片和说明，有时还包含个人功能，例如Facebook的Like点赞功能或Twitter的Retweet转推功能。
此外，卡的响应式设计工作良好。 由于每张卡都是可自定义的，他们的位置可以重新排列以适合任何屏幕尺寸。
- 直观 - 不需要太多的文字说明。
- 有利于响应式设计 - 由于每张卡都是可自定义的，它们的放置可以重新排列以适合任何屏幕尺寸。
- 可分享 - 只能在社交媒体上分享特定内容。
- 普适性 - 可与各种样式一起使用
- 使整张卡片可点击，而不只是某些部分。
- Fitts定律指出，这使得用户交互成为可能。
- 把每张卡的焦点放在一个中心概念上，不要加入太多复杂的元素。
- 选择图像时请顾及到那些正使用着较小的屏幕的用户。 您可能需要针对不同设备对其进行不同的裁剪。
- 不要太复杂。卡片式排版最好是简洁为主，展示主要内容即可。 基本排版和少量描述有助于优化浏览效果。
内容繁复的网站会想要展示它所拥有的所有讯息。
网格结构使浏览更容易。 卡片几乎总是布局成网格格式，一块一块地进行叙述。 网格的优点是能提供更多的浏览选项，而不是简单的列表视图，有限的空间被有效地利用了。
此外，网格的大小，间距和列数可以不同。 像“赫芬顿邮报”这样的网站把他们的卡片用网格间隔开，以避免“直接粗暴”的感觉；而YouTube的排版则是严格有序，横平竖直，分类明显（“推荐”，特别频道等）。
注意，UI界面设计不可缺少留白（如Diply，它的排版太紧密了），因为它影响用户浏览体验。
适当的留白与设计风格的一致性很重要，尤其是在为不同设备设计界面时。
网站在多个类别中有大量定期更新的内容。
杂志在专成网站之前就有这个问题，但它们演变的格式仍然可行。列，卡片和/或标题的交替大小打破了网格的单调性，同时仍然展示各种内容。
杂志布局会改变内容的显示方式。屏幕的左侧可能由卡网格控制，而右侧可能有一个文本链接列表。
以BuzzFeed为例，第一列是精选内容，图片旁边有详细说明。中间是及时更新的内容，下面有一个简短的描述。注意他们的排版 - 文本颜色和大小不同，形成视觉层次结构。
与印刷出来的杂志一样，此排版强调图像的运用。和TIME，WebMD，WIRED一样，在用户的眼睛扫描较小的次要图像之前，屏幕上通常有一个主要特征图像用于吸引用户的注意力。
这种风格的特征之一是在任一侧（或水平菜单）设置垂直菜单。
网站在呈现数据时需要一种简约的方法。
排版自由格式将极简主义提升到一个新的水平，剥离所有不必要的视觉效果，并摆脱其他网站的惯例。这种模式格式依赖于视觉来显示信息之间的关系。
在过去的历史设计风格上，网页设计依赖于线性和高度结构化的布局来呈现信息。这种风格吸引着代理机构（如馆Public-Library），投资商和时尚网站等（Cienne NY），这一切都体现了现代和先进的技术——前卫。
排版对于极简设计是至关重要的。尺寸，字体重量和颜色都起着很大的左右那个。 Apple使用大文本作为标题，较小的文本用于辅助描述，蓝色文本用于链接。
为了防止混淆，请使大多数链接元素处于可点击状态。如果用户对一个摄记元素感到困惑，他们可能首先点击它来测试交互性。然而，对于那些身份与地位很重要的网站去使用这种格式其实是很困难的，虽然AOL表明它是可能的（虽然效果不怎么理想）。
网站有两个主要内容，同样重要。
分屏布局是给予两个对比元素平等考虑的逻辑和时尚的方式。
分屏是同时显示两个中心元素的选择，或者如阿迪达斯示例所示 - 将它们彼此对齐。
风格从此成长为纯粹的审美。最常见的是在页面的一半上有文本，以及一个标题图像填充另一个，就像Lauren Wickware Design一样。双方都是同一个概念的两个方面。
分屏是对比度的理想选择。正如设计师Patrick McNeil所建议的那样，用相反的特性，例如相反的颜色，不同的文字大小，图像的性质等来展现二元性。
保留一个单一的统一的导航菜单 - 理想情况下导航菜单设置在顶部。
分割屏幕设计随着内容增长不能很好地扩展，因此不要将它们应用于内容丰富的布局。
Twitter
Gmail
Spotify
Tumblr
多页导航系统太复杂或不必要。
现代网络开发软件为单页网站和网络应用铺平了道路。技术进步和移动浏览（其中单页应用程序更有用）的突出产生了这种模式，重组了网络工作。
例如，Gmail允许在同一页面上进行电子邮件阅读，撰写和聊天，甚至可以将电子邮件整理为单独的类别，从而模仿多页网站。 Spotify也可以通过允许用户在浏览其他音乐时播放音乐，而不会因加载页面而中断，从而实现多任务同时进行。
为每个元素（例如Gmail或Twitter）生成唯一的网址。由于内容是使用JavaScript动态加载的，因此需要特别注意网址。唯一网址还可以使用浏览器的“后退”按钮。
使用粘性导航减少定向障碍，即使只有一个标题菜单。
Yelp
Groupon
当用户无法长时间浏览文本特别多的网站时。
如果有很多内容 - 特别是文本 - 用户将更好地对F模式布局做出反应。
此布局将模拟人们眼睛自然扫描文本的方式。
尼尔森诺曼集团解释道：根据眼睛跟踪研究透露，用户（从左到右的阅读文化）通常扫描重叠的内容块，看起来像字母F或E的模式。我们的眼睛训练从顶部开始 - 右角，水平扫描，然后下降到下一行，并做同样重复的动作，直到我们找到感兴趣的东西。
Yelp使用完美对齐的垂直列为用户提供一个起点。当他们发现一个有趣的话题（或图片），他们的眼睛将会在水平角度扫描更多的信息。如果垂直列中的项目不感兴趣，他们的眼睛就继续向下扫描，直到找到一个他们感兴趣的话题。
TripAdvisor
Kentucky Fried Chicken
Wunderlist
像F模式一样，Z模式布局模仿自然的用户扫描方法。然而，Z模式更适合具有单一目标和较少内容的网站。
Z模式通过使用良好的视觉排列来有效地引导用户注意到特定的点。虽然F模式更适合浏览繁重的内容，但Z模式引导用户浏览更多打开的页面。
用户（从左到右的阅读文化）再次从左上角开始。然而，不是直接下降，他们的眼睛在中间停留，然后再次从底部或接近左下角开始。您可以通过在中心放置一个讲述形象的图像（TripAdvisor）或通过交替文本和图像来创建之字形（Wunderlist）来支持这种模式。
Starbucks
Budweiser
一个网站包括许多重复的视觉模式，必须清楚地组织内容，进行排版。
在自然界中发生的视觉现象，对称性通常被认为是美丽的，并产生了秩序和结构的感觉，甚至是信任的感觉。因为它们在视觉上令人愉快，所以对称的图像更可能与用户产生情感联系，这改善了他们对网站的印象，他们将更容易去识别品牌，以及如何识别该网站。
平衡不一定对称。 这是两个不同的但相关的概念。 有关视觉平衡的更多信息，请阅读Smashing杂志的文章。
从美术的角度来说，对称增加了一个优雅和复杂的外观。
eBay
McWhopper
水平对称对于一个站点来说太过结构化。
近似对称保留了对称性的大部分好处，但更具有活力。 它是通过将略微不对称的方面添加到另外对称的图像中而形成的。给人带来的是更刺激的视觉体验，尽管它失去了一些平衡的结构。
然而，轻微的视觉上的结构破坏，可以带来不一样的视觉冲击体验。
要抓住更多的注意力，将重要的文本，图片或行动呼吁放在破坏对称性的区域。
同样，您可以通过将侧边栏放在平衡的设计中，创建一种不对称的感觉。 谨慎添加您的破坏性元素，否则会带来颠覆性的视觉混乱。
11. 径向（旋转）对称（Radial (rotational) symmetry）
wikipedia
Technics
径向对称性在围绕中心点的圆中产生平衡。 虽然难以应用，但做得很好时，这创造了一个美丽的审美，吸引注意力的中心，通常是公司的名称和标志。
径向对称性也有利于显示运动的轨迹。 圆形模式通常鼓励用户不断将其焦点移动到自然端。
径向对称是一个很好的方式，因为它效果突出而且看起来不错，因为它不像其他类型一样常见。
集中你最重要的元素，并保持副边靠近边缘。
例如，注意维基百科并没有完全占用空白的地方。 空间为眼睛创造了喘息的空间。
12. 不对称（Asymmetry）
Esquire (UK)
Honda
Revolution PN
Histograph
HSBC
Beoplay
不对称会产生张力和动力 - 虽然这对于每个网站都不实用，但如果你想要一个清晰显示焦点的生动的网站，这是值得的。
当使用正确时，不对称可以创建活动空间，这意味着它使白色空间更加活泼。不对称元素导致眼睛移动更快，这使得网站本身看起来更有活力。
然而，这种风格很难应用。错位的不对称可能导致在视觉层次结构的混乱，或只是一种丑陋。
使用各式各样的颜色将会突出不对称的刺激效果。汇丰和本田都使用红色来推动和拉动用户的视线。
具有锐利边缘的对象（例如，三角形）——请小心使用这些对象，因为它们可能会使设计快速失衡。
本文编译自thenextweb.com
59 : https://17404-presscdn-0-71-pagely.netdna-ssl.com/studio/wp-content/uploads/2016/06/image15-700 58 : https://17404-presscdn-0-71-pagely.netdna-ssl.com/studio/wp-content/uploads/2016/06/image41-569x300.png