在做B端项目的时候，总是会出现一些“你这是在为难我胖虎！！”的时刻（ 真让人头秃。）
孙子兵法有言：“知彼知己，百战不殆；不知彼而知己 ，一胜一负；不知彼，不知己，每战必殆。” ——《孙子·谋攻篇》
所以！！孙子胖虎我决定今天就年更一篇关于B端设计的设计宝典，今日宜打工，停止摸鱼～
本文主要内容包括：
1、如何选择设计尺寸？
2、布局类型主要有几种？
3、各个布局的特点是什么？
4、针对导航栏设计，主要的风格的配色有哪些？
因此，打工人反背锅第一步，我们先来聊聊 尺寸（分辨率）。
其实，用多大的尺寸，从理论来说，这个数值并不是一个唯一的、绝对的、一成不变的，只是说找个相对适合的。尺寸主要是会影响到信息内容的展示。常见的例子就是在不同分辨率电脑下，一屏的可视窗口宽度、高度是不一致。
这就导致：有的页面是要求一屏展示完内容的，大屏上是恰当的，完整的。但是在小屏上看就需要上滑来进行完整查看；或者小屏横向被挤压出现滚动条，体验和适配感并不好，尤其是给到客户使用体验的时候，
所以说，选择合适的画布尺寸是非常重要。
1、如果你的产品是定制化产品：那可以做个前期的调研，通过统计客户的使用分辨率占比来去定义好设计尺寸。
2、如果没有调研的机会，那首选通用型的尺寸，可以参考大厂 1440*900（站在巨人的肩膀上） 取中间值，能向上适配1920*1080 以上的大屏，也能很好的向下适配小屏。
布局是反映 导航区 和 内容区 之间的层级关系，不同位置构成不同的布局。
导航栏 默认状态下为固定结构，内容主要包含：“品牌logo/系统名称+菜单功能入口+其他功能操作”，反映了模块与子模块之间的从属关系。
① 图标+文字（常用）
【优点】：这个组合方式中在后台界面中比较常用，正确传达信息的同时，还可以丰富画面，兼顾表意与美观。
【缺点】：成套的图标的制作会存在一定工作量，有时会碰见意思相近的菜单或者难以表意的菜单名称。举些名词例子：委外核价，委外核价查询，主生产计划，物料需求计划，样板管理……诸如此类的业务名词，本身并不好用图标去展示。
针对上述难以用图标表示意思的模块，就轮到这种表现方式上场了。
【优点】：这种纯文字的表现方式表意直接，注重业务和效率，对于开发来说，工作量小。
【缺点】：美观度上会逊色些，如果菜单数量对，且多级的话，难以区分主次。
常见场景：
纯的图标可能会造成用户的理解偏差，此表现方式常为“图标+文字”形式的折叠后状态。
若要使用纯图标作为导航标示，表意应需要符合大众思维，图形和含义一致且清晰。各菜单意义区分明显，建议搭配悬停的文字浮层提示。
菜单数量：在做产品设计时，对于一级菜单的规划，菜单总数量最好符合 7±2 法则（米勒定律），减少选择，多用分组，即导航菜单选项卡建议最多不要超过 9 个，最少不要低于 5 个。多了放更多里面
当然具体情况可结合业务需求进行放置。设计讲究灵活变通，规则只是一个通用的设计参考而已，其背后的目的是为了降低用户查找菜单的时间成本，提高效率，降低记忆门槛。
【补充】米勒定律：
1956年，美国心理学家乔治.A.米勒发现，人们处理信息的能力有限，而分块有助于我们更加有效的保留信息。因为短期记忆存储空间的限制，人的大脑最多处理5至9个信息，后来该定律也被称之为「7±2法则」。它指出普通人在工作记忆的时候（工作记忆即短时记忆，它因人而异，受生理、方法、场景等影响较大。）中只能记住7±2的信息，再多就很容易出错，影响记忆的精准度。
【补充】席克定律：人在面临选择越多的时候，所要消耗的时间成本越高。
关于前端菜单展示的数量，这个还跟 用户权限挂钩。B端涉及的角色较多，每个角色被分配了不同的权限操作，展示的重点和可操作的内容并不会完全一致。
此区域主要放置系统主体内容数据，具体表现为：表单页/表格页、详情页。该区域会根据不同电脑分辨率进行响应式布局，在设计的时常常会引入栅格系统。
【扩展】：BootStrap（栅格系统），来自 Twitter，是一种基于 HTML、CSS、JAVASCRIPT 的前端框架；栅格一般分12列和24列，使用最多的是24 列栅格，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
在后台系统的应用中，常用布局有以下3种：
① 上下布局（顶部导航）
② 左右布局（侧边导航）
③ 顶部+侧边导航（强强联合）
常见的是 侧边导航 和 顶部导航，因为在对页面的浏览过程中，用户的浏览动线多为从左上到右下进行扫视，所以导航普遍被放置在页面顶部，或者页面左侧。
又因用户习惯于使用 F 式的浏览路径，所以使用频率上
左侧导航 > 顶部导航
当然在实际的系统设计过程中，其实是会根据系统的菜单层级复杂程度来搭配不同的导航方式，当但单一导航已无法承载后，则会使用 顶部导航+左侧导航（强强联合）。
But to上下布局 or 左右布局or其他，this is a question（推眼镜假装专业,走来走去）……内容决定形式，实际用什么布局，还是看系统的信息层级架构如何划分，并根据每个布局的特点来合理使用。
该布局常见于各类门户网站中，形式为内容向下延展，带来沉浸式浏览的长页面，适合于一级菜单数量较少的场景。
主要特点有以下几点：
顶部导航的多用文字为主的模块展示，二三级子菜单为通用的 下拉式 的展示方式。对于大型的下拉导航，会对子模块进行分类，然后下拉平铺展示。
对于模块较多的，通常会提供菜单搜索功能，以便快速、精准查询到对应的模块。
部分系统也会提供菜单收藏功能，针对不同角色不同的使用习惯，用户自定义收藏常用模块，以便快速、精准查询到对应的模块。
该布局常见于各类后台系统中，其展示方式更和桌面端系统较为一致。适用于一级菜单数量较多的场景，且这种导航的扩展性较高。
其主要特点有以下几点：
关于侧边栏的表现方式主要有纯文字，（图标+文字）上下排列、左右排列的方式
对于二三级的菜单展示，常用在主菜单中——点击下拉展示 或者 把默认全部展示。
这种方式信息的承载复杂度较高，适合当2级菜单所包含的3级菜单丰富，需要作为一个独立的模块展示时。常为顶部导航的升级 pro版。层级自上而下，在页面设计的时候要注意区分一级和二级的层次，同时也要兼顾统一性。
今日风格配色，已经是本文的最后一步了。系统的配色和风格是依据系统的特性选择的。经总结配色有2大类方向选择。
风格以白色/50°忧郁灰为主，搭配亮色系的有彩色系（纯色 / 毛玻璃质感渐变 / 背景图片）点缀，是记忆里永远明媚的白衣少年，唯一的纯白的茉莉花❀。
这种风格，强调专业，专注。以暗色为主，亮色系的有彩色（常用蓝色系）为点缀，黑色是他的保护色，冰冷的外表下，也藏着一颗温暖的心
OK，以上就是本文的全部内容了，针对B端设计的，其实主要还是对信息整理的一个过程。B端是面向群体，角色多样的一个系统，重效率。
对于页面的浏览大部分的需求是尽可能的展示更多有效的信息，操作讲究灵活性，可配置性
B端的设计体系要掌握还是需要深入到业务中去，希望本文能有产生帮助。
最后：再祝各位大朋友们儿童节快乐
2023年06月01日 于广州
Powered by Froala Editor
天气真好，风真轻柔
9
作品
48
粉丝
42
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册