网页pc端设计规范 第1篇
⦿表格：
表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同，适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。
⦿折叠面板：
折叠面板通过对信息的分组和收纳，指引用户递进式的获取信息，使界面保持整洁的同时增加空间的有效利用率。
⦿卡片：
卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
⦿走马灯：
作为一组平级内容的并列展示模式，常用于图片或卡片轮播，可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。
⦿树形控件：
『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。
⦿时间轴：
垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。
网页pc端设计规范 第2篇
核心文字颜色建议使用来自于公司LOGO的颜色，增加网站与公司形象的关联性、辨识度。
正文文字颜色通常选用深灰色，介于#333333到#666666区间，增加易读性。
注释等辅助性文字建议使用浅色，例如#999999。
直接做法：选择一个符合公司形象的产品图片，在图中提炼出四种颜色，调整明度和直线色即可作为网站主页的主色调，灵活运用于不同文字。
以上就是上4个核心网页设计规范，对于UI设计师而言，了解掌握这些规范后能够更好的形成自己的专业概念，灵活运用于设计实践，在进行网页设计时，做出来的页面相对会比较美观和谐。当然实际设计时，少不了设计工具的帮助，一款好用的网页设计软件可以帮助设计师更加轻松地完成工作，墨刀便是一个原型、设计、流程图、思维导四合一的一站式网页设计工具，界面清晰、上手容易、素材丰富、操作高效。不管是就墨刀自身来说，还是与同类产品相比，都颇有优势。
原型、设计、流程图、思维导图......享受创造的乐趣，成就团队和个人
网页pc端设计规范 第3篇
根据费茨法则（Fitts’s Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
⦿实时可见工具：
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
⦿悬停即现工具：
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
⦿开关显示工具：
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
⦿其他显示工具：
如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。
网页pc端设计规范 第4篇
⦿ 按钮：
按钮按使用功能分为：主按钮、次按钮、虚线按钮、危险按钮。
按钮按表现形式分为：描边按钮、填充按钮、图标按钮、幽灵按钮等。
按钮按组合形式分为：单一按钮、组合按钮。
主按钮在同一个操作区域最多出现 1 次。次按钮是最常用的按钮形式。
按钮尺寸有大、中、小三种。若不设置按钮尺寸，则默认尺寸为中。
⦿ 图标：
在B端产品设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上图形素材极度丰富并且便于获取，很多B端开发团队往往会忽视建立一套美观、一致、易用、便于延展的图标体系的必要性。
图标设计是B端产品设计中非常容易被忽略的环节，建立优秀的图形体系也不是一、二个设计人员的事，需要整个团队在设计前、设计中以及设计后都能够达成共识并且通力合作去完成共建。
至于图标设计方法，很多设计类网站都已提供了详尽的学习教程，这里就不一一赘述了，对设计师有几点建议如下：
⦿ 干掉多余的节点，保持图形的整洁。
⦿ 合并图形，便于输出。
⦿ 对小数点以及奇数进行最后一遍的走查与修正。
⦿ 整洁的图层管理。
网页pc端设计规范 第5篇
⦿文案类对齐：
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
⦿表单类对齐：
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
⦿数字类对齐：
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
网页pc端设计规范 第6篇
字体设计的核心要点是可辨识性和易读性。
网页设计中文常用字体为宋体、微软雅黑或苹果系统黑体；英文常用字体为TimesNewRoman、Arial无衬线字体、sans。
网页设计中文字符常用尺寸为：导航文字14px、16px、18px、20px；
本文内容12px，14px；标题22px、24px、26px、28px、30px；辅助信息12px，14px。英文字符常用尺寸为：标题10-16px，本文内容10-16px，底部信息最小10px。
网页设计段落字体格式：两端对齐，末行左对齐；首行缩进2个字符，行间距与段间距为字体大小的倍区间；字间距为0，避头尾法则为JIS严格。
网页pc端设计规范 第7篇
网页宽度：1920高度，使用画布尺寸：950px长度~1200px宽度，具体尺寸由项目、要求和用户组决定。
首屏高度：≈700-750P，主体内容区域：1200PX。
文件建立：宽度1920PX，高度无要求，颜色模式为RGB，分辨率为72像素/英寸。
以上是具体网页尺寸规范，但可设计的空间具体需要结合网页布局设定，网页布局分为两种：①左右型布局；②居中型布局。不同布局可做图的空间也是不同的。
网页pc端设计规范 第8篇
用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
⦿查询模式：
用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
⦿反馈模式：
在用户提交输入之前，让他先行了解系统将如何处理他的输入。
在B端产品设计过程中，形成属于一套科学规范的设计模式很重要，能大幅度提升研发团队的确定性，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。
⦿设计方面：
完整的设计模式将会包含示例、模板、组件（ETC）三大实体部分，以及通用概念这样的黏合剂：
功能范例： 由多张模板构成，启发用户如何使用和搭建出一个常见功能。
模板： 页面级示例，启发用户如何通过组件搭建出系统中的典型页面，如：详情页。
组件。
基础组件：构成系统最基础的元素，如按钮、分页器。
业务组件/模块：区块级示例，一般由多个组件构成，如 PageHeader 通用页头。
通用概念： 一些保证 ETC 体系化的约定，如：布局、色彩、字体、文案。
⦿开发方面：
完整的设计模式还可以帮助开发者快速实现布局空间的设计决策，保障视觉稿的上线效果，同时也能简化设计到开发的沟通损耗（没有规范的沟通体验过的都知道）。
本文整理汇总了包括基础概念，产品类型，页面布局，组件介绍，设计法则，等等一些列的B端产品设计规范，在此期间查阅了很多相关的资料，希望为从事B端设计的设计师们提供及时的帮助～相对于C端行业的趋近饱和，B端行业正处于快速发展的阶段，放眼未来，投身B端设计未尝不是一个明智的选择，感兴趣的小伙伴可以多多交流～
- Posted in: Blog
- Tags: B端 , 设计系统
既然来了，说些什么？
2012-2021 © Design/Code By Vince
网页pc端设计规范 第9篇
在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。
⦿顶部导航菜单：
顶部导航菜单的形式就是把超链接连成一行，信息内容层级比较简单明了，适用在浏览性强的门户性质以及比较前台化的应用。一级类目建议在 2-7 个以内。标题长度 4-15 个字符长度为好，中文字长 2-6 个。
⦿侧边导航菜单：
垂直导航较横向的导航更灵活，易于向下扩展， 且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的管理性质的应用。
⦿面包屑：
面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系。
注意事项：
1. 层级过深时，建议做隐藏处理，页面显示保持在三级以内，最多不宜超过五级；
2. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
⦿标签页：
标签页把大量信息进行分类展示，用户可以方便地切换标签，而不必跳转页面进行比较浏览，可以在有限的显示区域内展示更多信息。分类可根据业务类别、业务状态或者操作类型等并列关系来分，分类标题长度为 2-6 个中文字。
⦿步骤条：
步骤条是引导用户按照流程完成任务的导航条，可以帮助用户对操作流程长度和步骤有个预期，并且知道自己当前在哪个步骤，同时也可以对用户的任务完成度有明确的度量。当任务复杂或者存在先后关系时，将其分解成一系列步骤。
⦿分页器：
当有大量内容需要展现时进行分页加载处理，分页器可以让用户清楚的知道自己所要浏览的内容有多少、已经浏览了多少、还剩余多少。
网页pc端设计规范 第10篇
⦿纵向间距关系：
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。纵向间距y=8+8*n。（n是自然数），8 是『基础间距』。
⦿横向间距关系：
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。需要注意的是，在一个组件内部，元素的横向间距也应该有所不同。
网页pc端设计规范 第11篇
⦿主次关系对比：
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
⦿总分关系对比：
通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
⦿状态关系对比：
通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。常见类型有『静态对比』、『动态对比』。
网页pc端设计规范 第12篇
一般主导航放置于页面的顶端，从左自右依次为：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部分左对齐；
网页pc端设计规范 第13篇
B端产品简称To B (To Business)，也叫做2B产品（2是谐音to而来）。
B是Business（商业的缩写），顾名思义就是面向商家、企业级、业务部门提供的服务产品，是间接服务于用户的。B端产品通过付费定制的途径获取收益，产品不直接由使用者买单，而是企业掏腰包。这类产品PC端有很多，例如：蚂蚁，百度云就是to B的产品设计，还有其他一些电子商务平台的后台产品，CRM 系统、 ERP 系统、OA系统、供应链系统，也都属于to B的产品设计。
B端的用户群体代表企业用户商家，面向多角色、多维度。企业做一个决策或者完成一项任务，往往不是一个人能快速决定的，一般有决策者、管理者和执行者，需要多人分工协作。
决策者 即决定是否购买B端产品的人，他们更多的是关注产品传递出的利益性，比如企业整体的工作效率、成本管控、系统稳定性和安全性等等。管理者 即权限管理人员，他们更多的是关注产品操作权限安排的问题，给不同的执行者安排不同的使用方案。执行者 即根据自身权限日常使用B端产品的人，他们在使用过程中更多的会考虑B端产品的易用性。
B端设计需要关注的重点是不同角色之间信息流的高效传递，一般会对界面进行模块化设计处理，有时还会提供自定义组合模块的功能。
B端产品根据展示形式的不同，一般分为：展示类B端产品、邀请注册类B端产品以及二者结合类B端产品。
网页pc端设计规范 第14篇
在多数业务情况下，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 布局。
对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中，通过栅格设计师和前端开发站在相同的视角，统一设计到开发的布局语言，减少还原损耗，保障还原度，继而减少沟通成本。
网页pc端设计规范 第15篇
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。
⦿静态邀请：
指通过可视化技术在页面上提供引导交互的邀请。
⦿动态邀请：
指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
网页pc端设计规范 第16篇
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
⦿覆盖层：
二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。
⦿嵌入层：
在列表中，显示某条列表项的详情信息，保持上下文不中断。
⦿流程处理：
长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。