如何去做好響應(yīng)式設(shè)計？

2021-11-29    資深UI設(shè)計者

對于大多數(shù)網(wǎng)頁設(shè)計師來說，你的成品需要在各種類型和尺寸的設(shè)備上進(jìn)行外觀和工作，這是顯而易見的。創(chuàng)建多個設(shè)計來實現(xiàn)同一目標(biāo)的日子已經(jīng)一去不復(fù)返了。


這一切都?xì)w結(jié)為選擇響應(yīng)式或自適應(yīng)設(shè)計模型，以實現(xiàn)任何規(guī)模的一致網(wǎng)站設(shè)計。


但是響應(yīng)式和自適應(yīng)之間有什么區(qū)別？它們真的只是一回事嗎？讓我們來看看并解釋你需要知道的一切。喜歡記得關(guān)注UI范，每天更新，打造你的知識武器庫！




1.與設(shè)備無關(guān)的設(shè)計的兩種方法



就其核心而言，響應(yīng)式和自適應(yīng)技術(shù)在最終用戶看來可能是一樣的。創(chuàng)建設(shè)計和開發(fā)方法都是為了使網(wǎng)站在所有設(shè)備類型上都具有良好的外觀和功能。
主要區(qū)別在你如何使用響應(yīng)式或自適應(yīng)技術(shù)創(chuàng)建網(wǎng)站。




2.響應(yīng)式設(shè)計



響應(yīng)式設(shè)計是任何使用網(wǎng)站的人的“家庭”術(shù)語。也許幾乎令人驚訝的是，它并沒有那么老。它是由Ethan Marcotte在 2010 年創(chuàng)造的：

現(xiàn)在比以往任何時候都更重要的是，我們正在設(shè)計旨在沿著不同體驗的梯度觀看的作品。響應(yīng)式網(wǎng)頁設(shè)計為我們提供了一條前進(jìn)的道路，最終讓我們能夠“為事物的潮起潮落而設(shè)計”。


而這正是我們目前關(guān)于響應(yīng)式網(wǎng)站的思想學(xué)派的起點。




響應(yīng)式設(shè)計是一種技術(shù)，其中網(wǎng)站在任何給定尺寸下“響應(yīng)”瀏覽器的尺寸，以便針對屏幕優(yōu)化設(shè)計。理想情況下，用戶應(yīng)該從單個網(wǎng)站獲得相同的體驗，無論他們是在只有幾百像素寬的移動設(shè)備上手持它還是在超寬屏幕顯示器上觀看它。

響應(yīng)式網(wǎng)站使用了許多你可能熟悉的元素：媒體查詢、靈活的網(wǎng)格和響應(yīng)式圖像。它可能是針對多種屏幕尺寸進(jìn)行設(shè)計的最流行方法。（純粹主義者會注意到響應(yīng)式設(shè)計與設(shè)備本身無關(guān)，只與大小有關(guān)，而不是自適應(yīng)，它在完美渲染的道路上檢測設(shè)備類型等。）

根據(jù)交互設(shè)計基金會的說法，響應(yīng)式設(shè)計更容易，實現(xiàn)的工作更少。這可能是它被更廣泛使用的原因。


響應(yīng)式設(shè)計師創(chuàng)建一個單一的設(shè)計，用于所有屏幕，通常會從分辨率的中間開始，并使用媒體查詢來確定將對分辨率標(biāo)度的低端和高端進(jìn)行哪些調(diào)整。這往往會讓用戶感到高興，因為熟悉的網(wǎng)頁設(shè)計似乎保證可以轉(zhuǎn)換到任何設(shè)備的屏幕上。均勻性和無縫性是提供良好用戶體驗的關(guān)鍵考慮因素。

此外，由于涉及開發(fā)時間，響應(yīng)式設(shè)計通常是大型網(wǎng)站的選擇。響應(yīng)式設(shè)計植根于網(wǎng)格系統(tǒng)，響應(yīng)式測量（考慮百分比或最小值和最大值）可幫助設(shè)計以不同的尺寸擴(kuò)展、收縮和堆疊。
這種設(shè)計技術(shù)是新開發(fā)的規(guī)范。



3.響應(yīng)式設(shè)計的優(yōu)點

  • 無論設(shè)備或瀏覽器如何，該設(shè)計都適用于任何視口尺寸。

  • 響應(yīng)式設(shè)計對搜索引擎友好（谷歌甚至推薦它）。

  • 允許設(shè)計中的很多精確度，以便設(shè)計師可以調(diào)整任何或每一個細(xì)節(jié)。

  • 高度移動友好的設(shè)計選項。

  • 與你可能用于網(wǎng)站項目的大量主題、網(wǎng)站構(gòu)建器和工具兼容的常見設(shè)計實踐。

  • 該設(shè)計將具有統(tǒng)一和無縫的外觀，這將提升整體用戶體驗。





3.響應(yīng)式設(shè)計的缺點

  • 確保響應(yīng)式元素在不同尺寸（尤其是較小尺寸）下仍保持可讀性和可訪問性非常重要。
  • 通常需要比其他網(wǎng)站更多的編碼，這可能需要時間或?qū)е轮亓?。重要的是要注意并注意這里。
  • 你無法控制所有設(shè)備尺寸，最終可能會設(shè)計出與舊尺寸或更模糊尺寸不符的設(shè)計。
  • 元素可能會在你身上四處移動，并不時以奇怪的位置結(jié)束，甚至由于核心內(nèi)容管理系統(tǒng)或網(wǎng)站框架更新，因此重要的是要隨時了解變化。



4.適應(yīng)性設(shè)計


自適應(yīng)設(shè)計幾乎與響應(yīng)式設(shè)計一樣古老。該技術(shù)于 2011 年首次使用，涉及針對特定設(shè)備尺寸和類型進(jìn)行設(shè)計，以獲得更加個性化的體驗。
這是來自MDN Web Docs 檔案的一個很好的解釋：“自適應(yīng)設(shè)計更像是漸進(jìn)增強(qiáng)的現(xiàn)代定義。自適應(yīng)設(shè)計不是一種靈活的設(shè)計，而是檢測設(shè)備和其他特征，然后根據(jù)一組預(yù)定義的視口大小和其他特征提供適當(dāng)?shù)奶卣骱筒季?。?/section>

設(shè)計植根于六種固定變化（寬度）：

  • 320 像素

  • 480 像素

  • 760 像素

  • 960 像素

  • 1,200 像素

  • 1,600 像素


自適應(yīng)設(shè)計最常見的用途是將舊設(shè)計轉(zhuǎn)換為更適合移動設(shè)備的設(shè)計。這并不是說它不會發(fā)生在新的開發(fā)中。




5.自適應(yīng)設(shè)計的優(yōu)點


  • 移動設(shè)備會告訴設(shè)計它們是什么，以便設(shè)計非常適合該設(shè)備和瀏覽器類型。
  • 自適應(yīng)設(shè)計在事物的設(shè)計方面提供了幾乎精確的控制。
  • 智能廣告是一種可能性，允許來自智能設(shè)備的鏈接。
  • 自適應(yīng)設(shè)計在速度測試中的得分往往高于響應(yīng)式設(shè)計。
  • 該設(shè)計可以使用更多的個性化功能，連接到智能設(shè)備的使用選項和適配。
  • 對于需要刷新的小型網(wǎng)站來說是不錯的選擇，因為你只需“設(shè)計”較小的尺寸。



6.自適應(yīng)設(shè)計的缺點

  • 由于配置錯誤，您在設(shè)計時可能會遇到一些不太常見的設(shè)備（例如平板電腦）的問題。

  • 自適應(yīng)設(shè)計可能是勞動密集型的，需要更多的開發(fā)時間和成本。

  • 由于內(nèi)容重復(fù)，搜索引擎在使用自適應(yīng)網(wǎng)站時會遇到更多困難。

  • 有一個偷偷摸摸的現(xiàn)實，你設(shè)計同一個網(wǎng)站六次。

文章來源：站酷 作者：UI范

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

存檔