设计风格 & 案例

卡片容器，可承载文字、列表、图片、段落等

浅色风格

根据插件设备的特性，我们定义了第一种为浅色风格；清浅灰色为背景，在控件组件、图标、动效等设计元素上使用了少量的辅助色搭配，画面整体简洁清爽、轻盈。
注：界面中文字信息参数仅为效果展示，请以设计稿输出为准。

背景色

浅灰 #f9f9f9

卡片颜色

白色 #ffffff

渐变风格

根据设备插件特性，我们定义了第二种为高级渐变色作为主要背景在插件顶部位置显示，控件组件、图标等设计元素与背景主色保持一致，画面整体现代新潮、愉悦。
注：界面中文字信息参数仅为效果展示，请以设计稿输出为准。

背景渐变色

根据渐变色彩规范指引使用

卡片颜色

白色 #ffffff

深色风格

根据设备插件特性，我们定义了第三种为深色/实物风格设计，控件组件、图标等设计元素与主色保持一致，深色画面整体高端稳重，而实物设备设计方式更有代入感，但比较局限且对素材品质要求高。
注：界面中文字信息参数仅为效果展示，请以设计稿输出为准。
补充说明：
目前深色风格的深黑色底主要应用在高端品牌 COLMO 插件，因此其他插件在风格设计时建议尽可能避开深黑色格调，适当保持不同插件的定位品牌感知。

普通深色型

背景：根据色彩规范指引使用
卡片颜色：白色 #ffffff

实物背景型

背景：使用真实产品设备高清图片处理
卡片：根据底部变化灵活拓展