网页内容优先设计 第1篇
用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
⦿查询模式：
用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
⦿反馈模式：
在用户提交输入之前，让他先行了解系统将如何处理他的输入。
在B端产品设计过程中，形成属于一套科学规范的设计模式很重要，能大幅度提升研发团队的确定性，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。
⦿设计方面：
完整的设计模式将会包含示例、模板、组件（ETC）三大实体部分，以及通用概念这样的黏合剂：
功能范例： 由多张模板构成，启发用户如何使用和搭建出一个常见功能。
模板： 页面级示例，启发用户如何通过组件搭建出系统中的典型页面，如：详情页。
组件。
基础组件：构成系统最基础的元素，如按钮、分页器。
业务组件/模块：区块级示例，一般由多个组件构成，如 PageHeader 通用页头。
通用概念： 一些保证 ETC 体系化的约定，如：布局、色彩、字体、文案。
⦿开发方面：
完整的设计模式还可以帮助开发者快速实现布局空间的设计决策，保障视觉稿的上线效果，同时也能简化设计到开发的沟通损耗（没有规范的沟通体验过的都知道）。
本文整理汇总了包括基础概念，产品类型，页面布局，组件介绍，设计法则，等等一些列的B端产品设计规范，在此期间查阅了很多相关的资料，希望为从事B端设计的设计师们提供及时的帮助～相对于C端行业的趋近饱和，B端行业正处于快速发展的阶段，放眼未来，投身B端设计未尝不是一个明智的选择，感兴趣的小伙伴可以多多交流～
- Posted in: Blog
- Tags: B端 , 设计系统
既然来了，说些什么？
2012-2021 © Design/Code By Vince
网页内容优先设计 第2篇
开始页面布局就要考虑尺寸划分，划分的越细致，涉及的尺寸就越多，而这些尺寸如果没有一定的原则去约束，就会显得毫无章法，难以实现视觉界面的一致性原则。想呈现出专业的设计品质，就需要保证设计文件本身的一致性以及设计文件与前端开发后成品的一致性。
8倍数原则：建立一个以8pt为单位的网格系统，利用8的倍数来规定页面中元素(按钮、输入框、图片等)的尺寸及各自间距的大小。即任何需要自定义的长、宽，marging和padding都应该是8的倍数。
很多人虽然理解要用原则约束尺寸，但还是会产生疑问，为什么是8pt，不是6pt、10pt或者其他数字？
据统计，使用中后台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。主流的屏幕尺寸大部分都是8的整数倍数。即使某些屏幕边长像素不是8的倍数，在设计中仍然可以尽量做到自定义元素的长、marging，以及padding都是8的倍数来维持设计的一致性。
网页内容优先设计 第3篇
一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
上下布局的做法是对两边留白区域进行最小值 M（Margin） 的定义，当留白区域到达限定值之后再对中间的主内容区域 W（Weight）进行动态缩放。
主内容区 W 尺寸常用的有1200px、1190px、1168px、1152px、1000px、960px。两边留白区域最小值 M 常用尺寸有24px、16px、0px。这里说的只是一般常用的动态布局参数，实际设计中一套完美的方案需要设计师具备前端视角、平面构图视角以及交互视角，并且依据所在团队产品规范来综合决定。
以 W = 1152px ， M = 24px为例，为在响应式方面保证更好的预览效果，我们在主内容区外面增加了 24px 的边距, 避免屏幕尺寸在低于 1152px 的时候内容贴边, 于是需要将主内容区域最大宽度改为 1200px，再增加 24px 的内边距 。
注：部分B端产品不考虑浏览器范围缩小低于 1000px 时的动态布局情况；部分B端产品考虑浏览器范围缩小低于 1000px 时移动设备上的动态布局情况。
顶部页头导航：承载的是品牌信息与整个网站的结构信息，明确的告知我们网站里最主要的几块内容。
⦿ 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
⦿ 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
⦿ 顶部导航高度H（header）的范围计算公式为：48+8n（n是自然数）。
页脚：Footer（页脚）作为展示页中也非常重要的一部分，在页面的最底部，包含的信息内容为：实用导航，语言选择，社交链接，帮助和支持，版权和隐私声明等。
Banner 首屏：整个展示页面最重要的组成部分之一，一般介绍产品的名称和简介，并且体现整体产品的风格走向。
banner设计宽度建议分两类：
⦿ 文字+视觉元素+纯色背景（渐变背景），视觉元素可输出3倍尺寸或者用3倍尺寸设计，多屏幕适配时缩放使用，背景区域前端用代码实现。
⦿ 文字+视觉元素+复杂背景：如果元素与背景分离，视觉元素仍旧可以输出3倍尺寸，但是背景就不能用代码去实现了，而是要用大尺寸设计输出保障多屏幕的适配效果，常用的设计宽度有1920、3840、5120。建议采用3840，1920适配高分辨率屏幕会出现些许模糊失真。
banner内容排版建议分两类：
⦿ 上下排版：1）全屏背景图；2）标题、文案和按钮与页面居中对齐
⦿ 左右排版：1）主图在页面右侧（或左侧），标题、文案和按钮在页面左侧（或右侧）；2）建议文案和button部分左对齐；
网页内容优先设计 第4篇
在多数业务情况下，B端产品需要在设计区域内利用 栅格系统 解决大量信息收纳的问题，将整个设计区域按照等分的原则进行划分，基于行（Row）、列（Column）和区块间隔（Gutter）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。
网格：栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位。
列：列是栅格的数量单位，通常设定栅格数量说的就是列的数量，比如12栅格就有12个列、24栅格就有24个列。通过设定列的内边距（padding）来定制槽（Gutter）的大小，剩余的部分称为栏（Column）。这里需要注意的是：我们把栅格的列看做是栏+槽的宽度。
槽（Gutter）：页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑。槽通常设为定值，用来确定栏的大小。如果要支持响应式， Gutter 数值要保证在8倍数，常用的有8px、16px、24px、32px、40px、48px。给页面中栅格的 Gutter 设定了定值 ，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。这里需要注意的是：槽的区域不可以放置内容。
栅格宽度（Container）：页面栅格系统的总宽度，当我们开始着手做一个项目时，首先应考虑在多大的尺寸范围内做设计，也就是确定栅格区域的宽度范围。
边距（Margin）：栅格外边距，与屏宽保持一定的安全距离。
计算公式：我们假设内容区宽度为W（Weight），栏宽为C（Column），列数为n，槽为定宽G，由于槽不可以放置内容，可以得出：W=C*n-G。
我们需要根据自己的项目确定栅格的划分数量，划分的格子越多，承载的内容越精细。通常，在信息繁杂的后台系统常用24栅格，而一些商业网站、门户网站通常划分成12栅格。
栅格不是划分的越细越好，24栅格精细，但也容易显得琐碎，内容排布的规则太多，也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格，也是可以的。
以 1440 布局的结构为例，对宽度W= 1168px 的主内容区域进行 24 栅格的划分设置，槽为定值G= 8px；那么可以得出列宽49px，栏为41px。如下图所示。
sketch用户可在布局设置里设置参数使用，非sketch用户可借助 GridGuide 布局。
对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中，通过栅格设计师和前端开发站在相同的视角，统一设计到开发的布局语言，减少还原损耗，保障还原度，继而减少沟通成本。