當前位置:首頁 >  站長 >  網(wǎng)站運營 >  正文

移動應(yīng)用設(shè)計:談導航欄返回按鈕的替代方案

 2013-07-08 17:27  來源: beforweb   我來投稿 撤稿糾錯

  域名預訂/競價,好“米”不錯過

呼,又要夜間上新了。其實自己偶爾還會進去關(guān)于Be For Web里面看看將近兩年前寫的博客開篇語。當時的動力現(xiàn)在仍在,當時愛的那個世界現(xiàn)在仍在愛,并且越來越讓我覺得自豪;這讓我開心了些。周六晚上有在喝冰啤酒的兄弟姐妹嗎,有的話我們虛擬碰個杯吧先,周末愉快=)

前面連續(xù)做了13篇iOS7預發(fā)布版界面設(shè)計規(guī)范,這周開始重新回到正常節(jié)奏,上一些小文。今次的小話題是關(guān)于返回按鈕的;其實還少談了一種越來越普及的替代方案,也就是將返回按鈕做到底部標簽欄或是工具欄最左側(cè);當然,準確的說,這種情況下容器本身也不能再叫做標簽欄或工具欄了。那開始吧。

這里進入譯文。我(英文原文作者)愛iPhone5,那多出來的640×176像素的空間非常有用。不過我時常會在點擊那個最重要的按鈕時遇到麻煩,是的,就是返回按鈕。UX設(shè)計當中有一條規(guī)則,如果某個功能是很常用的,那么它應(yīng)該被放在最容易點擊到的位置上。

49%的移動用戶在使用手機時是單手操作的,這就意味著每兩個用戶當中就有一個會每天多次通過單手來點擊返回按鈕;算起來的話這可是數(shù)以億計的點擊率。如果手機尺寸略大,那么你將不得不使用另一只手來點擊返回按鈕。我猜這也是很多安卓手機會在左下角放置硬件返回按鈕的原因之一;不過這種解決方案也不是最優(yōu)的,因為在安卓平臺中,應(yīng)用內(nèi)的“返回上一級”按鈕與硬件返回按鈕的功能還是有所區(qū)別的。

 

通過手勢來解決問題

要解決返回按鈕的問題,最簡單的方案就是使用手勢。在用戶已經(jīng)熟悉了應(yīng)用操作方式的前提下,手勢還是很有效的。另外,將手勢操作作為可視化按鈕的一種補充形式也是不錯的做法。

 

讓我有些驚訝的是,在試用了無數(shù)個應(yīng)用之后,我發(fā)現(xiàn)市面上已經(jīng)有很多產(chǎn)品在通過這種方法解決返回按鈕的問題了。當然,沒有哪種解決方案能適用于所有的情況,但至少這是個開始。我個人真心希望設(shè)計師們能夠逐漸找到更多更有創(chuàng)意的方案。

拋甩(toss)

“拋甩”是對我們與真實物體之間互動方式的一種隱喻,使用這種模式,你可以很輕松地將當前的活動界面“甩開”。例如在Letterpress中,用戶可以通過向下快速滑動的手勢將彈出提示甩走,有點意思。

 

在Facebook里,當你全屏查看一張圖片時,可以將圖片向上或向下甩開,回到之前的界面當中。

 

橫向滑動

新界面從屏幕右側(cè)向左滑入視圖,這是iOS當中的標準動效。相應(yīng)的,我們也可以通過向相反的方向執(zhí)行輕掃來導航回之前的界面,例如你可以在Pinterest當中通過向右輕掃的手勢將大圖界面向右移走,回到之前的界面。

 

類似的,在Flipboard里,你也可以在某主題下的內(nèi)容界面中通過向右輕掃回到主界面。

 

在iBooks中,并沒有明確的視覺指引告訴你可以通過左右輕掃的手勢來打開下一頁或回到上一頁。不過除了輕掃以外,點擊屏幕的左右兩部分也能起到同樣的導航作用,這樣,由于缺乏視覺指引所導致的導航功能不可發(fā)現(xiàn)的概率就大大降低了。而且由于翻頁效果使用了強有力的隱喻,所以一旦用戶通過點擊屏幕完成了一次翻頁操作之后,很容易根據(jù)漂亮的翻頁動效來發(fā)現(xiàn)左右輕掃的導航功能。

 

縱向拖動

與橫向滑動的初衷相似,如果某些界面是從屏幕底部或頂部向上滑入視圖的,那么可以嘗試使用縱向拖動的方式來進行后退導航。Day One應(yīng)用就打造了這樣一套屬于他們自己的“下拉刷新”,使用戶可以在縱向的操作中直接進入之前或之后的一篇內(nèi)容。

 

在Clear里,你可以通過向下長拖動來回退到上一級列表,而向下短拖動則用來創(chuàng)建新的事項。

 

而Haze允許用戶通過向下拖動界面來進入設(shè)置界面;當然嚴格的講這不屬于“回退”方面的導航操作。

 

長按或雙擊如何?

長按和雙擊都是可以由拇指獨立完成的操作,所以我個人覺得它們將來有可能在回退導航上體現(xiàn)出價值。

從視覺和布局的角度解決問題

誠然,按照iOS設(shè)計規(guī)范所要求的那樣將返回按鈕放在導航欄左側(cè),看上去是最自然的。但這不能阻止我們在必要的時候完全改變返回按鈕的視覺樣式或位置;它甚至可以看上去不那么像個按鈕。

Basecamp將待辦事項內(nèi)容界面設(shè)計成半覆蓋的面板形式,用戶點擊左側(cè)未遮蓋的空間即可將面板向右收起,返回到之前的界面。

 

如果內(nèi)容類型適合,我們確實可以像Basecamp那樣將子界面處理成某種覆蓋層或面板的形式,并使用“完成(Done)”按鈕進行關(guān)閉,返回上級界面。完成按鈕可以被放置在界面右上角,相比于左上角的位置,更容易被點擊到。

 

總結(jié)

除非蘋果推出一款更纖細、邊緣更薄的手機,否則我個人還是建議設(shè)計師們能夠抱著更開放的心態(tài)來看待使用手勢執(zhí)行常規(guī)操作這件事。如果你能充分理解交互對象的運動方式以及人們對這些運動規(guī)律的認知,并將這些理解體現(xiàn)到設(shè)計當中,那么手勢會成為非常高效和符合直覺的操作方式。作為設(shè)計師,我們必須清楚人們在實際當中是怎樣使用手機的,只有這樣,才能設(shè)計出讓人們愉悅而不是感到受挫的產(chǎn)品。

本站原創(chuàng)編譯文章。如需轉(zhuǎn)載,請注明:本文來自Be For Web

英文原文:

譯者信息: c7210 - UX玩家、交互設(shè)計師、曾經(jīng)的視覺與前端、貓奴、guitar *er...現(xiàn)就職于攜程無線事業(yè)部。

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關(guān)文章

  • 推薦一款酷炫閃爍的告警按鈕

    今天小編給大家推薦一款酷炫閃爍的告警按鈕,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下

    標簽:
    告警按鈕
  • 郵件營銷提高轉(zhuǎn)化率的訣竅和按鈕設(shè)計

    當群發(fā)郵件發(fā)送過去后,公司為促成轉(zhuǎn)化,在郵件中:1、營造緊迫感:公司推出的系列產(chǎn)品讓利于消費者,比方說8.3、在產(chǎn)品介紹完后便附上下單鏈接:在某產(chǎn)品圖文并茂的介紹后面,迅速附上下單的鏈接,消費者只需輕輕點擊一下,便可進去網(wǎng)站特定欄目,下單購買,幾乎都是一鍵式操作,非常簡單。

  • CTA實例教學:怎樣設(shè)計一個訪客看了就想點的行為引導按鈕?

    CTA即CalltoAction,又叫行為引導按鈕,是一個網(wǎng)站的核心組成元素之一。大部分站長做網(wǎng)站不僅僅是為了給訪客提供一個學習、交流、互動的平臺,更重要的是將訪客轉(zhuǎn)化為用戶,達成某項他們想要的行為,比如注冊、登錄、訂閱、預約、購買等。好的行為引導按鈕在這一點上很有幫助,它有助于提高用戶的轉(zhuǎn)化率,增

    標簽:
    按鈕設(shè)計
  • 淺析在網(wǎng)頁設(shè)計中如何讓按鈕激發(fā)用戶點擊欲望

    現(xiàn)在建設(shè)網(wǎng)站一個重要的核心要素就是能夠?qū)τ脩舢a(chǎn)生良好的吸引力,能夠引導用戶逐層深入的點擊網(wǎng)站,這樣才能夠有效提升用戶在網(wǎng)站上的停留時間,這樣就能夠有效的為網(wǎng)站培養(yǎng)忠誠用戶打下堅實基礎(chǔ)。對此很多站長開始在網(wǎng)頁設(shè)計上下功夫,可是有時候?qū)τ谝恍┘毠?jié)掌握不當,或者忽略了一些細節(jié),導致網(wǎng)站的吸引力出現(xiàn)了明顯的

  • 超鏈接和按鈕 設(shè)計中默認樣式的強大威力

    默認樣式,就是最原生態(tài)的樣式。就像大家經(jīng)常用的按鈕或者藍色有下劃線的超鏈接。本文,潛行者m將從兩個元素來討論默認樣式在設(shè)計中的應(yīng)用。超鏈接的默認樣式超鏈接的默認樣式超鏈接是網(wǎng)頁中最常用最基礎(chǔ)的元素,可以說是必不可少的。我們設(shè)置超鏈接,也是希望人們

    標簽:
    按鈕設(shè)計

熱門排行

信息推薦