B端APP项目，高效设计思路分享 | 视频+文字讲解版
上周的直播 B 端产品移动端化的录播已经上传了，可以在下面二维码里长按跳转查看。
同时，我们对本节课程内容笔记和要点整理到下方，方便大家复习。
但随着 B 端项目的发展和对工作场景的拓展，让社畜们可以在其它场景直接用手机办公的需求越来越重。比如下面这些场景，很多同学都应该深有体会。
B 端项目具备移动端是主要趋势，但是，PC 端和移动端并不是完全一摸一样，或者仅仅是用个响应式网页来解决的。比如对比千牛、有赞、微店等平台。
差异的产生，主要包含4个方面的因素：
功能的变化
结构的调整
组件的转化
信息的优化
第1：功能的变化，即产品在迁移到移动端精简原有的功能，并根据移动端特性增加新的小功能点。
第2：结构的调整，主流移动端应用结构和网页不同，以底部 TAB 为一级导航所以需要做结构调整。
第3：组件的转化，根据移动端展示内容的特性，将组件样式、交互做对应的调整。
第4：信息的优化，将字段做一定的精简，以满足移动端信息密度低的显示特性。
B 端产品移动端化，就是一个对原产品项目做减法的适配过程。
产品地图整理 交互流程设计 元素适配方案 视觉风格输出
第一步：产品地图就是产品的内容结构和层级，通过思维导图绘制，建议设计师自己独立去完成，通过这种过程了解产品的结构，以及和原产品的关系。
第二步：设计对应的交互流程，B 端应用不像 C 端那么简单，交互流程往往很长，需要我们独立去制定交互的步骤，匹配原产品的流程。设计交互原型和流程演示是必要步骤。
第三步：进行元素组件的具体交互、样式适配，前面的交互主要是长流程的处理，这步是细节组件调整。
第四步：视觉输出，根据移动端的视觉设计要求，将内容完整的样式设计出来，也是相对来说难度最大的一步。
下面提供一些设计的思路：
案例1
APP 的结构，往往会把首页转化成一个大型模块入口，于是就变成了图标排列的阵地。而这种快速入口图标的设计，往往效果都做得非常差。
多图标排列下，尽可能简化图标本身的设计复杂度，对图标的分类进行色彩的统一。不要在图标上应用过度复杂的图形，保证它们的统一和识别性是第一要务。
原图标：
调整后：
同时，快速入口并不是只有图标一种表现形式，在实际设计中，我们可以根据模块内容、场景，丰富它们的表现形式。图标强弱做对比，或者瓷片化设计，有目的性的丰富首页视觉样式。
案例2
对于表单页面，一定要根据移动端的表单类型来重新整理操作流程，同时更改操作界面。比如下图是千牛的案例。
手机端的单选、筛选、数量选择往往通过弹窗或下级页面来完成，我们就要在表单页确认哪些是上级操作实现的，哪些是下级操作实现的。
同时，移动端操作中要非常注意信息类型的区分，我对原案例的层级进行了调整，通过分割线强化信息类型的区别，观感会更好。
案例3
对于 WEB 端最常出现的表格来将，移动端都会尽可能的做改变，例如将每个表格数据组改成卡片样式，不再使用表格模式，就可以完整显示数据内容。
如果纯表格模式无法避免，那么设计表格的时候确保表格是一个独立页面。同时，优先确定表格的框架和交互模式。
下图是原表格案例：
移动端中，每个数据组内的数据格，并不是只能放一行文字内容，可以放多行来降低宽度。同时，对一些操作内容可以做简化，如文字按钮改成图标，或全部收缩成一个 “更多” 图标。
比如下图移动端化后的案例：
如果数据本身也有分页的需求，可以将分页栏悬浮在底部或做成 Tabbar 形式，保持持续存在，而不是滑倒底部才能切换。
如果表格本身包含二、三级子项，就尽量使用弹窗或新页面来实现展开效果。在原图表中展开过多层级不只是设计和交互的问题，会让开发压力大幅度增加，使用体验极差。