没跑了,都是套路啊: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)

看看如何以最强大的排版展示您的网页布局。


1. 卡片式排版(Cards)
示例:
Facebook
facebook

Patterns
此处输入图片的描述

Twitter
此处输入图片的描述

Google +
此处输入图片的描述

Oprah
此处输入图片的描述

特点
浏览是网站互动的很大一部分,需要展示每个项目的详细信息。

解决方案
卡片作为可点击信息的容器,优点是体积小,可帮助用户找到他们想要的内容。 卡的风格因每个网站而异,但大多数包含图片和说明,有时还包含个人功能,例如Facebook的Like点赞功能或Twitter的Retweet转推功能。
此外,卡的响应式设计工作良好。 由于每张卡都是可自定义的,他们的位置可以重新排列以适合任何屏幕尺寸。

对于具有大量内容的网站,卡片式排版展现了很多优点:

  1. 直观 - 不需要太多的文字说明。
  2. 有利于响应式设计 - 由于每张卡都是可自定义的,它们的放置可以重新排列以适合任何屏幕尺寸。
  3. 可分享 - 只能在社交媒体上分享特定内容。
  4. 普适性 - 可与各种样式一起使用

优化建议

  • 使整张卡片可点击,而不只是某些部分。
  • Fitts定律指出,这使得用户交互成为可能。
  • 把每张卡的焦点放在一个中心概念上,不要加入太多复杂的元素。
  • 选择图像时请顾及到那些正使用着较小的屏幕的用户。 您可能需要针对不同设备对其进行不同的裁剪。
  • 不要太复杂。卡片式排版最好是简洁为主,展示主要内容即可。 基本排版和少量描述有助于优化浏览效果。

2. 网格式排版(Grids)

YouTube
image26

Huffington Post
image33

Etsy
image34

Diply
image29

特点
内容繁复的网站会想要展示它所拥有的所有讯息。

解决方案
网格结构使浏览更容易。 卡片几乎总是布局成网格格式,一块一块地进行叙述。 网格的优点是能提供更多的浏览选项,而不是简单的列表视图,有限的空间被有效地利用了。

此外,网格的大小,间距和列数可以不同。 像“赫芬顿邮报”这样的网站把他们的卡片用网格间隔开,以避免“直接粗暴”的感觉;而YouTube的排版则是严格有序,横平竖直,分类明显(“推荐”,特别频道等)。

提示
注意,UI界面设计不可缺少留白(如Diply,它的排版太紧密了),因为它影响用户浏览体验。
适当的留白与设计风格的一致性很重要,尤其是在为不同设备设计界面时。


3. 杂志风格布局(Magazine-style layout)
TIME
image40

WebMD
image23

WIRED
image21

BuzzFeed
此处输入图片的描述

特点
网站在多个类别中有大量定期更新的内容。

解决方案
杂志在专成网站之前就有这个问题,但它们演变的格式仍然可行。列,卡片和/或标题的交替大小打破了网格的单调性,同时仍然展示各种内容。

杂志布局会改变内容的显示方式。屏幕的左侧可能由卡网格控制,而右侧可能有一个文本链接列表。

以BuzzFeed为例,第一列是精选内容,图片旁边有详细说明。中间是及时更新的内容,下面有一个简短的描述。注意他们的排版 - 文本颜色和大小不同,形成视觉层次结构。

提示
与印刷出来的杂志一样,此排版强调图像的运用。和TIME,WebMD,WIRED一样,在用户的眼睛扫描较小的次要图像之前,屏幕上通常有一个主要特征图像用于吸引用户的注意力。
这种风格的特征之一是在任一侧(或水平菜单)设置垂直菜单。


4. 排版自由布局(Container-free format)
AOL
此处输入图片的描述

Apple
此处输入图片的描述

Public-Library
此处输入图片的描述

Cienne NY
此处输入图片的描述

特点
网站在呈现数据时需要一种简约的方法。

解决方案
排版自由格式将极简主义提升到一个新的水平,剥离所有不必要的视觉效果,并摆脱其他网站的惯例。这种模式格式依赖于视觉来显示信息之间的关系。

在过去的历史设计风格上,网页设计依赖于线性和高度结构化的布局来呈现信息。这种风格吸引着代理机构(如馆Public-Library),投资商和时尚网站等(Cienne NY),这一切都体现了现代和先进的技术——前卫。

提示
排版对于极简设计是至关重要的。尺寸,字体重量和颜色都起着很大的左右那个。 Apple使用大文本作为标题,较小的文本用于辅助描述,蓝色文本用于链接。
为了防止混淆,请使大多数链接元素处于可点击状态。如果用户对一个摄记元素感到困惑,他们可能首先点击它来测试交互性。然而,对于那些身份与地位很重要的网站去使用这种格式其实是很困难的,虽然AOL表明它是可能的(虽然效果不怎么理想)。


5. 屏幕分割排版(Split-screen)

Google Translate
此处输入图片的描述

Adidas Football (UK)
此处输入图片的描述

Peugeot
此处输入图片的描述

62 Models
此处输入图片的描述

Lauren Wickware Design
此处输入图片的描述

优点
网站有两个主要内容,同样重要。

解决方案
分屏布局是给予两个对比元素平等考虑的逻辑和时尚的方式。

分屏是同时显示两个中心元素的选择,或者如阿迪达斯示例所示 - 将它们彼此对齐。

风格从此成长为纯粹的审美。最常见的是在页面的一半上有文本,以及一个标题图像填充另一个,就像Lauren Wickware Design一样。双方都是同一个概念的两个方面。

提示
分屏是对比度的理想选择。正如设计师Patrick McNeil所建议的那样,用相反的特性,例如相反的颜色,不同的文字大小,图像的性质等来展现二元性。
保留一个单一的统一的导航菜单 - 理想情况下导航菜单设置在顶部。
分割屏幕设计随着内容增长不能很好地扩展,因此不要将它们应用于内容丰富的布局。


6. 单页面布局(Single-page layouts)

Twitter
此处输入图片的描述

Gmail
此处输入图片的描述

Spotify
此处输入图片的描述

Tumblr
此处输入图片的描述

问题
多页导航系统太复杂或不必要。

解决方案
现代网络开发软件为单页网站和网络应用铺平了道路。技术进步和移动浏览(其中单页应用程序更有用)的突出产生了这种模式,重组了网络工作。

例如,Gmail允许在同一页面上进行电子邮件阅读,撰写和聊天,甚至可以将电子邮件整理为单独的类别,从而模仿多页网站。 Spotify也可以通过允许用户在浏览其他音乐时播放音乐,而不会因加载页面而中断,从而实现多任务同时进行。

提示
为每个元素(例如Gmail或Twitter)生成唯一的网址。由于内容是使用JavaScript动态加载的,因此需要特别注意网址。唯一网址还可以使用浏览器的“后退”按钮。
使用粘性导航减少定向障碍,即使只有一个标题菜单。


7. F 模式(F-Pattern)

Yelp
image43

Groupon
此处输入图片的描述

适用网站
当用户无法长时间浏览文本特别多的网站时。

解决方式
如果有很多内容 - 特别是文本 - 用户将更好地对F模式布局做出反应。
此布局将模拟人们眼睛自然扫描文本的方式。

尼尔森诺曼集团解释道:根据眼睛跟踪研究透露,用户(从左到右的阅读文化)通常扫描重叠的内容块,看起来像字母F或E的模式。我们的眼睛训练从顶部开始 - 右角,水平扫描,然后下降到下一行,并做同样重复的动作,直到我们找到感兴趣的东西。

Yelp使用完美对齐的垂直列为用户提供一个起点。当他们发现一个有趣的话题(或图片),他们的眼睛将会在水平角度扫描更多的信息。如果垂直列中的项目不感兴趣,他们的眼睛就继续向下扫描,直到找到一个他们感兴趣的话题。


8. Z 模式(Z-Pattern)

TripAdvisor
此处输入图片的描述

Kentucky Fried Chicken
此处输入图片的描述

Wunderlist
此处输入图片的描述

像F模式一样,Z模式布局模仿自然的用户扫描方法。然而,Z模式更适合具有单一目标和较少内容的网站。

Z模式通过使用良好的视觉排列来有效地引导用户注意到特定的点。虽然F模式更适合浏览繁重的内容,但Z模式引导用户浏览更多打开的页面。

用户(从左到右的阅读文化)再次从左上角开始。然而,不是直接下降,他们的眼睛在中间停留,然后再次从底部或接近左下角开始。您可以通过在中心放置一个讲述形象的图像(TripAdvisor)或通过交替文本和图像来创建之字形(Wunderlist)来支持这种模式。


9. 水平对称(Horizontal symmetry )
Starbucks
此处输入图片的描述

Budweiser
此处输入图片的描述

容易产生的问题
一个网站包括许多重复的视觉模式,必须清楚地组织内容,进行排版。

解决方案
在自然界中发生的视觉现象,对称性通常被认为是美丽的,并产生了秩序和结构的感觉,甚至是信任的感觉。因为它们在视觉上令人愉快,所以对称的图像更可能与用户产生情感联系,这改善了他们对网站的印象,他们将更容易去识别品牌,以及如何识别该网站。

提示
平衡不一定对称。 这是两个不同的但相关的概念。 有关视觉平衡的更多信息,请阅读Smashing杂志的文章。
从美术的角度来说,对称增加了一个优雅和复杂的外观。


10. 近似水平对称(Approximate horizontal symmetry)

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

Comments
Write a Comment