Visual Designer & Art Director
I
n
s
t
a
3
6
0
网
页
设
计
规
范
Project * 02
信息
协作者
illlusate - 界面设计
工具
Sketch
时间
2019 年 3 月
2 个月
2 个月
分类
界面设计
简介
随着 Insta360 的持续发展，我们在网页设计和开发上面临着来自设计师、开发工程师、产品经理、老板和用户的各方面挑战。我们尝试着在这五者中取得平衡，并且依照这三个原则建立了我们的设计规范：
一致性
我们书写这份规范的出发点，就是想在 Insta360 的各种网页产品之间保持一致性。
灵活性和模块化
我们设定的组件应该原子化，具备通用性以及可以轻松地和其它的组件相结合。
创造性
我们也允许基于视觉基础而设计出的新组件，或者剥离部分视觉基础进行个性化定制的主题皮肤等。
视觉基础
通过定义一些基础的视觉元素，比如色彩、文字排印、排版方式、图标、形状和深度层级等，我们确保了在 Insta360 各种网页之间的设计一致性，同时也建立起来一套 Insta360 独特的视觉语言。
色彩
网页规范中的颜色和渐变是从我们的品牌规范中继承而来。在颜色比例方面，我们推荐使用白、亮灰和黑色来搭建整个页面，而保持将黄色和其它状态色仅仅用于点缀和高亮。
文本
我们按照 iOS、macOS、Android、Windows、Linux 的平台顺序分别书写了通用于 Latin 字符和 CJK 三语言字符的字体回退；根据层级关系定义了字体颜色，并且为标题、正文、注释和按钮等定义了字号缩放表。
图标
我们共享了在品牌规范中定义和绘制的品牌图标库，并且继承了同样的绘制栅格和绘制规范。同时我们规定了图标在不同网页组件中的具体的使用尺寸，包括 24px、16px、12px 等。
深度
我们使用了五层投影来表示深度层级关系。同时，我们在同一级投影里，使用三层线性的投影来模拟出非线性的投影衰减，使得投影效果更加真实。
排版
平面排版方法在网页中并不适用，所以我们在品牌规范外另外定义了一套 12 栏固定间隔的栅格和一套 4px 网格作为排布网页元素的工具。此外，页面的结构和可点击区域也同样是我们规定的布局决策树上的一环。
形状
圆、腰圆和圆角矩形是我们的三个品牌形状。我们定义了一个圆角层级系统来在网页上延续这三个形状：窗口和页面应该设置上最大的圆角，在其内的元素应该设置小一些的圆角，再内的元素则设置更小的圆角。
组件
我们使用 Sketch 的嵌套 symbol 功能雕琢了 20 多个网页组件。同时，我们也定义了各种组件的变种和它们常见的交互状态。所有的组件都非常简洁易用。
案例
我们的网页规范已经成功地被应用于 10 多款网页产品，包括我们的 BBS 系统、Wiki 系统、分销系统、培训认证页面、企业级应用页面、以旧换新页面等等。它为我们的网页产品提供了一致化的用户体验，以及优化了我们的设计开发流程。
