• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】設計教程:響應式頁面導航設計解析




    設計教程:響應式頁面導航設計解析

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    一淘UX:有人說,2013將是響應式網頁設計之年。自用戶體驗設計師Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名詞,即響應式網頁設計,這個概念從Responsive Architecture延伸到web設計領域,讓所有的交互設計、視覺、前端開發都開始投入到這個趨


    設計理論教學開始

    一淘UX:有人說,2013將是響應式網頁設計之年。自用戶體驗設計師Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名詞,即響應式網頁設計,這個概念從Responsive Architecture延伸到web設計領域,讓所有的交互設計、視覺、前端開發都開始投入到這個趨勢,或者說新的設計解決方案中。

    cool,贊昵子,裡面的一些案例很不錯,導航(分一級導航、多級導航、麵包屑)的響應方式bradfrost整理的比較全,附簡單demo→https://github.com/kissygalleryteam/responsive

    當自己和身邊的朋友越來越多的用上了iPhone、iPad、android手機或平板,當越來越多的人都在談論這個老意識新概念的話題,當我們一直秉承的用戶體驗第一與網頁設計完美結合的時候,我也陸續整理了一些關於響應式的設計理念及方法的東西,今天就以響應式導航的設計拋磚引玉,和大家分享一下。

    響應式導航的設計遵循了響應式Web設計理念,頁面的設計與開發根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。通過同比例縮減元素尺寸、調整頁面結構布局以及內容的優化調整等方式,使得用戶在不同的平台上有着獨一無二的用戶體驗。這裡要說明的是,懸浮特效、flash是不適用移動設備的。

    一、情景定位

    下面以三種有代表性的主流設備屏幕尺寸:Pc、iPad、iPhone做案例解析幾種常見的導航設計。

    1.簡單智能的導航菜單形式

    此款菜單適用於所有屏幕的一些設計,菜單扁平化,留有足夠空間在各個不同的屏幕上做響應式的變化,一種簡單的設計便可以輕鬆調整。

    先來看網頁開發設計公司Flip非常簡單色塊的導航,採用了由網頁文字鏈變到移動設備的按鈕形式,規避了移動設備操作不精準等一些弊端。

    設計教程:響應式頁面導航設計解析

     

    另一種常見的右側導航設計在很多網站中應用,例如:App設計團隊Create,在移動設備上,導航橫向排列不變,Logo和導航由一行變為兩行,頁面簡潔清晰且用戶體驗一致。

    設計教程:響應式頁面導航設計解析

    2.導航菜單列表形式

    最常用的一種排列形式,橫嚮導航在小屏幕下變為縱向排列,一列、兩列甚至是多列多行的形式,具體應實際情況而定。

    先來看單列形式的案例:Forefathers Group

    設計教程:響應式頁面導航設計解析

    兩列形式:Travelorego

    設計教程:響應式頁面導航設計解析

    多行多列形式:Regent College

    設計教程:響應式頁面導航設計解析

    3.導航隱藏形式

    在手機設備上導航的另一種形式以隱藏列表的方式呈現,是對空間的有效利用,突出高優先級內容的處理方式。

    來看下Microsoft的下拉隱藏菜單,通過設定圖標點擊對菜單做收縮或展開。經典、簡約的布局完美適合平台轉換。

    設計教程:響應式頁面導航設計解析

    設計教程:響應式頁面導航設計解析

    設計教程:響應式頁面導航設計解析

    國際標準化組織ISO網站在移動設備預覽時也採用了隱藏菜單的形式,但展開的交互形式菜單欄出現在網站的底部。這樣,訪客不得不先看頭部和中間內容,迫使訪客先瀏覽完網站后再決定下一步的走向。

    設計教程:響應式頁面導航設計解析

    設計教程:響應式頁面導航設計解析

    設計教程:響應式頁面導航設計解析

    4.下拉菜單形式

    在第三種介紹中的隱藏菜單的兩個案例里,同時也採用了下拉菜單的形式。使用下拉菜單來組織複雜內容是一個非常方便和流行的方式,復 雜的網站甚至會使用多層次的下拉菜單。在較小的屏幕上,在依賴觸摸反應的設備上,下拉菜單要慎用。這裡沒有懸浮效果,屏幕資源可能非常有限。默認情況下, 導航菜單根本就不顯示,只有當觸摸到右上角指定的小圖標時,第一個內容層才會打開。當觸摸到其中一個欄目時,第二個內容層才會逐漸展開,給用戶一個非常清 晰明了的內容導航。

    來參考下面一個案例:The Copper Tree。

    設計教程:響應式頁面導航設計解析

    下拉菜單的共通點是:默認情況下菜單隱藏,一旦用戶需要導航鏈接,點擊圖標菜單展開,選中后菜單自動消失隱藏,下一次操作時重複。好處是不會影響其他的內容頁面。

    二、設計原則

    舉了那麼多案例,下面我們來看看在具體的設計中我們要遵循哪些原則?

    1.在 響應式網頁設計中,有時候我們需要對頁面內容進行刪減,按照優先級顯示內容,只顯示高優先級內容是原則之一。在屏幕較小的移動設備上應該優先考慮內容並且 去移掉那些小的欄目。在頂部顯示高優先級內容,即把最重要的內容放置在頂部。導航是否一定要出現在頁頭或者重新布局改在頁尾都要依網站具體規劃去考慮。

    2.提供清晰和友好的手指操作鏈接。尤其在手機設備上,可點擊操作的區塊不宜過小,引導要清晰強烈,不忽略任何一款設備。

    3.調整設計來適應可用空間,使得用戶在不同的設備上仍保持對同一頁面相同的視覺和感覺。這也遵循我們交互設計體驗一致的原則。大家可以參考Oliver Russell網站,一個設計非常靈活的網站,在不同的屏幕分辨率下保持相同的視覺和感覺。

    4.需考慮大部分用戶右手點擊操作,左手負責握住設備的習慣,右側的導航列表既方便右手的點擊,又可以避免被握着設備的左手不小心觸碰到。有興趣的同學可以參考Chris Kemm一篇非常棒的關於觸屏設計的文章《Designing for Touch Screen》原文地址:http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/

    結束語

    響應式之所以變得流行的一大原因是無論在哪,看起來都很棒。2013我們正處在移動互聯網快速發展的時代,一個網站能夠兼容多個終端,而不是為每個終端做一個特定的版本,響應式設計為移動互聯網而生,Web設計也將迎來更多的響應式設計元素。

    最後介紹一款響應式導航設計的插件:Responsive Nav Plugin

    下載地址:http://responsive-nav.com/

    針對小屏幕的可切換式導航的創建,支持觸屏事件和CSS3過渡(transitions)效果,具有非常好的性能。

    設計教程:響應式頁面導航設計解析

    — —

    文章永久連結為: 設計教程:響應式頁面導航設計解析