UI設計師要懂的自適應和響應式布局設計
時間：2023-09-04 07:00:02 | 來源：網站運營
時間：2023-09-04 07:00:02 來源：網站運營
UI設計師要懂的自適應和響應式布局設計：
閱讀時間：10分鐘
作者：Mattia Astirino
原文鏈接：https://blog.prototypr.io/the-a-r-model-17ce2bbeec71
現(xiàn)如今，幾乎所有的網頁設計都要進行響應式和自適應設計，才能讓產品能夠覆蓋到更多的客戶端，那么到底什么是響應式和自適應，以及我們應該如何設計呢？答案盡在文章中。
自適應和響應式是兩種方法論，目的是讓產品在不同的設備和尺寸的屏幕上無障礙顯示，以此為用戶提供最好的體驗。他們兩個都是為了最大化利用屏幕可用空間以及為用戶提供最好的交互模式。在討論A+R模型之前，我們需要先拆分兩種方法論。
重組：用自適應技術(Adaptive)我們可以開發(fā)和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。
在建立響應式(Responsive)體驗時，我們有三種方法來處理布局和內容：
換行：我們可以通過改變頁面結構布局來更好的適配可視區(qū)域，大多數(shù)情況會導致內容堆疊（效果不是很好）。
調整大?。?/b>一些UI組件和多數(shù)html元素一樣易變，填充空白空間并在必要時換行。
顯示/隱藏：一些UI組件在可視區(qū)域隱藏（組件仍然存在）或顯示出來填滿空間。
當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。他們之間主要的區(qū)別是DOM結構，當采用響應式思維開發(fā)時，我們的HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節(jié)點），而在自適應開發(fā)中我們可能會有不一樣的代碼結構和體驗。
兩種設計思維都是有效的，你只用問問自己在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發(fā)web應用時經常會用到響應式設計，例如通過自適應開發(fā)來構建定制化體驗。
兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結合了基于單個主要臨界點的自適應和響應式方法。
如上所述，自適應方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。將960px作為主要的自適應臨界點，根據全局統(tǒng)計信息定義，我們會得到一些相似處：
- 左側的可視區(qū)代表整個屏幕小于960px時的具體布局和內容
- 右側的可視區(qū)代表整個屏幕大于等于960px時的另一種布局
在使用響應式技術時，我們可以利用主要臨界點創(chuàng)建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。舉個例子，使用平板電腦的用戶可能會感受觸控體驗優(yōu)化（自適應），但我們可以通過終端設備來調整布局（響應式）。
通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。
這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜，因為你要處理不同的代碼庫和環(huán)境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。
在線咨詢
