在过去一年多的时间里，有了在艺术行业的洞察与创新体验，做一款高质量、高效、功能强大的产品。
ArtPro 致力于构建全球最完善的艺术市场信息库，方便藏家和艺术从业者更快捷地获取艺术家及艺术品相关信息，同时提供一系列决策支持及查询工具辅助艺术品研究和交易。我们在这个设计过程中，关于如何提高团队效率，也总结了一些经验来跟大家一起分享。
01
组件化
“组件化”这个词相信大家并不陌生了，当我们进入一个成熟的团队时，团队的文档中都会有设计规范和组件库。
但是，对于创业团队或新项目而言，我们未必会选择在产品从0到1之前，拥有一套组件库。我们的产品ArtPro前期就选择了保留足够的试错性，随着产品趋于成熟，无组件化带来的弊端也显而易见了，所以组件化被迅速提升了日程。
A. 什么是组件
「组」把分散的人或物组成一个整体
「件」不同的个体原件
组件是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成的规范化模块。它就像组成完整框架的单元体（比如按钮、导航栏、tab栏等），具有标准规范和可复用场景的基本模块。
B. 无组件化弊端
未组件化给我们带来哪些问题呢？
是统一性差，相同的组件被多次创新后，其一致性就难以保证，从而增加了用户的认知成本。
设计稿的维护成本随着项目的不断迭代，变得越来越高，同时，设计师之前同步不及时，也会造成更大的维护成本，从而降低合作效率。
开发成本不断增加，开发需要写重复的样式，没办法全局调用，耗时耗力，也会导致安装包的体积大，影响产品的性能。
跨部门协作的效率非常低，机械的页面设计、反复的低效沟通以及重复的check实现效果，都给团队带来了负担。
C. 组件化优势
组件化又能为我们带来哪些好处呢？
除了能解决上面提到的这些问题，组件化设计还能为我们带来更高的收益。
传统的设计流程主要采用一串式的合作方式，从产品到设计，从设计到开发，再到设计check效果，多个同属性角色并行工作，而相同角色间缺少交集，造成大量重复工作的产生。
而组件化之后我们的工作流程会变得协同性更高，产品可以在设计产出之前知道页面的样子，设计师也可以直接取用组件快速搭建新页面。能够大大提升团队协作效率，节约公司成本。
通过组件化，在以后的更新中可以连续迭代，避免断层。团队中有新成员的加入，也可以通过规范和组件库快速上手，保证项目的顺利推动，减少多方沟通的成本。
D. 如何搭建组件化
说了这么多，如何来搭建组件化呢？
明确目标
ArtPro本次组件化的目标是实现产品、设计、开发三方高效率协作，降低沟通成本，让设计从机械的页面设计当中解脱出来，可以将精力放到更多创意设计当中去。
另一方面，将不同样式的相同组件进行统一化处理，以提高产品统一性和延展性。
形成组件目录和命名规范
明确设计目标之后我们就可以开始执行了，一套统一的组件目录和命名规则，不仅可以实现产品、设计、开发的无缝合作，也为今后的管理带来了方便。
组件化创建流程|前期调研
前期通过对Zeplin、Sketch、Axure三个软件的调研，发现它们之间针对组件化需求，可相互协作。从而发现了Zeplin这一付费软件的更大用途。
Sketch与Zeplin之间的协作方便了设计组件化输出，方便开发识别命名与组件元素。
Sketch与Axure之间的协作方便了设计与产品之间的沟通，方便了交互同学给产品提供元件库。
生成组件库
我们需要由一套设计规范衍生出两套组件库：
-sketch ui 组件库：面向对象是视觉设计师
-axure 元件库：面向对象是产品经理和交互设计师
先将页面进行拆解，将组件分离出来，按照定好的目录规范，生成完整的组件库。
组件库实现和走查
前端开发按照设计给出的组件库进行代码迭代，最终实现结果由设计、产品验收。虽然组件化涉及到整个app，而且是初次去做。但是整个项目从立项到验收结束用了大概五周时间。
组件化创建流程|问题分析
在组件化开发的过程中，遇到了一些问题：
1. 字体组件化，由于既要给字体颜色语义化命名，又要给组件化命名，二者只能保留一个，最终保留了必须要的颜色语义化命名。但这样需要开发在实现的过程中按照表格去查每个字体的组件名，极容易出错，且是一个很不便携的方案。最后通过跟产品、开发的沟通决定让前端同学开发Zeplin插件，开发同学在Zeplin一键即可获取字体组件化命名。
2. 组件的不同状态，不能全部展示出来。最终写上出方案，在同一组件下，命名增加“#组件状态”来区分状态，实现设计、产品、开发三方更好的协作。
3. 组件化过程有大量相似、冗余组件，为加强统一性、提升设计开发效率，我们合并了一些不必要的字体，把间距、列表高度规范有细微差距的合并统一，减少了整体的组件数量。
02
Dark Mode
随着 iOS 13 和 Android 10 的普及，为应用设计 Dark Mode 也是业内的趋势之一，及时适配这一特性，遵循平台的新能力也是大家目前设计工作中纷纷遇到的挑战。
A. 为什么要做Dark Mode？
OLED的省电特性
随着OLED屏幕的逐渐普及，为使用OLED的设备开启 Dark Mode 可以有效降低设备的功耗。
专注
黑色的背景能让用户更加专注于核心的内容。在办公场景下，专注是一件非常重要的事，提升用户对使用内容的专注度才能提升用户的工作效率。
美学选择
给予用户多一种美学的选择，给予用户使用界面的新鲜感和惊喜感，会增加用户使用应用的愉悦度和粘性。
B. 设计要点
足够的颜色对比
保障可用性 黑暗模式不是夜间模式，所以界面的元素一定要让用户能清晰的识别、阅读、使用。
避免大面积的鲜艳彩色使用
在黑暗模式下突然出现的大面积鲜艳彩色因为会有较高的明度和饱和度，会和深色背景形成强烈的对比，从而让用户不适。
结合以上要点将Dark Mode应用到我们APP，页面中用到的小面积点亮色、点缀色黑暗模式下可不做调整；针对黑白灰色值，我们参考其他APP黑暗模式去掉了纯白（#ffffff），整体亮度降低了一个层级，在用户可清晰识别阅读的情况下降低了页面对比度，做到了即不模糊辨识度又护眼的目的。
C. 创建流程
初期探索
下图左侧是，初期阶段我们设计首先做出了APP内日间模式和暗黑模式的颜色对应值，供参与黑暗模式设计同学参考并需要画出APP内重要页面的效果图。
右侧是提供给给产品和开发同学提供的两种模式下对应的色值表。开发同学只需把表格里的Key和色值对应好就可以做出黑暗页面效果。
方案修改
1. 为颜色建立规范命名系统,按照UI文字颜色，背景色，彩色，和业务特殊用色这几个维度重新定义颜色命名。
2. 把十六进制的色值对应的色块填补上，更容易各部门浏览表格时视觉上识别，减少应用颜色误差。
D. 优势
更快适应多主题
通过这套Key作为中介，核心设计师确定Key值对应的颜色并确定在多主题下可行之后，设计团队的其他设计师只要在一种模式下用key来标注颜色，开发在代码中用Key写入颜色，即可快速适应多主题并保证方案可行，不必去记忆多套主题的具体色值。
提高设计与开发效率
设计只需给出日间模式下的UI页面，只需要对应元素颜色语义化对应的Key填写好，开发就可以通过Key一键做出黑暗模式UI效果。
E. 总结
通过合适的颜色管理方式，找到正确的视觉设计方向，最大程度的减少设计和开发资源的损耗，设计加开发约十人用时三周，达到完美验收。
总的来说，Dark Mode 的适配是一项费时费力的巨大工程，但又是在当下所有设计师不得不面临的挑战之一，但所有的努力都是让用户使用我们的产品更加舒适。
03
全局骨架屏
骨架屏是一个页面的空白版本，通过这个空白版本来传递一种信息，即页面正在渐进式的加载中。骨架屏的布局能与页面的视觉呈现保持一致，这样就能引导用户的关注点聚焦到感兴趣的位置。
A. 骨架屏何时使用？
网络较慢，需要长时间等待加载处理的情况下
图文信息内容较多的列表/卡片中
只在第一次加载数据的时候使用
B. 骨架屏初期方案
初期方案
设计做出静态页面，倒入ae做成动效。iOS端需要把动效导出json给到开发，安卓端需要把动效导成GIF。
优势：在很大程度上节省了开发的成本，减少了一定量的设计走查成本。
劣势：在后来的UI改版，黑暗模式项目上，该方案暴露出很大弊端，每次UI改版设计都要输出上述的十几个骨架屏的静态动态元素。而且针对黑暗模式还要输出对应的黑暗模式骨架屏，针对设计工作量是几何式上升。
如果依旧用此方案，之后的每次UI改版，将都会对设计是一次痛苦的骨架屏更替。在这种低频不重要的场景下，这样消耗大量设计精力是不必要的。
骨架屏方案优化
设计部门针对之前方案多次跟产品、开发同学反馈，为了减少设计同学的痛点。开发团队决定用代码去实现骨架屏，通过开发与设计之间的不断沟通、修改。开发实现出来的骨架屏已经在两种模式下正常使用了。
此项目在很大程度上不仅解决了设计的痛点，还激发了开发大佬的潜能。遇到一个方案降低整个流程效率时，应该多去跨部门沟通，找到最优最合适的方法，来提升整个团队的工作效率。
04
总结
以上是我们在“ArtPro”APP的组件化、Dark Mode、骨架屏等项目中，遇到的问题和方法总结，希望可以给大家带来帮助。我们的目标是确保用户体验的同时，提高团队协助效率，让团队合作变得更加顺畅。
文章来源： 设计腕儿 ，版权归原作者所有
原文链接：
https://mp.weixin.qq.com/s/s2Ux9l2C1-S3dUwm5-G51A
版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源。本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证，仅供读者参考。文内出现的商标及图像版权属于其合法持有人，只供传递信息之用，非商务用途。如无意侵犯到您的权益，请及时联系我们处理。本公众号不承担任何责任，并拥有对此声明的最终解释权。
联系微信：Meia_99
推荐关注IXDC视频号
点这里，一键进入IXDC2021国际体验设计大会！
热门跟贴