在交互稿中,应重视「键盘类型」的标注

在交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。

为什么需要标注键盘类型?


大家都知道,一款虚拟键盘(比如iOS系统键盘)有很多种布局类型。在交互稿中,很多人是不标注键盘类型的,我原先也是不标注的。但近来发现键盘对于用户操作的影响其实很大,不标注键盘类型是不对的。一方面,如果键盘调用不当,用户则需要手动切换输入法,这是影响操作效率的(如上图);另一方面,对于多输入框的表单来说,输入框之间的切换、提交表单,这些操作其实都可以通过键盘实现(如上图左),而无需用户手动点击原界面中的元素。最后还有比较重要的一点是:如果设计师不标注,开发同学一般都写成默认键盘,而不会根据场景写成不同类型的键盘。
那么,到底有哪几种键盘?每种键盘有哪些地方是可以控制的呢?

iOS原生应用中的键盘



iOS 中提供了多达12种键盘可以选择(如上图,不讨论中文键盘,中文键盘只有一种布局)。我们可以根据用户当前的需要,提供不同类型键盘。在交互稿中,我们可以将相应的键盘类型名称(英文名)写在界面下方,或者直接使用相应的键盘截图放在交互稿中。对于同一个界面中有不同类型输入框的情况,需要标注出键盘切换的说明。虽然12种键盘类型已经很多,但它们仍然不能覆盖所有场景,这时我们可以进行自定义键盘。当然,开发成本你懂的,开发同学的表情你也懂的。

除了选用不同类型的键盘,部分键盘中还有多种“按键命令”(上图中的蓝色按钮)可以选择,如“完成”、“搜索”、”发送”等。iOS中提供了11种类型的命令,你可以将所需要的命令用文字描述的形式标注在交互稿中,也可以使用截图的方式。值得注意的是,iOS的键盘具有上一项和下一项的功能( <  > ,如上图左上方),这对于表单的交互设计起到了非常重要的作用,一定要好好利用。

Android原生应用中的键盘


如上图所示,Android中提供了9种类型的键盘(同样不讨论中文键盘)。与iOS的键盘调用类似,需要注意多输入框场景下的键盘类型切换。Android场景中的键盘也可以自定义,自定义的成本同样是比较高的,值得斟酌。

同iOS一样,Android的部分键盘也具有多种“按键命令”可以选择:回车、搜索、前往、下一项、完成、发送(未找到案例)。在交互稿中,可以标注出想要的“按键命令”类型。大家应该有注意到,Android中多了一个“下一项”的按键命令,用来替代iOS键盘左上方的“ < >”按键。在多输入框表单的场景下,切记标注出键盘的“按键命令”何时变为“下一项”,何时变为“完成”。

H5下的键盘


在H5环境中,键盘的类型仍然可以自由选择。“按键命令”的类型大部分可以选择,但“完成”和“下一项”不可以选择。也就是说,程序可以控制调出的是“数字键盘”还是“字母键盘”或其他任意类型的键盘。但在“按键命令”类型调用方面,只能调用“搜索”、“回车”、“前往”,而不能调用“下一项”和“完成”。所以在标注交互稿时,需要注意这一点。这个缺陷对于iOS环境中的H5影响并不是太大,因为iOS的键盘具有“< >”和“完成”按钮。但对于Android环境中H5的影响则很大,因为当用户填写完一个输入框想要跳转下一个输入框时,只能手动点击。如果用户下意识地点击“前往”按钮,则可能会出现表单警报(如上图所示)。
这里有一个例外情况,就是当输入框的字符类型是“数字”时,“按键命令”会自动变成“下一项”。Android环境中的这些问题对于用户成本本身就很高的“表单填写”交互来说,其实是很要命的,也是让人无能为力。
PS:上图中键盘上方的白色工具栏(上一项、下一项……)是浏览器提供的插件,不属于系统键盘。

总结

交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。合理地切换“键盘类型”和“按键命令类型”可以提高用户填写表单的效率,同时也可以让表单填写过程更加顺畅,降低页面的流失率,我相信所有人都知道这点很重要。
交互稿中,除了忽略“键盘的标注”,我们还会忽略很多其他细节的标注,比如过场、加载、热区范围等。对于开发同学来说,不标注一般就意味着不用考虑,指定默认值即可。但对于整个产品来说,每一个细节的忽略都会导致相应的体验问题。所以,如果你还没有和开发同学形成非常良好的默契,还是尽量标注出这些细节吧。
对了,上文中提到的技术上的“可以”和“不可以”都是基于一般的开发投入而言啦。因为对开发同学来说:没有实现不了的功能,只有给不了的时间。
最后抛一个问题: 为什么键盘右下角的“命令按键”有时是“完成”,有时是“前往”?到底应该选哪个呢?欢迎留言讨论……
[整理:CALONYE]

回答这3个问题,完善你的交互设计


大多数时候,交互的工作是和内容设计一起完成的,但是为了让你能够了解这两者之间的差别,我特地把材料分成两个阶段,也可以让自己梳理一下细节。

交互是什么?

“我躺在沙滩上,感觉到细碎的沙子在后背陷入;我踩在小溪里,感觉到脚底的乱石和流过脚面的溪水。我和沙子,我和溪水,产生了交互。”

在讲交互的过程中,我必须排除体验(感觉)的干扰。这是极容易被混淆的两个概念。交互仅止于人与产品之间的互动,它会给与用户“感觉”的结果,但他们不是一回事。
交互是人的行为与事物之间产生互动联系的过程。
用动态表达逻辑关系:
人类行为不是定格画面,而是连锁反应。
动态视频比静止的画面传达更大的信息量并且被记住。你可能还记得《哈利波特》中的“预言家日报”的经典画面,你看到一段完整的视频:罪犯“小天狼星”被警察“傲罗”抓住,并且愤怒地嘶吼。

如果是静态的画面,我们恐怕不能确定画面中人是先吼叫被抓住,还是先被抓住再吼叫:
“疯狂罪犯终于落网!”
“魔法界警察暴力执法!”
——这两者之间的差别可大了。

这就是动态画面中连贯地逻辑线,先后顺序、因果关系。
如果内容设计就像一帧帧现场照片,那么交互就是用户触发的蝴蝶效应。你知道做了这个选择,会导致不同的结果。或者按下这个按钮,后面会发生什么。
塑造立体空间感:
Hi-Fi毁一生,如果你不巧是个高保真音乐的爱好者,并且运气糟糕还和我一样是个古典乐的爱好者,那么你应该有这样的经验:“优秀的耳机给你音乐厅一般身临其境的感受”。
这个形容有它背后的原因:如果你身处于一个交响乐团或者摇滚乐队中间,当他们开始演奏的时候,你会感觉到小提琴就在你右手边,或者那把电吉他就在你前方5米处。越优秀的耳机,越会加深这种感觉,这就是为什么你会觉得“身临其境”。
声音恐怕是传达信息效率最低的一种方法,但是即便如此,耳机也能够给你传达如此巨量的信息,最大程度激发人脑的空间想象力。
那么,这件事情和我们的设计有什么关系?

“大页面的设计是焦点的设计,小页面的设计是空间的设计”

如果我们在web页上做设计,让用户快速找到内容是设计的重点。但是在小页面,移动设备的设计中,我却认为空间感才是设计的重点。比如小户型的设计重点是 “让你觉得大”。
以Apple  Watch为例(图5-1)。

【图5-1    Apple  Watch】

Apple  Watch继承了iphone的设计基调,它的交互设计有个显著的优点,这在表面的小屏幕上体现的尤其明显(我认为那不能简单地概括为“扁平化”)。
Apple  Watch的初始页面是表盘,按home键表盘缩小到home页面的中间,成为“手表小图标”。再次按下home键,则图标放大成表盘(图5-2),这会给用户透视的错觉。

【图5-2    Apple  Watch的初始页与home页】
背景(home页)到前景(表盘)的过渡给我们纵深感,背景没有边界就好像一个无限扩展的空间,可以在里面放上任何东西。

“扁平化其实为了让你觉得地方足够大。你信吗?反正我信。”——“李白”

怎么做交互?

交互为人类行为而设计,人类的行为依赖经验和本能。
经验
经验是我们记忆中曾经发生过的事情,经验告诉我们能做什么或者不能做什么。
比如公寓楼的门牌号,看到1003,我不用太费心就知道找个位置是10楼3号房间。这是社会通用的沟通语言。
比如给我一个乐谱,我能快速地区分高低音谱号,或者升降音符。这是行业通用的沟通语言。
我们喜欢遵循经验办事,因为那代表了安全和可控。一个成熟的行业为经验设计了规则,这些规则培养了用户习惯,如果没有足够的理由,我们不会轻易打破它们:
平台官方制定的规则

“使用APP,你不需要别人告知左箭头是什么意思。”

平台(ios和Android)的官方设计规范事无巨细地规定了所有的细节,并且培养了用户的使用习惯以及前端开发的工作习惯。遵守官方设计规范,你和开发的沟通会非常轻松,以及不至于在用户面前“出错”
规则除了告诉你用户习惯之外,还有技术可行性。
我要向你强调规则的重要性,它们并不是限制你发挥的枷锁,而是你挥洒创意的舞台。

你应该熟读Android和ios的官方设计规范、人机交互指南文档,只要遵循这些规范,用户不会因此犯错。
Ps:规范可以帮我们“不出错”,但要达成“绝妙的设计”还需更多创造力。

本能
我们在规则的基础上,为本能设计交互。想象一下:

突然!你被人打晕了!
醒来的时候你发现自己到了一个陌生的地方。
现在你在想啥?——
“我在哪?”
“我是谁?”
“我该怎么办?”

我们通过回答这三个问题,来完成接下来的交互工作:
“我在哪?”
如果用户在使用产品的过程中迷失了自己,就会觉得很挫败。所以,让用户时刻自己在哪里,并且知道自己从哪来,到哪去。
“我是谁?”
用户认知自己的身份或者状态,并且采取相应的行动,人物的身份和状态是探索用户行为的重要依据。
“我该怎么办?”
接下来会发生什么,用户会采取什么样的行动。我们应该提前预期到用户会遭遇哪些事情并作出什么样的反应。

我在哪

为了让用户定位自己,我们需要为他们设计导航系统。
表面上用户看到的仅仅是一个页面(图5-3):

【图5-3    眼睛看到的页面】

用户应该可以感觉到的页面位置(图5-4):

【图5-4    用户能够感觉到的页面位置】

用户想知道的路线(图5-5):
image005

【图5-5    用户想知道的路线】

用户在这个页面停留时,知道自己是从哪个页面过来的,也知道应该如何回去。我们通过各种方式(菜单、返回键、标题等信息)让用户知道自己可以到达哪些页面,完成哪些任务——这就是导航系统的意义。
地图和道路,共同构成导航系统。
地图告诉我们每个物体的位置:我在这里,它在那里
道路告诉我们物体之间如何连接:我要从这里,去那里
我们在用户潜意识中,植入产品导航系统。这就要先完成地图和道路规划。

“我在18层1806,我要去3层0303。出门左拐坐电梯,出了电梯再右拐“

地图——页面方位

我们需要一个足够简单便于记忆的地图。
如果你有一栋两层小楼,面朝大海,春暖花开。第一层是客厅和厨房,第二层是卧室和书房。你从一层爬楼梯上到二楼,不会因此迷路。
如果你住在公寓,高层楼的格局都是差不多的,18楼和28楼的楼梯间都在同一个位置,唯一能让你分辨自己在第几层的方法就是简单粗暴的门牌号。
所以地图设计应该做到:层级扁平排列规则统一。
检查页面关系并排列(图5-6)

【图5-6    页面关系】

把所有页面按模块放在平面上:
流程的一系列页面通常是从左到右排列,并列内容的页面从上往下,同样内容的页面从前往后。还有一些与其他都没有关联的页面放在单独的位置。
比如“预约会议”与“临时会议”是并列关系;记录的“列表”与“日程”是用不同方式展示了一样的内容,属于同样内容的页面等。

道路——菜单

菜单是到达页面的主干道,菜单设置的原则,是符合逻辑,有时候符合逻辑,意味着不太方便快捷。如果这两者有冲突,我们取逻辑,舍快捷。
菜单是产品的核心安全区,如果用户迷路,他们就会返回菜单页,如果用户不知道该做什么,也会返回菜单页。而一条符合逻辑的道路,比如原路返回,远比快捷的道路来得更加安全。
以下是移动端APP常见的几个菜单结构:
下部菜单:
操作以点击为主,页面切换。大部分的APP使用的菜单布局
淘宝APP的菜单结构就是这种形式(图5-7)。

【图5-7   淘宝APP的下部菜单】
上部菜单:
操作以划动为主,页面平移。Airbnb的Android版本菜单就是这样设计的(图5-8)。
image008

【图5-8    Airbnb(Android)的上部菜单】

左侧菜单:
适用于功能单一但是比较复杂的产品,左侧栏不影响主页面的操作,并且扩展性好,可以随时添加快捷入口。
只使用左侧菜单的形式,通常用在早期还不确定的产品形态中,成熟的产品通常都会改为上下部菜单的导航形式。
另外像UBER这种功能单一,主界面(地图)承载较多信息的产品,使用上下导航都太占用空间,所以也使用了左侧菜单(图5-9)。

【图5-9    UBER的左侧菜单】

左侧菜单还要注意空间的前后关系。
空间位置在前面的侧边栏好像在说:“我随时都会被用到!”(图5-9)。
空间位置在后面的侧边栏好像在说:“我先睡会,有事叫我…”,后面的侧边栏比较少见,用于比较复杂的产品。图5-10中,QQ的主菜单是下部菜单,左侧菜单作为辅助菜单,使用了暗色,与主页面的浅色对比,会让用户有种左侧菜单在后面的感觉。

【图5-10    QQ的左侧菜单】

右侧菜单:
左重右轻,因此右侧菜单通常适用于内容和功能都比较复杂的产品,常作为次要菜单或者辅助菜单,很少作为独立菜单使用(图5-11)。

【图5-11   Airbnb(iOS)的右侧的辅助菜单】

融合菜单:
复杂产品会融合多个菜单,注意主次分明,并且逻辑关系清晰。
这是比较常见的菜单形式,QQ就使用了双菜单架构。主页面下部菜单是三个主要内容模块,左侧放置扩展功能菜单(图5-12)。

【图5-12   QQ的主菜单和左侧菜单】

增加快捷操作:增加一些快捷入口,让结构更加扁平。距离菜单越远的页面,重要性也就越小。
比如通常我们把反馈建议整理到设置中心中,但是在新产品刚上线的时候,我希望能够多收集一些用户反馈,这个页面就变得很重要。于是我们在菜单增加了“反馈建议”的快捷入口(图5-13)。

【图5-13   菜单中的“反馈建议”】

离菜单越近的页面地位越高。注意微信的朋友圈,它离菜单很远,无声地说着:“就算朋友圈再火热,微信也还是一个聊天软件。”
导航系统让用户知道他在哪个位置,知道如何去另外一个陌生的位置,并且能够原路返回。设计完导航系统之后,我们得让用户知道它的存在。

空间暗示——页面动态

把导航系统告知用户,需要各种空间暗示。我之前提到Apple Watch的空间设计就是其中一种。在APP中,空间感主要来自页面的进入与退出。
按照左重右轻(左侧的内容重要于右侧的内容)的原理,我把第二张页面放在右边,然后根据导航关系制作页面动态。移动方式可以是覆盖移动,或者平移。
总结一下页面动态的种类:
覆盖移入(图5-14)

【图5-14   下一页从右往左覆盖进入】

案例中,“会议记录”是首页,点击记录中的某项可以查看“会议日志”页面,我们让“会议日志”从右侧移入屏幕,盖住了“会议记录”。用户会感觉“会议记录”还在原地。
覆盖移动用户觉得这两个页面是叠加在一起的(图5-15)。

【图5-15   前后关系的页面】

覆盖移出
覆盖移出,是上一张页面(比如“会议记录”)往左移出了屏幕,“会议日志”在原地(图5-16)。

【图5-16   上一页从右往左覆盖移出】

但是图5-16这个方式不太适合我们的案例,因为这样显得“会议记录”不太重要,“它”已经移出了屏幕。
左右平移
平移是下一页平移进入,上一页平移离开。这样的页面关系比较紧密,页面是平等并且高度连贯的。可以用在任务流中,也可以用在相同内容的页面移动中。比如从文章的上一篇平移到下一篇,或者上一张图片平移到下一张图片(图5-17)。

【图5-17   下一页平移进入】

上下平移
上下距离比左右距离要远的多,也不确定的多,上下跳转页面会给用户失去x轴的错觉,所以上下平移被使用得比较少,即便有,也让用户感觉是个长页面,而不是跳转了新的页面。
知乎APP的答案翻页就采取了这样的方式。看完一个答案之后,往上拉动可以继续阅读下一个答案,当然前提是知乎有大量优质答案,并且知乎的用户也有足够的耐心看完这一个答案之后继续往下(图5-18)。

【图5-18   知乎的上下平移】

额外的
有些页面和其他页面没有明确的因果关系,就好像翻书翻到一半,突然来了个电话,我接完电话接着看书。它和我正在进行的事情没什么太大的关系。所以它是凭空出现的,而不是书页中的其中一张。它的出现和退出需要特殊处理。
模态视图,常见的是提示框。它和我正在进行的任务有巨大关联,它不得不出现,又想快点消失。它们有平台默认的样式和退出进入的方法,我们也可以额外为它设计(图5-19)。

【图5-19   特别设计的弹窗动效】

我是谁

身份还是状态?

我们常在不同产品上看到不同的身份标签,比如普通用户和VIP用户啦,乘客和司机啦,女人和男人啦……
大家都很喜欢树立敌人,这样不太好。你不能做一些不符合身份的事情,当你是一个老师的时候,你成为了一个教导者或者回答问题的人,但是有些问题你也很想请教别人。这个时候就一切就变得复杂起来:“毕竟是个有身份的人,万一问了个蠢问题怎么办,还是继续高深莫测下去吧。”
我被拉进了不少交流群里,如果是以被访问者的身份邀请进去的,一定三缄其口,讲话慎之又慎,能不说就不说;如果我以菜鸟的身份进了一个大牛的群,就会满世界的喊“老师”;如果有人称呼我女神,我就不得不告诉他“我得去洗澡了”。你看,我自然而然地做着符合我身份的事情。这些都是别人眼中的我。
而状态就不同了,我可以处于回答问题的状态,同时也可以处于问问题的状态,多么轻松自如。这是真实的我。
如果限定一批用户是老师,另外一批用户是学生。那么我们就放弃了他们各自另外一半的时间和精力,另外一半的活力,另外一半的内容提供。因为某位“老师”不可能一直持续地在“教学”,即便他以此为工作。而如果我靠回答问题赚钱,那么我也同样愿意为别人的回答花钱。
除非能得到足够数量匹配的供应者和消费者,否则就让用户上一秒收入,下一秒就卖出吧!

身份标签

当用户年龄平均在20岁或者更小的时候,这些未走入社会的年轻人急需认可,这种认可在现实中很难得到,身份头衔是有用的激励方法。
对于年龄更长的用户来说就情况就相反了。我花钱买电影看理所当然,可是为什么好像是买了个VIP的头衔呢。天哪,连上个视频网站都在攀比,还能不能好好聊天了。如果一定要这样做,收集成就的方法比身份头衔有用多了。

同时拥有不同的状态

我最好的学习状态就是立刻把学到的东西分享出去。如果你是一个优秀的读者,或许应该尝试开始写点什么?(我一直建议阅读软件增加写作功能)
在产品设计中,时刻把这种逻辑推送给用户,就像一颗思想的种子,它会自己成长和蔓延。
这种方式用在状态可以灵活转变的用户群中更有效,比如零时的租客可以成为零时的房东,或者乘客有时候可以成为司机。
这并不是通用的方法,如果用户之间的关系很少模糊地带,或者有极多的信息不能共用等,明确地区分身份也是可行方案,请视具体的产品情况考虑。比如出租车司机与乘客,双方身份与状态不能灵活转换,互相有较多不重叠的信息。

我做什么

为人设计就要理解人的行为模式。结果可控的情况下,完成任务的唯一条件,就是不要犯错。因此,我们尽量确保用户不会犯错,这就是“为错误设计”这条规则的由来。
另外,人类会收到情绪的影响,这是不可避免要被考虑到的。我将为你介绍一下“为人为错误设计”与“为情绪设计”的交互理念。

为人为错误设计

灾难是一系列错误的连锁反应——《重返危机现场》
人类不是机器,行为不可控,所以只要涉及人类活动,我们甚至都无法真正意义上地杜绝错误的发生,只能尽力把它发生的概率减少。
为错误设计的步骤:
习惯
违背习惯就像违背自然规律或者用户经验,这会及容易导致用户犯错。所以在设计先后顺序、左右位置的时候不必要特立独行(图5-20)。

【图5-20   返回键违背习惯】

提示
重要紧急的行为、一旦开始无法反悔、或者如果犯错就会遭遇巨大损失的行为,需要向用户预警,甚至可以强势一点。这都比让我犯错更好(图5-21)。
“这是你的选择吗?你要不要再确认一下?”

【图5-21   预警】

反馈
我需要知道那件事情是不是成功了,否则我就不知道哪里出错了。
“为什么没有反应?是因为我没有按到按钮吗?”(图5-22)
“我按到按钮了,为什么没有反应?是我的网络有问题吗?”

【图5-22   反馈】

当我们有所举动的时候,周围的事物都会因此而被影响,并且有所反应。如果用户的每一个操作行为都能得到直接的反馈,对用户更加友好。
反悔
最后我依然犯了错误,请让我有机会反悔。现在大多数的文字输入都有自动存储的功能了啦,如果不小心意外关闭了页面也不用担心重来一遍。

为情绪设计

团队由人构成,产品为人而作。人,必然存在情绪,它非常容易被调动与刺激。因此,为人的设计,必然要顾及人的情绪,纯以理性做决策,是最不理智的做法。
人们容易记住那些与情感密切相关的事物,或者任何加剧情绪的事物。我们可以利用情感化元素让用户与产品产生互动,为产品赋予人格 。
成就感
建立用户克服困难,解决问题的成就感
经历
似曾相识的的难忘的回忆可以给用户“会心一击”
放松
放松状态我们能更好地处理信息,生成记忆。让用户进入积极正面的状态、轻松完成操作,享受过程。
选择恐惧症
选择恐惧症是担心选择的结果不是最好的,给用户较少的选择意味着用户可以轻松抉择、完成任务

特殊情况的处理

第一次与不是第一次
有些行为不需要反复提醒,这样会让人产生“你觉得我智商低”的错觉。所以很多产品只在用户第一次使用的时候做引导设计(图5-23)。

【图5-23   第一次引导】

“哦!讨厌。”
网络突然断了,手机突然没电了。我们知道你不愿意它发生,但是它总会发生的。为了应对这些突发情况,我们在正常流程之外还要为它们设计流程或页面。

手指行为(移动产品)

人类与硬件接触,通过行为与产品建立沟通交互的桥梁,有一门学科专门研究这些——“人体工程学”。
以下以移动产品为例。
对于手机用户来说,行为主要包含手指的活动,其次是眼睛接受信息,特定情况下用到嘴巴和耳朵。我猜暂时很少用到舌头和鼻子什么的。

手指与屏幕的关系

手指是最为高效、灵活并且使用最为频繁的器官。移动产品大部分都是手持设备,你会看到所有人都用手抓着手机戳来戳去,所以我们当然应该先说说手指的事情。
单手点击舒适度(图5-24):

【图5-24   单手操作】

【图5-25   重要按钮放在右边】

我们默认右手操作手机的人更多,当然这个观点至今都有争议,因为现在移动设备的操作都非常简单,即便是不太好使的左手一样可以轻松使用。
假设你使用右手,图中红色部分是更容易点击的区域,其他区域次之。顶部是最难点击的地方。
为了让左右手都可以轻松操作,很多产品使用了居中的长按钮。

【图5-26   居中的按钮双手都可以点】

双手点击舒适度(图5-27):
image027

【图5-27   双手操作】

玩游戏时用户通常都是双手操作,游戏界面的内容设计因此有很大不同。
手指动作
用户常用单机和滑动操作,这两种操作可以满足大部分交互行为,双指拉伸抓取的操作也很常见(图5-28)。我们没有必要使用冷门的操作方式,如果使用了少见的手势,记得在用户第一次使用的时候引导他。

【图5-28   手势】

手指操作区域
用手指戳的时候如果戳不到地方实在是太让人糟心了,由于手指与鼠标不同,灵活但是不够精确,因此移动产品规定了最小操作范围。比如iOS最小操作区是44dp,Android则是48dp(请查阅官方人机交互文档)。

眼睛与屏幕的关系

使用移动产品时,用户经常处于噪杂的环境或者活动的状态。比如一边走路坐车一边看手机。这对眼睛的压力很大,同时也要求产品设计中为眼睛考虑更多。
下图是眼动热力的示意图,用户习惯于从左到右的阅读方式,左上是关注的焦点。我们在设计产品时毫无疑问会把最重要的内容放置在左上角(图5-29)。

【图5-29   眼动的焦点】

用户在运动过程中实际看到的页面,很大一部分是糊的。所以视觉焦点应该清晰可见,这样用户可以快速捕捉到我们设计的“焦点”,对其他信息没什么耐心(图5-30)。

【图5-30   清晰的焦点】

必须承认,大多数情况下,交互设计是个繁琐的活,既要关注人类的活动,还要照顾技术实现的逻辑。在大型团队中,这个工作会由交互设计师来完成。在我们的团队中,产品、设计、研发拆分了这个任务。
[整理:CALONYE]

Axure RP 8.0正式版下载地址 安装和汉化说明

2016年4月Axure公司发布了大家期待已久的Axure RP 8.0正式版。Axure RP是产品经理必备的原型制作工具,因为很多同学是新手,在这里整理一下axure8.0的下载、安装和汉化流程,希望能够帮到大家。
u231
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。并且支持Windows和苹果Mac双系统。

Axure RP 8.0安装环境要求:
WINDOWS版环境要求:
Windows XP, 2003 Server, Vista, 7, 8, or 10
2 GB RAM (4 GB recommended)
1 GHz Processor
5 GB disk space
For Word documentation, Microsoft Office Word 2000,
XP, 2003, 2007, 2010. or 2013
For prototypes, IE/Edge, Firefox, Safari, or Chrome
MAC版环境要求:
Mac computer with Intel processor
Mac OS X 10.6+
2 GB Memory (4 GB recommended)
5 GB disk space
For Word documentation, Microsoft Office Word 2004
(with compatibility pack), Word 2008, or Word 2011
For prototypes, Firefox, Safari, or Chrome

首先附上官方提供的安装程序下载地址:

Axure RP 8.0正式版WINDOWS版下载地址:下载地址1
Axure RP 8.0正式版MAC版下载地址:下载地址1

Axure软件安装程序中国镜像地址地址:

中文镜像稍后放出>>

中文汉化语言包下载地址:

Axure RP 8.0 中文汉化语言包下载地址:点击下载>>

第二步:安装Axure RP 8.0

注意:xp系统需要升级到sp3才可以安装。(我的电脑右键属性上查看是不是已经升级为sp3)
安装axure时会,安装程序会自动监测电脑上是不是安装了framework4,如果没安装会自动安装。然后才会开始安装axure.

第三步:汉化Axure RP 8.0

★ Axure8软件汉化方法(求求大家仔细阅读下面的使用方法): 
首先退出正在运行中的 Axure (如果您正在使用).
汉化包.rar 文件解压, 得到 lang 文件夹, 然后将其复制到 Axure 安装目录.
■ 如果您使用的为 Windows版:
① 将 lang 文件夹复制到axure安装目录下,安装后的目录结构类似

c://Program Files/Axure/Axure RP 8/lang/default(32位系统)
c://Program Files (x86)/Axure\Axure RP 8/lang/default(64位系统)

② 启动 Axure 即可看到简体中文界面, 说明已成功汉化,如果仍为英文则一定是汉化文件位置不正确.
■ 如果您使用的为 MAC 版:
① 在 应用程序 文件夹里找到Axure RP 8.app程序,然后右键选择“显示包内容”,然后依次打开Contents/Resources文件夹;
② 将 lang 文件夹复制到这个目录下即可;
③ 启动 Axure 即可看到简体中文界面, 说明已成功汉化,如果仍为英文则一定是汉化文件位置不正确.

第四步:打开软件输入注册码,开始使用吧!

Axure RP 8.0可以免费试用30天,超过试用期需要有授权码才能继续使用。
点击购买正版授权>>
[整理:CALONYE]

UX Design.如何从设计模式中学习交互设计

分享一些设计模式,在交互设计学习过程中,这些设计模式有助于对产品结构的理解,比较成熟成熟的框架通常使用了多种设计模式,而且是可以复用的,让你的项目进程大大缩短,提高效率。
如果你熟悉这些设计模式,毫无疑问,你将迅速掌握产品框架的结构,学习设计模式,无疑是给了你剖析产品结构和思路的一把利器。
  Web Design:
  首页设计

0-wx_fmt=jpeg
  搜索设计模式
0-wx_fmt=jpeg (1)
  图片展示页面设计
0-wx_fmt=jpeg (2)
  消息页面设计
0-wx_fmt=jpeg (3)
  数据分析页面设计
0-wx_fmt=jpeg (4)
  模态视图设计模式
0-wx_fmt=jpeg (5)
  关于页面设计
0-wx_fmt=jpeg (6)
  设置页面设计
0-wx_fmt=jpeg (7)
  APP Design
  导航模式
主要导航模式和次要导航模式。
0-wx_fmt=png
0-wx_fmt=png
  表单
登陆表单、注册表单、核对表单、计算表单、搜索表单、多步骤表单、长表单。
0-wx_fmt=png (1)
  表格和列表
只显示最重要的信息。
0-wx_fmt=png (2)
  搜索、分类和过滤
让这些功能易于使用
0-wx_fmt=png
  图表
借鉴基本图表的经典设计理念。
0-wx_fmt=png (1)
  视觉吸引
吸引用户并促使其发现产品功能。
0-wx_fmt=png (2)
  反馈与功能可见性
向用户提供适当、清晰且及时的反馈
0-wx_fmt=png (4)
0-wx_fmt=png (1)
  其他APP设计模式
0-wx_fmt=jpeg
0-wx_fmt=jpeg (9)
0-wx_fmt=jpeg (10)
0-wx_fmt=jpeg (1)
0-wx_fmt=jpeg (2)
0-wx_fmt=jpeg (3)
  当你的设计没有头绪的时候,看看这些,可能会给你一些灵感~
[整理:CALONYE]

用户界面、视觉设计、用户体验、交互设计 之间的关系是什么?

UI-ID

前言:小编对文中部分一些词汇及语句和字体加粗进行了个人理解上的修编。

总会在一些网络上看到有人纠结“UI”这个词的定义,有说是美工的,有说是交互的,有说是画icon的,还有说各种结合的。现在我来从英文的角度唠一下八一八这个词。。。
*在下初来乍到,码字纯靠YY,误人子弟概不负责。另外这个行业包括国外也是发展初期,有些概念并未定型定性成系统。如有胡言乱语,敬请拍砖!
UI英文即是:User Interface -直译过来就是用户界面。不得不说首先这不是一个职业,而是一个专业名词
UI Design:用户界面设计,这是一个行业,也不是一个职业。
吹毛求疵的说,UI Designer,用户界面设计,这也不是“一个”职业,而是“一种”职业。当然这个design,或者designer我们平时用的时候隐藏掉也是妥妥塔!没有问题塔!总而言之呢,UI就是一个行业的总称,就像“金融”是一样事儿的!原谅我啰嗦一大堆废言。。。

(小编:“用户界面(UI)”是各种界面设计的“统称”,例如说:意大利厨师、糕点师、湘菜厨师等都可以用“厨师”这个统称来概括。)

不过呢,引文过后问题还是来了,既然“UI”不是职业,那么什么才是职业?什么才是HR们应该发布,小伙伴们应该搜索的岗位呢?

(小编:
1、由于职业性质的起源历史较短,对于那些来源悠久的职业来说,职业的特性相对更加明显,职业的范围话费的更佳明显一些,而国内的起步相对于国外来说更慢一些,故,在国内的一些公司,别说HR发布的职业招聘信息,就连一些项目高官对HR需求的这些职业类型也说的相对不是很清晰的,那么HR只能依赖自己的经验和技能来发布对该职业的需求了,从而也就导致了国内对这些职业的定型相对模糊不清。)

QQ截图20150908171446

No.1

我们所谓的视觉设计师,人家说美工我们会怒摔的“GUI(D)”。
它的英文是:Graphic User Interface Design(er),直译视觉(or平面)用户界面设计(师)。

(小编:1、从学术来说也可以翻译成”图形用户界面图形用户接口,这种说话相对比较“机器化”,“程序话”,也就是不够直白啦~)

这群孩纸就是用PS啥的的那群人,做效果图,画icon,巴拉巴拉的。如果你上网去搜GUI,你会发现现在很多公司要招聘GUI的时候都不这么发布岗位,只有那些分工细致的公司,招你去真的就是画界面的公司,才会说我们招的是GUI。当然,不排除还有一部分说是招GUI其实要干别人岗位的活也是醉了。。这个概念歧义不多,相信大家已经了解了。

(小编:
1、加一个“D”是指“Desgin”的缩写;而加一个“er”指“Designer”的意思;从中文字面上理解是”设计“及”设计师“的区别;例:GUI-图形用户界面;GUID-图形用户界面设计;Design-设计;Designer-设计
2、“PS”不是一个动词,是一个名词,故这里的意思是说”用Adobe Photoshop 进行工作“的那些人)

No.2

被我们叫成交互设计师,或者是用户体验设计师的“UE(D)”或者“UX(D)”。英文:User Experience (Designer),直译,用户体验设计师。一般就是用Axure等软件做交互原型的孩子,包括还有画很多各种交互图,研究用户情感之类的。具体的下一个介绍出来,再一起八。。。

(小编:
1、UED或UXD,其实是一个意思,都是指User Experience Designer;
2、注意无论是“交互设计师”或“用户体验设计师”,他们之间与“PD-  Products Design 产品设计”和“PM- Products Manager 产品经理“是不同的职业定性,关于后两者的具体职业范围和内容可“百度”一下哈;)

QQ图片20150908171741

No.3

ID-interaction design,直译交互设计。显然由于我们的这方面人才的缺失,又由于,这两个人的活很类似,也有很多共通点,同时相辅相成,所以我们通常一个设计师干了UE和ID两个人的活,SO我们常把它们的名字混在一起用也是没人可以非议的啦。(PS:国外大多数普通公司也是这样,大家不用不平哦。)
那么问题又来了,交互设计用户体验设计是怎么求同存异的,怎么你中有我我中有你的呢?
首先我们来看Interaction design 交互设计,既是交互,谁和谁交互呢?很简单,人机交互。人即是User用户机即是设备(比如手机,比如手环,比如电脑等等等等)。它涉及到的专业是人机交互专业,涉及的课程比如说人体工程学广泛运用与工业设计方面,比如飞机某设备,汽车某系统,某智能家居等等,使之适合人类使用。关键词比如:物联网,反馈,机器人性化。。。如今移动设备迅猛发展,很大层面上选择为移动端做交互设计是很多专业人士的选择了。交互设计的宗旨一般来讲就是为机器设计反馈等模式,使之能更人性化符合人类的认知方式减少学习的成本启发行为模式
同时,看一下UE,用户体验设计,国内已经有很多互联网巨头们的公司旗下开设用户体验实验室之类的。对,既然是实验室,大家就应该明白了,这是一个更加学术化的方向可用性测试,用户情感,这是他们的研究方向。苹果曾经招聘一帮人来做让拆包装盒的测试,目的就是要创造最好的用户打开包装的体验。他们不以行为出发,而是以用户的感受出发。他们涉及大量的心理学内容以及大量的测试调研。通过对样本的数据分析,创造最愉悦的用户使用体验
交互设计研究用户行为,用户体验研究用户情感感受它们可以针对同一个界面去设计,但是运用不同的研究方法,从不同的角度。ID会因为需要考虑用户使用前是否能预期,则提出需求,要求交互在点击前有一个提示,比如说卡片式选项需要预知用户,这里是可滑动的多卡片界面,这时交互则设计出卡片下方有一排小圆点,告诉用户这是左右翻页的交互模式。
总而言之呢,在我们做设计的时候,交互,用户体验,视觉往往要形成一个team,不断沟通。好吧,我差不错八完了,本来觉得还有很多话要说,写着写着就忘的差不多了,结果发现还是码了这么多字。非常诚心的感谢您能够看我写的废话看到这里,深鞠躬中。。。那么丢鲜花丢白菜丢矿泉水瓶的都来吧~
原文作者:cicizhu


我们要盖一座房子,面朝大海,春暖花开。

房前的小径如何方便进出,增加人们交往与偶遇的机会,房间的格局如何,让大人小孩都能各得其乐,窗户朝向如何布局来增加光照…这是交互设计要考虑的问题,信息架构、交互流程等等。(朋友中有个笑话,说一个交互设计师朋友去人家里做客,几句话之后,开始评价人家的灯和开关设计是否合理的问题。)
房子的外观看起来什么样,营造出什么样的视觉体验,地板和门应该是什么颜色才能显得「高端大气国际化」…这是视觉设计要考虑的问题,布局、色彩、图标等等。视觉设计师常说,这里差3个像素。
这座房子和人发生关联的部分,就是界面。User Interface,用户界面,用户接口,显然,这样的接口需要交互和视觉共同的支持。
交互设计和视觉设计是完全独立的么?不是。盖房子是个系统工程,交互和视觉都是其中一部分
交互设计师心中要有视觉映像视觉设计师头脑中要有流程和架构,越是资深的设计师,这两方面越是融合在一起,因为,原本的目的是要盖房子啊。
原文作者:马力
(小编:
1、总结来说,首先要明白各种定义的区别,(当然你得看实际情况,总不能说公司需要的就说干啥啥的,你要跟公司理论这个职业不是干啥啥啥的,那会很惨~这个得指望大环境满满的改善和进步;)其次,从一个产品或者是作品的产生到最后完成,过程是需要除了这几个职业的相互配合沟通合作之外还需要额外的一些职业来进行制作的;定义这些更多的希望明确自己的方向,才能知道如何提高自己的技能和价值,才能更清楚更明了的去沟通和输出自己的作品。所以,这是一个团队。)
原文点这里:
http://www.ui.cn/detail/43606.html
http://www.ui.cn/detail/18990.html
p.s 编辑器的功能有限,无法做一些文字颜色的变更之类的,暂时先这样吧
[整理:CALONYE]

AxureRP8.0中文汉化包 axure8中文语言包下载

1
小楼老师动作好快,今天axure8刚发布没多久,就已经把汉化包做出来了!
Axure8还处于测试阶段,某些功能还有BUG,切勿用于正式工作,仅供研究和学习使用!

Axure8.0中文汉化语言包下载地址:http://www.axure.com.cn/wp-content/uploads/2015/08/lang.zip

Axure8测试版下载地址:

Win版下载地址:http://axure.cachefly.net/AxureRP-Setup-Beta.exe
MAC版下载地址:http://axure.cachefly.net/AxureRP-Setup-Beta.dmg

★ Axure8软件汉化方法(求求大家仔细阅读下面的使用方法): 
首先退出正在运行中的 Axure (如果您正在使用).
将 汉化包.rar 文件解压, 得到 lang 文件夹, 然后将其复制到 Axure 安装目录.
■ 如果您使用的为 Windows版:
① 将 lang 文件夹复制到axure安装目录下,安装后的目录结构类似

c://Program Files/Axure/Axure RP Pro 7.0/lang/default(32位系统)
c://Program Files (x86)/Axure/Axure RP Pro 7.0/lang/default(64位系统)

② 启动 Axure 即可看到简体中文界面, 说明已成功汉化,如果仍为英文则一定是汉化文件位置不正确.
■ 如果您使用的为 MAC 版:
① 在 应用程序 文件夹里找到Axure RP Pro 7.app程序,然后右键选择“显示包内容”,然后依次打开Contents/Resources文件夹;
② 将 lang 文件夹复制到这个目录下即可;
③ 启动 Axure 即可看到简体中文界面, 说明已成功汉化,如果仍为英文则一定是汉化文件位置不正确.
[整理:CALONYE]

更快,更爽的制作原型-Axure RP 8.0beta初体验

更快,更爽的制作原型-Axure RP 8.0beta初体验
尽管原型制作工具哪家强的论战在知乎愈演愈烈,但Axure无疑还是多数产品狗的主力工具。究其原因,Blink简单的总结为:在目前互联网环境下,Axure是更好的平衡了快速、好用、适用专业原型制作工具,对于像Sketch、OmniGraffle等热门工具来说,Blink认为他们是能做到部分Axure做不到或做起来很麻烦的功能罢了,并不能完美替代,而且他们本身也不是专业做原型的。
更快,更爽的制作原型-Axure RP 8.0beta初体验
而今年8月,Axure RP最新的8.0beta版已经悄然发布,Blink作为工具控,当然也在第一时间进行了体验,本文总结了几个实际工作中高频实用的改进点与大家分享(虽然酷炫屌爆是Blink喜欢演示的,放在下期吧……)。
注:本文演示均为Mac版,Windows版功能相同布局略有不同。本文只讲改进点,不赘述入门基本功能,阅读需有Axure基础。
整体预览:布局微调,更加顺手
更快,更爽的制作原型-Axure RP 8.0beta初体验
8.0beta版总体来说,变化不大,优化了一些工具布局,最大的变化就是页面属性面板(Page Properties Panes)从底部取掉了,合并到了右侧的部件属性面板中,当你选择某个部件时,属性面板就是该部件的属性,当你点击页面空白处时,属性面板就会变成页面属性。这个布局调整后,个人觉得非常合理,再也没有底部面板了,变成了Mac中最经典的左中右3栏布局。
是否经常遇到以下情况:因为页面属性比较少用,以及为了增加编辑区域,你叉掉了页面属性面板,但偶尔需要的时候却不知道从哪打开了,好不容易从视图菜单中找到了,用了一这次,你又叉掉了……而现在这个问题终于解决了。更多改进请看下文。
实用改进1:部件尺寸终于有了比例锁定
更快,更爽的制作原型-Axure RP 8.0beta初体验
曾经多少次,你拖进来的素材图片要调整大小匹配你原型的iPhone宽度,320还是375,whatever,为了保持长宽比,你当然知道拖图片大小的时候按住shift键,但是你手一抖宽度变成了318,反向一撸又变成了324有木有?摔鼠标的心都有了。当然你也可以拿出计算器算出长宽比,然后再部件尺寸上填数字。什么?你从来不计较长宽比,美女拉成肥婆也无所谓?好吧~
现在多了一个长宽比保持按钮,瞬间优雅的解决了痛点,选中之后你只用输入一个尺寸,另一个跟着等比变化,这其实在专业作图软件上是很基本的功能。
实用改进2:默认部件库焕然一新
更快,更爽的制作原型-Axure RP 8.0beta初体验
默认部件库的改进非常符合用户需求,Axure公司应该做足了调研的。矩形部件变成了4种:最基本的白框、无边框最浅灰、无边框浅灰、无边框中灰,最浅灰Blink也经常用到,这个改进又为原型制作节约很多时间。
按钮,也变成了3种:白框默认按钮、无边蓝底主要按钮、文字按钮,总之就是又能省很多事
更快,更爽的制作原型-Axure RP 8.0beta初体验
重点来了,对话框部件的小尖尖可以随意改位置了,拖动尖尖的3个G点(黄点)就可以随意摆放了,从前调那个尖尖受的苦终于熬到头了,你又能省去一些与产品逻辑无关的琐事,什么?你从来都是直接放个三角形?好吧~~(╯﹏╰)b
实用改进3 自带标注部件了
更快,更爽的制作原型-Axure RP 8.0beta初体验
线框图与需求说明相结合,直接在线框图上用箭头和文字标注说明,也是很多公司采用的方式,更敏捷嘛。程序猿能一手看UI设计图一手看原型图,两手抓,还要编代码的,已经很优秀了,作为有情怀的产品经理怎么还忍心让他们再开个长篇文档呢?
更快,更爽的制作原型-Axure RP 8.0beta初体验
以前,为了更好的标注,Blink专门做了一套标注组件,可以说是煞费苦心啊(若你需要,可以找我索取)。
更快,更爽的制作原型-Axure RP 8.0beta初体验
现在,你妹的,官方提供了,看起来还很精美的样子,便签纸还带阴影,加特技啊?
更快,更爽的制作原型-Axure RP 8.0beta初体验
吐槽完毕,重点说说页面快照组件(Snapshot),拖放后双击弹出站点地图,选择一个页面后,组件就会变成该页面的截图,这还没完,浏览器预览的时候,点击截图是会跳转到相应页面的,有点吊吧。老实说,你之前有类似需求时,是把那个页面整个复制一份摆出来,还是粘贴为图片?总之都是笨办法,不管是复制还是粘贴图片,对应页面有变动了你就悲剧了,你是重新复制一次呢?还是重新复制一次呢?那步废话吗?难道现在的页面快照可以同步更新,对!就是可以同步更新!你在页面上做了改动,到快照上一看,duang的一下更着改了,碉堡了,有木有?
实用改进4 图像裁剪不求人
更快,更爽的制作原型-Axure RP 8.0beta初体验
有了图像裁剪功能,做一个圆形头像再也不用求UI了,选择图像,裁剪正方形区域,加圆角(50°),加边框,精美的原型头像出炉了!
实用改进5 形状布尔运算高大上
这个用语过于专业,其实是专业作图软件的功能,看下sketch的使用手册中的说明就懂了
更快,更爽的制作原型-Axure RP 8.0beta初体验
好像还是不懂?其实就是两个形状的叠加,举个栗子你就明白了,假如你要做一个环状的进度图,如图,表示未完成的1/4圈灰色环是怎么做出来的呢?看Blink来演示吧。
更快,更爽的制作原型-Axure RP 8.0beta初体验
还是看图说话吧,先得到表示未完成进度的灰色圈圈,和表示已完成进度的蓝色圈圈,那么如何把灰色圈做成只有一小段呢?就需要用另外的图形来叠加,这里用了Axure8.0beta新增的“饼图”组件,拖出一个饼图,调好缺口角度,重叠在灰色圈上,然后同时选中两个组件,点击属性面板中的“减去”图标,就得到了只有一小段的灰色圈,然后再将其重叠在蓝色圈上,就大功告成了!
更快,更爽的制作原型-Axure RP 8.0beta初体验
实用改进6 钢笔工具挥洒自如
更快,更爽的制作原型-Axure RP 8.0beta初体验
虽然Axure不是专业作图工具,但是偶尔原型中需要一个并不复杂的非常规形状怎么办呢?又找UI?又打开PS、Sketch?现在在Axure中用钢笔一画也可以瞬间搞定了,看我画的吃豆人是不是很呆萌啊?那个犀利的小眼神就是用的钢笔工具画的哦(钢笔工具在主流作图软件中都有,可以画复杂图形,但画我这种图形还是是非常简单的)。
one more thing
总的来说,Axure RP8.0beta从两个方面来大大提高我们的生产效率:
本质功能上,结合现在的使用趋势为你调教的更加拿出即用。
新增功能上,让你不用切换到其他工具也能快速搞定。
这么说来8.0的更新都是很必要的,很实用的,要是来的早点就更好了,我也可以少很多折腾了,期待正式版早日上市!
[整理:CALONYE]

交互设计七大定律

Interaction-design

 Alan Cooper:除非有更好的选择,否则就遵从标准。

作为交互设计之父的阿兰·库珀最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,在交互设计领域有很多经过了时间的验证的法则定律被认作了标准,那么你都知道都有哪些吗?

1. Fitts’ Law / 菲茨定律(费茨法则)


定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。
它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。(Calonye p.s win8因为无法做到整体化的改变;主要原因在于步子迈的太大了以及所有软件类应用还是处于传统界面上的操作,并没有达到一体化的改变而导致失利。然而win10却成功了,市场告诉我们,该定律原则上是有效的,但需要遵从整体的规则和变化,并不是一味地的照做;)

菲茨定律的启示:

  • 按钮等可点击对象需要合理的大小尺寸。
  • 屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。
  • 出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

2. Hick’s Law / 席克定律(希克法则)


定律内容:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+b log2(n)。在人机交互中界面中选项越多,意味着用户做出决定的时间越长。例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。
席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。(Calonye p.s 可尝试配合沉没定理,在过程逐渐加大难度)
扩展阅读:席克法則谈谈Hick定律Readlists

3. 神奇数字 7±2 法则


1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

4. The Law Of Proximity 接近法则


根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。(Calonye P.s 事实上的设计过程中,关联性的权重比例有相当大提升交互体验的作用;)

5. Tesler’s Law 泰思勒定律(复杂性守恒定律)


定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计,收件人地址是不能再简化的,而对于发件人却可以通过客户端的集成来转移它的复杂性。(Calonye p.s 解决根源的规则,优化其规则的灵活性;)

6. 新乡重夫:防错原则

防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。

如上图所示极客公园的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的,只有两者都满足了才可以。

7. Occam’s Razor 奥卡姆剃刀原理(简单有效原理)

这个原理被称为“如无必要,勿增实体”,即如有两个功能相等的设计,那么选择最简单的。在公开课・走进 UC 中 UC 浏览器产品经理苏剑南在”UC 浏览器 For Android 产品设计思考“演讲中也有讲到该原理的应用,”如果 UC 手机浏览器要发布第一个版本 UC 1.0,你会选择哪五个功能?‘’

为了遵守神奇的数字 7 法则本篇就只介绍到这里了,如果你还有兴趣自己去找找其他的定律法则,如与费茨定律接近的 Steering Law转向定律Gutenberg Diagram古登堡图法则以及雷打不动到哪哪适用的帕累托定律(80/20 原则)三等分原则等。
最后想说的是虽然这些法则定律被很多人认定为标准,很多人也记得 Alan Cooper 说过的那句名言,但从实际出发这些法则定了起到的只是参考或启发作为,作为交互设计人员千万不能照本宣科,因为只有亲自做过后才会深有体会。
Calonye p.s 没有最完美的交互设计,所有的设计都是为了减低用户理解成本,提高用户体验,每一个小细节,无论它的调整是多或是少,只要对整体提升有帮助,那么就应该毫不犹豫的设计;
[整理:CALONYE]

行业干货 | 提升用户体验的7大微交互

众所周知,我们总是依据封面来判断书的好坏,聪明的设计师会创造实用有吸引力的界面。潜在用户可能会被吸引,但如何一直黏住他们呢?

要试着回答这个问题,所有一切都指向人本设计,其中用户是最主要的考量。以人为本:你的应用应该使用日常用语,包括情绪、口语,外观还要有一丝“诱惑力”。界面应当成为你的好朋友,时刻准备给出建议提升你的体验,让你会心一笑。

640-wx_fmtjpegtpwebpwxfrom5wx_lazy1(1)
其实,这是是微交互在起作用
精确的说,这主要是界面附带的交互动画,使它更具表现力。优秀的动画能够:

  • 表达状态并提供反馈
  • 提升直接的操纵感
  • 将操作结果可视化

在用户体验中,关键是你如何对待用户,还有他们使用产品时的感受。极小的细节都值得加倍留心。微交互提供了用户所需的反馈,表达了当前运行状况。无论背后逻辑有多么复杂,都能使界面更亲切。
下面,小度就与你分享一些案例,大量动图演示。

1. 显示系统状态

Jakob Nielsen在可用性原则启示第一条中描述:让用户始终知晓当前在发生什么。用户希望立马得到回应,但总有些情况下,网站需要一点时间等待操作完成。
那么,界面就应当在背景处显示图形,反映完成百分比。或是播放声音,让用户了解当前发生的事情。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1
这个原则也关系到文件传输:不要让用户觉得无聊,给他们看进度条。即使是不太令人愉快的通知,比如传输失败,也应该以令人喜爱的方式展现。让你的用户微笑!
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (1)

2. 突出显示变化

通常为了节省空间,应用会在需要时把某个按钮替换掉。有时我们需要展现通知,确保用户注意到了。动画可以吸引他们注意,不至于忽略你认为重要的信息。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (2)
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (3)

3. 保持前后关联

在这个智能手机和小屏幕智能手表的时代,难以在屏幕上展现大量信息。有一种处理方式,是在不同页面之间保持清晰的导航。让用户理解什么东西来自何处,便能轻易回溯。有多种方式可以实现:
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (4)
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (5)

4. 非标准布局

继续之前的例子,微交互应当帮助用户理解如何操作非标准的布局,去除不必要的疑惑。照片前后滑动、滚动式图表和旋转角色都是很棒的选择:
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (6)
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (7)

5. 行动号召

除了帮助用户有效地操作应用,微交互也有鼓励用户操作的能力:持续浏览、点赞或分享内容,只因为这很有吸引力,用户不舍离去。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (8)
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (9)

6. 输入的视觉化

所有应用中,数据录入都是最重要的元素之一。数据录入决定了用户所得结果的质量。通常,这部分很无趣,但微交互可以使它与众不同。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (10)
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (11)

7. 使教程生动形象

当然,在应用发布后,动画可以教育用户。它突出一些基本功能和控件,排除用户在未来的使用中的障碍。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (12)
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (13dsds)

结论

所以,如果你重视用户体验,就应该从头到尾精细打磨界面,通过微交互与动画为它增色添彩。它会为你的项目赋予生命。
注意每个细节,是使人机交互易用的成功要诀。
[整理:CALONYE]

行业干货 | 动效设计的十个案例 三大原因

最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域。

那么到底为什么需要动效设计?或者说我们到底需要什么样的动效?以下是一位设计师从产品本身出发来思考的动效设计。

PS | 文中部分案例为设计师个人作品,部分为线上产品,都是非常非常棒的作品。如不慎冒犯请联系联盟。

1、加强体验舒适度

表现层级关系
为了展现层与层的关系,是抽屉,是打开,还是平级切换等等,让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1
 
与用户手势结合,更自然的动画表现
当用户手势操作的时候,让界面的动态走向更符合手指的运动,从而让用户感觉到是自己控制了界面的动向,而不是机械化的跳转。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (1)

City guide app 用手势可以向左向右扔卡片

愉快的提示功能
在某些需要提醒的时候能吸引用户的注意,但是又不会生硬,符合预期的出现。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (2)

Action button feedback 出错提示

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (3)

City Guides 启动时提示用户可以左右滑动卡片

 
额外增加界面的活力
在用户预期之外增加的惊喜,可以是帅气的,可以是卖萌,可以有些物理属性,总之让用户感知到产品的生命力。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (4)

readme.io 萌萌的输入框

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (5)

amazon Q弹的菜单

 
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (6)

tumblr 不喜欢我 心都碎了呢~

吸引用户持久的注意力
也是属于增加用户的惊喜感,在某些数据量较大的界面中添加一些动效,让用户保持注意力。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (7)

2、减弱不可避免的不适感

虽然我们的产品,我们的交互,我们的设计,我们的工程狮都在努力把产品打造的更加优秀,更加完美,但是总有一些无法避免的问题、或者有可能会出现的bug、外界条件的不给力等因素,造成我们的产品体验下降。这些时候适当的增加一些动效可以弥补在出现这些情况时的不适体验。
比如下面这些:
让等待变得更愉快
常出现在加载、刷新、发送等界面中,让等待变得可视化,甚至不再那么无聊。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (8)

Download Progress 让下载不再枯燥

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (9)

这样萌的章鱼,用户一定舍不得加载界面的结束。

失败界面的动效
比如刷新失败、页面错误、未联网提示这些。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (10)

download 就算失败了还是感觉萌萌哒~

增加界面与界面衔接的延续感
界面的跳转不可以避免,但是如果让本来分别独立的2个界面或者事件拥有了某种特定的联系,可以显得更加好玩,不再是生硬的跳转。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (11)

3、不易被察觉的动效

默默增加反馈感
为用户的操作提供有趣的正反馈。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (12)
去除用户不再需要的元素
随着用户的操作,有的内容已经是用户不再关注的。这时候可以将他们隐藏起来。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (13)
[整理:CALONYE]