@陈溪POINTVISION授权MICU设计发布
对于产品设计师来说，B端产品项目是非常常见的设计内容。 今天我就和大家聊聊如何做好B端产品设计规范。 干货趁早收藏！
今天想和大家聊聊：Web PC端产品设计规范及分组设计拆解，提高项目设计效率的价值和意义。
分析项目设计中直至开发结束的部件、设计元素、设计规范和设计稿，尽可能保证产品设计还原的一致性。
团队结合项目设计的实际场景，对产品整体设计方案和设计细节进行调整和优化，优化产品交互和设计的流程。
在团队合作的过程中，团队包括产品总监、体验设计师、开发程序员等测试人员都要积极参与讨论，多方并行参与，最终产出一套可以实现的满足用户体验设计和产品设计。 规格和组件设计。
1.接下来，详细思考一下。 作为B端产品设计，为什么需要提高设计规格？
1、保证设计的一致性
对于室内：多个设计师的合作仍然可以保证设计风格的统一，提高设计效率。
对于用户：改善用户体验，提高运营效率，加深对产品的记忆。
2. 提高开发效率并减少
与后端有效沟通的工具，提高设计还原度，降低对接成本。
开发可以构建公共组件库，大大提高开发效率。
根据设计规范完善自己的控件库，提高复用率。 在设计规范的指导下，当开发部门构建全局共享控件时，产品的设计规则就会变得更加清晰，比如：按钮、间距、字体大小、颜色、列表等产品设计中的元素都设计得清晰。
3. 促进产品迭代，协助设计开发更好地完成设计协作
随着产品设计的业务变化，当发现一些问题或者需要优化用户体验时，调整单个控件就可以影响全局，非常方便。 同时，您遵守设计规范，高效协助设计人员了解业务，方便开发和查看文档，大家可以更好地进行团队协作。
为什么B端产品需要构建设计规范汇总，如下图所示。
2、如何做好B端产品设计规范？
在项目设计评审之前，建议产品设计人员首先了解功能逻辑和产品设计思维，构思产品设计解决业务的方案。 在项目开始前，设计师尽量参与早期产品检验、竞品分析等头脑风暴。 换位思考，角色扮演的形式，跟我们上游的产品总监沟通，他们是公司产品服务的用户群体，大概的年龄段，还有我们的产品设计，解决了用户的具体问题等等的思考点。
设计规范必须遵守一定的设计规则，如下：
落地实现，我们需要明确开发适配的帧率规范。 对于后台系统的帧率，设计规格一般都是以1440x900为基础，然后针对其他规格进行屏幕适配。 如下所示。
了解了公司的项目背景后，我们开始定位产品的设计风格，并根据产品原型制作出一些符合产品风格的设计稿。
主要包括项目主界面的设计风格，包括界面设计的色彩、按钮、表格、表单、弹框等元素的设计。
1 优先考虑产品设计
2 确定设计规范的编写
3 逐步组织并编写单个规范。 原则上附有接口示例说明
下图是具体的设计规范和设计思路规则：如下图所示。
接下来看网页的一般设计规则：如下图所示。
颜色（主色的设定）
主色的选择要根据用户群体、使用场景和产品定位来考虑。 对于后台设计系统，系统可以扩展皮肤功能，给用户一个基本的颜色，然后做出一个配色好的皮肤，让用户自由选择。 客户希望根据自己的品牌色彩制作自己的设计系统，并且有多套可选方案，例如：百度网盘皮肤设计的多套方案。
建议设计时，整体色调不要超过3种，并遵循对比原则，突出色调的层次感。 整个界面的色调应尽可能少，并考虑不同用途的颜色含义。 如下所示。
中性色包括黑色、白色和灰色。 广泛应用于蚂蚁中后台的网页设计中。 正确使用中性色可以使界面信息具有良好的主次关系，提高用户良好的阅读体验。 下面的中性色卡包含从白色到黑色总共8种颜色。 如下所示。
颜色代码标准
在CSS中，所有颜色都以十六进制颜色值书写，如：#a0a0a0
这里我们以时间线为例来思考一下色调的含义：如下图所示。
-绿色表示已完成且成功的状态；
- 红色表示警告或错误状态；
- 蓝色表示当前正在进行或其他默认状态；
- 灰色表示状态不完整或无效；
标准字符的选择如下图所示。
后台系统选择字体，中文：微软雅黑； 英语：宋体。
所有标题均应使用Medium，以突出层次关系，使信息更加清晰。
原因：字体粗细Medium比较兼容，使用微软雅黑等字体可以很好的显示文字。
需要指出时，建议使用Medium、color等设计处理；
另外，考虑到数字和西文字符尺寸较小，建议使用Semibold，使中西文字符混合时更加舒适美观。
字体使用原则
除特殊情况外，以不超过2种字体为准。
字体大小的选择应以奇数字体大小为基础，如14px、16px、18px等。
中文使用标准字体：“微软雅黑”和“宋体”，英文使用“Arial”。 不允许使用特殊字体（如隶书、草书等，特殊情况可用图片代替），以保证用户的阅读体验。
对于控件中的文本，尽量使用大小统一的字体属性。
以“微软雅黑”为主，“宋式”为辅，用粗体的形式表达、强化、凸显疗效。
菜单标题
菜单标题字体大小：最小16px，最大20px。
文字标题
文本标题字体大小：最小 24 像素，最大 32 像素。
文字字体
一般情况下，正文字体大小为14px。 特殊情况下可能会加粗或者16px大小。
所有字体样式和颜色组合必须尽可能通过WCAG AA 3:1标准。
图标思维：如下图。
图标制作完成后，上传到阿里巴巴的字体图标库。 调用前端更方便，只需调整图标的大小和颜色即可。
关于图标规范的想法：
制作图标时css 纵向滚动条，大小以素数规范为准。
为了保证图标的显示效果，最小规格为16px。
为了保证网页的整体效果，图标的最大使用量不得超过48px。
滚动图片的动画可以使用多张png或jpg格式的图片。
图片文件大小控制（单位：KB）：
为了保证图片的浏览速度，图片尺寸越小，图片质量越好。
图片大小上限为100kb。 如果超过100kb，可能会被分割成多张图片来显示。
画面帧率：
图像帧率：统一为72像素。
以居中或左对齐为准，同一内容区域内的图片应采用统一的尺寸和对齐方式。
页面布局框架设计：
在设计过程中，我们需要考虑我们的基本设计基于什么规范。 确定哪些领域需要固定规范、哪些领域需要调整等等。 据统计，系统用户使用的主流帧率主要是1920、1440和1366。
我们通常是基于1440来设计的。
例如：zan design 的布局使用统一的元素和宽度来保持跨平台体验的一致性。
统一的屏幕宽度规格和跨平台的设计模式给用户带来更好的体验。
设计考虑包括以下几点：
1、保证画布规格一致性的原则。
2.统一网格单元。
3.统一网格系统。
4、视觉元素的统一、对齐等。
目前显示帧率主要有：
16:9：1920×1080、1600×900、1366×768
16:10：1920×1200、1680×1050、1440×900
一个完整的网页必须由以下三部分组成：
页眉区域页眉、主体区域main、底部区域页脚。 如下所示。
利润
为了防止页面元素靠近边缘css 纵向滚动条，WEB页面及其中的表格应设置行距，最小行距值为“3px”。 如下所示。
按钮
按钮是交互设计中必不可少的元素，在用户与系统的交互中起着极其重要的作用。
后台常见的按钮类型分为线性按钮、文本按钮、图标按钮等，如下图。
形式
通用表单由多个列表项组成。 而每个列表项都是由最基本的标签和输入框组成。 常规的形式包括单选、多选、下拉选择、输入框、时间选择、开关选择等控件。
左对齐是比较常见的对齐设计，比较符合PC端常规的显示场景。 如下所示。
顶部标签是指标签位于控件上方，标签可以与控件左对齐，对于垂直空间不足的情况很好的解决。
思考垂直标签的使用场景：
- 当表面一级功能较多，且需要扩展时，可考虑采用立式风格；
- 面有很多层级，为了防止水平选项卡过多，可以考虑使用垂直样式作为第一级选项卡； 如下图所示。
每个标签都有其优点和缺点。 根据自己的产品选择最适合自己产品的形式。 标签的对齐方式、各个控件的长度和高度均在规范中确定。
表单设计注意事项：
表格文本和数据左对齐。
当表格中的内容左对齐时，尽量与右表格的行距保持至少10px的宽度。
表格占后台系统设计的40%左右。
表设计规范的设计考虑如下：
操作栏按钮：每个按钮不超过6个字符。
栏目过多：默认显示范围：3-8栏，如果栏目较多，可以固定重要栏目，其余栏目滚动条显示交互设计。
列表的长度：宽度自适应，但是根据数组的重要性来显示，重要的数组先显示。
列标题：输入最多 8 个字符作为标题列标题。
滚动条：当表格内容超过一屏，需要显示垂直滚动条时，需要固定表格标题。 只需滚动表格内容即可。 如下所示。
空数据：当表中某部分没有数据时，用“-”填充显示。 对于数据为零的单元格，只需填写 0。
- 标题栏：标题栏高度为56PX
- 内容栏：标准栏高56px，大栏高80px，内容区域与栏水平对齐
- 垂直对齐方法：
右对齐：金额，最左边的操作列。 左对齐：除金额和最右边操作栏以外的其他表格数据； 如下图所示。
-水平对齐方式，如下图所示。
当表格列高大于80px时，内容水平居中；
当表格列高度小于80px（大列）时，所有内容顶部对齐；
- 自适应规则： - 表中的列内容分量以比例的形式实现，可以根据列数组的长度给出列的比例。 完成形态比例后，如果疗效不理想，可以使用特定的阵法做微调。
头部的文案可以按照信息降噪的原则来考虑，如下图。
进度条的设计考虑如下图所示。
- 加载进度条，有加载、成功、失败三种状态，进度条宽度支持自定义。 如下所示。
弹出框，如下图所示。
弹出框架主要分为两类：模态弹出框架和非模态弹出框架。 它们之间最大的区别在于是否强制用户交互。
- 一般状态通常显示在页面顶部。
- 有四个图标：一般信息、成功信息、失败信息和警告信息。
默认状态如下图所示。
默认页面是当页面没有数据、用户信息不完整或者网络连接不顺畅时所解释的页面。
为了减轻用户面对此类情况的恐惧，设计师可以使用插图和文字相结合的方式来引导用户进行下一步。
标准名称如下：
Head：页眉 Content：内容 Tail：页脚
导航:nav 侧边栏:sidebar 栏目:column 登录栏:loginbar 徽标:logo 广告:banner 页面正文:main
热门：热门 新闻：新闻 下载：下载 子导航：子导航 菜单：菜单 子菜单：子菜单
搜索：搜索 页脚：页脚 内容：内容 注册：regsiter
函数命名：
徽标:logo 广告:banner 登录:login 登录栏:loginbar 注册:regsiter 搜索:搜索 功能区:商店 标题:标题 加入:加入 状态:状态 按钮:btn 滚动:滚动 Tab:tab 文章列表:列表 提示信息:msg
始终使用大写
尽量使用英文，如果需要使用拼音，需要写完整的拼音
总体网格布局的思路如下：
3、数据可视化的设计和展示思路如下：
数据可视化的四大核心原则：准确、清晰、有效、美观。 这四项原则按重要性排序，互为补充，呈现递进关系。
没错，如下图所示。
视觉设计在表达时，准确、忠实地反映了数据的特征信息。 例：基金收益率走势图，合理的取值范围可以反映真实的数据波动趋势。
清晰，如下图所示。
清晰性包括两个层次，结构清晰和内容清晰。
结构清晰：
数据可视化呈现一件作品，是制作者分析思路的呈现，它的布局决定了读者的浏览顺序。 清晰的布局和清晰的数据深度路径可以帮助读者很好地获取信息。
下图所示：一个经典的设计布局，顶部是搜索功能区，右侧是过滤功能区，画布区域是地图路线等显示。
内容一目了然，如下图所示。
让用户看图片不再困惑是我们不变的追求。 当图表上有数据日期和数据指标需要解释时，应
给出了适当的位置，以帮助读者更好地理解数据。
有效，如下图所示。
注重信息传递，避免冗余，避免信息过载，以最合适的数据墨量比例向用户表达最有用的信息。
审美是一种克制。 借助视觉元素进行合理设计，利用格式塔原理对数据进行分组，不仅可以帮助用户更高效地获取信息，还能在一定程度上营造秩序感和美感。 美丽。 如下所示。
一个内敛又漂亮的原型设计，如下图：
数据可视化推荐网站如下：
埃图表
数据可视化设计，百度的产品。 统计图表模块常用于软件产品开发或网页中。 可视化图表可以在Web端进行高度定制。 图表种类繁多，动态视觉设计效果很棒。
蚁视
antv是蚂蚁金服出品的一套数据可视化语言，拥有一系列的数据处理API、针对简单数据的数据分类和分析能力，被很多大公司用作其BI平台的底层工具。
阿里数据V
天猫双十一大屏是用阿里云的拖拽式可视化工具DataV制作的。 主要用于业务数据和地理信息融合的大数据可视化，比如一些会展中心、企业管控中心等。
无需编程，通过简单的拖拽配置即可生成可视化大屏。
总结：
我们团队的设计师整理了PC端后台和网页设计规范，这对于团队内开发项目的实施非常重要。
我们需要和后端开发的同学就设计规范进行沟通，让后端开发的朋友能够了解每一段内容的设计规范。
前端开发团队也会分成几个人一起做项目。 同时，一个大的产品设计会被分成多个小模块，设计项目会按照时间和优先级逐步展开。
因此，在项目开发初期，我们尽力做好设计沟通和协调工作。 我们将提升工作效率，保证公司项目的输出质量和产品设计的一致性，从而达到提高用户体验设计感的目标。
最后分享一个小故事来激励自己：
木桶法则是，一个水桶能装多少水，取决于它所拥有的最短的木头。 作为一个设计团队，需要的是设计师之间的通力合作，才能完成每一个高质量的项目。 因此，在笔试或者工作中，设计师一定要向面试官展示自己的设计优势。 这个优势可以是插画或者动效或者交互设计规范来确立团队设计中的薄弱环节，再加上努力按照自己的需求做事，提高团队设计的最优质量。 因此，优秀的设计师往往拥有自己独特的优势标签，在一个领域建立优势，帮助团队实现双赢的设计效果。
发表评论