PC端的頁面設計，如何優雅呈現在移動端？

在 B 端 UI/UX 設計領域，我們常常會遇到類似需求：隨著業務的發展，需要將 PC 系統中的核心功能摘出來在小程序或 APP 上呈現，方便用戶能夠便捷地使用和操作，從而提升工作效率。然而，實際操作中我們可能會發現，盡管對這些功能很熟悉，落地過程卻會遇到一系列問題。

本文將分享我在將復雜電商 BOSS 系統的訂單頁面呈現在小程序上的設計過程，希望對大家有所幫助。

更多相關干貨：

通過本文，您將了解到以下內容：

1. 如何在設計過程中充分考慮電腦端和移動端用戶的需求和使用習慣；
2. 如何將復雜的訂單頁面優化為簡潔、易用的移動端界面；
3. 針對移動端的限制和挑戰，如何進行設計決策和權衡；
4. 使用哪些有效的 UX 技巧來提升用戶體驗和工作效率。

一、深入分析業務背景和使用場景

1. 業務背景關系梳理

選款的零售商客戶通過衫海精選款下單后，訂單信息和訂單狀態會傳到 BOSS 后臺，相關負責人可即時查看并處理。

2. 為什么需要在移動端呈現？

為了確保平臺高效履約，需要市場部同事隨時掌握訂單狀態，特別是發貨即將超時、攬收即將超時、發貨已超時和攬收已超時的訂單，以便及時通知上下游。但是由于工作性質，他們無法隨時坐在電腦面前，所以需要在小程序上呈現訂單信息，可以讓市場部同事隨時查看并處理訂單，避免出現訂單超時，客戶投訴的情況。

二、功能拆解

1. 將電腦端訂單內容拆分重組，信息歸類

2. 訂單拆分后，主要分為以下四個部分

1）訂單狀態

訂單狀態包括：全部、待付款、備貨中、待收貨、已完成、已關閉。全部狀態下售后中、發貨即將超時、攬收即將超時、發貨已超時、攬收已超時的訂單類型需要重點露出，方便快速查詢。
設計差異：

1. 訂單狀態：電腦端大屏橫向可以全部平鋪展示；移動端則是橫向滑動。
2. 售后中、發貨即將超時、攬收即將超時、發貨已超時、攬收已超時的訂單快捷入口，電腦端大屏可以全部平鋪展示；移動端則需要換行，這里不做橫向滑動是因為會影響用戶的操作效率。

2）訂單查詢條件

訂單查詢條件包括：訂單編號、時間排序、商品名稱、供應商名稱、下單時間、訂單狀態、履約方、SKU 編碼、商品 ID、是否缺貨、所屬云倉等等。

設計差異：

分析用戶日常的使用習慣，對高頻操作的篩選項進行提煉在移動端展示，提升使用效率。低頻操作則不在移動端展示。

經過與業務方溝通，訂單編號、時間排序、商品名稱、供應商名稱、下單時間、訂單狀態、履約方的使用頻次相對較多，而訂單編號、時間排序使用頻次最高。

a. 訂單編號/排序時間

設計差異：

1. 訂單編號查詢：電腦端和移動端都是直接輸入，但是電腦端支持批量查詢，單次查詢內容會更多。
2. 下單時間排序：電腦端采用 input 框的樣式，下拉篩選；移動端是通過點擊切換排序方式，操作會更便捷。

b. 商品/供應商查詢

設計差異：

1. 商品查詢：電腦端通常采用 input 框的樣式；移動端則是直接輸入；
2. 供應商查詢：電腦端采用 input 框的樣式，點擊展開全部；移動端則是點擊后在新的頁面進行選擇；兩者都支持關鍵字搜索；

移動端不直接展開的原因是：供應商數量多，在當前頁面展示篇幅較長，還涉及到分頁，會影響用戶的操作體驗。

c. 時間查詢

設計差異：

電腦端點擊出現時間選擇器，支持快捷查詢；移動端點擊選擇跳轉到新頁面，時間全部鋪開展示；兩者都支持滑動鼠標(手指)連續選擇時間段。

d. 訂單狀態查詢

設計差異：

電腦端采用 input 框，下拉選中；移動端則是全部展示，采用勾選的方式進行選擇。

3）批量操作

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

4）訂單

訂單內容包括訂單編號、下單時間、零售商、商品信息、數量、發貨方式、買家信息、訂單狀態、實收款、訂單詳情、查看物流。這些內容可以歸納為 3 類：1、訂單信息 2、商品信息 3、操作

a. 訂單信息

訂單信息包括：訂單編號、下單時間、零售商、、發貨方式、買家信息、訂單狀態、實收款

設計差異：

電腦端面積大，內容散開排列；移動端面積小，內容集中排列。

b. 商品信息

商品信息包括：商品名稱、圖片、價格、貨號、規格、SKU 編碼、供應商、下單數量、拿貨數量、倉內現貨、缺貨原因

設計差異：

同樣的內容，移動端更加聚焦，但是商品數量展示也偏少。

c. 操作

操作包括：訂單詳情、查看物流

設計差異：

交互方式相同，都是跳轉新頁面。

三、總結

由于屏幕大小和分辨率的不同，電腦端和移動端頁面在功能的布局和信息展示上也會有所不同。電腦端使用鼠標操作，包含滑動、左擊、右擊、雙擊等，操作相對單一，交互效果較少。而對于手機端來說，由于屏幕大小的限制，操作方式需要更加的豐富，通過這些豐富的操作來實現頁面和功能之間的交互。所以電腦端和移動端相同功能的操作方式也會不同，組件也有所差異。在做設計時，盡量使用成熟的組件，給用戶良好的使用體驗。

遇到復雜的設計需求，不要慌張，核心都是看透事物的本質，拆解為基礎的原件，再從根本上解決問題。

歡迎關注作者微信公眾號：「西城門設計」