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