首页 > 其他分享 >淘物购物商城——原型设计

淘物购物商城——原型设计

时间:2024-04-14 20:33:26浏览次数:22  
标签:淘物 界面 按钮 商品 点击 原型 跳转 商城

一、原型工具优缺点对比

墨刀、Axure、Mockplus都是常见的原型设计工具,它们在适用领域和优缺点上有着各自的特点:

1. 墨刀:

适用领域:墨刀适用于快速原型设计和团队协作。它的界面简洁易用,支持多种交互和动画效果,适合用于移动应用和网页的设计。
优点:简单易上手,无需编码经验;提供丰富的交互组件和模板;支持团队协作,可以实时编辑和评论。
缺点:功能相对较简单,对于复杂的交互和动效支持不够;在线协作功能可能会受到网络环境的限制。

2. Axure:

适用领域:Axure适用于高保真原型设计和复杂交互的项目。它功能强大,支持自定义交互和动画,适合用于大型软件和应用的设计。
优点:提供高度自定义的交互和动画效果;支持复杂的逻辑和条件交互;输出高保真原型,可用于用户测试和开发参考。
缺点:学习曲线较陡,需要一定的时间去掌握其丰富的功能;界面相对复杂,不够直观。

3. Mockplus:

适用领域:Mockplus适用于快速原型设计和小型团队协作。它注重简洁高效,提供丰富的组件和模板,适合用于简单的移动应用和网页的设计。
优点:界面简洁,易上手;提供丰富的组件和模板,可以快速搭建原型;支持简单的团队协作。
缺点:功能相对有限,不够适用于复杂的交互和动效设计;对于大型项目可能不够灵活。

总体而言,选择适合自己项目需求和团队特点的原型设计工具非常重要。墨刀适用于快速原型和团队协作,Axure适用于复杂交互和高保真原型,Mockplus适用于简单快速的原型设计。

二.实验

  1. 主题名称:购物商城原型
  2. 功能:商品推荐,搜索商品,商品加购,创建订单,商品分类,商品详情页,用户登录
  3. 界面设计考虑因素:商品的呈现方式要清晰明了,布局清晰。同时,可以通过图片、分类展示了解商品简况,进入商品详情页了解商品详细信息。提供用户与应用之间的互动。具体由以下界面组成:

(一)用户登录页


界面功能:上图为用户登录页,可以通过手机短信验证码或者微信登录商城
界面组成:中间为手机号输入窗口,下方有微信登录按钮
操作步骤:输入手机号后获取验证码登录,或点击微信登录后授权登录

(二)商城首页


界面功能:上图为商城首页,可进行搜索商品,浏览推荐商品,跳转分类条目浏览,最下方按钮可进行四个主要界面的跳转;
界面组成:上方搜索框,中间为推荐与分类条目,下方为推荐内容;
操作步骤:可在上方搜索商品,也可点击商品分类选择商品分类,点击最下侧的按钮可跳转到对应的界面;

(三)商城分类页


界面功能:上图为商城分类,可以浏览分类简概,浏览大分类与小分类内容,通过小分类内容跳转搜索界面,最下方按钮可进行四个主要界面的跳转;
界面组成:左侧为大分类栏,右侧为小分类详情
操作步骤:可点击左侧大分类栏切换分类,点击小分类栏跳转搜索界面,点击最下侧的按钮可跳转到对应的界面;

(四)商品搜索列表


界面功能:上图为商品搜索列表,可以在搜索栏中填写关键词进行商品搜索,搜索后出现商品列表,可以点击商品进入商品详情页;
界面组成:上方搜索框,下方为搜索内容
操作步骤:可点击搜索栏改变搜索内容,点击上方返回键回到主页。点击小商品栏跳转对应商品详情页界面

(五)商品详情页



界面功能:可以查看商品信息,商品评价,商品加入购物车,收藏商品,购买商品
界面组成:上方商品价格与图片,下方商品评价与推荐,底部固定悬浮栏可以加购,购买与收藏
操作步骤:可点击加入购物车将商品加购,也可以直接购买商品,点击收藏可以收藏商品

(六)购物车页面


界面功能:可以查看购物车商品信息,购物商品总价,商品结算订单,最下方按钮可进行四个主要界面的跳转
界面组成:页面中可滚动浏览商品价格与图片,底部固定悬浮栏可以结算订单进入订单页面
操作步骤:点击选择框进行选择需要结算的商品,可以点击全选进行全部选择,点击结算按钮跳转结算页面,点击最下侧的按钮可跳转到对应的界面;

(七)订单结算页


界面功能:可以修改收货地址,选择快递方式与发票,确认付款
界面组成:上方为个人收货信息,中间为商品信息,下方为总价格与结算按钮
操作步骤:点击上方地址可以更改收货地址与个人信息,计算总价后可以选择点击结算按钮付费,点击最下侧的按钮可跳转到对应的界面;

(八)个人页面


界面功能:可以查看个人购物信息,订单信息,更改个人头像与信息
界面组成:上方为个人信息与头像,中间为订单信息与收藏按钮,下方为随机推荐商品
操作步骤:点击上方登录与注册可以跳转登录界面,点击订单信息可以查看个人订单,点击最下侧的按钮可跳转到对应的界面

标签:淘物,界面,按钮,商品,点击,原型,跳转,商城
From: https://www.cnblogs.com/Ypzzb/p/18134371

相关文章

  • 原型设计工具及比较实践
    一、墨刀、Axure和Mockplus都是常用的原型设计工具,它们在不同的适用领域和具有各自的优缺点。下面是对它们进行对比分析:墨刀(MockingBot):适用领域:墨刀适用于快速原型设计和交互设计,特别适合移动应用和网页设计。优点:简单易用:墨刀提供了友好的界面和简单的操作,无需编程经验即可......
  • 原型设计工具比较及实践
    一、墨刀、Axure和Mockplus都是常见的原型设计工具,它们各有优势和不足,适用于不同的场景和需求。墨刀(MockingBot):适用领域:墨刀适用于快速原型设计,特别适合初学者和小团队。其易用性和简洁的界面使得用户可以快速创建简单的原型。优点:简单易用,无需编码经验;提供丰富的模板和组件......
  • 原型设计工具比较及实践
    1、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。2、利用网络资源自学Mockplus或墨刀等原型设计工具,并利用原型工具自拟主题进行原型设计。主题是老年手机打电话页面要求:1)对主题名称、功能、界面设计考虑因素等进行说明;2)每位同学提供至少四......
  • 原型设计工具比较分析
    原型设计工具比较分析:墨刀:适用领域:墨刀适用于快速原型设计和交互设计,特别适合移动应用和Web应用的设计。优点:界面简洁清晰,易于上手,适合初学者和团队合作。支持多种交互模式,如链接、滑动、弹出框等,可以较好地模拟用户操作流程。支持团队协作,可以多人同时编辑同一项目,方便团队......
  • 原型设计工具比较及实践
    一、墨刀、Axure和Mockplus是三种常用的原型设计工具,它们各自有不同的适用领域和优缺点。墨刀:适用领域:适用于快速创建交互式原型,特别适合小型项目和初期设计阶段。它提供了简洁易用的界面和丰富的组件库,适合设计师、产品经理和开发人员之间的快速协作。优点:简单易用的界面,学......
  • 原型设计工具比较及实践
    墨刀:适用领域:墨刀适用于快速原型设计和协作,特别适合团队协作和迭代设计。优点:界面简洁直观,易于上手。提供丰富的交互组件和模板,能够快速搭建原型。支持多人协作,实时同步编辑,方便团队合作。缺点:功能相对较简单,适用范围有限。在复杂交互和动效方面可能不如其他工具。Axure......
  • 原型设计工具比较及实践
    1、墨刀、Axure、Mockplus等原型设计工具各自的适用领域及优缺点如下:墨刀:适用于快速原型设计和协作,特点是简单易上手,支持团队协作,适合小型项目或初学者使用。缺点是交互功能相对简单,对于复杂的原型设计需求可能不够强大。Axure:适用于高保真原型设计和复杂交互设计,功能强大,支持......
  • 原型设计工具比较及实践
    一、原型设计工具当涉及原型设计工具时,墨刀、Figma和InVision都是受欢迎的选择。下面是它们各自的适用领域和优缺点的比较:墨刀优点:在线协作:墨刀支持多人在线协作,团队成员可以实时共享和编辑项目,便于团队合作。简单易用:墨刀的界面简洁清晰,操作简单易上手,即使是初学者也可以快......
  • 原型设计工具比较及实践
    1.墨刀、Axure和Mockplus是三种常见的原型设计工具,它们在不同的领域有各自的优缺点:墨刀:适用领域:墨刀适合个人用户或小团队使用,特别适合快速原型设计和分享。优点:界面简洁直观,操作简单易上手;支持多人协作,方便团队合作;提供丰富的元件库,可快速搭建原型。缺点:功能相对较少,适用范围......
  • 原型设计工具比较及实践
    原型设计工具比较分析:墨刀:适用领域:墨刀适用于快速原型设计和交互设计,特别适合移动应用和Web应用的设计。优点:界面简洁清晰,易于上手,适合初学者和团队合作。支持多种交互模式,如链接、滑动、弹出框等,可以较好地模拟用户操作流程。支持团队协作,可以多人同时编辑同一项目,方便团......