折疊屏設計第二彈:商家移動端體驗升級

0 評論 4064 瀏覽 29 收藏 10 分鐘

在前文的《不要驚訝,折疊屏就應該這樣設計!》一文中,我們看到了折疊屏來襲,手淘設計師們基于C端應用場景的思考與暢想。作為第二彈,讓我們來探索一下,折疊屏如何為淘寶的商家用戶帶來1+1大于2的體驗升級。

為什么商家端產品也開始關注移動端折疊屏帶來的變化?

如今移動設備得到更廣泛的應用,手機已不僅僅被當做是即時通訊與休閑娛樂的載體,更多的工作場景也逐漸遷移到了移動端。便捷靈活的移動端電商工作平臺是80、90后商家首選的經營方式,目前淘寶商家中超過30%的用戶每天僅使用手機便可進行店鋪的管理工作,B端用戶對于移動端的依賴度越來越高。

折疊屏第二彈 - 商家移動端體驗升級

超過30%的商家僅使用移動端管理店鋪

折疊屏對手機屏幕的延展,帶給用戶的是一種“手機變平板”的體驗。然而與平板設備不同的是,它可以讓用戶同時擁有“便攜”靈活性與“大屏”擴展性的雙重體驗優勢。B端用戶對于“效率”的訴求更高,我們期待的是這種設備帶來的優勢更好得賦能商家產品“效率”體驗的升級。

相較于C端,B端產品具有兩大特點:

  • 功能及交互更為復雜,用戶需要更高頻的輸入、切換、比對等操作;
  • 信息維度多樣化,界面信息量不光來自于單維度信息的重復平鋪,更多場景下是多維度的信息疊加與交叉。這也是用戶對于“效率”訴求的來源。

商家經營鏈路主要包括店鋪管理、商品交易、客服接待、數據監控、營銷設定等,千牛賣家工作臺是淘寶商家最常用并且覆蓋以上經營鏈路的移動端產品,下面我們以千牛賣家工作臺作為實例進行折疊屏的設計探索。

折疊屏第二彈 - 商家移動端體驗升級

千牛賣家工作臺移動端

圍繞“效率”這個關鍵詞,結合商家在移動端的三大高頻工作場景,我們從用戶與界面交互的三個主要階段:理解信息、產生交互行為、獲取反饋,來分析目前在移動端用戶都會遇到的問題有哪些?

折疊屏第二彈 - 商家移動端體驗升級

從現狀出發探索體升級

接下來,我們針對以上場景具體展開設計探索:

場景一:數據瀏覽

隨時隨地進行數據查閱,是移動端的主要優勢之一,也是目前商家在移動端最高頻的操作。很多業務場景都會涉及到數據的展示。首屏展示的數據有限,而大屏模式首先可以提升的就是展示效率。因此在這個場景下,相比于做橫向拉伸適配,更優解是進行布局變化在首屏展示更多的數據信息。

折疊屏第二彈 - 商家移動端體驗升級

數據瀏覽場景的展示效率提升

除此之外,在大屏下還可以增加更豐富的交互形式,例如數據圖表的沉浸式瀏覽與數據項細節對比。

折疊屏第二彈 - 商家移動端體驗升級

?數據瀏覽可以更加沉浸

除此之外,在大屏下還可以增加更豐富的交互形式,例如數據圖表的沉浸式瀏覽與數據項細節對比。

折疊屏第二彈 - 商家移動端體驗升級

數據切換可以更加直接

場景二:客服接待

折疊屏手機中的分屏模式,是一種全新的界面形式,讓用戶同時進行兩個任務,進行分支任務時不錯過主任務的信息。

我們嘗試了兩種應用內分屏的解決方案:

第一種為“浮層分屏”,即通過浮層和卡片的方式進行內分屏的框架設計,使界面更加整體,不是生硬的切分成兩個區域,以下是“浮層分屏”在客服接待場景中的設計應用。

折疊屏第二彈 - 商家移動端體驗升級

浮層分屏

客服接待是商家端使用頻率僅次于數據瀏覽的場景。平板中的IM應用通常對于大屏下的解決方案是列表+聊天,這種方案可以提升切換效率,但B端即時通訊場景下對于效率的訴求不僅僅是切換這一項,還有信息獲取的問題。

折疊屏第二彈 - 商家移動端體驗升級

常見的IM場景解決思路

盡管界面中有“相關訂單”的入口,我們還是經常收到用戶的反饋,希望能夠將訂單信息直接展示在聊天界面,但在小屏下會影響聊天這一核心操作。而這在大屏下可以得到很好的解決,右側正好可以用來直接展示用戶信息和相關訂單。

折疊屏第二彈 - 商家移動端體驗升級

客服接待時直接看到用戶的相關信息

同時我們在上方設計了聯系人列表快速切換的入口,用來平衡聯系人切換和信息獲取兩方面的效率訴求。

折疊屏第二彈 - 商家移動端體驗升級

聯系人的便捷切換

IM+的其他操作(例如推薦商品)也可以通過右側進行展示,避免操作時錯過用戶最新的留言,而這有可能影響他的操作決策。

折疊屏第二彈 - 商家移動端體驗升級

推薦商品時不錯過顧客留言

場景三:后臺設置

折疊屏手機應用內分屏的另一種設計解決方案是“對半分屏”,這種框架更加適合于需要全屏預覽的場景,我們以B端產品中常見的后臺設置場景為例。

折疊屏第二彈 - 商家移動端體驗升級

對半分屏模式

通常這種后臺設置有一個前臺的展示效果與之對應,我們采用對半分屏的模式,使用戶在設置的同時看到效果,更直觀地進行預覽,所見即所得。

折疊屏第二彈 - 商家移動端體驗升級

淘外推廣海報設置預覽

以上就是我們在商家端典型場景下進行的折疊屏設計解決方案的一些思路,拋磚引玉。

隨著折疊屏、大屏手機的發展、硬件的升級,讓我們在產品設計的拓展上有了更多的想象空間,希望這些設計的應用能夠真正幫助到商家提升移動端經營的效率。

如果你有更多的idea,也歡迎和我們留言探討~

注:

  1. 以上設計稿為創意表達,淘寶設計部擁有最終解釋權;
  2. 設計稿中所用素材僅用于創意演示,實際商品、店鋪信息、產品功能以線上為準。

 

作者: Project F,公眾號:淘寶設計(ID:ali-taobaoued)

來源:https://mp.weixin.qq.com/s/69qCpoYrT3M6qn26B-aO6g

本文由 @淘寶設計 授權發布于人人都是產品經理。未經許可,禁止轉載

題圖來自淘寶設計公眾號

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!