導航

立即咨詢:400-090-1128添加微信
News
常見問題
響應式網站界面設計要知道哪些?
作者:時間:2019/11/5 9:11:09閱讀:

作為交互設計師,其實我們在設計響應式頁面時,會發現了很多問題。響應式界面的很多細節應該是不那麼容易被理解的。那麼下面詳細介紹響應式頁面的基礎内容。

什麼是響應式界面

根據維基百科及其參考文獻,理論上,響應式界面能夠适應不同的設備。描述響應式界面著名的一句話就是“Content is like water”,翻譯成中文便是“如果将屏幕看作容器,那麼内容就像水一樣”。

為什麼要設計響應式界面

為何按老辦法為主流設計特殊版本呢?為什麼要費神地嘗試統一所有設備呢?

1. 即便是PC或Mac用戶,調查顯示隻有一半的人會将浏覽器全屏顯示,而剩下的一般人使用多大的浏覽器,這很難預知。

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

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

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

響應式界面的四個層次

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

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

3、同一頁面在不同操作方式(如鼠标和觸屏)下,體驗應該是統一的;

4、同一頁面在不同類型的設備(手機、平闆、電腦)上,交互方式應該是符合習慣的。

響應式界面的基本規則

可伸縮的内容區塊

内容區塊的在一定程度上能夠自動調整,以确保填滿整個頁面

可自由排布的内容區塊

當頁面尺寸變動較大時,能夠減少/增加排布的列數

适應頁面尺寸的邊距

到頁面尺寸發生更大變化時,區塊的邊距也應該變化

能夠适應比例變化的圖片

對于常見的寬度調整,圖片在隐去兩側部分時,依舊保持美觀可用

能夠自動隐藏/部分顯示的内容

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

能自動折疊的導航和菜單

展開還是收起,應該根據頁面尺寸來判斷

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

依舊很難避免的問題

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

百分比并不好用

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

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

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

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

懸停狀态可能需要放棄

理想中的響應式頁面應該适應任何操作方式,所以鼠标懸停這個在觸屏設備不存在的狀态,可能要被整個放棄了。考慮到對于鼠标用戶來說,懸停反饋依舊很重要,所以懸停效果可以保留,隻是不能用懸停狀态來展示關鍵信息。

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

電腦用戶期待在頁面上看到更加豐富的内容,而手機用戶卻期待頁面能專注于單一的任務。并且手機上網頁的布局習慣和電腦上網頁的布局習慣也有不同。這點不太好把握,隻能多多注意,盡量可能制定出分别符合各方習慣的規則。


立即咨詢我們吧
全年免費維護,終身技術支持!
13812009346 QQ 在線留言