首页

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

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



5招!帮你搞定配色难题!

seo达人


前言

合理的色彩搭配是成就优秀作品的必要条件,我之前也写过很多篇关于配色的文章,有兴趣的同学可以翻一翻。

这篇文章我不讲理论,只希望配色做不好的同学,能学会借助工具解决工作中的配色难题。

下面我就为大家推荐5个实用的配色工具,朴实无华的5招,帮你搞定工作中的配色难题。会详细到每个功能的介绍、如何使用、侧重点是什么等等。

补充:因为都是国外网站,如果你英语水平跟我一样差,可以下载一个网页翻译的插件,轻松一点英文秒变中文。

 

一、Adobe Color CC

网站:https://color.adobe.com

Adobe官方出品的配色工具,也是我在刚接触设计时常用的配色网站,支持RGB、CMYK、HSB等多种色彩模式,并且也支持多种配色规则,比如:类比、单色、补色、分割补色等等。

图片

 

使用起来很简单,选定色彩调和规则之后,转动色相轮上的调整锚点,就会出现统一色彩调和规则下的多种配色形式。

图片

 

另外,每个色彩下方都会有对应的属性,并且每个属性都可以通过拖动圆球进行手动调节。

图片

 

所以,在工作中当你只能确定一个主色的情况下,我们可以将其设定为基色,通过手动调整的方式,让系统自动生成配色方案,这在工作中很实用的。

图片

 

还有一个功能很好用,就是从图片中提取色彩的功能,叫做提取主题。

图片

 

当我们看到一张很美的照片或者是想要参考别人作品的色彩时,就可以通过这个功能提取色彩。

图片

 

可以根据图片中的色彩属性进行提取,比如:彩色、亮色、柔和、深色等等,官方叫做使用色彩情景提取。

图片

 

提取主体初始默认是系统自动选取图片中的关键色彩,当然可以手动选择图片中你想要色颜色,是不是特别方便?

另外不仅可以提取纯色,还可以提取渐变色。

图片

 

跟提取纯色差不多,也可以进行手动选取你想要的颜色,同时也可以手动设置渐变色标的数量。

图片

 

还有一些好玩的功能,比如:色彩游戏、对比检查器等等,大家可以去看看效果,都试一下。

 

二、Colourco

网站:https://colourco.de

一个很有意思的线上配色网站,可以根据自己的喜好自由的进行颜色搭配,在调色板内范围内滑动鼠标,颜色就会随之发生变化,想要哪个颜色,鼠标左键点一下就可以锁定,以此类推。

图片

 

它还有很多实用的色彩调和规则,比如:单色、单色和深灰色、类比、四边形。类比与补等等。

图片

 

有了这些色彩调和规则之后,在选定一个色彩调和规则后,你同样可以通过鼠标在调色板范围内移动改变色彩,直到选定之后,点击鼠标左键锁定。

图片

 

如果你感觉调色板数量不够,可以通过页面右侧的“+”号键进行添加。

另外也可以通过手动调整中间颜色的属性和参数,在选定的的色彩调和规则下系统自动生成最优的色彩搭配方案。

图片

 

这与Adobe Color CC网站中的比较相似。

 

三、WebGradients

网站:https://webgradients.com

这是一个主要做渐变色的配色网站,网站内有180种渐变配色方案,整体风格都偏柔和、舒服自然,方案质量很高。

并且支持在线预览、PNG格式下载以及生成CSS代码等等。

图片

与其他配色网站的不同在于:无法手动调整、自由变换,没有过多的操作,从180中渐变配色方案中选择你想要的即可。

图片

 

下面是我随机挑选的几个,确实很漂亮。

图片
图片
图片

 

所以在工作中,当你想用渐变色又没有适合方案的时候,不妨来这个网站看看,也许会有意外收获。
 

四、ColorSupply

网站:https://colorsupplyyy.com
一个做在线配色方案分享的网站,收录了很多来自世界各地优秀设计师的色彩搭配方案,号称设计师和插画师的颜色选择器。
相比其他配色网站来说,它更加立体、直观、有特色。
图片

 

它也支持多种色彩调和规则,不仅有类似、补充、三合会、分裂补等等比较常见的色彩调和方式,还有新鲜的、漫画、自然、丰富的、画家等实用又特别的,可以说是面面俱到。
图片

 

相比其他网站来说,它还有更神奇的功能,就是支持配色方案的实际效果预览。让你实时看到每一个方案运用到工作中是什么样的。
图片

 

它还支持在线预览不同配色方案下的平铺图案、可直接复制的色值卡以及渐变色的实际效果。
图片

 

另外,进入“十六进制匹配”功能,你也可以手动属于一个颜色属性,系统就会帮你生成优质的配色方案,同样也支持方案的实际效果预览。

 

五、ColorSupply

网站:https://www.palettable.io
相比前面几个配色网站来说,这个网站更加简单、好玩一些。有点像一些手机交友APP,你只需要选择喜欢或不喜欢即可。
图片

 

当我们确定好第一个色彩属性之后,系统就会帮我们生成搭配方案,这时你感觉合适的就选择喜欢,不合适的就点不喜欢。
图片

 

以此类推,直至确定最终方案后,点击出口按钮,可以导出PNG格式的色卡。
图片

 

其实每一个系统帮你推荐的颜色,都不是随意随机的,而是使用数百万设计师的知识生成漂亮的调色板,都是有理论依据的。
以上就是我为大家推荐的五个实用的配色网站,每一个都有其独特之处,几乎涵盖了工作中的方方面面。
 
合理的色彩搭配对于设计作品来说往往能起到1+1>2的效果,反之也会将一个整体都还不错的作品毁掉。
所以当我们在工作中对于配色没想法时,不要去闷头苦想,不妨借助这些配色工具帮助你快速找到合适方案,做的多了、接触的多了,自然而然就会提升你的配色功底。 

 

原文地址:美工美邦(公众号)

作者:老张 


转载请注明:学UI网》5招!帮你搞定配色难题!

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

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

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

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



拒绝千篇一律!用「场景创意法」打造高粘性运营活动

seo达人



写在前面

随着互联网时代的不断发展和完善,各大互联网品牌都已在运营活动中集中发力,如何借助运营活动让用户能自发的、高频次的使用产品将决定着未来的商业体量及价值。

说到运营活动不得不提到的就是某多多,某多多的成功靠着拼单省钱这个运营思维让上亿用户都曾帮着朋友砍上一刀,随着这种运营活动的大肆推广,各大友商也随之效仿,越来越多的亲朋好友也在我的帮助下身受数刀而乐此不疲。

图片

*图片信息来源花瓣网

 

随着亲朋好友蜂拥而至发来的求砍链接,似乎记不得我是在什么情境下,以哪种动机,去做了这件事,更记不得这是谁家的品牌,品牌主张是什么?倡导着什么样的消费方式?那对于这种运营活动获取到的新用户真的是商家想要的用户嘛?

如果不是那运营活动要如何打破千篇一律同质化严重的恶性循环呢?

接下来以《赶集薪心愿节》运营活动作为案例剖析给大家,希望通过本次的运营活动解读给大家带来一些小小的启发。

图片

图片

01.行业洞察引发场景联想

无论是刚走出象牙塔的学生党,还是工作已久的白领,职场无疑是一场无硝烟的战场,为了区隔品牌与品牌间的运营活动同质化,赶集薪愿节活动场景拟定为——挑选职场装备的装备库。

图片

图片

 

02.人群定位赋予身份标签

一场无硝烟的战争场中离不开英勇奋战的职场战士,为了给予用户更多的参与感与代入感,将挑选装备的职场人给予“未来职场战士”的身份标签,使其更具荣誉感。

图片

 

03.品牌传达到创意概念

各大招聘类网站都在为自己的平台摇旗呐喊,作为58同城旗下的赶集网平台肯定也要在这场无硝烟的战争中加强赶集网用户的品牌认知,刺激新老用户在端内使用的活跃度,加深用户对“真职位”的口碑印象,在真职位的传达上,结合场景进行专属表述:集齐薪装备,玩转真职位。

图片

图片

 

04.利益驱动转化专属装备

通过对职场人真实生活工作路线场景还原分析,初步分为三大专属装备:1.通讯装备  2.出行装备  3.生活装备。游戏中获得的装备卡片对应的也都是真实职场生活中所用到的物品,让用户感知从虚拟到现实增强用户的身份联想。

图片

图片

 

05.互动游戏方式激发沉浸体验

打造场景化主题运营活动,最终目的还是渲染氛围让人能感受游戏化场景给予用户代入感及满足感,结合游戏场景的互动性能增强用户沉浸式的体验,从而形成肌肉记忆与游戏习惯。

图片

图片

图片

 

活动数据 

活动上线十天数据显示:活动落地页转化率有明显增加,本次用户留存时间较纯利益驱动运营活动有显著提高,上线后活动次留均值及活动分享转化率大幅度提升。

图片

 

总结

靠利益驱使的运营活动是否真的能长久的留住用户,当商家不在为用户提供优惠或奖励时,什么样的运营活动才能代替以利益驱使的运营活动,让用户自发性的有效留存这个可能是运营活动永久的一个值得为之探索的课题。


 

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

作者:环铁艺术家

转载请注明:学UI网》拒绝千篇一律!用「场景创意法」打造高粘性运营活动

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

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

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

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


关于设计的小插件,我只保留了这3个

seo达人



1、SimilarWeb – 网站流量来源和排名

图片可以看到一个网站的基本数据,比如浏览量,访客都来自世界的哪里?-都是通过什么途径访问的该网站等等

图片

图片

以上是我用B站来举例,可以看到一些基本信息,点击下面的按钮可以跳转到新页面用以查看很多的信息:图片图片

最关键的来了,最下面可以查看与该网站相似的网站,这条对设计师非常有帮助,很多设计师做网页设计的时候不会找竞品,这功能简直是福音啊:

图片

另外还有一点,比如你要去面试一个公司,很多人不知道面试说什么,你就可以用这个小插件来看看你要面试公司的网站数据情况,然后再结合你自己的设计作品链接起来,显摆你对他们公司客户群的了解,这样面试时候就可以做到侃侃而谈不失尴尬。

 

2、Nimbus 截幕 & 屏幕录像机

图片

功能非常多,各种模式的截图都有:

图片

 

3、也就是万人推荐的Muzli 2 – Stay Inspired

图片

图片

设计师必备的主页,每次打开都可以看到很多新鲜的设计资讯。

图片

你甚至可以直接搜索颜色,然后会出来很多设计作品。还可以搜索关键词,比如你搜索dasboard

图片

有条件的可以打开chrome检查看看自己是不是都安装了,如果你还有不错的插件推荐,可以在下面留言。

 

原文地址:追波范儿(公众号)

作者:terechen

转载请注明:学UI网》关于设计的小插件,我只保留了这3个

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

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

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

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



设计赋能商业变现初探

seo达人



关键词解读

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

图片

关键词

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 站那些的知识区 UP 主说起。

最近,在不知觉中,我养成了在 B 站追更知识区 UP 主的习惯。比如 “法外狂徒” 罗翔老师,常以 “张三” 为主角,将严肃枯燥的法律知识点,串联成一个个普法故事,妙趣横生。这些视频内容,都很擅长使用最简单的故事讲述复杂的专业问题,能够让没有专业背景的普通人听得懂,看进去,学习到知识。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

故事在复杂的知识和观众之间架起了一座沟通的桥梁。

因此,我开始思考,将故事中一些引人入胜的技巧和方法,用到体验设计中帮助用户理解信息、参与互动。

梳理故事要素,全面了解用户

以下哪段描述更吸引你呢?

  • “凯文到了理发店,在理发店等了一个小时,最后理了发。”
  • “上了一周班的凯文周末想剪头发。天气很热,走到时凯文已满头大汗。开门瞬间他心一沉,顾客挤满了理发店,他在旁无聊的等了一个小时,最后总算理了一个满意的发型。”

这两段描述其实讲的是一个事情,但是后者包含了讲故事最重要的六个要素:

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

因此,将这两段描述一起比较,前者是简陋生硬的流水账,后者则是完整生动的故事。从生动的故事中,我们更能体会到人物的所有行动以及情绪。

通过六个要素塑造一个人物角色的故事,让我们能快速在脑海构建一个立体的角色形象。在日常的设计工作中,每个产品需求对应的目标人群各有差异,设计师同样可以使用故事的六个要素,帮助快速了解我们的用户。

首先,在调研中,可以按照故事六要素设计的访谈问题,这样可以帮助了解到相对全面的用户信息。其次,调研后整理信息时,可以根据故事六要素,将素材加工成具体且有代表性的故事,能够帮助我们不被繁杂的原始信息束缚。

下面看看故事的六要素方法在微信记账本的改版方案中的实践。

这次改版的目的是为了解决记账本的流失问题。方案前期,我们根据故事的六个要素设计了访谈提纲,然后招募用户,进行了面对面的调研访谈。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

随后,由于访谈提纲与故事六个要素对应,因此按照这个对应关系,我们从原始的访谈资料中,整理出一个具有代表性的用户故事。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

通过这个故事,我对目标用户的身份、行为、习惯有了清晰直观的了解。同时,根据故事中情节描述,再对照记账本中的交互体验,可以看出,用户流失的核心问题主要在于,自身的记账习惯与记账本提供的体验不匹配,导致用起来有阻碍,用得不习惯。

用户的习惯是按日看账,但是记账本没有聚焦在每日的统计上。因此,方案中我将明细页按日分块区隔,不仅每日的信息更聚焦,而且方便用户进行日间的对比。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

同时,用户大部分时间都在关注当日的账,只在月底、月初等阶段性的时间节点,才会复盘整月的记账情况。因此,我设计了 Tab 页面结构,区分了用户的高低频行为。用户进入记账本时,会优先呈现明细,通过 Tab 页面切换,在需要时也可以看到该月的记账统计。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

这个方案在后续的用户调研中,得到了不少用户正向的反馈。由此可见,利用故事六要素设计,能帮助设计师了解用户,能从混乱的信息中抽丝剥茧,找到清晰方向。

参考故事结构引导完成任务

积木虽然只有几个形状,但是通过排列组合,能有无数种结果。这跟体验设计的工作的很像。日常工作中我们大部分时间不是在创造一个从未见过的事物,而是将已有的信息进行组织,让用户顺利的完成一段符合期待的旅程。

故事的结构就是一种组织信息的方式,可以串联起用户在页面、流程中的行动,让用户更容易朝着一个目标移动。

最常见的故事结构就是经典的三段式结构,开头铺垫情节,中间描述冲突,结尾给出解决方案或行动。这种方式符合人类的认识规律,也被无数荧幕经典验证过。

让我们再来跟随朋友会员的方案,感受如何用三段式的故事结构,构建起一个顺畅的任务流程。

为满足中小商家吸引顾客消费的需要,小账本提供了会员优惠活动的功能。但是我们的中小商家群体一般都缺少专业的运营经验,为了让他们顺利完成设置活动的目标,我参考故事中的三段式结构去呈现页面信息,帮助理解活动、完成设置。

  • 开头,对设置会员活动有什么好处进行了铺垫,说服商家的参与。
  • 中间,给商家提供会员活动,洞察商家可能会遇到选择活动的问题。
  • 结尾,提供活动建议,根据商家的建议进行活动推荐,解决问题。

在故事中,冲突和起伏是人为创造出来,甚至需要戏剧性的夸大表现。体验流程中,冲突是用户使用功能中可能会遇到的问题,我们要提出解决方案,避免冲突,让任务流程顺畅。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

当然讲故事的结构不止一种,故事结构的本质是为了将零碎的情节串联成一个自然的流程,方便用户和理解。

明确主线支线,辅助聚焦目标

在故事中,一般围绕着主角去展开故事。试想一下,西游记中如果将诸天神佛、各路妖怪的都安排成主角,那将是多么盘杂的信息量。因此故事才以师徒五人西行取经为线索展开。后面随着一路上斩妖除魔,整个奇幻诡谲的神话世界跃然纸上。因此,故事中,用区分主线为主、支线为辅的处理,避免用户的注意力被分散。

回到我们用户的旅程中也是一样,无关紧要的操作将会将用户分散用户的注意力,让用户脱离原本的目标。因此在实际的设计工作中,要根据用户的目标,区分清楚主线、支线。

想要区分主线支线,就必须取舍。将跟用户目标强相关的重要信息放在主线,可以让用户的操作更聚焦;同时,将次要的信息放在支线,辅助充实主线。用户有更深入的需求时,也能够有地方获取。

以顾客抽奖中让商家顺利完成一个抽奖活动的设置为例。如果要设置一个抽奖活动,需要设置奖品、活动周期以及开奖时间。这三项操作,我们如果让商家自行操作,他们的操作门槛会非常高。他们甚至会因为复杂的操作而放弃使用。

因此,根据与商家的交谈,我们将用户更重视的奖品信息设为整个活动的主线。按照商家会持续进行其他会员活动的习惯,默认设定了定期开奖,持续活动的通用规则。同时将只有部分用户需要的修改活动形式和开奖时间的高阶操作,收拢到支线中。保证主线通畅,用户能轻松开启活动。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

如果一些支线无法很好辅助主线,甚至影响主线信息的传递,我们也可以舍弃。

以朋友会员中为商家生成一张传播优惠信息的宣传海报为例。在过程中我们在针对为海报的设计了自定义宣传语编辑、海报主题选择等功能,后面发现用户在编辑宣传语、选择海报主题等支线任务上付出了不少时间。因此,最近的方案中,我们去掉了这个支线任务,虽然也是牺牲掉了一些自定义编辑的能力,但是对于复杂规则理解困难的商家而言,生成海报的路径变得简单清晰了。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

主线支线本质上就是一种明确任务优先级的方法,主线支线的安排要从达成的目标出发去取舍。

结语

以上就是讲故事的一些具体的方法在设计流程中的作用。总结一下:

  • 梳理故事要素,全面了解用户
  • 参考故事结构,引导完成任务
  • 明确主线支线,辅助聚焦目标

当然,因为时间的关系,以上的思考只是冰山一角,故事在设计中发挥的作用不止于此。比如讲故事还可以用在日常的合作沟通中,帮助快速达成共识;故事也能用在产品宣传中,让用户留下深刻的印象,等等。

故事在日常的设计工作中无处不在,如果你是一位用户体验设计师,说不定,你在平时的工作中就不知觉的就用到了讲故事的能力。斯蒂夫.乔布斯曾经说过:“世界上最有权利的人,是讲故事的人。他们设定了未来世界的场景、价值和流程”。


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

文章来源:优设   作者:We-Design

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

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

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



「设计系统」的完整框架

涛涛

很多年前刚听到这个概念的时候,一直觉得设计系统是个非常高大上和牛逼哄哄的事情,当时 Material Design 刚刚出来没多久,苹果的人机设计指南在设计圈称王称霸,虽然自己主要做的都是安卓系统,还是认真拜读了 IOS 的 Human Interface Guidelines。

然后,其实也没有什么然后了……

你怎么看待设计系统这件事呢?

关于设计系统,有的人会觉得类似于一种玄学,有的人认为它好是好,但容易被束之高阁,放着落灰,有的人认为它对于设计师是一种束缚……另外,还有很多和它相关的概念也经常被混淆:设计语言、设计原则、设计规范、设计风格、设计组件……

从3个方面,帮你快速掌握「设计系统」的完整框架

图 1: 设计系统词云图

为了理清设计系统到底是什么,我把上面的这些和设计系统经常出现的词语进行了分类。我认为,它们指出的,应该是基于不同角度对设计系统的解释。在这些词语里,有的解释了设计系统存在的原因:追求效率,保持一致性、避免重复劳动,有助于数字产品形成整体性等。有的解释了它的组成或者相关联的内容:设计规范、设计语言、设计原则、设计规范、设计风格、设计组件等。有的解释了设计系统容易出现的问题:玄学、束缚、高大上,理想化等。

存在原因

存在原因,也就是建设设计系统的目的,正是由于设计系统是为了帮助我们的工作工作更加有效率的一个整体工具,也就注定了设计系统的样式、组成和运作方式不会一层不变,每个公司都需要自己找出适合自己团队设计与开发之间最顺畅的那个系统。

要知道,虽然设计系统听起来很酷,但创建一个好的设计系统其实是非常消耗精力的。所以,设计系统的目的一定要清晰并且符合现状需要。

为什么还要去创建设计系统呢?

我认为,只有对于下面这几条,你或团队有强烈的需求,才是生成一个设计系统的好时机。

  • 以往的设计内容总是需要被快速重复使用
  • 需要释放设计资源,让人力更专注于更加复杂和有价值的问题。
  • 需要在多个团队或多个产品之间保持一致性
  • 需要帮助初级设计师的产出迅速达到更高级的要求

没有被需要的设计系统,就是未来束之高阁,等着落灰的一套“玄学”。

组成内容

系统这个词,是指由相互联系的要素构成的有特定结构和功能的有机整体。设计系统,自然也是一个整体性的有机集合。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 2:设计系统的组成内容

1. 设计原则

设计原则是引导设计系统建设的指导思想和战略方向,基于大量实际经验提炼的高度理论化概括。

设计原则这个概念并不是为了设计系统才出现的,从完形心理学流派运用过来的格式塔理论所包括的临近性、相似性、封闭性、连续性等设计原则,还有以“如非必要,勿增实体”为核心的简约设计原则,来自唐纳德诺曼的概念模式、反馈、限制范围、可感知的预设用途四条设计原则等等。

为了对抽象的设计原则有更具像化的体会,我们再来看看几个比较有名的设计系统的原则。

  • 苹果公司:美学整体,一致性,直接的操作性,反馈,隐喻,用户可控
  • 微软公司:自然而然的,符合直觉和有力的,引人入胜且沉浸
  • 谷歌公司:材料是一种隐喻,明显、图形化和有目的性的,有意义的动效

从3个方面,帮你快速掌握「设计系统」的完整框架

图 3: 三大设计系统的原则

突然发现就苹果公司没给自己的设计系统专门取一个名字啊~

可以发现,虽然三家公司的设计原则各有不同,但几乎都是从通用的设计原则中提炼优化的。

建设一个设计系统一定需要设定自己的设计原则吗?

我认为它不是必须的。

虽然设计原则很重要,但在设计系统初期的时候,遵循现有基础和通用的设计原则来指导建设整个系统也是可以的。总好过随随便便从基础通用的设计原则中拿出一些词语润色一下,简单的堆砌一些高大上的词语,空泛的放在那里,等着它们逐渐变成别人口中的“玄学”吧?

正因为原则是设计系统高度抽象化的结晶,所以它需要基于大量实际设计经验再去生成,不然,很难起到指导设计系统达到增加效率的目的。

2. 设计风格和规范

设计风格,是这个设计系统给人形成的一种代表性的图形印象。设计规范,是用于协调统一性的规则和范式。在 60 年代的《美孚品牌手册》和 70 年代的 《NASA 图形使用规范》中,就已经包含“颜色、字体、图形、用法和示例”等内容。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 4: 设计规范

有了设计风格和设计规范并不一定就能让使用这个设计系统的产品建立统一的品牌调性,只有当设计系统具有了一定辨识性的设计风格,并在设计规范指导下进行长期的设计产出后,才能够让使用这个设计系统的产品形成统一的品牌调性。

3. 设计组件和模式

对于设计系统里,我们最熟悉和常用的应该就是设计组件了,也就是 UI kits,包括输入框、按钮、文字、链接、下拉菜单等等。是组成界面的最小元素和这些元素的常用集合体。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 5: UI kits

设计模式,比元素更复杂一些,是完成任务所使用的一些基础的、常用的交互方式,是可以解决问题的小型设计方案。比如 Material design 里的 Confirmation and acknowledgement,它提供的就是为机器在执行操作之前向用户确认的一系列设计方案。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 6: 设计模式

简单点来说,设计组件就是一些元素,主要给设计师用的,设计模式就是一些交互方式,主要给研发工程师看的。由于两者很相似,如今更多的会把两者合起来看。

2013 年,前端工程师 Brad Forst 将原子理论运用在界面设计中,形成一套设计系统后,设计组件得到进一步扩展,可以形成比原来最初出现设计模式这个概念时更高层次的集合体,例如,大到几个完整的页面及其包含的交互方式,也可以成为某个设计系统的其中一个组件。

当然,由于各个产品的需求、场景和定位等不同,越大的合成组件将会越复杂。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 7: 原子设计理论

4. 内容资产

在某些设计系统的定义里,可能会把内容资产作为设计规范的一部分,但我这里想强调的是其作为资源的一部分。

由于设计系统是一个有机的整体,在它不断的服务于各产品线的同时,也一定会需要不断填充不同的内容,比如应用里使用的图标、字体、插画、模型等等,这些内容积累下来,也应该成为这个设计系统的一部分,如果有其他的应用或产品需要,就可以直接取用,从而提高整体的工作效率。

内容资产比较常见的有图标库、字体库和音效库,分别提供了多种图标、多种字体和多种音效可以给不同的产品或应用使用。随着插画风格、三维风格的留下,未来必然还会出现隶属于某个设计系统的插画库、模型库,以及在产品里经常使用的文案集合。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 8: 内容资产

5. 工具、流程

这两块主要是针对设计系统适用的具体环境,在协同性要求下我认为需要纳入设计系统的内容。简单的举例来说,就是如果使用蓝湖做自动化标注,就团队统一使用蓝湖,而不是有的人使用蓝湖,有的人使用摹客。

6. 设计语言和设计方针(guidelines)

还有两个经常提到,但我刚才画的设计系统图示里没有提到的概念。

设计语言:语言,是一个能够达到相互交流的符号系统。人类学家索绪尔认为,语言能反映出多变言语活动背后的稳定规律。所以,我认为这里的设计语言,应该等同于设计规范,是设计规范另一种表述。

设计指导方针(Design Guidelines):按照中文翻译理解,我认为它是说明、介绍设计系的文档,没有包含在设计系统内。

常见问题

最后,设计系统的词云图里出现的玄学、理论化、落灰、空中楼阁……这些都是创建设计系统时很容易遇到的一些问题,尤其是实用性最高的设计组件,更是首当其冲。之前我组织我们团队的设计师做复盘性质的workshop,单就设计系统的设计组件部分,大家就提出了20多条问题。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 9: 设计组件复盘 workshop

综合来说,设计系统常见的问题有三类:

1. 定义性问题

设计系统从大的框架性定义到具体设计组件的定义都不是件一蹴而就的事情,它从 0 开始,每一次的更新和迭代,对于当前的团队来说都需要是既关键又有效的。关键是指设计系统当前定义下来的内容是后面的产品线经常性使用的,有效是指这些定义确定下来的内容是可以使用现有的资源去完成的,即以现有团队的能力、时间和设备是可以完成并达成其效果的。

2. 使用性问题

目录不清晰,文档说明不全,包含资源不完整,这些都是使用时的问题。如果把设计系统看作一个产品,让用户(设计师或研发人员)觉得好用,才是它不会被束之高阁的解决方法。

3. 协作性问题

不知道有更新,收不到反馈,不了解使用者的情况……协作性的问题催生了市面上诸如蓝湖、摹客、墨刀、Codesign以及很多设计软件的云服务功能等。

虽然现在市面上有非常多优秀的设计系统可以参考,但正如在存在原因中提到的,由于它是为了帮助我们自己所在的团队更有效率的工作,终究还是需要靠自己基于实际情况去做变化。


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

文章来源:优设   作者:林影落 



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

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

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



axios 封装,API接口统一管理,支持动态API!

前端达人

分享一个自己封装的 axios 网络请求

主要的功能及其优点:

将所有的接口放在一个文件夹中管理(api.js)。并且可以支持动态接口,就是 api.js 文件中定义的接口可以使用 :xx 占位,根据需要动态的改变。动态接口用法模仿的是vue的动态路由,如果你不熟悉动态路由可以看看我的这篇文章:Vue路由传参详解(params 与 query)

1.封装请求:

  1. 首先在 src 目录下创建 http 目录。继续在 http 目录中创建 api.js 文件与 index.js 文件。
  2. 然后再 main.js 文件中导入 http 目录下的 index.js 文件。将请求注册为全局组件。
  3. 将下面封装所需代码代码粘到对应的文件夹

2.基本使用:

//示例:获取用户列表 getUsers() { const { data } = await this.$http({ url: 'users' //这里的 users 就是 api.js 中定义的“属性名” }) }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3.动态接口的使用:

//示例:删除用户 deleteUser() { const { data } = await this.$http({ method: 'delete', //动态接口写法模仿的是vue的动态路由 //这里 params 携带的是动态参数,其中 “属性名” 需要与 api 接口中的 :id 对应 //也就是需要保证携带参数的 key 与 api 接口中的 :xx 一致 url: { // 这里的 name 值就是 api.js 接口中的 “属性名” name: 'usersEdit', params: { id: userinfo.id, }, }, }) }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

4.不足:

封装的请求只能这样使用 this.$http() 。不能 this.$http.get() 或 this.$http.delete()

由于我感觉使用 this.$http() 这种就够了,所以没做其他的封装处理

如果你有更好的想法可以随时联系我

如下是封装所需代码:

  • api.js 管理所有的接口
// 如下接口地址根据自身项目定义 const API = { // base接口 baseURL: 'http://127.0.0.1:8888/api/private/v1/', // 用户 users: '/users', // “修改”与“删除”用户接口(动态接口) usersEdit: '/users/:id', } export default API 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • index.js 逻辑代码
// 这里请求封装的主要逻辑,你可以分析并将他优化,如果有更好的封装方法欢迎联系我Q:2356924146 import axios from 'axios' import API from './api.js' const instance = axios.create({ baseURL: API.baseURL, timeout: '8000', method: 'GET' }) // 请求拦截器 instance.interceptors.request.use( config => { // 此处编写请求拦截代码,一般用于加载弹窗,或者每个请求都需要携带的token console.log('正在请求...') // 请求携带的token config.headers.Authorization = sessionStorage.getItem('token') return config }, err => { console.log('请求失败', err) } ) // 响应拦截器 instance.interceptors.response.use( res => { console.log('响应成功') //该返回对象会绑定到响应对象中 return res }, err => { console.log('响应失败', err) } ) //options 接收 {method, url, params/data} export default function(options = {}) { return instance({ method: options.method, url: (function() { const URL = options.url if (typeof URL === 'object') { //拿到动态 url let DynamicURL = API[URL.name] //将 DynamicURL 中对应的 key 进行替换 for (const key of Object.keys(URL.params)) { DynamicURL = DynamicURL.replace(':' + key, URL.params[key]) } return DynamicURL } else { return API[URL] } })(), //获取查询字符串参数 params: options.params, //获取请求体字符串参数 data: options.data }) } 
  • 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
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • main.js 将请求注册为全局组件
import Vue from 'vue' // 会自动导入 http 目录中的 index.js 文件 import http from './http' Vue.prototype.$http = http

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

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

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

elementui导出数据为xlsx、excel表格

前端达人

我这里为了同学们好理解,把所有元素都写到一个页面。

1.第一步安装插件


  1. npm install file-saver
  2. npm install xlsx

2.第二步在mian.js中设置全局


  1. // vue中导出excel表格模板
  2. import FileSaver from 'file-saver'
  3. import XLSX from 'xlsx'
  4. Vue.prototype.$FileSaver = FileSaver; //设置全局
  5. Vue.prototype.$XLSX = XLSX; //设置全局

3.第三步使用 


  1. <template>
  2. <div class="daochu">
  3. <el-button @click="o" type="success" round>导出</el-button>
  4. <el-table
  5. id="ou"
  6. :data="tableData"
  7. style="width: 100%"
  8. :default-sort="{ prop: 'date', order: 'descending' }"
  9. >
  10. <el-table-column prop="date" label="日期" sortable width="180">
  11. </el-table-column>
  12. <el-table-column prop="name" label="姓名" sortable width="180">
  13. </el-table-column>
  14. <el-table-column prop="address" label="地址" :formatter="formatter">
  15. </el-table-column>
  16. </el-table>
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. tableData: [
  24. {
  25. date: "2016-05-02",
  26. name: "王小虎",
  27. address: "上海市普陀区金沙江路 1518 弄",
  28. },
  29. {
  30. date: "2016-05-04",
  31. name: "王小虎",
  32. address: "上海市普陀区金沙江路 1517 弄",
  33. }
  34. ],
  35. };
  36. },
  37. methods:{
  38. o() {
  39. let tables = document.getElementById("ou");
  40. let table_book = this.$XLSX.utils.table_to_book(tables);
  41. var table_write = this.$XLSX.write(table_book, {
  42. bookType: "xlsx",
  43. bookSST: true,
  44. type: "array",
  45. });
  46. try {
  47. this.$FileSaver.saveAs(
  48. new Blob([table_write], { type: "application/octet-stream" }),
  49. "sheetjs.xlsx"
  50. );
  51. } catch (e) {
  52. if (typeof console !== "undefined") console.log(e, table_write);
  53. }
  54. return table_write;
  55. },
  56. }
  57. }
  58. </script>

可以看到已经导出 

实际工作中导出按钮单独抽离出去做到可以复用才是比较合理的




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

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

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

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



日历

链接

个人资料

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

存档