UI設(shè)計(jì)中如何做響應(yīng)式設(shè)計(jì)與自適應(yīng)設(shè)計(jì)

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

　　文章目錄：
 

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

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

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

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

　　5.總結(jié)
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　5.總結(jié)
 

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

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

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

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

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

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

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