響應式移動端網站建設有什么好處,網頁導航響應式設計

  • 響應式移動端網站建設有什么好處,網頁導航響應式設計已關閉評論
  • A+

響應式移動端網站建設有什么好處,網頁導航響應式設計 響應式移動端網站建設有什么好處,網頁導航響應式設計響應式移動端網站建設有什么好處,網頁導航響應式設計響應式移動端網站建設有什么好處,網頁導航響應式設計響應式移動端網站建設有什么好處,網頁導航響應式設計現在福州嘉藝網絡燕狂徒給福州企業制作企業網站全部采用響應式網頁設計或者自適應網站制作,因為這樣的網站更利于seo優化的效果,在百度排名推廣上會更容易。

移動端網頁已影響到了人們生活的各個層面, 不論網上購物還是查找資料, 不通過PC端瀏覽器, 掏出手機就能做到。近幾年, 響應式設計大行其道, 越來越多的移動端網站采用了響應式技術?!皩Ш绞蔷W站的核心功能之一, 導航設計的成功與否, 直接關系到用戶體驗是否良好[1]?!庇脩臬@取網頁信息高度依賴導航系統來實現, 在結構復雜的大型網站中, 如果用戶無法及時地獲取網站信息, 終將失望地離開。導航系統會貫穿用戶瀏覽過程的始終, 除網站內容外, 留給用戶印象最深的網頁界面元素莫過于導航。因此導航系統的研究對于網頁設計者具有重要意義。

1 響應式導航設計優勢凸顯

針對移動用戶, 網頁設計人員會在PC端網頁之外單獨建立一個適用于移動設備的獨立站點, 被稱為移動端網站。PC端導航和移動端導航屬于非響應式的, 主要采用兩種布局方式, PC端采用的是固定布局, 而移動端采用的是流動布局。響應式設計的普及使它與PC端網頁和移動端網頁在導航設計上暴露出巨大差異。

1.1 PC端導航無法在移動設備上使用

PC端網頁發展得較為成熟, 然而大多數適用于PC端網頁的導航形式并不適合移動端網頁。PC端設備顯示器分辨率較高, 有的分辨率可達4K。導航菜單項比較多的復雜導航往往采用了固定寬度的導航, 尤其是多級下拉導航, 它展開時占據大量空間。當然在PC上瀏覽這樣的網站毫無大礙, 如果將這種導航照搬到移動端網頁上, 網頁導航使用體驗就極為糟糕。例如, 使用手機瀏覽器打開此類PC端網頁, 整個網頁就會被等比例壓縮, 所有圖片或文字均被壓縮到無法看清。用戶必須通過手勢放大網頁才能看清局部內容, 這種導航加大了用戶的使用難度。該現象表明傳統的PC端網頁, 雖然適用于大尺寸的設備, 但無法滿足移動設備用戶的需求。

1.2 移動端導航無法根據設備調整布局

移動端設備呈現多元化的趨勢, 屏幕尺寸不等。移動端導航的設計因此沒有固定的尺寸標準。移動設備屏幕尺寸的多樣性要求移動端導航具有自適應性, 可在不同平臺上呈現最佳布局, 根據設備尺寸自動改變導航的形式。傳統的移動端導航基本上采用的是使用了相對單位的流動布局, 這種布局可以讓導航隨著移動端設備尺寸的變化進行調整, 但是它也有短板, 就是布局始終不變, 不能適應設備的變化, 對于屏幕空間的利用并不合理。

1.3 響應式導航可在多終端自適應

總體來說, 不論是基于固定布局的PC端導航還是基于流動布局的移動端導航, 都不能根據設備進行調整, 無法滿足使用不同終端的用戶的需求。而基于響應式技術的響應式導航徹底地解決了非響應式導航遺留下來的問題。響應式導航能夠自動識別設備信息, 根據設備大小調節導航布局和形式, 從而在不同尺寸設備上展現最佳的使用效果, 這是傳統導航不可企及之處。

2 適用于移動端網頁的響應式導航

基于響應式技術, 移動端網頁的導航形式可以根據設備屏幕尺寸不同而進行有效合理的調整。目前, 使用小尺寸移動設備的用戶居多, 我們更有必要在響應式日漸流行的當下, 重新審視針對小屏幕環境的導航設計形式。移動端導航在視覺上既要足夠突出, 又不占用過大空間干擾用戶注意力, 同時能夠使用戶通過它快速高效地鎖定目標信息, 減少重復操作。通過觀察大量國內外響應式網站的導航設計, 筆者列出五種常見響應式導航設計形式:

2.1 使用原生選擇菜單收納導航項

將導航項收納在一個沒有定義樣式的原生選擇菜單控件內。它避免了導航占據大量屏幕空間。原生的選擇菜單支持用戶所使用設備的本地化操作, 讓網頁交互更接近用戶所使用設備的原生交互體驗。原生選擇菜單的樣式十分顯眼, 讓用戶容易辨認出來。比起通過CSS樣式表精心設計的導航菜單, 原生選擇菜單僅需簡單編寫HTML結構即可輕松實現。但這種菜單也有短板, 原生選擇菜單在不同移動設備上所呈現的樣式是不同的, 例如IOS設備和安卓設備中的原生選擇菜單的樣式大相徑庭。

2.2 水平滾動導航避免折行顯示

水平滾動導航對于導航菜單項很多的網站, 是一種值得使用的導航形式, 不少移動端購物網站的導航設計采用該形式。由于很多網站導航菜單選項過多, 同時又必須對其所占據的空間進行一定的限制, 水平滾動導航因此應運而生。水平滾動導航可以讓用戶使用手指平行拖動導航條找到隱藏于移動設備顯示范圍之外的菜單選項, 讓導航菜單項不用折行顯示, 節省了大量屏幕空間。

2.3 側滑導航

側滑導航俗稱抽屜導航, 最早應用于Facebook的網頁界面中。側滑導航模塊隱藏在可視范圍之外, 保留“漢堡包”狀的圖標按鈕在屏幕邊緣, 作為顯示導航的觸發元素, 用戶點擊該按鈕后, 導航模塊會像抽屜一樣從屏幕邊緣滑出。這種導航在用戶不需要使用時會完全隱藏于屏幕可視范圍之外, 是一種極其節省屏幕空間的導航形式。目前, 索尼公司官網采用的正是側滑導航, 通過在頁面頂部設置一個“漢堡包”按鈕開啟導航, 使整個網頁界面看起來更簡潔, 同時驚艷的滑動特效也為網頁增色不少。但是, 與其他簡單的導航設計形式相比, 它的兼容性比較差, 不同設備對側滑動畫的支持不一樣。在低版本的安卓設備上, 打開側滑菜單, 動畫會有所卡頓。而IOS設備對動畫的支持較好, 所以側滑導航的滑出動畫在IOS設備上更加流暢。因此, 使用側滑導航可能會造成多終端瀏覽體驗不一致的情況。側滑導航滑出形式多樣, 包括折疊展開, 翻轉, 插入。

2.4 懸浮按鈕導航

懸浮按鈕導航是一種覆蓋在頁面上的小型導航, 無論用戶處于網站的哪個頁面, 它始終保持在頁面最上層, 方便用戶隨時使用。懸浮按鈕導航通常使用簡潔的圖標, 加上保持在特定的位置, 使得懸浮按鈕導航同頁面內容區別開來, 用戶更容易判斷它的功能。同時, 為了避免懸浮按鈕導航遮擋頁面內容和妨礙用戶操作, 通常懸浮按鈕導航都可以在屏幕邊緣自由移動, 或者在適當的時候隱藏起來。當用戶需要使用時, 觸發屏幕便可使其再次顯現, 所以此類導航設計形式在屏幕空間利用和交互上十分具有優勢。

2.5 將導航設置于頁面尾部

尾部導航, 顧名思義, 位于一個頁面的尾部。這種導航的理念是內容優先、導航其次。尾部導航使用了錨點鏈接技術, 當用戶使用導航時, 點擊頁面頂部指定圖標按鈕, 可視區域會滾動到底部導航區域, 這樣才能使用導航。這種導航的優勢在于它不占用頁面頂部的位置, 當用戶打開網頁時, 可以直接從內容開始瀏覽。但是尾部導航所處的位置過于隱蔽, 難以被用戶發現, 如果不通過錨點鏈接, 用戶需要通過手指拖動將頁面向下滾動至頁面尾部, 會令用戶感到疲倦, 十分不便。

3 結束語

中國互聯網絡信息中心第36次全國互聯網發展統計報告顯示“截至2017年6月, 我國手機網民規模達7.24億, 較2016年底增加2830萬人?!?。中國人越來越多地使用手機瀏覽器獲取信息。手機作為中國網民主要上網終端的趨勢將進一步明顯。本文重點分析移動端網頁界面中的關鍵元素-導航, 對傳統導航與響應式導航的設計形式進行對比, 筆者發現不論是基于固定布局的PC端導航還是基于流動布局的移動端導航, 都不能根據設備進行調整, 無法滿足使用不同終端的用戶的需求。而基于響應式技術的響應式導航能夠自動識別設備信息, 根據設備屏幕尺寸調節導航布局和形式, 從而在不同尺寸設備上展現最佳的使用效果, 這是傳統導航不可企及之處。

目前, 使用傳統固定寬度設計的網站數量仍然相當龐大, 尤其是非營利性組織和政府機構網站, 其用戶體驗較差, 不適合通過手機瀏覽器使用, 亟需針對當前移動網絡環境進行升級。響應式技術為網站升級改造提供了有效的解決方案, 本文中所提到的基于響應式技術的導航設計形式, 無疑值得眾多網站設計者學習和借鑒。