響應(yīng)式網(wǎng)站界面設(shè)計(jì)要知道哪些？

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

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

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

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

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

1. 即便是PC或Mac用戶，調(diào)查顯示只有一半的人會(huì)將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，這很難預(yù)知。

2. 臺(tái)式機(jī)、投影、電視、筆記本、手機(jī)、平板、手表、VR……智能設(shè)備正在不斷增加，“主流設(shè)備”的概念正在消失。

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

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

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

1、同一頁(yè)面在不同大小和比例上看起來(lái)都應(yīng)該是舒適的；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

放棄使用像素作為尺寸單位，用dp尺寸等方法來(lái)確保頁(yè)面在分辨率相差很大的設(shè)備上，看起來(lái)也能保持一致。同時(shí)也要求提供的圖片應(yīng)該比預(yù)想的更大，才能適應(yīng)高分辨率的屏幕。否則，就會(huì)像我的Photoshop一樣出現(xiàn)一下這種情況：

依舊很難避免的問(wèn)題

即便符合了基本規(guī)則，實(shí)際設(shè)計(jì)中還是會(huì)有些問(wèn)題難以避免。

百分比并不好用

剛開(kāi)始設(shè)計(jì)響應(yīng)式界面時(shí)，很容易把頁(yè)面百分比是做解決一切問(wèn)題的途徑，然而根據(jù)我的經(jīng)驗(yàn)，百分比其實(shí)很不好用，因?yàn)椋?/p>

1. 百分比很容易讓整個(gè)頁(yè)面看起來(lái)“軟趴趴”的，一切寬度、邊距都處在不斷的變化中，用起來(lái)并不舒服；

2. 文字大小、邊框、陰影、圓角等元素并不方便用百分比確定。這樣以來(lái)，有的東西能根據(jù)頁(yè)面百分比來(lái)變化，有些卻又不能，混雜起來(lái)，能夠毀了整個(gè)視覺(jué)設(shè)計(jì)。

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

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

理想中的響應(yīng)式頁(yè)面應(yīng)該適應(yīng)任何操作方式，所以鼠標(biāo)懸停這個(gè)在觸屏設(shè)備不存在的狀態(tài)，可能要被整個(gè)放棄了?？紤]到對(duì)于鼠標(biāo)用戶來(lái)說(shuō)，懸停反饋依舊很重要，所以懸停效果可以保留，只是不能用懸停狀態(tài)來(lái)展示關(guān)鍵信息。

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

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

網(wǎng)頁(yè)標(biāo)題：響應(yīng)式網(wǎng)站界面設(shè)計(jì)要知道哪些？
文章路徑：http://bm7419.com/news8/324158.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、搜索引擎優(yōu)化、建站公司、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)