小提示：

本文重点笔记:网页样式组件规范已整理成图片，可直接点击图片查看规范细节

一、样式分类

在网页设计中,经常会给卡片、图形添加填充色(单色、渐变)、边线(描边、分割 线)、投影等样式。并根据业务和情景的实际需求进行组合。

二、样式组件规范应用

填充色使用规范参考 "网页设计规范03-B端色彩体系" ，本文主要整理了边线及投影在 不同场景中的应用规范。生成组件字典,方便在后续项目目中直接查找调用组件。

#01边线使用场景及规范

边线作用:划分模块、分割画面等

边线属性:主要包括粗细、颜色、虚实等。

主要应用场景:常用于按钮边线、标签边线、辅助说明边框、信息反馈边框、字段说 明边框、表单控件、栏目边线、表格边线、分割线、上作传图片组件边线等

#02投影使用场景及规范

投影的作用:增强页面层次、模块区分更加清晰、画面更加细腻

投影的属性:主要包括方向、大小、颜色、透明度(控制深浅)、模糊度等。

主要应用场景:常用于莫态框、下拉菜单、按钮、页眉、提示反馈、底部操作栏、左 侧导航栏等。

最后

写在最后,设计规范可以让我们在做设计时有逻辑依据,工作中组件方便调用、提升效率, 还可以作为走查依据。web设计规范系列章节结合大厂设计规范(antdesign、Tdesign等) 以及实际工作经验整理的心得笔记。在此分享给大家,希望能给您带来帮助。写的不好的地 方地方还请留言讨论。

我们下一篇见《web设计规范05-字体规范》

查看更多文章,关注微信公众号:设计便利签