以手機淘寶為例,看原型圖易缺失的交互場景

以iOS版手機淘寶歷史搜索為例,本文作者希望通過展示的原型圖來討論易遺漏的交互場景,讓讀者得到收獲,并總結出以后如何避免遺漏交互細節與定義。

手機淘寶搜索欄出現歷史搜索旨在減少用戶文本輸入,可快速查看以前搜索的商品。搜索發現通過用戶的操作行為智能推薦用戶感興趣的商品,增加用戶的訪問深度和購物興趣。

目前手機淘寶的搜索初始界面iOS 和Android版對歷史搜索的交互采取兩種不同的形式。iOS版通過用戶長按歷史搜索的關鍵詞,出現叉號,用戶點擊叉號進行刪除關鍵詞,刪除過程中無需用戶進行二次確認。Android版用戶通過長按,出現彈框,需要進行二次確認。

 

iOS版優點:相對于Android版,iOS 用戶在刪除過程中可以快速刪除,長按之后,手指立刻可以觸控到叉號icon進行刪除。

 

iOS版缺點:

  1. 用戶在長按出現刪除icon,但是用戶如果不刪除關鍵詞,則無法恢復正常狀態。

  2. 叉號icon過小,有時候可能會出現點不中的情況。

 

Android版缺點:

  1. 通過長按刪除關鍵詞,出現彈框,從長按到出現彈框手指操作跳躍過大。

  2. 彈框僅僅起到了防錯功能,無法起到二次確認刪除某個關鍵詞的作用(彈框提示語沒有標明刪除的是哪個關鍵詞)。

手機淘寶中的歷史搜索,一個看似簡單的交互流程,可能蘊含著很多的交互場景,但如果交互設計師/產品經理首次設計類似的需求交互時可能會遺漏很多交互場景。

我以iOS版手機淘寶歷史搜索為例。通過展示的原型圖來討論易遺漏的交互場景,希望通過這篇文章可以讓讀者得到收獲,并總結出以后如何避免遺漏交互細節與定義。

 

1. 歷史搜索原型圖

目前手機淘寶的搜索初始界面iOS 和Android版對歷史搜索的交互采取兩種不同的形式。

iOS版通過用戶長按歷史搜索的關鍵詞,出現叉號,用戶點擊叉號進行刪除關鍵詞。刪除過程中無需用戶進行二次確認。

 

2. iOS版歷史搜索原型圖

歷史搜索原型圖展示分三個小場景:1.歷史搜索的關鍵詞全部刪除。2.歷史搜索的關鍵詞單個刪除。3.搜索發現的關鍵詞處理。

 

2.1 歷史搜索的關鍵詞全部刪除

 

原型圖上面的交互定義有以下:

  1. 極限值的定義:確定歷史搜索和搜索發現最多關鍵詞為10個

  2. 刪除出現二次確認的警示框

  3. 全部刪除后,搜索發現位置移動定義

 

2.2 歷史搜索的關鍵詞單個刪除

 

原型圖上面的交互定義有以下:

  1. 對單擊關鍵詞操作的交互說明

  2. 長按之后刪除,其他關鍵詞的移動定義

 

2.3 搜索發現的關鍵詞處理

 

原型圖上面的交互定義有以下:

  1. 對隱藏和開啟操作的定義

  2. 搜索發現的關鍵詞手勢定義

如果以上線框圖。貌似一看沒什么問題。其實遺漏了很多交互場景,大家可以找出存在哪些遺漏嗎?

 

3. 遺漏的交互場景

(1)用戶長按關鍵詞,關鍵詞出現叉號icon。如果單擊其他關鍵詞,如何交互?缺乏定義說明。如果不做說明,可能會出現以下兩種情況。

 

(2)用戶長按關鍵詞,關鍵詞出現叉號icon。如果用戶長按其他關鍵詞,之前關鍵詞叉號icon是否還存在?如果不做說明,可能會出現以下兩種情況。

 

(3)用戶長按關鍵詞,關鍵詞出現叉號icon。如果單擊其他關鍵詞,進入下級界面,返回界面為哪個狀態界面?如果不做說明,可能會出現以下三種情況。

 

(4)如果歷史搜索關鍵詞挨著刪除,最后全部刪完?歷史搜索字段是否保留,如果保留是文案說明歷史搜索關鍵詞為空?這里又有兩種情況。

以上四種遺漏的交互場景,在設計過程中都必須要定義說明,不然到了開發階段,就會出現各種問題。

 

4. 總結

為什么會出現如此多遺漏。原因有以下情況:

  1. 因為在歷史搜索中存在長按手勢,那么在整個交互界面時,其他可交互元素也要考慮長按操作

  2. 出口與入口的忽略

  3. 僅僅考慮最大極限情況,卻沒有考慮最小極限

 

通過一個小小的歷史搜索就遺漏這么多問題。如果涉及到大的產品需求,想全面不遺漏交互場景,需要考慮以下情況:

  1. 明確所有場景和使用人群

  2. 交互邏輯無缺失

  3. 異常場景不遺漏

  4. 異常狀態有說明

  5. 手勢操作不遺漏

  6. 關鍵字段有規則定義

  7. 極限情況有定義

  8. 是否涉及到多種角色和權限

  9. 刷新、加載、轉場說明

PS:如何用科學方法做出專業無遺漏的原型圖,我會在后續的文章中講到,敬請期待哦。

 

封面作者:

作者:Echo(微信公眾號:UEDC)

來源:學UI網

上一篇: 最高效易用的自動標注工具 , PxCook 3.0

下一篇: 版式設計-名片排版の1000種解法

分享到: 更多
江苏快3微信群稳赚 金库游戏LG 广东11选5任一稳赚技巧 助赢计划软件app 北京pk10稳赚心得技巧 北京pk10在线人工杀码 抢庄牌九最新版 宝盈棋牌下载送12金币 五星二码不定位稳赚 极速时时有什么软件 北京pk10计划微信群 重庆市重庆时时开奖结果记录 二八筒生死门怎么看 手机上炸金花技巧规律 欢乐麻将游戏下载 中国波兰