響應(yīng)式設(shè)計的概念
響應(yīng)式設(shè)計的概念最早由Ehan Marcotte在2010年5月份的文章 <響應(yīng)式網(wǎng)頁設(shè)計>中提出。 他強調(diào)：頁面可以根據(jù)用戶的設(shè)備環(huán)境，包括系統(tǒng)，分辨率，屏幕尺寸等等因素，進行自發(fā)式調(diào)整，提供更適合當(dāng)前環(huán)境的閱讀和操作體驗，對已有和未來即將出現(xiàn)的新設(shè)備有一定的適應(yīng)能力。可以說響應(yīng)式設(shè)計能夠完美解決文章開頭提到的問題，小到智能手表的屏幕，大到電視顯示屏，只需要一套代碼就能夠完美兼容，實用且高效。
當(dāng)我們搜索有關(guān)響應(yīng)式設(shè)計的資料時卻發(fā)現(xiàn)大多數(shù)教程都是針對前端開發(fā)工程師撰寫的，有著許多難懂的專業(yè)名詞，讓人望而卻步。
以下筆者通過案例，簡單介紹有關(guān)響應(yīng)式設(shè)計的技巧。
響應(yīng)式設(shè)計的技巧
Ehan Marcotte的文章中提到了三個概念：流動布局（Fluid grids）、媒介查詢（Media queries）和彈性圖片（Scalable images）。這些概念原本指的是實現(xiàn)響應(yīng)式的一些技術(shù)手段，從設(shè)計師的角度，我們可以簡化為以下兩點。
一、分段響應(yīng)
通過拖動瀏覽器的寬度，我們會發(fā)現(xiàn)響應(yīng)式網(wǎng)頁會隨寬度的改變自動調(diào)整布局方式。
需要注意的是，每當(dāng)瀏覽器達到一個寬度節(jié)點，網(wǎng)頁布局就會相應(yīng)發(fā)生較大變化，這就是分段響應(yīng)。這里我們又需要注意兩個要點：
– 寬度節(jié)點應(yīng)該如何確定？
– 達到寬度節(jié)點時頁面布局應(yīng)該如何變化？
1.寬度節(jié)點應(yīng)該如何確定？
寬度節(jié)點來源于前文提到的媒體查詢（Media queries），是前端工程師用簡單的方法，來獲取不同設(shè)備的特征，例如設(shè)備的寬度/高度，窗口的寬度/高度，設(shè)備的手持方向，分辨率等。設(shè)計時也可以采用相同的思路，參考網(wǎng)站用戶的設(shè)備分辨率數(shù)據(jù)，比如手機尺寸、平板電腦尺寸及桌面顯示器尺寸，確保常見設(shè)備寬度能夠落入到某一設(shè)計范圍之內(nèi)。
2.達到寬度節(jié)點時頁面布局應(yīng)該如何變化？
頁面布局的變化可以簡單歸納為三點：內(nèi)容增減、布局調(diào)整、樣式調(diào)整。
內(nèi)容增減–當(dāng)瀏覽器寬度較大時，有足夠的空間展示更多的頁面內(nèi)容。隨著瀏覽器寬度的減小，為了使有限的頁面不至于擁擠，就不得不對原有內(nèi)容進行部分隱藏以滿足整體布局的合理性。
布局調(diào)整–如同前文提到的，當(dāng)頁面空間被壓縮時，其布局方式也需要相應(yīng)變化，最常見的就是布局的行列數(shù)發(fā)生改變。
樣式變更–頁面中的有些模塊，例如導(dǎo)航欄等不能簡單的只隱藏部分內(nèi)容來適應(yīng)瀏覽器的變化，這時就需要調(diào)整其樣式，將整個模塊變更為其他形式展現(xiàn)，以方便小尺寸設(shè)備的使用體驗。
總的來說，分段響應(yīng)就是頁面針對不同的瀏覽器寬度展示不同的布局方式。每個組件都可以根據(jù)具體使用場景應(yīng)用不同的變化類型。
二、動態(tài)布局
解決了分段響應(yīng)的規(guī)則后，接下來需要制定瀏覽器在寬度節(jié)點之間變化時，組件該如何變動，即動態(tài)布局。
這里再次搬出Ehan Marcotte的文章所提到的流動布局的概念，原特指以百分比為度量單位的布局技術(shù)實現(xiàn)方式。這里就不對如流動布局、彈性布局、流體柵格等各種概念做一一說明。筆者就此統(tǒng)為一個大的概念：在響應(yīng)式設(shè)計的布局中，不再以像素（px）作為唯一單位，而是采用百分比或者混合百分比、像素為單位，設(shè)計出更具靈活性的布局方式。
三、其他需要注意的點
首先，要注意的是什么情況下適合采用響應(yīng)式設(shè)計？一切設(shè)計的最終目的都應(yīng)該圍繞著產(chǎn)品體驗這一核心。為了做響應(yīng)式設(shè)計而做響應(yīng)式設(shè)計，往往得不償失。
其次，在搞清楚產(chǎn)品本身的核心用戶體驗之后，選取你的用戶群體所使用的硬件設(shè)備，這個時候你應(yīng)該了解每種設(shè)備所使用的場景，設(shè)備使用的環(huán)境和場景是設(shè)計的重要依據(jù)。
最后，并非所有的內(nèi)容都符合不同設(shè)備的使用場景，比如智能手表就不適合展示大量的文本內(nèi)容。你的產(chǎn)品所覆蓋的設(shè)備組當(dāng)中，每種設(shè)備的使用場景不同，應(yīng)該匹配的用戶體驗也不一樣。比如移動端用戶和桌面端用戶的需求就是不同的，場景差異也很大。
以上就是關(guān)于響應(yīng)式設(shè)計的分享，希望對你有用。
]]>本文總結(jié)了16種UX和UI的設(shè)計策略，這些策略可對于已上線的產(chǎn)品提供即時的增長效果，可以為更多的用戶帶來更卓越的產(chǎn)品使用體驗。
1、效果最好的CTA（Call-To-Action）
如果您在操作中添加了一些上下文信息，那么號召性用語按鈕的效果將始終更好，但是請盡量不要超過三個字。如上圖案例所示，您可以使用“添加到購物車”來代替“添加”，或者使用“立即購買“按鈕來替代“購買”。
2、移動端字符
針對移動設(shè)備可讀性的最佳可用性原則是每行不超過9個字或50至60個字符，這項設(shè)計規(guī)則已經(jīng)經(jīng)過了大量的測試檢驗。
3、移動端CTA
麻省理工學(xué)院觸摸實驗室對人的指尖的研究得出結(jié)論，對于大多數(shù)成年人，食指的平均寬度為16-20毫米，這使得在移動端設(shè)備上，理想的按鈕尺寸為40-50像素。
4、單選按鈕和下拉清單
不確定何時使用單選按鈕以及何時使用下拉菜單的時候，謹記以下UX規(guī)則：對少于5個選項使用單選按鈕樣式，對超過5個選項使用下拉菜單。
5、分頁或無限滾動
許多用戶體驗設(shè)計師傾向于使用無限滾動來使他們的設(shè)計更加時尚現(xiàn)代。但是，這對于嘗試查找正確內(nèi)容的用戶不起作用。對于電子商務(wù)或數(shù)據(jù)豐富的網(wǎng)站，面向目標(biāo)的UX應(yīng)該使用無限滾動進行內(nèi)容探索和分頁。
6、默認選擇
鍵入和額外的單擊具有很高的交互成本。要提高表單轉(zhuǎn)換率，請始終給予默認選擇選項，以便用戶進行最頻繁的交互選擇。
7、適度使用圖標(biāo)
過度使用圖標(biāo)是一個UI錯誤，通常會損害產(chǎn)品的使用體驗。圖標(biāo)的使用應(yīng)始終具有強烈的含義，永遠不要將功能隱藏在模糊的圖標(biāo)后面。UX黃金法則：如果標(biāo)簽不足以說明操作，請使用圖標(biāo)來代替。
8、錯誤消息
為了提高轉(zhuǎn)化率，請務(wù)必提供糾正錯誤的建議，以減輕用戶的認知負擔(dān)。保持人性化和幽默感，避免在用戶面對錯誤界面或錯誤消息時流失。
9、清單或單選按鈕？
對于多選選擇，請使用清單選項，對單選選擇，使用單選按鈕。
10、使用占位符（Placeholder）顯示示例
使用占位符副本可設(shè)置更好的上下文并增加表單轉(zhuǎn)換。但是您應(yīng)該更進一步-使用示例，而不是必需的字段名稱。例如，插入示例電話號碼（+44 757 869…），而不要輸入“電話號碼”或“ hi@pony.studio”而不是“電子郵件”。
11、手機上的可點擊區(qū)域更廣
移動設(shè)備上較寬的按鈕和可點擊區(qū)域始終比微型UI組件性能更好。因此，如果設(shè)計允許，請始終使用比移動設(shè)備上的單選按鈕，下拉列表或復(fù)制鏈接更大的視覺效果。
12、使用顏色進行分類
用于重要分類的基于顏色的標(biāo)簽減少了認知負擔(dān)。作為設(shè)計師，我們始終可以在關(guān)鍵設(shè)計屏幕上使用一些顏色，但是不要過度使用它，因為它可能產(chǎn)生相反的效果并弄亂UX的層次結(jié)構(gòu)。
13、表單字段按鈕
始終對文本字段旁邊的按鈕使用不同的顏色，以確保它不會與文本輸入?yún)^(qū)域融合在一起。
14、完美的線條高度
我們都希望字體大小和行距之間能有一個完美的比例，通用UX規(guī)則是-保持行高比字符高20–30％，以提高可讀性。
15、合適的字體大小
界面中的字體大小可以區(qū)分文字內(nèi)容的層次，提升視覺效果。但是，為了避免文字出現(xiàn)模糊混亂的情況，設(shè)計師可以使用行高1.5的16px字體，這是進行正文復(fù)制的最安全的選擇。
16、重疊的圖像使外觀更優(yōu)美
如果您想給設(shè)計增添些別致的色彩，請選擇重疊的圖片，尤其是在設(shè)計用戶個人資料頁面或卡片時。為確保視覺平衡，請始終保持圖像邊框與背景色匹配。
這16個有助于提升產(chǎn)品增長的技巧，你get到了嗎？請分享本文給更多小伙伴們一起學(xué)習(xí)吧！
作者 | 美國交互設(shè)計資訊
來源公眾號 | 美國交互設(shè)計資訊