UI設(shè)計(jì)需要學(xué)哪些基礎(chǔ)知識(shí)
如果你打開招聘軟件搜“UI設(shè)計(jì)師”，會(huì)發(fā)現(xiàn)崗位要求里總寫著“具備扎實(shí)的設(shè)計(jì)基礎(chǔ)”“熟悉用戶體驗(yàn)流程”“掌握Figma等設(shè)計(jì)工具”……但到底哪些才是真正的“基礎(chǔ)知識(shí)”？是不是學(xué)了PS就能做UI？為什么有人臨摹了100個(gè)APP界面，還是接不到單？
作為一個(gè)帶過10+新人的設(shè)計(jì)主管，我想說：UI設(shè)計(jì)的“基礎(chǔ)知識(shí)”，遠(yuǎn)不止“會(huì)用軟件”那么簡單。它更像蓋房子，設(shè)計(jì)基礎(chǔ)是地基，工具是磚瓦，用戶思維是圖紙，缺了哪一塊，房子要么塌，要么住得不舒服。今天就把這幾年帶新人總結(jié)的“基礎(chǔ)知識(shí)清單”拆解開，從“必須學(xué)”到“加分項(xiàng)”，幫你少走3年彎路。
一、設(shè)計(jì)基礎(chǔ)：別讓“好看”停在表面
很多人覺得UI設(shè)計(jì)就是“把界面做得好看”，但“好看”的背后，是一套可拆解的邏輯。就像你覺得一個(gè)人穿衣服好看，可能是因?yàn)轭伾钆浜椭C、版型合身、細(xì)節(jié)有亮點(diǎn)——設(shè)計(jì)基礎(chǔ)，就是教你怎么把“好看”變成可復(fù)制的能力。
1. 版式設(shè)計(jì)：讓信息“會(huì)說話”
你有沒有遇到過這種APP：打開首頁，按鈕、文字、圖片堆在一起，找個(gè)功能像在迷宮里尋寶？這就是版式設(shè)計(jì)沒做好。版式設(shè)計(jì)的核心，是讓信息有“秩序感”，用戶一眼就能看懂“哪里重要、哪里次要”。
新手必學(xué)的4個(gè)原則（別死記硬背，用案例理解）：
對齊：所有元素像排隊(duì)一樣站整齊。比如微信聊天界面，頭像永遠(yuǎn)左對齊，消息氣泡跟著頭像對齊，你不會(huì)覺得亂，就是因?yàn)閷R在起作用。
對比：重要的內(nèi)容要“跳出來”。比如電商APP的“立即購買”按鈕，顏色比其他按鈕深、字更大，就是用對比告訴你“點(diǎn)這里”。
親密性：相關(guān)的內(nèi)容“抱成團(tuán)”。比如手機(jī)設(shè)置里，“無線和網(wǎng)絡(luò)”下面會(huì)緊跟著Wi-Fi、藍(lán)牙、移動(dòng)網(wǎng)絡(luò)，它們是一家人，所以要放在一起。
重復(fù)：相同類型的元素保持一致。比如所有頁面的標(biāo)題都用20號(hào)黑體，所有返回按鈕都在左上角，用戶不用思考就知道“這是什么”。
新手練習(xí)法：找3個(gè)你常用的APP（比如微信、淘寶、抖音），截圖后用方框標(biāo)出每個(gè)元素的位置，分析它們是怎么用這4個(gè)原則的。堅(jiān)持1周，你看界面的眼光會(huì)完全不一樣。
2. 色彩搭配：不是“我覺得好看”，是“用戶看得懂”
“我覺得這個(gè)粉色好看”“這個(gè)藍(lán)色有科技感”——這是新手最常踩的坑。UI設(shè)計(jì)的色彩，不是設(shè)計(jì)師的“個(gè)人喜好”，而是“用戶溝通工具”。比如紅色通常代表警告（刪除按鈕），綠色代表安全（確認(rèn)按鈕），這些都是用戶已經(jīng)形成的“條件反射”，你不能隨便改。
必學(xué)的3個(gè)知識(shí)點(diǎn)：
色彩模式：做手機(jī)/電腦界面，只用RGB模式（因?yàn)槠聊皇枪獾幕旌希蝗绻婕坝∷ⅲū热鏏PP引導(dǎo)頁要印成手冊），才需要CMYK，初期先搞定RGB就行。
色輪基礎(chǔ)：記住3種安全配色法：
鄰近色（色輪上相鄰的顏色，比如藍(lán)+青）：適合需要柔和氛圍的界面，比如閱讀APP。
對比色（色輪上相對的顏色，比如黃+紫）：適合需要突出重點(diǎn)的場景，比如按鈕和背景。
同色系（深淺不同的一種顏色，比如深藍(lán)+淺藍(lán)）：適合專業(yè)感強(qiáng)的界面，比如金融APP。
色彩心理學(xué)：別迷信“藍(lán)色代表信任”“黃色代表活力”，要結(jié)合產(chǎn)品場景。比如醫(yī)療APP用淺藍(lán)色（冷靜），兒童APP用亮黃色（活潑），但如果一個(gè)喪葬APP用亮黃色，就完全錯(cuò)了。
避坑提醒：新手別一開始就玩“高級灰”“莫蘭迪色”，先把基礎(chǔ)配色練熟。推薦工具：Coolors（在線色板生成器），輸入主色就能自動(dòng)生成搭配方案，對著練比自己瞎調(diào)效率高10倍。
3. 字體設(shè)計(jì)：字不僅是“內(nèi)容”，更是“顏值”
“不就是選個(gè)字體嗎？系統(tǒng)默認(rèn)的宋體、黑體不行嗎？”——還真不行。字體選不對，界面瞬間掉價(jià)。比如用楷體做APP按鈕，會(huì)顯得不專業(yè)；用過于花哨的藝術(shù)字做正文，用戶讀3行就想退出。
核心知識(shí)點(diǎn)：
字體分類：UI設(shè)計(jì)常用的就兩種：無襯線體（比如思源黑體、蘋方）和襯線體（比如宋體）。無襯線體筆畫簡潔，適合屏幕閱讀（手機(jī)APP正文、按鈕都用它）；襯線體有裝飾性筆畫，適合標(biāo)題或需要“文化感”的場景（比如古籍閱讀APP的標(biāo)題）。
字號(hào)與行高：手機(jī)界面正文一般用14-16號(hào)字（不同手機(jī)分辨率有差異，以實(shí)際顯示清晰為準(zhǔn)），行高是字號(hào)的1.5-1.8倍（比如16號(hào)字，行高24-28），太擠或太松都會(huì)影響閱讀。
字體層級：標(biāo)題、副標(biāo)題、正文、輔助文字，字號(hào)和粗細(xì)要有區(qū)分。比如標(biāo)題用18號(hào)粗體，副標(biāo)題16號(hào)常規(guī)，正文14號(hào)常規(guī)，輔助文字12號(hào)淺色，用戶一眼就知道信息的優(yōu)先級。
小技巧：蘋果系統(tǒng)優(yōu)先用“蘋方”，安卓系統(tǒng)優(yōu)先用“思源黑體”，這兩種字體在各自系統(tǒng)里顯示最清晰，別為了“個(gè)性”亂用小眾字體，可能導(dǎo)致用戶手機(jī)里沒有該字體，顯示成亂碼。
二、工具技能：別當(dāng)“工具奴”，要當(dāng)“工具使用者”
“我要不要先學(xué)PS？還是直接學(xué)Figma？”“Sketch和XD哪個(gè)更好用？”——新手總糾結(jié)工具，但其實(shí)工具只是“畫筆”，重要的是你想畫什么。不過，選對工具能讓你效率翻倍，這里說3個(gè)必須掌握的工具和學(xué)習(xí)重點(diǎn)：
1. Figma：現(xiàn)在不學(xué)，面試都難
如果你2024年學(xué)UI還只學(xué)PS，那真的有點(diǎn)落后了。Figma已經(jīng)成為行業(yè)主流，因?yàn)樗С侄嗳藢?shí)時(shí)協(xié)作（設(shè)計(jì)師和產(chǎn)品經(jīng)理、開發(fā)可以同時(shí)在線改稿）、云端存儲(chǔ)（換電腦也不怕文件丟了）、組件化設(shè)計(jì)（做一套按鈕組件，改一個(gè)就能全頁面同步）。
新手不用學(xué)所有功能，先搞定這5個(gè)核心操作：
畫框（Frame）：新建手機(jī)界面的“畫布”，記得選對尺寸（比如iPhone 14是390×844px）。
矢量工具（Vector）：畫圖標(biāo)、按鈕形狀，比PS的鋼筆工具簡單，多練10分鐘就能上手。
組件（Component）：把常用的按鈕、輸入框做成組件，改顏色、字號(hào)時(shí)，所有用到這個(gè)組件的地方會(huì)自動(dòng)更新，不用一個(gè)個(gè)改（這是提高效率的關(guān)鍵）。
自動(dòng)布局（Auto Layout）：讓元素“自適應(yīng)”，比如按鈕里的文字變長，按鈕寬度自動(dòng)變寬；列表里加一行內(nèi)容，下面的內(nèi)容自動(dòng)往下移，不用手動(dòng)調(diào)位置。
原型（Prototype）：做簡單的頁面跳轉(zhuǎn)，比如點(diǎn)擊“首頁”按鈕跳轉(zhuǎn)到首頁，讓開發(fā)和產(chǎn)品經(jīng)理直觀看到交互效果。
學(xué)習(xí)資源：Figma官網(wǎng)的“Learn”板塊有免費(fèi)教程，跟著做一遍“手機(jī)APP原型”項(xiàng)目，基本操作就會(huì)了。
2. Adobe系列：PS和AI學(xué)基礎(chǔ)就行
PS（Photoshop）：主要用來處理圖片（比如APP里的輪播圖、圖標(biāo)素材），不用學(xué)太復(fù)雜的濾鏡、摳圖，會(huì)“調(diào)整大小”“裁剪”“保存為PNG/JPG”就行。
AI（Illustrator）：畫矢量圖標(biāo)用的，比如APP里的“首頁”“我的”圖標(biāo)，用AI畫放大不會(huì)模糊。新手學(xué)“鋼筆工具”“形狀工具”“路徑查找器”（合并/減去形狀），足夠應(yīng)付基礎(chǔ)圖標(biāo)設(shè)計(jì)。
提醒：別沉迷學(xué)工具快捷鍵，先搞懂“為什么要這么做”。比如用Figma做組件，不是因?yàn)椤敖M件高級”，而是因?yàn)椤澳軠p少重復(fù)勞動(dòng)”，理解目的比記住快捷鍵更重要。
三、交互與用戶思維：UI不是“畫界面”，是“解決問題”
“我設(shè)計(jì)的界面明明很好看，為什么產(chǎn)品經(jīng)理總說‘用戶看不懂’？”——因?yàn)槟阒魂P(guān)注了“視覺”，沒關(guān)注“用戶怎么用”。UI設(shè)計(jì)的核心是“用戶體驗(yàn)”，好看只是加分項(xiàng)，好用才是基本功。
1. 理解“用戶行為邏輯”
用戶用APP時(shí)，是“帶著目的來的”：打開外賣APP是為了點(diǎn)餐，打開導(dǎo)航APP是為了找路。你的設(shè)計(jì)要幫他們“高效完成目的”，而不是讓他們猜“這個(gè)按鈕是干嘛的”。
舉個(gè)反面例子：某健身APP把“開始運(yùn)動(dòng)”按鈕藏在“我的-設(shè)置-運(yùn)動(dòng)偏好”里，用戶打開APP想運(yùn)動(dòng)，找了3分鐘沒找到入口，下次就不會(huì)用了。正確的做法是：把核心功能（開始運(yùn)動(dòng)）放在首頁最顯眼的位置，符合用戶“打開就用”的習(xí)慣。
怎么練：做“用戶旅程圖”。比如你要設(shè)計(jì)一個(gè)“記賬APP”，先列出用戶從“打開APP”到“記完一筆賬”的每一步：打開APP點(diǎn)擊“記一筆”選擇支出/收入輸入金額選擇分類（餐飲/交通等）保存。然后思考：哪一步可能讓用戶覺得麻煩？比如“選擇分類”如果有20個(gè)選項(xiàng)，用戶要滑半天，這時(shí)可以把“常用分類”放在最前面，減少操作步驟。
2. 懂點(diǎn)“交互設(shè)計(jì)原則”
交互設(shè)計(jì)聽起來高深，其實(shí)就是“用戶怎么操作，界面怎么反饋”。新手記住3個(gè)原則，能避開80%的坑：
一致性：相同的操作要有相同的反饋。比如所有頁面的“返回”按鈕都在左上角，點(diǎn)擊后都回到上一頁，別在A頁面左上角是返回，在B頁面右上角是返回。
防錯(cuò)性：別等用戶犯錯(cuò)了才提醒，要提前避免。比如用戶刪除重要數(shù)據(jù)時(shí)，彈出“確定要?jiǎng)h除嗎？刪除后不可恢復(fù)”，而不是刪完了才提示“已刪除”。
易讀性：按鈕文字要“說人話”。別用“提交表單”，用“下一步”；別用“退出登錄”，用“退出當(dāng)前賬號(hào)”，用戶一看就知道是什么意思。
四、輸出規(guī)范：設(shè)計(jì)稿“落地”才是真本事
“我設(shè)計(jì)稿畫得挺好，為什么開發(fā)做出來不一樣？”——因?yàn)槟銢]做“輸出規(guī)范”。設(shè)計(jì)師的工作不是畫完圖就結(jié)束，而是確保開發(fā)能100%還原你的設(shè)計(jì)，這就需要規(guī)范的標(biāo)注、切圖、說明文檔。
1. 標(biāo)注：告訴開發(fā)“每個(gè)元素的尺寸”
開發(fā)需要知道：按鈕的寬高是多少px？文字的字號(hào)、顏色（RGB值）是多少？兩個(gè)元素之間的距離是多少？這些都需要標(biāo)注清楚。
推薦工具：Figma自帶的“Inspect”功能（開發(fā)模式），點(diǎn)擊元素就能看到尺寸、顏色、字體信息；如果用PS/AI，就用藍(lán)湖、Zeplin，把設(shè)計(jì)稿上傳后自動(dòng)生成標(biāo)注，開發(fā)直接看就行。
2. 切圖：給開發(fā)“能用的素材”
圖標(biāo)、按鈕、背景圖這些元素，需要導(dǎo)出成圖片給開發(fā)，這就是“切圖”。切圖要注意：
格式：圖標(biāo)用PNG（透明背景），背景圖用JPG（壓縮體積），如果開發(fā)需要“矢量圖標(biāo)”，就導(dǎo)出SVG格式。
尺寸：手機(jī)界面一般要切“1倍圖、2倍圖、3倍圖”（對應(yīng)不同分辨率的手機(jī)），F(xiàn)igma可以一鍵導(dǎo)出多倍圖，不用手動(dòng)改尺寸。
3. 規(guī)范文檔：寫清楚“為什么這么設(shè)計(jì)”
復(fù)雜的界面（比如注冊流程、支付流程），光靠標(biāo)注不夠，需要寫“設(shè)計(jì)規(guī)范文檔”，說明：這個(gè)按鈕為什么放在這里？這個(gè)顏色代表什么含義？不同狀態(tài)下（正常/點(diǎn)擊/禁用）的樣式是什么？
小建議：新手可以從“組件庫”開始做規(guī)范，把常用的按鈕、輸入框、彈窗樣式統(tǒng)一，以后做界面直接用組件，既能保證一致性，也能讓開發(fā)少問你“這個(gè)按鈕和上次那個(gè)不一樣，以哪個(gè)為準(zhǔn)？”
五、加分項(xiàng)：這些知識(shí)能讓你“甩開同齡人”
上面說的是“必須學(xué)”的基礎(chǔ)知識(shí)，如果你想比別人更有競爭力，這3個(gè)方向可以重點(diǎn)關(guān)注：
1. 動(dòng)效設(shè)計(jì)：讓界面“活”起來
靜態(tài)界面看多了會(huì)單調(diào)，適當(dāng)?shù)膭?dòng)效能提升體驗(yàn)。比如按鈕點(diǎn)擊時(shí)輕微放大再縮?。ǚ答亜?dòng)效），頁面切換時(shí)的滑動(dòng)動(dòng)畫（轉(zhuǎn)場動(dòng)效），加載時(shí)的骨架屏（等待動(dòng)效）。
工具不用學(xué)太復(fù)雜，F(xiàn)igma自帶的“原型動(dòng)效”能滿足基礎(chǔ)需求；進(jìn)階可以學(xué)AE（After Effects）或Principle（專門做UI動(dòng)效的工具），但別本末倒置，先保證靜態(tài)界面好用，再學(xué)動(dòng)效。
2. 簡單的代碼知識(shí)：和開發(fā)“好好說話”
你不用會(huì)寫代碼，但要懂點(diǎn)基礎(chǔ)概念：比如“前端開發(fā)用CSS寫樣式”“iOS和安卓的適配規(guī)則不一樣”“1px邊框在不同手機(jī)上顯示可能變粗”。
懂這些有什么用？比如開發(fā)說“這個(gè)漸變色在安卓低版本上顯示不出來”，你就知道要換成純色；開發(fā)說“這個(gè)圓角按鈕實(shí)現(xiàn)起來太麻煩”，你就知道可以改成直角（或者找更簡單的實(shí)現(xiàn)方式）。和開發(fā)溝通順暢了，你的設(shè)計(jì)落地會(huì)更順利。
3. 行業(yè)認(rèn)知：知道“設(shè)計(jì)趨勢”
UI設(shè)計(jì)不是一成不變的，前幾年流行“擬物化”（按鈕像真實(shí)的按鈕），現(xiàn)在流行“極簡扁平”“玻璃擬態(tài)”。關(guān)注行業(yè)動(dòng)態(tài)，能讓你的設(shè)計(jì)更“接地氣”。
怎么關(guān)注？看Dribbble（設(shè)計(jì)師社區(qū)）、站酷（國內(nèi)設(shè)計(jì)平臺(tái)）的熱門作品，分析它們的配色、排版、風(fēng)格；看大廠的設(shè)計(jì)規(guī)范（比如iOS Human Interface Guidelines、Material Design），了解主流設(shè)計(jì)方向。
最后：基礎(chǔ)知識(shí)怎么學(xué)才不浪費(fèi)時(shí)間？
很多人學(xué)UI喜歡“東一榔頭西一棒子”，今天學(xué)PS，明天學(xué)色彩，結(jié)果半年過去了還沒做出一個(gè)完整的界面。正確的方法是“帶著目標(biāo)學(xué)”：
先定一個(gè)小目標(biāo)：比如“3周內(nèi)臨摹一個(gè)完整的天氣APP界面”（首頁、詳情頁、設(shè)置頁）。
為了實(shí)現(xiàn)這個(gè)目標(biāo)，你需要學(xué)：Figma畫界面（工具）、版式怎么排（標(biāo)題放哪、按鈕多大）、色彩怎么搭（主色用藍(lán)色還是綠色）、圖標(biāo)怎么畫（用AI或Figma矢量工具）。
做完后，找前輩或設(shè)計(jì)師社區(qū)（比如站酷）點(diǎn)評，針對性改，比自己悶頭練進(jìn)步快10倍。
記?。篣I設(shè)計(jì)的基礎(chǔ)知識(shí)，不是“學(xué)完再用”，而是“用中學(xué)”。你可能一開始做的界面很丑，標(biāo)注不規(guī)范，被開發(fā)吐槽，但只要每次都解決一個(gè)問題（這次學(xué)會(huì)組件，下次學(xué)會(huì)動(dòng)效），半年后再回頭看，你會(huì)感謝現(xiàn)在愿意沉下心打基礎(chǔ)的自己。
畢竟，所有牛逼的設(shè)計(jì)師，都是從“搞懂基礎(chǔ)知識(shí)”開始的。
尊重原創(chuàng)文章，轉(zhuǎn)載請注明出處與鏈接：http://yi18.com.cn/jsjzx/Graphic_Design/617546.html，違者必究！
