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