雖然ehr系統(tǒng)白底黑字赫然顯示工作崗位是交互設(shè)計(jì)師，但作為被項(xiàng)目組公用的資源以及集交互议泵、用戶體驗(yàn)占贫、界面設(shè)計(jì)于一身的“綜合型崗位”，項(xiàng)目組的UI部分通常也是由我來完成的肢簿，好吧靶剑，這里不把自己說的bi格那么高了，畢竟很多可（zhao）愛（shi）的攻城獅們池充，包括前端和后臺桩引，會經(jīng)常大喊一聲，這是美工給的方案收夸，赤裸裸的剝開我華麗的偽裝坑匠，╭(╯^╰)╮，已懶得辯解卧惜，美工就美工厘灼！雖然自己是從一枚生物狗轉(zhuǎn)行UI，又到交互設(shè)計(jì)咽瓷，但自認(rèn)雖不優(yōu)秀但還是一個合格的UI的设凹，那今天就寫一下作為UI的基本技能，從底層開始茅姜，希望給剛?cè)胄械腢I一點(diǎn)借鑒闪朱，因?yàn)楝F(xiàn)在的大形勢是視覺UI偏飽和，游戲UI沒接觸過钻洒，不懂奋姿，兩個方向可拓展自己，了解前端知識素标，或者做用戶體驗(yàn)称诗。所以對UI的綜合能力的要求越來越高，當(dāng)然了头遭，對于設(shè)計(jì)團(tuán)隊(duì)寓免，可能對專業(yè)技能更看重，但絕大多數(shù)UI计维，最后都是進(jìn)了中小公司袜香，身兼數(shù)職不足為奇，所以以下均為個人經(jīng)驗(yàn)之談享潜，同行可閱，莫噴嗅蔬。

1.配色的能力####

這里一定很奇怪剑按，為什么我會認(rèn)為配色如此重要疾就，甚至超過了對基礎(chǔ)軟件的使用，因?yàn)樵诤芏嗳搜劾镆蘸琔I不就是畫圖標(biāo)的么猬腰。這篇文章如果是一年前寫，我會和2.交換一下猜敢，但現(xiàn)在阿里巴巴的iconfont以及google已經(jīng)提供了資源豐富的圖標(biāo)以供下載免費(fèi)使用姑荷，而且格式也從png到svg到icon font，應(yīng)有盡有缩擂，甚至毫不夸張的說鼠冕，如果一個小公司有一個具備審美能力的前端，那么UI的崗位胯盯，不是可有可無懈费，而是根本不需要。這里不是聳人聽聞博脑，也不是滅UI的威風(fēng)憎乙，因?yàn)榍岸藗冎灰堰@些圖標(biāo)down下來，改一下顏色叉趣，對于目前的扁平化風(fēng)格泞边，足夠應(yīng)付很多頁面。所以疗杉，就目前情況來說阵谚，UI一定要有良好的配色能力。那么乡数，配色能力哪里來椭蹄？
這里，我的建議是净赴，少去那些專業(yè)的配色網(wǎng)站绳矩，色環(huán)，相近色玖翅，互補(bǔ)色翼馆，我敢保證，對于普通的UI來說（高階的除外）金度，這些一點(diǎn)幫助都沒有应媚，想一下，除了基礎(chǔ)的黑白灰猜极，去掉企業(yè)色中姜，允許你自由發(fā)揮的顏色并不是很多了，簡單的方法是什么？經(jīng)常上dribbble之類的設(shè)計(jì)網(wǎng)站丢胚，保存各種你最欣賞的頁面翩瓜，然后，找和你設(shè)計(jì)方案相似的携龟，OK兔跌，直接拿來用。為什么我說配色網(wǎng)站幫助不大峡蟋，這里我舉個例子說明坟桅。
這是我從日本傳統(tǒng)色NIPPON COLORS取下來的兩個顏色，一紅一綠蕊蝗，名字很美仅乓，也是我比較喜歡的兩個顏色。

日本傳統(tǒng)色.jpg

美好的顏色≠美好的界面login.png

源文件.png

然后同樣登錄界面裕偿，我在不改變?nèi)魏谓缑嬖氐那闆r下，只用它的配色方案生成一版看一下效果

模仿顏色.png

好像還不錯痛单。
當(dāng)然了嘿棘，這里我舉得例子有點(diǎn)不太恰當(dāng)，但只是想通過這種方式來說明旭绒，很多配色鸟妙，大神們已經(jīng)幫我們做好了，我們直接拿來用挥吵，十有八九不會出錯重父。

顏色美好≠界面美好，對于初級UI忽匈，配色的最佳方案是拿來主義房午，隨著水平的提升，再形成自己的風(fēng)格丹允。

2.做圖標(biāo)的能力####

這個毋庸置疑是最基礎(chǔ)的郭厌，也是我當(dāng)時轉(zhuǎn)行UI的一個優(yōu)勢，我自己是從02年開始接觸photoshop雕蔽，從7.0一直到現(xiàn)在的2017CC折柠，雖然不是科班出身，一直通過各種教程自學(xué)批狐，什么工具都用扇售，當(dāng)然，也修圖，但畢竟十幾年的實(shí)戰(zhàn)經(jīng)驗(yàn)承冰，對于軟件的使用還是很嫻熟的嘱根。因?yàn)閜s的功能太過強(qiáng)大，那么作為UI巷懈，最需要掌握的是布爾運(yùn)算。
第一慌洪，盡量只用基本圖形的加減顶燕，第二，圖標(biāo)風(fēng)格的統(tǒng)一冈爹。
圖標(biāo)的格式除了常見的PNG-24涌攻，還要知道svg，icon font频伤，以及透明背景的bmp（是的恳谎，你沒有看錯，這個用處不多憋肖，我也只做過一次因痛，需要了解有透明通道的位圖是什么以及如何生成）。具體我們的圖標(biāo)用什么格式岸更，資深UI不用說了乌昔，小白們問前端欢瞪，什么時候需要做雪碧圖，什么時候需要單獨(dú)切圖，負(fù)責(zé)的前端開發(fā)人員會告訴你的哗魂。
圖標(biāo)風(fēng)格的統(tǒng)一，往復(fù)雜里說歌径，要求非常精細(xì)陕赃，比如描邊的寬度，基本圖形的圓角半徑等等瓜挽，能統(tǒng)一的地方盡量都統(tǒng)一盹廷，但往簡單里說，把握一點(diǎn)秸抚，線條圖和塊狀圖速和，一組圖標(biāo)只能選擇一種，不可混搭剥汤。同樣颠放，舉例說明，還是剛才的登陸界面吭敢，如果線條圖和塊狀圖混搭碰凶，會造成很不和諧的頁面效果，尤其是當(dāng)圖標(biāo)元素比較多的時候。

錯誤的線條和塊狀混搭.png

如果你想要線條圖欲低，那么你可以都改成下面這種樣式

可以都是線條圖.png

關(guān)于圖標(biāo)辕宏，這里多說幾句，除非你有特別好的創(chuàng)意砾莱，否則用最基礎(chǔ)的永遠(yuǎn)不會出錯瑞筐，比如齒輪代表設(shè)置，筆代表編輯腊瑟，前后兩張紙代表復(fù)制聚假，心或星表示收藏，不要擔(dān)心因?yàn)樽隽藳]有特色的圖標(biāo)而被人說水平很low闰非，通常情況下膘格，開發(fā)人員和BOSS都不會太過于關(guān)心圖標(biāo)是不受標(biāo)新立異，反而中規(guī)中矩财松，更容易被接受瘪贱。依舊舉例說明：

print.png

這是打印的圖標(biāo)，左側(cè)的最簡單辆毡，1分鐘吧菜秦，然后，你可能覺得太過簡單了舶掖，冥思苦想設(shè)計(jì)出來右側(cè)的這種喷户，你為此可能還特意去看了辦公室的打印機(jī)，盡可能真實(shí)的還原了打印機(jī)的按鈕访锻，包括紙張的進(jìn)出口褪尝，還做了透視效果以及精致的折角（為了想這個相對復(fù)雜的造型，我用了>10分鐘）期犬。只是這樣對比的話河哑，嗯，右邊的貌似精致對不對龟虎？滿滿的設(shè)計(jì)感對不對璃谨？打住鲤妥！因?yàn)樵趯?shí)際使用過程中佳吞，你看到的可能是下面這樣的：

print2.png

是的，尺寸被壓縮了棉安，這時復(fù)雜的設(shè)計(jì)帶來的后果就是造型各種看不清底扳，而簡單的設(shè)計(jì)最大的好處就是它即使縮小了，仍能清楚的表達(dá)圖標(biāo)想要傳遞的意義贡耽。

說到圖標(biāo)衷模，新晉UI一定要知道什么時候用雪碧圖鹊汛，什么時候單個切圖，什么時候要做@2X的圖阱冶，那就是：看前端攻城獅的心情５蟊铩！哈哈木蹬，此言不假至耻，換句話說，在UI還沒有能力主導(dǎo)項(xiàng)目的情況下镊叁，他要什么就給什么就是了有梆，so easy。

photoshop一定要用最新版的意系，途徑自己解決，反正我現(xiàn)在辦公用的2017CC饺汹，家里因?yàn)闄C(jī)器配置的原因蛔添，勉強(qiáng)跑得起來2014CC，對比很明顯兜辞，新版本的功能就是強(qiáng)大迎瞧，插件推薦cutterman，切圖必備逸吵，界面標(biāo)注自然是Mark man凶硅，正版比體驗(yàn)版好，我是自費(fèi)解決的扫皱。

這里為什么單獨(dú)提到了AI足绅，其實(shí)很多UI是只用photoshop的，AI在平面設(shè)計(jì)中用的更多一些韩脑，但現(xiàn)在以及以后前端的發(fā)展氢妈，svg格式真的不可忽略，當(dāng)然了段多，2015CC以上的版本首量，可以拷貝svg格式，對于svg sprite圖进苍，ps無能無力加缘，這里需要用到AI的符號面板。后面我會單獨(dú)寫一篇文章來介紹svg sprite圖的制作和使用場景觉啊。還有svg動圖等等拣宏，都需要在掌握AI的基礎(chǔ)上才能做出很炫的效果。

另外杠人，附上兩段代碼：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 10 10"  enable-background="new 0 0 10 10" xml:space="preserve">
<path fill="#EA5514" d="M6.7,5.1L3.7,2.1c-0.2-0.2-0.2-0.5,0-0.7l0,0c0.2-0.2,0.5-0.2,0.7,0l2.9,2.9c0.2,0.2,0.2,0.5,0,0.7l0,0
C7.1,5.2,6.8,5.2,6.7,5.1z"/>
<path fill="#EA5514" d="M7.3,5.1L4.4,8C4.2,8.2,3.9,8.2,3.7,8l0,0c-0.2-0.2-0.2-0.5,0-0.7l2.9-2.9c0.2-0.2,0.5-0.2,0.7,0l0,0
C7.5,4.6,7.5,4.9,7.3,5.1z"/>
</svg>

這是AI生成的蚀浆。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="112px" height="192px">
<path fill-rule="evenodd"  fill="rgb(242, 155, 118)"
 d="M106.510,107.314 L27.314,186.510 C21.065,192.758 10.935,192.758 4.686,186.510 C-1.562,180.261 -1.562,170.131 4.686,163.882 L72.569,96.000 L4.686,28.118 C-1.562,21.869 -1.562,11.739 4.686,5.490 C10.935,-0.758 21.065,-0.758 27.314,5.490 L106.510,84.686 C112.758,90.935 112.758,101.065 106.510,107.314 Z"/>
</svg>

這是ps生成的缀程。

對比后會發(fā)現(xiàn)，AI生成的svg會有viewbox屬性市俊，這個大小是畫板的大小杨凑，這意味著什么？就是我們交給前端開發(fā)的時候連透明區(qū)域都可以定義好了摆昧。
（關(guān)于這里撩满，我糾正一下自己的錯誤，ps的新的保存功能鍵 ctrl+Alt+shift+w支持SVG格式绅你，但冗余代碼有點(diǎn)多伺帘，也是有viewBox屬性的，而且把樣式文件單獨(dú)分離了出來放進(jìn)定義的樣式文件里<defs><style></style></defs>忌锯，這里設(shè)計(jì)師可以自己嘗試一下比較一下區(qū)別）

必須熟練掌握的軟件：Photoshop伪嫁、AI（會越來越重要）
圖標(biāo)風(fēng)格的統(tǒng)一性體現(xiàn)了專業(yè)水準(zhǔn)。統(tǒng)一的重要性遠(yuǎn)大于設(shè)計(jì)的圖標(biāo)的復(fù)雜度偶垮。

3.構(gòu)圖的能力####

如果你是平面設(shè)計(jì)轉(zhuǎn)行的UI张咳，可能構(gòu)圖能力不是什么問題，但對于非設(shè)計(jì)專業(yè)出身似舵，這點(diǎn)可能需要好好的把握一下脚猾。對于UI來說，構(gòu)圖并不像平面設(shè)計(jì)那樣砚哗，講究畫面的平衡感龙助，只要記住一點(diǎn)就好，盡可能的對齊蛛芥，這里就要求按照內(nèi)容和邊距先規(guī)劃好最小單元提鸟。
以web版為例，放上兩張柵格化布局的示意圖看一下：

柵格布局.jpg

柵格布局.jpg

柵格的建立方法仅淑，低版本的photoshop推薦插件guideguide沽一，現(xiàn)在新版本的有福音了，“新建參考線版圖”漓糙，真是好用的不要不要的铣缠，媽媽再也不用擔(dān)心我一根根的新建參考線了。
這里特別強(qiáng)調(diào)一下昆禽，用柵格布局的時候一定要靈活蝗蛙，具體需要自己領(lǐng)會，就是不要生搬硬套醉鳖，移動端的話捡硅，頁面元素相對少一些，對齊主要是垂直方向的盗棵，只要稍微注意些壮韭，別讓自己的設(shè)計(jì)太過隨意北发，而且我們在發(fā)給前端界面標(biāo)注的時候，方便的話喷屋，就順手發(fā)一張帶參考線的琳拨，因?yàn)楝F(xiàn)在項(xiàng)目的保密性，我就不把自己做的放上了屯曹。

養(yǎng)成良好的柵格化布局的習(xí)慣狱庇，讓界面元素盡可能的對齊。帶參考線的界面效果圖會讓開發(fā)認(rèn)為你是經(jīng)過嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)思考的恶耽。

4.做基本的交互原型圖的能力####

說到這里密任，可能很多UI會說，這是交互設(shè)計(jì)的工作嘛偷俭，注意浪讳，我用到的一個詞是“基本”，就是說涌萤，這些做交互原型圖的軟件淹遵，選個最常用的，只需要會用一個功能就可以了形葬，我拿Axure舉例說明：

Axure-熱區(qū).png

是的，就是這個熱區(qū)暮的！軟件安裝時間笙以，10分鐘，了解軟件的面板和發(fā)布功能冻辩，10分鐘猖腕，學(xué)習(xí)熱區(qū)功能，5分鐘恨闪，總之學(xué)習(xí)成本非常低倘感。
對于一般的UI來說，并不要求你做高保真原型圖咙咽，那用熱區(qū)做原型圖的目的主要是方便給產(chǎn)品經(jīng)理和開發(fā)人員演示頁面之前的跳轉(zhuǎn)關(guān)系老玛。如果需要繼續(xù)進(jìn)階的話，需要掌握的就是動態(tài)面板钧敞，這個是做各種特效的基礎(chǔ)元件蜡豹。動態(tài)面板用好了，Axure的一半功能就已經(jīng)掌握了溉苛，對于UI來說也足夠了镜廉，如果再有繼續(xù)的追求，那就玩到中繼器愚战，掌握條件語句設(shè)置和函數(shù)娇唯，恭喜你齐遵，這時你已經(jīng)成功晉級交互設(shè)計(jì)師了∷澹或者梗摇，嚴(yán)格來說，已經(jīng)具備交互設(shè)計(jì)應(yīng)該有的基本技能了佑淀。
除了Axure之流留美，也要嘗試使用Xmind之類思維導(dǎo)圖，便于自己理清思路伸刃，Visio可以做流程圖谎砾，當(dāng)然，用紙和筆手繪的也行捧颅，但實(shí)際情況是景图，專業(yè)軟件做出來的發(fā)給上司看會顯得更加專業(yè)哦。但一個人的精力畢竟有限碉哑，所以這些工具類的不用糾結(jié)挚币，哪怕會一種就行，AI也可以做流程圖扣典，甚至PPT都能做交互原型妆毕，最重要的還是邏輯思維。

Axure贮尖、Mockup等等笛粘，會用一個就行，能實(shí)現(xiàn)最簡單的頁面跳轉(zhuǎn)就可以湿硝，當(dāng)然薪前，如果能做各種交互效果，毫無疑問的加分項(xiàng)关斜。思維導(dǎo)圖示括、Visio，可以會一點(diǎn)基礎(chǔ)的功能痢畜。

5.獲得最新知識的途徑####

這個我認(rèn)為是非常重要的一個能力垛膝，行業(yè)在發(fā)展，如果一直停滯不前丁稀，這里不要求設(shè)計(jì)風(fēng)格處于前沿繁涂，但要了解很多的行業(yè)動態(tài)。舉例說明二驰，這兩年一直很火的low poly（低多邊形風(fēng)格）扔罪，比如上司認(rèn)為QQ登錄的那種背景很時尚，如下桶雀，你想在作品里實(shí)現(xiàn)怎么辦矿酵？

QQ登錄.jpg

首先唬复，動態(tài)效果，我們要問一下前端開發(fā)能不能搞定（這個由他們的水平?jīng)Q定全肮，但網(wǎng)上明明有實(shí)現(xiàn)的方法敞咧，但有時候我們要原諒前端的無能為力 ……），他們能實(shí)現(xiàn)的話我們只要給配色方案就好辜腺，那萬一前端搞不定休建，我們也不能束手無策，靜態(tài)圖片雖然是下策评疗，但也勉強(qiáng)可用测砂。怎么實(shí)現(xiàn)呢？靠手繪百匆？砌些！No！在線生成工具加匈！

lowpoly.png

改變色系.png

改變晶格大小.png

一鍵生成存璃，而且可以隨意改變色系，改變晶格大小雕拼，以及纵东，還能生成svg格式。

對于UI來說啥寇，需要獲取的信息很龐大偎球，除了流行的設(shè)計(jì)風(fēng)格，還要嘗試了解前端技術(shù)的發(fā)展示姿，互聯(lián)網(wǎng)動態(tài)甜橱，新興的電子設(shè)備逊笆，等等栈戳，總之，越雜越好难裆，（但一定是相關(guān)的哦子檀，B站的二次元動漫不算哦）
因?yàn)檎f過自己也是轉(zhuǎn)行的，總感覺專業(yè)知識體系不到位乃戈，所以在平時有空閑時間的情況下褂痰，我也會看一些偏學(xué)術(shù)類的文章，包括碩士論文症虑，截一張我整理的部分專業(yè)文章的圖

專業(yè)文章.png

來源就是中國知網(wǎng)了缩歪，賬號需要自己解決，成本可控谍憔。

多上國外的設(shè)計(jì)網(wǎng)站匪蝙，dribbble上follow幾個排行前幾名的大神主籍，國內(nèi)的話推薦掘金，UXRen逛球，不要局限于自己的專業(yè)千元，注意擴(kuò)展。就系統(tǒng)化的知識而言颤绕，論文要更好些幸海。

6.把基礎(chǔ)的圖層樣式轉(zhuǎn)換成代碼語言的能力####

說到這點(diǎn)，很多UI可能會不服氣的說奥务，我又不是開發(fā)人員物独，怎地還要會代碼了？汗洒！其實(shí)講起來沒有那么高深议纯，就是很基礎(chǔ)的CSS語言，對于UI來說溢谤，隨著CSS3的崛起瞻凤，這個技能一定要掌握，這也是優(yōu)化你的應(yīng)用的很重要的一部世杀，比如阀参，我想做下面兩種按鈕效果。

描邊+漸變+外發(fā)光+文字立體效果.png

按鈕立體文字凹刻效果.png

然后你怎么處理呢瞻坝？要切圖蛛壳？如果尺寸不同還要切成三部分？
不所刀，正解就是這是CSS樣式完全復(fù)現(xiàn)的衙荐。因?yàn)槟憬唤o前端的是這樣的代碼：
normal狀態(tài)按鍵
border-radius:6px;
box-shadow:0px 2px 2px rgba(0,0,0,0.5)
background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#FEFFFF), to(#CFD0D4))
text-shadow:0px 1px 0px #FFFFFF;

press狀態(tài)按鍵
border-radius:6px;
無陰影效果
background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#D4D4D4), to(#9c9ea1))
文本無陰影

你可能會說，現(xiàn)在扁平化時代浮创，扁平化忧吟！我要這些立體/凹陷效果作甚，這不一夜回到十年前了嘛斩披！那你不可否認(rèn)的Material Design風(fēng)格溜族，還有現(xiàn)在的柔和漸變和漫射投影，這些都是可以用樣式直接實(shí)現(xiàn)的垦沉，如果你不能把這些效果轉(zhuǎn)換成CSS語言煌抒，那前端開發(fā)人員可是非常為難的，他們并不像UI那樣能看出對比不是非常明顯的深灰淺灰漸變以及外發(fā)光的大小厕倍、色值等等寡壮。

角度漸變+漫射投影.png

關(guān)于圖層樣式和CSS3的一些基本的關(guān)系，也會專門新建一篇詳細(xì)說明。

圖層樣式借助在線的CSS3樣式生成器轉(zhuǎn)換成代碼無疑是最簡單的途徑况既。

7.綜合能力####

這一條匯總一些我認(rèn)為其他有幫助的技能和知識領(lǐng)域屋群，比如邏輯思維能力，我認(rèn)為就非常重要坏挠。在很多公司芍躏，UI甚至不知不覺中肩負(fù)了產(chǎn)品結(jié)構(gòu)的構(gòu)建，（是結(jié)構(gòu)不是架構(gòu)哦）降狠，“邏輯”這種說不清道不明的鬼東西对竣，只有多看多想多積累，就一定會提升榜配。
如果你要一些動態(tài)效果否纬，可能還會給前端這種運(yùn)動速率曲線設(shè)定值。

標(biāo)準(zhǔn)曲線.png

canvas能實(shí)現(xiàn)濾鏡效果你造嘛蛋褥？JS框架和各種插件庫你造嘛临燃？不知道不可怕，可以從現(xiàn)在開始烙心，試著去了解膜廊。
除此之外，建議UI多了解一些基礎(chǔ)的詞匯淫茵，比如延遲加載爪瓜，數(shù)據(jù)庫，變量匙瘪，緩沖頁铆铆，等等等等，總之丹喻，你可以不會薄货，但不能在別人和你交流的時候一臉天真傻白甜。
但萬萬注意的是碍论，不能讓這些“旁門”占據(jù)你主要的時間谅猾，只是建議在做完手頭工作想刷刷淘寶購物、刷刷朋友圈的時候提醒自己還有很多未知領(lǐng)域等待區(qū)探索骑冗，每天花費(fèi)半個小時左右的時間赊瞬，足夠先煎。

除自身專業(yè)外贼涩，其他相關(guān)的多多益善且淺嘗輒止。

UI入門門檻很低薯蝎，培訓(xùn)機(jī)構(gòu)出來（只要認(rèn)真學(xué)習(xí)過）都可以直接上崗工作遥倦，但要成為一名真正的界面設(shè)計(jì)，而不是美工的話，需要進(jìn)階的技能真的很多很多袒哥。我自己非設(shè)計(jì)專業(yè)出身缩筛，且沒經(jīng)過任何培訓(xùn)，但一步步靠自學(xué)也積累了部分經(jīng)驗(yàn)堡称。無論如何瞎抛，要有自己的思想，一名失敗的UI是開發(fā)讓做幾*幾的圖然后畫個圖標(biāo)却紧，產(chǎn)品經(jīng)理說這里缺張廣告圖就昵圖上搜一張然后改改桐臊，而一名成功的UI則是參與到產(chǎn)品的設(shè)計(jì)中，并用自己的專業(yè)知識告訴周圍的人晓殊，我這種設(shè)計(jì)思路的意義何在。over。