JeffJohnson《GUI设计禁忌2.0》作品简介与读书感悟

一、问题起源这篇文章讨论的话题来自于我自己工作中一个长久存在的疑惑。我们用一个例子开场:你运营着一个视频网站,这个网站会给付费高级用户提供3种权益:跳过广告、免费音乐会员、积分折扣。那么你将会员权益页

一、问题起源

这篇文章讨论的话题来自于我自己工作中一个长久存在的疑惑。

我们用一个例子开场:你运营着一个视频网站,这个网站会给付费高级用户提供3种权益:跳过广告、免费音乐会员、积分折扣。那么你将会员权益页设计成这样:

这个时候就有一个充满疑惑的用户站出来了:这个页面的意思是说“我作为一个高级会员,同时享有3个权益,只是这个页面展示不下了,所以我只能通过切换页面的形式查看我的3个权益”,还是说“优质大会员可以按下对应的按钮,从3个权益里挑选一个享受”?转换成我们设计的语言来说,也就是“这到底是一个tab,还是一组互斥的按钮?”

为什么我们要把这两个东西做得那么像?他们应该长这么像吗?tab和按钮、单选框、菜单之间到底有什么关系?这些问题虽然听起来基础,但深究起来纵横50年来控件的发展史,是一个很值得研究品味的小细节。

二、信息与行为,事物与事件

tab和按钮,信息展示控件和选择器之间的差异,根本上来说是“信息”与“行为”、“事物”(thing)和“事件”(event)之间的差异。前者独立于用户的意图和行为之外客观存在,即使用户永远不去看、不去使用这些东西,它们仍然存在。而“事件”则需要事物加上人的操作行为才能完成。

就比如说房间里有一箱子苹果,这是一个客观事实,苹果也是一样“事物”。而人中午肚子饿了,走过去拿起一个苹果吃了,那么“食用苹果”就是一个事件,这个流程需要“苹果”这个事物,也需要人拿起来咀嚼、吞咽的动作,这两个要素共同组成了“食用苹果”这个事实。

在现实生活中“事物”和“事件”完全是两个不同的概念,不会有人把这两个事情混淆。“事物”就好像名词,而“事件”就是包含动词的主谓宾短语,前者看得见、摸得着,能够被稳定观测,而后者不一定。比如要是有人告诉你“桌上有一个苹果”,那么你一扭头就看得见苹果的确在桌上,因此这个事实是确凿无误的;但假如有小朋友跟你告状“报告老师,小明刚才打我”,就不那么容易取证。然而在人机交互中,“动作”和“行为”逐渐区分得不是那么清晰。

三、命令行时代

人机交互发展之初,“信息”与“行为”、“事物”和“事件”可以很容易地区分。

在用户还得使用命令行操作电脑的时代,查看某个客观存在的事物、进行一项行为,共用了一个动作:输入指令。用户需要使用这样的方式来告诉机器我想去看什么、做什么,因此用户可以阅读文本,从语句字面意思判断事物和事件、信息和行为。

从一开始的案例来讲,比如用户想要查看所有权益,就键入“查看权益”,看看打印出来的权益都有什么。假如系统要求用户选择某个权益,则用户输入权益代表的编号或者权益名字。

但命令行界面这种交互形式毕竟效率太低,也并不利于形成用户对于系统完整稳健的心智模型,因此随着电脑作为家用生产力工具的地位不断提升、新的操作设备“鼠标”的普及,图形化用户界面(GUI)应运而生。

在命令行向图形化用户界面过渡的阶段,两种新的交互样式首先出现:菜单和输入框。早期的菜单与输入框的样式非常粗糙,与传统命令行界面差异很小,因此计算机从业者将早期只能展示字符而无法展示图形、所以只能用菜单、文本输入框作为主要交互形式的计算机带点嘲讽地称为“荧光屏打字机”(Glass Teletypes)。

在这个阶段,“菜单”仅仅是一个简陋的、有别于主屏幕的展示容器,甚至我们今天熟悉的“对话框”(dialog box),也可以被理解为菜单的一种变体。至于菜单上究竟是放“行为”还是“信息”、“事物”还是“事件”根本就无所谓,因为用户仍然以类命令行时代的交互方式,也就是用阅读文本的方式来理解事物。

四、图形化界面时代

2002【ISBN号】 7-118-02887-8 / TP312C【原书定价】 CNY37.00 网上购买【主题词】C语言(学科: 程序设计)C语言 程序设计【参考文献格式】李博轩等编著. Visual C++ .NET用户界面开发技术. 国防工业出版社, 。

图形化用户界面极大地改变了用户和电脑交互的方式。鼠标的普及让用户界面的元素更多、结构更加复杂,用户体验和心理学的研究成果也孕育、催生出了许多新的交互样式。其中就包含了一个对当今控件形态影响巨大的概念:渐进展示(progressive disclosure)。

一般认为Xerox公司1981年的Xerox Star是最先在图形化界面中使用选择器/tab的产品,虽然这个电脑商业成绩不咋地,但在用户界面方面做出了很多贡献。在这个用户界面中,设计师为了让用户不需要像命令行界面时代一样不停地通过打字、记忆命令短语来与计算机交互,因此决定采用以下策略:

GUI设计师的日常工作就是界面设计、图标设计、切图和标注。所用工具为PS、AI、AE、C4D(非必需)等,还有切图和标注的一些插件或软件。GUI设计师的就业方向分为主题UI设计师和APP UI设计师。APP UI自然就是手机软件界面。

将高频使用的项目全部展示给用户,无需打字,只要在选项中选择即可:这个策略催生了选择器组件

JeffJohnson《GUI设计禁忌2.0》作品简介与读书感悟

将暂时不需要使用和展示的信息收起来,只在用户点击按钮时再渐进展示:这个策略催生了tab

而为什么tab、选择器成为了我们今天看见的样子?这又不得不提鼠标的普及让一种全新的交互形式:直接操作(direct manipulation)进入了交互设计师的视野。

一、概念不同 1、图形用户界面(Graphical User Interface,简称 GUI)又称图形用户接口,是指采用图形方式显示的计算机操作用户界面。2、UI(用户界面)是广义概念,包含软硬件设计,囊括了GUI 、UE以及ID(交互设计)。还包含。

按今天的说法,直接操作一般指“直接对对象进行操作”,比如用鼠标直接用拖动的形式进行文件排序、放大缩小、位置移动等操作。相比菜单、文本输入框,这种操作形式更快速、反馈更充足、更符合直觉。比如我们现在非常熟悉的“把某个文件拖动到回收站”这个操作,就是直接操作的一个经典案例。

虽然直接操作今天看来是理所当然的,小学生都知道怎么把文件拖到废纸篓。但80年代用户图形化界面诞生之初,用户对家用电脑根本没什么概念,更不要提鼠标拖动这种高端操作了。那么,设计师要如何教育用户学会使用直接操作这种新的交互形式?

这个答案是:引入隐喻(metaphor)。

简单来讲,隐喻即为“用直接或间接的方式,说明A和B很像、A具有B的特性,或者可以用操作B的方式操作A”。将用户完全不熟悉的人机交互概念用日常生活中的事物表述出来,就能使其将自己的生活经验移植/应用到人机交互中,从而降低学习成本、使用户通过直觉也能辨别出某个功能该怎么用。比如上面提到的“将文件移入废纸篓”,就是一个非常出色的、不言而喻的隐喻:

因此,当设计师发现使用隐喻是行之有效的用户教育形式时,隐喻就成了当时流行的设计思路。顺着这个思路越走越远,最终诞生了像mircosoft bob这样类似游戏界面的浮夸系统样式,我放出来给各位嘲笑两下。

话说回来,使用隐喻这股风潮也影响了控件的样式设计。比如1988年苹果开发的一个可视化编程软件Fabrik,就采用了现实生活中“文件夹上的标签”作为隐喻来设计tab,此举暗示用户可以快速地在不同页面中跳转,就像现实生活中根据文件夹标签来翻找文件夹中的文件一样。

此时我们可以发现,Fabrik使用隐喻的“tab选项卡”和Xerox Star纯按钮图形化的“tab选项卡”在样式上开始存在差别。用户无法再从文字上去理解这个控件的交互方式,而需要从图形上去分辨、动用自己日常生活的经验。因此从这个角度上来说,不同样式的控件映射不同的现实物体,不同的现实物体应该对应着不同的交互方式。

比如“单项选择”radio button使用的隐喻,就是收音机按钮。这种按钮按下去一个其他的按钮就会都弹起来,所以每次只能选中1。而“多项选择”check box使用的隐喻则是纸质调查表/备忘录上的打勾格子,因此可以选择多个。

“按收音机按钮”和“在备忘录上打钩”,都是动态的“事件”,而只有“文件夹里的分页标签”是静态的“事物”,这种隐喻性质之间的差异让人对于tab和单选框用途差异作出直觉性的判断。因此因此尽管在80~90年代没有引起充分讨论,但系统设计中,一般会把tab用作静态页面的导航,而将单选框/多选框用作动态选择行为。以Apple II(1986或1987)为例:

相比之下,“菜单”作为最古老的交互控件形式,它的常见样式(下拉菜单)在隐喻流行起来之前就基本固定,可以算为人机交互虚拟环境下一种原生的概念,所以菜单的使用场景反而不受隐喻、不受现实生活中物体的特性影响。它结构简单、有大量空间来写说明文案,因此作为控件的实用性很强,放“静态信息”也没问题,放“动作”也行,有点像一个“收纳抽屉”。

五、混乱的90年代~千禧年

JeffJohnson《GUI设计禁忌2.0》作品简介与读书感悟

90年代到00年代计算机/网络行业发展的势头有目共睹,使用场景的不断增长使得页面的复杂性指数级提升。因此交互设计师也就需要去不断地思考控件之间的层级关系、差异、适用的场景等等。这个时代各个大厂制定过许多关于“行为”与“信息”之间的规则,然后又一一将它们推翻。我们仍然以微软windows和苹果作为案例,看看他们的尝试。

windows很快注意到了“行为”和“信息”之间的差异。在html那种蓝色带下划线的超链接按钮样式流行起来以后,windows认为这种按钮看起来“安全、没有破坏力”,“不太严肃”,容易让用户联想起网页超链接那种页面之间的跳转。所以在windows 7的规范手册中,指导设计师应该尽量采用带边框、有阴影的按钮样式来承载“行为”。

软件设计可分为两个部分:编码设计与UI设计。UI的本意是用户界面,是英文User和Interface的缩写。从字面上看是用户与界面2个部分组成,但实际上还包括用户与界面之间的交互关系。GUI设计简介:JeffJohnson:GUI设计禁忌中提及的。

然而另一方面,windows 7对于tab/单选框的定位是模糊的。它允许使用选项卡tab来替代单选操作,只有被选中的tab下的修改才会生效。允许tab和单选操作进行互换在业界也有一些反对声音,比如说写2000年《GUI设计禁忌》的Jeff Johnson就认为tab最好是只作为导航使用,而非选择器,因为这样做混淆了“信息展示”与“行为选择”的差异。

最后,文字型按钮的出现,使得用户逐渐分不清什么是“tab”,什么不是“tab”。windows7时代也出现了纵向排列的tab,用于支持tab太多导致横向空间不够用的情况。很不巧,windows的另一个控件wizard有着长得很像纵向tab的侧边栏。这个侧边栏综合排列了信息导航、功能快捷操作等多种类型的入口。因此“tab”或者类“tab”的组件使用场景被进一步拉扯、拓宽。

相比windows,mac的做法更加讨巧。mac OS有单选框,但是他们也同时包含了非常类似xerox star原始样式的选项卡视图(tab view)与分段控件(segmented control)。两者虽然看起来一模一样,但从规范的角度上来说,前者负责信息展示,后者负责在单选、甚至多选的动作操作,可以说是非常掩耳盗铃,总体倾向于不区分“选择器”和“选项卡tab”样式。

六、扁平化时代与隐喻失效

JeffJohnson《GUI设计禁忌2.0》作品简介与读书感悟

经过了00年代控件的发展,10年以后有两件事情极大地影响了用户的心智。

其次我们上文说过,隐喻的运作方式是让用户将生活中常见事物与控件做类比。然而时过境迁,当用户生活中常见的事物已经飞速变化,老旧的隐喻就会失效。文件夹选项卡、收音机按钮……这些东西早就是老黄历了,假如“隐喻”需要事先解释才能让用户理解,那么它就不再能起作用。

Jeff Johnson:GUI设计禁忌中提及的明确针对Web设计和笔者认为对Web设计有参考意义的设计原则和禁忌。设计Web项目时尽量参考一下基本原则,避免设计禁忌,应该能使Web项目的GUI上一个层次。

因此对于很多年纪很小的新用户来说,用选项卡tab承载行为操作并没有什么不妥当——毕竟今天文件夹都不太常见了。

七、我们到底该怎么做?

先说结论:

不要制造没必要的规矩

对于绝大多数场景比较简单的产品,菜单/单选/tab不区分也无所谓

对于复杂工具型/企业级产品,无论是移动端还是PC/Web,最好区分操作/信息展示控件,严格区分单选和tab的样式。

首先第一条:不要制造不必要的规矩。这条其实有点违背交互设计师的天性,我们天生就受不了含含糊糊的灰色地带。但控件的运用中,贴合场景比遵守某条据说行业通用的“规矩”要重要很多。比如说我听有些设计师的分享里提到他们会比较严格的要求作为导航控件的tab上不能放操作,而菜单才是操作的聚合。后半句话我们已经在上文论证过了,没有的事,菜单从诞生之初就放啥都行。对于前半句话我想出示一个案例:

这张截图来自淘宝的千牛商家工作台里,这是一个给淘宝卖家的商家后台,它把“发布宝贝”操作露出放在纵向导航(姑且也叫tab吧)上。这显然是一个高频操作。在这个案例里,你可以说它还有其他的布局方式和解法,但是要说因为把操作放在tab上就能导致多么严重的用户体验问题或者多么严重的控件定义问题,那也大可不必那么夸张。

对于大多数C端产品,不区分单选/tab,或者在一些定制化程度比较高的页面中用tab替代单选是可以接受的。其一是因为无数产品长时间的验证说明,用户在这些比较放松、简单的场景下并没有那么纠结控件样式。其二是因为C端产品的“信息”和“行为”其实没有现实生活中那么分明,往往处于比较暧昧、你中有我我中有你的情况中。以“定酒店”为例,“查看酒店的信息”是信息展示,“订酒店”则是动作流程,但用户从哪一步开始转“查看”为“动作”的呢?不一定。

最后的最后,工具型/企业级产品不能应用C端产品的设计逻辑。复杂场景下(比如tab有嵌套关系、比如既有tab又有选择器)依然能让用户准确无误地理解控件的意图和交互形式,是交互设计时必须思考的问题。比如在windows新的fluent规范中,已经绝口不提tab和单选框之间的互换关系,tab被定义为纯粹的导航控件,样式也保持了和单选/多选的差异。

题图来自unsplash,基于CC0协议。

上一篇 2023年01月03 02:38
下一篇 2022年12月22 09:39

相关推荐

  • 歌剧之王是谁,tm歌剧王

    From/罗博报告2012.9月号正刊文/玉君歌剧之王PlacidoDomingo作为知名的“世界三大男高音”之一,普拉西多·多明戈(PlacidoDomingo)自1988年首次跟随西班牙萨苏艾拉歌

    2023年05月04 248
  • 古筝多少弦,怎么补古筝琴弦

    古筝琴弦的数量变迁秦代,筝已十分流行,到了魏晋,特别是唐代更为普遍。这时的筝有十二弦,也有十三弦的。初期以十二弦居多,到了唐朝则以十三弦为普遍。内蒙古博物馆彩绘漆古筝旧唐书音乐志:“案京房造五音准如瑟

    2023年03月02 273
  • 怎么设计封面,自己设计一本书的封面

    这是你做的PPT封面:而这是你同事做的PPT封面:封面设计应该从以下几个步骤开始:1.首先定位的类型,再来确定设计的理念和风格,比如女性方面的书籍配色排版要突出端庄时尚的感觉;比如内参杂志配色要以成稳

    2023年05月21 299
  • 学吉他多少钱,学吉他最低多少钱

    这是Sam的第1438天推送其实就乐器的价格来讲,吉他领域的价格算是很低的了。一把演奏级别的吉他4万-10万之间足以。再贵,其实就不是吉他本身的所具备的价值了,可能是有一些其他附加含义在里面了。比如一

    2023年02月25 271
  • 滑稽怎么画,鬼畜坤坤怎么画

    设计意图小丑,造型夸张可爱,动作滑稽,很受幼儿喜欢,让幼儿体验学习的乐趣,充分发挥幼儿学习的自主性。因此,设计了本次活动《滑稽的小丑》。在感知、体验小丑滑稽的同时,教育幼儿不要只关注外表的美与丑,鬼畜

    2023年06月05 292
  • GavinAmbrose《版式设计》作品简介与读书感悟

    剧集背景和1996-2003年的家庭喜剧《少女巫师萨布丽娜》不同,今天我们看到这部萨布丽娜新剧是正儿八经的恐怖剧,剧情气氛类似于《魔鬼圣婴》(Rosemary’sBaby)和《驱魔人》(TheExor

    2022年12月14 249
  • 亚洲舞王是谁,亚洲舞王最火的是谁

    提起亚洲舞王,你会想起谁?是韩国初代偶像Rain,还是台湾某艺人罗志祥,又或者是香港四大天王之一的郭富城?其实不管在圈内还是民间,这几位都有被称为亚洲舞王,但是如果只选一个,你觉得谁最实至名归呢。今天

    2023年04月25 298
  • 梨子怎么画,一步一步教你画梨子

    ▲点击上方蓝色字体,关注我们HB、2B、4B铅笔,素描纸1、首先把梨子的基本轮廓勾画出来,以及它的头顶的叶子也要画出来。2、接着画出梨子萌萌的大眼睛和嘴巴,画上睫毛会更可爱哦。3、再给梨子画出一双可爱

    2023年05月23 243
  • [德]奥斯卡·明斯特伯格著《中西艺术交流 3000 年》作品简介与读书感悟

    人文社科联合书单,由全国人文社科领域优秀出版单位联合发布,致力于推荐最优秀的人文社科图书。我们每月发出一期书单,这是我们的第79期书单。盼望热爱人文社科书籍的读者,持续关注我们。愿人文社科好书的养分,

    2022年12月17 263
  • [美]摩西奶奶《摩西奶奶绘画全集》作品简介与读书感悟

    文|飞雪迎春编辑|山月后院、简单就好在美国,有一位像神一样存在的老奶奶——摩西奶奶。她76岁开始画画,80岁在纽约举办了个人画展。94岁登上美国《时代》周刊封面,101岁时用画笔为生命画上了圆满的句号

    2022年12月24 282
  • 琵琶多少钱一把,14岁学什么乐器不晚

    琵琶作为我国古老的民族乐器,不知曾出现在多少千古名曲中,比如白居易的“千呼万唤始出来,犹抱琵琶半遮面”,王翰的“葡萄美酒夜光杯,欲饮琵琶马上催”……而如今,有一个人,将中国的琵琶介绍到了西方,让世界倾

    2023年03月17 277
  • 爱莎怎么画,艾莎怎么画

    课程名称:绘画教程-爱莎公主课程类型:简笔画人物格式:图文工具材料:白纸、勾线笔、水彩笔先画艾莎公主的发型,画出脸部线条与马尾,将面部表情画出来,往下画出身体、裙子以及双臂平铺张开的动作,给面部涂上肤

    2023年05月30 296
  • 书法怎么练,怎样练书法最有效

    书法是有方法和法度的。方法没有掌握,光练不得法、光练不悟都是不行的。书法博大精深,但也并非玄而又玄,写一手好字、写一笔规范字并不难。书法可以速成,怎样练书法最有效,书法家是不能复制的。书法强调走进去,

    2023年02月10 251
关注微信