（阅读本文大约需要6分钟）
经过多次后端系统设计从头开始，从早期竞品分析、设计规范和设计稿到开发和最终产品实现。 整个过程中，会遇到很多需要根据实际情况反复思考、调整设计方案、优化设计交互的过程。 在这个过程中，产品、设计、开发都参与了讨论。 三方并行参与，最终落地了一个比用户体验和视觉效果更好实现的解决方案。 通过对每一个细微点的反复思考和探索，慢慢形成了一些适用于大多数场景的可找到的规则。 本文包含我自己项目中的一些内容作为示例。
设计规范的目的
1、多位设计师同步设计
这主要是因为多个设计师在同一项目上横向协作，以避免同一项目上的设计控制混乱。
方便控制视觉均匀性，提高效率，降低返工率。
2、提高开发效率，降低返工率
以及垂直于前端开发，他们有了标准化约束后，会大大提高开发项目中设计稿的还原度，并按照规范建立自己的控件库，提高复用率，减少开发成本。返工成本。 如果制定了规范，程序员可以从可视化规范中了解到哪些控件可以编写一次并重复调用。 借助规范，开发人员在构建全局共享控件时有更清晰的规则，例如按钮、行距、字体大小、颜色值等。
（截图来自网络）
3.协助设计开发了解业务
如果产品经理在绘制原型时能够大致遵循设计规范的交互和布局格式，将会减少开发过程中原型与设计稿之间的歧义。 产品原型不需要精确，只需要按照项目既定的规范进行类型化即可。 不过这样不会对产品造成太大的工作量，而且也方便开发和查看文档（这个也要看各个公司的合作方式，如果产品经理能够在一定程度上遵循设计规范，那就会很方便）对下游工作非常有帮助。大好处）。
（公司原型制作的示例，给他们打电话）
4、促进产品迭代
在产品的设计过程中，经常会出现一些与市场测试或用户体验反馈相关的问题。 这时就需要调整某些标准的控制交互或者显示方式。 随着设计规范的制定，可以快速定位控件的位置，并根据新调整的样式项目进行了整体调整，大大提高了工作效率。 这种统一修改的方法很好。 A页面和B页面的统一控件采用两种不同的显示方式。
如何开始组织法规
对于我们设计师来说，第一次在评审会上面对一个全新的产品，听着各种功能逻辑、各种解决方案，心里非常困惑。 处于一种迷茫的状态（嘘……） 在项目开始之前，大多数公司设计师没有机会和时间参与前期调研和竞品分析。 这个时候我们应该向我们的上游产品经理提出更多我们自己的问题，包括我们的用户群体是谁，他们是什么年龄段，他们是什么样的产品，用户解决什么问题等等。
实现时，我们需要知道分辨率是多少，以便开发适配（后端系统一般是按照1920*1080尺寸，然后适配1366*768屏幕）。 对于一些行业，用户使用的显示器也会被考虑在内（你永远不知道你的甲方爸爸在什么环境和情况下使用的），我们会考虑到所有我们能想到的因素以尽量减少返工率。
了解了项目的背景之后，我们就可以开始定位产品的设计风格了。 根据产品原型，我们会制作多份设计样稿，以便对产品风格进行早期定位，主要包括项目的主要界面风格，包括颜色、按钮、表格、表单、弹窗等。 撤回框架及其他相关款式。 制作这些早期样本页面是为了促进小组内的讨论以及向领导者的演示，直至最终确定。
颜色
主色的选择一般是根据用户群体、用户使用场景和产品定位来考虑和选择。 当然，对于后端系统来说，系统可以扩展皮肤功能，给用户一个基本的色调，然后制作几套配色好的皮肤，让用户自由选择。 对于公司来说，一个项目可能会考虑到多个客户。 客户都希望根据自己的品牌色彩来构建自己的系统。 拥有多套可选方案也方便后续的维护和销售。
标准字
后端系统的字体选择相对单一。 中文：微软雅黑，英文：Arial。 只要在给前端开发人员培训规范时注意提醒他们需要重新设置字体样式即可。 不然以后查看界面时，一个页面同时有宋朝和微软雅黑。 强迫症是严重难以忍受的，影响非常大。 看看界面的气氛。 经历过这一步演练的设计师都会明白。
图标
图标现在几乎不再是通过剪切图像来制作的。 完成后上传到阿里巴巴的字体和图标库。 前端调用方便调整大小和颜色。 关键是无论怎么处理都不会失真。
页面布局框架
在设计过程中，我们还需要考虑我们的基本设计基于什么尺寸。 哪些区域需要划分固定大小，哪些区域需要适配，菜单是否支持缩小功能等。据统计，系统用户使用的主流分辨率主要是1920、1440和1366，部分系统还拥有1280个显示设备。 具体适配的最小和最大分辨率也可以根据您的用户使用情况来确定。 我们一般按照1920来设计，以1366的分辨率为下限。 该页面包括顶部栏、选项卡、每个应用程序的左侧菜单、主要内容和其他区域。 每个系统根据自身情况都有一些差异。
按钮
按钮是交互设计中必不可少的元素。 它们在用户和系统之间的交互中发挥着非常重要的作用。 后台常见的按钮类型分为线性按钮、曲面按钮、文本按钮、图标按钮、文本+图标按钮。 规范中，按钮的样式，包括宽度、高度、圆角、文字等，一般限制在6个字符以内。 （这个是给产品同事看的，有时候我们拿到一个原型，一个按钮的字数特别长。想想一个正常的按钮太多了，用户需要花很长时间去读懂按钮的功能并且然后进行操作，极大影响用户体验）。
按钮的宽度给定一个常规宽度和高度，然后需要明确说明正常宽度的文本与边框的距离。
以及按钮的各种状态：默认状态、鼠标悬停、焦点获取、保持/激活、禁用
形式
常见表单由多个列表项组成。 每个列表项都由最基本的标签（标题）和输入框组成。 常规的形式有单选、多选、下拉选择、输入框、时间选择、开关选择、图片附件上传等多种控件。
以前标签和控件的对齐方式有左标签、上标签、内联标签。
左标签是一种比较常见的对齐方法，也是后端系统常用的方法。 比较适合PC端常规显示屏水平空间比较充足的场景。
顶部标签是控件上方的标签。 标签可以整齐地与控件的左侧对齐。 对于水平空间不足的情况是一个很好的解决方案，但同时也增加了整个表单的垂直高度，表单内容过大。 通常，用户可能需要多次使用滚动条来填写整个表单。
内联标签节省了大量空间，但填充错误率很高。 当空间获得焦点时，标签名称消失，用户可能会忘记当前填充的标签是什么，这需要用户的记忆成本。
每个标签都有其优点和缺点。 根据您的产品选择最适合您的产品的方法。 标签的对齐方式、各个控件的宽高、控件之间的间距以及控件的各种状态（默认、激活、禁用、错误提示）都在规范中确定。 填表时错误提示的指导尤为重要。 例如，当我们填写手机号码时，用户可能会少填写一位数字。 如果提示文字是“您填写的号码有误”，则需要用户自行查找错误点。 。 如果我们能够快速为用户定位错误点，并给出“手机号码小于11位”的提示，这样的提示可以帮助用户快速、正确地填写表单，提高用户的工作效率。
床单
表格对于每个人来说都是非常熟悉的。 表格应占后台系统设计的40%左右。 它们看起来像简单的水平和垂直条。 但是影响用户体验的小细节有很多。总结一下，我每次写规范都会考虑几点。
操作栏按钮：每个按钮不得超过6个字符。如果按钮超过4个，请使用折叠方式。 使用“更多”缩小多余的按钮。
列太多：默认显示范围：3-8 列。 如果出现较多列，可以固定重要列，剩余列用滚动条显示（一定要支持用户队列自动排序）
列表的宽度：宽度是自适应的，但是根据字段的重要性来显示。 重要字段首先完整显示。 宽度限制替换为“...”。 鼠标悬停时会显示全部内容。
列标题：标题列标题最多输入8个字符（在复杂的后端系统中，会出现字数较多的标题，这些需要与产品讨论，选择简短清晰的名称）
表格行：表格行高可设置为字体高度的2.5倍至3倍，并以斑马纹显示，增强视觉流动的水平引导性。表头和表体的颜色相互区分。
滚动条：当表格内容超过一屏，需要显示垂直滚动条时，需要固定表格标题和页码，滚动表格正文内容部分即可
空数据：当表中某部分没有数据时，用“-”填充显示。 对于数据为零的单元格，填写0
对齐方式：表格数字内容左对齐，非数字内容右对齐
弹出框
弹出框主要分为两类：模态弹出框和非模态弹出框。 它们之间最大的区别在于用户交互是否是强制的。 模态弹窗会打断用户当前的操作流程，只允许用户对当前弹窗进行操作，而非模态弹窗则相反。常见的后台有：
模态框：对话框、抽屉式滑动窗口
模态与非模态：警告框、气泡提示框、通知提示
我们在写弹出框规范的时候，应该了解自己的项目中哪些内容需要使用弹出框，并给出相关尺寸弹出的比例，哪些是固定尺寸，哪些是自适应比例。 通知提示将在一定时间后自动消失。
默认状态
默认页面是页面没有数据、用户没有创建任何信息、或者网络连接不顺畅时显示的页面。 为了减轻用户面对此类情况的焦虑和困惑，设计师可以使用插图和文字相结合的方式来引导用户进行下一步。
总结
经过设计师的规范和布置后，最后的实现才是最重要的一步。 规范建立之后，我们需要对前端同事进行规范内容的培训，让他们能够理解每一个内容的细节。 这一步的标准化培训是非常重的，因为前端同事也会分成几个人来进行项目工作。 同时，一个大的产品会被分成多个小模块逐步开发。 这样的工作模式实际上会增加风格不一致的可能性。 。 因此，我们需要做好开发前期的培训工作，这样也会减少后期的返工量。 规范还需要注释（我一般上传到Blue Lake），方便前端开发者按照规范样式构建自己的控件库。 在实际工作中，也会根据前端提供的控件库出现一些特殊的控件，让我们选择合适的控件，然后改变样式。 如今，各种简单易用且相对完善的控件层出不穷。 选择现有的控件可以节省大量的开发时间。
把公司项目的规范发出来，让大家互相学习、讨论。
转载请注明出处：无忧博主，如有疑问，请联系（762063026）。
本文地址：https://www.wuyouseo.com/wp-video/18047.html