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

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

A、預(yù)處理

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

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

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

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

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


B、工作過(guò)程

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

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

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


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

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

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

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

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

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


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

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

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

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

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

D、效率技巧

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

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

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

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

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

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


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