国产日本中文字幕网_久热免费视频_秋霞2016午夜限制电影在线_www色视频还会玩转热点_欧美中日韩免费专区在线_亚洲AV色噜噜男人的天堂吃奶_亚洲人成无码网址_国产成人主播在线观看_欧美韩日精品一区_久久精品国产亚洲AV高清色三区

公司新聞

將想法與觀點,與您一起分享~

開發(fā)案例插畫 插畫-樹 插畫-樹

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

潤雪科技 時間:2019-05-14 16:55 瀏覽量:3181

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

手機淘寶搜索欄出現(xiàn)歷史搜索旨在減少用戶文本輸入,可快速查看以前搜索的商品。搜索發(fā)現(xiàn)通過用戶的操作行為智能推薦用戶感興趣的商品,增加用戶的訪問深度和購物興趣?!?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站建設

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


image.png


image.png


iOS版優(yōu)點:相對于Android版,iOS 用戶在刪除過程中可以快速刪除,長按之后,手指立刻可以觸控到叉號icon進行刪除?!?a href="http://pgwc.com.cn" target="_self">定制網(wǎng)站

iOS版缺點

o   用戶在長按出現(xiàn)刪除icon,但是用戶如果不刪除關鍵詞,則無法恢復正常狀態(tài)。

o   叉號icon過小,有時候可能會出現(xiàn)點不中的情況。

Android版缺點

o   通過長按刪除關鍵詞,出現(xiàn)彈框,從長按到出現(xiàn)彈框手指操作跳躍過大。

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

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

我以iOS版手機淘寶歷史搜索為例。通過展示的原型圖來討論易遺漏的交互場景,希望通過這篇文章可以讓讀者得到收獲,并總結出以后如何避免遺漏交互細節(jié)與定義?!?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁設計

.  歷史搜索原型圖

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

iOS版通過用戶長按歷史搜索的關鍵詞,出現(xiàn)叉號,用戶點擊叉號進行刪除關鍵詞。刪除過程中無需用戶進行二次確認?!?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設計

. iOS版歷史搜索原型圖

歷史搜索原型圖展示分三個小場景:

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

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

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

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


image.png


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

o   極限值的定義:確定歷史搜索和搜索發(fā)現(xiàn)最多關鍵詞為10個?!?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁設計

o   刪除出現(xiàn)二次確認的警示框。

o   全部刪除后,搜索發(fā)現(xiàn)位置移動定義。

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


image.png


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

o   對單擊關鍵詞操作的交互說明。

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

搜索發(fā)現(xiàn)的關鍵詞處理——定制網(wǎng)站


image.png


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

o   對隱藏和開啟操作的定義。

o   搜索發(fā)現(xiàn)的關鍵詞手勢定義。

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

. 遺漏的交互場景

用戶長按關鍵詞,關鍵詞出現(xiàn)叉號icon

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


image.png


用戶長按關鍵詞,關鍵詞出現(xiàn)叉號icon

如果用戶長按其他關鍵詞,之前關鍵詞叉號icon是否還存在?如果不做說明,可能會出現(xiàn)以下兩種情況?!?a href="http://pgwc.com.cn" target="_self">網(wǎng)站設計


image.png


用戶長按關鍵詞,關鍵詞出現(xiàn)叉號icon

如果單擊其他關鍵詞,進入下級界面,返回界面為哪個狀態(tài)界面?如果不做說明,可能會出現(xiàn)以下三種情況。


image.png


如果歷史搜索關鍵詞挨著刪除,最后全部刪完?

歷史搜索字段是否保留,如果保留是文案說明歷史搜索關鍵詞為空?這里又有兩種情況。——重慶定制網(wǎng)站


image.png


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

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

o   因為在歷史搜索中存在長按手勢,那么在整個交互界面時,其他可交互元素也要考慮長按操作?!?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁設計

o   出口與入口的忽略。

o   僅僅考慮最大極限情況,卻沒有考慮最小極限。

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

o   明確所有場景和使用人群。

o   交互邏輯無缺失。

o   異常場景不遺漏。

o   異常狀態(tài)有說明。

o   手勢操作不遺漏。

o   關鍵字段有規(guī)則定義。

o   極限情況有定義。

o   是否涉及到多種角色和權限。

o   刷新、加載、轉場說明。


來源聲明:本文【以手機淘寶為例,看原型圖易缺失的交互場景】由潤雪科技編輯原創(chuàng)或采編整理,如需轉載請注明來自潤雪科技。以上內容部分(包含圖片、文字)來源于網(wǎng)絡,如有侵權,請及時與本站聯(lián)系。

TAG標簽:網(wǎng)站開發(fā) 網(wǎng)站設計

相關文章
如果您感覺我們的案例非常不錯,請與我們取得聯(lián)系~
立即咨詢
獲取方案及報價 023-6288-5285
網(wǎng)站建設流程 需求溝通
網(wǎng)站建設流程 簽訂合同
網(wǎng)站建設流程 項目開發(fā)
網(wǎng)站建設流程 上線/運營維護

張經(jīng)理

186-9655-6121

鄒經(jīng)理

188-1980-6503

潤雪科技二維碼
電話咨詢 在線咨詢 微信咨詢