原型设计案例---商城

2017/3/16 优化：登录/注册流程

                 新增：购物车相关流程

2017/3/10 初稿。

老板：现在我们公司需要做一个App。

PM（我）：什么类型的App？

老板：商城类的，就做某宝，某东那样的。（你懂得）

.........暴走！

PM（我）：那我们打算卖什么商品呢？

老板：现在不清楚，你就先做个框架，反正以后后台也可以更新。

.........暴走！

PM（我）：那我得根据商品的多少，商品的类型去设计功能，页面啊。

老板：你就搭个框架，可以没有二级页面，但是基本的购买功能得有。

.........暴走！

PM（我）：强行压着无奈暴躁的心情，那给我多长时间去规划功能和设计页面？

老板：这个App比较紧急，你加加班，争取10天做完。

PM（我）： ...............(省略1000000字）

老板：快去做吧。

作为一名打杂人员，要时刻的摆正自己的位置。

废话不说了，直奔主题，快准狠。

---

第一步，做一个思维导图，流程图等（下方会有）

第二步，开始画原型图，我的习惯一般是按照思维导图规划的模块去创建文件夹，比如首页/上新/购物车/我的，将登录注册及重要功能（订单相关）单独放置一个文件夹，这样做的好处就是便于查看，简洁明了。 在原型图中，我通常包含修改记录，全局说明，产品结构图，产品流程图，移动UI设计规范（后期加入），至于标准的PRD文档我一般不会去写，个人觉得能让公司流水线作业就可以，没有必要拘泥于文档。

原型图架构 初稿

下面对于我原型设计中设计的内容，进行一个说明，如果有不同意见和错误，欢迎下方留言指正，谢谢！

一、修改记录

修改记录中我一般是创建表格，分成三列，包含时间，内容，编写人姓名（昵称）。 便于自己对于项目时间的把控和留档备案。

修改记录

二、全局说明

包含信息架构说明，页面切换方式，全局交互，弹窗/模态窗口，页面标题/滚动条等，安卓和iOS不同之处的说明。下方图片中的信息架构说明是复制之前做的，这个我一般是在文档做好后，才回去写，算一个检查反思的过程。

信息架构说明  是便于开发人员去了解当前页面层级关系及页面数量，便于阅读和估算开发时间。

信息架构说明---初稿

页面切换方式  是分为iOS和Android两种。 由于两个操作系统的区别，硬件的不同，所以手势操作也不同，但现在个人觉得市面上的多数App都是Android向iOS靠拢了，基本一致的，只是稍有区别。

页面切换方式---初稿

弹窗/模态窗口  是分iOS和Android两种。主要是弹窗的方式和样式及位置的区别。

弹窗/模态窗口---初稿

页面标题/滚动条  是分iOS和Android两种。页面标题的位置两个操作系统不同，但是滚动条是一致的。

页面标题/滚动条---初稿

全局交互 是以iOS为主去做的，Android基本上也是适用的。

全局交互- 1---初稿 全局交互-2---初稿

三、产品结构图

运营给的业务的流程图，如图1所示； 

我修改和细化的产品结构图，如图2所示。

修改原因：

               1、因为目前公司对于产品的类别没有一个很好的规划，所以自然不可能做一个类似与某宝和某东那样复杂的商城；

               2、运营给出的方案有重复的地方，而且功能并不适合于当前阶段。

优化原因：

               1、便于自己梳理商城类App的结构；

               2、便于自己对商城类App做整体规划；

               3、可以将产品结构图中的内容完美转换成原型图进而进行设计；

               4、其实目前我已经将【上新】模块去掉了，只是结构图没有来得及修改。  T^T

图1 图2---初稿

四、产品流程图

一般情况我不会去画整个产品的流程图，因为查看不方便，好吧，我承认重点是电脑屏幕小，画的时候不方便，整体流程更多采用的是在需求评审会上的口述讲解和白板画图；

But，对于重要功能，我一定是会画流程图的，便于开发去理解逻辑。

产品流程图---初稿

五、移动UI设计规范（暂无）

由于目前这个产品没有移交到UI手中，所以设计规范暂无。

六、商城类App典型页面---查看全部订单

查看全部订单---初稿

七、商城类App典型页面---购物车

包含编辑购物车中的商品，领取并使用优惠券，消息中心，结算及页面提示等。

购物车---初稿

八、登录注册功能

登录方式一般有三种：

第一种，账号（手机号/邮箱号/用户名）+密码的方式登录；

第二种，账号（手机号/邮箱号/用户名）+验证码的方式登录；

第三种，通过第三方平台（微信，QQ，微博）直接登录；

本次采用第一种和第三种方式登录App。

登录功能--- 复稿

注册方式

一般有三种：

第一种，邮箱注册；

第二种，手机号注册；

第三种，用户名注册；

第四种，第三方注册。

本次采用第二种方式和第四种进行账号的注册，使用手机号注册已经成为移动端App的主流方式了并且安全性高，验证方便，ID是唯一的。

注册功能---复稿

登录流程

第一种，需要登录后才能继续使用产品功能服务，社交类偏多。

第二种，不需要登录就可以使用产品或者产品的部分功能，商城类偏多。

本次采用第二种，商城类App重点就是用户购买率，所以在这之前一定要保证用户正常的操作流程，只有当需要用户填写个人信息的时候才会提示用户需要进行登录/注册的，否则一定不要打断用户的使用流程，要保证流程的简单顺畅。

                                                                                                     结束，谢谢阅读