UI設計中如何做響應式設計與自適應設計

　　UI設計中如何做響應式設計與自適應設計?由于科技在不斷的發(fā)展，小伙伴們上網(wǎng)就不單單只依靠臺式電腦了，還有平板電腦筆記本電腦都是可供大家選擇的。面對不同的屏幕分辨率網(wǎng)站是如何進行適配的呢?今天AAA教育胡老師就和大家聊聊UI設計中如何做響應式設計與自適應設計?
 

　　文章目錄：
 

　　1.什么是響應式設計?
 

　　2.什么是自適應設計?
 

　　3.響應式設計的利弊
 

　　4.自適應設計的利弊
 

　　5.總結
 

　　1. 什么是響應式設計?
 

　　響應式設計就是開發(fā)人員使用CSS來確保網(wǎng)站的每個頁面都可以根據(jù)用戶視口的大小重新設置格式，并且只需要為網(wǎng)站創(chuàng)建一個代碼庫即可。他們使用斷點來告訴站點何時調整以適應不同的屏幕尺寸。同一站點在大型臺式計算機屏幕上可能具有四列布局，在較小的筆記本電腦屏幕上可能具有三列布局，在平板電腦屏幕上具有兩列布局，而在手機上具有單列布局。無論您在響應式網(wǎng)站上使用哪種設備，都將找到相同的基本內(nèi)容和設計。
 

　　2. 什么是自適應設計?
 

　　在自適應設計中，為每個設備的屏幕創(chuàng)建不同的網(wǎng)站布局。加載時，站點會識別屏幕的大小并提供為該視口制作的布局。實際上，您可以為六種常見的屏幕尺寸(從非常小到非常大)分別創(chuàng)建不同的用戶體驗：320px，480px，760px，960px，1200px和1600px。
 

　　但是，由于為六種不同的屏幕尺寸設計網(wǎng)站會非常耗時，因此可以通過參考網(wǎng)站現(xiàn)有版本的用戶分析來確定用戶最常訪問的屏幕尺寸，從而限制工作量。例如，如果分析表明大多數(shù)用戶在其Apple iPad和Samsung Galaxy手機上使用該網(wǎng)站，則應專門針對這兩種屏幕尺寸而不是所有六種可能的屏幕尺寸設計用戶體驗。
 

　　3.響應式設計的利弊
 

　　從UX交互設計人員的角度來看，響應式設計的最大優(yōu)勢在于，與自適應設計相比，它所需的工作量要少得多，無論是最初創(chuàng)建它還是維護它。此外，響應站點將容納無限數(shù)量的屏幕尺寸，考慮到似乎定期發(fā)布具有新奇屏幕尺寸的設備，這是一個好消息。響應型網(wǎng)站也被認為是適合移動設備使用，因此它們在搜索引擎排名中的排名也更高。
 

　　另一方面，響應式網(wǎng)站要求開發(fā)人員進行更多的編碼，即使UX交互設計人員和開發(fā)人員密切合作以確保布局可在盡可能多的設備上使用，也無法控制每個設備上的布局。結果，某些設備可能沒有在其上布置網(wǎng)頁來創(chuàng)造最佳的用戶體驗。此外，由于無論訪問什么設備，都會交付整個網(wǎng)站的代碼，因此響應式網(wǎng)站的加載速度可能較慢。這也會損害用戶體驗。
 

　　由于其具有靈活性，所以響應式設計通常是優(yōu)化網(wǎng)站的首選解決方案，尤其是當該網(wǎng)站是從頭開始打開到包含許多網(wǎng)頁時。

　　4.自適應設計的利弊
 

　　對于UX交互設計人員而言，設計自適應設計所需的各種布局會更加容易，因為它只需要為每個屏幕尺寸的固定寬度創(chuàng)建線框即可。這意味著UX交互設計人員可以完全控制每種布局，并可以確保每種屏幕尺寸的用戶體驗都是最佳的。結果，如果UX交互設計人員認為為不同的屏幕尺寸包含不同的內(nèi)容是有意義的，那么他們可以這樣做。
 

　　例如，用于食品配送服務的自適應站點可能包括臺式計算機的主屏幕，該主屏幕顯示餐廳選項和不同類別的食品以及餐廳位置搜索功能。同時，手機上同一站點的主屏幕可能僅包含餐廳位置搜索功能。
 

　　自適應站點對于開發(fā)人員來說更容易實現(xiàn)，并且因為它們僅提供給定屏幕尺寸所需的代碼，所以它們的加載速度比響應站點快得多。
 

　　就是說，對于UX交互設計人員而言，自適應設計可能需要承擔很多責任。雖然可以通過僅設計六個常見屏幕尺寸中的兩個或三個來限制工作，但這意味著，如果用戶在非設計的設備上訪問該網(wǎng)站，則該網(wǎng)站將無法正確格式化。即使設計了所有六個屏幕尺寸，仍然不會覆蓋不常見的屏幕尺寸。
 

　　自適應設計通常最好用于網(wǎng)站的重新設計或增強。如果客戶需要一個現(xiàn)有網(wǎng)站的移動布局，而他們無意改變，則自適應設計可能是最佳選擇。
 

　　5.總結
 

　　現(xiàn)在，您應該對什么是自適應設計和自適應設計以及兩種方法的利弊有基本的了解。在確定哪種方法最適合您的下一個UX交互設計項目時，請記住以下幾點：
 

　　5.1響應式設計可以根據(jù)所訪問設備的屏幕尺寸(從大型臺式計算機到小型移動電話)來更改其布局和外觀。
 

　　5.2自適應設計要求為將要訪問該網(wǎng)站的每個設備創(chuàng)建不同的布局。
 

　　5.3響應式設計通常需要UX交互設計人員進行較少的工作，但是他們必須與開發(fā)人員合作以確?？梢栽诿糠N可能的屏幕尺寸下使用網(wǎng)站布局。
 

　　5.4自適應設計需要用戶體驗設計師為單個網(wǎng)站創(chuàng)建多達六個不同版本的屏幕，以用于不同尺寸的屏幕。盡管工作量很大，但它使UX交互設計人員可以針對這些布局所涵蓋的每種設備優(yōu)化用戶體驗。
 

　　5.5自適應設計通常最適合從頭開始設計的較大站點。
 

　　5.6自適應設計通常最適合刷新的較小站點。