如何着手做好网页ui设计系统
随着数字产品逐渐成熟,许多知名企业为了加速开发流程,导入设计系统的观念,让产品团队目标一致。
 
1. 检视目前开发流程
 
在了解设计系统(Design System)前,可以运用这三大问题检视目前流程。不论你是开发者或是设计师,是否曾经遇过以下情况:
 
a. 没有效率的开发流程
 
设计团队里的资源不透明,一而再,再而三重复设计相同的元素,增加设计投入成本(人力及时间)。
 
b. 不一致的界面元素/互动体验
 
由于快速的开发过程,或是时间紧凑,导致在设计时没有考虑规模化、或者没有时间测试就将产品推入市场。不一致的元素会让用户产生困惑,花更多时间上手,可能因此放弃使用你的产品。
 
c. 对设计产出没有信心
 
由于没有设计规范,对于自己设计的互动界面,抱持着怀疑的心态。
 
如果你曾遇到以上三种情境困扰着,或是正想着:
 
“如何扩展团队和增长产品,同时提升开发团队效率及提供一致的使用者经验?”
 
也许,设计系统Design System是解决办法之一。
 
2. 设计系统(Design System)是什么?
 
设计系统并不是一个新观念,可以回溯于早期2013年Brad Forst提出的Atomic Design。Google Material Design在2014年大放异彩,2016年Airbnb开始进行创建设计系统。陆陆续续,许多知名公司包含Salesforce , Atlasssian , Shopify对外公布产品的设计系统,让大众认识设计系统的概要及推广设计规模化(scalability)。
如何着手?
 
万事起头难,根据每个团队会有不同的方法,本文分享个人在公司里推广设计系统的过程。大致上有六个阶段:
 
Seed种子期:心中有设计系统的概念
 
Collect搜集:搜集现有产品UI元素
 
Categorize分类:将现有UI元素分类
 
Discovery探索:设计探索所有可能性
 
Framing定义:收敛定义设计系统基本架构
 
Solution & Collaboration开发&合作:与开发者进行开发
 
现况说明:产品的设计规范Style Guide是由两年前的另位设计师所制定,自从产品上市后用户持续增长、在短时间开发更多的功能,过去的设计规范大多已不适用。
 搜集现有设计(外部& 内部) Gather current design (external & internal)
 
这部分可以分成向外寻找、向内探索:
 
向外寻找External:寻找市面上类似的产品,搜集喜欢的界面元素。由于这次的产品为SAAS,主要的参考对象为:Dropbox , Shopify , Typeform , etc.
 
向内探索Internal:试着搜集过往的设计,找寻潜在的可能性。这些设计可能是已开发、待开发,甚至是归档的都有成为设计系统的蓝图。

COPYRIGHT@2013-2016  上海左格信息科技有限公司  ALL RIGHTS RESERVED  本网站部分图片、文字等来源于网络。如有侵权,请及时通知我们,及时删除