在網(wǎng)頁設(shè)計(jì)中，建立出色的響應(yīng)式或自適應(yīng)網(wǎng)站的訣竅是關(guān)注您網(wǎng)站的各個(gè)元素，并考慮網(wǎng)站更改可能如何影響它們。

在規(guī)劃適合行動(dòng)裝置的設(shè)計(jì)時(shí)，嘗試專注于包含或優(yōu)化這些主要組件：

1. 標(biāo)題內(nèi)容

標(biāo)題可以告訴訪問者很多關(guān)于網(wǎng)站的訊息：

品牌是什么

它提供什么

采取哪些行動(dòng)

如何搜尋所有內(nèi)容

桌面布局有足夠的空間在其網(wǎng)站標(biāo)題上顯示所有這些訊息。在行動(dòng)裝置上則更少——您的響應(yīng)式或自適應(yīng)設(shè)計(jì)需要考慮到這一點(diǎn)。

問問自己哪些元素應(yīng)該在您的行動(dòng)網(wǎng)站導(dǎo)航中可見。例如，一個(gè)標(biāo)志應(yīng)該在那里培養(yǎng)強(qiáng)大和一致的品牌標(biāo)識(shí)。其他常見項(xiàng)目包括導(dǎo)航菜單，或者如果您正在構(gòu)建電子商務(wù)網(wǎng)站，包括購物車圖標(biāo)。

2. 文字易讀性

網(wǎng)站文本可能是一個(gè)難以處理的元素：您希望它看起來不錯(cuò)并反映您的品牌風(fēng)格，但您必須確保您的設(shè)計(jì)選擇不會(huì)影響易讀性。

在針對(duì)不同設(shè)備進(jìn)行設(shè)計(jì)時(shí)，您還必須考慮尺寸和樣式可能不會(huì)隨著螢?zāi)怀叽绲纳舷乱苿?dòng)而縮放。不用說，在啟動(dòng)網(wǎng)站之前測(cè)試這一點(diǎn)很重要。

3.漢堡圖標(biāo)

導(dǎo)航對(duì)于每個(gè)網(wǎng)站都起著至關(guān)重要的作用，因此考慮用戶如何根據(jù)他們的設(shè)備進(jìn)行不同的互動(dòng)非常重要。對(duì)于初學(xué)者，請(qǐng)考慮使用漢堡菜單。

漢堡菜單是指通常位于網(wǎng)站右上角或左上角的三行圖標(biāo)。在這一點(diǎn)上，大多數(shù)人都知道那些堆疊的水平線是做什么的，并且是瀏覽行動(dòng)網(wǎng)頁設(shè)計(jì)的值得信賴的選擇。

4.導(dǎo)航放置

行動(dòng)應(yīng)用程式的日益普及影響了網(wǎng)站所有者構(gòu)建行動(dòng)導(dǎo)航的方式。我們比以往任何時(shí)候都看到設(shè)計(jì)超出了我們已經(jīng)推薦的漢堡菜單。

對(duì)于一組較小的頂級(jí)導(dǎo)航連結(jié)（不超過三個(gè)或四個(gè)），一些品牌會(huì)考慮將它們作為粘性水平菜單添加到螢?zāi)坏撞?，或在網(wǎng)站標(biāo)題中。另一種流行的導(dǎo)航方法是使用燈箱建立全螢?zāi)粡棾霾藛巍?/p>

5. 粘性標(biāo)題

在自適應(yīng)設(shè)計(jì)中，您可以使您的行動(dòng)頁面相對(duì)較短。然而，在響應(yīng)式設(shè)計(jì)中，除非另有修改，否則所有桌面內(nèi)容都會(huì)流入行動(dòng)網(wǎng)頁。

如果您盡了最大的努力，您的移動(dòng)網(wǎng)頁仍然運(yùn)行很長時(shí)間，請(qǐng)考慮將頁首設(shè)置為粘性。這樣，用戶可以隨時(shí)訪問您的導(dǎo)航。

6.視覺層次

網(wǎng)站的視覺層次是指訪問者的眼睛在頁面上所遵循的路徑。雜亂的網(wǎng)站布局使訪問者很難知道要關(guān)注哪些細(xì)節(jié)或下一步該去哪里，尤其是在行動(dòng)網(wǎng)站上。

您可以向網(wǎng)頁添加標(biāo)題和子標(biāo)題、圖像塊、空白、導(dǎo)航工具等，以便：

分解大量內(nèi)容和復(fù)雜的主題

為頁面上的訊息建立架構(gòu)

確保您有一個(gè)平衡良好的設(shè)計(jì)

建立不同部分之間的關(guān)系

當(dāng)您繪制每個(gè)版本的視覺細(xì)節(jié)時(shí)，您可以在自適應(yīng)設(shè)計(jì)中考慮這一點(diǎn)。在響應(yīng)式設(shè)計(jì)中，您必須小心，因?yàn)殡S著螢?zāi)豢s小，元素可能會(huì)調(diào)整大小或重新設(shè)置樣式。

最好的辦法是為桌上型電腦、平板電腦和行動(dòng)裝置設(shè)置全局樣式 - 確保響應(yīng)式重組過程不會(huì)干擾您內(nèi)容的完整性。

7.頁長

關(guān)于您網(wǎng)站內(nèi)容的最后一個(gè)問題是它的長度。手頭的導(dǎo)航可能會(huì)使長頁面更容易在行動(dòng)裝置上滾動(dòng)瀏覽——但在手機(jī)上瀏覽時(shí)，更少的滾動(dòng)也會(huì)有所幫助。

通過自適應(yīng)設(shè)計(jì)，您可以刪除行動(dòng)布局上的文本或圖像部分。這樣，您可以允許在桌面上閱讀更多內(nèi)容，同時(shí)保持行動(dòng)版本的可讀性。

8. 圖像

網(wǎng)站圖像在設(shè)計(jì)、品牌推廣、講故事和銷售方面是非常有用的工具。在響應(yīng)式和自適應(yīng)設(shè)計(jì)中，請(qǐng)注意這些圖像對(duì)頁面性能的影響。雖然圖像的重量對(duì)于自適應(yīng)網(wǎng)站來說往往不是問題，但只使用您需要的圖像仍然是一個(gè)好主意，這樣它們就不會(huì)減慢您的頁面速度。

9. 嵌入內(nèi)容

使用嵌入式社群媒體小部件、影片或橫幅廣告等外部內(nèi)容并不少見。在自適應(yīng)設(shè)計(jì)中，您可以將這些外部元素放置在它們出現(xiàn)的容器的邊界內(nèi)。在響應(yīng)式設(shè)計(jì)中，您應(yīng)該確保自定義嵌入原始碼以使其在容器的范圍內(nèi)。

10. 互動(dòng)

互動(dòng)設(shè)計(jì)元素應(yīng)該是：

易于識(shí)別為交互式

在頁面上可以找到

互動(dòng)無誤

考慮訪問者期望與您的網(wǎng)站進(jìn)行的各種微互動(dòng)，這些交互的方式可能會(huì)有所不同。例如，假設(shè)您已將電話號(hào)碼放在您的網(wǎng)站標(biāo)題中。桌面用戶可能會(huì)將其撥入手機(jī)。另一方面，行動(dòng)用戶希望點(diǎn)擊通話。

平臺(tái)之間的互動(dòng)手勢(shì)或設(shè)計(jì)繼續(xù)存在差異。例如，一個(gè)圖像滑塊對(duì)于所有用戶來說可能看起來都一樣。但是，只有移動(dòng)訪問者可以點(diǎn)擊以向左或向右滑動(dòng)滑塊。桌面訪問者將使用滑鼠。

因此，無論您選擇使用響應(yīng)式網(wǎng)頁設(shè)計(jì)還是自適應(yīng)網(wǎng)頁設(shè)計(jì)，都不要只關(guān)注如何在不同平臺(tái)上重新定位、調(diào)整大小或表示您的內(nèi)容。還要考慮上下文如何影響內(nèi)容互動(dòng)。