莫b
響應式布局這個名詞相信大部分設計師都不陌生,也能清楚知道它的基本呈現效果。但具體操作及與開發人員協作時,可能會遇到很多問題。尋找資料時發現大多數教程都是針對前端開發工程師打造的,并伴隨著許多晦澀難懂的專業名詞,讓人難以理解。
本篇文章希望能通過簡單明了的文字及圖文介紹,對我們設計響應式網站時經常會出現的問題進行清晰的說明。

場景一提問:自適應與響應式都是什么,又有什么區別?

A:很多人會對響應式布局和自適應式布局產生混淆,確實他們的原理是非常相似的,都是檢測設備,根據不同的設備采用不同的css。
至于他們的區別,有個很簡單的方法:同一個頁面在不同尺寸的屏幕上訪問時,看網址是否一樣,只有一個網址為響應式,有多個不同的網址為自適應。另外的區分點是:是否需要一對一的設計界面,是則為自適應。例如下圖:
上圖中為響應式與自適應的區別

 

那么,自適應與響應式如何選擇用哪個呢?

A:如果頁面功能不多,用戶交互少,不需要經常升級,響應式設計從運營的難易和維護的便利性考慮會更好,只要搞定網頁端,其他的也都搞定了;如果從頁面個性化多功能方面考慮,自適應設計更合適,因為這樣可以更好的為用戶提供功能全面,用戶體驗更好的界面。例如功能復雜、用戶交互頻繁的網站、電商類網站,用戶量較大的網站選擇自適應更合適。

 

場景二提問:做響應式頁面的條件是什么呢?

A:響應式可以響應的前提有兩點:
  • 1.頁面布局具有規律性,必須建立靈活的網格基礎,元素寬高可用百分比代替固定數值;
  • 2.網頁圖片必須是可伸縮的(頁面中圖片不固定寬/高)。
這兩點也是柵格系統本身的典型特點,所以利用柵格系統進行響應式的設計是順理成章的,也比較高效快捷,所以響應式與柵格化天生一對好搭檔。
網格是創建一個設計精良網站的關鍵。在《秩序之美-網頁中的網格設計》一書中,他解釋成功設計的目的是“在混沌中創造秩序”。現在比較流行的8點柵格,就是結合基準網格(8pt)和縱向柵格進行設計。
那么使用8點柵格進行設計的價值是什么呢?
  • 對于設計師:提升效率、減少決策、同時讓元素之間保持一種協調的節奏。
  • 對于團隊:設計師和前端工程師之間更容易達成默契,前端可以較輕松地用肉眼丈量8的倍數,而不是趴在那一個一個數像素。
  • 對于用戶:這讓他們信賴的品牌得以保持高質量的一致性體驗。并且在自己的設備上也不會出現模糊的半像素偏移。

 

場景三提問:常見的動態布局方式有哪些呢

A:包括固定布局、流體布局、混合布局、響應式布局。
另外,布局響應式時,模塊結構如何變化呢,簡單介紹幾種常見的變化形式:?

 

? ? ·?布局不變,模塊內容左右伸縮(見下圖)
這個頁面的響應效果比較簡單,就是等比縮放就好。

 

·?布局不變,模塊內容換行平鋪(見下圖)
有的時候為了節省頁面空間,將模塊進行了平鋪設計。
??? ·?布局不變,模塊內容增加減少(見下圖)

 

最常見的的響應效果

·?布局改變,模塊位置變換(見下圖)

 

本身為左右布局的頁面,發生響應時左邊的導航挪到了上部,位置發生了變化。

·?布局改變,模塊內容量改變(見下圖)
這是一個比較特殊的靈活布局的網站,發生響應時,模塊進行了隱藏刪減處理。

 

 

場景四提問:何謂媒體查詢?何謂斷點?

A:這里有一個新名詞,媒體查詢(media query),其實是實現斷點的一種方法,是前端工程師用簡單的方法,來獲取不同設備的特征,例如設備的寬度/高度,窗口的寬度/高度,設備的手持方向,分辨率等。
這里又一個名詞來了:斷點,用瀏覽器打開一個響應式網站,檢查元素,右上角會顯示視窗當前的分辨率,慢慢縮小視窗的寬度,找到頁面布局的變化點,就是我們上面說到的斷點或者次斷點。

上圖中每條線代表一個斷點

那么應該如何選擇斷點?
斷點的設置一定是基于頁面具體內容,并參考網站用戶的設備分辨率數據。設計過程中在一定區間內拉升或壓縮,已經無法用相同的布局內容時,必須改變內容展現方式時,而產生的關鍵尺寸的節點。請參考文章上結構模塊變化參考圖。
需要注意的是,在選擇斷點時,不應選擇將斷點設置為與某些常見設備寬度相同,而是應該確保常見設備寬度能夠很簡單地落入到某一設計范圍之內。可以在各類設備上對設計進行測試并以此來調整斷點。
那么完全不考慮設備嗎?不是的,設備仍然很重要,只是不應首先考慮它們。在一開始最好是不要只考慮頁面設計在特定設備上的顯示效果,而是應該從更通用的訪問設備,比如手機尺寸、平板電腦尺寸及桌面顯示器尺寸去考慮它。

 

在設計中遇到的其他問題:
Q:如何解決icon放大造成的變形及模糊問題?
A:當你的產品做成響應式設計的時候,可能會遇到圖標在適應屏幕尺寸的時候拉伸或擠壓變形導致模糊,這個時候可以將圖標做成字體。
它的優點在于:
  • 1. Icon是矢量的,可以自由適應各種尺寸大小,不會模糊;
  • 2. 占用空間很小,250個圖標的字體只有不到300K;
  • 3. Icon Font可控性更高,可以用代碼去控制大小、顏色、透明度、特效等;
  • 4.兼容性高,甚至是低版本ie瀏覽器。

 

Q:設計稿要怎么設計,要做幾套?
A:設計幾套取決于這個網站你會設置幾個斷點,而設置多少個斷點由網站的內容決定,設計師需要根據網站的實際內容找到合適的斷點,設法避免列間空白太寬或太窄的情況。

 

參考文獻:
1.9 basic principles of responsive web design
http://blog.froont.com/9-basic-principles-of-responsive-web-design
2.《學習響應式設計》

 

原文地址:58UXD(公眾號)

作者:環鐵藝術家

轉載請注明:學UI網 » 設計沉思錄|設計師應該了解的響應式知識

登錄收藏
 
你可能喜歡的:
如何快速又精準的確定產品風格?(上)如何快速又精準的確定產品風格?(上)
深耕“用戶界面”(上篇)- 界面表現層自查深耕“用戶界面”(上篇)- 界面表現層自查
稀缺性的正反價值稀缺性的正反價值
PRD分享:「網易云音樂-登錄/注冊模塊」產品需求文檔PRD分享:「網易云音樂-登錄/注冊模塊」產品需求文檔
圖標造型時,你是否考慮過這兩個問題?圖標造型時,你是否考慮過這兩個問題?
中臺系統基礎知識- 系統布局中臺系統基礎知識- 系統布局
畫圖標已經夠難了,圖標里面還要加表情,我太南了!畫圖標已經夠難了,圖標里面還要加表情,我太南了!
實例解析尼爾森十大可用性原則實例解析尼爾森十大可用性原則
行為召喚:終極生存指南行為召喚:終極生存指南
今天你簽到了嗎?今天你簽到了嗎?
?
5星腾龙时时彩做号软件 上海时时彩 河南11选5几点开始 11选5任五万能10注 什么APP可以抬高价格赚钱 福彩黑龙江36选7开奖结果查询结果 内蒙古11选5 展销会卖体育用品赚钱吗 重庆百变王牌微信群 黑龙江十一选五电子 韩国棒球比分直播 上班无聊还不赚钱 财神捕鱼官网最新版下载 梦幻西游手游赚钱的辅助技能 比分网球探m.win007.com 海龙王捕鱼机破解版 雷速体育比分直播官网