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