原型设计案例---商城

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

                 新增:购物车相关流程

2017/3/10 初稿。





第一步,做一个思维导图,流程图等(下方会有)

第二步,开始画原型图,我的习惯一般是按照思维导图规划的模块去创建文件夹,比如首页/上新/购物车/我的,将登录注册及重要功能(订单相关)单独放置一个文件夹,这样做的好处就是便于查看,简洁明了。 在原型图中,我通常包含修改记录,全局说明,产品结构图,产品流程图,移动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重点就是用户购买率,所以在这之前一定要保证用户正常的操作流程,只有当需要用户填写个人信息的时候才会提示用户需要进行登录/注册的,否则一定不要打断用户的使用流程,要保证流程的简单顺畅。


                                                                                                     结束,谢谢阅读

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,391评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 用户注册功能对于一个APP的重要性毋庸置疑,然而注册功能又是公认的在设计中坑最多的功能,能够设计好注册功能是一个优...
    周博文阅读 23,648评论 26 241
  • 肺癌的临床表现 原发性肺癌(以下简称肺癌)是我国最常见的恶性肿瘤之一。全国肿瘤登记中心 2014年发布数据显示,我...
    A45肿瘤阅读 582评论 0 1
  • 恍然间明白,我只为自己而活。 已经大二了,感觉自己还是没什么建树,曾经高中时候的梦想似乎也没有丝毫接近。转眼我就要...
    一叶泰山阅读 166评论 0 0