首页

B端体验设计-与复杂共处

鹤鹤

“复杂是世界的一部分,但它不应该令人困惑,好的设计帮我们驯服复杂,不是让事物变简单(如果复杂是符合需求的),而是去管理复杂”--唐纳德·A·诺曼



与复杂共处,这是一个有趣的话题。在这个奉行“少即是多”的时代,设计师对于复杂噤若寒蝉,认为优秀的设计应该简洁明了,若无必要,勿增实体,而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思,甚至试图通过削弱功能的方式来降低产品的复杂度,得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗?从心理学的角度来看,复杂的事物往往功能强大,而功能强大意味着更好的服务与更高的价值,用户也更愿意为之付费。当我们购买商品时,我们会仔细斟酌,拿着产品的功能列表反复比对,这个时候我们忘记了产品复杂与否,更多考虑的是功能是否满足自身需求。


对于大部分B端产品而言,复杂或许难以避免,复杂是出于实实在在的业务的需要,而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂,是因为产品需要完成复杂的工作任务,界面内承载的信息内容较多,在视觉上会带给用户压力,直观感受上觉得产品很复杂。但是这些信息又都是必需的,如果缺少这些必要的信息,会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱,密密麻麻的按钮如此复杂,但是每一个按钮都有着相应的功能,不可或缺。既然复杂难以避免,那么作为设计师我们不应该被动接受或盲目拒绝复杂,我们应该学会如何与复杂共处,去尝试驯服复杂、管理复杂。


理性看待复杂


相信很多设计师和我一样,经历过现代主义浪潮的洗礼,对于简约的设计有着或多或少的偏好。因为这种偏好,在自己进行设计时也希望能够选用这种风格,在设计时刻意的去追求界面简约,却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看,复杂的事物更容易理解,简单的事物反倒令人困惑,一味的追求简单反而会让事物变得复杂。


B端产品的目标是降本提效,追求简约的设计思想在B端产品的设计中并没有那么适用,为了提升用户的操作效率,我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度,但是相较于产品视觉界面会因此变得复杂,产品的易用性和操作效率对于B端产品而言会更为重要。


与复杂共处的前提是能够理性地看待复杂,复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态,它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定,就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单,因为两者的功能需求不是一个层面的,所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。


分清复杂与困惑


我们之所以对复杂怀有畏惧,其实更多的是畏惧令人困惑的复杂,复杂与困惑有着本质的区别,理解他们之间的区别很有必要,复杂描述的是事物的状态,而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑,理解这些规则和逻辑,能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑,用户难以理解产品的运转机制,需要花费很大力气才能完成有效操作,容易让用户产生挫败感。产品可以是复杂的,但是不应该让用户困惑。


在很多复杂的传统线下业务数字化转型的过程中,为了让产品易于使用,设计师需要深入到一线,去了解真实用户在线下业务场景中是如何处理日常任务的,在流程线上化过程中也需要遵循这样的业务流程,这样能够让用户更快上手,而如果我们在设计过程中不去参考用户在线下的操作场景,按照自己的想法去意测用户的行为,这样设计出的产品背离了用户的心理模型,缺乏内在逻辑,会让用户感到混乱困惑,陷入深深的麻烦。


基于产品本身功能需要,我们可能无法很主观的去降低产品的复杂度,这就需要我们在进行产品设计时花费更多的心思,通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰,不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计,用户在编辑器内完成一系列针对表单的编辑、配置操作,然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列,这种方式结构简单,但是扩展性较差,过多的栏目也容易让用户陷入困惑,不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构,在步骤导航上给出完成表单编辑配置的主要步骤,在大的步骤下用侧栏导航承载小的编辑项,结构清晰,且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致,视觉观感上甚至方案B更为复杂,但是方案B在这里可能是更合适的方案,因为方案B在配置流程的指引上更为清晰,也更贴近用户心理模型,即使没有使用过在线表单的用户也能理解产品流程,因而用户能够更容易的完成表单配置并发布表单。



功能决定产品的复杂程度


我们在使用产品时,都会有一个大概的心理预期,会认为某一类型的产品会较为复杂,某一类型的产品会相对简单。为什么我们会有这样的认知呢?是因为我们知道这些产品大概有哪些功能,而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定,而不是依照设计师的自我喜好,像如淘宝、京东这类的购物网站、拥有着很多的栏目,所以淘宝、京东的界面相对来说较为复杂;而像百度这样的搜索引擎功能相对来说比较简单,所以界面设计相对简单干净。


我们可以容许一个功能强大的产品设计得相对复杂,但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计,即不过度设计,也不执着于追求简约,而是基于需求恰到好处的进行设计。


复杂产品也能有好的体验


复杂的产品会有好的用户体验吗?答案是肯定的,用户体验的好坏与产品是复杂还是简单并没有直接的关系,很多时候复杂的产品也能带给我们良好的用户体验,在互联网产品中,我们可以看到很多复杂的产品,这些复杂的软件产品,一点点的改变着我们的生活与工作方式,让我们生活与工作变得便捷与高效。


首先可以看看我们的国民级电商应用淘宝,乍看淘宝的界面,可能会觉得十分复杂,甚至会给人一种眼花缭乱的感觉,但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际,做社区团购的淘鲜达,专做拍卖的阿里拍卖等数十个板块,业务繁多,功能复杂,但这几乎很难改变,因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看,虽然淘宝的业务和功能繁多,却有着清晰的布局、信息对齐、内容组织,产品尽管复杂,但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿,贴近用户的心理模型,用户容易了解产品功能、容易与之交互,整体上有着良好的用户体验。



又如我一直在使用的一款笔记软件Notion,Notion相对于印象笔记、有道云笔记而言更为复杂,需要花费一定的时间成本学习才能够从容上手使用,但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前,甚至都不会想到会出现在一款笔记产品里面,如甘特图,多维表格等,这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式,让笔记能够自由拖拽,拥有了极强的自由度,用户可以很自由的用各种各样的形式来记笔记,要是你肯再花一些心思,你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识,打造个人专属知识库。将我们习以为常的线性笔记思维,转变成纵向思维,甚至是网格状思维。Notion无疑是复杂的,但是这样做是为了给用户提供的强大功能和极高的自由度,这些功能恰恰也切合了用户的需求,创造了一种全新的笔记体验,带给用户愉悦的使用感受。



过度简化的潜在风险


简单是产品追求的最终形态吗?其实未必,很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计,不可避免的就需要隐藏一些信息或者拉长操作路径,这是一个权衡的过程,我们在做设计时也会经常面临这样的抉择,是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要,人们对于美的事物往往更有耐心,也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言,准确的传达信息,帮助用户进行判断,频繁使用的功能设计得更高效便捷,这些点能带给用户更实际价值,也是我们在设计产品时应该优先考虑的点。



特别是在一些专业性的软件中,如果我们为了追求简约而弱化或者省略掉一些关键信息,还有可能会导致用户错误操作的出现,造成严重的后果。试想一下当你在使用软件编写一个计算字段时,软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例,导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用,为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。


如何与复杂共处


前面我们了解了关于复杂的定义,认识了复杂与困惑之间的区别,也明确了在B端产品中复杂或许难以避免,复杂是出于实实在在的业务的需要而非某位设计师的错误喜好,既然复杂无法避免,我们就应该学会与复杂共处,管理与驯服复杂。那么如何与复杂共处呢,有一些策略或许可以给予我们一些思路。


1.为产品注入规则


复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑,而困惑缺少这样的规则与逻辑,让人无法预测与揣摩,对应到软件产品的设计,一款成功的优秀的软件产品,应该是易学易用、能够满足用户预期,用户能够直观的理解产品的流程与主要功能,并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢?


这里可以看看我们团队正在使用的研发管理工具TAPD,TAPD是一款敏捷研发协作工具,凝聚了腾讯研发方法及敏捷实践精髓,其中敏捷开发的方法就是TAPD的内在规则与逻辑,有过敏捷开发经验,理解敏捷开发流程的的开发人员能够快速的上手使用TAPD,对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想,进而理解产品的功能与流程,因此虽然TAPD功能与页面结构相对复杂,但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径,实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处,将原本零散的功能点通过特定逻辑链接成操作流程,帮助用户更好地理解与使用产品。



相同的在我们公司自己的一个项目中我们也运用了同样的方法,在我们公司之前研发的一款crm产品中,为了给用户提供最佳的销售实践,帮助用户更快上手使用我们的产品,我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询,并依照硅谷蓝图的销售转化路径来构建我们的产品体系,确定产品功能,梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户,让用户能够更好地使用我们的产品,实现产品的最高价值,为中小企业销售团队赋能。


通过前面两个案例其实我们可以感受到,当一款复杂的产品有了内在的规则与逻辑以后,用户理解和使用我们的产品会变得更顺畅,用户不会迷失在茫茫的功能之中,通过理解规则与逻辑,用户能够对自己操作结果有一个大概的预期,而不是处于困惑状态,作为设计师的我们也可以将这种规则逻辑作为我们设计的引导,让我们的设计更为系统和有条理,让产品不再是一堆功能的堆叠,各自为战。


2. 贴近用户心理模型设计



复杂是用户的一种心理感受,用户觉得产品复杂除了产品本身结构信息复杂之外,也是因为产品在设计上没有贴合用户的心理预期,用户很难理解产品的流程与交互,所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念,实现模型、表现模型和心理模型,三个概念的释义如下:

实现模型:产品是怎样工作的
心里模型:用户认为产品是怎样工作的
表现模型:通过设计来让用户认为产品是怎样工作的


表现模型越接近心理模型,用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型,用户越难理解产品,产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制,很多B端产品在设计时更多的偏向于实现模型,用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致,使用过程中会遇到很多的阻碍,影响整体的使用体验。对于一款复杂的产品而言,我们需要让我们产品的表现模型更接近于用户的心理模型,这样用户能够更容易了解产品的功能,并与之交互。


大家使用电脑时有没有遇到过类似下图这样的电脑报错信息,里面是一堆的专业名词,看得人一头雾水。这时候我们能做的只有默默的打开百度,去了解弹窗里面讲的内容究竟是什么,了解后才明白原来这样,然后按照百度上操作步骤一通操作,侥幸解决了问题。但是当下次我们遇到相同问题时,可能还是不知道如何解决,无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰,用户不是专业的开发者,他们不了解也不需要了解产品背后的实现逻辑,这对用户而言是没有价值的,给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难,变相的是在人为的增加产品的复杂度,与复杂共处,我们需要学会贴近用户心理进行设计。



3.统一交互模式


复杂的产品往往功能、页面繁多,如果页面内的视觉元素以及交互各自为战,那么放大到整个产品就是一个灾难,不仅是产品给用户感官上不统一、整体性差,过多的交互模式也会增加用户的学习与记忆成本,用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑,对用户使用产品造成困扰。针对这个问题,现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互,一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题,通过模块化解决方案,也能降低冗余的生产成本,实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题,但实际上就算一个产品有了一个自己的组件库,依旧还会遇到体验上统一性问题,这是为什么呢?


在原子化设计理论中,粒子是构成页面的最小颗粒,粒子构成简单组件,简单组件到复杂组件,再到区块、页面。虽然用组件能去构建页面,但是还会遇到页面结构、交互不一致的问题,设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题,在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。



这里我们拿B端产品中常见的列表页来举例,纵观所有后台列表页面,抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区,在不同的业务场景下,对筛选器的需求也各不相同,简单的可能只需要使用标签选择就能够完成筛选,复杂的可能添加很多的筛选项甚至选项之间还有且或关系,我们需要根据实际的业务场景设计适合的筛选器,但是需要注意的是一个产品中用到的筛选器形式不应太多,我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。



B端后台产品中比较常见的还有表单,我们可以归纳出产品内可能会使用到的表单类型,然后定义出具体的框架结构与交互,在具体的设计过程中在根据实际情况选用不同的表单区块。


1.分组表单

一种常见的信息录入以及信息展示表单,这种形式是我们最长用。



2.分步表单

分布表单适用于信息录入项以及信息展示项过多,在一个页面内已经不能合理清晰的组织传递信息,或者表单内容的录入方式或者展示方式存在较大差异,不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。



3.组合表单

组合表单因其结构能够承载更多的信息,每一个栏目都可以承载一个独立的表单页,有效的管理信息。


4.弹窗表单

很多时候我们也会用弹窗来承载表单,好处是交互衔接流畅,不用跳页。



将产品中类似的区块做成最佳的交互模式范例,能够最大的程度的规范我们产品中的交互,这样才能真正的实现产品体验上的统一,化繁为简,让复杂的产品也能够调理清晰,上手简单容易。在面对复杂的系统级软件时,在统一组件样式的基础上还应该统一产品内的交互模式。



信息归纳突出重心


复杂的产品页面内信息往往都特别繁多,如果不做好信息归纳,用户将很难把握住重点内容,信息获取效率低下,十分影响用户的使用体验,所以信息的强弱的整理十分重要,那么什么样的信息是对用户而言重要的信息呢?


信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”,他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。


如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型,通过调研的来得用户模型是对于我们产品客户的抽象归纳,通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出,哪些内容相对不是那么重要可以弱化处理,通过对于页面内容强弱的划分,用户能够更快的获取到对自己有用的内容,尽管页面仍旧复杂,但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验,帮助用户高效的处理任务。


说在最后


复杂是产品的本来特性,本身不含褒贬,但是如果复杂不加以控制,让其发展为困惑与混乱,这对于一款产品而言绝对不是一件好事情,这样即使产品功能上很优秀,用户也无法长期忍受,一旦市场上出现替代产品,那么忍受已久的用户也将抛弃产品转向体验更好的新产品。


曾经我也是一个极简主义的追捧者,但是经历过越来越多的设计项目,我开始发现某些产品复杂性是必需的,将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂,而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素,让其在视觉界面上变得简洁干净,而是要让产品拥有内在规则、一致且能够被理解。



文章来源:站酷   作者:Yone杨

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


产品用户体验案例分析

纯纯

目录


1.百度网盘 :会员标识

2.当当:搜索记录隐藏

3.当当:分享动效 ➕ 一键制作朋友圈分享海报

4.抖音:点击复制 ID

5.飞书:效率工作—语言自动转化

6.美团:优惠卷新到提示

7.墨迹天气:一键登录(大部分应用已上线该功能,部分应用仍未上线)

8.起点读书:长按可进行互动

9.腾讯视频:亮度调节的动效设计

10.微博:点赞动效设计

11.知乎:删除搜索记录

12. QQ:可隐藏会话

13. QQ 音乐:搜索入口的听歌识曲

14. QQ 阅读:长按复制的放大设计


一、百度网盘:会员标识别


在开通会员后百度网盘会进行对于应用图标的更换,使得应用图标更加高级,在分享链接时也会加入会员分享的标识。


属于用户激励体系中的一个板块,增强用户的标识和身份。




二、当当搜索记录隐藏


搜索隐藏功能设定。


我们在使用各大应该的搜索功能时总会遇到过这样的场景,当你要某人或者在某种场景下需要进行搜索时,来不及删除自己的搜索记录出现社死的情况。


而当当的搜索隐藏就可以完美的解决这个问题,退一步讲我们可以思考一下为什么别的成熟型应用,没有采用这样的方式。大部分是没有这个功能,其余则是在搜索这一个功能上已经添加了其余用户体验的设计。所以在这一块就没法加入这个设计。




三、当当:分享动效 ➕ 一键制作朋友圈分享海报


在当当应用中点击分享进入页面后不同于传统的分享页面,而是把分享到微信和分享到朋友圈进行了动态设计。并且在分享到朋友圈的右上角加上了海报的标识。我们点击会自动跳转生成海报。


这样的设计可以更加吸引用户的眼球并且自动生成海报可以激发用户在朋友圈转发的次数。



动效展示



四、抖音:点击复制 ID


主页 ID 点击可进行复制  很多应用都有 ID 。但是当我们要进行 ID 搜索的时候,我们便需要一遍一遍的反复查看或者记住这个 ID 然后再进行搜索。


目前部分的应用也上线了类似的功能,让用户点击 ID 区域可进行复制。对于用户体验的提升有着很显著的效果。




五、飞书:效率工作语言自动转化


飞书属于一款协同办公类的应用


在飞书的设置用有语音直接转换文字的说明,飞书本身便是一款协同办公类的产品。此产品效率便是产品关键词之一,所以加入这样的设置可极大的提升用户的体验。




六、美团:优惠卷新到提示


有提示用户新到多少张优惠卷的提示


可以促进用户消费的同时能帮助和提醒用户去使用消费卷不仅提高了商家的销量还使得用户在消费中发现自己的优惠卷及时使用




七、墨迹天气:一键登录(大部分应用已上线该功能,部分应用仍然未上线)


一键登录


应用登陆中目前主流为(1.第三方登录,登陆之后需要再次绑定手机号。2.手机号注册登陆,登陆之后可选择是否绑定第三方。3.一键登录,登陆之后可以选择是否绑定第三方)在设计流程中,设计开发者需要尽可能的减少对流程的复杂化。


一键登录在为看来是最喜欢的一种登陆方式。导致现在如果需要各种注册绑定,除非必要的情况下,我会直接放弃这款应用。





八、起点读书:长按可以进行互动


长按页面可以框选当前的段落,并且出现互动选项。

 

增加用户和用户之间,用户和作者之间的互动。使得用户在读书的同时有着较强的参与感。




九、腾讯视频:亮度调节的动效设计


滑动可调节亮度

 

左边的小动效的设计加上右边的渐变进度条,使用户可以更加明确的知道自己所处于一个什么样的观看环境,并且加入了渐隐渐现的出场和入场。

 

用一个小巧的动效设计帮助用户确定自己的亮度属性,




动效展示




十、微博:点赞动效设计


点击点赞会出现彩色的波浪并且不断扩散的同时有小表情弹出。


增加趣味性和互动性。




动效展示




十一、知乎:删除搜索记录


清空时会在进行确认,再次点击全部删除方可删除。


在下方列表中可逐一删除,上面清空中不是点击后就全部清空。而是再次出现,起强调和确认的作用。


增加用户体验,帮助用户进行二次确认和防止用户误触。作为一款咨讯类应用用户的搜索记录也是比较重要的。




十二、QQ:可隐藏会话


前几天发现的一个神级功能(虽然我已经不用 QQ 进行社交了),当时我外甥和我讲述了这个功能他么00后戏称为养鱼神器。


在好友的设置中可隐藏会话,开启隐藏会话以后。此联系人发来的消息不会显示在联系人列表。需要自己手动去设置隐藏会话列表去寻找。


应用的功能更加多样化满足多种不同的需求。




十三、QQ 音乐:搜索入口的听歌识曲


在搜索入口加入了听歌识曲且进入界面后可进行听歌识曲和哼唱识别的切换


搜索歌曲界面的使用场景为:1.用户得知该歌曲的名称或者歌词进行搜索。2.用户听到了某一首很好听的歌曲想进行搜索。此时在场景二的情况下,正好可以进行听歌识曲。听歌识曲此功能在比较旧的版本属于主页中的一个模块,把听歌识曲放到搜索入口处更加符合用户场景。


对用户场景进行细致的研究,增加了用户体验。




十四、QQ 阅读:长按复制的放大设计


长按复制会有放大镜设计


当用户处于复制文案的场景下时,由于复制需要拖动,在拖动的过程中会按压住自己所处于的复制内容位置。所以在用户进行复制时加入放大镜的设计会使得用户清楚的明白自己复制到哪里,不需要后续用户在进行删减。


极大的加强了此场景下的用户体验


动效展示


文章来源:站酷    作者:张阳光Designer

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


交互设计之探索GUI和VUI

纯纯

一、GUI和VUI的定义:


1.1GUI


GUI(Graphical UserInterface)图形界面,市面上最常见的交互方式。点触,滑动,作为主要输入方式。图像显示作为主要输出方式。




1.2VUI


VUI(Voice User Interface)语音界面,常见没有屏幕的智能音箱/耳机,靠语言输入和交流,如我们常见的小艾同学,天猫精灵等。





二、GUI和VUI的发展历程:


2.1GUI的发展历程


1973年第一个可视化操作的Alto电脑在施乐帕洛阿尔托研究中心(Xerox PARC)完成。Alto是第一个把计算机所有元素结合到一起的图形界面操作系统。它使用3键鼠标、位运算显示器、图形窗口、以太网络连接。

1981年施乐公司推出了Alto的继承者Star,Alto曾首次使用了窗口设计。

1983年苹果电脑公司推出Apple Lisa个人电脑,是全球第一款搭载图形用户界面(GUI)的个人电脑。

1984年苹果电脑公司推出Macintosh。

1986年首款用于Unix的窗口系统X Window System发布。

1988年IBM发布OS/2 1.10标准版演示管理器(Presentation Manager),这是第一种支持Intel计算机的稳定的图形界面。

1992年微软公司发布Windows 3.1,增加了多媒体支持。

1995年微软的Windows 95发布,其窗口操作系统的外观基本定型。

1996年微软发布Microsoft Bob,此软件具有动画助手和有趣的图片。

1996年IBM发布OS/2 Warp 4,它的交互界面得到显著改善,至今仍有不少ATM机运行这样的系统。

1997年KDE和GNOME两大开源桌面项目启动。

1997年苹果电脑公司发布Mac OS 8,这个系统具有三维外观并提供了SpringLoaded Folder功能。

2000年苹果电脑公司推出Mac OS X系统的默认外观Aqua。

2001年微软发布Windows XP,实现了主题支持。

2003年Mac OS X v10.3提供了一键单击访问任何已打开窗口的功能。

2003年Sun公司的Java桌面系统为GNOME桌面添加了和Mac类似的效果。

2006年微软发布Windows Vista,对此前其视窗操作系统的外观作了较大的修改,实现了Aero功能。



2.2VUI的发展历程


20世纪90年代,诞生了第一个可行的、非特定的(每个人都可以对他说话)的语音识别系统,交互式语音应答(Interactive Voice Response,IVR)系统的出现代表了VUI的第一个重要时期。人通过电话线路进行交互并执行任务,如机票预订、银行转帐、业务查询等。


目前很多像siri、Google这类集成了视觉和语音信息的APP,以及Amazon Echo这类纯语音的设计产品,逐步发展并成为主流。随着语音识别技术、AI技术、互联网技术的发展,我们已经可以在手机设备中用语音处理很多事情,但还有很多事情目前无法通过语音完成,需要我们探索。




三、GUI和VUI的设计要领:


3.1GUI



        交互的多样性:


不同于PC机通过鼠标来点击,在触控设备上通过手指点按,由于手指的精确度相对于鼠标指针差很多,所以子啊移动页面设计当中的交互元素一定得辨识作用,手机并没有悬停操作所以图标如果特征不明显时一定要加文字识别,设计时也应注意图标和菜单元素的尺寸。


拖拽和移动是很相似的交互工作,被拖拽的元素始终跟随着紧贴屏幕的指尖


除了使用单指之外,还可以用两个手指放大,缩小图片,如果设计了一些新的多指交互一定要给用户提示和指导。


3.2VUI


3.3VUI的适用场景


智能家居

在智能家居领域VUI应用越来越广泛,相信在不久的将来我们一定能够享受到更多的VUI所带给我们的便利。


辅助驾驶

车载语音交互系统使得我们可以在开车的同时接听电话、听广播等。


企业应用

未来大型企业中将会多领域应用VUI,用于书写、记录等工作。


医疗教育

智能记录病例、管理病例的出入。


四、VUI的语言设计注意事项


过多的声音干扰,不但会增加用户的心智负担,将会引起用户感到厌烦,尤其是,语音在资讯的负荷量上又比单纯的声音来的更多,考量是否存在存在的必要性就放在格外重要。而言,可以寻找替代的方式,透过震动和灯光甚至状态变化来提示,减少使用者的认知负荷,并确保声音只会在特定的时间点出现,并提供使用者自行设定关闭声音的功能


除了声音本身的设计外,还要考虑整体环境的影响因素,可能周遭受非常的吵杂。换句话说,在KTV的包厢,吵杂的环境,会使用者无法听到消防警铃响,而容易造成危险事件的产生。也因为如此,消防警铃的声音频率设计就应该介于2kM到4kM,因为研究指出人类的耳朵对于这个范围的声音最敏感


从音量的角度来看,耳朵对不同频率的音量有不同的感知程度,有些声音听起来很响亮,有些则是很沉闷因人而异,但比较客观的量化体验指标就是分贝(decibel,dB) ,在尺度上超过70分贝以上,会让人产生忧虑不安,并引发各种症状,因此要尽量避免尺寸大小过大的设计, ,,降低主动的侵入性。基于这些因素总和来说,还要考量到用户和产品间的距离,与产品愈近,对于体积的需求量较大,反之为然


在声音体验设计(Amber Case,2018)一书指出,当警告或提示音出现的频率愈高,就应该设计成愈短,但不足就是,如果把声音设计成短而急促,从而使用者需要集中相反地,事件发生时间间隔长且久,则声音提示更需要明显且激烈的声音来提醒用户,例如手机铃声响时,需要告知用户

文章来源:站酷    作者:张阳光Designer

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

关于设计中的组件化思维

纯纯

组件化思维对于一个设计师来说十分重要,它能够帮助你更好的去进行产品的设计,那么组件化思维对于设计者都起到什么作用?

1.符合产品功能逻辑,组件化的设计理念能帮助设计符合产品功能逻辑。

 

2.有助于保持交互一致性,在一个项目里,选择日期应该是统一的交互方式,在整个产品中就应该只有一种存在形式。所以时间选择器就是一个组件,一个可以复用的组件,如果你没有组件化思维,很可能出现好几个不同的时间选择器,一会儿是流轮拨盘,一会儿是日历,一会儿又是下拉列表,这样的设计绝对是不能上线的。当然该统一的地方还有很多,比如:错误提示的形式,讲度条的交互方式,导航栏和按钮的样式。表单,下拉菜单等等。

 

3.减少开发工程师的工作量,开发时使用不同的技术,了解不同技术之间的差异,设计时按照每个开发软件的组件来做设计极大的减少了开发的时间.

 

4.保持视觉风格的统一,在同个项目不同页面按钮等组件的样式上应该保持统一。

 

5.便于多设计师协作组件化设计是大型设计项目的必要条件,多人协作完成项目时,应当保持视觉统一规范,组件化建立就起到了至关重要的作用。

 

6.便于修改设计,设计总是需要修改优化的,只需要根据需求调整需要调整组件即可。

 

针对各种组件的开发软件做了以下介绍,欢迎在评论区进行补充与探讨!

 

echarts
 帮助各行业进数据处理以及分析,一键生成饼图,柱状图,甘特图,折线图等多种图表;简道云的图表分析

 

各种图示效果样式案例可供设计者参考

 

https://echarts.apache.org/examples/zh/index.html#chart-type-line

 


Ant Design

ant通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验,规范设计的设计思维,有丰富的设计资源与组件,对设计样式的表达起到非常好的参考作用

https://ant.design/index-cn

 

Element

Ant Design稍加相似,可供设计者作为辅助参考

 

https://element.eleme.cn/#/zh-CN/guide/design

 

 

另外其它的开发工具:

React是用于构建用户界面的JavaScript库,起源于Facebook的内部项目

 

Hook 可以中文译为“挂钩”或者“钩子”,逆向开发中改变程序运行的一种技术,在逆向开发中是指改变程序运行流程的技术,通过Hook在别人的程序中。需要了解其Hook原理,这样就能够对恶意代码攻击进行有效的防护

 

 

Umi 是一个可插拔的企业级 react 应用框架。 插件化 umi 的整个生命周期都是插件化的,甚至其内部实现就是由大量插件组成

 

 可扩展 Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直

 

Vue 有两大特点:响应式编程、组件化。其优势为:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。它的第三方ui库很多节省开发时间。https://cn.vuejs.org/v2/guide/index.html

 

 

vue是我们的常用框架,大多数客户的选择。ant➕react➕hook➕umi,中后台这个也比较多,最近的项web端的基本上是这两种选型。

其它常设计有wpf/qt/mfc/开发,在c++c#下运行的客户端程序

 

 

其它例如:

Bootstrap Twitter推出的一个用于前端开发的开源工具包。是基于 HTMLCSSJAVASCRIPT ,它简洁灵活,使得 Web 开发更加快捷

https://getbootstrap.com/docs/5.1/examples/


developermaterial汇聚了ios、安卓组件框架及人机交互指南,相关链接:

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

https://developer.android.google.cn/docs/quality-guidelines/core-app-quality

https://material.io/components?platform=android

 

蓝蓝设计——    作者:纯纯

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

交互设计九大定律

纯纯


先举个例子来理解一下:我要点击手机上的确认按钮所需要的时间,和 手与按钮的距离(D)   按钮的大小(S)有关。  当距离越长,所需要的时间越长。当按钮越大,所需要的时间越短。

undefined


自我理解:我们将日常看到的界面元素进行去色彩和去信息化,把这些控件/元素等都变成灰色色块,其实也就变成了最简单的原型图。这些灰色色块抛开了视觉上的属性,其实有两大最基本的属性,即色块的位置和大小。  菲兹定律告诉我们,要通过控制色块或者说界面元素的    大小和位置(绝对距离和相对距离)   来进行界面布局,进而控制交互时间,达到我们设计或者业务层面的目的。

     

a  合理的自身大小

这里是说合理的大小。一般来讲越大用户越容易到达,但是屏幕的大小是一定的,某一按钮/目标越大就会降低其他按钮/目标的大小。所以大小是相对制衡的,要根据具体情景和需求制定合理的大小(包括肉眼大小和实际热区大小)。但是关于手指点击的最小热区有规定是44x44px,一般的图形的热区大小都要高于这个大小,才能便于点击。其他大小要根据功能需求进行制定。

undefinedundefined


b 控制合理的相对距离

相对距离指的是界面内部各个元素与控件之间的距离。一般通过研究 整个流程 的交互动作,相互关联的操作元素/操作手势 距离会相对比较近,这样能有效减少操作的时间。

undefined

undefined



c 特殊的绝对位置:屏幕边界

屏幕边界是可以确定的(鼠标向某一方向一直移动终会停留在屏幕边界),但是屏幕中央确是较难确定的(四个方向鼠标均能延展出去)。一些重要和主要的操作放在屏幕的边界,可以方便用户快速到达,也是菲茨定律的普遍应用。

undefinedundefined



d  反向设计:增加时间来达成业务目标

业务目标有时候是与用户目的是相违背的,也需要根据具体场景来判断菲茨定律的使用走向。在特殊情境下也会通过距离和自身大小来反向增加使用时间来完成目的。

undefined

undefinedundefined


自我理解:席克定律也在研究交互时间。我们需要通过控制席克定律所总结的两大因素:数目和复杂程度 进而去左右界面布局的形式,从而缩短交互时间,达成良好的体验。


a 精简选择的余地

选择增加也就意味着事情可以发展的方向更加多元化,用户就需要权衡事情该往哪个方向发展,而这就需要时间。不要让你的用户思考太多,所以一般给出的选项在满足需求的情况下要尽可能的少。(这里注意:一般情况下要少但也不能太少,强迫用户也是不可取。)

undefined


undefinedundefined


b  减少事情的复杂程度

事情越复杂,越难处理。尽可能的将复杂的事件通过交互或者版式等手段进行简化,让用户觉得容易把握,而不是大量事物/流程/元素的堆砌。

undefined

undefined

undefined


undefined


undefined


自我理解:米勒定律对人的记忆数目进行了定量的研究,即 5-9 个是人脑接受起来比较合适的,多了就容易混乱。


a 控制选项的数量

同一类型或者同一层级的元素出现,数目一般控制在5-9个。

undefined


b 将多信息进行分段处理,便于理解记忆

面对有大量信息的时候(数字/文字/段落)将其分割到5-9个等大脑容易记住的数量。

undefined

undefined


c 顺应时代的取舍

看到了有一些设计并没有按照米勒定律去执行,因为随着时代的发展,有一些定律并不是万能适用的。定律不可照搬,要根据具体情境去做取舍,以最终效果为导向。

undefined


undefined


自我理解:和四大基本原则的亲密性原则类似,即在界面布局的时候性质相同的事物要相接近,不相同的要远离,这样更符合人们的既定认知。


a 将相近的功能的分为一组

在面临很多复杂功能时,简单的堆砌显得啰嗦,需求又不能随意删减。这时候就可以将相类似的功能放在同一个组别里面进行收纳整理,这与席克定律也相接近。

undefined


b 按照事物性质和关联程度严格把握布局的间距

这里与视觉设计也有很多重叠,即落实到页面的高保真的细节。保证内容想接近的元素间距要小,内容有区分的间距要大。

undefined

undefined

undefined


自我理解:任何事物都有其复杂性,不可避免。某些事物一旦失去其复杂性,其作用本质就可能失去效果。不要抱怨某些流程和工作,他们的复杂性是其发挥作用所必然带来的。所以才需要你来优化和简化。

a 把复杂性降到最低点

事物的复杂性是固定,但是要思考你所面对的是最简程度的复杂性么。首先优化内部系统的整个流程和不必要的步骤能够有效降低系统本身的复杂性。

undefined


b 把复杂性进行转移 组合 隐藏

再把复杂性降低到最低程度之后,事物/流程仍然表现出一定复杂性时。就要考虑造成复杂的元素是什么,是否要将造成复杂的元素进行收纳组合,甚至隐藏。

undefined

undefined


自我理解:在相同前提下我们选择最简单有效的。单纯的炫技是可耻的。


a 给用户清晰的引导

想清楚这张界面的主要目的是什么,顺着这个目标去引导用户,其他元素的视觉层级要让步,来让用户抓住重点。


b 少即是多

少代表流程/步骤/界面元素的减少,多意味着用户量的增加 体验感的增强。

undefined


c 衡量产品功能的取舍

产品在功能迭代改版上,会出现大量不同的声音和方向。但功能不是越多越好,用户的时间是确定的,在某一功能上消耗的时间长,在其他功能上就短了。奥卡姆剃刀就要求我们找到主功能点,其他功能点要做出让步妥协甚至砍掉。



自我理解:关于防错定律和我的上一篇文章入门(一)的放错和容错原则基本近似,只是分类的更细致一些,分解到了操作的前中后阶段来防止错误。上一篇有更多解释。


a  操作前  禁止操作或者预告结果

有一些功能在你操作之前就禁止操作,避免了错误的发生。或者通过告知操作之后会产生的不良后果

undefined


b 操作中 提醒用户

在操作过程中,进行错误提醒,有效避免错误的进行


c 操作后给用户弥补错误的机会

用户在使用app的过程进入错误的路线,需要给用户弥补的机会




自我理解:这一点主要体现在产品设计上,通过对未完成任务的提醒,来去博得用户的注意力,进而达到商业目的。


a 倒计时/读条等交互反馈

倒计时会给人一种紧促感,逼迫用户去注意,无形之中给用户规定了任务,这个任务也就是咋们的业务目标。倒计时 读条等交互方式也应该谨慎恰当使用,因为不是每一个任务场景都需要给用户紧迫感。

undefined


b 定向反馈提醒

这一点也是利用未完成任务的相关信息反馈达到让用户去完成任务的业务目的。

undefined



自我理解:在上一篇一致性原则里面讲到了和竞品保持一致/和迭代版本保持一致,其实是我拓展的。这一定律是明确指出了一致的根本原因。在产品设计的时候,用户的心理就是我希望你的使用方式/操作和主流一致,超出预期的就会有人群不接受,就会有用户流失。


a 能不创新就不创新

创新意味着改变,改变的不仅仅是你的界面还有用户习惯和长久以来的认知模型。破坏习惯重建习惯是有很大风险的。

undefined

undefined


其实能看到很多Dribble页面很有特点,也不是完全没有落地性,但是实际国内产品并没有看到这样的设计,原因就是不符合雅各布定律。


b 好的的产品都是创新的 不同的

这一点好像和上一点有点相悖。但是其实也不违背,有很多分寸的拿捏往往不是理论能完全决定的。微信后来居上绝不是因为照搬qq,如果新的创新带来的优势能够弥补不相同所带来的不足,也是可以尝试的。

undefined


文章来源:站酷    作者:花城丶

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



交互设计:如何做到惊喜?

纯纯

保持好奇,巧妙融合,追求卓越,自然而然

一家之言,未必全面,甚至未必正确。欢迎交流探讨。


01
交互设计的惊喜,是什么?

之前的文章,有简单定义过交互设计的“惊喜”,即为:超出用户预期,并让用户开心。

具体而言有两类,分别是:小惊喜、大惊喜。

1 小惊喜

所谓小惊喜,是指一些颇具趣味性或人文属性的交互设计小细节。


先说趣味性。常见的有两类,第一类是比较好玩的动效,第二类是一些小功能。第二类有时也会包含第一类。

动效这块,大家比较熟悉的,有 iPhone 上删除应用前图标的抖动,仿佛是吓的发抖,也可能是在摇头求饶;还有移动端登录 B 站、输入密码时,动画人物的捂眼捂脸动作。

(B 站登录页面)

小功能这块,也可以分成两类。一类是隐藏的小功能,一类是有趣的小功能


很多隐藏功能,头几次用的时候,多少会有一些惊喜之感。

比如在订阅号消息列表页,某个公众号你已经几个月没看过,对它失去了兴趣和信任。这时,尝试长按这个公众号的头像或名称,会呼出一个包含“删除消息”和“取关”功能的弹窗。

(订阅号消息列表)

还有些隐藏功能,既能让用户觉得惊喜和方便,又能引发用户思考。这种思考,可能会让用户感叹设计之妙,也可能也会给用户一种猜对谜语的欣喜之感。

比如用墨刀的时候,尝试按数字键 1,会呼出“内置组件”这个使用频率非常高的功能,会让人觉得墨刀很聪明。

如果再仔细看一下,会发现,“内置组件”的缩略图标,和其他 4 个诸如“我的组件”、“图标”等功能的缩略图标,并成一列。这 5 个缩略图标的排列顺序(上到下),和它们快捷键("、"键和数字键1、2、3、4)的排列顺序(左到右),是完全一致的。不得不说,这是一个简单又巧妙的设计。


再比如朋友圈里,某个不熟的好友每天都发集赞的小广告,搞的我们不胜其烦。长按其头像,会呼出设置权限(屏蔽等)的功能。

有意思的是,长按好友名字,则不会呼出这个功能。要知道点击头像或名字是都能进入好友主页的;另外刚才那个例子,长按公众号头像或名字,也都能呼出取关的弹窗。

个人的理解,生活中,我们用力长按一个人,通常是表达强烈不满,比如打架时。比起长按名字,长按头像更像是长按真人,所以也更能表达我们的不满。


说完隐藏的小功能,再说下有趣的小功能。比如微信聊天里的扔骰子、石头剪刀布,微信给朋友发生日快乐后漫天飘落的蛋糕,拍照软件里的贴纸,等等。

最后说下带有人文属性的交互设计小细节。常见的有如下类型:帮助弱势、关照情绪、表达情感、保护隐私。


帮助弱势这块,比如 iPhone 的辅助功能,里面有针对视力障碍的放大镜功能、有针对不识字群体的旁白功能。

关照情绪这块,很重要的一点,就是避免引起用户的负面情绪。比如微信的删好友是单方面删除,被删时我们很难察觉到,而且微信也不会通知我们。个人觉得,微信之所以不通知我们,其中一点,就是不给我们添堵。类似的还有,微信消息没有“已读”功能,这就大大减轻了接收者的回复压力。

表达情感这块,比较为人所知的例子,5 月 20 号这天,微信红包的限额,从 200 元升到了 520 元。还有一个例子,在微信聊天里发一个“ohh”,长按并点翻译,结果也是一个惊喜。

保护隐私这块,比如借助 iPhone 的“引导式访问”功能,可以让小朋友只能访问你的某个视频应用来看动画片。再比如别人用你电脑的时候,如果你不想让对方看到你的微信,就可以通过手机微信来锁定或退出电脑版微信。

2 大惊喜

所谓大惊喜,是指那些系统性大创新,并且能够引领潮流、代表未来的交互设计。通常而言,这些大惊喜,最开始给用户的感觉,就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone,带来了当时的大屏幕:3.5 寸屏幕,以及纯触摸屏,和极为灵敏的触控体验。

2011 年,Siri 同 iPhone 4S 一起问世,为我们带来了语音交互。如今,在 100 元就能买到品牌类智能音响的情况下,依靠语音交互的智能音响也在慢慢走入寻常百姓家。

也许后乔布斯时代的 iPhone 创新不如以前,但不可否认的是,时至今日,iPhone 依然在引领潮流,在给我们大惊喜。比如这几年流行的手机无线充电和以 AirPods 为代表的极简的无线耳机。

以上是比较广为人知的交互设计,还有一些不太为人所知的设计。比如在家里网购一条床单,但是不知道床的尺寸,家里又没有尺子。这时,打开 iPhone 里的测距仪这款 App,就可以量出床的尺寸,会不会觉得有点酷。

(测距仪 App)

微信在引领潮流方面也有一些建树,比如极大的普及了二维码和扫一扫。小程序作为一种体验接近原生 App、同时又不用下载的产品,也正在引领新一轮的潮流。

还有一个比较酷的功能,就是以图搜图。笔者最早用过百度和谷歌的相关功能,主要是在电脑上搜索相似的图片,使用频率极低。

假设一个场景,比如在路上看到一个陌生人的外套很好看,但又不好意思上前问,就可以拿起手机,利用淘宝的拍立淘功能,拍张照就能马上看到相同或相似的商品。

如果淘宝上没有搜到类似商品,还可以用微信的扫一扫识物。和拍立淘相比,区别之处有两点。第一,不用拍,直接能识别,不过通常得等 1-3 秒;第二,识物结果里面,除了商品,可能还会有百科词条和资讯。


02
交互设计:如何做到惊喜?

个人觉得,有 4 个要点:既要有好奇心,又要有卓越心;既要天马行空,又要保持自然。

听起来可能有点乱,且听笔者一一道来。


1 保持好奇心

笔者观察身边读小学的小孩,发现,当大人聊天时,特别是谈正事时,小孩特别喜欢坐在旁边听,而且听的很认真。小孩有时也会说两句,或是问问题,或是发表自己的看法。

看得出来,小孩对成年人的世界,怀有极大的好奇心。实际上,不止于成年人的世界,小孩对周遭世界都有比较强烈的好奇心。

整体而言,成年人对周遭世界的好奇心,远不如小孩。我们互联网从业者也不例外。

好奇心和交互设计,有什么关系?

交互设计,某种程度上,也是一种创作。好的创作,一定来自生活。这就需要我们去观察生活。

观察生活,非常重要的一点,就是好奇心,对周遭人、事、物要有足够的好奇心。

比如上文提到的例子,在 iPhone 上删除应用前,应用图标会抖。这种抖是一种趣味隐喻,既可以理解成吓的发抖,也可以理解成摇头求生。如果对生活没有足够的好奇心,是很难留意到这种生活细节,并把它们作为一种隐喻运用到交互设计中的。

以上是关于好奇心,还有一种特质,也是在小孩身上表现突出,同时也和本文主题有关,那就是:童趣。

还是上文的例子,在 B 站 App 上输入登录密码时,动画人物会捂眼睛。这个设计,可能不会打动所有用户,但至少一部分用户会觉得比较有趣。如果我们内心没有一点童趣,可能也会觉得,这个设计,没啥意思。

玩是人的天性。对于比较好玩的交互设计,大部分人是比较容易产生共鸣的。实际上,据笔者观察,我们大部分从业者是有童趣的。我们比较缺的,是好奇心。

那么,怎样判断自己是否拥有足够的好奇心,其标志是什么?

个人观点,有两个标志。第一,是对与个人利益无关的生活小事的关注,远多于对个人利益本身的关注。第二,观察和思考,远多于评价和自大;追本和溯源,远多于偏见和傲慢。

为什么会提到个人利益?

因为,通常而言,个人利益,尤其是短期利益(比如少花时间设计和修改原型),往往会和用户体验存在一个此消彼长的关系。

如果过于关注个人利益,不仅很难照顾到用户体验,甚至会伤害用户体验。至于给用户带来惊喜,就更无从谈起了。

回到现实当中。在时代洪流面前,好奇心的两个标志,显得很难,该如何实现?

关键在于找到背后的源动力。这个源动力,在笔者看来,有两点,分别是:求知若渴、淡泊宁静。


求知若渴,可以源源不断的驱动我们去观察、去思考万事万物的规律和联系。

淡泊宁静,正如诸葛亮在《诫子书》中所说,“非淡泊无以明志,非宁静无以致远”。人的心力和精力终归是有限的,如果我们沉迷名利、物欲、享乐,就难有兴趣和精力去琢磨万事万物了。

所以,只要找回自己童年的那种求知若渴,同时修身养性到淡泊宁静,这份好奇心,就会回来。

2 巧妙融合

某种程度上,很多带给我们惊喜的交互设计,都是一种巧妙融合。

笔者把这种巧妙融合,初步分成了三类,分别是:简单融合、直接融合、委婉融合


简单融合,最常见的就是隐藏功能。把一个较为简单的操作动作,比如长按、双击、下拉、左滑等,和一个合适的功能,融合在一起。用电脑时我们常说的快捷键,也属于这一类。

通常而言,操作对应什么功能,讲究的是合适,并无固定章法束缚。比如在微信朋友圈,发表文字的功能可以靠长按(相机图标)唤起,设置权限的功能也可以靠长按(好友头像)唤起。所以,简单融合这块,可供我们发挥的空间很大。

另外,简单融合最常见的形式——隐藏功能,既实现了界面的简洁,又带来了一定惊喜。

简单融合,既简单,又实用。建议大家充分开发这一块。

直接融合,是指将生活中的趣味性,直接搬到软件中,搬到交互设计中。比如微信聊天中的扔骰子、石头剪刀布,以及漂流瓶、抽奖等。

这一类融合,有点像商场里的电玩城,虽然我们不会经常去玩,但确实比较好玩。

委婉融合,是指用明喻或隐喻的手法,将生活中微不足道的一些细节,移植到交互设计中。

这种移植,有时是直白的。比如 Mac 上打开应用时,其图标会在 dock 栏里有规律的弹跳,这会让我们联想到皮球的弹跳。

这种移植,有时是隐晦的。比如 iPhone 上删除应用前,其图标会抖。这种抖,是害怕还是求饶,任凭我们想象。

这种移植,有时是无声的。比如在朋友圈,要想呼出隐藏的设置权限功能,只能长按头像,长按名字则不行。这个设计,不乏想象空间。如果不尝试长按名字,则不会发现这个细节。

委婉融合,有时会带一些趣味性。更为重要的是,它能够引发我们的思考和想象,所以是一种很出彩的融合。这种融合,也会赋予交互设计,一种禅的味道。

整体而言,笔者非常推荐委婉融合。

3 追求卓越

如果目标是小惊喜,则保持好奇心、并做到巧妙融合,基本足矣。

如果目标是大惊喜,则需要雄心壮志,需要舍我其谁,需要追求卓越。

日常工作中,可能会有这样的对话。“这个动效/功能,实现不了”。

大惊喜里的几个例子,比如初代 iPhone 的触控体验,iPhone 里的测距仪,微信的扫一扫识物。这种设计,意味着要修一条最好的长城,背后往往有很多技术难题要攻克,有很多脏活累活要做。

如果团队文化就是做出最优秀的交互设计,那么,“实现不了”这句话,估计就听不到了。取而代之的,可能是:“还在研究中”,“下个大版本能上”。

4 自然而然

提到惊喜,还有一款值得研究和学习的产品,那就是锤子手机的 Smartisan OS。

个人观点,在小惊喜方面,Smartisan OS 颇有建树。在大惊喜方面,Smartisan OS 也进行了一些值得学习的探索。

先说小惊喜,比如华丽而细腻的桌面翻页动画,比如四指横划桌面可以切换桌面背景。还有一些贴心的小功能,比如静音可以设置时间,比如方便的长截屏。

(静音可设置时间)

(长截屏)

再说大惊喜。2016 年 10 月发布的一步和大爆炸,是比较大比较系统的功能,在当时也很新。锤子公司也一直有宣传这两个功能。所以相对而言,这两个功能是 Smartisan OS 的大惊喜。

笔者的备用机是锤子手机,身边也有朋友在用锤子手机。以一步为例,这个功能,笔者体验过很多次。但平常很少用,身边朋友的情况也类似。

(一步)

根据使用情况和主观感受,个人觉得,一步这个大惊喜,还存在进步空间,主要有两个方面。

第一,宏观层面。一步作为新生事物,好比一颗新种子。种子破土而出时,是一颗嫩芽,而不是一棵大树。新生的一步功能繁多,犹如一棵破土而出的大树,一方面有违自然规律,另一面因为功能繁多,很多用户无法一下子看懂,看不懂可能就不想用了。

第二,微观层面。一步这棵新大树,结了很多不同的果子,比如拖拽图片到其他应用、切换后台应用、展示最近图片/文件等。这些果子,是用户真正需要的吗?这个是要存疑的。

比如拖拽图片到朋友圈就能发朋友圈这个设计。通常而言,我们发到朋友圈的图片都是精挑细选的,会占用一定量的时间,比如旅游或聚会结束后发的照片。一步解决的是效率问题。发朋友圈的时候,少点几下这种效率问题,优先级是比较靠后的,我们没那么在乎。

还有拖拽图片/文件这个交互动作,大家通常在电脑上用的比较多,在手机上是没有这个习惯的,实际上应用场景也少。在手机上,大家一般只习惯拖拽应用图标。

还有切换后台应用这块,大家第一个想到的,一定是系统自带的,已经用惯了。而且唤起速度比一步快,点击面积也比一步大。

总的来说,微观层面上,比较缺让大家能马上想到一步的功能点。

最后,总结一下。对于领先时代、引领潮流的交互设计,需要做到自然。

具体而言,就是,大惊喜是一种系统性的大功能,好比一棵大树。这棵大树,最好有一个从种子到果子的生长过程,这样最自然,生命力也会最旺盛。

因为,从破土而出的嫩芽阶段,就可以通过用户反馈和数据来检验,这种嫩芽,是不是真的对用户有价值。如果价值不大或没有价值,还可以再调整。如果长成大树结满果子,再去调整,就很难了。


结语

交互设计小细节,如果有一定的趣味性或人文属性,则是小惊喜。

系统性工程的交互设计,如果最初感觉很酷,而且能引领潮流、代表未来,则是大惊喜。

始终保持孩童身上那种非功利的好奇心,用心观察并思考生活中的小事;

将生活小事和交互设计巧妙融合起来;

以上两点,可以帮我们做出小惊喜类的交互设计。

追求卓越,独立思考,做最酷最好的交互设计;

酷是结果也好,是目标也好,都不是最重要的。最重要的是,避免刻意和心切。酝酿大惊喜,犹如培养一个新生的孩子,需要投入极大耐心和精力,需要让孩子自然成长。没有家长会教半岁的孩子唱歌、把 3 岁的孩子送到高中念书。

再加上以上两点,可以帮我们做出大惊喜类的交互设计。

最后,用爱因斯坦的一句话来共勉。

想象力比知识更重要。

文章来源:站酷    作者:SnowDesign
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


交互设计之尼尔森的十大可用性原则

纯纯

系统应该在合适的时间内通过适当的反馈,始终让用户了解正在发生的事情——尼尔森


自我理解:用户无论在界面上做什么,都应该及时告知他发生了什么或者进展到什么程度。可以理解为人与人的沟通,界面需要及时告诉我们做了什么,现在是什么情况。


a.  这种告知应该是及时的。

加载任务在互联网中是最常见的,在加载过程中应当及时传达加载过程,减少用户的心理等待时间。在外部加载总时间无法优化的时候,使用何种方式能有更好的用户体验是设计时需要考虑的。

undefined

undefined

undefined


b.  应当告知用户你在哪里

你的界面需要引导用户来操作,即作为用户应该清楚的明白我在什么位置,我下一步可以去做什么操作。

现在app的很多设计基础包括顶部的导航分栏和底部的tab bar都是为了告诉用户他在哪里。

在做一些概念设计时候,如果单纯是为了更好的视觉效果,就对这些基础分栏进行大刀阔斧的设计,最终导致了好看是好看,可是用户都不知道这页面是干什么的结果,很明显是违背了最基本的交互原则 状态可见原则。

undefined


c.  应当告知用户事情怎么样了

用户在你的界面是要做什么事情,这是你在设计之前应该思考的问题。

如何把用户要做的这件事情更好的呈现给用户,反馈给用户以及有哪些信息需要反馈给用户都是你要从交互的角度思考的,这包括过去发生的信息和即将发生的信息,也包括正向反馈和负向反馈。(这种操作是否成功了?这种操作进展到什么程度了?如果这样操作会有什么后果?点击之后会达到什么页面?这里是否可以点击?)


很多概念性的设计很酷,从交互的角度上来看也是因为界面对信息进行了很好的反馈,比如下面的设计就是对登山的信息进行了很直观的反馈。(来自设计设计师anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept


undefined


undefined


自我理解:不同的人生活在不同的环境里面,不同的界面也有不同的外部环境。尽量保证界面在自己产品定义的风格里面,如果有机会还原真实世界的状态也很好。


a.  根据用户制定产品语言

在制定产品语言时,要了解产品的用户人群,使用相对应的用户群体所熟悉的文字语言 图形语言  板式结构  配色方法。要让我们的用户觉得这个产品很符合自己,而不是让一个老大爷去滑滑梯的感觉。一般来讲即便是同一产品,在国内外的产品语言也是有所不同的。

a. 模拟真实环境

产品在一些展示上模仿现实世界的样子,可以让用户快速接受,并感受到真实易懂。不仅仅局限于静态外观的模仿,还包括模拟真实物品的动态效果 声音等 都能给用户良好的使用体验

很多逼真的动效也是来自真实世界的映照。比如下面的可乐瓶的晃动就和真实世界很接近,让用户有很强的代入感。(作品来自设计师dannniel 原地址:https://dribbble.com/shots/6351526-Select-Drink-Animation

自我理解:为了不让用户进入一个错误的场景或者结果,对于一些特殊操作应该给予撤回重做,让用户能够充分的确定接下来的行为。

a.  返回到原始状态

可以理解为悔棋,即已经发生的行为返回到原始的页面状态,这个条件的设置也应该有一些条件的限制,不能一直无限返回。





自我理解:君子常常言行一致,好的产品也是一样。保持为一个统一的整体,包括产品内部和产品外部,也包括线上和线下。


a.  与竞品保持一致

很多人讲现在的同一类产品的同质化现象严重,其背后也是有一定原因的。相同或相似产品的用户习惯保持一致,即意味着用户需要更少的时间去学习甚至不需要学习。从产品设计上讲,用户使用越方便易用,产品设计的越成功。和相关主流竞品做出比较大差异化设计时候,虽然摆脱了同质化的问题,但是很多常规操作却需要用户重新学习,这样带来的后果很有可能就是用户流失。所以,没有充分的理由,请与竞品保持一致。



b.  请建立一套完整的规范

一套完整的规范包括组件 色彩 间距  版块结构 等。规范可以让你的产品一致性更强,你要让用户能够对你的产品产生一定的规范性印象,当他看到一张页面就能联想到这是什么产品。

undefined


c.  请保持产品迭代的一致性

现在随着互联网市场的不断稳定,很多产品进入了稳定的迭代期。但是在迭代期也应该以保持产品语言 用户使用习惯的一致性为一大重要原则,版本的迭代也应该逐步进行,不要急功近利。尽量保持原有的设计元素一致性,新功能的创新也尽量不要损害原有用户的使用体验。


自我理解:再发生错误之前采取措施来避免。


a. 引导用户,不要让错误出现。

很多app迭代更新之后会有操作指引,目的就是为了让用户学习,减少错误操作。很多引导页也有相类似的功能。


b. 给予提示,尤其是用户在做一些重要操作的时候

一些重要的敏感操作,产品通过二次询问得到用户的确认,




自我理解:能让你的软件产品来记住,就不要让你的用户来记。尽可能的在设计产品的时候,不要让用户去记忆,把用户当傻瓜。

a 记住用户的使用操作记录

这个记录不单单是在某一设备上,一般来讲都是跨设备进行同步。用户在使用的时候不用来回调整,体验感是很强。

 


b  让用户选择信息而不是填写

填写是一件成本极大的事情,很多用户不愿意在这上面花费时间。所以产品在设计的时候要尽量让用户去选,而不是去写。

undefined

c 自动读取

思考产品一些功能的使用场景,有没有自动智能化的需要。即不用问候产品使用者,自动提供解决方案。注意,这里讲的是提供方案,不是解决方案。提供大多数的解决方案,可以节省使用者的交互步骤或者浏览时间等,也是易用性高的表现。

d 提供适量的信息

其实另外一个交互定律法则(以后会讲)其实提到了选择的数量,移动端的选项一般不会超过五个,超过五个用户的头脑就会混乱。所以要考虑信息的摆放位置在哪里,一方面是需求决定的,另一方面也应该控制每一个选项的数量,不要让用户感到焦虑。


自我理解:一般来讲产品的用户群体是多样化,用户的使用熟悉度也是有差别的。要照顾到绝大多数用户群体的使用体验,所谓的高频是每一个用户群体比较常使用。


a.  设置快捷/重复入口

讲产品常用或者主打的功能放在产品容易操作的位置或者重复出现,用户可以高效的完成自己的需求。

一般来讲用户的使用频率越高越要放在操作热区和表面,反之亦然。

b.  用户自定义常用功能

照顾到不同用户对于某些功能的需求不同,对产品的部分功能进行用户自定义化操作,提高用户使用的灵活性。


c.  给用户默认选项

将用户经常使用的选项作为默认,减少用户操作时间,达到灵活高效的目的。像淘宝都会设置默认的收货地址,每次下单不用每次都输入,十分高效。(当然也有翻车的时候)



自我理解:互联网用户阅读产品的一个很重要的特点就是快。即不是来阅读不是来看,而是扫一眼。所以要求页面上的内容能够清晰可见,方便用户快速捕捉到自己喜欢阅读的信息,减少不必要的干扰,简洁高效。

a.  清晰的板块划分

把页面内容的优先级别进行分级,清晰的板块划分将会引导用户操作。还可以将页面的主推内容向用户展示,避免用户分不清重点。


b.  减少视觉噪音

注意页面的主角是谁,在平面设计中也有相同的概念。不要让背景或者装饰哗众取宠,而影响主要信息的传递,视觉设计是来辅助业务表达的。如果核心需求没有传递好,那就会单纯地成为一件艺术品,而不是设计作品。所以在设计过程中,要权衡视觉点,减少不必要的噪音干扰。


c. 严格遵守设计的四大基本原则:亲密  对比  重复   对齐

落实到界面上包括间距 字号 字重 版式节奏 。其实看到看到很多界面做的不精彩不优美,就是基础性的原则就没有完全落实贯彻。这里就不举例,基本所有的设计都要遵守的原则,很重要,很重要,很重要。


undefined


自我理解:要考虑到页面可能发生意外,错误发生后要及时弥补。


a.  提供清晰地说明和解决方案

考虑到可能会达到的错误界面。在发生的错误结果上,使用明确清晰的语言告知错误的原因,并给予解决方案。

自我理解:要考虑到页面可能发生意外,错误发生后要及时弥补。这一部分其实主要进行一些说明,让用户操作方便,相当于使用说明书。

a.  无需文档

进行新页面的设计尽量直观清晰,符合用户习惯,无需引导即可使用。

b.  一次性提示

改版引导或者新功能引导给予一定的提示

c.  常驻性提示

对于产品的操作性功能或者操作必须注意到的问题,产品需要进行一定说明

d.  帮助文档

用来解释一些常见问题。



文章来源:站酷    作者:花城丶

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



聊聊状态开关按钮如何设计

纯纯

我遇到的这个例子,和“概念模型”有关,在这里分享给大家。


这个酒店房间的开关是这样的:


酒店床头开关



酒店客厅开关



这个开关是触控式的,开关本身有亮/暗两个状态;大家迅速看一眼,我想请问大家,你们认为,亮着的开关(图1的5个灯,图2的右上、左下2个灯)对应的状态应该是打开的还是关闭的?




如果心中有了答案了,继续往下看。




之前在文章从交互维度量化用户体验中我说过一次我个人理解的最小交互模型,大概是下面这段话:


狭义的交互(Interaction)定义交互主体必须是人本身,而客体可以是产品,环境,服务等等,且不论交互客体是什么,只要主体是人,人和客体去进行交互的时候,一定是人带着一定的心理预期施加一个行为,然后客体会根据这个行为给与一个反馈(没有反馈本质也是一个反馈),而人会根据这个反馈是否符合预期去进行心理修正。如下图所示(红先黑后):


那随之而来的另一个问题就产生了,人进行交互行为时的心理预期是从哪儿来的?


人初生的时候都是一张白纸,每天重复的交互行为产生的心理预期会随着不同的教育、家庭进行变化;今年我们家在广州过年,我第一次见到两岁的小侄子,通过这一周对小侄子的观察更能体会出人其实是有某些说不清的潜能在里面的,举个例子,有一天小侄子生病了,要吃两种药,一种是甜的,一种是苦的;吃甜药的时候小侄子很开心,愉快的呀呀的说这药是甜的,而吃苦药的时候小侄子也是皱着说这药好苦,关键的问题是,出生两年来,家人从来没有对他描述过苦味是什么,也没有明确告诉他这两种药有一种是“苦味”的,但是两岁的小孩子就能尝到苦味的药在没有接触过“苦”这个词的时候就讲得出来这是“苦”。


再举个例子,还是我的小侄子,我们贵州人过年一般都会真金白银的打麻将,小侄子目睹了几天我们在麻将桌上用大把的零钱来支付,有一天我们去公园玩,遇到一个熟人给小孩子了一个红包,我们就问他“钱是干什么的呀”? 我小侄子脱口而出:“钱是用来打麻将的呀!”


为什么会发生这样的现象呢?


大概是现在的人买东西都用微信支付宝支付,所以对于小孩子的认知来说,他们由于没有见到过纸币参与交易的行为,而这几天不断被我们麻将桌上的现金冲击视觉,才会突然脱口而出这句话。


可能在我小侄子的认知里,手机才是用来买东西的。


我们互联网圈的设计行业其实能形成理论的东西不多的,大多数时候为了佐证某些东西,我们需要从心理学、社会学、行为学中找到一些理论支撑。我在做产品设计的过程中,最长这么时间一直使用的一种方法是思考用户在这个页面的心理预期。(比如在商品详情页,业务目标肯定是引导用户购买,但是用户心理上之所以点进了这个商品的详情,无非是在有购买意愿的基础上,需要一些信息去辅助决策,这时候如果你仔细思考并模拟一下你自己在购买时候点击详情页的行为,其实会发现其实影响决策的信息大多不是价格(因为价格在上一级的列表页已经标明了),更多的可能是产品描述和用户口碑等等)


在做尤其是app设计的时候,能明确每一个页面的业务目标和用户点进来的预期,其实是一件非常重要的事情,大家可以多留心在这两点上。



好的扯远了,回到状态开关的事情上来,还记得刚刚的那个图么?


酒店床头开关



酒店客厅开关


我相信绝大对数的人第一反应都是,亮着的开关对应的灯应该是亮的,因为这个符合常识,但是如果这个酒店也是这样的话,我就不会举这个例子了,没错,上面开关亮着的灯是关的,没有亮的开关对应的灯是打开状态。


我相信设计这个开关的人是为了让用户在夜晚起夜的时候使用方便,但是他完全可以用更加高明的办法,比如换成夜光材质之类的。这种设计师很愚蠢的,我观察这么多天下来,我们所有亲戚每次开关灯几乎都会误触,因为我们的心智一直一直认为的是亮着的开关亮着的灯。


这里就牵扯出一个问题,我们在app设计中如何去设计状态开关的问题。


首先需要明确,最无歧义的状态开关一定是需要具备两个意符:

其一是表征当前状态

其二是表征用户点击之后的状态。

而现在市面上很多app在这两个意符上是混的,一般都知道用icon的样式来表征当前状态,但是下面的辅助文字则是表征当前状态的和点击之后状态的都有。


这就会让用户很蒙。


比如相机app、短视频app、K歌app中就比较明显会有很多状态按钮,如下图所示是某相机app的截图,这样的设计就是“有歧义的设计”,比如“延时关闭”和“补光灯关闭”这两个文案,会很容易让人困惑这文案指代的是当前状态呢还是点击之后的状态呢?


给大家提供一个我个人的小tips:


设计状态按钮,尽量把当前状态和点击行为拉出两个层级关系来设计。


当前状态可以体现在icon上,但是不能只体现在icon上(比如他这个延时关闭的图标有一个x,但是补光灯关闭又没有x,这就更加歧义了)


比如如果是我去设计它这个按钮,我会这么设计:



这样的话,确实,用户操作复杂度上会多一级(之前直接点icon,现在点icon之后需要再点开关),但是用户完全没有认知成本。


这就是我说的把当前状态和点击行为拉出两个层级关系来设计。其实这个牺牲交互成本减少用户认知成本的方法在交互设计工作中经常被我们使用,当我们遇到一个问题实在是一步很难理清的时候,不妨可以多尝试这种思路。不过这种提高复杂度的减少认知的方法,不适用于业务强指引型页面(比如购买、导航之类)


文章来源:站酷   作者:Seany

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



app中的交互手势和意符设计

纯纯


PART 1 - 唐纳德诺曼关于交互设计的可视性的基本原则


唐纳德·诺曼所著《设计心理学1-4》一直被认为是设计行业经典,我在读这一套书的时候最令我感到共鸣的不是后来被大家大书特书第四本《情感化设计》,而是第一本《日常的设计》,这本第一本书最精华的内容是阐述了交互设计的基本原则,这个原则无论是对工业设计中的人和物件交互,还是说是建筑中的人和空间交互都有很深刻的指导意义。

作为一名app产品设计,对于这几个含义理解之后,融汇到app设计的情境下,会让你对之前工作流中的『交互设计』有全新的认识。

众所周知,交互设计借鉴了心理学/设计/艺术和情感等基本原则来保证用户得到积极愉悦的使用、情感和操作体验。交互设计之所以可以成为一门学科,本质在于可交互,而可交互的前提,是可以被感知(这个我在app的视觉美成因分析那篇文章里面已经说到过了),那么被感知的方式,往往是和人的五感有关。

触觉,听觉,视觉,味觉,嗅觉。只要能被人的五感所感知到,不论是和空间,和机器,和生活中的物件还是和人,只要发生五感的共情,我们就说是可以被交互的。(注意,本文中不考虑复杂多感交互,并且只考虑交互的一方是正常生物人。)

在人的五感之中,本文依旧着重讨论视觉,因为科学研究表明,在人五感的感知信息中,视觉视觉占比达到了惊人的83%。(其中听觉11%,嗅觉、触觉、味觉机加起来占比6%),而不管是什么设计,如果可视性不佳,都不能算得上优秀。

唐纳德·诺曼将交互的可视性原则归纳为和五种基本心理概念相关,这五中基本概念分别是:示能(Affordance)、意符(Signifiers)、映射(Mapping)、反馈(Feedback)和概念模型(Conceptual Models)。


i.示能(Affordance)

示能的概念和内涵来源于吉普森(J. J. Gibson)。此外,关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。

"示能"这个词,狭义的理解一下,是从可视性的角度明确了一个物理对象与人之间的关系。示能是物品的特性与决定物品预设用途的主体的能力之间的关系。示能的体现,由物品的品质同与之交互的主体的能力共同决定。示能的存在与否取决于物品和主体的属性。

还是举那个诺曼最经典的例子,如下图所示:

从视觉上看这张图,我们从以往的生活经验联想一种方形的,带纹路的黄色物质,再配合长期的视觉线索,我们会知道这张图上是一个木块,那从我们的视觉线索上,知道这个木板很细,(应该)能够轻易被折断;而且很轻,(应该)可以轻易被搬走。这些就是我们通过视觉判断这张图上呈现的"示能",而明确的我们和图上这个木材的交互关系。

那再看这张图:

我们通过生活经验的联想可以知道这是一个木门,为什么会区别这是木门而不是上面的木材呢?主要原因是因为这上面有个『把手』。在人的视觉中,有时候观测物体的某项"示能"是清晰可见的,比如上图那个木材可以被轻易搬动,而有很多物品的"示能"是不可轻易被感知的,比如上面那张木材的图,我们就不能感知到这个木材是可以被『轴转动』的。

而这张门的图上,大家想象自己是一个什么都不知道的野人,看到上面这个图,只有一块特别显眼的『把手』,你作为高智慧生物,是不是应该去触摸一下,并且企图能够与『把手』进行互动?

所以总结一下,如果这个门上没有把手,作为我们人类的认知而言,可能会认为这个门不能从外面被打开,但是如果这就是一个能从外面被打开的门,但是忘记设计外面的把手,那就意味着,这个物体"示能"的视觉通道被堵塞。(视觉通道被堵塞的"示能"可以被认为是一种"反示能"),"反示能"对交互作用是起到抵制作用的。也就是说,如果这个门是可以从外面被打开,但是我为了不让大家从外面打开,我在设计之初不加从外面打开的把手,一定程度上就可以抑制大家从外面打开的这种行为。

大家明白了么?

所以为了更有效的展现某些物体的视觉可交互,示能和反示能都必须被揭示出来,即可被觉察到。如果示能和反示能不能够被觉察到,就需要人为的把它们都标识出来,我们听过一些有效的手段就可以做到,比如在直立的木头一侧加上一个『把手』,这个把手就是"木头这种物体可以被人轴转动"这种"示能"的一个提示线索,你只需要旋转把手,稍加用力即可发现这个"示能"。

所以,我们把这种揭示"示能"的符号、提示功能、线索、称为『意符』


ii.意符(Signifiers)

划重点:示能决定可能进行哪些操作。意符则点名操作的位置。

在我的文章《交互闲谈02丨app中的非必要功能和用户界面上的流量法则》中,我对app中的意符进行了自己的定义:

用户界面上的意义符号,简而言之,就是一切用户感知中可以点击产生反馈的功能集合。

但是这是在以屏幕为介质的用户界面中我个人下的定义,但是在实际生活中,人们寻找蛛丝马迹,寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号都显得非常重要。人们所需要的和设计师必须提供的视觉线索,就是意符。

这就是为什么苹果第一代手机出来的时候会被大家奉为圭臬的原因,他在视觉上示能和意符都及其突出,一块屏幕和一个按钮,屏幕用户点击滑动交互,按钮用于点击交互,学习成本很低。大家试想一下之前的塞班系统,左上角和右上角两个按钮是和屏幕左下方的功能和右下方的功能映射,虽然也很易于理解,但是当大家看到苹果这么简单的手机的时候,相信所有人都是惊讶的:



△.示能和意符的关系

示能揭示了世界上作为主体的人(这里只考虑人),如何与其他东西进行互动的可能性。

一些示能是可视觉感知的,一些则是需要视觉之后联想感知(即不可直接感知)的。

意符指示能操作的位置。

一些意符是生活中的符号、标签和图样,如门上用符号标记的“推”、“拉”或“出口”,或指示所要采取行动的箭头和图示,或是朝向某个方向的手势,或其他的说明。一些意符仅仅是预设用途,譬如门的把手,或某个开关的物理结构。

划重点:在设计中,(尤其是UI设计中)意符比示能更重要。

示能和意符是本文中最重要的,下文会说到在app中的意符设计。


后面的映射,反馈和概念模型内容我简略说:

iii.映射(Mapping)

有一些自然映射是生物本能的或者是文化赋予的,比如如按照通常的习惯向上移动手势意思是增加,向下移动意味着减少,。当一系列可能的操作是可见的,当控制和显示契合自然映射时,设备就会容易使用。(具体参考我写的交互闲谈丨01里面那个视频手势的例子)

iv.反馈(Feedback)

反馈是控制论、信息论的著名概念。当我们做出了一个操作的时候,内心的预期是需要获得反馈的,如果在一个该获得反馈的地方没有获得反馈,人就会很疑惑,比如如果一个app的按钮点击之后没有跳转或者没有新的变化,那么人就会呆滞,如果反馈不及时,人还有可能会放弃。(比如网络不好导致的跳出率,比如一个不可点击的按钮做得太逼真用户疯狂点击发现没反应之类的 = =)

过多的反馈可能比过少的反馈更恼人。设计拙劣的反馈可能是旨在降低成本,最糟糕的是不恰当的无法解释的反馈。指手画脚的人通常是正确的,但他们的评论和意见如此之多,唠叨不停,会令人分心,而不是给予帮助。我记得很多年前(大概是2010年左右),还曾经见到过一款应用,用户但凡点击无效位置就会弹出一个Error的模态框,简直是令我绝望。 = =

v.概念模型(Conceptual Models)

概念模型通常是高度简化的使用说明,告诉你事物是如何工作的。概念模型只要有用就行,不必完整或准确。概念模型通常可以从设备本身推断出来,一些模型通过人与人相授,还有一些来自手册。(比如app新版本中那些半透明箭头加上文字的功能指引就是概念模型的一种,手游中一开始的新手指引也是。)




PART 2 - 屏幕的示能与基本的交互方式


一个人和一块(未通电的)触摸屏幕,在不借助道具的情况下到底能衍生出多少种交互方式?从五感出发去深入剖析的话大概分为:

嗅觉:用鼻子闻一闻这块屏。(发现并没有味道)

听觉:用耳朵听那块屏发出的声音。(发现并听不到什么声音)

味觉:用舌头舔一舔这块屏。(诶有点咸?)

视觉:用眼睛去看这块屏。(这是一块光滑的类似于玻璃的物体)

你们发现了么,对于一个原始的屏幕设备,比如手机,我们忽略按钮什么的物理按键,光思考那块没用通电的屏幕,如果你作为一个心智未开化的人(或者现在假设你就是一只猴),你真正对屏幕有建设的交互一定是在触觉上,我这么说大家能理解吧。我们不妨换位思考一下下,你现在是20年一个准备做概念手机的交互专家,你去穷举任何人和屏幕的交互,唯一有『肢体接触』的方法就是用手指(或者脚趾)去触摸,还有就是用舌头舔。用舌头舔会有口水,不利于屏幕的识别,万一漏电了画面太美不敢想。

所以,结论是,人类看到一块屏幕设备,这块屏幕设备的视觉示能最终导向了,人和屏幕的交互手段被定位在触觉上,而脚趾相对于人类来说没有手指灵活,所以最终我们把交互规定到手与屏幕的交互(简称交互手势)。

触觉:

我们来穷举一下手指和屏幕的交互方式:(图片来自Graphicpear,中文是我自己加上的。)


不要纠结于图,往下看,其实现今的所有的手势交互,我们基本操作分为:

一根手指:单击、双击、长按、拖动、上下滑、左右滑。

两根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

三根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

四根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

五根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

双手双指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

双手十指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

(上面写的双手双指是指每只手出一个手指,比如你们在手机修图时候的某些旋转操作)

其实你如果还要穷举的话,还有双手每只手一个指头、双手每只手两个指头、双手每只手三个指头、双手每只手四个指头这些奇怪的情况,但是由于现阶段手势足够完成日常操作,所以日常的人和屏幕交互并没有引入这些别的奇怪的方案。

我相信随着科技的进步和发展,其他的双手的交互操作也会大面积的被引入进来,起码我个人在看类似于黑镜啊还有别的欧美科幻片的时候,不止一次见到了这样的画面。(我印象最深的是黑镜第三季06,女主角操控手机方式是四指横滑,然后胖大叔操作无人驾驶的骑车的时候是双手旋转打开一个屏幕,然后再通过指头拖动目标完成导航交互。)这些电影里面反应的人的未来科技中蕴含了很多交互方法,大家可以看电影的时候多留意一下。

有点扯远了,回到手机app的交互手势,(除开游戏以外)一般单指双指即可解决。而先现今科技下,相对于大屏幕一些的平板电脑,无论是ipad还是Andriod厂商,都会引入三指,四指甚至五指的部分交互手势。

由于今天的主题是手机app,那我们下一部分就着重主要来说说手机app的交互。

PART 3 - 手机app中的意符分析


在设计中,尤其是UI设计中,意符比示能更重要。

理解这句话的本质是因为一块屏幕上人需要设计图形、按钮、内容。去让他完成一些具体事情,所以在屏幕显示的软件中的意义符号就需要有很深的引导性。

还记得之前我的定义么?用户界面上的意义符号,简而言之,就是一切用户感知中可以点击产生反馈的功能集合。

我们闲言少叙,先来看一个例子:

如图是喜马拉雅FM的app首页UI,我将从功能属性、视觉焦点两个角度,一排一排的进行分析:


角度一、首先从功能属性上进行分析:

第一层:NavigationBar上的意符为『消息』、『搜索框』、『历史』和『下载』,本质上是以功能名字命名的意符,其意符的表现形式为图片+文字。没啥好说的,每一项映射到自己的功能详情。

第二层:Tab的分类共有『热门』、『分类』、『康永来了』、『直播』和『广播』,其意符的表现形式为文字,这里大家看到『热门』标签本身变成橘黄色且下面有一个橘黄色细线,这是两个符号是通过这么多年的用户教育之后形成的意义共识,意义为:当前页面状态。这里我有一个小问题,大家猜如果这时候我右滑界面(采取的交互手势是单指向左轻滑),会发生什么事情?提供两个选项:

A、到『分类』页面。
B、到『订阅』页面。

详细绝大多数人都能答对,这里的正确答案是A,滑动到下一个tab『分类』。大家只知其所以然,感觉这里的tab本身就是靠滑动手势来控制的,但是更深层次的原因呢?为什么?

这里涉及到一个滑动切换tab的遍历解构,关于这个,我的网友@HoZiN老法师(大雾)的《浅议滑动Flick切换Tab导航 - 知乎专栏》这篇文章写得很棒,大家可以去看看。在这里我做粗浅的解释,在喜马拉雅这个app中,『首页』UI中的TabBar上的『热门』、『分类』、『康永来了』、『直播』和『广播』都是归属于当前BottomBar『首页』的,所以我们在滑动操作的时候应从当前深度的最近层开始交互。

如@HoZiN的下图所示:


如果用户滑动这个页面只能在首页的5个tab之间切换,我们认为他是下图的第一种,也即是在单一Bottom模块下切换(Hozin将其命名为独立Sub Navi切换,Sub Navi的意思其实也就是底部的Bottom navigation bar的意思,我上文中就直接简称BottomBar了,个人命名习惯而已大家能懂是这个意思就行),而另一种情况是有些app当滑动到最后一个tab,再右滑屏幕会进入到第二个Bottom模块,既是下图第二种的b-C和f-G的过程。虽然现在这种设计方式已经鲜有app在继续使用了,但是我在2017年的今天仍然是遇到了一些。并且有个特别而精彩的地方在于,一般情况下,b-C和f-G的滑动切换Bottom模块的这个交互往往是不可逆的。这点就比较有趣了,关于这个更深层次的原因可能是开发的原因,可能是产品没法做到每一个Bottom都有tab,也可能是因为别的app信息架构方面的原因,在这里就不展开了。

我们再继续单独看这个第二层:

215b59510beda8012193a31bbb4d.jpg

是不是发现有一个奇怪的格格不入的叫做『康永来了』的东西混了进来?这里我就必须吐槽一下喜马拉雅的产品设计团队了,作为一个普通用户,我本能的以为这个tab下一定是和康永来了有关的内容整合,放在这里是因为运营需要,这个其实在内容平台上很常见,大家看QQ视频和爱奇艺他们不也经常这么干,本身是一件无可厚非的产品推广的入口常态,然后我滑过去了发现其实他是『每日优选』的一个频道,只不过最近主推蔡康永的这挡音频节目:

如上图所示,这个奇怪的『康永来了』的tab归属到的不是康永来了的音频详情页,而是一个『每日优选』的列表页,那我就认为这个设计是欠妥的。

我为什么说这样的设计欠妥,其原因如下:

因为我确实是有几个月没有使用过喜马拉雅了,我不记得『康永来了』这个位置之前是不是叫『每日优选』,还是之前首页只有四个tag,这个希望有关注的读者下方给我留言确认一下。

那既然我不确定,我们不妨分两种情况去分析:

第一种情况:之前首页只有四个tag,而新加了一个以具体内容ip产品名(比如康永来了也好,或者明天老罗来了也罢)作为显示,实则是每日优选的一个强视觉tag,为的是引导用户点击具体ip产品之后看到每日优选的这个列表,从而为别的每日优选这个列表页导流。(我认为对于一个成熟的产品团队,不太可能是这种情况)

第二种情况:之前首页就有『每日优选』这个tag,只不过后来为了运营或者强视觉需求,改成了具体ip产品名。(我倾向于第二种假设)

我猜测喜马拉雅的团队本质上是希望借助类似于康永来了这样大的ip露出,通过从视觉上的突出(视觉突出这一点确实做得很好)从而博取用户流量,然后让用户通过查看『康永来了』这个具象的兴趣点tab,进入每日优选的这个列表,从而为别的每日优选产品导流。

从文案层面来说『康永来了』确实比『每日优选』更吸引人,但是如果是我来设计这个地方的话,我个人倾向还是放一个每日优选的tag,毕竟这是所有用户都能懂的语言,而康永是谁?这个问题毕竟不是所有人都知道的。

如果实在是通过数据或者产品运营需求表示,我们需要强调『每日优选』的话,那我会把每日优选的视觉也做得像现在康永来了一样突出,但是名字不能变,还得叫『每日优选』。

那如果康永来了这个ip市场运营那边吩咐了,确实需要持久强推怎么办?

办法有,比如banner位就可以直接推,而且banner位可以直接跳转到具体ip的详情页,路径更加简短,用户马上就可以购买,不像现在跳到的是一个每日优选的列表,用户还得通过一次点击才能进入详情。

还有另一种极端的情况,如果有一天运营同学告诉我,banner位不允许一直放康永来了,但是市场同学又告诉我康永来了这个ip很重要,需要长时间强推。那我的办法可能是有以下两种:

第一种办法是在第三层的最前面(必听榜的前面)加一个独立的康永来了tag,这样的做法是开发成本简单易行,但是不够优雅。但是你连『小雅音响』这种智能硬件购买页入口都放在上面了,多放一个运营强推ip也没毛病啊。_(:зゝ∠)_

第二种办法虽然比较decent一些,是在第四层和第无层的中间开辟一块很小的次banner位去放,如下图所示:

但是我个人是不推荐这种做法的,哪怕未来这个次banner可以扩展为多个次banner轮播我也不推荐,因为如果是这样的话,用户首页第一屏留给『猜你喜欢』的内容展示就很有限了。

总而言之吧,第二层tab的『康永来了』一定是一个待埋点考量的争议设计。我只是提出我个人的见解,不一定对,大家切勿偏听偏信。好了我们继续往下看。

第三层和第四层:图片banner和分类频道icon,其意符的表现形式为纯图片/图像+文字,banner嘛这个没啥好说的,通过自动左右切换的图片告知用户一些产品需要告诉用户的信息而已。分类频道icon我之前的几篇文章里面都有提到一些,记得在我的文章里我说到的格式塔原理么,大家打眼一看这个分类频道icon就知道右侧还有一些,是可以滑动的。

第五层和第六层:这个就更没啥好说的了,就是一个常规的带图片的宫格列表(我习惯这么叫他们,你们想怎么叫都行)页,其意符的表现形式为图片+文字,右上角有点击更多有一个向右的图标表明是可以点击跳页的(具体参看我写的分割线那篇文章)。到一个内容更丰富的item列表页。那么我问大家一个问题,为什么猜你喜欢的这个图片不也做成左右滑动的而要做成这样固定展示6张的呢?

这里主要是有两方面的原因,第一是做成左右滑的话,屏幕空间最多只能展现三张半,不如现在这个展示6张露出得多。第二是有一个很有趣的交互上需要注意的点,大家看如下图所示:

我标记蓝色线框的部分大家看到了没,这个banner也是可以滑动,分类频道icon也是可以滑动的,整个页面Tab也是可以点击跳转的。这也就意味着,如果要执行tab滑动跳转这个交互手势,我想能采用的滑动热如右图红色所示,区域本身就已经很小了。如果下面猜你喜欢也做成可以左右滑动的话,那么Tab的滑动手势热区面积更小了。如果真是那样的话,那这个Tab就不该设计成可以滑动加载的。

所以说嘛,app中的意义符号设计直接决定了这个app的易用性。不要乱来。

第七层:这就是bottombar具体没什么好讲的了,也就是五个图形意符,各自表示着自己的意义映射。现在很多app中大家会发现有些底部是只有icon没有文字的,有些是带了icon也带了文字的,带文字的目的也是为了解决图形联想带来的意义映射路径多的情况。这个不多说了。来看第二个角度。


角度二、从视觉上进行分析:

按照视觉强弱来看,『康永来了』、『banner』、『猜你喜欢』是页面最重的视觉部分,其次是频道入口icon和下面的Bottombar,最后是navigationbar上的小溪、搜索、历史和下载。从视觉上看,其实作为内容平台的喜马拉雅设计的很赞,没有任何问题。内容产品本身占有最强视觉强度,功能意符占有较弱视觉强度。这就是为什么猜你喜欢要用图片+文字的宫格列表,不用类似于item之类的原因,因为比如这里的每一个节目都换成是一个item,那视觉只集中左边的图片上,而不像现在三张图片这样聚焦。

最后抛出一个视觉上BottomBar的问题,现在很多app会在实心icon还是线性icon上面纠结,知乎的BottomBar一直采用实心icon,而Airbnb一直采用线性icon,到底为什么?

我会在下一期的交互闲谈里面说这个问题,大家也可以想一想,其实(如果我理解的没错的话)答案就在我上面这段论述中。



PART 4 - 手机app中的意符设计需要辩证的几小点


一个擅长app中意符设计的人,本质就是对appUI设计有十足把握的人,关于这里的几点辩证只是提出来说一下,具体的UI设计过程中这样的问题不胜枚举,大家可以留言交流。


一、BottomBar上的意符到底要不要加文字?

手机中可供点击反馈的意符设计分为很多种,有纯图片的(比如banner),有图形+文字的(比如BpttomBar上的那些),有纯文字的(不如上文中喜马拉雅的切换tab,比如『点击查看更多』、『点击展开』、『滑动加载』之类具有诱导性的文案),还有纯图形的『比如像『一个One』这样的app底部BottomBar是只有图片不带文字的』,还有一些是按钮形式的。

在这些意符的设计中,意义识别是尤其需要被设计的。如果一个图形无法表现他应有的意义,那就一定要在附近加上文字形成一个完整的意符。

举个例子:已下载这个icon已经被所有app用烂了,大家一听就知道应该包含一个向下的箭头,比如历史记录也是,大家都能想到是一个时钟,这就是长期教育用户之后用户产生的意义联想。所以喜马拉雅和腾讯视频中的这两个意符设计,一个是带文字,一个是不带文字,都不影响用户识别体验。

但是比如再举一个例,『我的』图标,现在大家都习惯用一个『人头像』,而一切新奇的产品比如说『氧气app』,才用的是一个圆圈,那么这个时候如果是意义识别为主导的产品(比如电商啊或者用户不是那么年轻的)就会选择在下面加上一行中文。这样的话在图形上发挥得再不易识别,也可以借助文字瞬间映射到。

那比如像『一个One』、『Medium』和『500px』这样的众多app,他们的BottomBar都是一个纯图形:

纯图形带来的其实是一种新奇感和简洁的设计感。相对的,和用户需要花更长时间的视觉判断,比如第一张图是『一个One』,第2,3,4个icon其实很易识别:一本书,一个音符和一个播放三角能够很简洁的代表文章,音乐和视频。第二张图相对就没有那么容易识别了,尤其是第三个图标,意义指向不明确,但是由于Medium是一个国外设计师聚集的网站,所以其实也还好,设计感在一定程度上会优于识别也没问题。图3是500px,这5个icon就更易识别了。

所以,如果你采取无文字的BottomBar,那么请UI设计师用心设计你的icons。


二、设置引导用户点击加载的意符应该如何设计?

有一个app需要设计这样一个功能:文字默认折叠展示3行,但是点击之后需要(非跳页)加载全文,那么请问需要设置怎样的意符引导用户点击?

传统的大概是三种方案:

第一是在文字第三行的前四个字用其他颜色(比如蓝色)标记为『加载更多』,用户一点之后加载全部(早期知乎的做法)。

第二种是在文字第三行结束之后再第四行的位置居中放一个『点击加载更多』,用户点击之后加载全部。

第三种是在文字第三行结束的位置放一个省略号即可,用户阅读之后发现没读完,自己会尝试点击。

显然,第三种方法仅适合社区类app或者贴吧或者问答类app,因为一般用户读都很难读完,更别说给你点击一下了。第一种和第二种也是见仁见智,一般情况下我个人推荐第一种,因为需要文字折叠成三行的页面就说明本身画面排布很紧张,就不要另起一个第四行放『点击加载更多』了。


三、app中的按钮设计,什么时候应该有push色,什么时候应该没有?

这是我的微信公众号后台有一个小伙伴的提问,push色这个东西在网页上有别的更多作用,但是在app中,一般就只用来反馈行为。

有两种情况:

第一种是你点击某个意符,这个意符发生变化(颜色或样式变化)同时跳转。

第二种是你点击某个意符,这个意符完全不发生变化但是页面跳转。

从用户期待每次行为都得到反馈的心理上来说,我们当然希望所有的意符都能呈现及时反馈以证明你的点击行为是有效的(也就是上面的第一种)。但是有时候由于反馈动效我们写得不尽如人意问题,我们看到冗长(哪怕只有半秒)切重复的的反馈内心就会就会很烦。

举个例子比如原生安卓的Material Design点击每个item都会出现一个水波动效反馈,当然原生Material Design的动效是足够优秀的,所以我们会觉得很有新奇感。但是你们如果试试把安卓的这个动效拉长别说一倍,拉长三分之一。你们一定会崩溃的相信我。



PART 4 - 总结


1、app产品设计和UI的设计中,意符的设计是当众最重要的一环,因为每一个意符作为产品的功能入口和行为入口,它们不光光是产品的流量节点。更是app产品信息架构的核心提现。

2、在设计app的意符的时候,要更多的考虑到意符所蕴含的具体交互手势(比如喜马拉雅的tab bar就包含了滑动和点击)以及具体的对用户行为的思辨。

3、app中意符的设计一定是框架层面的设计,他的本身视觉层级不易过高,最好不能超过app主体信息。

4、意符的意义映射要尽可能的单一,最好能让用户一眼就了解这个意符是代表什么功能什么意义。

5、app意符的观察、分析、设计是一个长期的过程,大家可以试着多问自己一些为什么。




文章来源:站酷   作者:Seany

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



用户体验是玄学吗?

纯纯

Part 01 - 用户体验和用户体验设计


关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。



1.1 什么是用户体验?

用户体验的定义有很多种,我比较倾向的解释是:

“用户体验是人对于使用一个产品、系统、服务时的预期和反应。”

首先明确第一个概念,体验是一个过程,生活中的一切皆是体验,我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。

从广义上来看,体验的主体是人,客体可以是一切物体和事情,媒介是我们的感官;当我们的感官作用在一切事物上,会产生相应的心理行为,比如预期,比如反馈,比如情绪,着所有的一切一起作用,形成了用户体验过程。


只要留心生活,你会发现用户体验无处不在。

举两个例子:

第一个是北京随处可见的地铁充值机,我经常看到用户站在那里懵逼,最主要的是他违背了用户的操作习惯,插卡机器的的行为总会让人联想到APM机,而几乎所有的APM机器卡都是插一半然后自动吸进去的,而北京地铁卡是需要插到底,然后还需要用力按一下才能成功识别,跟多用户懵逼在这一步,并没有用力按,然后以为是机器坏了没有识别。

第二个例子是我工作的地方旁边商场一楼有一个肯德基,它有两个门可以进入,第一个门是在商场外临街,第二个门是在商场内。

我连续两周的工作日每天早上9点半到10点在这家店吃早餐,发现一件很有趣的现象,由于工作人员的疏忽,商场内的门二经常会忘记打开,因为这个商场的负二楼和地铁站连在一起,所有很多人地铁到站的人群从地铁站口出直接从商场内走向街道:

在这些人群里,如果他们正巧有买早餐的需求,他们往往会从门2进,如果正巧由于工作人员的疏忽,门2没开。按照常人的思维,哪怕门2没开,那不还有一个门1么,用户完全可以多走几步出去从街道门1进入啊,应该不会太影响。如果你能得出这样的结论,又碰巧你正好是互联网的设计或者产品人员,那么你可能有“自我安慰型人格”。

我吃早餐的两周里做了一个统计,10个工作日里,每天在我吃早餐的这半个小时内,试图推开门2却发现打不开的,平均到每天有6位,按照每个人平均买一份早餐套餐15元钱来算,10天内,由于工作人员的失误,这个门至少阻挡了至少900元营业额。


回到刚刚那个“自我安慰”的思维,我发现,10天内被这个门阻挡的实际62位用户里,真正出街道从街道门1再次进入的人,只有十七位。也就是说这个实验中肯德基早餐用户被最短路径阻隔之后,再次选择次路径完成转化的转化率17/62(27%)。

别急,还有更吃惊的数据:在被门2阻隔的62个人中,有17个是自身顺路要往街道右边走路过门1的。但是由于被门2阻隔,他们17个人当中,哪怕自身行走路径要路过门1,选择从门1进去的也只有7位,大概在11/17(64%)(判断顺路依据是他们吃完后从门1出门往右走)。


再看一下肯德基这个例子的数据结论:

被门2阻拦的62个人里,45人流失。

其余17位选择从门1再次进入,这17人里,本身就要顺路经过门一的占11位,说明大概率只有顺路才会进入完成转化。


这个例子说明什么呢?

在替代品遍地都在的今天,不要试图去挑战用户的体验。


当用户看到肯德基的门2,他们产生的预期是马上就可以推开享受一顿早餐,这时候由于门2打不开,使得用户预期受挫。

受挫用户的第一反应并不是想解决办法(表现在例子中就是寻找另一个门进入),而是放弃它。毕竟,没有肯德基我还可以吃麦当劳,还有星巴克,还有面包店,各种各样的选择。


这就是为什么互联网行业把产品用户体验看得这么重要的原因,除了社交产品以外的用户是很难有忠诚度的,你的产品难用,你不能给用户更大的福利,用户一旦发现别的产品做得比你好,用户会马上放弃你,转而用别的替代品。


上面的那个例子主要表达的是用户预期受阻带来的糟糕体验导致用户流失。其实整个用户体验的过程当中,是有很多很的因素相互制约,协同作用的:


户体验本身一个很庞杂繁复的系统;在一个过程内,用户对整个过程中的元素的预期和反应(情感和生物反应)构成了整个用户体验系统。这里面包含了很多很多的旁支,比如人的感知、人的经验系统和使用场景决定了人对于单个体验的预期,而如果超过预期会带来惊喜,促使用户正向评价,也促使用户再次体验。比如人感知和体验中客体呈现的意符决定了人的行为等等…


用户体验最初的时候它只是用于表征易用性方面,而现在,它的概念更多的表现在情感的一个分支,包含设计情感互动和评估情绪 。因为人的情绪是很难拿捏的,面对不同教育背景不同生活经历的用户,我们最初其实很难归纳出到底什么样的设计是具有好的用户体验。


好的用户体验各有各的优点,但是,糟糕的用户体验却很容易被归纳和识别出来。


设计师们不断的在识别和总结糟糕的体验问题,慢慢在优化这些问题的过程中积累经验,其实也慢慢的有了一些关于用户体验的方法论形成,这种方法论作用于各个设计行业,工业设计、服装设计、奢侈品、广告、互联网产品设计各个行业产生的方法论其实不尽相同。




1.2 什么是用户体验设计?


说起设计(Design)这个词,那就厉害了 ,作为设计师的你听说过解释肯定有很多种,而我个人对”设计“的理解是:设计是一种”约束条件下,解决问题的可行的办法“。而对于用户体验设计而言,早期的时候,我们仅能够基于经验主义去完成一些设计,这时候专家的作用会被放大,因为专家提出的不要这样、不要那样,往往会成为指导性方案:


但是随着发展,不断地有人站出来尝试描述和定义用户体验的边界,比如:


随着探索者越来越多,我们最终也是大致能够够了出用户体验设计的定义范围:既然体验是一个过程,那么狭义的,用户体验设计实际上是通过改善和优化用户与产品交互过程,从而提升用户的满意度的过程。


这里有两个要点:


1、用户体验设计的目标是逐步不断提升用户满意度,前面两有个定语:“逐步“、”不断”,对于用户而言,永远没有所谓“最满意”的说法,只有“相较于上一次体验更满意”.所以除非定义一种可量化的终极满意度模型作为指标参照,否则用户体验设计是一个永远都有优化空间的过程。


2、用户体验设计是围绕过程的设计,在互联网行业中,这个过程主要指用户与产品(app、PC端,客户端、VR等)的交互过程中,所以下文重点讨论的是在互联网行业中的用户体验设计。



Part 02 - 用户体验设计是一个岗位吗?


以2018年2月为时间节点的目前来说,用户体验设计不是一个岗位,现阶段来看,它更像是一个协同目标,每个公司的所有设计师(UI/视觉/交互),用研人员,包括开发人员其实工作的目标都是为了逐步提升自己公司产品的用户体验。


虽然用户体验设计目前还不是一个岗位,但是它正在趋向于成为一个岗位。要解释这一点,我们还是要从用户体验的定义说开去,还记得用户体验设计是什么吗?用户体验设计是通过改善和优化用户与产品交互过程,从而提升用户的满意度的过程。


既然要改善和优化用户与产品交互过程,那把这个句子拆分开来,大概需要的知识储备有:

1、从主语的角度看:首先你要了解用户吧?用户是人,要提升人的满意度,对人感到心理满足的机制是不是需要了解?


2、从客体的角度看:客体是产品,在互联网行业表现为手机(app)、pad(app)、PC(软件)和VR设备等等。这些产品是我们着重需要关注的点,比如一个app中视觉信息的呈现,app的信息架构、app的交互设计、app的可用性和易用性等等,都是需要考虑的。


3、既然是用户与产品交互过程,是不是要知道人和产品(手机、app、PC)到底是如何交互的?每一次的点击,滑动对于用户来看心理应该是怎样,产品的每一次反馈都意味着什么?


呐,你现在来看,其实我们互联网行业现在划分的UI/视觉/交互/用研,甚至往广了说包括产品/开发/测试,工作内容都是构成用户体验的要素,它需要的知识面特别特别广,对人的综合素质要求很高,所以目前来看,用户体验还不能是一个岗位,但是很多大公司,比如腾讯阿里,他们期待设计师能够变成有更大洞察和对业务、人性有更多了解的全方位人才,而不是一个只会画图的美工,所以说未来,用户体验设计师可能会变成一个title,但是可以预料的是,用户体验涵盖的这么多方面知识,每个人都是有侧重和专长的:可能有些人就是很喜欢视觉设计和UI设计,那他们在精研这部分的同时,相应的懂一些交互方面的知识,这就算是优秀的偏视觉方向的用户体验设计师;那视觉表现很差的人能不能算优秀设计师呢?当然可以,比如他是心理学或者HCI(人机交互设计)的研究生,对人和用户心理有自己独特的认识,再加上精通定性和定量研究方法,对数据有独特的敏感,那他未来可能是用户研究方向的用户体验设计师。


只不过我们现在因为岗位固化,大多数公司,每个人的工作职责仅限于那一块,你是做视觉/UI的,那就好好画界面,你是做交互的,那就好好研究布局,你是用研,你是DBA,你是什么职位就做什么职位的事情,从来不越界,这样其实是不利于人的发展的,那我们追求上进的设计师们只能自己下来多看书,多去做研究,私下来多花时间修炼自己的内功心法,才能让自己立于不败之地。


用户体验设计发展到今天,目前包含了最大的三个有模糊边界的模块是用户研究、交互设计、视觉设计。现在绝大多数互联网公司也都是按照以上这三个模块去设置岗位的,这样有一个很大的问题其实是不利于设计师的发展。


阿里巴巴1688的设计总监汪方进关于这三个岗位,有这样的一番评述:

比如交互岗位,如果对接的是一位能力较强的PD,他们可能把交互稿定了七八成,交互设计师完善后交付给视觉设计师,而对接的视觉设计师又有一些交互Sense,他也许把交互稿又改了改,那么这个过程下来,交互设计师的内容,还能保留多少呢?我所说的这种情况,可能也是当下我们交互设计师同学所面临的痛。

而视觉设计师又是怎样的现状呢?视觉设计师拿到交互稿后,在交互稿的基础上美化润色一下,自主发挥空间不太大。从我们集团总体情况来看,视觉设计师的(P级)成长是比较慢的,因为我们讲求论述自身设计的价值是什么,但把视觉从整体中剥离出来,视觉设计师设计的某一个页面,具体能带来多少商业价值?视觉设计师很难去论述这点。


关于用研、视觉、交互这三个模块,我也想分开来谈谈,希望能对目前刚入行或者入行不久感到迷茫的小伙伴有所帮助。



Part 03 - 用户研究


上面我们说到,用研、交互、视觉这三个模块构成了一个用户体验设计的能力维度,要搞清楚这三个维度,我们不妨先看看业界最出名的一张用户体验要素图:

我们一般把最下面战略层的部分分解开,其中除了产品和公司战略之外,关于用户需求的定义交给用研(用户研究)人员去完成。


关于用户研究,如果是一个从0到1的产品,产品初期是需要对产品用户进行定位划分和用户画像,就是我的这个产品是为了解决什么样的用户的什么需求的,这些用户的属性是怎样的,他们具有什么样的特质和颜色、他们一般使用产品的情景是如何的?


这里需要注意的是,如果你不是一位有用研经验的人去第一次尝试做用研,需要留心我们很容易落入理想化用户设计的陷阱。再客观的站在用户角度去思考,去设计也会有主观和流于表面的情况出现。我们不能想当然的按照理想情景去思考用户需求,用户需求是复杂的,再加上企业自己的,以及各部门的需求纷繁,所以一般在产品迭代的过程中新的功能很容易陷入想当然的“用户就是需要啊”的思维之中。所以对于成熟的产品来说,需要划分核心主流和普通用户并分别画像。关于用户画像的方法有很多很多,大家可以去随意搜索在这里就不细谈了。


还有如果是一个初次开展用户研究的同学做用户研究的时候,可以掌握几种常见的方法,访谈法,焦点小组,易用性测试,问卷调查这些方法各有利弊,最重要的是找到当前情境下解决问题且行之有效的方案,比如访谈或者焦点小组,精心整理问题并邀请公司的一些员工或者核心用户进行访谈并全程录音,在结束后认真提炼访谈中多次被用户提到的关键词,从关键词中按维度抽象整理出用户的需要,是访谈的核心价值。并且输出文档,赋予思考,再以此作为整个设计改版的核心依托,让里面用户提到的关键词在设计页面中体现,这才是有效的设计。


关于用户研究的常用方法,具体推荐给大家两本大部头的书,大家感兴趣或者不知道自己感不感兴趣,可以去看看《设计调研》和《洞察用户体验方法与实践》 第二版。



Part 04 - 交互设计 


交互设计的输出物是产品原型,也就是你们看到的线框图。那线框图是怎么产生的呢?这个需要从产品经理那边对功能梳理开始。

一般大一点的有交互团队的公司,比如新浪微博啊之类的,他们的产品经理的工作重点会更加focus在功能本身到底是不是用户所需要的,而经过产品提出来的需求文档,一般只有功能需求List和他们的优先级,如果遇到要画图说明的,也就是简略的几一个草图。

这时候,交互设计师会根据产品的提出的功能需求List去进行整理和区分:

这里整理和区分的方法是合并,拆分和归纳。

比如功能A是可以拆分成更细颗粒度的需求A1和A2的,其中A1和A2又碰巧属于不同的已有的两个功能区块,那么就可以把他们拆分到不同的功能线上,如果某些功能发现他们有同样的属性,那是不是考虑把他们整合在一起?


这样整合完了需求,再按照优先/重要的二维表格去划分,最后得到一个需求量表:

然后我们根据这样的版本需求量表优先级和重要性,有的放矢的去设计功能入口和信息架构,就会游刃有余:


而一般复杂产品新增功能的时候,往往要考量很多因素,不能一味的去做功能堆砌,还是需要把不重要的功能隐藏或转移,突出重要的功能,再把一些同属性的功能入口组织在一起并列,这些都是在原型之前需要思考的问题。再往下,那就是根据一个一个的信息去设计产品低保证原型图,那就没啥好说的了,你们看到的原型图几乎都差不多,但是至于你们的交互设计师的原型是不是按照我上面步骤一步一步推演出来的,那就要打个问号了,这可能是区分一般交互设计师和高级一点的交互设计师的一种办法。(如果你见到听到功能就开始画低保真的交互,那…)



如果你以为交互设计师就是画个原型,那你就错了,交互设计师切记不要沦为产品助理……其实在真个UX体系中,交互设计师承担的是最重要也是最核心的一个环节,那就是优化用户路径(即优化流量路径)。


什么叫优化用户路径呢,举个例子,全民k歌是一款唱歌的app,那用户最核心的功能就是在上面唱歌,而关于唱歌,大概有独唱、合唱两种维度。比如现在,我作为普通用户,想要去完成独唱一首歌的行为。这种行为从用户路径上看就是用户从任何页面到唱歌详情页。那么到底有多少条路?既是说,到底有多少个页面可以跳转到唱歌详情页?然后你会发现,其实能跳到唱歌详情页的,除了清唱那种独特的方法以外,其他的都是要通过伴奏详情页跳转,那么问题又来了,到底有多少个页面可以跳转到伴奏详情页呢?

就这样,去穷举所有的用户路径,然后看看这些路径过程中有没有一些冗余操作是可以删减的:


穷举所有用户路径,看看有没有哪一跳是可以被优化的(以唱吧为例



这里面有很大很大的学问,如果展开说的话可能是一个几万字都说不清楚的篇幅。

总之,一个好的app一定是功能和产品形态足够扁平简单。

要让产品形态足够扁平简单,就需要根据app的形态去整理和梳理交互层级,针对流量问题进行具体的分流设计:

比如当我们看到一个200wpv的页面,下属三个平行按钮分别只有40w、12w和3wpv,刨除场景问题之外,从交互出发那是不是我们可以设计一个内页的segment组件去完成三个内页的滑动跳转、降低操作成本呢?

比如淘宝这样:

又或者说,我们是不是可以未一个pv较低却承载功能较大的页面另外设置另多个入口呢?

比如像外卖产品这样:

最后的最后,交互设计的工作产出就是原型了,既然都思考妥当了,画个图就就没啥好说的了...



Part 05 - UI设计



再往后,交互设计师会把原型给到UI设计师,UI设计师的工作范围大家想必很了解,就是把低保真的原型变成高保真的设计稿。


在这里再啰嗦一遍啊:


UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!

UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!

UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!


重要的事情说三遍!


我们唱吧UED最近一直在招人。

看UI的简历,然后发现一个很大的问题是,我发现UI设计师的简历真的是千奇百怪五花八门,有那种插画画的很好的,有那种第一眼上来就是一个很立体的3D建模渲染震撼到你的,也有那种大渐变dribbble风给你一种好像很厉害的样子的,但是这些都不重要,如果一个界面上的内容信息没有主次区分,或者展现得没有层级对比,再花哨的东西都没有用。


关于UI需要掌握的比如格式塔啊之类的东西已经有太多人说了,在这里就不赘述,具体也可以看我的文章《形式与内容的关系 -  app的视觉美成因分析》


UI设计其实都不是闹着玩的工作,也绝对不是纯主观感性的工作,判断一个UI界面的好坏可以通过易用性和易读性测试、眯眼测试的方法检验,判断一个产品交互设计的优劣也可以从易用性测试和用户反馈中得出线索,判断哪种交互手段和信息架构更为可行通过ab test的方法得出结论,这一些的一些设计它都是一个有着科学的方法论作为指导的。


希望从此之后大家审视产品的时候不要以UI美丑这种最低级的主观因素去思考(当然UI的一致性和美观度很重要),但是更多的,要想想更深层次功能布局和信息架构,以及产品打的人群上往更加宏观和抽象的高胃度进行思考。


文章来源:站酷   作者:Seany

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档