现代图形用户界面建立在直接操作屏幕上图形对象的概念上,既实现看见——操作——反馈的过程,本文主要围绕两个部分,一个为界面的易操作性,另一个为反馈机制的设计。前一个部分从三个递进的部分说起,单个元素到多个元素最后至任务的整体性。反馈机制的设计是为了让操作更符合用户的心理,好比一个贴心的管家,让用户的每一步的操作都能有所预知。
1.界面的易操作性
单个元素
把一个界面进行划分,单个元素比如一个按钮、一行文本、一个icon,一个滑块等等,这些单个元素是组成这个界面最基础的东西,它们如果单靠本身是无法承担起一个任务的,但每个元素的设计妥当,对整体将产生很大的影响。
举一个例子谷歌翻译的手写图标
谷歌翻译中第三个按钮的含义是打开手写功能,但在我第一次使用它的时候,我并不能很好的预知这代表了一个怎样的功能,因为在以往的APP使用过程中,并没有遇见过这样的icon。相比谷歌,我倒觉得印象笔记的这个icon更能说明含义当然这也只是我一家之言。
而对比这个手写icon,左边的照相机和话筒,我能很快的反应过来,代表的是拍摄和语音录入,究其原因,我觉得一方面是因为这两个图形的可识别性非常强,可以让用户很快的联想到相关的事情,而一根弯弯曲曲的曲线并不能让用户有一个很强的联想;另一方面是因为在以往的其他的APP的使用过程中,已经多次的见过这两个icon,这两个功能比较常见,这也是为什么当一个icon已被赋予了一个通用的含义以后,改变它所对应的功能,将冒着非常大的风险,就比如纸飞机代表发信息,而设计师把它对应为了撤销功能;图片代表了打开相册或则加入图片,而设计师把它设计为了打开摄像头。
再举一个例子,VSCO的几个控件
VSCO的icon的设计虽然很有特点,但没有文字说明,也没有任何的隐喻,这对于新手用户而言简直就是灾难,即使一个已经使用过VSCO的用户,他也没有办法记住每一个icon背后的含义。而且强迫用户去记忆一个icon的功能,肯定不是我们所希望的。假如在艺术性和易用性之间做取舍,一个面向用户的产品应该毫不犹豫的选择易用性。
多个元素
多个元素相比单个元素需要更强的逻辑性和层次性。因为它不再是单独的一个元素,而是一个组合,组合依赖的是它们彼此间的联系。比如一个乐队,有主唱、吉他手、贝斯手以及鼓手等等,每个人负责不一样的部分,但都代表着一种音乐的演奏方式,即它们之间的共性,所以它们可以组合在一起。比如前文提到的印象笔记中的这一组,它们代表的是不同的输入方式,所以被放在了一起。
而不同元素的组合除了他们的共性以外,有的还因为组成了一个流程或者一个步骤,比如常见的注册框,需要用户先输入手机号,再填写验证码,验证码的填写框旁边一般会有一个发送验证码的按键,收到了验证码,便可以将它填入填写框内。验证码的填写框和获取验证码的按钮就代表一个子流程,因此组合在了一起。
整体
多个元素组成了一个又一个的组织以后,就形成了一个器官,器官的作用是非常强大的,它可以完成一系列的任务,当然首先它需要具有一个整体性。不相符合的组织是无法构成一个整体的,就好比胃酸对于肺而言是没有什么价值的。良好的整体可以帮助用户高效率的完成一个任务,再借用注册登陆这个例子,有的产品注册仅需要填写手机号然后输入验证码就可以完成注册,
而有的除了这些以外,还需要填写密码,上传用户头像,甚至还要填写完整的出生年月等等。有时用户会抱怨”我仅仅是为了看一个新闻而已!”
所以在设计一个流程的时候,需要充分考虑到某一个子流程是否有必要,因为用户往往希望自己做的越少越好,他需要的是一个贴心的助手,能比他自己还要了解他需要什么,他是谁,他是一个怎样的人。
当然在设计一个整体的时候需要考虑流程的逻辑性以及视觉上的可操作性,整体的逻辑性就是要让流程符合用户的预期,用户可以大致的理解每一步需要干什么,以及为什么要进行这一步,比如订外卖就是先选商家——选食物——填写地址——选择支付方式——支付完成。假如把填写地址提前到了选商家之前,用户只是想进来看看有啥好吃的,都还没有决定是否要订餐,就被强制要求填写地址,这显然是不太合理的。
视觉上的可操作性这里主要针对于移动端,在移动端上由于界面以及单双手操作的限制,需要注意整个流程的呈现在视觉上应该如何排布。
比如一个表单的填写顺序原本是从上至下,如果最后将提交按钮放在了右上角,用户需要将手指从原本的下方区域挪到上面去点击提交,是一个不太方便的操作。假如在这样设计时,并不是为了让用户增加一点提交的成本,为了让表单的提交率更加高一些,放在下面应该会好一些。
2.反馈机制的建立
反馈机制作为直接操作中非常重要的一个环节,可以辅助性的帮助用户达成目标。虽然它可能对用户需要进行的任务本身没有太强的关联性。没有反馈,也可以完成这个任务。但用户需要一种掌控感,他希望是他自己在操控这个设备,这个软件。举个反面的例子,苹果手机上的应用平台app store,
当在一个网络并不太好的情况下打开它,进入以后可能呈现的只有一片空白。由于这个页面并没有刷新的功能(后来我偶然发现连续点击10次以上底部的bar是可以进行刷新操作的,这也是让我挺醉的),只能看着空白页面等待着,而且并不知道app store有没有在进行加载。所以没有良好的反馈机制将直接导致用户使用时的焦虑,用户并不希望从一个智能应用中,感受到一种高冷或则傲慢的感觉。
反馈机制如何建立,之前看过一篇文章讲设计时需要注意的9种状态,分别为:初始状态、加载中、空状态、单一项目、有一些数据、数据过多、错误状态、正确状态以及完成状态。借这几种状态,我们可以来思考这个问题:
1、加载中也就是loading状态,但凡需要用户等待的,都需要加入这个状态,好让用户知道此时正在通往成功的道路上,这方面的设计也有很多文章进行了分析,使用户在等待的过程中,不至于太过焦虑,通过有趣的设计分散用户的注意力。
2、空状态,像邮箱没有邮件、购物车是空的。为的是告诉用户一个确切的答案,同时又可以通过一些小的技巧达成一些其他的目的,比如引导用户到其他页面,比如愉悦用户。
3、错误状态,这是反馈机制中需要特别重要的一点,对于一个按钮而言,如果操作是不正常的,可能以一个置灰的形式来传达,告诉用户这个按钮并不能点击。而对于一个任务流程而言,错误的状态需要非常明确的告知用户,并且需要附上相关的解释,好让用户知道该如何解决这个问题以及发生了什么,当然要注意的就是用户是没有错的,这也是about face中提到的一个设计原则。所以引导用户解决问题,完成当前的任务才是反馈的关键。
4、正确状态,这是设计者以及用户都最希望看见的结果,可以适时给予用户一些赞扬。而在某些场景下,需要快速的继续接下去的任务,那么及时的进入下一个环节就是反馈的关键。当然注意不要让用户迷失,比如用户本来在浏览一个商品,在这时选择了登陆,成功登陆以后却跳向了首页,这会让用户感到不满,因为他本身可能只是想登陆而已,并不希望影响到当前的商品浏览。
这里提到的反馈机制的建立,也仅仅是从九种状态的角度来说的,还有没有涉及到的地方,以后再谈。