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

电商boss系统采购订单页面在移动端呈现，我做了哪些思考？

本文中，将分享我在将复杂电商BOSS系统的订单页面呈现在移动端的设计过程，希望对大家有所帮助。通过本文，您将了解到以下内容：

1、如何在设计过程中充分考虑电脑端和移动端用户的需求和使用习惯；

2、如何将复杂的订单页面优化为简洁、易用的移动端界面；

3、针对移动端的限制和挑战，如何进行设计决策和权衡；

4、使用哪些有效的UX技巧来提升用户体验和工作效率。

选款的零售商客户通过衫海精选款下单后，订单信息和订单状态会传到BOSS后台，相关负责人可随时查看并处理。

为了确保平台高效履约，需要市场部同事随时掌握订单状态，特别是

的订单，以便及时通知上下游。但是由于工作性质，他们无法随时坐在电脑面前，所以需要在小程序上呈现订单信息，可以让市场部同事随时查看并处理订单，避免出现订单超时，客户投诉的情况。

订单状态包括：全部、待付款、备货中、待收货、已完成、已关闭。全部状态下

的订单类型需要重点露出，方便快速查询。

1、订单状态：电脑端大屏横向可以全部平铺展示；移动端则是横向滑动。

2、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时的订单快捷入口，电脑端大屏可以全部平铺展示；移动端则需要换行，这里不做横向滑动是因为会影响用户的操作效率

订单查询条件包括：订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方、SKU编码、商品ID、是否缺货、所属云仓等等。

分析用户日常的使用习惯，对高频操作的筛选项进行提炼在移动端展示，提升使用效率。低频操作则不在移动端展示。

经过与业务方沟通，订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方的使用频次相对较多，

使用频次最高。

1、订单编号查询：电脑端和移动端都是直接输入，但是电脑端支持批量查询，单次查询内容会更多。

2、下单时间排序：电脑端采用input框的样式，下拉筛选；移动端是通过点击切换排序方式，操作会更便捷。

1、商品查询：电脑端、移动端都是直接输入；

2、供应商查询：电脑端采用input框的样式，下拉筛选；移动端则是进入新的页面进行选择；两者都支持关键字搜索；

移动端不直接展开的原因是：供应商数量多，在当前页面展示篇幅较长，还涉及到分页，会影响用户的操作体验。

电脑端点击出现时间选择器，支持快捷查询；移动端点击选择跳转到新页面，时间全部铺开展示；两者都支持滑动鼠标(手指)连续选择时间段。

电脑端采用input框，下拉选中；移动端则是全部展示出来，采用勾选的方式进行选择。

小程序不做批量操作功能。

订单内容包括订单编号、下单时间、零售商、商品信息、数量、发货方式、买家信息、订单状态、实收款、订单详情、查看物流。这些内容可以归纳为3类：

订单信息包括：订单编号、下单时间、零售商、、发货方式、买家信息、订单状态、实收款

电脑端面积大，内容需要散开排列；移动端面积小，内容需要集中排列。

商品信息包括：商品名称、图片、价格、货号、规格、SKU编码、供应商、下单数量、拿货数量、仓内现货、缺货原因

同样的内容，移动端更加聚焦，但是商品数量展示也偏少。

操作包括：订单详情、查看物流

交互方式相同，都是跳转到新页面。

由于屏幕大小和分辨率的不同，电脑端和移动端页面在功能的布局和信息展示上也会有所不同。

电脑端使用鼠标操作，包含滑动、左击、右击、双击等，相对来说单一，交互效果较少。而对于手机端来说，由于屏幕大小的限制，操作方式需要更加的丰富，通过这些丰富的操作来实现页面和功能之间的交互。所以电脑端和移动端相同功能的操作方式也会不同，组件也有所差异。在做设计时，尽量使用成熟的组件，给用户良好的使用体验。

遇到复杂的设计需求，不要慌张，

谢谢！