Canvas画布设计经验总结

一、需求拆解分析

所有的设计必须服务于需求，所以在开始进行画布设计之前，对于需求的理解、拆分、重组极其重要，需求理解的透彻程度将直接决定产品的功能体验，下面以数据xxxx链路血缘项目为例，详细阐述画布需求的拆解与分析。

具体的产品需求为：能够根据搜索来查询到其对应的血缘节点；选中节点后能够展示其血缘链路关系；单个节点可编辑修改名称；节点间需有连线来展示节点走向；可展开收起上/下游节点，且单个节点可收起或展开；不同类型的血缘节点样式上需加以区分，画布整体布局合理美观。

在与产品经理具体持续沟通过画布需求后，大致归纳出的具体功能需求点如下：

对于以上9类主要需求点，需对其整理出解决方案：

1、考虑到后期画布组件的扩展性设计经验，将搜索节点的操作置于画布之外去操作，故在画布上层添加搜索栏来查询节点；

2、当选中某一节点时，将其对应的整条血缘链路视觉上做高亮处理；

3、节点之间添加样式和规则统一的连线组件；

4、增加右击操作菜单，可编辑节点内文本，将附加操作设置在画布本身之外；

5、单个节点根据链路结构添加展开收起上下游节点按钮；

6、单个节点需有缩略样式，可以和完整样式之间进行切换，切换按钮考虑放置于画布之外；

7、不同类型的节点样式上需加以区分；

8、单个节点的视觉规范尽量统一，节点名称过长考虑引用tooltips资产组件；

9、同级节点如果过多，考虑使用分段加载的技术方式。

画布需求分类梳理

二、确定产品目标

在需求梳理完毕后，这时应该对我们想要的画布产品有了一个大概的认知，所以必须进一步明确产品目标、使用人群、产品要达到的预期，以及后期的扩充维护计划等。

经过与产品、开发、用户的多方交流沟通，明确画布的产品目标为：

近期目标：用户可以使用节点搜索功能准确快速地查找节点，点击选中某一子节点可以展示其对应的血缘链路，单个节点支持自定义设置，节点间自动配置连线关系，节点可根据类型进行筛选，节点需支持可扩展的右击操作项。

远期目标：可配置节点连线关系，节点自定义、子节点自定义、拖拽节点位置、移动节点路径。

画布产品目标

三、头脑风暴-纸面原型

确定产品目标后，我们对：画布产品长什么样？有大致什么样的功能？怎么使用？已经有了较为清晰的理解，这个时候便可以快速进入到下一个设计流程：头脑风暴-纸面原型搭建。

根据前期的需求拆解及产品功能定义，可以尝试着把画布设计的思路付诸于纸面，将之前所积累的功能点逐一放置在其中，确保其能够形成一个完整的业务闭环。

纸面原型快速表达想法

四、确定交互及技术方案

完成了头脑风暴和纸面原型的搭建，这时候已经可以拿着初步草案去召集交互、开发一起来评审设计方案，画布功能不仅仅是设计方案的确定，更需要开发实现落地，所以进行技术评审尤为重要。

在评审的时候，我们发现，当前制定的设计方案中，交互方式并没有做到高度统一，这对于后期画布的维护迭代是非常不友好的，而且开发也希望将画布基础需求层和业务需求层分开，不仅是为了统一其产品逻辑，也是为后期更好地去做功能延展打下基础。

画布产品需求分层示意

所以基于技术实现方案，评审后确定下的交互方案是：

五、视觉设计

确定交互方案及了解技术实现原理后，就可以根据评审修改后的纸面原型，进行视觉设计了，此设计阶段需对画布节点、连线、锚点的样式进行全方位的定义。

此时画布视觉设计需定义的内容有：

1、主节点的主题颜色 (库)；

2、子节点的样式；

3、主节点的状态样式定义，包括：hover样式、点击样式、选中样式、右击菜单样式；

4、子节点状态样式定义，包括：hover样式、点击样式、选中样式、右击菜单样式；

5、连线样式（此项目没有连线的使用交互，故连线样式的状态区分不再赘述）；

6、节点缩略样式；

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!