配圖 2：8dp 網(wǎng)格系統(tǒng)示意圖，展示 4/8/16/24/32dp 間距的視覺層級，用不同顏色的矩形模塊排列，標(biāo)注 “Material Design 3 間距標(biāo)準(zhǔn)”，底部配手機(jī)界面應(yīng)用示例。
配圖 3：層級留白策略圖，分宏觀（界面邊緣 20pt 安全邊距）、中觀（模塊間距 24dp）、微觀（按鈕內(nèi)邊距 16dp）三級，用手機(jī)界面剖面圖展示，不同層級留白區(qū)域用不同透明度的藍(lán)色填充。
配圖 4：響應(yīng)式間距對比圖，左側(cè)為 320px 窄屏（16dp 基礎(chǔ)間距），右側(cè)為 1024px 平板屏（24dp 基礎(chǔ)間距），展示相同界面在不同設(shè)備上的間距適配效果，用紅色箭頭標(biāo)注間距變化。
配圖 5：反常識設(shè)計(jì)案例，左側(cè)為 VS Code 代碼編輯區(qū)（最小行間距、零邊距），右側(cè)為 Spotify 播放界面（專輯封面與按鈕間距 20dp，按鈕組間距 16dp 的非對稱設(shè)計(jì)），用對比箭頭連接。
配圖 6：案例解析綜合圖，包含 Figma 工具欄間距（24dp）、Notion 段落排版（行高 1.5 倍）、Airbnb 搜索頁間距（搜索框與標(biāo)簽 32dp），三個(gè)局部界面拼圖，用黃色線條標(biāo)注關(guān)鍵間距數(shù)值。
蘭亭妙微(www.gyxygd.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
好的設(shè)計(jì)可能并非易事。對一個(gè)人來說顯而易見的東西，對另一個(gè)人來說可能毫無意義。設(shè)計(jì)可能感覺很主觀，但我（以及其他設(shè)計(jì)領(lǐng)導(dǎo)）在評審設(shè)計(jì)時(shí)，總會關(guān)注一些因素。
好的設(shè)計(jì)是早期良好協(xié)作的成果。早期設(shè)計(jì)通常不會面面俱到，但我們可以預(yù)見一些細(xì)節(jié)，避免在不盡如人意的設(shè)計(jì)上花費(fèi)太多時(shí)間。
本文檔試圖定義 Dialpad 的設(shè)計(jì)中“好”的真正含義。它為我們提供了一個(gè)共同的目標(biāo)，以便領(lǐng)導(dǎo)層在評審時(shí)能夠充分預(yù)期他們的大部分反饋，并讓他們相信設(shè)計(jì)方向是正確的。
首先，我們必須弄清楚我們?yōu)槭裁匆鲆粋€(gè)項(xiàng)目。是我們要改進(jìn)的指標(biāo)嗎？是我們要解決的未滿足的用戶需求嗎？還是我們要達(dá)成的銷售？在查看任何屏幕之前，我首先需要了解我們?yōu)槭裁匆鲞@件事。這有助于我們在審查設(shè)計(jì)時(shí)堅(jiān)持第一原則。
你知道我們怎么說講故事很重要嗎？這就是我們的意思。
只有了解了這些背景之后，我才能給你真正有用的反饋，而不僅僅是膚淺的“在這里增加間距”類型的反饋。
你并不總是需要幻燈片，1-2 段文字或 30 秒的演講通常就足夠了。我不喜歡被拖進(jìn)一個(gè)沒有任何注釋的 Figma 文件里，也不喜歡僅僅為了了解項(xiàng)目是什么就被鏈接到一個(gè)冗長的 Jira Epic 文件或 15 頁的 PRD 文件。
設(shè)計(jì)領(lǐng)導(dǎo)力涵蓋了很多方面，我依靠你來告訴我什么是項(xiàng)目以及它為什么重要。
對你分享的內(nèi)容和你想要的反饋要有策略性。你不應(yīng)該在設(shè)計(jì)文件中展示和解釋所有內(nèi)容。為此，提前整理好你的想法和 Figma 文件會很有幫助。通過屏幕共享來跟上一個(gè)在 Figma 畫板上快速切換的人的喋喋不休是非常困難的。你很可能無法通過這種方式獲得你想要的反饋。
PM 或工程師通常會在介紹項(xiàng)目時(shí)就已經(jīng)想好了解決方案。它會被包含在 Jira 工單中，在 PRD 中描述，或在會議上提及。這很棒。我們當(dāng)然應(yīng)該探索并汲取其他人的想法。但我也希望看到你們思考自己的點(diǎn)子。
弄清楚自己要做什么是高級設(shè)計(jì)角色的一個(gè)重要部分。
我希望看到你不僅僅是在執(zhí)行別人的想法。我希望看到你至少從兩三個(gè)不同的角度探索過一個(gè)想法（也就是說，不是同一個(gè)想法，只有兩三個(gè)細(xì)微的變化）。
想出不同的解決問題的方法，表明你不僅僅是照做別人說的，而是真正運(yùn)用自己的判斷。這正是一個(gè)人在高級職位上表現(xiàn)出色的原因。不要害怕提問，不要害怕提出大膽的想法。你提出和改進(jìn)想法的方式與實(shí)現(xiàn)想法的方式同樣重要。
Dialpad 已經(jīng)推出一段時(shí)間了，這意味著我們已經(jīng)構(gòu)建了許多快速易用的設(shè)計(jì)模式。但是，如果還有改進(jìn)空間，就不要僅僅滿足于“快速易用”。有時(shí)，新的方法可以讓事情變得更好。
在審查設(shè)計(jì)時(shí)，我會問自己以下有關(guān)一致性和創(chuàng)新性的問題：
如果存在一個(gè)可以完成某項(xiàng)任務(wù)的現(xiàn)有模式，我希望看到它。同時(shí)，如果您認(rèn)為有必要引入一個(gè)新的模式，我也希望看到它。如果您對其中一個(gè)模式有合理的偏好，我會加分。
雖然修復(fù)不一致問題很重要，但我們也應(yīng)該考慮用戶的使用場景。有時(shí)，即使需要付出更多努力，追求更好的體驗(yàn)也同樣重要。有時(shí)，為了保持一致性和速度，最好還是堅(jiān)持現(xiàn)有方案。繪制多個(gè)設(shè)計(jì)方案有助于促進(jìn)這方面的討論。
Dialpad 是一款極其復(fù)雜的產(chǎn)品，包含大量技術(shù)工作流程并生成大量數(shù)據(jù)。
我們的客戶不應(yīng)該知道這一點(diǎn)。
我們的目標(biāo)應(yīng)該是使交流變得即時(shí)且易于理解，就像網(wǎng)絡(luò)瀏覽器連接和顯示網(wǎng)站一樣。
在審查設(shè)計(jì)時(shí)，我會問自己以下有關(guān)擴(kuò)展功能的問題：
設(shè)計(jì)應(yīng)該易于理解，但又足夠強(qiáng)大以處理復(fù)雜性和規(guī)模。
記住，設(shè)計(jì)主要就是文字。我希望看到你的用戶體驗(yàn)文案與用戶流程、矩形和顏色保持相同的標(biāo)準(zhǔn)。
在審查設(shè)計(jì)時(shí)，我會問自己以下有關(guān) UX 副本的問題：
我們有復(fù)制指南，還有一個(gè)經(jīng)過 Dialpad 語音和語調(diào)訓(xùn)練的ChatGPT 機(jī)器人。快來使用吧！
在撰寫文案時(shí)，我通常會將類似這樣的內(nèi)容放入 ChatGPT 中：
將以下句子重寫 10 次。盡量簡短，最多 10-15 個(gè)字。
請使用簡單的語言和您熟悉的用戶體驗(yàn)文案規(guī)則。
“一個(gè)寫得不好的句子，無法表達(dá)我的想法。”
通常，最好的文案是這些示例的組合。我在撰寫本文時(shí)就使用了這種技巧。
在審查工作流程時(shí)，一個(gè)原型勝過一千個(gè)靜態(tài)屏幕。我喜歡盡早看到原型，即使是在線框階段。它能幫助我預(yù)覽實(shí)際使用設(shè)計(jì)的感覺。
在審查原型時(shí)，我會問自己以下問題：
用代碼制作原型并不總是可行的，所以像 Figma 這樣的原型工具能提供僅次于實(shí)際產(chǎn)品體驗(yàn)的最佳設(shè)計(jì)。從新用戶引導(dǎo)到任務(wù)完成，交互式原型能讓我清晰地了解用戶從始至終的旅程。
大多數(shù)設(shè)計(jì)評審都側(cè)重于推銷一個(gè)想法，讓觀眾信服這個(gè)設(shè)計(jì)為什么好。但這只是設(shè)計(jì)評審的一部分。我也想知道它的缺點(diǎn)。我們應(yīng)該成為自己最嚴(yán)厲的批評者。
每個(gè)設(shè)計(jì)方向的優(yōu)缺點(diǎn)是什么？一個(gè)設(shè)計(jì)怎么會失敗？在審查一個(gè)設(shè)計(jì)時(shí)，我會尋找它為什么行不通，或者它可能被濫用或利用的原因，所以如果你也考慮過這些，會很有幫助。提前思考這些問題有助于促進(jìn)團(tuán)隊(duì)之間的討論。
雖然沒有一份詳盡的清單列出使設(shè)計(jì)“好”的因素，但提前考慮這些因素有助于將與領(lǐng)導(dǎo)層的討論集中在深刻、實(shí)質(zhì)性的話題上。
當(dāng)我們接受“好”的不同定義，依靠清晰的框架，并創(chuàng)造一個(gè)支持批評的空間時(shí)，我們就可以提供既能滿足創(chuàng)意目標(biāo)又能滿足商業(yè)目標(biāo)的設(shè)計(jì)工作。
作為一名產(chǎn)品設(shè)計(jì)師，你可能會因?yàn)閭€(gè)人或職業(yè)原因考慮移居國外。并非每個(gè)人都有這樣的機(jī)會。但如果你有這樣的機(jī)會，你會如何選擇移居地呢？
我嘗試回答這個(gè)問題，并根據(jù)以下內(nèi)容對各個(gè)國家（以及美國城市）進(jìn)行了分析：
您可以在其他地方找到其他重要因素，例如醫(yī)療保健、育兒假、簽證選擇、公民身份途徑、天氣和安全，而我則專注于其他地方尚未提供的數(shù)據(jù)。
免責(zé)聲明：由于未解決的數(shù)據(jù)異常，意大利和瑞典被排除在外。挪威因樣本量較小而被移除。
關(guān)于數(shù)據(jù)：
然而，單憑工資數(shù)據(jù)可能會產(chǎn)生誤導(dǎo)。同樣的工資在兩個(gè)國家可能會導(dǎo)致稅后凈收入不同。
例如，一名設(shè)計(jì)師在德國的收入可能比在韓國高出 20%，但稅后，他們在兩個(gè)國家的凈收入是一樣的。
我根據(jù)上一張圖表計(jì)算了工資總額最高的前 20 個(gè)國家的稅后工資。
（順便提一句如果你是自由職業(yè)者或個(gè)體經(jīng)營者并考慮移居到一個(gè)稅率較低的國家——或者計(jì)劃旅行幾年——請尋求建議，我對此做了大量研究）。
中級/高級設(shè)計(jì)師的數(shù)據(jù)，單身，無子女，無注銷，假設(shè)其他情況相關(guān)。
注意事項(xiàng)： “稅收”涵蓋所有強(qiáng)制性支出。然而，這些支出所涵蓋的社會福利的水平和類型因國家而異。
即使在同一個(gè)國家，稅前和稅后工資的差異也可能很大。例如，在美國，一名設(shè)計(jì)師在達(dá)拉斯的工資可能是11.4萬美元，在波特蘭的工資可能是13萬美元，但稅后收入在兩種情況下仍然約為8.8萬美元。
免責(zé)聲明：紐約市的數(shù)據(jù)可能不準(zhǔn)確，因?yàn)檫@些數(shù)字包括周邊地區(qū)和州（感謝Bob Baxley 的舉報(bào)）。
我查看了TrueUp上哪些國家/地區(qū)的設(shè)計(jì)職位最多。他們整合了不同來源的職位，因此比使用單一招聘平臺更具代表性。
為了保持圖表視覺平衡，我從圖表中刪除了兩個(gè)異常值：
我們已經(jīng)了解了目前大多數(shù)職位空缺的分布情況。但未來這些職位空缺可能會在哪里呢？
公司在更容易招聘的地方開設(shè)辦事處，而在人才庫較大的國家，招聘也更容易。
為了了解每個(gè)國家的人才庫有多大，我查看了每個(gè)國家已就業(yè)設(shè)計(jì)師的數(shù)量（我稱之為“人才密度”），并將其與薪資結(jié)合起來。
美國是一個(gè)例外，其薪資和人才密度最高。為了保持圖表的視覺平衡，我將其從圖表中刪除。
需要注意的是，上圖和下圖的數(shù)據(jù)偏向美國企業(yè)。這意味著數(shù)據(jù)集高估了美國公司雇傭的設(shè)計(jì)師。
現(xiàn)在讓我們放大來看薪資最高的20個(gè)國家（稅后）的人才庫：
您可以查看此圖表的高分辨率版本。
圖表顯示的是稅前工資。新加坡和瑞士都是低稅率國家，因此稅后它們很可能不再是異常值。
生活成本和工資似乎密切相關(guān)，很難找到在生活成本方面也能提供良好價(jià)值的高工資國家。
在下圖中，我結(jié)合了Numbeo的薪資和生活質(zhì)量指數(shù)，其中包括：
以下是根據(jù)各標(biāo)準(zhǔn)排名靠前的國家/地區(qū)。顯然，這些參數(shù)并非二元化的，因此，為了獲得更細(xì)致的了解，請查看上面的完整圖表。
“我們把屏幕上的按鈕做得如此好看，讓你忍不住想舔舔它們。” ——史蒂夫·喬布斯
我記得亨利·福特曾經(jīng)說過：“如果我問顧客想要什么，他們會告訴我一匹跑得更快的馬。”人們不知道自己想要什么，除非你把東西展示給他們看。—— 史蒂夫·喬布斯
在很多地方，這簡直就是認(rèn)知超負(fù)荷和可讀性低下的噩夢。玻璃折射需要一定的透明度才能達(dá)到最佳效果，而這種透明度會讓一半的背景顯得格格不入。
說實(shí)話，我真不知道蘋果是怎么做到的。在嘗試模仿之后（使用 AGSL 著色器——作者注），我對液態(tài)玻璃產(chǎn)生了全新的敬意。我猜他們也用了著色器——只是更加精妙。蘋果花了數(shù)年時(shí)間打造一個(gè)可以實(shí)現(xiàn)這一功能的系統(tǒng)。安卓系統(tǒng)還沒達(dá)到這個(gè)水平。也許小米或其他中國品牌會找到解決辦法。但在我們找到開源解決方案之前，在安卓系統(tǒng)上實(shí)現(xiàn)真正的玻璃形態(tài)仍然遙不可及。
我們發(fā)現(xiàn)瀏覽器支持有限，這迫使我們不得不使用一些不太理想的解決方法。隨著時(shí)間的推移，WebKit 引入了 backdrop-filter CSS 屬性，但它仍然是性能殺手——瀏覽器每次滾動時(shí)都必須重新計(jì)算模糊效果。也許 Apple 已經(jīng)在其設(shè)備上對此進(jìn)行了優(yōu)化，但我強(qiáng)烈建議任何在 Apple 以外的平臺上構(gòu)建 Liquid Glass 設(shè)計(jì)的人都進(jìn)行徹底的性能測試。
“好的設(shè)計(jì)是無形的。” ——迪特·拉姆斯
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn