移动开发中的极简设计

简介: 本文讲的是移动开发中的极简设计,设计是一件用户驱动很强的工作。随着用户越来越偏好更简洁的交互界面,如何剔除多余的元素,保留最基础最重要的元素是极简设计的关键。极简设计形式和功能完美结合。
本文讲的是移动开发中的极简设计,

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

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

简单的配色方案

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

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

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

素材来源: Dribbble

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

渐变的黄色和橙色也是近似色彩配色方案的一个例子。素材来源: tuts+

IOS 平台的 Clear 应用

模糊效果

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

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

IOS 上的雅虎天气

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

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

通常来说,一个应用中只使用一种字体 素材来源: Apple

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

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

减少屏幕上使用的字体类型能够获得较好的排版效果。素材来源: Dribbble

数据的视觉焦点

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

素材来源: Smashing Magazine

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

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

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

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

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

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

间隔不仅提供了清晰的视觉也增加了日历应用的易用性。

图标:线条和填充

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

时钟图标 素材来源: icons8

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

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

总结

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






原文发布时间为:2016年08月13日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
10月前
|
移动开发 前端开发 JavaScript
移动开发—Less基础与安装
移动开发—Less基础与安装
|
4月前
|
编解码 Android开发 iOS开发
探索iOS与安卓应用开发的差异性与交互设计哲学
在移动应用开发的广阔天地中,iOS和安卓这两大操作系统不仅塑造了市场的双雄争霸格局,更在开发者社区内激发了关于“最佳实践”的热烈讨论。本文将深入探讨这两个平台在技术架构、用户界面设计以及市场策略上的根本差异,揭示它们如何影响应用的性能、用户体验和商业成功。通过比较分析,我们将展现每个平台的独特优势,并为开发者提供战略性建议,以便在不同生态系统中实现最大化的产品潜力和用户满意度。
|
2月前
|
搜索推荐 Java Android开发
打造个性化安卓应用:从设计到部署的全栈之旅
【8月更文挑战第31天】在数字化时代的浪潮中,移动应用已成为人们日常生活的一部分。本文将带你走进安卓应用的开发世界,从设计理念到实际编码,再到最终的用户手中,我们将一起探索如何将一个想法转变为现实中触手可及的应用。你将学习到如何利用安卓开发工具包(SDK)和编程语言(如Kotlin或Java),结合Material Design设计原则,创建出既美观又实用的应用。此外,我们还将讨论如何通过Google Play将应用发布给全球用户,并确保应用的安全性与维护性。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的知识和启发。
|
2月前
|
C# 开发者 图形学
Xamarin 竟在游戏开发领域大胆探索,跨平台优势与强大功能结合,开启游戏开发新潮流!
【8月更文挑战第31天】《Xamarin在游戏开发领域的探索》介绍了Xamarin作为跨平台开发框架,在移动游戏开发中的应用。它利用C#语言的优势,提供高效的开发体验,并结合各平台图形库实现高质量画面。本文还展示了Xamarin如何简化游戏逻辑处理、支持多线程编程及与Unity等工具集成,提升游戏质量和开发效率。此外,Xamarin还支持热更新和多平台发布,进一步优化游戏维护流程。
29 0
|
2月前
|
移动开发 Android开发 Swift
|
4月前
|
移动开发 Dart 前端开发
探秘移动开发新纪元:Flutter框架的跨平台魅力
Flutter,谷歌的开源UI工具包,不仅革新前端开发,其跨平台特性延伸至后端,通过Dart语言统一开发流程,提升效率与一致性。使用Aqueduct框架,开发者可构建REST API,如创建新项目、定义数据模型和控制器,实现前后端同栈开发。Flutter与Dart的结合正重塑移动开发,开启全栈新纪元。
82 2
|
5月前
|
存储 移动开发 JavaScript
比较H5开发与安卓开发
比较H5开发与安卓开发
90 2
|
5月前
|
编解码 前端开发 UED
移动端适配:前端开发的必经之路
【2月更文挑战第1天】移动端适配:前端开发的必经之路
159 0
|
机器学习/深度学习 人工智能 移动开发
【移动开发】2022 年 12 大移动应用程序开发趋势
【移动开发】2022 年 12 大移动应用程序开发趋势
|
存储 移动开发 小程序
H5/小程序小游戏项目系统开发技术(成熟概念)
H5/小程序小游戏项目系统开发技术(成熟概念)
127 0
下一篇
无影云桌面