Web布局最佳实践:12种永恒的UI模式分析

发布时间:2019-08-30 09:49:28 阅读:46

人们不会访问网站进行设计 - 他们想要内容。

正如Web UI Patterns 2016 Vol。1,设计只是以最直观和有用的方式呈现内容的一种手段。在本文中,我们将探索12个成功的Web布局模式的示例,最佳实践和常见场景:

  • 网格
  • 杂志
  • 集装箱 - 免费
  • 分屏
  • 单页Web应用程序
  • F模式
  • Z模式
  • 水平对称
  • 近似水平对称
  • 垂直对称
  • 不对称

看看如何以最强大的格式呈现您的Web布局。

卡片

Facebook的

image42

模式

image03

推特

image13

谷歌+

image27

奥普拉

image32

问题

浏览是网站交互的一个重要部分,但显示每个项目的详细信息会使屏幕变得混乱。

卡片允许网站以易消化的方式呈现大量内容。正如我们在2015-2015的网页设计趋势中所解释的那样,卡片最近到处都出现了,这种模式的成功与其实用性直接相关。

卡片充当可点击信息的容器:一口大小的预览,以帮助用户找到他们想要的内容。卡片的风格因每个网站而异,但大多数都包含图片和描述,有时还包含个人功能,例如Facebook的Like或Twitter的转推。

此外,卡片与响应式设计配合良好。由于每张卡都是自给自足的,因此可以重新排列它们的位置以适应任何屏幕尺寸。

对于内容丰富的网站,卡片提供了很多:

  • 直观 - 不需要说明。
  • 有利于响应式设计 - 由于每张卡都是自给自足的,因此可以重新排列它们的位置以适应任何屏幕尺寸。
  • 可共享 - 仅在社交媒体上轻松共享特定内容。
  • 多功能 - 可用于多种网站风格

提示

  • 使整张卡片可以点击,而不仅仅是某些部分。交互设计最佳实践中描述的Fitts定律指出,这使得用户交互更有可能发生。
  • 将每张卡片围绕一个中心概念,而不是更多。否则,这就失败了。
  • 选择图像时请记住较小的屏幕。您可能需要针对不同设备以不同方式裁剪它们。
  • 不要太复杂。当它们很简单,它们展示的内容和方式时,它们的效果最佳。基本排版和最小描述有助于浏览。

2.网格

YouTube的

image26

赫芬顿邮报

image33

Etsy的

image34

Diply

image29

问题

内容密集的站点希望显示具有相同层次结构的所有主项目。

网格结构使浏览更容易。卡片几乎总是以网格形式布置,有这种或那种。与简单的列表视图相比,网格提供了更多的浏览选项,这使得这种风格具有空间效果。

网格的大小,间距和列数可能不同。赫芬顿邮报这样的网站错开了他们的选择,以避免“直接”的感觉,而YouTube扮演严格的组织,直行并分为类别(“推荐”,特定渠道等)。

提示

  • 注意白色空间(或者像Diply一样缺乏)因为它影响用户浏览的方式。充足的空间较慢,但每个项目都需要更多关注。最小的空间更快,但有些内容可能会从裂缝中滑落。
  • 一致性很重要,尤其是在为不同设备进行设计时。确保您的布局在不同的响应断点处保持可识别性

  • 使用960js等工具开始使用基本的12列网格
  • 3.杂志式布局

    时间

    image40

    WebMD表示

    image23

    有线

    图像21

    BuzzFeed使用

    image35

    问题

    网站在多个类别中有许多定期更新的内容。

    杂志在网站出现之前很久就存在这个问题,而且它们发展的格式仍然可行。列,卡和/或标题的交替大小打破了网格的单调,同时仍然展示了各种内容。

    杂志布局改变了内容的显示方式。屏幕的左侧可能由卡片网格支配,而右侧可能有文本链接列表。

    BuzzFeed为例:第一列是精选内容,图片旁边有详细说明。中间是及时的内容,图片下方有简要说明; 最后一列是趋势,编号的图片没有描述。注意他们的排版 - 文本颜色和大小各不相同,以显示可用性并创建视觉层次结构。

    提示

    • 像印刷杂志一样,这种格式强调图像。TIMEWebMDWIRED一样,屏幕上通常有一个主要特征图像,用于在用户扫描较小的次要图像之前绘制焦点。
    • 这种风格的特征之一是两侧(或水平菜单)的垂直菜单。

    4.无容器格式

    AOL

    image02

    苹果

    image28

    公共图书馆

    image44

    Cienne NY

    image37

    问题

    网站在呈现数据时需要极简主义的方法。

    无容器格式将极简主义提升到了一个新的水平,剥离了所有不必要的视觉效果,并脱离了其他网站的惯例。这种模式格式不是明确划分,而是依赖于视觉,分组和常识来显示关系。

    从历史上看,网页设计依赖于线性和高度结构化的布局来呈现信息。这很有效,但是今天有更多的选择,设计师可以“开箱即用”进行实验。这种风格吸引了代理商(公共图书馆),投资组合和时尚网站(Cienne NY),它们都看似现代和前卫。前卫。

    没有容器的设计可以为内容本身提供更多功能。但是,必须特别注意视觉层次结构。这种冒险模式只有设计它的人才有效。

    通常面对极简主义,Apple无视其网站的容器。链接都是文本的(没有按钮),聪明的视觉设计解释了哪些内容与什么相关。

    提示

    • 排版对于没有容器的设计至关重要。尺寸,字体重量和颜色都代表钝分隔符传达意义。Apple使用大文本作为标题,使用较小的文本作为辅助说明,使用蓝色文本作为链接。
    • 为防止混淆,请使大多数元素可以点击。如果用户对某个元素感到困惑,他们可能会先点击它来测试交互性。虽然AOL表明它可能(但并不总是理想的),但内容密集的网站很难使用这种格式

    5.分屏

    谷歌翻译

    image20

    阿迪达斯足球(英国)

    image30

    标致

    image12

    62型号

    image06

    劳伦威客软件设计

    image18

    问题

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

    分屏布局是兼顾两个对比元素的逻辑和时尚方式。

    分屏是同时显示两个中心元素的选择,或者 - 如阿迪达斯的例子所示 - 将它们相互对立。每当你不知道突出显示两个元素中的哪一个时,这是一个很好的选择:两者兼而有之。

    当网站提供两种截然不同的变化时,分屏是非常适合的,例如62款中的性别用户从一开始就进行选择,因此该网站不会浪费时间不必要地显示这两个选项。标致一样,分屏也有机会提供两个号召性用语

    这种风格已经发展成为纯粹的美学。最常见的是在页面的一半上放置文本,在另一半中填充标题图像,就像Lauren Wickware Design一样双方是同一概念的两个方面。

    提示

    • 分屏是对比度的理想选择。正如设计师帕特里克·麦克尼尔(Patrick McNeil)所建议的那样,扮演具有相反特征的二元性,例如相反的颜色,不同的文字大小,图像的本质等。
    • 保留一个统一的导航菜单 - 理想情况下位于顶部,很明显它适用于双方。
    • 随着内容的增长,分屏设计无法很好地扩展,因此不要将它们应用于内容繁重的布局。

    6.单页布局

    推特

    image17

    Gmail的

    image04

    Spotify的

    image05

    tumblr

    image01

    问题

    多页导航系统过于复杂或不必要。

    现代Web开发为单页网站


    我们在微信上24小时期待你的声音
    解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

    非常感谢您有耐心的读完这篇文章:"Web布局最佳实践:12种永恒的UI模式分析",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560