響應式設計的概念

響應式設計的概念最早由Ehan Marcotte在2010年5月份的文章 <響應式網頁設計>中提出。 他強調：頁面可以根據用戶的設備環境，包括系統，分辨率，屏幕尺寸等等因素，進行自發式調整，提供更適合當前環境的閱讀和操作體驗，對已有和未來即將出現的新設備有一定的適應能力。可以說響應式設計能夠完美解決文章開頭提到的問題，小到智能手表的屏幕，大到電視顯示屏，只需要一套代碼就能夠完美兼容，實用且高效。

當我們搜索有關響應式設計的資料時卻發現大多數教程都是針對前端開發工程師撰寫的，有著許多難懂的專業名詞，讓人望而卻步。

以下筆者通過案例，簡單介紹有關響應式設計的技巧。

響應式設計的技巧

Ehan Marcotte的文章中提到了三個概念：流動布局（Fluid grids）、媒介查詢（Media queries）和彈性圖片（Scalable images）。這些概念原本指的是實現響應式的一些技術手段，從設計師的角度，我們可以簡化為以下兩點。

一、分段響應

通過拖動瀏覽器的寬度，我們會發現響應式網頁會隨寬度的改變自動調整布局方式。

需要注意的是，每當瀏覽器達到一個寬度節點，網頁布局就會相應發生較大變化，這就是分段響應。這里我們又需要注意兩個要點：

– 寬度節點應該如何確定？

– 達到寬度節點時頁面布局應該如何變化？

1.寬度節點應該如何確定？

寬度節點來源于前文提到的媒體查詢（Media queries），是前端工程師用簡單的方法，來獲取不同設備的特征，例如設備的寬度/高度，窗口的寬度/高度，設備的手持方向，分辨率等。設計時也可以采用相同的思路，參考網站用戶的設備分辨率數據，比如手機尺寸、平板電腦尺寸及桌面顯示器尺寸，確保常見設備寬度能夠落入到某一設計范圍之內。

2.達到寬度節點時頁面布局應該如何變化？

頁面布局的變化可以簡單歸納為三點：內容增減、布局調整、樣式調整。

內容增減–當瀏覽器寬度較大時，有足夠的空間展示更多的頁面內容。隨著瀏覽器寬度的減小，為了使有限的頁面不至于擁擠，就不得不對原有內容進行部分隱藏以滿足整體布局的合理性。

布局調整–如同前文提到的，當頁面空間被壓縮時，其布局方式也需要相應變化，最常見的就是布局的行列數發生改變。

樣式變更–頁面中的有些模塊，例如導航欄等不能簡單的只隱藏部分內容來適應瀏覽器的變化，這時就需要調整其樣式，將整個模塊變更為其他形式展現，以方便小尺寸設備的使用體驗。

總的來說，分段響應就是頁面針對不同的瀏覽器寬度展示不同的布局方式。每個組件都可以根據具體使用場景應用不同的變化類型。

二、動態布局

解決了分段響應的規則后，接下來需要制定瀏覽器在寬度節點之間變化時，組件該如何變動，即動態布局。

這里再次搬出Ehan Marcotte的文章所提到的流動布局的概念，原特指以百分比為度量單位的布局技術實現方式。這里就不對如流動布局、彈性布局、流體柵格等各種概念做一一說明。筆者就此統為一個大的概念：在響應式設計的布局中，不再以像素（px）作為唯一單位，而是采用百分比或者混合百分比、像素為單位，設計出更具靈活性的布局方式。

三、其他需要注意的點

首先，要注意的是什么情況下適合采用響應式設計？一切設計的最終目的都應該圍繞著產品體驗這一核心。為了做響應式設計而做響應式設計，往往得不償失。

其次，在搞清楚產品本身的核心用戶體驗之后，選取你的用戶群體所使用的硬件設備，這個時候你應該了解每種設備所使用的場景，設備使用的環境和場景是設計的重要依據。

最后，并非所有的內容都符合不同設備的使用場景，比如智能手表就不適合展示大量的文本內容。你的產品所覆蓋的設備組當中，每種設備的使用場景不同，應該匹配的用戶體驗也不一樣。比如移動端用戶和桌面端用戶的需求就是不同的，場景差異也很大。

以上就是關于響應式設計的分享，希望對你有用。

本文總結了16種UX和UI的設計策略，這些策略可對于已上線的產品提供即時的增長效果，可以為更多的用戶帶來更卓越的產品使用體驗。

1、效果最好的CTA（Call-To-Action）

如果您在操作中添加了一些上下文信息，那么號召性用語按鈕的效果將始終更好，但是請盡量不要超過三個字。如上圖案例所示，您可以使用“添加到購物車”來代替“添加”，或者使用“立即購買“按鈕來替代“購買”。

2、移動端字符

針對移動設備可讀性的最佳可用性原則是每行不超過9個字或50至60個字符，這項設計規則已經經過了大量的測試檢驗。

3、移動端CTA

麻省理工學院觸摸實驗室對人的指尖的研究得出結論，對于大多數成年人，食指的平均寬度為16-20毫米，這使得在移動端設備上，理想的按鈕尺寸為40-50像素。

4、單選按鈕和下拉清單

不確定何時使用單選按鈕以及何時使用下拉菜單的時候，謹記以下UX規則：對少于5個選項使用單選按鈕樣式，對超過5個選項使用下拉菜單。

5、分頁或無限滾動

許多用戶體驗設計師傾向于使用無限滾動來使他們的設計更加時尚現代。但是，這對于嘗試查找正確內容的用戶不起作用。對于電子商務或數據豐富的網站，面向目標的UX應該使用無限滾動進行內容探索和分頁。

6、默認選擇

鍵入和額外的單擊具有很高的交互成本。要提高表單轉換率，請始終給予默認選擇選項，以便用戶進行最頻繁的交互選擇。

7、適度使用圖標

過度使用圖標是一個UI錯誤，通常會損害產品的使用體驗。圖標的使用應始終具有強烈的含義，永遠不要將功能隱藏在模糊的圖標后面。UX黃金法則：如果標簽不足以說明操作，請使用圖標來代替。

8、錯誤消息

為了提高轉化率，請務必提供糾正錯誤的建議，以減輕用戶的認知負擔。保持人性化和幽默感，避免在用戶面對錯誤界面或錯誤消息時流失。

9、清單或單選按鈕？

對于多選選擇，請使用清單選項，對單選選擇，使用單選按鈕。

10、使用占位符（Placeholder）顯示示例

使用占位符副本可設置更好的上下文并增加表單轉換。但是您應該更進一步-使用示例，而不是必需的字段名稱。例如，插入示例電話號碼（+44 757 869…），而不要輸入“電話號碼”或“ hi@pony.studio”而不是“電子郵件”。

11、手機上的可點擊區域更廣

移動設備上較寬的按鈕和可點擊區域始終比微型UI組件性能更好。因此，如果設計允許，請始終使用比移動設備上的單選按鈕，下拉列表或復制鏈接更大的視覺效果。

12、使用顏色進行分類

用于重要分類的基于顏色的標簽減少了認知負擔。作為設計師，我們始終可以在關鍵設計屏幕上使用一些顏色，但是不要過度使用它，因為它可能產生相反的效果并弄亂UX的層次結構。

13、表單字段按鈕

始終對文本字段旁邊的按鈕使用不同的顏色，以確保它不會與文本輸入區域融合在一起。

14、完美的線條高度

我們都希望字體大小和行距之間能有一個完美的比例，通用UX規則是-保持行高比字符高20–30％，以提高可讀性。

15、合適的字體大小

界面中的字體大小可以區分文字內容的層次，提升視覺效果。但是，為了避免文字出現模糊混亂的情況，設計師可以使用行高1.5的16px字體，這是進行正文復制的最安全的選擇。

16、重疊的圖像使外觀更優美

如果您想給設計增添些別致的色彩，請選擇重疊的圖片，尤其是在設計用戶個人資料頁面或卡片時。為確保視覺平衡，請始終保持圖像邊框與背景色匹配。

這16個有助于提升產品增長的技巧，你get到了嗎？請分享本文給更多小伙伴們一起學習吧！

作者 | 美國交互設計資訊
來源公眾號 | 美國交互設計資訊