超越按鈕 - 談手勢驅(qū)動(dòng)的移動(dòng)界面設(shè)計(jì)

2015-10-12    分類： 網(wǎng)站建設(shè)

作為設(shè)計(jì)師，你也許還記得蘋果剛剛發(fā)布iPhone時(shí)的情景吧，我(英文原文作者)覺得那就像是昨天發(fā)生的事情一樣。他們將電容觸屏技術(shù)完整的運(yùn)用到了這樣一個(gè)私人化的重要設(shè)備當(dāng)中，這是具有里程碑意義的時(shí)刻，同時(shí)也改變了整個(gè)業(yè)界的游戲規(guī)則。
若干年之后的今天，連小孩子們都已經(jīng)習(xí)慣了觸屏體驗(yàn)，好像這是非常自然的事情，而家長們也會(huì)驚嘆于他們的孩子可以如此迅速的學(xué)會(huì)使用觸屏設(shè)備，包括手機(jī)和平板。這也體現(xiàn)出觸屏設(shè)備及基于手勢的交互模式所具有的巨大潛力，它們讓移動(dòng)體驗(yàn)變的更加容易和有趣。
挑戰(zhàn)導(dǎo)航欄、標(biāo)簽欄、工具欄與按鈕
蘋果的“人機(jī)界面設(shè)計(jì)規(guī)范(HIG)”及嚴(yán)格的審查機(jī)制對(duì)于移動(dòng)應(yīng)用質(zhì)量的提升起到了巨大的推動(dòng)作用，使很多的設(shè)計(jì)師與開發(fā)者了解了移動(dòng)UI體系中的核心界面元素及交互模式的運(yùn)用方式。
蘋果在HIG中給出了很多重要的、被廣泛遵循的設(shè)計(jì)建議，例如對(duì)于UITabBar和UINavigationBar這類導(dǎo)航控件的使用規(guī)范等等，都是我們一直以來所追隨的。實(shí)際上，如果你所設(shè)計(jì)的第一款iPhone應(yīng)用當(dāng)中不包含任何頂部導(dǎo)航欄或底部標(biāo)簽欄、工具欄，那么截圖發(fā)給我，我會(huì)請(qǐng)你喝啤酒(英文原文作者請(qǐng)客，不是我；想一起喝喝啤酒的兄弟姐妹們，咱們私聊 - 譯者C7210)。
一上一下兩個(gè)欄位的高度加起來差不多就是整個(gè)屏幕高度的20%了，在我看來這確實(shí)是個(gè)問題。對(duì)于屏幕規(guī)格如此有限的設(shè)備來說，界面中的任何一個(gè)像素都要用在重要的功能與內(nèi)容上，寸土寸金的說法再合適不過了。
在這個(gè)不該缺乏創(chuàng)新精神的行業(yè)中，設(shè)計(jì)師們需要花些時(shí)間來思考和探索，試著設(shè)計(jì)出更具創(chuàng)意同時(shí)又更好用的界面。根據(jù)蘋果一直以來對(duì)于“不遵守游戲規(guī)則者”的態(tài)度，我們也可以想象例如Clear和Rise這樣的應(yīng)用在上架之前會(huì)浪費(fèi)不少的時(shí)間用于等待。不過還好，它們最終還是上架了；雖然這兩款應(yīng)用代表了那類在設(shè)計(jì)風(fēng)格的突破上走的比較大膽和極端的產(chǎn)品，面向的用戶并不真正大眾，但不可否認(rèn)的是，我們確實(shí)在它們當(dāng)中看到了手勢驅(qū)動(dòng)的界面設(shè)計(jì)所蘊(yùn)藏的創(chuàng)意潛力。
圖片24
打造手勢驅(qū)動(dòng)的界面
最近的兩年多時(shí)間里，我一直對(duì)手勢操作對(duì)移動(dòng)體驗(yàn)的提升方式保持關(guān)注，其間大的體會(huì)就是，多數(shù)基于手勢的交互模式都非常符合直覺。我想，這也正是例如“下拉刷新”這樣的操作可以迅速流行和普及的最重要的原因。下拉刷新的方式最早出現(xiàn)于iPhone的Tweetie應(yīng)用當(dāng)中，給人的感覺超棒，以至于無數(shù)基于列表視圖的應(yīng)用在一夜之間都開始效仿。

要打造手勢驅(qū)動(dòng)的界面，你可以首先試著使應(yīng)用主界面本身成為主要內(nèi)容視圖，而非傳統(tǒng)意義上的內(nèi)容入口。無需強(qiáng)迫自己接受“主界面必須始終呈現(xiàn)重要導(dǎo)航結(jié)構(gòu)”的思路，導(dǎo)航本身完全可以擁有屬于自己的獨(dú)立容器。
將視野放大，想象出當(dāng)前界面所處的2D或3D大環(huán)境，然后考慮獨(dú)立的導(dǎo)航容器可以被放置在這個(gè)環(huán)境空間中的什么位置上——與主界面左右或上下相鄰？還是在主界面的“前面”或“后面”？通常，一個(gè)簡單的拖拽或橫掃的手勢就可以讓這樣的導(dǎo)航容器呈現(xiàn)出來。不管怎樣，這些都可以由你根據(jù)實(shí)際的產(chǎn)品情況來設(shè)計(jì)和定義。(推薦閱讀：iOS用戶體驗(yàn)解析)
舉個(gè)例子，我很喜歡Facebook與Gmail應(yīng)用當(dāng)中的側(cè)滑菜單，非常好用。平時(shí)這些菜單是隱藏的，你在界面上向右滑動(dòng)就可以使其向右延展開來；這種模式不僅使界面在普通狀態(tài)時(shí)更干凈，內(nèi)容展示空間更大，而且要訪問菜單時(shí)也只需通過很簡單的手勢操作便可實(shí)現(xiàn)，滑動(dòng)手勢本身也無需精確定位在屏幕上的某個(gè)位置。
圖片25
除了導(dǎo)航以外，你也可以通過這種思路呈現(xiàn)那些與當(dāng)前內(nèi)容相關(guān)的上下文功能。顯然，在每個(gè)內(nèi)容條目中都塞進(jìn)兩三個(gè)按鈕是非常討厭的事；按鈕看上去固然是很明確的可點(diǎn)擊元素，但手勢在交互效率和趣味性方面則更勝一籌，你完全可以考慮通過簡單的點(diǎn)擊、雙擊或長按來呈現(xiàn)更多針對(duì)當(dāng)前內(nèi)容的功能。例如在Instagram中，用戶可以通過雙擊來完成“贊”或“取消贊”的操作。
一個(gè)界面適用于多個(gè)情境
在設(shè)計(jì)一款非常具有創(chuàng)新色彩的移動(dòng)應(yīng)用時(shí)，很難準(zhǔn)確的事先預(yù)測用戶的行為。與比利時(shí)廣播電臺(tái)合作期間，我們的團(tuán)隊(duì)在可視化音樂播放與即時(shí)新聞呈現(xiàn)之間的界面平衡性方面著實(shí)糾結(jié)了很久，因?yàn)橛刑嗟纳舷挛那榫臣皡?shù)需要考慮，所以很難達(dá)成一個(gè)在各方面都很好的設(shè)計(jì)方案。于是我們決定，允許用戶通過一些簡單的手勢操作來根據(jù)自己的需要自由調(diào)整界面的平衡。
圖片26
這種方式為應(yīng)用增加了一個(gè)具有創(chuàng)意色彩的“情境維度”，拖拽手勢的運(yùn)用使音樂與新聞并沒有成為互不相關(guān)的獨(dú)立區(qū)域，用戶可以隨時(shí)根據(jù)自己關(guān)注點(diǎn)的變化在兩者之間進(jìn)行調(diào)整，并且不會(huì)使任何一類內(nèi)容完全脫離上下文環(huán)境。
時(shí)間、維度與動(dòng)畫效果
用戶點(diǎn)擊一個(gè)交互對(duì)象時(shí)會(huì)觸發(fā)哪些行為的產(chǎn)生？你怎樣使這些行為變的可視化？一個(gè)界面元素從無到有的呈現(xiàn)到視圖當(dāng)中需要花多長時(shí)間？超過幾秒鐘沒有接收到來自用戶的交互行為時(shí)，某些元素是否需要自動(dòng)隱藏？
基于觸屏及手勢操作的設(shè)備改變了我們的交互設(shè)計(jì)理念，與過去只關(guān)注顯示器分辨率規(guī)格和頁面呈現(xiàn)方式的設(shè)計(jì)習(xí)慣有所不同，如今我們需要更多的考慮時(shí)間、維度和動(dòng)效等方面的問題。你也許已經(jīng)發(fā)現(xiàn)了，通過靜態(tài)線框圖就可以好展示產(chǎn)品交互模式的時(shí)代已經(jīng)一去不返了；缺少觸摸、長按、拖拽和滑動(dòng)手勢的介入，你很難向他人完整的呈現(xiàn)設(shè)計(jì)方案在視覺及交互層面的表現(xiàn)。
例如Pop和Invision這樣的原型工具可以幫助我們?yōu)榫€框圖賦予生命，使我們能夠更好的通過交互原型來測試流程，精確定位用戶可能遇到操作問題的環(huán)節(jié)。移動(dòng)應(yīng)用絕不只是來來回回導(dǎo)航瀏覽那么簡單，你需要盡早發(fā)現(xiàn)各種bug，還有會(huì)使用戶產(chǎn)生疑惑的潛在問題；此外，你也不想讓那些程序員首先發(fā)現(xiàn)并為你指出這些問題，對(duì)叭？
圖片27
為了讓自己的設(shè)計(jì)工作更具創(chuàng)新色彩，甚至是實(shí)驗(yàn)性，你要盡可能與客戶或需求方就交付物的問題進(jìn)行交流溝通，讓他們知道傳統(tǒng)的靜態(tài)線框圖不再是他們真正需要的了。盡量展示可交互原型的價(jià)值，逐漸將這種形式轉(zhuǎn)變?yōu)橐环N標(biāo)準(zhǔn)。這固然會(huì)多花些時(shí)間，甚至導(dǎo)致預(yù)算方面的問題，但要打造出色的產(chǎn)品，這些還是劃算的。
我有時(shí)甚至?xí)橐恍╉?xiàng)目制作概念視頻，展示界面設(shè)計(jì)方向及交互模式；在某些時(shí)候，這種更酷的方式確實(shí)可以幫你爭取到更多的利益。
用戶的學(xué)習(xí)成本
在設(shè)計(jì)由手勢驅(qū)動(dòng)的交互模式時(shí)，要記得一點(diǎn)：你每移除掉一個(gè)顯性的界面元素，用戶的學(xué)習(xí)成本就會(huì)上升一點(diǎn)。失去了視覺指引，用戶很有可能不知道怎樣與界面進(jìn)行交互。有時(shí)你可以通過一些說明文字進(jìn)行彌補(bǔ)，但最重要的是，要確保用戶在初次使用時(shí)能夠順利的上手。
很多應(yīng)用會(huì)在初次加載時(shí)提供新手指南，對(duì)界面進(jìn)行必要的說明。不過我個(gè)人比較贊同Max Rudberg的態(tài)度，即只對(duì)那些最重要的交互操作進(jìn)行說明，而且不要一次解釋太多東西，因?yàn)槿绻@些內(nèi)容太長太零散，用戶很容易選擇跳過。
為什么不在用戶實(shí)際使用的過程中逐步解釋UI元素的作用呢？這種模式通常被叫做漸進(jìn)呈現(xiàn)，也就是在具體行為過程中動(dòng)態(tài)的提供與當(dāng)前狀態(tài)最具關(guān)聯(lián)性的信息。以YouTube的Capture應(yīng)用為例，他們只會(huì)在用戶第一次使用拍攝功能時(shí)提示用戶通過調(diào)轉(zhuǎn)設(shè)備方向來開始操作。
圖片28
為UI元素添加解釋說明也不是唯一的引導(dǎo)方式。在Sparrow中，搜索欄會(huì)默認(rèn)呈現(xiàn)幾秒鐘，然后自動(dòng)向上移出視圖。這就相當(dāng)于告訴用戶可以通過下拉界面的方式找到搜索欄，它只是在你用不著的時(shí)候藏起來了而已。
開始行動(dòng)吧
iOS設(shè)備曾經(jīng)引領(lǐng)了一場人機(jī)交互的變革，僅僅5年之后，觸屏移動(dòng)設(shè)備就已經(jīng)普及到我們身邊的各處了，而作為UX設(shè)計(jì)師，我們又將一點(diǎn)點(diǎn)的重新定義人們使用數(shù)字內(nèi)容的方式。
我們需要探索和理解觸屏設(shè)備及手勢操作的潛力，更多的關(guān)注時(shí)間、交互空間維度和動(dòng)畫過渡效果。正像很多優(yōu)秀應(yīng)用產(chǎn)品所呈現(xiàn)出的，手勢操作可以使產(chǎn)品體驗(yàn)更聚焦于內(nèi)容本身，并帶來更多樂趣。有些手勢在剛剛投入到實(shí)際運(yùn)用當(dāng)中時(shí)顯得非常具有實(shí)驗(yàn)性，甚至有些極端，但時(shí)間證明了它們是可以帶來上乘體驗(yàn)的交互模式。
要更全面的了解各種手勢在更多平臺(tái)設(shè)備中的運(yùn)用方式，可以看看Luke Wroblewski的“Touch Gesture Reference Overview”一文，希望你能在里面找到一些靈感并在自己的產(chǎn)品中有所實(shí)踐。另外記得，在條件允許的時(shí)候，不要害怕去走那額外的一英里，充分利用交互原型來挖掘和展示自己的設(shè)計(jì)方案。那么，讓我們開始行動(dòng)吧！

網(wǎng)頁名稱：超越按鈕 - 談手勢驅(qū)動(dòng)的移動(dòng)界面設(shè)計(jì)
當(dāng)前URL：http://www.bm7419.com/news4/33004.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化、企業(yè)建站、云服務(wù)器、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)