最近看汪曾祺的《叹息桥》中的一句话，我必须分享给你。缘起我在人群中看见你，缘散我看见你在人群中。是的我想你在人群中看到我。这就是最初我分享这系列设计文章的初衷。
慢慢发现其实分享也是一件快乐的事情、而且在分享的过程中我自己也收获了很多。而且对设计的理解也更深了。更快乐的是收获了一群一起同行的小伙伴、这个还挺开心。和他们一起在群里吹水、一起吐槽。一起讨论问题、那真的是快乐无边。哈哈哈
上面扯多了。我们开始今天的内容。今天内容分三部分、第一部分内容总结是对我写的这个系列文章每一篇文章内容和核心的小总结。第二部分这个系列的文章页算是告一段落了、下一阶段我会做些什么。第三部分分享一些我写文章的感受、然后煽煽情。
因为在写这个系列的文章时我加入了很多扩展知识。希望告诉你更多。这里我会把主要的这个系列的知识总结一下让你尽量一次看完。
最近就在做我们系统的登陆页面优化。回头我会写一个项目总结给你们看。这里介绍一下B端登陆页面该怎么去做。其实还挺简单了。因为现在主流的布局就那几个。
页面元素：导航、登录框、背景（装饰元素）、互联网信息。
导航高度：68px或48px、文字大小：14（大部分）16（也可以）
登录框大小：大小尺寸不统一、没有固定的尺寸。可以根据自己和领导的喜好决定。对还有要承载的内容多少。
标题切换字号：我喜欢用26px（也要其他的16、/18、/20）
底部要不就是单纯的互联网信息。要不就是快捷入口、联系方式什么。这个就不多说了正常排版就行。
筛选相对是很简单的部分把、因为你直接用规范里的组件。虽然不会很优秀、但是刚重要的是不会出什么错误。主要是就大厂规范能够快速的帮你解决问题。
筛选类型：基础筛选组件（就是我们常见的页面顶部的筛选）、高级筛选（就是那些需要你定义想一想的筛选部分）
筛选样式：平铺；折叠；Tab筛选；单侧选择；表头；综合
这里其实还简单的、首先你要明白栅格在我们的设计里面很重要。你不用当然也可以呀。但是你想要做的更好那就用起来你会有意外的收获。
怎么用：直接看ant design、TDesign、阿科desing的规范就行、写的很清楚。
注意点：不要硬套、我们要根据自己的系统去自己定制。比如我们系统、用的是ant design的框架、但是我们的网格系统是自己定制的。因而我们的边距不是24px、我们是20px
这部分相对来说是我自己的弱项、在写当时的文章的时候也是收获颇多的。明白了大厂规范是怎么确定自己色彩设计规范的。也清楚了自己应该怎么去规定自己的设计规范。
主色确定：常见的方法、1、用自己品牌logo的颜色；2、用行业色
配色确定：我一般是找竞品、或者优秀的配色方案、来确定自己的。多参考大厂的配色方案。虽然不全是好的。但是好的还是站大多数的。
大厂色彩：这里我分享了大厂的色彩是怎么去确定的、如何去确定。可以去看看。我在自己的工作中色彩的应用就参考了ant Design的色彩应用方式定制的。
字体部分我觉得最有意思是的是分享了、我们宋体、楷体、隶属、甲骨的发展历史和由来。还有就是如何去设计一款自己的字体。还有后台字体规范的制定
中国文字：这里中国文字的发展历史、所有字体的产生都是有自己发展的历史原因的。很有意思。建议你看看、可以当做你喝酒吹水的谈资。
字体规范：我们大部分的字体会采用黑体、可读性强、亲和、现代、清晰。
字号：最新的字体12px、正文、14px、通过+2， +4，+8，+12，+16 的步数增长规律
行高：通过逻辑得到这样一个公式：「 行高 = 字号 + n 」，8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致，总体文字间隙稳定呼吸，行高空间较一致得出计算公式：「line-height = font size+8」
字重（就是字粗）：建议使用两种常规和加粗（在前端里一般就是400和500）
颜色：我是主张带有色彩倾向的颜色应用的。根据字体样式的设计原则，制定了简易好记的透明度数值区间并且将该字色与界面系统的色彩系统结合，文字显示色彩对比满足至少1:4.5( AA级别）。且验证了其中的实用性，共分为亮暗两种模式，4 个色阶。
你要统一风格成套的去找参考和应用。在我们的系统里我是自己画icon的然后传到阿里巴巴矢量图库让开发直接引用。这个是自己累点、但是可以保障实现效果。
我是用的阿里巴巴矢量图库的设计规范、因为我要传到这个平台应用
按钮我觉得这部分是相对简单的、也是要做到风格的统一。直接用大厂组件然后根据自己平台的风格、不如圆角的大小其他的倒是没什么了。
尺寸：把按钮分成：迷你、小、中、大，四种尺寸。高度分别为：24px/28px/32px/36px。推荐及默认为尺寸「中」。
样式：各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。
布局：这里分享了两个概念、古登堡法则、费茨定律、告诉你我们为什么这么排版。对产品和甲方很有用、哈哈、这是我的秘诀。
后台弹窗是一个很复杂的内容、但是也是一个相对很好处理的部分。只要你做好规范这部分、简直就是一点开胃小菜。
弹窗是一个我头痛的问题因为不太好规范。但是我还是把这个弹窗系统、在我们的体系中形成了一个小的规范。感谢领导、感谢前段端的龙哥。
我们把前段粗略的分为400px、600、800、1000、最大、广告。业务里我们会采用4、/6、/8、/1、最大、推广和通知我们就统一的尺寸。
什么是表单：我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
我们在后台系统中、大部分的场景都会使用上表单。信息采集呀、编辑数据呀等。在表单设计时要遵循的原则、简洁明了、清晰高效、适应业务、即时反馈。
表单的构成结构、基本都是由、标签、域、提示、操作按钮这四个部分构成的。
表单布局在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。
B端设计中，对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。因为结构简单、精准高效、数据形式丰富。
表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中，内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。
表格的类型：基础表格、树形、子表格、交叉表格、图表表格、卡片表格
进阶的一些知识就是表格数据的优化和表格的交互知识了。想了解去看更详细的我的文章11表格设计和12表格优化项目实战。
如果你是一个小厂B端设计师、刚好没有自己平台的设计规范。那就去直接用的场的设计规范。去用没问题的。大厂那么多的牛逼设计给你做好了你不用。都塞到嘴巴上、不吃就不给面了。
在使用大厂的设计规范时然后慢慢的积累自己平台的设计规范。逐渐的你就会形成一个属于你们自己平台业务的高质量设计规范了。
这个基础系列的文章就这样写结束掉吧、希望可以对你的B端设计有所帮助。之后我会写二个系列的文章、去分享我理解的B端设计。
第一个系列是B端基础设计的加强版、B端高手。B端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。
第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。
分别是为了更好的相见、我一直希望我的文章可以帮到你。慢慢来路还很长、总是要一步一步的来。很快我们会再次相见。我是KING（国王）
注解：标题的40000余字也好、50000字也好都是说的我这个系列总计的字数、因为想让你们看到。
作者：彪形大汉pro
链接：https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
