2022-10-13 資深UI設(shè)計(jì)者
距離業(yè)界首次提出“全鏈路設(shè)計(jì)師”這個(gè)概念已經(jīng)過(guò)去了幾年，從稱謂的變化我們就可以感受到設(shè)計(jì)師這一角色職責(zé)的變化。在近幾年的產(chǎn)品設(shè)計(jì)工作中，我們和上下游之間的協(xié)作越來(lái)越緊密，介入階段越來(lái)越往前，新的趨勢(shì)對(duì)設(shè)計(jì)師也提出了更高的要求，包括更深入的產(chǎn)品思考，對(duì)用戶的時(shí)時(shí)洞察，高效的溝通合作，以及細(xì)致的質(zhì)量把控等等。那么如何成為一個(gè)全能型的互聯(lián)網(wǎng)設(shè)計(jì)師呢？本文以日常工作流程為路徑，為大家整理了一波實(shí)用小技巧和小工具。希望能夠幫助大家在保持設(shè)計(jì)的專業(yè)度的同時(shí)，在工作的方方面面都能夠得心應(yīng)手。
有效的設(shè)計(jì)積累讓我們事半功倍。養(yǎng)成隨手記錄的習(xí)慣，逐漸形成自己的素材庫(kù)，不僅能夠讓我們?cè)谛枰臅r(shí)候能夠快速檢索靈感，偶爾回顧也總能有新的感受。
字體識(shí)別神器：WhatFont
當(dāng)你想知道一個(gè)設(shè)計(jì)精美的網(wǎng)站設(shè)計(jì)使用了什么字體時(shí)，可以安裝一款叫做 WhatFont 的瀏覽器插件，開啟時(shí)鼠標(biāo) hover 到文字上即可快速識(shí)別出字體、字號(hào)、字重、行高和顏色。對(duì)于不習(xí)慣使用控制臺(tái)的朋友來(lái)說(shuō)非常簡(jiǎn)單實(shí)用。
插件最新的版本停留在 2017 年，不過(guò)在大部分網(wǎng)頁(yè)上都是可以正常使用的。同類產(chǎn)品還有 Fonts Ninja 等，除了識(shí)別字體還可以收藏和管理字體，可根據(jù)你的需要進(jìn)行選擇。
用戶體驗(yàn)設(shè)計(jì)檔案: UXArchive
該網(wǎng)站收集了來(lái)自世界一流的科技公司的產(chǎn)品用戶體驗(yàn)流程。例如，你正在設(shè)計(jì)“忘記密碼”體驗(yàn)，需要參考時(shí)通常都是打開不同的 App 一個(gè)一個(gè)體驗(yàn)和截圖。而通過(guò)這個(gè)網(wǎng)站，你可以根據(jù)場(chǎng)景快速瀏覽其他公司的示例，對(duì)比不同的解決方案。
地址：https://uxarchive.com/
素材管理: Eagle
Eagle 應(yīng)該是很多設(shè)計(jì)師耳熟能詳?shù)乃夭墓芾懋a(chǎn)品了，它支持圖片和視頻等基礎(chǔ)格式，有豐富的標(biāo)簽系統(tǒng)和智能分類功能。此外還支持可視的字體管理，也能夠預(yù)覽 PSD 格式（常用的圖形和文稿格式基本都支持），可用于放一些 mockup 素材。自動(dòng)解析圖片色板，從而允許按顏色搜索也是相當(dāng)實(shí)用。
地址：https://cn.eagle.cool/
靈感速記: Flomo
Flomo 是一款非常輕量的筆記工具，用類似發(fā)微博的方式快速記錄一些知識(shí)片段。相比 Eagle 用于“剪藏”已有的內(nèi)容，F(xiàn)lomo 更注重主動(dòng)創(chuàng)造和記錄。產(chǎn)品的功能目前非常簡(jiǎn)單，但背后的「卡片筆記法」理念很有意思，提倡先快速積累卡片，然后通過(guò)標(biāo)簽和關(guān)聯(lián)讓結(jié)構(gòu)涌現(xiàn)，積累知識(shí)的復(fù)利。感興趣的朋友可以了解他們對(duì)于“知識(shí)管理”的思考。
地址：https://help.flomoapp.com/weekly/orgin
當(dāng)我們進(jìn)入到產(chǎn)品設(shè)計(jì)工作中時(shí)，了解用戶往往是最重要的前提和基石。大公司的團(tuán)隊(duì)往往有專職的用戶調(diào)研團(tuán)隊(duì)來(lái)協(xié)助產(chǎn)品設(shè)計(jì)，但對(duì)小型一點(diǎn)都團(tuán)隊(duì)可能用戶調(diào)研這個(gè)流程是全部歸到設(shè)計(jì)師角色里的。而且即使有專門的用研報(bào)告，直接觀察用戶的行為和描述往往是最直觀的，也更容易洞察到問題和機(jī)會(huì)。這里介紹兩種我們常用的低成本的方法。
用戶反饋什么: 七麥
如果你的產(chǎn)品是一個(gè)成熟的上架了各大應(yīng)用商店的 App，可以通過(guò)一些第三方平臺(tái)看到各應(yīng)用商店的評(píng)分評(píng)論匯總，構(gòu)成和趨勢(shì)，也可以將自己的 App 和競(jìng)品放到一起對(duì)比。例如我日常使用的“七麥”，可以通過(guò)微信訂閱每日評(píng)分變化，也可以導(dǎo)出指定時(shí)間段的評(píng)論的匯總表格，做更深入的檢索和分析。
用戶談?wù)撌裁? 微博
商店評(píng)分和用戶反饋通常的內(nèi)容通常比較有針對(duì)性，大部分都是圍繞已有的功能。如果想要看到用戶在生活中如何使用我們的產(chǎn)品，使用過(guò)程中有什么樣的情緒和感受，看他們?nèi)绾卫斫庠谟玫倪@個(gè)東西，則可以去社交平臺(tái)上搜索產(chǎn)品的關(guān)鍵詞，常常會(huì)有些很有趣的發(fā)現(xiàn)。據(jù)說(shuō)早期微信的剪刀石頭布的想法就來(lái)源于一個(gè)微博用戶的分享。
來(lái)到我們最熟悉的設(shè)計(jì)實(shí)操階段。設(shè)計(jì)類工具非常多，Sketch 和 Figma 也都有相對(duì)豐富的插件市場(chǎng)，這里選擇了幾個(gè)我們?nèi)粘Ｊ褂玫男」ぞ邅?lái)進(jìn)行分享。聰明地使用已有資源，可以幫助我們呈現(xiàn)最好的設(shè)計(jì)概念。
Mesh Gradient 網(wǎng)格漸變工具
一款 Figma 插件，Illustrator 里強(qiáng)大的 Mesh 功能在 Figma 里也能用了。做好的漸變還可以保存下來(lái)多次復(fù)用。
Runner Pro
如果你主力使用 Sketch，習(xí)慣鍵盤操作，熟悉各種指令名稱，而且有完整的組件庫(kù)，那么 Runner Pro 將會(huì)是一個(gè)很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系統(tǒng)聚焦搜索，通過(guò)一個(gè)搜索框即可快速完成組件插入，指令運(yùn)行，插件安裝，以及快速前往某個(gè)畫板。
Runner 的組件搜索支持中文，但對(duì)于多個(gè)關(guān)鍵詞的模糊搜索還是對(duì)英文支持比較完整。
Blush 插畫插件
一個(gè)由 Pablo Stanley 設(shè)計(jì)的免費(fèi)可商用的手繪風(fēng)格的插圖庫(kù)。任務(wù)造型有數(shù)十種選項(xiàng)可供選擇，可以自定義角色的頭發(fā)、褲子、膚色等等，無(wú)需打開 Illustrator 即可創(chuàng)建獨(dú)一無(wú)二的插圖。適合用來(lái)做運(yùn)營(yíng)插畫，拼用戶故事版，PPT配圖等。
地址：https://blush.design/zh-CN
另外也有越來(lái)越多的設(shè)計(jì)師開始用 Figma 的原型功能直接做 PPT 了，順應(yīng)這個(gè)趨勢(shì)他們還提供同系列的 ppt 模板，一鍵套娃。
POSE 人體姿勢(shì)參考
在自己畫人物插畫的時(shí)候，如果對(duì)人體動(dòng)作和比例難以把握，那一定不能錯(cuò)過(guò)這個(gè)插件—POSE。它是我發(fā)現(xiàn)的用于創(chuàng)建解剖學(xué)和身體插圖的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有眾多的粉絲，這是他在 Snapchat 做插畫師時(shí)創(chuàng)作的軟件。
地址：https://galshir.com/pose/
動(dòng)畫曲線預(yù)覽
細(xì)膩的動(dòng)畫能夠讓體驗(yàn)更有溫度，這個(gè)網(wǎng)站提供了五種簡(jiǎn)單的網(wǎng)頁(yè)版式和最基礎(chǔ)的三組動(dòng)畫曲線，你可以選擇最適合你的 demo，體驗(yàn)不同動(dòng)畫曲線在實(shí)際頁(yè)面上的感受。底部還可以調(diào)整具體參數(shù)來(lái)達(dá)到想要的效果。
地址：
需求過(guò)程中我們需要反復(fù)和上下游溝通，在這個(gè)階段里設(shè)計(jì)稿是解決方案的可視化呈現(xiàn)，是中間產(chǎn)物，首先要滿足方便溝通和傳遞的訴求。方案定稿后，交付的則是產(chǎn)品的設(shè)計(jì)藍(lán)圖，首要確保方案的完整性，要能夠拆解和執(zhí)行。
Design Project Template
這是由 Dropbox 團(tuán)隊(duì)整理的設(shè)計(jì)項(xiàng)目模板，可以從 Figma Community 中復(fù)制一份使用。每份設(shè)計(jì)稿都包含基礎(chǔ)的項(xiàng)目信息，責(zé)任人，進(jìn)度等概覽信息，尤其對(duì)于直接和開發(fā)、產(chǎn)品經(jīng)理共享 Figma 稿件的團(tuán)隊(duì)而言很好地保留了相關(guān)的上下文信息，提升項(xiàng)目溝通效率。
設(shè)計(jì)協(xié)作工具 XSHOW
XSHOW是一款由 ISUX 研發(fā)的高效設(shè)計(jì)協(xié)作平臺(tái)，通過(guò)其官方 Sketch 插件，你可一鍵將設(shè)計(jì)稿上傳到云端，XSHOW 會(huì)保留完整的版本記錄和成員操作。上傳到云端后分享給開發(fā)人員即可在線查看標(biāo)注，多端預(yù)覽。除此之外 XSHOW 的團(tuán)隊(duì)管理還可以控制權(quán)限時(shí)效，這一點(diǎn)在敏感項(xiàng)目對(duì)外合作的場(chǎng)景下可以說(shuō)非常實(shí)用了。
地址:
https://xshow.tencent.com
還原自檢 Window Resizer + Zeplin
Window Resizer 是一款 Chrome 插件，正如其名就是可以把瀏覽器窗口固定到指定尺寸，可用于檢查網(wǎng)頁(yè)的自適應(yīng)策略，或截特定尺寸的圖。
我們常常配合標(biāo)注工具 Zeplin 的疊圖功能使用。將瀏覽器設(shè)置為和設(shè)計(jì)稿相同的尺寸，再將半透明設(shè)計(jì)稿疊上去即可一眼看出網(wǎng)頁(yè)是否還原到位，還有哪些地方需要調(diào)整。一圖勝千言，再也不怕開發(fā)哥哥說(shuō)“看不出來(lái)”了，顯著提升了溝通效率和團(tuán)隊(duì)和諧氣氛。
使用示例: 上層為設(shè)計(jì)稿，下層為對(duì)應(yīng)瀏覽器尺寸的實(shí)現(xiàn)效果。
圖片壓縮工具
如果仍采用非在線的較為傳統(tǒng)的交付方式，通常需要導(dǎo)出為圖片發(fā)給對(duì)方。有時(shí)輸出網(wǎng)頁(yè)設(shè)計(jì)或者完整流程交互稿的尺寸較大，可以多做一步壓縮工作。一來(lái)同步方案的時(shí)候合作方更容易打開，另外需要導(dǎo)出多個(gè)版本時(shí)占用我們自己電腦空間也比較少。
如果圖片在 5M 以內(nèi)或者需要批量處理，可以用 ImageOptim 或者 Tinypng 應(yīng)用來(lái)進(jìn)行無(wú)損壓縮，通常可以減少 60-90% 左右。但如果圖片尺寸超過(guò) 5M ，使用以上兩個(gè)應(yīng)用耗時(shí)較長(zhǎng)而且容易失敗，此時(shí)可以試試在線壓縮網(wǎng)站 https://compresspng.com/，即使是超過(guò) 20M 的大圖也可以穩(wěn)定壓縮。
Rotato 動(dòng)態(tài) Mockup
Rotato 提供了很多常見的動(dòng)態(tài) Mockup 效果，只要將你的設(shè)計(jì)稿放進(jìn)去（圖片或視頻皆可），即可快速實(shí)現(xiàn)高端大氣的展示效果，支持非常完備的蘋果設(shè)備以及部分主流安卓設(shè)備，效果包括界面的反轉(zhuǎn)，拉近，滾動(dòng)展示等。
地址：
https://www.rotato.app/mockups
設(shè)計(jì)上線后效果如何？有效的驗(yàn)證能夠幫助我們有目的持續(xù)迭代精進(jìn)。
AB 測(cè)試用戶樣本計(jì)算小工具
AB 測(cè)試，也稱為分桶測(cè)試或分批測(cè)試。AB測(cè)試本質(zhì)上就是把平臺(tái)的流量分為為幾個(gè)不同的組進(jìn)行實(shí)驗(yàn)，然后觀察不同組的用戶數(shù)據(jù)指標(biāo)，例如：點(diǎn)擊率、次日留存、人均觀看時(shí)長(zhǎng)等等核心指標(biāo)，最終選擇一個(gè)更有效的實(shí)驗(yàn)組上線。
在開始設(shè)計(jì)實(shí)驗(yàn)之前，需要明確實(shí)驗(yàn)的目標(biāo)?；诩僭O(shè)方案中的元素個(gè)數(shù)，AB 測(cè)試可以分為單一變量測(cè)試和多變量測(cè)試。這里以單一變量為例來(lái)進(jìn)行簡(jiǎn)單的說(shuō)明，如何進(jìn)行流量分桶。我們推薦這個(gè)免費(fèi)的小工具，來(lái)進(jìn)行流量分配：https://www.evanmiller.org/ab-testing/sample-size.html，根據(jù)實(shí)驗(yàn)的預(yù)期結(jié)果，大盤用戶量，來(lái)確定實(shí)驗(yàn)所需最小流量。
以騰訊文檔里面某一個(gè)按鈕的點(diǎn)擊率為例，目前大盤點(diǎn)擊率為5%，預(yù)期實(shí)驗(yàn)?zāi)軌蛱嵘?.5pp。
這個(gè)工具還可以進(jìn)行很多其他維度的流量配置，感興趣的同學(xué)可以進(jìn)行深入的研究。我們希望大家在設(shè)計(jì)的同時(shí)，能夠大膽創(chuàng)新的提出假設(shè)，然后進(jìn)行科學(xué)的驗(yàn)證，從而得到一個(gè)更有效的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com