隨著設(shè)備數(shù)量和屏幕尺寸的增加，響應(yīng)式設(shè)計(jì)已成為標(biāo)準(zhǔn)協(xié)議。 PC和移動(dòng)Web設(shè)計(jì)的兼容性測(cè)試對(duì)于確保用戶無(wú)論其訪問(wèn)方式如何都能導(dǎo)航并輕松訪問(wèn)內(nèi)容至關(guān)重要。
就像網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的幾乎所有事物一樣，關(guān)于如何針對(duì)較小的屏幕進(jìn)行設(shè)計(jì)也有不同的想法。 但是，除了這些差異之外，我們還應(yīng)牢記一些響應(yīng)式設(shè)計(jì)原則。
1.可讀性和可用性至上
每個(gè)人都希望他們的設(shè)計(jì)在每個(gè)屏幕上看起來(lái)都漂亮。 但是，在移動(dòng)領(lǐng)域嘗試太花哨是危險(xiǎn)的。 在臺(tái)式機(jī)上看起來(lái)漂亮的高端布局或功能可能對(duì)電話沒(méi)有意義。 在適當(dāng)?shù)牡胤?，需要?jiǎn)化。 如果事實(shí)證明某個(gè)特定元素在小屏幕上太笨拙，您將不會(huì)后悔刪除它或?qū)⑵涮鎿Q為更有效的工作。 就排版而言，移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)的大小和對(duì)比度同樣重要（如果不是更多的話）。 在閱讀長(zhǎng)篇文章時(shí)，即使使用高質(zhì)量的手機(jī)屏幕，凝視仍然有些無(wú)聊。 確保文本大小正確，并設(shè)置行距和邊距以幫助提高可讀性。 結(jié)論是，桌面用戶在可用性方面所做的相同努力也應(yīng)集中在使移動(dòng)體驗(yàn)成為出色的體驗(yàn)上。
2.使用可用的屏幕空間
多列布局無(wú)處不在，但是文本密集型列通常不適用于最小的屏幕。 在這種情況下，將多列簡(jiǎn)單地轉(zhuǎn)換為單列是有意義的。 但是，當(dāng)我們談?wù)撈桨咫娔X甚至手機(jī)水平放置時(shí)，該欄仍然非常有效。 關(guān)鍵是值得花些功夫看看我們?nèi)绾尾拍茏詈玫乩矛F(xiàn)有的屏幕資源。 很多次，我們一直跳過(guò)這些中間分辨率，而只關(guān)注最小和最大的視口解決方案。 例如，在同一視圖中，以縱向放置的平板電腦應(yīng)不同于以手機(jī)放置的手機(jī)。 實(shí)施此類(lèi)策略的一種更簡(jiǎn)單的方法是使用CSS Flexbox。 正確配置后，通?？梢宰詣?dòng)為當(dāng)前視口提供最佳布局。 您可能需要通過(guò)媒體查詢進(jìn)行一些小的調(diào)整，但是值得進(jìn)行一些其他調(diào)整。
3.一切不必完全相同
容易陷入將單個(gè)設(shè)計(jì)元素放置在與移動(dòng)和桌面視口相同的相對(duì)位置的陷阱中。 盡管對(duì)一致性的要求值得稱(chēng)贊，但這種方法有時(shí)在較小的屏幕上適得其反。 例如，許多網(wǎng)站在其標(biāo)題中放置了諸如搜索表單或社交媒體圖標(biāo)之類(lèi)的項(xiàng)目。 在較大的屏幕上，它運(yùn)作良好，但通常會(huì)阻礙手機(jī)的主要內(nèi)容。 在輔助頁(yè)面上尤其如此，用戶可能實(shí)際上只是想閱讀頁(yè)面上的文本而不必?fù)?dān)心所有額外的垃圾。 除了將這些類(lèi)型的項(xiàng)目粘貼到網(wǎng)站標(biāo)題上之外，還有許多選項(xiàng)。 您可能考慮將這些項(xiàng)目塞入一個(gè)按鈕，該按鈕根據(jù)用戶要求顯示它們。 或者它們可以成為您實(shí)現(xiàn)的任何移動(dòng)導(dǎo)航解決方案的一部分。 同樣的事情可能適用于側(cè)邊欄之類(lèi)的功能。 其他元素可能被完全隱藏。 同樣，媒體查詢（可能還有一些條件代碼）也可以將這些項(xiàng)目放在移動(dòng)設(shè)備上更合適的位置。 最好決定要去哪里。
4.添加移動(dòng)設(shè)備特定的功能
在考慮響應(yīng)式設(shè)計(jì)策略時(shí)，您可以考慮添加一些技巧，以為移動(dòng)用戶帶來(lái)更高級(jí)別的便利。 這些項(xiàng)目通常不需要額外的努力即可實(shí)施。 但是它們可以大大提高可用性。 在支持觸摸功能的設(shè)備上瀏覽可能會(huì)帶來(lái)臺(tái)式機(jī)用戶不必面對(duì)的挑戰(zhàn)。 對(duì)于一個(gè)人來(lái)說(shuō)，必須從更長(zhǎng)的頁(yè)面向上滾動(dòng)以返回主導(dǎo)航是移動(dòng)設(shè)備上的主要挑戰(zhàn)。 您可以通過(guò)使用導(dǎo)航功能（在檢測(cè)到用戶向上滾動(dòng)時(shí)自動(dòng)顯示）來(lái)在某種程度上緩解這種情況。 另一種選擇是在每個(gè)頁(yè)面的底部都有一個(gè)很好的舊“返回首頁(yè)”鏈接。 對(duì)于鼓勵(lì)電話的企業(yè)，單擊“呼叫”按鈕可能是受歡迎的功能。 這可以采用傳統(tǒng)按鈕的形式，該按鈕的字面意思是“立即致電我們”，或提及整個(gè)站點(diǎn)超鏈接的電話號(hào)碼。 本質(zhì)上，您可以考慮幫助移動(dòng)用戶與組織進(jìn)行交互的所有措施。
5.移動(dòng)問(wèn)題
自適應(yīng)設(shè)計(jì)是一個(gè)強(qiáng)大的工具。 我們可以使用它在幾乎所有設(shè)備上為用戶提供最佳體驗(yàn)。 但是作為設(shè)計(jì)師，我們必須充分利用這些可能性。 首先，最重要的是確保移動(dòng)用戶可以輕松瀏覽和導(dǎo)航您的站點(diǎn)。 從那里，做出有關(guān)外觀和工作方法的最明智的設(shè)計(jì)決策。 如果您使用戶滿意，他們將更有可能再次回來(lái)。
蘇公網(wǎng)安備32030302000492號(hào)
