云图CAD——是怎么做出来的？

待我称王封你为后i 2022-12-29 04:33 227阅读 0赞

更新了许久的博客，今天想来讲一讲我正在做的一个三维设计软件。也算是国内第一代云端协同设计软件。这个过程非常不容易，我想讲给你听

**2019年初**，我们正式开始了对「模谷云」（云图前身）的探索。，我们走过了一年。其中艰辛无数，但感谢所有周围人的帮助与陪伴，让我们成长。云图三维经历50余人的反复打磨与迭代，也为后来云图软件的高起点埋下了伏笔。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70]

带着对国产工业软件的恨铁不成钢，带着对高品质新体验CAD的目标，我们正式出发。

云图是什么？

「云图」（全称云图三维，cloudcad  
等，以下简称云图），是一款在线设计、装配、渲染的CAD协作工具，是体验科技理念下的一款三维设计协作平台

**痛点**

*疫情在家，无法建模？  
笔记本带不动，束手无策？  
想学建模，每次都止于安装环节？  
好不容易安装好，  
面对复杂界面不知从何学起？  
渲染图一渲一天？  
模型文件疏于管理而丢失？  
……*

在工作生活中，

是否遇到类似的问题？

这就是我们的初衷与愿景：

三维设计，触手可及。

**这也就解释了「云图」是什么：**

设计师可以在这里进行idea的快速呈现，不受时空约束，在实时在线协作中提高效率。

新手小白可以在这里完成快速成长进阶，通过人性化引导教学，高效掌握增值技能。

高校师生可以在这里实现课堂协同教学，双方全程深度参与，师生共创课堂。

开始，我们迅速的做了用户研究和业务/用户场景梳理阶段：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 1]

也对应了主要用户画像：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 2]

在界面优化设计的过程中，我们对于产品的很多细节做了线上化处理，作为SAAS在线协作工具，「云图」也要符合web端的轻量化理念，所以，传统建模软件给予用户的“复杂”印象，便不适合用于「云图」。

传统建模软件界面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 3]

「云图-技术探索阶段」雏形·建模空间

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 4]

「云图-设计迭代阶段」低保真·建模空间

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 5]

「云图」最终界面·建模空间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 6]

传统软件—“广撒网”：在意功能的复杂度，但忽略了感受。  
「云图」—“深挖洞”：更在意用户的视觉感受，和交互便捷度。

**工具栏**

是产品与设计师触点最为密集的地方，所以工具栏作为交互热区，同样要进行轻量化处理。

传统建模软件对于功能的要求是复杂多样的，掌控复杂的软件

「云图」最终界面·建模空间-工具栏  
![在这里插入图片描述][20201219202334905.png]

工具栏可进行下拉选项，择选组内功能，常用功能智能常态。

专业版「云图三维」经过我们的分类折叠，基本满足所有功能，与传统软件同样强大，并进行更加人性化的分类（折叠Tab），以及分区域（底栏空间跳转）让用户的操作路径，更加自然流畅。

所以，「云图三维」显得更“轻”。

而试个人版「云图三维」，需要根据不同的云端用户群体对于三维设计功能的需求进行提炼，并按照优先级评级划分，最终选定以上优先级较高、足够满足线上中浅度用户的需求的功能。

底栏空间跳转，例：建模空间——装配空间。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 7]

轻，不仅在整个界面，也在于细节。  
我们想要通过一些细节，触动用户的内心，提升体验。

▪ 体验优化小案例

「对于3D导航块的优化设计」

「 传统建模软件 」建模空间 - 导航块  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 8]

传统的建模软件，对于设计师常用「导航块」的设计是忽略的，作为用户常用的，交互频繁的组件，如何注入体验感，是我们的设计方向。

「云图」最终界面·建模空间-导航块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 9]

不同hover状态下的视觉反馈：

相比传统建模导航，拥有更多的导航面（更多视角），更大的交互面（更方便点击），更Q的视觉感受（轻盈、亲和）。

除了22面最快捷的到达，同时提供最佳视角（轴测图），方便用户的最快到达需求视角。

相比传统建模软件，悬空表单更加轻盈，并且“可交互”，设计师可以根据自己的操作习惯，移动表单，实现用户的最大可操作空间。

云图三维官网：[https://www.yuntucad.com/][https_www.yuntucad.com]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70]: /images/20221120/208173044c9540d7b2d163eecd8c9e40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201219202154419.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020121920221472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201219202248134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201219202257406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201219202304554.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201219202313304.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[20201219202334905.png]: https://img-blog.csdnimg.cn/20201219202334905.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201219202403869.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/2020121920241536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201219202426476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTM4NA==,size_16,color_FFFFFF,t_70
[https_www.yuntucad.com]: https://www.yuntucad.com/