首页

你真的懂如何教育用户吗

纯纯

我们常常会发现:某个产品功能/活动上线推出后,用户一看到就参与并使用;但你负责的某个产品功能/活动上线后,用户并没有按照产品或你的预期去做出相对应的行为——功能不使用、活动不参加、广告看了没反应…

理想很丰满,现实却很骨感;你从产品体验流程到视觉表现复盘了一遍后都没有问题,但是为什么用户对你的产品/设计感知度如此之低,为什么用户不按照你预期的设计去做出对应的行为,为什么用户对你的设计不感冒…明明无论是体验流程还是视觉表现都没问题,究竟是什么原因导致这样的结果?你真的让你的用户感知到了吗?你的用户真的懂你的设计和流程了吗?换句话说,你真的懂如何教育用户吗?

无论是C端还是B端产品,都面临着不同程度教育用户的问题,这篇文章将从设计的角度出发,帮助设计师如何通过设计手段去正确地教育用户



产品教育的本质

想要了解怎么正确地教育用户,需要先了解产品教育的本质。什么是产品教育?产品设计的教育并不是单纯地告诉用户1+1=2,也不是让用户自己去完成2+2=4;产品教育的本质是说服,说服用户使用你的产品,说服用户按照你的预期来使用产品

不管是C端还是B端产品,和用户之间都存在着紧密相连密不可分的关系:



简单来说就是:用户产生了诉求,有了诉求后就衍生出相对应的产品,有了产品自然而然就产生了衡量这个产品是否是真正被需要的目标和指标,然后产品匹配相对应的用户去解决他们的问题,从而去达成产品的目标和指标来验证这个产品是成功的


在达成整个产品目标的过程中,存在不同阶段的用户群体,而这类用户群体不同阶段的心理在整个使用生命周期是不断在迭代更替的:



小如一个Banner的投放,大如一个新产品的上线,都会经历「新增>转化>裂变」这三个阶段;站在用户的视角,刚接触这个新鲜事物的时候,存在不确定性因素,从而产生担忧的心理——对新鲜事物有了一定的认知和了解后,会抱着怀疑的态度进行体验流程——而无论处于哪个阶段,核心都是为了服务产品的业务目标


看到这里感觉一脸懵逼:各个产品类型行业不同,业务目标种类又那么多,那凭什么说教育好用户就能帮助完成业务目标呢?这里又回归到本文的主题——产品教育的本质是说服,说服用户使用产品帮助你完成你的目标



通过说服用户打消顾虑和担忧,对产品就完整清晰的认知,减少不确定性因素——说服用户取消对产品的怀疑,降低行为成本,提升号召用户行为从而减少转化周期——说服用户的自私心理,降低消耗成本从而提升裂变的可能性,最终整体助力产品达成业务目标


举个栗子:

产品的业务目标是提升新功能的使用人数,而这类用户群体属于新用户的转化,具体影响使用新功能的因素很多,但是很多情况下会受到其他因素干涉,(比如基础建设、原系统诟病等)但是在做设计决策的时候,就可以以教育引导用户作为切入点:注册就送XXX大礼包、邀请新用户送XXX等等设计手段来完成业务目标



LIFT模型

这里可以引用两个方法论来制定设计策略和设计方案,其中一个就是LIFT模型;LIFT模型的原理就是基于用户的问题为基础,设计有关问题的假设解决问题,从而提高产品的效益;而影响LIFT模型的六个因素分别为:价值主张、相关性、清晰度、紧迫感、焦虑感和注意力分散——简单来说,可以把LIFT模型当作一架飞机,价值主张是这架飞机的机身,相关性和清晰度是飞机的机翼,焦虑感和注意力分散则是机翼上的推进器,紧迫感则是整架飞机的动力



通过上图可以明显地感受到如何进行相关设计:通过提升相关性和清晰度,降低用户的焦虑感和注意力分散,透传产品的价值主张和紧迫感来教育引导用户;在框架交互层面可以提升相关性、清晰度和降低注意力分散;在视觉表现层面可以传递产品价值主张、紧迫感;通常作为方法论的使用,存在单一的形式出现,也会以多种组合的形式使用,也就是我们常说的「组合拳」,我们可以在很多产品设计中看到具体设计手段使用的案例:



这类通过直接透传产品价值的场景我们很常见,往往在某个新功能/模块上新时,都会见到此类场景;比如贝壳的VR功能,当前的业务目标是提升VR功能的点击渗透,在新功能上线后自然要对用户做教育引导,样式上使用了强引导的样式来强调新功能的入口,透过透传功能的价值主张来引导教育用户;

百度网盘则是使用承接页空状态来透传功能的价值主张,数据工具类型的产品往往核心的目标是为了提效和安全性,所以在宣扬价值主张方面以提效安全为核心



而一些强教育场景,则会更加突出降低用户焦虑的形式做设计,比如Focos的功能动态教育弹窗和有道云笔记的教育手册,都是在降低用户对产品理解的焦虑感



还有一种是强制和用户绑定,引导用户完成流程体验的沉浸形式,此类设计常规的产品几乎很少使用,因为功能众多会对没有此类诉求的用户造成强干扰,从而导致用户流失;而游戏类任务和体验师一致的,所以此类设计更多在手游中看到,强制引导你完成某个任务章节,一方面是为了教育引导,另一方面为了让你尽快上瘾,从而减少用户的流失率



支付宝的券商理财页则是以「组合拳」的形式设计的,头部通过文案+图标的形式提炼出产品价值主张和展示产品的清晰度,顺势往下使用真实的场景设计,引发和用户之间的情绪上的共鸣,再往下直接透传人群,两者上结合拉通和用户人群的相关性;整体以展示产品价值主张,提升清晰度和相关性的形式设计


以上就是LIFT模型在各类产品中的应用,根据不同的场景、业务目标和用户诉求,使用单个或多种形式组合对用户进行教育和引导,其核心是从用户心理的根本上去达到产品的教育目的



基于福格行为模型

首先让我们了解下福格行为模型是什么,福格行为模型的定义是表明一个行为得以发生,行为者首先需要有进行此行为的动机和操作此行为的能力,下一步如果他们有充足的动机和能力来施行既定行为,他们就会在被诱导/触发时进行;说人话就是如果一个人有足够的能力和动机,然后引导他做某个行为的时候,他自然而然就去做那个行为



由上图可以看出:对用户来说使用越简单,动机越强,触发引导越强,那么用户触发行为的概率也就越大!动机是什么?动机简单来说是好处——对用户有利的东西,那用户怎么知道这个东西对他有利呢,所以我们要对用户进行传达和教育——告诉他这个东西对你有XXX的好处

那能力又是什么?用户需要完成12345步操作才能拿到好处和用户需要完成12步操作就可以拿到好处,当然第二种是更容易被用户所接受的,那用户怎么知道只需要完成12步操作就可以拿到好处呢,还是需要我们对用户进行传达和教育

有了动机和能力,触发器又是什么呢?就是前文提到的通过设计手段进行相对的产品引导;有了以上三个条件后,用户就会按照你的想法意愿去完成操作行为,去帮助你完成你的业务目标



为什么教育引导用户是基于福格行为模型呢?还是用同一个案例来示意,贝壳VR看房业务目标是提升模块点击渗透率,这时候利用前文提到的LIFT制定好引导策略后,所提炼出来的价值主张对用户来说就是产品给予用户的好处,而能力方面只需要用户进行单次点击的交互行为,触发器引导又实用了很强的区域高亮样式设计,很大概率上引导教育用户进行点击行为,从而符合产品设计的预期,帮助你达成提升点击渗透率的业务目标



总结

开篇说明了产品教育的本质就是说服,说服的流程就是展示好处,降低操作难度,在合适的时机触发引导,而无论是展示、引导都离不开教育用户;总结下来常用的设计方法就是基于福格行为模型的基础,用LIFT模型制定引导教育策略,让用户行为符合你的设计预期,最后助力完成业务目标,拿到数据上的结果,才能体现设计侧的价值



说一句题外话,方法论能帮助设计同学套用并且快速产出方案,但是很多不同场景不同业务下情况不同较为复杂,虽然方法论是针对普遍大多数场景,但是不要过度迷信方法论;除了减少设计师本身的思考外,还容易让设计师产生依赖,往往输出的交互/视觉方案没有思考没有灵魂,自己本身没有能力上的提升,往严重了说,自然而然核心竞争力也会下降,人人都可以替代你的位置

而我们正确使用方法论的方法呢,就是将方法论作为参考;就好比方法论是系统推荐出装方案一键天赋,系统一直推荐你堆护甲,对面4个魔法输出,你不会灵活多变出魔抗,这怎么赢嘛?


正确使用方法论首先能帮助我们自身树立正确的思考方向,至少在方案产出的时候,在大的方向是没错的;其次要根据不同场景不同人群不同情况结合业务目标进行思考,最终形成自己输出的完美方案,这样才能体现出设计的价值,才能真正意义上的设计赋能业务


作者:雨灰    来源:站酷

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

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

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

构建产品的信任力设计

纯纯

上面的场景是否很熟悉?在我们日常生活中经常能听到/看到这样的话,但除了运气好的那部分人,结局往往要么是「专柜不予验货」,要么是「吃哑巴亏被人割一波韭菜」或者要么是「十连抽!SSR!出了新通行证出了新皮肤!买!!」;于是这部分人开始不相信任何相关的东西,开始大肆传播,加上一些不法分子的违法恶意行为和新闻公安宣传,最终导致社会上绝大部分的人树立起了很严谨的防备心

众所周知无论是作为互联网还是传统行业,无论是金融还是电商亦或者是游戏社交等等,想要赚钱,构建平台和用户之间的信任是必然的。如果你无法和用户构建信任关系,那谁还指望用户使用你的产品去消费(金钱/时间)呢?

在产品设计当中,作为设计师的我们如何去和用户构建信任关系,怎样通过设计细节去逐步影响甚至改变用户,这个话题是我最近在研究的东西,通过解析市面上的产品如何通过设计去构建用户的信任关系,提炼出我们如何在产品设计当中去打造信任感



信任力

首先来了解一下作为互联网的产品中信任力是如何产生的:用户要想对产品产生信任感,必须建立一个完善俱全的产品心智。(具体的心智设计在我之前有篇文章已经详细介绍过了,这里不再过多阐述)先上结论,当一个用户从普通的态度到信任一款产品,这个过程是基于「认知」、「情绪」和「态度」建立的


这个过程在不同的场景所建立的时长也不相同,售卖场景当中是最常见的。举个例子,我们经常会在菜市场大街上看到有人吆喝卖菜刀、塑料盆各种东西,站着一圈儿人围观,然后会看到卖家为了展示自己商品的卖点,会很卖力地把塑料盆摔地上以此来吸引注意和展示卖点;这样能在极短的时间内改变消费者的情绪和认知,从而改变消费者的态度,以建立消费者对产品的信任,最终提升下单转化率。说人话就是:“我这个盆怎么摔都摔不坏,不信我吧唧摔给你看,快买它!!!”

在用户建立了与产品的心智之后,才会产生相关的信任力,从而产生相关的行为



信任行为的途径

了解原理之后,那么来看一个基本的问题:信任的行为是如何产生的?用户建立了和产品的信任心智后,怎么产生相对应的行为,主要依靠三种途径:「第一手经验」、「可靠的建议」和「基于理智的理解」


基于他人的经验

这个途径是日常生活中最常见的让人信任某人或某物的方式,比如你的好朋友或者同事告诉你:XXX地方吃饭服务超棒,味道超正宗…那么基于你对好朋友或同事的关系以及他尝试过的经验,你会大概率选择去那家店试一试。通过自己熟悉的人或事,在基于过去成功的经验下,人们会再次选择相信这类人的经验


这类情况在互联网的场景中往往以KOL带货、探店等形式存在,早些年的小红书微博探店测评,到近来越来越火的直播短视频;都是基于人们在对自己信任的KOL面前,选择信任相对应的产品或消费场景。诸如「我喜欢的明星都用这个,我跟着买肯定没错~」、「天不怕地不怕,就怕他李佳琦说Oh my God!」之类,都是由平台借助KOL和用户群体建立的信任关系,也就是我们常说的「种草」



如果没有喜欢的KOL怎么办,那就建立以自己为中心辐射的社交圈,通过自己认识的人去建立深度的信任关系,比如我们最熟悉的朋友圈种草,拼多多核心的拼小圈和淘宝的淘友圈;基于自身为圆心,利用用户的从众心理和窥探欲建立的关系链,从而帮助平台建立与用户的信任关系



基于可靠的建议

基于他人经验仅限于熟人或为了解的人所建立的关系链,诟病往往是必须依附于熟悉的过程,这个过程是有一个时间的,但是很多场景下并没有那么多时间和条件给用户去建立信任这个过程,所以出现了多种让用户通过陌生渠道快速建立信任关系的形式


1.品牌的力量  我们经常看到市场上品牌做升级更新,也能看到天价的品牌设计,因为品牌是对产品或者服务的一种保障,因为这种保障我们更倾向于使用该品牌的产品,因为良好的产品使用体验,我们更加信任该品牌,形成一个正向的循环。而互联网产品更加热衷于此,比如早些年的淘宝因为假货、刷好评曾让平台信任感一度降低,于是有了后来的天猫品牌;比如京东的自营标,得物的专业鉴定等,无一不是借助品牌的力量建立用户和平台的信任关系



2.陌生渠道详细的经验  电商产品力商详页的评价系统相信大家一定不会陌生,如果有心关注的话,会发现评价系统一直在经历着改版:从起初的「好中差评」到现在种类繁多的评价,都是在针对信任感一直在迭代优化,并且是一条长线的迭代。加深用户对产品快速地信任,电商产品分阶段性地在优化评价体系。拼多多在前置链路当中,强引导确认收货后的用户进行评论反馈(具体在点击「确认收货」后跳转至评价页面强制拉起键盘进行输入),而阿里系产品淘宝、饿了么等在前置链路当中以积分奖励的形式,鼓励用户写真实的评价;在后置链路中,强化了好评的信息,展示了「回头客」这一概念,一方面展示了产品的真实性,向用户传递二次复购的用户;另一方面,打消了用户对店铺花钱雇人刷好评的顾虑



3.专业的权威  常见于金融、政府相关的项目产品中,借助当地政府、专业权威机构的威信来和用户建立信任关系,有相关的组织机构做背书,此类产品的用户在整个流程中更容易做出决策;比如支付宝和地方政府的合作,寺库和美国GIA专业鉴定机构的合作等



基于理智的理解

对于从未看过或者听说过的某个产品,可以通过让用户了解其工作原理来建立信任,简单来说就是「脱光了给用户看」;有且重要的一点是,不能因为产品的易用性而觉得可忽略像用户解释你的产品。因为如果用户「感知」到自己不了解产品本身,那么即便是别人推荐的,依然存在部分用户不信任产品


举个简单的例子:在互联网各类产品建立的初期,没有品牌,没有背书,获取的信息让用户感觉自己的隐私被暴露,存在自己的隐私数据泄漏等问题;如果向用户展示产品的详细的信息,会让用户更加的安心。比如Uber或滴滴新生的时候,品牌尚未建立,在打车前让用户明确详细地了解用户信息、车辆信息、驾驶员信息以及安全规则后,用户才会更加安心地使用产品



如何通过设计建立产品的信任力

阐述了用户对产品建立信任的原理和途径,那么作为设计师的我们,如何在自己的产品设计当中,去和用户建立信任感并且维护信任关系,可以看看成功的产品怎么做的


展示品牌权威标示

在视觉的呈现上向用户直观地展示相关的品牌、权威机构的标示等,能在极短的时间内改善用户的认知和态度,从而建立起短暂的信任感;常见的此类设计在网页设计、运营视觉中比较常见,比如官网的合作方露出,联名活动的品牌展示等



产品设计的一致性

为什么大公司有很多规范,从栅格到弹窗到动效,在整个产品体验的过程中,让用户感知到是在一个产品中完成的流程就是产品设计的一致性,为什么要做一致性,因为要增强品牌感和产品体验的舒适度,目的就是让用户依赖于品牌产品,建立起无法分离的信任关系



构建信任的枢纽

从整个流程的开端到结束制定一系列的体验来构建信任的枢纽,用拼多多的拼小圈来举例,从最初的引导开始,向用户透出熟悉的头像信息引导用户点击触发,然后简单地向用户告知产品的详情,接着通过无处不在的用户头像和标签建立信任关系,利用用户「好的、知道了等」认知惯性去影响用户的行为,最后通过K歌影集等功能巩固信任关系,增强用户粘性,实现整个枢纽的体验闭环(不得不感叹多多在构建信任感这一块真的很厉害~)



再哔两句

在整个互联网大环境下,针对存量精细化运营战中,信任关系是有效转化的关键,也是企业和品牌传播的第一生产力。能否获取用户信任,将会成为企业商业价值大小的核心判断标准;站在用户的视角,只有信任了某个产品,才会将自己的隐私信息等向企业开放,从而产生一系列消费、转换等行为;自媒体直播短视频在拓展业务和平台的合作中,增强了用户与之间的粘性,而这一切,所有的原点都在于信任

上面的场景是否很熟悉?在我们日常生活中经常能听到/看到这样的话,但除了运气好的那部分人,结局往往要么是「专柜不予验货」,要么是「吃哑巴亏被人割一波韭菜」或者要么是「十连抽!SSR!出了新通行证出了新皮肤!买!!」;于是这部分人开始不相信任何相关的东西,开始大肆传播,加上一些不法分子的违法恶意行为和新闻公安宣传,最终导致社会上绝大部分的人树立起了很严谨的防备心

众所周知无论是作为互联网还是传统行业,无论是金融还是电商亦或者是游戏社交等等,想要赚钱,构建平台和用户之间的信任是必然的。如果你无法和用户构建信任关系,那谁还指望用户使用你的产品去消费(金钱/时间)呢?

在产品设计当中,作为设计师的我们如何去和用户构建信任关系,怎样通过设计细节去逐步影响甚至改变用户,这个话题是我最近在研究的东西,通过解析市面上的产品如何通过设计去构建用户的信任关系,提炼出我们如何在产品设计当中去打造信任感



信任力

首先来了解一下作为互联网的产品中信任力是如何产生的:用户要想对产品产生信任感,必须建立一个完善俱全的产品心智。(具体的心智设计在我之前有篇文章已经详细介绍过了,这里不再过多阐述)先上结论,当一个用户从普通的态度到信任一款产品,这个过程是基于「认知」、「情绪」和「态度」建立的


这个过程在不同的场景所建立的时长也不相同,售卖场景当中是最常见的。举个例子,我们经常会在菜市场大街上看到有人吆喝卖菜刀、塑料盆各种东西,站着一圈儿人围观,然后会看到卖家为了展示自己商品的卖点,会很卖力地把塑料盆摔地上以此来吸引注意和展示卖点;这样能在极短的时间内改变消费者的情绪和认知,从而改变消费者的态度,以建立消费者对产品的信任,最终提升下单转化率。说人话就是:“我这个盆怎么摔都摔不坏,不信我吧唧摔给你看,快买它!!!”

在用户建立了与产品的心智之后,才会产生相关的信任力,从而产生相关的行为



信任行为的途径

了解原理之后,那么来看一个基本的问题:信任的行为是如何产生的?用户建立了和产品的信任心智后,怎么产生相对应的行为,主要依靠三种途径:「第一手经验」、「可靠的建议」和「基于理智的理解」


基于他人的经验

这个途径是日常生活中最常见的让人信任某人或某物的方式,比如你的好朋友或者同事告诉你:XXX地方吃饭服务超棒,味道超正宗…那么基于你对好朋友或同事的关系以及他尝试过的经验,你会大概率选择去那家店试一试。通过自己熟悉的人或事,在基于过去成功的经验下,人们会再次选择相信这类人的经验


这类情况在互联网的场景中往往以KOL带货、探店等形式存在,早些年的小红书微博探店测评,到近来越来越火的直播短视频;都是基于人们在对自己信任的KOL面前,选择信任相对应的产品或消费场景。诸如「我喜欢的明星都用这个,我跟着买肯定没错~」、「天不怕地不怕,就怕他李佳琦说Oh my God!」之类,都是由平台借助KOL和用户群体建立的信任关系,也就是我们常说的「种草」



如果没有喜欢的KOL怎么办,那就建立以自己为中心辐射的社交圈,通过自己认识的人去建立深度的信任关系,比如我们最熟悉的朋友圈种草,拼多多核心的拼小圈和淘宝的淘友圈;基于自身为圆心,利用用户的从众心理和窥探欲建立的关系链,从而帮助平台建立与用户的信任关系



基于可靠的建议

基于他人经验仅限于熟人或为了解的人所建立的关系链,诟病往往是必须依附于熟悉的过程,这个过程是有一个时间的,但是很多场景下并没有那么多时间和条件给用户去建立信任这个过程,所以出现了多种让用户通过陌生渠道快速建立信任关系的形式


1.品牌的力量  我们经常看到市场上品牌做升级更新,也能看到天价的品牌设计,因为品牌是对产品或者服务的一种保障,因为这种保障我们更倾向于使用该品牌的产品,因为良好的产品使用体验,我们更加信任该品牌,形成一个正向的循环。而互联网产品更加热衷于此,比如早些年的淘宝因为假货、刷好评曾让平台信任感一度降低,于是有了后来的天猫品牌;比如京东的自营标,得物的专业鉴定等,无一不是借助品牌的力量建立用户和平台的信任关系



2.陌生渠道详细的经验  电商产品力商详页的评价系统相信大家一定不会陌生,如果有心关注的话,会发现评价系统一直在经历着改版:从起初的「好中差评」到现在种类繁多的评价,都是在针对信任感一直在迭代优化,并且是一条长线的迭代。加深用户对产品快速地信任,电商产品分阶段性地在优化评价体系。拼多多在前置链路当中,强引导确认收货后的用户进行评论反馈(具体在点击「确认收货」后跳转至评价页面强制拉起键盘进行输入),而阿里系产品淘宝、饿了么等在前置链路当中以积分奖励的形式,鼓励用户写真实的评价;在后置链路中,强化了好评的信息,展示了「回头客」这一概念,一方面展示了产品的真实性,向用户传递二次复购的用户;另一方面,打消了用户对店铺花钱雇人刷好评的顾虑



3.专业的权威  常见于金融、政府相关的项目产品中,借助当地政府、专业权威机构的威信来和用户建立信任关系,有相关的组织机构做背书,此类产品的用户在整个流程中更容易做出决策;比如支付宝和地方政府的合作,寺库和美国GIA专业鉴定机构的合作等



基于理智的理解

对于从未看过或者听说过的某个产品,可以通过让用户了解其工作原理来建立信任,简单来说就是「脱光了给用户看」;有且重要的一点是,不能因为产品的易用性而觉得可忽略像用户解释你的产品。因为如果用户「感知」到自己不了解产品本身,那么即便是别人推荐的,依然存在部分用户不信任产品


举个简单的例子:在互联网各类产品建立的初期,没有品牌,没有背书,获取的信息让用户感觉自己的隐私被暴露,存在自己的隐私数据泄漏等问题;如果向用户展示产品的详细的信息,会让用户更加的安心。比如Uber或滴滴新生的时候,品牌尚未建立,在打车前让用户明确详细地了解用户信息、车辆信息、驾驶员信息以及安全规则后,用户才会更加安心地使用产品



如何通过设计建立产品的信任力

阐述了用户对产品建立信任的原理和途径,那么作为设计师的我们,如何在自己的产品设计当中,去和用户建立信任感并且维护信任关系,可以看看成功的产品怎么做的


展示品牌权威标示

在视觉的呈现上向用户直观地展示相关的品牌、权威机构的标示等,能在极短的时间内改善用户的认知和态度,从而建立起短暂的信任感;常见的此类设计在网页设计、运营视觉中比较常见,比如官网的合作方露出,联名活动的品牌展示等



产品设计的一致性

为什么大公司有很多规范,从栅格到弹窗到动效,在整个产品体验的过程中,让用户感知到是在一个产品中完成的流程就是产品设计的一致性,为什么要做一致性,因为要增强品牌感和产品体验的舒适度,目的就是让用户依赖于品牌产品,建立起无法分离的信任关系



构建信任的枢纽

从整个流程的开端到结束制定一系列的体验来构建信任的枢纽,用拼多多的拼小圈来举例,从最初的引导开始,向用户透出熟悉的头像信息引导用户点击触发,然后简单地向用户告知产品的详情,接着通过无处不在的用户头像和标签建立信任关系,利用用户「好的、知道了等」认知惯性去影响用户的行为,最后通过K歌影集等功能巩固信任关系,增强用户粘性,实现整个枢纽的体验闭环(不得不感叹多多在构建信任感这一块真的很厉害~)



再哔两句

在整个互联网大环境下,针对存量精细化运营战中,信任关系是有效转化的关键,也是企业和品牌传播的第一生产力。能否获取用户信任,将会成为企业商业价值大小的核心判断标准;站在用户的视角,只有信任了某个产品,才会将自己的隐私信息等向企业开放,从而产生一系列消费、转换等行为;自媒体直播短视频在拓展业务和平台的合作中,增强了用户与之间的粘性,而这一切,所有的原点都在于信任


作者:雨灰    来源:站酷

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

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

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


精一技or擅百技?内卷时代下的原型工具应该怎么做

纯纯

大家对原型工具应该不陌生,无论是设计师还是产品经理,或多或少都接触过原型图的工具,比如较为大众熟知的Axure,国内运用较为广泛的墨刀和摹客,以及一些较为小众的产品。不难发现,大多数工具类产品的运作模式几乎都如出一辙:先免费使用一段时间,养成了用户认知和习惯后,逐步开始投放广告或者收取费用变向商业化——原型工具产品自然也脱离不了这种运作模式。所以在这个内卷时代下,各大原型工具相继脱颖而出,前段时间体验了一下摹客RP,这次就结合摹客RP这款原型工具产品来聊聊:内卷时代下工具到底应该怎么做

精一技or擅百技?


要说怎么做一款产品,首先先确立这款产品的定位和方向,如果定位和方向上不对,自然后续铺垫的功能还是需求都是在错误的事情上继续做错误的事情,相信这是每一个产品人都不愿看到的。但往往理想很丰满,现实却很骨感:结合自己的从业经历,很多时候产品定位和方向是很难先做到清晰,然后才开始铺设功能的;一般情况都是跟从竞品功能,快速拿到结果,才开始结合自身业务特效慢慢摸索产品定位和方向的

众所周知,作为B端属性的工具类产品,最为重要的无非就两点:降本和增效,这两点向来是B端尤其是偏工具类产品的核心目标;那么如何降本和增效呢?有人说降低操作成本啊,降低认知成本啊,降低学习成本啊,那到底降的是什么本?增效又是增的什么效?

从上图可以看出,无论是降人力成本、认知成本等等,还是增加学习效率、体验效率等等,所有对象都指向了用户群体。有人就会问了:你这不是废话嘛,工具不就是给用户用的嘛?诶~还真不一样!用户群虽然特指一个群体,但是隶属不同目标下,自然而然也有类别区分

为什么这样说,因为不同的用户群有不同的功能诉求;用户A通过产品想达成目标A,用户B通过产品想达成目标B,那么用户A和用户B从根本的目标不相同,那么他俩的体验路径和信息传达也是需要有不同
的区分的,简单来说就是用户达成的目标不同,想看到的页面和功能也不相同

把工具产品比喻成一个小中台来说,所有用户都是中台的需求方,不同需求方的目的不同,但是作为小中台来说都是需要同时满足的。以摹客RP来举例,作为一款协作产品,用户群可大致分为产品经理、UE设计师、研发等,而针对不同的用户群目标来看,产品经理的核心目标是快速通过原型具像化产品功能,而UE设计师则是通过产品经理的思想以图形化的形式表达出来,而身为研发的核心目标是快速了解业务逻辑,以便构思开发结构

擅百技?


综上所述来看,无非就是针对不同的用户群体的需求都满足嘛,我都把功能给你做上去不就好啦?表面上的确满足了所有用户群的需求,可事实上无形将各类的成本分摊给了各个用户,怎么理解呢?大家可以脑补想象自己作为一名维修工,此时你急需把一颗梅花口的螺丝给取出来,这时候你来到工具间,你最希望看到下图中哪个场景?

毋庸置疑大家肯定都会选择右边那个工具间,因为功能排列整齐有序,不管你维修工是水电维修还是建筑维修还是网络维修,都能在这个工具间找你能帮你完成你的目标。这便是所谓的擅百技——基于用户群的需求全部将功能一一实现

还是以摹客RP举例,当不同用户群进入平台,功能排列整齐有序,都有足够的区域和节点帮助用户群实现各自的目标,产品经理能通过组件库、模板等快速输出原型图,UE设计师则能通过多样的图形、动效等实现高保真交互稿,团队方面则有快捷拉起会议、在线留言等功能;所谓是将目前市面上几乎所有原型工具功能,结合自身的发展沉淀做出的平台
可是,擅百技就足够了么?换句话说,当你在找梅花口的的起子时,你会希望看到平口起子在眼前对你进行干扰吗?

精一技?


既然你说擅百技不好,那么接下来你是不是以为我会走极端,那就只针对产品经理做一款原型工具精一技不就好了?大漏特漏!虽说术业有专攻,互联网时代咱们包容性广,咱不走极端,在每个用户群的功能需求上更聚焦精细化不就行了,精一技不够,咱们就精百技,每一个功能打磨透透的,卷到极致这样够不够了?
这样做OK,内卷时代下大家都是这样做的,但是会带来一个新的问题:
在多维全局视角下,体验成本实际上均是嫁接分摊于各个角色的
怎么理解这个问题呢?可以看到下面一张图示意:

从二维视角下来看,各个角色以目标核心出发各司其职,通过工具平台功能都能很好实现目标;但是我们不妨拔高一层视角来看看:

以多维全局视角来看,虽然各个角色各司其职完成了自己的目标,但是基于产品使用层完全是由平台承载的,导致了各个角色的使用成本嫁接分摊给了其他角色,简答来说就是:
角色A完成对应目标时,存在角色B和角色C的信息干扰,那么角色A无形中分摊了角色B和C的成本
举个例子:产品经理打开原型工具后,想直接拖动下拉框组件搭建一个产品原型,这时候选中下拉框组件想进行文案编辑,此时弹出了下拉框组件对应的编辑面板:字号、字色、字体、行高、字间距等等,然后其中部分功能则属于设计同学关注的,例如字体、字色、字间距等,但是此类成本则分摊给了产品经理,产品经理在整个搭建原型的过程中,增设了过滤这些信息的成本

那有人就会说了,这很简单啊,可以直接做成个性化定制工具平台啊,根据每个角色身份不同进来设计师进来就只看到和设计相关的功能,产品经理进来就只看到和产品相关的功能不就好了?而且我把每一个角色对应的功能做到专精,是不是就精一技且解决问题了?

我要打十个!


看到这个标题大家可能会想到我们的咏春叶问老师,无论对手学的什么招数、有多少个人,叶师傅都能一人单挑全部,然后撂下一句霸气的:“我要打十个!”
收一收,继续回来我们的主题上来,是否将工具平台做成个性化定制平台并且其中功能都打磨细致,就能解决工具降本增效的问题了?其实不然,问题不能想得太复发,当然也不能想得很简单,都知道用户需求是分阶段而不同的,可能产品经理A不需要设置字号大小颜色,但是产品经理B为了今年绩效决定卷一卷同事,立志要出“高保真原型”,开始设置起了字号大小颜色,此时平台功能又被局限住了
那么究竟应该怎么做呢?不妨把眼界跳出同类竞品Axure、墨刀等,结合不同多角色并行的工具搭建类产品做竞品调研,得出两个不同的产品方向思路:

思路1是像叶师傅咏春拳一样,见招拆招:平台以通过不同身份拆分成不同时间段进行角色管理
大致以上中下游角色进行功能分发,例如产品初期,上游的产品视角进入平台,基础的团队管理、项目管理、关联PRD等,然后进行聚焦产品原型搭建;之后流到中游由设计师进行二次加工,包括高保真原型稿、交互动效、串联页面跳转等;最后流到下游研发团队视角,研发通过已经二次加工过的高保真设计稿进行框架搭建、前后端接口串联等开发评估
站在平台的视角来看,综上所述产品方向可拆解为:
时间维度:核心解决降本问题,包含时间成本、沟通成本,更加以维度追溯问题(产品问题追溯上游、设计问题追溯中游等等)
角色维度:核心解决增效问题,减少信息干扰、提升操作效率、沟通效率和协作效率

思路2则是基于前面个性化定制工具平台的思路上进行优化改造的,通过不同角色视角进入不同的工具平台,通过数据打通串联实现多角色同平台操作,减少时间维度上的强依赖关系
例如产品进入平台,依旧是创建项目、管理团队等,然后开始进行产品形态输入和原型搭建,之后UE同学便能在同平台看到协作项目进行产出或者进行二次优化,最终通过管理员权限人员进行收口;其次针对平台来说,不断更新同步的数据,能间接丰富平台的多元化

无论是思路1还是思路2,不难发现:将原型工具的核心目标降本和增效,往上抽象出一层就是围绕两个维度在解决问题:一个是具备时效性的时间维度,一个是具备多元性的角色维度。从上图可以感知到:不同时间节点,不同角色介入的时间随着时间维度的增加而变化
因为整个项目周期,不同职能的角色一定会有先后顺序,那么有了这一层抽象以后,无论你的需求刻画多么具体,无论你的case多么边界,只要紧贴围绕这两个维度进行优化,都是从本质上解决工具平台的降本和增效问题

作者:雨灰    来源:站酷

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

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

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


聊一聊所谓的B端C化

纯纯

最近很流行一个词——B端C化,解释出来就是可以用C端的模式和思维来对B端产品进行设计,讨论者大致分为两种观点:

1.C端产品市场已经趋于饱和,可拓展空间剩余不多了,B端产品市场还是一片蓝海,于是产生了一些C端设计师转型去做B端了,将一些C端的模式和思维带到了B端设计中,导致越来越多的B端逐渐C化;

2.B端产品市场互相竞争,为了在同市场中打出差异化,于是一些B端市场开始招揽C端设计师培养转型,并且尝试融入C端产品的模式和思维在同市场内竞争,是产品设计的“内卷化”现象,导致市面上的C化的B端产品越来越多;

但上述无论哪一种观点,都在阐述一种现象或者趋势:不管是交互还是视觉还是UI,目前部分C端设计师正在往B端设计师转型。这个现象的发生对整个设计行业来说无异于新增了很多新亮点——市场上越来越多的B端交互、数据可视化视觉等需求,进而导致对市场培训行业开始产生B端培训的诉求,同时也破空而出了很多优秀的B端设计师。那么B端C化到底是什么,和传统B端C端有什么区别,有这方面想法诉求的同学怎么去实现转型?

由于我本人之前是做C端UI设计师,到后来转型成为B端交互设计师,而接触的业务恰好涉及B端和C端的联动以及多角色之间的协作,所以这篇文章借助结合我个人的经验和看法,谈一谈自己对B端C化的理解



B端C端的区别

在谈B端C化之前,需要先了解B端和C端的区别是什么。B端C端的区别网上有很多文章和概述了,大致归纳下来主要以四个维度去区分:受众主体、上线周期、业务类型和产品侧重点这四个维度,其余的维度也会有区分,但是影响较小,主要还是围绕以上四个维度进行B端和C端区分



受众主体

受众主体也就是相对应产品的用户群体。C端的受众主体是大众用户,特征为多样化,用户与用户之间跨度也大,但是场景和路径较为单一的,比如C端产品就以年龄层、城市、性别等来划分用户,每个阶段的用户都有不同的诉求、认知和习惯等等;在做任何决策方面都属于偏感性(Heart)的个人决策(Personal);用户稳定性则比较差,要是对产品不满意,可以立马换另一款产品,转换门槛低,有多个竞争对手产品可供选择;

而B端产品的受众主体则是为组织群体,特征为多场景和多维度,用户群体较为清晰明确,可以按照岗位、角色、权限等划分用户群,但是之间的关系更加复杂,比如设计一个银行内部管理系统,用户群就很明确清晰——银行各级职员角色,根据职级关系设计不同的功能以及权限;在做任何决策方面都属于偏理性(Head)的团队性决策(Team);用户稳定性较强,要是对产品不满意,也只能被迫适应和忍受,转换成本较高,几乎没有其他产品可供选择



上线周期

上线周期就是指产品从需求阶段到设计阶段。到开发阶段直至最后产品上线所需要的周期。C端产品上线周期模式有个很明确的特点:快速迭代、敏捷,很多C端产品功能更新迭代的速度很快,上线周期非常短,往往半个月甚至一周就完成开发上线,加上用户群的多样性和跨度大,所以在上线的时候往往会需要AB实验去验证方案可行性;

B端产品上线周期则是和C端一个对立面——长,少则双月/季度多则半年/一年等,因为B端产品流程上都属于重型流程,角色之间关系复杂,交互系统较为繁琐,需求的改动和迭代并没有那么频繁,也不需要像C端产品那样快速上线抢占市场,所以B端上线周期会很慢,也导致在工作强度上相比C端较为轻松一些,但是缺点就是结果没有C端来的那么快和明显



业务类型

C端产品的核心竞争力就是产品本身,关键总结就是让用户爽就完事了,所以C端产品的需求类型往往围绕用户群的痛点产生;因为C端用户跨度大,不同的用户群体有不同的痛点,所以导致C端的需求类型不是很明确清晰,需要不断从用户身上去探索挖掘需求,在不断的试错中逐渐得出正确的结论;

B端产品的核心竞争力除了产品本身,还依赖复杂的关系、渠道、技术和资源,你的关系够硬、渠道够广、技术够领先、资源够丰富,哪怕你的产品很一般,一样能领先其他同行业的竞争对手,关键总结下来就是让用户赢就够了;B端产品的需求类型虽然也是围绕着用户群的痛点产生,但需求的目标是更加明确清晰的,加上需求变更的频率、范围往往都有契约/合同所约束,所以相较于C端产品来说,B端产品是需求更加明确且容易达成目标



产品侧重点

产品侧重点无异于区分C端和B端最明显的门槛了,C端产品的侧重点主要在于体验,而B端产品的侧重点主要在于效益

前面提到过C端产品核心让用户爽就完事了,加上基于用户更换产品的成本很低:你这款产品我用不爽就换掉了,所以C端产品的侧重点永远以用户体验为主,前面说的需求业务类型也几乎是围绕用户体验产生的;大家对比市场上同类型的C端产品,界面、交互、功能都不会差很多,是因为经过长时间的更新迭代,已经沉淀下来目前最好的用户体验类型了,随着产品量级越大,改变用户体验类型就越谨慎;C端产品就是为了寻找并解决用户痛点、痒点和爽点,加上品牌性、用户隐私等因素考量,产品侧重点聚焦于用户体验

B端产品侧重点则是围绕效益了,因为作为一个团队使用的产品,不管是从易用性、功能性还是安全性,为这个团队解决问题为首要基础,那么使用者的体验、产品的美观度等等相较于优先级就没有那么高了,所以导致了有一段时间大家对B端的理解依旧是老旧、丑、难用的认知上;B端产品就是为了使用产品的团队解决效率、成本、营收的问题,加上产品的稳定性、安全性等因素的考量,产品侧重点自然更聚焦在效益上



什么是B端C化

前面了解了B端和C端产品的区别,接下来聊一聊什么是B端C化;简单来说从字面意思理解就是B端的设计层面逐渐靠近C端,网上也有很多B端可视化、趋势潮流的设计和文章,但是B端C化不仅仅是从视觉设计上的改良,下面我逐渐从大到小聊一下我对B端C化的理解


功能架构

在做过很多B端产品之后发现,往往很多产品经理是对整个产品架构、功能形态一切都清晰地了如指掌,但是有时候在搭建产品架构的时候,功能形态单一粗糙,步骤复杂且笨拙;站在业务产品的视角来看,架构逻辑上都是没有问题的,但是站在用户视角来看,整体框架是混乱破碎的,步骤繁琐且复杂,导致用户对产品的认知变差,但是又不得不去用这个产品,只能被迫去学习使用

比如一个产品案例,就是一个产品的底层逻辑是前端输入素材id,后端返还一个素材后就可以使用了,站在产品业务视角来看,这样设计没有什么问题,符合产品的底层逻辑;但是站在用户视角就特别难受了,用户想用一个素材,还要去寻找id然后输入搜索,像C端那样全部铺出来给用户选不好嘛?



行为习惯

行为习惯自然是指用户群在该行业下的行为习惯,电商行业、社交行业等等不同行业的习惯、专业术语等都不相同,这个在C端产品中都很能得到体验,比如电商行业的大红大紫,社交行业的左右滑动等等,这类有着很明显的行业属性和大众认知,一样是B端设计中应该注意的点

最经典的案例就是红色绿色的定义区分,在数据产品认知中,绿色代表数据涨了,红色代表数据跌了,比如GMV数据,DAU数据等,红色为重点关注的数据;而在金融行业中,基金股票红色代表涨了,绿色则代表跌了,所以设计的原则一定得是基于不同行业的用户行为习惯



信息层级

B端产品的信息量一般是很庞大的,尤其是数据、表单、审批等B端产品,涉及到不同角色不同权限的开放等,所以用户能否能一眼看清关键信息,能否帮助用户快速达成目标,是交互层面针对信息层级的设计处理一个重要的环节

之前很常见B端产品中信息处理的方法就是堆积处理,直接将信息、数据等平铺展示,比如很久之前的某牛商家端后台等老旧系统;现在很多新的B端产品都是以模块化处理方法将信息层级区分,使得模块之间间隔更明显,信息处理的效率更高,宛若C端中的卡片式设计



设计语言

设计语言自然是B端设计中标题、字号、颜色等规范标准,早些年把B端产品组件化后且开源的自然是阿里老大哥了,当时最早的AntDesign、以及后来的ElementDesign组件库,到现在都被很多中小企业甚至大厂某些产品一直使用中,但随着B端产品的普及和发展,越来越多的企业开始将自己产品沉淀出完善成套的设计语言,并搭建出自己的组件库投入使用了



用户体验

如何去衡量用户体验是否是好的,最客观来讲当然是通过数据去衡量,而数据往往在C端产品中很常见,不管是体验数据还是表现数据,都是C端产品中最为关注的;然而在B端产品中,更多收集的一般都是业务表现数据,几乎没有衡量用户使用平台的相关数据,大多衡量体验的方法都是依靠问卷反馈的形式;但在B端C化的过程中,用户体验的数据也逐渐被加入到B端产品当中来,成为体验标准的考核之一:比如某个任务完成的时长,报错出现的频次、某某工具的使用率等



视觉设计

最后就是B端C化表现层的设计,包括目前主流的设计趋势如大数据可视化、3D建模、材质质感、Dark模式等都逐渐融入到B端产品中,使得B端产品不再追求简单的“功能优先”和“能用就行”,而是像C端那样追求更美观的视觉,更极致的体验



为什么要B端C化

总结下来“B端C化”就是B端产品无论是从功能架构还是视觉体验,越来越趋于人性考虑设计,越来越关注使用者的感受和反馈,因为说白了不管B端产品代替成本高不高,用户是一群专业人士还是普通职员,使用者归根到底还是“人”在使用产品,那么必然会带来体验相关的问题;所以B端C化会逐渐形成一种趋势,在企业平台资源支持的情况下,会将B端产品的功能放大,追赶市场竞争,逐利行业内卷,在体验和视觉感官上也会更加的人性化,结果自然是产品设计者们更加的卷了(手动狗头)


总结

无论是现在的B端C化还是将来其他多元的设计趋势,随着市场的竞争和行业内卷,已经反推着设计师们不单单局限于照顾自己的“三分田地”了,无论是之前视觉设计师开始学习3D建模,还是UI设计师尝试接触代码设计,设计师最大的品质就是应该紧跟时代的趋势变化,及时调整补充自己的能力,提升自我的竞争力,才是在当今环境下立足的根本

作者:雨灰       来源:站酷 

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

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

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


想做好卡片设计,原来要注意这么多细节

纯纯

1、卡片的造型


1)圆角


不同的圆角,所带来的气质是不同的。圆角很小,视觉印象是硬朗,高冷,具有攻击性的,多用于严肃、高端、冲突感强烈的设计中;而更大的圆角给人的感觉是有亲和力,柔软,安全的,多用于儿童产品、娱乐性强的设计中。


在设计的时候,根据自己的产品属性选择气质相符的圆角设计很有必要。


undefined

常见的卡片弧度形式有4类:直接、小圆角、大圆角、特殊圆角



我一般喜欢用4的倍数来设置圆角,比如圆角大小为4px、8px、12px之类的。要注意的是,圆角越大,可用面积会越小,需要根据实际场景进行平衡,以视觉上舒服为宜。



2)比例


卡片的比例,我习惯遵循一些美感规律,比如黄金比例(1.618),白银比例(1.414),青铜比例(1.732),正方形之类的比例。当然,实际设计需求中的比例,还是要结合内容的多少具体分析。


我的经验是,当比较接近这些美感比例其中之一时,就直接优化到这个比例。比如做了一个卡片,宽高比是1.5,比较接近于黄金比例,我就干脆让它等于黄金比例。


undefined



3)异型


除了正常的卡片样式,还可以做一些异型的卡片设计。异型卡片具有较强的形式感和视觉冲击力,所以会比较多的用在游戏或者运营相关的界面中,吸引用户的注意力。缺点是批量化设计成本略高且因为过于风格化而不够耐看。


undefined



2、卡片的效果


1)颜色


卡片的颜色搭配可以使用纯色和渐变色。这些颜色与文字之间的对比要符合界面对比度标准( https://contrast-grid.eightshapes.com/,这个网站可以直接查到可用性数值,只要不是DNP就是可以用的配色),以免影响内容本身的阅读。如果拿不准的话,可以多用一些白色,比较不容易出错。


纯色卡片设计会让界面显得冷静高级,但对配色的要求相对较高,用不好的话会显得单调,沉闷。如果你坚持要用这种卡片配色的话,建议搭配一些图形纹理,会更容易把控,还能提升画面细节。


undefined

纯色卡片设计



渐变色的卡片设计目前较为常见,层次细节更加丰富,画面也显得更活泼一些。


undefined

渐变色卡片设计https://dribbble.com/shots/12284120-Wallet-Design-App



有些朋友经常因为配色不好而发愁,其实是需要多去找一些参考来看的,实在担心配色不好,直接去吸优秀的配色方案也是OK的,但要注意搭配合理。


教大家一个方法,去dribbble上搜color或直接打开https://dribbble.com/search/color这个链接,就可以看到非常多的优秀配色方案了。


undefined



2)图案


卡片的设计还可以结合辅助图形,以图案的形式与卡片进行结合。这些辅助图形可以来源于品牌符号的延伸,让品牌有更多的露出机会。


undefined


也可以是运用一些简单的图形,提升卡片的设计细节,以下是一些还不错的设计案例。这些卡片上的图形都有借鉴参考的价值,自己平时有时间的话,也可以多做一些作为图形的储备。强烈建议收藏,真的可以很有用。


undefined

来源:https://dribbble.com/shots/10513966-Gradient-Bank-cards


undefined

来源:https://dribbble.com/shots/10498737-Dark-Bank-Application-Design


undefined

来源:https://dribbble.com/shots/11313260-Finance-App-Exploration


undefined

undefined

来源:https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD


这里彩云给大家找了非常多的卡片设计形式,可以从中参考学习配色和纹理造型。



3)图片、视频


卡片背景也可以用图片和视频的形式进行设计,图片和视频的选择一般会偏暗色,以不影响内容阅读为准。


undefined


undefined

来源:https://dribbble.com/shots/5717917-Travel-Article-Application


3、卡片的内容


1)文字


卡片上的文字不要太长,我的经验是横向不要超过42字(关于这个字数,有资料可以查,感兴趣的可以找找看),纵向不要超过5行。过多的文本不建议使用卡片形式。


undefined


其实这张卡片的设计中,我也用到了黄金比例来指导自己的设计,方便快速确定文字比例关系。


undefined


2)间距(网格法)


卡片上的文字间距最好有一定的规律,这里可以按网格法来规划,比如8px网格,10px网格等等。网格的使用其实可以很灵活,比如我这里的卡片其实就用到了8px网格,各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理,这样做目的一方面是为了让界面有秩序,另一方面是提升决策效率。秩序产生美,而效率让你早点下班。


undefined


3)减少线框


卡片中尽量减少线框,多用留白来进行内容划分。


undefined


4)层次清晰


卡片中的内容层级要做好,标题和内容之间的差异要明显。这里的层次主要是通过对比拉开的,做好对比的关键就是对比效果要强烈,决不能模棱两可。


比如下图中左边的案例只是在文字的字号上有一定的对比,但字号间相差不大,效果不明显,就会让人看第一时间不知道看哪。而右侧的案例则用了加粗,大字号,大留白等,让画面有了强烈的对比,从而产生更好的信息层级。


undefined


5) 内容出界


只在卡片的框框里做设计,有时候未免显得太呆板,破开卡片的边界可以让卡片本身更具形式感。如果被人说你的设计没啥亮点,那内容出界的设计就是一个很好的提升设计亮点的手法。


undefined

彩云曾经做的一张banner就是运用了出界的手法


undefined

来源:dribbble。界面上的天气图标也用了出界的手法,让画面显得更有亮点


4、卡片的细节


1)光感


卡片中的光感细节能提升设计的质感。下面这张图是我最近做的一张会员卡的背景设计,大家对比下,在卡片顶部加了1px高光线和斜面反光的细节前后的质感区别。


undefined


这个小细节,我经常会用到,执行简单又容易出效果。


undefined


2)投影


投影的细节,不要过重,但又要能与背景分离开。有2个小技巧:

1.在取色的时候,可以选择背景颜色的色相,然后略微加深一些,不要用纯黑色来做投影,会显脏。

2.投影的距离不要太小,太小的投影会显得不够自然;也不能太大,太大会很浪费界面资源。


undefined


3)3D效果


3D卡片的设计,因为不便于内容编排和阅读,所以带透视的卡片在实际UI中并不太常用。但在作品集包装和运营页面中,则可以带来比较好的视觉冲击力,可以尝试运用。


undefined

图片来自:Cradle

作者:彩云Sky    来源:站酷

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

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

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


科学合理的通过颜色吸引用户、增加粘性

纯纯

没有难看的颜色,只有难看的搭配每一种颜色有其独特的作用,令人产生不同的情感。合理使用色彩可以取得宜人的效果。

一、色彩的基本认知(本模块设计小白可以了解一下,有基础的略过)        undefined1、色彩由色相、饱和度、明度三要素构成

 色相(Hue)

即各类色彩的相貌称谓,如大红、普兰、柠檬黄等。色相是色彩的首要特征,是区别各种不同色彩的最准确的的标准。事实上任何黑白灰以外的颜色都有色相的属性,而色相也是由原色、间色和复色来构成。

 

饱和度(Saturation)

饱和度是指色彩的鲜艳程度,也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大,饱和度越高;消色成分越大,饱和度越低。

 

明度(Brightness)

明度是眼睛对光源体和物体表面的明暗程度的感觉,主要有由光线强弱决定的一种视觉经验。明度不仅取决于物体照明程度,而且取决于物体表现的反射系数。

 

2、配色的基本认识

 

基本色环(Color Wheel)

按照光谱顺序为:红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝、蓝紫、紫、紫红、红和紫中间在加个中间色。在色相环的圆圈里,各种色调按照不同角度排列,则十二色相环每一色相距30度,24色相环每一色相距15度。

 

同一色

色相环中的任意色因明度变化而呈现的色彩。颜色混合是通过在色彩中加入黑、白、灰形成的。统一色调,色彩的纯度和明度是具有共同性,明度按照色相略有变化。

同色系配色是指主色和辅色都在同一色相上,这种配色方法往往会给人页面很一致化的感受

 

同类色

同类色又称类似色。色相环原色起45度以内,含有较多共同的色彩元素的色彩,同类色指色相性质相同,但色度有深浅之分。

 

相邻色

色相环中相距90度,或者相隔五六个数位的两色,为邻近色关系,属中对比效果的色组。色相彼此近似,冷暖性质一致,色调统一和谐,感情特性一致。

相邻色不同于同一色的枯燥乏味。稍微跳动的的色彩也一样保持着设计的稳定性,还能起到强调单独作品的作用

 

对比色

指色相环上色相对比较大、纯度较高的任意两色。对比色之间无过多的共性,对比效果强烈。当对比的两色具有相同的彩度和明度时,对比效果越明显;两色越接近补色,对比效果越强烈。

主导的对比配色需要精准掌控色彩搭配和面积,其中主导色会带动页面的气氛,产生激烈的心理感受。

 

补色

补色又称互补色、余色,亦称强度比色,就是两种颜色(等量)混合后呈现黑灰色,那么这两种颜色以定位互补色。色环的任何直径两端相对之色都称为互补色

补色对比由于色彩过于冲撞,很少用户传统网页界面,一般用于活动 banner,起到吸引用户眼球的作用。



二、HSB色彩模型


1、什么是HSB色彩模型

如果你写过HTML和CSS,那么肯定熟悉RGB,三个字母分别表示:R(红)、G(绿)、B(蓝)。这种方式对电脑来说非常直接明了,也是电脑理解颜色的默认方式。对电脑友好并不意味对人类易用,这也是HSB诞生的原因。

HSB代表色相(Hue) - 饱和度(Saturation) - 明度(Brightness),又称HSV,是一种更人性化的颜色描述方式。为什么这么讲?因为它与人们描述颜色的自然方法一致。

 

2、HSB色彩模式设置及优点undefined

1)、比起 RGB 系统,HSB使用了更贴近人类感官直觉的方式来描述色彩 ,对于设计师来说更容易理解

 

HSB 的概念很接近色彩学所常使用的色彩空间模型,由于是由三个属性所组合而成,因此常以色立体表示,

但由于我们常用的操作系统依然为二度空间的系统,因此在计算机系统的选色接口中常以不同的接口出现,我想其实大家都很熟悉,像是下图为sketch中的选色器,可以看见一个全彩的色相条,和一个颜色的窗口,滑动色相条即可得到不一样的颜色

 undefined

2)、HSB可以更加科学地保证设计师所使用的不同颜色处于同一明度和饱和度,使用户的视觉体验感更好


也许你会觉得 HSB 并没有比较简单,但是实际使用过就会发现,它是多么的好用。例如下图的男女比例的背景色块,如果用RGB调色只能通过设计师的眼睛和经验来调整他们是否处于同样的色调中,但是用HSB来调色,保持S和B值相同,只需要滑动色相条即可得到完全一样的色调,省时省力还科学

                   

 

三、色彩使用规则

 undefined      

1、色调的分类

色调(color tone)是不同色相但是具有同样亮度和纯度的颜色进行的分组,

undefined     

 

极浅vp(very pale)色调:

是纯度最低、亮度最高的,干净清淡的颜色,给人清的,柔弱的,女性的,年轻的,淡的,可爱的印象。

 

亮灰色lg(light grayish)色调:

纯度低,中高亮度的色调,给人高贵、安定、古朴的印象和轻柔的感觉。

 

中灰色mg(medium grayish)色调:

低纯度中亮度,具有浊,不起眼,古朴,稳健,安定的气氛。

 

深灰dg(dark grayish)色调:

低纯度和中低亮度,给人漂亮、安定、自然的感觉。

 

极暗vd(very dark)色调:

是纯度和亮度都最低的色调,具有厚重牢固的感觉,给人非常暗,阴暗,厚重,坚固、男性的印象。

 

浅的pl(pale)色调:

中纯度和高亮度的色调,给人干净、浅、爽朗的感觉。

 

柔软sf(soft)色调:

中纯度和中高亮度,给人稳健温柔的感觉。相比浅色给人感觉更安定。

 

晦暗dl(dull)色调:

中纯度和中亮度的色调,给人安心高雅的感觉,一般说的中间色就是晦暗色调。

 

暗dk(dark)色调:

中纯度和低亮度的色调,具有结实,成熟,古朴的色调印象。

 

亮It(light)色调: 

高纯度高亮度的色调,具有明亮、健康、活泼,年轻而稳定的印象。

 

强st(strong)色调:

高纯度和中高亮度的色调,充满活力,冗长,热情,开放的印象。

 

深dp(deep)色调:

高纯度和低亮度的色调,具有力量感和深度,给人深的,浓的,传统的等印象。

 

活泼VV(vivid)色调:

高纯度和中亮度的色调,较为鲜艳,鲜明,华丽,鲜艳,鲜活的印象。

 

2、色调配色技巧

同色相环配色技巧原理一样,色调也有3种基本的配色技巧。

 

1)同色调的配色:

同色调的颜色几乎没有亮度和纯度差,是比较容易统一和协调的配色。

undefined     

 2)邻近色调配色:

具有一定的亮度和纯度差但是差值不大,比较容易调和,容易传达原有印象。有纵向邻近、横向邻近、和斜向邻近三种。

undefined     

3)对比色调配色:

亮度与纯度差很大,是极具张力的配色方法。是色调图上相隔很远的色调的配色。自由选择色相,有亮度对比、纯度对比、亮度和纯度对比这三种配色方式。

undefined      


配色网站推荐

推荐是三个比较好用的、简单操作的配色网站,有需要的可以收藏

1、coolors.co

2、designspiration.com

3、materialpalette.com

undefined

四、常用色分析undefined


除了医疗作用外,颜色还有一定的象征意义和社会属性,对人类生活有着举足轻重的影响。颜色心理学领域的佼佼者,美国罗切斯特大学安德鲁.埃利奥特说,以前从来没有人做过这种联系。他表示:“颜色研究表明的是,我们的行为会受到我们没有留意,习以为常的事物的影响。”

据国外媒体报道,人们常常认为,穿着红色服装是自信的表现。同时,科学家们也认为,运动员身穿红色运动服更容易取得好成绩。然而,英国罗彻斯特大学的安德鲁·埃里奥特等人开展的一项最新研究却显示,红色会抑制人们思维的活跃性。

埃里奥特和他的研究小组共对一些中学的高年级学生和部分大学生进行了四次研究。期间,他们向被测试者发放了一些用于进行智力水平测试的纸片——在各张纸片的右上角分别用红色、灰色或绿色表明了序号。

结果,凡是所持纸片上用红色标明序号的学生,其所获得的智力水平评分均明显低于那些手持灰色或绿色序号纸片的学生。先前的研究已经证实,人们在日常生活中所接触到的颜色会对人的潜意识产生影响,只不过这种影响非常短暂。

埃里奥特教授认为,红色首先会使人们联想到错误和失败。谈到这一点,大多数人肯定都会想到老师在判卷时所使用的红墨水。当然,有关禁止的信号通常也以红色表示。而在自然界中,红色则是一种警示色。随后进行的另外两项研究则证实,当受测试者眼看着红色回答问题时,他们通常会选择那些较为简单的问题进行解答--这是人们在面对困难时所选择的最经典的方法。

与红色相对的是,蓝色能够促进创新;黄色,则是最令人愉快的颜色,它被认为是愉快的象征,可以刺激神经系统和改善大脑功能,激发人的朝气,令人思维敏捷。另外还有,橙色,是新思想和年轻的象征,令人感到温暖、活泼和热情,能启发人的思维,可有效地激发人的情绪和促进消化功能。

赏心悦目的色彩能够通过视神经传递到大脑神经细胞,从而有利于促进人的智力发育。在和谐色彩中生活的少年儿童,其创造力高于普通环境中的成长者。若常处于让人心情压抑的色彩环境中,则会影响大脑神经细胞的发育,从而使智力下降。所以,我们在平时日常生活中,正确的应用色彩心理学,改善生活环境色彩,让我们的心情更舒适,思维更敏锐。

所以一定不要让自己孩子在高考的时候穿什么红色的外套,旗开得胜什么的,可能会影响思维活跃度,导致考试成绩不理想

undefined

橙色稍稍混入黑色或白色,会变成一种稳重、含蓄又火热的暖色,但混入较多的黑色,就成为一种烧焦的色;橙色中加入较多的白色会带来一种甜腻的感觉。由于位于可见光的中低频频段,橙色在空气中的衍射能力仅次于红色,而其色感比红色更暖,最饱和的橙色应该是色彩中感受最暖的颜色,能给人有庄严、尊贵、神秘等感觉,所以基本上属于心理色性。历史上许多权贵和宗教界都用以装点自己,现代社会上往往作为标志色和宣传色。不过也是容易造成视觉疲劳的色。

英国埃塞克斯大学做了一项研究显示,绿色是很特别的颜色,在四季分明之地方,如见到春天之树木、有绿色的嫩叶,大自然的颜色。在绿色环境中锻炼能提高情绪、活力和愉悦感。也就是说,户外锻炼有益身心。

色彩心理学家早就指出,人们在高频率颜色(如绿色,蓝色和紫色)的环境下会产生平静的感觉,而在中低频率颜色(如红色,橙色和黄色)的环境下更容易兴奋和激动。这一现象可能是在人类进化的过程出现的。因为对于原始人类来说,绿色的环境意味着充足的食物和水源,对绿色的积极感觉在进化过程中融入大脑。

英国埃塞克斯大学的研究者选取十四名男大学生,要求他们在室内固定单车上骑行5分钟,并观看关于森林的纪录片。随后,研究者将视频背景由绿色转换为黑色、白色和红色,让志愿者在观看这3种颜色视频的同时,又分别骑行了5分钟。结果发现,他们在观看绿色视频时疲劳感低,情绪也能保持愉悦;而观看红色背景视频时,他们更容易情绪不稳。


紫色跨越了暖色和冷色,所以可以根据所结合的色彩创建与众不同的情调。带些红色的深紫色可以产生一个暖色盘。浅紫色是较贵的,常常会联想到浪漫。当结合玫红色的时候,可以创建一个很女性化的色盘。一个比较男人的色盘可以使用偏红偏黑的深紫色。泥土和自然的色彩可以结合红紫色和浅褐色或者亮紫色+绿色。黄色和紫色是对比色,可以创建强对比度的色盘。

     

作者:木子浅谈    来源:站酷

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

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

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


设计师除设计外所需要具备的能力

纯纯

我们已经或多或少看过一些优秀作品,也知道了一些设计方法和技巧,了解到了一些相关的理论知识,自己也做过一些项目或者是练习,总体来说都掌握了一定的设计能力;但是设计师想要拥有更多的资源(指薪资、工作机会等等)或者是想职业进阶,除了一定的设计能力之外是远远不够的,设计师还需要掌握更多的能力,才能让自己成长提升,并且拥有他人无法取代的价值。我通过自己的经历和整理收集,发现目前如今不同阶段的设计师对待同一个问题不同的角度以及特征,如下图所示:



不难发现,当大家还是初级设计师的时候,刚刚接触设计行业,我们更多的是去观察、学习、临摹一些“好看”的作品,熟练地使用设计软件和提升设计技法,最后的是自己做出来的产品是否漂亮美观,最重要的是客户/老板是否会买单,而自己无法清晰地定义自己设计的产品价值,也不能很好表达出自己的想法和观点。所以产品走向会根据老板/客户的水准来定义,轮到自己表达只是支支吾吾,最后只是做为执行无休止地改改改。一切由老板/客户说的算,无法清晰地了解自己产品的定位,缺乏表达观点的能力,缺乏一定的审美,作为执行角色无休止加班成为了初级设计师最大的痛点。


而经过一段时间的学习和工作后,逐渐转型成为中级设计师后,有了一定的设计技法和软件使用熟练度,有了一定的审美和视觉表现能力,平台规模合作团队也逐渐变大,基本能满足老板/客户/业务方提出的需求。开始学习一些设计相关理论,开始拆解自己或别人产品的交互架构,更多地开始关注用户体验起来,也会融入品牌元素到自己的产品当中,为自己的产品做情感化设计和制定设计规范,会组织一些专业语言和业务沟通以及陈述自己的产品。但是如何从众多的设计方案中找到最优的方案来解决问题,如何更多地体现产品的价值,产品利益链如何形成商业闭环,如何在团队/设计圈体现自己个人的价值,如何提升自己的个人影响力,成为了中级设计师这阶段的痛点。


通过三年五年的沉淀,成为高级设计师后,形成了自己独有的一套方法论和设计思维,能熟练地拆解每款产品和定义产品,视觉表现层已经完全能驾驭,能清晰地阐述自己的设计思路和结论,产品用户体验层也有了一定的经验和方法,在团队中或者设计圈有自己一定的个人影响力,更多地会在工作中思考产品带来的社会价值和商业价值,会用不同的思维去思考产品的各个维度,找到最优的方法解决问题,会把固有的利益链转换成商业闭环,提升用户转化率等等。而这阶段的设计师的主要痛点就是面临着团队管理和沟通,朝着资深设计师和设计专家转型,以及如何为平台带来的利益价值考核等等问题。


资深设计师或者设计专家这里不谈,因为这阶段所思考的问题大都和设计无关了。通过上述不难发现,每个阶段的设计师都有各自的特征和痛点,虽然其中都包含着设计相关的能力,但是随着阶段的进阶设计相关的能力占比逐渐变少,更多的是其他的能力增长,所以设计师除了设计以外其他能力的重要程度显而易见,那么我们来看看除了设计以外,设计师应该掌握其他什么能力。


思考能力(Thinking)

思考能力作为首要的能力,不仅仅是设计师,其他职业一样需要这个能力,这里所涵盖的面太广泛了也说不了,这里主要针对三点来讲:核心竞争力、批判思维和分析能力。思考分为两个层面:自我层面的和业务层面的思考;自我层面的思考就是要通过深度剖析自我,发掘自己处于哪个阶段,有什么长处和不足,自己想要什么,需要往怎样的方向发展;而业务层面的则是要需要思考业务产品的结构框架、用户体验、商业价值等等等等,前者更加关注自身的成长,后者更加关注业务的成长。



· 核心竞争力

核心竞争力就是有与别人不一样的竞争力,想要做到别人无法替代你的地步,就要有自己个人核心的竞争力。如果你会做一张 Banner,我也会做一张 Banner,你会搞一个页面,我也会搞一个页面,那么你这个人就成为了可有可无的螺丝钉,唯一的优势就是年轻能拼能熬,等你熬锈了老了,随时可以换一颗新的螺丝钉来取代你的位置。所以不管什么阶段,我们要深度剖析自己,认清自己的优势劣势,并采取相应的措施。



剖析自己的核心竞争力给大家一个大致思路,从异样性和共通性入手。自己周围或多或少有团队,条件不足的话现在网络各大平台都很发达,也能融入一些设计圈子中,和不同的人对比寻找自己的核心竞争力。异样性是当前的优势,找出其中的优点,不断地放大深造,变成你的核心竞争力,而和别人不一样的缺点找出来摒弃改正;共通性就是和大家一样的地方,可以看作是伪劣势,因为诸多共通性中总有你最喜欢最擅长的一个,将它单独拿出来不断扩大,逐渐就拉开了差异性,慢慢就转化成你的核心竞争力了,而大家都有的缺点,你把它纠正了,就成为你的核心竞争力了。

来举一个栗子:小王是一名工作了3年的设计师,研究生毕业,由于公司的原因平时工作最多接触的就是一些运营图 banner,也有过很多品牌 VI 的经验,逐渐自己在视觉表现上有自己一定的见解和想法,也更加感兴趣做视觉表现的东西。

那么他的共通性就有:1.工作3年之久;2.研究生毕业;3.视觉表现能力强也更感兴趣;4.做过品牌 VI 的经验;5.有自己的见解和想法。

由此推断出小王的共通性是:1.工作经验丰富;2.视觉表现力强;3.有想法和见解;

异样性是:1.学历优势;2.品牌 VI 相关经验

那么小王可以保持自己学历优势下,可以继续深造品牌 VI 相关,逐渐转型成为高学历的品牌 VI 设计师,那么学历和很多品牌 VI 的经验就是小王的核心竞争力;也可以通过热爱去学习 C4D 动效等软件继续增强自己视觉表现力,配合自己丰富的工作经验逐渐转型成高学历的创意艺术设计师,然后通过将自己的想法见解通过分享会、文章等模式产出,将这一点升级成个人影响力,那么综合下来更加优秀的视觉表现力、丰富的工作经验和个人影响力也会逐渐变成小王的核心竞争力。

只有通过不同维度深度地剖析自己,找到自己的共通和异样点,清晰自己的价值定位,然后制定出适合自己成长目标和方案,不断放大增加自己的核心竞争力,成为不可取代的那个人。


· 批判思维

批判思维是一名设计师必须具备的思维能力,我们不仅仅要学会批判别人的作品,还要学会自我批判。这里不是指无脑的批判(之前遇到过一个实习生刚进到公司里,就把之前所有人做的东西全部批判了一遍,重点是只说产品好看与否,完全不顾及平台一致性商业价值用户体验等等,最后只批判却没有任何实质性的建议,颇有一种指点江山的感觉,然后后面再也没见到过他了),这里是指在自己通过批判别人或自我的方案,不断地优化纠正,最后产出最优质的方案,这是批判思维的出发点。



不同的人有不同的经历,看待问题的维度是多种多样的,所以一个方案产出后,通过不同的人思考后的结果是最好的解决方案。这也印证了波克定理:只有在争辩中,才可能诞生最好的主意和最好的决定。所以当设计师接到产品交互给到的原型图后,不要上手就做图,要通过自己经验和想法去看待原型图,然后提出更加优质的方案进行讨论,如果你的方案更加优质,那么不仅是产品的质量得到了优化,你个人的经验也得到了沉淀,下次遇到相同的场景就可以拿出来复用,直到遇到更好的方案。

唯一注意的事项就是注意沟通的方法,这里后文会提到,比你资历高的人提出的观点更加具有建设性,在毫无头绪没有创新的情况下就听比你更有经验的人的;遇到比你资历低的人提出的观点也不要嗤之以鼻,抓取其中有用的点,没准是一个新的思维方向;总之,有数据说数据,没数据举案例,没案例讲观点,如果连观点都没有的话,照着大佬说的话做就是了。


· 分析能力

分析能力也是设计师必须掌握的能力之一,无论你是创意艺术设计师,还是用户体验设计师,譬如一张 Banner 氛围传递或者文案排版,譬如插画的配色或者场景搭建,譬如产品的布局结构或者用户体验,这些都需要有一定的分析能力。通过拆解改版/竞品/参照产品等,明确产品的最终目的、商业价值等等,有了这些准备后才能对自己的产品进行设计或者改版。而分析产品可以以用户体验五要素的角度来分析,分别是:战略层、范围层、结构层、框架层和表现层,具体相关的文章站酷、PM 社区、36氪等等都搜的到,这里不再细说;之前在分析产品的时候发现有些产品强行套用这五个要素进去不适用,因为有些产品的页面它不存在战略层或者范围层的东西,所以我总结归纳了三个角度来分析产品。



案例就用淘抢购 v4.1 页面(已上线)来讲,三个角度主要是:表现层、用户体验层和价值层。表现层主要就是产品页面的配色、布局结构之类的;用户体验层就是产品的心智透出、交互流程之类的;价值层就是产品深度的价值体现了,比如商业价值、社会价值和用户留存率之类的;大致可以套用这个公式去思考:为什么这里会用这种表现形式,它想要表达怎样的效果,它要达到怎样的最终目的,如果是自己去设计会怎样做。举例:因为淘宝规范为卡片式设计,在视觉表现上要统一,所以淘抢购 v4.1 的业务目的是统一视觉样式,并且它需要给用户产生一种“商品很便宜快去抢购再不抢购就没了”的心智认知,它的最终目的是引导用户去商品 Detail 页面购买商品和提高商品的点击率,这样通过协调关系形成平台、商家和用户之间的利益链商业闭环。

想要提升自己的分析能力除了项目和时间的沉淀外,更多的时候需要自己平时的积累,站酷等平台有很多优秀的作品,作者会把自己设计的分析和思路写出来,我们可以看看别人的想法是否值得借鉴,然后再去分析一下,最后思考如果是自己的话会怎么去做;其次做设计的时候带着同理心去做,把自己当作用户去看待自己的产品,通过不断的积累提升自己对产品的敏锐度,将一些产品的隐性问题挖掘出来;另外可以多看一些好的设计分析书,比如《U一点料1、2》、《以匠心 致设计》等等,将学到的分析方法代入自己的产品或作品中,逐渐分析能力就增强了。


规划能力(Plan)

规划能力是日常工作生活中所需要掌握的能力,主要讲业务规划和职业生涯规划,业务规划能力应对的是我们工作中处理业务所需要具备的能力,而职业生涯规划应对的是我们整个人生职业生涯规划的能力。掌握这个能力后前者会给我们带来业务处理效率上的提升,后者给我们带来整个人生有益的好处,所以这个能力非常重要。


· 业务规划

很多时候我们还在有条不紊地处理某个需求,心想着下班去吃个饭买水果回家洗澡睡觉的时候,突然来了一个紧急的需求,就把我们整天的计划给打乱了,火急火燎地处理完这个需求,然后又把之前的需求做了,最后加班改改改导致整个计划泡汤了。工作中遇到这样的情况很多很多,处理方法有很多种,最经典的就是四象限法则,把事情的紧急重要程度分为:重要且紧急、紧急不重要、重要不紧急和不重要且不紧急四个象限。



很多时候都是道理我们都懂,可是一遇到情况依旧手忙脚乱,根本原因是没有认真地把它代入自己的工作生活当中。画一个象限表,把自己今天所要处理的事务陈列出来五分钟都不需要,一开始可能因为事情不多就没坚持下去,一旦养成习惯后,将来遇到多种紧急情况突发的时候就能认识到这个习惯给你带来的好处了,所谓养兵千日,用兵一时就是这个道理。



在做业务需求的时候,可能会碰到有些需求价值高,有些需求价值低但又很紧急,不知道怎么处理之间的关系,我们依旧可以套用四象限法则来制定一个四象限表:价值高且紧急、紧急但价值低、价值高不紧急和价值低不紧急。什么是价值高的需求呢,就是能让你有充分思考和分析的需求,比如某个页面的改版;价值低的需求则是相对不怎么需要思考和分析的需求,比如根据已有的规范改个颜色之类的。在时间的优先级前,价值高的需求大于价值低的,最后剩下的就是价值不高且不紧急的。因为我们无法拒绝需求,需求来了肯定要是做的,工作不是爱好可以有多种选择性,但我们要学会将需求分解成不同类型的,对自己有成长沉淀的需求那可以作为最高优先级去处理,留够充裕的时间去思考分析,然后沉淀经验稳定提升。


· 职业生涯规划

这个在大学期间就学过相关的课程,只不过当时并没有太深的感触,而是等工作以后才知道这项能力的重要性,它相当于关系着你每个阶段的里程碑,当成游戏中的成就任务也不为过,还是自己设定的成就任务。某个阶段想要达成什么样的目标,想要获得怎样的成就,都是要自己一步一步慢慢规划并且完成出来的。

因为我遇到过几个非常努力的人,努力到让人心悸的地步,每天除去吃饭睡觉工作时间就是在努力学习,到最后还是很迷茫,不知道做什么,不知道如何体现自己的价值。这类没有目的的努力的人是很可怕的,他们努力得没有错,但是这样下去没有成效的努力会让他们觉得努力并没什么用,然后逐渐开始产生抱怨、泄气和放弃等负面情绪。



举个例子来说明:如果你刚毕业,给自己制定的长远的职业生涯规划是在工作3~5年后进到大厂工作提升自己,那么所拆分下来就需要一些项目工作经验和优秀的作品,再拆分下来就是如何做出优秀的作品,细分到最后就是作品当中的元素,比如图标排版布局之类的,那么就制定一段时间内的练习就按照各类元素去做,比如图标画两个星期,APP 设计排版布局练习两个星期,插画练习画两个星期,这样坚持下来就组成一个完整的项目作品了,以此类推。有了规划目标并且在自我驱动的推动下,逐渐实现自己的职业目标。


设计师要如何培养自我驱动可以看我之前的文章:


浅谈设计师的自我驱动

https://www.zcool.com.cn/article/ZODEzMTky.html


执行能力(Execute)

执行能力是指自我在工作&学习中执行的能力,执行能力为一个设计师最主要的核心技能,一切的能力都凌驾于这个基础之上;哪怕你再能说会道,能赋予你的设计各种价值,能给予你的设计各种环境,但这些都是第二步,第一步就是你的设计表现达到期望值,如若第一步稿子都不好看,那么没人愿意会听你叙述的。前文已经提及到了,设计师在初级至中级阶段的时候大多数注重的就是表现手法,如同学说话一样,表现手法可以看作是汉语拼音,然后才是组成一个个字,最后组成一句完整的话语。


· 自我执行力

提升自我执行的能力我大致分为两个步骤:看和做。

首先先来说看,看其实是提高自己审美的一个过程,通过看一些平台网站的优秀设计作品,久而久之自己的审美能力才会提高,然而看分下来一种是带有目的性和不带有目的性的。不带有目的性地去看是在自己有空余或学习时间,通过浏览设计网站采集学习一些你觉得好看的作品;采集是一个很好的习惯,我觉得是每个设计师必须养成的习惯,把自己平时觉得好的表现形式收集起来,等到某一天需要用到的时候,脑海中对当前场景会有一定的印象,再根据印象去寻找采集到的作品,能很大程度上节省自己脑爆的时间,哪怕没有采集或者文件丢失,自己的脑中大致也会有一个雏形方向。而带有目的性地看是指针对某一个模块去搜集整理,比如今天我需要做一个关于内容的模块,那么我就会去寻找一些做内容的产品设计,搜集到的各类关于内容的表现手法,然后结合自己的经验和分析,找出最适合自己产品的一种。



仅仅看是不够的,在看过之后我们需要动手尝试才能算真正地沉淀自己所看到、学到的东西。做设计最忌讳的就是“眼高手低或者眼低手高”这种状态,有了审美但表现手法跟不上,或者说表现手法有但是审美跟不上。一定要在自己吸收了一定的审美后,通过自己的尝试去做出来,才能真正的沉淀到自己的大脑当中,变成自己的表现手法之一。最后通过大量的积累,结合对商业需求的判断形成设计策略,才能从容应对不同的产品需求,哪怕你今天做金融相关的产品,还是明天做电商的产品,后天又改做工具类产品,一旦形成了自己不同的应对策略,才能做到真正意义上的游刃有余。



很多时候我们只关注到鱼的大小、鱼的肉质是否鲜美那20%层面的东西,往往忽视了80%最重要的捕鱼技巧和方法;看到的只是产品是否好看,交互是否流畅,体验是否良好,没有往更深层次地去想这个产品的商业背景是什么,设计师为什么要这样设计,如果换做自己的话会去怎么做;毕竟我们所做的一切训练、思考都是为了更好地为工作服务,就如同脱离了商业背景以后,有些设计就只是单纯的炫技,并没有解决问题的价值,而设计师的工作核心就是解决问题,所以我们要结合作品的背景、价值等因素,去看、去做、去学相应的表现手法才是自我执行的核心所在。


表达能力(Express)

表达能力是设计师除去执行能力外第二重要的能力,小到平日里的沟通对接,大到述职晋升面试,都离不开表达能力的支持。有些设计师经常面试怎么都过不了关,我本以为是作品集的问题,可是看完之后作品方面完全没有什么问题,具体了解后才知道是在面试过程当中不知如何阐述自己的作品和思路或者在阐述过程中由于紧张等因素导致表达断断续续不顺畅,面试官就会觉得这个人不靠谱然后 PASS,明明做图很优秀却输在了表达上,这种情况就很憋屈。在广告公司中,一个 LOGO 或者广告视频往往只是赠品,出售的却是这个品牌VI的故事;如果一个设计师不懂得怎么阐述自己的业务,不懂得怎么推销自己的方案,不懂得拓宽自己的个人影响力,就单纯的只会执行作图的话,那么这名设计师是不合格的。网传有一个段子“一个公司的工资排名规律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如讲 PPT 的,讲 PPT 的不如听 PPT 的,听 PPT 的不如听汇报的,听汇报的不如决定的,决定的不如签字的”,由此可见表达能力在职场中的重要性。


· 业务表达

业务表达是指在自己工作的过程当中,对自己的设计方案进行阐述。大部分设计师会遇到一个困扰,当设计稿做完以后就不知道怎么去表达自己的设计理念,被业务方/面试官/老板提出质疑时,比如:“你这产品的设计为什么要用红色?”、“聊天信息这块儿为什么要用小气泡的样式?”,往往不知道怎么去说,有一种当时就觉得好看所以这样做了,也没有去想那么多的感觉,或者其他优秀的作品/竞品是这样做的,我也就这样做了;那么结果往往就是自己的专业性遭到质疑,然后转变成业务方/老板进行设计主导,形成“改来改去还是第一版好”这样类似的恶性循环中。



那么如何提升自己的业务表达能力呢?首先设计师要提升在设计领域的专业度,通过学习吸纳设计相关的知识,然后代入自己的设计当中去试着阐述设计稿,准备工作先做到位,收集相关的数据,掌握相对应的设计理论,先说服自己再去说服别人。比如:“通过色彩心理学得知,红色能带给人兴奋、激动、热情等积极情绪,而我们产品所需要透出的氛围是热情的、积极向上的,相对应地激发出用户的正向情绪,所以我这里使用红色。”、“根据近半年数据研究得出,产品聊天信息模块使用过程当中女性用户占总用户数的85.9%,而小气泡样式相对比其他样式更能迎合女性用户群体的喜好,通过 A/B 测试结果得出,使用小气泡样式后数据上涨了15%左右,所以聊天信息模块整体改版成小气泡的样式。”

通过自己前期的准备(设计理论知识补充、用户调研、数据测试等),将自己的设计理念表达出来,主导整个设计的方向,必要时可以理性地坚持自己的设计方案,毕竟无论是老板还是业务方,出发点都是希望自己的产品能做到最好最完善,只要你给出数据支撑和专业性的建议,他们一定都会采纳接受的,而最后你的能力和专业性也得到了对应的认可。


· 书面表达

我本人是强烈建议在能力达到一定程度的时候,通过写作来检视自己成果的。因为往往很多东西自己是明白的,但是写出来让其他人看懂是另外一种能力了。自己一段时间的职业经验总结、对设计的见解看法、自己独特的设计思维、一本书的读后感等等都可以通过书面表达出来,某个知识理论难的不是学习,而是将它教授出去,因为只有你想要把某件事说明白,阐述得其他人都能看懂,那么首先你要对这件事理解得很透彻,然后通过自己的经验和见解,转化成通俗的语言说给别人听。最好的状态就是与你同样级别的人你能与他用专业术语对话,级别比你低的人你能把理论转换成他能听懂的语言进行交流,这样才算是对理论概念理解透彻到位。

大家也明白,学习最有效的方法不是输入而是输出,设计也是一样的。在学习某种理论方法后,通过书面表达出自己的见解和想法,并代入到相应的例子当中,做到举一反三才能算是真正的学到了这个知识点。



· 述职

述职一般出现在晋升报告或者面试当中,“诸侯朝于天子曰述职,述职者,述所职也。”述职可以说是工作报告中的总结性报告。向自己的老板述职是为了升职加薪,向面试官述职是为了获取更好的工作机会;工作成果有了,但是述职做不好的话,在老板/面试官眼里你就做了无成效的工作,述职没有想象的那么简单,但是也没有那么难,很多人都会经历两个述职的误区,这些误区我经历过也看到过,所以总结出来警醒大家。


一、把述职当作流水账

把述职当作流水账是很多新人容易犯的错误,当述职的时候,有的人就会陈列出自己今年做了多少多少工作:“我今年改版了 XXX 模块”、“我设计了 XXX 的首页”、“我通过调查研究自主推导改版了 XXX 模块并落地成功”等等,这时候你的老板/面试官会心里会想:“所以呢?”“然后呢?”,工作结果固然重要,但是决定你能否晋升/录用的,不仅仅是把你做的工作进行流水账般的描述就够了的。


二、把述职当作邀功大会

这个误区相对来说更高端一些,述职的时候有的人常常会像邀功一样:“我今年通过改版了 XXX 模块,导致用户量从50%上涨到了80%”、“通过调查研究改版了 XXX 模块,最后通过 A/B 测试发现数据上涨了5%,最后落地全部实施新的设计方案”,这些看似阐述了产品的背景、自己做了什么以及结果,但是往往来说还是不够的,以上统统可以归为无效述职。


你做了什么重要吗?没那么重要,重要的是你带了什么样的价值。述职所需要你做的,老板/面试官所想要了解的就是:分析为什么产品之前数据会那么低?你是通过那些方法得出解决方案的?为什么那么多种解决方案里你要选择这一种?你这样的方法能否沉淀成体系?如果换一个人来按照你的方法做是否可以得到同样的效果?有效述职也就是决定你能向上一步的,是把你在工作中的感性认知上升到理性规律的归纳总结的能力体现。


· SCQA模型

SCQA 模型是一个“结构化表达”工具,是麦肯锡咨询顾问芭芭拉·明托在《金字塔原理》中提出的,而这个模型可以套用在业务表达、书面表达以及述职任何场景当中;S是指场景(Situation),C是指冲突(Complication),Q是指问题(Question),A是指解决方案(Answer)。



无论你是在向业务方/老板阐述方案做工作汇报,还是自己写作梳理都可以用到这个模型;S场景陈述的通常是大家都熟悉的事、普遍认同的事、事情发生的背景。由此切入既不突兀交代了事情背景又容易让大家产生共鸣,产生代入感,然后引出冲突C。Q是其中发现的问题,最后A给出相对应的解决方案,是对Q的回答也是接下来我们要阐述的内容。整个结构其实是形成良好的沟通氛围,然后带出冲突和疑问,最后提供可行的解决方案。


我们熟知的广告词经常使用这个套路:

得了灰指甲——描述场景【S】

一个传染两——发生了冲突【C】

问我怎么办?——提出问题【Q】

马上用亮甲!——给出解决方案【A】


这个模型无论作为演讲的开场白,作为向业务方/老板阐述设计方案的开场,还是作为一篇文章的序言都是屡试不爽的。S场景需要让对方产生共鸣,必须让对方产生一种:“是的,你说的好有道理”的反应,只有场景被认同了才能继续故事的发展,这时候打破你给对方营造的安全感,制造C冲突,相继提出Q问题,共同确认面临的一个问题,然后你给出你的A解决方案,而这个解决方案就是你整个叙述的核心和中心思想。

比如你要向业务方/老板阐述你的设计方案,就可以这样来描述:“在 XXv2.0 版本上线后(交代场景),收集了近半年以来的数据发现,女性用户相对减少了20%(发生冲突),为什么会减少20%的女性用户(提出疑问),根据我的调查研究发现原因是改版后整个产品色调偏男性化,由于我们产品的受众群体大多是女性用户,男女比例为1:3,所以在 v.2.1 的改版中我将整个产品色调改为偏女性化的方向(给出解决方案)”。

同样,我写这个章节的思路就可以这样理解:设计师们工作中通常会面临述职、面试以及写文章等情况(交代场景),但是往往很多设计师不知道如何去表达,思路也不是很清晰,导致述职无效、面试失败等情况(发生冲突),要如何避免这种情况发生?如何锻炼自己的表达能力?(提出疑问),那就要多通过 SCQA 模型在生活工作中去练习表达(给出解决方案)。


生活能力(Lives)

最后是生活能力,设计不是工作的全部,工作不是生活的全部,我们应该过好自己的生活,产品设计都是从生活中获得灵感和启发的,我们如何对待自己的生活,我们就会得到怎样的反馈。多陪伴下自己的家人、培养一个兴趣爱好、保持学习新鲜事物的动力等等,成为一个有趣的灵魂。往往设计师能从多样化的生活中发现灵感和启发,也能从生活中找到不同用户的痛点和感知;如何做一名好的设计师,就是带着同理心去做设计,如何带着同理心做设计,就是将自己当作用户,而用户是融入到生活中的。下面我就来例举两个通过生活中的启发改变产品设计的例子。


· 用户拥有感

在购买星巴克的时候,为什么服务员要把顾客的名字写在杯子上呢?难道仅仅是为了分辨嘛?像其他奶茶店一样贴一张打印好的便签不就好了么?去宜家购置家具的时候,为什么要让顾客自己亲手组装家具?可口可乐为什么可以定制自己城市的易拉罐?因为这一切都是要给用户塑造拥有感,人是一种很不理性的生物,只要先拿到一个东西,就会觉得自己拥有这个东西,就不想放掉它了,这就是拥有感最根本的示范。从心理学的角度来说这被称为禀赋效应,意思就是我们对于自己所拥有东西的价值往往会看得更重。这就是为什么小时候玩的玩具、收集的画册、穿的衣服都已经没什么用了,我们还要留着当纪念的原因。因为我们的人性对于拥有感非常执着,对于自己得到的东西非常迷恋,当我们觉得要失去它的时候,会有一种损失感,觉得很不舍,会觉得心里很难受,这就是禀赋效应在我们身上发生了最明显的效果。



而这样的营销策略被用到产品设计当中,例如前段时间很火的软件 Zepeto,每个人都不一样的生成图片洗刷着我们的朋友圈;例如每年年末的账单、网易云音乐总结等等,账单它只是一份账单,根据不同用户生成不同的账单,也就赋予了不同的意义;又例如各种 H5 性格测试生成的分享卡等等,这些都是产品设计中从生活中营销案例中汲取经验的体现。


· 线下导购转线上

每当我们去到商场线下商店的时候,导购员和我们素未谋面,但是却可以通过我们的大致年龄、穿着、性别等因素推断我们需要什么样的产品,然后向我们推销对应的产品,如若刚好触动我们的需求,于是我们就会发生购买这个行为。生活中线下导购的方式也被运用到线上导购的产品中,同样平台和用户素未谋面,可是可以通过掌握大数据,分析用户近半年、近一个月的购买和浏览商品的数据,结合相对应季节等因素推送给用户所需要的产品。比如我平时经常浏览一些潮牌个性的衣物,现在正值冬季,想买一件冬季穿的棉衣,那么当我打开淘宝的时候,系统会推送一些潮牌大衣等冬季衣物在首页,我正好有这个需求又符合我的口味爱好,自然而然就会点进去购买了。



有一条创业准则是这样说的:“如果有点儿闲钱,还有点时间,但又找不到商机,最好的办法就是去闹市、电梯、小区人流量最高的那个大门口,端杯茶,静静的听人们抱怨。”,谷歌、苹果公司的设计思维首当其冲的就是带着同理心去设计、去制定设计策略,同理心来源于生活,而这一切只有设计师把自己的生活经营好,才能从当中获得启发和感悟,然后代入自己的设计理念当中,设计出真正能根本解决问题的产品。

其次偶尔会从网上看到或者听说 XX 设计师猝死,XX 设计师检验出 XX 疾病等等,每每看到此类消息都会感到痛心,工作不是生活的全部,如果连自己的工作和生活都处理不好的话,那么说明这个人生活能力真的很糟糕。如果一个人整天筋疲力尽打不起精神,那么他的工作会做得好嘛?所以在这请求大家合理安排好工作时间,劳逸结合,多锻炼身体,多花些时间陪伴父母、家人,这样才能带着健康的身心去工作,从而取得更好的工作成果,形成一个良性的循环。你怎样对待生活,生活就会怎样对待你。

作者:雨灰    来源:站酷

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

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

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


如何让你的图标具有说服力?

纯纯

一、图标的定义及分类


1、图标的定义

图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息,并且常常和词汇、文本搭配相互搭配使用,两者互相支撑,或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。

在数字设计领域,图标作为网页或者UI界面中的象形图和表意文字而存在,是确保界面可用性的基础设施,也是达成人机交互这一目标的有效途径。



2、图标类型(基于功能划分)


2-1释意性图标:

释意性图标是用来解释和阐明特定功能或者内容类别的视觉标记。它并不是一定被点击可交互的UI元素,在很多时候只是有辅助解释其含义的文案。在不搭配文本的情况下用户会借助这些图标来获取信息。不过有时候图标表达的含义可能还不够完整或者清晰,所以会将图标和文案搭配起来一起使用,这样可以大大降低误读的可能性,释意性图标一共可以分为以下三类:


2-1-1纯图标:

例如火球买手APP中的店家“特定标签”,以及图文展示下的“观看数量图标”与“收藏图标”,它们并不需要用文字去解释,用户也知道它表达的是什么。




2-1-2图文结合:

例如造作APP中的“购物车图标”与“收货地址图标”,为了让用户能够很好的明白图标的意图,所以在图标下方会配有文字提示,这样就能大大的降低误读的可能性。



2-1-3纯图标(图标内含文字):

例如开眼APP中视频封面左上角“开眼精选图标”,它把图标与重要文字结合在一起展示给用户,看起来不仅十分具有个性,而且用户对其理解性也非常强。



2-2交互性图标:

交互图标的最大意义在于可以引导用户进行交互行为,是在产品中不可或缺的组成部分。它们可以在用户不同的操作手势下帮助用户执行不同的交互过程,这种类型图标也是APP中最常见的,常见的交互性图标如:搜索、底部标签、返回、点赞、收藏、扫一扫等。



2-3装饰性图标:

装饰性图标仅仅是用来提升整个界面的视觉体验,它并不具备任何功能性。这类图标往往是为了迎合用户的偏好与期望,通过丰富视觉体验的方法来增加内容的观赏性,这样不仅可以吸引并留住用户,还可以让整个用户体验更加积极,最为大家所熟悉的就是滴滴出行APP中的“小车图标”。




3、图标类型(基于基础样式+表现手法)

图标基于基础样式(线、面、线面结合)+表现手法(颜色、透明度、投影、叠加...)划分,一共可以分为20种类型,每种类型的展示方式也都各有不同。


3-1线性图标(6种)

线性图标通过线来塑造轮廓,在界面中App的图标尺寸并不大,所以如果线过于复杂,在小面积中过多的线会对识别性产生较大的困扰。在图标设计中使用的线有粗细之分,常用的App图标设计线的粗细一般有2PX或者3PX,不同的线条粗细所带来的视觉感受也不同,细线显得精致,粗线视觉面积大,显得厚重。



3-2面性图标(6种)

面性图标是通过面来塑造形体的图标,采用了剪影的设计形式,通过线或者面去切割基础轮廓面,通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。



3-3线面结合图标(6种)

线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说,由于元素的多样化,设计更容易获得好的效果。相反,如果运用不当会显得图标非常杂乱,如何有效的把控好两者之间的过度是关键。



3-4拟物化图标

这类图标的特点是通过细节和光影还原现实物品的造型和质感,能给用户极强的代入感,用户可通过对现实事物的联想,快速领会图标表达的意图。但是随着 ICON 的发展,拟物图标也带来了一些问题,因为用户关注的核心永远都是信息本身,华丽的视觉元素或许在用户使用的初期,起到赏心悦目的装饰,但久而久之,这都将成为对用户获取信息的一种干扰,所以现在拟物化的图标很少运用在APP界面之内。



3-5轻质感图标

相较于拟物风格不会有太多复杂的视觉元素,层次简单,用色素雅干净,采用轻投影、轻渐变的方法设计,这类图标具有一定的立体感,能给人轻盈、简洁、精致的感觉,在界面设计中,一般在面积比较大的区域我们会使用加入轻质感的图标。




二、图标设计规范


合理的遵循图标规范可以有利于设计师之间合作使用,指导设计师如何规范的去设计图标,以确保企业所有产品图标风格的一致性和可用性达到统一,同时也是为了后续产品更新迭代有可参考的地方。


1、图标尺寸

为了保证图标的尺寸大小一致性,我们往往会建立基础的网格尺寸来进行绘制图标,常用的网格绘制尺寸为:16、24、36、48、64、128、512、1024。这些尺寸并不是固定的,在设计中也会存在特殊的尺寸,例如谷歌在台式机上设计图标,当鼠标和键盘是主要输入方法时,就会使用密集布局,基础网格就会缩小到20。

下面就以常用的24x24为大家展示:



网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域,同时还能够很好的平衡图标的视觉重心。



*在使用常规图标时避免一部分在出血位。



*在使用多个元素的图标时,避免图标拥挤我们可以让其部分出现在出血位,确保它们之间有足够的空间。



2、图标的keyline

keyline由圆形,正方形,矩形,正交,三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易,并有助于在设计相似比例的图标时有共同的参考准则。


在24尺寸下的keyline构成如下(24尺寸下的出血区域为2):



当把图标画在网格上时可以很好的规范图标,让它们从整体的视觉上看着统一规范。



3、像素


3-1像素统一

在设计一整套系统化的图标时,我们一定要注意图标的像素大小,要运用相同的网格尺寸设计相同线条粗细的图标,包括曲线,角度以及内部和外部笔划。这样图标看起来才更统一,也有利于后期图标的迭代更新。



当然,描边像素的粗细并不是绝对的,如果我们要做一些密集型的图标时,可以考虑适当的缩小线的像素大小。如下,我们设定的系统图标线条粗细为3px,当你用3px作用于指纹图标上时就会显得非常拥挤,并且在视觉上比其余图标更重,这时我们就可以把它的线条像素降级,设定为2px。



3-2避免小数位

我们在用矢量工具绘制图标时,要仔细看好图标的网格尺寸和图标结构尺寸,避免产生小数位。



4、图标的曲率

曲率简单来讲就是图标中带有圆角的边角度数,只要是带有圆角的矩形就都会有一定的曲率。在图标中曲率的呈现方式有两种:外曲、内曲。



外曲与内曲并不一定同时存在,在特定情况下内部结构可以是直角(无曲率)。如下图:当内部结构都是圆角时会发现整个图标稍显臃肿,这时我们可以把部分内部圆角直接变为直角(也可以改变曲率大小),改变后就会发现图标的整体结构会显得更加协调。需要注意的是如果一个图标做了这样的处理,在同等情况下的图标都要做一样的处理,不然图标会显得非常杂乱,不统一。



5、倾斜角度

根据像素的网格线来设置两条对角线,会让你的图标看起来更清晰。在倾斜的角度选择上,不要出现7.8°、14.2°这样的奇怪数值。我们可以将15°的增量用于倾斜角度(也可以采用其他有规律的角度方案),这样会使得整体的图形变化显得更加规律,也能够满足不同图形的角度需求。




6、断点形态

在做很多图标时都会用断点的缺口来打破“全包边图标”的沉闷感,使图标具有透气性,如果想给图标添加断点,那么要保证断点的形态保持一致。



7、图标间距

确保图标内每个细节和元素都有足够的空间,图标的相邻元素之间的空间在整个图标中不应太小,我们可以定义最小间隙以避免轮廓“粘住”,在24px尺寸下的间距不得小于1px。



8、透视

如果在做图标时牵涉到了透视需求,那么就一定要保证图标的透视角度一致。



9、视觉重心

非中心对称图形物理对齐时视觉上会有偏离感,多个不同形状的图标视觉重心并不在一条水平线上,需要微调才能保证平衡感。



10、图形整洁

在图形的处理上,不要留有多余的节点,干掉多余的节点,保持图形的整洁。



11、命名

ICON命名要求较为严格,涉及到我们切图给开发,所以我们命名争取做对,且需严格遵守规则,正确的命名原则:类型_位置_功能_状态_大小




三、图标的性格走向


每个App应该有自己独特的产品气质,同样图标性格也应当与产品气质保持一致。图标性格一共分为了4个走向:粗旷(粗直)、活泼(粗圆)、商务(细直)、精致(细圆)。



1、粗旷类图标

图标结构特点:线条较粗(或面性图标、线面结合图标)、拐角为直角。

粗旷类图标让人看起来非常饱满、刚正,它更多适用于男性、潮流、有格调类型等产品中。例如VSCO,它的底部标签栏图标全部采用了粗线条的直角设计。



2、活泼类图标

图标结构特点:线条较粗(或面性图标、线面结合图标)、拐角为圆角。

活泼类图标让人看起来十分容易接近,能让人感受到温暖、舒适,它更多适用于电商、社交、母婴、二次元、娱乐、直播、美食等产品中。例如闲鱼,不管是在LOGO字体的处理还是APP内部的图标处理,都是采用了线条较粗的圆角设计。



3、商务类图标

图标结构特点:线条较细、拐角为直角。

商务类图标让人看起来十分规矩、严谨、值得信赖,它更多适用于新闻、政府、商务、工具等产品中。例如工具类的思维导图APP,它的可操作按钮都是商务类的图标。因为这类图标的特性,所以目前我们很少在移动端上看到它,它更多适用于PC端的后台界面中。



4、精致类图标

图标结构特点:线条较细、拐角为圆角。

精致类图标让人看起来非常干净、柔和、显得高级感,它更多适用于旅游、奢侈品、艺术、领域垂直等产品中。例如airbnb,在APP应用中大部分都采用了精致类图标。




四、图标的评判标准


当图标设计完后,我们应该如何去评判一个图标的好坏?很多设计师并没有完整的评判体系,其实我们可以从这五个维度对图标进行评判:识别性、图标气质、协调性、一致性、品牌调性。


1、识别性

图标最主要的用途就是辅助用户理解信息,特别是对于当图标单独存在时,一定不能让用户产生疑虑。要想图标达到高识别,我们可以从这2个方向入手:大众认知隐喻、真实世界映射。


1-1 大众认知隐喻

在互联网普及的今天,许多界面的隐喻图标已被广大用户熟知认可,对于这类隐喻图标用户不用思考身体就已做出反应,我们在设计图标时可以从隐喻图标中添加修改部分元素,从而形成新的图标,这样既能保证图标的识别性,也能做出差异化。




1-2 真实世界映射

选择真实世界中的物品映射,能使人下意识对图标的作用有近似预期,降低学习成本,提高识别度。




2、图标气质

每个App应该有自己独特的产品气质,而我们所做的图标就是要跟随产品的气质。例如当你要做一款二次元产品,你的图标气质就应该偏活泼、可爱、萌、青春,而不是刚硬、严谨、规矩。



3、一致性

一致性是图标的基础,我们在绘制整套图标时要确保它们的基础属性全部一致,细节统一,图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性,就要从以下七个方向去评判:尺寸大小、图形角度、拐角(曲率)、描边、间距、透视、颜色。


3-1 尺寸大小:网格大小是否统一、是否遵守图标的keyline规则。


3-2 图形角度:是否遵循设定的角度规范(15°的增量用于倾斜角度)


3-3 拐角(曲率):拐角的曲率是否统一,如果图形太多且复杂,那么我们可以根据图标的特性去设定曲率的规则,例如可以设定当边角像素在1-2px时内外曲率为2px;当边角像素在3px时内外曲为2px,内曲为1px;当边角像素大于或等于4px时,外曲为2px,内部则为直角。


3-4 描边:描边大小是否一致。


3-5 间距:是否遵守间距规范。


3-6 透视:透视是否一致,避免在同一套图标中出现正视图/侧视图混杂的情况。


3-7颜色:在图标的配色上要保持一致的规律,采用相同的颜色是比较常见的配色方式。如果采用不同色相的配色方式。也需要保持整体的配色协调,避免出现饱和度、明度反差过大的配色。



4、协调性

一致性代表的是图标的基础,而协调性则代表图标的整体状态,协调性的呈现状态是验证一致性是否合理的标准,当协调性存在问题时,我们就要反过来查看一致性存在的误区并给予修改。在图标的协调性上我们主要审视这三点:视觉大小、饱满度、透析感。


4-1 视觉大小

视觉大小对标的是一致性的尺寸大小与描边大小,当你发现图标视觉大小不对等时,你就要回过去查看你的网格与keyline是否运用正确,确保正确后再查看你的图标是否按照keyline的规范绘制以及描边大小是否一致。(同样尺寸下的图标,从光感上来看描边粗的图标视觉偏大)



4-2 饱满度

饱满度对标的一致性的间距,当你发现图标不够饱满时,你就要去查看你设定的间距值是否偏大,是否合理。



4-3 透析感

透析感简单来说就是留白区域。透析感对标的也是一致性的间距,当元素的描边过大时,我们就要合理的设定间距的最小值,不然整个图标就显得非常臃肿。



5、品牌调性

品牌调性是我们经常提到的纬度,我们打开很多APP都会发现他们的图标设计都非常普通,没有任何特色,过于大众化,虽然都做了一些形式上的改变,但总是与品牌缺乏联动性。其实我们可以结合品牌调性,在图标上做更多的联动、创新。


5-1品牌颜色

色彩是图标设计中重要的构成元素之一,我们可以直接提取品牌色作为图标设计视觉元素。例如站酷,站酷的品牌色是黄色,标签栏的图标(选中状态)就提取了品牌的黄色,让其与品牌调性高度一致。



当然品牌颜色除了可以直接用外,还可以在提取时适当调整色彩的饱和度、明度,做更多的形式变化。例如懂车帝,就在原有的黄色基础上做了些许调整,图标采用黄色透明渐变的处理方式,在与品牌颜色呼应的同时,使得整个图标更加精致、有活力。



5-2品牌LOGO

提取品牌LOGO是最常用的使用方式,我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面,也是进入APP默认的页面,把首页图标替换成品牌LOGO,能反复加强了用户对App的logo印象,这样不但使App内外形成了视觉联系,同时也二次传递了品牌形象。例如大众点评,它的首页标签就用了品牌LOGO。



5-3品牌元素

我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播,它就提取了品牌卡通形象的外轮廓作为首页图标。



品牌提取的元素并不只是所见到的品牌视觉形象,还可以提取与品牌内容强相关的元素。例如QQ音乐,就把音符作为首页图标。



5-4品牌名称

如果你的品牌还不为大众所熟知,那么为了强化用户对品牌名称的认知,可以把品牌名称直接放入标签栏中。例如MONO,就把它的名称分为四个字母分别放在了4个标签内,需要注意的是这类图标不能单独出现,因为它本身不具备引导含义,必须配合文字一起出现,这样才能让用户能易理解。



5-5品牌性格

图标风格可以与品牌性格保持一致,一套带有浓厚品牌感的图标,会让人记忆犹新。例如:每日故宫,它的图标就非常具有特色,结合了品牌的性格以及定位,加入了众多的古代中国元素,整体看起来有股浓浓的古韵之风。



5-6吉祥物 

如果品牌中含有吉祥物,我们可以提取吉祥物的外形,把它用于产品的图标中。例如盒马,它就把盒马的吉祥物做了风格化的处理,放于APP的首页标签。




作者:黑狮力    来源:站酷

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

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

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

客户:要多、要大、要好看,能安排不?

seo达人

一、使用比较有特色的风格

既然粗暴、接地气的设计容易被人说成“土”,那么使用一种当下比较流行,或者比较有特色的风格,就能有效增加画面的设计感和时尚感。

图片

▲ 上图使用高饱和度的蓝色和绿色组合搭配,以及文字以背景的方式环绕在产品的周围,都是近几年比较流行的设计手法。

图片

▲ 上图使用扁平效果的描边色块来进行排版,既能突出文字信息、视觉效果也很时尚。

图片

▲ 把高饱和度对比色、扁平风、几何图形、文叠图等一些常在艺术海报中使用的技巧,用到促销海报中来,这种接地气的设计是不是也变得高级了很多?

图片

▲ 用波普风格设计促销海报,效果也是很亮眼的。

 

二、把文字图形化

有很多海报设计需求是以文字为主的,客户也并没有提供配图,如果只展示文字,效果很容易单调,这时就可以尝试提取文字中的关键词,设计一个图形符号与文字信息进行巧妙组合,文字与图形符号共同组合成视觉主体。

这么做既可以增加画面的美观性、视觉冲击力、形式感,同时文字的面积占比也不会被大面积压缩,保证信息的清晰易读。

图片

▲ 把文字与光线组合在一起,既突出了文字、也加强了画面的视觉冲击和美观性,同时,电子产品的品类调性也得到了体现。

图片

▲ 上图把文字与汉堡图形组合成一个主视觉图形,加强了画面的形式感。

图片

▲ 上图把文字与打板器组合成主视觉图形,打破了纯文字的单调感。

图片

▲ 上图把文字和图片放在一个外卖袋里,加强了设计的带入感和产品属性。

 

三、把文字场景化

其实这也是文字图形化的一种形式,只不过不是把文字与具像的图形符号结合,而是把通过把文字进行扭曲、变形、添加元素等方式,使其具备抽象的场景特征。

图片

▲ 该海报把主要信息组扭曲成墙面和地面的效果,创造出一个立体空间。

图片

▲ 这件作品与上图的设计手法有点类似,也不知道是谁借鉴的谁。

图片

▲ 上图把“敢为先”这个几个字拉大,布满月球后面的整个天空背景,就好似一扇巨大的城门。

 

四、图文组合

即把图片与主要文字组合在一起,共同形成画面的主视觉,而不是相互独立,把文字当成图片的配文,常用的图文组合方式有图叠文、文叠图、图文交叉等。

图文组合的设计方式可以加强图文之间的联系和对比关系,使画面更整体、更聚焦。

图片

图片

图片

图片

 

五、加入人物或动物插画

如果版面中只有文字,或者只有文字和产品图片,那么版面都容易显得无趣、缺少细节,在画面中加入人物和动物而可以增强代入感和亲切感,不过这类实物素材都有版权,而且比较常规,而改成插画素材就可以有效解决这一问题。另外,最好要让这些插画元素与文字或产品发生互动。

图片

▲ 上图加了一个卡通的厨师以后,除了画面更生动、更有趣,也会给人一种值得信赖的感觉。

图片

▲ 上图的排版和形式其实比较普通,但配上搞怪的插画后,海报变得有趣了许多。

图片

▲ 版面上方的熊猫加强了海报的吸引力和趣味性。

 

六、精致的排版和配色

下面的这些促销海报并没有特别的风格、巧妙的创意,也没有新意的设计形式,只是通过精致的排版和漂亮的配色,把大量的文字和图片素材合理地编排在一起,效果照样不错。

图片

▲ 信息虽然很多,但是层级分明、清晰阅读,大量使用色块进行排版,而且在编排上有很多细节的变化,颜色为类比色组合。

图片

▲ 图片和配色很有食欲,文字排版简单、清晰,但又通过不同的色彩、字体、字号、修饰手法将不同信息进行鲜明的层级区分,文字与图片有关联但互不干扰。

图片

▲ 外边框的处理以及版面中的圆点底纹使版面显得更精致、更有设计感,版面虽然排得很满,但是主次分明、信息清晰易读,三组食物所搭配的文字虽然不大,但是细节满满、井然有序。

图片

▲ 大量的手写字体给人一种“纯手工制作”的感觉,与朴实无华的产品形成呼应,文字全部集中排在版面的上方和下方,而中间区域完全留给了产品图片,视觉对比鲜明。

 

图片

抛开客户的需求以及效果谈设计的美观性就是耍流氓,把文字缩小、加一些没什么意义的英文、使用一些酷炫的排版技巧,可能会让你的设计更精致、更洋气,但如果抛弃了客户的需求和消费者真正关心的东西,那么我们并没有真正解决问题,如果客户要大、要多,那么我们就争取给他一个又大、又多、又好看的方案。


作者:葱爷

转载请注明:学UI网》客户:要多、要大、要好看,能安排不?

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


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


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


B端产品设计思路&高频设计要点笔记

纯纯


★目标导向·B端产品的商业目标


设计开始要了解设计的目标,用户的行为都是有「目标动机」的,B端产品的业务目标往往都是为了为企业或个人为了解决某一项工作上的问题。
当设计过程以「目标」为出发点,可以增强设计判断力,输出更有效设计解决方案。


B端产品的设计原则:提高使用者的工作效率,同时降低业务链路的操作及学习成本。

当你有了目标以后你的设计就可以围绕这个目标展开:



★设计价值·B端的设计价值体系搭建


对于B端的产品而言,用户最关心它能为实际的工作带来哪些便利,而并非这个界面做的多么的好看,以及用户体验多么棒。所以B端产品设计价值优先级往往是  功能性>表现力



B端产品设计需要站在整个业务线全局角度去把控各个设计点,不再是「用户体验」至上,为实现「任务目标」,「牺牲」一部分「用户体验」是必要的,这个时候视觉和一些体验就不那么重要了。通过调研业务去了解各个角色职能的工作流程、相关痛点,让产品能用,好用。



要点1·了解项目的业务流程


理想的B端设计需要了解业务目标以及业务链路中每一个环节的过程。将业务逻辑理解透彻再考虑应该如何进行设计实现。

这样做的原因当你站在使用者的角度进行同理心设计可以更好的帮助用户完成他要完成的工作,从而提高效率。产品原型一般基于「功能」本身,而设计师从用户实际场景规划用户的任务流,可以优化产品逻辑,补全缺失场景,通过了解业务流程也能给予创造性解决方案




要点2·用户调研与场景化设计思维


B端产品往往是是服务于企业用户,用户画像需要专注于用户特征中的「群体职业身份」这类人无论性别、年龄、地区有何差异,他们都是一类角色,我们的产品要提供给这类角色使用,而不是某个人使用。



由于B端设计师不是产品的用户,无法沉浸在与用户相同的真实场景中,建立共情。所以设计师最好亲自感受一下业务流程,获得一手的用户洞察,


获取B端用户反馈的方式

「通过业务人员交流」业务人员可以帮助我们快速高效的描绘出典型客户案例的用户画像。
「实地走访」:观察在自然状态下用户如何完成工作任务,并提问题:「你怎么做?」或者「为什么这么做?」
「建立种子用户群」:聚集活跃的种子用户群,收集意见和建议,并在群里验证设计想法。
「亲身体验」:成为真正的客服小二,接听客户电话,记录自己在工作台场景下的真实体验和感受。

获取用户画像后了解该群体背后工作感受,行为习惯,以及任务类型。





要点3·情感化设计心理


安全感和信任感建立:人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息,请确保使用字段下方的注释文本解释为什么需要这些信息。


实际工作中我们曾经自动获取过用户之前表单中填写的的支付类账户信息,在收集的用户反馈中,用户会感觉到隐私正在泄露并让用户信任感降低。所以即使用户输入体验会更好,但是考虑到信任感,敏感类信息请不要自动获取。


让用户感受到你正在帮助他操作:Jakob Nielsen于1994年提出的十大可用性原则中,其最后一条原则Help and documentation(帮助性指导原则)是搭建B端用户帮助体系的核心准则,在理想情况下,没有帮助文档就可以使用系统是最好的,但在某些情况下(尤其是B端系统),提供一些引导性的帮助其实是必要的。


B端系统中可以尝试搭建用户帮助系统:




要点1·降低学习成本


对B端产品来讲,设计师在设计的时候是不需要耗费太多的思考的,只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲,其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。



要点2·保持高效


例如修改资料的时候,使用弹窗、浮层等等交互操作会减少页面跳转的频率。

但是与此同时,减少页面跳转并不代表真正的高效,例如瑞幸的供应商系统,供应商所产生的订单需要按照指定的流程一步步进行操作确保不会出现问题这样虽然页面的跳转增加,但是可以避免操作出错给用户带来更大的困扰。



要点3·整理信息/引导视觉


设计要根据用户的浏览习惯和视觉动线。要尝试引导用户的视觉,举个例子,如何引导:




设计侧核心要点


B 端产品是以业务为核心,是需要用户长时间操作并完成工作任务的,对于操作和展示内容无关的元素,越少越好。视觉为功能让步,追求简洁、清晰、克制、理性的视觉风格。设计语言尽量做到不干扰不打扰。



要点1·表单设计


输入顺序:先易后难;先必填后选填;先公开信息后隐私信息;有关联性的合成一组,特殊问题后置,用户输入时、不会觉得突兀、门槛太高 。

自动对焦(PC端)进行表单页面,自动对焦第一个输入字段可以引导用户开始进行输入。

标题:标题是对下文最短最精的概括。用户一般都会跳过表单内容,而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。
用户应该可以看一眼标题就知道他们应该怎么做,而不是非得把剩下的全部看完,
(附:这部分感兴趣的同学可以搜索“微文案设计”)

在表单编写方面,或者说各种写作中,删减词语都要比添加词语更加有益。 在仔细检查不必要的词语后,文章会更笃实,更连贯,更吸引人。



这个链接有什么用?关闭是点击右上角的按钮吗?如果并没有增效,那就是减效。每一个字,每一张图片,都不是100% 必需的,这些都会降低你表单的转换率。

删除一个字段,表单提交率就可以提高 26%。(本篇笔记原本有12000余字,为了避免浪费大家时间,我仅保留4000余字的高频要点内容)


PC端产品提示文字尽量不要放在框内

提示文字存在于框内常用在移动端,它的空间占比很小,对移动端的小屏来说,是非常友好的,但如果在交互上处理不好,会有很大的缺陷。

内部标签结构,只有提示性文字,用作提示用户应该输入什么内容,但用户在输入的时候,内部的标签/提示性文字就会消失,这时候,用户会失去它是否输入准确的唯一判别标准。


减少打字需求

字段输入通过部分人工智能自动将操作步骤可以变得简洁高效 ,也包括诸如一些、自动定位、图片识别、自动获取,第三方导入等方式来使用户的效率得以提升的功能。
打字是在线表单中最耗时、最密集的部分,而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能,将减少工作量并提高转化率。



使用文本块

文本块会更容易让用户记住内容:例如银行账户、电话号码等等。它指的是将信息排列成「块」的过程,使内容更容易保留、处理和回忆。一份研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。


表单的提示文字和定义格式要求

如果一个字段需要特定的格式输入,请告诉用户。例如密码要求、语法规则、编号间距等等。



用输入框长度提示

可以用输入框长度提示用户输入的内容是否正确。
德莱厄斯研究所的可用性研究发现,如果一个字段太长或太短,用户开始怀疑他们是否正确理解了标签。


在用户输入的时候,右下角告诉用户已经输入了多少字,如果超过 限定字数后输入框红色,用来警示用户,此时用户依旧可以再输入字符,但当出现警示,用户继续输入一定数量字符后,系统需要强行限制无法输入新的内容,避免用户没有察觉到警示反馈导致的过多输入,从而浪费的时间。


(该部分感谢酷友@sh9513 提出的反馈)


如果用户填写错误,向用户显示错误发生的位置,并说明原因。


单选框

如果你的表单里的选项少于5个可以列出所有选项供用户快速选择,当大于5个时候可以尝试用下拉框解决。
将第一个选项作为用户最有可能的默认选项,且是最安全的选项,提前预判用户的操作提升选择效率。排列方式推荐数直排列,竖直排列相对于水平排列容易读取和定位,提高用户的浏览顺序。



解释隐私消息

当前需要用户填写相对隐私的信息时,请给予解释这么做的原因及目的。


收集设计反馈

完成表单的设计后可以给业务用户进行简单的测试,并记录他们填写的时间收集反馈,以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。

最后在情感化设计系统里记得感谢用户填写或者反馈问题,因为用户是花时间的。所以请表示感谢。


要点2·表格设计

表格的设计围绕着「可读性」和「易操作」两个设计原则。设计易读,易扫视,易比较,易操作的表格结构是表格设计的首要目标。


列宽有三种常见处理方式:

1.  根据内容的极限长度给出足够的固定宽度;
2. 可以固定部分列的宽,其余列按百分比处理;
3. 列宽需要考虑最低宽度/最大宽度/文字极限状态,内容为空状态显示方案;
4.需要设置列之间的最小宽度,表格响应式布局情况下最小不小于此宽度。

M-Densign规范中对齐方式会遵循如下规则:
表格的排序,应从用户目的出发,遵循用户查看数据的习惯,尊重数据之间的关联性,设计用户查看、操作数据的路径,而非随机排列(这部分可以在业务侧调研时验证,提高用户体验和阅读效率)。


1. 文本信息/混合型文本左对齐,符合从左到右的阅读习惯;

2. 数字信息右对齐,方便数字之间的直观对比;

(该图片感谢好友@晴蓝 同学反馈的一个错字,图片已修正)


要点3·按钮设计

设计规范需要定义按钮的四种状态:正常状态(Normal)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)



B端产品的开发一般涉及多个开发团队协作,例如瑞幸的后台修改按钮颜色,都可能牵动10+工程师的协同。

所以B端产品在进行设计改版以及设计侧调整时候要思考调整对于业务侧是否有直接帮助,在设计和规范建立之前,切勿频繁改动。


除了完全独立设计开发的项目以外,还有大量的 B 端项目是采用第三方框架开发而成的,如 Ant、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力。

作者:Cesare_玄漓    来源:站酷

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

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

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




日历

链接

个人资料

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

存档