有赞美业工作台三端差异大，B端表单构成要素细拆解
以有赞的美业工作台为例，手机端仅设有宫格式功能入口，平板端除功能入口外，还呈现了工作内容，电脑端则包含数据图表、快捷功能以及各类提高效率的通道，内容互动更为繁复。这三类终端不仅屏幕大小各异，应用情境和用户角色也截然不同，例如电脑端是店长常用，主要用于店铺管理以及经营情况审视。平板设备上，基础职员操作次数更频繁，主要目的是查阅具体任务详情，以及应对访客接待需求，而手机设备则更为通用，无论何种身份或情境都能应用，或许是在店铺内、在家中、行进途中，因此在规划移动端应用时，必须兼顾提升工作效率与维持良好用户体验。
B端表单
B端常见的表单，主要包含数据填写和功能按键两部分，如果进一步分析，则可以分解为以下几项，分别是，表单的名称，相关的分类标记，使用说明文字，数据输入部分，以及功能按键。
1. 表单设计
多数情况下我们期待填写者迅速填写表格，然而在特定情境中又希望填写者减缓节奏，以便他们进行深入思考，例如以下三种情形：
部分需要审核身份信息的界面，应提示填写人认真填写，小尺寸设备上，表单布局要尽量压缩高度或宽度，全球多语言环境，表单内容要能适应不同篇幅和语言文字。
这幅画面展示了医疗端登记环节的同类产品分析。哪种设计更能兼顾使用者与医疗项目的需求呢？下面将介绍三种常见的登记表格，有助于深入认识。
左对齐标签
长句可以分成更短的句子,这样用户在填写表格时会感到更加方便。如果表格中包含的是用户不熟悉的信息,或者是一些比较繁琐的内容,采用左对齐的方式会更好。这种方式可以让视线沿着一个比较自然的方向移动,这与人们阅读时的习惯是一致的。同时,采用左对齐还能够节省页面上的垂直空间。
缺点：长标签会增加标签和输入框的距离，导致延长完成时间。
马泰奥-彭佐在 2006 年完成的一项眼动实验揭示，采用左端对齐的标签会导致操作速度减慢，并且容易引起视线反复停留在输入区域，造成阅读不流畅。这种布局方式有助于引导使用者放慢节奏，逐个审视表单内的各个填写单元。对于包含众多可选项或复杂信息的场景，例如需要提交资格证明的界面、办理金融业务的申请表格等，左对齐的标签设计将更加适用。
左侧排列的标注中，也存在内容向右调整的设置，参照下图所示。这种方式可以处理标签过长造成的布局难题，有助于提升空间利用率。不过，信息关联性会受到影响，从而加大解读难度。同时，容易造成视线移动距离变长，建议采用选项挑选的输入模式，以此减轻上述不足。
顶对齐标签
优势在于宽阔的平铺区域，并且浏览起来十分便捷，针对全球化的规划或繁复的标识特别适用。
缺点：会占用较多的纵向空间。
这个实验里，标签到输入框的时间仅 50 毫秒，而左对齐所需时间则短了十倍。
B端列表
B端常见的界面布局，核心功能在于内容的浏览和处理，通常包含三个基本部分，分别是条目以卡片形式呈现，支持通过筛选条件进行切换，以及提供搜索功能以便快速定位目标。
1. 列表视觉差异化设计
符合情境的构造有助于减轻由数据界面引发的情绪负担，采用具象化物件和表单的融合布局，能令使用者感受到舒适体验。
以图中案例为参照，途牛商旅借鉴了差旅申请表中的线型特征，医鹿参考了病历册的金属铆钉，饿了么商家版效仿了收据的布局形态。
B端数据页
B端数据页面大体包含以下几部分内容，首先是数据统计，接着是可视化卡片，然后是筛选功能，最后展示数据明细。
图表是数据页面中不可或缺的部分，图形化处理后的数据，经过通俗化表达，能够形象地呈现出来，从而让我们更容易明白数据内容。
1. 设计优秀图表
激励性数据设计：
2008年，为降低能耗，某电力企业致信三万五千户用户，信中附有简易图形，标示出用户与同住区域其他住户的用电量对比情况。图形包含条形图，对比三个群体的耗电量：节能型住户、普遍住户及收信家庭。此举措旨在让用户明晰自身用电量是否高于或低于邻近住户。
末尾收到信函的顾客整体上削减了2%的能源消耗，单就个人电费账单来看，这个数额看似微不足道，但针对所有用户群体而言，这能够累积起显著的电力节省，并节省下数百万美元的开支。此后，全国范围内的其他电力企业纷纷效仿了这一做法，并且这种做法也被称作引导性的信息策略。
移动端图表
实际操作时，需根据不同情况，挑选恰当的方案，例如在绘制多段折线图时，要决定采用曲线形态还是直角形态，直角形态能够精确表现数据，而曲线形态则有助于减轻理解难度，并提升视觉上的舒适感。
该图示淘特首页布局中，要在有限的垂直区域内安排图形化展示，能够看出在此处省略了 y 轴的标识以及数值区间，最终呈现为图表时将是一条起伏和缓的线条，这种设计思路更侧重于给人带来的直观感受而非精确的数值呈现，与鼓励性的数据呈现方式具有相似的效果
B端工作台
工作台旨在协助用户迅速了解任务进展情况并快速进入工作环节的界面，同时它也是用户体会产品核心优势的关键窗口；因此，在网站首页的工作台部分，需要严格遵循体验标准与视觉设计规范，将其视为核心展示区域。
1. 工作台案例
我们来看医蝶谷为何进行这样的调整。根据原貌的演变可以看出，这次改造主要为了适应业务层面的需求，我认为包含几个方面：
业务优化：
这次更新反映了医蝶谷在经营方针上的调整。审视旧版平台，我们发现，即时咨询占据了主页的半数区域。那个时期主要关注患者订单处理速度，导致接单较慢的初级医师感受不佳。现在将即时咨询的部分隐藏起来，医生参与竞争的门槛有所提高，并且把原有的咨询标签合并到首页界面。医生能在主界面迅速了解任务情况并着手操作。
视觉优化：
旧版便捷工具的图形色彩较多，使用者容易注意到，不过在医疗人员经常使用的操作界面中，这种设计又略嫌突兀，新版将常用功能图形的视觉强度降低，引导医生将注意力集中在更有意义的内容上，新版主界面因为快速咨询被挪动了位置，可以在设计上作出不同处理，配合新功能的使用空间。
医疗行业案例
先前提及了面向企业的表单、清单、数据界面以及工作中心的实例。为了深入阐释，现在向各位介绍我在工作期间遇到的实际情形。
医生这个职业我们既熟悉又陌生，日常生活中时常会与医生接触。医生一个上午可能接待数十位病人，分配给每位病人的诊疗时间平均只有三到四分钟。这么短的时间里，既要完成病症的判断和治疗，又要填写病历，还要应对病人提出各种疑问，其难度可想而知。这种情形在网络上体现得毫无二致，更何况其中多数是临时行医的人。因此我们的任务在于提升产品的便捷性，减少操作步骤的繁琐程度。
1. 音视频排班
根据医务人员了解，医疗机构的轮岗并非以星期为单位循环，常规中常有突发性事务出现。因此，每日的岗位分配里，时段存在显著的不同。
譬如，当人们就医时，常会碰到一个情形，即医师要求去获取检查结果，随后返回时，患者并非重新加入队伍，医师便需在此刻加以引导。
2. 设计策略
构思要贴合医务人员的操作习惯，兼顾特殊环境下的适用性，现将我们制定的若干方法陈述如下。
优化层级，提高屏效
先前在 B 端清单中已阐述，清单顶端对齐的呈现方式能让用户浏览时更为便捷高效。因此现在将时间标记置于信息条目上方，并且重新分配了任务名称与时间在卡片中的视觉比重。改进前，任务按时间顺序逐行排列，每段时长独占一行。由于医师日常事务繁杂常有临时变动，日程安排难以遵循固定模式。若要浏览下午或晚间的日程安排，操作流程会变得相对繁琐。因此，对于空闲时段的标识进行精简，这样在初始界面也能够查看到夜间时段的安排情形。
利用色彩，少即是多
色彩是决定性作用的关键元素，在设计领域极为关键。科学实验表明，人们通常用 90 秒时间就能形成对产品的本能反应，在这段时间里，超过 60% 的评估仅仅依据色彩本身。
色彩关联有助于优化使用者搜寻速度，并承载更丰富的内容呈现。最初构思时，打算依照病患视角的脉络，通过功能符号实施划分，不过两端协调时须兼顾的要素较多，难以通用。因此最终决定改用色彩标记来执行区分
优化路径，去繁化简
根据早期考察发现，医师的工作日程安排缺乏固定性，时常有临时变动的情况发生，有时会在单日内插入数个彼此不相连的工作时段，因此我们针对医师的工作日程安排方案进行了相应改进
原先增加一个时段必须经过四个环节，若要插入一天内不相连的三个时段，则需乘以四得到十二个环节，这要求使用者去辨析繁复的条理，但经过改良后，增设一个时段仅需三个环节，若要加入一天内不连续的三个时段，则乘以一即可得四个环节，其条理清晰易懂
这个是医生工作场景中的一个实例，能够看出视觉和交互方面的改进都是围绕医生的实际操作环境来构思的，在医疗领域，存在显著的职业门槛，必须通过深入调研来制定具体方案，这也是面向专业用户的设计中必须着重考虑的环节。
设计落地
1. 代码框架
B端设计师最常使用的工具是电脑，而开发移动端B端产品时，通常采用H5、RN等技术方案实现。这种方式能够实现跨平台资源复用，接下来以网页为例，说明我们应该如何把握前端页面的构造特点。
2. 提升开发效率
设计阶段，高效的工作方法能让开发人员节省时间。公司若具备交互能力，通常能提前开展开发工作。否则，我们应当运用结构化思路，先构建好整体框架，并将设计图提供给开发人员，开发人员会依据设计图完成基础功能模块的建立，之后再参照说明文档对界面进行细致的样式修改。
3. 降低服务器成本
我们将切图给予到开发以后，开发会将其传到服务器上面。
用户浏览我们的网页，本质上是在向服务器发出指令，获取里面的图片资源，当图片数量过多，或者单个文件体积过巨，就会消耗用户不少的网络带宽，导致使用感受非常糟糕。
服务器的存储空间需要公司承担费用，因此要尽可能让一张图片在多个地方应用，如果图片质量很高，可以将里面的人物单独提取出来，在不同的环境中重复使用，实际测试发现，一张 4k 的网站横幅，人物部分分离后再利用，可以使横幅体积缩小一半。
占位符
在部分需要文本换行的场景中，调整间距存在困难，这是由换行特性决定的。通常采用插入占位符的方法来达成目的，而占位符类型多样，下文将展示最普遍的三种，它们各自对应不同的间距效果
字重
字重的作用在于让文本中的关键部分更加醒目，通常在文档里会用到三种不同的字重（常规，中等，细粗）。不过，在 h5 的场景下，只能实现字体正常和加粗的显示效果。标注文档中同样能看到常规字型和粗体字型，两者在文档里都标记为字重 500，这个字重在前端界面显示效果与常规字型一致，我们应当制定清晰规范，并与开发团队达成共识，未来遇到 medium 字重就统一使用 600 字重进行标注。
4. 如何推动规范
一般情况下，即便开发团队为某个版本投入了大量精力，也难以完全修订所有规范，所以我们必须以项目经理的身份，将当前需求进行分解，明确各项的优先次序，按版本逐步实施到产品中，同时与相关人员沟通需求内容。
此外在促进标准化的进程中，或许会显现图示中的情形，此时能够借助表格来实施部署，从而更有效地规避后续可能发生的问题。
很高兴你能看到最后。
请小编喝杯咖啡吧！