UI界面设计 设计规范 ·

如何着手做好ui的设计系统?

随着数字产品逐渐成熟,许多知名企业为了加速开发流程,导入设计系统的观念,让产品团队目标一致。

1. 检视目前开发流程

在了解设计系统(Design System)前,可以运用这三大问题检视目前流程。不论你是开发者或是设计师,是否曾经遇过以下情况:

a. 没有效率的开发流程

设计团队里的资源不透明,一而再,再而三重复设计相同的元素,增加设计投入成本(人力及时间)。

图1. 重复设计界面浪费设计师/开发者的时间跟精力

 

b. 不一致的界面元素/互动体验

由于快速的开发过程,或是时间紧凑,导致在设计时没有考虑规模化、或者没有时间测试就将产品推入市场。不一致的元素会让用户产生困惑,花更多时间上手,可能因此放弃使用你的产品。

图2. 不一致的界面导致使用者无限困惑

 

c. 对设计产出没有信心

由于没有设计规范,对于自己设计的互动界面,抱持着怀疑的心态。

图3. 因为没有规范,对于自己的解决方法没有信心

 

如果你曾遇到以上三种情境困扰着,或是正想着:

“如何扩展团队和增长产品,同时提升开发团队效率及提供一致的使用者经验?”

也许,设计系统Design System是解决办法之一。

2. 设计系统(Design System)是什么?

设计系统并不是一个新观念,可以回溯于早期2013年Brad Forst提出的Atomic Design。Google Material Design在2014年大放异彩,2016年Airbnb开始进行创建设计系统。陆陆续续,许多知名公司包含Salesforce , Atlasssian , Shopify对外公布产品的设计系统,让大众认识设计系统的概要及推广设计规模化(scalability)。

市面上有许多解释,我个人比较喜欢Karri的说法:

“ Set of shared and integrated patterns and principles that define the overall design of a product ”
— Karri Saarinen, Principle Designer at Airbnb

设计系统是定义产品整体的设计,由一组共享、整合的元素及原则所组成。

如果以实体产品形容的话,你可以把它想像成乐高(Lego)。每个元件都是可以合成的模组,拥有千变万化的样式。由一个产品中心管控每个元件的品质,更改版本时也能够一并更新,让设计跟开发可以规模化。

图4. 可以设想Design System是乐高中心,每个人可以自由组合

 

3. 为什么需要设计系统?

3.1市场/平台逐趋成熟

由于数字产品的市场越来越饱和,大众对产品的品质要求更高

3.2建立产品一致性

不但是在单一产品之内,包含在不同平台及装置间的转换(iOS, Andriod, Saas, Mobile Web, iPad, or TV, etc),都希望能建立产品的连贯性

3.2加速开发过程

由于有中央控管的设计系统,成员可以随时领取元素、同步更新,减少设计与开发反覆确认的过程

3.4扩张产品团队

设计系统是由有清楚规范、一系列可重复利用的元素所组成,当产品模组化,可延展性就增加了

3.5专注于解决真正的问题

还记得烦恼下拉选单的样式一整个下午吗?或是与开发者讨论要多几个pixel的间隔、反覆确认的过程吗?设计系统让团队的每个人可以加速构思到生产的过程,专注于大方向的用户体验。

但设计系统并不是适合每个团队的,如果你现在身处一个小型、快速发展的公司,也许为了加速扩张、争取市占率,那么拥有设计系统可能会绑手绑脚的,不过能将设计系统的观念放在心上,对于未来发展十分重要。

图5. 市场成熟,用户对产品的门槛更高,更需要设计系统来维系产品品质

4. 设计系统团队组成

由于设计系统是持续更新的系统,定义产品的基石,组成成员可能包含:

用户体验设计师UX Designer

视觉设计师Visual Designer

动效设计师Motion Designer

内容写手Content Copy

前端开发者Front-end Dev

产品经理Product Manger

当然,非常重要的是要取得各方共识,及说服管理者投入资源,在这里不多做说明,有兴趣的朋友可以观看Design systems — Zero to one。

图6. 设计系统的核心成员

5. 如何着手?

万事起头难,根据每个团队会有不同的方法,本文分享个人在公司里推广设计系统的过程。大致上有六个阶段:

Seed种子期:心中有设计系统的概念

Collect搜集:搜集现有产品UI元素

Categorize分类:将现有UI元素分类

Discovery探索:设计探索所有可能性

Framing定义:收敛定义设计系统基本架构

Solution & Collaboration开发&合作:与开发者进行开发

现况说明:产品的设计规范Style Guide是由两年前的另位设计师所制定,自从产品上市后用户持续增长、在短时间开发更多的功能,过去的设计规范大多已不适用。

图7. 设计系统开发的六个阶段

5.1 Collect 搜集

截图、截图、再截图Screenshot all the components across products

首先,请不留情面地对你的产品截图,包含整个页面跟单一元件,目的是找出用户体验不同的元件。不论是花一个小时、一个早上、或是一整天,你会发现原来不一致的界面比你想像的还要多(总共24个页面及100个元件)。

产生原因包含:不同界面由不同的设计师经手、在开发过程为了方便快速,使用现成的线上元件等。

图8. 光是下拉选单,目前产品内就有不同的形式😂

5.2 Categorize 分类

寻找相同的界面元素Pattern hunting

将截图的各元素分类,试着从小处着手,以下是简略的归纳:

图9. 归纳过后的元件清单

5.3 Discovery 探索

a. 搜集现有设计(外部& 内部) Gather current design (external & internal)

这部分可以分成向外寻找、向内探索:

向外寻找External:寻找市面上类似的产品,搜集喜欢的界面元素。由于这次的产品为SAAS,主要的参考对象为:Dropbox , Shopify , Typeform , etc.

向内探索Internal:试着搜集过往的设计,找寻潜在的可能性。这些设计可能是已开发、待开发,甚至是归档的都有成为设计系统的蓝图。

图10. 以上是曾经设计过的prototype,可以做为设计系统的蓝图

b. 选一个界面进行思考Hijack a project

你可以选择一个正在进行的专案着手,或是最让你讨厌的画面、最有感觉的都可以。这阶段发散越广越好,可以先回顾先前整理的元件以及灵感来源,尽可能的创作。

而我选择用户使用时间最长的活动页面,重新构思设计系统的可能性。

图11. 选择一界面进行设计,发想的越广越好

5.4 Framing 定义

提炼设计Refine Design

考量到桌面版及行动装置呈现,选择使用卡片式的UI,并减少图片的面积,让活动主题和相关资讯更突出。

定义架构Define Guideline

有了以上的大方向后,这阶段是一个关键的精密制作过程。你可以定义一个元素、元件,或是模组,考虑到不同的使用情境、在不同页面的呈现,除了在Sketch设定Symbol之外,可以使用Google Doc做详细的叙述,以下是一部分的文件:

图12. 定义的设计规范

5.5 Solution & Collaboration 开发&合作

最后的大步骤就是和前端工程师一起定义设计系统,由于我们产品是SAAS平台,主要使用React。

图13. 反覆沟通的过程是为了确保Design System可以走得长远、易维系

 

6. 结论Conclusion

恭喜你看完这篇落落长的文章,希望能用轻松的方式让大家认识设计系统Design System,了解设计系统的使用时机、优点,及设计过程。

“ Design systems are always evolving , and the way you share and encourage adoption of new iterations will evolve along the way as well.”

– Diana Mounter, Design Systems Manager at GitHub

设计系统是持续演变的,不断分享、鼓励采纳,有助于新的迭代。

每一个公司都是独特的,不只是产品,还有团队跟环境,设计系统必须综合考虑所有的因素。Airbnb的设计系统不代表是适合你的。如果你还在烦恼如何开始着手Design system的话,希望这篇文章对你有帮助!

参与评论