在七牛云校园创客马拉松中，一款设计优秀、逻辑清晰的白板作品脱颖而出，获得第二名。我是郑州大学白板Since团队的WhiteRose，以下是他们的设计和架构分享。1.前言白玫瑰是参加七牛云黑客马拉松比赛的作品。竞赛的主要内容是开发“多人协作白板”，旨在鼓励大学生用编程创造价值。比赛的核心要求包括三个：多人可以加入一个房间同时画画（随意画出尽可能多的形状）所有操作可以撤销和恢复，可以创建不同的页面，只读模式支持（页面锁定后，大家不能编辑）二、产品设计（一）愿景基于黑客马拉松的需求，研究了一些白板软件，这些软件存在很多问题，比如“操作困难”和“复杂的功能”。因此，我设定了一个产品愿景：“做一个两岁到八十岁都可以用的白板”（二）追求基于以上愿景，我也树立了几个产品追求：“功能一键搞定”“界面极简”、“内容高度自由”。作为乔布斯的粉丝，我记得乔布斯在设计iPhone时，要求工程师在3个步骤内操作所有功能。白板单独的软件，“进入”一步，“功能选择”一步，所以留给我的就只有一步了。（3）界面为了让界面足够简洁，我把所有的“扩展”功能都放到了“上、下、左、右”四个隐藏菜单中，这样整个页面就只有一个“纯白板”除了四个“必要数据”。”。对于两岁的孩子来说，可以直接随意涂鸦。对于八十岁的教授来说，就像课堂黑板。以下是整体界面效果。无论屏幕有多大，形状如何屏幕是，它会自动展开不失真，因为它本质上是一个高宽为100%的矢量图。由于不同屏幕的尺寸限制，这样的设计可能会导致屏幕小的人看不太“完整”》的内容比大屏的要大。对于一些软件的处理，可能会使用“拖页”功能来保证大家接收到的数据是一致的，也就是说用户每次触摸屏幕，软件都要区分用户是想“拖放”“页面”还是想“绘画”，用户也需要在两种功能之间频繁切换。而我的理解：“白板”本质上就是一张大草稿纸。当我们对一群人讲话时，“演讲者”可能会在白板上写下他说的关键字“powerpoint”。一般作为“演讲者”，都会写在大家看得见的地方，不会给“演讲者”增加太多负担，但要让“听众”听到内容，就得拖确认演讲者的页面写在那里，这个负担就更大了。回想一下，我们在课堂上教学时，老师会尽量把内容写在中上部的位置，而不是底部，因为前排的学生会挡住内容。所以我放弃了“拖放页面”功能。当然，“缩放”是另一种解决方案，但也会增加操作者（缩放）的负担，还会引入另一个问题，就是“失真”。关于颜色：其实在选择白板底色的时候，可能会选择白色，但其实白色也是五颜六色的。我应该使用什么？想到了一个词“绿红皂白”，于是干脆用“绿红”和“皂白”弄了个眼睛比较柔和的“绿红皂白”作为白板的底色。(4)扩展功能整个页面设计完成后，接下来就是功能设计了。我在界面设计的时候，保留了4个隐藏的菜单栏，用于扩展白板的功能。为了让所有功能都“一键式”，也为了更方便使用，我采用了图标+文字说明的方式，让用户更容易理解。整体开发如下图所示：为什么要这样放？1.功能分类根据比赛需要的功能，我把所有的功能分为四类。形状扩展：用户可以选择圆形、矩形、菱形、三角形、直线等形状。颜色扩展：用户可以修改所有形状轨迹的颜色。尺寸扩展：图形尺寸和线条粗细可以切换。页面扩展：页面可以增删改查，页面内容支持撤销和恢复。2.放在哪里在思考这个问题的时候，我想象了在一张纸上画画的场景。一般我们习惯把各种水彩笔放在桌子的右边，方便我们切换颜色，所以我把“颜色扩展”放在右边。我们习惯把尺子、圆规等工具放在桌子的上边和左边来展开图形，丰富画图的形状，所以我把“形状展开”和“尺寸展开”放在了左边和上边。我们在做翻书、撕页等翻页操作时，一般都是从右下角开始，所以我把“翻页”全部放在了下边，右下角有相应的页码，因为大多数书籍的页码都在这个位置。(5)自由布局上面我已经按照个人的想法对各个功能进行了分类，按照我理解的“更方便的布局”进行了排列，但是在实际操作过程中可能不会遇到其他一些用户。操作习惯，如：左撇子。因此，我将各个功能整合在一起，可以自由改变不同功能的位置，也就是所有功能的布局。用户可以根据自己的想法DIY布局。3.架构设计因为这个项目的开发周期只有21天，而且工作日白天上班时间非常紧迫。因此，需要采用非常简单高效的架构设计，当然也需要考虑一些后续扩展的可能性。（一）整体架构为了更好的“持续集成”，我们使用自建的gitlab管理代理，使用gitlab-runner完成自动部署。整体架构图如下图所示：(2)交互模型对于后端，为了更高效的交流，我将整个交互模型定义为一个群聊，群内的所有消息都发送到服务端统一方式，然后服务器再转发给其他人。后台只需要确认三点：1.消息是谁发的。2.发给那个群。3.消息类型。整体交互结构如下：{"type":1234,//操作类型"fromId":123,//senderid"roomId":1234,//他所在的房间"time":152150025421564//timestamp，前端不需要send"data":{}//操作内容}这样做有两个好处：所有的消息都有统一的时间（即服务器时间），后端不需要付费注意“数据”的具体内容。“接收”、“分发”和“存储”操作只是根据类型来区分的。(3)数据模型数据模型主要是前端发送和接收的消息中的数据结构。数据中应该放什么？我把用户所有的操作都定义为选项，把用户所有的选项都放到数据中，完成用户操作的转发。选项结构如下：interfaceOp{type:number//页面操作还是图形操作graph?:{op:number//添加、旋转、缩放、平移type?:string//图形类别key?:string//图片所在位置对应的keypage?:number//图片内容对应的page?:any//图片内容}page?:{op:number//添加、删除、切换页面key?:number//keycontent?:any//页面对应的内容}}像这样的每一个option都会存储在操作栈中，结合另一个缓存栈，可以实现undo和restore。(4)多人协作多人操作实际上就是多人对多个图形进行操作，人与当前操作的图形之间存在一一对应关系。所以我用token集合的概念来存储“所有用户id”和当前“每个用户操作的图形id”，从而判断每个用户操作的是什么。不同用户的操作通过以下过程完成：操作者设置当前操作图形的id，更新token集合。接收方同步更新令牌集。操作员发送操作数据（选项）。接收端根据用户信息从token集合中确定要操作的图形，然后根据option修改具体的svg数据。整体白板从产品设计到架构设计就结束了。欢迎体验：http://whiterose.cf.since88.cn前端代码：https://lab.since88.cn/whiter...后端代码：https://lab.since88.cn/whiteros
