B端设计总结

从事B端设计已经快三年了，也做过许多大大小小的项目，在此做了一个关于B端项目设计的小小的总结。从以下几个方面进行分析：理解B端组件库的视觉规范，B端产品风格的设计调性，交互设计，等方面进行剖析。

• 组件库的定义

组件是B端产品非常重要的组成部分之一，设计组件不仅可以节约设计和开发的成本，更是设计师在做设计过程中的约束体现，建造组件库不仅能保持良好的舒适性，并且可以解决全平台用户体验的一致性，也能够支撑产品的定制化需求。

• 组件库的优点

【1】一致性：当UI页面分解成单一的元素，无论在哪个页面，UI元素的规格是一样的，例如：大小的文字，颜色的变化，按钮的规格等。不仅让用户的体验相同，在视觉上会更加的和谐统一。

【2】效率性：建立组件库之后，如果想对单一的空间进行修改，既可影响全局样式，大大节约了设计成本。对于开发来说，当相同的元素出现在不同的页面时，开发只需要将元素进行封装做成组件直接掉用即可，无需对重复元素进行开发，大大的节省了开发的工作效率。

【3】跨项目的共通语言：一套组件库可以适用与多个产品线，例如当设计岗位变动，新的设计人员只需要根据设计稿和组件规范即可了解整个产品的大体框架，减少了不必要的沟通。

• 组件化设计思维

• 如何设计组件库

建立一个组件库分为四个阶段：项目初期，项目中期，项目后期，延展期。

【1】项目初期：在一个项目成立初期，大家都会有一个疑问，组件库什么时候建立最合适？是先做组件库还是先做设计？答案是先做组件库。组件库应该在项目初期就应该先建立起来，但是也有可能会面临一下不可避免的问题，例如：产品从0-1时，产品还没有定，无法创建组件库，这个时候怎么做组件库？面对这些问题，设计可以先做一些最小的原子组件。例如：字体（大小，行高，主标题，副标题等），颜色（主色调，辅助色等），图标等等，建立基本的原子组件。

【2】项目中期：完善基础组件，项目的完善，迭代优化组件库。

【3】项目后期：形成最终的组件库也设计规范体系的建立。

【4】延展期：为组件库1.0进行补充。

• 市场主流组件库

• B端的视觉规范

颜色

在系统色彩里有很多不同的色调，作为B端产品的选色建立在视觉规范中的基础模块，在选色的过程中要符合产品定位的心理预期，（比如：金融产品大部分是蓝色，医疗产品大部分是绿色等）。

在选色的过程中，需要注意两个特征：【1】品牌特性：传播理念和价值观；【2】注意色彩的功能性。

图标

图标需按照图标设计规范来做一套完整体系的系统图标，图标的大小，圆角大小，线宽粗细，图标风格都得保证统一性。

文字规范

在页面中，根据Antdesign规范中，比如文字大小14px，行高就是22px。表格里的文字大小与行高是由表格的高大来约束的，但是这并不是唯一的标准，通常在设计过程中，行高的大小是文字高度的1.5倍，（行高=文字大小X1.5）此时得出的高度是最适合用户阅读的

• 品牌理念

产品的风格和设计调性大多是根据品牌的理念来定夺的，一个产品的主体风格更能传达品牌的理念已经品牌文化。

1. 理性层面（业务层面）传递产品理念

2. 感性层面（人文层面）营造产品氛围

1. 个性层面（个性发挥）创造独特风格

 综合三个维度，提炼产品调性，在设计中通常要符合产品定位的心理预期，找到产品的定位。

• 用户体验五要素

战略层：属于产品愿景，满足用户的需求，产品的目标。由于不同的用户有不同的需求今儿产生不同的产品，战略层决定一个产品的核心价值。

范围层：指功能规划，功能的规格包括内容。

结构层：指原型。在这一步，设计应当参与到工作中来，如果设计按照产品给的原型按部就班的来设计，就会显得很不专业，这样做只是视觉美化，设计对原型的优化设计，优化的不是业务，而是交互逻辑。

框架层：指界面设计。并不完全指界面设计，它是泛指产品业务的大体框架结构。

表现层：UI视觉呈现。界面中的配色，样式，结构，布局等。

通过用户体验五要素可知，在一个产品的孵化中，作为设计师，在结构层就应当参与到项目中去，和产品一起完成高保真的原型图，优化交互逻辑，避免后期交互的不可逆性。

• 交互设计的价值

【1】交互设计是提升用户体验的关键步骤，设计师往往会兼顾用户价值，商业价值和品牌价值等，根据用户反馈的商业价值不断的去完善用户体验，从而获取用户，增加用户留存率，提高市场占有份额。

【2】加护设计会分析并重塑需求，分析用户行为特征，设计结构，流程，界面，动态效果并跟进视觉，前端，及时整理线上问题，准备下一次产品的迭代优化。