期小結了常見的五種移動導航，標簽導航、TAB導航、舵式導航、抽屜導航和宮格式導航。這期繼續分享另外五種常見的導航。

列表式導航

列表導航是手機和網頁端都十分常見的導航模式，主要用于展示文字信息。使用列表式導航的頁面都十分干凈，內容清晰，能快速定位到目標。APP中一般以圖文結合的模式展示。

小結：

采用列表導航的頁面內容多為左對齊，同時頁面會產生大面積留白，使頁面看起來干凈整潔。使用上需根據具體需求來設計展示內容和高度，用戶關注點在哪里，就展示哪些信息。適合功能之間互相獨立，切換頻率不高，以內容為主的信息或分類展示。

分段式導航

分段式導航也是IOS系統自帶的標準控件，它體積小巧，可根據內容自由伸縮，能輕松融入界面，不占用空間，是目前IOS端使用頻率較高的一種導航。

小結：

分段式導航IOS的標準控件，可以根據頁面內容自由伸縮大小，使用上十分靈活，可以很輕松的融入頁面。適合頁面分類切換頻率較高，導航數量在2-4個之間的場景，不適合安卓，和一級導航。

輪播式導航

輪播式導航是通過橫向輪播面板衍生出的一種導航模式。通過橫向列表把信息藏到頁面之外，充分利用空間。只需滑動手指就能輕松的切換。配合大圖背景，讓用戶同一時間專注一個目標，使用上體驗更好。

小結：

通過案例，我們不難發現使用輪播式導航的頁面整體十分干凈整潔，配合大圖的展示視覺沖擊更強烈，體驗更好。但缺點一次只能切換相鄰的選項卡。用戶也大多會選擇優先出現的功能，藏在后面的功能使用頻率會相對較少。適合功能之間不頻繁跳轉，內容經常更新，視覺效果直觀，彼此獨立的內容。在使用上注意需要在頁面邊緣給出提示，引導用戶滑動。

懸浮按鈕導航

懸浮按鈕導航是將導航頁面分層，無論你到達APP的哪個頁面，懸浮圖標永遠懸浮在頁面頂層，依靠懸浮層可以迅速對當前頁面進行操作。懸浮按鈕也是Material design的標準控件，同時在Android UI 交互中也是最常見的元素之一。常用來放置其核心功能，在用戶流程中起到重要作用，常出現在頁面右下方，并使用對比強烈的色彩突出，點擊時彈出其功能。

小結：

通過案例可以發現浮動按鈕在頁面上十分突出，通常用來承載相關度最高、最常用、最重要的操作。并根據頁面來顯示隱藏以及切換不同狀態，是非常實用的一種導航模式，一般出現在需要正向操作的頁面。但是需要注意的是，懸浮icon會遮擋某些頁面的操作，如上圖Gmail頁面中浮動按鈕擋住了下面的收藏，用戶需要額外的滑動頁面才能點擊。所以在設計時應該考慮進去，比如在懸浮按鈕出現的頁面為它留有位置。

復合式導航

隨著應用功能越來越多，頁面的分類也越來越細致，單一的導航模式已經無法滿足信息的層級分類，這時就需要使用復合式導航能將多種導航組合到一起，使大量信息通過多層級分類有序的展示在一個頁面，是目前最常見的導航模式。

小結：

復合式導航的設計隨處可見，其優點是將多層級的信息有序的排列在一個頁面，使信息分類更明確，頁面更有活力。使用上多為一個主導航加兩個輔助導航的設計，比較少有超過3種以上的設計，過多的導航會使用戶失去焦點，在導航的層級搭配上也需要注意。

總結

通過兩期對移動導航的分析和小結，我們不難發現移動導航的設計上是非常多樣性的，不同的產品功能會出現形式各異的導航，每一種導航都有各自的使用場景。沒有最完美的導航，只有最適合的導航。當我們在實際場景中運用時可以先觀察競品如何設計，分析其利弊，再結合自己產品實際的需求、功能、內容、用戶使用場景等進一步思考，做出多套方案后進行最優選擇。在平時使用產品的過程中觀察各種層級的導航變化，思考它們的設計方式，進行適當小結。通過長時間的積累，我相信大家對各種導航都能夠運用自如。

適應網頁建設是現代網頁設計的重要方向之一，它可以使網頁在不同設備上具有良好的顯示效果，無論是在電腦上還是在手機上都能夠提供優質的用戶體驗。自適應手機網頁模板就是一種適用于手機端瀏覽的網頁模板，它能夠根據不同尺寸的屏幕自動調整頁面布局，保證內容的完整顯示，并且還能夠提供流暢的操作體驗。接下來，我將詳細介紹自適應網頁建設以及自適應手機網頁模板的優勢和使用方法。

首先，自適應網頁建設與傳統的固定布局相比具有很多優勢。傳統的固定布局在不同設備上的顯示效果常常不盡如人意，通過放大和縮小網頁來適應屏幕大小，導致文字和圖片的不清晰、排版混亂等問題，嚴重影響了用戶的閱讀體驗。而自適應網頁建設則可以根據不同設備的屏幕尺寸和分辨率自動調整頁面布局，使文字和圖片適應不同的屏幕大小，保持內容的清晰和排版的整齊，提供更好的閱讀體驗。

其次，自適應手機網頁模板是實現自適應網頁建設的重要工具。自適應手機網頁模板是一種專門為手機瀏覽而設計的網頁模板，它可以根據手機的屏幕尺寸和分辨率等參數來自動調整頁面布局，并通過響應式設計實現一套代碼適用于多個設備，節省開發和維護成本。同時，自適應手機網頁模板還提供了豐富的樣式和布局選擇，可以根據實際需求選擇合適的模板進行建設，快速搭建出具有良好用戶體驗的手機網頁。

在使用自適應手機網頁模板的過程中，首先需要選擇合適的模板。根據不同的網站類型和需求，選擇合適的模板，可以從模板庫中進行選擇，或者根據自己的需求進行修改。選擇模板時需要考慮模板的布局、樣式、配色等因素，以確保最終的網頁能夠與企業或個人的形象相匹配。

其次，需要根據模板進行頁面設計和內容填充。根據模板提供的布局進行頁面設計，包括導航菜單、主要內容區域、底部信息等的安排，確保頁面結構清晰、易于導航。同時，根據網頁的需求，填充相應的內容，包括文字、圖片、視頻等。在填充內容時需要注意文字和圖片的大小和排列方式，確保在不同設備上都能夠正常顯示。

最后，進行網頁的測試和優化。在完成網頁的建設后，需要進行測試，以確保在不同設備上都能夠正常顯示和使用。測試時需要將網頁分別在電腦和手機上進行查看，并進行相關功能的測試，如導航鏈接是否正常、圖片是否顯示清晰等。如果發現問題，需要根據實際情況進行相應的調整和優化，以提供更好的用戶體驗。

總結起來，自適應網頁建設和自適應手機網頁模板可以幫助我們解決在不同設備上顯示效果不佳的問題，提供優質的用戶體驗。通過選擇合適的模板，并進行頁面設計和內容填充，最后進行測試和優化，我們可以快速搭建出具有良好用戶體驗的手機網頁。隨著移動設備的普及和使用頻率的增加，自適應網頁建設和自適應手機網頁模板將會越來越受到重視，成為未來網頁設計的重要方向之一。

了日常方便大家都會選擇用手機去瀏覽電腦網站，就會出現網頁不適應屏幕大小，因此，為保證用戶的瀏覽網頁的效果，建議網站的寬度設置在960-1200px之間，但如何去自定義網站寬度呢？接下來我會用喬拓云網給大家演示一下我的方面，喬拓云網里面還有超多電腦網站的模板，直接復制就可以創建自己的網站了，設置網站寬度等其他全部操作都是可視化編輯哦

工具:

喬拓云網

操作步驟：

1、首先我們可以先從瀏覽器當中搜索找到喬拓云網的官方網站,可以注冊一個賬號后登錄到后臺，如圖片中的紅色箭頭所指位置去操作

2、進入到后臺管理點擊【電腦網站-去設計】，就會跳出一個模板

3、覺得這個模板不適合的話，可以點擊【極速建站】里面有超多模板可以選擇，根據自己的需求去挑選就可以啦

4、選好想好的模板后，在電腦網站設置頁面，點擊左側導航【樣式--基礎設置】中調整，支持設置自定義網站寬度

5、設置好后記得點擊保存哦~

6、以上就是如何調整網站大小與屏幕適應的方法，大家快去用喬拓云網試試吧~