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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

iOS 的时钟图标的两种样式

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

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

uxplanet
原文作者:Nick Babich
优设译文:@陈子木

(0)

相关推荐

  • 简单5招玩转唯美极简风

    极简摄影追求用最少的画面元素表达画面的主题,画面简单明了却意味深长,是当今非常受欢迎的一种创作风格. 不过,极简可并不是"极为简单",如何利用有限的元素组合创造出丰富内涵的画面是一 ...

  • 极简非简陋·英才APP的设计减法|设计沉思录

    引言 在一个追求内容至上与体验至上的时代,设计的表现更加简洁直白,这正如著名建筑设计师密斯所说过的:less is more,在业界内还是跨领域都在流行一个名词:极简设计.简单的形式往往能够带给人们更 ...

  • 极简主义人体大片

    之前我们曾经为大家介绍过很多极简主义摄影作品,如用留白打造极简主义摄影.宁静致远--极简主义摄影等.许多人都表示非常喜欢,而这一风格的摄影作品通常都以风光和静物为题材,当极简主义遇到人体摄影将是什么情 ...

  • 5种极简风格拍摄技巧

    拍好极简风格,我们可从三分构图法来开始找寻所谓的规则,再去挑战它,甚至超越它.以一张宽高比3:2 影像,我们可以将影像横切为三等分,如例图般将海与天空分别采取1/3 与2/3 的方式进行拍摄,然后于1 ...

  • 极简网页设计技巧,打造简约之美

    极简主义网页设计风格,如何才能做到简约而不简单?简约风设计需要了解和掌握哪些禁忌和技巧,才能让网页设计简洁而不失魅力?继续阅读文章,小编将结合具体实例为大家一一讲解. 近几年,极简主义设计风格(也称简 ...

  • 30个精美极简的ui kit PSD下载!

    小编:今天给大家带来的是由symu分享的30个精美的极简的ui kit.包含了各种元素,如聊天 播放音乐 日历 天气 注册 登录 404 等等 是在以后工作中或许都能用上的东西.所以设计师们最喜欢ui ...

  • 手把手教你打造简约现代的极简海报

    童鞋们是不是图标和界面做的晕掉了,今天来换换口味吧.很容易上手的极简海报教程,非常适合新手拿来练手熟悉软件!教程操作偏简单,步骤也很细致,都是基础工具的运用,新手跟着教程完成也是毫无难度.加油,让自己 ...

  • 3大速成法则帮你轻松搞定极简主义网站!

    今天@念经的大猕猴桃这篇译文特别不错,对于没有,想借鉴他人的设计师,如果没有强大的归纳能力,阅遍极简也枉然.恰好这篇文章把极简主义必备/抛弃的元素,可以运用的技巧,如何与其他风格结合这几个关键点都说得 ...

  • 绘制极简性感时尚风格插画

    小编:插画需要找参考,灵感.有这样一种简单粗暴的参考会是你的菜,一起去看看@飞屋睿带来的用照片做原型,绘制性感女生. 寻图困境 UI设计中配图的问题我曾在<网页配图之个性年代插画当道>中简 ...