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

2021-10-25 01:53:05 字數 1970 閱讀 6148

ui設計中如何做響應式設計與自適應設計?由於科技在不斷的發展,小夥伴們上網就不單單只依靠台式電腦了,還有平板電腦膝上型電腦都是可供大家選擇的。面對不同的螢幕解析度**是如何進行適配的呢?今天aaa教育胡老師就和大家聊聊ui設計中如何做響應式設計與自適應設計?

1.什麼是響應式設計?

2.什麼是自適應設計?

3.響應式設計的利弊

4.自適應設計的利弊

5.總結

1. 什麼是響應式設計?

響應式設計就是開發人員使用css來確保**的每個頁面都可以根據使用者視口的大小重新設定格式,並且只需要為**建立乙個**庫即可。他們使用斷點來告訴站點何時調整以適應不同的螢幕尺寸。同一站點在大型台式計算機螢幕上可能具有四列布局,在較小的膝上型電腦螢幕上可能具有三列布局,在平板電腦螢幕上具有兩列布局,而在手機上具有單列布局。無論您在響應式**上使用哪種裝置,都將找到相同的基本內容和設計。

2. 什麼是自適應設計?

在自適應設計中,為每個裝置的螢幕建立不同的**布局。載入時,站點會識別螢幕的大小並提供為該視口製作的布局。實際上,您可以為六種常見的螢幕尺寸(從非常小到非常大)分別建立不同的使用者體驗:320px,480px,760px,960px,1200px和1600px。

3.響應式設計的利弊

從ux互動設計人員的角度來看,響應式設計的最大優勢在於,與自適應設計相比,它所需的工作量要少得多,無論是最初建立它還是維護它。此外,響應站點將容納無限數量的螢幕尺寸,考慮到似乎定期發布具有新奇螢幕尺寸的裝置,這是乙個好訊息。響應型**也被認為是適合移動裝置使用,因此它們在搜尋引擎排名中的排名也更高。

另一方面,響應式**要求開發人員進行更多的編碼,即使ux互動設計人員和開發人員密切合作以確保布局可在盡可能多的裝置上使用,也無法控制每個裝置上的布局。結果,某些裝置可能沒有在其上布置網頁來創造最佳的使用者體驗。此外,由於無論訪問什麼裝置,都會交付整個**的**,因此響應式**的載入速度可能較慢。這也會損害使用者體驗。

由於其具有靈活性,所以響應式設計通常是優化**的首選解決方案,尤其是當該**是從頭開始開啟到包含許多網頁時。

4.自適應設計的利弊

對於ux互動設計人員而言,設計自適應設計所需的各種布局會更加容易,因為它只需要為每個螢幕尺寸的固定寬度建立線框即可。這意味著ux互動設計人員可以完全控制每種布局,並可以確保每種螢幕尺寸的使用者體驗都是最佳的。結果,如果ux互動設計人員認為為不同的螢幕尺寸包含不同的內容是有意義的,那麼他們可以這樣做。

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

自適應站點對於開發人員來說更容易實現,並且因為它們僅提供給定螢幕尺寸所需的**,所以它們的載入速度比響應站點快得多。

就是說,對於ux互動設計人員而言,自適應設計可能需要承擔很多責任。雖然可以通過僅設計六個常見螢幕尺寸中的兩個或三個來限制工作,但這意味著,如果使用者在非設計的裝置上訪問該**,則該**將無法正確格式化。即使設計了所有六個螢幕尺寸,仍然不會覆蓋不常見的螢幕尺寸。

自適應設計通常最好用於**的重新設計或增強。如果客戶需要乙個現有**的移動布局,而他們無意改變,則自適應設計可能是最佳選擇。

5.總結

5.1響應式設計可以根據所訪問裝置的螢幕尺寸(從大型台式計算機到小型移動**)來更改其布局和外觀。

5.2自適應設計要求為將要訪問該**的每個裝置建立不同的布局。

5.3響應式設計通常需要ux互動設計人員進行較少的工作,但是他們必須與開發人員合作以確保可以在每種可能的螢幕尺寸下使用**布局。

5.4自適應設計需要使用者體驗設計師為單個**建立多達六個不同版本的螢幕,以用於不同尺寸的螢幕。儘管工作量很大,但它使ux互動設計人員可以針對這些布局所涵蓋的每種裝置優化使用者體驗。

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

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

摘自:

華為設計總監 如何做設計決策

設計師最苦惱的乙個問題,也許就是設計決策。為什麼苦惱?為什麼難?有一種說法。現在很多公司都非常注重使用者體驗設計,這是好事。但是大部分公司最終做產品使用者體驗設計決策的人,都不是設計出身。這不是壞事,但是這是乙個問題,問題在於,不同的專業背景帶來的思考維度總是略有差別。設計師如何能做出設計決策,或者...

如何做資訊架構與流程設計?

所有的資訊與流程,都是功能與使用者的互動,那就離不開資訊的傳遞。而資訊的傳播有三大要素 使用者 產品 資訊,並圍繞它們的特徵與要點展開資訊架構與流程設計。現在,我們假設,你已經有了功能設計的方案,接下來要做的就是把功能排列組合,以產品的方式呈現出來。這就涉及到了資訊架構與流程設計。所有的資訊與流程,...

如何做簡單的設計?

什麼是簡單?很多時候我們把簡單和簡潔混淆成乙個概念,以為簡單就是使用盡量少的視覺元素。其實不然。簡潔和簡單關注的角度不同。簡潔強調的是 潔 是乾淨 而簡單強調的是 單 是不複雜 容易 容易獲取 容易理解 容易使用。google 的主頁很簡潔,但並不簡單。為人詬病的 更多 的設計,以及功能極其強大的高...