上海UI交互設(shè)計(jì)培訓(xùn)-超強(qiáng)推薦十四個實(shí)用設(shè)計(jì)技巧

下面和大家一起分享設(shè)計(jì)師用到的一些設(shè)計(jì)技巧。（上海UI設(shè)計(jì)培訓(xùn)）本次推薦的這個共劃分為四個部分：預(yù)處理、工作過程、后期處理以及效率技巧。下面一起來看看：

A、預(yù)處理

1、繪制草圖
繪制草圖其實(shí)沒那么多講究，用一張紙還是一個本子都無所謂，哪怕是手邊的一份傳單都沒問題，最重要的是要將腦海中的想法訴諸筆頭，記錄下來。（UI交互設(shè)計(jì)培訓(xùn)）只有畫出來，才能真正記住它們，不被遺忘。因此，我們可能需要保存一堆記錄著點(diǎn)滴靈感的報紙、賬單、雜志封面甚至餐巾紙。

2、搜集圖片
"藝術(shù)家是收藏者，而非囤積者。要知道，這兩者有個區(qū)別：囤積者會無選擇地收納，而藝術(shù)家則選擇性地收藏。藝術(shù)家只會搜集自己真正熱愛的東西。"——Austin Kleon《像藝術(shù)家一樣偷竊》
預(yù)處理的第二個階段是搜集圖片，這也是我每天都做的事情。（UI交互設(shè)計(jì)師）數(shù)以百計(jì)的風(fēng)格，成千上萬的圖片充斥網(wǎng)絡(luò)，但是我特別喜歡的還是老派的風(fēng)格。我會在Dropbox中為這些圖片分門別類（Dashboard、iOS、插畫，等等）。當(dāng)我拿到需求或開始項(xiàng)目的時候，會通過這些圖片來尋找靈感。Dropbox會預(yù)先同步好所有圖片內(nèi)容，因此無需聯(lián)網(wǎng)你就可以隨時隨地查看它們。

3、Moonboard與準(zhǔn)備工作
我們可以通過很多網(wǎng)站獲取靈感——Dribbble、Behance、Pttrns、Pinterest等等，我們常?？梢詮闹姓业絼e人做的類似項(xiàng)目。此外，也許別人正在試圖解決與你相同的問題，因此，你也可能從中受益。

做好Moodboard很有必要。
什么是Moodboard？（上海UI交互設(shè)計(jì)培訓(xùn)）Moodboard是指經(jīng)由對使用對象與產(chǎn)品認(rèn)知的色彩，影像，數(shù)字資產(chǎn)或其它材料的收集，可以引起某些情緒反應(yīng)，作為設(shè)計(jì)方向與形式的參考。
當(dāng)我開始一個新項(xiàng)目的時候，我總會準(zhǔn)備一個文件夾來收納相關(guān)信息，PSD、截圖、靈感以及資源各一個文件夾。其中，名為靈感的文件夾中收納著我從網(wǎng)上搜集的、與項(xiàng)目相關(guān)的所有的文件，用以激發(fā)我的靈感，這就是我的Moodboard。

這個文件夾里面應(yīng)該包含從基礎(chǔ)色版，到Behance上完整的案例研究等各種類型的信息。如果這是一個涉及用戶信息的APP，那么你還應(yīng)該有吸引人的人物照片。有時候我用不到這個文件夾，當(dāng)然，那是另外一種情況了


B、工作過程

4、我不在意線框圖的質(zhì)量
我并不是那種花費(fèi)半年來打磨線框圖原型的人。（UI設(shè)計(jì)培訓(xùn)）如果客戶能預(yù)先準(zhǔn)備了線框圖那就*了。好的客戶會在準(zhǔn)備好自己的想法和思路，甚至?xí)嬙诩埳?。用線框圖原型舉例，并不是想說它，我只是強(qiáng)調(diào)深入理解產(chǎn)品本身非常重要。你的UI/UX技能、想要表達(dá)的想法與你本身才是決定最終產(chǎn)品的因素。借助線框圖，你可以了解客戶的想法，弄清楚需要幾屏來構(gòu)成整個應(yīng)用。借此，你也會更加了解應(yīng)用本身。
有一種情況絕對是設(shè)計(jì)師的噩夢：客戶希望將線框圖1:1地輸出成最終產(chǎn)品，分毫不改?？蛻裟?，您是猴子請來的逗比么？這哪里是設(shè)計(jì)師干的事情啊？所以，當(dāng)你碰到這樣的項(xiàng)目的時候，盡快搞定，然后像博爾特一樣奔跑著遠(yuǎn)離這個項(xiàng)目，劃清界限。

5、大尺寸PSD背景
7個月前我剛開始在Badoo工作時，看到同事Sasha的工作過程時就在想，這哥們恐怕完全不明白Photoshop是怎么工作的吧？不過現(xiàn)在我正準(zhǔn)備用他的方式來作圖，因?yàn)檫@種模式更對我的胃口：當(dāng)你正在做一整個APP或者信息量較大的Dashboard的時候，使用大尺寸背景能更好地設(shè)計(jì)界面。（上海UI設(shè)計(jì)培訓(xùn)）在創(chuàng)建新的PSD文件時，我基本上會將背景設(shè)置成8000×5000像素的大小。要知道，我不僅僅只是創(chuàng)建一套UI kit，在大背景下工作時我能看到每一個元素相互之間的搭配，體會每一個界面狀態(tài)的差別。此外，用這種方式來設(shè)計(jì)，還可以非常輕易地截取小圖或某一狀態(tài)/階段下的產(chǎn)品圖片給開發(fā)者。

6、用一個PSD收納所有界面
當(dāng)我做一個普通的APP界面的時候，我也會用到其他APP的UI界面。這個時候，我更喜歡其他所有的界面都存在于一個PSD中，即使它們不是同一個產(chǎn)品的。我很清楚，這種情況下先用Sketch會很有幫助，但是我更喜歡使用Photoshop，并將大量不同UI的源文件置于一個PSD當(dāng)中，而非幾十個單獨(dú)文件。如此一來，我可以直接快速地從一個UI中選擇圖層拖放到當(dāng)前的界面中，而無需在幾十個不同PSD文件中慢慢找某一圖層。


7、文件夾與規(guī)范
從各個角度上而言，我都是一個整潔的人——桌面上只有圖標(biāo)，每個項(xiàng)目每個客戶都有單獨(dú)的文件夾。我每個文件夾都是依據(jù)相同規(guī)則整理好內(nèi)容，就像我的PSD的圖層結(jié)構(gòu)一樣。我的每個PSD結(jié)構(gòu)都非常清晰，我整理它們的時候，（UI設(shè)計(jì)培訓(xùn)）一旦發(fā)現(xiàn)一個文件夾的圖層超過8個，就會創(chuàng)建新的文件夾，將不同屬性的圖層區(qū)分開，歸納好。我會將PSD圖層整理得井井有條，仿佛隨時迎別人檢閱一樣。我不用為每個圖層單獨(dú)命名，因?yàn)槟憧梢院茌p易地通過我的文件夾命名和結(jié)構(gòu)來了解每個圖層的功用。如果你想知道更多PSD禮儀，不妨看看PSD禮儀白皮書。

8、與朋友交流
朋友們對產(chǎn)品設(shè)計(jì)的反饋，對我而言是至關(guān)重要的信息。我可以很輕易地創(chuàng)建一組小型的用戶測試，并且傾聽朋友們反饋它們碰到的問題，以及修改意見。這些想法常常能為解決問題開拓思路打開一扇全新的門，我會在產(chǎn)品開發(fā)的各個階段進(jìn)行這樣的測試，獲取反饋。（上海UI設(shè)計(jì)培訓(xùn)）此外，這種測試誰都可以參與，不過我一般會將被測試者分為兩個部分：來自社區(qū)的UX設(shè)計(jì)師以及普通用戶。這主要是因?yàn)楫a(chǎn)品受眾常常是普通用戶，而非設(shè)計(jì)師。

9、界面設(shè)計(jì)
當(dāng)我或者客戶準(zhǔn)備好線框圖原型之后，我更傾向于將它們合并到一個PSD文件中去。接下來，我會琢磨界面交互，點(diǎn)擊不同的地方會產(chǎn)生什么效果。在這個過程中，我們常常能發(fā)現(xiàn)缺失的環(huán)節(jié)和需要補(bǔ)充的界面，以及其他的錯誤，這些都是客戶和我們最初考慮不周全的地方。如此一來，我便可以將所有的界面和元素放在一起，綜合起來看。當(dāng)我面對一個擁有15屏的APP界面設(shè)計(jì)稿的時候，就會發(fā)現(xiàn)讓它們保持統(tǒng)一風(fēng)格是一件很難的事情，最初的設(shè)計(jì)準(zhǔn)則也因此需要調(diào)整。

三種不同的標(biāo)識線，*種是帶數(shù)字標(biāo)號指向下一屏的，第二種是屏內(nèi)指引線，第三種是指向外部應(yīng)用和鏈接的線。

關(guān)于樣式——我所使用的原型設(shè)計(jì)樣式和很多設(shè)計(jì)師差不多，（UI交互設(shè)計(jì)師）但是比起耗費(fèi)大量的時間去繪制復(fù)雜的指引線展示交互過程，我更愿意使用代表下一屏的數(shù)字標(biāo)號和簡單直觀的指引線來展示我的設(shè)計(jì)。這種方式有點(diǎn)兒像過去老范兒的游戲說明書，但是它比起印刷電路板般的指引線地圖要好的多。如此一來，你便可以在整張圖上看到更多有效的信息。

為此我附上PSD，讓你更容易理解我的想法。


C、后期處理(設(shè)計(jì)規(guī)范)

終于接近尾聲了，*一個部分是創(chuàng)建設(shè)計(jì)規(guī)范，檢查并確保視覺的一致性。事實(shí)證明，這一環(huán)節(jié)是項(xiàng)目中極為重要的一個部分，不論項(xiàng)目是大是小。在大型項(xiàng)目中，如果要改變某些組件的屬性，通常我是無法*確定是不是把所有相關(guān)組件都改過來了。（上海UI設(shè)計(jì)培訓(xùn)）有了設(shè)計(jì)準(zhǔn)則之后，我們就能確保UI中不會出現(xiàn)50種不同濃淡的灰色和14種不同尺寸的字體。

10 色彩規(guī)范
做好色彩規(guī)范是我謹(jǐn)記的*要務(wù)。在扁平化設(shè)計(jì)風(fēng)行的今天，我們終于可以盡可能少地為按鈕和文本設(shè)定色彩規(guī)格。你可以在PSD中創(chuàng)建類似Photoshop調(diào)色版一樣的色彩規(guī)范圖。

11、版式規(guī)范
另一個重要規(guī)范就是版式和字體的規(guī)范。將每個組件所涉及的字體、字號、粗細(xì)、字距、行距等等都明確地標(biāo)識在PSD中，這將極大地減輕設(shè)計(jì)師和開發(fā)者在規(guī)范化上的負(fù)擔(dān)。

12、UI Kit
當(dāng)討論APP與網(wǎng)站的一致性的時候，UI Kit就顯得極為重要了。（UI設(shè)計(jì)培訓(xùn)）同時，如果你身處設(shè)計(jì)師團(tuán)隊(duì)中或者與前端工程師協(xié)作的時候，UI Kit一樣是不可或缺的。有了這份標(biāo)準(zhǔn)化的文檔，設(shè)計(jì)師可以隨時隨地的抓取UI元素創(chuàng)建新的界面，而前端工程師也能清晰地了解每個UI元素的樣式，不用隔三差五跑來問設(shè)計(jì)師了 。
值得注意的是，很多大公司依然未曾注意產(chǎn)品的UI元素統(tǒng)一性的問題，CSS樣式一次又一次地重寫，你會發(fā)現(xiàn)同一個按鈕在三個不同程序中有三種截然不同的說明，甚至截然不同的樣式。因此，千萬不要忘記保持一致性。

D、效率技巧

13、todo
我保持一切井井有條的秘訣在于使用 todo list。（上海UI交互設(shè)計(jì)培訓(xùn)）使用什么樣的APP并不重要，重要的是執(zhí)行。我喜歡Cultured Code出品的效率工具Things，偶爾也喜歡用紙張記錄各種待辦事項(xiàng)。完成所有代辦事項(xiàng)的感覺非常棒。我曾經(jīng)沉迷于接手所有發(fā)送到我收件箱的項(xiàng)目，但是現(xiàn)在我才發(fā)現(xiàn)，最暢快的還是一次專注于1-2個項(xiàng)目，并且*地完成它們之后，再開始新的項(xiàng)目，這比起同時奮斗5個不同項(xiàng)目來的更加高效靠譜。

"如果你同時追兩只兔子，你將空手而歸。"——Russian Proverb

14、目標(biāo)
明確自己的目標(biāo)是挺好的，但是千萬不要受到它的束縛。我會給自己做兩周內(nèi)的計(jì)劃（就像短跑），并定下季度目標(biāo)。同時，我會讓自己嘗試新的事務(wù)，并設(shè)定可達(dá)成的目標(biāo)（比如使用AE做自己的*個動畫），并同時不斷完善手頭的項(xiàng)目直至完成（例如完成2個Behance案例研究）。

還有什么？
我不用鼠標(biāo)，只用觸控板，并且學(xué)會了所有的快捷鍵。我使用Skala Preview將Photoshop上的顯示內(nèi)容輸出到iPhone上。目前我還在學(xué)習(xí)AE和Sketch。創(chuàng)建原型的時候，我使用InVision來處理網(wǎng)頁設(shè)計(jì)的項(xiàng)目，而iOS程序則使用*的MarvelAPP來應(yīng)對。（上海UI交互設(shè)計(jì)培訓(xùn)）對我而言，使用紙筆設(shè)計(jì)UI比在iPhone上拖拽來的更快。有時候我依然會用PopApp來創(chuàng)建早期原型。

*幾句話
讓我嚴(yán)格依照上面的流程來處理每一個項(xiàng)目的確不現(xiàn)實(shí)，因?yàn)橛械捻?xiàng)目一開始就有思路和想法，那么就可以跳過上面的某些流程直接開工。

UI設(shè)計(jì)培訓(xùn)）設(shè)計(jì)師能從用戶測試和信息反饋中了解更多并從中受益，這些信息能促使他們思考新項(xiàng)目，完善老項(xiàng)目。尤其是在用戶測試的環(huán)節(jié)，設(shè)計(jì)師收到的反饋會刷新它們對于產(chǎn)品本身的認(rèn)知，因?yàn)樗麄兘K將發(fā)現(xiàn)，很多普通用戶壓根不會按照設(shè)計(jì)師的設(shè)計(jì)來使用APP。


欲知更多的UI交互設(shè)計(jì)培訓(xùn)歡迎及時關(guān)注上海非凡實(shí)時更新的UI交互設(shè)計(jì)資訊！