我们在去做这种类型的风格时，要学会总结，机能风的海报版面虽然整体呈现较为复杂的效果，但如果仔细观察，基础的元素都比较简单。

大家在做之前可以去先总结，通过观察这类作品可以得到以下元素，比如：

01. 电子元件/芯片

02. 机械感元素

03. 不规则标签

04. 警告符号，装饰性符号等

05. 黑白灰及荧光色的搭配使用 

然后我在准备教程案例就开始画呀画，画了蛮多适合应用在机能风格海报中的元素，最后干脆想了一下，那就索性把所有的画完，源文件都送给大家吧…

教程突然就变成了素材分享…

下面我们来先看一下本期分享的素材，总共分为四个部分，每个部分的形状细节都有不同的差别。

但是下载素材只是第一步，很多同学平时电脑里也攒了不少素材了，误以为收藏等于学会，下载等于精通…

设计毕竟是个手艺活，还是要动手试试才知道怎么使用。

01、首先我们从我给的素材里面挑选几个元素，我这里选择了三个，大中小。

02、人物抠图后，先观察一下，人物本身自带了黄色的轮廓光，那么主色我们就尽量要选择黄色了，画面才会有合理性。

03、这一步就是将图形按照较为平衡的构图方式进行放置，可以和人物有适当的叠压穿插关系。

为了避免图形太过零碎，强烈建议大家可以先以一个大色块为主，可以避免主体散乱。

04、接下来将文字信息进行空白处放置，注意这里比较主要的信息就三块，人名，活动名称，时间地点，编排上主要突出这三个部分即可。

多余的装饰性英文信息适当缩小，起到一个点缀的作用就可以了。

05、最后添加一个纸张褶皱的效果，因为我元素及色彩处理的比较简单，所以加深质感的处理，可以让海报更有层次感。

接下我们看第二个案例，这个案例我打算使用元素拼接的方式让画面更整体，细节可以适当处理多一些。

01、老规矩，开始挑选图形元素…

挑元素的过程确实是…太爽了，怪不得大家这么喜欢素材，尽管素材是我一个一个画的，但是我挑的时候也感觉…太方便了…

这里我顺便将元素组合了一下并且加了个颜色。

02、如果只是在画面中间这样放置的话，四周缺乏呼应的元素，所以大家可以根据已经选好的图形特征自己简单画一些。

效果如下，是不是感觉完整性好多了。

03、然后图片放置进图形中，图片整体也是呈现红色调的，所以整体的色彩和元素我已经用了红色，那么建议重点的信息在这里都用白色，可以简单做一个色彩突出的作用。

无论装饰元素和文字有多少，最终还是要想办法突出重点信息，这两者本身并不冲突。

看第三个案例，先选元素。

01、顺便选一些简单的图形装饰元素，比如箭头条形码等。

02、这个图片本身已经蛮好了，底色也很简单，所以我不打算抠图了。

03、接下来注意观察图片，底部有大量的黑色，所以我们的标签部分可以直接放图片下方就可以了。

其余文字环绕人物进行编排即可。

04、正在这个案例中，我想添加一下类似毛玻璃和磨砂的效果，增强图形的质感。

05、按照这个方法，我为其他地方也添加了这样的磨砂效果，下图为最终效果。

01、看第四个案例，先选元素。

其实我个人还是更喜欢这种带圆角的感觉，感觉有点高端的样子…

02、将元素和人物图片进行合理构图，其实就是控制每个元素的大小和位置，放置他们的错落感，保证人脸不要被色块遮挡，文字信息顺便也放置进元素中即可。

03、还是按照上个案例做磨砂效果的步骤，我们再加几处磨砂效果。

下图为最终效果。

04、注意这里的磨砂效果除了加描边，我还加了投影，让整个画面的色块错落有点纵深感。

01、第五个案例我们换一下人物…一个题目做了四个案例,估计大家已经看腻了…挑几个图形元素。

02、我们将图片和元素做一下结合处理，人物的部分我做了错位的处理，有点视觉迷幻的效果。

人物名字放置图片顶部即可。装饰性文字可以适当的跟元素做一个整体排版处理。

03、最后，老方法，再加几个磨砂效果，你别说…这个效果确实有点上头，普通人受不了这种诱惑…

不要怪我非要做的花里胡哨，花天酒地也不是我想要的方式…

01、第六个案例，还是…

挑几个图形元素…

02、人物图片本来是这个样子，背景是白色，不好处理整体的色彩变化，而我…也不想抠图…

所以在ps里加了一个渐变映射效果。

03、图片用一个元素，标题用一个元素，这样就做好了构图排版处理。

04、但是到这一步，画面还是会有点空空荡荡，填充一些呼应的元素即可。

最后，再加入纹理的效果叠上去就可以了。

01、第七个案例，挑几个细节较为复杂的元素，这次我们是单独拿来做背景使用。

02、为了做出层次感，可以给色块适当添加渐变色和投影，有点立体的效果会更好，因为本来就都是偏白色的，没有投影和渐变的话效果不明显。

03、重点信息我们就用以复本来的颜色就好，可以多一点装饰性元素作为点缀，不然白色的背景还是有点空，有一些点线面的变化版面会舒服一些。

04、最后…

再加几个磨砂玻璃效果…

这次我是真的腻了腻了…

01、第八个案例，元素选好之后，我这里直接处理了渐变的效果，作为背景，有了一点质感。

02、黑白的人物放上去就很适合，这一步我们就搞定了背景和人物的画面整体处理。

03、然后将文字编排进画面中，但是整体除了黑就是白…

颜色有点太单调了，所以我们要换换颜色。

04、这个颜色…

就…

挺好…夜店风的感觉…

最后来放一下合集

原文地址：胡晓波工作室（公众号）

作者：王猛奇

转载请注明：学UI网》科幻机甲风格海报怎么做？

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

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

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

品牌价值“藏品化”的可能性

通过对阿里云用户调研发现，数字藏品这项技术有着广泛的用户认知基础，有91%的阿里云用户对阿里云推出数字藏品感兴趣，其中81%的用户比较感兴趣及非常感兴趣，40%的用户曾经购买过数字藏品。这项结论让设计师们非常兴奋，这就意味着利用数字藏品传递阿里云品牌价值存在确实的可行性。

致敬里程碑 

设计师和业务团队就数字藏品的设计方向进行了多轮沟通和论证，以阿里云飞天5K纪念碑为表现形态的思路脱颖而出。

出发点是设计师们想借此项目重塑营销品牌心智，回到“为了无法计算的价值”阿里云品牌主张，用“飞天5K纪念碑”这个开发者心中的图腾，在网站上进行数字藏品与任务平台的联动，通过创意与品牌为业务带来用户增长价值。

回溯历史，阿里云飞天5K是阿里云计算技术发展的一个里程碑，飞天5K集群上线是中国云计算最值得纪念的时刻，代表了中国云计算技术人勇敢追梦、追求极致的理想主义精神，其在用户心中的意义不亚于一次成功的“登月”，这种寄托已经成为阿里云品牌的核心资产之一。

因此选择云计算开发者的精神图腾——“飞天5K纪念碑”作为创意原型，进行数字藏品的设计，进一步拉进与用户的距离，同时能在开发者圈层中打造心智，营造传播声量，链接阿里云品牌与用户间的情感共鸣。阿里云首款数字藏品让用户充满期待，用户关注的将不仅是藏品的使用价值或增值价值，更多的是一种不可替代的情绪价值。

业务目标的自然融入

〇 破圈裂变组合拳

在整体方案设计上，团队将拉新的核心目标和飞天5K数字藏品做了深度结合，利用「阿里云IP品牌价值+首发造势+大促氛围+精准的种子用户裂变+所见即所得的虚拟权益」的超强组合拳，构建了完整的爆点传播链，带来规模化新增用户，完成了一次成功的破圈尝试。

〇 多端联动引发爆点

通过所见即所得的虚拟权益，突破用户预期，引发了活动参与用户通过微信群、朋友圈、微博、论坛等各种平台的自传播，形成稳定裂变链条，吸引更多玩家参与。同时官方通过阿里云App、官方微博、鲸探App、鲸探小程序形成流量矩阵为活动背书，引爆活动传播。

用户因情感的唤醒，通过数字藏品活动自然的完成了对阿里云产品的了解，并在主会场产品力彰显、爆款价格吸引下，成为了阿里云新用户，帮助业务完美的完成了既定目标。活动仅仅上线6天即完成一万份数字藏品的发放，首购ROI达到58，同比上一次奥运小宝的拉新活动提升230%。

未来之路 

数字藏品未来将成为阿里云传递品牌价值的重要载体，更多承载了中国云市场情感的作品将定期与用户见面，逐步形成阿里云独有的云数字藏品矩阵，赋能云业务的发展。

原文地址： 阿里云设计中心（公众号）

作者： 阿里云设计中心

转载请注明：学UI网》B端营销创意｜数字藏品能否成为B端业务力爆发的新介质？

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

优先考虑重要的内容，在页面中保持重要的信息占比更大、更明显。

为了让用户能够快速看到关键信息，可以通过滚动的交互方式和指导性的按钮设计，帮助用户找到他们想要的信息。

‍▲ 例如《纽约客》网站的布局设计，在中间位置优先展示最重要的资讯，突出重点，网站两侧的资讯展示相对弱化。

二、保持合理的视觉层级

页面中清晰的层级结构对用户来说也很重要。通过打造明确的视觉层级结构，页面内容的主次关系会更清晰和合理，方便用户更容易理解页面信息。

▲ 在Netflix影片详情页的布局中，保持了清晰的视觉层级关系。跳到详情页后，我们首先会看到页面顶部的预告片和大尺寸的白色高亮播放按钮，然后是关于影片的介绍和其他功能。

三、使用非对称布局

对称布局和非对称布局在日常设计中都很常用。对称的布局能够让页面看起来更加统一、整洁，但也导致页面效果缺少对比，效果单调。

非对称的布局刚好可以弥补这个缺点，在保证排版整齐的基础上增加页面的对比关系，让页面看起来更有吸引力。

▲ 例如在这个网站首页中，左图右文的非对称布局设计让整个页面看起来更有对比性和冲击力，快速吸引用户的注意力。

四、使用间距

通过间距，能够将页面中不同的版面和内容划分出来，让页面的布局更丰富。

同时，通过调整间距的大小能有效区分内容间的关联程度。例如，同一组信息采用间距小的布局方式，让内容的关联更紧密。

▲ 在Instacart页面中，上下有两种不同的布局方式，通过增加间距，让页面看起来更清晰。

五、打破统一的布局

过于统一的布局方式会让页面看起来很单调，无法突出重点。

如果想让页面中的某个内容吸引用户的注意力，可以尝试在打破一致的布局情况下，让页面看起来更有节奏。

▲ 在Airbnb网站中，图1、2和5采用了相同的尺寸，图3和4打破了统一的布局，让页面看起来更有动态感。

六、使用网格

网格系统是使用网格作为辅助，进行页面设计的方式。通过使用网格系统，可以更准确地定义页面的布局。

当然，网格不仅能用在页面布局设计中，在其他类型的设计（海报、画册等）中也常用到，是非常值得设计师学习的系统。

七、保持对比

在设计页面的布局关系时，要尽可能做到图文搭配，保证既要有文字、按钮等元素，也要有一定量的图片，让页面保持对比性。

▲ 例如这个网站首页中，左右两部分采用了一致的布局方式，以图片作为背景，文字和按钮等元素与背景产生对比，提高页面的冲击力。

最后

通过这些实用的布局技巧，希望能够帮助你设计构建出更好的界面布局~ 对界面中内容的划分和信息的掌控带来进一步的提升。

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》在UI布局排版中，让界面快速出彩的7个技巧

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

图片来源于网络，版权归作者所有

一、几何简史课 

欧几里得常被称为“几何之父”，因为他写了一本叫《几何学》的书，这是数学史上最有影响力的著作之一。

几何图案来源于几何学，几何学是数学中对形状和线与面之间关系的研究。图案被定义为“重复的装饰设计”。

在设计中，几何图案反复使用形状和线条来创造引人注目的设计。几何图案非常适合用于设计，因为从本质上讲，我们的眼睛自然会被它们吸引。通过将几何图案与合适的颜色相结合设计引人入胜的视觉内容。

世界内外的一切都可以通过数学来推断和理解，这正是许多文化将几何视为神圣的原因，从一开始就被人类直观地使用和理解。

因此，几何形状和图案在艺术和设计中具有很大影响力。从伊斯兰艺术到包豪斯运动、立体主义、装饰艺术等等，几何图案一直并将继续在设计中发挥关键作用。

我们可以将几何设计用于从品牌到产品、插画、网站、应用程序设计等等的任何设计中，下面带大家看一些几何图案在不同设计环境中的运用案例。

二、几何在设计中的运用 

1、平面设计

杂志封面设计结合了三角形和充满活力的各种配色，创造出炫酷的图案，色彩缤纷的效果。

平面设计师 Atul Charde 设计的长途汽车，展示了几何图案可以很好的吸引人的注意力。Charde 还结合了黄色、橙色、海军蓝和白色的配色，创造出一种正在忙碌行驶的感觉，很生动形象的体现了长涂汽车的概念，十分契合产品。

几何设计也非常适用于包装上面，用简单的形状组成复杂的图案来包装产品。

这瓶酒使用简单的线条来创造一个有趣的几何图像。这是一个很基本的设计方法，但通过巧妙地结合颜色填充几何形状，设计感就出来了。一个复杂的图案就是由一个简单的图形组成的。

卢塞恩纽巴德俱乐部音乐会系列海报，用绘画与几何的结合，表现了音乐的非常规和自由特点。

闪电形、星形、三角形表达音乐的激烈抑扬顿挫感；圆形、传达音乐的平静、缓和感；自由笔触有序直线，传达音乐的有序、绵长感。

2、品牌

Nymble 健康套盒品牌视觉提取品牌首字母“N”与人奔跑时的姿态结合，虽然是简单的几何线条和点，却非常有动感，简洁而传神。

品牌延展部分是对品牌标志更进一步的理解和演绎，沿用了标志中的点、线元素，通过对点与线的位置、距离、粗细、大小的调整，构建出一整套可变的网格图案。

涉谷时装周2020-2022的视觉设计用圆形几何化的视觉语言，将SFW2020组合成图标，并拆分重组成为辅助图形，运用到画面整个体系中。从2020-2022，通过不同视觉展现不同的视觉风格，2022的工业鬼马感、2021休闲时尚感、复古都市感。

玻璃质感和几何图形的结合完美诠释主题，体现宏大精致的美。元素简洁，通过细腻的质感增加丰富的对比。

这是一款国外的披萨品牌的logo设计，特别之处在于logo的名字和图形看似分开，实则是用一个邮票作为一个整体。图形的人物是一个由几何组合，用黄金比例切割出年轻妈妈的样子。

这是国外的一个茶饮品牌的包装设计，插画的人物服装和植物元素是当地人的特点，设计师将这些具有丰富变化的民俗服装用几何图形有规律的重新组合。

通过将复杂的事物用几何有规律的概括后，再通过合适的配色，呈现的整体设计感很强。同时在文字以及装饰框上，也统一用了这种具有民俗风情的风格，在字体上也会用几何作为流苏一样去代替字母一部分的笔画。

3、插画

简单几何元素拼缀出的人物、场景，色彩上深浅深的对比，图形上方圆方对比增添了画面的呼吸感和视觉冲击力。

这种风格的插画区别于以往的插画风格，整体是几何体和不规则形状组合而成，噪点的运用和颜色的搭配完美，夸张的手法，大胆的设计让它脱颖而出。

无论是简单的图案还是复杂的图案，几何设计都可以完美地制作出引人注目的壁画。

4、网页设计

这个网页运用极细的线条，规则的块面，将界面的功能展示区域分明，简约不失严谨，传达出品牌的专业度。

B端设计的页面采用圆角卡片，以及大规模几何体使用，界面立体感和层级感比较突出，立体几何插画的表现效果很好可以在UI中运用。

配图用三维几何体，搭配很年轻化的色彩风格，显得画面感很强。整体色调很舒服，界面干净整洁，很年轻。

这组网页设计首屏融入几何元素包裹着主图，灵动多变的几何装饰打破惯性的设计思维，创造出新奇的视觉效果。

这个体育网页头部使用红色和黄色，运用对比色，视觉冲击力强，使用三角形和异形，简单的几何图形，营造页面的空间感。

背景采用柔和的微渐变点缀淡淡几何图形，既不会喧宾夺主分散用户的注意力，又可以避免纯色背景的单调。

5、UI设计

这个绿植商店页面采用大圆角搭配圆润的线性icon，用几何拼接形式表现插画，整体风格自然简洁。

这个医美产品的UI设计，按钮和产品的背景沿用同类型的几何图形，类似超级符号的存在，加深品牌印象的同时，打破常规背景图的形态，使页面充满生机活力，贴合医美产品赋予肌肤青春活力的初衷。

从画面感来看，有点像游戏或者娱乐产品风格的界面。背景用很多几何元素符号，画面感很活跃。

这组启动页设计，通过人物和几何图形穿插，突出人物主体，拉开主体和几何形的层次感；并运用色彩叠加的方式，画面更具青春、趣味和视觉冲击力。

这是一款体育运动场馆预订的产品，用几何形状表达不同的运动，简约又生动，也与整体高级感匹配。

几何插画设计风格，头部卡片像一个抽象的人物，整体风格偏年轻化，卡片和背景生动有趣不单调，颜色多彩充满活力。

三、最后 

今天的分享就到这里，期待每天一个小知识点，可以给你的设计路上增加一点点能量。

作者：叮当猫

转载请注明：学UI网》P了两个圆，价值800万？

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

先看看这套数据可视化的吧。这套文件里面的数据组建跟配色都非常的丰富，而且耐看，光是吸一吸里面的颜色，都会让自己的稿子精致不少。

篇幅原因截图就不一一展开了，这套素材规范严谨、组建丰富、色彩配套较多，层次分明，比较适合从事Web端、产品工具型、Saas后台、偏向于B端的同学。

亲测用起来还是有效果的，推荐大家使用。

接着给大家看看第二套素材，这套素材主要是移动端的APP设计，适合于从事C端、偏向于业务设计的同学。

整体风格很简洁，颜色很高级，看着就很舒服。

所以如果这套素材下载下来，直接拷贝图层的颜色、阴影、还有风格化样式，可以让自己的稿子高级不少。

反正我特别喜欢这套素材里面的弥散投影，右键直接拷贝图层样式参数，就能让我自己的稿子，一样拥有这么高级的投影样式啦。

案例很多，就不展开一一给大家看了，确实好用。

一、高端

视觉调性高端的色彩，通常具有明度低、饱和度低、颜色数量少等特点，所以很多高端的设计都会以深色作为背景色，因为深色更显低调、更具神秘感，所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。

二、科技

想要表现科技感，色彩的整体调性通常会偏冷色系，明暗对比要强，且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色，然后用高饱和度、高亮度的青色和紫色作为辅助色，这时这些辅助色就会非常的跳跃，具有一种发光的效果。

三、时尚

其实所有调性的配色都应该要尽量时尚一点，即使是想表现复古，也不能太土，所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类，一类是以纯色作为背景，这种色彩比较适合于品牌设计、网页设计、画册设计等；一类是以渐变色作为背景，这种色彩比较适合于电商设计、广告设计等。

四、酷炫

酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配，比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格，其色彩就属于酷炫类的。该类设计通常也是以深色作为背景，图片元素会使用高饱和度且对比很强的渐变色，色彩相对较多。

五、好吃

即让人感觉很有食欲的色彩搭配，这种色彩通常以暖色为主，比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业；而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。

六、夏天

目前正值火热的夏季，所以葱爷专门整理了一些适合表现夏季的好看色彩，该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色，然后以黄色或红色、白色作为辅助色，这种色彩组合会给人清凉、快乐的感觉。

七、清新

小清新的视觉感受为轻松、柔和、淡雅，要达到这样的效果，颜色的明度通常是比较高的，饱和度偏低，常用的颜色有浅青色、浅绿色、浅黄色、粉红色等，在奶茶、女性护肤品的相关设计中比较常见。

八、快乐

快乐是张扬的、是活泼的，所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多，通常也是以暖色为主，但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性，所以想要表达快乐，黄色通常是少不了的。

九、可爱

跟儿童、年轻女性相关的设计，通常需要表现出可爱的调性，这类色彩通常是用冷色和暖色相互组合，颜色的明度同样不会太低，否则会有压抑的感觉，另外饱和度也不要过高，饱和度稍低一点效果会更柔和一些。

十、健康

想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶，还有黄色的小野花等等，所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩，红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉，所以整体的颜色明度不要太低。

十一、运动

要想让色彩动起来，对比一定要强，可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色，所以常用于表现运动的设计里。

十二、科幻

这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合，给人的视觉感受是稳重而大气，科技感和神秘感并存，所以背景色通常也比较暗，喜欢用青色和黄色这种比较亮的颜色作为点缀。

十三、喜庆

在设计节日海报或促销海报时，通常需要表现出喜庆的调性，有些设计师会局限在大红色、黄色、和橙色里，这样搭配出来的色彩容易土，而想要解决这个问题，一方面可以加入冷色搭配使用，另一方面颜色的饱和度和亮度也不要过高。

十四、复古

这类色彩的特点是颜色的饱和度会相对低一点，而且大多数情况下，整体的明度通常也不会太高，常用类比色搭配和对比色搭配。

十五、中国风

具有中国风特色的颜色和色彩组合有很多，葱爷这里仅列举了8个组合。这类色彩同样饱和度不会达到最高，有点复古和充满文化气息的感觉。胭脂（暗红色）、缃色（中黄）、绀青（深蓝色）、黛（褐色）等是中国风常用的颜色。

十六、梦幻

梦幻具有奇妙和神秘的感觉，好像在黑暗中找到了一点曙光，奇遇了惊喜一般，所以大多数情况下，背景色会使用从深色到亮色的渐变。颜色相对会比较丰富，而且以渐变色居多。

十七、女性

女性是温柔的，是感性的，所以该类色彩组合通常为类比色，偶尔会用一点对比色作为点缀，以增加画面的活泼气息，颜色的明度和饱和度都不能太低，当然饱和度最好也不要过高，粉色、紫色是常用于表现女性的色彩。

十八、优雅

优雅可以理解为低调、高级、温和、安静，所以这类色彩的对比通常不会太强，饱和度也会比较低，整体的色彩调性会偏中性，常用卡其色、麻色，还有单色组合及类比色组合。

十九、经典色彩组合

除了以上十八大调性，葱爷还给大家推荐一些经典的配色，很难把它们具体归为哪一类，但是我们在做很多设计时，用上这种配色总能得到不错的效果，比如红黄黑、红白蓝、黄绿黑、等等，在很多平面海报设计中经常能看到。

图标设计对于UI设计师来说属于非常基础的技能要求，甚至很多入门级设计师都会画，只是画得不一定规范，或者缺少创意和质感。不过也有一些刚入行的新人设计师，图标设计的能力还比较薄弱，在项目中效率比较低。

因此图标素材成为了提高工作效率的途径，为了帮助这部分同学获得更多图标资源，黑马哥为大家整理了十余个优质的图标素材库，希望可以带给大家更多帮助。

1. 善用图标库

我们可以运用图标素材库的资源来提高我们的工作效率，但是不适宜过度依赖，仅限于入行前期的经验过度。

针对已经具备一定经验的设计师来说，不适合过度使用素材解决工作需求，可以将图标素材库作为灵感来源。参考别人的风格和技法表现形式，以此来创作出属于具备自己思考的作品。

2. 图标素材库推荐

为了方便初入行业的同学掌握更多资源，为大家整理了如下图标设计网站，大家在使用的时候自行阅读相关平台的规则说明。

2.1 Flaticon

Flaticon 拥有超过 780 万多个矢量图标和贴纸等素材，提供 PNG、SVG、EPS、PSD 和 CSS 等格式。该图标素材库包含界面图标、动效图标、标志和贴纸等，作品的质量还是比较高的，可以满足很多设计场景的需求。

2.2 Noun Project

Noun Project 提供了超过 300 万个艺术品质的免费图标，可以下载 PNG 或者 SVG 等文件以便于编辑。

2.3 ICONS8

ICONS8 对于一些设计师来说比较熟悉，提供了几十款样式的免费图标素材，还有设计工具和插件的推荐等。除了图标素材以外，还有插画素材和一些不错的照片素材，种类丰富且质量都还不错，值得没事的时候逛一逛。

2.4 Iconfinder

Iconfinder 拥有图标、插图、3D 插图、贴纸等素材，里面提供了非常多的图标素材，还可以通过内置的色彩编辑器进行调整。只需要简单的操作就可以对图标和插图进行重新着色，下载 SVG、PNG 格式或者复制参数等。

2.5 IconPark

IconPark 图标库已被字节众多产品线使用，拥有 2600+ 基础图标，29 种图标分类，为你的设计提供更多的选择。

2.6 Freepik

Freepik 提供的素材不只是图标，还有字体、插图、漫画、海报、样机、标志等等内容，种类比较丰富。图标的分类也比较丰富，素材资源众多，可以满足我们多样化的设计需求。

2.7 Iconfont

Iconfont 对于大家来说非常熟悉了，相信很多设计师都去下载过图标素材，是由阿里妈妈 MUX 倾力打造的矢量图标管理和交流平台。设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的 icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

2.8 Ionicons

Ionicons 提供了完全开源的图标设计素材，用于 Web、iOS、Android 和桌面应用程序，支持 SVG 和代码文件下载。

2.9 Flat Icon Design

来自日本设计师团队创办的提供免费图标素材下载的网站，和别的图标素材网站不同，该网站收录了众多扁平设计风格的图标，带给各位设计师更多样化的选择。

2.10 Fontello

图标字体生成器，将你的图标拖进网站自动生成。网站也提供了众多图标可以下载。图标大小可以自动调节，然后批量选择好一次性下载，非常方便实用的一个网站。

2.11 Logobook

Logobook 提供了很多黑白的创意图形，可以作为我们设计灵感的参考来源。通过对基础图形的创意灵感，探索出图标设计的想法，是一个灵感来源不错的平台之一。

2.12 Iconsfeed

Iconsfeed 展示了很多的应用图标设计案例，分类也是非常的丰富，可以根据自己的需求寻找对应的设计灵感。

小结

为大家选择了 12 个图标素材网站，大家使用时记得仔细阅读各平台的条款说明，本分享仅为参考。

3. 温馨提示

通过图标素材库虽然可以让我们偷懒一些，但是并非长久之计，一旦遇到更高要求的设计需求时，过度依赖素材容易让我们提前步入瓶颈期。要掌握图标设计的规范、风格趋势、表现技法、深入质感的方向等等，只有具备优秀的图标设计能力，才能在项目中随意发挥。

4. 图标设计能力提升

图标设计入门很简单，但是从“会画”到“画好”之间却存在一定的差距。图标设计的能力属于动手能力的提升，没有捷径可走，唯有掌握方法并反复磨练。

4.1 临摹起步

临摹是图标设计训练的起步，大量的临摹可以提高软件操作的熟练度和造型设计的把控，也能不断提高简化图形的思路。临摹的量不能太低，临摹几个几十个是没有作用的，起码也得上百个起步，只有量变才能引起质变。

4.2 拆解图标素材

从运用素材到拆解素材，是依赖素材到探索技法的转变。拆解图标素材的造型结构、规范参数、表现技法、配色关系、细节和一些比例关系等，掌握并还原素材的能力，这样才能不断掌握各类图标风格的设计能力。

4.3 图标案例分析

具备技法层面的能力是基础，培养灵感需要积累大量案例并分析总结。体验线上的各类产品，分析图标设计的风格趋势，并形成经验总结，只有不断体验和总结才能把控图标设计的运用趋势。

4.4 强化日常输出

除了完成项目需求以外，日常的探索和磨练也是至关重要的，只有经历过千锤百炼之后才能随心所欲。看到优秀的作品要去研究并转换成自己的作品，掌握技法并形成自己独特的理解。定期输出作品是为了不断强化自己的动手能力，也是持续激活脑细胞的过程，让我们的灵感源源不断的成长。

 有人带好进步 

如果你通过自学无法更快的提升自己图标设计的能力，专业能力依然处于入门级或者初级阶段，那就找黑马哥带一下吧！有人带进步更快，才能在短时间内从入门级进阶到高级以上能力。

黑马哥会带你分析设计思路、拆解技术难点和掌握设计原则，通过案例实战的形式让你更快的掌握。再配合日常作业的一对一指导，发现你作品中的问题并逐个修改，达到较高质量的输出。

也会指点工作项目中的设计，让你在工作中更快的提高效率和发挥更高的价值，实现专业能力的落地和职场路径的晋升。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》不会画图标，这些源文件拿去用吧！

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

图片类的网页头图是非常常见的，比如像全屏图片类的：

当然，这种全屏图片也是可以增加一些设计感的， 像下面这个国外摄影网站：

看起来就非常的高级！

除了全屏图片的方式，还有半屏的，比如像下面这种：

这种基本都是一半图片，一半文字排版，很多都用在知识类网站，看起来相对中规中矩一下。

图片类型的头图还有一些图片拼接型的，比如像下面这种，三个图片拼接在一起：

或者还有这种不规则拼接：

图片类的网页头图还是比较常见的，上面这些形式，大家都可以多多参考！

二、插画类

插画类的头图就会比较有设计感了，比如像这样充满全屏的，沉浸感十足：

还有这种一半插画，一半文字排版的：

当然，随着3d的崛起，3d插画也渐渐成为了一种网页头图的设计风格，很有冲击力：

如果你的网页使用用户年龄比较低，需要一定的亲和力，不妨尝试一下插图的设计方式。

三、图形类

图形类的头图，如果做的好，可以非常有设计感，比如一些nft类平台：

再比如这种：

还有一些比较常见的形式，就是图形加人物，让人物从图形里破出：

这些都是图形的一些用法，大家可以多多尝试！

四、排版类

除了上面这些类别，还有一种就是信息排版类类，大部分都是文字信息内容：

相对来说会比较素一点点，但是如果排版排的好看，依然可以出来好看的效果，大家也可以多多尝试！

原文地址： 菜心设计铺（公众号）

作者：菜心

转载请注明：学UI网》这回做网页不可能没思路了！

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

不同人对数据的需求是不一样的，或者说，不同同学对同一份数据的不同指标组有不同的价值认可。

1.我们的交互同学更多地会参考大盘的“用户习惯”，使用某个问卷题型的比例来作为设计方案的数据支撑；

2.开发同学更多地会关注这个数据引发地一些性能（问题），架构指标等；

3.产品同学会非常关心某个上线项目的入口流量，转化率相关指标；

4.运营同学关注的方面更为通用，除了大家都关注的北极星和护栏指标，他们更会关心用户在使用上的一些点位问题，单个/单批用户的运营策略转换问题。

虽然上面只提到4个笼统的数据场景，但是其实我们由此产生的数据图表、SQL模板甚至是需求单已经有很多，于是我们从规范和流程上看到了一些问题：

1.我们要如何快速找到我们指标对应的底层数据？当时一个关于「活跃用户」在团队版中的表现的下推分析，后面还加上了登录渠道的多维分析，我们甚至开了一场会去校对口径 ;

2.关于口径，我们如何确定什么数据是对的呢？不同的数据开发同学开发的报表相差很大；

3.开发同学有非常美好的想象力，一句超凡脱俗的SQL不仅在当前的架构下得不出结果，甚至会拖垮其他依赖的组件。

让用户简单地找到正确的数据，需要把数据按照层级顺序摆放在合适的位置并且登记在册，在当时的时间点下，开始构建数据业务的数据仓库当然是最好的选择；我们在数仓开始之初时反思，为什么口径、数据、校对总是不能被一次敲定呢？后来我们发现，我们做这个需求的过程：从口径的描述、SQL的开发执行到出库展示整个过程没有一个地方是可以被review的。而对复杂数据量的支持，其实就是架构该升级了，单点的ES无法支持多场景的adhoc。

二、数仓基建与维度建模

在做这个事之前，我问组里的同学：“我们有什么数据能够支持我们做数据分析？”，清一色的回答：“ES里的后端Event日志，前端上报的Pageview和埋点，业务DB中的表”。确实我们早期就有比较统一的基于事件流的日志格式和较为完备的前端埋点组件，但是我们还是没法回答我们拥有的数据如何支持我们完成某些需求的问题。只有我们把我们拥有的数据的具体能力和表现形式放出来，我们才能真正知道我们拥有的是什么，数据才能真正地从数据存储变成数据资产。

1、明确数据表

上图显然就是我们数仓初期ODS到DWD的一层规划，这里我们更希望引入产品同学来对齐我们现有的数据资产，以便在后续数据需求的沟通上能够明确哪些数据能为我们所用，我们有哪些底层数据需要再去补齐。明细表一般存在于流式数据中，带有时间属性，一般用于一段时间内的指标计算。

同理，我们把存在业务DB中的数据平移到数仓中，这些数据表本身经过了不错的数据建模，我们将我们拥有的表保留退化维度同步到数仓，我们就得到了DIM层(块)。维度表一般不带有时间属性，用于关联做维度分析。

2、业务总线矩阵构建

把动态的明细数据和静态的维度数据相互交叉，就得到了我我们数仓的底层应用「业务总线矩阵」。在这个笛卡尔坐标系里的每一个点或者一条线都有它的业务意义。比如我们通过交叉「登录明细」 和「团队信息」，我们就能得到「团队登录」的明细；通过交叉「登录明细」、「团队信息」和「用户登录渠道」（2维度1明细），我们可以得到「分渠道的团队登录」明细，这是一种维度细分统计的构建；通过交叉「登录明细」、「团队信息」和「提交答卷明细」（1维度2明细），我们可以得到「团队版登录且答题」明细，这是行为组合（细分）。

至此，我们能够清楚地认知数据可能会在哪个位置发挥什么作用，下一步要解决的是我们该怎么找到我们的数据这个问题。

3、元数据管理

为了解决“我们有什么数据”这个问题，我们决定接管数据的入口，把开发过程中生成的数据表按照数据的生命周期命名打上标签。

问卷的业务数据库里有百余张表，其中大约有近4成为维度表，需要拆分成明细的点位或者日志会随着业务发展主键膨胀，业务总线矩阵也会主键变成一张大网，失去可检索性。事实上，我们对数据的需求是有描述性的，比如想看“这周问卷的新增明细”，我们并非记住一串冰冷的文字，我们更希望能把「1周」，「问卷」转换成描述条件作为我们元数据的检索入口。 我们支持了Superset从表comment、字段comment中检索的需求，把想要的关键字按照关键字检索匹配到正确的数仓入口。

4、数据血缘

在我们接管了数据产生的入口后，我们把用户调用数据资产的记录同样采集了起来。基于一套low code配置化调度任务，我们在为开发同学提供分区筛选、数据量评估、sql执行、执行结果质量校验和下游写入的能力的同时，我们更在配置化的Spark启动入口处植入了血缘上报，当一个任务被成功执行计算后，我们采集了数据的流向和数据流动比例。

有了数据血缘后，在一份数据出现分歧时，他的数据量和执行计划都是可以被review的，从数据读入和写出的量级波动情况可以相对容易地追溯到原因，但是目前还没有做成波动归因。

到这里，我们的数据开发链路的不确定性只剩下了口径确认和变更。我们通过将指标组（一般是单指标多维度）命名，分配给数据开发同学，确定产品负责人和开发负责人。这个顺便解决了我们之前无法追溯报表错误不知道该找哪位同学来看的问题。开发完成后挂靠在某个具体的数仓表上，实现数据需求到数据开发到底层计算的全链路记录，当数据出现问题或需要修改时，则整个链条上的负责同学都会有感知，确保发起的修改能够被所有相关的（特别是下游的）数据同学review到。

5、数据架构

规范的事情暂时能跑了，在只有我一个人力的情况下继续大力度地做进一步数据治理可能并不是当下最急需的，在场景分析中提到的问题，我们还有关于开发最重要的一个问题——当下的数据架构需要升级。为了回答这最后一个问题，我们希望把昂贵的ES储存费用转投到能面向更大型分析场景的数据架构上。

在之前，部门内所有的分析都有ES或者ELK套件承担，从20年开始性能和钱包都陆续见到了瓶颈。目前部门数据平台内走的是以流式分发为主的Lambda架构，由下游需求决定数据是否从实时层沉降到离线层。维度数据会存在离线层，事实明细数据会广泛地存在于实时层，这是基于下游有时延要求高，维度要求低的场景，只需要做简单的指标聚合，附带退化维度写出即可。

和Lambda架构不同，我们的低时延分析需求更多地由近实时分析层承担，针对不同需求，我们尝试过很多不同的组件，根据不同的使用场景，比如全文查找、强聚合、上下文分析等等，我们会选择不同的组件。基于不同的组件，我们在上层有去尝试做不同的应用实践。

三、应用实践

1、机器学习

在机器学习方面，腾讯问卷有基于用户答题的行为，构建用户答题的时间序列，得到一个评估用户答题认真度/可信度的评估模型，目前这个工具已经上线到样本库填答的红包发放鉴别能力中，提供给投放者对回答可信度和总体回答质量做相应参考。

在最早期我们通过ES去查找单份答卷用户在答题过程中的所有用户行为埋点数据来构建序列数据进行预测，将预测结果写入DB；在近一年中，我们把查询数据源经过计算清洗后写入按问卷和用户为索引的ClickHouse数据源中，同时将服务与线上服务解耦，使用kafka来进行通信；最后配置了消费监控和写入监控，使这个服务成为一个单独维护的组件。以牺牲少许的实时性为代价大幅提升了预测速度和可用性。

2、实时风控

基于实时层的数据聚合分发能力，我们在问卷系统中逐步搭建了一套对问卷维度进行风控的系统。在最早期的设计中，实时层基于小时间段窗口触发计算，从明细数据流读取计算到写入下游系统之间的误差能够控制在秒级，支持了下游规则引擎的实时特征数据检索。

在架构上，风控模型走的是全实时数仓链路，从Kafka明细中读出前端上报信息和后端收集答卷的日志，在Flink中做实时的多窗口聚合写入到下游的数据组件。在前期选型中，业务侧希望能够具有实时调用和短时间指标回溯的能力，同时希望系统组件能够相对轻，能从云上购买，最后我们选定了Kafka作为业务侧实时接收窗口聚合结果的组件，PostgreSQL作为小时间段的回溯组件来构建线上的风控分析。

3、AB实验

目前，我们已经在SaaS平台内对文案显示、用户逻辑等多方面做了很多次AB测试，通过pv上报的曝光和event埋点的转化分析，能够实时构建单个用户的转化行为；相同地，我们会对实验时间范围内的数据使用ClickHouse构建用户RBM，分析不同用户在不同实验命中的表现情况。

总结

通过补齐一些基本的数据架构和数据规范，目前我们在数据驱动的实践上已经走出了一条自己的路。随着用户调研类组件的发展、用户分析需求的增加，其分析能力也会随之增强，越来越多的数据能力正在沉淀成底层功能加入到SaaS服务侧。

原文地址：腾讯CDC体验设计

作者： 腾讯CDC-erien

转载请注明：学UI网》数据工程在腾讯CDC的演进

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、应用/软件研发就是单纯的敲代码？

在我们传统认知里，应用/软件研发似乎就是开发者在黑色屏幕前敲代码。但随着敏捷研发DevOps理念的发展，现在的应用研发，转变为了围绕devops的协作工作流，涉及多样化的工具和不同人员的协作。研发体验的核心要素，也从“架构逻辑“向”流程和协作“发展。

阿里巴巴应用研发平台EMAS正是在此背景下诞生的产品。面向全端场景（移动App、H5应用、小程序、Web应用、PC应用等），基于广泛的云原生技术（Backend as a Service、Serverless、DevOps、低代码等），为企业、开发者提供应用研发运营管理服务。

综上，EMAS做为帮助企业/开发者进行应用研发的技术类SaaS产品，也面临了全新的机遇与挑战。

二、设计师如何在技术类产品中破局？

面对复杂的技术类产品，由于技术的高门槛及业务的复杂性，很多时候设计师都是被动的接受需求。但我们也在思考，设计师如何在技术类产品中破局，如何发挥更大的价值。

因此，我们尝试站在更高的全局视角而不是设计的本位视角，主动发现问题提出设计策略，实现设计执行到设计驱动的突破。

全局视角的主动洞察

怀着让设计发挥更大价值的初心，我们深入业务主动邀约产品关键角色深入沟通，了解产品历史背景、技术逻辑及痛点，并发起产品的易用性测试、体验走查及竞品分析等动作，站在全局视角从产品侧、用户侧和体验侧多个角度进行深入洞察，形成全面的“产品体检报告”总结旧版EMAS所存在的问题：

1.产品侧洞察——子产品无合力、相互割裂缺乏串联

EMAS围绕应用全生命周期包含12款子产品，却是各个子产品的拼接，功能独立零散，未形成一站式研发体验。各个子产品也是以独立垂直工具视角建设，缺乏用户及客户业务视角。

2.用户侧洞察——产品价值/能力感知弱、没有攻占开发者心智

多数用户并没有完全理解产品的价值和能力，EMAS没有攻占开发者心智。

3.体验侧洞察——产品易用性差、满意度低

通过用户调研的量表评分，易用性及满意度评分低，虽然用户对产品功能能力认可，但对产品使用体验满意度差。

三、设计驱动产品创新升级

基于以上分析，我们与关键决策人积极沟通，汇报关键问题及设计策略，驱动产品的升级创新，进行EMAS3.0 一站式应用研发平台的打造。通过咬合3个业务关键问题，制定出以下的设计策略：

〇 策略一：打造一站式研发体验

1.应用全生命周期协同流程梳理：

旧版的EMAS是各个子产品的拼接，功能独立零散，未形成一站式的研发体验。经数据分析，产品的交叉使用率也非常的低。因此，设计首先从应用全生命周期角度，梳理了不同角色的协作流、任务流，并串联之前子产品没有打通的数据流，进行构建-测试-发布-运维-运营全链路打通串联。

2.用户视角的产品架构重构

并且在旧版的EMAS中，各个子产品是以垂直工具的视角进行建设，每个子产品的架构逻辑都不同，也没有形成合理的联动。进一步，设计驱动以用户视角进行产品的架构重构，以”项目“作为统一顶层逻辑，并兼容技术架构，进行围绕应用的的管理，形成一站式应用研发全周期流程。

3.一站式独立控制台建设

在产品形态上，形成了以下结构的一站式独立的Studio框架，让用户能够清晰、流畅的产品体系中进行应用构建。

4.一站式全景产品架构

最终，EMAS3.0一站式应用研发平台实现编码-构建-测试-发布-运维-运营全链路的打通串联。应用阿里云的Real3D能力，打造一站式产品全景3D互动场景，围绕DevOps协作流串联各个子产品，形成一站式应用平台。

通过流程化研发指引帮助新手开发者快速开启应用研发流程，也能帮助团队不同角色成员进行项目全局管理和关键指标监控。

〇 策略二：品牌建设与产品价值传递

1.增强产品价值/能力透传设计

旧版的EMAS试用体验差，且在首页、功能初始页等场景也缺乏产品能力的有效展示与使用引导。因此，我们在多个场域进行产品信息的有效展示及引导，进行产品价值/能力透传的核心场域的典型场景建设，帮助用户快速感知产品价值。

2.品牌建设，建立用户心智

研究竞品会发现：大部分竞品缺少独特的品牌语言——用户很难区分彼此，无法激发用户对产品的兴趣 EMAS希望提供什么样的形象与感受，现有的视觉设计语言能否让用户产生所预设的共鸣？因此差异化的牌语言，能体现EMAS独有的品牌价值，在用户心智建立准确的品牌形象。

首先，我们基于“卡普费雷品牌识别棱镜”从品牌定位&品牌表现的维度来挖掘产品形象，在个性、文化、形象、关系、体现、外貌6个纬度对品牌进行定位。

明确了“Make smart app”这一产品Slogan，相应确定了产品“智能、高效、敏捷、灵动”的视觉语义，并从从个层面定义Smart，从各设计元素中挖掘smart的特性，来传达品牌。

通过品牌logo的三角图形元素贯穿运用到整个产品的 布局、插画等元素，增加符号化元素的透出率，提升品牌的感知。

产品形象采用3D Pictogram配上动效，通过材质和光影的变化，更丰富传达各子产品的特点，体感更强。

〇 策略三：易用性改进提升研发效能

旧版EMAS经过用户调研的量表评分，产品易用性为6.8分，未达到优秀标准，在整体研发易操作性及易学性等方面存在20+体验问题。

因此，我们基进行了深入的易用性度量和测试，挖掘出20+体验问题，除了问题的单点解决外，我们也形成了系统化的解决方案，形成了“一键接入”、”流水线编排““跨产品引导”、”场景化开发指引“等易用性策略和范式。最终形成了完善的一站式应用研发设计体系。

四、技术类SaaS产品设计方法

通过以上项目的体系化设计的最佳实践，我们逐渐总结出一套技术类SaaS产品创新设计方法：基于“产品/技术能力”、“产品价值传递”、“使用体验”及“ARR”四个产品关键要素的抽取和分析，明确了“连贯度”、“价值感”、“易用性”、“转化率”四大开发者体验原则，进而形成一系列体验设计要素，指导设计师有章可循的去进行技术类产品的思考和设计工作。

设计师是人与科技间的链接者，在数字化变革的浪潮中发挥着重要的作用，通过对用户、产品、体验的深度洞察，让科技逐步普惠化、民主化。

原文地址： 阿里云设计中心（公众号）

作者： 阿里云设计中心

转载请注明：学UI网》数字化浪潮下，设计师如何驱动技术类SaaS产品的升级与创新？

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司