作者： 股單小分隊 @ 國信證券的產(chǎn)品設(shè)計中心
一局待、交互設(shè)計的那些事
許多朋友問我：你大學(xué)學(xué)的專業(yè)不是工業(yè)設(shè)計嗎？都是做產(chǎn)品造型的呀吗讶，現(xiàn)在怎么跑去證券公司做交互了燎猛？
相信許多做交互設(shè)計的朋友和都會遇到這樣的問題恋捆。
我覺得做一個APP的交互設(shè)計也是做一個藝術(shù)品照皆，在工業(yè)設(shè)計的各種工藝中我最喜歡的就是陶藝了。我把交互設(shè)計比喻成在做一件陶藝沸停，它需要理性的數(shù)據(jù)分析膜毁，如陶藝的長寬高、燒制時火候的把握愤钾、陶泥的化學(xué)成分等瘟滨，同時也需要注入感性的元素，如造型細微的變化能颁、釉彩的繪制等杂瘸。
從事交互設(shè)計這一職業(yè)兩年多了，總會有一些關(guān)于設(shè)計上的思考伙菊，以最近在做的股單APP項目為例與各位交流探討一下败玉。
先做一個簡單的介紹，股單APP是國信證券全新推出的青春級炒股官方應(yīng)用镜硕，設(shè)計上旨在減少冗余的視覺修飾,將用戶的注意力聚焦在內(nèi)容运翼、數(shù)據(jù)和交互本身上 ，做一款懂用戶的APP兴枯。
iOS血淌、安卓兩個平臺的設(shè)計都不一樣，根據(jù)各平臺的特性财剖、設(shè)計規(guī)范等做出兩款相互競爭的APP悠夯。
二癌淮、導(dǎo)航篇
2.1 tab導(dǎo)航
底部tab導(dǎo)航與頂部tab導(dǎo)航是較為常用的導(dǎo)航方式。
iOS許多應(yīng)用都是采用這種導(dǎo)航疗疟，如股單的自選股界面采用上下tab導(dǎo)航方式
這也是iOS原生的規(guī)則该默，在iOS中許多原生系統(tǒng)也采用了這種方式如電話、App Store策彤、音樂等栓袖。
在iOS上，tab通過點擊切換店诗，不能滑動切換裹刮。因為iOS系統(tǒng)把頁面滑動給了單條信息的滑動操作，或者是頁面返回操作庞瘸。
不過在許多應(yīng)用里也并沒有遵守這一原則捧弃，iOS頂部的tab欄依然可以通過滑動切換tab，使得界面中的手勢十分的混亂擦囊。
想想也不怪設(shè)計師使用這種“混合”設(shè)計违霞，在APP內(nèi)容很多的時候，確實需要通過頂部tab分組瞬场，把所有內(nèi)容塞進去买鸽，而如果在頂部tab只能通過點擊來切換tab的話無疑是增加了用戶的操作難度，尤其是有十幾個頂部tab的應(yīng)用（呵呵贯被，心疼他們的交互設(shè)計師）眼五。
在安卓上，tab既可以點擊切換也可以滑動切換彤灶。在安卓原生中看幼，是較少使用底部tab導(dǎo)航的，多數(shù)采用抽屜式導(dǎo)航幌陕。我認為滑動切換頂部tab欄這一手勢安卓是優(yōu)于iOS的（不過現(xiàn)在已在iOS中混用了）诵姜，許多研究表明頂部tab的操作位置是用戶較難點擊到的地方，滑動切換tab這一手勢是提供用戶便捷的搏熄。股單安卓版中界面中也有多處使用滑動切換tab的交互方式棚唆。
現(xiàn)在市面上許多APP，也并沒有太用心的去區(qū)分iOS與安卓的交互設(shè)計的區(qū)別搬卒，基本上都是先做iOS版的設(shè)計然后在適配到安卓上瑟俭，兩個平臺上的交互方式都是混用的。所以我從iOS與安卓的維度分析頂部tab交互的差異化有可能都是廢話契邀。
2.2 抽屜式導(dǎo)航
抽屜式導(dǎo)航是Google應(yīng)用程序中一種常見的模式摆寄，也可以說是安卓APP的一大特色。在Material Design中，也做了詳細的說明微饥。
安卓中許多優(yōu)秀的應(yīng)用采用的都是這種抽屜式導(dǎo)航如下：
在選擇采用哪種導(dǎo)航方式作為APP的主導(dǎo)航方式逗扒，我們團隊糾結(jié)了許久（那段時間，頭發(fā)嗷嗷的掉）欠橘。
若選擇抽屜式導(dǎo)航矩肩，我們將需要思考分析所有功能的優(yōu)先級和使用場景，用戶的操作習(xí)慣等肃续。如今在國內(nèi)的APP中無論是安卓版還是iOS版黍檩，大多數(shù)采用的是底部tab導(dǎo)航的架構(gòu)，這也培養(yǎng)了大量用戶的操作習(xí)慣始锚。
為了使APP更加的安卓刽酱，我們思考再三，決定遵循Material Design選擇漢堡菜單瞧捌。這無疑是一個大挑戰(zhàn)棵里。（真作啊，直接使用iOS版本一樣的不就得了～哎姐呐，誰叫我們是一群有夢想的年輕人呢殿怜，呵呵）
既然選擇了抽屜式導(dǎo)航，那么就需要承擔(dān)風(fēng)險：
認知成本
用戶看到的界面比較專一曙砂，其他類目部分的內(nèi)容不可見头谜，就比如你打開安卓版股單APP時看到的只是單純干凈的自選股列表，你可能不知道抽屜導(dǎo)航里還隱藏著交易麦轰、游戲等更多有意思的功能乔夯。這往往就需要用戶去猜測砖织、探索款侵，假如APP的第一印象激發(fā)不了用戶繼續(xù)探索的欲望，那么抽屜式導(dǎo)航的流失率將比底部式導(dǎo)航要高侧纯。
操作成本
用戶切換類目時需要先側(cè)滑出導(dǎo)航界面然后才能選擇要切換的功能新锈，不及底部式導(dǎo)航可以直接切換，抽屜式導(dǎo)航在類目之間的切換成本相對較高眶熬。
每次想到這些高風(fēng)險操作妹笆，我都心驚膽戰(zhàn)啊，好擔(dān)心因為這個導(dǎo)航方式使得APP掛掉了（好怕怕）娜氏。
不過我們選擇抽屜式導(dǎo)航肯定也是看到了它的獨特之處的拳缠，拋開這些成本來說，它也具備著多處優(yōu)點如：
可以容納多個分支類目贸弥，抽屜式導(dǎo)航多少內(nèi)容都能裝的下
隱藏多余的類目窟坐，使當(dāng)前頁面簡潔，不會受到導(dǎo)航的干擾
通過手勢喚出導(dǎo)航，在任何界面都可以進行導(dǎo)航哲鸳，退出時不需要tab導(dǎo)航那樣需要一層層退出臣疑。
在使用底部tab導(dǎo)航框架的APP，當(dāng)APP的內(nèi)容層級較多的時候徙菠，用戶進入最深層級后想要退出到首頁是比較麻煩的讯沈，需要多次進行返回。較快捷大方法就是關(guān)閉app的后臺婿奔，重新進入缺狠。而抽屜式導(dǎo)航則可以解決這個問題。
嗯萍摊，這樣想想抽屜式導(dǎo)航也還是很不錯滴Ｈ謇稀！
在整個設(shè)計過程中通過對Material Design的研究學(xué)習(xí)记餐，親身體會到Material Design的設(shè)計語言相比較于HIG體系化特征要明顯很多驮樊，對于一個設(shè)計師（團隊）的成長有很大的幫助。在接下來的設(shè)計中我們也將會在繼續(xù)遵循Material Design的設(shè)計規(guī)范片酝，做出更佳的用戶體驗囚衔，爭取讓用戶欲罷不能，來了就是股單人雕沿。
三练湿、手勢篇
在有限的界面尺寸里，給予用戶無限操作可能
股票中行情內(nèi)容是最多的审轮，其內(nèi)容展現(xiàn)的難度系數(shù)相當(dāng)大肥哎，所以它的交互設(shè)計也十分棘手。
在一個界面中疾渣，僅通過點擊方式無法承載股票行情的諸多功能點篡诽。要想界面簡潔、突出重點就必須把相對次要的功能隱藏起來榴捡。在行情界面設(shè)計過程中遇到的主要問題是哪些東西該顯示杈女，哪些東西隱藏，隱藏后如何讓用戶發(fā)現(xiàn)吊圾，怎樣的顯示方式更容易被用戶接受等等达椰。
參考一下股單iOS版中行情界面的手勢覆蓋情況：
除了以上列舉的手勢，再加上被用戶所認知的下拉刷新项乒、上滑調(diào)出控制中心啰劲，在這個界面中竟然覆蓋了十余種手勢操作方式，算起來還是挺驚人的檀何。
在優(yōu)化行情界面設(shè)計前蝇裤，團隊對用戶在行情界面的使用場景進行了優(yōu)先級排序趁尼，綜合考慮了手勢的認知成本以及手勢操作的難易程度，最后確定了手勢與功能的匹配方案猖辫。
但當(dāng)我把既定的方案落實到具體的界面交互時酥泞，我開始陷入了深深的疑慮中，一個具有“哲學(xué)”性質(zhì)的問題始終在困擾著我：顯性的點擊操作與隱性的手勢操作分析啃憎。
舉個例子：iOS與安卓的返回操作
IOS：
顯性——左上角返回按鈕
手勢——左側(cè)邊緣滑動返回
安卓：
顯性——左上角返回按鈕芝囤，底部虛返回鍵
手勢——無
分析：
共性，返回鍵是一個界面中最基本的操作辛萍，大概是為了降低用戶產(chǎn)生誤觸的概率悯姊，iOS與安卓都把它安排在一個較為明顯卻不太容易操作的左上角位置。
差異贩毕，iOS和安卓除了左上角的返回按鈕悯许，還有其他具備各自系統(tǒng)特色的返回操作。iOS采用了左側(cè)邊緣滑動返回的手勢操作辉阶；而安卓則是底部的顯性返回按鈕操作先壕。結(jié)合《導(dǎo)航篇》的設(shè)計分析，安卓左側(cè)邊緣滑動喚出抽屜導(dǎo)航谆甜，與左側(cè)邊緣滑動返回的手勢產(chǎn)生沖突垃僚，故此沒有采用該種滑動返回的操作方式。
國內(nèi)很多安卓手機廠商的返回按鈕設(shè)置存在差異规辱，有的設(shè)在左邊谆棺，有的設(shè)在右邊，返回按鈕設(shè)在中間的比較少見罕袋。我好奇的是改淑，國內(nèi)某些手機廠商要抄襲蘋果的設(shè)計，何不刪減底部返回按鈕浴讯，加裝左側(cè)滑動返回手勢的操作朵夏？
（當(dāng)然，安卓平臺也有很多APP是支持左側(cè)邊緣滑動返回的兰珍。例如微信侍郭，左側(cè)邊緣滑動返回上一級询吴，滑動切換底部tab欄掠河。安卓版的微信也是十分任性，在一個二級界面里就有三個可以進行返回的操作猛计，不知微信團隊是沒有考慮清楚還是故意而為之唠摹，呵呵噠！）
顯性的點擊操作與隱性手勢優(yōu)缺對比：
優(yōu)點缺點
顯性點擊1.所見即所得
2.學(xué)習(xí)成本奉瘤、認知成本較低
3.可控感強1.頁面功能容易臃腫
2.交互方式單一
3.缺乏趣味性
隱性手勢1.頁面簡潔
2.交互方式豐富
3.可創(chuàng)造性強1.學(xué)習(xí)成本勾拉、認知成本較高
2.不可控感
3.容易誤操作
不過煮甥，隱性手勢中可通過反饋的方式彌補列舉的不足，如果手勢的反饋可以讓人愉悅藕赞，那么這點操作負荷根本不值一提成肘。
頁面中具體是使用顯性的點擊還是隱性的手勢還需要根據(jù)實際界面尺寸、功能優(yōu)先級斧蜕、屬性以及產(chǎn)品的定位双霍、目標(biāo)人群來確定。
在有限的界面尺寸里批销，給予用戶無限操作可能洒闸。這是我們在設(shè)計中秉承的宗旨。
在股單安卓版的行情界面設(shè)計中均芽，我們根據(jù)安卓的系統(tǒng)特性和用戶的系統(tǒng)認知丘逸、操作習(xí)慣對個股行情頁面進行了重新設(shè)計。
在這些手勢中具有突破性的是采用了右側(cè)邊緣滑動進行K線周期和技術(shù)指標(biāo)的設(shè)置掀宋。這種操作手勢在常見的APP中使用的頻率較低深纲，所以用戶的學(xué)習(xí)成本和認知成本相對較高。我有點想不通的是劲妙，為啥手機邊緣的頂部下滑囤萤、底部上滑、左側(cè)右滑這些手勢都快被各種APP玩壞了是趴，右側(cè)左滑這個手勢卻很少被設(shè)計利用起來涛舍？
在股票行情的界面中，我們做過許多K線周期和技術(shù)指標(biāo)設(shè)置的入口設(shè)計方案唆途。如采用Material Design獨具特色的懸浮小球球富雅，像其他競品一樣把設(shè)置項直接放在界面上……這些方案我們都不太滿意。我們不希望過于強調(diào)這個設(shè)置入口從而導(dǎo)致用戶查看分時肛搬、K線數(shù)據(jù)時的注意力受到干擾没佑。
最終我們選擇了右側(cè)邊緣左滑的設(shè)置方案。然而在進行可用性測試時温赔，許多用戶都不能發(fā)現(xiàn)這一個手勢操作蛤奢，這讓我們感覺有點蛋疼。在產(chǎn)品上線時陶贼，我們無奈地在這個地方加了個引導(dǎo)提示啤贩。關(guān)于這一點，其實我是拒絕的拜秧，需要引導(dǎo)操作的設(shè)計不是好設(shè)計痹屹。
為了更好地培養(yǎng)用戶這個使用習(xí)慣，股單安卓版中其它設(shè)置枉氮、編輯功能也采用了這一手勢志衍。在接下來的新功能中我也會盡可能地把這個手勢利用上去暖庄，希望各位看官在體驗過后能積極提供反饋意見。
對于設(shè)計中隱形的手勢操作楼肪，用戶操作時可能需要些學(xué)習(xí)成本培廓、認知成本，為了給予用戶優(yōu)質(zhì)的體驗春叫，并在操作中能不斷的發(fā)現(xiàn)一些小驚喜医舆，我們把這些成本、風(fēng)險一并承擔(dān)了象缀。
廢話就啰嗦這么多了蔬将，若是有小伙伴想體驗這些手勢設(shè)計在產(chǎn)品中的應(yīng)用，那就趕緊去下載股單折騰一番吧央星！
版權(quán)聲明：除轉(zhuǎn)載文章外霞怀，本站所有文章版權(quán)歸UXRen社區(qū)所有，轉(zhuǎn)載請注明出處：UXRen社區(qū)莉给，并保留本站原文鏈接地址毙石。本站部分文章來自互聯(lián)網(wǎng)及公開渠道，如有侵權(quán)請及時聯(lián)系我們颓遏。郵箱：contact@13tech.com.cn
