響應式網頁設計師的 20 個最佳網頁工具

響應式網頁設計 (RWD) 雖然對於當今大多數網站管理員和開發人員來說是一個易於掌握的概念，但仍然需要對瀏覽器用於呈現響應式設計以供顯示的核心功能有一個簡明的理解，而忽略這些功能會導致開發編碼的響應式網站會阻礙用戶體驗，並導致網站性能出現問題。 除了幫助定義響應式網頁設計方向的 HTML5 之外，開發人員還需要對 CSS3 有深入的了解，否則響應式設計根本不可能完成。 例如，媒體查詢是為特定設備屏幕尺寸和類型定義特定內容片段的獨立解決方案。 但即便如此，這些功能也只是響應式設計所能做到的一切的冰山一角。

移動友好是另一個敏感話題，毫無疑問，它將重構和重組響應式設計的感知方式。 有明確的跡象表明，移動本身正在朝著一種更具體的內容顯示方法發展，這種方法以移動應用程序和框架的形式出現。 所有這些增長概念都需要對設計的未來進行徹底調查，以及如何修改您當前的策略以適應未來的增長。

隨著對網頁設計發展方向的了解，我們編制了一些真正實用且方便的響應式網頁設計工具列表，它們將非常適合您現有的工具包，其中一些肯定已經找到了您的心，但有些對你來說可能是全新的。 從直接的前端框架到移動測試工具，以及大量鼓舞人心的設計模式資源，這些資源將幫助您從現在開始構建更好、響應更快、更具吸引力的網站 — 喝杯茶，開始您的精彩綜述之旅.

引導程序

從前端網站建設開始從未如此方便。 像 Bootstrap 這樣的框架使引導功能性商業網站的過程真正成為一項輕鬆的任務。 由於 Bootstrap 遵循最新的 Web 標準，因此所有功能也與響應式設計兼容。 使 Bootstrap 如此成功的原因很大程度上歸功於其龐大的組件集合，採用標準的 Bootstrap 網格設計並將任何免費組件應用於它以快速引導現代網站。

可以自定義形狀、顏色和大小的按鈕以及您可以自己修改以與自定義 JavaScript 功能集成的導航欄等組件。 例如，瀏覽器在支持響應式設計方面也取得了長足的進步，例如，可以將嵌入的視頻或圖像配置為根據訪問者訪問的設備大小自動調整大小。 這使用戶體驗現代、流暢和可靠。 從總體上看，Bootstrap 是幫助您創建網站的框架，然後您可以繼續使用我們將提到的許多其他響應式設計工具，以進一步擴展體驗。

網絡流

Flexbox 可能是現代網頁設計和開發中談論最多的功能，僅在去年一年就激發了無數資深開發人員撰寫的主題。 Flexbox 的基本定義——一個強大的佈局工具，可以解決響應式網頁設計中的常見問題。 什麼是網流？ 它是一個將 Flexbox 設計集成到可視化構建器中的平台，可節省開發時間並選擇可用於構建響應式佈局的簡單 UI。

所以無論如何.. 為什麼是 Flexbox？ Flexbox 如此受歡迎的部分原因是它解決了複雜的設計問題，否則這些問題將需要非生產性的設計模式。 為您提供 Flexbox 的基本概要——您只需幾行代碼就可以有效地創建複雜的設計模式。 例如，創建同樣對齊的模態元素，不管您用於標題或副標題的字體大小如何，這些元素仍然保持對齊。 使用 Flexbox，您可以創建功能大綱或客戶評論等佈局並對齊它們，以便提供卓越的用戶體驗。 即使是像定價表這樣的平凡事物，您依賴原生 CSS3 來幫助您勾勒輪廓，現在也可以使用 Webflow 的 Flexbox 功能集成到您的設計中。 可以構建完整的網站網格來加快網站實現的速度。

用戶界面模式

作為一名網頁設計師，我們日常使用的許多網站、應用程序和工具都離不開 UI 模式。 想像一下，如果我們不依賴常見的 UI 模式，數字世界會是什麼樣子。 那將是一個瘋狂、扭曲的世界。 但是，由於設計的演變，以及對模式如何在常見功能中重複的理解，有可能了解不同的 UI 模式，這些模式控製表單、數據管理、內容管理、佈局、導航和用戶屏幕頁面等類別。

這是大量的設計屏幕，可以使用您自己的設計風格重新創建，但遵循常見 UI 模式的指導以實現平衡感。 這些也是 UI 模式涵蓋的類別。 每個類別都有許多示例模式，顯示了可以修改每個設計類別以反映標準 UI 模式的方式，所有這些模式都被普通數字用戶認為是最喜歡的。 您將在此頁面上找到的設計模式可應用於本機和移動應用程序。 響應式設計從一開始就是關於可用性的，管理多個設備的單一佈局本身就是一項繁重的任務，但模式通過讓您將單一模式應用於多個設計來幫助解決有問題的任務。

想像

圖像是響應式設計中另一個非常受歡迎的話題。 畢竟，您不希望為來自平板設備或智能手機的訪問者提供完全相同的圖像。 設備分辨率總是會有所不同，雖然 CSS3 功能的存在是為了在不同設備下載的圖像大小和類型之間保持某種平衡，但提高圖像質量及其大小仍然是一個非常重要的話題。 當然，HTTP/2 將為世界各地的開發人員帶來一些巨大的變化，但未來 5 年對網絡來說仍然相當艱難。

HTTP Archive 報告說，在 2010 年——平均一個網頁的大小大約為 700kb，而在 2016 年——這個數字已經增長到 2.2mb！ 這些兆字節中的大部分都被視覺內容佔用了； 圖片。 所以..你必須問問自己，我是否因為在圖像優化方面的不負責任的決定而影響了我的頁面的性能？ 在這裡，您可以了解 Imagify，它是一個服務/平台，可以為您回答這個問題，並為您提供正確的工具來進行圖像優化，這是一個完全自動化的過程。

提供了一個 WordPress 插件，以便您可以即時優化所有現有和未來的上傳。 除非您直接查看問題，否則它通常看起來根本不是問題，但是如果像 Google 這樣的公司鼓勵用戶提高他們的網站性能以換取更好的排名......你知道沒有回頭路。

小貼士

JavaScript 經常用於前端開發。 想想 React、Angular、Meteor、Node.js 和原生 JavaScript 庫等框架，它們幾乎將 Web 的其餘部分連接在一起。 如果您熱衷於花哨的響應式設計功能，jQuery 是一個您會經常使用的庫，而提高 JS 性能的唯一方法是編寫更多代碼。 在這種情況下，提示對於學習新事物、更好地理解模式以及通常使您的大腦保持新鮮並了解 JavaScript 中的最新動態非常有幫助。 所以.. 在您的智能手機上安裝 JsTips。

一個簡單而優雅的應用程序，每天都會為您提供新的 JavaScript 技巧。 有時，這些提示會談論您在腦海中已經知道的東西，但通常情況下，您會遇到具有創造性、未來感和令人興奮的嘗試和使用的東西。 App Store 上的一條評論表明該應用程序缺乏一些基本的設計功能，但作為一名編碼員，您可以獲得最渴望的東西、大量的代碼示例和代碼定義，這樣您就可以跳上該代碼編輯器並拔掉插頭。

數據可視化目錄

響應式設計的事情是，你可以日夜工作來完善你所追求的佈局，但即使在佈局完成之後——還有更多的工作要做，這通常歸結為你可以集成的方式交互式和動態內容到您的設計中。 當然，WordPress 可以通過令人興奮的插件輕鬆插入內容，這些插件在某種程度上迎合了響應式設備，但真正的原生響應式網站是一個更難破解的 cookie，您在內容中發現最多的東西之一是圖表，圖形和其他通過數字描述故事的數據可視化。 《紐約時報》是一個很好的例子，說明響應式網站如何需要一組響應式工具來為最新的選舉結果創建動態可視化。

這就是我們分享更多關於數據可視化目錄的原因——數據可視化模式和功能的精彩集合，每個都有一個獨特的頁面、獨特的描述、圖表/圖形/可視化的預覽，以及最重要的是——推薦可用於重新創建此類圖表或可視化的最穩定的最新工具。 這個項目已經做了很多工作，避免使用它來幫助自己更好地理解響應式數據可視化將是一個相當無知的想法。 有大量可用的示例，例如——弧形圖、面積圖、條形圖、頭腦風暴雲、氣泡圖和地圖、公告圖、日曆、連接圖、流程圖、直方圖、折線圖、螺旋圖和無數其他在響應式網站上以創造性的方式顯示您的數據。

由 InVision LABS 製作

Craft 是來自 InVision Labs 的新工具，InVision Labs 是一個著名且享有盛譽的設計軟件平台，多年來已經幫助塑造了網頁設計的格局。 隨著 Craft 的發布，InVision 似乎希望保持該記錄完整無缺，而且他們很可能會這樣做。 Craft 是一款獨一無二的屏幕設計工具。 它直觀、智能，可以完成艱鉅的任務，並且對用戶的需求非常敏感。

創建使用真實數據（由您提供或自定義生成）的動態應用程序原型，以創建獨特的應用程序原型體驗。 庫功能能夠通過雲功能為您的屏幕添加新的和令人興奮的設計元素，因此無論您是想從實時網站中提取數據，還是自己上傳數據，Craft Library 都是可以使用的功能。 我們不太可能在短期內看到這樣一個系統的競爭對手，所以現在學習 Craft 可能意味著你會更適應它計劃在未來發布的新功能。

四四方方的SVG編輯器

Boxy 是一種直接在瀏覽器中操作矢量圖形的新方法。 到目前為止，圖形設計師嚴重依賴使用 Sketch 和 Adob​​e Illustrator 等工具來完成圍繞矢量圖形的常見任務，但使用 Boxy SVG — 您現在可以創建插圖、圖標、橫幅、模型、圖表、按鈕和其他自定義直接從您喜歡的瀏覽器中獲取 SVG 元素。 它具有驚人的功能，當然也很有用。 SVG 已經是響應式設計的未來，而像 Boxy 這樣的工具將確保它保持這種狀態。 將 SVG 圖形集成到您的設計中的好處是無價的。 它們在性能、可擴展性和漂亮的用戶體驗方面非常有用。

用戶體驗引腳

如果您有網頁設計的想法，您可以使用令人驚嘆且靈活的 UXPin 來實現。 這是一個真正不知道任何限制的解決方案。 事實上，你的想像力是你擁有的唯一邊界，所以放手創造你所追求的精確傑作。 使用 UXPin，您可以儘早將簡單和復雜的事情變為現實。

無論您是建立原型還是成熟的項目，UXPin 都沒有界限，因為您可以將其用於任何目的。

至於功能，不用說，還有很多。 從內置庫（如 Material Design 和 Bootstrap）到 HTML 導入、大量組件、交互式表單元素和矢量繪圖工具，所有這些以及更多內容都是您通過 UXPin 獲得的。 立即準備好與令人印象深刻的 UXPin 產生直接差異。

移動友好測試（由 Google 提供）

在這個時代，您的網站或博客與所有設備完全兼容至關重要。 簡而言之，您的頁面必須支持移動設備。 如果您有興趣檢查您網站的靈活性，您最好不要錯過嘗試 Google 自己的移動友好測試。 雖然它是 Search Console 的一部分，但即使您沒有帳戶，您也可以進行測試。

要檢查您的網站或博客的佈局有多流暢，您可以添加 URL 甚至代碼。 點擊測試按鈕後，移動友好測試將處理所有其餘的工作。 在分析頁面後，Mobile-Friendly Test 將提供結果，以及是否有任何錯誤等等。

跨瀏覽器測試

與針對移動設備測試您的網站類似，您需要了解它與不同網絡瀏覽器的兼容性。 幸運的是，您可以從 CrossBrowserTesting 中受益，而不是手動完成所有工作。 借助眾多桌面和移動瀏覽器，該軟件將幫助您針對所有受歡迎的瀏覽器優化您的頁面。 要了解它的要點，您甚至可以觀看可用的演示文稿，並通過卓越的 CrossBrowserTesting 查看所有可能的內容。

該工具包含三個不同的軟件包，可確保 Web 開發人員和團隊找到滿足其需求的正確解決方案。 請記住，您可以開始無風險試用並親身體驗這個強大的解決方案。 一些功能包含手動和自動測試、調試、屏幕截圖、真實設備、並行測試和 CI 集成，僅舉幾例。

原子

Atomic 做兩件事：它幫助您使用現有設計文件（PS 或 Sketch）構建界面，並幫助您使用自定義動畫製作這些設計的原型。 創建不受設備類型限制的自定義應用程序，並了解這些設計如何跨多個平台進行交互。 運動優化引擎可以讓您製作動畫運動，通過一些現代的扭曲來豐富您的應用程序的 UI。 對於您的每個設計，您可以獲得一個自定義 URL，您可以與您的設計團隊或運行不同設備的人員共享該 URL，並查看應用程序原型如何與他們交互。

看，Atomic 在這裡試圖做的是讓開發人員，當然還有設計師，有機會更輕鬆地構建適用於所有主要設備的原型。 單獨編碼這樣的設計會花費大量的時間，但使用 Atomic——該過程被降級為一個單一的設計，在它正在嘗試的所有平台上都同樣出色。 Atomic 會記錄您的設計歷史並記錄您已採取的操作，以便您可以隨時恢復到特定版本。 可以邀請團隊成員一起進行設計協作，並且存在反饋功能以在需要時直接收集反饋。

摺紙

我們不會隱瞞這樣一個事實，其中相當多的工具實際上用於原型設計界面，尤其是用戶界面。 似乎最近幾年市場的大門已經打開，現在谷歌和 Facebook 等公司也紛紛效仿，以滿足專業圖形設計師的需求。 Origami 是一個由 Facebook 構建的設計原型庫。

Origami 已經在 Instagram 和 Facebook Messenger 等流行平台中得到使用，現在任何能夠訪問其開發工具包的人都可以選擇使用 Origami 重新創建一些著名的界面模式。 現代組件使 Origami 的後端如此受歡迎。 滾動、滑動和點擊元素都經過精心設計和製作，以反映最先進技術的可能性。 Origami 作為本機應用程序，可讓您將 Sketch 設計直接導入 Origami，以便您可以在瀏覽器中實時預覽您的設計。 是的，Origami 也適用於桌面原型設計。 在許多方面 - 它是一種通用工具。

微軟流程

借助 Microsoft Flow，我們正在進入更企業級的設計開發。 Flow 用於構建可以代表您自己的開發過程自動執行多項任務的工作流。 為什麼這在設計中會有用？ 嗯，一方面，它有助於跨多個設備同步數據。 其次，它有一個簡潔的通知系統，您可以使用它來設置警報等。 這樣，您的團隊和您的底線在跟上整個設計結構中正在發生的事情時保持不變。

Flow 如此吸引人的原因還在於它可以連接的服務數量——Twitter、Dropbox、Slack、GitHub、Google Drive 等等。 在撰寫本文時，已有 30 多個現成的服務集成。 也不是這樣。 自定義模板將有助於解釋 Flow 如何成為您現有設計工作流程或開發的有用補充——我們不會評判。 每個模板都是為特定目的而設計的，例如當您的老闆給您發送電子郵件時向您發送短信、將 Twitter 線索添加到 CRM 或備份您的文件。 這些模板只是冰山一角，旨在激發您創建根據您需要的確切流程定制的流程。

1140格子

僅限移動設備的開發人員不願意承認這一點，但桌面優先的方法仍然是縮小設計以適合不同設備類型的最佳方式。 開發人員為寬度為 1280 像素的屏幕構建了 1140 個響應式網格，能夠優雅地降級以適應更小的屏幕。 不幸的是，原始網站現已不存在，但所有可用的開源文件仍在 GitHub 上，並且可以使用一些文檔來幫助您構建第一個 CSS 網格網站。

自適應圖像

我們已經學到了很多關於響應式圖像的知識； 其中最重要的是，圖像需要針對所有設備類型進行優化，並縮小圖像以提供最佳的用戶體驗，而無需犧牲網站性能。 試想一下，如果每個網站都開始向訪問者提供性能優化的視覺內容，那麼網絡速度會快多少？

整體網絡流量將下降驚人的數量，但除非這將在本地強制執行，否則在很長一段時間內我們都不會看到這樣的變化。 但是，存在替代方案。 其中之一是自適應圖像。 自適應圖像算法能夠檢測用戶訪問您的頁面所使用的設備類型，並向該用戶提供更專門製作的圖像，以響應屏幕尺寸小得多的設備的要求。 自適應圖像脫穎而出，因為它與流行的內容管理系統無縫集成，而不會導致頁面中斷。 所以本質上，沒有很多理由不使用自適應圖像。

FitVids

媒體（文件、照片、音樂、視頻等）是最能減慢網絡速度的因素。 不幸的是，我們還沒有學會如何管理大量數據來為用戶提供反映極簡功能的瀏覽體驗。 帶寬還不是免費的。 而且在發展中國家肯定會很昂貴。 運行 CSS-Tricks 的 Chris Coyier 在決定用 FitVids 回饋開發者社區時毫不猶豫地回饋了開發者社區，FitVids 是一個流暢的 jQuery 庫，用於在響應式網站中進行無縫視頻嵌入。 為用戶提供這些點對點體驗至關重要。 這樣，他們可能永遠不會質疑他們正在瀏覽的平台的質量。

有線

Wirefy 承擔了從設計草圖到完整原型實現的角色。 為了達到預期的效果，需要有一種快速組合 UI 元素的方法。 這就是Wirefy最適合的地方。 Wirefy 是您可以在其上構建的層。 採取佈局，並根據您自己的要求進行管理。 無論是刪除組件，還是管理樣式功能。 毋庸置疑，構建一個客戶可以實際與之交互的原型將為您提供合理數量的“額外積分”。

適合文本

如果您願意，文本或排版在響應式設計中扮演著重要的角色。 首先，您必須正確佈局，但不能忘記對齊排版。 這將反映訪問您的內容的所有設備和媒體的相同質量。 與 FitVids 類似，這就是 FitText 的用武之地。它是一個簡單的 jQuery 庫，用於縮放與父元素大小相匹配的標題。 這樣，您的重要標題將始終處於聚光燈下，完全符合現代網頁設計標準。

響應者

您必須通過多個物理設備檢查網站設計的兼容性的日子已經一去不復返了。 的確，這樣的時代是存在的。 但是由於軟件的發展，現在您可以在大量設備上檢查網站的響應能力。 您只需將您的網站 URL 輸入到諸如 Responsinator 之類的工具中即可。 這確實是一項非凡的設計技術壯舉，將在設計過程中為您節省大量時間。 現在，您可以加載您的網站，並針對最流行的現代智能設備對其進行測試。 現在，您將能夠查看是否可以隨時改進您的網站。

幽靈實驗室

Ghostlab 為瀏覽器中的測試帶來了獨特的變化。 Ghostlab 的引擎可以連接大量設備，讓您從一個位置瀏覽各種設備上的網站。 這使您可以實時了解您的代碼在您的設備列表中的執行情況。 例如，您可能正在尋找樣式表中的錯誤。 您可以使用 Ghostlab 的代碼檢查器來修復任何代碼問題。 您對主設備所做的所有更改都將實時反映在所有其他設備上。 這是 Ghostlab 最好的部分。 您甚至可以檢查 JavaScript 並對其進行修改。 Ghostlab 還將同步在線和離線設備。 一旦您上線，這會迅速將任何新更改推送到您的生產服務器。 除此之外，Ghostlab 還是現代前端開發技術的熱心支持者。 它使開發人員對改進他們的開發工作流程感興趣。

面向前端開發人員的響應式網頁設計工具

怎樣才能很好地刷新記憶和理解？ 我們介紹了一些非常令人驚嘆的工具，但響應式設計工具的市場隨著時間的推移而增長。 有時，這不僅僅是為我們提供直接代碼提示的工具，或者是一個可以使用的框架。 激勵我們使我們的應用程序和網站在真正關注設計的地方更具響應性的工具。 用戶體驗永遠是第一位的，沒有比改進用戶界面更好的方法來改善用戶體驗。 這就是成為您正在構建的體驗的東西。 你從這個列表中找到了一些新的想法嗎？ 我們很樂意讓您與我們分享它們，總是鼓舞人心地閱讀其他人的想法！