用户界面开发技术(设计符合直觉的用户界面)
用户界面开发技术(设计符合直觉的用户界面)iOS平台上有很多这样的共性,例如在iMail列表里,向左滑动会出现删除按钮,一旦你知道了这个操作,在iOS上其他APP的列表里,你想删除其中一项时你会尝试左滑,预期中它是应该会出现一个删除按钮的,如果没有出现,用户会觉得很沮丧,出现了会觉得很爽很流畅。如果你在一个平台上做的东西不符合这个平台的共性,用户就会觉得你这个APP很奇怪。世上有数不清的各种笔,但你知道他们都可以用于书写,你会用同样的握笔方式,书写方式使用它们,这是笔的平台共性,对一个个体的认识可以延伸到同一平台上其他相似物的认识。为什么产品设计要符合用户直觉?因为这样用户用你的APP不用学习,不用思考,可以随心所欲,用起来很爽,就会去给好评,就会有更多人使用。设计符合直觉的产品,有5个特点。5.平台共性 (Platform Savvy)
(via:bang's blog)
看了WWDC2014 Session 211 – Designing Intuitive User Experiences,觉得挺不错,写下笔记。
用笔写字这个技能是我们从小就开始一直锻炼的,刚开始我们写得乱七八糟,后来慢慢变好,在这个训练过程中,书写这个技能已经变成肌肉记忆,在书写的过程中完全不用去思考,不会去注意到是怎样书写,怎样握笔,用了什么笔什么纸,一切都在无意识中完成,书写这一行为已经成为直觉。熟能生巧,这就是直觉的来源。
直觉是训练出来的,专业技能的直觉普通人是没有的,飞机几百个按钮飞行员可以不假思索找到需要的按钮,普通人不行,因为你可能有着别人没有的直觉,所以若纯粹按照你自己的想法做产品,可能会让部分用户用起来感到沮丧,你需要站在用户的角度和情景去设计,了解他们知道什么,不知道什么,直觉是什么。(按国内的说法就是让自己进入小白模式)
为什么产品设计要符合用户直觉?因为这样用户用你的APP不用学习,不用思考,可以随心所欲,用起来很爽,就会去给好评,就会有更多人使用。
设计符合直觉的产品,有5个特点。
5.平台共性 (Platform Savvy)
世上有数不清的各种笔,但你知道他们都可以用于书写,你会用同样的握笔方式,书写方式使用它们,这是笔的平台共性,对一个个体的认识可以延伸到同一平台上其他相似物的认识。
iOS平台上有很多这样的共性,例如在iMail列表里,向左滑动会出现删除按钮,一旦你知道了这个操作,在iOS上其他APP的列表里,你想删除其中一项时你会尝试左滑,预期中它是应该会出现一个删除按钮的,如果没有出现,用户会觉得很沮丧,出现了会觉得很爽很流畅。如果你在一个平台上做的东西不符合这个平台的共性,用户就会觉得你这个APP很奇怪。
建议用iOS平台约定成俗的东西,例如返回按钮位置,按钮点击位置,图标大小,图片缩放等等,这样用户没有学习成本。如果你想打破这些规则,做标新立异的APP,那你需要通过各种途径告诉用户。
4.易于导航 (Easy to Navigate)
(1)告诉你现在你处于APP的什么位置。Tab Bar标签/Navigation Bar标题都是干这事儿的。
(2)告诉你还能去哪里。用tab bar的优势是把你能去的地方全列出来了。
(3)告诉你去到那个地方会有什么东西。把一堆功能分成清晰的几类,让人能从分类中就大概知道那里有什么。
逐级前进
在用户真正需要一个功能之前,不要把这个功能展示给他。可以通过加深分类层次做到这点。虽然这会增加用户选择点击次数,但如果分类清晰,用户不用思索就可以找到他想要的功能,这是更好的体验。
可预期
不要轻易改变用户已经习惯的东西,有重新学习的成本。例如根据使用频率把导航列表的各选项调上调下,用户体验是很糟糕的。
让选择中状态清晰可分辨
Tab Bar的选中状态应该做成什么样?若是仅仅换个颜色,并不够突出选中状态,iOS的做法是把图标填充满,再换显眼的颜色。做选中状态的原则是,要让图标不换颜色时,用户都能隐约分辨这是选中状态。
连贯体验
iOS里相册点击一张图片,图片是从原来的位置放大的,让你确认点击的就是那张照片,返回也是,从大图缩回小图,让你知道这张图片在你缩略图列表的位置。若点击图片然后从右滑进一个大图则没有这种连贯的体验。
提供暗示
一些不易发现的交互方式要提供足够的提示。举例一个星辰APP,点击星辰本身不会去到详情页,要点旁边的(i)按钮才会,但点击星辰会让i按钮闪一下,表示可以点击这里。
少即是多
提供更少的选择,会让更多的用户去选择。若选择多了,用户不知怎么选,反而不选了。在苹果和梨中选一个很容易,在很多种水果中选一个很难。
抽屉式侧滑导航问题
优点:
(1)不占用屏幕空间,省去了Tab Bar的空间
(1)导航栏位置大,占满屏幕,甚至可以上下滑动
缺点:
(1)无法解决上述“我在哪里”“我还能去哪里”这两个问题。导航被隐藏起来,不像Tab Bar一直在那里,让用户知道自己在哪里,还能去哪里。
(2)切换点击次数多。Tab Bar只需要一次点击,瞬间去到目的地。侧滑需要点击汉堡图标,等动画做完,再选择目的地,再等动画做完,效率低。
(3)要占用Navigation Bar一个按钮的位置。放左边会跟返回按钮冲突,一般解决方法是返回到最上级才出现这个导航图标,这是不好的体验。若导航按钮放右边,右边就不能放一些iOS上习惯放的按钮,如编辑,分享等,导致用户体验很怪。
(4)侧滑导航把很多不常用的东西都放进去了,显得很杂乱。
3.清晰 (Clear)
语言
No big words 不要用晦涩的词,用所有人熟知的词。
Avoid jargon 不要用专业术语,除非你的用户群是专业人士。
Be descriptive 用语义清晰的词
Be succinct 简洁
Avoid truncation 避免句子太长被系统用省略号截断
Make text legible 选易读的字体,不要用乱七八糟的花哨字体。
图标
用大家都熟知含义的图标,例如信息图标和搜索图标。
用跟现实中大家熟知的物品形状相近的图标,如闹钟图标。另外别以为软盘是大家熟知的物品。
不要用一个图标代表不同意思,例如用搜索图标代表检查。
图标是不能被用户学习的。
图标是很小的,避免用复杂的图形,不然缩小了不易辨识。
动画
有时用动画可以清晰引导用户。如iOS相机的聚焦,首先聚焦框从大到小缩放到聚焦位置,让你注意力集中到这个聚焦框上,然后框闪了两下,提示你聚焦已完成,可以拍照了。
另一个例子是锁屏输入密码,若输错密码,四个密码原点会跳一下,可以让用户很直观地知道密码错了,而不用去读文字。
2.简单 (Simple)
不要做一个复杂的APP,繁杂的功能会把真正用户需要的功能掩盖隐藏在深处(不适用于中国)。不要给用户一些他们不需要的功能(或者是80%的用户不需要),过多的功能让用户分心,难以找到他们想要的东西。
1.专注 (Focused)
一个APP应该专注做一到两件事。小而美,打磨精品,为用户提供最好的解决方案,才能在120万APP中脱颖而出。
SOURCE:IPADOWN