# 设计风格 & 案例
卡片容器,可承载文字、列表、图片、段落等
# 浅色风格
根据插件设备的特性,我们定义了第一种为浅色风格;清浅灰色为背景,在控件组件、图标、动效等设计元素上使用了少量的辅助色搭配,画面整体简洁清爽、轻盈。
注:界面中文字信息参数仅为效果展示,请以设计稿输出为准。
# 背景色
浅灰 #f9f9f9
# 卡片颜色
白色 #ffffff
# 渐变风格
根据设备插件特性,我们定义了第二种为高级渐变色作为主要背景在插件顶部位置显示,控件组件、图标等设计元素与背景主色保持一致,画面整体现代新潮、愉悦。
注:界面中文字信息参数仅为效果展示,请以设计稿输出为准。
# 背景渐变色
根据渐变色彩规范指引使用
# 卡片颜色
白色 #ffffff
# 深色风格
根据设备插件特性,我们定义了第三种为深色/实物风格设计,控件组件、图标等设计元素与主色保持一致,深色画面整体高端稳重,而实物设备设计方式更有代入感,但比较局限且对素材品质要求高。
注:界面中文字信息参数仅为效果展示,请以设计稿输出为准。
补充说明:
目前深色风格的深黑色底主要应用在高端品牌 COLMO 插件,因此其他插件在风格设计时建议尽可能避开深黑色格调,适当保持不同插件的定位品牌感知。
# 普通深色型
背景:根据色彩规范指引使用
卡片颜色:白色 #ffffff
# 实物背景型
背景:使用真实产品设备高清图片处理
卡片:根据底部变化灵活拓展
← Divider 分割线 Button 按钮 →