B端产品设计思路&高频设计要点笔记.docx

B端产品设计思路&高频设计要点笔记=录B踹产品概述USER GROUP OPERATION IDEAUB端全称是Business即商家（泛指企业）的产品，通常是企业或商家, 为工作或商业目的而使用的系统型软件、工具或平台。相对于C 端产品，B端产品对业务逻辑和产品逻辑要求会更高。本篇笔记将罗列B端设计过程中的核心设计思维和高频设计要 点，结尾附上大厂设计规范链接。供大家下载查阅。第一章山端产品及业务侧思维要点USER GROUP OPERATION IDEAU目标导向B端产品的商业目标设计开始要了解设计的目标，用户的行为都是有目标动机的,B端产品的业务目标往往都是为了为企业或个人为了解决某一项工作上的问题。当设计过程以目标为出发点，可以增强设计判断力，输出更 有效设计解决方案。B端产品的设计原则：提高使用者的工作效率，同时降低业务链路的操作及学习成本。了一个十分高的门槛。kKtincaffw请选择您要新建的数据开发任务Spark SQL普通任务ShoIlM）本早期的瑞幸后台让引导用户根据自己需求创强让用户了解后台逻辑同时快速触达自己的目桁要点2保持高效例如修改资料的时候，使用弹窗、浮层等等交互操作会减少页面 跳转的频率。但是与此同时，减少页面跳转并不代表真正的高效，例如瑞幸的 供应商系统，供应商所产生的订单需要按照指定的流程一步步进行操作确保不会出现问题这样虽然页面的跳转增加，但是可以避 免操作出错给用户带来更大的困扰。任务时间稽核人员审核人城市负责人区域运营经理15:22-15:26戴沐白戴沐白戴沐白戴沐白编辑补充任务.请选择补充原因取消15:22-15:26戴沐白戴沐白戴沐白15:2275:26戴沐白戴沐白戴沐白15:22-15:26戴沐白戴沐白戴沐白共200,0000条10条/页，信息降噪：精简信息，精简操作，精简页面，； 余信息对于用户的干扰。互联网襄话4要点3整理信息/引导视觉设计要根据用户的浏览习惯和视觉动线。要尝试引导用户的视觉，举个例子，如何引导：和大家表演一下什么叫视觉控制。挑战一下!十秒内只看她的眼睛!宏试了解用户进入这个页面他需 要浏览的信息主次，然后判断用 户接下来的操作路径。者：别再往右边考第三章端设计语言高频设计要点USER GROUP OPERATION IDEAU设计侧核心要点B端产品是以业务为核心，是需要用户长时间操作并完成工作任 务的，对于操作和展示内容无关的元素，越少越好。视觉为功能 让步，追求简洁、清晰、克制、理性的视觉风格。设计语言尽量做到不干扰不打扰。要点1 ,表单设计如无必要，勿增实体如无必要，勿增实体输入顺序:输入顺序:先易后难;先必填后选填；先公开信息后隐私信息;有关联性的合成一组，特殊问题后置，用户输入时、不会觉得突 兀、门槛太高。自动对焦（PC端）进行表单页面，自动对焦第一个输入字段可 以引导用户开始进行输入。标题：标题是对下文最短最精的概括。用户一般都会跳过表单内 容，而且几乎都不会仔细阅读那种特别详细的描述。所以用最少 的文字说清楚一个表单的目的尤其重要。用户应该可以看一眼标题就知道他们应该怎么做，而不是非得把 剩下的全部看完，（附：这部分感兴趣的同学可以搜索“微文案设计”）在表单编写方面，或者说各种写作中，删减词语都要比添加词语更加有益。在仔细检查不必要的词语后，文章会更笃实，更连贯, 更吸引人。你删掉的每一个词，都会为你多增加一个读; 5E-L/AU/Ti0A自 o liIfj 13f这个链接有什么用？关闭是点击右上角的按钮吗？如果并没有 增效，那就是减效。每一个字，每一张图片，都不是100%必需 的，这些都会降低你表单的转换率。删除一个字段，表单提交率就可以提高26%。（本篇笔记原本有12000余字，为了避免浪费大家时间，我仅保留4000余字的高频要点内容）PC端产品提示文字尽量不要放在框内提示文字存在于框内常用在移动端，它的空间占比很小，对移动 端的小屏来说，是非常友好的，但如果在交互上处理不好，会有 很大的缺陷。内部标签结构，只有提示性文字，用作提示用户应该输入什么内容，但用户在输入的时候，内部的标签/提示性文字就会消失，这时候，用户会失去它是否输入准确的唯一判别标准。输入前输入后UNddffnvb8545当表单的内容过多的时候，你可能都忘记了之填写的这项是什么。点也不至于没减少打字需求字段输入通过部分人工智能自动将操作步骤可以变得简洁高效，也包括诸如一些、自动定位、图片识别、自动获取，第三 方导入等方式来使用户的效率得以提升的功能。打字是在线表单中最耗时、最密集的部分，而且经常会导致错误 尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能，将减少工作量并提高转化率。方式1方式2158-0594-1102哪个电话号码会留在你的脑海里？当然是第一，为它被分块了。2你选了第二个?使用文本块文本块会更容易让用户记住内容：例如银行账户、电话号码等等。 它指的是将信息排列成块的过程，使内容更容易保留、处理 和回忆。一份研究声称数字3是帮助人们吸收和回忆信息的神 奇数字。表单的提示文字和定义格式要求如果一个字段需要特定的格式输入，请告诉用户。例如密码要求、请输入密码提示文字要有助于帮助用户输入信息避免提示文字诸如子日:三人行，必彳用输入框长度提示可以用输入框长度提示用户输入的内容是否正确。德莱厄斯研究所的可用性研究发现，如果一个字段太长或太短， 用户开始怀疑他们是否正确理解了标签。在用户输入的时候，右下角告诉用户已经输入了多少字，如果超 过 限定字数后输入框红色，用来警示用户，此时用户依旧可以 再输入字符，但当出现警示，用户继续输入一定数量字符后，系 统需要强行限制无法输入新的内容，避免用户没有察觉到警示反 馈导致的过多输入，从而浪费的时间。（该部分感谢酷友sh9513提出的反馈）语法规则、编号间距等等。请输入密码如果用户填写错误，向用户显示错误发生的位置,并说明原因。请输入联系方式+86 158-0594-1102请输入联系方式+86 158-0594-1102请输入密码输入有误请重新输入请输入密码UNddffnvb8545O密码必须为612数字或字让用户感受你正在帮助他完成操作。我不是你男朋友，不要让我猜我$单选框如果你的表单里的选项少于5个可以列出所有选项供用户快速选择，当大于5个时候可以尝试用下拉框解决。将第一个选项作为用户最有可能的默认选项，且是最安全的选 项，提前预判用户的操作提升选择效率。排列方式推荐数直排列,竖直排列相对于水平排列容易读取和定位，提高用户的浏览顺 序。您删除 覆盖 另存为另存为覆盖删除A你会发现B端设计目的都是围绕着提高效率你会发现B端设计目的都是围绕着提高效率解释隐私消息 当刖帝要用户填与相对隐私的信息时，请给予解释这么做的原因 及目的。口收集设计反馈 完成表单的设计后可以给业务用户进行简单的测试，并记录他们 填写的时间收集反馈，以及对这一连串的问题他们体验如何。这 也将有助于你下次评估表单的设计。当你有了目标以后你的设计就可以围绕这个目标展开:简单的说,B端产品是以降本增效为核心去设计那么如何以提高效率为核心进行设计？设计价值B端的设计价值体系搭建好用大于好看，船得先不能沉再咱再聊其他1好用大于好看，船得先不能沉再咱再聊其他1对于B端的产品而言，用户最关心它能为实际的工作带来哪些便 利，而并非这个界面做的多么的好看，以及用户体验多么棒。所 以B端产品设计价值优先级往往是 功能性表现力泰坦尼克号B端产品设计需要站在整个业务线全局角度去把控各个设计点， 不再是用户体验至上，为实现任务目标，牺牲一部 分用户体验是必要的，这个时候视觉和一些体验就不那么重最后在情感化设计系统里记得感谢用户填写或者反馈问题，因为 用户是花时间的。所以请表示感谢。要点2表格设计表格的设计围绕着可读性和易操作两个设计原则。设计 易读，易扫视，易比较，易操作的表格结构是表格设计的首要目文字距上下表格间距54Px文字距上下表格间距城市负责人区域运营经理操作戴沐白戴沐白编辑补充任务城市负责人区域运营经理操作戴沐白戴沐白编辑 补充任务表格高度一般常用54Px或46px； 38Px常用于 和空间较小的情况。当带图片、封面的时候，距寓上下的间距都是;列宽有三种常见处理方式:1 .根据内容的极限长度给出足够的固定宽度；2 .可以固定部分列的宽，其余列按百分比处理；3 .列宽需要考虑最低宽度/最大宽度/文字极限状态，内容为空 状态显示方案；4 .需要设置列之间的最小宽度，表格响应式布局情况下最小不小 于此宽度。城市负责人戴沐白城t戴沐白城市负责人戴沐白280PX120PX80Px列宽常规最大宽度列宽常规最大宽度列宽常规宽度列宽最小宽度M-Densign规范中对齐方式会遵循如下规则：表格的排序，应从用户目的出发，遵循用户查看数据的习惯，尊 重数据之间的关联性，设计用户查看、操作数据的路径，而非随 机排列（这部分可以在业务侧调研时验证，提高用户体验和阅读 效率）。1.文本信息/混合型文本左对齐，符合从左到右的阅读习惯；2. 数字信息右对齐，方便数字之间的直观对比；市场负责人稽核人员商品数量审核结果操作卫伯伦大米12,350,通过3次编辑甜筒咸粥8,40，,，通过2次编辑小鸡伊布5,750,不通过1次编辑林荔枝米菲3,540，不通过2次编辑共200,0000条10条/,。2 3 . 20 跳文本信息左对齐混合型文本左对齐数字信息右对齐表格数据为空或无数据时，使用用r-J来占伯 表示该项数据不存在，避免用户误解。信息传达过(该图片感谢好友晴蓝 同学反馈的一个错字，图片已修正)要点3按钮设计设计规范需要定义按钮的四种状态：正常状态(Normal)、悬停状 态(Hover)、激活状态(Active) 加载状态(Loading) 禁用状态 (Disabled)修改审核人修改审核人正常状态(Normal)悬停状态(Hover)按下状态(Active) 不可输入(disabled) 加载)修改审核人修改审核人当按钮响应时间长于1秒时，通常会补充按钮 互动画，减缓用户等待的焦虑感。B端的情感化设计，这就是为什么我在这篇文章中要用插画讲解f第西章技术侧协同相关说明USER GROUP OPERATION IDEAUB端产品的开发一般涉及多个开发团队协作，例如瑞幸的后台修改 按钮颜色，都可能牵动10+工程师的协同。所以B端产品在进行设计改版以及设计侧调整时候要思考调整 对于业务侧是否有直接帮助，在设计和规范建立之前，切勿频繁 改动。除了完全独立设计开发的项目以外，还有大量的B端项目是采 用第三方框架开发而成的，如Ant> Element等等。这是因为这 些第三方程序可以帮助团队节省大量的开发时间和精力。B端组件库资源补给包USER GROUP OPERATION IDEAU要了。通过调研业务去了解各个角色职能的工作流程、相关痛点， 让产品能用，好用。要点1 了解项目的业务流程理想的B端设计需要了解业务目标以及业务链路中每一个环节 的过程。将业务逻辑理解透彻再考虑应该如何进行设计实现。这样做的原因当你站在使用者的角度进行同理心设计可以更好的帮助用户完成他要完成的工作，从而提高效率。产品原型一般基于功能本身，而设计师从用户实际场景规划用户的任务流， 可以优化产品逻辑，补全缺失场景，通过了解业务流程也能给予 创造性解决方案假设如果你没有深入使用过Photoshop,你 定不会去考虑要加快捷键这件事情。 1要点2,用户调研与场景化设计思维B端产品往往是是服务于企业用户，用户画像需要专注于用户特 征中的群体职业身份这类人无论性别、年龄、地区有何差异， 他们都是一类角色，我们的产品要提供给这类角色使用，而不是某个人使用。全局意识业务调研工作环境用户场景在哪用怎么用工作感受 产品痛点什么感觉哪些问题调研方式实地走访建立用户反馈群亲身体验观察使用者使用情况用户的使用反馈实际操作业务流程你不亲自体验一下都不知道你自己设计东西多刖刖公司Boss暴跳如雷的对由于B端设计师不是产品的用户，无法沉浸在与用户相同的真实 场景中，建立共情。所以设计师最好亲自感受一下业务流程，获 得一手的用户洞察。获取B端用户反馈的方式通过业务人员交流业务人员可以帮助我们快速高效的描绘出 典型客户案例的用户画像。实地走访：观察在自然状态下用户如何完成工作任务，并提 问题：你怎么做？或者为什么这么做？建立种子用户群：聚集活跃的种子用户群，收集意见和建议, 并在群里验证设计想法。亲身体验：成为真正的客服小二，接听客户电话，记录自己 在工作台场景下的真实体验和感受。获取用户画像后了解该群体背后工作感受，行为习惯，以及任务类型。,一-AJU 访谈刖首先你要先确认访谈人群，和访谈目标，并且在这之前要先了解他们的相关信息。访谈中设置问题的范围并复述确认，控制访谈时间和主题（这个过程类似面试）然后设计访谈问卷，整理大家反馈问题，从中 筛选有代表性的用户访谈后是不是感觉用户访谈类似我们的面试流程，只及时总结复盘访谈者给予的反馈信息，并将信 息整理放入反馈池中，加葱油少许备用的不一样罢了。要点3情感化设计心理安全感和信任感建立：人们越来越关注隐私和信息安全。如果你 要求必须填写敏感信息，请确保使用字段下方的注释文本解释为 什么需要这些信息。实际工作中我们曾经自动获取过用户之前表单中填写的的支付 类账户信息，在收集的用户反馈中，用户会感觉到隐私正在泄露 并让用户信任感降低。所以即使用户输入体验会更好，但是考虑 到信任感，敏感类信息请不要自动获取。" 我还没输入，这个后台就自动帮我填好了银让用户感受到你正在帮助他操作：Jakob Nielsen于1994年提 出的十大可用性原则中，其最后一条原则Help and documentation （帮助性指导原则）是搭建B端用户帮助体系的 核心准则，在理想情况下，没有帮助文档就可以使用系统是最好 的，但在某些情况下（尤其是B端系统），提供一些引导性的帮 助其实是必要的。B端系统中可以尝试搭建用户帮助系统：B端产品中的尝试建立用户帮助体系，如:文字提示性系统 错误纠正系统 模板示例常见问题的帮助文档 客服 引导式气泡我向您提供了这些帮助您看看是不是能帮助到您?第二章产品交互侧要点USER GROUP OPERATION IDEAL1要点1 ,降低学习成本 对B端产品来讲，设计师在设计的时候是不需要耗费太多的思考 的，只是去按照交互设计师的规划堆砌图表和列表。但是对于使 用者来讲，其中纵横交错的商业逻辑和业务逻辑却是给用户搭建