1、中性色色值为什么要使用透明度？ 

有细心的用户发现，在 Ant Design 的设计规范里，中性色色值可以按照透明度来设置，见下图中性色色值表（百分数代表不透明度）：

平时大家似乎更喜欢使用 #333333、#666666 这种色值，那使用透明色有什么优势呢？

我们知道，中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑白色背景以及有色背景的差异，同时结合 WCAG 2.0 标准。

现在  Ant Design 的色板中，透明色模式和实色模式都是有的。透明度模式可以做到背景色兼容。

如下图示例，我们以颜色 gray-6 为例，这个颜色在实色模式的色值是 #BFBFBF，透明色模式的色值是 000000-25%。两者在白色背景上的颜色完全相同，但是在灰色或其他颜色的背景上，却有明显差别：

因此在透明色模式下，以中性色为主的前景色，会与背景色有一个更明显的色彩对比，对背景的兼容性也会更好，保证内容的可读性。

Ant Design 提供了透明色和实色两种颜色模式供用户选择，也会使组件更具通用性。

2、组件和设计师之间的关系是？ 

当下很多常见的、优秀的组件库，都为设计和开发的工作提供了便利。

那么使用组件库可以替代设计师么？组件和设计师之间的关系又是什么呢？我个人观点如下：

1 . 组件是「效率」工具

组件是工具，用来为设计师和开发提升工作效率。所有组件库的初衷都不是要替代设计师，而是要提高整个团队的工作效率。使用组件可以从两个方面提效：

（1）工作内容上：可以将不必要的、重复性劳动的时间节省出来

（2）工作流程上：便于设计师与前端开发做交接和协作，节省沟通成本

2 . 组件是「质量」保障

使用组件做设计稿，可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法，建立相对底层的系统，设定了设计和开发的质量底线。

基于组件规范设计和开发的产品更容易具备：

（1）一致性：具备相对一致的表现样式，设计风格和交互体验上均可保持统一

（2）可用性：对于用户操作，可以保证最基本的可理解性和可操作性

（3）审美性：符合基本审美标准，虽不会很亮眼，但也不会很难看

3 . 设计师要「沉淀」业务组件

设计师可以尝试沉淀有针对性的业务组件。很多业务领域有其独特性，比如金融类组件和政务类的产品页面列表内容就有很大区别。单一的元素组件在应用的过程中可以被再次组合和沉淀。

举个例子，我之前在做业务需求设计时，相比于 AntD，其实更常用的是 TechUI —— 它是建立在 AntD 基础上的、由我们蚂蚁的设计师通过对业务需求的提炼、组合和封装，做成的一套属于蚂蚁自己的【业务组件】。

再总结下二者的区别：

– Ant Design：是所有人的，是通用的，是单一的原子级别的（比如一个输入框）组件。

– TechUI：是蚂蚁自己的，是私有的，是组合的区块级别的（比如一整个表单）组件，更具备蚂蚁集团自己的业务属性。

针对你公司不同业务类型，沉淀出不同种类的区块级别的组件，这类组件使用起来也会更加得心应手、加倍提效。这也是 B 端设计师可以去学习和精进的一点。

4 . 设计师要「洞察」业务诉求

使用组件可以让设计师把节约出来的时间和精力放到更多有价值的工作上去。作为 Ant Design 的设计师之一，坦白的说，即使你的设计稿全部使用了 Ant Design 的组件搭建，最终的页面效果也仍不完善，在用户体验上始终可以更进一步。

设计师应该更多去关注对用户需求和业务逻辑的深入挖掘，不仅仅是在界面细节的表现手法上下功夫，还要学会站在全局，用系统性思维看待每一个项目，为整个产品的系统流程做优化，做更全面的产品体验升级。

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》工作经验｜ B 端产品组件设计细节及经验分享（一）

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

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

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

1.明暗是影响质感的最关键因素

我们来看一组对比，左侧是原作，右侧是星友的练习作品：

很明显，练习作品的质感没有原作好，其中最重要的一个原因就是，原作的明暗交接线非常清晰，明暗对比很强烈，而练习作品就会有点平。

很久之前做的这个作品，当时看起来还可以：

但现在一看，也是缺少明暗对比，导致整体质感差了很多，人家下面这种在明暗方面就对比很强烈：

所以，质感看起来就杠杠滴！

再比如下面这组对比，上面的是原做，下面的是临摹：

我觉得临摹的要比原作好，我们看底部对比，下面那个底部暗部足够暗，形成强烈明暗对比，整体质感看起来就很舒服。

兄弟们，这个明暗非常重要，要牢记啊！

2.边缘光的重要性

再来说一个影响质感的因素——边缘光。

我们看下面这个对比，左侧为网上原作，右侧为练习作品：

能看出来什么问题吗？右侧是不是和背景糊在一起了？如果，主体都和背景糊在一起了，那层次肯定就不够，整体效果也就差了很多。而这一切的问题都是因为没有加边缘光导致。

其实以前做项目的时候，我也遇到过这类问题，比如这个页面，最开始也是主体和背景糊在一起：

后来加了一点边缘光，调整一下灯光色调：

效果立马就好多了。

其实很多作品，都是带有边缘光的，这光一加上，立马就感觉高级很多：

是不是，兄弟们！

3.前中后景的三个层次

下面这组设计是十豆三同学做的：

最开始做的更新是比较常规的火箭，后来用品牌形象加飞船元素改了一版，更加有创意和特点了。

但是这里我们来说下后面这张图的不足，我会觉得主体和背景衔接的还不够自然，如果我们把画面分成前中后三个层级，这个画面就缺少了一点中层的内容。

我也经常做这种类似的画面，比如这种：

如果说黑色是背景，白色形象是前景，那么背景上面的这些元素就是中景：

这个中景是提高画面整体质感的关键因素之一，非常重要，不可忽视！

再比如这个画面：

也是在中景加了一些图形和鸡蛋，让整体画面更加丰富，层次更加清晰。

总结

好了，以上就是我经常使用到的提升设计质感的小方法，希望可以帮助到大家，么么扔！

01 对比色配色实操

本次提取上期“对比色配色”理论篇讲解的部分文案，进行配色的实操演示：

方案一

在PS中新建文件，背景选择蓝色。

英文放大铺满背景，并加入边框。颜色选择蓝色的对比色红色。（英文字体：Champion)

新建图层，填充白色，用套索工具画出不规则选区。

点击“添加图层蒙版”按钮，给图层添加蒙版。

选择蒙版，执行“滤镜-滤镜库-喷色描边”，得到不规则的撕纸边缘效果。

复制一个新图层，填充红色，向上错位移动。

在白色图层添加“图层样式-投影”，撕纸效果就制作好了。

复制“文字”和“矩形”图层，移动到红色图层上方，填充蓝色。

按“Ctrl+Alt+g”建立剪切蒙版，让文字只在红色图层范围显示。

把蓝色字改为白色，白色是万能的调和色，可以缓冲蓝红对比色强烈的对抗性，也可以让作品更加透亮。

最后加入文字排版和纸张褶皱效果，设计完成：

方案二

使用AI进行制作，颜色选用对比色紫色和绿色搭配。（英文字体：Current）

给英文创建轮廓，取消群组。

使用直线工具画出一条分割线，使用“路径查找器”中的“分割”功能，把字母切割开

取消群组，右键选择“变换-旋转”180度，调整两个色块重合。

执行“效果-风格化-阴影”加入阴影。这样得到了折纸效果：

使用相同的方法制作出其他字母：

最后加入文字排版和纸张褶皱效果，设计完成：

方案三

继续使用AI进行制作，把所有英文放置在画面中。（英文字体：Current）

颜色选用黄、蓝、红的三色对比色进行搭配。

最后加入文字排版和纸张褶皱效果，设计完成：

可以尝试新的配色方案，

此方案颜色选用橙、绿、紫的三色对比色搭配。

本期使用的字体、样机、源文件，请关注微信公众号：艺海拾贝Design（ID：YHSBds），公众号主页回复“对比色”获取下载链接。

优秀作业展示

01 NoctilucaGladys

02 风少

03 沕风

04 龙娟（2张作品）

05 七陌

06 Joyce

07 蛋蛋DAN

08 珞影随行

09 咪奥mao

10 小孔呀

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

转载请注明：学UI网》用好“对比色”，让你的设计更有吸引力！（实操篇）

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

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

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

什么是《请回答》

项目背景：

如何打造有温情的品牌活动呢？

01品牌的延续

 

02主视觉传达温情与品牌

 

03核心玩法渗透温情设计

  

  

 

04群像故事海报传播，扩大影响力

项目总结

文末点击原文地址 可观看教程视频；

今天用另一种角度

教大家三角构图的实用方法

▽

用三个点所相连成的线称之为三角构图，看似简单，实际该如何运用？

第一眼看好像没什么问题，但是由于文字的分段较多导致内容层级不明显，阅读上会出现断层和不够直观的体验。

三角构图作为层次空间的搭建者，将数字、主题、信息、时间利用三角的结构进行了分层以及信息主次和布局的整理，让大众可以清晰直观的看到想要体现的利益和重要顺序。

两者之间的对比一下，是不是右边的也更有设计感一些。

物体之间的三角构图，一个奥特曼放在画面中，看上去有些孤单，主要是怕万一打不过怪兽。

根据三角的结构和方向性，依次左右放置更多的物体进行组合，再放置主标题，这样是不是既显得有层次又看起来内容丰富一些呢。

可惜80、90年代人最美好的童年回忆也终将逝去，某些家长不相信光，把教育不好的锅丢给了奥特曼，可奥特曼又有什么错了，他只是单纯的想保护地球。

教程步骤

刚才这两个示例都是拆分式的讲解，如何在实际设计时完整的使用？

设计一张海报时，放置物体和文字，这样的结合看起来是不是有点单调且缺设计感。

一、解决层次和空间

根据三角构图，用刚才奥特曼的方式依次将物体有序的以三角构建的方向组合罗列。

将文字做出透视感放置到物体脚下，增加质感让文字贴合到背景中。放置一些城市元素在物体身后，这几步的操作都是增加远景以提升空间感。

二、解决画面的融合和完整度

调整整个画面包括物体的质感。

将主标题放置画面时，主标题区域与下面物体还没能很好的融合在一起，我们可以将主标题以扇形或者同以三角构图的方法展开结合到画面中，这样一来，视觉的完整度就有了很大的提高。

到这很多人可能就做完了，但其实还缺点睛之笔，我们发现人物的视线是直视着画面前方，可以利用这样的引导，增加一个兵乓球在视线前方，让画面具有一定的律动感和视觉的穿透力。

我们再对比下前后的效果。

这就是今天带来的三角构图方法，视频完整版内容都在我最新的直播课程当中。

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》版式技巧 | 不一样的三角构图技巧

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

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

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

5分钟教你快速设计网易云banner

▽

▲往下继续看文章，内含设计实操案例干货！

作为老网抑云的铁粉，最近的2020年度报告刷红了朋友圈，不看不知道，原来这一年小编一共听了954小时3089首歌，如果24小时不间断也要40天才能听完，不知道这算不算老网抑云了，如果有听歌时间比我长的可以留言batter一下！

▲小编的2020歌单

为什么偏偏网易云成为了年轻人和大众的最爱

网易云做对了两件事情

-懂音乐

听着歌曲，看着评论，有无数个故事在治愈和慰藉那些深夜不眠的孤独患者，总能有一句话戳到你早已满目疮痍的内心，吃着火锅眼眶里含着泪水，发送了分手文字的短信，所以在网易云里听的不只是音乐，还有故事。

▲评论来自网易云

-懂设计

打开网易云，我们可以从banner的设计中感受到听取音乐的风格，甚至发行EP所要阐述的理念都能在一张小小的banner设计中有效读取，在小编认为这是与音乐融合出来的设计，而不只是为了设计和推广这首歌曲的目的。

▲图片来自网易云

1、让色彩情绪化

色彩并不只是用来配合文字和图片的工具，而是需要赋予设计灵魂，让色彩变得富有深度和画面感，小编称为色彩属性，每一首歌不管是流行、民谣、摇滚、电子、独立音乐类型，都有着背后的创作故事和曲风类型，从色彩属性最直观的将故事里的情绪化表现出来，让观者看到画面就能知道这首歌大概是什么曲风，是悲伤的还是开心的歌曲。

▲图片来自网易云

图上歌曲想要体现的是一场与自由的角逐，曲风也偏向于Hip-Ho说唱和电音的一种结合，代表着勇敢与激情的红色调铺满了整个画面，结合展露的肌肉身材，从中释放出想要自由和寻找自由的情绪性。当颜色调整为黑白配色后，原本代表着勇敢和自由的感觉突然消失了，从画面中反而获取了一种孤独和悲伤的情绪感。

▲图片来自网易云

再看图上的banner结合歌曲名，我想大部分人都能判断出这首歌是写的对另一伴的不舍和留念，雨天昏暗的深夜加大了对于观者的理解与感受，而如果整个画面的色彩调整为黑白色，只留出灯、红酒、相框的颜色后，那种失去的强烈是不是会更加的明显和深刻。

▲图片来自网易云

2、控制画面留白

留白的目的除了解决画面内容层次的一种梳理以外，还会为设计增加很多艺术美感和想象空间。

▲图片来自网易云

我们可以看到两张图的对比，从本身版式的理解上，文字居左对齐，将文字的大小、粗细通过层次分开得到流畅的阅读感，本身是没有问题，但却失去了音乐特性的本质，而留白就是改变和拆分版式编排的结构，将其原有连串起来的主题文字拆分重组，让版式内部得到一个流通。

▲图片来自网易云

3、让设计变得有趣

设计不是表格也不是冷冰冰的数字，设计是为了让人们感受人和生活的理想化，所以有趣就变成了一种特质化标签，可以提升对于大众的新鲜感。利用字体之间的变化，符合主题的元素图形或者涂描来放大画面设计的趣味性，就像烤羊肉一定要放孜然或者椒盐才算吃的够爽是一个意思。

▲图片来自网易云

实操案例步骤

▲实操案例分享

设计诠释：”破碎的光线在水彩浸润过你的脸，Tsing River，it will wash me” 这是白皮书乐队里关于《清河》歌曲里的一段歌词。从歌词中感受到人浮在水面上，斑斓的色彩光照进全身，又随着余晖渐渐消失殆尽的感受。所以在设计中利用了双色渐变将整体的画面颜色变成了涂抹色彩，扭曲和波澜的水面塑造出与众不同的设计感。

步骤1：

利用参考线找到中心区域，并放置主体图片。

步骤2：

• 【渐变隐射】工具绘制绿色与蓝色的渐变
• 【渐变隐射】工具绘制紫色与蓝色的渐变并选择图层模式中的【饱和度】
• 【色彩平衡】将整体的颜色往青色与蓝色两块区域拉伸参数

步骤3：

使用滤镜>液化工具，选择左侧工具栏的「褶皱」将重心的画面拉出层次距离，在将湖面做变形处理，得到扭曲的画面效果。

步骤4：

将文字的字间距拉松并且放置到中心区域，将英文字母拉出高度形成设计元素与文字融合成整体。

步骤5：

复制画面中的一部分进行变形处理得到一个类似纸张飘散在空间的效果，放置到文字框架的中间，与白皮书乐队得到一个很好的风格统一。

步骤6：

用类似毛笔字笔刷的字体绘制出清河的歌曲名，再分散到左右两侧，形成一个版式上的平衡，否则会显得两侧过于留白过多，当然中心区域与两侧之间形成的留白区域是作为一个空间进行想象。

注意事项

▽

设计版式中的留白和文字段的分拆和组合处理对于banner设计来说非常重要，可以很有效的体现设计感的美观。

原文地址：修先森撩设计

作者：修先森

转载请注明：学UI网》都在听网易云，却不知道banner设计这么好用

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

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

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

教程示范：

1.打草稿

首先，选择一个硬笔刷打一个草稿，花花和叶子注意一下疏密大小关系。

2.草稿基础上再打线稿

这一步依然是选择一个硬笔把藤枝画出来。

3.画花瓣

画花花的部分选择一个勾线笔刷，用打圈的方式先定好花瓣的位置，然后再去一层一层画花瓣。

我这里的话因为笔刷选择的有点大，所以画出来的线条有点粗，大家在画的时候要把笔刷刷头缩小一些。因为这里没有打草稿，所以我画的时候是边画边修线稿。

4.画叶子

叶片也是选择一个硬笔笔刷直接去把大型画出来就可以了。注意叶子形状要好看哦~

5.上色

在花花线稿图层下面新建一个图层填充颜色，然后再整体把线稿的颜色修改一下。

这个地方是我觉得花枝在整个疏密大小上还不够好看，所以在做调整修改。

6.继续上色

接着给叶子上色，选择一个透明笔刷刷一些渐变色在叶子上，花花上面也刷刷渐变色。

7.添加阴影

然后开始细化加花花的阴影，直接在有花瓣遮挡的部分添加阴影之后，选择水彩笔或者涂抹笔刷把刚刚画好的阴影涂抹开（注意不要过度涂抹哦！）

8.勾线

接着把叶子勾一下线，然后稍微细化一下。

最后整体也可以再调一调颜色。

那我们的花花就画好了，希望对大家有所帮助，我们下一期再见，如果有收获记得分享给身边画画的朋友哦！

原文地址：空青肆绘（公众号）

作者：Tcat

转载请注明：学UI网》插画教程 | PS 手绘板~日系蔷薇花

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

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

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

上图来源：Monday

不要给用户选择

有些产品还挺重视新手指引的，准备了好几个课程。

由于内容太多，所以拆分出来展示给用户，甚至让用户自己选择。

上图来源：Zendesk

例如上面的案例，虽然并没有强制用户手动选择，光是新手指引的内容列出来给用户这件事情，已经让人压力山大了。

其实用户刚进来时，只想要利用新手指引快速上手，并不想要看到关于新手指引的介绍，更无法决定选择什么新手指引。

如果真的不同人群的使用功能相差很大，那么直接根据对方情况提供相应内容即可。

这让我想起了第一次在牛肉火锅店点菜的情景，我这种牛肉小白用户根本看不懂菜单，能不能给先上一份普通牛肉？

指引气泡不需要标题

Windows 系统给界面设计带来一个奇怪的习惯，那就是不管什么面板，都必须有一行标题。

如果实在想不到用什么标题了，就把描述文字第一行拆出来做标题，甚至哪怕是用系统 logo 占位，也必须要有标题！

这让很多新手指引的气泡，也习惯性地配一个标题。

如果标题就能直达主题也还好，但如果是为了占位了凑出来的，那可就太浪费用户时间了。

不要强调跳过按钮

科技产品改变了人们的生活习性，其中之一就是让我们形成了条件反射：看到任何突然出现的弹窗和气泡，快速点击主按钮并让其消失。

后来因为移动端广告弹窗的泛滥，现在已经进化到了，看到弹窗先找 ❌ 了。

上图来源：不要这样用弹窗，真的很烦

很多新手指引的气泡都会提供跳过按钮，这样做挺好的，因为有的用户可能真赶时间。

但是如果跳过按钮做得太强，就会激发用户的条件反射，想都不想直接点跳过：

这个我尝试过了，大脑真的控制不了自己，手速已经跟膝跳反射一个级别了！

所以，这个跳过按钮一定要做小一点，尽量不要激发用户的条件反射：

只要不是单击，就得有图示

前面提到，千万不要小看条件反射这个东西，这个是生物本能。

用户最习惯的操作就是单击，如果你指一个箭头给他们，十有八九立即就上去点一下。

点一下不行，就多点几下，实在不行就双击。

如果双击还不行，就直接放弃了。

大半人根本不会看到，旁边赫然写着「点击鼠标右键」几个字。

以上就是我多年做用户测试的常见场景，总结就是：只要不是双击，就要有图示，写字根本没什么用。

如果是右键，可以把鼠标画出来：

如果是双击，可以给个动效：

如果是拖拽，除了操作对象之外，还要把目标位置高亮，并给一个指示箭头：

没错，一定做要扫一眼就能懂的程度。

遮罩别太深

有些产品，为了让更多用户走完新手指引，会给操作对象和气泡之外的部分加遮罩。

这样没什么不好，看起来还挺清晰的。

但是我发现有的新手指引遮罩太强，反而起不到学习的作用。因为用户看不清界面整体的样貌，还是记不住操作路径，引导完后全忘了。

新手指引的遮罩，一定不要按照弹窗的遮罩标准去看。

因为有弹窗时，页面的其他部分确实不用看了；但是新手指引只需强调重点，界面其它部分最好还是能看到。

总结

把上面的几点都集合在一张图，对比一下：

这些问题，如果放在产品的一般功能上，也许不算什么。就算第一次出错，下次也总能习惯。

但是新手指引不一样，这是产品给用户的第一印象，而且通常只出现一次，错过就没有第二次机会了。

这个步骤，也能直接影响到用户的转化意愿。

所以，新手指引真的要避免任何小问题，把体验的标准往上高一点。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》测试了新手指引方案，总结下失败经验

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

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

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

再酷炫一点的，甚至可以让3d动起来：

这样的效果如果做成封面，是不是老帅了！

如果你不会动效也不会3d，没关系，今天给大家介绍一个神奇，上面的3d动态效果非常多：

咔咔就是一顿选择! 还有各种属性各种调整：

调整出自己满意的效果之后，文字往上面咔咔一放：

尤其是后面的元素是动态的：

为什么要 C 端化？

其实 B 端产品 C 端化，并不是因为传统的 B 端产品没 C 端好用（不是这么比的）。

其实关键还是获客模式的转变。

传统的 B 端产品是销售驱动，销售人员通过电话、上门拜访等形式促使客户下单。

一旦成功卖出，只要后续的服务不太差，客户就没必要更换迁移。

现在 B 端市场越来越大、行业信息越来越透明、客户的判断能力越来越强，传统销售模式开始变为互联网营销。

B 端产品在网上发布信息并投放广告，吸引客户自己前来试用并购买，只需提供少量客服人员即可。

这与以往的 B 端业务模式有很大不同，所以就需要变革。

所谓「B 端产品 C 端化」，表面上是学习 C 端的用户体验，背后的真正意图是要学习人家 C 端的互联网获客能力。

怎样才是好的 C 端化？

我发现 B 端产品的 C 端化程度，和他们的互联网广告投放力度成正相关。

例如我在油管上经常受到 Monday、GoDaddy 这两款 B 端产品的轮番轰炸。

先不说好不好用（毕竟我也不是目标客户），我发现他们用起来真的很有「C 端感」，和传统的 B 端产品果真不一样。

倒不是什么“轻量化、趣味性和人文关怀”，而是因为他们在我打开网站的那一刻，就开始不断吸引我探索使用。

我拿 GitLab 和 Monday 的官网首页对比一下，也许你就能感受到了：

前者像是一板一眼的「老实人」，后者则像是对你笑眯眯的「绿茶妹」，高下立判。

“轻量化、趣味性和人文关怀”这些东西，并不足以打动用户试用和购买，顶多只能算是「低段位」手段。

只有「高段位」手段，才能让用户不自主地地被吸引，心甘情愿地掏钱。

可是要做到「高段位」真的很不容易，我今天就总结几个技巧吧～

1. 直接坦诚

遇到两个陌生人：一个打官腔又遮遮掩掩的；另一个说话友善接地气又诚实，你会更喜欢哪个？

可能大多数人跟我一样会喜欢第二个。

C 端化做得好的 B 端产品，会把自己的产品预览图直接放到首页供人观看，而不是搞一张概念图外加一堆高大上的广告词。

前面放过的那张案例，这里也可能拿来用：

GitLab 的官网画了一些很抽象的概念图，写了一些很抽象的描述，给人感觉很模糊。

Monday 的官网明确把自己的业务类型列了出来供用户选择，还把每种业务对应的图标和展示方式画了出来，感觉很明确清晰。

2. 有效互动

遇到两个健身房销售：一个上来就说一个劲地介绍服务；另一个则先确认你平时的健身习惯，再根据你的情况介绍服务，你会更愿意听谁说话？

我肯定更喜欢第二个。

C 端化做得好的 B 端产品，不是简单地展示信息，而是先了解用户，再根据用户的需求提供不同的信息甚至服务。

Zendesk 的网站，会把自己的功能列出来给用户，给的图像和描述又很抽象，毫无互动感。

而 Asana 会让用户选择自己需要的功能，并直接给出具体案例的界面展示图。

3. 降低门槛

遇到商场逛街时遇到两个陌生餐馆，一家在二楼；另一家在一楼，你会愿意尝试哪家？

肯定是第二个。

很多 C 端化做的好的 B 端产品，会把表单用弹窗的样式放在产品上面，让用户感觉只要填写完就能立即使用了

比起 Trello， Smartsheet 只是在表单展示了一下产品内部，就让用户感觉门槛低了好多。

即便 Smartsheet 的新用户后面发现背后那张图真的这是一张图而已，要填的一点不少，但这时都已经快填完了……

4. 循序渐进

两家陌生的两家餐厅都把菜单摆出来了，一家的菜单写得密密麻麻；另一家的菜单虽然菜品不多，但是推荐菜品和菜式分类很清晰，你会更愿意尝试哪家？

我相信很多人都会更愿意尝试后者。

C 端化做得好的 B 端产品，不会太在意自己的产品是不是看起来功能齐全，而是更在意用户是否能够很好的理解产品，不要造成心理负担。

上图来源：Figma这些交互细节，B端设计也值得借鉴

Sketch 和 Figma 的属性面板在功能上其实没有很大的差异，但是后者看起来却清晰简洁许多，对新用户更加友好。

总结

B 端产品 C 端化这个理念其实很好，但如果被误以为只是向 C 端学习用户体验那就可惜了。

用户体验只是手段，关键目的是在没有销售人员参与的情况下，如何从互联网获客。

这次的经验的提醒我，以后如果再看到一些很火概念，不要简单的从表面理解，而是要站在决策者的角度，多思考背后的真实意图。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》B端产品C端化，抱歉我想的太简单！

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

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

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