火星網(wǎng)校
UI設(shè)計(jì)經(jīng)驗(yàn)分享：團(tuán)隊(duì)協(xié)作、色彩搭配、作品集打磨、持續(xù)學(xué)習(xí)！
發(fā)布時(shí)間：2024-04-28 12:23:30 瀏覽量：232次
算算日子，成為一名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)過這一年多工作的鍛煉，我對(duì)這一點(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ì)的邊界問題上犯錯(cuò)——需要細(xì)致的地方設(shè)計(jì)不足，而不需要花費(fèi)精力的地方過度設(shè)計(jì)。這種時(shí)候，就需要保持和PM同學(xué)的溝通順暢，避免做無用功。
而在與前端的對(duì)接中，你給他們提供的設(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)都比較大，在評(píng)審這一版設(shè)計(jì)稿時(shí)，在線評(píng)審一定是最高效的方式。你只需要將設(shè)計(jì)稿上傳至摹客平臺(tái)，產(chǎn)品經(jīng)理可以先進(jìn)行一輪在線評(píng)審，標(biāo)記出需要修改的內(nèi)容，你再根據(jù)評(píng)審建議快速改稿即可，效率會(huì)更高。
而在與前端交付的過程中，標(biāo)注、切圖也能利用摹客很高效地完成。首先是標(biāo)注，摹客的自動(dòng)標(biāo)注可以解放設(shè)計(jì)師的雙手，它能夠自動(dòng)識(shí)別設(shè)計(jì)稿中的切圖，當(dāng)鼠標(biāo)hover在某個(gè)元素上時(shí)，它會(huì)自動(dòng)顯示該模塊的寬高、間距、顏色等屬性，并且摁住Alt鍵，還能查看百分比標(biāo)注。
當(dāng)然，對(duì)于設(shè)計(jì)稿中的特殊設(shè)計(jì)樣式，比如動(dòng)畫、交互，就需要手動(dòng)標(biāo)注說明，但總得說來，利用摹客標(biāo)注交付后，前端call我的次數(shù)明顯降低很多，頁面還原度也提高了不少。
另外，從切圖這一部分來說，在設(shè)計(jì)稿中對(duì)所有素材都做好標(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ì)感的高級(jí)配色。
這個(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ì)稿顯得更加干凈和高級(jí)。單色配色對(duì)設(shè)計(jì)小白來說非常實(shí)用，大家可以多多練習(xí)，快速提高自己的審美能力！
積極鍛煉自己的開發(fā)思維
一定要多和前端溝通交流，如果你能從他們身上學(xué)到前端的知識(shí)，這對(duì)你產(chǎn)出高質(zhì)量設(shè)計(jì)稿是非常有幫助的。各位萌新千萬不要被網(wǎng)上的段子所迷惑，說什么前端與UI設(shè)計(jì)的關(guān)系如同水火，天天吵架…
至少我所接觸的前端都很nice，他們也很樂意教我一些前端的基礎(chǔ)知識(shí)，比如，設(shè)計(jì)看起來很簡單的一些版式，前端都需要用盒子模型重新搭建，實(shí)際上會(huì)大量使用外邊距（margin）和內(nèi)邊距（padding）來還原設(shè)計(jì)稿中的距離關(guān)系。
對(duì)UI而言，多了解一些前端知識(shí)，可以讓你在設(shè)計(jì)時(shí)更好地考慮頁面實(shí)現(xiàn)的問題，也能與開發(fā)進(jìn)行交流，避免出現(xiàn)被他們牽著鼻子走的現(xiàn)象
抽出空余時(shí)間打磨作品集
作品集是最直觀展示設(shè)計(jì)師個(gè)人能力和審美的東西，它不僅可以作為設(shè)計(jì)師對(duì)自己創(chuàng)作和成長的總結(jié)，而且更是面試時(shí)招聘單位對(duì)你進(jìn)行評(píng)判的重要依據(jù)。所以擁有一份優(yōu)秀的作品集，對(duì)每一名設(shè)計(jì)師而言都至關(guān)重要，因?yàn)樗粌H決定著你能有多少機(jī)會(huì)，還可能決定著工資的金額~
那么，反復(fù)打磨作品集這一定是常規(guī)操作。我通常每一個(gè)月都會(huì)對(duì)之前的作品進(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)在終于慢慢走上了正軌，希望這篇文章能對(duì)大家有幫助啦~如果有疑問的小伙伴，歡迎評(píng)論區(qū)提問，看到都會(huì)回復(fù)的，伙伴們加油！
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
-
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型，你get到了嗎？
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
-
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
-
5. 移動(dòng)端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個(gè)好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計(jì)師看的書籍，輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計(jì)要多少錢？
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計(jì)要花多少錢？不妨看看這篇文章，了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
