网络物理系统通常涉及大量的移动设备，它们彼此之间以及它们的环境密切相互作用。标准的设计和开发技术通常无法有效地管理这些系统的复杂性和动态性。因此，强烈需要新的编程模型和抽象。为此，基于组件的设计方法是一个很有前途的解决方案。然而，现有标准设计方法要么不能精确地模拟组件之间的瞬时相互作用 - 这是典型的网络物理系统 - 或者不能保证在安全关键型应用中至关重要的实时行为。为了克服这个问题，我们提出了一个基于组件的设计技术，基于DEECo（组件可靠的紧急集成）。

传统的设计方法（新需求重设计）

组件化设计不只是一种方法更是一种沉淀。

刨开复杂系统的本质，从浅层上来讲，由一张张页面组成，通过瞬时的互相作用联系在一起。页面的填充物和瞬息的作用即是我们的组件。在用户操作高度标准化和规范化的今天，组件的拓展性和可复用的性质  ，在较复杂的业务中快速组合新页面。

       在传统的设计方法上，不同的系统（移动端，PC，后台等），需交互设计师和视觉设计师互相配合，往往在产品的前期需要探索设计的方向，考虑到业务的复杂性，所设计的页面，包括字段详细不像互联网公司一个页面针对一个需求。往往是一个页面针对多个需求。这时候就要考虑所设计的页面的拓展和延展性。毕竟作为整个产品周期的一部分，设计师的岗位设定不能完全涉及到从无到有，再到产品被资本和市场考验的程度，而只是产品设计周期的一小截。在视觉稿设计产出前，似乎谁也不知道页面会设计成什么样子。这样的工作模式的现状就是重复性业务页面设计制作、反复低效率的沟通、纠结的还原度修复。那么如何做才能在跨越产品的可能性上高效率的执行独立于产品的解决方案，解放设计师，让设计更具有效能呢？

       通常情况下，视觉设计师设计完一张符合需求且美观的界面时，通常还需要考虑各种情况，如文本较长，图片尺寸以及上传规范，异常流情况等。开发同学使用时也会添堵，闹出一些不必要的笑话。基于此，旨在思锐生态联建立友好、高效、一致的用户体验的同时，最大程度顺应和支持各各个环节出原型图（纠结还原度的修复）的时间，因为大家的标准都是统一的，实现用户与程序的共赢为目的，让产品组件化更加具有。「扩展性」「统一性」「逻辑性」「个性」四个方向上：

◦扩展性——组件化视觉表达，能够随着思锐多场景、多业务需求的变化进行延展和扩充。

◦统一性——各业务信息归类统一、简化。

◦逻辑性——信息层级清晰，增强主焦点认知，次要信息弱化。

◦个性——设计个性化表达。

Google Web端组件库

Sirui Mobile 基础组件V1.1.2版本

组件化设计并不是全能的，设计师仍然有很大空间设计出个性化的界面。

组件化后所带来的设计步骤的调整，产品经理和交互设计师沟通需求，迅速确定解决方案（在原组件库中寻求合适组件，搭建高保真的原型）、搭建设计规范、推动体验优化和迭代，再由视觉设计师个性化界面细节（如使用的插画，图标的定制）可与运营密切配合产品上线的落地，中间节省了各个环节出原型图（纠结还原度的修复）的时间，因为大家的标准都是统一的。

组件化设计的优势

移动端、web端、SAAS平台的类目，英文字母代表含义。（一个表格详细介绍中英文含义，作为整理）

接下来将展示由笔者起草设计的思锐移动端以及使用方法

（之前还有一款V1.1.1的PSD版本会在本文中提供源文件与大家分享）

组件化的整理对于交互设计师的优势：

◦高效率——准确性高、快速响应、有利于工作协同的交互输出，需求级到页面级的快速调取。

◦清晰化——视觉表达模块化，产品需求场景化，用户体验概念化。

◦体验量化——记录设计问题（界面友好可能性探讨）、探索用户研究、寻找交互依据。

在没有组件化之前，交互设计师都在做什么？考虑页面如何布局，纠结页面设计的可能性，考虑页面的还原度（像素级还原），这些有部分是视觉设计师考虑的问题，由于混杂不清，时常会在这块模糊区域内浪费很多共同时间。组件库很好的解决了这个问题，设计的标准化和可协调性。

如何开始我们的设计

移动端的组件内容有：

按照上方需要的来设计我们的组件，组件不只是视觉模块，还是包含交互和状态的变化。在旁边标注，方便给到开发，不需要每个项目不同重新码字。

设计软件平台：sketch小钻石3.0版及以上，设计尺寸1倍图（考虑到展示的平台有可能是电脑端，所以使用最小尺寸，另一个好处是web端或SAAS平台共用统一尺寸，实现体验一致）。

怕大家看不太清，放一些高清大图在下方～☺️☺️

组件的快速调用：sketch symbol

symbol调用方法

组合出的页面（笔者的部分工作文档）

效率提升到原来的15倍以上，一天可以出完一整个app页面（4-50页）；既然页面出来了，接下来要做的就简单多了。使用一些原型工具（Axure/skecth/POP by marval等）产出交互原型，然后审核会讨论，场景化体验。

至此，组件化的设计方法和使用方法就讲完了。

要是大家还没有看够可以下载笔者的源文件查阅V1.1.1版本

作者：Lay Chen

 "My name is Lay Chen"

I'm waiting for you on

Dribbble . Behance . Zcool