如果您想訂閱本博客內(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)。要想界面簡(jiǎn)潔、突出重點(diǎn)就必須把相對(duì)次要的功能隱藏起來。在行情界面設(shè)計(jì)過程中遇到的主要問題是哪些東西該顯示，哪些東西隱藏，隱藏后如何讓用戶發(fā)現(xiàn)，怎樣的顯示方式更容易被用戶接受等等。

參考一下股單iOS版中行情界面的手勢(shì)覆蓋情況：

除了以上列舉的手勢(shì)，再加上被用戶所認(rèn)知的下拉刷新、上滑調(diào)出控制中心，在這個(gè)界面中竟然覆蓋了十余種手勢(shì)操作方式，算起來還是挺驚人的。

在優(yōu)化行情界面設(shè)計(jì)前，團(tuán)隊(duì)對(duì)用戶在行情界面的使用場(chǎng)景進(jìn)行了優(yōu)先級(jí)排序，綜合考慮了手勢(shì)的認(rèn)知成本以及手勢(shì)操作的難易程度，最后確定了手勢(shì)與功能的匹配方案。

但當(dāng)我把既定的方案落實(shí)到具體的界面交互時(shí)，我開始陷入了深深的疑慮中，一個(gè)具有“哲學(xué)”性質(zhì)的問題始終在困擾著我：顯性的點(diǎn)擊操作與隱性的手勢(shì)操作分析。

舉個(gè)例子：iOS與安卓的返回操作

iOS：

顯性——左上角返回按鈕

手勢(shì)——左側(cè)邊緣滑動(dòng)返回

安卓：

顯性——左上角返回按鈕，底部虛返回鍵

手勢(shì)——無

分析：

1.共性，返回鍵是一個(gè)界面中最基本的操作，大概是為了降低用戶產(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)生沖突，故此沒有采用該種滑動(dòng)返回的操作方式。

國(guó)內(nèi)很多安卓手機(jī)廠商的返回按鈕設(shè)置存在差異，有的設(shè)在左邊，有的設(shè)在右邊，返回按鈕設(shè)在中間的比較少見。我好奇的是，國(guó)內(nèi)某些手機(jī)廠商要抄襲蘋果的設(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ì)是沒有考慮清楚還是故意而為之，呵呵噠！）

顯性的點(diǎn)擊操作與隱性手勢(shì)優(yōu)缺對(duì)比：

顯性點(diǎn)擊
優(yōu)點(diǎn)：1.所見即所得 2.學(xué)習(xí)成本、認(rèn)知成本較低 3.可控感強(qiáng)
缺點(diǎn)：1.頁面功能容易臃腫 2.交互方式單一 3.缺乏趣味性
隱性手勢(shì)
優(yōu)點(diǎn)：1.頁面簡(jiǎn)潔 2.交互方式豐富 3.可創(chuàng)造性強(qiáng)
缺點(diǎn)：1.學(xué)習(xí)成本、認(rèn)知成本較高 2.不可控感 3.容易誤操作

不過，隱性手勢(shì)中可通過反饋的方式彌補(bǔ)列舉的不足，如果手勢(shì)的反饋可以讓人愉悅，那么這點(diǎn)操作負(fù)荷根本不值一提。

頁面中具體是使用顯性的點(diǎn)擊還是隱性的手勢(shì)還需要根據(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ì)。

在這些手勢(shì)中具有突破性的是采用了右側(cè)邊緣滑動(dòng)進(jìn)行K線周期和技術(shù)指標(biāo)的設(shè)置。這種操作手勢(shì)在常見的APP中使用的頻率較低，所以用戶的學(xué)習(xí)成本和認(rèn)知成本相對(duì)較高。我有點(diǎn)想不通的是，為啥手機(jī)邊緣的頂部下滑、底部上滑、左側(cè)右滑這些手勢(shì)都快被各種APP玩壞了，右側(cè)左滑這個(gè)手勢(shì)卻很少被設(shè)計(jì)利用起來？

在股票行情的界面中，我們做過許多K線周期和技術(shù)指標(biāo)設(shè)置的入口設(shè)計(jì)方案。如采用Material Design獨(dú)具特色的懸浮小球球，像其他競(jìng)品一樣把設(shè)置項(xiàng)直接放在界面上……這些方案我們都不太滿意。我們不希望過于強(qiáng)調(diào)這個(gè)設(shè)置入口從而導(dǎo)致用戶查看分時(shí)、K線數(shù)據(jù)時(shí)的注意力受到干擾。

最終我們選擇了右側(cè)邊緣左滑的設(shè)置方案。然而在進(jìn)行可用性測(cè)試時(shí)，許多用戶都不能發(fā)現(xiàn)這一個(gè)手勢(shì)操作，這讓我們感覺有點(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è)置、編輯功能也采用了這一手勢(shì)。在接下來的新功能中我也會(huì)盡可能地把這個(gè)手勢(shì)利用上去，希望各位看官在體驗(yàn)過后能積極提供反饋意見。

對(duì)于設(shè)計(jì)中隱形的手勢(shì)操作，用戶操作時(shí)可能需要些學(xué)習(xí)成本、認(rèn)知成本，為了給予用戶優(yōu)質(zhì)的體驗(yàn)，并在操作中能不斷的發(fā)現(xiàn)一些小驚喜，我們把這些成本、風(fēng)險(xiǎn)一并承擔(dān)了。

廢話就啰嗦這么多了，若是有小伙伴想體驗(yàn)這些手勢(shì)設(shè)計(jì)在產(chǎn)品中的應(yīng)用，那就趕緊去下載股單折騰一番吧！

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)