在淘宝内部，经过长时间调研和沉淀，我们产出了 ICE Design 这一套适合于中后台前端应用使用的设计语言。
我们基于 ICE Design 开发了大量的可复用代码片段(区块)，根据区块进行代码复用，大大节省开发时间，详情请见 物料 - 区块。
脚手架初始模板简称为模板，我们针对实际场景的调研，提供了一批官方精选模板，实际效果请参见 物料 - 模板。在 Iceworks 中生成项目选择对应脚手架即可。

升级背景

目前传统平台界面的设计语言存在着一些不足，比如色彩单一，大量线条的使用，分割化明显。其实，将这些不足归类一下就是界面单调，雷同性明显，缺少惊喜。也许新的平台类视觉风格可以打破这些束缚，尝试一些新的探索，启发传统的设计认知。因此，结合当下设计趋势，构思了一套新的平台产品设计语言。

IDS 设计语言

设计手法

介绍 Introduction

目前大部分的组件体系设计风格任然大同小异，ICE 为了突破现有的设计，尝试采用更激进的设计风格，比如沉浸式的导航设计，无分割的表格设计。新的设计语言除了遵循经典的设计定则，还汲取的最新的设计趋势，比如模块化投影化的处理方式，圆角的处理，更加突出内容的表现方式。

风格 Style

色彩

色彩上相对于其他的组件风格，会将色彩更多的采用到组件和页面当中，避免传统的乏味、沉闷、冰冷的感觉。在合适的节点透出惊喜的感觉。此外增加了渐变的颜色，添加了质感，同时迎合当下流行的趋势。

同时提供了浅色版本和深色版本两个风格主题，在对氛围感有很强的要求的产品中可以尝试深色的主题。

字体排版

同时使用过多的字体尺寸和样式可以很轻易的毁掉布局。在字体的选择上，采用的是基础的并且适于阅读的字体字号，12、14、16、18、24 号字，并且他们能够良好的适应布局结构。这些尺寸和样式在经典应用场合中让内容密度和阅读舒适度取得平衡。

图像

在后台界面设计中，图像的用途几乎被忽视，然而图像有着建立情感联系，给人轻松愉悦感的作用。这些是 ICE 新的视觉风格里面需要的，因此，新的设计里加大了图像的透出比例。希望可以给用户更轻松的体验。

基础设计原则

接近原则

这样可以给用户一个直观的提示，越靠近的信息区块，关联性越大。接近原则是把信息按一定逻辑进行的“组队”。

层次对比

页面上的信息通过组队后，一定会需要有侧重点，这时候对比的方法可以拉开内容之间的差距，从而凸显出页面的重点信息。层次对比是增加视觉效果的最直接的方式。

对齐原则

如果页面上一些项是对齐的，就可以得到一个更内聚的单一，像是有一条看不见的线把信息排列的更整齐，即使元素可能在空间上间隔的很远，或不在一个“组队”里，对齐可以告诉用户他们之间还是存在某种联系。

流程顺畅

中后台项目用户主要是进行信息查询或完成任务，所以相比前台项目注重页面的点击，在后台项目中路径顺畅要比点击次数更重要，甚至需要用越少的有效点击完成页面任务。流程顺畅可以快速提升用户对页面的好感度。

简化认知

为了让用户准确有效的获取到页面的信息，就需要减少对信息元素的误解，简化认知成本，尽量让页面信息直白展现。中后台并不需要太多的“内涵丰富”的概念来呈现内容，准确表述功能减少认知负担。

预览效果图

首页预览效果

表格

列表页

Dashboard 页

氛围增强版