20个电商原型图例子，轻松搞定电商原型设计( 二 ) _原型图

2.全球时尚购物平台-FARFETCH

文章插图
FARFETCH Limited全球时尚购物平台
FARFETCH Limited 是一个全球时尚购物平台，旨在将品牌、买手与时尚爱好者紧密连结起来。2007 年，出于对时尚的热爱，José Neves 先生创立 FARFETCH，并于次年将其发布上线。作为一个全球时尚购物平台，Farfetch.com 及其 APP 用户已遍布 190 个国家，汇集来自全球 50 多个国家，超过 3,000 个品牌。
这类APP中用的最多的组件就是图片，在摹客RP中，可以设计出图片轮播、滚动区等效果来展示丰富的图片素材。在这款原型中，我用了面板、内容面板、以及选项卡等常用组件完成了图片轮播、页面弹窗等交互效果，同时也为页面跳转的交互增加了动画，从而让页面之间的交互更加流畅，以及更接近真实APP的效果。
3.购物类-Shopping Web UI Kits

文章插图
Shopping Web UI Kit购物类网页设计模板
本套Shopping Web UI Kit是一套时尚的购物类网页设计模板，本套模板外观简约，易于使用、接近真实网页效果。一共有20+个页面，包含了首页、商品详情、购物车、结算页、登录页等高频使用页面；另外预存了30+个组件，包含了按钮组件、输入组件、常见内容组件等，可复用快速搭建网页。
模板使用了RP内容面板、面板组件以实现顺滑的页面切换效果，另输入框、按钮等内容也使用了RP原生组件，模板添加了页面跳转，可以演示在网页中的真实使用效果。
此套模板整体细节丰富、配色干净时尚，交互简洁且表意明确，契合实际使用场景，具有较强参考价值。
4.生活类app-叮咚买菜

文章插图
叮咚买菜
叮咚买菜是一款自营生鲜平台及提供配送服务的生活服务类APP，可以为电商类的产品经理提供提供较好的参考和借鉴。整个例子包含了15个页面，覆盖了：
1）带有轮播的内容面板、弹窗；
2）底部标签页导航、左侧导航菜单；
3）视频详情页；
4）以及一套完整的下单、备注、支付流程；
该例子使用的组件有：内容面板、辅助画板、按钮、图标。
呈现的交互场景：滚动区、弹窗、内容切换、输入框等。
5.购物商城APP

文章插图
商城类APP
本套原型模板为商城类APP，主要采用橙色FFB600，其中分为主页、分类、购物车、我的四大板块，分别覆盖了商城类常用的购物，下单，订单，我的等板块。
本原型将商城类APP效果进行了高保真还原，使用圆角框，展示效果精美。添加了各页面之间的必要的跳转，还原真实使用效果。本原型中，使用了输入框，按钮，内容面板（及辅助画板）实现了内容切换的效果。
6.商品展示页面

文章插图
商品展示页面
本套UI Kit是商品展示页面的模板，可供购物类App参考和复用，设计简洁，添加了必要的交互。原型页面完整，包括商品展示主页、分类、商品详情、筛选款式、购物车、下单填写地址、下单选支付方式、下单查看订单、完成订单等。
此外，模板使用了RP内容面板实现滚动区的效果，使用最多的组件有图片、按钮等，模板添加了页面跳转，可模拟真实的App交互效果。本原型中，创建了基本应用组件如顶部导航栏，可适用于购物类App原型。
7.定制购物App

文章插图
购物类APP原型模板
本套 APP UI是一套购物类APP原型模板，本套模板是一套深色版，添加了交互效果，接近真实APP效果；设计风格上，以欧美视觉为参考，可以用作海外原型设计参考。一共15个页面，包含首页、产品分类、搜索查询、扫描搜索、购物流程等内容一应俱全。
【20个电商原型图例子，轻松搞定电商原型设计】模板使用了RP内容面板、辅助画板以实现页面轮播的切换效果，另输入框、日期选择器、开关等内容也使用了RP原生组件，模板页面添加了页面交互跳转，可以在演示节目点击交互模拟真实使用效果有很高借鉴价值。
本原型中，根据购物APP创建了基本应用组件，包含产品列表、搜索框、滑动删除、尺码选择等，适用于基础的购物APP原型绘制。