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