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