首页

设计赋能商业变现初探

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

React 组件中的事件处理、组件(受控、非受控)、函数柯里化

前端达人

事件处理

在React中获取虚拟组件中的标签的值

  1. 使用组件的 refs属性
  2. 在虚拟组件的标签中定义事件,在事件中通过 箭头函数 获取标签的值
  3. 使用事件对象——event

事件处理:

  • 通过onXxx属性指定事件处理函数(注意大小写)
    • React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ———为了更好的兼容性
    • React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————为了高效
  • 通过event.target得到发生事件的DOM元素对象 ———不要过度使用ref

使用event.target属性:

//创建组件 class Demo extends React.Component{ myRef = React.createRef() //展示输入框的数据 showData = (event)=>{ alert(event.target.value); } render(){ return( <div> <input onBlur={this.showData} type="text" placeholder="失去焦点提示数据"/> </div> ) } } //渲染组件到页面 ReactDOM.render(<Demo/>,document.getElementById('test')) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

React事件处理和Dom事件处理区别:

1、在 语法 上的不同点:

  • React事件名采用驼峰命名法,即事件名首字母大写。如onclick(Dom)——onClick(React)

  • 响应事件的函数在React中以 对象方式 赋值,Dom是以 字符串方式 赋值

    <button onclick= ' clickMe( ) '>提交</button> ——Dom方式 <button onClick={ clickMe( ) }>提交</button> ——React方式 
            
    • 1
    • 2

2、在阻止事件的默认行为有区别:React事件是合成的,DOM事件是原生

  • Dom:返回false
  • React:显示的调用事件对象event.preventDefault

React事件处理函数

  • 1、使用ES6的箭头函数

    class MyComponent extends React.Component{ constructor(props){ super(props); this.state={ number:0 } handleClick=()=>{ ++this.state.number; console.log(this.state.number); } render(){ return( <div> <button type='button' onClick={this.handleClick}>点我</button> </div> ) } } ReactDOM.render(<MyComponent/>,document.getElementById('example')); 
            
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
  • 2、在组件中定义事件处理函数

    class MyComponent extends React.Component{ constructor(props){ super(props); this.state={ number:0 } this.handleClick=this.handleClick.bind(this); } handleClick(){ ++this.state.number; console.log(this.state.number); } render(){ return( <div> <button type='button' onClick={this.handleClick}>点我</button> </div> ) } } ReactDOM.render(<MyComponent/>,document.getElementById('example')); 
            
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 注:这种方法的好处是每次render渲染都不会重新创建一个回调函数,没有额外的性能损失,但是如果在一个组件中有很多的事件函数时这种在构造函数中绑定this的方法会显得繁琐
  • 3、在给事件赋值时绑定this

    class MyComponent extends React.Component{ constructor(props){ super(props); this.state={ number:0 } } handleClick(){ ++this.state.number; console.log(this.state.number); } render(){ return( <div> <button type='button' onClick={this.handleClick.bind(this)}>点我</button> </div> ) } } ReactDOM.render(<MyComponent/>,document.getElementById('example')); 
            
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 注:但是此方法在每次render时都会重新创建一个新的函数,性能有一定的损失,但在事件处理函数需要传参数时,这种方法就比较好

事件流

在该示例中,3个div嵌套显示,并且每个元素上均绑定onClick事件。当用户点击红色区域的div元素时,可以看到,控制台先后输出了child -> parent -> ancestor,这是因为在React的事件处理系统中,默认的事件流就是冒泡。

const style={ child:{ width:'100px', height:'100px', background:'red' }, parent:{ width:'150px', height:'150px', background:'blue' }, ancestor:{ width:'200px', height:'200px', background:'green' } } class Example extends React.Component{ render(){ return( <div onClickCapture={()=> console.log('ancestor')} style={style.ancestor}> <div onClickCapture={ ()=> console.log('parent')} style={style.parent}> <div onClickCapture={ ()=> console.log('child')} style={style.child}></div> </div> </div> ) } } ReactDOM.render(<Example/>,document.getElementById('example')); 
  • 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

在这里插入图片描述

  • React默认的事件触发方式:冒泡方式
  • 若将事件触发改为捕获方式:需要在事件名后带上 Capture 后缀
<div onClickCapture={()=> console.log('ancestor')} style={style.ancestor}> <div onClickCapture={ ()=> console.log('parent')} style={style.parent}> <div onClickCapture={ ()=> console.log('child')} style={style.child}></div> </div> </div> 
  • 1
  • 2
  • 3
  • 4
  • 5

事件委托

在合成事件系统中,所有的事件都是绑定在document元素上,即虽然在某个React元素上绑定了事件,但是,最后事件都委托给document统一触发。因此,在合成事件中只能阻止合成事件中的事件传播

React 阻止的事件流,并没有阻止真正DOM元素的事件触发,还是按照冒泡的方式,层层将事件交给上级元素进行处理,最后事件传播到docuement,触发合成事件,在合成事件中,child触发时,e.stopPropagation() 被调用,合成事件中的事件被终止。因此,合成事件中的stopPropagation无法阻止事件在真正元素上的传递,它只阻止合成事件中的事件流。相反,如果绑定一个真正的事件,那么,合成事件则会被终止。

  • 默认事件流是冒泡的,所有事件统一由document触发,在React中阻止冒泡方法是调用e.stopPropagation()
  • React的合成事件是可以找到原生的事件对象
  • React中的合成事件中只有一个全局对象event,该对象不是原生的event,但通过它可以获得event对象的部分属性。每个事件触发完后React的全局对象event就会被清空,因此不能在异步操作使用

事件类型:
在这里插入图片描述

收集表单数据

非受控组件

表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref 从DOM获取表单值),即不受React控制改变表单元素提交的值的方式,称为:“非受控组件”

class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名:<input ref={c => this.username = c} type="text" name="username"/> 密码:<input ref={c => this.password = c} type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件 ReactDOM.render(<Login/>,document.getElementById('test')) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

受控组件

在HTML中,标签<input><textarea><select>的值的改变通常是根据用户输入进行更新。在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式,称为:“受控组件”。

class Login extends React.Component{ //初始化状态 state = { username:'', //用户名 password:'' //密码 } //保存用户名到状态中 saveUsername = (event)=>{ this.setState({username:event.target.value}) } //保存密码到状态中 savePassword = (event)=>{ this.setState({password:event.target.value}) } //表单提交的回调 handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this.state alert(`你输入的用户名是:${username},你输入的密码是:${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名:<input onChange={this.saveUsername} type="text" name="username"/> 密码:<input onChange={this.savePassword} type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件 ReactDOM.render(<Login/>,document.getElementById('test')) 
  • 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

受控和非受控元素都有其优点,根据具体情况选择

特征 非受控制 受控
一次性检索(例如表单提交)
及时验证 ×
有条件的禁用提交按钮 ×
执行输入格式 ×
一个数据的几个输入 ×
动态输入 ×

函数柯里化

高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。

  1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数
  2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数

常见的高阶函数有:Promise、setTimeout、arr.map()等等

函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。

function sum(a){ return(b)=>{ return (c)=>{ return a+b+c } } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

函数柯里化的实现

class Login extends React.Component{ //初始化状态 state = { username:'', //用户名 password:'' //密码 } //保存表单数据到状态中 saveFormData = (dataType)=>{ return (event)=>{ this.setState({[dataType]:event.target.value}) } } //表单提交的回调 handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this.state alert(`你输入的用户名是:${username},你输入的密码是:${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名:<input onChange={this.saveFormData('username')} type="text" name="username"/> 密码:<input onChange={this.saveFormData('password')} type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件 ReactDOM.render(<Login/>,document.getElementById('test')) 
  • 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

































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

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

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

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

独家曝光!大厂设计师的交付细节全公开

seo达人


很多新人设计师初期会只关注行业趋势和手活的提升,而忽略更偏向团队赋能的“设计交付”(Handoff)环节,但后者其实更能甄别设计师的业务深度。毕竟美上天际的设计图,落地性无法保证,也只是镜花水月,完全无法转化为商业价值。

在下面的部分,我根据自己的经验列出了一些值得关注的交付细节,供各位设计师参考。

 

产品背景和逻辑交付

很多UI设计师在交付时没有“解说”的概念,认为这属于交互和产品写文档时负责的部分,其实不然。尤其对于一些中小型互联网公司,如果没有配齐产品和交互人员,或者缺乏相应的产品/交互说明产出,UI设计师需要适度补足这些缺失的部分。

具体说来,就是在高保真设计稿中加入少量的说明解释类页面,用最简洁的语句和配图快速传达任务的背景和目标,以便开发人员快速进入状态,准确理解需求,降低在开发过程中掉链子的几率。

部分云交付平台(如摹客Overflow等)支持上传后快速连接出流程图,在实际工作中非常实用。花上几分钟时间连接好页面间跳转关系并配上说明,开发同学理解起来就舒服多了。

 

设计稿及图片素材交付

首先,直接说结论:用云平台交付设计稿,别发什么压缩包!

很多Ps时代的设计师都经历过手动标注的过程,之后又逐渐转为了使用插件(如Sketch Measure)导出的HTML交付包的方式。但:类似Sketch Measure这样的插件大多是个人作品,兼容性和可靠度完全没有保障;此外,导出压缩包的方式面对改稿时的痛苦指数是非常高的。以国外行业轨迹来看,云交付一定是大势所趋。

针对国内设计行业现状,云平台大致有图中的3种选择:

具体使用方式上都大同小异,下载针对自己设计软件的对应插件,然后选择所需的内容上传。成功后直接将链接发给开发工程师即可,但切记还要确认:

  • 设计稿上传时选择了正确的设计倍率(尤其是对于移动端设计);
  • 所有的素材都已经标记好切图,并能正确地在云平台显示和下载。重要项目最好下载所有素材逐个检查,尤其注意图片质量、文件大小和分辨率;
  • 界面细节是否有重点信息遗漏,可以借助平台自带的一些标尺、卡片、图钉等工具补充说明;
  • 如有复杂交互或动效,考虑补充GIF / 视频供开发人员理解和参考。

“设计倍率”对于很多经验较浅的设计师是个难点,如果没有十足把握可以选择摹客这种自带全平台切换算法的云平台,这样即使选择错误也可以在云平台二次修改。素材检查也是很多设计师都会忽略的点,很多时候就是这一步把关不严,导致最终界面还原度不足。

 

图标交付

图标具有一定特殊性,交付方式往往不局限于传统图片格式交付,还有SVG雪碧图、字体图标库等等特殊方式可以使用。

  • 传统图片格式(PNG、Webp等)交付时,注意内容四周透明区域大小的正确,同时还要准备hover / disable 等不同状态下的版本;
  • SVG雪碧图的方式一般需要特定的插件导出资源包。这种方式导出后可以上传到云平台的网盘中,并和开发沟通好。
  • 字体图标库(iconfont)的方式需要先转换好svg,并保存在字体图标网站上,最后通过网站打包。最后同样需要上传好 + 沟通好。

 

设计规范及组件交付

部分云交付平台拥有全面的设计规范管理功能,开发交付时,除了能提供必备的图层信息和CSS样式代码外,还能提供变量名称(Variables)、组件代码(Snippet),样式表(Stylesheet)等更多专业的开发信息。

  • 在设计软件中封装好了组件,上传后平台就能够自动识别,并可以绑定组件代码、添加关联链接或其他描述信息;

 

  • 之后,所有使用了该组件的设计稿,开发人员都能轻易地获取到和组件模块的开发信息,大大提升开发效率和还原准确度;

 

  • 平台还能自动识别页面使用的颜色和字体,并集中归纳。手动编辑相关变量名称信息后,就可以导出开发所需的样式表文件,非常方便。

 

动效交付

最后简单提一下动效的推荐交付方式:

  • 一般场景:视频(Mp4)或动图(Gif、Apng、Webp)格式是最推荐的,效果可控度高。不同方式主要是帧率、质量、兼容性方面有区别,具体差异不赘述,可自行检索。
  • Lottie / JSON 方式必须要借助AE插件导出,同时对动画内容有一定要求,比如不支持表达式和Alpha通道等,使用前需要做好规划。
  • SVGA的方案对内容本身限制较少,但是需要在代码中载入一个微型的播放器,建议提前和开发人员商量。
  • 动效说明书的方式只适合复杂度不太高、且必须100%由前端实现的场景。

 

总结

总体来说,选择一款足够好的云交付平台是事半功倍的关键。近年一些自带交付功能的在线设计工具(如Figma)崛起,但从访问速度、易用性和功能丰富性的角度来说,依然和专业的云交付平台有着不小的差距,所以我依然建议使用摹客这样独立的交付平台来保证交付品质。

 

原文地址:UI中国

作者:摹客产品协作设计

转载请注明:学UI网》独家曝光!大厂设计师的交付细节全公开

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

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

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

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



火爆全网的设计风格、科技感的代名词

seo达人



图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

可以看到今年流行的轻拟物风格和以前还是有所不同的。

 

01.透明材质

这种风格最大的特点一定少不了透明的材质。毛玻璃材质是最常见的,透明磨砂的质感会让人感觉画面十分清透、充满科技感。

图片

图片

图片

图片

图片

 

02.光线折射

除了透明材质之外,还会经常与光线折射相结合,营造一种晶莹剔透、梦幻轻盈的氛围感,使画面整体质感大大加分。

图片

图片

图片

图片

图片

图片

图片

 

03.渐变幻彩

质感和氛围感到位之后,加上明亮绚烂的色彩渐变配合,会让整体作品不仅有质感、有细节、还十分吸睛。整体风格明亮治愈、有一种超前的科技感和脱离感,难怪微软和国内大厂都争相使用这种风格。

图片

图片

图片

图片

图片

图片

图片

图片

 

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

作者:设计师深海

转载请注明:学UI网》火爆全网的设计风格、科技感的代名词

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

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

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

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



日历

链接

个人资料

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

存档