UI設計的適應工作-響應式與自適應設計簡析
響應式設計將會保持受歡迎的趨勢,這可能是因為我們還沒有找到一個更好解決重大維護和適應性要求。自適應設計會看到一些改進,完善現階段所出現的問題。
作為全球先進的科技巨頭,Google一直推崇響應式網頁設計,並在2015年4月釋出了重大的更新,目的是提高響應式在移動終端上的執行效率。儘管在更新中沒有明確表明你必須使用響應式設計。只是簡單的提示響應式設計擁有不錯的UX和優越的效能,是移動設計方面的一個不錯的選擇。
考慮到這一點,讓我們一起來測試一下“響應式設計”與“自適應設計”在效能和使用者體驗上各自的利弊。
自移動終端裝置全面普及後,爭論最為激烈的是我們在響應式設計。(前期的開發和後期的維護成本都很大)
兩者的區別?
首先,響應式和自適應最為關鍵的區別是什麼呢?
簡而言之,響應式就相當於液體,它可以自動適應不同尺寸的螢幕,無論你的裝置尺寸多麼奇葩。響應式使用CSS media queries的方法,根據目標裝置自動改變風格如顯示型別,寬度、高度等,這能很好解決不同螢幕尺寸的顯示問題。
而自適應設計是基於斷點使用靜態佈局,一旦頁面被載入就無法再進行自動適應,自適應會自動檢測螢幕的大小來載入適當的工作佈局。也就是說,當你要採用自適應設計網站時,你得一個一個設計6種常見的屏幕布局。
1.320
2.480
3.760
4.960
5.1200
6.1600
顯然,自適應設計需要做更多的工作,你必須至少設計6種常見的佈局。而響應式設計可以更好地適應複雜的媒體裝置要求,能很好地解決顯示和效能問題。
為什麼使用自適應設計?
自適應可用於改造現有的網站,使其更好地適應移動端。這使你的設計可控制和開發多個特定的檢視。你開發檢視的數量完全取決於你,你的公司和全面的預算。然而,它也提供了一定量的控制元件(例如在內容和佈局上),如此你便無須使用響應式設計。
通常,你首先會設計一個低解析度檢視,制定你自己的方法確保設計不會被內容所限制。正如前面所提到的,它那六個標準的設計佈局。然而,你可以通過檢視你網站,分析最為常用的裝置,然後決定這些檢視該如何設計。
自適應網站可以用於設計和開發一個擁有多個自適應檢視的網站。所以這種設計通常用於改造網站。
為什麼使用響應式設計?
現在絕大多數網站都使用響應式設計,它適合缺乏經驗的設計師和開發人員使用。
相比自適應網站,響應式網站省去了很多的控制元件,同時也省去了不少建立和維護的功夫。響應式佈局就是一種流體,在按百分比縮放時也能相當的流暢。這也可能再次導致“跳出”當你在調整視窗大小時。如下圖,下圖現實的是一個流體佈局,設計師使用百分比縮放時,檢視將會被自動地調整。
使用響應式設計,要記住佈局。這當然可能會使過程混亂,並且使設計更加複雜。這就意味著你應該專注於中等解析度的檢視,然後再調整為更低或更高的解析度。
所以通常的做法是,在一個新的專案中使用響應式設計,在後期的改造中使用自適應設計。
再三思考
正如前面所討論的,響應網站會在網站速度有所弊端(如果他們沒有正確地實現)。
響應式在編碼時要求也比較嚴格,以確保適應每塊訪它的螢幕。然而額外的工作也是值得商討的,因為自適應設計要為每一個佈局,單獨開發和維護HTML和CSS程式碼。修改自適應網站也相當麻煩,因為當它實現的時候你得確保每一個功能能正常執行。
當然,你應該也要考慮使用者體驗。因為響應式基本上打亂了周圍的內容以確保流暢符合裝置視窗,你需要特別注意的是視覺層次結構設計,因為它周圍的內容已被打亂。
響應式設計往往會造成另外一個難題,那就是如何重組大頁面的元素以適應既小有長的頁面,反之亦然。然而,單是確保元素適應頁面是遠遠不夠的。為了響應式設計更加成功,設計也必須確保螢幕的解析度和尺寸能夠適應。
所以,無論你採用哪種技術都沒有捷徑可言,都需要確保所建立的網站能適應所有的螢幕。響應式稍佔優勢,你無須花大量的時間在網站的維護上。
哪種技術更優越?
歸根結底,最重要的是要考慮你使用者屬於哪類群體,不管你採用哪種設計方式,一旦你知道他們的習慣,知道他們更傾向於用什麼裝置訪問該網站,你在設計你的網站時該採用哪種方式,哪種佈局,想法自然會湧現出來。
很大程度上還取決你是現有的網站還是一個新專案。響應式設計已成為首選的設計技術和思想,響應式設計增長迅猛,幾乎已經達到作為獨立移動網站的相同水平。
記住這點,如果僅僅是考慮螢幕的相容問題,可以有把握的說,那響應式設計通常是首選技術。
然而,如果客戶和公司存在預算,自適應設計可能是更好的選擇。
結論:
響應式設計將會保持受歡迎的趨勢,這可能是因為我們還沒有找到一個更好解決重大維護和適應性要求。自適應設計會看到一些改進,完善現階段所出現的問題。
JPL設計小站,設計我們在這裡說!
喜歡就請識別二維碼,關注一下公眾號吧!