成都ui培训
达内成都锦江中心

18628200088

热门课程

成都ui培训班听行业大咖讲解,如何做好大型的视觉设计系统?

  • 时间:2019-01-10 16:07
  • 发布:成都达内
  • 来源:成都达内

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

从一个产品到另外一个产品,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)。

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

“ Set of shared and integrated patterns and principles that define the overall design of a product ”

— Karri Saarinen, Principle Designer at Airbnb

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

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

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

3.1市场/平台逐趋成熟

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

3.2建立产品一致性

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

3.2加速开发过程

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

3.4扩张产品团队

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

3.5专注于解决真正的问题

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

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

4. 设计系统团队组成

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

用户体验设计师UX Designer

视觉设计师Visual Designer

动效设计师Motion Designer

内容写手Content Copy

前端开发者Front-end Dev

产品经理Product Manger

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

5. 如何着手?

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

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

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

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

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

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

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

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

5.1 Collect 搜集

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

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

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

5.2 Categorize 分类

寻找相同的界面元素Pattern hunting

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

5.3 Discovery 探索

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

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

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

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

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

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

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

5.4 Framing 定义

提炼设计Refine Design

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

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

5.5 Solution & Collaboration 开发&合作

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

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

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

版权声明:文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益,请与达内成都ui培训机构网站联系删除或授权事宜。

上一篇:成都ui培训:手机APP的底部导航有什么用,怎么设计更好
下一篇:成都ui培训:设计师如何利用好心智模型,成功说服甲方

成都ui培训:设计师必须了解的美术基础!

成都Ui培训机构讲解UI设计适合哪些人学?

成都ui培训班:找UI工作的正确姿势

成都ui培训:UI设计师可以胜任哪些高薪岗位?

选择城市和中心
贵州省

广西省

海南省