集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

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

发布者: 成都达内     浏览次数:     发布时间:2018-11-16 09:34:48

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

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

  从一个产品到另外一个产品,UI模式、色彩、图标、甚至字体样式都不一样,因此要做好设计系统。

成都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培训机构网站联系删除或授权事宜。

(责任编辑:徐老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街紫东段35号明宇广场2306

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56