B端UI设计从0-1指南（小白干货篇）

一般我们从接到原型就可以着手设计了，大部分情况产品的原型中都有很多个功能模块，但需要注意的是他们只是把模块内容设计出来，至于这些模块如何呈现、如何排版、如何结合等他们是没有经过考虑的，而模块的交互在后台设计中相当重要，所以在进行UI设计时，也要适当考虑交互设计（由于大部分中小企业都不专门设交互设计岗，因此这里不考虑让交互设计师设计交互这种情况）。

设计时不要将思维局限于原型中，要有自己的思考，如果认为哪里不合理或者有更好的处理方式，要及时和产品经理交流，产品大佬们还是很好沟通的，而且或许在沟通过程中还能收获一些小经验哦～

B端设计可以概括为以下几个步骤：

一、确定风格

二、确定尺寸

三、确定布局

四、开始设计

五、制作设计规范

六、整理组件库

七、设计交付

八、设计追踪、校验

一、确定风格

从网页背景颜色区分，可以分为纯白背景风、轻淡背景风和深色背景风。在开始设计之前，确定一种设计风格，之后页面中的所有元件的设计，都基于这种风格来设计。

• 纯白背景风：线框/轻淡色（灰）背景（文字一般采用黑色）

• 轻淡背景风：纯白色块背景（文字一般采用黑色）

• 深色背景风：带有透明度的纯色背景（文字一般采用白色）

风格的选定是客观的，需要经过产品经理/领导确认，如果他们相信你的实力，你也要说出充分的理由来支撑你为什么选择这种风格，而并不只是因为看起来高大上或者是个人喜欢。

二、确定尺寸

确定设计稿尺寸需要与产品经理了解客户使用的设备屏幕分辨率大小，根据实际情况选择最合适的尺寸。决定产品设计尺寸分辨率大小的因素有以下两点：

1、市场占有率（主流）

2、兼容能力

目前市面上的办公显示器多为24寸，因此1920*1080的设计稿较为普遍，目前我做的b端设计稿也以这个尺寸为主。若考虑兼容性的话，可以采用1440*900的尺寸，因为该尺寸兼容能力较强，向上适配或者向下适配的误差会比较小。

• 注意：因为要去除浏览器顶部页签以及地址栏高度，因此实际设计稿尺寸是1440*800，而不是1440*900。

三、确定布局

可以分为水平导航布局、垂直导航布局、混合导航布局。其中水平导航布局和垂直导航布局比较常见，混合导航布局使用较少。

1、水平导航布局

类似于普通网页的布局样式导航，顺应由上至下的正常浏览顺序，排版稳定不受显示其影响；顶部宽度限制了导航数量和文本长度，适用于导航数较少，页面篇幅较长的产品。

2、垂直导航布局

可以将导航栏固定在左侧，提高导航可见性，方便页面之间切换，顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等，菜单栏还可以展开收起，适用于结构简单的产品。

3、混合型导航布局

结合了水平导航布局和垂直导航布局的特点，层级可以扩展到二、三级菜单，且能够更加清晰地区分常用业务功能操作和辅助操作，可以承载更多复杂逻辑关系，适用于功能模块较多、较复杂的工具类型后台，如teambition、worktile等。

四、开始设计

设计过程比较主观，虽然没设计前没有制定设计规范，但在设计的过程中要自己默默形成一个设计规范并严格遵守，以便让设计看起来是有依据的，而不是随性发挥的。同时，也便于我们以后多人协作时统一使用一套设计规范。再次提醒的是，设计时的元件设计风格要与一开始确定的风格保持一致。

五、制作设计规范

引用其他文章中的观点，制定设计规范有以下几个优势：

设计层面：解决用户体验一致性，减少设计成本，提高设计效率，是设计师可以快速承接新需求，沉淀设计资产，使设计更加持续低输出价值，减少一次性设计，同时是设计师从样式中解放出来，站在更高的层面上思考业务与体验。

开发层面：与设计规范同步形成研发资产，避免重复造轮子，保证代码质量，降低维护和拓展的成本。

测试层面：避免重复的无意义走查。

产品层面：提高产品迭代与优化效率，降低试错成本。

协作层面：降低不同设计师之间以及设计师与开发工程师之间的沟通成本。

制定设计规范在设计层面和协作层面体现的用处是最明显的，因为当规范统一了，以后再接新需求的时候就很快能够设计出新页面，因为制定的组件规范也是能重复使用的。此外，如果以后有新的设计师加入到项目中，只需要看设计规范就知道应该怎么设计了，能够很好地和之前的设计保持统一。

目前市场上已经有许多第三方设计规范，例如Antdesign、Element等，如果自己没有想法的话也可以参考这些规范，从而制定一个能够满足自身产品需求的设计规范。

那么如何建立一套设计规范呢？可以按照以下步骤进行：

1、梳理收集产品中不同板块所出现的所有场景；

2、收集完后将板块归纳分类（不同样式、状态等可以分成不同种类）

3、从不同定义规范

可能听完还有同学还是一头雾水，设计规范内容普遍包含以下几种：制定规范的目标和原则，产品的框架布局介绍，字体，色彩，图标，通用组件整理，表格，弹窗，图表等，将这几个维度整理一下一套简易的设计规范就制定出来了。

六、整理组件库

整理组件库这部分不是必须的，制作组件库也是为了以后提高设计和开发效率而准备的。做设计的时候组件化思维很重要，要善于总结分析页面模块中的一些共性。有需要的话可以找领导沟通，和开发同学共同完成产品的组件库。

七、设计交付

设计完成后，就要进行交付设计稿，我一般是摹客和iconfont结合使用，将设计稿切图上传到摹客，再将一些小图标上传到iconfont就可以交给开发同学开发啦。摹客也可以用蓝湖代替，看需要自行选择。

八、设计追踪、校验

设计稿开发过程中，需要随时和开发同学沟通，保证页面的还原度，前端同学写完页面可以对页面整体进行走查，校验样式。

B端产品服务于企业或组织，以提高效率为主，业务功能优先于用户体验，因此在视觉设计上的发挥空间没有C端的发挥空间大，尽量做到设计简洁不要过度设计。以上是我在进行B端学习和产品实践时的一些总结，不足之处欢迎沟通交流哟～对你有用的话给孩子点个赞鼓励一下吧～。