作者： 股單小分隊 @ 國信證券的產(chǎn)品設(shè)計中心
一、交互設(shè)計的那些事
許多朋友問我：你大學學的專業(yè)不是工業(yè)設(shè)計嗎？都是做產(chǎn)品造型的呀，現(xiàn)在怎么跑去證券公司做交互了？
相信許多做交互設(shè)計的朋友和都會遇到這樣的問題。
我覺得做一個APP的交互設(shè)計也是做一個藝術(shù)品，在工業(yè)設(shè)計的各種工藝中我最喜歡的就是陶藝了。我把交互設(shè)計比喻成在做一件陶藝，它需要理性的數(shù)據(jù)分析，如陶藝的長寬高、燒制時火候的把握、陶泥的化學成分等，同時也需要注入感性的元素，如造型細微的變化、釉彩的繪制等。
從事交互設(shè)計這一職業(yè)兩年多了，總會有一些關(guān)于設(shè)計上的思考，以最近在做的股單APP項目為例與各位交流探討一下。
先做一個簡單的介紹，股單APP是國信證券全新推出的青春級炒股官方應用，設(shè)計上旨在減少冗余的視覺修飾,將用戶的注意力聚焦在內(nèi)容、數(shù)據(jù)和交互本身上 ，做一款懂用戶的APP。
iOS、安卓兩個平臺的設(shè)計都不一樣，根據(jù)各平臺的特性、設(shè)計規(guī)范等做出兩款相互競爭的APP。
二、導航篇
2.1 tab導航
底部tab導航與頂部tab導航是較為常用的導航方式。
iOS許多應用都是采用這種導航，如股單的自選股界面采用上下tab導航方式
這也是iOS原生的規(guī)則，在iOS中許多原生系統(tǒng)也采用了這種方式如電話、App Store、音樂等。
在iOS上，tab通過點擊切換，不能滑動切換。因為iOS系統(tǒng)把頁面滑動給了單條信息的滑動操作，或者是頁面返回操作。
不過在許多應用里也并沒有遵守這一原則，iOS頂部的tab欄依然可以通過滑動切換tab，使得界面中的手勢十分的混亂。
想想也不怪設(shè)計師使用這種“混合”設(shè)計，在APP內(nèi)容很多的時候，確實需要通過頂部tab分組，把所有內(nèi)容塞進去，而如果在頂部tab只能通過點擊來切換tab的話無疑是增加了用戶的操作難度，尤其是有十幾個頂部tab的應用（呵呵，心疼他們的交互設(shè)計師）。
在安卓上，tab既可以點擊切換也可以滑動切換。在安卓原生中，是較少使用底部tab導航的，多數(shù)采用抽屜式導航。我認為滑動切換頂部tab欄這一手勢安卓是優(yōu)于iOS的（不過現(xiàn)在已在iOS中混用了），許多研究表明頂部tab的操作位置是用戶較難點擊到的地方，滑動切換tab這一手勢是提供用戶便捷的。股單安卓版中界面中也有多處使用滑動切換tab的交互方式。
現(xiàn)在市面上許多APP，也并沒有太用心的去區(qū)分iOS與安卓的交互設(shè)計的區(qū)別，基本上都是先做iOS版的設(shè)計然后在適配到安卓上，兩個平臺上的交互方式都是混用的。所以我從iOS與安卓的維度分析頂部tab交互的差異化有可能都是廢話。
2.2 抽屜式導航
抽屜式導航是Google應用程序中一種常見的模式，也可以說是安卓APP的一大特色。在Material Design中，也做了詳細的說明。
安卓中許多優(yōu)秀的應用采用的都是這種抽屜式導航如下：
在選擇采用哪種導航方式作為APP的主導航方式，我們團隊糾結(jié)了許久（那段時間，頭發(fā)嗷嗷的掉）。
若選擇抽屜式導航，我們將需要思考分析所有功能的優(yōu)先級和使用場景，用戶的操作習慣等。如今在國內(nèi)的APP中無論是安卓版還是iOS版，大多數(shù)采用的是底部tab導航的架構(gòu)，這也培養(yǎng)了大量用戶的操作習慣。
為了使APP更加的安卓，我們思考再三，決定遵循Material Design選擇漢堡菜單。這無疑是一個大挑戰(zhàn)。（真作啊，直接使用iOS版本一樣的不就得了～哎，誰叫我們是一群有夢想的年輕人呢，呵呵）
既然選擇了抽屜式導航，那么就需要承擔風險：
認知成本
用戶看到的界面比較專一，其他類目部分的內(nèi)容不可見，就比如你打開安卓版股單APP時看到的只是單純干凈的自選股列表，你可能不知道抽屜導航里還隱藏著交易、游戲等更多有意思的功能。這往往就需要用戶去猜測、探索，假如APP的第一印象激發(fā)不了用戶繼續(xù)探索的欲望，那么抽屜式導航的流失率將比底部式導航要高。
操作成本
用戶切換類目時需要先側(cè)滑出導航界面然后才能選擇要切換的功能，不及底部式導航可以直接切換，抽屜式導航在類目之間的切換成本相對較高。
每次想到這些高風險操作，我都心驚膽戰(zhàn)啊，好擔心因為這個導航方式使得APP掛掉了（好怕怕）。
不過我們選擇抽屜式導航肯定也是看到了它的獨特之處的，拋開這些成本來說，它也具備著多處優(yōu)點如：
可以容納多個分支類目，抽屜式導航多少內(nèi)容都能裝的下
隱藏多余的類目，使當前頁面簡潔，不會受到導航的干擾
通過手勢喚出導航，在任何界面都可以進行導航，退出時不需要tab導航那樣需要一層層退出。
在使用底部tab導航框架的APP，當APP的內(nèi)容層級較多的時候，用戶進入最深層級后想要退出到首頁是比較麻煩的，需要多次進行返回。較快捷大方法就是關(guān)閉app的后臺，重新進入。而抽屜式導航則可以解決這個問題。
嗯，這樣想想抽屜式導航也還是很不錯滴??！
在整個設(shè)計過程中通過對Material Design的研究學習，親身體會到Material Design的設(shè)計語言相比較于HIG體系化特征要明顯很多，對于一個設(shè)計師（團隊）的成長有很大的幫助。在接下來的設(shè)計中我們也將會在繼續(xù)遵循Material Design的設(shè)計規(guī)范，做出更佳的用戶體驗，爭取讓用戶欲罷不能，來了就是股單人。
三、手勢篇
在有限的界面尺寸里，給予用戶無限操作可能
股票中行情內(nèi)容是最多的，其內(nèi)容展現(xiàn)的難度系數(shù)相當大，所以它的交互設(shè)計也十分棘手。
在一個界面中，僅通過點擊方式無法承載股票行情的諸多功能點。要想界面簡潔、突出重點就必須把相對次要的功能隱藏起來。在行情界面設(shè)計過程中遇到的主要問題是哪些東西該顯示，哪些東西隱藏，隱藏后如何讓用戶發(fā)現(xiàn)，怎樣的顯示方式更容易被用戶接受等等。
參考一下股單iOS版中行情界面的手勢覆蓋情況：
除了以上列舉的手勢，再加上被用戶所認知的下拉刷新、上滑調(diào)出控制中心，在這個界面中竟然覆蓋了十余種手勢操作方式，算起來還是挺驚人的。
在優(yōu)化行情界面設(shè)計前，團隊對用戶在行情界面的使用場景進行了優(yōu)先級排序，綜合考慮了手勢的認知成本以及手勢操作的難易程度，最后確定了手勢與功能的匹配方案。
但當我把既定的方案落實到具體的界面交互時，我開始陷入了深深的疑慮中，一個具有“哲學”性質(zhì)的問題始終在困擾著我：顯性的點擊操作與隱性的手勢操作分析。
舉個例子：iOS與安卓的返回操作
IOS：
顯性——左上角返回按鈕
手勢——左側(cè)邊緣滑動返回
安卓：
顯性——左上角返回按鈕，底部虛返回鍵
手勢——無
分析：
共性，返回鍵是一個界面中最基本的操作，大概是為了降低用戶產(chǎn)生誤觸的概率，iOS與安卓都把它安排在一個較為明顯卻不太容易操作的左上角位置。
差異，iOS和安卓除了左上角的返回按鈕，還有其他具備各自系統(tǒng)特色的返回操作。iOS采用了左側(cè)邊緣滑動返回的手勢操作；而安卓則是底部的顯性返回按鈕操作。結(jié)合《導航篇》的設(shè)計分析，安卓左側(cè)邊緣滑動喚出抽屜導航，與左側(cè)邊緣滑動返回的手勢產(chǎn)生沖突，故此沒有采用該種滑動返回的操作方式。
國內(nèi)很多安卓手機廠商的返回按鈕設(shè)置存在差異，有的設(shè)在左邊，有的設(shè)在右邊，返回按鈕設(shè)在中間的比較少見。我好奇的是，國內(nèi)某些手機廠商要抄襲蘋果的設(shè)計，何不刪減底部返回按鈕，加裝左側(cè)滑動返回手勢的操作？
（當然，安卓平臺也有很多APP是支持左側(cè)邊緣滑動返回的。例如微信，左側(cè)邊緣滑動返回上一級，滑動切換底部tab欄。安卓版的微信也是十分任性，在一個二級界面里就有三個可以進行返回的操作，不知微信團隊是沒有考慮清楚還是故意而為之，呵呵噠?。?/i>
顯性的點擊操作與隱性手勢優(yōu)缺對比：
優(yōu)點缺點
顯性點擊1.所見即所得
2.學習成本、認知成本較低
3.可控感強1.頁面功能容易臃腫
2.交互方式單一
3.缺乏趣味性
隱性手勢1.頁面簡潔
2.交互方式豐富
3.可創(chuàng)造性強1.學習成本、認知成本較高
2.不可控感
3.容易誤操作
不過，隱性手勢中可通過反饋的方式彌補列舉的不足，如果手勢的反饋可以讓人愉悅，那么這點操作負荷根本不值一提。
頁面中具體是使用顯性的點擊還是隱性的手勢還需要根據(jù)實際界面尺寸、功能優(yōu)先級、屬性以及產(chǎn)品的定位、目標人群來確定。
在有限的界面尺寸里，給予用戶無限操作可能。這是我們在設(shè)計中秉承的宗旨。
在股單安卓版的行情界面設(shè)計中，我們根據(jù)安卓的系統(tǒng)特性和用戶的系統(tǒng)認知、操作習慣對個股行情頁面進行了重新設(shè)計。
在這些手勢中具有突破性的是采用了右側(cè)邊緣滑動進行K線周期和技術(shù)指標的設(shè)置。這種操作手勢在常見的APP中使用的頻率較低，所以用戶的學習成本和認知成本相對較高。我有點想不通的是，為啥手機邊緣的頂部下滑、底部上滑、左側(cè)右滑這些手勢都快被各種APP玩壞了，右側(cè)左滑這個手勢卻很少被設(shè)計利用起來？
在股票行情的界面中，我們做過許多K線周期和技術(shù)指標設(shè)置的入口設(shè)計方案。如采用Material Design獨具特色的懸浮小球球，像其他競品一樣把設(shè)置項直接放在界面上……這些方案我們都不太滿意。我們不希望過于強調(diào)這個設(shè)置入口從而導致用戶查看分時、K線數(shù)據(jù)時的注意力受到干擾。
最終我們選擇了右側(cè)邊緣左滑的設(shè)置方案。然而在進行可用性測試時，許多用戶都不能發(fā)現(xiàn)這一個手勢操作，這讓我們感覺有點蛋疼。在產(chǎn)品上線時，我們無奈地在這個地方加了個引導提示。關(guān)于這一點，其實我是拒絕的，需要引導操作的設(shè)計不是好設(shè)計。
為了更好地培養(yǎng)用戶這個使用習慣，股單安卓版中其它設(shè)置、編輯功能也采用了這一手勢。在接下來的新功能中我也會盡可能地把這個手勢利用上去，希望各位看官在體驗過后能積極提供反饋意見。
對于設(shè)計中隱形的手勢操作，用戶操作時可能需要些學習成本、認知成本，為了給予用戶優(yōu)質(zhì)的體驗，并在操作中能不斷的發(fā)現(xiàn)一些小驚喜，我們把這些成本、風險一并承擔了。
廢話就啰嗦這么多了，若是有小伙伴想體驗這些手勢設(shè)計在產(chǎn)品中的應用，那就趕緊去下載股單折騰一番吧！
版權(quán)聲明：除轉(zhuǎn)載文章外，本站所有文章版權(quán)歸UXRen社區(qū)所有，轉(zhuǎn)載請注明出處：UXRen社區(qū)，并保留本站原文鏈接地址。本站部分文章來自互聯(lián)網(wǎng)及公開渠道，如有侵權(quán)請及時聯(lián)系我們。郵箱：contact@13tech.com.cn
