大数跨境
0
0

必看︱迅速提高用户体验、交互、UI的几个绝妙方法

必看︱迅速提高用户体验、交互、UI的几个绝妙方法 中智凯灵
2020-07-08
0
导读:今晚有直播,预告在文章最后

01
列表代替陈列式布局
这实际上是一个“人体工程学”上的问题。简单的说就是让我们的产品更符合我们的身体和生理,通过设计让产品用起来更舒适、更高效,针对界面的设计呢?就是让用户眼睛看着不累,手上摁着舒服。


什么是陈列式布局?它又叫集合视图或是网格布局,就是把图标、磁块或是按钮象棋子一样罗列在界面上。(如图1)

(图1)

很多见是吧?空间利用很充分,界面布局饱满,也是各大平台桌面的首选。然而,仅限于桌面或首页,手机交互中这样的界面是非常虐心的。为什么呢?因为现在大家都喜欢用大屏手机,有很多死角,你手指头根本够不到。


我们都知道,手机主要是基于单手操作的。有人说了,也可以双手操作啊?是的,但是仅局限于“沉浸型”产品,比如:游戏、内容编辑、地图查找等情景。然而我们大部分操作都是基于功能或效率的,在机场或车站我们另一只手拉着箱子提着包;在地铁公交车上我们另一只手扶着杆拉着环;在商场或超市里我们另一只手牵着同伴或推着购物车····,总之,手机操作的绝大部分情景都是单手操作。那么单手操作的时候有几个手指可以在界面上操作呢?自己试试就知道了。


因此,我们的手机界面应该针对大拇指的长度和灵活度来布局安排。可惜,大拇指不争气,粗、短、笨。面对时下大家钟爱的大屏手机,实在是鞭长莫及。因此回看图1上的几个界面,对大拇指来说盲区太多,想一想你左手提着沉甸甸的菜篮子,右手却要在你的华为大屏手机上打开支付宝去扫老板娘的二维码·····


图2是我当时针对iPhone 5手机,为了便于UI设计师布局参考,绘制的单手操作示意图:

(图2)

红色区域是大拇指操作的黄金地片,桔色区域是大拇指的可操作范围,绿色区域是大拇指能够触碰到的区域,蓝色区域是大拇指够不着的区域。注意,这是针对右手的。大家都知道iPhone 5与iPhone 4s的变化,想想当年乔教主活着的时候死活不让iPhone变大,还是挺有远见的。

 

怎么解决?如标题所说,尽量不用使用陈列式布局,而是采用列表式布局。列表式布局顾名思义如(如图)从上至下以列表方式展现内容。

(图3)

我们可以看到,现在无论是iOS还是Android的设计规范,都推荐设计师采用这样的列表式布局,虽然有点浪费空间,但是更利于手机操作。尤其是手机的单手操作,即使屏幕很大,我们总能把需要的项目上下拖动到大拇指能点击操作的区域,相比陈列式布局,操作死角不但少多了,内容的视觉引导也更直观高效了,什么意思?就是陈列式布局展示的内容太多,用户需要用更多的时间甄别,而列表式布局只需上下一扫,内容尽收眼底,还不会弄乱顺序。

03
Tiles的魅力

Tiles有很多种翻译,有人翻译成“瓦片”,这主要是做游戏场景设计时拼接地图时的叫法,在Windows Phone平台上,官方的翻译把它叫“磁贴”,这让人想到冰箱门上贴着的菜谱和购物清单,有人觉得这对交互的比喻还不够形象,所以把它翻译成“磁块”。众说纷纭,有点乱,但是英文就是这一个单词,所以我们在这里就用英文的“Tiles”,别小看这个小方块,它可是现在扁平化交互的首选排版方式。

 

最早了解Tiles是在Windows 8和WindowsPhone手机的桌面上,就是在界面上可大可小,可长可短的方块,放在主页上的Tiles看上去和图标的功效一样,实际上完全不是一个概念。图标只是一个png的图像,唯一的交互就是点击打开,而Windows的Tiles交互功能是非常丰富的,可以缩放,可以翻转,可以推送,可以展示应用的信息内容,可以观察应用的功能状态·······

 

那么我们就先来看看iOS的设计,苹果公司的设计其实在很早就有这样的观念,不过它是建立在拟物化基础上的(毕竟这是苹果的传统设计理念),实际上是用一叠卡片来隐喻的。而这种卡片式的交互在iOS上无处不在,我们通过几个大家熟悉的iOS界面就可以清楚的理解:(图4)

图4

卡片是有正反面的,是可以翻转的,这是Tiles交互的关键,不过卡片这个拟物化观念也受到了生活上的物理约束,比如它不应该是动态的,应该用手指来翻转,应该大小一致,应该带有厚度和质感等等,因此从形式上确实没有Windows的Tiles活,也没有它操作灵便。当然,设计师是活的,我们在打造自己的产品时就不应该有这些条条框框了。

 

再看看Android的设计,实际上Android全新的Material Design真的把Tiles理念玩的是出神入化,我觉得在交互的空间上和广度上都超越了Windows。在Material Design里,Tiles变成了一叠可以自由伸缩变形的电子纸,我们可以自由的把它们展开,铺平,折叠,滑走或摞成一叠········(如图5)

图5

由此可见,只要你有足够的想象力,Tiles就可以变化无穷。它就象一块块积木,可以随意拼接搭建,自适应在各种规格和大小的屏幕上,面对移动互联时代碎片化的终端设备,这可以算Tiles最大的亮点在图6上我们可以看到,Tiles可以是图标,也可以加按钮,可以是表单,也可以加多选列表,可以是图像索引,也可以放可播放的视频。


总之,Tiles是活的,我们只需要把相应的内容、功能、控件封装成块放在里面,它就可以根据需要自如的罗列在界面上,让扁平化交互变得更直观、快速、有条理。

(图6)


04
用图像替代文字

如果我们逛商场的时候想找卫生间,你会去搜索“卫生间”三个文字呢?还是去搜索那个一男一女并排站立的图标?答案是肯定的,文字不宜识别,很容易淹没在商场的各种品牌广告和店面标题中,即使看到了,也需要通过阅读来识别。但是图像则不然,不但易识别而且速度快,即使离得很远,或者简单的模糊浏览,也可以完成识别。


因此,用图像来代替文字,可以提高交互的效率。可是,有的人不这么认为,原因很充分:图像传达信息或识别速度虽然快但是不精确,而文字传达信息虽然慢但是是绝对精确的。这个没错,无法辩驳,因此大多数设计师的思路是:图文并现。我们要在标题上、列表中、按钮上等等交互控件上加上图标、头像或图片缩览图,为的是提高交互的效率。


工业时代的产品的设计是以用户使用和操作为核心的,我们的产品,用户第一次使用的时候确实不会去看图标和缩览图,完全用文字来交互,但是他每天都会打开用,每天都会重复相同的操作,只用文字交互就太慢、太难用了,这时图像交互逐渐代替了文字,直到最终我们打开界面,还没来得及看到文字,操作就已经完成了。

(图7)

图7中是两个很常用的iPhone应用。看看我们是怎样识别内容并操作的。在Safari “历史浏览”界面的列表中,我们可以看到每个卡片的顶部都写有网页的文字名称,然而我们操作时会去看吗(404页面可能会去看)?


大部分情况下,我们还没来得及看到文字,就已经通过网页的色调或版面完成了选择。自从iOS 7完成了扁平化改造,iPhone上的Music歌曲列表里的每一首歌曲前面都可以看到专辑的封面了,这很重要,从此以后,去找我想听的歌,直接浏览封面就行了,用不着逐行的阅读歌曲名称了,想听Betles,一眼就看了最经典的蓝色专辑,其它的干脆不用去扫·····


相信聊到这,大家已经明白界面交互中“图文并现”这个理念。但是我的标题可是用图像代替文字,这可能吗?那就要看你对移动互联网产品的理解了,我们对交互设计的要求是:直观、快速、高效的微任务。前面我们在谈列表布局的优点时,谈到移动应用的用户使用场景大多是非稳定的状态:车站上、公共汽车里、超市里·····


用户不可能也无暇估计精密、繁琐的操作,大多数情况下是简单快速的草草了事,因为他们还得同时注意是不是该下车了或者是不是该轮到自己结账了......


所以有时候我们用户体验设计的成功与否,很大程度上体现在对界面的简化和直观化上,要用大家能接受的、约定俗成的图形代替文字。从图8右侧的界面中,我们可以看到iOS工具栏上的图标是不需要文字注释的,因为大家早已不会搞错了。

(图8)


05
娱乐精神
设计师不是程序员,虽然在打造产品的过程中设计师需要和开发人员站在同一条战线上,相互沟通、理解和衔接,但是设计师同时需要保持自己应有的状态,一种做设计必须具备的状态,能产生丰富想象力的和创新的状态,我把它称作“娱乐精神”。

 

简单的说,“娱乐”就是把本来平淡无奇的东西变得好玩、有意思。我们的产品为什么会吸引人?为什么便于推广?为什么能保持活跃度?除了内容和功能满足了用户需求以外,很重要的原因是产品在设计层面符合了大众的口味。有人可能觉得我是在谈时尚范畴的东西,但是在我看来,这属于用户体验设计。很多时候我们为了有效延续产品的寿命和活跃度,需要在设计上给它注入新鲜的血液,让它充满活力。


什么是新鲜血液,当然是时下大众喜闻乐见的这些观念和时尚产物,设计师的工作就是把它提炼出来,转化成适合产品的、可以被产品吸收的元素,使产品更好的适应大众。

 

那么问题来了,我们怎么培养自己的“娱乐精神”呢?方法听上去很简单,但是操作起来不太容易,那就是:会生活。

 

简单的说:普通人是在生活中寻找娱乐,聪明人在娱乐中积累阅历。当我们听完一个笑话的时候,大部分人哈哈大笑,然后就完了,但是有些人就会利用这个点子去整人,设计师必须就是这样的人。

 

大家都很清楚,移动互联时代的今天,我们太需要点子。作为产品设计师,保持和提高自己的专业水准固然重要,但是想要打造出吸引用户的,充满活力的产品,一定要保持自己的娱乐精神,在生活中(而不是学习和钻研中)积累和充实自己和自己的产品。

06
一个小预告

今天晚上18:00,Keylink智播堂将直播《用户体验与产品UI设计-上篇》,7月14日(下周二)18:00直播《用户体验与产品UI设计-下篇》,每场直播为时3个小时,本次课程为设计师的进阶高端课程,详解当下的产品设计新思路及未来走向,以用户故事地图的方式演绎互联网及游戏产品从需求分析到产品落地的全流程,涵盖用户体验、交互设计、UI设计三个方面。
如果你是设计师、产品经理、开发人员,以及与产品打造、开发相关的同学,可以来听一听,相信你会有收获。

07
关于主讲嘉宾
赵老师(本文作者)
毕业于清华大学,用户体验设计师,互联网产品设计咨询专家,赵老师专注移动产品UX、UI及交互设计,参与多款大型网络游戏的用户体验设计及Android和iOS客户端UI及用户体验设计;为摩托罗拉、上海通用别克、宝洁公司、西门子、美国利乐公司等企业提供设计工作,曾为世界500强集团App开发团队、穿戴式设备研发团队、携程租车等提供咨询及用户体验设计服务



08
最后
小编最后的叨叨叨:今晚的直播目前报名的人数已经突破70人,由于是小班授课,我们会把人数控制在100人以内,所以还剩下不到30个名额;距离第一场直播还有不到2个小时的时间,如果你刚好看到了这篇推送,又刚好想报名,可以联系我们的课程班主任,班主任微信号:137 1647 9007(请备注“直播报名”)


对了,关于价格,原价399元/期,现在5人以上团购价仅需99元/人,如果您转发了这篇文章并且截图给我们,还会有惊喜~

想要了解更多关于线上定制课程项目的信息,欢迎留言或者来电咨询:4006-998-758







仙女都在看
点点点,赞和在看都在这儿!
【声明】内容源于网络
0
0
中智凯灵
中智凯灵(KeyLink)是国内领先的专业数字人才发展平台,面向科技研发型企业和组织提供数字化人才培养的专属成长地图,数字化转型的方法 + 智库。
内容 320
粉丝 0
中智凯灵 中智凯灵(KeyLink)是国内领先的专业数字人才发展平台,面向科技研发型企业和组织提供数字化人才培养的专属成长地图,数字化转型的方法 + 智库。
总阅读3
粉丝0
内容320