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

什么是響應式界面

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

為什么要設計響應式界面

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

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

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

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

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

響應式界面的四個層次

1、同一頁面在不同大小和比例上看起來都應該是舒適的；

2、同一頁面在不同分辨率上看起來都應該是合理的；

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

4、同一頁面在不同類型的設備（手機、平板、電腦）上，交互方式應該是符合習慣的。

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

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

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

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

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

適應頁面尺寸的邊距

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

能夠適應比例變化的圖片

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

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

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

能自動折疊的導航和菜單

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

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

依舊很難避免的問題

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

百分比并不好用

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

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

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

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

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

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

符合主流設備用戶的心理預期

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

網(wǎng)頁標題：響應式網(wǎng)站界面設計要知道哪些？
文章路徑：http://www.rwnh.cn/news8/324158.html

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

廣告

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