小而美:清晰的可穿戴设备界面

[国外设计第116期]

移动端的设计教育我们要设计得小,如今,可穿戴设备则使我们的设计愈发的小。手表的设计或许听起来吓人,但只要回到设计理论的本源,你就能做出正确的选择。

提到穿戴设备的设计,就要面临一系列其独有的挑战。

屏幕很小,甚至可以说是袖珍,而且还流行着许多种不同的穿戴设备。(一直都有各种手表式的产品在冲击市场。)有些提供了彩色屏幕和丰富的功能,其他一些则有着超简单的美学外观和稳健的功能。

各种不同的穿戴设备

从简单的健康追踪设备,到能够与手机系统同步的功能齐全的手表,设计这些小屏幕界面时,有许多变种需要考虑。

2ERZzu

图片来源: Apple Watch

bUN3amN

图片来源: Tom Tom Multi-Sport

VbiANnB

图片来源: Fitbit Surge

目前,我们可以看到有3种主要类型的穿戴设备:

每种设备都只有一块几厘米大的屏幕,使得手表的UI设计成为一项特别的挑战。有些设备用了彩色屏幕,还支持动画。许多都带有手机上的功能,而其他则仍然局限于黑底白字显示屏(也有白底黑字的)。

运用UI设计理论

那么,要如何设计所有这些设备?又如何保持一致?

这最终都要回归到你的第一个设计项目,以及其中的设计理论和概念。这些概念包括色彩、对比、留白和字体。

色彩

如今多数手表屏幕都黑色的,许多手表应用是在深色背景上使用亮色元素。这使得色彩的选用尤为重要,因为你选用的颜色既要与环境融为一体,又要清晰突出。

处理深色背景,就意味着设计元素要基于一套浅色或者亮色的配色方案,这令人想到Flat配色和Material Design。

muE3eiN

图片来源: Runtastic

上图中, Runtastic 就处理得很好,明亮的色调在深色背景上清晰易辨。蓝色有助于展现品牌,更鲜艳的绿色则用于按钮和用户操作项。其中所有颜色都容易辨识,对设计与功能起到了积极的作用。

对比

对比在小屏幕上同样重要。

设计应该清晰地划分各项元素,在它们之间建立起大量区分。屏幕上有多个点击区域时,这点尤其关键。还有一个重要原因,它使得元素能一眼轻松瞥见,这正是许多手表用户的使用方式。

aEfeAv6

图片来源: Streaks

上图中, Streaks 运用了明暗的手段来建立显著的对比,提升了易读性和可操作性。每个圆环都设计成可点按的,功能也清晰可见,这得益于所用的颜色与尺寸,让每个元素都鲜明突出。

留白

在小屏幕上,留白是成败的关键。留白过多则没有地方呈现内容。留白太少元素难以分辨和阅读。两个极端之间,只有一片狭窄地带是对功能和可用性有益的。

NFNfEfe

图片来源: The Guardian

上图中, 卫报 做得很好。图片与文字的摆放留出了大量的空间,每“屏”上只显示一则消息。消息包含文字和图片,请留意每行的字数和加大的行距。

字体

在这些袖珍屏幕上,只有一种字体有用:简单的字体。

市场上几乎所有的应用都用的是简单的无衬线字体,字重也是中等(还有些更细或粗的字体用作辅助)。字号通常都比你所想的更大。每行大约20个字母,每“屏”不超过6行。再多一点点文字,就难以阅读了。

7nQfIjA

图片来源: Citymapper *

上图中, Citymapper 用了几种不同层次的文字,为各种操作建立了可靠的区分与层级。字体简单,文字清晰。这款手表应用将所有元素组合起来——色彩、对比、留白、和优秀的字体——帮用户梳理出最重要的信息。

YBnMVn

提及穿戴设备时,朴素、简约和微交互同样重要。将它们相互融合,你就会得到在小屏幕上看起来(还有用起来)很棒的产品。

rum2amQ

图片来源: Pittsburgh Steelers App

上图中, Pittsburgh Steelers app 结合了所有这些元素,运用大量色彩和图片,使得应用美观惹人喜爱,同时也易于使用。正由于元素间大量的留白与反差,还有清晰可辨的操作项,内容与信息具备了功能性。

接下来呢?

讨论穿戴设备时,我们其实是在学习穿戴设备的最佳实践,配合一切具体创意来完成UI设计。

虽然许多穿戴设备界面是原生的,我们能不能在其中融入更多网页和其他应用呢?多数设计师都在遵循现有工具进行设计,两者能否结合?

我们是不是该思考一下,穿戴设备有哪些不同的使用方式?

去问每一个人,似乎他们都有自己使用穿戴设备的理由和目的。但就目前为止,与手机相连的穿戴设备似乎只是手机本身的一种延伸。我们希望这个状况有一天会改变,但是用户是否会在手机上浏览网页,仍是一件难以预料的事情。

MzQryy

图片来源: 7-Minute Workout

穿戴设备的应用何时能走出原生应用的范畴?

移动优先的设计 我们不久以前才开始谈论。如今它已成了第一原则。

这也会发生在穿戴设备上吗?很难说。在行业朝着那个方向发展之前,市场可能就会趋于饱和。(预计Fitbit和Apple Watch将会占据穿戴设备的主导地位,创造出 250万到600万的手表销量 。相比之下, iPhone用户预计有940万 。)

结论

基本设计原则的存在有它的理由。不论设备尺寸如何,运用这些概念都能创造出有效的设计。但这并不是说应该坚持UI设计理论中的每一条“规则”。

去实验去尝试,但要聆听你脑海中的微弱声音。当你开始质疑使用方式和设计方式时——不论是多么小的疑虑——都应该回归本源。而且要找用户做测试。

焦点图来源: Forbes

原文链接: http://studio.uxpin.com/blog/think-small-applying-ui-design-principles-to-wearables/

译文来源:http://www.colachan.com/post/3476

作者信息:

Carrie Cousins

Carrie Cousins has more than 10 years experience in the media industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

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

(0)
TinadminTinadmin
上一篇 2015-12-28
下一篇 2015-12-29

相关推荐

  • Ps CC使用技巧

    小编话:工欲善其事,必先利其器。作为一位UI设计师,Photoshop一定是你的必备软件吧!只会用还不行,高效的利用才是王道。今天给大家带来的是来自八只熊酷站分享的PS CC使用技巧,作者从软件、习惯、技巧等三个方面…

    2015-01-22
  • Apple Watch界面设计规范之UI设计基础(2/2)

    六、布局 并排放置的按钮数量要控制好。当并排放置按钮时,使用图标来代替标题文案。一行不要放置3个以上,否则按钮的尺寸将会太小,很难被点到。 完整利用左右两个边缘之间的全部空间。Apple Watch的边缘斜面会在…

    2015-03-10
  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

    2015-03-10
  • 1989-2014 网页设计的演变

    转载:hejidaren 2015.03.13 www.shejidaren.com⤴ 估计很多做网页的同学还不了解网页的历史,它是什么时候出现的?而那时的网页又是怎样子的呢? 如果想了解下网页设计的简史,请往看吧,我建议每位网页设计师都应…

    2015-03-16
  • 无限滚动翻页的优点和缺点

    一张图告诉你无限滚动翻页的优点和缺点 什么是无限滚动翻页?你一定不会陌生。实在不清楚,刷一下微博就知道了。想不想知道你的网站适不适合使用无限滚动翻页,看看这篇文章应该会很有帮助! 无限滚动翻页是现在讨…

    2015-01-21
  • 锤子视觉设计师:如何成为一名优秀的设计师【TEDx视频】

    跟大家分享一段锤子科技视觉设计师的罗子雄的TEDx演讲。 TEDx是由本地人士自发组织的,旨在为本地的创见者带来TED一般体验的活动。在每一个TEDx活动现场,都会有来自TED官方的演讲视频以及本地的演讲者,他们一起为…

    图形用户界面 2015-12-23
  • Sketch从入门到精通-Sketch3蒙版的使用

    蒙版,顾名思义就是蒙上一层东西,只显示你想显示的部分,类似PS里面的遮罩。在Sketch里面,你可以有选择去显示想要显示的内容,比如你可以打开一张正方形的图片,然后想做一个圆形的头像,那么就需要在这个正方形…

    2015-07-20
  • 手机界面设计:人机交互界面设计的五大原则

    出色的用户界面应该遵循人性化的设计原则,基于用户的思维和工作模式,而不是移动设备的功能和特点。若是界面不吸引人、逻辑不合理,再伟大的应用程序也不会受到用户的青睐的,但是一个漂亮的、吸引人的UI界面不仅…

    2015-04-30
  • 国家地理:创新设计世界地图APP-炫酷、叼、高度还原设计方案。

    本文首发在iamue.com(我是UE网) 头条号同步发布 来看一看别人家的UEUi 国家地理做了一个世界地图app,动效狂拽酷炫叼炸天。关键是app线上高度还原了设计的动画效果,而且非常流畅。一起来欣赏一下吧 然后默默的收…

    2015-06-25
  • 『UI设计尺寸标准汇总』iPhone界面尺寸标准|Android界面尺寸标准|网页界面尺寸标准

    iPhone界面尺寸 设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus设计版 1242×2208 px 401PPI 60px 132px 147px iPhone6 plus放大版 1125×2001 px 401PPI 54px 132px 147px iPhone6 plus物理版 1080…

    2015-06-16