本文简要全面地介绍了后台产品的设计规范,希望对大家有帮助!
![ef1151348b405ea51e130b1b3e0f28d1.png](https://i-blog.csdnimg.cn/blog_migrate/3b29ad452699447cf14f5ad6ed2fe2b0.jpeg)
一、工作流程
在网上也看了一些文章,觉得还是从工作流程开始讲起会比较好,先贴上一张感觉很有道理的盗图。
![a311239ee8ee21babfee677335a22ab3.png](https://i-blog.csdnimg.cn/blog_migrate/c670ce57449efef0a6bd75e291528eca.jpeg)
- 原型图之前,对于产品经理而言,往往还有很多大量的工作需要处理,这里就不做具体讲解;
- 图中明确提到“设计规范”,可见我的出发点,不仅仅是我一个人的疑惑,那么接下来,就开始我们的表演吧。
二、网站设计——Z轴内容层级
对于后台产品经理而言,常常面对的是后台网页产品,所以本文也会围绕着网页产品进行谈起。
![5809b4bb4783ad09fa2dcd6609430844.png](https://i-blog.csdnimg.cn/blog_migrate/c31ce001b16b37b526bf008f563ea16f.png)
- 底层:数据层、逻辑层
- 内容:各种功能汇总
- 导航:将内容进行整理
- 权限:对用户访问数据、导航进行限制
- 全屏展示:按照产品设计,根据导航,展示对应内容
- 插件:页面点击、跳转等交互
- 弹窗:页面信息反馈,与用户之间的交互
三、页面尺寸
既然是做产品,自然要清楚自己的产品到底有着什么样的底子。
1. 屏幕尺寸
可参考http://uiiiuiii.com/screen/computer.htm
![4f859b27ebbe49154c33efbd3ad7a2f9.png](https://i-blog.csdnimg.cn/blog_migrate/c09bbb5f9ef292ed35dc8a053d6ef1ef.png)
2. 页面布局
同一个产品,布局尽量保证统一,具体布局可参考:https://zhidao.baidu.com/question/585199825.html
呈一份自己比较喜欢的网页布局:统一T型网站布局,页面主要内容,上下型框架,上下间距32px
![3d0f76c97a9558034f47f64a4922491d.png](https://i-blog.csdnimg.cn/blog_migrate/c5f8b2aaa4b4e1c29a56b0343faf0b8d.png)
3. 分页
常见的分页样式:
分页样式一:滚动翻页
![df748d076c3f5ef77258d778a3ae93ee.png](https://i-blog.csdnimg.cn/blog_migrate/e240a2f5d5da786bfbe4adb35767fdf3.png)
分页样式二:常规分页
![f7fb9d66ebaa4c27d36e7596a158e784.png](https://i-blog.csdnimg.cn/blog_migrate/8f46650bba965d107c55fb937d9e1a2a.png)
分页样式三:常规分页,用于页数较小的场景
![946bf55414f00cde5a51871a2ac49129.png](https://i-blog.csdnimg.cn/blog_migrate/89db29c1302f29f991c0ad416eabe955.png)
四、表单
1. 短文本
用于用户文本输入,并以字符串的方式提交到数据库
![bf86ef4d22c19dc5456ec3d180a79b25.png](https://i-blog.csdnimg.cn/blog_migrate/e4f8cbfd43d22f14eb1996544ba52b40.jpeg)
2. 短文本联想
用户用于文本输入,在输入过程中会联想匹配文本选项,并以字符串的方式提交到数据库。
![bcf43f31a3a8443f37da660aac3a4631.png](https://i-blog.csdnimg.cn/blog_migrate/359b7100d59b70edff3dbe066d7bdf27.jpeg)
3. 选择器
用户通过选择枚举项,提交到服务器。后端存储为枚举项。
![d5c82cfe5c499c6d166b02e78b8bffad.png](https://i-blog.csdnimg.cn/blog_migrate/ccb49de246038e5833b9055ba87d0d4a.jpeg)
4. 长文本
用户用于长文本输入,并以文本的方式提交到数据库。
![6c251c6fd43e8ba3e2f97a3bf8a3d5a5.png](https://i-blog.csdnimg.cn/blog_migrate/171573d45dfc1663a1dc6aaf542575a3.jpeg)
常见的长文本,还有富文本、Markdown、JsonEditor。
五、Tab
![9e7f535451b5ccda3b09ae16e3e3f47f.png](https://i-blog.csdnimg.cn/blog_migrate/e00a7c13f570908644f72a80f3d03cdd.png)
- 常见Tab分三类,顶部tab、底部Tab、侧边栏Tab,其中侧边栏TaB分左侧边栏、右侧边栏
- 主要考虑各类tab的操作路径,页面风格统一布局等问题
具体界面UI,根据各产品进行定义
六、字体&颜色
1. 字体
![86a269f81a3ef00acbea6ea39b826699.png](https://i-blog.csdnimg.cn/blog_migrate/81d1af0c52927fcfed93870a9d6af136.jpeg)
2. 格式
![370fc1063909e0812845156d8e3ad298.png](https://i-blog.csdnimg.cn/blog_migrate/fb06123cac0b039f622198919e236299.jpeg)
3. 颜色
![828e3c858e0eebc21811dd523f201a27.png](https://i-blog.csdnimg.cn/blog_migrate/f3e9132384abc0a59e79cc0e4fd31710.jpeg)
七、切图样式
![d0d6d8be7f6a03c486224fa2ad72ba2b.png](https://i-blog.csdnimg.cn/blog_migrate/3ff2ed417e72a539fb4936cc5001bfc5.jpeg)
八、控件组件
![9a64aa5ce01ac81131d3d4c86510185e.png](https://i-blog.csdnimg.cn/blog_migrate/43efcb468bbec097640d80ea38717f1d.jpeg)
九、弹框样式
1. Toast
用户产生操作,出现toast提示,一般2-3s消失;通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。
2. 使用场景
可提供成功、警告或错误等反馈信息。
顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。
![cbb85d72bace26bee325d93d53cd0039.png](https://i-blog.csdnimg.cn/blog_migrate/3080e86281e1e439b062f902c1cb9607.png)
3. alert 警示提示
当用户进行某种操作时,网站会出现对应的警告信息提示用户,该提示信息的状态不会主动消失。
4. 使用场景
当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式,始终展现,不会自动消失,有的组件用户可以点击关闭。
![37a2b02c4150dc989c792a7cde211458.png](https://i-blog.csdnimg.cn/blog_migrate/1c8397a60d589aeba287ca778e9f7c03.png)
5. dialog对话框
用于提示用户当前操作,或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式,也可以是自定义复杂的模式,例如表单的填写。
6. 使用场景
用户在进行重要操作的时,需要进行二次确认。
用于重要的反馈提示,让用户知道信息提示。
承载少量的表单填写类,减少页面的跳转。
![28beda9675fb61c857cec843083b3f26.png](https://i-blog.csdnimg.cn/blog_migrate/5f4991701ff2135c10a5979dcc150c7f.png)
7. Notification通知提醒框
悬浮出现在网页右上角,用于全局的提醒式通知。常见于服务器异常、操作失败等。
8. 使用场景
较为复杂的通知内容。
带有交互的通知,给出用户下一步的行动点。
系统主动推送。
Notification通知提醒框出现在网页右上角,一般4-5s消失,也可以点击叉号进行关闭。
![34683c614787e96e544c3736fbffc283.png](https://i-blog.csdnimg.cn/blog_migrate/a3b32f2e50bf90b4e8ad7be6085241f4.png)
10. tooltip 文字提示
简单轻量的的文字提示。
11. 使用场景
鼠标移入则立即显示提示,移出则立即消失,不承载复杂文本和操作。
常用于解释操作按钮的文字说明。
![561169c85cc6c16cb9ab36a33a9a1515.png](https://i-blog.csdnimg.cn/blog_migrate/70a3752e8520d7fd0b989d9608e08a0b.png)
十、加载样式
1. 菊花样式
![4e357edfea2c23ac97819a5c3d73972e.png](https://i-blog.csdnimg.cn/blog_migrate/a940947a9b0902c6e3ff5950decaedef.png)
2. 进度条样式
![1aa4c0eebbbac33a5e295dc2a5f17139.png](https://i-blog.csdnimg.cn/blog_migrate/b86fdb313c0f3aaad427d07607642aee.png)
十一、命名规则
![1ed867275ba8973f9af174702cf7c73c.png](https://i-blog.csdnimg.cn/blog_migrate/58ce3c3a8a67104ef540fe498cb2c93b.jpeg)
![337e15db363fd5780ae124190a0fa0c6.png](https://i-blog.csdnimg.cn/blog_migrate/811c71bf70b2f6e085c97fd9448c4999.jpeg)
![4469b5ccb644a1d0d8b2bae66942303c.png](https://i-blog.csdnimg.cn/blog_migrate/717596a144ff4ca8d0a3802f8d1f208e.jpeg)
内容到这里就结束了,比较多比较杂,但是这肯定是最全的一份文章。
原文链接:设计规范:后台产品如何进行规范设计 | 人人都是产品经理