首页

项目总结|你知道吗?用户转化是可以被设计的

seo达人


01.前言

如今,随着市场竞争日益激烈,“转化难”也变成大家特别关注的问题,其实需要提升用户转化的场景很多,每个场景都有影响用户心理的关键因素,那么设计师如何做,才能助力用户转化呢?下面结合省钱会员项目,聊聊如何抓住用户心理,从而提升用户转化。

 

02.背景分析

最近这段时间,我们引入了很多新的运营玩法,跳出之前单一的营销方式,将玩法串联。我们通过省钱会员卡,打造运营体系的玩法矩阵,提升用户转化;

省钱会员卡是什么呢?是对0元购、百亿补贴以及100+的生活权益进行资源整合;

用户敏感点:根据以往“免费领”运营活动的数据,了解到用户对价格很敏感;

 

03.目标用户分析

在做用户转化之前,我们必须找到精准的目标用户并对其进行分析,这样才能精准抓住用户心理,做到更好的转化。

下面我们可以从用户不同阶段的转化进行分析,其中用户分成三类,分别是强需求用户、潜在型用户以及弱需求用户;阶段分为三个节点,分别是激发兴趣、视觉感知和触发行为;

首先是强需求用户,用户在视觉感知信息触达阶段,需求已经满足,完成转化;其次是弱需求用户,这一部分用户,不管如何刺激,都难以满足,所以这两类用户暂时先不考虑;而目前阶段最主要考虑的是潜在型用户,这一类用户在视觉感知到触发行为的阶段,我们需要抓住用户心理,从而促成转化。因此目标用户是视觉感知到触发行为这个阶段的潜在型用户;那接下来需要怎么做呢?

图片

 

04.思考模型

在设计的过程中,我们用到了设计策略模型“CST法则”,什么是CST法则?“CST法则”是以“视觉影响感知,感知影响行为”作为基础理念,以“抓住感知,强化兴趣,触发行为”作为核心内容的设计方法。下面我们将以这个模型来分析,设计过程中抓住哪些心理因素的点,来促成用户转化的。

图片

 

05.影响用户心理因素

我们通过“CST法则”得到了促使用户转化的三个点:抓住感知、强化兴趣、驱动购买。我们在这三个点上设置了多个用户心理影响因素,从而促使用户完成转化。

 

· 抓住感知=抓住“优惠”感知

首先抓住用户的权益感知,以省钱卡核心内容的“权益优惠”作为与用户有共鸣的元素,更容易抓住用户的感知。我们在这尝试做了ab版的两种表达方式。图中对比之后发现,左图中将优惠提炼出来,更能突出权益的优惠力度,聚焦用户注意力,而右图相对来说,优惠感知更弱一些;

图片

在会员购买页中权益模块上,也做了ab版的尝试,对比一下:清晰度上,左边的去掉多余的装饰元素,将权益信息降噪展示,调理清晰,让用户有章可循;匹配度上,用色彩来区分权益分类,让用户快速浏览的时候,更直观清晰的感知权益的构成,也与用户使用场景(娱乐、影音、餐饮出行等)多样性的预期相匹配; 

图片

 

· 强化兴趣点=强化价格敏感点

我们以用户感兴趣的“价格”作为强化的视觉元素,提升用户的兴趣点;其中在会员补贴专区筛选出超值产品,价格补贴前后的对比以曲线来呈现,强化价格的变化;右图详情页中,对会员模块的价格进行单独设计,从而来强化会员价格的氛围感;

图片

 

· 驱动行为=驱动购买

最后从影响用户心理的因素:心理账户和从众心理两点进行分析;

何为“心理账户”呢?

“心理账户(Mental Accounting)”是芝加哥大学行为科学教授理查德·塞勒(Richard Thaler)提出的概念。心理账户也是一种有趣的现象。简单来说,人们会把对物品分类的习惯,用于钱和资产上,在头脑中为他们建立各种各样的账户。比如说,我们会把买生活用品的钱放在生活账户,买礼物的钱归到情感开支账户,旅游的钱归到享乐休闲账户等等。那么心理账户的存在,不仅影响着投资决策,也在日常生活中的各种消费决策产生重要的影响;

比方说打扑克,以5元为赌注,然后手气爆棚的一路赢了500元,但是最后都输光了,那么在人们心理是输了多少钱?这时候在人们心理上只感觉输了5元钱,但其实应该是505元,因为人们没有把意外得来的钱归为自己财产,同时对意外得来的钱敢于去冒风险。

我们要善用“心理账户”,创造一笔新的心理账户,让用户心甘情愿的掏钱。其中在优惠购主页,用户进入页面后会有一笔补贴金弹窗,在这里补贴金弹窗就是我们说的“心理账户”。红包设计了3s自动收下的提示,给用户营造紧迫感的氛围,最后收下红包的动作上增加了小动效,让用户有清晰的红包收下的感知;

图片

我们还要善用用户的从众心理。项目中,我们在会员购买页的主视觉区域,增加了“xx几分钟前已成为会员“的气泡提示,来引导用户操作,暗示用户产生购买的行为;最后在页面底部,增加了大家问的模块,消除用户的疑虑,那么在多次刺激后,有利于用户做最终的决策,引导用户下单,并达到用户转化;

图片

 

06.结语

做转化,最重要的就是抓住用户的心理,深挖影响用户心理的关键因素,才能拥有更高的转化。

在设计过程中,我们要在不同的使用场景和节点上,通过分析目标用户以及影响用户的心理因素,将这些进行设计串联,让用户完成一系列的体验,从而最终达到设计目的。

 

参考内容:

理查德·塞勒(Richard Thaler),芝加哥大学行为科学教授提出的“心理账户”理念;

https://baike.baidu.com/item/%E5%BF%83%E7%90%86%E8%B4%A6%E6%88%B7/2369306?fr=aladdin


 

原文地址:58UXD (公众号)

作者:环铁艺术家

转载请注明:学UI网》项目总结|你知道吗?用户转化是可以被设计的

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



B端交互设计在产品需求全周期中的质量保证

seo达人

为什么需要设计质量保证

在设计中,最常见的质量保证方式就是在产品验收环节进行「设计走查」。不过因为是上线前的最后验收环节之一,经常会出现因临近上线时间,且交互和UI类的问题在修改优先级中一般都是较低的,最后只能修改部分设计上的「bug」,其他只能舍弃或放入永远不会开工的下次迭代再改。设计师在各种来回扯皮之间筋疲力尽,看不到设计价值在需求中的体现,各种“这里设计不好”的锅一不小心也接了一堆。更严重的问题在于,用户得不到更优秀的体验,轻则耗费更多时间,重则放弃使用功能。不管哪种结果,对于产品整体满意度都会有不同程度的影响。

由此可见,设计质量保证仅靠最后临门一脚的设计走查远远是不够的。在需求全周期中各个环节都可以加入对设计质量的把控(Design QA)。Design QA的概念来源于研发流程中测试环节。质量保证缩写为QA(Quality Assurance),是产品交付流程中非常重要的一环,一般就是大家了解的测试工程师的岗位职责内容。在这个环节中,测试人员需要对产品功能进行仔细认证,确认是否满足了产品需求并且可以正常使用。但与测试不同,设计QA须加入到产品需求全周期的各个环节中,最终形成与产品设计并行的一个流程,才能有效保证质量。

 

设计QA实施步骤和方案

步骤1: 需求分级,确定是否需要设计QA

要保证设计质量,在B端设计中不是易事。我们经常会听到:

· “这个功能能用就行”:公司/团队不理解或不够认同设计价值是什么,不明白为什么体验会在每一处未还原的设计稿上慢慢丢失

· “这还原的不挺好,和你设计稿我看一样啊”:非专业的同事无法分辨设计稿与研发实现稿的细微差异

· “没时间改了,下次再说吧”:设计质量保证低于功能质量保证,或者团队必须在有限的时间交付需求

 

在接到需求后可以根据以往经验或与产品经理的沟通,确定本次需求设计等级:

  • A:公司级和部门级重点、设计周期长内容多、设计可沉淀输出的内容多的需求
  • B:正常迭代、量级一般的需求
  • C:时间紧迫倒逼排期、无前端研发资源、少量调整、评估不需要设计的需求

在确认等级后,作为设计师可以有一定的心理预期。对于A类可能各个环节都需要详细的进行QA,而对于C类有可能连设计走查都没有预留时间,只能靠后续线上的直接验证了。后面的几个步骤可针对不同的等级选取全部或部分进行实施。

 

步骤2:交互设计中,考虑极限下的正确展示

B端交互设计中,很重要却经常制作不到位的就是极限情况。看起来都是各种表格,简单的给定一个宽度即可,但在上线后经常发现,填充了真实商家数据的表格,总有意想不到的错位折行和重要信息截断,用户的可阅读性降低。

图片

                                             左:重要信息被截断;右:折行错位

 

步骤3: 设计评审与交付,交互说明与UI标注一体化

在完成制作后一定要进行评审,对功能完整性、页面流程、页面文案、组件特殊交互逻辑要求、交互可实现性与开发成本进行评估。项目相关利益人都需要参加,尤其是测试同事需要参与评审,保证后续测试用例编写质量。在交互与UI全部评审完成并通过后,交付给研发的设计稿最好可以做到交互说明文档与UI标注一体化,方便研发同事查看。避免在交互说明与UI标注中来回切换,导致交互或UI细节遗漏。这里推荐一个sketch插件:NoteBook Pro (需要付费,lite版大约¥76),方便在sketch中添加交互说明标注,在上传到可以在线查看UI标注的平台,比如Zeplin/Relay等。

图片

交互说明+UI标注在一个页面上同时呈现

 

步骤4: 参加测试用例评审,确保测试用例涵盖所有交互细节

一般来说,交互稿与UI稿交付给研发同学后,设计师就要开始忙下一个需求了。直到通知设计走查前,设计师暂时不会再随时跟进需求进展,而是交接到产品或项目经理手中。而在这个从设计稿到研发实现的过程中,设计师也需要在关键节点参与其中,确保设计质量。测试用例是其中一个设计师可以参与的环节。其实有时候很多交互文档中的内容会被用作测试用例,所以需要再次和研发与测试同学对齐所有交互内容,保证交互设计内容不会在此阶段被降级甚至直接去掉。

 

步骤5:设计走查,输出并记录结果

此环节很重要的一点就是走查文档或记录。未完成修改的内容,建议研发给出一个解释,并以文档的方式记录下来抄送给相关利益人,标明可能带来的风险。同时尝试与产品或项目经理沟通,推动迭代优化的具体时间,避免「下次一定」的无效承诺。

 

总结

设计QA是贯穿整个产品需求全周期的设计流程,在以往的点状设计走查之外,需要与团队上下游通力合作沟通,才能确保优秀的产品呈现在用户面前。

图片

参考文献:

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

 

原文地址:京东设计中心JDC(公众号)

作者:唐朋博、李小猛

转载请注明:学UI网》B端交互设计在产品需求全周期中的质量保证

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



这应该是近几年,见过最牛逼的网站,可以按趋势风格找图了!

seo达人

图片

相信大家经常有这个问题,平时看了很多干货,收藏了很多干货网站,但是每次找灵感都还是很困难,甚至是大海捞针的感觉,那么有没有一个地方,可以按照风格、字体、样式,甚至设计手法,来找灵感呢?今天我找到了这个神器,分享给大家。星球里素材库里还有更多素材供大家发掘使用,帮助大家更好地做设计。

w

01.  先上神器 

图片

 比如我最近在一个网站,想看看一些大背景图片的灵感图,那么直接点击顶部Big Background Image这个按钮,它就自动帮我把这个风格灵感筛选出来了,是不是很方便。

图片

 最近潘通新发布的2021年配色粉彩,我也想收集一些关于粉彩的设计灵感,那么点击顶部的按钮,他会自动的帮你筛选出很多。

图片

 筛选后的灵感都是最新的,而且数量也很多,特别的方便。

图片

 比如我想找一个极简的设计,一些黑白设计,同样可以快速筛选出来,是不是很方便高效。

 

这个网站里有很多高质量的灵感图片,已经帮大家下载好了,需要的话可以添加叮当猫回复“图库”领取,已有叮当猫的无需重复添加。

图片

图片

长按扫码添加叮当猫回复:图库

w

02.  怎么使用 

图片

 这个网站用起来很简单,首页进入后默认是最新的灵感趋势,不得不说godly这个网站主编审美非常赞,每个设计都是最新的设计方向和灵感。

图片

 包括最近流行的液态水滴效果,都是高清大图演示,你根本不需要点进去网站,直接这里就可以看见最新的设计。那么我是怎么运用这个网站的?

 

1.根据风格找图

图片

 这个是最常用的,点进去首页,下面一行标签,这里面标签就是各个设计风格关键词。当然英文不好,你可以用谷歌自带的翻译功能,翻译的明明白白。

图片

 比如我想找暗黑风格的,那么点击黑暗标签,就都是黑暗风格的页面设计。

图片

 比如点击网格,那么出来的都是非常有设计秩序的,网格感非常强的设计,随便点击一个进去看看。

图片

 模块感非常强,如果你今天想做一个杂志感,这种布局就可以参考。当然最强大的是导航里面有个More。

2.根据字体找图

图片

 这里是全部分类,里面有根据设计风格分类,比如大背景图、黑白、网格、粉彩等风格。同时也有按照流行字体风格分类,比如Helvetica Neue、Roboto等知名字体。同时分类还有各种数字海洋、亚马逊等,总之非常丰富。我们来试试。

图片

 我点击了Helvetica Neue这个分类,那么就看见了全部使用Helvetica Neue字体的网站,每个网站的字体运用细节、排版和版式都可以参考。

图片

 都是特别好的案例,而且你能看见这些字体都是搭配什么样的字体在使用。

图片

 点击Netlify就都是非常抽象的图形风格,总之这个网站有很多点值得我们去探索。

3.根据图片找图

图片

 比如最近做一个需求,想了解下孟菲斯风格,那么我找到了这张图,都是视频录制好了,非常高清。

图片

 点进去都是高清,并且带有动态演示,并且每个页面都是高清大图。

图片

 页面的缩略图非常大,因此你可以很轻松找到你喜欢的图并且更好的查看很多细节。单击一个图片就可以看见更大的尺寸,点进去可以看见这个网站的全部标签。如上图,我想看看3D风格网站怎么设计的。

图片

图片

 点进去后,可以看见这个设计的详细大图,同时还可以看见很多标签。这个标签代表它在的分类,随便点进去一个分类,就可以看见全部类似这样的设计。因为这个灵感是3D,因此我点了3D,然后进去都是一些很酷炫的3D灵感。

图片

 质量怎么样?你们自己说了算,每个灵感都有完整的高清效果,还是动态的。

图片

 比如这个,是一个动态的3D组成的英文单词。所以这里可以基于一个图片风格找很多风格。这个网站的魅力能让我们更加专注于根据主题来看我们想要的东西。

w


原文地址:我们的设计日记(公众号)

作者:sky
 

转载请注明:学UI网》这应该是近几年,见过最牛逼的网站,可以按趋势风格找图了!

ps教程 | 这个PS技巧,用到海报中真赞!!

seo达人

图片

 

先来看看下面的海报,给人的感觉就是梦幻高级,满满的质感扑面而来。

 

深色的背景图配上发光的文字效果,有什么小伙伴会想,为什么我没有这么用过。

图片 
其实同样的表现效果,只要设计师的思维不同,那么呈现的最终效果也是大不相同,感觉也会千差万别。 
下面为大家演示一下如何在PS中实现这种帅气的发光效果。   
 
图片  

第一步 >

首先把图片拉到PS中,新建一个纯色图层,填充纯黑色。然后在纯色图层上添加蒙版,选择柔边画笔涂抹,用黑色画笔只涂抹中间的区域,这样四角就会更暗,这样的处理的目的就是想让图片的质感进一步加强。
选择文字工具打上相应的文字,选择合适的字体,尽可能不要选太细的字体,那样发光效果不是特别好。

图片

图片
 

第二步 >

新建两个纯色图层,一个偏粉紫色,一个偏蓝紫色。
重复黑色图层的步骤,为两个图层添加蒙版,然后用柔边画笔涂抹,光的效果出现了两层,扩展的范围一大一小,这样会显得更真实。
图片
图片
 

第三步 >

复制一个文字图层,分别都添加上外发光的图形样式。
在混合模式上选择滤色,会使光更亮。扩展和大小的参数一大一小,围绕着文字的外发光效果就会呈现远近的层次感。另外近的光源尽可能更浅一点,更亮一些。
图片
图片
图片
 
 
也可以索性做一些小球效果,用刚才的方法去实现,陪衬效果甚佳。
图片 

最后再次贴上最后的海报完成图。

图片

设计虽没有近路,但可以少走弯路  
 
原文地址:诗人星火宇宙(公众号) 
作者:星火君 
转载请注明:学UI网》ps教程 | 这个PS技巧,用到海报中真赞!!

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


优化教程 | 没想到,改完以后的画面真的好了许多!

seo达人



图片

作业问题

我们先来看一下有哪些问题:首先就是模块和首屏的叠压不是很好;文案图标的处理不是很好,给人一种拥堵不整齐的感觉;图片可以做一些简单的处理手法,使其更加灵活。

图片

 

第一步

我们先将下方模块和首屏之间拉开距离,之后填充同色系的蓝色作为最下方背景的颜色,之后将图片上方饱和度提高,再把产品和模块边缘处进行抠图,做出破图的视觉效果,复制多个泡泡增加画面的氛围。

图片
 

第二步

将文案简单编排拉开间距放到画面当中,这里注意一下原稿的图标信息我没有放在文案组下方,当我们文案很多的时候不要都放在一起,应该学会合理的分配空间。

图片

 

第三步

这里我另起了一个模块和当前模块进行连接关联,有些小伙伴可能感觉不是双数的图标很难做的规整,其实大家应该换个思考方式,先把图标规整的排列后,空余的负空间可以通过哪些元素进行填补。

图片

 

最后

添加装饰线条增加细节,并对图标部分线条进行替换颜色的处理,处理好整体的细节画面就改好了,我们一起来看下前后的对比吧!
图片
相较于原稿,优化之后画面看着更加清爽干净,画面的透气性也好了许多,整体画面的质感提升了许多。  
 
原文地址:三个小美工(公众号)  
作者:Three  
转载请注明:学UI网》优化教程 | 没想到,改完以后的画面真的好了许多!

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


干货素材 | 讲真的,这些素材你真的很需要!

seo达人


图片
图片

图片

图片
图片 
 
几何体风格的特点是将原本比较复杂的场景简单化表达,并且几何元素有装饰设计感,通过简单的组合处理,就会给人一种不一样的感觉。

图片

图片
图片 
 
以上是一些几何的背景参考,大家在做的时候记得多找一些参考,这样能够多方面的思考,这种几何场景搭建因为没有添加材质,所以光源的体现尤为重要,所以我们在做的时候要处理好图形每个面的光影变化。大家也可以平时多看看摄影作品,观察里面的场景和光影是如何表达,这会对我们来表现产品时会有很大的帮助   
 

链接:https://pan.baidu.com/s/12J-Q0Crq3iB5OXDWmfACrw 提取码:fagy

 

原文地址:三个小美工(公众号)

作者:three

转载请注明:学UI网》干货素材 | 讲真的,这些素材你真的很需要!


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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




C端产品分析方法总结

鹤鹤


做一个完整C端项目前,从产品思维得理解、需求分析到场景分析,通过以上分析得出结论,进而制定我们的设计目标,把设计目标落地到解决实际的设计问题,内容较多,大家可以根据上述目录来进行选择性阅读。


1.1产品思维包括


1.1.1 用户思维:深入了解用户的需求和场景


了解用户心理:“心理”主要是指用户的情绪,只有了解用户的心理状态,才能知道他们在接触到或者使用我们的产品时是正面的情绪还是负面的情绪。正面情绪需要我们引导去实现转化,负面情绪需要我们安抚以避免跳出和口碑的损失。


把控用户行为:最终目的还是引导用户行为,让用户按照我们的计划进行产品的交互、操作,从而实现对用户的有效管控和转化。例如:上品店庆推出“购物省钱节”的概念,联合商家推出各种优惠活动,就是抓住用户在购物时想省钱的心理,通过降价、优惠券等方案让用户在选购商品、提交订单和结算阶段都保持高涨的情绪,从而推动用户最终完成付款。


解决用户痛点: 在完成上面的分析后,我们最终需要把调研和分析结论落地为设计方案,前提是要关注用户当前的情绪是负面的还是正面的,如果是负面的情绪,我们可以通过补偿、安抚等方案对用户进行留存。例如:在等待外卖送达时,配送信息页一般都会有预估时间、位置等信息,让用户有一定预期。同时如果迟到时间过长,也会通过准时宝等规则给予用户优惠券补偿,这些都是负面情绪的安慰。



1.1.2 项目思维:主动发现并解决用户体验过程中遇到的问题

项目思维主要指,我们要具备极强的发现问题、输出方案、推动落地的能力。这就是设计师的项目思维和推动力,可以保证自己的想法快速落地、推动设计优化并尽快上线。



1.1.3 商业思维/业务思维:将设计目标与业务目标紧密结合

商业思维是指,拉新:通过产品、运营和营销策略让用户下载产品。留存:让下载的用户保持活跃度,留住用户,便于转化。转化:让用户按照我们的业务规划去注册、分享、下单、付款等动作,一步步带入我们的圈套,完成关键操作。变现:将用户行为变现,内容产品的活跃度可以带来广告营收,电商产品的成交额就是业务收益。



2.1产品思维的重要性


2.1.1 Ui设计师和产品经理的区分界限


相同点:在实际工作中,设计师和产品经理的目标在本质上是一致的,都是解决用户的痛点、满足用户的需求,为用户提供体验更好的产品,并在此基础之上完成用户转化,实现收益。作为一个设计师,我们对产品了解的深度不一定比得过产品经理,但是广度上你应该要求自己和产品经理保持一致。只要掌握产品的架构、流程和业务的模式、原理即可。



不同点:UI设计师更注重通过用户体验来留存用户,产品经理更多地考虑转化用户和变现的途径。



冲突点:这时就会产生一些冲突和矛盾,有时为达到业绩目标,产品经理或其他业务方可能会提出有损用户体验的方案或者策略。


想要解决与产品冲突得问题,就要充分调动自己的产品思维,保持习惯性的产品思维,才能始终保持和业务一致的目标。和业务方站在一起,才能找到设计和业务的共同目标,并将业务目标转化为可执行的设计目标,才能为设计带来更高的价值。


2.1.2 UI/UX设计师的真正价值是什么


这里就绕不开这个话题----产品思维。别人眼里的UI设计师,很多人会认为设计师的工作就是设计流程页面、视觉效果。这些工作看起来只是锦上添花,即使没有专业的设计师来设计,可能只是流程、控件位置不太合理、样式和颜色不太好看而已,并不会影响产品的开发和上线。其实,设计师的价值不仅是艺术价值,更重要的是为业务带来价值。


UI/UX设计师,关键在于对用户场景、对产品细节的敏感度,这也是其他岗位不具备的技能。实际工作中这些细节问题,很容易区分出来专业性的差异,因为UIUX设计师是距离用户最近的人。我们设计页面,用户在页面上操作和获取信息。我们设计流程,用户通过流程完成各自的需求。我们设计的产品流程、页面,是用户直接接触和使用的东西。基于这个原因,设计师对用户的需求、反馈是最了解和最敏感的,我们可以通过用户的反馈、操作数据把控用户的心理状态和行为方向。无论是在方向上还是从细节出发,挖掘和洞察用户需求,设计师有明显的优势。

所以UI设计师真正的价值就是通过自己对细节和场景的思考,自我驱动,找到设计优化、产品迭代、业务提升的机会点。想要找到这些机会点,你需要培养自己的产品思维、项目思维和商业思维。


2.1.3 如何培养自己的产品思维


01、多与需求方、业务方(产品经理、运营、市场等岗位的同事)沟通,在参加需求评审的时候,深入了解业务和产品的特点、原理。


02、了解产品流程:在接手某项业务或产品时,先利用思维导图对产品的架构做一次梳理,通过功能结构图你可以清晰地看到产品应该有的功能。在掌握架构的基础上,对产品的核心流程再进行一次梳理,包括线上、线下所有的流程节点、体验接触点和不同用户端的流程触点。


03、多做竞品分析,从竞品中寻找灵感和产品感。怎么做竞品分析具体可查看我的其他文章,竞品分析维度的确定。


04、持续不断地培养自己的思维能力,深入思考、多做归纳总结和分析。在做设计的时候我们也可以让自己的思维慢下来,多去思考:思考一下为什么做这个需求?对用户有什么价值?对产品有什么价值?对业务有什么价值?设计、产品、运营应该怎么做才能达成这个目标?我们的做法对业务、对产品有什么影响?设计方案能不能很好地平衡业务和体验的关系?



2.1为什么要进行需求分析

01、用户不知道自己真正想要什么。

02、用户难以说出自己的真实需求,用户在阐释自己的需求时,就会不自觉地粉饰和解释自己赤裸裸的本质需求。例如:那些刷视频就能领红包得产品,但为什么它最近不火了,这类产品的人群,本质需求是:通过刷页面领红包,获取更多的钱,这类人根本不关心内容是什么、内容质量怎么样,这就造成了内容的触达效果非常差。


2.2 用户需求分析步骤


2.2.1 筛选出目标用户


01、了解我们产品的目标用户群体和现有产品用户群体,掌握用户基本信息,分析用户特征。(Who)用户是哪些人:性别、年龄、地域分布、学历收入等。(What) 用户有什么共性。(Why)为什么选用我们的产品。(Where/When)在什么场景下使用我们的产品。


02、通过了解用户得到的所有信息,然后创建用户画像,得出结论。那么如何创建用户画像呢?


       001、人物创建:创建一个虚拟的用户群体中的一员,利用我们上面提到的用户相关信息,可以给他/她一个插画风格的照片帮助我们具体化这个用户的人格和形象。然后列出他/她的基本信息,给他/她定一个社会角色,比如:小王,男,28岁,销售经理,我们产品的熟练用户,月收入2万,学历本科。

        

       002、分析动机:这个人物用我们的产品想干什么;这个人物对我们产品某个功能使用较多,需求较强的原因是什么,想达成什么样的个人目标。


2.2.2 提炼核心需求


可以通过用户画像推测用户的心理特征和行为偏好,积累了以上信息,你就比较容易进行需求的分析和挖掘了,提炼出解决用户需求的核心的痛点。例如:解决了用户在特定场景下的某一个核心痛点,满足了用户在当前场景下特定的诉求/需求。例如:共享单车产品就是解决了从车站、地铁站到家、工作单位最后一段距离的出行痛点。例如:地图软件解决的是陌生地区找不到路和易违章的痛点。


2.2.3 找到本质需求

01、了解人性:做设计就是做人性,只有把握好人性的特点才能更好地满足用户心理,进一步引导用户行为。马斯洛需求层次理论,人的需求从低到高可分为 5 个层次:我们就可以试着洞察用户在特定场景下的本质需求到底是什么了。生理需求(呼吸/食物/水):现代社会其实就是对生存条件的追求;安全需求(避免自己受到伤害);

社交需求(爱与被爱/社会关系/地位)对情感的需要;尊重需求(被自己认可/被他人认可和尊重)对稳定社会地位的需要;自我实现需求(道德层面/内心层面的追求和满足)。


所以用户的本质需求无外乎:生存、金钱、情感、名利、心理满足这几个方面。


02、将用户叙述的需求,转化为本质需求:比如:有的用户说,上品商场最近优惠券怎么少了?我都不想去上品买东西了。用户表意是嫌优惠券少,如果我们草率得出:增加优惠券运营力度的结论太过于表面,其实用户的本质是嫌商品太贵了,他们的本质需求是省钱,少花钱且买到想要的东西。而这类用户是对价格极其敏感的用户,增加优惠券只是其中一个策略,是无法满足他们根本需求的。根据他们省钱的本质需求,我们可以给他们更多地推荐低端商家,哪怕没有优惠券,还是能提升一波 GMV。


进而转化成设计目标为,要通过我们的设计能力,给用户营造一个很省钱的氛围,而不是一味地给用户降价或是发优惠券。规划更多的秒杀、每日特价、分享领券等活动专区,在设计页面时增加优惠券、红包等元素,突出省钱、低价等文案,可以有效地吸引此类用户,引导他们下单付款。这就是本质需求的应用方法。


2.2.3 拆解挖掘到的本质需求———KANO模型

工具——KANO 模型问卷调研,主要依据是用户调研,可以通过定性访谈的方式,对部分用户进行了解,大概了解用户对需求的态度;也可以通过定量问卷的方式,通过问卷获取比较有参考价值的数据信息不同类型的需求和用户满意度之间的关系,将影响用户满意度的因素分成五类:


基本型需求:无此功能,用户满意度会显著降低;有此功能,用户满意度不会显著提升。

期望型需求:无此功能,用户满意度会降低;有此功能,用户满意度会提升。

兴奋型需求:无此功能,用户满意度不会降低;有此功能,用户满意度会有显著提升。

无差异需求:有无此功能,用户满意度都不会有太大变化。

反向型需求:无此功能,不会影响满意度;但有此功能用户满意度会下降。


经过需求分析我们会拿到大量用户需求的相关信息,在取舍和决策时我们可以使用三个原则 + 一个工具:01、

围绕本质需求和痛点;关注与业务不相悖的需求;解决影响用户峰值体验的问题;在做分析时可以利用 KANO 模型,重点关注模型定位出的基本型、期望型需求,适当关注兴奋型和反向型需求。



至此,我们掌握了产品分析的第一步,也就是找到设计的方向和基本依据——用户需求;下一模块我们将进入需求分析的第二步——场景分析,来找到设计可以利用的机会点、切入点!


3.1为什么要进行场景分析


3.1.1 场景是产品设计的基础

01、任何产品的诞生都是基于用途,牙刷为了刷牙、菜刀为了切菜、汽车为了出行……生产这些产品是为了满足用户的需求,而生产产品时需要考虑的因素如外观、材质、设计细节等则源于用户场景。

02、互联网产品其实也是一样的道理,产品基于用户的一些需求或者痛点而诞生,基于用户的使用场景做功能和细节体验。


3.1.2 场景分析的核心能力就是同理心

站在用户的立场思考细节:必须首先知道用户需要什么、喜好什么、讨厌什么、不能接受什么,才能进一步改善我们的产品。基于用户的目的、行为偏好等研究用户在场景里的行为、情绪,从而深入场景,做出正确的决策。


避免主管的质疑和批判:有的用户会有各种各样“奇葩”的反馈,所以我们要多理解用户的选择和立场,避免主观的质疑和批判。


学会聆听和关注反馈:在日常工作的沟通、对用户的访谈中,我们可以试着多用心倾听对方的表达。



3.2 怎么做场景分析——三个工具一个方法


3.2.1 用户体验地图(流程分析)


3.2.1.1概念

01、还原用户体验产品的流程(分析的是场景中的线,包括流程线、行为线等。)02、列出用户与产品、与线下场景有联系的所有触点。03、通过这些触点掌握用户的操作轨迹和行为特征。04、分析用户的体验感受。


3.2.1.2 “五步法”梳理体验地图全流程

01、明确分析对象:最重要的是确定一条明确的流程线,分析的产品某个功能或者某个服务/体验流程,并非用户。


02、拆解体验流程:把分析的流程进行拆分,拆成一个个体验节点实际场景设置节点。比如网约车的产品,要根据用户在线下叫出租车的体验场景来拆分,可以拆成走到路边、招手拦车、上车、行程中、支付下车等几个重要节点,然后根据这些节点来考虑和分析是否有优化或者需要颠覆的地方。


03、创建用户画像:主要从用户的基础特征、用户的心理和偏好等信息去做画像,最后可以形成一个稍稍具体的角色。


04、分析阶段:制作表格,把每个节点的信息进行分析推测和记录。例如下面表格:



横向:第二步拆解出来的所有的流程节点。


纵向:用户与产品的触点:就是用户如何操作我们产品,点了哪里、在哪里停留时间较长,这都是通过埋点数据可以看到的。


用户目标:从用户的使用数据和用户访谈中获取相关的用户信息,通过用户的行为和他们表述的信息找到他们的立场、目的和利益点,从而分析他们想要什么。


用户行为:为了这个目标会怎么做。


结果:看我们的产品页面信息、流程及功能能不能满足用户上述的目的和行为即可。


用户情绪:用户的目标和我们触点是否契合,最终的结果是否能满足用户的需求和目的,没有满足的时候情绪低落到什么程度,满足的时候情绪会高涨到什么情况,哪里是最低谷,哪里是最高峰。


05、得出结论重点要看的是用户情绪的起伏。找到最低点,看哪些节点影响了用户的体验,就是产品的痛点,也是我们的设计发力点和机会点。


3.2.2 同理心模型(节点分析)


3.2.2.1概念

同理心模型适合分析我们产品体验流程中的某个节点或细节功能,不适合进行流程化的分析。包含所看、所听、所做、感受、所想。


3.2.2.2同理心分析方法


01、明确我们分析的对象是什么:比如:网约车用户在打车等待接单的环节;比如电商产品确认订单的环节;这些环节这些环节和节点都有共同的特点,就是集中在有限的一到三个页面中,用户的核心操作比较简单。


02、首先把图表画在白板上,用便利贴写出所看、所听、所做、感受、所想,五个维度的想法,


03、然后进行集体讨论,把这些便利贴提炼总结,归纳出重点信息,通过这种方式可以避免一个人闷头思考的局限性,也可以保证思考的全面性。


04、接下来对这个图进行行为总结,找到用户行为的原因,分析用户的偏好和习惯。


05、最后通过用户情绪和感受,分析我们产品体验的问题。



3.2.3 情感化设计(节点分析)


3.2.3.1情感化设计要素

本能层

亲切:通过情感化设计,营造亲切的氛围,拉近与用户的距离。比如:百度地图可以在导航设置里将导航车标设置成自己的汽车品牌,当看到自己车的车标在地图上移动,用户就会感觉非常亲切和熟悉。


安全:让用户感到人身、隐私的安全。比如:哔哩哔哩在登录界面输入密码时的二次元形象会有捂眼睛的动作。


互动:我们的产品流程和功能的实现需要用户的参与。比如:用户刷新网页时,由于网速较慢、需要较多的加载时间,在加载的过程中,有很多网站会提供一些互动小游戏。用户参与进来了,整体等待的时间也就显得没那么漫长,这种互动既可以缓解用户的焦虑情绪,又能有效防止用户跳出。


惊喜:人们对一件事物的判断往往会基于最初的信息。所以如果我们在提供最初的信息时就给予用户更好的结果,一定可以给用户带来惊喜。花小猪在打车时先出现原价,然后弹出优惠券动效,价格数字也哗啦哗啦往下降,这个不断下降的数字就利用了锚定效应,给予用户一定的惊喜。


行为层

关怀:考虑用户的使用场景,在场景下给予用户细节上的功能推荐或操作建议。比如:美团外卖,在天气恶劣时会提前提醒用户:为避免延误用餐时间,请提前下单。比如:滴滴出行,在用户经常通勤的时间段也会自动提示:由常用起点至常用终点的路线派车大概需要XX分钟,点击即可叫车


预期:难以避免需要等待、甚至反复操作的情况,此时为避免用户跳出,你需要在细节上做好预期管理。比如:我们在用支付宝还信用卡时,支付完成后我们能看到已提交——待银行处理等环节的流程提示。比如:我们在填写一个需要补充大量信息才能注册的网站账号时,网站顶部一般会有注册步骤的导航。当然以上只是最基础的预期管理,如果你的文案能更俏皮一点,视觉效果上增加一些 IP 、甚至动画就更好了。


反馈:对用户的操作及时给予回应,尤其是异常场景,需要使用用户更容易接受的方式给予反馈。


反思层

情怀:能给用户带来情感上的力量。


品牌:在产品的配色、排版、控件样式上体现品牌的统一调性。在产品的体验流程中贯穿品牌的价值。比如:在京东自营的店铺购物、使用京东物流的产品会标明“京东物流”,在确认订单页也有“京准达”的功能选项,京东通过这种方式,将自营物流、快速到达的品牌特性一一表达。


价值:实现更大的社会价值,从而提升企业形象。比如:商城的包装箱、腾讯的 404 网页上都能看到一些被拐儿童的寻人启事,因为这些网页和包装材料的传播力极大、传播范围极广,可以带来良好的社会公益效益。


3.2.4 故事版

故事版:体验地图和同理心模型,可以分别从流程到节点对场景进行分析,那么这些场景如何归纳和表达,以供大家决策和评审呢?需要站在用户需求的角度讲故事。故事板这种漫画/故事的形式易于被受众接受,在阐释需求、说明方案时具有更强的亲和力和说服力,


描述过程:创建的虚拟人物;明确关键节点;找到虚拟人物在整个故事中所有行为和目的。



产品思维、需求分析、场景分析这三部分是产品设计三个基本要素,做好这些分析能帮助我们了解产品、业务与用户之间的联系,从而做出体验好、价值高的优秀产品。这些分析都是我们进入设计工作的前期信息和准备依据。接下来我们要做的就是明确设计目标。



4.1为什么要明确设计目标

01、一接到需求就马上打开软件开始往上铺图,遇到被卡住的情况,没有办法继续做下去,总在纠结。

02、有时候产品经理对某个需求也提不出很明确的方向,我们设计的时候能搞出几个方向的方案,但是不知道如何决策。

03、我们在着手设计的时候就没有想好我们输出这个设计图的目的是什么,比如需要促进产品什么转化、解决用户什么痛点、解决体验上哪些问题?

04、我们做这些工作的目的是XXX,只有达到这个目标我们做了这么多工作才有意义、有价值。

05、在日常工作中你也会发现,产品设计不等于纯创意设计,产品设计的关键价值在于发现和解决问题,通过对体验流程和页面细节的处理/优化,得到我们期望的用户反馈和业务数据。


4.2 整个项目设计思考的流程

01、设计目标的来源是用户目标、业务目标和产品目标,依据这三个目标,我们将其转化为设计目标;

02、然后是将设计方案朝着既定目标实施,在方案的流程和细节里体现/实现我们的设计目标;

03、上线后,及时收集和整理设计目标、产品目标相关的数据和用户反馈,验证我们的设计方案有无达到目标;

04、然后规划下一步的迭代方向。



4.3 怎么设定设计目标“三步法”

01、明确用户目标和产品目标:设计目标的根本是产品目标,产品目标的根本来是业务目标和用户目标,也就是业务的规划和用户的需求、痛点。因此在实际操作中,第一步我们要先明确我们的产品目标是什么,产品目标大多和用户的转化、功能的使用率有关,我们朝着这些方向分析一般不会有较大偏差。


02、通过上面目标找到与之相关的关键用户操作:比如点击加购按钮、比如完成付款验证操作、比如填写全部表单信息。


03、将关键的用户操作转化成可以衡量的数据指标:将这些关键的用户操作转化为可以衡量的数据指标,比如加购 BTN 的点击量、订单提交后的付款成功率、比如表单信息的完整率。因此设计目标必须是可量化的,产品使用数据和业务数据,比如点击量、退出率、取消率、跳出率等,才能在设计方案上线后正确评估我们的方案有没有完成设计目标。



5.1怎样跨越设计难点

01、先去定位设计难点,找到设计重点,再着手设计。完成主流程后再去解决小问题。

02、接着列出流程或需求点,对设计方案有大致框架;

03、然后针对流程中每个节点列举可能会出现的问题把精力放在影响设计目标和用户核心体验的重点问题上。


5.2怎样解决设计难点

精益创业模式里有一个 MVP 的概念,我们现在产品研发中的敏捷模式也是源于这个概念。简单来讲,就是用较小的成本先做出一个产品,然后快速上线,验证业务模式、产品策略和用户体验等问题,然后小版本快速迭代,进行优化。



参考资料:

《用户体验干货笔记》

《用户体验要素》

《腾讯产品法》

《交互设计知识体系》




C端设计前的准备工作,其中重点在于学会需求分析和场景分析。具体掌握需求分析的核心方法步骤,和场景分析中用到的三个工具用户体验地图、同理心模型、情感化设计、和故事版。需求分析、场景分析是产品设计的基本要素,做好这些分析能帮助我们了解产品、业务与用户之间的联系,从而做出体验好、价值高的优秀产品。这些分析都是我们进入设计工作的前期信息和准备依据。


接下来我们要做的就是明确设计目标,设计目标的来源是用户目标、业务目标和产品目标,依据这三个目标,我们将其转化为设计目标,然后将设计方案朝着既定目标实施,在方案的流程和细节里体现/实现我们的设计目标,在产品上线后,及时收集和整理和设计目标、产品目标相关的数据和用户反馈,验证我们的设计方案有无达到目标,然后规划下一步的迭代方向。以上内容,感谢观看。

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

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

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

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

引诱整理的艺术——交互设计助力优质的用户体验

鹤鹤

我们生活在一个信息大爆炸的数据化时代,随着网络科技的飞速发展,产品和用户之间的互动也日趋复杂,新功能不断涌现,带来便利的同时也导致用户对功能的认知摩擦日益加剧。在这种情况下,人们对交互设计的需求就越来越大,市场对交互设计师的需求也越来越多。许多公司都注意到交互设计对品牌创建、用户满意度以及回头率等方面的影响。那么,什么是交互?交互设计应该做什么?希望今天这篇文章,能够加强你对交互的理解。




undefined

交互就是与另一个人或者物进行交流互动,比如你说话或按动鼠标,对方给你反馈,这就是交互。对于设计师们来讲,交互多指用户与计算机、手机等产品进行的交互。


undefined



undefined

交互设计是一个页面或者一个界面的内容规划,例如哪里放图片,哪里放按钮,哪里出现文字;或者说是一个庞大网站以及产品的整体逻辑梳理,例如如何安排信息层级,如何让用户更轻松地找到自己想要了解的信息,如何让整个网站或产品更加合理、有效地运转。


一个城市有合理的规划交通才会便利,城市里面的人才会觉得更加舒适,而一个合理的交互设计也直接影响着一个网站、一个产品甚至一个品牌。



undefined

视觉设计是感性的,更注重一切表象的东西,比如颜色、版式、形状、调性等,视觉设计最终的成品是视觉的效果图设计稿。


交互设计相对来说更加理性,交互设计更加注重用户是谁,通过需求分析得出问题、解决问题,交互设计的最终成品是原型图。



undefined

看过了文字解释,再让我们一起来看看生活中无处不在的交互设计。


叠猫猫、盖楼、星秀猫……每年双11,天猫都会创新活动,激发用户对双11购物节的期待,营造蓄势。


今年的双11的主题为喵糖总动员,用户通过组队一起做任务赚喵糖,通过掷骰子的方式获取糖果数,占领格子,击败对手。获取喵糖的过程中,营销或引流设置无处不在。除了做每日签到奖励的简单任务外,最简单的方式就是用15秒的时间去浏览平台推送给你的主会场、各大分会场、各细分品类、各个商家店铺等页面。通过这样的任务设计,可以引导用户浏览会场店铺或各品类商品,最大程度地完成各个淘宝店铺的曝光需求。


undefined undefined

天猫双11-喵糖总动员活动页面


新冠疫情还在持续蔓延,飞猪App贴心的在行程页面,添加了防疫工具引导栏,通过点击按钮,可跳转至支付宝中行程码、核酸预约等界面,为用户出行提供便捷的准备工作。


用户在滑动页面时该导航栏会被隐藏,静态时则显示两个应用,点击展开才能查看更多。设计采用浮层式引导,提供便利的同时,且不会对用户产生干扰。


undefined undefined

飞猪App界面


一切交互设计所要达到的效果就是形成良好的用户体验,让用户在使用界面时更方便找到自己感兴趣的东西。


通过地图及定位,通过气泡及icon的区别,把附近的美食等进行排名,让用户更快知道自己的距离。还设置了点击卡片展示店铺信息同时支持查询路线等功能。


undefined undefined

美团App界面


“优秀的设计是考虑周到且不放过每个细节”。往往在那些不易被察觉的细微之处,倾注了设计师的诸多巧思与心血,哔哩哔哩在设计中做了以下一个有趣的小细节。


在账号登陆页面,当我们输入账号或者手机号的时候,页面插画中的22和33是睁大眼睛的,而当我们输入密码或者验证码的时候,他们则用手捂住了眼睛。这个有趣的设计生动地传递了App对用户隐私的尊重与保护。



undefined undefined

哔哩哔哩App界面


当你使用百度搜索物品,查看图片时,左右滑动即可切换下一张图片,上划即可关闭图片,这样的操作手势,更加方便快捷。


在查看物品图片时,下方还会出现商品推荐购买链接,仿佛“一站式”购物的贴心服务。


undefined undefined

百度App界面


交互设计的核心目的是信息的传递,无论如何设计交互图、如何设计交互流程,我们要思考的核心和准则是如何把想要传递给用户的信息以最简单、最容易的方式让客户接收,反之用户也能用最简单的方式找到自己想要的信息。


这些信息包括内容、按钮、文字、图片等一切信息的载体。我们要明白在进行交互设计时的前提是如何去梳理信息更好地传递。


那么,如何才能让信息更好地进行传递?我们要搞明白信息传递时需要营造什么样的氛围,哪些信息元素需要突出,目标用户是谁,根据这些才能以一个正确的方向有逻辑地进行交互设计,而这一切的最终结果就是实现一个良好的用户体验。

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

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

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

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

项目总结|企业级管理系统实战

seo达人

01.前言

疫情后,随着协同办公的崛起,巨头互联网智能办公的出圈,企业开始关注于怎么对内部做服务设计,提升人效,提升员工幸福感,所以慢慢的出现了b端产品c端化,体验不好的产品,我们就自己研发,58也在这条路上跃跃欲试。

w

02.背景简述

大型企业由于员工上万,所以对于人才管理的系统基本都是购买国外垂直类的顶尖系统,而拥有5w+员工的58,则是采购的国外的WORKDAY系统,但是,由于服务器在国外,所以对于好多操作请求都非常的耗时间,最重要的一点是,关于人才数据这么重要的核心内容,也在人家手里,万一哪天国际形势非常严峻了,呸,希望不会有这么一天,所以我们要像邓稼先老先生研发原子弹一样,核心数据我们要掌握在自己手中。

这里通过双钻模型来简单阐述整个项目的流程

图片

f

03.探索阶段

如果你想做好一款B端产品,首先要了解他的业务形态,因为b端客户不像c端用户那么单一,在整个业务链条里,每个角色负责不一样的模块,所以我们面临的问题不是单一的用户痛点,而是怎么把整个链条做的更通顺便捷,然而一款强大的b端系统的复杂度远远是你不可想象的,毕竟人家国外顶尖系统有上万人在研究呢。所以我们目前的目标就是先解决58的个性化的人力资源管理。

 

· 深入业务

首先,我们对业务进行专家访谈,向专家了解业务,对基础认知进行了桌面调研,对用户角色进行焦点小组访谈,整理出58内的HR业务形态及分工模型。

图片

 

· 竞品研究

设计师与业务一起使用竞品由于人力资源管理系统是一款专业类的垂直软件,市场上可参考的竞品其实不多,即便是可以找到的资料,也只是寥寥的几个界面,于是我们充当客户去找资料,最后搜集了国外3款、国内2款同类可参考的软件,并通过不停的与业务碰撞,探索适合58的模式。

f

04.定义阶段

· 与业务握手

通过前期的调研,我们了解到业务中销售岗位的入职次数是最高的,所以业务痛点也是最集中的,所以我们在销售入职日探访了58北京分公司,实地观察入职的各个环节,以及每个角色的分工及权限,并在当晚与他们进行了一次深度的访谈,让我们的设计定义更加聚焦。

 

· 确定设计目标

通过前期的用户角色分类调研,以及对痛点的归类分析,我们得出了两个关键需求:线上化与自动化、操作模式本土化。对于如此庞大的系统,如果按功能去梳理,那是很不现实的,怎么能更快速又能更直观呢?

转变思维,从业务角度转为服务角度。我们服务的是业务,业务服务的是员工,然后系统都是围绕着员工在职场的各个环节来解决问题的,所以我们围绕着员工绘制了职业生命周期全景图。

图片

从图中可以看出各个角色的工作及配合方式、工作效率及提升空间、各环节各角色的满意度及可优化的方向,再通过对任务节点、交棒时刻、过程体验的梳理优化,最后达到一个最终的理想状态。

w

05.设计阶段

整个功能流程梳理下来后,系统页面已经预估到了400+,而我们的排期倒推下来只有8个月的时间,如果按正常的设计流程“全部模块业务需求→系统信息架构设计/修正→各模块交互设计修正”来做的话,黄花菜都凉了,那怎么在紧张的排期内快速输出还不会出错呢?

 

·利用MVP思维,拆解最小业务单元

通过与业务、产品讨论,我们选用具有业务闭环属性,最具业务代表性的最小业务单元,并做快速的验证,通过不断探索,实现现实中的设计流程。

图片

再通过对页面的解离,抽象出三大龙骨页面类型,再配合规范、控件组成系统的血肉,最后达到了27倍的产出效率,我们让不可能完成的任务提前完成了。

图片

 

·情感化探索

B端系统大家统一的认知就是注重功能,不要用花里胡哨的东西来影响操作,但是从竞品分析中得知,其实随着b端c端化,b端的设计师已经在尝试加入一些插画元素,所以怎么在不影响操作的前提下,又能让员工感受到温暖呢?

 

服务链条上的触点探索

以我们的服务主体员工为目标,员工与企业的第一个接触点是在接收offer的时候,这是传递企业文化、情感的很好的契机,所以我们优化了在这个触点下的方式,强化接offer的神圣时刻,并通过游戏化的方式来引导员工填写资料、查看入职引导。

图片

 

系统内的情感体系搭建

我们定义了系统的人物角色,让她更饱满更有故事性,并以一个专属客服的角色,落地在系统中的特殊场景下,如个性化首页、开屏引导、功能引导、空页面、及身份卡片等模块中。

图片

图片

图片

w

06.实践走查阶段

为了更好的测试,我们的业务方已经驻扎在了项目组里,采用与旧系统并行的方式,也就是一套数据同时录入两个系统,来验证新系统的稳定性及合理性。与此同时,交互与设计同学也是分批次的提交走查报告,提升整体的设计还原度,终于在整个项目组的不懈努力下,新系统目前已成功上线。

w


 

原文地址:58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》项目总结|企业级管理系统实战

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



用「雅各布定律」解答一道面试题 | UI&UE实用方法论

seo达人



 

01、什么是「雅各布定律」

「雅各布定律」是由雅各布·尼尔森( Jakob Nielsen)提出的一条关于产品可用性的定律。没错,这里的雅各布·尼尔森就是那个提出「尼尔森十大原则」的尼尔森,也是我常常在文中提到的UX研究咨询公司NN/g(尼尔森诺曼集团)的创始人之一。

1999年雅各布·尼尔森发布了一篇名为《界面标准会扼杀设计创造力吗(Do Interface Standards Stifle Design Creativity)》的文章。在文中,尼尔森讲述了他与甲方一同设计某个电商网站的经历。

在设计该电商网站商品导航方案时,方案一是 采用绝大多数用户长期在其他网站所接触的导航方式,方案二是根据甲方对自身产品线的看法构建的一套较为新颖的导航方式(具体方案形式,尼尔森在文中没有描述)。

尼尔森分别对两个方案进行了可用性测试,结果是:当用户使用方案一导航时,导航到目标商品的成功率为80%,而方案二的成功率仅为9%。

雅各布·尼尔森在文中引述这个例子,是为了阐明一则观点: 用户将大部分时间花在其他产品上(这里的“其他产品”放在当下这个时代,我认为就是 拥有巨量用户的头部产品)。因为用户花费大量的时间在这些产品上,自然会被这些产品培养出一定的用户习惯。

如果你想提升产品的可用性,你要做的事情就是与其他产品保持 一致性——这就是 「雅各布定律」。尼尔森认为 一致性是支撑产品可用性的最重要条件之一。并且他将这些应该保持的一致性称为「 设计标准规则(Rules for Design Standards)」。

那么当下的产品都遵守着哪些「设计标准规则」呢?

 

02、设计标准规则

实际上,遵循设计标准规则就是遵循用户的心理模型和行为模型。我依次从宏观到细节梳理一下,当下的产品设计普遍都存在哪些设计标准规则。

 

2.1 一致的产品模型

耍家任职于一家电商公司,我司的产品在主业务线(销售商品线)上,从精准搜索或商品分发,到商品详情、加购、生成订单、付款、返回结果,这一套基本的电商模式框架,是一定要符合大部分用户的行为模型操作习惯的。

说白了,国内的电商巨头无非就那几家,用户每天花费大量的时间在这些产品上,早已经被培养出了非常深刻的行为习惯,如果我们在主要盈利业务上去进行创新,自然是要承受收益风险的。

这一点不仅是我司会考虑到的问题,国内大部分的电商产品,也都是遵循着这一主流电商产品模型。

而在一些自身产品特有的功能、任务流中,我们就大可以进行产品模型的创新。那是什么让用户在不一样的产品模型中,依然能够灵活自如地上手操作一些功能呢?

那就要说到交互示能了。

 

2.2 一致的交互示能

当用户脱离了熟悉的产品模型,却依然能够上手一些功能,是因为他们从其他产品中早已学习到了一些基本的交互示能。

例如文本中高亮带下划线的文字或悬浮有阴影的卡片也许可以点击,带有红色徽标的功能也许比较重要或需要用户查看等等。

当自身的产品交互在示能传达上和其他产品不一致时,就很容易引起用户在操作与体验上的疑惑。

 

2.3 一致的页面结构

还是以我比较熟悉的电商行业来举例。我们可以看到,国内大大小小的电商产品,除去自身功能与GUI的特性,详情页页面结构基本上都是这样:

因为页面结构对用户的影响比交互示能更大,一致的页面结构、功能排版可以让用户极快地熟悉并操作产品。也许你会对此嗤之以鼻?认为这是给不去创新寻找借口?

然而这么做的知名产品却不在少数。2017年 Youtube 改版,保持了绝大多数页面结构,对于无法适应的用户,允许他们切换回旧版;前不久更新的 iOS15,Safari 将地址栏移动至底部,却也允许用户自由切换地址栏位置。

保持一致的页面结构并不是要产品设计完全摒弃功能排版上的创新,而是在创新时也要 考虑到用户的学习与适应成本。

 

2.4 一致的图形认知  

落实到具体的UI上,保持与其他产品一致的图形认知,会更易于用户理解。但图形认知不仅仅只是告诉用户:三个圆点的icon代表着“更多”、叉代表着“关闭”…更加符合用户认知的图形,甚至可以辅助到业务目标。

墨迹天气之前做过一个A/B测试,希望通过修改分享图标样式来刺激用户分享行为。分别投入了3个试验版本和1个原始版本。

最终结果是方案3胜出,相比其他版本,方案3中分享图标的点击率上涨了近20%,这对于用户量过亿的墨迹天气来说,是一个不小的提升。

随着市场上的产品增多,视觉图形的使用场景越来越繁杂,当我们无法确定哪一些图形更加符合自身产品用户认知的时候,也可以像墨迹天气这样进行数据验证。

虽然墨迹天气并没有再进一步分析为何方案3的图标能够胜出(我猜测是否与iOS原生应用培养的用户认知有关?),但我们能够确定的是,在没有任何文字提示的前提下,有更多墨迹天气的用户能够理解到方案3中图形所传达的“分享”操作的含义。

 

03、如果再被问到这个问题…

如果再一次被问到「如何看待当下产品设计同质化严重」的问题,我想我应该会这么回答。

首先要分析面试官所谓的“同质化”指的是哪一个方面,是大方面的产品、功能、交互同质化,还是具体落实到UI设计师身上的视觉、风格、元素同质化。

如果面试官是询问对产品、功能同质化的看法,那大可以阐述「雅各布定律」。因为遵循其他绝大多数产品对用户培养的习惯来进行产品设计,可以显著提升产品可用性,降低用户学习成本。

并且很可能你的产品可用性与业务目标、商业价值挂钩,那更应该保持这种一致性,不应该用商业的风险来为产品的创新买单。

而落实到视觉层面,我认为遵循设计标准规则,实际并不会影响到设计师对GUI的创新。例如我们知道很多竞品的案例:MacOS 与 Windows 、 WPS 与 Microsoft Office 、 iOS 与 Android ,为了减轻用户的学习成本,它们在产品设计、交互设计上存在着许多一致性,然而这并不会干扰产品在GUI层面的表现,用户依然能够从视觉层面区分这些产品。

所以作为UI设计师,大可以向面试官表达自己在GUI层面的考虑与创新。一致性不可怕,同质化也不可怕,可怕的是脱离可用性去谈创新以及完全为了一致性而失去创新能力的两个极端。

 

原文地址:UCD耍家(公众号)

作者:Howiet

转载请注明:学UI网》用「雅各布定律」解答一道面试题 | UI&UE实用方法论

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

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

存档