简约而不简单,谈一谈移动开发中的那些极简设计

设计是一件用户驱动很强的工作。随着用户越来越偏好更简洁的交互界面,如何剔除多余的元素,保留最基础最重要的元素是极简设计的关键。极简设计形式和功能完美结合。它最大的优点是极简的表现形式,简洁的线条,大方的留白,简约的图形化元素,就算是很复杂的内容,在这样的设计下也会显得很简洁和干练。当然,如果能有效的利用这些元素。


设计是一件用户驱动很强的工作。随着用户越来越偏好更简洁的交互界面,如何剔除多余的元素,保留最基础最重要的元素是极简设计的关键。极简设计形式和功能完美结合。它最大的优点是极简的表现形式,简洁的线条,大方的留白,简约的图形化元素,就算是很复杂的内容,在这样的设计下也会显得很简洁和干练。当然,如果能有效的利用这些元素。

简约而不简单,谈一谈移动开发中的那些极简设计

极简设计必须要简洁明了和一致的可用性 。你的交互系统应该通过清晰的视觉传达(Clear Visual Communication) 来解决用户的问题。这也是为什么具备简洁设计和高可用性的应用如此让人深刻。即便只是一个通过极简设计的导航,都能够提供很强的交互功能。要做到这一点,你需要注意以下几个方面。

简单的配色方案

简单的配色方案能够提高用户体验,那么相应的,过多的色彩则会带给用户负面的影响。针对于初学者,有一些预先定义的标准颜色方案能够让你轻松创建新的颜色方案。

1、单配色方案

单配色方案由特定色彩的不同的色调,阴影或颜色深浅所构成。他们的原理是通过修改特定颜色的饱和度和亮度,可以生成多种协调的颜色,这种颜色方案比较简洁和优雅,不会给眼睛产生太大负担。

简约而不简单,谈一谈移动开发中的那些极简设计

蓝色的单配色方案(素材来源: Smashing Magazine)

 

简约而不简单,谈一谈移动开发中的那些极简设计

素材来源: Dribbble

2、近似色彩配色方案

近似色彩配色方案的思路是从色轮上取三个相邻的颜色来做为配色。全手势操作的应用 Clear 使用了近似色彩配色方案,它使用不同颜色来区分任务的优先级或者高亮关键的任务。顶端的任务使用最鲜艳的颜色,而底部的任务则使用明亮精致的颜色。

渐变的黄色和橙色也是近似色彩配色方案的一个例子。

简约而不简单,谈一谈移动开发中的那些极简设计

素材来源: tuts+

简约而不简单,谈一谈移动开发中的那些极简设计

iOS 平台的 Clear 应用

模糊效果

模糊效果出现在极简UI设计中是一件非常符合逻辑的事情,它能够增加 UI 的层次感。如果你的 UI 拥有多个层级,使用模糊效果能够让用户清晰地了解到 UI 的前后层级的关系。这也给了设计师一个完美的机会来设计多样化的菜单和层级效果。

雅虎天气显示了一张当前位置的风景图片,如果需要查看天气的详细信息,你只需要向上滑动便会马上显示出来。与在原先的页面上叠加一层相比,这种方式在增加了详细信息的易于获取的情况下还保存了上一张图片作为模糊背景后,帮助用户在操作之后有更为直观的反馈。而且交互方式极为自然,你可以很方便的就返回到上一层。

简约而不简单,谈一谈移动开发中的那些极简设计

iOS 上的雅虎天气

一个应用中只使用一种字体

在一个应用中使用多种字体会看起来很散乱和马虎。减少屏幕上字体的类型数量可以增强排版的效果。当你在设计应用的时候你可以通过更改字体的字重、样式、尺寸和大小来优化布局效果,而不是更换字体。

简约而不简单,谈一谈移动开发中的那些极简设计

素材来源: Apple

通常来说,一个应用中只使用一种字体。

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

  • 苹果使用 San Francisco Family 字体来提供全平台一致的阅读体验(在iOS 9 中简称为 SF-UI)。
  • Roboto和 Noto 分别是 Android 和 Chrome 的默认字体。

减少屏幕上使用的字体类型能够获得较好的排版效果。

简约而不简单,谈一谈移动开发中的那些极简设计

素材来源: Dribbble

数据的视觉焦点

1、你应该使用大号字体和醒目的颜色来让特定的数据成为视觉的焦点。使用中性的颜色(黑白灰)来展示普通的内容,而一些具备操作功能的部分则使用强对比的颜色来吸引用户注意,从而给给予用户正确的指导和操作。

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

简约而不简单,谈一谈移动开发中的那些极简设计

素材来源: Smashing Magazine

2、被放大的字体和显眼的色彩能够很好的吸引用户的注意力,而不需要多余的文字提示。与此同时还提供了简洁易用的信息收集体验。

在屏幕特定的区域使用放大的字体和弹出的颜色能有效吸引用户注意力。

简约而不简单,谈一谈移动开发中的那些极简设计

素材来源: Dribbble

使用留白代替线条来区分元素

设计师通常使用线条和分割线来给屏幕划分区域和功能类别,但是增加太多这些元素会 UI 界面过于臃肿。

更少的线条和分割线能够让我们的页面看起来更加的干净,现代化和功能突出。我们可以使用间距,留白和色块来区分不同的元素。谷歌日历就是一个很好的例子,它使用投影将两个内容不同的区块清晰地拉开层次,而不是用线段来简单地分割。间隔不仅提供了清晰的视觉也增加了日历应用的易用性。

图标:线条和填充

我们使用图标用来表达某种功能或者内容,图标作为一种视觉语言,它应该是简约易于识别和理解的。iOS7后许多极简设计的 UI 都使用线条或者填充的图标。来看看同一个图标分别使用线条和填充的效果。

简约而不简单,谈一谈移动开发中的那些极简设计

时钟图标 素材来源: icons8

我们来看看底部菜单栏的图标。该图标在应用中通常是作为导航的存在,所以指示当前用户所在区域是很重要的,我们通常使用高亮图标来表示当前用户所选中的区域。这个时候,灰色的线性图标表示为未选中的状态。这样一来我们的底部菜单栏就很直观了。

简约而不简单,谈一谈移动开发中的那些极简设计

苹果商店的底部导航 素材来源: viget

总结

简约的 UI 和设计技术是完成优秀设计的关键,但是极简设计的本身不是设计的目的。我们最终的目标是要简约 UI 的同时需要保证功能的完整性和高可用性。简单的流程,清晰的视觉传达和与设计的结合来打造无缝的交互体验才是最重要的。

 

作者:掘金翻译计划,掘金是一个高质量的技术社区,从 Swift 到 React Native,性能优化到开源类库,让你不错过互联网开发的每一个技术干货。

本文由 @掘金翻译计划 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-20 09:35
下一篇 2017-05-20 11:30

相关推荐

  • 色彩如何应用在交互设计中?

    对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(当然,前期也经过了讨论,在纸上也画了交互的流程了)。对于时间不充分的时候来说,这样是会节约一部分时间。但是,这样经常会带来一个弊端:交互考虑不充分。为什么会这么...

    2018-04-26
  • 【笔记干货】UCAN2017用户体验设计论坛

    作者: 阮小阮     忙忙碌碌一天这么晚还没睡是因为我在给大家编辑UCAN的干货哇~ 虽然我平常很懒,可我们真的只推干货哇~ 希望大家都能获取一些知识一些思考 互联网这么快,拥有平衡的能力真的很重要~!   董本…

    交互专题 2017-08-07
  • 互动的未来不应只在手指上

    最近对未来交互设计发展的一个很流行的观点 — 用手指操作各种大大小小的触摸屏,下面还会有很多这种例子。这篇小文章并不涉及任何详细的“未来发展规划”, 我只是提供一些可供参考的点子。 在开始构想应该怎样同我们…

    2014-12-25
  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • 交互设计师的60日计划第二十天

    这几天觉得好像没有什么可写了,会不会是姨妈所以脑子比较迟钝→_→昨天初中闺蜜突然叫我十一去秦皇岛玩,因为找不到人陪我去台湾所以果断的买好了所有票订好了房和她们去玩玩,晚上同事为了犒劳自己这几天准备晋级的…

    交互专题 2015-08-20
  • 互联网理财平台交互设计再设计

    一、项目背景互联网理财平台,支付渠道升级,由原来的新浪托管换成富友、宝付支付。这就意味着平台需要对账户资产页面及交易流程进行重新设计。用户在购买理财产品时,只能通过平台的账户余额进行购买。如果账户余…

    2017-08-01
  • 塾乐教育-进阶提高设计思路的秘籍在这里!

    一直以来,我们始终想让知识变的更实用这5年,课程前后完善了几十个方案这篇文章,请认真阅读也许,会改变你的一生01为什么学设计一定要参加系统课程学习?01- 电商设计行业升级更新太快,如果不即时学习最新的知识。单靠自己平时工作的经验是无法满足中高端市场的需求的!通过学习,让你远远超过你的同行技术水平!02- 虽然互联网上免费知识层出不穷,但绝大部分都是挂羊头卖狗肉性质的不系统招生引流课程。给你一点甜头,再收取你高额培训费用!03- 一个人...

    2018-03-03
  • 这个是很多人找交互设计文档的写作方法和模板

    文章来源与腾讯CDC 作者是yoyo 前言:最近准备做一个交互设计文档的分享,但是一直没有时间整理好keynote,这里先分享一个设计文档模版,以及模版中每个元素的使用理由与方法。之后的设计文档分享中,会加入更多的…

    2015-08-11
  • 提升用户验证,要好好考虑几件事情

    出色的移动端用户验证是怎样的?减少注册和登录的痛苦?

    2017-05-06
  • 新用户首次体验有多重要?又该如何提升?

    一款优秀的移动产品应当有一套可靠的新手体验设计策略。不要把自己限制在产品里面,从核心价值入手准备——抓住每一次可以向用户传达价值的机会。不管是应用的广告或者一个引导页,抓住任何机会去诠释产品的价值与功能吧。

    2017-05-06