蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
本文主要从业务分析、交互体验和设计规范三个层面进行总结。
与C端不同，B端产品主要围绕业务为核心展开，面向专业的人员，有固定的业务属性，我们只有将业务理解透彻，熟悉业务的运作流程，才能在B端设计过程中，输出良好清晰的设计架构，更好的解决业务问题。因此，设计师的业务分析能力在B端设计中至关重要。进行业务分析可以从以下几点着手：
我们可以从多方面收集业务相关的信息，包括梳理需求文档，与业务人员沟通等，来了解行业背景、业务目标、组织架构，理清一些专业名词等。业务场景理解的越深入透彻，我们才能建立起一个系统性的逻辑思维，对我们接下来的设计脉络的梳理以及整体设计的把控是越有利的。
我们可以通过绘制业务流程图，将零散的业务信息通过具象的流程图清晰地呈现出来，有助于我们宏观系统的了解整个功能流程，同时也能够确保业务的标准流程都能够走通，不会出现逻辑问题及功能场景的缺失。
B端用户因其岗位角色的不同，使其具有清晰的角色权限。比如普通成员、管理员、超级管理员，分别对应不同的权限，不同的权限背景下，其功能和业务路径也是不同的。理清角色权限，聚焦当前角色本身的任务流程，避免被无关的信息干扰，可以使我们的业务功能更加清晰，避免冗杂无用功能在不同角色间的穿插，有助于分解信息结构呈现的复杂性。
我们知道，B端设计的核心目标为降本增效，在交互体验层面可以理解为降低认知成本，提高使用效率。而B端设计的一个显著特点就是功能、场景复杂，要达到降本增效，需要我们在交互体验层面上注意以下几点：
B端注重对页面的高效操作，因此在设计的过程中要保持简洁克制，排除过多的干扰元素，聚焦主要功能，弱化或隐藏非必要功能，保证页面信息呈现轻量化，降低用户认知负荷。
同时，通过视觉设计，比如颜色、字号、字重、合理排版等，使页面信息呈现有层次、有重点，能够合理有效的进行优先级的引导，页面信息呈现更加清晰有序，降低页面的复杂性。
设计过程中，遵守设计规范，在视觉与交互上保持一致性至关重要。
一方面保持视觉上的一致性，包括字体、颜色、间距、结构等，能够使页面信息呈现严谨有序，保证易读性；另一方面，保持整个系统交互操作的一致性，则可以大大降低用户的学习成本，同时还能够提升开发效率。
B端功能交互逻辑复杂，在设计过程中，尽量保持已成标准的用户操作习惯，尊重用户已有的认知，保证内容的可理解性，可以增加用户的熟悉度，降低学习成本。
B端的信息结构复杂，如果将信息完全平铺呈现，不仅占用页面空间，还会大大加重用户的认知负担。这就需要我们站在用户的角度，基于用户的行为路径，进行信息层级的划分。
第一，对页面信息进行梳理，明确主要信息和次要信息，必要信息和非必要信息，将次要信息和非必要信息进行隐藏、收起、删除等，可以有效聚焦核心内容，避免分散用户注意力；
第二，对需要展示的主要、必要信息进行分类归纳、信息分组，通过合理的页面排版布局，使信息结构清晰有序的呈现；
第三，注意层级步骤的拆分，让用户逐级获得信息，路径清晰，避免过多信息杂乱无序的呈现，增加用户认知负荷。
首先，我们通过预测用户行为，在关键交互节点增加功能曝光，给予用户操作建议和提示，可以帮助用户高效流畅的完成任务目标；其次，对用户行为进行预测，主动帮助用户完成一部分操作，比如信息默认值填充等，可以提升用户体验，减轻用户的操作负担。
B端产品结构功能复杂，有使用学习的过程，如果对B端产品进行大的改版升级，会让已经熟悉旧版本且已经产生使用习惯的用户产生一些不适应感。保留旧版本返回入口，让用户慢慢习惯过渡到新版本，可以减小用户学习的压力，避免因习惯问题影响产品的正常使用，无论是对用户的接受度还是对我们改版的顺利落地都是一种不错的方式。
B端系统庞大且复杂，建立起统一的设计组件和设计规范至关重要。
组件规范的建立：
第一，能够保证交互及视觉设计的一致性，提升设计效率和降低用户学习成本；
第二，能够提升团队的协作效率，提高设计还原度，降低对接成本；
第三，组件化设计，可复用性强，能够提升开发效率，在后期的迭代开发中，也可以进行统一的更新和应用，能够减少开发工作量，便于维护。
设计规范比较具体，且不同的项目在规范细节方面也会有所不同，下面主要整理了一些比较常涉及且可以通用的规范和组件。
B端系统用户的主流分辨率为1920、1440和1366，我们在选择分辨率时，首先确定目标用户使用场景是否对分辨率有特殊要求，如果没有特殊的场景分辨率要求，基于上下好适配性，通常会选择1440的尺寸进行设计。
由于B端业务场景复杂，信息量比较大，通常选用24栅格系统。
考虑结构布局，根据不同的结构布局，给出动态缩放适配方案。常用的布局为：左右布局和上下布局。
左右布局：通常是将左边的导航栏固定，对右边的工作区域进行动态缩放。
上下布局：通常是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。
B端用色讲究简洁克制，使用户能够高效聚焦功能内容，Ant Design上面对色彩应用的描述为“色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率，影响信息的清晰传达的这些原则之上，理性的选择颜色是关键。”基于色彩使用的目的，B端用色主要分为主色、功能色和中性色。
主色：通常是品牌色，或者根据用户群体、产品定位以及使用场景来定义，主要用在主要按钮、选中状态、高亮信息、空状态等。
功能色：代表了明确的信息以及状态，如成功、错误、提醒、链接等。功能色的使用需要遵守用户对色彩的基本认知。
中性色：主要用于文字、分割线、边框、背景等。
字体：中文常用字有：Ping Fang SC、微软雅黑、思源黑体；英文常用字体有：San Francisco UI（SF字体）、Helvetica Neue、Arial。
字号：最小字号不小于12px，常规字号大小一般为14px。辅助文字12px，正文（常规）14px，小标题16px，标题18px、主标题20px，字号的选择可根据具体情况进行定义。
字重：字重通常选用regular、medium、semibold，分别对应代码中的400、500、600。
行高：行高设置一般为字号的1.5倍左右，我们也可以采用，字号+8px做行高。
(1)按照基础样式分为：主按钮、次按钮、虚线按钮、文本按钮、链接按钮
(2)定义按钮的交互状态：Normal（默认状态）、Disable（禁用状态）、Hover（悬停状态）、Press（点击状态）、Loading（加载状态）
(3)对按钮进行规范的制定：包括尺寸、圆角、文字、颜色、背景等
表单通常由输入框、选择器、单选框、多选框等组成，具有收集、校验、提交数据的功能。
(1)表单的状态：设计时，要明确规范表单的三种状态
默认状态：即用户输入信息之前的状态；
焦点状态：即用户正在输入信息时的状态；
反馈状态：即用户填写信息后的校验状态。
(2)输入顺序：表单设计时，信息的输入顺序按照先易后难，先必填后选填，先公开信息后隐私信息进行，可以减轻用户填写表单的心理压力。
(3)对齐方式：对齐方式分为三种：顶部对齐、右对齐和左对齐。
对齐方式的选择，需要根据浏览效率、屏幕空间以及标签长度来实际判断，做出选择。
首先，需要明确，浏览效率上，顶对齐＞右对齐＞左对齐。
然后结合屏幕空间和标签长度做判断：
顶对齐：效率最高，标签长度可以更灵活一些，但垂直空间占用多；
右对齐：效率次之，文本字数不可控但又不是很多时可使用右对齐；
左对齐：浏览时间最长，效率最慢，标签字数可控或者需要用户谨慎确认信息时，可使用左对齐。
需要注意的一点是，顶对齐的标签布局之间要有合适的垂直间距，才能浏览舒适，效率更高，通常使用输入框 50%至 75%的高度作为相邻输入框的垂直间距。
(4)校验反馈：校验反馈要具有准确性和及时性。
准确性：主要体现在，要给予用户准确清晰的错误原因和解决方案，以及准确的错误位置。
及时性：表单填写时，出现错误是难免的，为了避免用户盲目填写信息或者出现大面积报错，可以进行实时的校验反馈，比如用户输入完成鼠标失焦后进行信息校验，但反馈的前提条件是不打扰到用户。
需要注意的一点是，成功或者错误等的反馈，不能仅用颜色来区分，需要加入明确的图标和文字来提示，以达到视觉无障碍设计。
(5)标签与占位符：标签和占位符都要尽量简洁，避免文字过多，给用户造成视觉负担，信息描述应该准确、直观且完整。
(6)表单分步：当表单内容多而复杂时，会让用户感到烦躁和不知所措，表单分步不仅有利于减轻用户的填写负担，缓解焦虑情绪，还能够明确了解表单填写的步骤流程。
(7)数据与默认值填充：在用户进行信息录入时，可以通过后台数据库进行匹配，自动填写已知信息，也可以设置合理的默认值，满足多数人需要的默认选择，帮助用户节省时间，快速完成表单填写。
(8)输入框宽度与高度设定：输入框的大小通常对用户输入信息的多少有着暗示作用，输入框尺寸越大，用户会认为是可以输入很多字的。因此，并不是所有输入框宽度一致，就是好的设计，需要根据实际情况，设定输入框宽度，但是也不能设定太多宽度，宽度太多会使表单视觉效果凌乱，宽度设定要合理适当。
输入框的宽度是固定的，但是高度可以根据内容进行自适应调整，来保证信息的显示完整性，给用户以良好的体验。
(9)选项便捷性：表单填写要始终遵循能不填写就不填写，能选择就不要输入的原则。当选项多于5个时，适合使用下拉框的形式进行展示。当选项内容过多，超过下拉框的高度，用户筛选比较困难时，可以考虑是否输入更快，采用输入的方式。
B端表格的设计本着清晰易读的原则进行，设计上需要我们注意以下四点：
(1)表格宽度：表格宽度的处理需要考虑自适应问题，主要有三种方式：
a.设定表格的最小宽度，最大宽度不做限制，可以无限延伸，当表格达到最小宽度时，做极限处理；
b.根据需要设定多个等级的最小单元格宽度，当单元格达到最小宽度时，做极限处理；
c.也可以按照表格宽度的百分比，设置单元格宽度，或者固定部分无放大需求的单元格宽度，对剩余单元格按照百分比进行缩放；
(2)极限处理：极限处理主要针对最小宽度，当表格达到最小宽度时，信息展示不全的情况下，常见的处理方式有：文本信息缩略显示、文本信息换行显示、横向滚动显示。
(3)单元格高度：单元格的高度直接影响表格的高度，信息呈现量，以及阅读体验。单元格高度一般在38px~58px之间，高度太大或者太小都不利于阅读，个人实践建议高度为字体行高的2.5倍。
(4)对齐方式：为了提升浏览效率和数据的对比效率，通常采用文字左对齐，长数字右对齐的方式，空数据使用“-”填充。
总之，做好B端产品的设计，需要我们多思考、多总结，规范与标准不是一成不变的，设计过程中要与业务、产品、前端多沟通，才能够做出体验更好的产品。
作者：陈小花儿 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在设计一个产品的时候，我们要透过现象看本质。
我们是为谁？解决什么问题？分析的结果将直接影响到方案的好坏。 这里推荐大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一种思考方法，也可以说是一种场景创造分析法。
5W1H分析法包含如下几个方面：
Why：为什么要做，是原因。
What：做什么、做成什么，是目标。
Where：在哪儿做，是地点。
When：什么时候做，是时间。
Who：谁来做，是执行对象。
How：怎么做，是方法。
通过上述分析我们可以（假设）知道：我们的用户是技术人员、基层管理人员；做这个页面的目的是为了让用户随时掌握各项工作的进展情况，快速进入需要处理的工作事项。 根据结论可以得出工作台是一个导航页面或者综合管理页面，它是用户感知产品价值的重要“门面”，使用者有一定的经验，属于高级用户。从设计角度来看，首页工作台是整个系统规范与视觉风格的核心场景。
主要是技术人员、基层管理人员
P0:各类数据指标的汇总、我的动态
p1:总量趋势、数据排名、操作汇总
p2:分发汇总、待办事项
重点突出、简洁、清晰
下面这张图是产品给的原型，也是B端面试题中经常会遇到的题目。如果你打算就按照产品给的原型直接做美化，那估计很难被选中。
做需求分析的目的之一就是为了做信息处理，这里要提到一个词叫“屏效”。B端产品我们都知道，目的是“降本增效”，在合理的信息布局下尽量利用交互等手段让页面缩短。
比如：上面原型中有两个top10排名，如果一行展示会比较拥挤，也体现不了top10排名。考虑“易读性”我们会放两行，但这样又占据了屏幕空间，在与产品沟通后我们把它整合到一起，利用按钮组切换进行查看。同时排名也是业务人员需要关注的，所以我们把它们往上放。
顶部个人信息内容比较少，也没必要占一整行，我们把它移到右边；各类指标因前3个是不能点击的，为了和后面可点击按钮做区分，我们整合到一个卡片上；待办事项与产品沟通后说不太重要，移动到了最下面，操作汇总模块往上移；
到这里模块之间的信息优先级基本处理完成，下面就要对单个模块进行拆解处理。
首先我们要观察哪个是：重要信息、次要信息、辅助信息，上面我们提到了“效率”，把重要信息突出显示，就是为了让用户一眼就能看清，不需要去寻找或被次要信息干扰。
最后一个模块原型上只有一个标题，这真是验证了一句话：“巧妇难为无米之炊”，所以又去找产品沟通，为什么单个模型可以点击查看更多？用户在这个地方想要获取什么样的数据？
经过一番沟通，拿到了一些“米”，巧妇终于可以干活了。为了体现“易发现性”，我们在后面这个模块上加了一个详情按钮。
其实上面的图是我处理过的，产品的原型可不长这个样子，模块大小、间距都是随便给的。你如果也按照产品给的原型模块大小做，估计研发会“骂娘”，因为这样没法按照比例进行换算，也就没法做自适应。
这一步主要就是做栅格化处理，我们需要定义每个模块的占比与间距。B端产品通常选用24栅格布局，也就是24栏+23水槽+2页边距。
我遇到的工作台页面有两种，一种是带左侧树，一种是不带，这两种对应的栅格化数值不太一样。 按照目前常用的尺寸1440*900来计算：不带左侧树我采用的是1440=2*20+43*24+16*23。
如果大家做的是带左侧树，可以参考下图数据
重点来了，我个人觉得这一节才是工作台、数据分析页面的核心，但很多人都忽略了，觉得不就是几个图表，唰唰唰一下就搞定了......
上面我们提到过B端测试题给的都是原始数据（表格），需要设计师自己根据数据找合适的可视化图形进行展示。
如果你对可视化图表不熟悉，不知道什么时候该用柱图、折线图、饼图；不知道随时间变化该用什么图形；不知道体现排名的数据该用什么图形。那你很难输出一份有理有据的作品。
因图表类型太多，详细的留到后面文章讨论，这次只对原型中使用的到图表进行分析：
柱状图是常用的数据可视化图形之一，可用于随时间变化而产生变量的数据统计，也可用于数据类别的对比、排名。
如图，柱状图能展示知乎文章观看者地域分布，也能反应出不同时间段的情况，并通过图形能够快速了解 分布最多和最少的省份。
优点：
人眼对长短（高度）比较敏感，可以直观体现数据差异性。
缺陷：
分类过多时数据的展示效果会降低。
能把图形视觉与体验都兼顾好，才能体现设计师的价值。 设计师的能力不仅体现在技法上，更多的是体现在思考能力上。图形扩展性设计和创新性设计都需要设计师做缜密的思考，只有这样才会有出彩的设计结果。
信息层级：
视觉展示：
2个人站在一起我们除了对比高度、颜值，还有会对比胖廋。那么，柱状体的粗细和间距如何定义呢？ 在图中，中间柱状图的柱子间距过于疏散没有规律；右边图中的柱子间距又过小，视觉上显得拥挤，并且当分类过多时，过小的间距会导致柱状体之间没有独立性，不易阅读。
定义柱状体的间距可以用5分原则设计法，即柱子之间的间距为N，左右两边与柱子之间的距离就是2/N。 如图所示。这也是很多界面设计中常用的技法，其原理就是接近黄金比例，视觉上较为舒适。同时，在保证界面元素整体协调性的情况下，尽可能把柱子的宽度设计成N，这样视觉上最为协调。
另外，在设计图形前，设计师最好能了解到真实数据，这样才能结合真实的数据来设计图形，尽可能还原落地后的样子。在图中，图形的设计和落地后的样子存在较大的差异。问题就出在设计前设计师没有了解数据的真实情况，前端工程师按照设计图把X轴的数值固定了。
相似图表：
堆积柱状图：堆积柱状图可以展示两个或多个数据的变化，以及数据之间的综合比较情况。
分组柱状图：分组柱状图可以在同一数轴上展示各个分类下的不同分组数据。
有序柱状图：与有序条形图一样，有序柱状图也能呈现数据的排名情况。
折线图常用于表示一个连续时间段内数据的变化趋势，主要功能是能够清晰地反映出数据随时间变化的趋势。
如图，折线图不仅能展示不同月份的价格趋势，还能清晰呈现数据的峰值和低谷。折线图也可以是多条线，用来分析多组数据随时间变化的趋势及数据间的趋势比较。
优点：
直观反映数据变化趋势
缺陷：
无序的类别无法展示数据特点。
折线图可以用于展示数据的趋势变化，通过折线的起伏波动可以帮助人们探究数据背后的逻辑。但如果折线图的设计不够合理，在视觉上会让人产生错误的认知。在图中，有的折线图的刻度值设置不合理，如中间折线图的刻度值未从0开始，导致折线的呈现夸大；右边折线图的刻度值过高，趋势变化呈现过于平缓，这些都是在不客观地表达数据。正确的方式应该是刻度值从0开始，随着数据的增减，刻度值也做相应的变化。
视觉展示：
在折线图设计中，还需要注意折线的粗细要适中。在图中，其中一条折线过细，这会降低数据可视化的表现；另一条过粗，就会损失折线中的数据波动细节。在产品的图形设计中，一般网格线和起始线都是1像素，折线一般用2像素，这样的粗细会有较好的视觉表现。
相似图表：
阶梯线图：线在数据点之间形成一系列步骤。
面积图：与折线图唯一不同的是，其自变量数据和坐标轴之间有颜色填充，这样能更加突出数据的趋势变化。
提到数据的占比，相信你第一个就会想到饼图，主要用来展示数据分布情况。 饼图是展示占比数据最直观的图形，通过弧度大小来表示分类的占比多少。但饼图有一定的局限性，当占比数值接近或占比分类过多时，在视觉上就不容易辨别各个类别占比的大小。在数据可视化产品中，因为饼图是大面积的色块，视觉上会非常突显，很容易抢走重要数据的风头，所以使用时要酌情考虑。
优点：
直观显示各项占总体的占比，分布情况，强调整体与个体间的比较。
缺陷：
分类过多，则扇形越小，无法展现图表。
每个图形都有自己的设计规范，如当饼图分类过多时，一般不把文字放在图形元素上，因为一旦出现几个相对较小的占比数据，字就很容易溢出，不容易辨别指向的分类，如图中的右图所示。好的解决方案就是，在图形的外围用引线指出分类数据，或者加示例图展示。
视觉展示：
另外，饼图的分类最好从12点钟的位置开始，这样较为符合人的阅读习惯，即从上到下、从左到右，如图中。如果饼图随意从不同位置开始展示，就会缺少规范，这样当多个饼图同时展示时容易出现混乱。
同时，在饼图的分类中如果没带排序，如1月、2月……，那么占比最好能够从大到小依次排列，这样还能直观地呈现出分类的排名情况。任何时候，如果有“其他”这项分类，无论其占比多少都要放在最后，因为其数据通常是最不被关注的数据。
相似图表：
嵌套圈饼图：用于一个指标在不同维度的占比。
跑道图：看到占比的同时，可以直观看到指标在当前维度下的排名情况。
表格看起来简单，但想设计好也不是一件容易事。通常我们见到的（产品中）表格都属于比较简单的表格。
在BI系统中有一些复杂的表报，如果直接用组件信息会很难阅读。我们需要对表格的视觉进行调整，让信息获取更高效，这就需要一些设计技巧和原则。
而图中（上图）的项目名称长短不一，居中对齐在视觉上会使切入点呈现“Z”字形，影响阅读效率。左对齐可以使线性结构在视觉上不跳跃，阅读流畅且更具美感。表格中的数字需要右对齐，因为当我们在面对一个长数字时，一般会从右往左读。比如数字¥368,568,023.00，我们一般是从个位到最后的千万位顺序识别数字体量，有的人可以通过千分符迅速判断数字的体量，但其实也是从右到左的浏览顺序，因此数字右对齐最符合人的阅读方式。
在图中（下图），让我们感受一下数字左对齐、居中对齐、右对齐的阅读效率，以及对各个数据体量的对比感知。
文字左对齐和数字右对齐，针对的是长短不一的名称和大体量的数字，而对于文字数量一样、体量较小的数字也可以尝试用居中对齐的方式，对称的元素本身就具有美感。如图所示，通过对表格中的文字和数字的重新排版，相信在阅读效率上会有较大的提高。虽然提高了阅读效率，但这相比优秀的表格设计还差得很远，其中最明显的是表格的边框在视觉上过于突出，接下来我们继续调整。
如图（下图）所示，通过弱化边框在视觉上能够突出表格的内容。表格边框可以让信息的呈现更有条理，能够提高易读性，但在视觉层级上不能高于内容信息。
将表格的边框与分割线去掉，用留白分隔内容，无框胜有框，增大留白可以使表格更有空间感。这样的设计需要注意的是，元素的间隔不能太小，不然会显得拥挤。由于去掉边框后有些问题会被放大，比如标题与内容没有对比，因此需要增强对比，在整体上要有层次。
图中的表格加强了标题，这样看起来更有层次。强调标题的方法有很多种，不一定只是加粗字体或加大字号，还可以给标题栏添加背景，以形成对比。
如果在一组数据中有重要数据和次要数据之分，那么就需要在对重要数据的设计上着重突出，表格的设计同样如此。图中所示就是把重要的数据信息通过增加背景色与其他元素形成较为突出的对比，这种设计是一种为用户做选择的设计方法，容易让用户的视觉停留在他本想重点关注的地方。
由于人们常常会对熟悉的事物产生审美疲劳，因此设计中有创新才容易给人眼前一亮的感觉。
下图在背景上面给了一根横线，来凸显这一列的数据，这样除了可以加强信息传达也可以打破常规的表格样式（这里只是提供一种思路）。
表格数字最容易出问题的是数字字体的运用，因为很多数字字体不是等距设计，比如数字“1”所占的字间距面积要小于“8”的。如果遇到一组大量级的数字，就有可能会误导观者。
如下图所示，本来32,118,116,00大于28,558,363,00，但由于不同数字所占宽度不一样，这样的设计在视觉上容易误导用户。因此，表格中的数字要使用表格字体，因为表格字体每个数字所占面积一致，这样就不会出现案例中的问题了。
其实很多表格里面的数字字体都存在类似问题。下图是修改数字字体后的设计，这样就能客观地呈现数据了。
表格中常用的字体有Roboto、DIN、微软雅黑、思源黑体、宋体、苹方字体等。
四、视觉设计
参考631配色法
对有含义的颜色要谨慎使用，例如：红、黄、绿
常用的图标分为两类：
工具图标：包含一定产品功能隐喻的简化抽象图形，代替文字节省界面空间，方便用户理解，常用于b端产品里面。
如图，里面来自不同产品的图标，虽然表现形式不太一样，风格不太一样，但都是为了体现图标后面文字的意思。
装饰图标：主要目的是用来装饰界面的视觉元素，样式大于功能，常用于产品宣传、活动等页面。 如图，云计算、大数据相关的产品，语义都比较复杂，很难通过图标去表达，既然看不懂，就抽象点。
在 B 端产品中，应用最广泛的还是工具图标。 可能有人觉得工具类图标太简单了，它是看起来简单，想做好一点都不容易。
首先要保证“一致性”， 粗细一致、圆角一致、透视一致、大小一致，同时还要把语义用图形表达出来。
一般采用8的倍数：8、16、24、32、40、48、...
12px、14px、16px、20px、24px，可采用“回退机制”
作者：夜莺YEAH
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文从What和How两个部分阐述如何输出清晰有效的设计方案，为大家建立系统的设计思路提供帮助。
很多初入职场的设计师在审美和平面图形基础上都比较扎实，对软件的操作也出神入化，单个方案的界面视觉表现完成度和细致度也没有太大问题。但却往往在实际输出项目方案的时候碰到瓶颈，方案反复地修改还不尽人意，设计能力无法得到质的提升，晋升的脚步也从而停滞。
本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案，希望给大家一些建立系统性设计思路的启发，帮助大家更好地输出设计方案，为决策设计方案提供更有力的参考。
WHAT: 什么是清晰有效的设计方案
首先我们需要对清晰有效有一个整体的认知。所谓清晰，从字面上理解是指看得很清楚、明朗，设计层面来说就是方案能做到方向明确，方案明了。而有效字面上指的是有效果，有效力，从设计层面来说就是输出的方案可以解决存在的问题，能达到设定的目标以及可以切实落地。
清晰和有效的考量维度是不一样的：清晰更多是针对设计这一环节，在于不同方向/方案的差异度和侧重点；而有效则更多需要联合设计上下游（用户/产品/开发）。对于优秀的设计方案来说两者相辅相成，缺一不可。
接下来我们来详细拆解什么是清晰和有效。
1.清晰 - 方向明确，方案明了
——————————
很多设计师对方案输出的数量有个认知误区，认为设计方案越多越好，可以给老板、合作方更多选择，往往不假思索地用大量的时间输出所有可能的方案，并拿出来让别人评审，认为把所有的可能性列出来就不会错，这正是对方案清晰性缺乏认知的表现。
在设计最初期，不要着急动手输出界面，先结合目标（近期目标和远期目标）综合考量，系统性地思考有哪些途径达到目标，确保所有实现手段的方式都有考虑到，并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归，才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度，只有清晰的思考方案才会创造无限的可能。
用案例来让大家对清晰这个定义有更具象的认知：
相册小程序Logo这个需求的目标是需要突出相册元素，并强化品牌识别度。
这是设计师输出的Logo提案初稿，虽然输出了28个方案之多，但没有设计思路的规划，想到哪就画到哪，很多方案是重复的，还有一些方案在设计初期就应该Pass，设计的整个细致度也不够充分。
于是设计师对设计方向重新进行规划整合，按照输出形式重新规划了分类。
按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。
我们重新回顾一下这个需求，28个方案 VS 4个方案，设计师需要的不是尽可能输出多方案的能力，方案越多可能表示你在错误的道路上越走越远，需要的是通过前期系统的思考能一次把方案做对的能力。
2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案
——————————
很多设计师拿到产品需求会立即动手，认为满足了产品这个角色提的需求便是好的设计输出，或者把方案出的天花乱坠，当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标，以及方案是否能平稳落地这三个维度。
解决存在的问题—从问题出发
我们在实际输出方案的时候，不能从产品经理的需求文档开始，而是要把考量维度更前置，从项目现有的问题出发。这个问题的搜集包括外部用户的反馈，内部团队的声音，但需要注意的是用户的反馈不一定是真正的问题，需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑，这种属于用户感受，我们可以再深挖一下用户觉得丑的原因，是不是改变了太多用户习惯，但又没有给用户真的带来更好的体验和更多的收益。
能达到设定的目标—从目标启动
问题还需要结合目标一起考虑，解决问题的思路并不完全等同于目标，目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯，大批用户投诉，但如果这个新Tab是符合我们目标的，我们不能为了短期解决用户投诉把这个Tab下掉，应该继续观察用户在这个使用过程中碰到了什么问题，解决实际操作中碰到的问题。
用案例来让大家对问题和目标有更具象的认知：
我们需要优化QQ空间的为空界面，首先我们梳理下现网存在的问题，风格整体比较老旧，很多图形表意不明确，新出模块就会有新风格，所以存在很多不统一的地方，空间整个业务有一百多个为空界面，导致开发也不清楚到底应该怎么用，用什么，所以很长一段时间是处于乱用的状态。
接着我们梳理了这次优化的目标：
1 界面统一，用户能对表意感知明确（解决现网问题）
2 强化QQ的品牌
3 做成基础组件，保证复用性
4 低成本开发
确定了优化目标以后我们没有马上急于尝试风格，而是先遍历了所有为空异常页，整合了所有场景最后梳理出八种情况，这八种情况可以覆盖所有的为空场景，梳理整合场景是目标1、3、4能实现的前提。
然后我们基于这八个场景来输出设计风格，要低成本开发，所以这里没有考虑加动画，用企鹅剪影结合具体的场景来表意，不仅强化了品牌，也能做到表意清晰明确。图形定好以后我们马上也输出了规范，Push给对接的开发同学方便调用。
在输出方案过程中，始终都要紧紧贴合问题和目标，避免无效设计。
能落地的方案—技术可以实现
在输出设计方案的时候，设计师需要考虑到开发成本是什么，需要消耗多少资源去实现这个需求，最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小，我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力，最后也只会是设计的自嗨。
用案例来让大家对清晰这个定义有更具象的认知：
产品提了好友生日推送礼物的需求，目标是想用生日这一比较温情的场景去设计专门的祝福页，用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片，从实现手段的难易规划了三个方向：
A 手势交互但开发难度大: 3D手势交互动画
B 趣味动图且开发成本适中：局部小动画
C 静态但开发成本低：全静态视觉，复用已有开发流程
最后团队对齐了人力成本，决定采用方案C，把设计精力放在本身卡片的表现上。
HOW: 如何输出清晰有效的设计方案
那如何才能输出清晰有效的设计方案呢？设计方案归根结底是思维方式的具体体现，输出清晰有效的设计方案最核心的点在于体系化的思考方式，我总结了一下几点：
1 拓宽边界
——————————
拓宽边界需要设计师站在更高的视角和有更广的视野，把设计从表现和执行抽离往前后延展，在整个设计过程中往前去挖掘需求和规划产品结构，往后做到把控和沉淀，能站在上下游各维度去Review整个项目，只有站在更全局的视角审视，才能跳出片面设计的维度。
2 转换视角
——————————
从不同的视角看待问题，学会拆解问题和解决问题，从产品/开发不同的角度来全盘看整个产品，分析这个需求的投入产出比是不是足够，是不是能达到目标（包括设计目标和产品目标）。设计、产品、开发从来都不是对立的，都是不同角色为了整个产品发力。
举个例子，产品同学觉得输出的方案不好看，是在用感性表达，我们可以尝试继续拆解不好看背后的原因，比如是不是核心内容不够突出、担心按钮转化率等，一开始就抱着产品不懂设计这种想法是没有办法解决问题的。
还有一个就是用户同理心，很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题，比如新功能内部团队觉得很厉害，但实际门槛太高，用户根本不知道怎么操作，而我们长期体验这个产品反而忽略了产品的易用性。
3 结构思维
——————————
我们在启动项目的时候，不要单点去看要在某个页面要做什么改动，而是从问题入手，和产品同学对齐好目标，结合设计理念，最后找到发力点在哪里，循序渐进，这样很大程度上能避免项目的反复，对设计流程的准确把控也是输出优秀设计方案的基础。
举一个日常生活的例子帮助大家理解，比如我的问题是长得丑，我的目标是要变得更年轻漂亮，我的理念就是改善体型和优化五官，最后找到具体的发力点比如晚上不吃晚饭，去美容院打美容针、学会怎么化妆等。
4 认知创新
——————————
有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情，认为创新就是把原项目进行翻天覆地的改变，初入职场会觉得负责的业务和项目都很小，没有什么意思，其实创新的维度有很多，包括设计工作流程的优化、还有从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。
5 及时复盘
——————————
完成项目以后需要不断的总结方法，遇到的问题，除了技法层面的提升，更重要的还包括思考层面的提升。学会去总结之前踩过的坑，避免重复性的问题，比如你的输出一直存在层级不清晰的问题，那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误，但是尽量避免总是犯同样的错误，这样才能加速成长的脚步。
写在最后
进入互联网公司工作之前，我们对设计的理解更多停留在表现层面，所以对好设计的判断标准更多是好不好看、喜不喜欢。当进入互联网公司后，随着工作经验的积累，我们会发现设计不只是狭义地使用软件绘制图形，背后需要很强的逻辑和系统思考的能力、结构化的思维、沟通能力等，需要我们不断的学习补齐自己的短板，及时转换职场心态。
文章来源：站酷 作者：腾讯ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：在产品中，有某些情况是客观存在但却极少出现的，这就是产品中的边缘情况，而边缘情况的发生会影响用户的使用体验，因此产品设计时需要考虑到如何应对边缘情况的发生。本篇文章里，作者就边缘情况的类型、应对策略等方面做了总结，一起来看一下。
作为一名职场中合格的交互设计师或产品经理来说，避免在工作中出现遗漏各种边缘情况的考虑，与规避在方案评审的时候会遭到评审会中其他同学的各种diss的尴尬，是评判交互方案和交互设计师活好不好的重要评判指标。
所以，产品设计方案好赖看产品和交互的能力，产品和交互能力的好赖不得不看边缘情况怎么处理了。
交互设计其实是“向好避坏”并行的设计过程，向好设计是要追求绝对的好，结合实际情况竟可能保证产品体验的舒适和惊喜，这是产品设计一定要为用户的极致体验需要负责的；避坏设计是相对的坏，结合实际情况尽可能为一些低频场景的极端情况做好容错方案和机制，这就是产品设计中常常提到的边缘情况处理设计。
从产品角度来讲，边缘情况是在用户使用APP的时候，极少会出现但是又客观存在的、会极大影响产品使用体验的一些不可控场景，这是区别于需求功能设计的一种隐性问题。
边缘情况的出现往往是和硬件设备、系统、技术和使用环境有强关联的，和产品需求或交互设计本身关联较小，但是也有一些极少的场景，之后我们会给大家举简单的例子作为解释。
iOS 14 中遇到的边缘情况
对于所有的边缘情况来说，其实，不管哪一种因素导致的不可控的情况发生，作为交互设计师或产品经理来说，我们都可以用严谨的逻辑来将意外的边缘情况预先做出优化处理。
但是通常在产品设计的时候，边缘情况是很难被我们通过设计方法所避免的，同时，边缘情况也会随着网络技术、硬件设备、系统及技术的变化而变化的，而且有时候业内也会将“解决边缘情况问题”的能力作为一个产品经理或交互设计师是否有经验是否资深的一个评判标准。
所以，在日常的工作中，能主动应对或者在输出需求和交互方案时，可以先入为主地考虑和走查自己是否考虑到边缘情况的处理机制就显得格外重要了，这就是区别你和普通产品经理或交互设计师的一个直观评判标准了。
关于边缘情况的解决方案大致可分为3类。
该解决方案是相对研发成本最低的一种处理方法，但是，对于用户来说，体验感是最差的。这类解决方案往往以dialog或toast给予用户错误提示，如下图抖音断网提示：
抖音 v15.4.1
这是遇到边缘情况最常用的一种解决方案，也是一种比较“中庸”的方法，可同时坚顾研发成本和用户体验的平衡，也是对于一些环境主导的边缘情况的最佳解决方案，因为环境主导型的边缘情况有时候只能用户自己解决，APP是没有办法真正避免的。
该类解决方案往往会给出用户具体的解决步骤，如下图微信断网提示：
微信 v8.0.4
该解决方案应该是对用户体验最友好的解决方法了，这就是一种难受自己、满足用户的“自虐行为”，它可以在最大限度不干扰用户的前提下，默默处理掉一些突发的边缘情况而用户却毫不知情，但是这种解决方案就会加大开发成本和损耗研发人员的大量脑细胞了。
这种预先做好planB的处理方法通常用户是对已经出现的边缘情况无感知的，比如微信（v8、v7）的朋友圈评论处理机制，在断网或弱网情况下，用户评论或点赞朋友圈是没有任何断网弱网提示的，这是因为微信将用户操作数据保存到本地，等有网的情况下再次请求数据知道评论或点赞成功为止，这样就很好地避免了打断了用户评论和点赞行为。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com