迅速提高产品用户体验、交互、界面设计的几个绝妙方法

作者/分享人：大羽，智捷课堂创始人。摩托罗拉产品发布会相关网站的策划及视觉设计；安博京津动漫产业园官网的策划及设计；国家农产品追溯系统iPad客户端UI设计；价格线酒店预订客户端设计；为摩托罗拉、上海通用别克、宝洁公司、西门子、美国利乐公司等企业提供设计工作。曾为中国移动、中国电信、惠普、华为、OPPO、携程网、咪咕传媒、英业达、PWC、中信银行、建设银行、等企业培训。著有《品味移动设计》、《交互设计的艺术》。

先解释一下标题，作为老设计师，在我看来，用户体验、交互和UI设计是一件事。所以我的每有个点子其实都同时具备这三个属性，因此，我们在针对具体问题细节聊的时候也会同时从这三个方面去讨论，即：心理学、生理学和美学。

话题很大，可以聊的知识点也很多，咱们由浅入深，这次先聊5个，都是比较通俗易懂、对产品有益的设计方法、知识或者理念。

使用更加纤细的图形和字体

什么是纤细的字体，很简单就是（图1）这样的：

（图1）

以此类推，纤细的图形就是（图2）这样的：

（图2）

为什么？是因为看上去很好看很时尚吗？那咱们就先从美学角度聊聊。

大家应该能感觉到，这是扁平化时代到来后一个非常显著的UI设计趋势，从苹果公司iOS的UI设计上可以明显的体会到(见图3)。这样处理字体和图形确实很好看也很时尚，精美、秀气，是提高版面格调和产品美观度的利器。但是这样理解有点肤浅了，因为选择这样的字体和图形方式不是因为美观，主要是为了交互。

（图3）

看着图3我们先考虑一个问题，在版面上粗大的字看起来清楚还是纤细的字看起来清楚？那还用问吗？肯定是粗大的字看起来要更清楚。回答正确，从视觉上来说没问题，但这是视觉角度，不是心理学角度。

从心理学角度来说，粗大的字因为看起来很清楚且容易辨识，所以人们更愿意用余光去看，造成的结果就是易错，识别错误率高。想一想，那么大个的文字，扫一眼就看清楚了，但是眼睛看清楚了，心里能同步的消化并理解吗？未必，所以容易出现识别错误或望文生义的事情。

但是相对纤细的，甚至细小的文字，人们更愿意用聚焦去识别，也就是定睛的去看，这时候人们的视觉和心里是同步的，确定性强且不易出错。这就是我们为什么在界面交互的过程中最好选用相对纤细的字体。

图标和控件也是同理，想一想我们界面上的栏图标、按钮上的文字、列表中的内容是为了让用户看见就行，还是精确的识别并快速正确的判断？道理很简单吧？因此我们应该选用这种相对纤细、精美、秀气的图形和字体，当然，在设计师的眼里它们也很时尚。

这里有个小故事，算是个案例想和大家分享，篇幅的原因，我在Chat上讲给大家。

用列表代替陈列式布局

这实际上是一个“人体工程学”上的问题。什么是“人体工程学”？（最好自己百度一下）简单的说就是让我们的产品更符合我们的身体和生理，通过设计让产品用起来更舒适、更高效，针对界面的设计呢？就是让用户眼睛看着不累，手上摁着舒服。

什么是陈列式布局？它又叫集合视图或是网格布局，就是把图标、磁块或是按钮象棋子一样罗列在界面上。（如图4）

（图4）

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

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

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

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

（图5）

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

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

（图6）

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

其实，列表式布局还有一个很重要的优点，我们在Chat上和大家分享。

当然，设计是没有绝对正确的，如果我们的产品是沉浸型的、需要双手操作的、用户的使用场景定位在沙发座椅上、被窝里、马桶上等等相对稳定的状态中时，是完全可以使用陈列式布局的。同时，也不是所有的陈列式布局都不利于单手操作，（图7）的这种左右等分的方式就可以达到列表式布局的手感要求，多见于Android的原生App。

（图7）

Tiles的魔力

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

最早了解Tiles是在Windows 8和Windows Phone手机的桌面上，就是在界面上可大可小，可长可短的方块（如图8）。放在主页上的Tiles看上去和图标的功效一样，实际上完全不是一个概念。图标只是一个png的图像，唯一的交互就是点击打开，而Windows的Tiles交互功能是非常丰富的，可以缩放，可以翻转，可以推送，可以展示应用的信息内容，可以观察应用的功能状态·······，因此我们很多时候不需要点击进入应用，只需要观察应用的Tiles就可以获得结果。这实在是一个创举，它实实在在的推动了扁平化设计、现代交互理念、乃至整个移动互联网的发展。这个理念有效的解决了屏幕适配的碎片化问题（利用Tiles实现响应式布局），使我们设计和开发的流程更加的敏捷。

（图8）

Tiles的概念虽然是微软提出来的，但是这个观念可早就存在，绝不是微软的专利。我在这里和大家谈的Tiles，也绝不仅仅指的是Windows平台里的方格子，而是如何在我们自己的产品上驾驭这种理念。

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

（图9）

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

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

（图10）

由此可见，只要你有足够的想象力，Tiles就可以变化无穷。

Tiles最大的普及其实并不在手机端，而是Web上（现在多半也在手机上用），主要体现在大家熟知的H5网页的响应式设计上。它就象一块块积木，可以随意拼接搭建，自适应在各种规格和大小的屏幕上，面对移动互联时代碎片化的终端设备，这可以算Tiles最大的亮点。在图11上我们可以看到，Tiles可以是图标，也可以加按钮，可以是表单，也可以加多选列表，可以是图像索引，也可以放可播放的视频。

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

（图11）

用图像代替文字

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

现在的新闻用户端都是图片新闻为主，这和过去以文字新闻为主的报纸是有本质区别的。图片传达信息的速度快。比如，看到图片上一个大胡子躺在那里满脸鲜血，瞬间了解到：拉登被击毙了（因为看到照片的同时瞟到标题上有个“拉”字，0.1秒）。可是，没有照片的文字新闻，我必须要阅读完标题之后太能得到消息，速度差别可想而知。

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

过去程序员很容易提出反对：已经有很清晰的文字描述了，还要加这些多余的零件、图形，不但增加我们的工作量，还会增大占用空间，降低产品运行速度·····你们设计师加这些图形无非就是为了样子更好看，界面更时尚。很多设计师也不知道怎么辩驳，甚至也觉得好像是这么回事。

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

（图12）

图12中是两个很常用的iPhone应用。看看我们是怎样识别内容并操作的。在Safari “历史浏览”界面的列表中，我们可以看到每个卡片的顶部都写有网页的文字名称，然而我们操作时会去看吗（404页面可能会去看）？大部分情况下，我们还没来得及看到文字，就已经通过网页的色调或版面完成了选择。自从iOS 7完成了扁平化改造，iPhone上的Music歌曲列表里的每一首歌曲前面都可以看到专辑的封面了，这很重要，从此以后，去找我想听的歌，直接浏览封面就行了，用不着逐行的阅读歌曲名称了，想听Betles，一眼就看了最经典的蓝色专辑，其它的干脆不用去扫·····

相信聊到这，大家已经明白界面交互中“图文并现”这个理念。但是我的标题可是用图像代替文字，这可能吗？那就要看你对移动互联网产品的理解了，我们对交互设计的要求是：直观、快速、高效的微任务。前面我们在谈列表布局的优点时，谈到移动应用的用户使用场景大多是非稳定的状态：车站上、公共汽车里、超市里····· 用户不可能也无暇估计精密、繁琐的操作，大多数情况下是简单快速的草草了事，因为他们还得同时注意是不是该下车了或者是不是该轮到自己结账了······所以有时候我们用户体验设计的成功与否，很大程度上体现在对界面的简化和直观化上，要用大家能接受的、约定俗成的图形代替文字。从图13右侧的界面中会，我们可以看到iOS工具栏上的图标是不需要文字注释的，因为大家早已不会搞错了。

（图13）

最后再重申观点：互联网产品的界面，应该是图文并现、多图少字、大图小字、能用图就别放字、能用一个词就别放一句话、能用一句话就别出现成段的文本。（请自行回顾图6、图7、图8）

娱乐精神

最后聊个轻松的话题，不算是什么绝招，有关设计师的素质。

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

简单的说，“娱乐”就是把本来平淡无奇的东西变得好玩、有意思。我们的产品为什么会吸引人？为什么便于推广？为什么能保持活跃度？除了内容和功能满足了用户需求以外，很重要的原因是产品在设计层面符合了大众的口味。有人可能觉得我是在谈时尚范畴的东西，但是在我看来，这属于用户体验设计。很多时候我们为了有效延续产品的寿命和活跃度，需要在设计上给它注入新鲜的血液，让它充满活力。什么是新鲜血液，当然是时下大众喜闻乐见的这些观念和时尚产物，设计师的工作就是把它提炼出来，转化成适合产品的、可以被产品吸收的元素，使产品更好的适应大众。

上大学的时候一个老师（真不应该把老师的名字给忘了）对设计师状态的描述让我很有些感触，他说：“设计师是感性动物，身上长满了类似蜗牛一样的触角，这些触角到处探寻，伸进了社会的各个层面，各个角落、各个毛孔。不过这些触角太娇气、太敏感，一旦受到刺激或伤害就会立即缩回来”。刚听完觉得很恶心，现在想想很在理，因为他很贴切的描述了三个设计师应该具备的素质：一个是要兴趣广泛，一个是要善于融入社会，第三个就是要敏感、细腻，而这三点正是娱乐精神必须具备的条件。

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

看过《乔布斯传》的朋友应该会有感触，我们的乔教主在上大学的时候绝不算什么好学生。他这个大学可以说上的非常的随性，先是中途就退学了，然后今天听听这个专业，明天看看那个讲座。还有人说乔布斯懂设计，那明明就是为了泡妞去上了几次字体设计课。你要是觉得这种上学的方法才能造就天才那就错了，因为这里得有个前提条件：你得是个聪明人。简单的说：普通人是在生活中寻找娱乐，聪明人在娱乐中积累阅历。当我们听完一个笑话的时候，大部分人哈哈大笑，然后就完了，但是有些人就会利用这个点子去整人，设计师必须就是这样的人。

因此我刚才所说的“会生活”，具体操作如下：不要天天钻技术、忙工作，要去休息，去娱乐。加大社交范围，看电影，KTV，陪老婆逛街，陪孩子去动物园，野营，参加各种活动··········，而且也别打着什么用户研究的名义，一定要真心的投入。当然，工作的时候也一样，设计师考虑方案或沟通产品的时候应该去咖啡馆，而不是办公室。要多玩“头脑风暴”，注意，设计师的头脑风暴是游戏不是会议，是娱乐不是工作，只有娱乐效应才可能产生逆向思维，在设计上我们叫点子或火花。

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

关键字：产品经理, 体验, 产品设计, 设计

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！