響應(yīng)式網(wǎng)站的界面設(shè)計

時間：2023-09-23 23:42:01 | 來源：網(wǎng)站運營

時間：2023-09-23 23:42:01 來源：網(wǎng)站運營

響應(yīng)式網(wǎng)站的界面設(shè)計：作為交互設(shè)計師，其實我們在設(shè)計響應(yīng)式頁面時，會發(fā)現(xiàn)了很多問題。響應(yīng)式界面的很多細節(jié)應(yīng)該是不那么容易被理解的。那么下面詳細介紹響應(yīng)式頁面的基礎(chǔ)內(nèi)容。

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

根據(jù)維基百科及其參考文獻，理論上，響應(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ù)知。

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í)慣的。

響應(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)一下這種情況：

依舊很難避免的問題

即便符合了基本規(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ī)則。

易點科技成立于2009年，一直專注于IT顧問咨詢、信息平臺系統(tǒng)開發(fā)、企業(yè)網(wǎng)絡(luò)方案解決與運營。服務(wù)內(nèi)容包含pc+手機響應(yīng)網(wǎng)站建設(shè)、B2C購物商城定制開發(fā)、微信公眾號定制開發(fā)、企業(yè)管理小型系統(tǒng)定制開發(fā)。擁有先進的網(wǎng)頁設(shè)計制作理念、可靠的質(zhì)量保障體系。十年專注！已服務(wù)過數(shù)百家知名品牌企業(yè),積累了眾多行業(yè)標(biāo)桿級的經(jīng)典案例。