首页

交互体验设计的核心概念之:示能与意符

ui设计分享达人

很多没有接触过交互体验的设计师小伙伴们,总有会面临一个坎,那就是看别人做交互和体验的方案总是特别简单,一个流程或原型别人做出来之后,我们心里总会想,那不就是这样嘛?换我也能做,但是只要自己一上手就不行了。


为什么?因为我们总是看着别人的结果下结论,而忽略了中间的思考过程。

就好像是吃着别人做的番茄炒蛋,你会觉得不就是番茄和鸡蛋一起炒一下,然后放点盐和糖就好了嘛,我们只看到了结果,而忽略了对食材的选择、处理、顺序、结合。




1.示能


当我们看到一个控件,你觉得它不就应该在那里嘛,但轮到自己开始做,就压根想不到要去用那个控件,甚至是信息布局、流程节点、整体结构都规划不出来。不知道大家有没有看上一篇原创文章结尾那个作业,如果做过的小伙伴可以发我交流一下。传送门--》


所以很多UI设计师觉得做纯执行的工作很没有意思没有价值。因为方案是别人做好的,思考过程也是别人的,而商业设计师的核心是解决问题,解决业务和用户的问题,既然解决问题的角色都是UI的上游,那么UI设计如何体现价值呢?当然就是把交互体验的核心底层概念搞懂,和交互设计一样从设计侧去思考问题,赋能业务。


OK,那么来我们先来讲:示能



1.1示能


心理学家吉普森将示能描述为:“关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。



用很直白的话来讲,意思就是:事物通过自己外在的形态,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打开的门,告诉人们可以进出、通过。一张椅子,人可以坐、可以靠。


假如,你面前有一扇门,门上有一个把手,这扇门告诉我可以利用这个把手与我进行互动,你可以用手、可以用脚,也可以用舌头,但手是最方便的。如果只是单扇门,那么我们可以利用推或者拉的动作打开,但如果是两扇门并排,两个把手在中央靠近,那么这时候门展示出来的意思就是两扇门都可以推或拉。但如果门把手在门的靠外两侧,那么意思就变了,变成了将门侧滑后才可以通过。


那门为什么要设计成不同样式来展示不同示能呢?这个留给大家思考,这三种门设计的初衷是什么。



在我们数字产品中可以有什么体现呢?例如一个开关控件(switch),开关本身具有两种互斥的属性和功能:开/关、启动/禁用,看到开关控件的外在样式,我们可以判断当前开关所属模块以及意符指示内容的状态是属于打开还是关闭。


开关在现实生活中的表现样式有很多,例如一侧翘起的开关、可以拨动的开关、具有段落的按压开关、分型控制的开关、旋钮开关等



大家别看开关看起来简单,但是在设计起来会遇到不少的问题,因为状态和意符形态在我们日常中过中很难成为一个标准,例如最常见的一侧翘起的开关,如果不加意符,我们不知道让哪边翘起才是开/关。如果你的房间就一盏灯,那么很简单,我闭着眼睛去按就行了,灯灭着那肯定就是关,再按一下那就是开。但如果在客厅中有多个并联的开关怎么办,一个灯可能收到2处甚至3处开关的控制,而每处开关的数量会在3-5个,这个时候不用意符去标识,就很麻烦了。



回到数字产品上,开关的示能就简单多了,有颜色的状态表示开,灰色状态表示关,但是开关控件在刚用在数字产品上的时候,很多人经常误以为是滑动交互来控制开关,虽然滑动也可以,但本身依靠更简单的点击触碰就可以了。但如果控件做的很长,那么滑动的示能就会更明显。



开关比较让人产生歧义的地方来自于意符,因为很多新人将一些控件的属性认为是有重叠关系,可以混用的,那就大错特错了,等会讲。



1.2.反示能


和示能相反,指的是任何物体之间不能进行怎样的互动。


例如我们经常做的人体工学椅,你可以靠坐在椅子上,并把手放在扶手上,但你无法在椅子上蹦跳,因为椅子无法支撑剧烈晃动。你也不可能用椅子打游戏,它本身不具备这样的功能。再比如我们裤子的口袋,设计师通过设计他的形状、大小、材质,帮助我们去盛放一些小物件,例如钥匙、手机、卡片,但是笔记本电脑你塞不进去,一头猪更塞不进去。


数字产品中也会遇到一些有很明显反示能的控件,例如segment Controls(分段控件/分段选择器/分段选择控件),它是iOS的原生控件之一,该控件的反示能就是无法通过左右滑动界面切换不同标签的视图,和tab不同。



并且在该控件的描述中,seg通常数量只能在5个以内,并且5个标签分别属于同类型的数据分割,只支持点击切换。它不能展开、不能滑动、不能移动、不能悬浮、不能进入二级页面也不能翻转。


那有没有一种可能,或者一个场景需要这两种控件同时具备一些属性呢?是有的,例如这样



在标签下是列表,而列表也支持轻扫的交互进行删除,如果使用tab则会产生冲突,而使用seg则在视觉上太重了,和产品调性不符。那么我们可以在示能上做一些调整,让这个控件看上去不能左右滑动,又不至于太繁琐。


所以反示能将告诉我们,事物有哪些不具备的功能。同时反示能也是相对的,遇到多样化的场景和业务需求时,我们依然要学会变通。



1.3.不同场景中示能的变化


一张桌子放在教室中,我们知道它是用来学习的,桌面上可以放书本、笔等,如果一个桌子放在户外,并且靠着墙壁,墙壁上有个洞,那么这个桌子当前示能表示为什么呢?一个肌肉发达的男人在健身房秀肌肉大家纷纷羡慕,但是如果不穿上衣走在马路上估计很多人会骂他变态。


下方图标+文字形式的一个按钮,放在卡片的左侧和右侧大家感知一下,表现出来的示能有所区别。



左侧更像是这个模块的标题,而放在右边才能让人觉得可点击交互。如果觉得不够明显我们再用三个点举例,放在不同位置的3个点小图标,所表达的示能相差巨大。再例如红色在弹窗中显示给人警示,但在活动页和价格数字上显示则给人感觉热闹的氛围和强烈的指引。



这就是不同场景中同样事物表现出来的示能区别。所以设计师在设计方案的时候除了要将方案本身属性表达正确以外,也要考虑到场景的影响。



1.4.相同示能的不同表现方式与含义


这里有一个概念叫做同构异型,说的是结构相同,形式不同。例如我们经常用到的tab与其视图的呈现,tab的本质就是利用多个标签来切换标签下的视图,所以标签除了用tab的形式,还可以用下拉展开成为菜单的形式,只不过一个是平铺,一个是点开后再列表选择。



再举个例子,例如筛选控件,如果我们需要一个实时筛选的功能,那么我们一般会这么做,在b端web设计中,会将一系列筛选条件横向摆放,每一个筛选条件都可以下拉展开进行筛选,但如果迁移到移动端中,因为横向距离受阻,就会纵向标签展开式的筛选模式,从结构上来说,这俩方案其实是一样的,都是在多个筛选条件中分别筛选出不同的标签。



再例如一个父子集共生的内容卡片



同构异形在设计样式上会有很多种,例如列表,例如上文说到的单控开关,虽然样式很多,但原理上单控开关都是一样的。


对于初学者来说,不同控件理解的比较片面,所以就会导致一些控件的使用错误。


说到同构异形那就不得不提到同形异构,例如一块素牛肉,外观和红烧牛肉一样,但是它是豆制品。我们再来看下面两个模块,根据整体来判断,两边的加号都是反映出可以点击添加的示能,但如果我们继续考虑交互之后的逻辑和流程就会发现问题所在了。前者添加的是标签,添加完后会显示在相关的区域,添加按钮不变。



这里可以用一个比较形象的比喻,我有4张椅子,其中3张坐了人,第四张椅子的示能为:只要这张椅子坐了人,边上就会出现新的椅子,最多不超过8张,如果没有人坐则只显示一张椅子。


但第二个模块中的添加按钮结合整体来看是和其他内容毫无相关的添加入口,就好像是第四张椅子上面坐的不是人而是套了一个大箱子,椅子不见了,原本应该和其他内容保持一致的外观也不见了,出现了一个新的东西,出现了新的示能。所以如果我们要按照第一种规则玩,那么这里就不能套箱子,如果要放箱子,就需要放在其他的地方。


所以,初学者要警惕同型带来的使用误区,有时候长的很像的两个人,可能完全没有血缘关系。 


小结

示能的概念大家已经了解了,对于我们设计师来说,尽量去搞懂更多事物在不同场景中的示能和反示能,需要解决问题的时候可以针对性的运用各种方案。



2.意符


咱们上一篇讲到了第一个概念:示能,如果忘了或者没看的同学可以再去看一下。


我是传送门


今天我们要来讲意符,意符在外面日常与事物的交互过程中,非常重要。


以下文字比较干,部分需要大家仔细阅读动脑,觉得难懂的小伙伴可以联系我交流


2.1意符的类型与表现形式


示能决定可能进行哪些操作,意符则点明操作的位置以及如何操作。


设计师往往会说,我设计了一个很好的方案,它将告诉你产品的用途,但是用户却不知所措,虽然知道产品就在那里,但无法下手,因为意符不明确例如我们最常用的人体工学椅,可以调节高低和后仰角度,调节的控制器是两个把柄。如果没有意符加入,我们经常会记不清哪一个控制器控制的是后仰角度,哪一个控制的是座椅高度,需要去做更多的尝试。



所以意符告诉我们对事物正确操作方式以及任何可感知的标识说白了就是一个能够表达事物具体操作的符号。


大家还记得上一篇文章举的一个门的例子吗?在日常生活中,双开门通常在商场、大型会议场馆内看见,因为考虑到人流量比较多,于是在门上就会出现推/拉两个文字意符,避免两侧的人同时推或者拉,引导人们正确通行。我们可以使用推/拉,但不可以用“按”,因为我们无法通过“按”的交互来操控门的开关。


如何判断一个设计是否优秀,那么我们会观察其本身的示能和意符传达是否自然,如果意符表现的太过刻意或者画蛇添足那就是很糟糕的设计,例如在两扇透明的玻璃门上再添加推/拉的标识,就显得有点多余了。再例如切换短视频和翻页电子小说,我们不会用一个翻页按钮而是通过滑动来手势切换。当我们将内容设计全屏的时候就要考虑到当下示能的含义,所以就不要画蛇添足。


OK,它的表意大家已经清楚了,那么在数字产品中,意符有哪些类型和作用呢?它们又可以帮助用户解决什么问题,我们来看一看。



意符的类型


1.文字


文字意符是最常见的一种类型,利用文字描述来说明如何进行交互操作,但是中文文字博大精深,不同的描述给人的理解和感受完全不同。


案例1:开关


开关控件单独拎出来不具备完整的含义,必须在相应的场景中。例如我们在通知、设置的场景中经常会用到开关,并且需要相应的文字描述来解释开关控制的内容是什么。



这里的文字就是意符,用来解释开关的作用。


开关本身具备的含义中是有这样两条原则:

1.需要让用户感知操作后立即生效 

2.开关所属文本必须简单清晰无歧义


所以咱们可以看下方的案例。当我们将文本描述为“不打开(关闭)则不再进行消息数字提醒”和“不接受推荐”后,会显得开关操作含义不明不直观。正确方式应该是正向且简单的描述,不要用双重否定等描述方式。默认描述为打开后的状态描述。



再来拓展一下,我们会发现其实依然还有产品中的开关文字意符用了非正向描述,那按照你的说法不就错了吗?我们来看看小红书和微信的权限开关,这里分别是隐私设置和权限设置。



这里理解起来会有点绕,大家看看能不能理解。首先“只允许我关注的人评论我”这是一个正向描述,没有问题,如果换成反向描述就会变成“不关注我的人不能评论我”,结合右侧的开关,逻辑层面就要多加一个双重否定的理解,所以这里的用正向没有问题。


接下来看下面的关系设置:不把我推荐给可能认识的人,诶这里用了反向描述,大家来分析一下,这里是否合理呢?


首先小红书在新下载应用打开时会向用户进行授权,为了帮助用户发现更多渠道的好友,所以默认在协议中就会去微博、通讯录里拉取好友的信息从而在浏览内容的时候进行更多好友的曝光和推荐,同时也会将我的信息推荐给认识的人,这样产品的活跃度、用户的曝光会提升。


那么大家再来品一品这两句话:1.“不把我推荐给....” 2.“把我推荐给....”前者比较含蓄,后者则更主动,中国人的关系总体来说就是比较含蓄的,就好像是你可以给我推荐,但我不会主动要求,更何况像小红书这样的社交平台,“可能认识的人”对我来说价值并不是很大。所以我个人也觉得默认不推荐比较好。


不知道这样的说法大家是否可以接受。再来看微信:不让他看和不看他。微信这个平台想必我不用多说,既然是熟人社交更多,那么默认肯定是全部开放,而有特殊需求才需要进行隐私设置,所以默认状态为不让他看-开关关闭,意思是我没有打开这项非友好的选项。


那为什么会出现有的开关默认打开,有的开关默认关闭,还可以使用反向描述呢?我总结了下,如果涉及到一些隐私和权限的内容,一般我们默认为开关关闭。但如果是为了用户体验和效率考虑的内容我们可以默认为打开,例如视频播放结束自动播放下一个视频这样的设置。


开关文字意符的描述方式还有几种不同的方式:


1.内容标题+开关切换后状态与内容变化的描述

第一种类型也就是上方说的案例,但是要注意的是,在描述状态变化的时候,文本要正向、简单的描述,例如开启后,接收xxx消息,而不要写成关闭后,不接受xxx消息。


2.功能直接描述

不添加说明文本,直接展示功能标题,例如微信听筒模式、消息设置、提醒等,直接用开关控制这些功能的打开和关闭,属于功能设置。还有一种是授权,例如允许他人查看我的收藏,对他人行为的约束,但不能描述为不允许他人查看我的收藏,因为刚才我们总结了,如果对于一些隐私权限的设置默认需要关闭,那么加上正向描述就不能使用“不允许“。


3.批量整体描述

对于同一种类型的功能设置,可以利用批量的形式做整体描述。



再来看一个例子,示能在不够清晰的情况下,文本意符用来辅助对当前内容/状态的解释



例如b站在浏览内容的时候会出现“刚刚看到这里,点击刷新”,或者当我们在浏览信息到一个页面底部时发现无法继续滑动,会出现一行文案:我是有底线的,说明内容全部展示完毕。



文字意符很直观,但也要避免歧义。



2.图形/图标


图标在某种程度上当作意符使用的频率会更高,虽然某些图标表意不明,但是因为简约、美观、生动、普适性强的原因,所以很多地方倾向于用图标,例如公共卫生间、商场的扶梯、通道,通常会用图标来代替文本,或者强图标+弱文本的形式。


既然咱们要说图标意符,而且要突出图标意符的作用,那就必须有个前提,那就是抛开其他的变量、因素的影响,图标意符究竟有什么神奇的魔力。



例如我们常用到的列表,很熟悉吧,接下来我将用图标来让这个列表的示能产生变化


我们发现,只有文本的列表,示能不明显,而加上图标之后就很明确了,甚至加上不同的图标,示能也随之变化了呢?刷新、跳转、展开、移动、选中、删除、步进、开关、屏蔽、更多。但你不能用撑开、向上展开、旋转、翻转、折叠、回退等等。


这些其实是很简单和基础的概念,但是很多工作多年的UI设计转交互体验的小伙伴就经常遇到这些问题,大家总是在问UI和交互的区别是什么,其实本质上它俩都是一个界面设计师必备的能力,不能拆开来谈。


我们再来看一个例子,播放/暂停的图标,用来控制音频/视频的播放与暂停,


在实体播放器上,我们能看到播放和暂停往往集成在一个按钮上,例如天猫精灵、电视遥控器等。而在数字产品中播放与暂停并不会同时放在一个按钮上,因为数字产品的图标是可以变化的,当前状态和切换状态可以有两个不同的意符表示,那实体播放器做成两个按钮就太多余了。



还没完,当我们在观看视频的时候,界面中会显示暂停按钮,意思是点击后播放中的视频/音频会暂停播放。也就是暂停图标展示的是点击后的状态,而不是当前状态。但其他图标表示的意思却又和开关相反,例如横竖屏切换、收藏、点赞,显示的就是当前状态,而非点击后状态。


为什么不一样呢?因为暂停/播放相当于一个按钮,用来控制视频播放,这里存在着一个控制和映射的关系,然而这里的暂停和播放按钮的示能是相反的。

暂停图标的示能表示当前正在播放,而播放图标的示能表示当前已暂停。所以它和开关也不同,开就是开,关就是关,点赞图标的原理就如同开关。


还有例如打开和关闭声音,看起来声音播放/静音有点像视频的暂停和播放。



例如腾讯视频这里的视频声音控制,当前静音为声音关闭图标,而不是打开后播放声音的图标,我们再看iOS系统的里声音控的样式表现,说明当前声音为开启则显示的是开启声音的图标,经过交互控制后才会变成静音的图标。所以声音播放的控制和视频播放的控制在图标意符的使用规则上并不统一。


那为什么会不一样呢?其实我也看到过一些声音图标和这个案例是反着来的。


两个原因:


1.因为视频的打开和关闭只有两个状态,但是声音不同,声音在打开的时候还可以调节音量啊!如果和视频播放一样,在播放的状态下显示的是静音的图标,那么音量调节就会变成这样:




是不是就很奇怪了,明明是正在播放的状态,显示的居然是静音的图标


2.暂停和播放的本质并不是开和关,而是中断和继续,在本质上和开关还是不一样的。而静音和播放的本质就是对声音的打开和关闭,如果我在声音边上加一个开关是不是就能弄清楚,为什么声音控制器的图标意符就是当前状态而不是交互后的状态。而视频的播放和暂停并不是开关。这下大家搞懂了吗?


图标意符可以单独使用也可以结合文字使用,图标虽然有优点,但也有缺点,如果单独使用也需要注意使用的场景,比如举个例子,同样是放在导航栏的两个图标,但是在不同的界面中,大家可以感知到该图标的含义吗?它的示能和意符相结合成为了一个图标,但不够明确,在不同场景中如果没有文字意符的辅助就会不够明确。



图形可以辅助表意,也可以用来指示区域,例如我们经常开车,会知道马路上会划分实线、虚线、虚实线、潮汐车道线,示意车辆可以在哪些区域行驶、以及形式的规则。



我们在医院拍胸片的时候,胸片机器下方也会指示人应该站在什么位置,用一个方形的框框起来,或者会显示两个脚印的图形。在数字产品中图形的指示区域也非常重要,例如我们设计一个按钮,只有文字样式的按钮和具有图形背景的按钮在用户的点击感知上是不同的,后者的点击信心会更大,有了区域的划分就有了明确的操作界限。




3.颜色


颜色意符很好理解,通过色彩来表达如何与事物进行交互以及辅助表达。


无论是实体产品或者数字产品中,警示的颜色大部分会用红色或者橙色来表示,例如在进行信息检查时,错误信息会被用红色样式标注出来,既告知用户出了什么问题,又提示用户在哪里出现问题。


而需要热闹、活泼的氛围也会采用红色等暖色来衬托,因为暖色更加的醒目。有时颜色也是物体示能的一部分,例如紧急逃生出口、公交车上的安全锤、灭火器都是用红色的外观,表示在紧急情况下可以使用,但不要轻易使用。


绿色表示安全、自然,但也有一些特殊场景下的不同感知,例如金融行业不太喜欢绿色,男士不太喜欢帽子使用这个颜色,除非你是比克大魔王。灰色则表示禁止、不可用、待激活等等。


在数字产品中,色彩除了表示一些特殊的含义,也可以用来作为信息区分,在选择观影位置的时候,可以利用色彩显示不同区域位置的观影体验和价格的区别。更多的色彩心理学和色彩的使用这里就不展开了。





4.声音

声音意符就更有意思了,人们通过听声音来辨别发生方位、响度、发声物体以及声音的音色、质感。各种物体通过声音来传信息的方式也非常多样,而我举个例子,就能把大家带回到童年。


你们还记得以前在学校电脑教室里一个企鹅图标开始闪烁吗?一个咳嗽声表示有人申请加你好友,一个敲击木头的声音表示有人上线了,一个滴滴滴的声音表示有新消息。还有在短视频里经常会用到的一种中断音效:滴————。你们会发现我怎么能打出有声音的文字,仿佛你们已经在听了。


声音为什么很重要,因为人类的五感是在共同作用的,我们除了可以通过声音来判断事物本身,还可以用声音来感知当前行为的状态,例如打开手机的键盘输入音,这样的打字反馈更真实更有质感。


还有在游戏领域我们经常会提到的打击感,当人物的武器打击在怪物身上,但声音并没有及时反馈,而是延迟1秒,这时候你就会觉得没有什么打击感,除了声音反馈,打击感的意符还有很多,例如受击物体的表现动作、击打区域、击打特效、动效、伤害显示、控制器反馈等等。



5.动效

动效也可以成为意符吗?它能表示什么含义呢?动效也是意符中非常重要的一种类型,他在我们日常生活中也用到的非常多。



例如我们看到理发店门口正在旋转的彩色灯。


这里也顺便给大家讲个小历史,理发店彩灯的由来:在中世纪欧洲,人们认为放血疗法对人的健康又很大的帮助,但是一般都由宗教仪式中的神职人员操作,到了亚历山大三世,他把这项工作交给了医生,但是当时的医生不愿意做这种下等人做的事情,便委托理发师来做,于是理发师就成立了理发师外科医师联合会,三色柱就是活动的标志,红色代表动脉、蓝色代表静脉、白色代表纱布。还有一种说法是在法国大革命时期,一家理发店是革命党人根据地,一次危险的活动中领导人在理发师的掩护下逃脱,最后为了表彰,允许他们用红、白、蓝三色的国旗作为标注,最后演化成了旋转灯,各国效仿。


好了,题外话说完,我们再回到动效。如果你看到三色灯正在旋转,说明这家理发店正在营业,如果静止则说明停业,或者坏了。是不是很简单?这就好像一个出轨的女人告诉情夫如果家里有人则阳台上放一盆菊花,家里没人则放一盆绿萝是一个道理。


那么在数字产品中,动效意符还有哪些作用呢?我们一一来盘点一下:


1.降低用户认知成本

我们通过设计界面的转场、控件的唤出动效,告诉用户你将从什么地方去往什么地方,和你有关的控件是从哪里来,你可以怎么控制他。当你进行过交互行为后哪些内容变化了,它们是怎么变化的。这就好像你等的45路公交车从远方朝你慢慢行驶过来,停在你的面前并打开了车门,你选择了上车然后看到阿姨捧着电饭锅,拉动气门,接着爆炸。而不是当你站在原地直接爆炸。被红姨的支配还宛如昨日。


所以一个好的动效能让你清楚事物的发展过程,以便于你更好的去理解。再例如我们在使用饿了么、美团等应用时,添加菜品会有掉入外卖箱的动效,这是一个非常好的动效应用。微信公众号策划将文章收起到浮窗也会有一个浮窗去向的引导,告诉你虽然文章在收入交互动作的结束是在右下角,但如果你想查看所有文章需要返回首页,在页面的左上角才能找到。




2.引导/提示/强化

对于一些新人须知或者内容隐藏的部分,产品通常可以通过一个小动效来引导用户这里有新内容,例如淘宝二楼、印象笔记功能图标的切换、活动入口等等


3.氛围、强化视觉

电商、直播界面中,有非常多的元素都是利用动效来刻画氛围和效果,刺激人们的感官。



4.表示状态

当你在手机解锁的状态下输错密码或者在氪金时输错密码,输入框都会进行左右晃动来示意,老铁,这真的不对。





5.更多意符

意符不局限于我列出的一些类型,我再举个例子,在一个不起眼的转角处,那里空无一物,就是很普通的一块空地,但如果那里被丢了一袋垃圾,那么这里就会出现越来越多的垃圾,因为第一袋垃圾就是一个意符,告诉别人这里可以丢垃圾,于是很多人就会把垃圾丢在这个角落里。


很多人会觉得示能和意符好难区分,示能不是也包含意符吗,其实我们可以这样理解,在整个交互过程中有物体和操作者这样两个对象,物体本身表达的是示能,但它不具备沟通能力,而意符才是链接操作者和物体两者的桥梁,虽然我们平时往往看到的都是示能+意符的状态,但是我们也要区分本体的示能和用来沟通的意符两者的区别。



小结


意符和示能不可分割,设计师们在学习基础概念的时候要尽可能的一起去了解并学习。意符的种类繁多,所以我们在学习意符正确的时候方式时,首先要了解意符本身的“示能”,从而将意符更巧妙的结合在事物中发挥其正确的表意作用。


设计师在设计意符的时候也要尽可能的多了解产品使用者(用户)的背景,意符的表达也有很大一部分效果来自于用户的经验和心智。即便我们认为该意符已经很清晰了,但是使用者并未接触过、不理解,说明该意符依然不合适。

文章来源:站酷      作者:应骏

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

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

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



你好,我是《用户体验四维度》

ui设计分享达人

你好,我是《用户体验四维度》,一本关于用户体验的新书,今天正式上市了。


具体内容方面,我选择了聚焦于“人”——主要探讨了人与界面、人与内容、人与人和人与品牌的交互体验——大部分话题既有宏观上的纲领,也有微观上的实现细节。这四类交互体验,下文的提及会使用简称,所以先看下简称及对应的全称。

 

HI X:Human Interface Experience,人与界面的交互体验;

HC X:Human Content Experience,人与内容的交互体验;

HH X:Human Human Experience,人与人的交互体验;

HB X:Human Brand Experience,人与品牌的交互体验。



下面把时间交给作者李潇,由他来做一些分享。

 

你好,我是作者李潇。我主要分享两点,第一点是这本书的来龙去脉,第二点是这本书的主要特点。

 

 

01 《用户体验四维度》的缘起

 

2019 年 7 月 15 日,我在个人公众号上发表了第一篇设计类文章《浅谈 Keep 的 UI 设计》,转到朋友圈后有很多人点赞,也有朋友说写得不错,转到站酷后也有很多设计师留言称赞。算是一个还行的开头,这给了我信心。

 

之所以会写公众号,是因为当时我成立了一个个人的设计工作室,希望借公众号的文章引来一些客流。之所以第一篇文章会写 Keep,一方面是因为 Keep 比较知名,另一方面是因为我比较喜欢 Keep,也是 Keep 比较忠实的用户。

 

当时的计划就是挑一些个人比较喜欢的、具有一定知名度的产品来写,每款产品至少写两篇文章,一篇写 UI 设计,一篇写交互设计,或许还可以就产品功能再写一篇。因为我分别从事过产品经理和 UI 设计的工作,同时也兼任过交互设计的工作,有这些方面的经验。

 

按照计划,第二篇文章很自然地就是关于 Keep 的交互设计,不过名字是《浅谈 Keep 的用户体验》。因为所写内容已经超出了“交互设计”的范畴,而“用户体验”恰好是一个更合适的主题。这篇文章的反响依然还行。另外,有趣的是,根据使用感受,我发现 Keep 这个拥有课程和社区的运动品牌,它的用户体验可以用四个维度来描述,它们分别是:人与界面、人与内容(课程)、人与人(社区)、人与品牌。没错,这就是本书最原始的雏形了。

 

再加上也有读者朋友反馈说“用户体验的四维度”挺不错,有启发。于是第三篇文章就“拐弯”了——没写 Keep 的产品功能,也没写其他产品,而是把“用户体验的四维度”单独写成了一篇文章:《浅谈用户体验的 4 个维度》。

 

某种程度上,第三篇文章的反响好过前两篇,因为当时有 3 个业内比较知名的公众号(分别是 MicroUX、应谋鬼计、UXPA,在此向他们致以谢意)转载了这篇文章,且有一名立志成为产品经理的大学生根据这篇文章的观点写了一篇分析 QQ 和微信用户体验的文章:《从微信与 QQ 的交互比较中谈用户体验》。另外,当时在跟一些朋友聊起我写公众号的近况时,有两位设计师朋友都提了句“可以写书/出书”。

 

不知说者是否有意,但是听者有心,朋友的话更加坚定了我内心逐渐萌发的写书的想法。第三篇文章之后,我就开始认真考虑写书这件事了:首先,“用户体验的四维度”这个概念比较新,或许可以作为书的框架;其次,个人对用户体验非常感兴趣,也就是对这个潜在的书的框架非常感兴趣;第三,发在网上的文章,包括“用户体验的四维度”这个概念,反响都还行;第四,公众号我是全职在写,为了质量写得很慢(平均两周一篇 4000 多字的文章),时间成本已然很高,还不如再增加点时间成本来写书。

 

所以,是不是真的可以把“用户体验的四维度”写成一本书?

 

试试才知道。于是,在参考很多书的大纲以后,2019 年 8 月下旬,我就为“用户体验的四维度”列好了一个初步的大纲。

 

之后发在网上的所有文章,也就是从第四篇开始,就是按照这个大纲来写的。也就是说,我是先把书稿写成了网文,这种网文的更新一直持续到第 2 章 HI X(人与界面的交互体验)的尾声,随后断更。因为那时已和出版社签好合同了,按照约定,书里的内容不再发到网上。对于那些曾在网上追过我文章的读者朋友,在此我要说声抱歉,请见谅。

 

顺便说下书稿和网文的主要区别。历经编辑的指导与建议、作者的反复修改、审校流程的打磨,与网文相比:

一,书稿的逻辑与结构更加严谨、合理,内容和语言也比网文精简;

二,书稿更加体系化,相互之间(如 HI X 部分的根需求、功能架构和信息架构)尽可能做到了“环环相扣”,章节之间的起承转合也更加连贯、自然;

三,书稿在内容层面进行了一定程度的修改和优化,个别章节(第 1 章的四维度,第 2 章的根需求、功能架构等)则是进行了极大程度的修改和优化。

四,书稿在产品案例和生活案例方面也进行了一定程度的调优。

 

以上就是这本书的一个简单缘由,接下来分享下它的主要特点。

 

 

02 《用户体验四维度》的特点

 

这本书主要有四个特点,它们分别是:追求深度、追求卓越、展望未来、兼顾大小。当然,我也很期待你去发现这本书的其他特点,包括它的缺点。



1 追求深度
 
无论是宏观上的大纲(用户体验四维度),还是微观上的具体内容(根需求、功能架构、UI 设计、HH X 等),本书都着力于深挖本质。
 
先以根需求为例。在日常工作中,“需求”是一个高频词汇:大到上线一个大功能,小到改一下字体颜色,都被我们称之为“需求”。面对大大小小、林林总总的“需求”,是不是有必要关注下根需求(本质需求)?因为根需求是一切需求的根本。如果根需求有问题,往往意味着用户的根需求没有完全得到满足,那由此衍生出来的一系列大小需求都会有问题;如果根需求有问题,就意味着这个行业的类似产品,依然有机会,直到用户的根需求完全得到满足为止。所以本书就以几乎人人都会用的资讯产品为例,比较深入地探讨了两类用户(生产型用户和消费型用户)的根需求。
 
再以 UI 设计为例。关于 UI 设计,最近几年出现了一些“商业化设计”“增长设计”的概念,也就是说,UI 设计的肩膀上多了“增长”“商业化”这些担子。这不禁使人担心,未来会不会有新的担子,继续加在 UI 设计的肩膀上?另外,术业有专攻,职能亦有分工,这些担子,UI 设计担负得起吗?我认为未必担负得起。就像于动物的生命而言,心肝肺各有分工、各有贡献,总不能让心脏负责呼吸、肝脏负责跳动、肺负责造血。于心肝肺而言,做好分内的事情就是最大的担当与贡献;于 UI 设计、交互设计、信息架构、产品功能等而言,情况亦然。那 UI 设计的分内事是什么?是它的本质,这便是本书关于 UI 设计的探讨视角。
 
2 追求卓越
 
在本书中,有些话题有尝试深挖本质,有些话题没有。不管有没有深挖本质,最终目的都是落脚于“如何做到更好”,也就是追求卓越。
 
以交互设计为例,在规划它的大纲时,我尝试过不同的切入点:大的设计原则(iOS Human Interface Guidelines, 尼尔森十大交互原则等)、小的交互细节(微交互)、设计哲学(3-4 个要点)、设计目的(人人喜爱)。仔细斟酌之后,我发现要想实现“人人喜爱”这个设计目的,“设计哲学”这个方法的可能性是最大的,而且设计哲学本身是足够“海纳百川”足够“独立成章”的,所以最终果断摒弃了其他切入点,而只保留了“设计哲学”这个切入点。具体而言,这个设计哲学就是:周到,品质,惊喜,善意。想象一下,一个为人周到、能力(品质)卓越、时不时会给身边人带来惊喜、同时又很善良的人,自然会受到身边人的喜爱。类似的交互设计,同样会受到用户的喜爱。

3 展望未来
 
内容“扎根生活”是本书的追求之一。但是当探讨到目前面临困境并存在诸多不足的话题时——比如 UGC 产品(HC X 部分)——本书则会更多地展望一下未来。
 
UGC 产品面临什么困境,存在什么不足?
 
以文章类 UGC 产品为例:各行各业的从业者——比如教师和律师——都有自我充电(如看到本行业高品质的深度文章)的需求,这个需求基本上能在公众号里得到满足;但是,不管一篇深度文章的品质有多高,公众号这个包含各类信息的平台,都是像黑洞一样将其“吞噬”和“湮没”,而不是像书店、图书馆一样将其“陈列”和“流传”下去。再以极其热门的短视频类 UGC 产品为例:得益于简单易用等诸多优势,短视频类 UGC 产品在“信息和知识的大众普惠”(尤其是针对老年人)上做出了重要贡献;但是,短视频类 UGC 产品也存在一定不足,比如容易使人上瘾、沉迷,比如上面的信息和知识一定程度上缺乏质量保障。
 
未来更好,或更受欢迎和尊重的 UGC 产品,会是什么样子?
 
个人观点,首先是简单清晰的分类,也即 UGC 产品需要分成知识型 UGC 和信息型 UGC,前者以知识为主,后者会包含前者。实际上这个分类目前是存在的,比如站酷、人人都是产品经理、CSDN 等社区就属于知识型 UGC,公众号、B 站、抖音等平台则属于信息型 UGC。
 
篇幅所限,这里仅说下信息型 UGC。以短视频类的信息型 UGC 产品为例,虽然大热,但也饱受争议,甚至饱受诟病。什么样的信息型 UGC,在广受欢迎的同时还受人尊重,甚至受人喜爱?据个人观察,有两大类。一类是像公众号这样足够多元的“真实世界”,另一类是像 B 站、Instagram 这样在某些方面比较美好的“理想世界”。“真实世界”和“理想世界”,值得所有信息型 UGC 来学习。

关于信息型 UGC,怎么建立更多“真实世界”和“理想世界”?关于知识型 UGC,未来更好的产品会是什么样子?这些问题,本书都尝试进行了探讨,以供参考。

4 兼顾大小
 
用户体验的四个维度,交互设计的设计哲学,知识型 UGC 和信息型 UGC,都是比较宏观的大话题。本书不光有这些大话题,还有与之对应的关乎“怎么实现”的小细节。
 
还以交互设计为例,周到的、高品质的、给人惊喜的、带有善意的交互设计会受人喜爱,那交互设计如何做到周到、品质、惊喜和善意呢?自然而然地,本书就这四个问题进行了比较深入的探讨。以“惊喜”为例,本书先是将交互设计的“惊喜”分为“小惊喜”和“大惊喜”,简单给出了定义和示例,然后又就“如何做到惊喜”分别给出了针对短期(可以立马实现,更适合“小惊喜”)和长期(需要长期积累,更适合“大惊喜”)的建议。
 
于 UI 设计、信息架构、功能架构、HH X 等话题而言,也是同样的或类似的写作手法。


分享完主要特点,接下来请允许我简单介绍下这本书适合哪些读者,供你参考。
 
5 适宜人群
 
得益于以上几个主要特点,再加上本书涉及的话题既有属于基础的根需求、功能架构、信息架构、交互设计、UI 设计,也有更进一步的 HC X(人与内容的交互体验)、HH X(人与人的交互体验)和 HB X(人与品牌的交互体验),个人观点:
 
本书既适合一线从业者(产品经理、交互设计师、UI 设计师等),也适合相关从业者(技术人员、运营人员、市场人员等);
既适合创业者(“根需求”“功能架构”以及“知识型 UGC”“信息型 UGC”等部分或许会使你发现更多新的机会),也适合学生。
 
希望你能在书中找到自己需要的、或自己感兴趣的内容。
 
以上就是我的分享,接下来把时间交给《用户体验四维度》。
 
 
结语
 
好的,谢谢作者李潇的分享,让我意识到我的出生似乎是个意外;也谢谢李潇把我夸得这么好,但我还是要补充一句,他的夸奖仅供参考,一切以自己的切身感受为准。
 
用户即人,谈用户体验,自然离不开对人的关注。人作为高级动物,自然有其强大和理智的一面;人作为动物本身——置身于高速发展的现代社会,置身于“乱花业已迷人眼”的智能化信息社会,置身于既相互温暖也相互竞争甚至还相互“伤害”的同类中——也有其脆弱和感性的一面。正如李宇春在《软肋》里唱的那样: 


是最坚强的人,是最脆弱的人   
是最理智的人,是最敏感的人   
固若金汤的人,语无伦次的人   
不过,血肉之身   


 
同样作为人的互联网从业者,在打造自家产品时,在兼顾商业化的同时,有没有可能以更美好的方式去对待这一个个用户,一个个血肉之身?
 
我想这是一些产品正在面临的问题,也是所有产品都难以回避的问题(用户利益和企业利益难免会发生矛盾)。互联网行业在中国的蓬勃发展,不过二三十年的历史,所以相信这也是一个布满荆棘、充满希望的问题。《用户体验四维度》从根本上探讨的,也正是这个问题。希望我的探讨,能为你带来一点参考或启发。
 
最后,谢谢你的时间。


- -  The End - -


实拍图:

undefined

文章来源:站酷      作者:SonwDesign

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

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

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



设计师眼中的用户体验

ui设计分享达人

用户体验

首先,我们先来了解什么是用户体验

从字面上来说,用户体验就是用户在使用产品过程中对产品的直观感受以及评价

这种感受非常的主观,但又很容易影响别人对产品的判断。这就是为什么某宝商家一直求好评,而某团骑手会为了好评跟用户“大动干戈”的原因了


名词解释

  • UI——User Interface,本意是“⽤户界面”,但现在这个词已经被拟人化了,即把那些做用户界面的设计师们叫做UI

  • UE——User Experience,本意是“⽤户体验”,现在也变成了一个职业名词,是指那些做用户调研的研究员,比如用户画像、产品分析、竞品分析等。有些公司把“交互设计师”也叫做UE,严格来说UE和交互是两个职位,不过现在很多UE除了做用户调研也会画交互原型,所以混在一起也不奇怪了

  • IxD——InteractionDesigner,本意为“交互设计”,也就是交互设计师,现在也常常用UX(User Experience)来表示交互设计,用来跟UI进行区分。简单来说就是帮产品画原型的,实际上这个职位非常的关键,产品希望表达的逻辑,各个界面的跳转与关联关系,以及产品的可用性与易用性,都体现在交互上

  • UED——User Experience Design,本意为“⽤户体验设计”,现在常常表示用户体验设计团队,基本上大一点的互联网公司都有自己的UED团队,甚至大的部门都有自己的UED团队


UED工作领域

UED团队要做的事情可多了,通常来来说主要坐下面的事情: 

  • 用户研究

  • 产品分析

  • 交互设计

  • 产品设计

  • 视觉设计

  • 品牌设计

  • 插画设计

简而言之,UED是以用户需求为目标而进行的设计的团队,通过团队的经验与设计能力给出设计方案,是帮助公司进行产品策划的主力之一


用户体验五要素

说到用户体验,就不得不提用户体验五要素了

现在我们所谈论的用户体验的概念,其实最早出自一本叫《用户体验要素》的一本书

《用户体验要素》--作者Jesse James Garrett,是美国用户体验咨询公司Adaptive Path的创始人之一


这本书出的其实比较早,英文版在2001年就出了,国内常见的是2010年出版的中文版第2版,书里的概念在互联网设计界广为流传,非常值得阅读


当设计师在设计或重构产品,却不知从何开始时,这时我们可以参考用户体验五要素


用户体验五要素是一种产品分析与设计的方法论,他向教科书一样指导我们从0到1设计一款产品。同时它涵盖了一个产品从想法到落地的整个流程,这正是我们学习它的重要原因

用户体验五要素由战略层、范围层、结构层、交互层、表现层等5个层级构成,由下而上像个金字塔的结构一样,战略层则是底部最坚定的根基,产品的起源也源自该层


1.战略层

这是五要素的最底层,一般是公司负责人与产品总监、市场总监等高层之间的讨论范围层。这一层主要是确定产品目标以及用户需求。比如:

  • 公司要做什么

  • 面向什么样的用户

  • 什么样的解决方案

  • 公司的产品特色是什么

  • 竞争对手有什么

  • 将来的收益怎么样

 

值得一提的是用户画像需要在这一层定义出来。我们可以招募一些用户进行访谈,然后为用户分组,并结合用户的需求确定我们的产品目标

2.范围层

战略决定范围,这一层主要针对战略层的需求进行更细致的分析,定义需求是什么,提出解决方案,同时要定要好需求的优先级

3.结构层

根据前两层思考产品的信息架构,规划任务流程,简单来说这一层主要是产品PRD的输出

4.框架层

页面的具体功能摆放,信息布局,这一层主要是交互设计,输出低保真原型

5.表现层

页面最终给用户呈现的视觉效果,这一层主要是视觉设计,输出高保真视觉稿

模拟案例

作为设计师的你,接到了一个饼干公司的设计需求,公司希望你能帮他完成从产品到包装一系列的设计,你该怎么去做呢?

我们用用户体验五要素来整理设计思路:

-战略层

  • 先了解这家公司的产品需求和用户需求

  • 产品需求:公司是个小型食品加工厂,主营是面包和饼干,有实体店也有网店,今年准备在圣诞节推出一款圣诞饼干

  • 用户需求:用户画像是20-35岁的女性,喜欢看剧,喜欢网购,对可爱的东西没有抵抗力。今年上映的一部电影叫《饼干侠》(虚拟)票房火爆,用户都想买到剧中同款的饼干

  • 公司目标:希望圣诞前后一个月内盈利50w

-范围层

  • 分析需求:公司是做一款圣诞饼干,了解到《饼干侠》的原型是出自美国卡芙食品的一款饼干,并把它确定为竞品并展开分析

  • 设计方案:列出一系列设计清单,包括品牌logo重新设计,食品包装、网店圣诞装饰、广告宣传图等,给这些设计需求确定好优先级

-结构层

  • 信息架构:进一步细化已列出的设计方案,输出文档或者设计规范,比如《品牌手册》《食品包装标准》等

  • 交互流程:进一步的用户画像与分析,收集市场同类型品牌调性,通过试用的方式整理出饼干的分类属性,如口味、分量、包装材质等

-框架层

  • 从这里可以开始整体的、低保真的设计了,可以出一些比较具体的设计方案,目的是快速跟需求方进行评审,为后续的视觉设计作准备

-表现层

  • 经过前面反复的沟通与评审,开始高保真的视觉设计,从产品包装到广告图到物料,这里就是设计师们展示商品颜值,提升其商业价值的时刻到了

  • 最终产品上市



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

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

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


交互规范制定指南

ui设计分享达人

一、如何「理解」交互规范


说起设计规范,大家应该都不陌生,一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用:


产品设计:保障产品内不同模块的设计一致性,同时提高不同设计师间的设计、协作效率

研发开发:通过定义的标准规范,提高流程、组件的复用率,提高整体开发效率

用户使用:让用户能够在产品全局感受到统一且完整的体验,降低使用成本和学习难度



而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成,在全局原则的指导下,侧重不同的维度和内容分别展开规范的定义,最后再合到一起形成一份完整的设计规范。



从用户体验要素来看,视觉主要是在「表现层」「框架层」进行规范的统一,主要包括:形、色、字、构、质、动 六个层面。



而交互角度相对抽象,主要针对于产品的「结构层」「框架层」入手,定义统一的交互规范,指导页面、流程搭建和组件使用规则。包括:全局原则、页面布局、通用流程、标准组件、文案规范



整体维度呈“从抽象到具体的总分关系”,不仅对产品的各个维度都有具体的交互指导,而且不仅能保证长期使用,避免重复返工;同时也便于囊括后续的迭代内容。而这些内容,就是我们通常定义的交互规范,也是交互参与定义设计规范的发力点。


有了对于基本认识和搭建框架之后,我们来详细聊聊如何定义交互规范具体内容。



二、不同阶段应该定义

哪些交互规范?


产品有不同发展阶段,设计规范同样也有,不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多,保证投入产出比最大化;同时也要构建一个合理的规范迭代思路。


产品探索初期


该阶段的产品核心目标是「验证产品或商业模型」,业务需求都是小步快跑、频繁迭代。产品处于从0到1的野蛮生长状态,存在着“先满足功能,再优化体验”的情况,导致该阶段的产品体验往往不太过关。


搭建目的:通过定义原则,梳理关键页面和流程,搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断;从页面到流程,又能对应设计参照标准;同时业务可以在规定的框架下发展,不仅让产品体验的根基牢固,而且不会限制功能设计自由。


搭建范围:「全局原则」「页面布局」「通用流程」


产品稳定发展期


该阶段的产品基本形态已稳定,也形成了初步的模型结构。后续迭代是在现有结构的基础上,进行增加或优化功能。虽然探索期定义了产品原则、布局和流程,但探索期产品的自由生长,会导致不少设计细节不一致,从而影响了产品整体的体验和效率。


搭建目的:通过回溯整理过往设计,沉淀优化成完整的交互规范。再根据规范统一产品体验,进一步优化流程和效率, 让整个产品体验达到相对稳定的状态。

搭建范围:「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」



三、如何「定义」交互规范


3.1 定义交互规范的原则


与行业通用的设计规范(如TDesign、AntDesign,文末领取腾讯设计系统源文件)“大而全”“通用”的特质不同,一般团队内构建的设计规范都是源于某一个产品或业务,主要的特点是“专精”。专注于「业务」本身,主要是「团队内成员使用」,追求的是投入产出比最大化。


基于此背景,当我们在定义「交互规范」时,有三点原则:


原则一:保持规范的业务性设计规范既要贴合业务场景归纳完整,同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划,尽量富有前瞻性,这样定义的规范不仅能覆盖当前需要,同时后续也能更好地迭代。


原则二:保持规范的专注性。有的放矢,明确内容优先级,避免盲目追求大而全和形式主义。对于优先级高(覆盖面广、复用率高)的关键内容重点描述;优先级低(逻辑简单、认知一致)的内容可简要描述,避免事无巨细降低效率。


原则三:保持规范的生长性。设计规范不是一成不变,而是跟随业务发展不断迭代完善的,所以需要阶段性的回顾规范。遇到规范未能覆盖或无法指导设计的地方,及时修订同步团队,避免墨守成规,固步自封。



最后,还有一点建议:在定义规范时,可以站在前人肩膀,适度参考行业设计规范,能复用用的直接参考,具有业务特性的再集合业务综合考虑,使整个规范制定效率更高,科学性、指导性更强。


在找到自己当前所属的产品阶段、明确要建立哪些设计规范后,具体应该如何进行落地执行呢?建议从以下4个步骤入手。



3.2 第一步:定义规范分类


如上文中提到,一个完整的交互规范分为:「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度,但每个维度具体含有哪些内容,都是不一样的。仍然需要根据实际业务需要去定义,这样才能尽量保证没有遗漏,也更好为下一环节评估工作量。


通用的做法有两种:


方式一:整理业务场景下不同的页面、流程等,并进行抽象合并。「全局原则」「页面框架」和「通用流程」具有强业务导向,可以采用此方式。

以「页面布局」为例,就需要将关键页面按统一颗粒度收集(按层级或按场景等)。



方式二:参考行业通用规范的定义,先罗列完整,再根据产品实际业务需要进行增删改。

「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀,可以采用此方式,例如下图组件的梳理。



最后可产出如下图的规范分类和具体内容。(可以列的不是很全,后续补充具体部分内容时持续维护这张表。)



3.3 第二步:确定分工排期


有了具体内容作为依据,便可以根据此进行排期分工。


分工原则:推荐按规范分类进行分工,一个大的分类由一人负责,保证专注性。同时团队交互最好都能参与,保证后续对规范更好的沿用。

排期原则:「定义规范」和「输出需求」两者经常要并行处理,此时提高效率,控制投入产出比就很重要了,我们需要明确优先级,先做什么后做什么。有3个思路可以综合参考:


- 并行的思路:在定义完「全局原则」后,剩下的页面、流程、组件、文案都可考虑并行定义,彼此之间没有明确的依赖项。

- 迭代的思路:近期有迭代的版本,如:即将改版的模块、反馈较多体验较差的模块,其中涉及到的页面框架、组件可优先定义

- 复用的思路:某些典型页面、典型流程、典型组件涉及面广,许多需求的设计都将借鉴参考,亦可优先抽象定义



3.4 第三步:统一撰写原则


设计规范是由不同的设计师一起合作完成,所以我们尽量在一开始,就需要统一规范的撰写和展现形式。以此提高后续合并的效率,同时又能保证其阅读体验,让其它使用者能够更好遵循。对此,我们定义了几个关键原则:


目录完整:高效检索,快速让使用者找到需要的内容。

原则清晰:抽象的内容往往含有许多概念和原则,需要让使用者先理解再参考,才能保证后续使用正确、举一反三

多图少字:没有人喜欢看字,图片更容易吸收

搭配案例:让使用者更好的代入场景,理解和使用规范。



3.5 第四步:定义具体规范 ★


前面铺垫了许多流程性的内容,就像我们日常输出设计需求一样,大家或多或少在工作中都有遇到过。接下来,将重点聊聊,我们具体的内容应该如何定义。依然分成5个环节一一讲解。


3.5.1 全局原则

目标:明确影响整站各个模块、各个页面设计的原则和规范,指导我们后续各种规范的定义和设计。


而全局原则也分两种,设计原则和业务原则两种。


设计原则:每个完整的设计规范都需要包含的内容,如:设计价值观、设计准则。看似相对务虚的东西,实则影响后续整个设计方向。这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼。具体定义方式可参考:

《你为什么需要设计原则?》

https://zhuanlan.zhihu.com/p/246430795


业务原则:源自实际业务本身产生的问题,行业内没有标准定义。需要具体问题具体分析,推导出具体目标,最后再统一制定规范解决业务问题。

举一个实际的例子便于理解:全局Z轴定义


1)明确问题:整站层级高度没有统一定义,导致不同控件间相互遮挡,没有统一规则。需要定义全局Z轴规范,统一不同场景、页面、组件的高度。



2)梳理借鉴:统一梳理相关场景、页面、组件,明确需要定义的范围。再查找行业规范,有无参考借鉴。(如Z轴定义,可参考Material Design)



3)定义规范:最后通过最具代表性的场景进行展示



全局原则没有维度高低之分,例如可能全局涉及到的「右键菜单」也能被定义成全局原则。不必盲从行业交互规范内庞大且抽象的原则。只要能够实际解决你业务的需要,能够覆盖整站各个部分,都可以纳为全局原则。


3.5.2 页面框架

目标:梳理整站所有关键页面,整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。


页面框架的搭建一般由四个步骤组成:

第一步,收集页面:根据早期定义的规范分类,收集展示所有相同层级的页面。这些在定义规范分类时,应该已收集完成。

第二步,框架布局:提取共性,搭建框架和布局,明确页面大的区域划分和结构。(TDesign布局详细指南,文末领取腾讯设计系统源文件)



第三步,功能分区:基于框架布局,细化区域内具体的业务功能属性,如:导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容,同时也是最难定义的。主要原因如下:


- 定义太细,担心缺乏前瞻性限制后续设计:定义越细灵活度就低,后续改动和限制性就越高。为避免这种问题,推荐在定义关键页面时,按输出设计稿的思路:整理「信息架构」→定义「功能分区」,这样后续拓展性和前瞻性更高



- 定义太粗,无法定义出明确的功能分区,担心缺乏实际指导意义:同一区域有些页面展示操作,有些展示导航。从规范角度好像不应该,但实际套在各个业务内却又合理。当遇到这种无法达成一致的情况时,建议就不定义具体的“功能分区”,避免因为盲目追求统一而限制实际设计。


而可以采用“穷举举例”的方式,将该布局下可承载的内容均展示出来,既可以起到参考意义,又能供后续沿用达到统一的效果。



第四步,加入案例:将刚刚定义的布局框架与功能分区,与实际案例完整结合,便于后续理解和沿用。



3.5.3 通用流程

目标:梳理整站所有流程,对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。


“可复用的流程”是指:在多个场景下,不改变其原有业务逻辑的情况下能够“既插既用”。例如:登录注册流程、扫码关注流程、分享流程等等。往往一个通用流程中,不同的步骤亦可以打散,重新拼装成不同的流程,以适配具体的场景使用。


下面就举一个具体的例子:注册流程。一般完整的注册流程如下,通过不同的入口触发后进入,通过一定步骤后注册成功。



当业务有了进一步需求,需要通过插件快捷登录时,步骤便可以重新组合,再适配具体的场景



对于设计师要做的,就是识别具体的通用流程有哪些,并将其给「步骤化」串联起来。当有新的需求来的时候,判断能直接复用,还是需要重新组装,亦或是新增步骤。

而这样拼装的思维,恰好对应了研发搭建流程时的思路。通用流程对于他们就是将不同的步骤进行组合起来。当遇到不同场景时,再以搭积木的方式进行拼装。


而具体的搭建步骤也是由两个步骤组成:1.第一步,收集流程;2.第二步,抽象步骤。具体方式上面已提到,就不过多赘述。


3.5.4 标准组件

目标:将产品内使用过的组件整理成“标准组件”,统一定义规则,让后续设计和研发时能直接调取组件,提高设计和研发效率。


其实行业中已经有很多通用组件,可以快速调用。但由于不同业务的复杂度不一样,也会生成自己独特的业务定制组件。同时,产品持续在迭代,也很难能抽出时间单独定义组件。故基于这个背景,结合“需求设计流程”和“组件整理流程”,有两种高效定义标准组件的方式。


方式一:调用行业通用组件


第一步,业务设计确定基本逻辑。

第二步挑选行业通用组件,增加业务规则。(一般开发在搭建产品初期时,便会选择一家行业组件进行使用,而组件也仅能在这家提供的组件中挑选)

第三步,视觉根据全局视觉原则,设计新的样式。

第四步,将交互规则、视觉样式合并,统一成标准组件。基础规则直接引用行业组件已定义的内容,场景规则按需补充。




方式二:业务定制组件


第一步,进行正常的业务设计。交互根据需求搭建原型,视觉设计具体样式

第二步,判断组件是否通用,是否可复用到其它场景。例如:分享对话框,不同的内容分享都能够用得到,像这种就是可抽象成标准组件的典型案例。

第三步,定义标准组件规范。简单的组件展示具体样式即可,团队内设计师基本认知一致,无需重新学习。而复杂的组件为保证后续的正确复用,建议包括以下内容:


- 更新日志:因为组件是变动最多的规范,需要明确具体的版本和改动点

- 组件定义:简要介绍用途和使用规则,如对话框定义:必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。

- 组件结构:介绍组件构成、功能分区、分区定义,详细展示不同分区内具体信息和对应规则。 



- 使用场景:详细区分多种场景下不同的使用方式,明确给予使用指导



- 设计方案:备选,如果比较复杂的组件且涉及到流程中的关键环节,建议可以考虑复制一个完整的设计方案嵌入其中,便于团队成员理解沿用。


第四步,跟研发沟通,封装成标准组件。这一步是非常关键也是重要的一步,这将大大提高我们后续的组件复用率,降低重复性走查的耗时。推荐使用CoDesign-设计规范功能,上传「组件库」后能够按目录自动生成规范文档,同时将自动标注和切图,大大提高研发开发标准组件的效率。



3.5.5 文案规范

目标:将产品内各个场景内文案进行整理,帮助业务更准确表达意图,让设计师更好沿用,同时让用户感受到一致的产品风格。


文案就像“产品对用户说的话”,不同的人说话方式可能并不一样,没有绝对的对错。但清晰明了的语言表述,让用户更容易理解;符合产品气质的语气,能拉近产品与用户的距离;统一的文案描述,又能让用户在整站一致的语境下体验产品。


需要定义的内容,包括但不限于以下3个部分:


1.语言:语言是指我们通过什么样的规则来组合文字,让它形成一种惯用的表达方式。例如语句简洁明了,不过度修饰,避免重复描述,使用简洁清晰的语序,帮助用户快速理解;例如用词精准易懂,使用简单、易于用户理解的词汇,避免使用专业术语,或过于口语化的表述


单纯说规则可能太虚了,在实际定义规范时,还要如下图所示,加上实际案例示意避免误解。



2.语气:语气是可以体现产品气质和风格,定义时要结合全局原则内的设计价值观,明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时:


• 俏皮的文案可能是:网络开小差,请稍等一下

• 而正经的文案可能是:网络异常,稍后重试。



3.书写规则:主要包括常用词汇的书写方式,例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意,例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的,也是接地气的部分。



4.具体使用指南:以上「语言」「语气」「书写规则」3个部分,是构成全局文案的基础规范。如果有充足时间的团队,可以考虑再结合实际业务,分别定义不同场景和组件下具体的使用指南。如下图:



最后再附上各个行业内定义文案规范例子,供大家参考:

B端产品文案指南:

https://www.yuque.com/linyecx/dragon/occ7pr#UEUSw

AntDesign 文案规范:

https://ant.design/docs/spec/copywriting-cn

Clarity Design 文案规范:

https://design.teambition.com/doc/introduction

国家标点符号用法:

http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf



四、如何「推进」交互规范


定义完交互规范,后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。


4.1 团队评审,达成一致


规范的定义不是一个人的事情,而是一个团队事情,它将关系到每个后续每个人的设计产出。所以在制定规范期间,应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程,更是让团队达成一致、大家更深入了解如何使用规范的过程。


注意,参与评审的人不止是设计师,当然也包括具体的业务开发,很多时候我们会得到新的思路和启发。


4.2 善用工具,沉淀规范


规范搭建的过程中,有很多痛点:组件库需要多人参与维护和创建,容易造成冲突内容丢失;同时沉淀规范文档时,需要图片逐一复制、粘贴到文档内,更新时又要重复一遍这样的操作。而这些问题,使用CoDesign设计规范功能,就可以有效的解决提高效率。


首先组件库支持多人同时维护,差量更新;其次组件库上传后,可以自动生成/更新规范文档,避免反复编写文档,整体提效;最后当组件库有新版本时,会自动提醒团队内其他成员进行更新,保障团队设计一致性。



规范的过程其实也是整体设计走查的过程,我们会发现有些设计可能有体验问题,或不符合规范。每当这个时候,我们就需要对这些设计进行标记。在规范定义完成之后,迭代排期优化线上的设计。


而在实际设计使用过程中,可能又会发现规范无法满足的地方,此时又可以展开新一轮的提炼和总结,再反哺规范,形成正向循环促使设计和规范不断完善。



五、写在最后


在前言的时候就有提到「交互规范」只是整体规范中的一部分,最终是需要与视觉合并成一份统一的设计规范,指导后续具体的设计。具体的合并方式,在定义的章节内已有提到,就不再赘述。


最后,我一直认为好的设计规范是提高设计效率,引导设计方向,而不是因为设计规范而局限了具体业务的设计,如果这样,还不如不去定义。

文章来源:站酷      作者:大魔V

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

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

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

交互体验设计的核心概念之:示能与意符

ui设计分享达人

很多没有接触过交互体验的设计师小伙伴们,总有会面临一个坎,那就是看别人做交互和体验的方案总是特别简单,一个流程或原型别人做出来之后,我们心里总会想,那不就是这样嘛?换我也能做,但是只要自己一上手就不行了。


为什么?因为我们总是看着别人的结果下结论,而忽略了中间的思考过程。

就好像是吃着别人做的番茄炒蛋,你会觉得不就是番茄和鸡蛋一起炒一下,然后放点盐和糖就好了嘛,我们只看到了结果,而忽略了对食材的选择、处理、顺序、结合。




1.示能


当我们看到一个控件,你觉得它不就应该在那里嘛,但轮到自己开始做,就压根想不到要去用那个控件,甚至是信息布局、流程节点、整体结构都规划不出来。不知道大家有没有看上一篇原创文章结尾那个作业,如果做过的小伙伴可以发我交流一下。传送门--》


所以很多UI设计师觉得做纯执行的工作很没有意思没有价值。因为方案是别人做好的,思考过程也是别人的,而商业设计师的核心是解决问题,解决业务和用户的问题,既然解决问题的角色都是UI的上游,那么UI设计如何体现价值呢?当然就是把交互体验的核心底层概念搞懂,和交互设计一样从设计侧去思考问题,赋能业务。


OK,那么来我们先来讲:示能



1.1示能


心理学家吉普森将示能描述为:“关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。



用很直白的话来讲,意思就是:事物通过自己外在的形态,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打开的门,告诉人们可以进出、通过。一张椅子,人可以坐、可以靠。


假如,你面前有一扇门,门上有一个把手,这扇门告诉我可以利用这个把手与我进行互动,你可以用手、可以用脚,也可以用舌头,但手是最方便的。如果只是单扇门,那么我们可以利用推或者拉的动作打开,但如果是两扇门并排,两个把手在中央靠近,那么这时候门展示出来的意思就是两扇门都可以推或拉。但如果门把手在门的靠外两侧,那么意思就变了,变成了将门侧滑后才可以通过。


那门为什么要设计成不同样式来展示不同示能呢?这个留给大家思考,这三种门设计的初衷是什么。



在我们数字产品中可以有什么体现呢?例如一个开关控件(switch),开关本身具有两种互斥的属性和功能:开/关、启动/禁用,看到开关控件的外在样式,我们可以判断当前开关所属模块以及意符指示内容的状态是属于打开还是关闭。


开关在现实生活中的表现样式有很多,例如一侧翘起的开关、可以拨动的开关、具有段落的按压开关、分型控制的开关、旋钮开关等



大家别看开关看起来简单,但是在设计起来会遇到不少的问题,因为状态和意符形态在我们日常中过中很难成为一个标准,例如最常见的一侧翘起的开关,如果不加意符,我们不知道让哪边翘起才是开/关。如果你的房间就一盏灯,那么很简单,我闭着眼睛去按就行了,灯灭着那肯定就是关,再按一下那就是开。但如果在客厅中有多个并联的开关怎么办,一个灯可能收到2处甚至3处开关的控制,而每处开关的数量会在3-5个,这个时候不用意符去标识,就很麻烦了。



回到数字产品上,开关的示能就简单多了,有颜色的状态表示开,灰色状态表示关,但是开关控件在刚用在数字产品上的时候,很多人经常误以为是滑动交互来控制开关,虽然滑动也可以,但本身依靠更简单的点击触碰就可以了。但如果控件做的很长,那么滑动的示能就会更明显。



开关比较让人产生歧义的地方来自于意符,因为很多新人将一些控件的属性认为是有重叠关系,可以混用的,那就大错特错了,等会讲。



1.2.反示能


和示能相反,指的是任何物体之间不能进行怎样的互动。


例如我们经常做的人体工学椅,你可以靠坐在椅子上,并把手放在扶手上,但你无法在椅子上蹦跳,因为椅子无法支撑剧烈晃动。你也不可能用椅子打游戏,它本身不具备这样的功能。再比如我们裤子的口袋,设计师通过设计他的形状、大小、材质,帮助我们去盛放一些小物件,例如钥匙、手机、卡片,但是笔记本电脑你塞不进去,一头猪更塞不进去。


数字产品中也会遇到一些有很明显反示能的控件,例如segment Controls(分段控件/分段选择器/分段选择控件),它是iOS的原生控件之一,该控件的反示能就是无法通过左右滑动界面切换不同标签的视图,和tab不同。



并且在该控件的描述中,seg通常数量只能在5个以内,并且5个标签分别属于同类型的数据分割,只支持点击切换。它不能展开、不能滑动、不能移动、不能悬浮、不能进入二级页面也不能翻转。


那有没有一种可能,或者一个场景需要这两种控件同时具备一些属性呢?是有的,例如这样



在标签下是列表,而列表也支持轻扫的交互进行删除,如果使用tab则会产生冲突,而使用seg则在视觉上太重了,和产品调性不符。那么我们可以在示能上做一些调整,让这个控件看上去不能左右滑动,又不至于太繁琐。


所以反示能将告诉我们,事物有哪些不具备的功能。同时反示能也是相对的,遇到多样化的场景和业务需求时,我们依然要学会变通。



1.3.不同场景中示能的变化


一张桌子放在教室中,我们知道它是用来学习的,桌面上可以放书本、笔等,如果一个桌子放在户外,并且靠着墙壁,墙壁上有个洞,那么这个桌子当前示能表示为什么呢?一个肌肉发达的男人在健身房秀肌肉大家纷纷羡慕,但是如果不穿上衣走在马路上估计很多人会骂他变态。


下方图标+文字形式的一个按钮,放在卡片的左侧和右侧大家感知一下,表现出来的示能有所区别。



左侧更像是这个模块的标题,而放在右边才能让人觉得可点击交互。如果觉得不够明显我们再用三个点举例,放在不同位置的3个点小图标,所表达的示能相差巨大。再例如红色在弹窗中显示给人警示,但在活动页和价格数字上显示则给人感觉热闹的氛围和强烈的指引。



这就是不同场景中同样事物表现出来的示能区别。所以设计师在设计方案的时候除了要将方案本身属性表达正确以外,也要考虑到场景的影响。



1.4.相同示能的不同表现方式与含义


这里有一个概念叫做同构异型,说的是结构相同,形式不同。例如我们经常用到的tab与其视图的呈现,tab的本质就是利用多个标签来切换标签下的视图,所以标签除了用tab的形式,还可以用下拉展开成为菜单的形式,只不过一个是平铺,一个是点开后再列表选择。



再举个例子,例如筛选控件,如果我们需要一个实时筛选的功能,那么我们一般会这么做,在b端web设计中,会将一系列筛选条件横向摆放,每一个筛选条件都可以下拉展开进行筛选,但如果迁移到移动端中,因为横向距离受阻,就会纵向标签展开式的筛选模式,从结构上来说,这俩方案其实是一样的,都是在多个筛选条件中分别筛选出不同的标签。



再例如一个父子集共生的内容卡片



同构异形在设计样式上会有很多种,例如列表,例如上文说到的单控开关,虽然样式很多,但原理上单控开关都是一样的。


对于初学者来说,不同控件理解的比较片面,所以就会导致一些控件的使用错误。


说到同构异形那就不得不提到同形异构,例如一块素牛肉,外观和红烧牛肉一样,但是它是豆制品。我们再来看下面两个模块,根据整体来判断,两边的加号都是反映出可以点击添加的示能,但如果我们继续考虑交互之后的逻辑和流程就会发现问题所在了。前者添加的是标签,添加完后会显示在相关的区域,添加按钮不变。



这里可以用一个比较形象的比喻,我有4张椅子,其中3张坐了人,第四张椅子的示能为:只要这张椅子坐了人,边上就会出现新的椅子,最多不超过8张,如果没有人坐则只显示一张椅子。


但第二个模块中的添加按钮结合整体来看是和其他内容毫无相关的添加入口,就好像是第四张椅子上面坐的不是人而是套了一个大箱子,椅子不见了,原本应该和其他内容保持一致的外观也不见了,出现了一个新的东西,出现了新的示能。所以如果我们要按照第一种规则玩,那么这里就不能套箱子,如果要放箱子,就需要放在其他的地方。


所以,初学者要警惕同型带来的使用误区,有时候长的很像的两个人,可能完全没有血缘关系。 


小结

示能的概念大家已经了解了,对于我们设计师来说,尽量去搞懂更多事物在不同场景中的示能和反示能,需要解决问题的时候可以针对性的运用各种方案。



2.意符


咱们上一篇讲到了第一个概念:示能,如果忘了或者没看的同学可以再去看一下。


我是传送门


今天我们要来讲意符,意符在外面日常与事物的交互过程中,非常重要。


以下文字比较干,部分需要大家仔细阅读动脑,觉得难懂的小伙伴可以联系我交流


2.1意符的类型与表现形式


示能决定可能进行哪些操作,意符则点明操作的位置以及如何操作。


设计师往往会说,我设计了一个很好的方案,它将告诉你产品的用途,但是用户却不知所措,虽然知道产品就在那里,但无法下手,因为意符不明确例如我们最常用的人体工学椅,可以调节高低和后仰角度,调节的控制器是两个把柄。如果没有意符加入,我们经常会记不清哪一个控制器控制的是后仰角度,哪一个控制的是座椅高度,需要去做更多的尝试。



所以意符告诉我们对事物正确操作方式以及任何可感知的标识说白了就是一个能够表达事物具体操作的符号。


大家还记得上一篇文章举的一个门的例子吗?在日常生活中,双开门通常在商场、大型会议场馆内看见,因为考虑到人流量比较多,于是在门上就会出现推/拉两个文字意符,避免两侧的人同时推或者拉,引导人们正确通行。我们可以使用推/拉,但不可以用“按”,因为我们无法通过“按”的交互来操控门的开关。


如何判断一个设计是否优秀,那么我们会观察其本身的示能和意符传达是否自然,如果意符表现的太过刻意或者画蛇添足那就是很糟糕的设计,例如在两扇透明的玻璃门上再添加推/拉的标识,就显得有点多余了。再例如切换短视频和翻页电子小说,我们不会用一个翻页按钮而是通过滑动来手势切换。当我们将内容设计全屏的时候就要考虑到当下示能的含义,所以就不要画蛇添足。


OK,它的表意大家已经清楚了,那么在数字产品中,意符有哪些类型和作用呢?它们又可以帮助用户解决什么问题,我们来看一看。



意符的类型


1.文字


文字意符是最常见的一种类型,利用文字描述来说明如何进行交互操作,但是中文文字博大精深,不同的描述给人的理解和感受完全不同。


案例1:开关


开关控件单独拎出来不具备完整的含义,必须在相应的场景中。例如我们在通知、设置的场景中经常会用到开关,并且需要相应的文字描述来解释开关控制的内容是什么。



这里的文字就是意符,用来解释开关的作用。


开关本身具备的含义中是有这样两条原则:

1.需要让用户感知操作后立即生效 

2.开关所属文本必须简单清晰无歧义


所以咱们可以看下方的案例。当我们将文本描述为“不打开(关闭)则不再进行消息数字提醒”和“不接受推荐”后,会显得开关操作含义不明不直观。正确方式应该是正向且简单的描述,不要用双重否定等描述方式。默认描述为打开后的状态描述。



再来拓展一下,我们会发现其实依然还有产品中的开关文字意符用了非正向描述,那按照你的说法不就错了吗?我们来看看小红书和微信的权限开关,这里分别是隐私设置和权限设置。



这里理解起来会有点绕,大家看看能不能理解。首先“只允许我关注的人评论我”这是一个正向描述,没有问题,如果换成反向描述就会变成“不关注我的人不能评论我”,结合右侧的开关,逻辑层面就要多加一个双重否定的理解,所以这里的用正向没有问题。


接下来看下面的关系设置:不把我推荐给可能认识的人,诶这里用了反向描述,大家来分析一下,这里是否合理呢?


首先小红书在新下载应用打开时会向用户进行授权,为了帮助用户发现更多渠道的好友,所以默认在协议中就会去微博、通讯录里拉取好友的信息从而在浏览内容的时候进行更多好友的曝光和推荐,同时也会将我的信息推荐给认识的人,这样产品的活跃度、用户的曝光会提升。


那么大家再来品一品这两句话:1.“不把我推荐给....” 2.“把我推荐给....”前者比较含蓄,后者则更主动,中国人的关系总体来说就是比较含蓄的,就好像是你可以给我推荐,但我不会主动要求,更何况像小红书这样的社交平台,“可能认识的人”对我来说价值并不是很大。所以我个人也觉得默认不推荐比较好。


不知道这样的说法大家是否可以接受。再来看微信:不让他看和不看他。微信这个平台想必我不用多说,既然是熟人社交更多,那么默认肯定是全部开放,而有特殊需求才需要进行隐私设置,所以默认状态为不让他看-开关关闭,意思是我没有打开这项非友好的选项。


那为什么会出现有的开关默认打开,有的开关默认关闭,还可以使用反向描述呢?我总结了下,如果涉及到一些隐私和权限的内容,一般我们默认为开关关闭。但如果是为了用户体验和效率考虑的内容我们可以默认为打开,例如视频播放结束自动播放下一个视频这样的设置。


开关文字意符的描述方式还有几种不同的方式:


1.内容标题+开关切换后状态与内容变化的描述

第一种类型也就是上方说的案例,但是要注意的是,在描述状态变化的时候,文本要正向、简单的描述,例如开启后,接收xxx消息,而不要写成关闭后,不接受xxx消息。


2.功能直接描述

不添加说明文本,直接展示功能标题,例如微信听筒模式、消息设置、提醒等,直接用开关控制这些功能的打开和关闭,属于功能设置。还有一种是授权,例如允许他人查看我的收藏,对他人行为的约束,但不能描述为不允许他人查看我的收藏,因为刚才我们总结了,如果对于一些隐私权限的设置默认需要关闭,那么加上正向描述就不能使用“不允许“。


3.批量整体描述

对于同一种类型的功能设置,可以利用批量的形式做整体描述。



再来看一个例子,示能在不够清晰的情况下,文本意符用来辅助对当前内容/状态的解释



例如b站在浏览内容的时候会出现“刚刚看到这里,点击刷新”,或者当我们在浏览信息到一个页面底部时发现无法继续滑动,会出现一行文案:我是有底线的,说明内容全部展示完毕。



文字意符很直观,但也要避免歧义。



2.图形/图标


图标在某种程度上当作意符使用的频率会更高,虽然某些图标表意不明,但是因为简约、美观、生动、普适性强的原因,所以很多地方倾向于用图标,例如公共卫生间、商场的扶梯、通道,通常会用图标来代替文本,或者强图标+弱文本的形式。


既然咱们要说图标意符,而且要突出图标意符的作用,那就必须有个前提,那就是抛开其他的变量、因素的影响,图标意符究竟有什么神奇的魔力。



例如我们常用到的列表,很熟悉吧,接下来我将用图标来让这个列表的示能产生变化


我们发现,只有文本的列表,示能不明显,而加上图标之后就很明确了,甚至加上不同的图标,示能也随之变化了呢?刷新、跳转、展开、移动、选中、删除、步进、开关、屏蔽、更多。但你不能用撑开、向上展开、旋转、翻转、折叠、回退等等。


这些其实是很简单和基础的概念,但是很多工作多年的UI设计转交互体验的小伙伴就经常遇到这些问题,大家总是在问UI和交互的区别是什么,其实本质上它俩都是一个界面设计师必备的能力,不能拆开来谈。


我们再来看一个例子,播放/暂停的图标,用来控制音频/视频的播放与暂停,


在实体播放器上,我们能看到播放和暂停往往集成在一个按钮上,例如天猫精灵、电视遥控器等。而在数字产品中播放与暂停并不会同时放在一个按钮上,因为数字产品的图标是可以变化的,当前状态和切换状态可以有两个不同的意符表示,那实体播放器做成两个按钮就太多余了。



还没完,当我们在观看视频的时候,界面中会显示暂停按钮,意思是点击后播放中的视频/音频会暂停播放。也就是暂停图标展示的是点击后的状态,而不是当前状态。但其他图标表示的意思却又和开关相反,例如横竖屏切换、收藏、点赞,显示的就是当前状态,而非点击后状态。


为什么不一样呢?因为暂停/播放相当于一个按钮,用来控制视频播放,这里存在着一个控制和映射的关系,然而这里的暂停和播放按钮的示能是相反的。

暂停图标的示能表示当前正在播放,而播放图标的示能表示当前已暂停。所以它和开关也不同,开就是开,关就是关,点赞图标的原理就如同开关。


还有例如打开和关闭声音,看起来声音播放/静音有点像视频的暂停和播放。



例如腾讯视频这里的视频声音控制,当前静音为声音关闭图标,而不是打开后播放声音的图标,我们再看iOS系统的里声音控的样式表现,说明当前声音为开启则显示的是开启声音的图标,经过交互控制后才会变成静音的图标。所以声音播放的控制和视频播放的控制在图标意符的使用规则上并不统一。


那为什么会不一样呢?其实我也看到过一些声音图标和这个案例是反着来的。


两个原因:


1.因为视频的打开和关闭只有两个状态,但是声音不同,声音在打开的时候还可以调节音量啊!如果和视频播放一样,在播放的状态下显示的是静音的图标,那么音量调节就会变成这样:




是不是就很奇怪了,明明是正在播放的状态,显示的居然是静音的图标


2.暂停和播放的本质并不是开和关,而是中断和继续,在本质上和开关还是不一样的。而静音和播放的本质就是对声音的打开和关闭,如果我在声音边上加一个开关是不是就能弄清楚,为什么声音控制器的图标意符就是当前状态而不是交互后的状态。而视频的播放和暂停并不是开关。这下大家搞懂了吗?


图标意符可以单独使用也可以结合文字使用,图标虽然有优点,但也有缺点,如果单独使用也需要注意使用的场景,比如举个例子,同样是放在导航栏的两个图标,但是在不同的界面中,大家可以感知到该图标的含义吗?它的示能和意符相结合成为了一个图标,但不够明确,在不同场景中如果没有文字意符的辅助就会不够明确。



图形可以辅助表意,也可以用来指示区域,例如我们经常开车,会知道马路上会划分实线、虚线、虚实线、潮汐车道线,示意车辆可以在哪些区域行驶、以及形式的规则。



我们在医院拍胸片的时候,胸片机器下方也会指示人应该站在什么位置,用一个方形的框框起来,或者会显示两个脚印的图形。在数字产品中图形的指示区域也非常重要,例如我们设计一个按钮,只有文字样式的按钮和具有图形背景的按钮在用户的点击感知上是不同的,后者的点击信心会更大,有了区域的划分就有了明确的操作界限。




3.颜色


颜色意符很好理解,通过色彩来表达如何与事物进行交互以及辅助表达。


无论是实体产品或者数字产品中,警示的颜色大部分会用红色或者橙色来表示,例如在进行信息检查时,错误信息会被用红色样式标注出来,既告知用户出了什么问题,又提示用户在哪里出现问题。


而需要热闹、活泼的氛围也会采用红色等暖色来衬托,因为暖色更加的醒目。有时颜色也是物体示能的一部分,例如紧急逃生出口、公交车上的安全锤、灭火器都是用红色的外观,表示在紧急情况下可以使用,但不要轻易使用。


绿色表示安全、自然,但也有一些特殊场景下的不同感知,例如金融行业不太喜欢绿色,男士不太喜欢帽子使用这个颜色,除非你是比克大魔王。灰色则表示禁止、不可用、待激活等等。


在数字产品中,色彩除了表示一些特殊的含义,也可以用来作为信息区分,在选择观影位置的时候,可以利用色彩显示不同区域位置的观影体验和价格的区别。更多的色彩心理学和色彩的使用这里就不展开了。





4.声音

声音意符就更有意思了,人们通过听声音来辨别发生方位、响度、发声物体以及声音的音色、质感。各种物体通过声音来传信息的方式也非常多样,而我举个例子,就能把大家带回到童年。


你们还记得以前在学校电脑教室里一个企鹅图标开始闪烁吗?一个咳嗽声表示有人申请加你好友,一个敲击木头的声音表示有人上线了,一个滴滴滴的声音表示有新消息。还有在短视频里经常会用到的一种中断音效:滴————。你们会发现我怎么能打出有声音的文字,仿佛你们已经在听了。


声音为什么很重要,因为人类的五感是在共同作用的,我们除了可以通过声音来判断事物本身,还可以用声音来感知当前行为的状态,例如打开手机的键盘输入音,这样的打字反馈更真实更有质感。


还有在游戏领域我们经常会提到的打击感,当人物的武器打击在怪物身上,但声音并没有及时反馈,而是延迟1秒,这时候你就会觉得没有什么打击感,除了声音反馈,打击感的意符还有很多,例如受击物体的表现动作、击打区域、击打特效、动效、伤害显示、控制器反馈等等。



5.动效

动效也可以成为意符吗?它能表示什么含义呢?动效也是意符中非常重要的一种类型,他在我们日常生活中也用到的非常多。



例如我们看到理发店门口正在旋转的彩色灯。


这里也顺便给大家讲个小历史,理发店彩灯的由来:在中世纪欧洲,人们认为放血疗法对人的健康又很大的帮助,但是一般都由宗教仪式中的神职人员操作,到了亚历山大三世,他把这项工作交给了医生,但是当时的医生不愿意做这种下等人做的事情,便委托理发师来做,于是理发师就成立了理发师外科医师联合会,三色柱就是活动的标志,红色代表动脉、蓝色代表静脉、白色代表纱布。还有一种说法是在法国大革命时期,一家理发店是革命党人根据地,一次危险的活动中领导人在理发师的掩护下逃脱,最后为了表彰,允许他们用红、白、蓝三色的国旗作为标注,最后演化成了旋转灯,各国效仿。


好了,题外话说完,我们再回到动效。如果你看到三色灯正在旋转,说明这家理发店正在营业,如果静止则说明停业,或者坏了。是不是很简单?这就好像一个出轨的女人告诉情夫如果家里有人则阳台上放一盆菊花,家里没人则放一盆绿萝是一个道理。


那么在数字产品中,动效意符还有哪些作用呢?我们一一来盘点一下:


1.降低用户认知成本

我们通过设计界面的转场、控件的唤出动效,告诉用户你将从什么地方去往什么地方,和你有关的控件是从哪里来,你可以怎么控制他。当你进行过交互行为后哪些内容变化了,它们是怎么变化的。这就好像你等的45路公交车从远方朝你慢慢行驶过来,停在你的面前并打开了车门,你选择了上车然后看到阿姨捧着电饭锅,拉动气门,接着爆炸。而不是当你站在原地直接爆炸。被红姨的支配还宛如昨日。


所以一个好的动效能让你清楚事物的发展过程,以便于你更好的去理解。再例如我们在使用饿了么、美团等应用时,添加菜品会有掉入外卖箱的动效,这是一个非常好的动效应用。微信公众号策划将文章收起到浮窗也会有一个浮窗去向的引导,告诉你虽然文章在收入交互动作的结束是在右下角,但如果你想查看所有文章需要返回首页,在页面的左上角才能找到。




2.引导/提示/强化

对于一些新人须知或者内容隐藏的部分,产品通常可以通过一个小动效来引导用户这里有新内容,例如淘宝二楼、印象笔记功能图标的切换、活动入口等等


3.氛围、强化视觉

电商、直播界面中,有非常多的元素都是利用动效来刻画氛围和效果,刺激人们的感官。



4.表示状态

当你在手机解锁的状态下输错密码或者在氪金时输错密码,输入框都会进行左右晃动来示意,老铁,这真的不对。





5.更多意符

意符不局限于我列出的一些类型,我再举个例子,在一个不起眼的转角处,那里空无一物,就是很普通的一块空地,但如果那里被丢了一袋垃圾,那么这里就会出现越来越多的垃圾,因为第一袋垃圾就是一个意符,告诉别人这里可以丢垃圾,于是很多人就会把垃圾丢在这个角落里。


很多人会觉得示能和意符好难区分,示能不是也包含意符吗,其实我们可以这样理解,在整个交互过程中有物体和操作者这样两个对象,物体本身表达的是示能,但它不具备沟通能力,而意符才是链接操作者和物体两者的桥梁,虽然我们平时往往看到的都是示能+意符的状态,但是我们也要区分本体的示能和用来沟通的意符两者的区别。



小结


意符和示能不可分割,设计师们在学习基础概念的时候要尽可能的一起去了解并学习。意符的种类繁多,所以我们在学习意符正确的时候方式时,首先要了解意符本身的“示能”,从而将意符更巧妙的结合在事物中发挥其正确的表意作用。


设计师在设计意符的时候也要尽可能的多了解产品使用者(用户)的背景,意符的表达也有很大一部分效果来自于用户的经验和心智。即便我们认为该意符已经很清晰了,但是使用者并未接触过、不理解,说明该意符依然不合适。


文章来源:站酷      作者:应骏

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

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

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


UX可发现性咋提升?这12条技巧

纯纯

用户找不到=不存在 


在数字界面中,可发现性定义了用户在产品中查找新内容或功能的难易程度。在许多情况下,良好的可发现性至关重要,因为用户找到所需内容的能力将直接影响其完成特定任务的能力。


在本文中,我们将讨论可发现性的概念和其重要性所在,以及设计可发现性的详细技巧。


为什么为设计可发现性这么困难?

UX中的Findability和Discoverability这两个术语经常互换使用。虽然二者相关,但它们不是一回事,关键区别在于用户对内容的看法。Findability是指用户已经知道或认为存在于产品中的内容或功能的能力。而Discoverability是用户遇到新内容或以前不知道的内容或功能的能力。


这种差别使我们更容易理解——为什么设计高度可发现的界面如此困难。在许多情况下,用户并不是有意识地寻找新内容。人们只想简答地使用产品,如果没有遇到新功能或新内容,用户压根儿不会想到去寻找它们,因为一开始就不知道它们是作为产品的一部分存在的。注重可发现性是UX设计师解决此问题的途径,好让用户更容易发现这些新功能。


12个提升UX可发现性的技巧

许多因素都会影响用户界面的可发现性。以下是12个技巧,几乎适用于所有想要提升可发现性的产品。


技巧1:设计熟悉的界面

许多设计师喜欢试验和尝试新方法,但在尝试创建新内容时,往往适得其反,使用户更难以理解页面。


依据设计常识创建界面,这是设计师的责任。使用现有的设计规范(例如,操作系统的设计范例),结合用户需求建立可发现性,更容易获得用户的认可。因为人们通过自身经验去感受一个新事物时,是非常容易理解其内在逻辑的。例如,许多网站将导航菜单放置在页面顶部,紧邻网站的Logo,也是大多数用户不假思索就能找到的位置。


技巧2:优先安排有价值的内容和功能

当我们在UI中隐藏某些内容时,会加大用户找不到它的风险。移动应用和网站之所以放弃汉堡菜单,转而使用标签栏的原因就是UX的可发现性。虽然汉堡菜单通过隐藏导航选项来节省屏幕空间,有句说话说的好“眼不见,心不烦”,隐藏的选项也更容易被忘记。


良好的可见性可以带来更多的曝光率——元素越明显可见,用户就越有可能记住它。可见导航就如一个标签栏,告诉用户他们有哪些选项,并使其成为首要考虑因素。


技巧3:按逻辑顺序对内容和功能元素分组

具有密切关系的项目应被组织在一起,该规则适用于内容(例如,电子商务网站上定义产品类别的信息架构)和功能(例如,Instagram上的滤镜)。通过在结构中引入逻辑顺序,可以使用户更轻松快捷地找到他们想要的东西(在开始UI工作之前,进行Tree testing以了解用户的心理模型至关重要,它能帮助你根据用户需求搭建内容)。


技巧4:减少视觉上的混乱

UI设计里的一个常见误区,为了使对象更容易被发现,它应该一直可见。假设按刚刚说的去设计,把所有可用对象都堆在页面里,反而更混乱。


视觉混乱通常是出现了不必要的功能和装饰元素,它们阻止用户与产品交互。这种混乱不仅放慢了使用速度,还让基本功变得难易被发现。

Microsoft Word中,太多可见选项造成视觉混乱 by Amansinghblog


即使页面/屏幕有非常良好的视觉层次结构,但人们的注意力跨度有限,人脑通过眼睛感知事物的能力也有限。因此,确定对象的优先级非常重要。删除所有不必要的元素,为剩余元素增加视觉权重,才能让真正重要的内容和功能脱颖而出。


技巧5:减少选项总数

希克定律指出,用户做出的决定越多,决策过程所需的时间就越长,限制 or 提供大量选择?设计师要掌握平衡。看准时机提供选项,不仅简化决策过程,还能为用户提供发现、探索和尝试所有可用选项的空间(和信心)。


技巧6:提供视觉反馈

视觉反馈是指用户在执行任何交互时获得的可见响应。例如,当我们将鼠标悬停在网站链接上时,我们会看到一个视觉响应——链接改变了颜色。这种微小的视觉变化非常重要,因为它可以增强用户体验,消除不确定性。用户知道某些元素是可以交互的,以及下一步该怎么做,从而采取行动。


技巧7:使用常见熟悉的图标

交互元素使用不常见的图标是导致问题的“罪魁祸首”。当用户看到未知图标时,他们无法预测点击该图标会发生什么。这种猜测对产品团队来说成本很高,因为在许多情况下,用户会跳过该选项。


怎么才能知道图标是否令人困惑?测试一下,向实际或潜在用户询问涉及元素的作用,如果他们给不出明确答案,那就用一个更常见的图标替换。


技巧8:使用动画吸引用户的注意力

人眼会自然地聚焦在移动的物体上,微妙的动画可以引导用户转向某些特定的内容或功能,动画还可以解释如何与对象交互。


技巧9:注意手势交互

手势是隐藏的交互控件,它们可能导致很多可发现性问题。除非用户知道某些手势,否则他们不会尝试。产品中使用普遍接受的手势交互,别试图加入太新奇的交互形式。考虑到手势对于许多用户来说仍然是一个相对较新的概念,因此在新设备上很有必要进行入门介绍。

非常规手势(例如双击点赞)可能会对可发现性产生负面影响,用户可能注意不到这些手势在应用程序里是被支持的 by Dribbble


技巧10:适当调整UI元素的大小

设计师为什么要对标题和常规文本使用不同的视觉样式,这是有原因的——想让用户更容易注意到文本内容。同样的策略也适用于UI设计,通过对比不同大小的元素,将用户注意力吸引到关键信息上。例如,着陆页上的一个超大的号召性按钮,清楚地告诉用户当他们点击该按钮时,下一个动作应该是什么,以及会发生的是什么(大型UI元素在可用性方面也很有益,因为它们更容易在移动设备上使用)。

号召性按钮越大且越突出,你期望用户执行的操作也越明显 by Firefox


技巧11:提供视觉可供性

有时候即便用户发现了一个对象,他们也可能不知道如何使用。可供性用来指导元素如何应用,没有可供性的话,用户只能靠猜测使用产品/对象(很可能不会使用)。在数字界面中,设计师应把形状和产生的交互进行具象联系,例如,当我们看到带有“提交”标签的矩形对象时,我们就知道这是一个按钮。


技巧12:提供视觉线索

视觉线索是引导用户转向特定的内容或功能的UI元素,一个典型示例是滚动网站上的动画箭头,该箭头会引导用户朝特定的方向前进。

注意到图像系列最右端的箭头吗?该视觉线索提示访问者,水平画廊是可滚动的 by Netflix


文章来源:UX辞典(站酷)

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

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

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

UI组件要点「狙击」:按钮设计的这些坑别再踩啦!

纯纯

按钮设计


为了设计正确的交互,我们需要回顾一下物理按钮的历史和起源。物理按钮是UI组件的前身,当今的数字产品都还在大量使用它们。按钮很棒,即使用户不了解基本的机制或算法,只用手指触摸就可以让电器、汽车或系统运行/关闭。在《Power Button》中,作者Rachel Plotnick描述了当今按钮文化的起源,并解释了按钮是如何成为数字命令方式的。


“你按下按钮,剩下的我们来做。” ——柯达相机的醒目标语吸引了潜在消费者。


即使在今天,这也是吸引用户的地方——通过简单触摸就能让事情发生的即时满足感。尽管有大量新的家用电器和设备都变成了触摸屏,但物理按钮并不会消失,因为它们让人形成的行为习惯,会影响按钮设计的直观性和易用性,是一种永远存在的实物参考。


01 按钮 vs 链接

按钮向用户传递了操作的可执行性,在整个UI里很常见,例如:对话框、表单和工具栏等。按钮和链接之间的区别,请注意:

-链接是导航到另一个地方时应用的,例如:“查看全部”页面、“ Roger Wright”个人简介等;

-按钮是在执行动作时应用的,例如:“提交”、“合并”、“创建”、“上传”等。



02 让用户直观感受按钮状态

为按钮创建正确的交互和样式,是按钮设计过程中重要的组成部分之一。在不改变组件或产生视觉干扰的前提下,每个按钮的状态都必须有明确定义,以使其与周围布局区别开来。



正常—表示该组件已启用交互;

突出提示—用户使用键盘,进入编辑状态;

鼠标悬停—当用户将鼠标置于交互式元素上方时;

点击—按下状态表示用户已轻点按钮;

进度/加载—用户操作行为没有立即执行,表示正在完成操作中;

禁用—表示该组件当前处于非交互状态,但将来可以启用。


03 按钮的颜色、形状和大小

常见的是圆角矩形按钮,这些按钮即使在输入框旁,用户也能快速识别。按钮样式的选择取决于用途、平台和应用准则。以下是一些最受欢迎的样式变化:



04 建立按钮样式等级

样式主要用于区分重要和不重要的动作。创建动作层次结构,该层次结构将指导用户进行多种选择。通常,可以有一个突出的按钮(该样式通常称为“首要”按钮),剩下的按钮则依据重要程度建立不同的样式等级。



05 《Don’t Make Me Think》

这是可用性工程师Steve Krug撰写的书籍标题,其中讲到了一点:对用户而言,界面清晰明了非常重要,不要给用户制造难题。人们周围其实已经被电子产品包围了,多年使用各种设备、软件的经验,一定程度上固化了人们对按钮外观和功能的认知。如果与常见的“标准”存在较大偏差,也会给用户造成困惑。



避免对交互式和非交互式元素使用相同的颜色,否则用户不知道该点击哪里。


06 一致性的重要性

“一致性是最强大的可用性原则之一:当事物始终表现相同时,用户不必担心会发生什么。” —雅各布·尼尔森(Jakob Nielsen)


一致性提升了速度性和准确性,有助于避免错误。创建可预测性,帮助用户控制和实现产品中的目标。当创建主要、次要和第三种样式时,试着找找一致元素,如颜色、形状等。按钮设计不仅要在设计系统内部保持一致,在整体平台也要进行统一。



07 使按钮足够大以实现可靠交互

按下按钮应该是一个简单的操作任务,如果用户无法正常进行,或在过程中错误地按到了相邻元素,不但给用户造成了负面体验又浪费了时间。


对于大多数平台,请考虑被触摸的目标至少为48x48dp。无论屏幕大小,这种尺寸的触摸目标的物理尺寸应为9mm,触摸屏元件的目标尺寸至少是7-10mm。



对于图标按钮来说,请确保触摸目标超出元素的可视范围。这不仅适用于移动设备、平板电脑,同时也适用于网络上的指示设备,比如鼠标。


08 无障碍设计

所有组件都应推行无障碍设计。目标区域的大小是影响可访问性的因素之一,其他的则是字体大小、颜色和对比度,也有很多工具能检查组件的设计性能。



设计师应与开发团队紧密合作,确保按钮与屏幕阅读器协同工作。添加role =“ button”将使一个元素作为按钮控件出现在屏幕阅读器上。


09 手势应用

手势应用,让用户可以通过触摸与应用程序进行交互。使用触摸来完成任务,不仅提供了触觉控制还非常节约时间。某些手势(比如滑动以触发上下文动作、双击或长按来标记喜欢等)每天都被人们广泛使用,但对于普通用户而言,它们仍然不太明显,建议把它们替换给高级用户执行操作。



10 按钮标签信息易于理解

按钮传达的信息与其外观一样重要,错误的信息会让用户感到困惑,甚至是误导用户操作。正确的按钮标签会引导用户完成操作,最好使用动词,并在按钮上标记其实际功能。


就像按钮在问用户——“您要(添加到购物篮中)吗?” 或“您要(确认订单)吗?”,避免使用Yes/No或过于通用的标签,比如Submit。



11 确定/取消,还是取消/确定?

两者都是正确选择,但设计师可能会花几个小时来讨论哪个更合适。

-确定按钮在前,是自然流畅的阅读顺序。Windows把确定按钮放在了前面;

-确定按钮在后,可以帮助改善流程。这种顺序形式,帮助用户再采取行动前,对所有选项评估,有效地帮助人们避免错误。苹果则是把确定按钮放在最后的;

任何一种选择其实都没有错,也不会造成什么可用性灾难。



12 避免使用禁用按钮

每个人都遇到过这种情况:在屏幕上停留了几秒或几分钟,怎么操作都没反应,这才发现原来是禁用按钮使我们无法进行下一步。禁用控件让组件短暂处于非交互状态,但如果使用不当,则非常容易让用户产生负面情绪。



我建议尽量避免禁用按钮,最好始终启用它,如果用户未提供某些必需信息,则只需突出显示空白字段或显示通知可。


文章来源:UX辞典(站酷)

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

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

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



交互设计知识总结

博博

不懂交互的UI,不是好美工。
本文约一万字,考验耐心的时候到了。

一、什么是交互设计?

先来看一下百度百科的定义

交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析,关注以人为本的用户需求。简而言之,交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。


为什么要做交互设计

在使用网站,软件,消费产品或各种服务的时候(实际上是在同它们交互),使用过程中的感觉就是一种交互体验。随着网络和新技术的发展,各种新产品和交互方式越来越多,人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候,可能为当初的使用者本身就是该行业的专家,没有人去关注使用者的感觉;相反,一切都围绕机器的需要来组织,程序员通过打孔卡片来输入机器语言,输出结果也是机器语言,那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候,对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。


从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。

通过对产品的界面和行为进行交互设计,让产品和它的使用者之间建立一种有机关系,从而可以有效达到使用者的目标,这就是交互设计的目的。


二、交互设计常用原则和定律有哪些?


尼尔森十大可用性原则


1、状态可见原则

系统应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是在合适的时间给用户适当的反馈,防止用户使用出现错误。

即在用户操作界面功能时给予实时反馈,例如:页面加载状态提示、按钮点击后的状态变化、进度条提示等。

2、环境贴切原则

设计的一切表现和表述,尽可能贴近用户所在的环境,将现实环境的操作功能巧妙的转化为线上功能,使其贴近用户。使用用户能听懂的专业术语,涉及到专业化语言时要转化成用户熟悉的语言。

即模拟真实的事物,使用户更容易理解。例如:天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品,降低理解成本。

3、操作可控原则

对于用户的误操作,提供二次确认或者撤销的功能,这样可提高用户的操作可控性。

例如:删除联系人二次确认提示、消息可撤回操作。

4、一致性原则

遵循统一的产品设计规范/逻辑。这里的一致性包含产品和跨平台产品之间的一致性。

一致性包含视觉交互、文案描述、组建样式等,例如:微信小程序设计规范。

5、防错原则

设置防错的机制,减少用户犯错。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择。

例如:用户名称校验提示、手机号码位数限制等。

6、易取原则

减少用户记忆负荷,在适合的时机给用户需要获取的信息。

例如:验证码读取、找人转账提示等。

7、灵活高效原则

提供灵活的操作和高效的获取信息能力。

例如:手机号码一键登录、消息关键字识别等。

8、优美简约原则

保留产品最主要的信息,如果不是优先级最高,要尽一切可能避免去影响产品的简洁和美观。

9、容错原则

用户在使用产品过程中出现了问题,及时准确的告知用户出现问题的原因。

例如:信息输入提示、搜索无结果等。

10、提供人性化帮助

在用户需要的时候提供必要的帮助说明。

例如:新功能引导、解释说明文案等。



七个交互设计定律


1、菲兹定律

点击一个目标的时间同以下两个因素有关:

(1)设备当前位置和目标位置的距离(D)。距离越长,所用时间越长;

(2)目标的大小(S)。目标越大,所用时间越短。

该定律经常运用于鼠标从点A到点B的运动。

例如常用按钮的尺寸设计等。

2、希克定律

一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。

交互设计中要合理设置选项,以免用户使用中决策时间过长,降低使用效率。

3、米勒7±2定律

乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

例如:手机号码的分位显示、应用中标签栏数量等

4、邻近性法则

人们通常将距离近的事物划分为一组。

界面设计中可以用对象间的相对距离来区分信息层级。

5、复杂性守恒定律

每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节,这一固有的复杂度都无法依照我们的意愿去除,只能设法调整、平衡。

例如:在智能手机出现之前,手机上的操作按钮都是实体按钮。在智能手机出现手,手机被整个屏幕占据后,所有的操作都集合在了手机系统之中,等于把物理操作转移到了系统操作中,其本身的功能复杂程度并没有发生改变,只是转移了而已。


6、防错原则

大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。

例如:登录时用户名校验,手机号码位数限制等。

7、奥卡姆剃刀原则

“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。

”这个原理称为“如无必要,勿增实体”,即“简单有效原理”。

在设计中可以使用户关注最主要的信息而非其它无关紧要的事物,从而提升使用效率。




三、交互设计如何开展工作


首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图,而是要先分析需求,了解产品的战略层和范围层的业务目标。把握产品设计大方向,只有方向对了后面的工作才是有价值的。

把握了产品方向,下面就该进行需求的分析,

首先针对需求考虑5个问题:

1、为什么要做这个功能?(业务需求)

2、产品期望得到怎样的成果?(业务目标)

3、谁来使用?(目标用户)

4、他们要怎样使用?(用户需求)

5、如何让他们都来使用?(将业务目标转化为用户行为)

清楚这5个问题后,再根据交互设计流程进行一步一步的进行

这实际上就是对需求的战略层分析。

我们进一步分析业务需求(业务目的、业务目标)和用户需求(目标用户、用户体验目标),把握关键因素(用户的动机、担忧和影响目标达成的障碍)。

归纳这些需求,明确设计策略。


将“业务目标”转化为“用户行为”,通过引导用户的使用来帮助产品实现目标。

从设计“用户行为”到设计“用户界面”,用户行为决定了用户界面,用户界面也导致了用户会出现什么样的行为。

设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。



四、如何进行用户研究,方法有哪些


评估的形式及方法


常见的评估形式分为三类:

1、评估主体:根据评估的主体不同来进行区分,即谁来做评估。

按照评估主体来区分主要有两个主体:用户和专家

用户评估主要靠收集用户使用数据,也就是用户测试,它的数据相对客观,但时间和费用较多,评估范围较窄。

专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观,但费时少、费用少、评估范围窄。

两种评估方法可以相互补充,并结合使用。


2、评估性质:例如定性评估、定量评估或着其它方式。

按照评估的性质来区分可以分为定量评估和定性评估。

定量评估是指对可以计量的部分进行评价,如点击量、使用率等,可以用数据来说明。

定性评估是指对非计量性的部分进行评价,如流畅度、舒适性、创造性等进行评价。它只能表示一个度,无法准确用数据来说明问题。


3、评估过程:按照评估的过程来进行区分。

从评估的过程来区分可以分为理性评估和感性评估。

理性评估相对客观,从客观的角度出发判断客观事物。

感性评估更为主观,评估结果并没有客观规律。

在实际应用中也需要将理性评估和感性评估结合使用,才能完整的完成我们的任务,达到我们的目标。


常见的评估方法有四种:

1、原型评估方法:在产品研发过程中,对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法,原型方法的目的是将界面设计与用户的需求进行匹配。

一般来说原型评估方法分为三大类型:

(1)快速原型:原型迅速成型并分配实施,在原型实验收集的信息基础上,系统从草案中得以完善。

(2)增量原型:应用与大型系统,从系统的基本骨架开始,需要阶段性的安装,及系统的本质特征是在初次安装完成后允许阶段性测试,以减少遗漏的重要特征。

(3)演化原型:对前期的设计原型不断进行补充和优化,直到成为最后的系统。


2、简易测试评估方法

在条件不允许的情况下,可以采取简易的方法来对用户体验进行评价。步骤是:

(1)实验室环境准备:准备好测试用的电脑或其他媒介。两个房间,房间1用来对被测试者进行测试,房间2用于设计师和工程师的观察。

(2)被试选择:分为用户组和专家组。

(3)进行测试:房间1中被试者根据自己的选择进行操作和测试,同时说出自己的内心想法,观察员在调查表上记录被试者的每一次的操作情况,包括出错情况和被试者的口语描述,当被试者在测试过程中遇到困难或操作无法进行时,观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2,设计师和工程师实时观察和记录被试者的情况,以便今后对产品做进一步的修改和完善。

(4)结果分析:通过多次测试后,将测试结果汇总,提取出交互设计中存在的问题,以及对交互设计有益的建议形成测试报告。


3、眼动评估方法

眼动追踪可以用来评价对产品(包括硬件产品和软件产品)设计的感性意象,评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。


4、脑电评估方法

通过对脑电信号的分析,研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛,被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷,例如空间分辨率上的局限性,因而对某些认知过程和脑区的定位并不是很准确。第二,在许多相似的实验研究中,由于研究者采用了不同的实验材料和方法等,实验结果也存在差异性。第三 ,由于采集记录时间的滞后性,脑电所记录的并不一定是当下被试者所想到的内容。


采取哪种方法来开展用户测试和评估,要根据不同的任务结合不同的环境来开展,比如:时间、成本、资源等。



启发式评估法

是专家评估法的一种,也被称为经验性评估,最初由Nielsen博士提出。简单来说,启发式评估是一种简易的可用性评估方法,使用一套相对简单、通用、有启发性的可用性原则,让几个评审根据专业知识和经验来进行评估,发现产品潜在的可用性问题。


启发式评估的两大要素:评估者和评估参照的原则。   


对评估者的要求主要有四个方面:

(1)人数:推荐3-5人,有时会更少

(2)知识:最好同时具有可用性知识及设计知识

(3)身份:最好是非设计者本人,否者不具有客观性

(4)岗位:设计师或用户研究员


评估参照的原则有:尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择,常用的是尼尔森十大交互原则。


什么时候适合使用启发式评估法?

交互设计和UI设计阶段、测试优化和产品发布后的阶段。


启发式评估的优缺点有哪些?

优点:成本低、效率高、发现大多数可用性问题,甚至是用户测试时不会出现的问题。

缺点:不能代表真实用户,相对主观、有时候发现问题过多、对评估人员知识背景要求较高。


什么时候适用?

(1)适合时间、资源有限的情况下快速发现可用性问题,降低风险及成本。

(2)版本变动不大的情况下,小成本检验。

(3)作为可用性测试的之前准备。


启发式评估流程是什么?

(1)准备阶段:确定范围、背景调查、参考评估原则、评委邀约、材料准备

(2)执行阶段:任务走查、整体走查、结果记录

(3)分析阶段:汇总讨论、报告总结、优化方案



可用性测试


先来看一下我们在平时工作中常常会听到这样的问题

产品经理:我们的用户觉得产品好不好用?使用过程中会不会遇到问题?他们是否满意?

设计师:设计的过程有一些纠结的地方,不知道实际用户是怎么理解和操作的怎么办?

产品开发后:想在大推前检验一下产品是否靠谱,适不适合大推?


当我们遇到这样的一些问题时,如何找到方法快速得到答案呢?

那就是接下来要介绍的可用性测试方法。


可用性测试是一种常用的、高效的方法。

它的定义是:通过观察具有代表性的用户,完成产品的典型任务,从而找出产品可用性问题并解决,目的是为了改善产品,让产品更容易使用。


什么时候适合做可用性测试呢?

一般是在:交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好,可以尽早发现问题并及时调整。


类型分为两种:形成式和总结式

形成式特点:小样本、发现问题为主、不能做定量对比。

总结式特点:大样本(30人以上)、定量的评估、可以做对比评估


可用性测试可以解决什么样的问题?

1、发现问题,产品在体验上是否存在问题

2、检验实现,期望的设计目的有没有达成,是否满足了用户的期望

3、产品评估,用户是否会满意

4、理解用户,了解用户行为习惯,了解用户认知,找到某些问题的原因


测试流程是什么?

整体上分为4个阶段:1、准备  2、测试  3、分析  4、优化


1、准备阶段要做的有哪些?


确定目标:确定测试目标决定了后面测试过程要怎样去设计

常见的测试目标有:

·对整个产品做可用性评估

·对新增的功能模块进行评估

·提前观察新方案对新老用户有怎样的影响

·提前检测改版是否达到预计目标

·设计时存在争议,如何选择解决方案

·某个环节流失率较高,检测是否为设计原因导致

·需要拓展某一类特殊用户,测试针对这类用户在设计上是否需要作出调整


准备测试方案

方案中应当包含以下内容:

·测试目的:明确测试的目的及范围,测试目的决定了测试方案

·测试关注点:与负责的设计师一起梳理测试中要关注的问题

·用户招募:招募要求,样本配比,招募渠道

·经费预算:奖励的形式和额度

·时间计划:用于把控时间计划


撰写测试脚本:设计测试任务,通过用户行为去观察提问来获得我们想要的内容

基本的流程有:

·暖场:3min,简单聊天,消除用户的紧张情绪

·测试说明:2min,对测试内容规则做说明

·测试前访谈:10min,了解用户基本信息

·简单试用:3min,让用户熟悉产品

·测试执行:30-45min,提示任务并观察

·事后访谈:15min,针对疑点问点追问,填写评价表

·道别:5min,支付礼金,送用户离开


招募用户

招募什么样的用户呢?

·根据测试目的来定,找出与测试目标有关的筛选纬度

·特别考虑用户使用行为相关的特征,例如竞品使用经验,使用产品的目的,用户的活跃度等

·挑选最核心的纬度,转化成用户招募的条件,并尽量客观化,具体化,可衡量

·避免设置交叉条件过多,导致样本代表性降低

·学会辨别真假的用户信息


招募多少用户合适?

·以发现问题为目的快速可用性测试,6-8名即可

·考虑产品的复杂性,覆盖人群差异性,适当做调整,拓展到10-15名


招募渠道有哪些?

·公司内部

·现有产品用户库

·公司其他产品用户库

·熟人,朋友等

·推广渠道:官微、公众号、门户网等

·社区,论坛,qq群等

·第三方调研公司


准备测试素材:低保真或高保真原型,或线上已经可以使用的产品,也可以准备一些量表工具来辅助测试。在测试

过程中需要用到的电脑或手机设备,摄像头,纸,笔,桌椅等。


测试场地选择:

·专业可用性测试实验室:一般对测试质量要求较高,旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间,一个测试间,一个观察间,中间有单向玻璃分隔。测试间中有多角度的摄像头,用来记录测试过程,观察间可以同步看到测试间里的情况,

·普通测试环境:在观察人数较少(小于3人),条件有限时使用。


预测试阶段:正式测试前进行预测试,保证测试流程通畅

·走查:记录可能出现的问题

·预测试:找人先测试一下

·调整:调整测试流程


正式测试阶段

测试参与人员有

·主持人:引导整个测试流程

·记录员:记录操作行为,访谈内容,发现问题等

·产品团队:参与旁听,观察,结束后交流

·用户:完成测试及访谈任务


测试过程中需要观察的要点:

·用户是否独立完成了任务

·是否存在无效操作或不知所措的情况

·用户是否满意


结果分析

边测试边总结,越及时越好

·测试完一个用户,做一次小结

·测试结束当天写小结,与设计师当场讨论

·重要问题反馈后再总结分析报告

·边测边改,边改边测

结果分析4个步骤:1、对发现分类  2、整理不确定项  3、评定优先级  4、结果记录


撰写报告

从4个方面来写:

·总体如何

·有哪些问题

·严重程度如何

·建议是什么

·除此之外,还可以围绕关注的问题,未满足需求补充分析


优化跟踪

在测试之后需要出优化的方案,测试优化的过程是循环的。

测试之后如果还有其他问题没有得到解决,可以结合其他的一些测试方法来得到。



问卷调研

问卷调查法是以书面提出问题的方式搜集数据的一种研究方法,研究者将所要研究的问题编制成问题表格,让受访对象以邮寄、当面作答、在线作答或追踪访问的方式填写,从而了解被试者对某一现象或问题的看法和意见。问卷调研可以用于需求挖掘阶段,也可以用于产品上线后的评估阶段。

如果是想了解用户对产品上线后的满意度,可以使用问卷调研的方法。它比较适合去了解用户的认知态度,也可以附带了解用户的行为习惯,


问卷调研的优缺点

优点:统一性、灵活性、量化性、匿名性

缺点:(1)只能获得书面的信息,而不能了解到生动、具体的情况。(2)缺乏弹性,很难做深入的定性调研。(3)调查者难以了解被调查者是否认真作答,是不是自己填写的。(4)填写问卷比较容易,有些别调查者会随意选择,或者按照社会主流观点选择,这样会使调查失去真实性。(5)回复效率低,对无回答者的研究比较困难。


问卷调查的使用场景

适用于:(1)需要进行定量分析的调研。(2)需要匿名进行调研的问题。(3)对已有假设进行检验。(4)寻找问题隐藏的关联。(5)对产品设计用户认知及态度的评估。

不适用于:(1)发现和描述具体问题。(2)探索受访对象的模糊态度。(3)获取创新想法。(4)获取精确的行为数据。


问卷调研流程

1、确定目标:确定调研目的、对象、分析目的和应用对象。

2、调研方案:通过访谈、经验、理论等,确定调研框架,题目选项,分析思路,投放渠道,相本配比等。

3、问卷设计:问卷设计,问题美化,投放渠道。

4、问卷测试:多人测试,确保问卷的可读性,逻辑通畅

5、问卷投放:按照计划好的投放渠道进行投放,回收数据,数据清洗

6、问卷分析及填写报告:分析及报告填写,调研结果落地



数据分析

概述:通过在网站或应用中进行数据埋点,获取用户对产品的使用和行为数据,并进行基于产品体验优化的数据进行分析。


数据分析可以做什么?

1、可以做到用户从哪里来,来了多少

2、获取用户属性,用户地域,用户设备

3、访问了哪些页面,使用了哪些功能,消费了多少钱,消耗了多少时间

4、哪些流量可能存在问题,忠诚度如何,活跃度如何,有没有达到目标,和行业相比如何

5、流失情况如何,离开之后是否还回来

可以作为产品的眼镜和大脑,提供客观衡量的依据,可以持续优化改进。


数据获取方式的对比

日志文件:优势,完整的服务端请求记录。

                  缺点,日志的获取和清洗有过滤成本,许多页面操作无法记录。

JS页面标记:优势,数据获取可控、灵活,可以对页面操作记录进行记录,获取数据比较完整丰富。

                      缺点,需要在页面植入JS标记代码,某些情况下无法获取,如当用户禁用JS功能时。


常用的数据监控平台

1、第三方监控平台:如Google Analytics、百度统计、腾讯云分析等

2、自研平台


数据分析流程

1、监控  2、定义  3、埋点  4、测量  5、分析  6、优化


Web分析常用的指标

PV:是指页面浏览量,网页浏览数实施评价网站流量最常用的指标之一,用户每一次访问网站中的页面均被记录,对统一页面多次访问,访问量累计

UV:是指独立访客,是通过互联网访问、浏览这个页面的自然人

UPV:是指唯一身份综合浏览量

访问:是指在一定时间范围内,网站所有访问者对网站发起访问的总次数,从访客来到网站到最终关闭网站所有页面,记为一次访问

识别用户的方式:IP、IP+User Agent、cookie、User ID、设备ID、其他


复合指标

跳出率:指用户来到网站,只浏览了一个页面就离开的访问次数,占全部访问次数的百分比,简称“来了就走”。跳出率可以被用来衡量流量和页面质量,高跳出率表示访问者对着陆页面不感兴趣,没有继续访问更深入的页面。也可能页面设计存在问题,也可能是导入的用户不匹配。跳出率可以通过调整广告渠道,优化页面内容来降低。

退出率:访问者离开网站一次被记录为一次退出,某一范围内退出的数量/该范围的综合访问量就是退出率。如果关键流程中的某一页面退出率高,代表某一页面可能出现了问题。

访问时长:网站停留时长,页面停留时长,应用使用时长。访问量是访问质量的一个衡量指标,较长的访问时间说明用户与产品进行了较多的互动。

访问深度:可以理解为单个用户平均访问的页面数,是PV/UV的比值。访问深度也是访问质量的一个衡量指标,可以考察用户是否和网站进行了较多互动。这个比值越大,代表网站的粘性越高。

转化率:指在一个统计周期内,完成转化目标行为的次数占总访问次数的比率。根据设置不同目的进行计算,例如注册转化率、付款转化率等,是一个重要的分析指标。


移动端基础指标

移动端的基础指标监测与web端略有不同,但分析思路大致相同。指标分为:新增设备、累计设备、启动次数、单词使用时长。


常见分析内容

流量分析(哪里来?)、用户分析(什么样的用户?)、行为分析(如何使用的?)、路径转化(表现如何?)、流失分析(粘性如何?)



A/B test

A/B测试是一种帮助网页优化实验的方法。A/B测试的目的在于通过科学的实验设计和采集数据的方式,来获得具有代表性的实验结论,从而寻找到更好的产品策略。

简单来说,就是为同一目标制定两个方案,让一部分用户使用A方案,另一部分使用B方案,记录用户的使用情况,对比两个方案的结果,选择更符合的方案。

A/B test一般会在产品改版正式上线之前使用,来验证新的设计是否可以提高产品的表现。


A/B test可以测试的元素有:标题、图片、颜色、社交元素、段落文本、按钮、导航、任务流程、页面布局、价格、视频等。可一次只改变一个元素或一次改变多个元素的方式来测试,这就是两个测试类型单变量测试和多变量测试。


A/B test工具

Google Website Optimizer:搜索巨头提供的免费A/B test工具,一个很好的入门级工具,但是没有一些先进的功能。

Visual Website Optimizer:一个易于使用的A/Btest测试工具,包含功能有所见即所得的编辑器,单机地图,访问者分割和标签等。

Unbounce and Performable:集成着陆设计的A/B测试工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企业级测试工具

App Adhoc Optimizer:国内A/B Test工具,同时支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB测试服务的专业Saas平台

Optimizely:是网上现有的最专业的AB测试工具之一,它的价格要比其他的工具高很多(也可以免费使用一个月),它提供了一些非常好的功能。

Unbounce:对于登录页面的测试来讲非常不错,而且它不仅仅是个测试工具,还可以在无需自己编写任何代码的情况下来创建登录页面。


如何做A/Btest

1、确定目标,例如提高网站的付费转化率,降低跳出率等

2、测试方案,建立假设:购买按钮的颜色会影响点击率?缩短流程可以提高复费率?改变导航可以降低跳出率等?

3、创建相比较的两个版本,改变其中的变量

4、发布测试,将部分流量导向B方案,但不一定是5:5

5、数据分析,收集数据,对比AB版本的转化率、跳出率、留存率等



感谢阅读!



文章来源:站酷   作者:_微光

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

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

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

从3个方面,总结 Figma 值得借鉴的交互细节!

周周

近一年来,Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用,深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点,总结下工具软件的体验设计的几个原则。

交互设计的输出文档撰写方法

纯纯

交互输出文档的作用

文档这个东西,我们又爱又恨,爱的是它能够记录并且在工作中让大家高效的协调合作,恨的就是很多人对文档嗤之以鼻非常敷衍,以至于文档不但没有起到它应有的作用,反而成为了一个不负责任的借口。所以一份合格或者优秀的交互输出文档对于一个项目的流转以及团队的配合来说是至关重要的。交互文档的主要利益相关者通常是以下几个角色:交互、产品、开发、UI


交互

首先优秀的交互文档必须在交互组内部进行过审核,包括一致的撰写标准和模式的使用,一个比较规范的交互设计组对于交互的撰写标准也是有严格的规范的,以及在什么情况使用什么交互模式还有组件库的调用都会有详细的说明,那么你的交互输出文档就必须满足团队设定的规范。


其次对于其他交互设计师来说,你的设计方案中是否会出现其他人负责的模块,那么在评审的时候需要同步,虽然交互输出文档对于其他交互来说不是直接受益人,但是在团队同步过程中也是非常重要的。


产品

每个公司对于文档的要求和规则不一样。小公司可能没有交互设计这个岗位,那么可能产品连prd文档也没有,仅仅只是一个简易的需求说明文档,就更不用说针对交互规则的说明文档了。


很多有完善规模和流程的团队不仅会有详细的需求说明文档也有很完善的交互说明文档。我们首先要明确的一点是那么多文档最后是给谁看的,一共在项目中会有多少文档产生。


通常产品经理会在项目初期做一份prd文档(Product-RequirementDocument,需求说明文档),这个prd文档主要是给业务方、交互和开发看的,在这个文档中需要包含一些业务规则以及交互规则,所以交互的输出文档是需要和产品的prd文档合并的。


当然如果你是一位很有自驱力的人,那么你可以自己推进需求并落地,一个人就可以完成prd文档的撰写和需求的落地了。


开发

特别想给各位提个醒,在开发需求评审的过程中,请一定记住你们评审的目的,开发同学也要注意,请把重点放在需求是否能实现以及开发相关的地方即可,请不要考虑为什么要这样做,或者你觉得应该怎么设计,一旦进入了开发对需求和设计的评头论足那么这个会议效率就相当低下。专业的事情就交给专业的人去做吧,可以私下讨论但不要在评审会上各抒己见。


交互输出文档对于开发的作用就是,开发可以更好的还原该功能中交互的跳转以及逻辑,所以我们尽量把交互规则写明白写详细,比如按钮在press和default时候是否样式会有变化,或者页面转场的方向,这都是一些细节,减少不必要的低效沟通。你会发现有些时候为什么开发总是来问一些规则,就是因为文档中没有描述准确,所以开发和交互都需要花时间去同步这个细节。



所以这个也非常考验交互设计师对需求文档撰写的功底,并不是图片文字随意摆放就可以的。和开发合作时也是一项内部的体验设计,你把文档写好了,开发看起来也舒服,满意度也高。如果是一堆文案,连基本的对齐都没做到的话,谁来看都会看不下去。


UI

交互输出文档对于UI来说,作用就非常简单了,但是这里也会碰到问题,那就是交互同学只需要把信息的层次表示出来即可,千万不要画到连视觉同学都没有发挥余地的程度。所以为什么现在UXD体验设计那么火,就是因为交互和UI其实重合度是很高的,只要有智能化组件库和工具做支撑,那么在交互和UI的设计流程中,时间就会大大降低。


交互输出文档的内容

在这里,我们就将整个prd文档的内容给大家分享一下,不仅仅是交互需要输出的部分。因为一个高阶的交互是需要能够独自产出prd文档的。然后不同的公司对与文档的要求也是不同,大家做参考即可。


一份基础的prd文档主要由这几部分组成(其实就是这个需求的来源以及推导过程和如何落地的说明):



1.项目概要

a.需求背景

这个是一个项目最重要的部分,可以说背景没有搞清楚,后面都可以不用做。这个指的就是我们做这个需求的价值和原因。比如我们app中业务方(运营)需要做一个扫一扫功能,那么这个功能首先我们就从业务价值和用户价值两个方面去评估,根据对业务方的沟通之后我们发现扫一扫功能将会在周年庆的时候通过物流包裹上的二维码,让用户进行扫码参与活动这样的玩法。



所以这个需求对于业务方来说是一个转化手段,通过扫码参与活动-领券-消费,确实是一个不错的玩法,但是大家如果只盯着眼前的问题或许就不够了,比如当周年庆结束之后这个功能还有什么用,他在以后的规划中的存在是怎样的。在所有的包裹中印上活动的二维码这个时间周期和成本有多大。


其次,对于用户来说,扫一扫并不是帮助他们解决了某个问题,而是我做了一个东西,同时搭配着这个功能让你们去使用,对用户来说是一个很可有可无的功能,如果线下包裹上的二维码破损了也是非常影响体验并且是不可控的。那么综上所述,既然要做一个临时的活动用其他的方式会不会更好?


所以在这个文档中的第一步,首先就是要确定需求的背景、价值,也就是说,你这个需求是怎么来的,比如再来讲我们一个店铺的优化项目,在这个项目中,首先我们必须在评审的时候说清楚我们为什么要对其进行优化和改版,一定是出现了或者我们定义到了某个比较严重的问题,这边大家对我们app业务可能不是很了解我就简单说了,就是个人中心和店铺营销场景重合过多,并且卖家的同时可以买和卖两个场景存在,所以店铺页通过我们的数据分析和用户的访谈我们发现了一些机会点,以及我们必须突出一个核心场景让用户有明确的分辨。


另外就是背景的描述也可以带上你的调研结果和分析,比如之前我们做首页优化,我们观察了近5个月的数据,都呈现下降的趋势,所以之后有进行了一系列的访谈和用户体验地图分析才有了这个需求的背景产生。



b.需求目标

目标很好理解,就是我们希望通过这次需求迭代达到一个什么成果,比如我们之前做过一次整体的体验优化改版,那么我们的目标就是减少用户的流程跳失、提升整体体验满意度、提高用户的任务转化率,其中我们做了一个商品关注的功能,由于是限时特价商品所以是限量的,在规定时间进行抢购,为了让用户的使用场景统一我们打算在应用内做一个商品关注功能,所以在这个需求的初期,我们对这个功能的目标和预期是提升xx百分比的转化,提高x%比的gmv,提高用户对关注商品下单的效率和满意度,之前很多用户想要购买商品需要自己在手机端设置闹钟,不方便。所以这个功能的一个目标就是解决用户场景迁移的问题。设定目标之后,就是为了在上线后对其进行复盘和数据跟踪还有用户跟踪。

可以用一句话来描述:针对什么用户在什么场景下解决用户的什么问题,达到什么目的?



c.需求范围

需求范围也相当于范围层,指的就是在该需求中我们需要做哪些相关功能以及功能涉及面。举个例子,之前说的扫一扫功能,不同的产品定位对于扫一扫功能的要求也是不同的,比如说微信在扫一扫功能中承载了:扫一扫、相册、封面、街景、翻译、手电筒等诸多功能,再比如淘宝,有扫一扫(ar、拍立淘)、相册、历史、帮助、手电,这说明了不同产品对扫一扫功能有不一样的要求,所以在需求范围内我们需要把本次需要做的功能进行描述,并且该功能是否影响其他功能的使用和对整个产品的影响范围。并且我们也会讲所需要的功能进行拆解和优先级拆分,在表格中编辑。



d.调研分析

调研分析其实就是为我们第一步背景和价值做准备,由于汇报方案和评审,或者在项目推进时,我们需要有相应的论据来支撑我们方案的客观性,所以在这一板块中输出的结论就非常重要,比如之前的首页改版,经过用户研究小组的访谈和数据分析得出相关的结论,通过埋点找到相应板块的点击数据和异常点,然后再进行一系列的问卷和访谈研究,找到结果,都是为了辅助项目的背景以及在评审中大家对需求价值的灵魂拷问。由于数据和调研结果比较敏感就不过多放了。


e.版本日志

日志是一个非常重要的组成部分,做过开发的同学都知道log 的重要性,当我们跑不通的时候我们都会去检查log,然后多测试几遍可能就找到问题所在了,其实我们的版本日志的作用也是这样,但是一个是对自己来说可以记录自己的工作过程,还有思路的变化,第二就是对外,包括和需求方的讨论,会议的纪要等。


要注意的是会议纪要在备注中需要详细说明,以做证据。同时也要邮件通知相关人员和负责人。可能有些公司还会放一些评审记录,比如各部门负责人对方案和需求的建议,业务方和技术负责人的一些建议也会放在项目概要中,而这个prd文档也可通过内部服务器进行实时更新和保存,如svn。方便大家对需求的进度和迭代有一个直观的追踪。

f.项目成员

这个就不用多说了,产品、运营、交互、视觉、开发各司其职,照相馆人员即可,就不至于当项目开始进行了人员分配还没到位就尴尬了。


2.需求方案设计

a.业务、任务、界面流程图

有些同学不是特别明白业务流程图和任务流程图的区别,这边给大家简单介绍一下


业务流程图:

意思就是在这个需求系统中,相关利益者的业务关系,任务信息的流向的一个图标。比如这个简单的例子,用户在点外卖这个场景中,相关的利益者有用户、店家、外卖员三者,那么当用户开始触发流程后,这3者在这个流程中就会各司其职,而业务流程图也很明显的告诉大家所有联动者的指责和流程走向。


任务流程图:

用户在具体执行某一个任务时候的工作流程,以及其核心任务的操作步骤,比如在登录注册这个任务中,用户需要进行一系列的操作,在这个流程中用户的操作引发的系统判断需要详细说明。



界面流程图:

界面之间的跳转关系和路径,在这个流程图中,我们不需要吧详细的说明写上,只需要将需求中涉及到的页面跳转进行叙述即可。

b.相关说明和规则

接下来就要开始我们交互文档最为关键的部分了,如何书写交互说明,以及交互说明应该包含的内容。


1.全局思考

在做交互方案也就是我们画原型的时候会思考一些问题:

a.整体思考

1.信息架构是否容易理解,信息分类是否合理,比如我们的信息架构是否采用了用户容易理解的,市面上常用的信息架构。


2.信息层级和路径是否合理,不一定要最简,但是要高效,信息的优先级是否放置准确,信息组织是否具有相关性、逻辑性。


3.主题是否清晰,3秒内告诉“我”在哪里,并且可以做什么


4.方案的延展和后续功能规划的可扩展性


b.用户权限

根据不同用户的权限对该需求进行检查,比如普通用户、vip用户、内外网用户、游客用户,在登录未登录时候对需求内功能的使用是否有影响


c.登录方式

用户登录和注册、终端的兼容,不同方式注册的用户是否需要补填相关信息等等


d.流程

1.该需求中的功能流程是否和其他类似或者相同功能流程保持一致性;

2.逆向流程和非正常流程的思考有没有完全;

3.流程的闭环有没有做好;页面跳转的方式是否合理;

4.中断后的恢复状态如何呈现;

5是否保留原信息等等


2.内容、状态和显示

a.内容的获取来源

例如下方的图片为例,banner的图片来源和发现feed流的图片来源肯定是不同的,那么就要写清楚,图片或者数据的来源是来自于用户的上传还是系统后台的配置获取;并且获取的方式是如何的,是需要手动下啦刷新还是切换页面自动刷新,还是设定时间自动刷新。


字段、图标是从接口获取还是前端写死,以及气泡展示的规则等等。另外一张图片可能用在多个地方,而可能呈现的尺寸不同,所以在涉及到相关图片使用时要注意剪裁规则和图片的来源。

b.缓存机制

图片以及一些资源通常我们需要对其进行缓存,有些同学不清楚什么是缓存,缓存是在计算机上的一个原始数据的复制集,一般来说需要缓存的内容是通过浏览产生的,包括图片以及cookie等,浏览过的视频和广告也会被缓存。同时在不同的网络环境下缓存的时间标准也不同,无网络那肯定只能读取缓存文件,wifi环境下缓存时间可设置的短一些,而流量环境下时间就可以设置的偏长。


c.状态

状态大家都应该都会写,主要包含的就是初始状态(冷启动无缓存第一次进入)、空状态(无任何内容比如空的购物车)、常规状态、异常状态(网络中断、接口报错)还有过期状态等


d.显示

数据和内容的极限值,最大和最小,比如粉丝和关注的数量,小于1万人则显示完整的数量,大于等于1万小于11000则显示1万,大于11000小于12000则显示1.1万,这样的方式。另外包括标题极限为一行显示,超过部分的显示规则。敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还是xxx元,小数点保留的规则。日期的显示格式是xxxx年xx月xx日还是xxxx-xx-xx还是xxxx/xx/xx等等



3.反馈、提示、手势

反馈和提示的样式有很多种,一般反馈指的是用户对某一个控件进行触发后获得的反馈,比如按钮按下的反馈,以及之后收到的反馈,是进行跳转还是给用户提示,采用的是模态还是非模态的提示。比如点击关注某个人的按钮后会提示关注成功,比如退出某个图文编辑会二次确认是否退出,再比如抖音长按后出现的3个操作反馈,还有支付成功后的动效提示、恶意多次操作后的提示等等


如果有手势交互也需要说明,比如滑动后内容置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch等等



4.加载

使用模态还是非模态,如果是模态加载请尽量使用情感化设计来减少用户焦虑。如果是非模态,根据信息呈现和体验采用分步加载还是预加载还是智能加载。如果是分布加载就选择先加载资源较小的内容,再加载图片,可以先将图片模糊化粗渲染给用户呈现,包括在浏览信息流的时候的分页加载也是可以的。如果更智能化一些也可以预判用户的行为进行内容加载,例如当用户在某个图文前停留时间达到某个值后就预先给用户加载里面的内容。


加载的全局方式在方案中需要考虑,页面加载、下啦刷新等等,需要统一。



5.环境、设备与场景

a.不同设备、厂商的不同版本


都会影响到方案的落地和用户体验这个要非常注意。比如一些交互控件我们在6、iphonex和大屏幕尺寸上使用起来效果很好,但是小屏幕的时候这个交互控件显得就很难受,所以需要仔细斟酌用户的使用情况。另外还有横竖凭情况的交互方案是否兼容、是否需要与其他硬件进行兼容。


b.白天和晚上是否需要做不同的风格设计,以及在是否需要给用户遮挡隐私的功能。



6.文案

文案这点很多设计师都忽略了,你们有没有听说过一个叫文案设计师的岗位。其实文案在我们产品设计中是非常重要的。首先一个产品的文案对应的语气和产品调性也是相关的,就好比我们说产品有它自己的性格一样,另外文案的使用直接就影响用户对该信息的理解,比如一个对话框的文案是:确定退出吗?下面会有两种不同的选择,一个确定,一个是退出,大家觉得哪个比较好?还有就是不加“吗”,就变成了:确定退出?这样描述出来的语言给人感觉很冰冷,甚至有一些威胁。


所以首先我们的文案是否有温度,和产品的个性是否相匹配。其次文案的表述是否准确和通俗易懂,比如你告诉程序员一句话,帮我去菜市场买西瓜,如果有西红柿,帮我买两个,你会带什么东西回家?程序员版:if(看到西红柿)西瓜等于2;else 西瓜=1。buy 西瓜。条件:看见西红柿 执行命令:买两个西瓜一语道破版:其实吧,看到西红柿呢是卖两个西瓜的触发条件…没看到就买一个西瓜,看到就买两个西瓜。所以这里出现的不仅仅是程序员的思维和我们的差异化,也说明了一句话没有表述清楚所带来的问题是很大的。


另外就是文案用语的一致性,在整个产品同样的场景中,我们需要统一文案用语。


7.常见控件

具体见下方列表



8.撰写方式

作为一个设计师,不管是否在做视觉,我们都需要对文档有一个美化意识,如果你的文档非常凌乱,那么在别人眼里就会觉得你是一个比较粗心大意,不够负责任的人,所以我们尽量在做交互输出文档的时候也画的美观一些。


目录

首先在目录的撰写时候要进行分类,通常我做的时候会对该需求以页面父子集关系进行创建,父集为核心页面,子集为其下的相关子页面,这样页面的流转和归属关系就不会搞错。


说明

在撰写规则与说明时可以通过标签法进行标签说明的撰写方式,同样在视觉上保持美观,对比与对齐的运用,具体该写什么东西上面已经说明就不赘述了。除了交互规则以外,高阶的交互设计或者产品经理还需要补充业务规则,比如排序、商品抓去规则、权重、算法、活动规则等等这里就不展开说了。


总结

文档的形式有非常多种,针对不同的公司和产品也需要作出相应的调整,能够满足需求和方便协作,目的就达到了,我们并不希望过多的时间花在文档的撰写上,而是希望大家在做设计时多思考业务,本次分享就到这里啦~

文章来源:站酷   作者:应骏

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



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



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


日历

链接

个人资料

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

存档