在開始這個話題之前，UI設(shè)計(jì)師先來回想一下自己的工作流程，當(dāng)我們開始做一個界面時，不外乎兩種情況，一種是新產(chǎn)品，一種是現(xiàn)有產(chǎn)品迭代界面重繪。對于前者，是不是先扒拉扒拉參考一下競品的界面設(shè)計(jì)，然后套一套自己產(chǎn)品的功能，然后就可以開工了，這里需要放個導(dǎo)航條，嗯，這里用選項(xiàng)卡，再加個搜索框，搜索圖標(biāo)放里面好還是放外面好呢，就放外面吧，熱門搜索要不要做成標(biāo)簽?zāi)兀恍?，這事決定不了，去問問項(xiàng)目經(jīng)理去，這里還需要一個文本輸入框，限制200字，那就給它個高度300像素吧。而第二種情況，更簡單，重新配配色，布布局，畫畫圖標(biāo)，就醬。不出意外的話，絕大多數(shù)UI不會脫離這個套路。（“大神級”UI自然也不會在看這篇文章，這一部分人就暫時忽略了）
如果作為UI設(shè)計(jì)師的你現(xiàn)在仍然停留在這個階段的話，那從現(xiàn)在開始，你需要重新規(guī)劃一下自己的設(shè)計(jì)思路了，并且，最最重要的是，你需要了解兩個東東，“框架”和“庫”。這兩個概念我自己也比較模糊，從UI設(shè)計(jì)師的角度出發(fā)，我們需要知道的一點(diǎn)是和你們合作的前端極少極少不使用框架，而UI庫是一些封裝好的組件的樣式，你發(fā)給攻城獅的設(shè)計(jì)稿，他們拿到后的第一反應(yīng)就是趕快看看（咳咳，當(dāng)我沒說）有沒有現(xiàn)成的可使用的組件樣式，最好越接近你的設(shè)計(jì)越好，然后簡單改改，攻城獅們的工作思路和我們是一樣一樣的，最好不改交互方式，只改樣式。（什么控件、組件、插件的，我也不能嚴(yán)格區(qū)分，所以即使有錯誤的地方，也請勿糾正，哈哈）
說到這里，UI設(shè)計(jì)師又開始各種煩躁了，設(shè)計(jì)師到底為毛要掌握這些莫名其妙的知識？？舉個例子先，我們都知道給響應(yīng)不是那么快的頁面設(shè)計(jì)一個加載動畫，那作為設(shè)計(jì)師的你知不知道加載狀態(tài)是和服務(wù)器存在數(shù)據(jù)交互時使用，如果是本地行為，則不需要加載狀態(tài)。只有了解這個，你才會知道你的加載動畫應(yīng)該在哪些頁面出現(xiàn)，進(jìn)行什么操作時出現(xiàn)，以什么形式出現(xiàn)合適。（咦，這個例子似乎舉得沒有代表性，那么來看下面這個例子）
就說個最簡單的tab選項(xiàng)卡吧，SUI組件庫里的tab選項(xiàng)卡樣式是下面這樣子的：
樣式似乎沒有什么參考性，但你從中要得到的一個重要信息就是，作為選項(xiàng)卡而言，內(nèi)容要和選中標(biāo)簽頁看上去成為一個整體，也就是說你可以重新設(shè)計(jì)成下面這個樣式
但如果你設(shè)計(jì)成了這種樣式
那么請來告訴我，這神秘的橫線我該如何理解呢？即使下面這種，仍然不是最佳方式，因?yàn)槲覀兊倪x項(xiàng)卡需要“第一眼看上去就知道哪個tab頁處于選中狀態(tài)”。
目前廣泛應(yīng)用的UI組件庫，包括easyUI、amazeUI、Bootstrap等等，我們可以從這些來入手，在設(shè)計(jì)時進(jìn)行一下參考，如果它的按鈕有四個狀態(tài)，OK，你也來對應(yīng)設(shè)計(jì)四個狀態(tài)，如果它的input輸入框有禁用狀態(tài)，獲得焦點(diǎn)狀態(tài)，那同樣你也要在自己的設(shè)計(jì)文檔中予以體現(xiàn)。（當(dāng)然，并非絕對，也要考慮項(xiàng)目的實(shí)際情況，靈活變通）
現(xiàn)在重新理一下工作流程，你要先咨詢一下前端開發(fā)人員他們常用什么，或者項(xiàng)目中已經(jīng)使用了什么，咱們來舉例說明，如果前端攻城獅們已經(jīng)使用了EasyUI，而碰巧你的項(xiàng)目中需要一個日期選擇的功能，那正確的思路應(yīng)該是怎樣的呢？
首先，你需要先看一下EasyUI庫里日期控件的樣子。就是下面這樣
然后試一下功能，再進(jìn)行設(shè)計(jì)時，心里就有底了，比如可以改成下面這樣
但這樣就完了么？作為UI還需要考慮對于這個控件而言都提供了幾種狀態(tài)？默認(rèn)加載的當(dāng)前日期、選中其他日期后的當(dāng)前日期、鼠標(biāo)經(jīng)過、周六/周日的日期顏色、非本月的日期的顏色，這些都需要一一體現(xiàn)在你的標(biāo)注文檔里，事無巨細(xì)，一旦疏忽了其中任何一個小細(xì)節(jié)，好點(diǎn)的情況是負(fù)責(zé)的前端開發(fā)人員會過來和你溝通，而有時可能攻城獅們一疏忽，那只有寄希望于視覺走查和測試了。這么簡單的一個日期控件都需要考慮全面，所以，一個合格的UI還是需要多沉浸的。
如果你不沒有看過UI庫里日期組件的樣式，而自作主張的設(shè)計(jì)成了下面的樣子
還拿出很多理論來支持自己的設(shè)計(jì)，你看，年和月的選擇都很方便快捷嘛，嗯，好想看你被開發(fā)人員暴打的樣子……當(dāng)然了，這里不是說不讓你發(fā)揮你的創(chuàng)意，不過除非你有非常說服力的理由和讓別人心服口服的設(shè)計(jì)理論支持，否則，不要做這種出力不討好的事情，因?yàn)樽鳛槌墒斓慕M件庫，經(jīng)過多年的發(fā)展，已經(jīng)被很多人所認(rèn)可和使用，也能更大程度上和其他用戶經(jīng)常使用的產(chǎn)品保持一致的交互。
對于移動端，Android SDK提供的界面UI基本沒有看的必要，而絕大多數(shù)開源UI庫源碼在github，給設(shè)計(jì)師們直觀的查看設(shè)置了門檻，比如GreenDroid等等，Android的UI框架和web的有個比較大的區(qū)別就是按組件分類，像Side-Menu分類側(cè)滑菜單，Pull-to-Refresh下拉刷新，給UI設(shè)計(jì)師推薦一個awesome-android-ui，自帶Demo， https://github.com/wasabeef/awesome-android-ui/blob/master/pages/Material.md ，包括一些動效，很直觀。
比如這種水紋效果的樣式。
還有這種漢堡菜單/關(guān)閉/返回按鈕的變換
作為UI設(shè)計(jì)師，在做原型稿的時候基本不用費(fèi)盡心思用AE來做什么特效，直接附上效果和庫的源文件地址就好，方便自己也方便開發(fā)。
另外移動端的UI日常尤其要注意控件樣式的積累，自己建好文件夾，分好類，按鈕/編輯框/switch/文本控件/進(jìn)度條/滾動條/對話框/日歷/導(dǎo)航/圖表/菜單/輪播廣告位/搜索框/標(biāo)簽組等等，為了減輕開發(fā)人員的負(fù)擔(dān)，在看到不錯的效果時，可以把Demo動畫和項(xiàng)目地址同時保存下來，因?yàn)槟愕奶祚R行空的想象或者簡單一句“在XXX上好像看過這種效果”會讓開發(fā)人員非常抓狂。
多看UI庫的另外一個好處是拓展自己的設(shè)計(jì)思路，像下面這種Floating Action Button
還有粘連效果的頁面指示器
如果不是看到這種動效，或許我們自己也想不出可以做成這種樣子。
iOS開發(fā)的話因?yàn)槲冶救艘仓簧婕斑^寥寥數(shù)個項(xiàng)目，而且都是和Android用的同一套界面，所以未總結(jié)出足夠的經(jīng)驗(yàn)，最多看看最新版的HIG人機(jī)交互指南，參考過幾個競品，所以這里就不獻(xiàn)丑了。
綜上所述，組件庫是個好東東，身為設(shè)計(jì)師但還未了解任何組件庫的你，把自己暫時從閉門造車的狀態(tài)中脫離出來，多看多想，再去做，方可與前端開發(fā)人員保持同步。
