2016-12-5 資深UI設計者
在有限的界面尺寸里,給予用戶無限操作可能
股票中行情內容是最多的,其內容展現的難度系數相當大,所以它的交互設計也十分棘手。
在一個界面中,僅通過點擊方式無法承載股票行情的諸多功能點。要想界面簡潔、突出重點就必須把相對次要的功能隱藏起來。在行情界面設計過程中遇到的主要問題是哪些東西該顯示,哪些東西隱藏,隱藏后如何讓用戶發現,怎樣的顯示方式更容易被用戶接受等等。
參考一下股單iOS版中行情界面的手勢覆蓋情況:
除了以上列舉的手勢,再加上被用戶所認知的下拉刷新、上滑調出控制中心,在這個界面中竟然覆蓋了十余種手勢操作方式,算起來還是挺驚人的。
在優化行情界面設計前,團隊對用戶在行情界面的使用場景進行了優先級排序,綜合考慮了手勢的認知成本以及手勢操作的難易程度,最后確定了手勢與功能的匹配方案。
但當我把既定的方案落實到具體的界面交互時,我開始陷入了深深的疑慮中,一個具有“哲學”性質的問題始終在困擾著我:顯性的點擊操作與隱性的手勢操作分析。
舉個例子:iOS與安卓的返回操作
iOS:
顯性——左上角返回按鈕
手勢——左側邊緣滑動返回
安卓:
顯性——左上角返回按鈕,底部虛返回鍵
手勢——無
分析:
1.共性,返回鍵是一個界面中最基本的操作,大概是為了降低用戶產生誤觸的概率,iOS與安卓都把它安排在一個較為明顯卻不太容易操作的左上角位置。
2.差異,iOS和安卓除了左上角的返回按鈕,還有其他具備各自系統特色的返回操作。iOS采用了左側邊緣滑動返回的手勢操作;而安卓則是底部的顯性返回按鈕操作。結合《導航篇》的設計分析,安卓左側邊緣滑動喚出抽屜導航,與左側邊緣滑動返回的手勢產生沖突,故此沒有采用該種滑動返回的操作方式。
國內很多安卓手機廠商的返回按鈕設置存在差異,有的設在左邊,有的設在右邊,返回按鈕設在中間的比較少見。我好奇的是,國內某些手機廠商要抄襲蘋果的設計,何不刪減底部返回按鈕,加裝左側滑動返回手勢的操作?
(當然,安卓平臺也有很多APP是支持左側邊緣滑動返回的。例如微信,左側邊緣滑動返回上一級,滑動切換底部tab欄。安卓版的微信也是十分任性,在一個二級界面里就有三個可以進行返回的操作,不知微信團隊是沒有考慮清楚還是故意而為之,呵呵噠!)
顯性的點擊操作與隱性手勢優缺對比:
顯性點擊
優點:1.所見即所得 2.學習成本、認知成本較低 3.可控感強
缺點:1.頁面功能容易臃腫 2.交互方式單一 3.缺乏趣味性
隱性手勢
優點:1.頁面簡潔 2.交互方式豐富 3.可創造性強
缺點:1.學習成本、認知成本較高 2.不可控感 3.容易誤操作
不過,隱性手勢中可通過反饋的方式彌補列舉的不足,如果手勢的反饋可以讓人愉悅,那么這點操作負荷根本不值一提。
頁面中具體是使用顯性的點擊還是隱性的手勢還需要根據實際界面尺寸、功能優先級、屬性以及產品的定位、目標人群來確定。
在有限的界面尺寸里,給予用戶無限操作可能。這是我們在設計中秉承的宗旨。
在股單安卓版的行情界面設計中,我們根據安卓的系統特性和用戶的系統認知、操作習慣對個股行情頁面進行了重新設計。
在這些手勢中具有突破性的是采用了右側邊緣滑動進行K線周期和技術指標的設置。這種操作手勢在常見的APP中使用的頻率較低,所以用戶的學習成本和認知成本相對較高。我有點想不通的是,為啥手機邊緣的頂部下滑、底部上滑、左側右滑這些手勢都快被各種APP玩壞了,右側左滑這個手勢卻很少被設計利用起來?
在股票行情的界面中,我們做過許多K線周期和技術指標設置的入口設計方案。如采用Material Design獨具特色的懸浮小球球,像其他競品一樣把設置項直接放在界面上……這些方案我們都不太滿意。我們不希望過于強調這個設置入口從而導致用戶查看分時、K線數據時的注意力受到干擾。
最終我們選擇了右側邊緣左滑的設置方案。然而在進行可用性測試時,許多用戶都不能發現這一個手勢操作,這讓我們感覺有點蛋疼。在產品上線時,我們無奈地在這個地方加了個引導提示。關于這一點,其實我是拒絕的,需要引導操作的設計不是好設計。
為了更好地培養用戶這個使用習慣,股單安卓版中其它設置、編輯功能也采用了這一手勢。在接下來的新功能中我也會盡可能地把這個手勢利用上去,希望各位看官在體驗過后能積極提供反饋意見。
對于設計中隱形的手勢操作,用戶操作時可能需要些學習成本、認知成本,為了給予用戶優質的體驗,并在操作中能不斷的發現一些小驚喜,我們把這些成本、風險一并承擔了。
廢話就啰嗦這么多了,若是有小伙伴想體驗這些手勢設計在產品中的應用,那就趕緊去下載股單折騰一番吧!
藍藍設計( m.91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務