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