不只是按鈕:擁抱手勢驅動交互
增哥點評:交互設計的原則繁雜不堪,需要仔細的梳理并分類。我們生活中會有很多交互設計相關的問題,勤于思考和總結,才能使我們在設計道路上走的更遠。
作為一位移動端的UI或UX設計師,你可能還記得蘋果發布第一部iPhone的情景,它就像發生在昨天那樣。除了別的一些原因,它把完全以觸屏為中心的交互放在最私密的個人設備上。它改變了所有的游戲規則。
現今,觸屏體驗伴隨著孩子們的成長,就像是一件很自然的事。家長們都很驚訝于,他們的孩子這么快就懂得去使用平板和智能手機。這表示觸摸和手勢交互很有潛力使手機體驗變得更好,讓使用過程變得更有趣。
挑戰按鈕和工具條
“人機交互指南”和蘋果軟件審查委員會(Apple’s App Review Board)對手機軟件的質量有很大影響。它幫助很多設計師和開發者理解手機UI的元素和交互的的核心。例如,蘋果最受歡迎的建議就是使用UITabBar和UINavigationBar部件——這是所有人,包括我都會遵守的指南。
事實上,如果你說你設計的第一個iPhone軟件沒有任何頂部或底部工具條,聯系并發一幅截圖給我,我會請你喝一杯東西并且發一條twitter,你已經超越你所在的時代。
頂部和底部工具條占據屏幕近20%的位置。設計一個小畫布的時候,我們應該把每一個可用的像素都用在內容上。這才是問題的關鍵。
在創意產業中,移動端設計師應該花一點時間去探索怎么設計更創新,更獨創的界面。由于“跳出思維”的軟件受到蘋果無情地拒絕,帶有實驗性UI或UX設計的軟件(如,Clear和Rise)花了很長的一段時間才能與大家見面。不過它們還是出新了!它們可能太極端,以及專注于那些高端用戶和適應能力強的用戶,它們讓我們看到手勢驅動交互的可能性。
下拉刷新是一個直覺的行為
手勢驅動交互的力量
在過去的兩年中,我探索過很多讓手勢增加手機軟件體驗的方法。其中最重要的一條準則就是這些交互都是直覺而為。這就是為什么創造性的交互,譬如Loren Brichter’s “下拉刷新” 很快就成為一個標準。Brichter的交互(包括Tweetie for iPhone)是那么的直覺,以至于一時間無數的列表軟件都基于原有外觀使用這一手勢。
清理混亂的UI
把你的主屏幕變成主要內容的窗口是開始設計一個更加手勢驅動界面的好方法。你的責任并不是讓導航永遠顯示在主屏幕。你更應該考慮給導航一個屬于自己的位置。說到偽2-D或3-D環境,你可以把導航放到主界面的旁邊,下面,后面,前面,上面或者把它浮動隱藏在表面。拖動或滑動的手勢是一個引導用戶去這個UI元素的好方法。最后怎么定義和設計軟件,這取決你。
例如,我喜歡IOS上的Facebook和Gmail,它們有一個“側邊滑動”的菜單。這個流行的UI概念是非常容易使用。用戶把界面向右滑動,顯示導航。這不僅把軟件變得更關注內容,還通過2、3步的交互,把用戶帶到軟件的任何一個地方。很多軟件遠做不到這一點!
Facebook和Gmail的側邊滑動菜單
此外,通過這樣的導航,你的軟件還可以提供情景互動。把相同2、3個按鈕放在每個內容模塊的下方會是UI變得混亂!按鈕似乎變成一個有用的觸發器,但手勢有更大的潛能去使帶內容的交互變得直覺和有趣。不要猶豫,去整合簡單的手勢(如:點擊、雙擊、點擊并拖動)來觸發重要的交互。Instagram提供簡單地雙擊來執行重要的功能,喜歡和取消喜歡某個內容。(-。-似乎不能取消喜歡。。。)我覺得很快其他軟件就會整合這樣的快捷操作。
自適應的界面
當設計一個革新的手機產品時,預測用戶行為是非常困難的。制作Belgium’s Public Radio時,我團隊努力保持音樂可視化和實時新聞之間的平衡。數量巨大的情景和偏好讓它很難變成完美UI。所以我們決定整合一個拖曳手勢讓用戶可以自己調節這個平衡。
通過拖曳,用戶可以調節 與音樂相關的內容和實時新聞 之間的比例
這個手勢為這個應用增加了創新的關聯性維度。拖曳手勢并不會把用戶從一個界面(音樂或新聞)帶到另一個。相反,它讓用戶可以關注感興趣的一類型內容而不會忽略其他內容。
根據時間,維度和動畫來考慮
什么動作應該在用戶點擊是觸發?你又是怎么知道它已經觸發?UI動畫在界面上應該有多快?5秒鐘沒有任何交互以后是不是應該自動消失?
觸屏和手勢驅動的設備增加,戲劇性地改變我們設計交互的方式。我們更多地思考時間、維度和動畫方面而不是屏幕和頁面。你可能已經注意到,很難用靜態線框圖微調交互和展示它們給同事、顧客。你不能完整看到、理解和感受你觸摸、等待、拖曳和滑動它們是會發生什么。
某些原型工具(如:Pop和Invision可以賦予線框圖活力。它們在測試應用的運動和標示出什么時候用戶會在哪些地方卡住都起到很大幫助。你的應用可以比簡單的前進后退導航做得更多,你可以盡可能地察覺到更多的界面bugs和潛在的混亂。難道你不希望你的開發團隊指出它們嗎?
Invision可以讓你導入和鏈接你的電子線框圖
要變得更革新和實驗性,首先你應該告訴客戶,傳統的線框圖不是他們要的可交付UX。展示可交互線框圖的好處,鼓動他們加入到這個過程中。這可能增加時間和預算,但這并不是一個問題,如果他們期待你走得更遠。
我甚至提供一個概念界面的視頻給客戶,因為他們參與交互線框圖的制作和整理細節。我的客戶需要一些性感的東西去取悅他們的股東。
學習曲線
當你設計基于手勢的交互,要知道每次你清理混亂的UI,應用學習曲線將會上升。沒有可視提示的話,用戶會困惑于怎么與這個應用進行交互。一點點探索不是問題,但是用戶要知道怎么去開始。很多軟件會在首次使用時展示UI演示。我同意Max Rudberg的觀點——演示應該只解釋一些重要的交互。不要嘗試一次性解釋所有事。如果演示太長太復雜的會,他們會跳過它。
為什么不挑戰自我,逐步介紹這些有創意的UI提示,就像用戶正在使用他們?這個模式通常會進階展開,信息提示只會在用戶做出相關的動作時出現。例如,YouTube’s Capture會告訴用戶橫向旋轉設備,就像是他們打開相機那樣。
通過UI演示和/或可視化提示來對抗學習曲線
為UI增加可視化線索不是唯一的選擇。在Sparrow中,搜索欄出現幾秒鐘然后上移出屏幕,一個很精巧的方式告訴大家,它在等著被拉下來。
停止吹水,開始制作
iPhone引來一場關于交互的革命。只需5年,觸屏設備就會包圍我們,然后交互設計師從新定義人們怎么使用電子設備。
我們需要探索和理解觸摸、手勢交互的潛力,然后開始基于時間、維度和動畫的思考。經過一些革新的軟件演示之后,手勢能夠讓一個軟件更專注內容、更原創和更趣味。很多以前看來實驗性的手勢交互將變得更直覺。
縱觀手勢在移動平臺上的機遇,證實Luke Wroblewski’s “Touch Gesture Reference Overview”。我希望你受到鼓舞去探索基于手勢交互和加強你在手機界面的探索。不要害怕走遠了。通過交互線框圖,你可以迭代你的方法直到最好的體驗。所以,讓我們停止吹水,開始制作吧。
作者:lyzhie 轉載自:簡書
側邊下滑,國內已經好多應用都有了。
是滴,比如QQ[/奮斗]
好像已經上了