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