首页

数字金融产品的安全感设计探究

资深UI设计者

当互联网不断的深入到我们的生活中,我们对安全感的需求也延续到了互联网使用中,特别体现于互联网金融产品。由于其具有风险性、收益性、流动性等特点,用户对于资产安全的掌控感更为关注,产品使用体验欠佳也直接影响客户安全感。


以下将基于自身工作总结和行业经验,聚焦互联网金融产品分享和总结如何向用户营造安全感。


目录:

一、需要什么样的安全感?

二、如何传达出安全感?

三、怎样体现出安全感?




需要什么样的安全感?


安全感是人类最底层的需求,但不同类用户群体需要的安全感也各有千秋,我们参考第一财经商业数据中心×蚂蚁财富的2019线上理财人群报告,将线上理财的人群分为四类:

分别是初入职场的95后、职场新兴力量的90后、理财中坚力量的80后和经历风雨的70后。其中近一年的新增移动互联网基民中超五层为90后、95后,成为金融移动互联网的中坚力量。


这类型的投资者由于具有碎片化处理事务的习惯和金融知识不足、理财经验不丰富、资金的抗风险能力不高的特点,当市场普遍行情下跌时,更容易产生焦虑的情绪而导致“割韭菜”,进而可能会影响到卸载APP的行为。根据Mob研究院的数据显示,在2021年3月天天基金日均卸载用户规模为前两个月的6倍,而当时对应的市场行情正为基金普遍大跌。

因此从安全感的需求上他们更侧重高效的信息降维、足够的理财产品的风险提示、合理的预期收益宣传以及投后亏损及时的内容陪伴


而根据腾讯理财通×国家金融与发展实验室出品的2021年互联网理财行为与安全研究报告显示,理财知识更充足,理财经验更丰富的80后、70后在安全感的维护上则更关注理财产品的信息披露风险、信息不透明风险、市场政策风险、个人信息泄露风险此类问题。




如何传达出安全感?


安全感是一种感性的心理感受,而人类的情感由本能、行为、反思三个层面共同决定的。

这三个层次作为人类大脑的运作的规律,映射到设计当中,同样是可供遵循、值得探究的。



本能层

先于意识和思维,它是外观要素和第一印象形成的基础,着重于产品的外观、触感等。“美观即实用原则”人们会潜意识里认为好看的东西也是好用的,所以在界面设计当中,主要设计对象是视觉设计。


而金融产品中,常用蓝、绿等冷色调的色彩,给人以冷静,稳定的感觉,表现金融产品的科技感和可靠性;常用红、黄、橙等暖色调,代表着热情、温暖与责任。


行为层

是人类身体日常行为的运作,行为层的设计与产品使用过程中的愉悦感和效率有关。好的行为层设计对应产品功能传达、易学性与易用性,以及正面的心情感受。在界面设计当中,主要设计对象是交互设计。(将在下文通过投资场景详细分析)



反思层

超越了本能层和行为层,存在意识和更高级的感觉、情绪及知觉。对应的是产品的情感温度,主要的设计对象是正向情感的结果反馈以及品牌信任。


良好的企业品牌形象和口碑很大程度上会给用户带来认知上的安全感。用户在初次选择购买金融产品时,往往强大的品牌背书起到了关键作用,即使是同一只基金,用户也会选择在自己信赖的平台里购买。

我们可以通过在页面设计中加入更多的品牌元素,如品牌主题色、LOGO、品牌IP形象、品牌slogan等,来潜移默化地让用户感受企业的价值:


另一种常见于一些平台利用强大的背书以及所获的成就,清晰地向用户展示可以提供的保障权益,责任条款及资质介绍等来传达企业对用户负责的态度,提升用户对产品乃至对企业的信任感:




如何体现出安全感?


我们将金融的生命周期分为三个阶段,分别可以概括为:投资前(产品选择)、投资中(产品交易)、投资后(产品管理),不同阶段的关注点不同,而对于安全感需求各不相同:



投资前

结合文章一开始对人群的分析,由于投前的行为特点更多聚焦于产品的选择,因此从理财小白的角度对于安全感的缺乏更集中于“买了会不会亏钱?”、“产品买对了吗”、“看不懂规则”、“这个适合我吗”等,尤其存在于一些新形式的理财组合产品和策略智能投产品中。


在这个阶段的安全感维护,除了相关页面的信息降维、必要的投教启蒙以外,还需要考虑用户疑问的快速解答、合理的预期收益宣传等。另外投钱的启蒙教育更可以考虑结合一些运营活动,让小白用户通过更有趣的方法了解产品,了解自己适合的产品。

而对于较有经验的理财“老司机”而言,安全感的缺乏更集中于“过往表现怎么样,如最大回测率等”、“市场行情、政策是否利好”、“基金经理的资历”等,而更需要考虑信息的多维度展示、信息披露、行情资讯的展示、甚至是产品的对比等来表达产品的未来盈收能力可期。


投资中

当投资者已经选择好信任的理财产品时,在产品交易的各个界面也需要关注交易流程中安全感的反馈。

其中包括正向反馈和负向反馈。正向反馈是指用户跟产品发生正确的交互时,系统给予用户的正确引导,可以帮助用户打消顾虑,建立信心,让用户感受到一切都在顺利地进行着,这对那些在设备操作方面缺乏信心的用户来说尤为重要,用户不会对自己的操作或对平台产生质疑,如:专属的密码输入键盘、正向反馈如金额输入时的金额提示、特别提出易误解的交易规则等


反向反馈是指用户在操作过程中出现或疑似出现误操作时,系统向用户展示提示或二次确认以促进错误的纠正或确保此操作无误。它能确保在第一时间告知用户出现了不正确操作,及时更改,使流程顺利进行,尤其是对于一些理财小白而言,合理的容错设计更促进有效投资,提高未来的盈利体验。如撤销操作二次确认、购买超出风险承受能力的产品、输入错误金额时的反馈。

引起思考:

虽然天天基金的撤单确认展示了退回帐户,但是此弹窗的取消按钮引导性过强,首次操作仅通过银行卡的列表的箭头较难联想到是确认撤单的下一步操作(还以为是可选择退的帐户)。



投资后

产品交易成功后,投资者的关注会更集中于自己的资产的变化,产品的未来走势等,因此在安全感的提供上,需要向投资者传达准确的交易状态、资产状态、资产的保护等,甚至可以在产品购买的完成页设置快捷加入自选和涨跌提醒等

引起思考:

在支付宝的基金总金额中,存在交易进行中的提示文案为“买入待确认*元”,但不少小白会产生疑问,当前展示的基金总金额是否包含提示的待确认金额,此时是否可将文案改为“含买入待确认*元”(毕竟也有部分直销app并不会将待确认金额包含进产品的总金额中)


另一方面的更需要考虑当基金产品存在亏损时,及时向投资者传达情感陪伴和合理的投资交易,以促进投资者优化持仓或保持中长期持有,避免频繁的短期交易而导致不良的盈利体验。

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

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


文章来源:站酷 作者:陈皮红豆沙

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

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

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


input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

前端达人

input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈

大家可以看效果图的搜索输入框,默认显示着“用户名/Email”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“用户名/Email”的提示。是不是很常见?很多搜索、登录、表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 

<input type="text" value="搜索关键字" onfocus="if(this.value == '搜索关键字') this.value = ''" onblur="if(this.value =='') this.value = '搜索关键字'" /> 

我是非常反对把 javascript 写在 html 标签里的,这和 style 写在 html 标签里一样,虽然不违反 W3C 标准,但也不推荐这么写。因为: 
1.完全没有复用性可言,如果是个表单,输入框很多,每个都需要这样的效果,那就每个都这么处理吗? 
2.如果要修改其中的提示文字,费时费力又不好维护。 
3.我们倡导结构(html)、表现(css)、行为(javascript)三者分离,这才是一个好的页面。 
那要怎么写才能实现这个效果,而且既有复用性,又好维护,又不需要把 js 写进 html 里呢? 
具体方法如下: 
首先肯定是引入jQuery 
Html代码: 

<div><input type="text" value="提示测试" class="input_test" /></div> 
<div><input type="text" value="请输入搜索关键" class="input_test" /></div> 

jQuery代码: 

复制代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> $(function(){ 
$('.input_test').bind({ 
focus:function(){ if (this.value == this.defaultValue){ this.value=""; 
} 
}, 
blur:function(){ if (this.value == ""){ this.value = this.defaultValue; 
} 
} 
}); 
}) </script> 
复制代码

只要在实现的input输入框加上”input_test”这个class就可以轻松实现了 




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

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



文章来源:博客园

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

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

jquery控制元素的隐藏和显示的几种方法

前端达人

使用jquery控制div的显示与隐藏,一句话就能搞定,例如:

 

方法一

显示:

$("#id").show()表示为display:block,

隐藏:

$("#id").hide()表示为display:none;

 

方法二

$("#id").toggle();

切换元素的可见状态。如果元素是可见的,切换为隐藏的;

如果元素是隐藏的,则切换为可见的。

 

方法三

显示:

$("#id").css('display','block');//显示

隐藏:

$("#id").css('display','none');//隐藏

或者

$("#id")[0].style.display='none';

display = none 控制对象的隐藏

display = block控制对象的显示

 

方法四:

元素显示:

$("#id").css('visibility','visible');//元素显示

元素隐藏:

$("#id").css('visibility','hidden');//元素隐藏

CSS visibility 属性规定元素是否可见。
visible 元素可见。 
hidden 元素不可见。 
collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 
inherit 从父元素继承 visibility 属性的值。

注意:

display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别:

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,即它仍然具有高度、宽度等属性,通俗来说就是看不见但摸得到。


  1. //第1种方法 ,给元素设置style属性
  2. $("#hidediv").css("display", "block");
  3. //第2种方法 ,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性
  4. $("#hidediv").attr("class", "blockclass");
  5. //第3种方法,通过jquery的css方法,设置div隐藏
  6. $("#blockdiv").css("display", "none");
  7. $("#hidediv").show();//显示div
  8. $("#blockdiv").hide();//隐藏div
 


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

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



文章来源:csdn

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

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

为什么以前的同学和你的差距越来越大

seo达人


之前刷到一条非常励志的新闻:一个高中寝室的三个闺蜜都考出了七百多分的好成绩,在为她们感到骄傲的同时,我也陷入了反思。这也许就是所谓的圈子,身边的人都很优秀的时候,你自然不会太差。

 也让我想起了之前一个伙伴通过努力进了字节跳动实习,带动了整个寝室的都努力起来了。大家依然希望向优秀的人学习,以此作为自己的目标。一起读书的时候大家都在一条起跑线,可是随着时间的推移,你们之间的差距开始明显。如果你跑在前面自然是好事,就怕落后的是自己。

 不进则退,工作多年之后反思自己,这些年是进步了还是原地踏步。如果想要缩短与他人的差距,或者拉开自己未来的优势,在职场五年内需要重点对待。

图片

 

五年内你要做好这十件事:

一、确定职场路径

二、强化设计基础

三、打造精专技能

四、勤于作品输出

五、培养总结能力

六、加强提案能力

七、叠加行业背书

八、推开学历门槛

九、融入优质圈子

十、积累职场口碑

 

一  确定职场路径 

行业里面流传着一句话:“三年入行,五年精专”,职场五年对于设计师来说至关重要。想要在这个阶段时间内把一个方向做精,需要早一点确定职场路径,杂而不精很难迈上更高的台阶。

图片

 我们可以丰富我们的专业技能,但是要明确一点,这些多维度的技能都是为了辅助主方向的深入突破。专业化的职场路径上比较忌讳举棋不定,这样就会造成能力平庸,没有自己的差异化竞争力。

 也有初入职场的同学无法判断哪一个路径适合自己,就会需要时间来验证,这种情况下可以找个有经验的前辈为你分析各路径的天花板在哪里。尽量缩短这个试错的时间,毕竟五年也是一晃而过的。

图片

 大家进行自我评估,看看你的职场路径是否清晰,及时稳固方向。

 

二  强化设计基础 

大家不要一味的追求表面的高度,而忽略基础知识的巩固,这也是为什么大部分科班出身的设计师上手能力都会更好一些。不要局限于当前工作输出的能力范围,要加强更多关联方向的基础理论知识和经验技巧。

图片

 一些基础的美术知识、版式技巧、色彩理论、手绘基础、造型透视等都要利用空余时间学习,有些内容短时间可能感受不出作用,但是在未来也许就是你设计瓶颈的突破剂。

图片

 给自己制定一些阅读计划和学习计划,强化设计基础,只有地基越牢固,职场大楼才能建得越高。

 

三  打造精专技能 

虽然我们都在说技多不压身,但是这个作为满足普通的工作需求没问题,想要有自身的差异需要打造精专技能。我们缺少的永远不是普工,而是高技能人才,要在一个垂直方向有自己的“拿手好戏”。

想要在一个阶段时间内快速突破,就需要缩短我们的技能范围,重点强化一个方向。最快的方法就是通过输出倒逼输入,在一个精专的方向里面坚持日常输出,不断的进行复盘总结。对关联的知识进行查漏补缺,对偏弱的技能反复磨练。

图片

 在设计职场中我们虽然讲究“T”型发展,但是主干上的精专才是支撑技能高楼的关键。

 

四  勤于作品输出 

 技术能力的养成离不开点点滴滴的磨练,而对于设计师来说,证明自己能力最有效的方法就是作品。光说不练假把式,道理说得头头是道,作品做得一塌糊涂,肯定是得不到行业认可的。

 专业能力的增长都是需要自我驱动的,不要仅局限于工作环境中的积累,日常的学习沉淀、作品输出、复盘总结等也是至关重要。要勤于作品输出,反复设计才能找出更多问题,进而不断解决问题,获得经验和技巧。

图片

 对于 UI设计师来说,当具备软件基础和设计基础之后,刚开始可以每天练习 1-2 个界面(具备交互关联的组合界面)。只要坚持下去,在视觉层面不难攻破。然后再逐步练习成套作品的输出,锻炼自己对于全案设计的把控,加强独立完成项目的能力。后期也要培养写作性质的作品输出,加强设计总结能力和方法论的输出能力,让作品输出的形式不局限于视觉层面。

图片

 

五  培养总结能力 

设计师的总结能力在初入职场的时候并不能被大家所重视,这个时候执行层面的能力比较重要,这是保障你完成基本需求的关键。随着项目经验的丰富和执行能力的成熟,我们会要求完成难度系数更高的项目,会去对设计经验进行总结和研究设计方法论。

对优秀设计经验和设计技巧的总结,可以让我们掌握设计的轨迹,沉淀于自己的项目中。对于 UI 设计师来说,培养总结能力要从产品体验日记开始,训练我们的观察和记录能力,也是养成习惯的关键。记录过程中的文案描述,从最开始的口语化逐步培养行业术语的运用;从流水账式的记录逐步学会精简,言简意赅的说清楚所见所感。

图片

 总结能力的提升可以从教程式文章开始,把自己擅长的某个设计经验梳理出来,这也是查漏补缺的过程。逐步过渡到对行业趋势的总结、设计技巧的总结、项目经验的总结、职场经验的总结等。刚开始不要写太宽泛的总结,以一个单一的点开始总结,以点带面的总结出这类需求设计的方法和技巧,形成可供他人学习的方法论。

 

六  加强提案能力 

能够做出好的设计,也要具备好的提案能力,设计需要被赋予诠释才能打动人心。我们不能只是画好图就丢给需求方,这样他们会使用自我主观意识去判断,无法真正意义上了解你的设计想法。

提案能力对于设计师来说至关重要,分为设计思路整理、提案文档制作、演讲能力、临场控制能力、答疑解惑能力等。在项目中能有机会进行提案千万不要推辞,这是锻炼自己的机会。有些设计师由于性格内向会让同事代劳,这其实是在白白浪费机会,跳出舒适区才能更快的成长。

图片

 在职场中除了争取机会进行项目提案以外,也可以多参与一些分享来提升这方面的能力,刻意培养自己。

 

七  叠加行业背书 

其实很多初入职场的设计师容易忽略行业背书这个概念,觉得只要有份轻松的工作就好,最好钱多活少离家近。工作几年后才恍然大悟,发现行业背书的重要性。

行业背书就相当于推动求职的“催化剂”,可以让我们获得更好的机会。组成我们行业背书的因素很多:好的学历背景、大公司的工作经验、知名项目的参与经验、设计大赛的获奖作品、专业设计平台的推荐设计师、行业内的影响力等等。还有很多都可以叠加为我们的行业背书,我们要不断去叠加,增加我们求职简历的“含金量”。

图片

 

八  推开学历门槛 

对于设计师来说学历是敲门砖的作用,特别是一些大厂的招聘需求,会对学历有一个门槛限制。不过在日常工作中,你会发现学历并不是绝对的能力体现,专业能力的强弱与学历的高低并没有太大的关系。如果学习能力比较强的,大学基础知识学得比较好的,在职场中的适应能力也许会更好。

图片

 虽然专业能力是我们的首要条件,但是我们也不能被学历限制,现在提升学历的方法很多,宜早不宜晚。要早点做好时间规划,把这个问题解决掉,后期才能把精力重点放在专业的精进上面。

 

九  融入优质圈子 

在一个行业工作时间久了,就会认识更多的同行设计师,久而久之就形成了自己的人脉和圈子。在后期圈子也会决定着自己的未来,比如想要去大的公司,要是有认识的朋友内推一下,效率就会比普通的投递方式要快很多。在一个优质的圈子里面,大家都是优秀的设计师,自然会被带动着互相进步。

图片

 在自己的第一个职场五年内,要不断的积累属于自己的人脉和融入优质的圈子,认识更多有能力的设计师。从优秀的人那里可以获取更多优质的动态,建立一个印象之后,以后遇到问题也可以请教他人,获得解决思路和方向。

图片

 通过一些设计公众号的关注、设计平台的交流、线下分享会的接触、进阶特训的学习渠道、社群的加入等可以接触一些设计圈子,筛选自己觉得优质的融入。有时候也要在圈子内解答别人问题和分享自己的经验,以此来加深大家对你的印象,以后遇到问题抛出来的时候才会有更多人愿意交流,互相帮助!

 

十  积累职场口碑 

随着我们工作年限的增加和工作单位的转换,我们会接触很多不同职业的同事,而我们在这些同事眼中的印象决定了未来的资源转换程度。如果大家对你没有印象或者印象不好,遇到设计需求或者机遇,估计也不会想到你,我们在职场中的口碑就显得格外重要。

我们在职场中都会被标签化,大家都会在脑海中对你形成标签记忆。比如你是靠谱还是不靠谱、专业还是不专业、好相处还是高傲难相处等等,和你接触的人对你的标签设定越好,以后无论是面对机遇,还是你有求于人的时候,都会因为这个好的印象而愿意帮助你。反之,可能会遗忘你,注定只是别人职场中的一个“过客”。

图片

 在职场中要注重职场礼仪,这个和你的专业能力同样重要。不同的环境要学会约束自己的行为,而职场是一个带着约束性的场景,你的态度也是别人对你的态度,都是互相作用的。

 

总结 

 三年入行,五年精转。对于设计师来说,第一个职场五年至关重要,不仅需要将专业能力提升到高级/资深的阶段,职场经验和人脉的积累也决定了第一个职场五年的变化。是原地踏步还是极速前进,都在五年之后开始发力。

五年的积累可以让我们具备专业层面的独当一面,也能让我们具备放手一搏的经验和资源,想要突破瓶颈期就要打好基础,这样才能走得更高,看得更远。

希望这些个人的职场反思可以带给大家抛砖引玉的思考,对于刚入行的设计新人有一个计划的指导;对于在职的设计师有一些调整方向的参考。

备注:本文配图来源于 Unsplash

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》为什么以前的同学和你的差距越来越大

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

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


文章来源:站酷   作者:陈皮Celia 

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

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



做了5年设计,还是这个设计技巧实用!!

seo达人



终于迎来了一年中最热的时候,整个人都感觉热膨胀了,似乎空调也变弱了许多,每天只想着一头扎进冰箱,可能这才是夏天的最优解。今天就以大暑为主题设计一款字体,看看如何让一个字看起来非常热。

 

首先将文字整理好。

图片

 

STEP 01 > 分析属性

接着我们分析字体属性,上次小暑是想体现凉爽,那么这次我们来表现特别热的感觉。

图片

根据分析出的属性,我们先构思好风格方向,胖胖的字体,要体现热的感觉。

图片

 

STEP 02 > 设计字体

下面将编排形式以图框形式画出来,这里可以看出是烈日和主题字结合的形式,笔画风格就是比较胖的设定。

图片

我们开始具体操作,这里我们用画笔先画出大概的草图,接着细化文字。

图片

做好字形之后,我们将两个字靠近,很挤的感觉,中间可以加上一些连接特征,减去部分笔画线条,使层次叠压更明显。

图片

然后我们再继续增加特征,加一些汗珠和流汗的感觉。

图片

接着我们需要对字体进行编排,按照之前画出的图框,画好烈日与文字叠压。

图片

最后我们可以用褶皱工具做出抖动的效果,热浪的感觉就有了。

图片

 

STEP 03 > 搭配颜色

最后就是搭配颜色,这里底色我用了深蓝色,可以更好的突出设计效果。

图片

OK,字体做完了,学会提取属性的特征,会使你的设计更有意思,技法只是其中一个环节,想法是非常关键的一步。

 

原文地址:趣投记(公众号)

作者:趣趣熊

转载请注明:学UI网》做了5年设计,还是这个设计技巧实用!!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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



深度解析蚂蚁Ant Design的设计原则

ui设计分享达人



『 Ant Design是什么 』


众所周知蚂蚁集团的B端产品是一个庞大的系统,数量多且功能复杂,而且变动频繁,常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件,根据原子设计理论可以得到一些稳定且高复用性的内容。

随着这两年B端产品的逐渐白热化,越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标,蚂蚁集团体经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范,降低冗余的生产成本,让设计者专注于更好的用户体验。



『 Ant Design设计原则是什么 』


针对B端产品反复出现的一些设计体验等问题, Ant Design 给出标准的设计原则,实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面,既减少了不必要的认知成本,又能够提升设计的效率。考虑到需要适应各种定制化的业务场景,设计原则具有一定的灵活性,万变不离其宗,通过了解设计原则的构建逻辑,高效组织信息、帮助建立用户与界面的互动等原则性要求,可以衍生出更具场景特性的设计方案。


① Ant Design设计原则的由来

可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则,并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充,我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明,这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。


② Ant Design设计原则的适用范围

1. 我们先说说『Ant Design 』的适用范围:

稍微了解 Ant Design 的小伙伴都知道,本系统是针对B端后台系统,承载媒介是PC端的浏览器。使用的人员主要包括:用户体验设计师、交互设计师、UI设计师、前端程序员等。

2. 再说说 『 Ant Design 设计原则 』的适用范围:

顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分,但是前文已经提到,此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华,所以设计师可以把这些原则运用到任何的设计领域,并不要局限于企业后台系统的PC端产品。

为了方便大家理解,讲一个小故事。故事来自于《写给大家看的设计书》,作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后,发现其中有一颗叫约书亚树的树,造型奇特,自己从未见过。于是决定出门转转,然而发现外面到处都是这种树。故事到这里就完了。

可能大家会想,这个故事要讲一个什么道理呢?简单来说就是,当你手中有个锤子,满世界都是钉子。当你了解到下面要讲的十个设计原则后,你会发现它们处处都适用。


③ Ant Design设计原则的内容

十大原则如下:

  • 亲密原则(Proximity)

  • 对齐原则 (Alignment)

  • 对比原则 (Contrast)

  • 重复原则 (Repetition)

  • 直截了当 (Make it Direct)

  • 简化交互 (Keep it Lightweight)

  • 足不出户 (Stay on the Page)

  • 提供邀请 (Provide Invitation)

  • 即时反应 (React Immediately)

  • 巧用过渡 (Use Transition)



『 如何运用Ant Design的设计原则 』


对于一个初级设计师而言,想要了解UI用户体验等知识,学习 Ant Design 的设计原则算是比较快能上道的,因为 Ant Design 是吸取了很多前辈的精华,提炼而成的系统。打个简单的比喻,对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』,掌握『 设计原则 』最好的字典。

接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。

Ant Design 定义了10条设计原则,根据『 席克定律 』选项太多不易记忆,于是我找到了这些设计原则的共通性,将其归为4类,也就是大家只需记住四类设计原则,在工作中适当延展即可。


① 视觉层级清晰

包含 Ant Design 的设计原则有:『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。

「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面,任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。


1. 亲密

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。


1.1 纵向间距关系

  • 纵向间距:在 Ant Design 中,通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为:8px(小号间距)、16px(中号间距)、24px(大号间距)。


  • 增加元素:通过增加「分割线」来拉开层次。在这三种规格不适用的情况下,可以通过加减「基础间距」的倍数,或者增加元素来拉开信息层次。注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0,y 是纵向间距,8 是「基础间距」。


1.2 横向间距关系

  • 组合排布:为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性。(注:栅格是另外一个模块的内容,这里不赘述。)


  • 复选框内:在一个组件内部,元素的横向间距也应该有所不同。


2. 对齐

正如「格式塔学派」中的连续律(Law of Continuity)所描述的,人类的视觉系统往往倾向于将看到对象的直线继续成为直线,曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

格式塔学派(德语:Gestalttheorie):是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,「整体不同于其部件的总和」。——摘自「维基百科」


2.1 文案类对齐

如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点。


  • 推荐使用:标题和正文左对齐,使用了一个视觉起点。

  • 不推荐使用:标题和正文使用了两个视觉起点,不推荐该种对齐方式,除非刻意强调两者区别。


2.2 表单类对齐

  • 冒号对齐:冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。


2.3 数字类对齐

为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。


3. 对比

对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

注:要实现有效的对比,对比就必须强烈,切不可畏畏缩缩。


3.1 主次关系对比

为了让用户能在操作上(类似表单、弹出框等场景)快速做出判断, 来突出其中一项相对更重要或者更高频的操作。

注意:突出的方法,不局限于强化重点项,也可以是弱化其他项。


  • 需要区分主次场景:


  • 不需要区分主次的场景:「通过」和「驳回」都使用次按钮,系统保持中立。在一些需要用户慎重决策的场景中,系统应该保持中立,不能替用户或者诱导用户做出判断。


3.2 总分关系对比

  • 总分关系:通过调整排版、字体、大小等方式来突出层次感,区分总分关系,使得页面更具张力和节奏感。


3.3 状态关系对比

常见类型有「静态对比」、「动态对比」。


  • 静态对比示例:用不同颜色的点,来表明不同状态。


  • 动态对比:鼠标悬停时,该项和其他项呈现出明显不同的视觉效果,响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比,以便用户更好的区分信息。


4.重复

相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。


4.1 重复元素

重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。


  • 线框重复:


  • 设计要素重复:


  • 文案格式重复:


② 交互操作高效

包含 Ant Design 的设计原则有:『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。

「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题,却忽略用户能否理解流程如何操作,那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短,而是用户的心理时间是否太长的问题,就像我们打游戏往往会觉得时间过的很快,但是在等待页面加载时却不耐烦。


1. 减少打断

能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。

变化盲视(Change Blindness):指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》

心流(Flow):也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》


  • 气泡提示:对于操作的反馈是必要的,下文会提到,但是为了减少打断用户,轻量级的反馈气泡提示即可。


  • 输入覆盖层:鼠标「点击」图标触发;鼠标「点击」悬浮层以外的其他区块后,直接保存输入结果并退出。不用弹窗或跳转的形式编辑,只需要在触发图标附近弹出浮层即可,这样避免用户视动线的混乱,减少打断用户操作的心流。

2.缩短步骤

正如 Alan Cooper 所言:「需要在哪里输出,就要允许在哪里输入」。这就是直接操作的原理。eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。


常规的编辑模式,界面都会跳出一个弹窗或者是一个页面跳转,无形之中用户走了更多的流程路径,如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。

  • 文字链/图标编辑:

状态一:在可编辑行附近出现文字链/图标;

状态二:鼠标点击「编辑」后,出现「输入框」、「确定」、「取消」表单元素,同时光标定位在「输入框」中。


  • 多字段行内编辑:编辑模式在不破坏整体性的前提下,可扩大空间,以便放下「输入框」等表单元素;其中,在 Table 中进行编辑模式切换时,需要保证每列的不跳动。


  • 拖放图片/文件:在早前很多产品在上传功能上,都是跳出弹窗再选择文件上传,现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。


  • 模糊搜索:系统根据用户所查询的关键词,智能匹配可能的结果。


  • 定时自动更新:新增的列表项「高亮」,持续几秒后恢复正常。不需要用户手动刷新,减少不冗余的操作。


3.避免回忆

人们在思考的时候,是需要依靠大脑神经元之间相互传递信号,而回忆是需要调用更多的的神经元传递信号,简单地说就是非常费脑子。


  • 搜索历史:搜索历史的功能,可以减少用户的回忆,使得整个体验更加轻松愉悦。


4.信息降噪

根据费茨法则(Fitts's Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互,起到信息降噪的作用。

费茨法则 :到达目标的时间是到达目标的距离与目标大小的函数,具体:。其中:1.设备当前位置和目标位置的距离(D);2.目标的大小(W)。距离越长,所用时间越长;目标越大,所用时间越短。


  • 列表嵌入层:将列表为多层级时,隐藏弱层级列表内容,可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容,鼠标悬浮即可展开。


  • 标签页:标签也换可以将信息内容进行分类,让用户更易理解。


  • 渐进式展现:用户在填写表单时,会根据当前录入的数据,展现下一项需要填写的内容,这样的展现方式可以屏蔽掉无关紧要的内容。


  • 悬停即现工具:鼠标悬停时,出现操作项。这样将不重要信息或者操作隐藏起来,不会干扰到用户浏览其他重要内容。


③ 系统反馈即时


包含 Ant Design 的设计原则有:『 简化交互 』『 巧用过渡 』『 即时反应 』。

「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。


1.实时反馈

虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

牛顿第三定律 :当两个物体互相作用时,彼此施加于对方的力,其大小相等、方向相反。——摘自《维基百科》


  • 实时预览:根据用户的输入,提供关于密码强度和有效性的实时反馈提示。


  • 文字链热区:当悬浮在 ID 所在的文字链单元格时,鼠标「指针」随即变为「手型」,单击即可跳转。


2.过渡反馈

人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。

Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。

Receding:  与当前页无关的信息元素应采用适当方式移除。

Normal: 指那些从转场开始到结束都没有发生变化的信息元素。


  • 表格加载:网络不好或者表格数据过多,都有可能导致加载缓慢,这时有一个小动画可以缓解用户的焦虑感。


  • 富列表加载:用户在打开列表时,页面无法做到一次性加载所有的数据,同时有为了减少翻页的繁琐操作,就有了下拉自动加载的。


  • 页面加载:当用户访问的页面体量过大时,系统会通过给出倒计时或完成百分比,来缓解用户焦虑,并且给用户友好可控的感觉。


  • 滑入与滑出:可以有效构建虚拟空间。  


  • 折叠窗口:在视图切换时,有助于保持上下文,同时也能拓展虚拟空间。


  • 对象增加:在列表/表格中,新增了一个对象。


  • 对象删除:在列表/表格中,删除了一个对象。


  • 对象更改:在列表/表格中,更改了一个对象。

    • 状态一:用户更改了「详情」中的值;

    • 状态二:用户点击「保存」后,详情所在的网格出现「黄底」,表明该对象发生了更改;

    • 状态三:底色持续几秒后,恢复正常。


  • 对象呼出:点击页面中元素,呼出一个新对象。


3.结果反馈

用户常常会疑惑自己的操作是否成功了,哪怕是失败了也是需要系统反馈,这样才能安心进行下一步的操作。


  • 页面反馈结果:


  • 气泡反馈结果:


④ 用户自由可控


包含 Ant Design 的设计原则有:『 提供邀请 』『 足不出户 』『 即时反应 』。

「用户自由可控」的重要性体现在 交互前对下一步操作的预判;交互时 不论操作后的结果多严重都要允许用户自主决策;以及交互后 能否对自己的操作结果反悔。


1.未来预判

很多富交互模式(eg:「拖放」、「行内编辑」、「上下文工具」)都有一个共同问题,就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示,以表明在下一个界面可以做什么。  这样人机交互的过程往往更加自然、顺畅。



  • 点击刷新:对于设计师而言,最常见的例子要属花瓣了,我们时长会沉浸在我们浏览的瀑布流卡片中,如果系统强行刷新当前页面,用户很有可能迷失。邀请用户主动更新,既不会错过新的消息,又不会导致我们的心流被打断。


  • 未完成邀请:用户在当前页面无法完成登录操作,为了减少用户迷茫的焦虑感,系统告知用户点击“更改”链接,可以去向何处。


  • 悬停邀请:鼠标「悬停」时,出现「选择此模板」的按钮。


2.自主决策

虽然系统中缺少不了一些危险操作或者不可逆操作(eg:删除、重置、重装系统等),但是仍然要用户自主决定是否继续,我们能做的就是让用户再三确认。


  • 弹窗提示:虽然弹窗打断用户心流,但是对于重要的操作,这样是最保险的方式。


  • 删除知识库提示:是钉钉中,删除「知识库」这一重要内容,是不可逆的,系统需要用户谨慎操作。


3.准许反悔

如果说「自主决策」中提到的案例都是不可逆的,那「准许反悔」的后果严重性会弱一些,系统对用户的操作没有那么强的阻断性,所以要准许用户反悔的,


  • 删除撤销:用户点击「删除」后,直接操作;出现 Message 告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者 1 分钟内不进行任何操作, Message 消失,用户无法再「撤销」。



『 Ant Design的优点与缺点 』


① 优点


1.助初创团队快速产品快速上线

Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功,但是能帮助业务产品『正确的成功』或者『正确的失败』。”

如果团队有一个产品idea,我们需要通过最少的资源开发此产品并投入到市场中,通过听取用户反馈,验证idea是否可行,快速迭代最终做出更完善的产品。但理想是美好的,但现实是骨感的,在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间,前几个版本的产品通常用户体验非常差,这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式,需要磨合,设计和开发进度一延再延,结果错过了风口,市场被竞品抢占,还没上线就倒闭了。

Ant Design提供了一套完整的界面实现方案,即有代码框架能直接拿来提高开发效率,每个界面组件都经过蚂蚁金服多个项目的考验,具备优秀的用户体验。用Ant Design来做0-1,能快速发布用户体验优秀的产品,听取用户反馈,快速迭代。


当然,创业是九死一生,市场和用户口味都充满了不确定性,谁也没有能力保证产品是否成功,但是只要你能高效的产出质量优秀的产品,不断试错,说不定以后就能成功。


2.减少设计和开发的不确定性。

用 Ant Design 就能高效的产出高质量的产品,减少设计和开发的不确定性。

因为我们公司就使用了 Ant Design 的系统,所以时常会与前端小伙伴沟通,以下都是他们在使用过程的感想。

Ant Design 提供的大量功能比较全面且UI风格统一的组件,能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景,驱动了 Ant Design 团队通过对使用情况的观察汇总,整理出来了这么一个组件库。他们的经验积累如此之丰富,足以让这个库支持大部分其他前端开发者的需要。

其设计团队给出的设计规范相当详细且经得起推敲,令许多其他团队获益匪浅。


3.节省设计与开发的人力成本

我见过太多宣称自己在乎用户体验的公司,给用户的产品质量确实比较高,但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班,情绪消极,这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了,因为创新需要员工有充沛的精力和主动性,天天加班谁还有这精神。

用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担,能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福,他们重新恢复活力和激情能做出更有创意和竞争力的产品,给公司带来更大的收益,这是一个三赢的结局。


② 缺点


1.无法根据业务场景定制组件,灵活度不够

一定有小伙伴会有这样的疑问,目前市面上有这么多的第三方设计规范,例如 Ant Design ,Element UI,有必要自己造轮子做一遍吗?

这里要视情况而定,如果公司产品是初创期,而且研发人手不足,那确实没有必要自己造轮子。反之在资源足够的情况下,是有必要设计团队重新做一套属于自己产品的规范组件库的,因为B端自身的业务性决定了市场上没有万能的设计规范,那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范,在此基础上进行修改,效率很低,适配的复杂度和重新开发相差无几。


2.组件细节深入度不够,只能“将就”使用

对于比较普通的设计解决方案是可以的,但是 Ant Design 包含的组件细节仍有不足,毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上,规范定义的越是精细,对于产品组件而言可延展性就越差,限制也会越多。而 Ant Design 只需要解决80%企业,80%的通用问题即可。


3.竞品同质化严重,视觉上无法脱颖而出

当市场大部分产品都在使用 Ant Design 设计系统时,产品的同质化就会很严重。为了避免这种情况发生,我们就有必要从设计语言、设计原则、设计组件三个部分开始,设计自己的规范。那些大厂的成熟的组件库该如何用呢?我认为应该把它当成一个字典,有不会的地方,可以去参考人家的成熟的解决方案。



『 总结 』


这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下,设计师如何运用 Ant Design 的设计原则,可以将这些原则分为四类:视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则,并将其灵活运用到设计工作中。




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

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


文章来源:人人都是产品经理    作者:菜菜不甜

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

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

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


体验度量深度实践

ui设计分享达人

前言


体验目标的达成,需要合理且客观的度量方法,体验度量的实践,需要度量框架的有力支撑。提高竞争优势,提升客户态度,保障产品可以即时的响应客户的需求。本篇文章的实践方法全部来源于酷家乐B端产品业务中的实践案例,重点在于度量框架的深度实践,如果我们的经验能够帮助到您,欢迎交流讨论。 


一、体验度量怎么做?


“体验”是用户纯主观的感受,从这个情况来看是很难被度量的。“体验”同时也是一个比较抽象的概念,如果把一个抽象的概念拆解成一个可执行的策略,拆解的过程如何保证策略的有效性,是我们一直在思考的。面对酷家乐工具型、SaaS型、平台型并存的产品体系,且存在错综复杂的用户需求和业务诉求。在这样的前提下对方法的确立需要更加的冷静。 

如何确定方法?我们需要的是一个完整的度量框架,以及能够聚焦用户体验层为驱动,分解并有力的去解决问题。经过大量的实践和验证得到,抓住一个击破点作为产品体验提升的目标,并一种合理的方式进行推导和验证,这是一种最直接度量体验的标准流程性方式,这里的目标必须是:


  • 体现用户主观感受或者具有行为驱动的目标。

  • 基于业务目标定义+用户诉求了解后,得到的以用户为中心驱动的用户行为。



二、度量模型怎么选?


面对设计圈内已经存在的和部分大厂创造的度量模型,评估优劣后最终我们选取了HEART模型。因为HEART是个比较全面和具备更多扩展性的分析框架,同时足够的权威和标准,而且市面上的模型基本都被HEART的五维囊括。除了这些考虑因素外,再给出以下几个明显的优势点:


  • 1、HEART同时涵盖了定性和定量的不同数据维度。

  • 2、HEART框架同时包含了:宏观和微观的层面

  • 3、HEART模型并不单纯的再定义体验质量,同时也链接了商业价值。把用户体验的原则和收益驱动的指标关联在了一起。


undefined


三、HEART模型简介


1.什么是HEART模型?


多个大厂利用HEART模型拆解框架得到了深度结合业务的度量框架。是个比较全面和具备更多扩展性的分析框架。HEART是GOOGLE公司在实践中提出,基于产出更好产品为目的,用来衡量产品整体体验的度量评估模型。 

它包含五个维度Happiness(愉悦度)、Engagement(参与度)、Adoption(接受度)、Retention(留存度)、Task success(任务完成度)组成,是Google用户体验研究团队在实践中为了准确的度量用户体验而总结提炼出的一个框架。 


2.HEART模型的特性与应用场景


目前市面上还存在PTECH、TEENS等体验度量模型,而HEART模型的特性在于它”以用户为中心“进行度量,同时度量维度全面,既包含宏观的愉悦度,也有微观的任务完成率,同时关注产品上的留存率,与业务目标保持紧密。在评估方式上,既有定性评估的愉悦度,也有定量评估的参与度、留存率等,可对用户使用产品情况做一个完整的评估。 

undefined



四、HEART模型的详细拆解指南


undefined


第一步:确定体验目标

体验目标是体验度量的开始,准确的目标决定了度量的质量。要提炼出准确而有效的体验目标并不容易,通常会引入产品功能等业务因素,使体验目标不够单纯,拆解出来的指标所反映的数据也很难归因到体验。故复杂项目可提炼多个体验目标相互补齐,但每个都必须准确而具体。 

那么如何确定体验目标呢?

体验无法脱离于具体的产品服务存在,用户的整体体验感知积累于每一个接触触点,大多触点常规而平庸影响不大,必须识别出达成业务的关键触点进行深入分析,已提炼出体验目标。 

整体的思路是:首先分析业务目标,并就业务目标所落地的产品服务的链路进行拆解,分析链路后,找到其中对体验有决定性影响的因素,提取其因素后,即形成体验目标。


undefined
1.确定业务目标
业务目标是整个产品服务的最终目的,体验作为产品服务的重要评估维度,需要与之对齐。业务目标与所选取项目范围有关,从整个产品到特定功能模块,或者某个行为链路都可作为参与项目。根据选取的项目来确定业务目标,如“保持产品新旧改版的平稳过渡,降低改版造成的断约率”、“提升用户自主解决问题的能力,降低运营服务的压力”等。注意业务目标与产品目标的差异,后者是对前者的产品化阐释,可以具体到某项产品服务目标上。产品目标和体验目标可以共同服务于业务目标,实现价值的达成。 

➢示例:
业务目标:在设计工具中商品素材的查找效率,辅助家装设计师快速构建方案,提升其签单率 
产品目标:优化现有商品素材的查找逻辑,降低家装设计师查找商品素材的成本 

2.拆解产品链路
产品目标需借助于功能链路来达成,将该目标达成过程的逻辑呈现出来,并分析其跳转路径、操作触点,就是链路拆解过程。整个链路过程是用户价值的直接承载,任何一个触点的失效都将影响到整条链路顺畅和效率。就链路整体而言,触点越多、链路越长,操作成本越大;就某个具体触点而言,其效率、易用性、易理解度也将影响整体的价值传达。 

为完整的拆解出整个产品链路,需要从“用户侧”、“系统侧”进行分析,用户侧代表用户视角下的功能使用流程,是主要考虑的维度,体现了以用户为中心的设计思路;系统侧代表系统在用户交互过程中的需要执行的行为,是系统逻辑的直接体现。两者的交互作用,将完整表达“信息”的流转过程,最终作用到产出物上。 

➢示例:商品素材搜索链路




3.分析触点并提取决定性因素

选取对整个链路有重要影响的触点进行设计维度上的分析,以找出决定触点目标达成的决定性因素,这个决定性因素就是我们体验上需要着重优化的点。在寻找“决定性因素”的过程中,避免将系统性能、业务功能、业务信息因素筛选出来,需要聚焦在设计维度上,诸如交互行为、界面布局、信息呈现、系统反馈等。 

➢示例: 
“确认输入行为”、“搜索结果分类”、“不同分类的区块划分”、“结果数量”等。 

对已拆分出来的各种设计因素来说,哪些算是决定性因素呢?一个很简单的判断方式是:反向判断,即假设缺失这个设计因素,或不完整是否会对该触点有“阻塞性”影响。 

如有严重阻塞影响,则证明该设计因素很大程度上决定了触点的目的达成,属于决定性因素;若设计因素有中等的、轻微的影响,则可能不是本次优化的重点,不作为决定性因素。如“搜索结果的分类”影响用户对搜索结果的信息获取,是决定性因素。“确认输入行为”是常规设计行为,不算决定性因素。 
当然,具体问题具体分析,在不同的功能场景下,同一种行为的影响程度可能不同。 

需要注意的是,决定性因素的选取必须在具体的触点中才有意义,脱离后无法判断是否有阻塞性影响。另外,某些设计因素是否是决定性可能在跨触点中体现出来,需要联系整个链路进行交叉分析确定。




4.体验目标的提取与表述

找到决定性因素及其为什么决定性的原因后,需要为其设定一个设计目标,来指示应向什么方面优化这个决定性因素。决定性因素只是现有功能的一种解法,可能存在其他更优解法或优化方向,我们需要基于决定性因素概括出“设计目标”,以新的设计目标来指引我们的优化设计。 

➢示例: 

决定性因素“搜索结果的分类”,引申出的设计目标为“更清晰的信息层级”、“更完整的信息”。



通过链路触点的分析,决定性因素的提取,设计目标的匹配,我们已对设计优化方向有了准确的了解。这个时候需要从设计师视角做一个完善而精准的”体验目标“的表述。


一个体验目标需要与具体设计场景关联后,才能产生具体而明确的价值,即设计目标落地到场景中后产生价值,表述思路是:在某个具体的链路触点中,我们期望怎么达成这件事。可通过格式进行填写: 
使/什么用户/用什么  做什么事/设计目标/完成什么事 

➢示例: 
家装设计师  使用搜索功能  搜索素材时  对结果展示清晰的信息层级  来快速找到需要的商品 


第二步:确定度量维度

引入HEART模型的重要原因,正在于它的度量维度。由于它的度量维度多方位的表述了产品的使用情况,度量纬度不是一种标准,是一种分析框架和角度,决定了体验目标应该被如何度量,进而影响信号的确定和指标的拆解,因此度量维度的选取至关重要。 

HEART提供了丰富的五个维度,根据其定义,提供了你几个可以衡量的视角。在实践过程中,因每个体验目标所对应的触点的场景、交互、产品目的不同,我们只需要找到符合定义的维度即可。反过来看,一个与体验目标不相关、不匹配的度量维度不能很好地度量体验。 

需要注意的是,HEART模型因其维度的广泛定义,不仅仅可用于体验目标的度量,也可以对产品目标、业务结果进行度量,对体验目标的度量因要从产品因素中剥离出体验问题,相对来说较为复杂,是本次叙述的重点。



第三步:确定信号

首先信号可以被定义为是一种信息的载体,其承载的信息往往反映的是用户对体验目标的成功或是失败的结果,对信号的准确获取将直接影响到对下游指标的确立。 

信号的确定需以上游度量维度为标准范围并引用体验目标为重要判断依据,避免过度发散,保证精准规范的同时,去结合当前有无体验变量基准值作为条件,并使用成功或者失败的结果来评估体验目标的达成情况,最终提炼出信号。 


以度量维度为标准并引用体验目标确定信号

通过逐一对度量维度进行体验变量提取,有基础值则进行对比的方式,无基础值则使用趋势的表述方式,结合业务目标的情况下,去概念性假设体验目标的正向或反向结果,最终通过标准的格式提炼出信号,信号的提炼的可以用固定的格式进行书写: 格式:用户   用什么   做什么   体验变量   趋势&数值


寻找体验变量
基于HEART模型的整个分析框架,拆解出最高频和贴合体验目标的常见体验变量库。在此框架的指导下,可以快速寻找需要的体验变量。 

➢示例: 
(体验变量:易操作度;有基准值) 家装设计师 使用搜索功能 搜索素材时 易操作度 达到4.2
(体验变量:易操作度;无基准值) 家装设计师 使用搜索功能 搜索素材时 易操作度 上升

确定信号的注意事项
①信号的成功或失败要能在行为或态度上准确的体现出来,失败信号可能比成功更容易定义; 
②信号要易于被追踪; 
③信号的敏感度要高,易于被检测; 
④信号应与目标有高的相关度,同时避免被其他因素影响; 
⑤一个目标可能对应多个信号; 

第四步:确定指标

指标是衡量目标的参数,用于准确的描述目标。但通常很难直接从目标中确定出指标,需要借助于对信号的分析。信号是信息的载体,其中包含着变量信息,提取其中变量信息,即可获得一个初始指标。 
初始指标反映了客观的原生数据,需要对原生数据做处理后,可得到一个能精准描述体验目标的指标。 



对数据进行处理

体验变量所直接产生的属于原生数据,而一组数据通过某种分析加工后,可以成为一个更有价值的信息,如均值、中位值。选择对数据进行哪种方式处理,受目标的影响较大,每一种数据处理方式,都有指向特征,通过与目标的匹配,可以选取出合适的数据处理方式。




确定指标的注意事项

①指标应与目标和信号密切相关,指标越明确越清晰越好; 
②标应方便被持续追踪,对信号的描述更敏感,方便做A/B测试。 


五、总结


看似复杂的体验度量监控指标的拆解,可以概括为“体验的问题定位”——“体验的目标度量”——“体验的客观追踪”。 

1.“问题定位”是监控目标的根据,必须来源于具体的业务链路才有被分析和量化的可能,它是体验问题在业务链路中被抽取出来的关键,并转化为可度量的指标来进行监控,最终为后续数据洞察和可视化提供准确的数据来源,否则流于主观,监控体系建立在不可靠的体验目标之上,当然也就不可能有助于解决体验问题。 

2.而“目标度量”所运用的HEART模型作为度量维度,相当于一种体验的定义标准,阐释了什么是它所定义的用户体验。HEART模型以其全面的度量维度,能很好地实践这一点。必须注意的是,对HEART模型下的五个度量维度的细化阐释可能受不同产品特性、产品阶段影响而不同,最终转化出不同的客观指标。 

3.“客观追踪”是对在度量标准下的客观变化的捕捉,捕捉其变量特征,建立常态指标,成为可靠的可监控的指标。 

4.另外,除了准确的定位、度量、转化的逻辑推导外,参考业务目标进行范围收敛,也是非常重要的工作,它影响着每一个推导环节,以避免偏离产品方向,有效的过滤弱关联或无关联的因素。

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

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

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

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



js 获取当前元素的父元素的父元素的id

前端达人

情景一:用onclick触发的函数


  1. html代码:
  2. <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
  3. <div>1111</div>
  4. <div class="original">
  5. <div id="chartx1" class="chartstyle"></div>
  6. <div id="charty1" class="chartstyle" ></div>
  7. <button onclick="getDetail(this);" style="width:100%;height:30px;">查看信息</button>
  8. </div>
  9. </div>
  10. <script>
  11. function getDetail(obj){
  12. alert(obj.parentNode.parentNode.id); //1
  13. }
  14. </script>

运行结果:

情景二:直接用click触发的函数


  1. html代码:
  2. <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
  3. <div>1111</div>
  4. <div class="original">
  5. <div id="chartx1" class="chartstyle"></div>
  6. <div id="charty1" class="chartstyle" ></div>
  7. <button class="info_detail" style="width:100%;height:30px;">查看信息</button>
  8. </div>
  9. </div>
  10. <script>
  11. $(".info_detail").click(function(){
  12. id=$(this).parent().parent().attr('id');
  13. })
  14. </script>

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

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


文章来源:csdn   作者:

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

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

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





jquery 延迟执行方法

前端达人

setTimeout方法使用时需注意: 

复制代码
//以下两种方式都行: setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000);
function test(){
 alert("aaaa");
} //以下是错误示例 setTimeout(test(),2000); //会马上执行,没有延迟效果
复制代码

 




jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法:

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

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


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

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

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


APP设计:小易移动端 | B端销售平台移动化

seo达人



2020年的湖北疫情对公司的业务造成了一定的影响,为了避免不可控情况下的业务损失,复工后公司启动了智能销售平台移动化项目(即小易APP)。经过近一年的试运行,在广州发生疫情的时候,小易APP已经能支持业务基础需求。

备注:
为避免不必要的误会(xiemi),所有的客户、销售顾问、部门、套餐的名称都是虚拟命名。所有数据均为虚构,请勿过度解读。
love&peace

收藏

原文地址:站酷

作者:牙线y2x

转载请注明:学UI网》APP设计:小易移动端 | B端销售平台移动化

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


日历

链接

个人资料

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

存档