随着 Insta360 的持续发展,我们在网页设计和开发上面临着来自设计师、开发工程师、产品经理、老板和用户的各方面挑战。我们尝试着在这五者中取得平衡,并且依照这三个原则建立了我们的设计规范:
通过定义一些基础的视觉元素,比如色彩、文字排印、排版方式、图标、形状和深度层级等,我们确保了在 Insta360 各种网页之间的设计一致性,同时也建立起来一套 Insta360 独特的视觉语言。
我们使用 Sketch 的嵌套 symbol 功能雕琢了 20 多个网页组件。同时,我们也定义了各种组件的变种和它们常见的交互状态。所有的组件都非常简洁易用。
我们的网页规范已经成功地被应用于 10 多款网页产品,包括我们的 BBS 系统、Wiki 系统、分销系统、培训认证页面、企业级应用页面、以旧换新页面等等。它为我们的网页产品提供了一致化的用户体验,以及优化了我们的设计开发流程。