帮你打造极简风APP UI 的实用设计技巧

苹果公司目前在全平台上使用的是San Francisco字体,iOS 9 上将这种字体标记为 SF-UI。
Roboto 和 Noto 则是Google Android 和 Chrome 上的默认字体。

随着用户对UI的喜好开始偏向简约,设计师有必要将整个UI简化剥离至基本状态,因为保留关键元素才是成功的钥匙。从某种意义上说,极简主义的设计是形式和功能的完美结合。它最大的优势在于形式上的清晰直观——简洁的线条,大量的留白,优雅简约的图形元素,赋予整个设计以简约干净的感受。即使是最庞杂的内容,在这样的设计之下都显得直观而干练,当然,如果设计的足够高效的话。

极简风的APP设计通常要具备几个特征:简洁,清晰,一致,并且可用。你的APP的交互体系应当通过清晰的视觉传达方式帮用户定位并解决问题。要做 好这一点,并不容易,因此,一个集优雅极简的设计和优秀的易用性于一身的应用,一定会给人留下深刻的印象。要做到这一点,你可以从下面几点着手:

简单的配色方案

考虑到太多的色彩可能会给用户以负面影响,所以尽量简化配色方案,提升用户体验。有许多预设的配色规范和配色方案可供参考,可以以此为基础创建新的解决方案,并且这种思路尤其适合初学者:

单色配色:单色配色方案通常是由特定色彩的不同深浅、不同色调所构成。通过调整这一色彩的饱和度、明暗来生成协调的配色方案。

帮你打造极简风APP UI 的实用设计技巧 帮你打造极简风APP UI 的实用设计技巧

类似色配色:色轮上彼此相邻的色彩是类似色,它们能在色彩上营造出协调而连续的感觉。虽然这种配色不是那么好把控的,但是有诀窍,就是注意选取有感染力的色调作为核心,这样可以最大化利用整个方案。一套类似色的配色方案通常是在色轮的同一区域内选取色彩搭配而成。

帮你打造极简风APP UI 的实用设计技巧 帮你打造极简风APP UI 的实用设计技巧

模糊效果

模糊效果出现在极简化UI设计中是一件非常符合逻辑的事情,因为它先天就能够强化UI的层次感。多层次的UI结构中,模糊效果使得用户能更容易分辨前后层级的差异和前后关系。而模糊效果同时也赋予了UI设计师探索不同菜单和布局设计的可能性。

雅虎天气APP 中,每个不同的城市都会有一张漂亮精致的照片,只需一个点击你就能看到看到关于这个地点的更详细的关键信息。相比于用一个全新的界面来遮盖漂亮的背景,雅 虎的设计师让背景模糊虚化,以保留UI的使用场景,不会让用户有跳出界面的感觉,而模糊的背景和前景的内容又构成了良好的对比度。这样的交互更加直观微 妙,主界面和详细信息之间的联系又足够紧密,逻辑清晰。

帮你打造极简风APP UI 的实用设计技巧

一个APP,一种字体

帮你打造极简风APP UI 的实用设计技巧

几种不同的字体在一个APP中混用,会让你的APP显得散漫而马虎。减少屏幕上字体类型的数量,可以强化排版的效果。当你设计APP的时候,尽量试图通过控制同一字体的字重、样式、尺寸和色彩来营造不同的布局体验,而非换不同的字体。

当你在为你的APP选择字体的时候,选择平台的默认字体可能是最安全稳妥的选择:

  • 苹果公司目前在全平台上使用的是San Francisco字体,iOS 9 上将这种字体标记为 SF-UI。
  • Roboto 和 Noto 则是Google Android 和 Chrome 上的默认字体。

帮你打造极简风APP UI 的实用设计技巧

聚焦数据

你应当使用大字体和醒目的色彩来让特定的数据成为视觉的焦点。普通的数据和内容使用中性的黑白灰来展现,而关键的数据则使用强对比的色彩,起到行为召唤的作用,这样可以让用户的注意力更加集中。

明亮的色调+中性的色调是最容易搭配的方案,同时也是视觉上最引人注意的方案。

帮你打造极简风APP UI 的实用设计技巧

被放大的字体和更加显眼的色彩无疑在整个界面中更加具有视觉吸引力,无需更多的提示,用户就知道眼睛应该看哪里。

帮你打造极简风APP UI 的实用设计技巧

通过空间分隔元素,而非线条

设计师常常会用线条来分割区块,表明界限,划分屏幕功能区域。但是当界面元素多起来之后,这些边界、衬线、分隔线会让整个界面拥挤不堪。

精简分割线会给你一个干净、现代且功能突出的界面。想要分割、区分不同的元素,方法有很多,比如使用色块,控制间距,添加色彩和内容,等等等等。谷 歌日历就是一个相当好的例子,适度的阴影,明快而易于聚焦的色块,充满呼吸感的间距,让不同的区块、内容都清晰的分隔在屏幕上不同的地方。

帮你打造极简风APP UI 的实用设计技巧

图标:线条和填充

图标是UI设计中的重要元素,也是视觉传达的主要手段之一。图标应当是简约的,作为视觉元素它应当能让用户立即、快速的分辨出来。iOS 7 之后的iOS系统就开始走上简约的设计路线了,其中图标大多使用了线条和填充式的设计:

帮你打造极简风APP UI 的实用设计技巧

iOS 的时钟图标的两种样式

看看界面底部的Tab菜单栏,它作为应用内导航使用的时候,通常是常驻于底部,所以当用户进入某个功能模块的时候,需要高亮某个图标,让用户明白他 们所在的地方。这个时候,灰色的线性图标表示为未选中的状态,而填充上鲜艳蓝色的图标则用来表示选中的状态。这样一来,这些图标的可用性就显得相当不错 了。

帮你打造极简风APP UI 的实用设计技巧

结语

简约的UI设计配合目前的新技术,是创造良好设计和优秀产品的手段。极简的设计本身并不是设计的目的,打造简单而更加富于功能性的UI才是终极的目标。用直观的流程,清晰的视觉来构造一个无缝的交互体验,这是极简风APP的价值所在。

 

原文来自:优设

译者:@陈子木

原文地址:uxplanet

原文作者:Nick Babich

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28627/

(0)
CatherineCatherine
上一篇 2017-05-21 14:43
下一篇 2017-05-21

相关推荐

  • 嘘!手机能听出你声音里的情绪

    对我们大部分人来说,每天心情有点变化是很正常的。女人的一天常常是喜怒哀乐随机出现,当然一般也就自己调整过来了,不至于要死要活。但有一类人例外,躁郁症患者。 事业不顺、丢了工作、失恋等等,当生活的不幸降…

    2014-12-13
  • 产品设计评价技巧的那些事(Airbnb产品设计总监)

    分享者:Katie Dill(Airbnb产品设计总监);译者:夏梦竹、张红月   在产品设计中会存在各式各样的评价,也许评价可能会带有一些意见色彩,但这就是它的价值所在。它让我们明白——为何人们喜爱或是讨厌我们的产品。…

    交互专题 2023-03-03
  • BAT名师访谈,阿里交互设计专家的成长之路

    编者按:优设访谈第四期!今天这位设计师也是老朋友了,作为网易电子商务部UED团队的创建者,阿里现任交互设计专家,以及业内人士鼎力推荐的《破茧成蝶:用户体验设计师的成长之路》联合出版人,@刘津legene 老师的…

    2015-11-19
  • 阅读类产品中的交互设计逻辑分析

    ↑  点击上方蓝字,加个关注吧~ ↑话题:阅读类产品的交互设计该怎么做?本文共1285字25图,预计阅读时间: 4分钟阅读体验阅读类的产品交互核心所有阅读类产品围绕的产品核心是:阅读体验好的阅读体验会让用户感到熟悉性,由于用户习惯长久的累积,对于阅读产品的使用逻辑,在用户脑海中已经有了一个基础的操作定位。在阅读体验中,不同习惯的交互动作设计所带来体验也不同,通过分析阅读产品中的交互方式,来解剖其交互中设计逻辑。阅读方式我们参考了三款阅读...

    2018-02-27
  • 【干货】2014年微博话题年终盘点

    阿西导读:对于交互设计师来说,需要掌握很多信息。以免在自己的产品设计中让用户感觉落伍,适时添加一些热词的交互会提升产品体验,下面来瞅一瞅最火的话题先 。 本报告在进行2014年话题盘点时,以专题形式进行。…

    2015-01-20
  • 用户体验和可用性之间的联系和差异,你都知道吗

    可用性涉及到产品的有效性,效率和满意度,用户可以尽可能简单那地完成某些任务。另一方面,用户体验涉及到用户和网站互动上更为广泛的领域中的方方面面。作者|Amy Smith源自|优设网最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,...

    2018-03-06
  • 线上与线下零售体验设计分析

    本文作者将结合自己对线上与线下零售的实际体验,与你交流用户体验设计策略相同之处,提升融通思维的洞察力。本文行文思路如下:
    1、用户流量
    2、停留时间
    3、回访频次
    4、客单价
    5、盈利模式
    6、总结

    2017-04-29
  • 你们做交互设计都使用哪些权威的工具呢?

    达内UI设计,中国UID课程标准制定者工具是设计师的重要榜首,好的设计离不开好的工具,那么你交互设计都使用哪些权威的工具呢?本文为大家总结一下。哪里能学到企业需要的设计技术?2018学设计到哪里学就业更好?零基础学设计多久能学会?转行学设计学完好就业么?1月达内UI免费训练营火热报名中,全程大咖级讲师亲授,为你解析UI行业发展趋势,就业前景,帮你了解设计,轻松入门,更快一步成为设计大牛!马上阅读原文或者回复:姓名+电话+城市报名吧!好消...

    2018-01-30
  • 如何才能读懂甲方给出的设计需求?

    转到交互岗已经有一阵子了。原来在做产品的几个月里没少和技术、设计进行沟通,每当自己把意思想法传达下去的时候,反馈回来的结果基本都要进行进一 步的修改,这种返工和修改在产品快速迭代的过程中很浪费时间。当时自己没有觉得表达有问题,已经把需求的目的结果都表达清楚了。可能是自己没写过代码、没 做过设计所以在一些专业的术语的表达上,方案实现方式的选择上存在偏差,导致技术、设计没有完全按照自己设想的预期做出结果。

    2017-05-24
  • Axure原型管理与展示

    因为墨刀是自带生成分享链接以及分享二维码功能,这里主要写关于Axure的原型管理与展示。AxureShareAxureShare是Axure RP官方的免费原型托管网站,可以直接在Axure中共享发布。发布后Axure的源文件也会保存在官网的地址中,在其中还可以设置访问密码。But, 这么好用为什么用的人少呢?因为访问的时候,会慢的你心碎。2. 产品大牛产品大牛是济南公司开发的产品托管网站,解决了Axureshare连接速度慢,访问体验...

    2018-03-24