首页

UI设计师如何避免用户不满与困惑

ui设计分享达人

案例1.用户操作时的困惑


相信大家在做设计的时候都遇到过这种情况,一个产品内有多个入口指向同一个界面,这是产品的投机取巧还是另有深意,很多人都对这样的设计有不同的看法。


这样的设计就好像是狡兔三窟,在产品中流量可以从不同的入口进来,到多个不同的出口,也可以从不同的入口进入同一个地方。



有人会觉得如果一个界面中有多个入口指向同一个界面会出现问题:


1.违反了效率、用户预期的原则,会认为页面空间有限,在同一个界面中有多个入口指向一个界面效率变低,而且用户知道后往往就会只从一个入口进入。


2.多个选择会让用户拉高转化的成本,用户在选择的时候会花更多的时间思考有什么区别。


我们来看一个例子,下面德邦app之前的一个版本,目前已经优化了。从截图中我们发现页面上方的查询和寄件都和底部标签单独出来的界面功能重复了,并且我的快件也直接可以展示在首页的下方,我的快件目前可以从首页顶部、首页下方和个人中心3个入口进入查看。



通过这个案例我们发现确实这些板块和功能重复度太高,并且没有区分出场景,这样的设计证实了以上的两个说法,降低用户使用效率和提高选择成本。而且从业务角度看也并没有目标的差别。


但是我们分析问题也要多角度去观察,多个入口进入同一个界面只有缺点没有优点吗?


显然不是,我们再来看几个案例


下方是一个商品评价的卡片,经过我小手的实际测试,发现无论点击这个卡片任何有内容的区域,都会跳转到全部评价的界面,那这样的设计逻辑是否会造成和上面的案例一样的问题呢?答案是,不会。



这里的设计逻辑并不是和沙面那里的场景那么单一,而是用户在面临不同需求场景的时候可以有选择。


不知道大家有没有发现一个问题,在上面德邦案例的时候,你会对两个入口有疑问,但是在评价卡片的时候并没有,这个卡片包含了4种不同的场景:

1.我想看看有哪些好评、哪些差评 

2.几个不同标签的用户都是怎么说 

3.下面用户的实拍到底是不是真实的 

4.还有没有更多类似真实用户的使用评价。


所以即便最终到了一个界面,对于用户来说也是从独立的出发点开始的,而再回过头看上面案例,你会发现,我就是要寄东西,这里有两个入口,怎么选。


而且,考拉这里其实还做了从不同内容点进去的一个区分。



再来看个案例,贝壳的地图找房,在首页中有两个入口,导航栏一个,分类中一个,这里出现重复会造成一开始说的问题吗?首先我们看到贝壳的业务很多,以至于在这个分类中居然还需要通过滚动指示器来展示剩余内容,大家也可以思考一下,在这个界面中,会不会出现两个地图找房不同的场景出发点呢?我个人觉得其实是可以商榷的,首先地图找房在房产app中是很核心高频的一个功能,他的属性是“工具”



所以我觉得他之所以在卡片中再放一个地图找房是3个原因


第一个是导航栏的找房肯定不能动,他是一个全局的入口,即使页面滚动也可以随时点击到,即便要撤一个,也肯定要撤下方卡片分类中的。


第二个是卡片分类中的图标入口是都具备工具属性的,那首页上面部分就分为了:搜索、业务分类、工具这三块。所以用户看到这些工具属性也会联想到通过地图去找房。而且这些多色彩的图标对于新进入的用户是比较吸引注意力的,所以很有可能用户看不到右上角的地图找房(可以参考古腾堡图表的原则)。


第三点是可能右上角的地图不太能清晰表达这个图标的具体功能,所以将“地图找房”四个字显示全。


但这些都有一些主观因素在里面,如果真的去掉卡片中的,我觉得可能影响也并不是很大。有小伙伴可能想说是为了分流,但是分流的目前主要是让流量流到他应该去的地方产生实际价值,除了以上的3个原因,好像确实有点重复了。


再来看一个例子,小鹿茶app。



首页的现在下单和底部菜单标签都是到同一个界面,那为什么要重复呢?这里其实考虑更多的他并不想让用户进来就直接去购买,为什么不直接购买呢?应该是想要建立自己的品牌人设、满足更多的消费场景和增值业务,比如给别人点奶茶、周边的杯子跟合作商品推销、最新的奶茶的推荐。


如果只有菜单,产品也会显得更工具化,很难突出自己的品牌,对业务增长没有太大的帮助。有同学要说,那这个界面只是产品的“一厢情愿”,我就只要点奶茶就可以了,多个入口只会给我带来困扰。所以他这里的设计逻辑是在用户打开app的时候首先定位的是菜单,而不是首页。


所以,到底多个入入口进入同一目标我们还是要看不同的场景和目标的。如果既没有业务目标做支撑,又没有用户场景的变化,那么这个重复的入口就是鸡肋的。


最后留一个小思考题:网易云音乐的“歌单”在首页上也重复了,大家知道这里为什么他要做成重复入口吗? 




案例2.用户使用中的不满


一个优秀的产品或者说一个合格的产品,能给用户带来愉悦的体验。何为体验,用大白话来说就是用的舒服、自然、高效率。


再有一个底线就是不要让用户产生由产品带来的负面情绪,例如产品出错了却不告知用户解决方法、用户出错了没有办法及时帮助纠正、高危操作没有二次确认等等,根据负面情绪的严重程度几乎就可以直接让部分用户流失。


很不幸的是我就遇到了这样的体验,当时正在给同学们布置一些作业练习,体验一些产品的优缺点并给出解决方法。我也下载了这款文玩类的App,体验了极速捡漏这个功能模块。


捡漏:在文玩圈的一句行话,意思就是用很便宜的价格买到很值钱的古玩,而卖家却不知情,是一种可遇不可求的行为,所以寓意就是比较难得、走好运了。


进入直播间,商家在卖力吆喝,页面底部有加一手的按钮,就是类似于拍卖,价高者得。于是我就抱着试一试的心态点了加一手按钮,因为我预期是产品会再次向我确认是否要加价,结果是居然加价成功了,发生了什么?最后竞拍结束也没有人继续加价了。




实际场景中用户可能误操作不小心点了按钮,这样的场景和情况是非常多的,即便不是误操作,给一个二次确认的对话框也可以避免这样的尴尬状况,因为用户就喜欢在产品中点来点去,然而你在这里就像埋了一颗地雷。


如果到这里就结束了,那其实我也感觉没必要去吐槽,问题在于当我拍下还没付款,直播间的商家就开始喊我的名字:xx大哥恭喜你拍到了我们的产品,可以去付款了。连续播报了几十遍,我尴尬的直接退出了后台,这种感觉就像是一群观众看着一个被骗的小白一样,当我过10分钟后打开系统提示商品流拍了,并且累积了违约积分。


???


到这里,可能会有人说,你自己拍了的又不付款,当然要惩罚你了。


于是我还是认真的去研究了一下,发现极速捡漏和竞拍并不是同样的规则。该产品和竞品其实都有竞拍板块,在竞拍板块都会有需要用户确认的操作,并在操作下方给出拍卖规则,显示出价即表示同意拍卖规则。




但是该产品极速捡漏的板块并没有这样的说明,既然没有提前展示这样的说明和约定,用户就不知道有这样的规则,我拿了竞品一对比,其实在直播带货的场景下,这个出价流程还是不同的,双方其实都没有给规则说明但竞品还是给了一个出价选择后再出价的步骤。



最后我甚至被商家拉黑了,不过还给我一个投诉商家的入口


我当时的想法:


1.如果因为误操作让用户付出这么大代价的话成本就太高了。让用户点击是否就等于用户同意?


2.请先告知我约定与协议的内容,单方面在我不知情的情况下对产品进行操作后,通知扣我违约积分,这样就有点“霸道”了。


3.平台对商家和消费者的权益是如何平衡的,文玩行业和互联网结合的难点在哪里。


3.线下文玩圈的一些不成文行规,导致新人入圈后产生的冲突。


于是我就想对此说说我的看法



1.交易是产品平台其中的一个功能属性


交易是产品平台其中的一个功能属性,需要优先满足产品对用户价值,其次再谈交易的合理性。在这个流程中,面对用户很有可能遇到的误操作行为以及需要让用户去下单支付成本,我们必须提前告知用户。在尼尔森可用性原则中我们也发现了,如果用户不小心操作失误,那么我们尽可能减少这些因为用户犯错带来的成本,同时在用户犯错之前就要明显告知用户,将风险控制、前置。


所以,你在注册的时候、登录的时候,产品一定会让你同意一份用户协议,告知你我们要保存你的数据和一些跟你相关的信息,如果你不同意,那就无法继续体验产品。


这是一种契约。


同理,如果你想让用户在这个产品中去参与拍卖,在进入这个板块之前或者用户点击按钮之后,也需要让用户明确这个操作带来的风险是什么,取得用户的同意。而不是直接让用户加价成功,导致用户不明所以的被扣违约积分、被商家拉黑,这就和你去泰国,在街头你朋友拍了一张你和一个抱着蜥蜴的人的照片,结果别人来问你收钱是一个道理。


对于正常线下拍卖的流程,举办方也会对参与拍卖的人员进行相关规则、流程的告知,并且将风险、问题都提前让客户进行协议确认。


所以,在产品中的交易,必须先满足用户与产品信息之间的对称关系,保持信息的透明和契约公正,规则、约束、条件是用户使用你产品的前提和体验反馈的衡量标准之一。



2.对于商家和产品的价值


商家希望有更多的流量来曝光商品,捡漏商品的低价可以快速吸引一大批用户,比如8块钱的一个木头核桃的雕刻挂件等,产品通过营造抢购、限时的氛围,吸引用户下单,并且降低用户参与的门槛。


那么,直接加价成功是一个好的降低门槛的策略吗?我觉得并不是,降低门槛并不意味着就是直接拍到,而是需要提高用户对产品的信任度,这个极速捡漏的模块的目标用户几乎都是小白用户,因为资深的玩家看不上、更不会买,有一定经验的玩家也看的出好坏,明白它的价值。所以面对这些没有了解过文玩产品的小白玩家来说,内心是谨慎的


可能有人会想,这几块钱、十几块钱的东西还需要考虑吗?当然在这个场景中,从众心理是很明显的,大家都觉得很便宜,但就是没人拍。这都几块钱捡漏了怎么都没人要,大部分人都觉得这么便宜东西肯定不咋样,运费是不是贵的离谱、有没有托在背后跟你抬价呢?大家都不拍我也观望。越多人围观,越难促成交易。


还有一种可能就是我卖不卖的出去东西,并不重要,重要的是有人来看了,这些边角料都是用来回馈直播间粉丝的,就是一个窗口,真正有利润的东西在橱窗里。所以这里的捡漏只是一个引流的噱头。


人总是对太轻易得到的东西不珍惜,更何况是几块钱的小玩意儿。所以针对直接拍下这个交互,个人认为是不妥的,无论是上面任何一种情况,都没有办法让降低门槛,甚至通过这种“小聪明”反而会让用户更加不信任产品和用户。


不信任产品是大。尤其是作为一家平台来说,虚假交易、以次充好、滥竽充数等等行为是致命的。



3.文玩的价值


我其实有玩过一段时间文玩,受我老丈人的影响,有一段时间喜欢玩手串、玉什么的。经常也会在某音去刷一些鉴宝类的视频,很有意思。


文玩它的价值在于品相、稀有度、盘玩程度、大众接受度、历史背景还有工艺等等。所以它并不是一个在每个人心中同等效用的商品,同样一块玉,他的种水一般,但是花纹很独特,买卖双方其实心理的价值预期会相差非常多,它就不像买电子产品一样价格那么透明容易计算。


有的人玩这些就是觉得命里该有它,它能给我带来财、运,帮我辟邪,看的是眼缘。而不是路边上一块无用的石头,可以随意拾取丢弃。那么换句话说,如果在用户下单的时候,我们利用一些情感化的文案,让用户喜欢上这款文玩,是不是也可以大概率的促进交易呢?



4.文玩圈的行规


我相信很多玩文玩的小伙伴都知道,在文玩圈有一些不成文的行规。也或许就是因为这些行规出现到了线上产品中。


1.还价意味着出价,出价意味着买下

在文玩圈,你不想买就不要还价。如果卖家同意了你的还价,那你就必须买。这代表着你个人的信誉和道德品质。


所以文玩圈和互联网的用户之前有许多的鸿沟需要一步一步建设桥梁,不能单纯的以线下圈子内的行规来要求刚接触这个圈子的互联网用户,这需要大家一起努力和营造起一个良好的文玩圈的文化和规则,而不是直接生搬硬套,提高这个门槛。


2.不要打听别人的成本

文玩没有实际的成本,可能别人花10块钱淘到的价值1万块的东西,也可能别人花了巨资看走了眼。所以你知道了成本对谁都没好处,别人也不会告诉你。


3.别人在交易的时候保持沉默

文玩在每个人心中的价值不同,所以货币价值也不同,当别人在询价还价的时候,不管怎样我们都不要去表明自己的看法和想法。


当然还有其他的规则就不一一叙述了,针对这3条,其实在互联网的产品中是会有冲突存在的。例如你买了某个文玩,你一拍下,别人就说这个根本不值这个价钱。还有你出价了但是又不想买了,这些原本在文玩圈子中不允许的规则,在互联网上去要求用户着实有点困难,因为互联网上的交易并不一定所见即所得,可能展示的是这样,收到货又是另一个东西。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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


B端设计|数据展示控件应用

ui设计分享达人

将数据查询的条件、逻辑、方式,整理清楚后,那么下一步的内容就是如何将查询后的数据更好的展示给使用者看。到这一步设计师或是产品应该思考的是如何将众多分散的信息,有序的、直观的展示出来,并且辅助使用者解决问题,为产品提效。 

数据展示主要以表格为主,由业务需要对表格进行扩展,结合其他组件使用;其次是列表,列表与卡片样式结合的较多。 

设计原则
依然要牢记的一些设计原则,即:简洁清晰、灵活高效 
简洁清晰:剔除不必要的装饰元素,避免过度; 
灵活高效:在现有的规范指导下,根据不同业务的不同需求,快速组合多种样式的表格,提升设计效率,也要兼顾减少开发代码冗余; 

一、表格 

基础表格包括几点基本要素:表名、列名、数据、翻页,这些构成了表格的主体框架,而在真实场景里使用的表格都是升级版本,补充了更多功能作为辅助,比如排序、筛选、操作、导入导出...... 

数据筛选:不同于查询模块的筛选方式,直接在表头标签操作,一般会以“倒三角形”图标展示,通常应用在这一条数据处在哪种状态,例如:进行中、未开始、已完成、已取消、审核中; 


排序:现在比较少的应用,因为排序大多是对时间上的排序,而一般一个新的数据也是按照时间倒序展示,在第一行展示; 

操作:对某一条数据的操作,或查看或编辑或删除; 

导入导出:对超过一定量的数据,会进行导入数据,导出数据,当然会有遵循一定的规则,才能和线上表格数据类型一一对应上; 

实际工作中,我们都是根据产品需求和业务需要对表格进行补充辅助功能的,在设计表格的时候,总结下来通常会遇到下列几类问题: 


  • 有层级关系的数据该怎么展示?

  • 一条数据有父子关系,该如何展示?

  • 一条数据类型太多,表格容不下怎么展示?

  • 一些数据其中的一类型字段较长,其他类型字段段,甚至只有几个字,该怎么展示?

  • 一组数据,数据不全,类型不全,部分数据是共同的主体,该怎么展示?




除此之外还有树表结合的、表格套娃 

对于这些常见的问题,在设计时会充分考虑这一领域的专业操作者,特别是从事医疗行业的专业人士,严谨的数据要求会比较高。 

1、数据的层级关系 

在相关医疗数据的管理系统里,因为医疗数据的复杂和严谨性,常见的表格展示不能满足层级关系的表达,所以在视觉呈现上增加结构化层级关系。 

2、数据本身的父子集关系 
另外就是同属一条数据之下,还会进行细分多个子数据,并对应的归类列项; 

3、并不好看的数据 
上边两种说的是工作里典型数据结构的层级关系,并且数据容量相对美观,不多不少。而实际的数据没有那么美好,数据长短是参差不齐的,所以在考虑上述两个设计原则的基础上还需满足,可阅读和最大化兼容; 

在一组数据中,单条数据中某一个类型的字段很长,管理系统里表格的容量是有限的,所以在可行性的前提下,对这部分数据缩短,可以按照需要但不重要的要求,隐藏部分,将主要信息显示出来,并给予查看全部信息的入口。 

4、残缺不齐的数据 
上述的说的数据还是比较好看的,而真实数据是残缺不全的,甚至部分数据是“丢失”的,而且列项类型很多,表格横向宽度是不够的。 
那么此时通过两种方式优化这块内容:一种是固定左右边际列项,中部滑动;另一个种将空数据的列项隐藏,并给予条件选择,按需展示数据的哪些列项; 
当然在患者端也会有患者头像,那么在管理系统里的患者表格相对应的头像,另外也存在患者上传的文件(图片),也会以缩略图的形式展示在表格中。一般会将所有涉及到的图片(头像、文件)规范统一的大小尺寸。 

二、列表

另一个常用的列表了,常和表格组合使用的,另外在某一条数据详情里也比较常见。在视觉表现上与表格并无多大的差异,较明显的就是列表没有列名名称,实质上的区别是在前端编写代码上的区别。(希望这个图能帮到在座的各位设计师朋友们,和前端叫法意见不同时,可以了解下,毕竟你在看视觉时,他/她在想用什么代码写出来) 
列表一般几个场景下会出现: 
会根据数据“长”的怎么样,然后采用不同的形式去展示数据,让它“好看”些,且更容易被阅读和理解。 

查询筛选类 

1、也会遇到查询条件较多的,那么以多组列表形式出现,两组或是三组。多重的查询条件,就不叙述场景了,查询是最基本的常用方式。 

2、遇到多组筛选条件,考虑电商网页版的筛选和布局方式,因为它主要是表达对数据的筛选不同类型的多组联合后,能够符合产品需求预期的结果。 

段落数据类 

1、卡片列表,针对的是单条结果信息内容较多,一条信息占据一行,把重点区别于其他信息展示给管理者查看,便于识别。基本信息、现病史,省去二次点击详情查看操作。 
除了上述所说的段落形式的内容,也有内容是分点和分类型的展示,主要是满足直观可见,提升效率为主。 

2、九宫格列表,同样,对于上述的分点类型的卡片列表,在数据容量的允许下,可以采用视觉上的九空格,将一级重要信息突出,作为识别来源,二级信息附着。为什么这么做呢,因为信息更突出呐~ 

详情类 
对于详情内容,即一条数据的完整展示,如无必要,别起新页,痛苦操作给大家的忠告~~~可用模态弹窗,将信息展示出来,条理清晰,又明朗是不是 
三、总结
还是以一贯的方式来呈现视觉,需求先行、数据先行,再考虑后边的视觉展示,理解了业务需求,才能让视觉表现能够更好的符合需求,并且兼顾对后期的数据变化考虑可扩展的空间。 

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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



B端产品设计分析方法总结

ui设计分享达人

做一个完整B端系统项目前,从交互设计的七大定律,B端产品业务调研,用户访谈研究方法,精准推导B端用户画像,到B端产品主风格的设计定调,深度理解B端主流组件库的视觉规范,进而为B端产品设计做充分的准备工作,以下内容较多,大家可以根据上述目录来进行选择性阅读。

1.1 B端组件库的概念及作用


概念:组件库的底层逻辑就是原子理论,类似于我们在拼乐高积木的时候,根据说明书一个模块一个模块来拼凑,先找零件,再拼成部件,然后是成品,这个过程和UI中的组件化是一模一样的,组件化就是原子理论集中得表现,原子(图标、按钮、字体样式等)——分子(标签栏、导航栏、搜索框等)——有机体(图文列表、内容卡片、布局模块、瀑布流图等)——模板(原子、分子组合排列组成了模板,也就是原型图)——界面(最后根据原型图形成视觉设计稿)


作用:一致性:比如在不同得界面中,如果用样的按钮,他的按钮的展现形式,要保持一致性。

高效性:比如所有的按钮不用单独去设计了,从组件库里调用就可以,这样对于设计师来说就是高效的。对用户来说,也会让用户的使用效率提升,比如当用户看到蓝色的按钮就是可以提交的按钮,看到白色得按钮就是次要得按钮,看到不带边框的按钮就是一个危险按钮等等。

组合性:通过调用不同的组件来进行组合可以形成不同的页面。


1.2 如何正确使用组件库


1.2.1 组件库的使用前提

一些主流的组件库,比如AntDesign、Element Design、ZanDesign组件库等,这些框架机构本质都差不太多, 但他们有自己的特点,具体用哪个组件库,通常由公司的架构师来进行架构选型,比如VUE(Element Design)和REACT(Ant Design),这是两种不同的技术选型,(VUE和REACT是一种前端框架的技术架构版本,可帮助前端工程师快速进行开发的前端框架)。从技术角度讲,大部分公司会首选AntDesign(React),因为有很多案例提供,VUE和有赞也可以但用的少。从设计角度,Ant Design得设计组件形式案例很完善。Element Design做起来视觉单一得样式白白得感觉,没有设计层次化,Ant Design更好看一点。所以先选择底层的前端框架,再根据这个选择前端的机构布局。

1.2.2 组件库的使用过程

设计师和前端最终目标是一样的,都是快完成保证设计质量的,原生组件不能达到要求的时候,设计师可以根据原生组件库修改样式来表达到自己的想法。但对前端来说最好什么都别改,就用原生组件库前端工程师直接复制就行,这也是因为我们设计师的要求和前端的要求是不一样的。但修改后样式的组件,底层逻辑还是原来的组件。从Antdesign等组件库里复制出来,经过figma里的各种功能操作后,比如分离组件、改变组件得形状、替换内容等,但这个组件仍然是Antdesign里的组件,组件是否改变取决于,这个图形,这个组件是不是已经代码化,我们设计师设计的组件,只是样式,需要经过前端来形成代码,只有代码化的组件,才是组件,如果没有代码化,那只是一个样式而已。所以,我们用Antdesign里是已经实现代码化了得组件,组件库里有的组件前端一定是可以代码实现的。


1.3 如何设计组件库


1.3.1 每个项目都会分这四个周期


项目初期:在一个B端项目得初期,大家都会有疑问,B端组件库应该什么时候开始建立?是不是先建组件库再开始设计?答案是,如果不是从0开始的项目,组件库在设计之初就应该建立起来,如果项目是从0开始,由于没有业务的案例,组件库组件库也无法建立,但可以建立一些最小元素:原子。比如字体(应该用什么样的字体,在正标题,副标题,大标题,正常情况下应该怎么样使用字体的得明度)、色彩(色彩规范是什么,比如医疗行业,航空行业,交通行业应该用什么色彩,决定主色不是好不好看,而是由企业来决定得,首先了解企业的VI色,通过结合VI色和产品分析出的用户画像特征,来确定主色,辅主色,确定主色后,相应的背景色、深色背景、浅色背景、灰度背景、卡片背景等,也就都可以做出来了)、按钮(通常状态,点击状态,当前焦点状态,不可点状态)、基本控件、布局栅格、图表(图标icon、文本标签、按钮、图表)、图标;通过建立原子组件,完成一些基本典型的页面设计。

项目中期:继续完善基本组件库,应用案例的完善,迭代组件库、样例库、最佳实践案例。然后再次迭代进入基本组件库。


项目后期:形成最终组件库与设计系统的规范建立,根据项目不一样详细程度也可以不一样。


延展期:为项目2.0升级准备根据使用反馈、迭代之前得组件库与规范,预计未来版本中出现的典型案例,并针对性的设计应用组件。通常很少有公司进行到这一步。


1.3.2 组件库的开发流程


1.3.3 B端组件库存在的价值


B端组件库的存在是不是意味着不需要设计师了?其实并不是,组件库可以帮助设计师增进设计效率和沟通效率,和前端沟通告知按照对应的选型组件库规范使用就可以了,同时组件库得一致性、准确性、协同性它的质量有保证。但设计师做完组件库后,继续需要关注的点是:

01、根据业务场景来优化设计组件库:因为组件库是一定会去更新的,如有必要再去更新,那一定会是很复杂得业务场景下去做更新的,这个业务场景是程序员或者以前的组件不能实现的,需要很强的设计技能去做迭代,所以需要设计师继续去做一些结合业务场景的组件来放到组件库里。

02、需要设计师把更多时间精力投入更多设计体验中,而非搬砖:组件库的建立同时解放了设计师的精力,设计师可以把时间投入到设计体验中去,而不是做一些搬砖得工作,比如按钮怎么画,用圆角还是用什么颜色,这些没有技术含量的工作,这样一来,可以投入更多时间来赋能业务更好体验设计工作。


1.3.4 B端主流组件库有哪些

2.1 B端产品的设计过程


2.1.1 用户体验五要素


战略层(属于产品愿景,满足用户的需求,产品的愿景和目标


由于用户有不同的需求进而产生了不同的产品,战略层决定了用户用干什么样的产品,比如,用户需有很多销售客户的线索需要进行管理,用户需要管理客户,那就做一个CRM系统。比如,用户想写日报,想要一个打卡的OA系统,那么产品目标就是要做一个OA系统。比如,电商里面很多商品,牵扯到很多进销存,那就做一个ERP系统。这部分跟设计师相关度没有那么高。


范围层(指功能规划,功能的规格、包括内容的需求)

功能规划:比如要做一个OA系统,其中就包含了打卡、日报、项目管理、报销、人事流转等等都是跟办公相关联的,需要把规格和功能画出来,画成简单的表格并且将它们分类,这里所有的功能都不是详细的,就是简单的分类,将功能简单描述一下,同时做一个简单的用户画像。这部分设计师只需要阅读产品经理给到得PRD需求文档即可,整体看还是偏愿景,没有形成具体的产出。比如OA系统中就总结出重点做一个审批得功能,并不知道什么样的界面,只知道一个大概的范围。


结构层(指原型设计)

这部分,设计师通常就需要参与进来,如果设计师只按产品给的设计好的原型来设计,就显得很被动,这样只能叫做视觉美化,被称之为美工,设计师应该从没有形成原型的时候,可能只是一个简单的PRD需求文档或者草图,设计师就应该参与进去。


设计师对原型进行优化设计,优化的不是业务,因为很多业务内容肯定没有产品经理了解得深刻入,这时,设计师需要优化的其实是它的交互逻辑、交互内容,一旦原型里里产生点击,一旦产生多种状态,那就要去了解它,每种状态产生不一样的界面结果,其实对标的就是设计师设计的界面将产生什么样的变化,换句话说,如果有界面的变化,内容得变化,设计师就需要参与到其中。目前来看,很少公司有专门的交互设计师,要么这部分工作由UI设计师来完成,要么由产品经理来完成,很多企业已经把设计进行前置化,由UI设计师来完成交互的工作。


其中交互设计+信息架构设计是设计原型图的关键,这两个是密不可分的,如何制作原型图,如何在原型图里设置一些交互事件,给大家推荐《信息架构设计》这本书里有专门讲到。再了解原型设计之前,不得不提到一个通用知识点,交互设计的七大定律。(后文有介绍)


框架层(指界面设计、组件设计)

框架层这部分有一些争议,有的设计师认为就直接做界面设计了,其实框架层还不能把它理解成是界面设计,它仅仅是做了一些业务的模块儿的框架而已,更多的其实是将它组件化: 将原型组件化、模块儿化,类似我们直接从Antdesign组件库复制来内容简单改改之类得操作,完成的是组件和界面的设计,这些界面并不是最终完整的交付样式。


表现层(可视化呈现,UI视觉呈现)

这部分和设计师关联度最大的一部分,就是界面中的配色、配色、图标、样式、结构、布局、排版等设计,但是我们设计师需要从范围层了解业务熟悉最初PRD产品需求文档去一点点做起,其中设计师在战略层参与度可能只有2%左右,范围层参与度5%左右,从结构层开始逐步往上参与度越来越高,至少结构层,框架层和表现层的参与度是很深得。



2.1.2 B端产品的设计过程是什么

所以,通过梳理用户体验五要素,不难看出B端UI设计师的工作流程就是,01. 接到项目后,设计师主要阅读产品经理给到的PRD需求文档,同时去参与原型设计,根据最初版PRD输出一份低保真原型图,和其他部门进行初次评审;02. 经过初次评审讨论过后,完善后的功能和页面文案,产品经理补全和输出完善后的产品PRD需求文档,由设计师根据完善后得PRD需求文档经过规范设计输出高保真原型图 ,与其他部门带着初次评审讨论后的问题,进行二次评审。03. 最终再由设计师经过组件化形成视觉图。04. 同时设计师提供切图,与前端紧密沟通,上线前制作设计走查表,进行设计走查。05、最后上线后根据数据、用户反馈等提出交互和视觉可优化得方案建议,进行版本迭代。


2.2 交互设计七大定律


01. 菲茨定律:当设计师需要让用户重点去看到页面中某一个突出点,点击到一个区域时,设计师就需要做到适合的大小,适合的区域,适合的位置,适合的形状,适合的颜色。也就是你想让用户点击的时候就突出重点想显示的,不想让用户点击退出的,就把它设计的的足够小。比如按钮得退出和付款,实心付款按钮为主要按钮,虚线置灰退出按钮为次要按钮,比如常说的海报中字要大,logo要大,这些都属于菲茨定律。


02. 席克定律:用户面对的刺激(或选择)越多,他们做出决定的时间就越长,由于用户的时间很宝贵 ,用户没有义务花更多留在我们的网站上,所以我们需要有选择的地方对选择进行分类。


03. 7土2法则(米勒定律):比如圆周率3.1415926,一般都能记住,而如果再往后加几个数字,大家往往很难记住,原因就是经过大量测试,人脑容易记忆7位数字前后得数字,比如设计银行输入密码的时候就用到了7土2 法则,设置密码过多人脑不易记忆。


04. 接近法则:格式塔接近定律指出“彼此靠近的物体或形状似乎形成了组”。


05. 防错原则:当用户在使用产品中,预判用户本身或产品一定会出错时候,可以告诉用户怎么可以不犯错,或者将风险降低。比如电脑的关闭电源键,就允许电脑司机时允许系统犯错,让用户使用关闭电脑电源键进行重启。比如银行取出钱后,银行卡有忘拔现象,银行完全可以做到像光大银行那样去再取钱流程中改成先拔卡再出钞得交互流程,就可以避免忘记拔卡,但其他银行都没有这么改进,仍然是先出钞后拔卡得原因是允许用户犯错。


06. 奥卡姆剃刀原理:化繁为简,如无必要,勿增实体。比如小米电视遥控器的设计,由原来传统的很多遥控器按键只优化成了保留上下左右为数不多的几个重要按键,原来的遥控器数字按钮如果真正要输入数字的时候通过功能性,调出数字来,这样在遥控器得设计中基本只保留20%主要功能按键。这就是交互上的优化。比如在UI界面中,也会用到这个问题,简化文字,把文字用图标替换,还有各种流程得优化等等。


07. 雅克布定律:以用户习惯的使用模式去设计产品,降低用户学习成本,遵从用户使用习惯。 利用现有的思维模型,用户习惯,我们可以创建出色的用户体验,使用户可以专注于自己的任务而不是学习新的模型习惯。



2.3 B端产品用户画像


2.3.1用户画像概念

用户画像又称用户角色,作为一种勾画目标用户、联系用户诉求与设计方向的有效工具,用户画像在各领域得到了广泛应用。用户画像分为两种,不论C端和B端都会做这样的用户画像。总共可分为两部分,基本信息数据和行为数据。


基本信息数据:当我们去了解用户的基本信息的一些数据时,职业,收入,年龄等等,这些和功能有很多的关联度,比如唯品会用户画像关键词是:女性、折扣、白领 ,唯品会产品定位聚焦女性,这些基础信息数据,就能给产品带来很好的结果,当我们要做一个女性的购物平台的时候,可以先把男性用户抛除掉去考虑设计方向,再比如收入就知道了,大概产品面向的收入群体将是什么收入群体的人,那么我卖货的价格区间、包括设计的风格就是一个什么样群体的设计风格。那些卖奢侈品的不是黑色就是灰色,要不就是棕色,但未必是适合唯品会产品的风格,需要找出这些基本信息去和产品进行关联度,把基本信息放到设计结果中去考虑。


行为数据:指用户的爱好,这部分群体有哪些爱好,是喜欢购物,还是喜欢运动,他/她的消费情况是什么,喜欢旅游还是美食,他/她经常用哪些APP,他常用的设备,是苹果手机呢还是安卓,小米还是华为,等等得到这些数据,也能得到一些用户喜欢什么样的竞品,这些数据就能侧面的在我们的产品中得到反馈,得到功能和设计上的指导和其他产品的区别。这些行为数据,不管我们做C端还是B端,都要获取到,但C端和B端获取到这些行为数据的结论是不一样的。因为C端用户研究方法不一定适用在B端用户研究方法。C端最终抽象成一个人,给他带来的很多属性,这些等等都会成为他的用户画像。

进而找到这个人,将他的社会属性,从抽象的角度慢慢变得具象,C端是他/她的社会属性,把他做成一个普通的人,这个人有他的社会属性,有他的社会价值,有他的社会行为。比如一个女性,一定喜欢美食,一定会买化妆品。


2.3.2 B端用户画像本质

比如做一个和电影相关的管理系统,电影行业包括很多人员管理,设备管理等,这里不能把用户画像抽象成一个男性或者女性了,而应该把它抽象成一个职业,比如抽象成一个导演,导演需要去管理什么东西,它需要哪些资源去整合。导演就又叫做行业属性坐标。B端不以社会属性去做用户画像,一定以行业坐标去做用户画像,我们在整理作品集的时候需注意不要与C端画像整理混淆。


我们要做一个行业可以不用管他/她是谁,也可以不用管他/她有什么样的社会属性,比如做CRM最重要的在里面起到作用的是,客户关系管理和销售等; 比如做OA系统,就是一般的员工,等级,职能等等,可以看出行业属性(职业属性)决定了他的用户画像的精准度,一定把这个人拉到行业里去研究,研究社会属性没有价值。这是C端和B端做用户研究最大的区别。


2.4 B端产品用户调研


2.4.1用户调研的作用/目的/重要性


01. 了解产品业务需求定位:可以帮助了解目标用户的信息,从用户的角度:未来使用你产品的用户,他理不理解你的产品想要表达什么,你的产品讲了哪些功能。因为很多好的产品我们打开它第一眼就知道要干什么,是给我们做什么的。同时站在设计者的角度:怎么可以把这个产品设计清楚,比如做一个CRM客户关系管理系统,具体管理什么我们是不清晰的,想要清晰就需要通过用户调研这个过程给它展开。


02.解决功能信息架构问题:可以帮助设计师更明确需求功能得合理性和优先级,比如页面标题的使用、标题的层级、需要在信息层级清晰得情况下体现出来,而明确信息层级同样需要通过用户研究体现出来。


03.让可用性测试更加准确:可以帮助锁定合适的测试用户,来测试我们的产品使用程度,使用体验是不是好,这时需要要找目标用户去测试,比如小米有品针对群体是米粉,唯品会针对的群体是职场女性,而不像C端找所有的人去测试。


04.解决团队协作沟通问题:确定用研目标可以有理有据的把设计目标和产品经理的意见达成共识,因为未来一定会多次和产品进行PK,像诸如设计师组件化没用好这些理由也不会是pk点,确定用研护镖可以更好的深度去理解原型图,可以把团队协作沟通的问题解决好。


2.4.2 用户调研的方法


01. 确定研究对象:首先拿到一个产品,拿到一个需求的时候,这个需求通常很模糊,比如只告诉做一款CRM客户关系管理系统,但汽车行业,服装电商行业,保险行业,银行金融等等,都有CRM客户管理系统,不同行业的CRM肯定是不一样的,这时候,比如要做金融的CRM,那研究方向就已经确定了,金融CRM就可以确定去研究金融行业的业务链,业务流程,具体找哪些用户群体,可以根据以往的惊经验和产品的目标去确认。


02. 找研究方法 : 研究方法分主动和被动,我们通常用的方法是被动方法,比如自我报告法:当这个产品产生了一些数据,我们从后台可以拉取这些数据的时候,通过这些数据去分析,这是被动的方法,这个被动的方法所有项目都可以用。而主动的方法,就是观察和采访,主动去找用户去找关联度。


03. 获取到数据 : B端和C端区别之一是提高效率,它要产生的结果只有一个结果,就是减少成本,任何B端的系统都是为了实现这个目标,提高效率和减少成本。所以获取数据,研究数据的方向不能偏离搞错,用户研究的方向不要搞错。比如我们以用户为中心来设计,就会认为用户的操作体验感是第一位的,其实不对,放在第一位去考虑的应该是以系统的最优化,提升效率为第一位,而用户也可以为这件事情做一些改变而找到平衡点,数据导向得提高效率,减少成本有时会大于用户的操作体验。


04. 用研行为: 刚才前面提到的这些注意事项,到底应该找什么方法去得到这些数据呢?第一我们可以通过后台数据比如通过百度统计等系统来获得;第二通过问卷法发出一些问卷,用户可能散落在全国不同位置;第三可以通过用户定性访谈来获得;第四可以通过用户旅程图来决定用研行为。


05. 分析调研结果: 研究结果不是为了放到我们的B端作品集里的,而研究结果一定是为了去定性、定量、让数据回归到产品功能本身。同时经常问自己这些问题,去根据研究结果和问题进行匹配思考,比如研究了那么多,用到了用户画像得出的结论了么,用到了哪里?在项目中能举个例子吗?采用什么样的视觉去实现了用户体验要素?


2.4.3 B端用户访谈模板


2.4.3.1 用户访谈概念:


01.确定访谈目标:了解目标用户群体,通过访谈信息来进一步构建所需要的用户画像,从而确定设计方案与功能优先级。02. 定性/定量访谈目标:将这些目标定量、定性,选择不同的访问对象,构建不同的角色画像。比如问销售的用户画像,要找不同的访问对象,销售总监,普通实习生等等,三到四个角色,样本越多,用户画像越准确。03. 访谈过程:提前把问题写出来,拿着问题去聊,用录音设备,记录表格,一个提问,一个记录,分开后记录比较准确。04.访谈结束:要做信息汇总,要做分析建模。分析建模就是将信息最终变得有意义。


B端用户访谈模板有30个问题,这30个问题决定了我们的用户画像的精准度和产品的用户画像的价值。用户访谈会问些什么问题呢?当我们调研的时候把问题写出来的时候,就已经解决了一半的问题了。


2.4.3.2 B端用户访谈30问


01、基础特征


岗位:你是从事什么岗位的?是总监还是普通职员?目的是为了知道不同的权限的使用者,进而就可以在系统中设置这些权限。

职责:需要获取到用户不同的需求,因为每一个岗位有不同的职责,他们的需求点也是不一样的。根据这些不同的需求,我们在界面中得动态仪表盘部分,就可以根据不同职责来显示不同的内容。

姓名:可以让访谈记录得到更加真实的体现,目的是可以获得产品的一些真实的基础字段。

年龄:是用户认知和经验度的体现,用户的年龄可以代表他们对行业的认知,和整个企业流程的认知程度,一般性理解,用户的年龄越大,那么他的经验越丰富。

教育:指用户是什么学历,目的是为了了解用户的经历与熟练程度,通常认为,用户的教育越高的人,他们往往使用软件操作的熟练度会越好。

位置:指用户在什么地方来使用,目的是知道了场景与优先级,用户是在写字楼里还是精英场所来使用我们的产品。因此得出基础特征是要得出这些结论,得出这些结论进而反馈到产品中去。


02、行为接触点


使用频次:不同的岗位用户使用功能的优先级是不一样的,用户使用频次越高的功能,这个功能的优先级就越高。了解之后,那在下次迭代的时候就需要把重要级别的功能放在易操作的区域去体现。比如这个重要功能就是一个icon,那么把它放一个快捷入口。

使用时长:也能代表功能的优先级,用户使用时间最长的功能,代表可这个功能优先级很高。

时间段:用户在什么时间段使用的是最多的,我们就知道了这个功能的活跃度,这个数据指标,主要和技术有关,我们可以从后台数据去获得。

使用设备:用户使用设备兼容的优先级,平时用户用什么设备,再访谈过程中,需要问具体使用电脑的分辨率,屏幕的尺寸,屏幕的比例,都可以去实际的调研一下。在我们做B端界面选择屏幕尺寸的时候,可以采用结合实际情况用户使用的屏幕分辨率尺寸来设计界面。

相关软件:用户平时的操作习惯和流程是什么,还会使用其他软件吗?比如他们还用什么其他的竞品,可以继续问用户其他的竞品哪里比较好,哪里是亮点,那最终得到的目标就是用户的操作习惯和流程,这些也可都可以反馈在我们产品中。


03. 使用环境


碎片化时间:主要解决用户场景的问题,比如汽车4S店销售,当你去买车时,销售人员会问,你会买什么样的车,会记录你的年龄,用车习惯,用车时间,姓名,预算,都会记录,销售通常会用一些碎片化的时间去记录。此时就可以得出两个结论:1.我们在设计的时候是否可以考虑让销售充分利用碎片化来进行这些信息的录入,而且方便他的录入,比如他本来只有电脑端,电脑端是一个完整版的功能,我们能不能给他设计出一个移动端来,让销售不用回到电脑屏幕中就可以去记录这些内容。2. 记录时也有两种记录方式,是客户讲话的时候销售去记录还是这些事情做完之后销售再去记录。通过这样的行为会得到这样不同的设计结果,比如有人问你们公司为什么要做B端的移动端设计?以上就可以有理有据去解决销售的场景问题。


用户的操作环境是什么:主要解决视觉体验问题,用户是白天操作还是晚上操作,是在强光环境操作还是弱光环境操作。这些都应该是考的点。比如B端使用的ATM机,应该设计成白色还是深色模式,我们知道一般都是深色模式,是因为通常是室内,它和光线有关系,如果是室外的取款机,四周又没有遮挡,如果还设计成深色,肯定是看不清楚的。比如HMI车载系统,白天模式开了深色,一定会看不清楚。所以要提前判断使用深色模式还是浅色模式,也需要考虑在设计的时候使用什么样的色彩和色调,在室外使用还是室内使用,如果对色彩不怎么挑,那也可以使用VI色,这样一来视觉的保障色就确定了。还可以确定在使用周期时间,要多长时间完成一个操作,应该使用什么样的方法可以尽快完成一个操作。通过用户的操作环境可以得到以上信息。


是否有平行事件:用户在做这件事情的同时,他是不是需要做其他的事情,要得出至少两种平行事件,得到的结论是,我们的界面是不是需要把某些功能整合在一起,因为用户经常是需要同时做这两种事情,同时去打开这两个功能,通过这样的反馈可以把同时使用的这两个功能结合到一起,通过访谈可以得到这样的依据,来进行功能的整合。


04. 主动询问用户观点


用户的驱动力: 去了解激励因素,就知道了什么功能应该做完善,什么功能并没有那么重要。比如汽车销售为什么要录入信息,因为可以增加汽车的销量,录入越准确的用户信息,他的销售量越高。也就是用户做这件事情,他的原因是什么。


用户遇到最难事件: 在工作中或者用户使用过程中遇见了什么样难的事情,这件难的事情,就是产品的痛点,就明白了当前产品迫切需要什么样的功能去帮我们设计师来解决当前产品痛点的问题。


用户遇到最飒事件:他在使用过程中最满意的是什么事情,就是爽点是什么事情,那些产品中解决了用户很好的问题的部分,去把产品更好的放大,让用户继续使用。也就是通过访谈我们知道了产品的爽点是什么。


用户担心事件:在他们使用过程中担心的是什么,我们也要要了解这些隐藏的问题.


用户期望事件: 用户希望得到什么样的改善,最终的目标是想解决什么样的问题,到这一步其实所有问题目前都没有答案,我们可以继续访问,先做记录,不做最终的答案.


问用户目前状态: 我们可以了解待解决的问题,通过产品想解决什么问题,进行收集需求;用户对于产品升级有什么小期待,进行收集需求;通过用户的反馈目前产品的哪些问题,收集到目前反馈的问题;以往问题是否有效解决;进行收集反馈。觉得不错的同类型产品有哪些,通过了解竞品情报,我们可以竞量多问一些 觉得不错的竞品有哪些;目前产品有哪些地方很好,很好的地方要保持,有的产品升级后,以前特别好的功能突然消失了,改了没必要,好的功能保持就可以;前产品有哪些地方不好,我们去优化不好的地方;以往问题是否有效解决,当有问题需要解决的时候,用户的问题是否是通畅的。通过看用户如何反馈,我们可以了解功能倾向,了解整个流程是否通畅


05. 聊生活

发觉人性闪光点,提升产品差异竞争力,1、问目前的生活状态,婚姻状态,有没有孩子,接送孩子的时间,平时有什么爱好?什么爱好不错?发觉人人性的闪光点,好的不好的产品都有共性,B端产品中视觉的倾向是什么?比如有插画,温馨的语言提示,通过什么样的情感设计可以照顾到每个人的生活。


2.4.4 B端用户访谈得出结论


如何判断功能在用户那里好还是不好?前面所有的都只是在记录,现在才是在做判断,判断的第一件事,是做定量的整理,所有的问题都收集到了,也记录到了,至少需要有两个样本,去做定量整理。

2.4.4.1定量整理:行为


第一步是行为的总结,量级的总结,把记录的问题点、功能点和关键词放到表格里面,经常出现,迫切需要解决的是什么问题,较少的问题是什么,偶尔的行为问题是什么,因此偶尔的优先级就不高了,主要关注经常遇到的问题点、功能点和关键词。


2.4.4.2 定量整理:特征


把每个角色按照以下表格里的的特征进行定量的描述,这时候仍然不能找出它的共性点,但已经把用户的特征进行分类整理了,定量之后再去定性。


2.4.4.3 定量整理:特征/角色/流程


这个角色名称是一个具体的名字,比如王某某。以下这张表:可以看到在我们的系统中有哪些的权限,有哪些的角色,他们的需求是怎么样的,这是一个完整的用户画像。用户画像是一个结果,是通过用户访谈的形式完成了用户画像,并不是被动的接受数据信息得出的,所以通过用户访谈的形式进行定量定性分析得到的结果是最准确的。


3.1 建立情绪版


3.1.1 情绪版的概念及作用

本质是将情绪视觉化,情绪版并不是玄学的东西,它确实可以通过图片找到对应的图形元素,因为图形(照片)是可以表达情绪的,比如看到一张照片会感受什么什么情绪:热、冷、饿、干渴、安静、压抑、神秘、恐怖、失落、沮丧、速度、力量这些都是情绪相关的关键词。


情绪版是一个特别快速能和产品,我们的团队包括设计团队进行沟通的一种方式,比如要设计一个界面,需要几天才能设计出来,但我想提前知道一下未来界面设计成什么样子,那就先做一个情绪版,让大家知道,找的方向是什么,这样适合与大家及时的沟通,大家也会明白产品将会做成什么样子,达成产品的最终设计定调。


3.1.2 怎么建立情绪版


01. 提炼关键词:获取本次产品设计中所要实现的产品3-5个必要的关键字词组,其中包括交互或视觉目标,通常由一些比较抽象的形容词组成。比如:在做的产品是医疗行业,那么医疗相关关键字词组是:生命/健康/安全等。


02.关键词发散:通过获取到的关键词的基础上,发散出来一些新的词语,这种发散词汇,不是简单头脑风暴产生的,而是要有目的性的进行提取,要更加的具体。比如刚才举例医疗行业,生命可以继续发散出血液、器官等衍生关键词。


03. 搜索图形: 对之前总结出的几个关键词在图库中进行查找,也可以在直接在behance里找别人收藏好的情绪版图片直接用,效率可能更高一点。


04. 制作情绪版: 搜索大量图片后,挑出我们需要的进行整理,采用一种拼贴方式进行设计排版,拼贴出来需要得到需要得到的色彩,构图,质感和字体。


05. 得出结论: 在图形、色彩、字体、质感、构图,以上五点,得到合适的设计方案,快速与团队进行沟通,直观表达产品清徐,达成产品的设计定调。产品调性(企业调性)其实就是用企业的方式把故事讲述出来,是一种通过情绪版方法来讲故事的方式。


3.2 品牌三元法


3.2.1 品牌三元法为什么逐渐替代情绪版


品牌三元法是通过品牌三板斧模型得出的一个确定设计主风格的一种新得方法,品牌三板斧模型可以总概为用户调研关键的三个维度,一目标用户是谁?二产品服务是什么?三对于目标用户来说,你的产品服务有什么核心价值。当在回答完这三个问题以后,我们其实就已经清楚我们的品牌定位是什么了,因为它的核心优势是比较明显的,这样我们就知道我们将来会面对什么样的人群,去怎样去宣传它的卖点,同时做出产品的差异化。


通过这几年得工作案例设计实践,在确定设计主风格时,情绪版方法逐渐有被品牌三元法替代得趋势,因为情绪版这种把抽象的词不太好表现的词,翻译成图片的方式,比如刚才提到医疗行业的关键词是生命,健康,安全的,设计师找到很多这种相关的图片,挑出来后从这些图片里面找到一个共同的规律,最后去设计。这里面就有两个问题,一个原因是关键词非常的平,生面,安全,健康,很难更准确的表达衍生关键词。另外一个问题是它非常局限设计师的创意,因为它是从一些现有的图片里面然后去挑,所以很多设计师就反馈现有的方法不是很好用,比如当我们想到安全这个词,可能所有人想到都是特别绿的感觉,或者干净这个词,就会统一联想到白色这个画面,大家从一开始想法就差不多,所以它很难体现出创意。所以由于情绪版严重限制了自己的想象力,没办法把产品核心的气质表现出来,虽然情绪版正确但是是一个平庸的结果,大家没办法记住的结果。


3.2.2 如何应用品牌三元法


01. 理性层面(业务层面),传递产品理念:获取本次产品设计中体现业务层面,可以传达产品理念得5-10个关键词,对应的放在左边。


02. 感性层面(人文层面),营造产品氛围:主要体现这个产品给用户带来什么好处,宣传的角度是什么。获取本次产品设计中体现人文层面,可以传达产品氛围的5-10个关键词,对应的放在右边。


03. 个性层面(气质灵魂),创造独特风格:结合理性的业务层面和感性的人文层面,来创作出什么样的画面,和独特风格的感觉。同样总结出5个左右的关键词,放在下边。


04. 结合以上三个维度,提炼主视觉画面:当出现这三部分词的时候,经过思考或者大家一起头脑风暴,可能一开始想到的比较浅,但最终一定能想到一个最终关键词或者特别符合我们这个产品气质的画面,因为以上三部分得出关键词也都是经过品牌三板斧模型推演出有关联的关键词,想到一个符合产品气质的画面并不难,再得出这个主视觉画面后,这就是最终产品调性的主视觉,既符合产品定位,又具有独特的差异性。


05. 传达产品,用视觉语言讲故事:接下来,当这个主题、主视觉确定了以后,在看怎么样用具体的视觉设计技能,去传达我们的产品,也就是用视觉语言来讲故事,具体注意三个方面,一是表像,元素要符合这个视觉主题,二是关联,元素之间要具有关联。三是隐喻,用视觉的手段含蓄的表达产品的一些特性。比如云计算的一些产品,做得比较复杂每一个图标上都有一些曲线切割的画面,这样做的原因其实不是为了炫技,它是为了表达云计算弹性可扩展的特性,好比拍电影,中国人讲究隐晦。


4.1 色彩规范


4.1.1 选色

在系统色彩中,以Antdedign为例,系统色彩里包含了很多不同的色调,但不可能用到这么多颜色,这时要应用选择几个颜色,选几个我们应用的颜色。第一步要做的就是选色,选出应用色彩,这个应用色彩也就是我们建立得视觉规范中的基础色板,在选色时候需注意,要有有明确的心理预期,比如医疗行业中常用蓝色和绿色,就是符合预期的颜色。在基础色板里选择调色,应选择两个相同级别的蓝色和绿色;基础色板里选不同颜色时不要超过三个级别的跳跃;当选择一个确定的颜色时,可以选择草绿或者青绿色来作为辅助色;在基础色板里,最顶部的颜色最适合做背景色,中间的颜色适合做按钮色,底部的颜色适合做状态色,或者小面积文字的填充色,其余就是搭配过度的作用。再比如零售、比如金融行业的产品,会选择不同的颜色,那这些颜色代表了什么,是不是会和企业的VI色是有相符之处,这些都是我们去要考虑的。


4.1.2 注意色彩的两个特性


01. 注意品牌性:体现特性和传播理念、价值观:比如宜家,我们立刻会想到的是黄色和蓝色。比如京东,我们会想到红色。如果是饿了么,我们会想到蓝色。这些都是标识性的色彩,体现和传递的就是品牌理念和价值观。这些颜色一定不是随便选的,比如,宜家的黄色和蓝色,其实是瑞典的国旗的颜色,代表着宜家的来源地来源于瑞典,因为瑞典是一个很强调简约设计的国家,贯穿始终是在强调它的的价值观。一些关键行动点:比如选中的状态,按钮的颜色,在很重要的地方用主色表达,这就是在体现B端的产品的色彩价值观和企业价值观的地方


02. 注意色彩的功能性:色彩需要体现功能有明确的信息以及状态含义,色彩代表它独特的含义,比如成功色,通常会选择绿色,再系统色板里,青绿草绿都可以选。比如出错/删除/失败用红色,表示警告警示。比如链接要用蓝色。


4.2 图标规范

画图标要注意图标的识别性、统一性和独特性。图标首先要一眼看出来表达的含义,其次是图标设计图标的大小,线宽粗细,圆角大小,图标风格等这些都需要统一,最后最好可以体现出图标的独特性,独特性就是差异化,这也是品牌三远法得核心,塑造产品的差异化,具体分析方法也可应用在图表设计当中,比如根据品牌基因进行延展,也可根据主风格主视觉设计定调,设计出独特风格且符合产品定位得图标应用在产品当中。


4.3 文字规范


4.3.1 字体家族

在B端页面中字体的显示顺序,有固定的一套代码模式,可以理解为,比如有的用户电脑没有平方字体,所以会显示出冬青黑体,来替代平方字体的设计稿,如果没有冬青黑体,就用微软雅黑替代显示,字体家族中,从左到右代表了字体显示的有限顺序,平方、冬青黑体、微软雅黑、黑体、宋体,中英文都是。


4.3.2 主字体

在系统中有中文常用PingFangSC、微软雅黑、思源黑体;英文常用San FranciscoUI(SF字体)、Helvetica Neue、Arial


4.3.3 大小与行高


方法一:在Antdesign中规定的,比如字体大小是14px,行高就是22px。规范里最小字体是14px,但可能有注释字体,字号最小是12px。表格里的内容是按照表格里的行高来约定的,与字体行高无关,这个前提是,不在表格里内。当没有出现文本字体,表格里的字体的时候就需要去设置字体的行高,Figma里默认行高是140%,比如14px字体,行高就设置成22。这是Antdesign里的规范,但不是唯一的规范。需要注意的是,如果使用一个标准就全部使用一个标准,这个需要把选中文字段落进行调整行高。


方法二:是当按倍率去算的行高规范,方法步骤是先调整好行高,去改变字体大小,比如无行高时,1/100%/1倍行高,注意加上%号;紧凑行高,1.3行高/130%;常规行高1.5行高/150%;宽松行高,1.7行高/170%。


4.3.4 文字的层级关系

辅助文字12px、正文(小)13px、正文(常规)14px、小标题(16px,小标题是相对于14号字出现的)、标题18px、主标题20px


4.3.5 字重

比如常用的苹方有6个字重,但在平时的设计中根本用不上。中文环境6个字重在实际显示并没那么好,常用两个字体,萍方常规体400(常规),苹方中黑体500(粗体)。而英文可以用粗体600。


4.3.6 字体颜色

在深色背景下、和浅色背景下不同内容的色彩透明度不同,具体透明度用百分比显示。在彩色背景下或者在不同颜色之下,字体应该使用白色还是黑色,应该按着规范严格使用,难点在颜色相近的时候选择白色还是黑色,也需按照规范执行。


4.3.7 文字对齐关系


文案类对齐:页面的字段、段落较短标题、需正文左对齐


表单类对齐:保证整齐适合阅读,冒号对齐法找到中间的冒号,(左右对齐),如果全部使用左对齐或者右对齐会更乱。左边一般最长字段六个字。前提是中文环境,不是国际化。冒号左右要留多少像素:8px的倍数相关值,4(窄点)、8(正常)、12、16(宽一点)都可以。


数字类对齐:日期,居中对齐;年龄,居中对齐/左对齐;非固定的数字:价格,采用右对齐,因为右对齐很容易看到价格的多少,哪个超出的更多,就越贵的,更容易区分数字的多少。


4.4 层级规范


层级规范得核心是对信息的间隔和区分,信息的区分间隔要用偶数8的倍数。具体可分为同层级的区分,用色块(比如气泡)、边框(栏目之间抖索狂等)、线段来进行区分。错层区分,用弹窗(背景变暗)、边框阴影(阴影的出现是拟物化的出现,当物体离它的光源越近,比如高度越高,它的阴影就越大越宽。离它的底部越近,阴影就越小,比如下拉框、搜索框、日历控件、弹出窗口来区分)。


这里需注意,关于投影,再前端角度考虑尽量不要用太多的特效滤镜来设计,因为在B端网页中,浏览器的兼容性不好,比如用ie浏览器就根本看不到这样的效果,如果用谷歌浏览器能看到,用safri浏览器能看到,但在火狐下等又会看不到,想要都看到就需要兼容很多代码,需要前端加很多代码实现兼容性的效果,很增加前端的工作量,所以在B端很少用非标准型的滤镜代码使用,虽然可以实现,但一般不太用,一般就是变灰、变深、变透明度最简单的方法实现。不同于移动端,因为IOS用的是原生的开发,所以不存在这个问题。


从接触B端设计两年以来,第一次详细梳理B端设计的系统知识点,从B端产品设计的工作流程,到B端设计前的准备工作,交互设计的七大定律,B端产品业务调研,用户访谈研究方法,精准推导B端用户画像,到B端产品主风格的设计定调,进而深度理解B端主流组件库的视觉规范,为B端产品设计做出了充分的指导作用,对比我之前零散的知识记忆,这次B端设计前的准备工作梳理,也更加深刻的由点及面的形成了系统的框架,也重新认识了B端产品的分析方法,区别于之前一直从事的C端设计工作,也真正对B端和C端在设计思维上有了本质的区分,同时也锻炼了我的归纳能力和演绎思维和系统思维能力,期间参考资料有《B端设计研修》、《用户体验要素》、《信息架构设计》,谢谢阅读,希望对大家也有帮助~thanks


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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


如何定义用户体验研究方法

ui设计分享达人

用户体验研究可帮助企业了解目标受众的需求和行为,证明或反驳潜在假设,使他们不会根据虚假信息继续前进,并根据数据战略性地发展他们的产品。最终,它帮助他们创建和维护能够吸引和留住客户的产品,从而使企业取得成功。但是,您实际上如何确定用户体验研究项目的最佳方法?

本文分享了四步框架的概述:(1) 确定您想学习的内容;(2) 确定您要针对的对象;(3) 考虑时间表、预算和团队;(4)选择方法。

1. 确定你想学什么

让我们从第一步开始——确定你想学习什么。此时有3个问题:

您是在尝试探索想法还是评估想法?

探索性研究,也称为生成性研究,通常发生在产品设计和开发过程的开始阶段。它提供了对客户问题、需求和动机的深入洞察,帮助您确定构建什么、如何构建以及目标对象。

评估研究通常发生在产品设计和开发已经开始或产品发布之后。它评估产品的功效和可用性,帮助您确定痛点和改进机会。

您是在收集与新产品还是现有产品相关的数据?

如果您正在尝试产生想法并弄清楚如何塑造新产品,那么探索性研究将是最合适的。

如果您正在尝试确定如何改进和改进现有产品,则评估研究将是最佳选择。

这是一项独立的研究工作还是更大项目的一部分?

探索性研究通常是在推进产品创意之前自行进行的。

评估研究活动往往是在正在进行的设计和/或开发工作的背景下进行的。

2. 确定您的目标对象

现在让我们进入第二步——确定你想要定位的对象。这是该过程的关键部分。只有与合适的人一起进行研究,您的研究见解才会有价值,因此您需要注意寻找能够提供您所需观点的参与者。此时有3个问题:

谁是目标受众?

定义你想要接触的人的特征。例如,您的目标受众可能是向消费者销售产品或服务且每月在数字广告上花费不到 1,000元的小型企业的所有者。

您是否已经可以访问此受众群体?

如果您正在对现有产品进行研究,您可以利用现有的客户群。

如果您正在研究新产品或尝试接触新的客户群,则需要探索其他选择来接触目标受众。

如果没有,你怎么能接触到有代表性的受众?

您可能会考虑使用自助招聘工具,如用户面试或与招聘机构合作。

3. 考虑时间表、预算和团队

现在让我们进入第三步——考虑时间表、预算和团队。所有项目——不仅仅是研究项目——都有限制,重要的是在考虑这些限制的情况下定义你的研究方法。不过,约束不一定要受到限制。它们实际上是一个有用的工具,可帮助您专注于如何利用可用资源来产生最大影响并提供最大价值。

时间线

对于您的时间表,您想确定您是否在特定的截止日期前工作,例如即将举行的董事会会议或产品发布。

预算

对于预算,您需要确定哪些资源可用并且可以分配给该项目。当您考虑预算时,不仅要考虑人员成本,还要考虑任何补充研究成本,如招聘费用、参与者薪酬和工具,这一点很重要。

团队

对于任何团队限制,确定您是否具有研究能力以及这些能力是什么。您需要考虑您的团队中是否有可以进行研究的人员,或者您是否需要引入外部支持。即使你有一些内部能力,这些人也可能没有能力在截止日期前完成工作。

4. 选择方法

现在是该过程的最后一步 - 选择用于收集数据的方法。在这里,您可以真正深入研究并弄清楚自己要做什么。有两个组成部分会影响您的决策——范围和数据。

范围

对于范围,您首先需要确定是要使用单个方法还是多个方法。利用多种方法可以收集更广泛、更细致的数据集,但也更昂贵和耗时。您还需要确定是要进行长期研究还是需要立即获得反馈。

长期研究将是最适合的探索性研究,你需要建立的观众基础的了解,然后才能继续前进。

即时反馈 最适合评估性研究,在这种研究中,您希望在继续之前获得投入的正在进行的工作。

数据

对于数据,您首先要考虑哪种方法最适合目标和受众。

如果您正在探索新产品的想法,您可以从采访开始。如果您正在收集有关原型的反馈,并且需要尽快从受众那里获得反馈,您可以利用简短的未经审核的可用性测试会议。

您还需要考虑是要捕获定性数据、定量数据还是两者兼而有之。如果我们回到前面,定性数据可以帮助我们理解原因,而定量数据可以帮助我们理解什么。

您使用的方法将取决于您尝试获取的信息类型,以及与您合作的时间表、预算和团队。

每个研究项目都是独一无二的。但是定义方法的过程在不同项目中是相似的。如果您对进行研究感兴趣,我鼓励您利用上面概述的四步框架来帮助您找出最佳的前进道路。一旦您有了基本的构建块,您就可以继续制定更精细的研究计划,其中概述了具体的假设以及您将如何执行工作。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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

多级菜单设计最佳实践

ui设计分享达人

导航和可查找性是用户体验设计的核心方面。如果用户无法找到他们需要的东西,他们就会感到沮丧并可能决定去别处寻找。在信息架构特别复杂的网站上,多级菜单是提高导航和可查找性的有效方式,从而提供有效的网络体验,促进产品信任和促进转化。

由于产品和使用它们的设备千差万别,因此没有一刀切的解决方案。但是,有一些经验法则可以帮助您构建多级菜单,从而增强在不同屏幕尺寸上的导航和可查找性。

不同尺寸屏幕的设计技巧

一个好的多级菜单应该通过以清晰、直观的方式呈现信息,让用户快速找到他们需要的信息。在我们进入特定于尺寸的指南之前,让我们看看一些适用于所有菜单的做法。

使用不超过两级的子菜单。任何多于两级的子菜单都可能使用户感到困惑。保持导航相对平坦可以提高用户的可查找性,并减少记住他们所在位置所需的认知负担。如果站点的页面结构很深,请考虑在密切相关的页面顶部添加本地导航菜单。例如,设计复杂业务支持产品的 Zoho 在每个产品页面的顶部放置了一个特定于产品的本地菜单,就在主菜单的下方。虽然顶部的主菜单列举了 Zoho 的核心产品,但本地菜单提供了对包含更详细信息的页面的访问,例如用例和定价。

用图标标记子菜单。通过始终明确何时有可用的子菜单来管理用户的期望。熟悉的选项包括一个小的下角图标或三角形图标。此外,请考虑在子菜单打开时翻转指针图标。

直观地组织信息。确保信息的层次结构与用户的心智模型一致。例如,在电子商务网站上,考虑购物者是否更有可能期望按品牌或商品类型组织商品。如果用户单击“鞋子”类别,他们是否希望子菜单显示运动鞋、凉鞋和靴子的选项?或者他们是否希望看到一个子菜单列出商店出售的每个品牌的鞋子?

确保用户始终知道他们在哪里。始终突出显示主菜单上与用户所在页面相对应的链接。如果当前页面在子菜单中,则在主菜单上也突出显示子菜单链接。

保持简单。菜单不是进行巧妙文字游戏的地方;确保链接标签具有强烈的信息气息。这意味着保持标签名称简单明了和描述性,以便用户在点击时立即知道他们会找到什么。文案越清晰,用户就越快找到他们需要的东西。

优先考虑可读性。使用简单的无衬线字体并确保项目周围有足够的间距以避免混乱。确保背景足够不透明以遮挡菜单后面的任何内容。但不要忽视网站的整体品牌。虽然可读性是第一位的,但要确保菜单的样式与网站的其他外观和感觉相得益彰。

使点击变得可访问。为了让有精细运动控制障碍的用户可以访问菜单,请遵循 Google 的Material Design指南,并将可点击元素的大小设置为至少 48 x 48 像素。

网站菜单设计技巧

即使移动趋势日益增长,客户可能需要功能齐全的网站的原因仍然很多。例如,他们可能需要在网上提供比移动网站可行的更多信息。或者他们的研究可能表明他们的用户只是更多地依赖台式机。

网站菜单应该易于浏览,提供清晰的交互,当然还有响应性。它还应尽可能与移动网站保持一致,以便为回访者提供直观的体验。

菜单应该在点击时打开,而不是悬停。您需要做出的最基本的决定之一是用户将如何访问站点的菜单。将指针悬停在菜单上是否足以触发菜单的外观,还是用户需要单击它?

悬停方法很流行,但点击打开是确保菜单在所有设备上可靠、直观地工作的最佳方式。单击方法使网站能够在传统的计算机显示器和类似的触摸屏上更一致地工作,并避免悬停方法出现的许多问题,包括:

a) 狭窄的悬停空间。悬停空间是鼠标在保持菜单打开的同时进行导航的路径。如果它太窄,菜单可能会在用户到达他们想要的链接之前消失。

b) 意外打开。如果用户在前往页面上的另一个位置的途中尝试浏览悬停菜单,则很容易无意中打开悬停菜单。设置一个短暂的延迟可以解决这个问题,但当用户确实想要打开菜单时可能会导致不适。

c) 触摸屏上的用户体验不一致。悬停菜单在触摸屏上不起作用。他们需要一个代码来检测触摸屏并切换到点击打开;随着笔记本电脑和平板电脑之间的界限越来越模糊,这些变通办法可能会过时。

d) 关于什么是可点击的问题。使用悬停菜单,用户在尝试单击之前并不总是知道父链接是否可单击。这与直觉相反。

e) 可访问性。悬停菜单可能会给使用屏幕阅读器或通过键盘导航的用户带来问题。

选择正确的布局:下拉菜单与超级菜单。如果网站使用传统的菜单布局(位于页面顶部的水平菜单栏),您可以考虑两种类型的子菜单:标准的单栏下拉菜单或多栏超级菜单。

如果父类别包含的链接少于八个,请考虑使用下拉菜单。如果下拉菜单足够长,需要垂直滚动,您应该考虑以不同的方式组织信息——也许作为一个大菜单或通过细化父类别。

超级菜单是一种嵌套菜单,通常使用可以扩展浏览器宽度的宽布局。如果子菜单包含许多可以按列分组的不同链接,您应该使用这种类型的菜单。通常,您会在大型电子商务网站上看到这样的菜单。

设计大型菜单时,请考虑以下事项:

a) 添加图像或图标,使信息更易于浏览。

b) 添加标题以对相关页面进行分组。

c) 如果类别名称不言自明,请添加说明。

大型菜单在移动设备上可能难以阅读和导航,但有时在更大屏幕上用户体验的改进使得为移动设备重新配置信息而做额外的工作是值得的。

添加清晰的悬停状态。使用点击打开菜单,包括所有可点击元素的清晰悬停状态,会使户确信链接处于活动状态。您可以使可点击区域的背景稍微变暗以指示悬停状态。只要确保悬停区域与可点击区域匹配。如果测试表明用户需要更多指导或上下文,请考虑添加更多描述性标签名称或工具提示,只要它不会阻止任何重要的内容。

单击以关闭子菜单。当用户点击别处或打开另一个子菜单时,通过关闭菜单来保持直观。这就是下拉输入字段在表单中的工作方式,因此大多数用户会觉得这很熟悉。

在桌面上启用键盘导航。并非每个人都使用鼠标进行导航,因此菜单应允许用户使用键盘进行导航。这意味着所有链接都应该具有不同的焦点状态,以便用户可以一目了然地看到它们的位置。通常,深色框可以很好地指示聚焦状态。

移动屏幕的设计技巧

如果您尚未设计移动优先,则需要优化手持设备的菜单。传统的菜单布局在非常小的屏幕上很少能很好地操作——如果你只是缩小桌面菜单栏,没有人能够阅读它。

简化主菜单。由于智能手机屏幕很小,您在桌面菜单中找到的大部分信息最初都必须隐藏。主菜单栏必须非常简单,但最好显示最重要的链接以提高可查找性。您可以将菜单栏固定在屏幕底部或顶部。

添加菜单触发器。由于移动菜单的全部或部分可能被隐藏,用户需要一种方法来找到它。在菜单栏或易于触及的浮动按钮中添加汉堡图标是一种流行的解决方案,许多用户都会认可。然而,汉堡菜单并不是唯一的选择。例如,如果您正在为年长的用户设计,则最好使用带有“菜单”一词的框。或者,如果您想让网站的功能更加突出,您可能希望将它们显示在顶部或底部的选项卡式菜单中。

将菜单放在侧边栏中。您可以通过多种不同的方式设计移动菜单。您可以使用全宽布局,适用于任何情况;底部抽屉,最好只有几个链接;或圆形菜单。一个不错的选择是使用带有深色半透明背景的侧边栏来遮挡页面内容,从而消除干扰,并允许用户轻松点击它以将其关闭。还可以考虑使用从左滑动的动画来避免不和谐的体验。对于侧边栏和底部抽屉菜单,请确保菜单可垂直滚动,以便在较小的屏幕或横向模式下不会有任何内容被遮挡。

允许用户轻松关闭菜单。用户可以直观地点击菜单来关闭它,但也可以考虑添加一个关闭按钮。您可以将汉堡图标变成 X 或在菜单的右上角添加一个。

对单个子菜单使用扩展部分。如果菜单只有一级子菜单,请考虑使用扩展部分。您可以将它们展开到父项下方,并使用不同的背景颜色来清晰显示。您还可以允许用户同时展开多个子菜单。考虑使用父项右侧的下角或三角形图标来指示子菜单可用。

用重叠菜单替换大型菜单和多个子菜单。如果您需要展开多个子菜单或重新配置大型菜单,请选择重叠方法:不要在父菜单下方或旁边展开子菜单,而是让子菜单替换父菜单。使用这种方法,您必须在除第一级之外的所有面板上都包含一个“返回”链接。对于顶级菜单,请考虑为父项使用直角图标或右箭头。

预打开子菜单。在小屏幕上,如果用户点击打开主菜单并且他们当前所在的页面在子菜单中,请考虑自动打开子菜单,以便用户了解它们相对于其余菜单项的位置。

总结

导航是客户体验的重要组成部分。用户不想进行寻宝游戏,也不想花更多的时间浏览菜单。如果他们无法轻松找到他们需要的东西,他们可能会放弃网站或界面,将他们的注意点转移到其他地方。

精心设计的多级菜单是具有复杂信息架构网站的关键组成部分。希望这些方法在各种用例中为您提供良好的帮助。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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


如何从0-1做后台,七步即可合理的构建后台页面

ui设计分享达人

因为后台是一个非常广泛的且深奥的东西,里面包含了太多的业务逻辑,而且每个产品面向的用户群体又不同,因此不可能说的面面俱到,但是我提炼的这七个步骤适用于大部分后台的一个宏观方向,对于一个没有后台项目经验的人去从头制作一款后台产品应该是非常有帮助的。





第一步:选择导航板式


导航是后台的主躯干,一切操作都需要在导航的指引下进行切换,目前常用的有两种导航,顶部导航与树状导航。



顶部导航板式


顶部导航是大多数Web端网站使用的导航模式,因为人的阅读视觉是从上往下,从左往右,因此,顶部是视角最先达到的地方,顶部导航可以让用户快速了解整个网站的主要内容结构,通常在营销级官网,内容浏览平台被广泛应用(例如京东,阿里云,站酷...)。


但是其弊端也是很显而易见的,因为屏幕宽度的限制,在小屏下,顶部显示文本内容有限,通常只有几个字符的内容,更多内容或二级标题则需要进行隐藏显示。其次因为人类身体结构,成年人的头颅约为4.5~5.5公斤,占据身体7.7%左右的重量,我们的颈椎承受了太多,因此人在左右扭头时要比上下点头更舒服。再者人类的眼睛是左右排布的,与生俱来两边的视线就优于上下的视线,顶部导航如果需要高频次使用的话会让用户非常的劳累。


优点:节约空间、可以快速吸睛


缺点:显示文本内容有限,不符合人体工程学,不方便查找





树状导航板式


在很多生产力工具上,后台网站上,B端产品上,阅读软件上,树状导航被广泛运用。树状导航是以父子层次结构来组织对象的,其优点非常显著:兼容性强,结构清晰,拓展性强等等。


先说兼容性,因为每条导航标题呈上下排布,因此一排只需显示一条标题,对于长标题与外文适配显得格外的友好。树状导航具有良好的层次关系,每一层内容都可以固定性的展示出来,不会像顶部导航必须鼠标悬浮才会显示子层级,不论是从便于梳理层次关系的角度来讲,还是频繁操作的简单化来说是都是完胜于顶部导航的。因为网页默认是上下滑动来查阅更多内容的,因此树状导航的拓展性方面碾压顶部导航,树状导航可以无限的向下拓展,就像书籍的目录一样,而顶部导航则只能显示寥寥无几的几个单词。


优点:可以展示更多的标题内容、可以不限制标题条数无限拓展、结构清晰易懂


缺点:占据空间较大,对于小屏可能需要频繁展开、收起导航






第二步:统一模块规则


后台的主要功能是支撑前台产品,管理资源,因此在逻辑与结构的梳理上应当与前台产品保持一致性,在布局的制定上应当遵循模块化、响应式、高效化的布局,以便于清晰地传达信息。


在后台的布局中,通常需要将数据统计、展示与列表、操作区分开来,达到看归看,做归做的原则,如果混淆到一起就会大大的提升认知难度和操作难度, 就像老款的汽车的仪表盘与中控操作区分开来,用户就会很快的上手,但是像特斯拉都集成在一块屏幕上就会让用户傻傻分不清楚,一时间难以找到相应的操作区域。因此模块化在后台则显得格外重要,每个模块、每个区域都应当赋予它独特且自始至终不变的属性,比如顶部的导航条,全局都在顶部区域展示,而不是这个页面在顶部,下个页面在底部。



导航模块:


后台的布局中,常用的模块就是导航模块(整个后台功能的结构提纲),总导航就是我在上文提到的两种,顶部导航和树桩导航,其他还有二级导航,面包屑导航等等,但是需要注意的是,导航就像路标,起到指引用户的作用,因此在全局的样式与位置应保持统一。





提醒模块:


顾名思义就是提示用户有新的消息,新的功能等等,提醒模块十分重要,因为它是实时性的,在设计提醒模块时应当遵循全局化、机动化,高亮化,动态化的规则,在常规状态下,提醒模块应该隐藏展示,不过多的打扰用户,但是如果在需要出现时,不论用户处于什么样的场景,提醒模块都应该在第一时间出现,并以醒目的方式告知用户。





数据统计模块:


数据统计通常是作为后台页面头部的存在,用户一进网站映入眼帘的就是整个产品或者整个项目的数据统计,数据是作为衡量某一件事情好坏的重要标准,数据也通常可以说明一个决策、一项任务的最终结果,在数据统计模块的设计上应该保持直观,一针见血的设计方式,比如股票的K线图,红涨绿跌,一目了然。





快捷操作模块:


有许多使用频次非常高的功能可能会贯穿全局,比如谷歌Email,不论在哪个页面,日期、Task功能都会在右侧进行显示,方便用户随时添加待办,记笔记等等。在后台中,有很多时候一个小工具就可以提升很大的效率,不必在来回切换软件、页面,有很多情况下,我们看到了一个东西,联想起了某一件事情,打算记录下来,但是退出这个页面再去打开记事本的时候发现已经忘记了(这该死的7秒记忆)。因此在有些情况下,缩短操作路径是一个不错的选择,而快捷操作模块也同样要遵循全局固定位置,不可随意变动的原则,如果违背,效果往往会适得其反。





内容展示模块:


信息展示,这个模块应该是最难搞定的了,不管是什么页面,信息都是重中之重,没有信息的页面那和没有肉的肉夹馍一样。内容展示模块不同于以上的模块是全局静止的,内容展示模块承载了后台95%以上的页面量,每一个页面都不同。因为后台页面大部分时间都是以电脑端网页的形式呈现,人在看电脑时通常会和显示器之间有30-50cm的距离,甚至可能更远,因此在内容的展示模块上应当给予友善的设计,比如加大文字之间的字间距,行间距,突出重要信息,以图文并茂的形式将枯燥的信息情趣化,没有内容的模块放置缺省提示图。





操作模块:


操作模块通常是与内容展示模块共同存在的,两者互相配合使用,凡是在页面中涉及到可以点击交互的区域统称为操作模块,操作模块应该全局统一视觉语言以及操作语言,比如,按钮样式及大小,开关样式,分页器摆放位置及样式等等。所有的操作模块表意性要强,让用户可以快速明白点击后的结果,如果遇到难以理解的操作功能,应该配合图标使用并给予操作引导。



编辑模块:


编辑模块就是通常说的表单填写页,编辑模块拥有新建,上传,输入,选择一系列的交互方式,其目的是为了让用户录入信息内容,因此在编辑模块的设计中应该按照相对应的前台项目理清顺序,从头至尾合理引导,引导语尽量简短并阐明要义。在操作的过程中,应当给予用户清晰、及时的反馈,并给予用户返回、撤销、清空、保存等操作。在表单的设计中,尽量将信息进行单行纵向排列,每一条信息各占一行,并保持信息对齐方式一致,保证用户视线流畅舒适。






第三步:统一操作/交互方式


电脑端常见的操作方式:



1.左键单击


鼠标单击是指鼠标点击UI控件后释放点击的一种交互行为,在整个过程中,用户点击和释放的坐标点是一致的,不可有移动的行为,点击是建立在悬浮动作之后的。左键单击是最常用的PC端交互方式,其作用是触发某一操作,整个页面由很多链接、控件组成,而鼠标单击则是触发这些可被操作的控件。




2.鼠标悬浮


Hover就是我们通常说的鼠标悬浮,当用户用鼠标指针移过UI控件时,UI控件给予的反馈效果就是悬浮交互方式。悬浮的主要功能是「拓展」与「指示」。在很多情况下,我们的屏幕无法将更多的信息进行展示时,通常会将众多功能收纳至一个控件当中,而鼠标悬浮则会触发控件将其隐藏的功能进行显示。鼠标悬浮的指示意义是为了让我们更好的理解控件的属性并提供及时反馈,比如将鼠标悬浮在文字上,鼠标会变成工字梁,将鼠标悬浮在可点击的控件上会变成小手表示可操作,悬浮至不可点击控件上会变成问号等等。


在实际的设计当中,我们可以为鼠标悬浮赋予更多的可能性,鼠标悬浮可以将未完全展示的文字进行展示,也可以对收纳起的功能进行展示,还可以进行许多快捷预览等等,但是鼠标悬浮最重要的功能则是为用户提供交互行为时的「及时反馈」。




3.右键单击


自从计算机操作系统诞生后就为右键赋予了「系统菜单」的交互意义,在不同的场景下点击右键所出现的内容是不一样的,这取决与网页与应用的开发者,在网页的设计中,将常用的快捷操作写入右键菜单,会极大的提升工作效率,因为右键的菜单弹窗始终在鼠标指针附近触发,因此对于用户寻找功能是非常友善的,但是需要注意的是右键的操作应该全局统一,在同一套产品中,右键的内容不应该出现过多的功能,否则会对使用者造成困扰。




4.拖拽


拖拽,顾名思义就是鼠标单击某一文件不放进行拖拽,拖拽操作相对与其他交互更具有操作感,因此在设计拖拽时,动画是一个必要的选择,动画是表现交互给予反馈最直观最有趣的选择,拖拽的动画最基础的表现为被拖拽对象跟随鼠标进行位移,而且松开鼠标后,文件的最终归属位置。拖拽常用与复制、移动顺序、上传、下载文件的场景,相对与普通的多步骤点击操作,拖拽所反馈的定位更加明确,可以大大缩短寻找目录、寻找文件的时间。





第四步:制定布局体系


布局框架是一套产品的骨架和基础。只有在框架确定之后,设计师才可进行下一步的构建统一的视觉元素,清晰的功能操作,具体的交互流程等等。后台产品是一个庞大的体系,除了对应前台产品的功能之外,还包括对产品部门的管理,产品相关的功能管理,不同身份对应的权限管理等等,因此太过单一的布局形式并不能适用,因此我们在设计后台布局时应该遵循简约化、统一化、规范化、拓展性强的原则。


对于拥有着众多功能的后台,我们应该做到化繁为简,多而不乱,如果想做到这一点我们就应该参考《简约至上》一书中所说的简约四要素:删除、组织、隐藏、转移。



删除


在iPhone的外观设计上,乔帮主一直信仰「少即是多」,就是我们通常说的做减法,这一伟大信仰在苹果公司的产品上完美的体现了出来了,苹果不论是线下门店还是官网、硬件、系统等等都将一切简约到了极致。用在我们的产品布局上,删除就是将无用、重复的功能删除,保留必要的功能,不要将和业务与用户使用功能完全不相干的东西放在页面上。



组织


组织的作用就是把业务相关的元素放一起,分个类,让用户可以更容易理解,比如有众多的水果蔬菜,将水果放在一个篮子,将蔬菜放置在另一个篮子要比它们都混合放在一起更容易辨认、查找。


人类喜欢规划一切,喜欢井井有条的秩序,组织就是规划,将整个页面众多的元素进行规划分类,把相关联的元素模块化,每个模块之间应该做好分割,分割包括:留白分割,分割线分割,模块分割,Tab点击分割,分割强度级从左至右越来越高。要注意的一点是组织存在争议性,有的人他认为番茄归类为水果,而有的人认为番茄应该归类为蔬菜,这辩论起来双方似乎都有道理,所以在设计中,组织元素时应该细细斟酌,对于这种墙头草类型的功能,应该谨慎处理,在了解用户心智之后再做定义。




隐藏


隐藏是一种并不快捷的简约化的方案,隐藏通常是将使用频次低的功能藏起来,等需要时再手动调出使用,这些功能不常用但也并不代表没用,比如设置头像、名称等等,隐藏可以让页面在视觉上更加轻量化,毕竟有限的空间还是要留给更重要的功能。




转移


我们上学时做题,当看到一道应用题有足足几百字,那我们下意识的想法就是,这题™的太难了,虽然还没有开始思考。但是人们的潜意识就是对看似复杂的东西排斥。在诺基亚还处在全键盘的时候,Android机还有三大金刚键的时候,iPhone就已经简约到了只保留home键、音量键和开机键,那么iPhone把其他所有的功能键都移除了,真的操作起来就简约了吗,按照复杂度守恒定律来说并没没有,复杂依旧存在,只不过是将原本学习按钮的过程转移到了去屏幕里交互的过程,但是这样子更容易被人所接受,因为是对复杂进行了分步引导操作,就像跑马拉松,如果你目标想着跑完全程,那么你多半半路就废了,但是如果你把目标变成每5公里为一段,分为八个小目标那么你可以很轻松坚持到终点,这就是一种魔力,因为每个人都不喜欢把自己搞得很累。回归至设计当中,后台是一个复杂的系统,功能可能多到眼花缭乱,但是如果将很多的步骤的一个流程分为众多小步骤去合理引导,那么是否会更加的易于理解、便于操作呢,这就是转移的用法。





动静态化布局


在制作后台时,我们应该遵循模块化布局,并提前规划好静态模块与动态模块。比如导航模块、面包屑、按钮等这些组件,在全局的位置应该保持一致,这些就是静态模块,全局样式与位置上不会出现过多变化。而动态模块一般就是内容区域,因为业务与功能的不同,内容模块所展示的内容是一定不同的,这一块的内容则是需要变化的。提前规划静态与动态的布局在开发方面可以节省代码量与开发成本,开发只需要将静态模块写成固定的组件就可以达到全局复用,快速修改的效果,在用户方面也可以大大的节省用户的学习成本,因为用户在学习了静态模块之后,之后则只需要再去学习动态模块就可以,而不需要每个页面、每个组件都要去进行学习。




响应式布局


因为后台大多数情况都是在Pc端与Pad端使用,这两个终端的屏幕没有固定的尺寸,可能有4k屏,可能有1k屏,当然还有可能是笔记本电脑所使用的更小尺寸,因此在设计时不能使用固定的设计稿尺寸,而应该使用较小的横屏设计尺寸进行设计,最早的屏幕分辨率低,通常都是使用900px~1100px的尺寸作为设计稿尺寸,但是随着科技的发展,目前市面上的屏幕最低都是1080p的屏幕了,因此在设计时可以使用横向「1200px」与「1440px」的尺寸作为设计稿尺寸,最大不应该超过1600px的尺寸。




定好尺寸之后,在设计时我们应该以响应式布局的思维去设计,什么是响应式布局,通俗说就是在屏幕变大的同时,页面内容会跟随屏幕的变大而展示更多的内容,需要注意的是:在屏幕变大的过程中,页面的内容应该只会出现信息数量的变化与信息之间距离的变化,不应该出现元素尺寸放大。在目前的设计中很多设计师喜欢使用栅格的设计方法,栅格布局具有易响应、设计规范化等优点,缺点就是可能会束缚设计师的发挥,在制作页面时完全按照制定的栅格走,缺少了灵动的感觉。虽然不见得要使用栅格布局法进行设计,但是我们要了解栅格的原理,要使用栅格的思维去制作。


栅格就是将页面划分为不等的几个模块,可以是12个模块,也可以是24个等等,每个模块之间的间距使用固定的距离,叫做水槽,可以将这些模块看做是参考线,水槽内就是禁止区,我们在设计时,将内容设计在模块内,用水槽作为模块之间的间距与留白使用,水槽只作为留白区域,不可以放置任何元素,最终开发时,响应式布局就是将模尺寸块随着屏幕宽度的变化而变化,而水槽则不动,如果屏幕变窄,不足以放下一个模块时,这是则将模块下移至第二行,水槽依然是不变的。







懂得了水槽的原理,那么我们设计的时候就算不用固定的栅格方式去制作,页面也不会出现太大的错误。


看懂了栅格之后总结一下,这不就是说一个模块一个模块的去设计么。没错,在设计时我们就是将元素按模块进行设计,这里说的模块不单单是指灰背景与白色块这样的组合,元素之间使用排版四要素中的亲密也可以哦,只要是视觉上看起来是一块一块的,就算没有分割线、分割块它依然算是一个模块。


回到了响应式布局,当我们按模块进行设计后,那么响应式布局就是毛毛雨了,开发只需要在屏幕尺寸变宽的时候将模块之间的距离拉大就可以了,这时就不是设计该去管的事情了。


总而言之就是,遵循响应式布局的目的就是为了屏幕尺寸在不断变化的同时,不会去影响改变内容的整体观感与体验,不会出现图片拉伸,字体忽大忽小的情况。



间距


间距这个东西真是老生常谈的事了,其实也没什么太多说的,但是这里还是去大致说下,什么样的间距比较合理,视觉上看起来比较舒服。


屏幕的分辨率都是以偶数为主,1600*900、1920*1080、2560*1440等等,因此我们在使用间距的时候最好使用偶数作为最小基数,然后其他间距以最小基数的倍数去制定,比如你最初制定的最小基数为2px,那么整套页面的最小间距就使用2px,接着随着间距的增大,就以2的偶数倍作为其他间距,比如2*2=4px、2*4=8px、2*8=16px等等,这样做页面不仅看起来比较规范,而且易于开发,易于记忆,不容易出现锯齿。




因为我们的后台产品通常是在电脑屏幕上使用的,电脑屏幕距离人眼的距离相对于手机较远,而且后台产品业务种类繁多,功能错综复杂,因此元素之间并不太适合过度拥挤,否则阅读起来就像报纸一样,难以辨认,效率低下。而过大的留白又会导致展示的信息量少,出现信息密度不足的情况,同样会导致阅读效率下降,因此在间距上我们应该取中度,这个中度的标准就是将一个24寸的显示器放在距离眼睛50cm的地方,然后去看这个页面的间距,两个元素看起来刚好不会很拥挤的时候,差不多就是刚刚好的,为什么使用24寸的显示器呢,因为24寸的显示器市场占有率较高,也是在日常环境中眼睛视线范围内看起来比较舒服的尺寸,比24存再小的显示器大多数就是笔记本屏幕了。


元素之间的科学距离通常使用等分原则与五分原则,就是同一模块的元素距离使用a,不同模块之间的距离则使用2a。





总结一下就是层级相同的模块之间保持相同的间距(等分原则),层级不同的模块保持不同的间距(五分原则)。



场景驱动间距


场景驱动间距,听起来有点不易理解,其实是so easy的,举个例子,当你要去一个陌生的停车场找自己的车,你又不知道你车放哪的时候,这时,你最希望的就是来一架无人机,从航拍的角度去看所有车辆,然后看哪个像自己的车,在做决定。当你找到你的车了,你要看看你车有没有被剐蹭,油还多不多了,你就需要放下无人机,走到车前仔细观看,而这时,整个停车场的布局什么的对你就没什么太大意义了。


这回应该很好理解了吧,找车就是信息检索,找到车了进去看车里有木有油就是内容阅读。信息检索,通常在后台以列表的形式存在,且常常配合检索功能(搜索、筛选、排序)等,这时检索出的信息密度一定要大,因为用户需要在大密度信息中快速浏览,找到符合自己的东西,假如你要是在淘宝搜索一个袜子,结果一屏就显示一条,你要浏览时,你还要来回翻页,你是否会很崩溃呢?


而筛选出的内容,这条内容就是用户千挑万选出来属于他的精华,他会仔细查看这个信息的详情,这时,我们要做的就是将留白加大,字间距加大,字号加大,让他很舒服的把这个信息阅读完成。还是上个例子,你淘宝搜索到了袜子,你要看看它的颜色,布料材质,穿上臭不臭等,这时袜子的的详情页信息比报纸还要拥挤,还需要你用放大镜才能看清,这时,你是否再次奔溃了呢。然后就直接关闭淘宝,前往京东查看了。。。




说了这么多就是,用户在进行信息检索时需要将间距适当调小,在保证有效阅读的条件下,尽量在一屏内显示更多的内容,当用户筛选完成准备阅读内容时,我们就要放大间距,最大的保证阅读的舒适性。这只是其中的一条小例子,场景可能千千万,这就需要设计师自己动脑去思考,去模拟了。




第五步:制定色彩体系


上帝说:要有光!!而颜色就是我们对光产生的视觉效应,目前我们肉眼可见的颜色大约是100多万种,那么这么多种颜色,选什么色作为主要的色彩使用在页面上呢,其实很简单,这么多颜色,我们只需要把色彩大致的分成:赤橙黄绿青蓝紫这7个颜色就可以了,毕竟人类更注重的是全局观,一个颜色,你稍微深一点,稍微浅一点,99%人都分辨不出来,毕竟大多数男性连口红色都分辨不出来呢。


在色彩中,色彩有三个属性:色相、明度、饱和度,这三个属性只要我们了解了原理就可以手动调色了,有人说,手调的不准确,不科学,那么如果你会写色彩的算法,请略过此处,普通人还是手动调调比较好,因为,只要是掌握了色彩心理学,色感别太差,全局色彩统一,对于中小公司完全可用。


调色怎么调呢,第一看色相,色相决定的色彩的大方向,那么色相条中这么多颜色,用那个色相范围好呢,这个就要看色彩心里学了,通常我们看到红色想起什么?五星红旗、党、激情、慷慨激昂、股票大涨,那老外看到红色呢,血腥、暴力、闹鬼了,同样一个红色,咋国内外差距这么大呢,这要说的就多了,毕竟是历史遗留问题,政治问题,生活传统问题等等,具体请参考度娘。。。除了红色,还有橙黄绿青蓝紫六种颜色呢,当你看到其他的颜色你想到什么,那这就是色彩心理,因为你什么都没干,就看个颜色就能脑补各种东西,有了各种感觉,色彩是不很神奇,没错就是很神奇,不同的色彩对于不同的地域的人群,不同职业的人群,不同年龄的人群都会有不同的色彩心里,这个具体就不细说了,知乎,百度一大堆相关研究。而我们要做的就是根据你的业务属性和面对的相关人群,使用他们的色彩心里去制定你的色相,要是面对医疗行业,可能绿色是个不错的选择,如果要是面对政府行业,或许红色更讨领导们喜欢。




确定好色相范围了,那么接下来我们就需要再考虑考虑饱和度问题了,饱和度是什么,爱修图的女性朋友一定知道,色彩的饱和度越高,那颜色越鲜艳,饱和度越低,色彩越枯燥,饱和度为0,嗯没错,50年前的电视机就没有饱和度。在制定颜色的时候,饱和度往往决定了年龄属性,一般年龄偏大的人不喜欢那花里胡哨的鲜艳,更喜欢柔和中性的颜色,年轻人更喜欢炫酷潮流的高饱和颜色,这么一说你们应该就恍然大悟了吧,年龄高的人群用低保和,年龄低的人用高饱和,对,也不全对,饱和度不只是和年龄挂钩,也和产品的属性挂钩,就像兰州拉面的门头看上去貌似有点low,但是看苹果的门头,觉得好像挺高端,为什么呢,因为过重的饱和度给人亲近感,但是相对来说就少了高级感,低保和俗称性冷淡风,给你一种高级感,比如莫兰迪色,饱和度较低的颜色会给人高级感,但会显得不近人情,饱和度较高给人廉价感,但是更亲民一些。


至于明度,就是颜色的亮度了,当你调完色相和饱和度时,发现这个颜色貌似有点刺眼,那么你就把亮度调低点,如果发现有点看不清,那么你就把明度调高点,明度就是这样子使用的吧~~~~




在使用颜色的同时还需要注意可视度,过浅颜色的按钮放上白色的字,眼神不好是看不清的,具体对比度什么样才算合理,请参考WCAG标准,能通过这个标准的,在可访问性上就没问题。



颜色舒适性


后台,大部分情况是企业自己用,或者给客户的幕后人员使用,相对于品牌色来说或许更在乎颜色的舒适性,红色波长,通常用作警示,所以看起来就比较刺眼,蓝色紫色波短,看起来就相对柔和,后台也许是很多人日常高频使用的工具,因此在舒适度上尽量要完美,舒适度包括较大的交互区域,合理的间距,基于人类视线的合理排版等等,这里我们只说颜色,不同人对于颜色的感知是不同的,但是基于色彩心理来讲,蓝色给人冷静理智安逸的感觉,因此,在大多数的后台产品当中,蓝色作为主题色的居多。


最终总结一下,不管是选择什么颜色作为主题色,一定要保证不能刺眼,否则对于长时间使用的操作者来说会是一个灾难性的问题,可能轻者视疲劳,重者干眼症青光眼。。。再者饱和度尽量不要过高,饱和度为:100是绝对不可以的,因为过于炫目的颜色会激起使用者的负面情绪,引起焦躁和不安的情绪,因此过高的饱和不可取。




第五步:制定文字体系


文字,是我们记录信息的主要工具,在后台页面的设计中,我们不需要对字形进行设计,只需要使用Web端常用的标准字体就可以。


文字还有许多其他的属性,合理运用属性可以大幅的提高文字的阅读效率。后台的元素较为简约朴素,以文字为主,较少的图形作为辅助元素,在整屏页面的元素中,文字占据了大多数,那么如何体现出哪些信息重要,哪些信息次要,这时文字的字重属性与字体尺寸属性就可以完美的帮我们解决这个问题。字重越重的字越有力量感,辨认度越高,视觉重点越高,字重越轻的字体,给人文艺典雅高端的感觉,后台算是B端产品,应该是不大需要高端文艺的感觉的,引导视觉与可读性更重要一些,因此我们常规下就使用标准Regular字重就可以,再轻的字体阅读起来比较费劲就没必要再去使用了,而像标题、主文案、按钮这些文字,我们可以使用更重的字体与更大的尺寸来突出,将重点信息的层级拉开,引起用户的视觉注意。




当整页的阅读信息较多时,我们需注意将文字适当放大,正常情况下网页的文字为14px,但是在大篇幅的连贯性文字出现时,我们应该将文字的尺寸合理升至16px或者18px的大小,在行间距与字间距上也应该适当加大,那么行间距(行高)为多少比较适合呢,正常情况下我们使用sketch自带的行高就可以,对于文字信息较多的情况下,我们使用1.2-1.8倍的行高就比较容易阅读,在以阅读为主的页面中,比如文章阅读页、文档页这些情景下,使用1.5-2.5倍的行距更好,有人会说1.5倍间距就已经很大了,其实不然,当你在长时间阅读信息的时候,越到后面阅读效率越低,那么超大的行距可以有效缓解阅读疲劳感,在长时间阅读的情况下也可以避免串行的问题发生。




字体颜色也是一个需要注意的地方,通常我们为了便于记忆,使用灰度色就可以,一般色值为#222222、#333333、#666666、#999999、#CCCCCC这些,在一个页面中,正文文字的颜色不应该超过3种色值,通常为一个标题色,一个文本色,一个辅助色,高亮色另说。颜色的使用主要目的是为了凸显信息,过多的使用颜色会给用户造成有很多层级的错觉,导致层级混淆,页面混乱。




第六步:提升趣味度


当后台产品的结构与信息元素全部排版完成后,这时我们会发现,整个页面除了文字和按钮貌似没有什么其他的东西了,确实,我们作为一个开发人员看起来都倍觉单调,更不用说每天使用我们产品的用户了,更是枯燥的要死。有人说,B端产品以效率为主,本身不就是枯燥的文字嘛,道理是这么个道理,但是作为开发人员,让用户使用的开心也是我们的一个任务,俗言道:一图胜千言,假如我们要学习一段历史,我相信比起来看书本上的文字,看电视剧的方式应该更受人青睐吧,谁都不喜欢全是文字的东西,客户也是一样的,因此我们应该对页面进行适当修饰,不应该把页面做成一个txt的文本文件。那么怎么去合理的修饰页面呢,很简单,图表化、图形化。


什么是图表化,简单解释来说就是将有规律的数据进行分类总结,用适合此类数据的图表进行展示,举个简单的例子,狗蛋想要去买股票,但是不知道买哪一只,于是想上网查一查最近5年每个公司的股票走势,结果找到了两份文件,一个是满是文字的数据列表文档,另一个是精美直观的K线图,那么你是狗蛋你会阅读哪个呢,当然去看k线图了,毕竟3秒钟就能知道个大概,如果看数据报表,眼花不说,一上午都不见得能阅读完。这时你就会发现图表的魅力。




那么图形化又是什么呢,依然很简单,就是将固定不变得字段图标化,将难以理解的字段插画化。人天生对于图形的识别能力就优于文字,对那些静态的字段给与图标的展示会大大提高用户的识别效率,什么是静态的字段呢?比如固定的按钮、导航、目录、设置等等,全局都长那样,不会因为切换场景而改变文字,这些就非常适合使用文字与图标相互配合来提升趣味度与辨识度了。




那么插画化又是什么呢?说白了就是将用户懒得看的那些字配张图,读书时我们的课本都是图文并茂的,那教育部就是怕学生光看文字产生厌倦导致不好好学习。同样的道理,有很多情况下,用户也懒的看文字,比如升级页,升级功能信息那么多字,不如多放几张图来的实在,这也就是那些APP产品为什么都有引导页的原因。





第七步:合理引导


当你看到这一步的时候,说明你的后台已经完成的差不多了,后台是个极其复杂的系统,一个新手去学习使用一套后台就像一个菜鸟去学习玩一款新游戏一样,只不过游戏有我们的兴趣驱动,兴趣是最好的老师,而后台则不同了,学习使用后台的那都是为了工作,兴趣可就没那么强了,如果恰恰碰到了做的很复杂的后台,那客户可能当场崩溃,古有唐雎之怒,流血五步,今有员工之怒,当场跑路,没准产品学不会,人家就辞职了。想想都觉得很严重,这时就体现出了合理引导的重要性,那么什么叫做合理引导呢?引导分为很多种,有新手引导、新功能引导、版本变更引导,操作流程引导等等,但是最终的目的是为了让用户快速学会使用你的产品。



新手引导:


可以使用视频教学,文字教学,体验教学等等,具体怎么使用应该根据自身的业务进行分析,看看适合用哪种的方法。




新功能引导:


要多提示,可以是红点提示,高亮提示,弹窗提示等,这块的主要目的就是:要将新功能在什么位置、有什么功能告知用户,别你功能去年就更新了,用户今年还不知道呢~,这就尴尬了。




版本变更引导:


每个版本交互设计师,产品经理,体验设计团队等等一大堆人去探讨,将旧版本不合理的功能升级,去除,换位置,合并等等,每动一点,用户都需要从新学习,因此当版本变更导致操作习惯和之前不同时就要提示用户最新的版本内容,最重要的是要对比引导,旧版本怎么回事,新版本怎么回事,在这一块可供参考的有很多,如Adobe全家桶每年的大版本更新,Autodesk全家桶的大版本更新,游戏的大版本更新等等,他们甚至还会出一个专门的文档来描述新旧版本更新对比。





操作流程引导:


顾名思义就是引导用户完成某一套操作流程,就像LOL里,刚注册游戏时,系统会引导你完成一局游戏,告诉你该点击哪里进行匹配,点击哪里选英雄等等,这种引导通常是让用户在真实场景下边操作边引导,纸上得来终觉浅,须知此事要躬行嘛,身临其境的体验才是快速学习的王道,这种的引导非常适用于操作步骤繁琐的产品。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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


《如何定义APP视觉品牌》——设计流程与操作方法浅析

ui设计分享达人


概念简述 

 

 

视觉品牌这一概念,既陌生又熟悉。大部分ui设计师都或多或少做过视觉改版或者风格升级,先来看两个概念:视觉风格&视觉品牌。

 

▲视觉风格&视觉品牌重点偏向

 

风格是艺术概念,是在整体上呈现的有代表性的一种面貌。风格能反映时代、思想、审美等特性。也是设计师对审美独特鲜明的理解。那么视觉品牌呢?它除了要体现产品本身特性,融入产品希望传达的感受,也要思考什么对用户有意义。研究视觉品牌,就是探索如何通过设计维护用户对于产品的好感度 ,通过有共鸣的设计传递正能量,让产品获得最大的认同。简单来说:视觉风格重点是设计师对审美的传达;视觉品牌则是通过挖掘产品有价值的特点,创造有共鸣的视觉去打动用户,助力产品。

▲视觉品牌作用

 

了解完视觉品牌的概念,我们简单聊下它的作用。视觉品牌最大作用是建立用户和产品的关系。vivo互联网单个产品的视觉品牌也受vivo母品牌影响,不同业务被渗透的程度不同。比如vivo品牌对vivo官网,vivo商城影响比较大,但是对浏览器,i视频,短视频的影响就比较小。


流程

 

 

那么,如何定义好产品的视觉品牌?借企业文化里的一句话:做正确的事,并把事情做正确。在设计工作中,这句话也有一定的指导意义,我们先要确定是否要做视觉品牌,再用合理的流程规划好每一步。

 

结合过往的业务经验来看,对于已有视觉风格的产品来说,需要满足以下两个情况之一才是最适合做视觉品牌工作的时候:1、产品转型、重大业务调整(包括用户人群、需求变化等);2、与相关行业设计语言水准差距巨大。另外需要考虑的还有时间安排,由于整个流程耗时需要大约12周(3个月),所以设计师前期就要做好时间规划。

 

确定要做视觉品牌工作后,需要准备哪些资料?项目环节和流程如何?让我们来看下这12周需要做的事情和基本顺序:

▲视觉品牌的流程

 

我们接下来会重点介绍流程中关键的8个步骤(图标标蓝色的step1~8):1、品牌定位资料熟悉 2、明确视觉品牌关键词 3、关键词发散和可视化 4、提取元素建立视觉符号 5、完善主要页面 6、验证视觉风格喜好 7、完成所有页面的视觉效果 8、整理成视觉品牌规范手册。

 

1 、品牌定位资料熟悉

大部分项目的产品,运营和用研角色会提前做一些品牌定位的工作(品牌屋),品牌屋有助于我们对产品各方面进行解读。这类资料一般我们都可以获得,设计师可以从中了解到目前我们产品全面信息,包括:产品形象、调性、核心价值观等。我们需要的关键信息:产品关键词就可以从中找到。如果品牌屋资料不够明确或者设计师对确定的词汇抱有疑问,我们还可以通过工作坊形式,邀请项目核心成员进行脑暴会议,讨论出合适的词语。

▲案例:vivo浏览器品牌屋

 

图中为浏览器品牌屋资料案例,经过项目成员讨论,浏览器产品最终关键词:智慧、有趣、默契、可靠、年轻。

 

2、 明确视觉品牌关键词

然后,从产品关键词里,我们需要选出符合产品定位又能达到受众心理预期的视觉品牌关键词,聚焦产品的视觉调性。视觉关键词一般有2~5个,需要视觉专业团队、项目相关人员、核心用户一起来挑选,用户的选择可以放在问卷里进行,通过快速测试了解用户对产品的视觉感受和期待。如果确定的视觉品牌关键词比较多,可以适当确立1~2个核心视觉词汇,便于聚焦后期的风格指导。

▲明确视觉品牌关键词

 

选择标准有两条:1、延展性高,有一定视觉可视化潜力:词汇要抽象化,不能过于具体,一般都是描述情绪,气氛,氛围或者感受之类的。2、贴合公司品牌文化:追求乐趣、充满活力、专业音质、极致影像、愉悦体验、敢于追求极致、持续创造惊喜。

 

3、 关键词发散和可视化

发散

视觉品牌关键词选定后,在绘制可视化的情绪版之前,还差一步,就是针对选出来的词进行发散。做这一步的目的是希望设计师的思维能够尽可能打开,收获更大范围的灵感和思考。我们通过三层映射方式,分别对2~5个视觉品牌关键词进行发散收获大量衍生词。(图中以词语“友好”为案例,分别进行物化、心境、视觉映射出大量衍生词语。)

▲三层映射案例:词语友好

 

在大量衍生词里,我们还要经过一轮讨论筛选,去掉不合适的词语。主要看衍生词和我们的视觉关键词的关联度是否足够高,以及是否适合用视觉语言表达等。

 

如果项目没有做品牌相关的工作,没有产品关键词,那我们前3步骤怎么办?遇到这种情况,我们要怎么深入下去?当然,你可以尝试推进项目去做一下品牌屋,这对各个角色在产品认知上有很大的帮助。其实还有一个工具方法能够帮助我们较好的完成各类关键词提取。(Design O to O 主要是察觉用户情感化的一个工具,工具里得出该类别情感相关词汇和我们想要得出的视觉品牌关键词概念非常接近,所以推荐作为遇到这类情况的解决方法。)

▲Design OtoO方法 

 

这套工具方法的核心步骤分别是:收集,组织,反应,评估。每一步都有一些工具模型可以套用,能够较准的帮助大家达到目标,找出合适的关键词。

 

可视化

前面我们得出筛选后的衍生词,是为了之后可以做出更全面、精准的可视化情绪版。很多设计师在情绪版制作上比较随意,这里也给大家一些我们团队常用来搭建情绪版的方式。一般我们将收集的图片依照3个维度(人物、场景、物体)进行归纳整理,这样共性的东西更容易被发现。当然,拼贴整理的方式很多种,也包括常见的任意拼贴、参考式拼贴和精致化拼贴。大家可以多试一些平时不怎么用的维度进行拼接,也许会带来不一样的灵感。

▲情绪板拼贴常用方法

 

4、 提取元素建立视觉符号

每个情绪版带来的设计灵感都不相同,所以最终会有多个视觉符号方案。第四个step就是来解说如何从单个的情绪版里提取视觉符号的特征。

▲组成视觉语言最基本的五个维度

 

“形色字构质”是组成视觉语言最基本的五个维度,当你描绘一个东西的样子时,你通常会从这五个维度去阐述。所以,我们也从5个维度来提取视觉符号的特征。需要注意:五个维度不一定需要全部进行提炼,有时候遇到前期已经确定的就可以直接拿来用,也有的不涉及的,比如字体可能在部分图标里没有出现也就不需要提炼。让我们来对色彩、图形、字体、质感、构成这5个维度来细细展开:

 

(1) 色彩

▲快捷工具Dopelycolor对图片进行色彩分析

 

色彩提取常规是可以从情绪版里找出的,最简单的办法就是找出占比高的色彩并判断选择。这里分享一个快捷工具Dopelycolor ,能快速让你提取图片中颜色,以及占比,让你清晰的了解图片用色情况。

▲提炼色彩需要重要关注4点

 

需要注意的有以下几点:1、已有的品牌色是否要延续使用 2、选中颜色需要后期调整三元素,达到最好的视觉效果  3、如果有辅色,主辅色多结合色环考虑合理性 4、你选的颜色是不是和市面竞品太过雷同,是否要做点差异化?

 

(2) 图形

对于我们大多数产品目前现状,符号基础图形是不宜变动的。大环境也是如此,例如很大一部分视频类应用图标都围绕播放三角展开。因为变化会引起用户新的理解,可能会带来识别和理解的成本,所以项目设计师在方案的设计阶段,会多做几个保守的常用图形相关方案。

 

另外,在没有基础图形的产品品牌中,通常需要通过脑暴会去讨论出适合产品的符号基础形态。例如vivo积分商城在视觉品牌探索阶段,组织脑暴会议,邀请项目中各个关键角色一起来发散讨论适合积分产品的货币符号图形(这也是积分定义的视觉品牌符号)

▲vivo积分商城货币符号发散脑暴会现场

 

基础图形获取方法介绍完了后,图形的艺术表达,也就是图形设计是需要我们通过情绪版或者常用创意手法来捕捉的。通过情绪版,我们可以提取出零碎的一些特征,这些通过观察就可以提取了。比如下面这张情绪版图上能得出的共性图形特征有:描边图形、线面结合等。另一张能看出的有:大圆角、简单几何、Q型。

▲情绪板图片提取共性特征

 

特征好提取,但是如何去用于输出我们的视觉品牌符号,这块就依赖各位设计师的设计表达了。到这一步,建议参与的设计师们进行视觉比稿。比稿的设计师们可以看一看常用的6种创意设计手法,这些创意手法都是较常见的,在设计中协助我们创意的迸发。

▲6种常见图形创意手法

 

(3) 文字

严格意义上,符号里的文字也是图形的一种。不过,针对用文字来做的符号,可以参考字体创意设计的10个方法。这里不一一阐释含义了,大家可以在网上找到更多每一类图形的案例和应用解说。

▲10种常见字体创意设计方法

 

(4) 质感

如果要进行质感的提炼和确定,除了从情绪版里能够找到一些共性的东西以外,也可以多在流行趋势、设计网站材质图形相关专题里,去尝试获取思路。在设计方案阶段,可以多去尝试不同的设计质感。

▲质感素材专题

 

(5) 构成

构成通常会用在版式,招贴之类的平面设计中。很多产品标志在构成上都很讲究,图标的内容和留白比例搭配合理,具备设计舒适感。我们在做符号设计时候,同样要非常关注构成,好的构成会让我们的符号更具魅力。常用的图形构成有9种,我们在做图形时候可以多去尝试,也可以叠加尝试,找到适合的构成样式。

▲9大图形构成

 

案例

回到视觉符号提炼的5大维度方法,我们来看下vivo浏览器是如何提炼视觉品牌符号的。由于不同设计师整理的情绪版,方案都不一样,接下来来看浏览器视觉品牌探索众多方案其中的一个例子。

▲视觉符号提炼的5大维度

 

首先来看下浏览器目前一些背景设定,去除既定的情况,我们需要在这几个方面找寻特征(辅色、图形艺术、质感、构成),来完成我们的视觉符号。

 

▲vivo浏览器背景设定

 

在这个方案中,设计师从情绪版提取了想要的特征(图片中蓝色文字):

颜色:从情绪版提出占比较高的颜色,归纳成色组,在色环中逐一讨论去留,去除对比强烈的黄色(因为浏览器作为工具类产品并不想传达出刺激,冲突,过于活力的感受,故去除。)在邻近色(青色、皮粉色)里考虑避开性别因素,青色更加适合。然后调整一下rgb,饱和度提高一些。

图形艺术:延续地球元素,情绪版提炼的:大圆角、简单几何、Q型,描边图形,线面结合。

质感:浏览器在先前资料收集的时候就有倾向,考虑近两年手机背面AG磨砂玻璃广泛使用,界面上苹果和微软也整体设计转向毛玻璃风格,关于这类品质感和空间感明显的处理方式,浏览器设计师也想进行尝试。

构成:结合情绪版和图形构成9个方法,提取并运用的主要特征是动势,也是想赋予符号活力感受。

 

最后,经过草稿比稿,评审通过的方案和确定的符号5个特征如下:

▲vivo浏览器符号的5个特征

 

5、 完善主要页面

视觉品牌符号完成以后,接下来需要继续绘制与符号强关联的页面。这些模块有:loading、缺省、核心页面、插画插图场景。不是把视觉品牌符号简单的原封不动放在各个页面里,而是通过一些设计手法将它更好的融入在页面中。

 

通常,核心页面模块的视觉呈现,都是基于已定的视觉品牌符号特征去发散。目前我们团队有两种不同的思路:一个是从先前符号里提取主要某个特征并结合场景做出版式布局的延展。类似我们做vi时候常用取logo的一部分进行图形组合再创意。另一个是将已定符号的不同特征进行多个组合,创作出符合这些特征的衍生的新视觉。

 

浏览器用的第二种方法,提取出的符号特征和定好绘制要求,其中为了保持整体风格的一致性,需要绘制的模块特征应不少于一半目前特征(满足1/2),如果有新增的特征需要保持和谐,不应该有其它明显的风格倾向。这个也是用来检查你做的系列衍生效果是否整体的标准。经常有同学做了一个很好看的缺省图,但是风格特征与已定视觉符号风格相差甚远,最后导致不能使用。

 

下面是vivo浏览器视觉品牌符号延展的图形或页面样式:

▲缺省图样式(6/8特征)

▲装饰icon图样式(4/8特征)

▲特殊弹出层样式(4/8特征)

▲视频操作引导样式(4/8特征)

▲应用在整体页面效果

 

看完浏览器的符号延展方法,再来感受下另一个方法:通过符号,延展多个版式视觉的案例——短视频视觉品牌探索。项目设计师主要对视觉品牌符号图形特征做了延展,局部提炼并创新版式。

 

下图是短视频视觉品牌符号,基于此为基础型,设计师根据总结的6种手法,用对称、平移 等方式进行拓展,结合页面实际情况完成。

▲短视频品牌符号以及图形应用解说

▲短视频品牌符号页面背景应用

▲ 物料拓展概念

 

6、验证视觉风格喜好

完成主要页面后,我们会进行风格测试,用来验证不同的设计方案在用户眼里的喜好程度,从而修正设计师的认知偏差。我们建议至少完成3个视觉品牌符号方案和对应3套页面来供用户测试。

 

关于风格测试,是将已有的方案通过问卷和简单的线下访谈,得出用户的喜好结论。因为是敏捷测试,只需要一周就可以出结论。在这一步,有5条测试重点和对应解读需要设计师关注,具体内容参考下图:

▲5条测试重点与解读

目前vivo浏览器和i视频都在视觉品牌升级时候,运用了这个较为敏捷的测试方法。

▲i视频视觉品牌3套方案风格测试复盘

▲vivo浏览器视觉品牌升级核心页面风格测试

 

7、完成所有页面的视觉效果

经过用户的验证和后期修改,我们确定好了唯一的一套最合适的视觉品牌。在设计组内部评审+项目组核心成员评审效果通过后,接下来工作就是按部就班的去完成后续页面的规划和落地。这一环节的工作体量较大,需要花时间去梳理替换所有页面。整体t替换预计耗时需要2周左右,建议多些成员参与完成。

 

8、 整理成视觉品牌规范手册

最后一步也是最重要的一步,需要把视觉品牌的设计指导和规范进行沉淀。视觉品牌规范手册是需要项目组设计师一起维护的。好的设计语言是第一步,维护和让其发挥最大价值(原则、一致性、效率)是视觉品牌规范手册的意义。

▲视觉品牌规范手册4大模块

 

目前我们已经梳理出vivo浏览器、短视频的视觉品牌规范手册。内容包括4个部分:品牌概述、品牌符号、视觉语言、物料规范。对产品的视觉品牌理解和如何应用会完整的体现在手册里,建议每一个参与项目设计师都应该在设计前先整体看一遍。

 

结语

 

视觉品牌的定义流程以及方法,是我们团队资深ui设计师第三季度重点研究和探索的产物。希望能给正在做视觉品牌相关工作的设计师带来一些帮助和启发,如果有建议或者疑问,欢迎通过VMIC UED公众号和我们交流,让我们一起优化好这个视觉品牌定义体系,为用户创造更好的视觉体验。

 

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷。 作者: vivo互联网UED
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

 

B端设计|模态、非模态框

ui设计分享达人

最近在整理系统的组件规范,收集各个场景下的组件应用,在搜集应用控件时,弹窗的套用、混用、乱用情况挺多的。

主要是模态框和非模态框的使用。


模态框:一般会有一层黑色透明的蒙板,它打断用户所属的主流程,不能进行下去,只能到完成模态框的操作,才能返回到主流程中去,这个操作很明确,不会被误解;


非模态框:一般没有那一层蒙板,不会影响所属的主流程,也不用担心原有进度会停止,仍然可以持续操作。即打开非模态也能看见底层的主流程。


概述

模态or 非模态,统称为弹窗。样式上可以理解为类似卡片,能够帮助用户快速定位获取关键信息和进行操作,它的内容是灵活的,一般情况下包含文字、图标、按钮。弹窗的设计是给用户传递与当前场景需要的操作相关的内容。

场景使用 
会根据业务的需要、场景要求,衍生出其他类多种形态。大多情况下先对弹窗分类,再对应到场景中使用。而实际上产品设计会从实际业务出发,从使用方式考虑,倒推来使用什么样的弹窗符合要求。 

基本设计原则
层次要分明,突出重点 
遵循基本的界面设计原则,在多种场景下通过信息分层、字体的粗细、大小等方式展现出明显的视觉层次,结合业务场景需要再按照阅读顺序惯例来布局,标题使用对象的名字。目的是帮助用户聚焦每一个关键信息上。 


悄无声息的,你在不在乎它,它都会出现的 

全局提示:一般由系统主动发起,不是用户请求的,大体分为进度提醒、通知提醒、公告提醒 

进度提醒

这个是由系统发起的,表明用户当前所在的操作的进程中的位置,抑或是卡在进度未操作,无响应状态,通知用户。 
位置:1·在页面的顶部浮层显示一块区域,2·统一放置消息分类里 


通知提醒
来自系统一些重要的信息推送给用户,或者是来自其他用户的提示信息,抑或是操作反馈。 
位置:将其放在右上侧,并自动关闭。 


公告提醒 
依然是由系统发起,提醒用户需要关注的信息,一般包含系统迭代、系统错误、审核通过or不通过、系统维护提醒等以及其他活动信息。 
位置:与进度提醒同一位置,一般情况下并会在3S自动消失。 
强制打断用户当前流程的 

部分功能需要用户打断去确认操作或是可能会造成比较危险的,不常用的,那么就需要改变用户操作焦点,将用户的注意力从原来流程中拎出来,那么这个时候需要一个方式隔离原有流程和需要当前操作的内容,模态框就是比较适用的。 

叠加在系统窗口的弹出式窗口,弹框以对话的方式让用户参与进来,以对话的方式与用户产生交互操作。 

操作反馈提示类

1·成功和失败 

对于某个模块的层级过深的功能操作反馈,需要在提交之后的结果反馈中提供辅助导航返回到初始功能页面。 


2·确认型弹窗 

在简单的业务场景中,只需要用户进行确认的“确认”或“取消”等案例。一般情况下应用在对内容的提交、修改,在内容详情页里的删除操作,表格的批量删除等 
样式:标题(以所属对象作为标题)+文案(对对象的解释说明)+操作按钮。 


3·操作型弹窗 

在复杂的业务场景中,需要用户进行数据输入一系列操作。一般会有新建内容(新建内容很多的就需要用新页面,弹窗有限空间满足不了大容量的数据输入)、查看详情(内容多需要新页面展示)、详情编辑。 
有部分场景下,新建内容和编辑内容是重合的。 
一般样式:标题+数据输入组件+操作按钮 

复杂样式:标题+数据输入和数据展示组合控件+操作按钮 


4·组合型弹窗(堆叠弹窗) 

特殊复杂业务中,单层模态框不能满足实际业务的需要,考虑弹窗的容量大小以及主次用户类别使用的情况下,会使用堆叠弹窗,在有限的条件下,能做的就是尽量将弹窗分层次。 


弹窗出现不打断用户原有流程的 

在实际操作的过程中,常见的错误提示、部分晦涩难懂或专业的术语、对功能组件的描述解释、小模块里的操作反馈、全文本展示,只会在用户不明白用途的情况下,告知用户,但不能妨碍用户阅读或是操作。 

气泡提示(解释说明的)

起辅助说明的,辅助用户决策。 
样式:深色背景+文字描述;一般由鼠标滑入目标区域,展现气泡提示框,鼠标滑出即消失。 


气泡对话框 

一般简单场景中,对单条信息或者模块内的某一个内容执行操作确认。 
样式:背景+(+图标)文案描述+操作按钮;一般鼠标点击,显示气泡,点击其他区域即消失。 


复杂的场景中,气泡框也承载需要用户去执行数据输入的操作,将气泡内的执行后的结果与原流程同步数据展示结果。 

除此之外,气泡框承载的内容和模态框操作类型有重合部分,不同的是,气泡框的数据与主流程的数据需要有对应关系。 

堆叠气泡框

特殊场景需要,单层气泡框不能满足需求,内容需要比较严谨的父子级关系,且并不是常用的,在考虑对后续的衍生,也会将不常用的功能隐藏,需要时再点击弹出。 
方法类似于堆叠模态框 

特殊场景下
在某些复杂业务的场景下,需要模态框和非模态框搭配组合使用,特别是操作弹窗和气泡框之间。 
一般情况下,是操作弹窗—>气泡框,(气泡框—>操作弹窗这个类型不常有,主要是不符合用户的使用习惯) 


总结 

对于弹窗的使用,应用到各个类型的用户场景下选择合适恰当的方式去满足需求,也许不尽人意,但也是在进步。不仅仅需要了解弹窗的类型,更需要了解业务场景,实际应用过程中需要两者相互碰撞,打破、重组,寻找到合适的方式。 

思考延伸

上边有说到堆叠模态框,在实际应用中,层级多达三层弹窗,使用的时候,重复点击好几次按钮才能关闭弹窗,使用起来甚是麻烦,有没有可以优化的方法呢?


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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

体验设计驱动运营指标增长

ui设计分享达人

      你是不是经常感觉自己在项目组里没有发言权,发了言也不被重视,想做的设计也落地不了。尤其是做到运营相关的设计时,感觉设计价值微弱。那么我今天来说一下如何通过设计驱动运营价值最大化。作为UED我们并不是单纯的只负责活动的美化,而是作为全链路的体验设计师,把活动运营当做一个产品项目对待。从业务开始跟踪,明确目标、建议方案、优化体验链路、优化数据策略等不同阶段做出设计价值。我们的投入初见成效,以下是我这段时间的总结,分享给大家,希望能给大家带来新的思路。




一、明确活动业务目标


1.1 活动目标

运营活动(Operating activities)是指针对不同性质的活动进行运营,包含活动策划、活动实施、营销推广、品牌传播,达成提升相关运营指标的有目的的运营行为。为了更好的达成既定目标,项目立项后我们需要了解此次运营活动的目标,以目标展开设计策略和设计实施。常见的运营活动目标主要是拉新、促活、回流、营收,本质上就是利用增长模型AARRR来达成运营目标,助力产品用户增长。



1.2 活动目标分类

目标的细分拆解后,基本都是围绕“用户、营收、品牌”这三个维度来进行活动策划设计。一般来说目标越单一活动复杂度越低,目标综合性越高,越需要调动不同类型用户参与,活动的复杂度就越高。对于综合性目标的活动,不能以单一数据来判定活动效果,需要进行综合分析。定量的我们可以埋点分析数据,定性我们可以通过问卷来调研用户对活动附加效应的感知,比如对品牌的识别和记忆以及NPS(净推荐值)。


      


二、参与活动策划过程


活动策划过程就是对整个活动方案设计的过程,运营人员和产品经理落地初步方案后,设计师就可以参与进来。这一部分需要看设计师的自主积极性,和团队流程的开放度。总体来说设计师积极参与策划过程也能很好的助力活动实施。


其一、设计师平时关注活动较多,可以在脑暴的时候提出一些相对专业与互补的建议;

其二、参与策划过程或者参与方案评审过程中能帮助设计师更好的理解这个活动的底层逻辑和核心价值;

其三、前期项目组的方案想法达成一致可以减少对后期的修改。




三、优化体验链路


除了遵循尼尔森十大交互原则,在《社交红利》一书中,徐志斌老师总结了活动运营的6特点:免费、简单、有趣、透明、可积累、可兑换。在优化链路时,我们可以从这几个方面考虑:


3.1 本着简单、有趣、易传播的设计原则。


简单:是指用户易理解,教育成本低,操作简单。在运营设计中一般我们会与游戏结合,在此我称为游戏运营。在游戏运营的设计中,如果不是一个约定俗成用户都熟悉的游戏任务,教育用户如何操作的成本是相对较高的,需要有详细的操作引导。一般引导的步骤注意不要超过四步,或者在用户使用的场景恰当的分步展示。比如鲤鱼跳龙门游戏操作就比较简单,引导只需要一个简单的提示;而京东全民运动会作为大型活动比较复杂,引导步骤较多,对一步分用户来说认知成本高就不会参与活动。




有趣:是指具备一定的趣味性和创新性,可达成KANO模型的兴奋型需求。在设计过程中,简单和有趣这两个维度考虑不能单一靠假想的用户体验来判定活动是否好玩。比如在金哥接金币游戏设计中,有一个交互手势是金哥如何接金币。手势锁定在底部点击,全局点击,左右滑动。其实按照ui惯性的思维,底部点击成本低于全部点击低于左右滑动,所以一开始是建议使用的是底部点击。但是后面进行测试发现,左右滑动的趣味性远大于点击,且执行成本也比较低。主要是在游戏过程中点击是精确的操作,由于金币的数量多,且面积小,分散点击友好度不高(拼多多的红包点击区域更大),而滑动则是在一定范围内,金哥用平底锅区域可以接到金币难度系数更低,得分率高。从沉浸感上来说,点击更像你点哪个金哥到哪里,按住金哥移动会有中你就是金哥的体验,对金哥的掌控感更强,自然沉浸感也更好。




易传播:是指低理解成本传播与裂变。一是触发按钮突出可识别;二是操作任务明确无歧义;三是传播交互易操作。通常我们设计的时候会理所当然感觉用户是很明确他们的操作行为的,但是基于某证券一期的活动用研反馈,用户对活动的邀请机制,甚至是步骤都是迷惑的,不知道自己是否已经成功分享,导致失去再分享的动力,为此我们在邀请模块下设计了简易的步骤去引导客户。




3.2 考虑活动规则的底层逻辑与开发算法能否实现。

设计方案时,需要考虑到开发实现的可行性。比如活动的任务得分和游戏得分规则机制,开发算法能否实现,如果开发算法难以实现就会导致大返工。所以需要及早跟开发做好评审工作,并且是很细致的评审,只是粗略评审后续还会出现问题。



3.3 梳理交互流程,保证整体链路的完整性。

交互状态都要考虑全面,如登录前后状态,空状态,各个等级的状态,任务前后的状态,不同类别用户的状态等。




四、设计策略


运营设计策略可从策略层、风格层、基础层三大层面展开。整个过程可以使用双钻模型,通过发散和聚焦来打开思路,聚焦落地目标,以下是我总结的设计策略画布。


策略层:1、确定增长动力;2、锁定活动类型;3、故事场景化;4、IP角色品牌化;5、游戏化设计

风格层:插画风格、平面风格、立体维度、复古与趋势

基础层:配色、字体、图形、动效、声音



4.1 策略层

策略层是通过前期基于产品定位、品牌定位了解后,针对运营目标分析用户画像用的一系列的设计策略。为实现最优的业务转化,需要在设计之初明确活动覆盖的用户人群。同时在各个环节都能考虑到特定用户群体的不同需求,尤其是在业务转化的过程中,考虑用户体验地图,就能更好的到达运营效果。以下是我总结的策略画布:


常用的运营策层包括以下几个步骤:1、确定增长动力;2、锁定活动类型;3、故事场景化;4、IP角色品牌化;5、游戏化设计。


1、确定增长动力

增长动力是指用户产生行动共鸣的心理机制,是刺激用户增长的裂变的核心。



利益刺激:使用金钱、虚拟货币、实物大奖等,引起用户内心的金钱欲和贪小便宜的心理到达动力。比如抽奖、红包、返利、电子货币等。


共情刺激:激发用户的使命感、炫耀、好奇、从众、互惠等心理,使活动场景与用户心智产生共情的动力。比如账单、战绩、评价、祝福等。


艺术刺激:通过美图、插画、艺术图等,与用户达成审美和情怀共情的动力。比如年画、主题卡牌、美图美照等。


正所谓“无利不起早”,利益刺激是最直接有效的,属于马斯洛人类需求层次理论的生理需求。以下沉的拼多多为例,红包提现是不败的运营策略,以微信为分享载体的裂变是指数型的。共情刺激、艺术刺激则在更高的层次上,想要戳中用户心智就比较难。对于运营活动利益刺激是基础,同时如果能使用共情刺激、和艺术刺激可达到更高期望的需求。比如我在玩今日头条的集卡活动的时候,还能意外收获到十分精美的插画,风格正好又是我非常喜欢的,所以我就有了集卡的动力,就算没有得到卡,我还能分享我精美的插画何乐而不为。


2、锁定活动类型

确定增长动力后,需要锁定活动的类型。如果我们简单、易传播的原则,可以选用市面上常规用到的活动类型降低用户认知成本,对于一些比较有名的活动,像支付宝集五福,其本质就是通过完成运营任务来收集某种虚拟物品,再由集齐的虚拟物品变现红包完成用户利益激励。设计时不能完全照搬,既要根据活动目标结合产品自身逻辑层级优化链路,也要在表现层做好风格形式的区分,已达成有新的识别度的活动。



常见活动运营的类型:

收集类(集福、集卡);养成类(蚂蚁庄园、撸猫);操作类(鲤鱼跳龙门、金哥接金币);棋牌类(大富翁);抽奖类(大转盘、抽签);测试类(心理测试、智力问答)等。



3、故事场景化

故事场景化,是在锁定活动类型后,把活动主题化,围绕主题打造故事,引人入胜。良好的场景设计、氛围营造可以带来沉浸式的用户体验,也可以与用户建立情感共鸣。比如在金哥接金币的运营活动中,我们选用操作类的运营游戏类型。故事主线就是围绕IP金哥接金币得金币展开的。有了基础的故事背景,需要建立一个实际展示的场景。利用联想思维,天上掉金币,那么应该是在户外 ,金币掉到了金哥的哪里,是手上还是哪里,金哥还是在地面还是在树上。经过脑暴后选用了超乎常规的岛屿群场景设计,层次分明的场景,使得整个场景广阔,极富空间感。



4、IP角色品牌化

现在几乎每个产品都有自己的ip,一方面是连接品牌更容易使用户记忆,另一方面ip的扩展也为运营带来了趣味和无限的可能性。ip的使用一是要保证ip的识别性,另一方便是需要很好的融入我们的故事场景。比如金哥他出现在我们接金币的场景需要什么样的装束,使用什么动作更好的连接到这个接金币的故事场景中。一开始想着用箩筐去接金币,但是箩筐体积大而高,会挡住ip,降低了ip的识别度。在设计的过程中突然灵光一闪,为了什么不用平底锅呢,它除了打人,接金币也不错。通过金哥头顶平底锅的接金币方式,增添了整个游戏的创新性和趣味性,至于箩筐可以收纳平底锅接到的金币,整个场景就很有逻辑性和画面感了。同时为了凸显游戏的氛围,还给ip设计了头带必胜的绑带的小细节,和有冲击力的动作,增添了ip的生命力。






5、游戏化设计

由于游戏本身对用户就有一种天然的吸引力,加上可以很好的与运营活动结合打造沉浸式体验,越来越多活动都是与游戏结合来达到活动目标,也叫运营的游戏化。核心宗旨是“以人为本”的设计理念,并不是以功能为中心,在设计时可以使用游戏化设计八角模型。


使命——重大意义与使命感

让用户认为自己正在做的事情,其意义比事情本身更重要,从而达到激励用户的作用。譬如支付宝里面的蚂蚁森林,种的不是树,而是地球的一点绿,这个使命感瞬间油然而生,在玩的过程中还能帮助地球绿化,激发了用户环保使命感。再比如在奥运期间的微博的金牌大满惯的活动,以围观奥运会之名,集奥运金牌卡喊你助威中国,利用了用户对时时热点的从众心理,又联系到了爱国上升了到了爱国使命感。



成就——进步与成就感

指参与过程中取得进步、获得技能、获得荣誉,从而获得成就感,去克服困难达成目标。一般我们会通过证书,勋章,排行榜等去给与用户成就奖励。挑战和技能是促使用户不断升级的主要因素,为了让用户沉浸其中护住心流,适当的挑战难度和技能解锁就显得尤为重要。挑战难度高了容易引起用户的焦虑,难度低了又会让用户感觉无聊。比如集卡行动,在考虑总预算不变的情况下,如何设置稀有卡的比例,集卡的难度就尤为重要。支付宝集五福在初期,敬业福的比例比较低,所以用户抽到敬业福的体验就很开心,但随着支付宝后面为了扩大社交属性,提高了集齐率,集五到五福的兴奋感就弱了,导致部分用户失去动力,因为集到的人越多后续瓜分的钱就越少。


稀缺——稀缺性与渴望

当想要某样东西获得率很低的时候就有了稀缺性,能激发起用户更大的渴望。就像支付宝的敬业福,其他几个福集齐较快,获得后就没有很大的惊喜感,而获得敬业福就会非常激动,甚至一度风靡在微信朋友圈晒敬业福,因为集到敬业福相当于集齐了五福。这种稀缺也成为了氪金最好的办法,比如稀缺的装备,高于其他人的权限等。





创造——创意与及时反馈

制定基本元素、和规则,把玩法策略交给用户,给用户足够高的自由度,驱使全身心投入到创造性的过程。通过不断体验创造的过程,同时注重创造的结果,并及时的反馈。比如淘宝人生,可以打造自己的形实质上就是装扮类的游戏,这种常驻型的游戏,不仅可以提高用户使用产品的时长,还可以联动品牌做营销提高下单率。其生命力的不竭动力就源于,对用户不断提供创新的服装、妆容、饰品、场景,让用户自由创造新角。




拥有——所有权与拥有感

使用户拥有或控制某样东西,获得激励,持续升级。结合挑战设置,当用户通过一定努力而拥有的东西会倍感珍惜,也能激发其收集欲望和挑战欲。最常用的就是收集类的游戏,比如各种收集类的活动中,先会获得一个物品激发你对该系列的占有欲,不断收集其他款。还有一种常用的是勋章的激励,勋章本身是对行为的阶段性的奖励,好的策略和勋章样式同样能激发用户的收集欲。




社交——社交影响与关联性

社交影响指的是别人的状态、想法、行动、言语等对外展示能驱动到他人,也就是我们的行为通常会收到其他人的影响,比如羊群效应。就像看抖音,点赞量多的,没准我们会跟有耐心看到最后,因为有个潜意识心理就是大家都觉得好,总之差不到哪里去。在游戏和运营活动中,营造有很多人玩的氛围,鼓励用户炫耀自己的成果都是非常见效的方式。关联性我理解为我们会选择尽可能与我们有关联的事物。比如拼多多推荐你去分享,都是优先推荐与你互动最为频繁的,这样去拼单和拼单成功的几率更高。




未知——未知性与好奇

不知道接下来会发生什么,勾起用户的对未知的好奇心。比如闯关,玩家不断闯关就是这种未知带来的牵引。在活动运营中最常见的就是大转盘抽奖,现在比较流行结合盲盒的活动,就是满足猎奇心理,让用户欲罢不能.



亏损——亏损与逃避心

利用用户害怕损失属于自己的东西来让他们参与进来。可以结合损失厌恶来理解。损失厌恶是指人们面对同样数量的收益和损失时,认为损失更加令他们难以忍受。同量的损失带来的负效用为同量收益的正效用的2.5倍,可见损失对我们的心理影响更大。比如商家发给你的免费优惠券,其实你本身不需要购买什么,但是商家偏偏在优惠券上加上时效性,超过活动日期就置灰了,即使你原本没有购买需求,但是感觉没用掉优惠券就像损失了优惠券的钱一样,就会去购买,甚至为了凑单购买更多东西。



结合游戏的运营中,八角模型的原则不一定都需要用到,但是优秀的基本都会使用到所有原则。而最基础的使用到的原则就是“成就”,“拥有”和“社交”,就是利用金钱刺激,促使用户分享。成就、拥有、稀缺都属于外在动机,创造、社交、未知属于内在动机。短期的活动中一般为了快速引流会主要使用外在动机的抓手,如红包、优惠券,这种效果显著,但是一旦失去供给红利,就会面临用户流失。所以做一个长期或者大型活动,需要尽可能的提升内在动机,使用户真正对游戏上瘾,才有可能获得更多的活跃的用户。



4.2 风格层:


风格层主要从这几个面入手:插画风格,平面风格,立体维度,复古与趋势。运营的设计风格主要是从插画风格和平面风格衍生和组合使用。


插画风格:在ui界分为有扁平插画、肌理插画、手绘插画、MBE插画、渐变插画、2.5D插画、描边插画等。

立体维度:按照立体维度可分为扁平风格、立体风格(3D风格)、写实风格(真实质感,照片合成),在确定立体维度的时候一般会确定整体风格的质感。

平面风格:赛博朋克、波普风格、孟菲斯风格、“FUI”未来风格、蒸汽波风格、以及前几年流行的“故障风格”和现在非常流行的弥散流体酸性风等。


结合实际风格还有一个维度可以对风格进去区分就是时间维度。首先设计师应该把握最新的设计趋势。比如在扁平风格流行了很长一段时间,现在慢慢又开始进入立体的风格,尤其是C4D的使用,使得3d风格又风靡设计界。把握潮流趋势的一般都是当下流程的设计风格,在特定主体下我还是可以追溯时间线,做一些复古风的设计。复古风分中西方,也分具体的历史时间节点,可以根据主题选择。



风格选用原则

一、符合产品调性

二、顺应设计趋势

三、具有鲜明特色



4.3 基础层:

确定好活动风格后就是打造活动的基础层,活动最基础的就是配色、字体、图形定下了整个活动的基调,而动效声音则拉开了活动运营的体感纬度。


配色:不同的主题色和配色对整个活动的氛围和用户的心理感知是不同的。除了常规的《色彩心理学》知识(这里不做展开),由于人们庆祝节气的习俗,衍生到活动运营还跟时令节气、季节、传统节日、新兴现象级节日(如双十一、618等)有关;值得注意的是运营活动虽然相对有独立的闭环,却是产品不可获取的组成部分,因此活动运营的风格需要与产品气质、核心品牌理念一致。比如工具类APP,基于色彩感受,将主要颜色进行延展并融入整个活动中,突出活动科技、智能的视觉感受;电商APP通常比较注重买卖氛围,喜欢大红大紫来塑造商场大卖场的感觉,刺激用户的购买欲,而金融APP更偏于冷静克制,留白较多,颜色使用也不会过于花哨,有些还比较忌讳使用绿色(这个跟用户喜欢涨的心理有关)。


字体:字体的使用一是需要体现活动特色,二是注意字体的版权。好的字体设计可以提升整个活动的画面质量,尤其是标题可以结合主题重点设计,体现活动特色,吸引用户注意。主体内容可以用一些免费商用的字体。整体字体的使用不要超过3种,过多的字体会使画面感受不高级。


图形:图形分为大块面图形和点缀性图形,大块面的图形使用可以很好的起到第一眼营销的作用,比较适合创意图形;点缀性图形比较适合提升活动的氛围,提升局部的质感,还可以给人一种润物细无声的精细感。


图形的选择可以从这几个方向入手:

a、风格角度入手:使用具有风格特色的点线面的几何图形,如孟菲斯风格。

b、品牌、ip、logo基因图形:品牌图形、ip、logo是最具有产品视觉识别性的,从中提取品牌基因图形,即简单,又可以有效的与产品品牌挂钩,抓住用户心智塑造品牌认知。

c、选用主题活动的关联图形:从主题的联想衍生去创造符合活动的图形,将衍生图形重新结构化成为活动的主题标示性图形。




动效声音:常规活动运营的动效主要是用在关键按钮、操作引导、页面转场、获得荣誉、点睛小元素上,主要是为了吸引用户关注提升转化率,同时提升用户的愉悦度和体验感。与游戏结合的运营活动动效发挥的空间就更大了,但是不能单纯的理解为动效,游戏更是一个动态交互的过程。游戏中动效和声音的使用,能拉开了活动运营的体感纬度,比如鲤鱼跳龙门就是利用了游戏、动效、声音、点击形成视听触的三维立体感受,鲤鱼吃金币的游戏过程惟妙惟肖,又简单易操作,成为金融游戏的典范。




五、数据与策略思维


5.1、不同时效性的运营优化方案不同

运营类活动中数据跟踪与策略思维是保证活动效果最大化的有效手段。根据运营目标,提取关键的转化点进行埋点,获取CTR(转化率)。运营活动从时效性来分可以分为:常驻性运营活动和时效性运营活动。常驻性运营活动我们可以使用abtest去选着更优的设计方案,甚至是隔段时间替换方案,对比分析数据进行方案选择和优化,这个跟产品优化逻辑类似。时效性运营活动使用abtset的成本太高,所以一般是在上线后根据埋点数据监测来调整相关设计元素、局部交互、文案等来提升CTR(转化率)。

目标——策略——埋点——跟踪数据——修改


1、常驻性运营活动:使用ABTest选择更优方案

2、时效性运营活动:根据埋点数据监测调整相关设计


5.2、上线后运营优化


1、提升曝光率

内循环中多渠道触达提升曝光率:app、pc端、微信公众号、短信召唤、线下海报、应用市场等;外部渠道投放:针对不同用户细分在用户感兴趣的外部热门渠道投放活动,吸引用户参与活动。



2、提升链路转化

1)、关键节点文案优化

比如在某证券活动中,我们针对线上数据结果做了以下优化(仅部分):

a、跑马灯文案激励,时时播放中奖名单营造活动热度,提高活动可信度,激发用户从众心理。

b、完善邀请引导,对于新手用户以及没有邀请好友在顶部进行二次提醒,以大奖刺激用户参与邀请。

c、用户进阶游戏文案提示完善,对不同等级用户给于不一样的红包激励。

d、排行榜展示策略调整,前几百名瓜分大奖的文案优化与曝光。



2)、发放策略调整

根据活动领奖数据分析,通过管控台灵活配置各个阶段红包金额与数量,提高不同阶段的用户转化。


3)、断点用户召回

通过push、短信的形式对活动用户分层分类在合适的时机触达,吸引用户再次参与。


4)、裂变路径优化

a、展示榜单(可刮分大奖)最后一名数据,展示邀请人数,激励榜外用户冲刺榜单

b、已接受好友再次填手机号验证,引导至换起app页面

c、绑定邀请关系后,增加弹窗引导用户


3、优化效果对比与总结

根据优化前后的数据进行对比分析,把有效提高数据的策略点总结出来,可复用在其他项目。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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


用户调研实战指南

ui设计分享达人

由于产品性质和业务阶段,身为B端设计师更加需要贴近一线场景,深入了解业务逻辑和用户使用场景,在不断深入的用户调研中,也收获了一些心得和经验,所以和大家分享一下我常见的三种用研方式,相关物料可以通过文章底部的原文链接得到获取方式


一、认识用研


1.1设计师为什么需要了解用研


我们对产品进行设计探索的本质是利用已知信息去挖掘未知信息,最终利用获得的信息进行决策的过程,信息的完整、准确程度与判断力、等共同决定了决策过程中错误决策的概率高低


用研的过程就是一个信息的收集与处理的过程,在信息不足时我们可以通过同理心来“侧写”用户心智推测信息,这一点从事C端设计的小伙伴应该感同身受,但由于B端用户画像与设计师自身往往偏差较远,单纯的通过同理心来感知用户心智的门槛和难度较大


此时我们就需要通过用户研究的手段获取更准确更完善的信息,通过用户研究,设计师可以贴近一线场景,了解用户的真实场景和工作诉求,切身感受到产品的业务逻辑和使用链路,以便我们进行更准确的设计决策,同样的,这样也可以让我们的设计方案在讲述时有理可依,有据可靠,更容易获得上下游的信任


接下来是我对于可用性测试、用户访谈、问卷调研的学习总结,简单与大家分享,大家有什么见解也可以互相交流


1.2用研的纬度


这是《赢在用户》书中经常被人用到的用户研究二维分布图,这幅图很好的展示了用户研究的纬度,横轴是研究用户的结果;纵轴是理解用户的方式,行为、态度,即观察用户做什么、听用户说什么,因此,用研主要通过定性调研和定量调研分别关注用户的行为或者态度


那么什么是定量,什么是定性,行为和态度之间又有什么样的关系,在正式进入用研工作之前,有必要对这四个方向进行一个简单的了解


定性与定量


定性与定量是用户研究中常用的两种方法,两者之间性质和分析方法有一定的差异


  • 定性研究主要回答“是什么”和“为什么”的问题,是对种类或者质的差异的分析,说白了就是通过经验、逻辑、同理心等非量化的方式去分析【主观】的信息

  • 定量研究,除了能告诉我们是什么以外,还能告诉我们“是多少”,一般指具体【客观】的数据信息



通过上述示意可以发现,定量更加在意得出的数据,至于为什么会得出这个结果,就需要通过定性数据去验证,因此定性分析在一定程度上会更偏向于阐述某件事物的意义


二者是站在不同的角度看待问题——定量关注数,定性关注人,在实际工作中定性与定量往往相互配合,例如通过定量挖掘关键数据,再用定性剖析原因,最后定量进行验证,两者结合以求得研究效果的最大化


行为和态度


行为主要是指用户的某种动作,比如操作时的点击、滑动,以及视觉的关注点、肢体语言等,这些都是下意识,无需思考的行为数据,这些数据可能与信息层级、传递效率、操作时长、交互链路等息息相关,观察收集这些行为数据的最终目的是了解用户为何按照自己的方式进行操作,与我们预期设想的路径有什么不同之处,进而探究是什么促使用户做出的行动


态度则是用户的主观想法或者情绪,情绪会诱发用户产生一系列行为,例如操作遇阻时的焦虑,对产品体验不满的愤慨或者Aha moment时的惊喜这些都反映出了用户对于产品当下体验的一个态度,关注这样用户态度就能收集到产品体验的信息,所以,用户行为导致了某种结果,态度则揭示了影响行为的根本原因



在了解了定量与定性,行为与态度之后,我根据目前工作中常用到的可用性测试、用户访谈、问卷调研,并对每个方法的适用场景和进入调研的关键动作进行详细分析



二、如何选择用研


在开始进行用户调研之前,我们需要根据具体情况确定调研形式,以便实施后续的展开工作,根据用研目的、产品设计阶段、频次、所需样本量和成本等多方面因素进行考虑,选定适合当下情况的调研方式



三、用研执行关键动作


A. 可用性测试


1.准备阶段


1.1明确测试目的

首先应该以目标为导向,确定需要测试的产品是什么,想要验证什么样的结论或者达到怎样的预期,是为了发现产品或原型中可用性的问题,还是借此与竞品进行有效性、效率、满意度的比较,或是对某些功能点进行测试


1.2设计测试任务

在明确测试目的后开始设计测试任务,测试任务是可用性测试的核心内容,需要根据已经确定的测试目的结合用户在实际使用过程中可能存在的场景和需求,将任务场景化,然后对复杂任务的整体流程进行拆解,列出任务列表,以此来编写任务提纲


任务包括场景,操作和具体目标,设计的任务要有代表性,对应的功能或模块必须是功能使用的典型场景、尽量模拟用户真实的使用场景;在任务描述时做到语言简洁,避免指定的操作或引导用户,若任务流程较长,可以进行拆解形成多个用户触点,但触点操作不需要告知用户,仅在用户操作时进行观察即可

1.3 设定衡量指标

在设计好测试任务后,我们需要为任务匹配对应的可用性指标,目的是为了通过指标反应测试内容的可用性问题,帮助实施者有重点的进行观察和记录,还可以结合ASQ量表帮助测试者对每个测试任务的完成情况和满意度进行反馈


可用性指标主要包括有效性、效率性、满意度;这三者构成了衡量指标的一级指标,而每个一级指标下还包括更加细分的二级指标及衡量方式和标准,这就构成了可用性指标对照表;我们依照可用性指标对照表对每个任务的重点有了基本的概念,并且可以根据具体任务描述和衡量指标得到测试记录表

现在我们对每个任务的可用性指标有了基本的概念,但是可用性问题除了从实施者角度去观察用户行为和结果,还需要帮助测试者结合任务进行自评和反馈


而在帮助测试者进行任务反馈时,需要将有效性、效率性、满意度站在测试者的角度进行更加通俗易懂的拆分和信息传递,并且能够做到量化分析,这也就是ASQ评估量表的作用和目的


有效性可以理解为任务的完成情况,即成功完成、求助后完成,未能完成

效率性则是针对特定任务,观察其完成时间是否在正常范围内,其任务完成路径是否符合标准路径,是否存在偏离和犹豫的地方,在进行定量研究时常用指标有任务完成效率、理想路径偏移率等

满意度则是用户自我报告数据,包括任务完成难易度评价、任务完成满意度评价、及评价原因


根据场景描述、测试任务、节点反馈和ASQ评估量表,我们可以得到“任务卡片”,“任务卡片”可以帮助用户快速进入角色,明确内容,量化反馈,在每次任务完成后,将测试者所勾选的ASQ选项对应的分值相加,便可以得到任务评估分值

1.4准备测试脚本

可用性测试一般情况下需要两人协同配合进行,通常一人安排任务鼓励用户发声,一人观察记录,由于涉及内容较多,成本高样本含量低,对被试用户进行的活动任务也比较复杂且环环相扣,所以为了保障测试任务更好的实施,一般情况下会准备一份较为完整的测试脚本以供团队更好的配合


一般测试脚本包括自我介绍、访谈预热、测试规划、测试任务、量表问卷(可选)、结束语、记录文档、相关文档


1.5准备测试原型


1.6招募用户

用户可以大概分为新手用户和专家用户两种类型,当然也可以进行更精细的划分,例如(萌新、高浅、活跃、专业)在招募时为了结果可靠,应避免产品设计相关人员的参与,选择有代表性的用户,其中真实的产品目标用户为最佳,测试者不宜过多,一般5名左右就够了


例如调研XX产品的直播教室的可用性问题,就需要招募已在平台入驻且售卖直播课的老师,在招募时还需要进一步的筛选,如果招募的5名老师都是长期使用平台产品进行直播上课,用户对于产品功能足够了解,关注点会与新手用户会产生较大的差异


1.7准备场地

包括预约测试场地、记录设备、分配主测员和观察记录员、准备相关话术及活动礼物

  • 测试场地:一般选择安静明亮的房间/会议室进行,访谈者和用户最好呈90度的座位

  • 记录设备:安装测试产品的电脑、手机;记录设备可以使用录音笔、相机或DV。设备要稳定,电量充足


2.测试中


2.1暖场

在了解用户情况和布置任务前,不要太直接的进入测试氛围,营造一个相对轻松的交流环境。先聊点轻松的话题,“您从哪里过来的呀”“平常工作忙不忙”等问题,缓解气氛,把用户带入测试场景。可和用户聊聊被测产品相关的小问题,平时怎么用的?一般什么时候用?感受怎么样等等


2.2布置任务

向测试者发放任务卡,结合任务卡中的角色和使用环境对任务进行简单的介绍,如果是专家用户任务就不用过多描绘场景,可以具象更具体的任务——“上传一门新的课程、将课程分成基础班和进阶版分别售卖”等等


2.3观察并记录用户使用过程

这个过程观察记录和引动测试者随时的发声很重要,与其他用研方式不同的地方在于可用性测试可以了解到用户在操作时的想法和行为,用户的发声思考可直接影响可用性测试的效果和结论


我们可以适当引导用户进行思考发声,甚至可以为用户做一些简单的示范,例如 在新建时,可以说“我准备新建一门课程”,“我正在寻找建班功能,我现在遇到一些问题”等等,将自己操作时的想法表达出来,不需要刻意去思考,这有助于主测员去了解测试者的想法和感受

每个任务完成后,通过“任务卡片”重点回答测试者任务的完成情况,遇到的问题,询问测试者的态度和感受,还需记录任务完成的时间;与任务不相关的反馈可以记录在备注中,而在记录时尽量采用词组、短句的快速记录方式记录核心内容,整理后作为优化任务帮助产品进一步提升可用性和易用性


2.4进行量表问卷

ASQ量表

上面在介绍可用性指标及任务卡片时我们有提到ASQ量表,其主要涉及有效性、效率性、满意度3个方面,安排在用户完成单个情景任务之后,这时用户对于任务流程的操作感受是最明确和清晰的


SUS量表(可选)

SUS量表一般在相对完整产品整体的大型可用性测试后才会使用,因为一般的中小型测试任务比较集中和针对,用户无法感知整个系统,量表针对测试设置10个问题(有效性、效率、满意度),包含5个选项:1分(非常不同意)、2分(不同意)、3分(一般)、4分(同意)、5分(非常同意)

在布置问题时,奇数问题采用正面阐述,偶数问题采用反面阐述,以此来确保用户评价的可靠性

单个测试者提交量表后,我们需要计算量表分值,奇数项计分采用“用户打分”-1,偶数项计分采用“5-用户打分”,由于是5点量表,每个题目的得分范围为0-4,共10题,所以最大值为40,而SUS的范围在0-100,所以需要将所有转换分相加后乘以2.5,即可获得SUS分数

3.测试后

3.1问题归类分析

简单测试直接根据发现的问题优化设计即可;如果目的是用于讨论和汇报,需要对记录内容进行整理和输出,这时需关注问题的出现频次、优先级和用户反馈,按照问题维度分类,将不同用户暴露的相应问题进行合并,罗列问题所对应的功能点、可用性指标、用户比例、用户反馈及相关现场记录文件,之后基于问题对业务和体验的影响划分优先级并且标出对应的PM同学,最后针对这些问题给出优化建议


问题优先级的划分方式

通过前期记录观察以及录音录屏我们可以发现用户在任务测试中遇到的问题,根据问题对任务完成度的影响,我们可以划分为P0(紧急问题)、P1(重要问题)、P2(次要问题)的方式对问题进行优化和排期

  • P0:用户遇到阻力且无法解决,未能完成任务的问题

  • P1:用户遇到阻力且反馈频次较高,在求助后完成任务的问题

  • P2:用户遇到阻力但可以自行解决,完成任务但感到不顺利的问题


3.2输出测试报告

较大的可用性测试在得出结果后需要向团队内的成员分享,所以需要进行一次报告输出做到内容对齐,一般包含整体概括、重点发现、项目背景、测试过程、测试结论、优化方案几个模块,具体汇报形式是不受限制的,一般文档形式输出较为高效,keynote汇报从内容和形式上会更加丰富

  • 整体概括可以将测试背景及测试结论简单的阐述,其中测试背景包括(项目背景、测试内容、施测情况),测试结论包括(测试结论、优化建议)

  • 项目背景就不必多说了,将业务背景和测试目的进行简单概括即可

  • 测试过程包括准备阶段(如何招募用户、招募了多少名、用户的基本信息和类型;有哪些测试任务、如何进行测试和记录形式)及测试阶段(本次测试安排的任务、设计的量表问卷、现场的录像照片)两个环节进行展示

  • 测试结论需要将暴露的问题进行问题描述,结合整理的文档表格详述问题未读和用户反馈

  • 最后,结合问题提出完整深入的优化建议和解决方案

3.3后续跟进方案

  • 探讨解决方案:协调产品、设计等多个角色来探讨合适的解决方案,要注意,设计时要思考新方案是否会带来新问题,并再次通过可用性测试来验证新的方案。

  • 持续跟进:了解项目结果的落地情况;已改进的问题或遗留的问题可在下个版本的测试中继续跟进




B. 问卷调研


在进行问卷调研之前,我们需要认识到问卷调研包括两种调研类型,定量调研与定型调研,实际上大部分的问卷都是定量调研,需要大量的用户样本,在收集问卷后需要分析数据占比来验证用户想法,另外小部分就是定型研究,一般原因是因为用户样本量较小,通过小样本量来研究产品的可用性问题


1.问卷前的准备

1.1明确调研目的

问卷调研中设计者并不直接接触用户,所以在问题的深度和广度上是有限的,一份问卷不能解决多个问题,通常会围绕解决1-2个核心问题去研究,在设计问题之前需要明确此次问卷调研的目的,然后围绕这个目的去思考各种问题,通过怎样的问题达到怎怎样的结果


例如通过思考和确认,针对我们这款由0到1的知识教育平台型产品,其调研的目的主要在于

  • 需求验证,包含对用户进行市场分析、了解现状、发现问题,从而提供解决方案,再到两端用户是否满意现在的解决案

  • 用户接受并付费的意愿如何。收集用户信息、挖掘分析用户的付费意愿以及付费习惯


问卷的目的一般可以分为六个方面:

1.2目标用户分析

对调研用户进行分类是较为重要的环节,用户类型不同,问题内容也不同,只有在不同角度不同用户下设计的不同问题才会获得有价值的结果


这种情况在问卷中还是比较常见的,例如我们填完问题一后,根据选择的不同,可能会跳转到问题三或者问题五,这就是问卷设计者根据不同用户分类进行的多种问题设计


例如在收集知识平台满意度和相关竞品使用习惯时,个人机构和组织机构的视角是不一样的,B端客户和C端消费者的视角也是不一样的,所以在问题设计时需要分开对待

问题根据用户分类设计的好处在于问卷后期可以快速验证产品的用户类型和比例,提高调研质量和数据可信度,便于后期对用户进行更加深入的调研


举例

结合上面调研的目的及用户分类,以此我们思考在问卷的设置方面:

对于B端(老师)来说,首先要了解的是客户目前是否有在使用我们提供的服务、什么时候会使用、使用的频率是多少、目前使用的体验如何、有没有遇到什么问题、有什么建议、对我们提供的解决方案是否愿意接受

对于C端(学生)来说,首先需要了解的是用户基本信息,是否使用过课程相关的服务,用过哪些竞品、吸引用户的点在哪等等


1.3内部需求对齐

当需要有问卷调研的需要时,首先应该与团队内部各合作方对齐调研意向,一方面是为了避免过量的问卷投放打扰到用户,另一方面问卷调研属于团队项目,在团队内部充分讨论调研目的后或许你会了解到各业务方当下最关心的用户问题从而调整调研问卷的内容甚至得到更好的解决办法,这样一来才能将问卷调研的价值最大化

例如教育平台侧在新版本上线前为了调研售课老(机构)师对平台使用的满意度和深层次的需求问题,那么在发起调研之前,需要跟产品、教研、客服等业务合作伙伴对齐需求


2.设计问卷

2.1划分问卷模块


设计具体问题之前,我们需要预设几个问卷的模块,通常围绕几个类型:用户类、行为类、产品类、态度等,在得出完整的问卷之前,我们不需要考虑问题的先后逻辑是否合理,先根据调研目的和模块类型进行问题穷举,当用户模块相关问题写完后再继续写下一个模块的问题,直到所有模块的问题都已经设想完毕,在对问题进行重组

用户类:收集用户基本情况,方便我们了解用户群体,比如:职业、学历、团队构成

行为类:了解用户的行为或者与围绕产品相关但不涉及产品本身的问题。比如:有没有在其他平台入驻、售课时视频课比较多还是直播课比较多

产品类:了解用户直接与产品相关的体验问题。比如:对产品印象如何、一般使用某产品的哪些功能、频率怎样、还用过哪些竞品、喜欢哪些功能

态度类:用户对产品的看法。比如:评价、好感、想要的功能;尽量避免提一些无法判断、没头没尾的问题,一方面对产品优化没有帮助,另一方面会降低用户的的期望


2.2衡量问题类型

问卷的问题形式是多样的,题目类型主要有封闭/半封闭问题、量表式问题、开放式问题组成,需要根据具体目的来选择相对应的问题

封闭/半封闭题型的选择在于能否将答案穷举,避免出现用户因为没有合适的选项而随便勾选答案的情况

量表题型在答案上有明显的程度高低区分,设计者对该问题有进行统计的需求

在问卷中应尽量避免较多的开放问题,一般在针对某种方向/某个定性的问题做预探索时使用

这里只对问题的类型做简单的概述,具体的形式是多样的,例如选择题可以有单选、多选、图片选择;量表题除了打分之外,还有排序和点数分配等其他形式


2.3问题重组

在得到具体的问题后,我们需要对问题进行重新编排,通过改变问题的前后顺序来保证用户在可控的情况下进行真实的问卷回答,除了按照问题的难易度之外,还需要根据问题的属性由浅入深的重组问题

例如问卷开始先安排过滤题用于过滤用户,识别用户是否符合问卷的目的来保证问卷数据的质量,然后按照暖场型问题、渐入型问题、高难度问题、敏感问题来对问题进行重组,当然这些顺序并不是固定的,需要依据具体的问卷内容进行调整

关于过滤问题:

用户在实际问卷回答中,受到各方面因素的影响有很多,例如有时用户出于自我暗示、自尊心或者时间紧张状态下,很难根据自身实际情况完成问卷调研,而是随机挑选或者作出相反的选择,这种问卷在回收后会对定量分析造成干扰,所以我们需要依据问卷重要程度,安排适量的过滤题来避免此类情况的发生


比如在对于关于产品改版的满意度调研中,向用户询问有关产品功能的问题

如果用户回答“某某功能”,但在是否知道时选择了否,或者使用时长很久,但却不知道某某功能时,在后期数据中,可以将这部分无效问卷去除


  • 问题注意事项


3.问卷投放

3.1问卷评审

一切准备就绪,是不是准备投放问卷了?别急,许多问卷在投向用户之前,往往会忽视通过内部手段进行问卷自评,通过问卷自评可以发现这份问卷有没有偏离最初的调研目的,你所设想的问题用户是否可以正确理解、问卷是否有可优化的空间等

一般自评包括3个环节:问卷自审、问卷内审、问卷内测


  • 问卷自审

问卷设计完毕之后,需要根据最初确定的调研目的对问卷进行自审,可以站在用户的视角对问卷进行第一次填写,确定问题是正确有价值的,是有其他选项,也可以估算回答问卷所用时间,问题中的词语是否能被用户理解且没有歧义等


  • 问卷内审(可选)

不少公司内部有设立专门的用研团队,在确立调研需求初期就应该与需求方深度绑定,有明确的需求认知,有句话叫当局者迷,邀请用研团队参与审查可以从专业角度把控用研目标,评估问题是否能被用户接受等,他们可以从一些不同的角度发现问题


  • 问卷内测(可选)

内审之后,可以借助产品的代表性用户(一般3-5人)进行问卷内测,通过观察填写情况来检验问卷设计的合理性,例如观察答题时间、用户类型与题目是否关联等等,确保证问卷上没有其他问题


3.2预计采集样本量

内测完毕之后,就可以向用户投放问卷了,为了避免给过多的用户造成打扰,我们需要根据产品的用户数量判断问卷的投放数量

一般没有明确规范多少用户投放多少问卷,基本都是自己判断,一般如果总用户量不足30,需要至少覆盖50%(15个);如果总用户量30-100,30人以上就可以;如果是总用户量100-1000,覆盖20%-50%就可以。


3.3选择投放渠道

我一般常用投放渠道有:1)飞书推送;2)站内公告;3)其他内部资源


问卷调研基本分为线上调研,线下调研两种方法,线上通常是问卷投放或者电话询问的形式,线下一般与用户访谈相结合,做到定性定量相结合;选择投放渠道时,一般根据调研目的、投放预算、预计采集样本量、统计分析成本来进行判断


4.数据清洗产出报告


一般用研团队会使用专业的解决方案快速作出数据分析,比如SPSS,而设计师在实际工作中很少会接触到此类工具,因为此类视角下探索的方向和内容更加具体,变量在可控范围之内,不太需要复杂的分析模型,较为常见的更偏向Excel或者问卷平台自带的分析功能,所以我们可以对分析思路做一个简单的了解


4.1数据清洗

前面在问题设计时我们有讲到筛选题相关的内容,加入筛选题的目的就是在数据分析前便于我们将异常问卷剔除出去,保证最终结果的准确性,除了观察筛选题的选项之外,我们还可以根据问卷填写时长、量表打分规律、问卷填写完整度等几点进行问卷筛选


4.2问卷分析

  • 看整体

还记得我们设计问题的第一步划分问卷模块吗?模块通常围绕几个类型:用户类、行为类、产品类、态度等,在分析问卷时可以基于这些结构得出一个较为整体的情况分析,例如用户群体结构(用户类)、存在的问题和新的诉求(用户建议)等,通过对比相同角色的回答,找出共性的问题和信息


  • 看差异

在得出整体结论之后,我们可以通过差异分析深入挖掘更多信息,例如观察不同用户角色对于产品的建议或者评分,会发现用户角色对于产品的建议和需求是不同的,这种分析方法重点在于找到两个可能存在关系的因素,通过对比不同角色的回答,找出差异和影响因素,根据上述举例就是将(是什么)(怎么样)进行差异对比


  • 问题归类

根据反映问题的模块对用户问题进行归类分析,写明用户的问题描述和具体模块,并且对后续优化提供解决方案


4.3产出报告

问卷报告一般包含调研背景、问卷回收情况、调研结论(功能优先级、用户反馈、数据展示等)、整体评价(功能评价、体验评价)、等,分析时从数据出发找出差异,分析原因,给出结论,在具体汇报时可以按照先结论后具体问题的方式呈现报告,同时可以结合数据提供相对应的解决方案


  


C.用户访谈

1.访谈前

1.1明确访谈目标

明确访谈目标,可以保证访谈内容在大方向上是一致的,例如调研班主任实际外呼的场景及外呼时关注的信息,在访谈时就不会去问关于主讲排课的问题,也可以防止访谈过程中遇到富有表达欲的用户偏离主题,在访谈过程中难免有用户兴致勃勃的谈论自己对产品的看法,在这种情况下,拥有明确的访谈目标可以保证深陷用户的情境中不迷失访谈方向,保证访谈的最终结果是有价值的 


1.2确定访谈类型

根据不同的访谈目标,可以分为三种访谈类型:


  • 开放式访谈

在围绕的主题和问题上都是开放的,没有固定的问题也没有固定的答案,采访者可以根据受访者的表现进行相应的问题补充,受访者可以充分表达自己的观点和意见,氛围最为轻松,接近人们日常的对话,适合进行定性研究。但即使是选择了开放式访谈也需要事先准备访谈提纲来确保此次访谈是有效的


  • 结构式访谈

有严格的问题顺序,采访者必须按照顺序和题目提问,受访者回答的答案都是固定的A、B、C、D,这就需要采访者必须有一个很清晰的目标,在问题的设计上要仔细推敲和打磨受访者可能回答的形式,当然,再缜密的设想在实际访谈中也会有意外,所以也会设置一些开放性的问题让受访者可以自由的进行表述,并给出更加开放和深入的回答,适用于定量数据的研究


  • 半结构式访谈

是实际工作中运用的最多的一种形式,在形式上是结构式与开放式的结合,包含了固定的的问题之外,也设置了开放式的问题,根据访谈时的受访者的实际情况进行问题的增减,适合定性+定量研究

按照访谈的途径来划分,又可以分为线上和线下两种,在受访者不方便的情况下可以进行电话访谈的方式来进行,但是如果访谈包含较为复杂的经历和过程的询问,线上访谈比线下访谈要逊色不少


1.3设计访谈提纲

明确访谈目的与访谈类型后,就要基于访谈目的,拟定访谈提纲,访谈提纲是方便与用户交谈过程中抓住核心,保证访谈高效有序进行的关键,就类似一个标准流程,保证需要研究的问题都可以包含在内,访谈提纲一般包含五个部分,分别是访谈目的、开场白、提问访谈、用户演示、结束语(基本信息、过往经历、产品感受、流程体验、竞品体验),其中提问访谈可以根据具体的访谈内容展深挖细节或者发散问题

提问访谈是提纲中较为重要的一环,问题设计要由易到难,由浅入深,由边缘到核心,在开始阶段设计一些简单的开放式问题来营造访谈的氛围,这个过程中可以了解用户的基本情况或者对产品的使用情况,等访谈向一个方向聚焦时,再逐渐收缩问题范围,逐步追问核心问题

设计好的问题还需要整理成访谈记录表,在进行访谈、时,一方面按照访谈清单大纲尽可能的进行脱稿提问,另一方面则需要记录用户对于问题反馈,记录问题时记录员最好记录用户的逐字稿,以便于后期进行记录整理时不与用户表达产生偏差


1.4招募用户:

用户招募是较为重要的一环,承接访谈前后两个阶段的关键节点,用户招募准确,后面的访谈才有实际意义,招募哪些用户是由访谈目的所决定的,一般招募环节分为三部分


  • 1.41.明确目标用户

招募用户的选择是由访谈目的决定的,不同的访谈目的所招募的用户是不一样的,一般按照使用产品深度的纬度来划分用户

  • 核心用户:产品中较为活跃的用户

  • 边缘用户:产品中即将流失或者已经流失的用户

  • 潜在用户:当前并不是产品用户,但在产品定位的用户群体中


而访谈目的一般有两种情况

  • 研究产品所存在的问题,例如研究一下最近用户活跃度为什么下降

  • 研究产品目标用户所存在的需求,例如研究用户对新功能的满意度


所以如果访谈目的是发现产品现存的问题,那么应该去寻找核心用户,他们那对于产品有着明确的认知;但如果为了增长,则应该寻找边缘用户和潜在用户,他们会告诉你他们需要什么,你需要做什么


  • 1.4.2多渠道招募

面向内部用户的产品进行用户访谈时,一般直接找对应访谈者的leader或者pm沟通即可,而在对外产品时则需要根据确定的筛选条件进行用户招募工作


核心用户的招募相对边缘用户较为简单,一般可以通过行为日志数据、登录时留下的联系方式、产品用户群或产品内运营推送推送来招募核心用户


潜在用户由于对产品接触较少,一般通过问卷、外包招募、熟人推荐的形式进行招募

  • 1.4.3验证目标用户并邀约

在得知用户是否愿意接受访谈后,需要再次验证这些用户是否真的符合样本特征,要注意的是,筛选访谈对象要注意平衡,避免同一类型的对象占了过多比例,导致访谈结果不全面

例如做一次关于学习平台APP的功能优化访谈,就要避免对象大部分是管理者、80后的情况,因为用户不是目标用户、80后用户的需求频率不大

很显然,90后/95后/00后、大学生/刚进入职场的职场新人才是我们的目标用户,那就根据这类人群的角色模型来筛选邀约对象


1.5准备场地和物料

  • 场地选择

用户访谈的可选场地有很多,大部分是请用户到公司来使用公司的会议室,或者有的公司拥有休息区或者共享空间,环境较为舒适和温馨,也是可以的


需要注意的是,场所的选择也会对访谈有些影响。应该尽量选择温馨舒适的环境来打消用户的紧张感


  • 物料

采访者需要提前准备好物料,包括访谈记录表、访谈提纲、录音设备;访谈时可以一人负责提问,另一人负责记录,在使用录音设备对受访者进行录音时,需要提前告知并取得同意


2.访谈中

2.1开场白

在一切准备工作ready之后,可以进行访谈了,访谈中难免遇到一些不善表达的用户,如果一开始就切入正题进行访谈,访谈者可能在紧张的状态下无法与采访者达成信任关系,气氛就会有些尴尬


所以需要先进行简单的寒暄和自我介绍让气氛轻松起来,还可以简单介绍访谈的背景、流程、内容、时间,告知受访者今天只是探讨问题,没有对错之分,所以希望畅所欲言,不要掩饰真实想法

2.2访谈并记录

还记得咱们前面准备的访谈提纲吗?在进行简单的暖场之后,我们可以先对用户的基本情况和使用经历进行询问,从职业、流程、爱好等基础信息作为切入点,为用户营造特定的使用场景,然后再进入访谈环节


访谈时,抛出问题的目的不仅仅是得到用户的一个结论,而是希望用户借此将自己的体验和前因后果告诉采访者,然而很多时候,用户告诉我们的信息都比较浅显,比如“我想要个xxx功能”“我觉得xxx挺好的”,这时我们需要对用户想法刨根问底,从而证实用户说的“想要xxx功能”是否合理,或者看能否想到其他解决方案


  • 如何刨根问底?

1、结合梯子理论,通过问用户以下4个层层递进的问题,来了解用户需求和用户心理

  • 属性:对于这个产品,你最在乎什么功能?

  • 利益:你为什么在乎这个功能,它可以解决你什么问题?

  • 心理:解决这个问题,可以达成你什么目标?

  • 价值观:你为什么在乎这个目标?

2、情景再现

回答提问时,用户很少会去主动联想具体使用场景下的体验问题,比如当你问“上次旅行去哪玩了?”用户大概率会回答“去环球影城玩,人特多排队两小时,玩了个什么叫鹰马过山车,20秒,下次去绝对买优速通...”并不会告诉你怎么去的、以什么标准定的酒店、为什么选择这个项目/地点,等等这些更想要了解的问题告诉你


我们需要帮助用户在基本体验之上还原体验的动机,引导用户对使用场景进行还原,了解用户当时场景下的行为,再针对场景和行为去挖掘用户产生这种体验感受的动机

3、鹦鹉学舌

复述的时候,有时用户还会根据你的复述追加一些他当时没有想到的关联信息,比如“你的意思是。。。我的理解是。。。对不对?”这样可以避免双方理解的偏差,还可以总结提炼用户的观点。这样又可以挖掘到更多内容


2.3结束语

在访问结束后,我们可以与用户一起快速回顾访谈的内容,如果用户有提出一些意见或者建议我们可以再复述一遍进行查缺补漏,并将事先准备好的礼物或者酬劳送给用户表示感谢,向参与度高,善于沟通的优质用户表示保持联系,留下联系方式方便后续进行可用性测试或者再次访谈


3.访谈后

3.1整理访谈内容

一般是在两个用户访谈之间的间隙进行笔记的整理, 将用户的口头语言转换为书面语言,这样一方面减少后续因访谈内容大量堆积而形成的整理压力,另一方面可以根据上一场访谈进行复盘,从而对下一场即将开始的访谈进行内容调整,在整理时我们需要将重点放在用户的提出的问题和负向反馈上

3.2问题归类分析

整场访谈结束之后,我们会发现用户会提出各种各样的问题,我们需要依据问题的纬度进行分类,将不同用户遇到的相同问题进行归纳


问题归纳主要包含两个部分,主要问题和具体问题,主要问题就是访谈中出现的较为明显的反馈问题,例如“超7成用户对首页推荐的内容并不感兴趣”,而具体问题则需要明确用户反馈原因、对应的功能模块和问题类型


3.3产出报告

访谈报告是至关重要的,一方面可以和大家共同讨论发现用户真实想法,另一方面也方便产研团队根据问题关键点投入人力作出进一步优化,一般在访谈当天完成结论报告,时间有限是以关键结论为主,具体问题可以后续补充。访谈报告一般包含访谈背景、参与人员、用户信息、主要问题、具体问题、用户建议、优化建议


总结

本篇文章是我学习到的用户调研的三种方式,调研方式不重要,重要的在于如何理解用户需求,真正了解用户想要的是什么,无论B端还是C端,产品最终还是要服务于用户,作为设计师同样需要了解用户研究,只有对用户足够了解才能作出高体验质量的产品。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

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

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




日历

链接

个人资料

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

存档