Google 設(shè)計(jì)師分享: 7 個(gè)您需要收藏的設(shè)計(jì)資源

作者 / Ryan Warrender, Product Partnership and Design, Google

我的職業(yè)生涯大體上是在做兩件事情: 設(shè)計(jì)網(wǎng)絡(luò)體驗(yàn)，然后找機(jī)會(huì)把它打磨得更好。我有幸曾經(jīng)與很多行業(yè)中的頂尖 Web 開發(fā)團(tuán)隊(duì)合作，其中每個(gè)團(tuán)隊(duì)都有獨(dú)特的需要解決的項(xiàng)目問題，以及解決問題時(shí)面臨的資源限制。所以有些時(shí)候，想打造直觀、可靠、快速和引人入勝的 Web 體驗(yàn)似乎顯得十分困難。如今在網(wǎng)絡(luò)上有不少免費(fèi)的資源和工具出現(xiàn)，這也讓今天的設(shè)計(jì)師們輕松不少。我希望本文里分享的這些資源和工具能盡可能地幫助到您和您的團(tuán)隊(duì)。

1. Web.Dev & 2. Lighthouse

 Lighthouse 生成的性能表現(xiàn)報(bào)告

如果您光是打開自己的頁(yè)面時(shí)就很花時(shí)間，那想要高效地進(jìn)行改進(jìn)就無從談起了。有時(shí)候，想要找到特定頁(yè)面渲染緩慢的原因可能是十分困難的事。改進(jìn)的最佳方法是退后一步，用另一種視角來進(jìn)行觀察。Web.Dev 適用于每個(gè) Web 開發(fā)團(tuán)隊(duì)。Web.Dev 的核心是 Lighthouse，這是一個(gè)開源的自動(dòng)化工具，旨在提高您的網(wǎng)頁(yè)的質(zhì)量。您可以針對(duì)任何頁(yè)面運(yùn)行 Lighthouse 檢查。此工具提供有關(guān)性能、可訪問性、漸進(jìn) / 異步式 Web 應(yīng)用等方面的詳細(xì)報(bào)告。

您的團(tuán)隊(duì)?wèi)?yīng)考慮設(shè)置跨需求 / 高效率運(yùn)行的相關(guān)指標(biāo)，并直接將 Lighthouse 里給出的建議添加到產(chǎn)品的 Todo 事項(xiàng)中。如果您的產(chǎn)品路線圖上包括了提升性能表現(xiàn)這一項(xiàng) (如果沒有，請(qǐng)務(wù)必加上)，那么這個(gè)工具就會(huì)成為您最好的朋友。如果您仍然需要更多資源和知識(shí)來進(jìn)一步提高網(wǎng)站速度，Google 也有給出一份非常完整的檢查清單: 

推薦考慮的性能指標(biāo):

< 2s - First Content Paint (FCP)

< 3 - Speed Index (SI)

< 5 - Time to Interactive (TTI)

哪些人會(huì)需要這個(gè)工具？

所有人。產(chǎn)品經(jīng)理、工程師、設(shè)計(jì)師、營(yíng)銷人員。

Web.Dev

https://web.dev/

Lighthouse

https://developers.google.cn/web/tools/lighthouse/

Google 知識(shí)庫(kù) - 如何提升性能表現(xiàn)

https://developers.google.cn/web/fundamentals/performance/speed-tools/pdf/Infographic-How_To_Think_About_Speed_Tools.pdf

3. Gallery

想要設(shè)計(jì)一個(gè)成功的網(wǎng)站，很關(guān)鍵的一點(diǎn)是獲得同行和用戶的反饋。Gallery 簡(jiǎn)化了產(chǎn)品設(shè)計(jì)時(shí)的組織和協(xié)作流程。這個(gè)由 Material Design 驅(qū)動(dòng)的項(xiàng)目是任何 UX 設(shè)計(jì)師必備的工具。該協(xié)作工具可以讓您快速有效地上傳設(shè)計(jì)作品，獲取反饋并進(jìn)行迭代。UI 非常容易使用，特別是當(dāng)您是 G Suite 用戶的時(shí)候。另外，Gallery 在 Android 和 iOS 平臺(tái)上都可以使用。

哪些人會(huì)需要這個(gè)工具？

設(shè)計(jì)師和產(chǎn)品經(jīng)理

Gallery

https://material.io/tools/gallery/

4. Workbox

想要構(gòu)建一個(gè)漸進(jìn) / 異步式的 Web 應(yīng)用 (Progressive Web App, PWA)？Workbox 可以讓您輕松上手。伴隨著 PWA 強(qiáng)勁的發(fā)展勢(shì)頭，開發(fā)者們正在尋找構(gòu)建最佳 Web 應(yīng)用的方法。Workbox 擁有細(xì)致的逐步代碼教學(xué)以及大量最佳實(shí)踐指南。如果您是開發(fā)者，并且考慮將站點(diǎn)更新為 PWA，那么 Workbox 可以說是不二之選。

哪些人會(huì)需要這個(gè)工具？

產(chǎn)品經(jīng)理和工程師

Workbox

https://developers.google.cn/web/tools/workbox/

5. Material Design 顏色工具

正打算進(jìn)行設(shè)計(jì)改版？或者打算設(shè)計(jì)新網(wǎng)站？我強(qiáng)烈建議您使用 Material Design Color Tool。這個(gè)工具允許您為 UI 創(chuàng)建、共享和應(yīng)用自定義的調(diào)色板。只需輸入一個(gè)十六進(jìn)制顏色，它就可以提供完整的包含深色 / 深色等變調(diào)的顏色方案。該工具不僅可以幫助您提升品牌形象，還可以確保您的作品能夠符合可訪問性最佳實(shí)踐。這個(gè)簡(jiǎn)單有效的工具讓您可以輕松地在 Android、iOS 甚至 CodePen 上共享設(shè)計(jì)成果。另外，如果打算從顏色進(jìn)階到樣式風(fēng)格設(shè)計(jì)的話，我還強(qiáng)烈推薦 Material Theme Editor。

哪些人會(huì)需要這個(gè)工具？

設(shè)計(jì)師

Material Design Color Tool

https://material.io/tools/color/#!/

6. Data Studio

對(duì)用戶行為以及其產(chǎn)生的數(shù)據(jù)的充分解讀，是精確改善產(chǎn)品的重要前提。另外，迭代 Web 體驗(yàn)需要整個(gè)團(tuán)隊(duì)共同努力。Data Studio 可以輕松提取出有意義的用戶互動(dòng)數(shù)據(jù)，而且我自己就看過很多用 Data Studio 打造的精彩的自定義數(shù)據(jù)報(bào)表，比如 Frictionless E-commerce Mobile Dashboard (由我的同行 Damla Cakirca 制作)。Data Studio 允許您為任何團(tuán)隊(duì)成員創(chuàng)建定制視圖以及添加注釋，以便解讀數(shù)據(jù)。它還允許您輕松從電子表格、分析報(bào)告、Google Ads 等數(shù)據(jù)來源導(dǎo)入數(shù)據(jù)。

雖然聽起來很強(qiáng)大，但 Data Studio 的最大優(yōu)點(diǎn)依然是簡(jiǎn)單，無論您在團(tuán)隊(duì)中的角色是什么，您都可以將原始數(shù)據(jù)轉(zhuǎn)換為富有洞察力的指標(biāo)和視點(diǎn)。更棒的是，做到這些壓根不需要學(xué)習(xí)編寫代碼和查詢語句。

哪些人會(huì)需要這個(gè)工具？

所有人。產(chǎn)品經(jīng)理、工程師、設(shè)計(jì)師、營(yíng)銷人員。

Data Studio

https://marketingplatform.google.com/about/data-studio/

Frictionless E-commerce Mobile Dashboard

https://datastudio.google.cn/reporting/1hSATNz_FDxweWwZu59luH-fQSp93xtLm/page/nQN

7. CrUX Dashboard

Chrome User Experience Report (CrUX) Dashboard 是一份綜合的用戶交互數(shù)據(jù)報(bào)告。報(bào)告中包含的所有性能數(shù)據(jù)均來自您的站點(diǎn)的真實(shí)用戶，這些數(shù)據(jù)來自已經(jīng)選擇同步其瀏覽歷史記錄，并啟用了統(tǒng)計(jì)數(shù)據(jù)反饋功能的 Chrome 用戶。此工具基于 Data Studio 構(gòu)建，可以自動(dòng)同步最新的用戶數(shù)據(jù)，且能夠輕松自定義，并與團(tuán)隊(duì)中的每個(gè)人共享。當(dāng)然，想要與您的競(jìng)品網(wǎng)站進(jìn)行數(shù)據(jù)對(duì)比也毫無問題。

哪些人會(huì)需要這個(gè)工具？

產(chǎn)品經(jīng)理和工程師

CrUX Dashboard

https://developers.google.cn/web/updates/2018/08/chrome-ux-report-dashboard

希望上面分享的這些資源和工具可以簡(jiǎn)化您的工作流程，并幫助您的團(tuán)隊(duì)更好地共享項(xiàng)目目標(biāo)。

（原文鏈接：https://mp.weixin.qq.com/s/uvun5Z9crrVYWkRG1JiITA）