设计|花费14天，我设计了一个玩具购物网站( 二 )
我绘制的第一个用户流程是关于用户画像是 Jenny 的。Jenny 最主要的目是为自己的孙子购买初级魔术玩具。Jenny 的用户流程（如下图所示）表明了她是如何搜索初级魔术玩具，以及为了成功购买她可能采取的几种不同路径。
上图是 Jenny 的用户流程
Debbie 和 Jenny 都希望能有一个高效的下单结账流程，所以很有必要在用户流程中绘制出下单结账流程。下图的用户流程显示了Debbie在选定一个特技自行车之后该如何进行结账下单。通过允许她登录自己的帐号，自动输入她的结账信息来简化她的结账下单流程。
03 开发阶段
1. 草稿
在我整理了前期获取的所有信息之后，我就开始着手设计网站。基于之前整理出来的用户流程图，我开始绘制几个主要页面的草图，同时快速思考出几个不同的网站布局方案。之后我邀请3个用户参与了用户调研，以验证这些方案是否同时满足客户和网站用户的需求。
上图是网站首页和品类页面的初稿
2. 线框图
基于用户对草图的反馈和我个人的想法，我开始使用Figma来绘制线框图。整个过程中，根据优先级不同，优先考虑最能满足网站用户的功能。
文章图片
上图是网站首页和产品详情页的线框图
04 原型制作
1. 主页
首页我尽可能的保持简洁，避免用户进入网站时被过多的信息干扰而不知所措。
在页脚，我放置了其他的用户可能需要的信息。除此之外，我还将用户交流系统放在页脚，这样是为了获得用户想法并在店铺进行活动时通过用户参与提高店铺活动氛围。
文章图片
2. 商品类别页面
当用户点击商店按钮或者是某个类别之后，用户将会前往一个列出了该类别下所有商品的商品列表页。有个用户画像想要给他的孙子买一个合适他孙子年龄的玩具，所以页面需要一个品类筛选器，同时支持商品按照不同的属性例如年龄、价格和品牌分类也很重要。除此之外，我还通过面包屑导航来方便用户定位页面位置。
文章图片
3. 商品详情页
在商品详情页，我希望能够提供尽可能多的商品详情来确保这个商品是用户想要的。
在页面下方，网站会基于当前商品给用户推荐其他相似商品。在商品详情页，产品评论区占了很大一部分，因为用户可以在产品评论区反馈商品信息，便于树立用户信任，同时用户能够通过其他用户的评论来作出更明智的购买决定。
为了简化下单流程，我设计了一个购物车预览页，用户在购物车预览页可以预览商品信息，用户每次将商品加入购物车后都会出现购物车预览页，在购物车预览页面，用户可以很方便的点击“选好了”按钮而进入结账下单流程。
文章图片
4. 购物车预览页
当用户点击“选好了”按钮或者是购物车按钮，用户将会进入到一个如下图所示的购物车预览页。这是结账下单流程的第一步，用户在购物车可以管理他们所选的商品，作出合适的调整。用户在下单时，可以选择到店自提或者是物流配送，设置到店自提是为了引导用户去 Jeffrey’s Toy的线下店铺，同时降低运输成本。
文章图片
5. 结帐页面
客户提供的三个用户画像的主要痛点之一就是想要有一个高效的结账流程，所以我得确保结账下单体验要尽可能的流畅。作为一个回头客，用户可以选择登录自己的帐号，并自动保存物流信息和支付信息。
我决定在一个页面上承载全部的结账流程，这样方便用户在结账流程中任何时刻都能编辑信息。顶部的进度栏显示了下单结账流程有多少步，用户当前在哪一步以及用户还剩下多少步骤。
文章图片
文章图片
文章图片
6. 其他画面
我还创建了一些其他页面，例如订单确认页面。订单确认页面明确告知用户结账流程已经完成了，用户还能在订单确认页查看有关订单的其他信息，以供参考。
我创建了一个店铺联系页面，当用户在网站找不到想要的商品时，可以在店铺联系页面查询线下店铺商品情况以及店铺的营业时间、位置和联系电话。
除此之外我还创建了一个“关于页面”用来着重强调Jeffrey’s Toys与其他电商网站例如亚马逊的区别。我还在这个页面介绍了Jeffrey’s Toys长达60年的独特历史，以增强用户对于品牌传统、有趣和创意的商业价值的印象。
文章图片
文章图片
推荐阅读
- 设计|连锁餐厅怎么装修设计才最吸引人？
- 机械设计|机械设计的基本准则及一般步骤，机械零件的主要失效形式
- 海洋科考船“中山大学”号命名下水 排水量最大、综合科考性能最强、创新设计亮点最多
- 中山大学|海洋科考船“中山大学”号命名下水 排水量最大、综合科考性能最强、创新设计亮点最多
- |第十六届中国（无锡）国际设计博览会暨第九届太湖奖设计大赛北京推介会在中华世纪坛隆重召开
- 歌华|“青岛设计中心”正式启航 引领未来影视设计行业风帆
- 抽屉电影|他的一生充满传奇色彩，他设计的轻武器，常年在杀人排行榜排第一
- CNMO■华为新机入网 采用Mate30Pro同款设计镜头参数有变化CNMO2020-08-29 06:46:430阅
- 基础知识|ui设计的基础知识，有哪些是你不了解的？
- 盛宴|一场影视与设计碰撞的视觉盛宴！东方时尚季·2020青岛国际影视设计周拉开帷幕