如何在极简主义UI设计中最大化内容

发布时间:2019-08-30 10:02:54 阅读:53

极简主义现在是一种流行的风格,它在视觉上非常有用。

风格减少了装载时间并增加了理解力,同时为网站提供精致优雅的外观。

但是,如果您的网站内容太多而您不知道在哪里最小化,您会怎么做?

如果目标一致,任何网站都可以从简约风格中受益,甚至是内容丰富的风格。本文将解释如何通过剖析一些示例以及卡片布局模式如何帮助,为具有最大内容的网站设计最低限度。

3个看起来很小的大型网站

它可能看起来像是各种各样的并置,但设计师正在寻找创造性的方法来使用最少的设计风格,即使有很多内容。

这可能非常棘手。它需要一个相互信任的设计和内容团队,以在内容和设计之间创造适当的平衡。这对于电子商务网站非常有效,电子商务网站通常包含数百个库存页面以及用于展示产品和样式的长滚动页面。

让我们来看看成功实现极简主义的大型内容网站的3个例子:JatexNordstomGroupon

image06

照片来源:Jatex

Jatex的主要产品是整形外科设备,具有有限导航和大量空白的全白色背景。主页几乎是一本关于最小设计外观的教科书示例。

开始浏览网站,有很多关于该产品的信息,包括医疗专业人员的规格,功能,质量问题和答案以及联系表格。对于包含复杂和复杂内容的网站,该组织清晰而简单。清晰的结构和空间有助于整体可读性,并使其看起来很容易,即使对于偶然偶然发现网站的用户也是如此。

image00

图片来源:Nordstrom

头版Nordstom也是一个很好的例子。它在简洁的简洁版和引人入胜的简约设计之间取得了平衡。有足够的副本可以吸引你点击进入部门,看看有关鞋子或西装的更多信息。

image04

照片来源:Groupon

Jatex和Groupon各自都在销售产品,但这些网站的设计几乎就是如何做到销售极简主义的阴阳。

当您第一次看到Groupon的产品页面时,您可能会开始在设计中再次猜测极简主义的想法。但是看得更近一点,你会发现实际上有很多内容,只是以一种捕捉极简主义精神的方式组织起来。

界面使用单个焦点(图片),只有最必要的元素来帮助用户与设计进行交互。涉及的内容越多,就越低于滚动。通过图像,简短描述和购买信息,这可以使事情变得稀疏。(你还需要什么?)

处理复杂的内容并不意味着设计必须繁琐; 它实际上是最小美学的完美设置。将内容分成分组以使其易于管理,并使用空间原则,对齐和清晰的排版来创建层次结构和易于阅读。

如果您使用的是WordPress,您可能会发现Hipsta Minimal Theme非常有用

应用卡片布局

对于任何网站整合空间的最佳方式之一,简约或非简约,是卡片布局,是过去一年中最大的趋势之一。部分归功于Google的Material Design,卡片是许多基于Android的移动应用程序和Apple应用程序的首选设计模式。卡也在很多桌面网站找到家。

受欢迎程度部分归因于卡片的显着可用性。一些Pinterest的已经知道有关的某个时候。

image01

图片来源:Pinterest

卡片是在设计中创建组织和流程的简单方法。此外,它们适用于几乎任何类型的内容:

  • 相片
  • 文本
  • 视频
  • 优惠券
  • 音乐
  • 支付信息
  • 注册或表格
  • 游戏数据
  • 社交媒体流或共享
  • 奖励信息
  • 链接
  • 元素的组合

卡还依赖于已建立的用户行为模式,使界面易于使用。每个元素都存在于与特定操作相关的容器中,例如激活链接,填写表单,在社交媒体上共享或观看视频。虽然第一张牌类似于扑克牌,但更新的卡式界面更加时尚。

image05

照片来源:潮汐

image02

照片来源:eBay

这就是大牌网站在最小框架中使用卡式设计模式的原因。卡片是一个视觉元素,与简单背景下的特定动作相关,如上面TidaleBay的设计所示

这种简单易于查看,平静和感觉不引人注目 - 所有这些都给用户带来控制感,就像他们有能力在网站上做他们想做的事情。毫无疑问,对于用户有许多不同选择的网站而言,极简主义和卡片的组合是一种流行的选择,这是大型内容网站(如网上商店)的常见部分。

卡是一种流畅的选项,可以响应地在桌面和移动站点之间工作。但是,重要的是要注意卡在设备之间看起来(甚至可能是功能)不同。回顾上面的eBay设计。这些卡片的大小不同,“当天的选择”是水平导向的,而“趋势交易”更加方正。

这些形状中的每一个都在移动设备上存在问题,并且解决方案更加垂直。每张卡都会重新塑造更小的设备尺寸。

在响应式设计中使用卡片时,请注意以下几点:

  • 该文本在桌面和移动设备上是否同样可读?
  • 形状是否适用于设备纵横比?
  • 照片和图像如何在设备上显示,它们是相同还是不同?
  • 可点击和可点击区域是否相同?(建议将整张卡片作为单个链接元素。)

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

非常感谢您有耐心的读完这篇文章:"如何在极简主义UI设计中最大化内容",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560