案例来源于真实的工作！
大家好，我是灰大设计团队的 灰色执照~
今天我们给大家带来一些干货，手把手的教你做好B端设计。
我们的案例，不停留在那种空泛的理论上，而是手把手的直接修改我们微信群群友的作品。案例来源于真实的工作！
当然，每个人的学识、成长的环境、学习到的设计方法、方方面面都不同。灰哥不能保证自己的设计就一定是对的。但是，灰哥将把自己多年的工作经验应用到这个案例上，我们不要太过于扣字眼，更多的是 学习一种思维的方式。或者说是看别人做设计时候不同的想法和过程 。
如果灰哥的修改过程能给你带来一定的启发，就说明这篇文章还算有价值，能够真正帮到你。
开始之前，我们先交代一下背景。介绍一下我们今天到底要修改的是什么案例。
▲ 案例来源于微信群友的实际工作
▲ 这就是我们今天要修改的案例了，本来顶部还有几个一级菜单，右上角还有个返回主页，但是保密需要，原作者稍微处理了一下，才给我作为案例。
开始需求之前，在我无法去沟通需求的时候，我们首先要 先普及B端的一些基础知识。
这个B端界面我应该做多大？
答案： 1920*970
通常来说，你要是明确你的用户是谁，比如调查后，你发现都是带着1336*768尺寸笔记本出差的用户。你当然应该使用他们笔记本的尺寸为设计稿了。但是，在我这种不明确需求，以互联网（宽泛地）用户为主的设计情况下。我通常会以参考“ 百度流量研究院”的统计数据为设计参考。
▲ 这就是百度流量研究院，他统计了很多有价值的信息，包括互联网用户使用的操作系统，手机型号，分辨率、上网时间分部、用户画像等等。进入灰大导航，可以去“ 百度流量研究院”看看。灰大设计导航地址：https://www.pslkzs.com/nav.php
▲ 进入百度流量学院，你会发现PC端上网的用户占比最高的还是1920*1080的分辨率。
因为使用最多的是1920*1080的分辨率。chrome浏览器和Edge浏览器顶部有70像素，Windows底部状态栏有40像素。因此 1080 – 70 -40 = 970 像素。因此，B端的设计稿，我最常用的就是以： 1920 * 970 来做设计。
▲ 这就是高度的详细计算方法了。
当然，有了百度流量学院的统计数据加上我的公式，我也可以很自然的说服我的同事，详细的说明给我的领导或者甲方，我为什么要这么做。咱们要做到有理有据，工作力求严谨。尽可能给别人“专业”的感觉。至于是不是真的专业，其实不重要（笑）这就像是原研哉大师给小米设计的Logo一样，那些超椭圆之类的概念我认为一点也不重要，能让甲方心服口服付款200W那才是王道。
顺便说个题外话：阿灰虽然在微信群里面经常讲笑话、说段子。但是过去我作为设计师的时候，从来都是不苟言笑的。这样方便我更好的开展工作，树立好“专业”的印象。设想一下，如果你是领导，你会把重要的任务、更高的岗位给那些嘻嘻哈哈，每天说笑话的下属吗？
咱想要获得晋升，想要涨工资，在职场中最好还是不能太放飞自我~
▲ 小尺寸笔记本里面，1336*768占比非常大，1280*720的笔记本也占了4%。所以最小尺寸，我一般考虑的是1366*768。如果需要做得更严格一点，我也会尽可能考虑有价值的信息都在1280px内。当然，如果你们家的程序员要是水平还可以，态度又比较认真，项目也不着急。你们还能用到“媒体查询”这样的技术，在1920+的宽度下呈现一种效果，在1280下又可能呈现另一种效果。
拿到微信群这个同学的界面后，我的第一反应是：他这种上下结构的框架，并不够好。如果可以，我更喜欢Ant Design那种框架用来作B端设计。如果是我设计，我肯定会将界面套入“上-左-右”结构的那种框架中。也就是灰大设计导航的那种结构里面。（其实实际工作中，你大概率是不能改动框架的。程序员都很懒的，啊，不对，程序员小哥的工作强度很大，工作任务很重，你这种大刀阔斧的修改，会让他想抽出他那40米的大刀）
▲ 我比较生硬的把图丢进了灰大设计导航内。通常顶部是logo+一级菜单，左侧是2级菜单。如果有，左侧还可能有3级菜单。过去我的工作中，我用的最多的框架就是这种。在B端设计里面，我往往最喜欢直接套用这种模式（因为他比较成熟）。这里我就不把顶部改成“菜单1”、“菜单2”了… 做过B段的同学，明白意思就可以了。
我们刚刚了解了最小分辨率问题，把内容设计到“安全区域”内就变得尤其重要。看了下面这个图片，你可能就对这个概念更加的清楚一些。
▲ 明白最小宽度以后，这些查询条件的长短、换行问题你都要开始考虑了。输入框或者下拉框的宽度很有可能要根据实际情况合理化的去调整它。在这个例子中，对于“月度”这个字段的表单我是肯定会缩小他的宽度的。其目的也就是为了节约宽度，让尺寸较小的笔记本也能很舒服的看到所有内容，不出现错位等情况。
套用这类型的框架后，我们又该把左侧宽度设计成多少呢？
答案： 208像素
在二级菜单不是特别长，或者特别短的情况下，我都会设计成208像素。为什么不是210或者200像素呢？
因为Ant Design设计的B端框架里面，它就是208像素。
▲ 我用坚定的眼神看着项目经理 / 领导 / 甲方爸爸，告诉他们国内最知名的B端框架，来自阿里巴巴设计大厂的研究结论，就是把B端的左侧设计成了208像素。我们不需要花更多的时间和精力再去研究他为什么是208，我们要做的就是站在巨人的肩膀上。享用前辈们用心分享的干货！（ 潜台词：我借chao鉴xi的是阿里巴巴，你比阿里巴巴还牛？）
当然，这个招数还可以使用在其他地方。其实 灰大设计导航已经替大家伙整理好了各个大厂的设计规范。你可以借鉴任意一个，并且用同样的话术，坚定的告诉你的甲方。为什么要设计成***像素的左侧宽度！
▲ 灰大设计导航地址：www.pslkzs.com/nav.php
好了，有了这些基础概念以后，我们开始具体看这位同学的问题。仔细观察这位同学设计的界面后，我发现了一个严重的问题： 同学们往往很在意把界面设计得漂亮，把时间和精力都用到那个方向上了，但却缺少一点儿产品思维，很少去仔细阅读每个具体的“字段”（字段就是表格标题上那些：单位、序号、类别、已完成、目标……）。一旦产品 / 领导 / 上游程序员 给了他们他们原型图后，他们只是依葫芦画瓢，很少有自己的思考。
在B设计的过程里面， 大家一点要记住一个核心的概念：界面的合理性 > 界面的美观
我这里不是说把B端界面做漂亮不重要， B端同样需要你把界面设计得漂亮。但是他的前提是： 你先要把界面设计的逻辑没有问题，确保它阅读和使用起来是合理的。其次才是美观。
那么这个同学的问题到底在什么地方呢？我简单的列举了一下：
▲ 随便一看，就11个地方。这说明我们同学平时做设计的过程里面，肯定比较少有自己的思考。
接下来，我们逐个拆解，且听我娓娓道来~
01、数学符号多余，应该想办法换一种形式。
在过去的工作过程里面，我几乎没有见到过这种用数学符号+起来简单粗暴的方式。我做设计有一个原则，几乎不自己原创东西。我通常更愿意用成熟的、别人使用过的方案。这种做法比较保守，但是也相对不容易出错。
02、不够直观
首先，我对这里的“级别”这个字段有很大的疑惑，我认为应该是：“状态”。因此，我一定会先去和程序员或者产品确定这个疑问。其次，一共就3个状态，下拉框的形式既不直观，又要点击两次。此处选用“按钮组”肯定是更加合理。
▲ 一眼就能看出所有选项，又只需要一次点击操作就可以切换，此处用按钮组（Button Group）组件肯定是比下拉框要更合理得多。
当然，很可能此处也未必是单选，是否有同时选择2种或者2种以上状态的需求呢？如果有，那就要考虑多选框了。
▲ 如果需要多选，那么应该应该选用这种方式。所以此处也应该找产品 / 领导 / 程序员确认。从当前的界面来看，我认为使用方案一按钮组就足够了。但是我依旧会多和同事沟通，去把这两个方案都拿过去问一遍。
03、模糊查询通常在最左侧（或者最右侧）
模糊查询作为用户最有效获取信息的手段之一，优先级通常较高。一般都在最前面（最左侧）
04、按钮之间过于平均，没有重点
多个按钮并排排列的时候，通常都有一个叫做primary的按钮。意思就是首选按钮。这一行这么多查询条件。“查询”按钮很明显要比“导出”和“清空”级别要高，更为重要。
▲ 首选按钮、次要按钮、其它按钮（小技巧：如果按钮实在太多，放不下，可以藏到…里面）
05、序号感觉意义不大，没有什么作用。考虑去掉
存在序号的列表，很多都是把序号放到最左侧，方便观察在第几行。此处表格存在合并项。需要出现的意义感觉不大。可以考虑hover，高亮选中行的样式。让用户不会看错位。
06、把金额在一个表格中显示一半背景彩色太怪异了。
通常都是填充整格背景色，这种半格填充既不好看，也比较奇怪。
07、并且重复的单位可以放到表头。
表头可以直接改成： 已完成（万）类似这种形式
08、完成的目标目标也应该有金额
除了单位以外，这种金额的表头，最好加上排序。用户通过点击，可以直观的看到哪个部门效率最好，哪个部门销量最差十分有必要。
▲ 涉及这种数字的，最好要有“从高到底”和“从低到高”的排序按钮。
09、同比一般情况下是指今年第n月与去年第n月比。
同比的结果肯定是数据增长了或者降低了，这种情况下，是否要考虑表头排序。这都是需要沟通的。最好害得加上上升和下降的小图标。
10、计划完成多少，也应该有单位。
11、部门应该和单位紧紧的挨在一起。
不同的单位，比如都有研发部，距离这么远，很难分辨。所以把这一列放到表格第二列，也就是单位的右边，最为妥当。
好了，现在问题我都帮你一一列出来了。相信你已经知道该如何修改了吧？
我的修改办法其实就是：针对这一条一条列出的问题，逐个修改。
以下就是我修改的结果了：
▲ 修改后
以上，就是我的整个修改过程和思路了。拿到需求以后，我其实比较少去考虑如何变漂亮的问题，而是去仔细分析合理性问题。大部分时间花在逐个去研究表格里面的每个字段的问题。在这个案例中，“同比”这一列我甚至还自己加入了百分比。这些都是出于我自己独立的思考。依旧需要去确认和沟通。
设计只是服务性的工作，如果领导/甲方看到这个设计稿后，有不认同的地方，我会更愿意尊重他们的意见和建议。因为这个稿件和说明就是我作为设计师思考后给出属于自己的最终方案了。至于甲方爸爸有自己的任何不同的意见，我都马上按照他的意思修改。和其他人不同，我不会花时间去说服他。我会第一时间遵从他（也许是我做设计时间久了，疲劳了。不再愿意争辩了，大家不要学我，我是老油条）。
最后，我还要说一些细节
这个图片还不能作为最终稿，但是目前可以拿去和你的领导/产品/程序员讨论了。我对“目标”和“计划”这2个字段是否重复有些疑惑。做设计，沟通应该放在首位。及时的沟通和及时的纠偏是非常有必要的。
其次，我经常看到有的同学对设计稿的字段重复的复制，比如姓名是“张三”，那么他每一行的姓名都是张三。尽可能贴近真实数据的文字组合，也是非常重要的。在测试中，我们还有一个说法就叫做：边界测试。好比是文字如果太长了，你该如何显示？所以， 认真的对待每个字段，不要什么都复制成一模一样的，尽可能的给别人专业的感觉。实际上，现在已经有很多这种效率工具，你可以利用它自动填充字段。
我自己使用的就是《内容填充助手》
▲ 这是《PS内容填充助手》的简单演示。
▲ 这是《Xd内容填充助手》的简单演示。当然，它还有Sketch和Figma的版本。
你可以根据你的习惯和需要，在这里下载到 Ps / Xd / Sketch / Figma 版本的《内容填充助手》
它们真的很高效、很好用。也会让你的界面显得更加的专业。
下载地址：https://www.pslkzs.com
好了，今天的分享就到这里了，像这种直接拿着群友的工作稿件直接修改，相信很少会有人像我这么干。不管我修改的结果你是否满意，更多的是分享一下我的修改思路。当然，我也鼓励你们对这个案例进行自己的思考和修改。也可以加入我们的微信群，大家一起讨论更好的方案。学习、总结、输出，也可以靠一群人一起努力。
说实话，转型成程序员后，我已经好久没做设计了，真的感觉好累。如果能让大家觉得有收获，那样才值得，看在又码字，又改图这么辛苦的份上，恳请大家，把阿灰的这篇文章 点赞 + 分享 ，让更多的朋友来学习吧~
Powered by Froala Editor