iOS的隱性導航設計

來源:互聯網
上載者:User

  行動裝置閱讀類軟體最重要的特性之一就是儘可能的增大閱讀面積,為此,就必須儘可能的讓螢幕中的導航佔到最小,甚至隱藏,手機瀏覽器也基本屬於閱讀類軟體,最近流行的海豚瀏覽器甚至將電腦中的“滑鼠手勢”引入到手機瀏覽器中。

  什麼是隱性導航

  下圖是iOS中read it later軟體的閱讀介面,除了最上方的狀態列,閱讀地區佔滿了整個螢幕,沒有任何諸如“返回”、“關閉”的導覽按鈕,實際這些按鈕是隱藏著的,我把這種隱藏看不到的導航稱之為“隱性導航”。

  read it later 閱讀介面

  常見的隱性導航

  下拉重新整理

  最流行的“隱性導航”要數“下拉重新整理”了,這個最早出現在twitter用戶端的下拉更新timeline功能迅速在此類軟體中流行,iOS下網頁版的gmail,新浪微博,甚至網易新聞,都使用了這種設計。

  網易新聞用戶端的下拉重新整理

  左右滑動

  讓人印象深刻的還有UC瀏覽器的前進後退功能,後退只要拇指向右滑動,前進只要向左滑動手指即可,不必尋找前進後退按鈕,這種設定下瀏覽器全屏也不會影響操作的流暢性。

  類似的設計有很多,在yReader下左右滑動是切換前一篇後一篇文章,在iBooks、QQ閱讀的電子書閱讀軟體左右滑動是前後翻頁。android下的QQ用戶端的當前會話、好友和群組分別是三個標籤,左右滑動可以從這三個功能區中迅速切換。

  QQ閱讀的左右翻頁

  雙擊、長按、返回頂部等

  在最上面read it later軟體中,雙擊螢幕是彈出底部操作導覽功能表;在android中長按一般會出現快顯功能表(像是windows下的右鍵菜單);在幾乎所有iOS的軟體中,點擊頂部的狀態列是快速返回頂部(這個好像是系統級的,不信你試試),還有基於螢幕不同位置的點擊呼出不同功能,其他的隱性導航設計方法還有很多,不再一一贅述。

  設計原則

  友好提示

  隱性導航是看不見的,那麼必須有教程或提示使用者如何使用這些功能,一般這種提示只出現在軟體第一次使用時。這些提示尤為重要,當使用者看著全屏的文字找不到返回時,可能就慌亂了,多次嘗試仍沒成功的話極有可能就按下home鍵,強行退出,甚至直接將軟體卸載。

  QQ閱讀的提示

  避免衝突,前後、左右,全域統一

  iOS下我見過的最漂亮的閱讀軟體是ZAKER,windows phone7的方塊式小清新介面,同時整合了新浪微博,GoogleReader的綁定,目錄影flipboard精心設計版面的雜誌,圖片多時可以像圖集一樣幻燈瀏覽所有圖片。

  它隱性導航設計中雙擊文字地區是關閉,如果不小心碰到圖片,就將這張圖片單獨開啟了,這可不是使用者想要的。如果瀏覽的是微博,到頂部後向上滑動是載入最新,瀏覽的是訂閱的rss,到頂部後再下拉就是返迴文章列表,同一軟體中相同的手勢竟然不同的結果,無疑增加了使用者記憶的成本。

  上和下是對應的,左右是對應的,如果手勢左劃是向左瀏覽,那麼毋庸置疑向右就是向右瀏覽。在騰訊愛看中,在文章列表,向左滑動是查看訂閱頻道,向右滑動是無效操作,在文章頁,向左滑動還是查看訂閱頻道,向右是查看評論。這兩者毫無關係而且反饋不同。

  在網易閱讀中到頂部是“下拉重新整理”,到底部卻是“點擊後顯示下面20條”,你就不能做成上拉後載入後面20條?我不得不說,刻意的模仿,不懂的舉一反三。說秘密軟體中同時採用了“上拉重新整理”和“下拉載入更多”。除了統一,這樣做最大的好處是保持了手的姿勢。一般手握手機是單手,拇指操作螢幕,上拉和下拉保持了原有的手指狀態,點擊操作需要拇指抬起再按下,點擊後又得回到上下滑動的狀態。

  心智模型、使用者習慣

  捲軸的目的是方便快速定位同時體現當前位置和頁面長度,reader it later中,當頁面滑動時才會出現細長的捲軸(不會遮住閱讀面積,只用來指示當前位置),當拇指指在螢幕右側捲軸的位置時,捲軸會變成下面這樣又黑又粗,方便手指滑動和定位。在PC上,使用者習慣是滑鼠滾輪(觸屏上相對於上下滑動),想快速跳轉時,就是直接滑鼠拖捲軸,那麼在手機上使用者想快速拖動的時候首先想到的必然也是拖捲軸,但在大多數手機軟體中,捲軸是不可拖動的。

  reader it later的捲軸

  降級策略

  並不是所有的軟體都適合隱性導航,軟體給使用者呈現的第一印象是導航清晰、簡潔、易用才能贏得使用者的好評,隱性導航因其隱晦、難以記憶的特點,一般適用於進階使用者,所以應提供一個可選降級策略:比如在設定加上全屏瀏覽選項,讓使用者自己選擇是否隱藏導覽列。

  文章來源:ratwu.com/2011/10/ios-daohang/

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.