页面组件化

工作期间，很多人都会碰到这样的情况，方案制定完毕后sketch和axure区别，由于特定缘由，必须成批调整所有边框的弧度，或者某个系列按钮的色调……遇到此类状况，就应该认识到模块化设计的价值。

什么叫组件？

「组」把分散的人或物组成一个整体

「件」不同的个体原件

构成模块需要对功能表现和界面呈现的细节进行剖析、提炼、整合，以实现高效利用，并制定统一标准，这类模块是系统整体结构的基本单元，例如操作按钮、路径指引、内容分类等，它们具备明确的规范和广泛的应用条件

组件化的优势

能够促进样式一致，在常规设计工作中，我们经常把某个部件的元素用到好几个地方，如果我们每次都单独制作，每一个设计都有点点不同，这样会让整个工程看起来不统一。

有利于团队配合：当众多设计师共同推进一个项目时，标准化的构件设计有助于维持设计成果的一致性，防止产生多种风格混杂的情况。

提升工作效率：能够精确找到问题源头，同时使后续的维护和调整变得简单，一旦出现故障可以迅速确定故障点，团队成员借助模块可以展开合作和更新，降低了不必要的交流开销，从而增强了工作效能。

有利于后续调整：若需变更按钮的边框弧度或色调，在组件化架构中，针对设计及开发人员而言，仅需更改组件原型，所有运用该按钮的界面都将自动更新。

组件的命名

重新定义组件的标签时，需要依照特定的规则，一套周全的规则能够帮助开发者和设计师更轻松地定位和运用

组件化创建流程 / 前期调研

先前对、、Axure这三个软件进行了研究，了解到它们在组件化方面能够彼此配合。因此，意识到了这款收费软件的更多价值。

合作使得组件化输出更为便捷，有助于开发人员辨识命名及组件构成。

同Axure配合使用有助于加强设计环节和产品环节的交流，也利于交互人员向产品方共享组件资源库。

组件化创建流程 / 方案设计

针对开发人员，我们的策略是：将构成组件的页面分批次提交，并配套上传组件库的文档资料，以便将页面与组件建立对应关系，其好处在于，既能让开发人员掌握整个应用程序的构建情况，也能让设计人员依据组件化的页面进行审核，同时，通过这种关联方式，开发人员可以在页面中识别组件的名称，设计人员也能在组件中了解其应用到的具体页面

针对设计方面，我们的做法是：将组件明确划分为基础元素、功能模块和系统图标三类，分类完成后，统一存入资源库中，以便快速选用组件来搭建新界面。

针对产品方面，我们借助插件将组件引入Axure，构建元件库，这样产品便能在遵循规范统一标准的基础上，制作出高保真原型。

组件化创建流程 / 问题分析

在模块化构建过程中，遭遇了若干难题。首要问题是关于字体实施模块化标识。由于设计既需为字体色彩赋予语义化标签，又需进行模块化命名，二者只能择一保留，最终决定采用必须的颜色语义化标签。这就要求开发人员实现时，必须依照表格逐一核对每个字体，这种方式极易产生错误，并且是一种非常不便的解决途径。最终经过与产品部、研发部、沙老师以及小毅哥的商议，决定由前端团队负责插件的开发工作，这样开发人员能够通过一个按钮操作，直接得到符合组件化规范的字体命名方案。

第二个问题在于组件存在多种形态时，我们起初无法完整呈现所有情况，经过讨论决定，在采用相同界面设计的组件中，针对不同形态在尾部加上#并标注形态名称，以便设计、产品、开发三方能够清晰识别。

第三个问题涉及组件化设计环节，首要目标是提高效率，外观可适当放宽，因此整合了部分非必需的字体，将间距、列表高度等存在细微差异的规格进行统一，以此削减了整体组件的总数。

组件化创建流程 / 场景走查

组件化工作遍及整个应用程序，且是初次实施。项目从启动到最终验收，历时约五趟车程。设计及产品同事仅用两趟车程，便完成了组件的输出与归类。开发人员则分阶段投入，历经四次车程，最终实现了整个应用的组件化开发。

实施走查工作分为两个环节，首先，针对每趟列车，需要检查其对应的相关页面元素，当四趟列车的检查任务全部结束后，其次，将自己当作产品的核心使用者，依照用户实际操作路径，对线上产品进行全面体验，务求覆盖所有可能的情况。

尽管整个流程颇为艰辛且令人难受，不过最终获得了一条熟悉的模块化途径，而且达成的页面呈现十分理想，并且对于后续设计、构建、产品针对新要求进行组件运用极为方便，因此这般付出是值得的。

Dark Mode

随着 iOS 13 和 10 的流行，为应用开发深色模式已成为业内的一种普遍做法，快速适应这一功能，依照平台的新功能进行设计，是当前设计领域中大家普遍面临的一个难题。

为什么要做Dark Mode？

OLED屏幕正变得日益常见，采用这种屏幕的设备若能开启夜间模式sketch和axure区别，则能显著减少能源消耗。

黑色背景有助于使用者集中精神于主要信息，在办公环境中，集中精神十分关键，唯有增强使用者对操作内容的注意力，方能提高工作成效。

提供更多样化的视觉风格，让用户界面带来新奇体验和意外感受，有助于提升应用使用时的快乐程度和用户留存率。

Dark Mode设计要点

色彩反差要足够：确保易用性,夜间界面并非纯粹的黑夜场景，因此各项界面组件必须让使用者容易辨认、浏览、操作。

不要过度运用明亮色调，在夜间界面中骤然显现的浓烈色彩，因其显著的亮度和饱和度，会与暗色底板产生剧烈反差，进而使用户感到不悦。

我们的应用程序在页面设计上，采用了特定的亮色和点缀色，这些色彩仅在小面积使用时呈现，在彩色模式下无需特别调整，而在黑暗模式下则无需进行任何改动；关于黑白灰的色彩值，我们参考了其他应用程序的用色方案，去除了纯白色（#），并将整体亮度降低了一个层次，这样做既确保了用户能够清楚地识别和阅读内容，又有效降低了页面的对比度，从而实现了既保证辨识度又保护视力的双重效果。

Dark Mode创建流程 / 初期探索

下图左侧，初始阶段我们制定了APP的日间与夜间色彩方案，这些数值提供给参与夜间模式设计的同事，他们需据此绘制APP关键页面的视觉预览图。

右面有针对产品与开发人员的两种方案配色清单，开发人员只需将表格中的键值与颜色一一对应，便能够实现暗黑界面设计。

Dark Mode创建流程 / 方案修改

修改

确立色彩标准化的称谓体系：依据界面文字色调，底色，多色运用，以及行业专有色彩这四个方面，对色彩称谓进行重新界定

将十六进制颜色代码对应的色块补充完整，能够帮助各个部门在查看表格时更直观地辨认，从而降低使用颜色时产生的偏差

优势

转换主题更便捷，借助这个Key充当桥梁，主创设计师明确Key与色彩的关系，并验证其在不同主题中的可用性，其他设计人员只需在一个模式里用Key标记色彩，程序员在程序里用Key设定色彩，就能迅速切换主题并确保方案有效，无需记住多种主题的详细颜色配置。

优化设计制作与开发进度：设计方仅需提供日间版界面，明确各组件色彩含义的键值，开发人员便能用该键值快速生成夜间版界面。

Dark Mode总结

运用恰当的色彩控制方法，能够明确视觉设计的正确路径，从而显著降低设计和开发过程中的人力物力投入，所以Dark Mode总共耗费的时间，大概相当于三四趟公交车的行程，就已经顺利通过验收。

整体而言，实现深色模式是一项需要耗费大量时间和精力的庞大任务，同时也是当前所有设计人员都必须应对的难题。然而，所有这些付出都是为了确保用户在使用我们的产品时能够更加惬意。

全局骨架屏

空白页是页面的初始形态，它用来表明页面内容正在逐步呈现中。这种初始形态的布局与最终页面效果相符，能够帮助用户将注意力集中到期望了解的部分

骨架屏何时使用？

(1).  网络较慢，需要长时间等待加载处理的情况下。

(2).  图文信息内容较多的列表/卡片中。

(3).  只在第一次加载数据的时候使用。

骨架屏初期方案

最初设想是先制作一个固定的网页版本，然后利用AE软件制作动画效果。针对iOS系统，需要将动画文件转换为JSON格式提供给程序员使用，而安卓系统则要将动画保存为GIF图片格式。

该方案具备显著效益，能够大幅度降低构建开销，同时有效削减了部分审查环节所需投入。

该方案存在明显不足，在后续的界面更新和暗黑主题开发过程中，其缺点十分突出，每次界面迭代都需要制作十几个基础界面的静态和动态素材，并且还要为暗黑模式单独准备相应的暗黑版基础界面，导致设计任务量急剧增加。

倘若继续沿用这种策略，往后的每一次界面更新，都将迫使设计人员经历一次艰辛的骨架界面替换过程。在这样频率低且重要性不高的情境中，投入如此多的设计资源实在是不合情理。

骨架屏方案优化

设计团队针对既有方案反复与产品、研发人员交流，旨在缓解设计人员的困扰。技术团队选择编程来构建基础界面，经由双方持续磋商和调整。当前开发完成的基础界面已可在两种场景下顺利运行。

这个计划显著缓解了设计方面的难题，同时也充分挖掘了技术专家的能力。总而言之，当某个策略导致整体环节运转不畅时，需要加强跨领域交流，探寻最佳最匹配的路径，以此提高整个集体的效能。

我们团队在开发“”APP时，对于组件化、Dark Mode、骨架屏等项目，总结了遇到的问题和解决方法，期待未来在其它APP项目中能够更加得心应手。阅读本文的各位，相信多少都能有所启发，若有欠缺，恳请不吝赐教。同时，欢迎大家转发和留言互动。

限时一个月福利大放送

小艺儿已经提供了那些资料，各位是否已经看够了？此处另有一门价值极高的学习项目《品牌卡通IP形象训练营》奉献给大家。这门课程能助你掌握一项崭新本领，从而开拓更多创造价值的机会。

课程试看

领取方式

01

如有侵权请联系删除！