如果將屏幕看作容器蛉加，那么內(nèi)容就像水一樣

什么是響應(yīng)式界面

根據(jù)維基百科及其參考文獻(xiàn)率触，理論上锭硼，響應(yīng)式界面能夠適應(yīng)不同的設(shè)備预柒。描述響應(yīng)式界面最著名的一句話就是“Content is like water”舒裤，翻譯成中文便是“如果將屏幕看作容器喳资，那么內(nèi)容就像水一樣”。

為什么要設(shè)計響應(yīng)式界面

為何按老辦法為主流設(shè)計特殊版本呢腾供？為什么要費神地嘗試統(tǒng)一所有設(shè)備呢仆邓？

1. 即便是PC或Mac用戶，調(diào)查顯示只有一半的人會將瀏覽器全屏顯示伴鳖，而剩下的一般人使用多大的瀏覽器节值，很難預(yù)知（http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/）；

2. 臺式機榜聂、投影搞疗、電視、筆記本须肆、手機匿乃、平板桩皿、手表、VR……智能設(shè)備正在不斷增加幢炸，“主流設(shè)備”的概念正在消失泄隔；

3. 屏幕分辨率正飛速發(fā)展，同一張圖片在不同設(shè)備上看起來宛徊，大小可能天差地別佛嬉。

4. 鼠標(biāo)、觸屏闸天、筆暖呕、攝像頭手勢……不可預(yù)期的操控方式正在不斷出現(xiàn)。

響應(yīng)式界面的四個層次

1号枕、同一頁面在不同大小和比例上看起來都應(yīng)該是舒適的缰揪；

2、同一頁面在不同分辨率上看起來都應(yīng)該是合理的葱淳；

4钝腺、同一頁面在不同操作方式（如鼠標(biāo)和觸屏）下，體驗應(yīng)該是統(tǒng)一的赞厕；

5艳狐、同一頁面在不同類型的設(shè)備（手機、平板皿桑、電腦）上毫目，交互方式應(yīng)該是符合習(xí)慣的。

設(shè)計師應(yīng)該清楚哪些

我用中英文搜了一下诲侮，發(fā)現(xiàn)網(wǎng)上關(guān)于響應(yīng)式界面的文章幾乎都是從前段的角度寫的镀虐，幾乎每篇都至少附帶有幾段CSS代碼。但是作為交互設(shè)計師沟绪，我在實際設(shè)計響應(yīng)式頁面時刮便，卻又發(fā)現(xiàn)了很多問題。有些東西在我這個會寫前段代碼的人看來绽慈，都要思考很久恨旱，可想而知對于沒有任何前端基礎(chǔ)設(shè)計師來說，響應(yīng)式界面的很多細(xì)節(jié)應(yīng)該是不能輕易理解的坝疼。加之響應(yīng)式設(shè)計是大勢所趨搜贤，而國內(nèi)又明顯有一定落后，所以我才動了寫這篇文章的念頭钝凶。

由于本人經(jīng)驗有限仪芒，而且很多前段基礎(chǔ)并不是在這里寥寥幾筆就能說清，所以我在這里也只能畫個輪廓，希望能給感興趣的人提供一些基礎(chǔ)的幫助桌硫。如果遇到志同道合的人夭咬，希望能夠拋磚引玉，共同學(xué)習(xí)探討铆隘。

響應(yīng)式界面的基本規(guī)則

可伸縮的內(nèi)容區(qū)塊

內(nèi)容區(qū)塊的在一定程度上能夠自動調(diào)整，以確保填滿整個頁面

可自由排布的內(nèi)容區(qū)塊

當(dāng)頁面尺寸變動較大時南用，能夠減少/增加排布的列數(shù)

適應(yīng)頁面尺寸的邊距

到頁面尺寸發(fā)生更大變化時膀钠，區(qū)塊的邊距也應(yīng)該變化

能夠適應(yīng)比例變化的圖片

對于常見的寬度調(diào)整，圖片在隱去兩側(cè)部分時裹虫，依舊保持美觀可用

能夠自動隱藏/部分顯示的內(nèi)容

如在電腦上顯示的的大段描述文本肿嘲，在手機上就只能少量顯示或全部隱藏

能自動折疊的導(dǎo)航和菜單

展開還是收起，應(yīng)該根據(jù)頁面尺寸來判斷

放棄使用像素作為尺寸單位

用dp尺寸等方法來確保頁面在分辨率相差很大的設(shè)備上筑公，看起來也能保持一致雳窟。同時也要求提供的圖片應(yīng)該比預(yù)想的更大，才能適應(yīng)高分辨率的屏幕匣屡。否則封救，就會像我的Photoshop一樣出現(xiàn)一下這種情況：

因為我的筆記本電腦的分辨率太高，Photoshop看起來就是這個樣子（字都很難看清）

依舊很難避免的問題

即便符合了基本規(guī)則捣作，實際設(shè)計中還是會有些問題難以避免誉结。

百分比并不好用

剛開始設(shè)計響應(yīng)式界面時，很容易把頁面百分比是做解決一切問題的途徑券躁，然而根據(jù)我的經(jīng)驗惩坑，百分比其實很不好用，因為：

1. 百分比很容易讓整個頁面看起來“軟趴趴”的也拜，一切寬度以舒、邊距都處在不斷的變化中，用起來并不舒服慢哈；

2. 文字大小蔓钟、邊框、陰影岸军、圓角等元素并不方便用百分比確定奋刽。這樣以來，有的東西能根據(jù)頁面百分比來變化艰赞，有些卻又不能佣谐，混雜起來，能夠毀了整個視覺設(shè)計方妖。

3. 當(dāng)頁面尺寸變化巨大時（想想只能手表和投影儀）狭魂，百分比完全不能解決可讀性和易用性的問題。

懸停狀態(tài)可能需要放棄

理想中的響應(yīng)式頁面應(yīng)該適應(yīng)任何操作方式，所以鼠標(biāo)懸停這個在觸屏設(shè)備不存在的狀態(tài)雌澄，可能要被整個放棄了斋泄。考慮到對于鼠標(biāo)用戶來說镐牺，懸停反饋依舊很重要炫掐，所以懸停效果可以保留，只是不能用懸停狀態(tài)來展示關(guān)鍵信息睬涧。

符合主流設(shè)備用戶的心理預(yù)期

電腦用戶期待在頁面上看到更加豐富的內(nèi)容募胃，而手機用戶卻期待頁面能專注于單一的任務(wù)。并且手機上網(wǎng)頁的布局習(xí)慣和電腦上網(wǎng)頁的布局習(xí)慣也有不同畦浓。這點不太好把握痹束，只能多多注意，盡量可能制定出分別符合各方習(xí)慣的規(guī)則讶请。

未經(jīng)允許請勿轉(zhuǎn)載