首页

情感化层面解读微信“拍一拍”的价值

seo达人



2020年6月17日,微信发布了新版本,上线了“拍一拍”功能。从上线之初火遍每个社群,到现在迅速沉寂下来,这种变化应该也在很多人的意料之中。那“拍一拍”的价值点到底在哪里呢?我也来给大家说道说道。

文章的主要内容包括:
01、“拍一拍”功能定位
02、功能拆解
03、体验设计分析
04、“拍一拍”价值分析

 

01功能定位

张小龙朋友圈:“微信史上仅需一行代码的有趣功能终于来了。拍一拍,像蚂蚁一样打招呼。”
图片
从张小龙的描述中,拍一拍功能定位是一种打招呼方式,而且希望带给用户更加有趣的体验。

 

02功能拆解

社交本质上是人与人之间的信息传递,这其中包括两大节点,信息的输出和接收。所以我们就从这两个维度去分析下“拍一拍”功能。

 

1-信息输出
操作方式:用户只要双击对方的头像就可以完成拍一拍行为。

 

操作反馈:
1)对方头像晃动,伴随着手机震动,同时聊天界面中会出现提示文案,“你拍了拍xx”。

 

2)如果对方不再是用户好友时,“拍一拍”在显示文案信息基础上,还增加了朋友验证的提示信息。
图片

 

3)当用户退出对话框时,拍一拍的对话栏会根据信息时间重新排序,类似于消息排序的逻辑。
图片

 

2-信息接收
信息接收主要包括以下3个场景:聊天列表、对话框、信息刷屏状态。

 

1)聊天列表

当别人拍了拍我们,或者别人拍了拍别人,我们都不会收到任何提醒。为了让用户有所感知,同样会根据更新时间顺序将对话栏显示在聊天列表中,同时列表会展示拍一拍文案信息。

图片

 

2)对话框
当用户打开对话框时,头像会晃动两下,并伴随着手机震动。让用户明显地感知拍一拍信息。

 

3)历史消息
当聊天界面内容较多,“拍一拍”的信息被刷屏了,那该怎么办呢?
不用担心,微信考虑的很周全,当用户上翻聊天信息时,内容显示到“拍一拍”文案时,手机也会发出震动反馈,保证用户无需仔细阅读信息内容,即可快速、准确地感知到“拍一拍”信息。
此外在用户行为方面,“拍一拍”玩法没有做出限制,用户可以自拍,别人互拍及自拍,并且文案信息都会呈现在对话框中。最大限度的激发用户互拍的欲望。

 

03体验分析

1)简单
微信作为重要的社交工具,一直在孜孜不倦的追求简单的玩法。所以“拍一拍“操作简单,只需要双击用户头像即可实现,这也是能够掀起全民互拍狂欢的基础条件。

 

2)轻量
拍一拍作为弱提醒方式,其实是对现有信息提醒方式的补充,强调点到为止。尽可能减少社交信息给用户带来的心理压力。

 

3)感知
为了激活用户交流,需要保证用户对信息的感知。因此在对话栏排序上参照文字消息的逻辑。而打开对话框时、微信群消息等场景中增加了震动反馈。

 

4)有趣
“拍一拍”丰富了微信的沟通方式,在文字、图片、语音等信息形式基础上,增加了现实生活中的行为方式,形成了更强的行为映射。所以引发了一波“拍一拍”浪潮,也被广大网友玩出了新的高度。
图片
(图片来源于网络)

 

04价值分析

1-用户侧价值
张小龙说,“微信的梦想是什么?从个人角度成为人最好的一个工具朋友。从平台角度,建立一个市场,让创造者体现价值。”
那请允许我推测一下“拍一拍”对用户的价值。

 

1)新的社交礼仪
现在的微信消息提醒方式包括对话栏角标、群内@,强提醒等形式,这些形式都让用户都无法忽视。特别是一对一沟通时,红色的角标如果一直存在,可能会逼死强迫症患者。但是一旦打开消息界面,你又无法忽略信息的内容。因此之前就有人提出增加一个信息置底功能。
而“拍一拍”作为一种轻量级的打招呼方式,或许可以成为微信社交中新的选择。例如在微信群中,如需非紧急必要的事情,可以在信息之后,拍一拍对方,表示这条信息是专门发给他的,让他能够接收到就可以了。而不需
要采用@的方式,减少对用户带来的信息轰炸和心理压力。

 

2)快速回复
未来“拍一拍”可能会成为一种快速回复方式。
当前交互方式中,文本信息方式用户成本最高;图片、表情方式可能无法准确的表达回复内容;语音、通话过于沉重,对环境要求也较高。因此微信需要创造一种更加快捷的方式满足简单回复的需求。
而拍一拍,可以轻松的实现这一点,拍一拍对方即可表示消息反馈,又减少了用户交互成本。

 

3)情感化表达
现实生活中,拍一拍包含了各种情感信息。
例如当我们需要与别人打招呼或者沟通时,可以通过“拍一拍”、“戳一戳”等接触方式,引起别人更强烈的注意。
又比如当我们跟别人沟通结束时,可以拍一拍对方,给予鼓励。或者说一句“没事的,以后肯定会更好“、顺手拍一下对方,表示理解或感同身受。
同样作为现实生活的映射,在微信聊天过程中,我们可以借用“拍一拍”,更加充分的表达情绪,而震动反馈或许能够让对方更加真切的感受到我们的关爱。

 

2-产品侧价值
1)促进版本升级
“拍一拍”需要升级微信版本才能使用,当全民都在拍一拍时,你是无法视而不见的。因此可以更好的促使用户主动升级版本。

 

2)激活微信群
“拍一拍”上线后,很多沉寂已久的微信群开始“复活”了。大家都在主动的尝试新的功能,而且网友们还玩出了各种花样。而这仅仅只需一行代码的投入就做到了,可以说价值巨大。
 

总结

我们都知道,微信是极具克制理念的产品,微信每天都拒绝着大量的看似合理的用户需求,张小龙有着自己的设计理念。此次“拍一拍”功能对用户的行为也做到最轻量级的影响。
或许“拍一拍”只是一次新的尝试,最终会随着新鲜感的丧失,成为用户眼中的“鸡肋”功能。但是这其中带给我们的启示,是值得我们深入思考的。

 

原文地址:子牧UXD(公众号)
作者:子牧先生

转载请注明:学UI网》情感化层面解读微信“拍一拍”的价值

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

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


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

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

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


设计师的项目管理意识

seo达人


项目协同与执行的过程中总感觉节奏乱?对于项目缺乏整体的规划、每次设计过程中付出的成本很高。对结果验证时发现不论设计质量还是效率都还有很大的提升空间。设计感觉做的不错,但项目中的角色话语权不高?多个项目并行不知如何管理操作,有无标准方法,怎么从中创造更大的价值?本文结合日常项目管理当中的一些思考与方法,带大家了解设计师需要有的项目管理意识。

 

如今设计师不再仅仅作为一个需求的接收方与执行方,职能更加的全面,在整个产品设计研发流程中也需要我们有更强的参与度。最近工作中得到一些设计同学的咨询并参与围绕着一些项目中的问题进行讨论,比如:项目协同与执行的过程中总感觉节奏乱?对于项目缺乏整体的规划、每次设计过程中付出的成本很高。对结果验证时发现不论设计质量还是效率都还有很大的提升空间。设计感觉做的不错,但项目中的角色话语权不高?多个项目并行不知如何管理操作,有无标准方法,怎么从中创造更大的价值?本文结合日常项目管理当中的一些思考与方法,带大家了解设计师需要有的项目管理意识。

图片

a

01.好的设计能不能管理出来?能收获什么?

首先,我们思考一下,管理是什么?其实简单来说更像是很多标准化、流程化、格式化的方式方法组合,辅助我们更好的达成目标,并为整个设计团队构建一个基础的工作体系。项目中稳定与高效输出都来自于更加科学的管理。设计师链接上下游部门,也需要通过管理来解决诸多设计以外但与设计有联系的事务。对于我们的收获部分可以大致分成以下三点:

图片

· 目标达成层面

引导促成整个产品/项目的目标高质高效达成,使之利益最大化。

· 视角变化层面

能够让我们视角产生改变,能够更全局看待问题,让自己有大局观的同时更加拥有结构化的思维。

· 影响力与服务能力的提升层面

在项目中角色话语权提升,在团队内外有更高的影响力

a

02.项目管理我要管什么?

设计师运用项目管理的方法,个人认为最基本的就是要合理的规划与控制,管人管事,且贯穿在整个项目流程当中,以下几点其实我们可以重点关注。

图片

我们工作当中实际参与的流程,基本可以归纳为启动阶段、计划阶段、执行监控阶段、收尾阶段。

 

· 启动阶段

在这个阶段经常会使用到6W2H方法,它有助于我们思路的条理化,杜绝盲目性,所以此方法能够快速帮助我们确定目标、里程碑、项目成员以及合作模式,例如在此前的二手车大类页改版等大型改版项目中都有所使用。

图片

 

· 规划阶段

需求的梳理、排期、以及任务拆分、资源协调。我们可以尝试使用STAR模型来操作。而这部分在车业务的内部设计需求中也是在iWiki常态化留档的,以SITUATION(背景),TASK(任务),ACTION(行动),RESULT(结果)几个维度构成表的基本结构。

图片
图片

需求规划完毕需要考虑的就是内部资源协调,在专职项目、动态项目、创新项目中协调的原则上可以是:擅长人做擅长事,挑战与执行并存,提效最大化,成长最大化。

 

· 执行监控阶段

在此阶段,我们可能会遇到以下一些问题,产出效率不高、质量不高、反复修改或项目推进缓慢影响业务目标。这些情况或风险在很多项目当中都存在,风险并不一定是坏事,而风险大多数都是可以预测和管理的,我们可以多使用WWH模型和STAR模型结合的方式快速的辅助我们思考、记录、评估、计划、调整。在落实的时候我们会使用到iWork工具进行需求的变更、说明、同步,包括后续的进度跟踪与回溯,在项目的管理上非常直观易用。

图片

图片

 

· 收尾阶段

对于该阶段质量控制方面,我们引入了更规范的走查文档、共建集成体验环节、以及全职能自查环节。常规的设计走查介入方式如下:

图片

改变走查方式之后,增加集成体验环节与每个节点中的输入输出内容,保障每次项目的最终落地质量。

图片

在收尾阶段从项目管理的角度来说另外一个希望提及的是,除了事前有规划、执行有控制、更要注重事后收尾有总结。虽然每一次的项目可能过程会有一些不同、结果目标不同,但是我们在总结复盘的过程中一定要做到以下几点:

1.拒绝形式化,避免假大空反思

2.具备借鉴意义

4.对应解决方案,具体落实到人、功能范围、时间等

w

03.聊聊其它

其实我们可以发现既然是要去管理项目,在每个节点里沟通是非常重要的,可能很多设计师都会遇到一些沟通方面的问题:效率低、无结果、惧怕沟通。其实多数就是在信息通过传输渠道、媒介的时候,发送者与接受者在各阶段所暴露出的不同问题,如下图:

图片

 

· 我们可以怎么做呢?大家可以多从以下几点去思考

1.沟通前的思路整理以及相关案例或设计理论的支持

2.对齐沟通方的关注点与信息交集

3.灵活正确的处理意见与分歧,开放心态、开放式话术、气氛控制、善用询问等

4.总结与使用流程管理进行规划

5.建立设计师个人品牌可信度

以上为对日常设计项目管理工作的一些个人理解,大家可在实际的项目当中灵活应用,如对项目管理方面非常感兴趣的同学也可以去看看PMP相关知识,也欢迎入群多多交流。

图片

 

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

作者:环铁艺术家

转载请注明:学UI网》设计师的项目管理意识

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

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


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

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

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


5个技巧,让你的做图效率翻10倍!

seo达人



相信很多设计师都会觉得每天时间不够用,没有效率,没有收获,那么今天分享5个时间管理的方法,帮助你提升效率的同时,个人也能得到成长。请看今天的分享,enjoy it。

 

如何做好时间管理?

图片

网上流传一张王健林的行程单,可以看得出时间分配相当满,于是我就特别好奇,专门问了一些我们公司的高P,他们每天那么多工作,是如何去平衡生活和工作的,其中有一个很重要的点就是做好时间管理且自律

比如今天晚上8点要和孩子去看一个音乐会,就会在8点之前把所有的工作全部搞定,然后去陪孩子!是呀,厉害的人,能在某一个点把事情全部搞定,本身就是超强的能力,那么作为职场人,我们该怎么合理管理时间呢,今天分享6个小方法给大家。

 

方法一:番茄工作法 

番茄工作法是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。因为创始人使用番茄定时器,所以叫番茄工作法。

图片

 

如何使用?

选择一个待完成的任务,将番茄时间设为25分钟,专注工作,中途不允许做任何与该任务无关的事,直到番茄时钟响起,然后在短暂休息一会(5分钟就行),每4个番茄时段多休息一会儿。

这个方法为什么好用呢?我相信很多设计师和我一样,每次工作几分钟后就会玩玩手机,看看微信,一边听歌,刷着网站,同时做着几件事情。

这个就是明显的一心多用,不够聚焦,番茄时钟好处就是督促你在这个25分钟内,专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事,然后休息5分钟,再开始下一个番茄时间。

图片

当然你也可以根据你个人习惯来调整时间,我将番茄时间的25分钟改成了45分钟,这样有助于我更好的聚焦。比如我有一个需求时,我会花45分钟看完交互流程,45分钟去和开发还原开发细节,45分钟去收集设计灵感,45分钟去把页面框架搭建好,或者设计好一个局部等等,然后休息5分钟,让自己短暂休息下。

图片

 

合理拆解需求

学会拆解任务,设计师的需求有大有小,大的比如一个首页改版,一个设计语言的建立,小的有一个弹窗设计,一个图标绘制等等,那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解,才能用多个番茄时间段来覆盖整个项目,比如需要做一个首页改版,那么我就需要进行拆解任务。

图片

首页改版可以分成四个大的关键节点,需求讨论,设计风格探索,视觉设计,交付开发,然后每个大的模块下再细分小的任务,然后进行番茄时钟的评估,比如色彩收集我可能需要2个45分钟,那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务!明确到可执行的番茄时钟。

 

及时提醒

图片

每个25分钟或者45分钟的时间点提醒一定要及时,闹钟响了,停下手上工作,短暂的休息调整下,切忌继续一直工作下去,因为只有适当休息,我们才能更加高效,高质量的完成接下来任务。

 

听听白噪音

图片

很多同学在工作时,喜欢戴着耳机听着音乐,但是在使用番茄时钟时,我不太建议这样做,原因在于音乐会干扰我们思考,有时候音乐还会影响你的情绪,所以这个时候建议大家听听舒缓的白噪音,比如海浪声音、风声、雨声,我个人比较喜欢听海浪拍打的声音,能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具,叫番茄钟,里面除了设置番茄钟外,还自带很多白噪音,非常好用!

图片

 

方法二:四象限时间法 

美国的管理学家科维提出的一个时间管理的理论,把工作按照重要和紧急两个不同的程度进行了划分,基本上可以分为四个“象限”:

1.既紧急又重要:

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急:

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要:

如取快递、部门会议等

4.既不紧急也不重要:

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务,按处理顺序划分:先是既紧急又重要的,接着是重要但不紧急的,再到紧急但不重要的,最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

图片

 

既紧急又重要

设计师工作场景:比如项目上线前的设计更改,明天和主管汇报的PPT,需求设计评审,这是我们每天工作的核心,大多数设计师在公司中日常任务就是产品的迭代,那么重要的事都是不能一拖再拖,都是迫在眉睫。

因为整个产品是赶时间点的,比如双11那天必须上线,那么无论如何都要按时保质量的完成,所以这时候是考验我们经验、判断力的时刻,如果没有做好,很有可能影响你的考核和晋升。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情,并用工具软件记录下来!

图片

 

重要但不紧急

这里主要是和你个人成长发展有关,比如学习英语、提升动效技能、掌握C4D、理财等等,这些很重要,但是很多时候我们每天都在处理重要又紧急的事情,特别是互联网公司,每天都在做需求,对于自己的个人规划,根本没有时间处理,就会导致你个人的提升这些事情完全没有时间做,多把精力放在这个领域去提升自己,必须主动去做,这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作,那么你就要列出来大厂设计师的技能有哪些,比如科学设计方法、设计思维、动效、数据能力,然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升,慢慢才能达到目标,否则就一直成为流水线设计,或者项目里面一个资源方,个人成长永远没有!

图片

 

紧急但不重要

比如PM找你聊需求,当然正常需求该聊还是聊,但是工作中经常有的聊,真的只是陪聊,很多时候真的在没有必要,没有结果的开会,聊需求真的是浪费时间,表面看似第一象限紧急事情里,因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转,其实不过是在满足别人的期望与标准。

设计师经常遇见的,改文案啊,产品会议,开发排期这种会议在我看来,出来关键节点有结果的需要参加,更多事情能少参与就少参与。

图片

 

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方,比如群里聊天,刷朋友圈,抖音,看八卦新闻,当然人都是需要一些无聊消遣的,但不值得花很多时间在这个象限。刚开始时也许有滋有味,到后来你就会发现其实是很空虚的。

我经常给大家说,你怎么比别人进步更快,就是设计之外的8小时你在做什么。别人工作时间外8小时都在学设计,学各种课程,而你在做些无聊事情,一年下去差别就出来了,不是说我们不应该去娱乐,而是需要注意时间分配。

总之,关于时间的4象限,需要大家多多的关注,多把精力放在重要又紧急,然后允许情况下,多提升重要不紧急事情的投入,长期坚持下去,你会有巨大的改变。

 

方法三:先思考再动手 

图片

在接到需求时候,多问自己几个为什么,这个页面为什么要改版?改版是为了提升用户留存,还是活跃度?还是提升页面转化?还是优化了什么?了解清楚,梳理清楚逻辑、流程关系以后再动手,这才是一个正确的做事方式,同时也需要思考,你在这中间做了哪些有价值的事!

这个道理很简单,但是很多人都没有做到,我也有很多时候,做着做着掉进一个坑里,所以做之前想清楚,想好了再做会更好!

 

方法四:避免重复造轮子 

图片

 

避免重复,经常总结积累

做一件事情,学会举一反三,学会从点到面,在很多公司面试晋升过程中,比如阿里,P6资深设计师和P7专家设计师,很重要的一个技能点就是,如何从点做到面。

我们在做很多需求时候,需要思考,这次做的这个需求后续如果遇见类似的,能不能快速解决,而不至于浪费时间和精力投入进去没有成长!比如说按钮设计,我们随便抓一个市场上的按钮,你会发现按钮的样式、大小颜色就是各种不统一,浪费开发资源和设计资源!如果你每天的工作都是做这种浪费精力没有存在感的事情,对于个人是很不利的,平时做项目多留心下,比如我做一个专题页面是不是可以去思考下,这个页面做完哪些控件我可以沉淀下来,复用到其他的场景中,赋能给其他设计师呢,这个是很重要的!

同样的,比如我们最近在研究一个弹窗,那么是不是我做这次弹窗,我就把弹窗彻底研究透彻,弹窗尺寸大小、颜色、按钮、状态都研究彻底,彻底掌握了这个知识点,后面再做弹窗信手拈来,深刻搞定一个任务,避免反复,经常总结和积累,也是提升效率很重要的方法。

图片

 

当你觉得很难的时候其实是在上坡

这是我很有感触的一句话,人的成长体现在同样的事情上,万事开头难,但后面会越来越顺手,因为在这个过程中你已经掌握了方法,我们需要做的就是不要半途而废,要学就学透学完整,后面工作效率就上来了。

图片

我们的专业知识就像这4个空杯子,一个代表AE,一个是C4D,一个是UI,一个是插画,很多东西都想掌握,于是每天学习一次就往这个杯子浇水一点,但是坚持10天就坚持不下去了,要么学别的,要么没有动力了,然后导致最后什么都没学到。

图片

正确做法是把一件事情学透了,学彻底了再去学下一件事情,你学AE就彻底把AE掌握了,再去学下一个,这样避免反复,彻底掌握不仅能加速你的成长,更能让你专业更深!

 

方法五:放下手机,定时间点 

最后这个方法对我来说很有效,学会放下手机,放下干扰,中国口香糖的营业额持续下降,大家知道为什么吗?口香糖一般都会摆在收银台的旁边,因为用户在超市收银台排队的时候,都在玩手机,没有人去看前面的货台!可见手机对我们影响有多大,所以当你准备学习时候,或者去完成一个任务时候,最有效就是手机放起来,至少一个番茄时间不要去看,这样保证你的效率变高。

另外一个方法就是定时间点,定结束时间点很重要,人对于时间点都是有天然遵守的,比如地铁错过末班车就回不了家,火车飞机晚点你也回不去,所以我们做事情时候可以立一个最晚完成时间,然后去做,比如我写作,定的时间就是每周末必须写完,所以我周末再忙,都会去抽空写完。

 

最后 

今天分享的这些经验,都是我实践过并有效的方法,希望可以帮助到大家一同实践起来,照着做下去,你会发现能压缩至少1/3的时间出来,让我们都把时间花在正确的事情,和正确的人身上,快乐工作,快乐成长,快乐生活!

 

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

转载请注明:学UI网》5个技巧,让你的做图效率翻10倍!

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

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


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

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

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

设计沉思录 | B端商城的客户链路设计

seo达人


背景:58会员商城是面向B端商户的信息服务售卖平台,囊括了公司各类业务的会员端口套餐、推广商品、增值服务等商业化产品。长期以来公司的商业交易主要依赖电销团队、线下销售团队来完成,战略层希望将线下销售模式向线上模式转变,建设一个以客户为中心的售卖平台。

 

01.B端商城的认知探索

说起商城,作为普通消费者第一印象就是京东、天猫、淘宝、拼多多等耳熟能详的电商平台。在早期,我们也先入为主地以为商城的参照系是C端电商,以最基本的购物流程和商品信息架构入手。
 
然而在项目推进过程中,发现B端商城与C端电商有着孑然迥异的特征。为了调整原有的设计模式,让整体的商业服务能更贴合客户实际使用诉求,我们也先从研究入手,探索商城真实的客户情况。
 

调研花絮&物料

 

02.B端客户差异

从研究中发现,比起独立个体的C端消费者,B端客户往往目标更明确、决策要素更集中。

 

C端电商的客户

  • 用户:以独立个体为主
  • 流程:导流-列表-详情-订单-支付-物流-收货
  • 商品:以图片介绍为主,多为大众化消费品,认知成本低
  • 目标:灵活,分散,以兴趣、生活需要为导向

 

58会员商城的客户

  • 用户:既有公司团体,也有商户个体、独立个体
  • 流程:渠道转化-注册身份-选择套餐-付费下单-确认合同-认证资质-开通使用
  • 商品:信息服务类商品,认知成本高
  • 目标:聚焦,为业务运转而采购,推广预算明确,追求商业效益最大化

 

具体来说,58会员商城的客户一部分来自企业间的框架合作,例如房产推广客户,大型中介品牌与58同城达成了合作协议(业务侧称之为KA客户),定期从商城购买大批量的经纪人推广套餐会员,购物这件事儿对他们来说反而成了例行任务;另一部分来自电销推广,例如本地服务商家在业务员的推广转化下来到商城购买商户推广套餐;还有一部分是个体商人、经纪人,通过公开渠道自主下单。
 
这些客户从购买的服务内容、购买的机制规则来说都有不同的差异。对于商城设计师而言,更需要关注客户差异所带来的购物效率、成功率等问题。

 

  • 效率问题:KA客户采购模式与购物流程的矛盾
  • 成功率问题:客户心智与商品选择难度的矛盾

 

03.客户链路设计

本着给客户提供更好的商城售卖服务,根据上述关键问题,我们进行了针对性的流程链路梳理,探索更优解的方案设计。
 

· KA客户采购模式与购物流程的矛盾

KA客户的采购模式与C端电商经典购物流程截然不同。

首先,客户需要经历繁复的线下任务:i.跟门店经纪人收集名单;ii.整理经纪人开通时间&套餐类型;iii.与业务员审核名单信息。
 
然后才是进入商城-选择商品-上传名单-付费下单。根据KA客户的管理规模不同,每个月需要多次进行线下收集任务,周期性为旗下经纪人开通推广套餐。而收集环节中的名单信息存储在公司内的另一个业务系统中,C端电商的线性流程不能在这场景上互融互通。因此,我们需要进行新的流程设计,聚焦KA客户的采购场景,提升客户购买效率。

KA客户流程改造示意图

 

在新的流程中,将线下任务转移到线上,大幅缩减了参与人员类型和多个流程环节。用户经由KA客户专属入口,进入采购模式,通过名单管理机制完成添加、管理等操作。根据名单结果匹配对应的套餐组合和优惠策略,引导KA客户进行批量下单。通过系统流程的互通改造,打通原有操作屏障,提升采购流程的流程性与体验。

KA客户改造方案

 

不仅如此,还有更多细分场景,例如经纪人到期续费、新员工入职开通套餐、经纪人自主申报加开套餐等等。这些环节贯穿了KA客户及其员工们的工作生命周期,通过关键服务触点打磨和数据的融合,让客户能够更快捷获取信息通知、套餐管理、推广服务管理,从而形成完整的KA客户服务链路。而全链路设计非一日之功,这也是我们正在持续研究和挖掘的方向。

 

· 客户心智与商品选购难度的矛盾

与KA客户不同,黄页商家客户更接近于普通消费者。用户在业务员的引导下进入商城采购,这期间用户面临的主要挑战是:

1.复杂的业务分类

2.雷同的商品内容

在原先设计中,采用了扁平的C端电商筛选逻辑,筛选信息密度高,使得商家客户容易忽略城市、行业类别对套餐的影响,导致买错套餐、退单重买的情况频频发生。再者是信息服务类商品的大量雷同,需要业务员反复与客户介绍套餐资源差异,影响购物决策效率。因此,对于这类场景,设计师的目标就要聚焦商家客户的购物成功率,通过改造筛选路径提升交易准确性和体验。

 

商品列表问题

 

新方案中,先解决用户第一个挑战:聚焦“行业类别”选择。通过蒙层的方式,让用户聚焦自身的业务类型,再结合业务关键词的搜索匹配,避免海量类目干扰。
 

商品蒙层引导

 

接着让用户去完成下一个挑战:选择会员套餐。
 
信息服务类商品不像大众消费品有物理实体,可以通过照片去判断感知,更多情况只能通过文案描述来传递商品信息。那么,如何让用户感知文案差异也是设计的关键。通过信息清单的对比设计,来呈现不同规格的套餐内容。我们还衍伸套餐PK工具、自助餐模式,来应对信息服务商品的差异化感知问题。
 

商品信息对比设计

 

完成以上购物流程的改造、商品信息感知的设计之后,我们也逐渐发现:不同客户之间虽然有购买场景的差异,但也在商城有着共同接触的服务节点。

 

04.链路的整合与延伸

为了让好的设计服务到更多用户,我们需要从系统的角度去考虑如何让流程路径更具兼容性、让商城服务更具通用性。

 

· 业务分发路径

商城原先是以商品类型的分类逻辑进行组织,不同业务线与不同类型的商品交织混杂在一起。用户不能在业务分类下检索全部商品。在新的客户链路设计下,需要融合业务线客户特征、业务线商品特征等情况,因此需要调整为以业务类型为主的分类逻辑,在首页中强化业务分类,并将原来的商品列表页改成业务线大类页。让不同业务的商家、不同体量的客户各得其所。
 

商城框架改造示意

 

· 公共服务触点

我们收集了客户在购物不同阶段所可能接触的内容:购物前—咨询客服、了解业务介绍&商品规则;购物中—对比商品信息;购物后—引导开通资质。根据这些环节沉淀了公共的客服帮助中心,信息卡片规则,商品信息的流转结构、售后流程节点引导等等,通过细节的打磨和设计,给予用户更清晰、更便捷的指导,以此带来更方便的自助服务体验。
 

公共服务触点梳理

 

05.最后

回想起来,B端商城的核心设计思想依然还是“以用户为中心”。差别大致在于:C端是要去验证用户痛点的真伪,以“点状”思路验证可行性;而B端是要去支撑用户的业务链路,以“面状”的流程通路去满足业务基本的运转需要。在这样的项目中,作为设计师需要进行更多思考,由“点“及“面”,不断探索用户与业务的逻辑交织,像个蜘蛛侠一样跳跃在逻辑的塔楼。

 

原文地址:58UXD(公众号)
作者: 环铁艺术家 

转载请注明:学UI网》设计沉思录 | B端商城的客户链路设计

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

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


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

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

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

那些小众而独具美感的网站

资深UI设计者

提升眼界,除了与优秀的人为伍

还要多看、多分析、多积累、多沉淀

不断扩展自己的能力边界

人生里最大的运气,不是捡钱,也不是中奖,而是有人可以带你走向更高的平台。其实限制人们发展的,不是智商学历,是你所处的生活圈子、工作圈子。


所谓的贵人:

“就是开拓你的眼界,带你进入新的世界的人。明天是否辉煌,取决于你今天的选择和行动!”


今天特意为大家准备了一波小众而独具美感的网站


我们要知道

很多时候一条有价值的信息

可以改变你的设计人生


自己平时上国外网站比较多,这里分享我最近浏览的优秀网站。

希望可以让你眼前一亮,哈哈。




undefined



1、Banorama


官网:https://banorama.banenor.no/?ref=reeoo


乘火车旅行是安全的,但这是为了安全。学习你应该注意的事情,并用quizen测试你的知识。





2、Polywork


官网:https://www.polywork.com/?ref=reeoo


Polywork是一个专业的多层网络。





3、Discord


官网:https://discord.com/?ref=reeoo


不和是通过语音、视频和文本进行交谈的最简单的方法。与朋友和社区保持密切的沟通、聊天、宿醉和保持密切联系。





4、Theodoz


官网:https://www.theodoz.com/?ref=reeoo


使用我们强大的平台和安全令牌协议创建最透明和可编程的金融应用程序。利用分布式基础设施的强大功能,我们使全球数十亿无银行存款的人能够获得标记化的资产投资和融资。





5、Affinity Designer


官网:https://affinity.serif.com/en-gb/designer/


亲和设计师-最快,最流畅,最精确的专业平面设计软件。





6、Warm Christmas


官网:http://warm-christmas.com/home/


温暖的圣诞节-圣诞老人很热,所以他为你准备了一个惊喜…





7、Despicable Me 3


官网:https://www.uphe.com/movies/despicable-me


官方电影网站为卑鄙的我3,主演史蒂夫凯尔和克里斯汀Wiig。看这里的拖车。2017年6月30日在电影院。





8、Renaud ROHLINGER


官网:https://renaudrohlinger.com/?ref=reeoo


投资组合-创意开发商雷诺·罗林格





9、Belazor Technologies, Inc


官网:http://belazortech.com/?ref=reeoo


Belazor Technologies,Inc–是无线建筑的骄傲。





10、Day of the Dead


官网:https://dayofthedead.holiday/


是一个纪念死者的节日。探索充满活力的传统、美味佳肴以及让这一天焕发生机的一切!





11、Staak


官网:https://www.staak.co.uk/


皇家利明顿水疗中心的独立创意机构、工艺、洞察、心。





12、East.Paris Agency


官网:http://east.paris/


是一家以文化艺术为灵感,以创意为动力的广告公司。


undefined




13、Dotlung


官网:https://dotlung.com/


一家培育和成长为具有强大在线身份和社区的成熟数字龙的网站





14、Spot the Bot


官网:https://spot-the-bot.com/


通过浏览器在虚拟现实中玩机器人!和一个朋友一起找出尽可能多的机器人。





15、ANIMAL


官网:https://animalmade.com/


我们是动物问题的解决者,讲故事的人,艺术家,概念思想者,还有那些喜欢开玩笑的人。









1、Affinity 


官网:https://affinity.pt/en


Affinity是一家专业从事技术和信息系统的咨询公司。它经营三个不同的业务领域:近支撑、外包、软件和产品开发。它在里斯本和波尔图设有办事处,拥有200多名员工,在17个国家开发项目。


Affinity定位于一家全球服务技术公司,拥有技术概况方面的横向技能和综合内部或客户项目管理。


从战略上讲,除了开发各种语言和技术之外,Affinity还将继续投资创建自己的软件。在内部和外部,亲和专注于双赢的关系,将所有的互动时刻定义为“一生的体验”。





2、Dinamica Plataforma


官网:https://dinamicaplataforma.com/estrategia/


Dinamica Plataforma是一家从事围绕关系动态、经济发展、自然资源和领土可持续性展开讨论。


undefined




3、1MD


官网:https://www.1md.be/?ref=reeoo


1MD是一家专注于艺术指导、设计和运动的创意工作室,为敢于脱颖而出的品牌打造身临其境的体验。





4、Alacran Group Productions and Recording


官网:https://alacrangroup.com/?ref=reeoo


我们致力于在世界各地培养人才、创造机会和建立伙伴关系。


AlalaN组包括AlalaN记录、录音工作室、AlalaN图片、现场活动制作和AlcRAN基金会。



undefined




5、Mogney


官网:https://mogney.com/?ref=reeoo


新一代支付方式





6、KIN


官网:https://kin.movie/


是一部带有科幻风格的惊心动魄的犯罪惊悚片,讲述了一个注定伟大的意外英雄的故事。



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

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


文章来源:站酷  作者:Lili丽丽子

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

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




掌握这些Figma进阶技巧,让你的工作效率提升10倍!

seo达人



现在越来越多的公司使用Figma作为主要的软件工具,在使用Figma时不能按照以前的思维去设计,要尽可能发挥出它的最大优势,学会进阶使用。

 

1.使用组件集

图片

如果我们有大量的按钮、输入字段等变体,在进行任何调整时,都可能花费大量的时间。

图片

通过使用组件集,可以对其中包含的基础组件进行调整,然后统一应用到所有的实例中。基础组件本身不需要成为组件集的一部分,可以放在同一页或原型附近。

 

2.将封面图添加到Figma文件中

图片

当管理各种不同的项目和Figma文件时,有时候寻找需要的项目可能会很费力。

创建封面照片是一种简单而优雅的解决方案,使项目一眼就能被识别。

添加封面的步骤:

在文档中创建一个页面并将其命名为“封面”;

为封面图像绘制一个框架(1920×960效果最好);

添加一些设计元素如logo、图标等,让封面便于识别;

右键单击框架并选择“设置为缩略图”。

 

3.使用样式

图片

当使用样式进行设计并决定要测试颜色、描边粗细、字体样式等不同变化时,只要快速更改,设计就能自动更新引用该样式的实例。

 

4.组件集布局

图片

点击组件集的框架,然后按shift+a,使用自动布局,轻松组织和重新排序组件。

 

5.使用自动布局

图片

自动布局使我们能够更密切地设计产品的开发方式,并在设计文件中保持一致性和可扩展性。

图片

通过遵循使用自动布局设计,可以在删除/添加内容、创建响应组件等方面节省大量时间。

 

6.创建流程图

图片

为了清晰传达页面间的流程,可以尝试使用一个技巧——将Figma中的连接器复制并粘贴到Figma文件中,它将保留它的所有功能。

 

7.使用约束

图片

为了保持一个框架的组织性和适应性,使用约束来告诉Figma当我们调整框架大小时页面该如何响应。

约束帮助我们控制设计在不同屏幕尺寸和设备上的页面,避免了每次调整页面时里面的元素也要调整。

如果要忽略框架中对象的约束设置,只需要在调整框架大小时按住command或ctrl。

 

8.为组件创建模板

图片

为个人资料卡创建一个模板是好的选择,随着用户人数增多,资料卡模板能够快速地复用,为我们节省大量时间,使设计更轻松。

图片

模板的工作原理:假设一个博客组件中包括一张图片和一些文本,再创建另一个组件,在其中嵌套10次博客组件。把这个模板放到设计文件中,如果我们需要添加内容或者调整组件之间的空间,我们只需要在主组件上进行调整。

 

9.组织组件

图片

考虑使用按钮、颜色样式、输入等来组织组件,这样更能提高功共享的效率。同时从一个设计文件组织排版的好坏,也能看出来这个设计到底怎么样。

 

10.使用Loom插件

图片

Loom插件是远程工作时必不可少的工具,能够节省会议时间,让设计师把更多时间投入到设计中。

图片

如果设计团队的日程安排混乱、不在一起办公或者在不同的时区,都可以尝试使用Loom插件进行设计评论和共享。

 

原文地址:medium.com

作者:Danny Sapio

译文地址:Clippp设计夹(公众号)

译者:Clippp

转载请注明:学UI网 » 掌握这些Figma进阶技巧,让你的工作效率提升10倍!

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

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


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

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

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


如何让按钮设计的更迷人

seo达人



按钮在UI界面设计中是不可或缺的元素之一,这篇文章我们将介绍不同类型的按钮包括按钮的状态和交互。我们介绍的都是日常界面中使用的普通按钮,并不包括单选按钮、选项卡、复选框等其他类型的按钮。

 

按钮的不同分类如下:

* 动作按钮

* 常用按钮样式

* 按钮的颜色和形状

* 按钮状态和反馈

* 标签按钮

* 触摸屏按钮

* 按钮的位置

* 系统按钮

* 总结

 

动作按钮 

我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂,但按钮操作不取决于它们的外观,而是取决于用户的行为。

 

1_1.行为召唤(CTA / C2A)

在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。

行为召唤按钮

对于CTA按钮,我喜欢使用圆形按钮,这样会更引人注目。

 

1_2.主要操作按钮

虽然CTA按钮和主按钮看起来相同,但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器,可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。

主要操作按钮

对于主要操作,我喜欢使用实心按钮。

 

1_3.次要操作按钮

从“返回”的辅助按钮到“下一步”的主按钮,或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。

主按钮旁边的辅助按钮的两种设计

我更倾向于使用线性按钮或文本链接作为辅助按钮。

 

1_4.三级按钮

三级按钮通常用于其他操作,可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容,前提是它们不是主要操作。

不同形式的三级按钮

一般来说,人们会使用较小或较不突出的按钮样式。

 

常用按钮样式 

下面我们将介绍常见的按钮样式,不同风格的按钮样式和他们的使用技巧。

 

2_1.实心

实心按钮是带有实心填充的按钮。

一个实心按钮

 

2_2.线性和幽灵按钮

线性按钮和实心按钮正好相反,一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用,但我更喜欢将线性按钮视为浅色(在白底下按钮的轮廓和文本颜色深一点更明显),将幽灵按钮视为深色(在黑底下按钮的轮廓和文本颜色浅一点更明显)。

线性按钮(左)和幽灵按钮(右)

 

2_3.圆形按钮

圆形按钮其边缘设置为最大圆角半径。

圆形按钮

 

2_4.FAB(悬浮按钮)

悬浮按钮是一种巧妙的设计模式,Google Material Design中更加受欢迎。虽然它们可能看起来像一个图标按钮,但实际上它们用在屏幕上的主要操作按钮。

一个悬浮按钮

如果您想了解有关FAB的更多信息,我建议您在Material Design的网站上查看( https://material.io/design/components/buttons-floating-action-button.html )

 

2_5.文字链接

文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本,甚至就是文本本身(例如“阅读更多”)。

文本链接的不同样式

在颜色方面,大多数网站使用蓝色,因为它是最容易识别的。为什么文本链接的颜色会使用蓝色?它一直追溯到是万维网的发明者,在他选择颜色时发现蓝色很酷的一种颜色,即使是色盲的人通常也能看到它。

 

2_6.带图标的标签按钮

图标按钮越来越受欢迎,一些按钮仍然需要一个标签来确保按钮的语意明了。

带图标的标签按钮

处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。

方法1:让图标的大小对齐字体的顶线。

方法2:让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。

 

2_7.图标按钮

图标按钮没有标签,只是一个图标。因为它们没有标签,所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。

图标按钮具有不同的风格

如果你在为计算机认知度较低的人群设计产品时,我建议使用带标签的按钮 – 尤其是那些很抽象的语意。

 

2_8.带图标的文本链接

某些文本链接可能带有图标。这些通常不会在正文中使用。

各种带图标的文本链接

 

按钮的颜色和形状 

在设计按钮时,需要考虑以下几个不同的元素。

 

3_1.颜色

在设计产品时,你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色,你可以使用在线对比度检查器。我使用的是那个。( https://accessible-colors.com/ )

不同颜色的按钮

 

另外,在选择颜色时应该考虑色彩心理学。红色按钮多用于删除,黄色按钮多用于警示等。

“删除”、“警告”、“保存”和“更多”按钮

 

3_2.边界半径

边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。

不同边界半径设置的按钮

 

3_3.投影

按钮上的投影使按钮更加自然引人注意。阴影也可用于指示不同的状态。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通过使按钮在悬停状态下来达到这个效果。

不同阴影设置的按钮

 

3_4.标签样式

标签样式归结为字体以及阅读的容易程度。选择字体时,请确保它清晰可辨。

不同标签样式的按钮

以下是一些简单的方法可以让字体清晰易读:

* 选择大写的标签或大标题。(Material Design使用过带有大写标签的按钮。)

* 确保标签颜色与按钮填充对比较为突出。您可以使用( http://accessible-colors.com/ ) 查看。始终确保您的颜色符合AAA要求。

* 选择字体时,请确保字体清晰。

 

3_5.垂直内间距

按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”。如果你是为产品系统的设计按钮。你应该采用所用字体的行高,并在其中添加一定单位的内间距。例如:“我的按钮标签的行高为20px,垂直内间距为8px”。

不同垂直内间距的按钮

为什么会这样设定呢?这里有两个原因:

1)有视觉障碍的人可能会增大浏览器中的字体,因此他们需要更改字体大小而不会将按钮高度定死。

2)这也是开发人员创建按钮的方式-他们在DIV容器中添加内间距,而不是固定高度。

 

3_6.水平内间距

有两种方法可以接近水平内间距。

 

第一个方法:

使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是它限制了你可以使用的字体数量。

宽度由网格决定的按钮

 

第二个方法:

两侧有固定内间距。我通常还会定按钮最小宽度,虽然避免了很窄的按钮,但是最小宽度按钮可容纳的不同字段会让按钮看上去不是很均匀。

宽度由内间距和标签长度决定的按钮

 

按钮状态和反馈 

按钮状态让用户知道他们是否可以点击、已经点击或已成功点击。按钮还可以有重叠的状态。例如可以同时是“点击”和“悬停”状态。

 

4_1.点击和禁用状态

点击状态就是鼠标可以点击按下按钮的状态,当然如果用户没有完成必要的步骤,按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址,他们就不能提交他们的详细信息。

点击和禁用按钮

 

4_2.悬停和悬停离开(鼠标悬停和鼠标悬停离开)

在PC端按钮应具有不同的状态,让用户知道它是可点击的。通常“悬停”状态和“悬停离开”状态相反,但也不一定。你应该有效的区分让用户感知鼠标悬停在某个按钮上。

悬停演示按钮

平板电脑和移动设备上永远不会出现悬停状态,因为你的手指无法“悬停”。如果您正在为应用程序进行设计,请不要担心此状态。

 

4_3.焦点

焦点状态可能会让用户困惑。如果你的用户专注度较差,他们可能需要使用选项卡式导航。用户将点击“选项卡”在网站上移动,从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的或尚未点击”。

默认的焦点状态是蓝色“发光”,幸运的是,我们生活在一个可以自定义按钮状态的时代。大多数设计师对悬停和焦点状态使用相同的视觉提示。

两个不同“焦点”状态的例子

 

4_4.按下

按下状态是当用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时,该按钮会指示为“已点击”。

“按下”状态的按钮

 

4_5.点击

按钮需要“点击”状态以向用户指示它已被点击。

“点击”状态的按钮

 

按钮标签 

按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范,以避免以后花更多时间去改变你所有的按钮标签。

 

5_1.动词的用法

大多数按钮都包含指示按钮将执行什么操作,例如“保存”、“发布”、“编辑”。虽然“back”和“next”不是动词,但在接口上下文中,它们的工作方式似乎相同。我喜欢在编写按钮标签时使用“动词”+“名词”结构,这会让操作更具规定性,例如“保存文章”等,而不是“保存”。

 

5_2.案例

你还应该决定使用哪种字体大小写。以下是我使用的一些规范:

所有大写字母,例如“NEXT SECTION”,我把它们用于更专业的平台。Material Design使用所有大写字母的按钮。

标题框,例如“Next Section”,我倾向于避免使用标题大小写,因为它不像句子大小写那样容易阅读。就语调而言,我认为它介于“专业”和“会话”之间。

句子大小写,例如“Next section”,我把它们用于更“友好”或“对话”的平台。它更像是一句话,正常我们一句话结束会加一个句号,但是为了设计的美感,请不要加一个句号。

小写,例如“next section”,小写按钮标签使用频率较低。

 

5_3.一致性

为按钮编写标签时,请确保一致性。以下是一些我在项目使用的指导原则:

选择字数:每个按钮一个、两个或多个字

选择大小写:句子大小写,或大写,或标题大小写,或小写

标签结构:如“动词”+“名词”,或“动词”等。

 

触摸屏按钮 

桌面按钮大小调整(单击)

因为桌面上的光标比触摸屏上的手指小,所以您可以将按钮缩小很多。

 

触摸屏按钮尺寸(点击)

麻省理工学院触摸实验室的研究表明,人在使用触摸屏时手指部分是8-10毫米,如果你想避免用户手指触摸错误,最小目标尺寸需要10毫米或更大。如上所述-我需要较大的按钮。

那么,你应该做多大尺寸的按钮呢?专家们说的是:

Material Design建议接触目标应为48dp x 48dp,不同接触点之间距为8dp。

虽然我找不到关于iOS设计系统目标尺寸的任何文档,但一般的理解是,它的最小目标尺寸是44 x 44磅。

如果您在设计大小尺寸方面遇到困难,我强烈推荐Zac Dickerson关于易用性的故事。

 

按钮位置 

如果你非要放置2个按钮,主按钮应放在哪一侧?

主要和次要按钮的两种不同立场

选项A显示左侧为主按钮。它可能是用户首先想要看到的,所以先显示它。

选项B显示右侧为主按钮。我们希望用户首先看到辅助按钮,方便他们继续完成他们的旅程。右侧的按钮也表示继续。

 

系统按钮 

这里会介绍一些很酷的设计原则和系统。我喜欢Material Design System的按钮,因为他们的原理是经过深思熟虑的。

Material Design System的按钮

Material Design 按钮图片

Material Design中介绍了按钮的操作,以及按钮如何与系统中的其他组件交互。我喜欢用户在触摸屏上使用按钮的交互方式。

查看按钮部分:

https://material.io/design/components/buttons.html

 

悬浮按钮在这里查看:

https://material.io/design/components/buttons-floating-action-button.html

 

总结

如果没有按钮,你就不能真正构建界面;我们应该更多的关注它们。了解按钮在界面中是如何设计的?怎样正确的使用按钮并为你的用户提供最佳的体验?

 

原文地址:UX Collective

译文地址:水手哥学会计(公众号)

作者:Tess Gadd

译者: 水手哥

转载请注明:学UI网》如何让按钮设计的更迷人

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

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


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

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

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



原来设计规范要这样理解,早知道就好了!

seo达人


@彩云Sky:Hi,我是彩云。经常在读者群里看到有人讨论,面试时被问到设计规范相关问题,不知道怎么回答才好。是不是要回答设计规范的具体尺寸,再把各种适配规则全背下来呢?今天彩云就和大家一起探讨下,到底要如何理解并运用设计规范。

 

1.什么是设计规范?

设计规范是一个老生常谈的话题了,网上相关的文章也非常多,但我相信有很多设计师对设计规范的理解还是比较模糊,认为设计规范指的就是字体,颜色,控件规范那些,这种理解其实是比较狭隘的。

于我而言,设计规范用一句话总结就是:设计规范是针对特定产品所制定出来的一整套产品标准,包括流程标准,技术标准,设计规则等等。通过这套标准,能减少错误发生率并提高设计质量和输出稳定性。

举个例子,我在做QQ的3D厘米秀项目的时候,一开始合作方提交的设计资源正确率很低,风格也各不相同。然后为了解决这个问题,我在项目中定义了流程标准,资源标准,cp合作标准等等。通过这些规范让多个不同设计团队能合作到一起,提升了整体协作的效率和质量,这些标准就成了设计规范的一部分。

图片

可以说,每个项目因合作方式,人员习惯,落地形式的不同,所形成的规范是有区别的。所以,设计规范更应该是针对项目来说的,除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的,回答更应该是一种思路的描述,比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升

 

2.设计规范的作用

1)遵守用户习惯,减少认知成本

Don’t make me think。大家都知道,好用得产品都是尽可能的减少用户思考,不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时,你会熟悉的去左上角找返回操作,但如果把返回操作放在右上角就会很不习惯;再比如对国内用户来说,他们习惯正确按钮用绿色,错误按钮用红色,如果你非要反过来制造所谓的差异化,用户就会感到困惑,误操作的概率也可能会大量增加。

图片

 

2)统一品牌性格

品牌性格不论是大到公司层面,还是小到具体某一个产品,都需要有一套品牌识别体系来约束,只有统一的视觉印象才能更好的让用户记住。这些品牌识别体系其实也是设计规范的一部分,在具体执行中,可以根据一些品牌核心概念规范快速做一些风格决策。

比如腾讯QQ的品牌形像风格关键词是青春、互动,叙事和干净,那么在选择画面配色的时候就可以根据关键词指导画面的选择,使得整体的画风得到统一。

图片

 

3)降低新人学习成本

这里所说的新人不单纯指刚入职场的设计新人,也包括刚参与到一个新项目的设计老手,设计规范是能够以最低的沟通成本实现快速上手。有成熟的控件资源和标杆的设计参考,就算是之前完全没做过的设计师也能搭建出一个还不错的页面。

图片

 

4)提高开发效率

有了好的设计规范,开发就能把一些常用的样式进行封装,在需要复用的场景中直接调用。这样做,一方面可以通过调用的方式减少样式代码的复制使用,提升效率的同时降低软件包体积,另一方面也可以减少不必要的工作量,方便后期维护。

图片

 

5)保证设计的一致性

有设计规范的约束,能让团队在一个既定的框架内做设计,统一大家的输出质量,从而保证设计的一致性。

 

3.怎么学习设计规范

设计规范的学习肯定不是靠死记硬背,而是要讲究方法,从我自身的经验来说,我觉得大致可以有以下2个步骤:

 

1)在新手期,多去看一些大厂的设计规范,先建立认知,不要求全部记住。把这些规范当成字典,先大致了解一遍,等真正做的时候拿不准再去查阅就好了。这里推荐几个必看的大厂设计规范官网,建议收藏。

苹果iOS设计官网:https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design设计官网:https://material.io/design

微软Fluent Design System设计官网:https://www.microsoft.com/design/fluent

IBM设计官网:https://www.ibm.com/design/language

Facebook设计官网:https://design.facebook.com

蚂蚁金服设计官网:https://ant.design/index-cn

图片

其实网上很多设计规范,原理之类的文章,源头都来自于这些大厂规范,想获得一手信息,最好是自己去这些网站多看看

这也就是我为什么不写具体规范数值的原因,因为网上的资料实在是太多太详细了,写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己,需要更多的主动性,这样才能提升自己的学习能力和解决问题的能力

 

2)根据自己要做的模块,有针对性的找市面上大厂的应用作为参考,直接截图标注,自己总结规律印象会更加深刻

我开始做UI的时候就这样学习的,不知道字体该用多大,间距用多大,颜色怎么用,就直接去找相类似的界面截图参考,量它们的尺寸,吸它们的颜色,然后就这样一步步的把规范经验积累起来了。

比如从QQ的动态tab页面中,我们可以借鉴到很多信息,比如列表的高度,列表左侧的图标尺寸和圆角,间隔线高度和配色,右侧的箭头大小和配色,列表文字的字号和配色,用户头像大小和结合的样式,图标与文字的间距等等。这些借鉴并非是抄袭,要你做的跟这个界面一模一样,只是参考这里面的某几个属性然后结合自己的产品综合运用,减少出错

图片

发现了吗?一个优秀的界面设计,上面的任何信息其实都可以拿来参考,就看你会不会用了。

需要强调的是,这些参考来的标准,并非是标准答案,还是要根据自己的实际项目做调整,只是至少知道一个范围,在这个范围内不大会犯错

这就像刚开始做设计时一样,去参考这些规范相当于做临摹的练习,这种临摹是需要的,临摹的过程中不断加入自己的思考,然后通过总结,变成自己的知识体系

 

4.怎样定义出设计规范

随着对设计规范理解的加深,自身设计能力的不断提高,就要开始从设计规范的使用者转变为规范的制定者了。如何制定针对项目的设计规范呢?我的经验是在项目过程中把做的好的和踩坑后的正确解法进行总结,并形成文字,积累多了就形成了规范要把每一次遇到的问题都当成是一次改进流程和规范的机会。

我自己是有随时记录的习惯,项目中一旦发现问题就会赶紧把它记录下来。有时候甚至还蛮期待出现问题的,因为出了问题才能找到优化的机会,自己也能从中找到解决问题的成就感

曾经在QQ的3D厘米秀项目中遇到过非常多的坑,然后从填坑的过程中慢慢总结出各种设计规范,去帮助项目减少错误率,提升设计质量。从最终的产出和结果来看,自身的进步是可观的,对产品的帮助也比较大,所以很值得去做。

图片

 

5.使用规范会影响设计的创意性吗?

刚掌握设计规范的时候,干活是特别舒服的一件事,因为做需求可以很快,好像拼拼组件就能完成。但稍微做久一点时间,又会觉得好像没啥进步,天天拼组件,担心影响设计的创意性,真是挺矛盾的。

其实,规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化,又要在设计的过程中给用户制造惊喜。比如,整个UI的配色和字体需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程

 

总结

设计规范绝对不需要死记硬背,而是要充分理解并灵活使用,才能发挥它的价值。随着UI行业的不断成熟,设计工具的简单化,各种组件化资源和思维越来越普及,可以预见的是未来一般的UI界面会高度组件化,设计师单纯在界面上花费的时间可能会越来越少。

这从行业的发展来说,减少了很多体力劳动,让设计和开发有更多的时间去打磨产品细节,肯定是好事。但对设计师自身来说,省下了以前那种常规设计需求的时间后还能做些什么,设计师的价值又在哪?值得每个设计师去思考

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》原来设计规范要这样理解,早知道就好了!

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

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


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

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

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


做设计有一道及格线,标准肯定是“它”

seo达人



很多设计师容易犯一个错:设计不明确

设计一旦不明确,就容易让用户产生疑惑,甚至认为出现了bug!

我的原则就是,要么不做变化,要做咱就做的彻底一点,明确一点!

我从以下方面举几个例子:

1.间距

2.大小

3.样式

4.颜色

 

1.间距

当信息内容需要区隔的时候,最常用的两种方式:

一种是加一条细细的分割线;

另一种是加一条粗粗的分割块:

我们有一次在加分割块的时候就出现了一个小失误,把分割块设定为4pt:

这样会存在什么问题?

会让用户怀疑,这是粗一点的线条?还是细一点的色块?

所以为了避免这样情况的发生,线条就细点0.5pt,色块就粗点10pt(反正稍微大一点就行),明确一点:

再比如之前有一个小案例,大概的信息是这样排版的:

不细看也没啥大问题,但是仔细观察就会发现,在间距方面有一定的优化空间。图上有六条信息,实际是三组,如果间距不做彻底,就会让人感觉是独立的六组,但如果把间距做的彻底一点:

这样就可以很明确看出,这是三组信息,而不仅仅只是六条信息。

所以要么就不分组,既然分了,就分的彻底一点!

 

2.大小

界面内信息有很多,这么多信息,有些需要强调,有些可以弱化。

很简答一个例子,有时候大字后面需要跟一个小字,如果你没区分开就是这样的效果:

这样就很不明确,到底是做了大小变化?还是出现了bug?

所以尽量把二者区分开,比如大小对比、颜色区分、粗细变化:

这样就可以很明确!

 

3.样式

前短时间有位读者朋友发我一组图标,图标源自追波,我觉得整体做的还可以,但是有一个样式上的小细节可以优化下。

整体图标样式都是有厚度的,但是邮件这个图标看起来就有些犹豫,想表达厚度,但是又没表达清楚:

图标源自追波

所以可以让厚度的宽度加大,并且把侧面的颜色和正面区分开,这样就可以把厚度更明确的表达出来。

再比如之前做过一个引导页,需要做一个影带,最开始做的是这样的:

不知道的还以为是个手表带,所以必须要仔细观察影带的特征,并将其明确的表达出来,比如两边的孔是方形的,整体材质要软一下等等:

这样表达才明确,用户才不会困惑!

 

4.颜色

下面两组颜色:

左面这组可以很好的突出一个颜色,而右面这组就很难突出某一个颜色。

在界面设计中,有很多场景下,会有多个按钮,我们需要强调其中一个,就需要采用这种彻底的对比方式:

而不是让人模凌两可,分不清主次的方式:

明确一点,用户就不困惑了。

我们再来一个例子!

其实工作上有很多优化需求都是基于“明确”这个点展开的,前一阵子做的一个排行榜奖牌标识的优化,我们看看原来的样式,就是因为颜色对比度不够,产生数字看不清的情况:

在这样的背景下,我们就可以拉大颜色对比度,让数字更清晰、更明确:

这就是基于“明确“这个点,进行的需求优化。

 

总结

今天讲的都是做设计不够明确的小案例,也是很多朋友容易忽略的问题。

ios有一条设计原则就是清晰,清晰的本质就是做的足够彻底,该强调的强调,该弱化的弱化,比如他们超级醒目的大标题:

当我们能把设计做的足够明确、足够有节奏感的时候,就可以减少一定的稚嫩,使设计更稳更成熟!

 

原文地址:菜心设计铺(公众号)

作者:菜心设计铺


转载请注明:学UI网》做设计有一道及格线,标准肯定是“它”

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

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


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

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

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

把握创造力的5个层次,了解设计师如何成长!

seo达人



什么是创造力?对于在设计行业工作的人来说,这是一个很难回答的问题。如果谷歌搜索这个问题,会发现很多答案,比如:创造力就是创造新的东西。创造力就是把好的点连接在一起。创造力就是想出一个想法或一个新产品。我个人更喜欢下面的定义:“创造力是将新的和富有想象力的想法变为现实的行为。创造力涉及两个过程:思考,然后生产。”

 

如果你有一个大胆的想法,但却不付诸行动来实施它,证明你富有想象力但缺乏创造力。

因此,创造力不仅仅是思考一个想法,还要把想法变成现实。下面是5个不同层次的创造力水平:

 

层次一:复制

图片

临摹优秀的设计作品仍然是一种创造力。这是最低水平的创造力,只能用于培训或练习的目的。

我们不应该将这个层次的产出用于商业用途或者称这个想法是自己原创的。

 

层次二:复制+修改

图片

为了提高水平,我们不能仅仅临摹或复制某个东西,更需要修改它以适应现在的使用环境。这意味着我们必须开始把我们的想法投入到作品的创作中。

这个层次的产出已经可以用于商业用途,但很大一部分工作仍在复制。

 

层次三:复制+修改+改进

图片

在这个阶段,设计师已经达到了一定的成熟度。每个设计方案都必须放到产品应用的环境中,并且需要仔细考虑每个设计决策,以验证这些方案或想法。

例如,下图是原版的添加新内容的动效设计,动画效果相对复杂。

图片

通过对这个动效进行修改和改进,下图中输出的设计更简单,更容易在产品中实现,同时还减少了用户在真实产品中可能无法识别的不必要的动画效果。

图片

在这个层次上,你可以被视为是一个高级设计师。

 

层次四:趋势制造者

图片

作为趋势制造者,技能必须处于较高的水平,每一个想法都能以独特的方式执行,并且带有自己的个人风格。

这个层次的设计师的作品会受到大多数人的重视和评价,因此有足够的支持来创造一个新的“趋势”,激励其他设计师甚至影响客户使用这些作品作为他们的参考。

 

层次五:系统制造者

图片

这个层次的设计师是定义全新的设计并设置新创意的先驱,是其他人进行创意工作的基础。

在绘画方面,我们有艺术流派:印象派、野兽派、立体派、超现实主义等。在技术方面,有“人机界面设计-iOS”或谷歌Material Design-Android。无论产品设计师是什么风格,他们的设计都必须遵循这两个应用平台的规则。

 

最后

创造力的五个层次分别是:

复制

复制和修改

复制、修改和改进

趋势制造者

系统制造者

图片

通过了解创意层次希望能有助于你从另一个角度来看待创造力,了解创造力水平。

现在的你处在哪个层次呢?

 

原文地址:medium.com

译文地址:Clip设计夹(公众号)

作者:Hoang Nguyen

译者:Clippp

转载请注明:学UI网》把握创造力的5个层次,了解设计师如何成长!


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

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


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

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

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


日历

链接

个人资料

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

存档