雖然ehr系統(tǒng)白底黑字赫然顯示工作崗位是交互設(shè)計師，但作為被項目組公用的資源以及集交互、用戶體驗、界面設(shè)計于一身的“綜合型崗位”，項目組的UI部分通常也是由我來完成的，好吧，這里不把自己說的bi格那么高了，畢竟很多可（zhao）愛（shi）的攻城獅們，包括前端和后臺，會經(jīng)常大喊一聲，這是美工給的方案，赤裸裸的剝開我華麗的偽裝，╭(╯^╰)╮，已懶得辯解，美工就美工！雖然自己是從一枚生物狗轉(zhuǎn)行UI，又到交互設(shè)計，但自認雖不優(yōu)秀但還是一個合格的UI的，那今天就寫一下作為UI的基本技能，從底層開始，希望給剛?cè)胄械腢I一點借鑒，因為現(xiàn)在的大形勢是視覺UI偏飽和，游戲UI沒接觸過，不懂，兩個方向可拓展自己，了解前端知識，或者做用戶體驗。所以對UI的綜合能力的要求越來越高，當然了，對于設(shè)計團隊，可能對專業(yè)技能更看重，但絕大多數(shù)UI，最后都是進了中小公司，身兼數(shù)職不足為奇，所以以下均為個人經(jīng)驗之談，同行可閱，莫噴。
1.配色的能力####
這里一定很奇怪，為什么我會認為配色如此重要，甚至超過了對基礎(chǔ)軟件的使用，因為在很多人眼里，UI不就是畫圖標的么。這篇文章如果是一年前寫，我會和2.交換一下，但現(xiàn)在阿里巴巴的iconfont以及google已經(jīng)提供了資源豐富的圖標以供下載免費使用，而且格式也從png到svg到icon font，應(yīng)有盡有，甚至毫不夸張的說，如果一個小公司有一個具備審美能力的前端，那么UI的崗位，不是可有可無，而是根本不需要。這里不是聳人聽聞，也不是滅UI的威風，因為前端們只要把這些圖標down下來，改一下顏色，對于目前的扁平化風格，足夠應(yīng)付很多頁面。所以，就目前情況來說，UI一定要有良好的配色能力。那么，配色能力哪里來？
這里，我的建議是，少去那些專業(yè)的配色網(wǎng)站，色環(huán)，相近色，互補色，我敢保證，對于普通的UI來說（高階的除外），這些一點幫助都沒有，想一下，除了基礎(chǔ)的黑白灰，去掉企業(yè)色，允許你自由發(fā)揮的顏色并不是很多了，簡單的方法是什么？經(jīng)常上dribbble之類的設(shè)計網(wǎng)站，保存各種你最欣賞的頁面，然后，找和你設(shè)計方案相似的，OK，直接拿來用。為什么我說配色網(wǎng)站幫助不大，這里我舉個例子說明。
這是我從日本傳統(tǒng)色NIPPON COLORS取下來的兩個顏色，一紅一綠，名字很美，也是我比較喜歡的兩個顏色。
這里我要設(shè)計一個登錄界面，然后我拿這兩個顏色怎么辦？做出下面這種界面么？
而如果有一個頁面設(shè)計是下面這種，認為還不錯的：
然后同樣登錄界面，我在不改變?nèi)魏谓缑嬖氐那闆r下，只用它的配色方案生成一版看一下效果
好像還不錯。
當然了，這里我舉得例子有點不太恰當，但只是想通過這種方式來說明，很多配色，大神們已經(jīng)幫我們做好了，我們直接拿來用，十有八九不會出錯。
顏色美好≠界面美好，對于初級UI，配色的最佳方案是拿來主義，隨著水平的提升，再形成自己的風格。
2.做圖標的能力####
這個毋庸置疑是最基礎(chǔ)的，也是我當時轉(zhuǎn)行UI的一個優(yōu)勢，我自己是從02年開始接觸photoshop，從7.0一直到現(xiàn)在的2017CC，雖然不是科班出身，一直通過各種教程自學，什么工具都用，當然，也修圖，但畢竟十幾年的實戰(zhàn)經(jīng)驗，對于軟件的使用還是很嫻熟的。因為ps的功能太過強大，那么作為UI，最需要掌握的是布爾運算。
第一，盡量只用基本圖形的加減，第二，圖標風格的統(tǒng)一。
圖標的格式除了常見的PNG-24，還要知道svg，icon font，以及透明背景的bmp（是的，你沒有看錯，這個用處不多，我也只做過一次，需要了解有透明通道的位圖是什么以及如何生成）。具體我們的圖標用什么格式，資深UI不用說了，小白們問前端，什么時候需要做雪碧圖，什么時候需要單獨切圖，負責的前端開發(fā)人員會告訴你的。
圖標風格的統(tǒng)一，往復(fù)雜里說，要求非常精細，比如描邊的寬度，基本圖形的圓角半徑等等，能統(tǒng)一的地方盡量都統(tǒng)一，但往簡單里說，把握一點，線條圖和塊狀圖，一組圖標只能選擇一種，不可混搭。同樣，舉例說明，還是剛才的登陸界面，如果線條圖和塊狀圖混搭，會造成很不和諧的頁面效果，尤其是當圖標元素比較多的時候。
如果你想要線條圖，那么你可以都改成下面這種樣式
關(guān)于圖標，這里多說幾句，除非你有特別好的創(chuàng)意，否則用最基礎(chǔ)的永遠不會出錯，比如齒輪代表設(shè)置，筆代表編輯，前后兩張紙代表復(fù)制，心或星表示收藏，不要擔心因為做了沒有特色的圖標而被人說水平很low，通常情況下，開發(fā)人員和BOSS都不會太過于關(guān)心圖標是不受標新立異，反而中規(guī)中矩，更容易被接受。依舊舉例說明：
這是打印的圖標，左側(cè)的最簡單，1分鐘吧，然后，你可能覺得太過簡單了，冥思苦想設(shè)計出來右側(cè)的這種，你為此可能還特意去看了辦公室的打印機，盡可能真實的還原了打印機的按鈕，包括紙張的進出口，還做了透視效果以及精致的折角（為了想這個相對復(fù)雜的造型，我用了>10分鐘）。只是這樣對比的話，嗯，右邊的貌似精致對不對？滿滿的設(shè)計感對不對？打??！因為在實際使用過程中，你看到的可能是下面這樣的：
是的，尺寸被壓縮了，這時復(fù)雜的設(shè)計帶來的后果就是造型各種看不清，而簡單的設(shè)計最大的好處就是它即使縮小了，仍能清楚的表達圖標想要傳遞的意義。
說到圖標，新晉UI一定要知道什么時候用雪碧圖，什么時候單個切圖，什么時候要做@2X的圖，那就是：看前端攻城獅的心情??！哈哈，此言不假，換句話說，在UI還沒有能力主導(dǎo)項目的情況下，他要什么就給什么就是了，so easy。
photoshop一定要用最新版的，途徑自己解決，反正我現(xiàn)在辦公用的2017CC，家里因為機器配置的原因，勉強跑得起來2014CC，對比很明顯，新版本的功能就是強大，插件推薦cutterman，切圖必備，界面標注自然是Mark man，正版比體驗版好，我是自費解決的。
這里為什么單獨提到了AI，其實很多UI是只用photoshop的，AI在平面設(shè)計中用的更多一些，但現(xiàn)在以及以后前端的發(fā)展，svg格式真的不可忽略，當然了，2015CC以上的版本，可以拷貝svg格式，對于svg sprite圖，ps無能無力，這里需要用到AI的符號面板。后面我會單獨寫一篇文章來介紹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格式，但冗余代碼有點多，也是有viewBox屬性的，而且把樣式文件單獨分離了出來放進定義的樣式文件里<defs><style></style></defs>，這里設(shè)計師可以自己嘗試一下比較一下區(qū)別）
必須熟練掌握的軟件：Photoshop、AI（會越來越重要）
圖標風格的統(tǒng)一性體現(xiàn)了專業(yè)水準。統(tǒng)一的重要性遠大于設(shè)計的圖標的復(fù)雜度。
3.構(gòu)圖的能力####
如果你是平面設(shè)計轉(zhuǎn)行的UI，可能構(gòu)圖能力不是什么問題，但對于非設(shè)計專業(yè)出身，這點可能需要好好的把握一下。對于UI來說，構(gòu)圖并不像平面設(shè)計那樣，講究畫面的平衡感，只要記住一點就好，盡可能的對齊，這里就要求按照內(nèi)容和邊距先規(guī)劃好最小單元。
以web版為例，放上兩張柵格化布局的示意圖看一下：
柵格的建立方法，低版本的photoshop推薦插件guideguide，現(xiàn)在新版本的有福音了，“新建參考線版圖”，真是好用的不要不要的，媽媽再也不用擔心我一根根的新建參考線了。
這里特別強調(diào)一下，用柵格布局的時候一定要靈活，具體需要自己領(lǐng)會，就是不要生搬硬套，移動端的話，頁面元素相對少一些，對齊主要是垂直方向的，只要稍微注意些，別讓自己的設(shè)計太過隨意，而且我們在發(fā)給前端界面標注的時候，方便的話，就順手發(fā)一張帶參考線的，因為現(xiàn)在項目的保密性，我就不把自己做的放上了。
養(yǎng)成良好的柵格化布局的習慣，讓界面元素盡可能的對齊。帶參考線的界面效果圖會讓開發(fā)認為你是經(jīng)過嚴謹?shù)脑O(shè)計思考的。
4.做基本的交互原型圖的能力####
說到這里，可能很多UI會說，這是交互設(shè)計的工作嘛，注意，我用到的一個詞是“基本”，就是說，這些做交互原型圖的軟件，選個最常用的，只需要會用一個功能就可以了，我拿Axure舉例說明：
是的，就是這個熱區(qū)！軟件安裝時間，10分鐘，了解軟件的面板和發(fā)布功能，10分鐘，學習熱區(qū)功能，5分鐘，總之學習成本非常低。
對于一般的UI來說，并不要求你做高保真原型圖，那用熱區(qū)做原型圖的目的主要是方便給產(chǎn)品經(jīng)理和開發(fā)人員演示頁面之前的跳轉(zhuǎn)關(guān)系。如果需要繼續(xù)進階的話，需要掌握的就是動態(tài)面板，這個是做各種特效的基礎(chǔ)元件。動態(tài)面板用好了，Axure的一半功能就已經(jīng)掌握了，對于UI來說也足夠了，如果再有繼續(xù)的追求，那就玩到中繼器，掌握條件語句設(shè)置和函數(shù)，恭喜你，這時你已經(jīng)成功晉級交互設(shè)計師了。或者，嚴格來說，已經(jīng)具備交互設(shè)計應(yīng)該有的基本技能了。
除了Axure之流，也要嘗試使用Xmind之類思維導(dǎo)圖，便于自己理清思路，Visio可以做流程圖，當然，用紙和筆手繪的也行，但實際情況是，專業(yè)軟件做出來的發(fā)給上司看會顯得更加專業(yè)哦。但一個人的精力畢竟有限，所以這些工具類的不用糾結(jié)，哪怕會一種就行，AI也可以做流程圖，甚至PPT都能做交互原型，最重要的還是邏輯思維。
Axure、Mockup等等，會用一個就行，能實現(xiàn)最簡單的頁面跳轉(zhuǎn)就可以，當然，如果能做各種交互效果，毫無疑問的加分項。思維導(dǎo)圖、Visio，可以會一點基礎(chǔ)的功能。
5.獲得最新知識的途徑####
這個我認為是非常重要的一個能力，行業(yè)在發(fā)展，如果一直停滯不前，這里不要求設(shè)計風格處于前沿，但要了解很多的行業(yè)動態(tài)。舉例說明，這兩年一直很火的low poly（低多邊形風格），比如上司認為QQ登錄的那種背景很時尚，如下，你想在作品里實現(xiàn)怎么辦？
首先，動態(tài)效果，我們要問一下前端開發(fā)能不能搞定（這個由他們的水平?jīng)Q定，但網(wǎng)上明明有實現(xiàn)的方法，但有時候我們要原諒前端的無能為力 ……），他們能實現(xiàn)的話我們只要給配色方案就好，那萬一前端搞不定，我們也不能束手無策，靜態(tài)圖片雖然是下策，但也勉強可用。怎么實現(xiàn)呢？靠手繪？！No！在線生成工具！
一鍵生成，而且可以隨意改變色系，改變晶格大小，以及，還能生成svg格式。
對于UI來說，需要獲取的信息很龐大，除了流行的設(shè)計風格，還要嘗試了解前端技術(shù)的發(fā)展，互聯(lián)網(wǎng)動態(tài)，新興的電子設(shè)備，等等，總之，越雜越好，（但一定是相關(guān)的哦，B站的二次元動漫不算哦）
因為說過自己也是轉(zhuǎn)行的，總感覺專業(yè)知識體系不到位，所以在平時有空閑時間的情況下，我也會看一些偏學術(shù)類的文章，包括碩士論文，截一張我整理的部分專業(yè)文章的圖
來源就是中國知網(wǎng)了，賬號需要自己解決，成本可控。
多上國外的設(shè)計網(wǎng)站，dribbble上follow幾個排行前幾名的大神，國內(nèi)的話推薦掘金，UXRen，不要局限于自己的專業(yè)，注意擴展。就系統(tǒng)化的知識而言，論文要更好些。
6.把基礎(chǔ)的圖層樣式轉(zhuǎn)換成代碼語言的能力####
說到這點，很多UI可能會不服氣的說，我又不是開發(fā)人員，怎地還要會代碼了？！其實講起來沒有那么高深，就是很基礎(chǔ)的CSS語言，對于UI來說，隨著CSS3的崛起，這個技能一定要掌握，這也是優(yōu)化你的應(yīng)用的很重要的一部，比如，我想做下面兩種按鈕效果。
然后你怎么處理呢？要切圖？如果尺寸不同還要切成三部分？
不，正解就是這是CSS樣式完全復(fù)現(xiàn)的。因為你交給前端的是這樣的代碼：
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)在扁平化時代，扁平化！我要這些立體/凹陷效果作甚，這不一夜回到十年前了嘛！那你不可否認的Material Design風格，還有現(xiàn)在的柔和漸變和漫射投影，這些都是可以用樣式直接實現(xiàn)的，如果你不能把這些效果轉(zhuǎn)換成CSS語言，那前端開發(fā)人員可是非常為難的，他們并不像UI那樣能看出對比不是非常明顯的深灰淺灰漸變以及外發(fā)光的大小、色值等等。
關(guān)于圖層樣式和CSS3的一些基本的關(guān)系，也會專門新建一篇詳細說明。
圖層樣式借助在線的CSS3樣式生成器轉(zhuǎn)換成代碼無疑是最簡單的途徑。
7.綜合能力####
這一條匯總一些我認為其他有幫助的技能和知識領(lǐng)域，比如邏輯思維能力，我認為就非常重要。在很多公司，UI甚至不知不覺中肩負了產(chǎn)品結(jié)構(gòu)的構(gòu)建，（是結(jié)構(gòu)不是架構(gòu)哦），“邏輯”這種說不清道不明的鬼東西，只有多看多想多積累，就一定會提升。
如果你要一些動態(tài)效果，可能還會給前端這種運動速率曲線設(shè)定值。
canvas能實現(xiàn)濾鏡效果你造嘛？JS框架和各種插件庫你造嘛？不知道不可怕，可以從現(xiàn)在開始，試著去了解。
除此之外，建議UI多了解一些基礎(chǔ)的詞匯，比如延遲加載，數(shù)據(jù)庫，變量，緩沖頁，等等等等，總之，你可以不會，但不能在別人和你交流的時候一臉天真傻白甜。
但萬萬注意的是，不能讓這些“旁門”占據(jù)你主要的時間，只是建議在做完手頭工作想刷刷淘寶購物、刷刷朋友圈的時候提醒自己還有很多未知領(lǐng)域等待區(qū)探索，每天花費半個小時左右的時間，足夠。
除自身專業(yè)外，其他相關(guān)的多多益善且淺嘗輒止。
UI入門門檻很低，培訓機構(gòu)出來（只要認真學習過）都可以直接上崗工作，但要成為一名真正的界面設(shè)計，而不是美工的話，需要進階的技能真的很多很多。我自己非設(shè)計專業(yè)出身，且沒經(jīng)過任何培訓，但一步步靠自學也積累了部分經(jīng)驗。無論如何，要有自己的思想，一名失敗的UI是開發(fā)讓做幾*幾的圖然后畫個圖標，產(chǎn)品經(jīng)理說這里缺張廣告圖就昵圖上搜一張然后改改，而一名成功的UI則是參與到產(chǎn)品的設(shè)計中，并用自己的專業(yè)知識告訴周圍的人，我這種設(shè)計思路的意義何在。over。
