什么是響應(yīng)式界面
根據(jù)維基百科及其參考文獻(xiàn)，理論上，響應(yīng)式界面能夠適應(yīng)不同的設(shè)備。描述響應(yīng)式界面最著名的一句話就是“Content is like water”，翻譯成中文便是“如果將屏幕看作容器，那么內(nèi)容就像水一樣”。
為什么要設(shè)計(jì)響應(yīng)式界面
為何按老辦法為主流設(shè)計(jì)特殊版本呢？為什么要費(fèi)神地嘗試統(tǒng)一所有設(shè)備呢？
1. 即便是PC或Mac用戶，調(diào)查顯示只有一半的人會(huì)將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預(yù)知（http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/）；
2. 臺(tái)式機(jī)、投影、電視、筆記本、手機(jī)、平板、手表、VR……智能設(shè)備正在不斷增加，“主流設(shè)備”的概念正在消失；
3. 屏幕分辨率正飛速發(fā)展，同一張圖片在不同設(shè)備上看起來，大小可能天差地別。
4. 鼠標(biāo)、觸屏、筆、攝像頭手勢……不可預(yù)期的操控方式正在不斷出現(xiàn)。
響應(yīng)式界面的四個(gè)層次
1、同一頁面在不同大小和比例上看起來都應(yīng)該是舒適的；
2、同一頁面在不同分辨率上看起來都應(yīng)該是合理的；
4、同一頁面在不同操作方式（如鼠標(biāo)和觸屏）下，體驗(yàn)應(yīng)該是統(tǒng)一的；
5、同一頁面在不同類型的設(shè)備（手機(jī)、平板、電腦）上，交互方式應(yīng)該是符合習(xí)慣的。
設(shè)計(jì)師應(yīng)該清楚哪些
我用中英文搜了一下，發(fā)現(xiàn)網(wǎng)上關(guān)于響應(yīng)式界面的文章幾乎都是從前段的角度寫的，幾乎每篇都至少附帶有幾段CSS代碼。但是作為交互設(shè)計(jì)師，我在實(shí)際設(shè)計(jì)響應(yīng)式頁面時(shí)，卻又發(fā)現(xiàn)了很多問題。有些東西在我這個(gè)會(huì)寫前段代碼的人看來，都要思考很久，可想而知對(duì)于沒有任何前端基礎(chǔ)設(shè)計(jì)師來說，響應(yīng)式界面的很多細(xì)節(jié)應(yīng)該是不能輕易理解的。加之響應(yīng)式設(shè)計(jì)是大勢所趨，而國內(nèi)又明顯有一定落后，所以我才動(dòng)了寫這篇文章的念頭。
由于本人經(jīng)驗(yàn)有限，而且很多前段基礎(chǔ)并不是在這里寥寥幾筆就能說清，所以我在這里也只能畫個(gè)輪廓，希望能給感興趣的人提供一些基礎(chǔ)的幫助。如果遇到志同道合的人，希望能夠拋磚引玉，共同學(xué)習(xí)探討。
響應(yīng)式界面的基本規(guī)則
可伸縮的內(nèi)容區(qū)塊
可自由排布的內(nèi)容區(qū)塊
適應(yīng)頁面尺寸的邊距
能夠適應(yīng)比例變化的圖片
能夠自動(dòng)隱藏/部分顯示的內(nèi)容
能自動(dòng)折疊的導(dǎo)航和菜單
放棄使用像素作為尺寸單位
用dp尺寸等方法來確保頁面在分辨率相差很大的設(shè)備上，看起來也能保持一致。同時(shí)也要求提供的圖片應(yīng)該比預(yù)想的更大，才能適應(yīng)高分辨率的屏幕。否則，就會(huì)像我的Photoshop一樣出現(xiàn)一下這種情況：
依舊很難避免的問題
即便符合了基本規(guī)則，實(shí)際設(shè)計(jì)中還是會(huì)有些問題難以避免。
百分比并不好用
剛開始設(shè)計(jì)響應(yīng)式界面時(shí)，很容易把頁面百分比是做解決一切問題的途徑，然而根據(jù)我的經(jīng)驗(yàn)，百分比其實(shí)很不好用，因?yàn)椋?/p>
1. 百分比很容易讓整個(gè)頁面看起來“軟趴趴”的，一切寬度、邊距都處在不斷的變化中，用起來并不舒服；
2. 文字大小、邊框、陰影、圓角等元素并不方便用百分比確定。這樣以來，有的東西能根據(jù)頁面百分比來變化，有些卻又不能，混雜起來，能夠毀了整個(gè)視覺設(shè)計(jì)。
3. 當(dāng)頁面尺寸變化巨大時(shí)（想想只能手表和投影儀），百分比完全不能解決可讀性和易用性的問題。
懸停狀態(tài)可能需要放棄
理想中的響應(yīng)式頁面應(yīng)該適應(yīng)任何操作方式，所以鼠標(biāo)懸停這個(gè)在觸屏設(shè)備不存在的狀態(tài)，可能要被整個(gè)放棄了?？紤]到對(duì)于鼠標(biāo)用戶來說，懸停反饋依舊很重要，所以懸停效果可以保留，只是不能用懸停狀態(tài)來展示關(guān)鍵信息。
符合主流設(shè)備用戶的心理預(yù)期
電腦用戶期待在頁面上看到更加豐富的內(nèi)容，而手機(jī)用戶卻期待頁面能專注于單一的任務(wù)。并且手機(jī)上網(wǎng)頁的布局習(xí)慣和電腦上網(wǎng)頁的布局習(xí)慣也有不同。這點(diǎn)不太好把握，只能多多注意，盡量可能制定出分別符合各方習(xí)慣的規(guī)則。
未經(jīng)允許請(qǐng)勿轉(zhuǎn)載
