首页

引导页设计浅析

鹤鹤

APP中的闪屏、启动页、引导页的区别,设计方法,个人案例分析,以及品牌解读

【什么是闪屏 / 引导页与闪屏的关系】

(部分引用观点)



引导页是闪屏的其中一种,一般出现在版本分布或大版本升级时。

我们先整体看一下闪屏页的大致类型:

(声明:以下图片来源于应用截图,仅作为学习交流使用)









一、常规闪屏


为什么叫常规闪屏?

因为这类闪屏比较普通,我没有想到什么更专业的词汇,暂且就叫常规闪屏吧。这类闪屏的使用国内的和国外有点不同,因为按照苹果官方的说法是,用户打开应用能立即使用是最好的体验,例如:系统自带的一些应用,是没有闪屏的。再甚者闪屏最好就是让用户感觉不到,和首页能有一个完美的融合和过渡。

这种体验也很棒,国外的instagram、facebook等就是使用这种设计,闪屏长得很像首页,更像是一张加载类的占位符








当然,因地制宜,国内的我们已经习惯了闪屏作为App品牌的宣传和推广手段,一般由logo+名称+slogan+品牌色组成,界面还是相对简洁明了的,但还是很明显的违背了苹果官方的指导说法,但是没办法,这就是商业需要。


这样设计也有利处,可以减少用户在打开App时的焦虑感,也可以让用户更直观的了解品牌,传递一些情怀、理念,多看一次闪屏,也是让用户强化品牌记忆的过程,只是不知道是好的记忆点还是坏的,就要我们自己斟酌了。








二、广告闪屏


广告闪屏,顾名思义就是产品本身为了进行流量变现从而获得盈利,给一些商家打广告或者进行合作设计的一类闪屏,这是无可厚非的。不过广告闪屏自带被“嫌弃”属性,应该很多用户看到这类闪屏的心理是比较排斥的。

至少对我来说,我是很少关注这类闪屏,除非闪屏设计的非常的酷炫,我愿意多看一下,否则的话我就想立刻把它关掉,所以在这类闪屏上加上“倒计时(loading)和跳过”就显得很必要,并且“跳过”的位置也要方便用户点击。

这类闪屏最好只出现每天第一次打开App时,避免让用户厌烦。不管出于何种目的,都需要在商业利益和用户体验之间保持一个平衡,不然用户会流失的很快,用户流失了,何谈盈利呢?

另外广告闪屏和下面要说的活动闪屏一样,会有一个模板:底部是闪屏图片,上面盖上一层logo模板。

App启动时会从服务器拉取闪屏数据,本地会保存logo模板。如果服务器更新了闪屏数据会拉取数据进行展示,如果没有更新或是网络不佳,就会默认展示缓存的闪屏数据,以免发生卡顿现象,以保证流畅的用户体验。







三、活动闪屏


活动闪屏和广告闪屏有点类似,出于产品运营方面的需要,它起到活动宣传的作用,每年的双十一、双十二期间,各大电商App的闪屏都会用到活动闪屏,还有一些商家自己造的一些节日:品牌周、年货节、会员日、狂欢周…相信大家已经见怪不怪了。


近期我留意到一个问题,就是我们在使用App时,经常会在应用之间进行切换使用。如果我们从其他应用再次返回时,最好不要再加载一次闪屏,会给用户很不好的用户体验。目前使用下来,淘宝、天猫等这类主流应用都有这种问题,但是我想这应该他们有意为之。







四、节日闪屏


每逢一些节假日,各大品牌都会推出一些当日的闪屏,那么为什么要设计节日闪屏?

我觉得有几点原因:

       长期看常规闪屏,用户很容易会有视觉上的一种疲劳,节日闪屏会给用户一种不经意的惊喜和新鲜感;

       可以蹭一蹭节日的热点,提升产品本身的品牌调性;

       在节日给用户以问候和关怀,和用户在情感上产生共鸣,从而更好的连接用户和产品,我想这应该是最重要的原因。


节日闪屏比较吸引用户的注意力,它不像广告类闪屏,我看见这类闪屏就会忍不住的多瞅几眼,所以设计这类闪屏的时候要非常重视,因为用户愿意等待,这是非常求之不得的,这就需要设计师具有比较强的表现能力了。

我们在设计的时候可以先进行思维上的发散,或者是逆向思维之类的,比如:春节将近,我们可以联想到是什么,理清一个思绪,要有节日的氛围,可以活泼、可爱、夸张…切忌呆板。

 







五、大版本升级闪屏(引导页)


在App进行了大版本升级后,要向用户展示产品新功能的操作方法。这类闪屏也可以称为引导页,页面数量控制在3-5页,每一页都有一个对应的主题,主题要精简,切忌文字过多。


而且每一页设计形式要类似,否则会给用户一种视觉落差感。页面上要加上“跳过”功能,因为用户更希望尽快体验新版本,而不是看你的这些教导,在最后一页要加上类似“立即体验”的button。







——分割线【品牌传达力】——










启动页面告诉用户“我是谁”“我是做什么的”,开头跟用户做了自我介绍,引导页的目的主要是告诉用户:“我该怎么使用”或者是“我有什么亮点”(重点宣传的功能),借用男女相亲例子,双方介绍完自己之后,开始展示自己有什么优势,好的引导页设计直接关系到用户是否“对你有兴趣”想一进“了解你”。

从上图可以看到,引导页在品牌传达力上居首位,其次应用市场说明图。








【引导页展示目的】

以下尽量列举了金融相关app截图,仅供学习使用



引导页定义比较广,往小了讲,我们一般会认为在用户初次打开应用时跳出的几张介绍应用功能的页面就叫做引导页;那往大了说,在用户使用某个功能前就能帮助用户降低学习成本的页面或存在引导属性的弹窗都可以称为引导页。

先从引导页展示的目的出发,再结合实际app情况去确定宣传标题,最后结合不同的设计展示方式以及动效。







一、产品特色介绍


多数时候,我们初次打开应用会看到下面这样的引导页:


可以看到一个共通点——即页面呈现的内容为该 App 的主功能或新功能推荐,或者是对刚迭代的功能做了哪些优化的说明。

理想情况是:用户能了解这次产品做了哪些优化,帮助用户更清晰地了解产品。







二、操作引导


这类引导会出现在内容页面,直接引导用户去操作相关功能

蒙版引导通常紧贴着界面流程进行而出现,使用透明色间隔形式加上简单指示性文字与图形,总是能够简洁明了地告知用户产品的功能或者使用方法,并且由于其轻量的属性会大大减少用户的阅读时间。设计得当的蒙版引导不仅可以与其他引导相辅相成,同时也能够增加用户对产品的好感度。

它的好处就是清晰明了,直接让用户知道你想表达什么。它的实际效果会比纯内容引导页好很多,但同时也会有一个问题,即打扰用户操作。

这样的方式已经解决了内容操作引导的问题,但其实这种方法也会使用户厌倦,所以内容不易过多。







三、理念传达


以传达态度理念,生活方式等为主,比较概念和意义上的东西,吸引用户达到某种程度的共鸣,从而产生吸引力。







四、侧面实力烘托


多用于有实力/特色的产品或者企业,展示自身优势,让用户对产品产生信赖感。










五、问题解决


指出用户所面临的问题,而你的产品正好可以解决。



结合自身app/企业所具有的优势;产品的功能特色;产品的定位;等相应的展示目的。也存在混合展示,不过要把握好标题的设定,在标题与设计上达到统一。








【引导页设计方法】


在确定了引导页展示目的之后,下面整理了在引导页设计过程中的方法。

目前比较常见的几类引导页的类型(电商除外),根据产品的特点来确定设计风格,总体没有固定规则。










一、图文结合


使用有关联性的图片,同种版式,优点是感情表达直观简单,画面冲击感强,缺点是泛表达,不能表达内容。









二、产品界面描述型


功能描述型,使用app画面说明,通常在版本更新时用来对新功能进行重点描述,是目前比较常见的引导页表达方法之一,比较通用。









三、模拟应用场景


通常用插画方式表现,通过图文结合的方式全方位阐述中心思想,插画风格具有丰富的多样性,同时又能贴切表达主题,所以在app中出现频率越来越高。

以下列举了百度金融的版本引导页,通过系列插图表现贴心、安心、用心、省心、随心,插画紧密契合主题,完美使用排比句的形式。











四、吉祥物的运用


一个成熟的app通常会吉祥物来表现,启动页是用户打开app第一眼看到的地方,吉祥物可以让用户在2-3秒时间内深刻体会到产品的核心价值观。












五、代交互 动效的


这类启动页通常是在页面切换中加入一些动效果的设计,使得在交互体验上更加突出,与静态页面间的切换显得更加生动有趣。

动画呈现方式趣味性更高一些,开发成本相对也会高一些。











六、视频类/动画类


这类的理论上不叫启动页,叫开篇动画更贴切,打开app通常为一小段视频或动画引入页面











【实际案例分析】


闪屏/引导页的设计方法很多,但要在设计之前充分考虑到产品定位和应用场景。

下面引用我自己的案例分析,因为对产品理解不够到位,设计过程比较坎坷,经历了几个版本的优化。








【引申思考】


对晋盈汇app来说:

1.用户层面上,在不同版本的情况下需要紧跟不同的用户引导页,尤其这类理财类等APP,使用操作都是比较繁琐,因此需要用户引导帮助用户玩好APP;

2.品牌形象上,可以深化品牌价值,比如提炼产品slogon,吉祥物等,启动页是用户打开app,第一眼看到的地方,需要让用户深刻体会到产品的核心价值观。

3.商业用途上,可以利用启动页配合营销事件,实现商业价值。

4.从技术层面,程序可以利用启动页的2~3秒内,预加载一些东西,使得后面的用户体验更好。


启动页更多的是在启动过程中的2~3秒内,体现app的核心的品牌价值,而品牌价值通常体现在产品的情感化设计上。


情感化设计基于三个基本层次水平:本能水平的设计、行为水平的设计、反思水平的设计。

本能水平的设计——外形(UI界面,整体视觉感受);
行为水平的设计——使用的乐趣和效率(把完成目标前的过程乐趣化,如何最便捷的触达相应功能,或达成某结果);
反思水平的设计——自我形象、个人满意、记忆(强化品牌传播,构建品牌形象,让品牌成为一种文化)。


情感化设计点:登陆界面、启动页、引导页、节日闪屏、404、刷新加载...




强化品牌标识,有利于品牌传播



上图是美团外卖的闪屏,以插画这种具有亲和力的表现手法去搭建一个场景,讲一个小故事隐喻一个情感。然后传递给用户一个主题。而插画下方,则是美团的品牌标识:袋鼠LOGO、文案“美团外卖,送啥都快”。


当你听到电脑发出“滴滴滴”的时候,你就知道这是QQ来消息了,声音也是一种品牌标识。



弥补产品在用户使用过程中发生的意外



上图是ofo共享单车在用户退押金时的三个提示页面,分别是告诉用户ofo的作用是让你便捷轻松出行,退押金后损失的优惠,最后是用利益诱惑你。从三个层面去打用户的痛点。不过确切来说只有第一个界面算是与用户情感化交流,后两个算是再利用人的贪欲。


关于文案的情感化设计要分情况,根据APP所分领域、调性和目标用户人群的特性而定。



转自:站酷-呜呜吉良斯基

如何创建精致的UI界面布局篇

鹤鹤

前言

前面已经完成这个系列的 “排版和图形”两篇文章,本周接着后面的 布局篇幅,我们知道布局的好坏直接影响产品美观度,不同形式的布局,给用户带来的感受是不一样的,产品也将会有不一样的性格,因为布局直接影响界面空间疏密程度,不同产品都有着不同空间,那么我们要如何做,才能更好的去布局,并且能在激烈的竞争中脱颖而出,现今大部分产品基本都是长得差不多,作为设计师更应该去多研究一些布局趋势,并能将其融汇在自家产品中。 




为什么要重视布局

- 
布局对界面设计来说十分重要,不仅是我们常说的在移动端或者web端的设计中,他在车载中、电视端UI或者VR设计同样有很大影响。我们知道界面设计中最关键的五大基础语言;形,色,字,质, ,其中 构(结构)即是我们所说的布局,五个维度之前已经和大家分享了 图形和字体篇,今天我们可以看下布局对界面设计的影响,以及我们该如何通过布局来使界面设计看起来更加有范,更有自己的视觉特征点在里面。 




目前主流布局趋势是怎样的

-

前面在向大家介绍布局的重要性和他对界面设计的影响,那么如果我们需要做出一些比较有创新的布局来提高界面精致度,该如何去下手呢?我们可以通过观察目前主流一些趋势做法,了解国外设计师如何找到更有创意的方式来设计他们的布局 - 并将一些创意运用到界面设计中的,下面我们一起看下。 





偏移与叠加网格布局

-

网格布局我相信大部分人都知道,很熟悉,那么今天所说的偏移叠加网格布局是什么样子的呢?其实就是我们在设计界面时候,把最底层基础网格搭建好后,上层的内容排版,通过错落叠加方式来布局,这种布局的优点是留白空间大,呼吸感强,图文错落交织一起,形式感增强。缺点是,运用的范围会小一些,承载内容少,一般Web端运用比较多。当然也有一些移动端设计个性化产品存在这样的布局 (Rover APP)可以去下载体验下。 


上图文字与图片交叠错落排版,图片与图片之间也是网格交错



上面移动端设计,设计师通过留出左侧空网格,整体内容往右侧偏移,导航相对内容来说做了差异化设计,并未进行偏移设计(看我上图红框部分)  。这样做的目的是因为,我们点击汉堡菜单的时候,本来整体就要往右侧移动,如果再继续移动,那么内容会显示不下,同时视觉效果并没有很好



半偏移网格布局,界面中并非所有的内容都偏移底层网格,而是部分模块这样去做,原因是内容多的情况下。





分屏布局

- 

分屏布局,顾名思义就是将屏幕进行几种不同区域的划分,然后内容分布排版在里面,分屏布局解决的主要问题将屏幕大的设备进行合理划分空间设计,一般是在横屏运用比较多,比如PAD,或者WEB或者车机中控屏,下面一起看下分屏布局在实际设计中的具体表现



上图界面设计采用了1/2分屏布局,将图片与内容文字进行区域划分,下图是将主文案摆放在分割区域中间(文字较少情况下可以这样去做)增强形式感。当然分屏布局可以有多重形式,列如,2/3,1/3,3/4等等,可以根据内容进行选择合适分屏





Z轴视差布局

-

视差布局,在web app或者web端布局常用比较多的一种,运行方式当滑动页面内容时内容与内容之间运动速率会有时间差,同时Z轴空间位置也会有深度差异,这样就形成了视差效果,视差布局一般在H5界面出现比较多,用于营销场景会多一些,当然WEB端倒是比较常见 


地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/





内容重叠布局

- 
内容重叠布局,打破了传统平整的极简注意风格,扁平化设计将会加入Z轴空间元素,使得整体设计有了新颖的布局方式,这也是一种区分竞争产品的布局方式,一般内容重叠产品大多出现在偏杂志化设计的产品中,如之前我介绍图形篇时候提到 韩国29cm
他们详情页,运营页面运用了重叠布局。 



地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/






卡片布局

- 
为什么要把卡片布局拿出来讲?卡片布局应该是我们见过最多的布局了,卡片布局也会有很多种方式去布局,根据产品内容复杂程度去建立卡片容器大小,卡片作为承载内容的容器,对于响应式布局也是非常有利的支持,我们看appstore,behance的移动端,都是卡片布局。 



卡片布局还有一个最大好处就是,他能够封装内容,使得画面布局整洁,所有内容都往容器里面放,信息之间保持很好的区分



全封闭卡片布局,内容之间通过卡片封装,中间无空隙





自由式网格布局

- 
这种网格布局相对来说比较开放性的,布局上多以卡片承载内容为主,卡片跟随隐形网格随机分布在画板中,有点类似我们说的暴瀑流布局方式,这种会比较灵活,一般会在摄影类,杂志类,文艺类产品居多。 







如何运用这些布局进行创新设计

-

上面已经列举了目前比较流行的一些布局,可能部分人还是感觉不会使用,也不会很好的去利用在自己设计中。要么就直接把别人布局抄袭过来,其实是有方法的,我们可以把自己认为比较好的一种布局拿出来,然后拆解他,拆解完后,再来重新组装,组装的时候,你可以参考下其他布局,两者集合起来,就像乐高积木一样,你可以有很多种组合方式。 


上面利用乐高积木思维重新对布局进行拆解组合,当然一切的布局都是基于当前你的主旨,你的产品内容,找到合适布局,然后去研究他,并且拆解,然后重新搭建属于自己产品一套布局规则





总结

-

全文向大家介绍5种布局思路,当然其实不止这5种,但是其他布局相对来说会运用少一些,这些布局我们可以加以学习利用,可以运用在任何设计中去,当然运用的时候,一定要清晰知道自己产品的主旨目标,用户群体,合理运用布局,做出创新设计!


转自:站酷-设计TNT 

如何让你的设计更有说服力?掌握这五个体验设计原则··

鹤鹤

从数个项目中总结出的体验设计原则,包括详细的举例说明

李笑来说过一句话:审美常常并不需要知道原理,但创造美的人必须有方法论,否则不可能持续创造。但是很多人总觉得背方法论是笨工夫,高手难道不应该根据场上局面随机应变吗?但事实是,随机应变才是笨办法,方法论和成语典故、数学定理一样,是人脑思维中的快捷方式,“聪明人”之所以能做到随机应变,是因为他们脑中存有足够多方法论,当遇到事情时,这些方法论像神经一样互相连接,给出最优的解决方案。

 

今天就跟大家分享设计的方法论——设计原则,在方案输出时,可以将设计原则作为方案的自检工具,这样在方案内审时,面对领导和同事的质疑,除了说“大厂都是这么做的”这样苍白无力的解释外,还有更多的设计原则做支撑。

 

一、一致性

一致性的益处:对用户来说,一致性可以降低学习成本,对开发团队来说,可以减少错误,降低产品的维护成本,提高代码和设计的复用率。对企业来说,一致性意味着产品的不同模块要有相似的外观、感觉和行为,这种特性会被扩展到企业其他产品中(比如Adobe旗下的产品都严格保持着相同的标准),有利于强化用户对品牌的认知,建立品牌忠诚度。

 

一致性的弊端:很多设计师容易被这一原则而禁锢,进而成为设计师偷懒的借口,设计师有时为了强调一致性而忽略了特定情境下的用户行为和使用模式,所以在设计时不能只关注用户的感觉和品牌认知,要根据特定场景敢于创新。

 

一致性可以从以下几个维度分析:

 

1、交互行为一致性,交互行为一致性又包括操作方式,控件,控件位置等。拿最近做的项目举例,「转到银行卡」和「信用卡还款」虽两个不同功能,但尽量使模块内控件,控件位置及操作方式保持统一。


2、视觉表现一致性,包括风格,色彩,文字,图标,图片等。风格和色彩的统一比较容易理解,这里详细说一下图标和图片如何保持统一。


图标的统一性:

1)一款产品在各个平台上的图标要一致

2)多款产品在一个平台上的图标之间的风格或规范要一致

3)一款产品的每个图标的风格、细节、体量感上要一致


如何做到每个图标风格,细节,体量感上的统一?

1)保持图标的复杂程度或简约程度统一

2)不使用潦草、手绘的造型,几何形更容易达到统一

3)保持图标的维度统一(二维/三维)

4)保持图标阴影、渐变等样式统一或均无样式

5)保持图标颜色或图标背景的颜色统一

6)保持图标的尺寸和比例统一(体量感)

7)保持图标线的粗细统一

8)保持图标圆角大小统一


如何做到图片的一致性:

1)图片的处理方式一致(尺寸比例,圆角,投影)

2)图片的风格一致,图片风格是否保持统一视产品属性而定,像淘宝这样的电商平台想要保持图片风格的统一性简直要了店家的命,但是图片的处理方式可以做到统一,比如淘宝的商品图大部分是灰色背景等。

 

3、文案的一致性,文案的人称,风格保持一致,网易云音乐的文案都是用的第二人称,且具有很强的趣味性。

二、优先级

优先级可以从以下几个维度分析:


1、功能优先级:把握核心需求,突出亮点功能,拿最近做的项目举例:转账主页面功能优先级最高的是「转到银行卡」「微转账」,所以在页面布局、所占比重上强调这两个功能,同时上滑时两个按钮变小冻结在页面顶部,方便用户快捷使用。


2、内容优先级:内容分级,突出核心内容。拿最近做的项目举例:代金券详情页,根据用户使用卡券的场景,以及数据分析得出的内容优先级对内容进行布局与设计。将优先级最高的代金券二维码放在用户视线触达的位置,当用户上滑时,底部出现全局浮动的按钮,可快速显示二维码。


再比如,转账后的状态页面,用户最关心的内容是转账后的状态及转账金额,其次是收款方信息以及转账备注,将信息进行整理、归类、隐藏、删减,避免不重要信息对用户获取重要信息时的干扰。点击箭头可查看更详细的转账信息,最后的页面设计如下:


3、交互优先级:主要路径清晰,减少干扰和分支。如下转账流程中,根据用户每一步骤的目的与使用场景进行信息呈现,该出现的时候出现,不该出现时隐藏,分步骤进行,使转账这一主路径清晰明了,减少其他信息对用户的干扰。


4、视觉优先级:重要的视觉信息第一眼看到,主要次要信息有所区分。如微信钱包页面,收付款和钱包的视觉优先级明显高于下方的腾讯服务。美团首页上方虽都是功能按钮,通过图标的体量、大小、位置拉开彼此层级,突出展示「扫一扫」「付款码」「红包/卡券」「骑单车」这些功能,很好的引导了用户视线,完成产品目标和用户目标。


三、易读性

易读性可以从以下几个维度分析:


1、使用用户语言而不是开发者语言,贴近生活实际而不是学术概念。图1是改版前的页面,页面的核心目的是通过图表、止鼾次数、分贝向用户传达止鼾器的止鼾效果,呈现方式不直观,且用户对分贝并没有确切的概念,图二将分贝巧妙的转化成蜜蜂的声音,增强了易读性,在这里蜜蜂的声音就是用户语言,分贝即开发语言。


2、符合用户认知与心智,延续约定俗成概念。苹果的首席设计师乔纳森·艾弗说:“好的设计无需认知门槛”,好的设计不需要任何指示用户就知道如何操作。如下图苹果系统的亮度设置,向上滑动是提高亮度,向下滑动是降低亮度,而不是向下是提高,向上是降低。


再比如,根据我们的正常认知,下一步应该在右,上一步在左。


3、保持简洁,不给用户造成困扰与疑惑。还是拿之前做的项目举例:微转账不同于普通的银行卡转账,需要给用户进行解释说明,改版前的说明直接将大段的解释文字展示给用户,可读性差,改版后将大段的解释转化成4个直观的步骤,对用户来说更容易理解。

四、容错性

容错性可以从以下几个维度分析:


1、操作前可预知:有预防用户出错的措施,关键操作有确认提示,及早消除误操作。如图1输入转账金额时提前告知用户银行卡余额,避免余额不足让用户重复输入;图2提前告知用户提取的金额是50的倍数,避免用户出错。



分期还款时,提前告知用户一个账单周期只能申请一次分期,且在用户二次确认的弹出框再次提示。



2、操作中有反馈:给用户明确的错误信息,并协助用户方便从错误中恢复工作。如在分期金额输入错误时及时告诉用户出错的原因。



3、操作后可撤消:允许用户撤消错误操作,如mac系统垃圾箱中「放回原处」功能:



微信对话中的「撤回」功能,这些都体现了系统的容错性。


五、可控性

可控性可以从以下几个维度分析:


1、记忆及预测用户行为,帮助用户做些事情,减轻用户记忆负担。如mac系统的密码管理可以帮助用户记住常用的账户密码:

邮件中,输入收件人的姓,软件能自动检索出该姓下曾出现过的所有用户的邮件地址。


2、对操作给予及时反馈,用户能了解操作是否已生效,用户在界面上的任何操作,不论是单击、滚动还是按下键盘,或者操作状态变化,界面应及时给出反馈。


3、将操作状态或进度显示出来,用户能了解当前系统状况,如让用户实时了解货物的物流信息,会减轻用户等待的烦躁感,同时增加可控感。


4、用户清楚知道自己当前在哪里,退路在哪里,可以去哪里,如分页控件就能明确的告诉用户自己在哪,退路在哪,还能去哪。




5、提供适时帮助、必要的信息提示,如最常见的功能引导



回顾:


一、一致性

1、交互行为一致性:操作,控件,位置。

2、视觉表现一致性:风格,色彩,文字,图标,图片。

3、文案措辞一致性:提示语,功能按钮等。


二、优先级

1、功能优先级:把握核心需求,突出亮点功能。

2、内容优先级:内容分级,突出核心内容。

3、交互优先级:主要路径清晰,减少干扰和分支。

4、视觉优先级:重要的视觉信息第一眼看到,主要次要信息有所区分。

 

三、易读性

1、使用用户语言而不是开发者语言,贴近生活实际而不是学术概念

2、符合用户认知与心智,延续约定俗成概念。

3、保持简洁,不给用户造成困扰与疑惑。

 

四、容错性

1、操作前可预知:有预防用户出错的措施,关键操作有确认提示,及早消除误操作。

2、操作有反馈:给用户明确的错误信息,并协助用户方便从错误中恢复工作。

3、操作后可撤销:允许用户撤销错误操作。



五、可控性

1、记忆及预测用户行为,帮助用户做些事情,减轻用户记忆负担。

2、对操作给予及时反馈,用户能了解操作是否生效。

3、将操作状态或进度显示出来,用户能了解当前系统状况。

4、用户清楚知道自己当前在哪里,退路在哪里,可以去哪里。

5、提供适时帮助、必要的信息提示。


-希望此文对你有一点帮助


转自:站酷-poppy



干货|尼尔森十大可用性原则案例解析

鹤鹤

尼尔森的十大可用性原则,它们被称为「启发式」,<br>被奉为交互设计师的入门法则。

开篇灵魂拷问:


你认为一个怎样的产品才算是一个好的产品?

这个问题耳熟吗?面试的时候是不是有被问到过?
我们经常使用的那些产品,哪些是好的产品呢?

当我们谈论一个 APP 产品时,
作为用户你最关心的是什么?
一般都是是这个产品好用吗?功能复杂吗?
而不是这个产品用户界面颜色好看吗?
交互的动效酷炫吗?

互联网已经深入到每个人的生活当中,
时刻影响着我们;
一个好的产品会给我们带来便捷,
使我们的生活变得简单而又美好;
也会有一些产品使用时会感到不舒服,
糟糕的产品体验会让我们的生活变得复杂而又烦恼。
所以,决定一个产品好不好用,
能不能长期使用都是用户体验直接决定的。
用户体验关注的是在满足用户需求的同时带给用户美好的感受。

接下来我们来聊一聊「尼尔森十大原则」,
这十大原则是具体而又全面的用户体验可行性检验方法。

    
尼尔森是谁?
雅各布·尼尔森(Jakob Nielsen)是毕业于哥本哈根的丹麦技术大学的人机交互博士,他拥有79项美国专利,专利主要涉及让互联网更容易使用的方法。于1995年1月1日发表了「十大可用性原则」。1995年以来,他通过自己的 Alertbox 邮件列表以及 useit.com 网站,向成千上万的 Web 设计师传授 Web 易用性方面的知识,尽管他的一些观点可能带来争议,至少在 Web 设计师眼中,他是 Web 易用性领域的顶尖领袖。2006年4月,并被纳入美国计算机学会人机交互学院,被赋予人机交互实践的终身成就奖。他还被纽约时报称为“Web 易用性大师”,被 Internet Magazine 称为 “易用之王”。
        
尼尔森的十大可用性原则,它们被称为「启发式」,      
    
    
是广泛的经验法则,而不是特定的可用性指导原则。
虽然是1995年提出来的,
但是至今仍然被奉为交互设计师的入门法则,
我们不能把它上升为一种标准,
而只当做一种经验来学习,
然后跟现实中的设计结合来使用。
因为尼老师是从 web 设计提出的十大可用性原则,
我们要结合的是目前移动互联网的特点,

然后在「尼尔森十大原则」的结构下探讨在用户体验上达到的目标。


尼尔森十大可⽤用性原则为:

01. 状态可见原则 

02. 环境贴切原则 

03. 撤销重做原则

04. 一致性原则 

05. 防错原则

06. 易取原则 

07. 灵活原则 

08. 易扫原则 

09. 容错原则 

10. 人性化帮助原则


下面我们就针对每一条来单独分析一下吧~


 ·.  状态可见原则 
系统应该让用户知道发生了什么,
在适当的时间内做出适当的反馈。
不要蒙蔽用户;
沟通是所有关系的基础,无论⼈还是设备。

示例:在淘宝里,我下拉时他告诉我「松开刷新」,也就是现在还没有开始刷新;我松开后状态变更成「刷新中」,表示现在正在刷新。
这样的设计告诉我们,界面现在是什么状态,现在在干嘛,在整个功能的变化过程中我们都能看到对应的文字描述。


其他示例:下拉刷新时的加载中,加载完成提示,收藏成功、支付成功、实付失败等提示。


·. 环境贴切原则

功能和服务贴近用户使用的场景,

符合当前场景用户的体验。

产品的功能和服务应该贴近真实世界,

让信息更自然,逻辑上也更容易被用户理解。


示例:我们在店里买东西的时候经常会听到这样的声音「支付宝导致:5元」就是贴近环境的设计。
商家需要确认你是否付钱,
但是又经常忙于手头的事情无法及时查看;
而这样功能的设计,商家即使在忙着手头的事情依然能通过声音来确认已经收到你的钱了。
这样的设计对于商家和消费者是友好便捷的。


 ·.  撤销重做原则 

在使用产品时了解和掌控当前页面。

如果用户误操作,可以随时撤销,用户在使用产品时足够自由。


示例1:我们用微信和对方聊天时,当我们写了很多字,发出去时却发现其中有错误,这时我们可以使用微信的撤回功能,体验更好的是,撤回消息旁边有「重新编辑」功能,可以让之前编辑的文本回到对话框重新编辑再发送。如下图:


示例2:iOS系统照片的删除和撤回


·. 一致性原则

同样的文字、状态、按钮,都应该触发相同的事情,遵从通用的平台惯例。也就是,同一用语、功能、操作保持一致。主要包括以下五个方面:


1. 结构一致性

保持一种类似的结构,新的结构变化会让用户思考,规则的排序能减轻用户的思考负担。

示例:微信中每个模块的条目都有统一的「图标+文字信息」的结构样式,能让用户快速了解每一个模块;


2. 色彩一致性

产品所使用的主要色调应该是统一的,而不是换一个页面,颜色就不同。

示例:淘宝的图标颜色与界面的主色均为橙色,也包括其中一些标签和强调的文字颜色都是橙色色。整个界面除了图片的有效信息外,都通过灰、白、橙色色来呈现,界面保持了很好的一致性;


3. 操作一致性

能在产品更新换代时仍然让用户保持对原产品的认知,减小用户的学习成本。

示例:微信在对话框和通讯录都采用了左滑出操作的交互,如下图:


4. 反馈一致性

用户在操作按钮或者条目的时候,点击的反馈效果应该是一致的。

示例:QQ的每个分组点击后都是向下展开组内成员列表;


5. 文字一致性
产品中呈现给用户阅读的文字大小、样式、颜色、布局等都应该是一致的。
示例:例如微信几个关键界面的字体:三个主界面内容结构不尽相同,但是,列表的标题字体和间距都一样,这样让整个APP视觉上看起来很舒服;


 ·.  防错原则
比出现错误信息提示更更好的是,用设计防⽌止这类问题发生。在用户选择动作发⽣生之前, 就要防止用户容易混淆或者错误的选择。

1. 限制操作范围与条件;
示例:未输入验证码前,底部的登录按钮是置灰不可点击的,只有填写完整,底部的登录按钮才会变为可点击状态。这就是为了防止用户犯更多错误;


2. 对有风险的操作进⾏二次确认;
示例:删除个好友时,通过二次弹窗给出防错措施。

·. 易取原则

减少用户记忆负荷,在适合的时机给用户需要获取的信息。
1. 为用户提供历史记录、关注、收藏等功能;
示例:爱奇艺为用户提供了看过记录和我的收藏,帮助用户记忆:



2. 选择而不是输入,尽量降低输入成本;

示例1:打车软件自动获取当前位置;

示例2:iOS系统收到验证码后自动带入到键盘,点击直接输入;


·. 灵活原则

对于新用户来说,需要功能明确、清晰,对于老用户需要快捷使用高频功能。不可为了某一种用户,把不必要的信息占据重要部分。主要体现在3个方面:

1. 自定义功能或模块的展示位置;

示例:支付宝首页的应用是可以根据自身喜好自定义的,包括定义常用应用、排序、删除、新增等等。这样用户可以根据自己的个人兴趣定制自己适合的应用分布方式,这就叫做用户定制常用功能,如下图:


2. 将“常用”自动归纳以提升使用效率;

示例:微信聊天界面表情弹窗中会有一个「最近使用」的模块,它把个人平时使用频率或者次数最多的表情进行归类。当用户使用的时候,能很快的找到自己喜欢或者常用的表情,提高了聊天效率;包括饿了么的「我的订单」里的每一个订单都可以通过再来一单重新一键下单,如下图:


3. 缩短操作路路径,提升使⽤用效率与体验;

示例:微信的对话框,当点击「+」调出下面的操作选项时,会默认弹出刚截图或拍照的照片,方便用户直接调取,还有APP长按后出来的快捷操作列表,如下图:


·. 易扫原则

直译:美学和简约的设计;页面不应包含不相关或很少需要的信息,页面中的每个额外信息都会降低主要内容的相对可见性。

示例:如下图列表中出现的信息都是用户比较关注的信息,比如配送费,配送时间,距离等;携程的选择机票界面讲最重要的时间和机票价格放大突出,让用户能一眼看到,如图:


 9 ·. 容错原则

直译:帮助用户识别、诊断和从错误中恢复;我们尽量避免用户出现错误,但当出现错误时,我们应该尽量去安抚用户的挫败感。

⽤配图+文字代替「404」,明确告诉用户哪⾥错了和解决方案。

示例:界面加载失败时的刷新提示,还有登录时的手机号码校验,如果手机格式错误会出现会提示用户手机格式不正确和正确的格式。


 10 ·. 人性化帮助

帮助性提示最好的方法是:

1.无需提示:非常简单易懂,用户看界面就知道怎么操作,无需提示;

2.一次性提示:只需要一次提示用户就懂如何使用;

示例:常见的新功能引导、引导⻚等,示例:


3.常驻提示: 较重要的提示,用于指导或帮助用户;

示例:支付宝转账时,常驻在顶部的安全确认提示,还有转账时的服务费提示,如图:


4.帮助文档:稍微复杂一点的软件,虽然要让他尽量简单但帮助文档都是必要的;

示例:微信设置界面里的「帮助与反馈」,还有支付宝转账时弹出来的「求助反馈」,点进去后的常见问题界面;


以上就是我对Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则的理解和实例解读,希望对大家有所帮助。如果大家同样对这些方面有些兴趣或者看了后有些什么想法,欢迎一起讨论。

转自:站酷-搞设计的月野兔



以人为中心的设计指南(一)

鹤鹤

前言


《以人为中心的设计指南》是我翻译的第二本完整的设计书籍。在我开始广泛的阅览国外优秀的设计团队、设计公司的沉淀输出后,收获颇丰。我意识到很多年轻的设计师尤其是传统意义上的UI,苦于进阶无门,很难系统的去学习设计理论、设计方法以及设计流程,无法系统化梳理设计知识,就只能在有限的设计范围内修修补补,就像你在局限于视觉时没有意识到体验,在忠实于体验时又忽略了商业,总是无法全面的考虑和输出设计方案,这是源于没有系统化的学习。


国外的人机交互、体验设计领域的确发展较早,有着大量的理论和方法的沉淀,国内各大设计团队虽然也开始持续输出一些本土化的内容,但仍然摆脱不了系统化这个问题。因此我从今年开始,就有了翻译国外设计论论体系及对应的成熟可用的设计方法的冲动。如果你读了我往期的文章,你应该了解到了设计思维的五个步骤、了解了用户体验的七要素、可用性方法以及众多可操作的实践方法。


我翻译的内容既有各大设计机构无私分享的内容,也有我自费购买的设计课程,我希望为大家带来一些真正持续影响设计生涯的内容,要实现这一目标,软件技法做不到,只有思维方法、系统化知识可以做到。


本次翻译的《以人为中心的设计指南》是IDEO出产的一本设计工具书,包括具体的设计思路,规范的设计流程,以及各种关键设计原则。它将结合实例,教授设计师如何解决问题,如何以人为本的解决复杂问题。


本书内容量较大,共有四大模块,及73个小章节,我将以连载的形式发布译文,完整翻译后,为大家排版一份PDF格式的电子书,分享给读者,也分享给国内的所有设计师,每个人都可以尽一份力让国内的涉及环境变得更好。


本篇文章主要翻译介绍部分和第一模块的7个小节(标红部分),阐述了IDEO团队在设计过程中一直坚守的心态。下面开始正文。



介绍


以人为中心的设计师意味着什么?
拥抱以人为本的设计意味着相信所有的问题,即使是那些看似棘手的问题,比如贫困、性别平等。此外,这意味着相信每天面对这些问题的人是掌握答案的人。以人为本的设计为任何类型的问题解决者提供了与社区与用户一起设计的机会,深入了解我们所服务的人,构思各种想法,并根据人们的实际需求创造创新性的解决方案。
在IDEO,我们几十年来一直使用以人为中心的设计来创造产品、服务、体验和社会企业,这些产品、服务、体验和企业之所以被采纳和接受,是因为我们把人们的生活和诉求放在核心位置。社会各个领域的创新时机已经成熟,我们已经一次次证明我们的方法行之有效。作为一名以人为中心的设计师,你要相信,只要你坚持从别人身上学到的东西,你的团队就能找到世界需要的新解决方案。有了这份实地指南,你现在就拥有了将这种信念变为现实所需的工具。

接受不同的心态
以人为中心的设计师不同于其他的问题解决者——我们修修补补,不断测试,我们一开始就失败了,而且经常失败,我们花了大量的时间但可能仍然不知道问题的答案。然而,我们勇往直前。我们是乐观主义者和创造者,是实验者和学习者,我们感同身受,不断重复,我们在意想不到的地方寻找灵感。我们相信解决方案就在那里。
通过专注于我们的目标群体并提出正确的问题,我们将一起达成目标。我们会想出很多点子,有些行得通,有些行不通。我们把我们的想法具体化,这样我们就可以进行测试。


然后我们提炼它们。最终,我们的方法等同于疯狂的创造力,不断地推动创新并给予我们自信,它将我们引向我们开始时从未意识到的解决方案。现在,我们要分享我们的设计哲学和心态。
让我们与众不同的七种心态:同理心、乐观、迭代、创造自信、实践、接受不确定性,以及从失败中学习。

理解的过程
以人为中心的设计并不是一个完美的线性过程,每个项目都有自己的特点,但无论你面临什么样的项目,你都将经历三个主要阶段:灵感、构思和实现。通过依次采取这三个阶段,你将与你为之设计的用户产生深刻的理解;你会弄清楚如何将你学到的东西变成设计新解决方案的机会;在最终将你的产品正式上线之前,你会建立并测试你的想法。在IDEO,我们使用以人为中心的设计来处理大量的设计挑战,尽管我们的项目涵盖社会企业到传播活动到医疗设备各个领域,但这种创造性解决问题的特殊方法每次都能帮助我们度过难关。

灵感
在这个阶段,你将学习如何更好地理解别人。你会观察他们的生活,听到他们的诉求和愿望,并逐渐加深你对这个设计挑战的理解。
构思
在这里,你将理解你所了解的一切,产生大量的想法,确定设计的机会,并测试和改进您的解决方案。
实现
现在是你把你的解决方案带到现实中的机会。你将弄清楚如何把你的想法推向市场,以及如何最大限度地发挥它在世界上的影响力。


使用工具
虽然没有哪两个以人为中心的设计项目是完全相同的,但是我们使用相同的设计流程和工具为每个项目进行设计。


例如,为了与我们要服务的人建立深厚的同理心,我们总是对他们进行访谈。


为了保持创造力和活力,我们总是在进行团队协作。


为了使我们的思维更有创造力、更加敏锐,我们总是把我们的想法做成有形的原型,因为它帮助我们解决问题。


因为我们很少在第一次就成功,所以我们总是分享我们的产出,并根据我们得到的反馈进行迭代。


这本指南中的57种方法提供了一套全面的练习和活动,可以帮助你从制定设计挑战到将其推向市场。有些方法你会用两到三次,有些则不会。但是作为一个整体,他们会让你走上持续创新的道路,同时让你所设计的社区或用户成为你工作的中心。 



相信这个过程,即使它让你感到不舒服
以人为中心的设计是一种独特的解决问题的方法,这种方法有时会让人觉得很疯狂而不像一个方法——但如果你总是使用传统的解决方案,你就很少能找到创新的解决方案。这个过程的目的是让你直接从用户那里学习,敞开心扉,接受各种各样的创造可能性,然后专注于最理想、最可行的方案。你会发现自己在这个过程中频繁地推翻假设,当你完成它的三个阶段时,你会从具体的观察到高度抽象的思考快速变换,然后再回到原型的具体细节。我们称之为发散和收敛(菱形设计法则)。 


在构思阶段,通过更广泛的思考(大范围,多领域),我们想出了各种可能的解决方案。


但因为我们的目标是最具可行性的方案,所以我们必须确定,在这一系列的想法中,哪一个最有可能真正发挥作用。你会发散和收敛几次,每一次新的周期,你会越来越接近一个投放市场级别的解决方案。


创建真正可用的方案
以人为中心的设计是一种独特的定位,最终目的是达成解决方案的可取性(用户角度),技术可行性,商业可行性。
首先从用户开始,了解他们的希望、恐惧和诉求,我们很快就能发现什么是用户亟需的。一旦我们确定了一系列能够吸引用户的解决方案,我们就开始着手于在技术上可行的方案以及如何使解决方案在经济上的可行性。这是一个平衡的过程,但这对于设计成功且可持续的解决方案至关重要。

Image title


一:心态


1.创造性的信心

任何人都可以像设计师一样理解世界。作为一个问题解决者,解锁这种潜力所需要的只是创造性的信心。创造性的自信是指每个人都具有创造力的信念,而创造力不是绘画或构图或雕刻的能力,而是一种理解世界的方式。
创造性信心是以人为本的设计师在实现思维的飞跃,信任他们的直觉以及追求他们尚未完全弄清楚的解决方案时所依赖的品质。我们相信,您可以并且将会为问题提出创造性的解决方案,并且相信所有这一切都需要着手去实践且深入尝试。
它是一种自信,相信你所需要做的只是卷起袖子投入进去。创造性的自信会驱使你去做事情,去测试它们,去不断犯错,然后继续前进,确信你会到达你需要去的地方,并且你一定会一路持续创新。
建立创造性的自信需要时间,实现这一目标的部分原因是相信以人为中心的设计过程将向您展示如何以创造性的方式解决手头的任何问题。从微小的成功开始,然后建立一个更大的目标,你会看到你的创造性信心的增长,不久你就会发现自己变成了一个非常有创造力的人。


2.着手去做

作为以人为本的设计师,我们之所以这样做,是因为我们相信有形(实物、可视化)的力量。我们知道,把一个想法变成现实,可以揭示出许多仅仅靠理论所不能揭示的东西。当目标是将有效的解决方案投入使用时,您不能生活在抽象和理论中。你必须让它们成为现实。 以人为中心的设计师是实干家、修补匠、工匠和建设者。我们使用任何我们可以使用的东西,从纸板和剪刀到复杂的数字工具。我们建立我们的想法,这样我们就可以测试它们,在真正去做一些东西后,我们会发现以前从来没有想到的机会和复杂性。制作也是一种奇妙的思考方式,它有助于我们关注设计的可行性。此外,把想法变成现实是一种非常有效的分享方式。如果没有来自人们的反馈,我们将不知道如何进一步完善我们的想法。



3.从失败中学习


失败是一个非常强大的工具,设计实验原型、交互和测试他们是以人为本设计的核心。要知道并非所有这些能发挥作用,当我们想要解决一个大问题时,我们一定会失败,但如果我们保持良好的心态,我们就会从中受益。


以人为中心的设计是从一个不知道如何解决设计挑战的地方开始的。只有通过倾听、思考、构建和提炼我们的答案,我们才能得到对我们的用户有用的东西。“早失败,早成功”是IDEO的一个常见口号,它的力量之一就是允许出错。由于拒绝冒险,一些设计师实际上与真正的创新机会失之交臂。
托马斯·爱迪生说得好:“我没有失败。我刚刚发现了10000种行不通的方法。对于以人为中心的设计师来说,找出行不通的东西是找到有用的东西的一部分。
失败是以人为中心的设计中固有的一部分,因为我们很少在第一次尝试时就能取得成功。事实上,第一次尝试就做好并不是重点。关键是把一些东西创造出来,然后用它来不断学习,不断提问,不断测试。如果以人为本的设计人员最终取得成功,那是因为他们曾经失败了无数次。


4.同理心


同理心是指站在别人的立场上,理解他们的生活,并从他们的角度解决问题的能力。 
以人为本的设计是以同理心为前提的,你为之设计的用户是你通往创新解决方案的路标。你所要做的就是感同身受,理解他们,并在设计过程中把他们时刻挂在心里。


比如长期以来,国际发展界一直在设计解决贫困问题的方案,却没有真正同情和理解它所要服务的人民。但是,通过设身处地为我们的设计对象着想,以人为中心的设计师可以开始通过一个新的、强大的视角来看待这个世界,以及所有改善它的机会。
让自己沉浸在另一个世界中,不仅会为你打开新的创造可能性,而且它能让你抛开先入为主的理念和过时的思维方式。与你为之设计的用户产生共鸣是真正理解他们生活的背景和复杂性的最佳途径。但最重要的是,它将使你的设计过程完全围绕用户,从而产出对他们来讲真正有用的东西。

5.接受不确定性


以人为中心的设计师总是从不确定的问题开始。在一些注重于快速找到方案的公司文化中,这或许不是一个好的开始。但是从第一步开始,接受不确定性的设计人员会勇敢的走出去,追求很多不同的想法,甚至找到意想不到的解决办法。通过接受这种模糊性,并相信以人为中心的设计过程将引导我们走向一个创新的答案,我们实际上迸发出更强的创新能力。 


将以人为中心的设计师与其他设计师区别开来的一个特点是,我们相信总会有更多的创意。我们不再执着于自己的传统想法,因为我们知道我们会拥有更多新的想法。因为以人为中心的设计是一个如此富有创造力的过程,而且因为我们倡导团队合作构思,所以很容易抛弃不好的想法,保留一些一般的想法,并最终得到最好的想法。
虽然这似乎违反直觉,但这种不确定性实际上促使以人为中心的设计师进行创新。
如果我们一开始就知道答案,我们能学到什么呢?我们怎样才能想出创造性的解决方案呢?我们为之设计的人会在哪里指引我们?拥抱不确定性实际上解放了我们的创造力,鼓励我们去追求一个最初无法想象的答案,这让我们走上了持续性创新的道路

6.乐观

我们相信设计本身就是乐观的。 


为了迎接一个艰难的挑战,特别是像贫困这样巨大而棘手的挑战,我们必须相信,创新是唯一的方法。如果我们不这样做,我们甚至不会去尝试。乐观是对可能性的拥抱,即使我们不知道答案,但我们相信总会有一个方案等待我们去挖掘。
除了推动我们走向解决方案,乐观还使我们更有创造力,鼓励我们在遇到死胡同时继续前进,并帮助项目中的所有参与人员凝聚在一起。从解决问题的角度来处理问题,会给整个过程注入解决最棘手问题所需的能量和动力。
以人为中心的设计师总是专注于可能发生的事情,而不是可能遇到的无数障碍。这是我们的核心信念——每一个问题都是可以解决的——这就是以人为中心的设计师的乐观。

7.迭代

作为以人为中心的设计师,我们采用迭代的方法来解决问题,从我们的用户那里得到反馈是促使解决方案诞生的关键部分。通过不断地迭代、持续改进我们的工作,我们会有更多的想法,尝试各种各样的方法,不断释放我们的创造力,更快地找到成功的解决方案。


迭代使我们保持敏捷、反应灵敏,并训练我们一直专注于核心的想法,经过几次迭代后,每个细节都恰到好处。如果你每次建立一个原型或分享一个想法时都追求完美,那么你就会花很长时间去完善一些不一定有效的东西。但是,通过构建、测试和迭代,您可以不花费过多的时间和资源来推进您的想法,直到您确定它是正确的。


在项目早期,我们不断进行迭代,因为我们知道第一次不会得到正确的结果。迭代让我们有机会去探索,去犯错,去验证我们的直觉,最终会得到一个将被采纳的解决方案。我们进行迭代,因为它让我们不断学习。我们不是躲在工作室里,打赌某个想法、产品或服务会大受欢迎,而是迅速地走出去,让我们的用户成为我们的向导。



第一部分就到这里了,重新回顾下,在本篇文章中,你应该了解到IDEO在设计过程中一直坚守的7个心态。

他们分别是创造性的信心、着手去做、从失败中学习、同理心、接受不确定性、乐观、持续迭代。

产品思维·用户体验中的五个层次(下)

鹤鹤

昨天我们讲了用户体验分为五个层次,从内而外分别是:

①战略存在层 > ②能力圈范围层 > ③资源结构层 > ④角色框架层 > ⑤感知层


以下案例来自于 梁宁老师的《产品思维30讲》

苦思冥想,还是只有梁宁老师这个案例最为合适;


说到“搜索”,你会想到哪些呢


如果我没猜错,你想到的第一个词是:“百度”

研发行业的话,可能我们用的浏览器应该是:“google”居多

但你是否用过古老的“yahoo”呢?



今天,我们就来说说搜索业三大巨头的战争,

他们之间的战争,有助于我们去理解用户体验的五个层次


首先


Google与百度


说到百度与谷歌的竞争前,梁宁老师说了下雅虎:


我们做设计的最知道,色彩是非常重要的元素,如果以科技为关键词,

我们想到的第一个词,一定是蓝色,蓝色一来不会太刺眼,

又相对普遍,所以不会出现审美疲劳,

而yahoo用的是什么为主色呢,是一个我们最不会用的颜色——紫色

 


那么,假如有个用户指着那个“紫色”的“音噗忒(input)”说:“不好用”,

他指的是什么呢?


1.是感知层,不喜欢蓝色?

2.按钮的形状太突兀?尺寸太大?位置不合适?

3.还是说是框架层,内容的排列方式没有令他满意呢?


说点令人兴奋的,我们在百度搜索“大乐透”,

度娘显示的结果第一条,就是本期开奖的结果,

然后是百度百科对“大乐透”这个词条的解释,

其次的就是关于大乐透的各类新闻和各种“行业大师”对下期开奖结果的分析;


百度的框架的意义就是,能一步走完,绝对不让用户走一步半,

为什么百度能给出这么符合用户的搜索结果呢?


虽然这个结果离不开的肯定得是百度的爬虫技术是数以毫秒为单位的,

但百度爬虫技术肯Google当然还是没法比的,

最重要的什么呢,是百度不单只是去爬数据,而且他还建立数据,


当整个互联网的数据都不多的时候,

百度做了一件Google没有做的事,

就是我们刚才说到的“建立数据”

百度做了两个平台:1.百度贴吧     2.百度知道


展示下各自的装备


一个在升级技术去爬,一个在建立数据

你觉得,谁会赢到最后呢,


你说,Google为什么不跟着做呢,

Google 的性格是绝对不会的,用梁宁老师的话来说:

“以Google的清高和耿直,不会做这样的事,甚至当用户有需求时,Google还会为百度导流量,给对手送弹药”


但至此,搜索业都还是处于资源层的比拼

这一仗,百度带着它的百度贴吧和百度知道,拿到了胜利!


但三十年河东,三十年河西

百度在移动场景下输给微信,也是因为微信以百度战胜Google同样的方式,以公众号的形式建设资源;



Yahoo与Google


2004年,一批华尔街精英做了搜索引擎的比评,评测结果呢,Yahoo优于Google,Yahoo胜利,

但奇怪的是评测完之后,大家打开了Google工作,


为什么会出现这个情况呢,


他们的评测方式非常的简单,对,就是简单,


第一步:选几个关键词

第二步:在各个搜索引擎中搜索

第三步:将结果打印

第四步:比对结果,认为哪个好,就投一枚硬币


最后雅虎获得的硬币最多

简单吧,你闲的蛋疼也可以去试试,


那为什么雅虎会胜出呢,因为雅虎用的后台搜索引擎也是Google的,

雅虎只是对热门的关键词做了人工优化,

所以结果不是跟Google一样,就是比Google好,

。。扯吧,但就是这样。


那为什么这批精英日常还是会用Google呢,

竟然是因为框架层,因为Yahoo的设计比较喜欢高大尚,所以界面相对宽松,易看,

但缺点就是一屏只能显示一两条,



而谷歌的搜索结果一屏展示好几十条,

所以对于搜索引擎这个东西来说,

我们更在乎内容,

而形式恐怕稍微次要,


在感知层差别不大的情况下,Yahoo竟然在框架层就输了一局,恐怕很难想到吧



设计师,要有产品思维!

但在互联网设计的今天,可能这五个层级有了一些整合,

但是,在用户抱怨体验不好时,你能分辨,会去分辨用户是说哪个层级吗?

还是说你会跟用户讲道理,说服他们呢?


销售天然的本领就是说服,掌握各种说服的技巧:

摆事实,讲道理,打比方,举例子,要同情,装可怜,将心比心,软磨硬泡;

如果是现实中,或许你能说服用户,


但作为一个互联网产品,别说说服,你连站在旁边说句话的资格都没有,

何况,比起用自己的道理说服用户,我们更应该做的,不应该是挖掘用户真正的需求吗?


从今天起,

不再做销售:按我的来

而要做产品:顺你的意


用户没有我们这么专业,他的表达方式就是:情绪;

如果我们不能接受这个表达方式,就不可能挖掘到用户的真正需求,


总结一下:

  1. 接受用户的表达方式,通过五个层面,挖掘到用户真正的需求;

  2. 销售是按我的来,而产品是顺你的意

取消与关闭:请在设计上区分差异

鹤鹤

3个方法,区分取消与关闭,避免丢失用户正在操作的内容。

概要:区分这两种操作,可以很大程度上能避免丢失用户已操作的内容。在关闭视图之前保存用户的更改,使用文本标签而不是“X”图标,并在破坏性操作之前提供确认对话框。



一、让人迷惑的“X”图标


很久以前,“X”这个符号是用在地图上,标记“宝藏的藏身地”。但在今天的数字化界面中,“X”符号不再用来标记位置,而是被用来取消进程,或者关闭某个临时页面/弹框。但是如何确定“X”代表的是“取消” or “关闭”?有的时候可以确定,有时却模糊不清难以界定。

  

其实,主要的问题在于“X”图标缺少了文本标签。当同一个图标在不同的界面,却代表不同的含义,该图标的可用性就会受到影响,因为用户判断不了到底是什么含义。



二、为什么要区分“取消”与“关闭”


当用户单击/点击“X”按钮来关闭模态弹框或视图时,系统会完全取消该过程并清空之前所有操作,这让人沮丧,甚至抓狂。因为用户通常认为“X”图标表示取消或者关闭,所以区分这两种可能性对于交互的成功至关重要。


在某些情况下,区分取消 or 关闭并不重要。当一个弹窗占据你的大部分屏幕时,点击“X”按钮(尽可能快地),既可以关闭该模态,也可以取消它可能触发的任何进程。


但是,如果页面中包含正在运行的计时器,正在播放的音频,正在选择多个选项标签,或其他类型未保存的内容,那就很有必要说明“X”图标所代表的意义。因为用户可能打算让计时器或音频继续运行,或者希望立刻应用这些选好的选项标签,或保存正在进行的工作,同时希望关闭该视图继续其他操作。

 

例如:丝芙兰在结账过程中,使用模态窗口来展示用户可以添加到购物车的免费商品。在以下示例中,单击“ ADD(添加)”按钮选择商品后, 该按钮直接被变成了“ Remove(移除)”,看起来似乎商品已经被添加到购物车中了。但是,实际上当用户单击右上角的“X”图标后,该商品并不在购物车中。他需要再重复这个步骤,最后点击“Done(完成)”按钮,商品才会被加入购物车。

Sephora:单击右上角的"X"会取消选择这些试用商品整个过程。用户必须先单击“ADD”,再单击“Done”才能将商品添加到购物车。



三、如何避免丢失用户正在操作的内容


要避免丢失用户正在操作的内容,首先需要确定用户的意图 - 取消 or 关闭 - 并提供明确的选项。有以下几种方法:


  · 主动要求用户确认他们的意图

  · 使用明确的文本标签而不是模糊图标

  · 显示两个不同的按钮:“X”图标表示关闭视图(可以自动保存页面内容/操作),而“取消”则代表放弃该过程


1、要求确认


如果用户在已经执行操作的模态弹框或页面视图中,点击“X”图标,UI则可以在关闭视图之前,直接询问用户是否应用该操作,来确认其意图。此解决方案非常适合会破坏用户工作的破坏性取消操作例如,过滤器视图可能会被意外关闭,并且关闭会导致用户丢失其选定的选项。


这个问题在移动端界面上很常见,因为过滤器视图占用了很大的屏幕空间,这使用户很难或不能判断是否已经应用了那些选择。为了防止这种潜在的错误,在关闭过滤器视图之前,跟用户确认是否要应用这些选择并关闭视图,抑或是清除这些选择。例如:下图中,当用户选择后,点击“X”图标时,Lowes 会出现如下确认弹框。

左 :点击"X"图标或返回箭头,所有的选项都会被取消,并将用户带回上一个页面。右:点击“X”后,出现一个确认对话框,确认用户是应用还是取消筛选,然后再返回结果列表页。

 

同样,当用户关闭正在进行的课程时,语言学习应用- Duolingo 会显示一个确认对话框-课程进行中不能中途离开,除非确认“退出”。至少,该APP向用户传达了这一限制,同时他们也可以选择“取消”来继续课程。点击“X”按钮将结束当前课程。为了防止出错,结束前会出现一个确认对话框。

 

缺点:

a. 虽然确认对话框在避免“X”图标有歧义方面很有效,但它却添加了额外的步骤;

b 用户在按下“X”图标之前还是不知道它到底做了什么,代表什么意思,因此他们可能会对这个操作感到疑惑。



2、使用文本标签


不要完全依赖对话框来让用户确认模糊的“X”图标,而是使用明确的文本标签。文本可以消除歧义,并清楚地传达将发生的操作:取消与关闭。

 

Yelp的筛选页面在屏幕顶部提供了标有”Cancel(取消)“和”Reset(重制)“的按钮,在底部提供了一个大大的”Apply(应用)“按钮。类似地,Etsy中的 Filters视图提供了“Clear(清除)”和“Done(完成)”两个按钮。


注意:Etsy使用“Done”而不是“Apply”,因为过滤器一经选择就可以被应用,而这里是关于开关切换与否的建议。

(左)Yelp:Cancel、Reset 和 Apply 这三个文本标签既直接又清晰,这样用户就不太可能不小心关闭视图而丢失他们过滤器中的选择。(右)Etsy:Clear 为用户取消提供了一种清晰的方式。而点击 Done 则返回到“产品列表”页,其中的选择已经应用。




3、关闭并保存


果必须使用“X”图标而不是文本标签(比如为了以节省空间,或者因为正在遵循团队的设计语言),请谨慎使用,并在用户完成前保存操作/内容。另外,可以提供一个单独的“取消”按钮,让用户在进程之外有一个紧急出口,并消除“X”(关闭 or 取消)在两种含义之间的歧义。

 

例如: Gmail会自动保存在非模态窗口中填写的邮件信息到草稿(Drafts)。这样的好处是,用户在需要折叠或关闭该窗口时,仍然保存原来的内容以便于下次继续编辑。将鼠标悬停在消息窗口右上角的“X”图标上时,会显示一段提示:Save & Close(保存到草稿并关闭)。此外,点击窗口右下角的“垃圾桶”图标可以删除该邮件 - 这个图标离顶部的“保存和关闭”选项很远,可以防止用户误点。

Gmail:Hover 透露, “X”图标是用于关闭窗口而不是删除草稿,它允许用户保存并关闭消息窗口而不会丢失刚刚正在编辑的邮件。

 

对于长进程或倾向于在后台运行的进程(如计时器),默认自动保存也是一种很好的解决方案。

 

例如,Glow Baby中,后台运行喂食或睡眠计时器时,用户还可以浏览APP的其他区域。因为这些计时器一般会运行很长一段时间。此功能还能让用户在APP中做其他的任务操作,例如记录之前换尿布的时间、浏览文章、逛论坛等。点击计时器视图中的“X”图标也只是关闭窗口并不会取消正在运行的计时器。

Glow Baby:(左)点击运行计时器视图中的“X”图标,在不停止计时器的情况下取消视图,从而允许用户继续使用APP记录其他类型的事件、参与社区讨论、阅读文章等。(中)运行计时器的状态显示在屏幕顶部的状态栏中。(右)在计时器暂停时点击“X”图标,弹出“放弃”或“取消”按钮以确认用户的真正意图。


 请注意:在关闭前保存中间工作或维护正在进行的过程是主动的,但有时可能会与用户的意图相反:如果用户打算通过单击“X”按钮取消其选择,那自动应用这些选择可能会令人困惑和沮丧。


这就是为什么还必须有一个单独的“取消”按钮,给用户一个出口,而不是强迫他们必须关闭时自动保存。



四、结论


虽然“X”图标会造成模棱两可,而且经常导致可用性问题,但它不太可能马上从所有接口中消失。设计人员应该注意“X”图标的多重含义,消除“关闭”和“取消”之间的歧义,并提供确认对话框或自动保存等保护性措施,避免丢失任何用户正在操作的内容。


若存在疑问,请记住:先保存,再退出。



原文作者 | Aurora Harley

编辑作者 | WanSU

原文地址 | https://www.nngroup.com/articles/cancel-vs-close/

本文版权归原作者所有;仅供学习使用,转载请注明出处。



五、小思考


读上面这篇文章的一个小启发:


为什么手机验证码登录微信/淘宝时,验证码输入错误,二者都是用的模态对话框提示用户,而不是用Toast呢?

a. 微信和淘宝的用户群体都很庞大,几乎横跨所有年龄层。Toast出现又自动消失的交互体验,用户会感到不可控,尤其是对大龄、老龄的用户不够友好。

b. 也有悖于iOS人机交互指南中提到的“用户控制”这一原则,我想这也是iOS设计语言没有Toast这种控件的原因之一吧。

c. 而模态对话框虽然干扰性较强,但用户可以随时控制,在使用过程中是用户掌握主导权。


补充:Toast这一控件,原是Android系统的控件。但自Android 5.0 推出原质化设计后,Toast就被弱化,而是将 Snackbar 作为官方推荐的控件。如今在 Material Design中更是找不到 Toast的踪影。主要原因还是 Snackbar 在交互友好性方面比 Toast 要好,例如:支持手势交互、支持与CoordinatorLayout联动等。所以说 Toast都过时了呢,应该讲 Snackbar。

日历

链接

个人资料

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

存档