1. 程式人生 > >看京東和淘寶的地址薄設計----填寫訂單的場景下

看京東和淘寶的地址薄設計----填寫訂單的場景下

本人在工作中碰到設計地址薄的工作,就是在填寫訂單的情況下填寫地址。於是本著拿來主義,先參考京東和天貓的做法。

京東APP
  

        圖1、訂單頁面--京東                                         圖2、收貨地址--京東

在“訂單頁面“京東會自動填上預設地址,如果確實為所需要寄遞地址,就可以直接進入下一步。如果不是,可以點選地址進入“收貨地址”頁面,在這個頁面可以進行以下操作:1、點選某個地址。2、新建地址。3、點選編輯地址。4、長按除“預設地址”外的某個地址。其中操作1是將此地址帶回訂單頁面,操作23兩項是跳入新頁面,操作4是彈出對話方塊,可以選擇“設定預設地址”或“刪除地址”。如下圖:


    
圖3、新建收貨地址--京東                                    圖4、編輯收貨地址--京東

           圖5、長按某個地址--京東

在“新建收貨地址”和“編輯收貨地址”頁面點選“儲存並使用”就會跳轉回訂單頁面,帶上剛填寫的收貨地址。“設為預設”和“刪除地址”操作後還是在地址薄頁面。
 
淘寶APP

淘寶的“收貨地址”頁面不能管理收貨地址,只能選擇某個地址。如果要管理,還需點選“管理收貨地址”,跳轉到“收貨地址管理”頁面。
    
         圖6、訂單頁面--淘寶                                      圖7、收貨地址--淘寶

  

          圖8、收貨地址管理--淘寶 

在“收貨地址管理”頁面,點選某個地址即跳入“修改和刪除地址”頁面。點選“新增收貨地址”就進入“新增地址”頁面。最後儲存後都是回到“收貨地址管理”頁面。
 

      
                 圖9、新增地址--淘寶                             圖10、修改和刪除地址--淘寶

由上可見,京東和淘寶在“收貨地址管理”頁面的流程基本類似,都是在此頁面可以進入編輯、刪除、新增地址頁面。但京東是把"收貨地址"頁面與“收貨地址管理“頁面合二為一的,不用像淘寶那樣要點選“管理收貨地址”才會進入“收貨地址管理“頁面,而且京東每次新增和編輯地址都會直接跳轉回訂單頁面,而淘寶只是回到“收貨地址管理“頁面。這兩種方式哪種好呢,我們不妨考慮下使用者的使用場景,在訂單選擇地址時進行新增或編輯地址操作,多半人是這個訂單下找不到匹配的地址,所以需要新增或編輯地址,也就是想這個訂單使用此地址的,京東預設跳回訂單,有其合理性。

 
綜上所述,在訂單填寫地址的情形下,使用者如果出現地址匹配不到的情況,京東的做法明顯要方便使用者操作。而淘寶的做法是把選擇地址與管理地址的操作分開,這種方式方便程式實現,但其生生地讓使用者進入一個管理地址狀態,不利於使用者在匹配不到地址時的操作體驗。