看京東和淘寶的地址薄設計----填寫訂單的場景下
本人在工作中碰到設計地址薄的工作,就是在填寫訂單的情況下填寫地址。於是本著拿來主義,先參考京東和天貓的做法。
京東APP:
圖1、訂單頁面--京東 圖2、收貨地址--京東
在“訂單頁面“京東會自動填上預設地址,如果確實為所需要寄遞地址,就可以直接進入下一步。如果不是,可以點選地址進入“收貨地址”頁面,在這個頁面可以進行以下操作:1、點選某個地址。2、新建地址。3、點選編輯地址。4、長按除“預設地址”外的某個地址。其中操作1是將此地址帶回訂單頁面,操作2、3兩項是跳入新頁面,操作4是彈出對話方塊,可以選擇“設定預設地址”或“刪除地址”。如下圖:
圖3、新建收貨地址--京東 圖4、編輯收貨地址--京東
圖5、長按某個地址--京東
在“新建收貨地址”和“編輯收貨地址”頁面點選“儲存並使用”就會跳轉回訂單頁面,帶上剛填寫的收貨地址。“設為預設”和“刪除地址”操作後還是在地址薄頁面。
淘寶APP:
淘寶的“收貨地址”頁面不能管理收貨地址,只能選擇某個地址。如果要管理,還需點選“管理收貨地址”,跳轉到“收貨地址管理”頁面。
圖6、訂單頁面--淘寶 圖7、收貨地址--淘寶
圖8、收貨地址管理--淘寶
在“收貨地址管理”頁面,點選某個地址即跳入“修改和刪除地址”頁面。點選“新增收貨地址”就進入“新增地址”頁面。最後儲存後都是回到“收貨地址管理”頁面。
圖9、新增地址--淘寶
圖10、修改和刪除地址--淘寶
由上可見,京東和淘寶在“收貨地址管理”頁面的流程基本類似,都是在此頁面可以進入編輯、刪除、新增地址頁面。但京東是把"收貨地址"頁面與“收貨地址管理“頁面合二為一的,不用像淘寶那樣要點選“管理收貨地址”才會進入“收貨地址管理“頁面,而且京東每次新增和編輯地址都會直接跳轉回訂單頁面,而淘寶只是回到“收貨地址管理“頁面。這兩種方式哪種好呢,我們不妨考慮下使用者的使用場景,在訂單選擇地址時進行新增或編輯地址操作,多半人是這個訂單下找不到匹配的地址,所以需要新增或編輯地址,也就是想這個訂單使用此地址的,京東預設跳回訂單,有其合理性。
綜上所述,在訂單填寫地址的情形下,使用者如果出現地址匹配不到的情況,京東的做法明顯要方便使用者操作。而淘寶的做法是把選擇地址與管理地址的操作分開,這種方式方便程式實現,但其生生地讓使用者進入一個管理地址狀態,不利於使用者在匹配不到地址時的操作體驗。