首页

红点奖作品揭秘,带你了解AI时代的可视化设计

鹤鹤



引言


随着AI技术在工业、交通、医疗、应急等to B、to G(政府)场景中广泛应用,呈现了今天“行业智能”遍地开花的局面。但在AI技术的应用推广中存在着一个普遍现象:AI技术复杂难以理解,和客户沟通成本高。其根本原因是:通常客户对技术了解有限,使得AI技术与业务场景应用间存在明显的信息鸿沟。

面对这些问题,作为设计师我们能做些什么呢?


对于设计师来说,我们的任务就是把复杂变得清晰简单而且美,所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法,把无形的、复杂的技术,通过有形的、可视化的方式展示出来,让客户更直观、清晰的感受到AI技术能力,看得懂其在业务场景中产生的价值。


下面我们就以“应急管理-森林火灾智能监测解决方案”为例,介绍下我们的设计思路。同时,我们的设计方案也得到行业认可,获得了2020年Red Dot Award国际设计大奖。

(1-2020 Red Dot Award)

(2-《森林火灾智能监测解决方案》)


正文


森林火灾等灾害一直以来严重威胁着人们的生命和财产安全,百度与国家应急管理部成立“人工智能联合创新实验室”,开展应用技术攻关,希望能结合AI技术,以辅助风险评估、应急管理决策等。

 

在森林火灾监测中应用到的技术有 “遥感影像智能解译、现场态势与舆情智慧感知、安全类视频智能分析、边缘计算+AI、5G+人工智能、监管与救援智能装备、区块链、深度学习等”,这些技术名词复杂难懂,怎么让没有技术基础的客户快速理解它们的价值呢?

 

接下来我们将从“转换视角,营造情景,信息可视”三个维度分享设计过程。


一、转换视角,建立共鸣


站在客户视角,聚焦客户关注的核心问题,通过情景把内容有序组织起来,快速与客户建立共鸣,有效降低内容理解难度。


1、离客户再近一些

在任何项目中充分了解目标客户都是首先任务。B/G端客户的需求是非常明确的,他们最看重AI技术对业务的价值。“客户”这个称呼的背后包含了诸多角色,有技术人员、业务人员、决策领导层等,他们对AI技术的了解各不相同,我们需要让各角色都能快速的理解、看得懂真正有价值的内容。


2、玩转业务

森林火灾监测是一个非常复杂的过程,监测诉求从全球到城市,从火灾全貌到火灾局部,监测场景包括火点识别、火情趋势推演、救援指挥等多个场景,影响火灾的地理环境因素包括危险源、居民区、水源、道路等,气候因素包括天气、风力、温度等,救援因素包括设备和物资等。

(3-思路框架)


3、产品架构可以不那么复杂

以业务逻辑为基础,客户需求为核心,聚焦技术可以带来的业务价值。我们搭建了一个覆盖森林火灾智能监测全流程的解决方案。它可以精准识别全球森林火灾并自动报警,全方位监测火灾数据,智能推演火灾蔓延趋势、自动规划救援路线、实时监控救援人员和物资情况,多维度智能辅助救援决策,满足不同机构的监测诉求,让客户从方案中感受到AI技术的强大。


转换视角,有序组织内容,使产品架构符合客户心理,让客户能快速的理解、看得懂。

(4-产品架构)


二、营造情景,构建信任


真实还原场景,营造身临其境的视觉感受,通过场景代入加强客户对技术的信任和深入了解的意愿。


1、身临其境的震撼效果

三维立体场景,不但能满足更多维度的数据呈现,同时给观看者带来身临其境、掌控一切的感受。利用3D建模打造接近于真实地貌特征的虚拟场景空间,在光影效果呈现上,模拟日光的光照效果,使场景更加真实。

(5-全球场景)

(6-国家场景)

(7-火灾局部场景)


利用晨昏线、雪线、绿地的变化,表现季节、昼夜对于火灾的影响。

(8-火灾受季节影响)


2、像电影一样的观看体验

通过鸟瞰、环绕、穿行等镜头把从全球、国家到火灾局部的多个场景串联起来,清晰表达空间关系,带着客户更自然流畅的逐步深入体验。

(9-镜头转换)


3、扣人心弦地氛围营造

通过色彩基调和烟雾等特效的处理,营造森林火灾和救援现场危急、紧迫的气氛,调动观看者的情绪,并留下深刻印象。

(10-颜色设定)

(11-紧迫氛围营造-1)

(12-紧迫氛围营造-2)

(13-紧迫氛围营造-3)


三、信息可视,清晰传达

提炼核心内容,借助图形化手段,让客户以最直观的方式理解信息,大幅度降低内容理解门槛。


1、大胆地隐藏冗余内容

面对庞杂的信息,去粗取精,提炼各场景的核心内容,避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂,还要严格控制文字长度,保证内容可以被快速扫描和理解。

(14-内容设计)


2、给产品一个稳定的布局

遵守人的阅读习惯,强化主、次信息;统计数据浮于场景之上,形成内容上的空间感,又保证较高的扩展性。统一各视图的排版规则,稳定的布局,能避免打断观看者心流。

(15-布局结构-1)

(16-布局结构-2-GUI)


3、场景设计

用可视化的方式,帮助客户解读、分析复杂的技术和功能。如在火灾实况视图中,把火灾地点、蔓延趋势、蔓延速度,植被、危险源、风向等转换为视觉语言直观展示在场景中,并通过扫描线、等高线和光感的设计,突出科技感,强化AI技术为现有业务带来的强大的、智能化改变。

(17-火灾实况-GUI)

(18-火灾实况-GUI)


救援路线一目了然,使救援调度清晰有序。

(19-救援路线)


救援人员、救援物资、救援进度实时呈现,救援指挥更加有理有据。

(20-救援现场)

(21-动态数据)

(22-动态数据2-GIF)

(23-动态数据3-GIF)


最终大屏展示效果。

(24-全球视图)

(25-国家视图)

(26-区域视图)

(27-单个火灾视图)

(28-火灾实况)

(29-路线规划)

(30-救援现场)

(31-多端展示-GIF)

(32-点亮工业智慧,守护百姓安全)


三、结语


AI时代,在to B/G行业的商业化道路上,如何降低AI技术理解门槛,提高企业和客户间的沟通效率是设计师面临的巨大挑战。设计师需要突破设计边界,将设计回归到解决问题的本质上,为业务赋能。在后续的设计实践中,我们将继续探索toB/G业务的设计创新,探索如何通过设计让客户以最直观的方式理解产品,构建企业与客户之间沟通的“架桥人”。

 

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

文章来源:站酷   作者:ROC393

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

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

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







一秒就上瘾,这个风格简直让人欲罢不能!

lanlanwork


什么剪纸叠加风格?

剪纸艺术是最古老的中国民间艺术之一,作为一种镂空艺术,它能给人以视觉上以透空的感觉和艺术享受。传统意义上的剪纸,用剪刀将纸剪成各种各样的图案,如窗花、门笺、墙花等。
图片
图片
然而现今飞速流行起来剪纸风格,大多以软件设计完成。在设计中添加阴影、色彩等使用叠加效果,因此看上去层次和细节十分丰富。
图片
剪纸风格因其特殊的质感和造型美学,在现今越来越受到大众喜爱和设计师的追捧。特别是每年重要节日,比如中秋节和春节等,在礼盒设计和C端运营上都大量出现剪纸风格设计作品
图片
在复现传统节日氛围沉的同时,又将现代美学与剪纸风格融合,形成一种全新的视觉感受。
图片
图片

 

剪纸风格的基本特征

由于其独特的视觉特征,这种风格几乎可以立马被任何人识别。剪纸叠加风格在如今受欢迎是有其原因所在,除了其具有深厚历史底蕴,如今演变成现代感时尚设计。
可以用几个关键词来形容:简洁、形象夸张、层次叠加丰富、故事性、多层投影和纸张肌理效果。
现代剪纸风格,它打破了传统文化中单一的剪纸艺术特点,从而形成一种新视觉特征,出现在大众眼前,其几何化纸张感最具吸引力。
图片
剪纸风格色彩单纯明快,色彩要求在简中求繁,在对比色中求协调,尽量避免多余色彩噪音。
图片
多层的叠加,让图形之间互相带有穿插效果,让剪纸艺术风格不在扁平枯燥,而是富有更多细节表现。设计师通过投影、色彩等明暗关系营造层次。
除了本身带有强烈的艺术气息外,它还可以表达故事性和情感性等特征。
图片
图片

 

剪纸风格的应用

剪纸艺术风格在诸多领域中都有它的身影,目前也出现了很多优秀的设计案例,下面我们来一起来学习下这些案例。
#01. 平面设计中的剪纸风格
图片
图片
图片

 

#02. LOGO设计中的应用
图片
图片
图片
图片

 

#03. 动态设计中的剪纸风格
http://mpvideo.qpic.cn/0b78b4aaoaaaiyaoc37dovqfad6da4hqabya.f10002.mp4?dis_k=5e5f632c341fd30804918a7dd9dc0c02&dis_t=1629453344&vid=wxv_1945420369956306956&format_id=10002&support_redirect=0&mmversion=false
Sudio的纸艺术定格动画

 

http://mpvideo.qpic.cn/0b78c4aaoaaa5aaofbhdpzqfaf6da4lqabya.f10002.mp4?dis_k=99b1672f2acc8c7a01e2f587189400f0&dis_t=1629453344&vid=wxv_1945419139196518401&format_id=10002&support_redirect=0&mmversion=false
情人节定格动画

 

剪纸风格艺术家推荐

#01.Eiko Ojala
图片
https://www.behance.net/eiko

 

#02.Margaret Scrinkl

图片

https://www.behance.net/scrinkl

 

#03.Mary Komary
图片
https://www.behance.net/marykomary

 

原文地址:功夫UX(公众号)
作者:功夫UX
转载请注明:学UI网》一秒就上瘾,这个风格简直让人欲罢不能!

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

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

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

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


设计思维 | 在58同城,如何设计内容系列产品品牌?

lanlanwork



图片

随着部落的发展,内容的形态越来越多。身为视觉设计师需要整合设计不同的内容话题,运用设计思维,通过品牌设计来打造不同系列的内容运营活动。经过长时间的实践,我发现活动方案的最终效果是三方相互作用的结果。设计师、产品经理、内容本身,内容本身的包含了用户、第三合作方。涉及到美学、营销学、心理学、经济学等,围绕这三方的品位,相互冲突、启发、磨合、协作,最佳的设计方案处于三者的平衡点。下面就项目从视觉设计的角度出发,以部落内容为例向跟大家聊一下。
 

图片

面对大量的话题运营活动,我从品牌设计入手,打造了品牌系列感的一整套部落话题运营活动,让部落的用户对品牌形象产生信赖,持续参与到活动中来。在接到部落话题需求时,会主动发起和运营产品一起,以系列品牌运营出发点去做,以不同的话题去打造不同的系列运营。

 

01.我和我的朋友

《我和我的朋友》活动专题,58同城作为项目发起⽅,联合劳务茶馆,邀请朋友圈的企业好友,共同面对当下的企业发展、品牌服务以及 C 端声音进⾏⾏业交流与消费者传达。
 

· logo创意

从手写连笔字中找到灵感,用简洁等粗的线条书写,给人亲切、流畅的感觉。
 

图片

图片

· 海报宣传

 

图片

 

02.瞧别人家公司

最先部落对外合作项目,已经和十几家企业合作,打造了不同职业话题社区,将职业类信息更聚焦,让每一位用户都可以在职业上找到适合自己的圈子,进行职业生活的交流互动。栏目也带动了不同业务间更多不一样的合作形式,为未来创造更多可能性。

· logo创意

“瞧”字有吆喝的意思,我放大了这个字的比重,小喇叭植入到了字的右上方,喇叭口有放射状的虚线,logo整体用对话框围了起来,可以使它看起来更聚合。整体以字为主体,辅助元素也采用简洁的线条,现代感同时非常的易用。在不同企业话题里都能轻松适用。

图片

· 海报宣传

海报风格受到外部企业文化的影响较大,完全统一很难。但是我希望每张海报的主体都是企业真实的员工照片,员工的服装、展现出的状态,也可以反映出企业文化。不足之处是企业提供的照片质量很难控制,会影响到海报的效果。合作方的常常对海报的风格有自己的想法和目的,需要反复的对稿。
 

图片

03.小金库满兜

针对平台上的用户核心痛点:赚钱和找工作,尤其是疫情开始后,在很多人失业的情况下,我们打造了小金库的系列。通过邀请赚钱专家、创业专家、副业推荐官、以及本地商家的方式,通过直播的形式与用户交流分享,为用户推荐赚钱方法、帮用户解决赚钱难题,涉及领域包含餐饮/美业/母婴等品类。获得商家及用户的认可及好评。

· logo创意

从传统的书法汉字寻找灵感,把金币与汉字结合起来,并且做了倾斜,使之更生动,在空白区域点缀了星星,logo整体看起来更加饱满了。

 

图片

图片 

 

04.同行侃门道

 58部落打造的《同行侃门道》IP系列线上内容中,包含餐饮、装修、家政服务、美妆、财务服务、宠物等多个行业,更多行业陆续加入中。为部落用户带来赚钱等行业知识分享与就业避坑指南,还为部落用户带来了更多工作机会。

· logo创意

以“同行侃门道”作为logo的主体,用平直的笔画语言组合,把“门”“道”拟物化,整体倾斜带来了前进感。

图片

图片

· 海报宣传

用报纸的形式展现信息,这种方式可以把不同的第三方机构融合在报纸形式的框架里。

图片

 

05.掌柜专家计划

将建立商家社群,利用现有平台中小B的生意经验,产出赚钱红宝书,形成体系化课程,推广给想要赚钱的C,形成内容闭环。

图片

 

06.总结

品牌设计包装只是内容的展现形式,优质的内容才是关键,但是在内容的前期目标是获得更广泛的关注,那么品牌视觉设计的个性和独特就能产生很大的作用。logo在视觉中发挥着桥梁的作用,辅助元素和整个内容的的布局也非常关键。

 

参考资料:
《治字百方》-左佐
 
 

图片

 

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

作者:环铁艺术家


转载请注明:学UI网》设计思维 | 在58同城,如何设计内容系列产品品牌?

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

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

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

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




设计赋能商业变现初探

lanlanwork


关键词解读

为了更好的理解接下来的文章内容,笔者会首先对以下关键词进行解读:商业变现、设计赋能、价值链理论。

图片

关键词

1. 商业表现
杰克·韦尔奇在《商业的本质》一书中提到:商业归根结底是一项“团队运动”,必须依靠团队的力量。就企业而言,笔者解读为「商业」的本质是:企业团队(个体、群体)通过创造一系列的价值活动实现企业和外部客户之间价值交换的运行模式;而「变现」则是指在此系统中“企业收入-支出成本”所得的实际收入,提升收入总额和降低支出成本均可以实现“变现”的目标。

 

2. 设计赋能

设计师站在用户和业务的视角,能够从全链路的视角出发,洞察各利益相关者的关注点,运用专业的设计方法去挖掘产品和设计的机会点,最终促进业务持续健康向上发展。

 

3.“价值链”理论

价值链的概念最早是由美国哈佛商学院的迈克尔•波特教授在其著作《竞争优势》中提出的,称作“价值链分析法”。把企业内外价值增加的活动分为“基础活动和支持性活动”。基础活动即企业生产经营的主体活动,涉及产品的物质创造及销售、转移买方和售后服务的各种活动,支持活动是辅助基础活动,是通过提供采购、技术投入、人力资源、及公司范围的职能支持的活动。不同企业参与的价值活动中,并非每一个环节都会创造价值,只有特定的价值活动才能真正创造价值。企业要密切关注组织的资源状态,特别关注和培养企业在关键价值活动上获得竞争力。

企业保持竞争优势,既可以来源于价值活动所涉及的市场范围的调整,也可以来源于企业合作或调整价值链所带来的收益。

随着社会分工的细化和专业化以及互联网的普及和发展,价值链的内容也不断向前发展,目前已发展为“合作竞争的价值链”理论。

图片

合作竞争价值链

 

价值链理论包含4个构成要素:价值主张、运营模式、界面模式和盈利模式。

1.价值主张:包括价值主张、客户关系、客户细分三大部分。

  1. 价值主张:不但包含了企业的战略方向,而且包含了企业提供给客户满足其需求的价值项,比如“快捷的渲染服务-10s出高清效果图”。
  2. 客户细分:确定目标客户群体,并对其进行细分,探索不同细分市场的客户需求。
  3. 客户关系:是在明确用户需求的前提下,找到吸引顾客、留住顾客、转化顾客的方式,从而对所提供的产品和服务进行不断的改进以维系和形成良好的长期往来关系,C端业务中常见的客户关系即是“会员”。

图片

价值主张

2.运营模式:企业将资源和能力转化为产品服务的过程模式。包括关键业务、核心资源两大部分。企业的产品和服务作为企业价值创造的载体,需要通过一定的过程将资源和能力转化为产品和服务,通过优化流程、提高效率则可以减少该过程中涉及到的成本和费用。

3.界面模式:包含重要伙伴和渠道通路两个部分。通过渠道通路,企业可以将自身的产品和服务传递给客户,客户也可将信息、资源、能力等回馈给企业。而企业的合作伙伴,在一定程度上促成了企业的产品和服务的产生,是企业外部的重要资源。

4.盈利模式:包含包括成本结构和收入来源两个构造块,企业可以通过“开源节流”以实现商业的高效运作。

 

赋能维度提取

初步确定4个维度

可基于价值链模型从“公司角度”或“具体业务角度”去作分析,可更加灵活的应用该理论。但需注意,以上构成要素中,设计师很难全面切入,定要找准设计切入方向,才可发挥最大价值。

那么我们来看如何确定设计赋能维度?

一方面,在上述的价值链理论中,“客户关系”“重要伙伴”通常会有专业的商务、销售、售前、运营人员去维系,盈利和收入模式也会有高层管理人员进行制定和分析管理,设计师在工作链路上很难触达盈利模式和客户关系相关的内容。“重要伙伴”侧,设计师通常会进行客户调研、竞品分析等,以挖掘更多的产品机会点,促成业务价值达成,因此在赋能方向上,“重要伙伴”会合并到价值主张侧进行分析,不再单独展开来讲。

另一方面,基于价值链理论的指导,我们进一步提炼企业或具体业务的核心价值链:企业需要将资源和能力整合,去生产或研发承载企业价值的产品/服务;产品/服务经过销售到达客户侧,客户付费购买则企业产生营收。在这条关键链路中,「生产/研发链路」「产品/服务」「销售链路」「客户/用户」都是非常重要的环节且缺一不可。而设计师基于“全链路”的设计思维,利用丰富的设计研究等方法均可以在此四部分进行有效切入挖掘业务价值,因此初步确认将此四部分对应价值链中的「运营模式」「价值主张」「渠道通路」「客户细分」作为设计切入的赋能维度。「生产研发链路」和「销售链路」作为直接赋能“降本”和“增收”的关键链路可作为设计赋能的持续探索方向。

图片

确认赋能维度和方向

 

基于维度对业务进行分析,找到更加细分的赋能维度乃至设计机会点

虽然初步确认了赋能维度,但是对于设计师如何寻找设计赋能机会点尚没有清晰的思路,因此笔者从自己负责的房产业务入手,尝试进行分析和挖掘。以下为简要的分析,仅供大家参考。

 

1.价值主张:房企业务在当下重要的价值主张在于探索全链路的业务解决方案。

思考设计可以做什么:

  1. 目前的解决方案是否完整,能否在房产上下游继续拓展。
  2. 已经有的解决方案客户是否真正用起来,能否真正满足客户的需求?
  3. “数字化精装”到底如何做到数字化?
  4. 竞品做了什么?
  5. 如何链接到C端消费者?(客户对户型对喜好如何,对装修风格喜好如何)…

设计做了什么:

  1. 对新房营销客户的核心诉求进行分析,基于C端消费者的购房链路整理客户关注的数据,提供到产品侧进行参考。
  2. 对同类产品进行详细竞品分析梳理得出产品的基础功能、进阶功能、增值功能,并且将报告提供到产品侧在后续的产品设计中进行参考。
  3. 基于对业务现状的分析,整理出期望的业务表现,根据表现的内容整理出可衡量的指标以及寻找可切入的设计机会点。

图片

业务现状分析

 

2.客户细分:提供更加精细化的产品和运营策略。

思考设计可以做什么:

  1. 目标客户的类型?
  2. 不同地产大客户的共性和差异性?
  3. 形成清晰的地产客户画像?
  4. 地产客户下的细分角色?不同角色的关注点?…

设计做了什么:

  1. 通过“桌面调研、定性调研”的方法调研“新房营销”场景下的主要用户角色,梳理得出“决策者-营销总、管理者-案场销售主管、使用者-置业顾问”的用户角色画像,聚焦所服务客户(用户)的特征、动机、日常工作分析,为后续的产品功能规划提供参考。
  2. 根据当前客户细分情况,整理在客户细分侧期望的表现,整理可衡量标准以及可切入的机会点。

图片

目标客户分析

 

3.运营模式:将资源和能力转化为产品和服务的过程。前文已经提到,优化流程、提高效率均可以减少该过程中涉及到的成本和费用。针对此部分笔者还未进行系统分析,因此简单说明。

  1. 一方面可以思考产研基建能力建设是否完善,是否有进一步优化的空间。
  2. 另一方面可以思考产研、商务、运营等角色涉及的协作流程是否高效,能否进一步提升人效。

 

4.渠道通路:跟增收有直接的关联,在C端业务中表现为「购买转化链路」,而在面向大B客户的业务中,可细拆为“产品/服务”从「触达客户–>新签–>续约」的全链路。

图片

面向大B客户的转化链路

 

思考设计可以做什么:

运用链路分析法,对转化链路进行系统梳理,并明确链路中期望的目标表现,发现可用于衡量的数据指标和可挖掘的机会点。参考下图以“触达链路”为例进行详细说明:

图片

“转化链路”分析

 

首先,需要对线上和线下的触达客户渠道进行枚举和系统梳理。比如线上涉及到官网、推文;线下涉及到展会、沙龙。线下渠道包含宣传册、折页等,可透出二维码引流到线上渠道;线上渠道还可以通过推文转发分享、搜索等进行引流。

其次,在触达链路中我们期望的目标表现是什么呢?在这个过程中,我们期望越来越多的人进入官网;希望线上的推文被大量分享;希望线下触达的客户量越多越好,期望品牌曝光次数越多越好,因为品牌曝光意味着触达客户量的机会增加,触达客户量也有可能随之增加。

再者,如何衡量目标是否达成呢?最终指标:一方面是触达客户数量,触达量增加很可能意味着转化率提升;另一方面是咨询率,在触达客户增加的同时,咨询率提升意味着对业务感兴趣的客户多,转化的可能性就更大。过程性指标包括官网访问量,推文阅读量与分享量,单场活动触达客户量等。触达链路的主要目标是引流和拓客,最终转化与否还要依赖新签过程,因为转化率不会作为触达链路的最终指标。

(此处推荐大家使用GSM模型的方法确立目标表现及衡量指标,在后续的文章中会进行详解,本文暂不详细说明)

图片

GSM模型

 

最后,在触达链路中,切入赋能的方向在哪里呢?

一方面线上线下的渠道能否进一步拓宽?-分析现有渠道,线下客户扫码二维码后打开的是H5页面,关闭页面后无法再次查看页面,进而无法了解业务。因此建议增加“小程序”作为线上客户留存渠道,一方面可以依赖微信生态方便客户再次查看,另一方面在留存的同时还能提高客户间的传播分享。(下图是基于已有小程序时的触达链路)

另一方面,已有渠道的品牌曝光量能否增加?-分析现有的官网,在官网中透出“酷家乐地产业务”的入口较深,且布点少,这些都影响了业务曝光度;于此,我们可以去思考,SEO搜索酷家乐时是否可以透出“酷家乐地产业务”?线下渠道是否可以增加可被客户带走的物料?线下展会中播放配音视频,通过声音传达到更多客户处,然客户产生兴趣,吸引客户前来了解业务。

沿着上述的思路和方向,我们可以思考更多可切入的方向与机会点。

 

初步归纳整体研究思路

上述的分析是基于价值链理论,从「价值主张」「客户细分」「运营模式」「渠道通路」4个维度进行切入,从实际业务着手运用专业的设计方法进行分析,整理得出期望目标达成的具体表现,以及确定目标可衡量的数据指标或软性评估体系,最后挖掘出可赋能的方向以及机会点。

图片

从业务着手,尝试挖掘赋能方向和机会点

 

由此,笔者也形成了相对清晰的研究思路:

基于价值链理论,选取赋能变现相关联的维度。从维度切入,运用专业的设计方法对业务进行系统梳理,挖掘维度下更细分的方向,并且确定相关的评估体系用以确保目标达成。由于单条业务挖掘的方向可能有限,因此后续需要对其他典型业务进行分析,尽可能从业务实践中抽离赋能方向,并且最后应用到其他业务实践中。

图片

设计赋能商业变现的研究思路

 

影响因素:

1.产品/业务的生命周期:

产品/业务所处的生命周期不同,所选择的维度也会存在差异性。笔者当前所负责的业务还属于从0->1阶段,业务品牌影响力需要不断增大,对外营销推广渠道也需要不断拓展,因此在业务的品牌影响力建设、渠道拓展方面都存在可深入挖掘的方向;而对于其他相对成熟的业务,赋能维度仍需要侧重在运营模式优化(内部流程优化、提效降本)和销售转化链路的优化与升级(直接影响营收)两个方向。

2.业务类型:

B端业务和C端业务的类型不同,可挖掘出赋能方向也会存在一定差异性。尤其是在销售变现链路上,B端业务重在分析「触达客户」->「新签客户」->「续约客户」的链路,需要对转化链路中涉及的商务、运营、市场人员的角色及其作用进行深入了解;C端业务更重在从消费者的角度对C端转化链路进行分析,包含「初识/了解」->「产生兴趣」->「下单购买」->「多次回购」->「分享推荐」的完整链路,更要侧重于分析消费者的心理和购买动机。由于目标用户/客户、转化链路、业务属性的差异性,赋能变现的切入方向也会存在一定的差异性。

 

总结

本文从“价值链”理论着手,选取设计赋能可切入的4个维度「价值主张」「客户细分」「运营模式」「渠道通路」。并且从实践出发,将上述维度落入到具体业务中进行分析,挖掘更加细分的赋能切入方向以及机会点。

读完该篇文章,希望各位设计师们可以达成以下2个目标:

1. 了解价值链理论的概念,并且将理论应用到当前自己负责的业务中进行分析。

2. 在设计赋能商业变现中找准设计赋能可切入的维度以及挖掘细分的维度和机会点,并且真正落实到具体业务中。

以上内容为设计赋能商业变现的初步探索,在后续的持续探索中会力求总结出更系统的理论框架和方法并分享给大家。

 

参考文章:

书籍:《竞争优势》

书籍:《商业的本质》

论文:价值链、商业模式相关的学术论文

 

原文链接:酷家乐用户体验设计(公众号)

作者:瑶一

 转载请注明:学UI网》设计赋能商业变现初探

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

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

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

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




B端问答丨B端项目赶工,不重视设计应该怎么办?

lanlanwork


重视自己

图片

我见过同学都会抱怨设计页面还原很糟糕,导致他不情愿将自己更多的精力花在的设计页面上,进而在公司常常无所事事。

首先给大家讲的就是自己重视自己,因为很多设计师遇到这类情况就会自暴自弃,对于页面细节的验收也不会太过于上心(设计师会说:提出来他们也不改,后面也不想再提了)导致的结果就是随着日积月累,一个页面缺少20%的设计细节,十个页面、五十个页面?或许就会是一个灾难。

因此在设计不受重视时,首先要做的就是自己重视自己。在工作产出上做到用心、负责,对于 需求、设计验收 都认真对待,因为只有自己做好了,这样才能够要求团队的其他成员进行协助。

比如一个版本结束后,将设计细节当中的不同问题 指派给不同的前端工程师,将页面上各类设计细节进行明确的标注,这样都能够让 研发同事知道你对待工作的态度。一个项目团队,肯定不会讨厌一个认真负责的人。

这里建议大家能够有一个固定的设计验收表,这样能够帮助你。(关注公众并点赞收藏本文章,后台回复 “验收” 即可)

图片

 

提出问题

出现上诉的问题,其实本质上是“项目赶工”所导致的。我曾经和很多开发都深入聊过这类问题,他们也不是想要刁难咱们,更多是因为项目功能的开发时间都不够,更别提设计细节。

而目前大多数团队的项目开发方式还是采取 “敏捷开发” (与之相背离的是瀑布流开发,如果不了解的同学可以进行百度),因此在每一个迭代的初期,都可以和项目负责人进行沟通,明确出设计细节还原的具体时间以及设计细节还原要求。

这样能够在项目刚开始,就和大家明确项目设计要求,比如这一期因为对于功能来说,确实是比较复杂,这样作为设计师也知道项目整体情况,对于要求进行适当的放宽,那究竟如何放宽,就需要有一个页面还原相对量化的标准。

 

页面还原的标准

图片

设定一个页面还原的基础标准,本质上是在帮助对开发同学,在理解设计细节上有更深的认识。很多时候你会发现是,一些很明显的错误他们其实是不知道的,比如一个浅灰色和白色,对于他们而言感官上都比较类似,而一些很小的细节作为开发人员很难观察到,而通过一个标准,他可以对自己的页面进行检查,看看是否有问题,比如:

基础阶段:

页面布局形式、颜色色值、字体大小、控件使用、关键元素缺失

中级阶段:

描边的粗细、细节背景颜色上的区分、设计资源的模糊

高级阶段:

控件动效、页面内容文案、提示信息…

当然在这里只是一个简单举例,指定页面还原标准的最终目的是能够让开发有量化的标准进而能有更好态度对待设计师、设计细节。并且标准的确定,能够帮助你在会议上明确迭代标准,进一步提高团队间的协作效率。而人总是会犯错的,比如我写文章也会偶尔出现错别字,因此在严苛过后也要互相理解。

当然除了标准,Design Token 也能够帮助前端快速理解基础样式,之后有时间可以单独来讲。

 

明确后续迭代时间

当我们首先做好自己,接提出问题,然后确定好还原标准后,最主要的就是需要在一个版本后知道剩余的问题究竟应该在何时进行完善。

通常解决时间存在两种不同的情况:

  • 1.在后续 1 – 2 个版本进行迭代,将之前的问题进行解决
  • 2.将问题汇总,后续进行一次体验上的大版本更新

这两种方法本身并没有什么好坏之分,对于我们而言,就需要将设计细节上的各类问题进行汇总,也会要求设计师需要有一个属于自己的设计体验需求池:

通常这类需求池会包括以下几类问题:

问题描述、问题图片、负责前端、以及后续迭代时间等等…

这样等问题出现过后,就能够确定相应问题对应的开发人员以及后续的时间。毕竟表格是项目管理当中最好用的工具。

 

真诚沟通

当你在团队当中遇到问题时,更应该多和团队成员协商沟通。因为都是同事,沟通解决问题才是成年人做事的风格。比如吃一顿饭聊聊问题,大家下楼抽抽烟一起聊聊,偶尔买杯奶茶犒劳为页面辛苦还原的前端同学,有时候紧张的氛围往往因为一两句玩笑就能够得到舒缓。希望大家都能够在工作当中顺顺利利,少一些烦心事。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》B端问答丨B端项目赶工,不重视设计应该怎么办?

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

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

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

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



JS 如何实现占位符

前端达人

占位符

–首先了解一下占位符的概念。占位符就是先占住一个固定的位置,等着你再往里面添加内容的符号,广泛用于计算机中各类文档的编辑。
–格式占位符(%)是在C/C++语言中格式输入函数,如 scanf、printf 等函数中使用。其意义就是起到格式占位的意思,表示在该位置有输入或者输出。
那么在JS中,如何实现占位符呢。

JS操作

首先可以说明在js中,是没有占位符这一个概念的,那我们怎么实现该功能,这个时候就可以自己定义一个方法,去实现该功能。

String.format = function() { //字符串中赋值变量 if (arguments.length == 0) return null; var str = arguments[0]; for ( var i = 1; i < arguments.length; i++) { var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm'); str = str.replace(re, arguments[i]); } return str; }; //使用方法 const h = 1; const l = 2; var key = String.format("{0}-{1}",h,l); console.log(key); //key:"1-2" 
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17


























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

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

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

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

node.js案例,写一个简单的get请求,请求有50%的概率,要求数据在一个json文件中

前端达人

  • 案例目标:实现GET的主要属性为req.method,并且生成随机数

  1. 使用nodejs,实现一个Ajax的get请求方式
  2. 将lib里的data.json文件请求获取出来
  3. data里面的数据为
    
                            
    1. {
    2. "success":[
    3. {
    4. "data": "你赢了",
    5. "message":"请求成功",
    6. "code": "200"
    7. }
    8. ],
    9. "fail":[
    10. {
    11. "data": "你输了",
    12. "message":"请求失败",
    13. "code": "200"
    14. }
    15. ]
    16. }
  •  案例准备

  •  案例代码

    
                            
    1. // 1.定义核心模块 http fs path
    2. const http = require('http')
    3. const fs = require('fs')
    4. const path = require('path')
    5. // 2.创建服务
    6. const server = http.createServer((req, res) => {
    7. // 2.1 如果url地址为/getList 执行代码
    8. // -req.method 为请求类型
    9. // 生成随机数,大于0.5为0,小于为1
    10. let render = Math.random() > 0.5 ? 0 : 1
    11. // console.log(render)
    12. // 2.2 拼接字符串,为读取数据传参
    13. // -__dirname为获取的目录地址
    14. // -lib为存放数据的名字,data.json为读取的文件
    15. const filepath = path.join(__dirname, 'lib', 'data.json')
    16. // -console.log('拼接的地址', filepath)
    17. if (render === 0 && req.url === '/getList' && req.method === 'GET') {
    18. // 2.3 读取data文件
    19. fs.readFile(filepath, 'utf8', (err, data) => {
    20. // - 打印错误信息
    21. if (err) {
    22. console.log('错误日志', err)
    23. return
    24. }
    25. // 读取的为json数据,设置请求头,如果不设置,则打印乱码信息
    26. res.setHeader('content-type', 'application/json;charset=utf8')
    27. // - 返回数据
    28. let jsonArr = JSON.parse(data)['success']
    29. let jsonStr = JSON.stringify(jsonArr)
    30. res.end(jsonStr)
    31. })
    32. } else if (render === 1 && req.url === '/getList' && req.method === 'GET') {
    33. fs.readFile(filepath, 'utf8', (err, data) => {
    34. // - 打印错误信息
    35. if (err) {
    36. console.log('错误日志', err)
    37. return
    38. }
    39. // 读取的为json数据,设置请求头,如果不设置,则打印乱码信息
    40. res.setHeader('content-type', 'application/json;charset=utf8')
    41. // - 返回数据
    42. let jsonArr = JSON.parse(data)['fail']
    43. let jsonStr = JSON.stringify(jsonArr)
    44. res.end(jsonStr)
    45. })
    46. }
    47. })
    48. // 3.启动服务
    49. // 8111为端口号,默认8000,尽量使用8开头,如果使用其他,咋不会正常运行,会报错
    50. server.listen(8111, () => {
    51. // 服务提示信息,运行代码后的提示
    52. console.log('端口1111已经开启')
    53. })











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

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

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

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

听说你的作品集还差个封面?

seo达人



图片

 

01.你是谁

可能很多人在面对作品集封面的时候想的都是:怎么才能吸引人?怎么才能成功引起面试官的注意!虽然吸睛这点是一个比较重要的因素,但是更重要的还是你是谁

作品集展现的是你的过往作品,可能每个项目或者作品风格有所区别,但是整个作品集可以看成一个你的作品。

你想通过你的作品集展现你的哪些能力?展示你的审美,甚至展现你的思想。都需要你经过仔细的思考。所以先想清楚你想表达什么,或许你的问题会迎刃而解。

图片

图片

图片

图片

图片

图片

 

02.展现优势

我发现真的有很多人作品集里面的作品很优秀,但是封面却草草了事,或者随便做了一个跟自己的优势毫不相关的封面。举个栗子,有些人可能非常擅长插画或者C4D,但是却非要学别人表达极简、抽象等等风格,导致直接结果就是面试官看了封面就兴致全无。不要觉得好东西都在后面,我要在后面展示。可能面试官根本没看到后面,就关了看下一个!

所以,学会展现优势,从一个好的封面开始吧!

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

a

03.个人色彩

可能很多同学看了前面两点会说,你说了半天这么抽象,但我还是没思路啊,不知从何下手。别急,下面给大家提供一个具象可实操的思路。

个人作品集,要有自己的特点,避免扔在千千万万作品集中石沉大海,让人印象深刻的方法当然还是得从自己下手,毕竟你跟别人永远不可能一模一样,你要展现的还是你自己,总的来说就是要具有个人色彩。

举个栗子:你可能擅长LOGO,就做一个自己的LOGO;你可能擅长插画,就画一个自己的形象,结合自己的兴趣和特点;你可能擅长C4D,就建一个自己的模型,像打造一个个人IP一样的展示自己。

结合个人色彩,展现自己的闪光点,总是比千篇一律的排版更让人印象深刻。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

今天所有的作品集封面参考图已经贴心地为各位打包好啦!

点个“在看”,去公众号回复品集封面001就可以下载啦!

 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》听说你的作品集还差个封面?

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

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

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

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



设计要知道-HMI设计必看!车载HMI的设计入门

seo达人



一、汽车 HMI 是怎样的领域?

HMI是Human Machine Interface 的缩写,其实就是人机交互,汽车HMI设计主要是研究人与汽车的人机交互界面,是驾驶员和车辆交互的桥梁。当然不止界面的设计,也包括开关、按钮、大屏、语音等等。侧重的是在完成交互任务的流利顺畅,同时增强驾驶乐趣,是人与界面、人与车各系统的体验感受。

要是想了解HMI领域,必定得从HMI的载体开始说起,HMI经过了四个大的阶段演变,市场目前正处于第三阶段,第四阶段也在过渡中。

图片

十年的交互界面,可以说是发生了质的变化,一是界面设计多元化,从工业时期追求性能的简单粗暴,现在界面有设计简洁现代,也有百变换肤,考虑到了用户的审美需求;二是从交互的角度来讲,做了沉浸式导航界面,提升驾驶专注度。还有交互体验的增加,有了车联网和车内芯片强大的计算能力,汽车也能够更灵活、更贴近使用情况的向用户提供信息(如导航,路线推荐,胎压检测,用户习惯记录等等)。语音解放了驾驶员的双手,让交互更溶于驾驶场景当中。

图片

OK,有了对比感受才更加强烈,我再从以下几个方面详细聊聊我对汽车HMI的理解。

HMI的前景就更不用说了,雷军的最后一次创业也放在了”造车”上面,可见互联网的各大巨头都想分一块蛋糕。更是高价招人。现在阿里的斑马、百度的Car  Life 和Apollo、腾讯的 Ai in Car、 谷歌 Android auto、苹果 CarPlay、华为车机应用等,一线的互联网公司都是早早布局车载,可以说是最新的一个大风口,更是不少设计师想转型HMI设计,要想入局车载可以看看已经有成熟的设计规范。大家可以自取《HMI设计必看!车载中控的前世今生》。

从目前的发展趋势,智能汽车驾驶舱的发展方向主要集中在三个方面:更大的屏幕,自动化的控制界面,以及语音交互。目前智能车载系统的功能仍然非常有限。在垂直应用场景中,语音交互的体验和技术的稳定性仍有很大的提升空间。

 

二、车载系统的形态

现有的车载系统分为三种,全面接入内置智能系统、平台解决方案、软件应用程序。

图片

 

1、全面接入内置智能系统

汽车厂和汽车制造商,将先进的技术应用到汽车的驾驶舱中。例如Tesla X,硬件、软件和人机界面都是车厂整合。不仅能够实现多媒体系统的深度集成,而且还能够与驾驶员进行车内诊断和控制系统的深度集成。连接互联网络同时提供API接口,可以自定义应用程序和独立开发者提供定制服务等。在提高汽车性能的同时,汽车制造商也在努力改善驾驶舱内的体验,以提高市场竞争力。

图片

车厂开发的技术可以更好地与汽车兼容,然而大部分传统车企没有强大的相关研发能力,语音交互相关的人工智能技术并不是车企的强项。因此也会找一些科技巨头来合作,提供平台解决方案。

 

2、提供平台解决方案

目前科技巨头都在为驾驶场景提供驾驶解决方案,例如,苹果、谷歌、亚马逊、Nuance、阿里巴巴和百度、华为、腾讯都为智能驾驶舱创建了平台和操作系统。使用软件平台定制HMI单元,科技公司提供软件平台,车企自己定义介入的硬件与服务。平台和系统可以将其技术和服务集成到汽车专用操作系统中,为汽车驾驶员提供完整的智能驾驶体验。

图片

技术巨头凭借其先进的技术研发能力和与汽车制造商的紧密合作,有效的优化了相关产品和服务的质量。但是为了快速抢占市场,科技巨头公司通常更愿意提供通用类型的平台服务,很难为不同的车厂提供定制化服务。还有因为本身的市场竞争,会存在系统壁垒,如CarPlay系统需要插入苹果手机。但在相当一段时间内这也是可能的一种解决办法,因为这减少了HMI的整合成本,而漫长的汽车设计流程周期常常掣肘着汽车人机界面整合的发展。

 

3、软件应用程序

软件公司开发各种智能驾驶相关的便携硬件和软件服务。常见的方法是,通过将外部硬件与汽车连接,在通过软件服务来优化汽车驾驶舱的性能,将普通汽车变成智能汽车。

这些公司的服务和产品非常灵活,通常可以在指定的场景和特定的需求中为用户提供定制化的服务。然而,这类服务往往需要一些额外的操作和硬件设备的支持。说到这里软件的应用程序分为两种方式,一个是车载小程序,一个是应用软件。

与手机小程序只在入口、开放程度、定位等方面略有差异有所不同,BAT三家车载小程序在唤醒方式、交互方式、构建场景等方面也呈现出不同的侧重和战略打法。三家都基于自己对车联网的理解,勾画出小程序在车载场景下如何进行应用延伸,其目的都是为用户带来智能网联汽车的体验提升。那说说车载小程序的优点。

 

3.1车载小程序的优点:

图片

  • 车企强势,曲线救国

因为车企掌握大部分的话语权,在强势的车企面前,全家桶组合可能不能达成合作共识。因为车企更想选取不同领域的头部产品来搭建服务生态。此时车载小程序作为一种相对轻量的解决方案,容易进入到车联网的生态之中。

  • 即用即走贴合场景

在汽车环境下,所有的功能都是为了车主更高效的完成任务而产生的,快速、便捷的人车交互方式是其基本要求。

“即用即走”的小程序是工具型产品再好不过的载体了。特别是BAT还为车载小程序开发了场景识别、自动唤醒的功能,在交互上除了语音之外,也能通过传统的触碰或者更加高级的手势完成人车交互,这让车载小程序的交互无比接近人类想象中的无人驾驶形态,也让车载小程序有了更加强大的生命力,至少短时间内不会被新的应用所替代。

  • 快速搭建加快车载发展

BAT都为小程序的开发者提供了开放的开发环境,甚至还提供固定模板帮助开发者加快开发速度,降低开发成本,这使得很多创业型的中小型开发者也可以参与到车联网的生态建设中来。

由于车载小程序和手机小程序的底层框架是打通的,这也是说,如果某个小程序在移动端上沉淀了足够多的用户,并且适用车载场景,具备服务能力的话,就可以快速完成车载小程序的移植,这对于建设丰富的出行服务生态和车联网都是具有实际意义的。

 

3.2现有车载小程序 

图片

  • 腾讯车载小程序

腾讯车载小程序目前大致分为三类:出行服务小型车、生活服务小程序和视听服务小程序,其最大特点是基于位置和场景会被自动唤醒。比如用户经过加油站、停车场、旅游景点的时候,有些购买和支付的服务就会主动弹在车机上,用户再通过语音完成操作。

如果说手机小程序是“人找服务”,那么腾讯车载小程序则进化成“服务找人”。

传送门:(关注公众号私信我领PDF)

图片

  • AliOS车载小程序

基于算法和丰富的生态服务体系,AliOS车载小程序的最大特色是自带场景智能感知的基因。得到车主授权后,车载小程序可以围绕行车场景,实现上车前、行车中、下车后自然串联的智能化场景服务。

譬如,用户可以在车上通过触控、语音、手势等多模态交互方式,咨询附近的推荐餐厅,小程序会基于用户的喜好作出推荐,还可以预约排号;到达餐厅附近,系统会自动唤醒小程序,为用户找到停车场;下车后,车载小程序会无缝连接到手机小程序端,用户可以在手机上查看餐厅的预约信息等。

相比腾讯车载小程序,AliOS车载小程序的开放程度稍高,但也和手机小程序一样,仅限于阿里系的商业生态之内。

传送门: https://miniapp.alios.cn/index#/document

 

  • 百度车载小程序

百度也在为自身搭建智能系统。所以相比腾讯和阿里,百度车载小程序的分类更加细致,场景也更加丰富。车企可以根据车型定位和自身需求,自行定义和组合可供使用的车载小程序。

所以很多科技公司转向百度生态,让大哥带小弟的方式,一起进入到车企。百度开放的生态可以将自己主要功能接入百度App、百度地图、百度贴吧、百度网盘百度系App上运行,还可以在爱奇艺、wifi万能钥匙等外部App平台上运行。腾讯和阿里基于位置或者场景,可以自动唤醒小程序有所不同,百度的车载小程序大部分场景下还是只能依靠用户用语音唤醒。

传送门: https://chelianwang.baidu.com/homepage/openPlateform/design.html

 

三、车载系统的特点

梳理整个汽车的HMI 的发展其实我们追求的就是三个方向:

 

1、操作(快捷、精准)操作行为无法超过3秒

随着大屏、多屏化的发展趋势,触摸和语音控制应时而生,为了增强操作合理性,以及减少或避免触摸屏的误触功能。从信息输入来看,以触控、语音为主,手势、视觉交互为辅;从反馈输出来看,以视觉、语音、触控交互为主,嗅觉交互为辅。

人机交互定义需要区分车辆是行驶中还是静止状态,车辆在行驶中,对于需要驾驶员操作反馈的交互行为需要遵循3S原则(上面提到的三秒原则),降低安全隐患。甚至有一些交互动作在车辆行驶过程中需要禁用的。

 

2、信息(清晰、聚合)信息功能需要高度聚合

得益于计算机算法的强大,汽车功能越来越完善,信息量也越来越大,为了让用户有更好的体验,避免过多信息的干扰,必须做到界面显示轻量化。

保障关键信息是醒目的,容易让用户视觉快速捕获,在各种环境场景下具有良好的可见性和易读性,无需驾驶员费力寻找和识别。

 

3、反馈(明显、高效)高效的交互方式

在驾驶的过程当中,司机的双手被占用,于是眼睛和耳朵感知要提高,与移动端的视觉显示不同,HMI设计师需要注意除了基础的视觉显示规范外,还需格外注意与安全相关信息的展示、视觉警告、文字易读性和显示眩光等显示问题。

在车辆行驶过程中,对于司机来说,听觉反馈也是很有必要考虑的场景,通过语音反馈司机需要获取的信息,能让司机尽量保持视觉焦点在路况上。多场景的融合考虑信息获取的效率,能减少在开车过程中的安全隐患。

 

四、车载的开发流程

车企现在对智能系统的设计越来越重视,因为只有把软件实力提升才可以更好的掌握话语权,而且用户研究与设计流程整合的方式能够帮助汽车制造商在竞争激烈的汽车行业中先人一步博得用户喜爱。

汽车HMI设计开发需要按照整车开发的流程进行,这样在造车的各个阶段才能有效的管控和输出设计产物,由于HMI设计涉及的相关范畴广,只有按照既定的流程才能设计出符合车机环境的系统界面。

 

1、整车开发流程

在解答如何展开HMI体验设计前,我们需要了解现在汽车的整体设计工作流程,一辆汽车的生产需要经过V型的开发流程(从目标的制定到目标的验证的过程)

图片

大体可以分为六个阶段:

  1. 产品战略阶段
  2. 概念设计阶段
  3. 设计开发阶段
  4. 工程车阶段
  5. 生产阶段

图片

 

2、HMI设计开发流程

然后我们来说一下HMI设计流程,HMI和C端B端的的设计大部分一样,也是需要与汽车工程师,市场人员,设计调研人员合作。不同的是HMI的设计更多会反复测试保证安全性优先的情况下,满足功能需求,整个HMI设计过程中及设计和实现是机密结合的 。

 

HMI设计开发四大流程

图片

  • 需求分析调研评估

在整车开发项目中,HMI体验设计应该从立项时开始介入,主机厂在通过市场调研和用户需求分析等调研方法,分析出市场上存在的潜在需求后,从平台化角度评估需求的导入和定型验收,和样车研发同步进行。

  • HMI创意设计

在得到用户需求分析和市场调研的数据后,将这些数据转化成为设计目标,得到初步的概念设计,之后在功能定义和产品开发达成一致之后,即项目目标正式确认,可开始进行细节和具体流程的设计;

主要包含以下细分模块:产品功能配置、内饰设计、市场竞品对标、人因分析、硬件约束、软件约束、功能需求定义、交互设计、视觉设计

  • 工程实现验证评估

在验证评估阶段中,通过台架仿真测试,或者提供特定评价用车和培训用车以及进一步的分析和质保路试。进行体验验证和设计迭代。之后是系统开发、硬件开发、软件开发、整车测试与评价。即可开始生产批量试制(PVS)。

  • 开发测试

最后是工程开发验证阶段,跟进实车功能测评,生产批量试制流程冻结后,会进行批量生产前总演习(OS),全面验证批产。所有流程环节都验证成功冻结后,产品则开始投入批量生产(SOP)。

 

整个分析下来HMI设计流程看似和互联网的开发流程大体相似,其实还是有很多不同,甚至可以说没办法完全复用的。因为两者的侧重点不同,关于汽车HMI设计与互联网设计原则的差异,和具体HMI的设计流程细节我们下次讲!

 

原文地址:七酱设计笔记 (公众号)

作者:郝小七

转载请注明:学UI网》设计要知道-HMI设计必看!车载HMI的设计入门

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

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

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

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



JavaScript作用域和闭包

前端达人


前言

深入了解闭包和作用域链就需先了解函数预编译的过程


一、预编译

JavaScript:运行三部曲:
语法分析–预编译–解释执行
预编译:
发生在函数执行的前一刻。
函数声明整体提升,变量只声明提升。
1.函数预编译的过程:
1.创建AO对象Activation Object(执行期上下文,其作用就是我们理解的作用域,函数产生的执行空间库)
2.找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
3.将实参值与形参统一
4.找到函数声明,将函数名作为属性名,值为函数体。
例:

function test (a, b){ console.log(a); c = 0; var c; a = 3; b = 2; console.log(b); function b (){}; function d (){}; console.log(b); } test(1); /*答案:1,2,2
答题过程:找形参和变量声明,将变量和形参名作为 AO 属性名,值为 undefined, AO{
 a : 1,
 b : undefined,
 c : undefined
}
函数声明 function b(){}和 function d(){},AO{
 a : 1,
 b : function b(){},
 c : undefined,
 d : function d(){}
}
执行 console.log(a);答案是 1
执行 c = 0;变 AO{
 a : 1,
 b : function b(){},
 c : 0,
 d : function d(){}
}
var c 不用管,因为 c 已经在 AO 里面了
执行 a = 3;改 AO{
 a : 3,
 b : function b(){},
 c : 0,
 d : function d(){}
}
执行 b = 2;改 AO{
 a : 3,
 b : 2,
 c : 0,
 d : function d(){}
}
执行 console.log(b);答案是 2
function b () {}和 function d(){}已经提过了,不用管
执行 console.log(b);答案是 2*/ 
  • 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

2.全局预编译它和函数预编译步骤一样,但它创造的是GO(全局对象):
1.生成了一个 GO 的对象 Global Object(window 就是 GO
2.找变量声明…
3.找函数声明…

任何全局变量都是 window 上的属性
变量没有声明就赋值了,归 window 所有,就是在 GO 里面预编译。
例 :

function test(){ var a = b =123; console.log(window.b); } test(); 答案 a 是 undefined,b 是 123 先生成 GO{ b : 123 } 再有 AO{ a : undefined } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

想执行全局,先生成 GO,在执行 test 的前一刻生成 AO
函数里找变量,因为GO和AO有几层嵌套关系,近的优先,从近的到远的, AO里有就看 AO,AO 没有才看 GO。所以函数局部变量和全局变量同名,函数内只会用局部。

二、作用域精讲

作用域定义:变量(变量作用于又称上下文)和函数生效(能被访问)的区域
全局、局部变量
作用域的访问顺序:函数外面不能用函数里面的。里面的可以访问外面的,外面的不能访问里面的,彼此独立的区间不能相互访问。

1.[[scope]]: 每个 javascript 函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供 javascript 引擎存取,[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域,其中存储了运行期上下文的集合。

2.执行期上下文: 当函数在执行的前一刻,会创建一个称为执行期上下文的内部对象(AO)。
一个执行期上下文定义了一个函数执行时的环境,函数每次执行时对应的执行上下文都是独一无二的,所以多次调用一个函数会导致创建多个执行上下文,当函数执行完毕,执行上下文被销毁。

3.作用域链:[[scope]]中所存储的执行期上下文对象的集合(GO和AO),这个集合呈链式链接,我们把这种链式链接叫做作用域链。

4.查找变量: 在哪个函数里面查找变量,就从哪个函数作用域链的顶端依次向下查找(先查自己的AO,再查父级的AO,一直到最后的GO)。
函数类对象,我们能访问 test.name
test.[[scope]]隐式属性——作用域

作用域链图解:

function a (){ function b (){ var bb = 234; aa = 0; } var aa = 123; b(); console.log(aa) } var glob = 100; a(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

0 是最顶端,1 是次顶端,查找顺序是从最顶端往下查
在这里插入图片描述
在全局预编译中函数a定义时,它的[[scope]]属性中有GO对象。
在这里插入图片描述
在函数a执行前先函数预编译,创建自己的AO对象,并存储在[[scope]]属性上,与之前存储的GO成链式。同时函数b被创建定义。
在这里插入图片描述
在b被创建时,它生成的[[scope]]属性直接存储了父级的[[scope]],它有了父级的AO和GO。
在这里插入图片描述
b函数执行前预编译,生成自己的AO,存储在[[scope]]属性中。

详解过程: 注意[[scope]]它是数组,存储的都是引用值。
b 中 a 的 AO 与 a 的 AO,就是同一个 AO,b 只是引用了 a 的 AO,GO 也都是同一个。
function b(){}执行完,干掉的是 b 自己的 AO(销毁执行期上下文)(去掉连接线),下次 function b 被执行时,产生的是新的 b 的 AO。b 执行完只会销毁自己的 AO,不会销毁 a 的 AO。会退回到b被定义时(仍有父级的AO和GO)。
function a(){}执行完,会把 a 自己的 AO 销毁【也会把 function b的[[scope]]也销毁】,只剩 GO(回归到 a 被定义的时候),等下次 function a再次被执行时,会产生一个全新的 AO,里面有一个新的 b 函数。。。。。。周而复始。

思考一个问题:如果 function a 不被执行,下面的 function b 和 function c 都是看不到的(也不会被执行,被折叠)。只有 function a 被执行,才能执行 function a 里面的内容a();不执行,根本看不到 function a (){}里面的内容,但我们想在a函数外面调用b函数怎么办呢,于是闭包出现了。

三、闭包

闭包的定义

当内部函数被保存到外部时,将会生成闭包。但凡是内部的函数被保存到外部,一定生成闭包。
闭包的问题:闭包会导致原有作用域链不释放,作用域中的局部变量一直被使用着,导致该作用域释放不掉,造成内存泄露(就是占有过多内存,导致内存越来越少,就像泄露了一样)
例:

function a(){ function b(){ var b=456; console.log(a); console.log(b); } var a=123; return b; } var glob = a(); glob(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

答案 123,456。
function a(){ }是在 return b 之后才执行完,才销毁。而return b 把 b(包括 a 的 AO)保存到外部了(放在全局)当 a 执行完砍掉自己的 AO 时(砍掉对AO存储地址的指针),因为b还保存着对a的AO的引用,所以内存清除机制不会清除掉a的AO, b 依然可以访问到 a 的 AO。

闭包的作用:

1.实现共有变量

function test(){ var num=100; function a(){ num++; } function b(){ num--; } return [a,b]; } var myArr=test(); myArr[0](); myArr[1](); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

答案 101 和 100。
思考过程:说明两个用的是一个 AO。
myArr[0]是数组第一位的意思,即 a,myArr0;就是执行函数 a 的意思;
myArr[1]是数组第二位的意思,即 b,myArr1; 就是执行函数 b 的意思。
test doing test[[scope]] 0:testAO
1:GO
a defined a.[[scope]] 0 : testAO
1 : GO
b defined b.[[scope]] 0 : testAO
1 : GO
return[a, b]将 a 和 b 同时被定义的状态被保存出来了
当执行 myArr0;时
a doing a.[[scope]] 0 : aAO
1 : testAO
2 : GO
当执行 myArr1;时
b doing b.[[scope]] 0 : bAO
1 : a 运行后的 testAO
2 : GO
a 运行后的 testAO, 与 a doing 里面的 testAO 一模一样
a 和 b 连线的都是 test 环境,对应的一个闭包

2.可以做缓存(存储结构)

function eater(){ var food=""; var obj={ eat : function (myFood){ console.log("i am eating"+food); food =""; }, push : function (myFood){ food = myFood; } } return obj; } var eater1 = eater(); eater1.push("banana"); eater1.eat(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

答案 i am eating banana,eat 和 push 操作的是同一个 food
在 function eater(){里面的 food}就相当于一个隐式存储的机构
obj 对象里面是可以有 function 方法的,也可以有属性,方法就是函数的表现形式

3.可以实现封装,属性私有化
只能调用函数方法,不能修改函数的属性。

4.模块化开发,防止污染全局变量


























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

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

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

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

日历

链接

个人资料

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

存档