AAA教育

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

　　文章目錄：
 

　　1.什么是響應(yīng)式設(shè)計?
 

　　2.什么是自適應(yīng)設(shè)計?
 

　　3.響應(yīng)式設(shè)計的利弊
 

　　4.自適應(yīng)設(shè)計的利弊
 

　　5.總結(jié)
 

　　1. 什么是響應(yīng)式設(shè)計?
 

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

　　2. 什么是自適應(yīng)設(shè)計?
 

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

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

　　3.響應(yīng)式設(shè)計的利弊
 

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

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

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

　　4.自適應(yīng)設(shè)計的利弊
 

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

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

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

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

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

　　5.總結(jié)
 

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

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

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

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

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

　　5.5自適應(yīng)設(shè)計通常最適合從頭開始設(shè)計的較大站點。
 

　　5.6自適應(yīng)設(shè)計通常最適合刷新的較小站點。