PC端的页面设计,如何优雅呈现在移动端?

2024-5-9    前端达人

电商boss系统采购订单页面在移动端呈现,我做了哪些思考?
PC端的页面设计,如何优雅呈现在移动端?
 
 
在B端UI/UX设计领域,我们常常会遇到类似的需求:随着业务的发展,需要将复杂系统中的核心功能摘出来,并在小程序或移动应用上呈现,以便客户能够便捷地使用和操作,从而提升工作效率。然而,实际操作中我们会发现,尽管对这些功能很熟悉,但是落地过程中却会遇到一系列问题。
 
本文中,将分享我在将复杂电商BOSS系统的订单页面呈现在移动端的设计过程,希望对大家有所帮助。通过本文,您将了解到以下内容:
1、如何在设计过程中充分考虑电脑端和移动端用户的需求和使用习惯;
2、如何将复杂的订单页面优化为简洁、易用的移动端界面;
3、针对移动端的限制和挑战,如何进行设计决策和权衡;
4、使用哪些有效的UX技巧来提升用户体验和工作效率。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
一、深入分析业务背景和使用场景
1、业务背景关系梳理
选款的零售商客户通过衫海精选款下单后,订单信息和订单状态会传到BOSS后台,相关负责人可随时查看并处理。
PC端的页面设计,如何优雅呈现在移动端?
 
 
2、为什么需要在移动端呈现?
为了确保平台高效履约,需要市场部同事随时掌握订单状态,特别是
发货即将超时、揽收即将超时、发货已超时和揽收已超时
的订单,以便及时通知上下游。但是由于工作性质,他们无法随时坐在电脑面前,所以需要在小程序上呈现订单信息,可以让市场部同事随时查看并处理订单,避免出现订单超时,客户投诉的情况。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
二、功能拆解
1、将电脑端订单内容拆分重组,信息归类
PC端的页面设计,如何优雅呈现在移动端?
 
 
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
2、订单功能拆分后,主要分为以下四个部分
PC端的页面设计,如何优雅呈现在移动端?
 
 
1)订单状态
订单状态包括:全部、待付款、备货中、待收货、已完成、已关闭。全部状态下
新订单、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时
的订单类型需要重点露出,方便快速查询。
  •  
    设计差异:
1、订单状态:电脑端大屏横向可以全部平铺展示;移动端则是横向滑动。
2、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时的订单快捷入口,电脑端大屏可以全部平铺展示;移动端则需要换行,这里不做横向滑动是因为会影响用户的操作效率
PC端的页面设计,如何优雅呈现在移动端?
 
 
2)订单查询条件
订单查询条件包括:订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方、SKU编码、商品ID、是否缺货、所属云仓等等。
  •  
    设计思考:
分析用户日常的使用习惯,对高频操作的筛选项进行提炼在移动端展示,提升使用效率。低频操作则不在移动端展示。
PC端的页面设计,如何优雅呈现在移动端?
 
 
经过与业务方沟通,订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方的使用频次相对较多,
订单编号、时间排序
使用频次最高。
 
a、订单编号/排序时间
  •  
    设计差异:
1、订单编号查询:电脑端和移动端都是直接输入,但是电脑端支持批量查询,单次查询内容会更多。
2、下单时间排序:电脑端采用input框的样式,下拉筛选;移动端是通过点击切换排序方式,操作会更便捷。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
b、商品/供应商查询
  •  
    设计思考:
1、商品查询:电脑端、移动端都是直接输入;
2、供应商查询:电脑端采用input框的样式,下拉筛选;移动端则是进入新的页面进行选择;两者都支持关键字搜索;
移动端不直接展开的原因是:供应商数量多,在当前页面展示篇幅较长,还涉及到分页,会影响用户的操作体验。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
c、时间查询
  •  
    设计差异:
电脑端点击出现时间选择器,支持快捷查询;移动端点击选择跳转到新页面,时间全部铺开展示;两者都支持滑动鼠标(手指)连续选择时间段。
PC端的页面设计,如何优雅呈现在移动端?
 
 
d、订单状态查询
  •  
    设计差异:
电脑端采用input框,下拉选中;移动端则是全部展示出来,采用勾选的方式进行选择。
PC端的页面设计,如何优雅呈现在移动端?
 
 
3)批量操作
小程序不做批量操作功能。
 
4)订单内容
订单内容包括订单编号、下单时间、零售商、商品信息、数量、发货方式、买家信息、订单状态、实收款、订单详情、查看物流。这些内容可以归纳为3类:
a、订单信息 b、商品信息 c、操作。
 
a、订单信息
订单信息包括:订单编号、下单时间、零售商、、发货方式、买家信息、订单状态、实收款
  •  
    设计差异:
电脑端面积大,内容需要散开排列;移动端面积小,内容需要集中排列。
PC端的页面设计,如何优雅呈现在移动端?
 
 
b、商品信息
商品信息包括:商品名称、图片、价格、货号、规格、SKU编码、供应商、下单数量、拿货数量、仓内现货、缺货原因
  •  
    设计差异:
同样的内容,移动端更加聚焦,但是商品数量展示也偏少。
PC端的页面设计,如何优雅呈现在移动端?
 
 
c、操作
操作包括:订单详情、查看物流
  •  
    设计差异:
交互方式相同,都是跳转到新页面。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
三、总结
由于屏幕大小和分辨率的不同,电脑端和移动端页面在功能的布局和信息展示上也会有所不同。
电脑端使用鼠标操作,包含滑动、左击、右击、双击等,相对来说单一,交互效果较少。而对于手机端来说,由于屏幕大小的限制,操作方式需要更加的丰富,通过这些丰富的操作来实现页面和功能之间的交互。所以电脑端和移动端相同功能的操作方式也会不同,组件也有所差异。在做设计时,尽量使用成熟的组件,给用户良好的使用体验。
遇到复杂的设计需求,不要慌张,
核心都是看透事物的本质,拆解为基础的组件,再从根本上解决问题。
谢谢!
 
 


作者:西城门设计
链接:https://www.zcool.com.cn/article/ZMTYxOTQxMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档