【校招VIP】高校大学生自己的商业项目|原型 ：活动发布流程设计

VIP的服务，不一样的校招。大家好，今天的课程是活动发布模块的第三节，在上一节里面，我们对活动发布模块的脑图里面的功能要点已经确认下来，那么这一期，就进入到很多新手同学特别在意的原型图的设计里。

一.基本原则

完成任务的能力。

在公司里提前沟通任务内容，工作量是一定的。因为功能在商业环境里达到了具体性，功能要点在制作过程中不要发生改变，不然最后还要反工。

功能之外，原型图最重要的是考虑用户的交互和功能点的优先级，就是功能的位置。这需要我们对常规APP或移动端页面的交互多多学习。做的时候出现问题，比如交互到底是用tab好，还是用滑动好。那么问题需要做原型措施时去考虑。最后才能达到一个比较完善的原型图的结果，能力才能得到更好的提高。

动手做移动端页面的时候，很多同学遇到的第一个问题就是宽度。一般移动端高最小不少于一屏。宽度方面，375和750是目前设计的两个标准，375是最后展示的一个正常的像素标准。

做很多图片的时候，高分屏要用750。使用750的时候要注意文本乘二，不然一行五六十个字，跟PC的页面没区别，样式上会出现问题。

一般来说，两种选型都会使用，但是在做移动端原型图的时候推荐选择375，因为做产品的很少会去画图，把最重要的点以及它的交互表现出来，后面的高保真图放给UI的同学直接把二倍图做好。

目前有一个现象，一些培训班不要求专业，只要专业和产品有一定关联性就行。比如交互设计，既可以走平面设计，也可以走UI，或者交互和产品。但是对大部分产品而言，交互就是和专业无关的，会画原型图和高保图不是产品优点，很多培训班为了表现自己的优势，就会这样做。

现在市面上正常画的草图叫原型图，只要功能定位清楚，水平高的产品经理用手都可以画出一个，并且会把难点交互画的很细致。另外一种叫高保真图，就是把页面画的非常漂亮。

要考虑两个问题。第一，整理产品流程要花费大量的时间。时间放在产品真正的交互和逻辑上可能不够用，但如果把时间放在图片的绘制上，一是能力不够，第二是时间不够。

最重要的是作为一个产品，这些图片最终的生成是由UI这个职位来做。如果越俎代庖去设计UI，就会造成两个问题，对UI来说，他不想用设计师的交互设计，那设计师花多少精力都是无用功。第二就是会干扰UI的设计。

所以一般来说，我们不太希望大家走到这条路，会花大量的时间，最后还可能反工。

二.交互的完整性

第二点，根据上一期原型确定的功能点来动手。如果不是很记得，可以去看第二期第二节课脑图的要点。

首先画脑图，现在每个人的基础不一样，所以就用最原始的方式来做，我们会有很多的一些组件，先画个375的框。

时间问题，后面的部分不能带着做。如果大家觉得课程讲的太快，理解不了。有两个办法，一个是课后自己按照自己的方式去实践一下。第二个方式，走我们在线实习的实习模式，老师会把功能告诉大家，再让实习生去设计，这时很多走不通的地方要自己思考。做完之后的讲解就是实习所得。

一般来说这个页面的发布模块有个口，这个口有通页头，叫发布活动。

目前的定位是放在小程序里面，但是有些页面是做成移动端的网站的网页，所以这个位置上是不放东西的。

作为产品经理，要知道小程序上常用默认的一些组件，比如它的三个点或者其他等等，这时如果要放一个后退的按钮，一定是做了个单独模块，做单独模块会有个口，这活动是在APP的最下方或者用户中心，还有个口就

是发布模块入口，会蹦到这个主页上去。一般来说，我们认为它是一个二级页面，就是这个核心模块的主页。

参考精品图，基本雏形有两部分，一个是活动信息，一个是活动的设置。

活动信息可以给个标题，这个自己放比较好。然后下面的一部分是信息，实际上这个地方不是C端业务， C端业务每个业务有它的特性，这个更像一个后端业务，比如微信个人设置那个部分。

作为成熟的或者去公司实习的产品经理，首先要知道前端有一些默认的样式库，比如want或者element UI，里面有一些会对后台常用样式的交互。比如第一个活动类别，首先要追求美观，我们不知道全部功能时，可以先放文本。

注意交互上有两种方法，一种方法是底色是白色，一种方法底色是灰色，底色是白色的话，会用这个灰色块给切开。

画图的时候脑子里有个概念，知道原型图是什么样，做的时候再进行调整，最后就比较完善。

这个活动项后面还有一个活动设置的模块，里面有活动类别，活动标题，和活动详情图片。

活动类别考虑个人的交互，先把东西填上去。后面是选择框，所以它是一个选择项，用户没选择之前，就放一个未选择，再加个镜头。这个时候看闭环要注意选择完之后显示什么，怎么显示的。交互都在下面。

东西太多可以再画个页面出来，这时候复制弹框，会好看一些。我们可以加动作，页面不是很多的时候，就放一起展示看。这个不用严格切换，因为是有默认样式的，把它复制过来。

类别选择里，标头可以换一个颜色，因时间有限，这个通用的东西就不去换了，下面的元素比如旅行，需要有个选中状态，红色的是选中，这么一画，UI就会去做最终的模型。然后这个旅行、还有一个是聚会，还是其他。

所以这个时候就发现，选中之后，我们可以给它加一个全部都选中的样式。因为这表达是一个页面，选了旅行之后，下次点开的时候页面会自动选旅

行，这是产品功能。有两个点，一是在原图上加一点备注，第二，P文档上写一下，选中这个参数要能跟踪和传递。

再画第二个活动图标，复制活动标题，活动标题是一个输入框，这个地方就用文本框。如果追求美观，也可以加个横线分开，再画下去，大概是这种思路。时间关系，我们看一下最终结果，大概知道怎么做。

左边跟我们之前的脑图设计一样，活动类型可以选择之后到这个地方，活动标题输入不超过32个字，点活动详情会蹦到活动详情页面，这包括两个部分，一个是图片的亮点，要求不超过150个字，活动内容字数不限，但这里不能出现手机号等联系方式。如果不写的话，其他人可能就忘了这个点，上线之后就会出现对应的Bug。

这个地方提供了下一步的样式，就是可以直接不回到这个首页，直接往下一步步进行，这个图片就是我们移动端常用的标志，往上可以加不超过四张。

然后是活动设置，这个模块看着简单，要做的漂亮很难。有很多同学做的时候因为输入块太多，功能点非常乱，操作非常集中。活动人数就回到这个页面，不要搞那么复杂，在学校里的活动，最小人数和最大人数去设置个值。如果达到了最大人数，还在报名中也不能报了。或者报名已结束，人数没有达到，那这时候活动就停止了。

在第二节，亮点工作会进一步的提升，下面加一个活动审核规则，这表明提交完之后不会立马表现在C端页面上，而是需要人工审核。因为项目安全性非常重要，所以通过审核把不合适的内容屏蔽掉。

这个时候有个规则，就是报名结束时间一定比活动开始时间早。一般来说要提前半天左右的时间。另外，活动地址分线上还是线下，这次不用地图，因为如果是线下，城市是固定的，地点局限在高校，高校自己填写详细地址。

确认发布流程是基本信息模型，要考虑到交互。交互的答案非常完美，但自己做的时候，如果不知道答案的话，我估计很多新人，会把交互做得非常非常复杂。

交互怎么成长有两个方面，一方面要多看精品，第二方面一定要多总结自己，要去追求到自己满意，要不断的对自己提高要求。

原型图的设计部分会全部提供给大家，想尽快拿到可以进入VIP整个项目的大群。在小程序上选择自己想做的在线实习，实习是五个角色一起配合，每个模块每周做一个板块。

今天的课程到这里，如果大家感兴趣的话，可以去看一下我们的VIP的小程序。