首页

设计师要懂的用户习惯

ui设计分享达人


前言:


前些天对用户习惯进行了总结,这两天重新优化了一遍。我们在互联网产品的设计过程中,有时会听到一个词:用户习惯。设计师希望尝试更多新颖的交互方式、视觉效果,却常常容易被其他人挑刺指出不符合用户习惯,建立在用户习惯上的创新才是好的体验。


尽管设计师经常将用户习惯挂在嘴边,但是却很难有人说出用户习惯究竟是什么?我们如何判断所做的设计是否符合用户习惯?用户习惯是否始终不能打破?道理我都懂,就是不会做,实际上确实是这样,因为很大程度上取决于设计师对用户习惯的理解深度。


用户习惯本身很难被量化,但是不代表就是一个模糊的概念,你仍然能从用户反馈、操作行为数据对比等分析中一窥究竟,用户习惯是可以随着设计师的学习、经验、眼界等的提升而提升的。



什么是用户习惯?


心理学上认为,习惯是人在一定情境下自动化地去进行某种动作的需要或倾向。或者说,习惯是人在一定情境中所形成的相对稳定的、自动化的一种行为方式。 习惯形成是学习的结果、是条件反射的建立、巩固并臻至自动化的结果。

 

所以,习惯有两大特点:


需要注意的是,“长期”本身是是没有明确时间界限的,更强调多次的重复。这里的习惯,侧重于描述“习得性”,即人们通过经历、学习、刻意练习等方式形成的,所以这种习惯理论上是可以被改变的。


此外,习惯还有一种潜藏特性,区别于上面描述的“习得性”,是天生的、物种特有的行为模式。比如人空腹状态下,闻到香的食物会产生强烈食欲。这种特性习惯是刻在基因里的,几乎无法被改变。



试想,我们在使用 App 时,是否遇到过因为习惯的问题而感觉到不适应的场景?


举个最常见的例子,Windows 与 Mac 系统的软件关闭方式。使用 Windows 的电脑时,我们形成了关闭操作在右上角的自然习惯。后来开始使用 Mac 电脑,关闭方式都在左上角,在一段时间内,每次关闭时都感觉到格外不习惯。而 Mac 的关闭方式没有比 Windows 产生显而易见体验升级,改变操作习惯成本高,部分用户可能会认为 Mac 的关闭操作不好用。


当然,假如最开始接触的是 Mac 电脑,再使用 Windows 电脑,也会自然认为 Windows 不好用,这是先入为主的观念,一旦产生习惯,改变习惯将产生一定的学习成本。

 


用户习惯的产生


设计师需要思考用户行为的本质,而尽量减少主观判断。产品是给人使用的,所以了解人们的行为特征很重要,而只要涉及到对人本身的了解,就是极其复杂的,人类对自身的行为特征了解远远不足,但这不妨碍我们以现有知识去做一些分析和判断。


用户行为习惯的产生,与记忆的特点有很大关联,我们可以把记忆划分为外显记忆和内隐记忆。


外显记忆大家比较习惯和容易感知到,比如我们在学校学习时背诵的课文、公式法则等,可以用语言、文字等显性方式描述出来的记忆。


内隐记忆也叫非陈述性记忆,我们无法用行为描述而又确实存在,比如骑单车,学会之后很难会遗忘。刚开始学习时,会需要意识的介入,经过多次练习,行为会逐渐“自动化”,比如学习开车时,我们会注意力很集中,而习惯开车后,可以一边开车一边聊天。

我们平时说的肌肉记忆、条件反射也和内隐记忆息息相关,而且一旦形成,不太容易改变。需要注意的是,肌肉记忆只是一种简单描述,负责此记忆的是小脑,其实肌肉没有记忆。


所以有时候,我们感觉体验某个 App 时,会习惯性在某页面寻找某功能,或者觉得体验和其他 App 有区别,都可能是内隐记忆的用户习惯引起的。举个例子,某天你刚使用一个没用过的 App ,这时你想要找设置功能,那你大概率会不自觉的点击 App 的最后一个主 Tab (如“我的”),因为大部分 App 的设置功能都在这个场景,用户自然也就形成了习惯。


这里我且采用由心理学家基思·斯坦诺维奇(Keith Stanovich)和理查德·韦斯特(Richard West)率先提出的术语,用以说明大脑中的两套系统,即系统 1 和系统 2。


·系统1的运行是无意识且快速的,不怎么费脑力,没有感觉,完全处于自主控制状态,也叫快系统。

·系统2将注意力转移到需要费脑力的大脑活动上来,例如复杂的运算。系统2的运行通常与行为、选择和专注等主观体验相关联,也叫慢系统。


而这两个系统,是可以互相转化的,慢系统通过刻意练习,把新的习惯注入快系统,而这时快系统就是习惯的表现,这样快系统可以在日常生活中完成大部分工作,这就是我们常听说的熟能生巧,习惯经常能帮我们节省思考的精力,这又让慢系统进一步通过刻意练习,向快系统不断注入更多好习惯。


举个例子,你刚用一个 App 时,可能需要先体验一下你要的功能在 App 的哪个位置,但你用久之后,就会不假思索地找到它。就像你用微信,最常用的功能可能是回复信息、看朋友圈,所以一定会形成习惯。但是假如有人让你找一下微信里面“生活服务”的入口,你可能会先想一下可能出现在什么入口,这就是因为平时比较少用导致的。假如你常用这些入口,也会形成习惯,下次要使用这些功能的时候,就能够快速找到。



避免改变用户习惯


1、挑战用户习惯的风险


既然说到用户习惯的特点是“长期养成”且“不易改变”,那么挑战用户习惯一定会造成不适,甚至引起强烈反感。几年前 Ins 的 logo 改版,将 logo 由拟物化改成了扁平化,颜色也发生了变化。暂且抛开视觉效果不说,从用户视觉记忆上,已经习惯了下图左侧的效果,而右侧新版效果很难与左侧产生记忆上的关联。


许多用户反馈桌面上找不到这个应用、许多用户吐槽很丑甚至不想再使用。所以我们比较容易理解,为什么有时候 App 改版容易反而引起用户的反感,这很大程度上是用户习惯的影响。



2、如何避免挑战用户习惯


产品的用户是谁?


了解产品的用户是谁、用户的行为特点是什么。不同产品由于定位不同,所以用户群体也不相同,用户群体的不同自然代表用户行为特点的不同。如果设计师知道用户群体,但是不清楚具体行为习惯特征,可以尝试让你身边的用户帮你体验。


举个例子,B 站的整体用户画像相对而言更偏年轻化,所以产品设计上,无论是代表形象、UI 风格、交互体验都更显年轻化。而“小年糕”小程序的用户群体主要为中老年人,所以设计上不会显得很年轻,而是以操作明确、字号偏大、去除多余信息为主。


关注竞品的体验


关注主流产品的用户体验很重要,这些竞品的操作往往代表用户的习惯操作(或被培养出来的习惯操作)。大多数情况下,你需要了解竞品能做到什么程度,用户容易将习惯从一个场景带到另外一个相似场景。


比如点外卖,有的用户可能会下载美团和饿了么,尽管平台不同,但是在用户习惯中,操作模式是相似的,所以如果你要让用户的体验不突兀,那就往往遵循相似的操作逻辑。当然这些不是为了让一个产品去抄另外一个产品,而是要追寻更好的使用体验,你的产品比竞品体验更优,就更能吸引用户的青睐。


了解人类的行为/阅读模式


每个人本身都会具有相对稳定的行为、操作、信息阅读习惯,我们能见到的体验好的产品,都是符合用户的基本行为习惯、信息阅读习惯的,要想了解这些习惯,需要了解深层次的交互行为特征。


从操作而言,需要了解用户与界面交互的行为习惯,比如用户的操作(手势操作、信息布局如何才能便于操作),比如尼尔森可用性原则等。


从信息阅读角度而言,需要考虑人们眼睛观察事物的规律,比如格式塔原理:接近性原则、相似性原则、连续性原则、闭合性原则、主体/背景原则、简单对称性原则、共同命运原则。


了解平台设计规范


就移动互联网产品的领域而言,大家都是与手机互动,目前手机系统的两大平台:iOS 和 Android 也都各自有提供关于人机界面设计有清晰的指导,尤其是 Android 的 Material Design ,对于设计师快速了解设计规范、设计原则有很大作用。


iOS 与 Android 的人机界面规范链接:

iOS:https://developer.apple.com/

Android:https://material.io/



培养新的用户习惯


1、何时培养新的用户习惯?


我们提到挑战用户习惯会有风险,但用户习惯并非是永远不可改变的,有时我们需要培养新的用户习惯,也就是大家常说的“教育用户”,否则世界可能一直很难进步。


移动互联网兴起之前,大家都是线下打车,但是滴滴打车颠覆了传统线下打车的用户习惯;以前大家都是现金支付,但是微信支付颠覆了现金支付的用户习惯。


《设计心理学》里面有这么一段话:“如果用新的方式做一件事只比原来好一点,那么最好与以前保持一致。如果必须做出改变,那么每个人都得改变。新旧混杂的系统会让每个人困惑。当新的做事方式明显优于旧的方式,那么因改变而带来的价值会超越改变本身所带来的困难。不能因为某样东西与众不同就认为它不好。如果我们故步自封,我们将永远不会进步。”


改变的价值大于改变的困难


这里的价值包括但不限于用户价值、商业价值(短期价值、长期价值)等,当新习惯会需要用户改变旧习惯时,这个设计带来的价值有多大,值不值得让老用户付出学习成本。有时候,明知改变会引起用户的强烈抵触,仍然改变用户习惯,可能因为改变的价值大于改变的困难。


刚才提到的 ins 的例子中,有的人不知道 ins 为什么要改版,创新咨询公司 IDEO 的沟通设计主管 Remy Jauffret 说:“当品牌、组织超越了最初的商业意图,或扩展业务提供不同的产品,或领导希望吸引新的客户,这些情况都可能需要新的品牌视觉。变化总是大家不舒服,然后又平息,我认为时间才是检验真理的唯一标准。”


改变带来明显的体验升级


我们在设计中,有时候会遇到自己的产品某个功能体验比较差,但是延续了很久,而市面上其他同类产品在相同功能的体验上已经做的很好,我们可以往主流交互体验上改版吗?这时需要权衡改变之后是否能带来明显的体验升级,还是说对于用户来说是不痛不痒的变化,可改可不改?


以安卓为例,在几年前,安卓手机的底部有 3 个实体键,后面手机更新迭代,变成了虚拟三键设计,因此底部存在3个不同功能的热区。而在 Android 4.0 设计规范中,为了避免底部标签栏与已经存在的底部虚拟键产生交互上的冲突,安卓明确说明了不要使用底部标签栏。


但这种规则,在使用体验上、开发者的适配上都发生了问题,用户更接受 iOS 的体验,后面谷歌在 Material Design 中,允许了底部标签栏的存在。这相当于和原来的用户习惯不一致,但却带来了更好的用户体验。



2、如何培养新的用户习惯?


这里结合上瘾模型的触发、行为、多变的酬赏、投入进行阐述,这四个步骤是一个循环,当用户越沉迷于这个循环,说明你的产品对用户的吸引力越强,用户习惯也就越强,这里会侧重于从培养用户习惯的角度进行拆解。



触发:外部触发和内部触发 


外部触发说白了就是加强产品曝光,让用户一下子就能想起你。举个例子,“充电五分钟”下一句是什么?你大概率会想到“通话两小时”,这种经过外部的长期触发,最终已经转变成了内部的习惯,会让你记忆深刻。


外部触发的类型主要有4类,通过将信息渗透进用户生活,吸引他们采取下一步行动:


付费型触发:做广告、搜索引擎推广都是付费型触发,争取新用户;

回馈型触发:公关和媒体等领域的触发,比如对产品做正面报道、推荐等;

人际型触发:熟人之间的口碑传播是一种极其有效的外部触发,可以为产品带来“病毒式增长”;

自主型触发:以驱动用户重复某种行为作为重点,让用户形成习惯,比如新闻订阅、每天早晨的闹钟等。


内部触发是用户心理产生的使用动机,内在情绪驱动自己去使用一款产品。


当某个产品与你的思想、情感或者是原本已有的常规活动发生密切关联的时候,那一定是内部触发在起作用。对于习惯刷朋友圈的人来说,拿起手机就不会自觉打开微信;对于习惯刷微博的人来说,拿起手机就会刷起微博,甚至自己都没有意识到。一再重复这种场景,会用户就会对此形成一种稳定的联系,进而形成习惯。


行动


斯坦福大学福格博士曾提出“福格公式”,福格行为模型可以用公式来呈现,即 B = MAT。B 代表行为,M 代表动机,A 代表能力,T 代表触发。只有动机、能力 、触发三者皆备,才能跨过“行动线”。


触发:即上面所提到的外部触发与内部触发。


动机:动机决定你是否愿意采取行动。福格博士认为,驱使我们采取行动的核心动机主要是三种:追求快乐,逃避痛苦;追求希望,逃避恐惧;追求认同,逃避排斥。


能力:这里要详述的是能力,所谓习惯,是指人们在几乎无意识的情况下做出的举动。一种行为的复杂程度越低,无论是体力上的还是脑力上的,被人们重复的可能性就越大。越简单的操作成本,记忆成本越低,越容易形成用户习惯。


举个例子,刷抖音就是用户行为成本极低的场景,你在刷抖音时,不需要多余的交互行为,切换视频甚至不需要点击,只需要向上滑动。除开抖音算法的精准推荐不说,从交互层面而言,也是足够简单并且形成习惯了。


如果改变会打破认知习惯,要让用户能快速了解新设计的使用方式。最好的方式是能够让用户快速与已其他竞品的操作习惯产生关联。比如采用其他主流应用成熟的交互方式。


如果改版会很大程度上改变用户行为,也可以考虑尝试以下的方式。


· 改版操作指引:这种方式较为常见,但是仍应注意避免繁琐的操作指引,切勿把操作指引当作体验差时的解决方案。


· 兼容多种用户习惯:这种方式可以让不同用户选择适合自己的交互方式,最大程度考虑到所有用户,但同时也可能造成了功能冗杂的情况。比如安卓底部三大金刚键,后面手机全面屏时代,新增了全面屏手势。考虑到安卓老用户的使用习惯,三大金刚键(底部虚拟按键)始终被保留下来;


· 允许切换新旧版本:这种方式一般是改版变化过大,用户一时间不容易接受新的体验方式,常见于网站,如站酷早期的大改版,但是仅适用于过渡期。


当然,除上述方式外,肯定还有一些其他让改变行为习惯更舒服的方式,这里不一一列举。


多变的酬赏


多变酬赏主要表现为:社交酬赏,猎物酬赏,自我酬赏。这几种酬赏会加强用户对产品的使用习惯。


社交酬赏:人们从产品中通过与他人的互动而获取的人际奖励,比如被认同、重视、喜爱等。比如人们喜欢发朋友圈、微博等,期望得到回馈,某种程度上都是为了获得社交酬赏。

猎物酬赏:人们从产品中获得的具体资源或信息。比如浏览信息流,丰富的信息流内容为用户提供了资讯,比如刷抖音,人们追求视频的新鲜感、追求内容的丰富性都是属于猎物酬赏。

自我酬赏:人们从产品中体验到的操控感、成就感和终结感。在目标驱动下,我们会去克服障碍,即便仅仅是因为这个过程能带来满足感。就像你玩游戏,希望赢过对面,或者期待将游戏玩通关,本质上属于自我酬赏。


投入


如果希望继续培养用户习惯,与产品产生更紧密的联系,就需要鼓励用户进行一些投入,以增加他们使用产品的可能性。行动只是用户使用的第一步,促使用户对产品的投入,才会真正增强用户与产品之间的联系,形成更强的用户习惯。但是如果用户自身没有投入,即替换成本低,那么随时都可能有被其他产品取代。


举个例子,移动互联网时期,微信早早入局,人们的关系链都在微信里面沉淀,即人们越使用微信,关系链沉淀越多,就越难以更换其他产品,所以两年前想要挑战微信的多闪、马桶 MT 和聊天宝这三款社交 App 不可避免的失败了。


用户越愿意投入,就证明用户粘性越高,在此过程中,用户习惯也会不断加强。



结语:


现阶段,人人大谈用户习惯,但是用户习惯不以自身为标准,而是需要考虑产品用户的行为特征,以及人们在使用产品时更加深层的、甚至用户本身都没有发现的习惯,这就需要设计师对习惯的产生、习惯的判断、习惯的培养有深入的认识。


一般情况下,产品不适合贸然改变用户习惯,但是在有特殊需要的情况下,还是不可避免的改变产品的用户使用习惯,当然我们需要如何让用户更加容易接受。大多数产品,都希望用户能够形成对自己产品的习惯,所以需要了解用户如何对产品产生习惯、加强习惯,使产品拥有更强的吸引力,但是良好、正向的用户习惯一定是基于用户体验的。


文章来源:站酷 作者:热风_

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



细微之处见真章-逐帧分析方法的产生与应用

ui设计分享达人

逐帧分析方法是一种针对动态的、短暂的过程对象进行对比分析的方法。该方法可帮助设计师以微观视角完成差异分析并得出相应结论。与传统的静态截图、动态录屏方法相比,其优势是可以看到过程的全貌,对动态细节一览无余,具有较高的分析可控性。


背景


逐帧分析方法的产生源于一次针对加载场景的体验调研项目。百度百科对于加载的定义是:所有软件要运行必须加载到内存,加载就是把需要的文件及信息读取到内存里。简单说来,所有从服务器读取信息并显示在手机屏幕上的过程都属于加载。以百度APP举例,加载的典型场景有:启动、打开FEED落地页、打开搜索落地页等。这些场景都有一个共同的特点是:动态的过程,且过程较为短暂。


基于以上特点,运用对比分析里最常见的静态截图或动态录屏方法,是无法完成分析的。原因是,静态截图对于一个动态过程来说,无法看到过程的全貌,可对比点较少,分析要素不可控(一张静态截图中,无法做到涵盖所有分析元素)。而采用动态录屏的方法进行分析时,问题也同样明显:过程太快,无法看清细节;不同视频节奏不同,对比起来比较困难。因此针对加载这种特殊的场景,就需要采用一种全新的方法既能看到过程全貌,又可以对细节一览无余。





方法的产生


小时候我们都玩过跑马灯的游戏,即一系列静态图片通过快速轮转,由于视觉滞留效应,便可看到一段动态影像。如果把产生动画的过程翻转过来,也就是说如果可以把一段动态影像拆成一系列序列帧,那么是否可以更好的完成影像观察?


以百度APP打开小视频落地页的加载场景为例,当我尝试将这段300ms的过程录屏拆分为18张序列帧后发现,除了可以清楚的看到过程全貌外,对于过程中的所有细节也可以一览无余。同时,序列帧可以进行任意拆分,以便完成多角度观察。




到此为止,逐帧分析方法的雏形已经产生。在之后的章节,我将为大家具体介绍如何完成序列帧分析以及如何导出序列帧。




如何进行逐帧分析


面对一系列序列帧,我们可以通过“序列帧三要素”来导出关键数据及结论。

 

要素1:序列帧全流程


首先,我们进行序列帧观察的时候,需要明确定义目标对象的起点与终点。由于逐帧对比方法适用的观察对象均为短暂的动态过程,明确定义全流程的起点与终点是为了让观察过程和结论更加精准。


以百度APP打开搜索落地页为例,起点与终点分别是:点击搜索结果手指松开的第一帧与搜索落地页首屏内容全部加载完成的最后一帧(可以通过观察前后帧是否有变化得出结论)。这一要素中,可以采集到的关键数据为时长,时长可以帮助我们观察加载性能的好坏,甚至在进行竞品对比的时候,快速找出与竞品在时长方面的差异从而得出优化建议。结论输出时,需要将帧数转换成为时间单位(如何将帧数转化成时间会在后续文章中为大家讲解)。



要素2:序列帧子流程


在前文中提到,逐帧分析法的一个优势是,逐帧序列可以进行任意拆分,以便完成多角度分析。在分析的第2要素中,我们可以最大限度拆分子流程,同时需要明确每一个子流程的起点与终点。这一要素的分析中,可以采集到的关键数据为子流程时长,缺失或多出的子流程,以及子流程内部的差异。


例如在百度APP Android端热启动过程中,全流程被拆分为:启动至全屏、持续白屏态、内容加载3个子流程。通过换算,可以看到每个子流程的时长。并且在和竞品的对比中发现,百度APP缺失了持续白屏态这个子流程。而在启动至全屏的子流程中,百度APP因为没有添加过渡动画,与多数竞品是有差异的。


要素3:用户体验节点


用户体验节点的对比是逐帧分析法的第三要素,这一要素进一步深入到过程的微观视角,使得分析结论更为全面。而用户体验节点是逐帧分析法所提出的一个全新概念,其定义是:产品界面上任何一次用户可感知的变化,都叫做用户体验节点。以百度APP Android打开搜索结果页为例,整个过程的用户体验结点有5个。通过用户体验节点可以采集到的关键数据有:用户体验节点的数量以及用户体验节点的顺序。



我们以Android打开搜索落地页为例为大家进一步讲解如何完成用户体验节点数量的分析。通过对比发现,百度APP在整个加载过程中的用户体验节点数量多于竞品,多出的节点为:白屏节点、文字加载节点。虽然百度APP加载时长与竞品相差无几,但是由于节点数量较多,导致用户在等待过程中经历了过多的页面状态变化,形成了较强的视觉闪跳感,从而引发用户感知层面的错觉,认为百度的加载时长较长。因此我们可以通过减少非必要的用户体验节点,从而提升加载场景的流畅感。但是,用户体验节点的数量并非越少越好,这还要根据实际业务与优化方向来输出具体结论。



用户体验节点顺序的分析,可以参考百度APP iOS FEED打开图文落地页的示例。在这一示例中,百度APP图文落地页内容加载节点位于框架转场节点之后。但是对比竞品发现,多数竞品在这个过程中,内容加载是先于框架转场的,而这种节点顺序的优势是,转场完成后,用户即可开始浏览内容,整体感知较为流畅。这种导致阅读流畅感体验差异的原因很难通过肉眼或常规竞品对比法观察得出,由此可见逐帧分析方法针对特殊场景的分析优势非常明显。





序列帧三要素总结

 

在此,我们回顾一下逐帧分析方法的“序列帧三要素”。


要素1:序列帧全流程,可采集的关键数据有:全流程时长。


要素2:序列帧子流程,可采集的关键数据有:子流程时长、子流程是否缺失、子流程内部的差异。


要素3:用户体验节点,可采集的关键数据有:用户体验节点的数量与顺序。




如何导出逐帧序列


工欲善其事,必先利其器。进行逐帧分析前,我们首先要将录制好的视频转化成序列帧。以下章节将为大家讲解如何导出逐帧序列。


整个过程可分为:录制、创建合成、输出3个环节。


1.录制


由于系统特性,iOS和Android手机双端建议采用不同的录制手段。iOS手机可直接通过数据线连接到电脑,并使用电脑的QuickTime进行录制。这样的好处是保证了录屏的帧数基本稳定在60FPS(每秒传输帧数);Android手机建议采用机内功能或其他录屏应用完成录制,但是安卓中低端手机很容易出现掉帧的现象,因此就需要我们在合成和输出阶段制定一个合理的输出帧数,让分析的结果更加接近真实。另外,建议录制的起始点适当延长,这样便于素材在合成阶段精准切割。


这里要为大家讲解一下如何将帧数换算成时长。以iOS的输出帧数为例,换算公式为:iOS时长= N(帧数) x 16.6ms。例如:在iOS打开图文落地页的加载过程中,百度APP总时长为:73(帧数)x16.6ms= 1217ms(约等于)。



2.创建合成


创建合成阶段所使用的工具是AE。AE的好处是:

1.方便查看原视频帧速率,对不稳定的帧速率进行统一处理;

2.可以将视频转换为图片序列,便于后续的逐帧分析;

3.AE也可以将多个视频进行同步播放来进行对比验证。



第一步:打开AE>合成>新建合成。


这一步的目的是通过合成设置,统一帧速率。通过一系列实验,我在新建合成时,将iOS录屏的帧速率设置为60帧/秒,Android录屏的帧速率设置为30帧/秒,这样可以保证最大化的减少空白帧,使分析结果更加准确。



第二步:导入录屏




第三步:截取起止点关键帧。


在进行素材处理的时候,需要精确到每一帧,由于逐帧分析所针对场景的时长极为短暂,很可能由于一帧的差距,导致分析结果相差甚远。


以百度APP iOS端热启动过程为例,我们将录屏中手指抬起的前一帧(即icon显示出点击态)做为起点,将APP启动后填满手机屏幕的第一帧(可通过观察法,在AE中查看前后帧是否有变化)做为终点完成素材处理。


3.输出

        

输出的路径为:菜单栏 文件>导出>添加到渲染队列,在渲染队列中找到待渲染视频,再在 输出模块>格式选择JPEG或PNG以序列导出。这一步的目的是,将一段视频文件拆分成可提取对比的逐帧画面。


最终导出的序列帧如下:


在完成分析对象序列帧导出工作后,便可开始进行逐帧分析了。



结语


逐帧分析法是在实际项目中总结并提炼出的一种全新的分析方法。该方法对于短暂的、动态的过程非常适用,可以帮助我们从微观视角发现问题、验证问题、得出优化结论,极大的提升了分析效率和精准度。逐帧分析法也在后续的多个项目中也得到了推广和验证,希望可以帮助到大家。

文章来源:站酷   作者:MEUX

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

构建科学有效的色彩系统

ui设计分享达人

Meet more beautiful colors.


“色彩是我们感知世界的重要媒介,对于信息传达有着重要的作用,能使人们能够更有效的感知设计的意图和内涵,使传达更高效。且人对色彩的视觉感知与想象能力,能够指导人做出预测、理解和决策。”

-- lyft kevyn arnott


——————————

随着世界的数字化转型进程大爆发,科技把每一张有形的办公桌移到了云端,用户沉浸在数字构建的世界中。腾讯文档作为先进的生产力工具,产品生态越来越多元丰富,多品类多终端的复杂环境展现在我们面前,开始真正的朝复杂庞大的大规模设计迈进。我们希望能以更加专业、高效的设计姿态迎接腾讯文档的未来挑战。


色彩是体现品牌与基因的关键因素,构建科学高效的色彩系统,建立产品的品牌形象,对产品设计极具指导意义。


腾讯文档在色彩上也进行了一些深入的挖掘和沉淀,一方面希望带给用户全新的品牌印象和认知,另一方面构建科学有效的色彩系统,为产品的发展提供优质高效的设计系统基础。本文将聚焦于色彩系统的构建。





Chapter 1

——————————

品牌标准色进化

腾讯文档代表着效率协作的先进生产力,从云端创作到云端协作,打破了办公空间的实体界限。我们希望,新的品牌色,能够为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和认知。


我们将标准色由平静的天蓝色,升级为更加生动、进取、科技、可靠的明亮清澈的钴蓝色。这种蓝色具有更多的电子意味,蕴含了更多的活力和想象力,承载了腾讯文档对未来数字世界新挑战的态度和形象的进化。



同时我们认为灰色在腾讯文档的色彩系统中起着至关重要的作用,为产品界面创造结构、表达边界、建立信息层次。我们将灰色赋予了统一的品牌认知感受,将蓝色加入到中性灰色里,生成了腾讯文档特有的蓝灰色。



至此,腾讯文档标准色进化升级,它体现了腾讯文档对可靠稳定的技术、产品体验的追求,以及对未来智能的数字世界的不断创新和进取,蕴藏着无限的可能性。



Chapter 2

——————————

丰富多元的辅助色


在一个科学有效的色彩系统里,往往包含至少两种色彩:主色+辅助色,两者互相搭配组合成产品体系的整体色彩感受,减少用户在产品体验中对反复出现的主色的视觉疲劳。


腾讯文档的产品生态愈来愈丰富多元。我们拥有多品类的产品,为用户提供了丰富的产品功能,其中云端协作、文档资产的沉淀管理是腾讯文档的非常重要的能力,在线文档、在线表格、在线幻灯片、在线收集表、在线思维导图、在线流程图以及文件夹等的品类图标,又是用户在对文档进行协作分享及沉淀时,识别不同类型文件的关键因素。基于此,腾讯文档相较于其他产品需要更多的辅助色。


于是,如何有效的选择既符合品牌调性又有区别度的辅助色是构建腾讯文档色彩系统的关键。在辅助色选择上,我们以邻近色、互补色、对比色为主要方法构建了辅助色彩体系。


1、 创建色相色板,保持相同明度、相同饱和度



我们以腾讯文档标准色#1E6FFF(H 218 S 88 B 100) 为起始点,S(饱和度)、B(明度)保持不变,H(色相)以218°为起点,以15°为增量或减量标准,生成24色色板。这个色板是我们选取辅助色的重要依据。



2、 以邻近色、互补色、对比色为原则选择丰富的辅助色彩

 邻近色 在色相环中,相差15°的颜色为邻近色,凡在60°范围内的颜色都属于邻近色的范围。邻近色之间往往是我中有你,你中有我,色彩之间比较和谐。


● 对比色 在色相环中,角度相差120°-180°之间的色彩,文档使用了120°为角度来选择对比色。


● 互补色 在色相环中成180°角的两种颜色,互为补色,当这两种颜色彼此相邻放置时,它们会为这两种特定颜色创造最强烈的对比度。


为了保持腾讯文档的基础品牌调性,并保证其具有极清晰的识别度,我们以品牌蓝色为起点,选择了相对较多的邻近色,以保证在色温上保持腾讯文档整体色调的清爽感。并利用对比色及互补色,选择更加丰富多元的色相,以保证能够满足各种使用场景下对色彩的需求。


总的原则是利用邻近色构建有质感、品牌感的色彩家族,利用对比色及互补色扩展色相,以制造更强烈的色彩对比,满足一些冲突性场景。



3、 校正辅助色

虽然我们保持相同的饱和度和明度,使用科学的方法得到了较为合适的色相,但由于色彩本身自带感官明度属性,导致在视觉感受上的感官体验并不同频。


黄色、绿色的明度即发光度较高,蓝色就稍微偏暗一些,导致色板看起来不一致。为了让不同色相看起来更加协调,需要调整色板的明度和饱和度,以保证视觉感官体验同频且更加和谐舒适。



校正原则:


● 色相必须保持是 同类色(色相环中15°夹角内的颜色)


● 保持感官明度同频


● 保证视障群体的识别度


校正后我们得到了清澈明亮、清晰易分辨的腾讯文档的主色+辅助色。并且针对视障群体进行了色彩测试。





Chapter 3

——————————

易用的中性灰色

灰色是产品体验设计中至关重要的一节,工具型产品大部分是由各种各样的容器、面板、列表组成。灰色为产品界面创造结构、表达边界、建立信息层次,保持舒适的对比度是提高可读性和吸引用户注意力的关键。


前面我们已经定义了腾讯文档的蓝灰色,在界面的设计中,我们将其与中性的灰色结合,共同构建灰色的色彩体系 。

● 扩展蓝灰色相,应用于图标、容器,构建有层次、舒适清爽的产品界面 。

● 用带透明度的黑色,应用于字体等。

为构建一个高效易用的灰色调色板,我们将蓝灰色彩作为Y轴,有透明度的中性灰色作为X轴,两者透明度保持一致,建立起腾讯文档有梯度的、丰富的灰色调色板。



对比度是否合理是阅读体验是否舒适的重要评价维度,过高或者过低的对比度都会影响阅读体验及识别度。下图是对比度的钟型曲线图,随着对比度的增加,舒适度和识别度都在上升,但一旦超过一个界点,对比度越增加,识别度和友好度亦会逐步下降。



为保证视障用户的使用,保证足够的对比度,遵守 WCAG 2.0 的标准,我们对调色板灰色的对比度进行了可用性测试,以指导腾讯文档体验设计中灰色调色板的使用。



是:对比度在AA标准以上,符合W3C标准,可以使用。


中:仅可用于disable状态。


否:对比度在AA标准以下,不符合W3C标准,不可使用。



Chapter 4

——————————

高效易用的调色板


定义好文档的主色、辅助色以及中性色后,我们需建立完整的调色板来满足不同场景下颜色的使用。以传达品牌精神,建立色彩层级,或传达信息,或强化界面层级。

在色彩系统中,很多产品使用 Tints and shades 系统,通过在颜色上面增加白色,或者增加黑色,来改变它的明度和饱和度,形成同色系的调色板。但这种方法得到的调色板往往比较刻板僵硬,故腾讯文档采用了另一种方式,将已生成的灰色色板与色相叠加,在符合无障标准的区域,选择不同明度饱和度的色彩,形成有梯度、有层级的彩色调色板。


Tencentdocs_blue:


生成主色-蓝色色阶:



用同样的方法将辅助色生成色阶:


现在,我们有一个梯度丰富,能够支持腾讯文档设计系统的调色板了~




实际案例


实践才是硬道理,我们尝试以这个调色板为指导来调整优化腾讯文档链接色的优化调整。



为保证用户阅读体验的舒适度,链接之类的彩色文本,要求颜色在背景下可以达到4.5:1对比度以上,以使它能够清晰的从灰色文本、背景中脱颖而出。于是,我们放弃了品牌蓝_1E6FFF,选择了品牌蓝70_175CEB 作为链接色。


以后,选择颜色,so easy~



结束语

这个长长的制作调色板的故事就要结束了,我在这项工作中,重新审视过去设计中的设计决策方法,在其中学到了很多东西,希望本文对您也有所帮助。


我们经常快速的动手,依靠主观情感去选择颜色,在刚开始可能没遇到什么特别的问题,但随着产品的壮大和发展,往往会越来越凌乱。抽丝剥茧的搭建色彩系统,真正让色彩为设计服务,简化团队的工作,相信您会有更愉快的工作体验~




文章来源:站酷  作者:腾讯ISUX

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

为什么交互设计能帮助产品解决问题

ui设计分享达人

一、为什么交互设计能帮助产品解决问题


为什么那么多人觉得应该先学UI设计再学交互设计,因为UI门槛低所以入手快。其实交互比UI更早出现,从需求理论可以看出人们在追逐主观体验的感受,在基础需求未被满足前是不会出现更高层次的需求的。所以UI设计让更多用户感受到了舒适和更好的体验。殊不知,如果底层的交互和产品的可用性未被满足,那么UI做的再好也是徒劳。




市面上大量出现同质化产品、设计,就是因为大家都在按照现有的,常用的模版在设计,现在其实比早两年会好很多,很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。


例如下面的案例,这是一个电瓶车电池租赁的一个产品。



undefined



从美观角度,左侧的界面更加简洁信息也有规律,有美观的banner和看起来让人有点击欲望的大按钮以及“令人觉得很热门”的热门租赁板块。当我不放出右侧的对比图时,大家在第一反应中,有多少人可以重启自己的视角,还是说已经被这个页面所拉入到不可自拔的漩涡中去了呢?


如果让你盯着第一个界面进行改版,我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来,或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的,即便将错误路径3改成了路径2,你以然还是在错误的路径上,本质没变。所以为什么我们说要做正确的事而不是正确的做事。





交互不仅仅能够让产品好用的,也要让产品走对方向。


另外,UI也是交互的一部分,属于看的懂。好用可以分为看得懂,学的快,用的会,交互体现在人们日常所接触到的大部分媒介,并且与之产生联系。例如一把水壶,水壶的设计形式首先通过视觉让你感知这是一个水壶,如果把水壶的外形做成一个马桶,你觉得它还是一个水壶吗,这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作,例如装水、倒水。而用的会就是这个水壶更多的附加功能,例如烧水、定时、调温等等。



1.交互设计中媒介与人的关系


1.1顺应


交互的媒介是不可缺少的,大家是否去研究过为什么古代人们撰写文字是从上至下,从右往左而现代人的习惯是从左右的?古代受限于工具、媒介,竹简是主流的记录文字信息的媒介, 有人会说竹简可以从做往右写不是非要从上往下啊,但是大家可以看到人们是如何打开进行阅读的,如果是横着阅读但是打开是上下展开就会非常不自然了。


所以在当时人们为了适应非常有限的工具资源,改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑,那基本也就凉凉了。


从2g到5g时代的发展,除了生活方式发生翻天覆地的变化外,我们所接触到的媒介也发生了变化,从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步,让人们对信息的获取更加方便快捷。除了内容,外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化,从当初的搬砖按键手机到支持ar等新技术的超智能化手机,改变了我们的认知也改变了我们的生活方式。



1.2迁移


平台迁移的交互成本,很多同学可能都玩过moba类游戏-dota,这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制,键盘用来控制技能的释放和其他快捷物品的使用,都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标,这是端游中基本的交互行为与操作。





在现在非常火热并且模式和dota相似度很高的王者荣耀手游中,我们看到了,如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动,右手拇指来控制技能的释放,在这里大家要注意,在端游中技能的释放是可以非常精准的,并且可以指向性释放在某一个角色中,但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能,但是在手游中我们无法做到选中某一个技能再点击到某一个角色上,所以手游中只能进行非指向性的预判技能释放。







同样在端游和手游的吃鸡游戏中,端游键盘控制人物移动,鼠标控制射击与视角,但是在手游中控制射击与视角就需要2个手指来完成非常不方便,也很影响射击的精度,但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备,专门用来给多余的手指进行射击操作。


另外,大家如果做b端的同学应该也深有感触,平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事,因为在网页端我们有大量的空间和更自由的控件形式去承载信息,比如联动的左侧标签导航和顶部联动的标签导航,在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航,但是页面显示实在有限,很多的信息完全无法在一个界面中呈现,所以要么将页面进行左右滑动,要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。


web端的工具和网页通常都会有撤销操作,按CMD(ctrl)+Z大部分都可进行撤销上一步操作,但是在移动端我们无法通过特定、或者统一的手势进行撤销,所以很多时候在表单输入的时候会有一键删除图标,却无法进行撤销。所以我在想是不是可以在用户一键删除信息后,删除按钮变为撤销按钮,有待考量。



2.交互认知的盲区


到底什么是交互设计,这个问题其实是比较复杂的,也是我一直在思考的问题。所以也翻阅了很多文献,尝试做更多的案例来解释。交互设计的概念真的挺多的,光网上能够找到的定义就不下5种,这些对交互设计的定义中,比较频繁出现的是行为、场景、用户等词汇,交互设计到底设计的是用户的行为,还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情,我觉得可能还是没有能够解释清楚交互设计的本质。


中国历史文字的演变,它并不是一个模仿的过程,而是一个从底层对文化、自由、精神、环境、人的深刻理解而发生的一种进化过程。但现在其实很多的交互形式都是来源于一些大流量产品的模仿,更多的是担心用户成本过高而妥协为满足用户预期。



2.1信息不对称


事实上,为什么我们讲不清楚什么是交互设计,其实UI设计也一样,她绝不可能单纯的指代用工具绘制出用户界面,其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语


例如“你可以意思一下”,单就这句话,我们大概知道最关键的是“意思”二字,包含了特别多的含义,含义需要通过语境、使用场景来区分,说者的“意思”是想告诉听者什么呢?没人知道,是一口气干完一瓶酒,还是喝一口?还是送一点礼还是?应付一下?


当然这句话中的“可以”也很有讲究,加上“可以”说明你也能选择不“意思”,是不是觉得这7个字让我们整一句话都活了起来,说者与听者如果不在一个境中,听着就压根不知道说者的具体表达含义。


同样的,在设计领域,很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。 说出来自己都要笑出声,还有什么五彩斑斓的黑等等。就比如呼吸感这样的词,这个词听起来比较抽象,让听者都有点不太好意思追问什么是呼吸感,其实你问了,说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸,但设计者觉得现在刚好,所以本身就没有一个标准,更多的就是主观的感受,让你不得不接受这个建议的原因是因为两者的身份。


我们用我们能够讲述的语言去描绘我们不懂的事物,再例如设计师和开发还原只会说往左移动10px,而不会说给这个view加上padding left 10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识,设计师通常喜欢描述从左到右或者从上到下,但是在开发的语音认知理,他需要知道的是空间坐标,并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识,开发也尽可能的去补充设计背景。


在这里,交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通,所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。


再举个例子,不知道大家有没有编辑过问卷或者做过用户访谈,很多时候是不是觉得收集到的信息无效、无用,其实很多的原因是因为我们和用户对于这些问题压根不在一个频道,比如:你的问卷问的是,您喝酒的频率是多少,选项有:从不、偶尔、经常,在用户的眼里偶尔可能是1年喝一次,而我们觉得差不多1个月喝一次算偶尔,再比如访谈的时候问用户这个问题:您觉得您喜欢下面哪个页面的风格?用户:“什么是风格?”


所以交互设计师有一个能力久显得很重要了:让万物都可与之对话的能力,对话需要什么,是语言。




3.交互语言的浅见


我们都知道,语言是我们沟通的根本,语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言,不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等,例如在模型手办中有分线、渗线、勾线、补土等,这也都是在特顶专业领域中的一些术语,但这些并不是语言,只是在某个领域中大家总结出来便于沟通的文字符号。


所以我们再回到上方看一下定义,首先语言是由词汇所组成,词汇是由符号做组成,大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法,但这些都仅仅只是规范,而并不是语言。语言拥有更强的普适性和通用性。


那么我所认为的语言他首先包含了能够组成词汇的符号,这些符号大概就是指:点、线、面、体、色彩由这些点线面体可以组成的词汇有:按钮、文字、图标、图片等。但是光有词汇不行,在汉语中有12种词类:名词、动词、形容词,在由句子组成的词汇中包含了不同的成分:主、谓、宾、定、状、补...这里不过多叙述。


语言很重要的一点它具有语境,语言的运用包含了看听读写4个方面,看和听指的是输入,读和写指的是输出,那么交互设计语言中,也包含输入和输出两种属性,例如输入指的是由不同“词汇”组成的“句子”,比如由标题、箭头、色块组成的一个itme,是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。



这里的控件虽然有两个属性,但是还需要语境来帮助我们理解,一个是它本身所能够输出的默认状态的,比如点击之后的跳转页面,另外他也可以具备产品赋予的自定义属性,例如底部滑出picker。




还有,在汉语中“去买两个桃子吧”,这里的“两”肯能是虚数也可能是实数,但是在交互设计中,我们如何表示点击1下和两下或者是多次呢,一般单击的属性通常可以有一些特性的符号属性所表示出来,例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等,那么双击的话可以用双箭头来表示吗,当然不可以,双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。






那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思,并且有用的。这会让更多信息不对称的情况消失,不仅仅是设计师,在产品团队中大家都能够有一套共性的交互语言系统,无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中,大多都是多种元素的拼合,给出常用的、可复用的控件、组件,但是大家依然还是无法从语言角度去创新,这就导致了很难会有新的、有用的交互形式的出现,比如很多搜索控件都是承载在顶部导航栏中,那么在做规范的时候也只能在这个组件上去微调,殊不知搜索这个控件的“语境”并不单单只能在页面顶部,例如高德地图做的就很好。这样一来,这个组件的常规规范形式就能和很多产品区分开来了,当然要视产品形态不同。



4.业务背景与交互形态


4.1不同业务背景下的信息组织


市面上有许多的新零售电商产品,页面中的信息流也是大同小异,但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式,但是我们要知道,30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示,但是3000个就不行了,很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。





所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中,首屏基本上都是呈现这样的策略,从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局,从基本上能够满足一个大量sku电商产品的所有需求,但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢?


从交互角度入手,那么既然我们无法做到大而全,那么我们至少可以做到精准、限时,让用户上瘾的策略,上瘾模型这边不再赘述。所以类似云集在首屏的策略可以概括为整合搜索与banner、分流入口、cta、营销瓷片以及以时间为纬度展示的大图信息流。重点在于可随意控制的营销工具,以及时间轴的商品推荐,让有限的资源呈现更多的形式变化以及让用户有时间概念,每天固定时间来进行活跃。





4.2营销工具化


通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性,并且在后台工具中灵活控制,同时除了日常的营销目的之外,在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。


4.2.1更加灵活的控制方式




4.2.2多样的营销结构



最后总结一下,我认为交互设计也包含了视觉,所以我们在决定用什么样的设计形式之前需要考虑更多,入业务、用户价值等等,从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。






二、为什么UI配色那么难


不管是做UI设计还是画插画,有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够,其实不然。一个可能是大家总结的太少,从来都是凭感觉和运气去配色,但其实都是有讲究的。本文不会给大家重复讲解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,这些大家都可以从某度中直接搜到。我今天要给大家分享的是人们是如何认识色彩,并且在产品设计中使用的。



1.人类对色彩感知的原理


大家都知道,对于不同的颜色,我们对其的感知是不同的,有人觉得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那这是什么原因呢?首先我们要知道我们眼睛内存在两种感光细胞:视锥细胞和视杆细胞,视杆细胞能够感知光线强弱但无法感知颜色,而视锥细胞却相反,视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞,而视杆细胞却用的少,更多的是在黑暗的环境中使用的多。


视锥细胞的三种类型分别是低频、中频和高频视锥细胞,分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感,它的范围包含的比较广,特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。





大家在平时生活中都能看到,在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识,因为这些非常醒目。更容易被红视锥细胞感知到,但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。



1.1人对色彩边缘的对比更加敏感


我们来做个实验,如下图,大家觉得在中间的灰色块是纯色还是渐变色,可能很多同学看上去都会觉得是个渐变色,但其实它就是一个纯色,不信的同学可以自己在工具中尝试一下。




但如果你把这个色块拿出来后,不在这个环境中直接进行边缘对比,那就不会出现渐变的情况了。那光说原理,我们也来看一下在产品设计中需要注意的地方,因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置,这样就会造成边缘视觉的对比,本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。





如果你想要让两个颜色接近的元素具有识别度,那么最好将这两个元素进行重叠摆放而不是分开摆放。另外,如果是卡片样式的设计,背景色一定不要过于灰暗也不要过于浅白,过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比,显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。





还有,为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理,因为文字和背景叠加产生的轮廓只是文字的轮廓,在我们的第一印象中只是一种符号,当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击,但依然还是不够明显,所以为了强化可点击这个感觉,我们才用了线框、背景色、箭头等方式。





2.色彩在UI设计中的作用


1.加深品牌印象与品牌感


一般来说,产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中,所以例如闲鱼、马蜂窝等,主色都采用了黄色,黄色具有非常活泼、有趣、好玩的特性,无论是线上还是线下都使用了这个品牌黄色,从每一个线上元素的主色,到线下包装的印刷色。


但一定要注意的是,如果品牌的主色偏灰偏暗的话,可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的,所以在线上的界面用起来会非常不和谐,和整体偏浅色、轻的风格对比起来太强烈,引起不适。





而且线上觉得还OK的颜色,由于印刷的原理,实物也会更加偏低饱和和偏暗。



2.引导用户视觉凹增加易读性


我们在上一篇十万个为什么文章里提到了人们如何阅读信息,提到了一个视觉凹的概念。所以在界面中,什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品,使用了高亮色来引导用户视觉。







当然色彩的运用也会讲整个页面的层级凸显出来,而不单纯的用中性色来区分层级。


3.区分信息交互的状态


同样是上两张图,大家可以清晰的看到,美团中的附近热卖好点、满减标签、价格,其实都只具备信息的呈现,但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样,“展开”使用了辅助蓝色,这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上,当然也会有其他的色彩来表示可点击。


所以不是所有的元素都要赋予颜色,这样会使整个页面非常混乱





另外,UI设计中主色除了引导用户的作用外,也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面,当前板块标签和正在播放剧集的激活状态。





4.营造氛围传递热度


色彩除了上方所述的字段中的不同使用,在图片和整体氛围营造中也起了很大的作用,目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标,或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造





3.在UI设计中色彩运用的坑与技巧


1.色彩的正反两面

在色彩的心理学上,大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面,可以看下方多种色彩的描述。





然而其实很多的产品使用的色彩和我们所认知的会有一些差别,比如咖啡品牌的主色选择,在我们常规人之中,咖啡应该是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色





在瑞幸刚出来的时候,很多人其实不太习惯把这个蓝色和咖啡结合起来,但是为了塑造品牌差异化,瑞幸一直将“蓝色”作为品牌的主基调,“小蓝杯”这一称呼不但让消费者感到亲切,也在众多的咖啡中有了属于自己的记忆点。在这支广告片中,主基调同样是使用蓝色,不但符合了当下消费者的视觉偏好,也在为用户留下记忆点之后,也让用户在看到蓝色时自然而然的想到瑞幸咖啡。





2.颜色的禁忌用法

但凡各位使用了这样的配色,保证各位过不了试用期,相信我。所以大家千万要避开。


1.高饱和度的色彩

会让人产生“幻觉”!让人产生视觉疲劳,例如我将饿了么这个界面的色调调整一下大家看一下,不亮瞎算我输。




2.灰部使用过多的配色

为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的




3.没有规律且过多的配色

让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点,所以我们常用的方法是6、3、1的色彩配比。





4.荧光色

荧光色绝对不可以使用在UI界面中,尤其是主色。会让你瞬间失明!





5.太轻柔的颜色

在很多dribbble的飞机稿中,经常能看到这样的配色和练习。无论是在练习中还是实际项目中,这样的界面也完全无法让用户看到想看的信息,没有重点且轻飘飘的感觉。





6.现在很火的新拟物化设计

说真的,这样的风格确实耳目一新,但个人觉得可能不会成为主流。因为它就和第五种一样:信息可识别性很差。就不说色弱的人群,就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调,这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知,原则是轻量化却又需要那么多阴影,这样就有点自相矛盾的感觉。


为了营造这样的“新拟物”的轻量氛围,还不得不在整个界面中简化大部分元素,能不加文字就不能加文字,说的好听叫做使用了奥卡姆剃刀原则,有一句话一直非常影响我做设计:“设计是需要被简化的,但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。




7.不要将对抗色重叠

例如下方,两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼





4.正确的UI配色方法


定义主色


首先我们必须要说,色彩肯定是需要结合产品和用户的定位去指定和提炼的,所以前期会需要去做一些研究例如用户画像,品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”,从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑,并且对市面上的app进行总结,我们发现大部分的产品色,简单来讲在我们HSB模式中去色都在一个固定的范围,就像这样。

 




在上文中也说到用色比例的631法则,所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎,其实辅助色没有非常明显的1种或者两种,都是多色的辅助色方案,都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略,一个主色搭配多个辅色,如果有其他独立的板块可能需要重新定义专属的配色策略。






定义中性色


其次再定义中性色,比如字体和线条以及背景色。字体是为了让信息有对比,显示层级,那么通常给2-3种层级即可,至少2种,至多3种。在选择3个层次的中性色文字是,给大家一个建议:标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50,默认文字不要大于80,大家可以去尝试一下,且中性色不得使用纯黑。





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

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



如何讲述你的设计

ui设计分享达人


在工作中常常被问到如何表达讲述自己的设计,为了让自己的设计有理可依,对接上下游汇报工作的时候,总结以下一些方法和观点,帮助不知从何讲述自己设计的人一些语言技巧。  

以下仅是个人观点,用作探讨交流,文中所有举例均为本人工作设计输出。

设计师能做出好的设计,却缺乏系统化的语言包装,“如何讲设计”不该让它成为难题,做一个有产品思维的设计师,让你的设计以理服人,我们要不止停留在视觉表层,更要从多纬度看待产品设计,本文将从以下三点简述:01.产品设计的五个层面,02.讲述设计的流程,03.关于本次总结

做好产品设计的第一步,是了解产品, 要对于产品的需求如何确定、产品定位如何决定有一个基本的认识,在产品常识里面最重要也最常用的就是产品设计的五个层面,也简称用户体验五要素——

作为UI设计师,所处的视觉设计是表现层,是确定产品的最终形态,因此也处于产品设计的顶层(能被看到),是一个具象画的呈现;其次,往里推框架层,是确定产品外观,将界面信息和导航设计有序归类,让用户使用或者理解;结构层是为用户设计一个结构化的体验,将零散的元素转化为有序立体的空间;范围层确定产品的功能和需求;最后战略层是确定产品目标和用户需求;底层逻辑结构决定上层意识形态表现,因此在设计前我们要知道产品是属于洞察阶段,设计中是属于产品设计解决方案阶段,整体的产品设计是一个概念通过无数个层面的努力,经过时间,转化为具象表现的过程,所以我们在完成一项设计时,应该讲述一个完整的设计思路 ,不要让自己的设计思路仅停留在表面。

整个产品的设计产出是一个抽象到具象化的过程,设计的前期属于产品洞察阶段,这个时候一般由团队的老板领导结合当下市场需要,有用户的需求就有商机,想出产品大致的方向(战略层)然后通过产品经理整合梳理高层的意见确定产品大致的功能和内容输出原型(范围层),交给交互设计师优化产品细节逻辑和信息具体框架,经过研发评估能够技术实现产出交互稿(结构、框架层),这里已经过渡到设计解决问题执行阶段,最后是给到界面设计师美化视觉产出高保真(表现层)。

也就是到我们自己设计输出之前要经历这么多,如果能在讲述自己设计的时候,提前去了解这些,那么设计内容就不愁没法儿讲,光是阐述自己的设计思路就可以讲出一个故事,这也是为什么现在很多品牌卖货都开始营销产品背后的故事由来。我们设计能做好,也要会用语言推销自己的设计成果。

设计是对于某件事精心准备的过程。好的设计作品,应该拥有完整的设计流程,因此我们在讲述自己设计作品的时候,有一套完整系统化的方式是非常有效的。完整的设计流程包含以下4个步骤:

第一是我们需要去了解设计的需求背景,知道大概的方向—— 

  1. 来源(简单理解就是谁提出的问题)需求有可能是你的老板、你的产品经理、或者交互设计、或者视觉上的问题··· 

  2. 背景(笼统一点,就是这个需求是新需求还是原来有然后进行改版优化)需求的基层性质是什么,原本调性是什么,我们要做什么样的产品··· 

  3. 目标(目标一般都是需要解决什么问题)搞清楚为什么做这个需求,能解决什么痛点,不做无用功。

谁提出的问题,是新的需求还是旧的问题,或者我们要解决什么?围绕这几个方向将你的设计概述出来,会让非专业的人也能听懂你做了什么,举个简单的例子,我们公司后台一个很小的产品bug需求,往往这种需求就是产品经理的一个截图和他标注的两句话——

然后你完成了这个需求单,在传达给非产品经理以外的人的时候,你有可能是以下转述方式——

毫无疑问,你就是将需求者的意思一字不落的转达了,但是对于其他的听者来说,你的转述平平无奇、毫无意义,甚至都没有印象你做了什么,所以你应该讲清楚这个需求的背景—— 

设计需求来源是谁,原本属于产品哪个模块(来源),他原来功能是怎么样的,界面上展示的结构哪里有问题(背景),视觉用了什么样的方式改成什么样,解决了什么痛点(目标)

讲清楚谁给的需求,需要解决什么问题,是在原来的基础上不变动逻辑的情况下增加了什么达到了什么目的,才让你的叙述更完整,听起来更有逻辑。如果是一项新的需求,没有背景,那还得从设计分析说起,设计分析就是让你更专业的去做事,设计分析分为——用户分析,设计目标,和设计手段三个要点:

首先用户分析就是,分析你做的东西给谁看,而用户又分为群体用户和独立用户,在c端常见的就是独立用户,他们通常不定性,且有很多特征;在b端,目标用户一般是群体,他们大多数是有场景特性和行业特性,针对独立用户和群体用户,我们得出的用户特征、基本信息、需求结论也是不一致的,所以我们应该结合产品的调性分析一下我们做出来的设计究竟给谁看给谁用。常见的用户分析方法有:用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈以及大数据分析,这些方法中最简单的是用户画像,就是举实际的例子列出真实用户的特征信息及使用场景。B端用户分析方法常用大数据分析和用户反馈,这两种方式通过对接需求的上下游就可以得知。

通过用户分析得出需求结论,满足需求就能达成设计目标——

设计目标结合卡诺模型来分析,卡诺模型—反应产品性能和解决用户需求的满意度的一种非线性关系,具体想了解的可以自行百度,站在巨人的肩膀上我们看得更远。 卡诺模型具备4种属性 :1.必备属性:满足这个需求,用户满意度不会上升,但不满足这个需求,用户不满意会大幅度降低 ;2.期望属性:提供个性化需求,用户满意度会上升,不提供此需求,用户满意度会降低; 3.魅力属性:用户意想不到的效果,提供此属性,用户满意度大幅提升,不提供也不会降低 ;4.无差异:无论提不提供,用户满意度都不会改变,根本不在意;因此在做需求的时候我们应该尽力满足基本需求和期望需求,而可有可无的需求尽量不去做,降低效率。幸福需求是不容易达到的,如果能满足是非常棒的~这里就像是满足了设计心理学的三个层次——本能、行为、反思。

接下来是大家都熟知的设计手段,适当的讲一些述专业的设计技法,用不同的手段去实现的主画面,最后达到完成设计目标这样的结果,会让你显得更专业。设计的手段有很多种,这里主要讲述常用的三种,构图排版(采用什么构图方式,为什么这样构图是因为什么设计原则)、色彩运用(为什么使用这个颜色,因为这个颜色给人的心里感知是什么样的)、设计风格(采用什么风格最贴近产品调性,为什么用这个风格),但是讲设计时一定要记住产品的调性,不能偏离产品本身,不要盲目套用绚丽的技法,否则是不合适的。

很多时候面对非专业需求方收稿时,可能看到如下话语———— 

(心里是不是xxxx····“万马奔腾”,用个文明点的词)

非专业人士无法理解这二者的区别,他们认为他们的设计手段能达成设计目标,而作为专业设计师的我们就应该引导对方说出设计目标,再用我们专业的手段去满足对方的目标,去实现减少改稿次数,而不是让非专业人士去指导专业人士修改设计手段。分清这两者的区别,我们就可以在设计引导中更加主动。用设计分析的方法来讲述设计,举个例子——

会议管理——会议预约移动端优化,因为这是我们原有产品EKP里面的模块,PC端和移动端都有,因此用户可能是群体也可能是个人。所以针对独立用户和群体用户都做一个用户画像,得出他们的一些需求结论,然后目前幸福需求是没有的,纯属个人建议,日后如果有此功能,想必用户的满意程度也会大大提升。

概括一下已完成的整体主要页面,分析设计目标: 

头部属于流量量较高的区域,采用卡片式设计,将会议内容置于此处,作为页面信息关键层,采用左对齐方式排版,突出会议标题和时间提醒用户。

通过不同的颜色标签,区分参会人员状态—— 

待进行未有操作反馈,选用橙色,属于可以持续进行并有明显提醒作用 

已做反馈属于成功操作,选用已有用户认知心理的绿色 

已知信息拒绝参与,是不太重要的,属于不再进行的阶段,选用灰色

  

接下来是设计作品的产出过程,一般情况下不可见的过程,为什么要去讲,  因为一个东西从无到有是很不容易的一件事,如果能讲述过程,就可以引燃情绪共鸣,让别人记住,让自己的设计作品也能有始有终—— 

设计过程一般分为四个阶段:初期阶段、中期阶段、最终定稿;具体的关键词和描述可以通过以下方式提炼出来,这里就不做详细说明了。

 

拿运营宣传来举个例子,我们公司中秋节月饼礼盒包装主视觉设计——整个过程应该是有一个系统化的说明的,省略为写字的地方是我们可以插入的具体图片和过程,步骤差不多就是上述这些,可以有最初阶段的头脑风暴-提取关键词-清晰定位到中期阶段的团队合作—风格拟定-精选方案-细节刻画以及和物料方沟通对接的打样确定工艺等等过程…再到最后定稿的体验还原-问题优化…主画面的诞生是不容易的,强化这种过程参与,让不被看见的事也能展现。如果实在不好记录,你可以从一开始就截图你绘制的过程——

上图是用PS截图,再用时间轴将每一帧动态循坏播放,导出GIF然后截一张不变的底图合成就可以了。

最后是数据验证阶段,这个是设计落地的直观证实,包含主观认可和客观数据,具体内容就是通过用户或者专业的人士反馈给你设计落地的好坏,来判定你做的是否优秀成功。通常这一块的数据决定你验证你前面所有的过程,只要按照该流程认真做了,最后效果通常不会太差,如果出现很大的偏差也往往是意料之外的,因该寻求团队一起解决,不是某一个人的问题。

根据以上最后我们总结,好的设计就是满足以下4个方面:好看,好用,好记,能实现。设计师要考虑的维度不仅仅在视觉层面,什么是有产品思维的设计师,就是在执行时候要考虑上下游不同职能的工作内容,如果你的设计不能实现,再好看也是白费功夫的~从产品交互视觉多层面谈设计,会让你的设计包装显得不那么单调,系统化的方法总结到此,不足之处多多包含~谢谢你的阅读!

文章来源:站酷  作者:YiVi_eleven

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


如何给设计师有意义的反馈

ui设计分享达人

尽管在工作中对于设计方案提出建设性和针对性的评价确实是非常难的,但不得不说,这一项技能对于每一位设计师,乃至每一位与设计师配合的职场人,都是非常重要的。


「只要我们付出了百分百的努力,最终结果一定会比第一版的设计要好。工作中,以专业的手段直接面对要解决的问题,切莫把过多的个人情绪带到工作中去,就像马东老师的米未传媒贴在墙上的标语:“有话直说是一种能力,也是一种责任。」



从业这么多年,合作过的产品、运营、市场、研发、测试形形色色,但是对于设计师专业度的评价,每个人都不一样,进行综合分析,我认为,最核心就是一下3点:


「但这里我要说的是,你自己必须做到足够专业,以下的这些是基于你给出的设计方案确实是经过认真思考后的,否则被业务方怼了也是活该。」


PART 01

理解设计背景

聚焦核心业务问题


在进行设计评价时,不要单纯的只是描述”我觉得…“、”我喜欢…“或者”我不喜欢…“,这无法真正解决问题,相信很多设计师也比较反感这样的评价。


我们需要深挖的是:

1、你对业务目标了解吗?该业务是用什么样的策略给目标用户带来什么价值,以及是如何实现盈利的?

2、你对设计目标清晰吗?设计师是通过何种设计策略来给用户带来价值从何实现业务目标的?

3、你有全局观吗?就是这样的设计方案是否是在现有的技术限制、用户认知约束、时间周期等等诸多条件下得到的结果?


如果没有以上,非设计师的朋友们直接指点界面颜色不好看,排版不合理,不够高大上等诸多评论,其实是很不负责任的。希望大家不要做坐在设计师背后指点江山的神。



PART 02

学会正确的提问

比提出问题更重要


提问有助于设计师和业务方更好的沟通和信息传递,但在提问中不要夹杂感性的评价,而多用理性的思考。比如不要指着某个东西说”这个按钮太大了“,而要问”你为什么选择这个尺寸的按钮?“通过这种方式,你可以得到更多的背景和每个设计细节背后的原因,并感受到设计师是专业的,而不是一拍脑门的。


说服心理学中有一条铁的定律就是:”没有人喜欢被改变“。当你对我的设计指指点点的时候就证明我可能错了,为了捍卫我的设计我会非理性的做出防御性的对抗,感性的情绪表达只会让双方彼此矛盾升级,理性的表达和提问会让人更愿意交流。


所以,学会提问,比提出问题更重要。


PART 03

使反馈清晰明确

避免主观性


评价者的品味对于设计方案来说并不重要,也不应该成为讨论的重点,就像我上面说的”我觉得…“,此时你可以发出黄晓明的动图:”我不要你觉得,我要我觉得…“


不要发表“我只是个人不喜欢,最终还是看你们设计师的”这样的评论,说实话我每次听到这样的话都很火大,你都没想清楚这样不合适的理由,你跟我说什么?难道只是为了反对而反对吗?


下次如果遇到讲废话的需求方,可以直接回复:如果你不能推荐一种更好或不同的设计方案,那就别说了,不要浪费彼此的时间。


另外就是,建议必须清晰明确且可行,如果让设计师误解了你的意思,那可能比你什么都不说更严重,因为事态可能会朝着完全相反的方向发展,因此详细的阐明论点,也是一种职场沟通的能力。



PART 04

给设计师的建议


收到反馈后,首先,我们要分清哪些反馈对我们有用,哪些其实只是表达者的主观感受,把有用的吸纳进来,并做好笔记,先自我情绪冷静下来,不要急于去修改调整设计方案,多多思考流程和链路的问题。


很多设计师可能是出于多年的工作习惯,喜欢将别人的评论(尤其是有经验的设计或者领导)视为行动指南,在没有经过仔细思考的情况下采取和实施他们的想法,这很容易把自己变成一个提线木偶,久而久之彻底失去了设计师原本该有的创造力和反思能力。


设计是在美学与功能、解决用户问题与业务之间平衡的探索,设计师的方案也是在用户、公司也利益之间寻求平衡,没有一个永远正确的决定。每个人都会犯错误,每个人可能都有其背后的一番道理,无非是看问题的角度不一样而已,不要纠结于某一个细节,也不要执着于某一种特定的方案。


提升自己思考问题的视野和维度,知道如何拒绝毫无意义的反馈和评价,当你从界面细节跳脱出来看问题时,离一名真正的专业设计师就不远了。

文章来源:站酷  作者:设计情报局

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



设计原则的实践与深化

ui设计分享达人

“作为用户体验设计师,我们的使命之一就是如何以最正确,最有效的方式将产品意图传递给用户。”这也是行业中大家的共识,关于设计原则也有很多,今天想给大家介绍的是 Don Norman  在《日常事物的设计》中提到的七项基本设计原则,我们将套理论付诸实践,然后通过测试,验证和迭代来提升设计体验。



PART 01

哪七项设计原则?


诺曼(Norman)的七项基本设计原则可以帮助确定一系列问题的答案,这些问题从目标开始,然后通过将结果与预期进行比较后结束。这七项基本原则是:发现、反馈、概念模型、示能、意符、图示、约束条件。接下来我们将从一个实际问题出发,来谈谈以下设计原则改如何运用。


1、找到目标:“我想要实现什么?”


我们的第一个问题是目标—我们实现目标的动力。举个例子来说:


「目标:“我们需要找到一双新的,合脚的,确定颜色和尺寸的跑鞋。」


下一阶段是计划如何通过发现和评估我们的选择来实现我们的目标。


2、确定计划:“我该怎么做?”


假设我们选择了耐克网站作为首选购物平台。当我们初次进入网站,我们会看到很多不同的选项。


「发现模块」提升了选项的可见性。清晰的导航,突出的焦点自然的视觉层次使其更容易发现和理解。


清晰的导航有助于我们轻松找到并了解网站的主要产品。但是,移动端的体验实际体验效果并不佳,因为汉堡导航很容易将信息遮盖。

 

耐克网站的产品详细信息页面通过清晰的导航,突出的焦点和自然的视觉层次结构选项更容易被识别。不过,您可能会争辩说,这些复杂的信息干扰到 “添加到购物袋”的这一关键行为。


焦点是吸引人视觉的主要区域,其中包括引人入胜的图像和视频,描述性标题以及清晰的号召性用语,例如“了解更多”和“添加到购物袋”。


以上所有组件均作为视觉层次结构的一部分进行排列,以帮助我们按照接收到的重要信息的顺序进行浏览。它们的位置也符合最佳的阅读模式——例如,航栏,过滤器控件和跑鞋结果分别组织在类别页面的顶部,左侧和右侧。


其他设计原则(包括概念模型,示能,意符,映射和约束)也可以帮助我们弄清楚如何使用该网站。


许多网站功能中都存在概念模型,尤其是用于对结果进行排序和过滤的导航和控件。这些熟悉的设计模式告诉我们它是如何使用的。例如,我们知道通过过滤器将有助于优化筛选结果


功能可供性应用于各种网站组件,例如按钮,选择框和手风琴导航,使我们可以了解如何控制和使用它们。但是,某些能力依赖于意符来阐明预期的操作。


意符被广泛用于传达应在何处执行操作,尤其是示能较弱的扁平化按钮。一个简单的描述(例如“查看更多”或“添加到购物袋”)足以告诉我们预期的操作。




映射向我们显示了对象之间存在关系的位置,例如产品详细信息页面上,当我们选择适合的款式和颜色的选项时,我们会看到可用的尺寸和价格会与之对应产生变化。


约束限制了可以使用信息的位置,地点和时间,以减少杂乱并降低认知负担。例如,导航最初仅向我们一级导航。


3、确定:“我有哪些选择?”


购买工具为我们提供了可能选择的选项序列的概念模型。禁用状态还用于将我们的操作限制在只能选择有库存的商品的范围内。



了解了如何使用网站后,现在我们可以指定要执行的一系列操作。让我们在网站上继续进行以下活动:


「行动:购买时需选择产品规格,包括合身性,颜色,尺寸,然后将其添加至购物篮。」


概念模型、可发现性、映射、约束、示能和意符可以帮助我们确定操作顺序:选择合适的→选择颜色→选择尺寸→选择添加到购物袋。


在某些情况下,某些选项(例如大小和颜色)可能缺货。如果产品不可用,则禁用按钮状表达了操作行为的限制,只能选择有库存的商品,这是非常必要的。


4、执行:“我现在可以做什么?”


不同的控件交流其功能,用法以及如何向我们展示其效果


现在,我们需要实际执行我们选择的一系列动作。示能,意符和映射将帮助我们执行操作。例如,按钮的感知外观使我们想要按下按钮,标签告诉我们控件的功能,而映射使我们能够看到刚刚操作的效果。


5、感知:“发生了什么事?”


一个简单的确认消息会通知用户发生了什么,并提供一些其他选项的可见性


一旦执行了选择的一系列动作,我们就需要收到有关请求的信息,这就是反馈。

购物车确认消息为我们提供了有关所选跑鞋的有用反馈信息,包括名称,颜色,尺寸,价格和数量。同样还提供了成功的信息和一些其他选项。


6、解释:“这是什么意思?”


看到这些变化之后,我们现在需要将其转化为有意义的东西。反馈对于再一次为我们提供足够的信息来确定我们的行动结果至关重要。成功信息——“已添加到购物袋”和绿色的勾号图标说明发生了什么,其他选项表示我们现在已选择购买这双跑步鞋。


7、比较:“这样可以吗?我实现了目标吗?”


每个粉丝都希望看到的确认消息–真是令人高兴的时刻!


最后一个问题询问了结果是否符合我们的期望。我们可以将结果与目标进行比较


到目前为止,我们已经使用了所有七个设计原则来确定问题的答案。现在,反馈将能够确认我们的行为是否带来了成功的结果。如果结果不是我们期望的,那么我们至少需要了解发生了什么以及下一步该怎么做。


反馈可以诱发积极和消极的情绪。如果结果不是我们所期望的(例如错误),则它们可能会引起混乱甚至愤怒的感觉。但是,当我们实际执行的动作可以实现我们的目标时,我们将感到非常喜悦!


例如,在耐克移动应用程序 SNEAKRS 中,客户可以参加抽奖来购买限量版鞋。紧张的 30 分钟倒计时结束后,获胜者会收到一条特别的消息,确认他们的抽奖结果,这为他们的经历增添了很多乐趣。


「结果:看到此消息给我带来了真正令人满意的体验——幸运的赢家。」



PART 02

通过用户测试超越设计原则


应用设计原则进行 UX 设计是非常表层的。当人们在使用该产品时,我们需要了解他们的想法,感受和看法。他们可以使用吗?他们觉得有用吗?他们会再次使用它吗?

比设计原则更重要的是与真实用户进行测试,以了解他们对设计的行为和态度。然后,可以利用丰富的用户见解来改进产品。


如何测试您的产品

我们若能够越早且越频繁的测试我们的想法,就能够越早的迭代产品,以更快的速度满足用户需求以及帮助实现业务目标。以下是一些流行的研究方法的概述:


远程用户测试是非常快速与灵活的,并且非常适合于早期经常需要设计验证的情况。参与者使用屏幕录制软件收集有关设计的反馈。远程用户测试为获得更多的洞见提供了便利。


面对面用户测试,就是我们常说的线下用户访谈,这种测试要适量,通常会有一个主持人。在研究期间,主持人可能会根据问题提出任务或新的活动。这种类型的研究比较花费精力和时间,但与大多数方法相比,它可以为您提供更有价值的见解。


游击队测试是指调研团队无拘无束地采访随机人群。您可以选择某些地点来确定适合您所测试设计的受众特征。迄今为止,这种研究方法是比较节省成本的,尽管您可能需要考虑向参与者提供少量奖励,以感谢他们的时间和努力。


定量测试涉及对大量用户进行研究。典型的测试包括卡片排序,树形测试,点击测试和超时测试。这些研究可能无法为您提供用户做出某些决定的原因的答案,但是它们可以帮助确定点击次数,思维模型和完成任务比率的时间。



PART 03

分析与迭代


一旦用户测试有了结果,就可以对结果进行了。这可能需要一个漫长的过程,即整合意见,将见解归类并提出新的改进建议。


研究建议可以帮助确定要解决的可用性问题要关注的痛点,以及增强整体用户体验的机会。这就是 UX 流程的迭代。使用相同的原理进行设计优化,然后进行测试,直到产品满足用户需求为止。


诺曼的原则可以帮助我们加深对用户交互的理解,包括人们提出的问题类型、他们的认知过程以及情感水平。如耐克网站的案例研究所示,这七个基本设计原则可以帮助我们确定问题的答案,并找到影响积极情绪(如愉悦感)的方法。


但是,设计原则实际上只是UX过程的开始。为了确定产品的体验质量,我们需要与真实的用户一起测试设计,然后使用洞察力进行必要的迭代。


以上内容源于 Don Norman 的畅销书《日常事物的设计》。它是 30 多年前编写的,但至今仍然对设计行业有着深远的影响。当然,还有更多的原则可以采用,但是 Norman 的设计哲学可以作为我们在设计工作中遵循的 UX 基础。

文章来源:站酷  作者:设计情报局

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

情境分析法(SCQA)让你用问卷发现更本质的商业问题

ui设计分享达人

前言

 

在企业工作中,每一个问卷调研都始于一个商业问题,问卷的质量也决定了最终结果是否能对业务起到帮助。本文将从定义问题-问卷设计-数据清洗与分析-报告撰写这四个基本步骤相对完整地阐述企业问卷调研,希望可以给大家提供一些研究方法上的思路。



定义问题:情境分析法(SCQA)


在商业问题解决的过程中,既有公司内部的因素,也有外部行业的因素,影响因素错综复杂;周围的环境也比较容易发生变化,具有很大的不确定性;同时又要保证解决方法的可落地性,产生实际的价值。相对来说,会比较复杂。在进行问卷设计之前,更有必要的是将问题梳理清楚,再决定是否采用问卷这种方式。

 

1.1 结构化思考:使用SCQA描述项目


SCQA是将不确定性考虑在内,一种结构化的问题分析方法,可以比较好地系统思考、查漏补缺。它包含四个环节:

  • 情境(Situation):由大家都熟悉的现状或事实作为起点,包含对象、所处阶段等

  • 冲突(Complication):实际情况往往和我们的目标有冲突,颠覆了稳定的状态。说出行动的原因,包含威胁、机会和等着我们去克服的困难点

  • 问题(Question):基于冲突提出问题,要怎么解决这个困难点

  • 回答(Answer):我们的解决方案是什么,定位出需求点

 

undefined

 

1.2 如何洞悉情境和冲突:搞清楚为什么做调研


假设我们拿到上述案例作为调研项目,可以有两种方式去进行洞悉情境和冲突

一是思考为什么要做这个研究;二是跟相关利益者访谈尽可能多地获取信息。


1)思考为什么要做这个研究:

- 需要回答什么问题?

- 为什么回答这些问题很重要?

- 打算如何使用最终的调研结果?


2)跟相关利益者访谈:

- 核心业务方是谁?其他业务方是?

- 每个业务方的关注点是什么?难点是什么?

- 各个相关方的目标之间是否冲突,是什么冲突?

undefined

根据上述方法,可以得到对应的情境和冲突:


情境:目前有三种产品方案A/B/C,分别对应的价格为100元/1000元/10000元。通过上述思考和信息了解,会知道这个事情和谁有关,在这个事件中承担什么角色。


冲突:B的销量不佳,跟其他方案差异不明显,瞄准客群很有可能有重叠,未成交客户难转化,希望可以方案B进行调整。在用户层,可能其他方案中的功能能满足需求,不需要购买方案B;在公司层,整体收入结构可以更优化、健康;在业务层,系统和流程可能不太合理,有些可能需要重构。


 

1.3 问题拆解其实是建立一个假说/逻辑树的过程


我们可以将问题进行拆解,拆解应遵循MECE原则(相互独立且完全穷尽),这么做的好处是可以把问题进行逐层分解,逐级分析,最大可能保证需要考虑的因素全面不遗漏。

 

undefined

 

案例中的问题,可以从用户方面、竞品方面、成本/利润方面进行拆解,针对每一个层面的问题又可以进行拆分。 

undefined

对问题进行细致拆分之后,针对每个问题有不同的解决方案,有一些问题可以用问卷来解决,有一些问题需要使用其他方式进行解答。

问卷并不能解答所有问题~~

 

undefined



问卷设计


2.1 问卷的用途:定量为主


一般通过问卷来进行大样本的数据收集,主要以用户的基础数据、行为数据和态度数据为主,既可以作为独立的调研项目,可以跟其他方式进行结合,比如说结合访谈、结合企业内部的数据,本文比较推荐的方式是多种方式结合进行交叉验证,提升调研结果的可靠性。


undefined

 

 

2.2 问卷设计的原则

undefined

基于第一部分的定义问题阶段,已经对问题进行了分析,在此基础之上,我们需要确定哪些问题可以由问卷进行解答,并明确问卷的研究目标与参与对象。特别地:利益相关方(项目组成员间)在项目前期应该达成统一,避免后续产生分歧,付出额外的沟通成本不说,还有可能相互甩锅。


undefined


2.3 问卷的基本结构


一份问卷的基本结构包含标题、招募语、甄别题、主问卷、用户基本特征、结束语。


undefined


 

 

2.4有逻辑的设计问题


一份有效的问卷需要从如何提问、如何措辞、如何设置答题逻辑、如何设置题目选项这些方面去考虑,设置有效的问题。以下是问卷设计中的一些基本原则:

undefined

 

2.5 提升回复率的tips


undefined

 

  • 个性化:在说明信件/邮件或邮件开头注明回复者的名字、研究活动的目的、所需时间。向回复者强调他们反馈信息的重要性。需要注意的是,这里出现信息错误,会降低回复率。

  • 控制篇幅:问卷完成时间不要超过10分钟,注意控制问题数量,避免出现需要大量思考、较难回复的题型。

  • 用户激励:奖励参与者油卡/现金红包/优惠券等,昂贵的激励物没有特别显著提高回复率,所以小的激励就可以。


 

数据清洗与分析


3.1 数据清洗原则

undefined


  • 剔除有效范围外的数据:排除异常作答时间值(比如作答时间为10秒),判断为作答不认真。可以根据题项来确定,一般10道题设置筛选出60秒之内的问卷。

  • 剔除连续重复值:在时间范围内,再核查问卷是否出现连续重复值,出现的问卷予以删除。如果问卷数量较大,可以使用STATA软件编码或Excel条件函数判断进行处理。

  • 剔除违背逻辑一致性的数据:在时间范围内,核查问卷是否存在前后逻辑不一致的题,比如总体满意度打分为非常满意,但后续题目都选择了非常不满意。

  • 剔除有缺失值的数据:严格来说应该将有缺失值的用户予以删除,但有时候回收样本量没有那么大,则可保留。


 

3.2 数据分析方法


数据分析方法有非常多,要在众多的分析方法中选择一种也是比较难的事,无论选择什么样高大上的方法都是其次,最重要的是选择的分析方法能说明问题,能体现数据的价值。

比较分析是一个简单的、比较通用的、易于理解的数据分析方法,可以分成趋势分析、特征重要性、分组分析三种。

 

undefined


报告撰写


最后,条理清晰地展现数据信息,表达你的观点。报告写作的过程是一个相对费劲的过程,特别是数据量多的情况下,总是觉得还有一些数据价值没有被挖掘出来,但此时不要拘泥细节,细节可以回头再补,会大大提升效率。


4.1 问卷的报告框架


  • 报告主要发现:将总结放在最前面,阅读者可以通过简短的总结大致了解报告观点,方便他们决定是否需要继续了解详细内容

  • 目录和分目录:报告包含的内容组成部分,让阅读者对报告内容有初步概览

  • 调研背景和目的:陈述整个报告的背景和目的,对调研的范围进行必要说明

  • 单页-详细内容描述:有逻辑的描述项目的发现,总结数据表现,挖掘价值

 

单页-详细内容描述示例:

undefined


问卷调研不止是问卷本身,还包括前期项目组沟通、项目成员分工与配合、后续结果推广、结果推动落地等,前期做好项目组沟通、明确项目分工,建立一个清晰的运行机制,有利于项目组成员对结果的认同,后续也有清晰的路径去分工解决问题。所以,每一个环节都体现工作的价值,都同样重要。希望大家在关注研究方法提升的同时,也可以更多关注更多工作方法提升。

文章来源:站酷  作者:酷家乐UED

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


如何系统化的进行设计改版?

ui设计分享达人

项目背景


当公司的发展规模到一定程度时,考虑到信息安全、持续采购成本与相关风险,企业会采取自研的方式来实现部分协同工作软件的自产与自用,本文将以内部目标管理系统为例,阐述我们是如何系统化的做企业系统设计改版?


什么是OKR?


OKR,是Objectives 和Key Results 的缩写,即目标关键结果,它是企业进行目标制定和过程管理的重要手段。酷家乐同样采取OKR的管理方法,将公司目标层层分解到团队,部门再到个人,在各个层面贯穿和统一起来,以帮助实现目标达成。



改版的契机是什么?

改版不是设计说想改就能改,在做新的OKR系统之前,之前是通过「绩效系统」来进行目标管理和绩效评估,支持简单的制定和结果的评估的使用,因系统操作流程、界面体验、业务场景已经严重的影响到目标管理的效率和效果,具体体现在几个方面: 


  • 系统看不懂,新人的宣导成本高
  • 操作不流畅,从制定、提交、审核、修改到进度同步,员工使用起来不流畅
  • 误操作成本高,不小心点错导致信息的再次获取和编辑成本高

总之,工具的体验已经是严重影响公司员工目标管理的一道障碍,所以如何将整体的系统操作体验提升起来是设计急需去解决的问题。 

那么,确定有问题需要改,作为设计师,我们是如何去系统性的去为业务带来更多的体系化的价值?
  • 理清业务,制定策略
  • 理解用户,溯源问题
  • 串联场景,各个击破
  • 方案设计,中途验证
  • 落地追踪,拿到结果

一、理清业务,制定策略


理清业务目标,制定设计策略,是系统性改版产品的前提,在实际工作中设计师很容易被产品的原型、对产品的描述蒙蔽,只有非常清楚的理清业务的目标,才能制定系统性、合理的设计策略来支撑业务,通过专业的设计方法来助力业务结果的达成,在这个项目中我们是如何做的呢?


对焦业务目标

OKR系统的改版项目最开始是高层的诉求,提的业务要求很简单“ 让大家用起来,目标管理起来”,那么如何让大家用起来、利用系统将目标管理起来是当前需要解决的的问题。


“ 让大家用起来,目标管理起来”需要去解析的是,为什么旧的系统大家用不起来?为什么目标管理有这个管理机制,但是没有依赖于系统管理起来? 

制定系统的设计支持策略

设计师同行可能会问: 不都是做需求吗,有啥做啥,有啥策略可言?如果是以这样的方式来做设计改版,很有可能会被业务方牵着跑,即便是知道对方坚持的不是很合理,但也没有办法来推动这件事往更好的方向发展。 


二、理解用户,溯源问题


理解用户,溯源本质问题,是最设计环节必不可少的环节,通过对用户的深入研究,挖掘本质的共性的问题。在这个项目中,我们通过定量+定性的手段获取用户的心声: 

定量问卷——获取用户的基础的问题

前期在公司内部针对普通员工、MGR、HRBP、高层4种角色,调研了100多位内部用户的心声,将不同岗位和职级对于绩效系统的问题真实反馈收集汇总。 

undefined


定性访谈——深入获取用户的诉求

因为系统面向对象是企业内部员工,所以针对每个角色都做了访谈调研,深入的挖掘他们对当前的产品使用问题,并将问题按照核心流程中所涉及的角色在不同阶段所需的操作和流程进行了梳理,整个阶段拆解为:制定阶段、执行阶段、结束回顾三个主要阶段,拆解每个角色在这些阶段中的触点和机会点。 



结合问卷、专访谈的分析和梳理,筛选出目前系统的核心问题: 制定流程、对齐关系、过程跟踪、信息触达


三、串联场景,各个击破


在前面已经初步发现和定义了问题,这么多分散的问题如果平铺出来可能会吓到产品和研发,所以接下来需要将其系统化的变为整体的设计方案,我们需要将其串联成完整的场景,然后逐步击破,我们是如何做的呢? 


重点模块及争议点的讨论

在场景分析前期,我们设计内部针对“核心阶段”、”对齐关系“、”权限管理“、”全员OKR“进行了讨论和范畴的界定,对以下问题进行了讨论: 


  1. 大的阶段:一共有几个阶段,在每个阶段各个角色的需要做什么? 
  2. 关于对齐:对齐关系是怎样的,如何处理对齐与被对齐,双方都发起了对齐,怎么对齐到具体哪一条? 
  3. 关于权限:普通员工的权限定义;mgr的组员关系;如何确定查看的权限? 



梳理清楚角色关系图,有助于多方去理解各个维度的关系

以一个普通员工【小何】为例,在OKR系统中进行OKR制定时,通常需要与多个角色产生关联:


  1. CEO/BO:通过查看高层的目标来看到公司的发力方向; 
  2. MGR:明确部门目标,制定个人的;OKR的审核与发布;进展的跟进; 
  3. 同组/协同部门:与协同部门绑定关联关系,同步实时进展;查看同组员工的进展,横向对比个人进度。 




结合业务需求,赋予体验价值

OKR系统虽然最为一个内部管理系统,我们也逐步在设计侧去从“具有功能价值”往”“赋予体验价值”去发力,将更多的“能”和“可以”转变为“方便”、“简单”和“轻量化”等,来提升各个流程阶段中的体验,比如: 
从“可以查看”到“方便的查看”
从“能更新” 到“  简单更新”

具体到串联场景怎么去理解?

一个新的OKR周期会经历三个主要阶段,每个阶段会涉及到多个节点,在每个一个节点上去思考发力方向: 


为了便于理解,将关键的场景提供了比较简短的描述,这个描述就是从旧到新的过程,后面的设计展示也是围绕着这些内容进行展开,具体如下: 

①制定阶段,包含写、看、评、管
  • 写:轻松撰写,高效共创 
  • 看:简单查看,便于跟进 
  • 评:轻量互动,便于记录 
  • 管:高效审核,随时跟进;条条对齐,事事关联; 

②执行阶段,包含更、改、推
  • 更:随时更新,条条追溯 
  • 改:慎重修改,条条有据 
  • 推:合理推送,终端打通 

③结束回顾,包含查看、追溯、复盘

  • 查看:快捷查看历史周期 
  • 追溯:记录明显标记,事事追踪溯源 
  • 复盘:复盘总结,目标达成 



四、方案设计,中途验证


经过前面一系列的调研、分析总结,设计围绕着3个阶段的关键结论进行展开,即OKR制定、执行、结束三个阶段 
(因每个阶段篇幅较长,方案设计部分仅展示部分页面的思考过程和页面展示)

轻松撰写,高效共创

在写OKR时,设计让撰写轻松、可以高效的共创,主要通过以下3点: 

(1) 清晰的页面结构:


让用户能明确的感知到系统的整体结构是有规律的,可以简单被理解的,即左边全局控制,右边内容展示

  • 左边导航全局控制着写、审、查、通4个功能 
  • 右边内容展示跟随着导航内容变化 



(2) O与KR的录入快速切换: 

为了让用户可以沉浸在一个页面写内容同时,还能纵览全局结构,在写OKR的页面增加了OKR大纲的锚点切换功能,便于多个KR之间的切换,避免因页面过长带来的翻阅困难的问题。 


(3) 减少步骤,减少跳转: 

减少步骤,减少跳转有很多场景都有涉及到,比如: 
  • 以以新增一个O和新增一个KR为例,步骤从原来10步减少到4步,页面调整从多步骤弹窗到在1一个页面即可完成内容的撰写; 
  • 在与别人关联时,在撰写页面会收拢所有邀请方的信息; 
  • 在查看对方进度,原来需逐个点击进去了解,到现在几乎可以全局视角来管理进度。 



简单查看、便于跟进


查看和跟进属于第三方的协同伙伴,为了让伙伴更轻松的跟进,做了2个设计处理: 
  • 在人员展示逻辑上,在OKR展示时,将关联人、同组人直接展示出来,减轻用户的查询成本; 
  • 在展示内容上,将O全部展示,进度以及更新时间全部直接展示出来,便于关联方快速便捷的知会。 



简单审核、随时跟进


在管理者审核下属员工时,简化了大量信息,前置待处理信息以及待处理的关键信息,让管理者比较直观的知道有哪些人提交了,哪些人修改了,哪些人需要重写等等。 



随时更新、条条溯源


为了让员工便捷的进度管理,在OKR管理页面以轻量的临时弹窗,来方便用户快速发起和输入内容,每条更新记录同时也能同步给关联方。 



慎重修改、条条有据


慎重修改、条条有据主要是满足管理者和关联管理诉求,OKR可以在中途被修改,但是修改的结果是需要明确告知相关人,在增加、删除、减少的内容上,以特殊的示意对比来记录依据,同时也督促发起方能审慎修改。 


合理推送


OKR的消息推送在整个阶段中占据了非常重要的信息触达的作用,在整个OKR的制定阶段和执行阶段不可或缺的部分,而消息推送过多将会导致信息冗余,那么如何合理进行推送消息也是重要一环。 

我们把消息类型通过两个维度定义消息的优先级:“重要性”和“紧急度”,通过四象限法则,我们拆出来了:


  1. 重要且紧急的消息
  2. 重要不紧急
  3. 不重要但紧急
  4. 不重要不紧急

通过此模型和产品确定了每一个消息类型的所在位置,且清晰表达的了每个消息应当的位置




在酷家乐有非常多的信息接收渠道,每个渠道都有相应的特点,我们结合渠道的特点去确定不同优先级的消息应当推送的渠道。 


最终在实现方案上,实现了有层次、分场景的消息推送方案,尽量做到少打扰用户同时,可以及时了解重要信息。 

终端差异


桌面端是主力生产平台,通常是多窗口多任务,键鼠操作精确高效。在专注姿态下,我们可以尽量安静地展示更多常用功能,让用户在一个视图中即可完成相对复杂的任务。同时在列表页中,更大的空间让我们可以把目录树展开,减少导航跳转。 

手机端的特点是专注当前任务。可以通过信息降噪,加强对比来让信息传达能明确,帮助用户完成单个任务;而清晰的导航可以避免小屏幕上页面频繁切换所带来的导航负担。 

最终实现方案

结合终端的差异,把移动端定位为:侧重便捷快速的查看和沟通,同时将重编辑的场景在移动端去除了,更加侧重于查看、互动和进展更新的低成本操作的场景。 


中途验证效果,确保上线的效果

在设计的过程中,为了进一步的验证设计合理性和易用性,针对角色代表进行了8组可用性测试,最终普遍反馈新版的操作体验更好。




五、落地追踪,拿到结果


针对了项目的设计效果落地,设计除了在过程中不断的跟进产品和研发提出的问题,在测试阶段提出效果走查文档,不断的打磨细节,才能保证最终的设计效果,当然付出总会有回报,新版的系统上线除了制定、管理、查看关键模块的UV和PV的业务数据达到了比较好的效果外,在新老版本的满意度和流程操作犯错率上也得到了一个比较好的验证。 


写在最后


在OKR系统项目的整体流程中,针对产品大改版的时候,我们设计需要前置思考业务,全局看待产品,系统性的去思考和设计,助力业务结果达成的同时让设计价值更好的体现出来,最后再回顾下整体流程: 

15个著名的设计心理学原理以及在设计中的应用

ui设计分享达人

你是否有在听别人说某某原理法则时一脸懵B的时候?明明知道这个原理却说不出它的名字?不要紧,本文就来介绍与人机交互设计相关的15个常见的设计心理学原理,约13000字,帮助你了解产品的定位,需求目的和交互逻辑,洞悉用户的各种行为,也为自己的设计予以理论支撑。


1956年美国科学家米勒对人类短时间记忆能力进行了研究,他注意到年轻人的记忆广度为5-9个单位,就是7±2法则。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上。


因为人脑处理信息的能力有限,所以它通过把信息分成块和单元来处理复杂问题。7±2法则应用很广泛,例如iPhone通讯录中的手机号码被分割成”xxx-xxxx-xxxx“的形式,还有银行卡号、身份证号,我们总是喜欢把一长串数字拆分开来读写,目的就是降低记忆成本,提高信息的易读性,从而达到视觉防错的作用。


Web导航栏选项卡数量不超过9个

在设计网页导航时,如果希望用户记住导航区域的内容或者一个路径的顺序,那么数量应该控制在7个左右(不超过9个),如苹果、Dribbble、behance等网站的导航分类。


Web导航栏选项卡数量过多时

如果导航或选项卡内容很多,可以用一个树状层级结构来展示各级别关系,但要注意其广度和深度的平衡。例如人人都是产品经理和Dribbble,把更多子类别收在二级目录里。



移动端选项卡导航

在移动端应用设计中,常见的电商app例如奈雪和乐凯撒分类模块,两个产品的商品分类布局形式很相似,都是用了选项卡的方式来分类商品,层级明确,相应的提升了用户找寻单品的效率。


Tabbar区标签最多不超过5个

在移动应用设计中,底部Tabbar最少3个,最多为5个(几乎没几个超过5个),这样做除了减轻用户记忆负担,超过5个会降低视觉和操作上的体验。事实上就算只有4个,我们也经常想不起微信底部的4个Tab分别是啥。



顶部导航栏页签

我们看到的大部分app顶部导航栏的页签数量都严格遵循了7±2法则,虽然在横轴可无限滑动,

但在显示区域只保持7±2法则的显示数量,例如马蜂窝、飞猪旅行等。


金刚区图标不超过8个

我们常说的“八大金刚”就是一屏显示8个图标,超过的则放在第二屏。如果两行10个,往往第十个是“更多”入口,总的来说也没超过9个。


banner文案不超过9个字

产品运营banner主文案字数通常控制在9个字以内,在设计时也通常把长标题一分为二排两行,便于用户快速阅读,提升点击率。

     


在交互设计中,7±2法则是减少用户认知负荷,提升用户体验的重要环节。同时还强调了在设计过程中对产品的预见性,避免在不断为产品添加功能时,破坏原有的视觉基础。



0无需说明书

乔布斯曾说过:“苹果应该创造所有人都可以使用的产品,即使没有用户指南”。


1 一看就会

简单易懂,看一眼就明白你想说什么,不用教学就知道怎么用。


2秒法则

所谓“2秒法则”,是指用户在使用某类系统时的等待时长不超过2秒。在极短的时间内展示重要信息,给用户留下深刻的第一印象。这里的2秒只是一个象征意义上的表达,也许有一点随意,但是这却是一个合理的数量级。我们熟知的“F”浏览模式其实就是间接缩短用户看到重要信息的时长,达到快速浏览的目的。


进入App的首页加载时间如果过长就会导致用户产生厌烦情绪,很容易退出甚至卸载App的行为。因此我们看到许多应用将首页加载时的空白页进行占位图设计。


下拉刷新也是一个设计点,为避免刷新时间过长,设计师通常会在加载动画上做文章。充满趣味性的动效能安抚用户焦躁不安的心情,无形中降低了用户对等待时间的感知。


APP里面的banner设计要有视觉冲击力,如果两秒之内没有抓住用户的眼球,可能就被用户忽略了。


因此,在设计互联网产品的页面时,用户等待的时间越短,用户体验越佳。反之,就会让用户产生焦虑的情绪。


3次点击法则

用户在3次点击之内如果还没有找到他们想要的信息或了解网站特色,他们就会离开该网站。这条原则突出了清晰的导航,符合逻辑的结构和易于理解的网站层级的重要性。(来自《众妙之门》P133) 

其实在交互体验中,点击的次数往往是无关紧要的。只要每次点击都是无需思考的,毫不费力地顺势进行,那么用户的挫败感就会大大降低。如果你的网站能够让用户知道他在哪里,从哪里来,要到哪里去,并且能够让用户了解如何完成目标,这样的点击即使有10次也是没有问题的。例如,在京东购买一件商品需要经过“立即购买>确定>提交订单>选择支付方式”4次点击才能到订单支付页面完成购买,这过程中可能还穿插其他的点击行为(比如选择地址、优惠券),用户并没有感受到不方便,使用过程流畅而自然。


在可用性测试领域,“三次点击”定律一直是一个很具争议内容。体现在以下几点:

·研究表明,用户在超过3次点击还没到达想去的页面时,往往并没有退出网站,而是会继续多点几次;

·当把一个3次点击就能到达的流程改为4次点击的时候,用户发现目标页面的能力反而提升了600%;

·合理的导航系统比点击次数更重要;

·比起“3次点击”,有人提出了“1次点击”定律,即用户的每一次点击都应该让他们更接近目标,同时尽量减少能干扰实现这一目标的因素;

·用户抱怨要花很长时间才能找到某个产品,实际上他们是在抱怨无法找到想要的东西,如果用户找到了想要的东西,他们就不会抱怨点击的次数了;



英国心理学家William Edmund Hick认为,在简单的判断场景中:一个人所面临的选择越多,做出决定所花的时间就越长。有时候在选择中花费太长时间从而导致决策失败。

生活中我们也经常会面临选择困难症,比如早上起床就纠结今天穿什么?中午去食堂就会纠结吃什么?造成我们如此纠结的原因就是因为选择太多了(远古人就没这些烦恼,寻找食物时逮着什么就吃什么)。


在设计中的应用

应用到界面设计中也是如此,选项越多,意味着用户做出决策的时间越长。

例如APP Store首页,改版前的首页把众多app平铺出来,对目的不明确的用户来说选择有点多。改版后的首页大幅减少了App的数量,卡片的设计方式简洁且目标清晰。


不得不面对较多选项时, 对主要和次要的选项做视觉权重区分,做好设计上的归类,提升用户做决定的效率。例如美团外卖金刚区第一行5个入口的图标在尺寸和表现手法上都比下面的入口图标要大更醒目。“我的”页面把一些低频率功能或不太重要的功能收纳到“设置”里,此外还可以通过置灰、锁定等方法间接减少选项,降低干扰。


对于多流程的任务进行分步操作,让用户专注眼前任务。 例如Clubhouse注册时,把需要用户选择的选项分步引导完成,让用户能专注当前行为。


对于多种类别的选项应当做二次分类的区分,我们都知道电商平台的品类繁多,仅通过单一分类是不够的,比如数码频道下面还分相机、影音娱乐、数码配件、智能设备、电子教育等大的分类。商品详情页的筛选功能也是贴合使用场景来设计的,所以分类不怕多,就怕混乱。


适用边界

虽然选择越少,用户做决策的时间越短,但这并不是提高用户体验的唯一标准,过度的减少选项,可能导致负面效果。

如上图右,如果在删除App的弹窗中只有一个“删除”选项,没有明显的取消之类的途径,那么用户会觉得特别难受,感觉被强迫去删除。如果当下有急需使用手机处理一些事情,那么这样会把这种负面情绪给无限放大,让用户抓狂。


希克定律主要受影响于选项的多少,但是它不适用于需要高难度阅读的任务。例如考试试题每道题只给你A、B两个选项(学渣窃喜),那也太容易蒙了,这就是希克定律在答案试题中的局限性。


希克定律是一个可以适用于设计的指南,记住要尽量减少用户在一次决策中要做的选项,因为决策效率是一个产品导致用户流失的重要原因之一。引导用户在明确的选项之间进行选择,以便快速将他们送到某个地方(例如账单支付),这将大大提升用户体验并达到你的目标。




费茨定律由心理学家Paul Fitts提出,用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。举例来说,你伸手去拿桌子上的咖啡杯,开始你的手臂迅速地往杯子位置移动,接着你会放慢速度直至找到杯子把手,这个杯子把手的大小与你“抓住”它有着一定的关系。


如上图所示,如果光标现在在任易地点想要去点击目标target,最短路径一定是D,最短路径上容错的最长路径是D+W,只要水平上移动超过了D+W你就点不到了,而这个点击动作所耗的时间是一个常数加上一个以D为正比W为反比的函数的和。 


详细解释如下,图中红色方块代表点击目标,虚线代表移动路径,此时因为红色方块目标较大,所以用户从任何一处点击都很容易(可以用鼠标在屏幕任意点移至红色方块试试)。


相反,红色方块目标变小,快速点击就会困难很多,很难一次到位。


但如果红色方块目标很小距离很近的话,因为移动范围小,也能准确的点击到。


按钮越大越容易点击

在页面中,大而近的目标区域意味着用户不需要做太精细的调整就可以轻易的触达目标。比如页面中的大按钮。


将按钮放置在离开始点较近的地方

夸克浏览器的搜索栏就放在离手最近的屏幕底部区域,相比常见顶部搜索栏更方便操作,效率更高。


相关按钮之间距离近点更易于点击

注册登录界面,通常将「注册」和「登录」放到一起,不仅可以在视觉上增强用户对他们相关性的认知,还可以减少在他们之间的距离 。


适用边界

费茨定律鼓励减少距离,增加目标大小以提升用户效率,但反过来亦适用。比如iPhone关机按钮,没有使用点击关闭,而采用滑动操作,还把按钮放在屏幕顶部,这样明显增加了操作难度,进而避免了用户误操作。


App弹窗经常把“关闭”按钮放在卡片的右上角离手远的地方,希望用户先完成弹窗提示的任务。还有启动页广告,喜欢把“跳过”按钮放在难以点击的右上角(恰饭重要),以提高用户的误触机率提高转化。


思考小结

按钮越大越容易点击,因此在程序开发中,会增加按钮点击的热区范围,减轻用户精准点击的压力。但也不能过分的大,容易引起误触;

让相关联的内容更靠近彼此,用视觉手法增强用户对它们相关性的认知。距离产生美,注意不要靠的太近,会出事;

将按钮放置在离出发点较近的地方,比如页面主按钮一般会放在屏幕底部易操作区域;

屏幕的边角很适合放置像菜单栏和按钮这样的元素,因为在屏幕边缘和角落位置有“无限可选中”的属性,可以大胆操作而无需“微调”,参见macOS底部dock栏;

定律的反向使用可以适用一些特殊场景,比如想达到某种目的而降低按钮被点击的可能;




“任何事物都具有其固有的复杂性,无法简化”。

泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也称「复杂度守恒定律」。

该定律认为:每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。


生活中很多我们习以为常,感觉便捷方便的生活方式,是无数卓越的数学家、工程师、设计师等无数的时间投入,才实现的某个小功能,是他们把这些复杂性转移到自己身上替我们简化了。


说回移动端,每个应用中都有其无法简化的复杂度,也不能按照我们个人意愿去除这些功能。这就是为什么飞机稿都简洁好看,而一搬到线上就面目全非。常见的复杂性转移有:“查看更多”、“查看全部”、“查看详情”、“展开和收起”之类的文字做转移跳转,比如:顶部导航栏的更多图标,就是将常用的功能整合并隐藏在首页设计的更多功能模块中,把用户的操作范围转移到另一个地方。


除此之外,还有一些降低操作复杂度的方法:

删除、组织、隐藏

视觉层面的“降噪”方法,删除会干扰用户操作的选项;功能分类明确,围绕用户行为组织信息内容;隐藏那些不常用而又不能少的功能,延迟及阶段性展示。总的来说就是将复杂的信息收起来,展示重要且简洁的界面。


简化交互设计

可以用代码节省用户操作时间的地方,是互联网人一致的追求。例如,B站的一键三连,用户长按点赞按钮,会同时触发点赞、投币和收藏,省时省力。


算法解放“生产力”

个性化算法就是通过技术手段,将用户复杂度降低,而转移到开发者身上。抖音为什么会让人上瘾?是算法知道了你的喜好,专推给你喜欢的内容而不用自己去找,谁都喜欢私人定制。这对用户来说是一件好事,但就像鲁迅说的:“你觉得好,一定是有人在负重前行”,这里的简化复杂的难度就转移到设计和开发身上了,还逼得机器去学习。例如抖音、淘宝、知乎首页推荐的内容都是基于你的喜好定制化推荐给你的。


我们常说以用户为中心去设计,就需要从用户角度出发,在交互设计中尽量简化操作的复杂度,降低学习成本。但如“复制粘贴之父” Larry Tesler (1945-2020) 所说:“任何事物都具有其固有的复杂性,无法简化”。因此,如何取得复杂度的“平衡点”就是重要的部分,是让工程师及设计师花费大量时间去降低产品的使用难度,还是在设计中保留一定的复杂度是我们需要思考的事。



该原理是由麦肯锡国际管理咨询公司顾问Barbara Minto提出的理论,她强调结论先行,论点自上而下。

你是否遇到过这样的场景,部门开会时有人口若悬河的讲了半天,到最后你都不知道他想说什么。所以如果开会时你会走神,这不怪你,只怪讲演者说话没有逻辑,没有重点。


金字塔原理指示结构化表达遵循结论先行的原则,即任何问题都能归纳出一个中心点,让受众能够第一时间清楚你想谈论的主题。然后由数个论据作支撑,而这些一级论据可以继续由数个二级论据支撑,如此延伸,状如金字塔。自上而下,上层影响下层。


应用到交互设计上,即将信息展示的重点与交互行为的主任务优先展示,再根据用户在这个界面上所愿意停留时间逐级给予更多细节补充。以京东的商品详情页为例,首先金字塔的最上层是用户目标明确直接进行“立即购买”的底部全局按钮,其次是商品的头图和用户评价这些,让用户了解更多信息,进一步促成购买,最后一层是提供商品相关的全部信息、参数、评分等,确保交易的最终完成。在这个过程中,用户在每一层花的时间也在逐级增加,呈金字塔状。


映射到设计师身上也是如此,从设计新人到设计总监,中间差的就是一个完整的设计技能金字塔。就像升级打怪,每完成一项任务获得相应的经验值,累积的经验值帮助我们更快的升到下一级。当把工作中的需要攻克的难题一一解决之后,你的设计水平会在不知不觉中更加精进,形成一套自己的设计风格,成为一名优秀的设计师。


有趣的是,把金字塔模型倒过来就成了“用户漏斗模型”。自上而下,激励用户成长。它告诉我们:

用户的需求是永远满足不完的,所以什么值得做,什么是可分阶段去实现的是决策人需要明白的。如乔布斯所说:“消费者并不知道自己需要什么,直到我们拿出自己的产品,他们就发现,这是我要的东西”;

不断完善主要功能,以满足金字塔顶的核心用户群。决策者常常添加一些自己想要的而不是用户想要的需求,比如在信息流中添加一个广告位;

如何优化完善产品架构,检验产品策略的合理性和完整性;



防错原则由世界著名的品质管理专家新乡重夫提出,即在过程失误发生之前加以防止,是一种在作业过程中采用自动作用、报警、标识等手段。使操作人员不用特别注意也不会失误的方法。

防错原则认为大部分的意外都是由于设计的疏忽,而不是人为操作失误,可以通过优化设计把过失降到最低。该原则最初用于工业管理,后来应用于界面交互设计中,当使用条件没有满足时,常常通过功能失效来表示。


自动检测提示

bilibili在登录时输入框没有内容或没有输密码时,登录按钮处于禁用的置灰状态,只有两者都满足了才可以正常点击。此外登录功能就可能会有用户名错误、密码错误、网络超时、邮箱错误等不同的错误。通常必须账号和密码同时满足且匹配才能成功。


Twitter发帖时只允许用户输入140个字,为了提醒用户,其解决办法是在键盘上方的工具栏上显示还能输入几个字符,超过会以负数警示。知乎发布文章标题过长时也会提示错误预警。


消除可能的失误

防错法则认为大部分的出错都是产品设计的不够优秀,而不该责怪用户操作疏忽,通过设计手法可以把出错率降到最低。防错法则的核心观点是,如何有效的在用户出错之前就尽量避免错误的发生。比如,美团外卖在接受短信验证码时,系统会自动提取验证码在键盘上方显示,用户点一下就可以自动填写,省去了跳出应用——打开短信——记住验证码——再输入的繁琐过程,有效预防了出错的机率。还有微信在绑定银行卡时也是通过扫描银行卡自动提取账号,避免手动输入的出错率。


将失误降至最低

二次确认,在一些比较重要的场景让用户二次确认,通常以弹窗的形式告知用户再次让用户考虑自己的行为结果,进一步降低出错率。例如,最近大家都在用的报税App,会在提交信息前再次确认。


视觉暗示

可在视觉(置灰或隐藏)上屏蔽那些不能选的选项,避免用户点击后才报错或点击没反应。


其次,一些不可恢复的操作,视觉上通常会给强标识。例如,删除短信时的文字颜色“变红”。


为用户犯的错买单

当用户输入错误信息时,比如打错字,系统应该给予用户想要的信息,而不是无动于衷,冷漠视之。


范围限制

其实限制用户的选择并不是一个好主意,但是如果有明确的规则来定义可接受的选项,那么限制用户可以输入的类型是一个很好的策略。例如,Airbnb订房可选日期和设置闹钟时的时间范围。


研究得出,使用产品时有77.7%的错误都是人为的,防错法则可以帮助设计师站在用户体验的角度考虑设计方案,做到操作前、中、后都有及时的反馈,预测到他们有可能发生的误操作状态,让用户更快完成目标,帮助用户减少出错率。



每次拿起U盘插入电脑时,我就呆住了,到底朝那个方向才是对的?

防呆(Fool-proofing)是一种预防矫正的行为约束手段,运用避免产生错误的限制方法,使出错的机会降至最低,进而达到“第一次就把工作做对”之境界。


设计师应谨记:不要认为用户是专家。比如,我们都知道“汉堡”图标就是菜单,点击这个按钮就会调出某些功能。但是设计师忘记了普通用户可能并不理解什么是汉堡包图标、什么是面包屑、什么是抽屉式导航、什么是3Dtouch、怎样双指滑动。更何况普通用户并不会研究App,在他们眼中产品只是众多工具中的一个。因此,一定要把交互和设计做的简单,通用的图标、功能和交互方式最好保持用户熟悉的样子,减轻用户重复学习的负担。每个页面应强调一个重要的功能而不应该让用户做选择题,这些都是有效防呆的好方法。


△页面的中主按钮更突出


防呆设计是预防错误发生的方法,让非专业、无经验的用户可以高效完成正确操作,不要让用户去思考,而是我们时时为用户思考。



又被称作“简单有效原理”:“如无必要,勿增实体。”

通俗点去理解“如无必要,勿增实体”可以理解为“不要浪费较多东西去做用较少的东西同样可以做好的事情。”或者表述为“在其他条件相同的情况下,要求得越少的那个就越好,越有价值”。


应用到设计学领域,该法则认为做产品时功能上不可过于繁琐,应该保证简洁和工具化。例如,产品中为用户提供了收藏功能是否就不再需要喜欢?提供了喜欢是不是不再需要收藏?一定要保证功能上的克制。不必要的设计元素会导致使用效率降低,还会增加不可预知的后果。建议在不损及功能的前提下,干掉多余的元素,当两个设计方案都能达到设计目的时,选择较为简单的那一个有利于更好地传达内容更好地用户体验。


总的来说,我们可以结合《简约至上》一书中提到的删除、组织、隐藏、转移四个策略来将复杂的设计和体验变得更加简单。

删除:关注核心,让用户注意力集中在自己要完成的目标上,删除不必要的功能、流程和造成视觉混乱的元素等;

组织:繁琐的功能通过分块,被组织成清晰的层次结构。还记得我们前面说到的“7±2法则”吗,把项组织到7加减2个块中;分块越少,选择越少,用户负担约轻;

隐藏:隐藏那些主流用户很少使用,但自身更新需要但功能。通过渐进展示和适时出现的方法减少干扰;

转移:把合适的功能转移到合适的设备上去。让用户感觉简单的一个重要前提,就是先搞清楚把什么工作交给计算机,把什么工作留给用户。




小测试,下列饮料中哪一种给你印象最深刻呢?文末揭晓。

可口可乐、雪碧、芬达、崂山可乐、7喜、美年达


雷斯托夫效应又称隔离效应(isolation effect),以及新奇效应(novelty effect),前苏联心理学家冯·雷斯托夫认为,某个元素越是违反常理,就越引人注意,收到更多的关注。


一样东西与以往经历明显不同就产生了经历差异。比如人生中的很多第一次,第一次高考、大学的第一天、初恋、第一份工作等等。该差异也会出现在新奇面孔、电话号码记忆中。奇特的面孔和特殊的电话号码更能被人记住。

该理论以多种不同的方式应用到设计中,最明显的就是如果想要突出某个重点内容,就要使它特殊化,通过色彩、尺寸、留白、字体粗细等设计手段。利用对比来凸显想要表达的重要信息。例如金刚区、tab栏的运营活动广告,特殊化的设计让它们在背景中脱颖而出。



个人中心的会员卡为了吸引用户注意,增加开通率,都成了重点设计对象。


与以往不同的界面设计可以更加的吸引用户,加深用户的记忆,同时扩大了活动对用户的影响力。例如每年淘宝的双11首页设计都与往常不同。


Google doodle 会在一些比较特殊的日子改变 logo 的设计,把logo设计成与这个日子相关的插画或涂鸦,与平时的 logo 形成差异化,帮助人们更好地记住这个日子。


因此我们在界面设计中,若想让用户对哪个模块或者是元素引起注意或点击,就可以打破常规对该元素进行强调设计,使他在背景中脱颖而出。但是不要任何元素都强调,因为什么都强调就等于什么都没强调,就没有重点,所以要谨慎使用这个方法。


回到开篇的题目,答案是「崂山可乐」。相比其他饮料,崂山可乐遇到的少,反而成了最特别的一个了。你的答案是什么?欢迎在下方留言探讨。




食之无味,弃之可惜

损失厌恶是指人们面对同样数量的收益和损失时,认为损失更加令他们难以忍受。 同量的损失带来的负效用为同量收益的正效用的2.5倍。比如,丢100块钱的痛苦感要远高于你捡到100块钱带来的幸福感,也就是说要至少捡到300块才能平复之前的心情。


生活中类似的栗子还有很多,比如旅游时,虽然这个景点很烂,人们依然觉得来都来了,还是要看完再走才“不亏”;吃自助餐时,明明吃不下那么多,可想到花了那么多钱,就要尽可能的多吃才算“回本”,真是应了那句话:“食之无味,弃之可惜”;花了50块买了张电影票,过了10分钟发现是部烂片,就算在电影院睡觉也不愿提前走,觉得这50块钱不能白花...


那么,该如何将“损失厌恶”赋能给产品设计呢?

最典型的莫过于电商App中的各类券满天飞,比如:买二送一、3件7折、倒计时xx小时后恢复原价等等。商家就是为了营造现在不买就会错过的套路,用户也会觉得失之可惜。一年一度的天猫双11,京东618,还有情人节、中秋节等各种有的没的节日都是商家利用“损失厌恶”心理为基础刺激消费。



我们App的用户粘性不太理想,增加一个“签到”功能吧,产品经理如是说。如是我们看到各种签到得礼品,赢红包等活动。中间还不能中断,要连续签到多少天才能得到奖励,用户也担心中断的损失。


某网盘下载文件时,会给你一个10秒VIP高速下载的体验,计时过后又恢复到龟速,让你恨的牙痒痒。虽然这招有点损,但用户体验到了VIP的快感,很多人还是会乖乖成为付费会员。


产品运营中会经常发一些优惠券,虽然知道自己不会用,也要先领了再说。这些券也都有时间限制,快过期的提醒也会加快用户决策。还有0元开通会员,套路是第一个月免费,次月开始按正常价自动续费,典型的“骗”进来养肥了再“杀”。


人天生会对危险的,不好的东西避而远之。如是我们就看到保险行业,他们会用一些负面信息(空难、车祸)刺激你,用户就会产生焦虑,自然就想规避掉这些概率小的风险。例如购买机票时的意外险,QQ退出登录时的提示。


还有就是有用户自己的内容的东西,一般不会轻易舍去。拿我个人来说,飞书一直是我的写作工具,后来看到几个更好用的软件,但要想到把原来的这么多东西全部转移过去也是件很心累的事,太麻烦,还是继续用飞书好了。QQ这个“古老”的软件,估计很多人好久都没打开过了吧,但是让你删了它,你还是不愿意的,因为那上面有很多青春的回忆。




用户会将大部分时间花在其它网站上,因此他们会希望你的网站也能像他们已经掌握的其它网站一样,拥有相同的使用模式和习惯。 

Jakob定律是由Jakob Nielsen提出的,他认为用户在其他网站所积累的经验教会了他们如何使用网站,所以他们会希望你的网站可以与那些熟悉的网站一样,相似的使用方式,在使用你的产品、服务、内容和信息的时候,他们不会感到恐慌,而是轻车熟路。该原则鼓励设计师遵循常见的设计模式,以避免混淆用户或导致更高的认知成本。


例如YouTube2017年改版前后的对比,在新版中,网站框架和功能上几乎没动,只是在UI上做了顺应新的设计准则,比如调整字体大小、颜色、栏目间距等。整体上和旧版没太大区别,而且还给用户提供了旧版的选择。


在移动端App中也应如此,在具有相同功能的页面,尽量保持一致。大到页面底层框架(比如电商应用中的购物流程),小到UI设计中的一个按钮,一个图标,甚至一句微文案。


在设计产品时,要先延续大众早已习惯的概念模型。然后再从自己的产品出发,对其进行改善。而不是从零开始制定自以为是的流程。

日常使用的各类修图软件,版式都高度相似,中间是图片,各种滤镜、贴纸、调整等功能都放在底部操作区域,很多相同功能的名称都一样。这是用户最熟悉的布局,可降低用户在同类软件使用的学习成本提升使用效率。


也许你会质疑当所有产品都遵循相同都设计模式,会让产品同质化严重,答案是必然的。此时需要深入了解用户的目标和心智模型(用户访谈、用户画像、用户体验地图等),并将其应用到我们的产品设计中去,缩小我们与用户心智模型之间的差距,从而获得良好的用户体验。上文YouTube例子中,就是通过简单的用户授权(新旧版本选择),避免了心智模型的不一致会带来的问题,当用户准备好随时可以切换到新的版本。相反的案例Snapchat在18年设计改版时,因为新的布局未能确保改版前后用户心智模型的一致性,导致大量用户流向竞争对手Instagram那里了。


但是也要注意设备之间的差异,比如在移动端“汉堡包”式菜单是个不错的方案,可是放到桌面端可能并不太友好,因为大屏幕可视范围更大,小小的汉堡包图标很容易被忽略,这时候平铺出来可能会更好。


思考总结

1、用户会把在其他产品使用中已熟悉的操作习惯转移到另一个看起来相似的产品上;

2、利用现有的思维模型,使用户可以专注于自己的目标上,而不是学习新的操作方式;

3、在进行必要的改版时,请给用户过渡到新版本的机会,即可以选择短时间内继续使用旧版本;



看名称挺拗口,另一种翻译叫做“对角线平衡的和谐状态”。它告诉我们浏览页面是由左上至右下的视线流,左上角是视觉第一落点区,右下角是视觉最终落点区,因此右上角和左下角都是一个强烈的视觉盲点区,大多数时容易被忽略。


在进行信息排布时,将最重要的信息放在左上角,右上角和左下角添加辅助元素,右下角作为整个视觉落点可以展示重要操作。运用视觉元素来创建一条虚拟的“线”,让用户的视线跟随左上到右下这条对角线移动,符合用户习惯性的眼动规律。


古腾堡图表应用最典型的例子就是商品详情页,在界面的顶部展示商品图片、名称、价格、快递和优惠等用户主要关心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角则放置最终促成用户交易的购买按钮。


我们都知道一般页面按钮都在界面底部是因为离手近,方便操作,但不仅仅如此。还因为浏览是用户的第一行为,他们的视线会根据页面元素进行移动,最终停留在底部结尾的地方。


看各种社交产品评论、点赞的位置,就知道产品希望用户先干什么的想法。


弹窗的按钮摆放一般都是左「取消」右「确认」,目的是让用户最快地看到主要操作内容。



















余额宝的「转出」在左,「转入」在右,毕竟谁也不想财往外流是吧。


既然如此,为什么“发布”页面的按钮都在右上角呢?因为发布页是属于“编辑页面”,需要用户谨慎操作,这里关注的核心应该是可编辑内容区域,而不是按钮本身。


类似的例子还有很多,设计中与此视觉流与节奏规律相似的还有F型布局和Z型布局,合理运用这些节奏模式,使用者会跟随你“设计”的视觉流和运动规律来浏览页面,有效提高用户阅读的节奏和理解能力。




美国心理学家亚伯拉罕·马斯洛(Maslow.A.H.)从人类动机的角度提出需求层次理论,该理论强调人的动机是由人的需求决定的。他将人类需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求,依此由低层次到高层次的过程。马斯洛需求层次理论最大意义就在于,它告诉了我们,人在满足了基本的需求之后,就要去实现更高的需求和目标。


马斯洛需求层次理论有两个基本出发点,一是人人都有需求,某层需求满足后,另一层需求才出现;二是在上层需求未获满足前,首先满足迫切需求,该需求满足后,后面的需要才显示出其激励作用。例如,在能感受到爱之前,他们的生理和安全需求一定要得到满足。


回归到产品,一款产品,最核心的是解决用户的需求。马斯洛需求层次理论,为产品的需求分析指明了方向。

生理需求:满足人的最基本需求,如衣、食、住、行、生理方面的需求。诸如美团外卖、淘宝、马蜂窝等为日常生活提供方便的应用;

安全需求:人生安全、财产保险,也是强需求。如是各类投资理财软件层出不穷。

社交需求:包括友情、亲情、爱情多个层次,满足人类社会关系,让每个人不再是孤单的个体。如是微信、微博、Soul、探探、陌陌等不同类型的社交软件多如牛毛;

尊重需求:每个人都有被尊重的需求,都希望展现自己,获得人们认可。此需求可以深度结合在社交需求中。

自我实现:最高层级的需求,完成与自己的能力相称的一切事情,实现自己理想的需要。结合到产品可以理解为能满足自己外在展示(炫耀)的需求,如各类美颜软件,美化后的照片晒到朋友圈,给人看到最好的一面。


由此规律可以看出,越靠近底层需求越是刚需,越往上,就变得越来越不必要,如自我实现,变得可有可无,不再是所有人的刚需。一个优秀的产品,深谙人性满足用户核心需求,才能形成持续稳定高用户粘性的产品。




序列效应法则又叫系列位置效应,是指一种记忆现象: 在列举项目时,排在最前面与最后面的元素,要比排在中间的更容易让人记住。

因为人们对排在头、尾的项目,要比排在中间的更容易记起来。比如我们都知道第一位登上月球的宇航员是阿姆斯特朗,却很少人知道第二位奥尔德林;班级里我们一般都知道成绩最好的第一名和倒数第一名,至于排在中间的很难记住。因此对排在开头的项目产生加强的回想效果,称为“首位效应”( primacy effect)。对排在结尾的项目产生加强的回想效果,称为“近因效应”( recency effect )。


分类页签中,我们通常都会记得“精选”、“热门”这类标签,是希望给用户进入App后看到的主要内容。这就是“首位效应”,把重要性高的内容放在首要位置


我们都知道界面中“返回”按钮放在左上角,除了操作习惯和防误触外,还因为它出现在页面左上角最开始的地方,更长久地储存在长期记忆之中,需要“返回”时能够快速回忆出来。


tabbar数量不管是3个还是5个,用户通常都会记得第一个“首页”和最后一个“我的”,对排在中间的都会选择性的忽略掉。


有时候新上一个功能,产品想提高它的位置引起用户注意,会和“我的”互换位置。例如网易云音乐,新版本中把“我的”放在第三个tab,为了提升“云村”重要性,把它放置最后一个tab,正是利用了“近因效应”。


近因效应常用于及时进行反馈的设计界面中,比如点赞、评论、分享等功能置于底部不仅可加深印象,同时用户在看到有趣的内容,想要评论或分享时,不用等到文章看完即可操作。从而增强内容粘性,提高互动率。


用户的记忆具有系列位置效应,而且人的短期记忆非常有限,通过序列效应法则的应用,我们可以帮助用户减轻记忆负担。在排列项目时,把重要的放在首位或末尾,以达到最好的记忆效果。

文章来源:站酷  作者:Fyin印迹

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


日历

链接

个人资料

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

存档