移动端用户体验: 获取用户权限的正确方式

2,371 阅读35分钟

[国外设计第135期]

你知道吗?平均每个应用在安装3天内就会流失80%的活跃用户。多数人下载一个应用,打开一次,然后就卸载了。这是因为用户尝试许多应用,在接下来几天内决定要卸载其中哪些。

是应用品质低劣导致用户这样的行为吗?不尽然,但一款应用的首次交互,在树立整体印象方面扮演重要角色(无论印象好与坏)。用户打开一款新应用时,最不想看到的,就是一大串弹框请求获取权限。

  • 应用想要获取您的位置
  • 应用想要获取您的联系人
  • 应用想要获取您的相机权限

这种操作在用户体验上会造成极其负面的影响,往往导致应用被抛弃。应用要在索要权限之前与用户沟通,这样才能使用户保持投入。本文可以帮助你避开索取权限时的常见陷阱,让你步入正轨。

建立一套策略

说到请求权限,最糟糕的就是在没有任何通知与解释的情况下,用权限请求对用户狂轰滥炸。过早或者一次获取太多权限是常见的错误。然而,许多应用仍然如此——成为了用户打开应用首先看到的东西。例如,Gmail的Inbox甚至在引导页之前就开始索取权限,没有任何信息和上下文说明。

图片来源:Gmail的Inbox

发送权限请求时,你当然希望所有用户都接受。要达成这个目的,就应当建立一套权限策略。权限策略取决于你所请求的权限类型的明确重要程度。非常重要的权限应当预先请求,次要权限可以在情景中再请求。

权限请求模式。图片来源:Material Design

何时向用户索要

确定用户是否接受请求的最关键因素,是它们何时需要用到。

简单的原则:除非需要,否则不要请求获取权限。

只有重要权限需要预先获取

对许多应用而言,获取不到数据权限会改变整个用户体验。例如,如果应用需要依赖短信服务,拒绝这项权限就导致这款应用无法使用。所幸,用户会希望消息类应用获取短信权限,所以把它前置是有意义的。

图片来源:Google环聊

如果某个功能的运转需要获取多个权限,只请求相应权限,不要过头

总结:确保用户清晰理解应用是做什么的(基于应用的描述或之前的熟悉经历),只预先请求用户希望应用获取的权限。

在情境中请求权限

通常情况下,如果新用户一上来就体验到一连串权限请求,你就错失了一个吸引用户的重要机会。应用要在情景中请求权限,并且告知用户这项权限能提供什么。因为只要用户被吸引,他们就更容易接受请求。

图片来源:thinkwithgoogle

总结:在进行相关任务时请求获取权限,用户更容易接受。

如何索要权限

应用应该清晰阐明为何需要每项权限,要提供功能的名称或详细解释。记住,如果想要用户同意,就要礼貌地请求

简单的原则:清晰无疑说明用户将会获得什么,以此换取他们的允许。

解释权限的益处

对于不太明确的权限,需要教导用户这项权限包含什么。如果你的应用有引导页,可以用它来解释应用的功能,还有为何会出现意料之外的权限请求。

图片来源:Material Design

在情境中对权限做出解释,也是个很好的例子——它有助于增长用户兴趣,加深用户对于此权限的理解。向用户解释允许这项权限会带来的好处。

图片来源:Google地图

请求之前的教程

可以在请求之前提供一张背景图,对权限请求做出解释。Foursquare就用了一张背景图来解释为何应用需要这项特殊权限。

图片来源:Foursquare

在真正的请求之前“预先”请求

iOS的默认请求,每个功能只能触发一次。最坏的情况就是用户拒绝了系统权限,因为在iOS中要找回那个权限非常复杂。多数情况下,最好是“预先”请求用户允许,然后在放出真实的iOS权限获取提示。

Cluster就是个预先请求的例子。Cluster的流程中包含了一个情景创建界面、一个预先请求、然后才是最终的权限请求。使用预先请求对话框,几乎彻底解决了Cluster的“不允许”问题。

“预先请求”是一种预先的教育型权限对话框。图片来源:Cluster

在操作情景中请求权限

用户触发的对话框甚至比情景创建界面更有效,因为用户盼着请求出现,更愿意允许权限获取,他们想要使用这个功能。等到需要某个功能时再请求权限。例如当用户点按Cluster中的相机时,才会触发相机的权限。

在用户尝试使用这项功能时,才提醒用户允许权限。图片来源:Cluster

如何处理被拒绝的权限

由于拒绝权限可能会导致某个功能无法按照预期使用,当权限被拒绝时,应当向用户做出解释。

简单的原则:当权限被拒绝时应当提供反馈。

关键权限

如果由于关键权限被拒绝,导致应用无法运行,要解释这项权限为何需要,提供一个链接打开设置界面,然用户开启它。

下面的例子是Google环聊界面,解释了应用正常运转所需的权限。

图片来源:Google环聊

结论

显然,每个应用各不相同,但你应该思考用户何时需要获取手机各部分的数据,并且确保他们希望得到征询。用户体验的改善是不间断的。不要错失用户允许权限的良机!测试每种情况,验证哪种最适合你。

非常感谢!

原文链接:babich.biz/mobile-ux-d…

作者信息:
Nick Babich


[国外设计第134期]

未来的交互是多重方式的。但结合触控和隔空手势(还可能有语音输入)的方式,并非典型的UI设计任务。

在Exipple,我们的设计师与工程师协作打造各种环境中的界面,能够响应手势交互和用户移动等物理属性。我们从迭代式的设计、研发和评估过程中受益良多,我愿意在此分享我们在手势交互中的领悟与心得。

Photo from an interactive video wall installation at FC Barcelona Museum.

FC Barcelona博物馆中一堵交互式视频墙的照片。

设计易于发现的手势

手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

对于从没体验过某种交互方式的用户而言,手势是陌生的领域。虽然我们都本能地了解在触屏上查看地图细节该如何操作,但是想一想,如果在远处观看一块大屏幕呢?如果有人告诉你,你不用触碰屏幕,可以通过手部运动,以一种很自然直观的方式放大地图,你会首先尝试什么手势?遇到这种问题时,我们每个人对自然的手势都有各自的定义。

“未来的交互是多重方式的”

设计要易于发现,这点非常重要。要确保提供正确的设计符号线索,帮助用户轻松发现手势操作方式。这些可以是视觉提示,表明什么样的手势触发什么样的动作。反复使用后,这些探索性的提示就不必保留了,因为用户已经学会了这种手势。

还可以设计动画,渐进式地揭示某种不同的交互方式。例如,要确保用户了解到他们可以不必触碰屏幕,在远处就能操作,为此我们创造了一个菜单,当手指向屏幕时它就能显示更多信息。起初图片以一种随意的方式悬浮排列(A图)。靠近伸手指向这些图片,能显示出每张图片其实是一个分类,包含更多内容(B图)。

gest-7

为什么不能直接把触控操作搬过来

去年我们做了一个小小的非正式研究。我们邀请了一些人到工作室来,向他们展示了一些熟悉的电视界面:菜单和图标、地图、网格、轮播图。让他们想象应该如何在远处通过隔空手势操作这些界面。

这些界面实际上是一系列微型的手势交互原型。我们收集他们的期望,让他们探索一番并给我们反馈。其中显示出一种清晰的模式,他们的期望基本都来源于移动设备上熟悉的手势。所有的参与者,都将手机上的心理模型应用到隔空手势上。有时候,通过对界面操作的期望,我们甚至能从中区分出iOS和Android用户。

“最直观的未必最有效易用。”

但我们很快就遭遇了挑战:最直观的未必最有效易用。例如,鼠标是一种高精度设备,提供一种精确控制。人的肢体在三维空间中隔空移动就没这么精确。我们觉得自己的手在X轴上移动,但实际上我们在另外两个维度上也在微微运动。

我们无法指望达到相同的精确度。专注于精确细致的移动,会不可避免地导致某种紧张——而且“伸直手”肯定不是自然的交互方式。

触碰屏幕时,触点就是起点——一个参照点。想象一下,典型的双指缩放和双手隔空构成类似的操作,两者有什么区别。缩放等级的参考点变得模糊不定。你也不能松开屏幕来停止操作,所以起始点和结束点都变得模棱两可。

An example to avoid: the equivalent of a pinch gesture in an air gesture.

应该避免的例子:等同于双指缩放的隔空手势。

不要尝试把触控手势直接变成隔空手势,尽管它们更熟悉和容易。手势交互需要一种全新的方式——一种起初陌生,但最终能够让用户极尽掌控、并使用户体验设计走得更远的方式。

去掉“乱跳”的指针

如果你在项目中运用计算机视觉技术(例如通过Kinect、Asus、Orbecc等带有深度传感器的相机捕捉动作),你就知道,无法100%实现手和手指的位置追踪。

其他的技术或许能提供更高的精确度,但它们通常需要用户穿戴特殊的设备。随着我们手部运动,计算机并不能持续“看见”我们的手,结果就导致了我们所谓的手抖:看起来像屏幕上的指针或箭头“紧张”颤抖。

“去掉指针这种反馈形式,提供一种替代方案。”

设计另一种指针或箭头起不到多大作用,因为它仍然需要在屏幕上追踪手部运动。你可以要求开发者过滤这些微妙的手部运动来避免这种效果。但是,这种解决方案要付出很高的代价,丧失了某些响应和精确度,并且会导致指针与手有轻微的延迟,降低用户对于界面的操控感。丧失用户的操控感,我们承担不起。

那应该怎么办?

去掉指针。触摸屏上也不需要指针。去掉指针这种反馈形式,提供一种替代方案。让图片和物体“弹出来”,立即响应用户的手部运动,不需要任何指针。

这会从根本上改变你思考用户界面的方式。这不是网页,也不是移动端触摸屏体验。

gest-3

敞开思路

要尝试解放思想,从你熟悉的标准网页和移动UI模式中解脱出来。忘了按钮——思考动作。想象一下,不再有屏幕了,你要用手势来控制周围环境中的设备。你要如何让电视机降低音量?如何点亮电灯?

象征性和形象的手势,例如用食指做出“嘘”的手势降低电视音量,这就简单直接、富于表达力。这或许有些依赖特定场景,也需要用户学习,但一旦用户学会了,他们就很容易记住和使用。

我们创造了一些成功的手势来控制媒体播放:

gest-2

要在手势和它所触发的动作之间建立联系。这些可以基于容易记忆的含义或者视觉参考。这并不容易——因为你需要考虑例如文化环境这样的方面。比如说,在某个国家或文化中被普遍接受的一种手势表达,在另一个国家中或许有冒犯的意味。在某些环境中非常突出的象征,在其他场合或许就没有帮助。

依靠形象化的手势创造所有类型的交互,可能会导致太多的手势要记忆。要将它们当做快捷、有力的快速触发方式——值得分配给那些需要用户频繁重复的操作。

减少错误识别

对于计算机而言最大的挑战,就是区分真正的意图,和那些人们自然做出的偶然手势,例如与人交谈时手部四处移动。

很容易会意外触发动作,让界面在不该变化时发生改变,导致不稳定的体验。作为UI设计师,你得与开发者密切配合,找出哪些有意义、哪些没有,就能避免哪些错误的识别。

好的起点是:手势设计总是要与特定场景和需要遇到的状况联系起来。是否正在播放音乐?那么手势就可以触发。如果没有,那就什么也不做。

“忘了按钮——思考动作。”

要区分手势和意外手部运动,时间是个重要的因素。例如,如果我指着某个物体超过1秒,就意味着我的确想要操作它。

距离也是另一个因素。如果你在为博物馆或参观中心设计一套互动装置,你可能想让它识别足够靠近的参与者的手势,相对忽略那些站在远处的旁观者。

避免疲劳

就像字面意思,感受手势造成的影响并不容易。你得一遍遍观察用户,理解你所创造的体验给人带来的真实感受。

简单几点需要记住:

  1. 除非你在设计物理游戏或锻炼项目,否则要确保人们不必太频繁或太长时间举起手臂、抬起双手。
  2. 要确保手部轨迹和UI元素间距离的比例足够舒适,尤其对于大屏幕。这意味着用户可以毫不费力指向屏幕的任何部分。
    Example of smaller movements mapped to a larger part of the screen for comfortable reach.
    一个例子,小范围动作对应屏幕上更大范围的区域,让触达更加轻松。

  3. 使用双手比单手交互更不容易感到疲劳。可以把某只手作为惯用手,用来触发操作(比如显示出滑块)。然后用另一只手来辅助(调整滑块的数值)。要考虑到你不必用单手来完成所有操作,可以探索更多的组合。
    Related:
    相关阅读:UX设计师应当探索手势交互的6大理由

保持一致,左右手都要触发相同动作

最后,用户通过右手触发的任何操作,也应当能够用左手触发。这不仅是为了方便右撇子和左撇子,这种一致性也帮助人们学习和接受。所以如果你学会了某个手势,你可以用任意一只手触发——不必记住要用哪只手。

一致性要贯穿你整个概念,就像其他所有UX项目一样。成功创造了手势+动作的组合后,可以考虑是否需要在其他用户场景下启用类似动作。一旦熟悉了,用户会期望使用相同的手势。

要创造易于发现和记忆的统一的手势语言。

有了这些手势交互的规范,你就可以开始探索这块相对未知的创意领域了。一旦理解了这些区别,就能结合隔空手势和触控手势,创造独特流畅的用户交互。

原文链接:blog.invisionapp.com/effective-g…

作者信息:
Yanna Vogiazou
Yanna is UX Director at Exipple, a Barcelona-based startup. She's working with her team on new concepts and user interfaces based on gestural interaction. She brings over 8 years of experience in designing for mobile, tablet, web, TV, automotive, and domestic appliances. Outside work, Yanna can be found searching for orangutans in the jungle or exploring the underwater world.


天气热起来了,免不了有些浮躁。最近有一首老歌令我着迷,总能让我仿佛置身初夏夜晚,四周除了轻风,只有明澈星空与无垠旷野。星空下的少年回到了意识的起点,对整个世界充满好奇:我在哪里?天边有什么?头顶那些亮闪闪的是什么?

《Puff the magic dragon》

这首歌还有许多其他版本,我觉得唯有四兄弟的和声唱出了这种感觉。原以为歌词会与旋律一样欢乐轻松,看了才发现是个有些揪心的故事,尤其在结尾处的转折。

它很像去年的动画电影《头脑特工队》。里面那只魔幻生物——彩虹象bing-bong,身体是粉色的棉花糖,驾驶着彩虹车帮助Joy返回指挥部。想起bing-bong最终消散在遗忘深渊的那一幕,我觉得或许应该介绍他与神龙帕夫认识,他们肯定一见如故。我甚至能想象他们俩尽情欢笑,打一场魔法的雪仗,世界瞬间五彩斑斓。然后他们玩累了,彩云飘散,光芒熄灭。bing-bong和神龙帕夫收起笑容,相视无言。

我已经记不起童年有没有过这样的伙伴。可能我不是一个有想象力的上帝,没有创造出如此神奇的世界。也可能他们走向了相同的命运,永远留在了记忆的迷宫里。据我妈讲,我小时候特别喜欢玩具小汽车,比巴掌小一些,不握在手里不肯睡觉。但我的小汽车总会莫名其妙不见,然后只好再买新的。直到搬新家,我妈才发现衣柜后面变成了停车场。这算是我童年做过的一件坏事了,我也想不通动机何在,只是玩腻的话应该不至于如此,而且我也从没这样对待过其他玩具。我猜想,可能那时经常上演某种剧本,比如新的汽车侠打败了它堕入邪道的师傅之类。

过去这么久了,还是会被如今小孩的某些举动深深震撼。我目前租住的小区附近,有一所实验小学。偶尔目睹这些天真烂漫的面孔放学回家,他们一手牵着妈妈,一手拿着甜筒,还要在石板路上跳来跳去。我凑近一些,跟在他们后面,我发现这个小男孩并不是在石板路上乱跳。一路上的石板色泽不同,有深有浅。他每一次落脚,都一定要踩在颜色较深的石板上。甚至跳到某处,前方路上没有深色石板了,小男孩拉住了妈妈,站着犹豫了片刻,然后有些不甘心地恢复了正常的走路姿态。

我不知道现在的小孩玩些什么游戏,如果换作以前的我这么跳,或许我正在玩3D版魂斗罗。

想起毕业的第一份工作,那年冬天积雪深到脚踝,对于杭州来说,这非常难得。工作到下午3点多,部门主管忽然兴起,发动我们一帮人下楼去打雪仗。吭哧吭哧来到楼下的广场,阳光斜照在脸上、手上,不过一点温度也没有。我们那位爱玩的运营同学,首先抄起一个大雪球向主管扔去,主管也马上还击。大伙分成了两拨,稀稀拉拉互扔了一会儿,决定开始堆雪人。也有人和我一样,蜷在羽绒服里,伸手摸一摸雪,然后马上缩回去,活像一只蛏子。我只记得自己象征性地捏了两个雪球,扔向了路边的禁止停车标牌。

原来雪也有同样的命运。

找了很长时间,终于翻出这张老图,尽管这出自一位成年漫画家之手。2009年的作品,真实得令我过目不忘。

有时看到小孩从路边拾起一根树枝,凌空胡乱挥舞,自己还左躲右闪。真是不敢想象他眼中的画面有多么惊险,或者潇洒。遗憾的是,还能保留这样异想世界的成年人,已经少之又少了。

我已经好几年没有再做过那些离奇的梦,博客的梦境栏目不知道是不是就此无限期停播了。神龙帕夫可能早已离我们而去,如果还能感受到他的存在,请当作亲人一样珍惜。


关于交互设计的一个真实故事,让我对专车软件有了一点新想法。这要从老大讲起:

老大

老大是我大学时的寝室长,言谈举止霸气,思维迥异,常常一语惊人,所以有了这个外号。老大是一名嵌入式开发工程师,极其热爱这个行业,几乎达到狂热的程度,对硬件也非常有研究。

下午4点左右,他用滴滴出行叫车来我这,找我吃饭。老大的住处在6km外,我们许久未见,聊了很多话题。

从大学同学的婚礼说起,话题开始偏向他的专业领域。他和我讲了许多算法、开发思想的问题,也聊电机的各种控制方法,还谈了新能源汽车的电池管理系统。没错,和他聊天就是这样,他知道我不懂这些,但是他聊起来就是这么毫无顾忌,并不在意听者是否理解。我虽然只能听明白一些皮毛,但也很耐心在听。他对电子的热爱极具感染力,听他讲这些天书,一点也不痛苦。这很像我大学的高数老师,讲到一半会沉吟片刻,然后由衷感慨:“这个方程的证明过程是不是很漂亮!”我当时对这门课再如何深恶痛绝,也对这位教授是敬仰万分。

我们大学专业是电子信息,全班同学能听懂专业课的可能不到1/10,我和老大都在分母里。大四那年,老大像是忽然开了窍,开始对本专业产生浓厚兴趣,恶补之前的课程,研究教材之外的知识。据他后来说,是因为那时候他终于见识到了这些专业知识在实际项目中的运用,原来学了真的有用!老大的热情就从那一刻开启了。加上他的钻研精神,我相信他如今一定是个行业大牛。

但提到互联网产品,他既不熟悉,也没有兴趣。老大的手机还是iPhone 4,装的应用很少,一屏能放完。没有建文件夹的习惯,也没想过要整理图标,dock上仍然是iOS默认的4个应用。可见,即使如老大这样富有钻研精神的人,面对不感兴趣的领域,也一样不会花半点心思。

聊天期间我问他来我这叫的是专车还是拼车(这里我的表达不够精确,因为我平时Uber也用,所以我说专车,其实是指滴滴里的快车),他不是很确定,说应该是专车,反正没有其他乘客。我问过来多少钱,他说14块。

饭后,大概晚上9点了。他再用滴滴叫车回去,我观察他的操作,有一些很有趣的发现:

叫车

他起初在出租车一栏里叫车,犹豫片刻,又点了顺风车。想到我在旁边,就试探性的问我:“应该是选顺风车吧?”

我说选快车吧。因为我认为他是快车过来的嘛,觉得应该给他一个相对熟悉的选项。

老大选了快车,输入目的地。我注意到他并没有设置“家”和“公司”,所以他必须手动输入地址。其实一开始他点错了,选的是上车地点,但他并没有意识到。

在他打算输入自己家地址时,我提醒了一下,并且指了指输入框里的文字提示:“您在哪儿上车”。

他退出去,点了目的地,但是他忽然意识到自己并不记得确切地址。于是他又退出去,点了左上角菜单,进入了行程界面。努力尝试各种方式,想把来时的上车地址复制下来,但是失败了。

然后老大回到叫车界面,手动输入了自己家地址。列表显示了几个搜索结果,有的是店铺,有的是公交站。他就这么等着,我没有说话,观察他下一步操作。

但我发现他视线已经离开手机了,手也放低了一些,老大觉得这样就呼叫成功了。

我只好再告诉他,要从那几个地址里选一个,才能确定你的目的地。

老大选了一个公交站,点了呼叫,终于成功叫到了车。

但是,我发现他快车回去不拼车也只要5块钱。所以我估计,他来时叫的极有可能不是快车。

问题

送走老大之后,我把这个过程记录下来。仔细思考和揣摩他内心的想法,得到一些意外收获。

在整个叫车的过程中,老大只有一个最高目标:回家。在老大的观念里,不确定手机应用会作何反应的情况下,他会默认假设应用像真人一样理解他的想法。既然你之前来家里接了我,那你就知道我家在哪了,回去时我要去的就是来时那个的地址。老大费劲去试图复制来时的地址,恰恰可以表明他对此目标的理解:返程——从哪里来,回哪里去。

但是很显然,实际情况并不完美。即使是真人,也未必能准确理解另一个人的想法。

实际结果和想象产生了差异,于是引发了问题。这个问题并不是他不记得自家地址,根源在于老大觉得滴滴应该知道他家在哪,但它其实不知道。按理说,常用地址里的“家”和“公司”就是为解决此问题而生的。然而据我对身边朋友的观察,会主动设置常用地址的人寥寥可数,甚至一些IT人士的这两栏也是空的。

想到这里,我觉得有点混乱。难道这不是两个不同的问题吗?

  1. 滴滴不能聪明地知道或猜出我家在哪。
  2. 滴滴没有提供一种方便的返程叫车方式。

在老大的例子中,回家和返程重叠了。但它并不总是一回事,那就来分别考虑:

回家

从心理模型上说,回家的过程其实是两种状态的切换,一个是“在家”,一个是“在外面”。叫车出门了,就脱离了“在家”的状态。踏进家门之前,一直都处于“在外面”的状态。

举个例子,如果某人最近网购了东西,外出期间接到电话说有快递到了,许多人都会说我“不在家”,或者说我“在外面”,你放物业吧。

“外面”是哪里,没法确定,“家”就相对固定。通过历史行程,分析每组接近地点的出现次数,还有每次到达此地的时间,应该是有办法能猜测出来的。对于没有设置常用地址的用户,如果发现他频繁叫车前往同一地段,则可以在某次前往该地叫车成功后给出提示:发现你经常前往某某地点,那里是你家吗?或者是公司?通过推荐和引导的方式,能够帮助更多用户设置好常用地址,方便未来的出行。

返程

返程算不算一个常见需求?我不知道,我看不到数据。不过这样的场景至少有它的代表性,很典型:从家里(或公司)前往某处娱乐消费(办事情),并且当天以同样的方式返程。

如果是来往于两个常去的地点,倒不太适合套用返程这个概念,我们会更直接的理解为回家、去公司,这都是我们日常生活的一部分。返程的前提,是要前往一个比较临时的环境,不常去,并且下意识认为自己待在这里是暂时的,这就进入了一种短暂的“出差”或“出游”状态。就像身在外地的朋友们回家过年一样,假期结束,我们需要“返程”票回到自己生活的城市。办事地点不重要,重要的是来到这里,能回得去就行。此时“返程”这个概念就清晰明确了。

但“返程”概念有意义,并不代表“返程”功能有意义。最无脑的做法是在主界面增加一个返程的入口,能够一键叫车前往当天内最后一段行程的出发地。细想有很大问题,如果出去办事是招手拦的出租车呢?假如出门聚会是搭了朋友的车呢?用户想要回到出发地,他并不在乎来时是通过什么交通工具,用的是哪个App。这些场外信息,应用是无法知晓的,盲目提供返程,反而是在添乱。

关键的问题在于两点:

  1. 滴滴如何掌握用户通过其他途径出行的记录?
  2. 滴滴如何了解用户某一次出行的目的地是一个临时环境?

单靠手机应用,对这两点都束手无策。所以,“返程”概念或许有意义,但它并不是某种单一的出行方式所能给得了的。


[国外设计第133期]

选择配色方案往往是个难题,尽管网上有各种各样的色彩库,配色仍然至关重要,有时候最好还是亲自动手。而且这个过程也非常有意思。

为这类工作找到一套标准流程是不可能的,因为它天然具有创造性。我使用Sketch来进行这项工作,你当然也可以用Illustrator甚至Keynote和PPT来做。

提醒:品牌建设包含的远不止选择颜色和字体,如果你想要给自己的公司寻找一套配色,我还是建议你雇佣专业的品牌设计公司。

我接下来会重现我选定配色方案的过程,我需要把它用在一些演示当中。一切开始于这张照片,Zurich机场,由Erez Attias拍摄。在Unsplash上你可以找到许多更加漂亮(并且版权免费)的照片。

瑞士Zürich-Flughafen的Zurich机场

首先要做的是从图片中选取一些颜色。目前,我只会选出4种颜色:一种强调色彩、一种浅色、一种深色、还有一种其他颜色。我们之后可以随时回来查看这张图片。

初始配色,从图片中选出的样本。

有了4种基础色彩,可以开始做一些色彩上的探索了。尽管我不是这方面专家,但我有色彩理论的基本知识,我以此来引导我的决策。

探索色调和饱和度

使用Sketch的调色盘,我们可以减淡或加深每一种色彩。既然有浅色和深色,我们就得稍微调节一下饱和度和明度。通常情况,调节色调时最好保持饱和度与明度近似,反之亦然。

通过其他工具探索

我们可以使用像Paletton这样的在线工具帮助我们发现新的色彩。在本例中,我用了两种不同工具来计算互补色和三色系。

最后,还可以尝试在配色上叠加40%透明度的白色和黑色。

尝试各种叠加

我最后尝试的一件事情,来自Marko Vuletič的绝佳提议。建议你直接看看:

《快速创建配色方案的秘诀》

选择强调色时,我们可以尝试之前生成的某些更亮的颜色。

这整个过程帮助我们生成了相当多不同的颜色。如果我把最初的配色去掉,它们就是这些:

最后得到的色彩样品

哎呀,这颜色太多了 😧

一点没错,这颜色确实太多了。我发现通常最好保持4到5个主要色彩,其中有一个应当作为强调色。还可以有一系列的辅助色来支撑,比如用来表达某些含义(红色代表错误等等),将不同部分或者概念分组,(比如用在我的演示中),或者用于代码语法高亮。

现在我们已经有了这一大堆演示,该花些时间相互搭配,尝试看哪些可以凑成对、可以用在哪里。在这里我给不出什么建议,你只能相信自己的内心,还要考虑这些色彩能否很好描绘你的气质和身份。

打磨配色(这不是在玩俄罗斯方块)

纠结一阵子后,得到最终的配色方案:

更新:自从把本文的草稿发给一些朋友看,就有人指出我的主要配色和Deliveroo几乎一样。这当然不是故意的,不过我忍不住想,是不是我的潜意识已经被伦敦遍地都是的Deliveroo品牌形象影响了。

原文链接:medium.com/@dannysmith…

作者信息:
Danny Smith
Teacher. Engineer. People Geek. Blues Musician. Rubyist. Used to design things, now I teach others how to build them better.



[国外设计第132期]

User Experience

设计大型电商网站或者复杂的在线服务时,你很可能需要设计一套系统,来梳理顺序与结构。把它设计得简单直观,让用户顺利通过,是提升转化率的关键。沿途所有的挫败都可能导致他们离开,去选择其他的产品。

易用的分步流程有助于用户避免挫败,成功地完成主要任务。本文中,我们来了解分步导航的各种形式,看如何使用它们。

分步导航是什么?

分步导航(或者说分步指示器)将一系列的过程分解成多个合理的步骤。它引导用户通过一些步骤最终完成一项复杂的任务。好的分步导航应当告知用户以下信息:

  • 他们已经完成了哪些步骤(或任务),最好要有适当的视觉反馈
  • 现在处在哪一步(用户当前在整个流程中的位置)
  • 还有哪些步骤,多少步(最好都要有清晰的名称)

分步导航通过步骤编号表达出整个过程

有3大理由应该使用分步流程:

  • 合理地将数据输入分组
  • 为用户建立明确的期望
  • 在复杂的过程中追踪整个流程

为什么有效?

分步导航清晰地指明了完成任务的路径。研究表明,它给用户以明确的概念,完成最终目标需要多少步,能够显著降低放弃的概率。从心理学角度来看,这颇具意义。如果你知道完成这个过程需要多少步,你就更容易完成它。

分步注册账号

分块展现内容,便于用户浏览,有助于他们理解。实际上,分块其实就是在有意创造视觉分隔的内容单元,在整体环境中有它的意义。

分步导航的使用

分步导航可以用在许多种情景中。下面3个领域最常见。

在线下单

目前为止,分步导航最广泛的使用案例,就是与在线购买相结合,因为这个任务可以很自然地分割成多个步骤。

多步表单

如果表单需要用户填写许多信息,最好将它分成多步。

引导页

分步导航也可以用来引导用户了解一个应用或服务的功能。如果步骤不多,也可以使用小圆点来表示(就像下图Dropbox的例子)。

Dropbox的引导页

分步导航设计最佳实践

创建优秀的分步导航,并没有通用的方案。但有一点是肯定的——你时刻要考虑用户如何与该系统交互。简单说,就是要把流程步骤设计得尽可能简单清晰,不要让用户困惑。

设定用户的期望

当用户要进行一项复杂的任务时,重要的是事先营造他们的期望,告诉他们需要多少时间和精力。如果用户认为这个任务只要2分钟,但实际上花了10分钟,这个体验就很糟糕。

提供简单的描述,能够帮助用户为复杂的任务做好准备。这也很有助于估计完成任务所需的时间,尤其当这些步骤并不均等时(例如有些步骤比其他的更长)。

建立合理的流程

  • 显示流动的方向。最好使用箭头来强调方向,因为线条本身并没有提供“流程”的含义。

  • 结合图形与文字描述其中步骤。要让用户清楚步骤的顺序。

  • 过程不要太长。3-5步就足够了。

  • 使用数字序号描述步骤,指示用户当前所处的步骤(例如第3步、第5步)。

让用户清楚自己当前位置

“我进行到哪儿了?”这是导航需要用户回答的基本问题之一。所以优秀的分步导航设计,最关键的就是保持用户了解当前所处位置。这能够提升连续性,因为用户知道当前位置与之前步骤和后续步骤之间的关系。

要为流程设计一套良好的视觉展现。用户依赖导航元素中的这些视觉线索来回答这个至关重要的问题。

图片来源:Dribbble

状态的变化要清晰,告诉用户当前的步骤不只是改个颜色。适合的图形和文字标签,能帮助用户理解菜单项。

异常标签的错误状态

避免多层分步导航

避免在一个页面上多次使用,或者嵌套使用分步导航。这会导致界面的混乱。

显示出流程反馈

分步导航可以在每步保存后,短暂显示反馈信息。只应该在步骤间有较长延迟时使用这种反馈。

这个分步指示器在步骤保存后,短暂显示了反馈信息。

移动应用中的分步导航

因为横向空间有限,在移动应用和网页上,纵向分步导航也许是不错的方案。不过要确保每步内容是响应式的。

小屏幕上使用纵向分步设计。

结论

把分步导航设计得简单易懂、低调含蓄,也别忽视它们的视觉表现,应当在视觉上吸引和引导用户。“用户至上”。记住我们不是在为设计师而设计,我们为普通用户设计。最终,优秀的分步导航能让用户停留,完成任务,并且让你的网站和应用留下正面的印象。

感谢阅读!

原文链接:babich.biz/progress-tr…

作者信息:
Nick Babich
I’m a software developer, tech enthusiast and UI/UX lover.
nick@babich.biz