2016-12-5 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
在有限的界面尺寸里,給予用戶無限操作可能
股票中行情內(nèi)容是最多的,其內(nèi)容展現(xiàn)的難度系數(shù)相當(dāng)大,所以它的交互設(shè)計(jì)也十分棘手。
在一個(gè)界面中,僅通過點(diǎn)擊方式無法承載股票行情的諸多功能點(diǎn)。要想界面簡潔、突出重點(diǎn)就必須把相對次要的功能隱藏起來。在行情界面設(shè)計(jì)過程中遇到的主要問題是哪些東西該顯示,哪些東西隱藏,隱藏后如何讓用戶發(fā)現(xiàn),怎樣的顯示方式更容易被用戶接受等等。
參考一下股單iOS版中行情界面的手勢覆蓋情況:
除了以上列舉的手勢,再加上被用戶所認(rèn)知的下拉刷新、上滑調(diào)出控制中心,在這個(gè)界面中竟然覆蓋了十余種手勢操作方式,算起來還是挺驚人的。
在優(yōu)化行情界面設(shè)計(jì)前,團(tuán)隊(duì)對用戶在行情界面的使用場景進(jìn)行了優(yōu)先級排序,綜合考慮了手勢的認(rèn)知成本以及手勢操作的難易程度,最后確定了手勢與功能的匹配方案。
但當(dāng)我把既定的方案落實(shí)到具體的界面交互時(shí),我開始陷入了深深的疑慮中,一個(gè)具有“哲學(xué)”性質(zhì)的問題始終在困擾著我:顯性的點(diǎn)擊操作與隱性的手勢操作分析。
舉個(gè)例子:iOS與安卓的返回操作
iOS:
顯性——左上角返回按鈕
手勢——左側(cè)邊緣滑動返回
安卓:
顯性——左上角返回按鈕,底部虛返回鍵
手勢——無
分析:
1.共性,返回鍵是一個(gè)界面中最基本的操作,大概是為了降低用戶產(chǎn)生誤觸的概率,iOS與安卓都把它安排在一個(gè)較為明顯卻不太容易操作的左上角位置。
2.差異,iOS和安卓除了左上角的返回按鈕,還有其他具備各自系統(tǒng)特色的返回操作。iOS采用了左側(cè)邊緣滑動返回的手勢操作;而安卓則是底部的顯性返回按鈕操作。結(jié)合《導(dǎo)航篇》的設(shè)計(jì)分析,安卓左側(cè)邊緣滑動喚出抽屜導(dǎo)航,與左側(cè)邊緣滑動返回的手勢產(chǎn)生沖突,故此沒有采用該種滑動返回的操作方式。
國內(nèi)很多安卓手機(jī)廠商的返回按鈕設(shè)置存在差異,有的設(shè)在左邊,有的設(shè)在右邊,返回按鈕設(shè)在中間的比較少見。我好奇的是,國內(nèi)某些手機(jī)廠商要抄襲蘋果的設(shè)計(jì),何不刪減底部返回按鈕,加裝左側(cè)滑動返回手勢的操作?
(當(dāng)然,安卓平臺也有很多APP是支持左側(cè)邊緣滑動返回的。例如微信,左側(cè)邊緣滑動返回上一級,滑動切換底部tab欄。安卓版的微信也是十分任性,在一個(gè)二級界面里就有三個(gè)可以進(jìn)行返回的操作,不知微信團(tuán)隊(duì)是沒有考慮清楚還是故意而為之,呵呵噠?。?
顯性的點(diǎn)擊操作與隱性手勢優(yōu)缺對比:
顯性點(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)先級、屬性以及產(chǎn)品的定位、目標(biāo)人群來確定。
在有限的界面尺寸里,給予用戶無限操作可能。這是我們在設(shè)計(jì)中秉承的宗旨。
在股單安卓版的行情界面設(shè)計(jì)中,我們根據(jù)安卓的系統(tǒng)特性和用戶的系統(tǒng)認(rèn)知、操作習(xí)慣對個(gè)股行情頁面進(jìn)行了重新設(shè)計(jì)。
在這些手勢中具有突破性的是采用了右側(cè)邊緣滑動進(jìn)行K線周期和技術(shù)指標(biāo)的設(shè)置。這種操作手勢在常見的APP中使用的頻率較低,所以用戶的學(xué)習(xí)成本和認(rèn)知成本相對較高。我有點(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è)置、編輯功能也采用了這一手勢。在接下來的新功能中我也會盡可能地把這個(gè)手勢利用上去,希望各位看官在體驗(yàn)過后能積極提供反饋意見。
對于設(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ì)( m.sillybuy.com )是一家專注而深入的界面設(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://m.sillybuy.com