UI设计中的极简主义运用

设计是用户体验中最重要的驱动力之一。
由于用户更倾向于简洁的界面,因此成功的关键是把UI简化到只有最基本最必要的元素。极简主义是形式与功能的完美结合。它最大的优势就是拥有清晰的列表、简洁的线条、最大化的留白,即使是最复杂的主题也能被简单的元素简化。
极简主义设计应该简洁、清晰、可持续。通过清晰的界面为用户解决问题。这就是为什么一个令人印象深刻的APP一般都会和极简主义应用结合,而简单的东西往往最容易沟通。
有以下几点是需要注意的:
简单的配色
好的配色可以改善用户体验,而过多颜色可能会产生负面影响。对于初学者,这里有许多标准的配色方案可以使设计变得简单:
· 使用单色的配色方案。在一个特定的色调里,通过修改饱和度和亮度来生成 多种颜色和配色方案。


相近色的配色方案。相邻色的配色方案就是通过在色环上吸取相邻的三种颜色。一个操作简单的任务管理app(clean),这个app使用邻色配色方案在视觉上呈现优先级最高的任务和突出显示最重要的任务。


模糊效果
模糊效果作为一种用户界面的逻辑解决方案出现,允许层次结构之间的角色分配。例如,在使用分层UI时,这是一个非常有效的解决方案,因为它可以帮助用户理解解决方案的流程。这也为设计师提供了探索不同菜单和覆盖解决方案的机会。
雅虎app会显示每个天气的照片,然后点击可查看更多详情,显示详细的天气数据,而不是用另一张图片覆盖。交互非常直观,只需要一秒钟即刻返回到以前的位置。

一个APP只存在一种字体
多种字体会让你的界面看起来杂乱。控制界面中的字体数量可以使排版更美观,在界面设计中,请考虑是否可以通过调整重量,样式和大小来优化界面,而不是使用多种字体。

如果担心会对字体使用不当,可以使用系统默认字体。
· IOS使用旧金山字体系列在所有平台上提供一致的阅读体验(iOS 9的旧金山字体称为SF-UI)。
· Google Android和Chrome上的标准字体分别是Roboto和Noto

数据聚焦
你应该在主视觉上利用较大的字号和醒目的颜色。
如果想使用中性色并且出发用户行为,则可以鼓励他们通过专注于颜色来做他们想做的事。

较大的字体和高亮的颜色可以用来吸引用户从而成为界面的视觉中心,对于一般界面使用中性色并为呼叫动作添加对比色,可以使用户关注到界面中事先建立的中心点。
以非线条元素和间距划分
线条和分隔线通常用于清晰地描绘屏幕中的特定部分或类别。但是过多的添加也会导致界面拥挤杂乱。
一定的线条和分隔线会使界面更美观,现代以及更具功能性。还可以使用方块,间距或颜色等方法进行分割。例如Google的日历app,就是使用空间和阴影来划分区域,而不是绘制线条。

图标:描边和填充
图标是一种表示功能或内容的可视化语言。它被认为是很简单的视觉元素,可以立即被识别和理解。自iOS 7以来,许多简约的界面都有线条和填充图标。在本文中,我们不会批评这个概念本身,而是将重点放在实践方面。
同一图标的描边和填充类型:

再看看标签栏图标。由于条形图标类似于导航到应用程序的其他部分,因此通过以任何方式突显图标都很重要,也使识别活动标签和控件更加直接。

结论
极简主义界面和其他设计方式都是实现良好设计的一种方式,但它们不是目的本身。最终目的是简化我们的界面,使其具备更强的实用性和可用性。简单的用户流程,清晰的视觉效果和宽容相融合才能做到最好的设计。
让用户忽略设计的同时,更加融入设计之中。
谢谢!
原文作者:Nick Babich
最初发表于babich.biz
原文链接:https://uxplanet.org/the-art-of-minimalism-in-mobile-app-ui-design-b21aa671dd7f