您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

以手機(jī)淘寶為例,看原型圖易缺失的交互場(chǎng)景

Echo :以iOS版手機(jī)淘寶歷史搜索為例,本文作者盼望通過(guò)展示的原型圖來(lái)討論易遺漏的交互場(chǎng)景,讓讀者得到收獲,并總結(jié)出以后如何避免遺漏交互細(xì)節(jié)與定義。

手機(jī)淘寶搜索欄出現(xiàn)歷史搜索旨在削減用戶文本輸入,可快速查看曩昔搜索的商品。搜索發(fā)現(xiàn)通過(guò)用戶的操作舉動(dòng)智能保舉用戶感愛好的商品,增長(zhǎng)用戶的訪問(wèn)深度和購(gòu)物愛好。

目前手機(jī)淘寶的搜索初始界面iOS 和Android版對(duì)歷史搜索的交互采取兩種不同的情勢(shì)。iOS版通過(guò)用戶長(zhǎng)按歷史搜索的關(guān)鍵詞,出現(xiàn)叉號(hào),用戶點(diǎn)擊叉號(hào)進(jìn)行刪除關(guān)鍵詞,刪除過(guò)程中無(wú)需用戶進(jìn)行二次確認(rèn)。Android版用戶通過(guò)長(zhǎng)按,出現(xiàn)彈框,必要進(jìn)行二次確認(rèn)。

iOS版好處:相對(duì)于Android版,iOS 用戶在刪除過(guò)程中可以快速刪除,長(zhǎng)按之后,手指馬上可以觸控到叉號(hào)icon進(jìn)行刪除。

iOS版瑕玷

  • 用戶在長(zhǎng)按出現(xiàn)刪除icon,但是用戶假如不刪除關(guān)鍵詞,則無(wú)法恢復(fù)正常狀況。
  • 叉號(hào)icon過(guò)小,偶然候可能會(huì)出現(xiàn)點(diǎn)不中的情況。

Android版瑕玷

  • 通過(guò)長(zhǎng)按刪除關(guān)鍵詞,出現(xiàn)彈框,從長(zhǎng)按到出現(xiàn)彈框手指操作跳躍過(guò)大。
  • 彈框僅僅起到了防錯(cuò)功能,無(wú)法起到二次確認(rèn)刪除某個(gè)關(guān)鍵詞的作用(彈框提醒語(yǔ)沒有標(biāo)明刪除的是哪個(gè)關(guān)鍵詞)。

手機(jī)淘寶中的歷史搜索,一個(gè)看似簡(jiǎn)單的交互流程,可能蘊(yùn)含著許多的交互場(chǎng)景,但假如交互設(shè)計(jì)師/產(chǎn)品經(jīng)理首次設(shè)計(jì)類似的需求交互時(shí)可能會(huì)遺漏許多交互場(chǎng)景。

我以iOS版手機(jī)淘寶歷史搜索為例。通過(guò)展示的原型圖來(lái)討論易遺漏的交互場(chǎng)景,盼望通過(guò)這篇文章可以讓讀者得到收獲,并總結(jié)出以后如何避免遺漏交互細(xì)節(jié)與定義。

一.  歷史搜索原型圖

目前手機(jī)淘寶的搜索初始界面iOS 和Android版對(duì)歷史搜索的交互采取兩種不同的情勢(shì)。

iOS版通過(guò)用戶長(zhǎng)按歷史搜索的關(guān)鍵詞,出現(xiàn)叉號(hào),用戶點(diǎn)擊叉號(hào)進(jìn)行刪除關(guān)鍵詞。刪除過(guò)程中無(wú)需用戶進(jìn)行二次確認(rèn)。

二. iOS版歷史搜索原型圖

歷史搜索原型圖展示分三個(gè)小場(chǎng)景:

  • 歷史搜索的關(guān)鍵詞悉數(shù)刪除。
  • 歷史搜索的關(guān)鍵詞單個(gè)刪除。
  • 搜索發(fā)現(xiàn)的關(guān)鍵詞處理。

歷史搜索的關(guān)鍵詞悉數(shù)刪除

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

  • 極限值的定義:確定歷史搜索和搜索發(fā)現(xiàn)最多關(guān)鍵詞為10個(gè)。
  • 刪除出現(xiàn)二次確認(rèn)的警示框。
  • 悉數(shù)刪除后,搜索發(fā)現(xiàn)位置移動(dòng)定義。

歷史搜索的關(guān)鍵詞單個(gè)刪除

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

  • 對(duì)單擊關(guān)鍵詞操作的交互說(shuō)明。
  • 長(zhǎng)按之后刪除,其他關(guān)鍵詞的移動(dòng)定義。

搜索發(fā)現(xiàn)的關(guān)鍵詞處理

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

  • 對(duì)隱蔽和開啟操作的定義。
  • 搜索發(fā)現(xiàn)的關(guān)鍵詞手勢(shì)定義。

假如以上線框圖。貌似一看沒什么題目。其實(shí)遺漏了許多交互場(chǎng)景,大家可以找出存在哪些遺漏嗎?

三. 遺漏的交互場(chǎng)景

用戶長(zhǎng)按關(guān)鍵詞,關(guān)鍵詞出現(xiàn)叉號(hào)icon

假如單擊其他關(guān)鍵詞,如何交互?缺乏定義說(shuō)明。假如不做說(shuō)明,可能會(huì)出現(xiàn)以下兩種情況。

用戶長(zhǎng)按關(guān)鍵詞,關(guān)鍵詞出現(xiàn)叉號(hào)icon

假如用戶長(zhǎng)按其他關(guān)鍵詞,之前關(guān)鍵詞叉號(hào)icon是否還存在?假如不做說(shuō)明,可能會(huì)出現(xiàn)以下兩種情況。

用戶長(zhǎng)按關(guān)鍵詞,關(guān)鍵詞出現(xiàn)叉號(hào)icon

假如單擊其他關(guān)鍵詞,進(jìn)入下級(jí)界面,返回界面為哪個(gè)狀況界面?假如不做說(shuō)明,可能會(huì)出現(xiàn)以下三種情況。

假如歷史搜索關(guān)鍵詞挨著刪除,最后悉數(shù)刪完?

歷史搜索字段是否保留,假如保留是文案說(shuō)明歷史搜索關(guān)鍵詞為空?這里又有兩種情況。

以上四種遺漏的交互場(chǎng)景,在設(shè)計(jì)過(guò)程中都必須要定義說(shuō)明,不然到了開發(fā)階段,就會(huì)出現(xiàn)各種題目。

四. 總結(jié)

為什么會(huì)出現(xiàn)如此多遺漏。緣故原由有以下情況:

  • 由于在歷史搜索中存在長(zhǎng)按手勢(shì),那么在整個(gè)交互界面時(shí),其他可交互元素也要考慮長(zhǎng)按操作。
  • 出口與入口的忽略。
  • 僅僅考慮最大極限情況,卻沒有考慮最小極限。

通過(guò)一個(gè)小小的歷史搜索就遺漏這么多題目。假如涉及到大的產(chǎn)品需求,想周全不遺漏交互場(chǎng)景,必要考慮以下情況:

  • 明確所有場(chǎng)景和使用人群。
  • 交互邏輯完好失。
  • 非常場(chǎng)景不遺漏。
  • 非常狀況有說(shuō)明。
  • 手勢(shì)操作不遺漏。
  • 關(guān)鍵字段有規(guī)則定義。
  • 極限情況有定義。
  • 是否涉及到多種角色和權(quán)限。
  • 刷新、加載、轉(zhuǎn)場(chǎng)說(shuō)明。

迎接關(guān)注作者的微信公眾號(hào):「UEDC」


[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://likemindfilms.com/tutorial/di3929.html
在設(shè)計(jì)流程中,通過(guò)這6種體例來(lái)運(yùn)用信息架構(gòu)
高手課堂!「按鈕系列」之按鈕位置與用戶體驗(yàn)的關(guān)系
圖趣網(wǎng)微信
建議反饋
×