在網(wǎng)頁設(shè)計(jì)中，建立一個優(yōu)秀的響應(yīng)或自適應(yīng)網(wǎng)站的技巧是關(guān)心你網(wǎng)站的每個元素，并考慮網(wǎng)站變化可能會如何影響它們。在規(guī)劃適合移動設(shè)備的設(shè)計(jì)時，試著包括或改進(jìn)這些關(guān)鍵部件：
1.標(biāo)題內(nèi)容
乍一看，標(biāo)題可以告訴訪問者很多關(guān)于網(wǎng)站的信息：
品牌是什么
它提供哪些
采取什么行動？
如何搜索所有內(nèi)容？
桌面布局有足夠的空間在其網(wǎng)站標(biāo)題上顯示所有這些信息。移動終端更少——你的響應(yīng)或自適應(yīng)設(shè)計(jì)應(yīng)該考慮到這一點(diǎn)。
問問自己在你的移動網(wǎng)站導(dǎo)航中應(yīng)該看到哪些元素。例如，一個標(biāo)志應(yīng)該在那里培養(yǎng)強(qiáng)大和一致的品牌標(biāo)志。其他常見的項(xiàng)目包括頁面導(dǎo)航，或者如果你正在建立一個電子商務(wù)網(wǎng)站，包括購物車圖標(biāo)。
2.文本易讀性
網(wǎng)站文本可能是一個無法解決的元素：你希望它看起來不錯，反映你的品牌風(fēng)格，但你必須確保你的設(shè)計(jì)選擇不會影響可讀性。
在設(shè)計(jì)不同的設(shè)備時，您還必須考慮尺寸和風(fēng)格可能不會隨著屏幕尺寸的上下移動而縮小。不用說，在啟動網(wǎng)站之前測試這一點(diǎn)很重要。
3.漢堡菜單
導(dǎo)航在每個網(wǎng)站中都起著至關(guān)重要的作用，因此考慮客戶如何根據(jù)他們的設(shè)備進(jìn)行不同的互動至關(guān)重要。對于新手，請考慮使用漢堡菜單。
漢堡菜單是指通常位于網(wǎng)站右上角或左上角的三行標(biāo)志。在這一點(diǎn)上，大多數(shù)人都知道這些層次的水平線是做什么的，它們是訪問移動網(wǎng)頁設(shè)計(jì)的可靠選擇。
4.導(dǎo)航置放
移動應(yīng)用程序的日益普及影響了網(wǎng)站所有者構(gòu)建移動導(dǎo)航的形式。每個人都看到設(shè)計(jì)超出了我們過去介紹的漢堡菜單。
對于一組較小的頂級導(dǎo)航鏈接（不超過三個或四個），一些品牌會考慮將其添加到屏幕底部或網(wǎng)站標(biāo)題中作為粘性菜單。另一種流行的導(dǎo)航方法是利用燈箱建立全屏彈出菜單。
5.粘性標(biāo)題
在自適應(yīng)網(wǎng)站設(shè)計(jì)中，您可以使您的移動頁面相對較短。然而，在響應(yīng)設(shè)計(jì)中，所有桌面內(nèi)容都會流入移動網(wǎng)頁，除非有其他修改。
如果你盡了最大努力，您的移動網(wǎng)頁仍在運(yùn)行很長時間，請考慮將頁眉設(shè)置為粘性。這樣，客戶就可以隨時瀏覽您的導(dǎo)航。
6.視覺層次
網(wǎng)站的視覺水平是指訪問者的眼睛在頁面上遵循的路徑?；靵y的網(wǎng)站布局使訪問者很難知道下一步該去哪里，尤其是在移動網(wǎng)站上。
可將標(biāo)題和子標(biāo)題、圖像塊、空缺、導(dǎo)航工具等添加到網(wǎng)頁上，方便：
分解大量內(nèi)容和復(fù)雜主題
構(gòu)建頁面上的信息
確保你有一個平衡和更好的設(shè)計(jì)
創(chuàng)建不同部分之間的關(guān)系
當(dāng)您制作每個版本的視覺細(xì)節(jié)時，您可以在自適應(yīng)設(shè)計(jì)中考慮這一點(diǎn)。在響應(yīng)設(shè)計(jì)中，您必須小心元素可以調(diào)整大小或重新設(shè)置風(fēng)格，因?yàn)殡S著屏幕的縮小。
最好的辦法是為臺式機(jī)、平板電腦和移動終端設(shè)置全局風(fēng)格，以確保響應(yīng)重組過程不會影響您內(nèi)容的完整性。
7.頁長
你網(wǎng)站內(nèi)容的最后一個問題是它的長度。手頭的導(dǎo)航可能會讓長頁面更容易翻轉(zhuǎn)到移動設(shè)備上—但在手機(jī)上更低的翻轉(zhuǎn)也有幫助。
根據(jù)自適應(yīng)設(shè)計(jì)，您可以刪除移動布局上的文本或圖像部分。這樣，您就可以在桌面上閱讀更多內(nèi)容，并保持移動版本的可讀性。
8.意境
網(wǎng)站圖像是設(shè)計(jì)、品牌營銷、講故事和銷售的非常有用的工具。在響應(yīng)和自適應(yīng)設(shè)計(jì)中，請注意這些圖像對頁面性能的影響。雖然圖像重量通常不是自適應(yīng)網(wǎng)站的問題，但僅僅使用你需要的圖像仍然是一個好主意，這樣他們就不會減緩你的頁面速度。
9.置入內(nèi)容
應(yīng)用嵌入式社交網(wǎng)絡(luò)小組件、視頻或橫幅廣告等外部內(nèi)容并不少見。在自適應(yīng)設(shè)計(jì)中，您可以將這些外部元素放置在容器的邊界內(nèi)。在響應(yīng)設(shè)計(jì)中，您應(yīng)確保在容器范圍內(nèi)設(shè)置代碼。
10.互動
互動設(shè)計(jì)元素應(yīng)為：
易于識別為交互式
可以在頁面上找到
互動無誤
考慮到訪問者期望與您的網(wǎng)站進(jìn)行各種微互動，這些互動可能會有所不同。例如，假設(shè)您已經(jīng)將聯(lián)系電話號碼放入您的網(wǎng)站標(biāo)題。桌面客戶可能會把它撥到手機(jī)上。另一方面，移動用戶希望單擊電話。
平臺之間的交互式手勢或設(shè)計(jì)繼續(xù)不同。例如，圖像滾輪可能對所有用戶都是一樣的。然而，只有移動訪問者才能點(diǎn)擊向左或向右滾動滾輪。桌面訪問者將使用鼠標(biāo)。
因此，無論您選擇使用響應(yīng)式網(wǎng)頁設(shè)計(jì)還是自適應(yīng)網(wǎng)頁設(shè)計(jì)，都不僅要關(guān)注如何在不同的平臺上重新定位、調(diào)整大小或顯示您的內(nèi)容。還要考慮如何影響內(nèi)容交互。
