设计规范:由设计原则、设计语言、组件库构成,在设计原则的指导下使用设计语言和组件库创造使用感一致的用户界面
设计原则:整个设计规范需要遵循的全局规则,为设计提供方向指导。亲密性、对比、对齐、统一、及时反馈、简化交互
设计语言:色彩、文字、图标。。。。。
组件:基础组件(按钮、下拉。。。)和业务组件(商品模块)
做设计语言和组件库时遵循“少即是多”的原则,用尽可能少的样式来实现设计目标,例如按钮提供三种尺寸即可,在适应不同场景要求的同时保证体验是一致性,同时,保持克制的设计规范能减少设计师的决策时间,提高设计效率。
原子设计:是构成设计规范的核心指导理论
原子:构成界面的最小元素:文字、线条、图标、颜色
分子:原子按照一定规律组成的,如:下拉、按钮
组织:由原子和分子构成的模块:卡片
模板:在界面中体现为原型图,是页面的基本形态
页面:在模板的基础上将占位符转化为真实内容,进行视觉优化
B端设计是偏向于排版的设计
文字:字重、字号、颜色
色彩规范:在B端产品中,色彩不仅是为了展示品牌,更是为了传达信息:反馈信息:绿色-成功、红色-失败;突出信息:通过色彩将内容分层级展示,提高用户获取信息的效率;表明状态:通过颜色区分事物所处的状态
色彩组成:品牌色-在需要用颜色强调且没有其他要求时,一般选用主色:tab选中状态,图表颜色;语义色=功能色:借助颜色心理帮助用户快速获取信息(绿色:成功、通过,红色:失败、禁止、错误,橙色:警示);中性色:文字、分割线、背景、边框
色彩规范的原则:理性的、可扩展的、和谐的
阴影:分为:S(0,2,4,0)突出组件悬停效果,表示可供性(看到某个事物就知道该如何使用它)M(0,3,6,0)给下拉列表和气泡提示使用的;L(0,4,8,0)模态组件阴影:弹窗
圆角规范:圆角具有亲和感、辨识度,直角在自然界给人构成威胁,圆角越大,亲和感越高
设计规范:盒子模型、导航
导航分类:顶部导航:优点-符合人眼浏览网页的视觉动线,沉静式体验;缺点:扩展性差,顶部的空间有限,无法承载太多的层级,菜单的字数被严格限制。适用于广度和深度较简单,且后期不会增加更多功能的产品
侧边导航:侧边导航以树状方式展示,扩展性好,方便寻找;但用户在浏览内容时,视线会被侧边导航打断,降低了浏览的沉静感,适用于目前结构不复杂后期会迭代增加很多功能的产品
混合导航:扩展性最好;但每个菜单项都需要点击顶部和侧边导航,交互路径长,操作效率低;占用空间多;适用于结构复杂的庞大产品
水槽
间距:4 8 16 24,在大模块的纵向间距可以与水槽的大小一致
设计规范:文字 色彩 阴影 圆角 布局 导航 图标 文案
原文:https://www.zcool.com.cn/article/ZMTIxODExMg==.html