首页

没想到过程稿这么丑,结果用了两招就把效果改好了!

seo达人



上次我们分享了左面的等级相关的,今天我们接着来分享第二张任务相关的。本文会从引导页的3个方面讲解:一个好的创意非常重要、元素一定要有细节、搞一些灵动的小亮点,做好这3点能给作品加不少分。

最近做的引导页,效果如下:

图片

 

1.一个好的创意非常重要

很多时候,一个好的创意非常关键,可以让设计产生亮点,等级这个页面,我个人还蛮喜欢这个创意的。

因为这个页面讲的是每周任务,我从“周”这个字眼想到了时间又想到了日历,所以我想用一个大的日历作为整体外轮廓,然后日历里面的结构是一些相关的礼物元素。

但是最开始的效果并不理想:

图片

看不太出来是日历,那怎么样才能一眼就看出来是日历呢?

那就是有一种翻页的感觉,比如下面这种:

图片

这样就可以看出来是日历了。

除了日历,刚才也说了,还要有一些相关元素,礼物呀、升级的火箭呀、直播的小电视呀等等:

图片

这样有大的框架,再加上修饰的元素,整体的创意就差不多了。

 

2.元素一定要有细节

每一个元素都会影响画面精致度,比如之前说的那个礼盒,之前没倒角,倒角之后,和整个更搭一些:

图片

再比如,我之前画的电视有点太简单粗暴了:

图片

于是找了几个电视的参考:

图片

加了一些细节和优化,优化后效果如下:

图片

这样就比之前精致一些。

当每一个单体做到位了,组合起来就不会差太多,否则就会影响整体质量。

 

3.搞一些灵动的小亮点

其实让画面变灵动的方法有很多种,我个人特别喜欢使用一些可爱的表情、或者小形象。

比如之前在做任务头图的时候,字体上加了一个小微笑的表情:

图片

再比如这次,在日历外面加了一个黑子,偷偷看里面礼物的细节:

图片

让用户感觉里面确实有很多好东西。

再比如日历里面的星星也加入了表情:

图片

让其更加有生命力。

这些都是我喜欢使用的小技巧。

 

总结

今天就先分享这么多啦,每次做引导页都是比较开心的,因为可发挥空间会比较大一点,也可以使用自己比较喜欢的3D手法,希望过程中的小感悟可以给大家来点灵感!

下期见,么么扔!

 

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

转载请注明:学UI网》没想到过程稿这么丑,结果用了两招就把效果改好了!

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

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


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

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

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


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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


HMI设计中的文案指南

资深UI设计者

目前市面上有很多关于 B 端或 C 端的文案设计指南类文章,但对于汽车驾驶 HMI 设计的文案总结却几乎没有。可能是由于智能汽车行业这几年刚刚兴起,加上本身就属于小众行业。使得我们在网上很难找到相关的文章参考。我目前正在从事汽车 HMI 相关设计工作,在上一个项目中负责文案设计。项目复盘阶段我整理了一套关于汽车 HMI 文案设计指南,如果你也正从事此项工作,希望此篇文章可以为你带来一些帮助。


设计原则


车载屏幕设计与手机、电脑屏幕最大的不同是使用环境。手机和电脑的使用场景相对安全并且稳定。但在驾驶过程中的复杂环境如车辆颠簸、屏幕眩光等,使司机在屏幕阅读时造成难聚焦、阅读时间短等情况。如果司机因为阅读困难造成行驶中注意力分散,非常容易造成交通事故。在这样的环境下,高效、清晰、安全成为了设计文案时的重要原则。





文案字数


为了能满足上述提到的设计原则,控制文案字数是首先能想到的。文字越少,阅读时间越短,所占据司机注意力的时间也就越少,进而保证了行驶安全。那文案的字数应该控制在多少呢?







人类对多任务复杂信息处理能力是有局限性的。当注意力集中在某一点时,其他事情的关注度会明显降低。例如当驾驶过程中需要阅读文字,其驾驶注意力就会出现分散甚至忽视。有学者做过专项调查,结果显示,驾驶员驾车行驶1km内大约会遇到300种信息,至少要做出75次判断决策,相当于每隔13.3m驾驶员就需要对路况做出1次判断,以保证行驶安全。

假设在城市中驾驶的平均速度为50km/h(约13.9m/s),也就是大约每隔1s驾驶员就需要做1次路况判断。而一个普通成年人的阅读速度大约是300~500字/分钟(约5~8字/秒)。因此在车机屏幕内的文案字数建议不超过8字

但在实际设计中,我们发现有些文案字数是无法控制在8字以内的。例如「附近搜索结果较少,已扩大搜索范围」。长文案通常属于辅助性文案,是对某种功能或结果的一种描述。这类文言的重要层级通常不高。如何在满足文案需求的基础上保证其安全性。我们的做法是,增加长文案的断句频率,使每个断句之间的字数不超过8个字。这样可以减少用户单次阅读时间,适当增加阅读频次(通常增加1次)来解决长文案问题。


文案词表


字词在 HMI 设计中有很多和移动端用法相同,但也有不同。例如「您」和「你」。移动端通常建议使用「你」字,原因是用「你」代表用户来与之对话,可以与用户建立亲密感;而「您」容易产生距离感。但在车机使用场景中,我们更想带给用户一种尊贵感。毕竟在国内绝大部分家庭中,买一辆车还是属于一件比较有仪式感的事情,这里如果使用「你」增加亲密感显然就不合适了。



距离和时间


1、距离

导航距离是导航产品中特有的显示内容。对于这类信息,也应该秉承清晰、高效的原则呈现给用户。


2、时间


其它注意事项


1、避免使用网络词汇

网络语言通用性和辨识度不够强,不是每个用户都能理解的;而且网络语言带有一定的戏谑成分,与产品的品牌,和调性可能会有冲突,应避免或谨慎使用。


2、保证内容完整

保证文案清晰完整,避免文字过长使用「…」省略。例如控制用户自定义昵称长度,不得超过 8 字。在特殊情况,如显示超长路名时,需尽可能保证路名完整性,若超出可显示范围,则使用「…」省略。


3、谨慎使用「 ! 」

感叹号会让文案显得过于情绪化,容易让气氛过于紧张。应尽量避免司机出现情绪波动。


4、阿拉伯数字代替文字

阿拉伯数字在阅读中的可识别性更强,因此需要表达数量时,尽量使用阿拉伯数字而非文字


总结


HMI 设计在国内正在慢慢兴起,有很多内容还需要我们开发和探索。这篇文档对 HMI 中文案的设计规范提出了参考建议,但无论是建议还是指南在实际运用时,还需结合具体情况考虑。它们不应该成为限制设计师编写文案时的条条框框,而旨在引发更多的设计思考。

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

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



文章来源:站酷    作者:伊高国

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

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

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


分布式场景下的OMS系统设计

资深UI设计者

编辑导语:OMS即订单管理中心,可以看作是电商系统的核心,其所需要具备的功能包括汇集数据、分发、跟踪汇总等等。那么,如何依据实际业务场景、搭建一个可支撑的、稳固强大的OMS系统?本文作者针对分布式场景下的OMS系统设计做了总结,一起来看一下。


一、OMS所处位置

通常我们所谈论的网上购物为狭义电商,属于广义电商的一种,即以电子化手段进行商品交易的一种行为。

狭义电商简单可以描述为货、款、以及货与款的关系。同样,转化为电商系统主要核心模块可以分为WMS仓储系统、FMS财务系统、OMS订单系统。

在电商的三大核心模块中OMS订单系统又可以看作核心中的核心,所有系统以围绕着订单模块进行构建,如果整个电商系统比作人体器官,那么OMS当之无愧可以比作人的心脏,所以OMS系统设计的好坏,直接影响着其他系统的构建。

二、OMS作用

OMS系统承上启下处在电商系统业务链的中游。通过各个平台聚集到OMS的订单,系统通过会员信息、收货信息、优惠信息、商品、积分、支付等条件对订单提供后续处理,如合单、拆单、第三方推送、分发仓库、通知扣减积分,库存、创建退款,退货申请单等操作。同时具备从其他系统上报收集追踪订单变化。如出库、物流信息,并对其他系统运营分析提供数据支撑。

可见OMS系统要具备数据快速聚集、加工、分发、跟踪汇总的能力。

三、OMS设计

了解了OMS所处位置和作用,接下来谈谈如何设计一个稳健的、可持续性的OMS系统。

我们知道建设大楼,会考虑地基、主体结构、周围环境、承载以及抗震能力等各种因素。系统搭建也一样,对达到什么样的预期目标也需提前做出制定,制定的要求越高,设计考虑的因素就越多。

1. 订单相关表字段

2. 前后端数据读写分离

根据用户群体的特点,前后端数据库主从读写分离、应用服务分开灵活部署。主数据库处理相关业务事务,大量的查询转移到从数据库。一是减轻主数据库的压力,二是前后端物理隔离一方宕机可降低对另一方作业的影响。

BDMS 业务+数据(中台)库与OMS 订单库特点对比:

3. 分表归档

根据C端用户特性查询订单以会员维度区分,所以缓解前端访问数据压力,分表设计是个不错的选择。按照订单号1024取模方式,会员编号尾号数字1位,2位取模方式等等。

4. 业务解耦

架构从单体、三层、再到分布式微服务的变化,业务边界也从领域驱动建模开始制定到最终分而治之,各得其所。各个分拆模块更具独立性和可扩展性。所以设计时其他业务模块数据不应混到单独某一业务模块中,数据交换传递统一通过服务接口形式获取。这也体现了分布式系统一切皆服务的思想。

业务拆分后的三大模块主要变化时间轴:

从客户角度分析,C端用户界面可操作性较低,要求简洁、直观、易懂。如会员中心订单tab分类:查看全部、待付款、待发货、待收货、待评价、退款/售后。

上图分类由两种或三种业务状态的组合而成,如下图为后端订单和支付状态值组合到前端状态值以及显示的算法。

其中,会员中心的退款/售后为逆向状态,可与其他tab正向状态区分开。

5. 缩短业务链

OMS系统主线是从建立订单开始为仓库提供发货依据到配送完成,最终实现可预知的业务闭环。

其他事务如推送第三方商户、扣减库存、创建应收、释放积分,库存、退回优惠券,创建退款申请单等事务,可归纳到分支,实现可控的由订单状态流转异步创建单据和事件进行处理。一是缩短业务链长度可使系统更具稳定和强健性,二是可根据活动、秒杀情况控制分支事务处理频次,使资源更好的集中到业务主线上。

例如,双十一活动期间,阿里把会员等级,芝麻信用计算等附加业务暂停服务。甚至在双十一凌晨秒杀阶段,延迟退款退花呗等逆向行为。

→正向状态流(每种状态分别由定时任务异步处理当前状态下的后续业务):

→逆向状态(由定时任务异步处理取消订单后续业务):

6. 自动审单

系统根据审单配置规则对订单金额、地址、地区、收货人,指定会员、手机号等信息进行合法性校验,校验通过的则正常流转后续流程。不符合规则的订单,以及包含备注的订单转人工,通过人工再次审核。

7. 拆单

拆单主要原因涉及店铺、品类、跨境商品、商品超重以及仓库的不同。系统根据拆单配置规则实现对订单拆分。

拆单一般时间节点在支付前和支付后两种情况。拆单需要把运费、优惠、积分分摊到正价单一商品上,方便退款退货以及财务结算。

同时需要考虑部分退情况。如果存在满减、累计消费金额,跨店铺消费等优惠限制时,要注意是否满足部分退。不满足,则需要连带其他拆分子订单一起退,否则驳回。

8. 合单

当买家编号、收货人手机号、地址、姓名一致时,系统自动合并生成新订单。需要注意的是合并订单为虚拟订单,并不是多个订单的合并生成父订单,实质只是合并发货,降低物流成本。

9. 自动取消超时未支付订单

实现方式如定时轮询任务,延时消息。当数量少时使用定时任务即可满足设计。当数量过大时可采用延时消息,订单生成后发延时消息,到设置临界点时判断是否支付,未支付则取消订单。

10. 虚拟出库

一般针对虚拟商品,无需推送到仓库实物发货的订单。如手机充值、购买游戏币等等系统可主动变更订单为已出库,减少人工干预。

11. 异常订单拦截

异常订单拦截一般有别于自动审单校验,可看作是对自动审单规则的补充加强。如收货地址临时变更、商品破损、库存不足、部分地区管控物流限行等等。拦截可以是系统和人工拦截两种。

12. 订单开票

开票分为纸质和电子两种,纸质一般由仓库随发货一起开具,电子发票则由订单发货后,出库状态上报到OMS后,由OMS系统调用税务平台开具蓝色发票。退货逆向流程则开具红冲发票。

13. 补偿机制

如第三方消息队列事务消息机制,TCC补偿方案等等,同时需要注意接口设计时一定要做到幂等性。

14. 换货

换货实质是订单商品的变化,同时也可以理解为新订单加退货或部分退的方式,因此也会涉及到商品单价、优惠券、积分的重新分摊。这也是为什么换货功能设计到OMS的原因。换货主要包含同类商品、不同类商品之间,以及数量的变化,同时还会涉及到旧商品、新商品库存和应收、实收财务结算上的变化。

15. 其他

最后,还要与日志监控、数据分析等系统配合做好预警服务防止恶意下单,最大程度保证商家利益。OMS作为整个电商核心系统,在设计时需要充分分析具体涵盖的业务场景,以及与其他系统的融合,这样才能设计出符合自己企业的OMS系统。

四、总结

分布式场景下系统设计是一个不断摸索前进的过程。只有对架构设计和业务解耦的粒度大小等合理构思,才能使后续系统更具有迭代性和可扩展性。

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

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


文章来源:人人都是产品经理    作者:莫名

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

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

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


从前端数字化到后端数字化,数字化的路到底该怎么走?

ui设计分享达人

从去年到今年,众多行业都遭受到疫情这只黑天鹅的冲击,然而,中国经济也最快的从疫情中恢复到常态,其实这一过程,离不开数字化。从今天来看,数字化几乎是各行各业都在试图接受的一个进化路径。

早前YC中国创始人及首席执行官陆奇认为,数字化是把人们需要的信息获取后存在一个特定的介质上,使得信息本身与这些信息所描述的实体分离开来,进而被大规模、高效地处理后又被传递回人们所使用的终端,被进一步利用的过程。

他指出,在今天的知识经济时代,它是由大规模的信息、数字化来驱动的。

在过去60多年的历史上,从第一代IBM为代表的单板个人电脑;第二代微软、苹果再到第三代、第四代的PC与移动与云,再到即将进入的第五代AI/5G +边缘计算的早期,数字化进程一直是由计算平台来驱动的。

从陆奇的观点来看,任何一代计算平台,都有前端和后端。前端永远由交互的模式来驱动。

包含鼠标、键盘到手指等交互入口。其次,包含数字化的终端设备,比如个人电脑到智能手机等移动终端。前端永远由交互的模式来驱动。

而驱动后端演进的是计算资源规模的扩大提高,具体而言是运算信息、存储信息和传输信息(网络)的能力水平的提高。计算资源规模的提高也意味着数字化广度和深度的扩展。

一、前端数字化:从产业痛点入手,从体验改善突围

从今天来看,借助计算平台的发展,交互入口的演进,前端数字化与后端数字化已经在各行业演进。

比如房产市场贝壳等玩家的VR看房、互联网家装市场的VR装修、服务机器人市场的AI机器人、新能源汽车市场的换电模式(体验交互终端)、手机厂商的智慧大屏等就是典型的前端数字化的案例。

在今天,后端大规模的云计算开始把计算、存储作为一种服务形式,让每个企业在门槛很低的情况下,充分享用数字化所带来的能力。

后端的数字化创新更多是计算资源规模带来的数据化驱动。

比如说,各行各业与互联网大平台结合建立的数据化、以及互联网巨头借助自身的云计算资源平台布局,带动千行百业上云, 解决流程与业务创新。

从前端与后端的数字化,或能窥视数字化转型的趋势性方向。

互联网平台结合VR技术的应用在今天已经非常普遍,比如VR购物、VR看房以及互联网家装行业的VR装修等玩法都相对成熟了。

当前从国美打扮家到土巴兔、齐家网等互联网家装平台,都加入了VR技术,能让用户有直观独特的3D全息家居体验,用户除了能全方位查看全息影像,观看户型展示,更能与全息影像展开交互。

而VR看房也应用到了租房市场。传统的线上看房,都是采用图片和视频的方式,但线下看房要花费大量的精力体力。从行业痛点来看,房地产互联网广告平台模式最大的弊病就是滋生假房源,真实性难以判定。

而互联网房产与VR整合在一起,通过三维实景重建,建立3D化的体验,带来了多重体验改善——它首先是让消费者获得沉浸式的看房体验,自由行走在VR场景内,查看每一处细节。

其二是,无需亲自到现场体验,就可以获得所见即所得的现场体验。其三,基于空间三维数据,以AI生成一种更具交互性的VR视频,解决了房源的真实性的问题。

这其实是一种典型的前端数字化创新,它通过VR这种新型的数字化终端与房地产、装修等行业结合,一改过往看房不便利、假房源众多、信息隐私泄漏等众多短板。

再看AI机器人市场。

我们知道,工业机器人可以代替一部分人进行重复性的劳动,然而由于指令循环式的机械化,无法应用于家庭、商场、医院等复杂环境中。

2021年央视春晚上,红色机身搭配祥云图案的「拓荒牛四足机器人」亮相,让服务型机器人进入大众视野。

这类AI机器人关键是解决了两个核心的技术难题:其一就是赋予机器人感知的能力。其二是给机器人做好整个任务的长链条规划。具备对指令进行解析,进行分层任务分解的能力。

通过这两个能力的完善,它就有机会针对行业的痛点改善交互模式服务于众多的行业之中。比如在机场、银行、购物中心等商业场景中,机器人能够帮助企业减少人力资源支出,帮助人们快速获得咨询回应。

某种程度上,这类探索更多是聚焦于如何更好的服务于人的问题,但如何利用机器人来更好地服务到社会更多细分群体,是它未来的考验。

此外,在新能源汽车行业,蔚来的换电布局是基于行业的电动车充电痛点而挖掘出来的新模式,在今天,电动汽车的电池电量焦虑无疑是当前消费者购买电动车的最大的焦虑与痛点。

对此,蔚来提出了车电分离、电池租用的商业模式,背后的核心是蔚来把换电站、充电桩、电池、专员通过数字化搬到了云端,实现线上线下同步。它本质上是在电池技术短时期内难有突破的现实条件下,拿出的一种基于解决车电分离的问题、快速换电的新解决方案。

再看电视行业。

在今天,手机与PC已经抢夺了太多时间,人们正在形成用手机、平板看电视的习惯,电视的发展前景在哪里?

从整个行业来看,电视行业经历了一轮曲线发展,在2014年左右,中国智能电视行业的发展达到顶峰。随后在2016年进入低谷。

但2019年华为智慧屏之后,小米、海信、TCL等相继发布首款智慧屏。智慧屏的出现,让电视行业进入到家庭互联网的时代。

在雷鸟科技CEO李宏伟看来,电视行业发展经历三个阶段,第一阶段是以显示技术为主的传统电视,第二阶段是以观看在线内容为主的智能电视,第三阶段则是成为一部55英寸手机的智慧屏。

雷鸟科技的智慧屏玩法是融合在大屏电视上建立了一个短视频频道,即当用户想看短视频或其他场景的时候,它可以旋转成一个竖屏。

某种程度上,智慧屏是在传统电视的基础上,为用户提供更丰富、更个性化的使用体验(如视频通话、AI健身、实时互动教育等),重构了人机交互。

综上从VR看房、AI服务机器人、VR装修,智慧屏、蔚来换电站等案例中,其实都能看到前端数字化重做的理念。

它们都是看到了行业的痛点与短板,以及新阶段的消费需求(比如贝壳看到了平面图片的假房源问题,智慧屏玩家们看到了大屏需求与消费形态的转变),然后借助了新的终端技术,新的计算平台玩法嫁接,推动行业游戏规则的改变。

前端数字化更倾向于从一个产业原本存在的痛点与问题入手,通过终端交互的创新,带动用户体验的升级,试图打破原本产品业务增长的瓶颈,通过体验创新带动新需求。

二、后端数字化:借助数字中台、云计算、SaaS等实现B端生意突围

如果说前端数字化更多面向消费互联网赛道,而后端数字化创新则更多是面向B端产业互联网赛道。

在今天来看,从国外亚马逊微软,到国内BAT、华为、字节跳动,它们当前的战略是集体To B,争夺云计算赛道蛋糕,这是平台型巨头带动后端数字化的一个侧面。

在当下这些巨头玩家们的布局战略来看,存在诸多共性:

首先是巨头们To B都是主打技术输出,赋能各行各业。亚马逊、阿里云,腾讯云、百度云、字节跳动火山引擎等都在以技术输出、赋能各行各业的方式在To B市场跑马圈地。

其次,都基于自身业务发展特色提出了相关的服务与解决方案——当前,一方面,腾讯云有 “数据驱动” 解决方案、阿里云有 “推荐算法” 解决方案,火山引擎有“智能增长技术” 。

另一方面,BAT字节跳动等众多大厂开放了比如钉钉、企业微信、飞书、如流这些工具,可以免费被中小企业使用。

其三是大厂凭借C端业务的巨大体量,都在输出数据中台。

而从平台商业模式的演变来看,字节跳动与腾讯、阿里等巨头型玩家的商业化路径有类似之处,即首先是通过入口级流量型产品聚集起规模化的流量与用户进行流量变现,然后切入B端市场,开始进一步输出技术价值(大数据、人工智能、云服务等)。

综上来看,从BAT到字节跳动来看,它们就是借助了数字中台、云计算等底层基础设施的能力,来推动平台数字化赋能模式与用户增长模式。

在目前,基于强大的数据分析能力来实现用户精准定位,最直观的例子是电商行业,无论是基于消费者偏好的广告投放,还是基于对用户群体需求行为数据分析,结合在线人群识别技术,电商APP总能精准卡准你的偏好与需求。

此外,在技术价值输出层面,百度腾讯等玩家也带动了自身的云服务能力在营销、工业、金融等多个行业成功落地。

而传统企业后端数字化的本质就是把人工、线下的经营模式搬到线上去,通过互联网软件技术来实现获客与增长。比如传统的企业增加了ERP系统、CRM等。

而SaaS是后端数字化的典型。所谓SaaS,也就是软件及服务,很多中小企业都会选择SaaS提供企业服务。

早在2016年知识付费兴起,作为创投的一个新风口,当时的互联网行业里纷纷涌现了像得到、喜马拉雅、千聊、荔枝微课等知识付费平台。

但发展到后来,教育培训与知识付费费行业越来越倾向于需要一个专业化的工具来实现内容的获客引流。而知识服务SaaS平台就这样应需求而生。小鹅通、千聊、荔枝微课是其中的典型玩家。

小鹅通是基于微信生态的SaaS服务工具,客户可以基于这个工具在微信里运营私域流量,打造自己独立的知识店铺,围绕着教育与知识付费业务,实现引流获客、线上用户运营,帮助商家打造完整的业务闭环。

同类型的还有千聊和荔枝微课,它们作为知识支付平台工具,可以通过SaaS系统,帮助创业者建立自己的知识商店。

在SaaS服务工具中,CRM的普及化程度相对较高。从字面意义来看,企业用CRM来管理与客户之间的关系,从而支持有效的市场营销、销售与服务流程。

它的本质是把企业的组织架构,业务流程,运营模式等通过软件系统的形式固化下来,是一种创新的企业管理模式和运营机制。

由于CRM是企业面向外部销售、客户服务的部分,在数字化过程中,它与业务增长具备直接关联性,也因此最快被企业接受。

国内企业服务领域机构T研究发布了《2021中国CRM数字化全景实践研究报告》,报告指出,在经历了“疫情”黑天鹅事件后,中国市场中的CRM品牌反而逆增长趋势。

特别是在大量业务必须线上化、数字化加剧的双重驱策下,CRM成为了企业抵御风险、保持增长、以客户为中心的转型必要选项。

SaaS服务工具是数字化转型的大势下一股代表性的力量,他们为企业提供一种获客引流的数字化工具,增加了与客户接触的触点。

有业内观点认为,传统企业软件之所以到了规模化增长的天花板,是因为没有解决服务产能问题,而SaaS的运营本质是服务的管理,即通过高效的工具系统来支撑,围绕获客、留存、增长的全链条的服务。

因此,SaaS服务作为数字化转型中的一股重要力量,它试图帮助增加客户接触机会,实现更高的销售额,说到底,企业的数字化转型,其中一个重要驱动力还是利益驱动。

如果说前端数字化创新更多偏向于消费互联网赛道,通过终端交互创新发力行业的痛点,那么后端数字化其实更偏向产业互联网,更多借助了数字中台、云计算、SaaS等底层基础设施的变革,来实现了产业化B端生意的突围。

三、数字化转型的难题、痛点以及未来

也就是说,从计算平台交互模式的不同,各行业企业有了前端数字化与后端数字化不同发展与创新模式。

从趋势来看,未来所有的企业都将成为数字型企业。如前所述,对于众多传统企业而言,它首先是利益驱动,这决定了它关注降本增效,但更关注投入产出比的问题。

从业务模式来看,前端数字化更多是聚焦通过产品层面的技术创新来实现业务与产品体验破局,而后端数字化更多是基于数字化技术(如大数据、云计算、人工智能等)来推动企业组织转变业务模式,组织架构。

前端数字化它更多聚焦于解决客户的现存痛点,比如:

  • 家装、房产相关市场可以利用虚拟现实和三维建模技术为顾客提供仿真体验;
  • 酒店行业、汽车行业提供基于智能手机的无钥匙产品化体验;
  • 餐饮行业已经实现了扫码排队、点菜服务等。

而后端数字化更讲究从数字渠道有效触达目标顾客的能力,目前围绕微信、抖音快手、头条、淘系等各个内容平台,出现了非常多的营销获客的解决方案,这本质是借助后端数字化的模式来实现业务的线上化营销突围与创新。

而“上云”也已成为后端数字化转型的基础,从产品、业务再到运营和服务等各种转型层面,通过“上云”获取算力资源实现对用户需求的精准定位都变得必不可少。

来自全球知名数据机构IDC的报告显示,疫情加速了全球以云为中心的IT转换,预计到2024年,全球整体云计算产业规模(包括云服务、云相关服务和云基础设施建设)将达1万亿美元以上,而在中国将达到1000亿美元以上。

有业内人士指出,为什么传统商超干不过电商?因为传统商超是凭经验来判断市场平均需求,而电商则是精确量身定制,当前C2M、社交电商等新模式开始进一步升级了这种精准定位能力。

对于中小企业来说,数字化转型无疑也面临着众多难题,一方面是面向内部,数字化转型需要企业运营体系、组织架构、技术开发等各种力量的配合,打破部门之间的数据壁垒与业务流通壁垒。

尽管不少企业内部有管理升级和业务创新的需要,但在成熟的、利益机制板结的传统大企业内部,实现起来并不容易。

另一方面是面向外部,挑选哪家厂商的服务,平台的解决方案是否与自己的业务适配等等,这些顾虑无形之中给企业增加了采购风险与相应的损失与误差。

这事实上也是对提供云服务的巨头的一大考验,在云市场,你给客户提供的能力是否有助于帮助企业建立壁垒,形成差异化的竞争能力,这是关键。

在今天,从工业、金融到地产、零售等都行业都已经实现不同程度的数字化转型,实现了对业务的局部改善。但从未来趋势看,企业到底应该走向哪一条路,其实关键是看其本身的模式是产品创新驱动还是服务、业务创新驱动,或者说是两种情况的融合。

这往往都是由企业的商业模式或生意模式决定的——产品创新驱动为主的商业模式对应的更多是以前端数字化为主,而业务销售创新驱动的则更多是以后端数字化为核心。

从前端数字化发展趋势来看,它在电商、零售领域中已经应用得相对成熟了,在互联网平台经济模式中,融合AR与VR技术等新一代交互终端带来前端用户体验创新方面还存在巨大的机会。

而前端数字化程度越高,沉淀的后台数据就往往越丰富,这往往对于后端数字化的改造与升级的推动作用就更明显。

因此,这两种数字化模式之间也没有明显的界限,在多数情况下,企业需要融合这两种数字化模式的创新,实现前后端数字化的双向升级,在此基础上,再考虑投入产出比的问题。

美国学者尼葛洛庞帝在其1996年出版的《数字化生存》一书中提到对未来的畅想:人类生存于一个虚拟的、数字化的生存活动空间,在这个空间里人们应用数字、信息等技术从事信息传播、交流、学习、工作等活动。时至今日,尼葛洛·庞帝的很多描述已经成为现实。

在今天,每个人手机里小小健康码的背后,其实就是“数字化”城市治理的一种表征。

综合来看今天的数字化转型,我们发现,前端数字化讲究技术和需求挂钩,与投入产出比结合,从解决实际的需求与痛点出发拉动技术与市场的创新进度。

而后端数字化更多是基于对业务数据充分而高效的运用,实现组织经营的完全数字化,从而提升企业运营效率。

四、结语

数字化的大潮正在到来。

在这个大时代下面,谁能站到浪潮之巅,就看是否能找到合适的突破口,实现从前端数字化层面的用户体验的突围与升级,到后端的数据化基础设施的指导结合起来形成综合性的竞争力,继而顺应时代潮水流动的方向,成为潮水的一部分。

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

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



文章来源:人人都是产品经理    作者:王新喜

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

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

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


快来温习!2021年占据主导的8个UI和UX趋势

ui设计分享达人

今天和大家一起温习下2021年占据主导的8个UI和UX趋势,干货建议提前收藏

没人能够预测未来会发生什么,但是在数字世界中,趋势确实存在于设计师的圈子中,并且在有规律的演化中。大家可以已经看腻了不少趋势研判文章,但是,适当总结一下当年的趋势,把这个时间线拉长,你会觉得非常好玩。从移动端设计刚开始流行的时代,到现在,设计趋势都发生了哪些变化呢?它们是不是又会返祖,复古?周而复始?咱们不得而知。

虽然2021年已经过去一半,不过,今天咱们还是先Review一下2021年正在流行的几个设计趋势,加深一下印象吧!

当然,各位设计师,趋势仅仅是一种现象,想要做的出圈,与众不同,我们必须站在趋势之上,做出自己的创新,这样才能在千篇一律的设计中独当一面。

一、UI中的3D元素

3D 图形越来越多地出现在 Web 和移动界面中。毫无疑问,将各种 3d 图形应用到移动和 Web 界面是一项相当大的挑战,需要良好的技能和艺术眼光才行。在我们的 UI/UX 设计中添加 3D 元素有很多好处:

  • 让用户更好的理解设计意图和元素
  • 让用户流程的设计更加轻松有趣
  • 可以实现360 度的演示
  • 3d 元素看起来对用户更具吸引力,从而触发他们的长期参与

ByMako Tsereteli

二、玻璃拟态(Glass Morphism)

玻璃拟态是大多人更喜欢的最新UI设计趋势,它引人注目且色彩缤纷,这种趋势兼顾透明度和层次感。玻璃拟态设计给人以磨砂玻璃的感觉,近一段最受欢迎的趋势。这种风格深受苹果在 2013 年推出的 IOS 7 和 windows vista 中首次引入的类似概念的影响。在许多情况下,如果使用得当,Glassmorphism 可以使网站和应用程序对用户更具吸引力。

ByMahmudul Hasan Manik

三、暗黑模式(Dark Mode)

深色主题现在已经成为应用必备的界面了。手机的白色界面可能对我们的眼睛造成更多的刺激,这就是所有应用程序和网站都加入了暗黑模式设计的原因。暗模式有一些我们应该遵循的特定规则。深色主题的主要优点是在弱光环境中具有更好的可读性。作为 UI 和 UX 设计师,我们应该明白它的主要作用,它主要是减少了用户的眼睛疲劳并提高了夜间的可读性。

ByJulius

四、无色界面(原词Colorless)

色彩理论知识在每个 UI 和 UX 设计中都至关重要。正确使用颜色对于为您的客户创造正面形象很重要,这就是颜色在 UI 和 UX 设计中扮演重要角色的原因。大多数 UI 设计师都使用鲜艳的色彩来将用户的注意力集中在重要元素上,并使我们的设计令人难忘。下图分别为单色调和双色调界面。

By Resuscitation

五、包豪斯风格

包豪斯的风格通常被描述为艺术和手工艺运动与现代主义的结合。包豪斯设计几乎没有装饰,注重平衡的形式和抽象的形状。今天的 UI 和 UX 设计,也可以理解为包豪斯的复兴。包豪斯设计在UI设计上的核心,就是将设计简化为必要的功能,使其美观和轻松,以及精心制作每一个小细节。

包豪斯设计几乎没有装饰,注重平衡的形式和抽象的形状。今天的 UI 和 UX 设计也是包豪斯风格的复兴表现之一。

By Beto Garza “Helbetico”

六、白背景及颜色

在当今的设计中,白色背景越来越受到大家的欢迎。了解色彩心理学是创建配色的一个关键方面,这在数字设计中效果很好。吸引用户的最佳方式是通过“色块”平衡单色背景色与亮色,以突出数据中的重要内容或者异常提示部分。少即是多,当您在 UI设计中使用较少的颜色时,这将对用户更具吸引力和亮点。

By Resuscitation

七、UI中的动画插图

插图是用户界面中更直观的视觉阐述,也一直是UI设计中长盛不衰的“趋势”之一。动画插图,在与用户交互过程中为UI注入了强大的生命力。它帮助用户获得更立体的反馈,为创建更生动的微交互创造了条件。

By Rachelizmarvel

八、极简主义

极简主义是 UI 设计中使用最多的“风格”之一,它有助于改善用户体验。在我们的 UI 设计开始极简设计之前,有必要了解术语“极简”的含义以及为什么极简在 ui 中很重要。下面是极简主义的特征:

  • 简单
  • 清晰度高
  • 富有表现力的视觉层次结构
  • 凸显每个元素的功能

By Shakib

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

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



文章来源:人人都是产品经理    作者:Tzw_n

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

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

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


echarts自定义图例组件

前端达人

效果图如下
在这里插入图片描述

//图例组件
        legend: {
          top: 'center',
          right: 30,
          data: [],
          width: "auto",
          itemWidth: 10,  // 小方块尺寸
          itemHeight: 10,
          textStyle: {
            color:'#90CCFF',
            lineHeight:20,
            // 通过rich自定义尺寸,加宽度使百分比及数值各自对齐
            rich:{
              a:{
                width:100,
                align:'left'
              },
              b:{
                width:40,
                align:'right'
              }
            }
          },
          orient: 'vertical',      // 竖向排列
          // 通过formatte自定义格式
          // 因为formatter的参数里只有name一个参数,所以需要通过获取的数据匹配显示
          // 这里的optionData是获取到的数据,格式为
          // optionData:[
          //  { value: 47.01, name: "水果" },
          //  { value: 31.67, name: "蔬菜" },
          //  { value: 12.51, name: "禽畜" },
          //  { value: 8.24, name: "禽蛋" },
          //  { value: 7.27, name: "水产品" },
          //  { value: 6.32, name: "其他" }
          // ],
          formatter: (name) => {
            var total = 0;
            var tarValue;
            this.optionData.forEach((item,i) => {
              total += Number(item.value)
              if (item.name == name) {
                tarValue = Number(item.value ? item.value : 0)
              }
            });
            var percent = ((tarValue / total) * 100).toFixed(2)
            let arr = [
              '{a|'+name+" : "+percent+'%}'+'{b|'+tarValue+'张}'
            ]
            return arr
          }
        }  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

自定义legend的方式就是这样,遇到格式不同的可以参考上面的方式自定义

单独定义echarts中每个图例的样式,自定义图例的点击方法

 

//用不同样式的图例用数组写对应图例的样式
                legend:[{
                    top: "15%",
                    right: "24%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    itemWidth: 27,
                    itemHeight: 16,
                    data:[{
                        name: "农药",
                        icon: "circle"
                    },{
                        name: "LOL",
                        icon: "rect"
                    }]
                },{
                    top: "15%",
                    right: "15%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    itemWidth: 33,
                    itemHeight: 16,
                    data:[{
                        name: "农药+LOL",
                        icon: "image:///soyking/static/image/echarts/merge.png"  //引用自定义的图片
                    }]
                },{
                    top: "15%",
                    right: "15%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    data:["\n","\n","\n","农药占比","LOL占比"]
                }],

 

结果:

 

自定义图例的方法 (点击图例,显示图例的选中结果) 

var bar = echarts.init(document.getElementById("barDiv"));

//自定义图例的方法
            bar.on("legendselectchanged",function(obj){
                //获取图例选择的结果
                var selected = obj.selected;
                for(var i in selected){
                    alert(selected[i]);
                }
            });


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

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


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

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

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



Echarts中关于自定义legend图例、文字

前端达人

代码如下

 var data = [ { name: "一次检验数/条", value: 150 }, { name: "多次检验数/条", value: 80 } ]; 
 var option = { legend: { show: true, left: "center", top: "245", itemHeight: 13, itemWidth: 13, itemGap: 35, icon: "circle", data: data, formatter: function(name) { var total = 0; var target; var value; for (let i = 0, l = data.length; i < l; i++) { value = data[i].value; total += data[i].value; if (data[i].name == name) { target = data[i].value; } } var arr = ["{a|" + name + "}", "{b|" + target + "}"]; return arr.join("\n"); }, textStyle: { rich: { a: { color: "#B6B6B6", verticalAlign: "top", align: "center", fontSize: 12, padding: [0, 0, 28, 0] }, b: { align: "left", fontSize: 18, padding: [0, 10, 10, 0], lineHeight: 25, color: "#181818" } } } }, 
    

echarts legend 自定义图例

legend: {

                    selectedMode: true,
                    top: 0,
                    right: 0,
                    orient: 'vertical', // itemWidth: 24, // itemHeight: 2,  textStyle: {
                        fontFamily: 'ABBvoiceCNSG-Regular',
                        fontSize: 12,
                    }, // icon: 'rect',  data: [
                        {
                            name:"高严重等级报警",
                            icon:'rect',
                        },
                        {
                            name:"低严重等级报警",
                            icon: 'rect' },
                        {
                            name:"健康度",
                            icon: 'line' }
                    ]
                },

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

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


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

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

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



由马斯洛需求延伸出的产品需求层次设计

资深UI设计者

编辑导语:相信大家都听说过马斯洛需求层次理论,那么把它应用到产品需求层次设计中,会是怎样的场景呢?作者两个方面给我们分享了如何运用该金字塔进行产品设计,我们一起来看看吧。


一、需求层次理论

美国心理学家亚伯拉罕·马斯洛 (Abraham Maslow)在 1943 年的论文《人类动机理论》中提出了人类需求的心理层次理论。用金字塔中的五层模型来表示人类的需求。从下到上,需求分别是生理、安全、社交需求、尊重和自我实现。

该理论认为,人类在转向更高级的需求之前,会先满足其基本需求。例如:一个饥寒交迫的人不会集中时间和资源寻求伴侣(社交需求),因为他首先满足生存需求(生理上的)。

二、产品设计与马斯洛理论

随着时间的推移,马斯洛的理论被改编并应用于许多新领域。在产品设计领域,2010 年史蒂文·布拉德利 (Steven Bradley)提出了一套有用且实用的规则即“需求设计层次”。

用于创建新产品和评估现有产品的设计。与原始理论一样,必须首先满足设计的基本需求才能进入下一阶段。Bradley 理论的五个层次是功能性、可靠性、可用性、熟练性和创造力。

根据该金字塔原理,可以考量产品在对应的每个阶段要满足的功能要求。

1. 功能性

产品设计最基本但最关键的部分是其功能。打车软件、聊天应用甚至一个杯子是否实现了其主要功能?如果没有,那么进入其他发展阶段就没有什么意义了。

例如,一个水杯如果不能盛水,不能用来饮用,那么它设计和包装是否漂亮就无关紧要。

它是无用的,它对消费者就毫无价值。随着产品的核心功能变得更加丰富,这个过程也会变得更加复杂,需要更多考量。

正如图表的比例所表明的,产品团队精力应该专注于完成主要流程和功能。实践方法:明确产品的定位和用户画像,始终深入研究你的客户期望你的产品用来解决什么问题。可以充分地进行调研。例如:现场调研、用户访谈、利益相关者访谈等。

2. 可靠性

可靠性与功能性是同样重要的设计基础。用户能否相信该产品能100% 正常工作?如果用户不相信你的产品在他每次需要时都能正常工作,他们是否愿意购买使用?

在创建可靠的产品时,关键是彻底的测试。实践方法:进行可用性测试并确保给用户能提供及时帮助。

3. 可用性

可用性需求强调用户轻松使用你的产品的能力。用户能否以最少的指导弄清楚如何使用你的产品及其每个功能?例如,一款图片编辑的应用裁剪和保存功能不直观,那这款产品可能很难被认可。

实践方法:可参考尼尔森可用性原则的方法。即:系统状态的可见性、系统与现实世界相匹配、用户控制与自由、一致性与标准化、防错原则、减少认知负担、使用灵活性和效率优先、简约设计、提供帮助文档。

4. 熟练程度

熟练程度是评价真正好的设计的一个标准。为了满足这一层要求,设计师需要问问自己产品的设计是否有助于用户更好地使用该产品。

例如:一款针对老年人设计的社交软件除了基础的聊天功能外,它应该提供关于该产品的诸多视频、图文类教程,来引导用户更好的使用产品。

实践方法:要时常思考“这个产品还能做什么?”。它是否会引导用户发现一种新的更好的做事方式?从某种意义上说,它是进步的吗?通过与设备的每次交互,用户是否会发现更多有关其功能的信息?

5.创造力

证明了产品能够可靠地履行其核心职责后,下一步是通过创新来满足其他需求。以跑鞋为例,除了功能属性外还可以展示其稀缺性、款式、地位等附加功能。

实践方法:分析用户心理、行为、痛点和动机。发挥创意,寻找创造性的方法满足用户的需求,为用户创造峰值体验。

以下是来自medium的延伸案例:原文作者:(NATHAN TENDIDO)布拉德利对马斯洛需求层次的改编有助于我们来理解为什么某些设计比其他设计更好。

为了应用 Bradley 对需求层次的翻译,我将使用三个搜索引擎(Google、Bing 和 Ask)作为示例来找出明天的天气。

(1)功能——它有效吗?

金字塔的底部和最高层是其整个总和中最不有趣但最基础的部分。没有效果的产品有什么用?由于我们正在评估搜索引擎,我们可以测试三个搜索产品是否可以正常搜索并得到有效结果。

毫无疑问这三个搜索引擎都运行良好

(2)可靠性——它在我需要的时候工作吗?

这一步和第一步同样重要。决定了我对该产品是否信任。幸运的是,这三个引擎在我需要的时候依旧正常工作,即使是在凌晨。

(3)可用性——我能弄清楚如何让它工作吗?

好的设计可以通过强化主要的视觉元素对用户进行引导。这三个搜索引擎都将搜索栏作为主页上最突出的部分。

谷歌搜索栏

必应搜索栏

Ask搜索栏

比较视觉浏览轨迹

当返回搜索结果时,清晰的视觉层次感有助于用户获取他们想要查找的信息。如果没有清晰的视觉层次结构,用户可能很难完成任务。Ask的搜索结果布局与 Google 和 Bing 相比,明显就多了一层操作,更不易找到想要的结果。

(4)熟练程度——它能告诉我如何让它更好地工作吗?

熟练程度是好的设计与优秀设计的区别所在。熟练程度要求设计可以帮助用户从头到尾成为专家。

三个引擎都使用了联想搜索,以便更高效地引导用户到达目标。虽然谷歌提供了更好的质量建议,但 Bing 的搜索栏在网页上更高,让用户可以看到更多的建议,而不会被 iPad 键盘挡住。

Ask 在这方面则有所欠缺。Google 和 Bing 还提供了其他搜索分类选项。

(5)创造力——该产品对我还有什么用?

在这一点上,这些产品已经完成了它们的基本功能,基础功能外还包含了更多友好的设计。通常主要是针对用户未来的访问进行个性化设置或提供工作空间以完成更多工作。

Google 提供了多种工作区工具,而 Bing 实际上奖励使用其网站的用户!

虽然上述案例并不是要抨击一个网站,但是当 Bradley 的需求设计层次结构被用作通过判断的标准时,上述三种产品之间的差异变得更突出。

这并不是说 Ask 是一个糟糕的设计。在某些地方,Google 看起来与 Ask 目前的表现完全一样。这三个网站都可以完成搜索引擎的基本功能。

然而,当把Ask放在 Google 和 Bing 旁边对比时,Ask 设计中的劣势变得更加明显。

三、总结

如上所示,Bradley 的设计层次结构是思考大多数产品设计的有用过程。

然而,就像马斯洛的原始理论也有质疑一样。

马斯洛的等级制度也难以解释诸如“饥饿的艺术家”这样一个人为了追求更高的需要而忽视低级需求的情况。几乎没有证据表明人们有动力一次只满足一个需求水平,除非在需求之间存在冲突的情况下。

布拉德利的理论也不完美。对需求设计层次的批评包括以下问题:设计是否必须可靠才能可用?不能同时满足这两个条件吗?

例如:有些搜索引擎可以满足基础的搜索功能,然而在基础之上拓展的低级广告引导体验是好的吗?设计需求的层次结构绝不是完美的,有可能你参考此结构所做的设计相较之前还要糟糕得多。

然而,更完美产品需要超越这种规范去进一步研究。例如:可以将更精细级别添加到金字塔中。还需要设计者进行更多地思考。

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

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


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

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

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

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

日历

链接

个人资料

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

存档