有效的設計積累讓我們事半功倍。養(yǎng)成隨手記錄的習慣，逐漸形成自己的素材庫，不僅能夠讓我們在需要的時候能夠快速檢索靈感，偶爾回顧也總能有新的感受。
1. 字體識別神器：WhatFont
當你想知道一個設計精美的網站設計使用了什么字體時，可以安裝一款叫做 WhatFont 的瀏覽器插件，開啟時鼠標 hover 到文字上即可快速識別出字體、字號、字重、行高和顏色。對于不習慣使用控制臺的朋友來說非常簡單實用。
插件最新的版本停留在 2017 年，不過在大部分網頁上都是可以正常使用的。同類產品還有 Fonts Ninja 等，除了識別字體還可以收藏和管理字體，可根據你的需要進行選擇。
地址：https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
2. 用戶體驗設計檔案: UXArchive
該網站收集了來自世界一流的科技公司的產品用戶體驗流程。例如，你正在設計“忘記密碼”體驗，需要參考時通常都是打開不同的 App 一個一個體驗和截圖。而通過這個網站，你可以根據場景快速瀏覽其他公司的示例，對比不同的解決方案。
地址： https://uxarchive.com/
3. 靈感速記: Flomo
Flomo 是一款非常輕量的筆記工具，用類似發(fā)微博的方式快速記錄一些知識片段。相比剪藏已有的內容，Flomo 更注重主動創(chuàng)造和記錄。產品的功能目前非常簡單，但背后的「卡片筆記法」理念很有意思，提倡先快速積累卡片，然后通過標簽和關聯讓結構涌現，積累知識的復利。感興趣的朋友可以了解他們對于“知識管理”的思考。
地址：https://help.flomoapp.com/weekly/orgin
調研和分析當我們進入到產品設計工作中時，了解用戶往往是最重要的前提和基石。大公司的團隊往往有專職的用戶調研團隊來協(xié)助產品設計，但對小型一點都團隊可能用戶調研這個流程是全部歸到設計師角色里的。而且即使有專門的用研報告，直接觀察用戶的行為和描述往往是最直觀的，也更容易洞察到問題和機會。這里介紹兩種我們常用的低成本的方法。
1. 用戶反饋什么: 七麥
如果你的產品是一個成熟的上架了各大應用商店的 App，可以通過一些第三方平臺看到各應用商店的評分評論匯總，構成和趨勢，也可以將自己的 App 和競品放到一起對比。例如我日常使用的“七麥”，可以通過微信訂閱每日評分變化，也可以導出指定時間段的評論的匯總表格，做更深入的檢索和分析。
地址：https://xintu.qimai.cn/
2. 用戶談論什么: 微博
商店評分和用戶反饋通常的內容通常比較有針對性，大部分都是圍繞已有的功能。如果想要看到用戶在生活中如何使用我們的產品，使用過程中有什么樣的情緒和感受，看他們如何理解在用的這個東西，則可以去社交平臺上搜索產品的關鍵詞，常常會有些很有趣的發(fā)現。據說早期微信的剪刀石頭布的想法就來源于一個微博用戶的分享。
設計和打磨來到我們最熟悉的設計實操階段。設計類工具非常多，Sketch 和 Figma 也都有相對豐富的插件市場，這里選擇了幾個我們日常使用的小工具來進行分享。聰明地使用已有資源，可以幫助我們呈現最好的設計概念。
1. Mesh Gradient 網格漸變工具
一款 Figma 插件，Illustrator 里強大的 Mesh 功能在 Figma 里也能用了。做好的漸變還可以保存下來多次復用。
地址：https://xintu.figma.com/community/plugin/958202093377483021/Mesh-Gradient
2. Runner Pro
如果你主力使用 Sketch，習慣鍵盤操作，熟悉各種指令名稱，而且有完整的組件庫，那么 Runner Pro 將會是一個很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系統(tǒng)聚焦搜索，通過一個搜索框即可快速完成組件插入，指令運行，插件安裝，以及快速前往某個畫板。
Runner 的組件搜索支持中文，但對于多個關鍵詞的模糊搜索還是對英文支持比較完整。
地址：https://sketchrunner.com/
3. Blush 插畫插件
一個由 Pablo Stanley 設計的免費可商用的手繪風格的插圖庫。任務造型有數十種選項可供選擇，可以自定義角色的頭發(fā)、褲子、膚色等等，無需打開 Illustrator 即可創(chuàng)建獨一無二的插圖。適合用來做運營插畫，拼用戶故事版，PPT 配圖等。需要搭梯子訪問。
地址： https://blush.design/zh-CN
另外也有越來越多的設計師開始用 Figma 的原型功能直接做 PPT 了，順應這個趨勢他們還提供同系列的 PPT 模板，一鍵套娃。
4. POSE 人體姿勢參考
在自己畫人物插畫的時候，如果對人體動作和比例難以把握，那一定不能錯過這個插件—POSE。它是我發(fā)現的用于創(chuàng)建解剖學和身體插圖的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有眾多的粉絲，這是他在 Snapchat 做插畫師時創(chuàng)作的軟件。
地址： https://galshir.com/pose/
5. 動畫曲線預覽
細膩的動畫能夠讓體驗更有溫度，這個網站提供了五種簡單的網頁版式和最基礎的三組動畫曲線，你可以選擇最適合你的 demo，體驗不同動畫曲線在實際頁面上的感受。底部還可以調整具體參數來達到想要的效果。
地址： https://easings.co/
輸出還原需求過程中我們需要反復和上下游溝通，在這個階段里設計稿是解決方案的可視化呈現，是中間產物，首先要滿足方便溝通和傳遞的訴求。方案定稿后，交付的則是產品的設計藍圖，首要確保方案的完整性，要能夠拆解和執(zhí)行。
1. Design Project Template
這是由 Dropbox 團隊整理的設計項目模板，可以從 Figma Community 中復制一份使用。每份設計稿都包含基礎的項目信息，責任人，進度等概覽信息，尤其對于直接和開發(fā)、產品經理共享 Figma 稿件的團隊而言很好地保留了相關的上下文信息，提升項目溝通效率。
地址：https://xintu.figma.com/community/file/855188719022244530
2. 設計協(xié)作工具 XSHOW
XSHOW 是一款由 ISUX 研發(fā)的高效設計協(xié)作平臺，通過其官方 Sketch 插件，你可一鍵將設計稿上傳到云端，XSHOW 會保留完整的版本記錄和成員操作。上傳到云端后分享給開發(fā)人員即可在線查看標注，多端預覽。除此之外 XSHOW 的團隊管理還可以控制權限時效，這一點在敏感項目對外合作的場景下可以說非常實用了。
地址: https://xshow.tencent.com
3. 還原自檢 Window Resizer + Zeplin
Window Resizer 是一款 Chrome 插件，正如其名就是可以把瀏覽器窗口固定到指定尺寸，可用于檢查網頁的自適應策略，或截特定尺寸的圖。
我們常常配合標注工具 Zeplin 的疊圖功能使用。將瀏覽器設置為和設計稿相同的尺寸，再將半透明設計稿疊上去即可一眼看出網頁是否還原到位，還有哪些地方需要調整。一圖勝千言，再也不怕開發(fā)哥哥說“看不出來”了，顯著提升了溝通效率和團隊和諧氣氛。
使用示例: 上層為設計稿，下層為對應瀏覽器尺寸的實現效果。
Window Resizer地址：https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
Zeplin地址：https://zeplin.io/
4. 圖片壓縮工具
如果仍采用非在線的較為傳統(tǒng)的交付方式，通常需要導出為圖片發(fā)給對方。有時輸出網頁設計或者完整流程交互稿的尺寸較大，可以多做一步壓縮工作。一來同步方案的時候合作方更容易打開，另外需要導出多個版本時占用我們自己電腦空間也比較少。
如果圖片在 5M 以內或者需要批量處理，可以用 ImageOptim 或者 Tinypng 應用來進行無損壓縮，通?？梢詼p少 60-90% 左右。但如果圖片尺寸超過 5M，使用以上兩個應用耗時較長而且容易失敗，此時可以試試在線壓縮網站 ，即使是超過 20M 的大圖也可以穩(wěn)定壓縮。
地址：https://compresspng.com/
5. Rotato 動態(tài) Mockup
Rotato 提供了很多常見的動態(tài) Mockup 效果，只要將你的設計稿放進去（圖片或視頻皆可），即可快速實現高端大氣的展示效果，支持非常完備的蘋果設備以及部分主流安卓設備，效果包括界面的反轉，拉近，滾動展示等。
地址： https://xintu.rotato.app/mockups
數據驗證設計上線后效果如何？有效的驗證能夠幫助我們有目的持續(xù)迭代精進。
1. AB 測試用戶樣本計算小工具
AB 測試，也稱為分桶測試或分批測試。AB 測試本質上就是把平臺的流量分為為幾個不同的組進行實驗，然后觀察不同組的用戶數據指標，例如：點擊率、次日留存、人均觀看時長等等核心指標，最終選擇一個更有效的實驗組上線。
在開始設計實驗之前，需要明確實驗的目標?；诩僭O方案中的元素個數，AB 測試可以分為單一變量測試和多變量測試。這里以單一變量為例來進行簡單的說明，如何進行流量分桶。我們推薦這個免費的小工具，來進行流量分配，根據實驗的預期結果，大盤用戶量，來確定實驗所需最小流量。
地址：https://xintu.evanmiller.org/ab-testing/sample-size.html
以騰訊文檔里面某一個按鈕的點擊率為例，目前大盤點擊率為 5%，預期實驗能夠提升 0.5pp。
這個工具還可以進行很多其他維度的流量配置，感興趣的同學可以進行深入的研究。我們希望大家在設計的同時，能夠大膽創(chuàng)新的提出假設，然后進行科學的驗證，從而得到一個更有效的設計。
極速打工人設計效率神器合集下載網址1. 字體識別神器：WhatFont
地址：https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
2. 用戶體驗設計檔案: UXArchive
地址：https://uxarchive.com/
3. 素材管理: Eagle
地址：https://cn.eagle.cool/
4. 靈感速記: Flomo
地址：https://help.flomoapp.com/weekly/orgin
5. 用戶反饋什么: 七麥
地址：https://xintu.qimai.cn/
6. 用戶談論什么: 微博
地址：https://weibo.com/
7. Mesh Gradient 網格漸變工具
地址：https://xintu.figma.com/community/plugin/958202093377483021/Mesh-Gradient
8. Runner Pro
地址：https://sketchrunner.com/
9. Blush 插畫插件
地址：https://blush.design/zh-CN
10. POSE 人體姿勢參考
地址：https://galshir.com/pose/
11. 動畫曲線預覽
地址： https://easings.co/
12. Design Project Template
地址：https://xintu.figma.com/community/file/855188719022244530
13. 設計協(xié)作工具 XSHOW
地址: https://xshow.tencent.com
14. 還原自檢 Window Resizer + Zeplin
Window Resizer地址：https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
Zeplin地址：https://zeplin.io/
15. 圖片壓縮工具
地址：https://compresspng.com/
16. Rotato 動態(tài) Mockup
地址：https://xintu.rotato.app/mockups
17. AB 測試用戶樣本計算小工具
地址：https://xintu.evanmiller.org/ab-testing/sample-size.html
