相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

从落地到上线——设计规范全面构建指南

春哥发布于:2019-11-28 21:46 |原作者: 酒夏|
春哥
重庆市 江北区 GUI设计师
发私信 + 关注
简介: 本文非常详情全面地讲诉了如何从零开始构建一个设计规范,以及设计规范从落地到上线的实现过程和问题总结。希望对您有所帮助。
版权申明:本教程出自“酒夏”原创,感谢“酒夏”的原创文章分享!
从落地到上线——设计规范全面构建指南 飞特网 设计理论

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

为什么要构建MIZ Design?


背景

随着米庄app用户的增长,以及app不停的迭代,我们已经在设计上积累了越来越多的债务。越来越多的新页面,新功能,以及不同的组件,都是由不同的设计师来设计,前端也是又不同的开发来实现,这直接导致了整个app越来越臃肿无序,视觉和交互体验不一致,且团队沟通成本高,重复劳动力大,输出效率低,迭代速度慢。


现状-开发层面

1)代码混乱不统一

2)没有可控性和可持续性


从落地到上线——设计规范全面构建指南 飞特网 设计理论

场景:

设计师:涉及到这个组件的页面都改一下吧。

开发:改不了,每个页面都是单独写的,改起来非常麻烦,耗时间好资源好人力。

设计师:为什么同样的组件要单独写?

开发:我咋么知道,这是以前的开发写的。而且写的乱七八糟!

设计师:。。。。。。(一脸懵逼)

那咋么搞?不改也得改呀。总不能一直留着这些大大小小的毛病,不解决问题会越来越严重。

代码混乱,遗留的非常多的开发层面代码不一致的问题,后期迭代的过程中如不统一,也会使整个系统失去可控性。

现状-设计师层面

1)时间和精力的重复浪费

2)产品体验和风格的混乱不一

从落地到上线——设计规范全面构建指南 飞特网 设计理论

场景1:

设计师A:这个页面是谁做的?源文件有吗?

设计师B:不知道哎。以前的设计师做的。去库里找一下吧。

30分钟以后,依然没有找到源文件。。。

场景2:

开会:为什么这个项目的页面和以前的风格差很多!

设计师A:现在流行的就是这个风格呀,多好看!

设计师B:虽然设计每年都有流行趋势,但还是要和产品品牌风格相结合。


一个项目2个设计师负责,设计出来的页面控件:按钮,列表,输入框,色彩,视觉风格完全不一致。在2个设计师完成设计以后,还需要整合在一起重新修改,效率很低。并且每次页面中的元素,开发需要根据不同业务中的不同设计师"创意"来进行人肉修改。

当我们开始设计新的页面,功能需求点优化的时候,这个问题变得更加严重,同时,因为没有一个统一的基础设计规范原则,设计师在设计项目的时候,在做设计决策和讨论中花费了大量时间,会有大量的重复劳动存在。同时由于产品的界面和交互缺乏一致性和可预测性,用户体验也受到了影响。整个产品也将会在风格定位不统一,没有确定产品风格特质的情况下越来越模糊,失去自身品牌该有的特性。

产品迭代,基本上是基于新功能的开发设计迭代,新的功能新的页面不断的增加,对于设计师而言,有设计规范的原则做基础设计框架,更容易延续app统一的设计风格,不至于被不同的需求,不同的设计趋势以及蠢蠢欲动新的设计灵感牵着鼻子走。越做越乱。无章可循。

一个app就像自己的孩子一样,从一个嗷嗷待哺的婴儿逐渐长大成人的过程。设计系统就好比一个人的生物系统。是整个生物体的基础。如果对此系统不维护,那么此系统将随着时间越来越脆弱以及呈现不可逆的生命周期。那么如果维护好一个设计系统,那么骨骼会在成长下呈现规律清晰生长模式,会随着业务的生长而生长,可控制,可更新,使生物体健康发展去完成它的使命。

什么是设计规范?

从落地到上线——设计规范全面构建指南 飞特网 设计理论

design system 最开始是guide演化而来。guide是一套可指导,可延续,可扩展,可统一的,可区分的视觉指引手册,指导相关设计结构完成统一性与对外区分性。具象层,它是一种设计方法,抽象层,它是一种思考模型。

范例

最近几年,"Design System"这个词非常火。

先来说说红遍全球设计界的两大设计规范网红:

Material Design

设计价值观

  • Create创造一个将经典的设计原则和科技、创新相结合的设计语言

  • Unify开发一套统一的底层系统,保持各端一致的用户体验

  • Customize灵活多变的视觉语言,可让各家自成一派,形成独特鲜明的品牌风格


从落地到上线——设计规范全面构建指南 飞特网 设计理论

谷歌在2014年的Google I/O上推出了Material Design,它的目标是创造一个将经典的设计原则和科技、创新相结合的设计语言。并且在不同设备上提供一致的体验底层系统。并同时支持触摸、语音、鼠标、键盘等输入方式。

一经发布就红遍了全球设计界。新颖的设计理念,清晰明确的设计原则,详细规范的设计规范,使之成为完美的安卓端标准设计规范。也给设计界的设计师们提供了非常好的参考,很多设计师也MD设计原则延展更多的创新设计可能性,制作了各家的设计规范。

除了官方的sketch组件库以后,谷歌团队还开发了基于此设计规范的延展工具:比如基于 Material Design 色板的 Sketch 源文件下载;谷歌色彩颜色获取工具;一整套的Material Design IOCN输出;在2018年5月份的 Google I/O 大会上,Google 设计团队开发了一款叫做 Material Theme Editor 工具,可以帮助设计师轻松且快速创建符合自身品牌又符合 Material Design 风格的应用;

设计原则

从落地到上线——设计规范全面构建指南 飞特网 设计理论

材质是一种隐喻

Material Design的灵感来源于物理世界和世界中的材质,包含了材质如何接受光的影响以及所形成的光影效果。并且对纸张的质感和墨水的介质重新进行了构想。

从落地到上线——设计规范全面构建指南 飞特网 设计理论


18

好评
14

差评

刚表态过的朋友 (32 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

春哥
重庆市 江北区 GUI设计师
+关注 发私信
  • 柔美高贵风格的珠宝饰品VI设计
  • 科幻电影《木卫四》海报设计
  • 一套国外地产中介公司VI设计
  • 质感现代风格香水包装设计
  • FOFSO羽绒服电商宣传图设计
  • 国外茶饮店VI设计

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
  • 我们一直在进步...
  • 2022年3月27日,飞特派单系统第三次升级调整结束,订单匹配更快、更精准.
  • 2022年3月飞特派单系统日均派单量超过20单.
  • 2022年1月1日飞特系统派单数量达到2013单.
  • 2021年11月1日飞特需求方订单数量增长超过200%.
  • ...