10 個適用於設計師的 Google Chrome 擴展

如果您是遵循標准設計流程的網頁設計師，您的任務包括：

• 研究
• 線框圖
• 選擇配色方案
• 選擇正確的字體
• 測試幾種變體
• 與客戶和隊友合作

還有一些……

您知道您可以在瀏覽器中完成所有這些以及更多操作嗎？ 是的，如果您是 Google Chrome 專業人士，那麼您可以通過 Chrome 的擴展程序完成所有這些任務。 他們中的大多數只需點擊幾下。

因此，節省大量時間並為設計師試用這 10 個 Google Chrome 擴展程序。

1.響應式網頁設計測試員

發布穀歌的移動友好更新，響應能力是流行語！ 因此，這是一個擴展程序，可讓您在所有主要的 Android 和 Apple 移動設備上測試您的網站。

它也可以離線工作，因此即使您在本地進行設計，它也是一個不錯的選擇。 它具有適用於所有流行設備的預設，但您也可以添加自定義尺寸。

選擇要預覽的設備後，當前選項卡會在彈出窗口中打開，顯示您的頁面在該設備上的外觀。

2. TypeWonder

字體確實設置了網站的氛圍，但選擇合適的字體是一項艱鉅的任務。 你知道這個練習——回到你的代碼，進行更改和預覽。 而這一切一遍又一遍。

但這裡是這個方便的字體擴展的地方。TypeWonder 允許您更改瀏覽器中任何網站的字體。

只需訪問您的網站並單擊擴展程序的圖標即可。 您有幾個字體選項。 單擊任何一個幾乎都會立即以該字體創建您網站的預覽。 如果您對預覽感到滿意，您可以獲取相關代碼以添加到您的網站及其 CSS 文件中。

3.標籤打包器

研究是一件大事。 如果你是一個認真研究研究的設計師，我可以肯定地說，在任何時候，你至少打開了七到十個標籤。

如果您必須徵求設計師朋友或隊友對您所指網站的意見怎麼辦？ 您將為文件夾中的所有頁面添加書籤，將其全部導出，然後選擇要發送的集合，當然，在打開郵件程序之後。 相當一些工作！

幸運的是，你不必這麼辛苦。 Tab Packager 可讓您打包所有打開的選項卡。 然後，您只需單擊一下即可通過包裹的鏈接發送。 您可以通過電子郵件、Twitter 和更多服務進行分享。

4. 田徑鴨

有效的溝通是每個成功項目的背後。 但是，在電子郵件中反复嘗試進行細微的調整或進行重大更改可能會很費力。

現在這聽起來可能有點誇大其詞，但 TrackDuck 就像一個迷你體式，專為設計師設計。

TrackDuck 是一種可視化協作工具，可讓您將網站添加為項目。 添加項目後，您可以邀請您的團隊成員加入。 每當您對該項目（或網站 - 您只需單擊擴展程序的圖標即可）發表評論時，就會生成有關評論的任務。 您可以將此任務分配給您的隊友，添加附件和屏幕截圖，並將其與許多協作工具（如 Trello 和 Basecamp）集成。

5. ColorZilla

你永遠不知道什麼時候會看到一種可愛的顏色，它會激發你下一個 Web 項目的調色板。

那麼，您如何捕捉網絡上的任何顏色？

好吧，這就是 ColorZilla——它很容易成為每個設計師最喜歡的 Chrome 好東西。 它最基本和最受歡迎的功能是獲取網頁上任何顏色的代碼。

另一個功能是它可以讓您獲得任何網站的配色方案。 您必須單擊網頁顏色分析器選項，然後會出現一個顯示該網頁上所有顏色的調色板。

6.什麼字體

當您遇到一個使用完美字體、顏色和大小的網站時，有很多次。 事實上，您想在您的網站上使用確切的組合可能會非常好。

但是您不必再採用 Inspect Element 路線了——WhatFont 只需單擊一下即可剖析網頁上的任何字體。

只需單擊擴展程序的圖標並將鼠標懸停在您感興趣的文本部分上。WhatFont 會生成字體類型、大小、高度、顏色和系列。

7.即時線框

如果您在設計網站之前定義了網站的信息層次結構，您將創建一個用戶友好的網站。 線框圖是解決這個問題的最佳方式。

Instant Wireframe 擴展可讓您查看任何網頁的相當好的線框。 它仍處於測試階段，但做得很好。

如果您遇到想要查看其線框的網站，只需單擊地址欄中的擴展程序圖標即可。 值得嘗試！

8.頁尺

有幾種方法可以測量網頁元素的尺寸。 但其中大多數涉及多個步驟並且需要時間。

Page Ruler 是最方便的方法。 Page Ruler 可讓您查看元素的高度、寬度和相對位置。 您還可以按 div 分析元素。

它非常適合創建像素完美的橫幅、特色圖像和其他營銷材料。

9. Chrome 的調色板

網站上充斥著圖像，你不能說你什麼時候會看到一張足夠好的圖像來激發調色板的靈感。

但您不必擔心，因為 Palette for Chrome 始終為您提供保障。 只需右鍵單擊您覺得有趣的圖像，然後選擇此擴展程序的選項。 它將立即創建一個受所選圖像啟發的調色板。 您可以指定要為配色方案生成的顏色數量。

如果有辦法導出配色方案，我會更喜歡它。 但是擴展仍然是必須的。

10. ExtensionMuzli – 設計早餐

您知道，當您剛剛開始時，您訂閱了您所在領域內的所有熱門博客。 您的 RSS 提要已全部啟動。 但是隨著你的工作堆積起來，你會有點脫節。 並不是你不需要靈感，只是很難趕上。

ExtensionMuzli 就是為了彌補這一點而構建的。 它從大約 12-15 個頂級設計資源中挑選故事。 如果您想切換，還有一個網頁設計工作部分。

安裝此擴展程序後，您的新標籤將包含來自網絡的一些最新的勵誌或教育設計故事。 它提供了一種簡潔的方式來密切關注您的利基市場中的最新消息。

所以，你去吧。 使用這些令人驚嘆的網頁設計師擴展程序為您的 Chrome 提供動力，並觀察您的生產力飆升。 你如何分解你的設計過程，你使用什麼擴展來完成什麼任務？ 我很想了解更多。