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ì)?
文章目錄:
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)站的每個頁面都可以根據(jù)用戶視口的大小重新設(shè)置格式,并且只需要為網(wǎng)站創(chuàng)建一個代碼庫即可。他們使用斷點(diǎn)來告訴站點(diǎn)何時調(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ì)中,為每個設(shè)備的屏幕創(chuàng)建不同的網(wǎng)站布局。加載時,站點(diǎn)會識別屏幕的大小并提供為該視口制作的布局。實(shí)際上,您可以為六種常見的屏幕尺寸(從非常小到非常大)分別創(chuàng)建不同的用戶體驗(yàn):320px,480px,760px,960px,1200px和1600px。
但是,由于為六種不同的屏幕尺寸設(shè)計(jì)網(wǎng)站會非常耗時,因此可以通過參考網(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è)備,這是一個好消息。響應(yīng)型網(wǎng)站也被認(rèn)為是適合移動設(shè)備使用,因此它們在搜索引擎排名中的排名也更高。
另一方面,響應(yīng)式網(wǎng)站要求開發(fā)人員進(jìn)行更多的編碼,即使UX交互設(shè)計(jì)人員和開發(fā)人員密切合作以確保布局可在盡可能多的設(shè)備上使用,也無法控制每個設(shè)備上的布局。結(jié)果,某些設(shè)備可能沒有在其上布置網(wǎng)頁來創(chuàng)造最佳的用戶體驗(yàn)。此外,由于無論訪問什么設(shè)備,都會交付整個網(wǎng)站的代碼,因此響應(yīng)式網(wǎng)站的加載速度可能較慢。這也會損害用戶體驗(yàn)。
由于其具有靈活性,所以響應(yīng)式設(shè)計(jì)通常是優(yōu)化網(wǎng)站的首選解決方案,尤其是當(dāng)該網(wǎng)站是從頭開始打開到包含許多網(wǎng)頁時。
4.自適應(yīng)設(shè)計(jì)的利弊
對于UX交互設(shè)計(jì)人員而言,設(shè)計(jì)自適應(yīng)設(shè)計(jì)所需的各種布局會更加容易,因?yàn)樗恍枰獮槊總€屏幕尺寸的固定寬度創(chuàng)建線框即可。這意味著UX交互設(shè)計(jì)人員可以完全控制每種布局,并可以確保每種屏幕尺寸的用戶體驗(yàn)都是最佳的。結(jié)果,如果UX交互設(shè)計(jì)人員認(rèn)為為不同的屏幕尺寸包含不同的內(nèi)容是有意義的,那么他們可以這樣做。
例如,用于食品配送服務(wù)的自適應(yīng)站點(diǎn)可能包括臺式計(jì)算機(jī)的主屏幕,該主屏幕顯示餐廳選項(xiàng)和不同類別的食品以及餐廳位置搜索功能。同時,手機(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ì)六個常見屏幕尺寸中的兩個或三個來限制工作,但這意味著,如果用戶在非設(shè)計(jì)的設(shè)備上訪問該網(wǎng)站,則該網(wǎng)站將無法正確格式化。即使設(shè)計(jì)了所有六個屏幕尺寸,仍然不會覆蓋不常見的屏幕尺寸。
自適應(yīng)設(shè)計(jì)通常最好用于網(wǎng)站的重新設(shè)計(jì)或增強(qiáng)。如果客戶需要一個現(xiàn)有網(wǎng)站的移動布局,而他們無意改變,則自適應(yīng)設(shè)計(jì)可能是最佳選擇。
5.總結(jié)
現(xiàn)在,您應(yīng)該對什么是自適應(yīng)設(shè)計(jì)和自適應(yīng)設(shè)計(jì)以及兩種方法的利弊有基本的了解。在確定哪種方法最適合您的下一個UX交互設(shè)計(jì)項(xiàng)目時,請記住以下幾點(diǎn):
5.1響應(yīng)式設(shè)計(jì)可以根據(jù)所訪問設(shè)備的屏幕尺寸(從大型臺式計(jì)算機(jī)到小型移動電話)來更改其布局和外觀。
5.2自適應(yīng)設(shè)計(jì)要求為將要訪問該網(wǎng)站的每個設(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ì)師為單個網(wǎng)站創(chuàng)建多達(dá)六個不同版本的屏幕,以用于不同尺寸的屏幕。盡管工作量很大,但它使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)。
填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ 5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc