算算日子，成為一名UI設(shè)計(jì)師已經(jīng)有一年多的時(shí)間了。最近身邊好幾位朋友都打算轉(zhuǎn)行UI設(shè)計(jì)，在跟他們聊完我的轉(zhuǎn)行經(jīng)驗(yàn)后，我也打算用文字記錄下我這一年的心得體會(huì)。一方面希望可以幫助到更多準(zhǔn)備轉(zhuǎn)行的朋友，另一方面也能mark一下自己踩過的坑，充分吸取經(jīng)驗(yàn)吧。

嘗試借助團(tuán)隊(duì)的力量

經(jīng)過這一年多工作的 折磨 ?鍛煉，我對這一點(diǎn)感觸頗深：在一個(gè)團(tuán)隊(duì)中做設(shè)計(jì)，和自己悶頭做設(shè)計(jì)是非常不同的，最大的區(qū)別點(diǎn)在于需要和團(tuán)隊(duì)中的其他人（包括但不限于產(chǎn)品經(jīng)理、前端工程師）展開協(xié)作，共同推動(dòng)項(xiàng)目前進(jìn)。

比如，設(shè)計(jì)師在根據(jù)原型圖出高保真設(shè)計(jì)稿時(shí)，很容易在設(shè)計(jì)的邊界問題上翻車——需要細(xì)致的地方設(shè)計(jì)不足，而不需要花費(fèi)精力的地方過度設(shè)計(jì)。這種時(shí)候，就需要保持和PM同學(xué)的溝通順暢，避免做無用功。

而在與前端的對接中，你給他們提供的設(shè)計(jì)標(biāo)注和素材將在很大程度上影響你設(shè)計(jì)稿還原的情況。在我之前的工作中，標(biāo)注往往是導(dǎo)致設(shè)計(jì)還原翻車的推手！因?yàn)榧词箻?biāo)注做得足夠詳細(xì)，但還是很難實(shí)現(xiàn)面面俱到。前端總會(huì)找到你問：這里的間距為什么沒標(biāo)？這個(gè)icon寬高是多少？ ? ? ??

經(jīng)過我這一年的不斷試錯(cuò)，在這里給各位即將入行的萌新們推薦一個(gè)設(shè)計(jì)協(xié)作平臺(tái)——摹客，它能高效地幫助你與產(chǎn)品經(jīng)理、前端工程師展開協(xié)作。

往往設(shè)計(jì)初稿改動(dòng)都比較大，在評審這一版設(shè)計(jì)稿時(shí)，在線評審一定是最高效的方式。你只需要將設(shè)計(jì)稿上傳至摹客平臺(tái)，產(chǎn)品經(jīng)理可以先進(jìn)行一輪在線評審，標(biāo)記出需要修改的內(nèi)容，你再根據(jù)評審建議快速改稿即可，效率會(huì)更高。

?

? ? ? ? ? ? ? ? ? ? ??

而在與前端交付的過程中，標(biāo)注、切圖也能利用摹客很高效地完成。首先是標(biāo)注，摹客的自動(dòng)標(biāo)注可以解放設(shè)計(jì)師的雙手，它能夠自動(dòng)識別設(shè)計(jì)稿中的切圖，當(dāng)鼠標(biāo)hover在某個(gè)元素上時(shí)，它會(huì)自動(dòng)顯示該模塊的寬高、間距、顏色等屬性，并且摁住Alt鍵，還能查看百分比標(biāo)注。

? ? ? ? ? ? ? ? ?

? ? ??

當(dāng)然，對于設(shè)計(jì)稿中的特殊設(shè)計(jì)樣式，比如動(dòng)畫、交互，就需要手動(dòng)標(biāo)注說明，但總得說來，利用摹客標(biāo)注交付后，前端call我的次數(shù)明顯降低很多，頁面還原度也提高了不少。

另外，從切圖這一part來說，在設(shè)計(jì)稿中對所有素材都做好標(biāo)記切圖后，上傳至摹客平臺(tái)，前端可以在這份設(shè)計(jì)稿中，根據(jù)自己的需求，自主下載不同平臺(tái)（iOS/Android/Web）、不同倍率、不同格式（PNG/WebP/SVG/JPG）的切圖，再也不用call我給他重新打包切圖了。

? ? ? ? ? ? ? ? ?

? ? ??

合理利用工具，將整個(gè)設(shè)計(jì)工作與各個(gè)崗位打通，與產(chǎn)品經(jīng)理、前端工程師高效地協(xié)作，提高工作效率，這是我工作一年來感觸最深的地方！

設(shè)計(jì)的靈魂——色彩搭配

色彩搭配不夸張的說算是設(shè)計(jì)靈魂了，網(wǎng)上關(guān)于色彩搭配的教程很多，所以今天我想就單色配色跟大家分享。之前我看過一位大廠的設(shè)計(jì)師分享的單色配色實(shí)操方法論，秉承60/30/10法則，能設(shè)計(jì)出很有質(zhì)感的高級配色。

這個(gè)60/30/10法則具體就是網(wǎng)站中60% 的應(yīng)用由主色調(diào)組成，30%的是輔助色，剩下的10%是強(qiáng)調(diào)色。

? ? ? ? ? ? ? ? ?

? ? ??

利用單色限制你的調(diào)色板，避免因?yàn)轭伾^多而帶來設(shè)計(jì)難度和“顏色混亂”，通過60/30/10的方式，調(diào)整主色的亮度，從而能讓整個(gè)設(shè)計(jì)稿顯得更加干凈和高級。單色配色對設(shè)計(jì)小白來說非常實(shí)用，大家可以多多練習(xí)，快速提高自己的審美能力！

積極鍛煉自己的開發(fā)思維

一定要多和前端溝通交流，如果你能從他們身上學(xué)到前端的知識，這對你產(chǎn)出高質(zhì)量設(shè)計(jì)稿是非常有幫助的。各位萌新千萬不要被網(wǎng)上的段子所迷惑，說什么前端與UI設(shè)計(jì)的關(guān)系如同水火，天天吵架…

? ? ? ? ? ? ? ? ?

? ? ??

至少我所接觸的前端都很nice，他們也很樂意教我一些前端的基礎(chǔ)知識，比如，設(shè)計(jì)看起來很簡單的一些版式，前端都需要用盒子模型重新搭建，實(shí)際上會(huì)大量使用外邊距（margin）和內(nèi)邊距（padding）來還原設(shè)計(jì)稿中的距離關(guān)系。

對UI而言，多了解一些前端知識，可以讓你在設(shè)計(jì)時(shí)更好地考慮頁面實(shí)現(xiàn)的問題，也能與開發(fā)進(jìn)行交流，避免出現(xiàn)被他們牽著鼻子走的現(xiàn)象

抽出空余時(shí)間打磨作品集

作品集是最直觀展示設(shè)計(jì)師個(gè)人能力和審美的東西，它不僅可以作為設(shè)計(jì)師對自己創(chuàng)作和成長的總結(jié)，而且更是面試時(shí)招聘單位對你進(jìn)行評判的重要依據(jù)。所以擁有一份優(yōu)秀的作品集，對每一名設(shè)計(jì)師而言都至關(guān)重要，因?yàn)樗粌H決定著你能有多少機(jī)會(huì)，還可能決定著工資的金額~

? ? ? ? ? ? ? ? ?

? ? ??

那么，反復(fù)打磨作品集這一定是常規(guī)操作。我通常每一個(gè)月都會(huì)對之前的作品進(jìn)行優(yōu)化，其中包括工作項(xiàng)目和自己隨手畫的素材。作品集我都上傳在摹客平臺(tái)，到時(shí)直接通過公開鏈接的形式分享出去，別人就能查看我完整的作品集了。

這是我在網(wǎng)上看到的一位設(shè)計(jì)大佬分享的經(jīng)驗(yàn)方法，讓作品集形式變得新穎一些，可以有效增加面試的機(jī)會(huì)~

持續(xù)輸入，保持學(xué)習(xí)

無論你是做設(shè)計(jì)，還是其他崗位，持續(xù)地學(xué)習(xí)必不可少。畢竟在現(xiàn)在這么卷的就業(yè)環(huán)境中，你不努力前進(jìn)，那遲早都將面臨被淘汰~

? ? ? ? ? ? ? ? ?

? ? ??

我的輸入方式分為兩種，一是日常逛行業(yè)網(wǎng)站，二是臨摹優(yōu)秀作品。我每天都會(huì)花20分鐘逛逛站酷、UI中國、追波、Behance等網(wǎng)站，雖然每天的時(shí)間不長，但堅(jiān)持下來，量變總會(huì)影響質(zhì)變嘛！

另外，周末我會(huì)花時(shí)間臨摹一些優(yōu)秀的界面、動(dòng)效、小icon，主要還是為了提升設(shè)計(jì)和審美能力，在持續(xù)不斷的練習(xí)中，我發(fā)現(xiàn)現(xiàn)在操作熟練度也提高了，哈哈哈！

好啦，以上就是我工作一年來的心得分享，我踩過不少坑，現(xiàn)在終于慢慢走上了正軌，希望這篇文章能對大家有幫助啦~如果有疑問的小伙伴，歡迎評論區(qū)提問，看到都會(huì)回復(fù)的，伙伴們加油！