ui設(shè)計(jì)產(chǎn)品的流程有什么呢?對(duì)于這個(gè)問(wèn)題，想必很多的朋友們都很想搞清楚吧，既然大家都好奇的話(huà)，自然就不能夠錯(cuò)過(guò)接下來(lái)的內(nèi)容，一起來(lái)看看具體都有什么吧，幫助大家充分的了解。

　　一、前期工作

　　1.畫(huà)

　　無(wú)論是一張紙、筆記本，還是一片什么能寫(xiě)的玩意兒，都可以。我們需要用紙筆記錄下腦中的創(chuàng)意，避免遺忘。有些時(shí)候，靈感經(jīng)常不經(jīng)意出現(xiàn)，而一時(shí)半會(huì)兒又找不到合適的紙，因此我會(huì)用銀行收據(jù)、餐館賬單、書(shū)籍封面等做暫時(shí)記錄。

　　可以專(zhuān)門(mén)用一個(gè)筆記本來(lái)收集你的創(chuàng)意，不時(shí)的翻翻，可能會(huì)找到一些非常有趣的舊想法，你可以根據(jù)這些舊點(diǎn)子想一些新玩意兒。

　　2. 收集圖片

　　“一位藝術(shù)家必定是一位收藏家。他懂得品味藏品，而不是單純的‘貯藏’。他們懂得有選擇得去收藏。他們會(huì)根據(jù)自己內(nèi)心的喜好選擇收藏的東西“

　　還有一項(xiàng)前期要做的工作就是收集圖片，我每天都會(huì)收集一些圖片。收集圖片的方法可能有好幾百種，但是我還是習(xí)慣最Old-School的方法——Dropbox文件夾分類(lèi)(例如，我會(huì)分成后臺(tái)界面設(shè)計(jì)、iOS ui設(shè)計(jì)、插畫(huà)設(shè)計(jì)等等)每當(dāng)我有新的項(xiàng)目的時(shí)候，我就會(huì)看看這些圖片，用來(lái)尋找靈感。

　　3. 情緒板和準(zhǔn)備工作

　　Dribbble，Behance，Pttrns，Pinterest——我們有很多可以需找靈感的地方。而且很容易就能找到和你項(xiàng)目相關(guān)的作品。多去逛逛，你可能會(huì)從別人的經(jīng)驗(yàn)中學(xué)會(huì)解決問(wèn)題。

　　當(dāng)我開(kāi)始新項(xiàng)目的時(shí)候，我總會(huì)準(zhǔn)備4個(gè)文件夾——PSD，屏，資源，靈感。我會(huì)把和這個(gè)項(xiàng)目相關(guān)的東西全部按下面分類(lèi)丟到文件夾里面。

　　可以是Behance上整套案例的研究，也可以是整個(gè)應(yīng)用中的一張界面設(shè)計(jì)圖。

　　（圖片來(lái)自網(wǎng)絡(luò)）

　　二、開(kāi)始著手設(shè)計(jì)

　　4. 不必在乎線框圖的質(zhì)量

　　不必精雕細(xì)琢線框圖。畢竟，這玩意兒只是一個(gè)過(guò)渡，而且客戶(hù)能夠預(yù)先準(zhǔn)備好線框圖就更好了。真正的業(yè)界好客戶(hù)(而且肯定對(duì)品質(zhì)也有追求的)肯定預(yù)先會(huì)以草圖或者線框圖的形式來(lái)表述需求。

　　線框圖的作用是就是讓彼此更好的理解目的，而不是最終結(jié)果。線框圖能夠幫助架構(gòu)層級(jí)，讓你了解大概需要多少屏界面，讓你了解客戶(hù)的想法

　　設(shè)計(jì)師必須懂得去“敏捷”設(shè)計(jì)，如果真的太在意線框圖的細(xì)節(jié)，那么整個(gè)設(shè)計(jì)流程會(huì)拉長(zhǎng)，設(shè)計(jì)師應(yīng)該學(xué)會(huì)去取舍。

　　5. PSD – 大尺寸畫(huà)布

　　我記得7個(gè)月前開(kāi)始Badoo項(xiàng)目的時(shí)候，我最開(kāi)始觀摩了一下同事的工作方法，我覺(jué)得他不是很得要領(lǐng)。最好用PS做一個(gè)大尺寸畫(huà)布，用來(lái)承載流程中的一些細(xì)節(jié)。我一般會(huì)創(chuàng)建8000*5000的畫(huà)布，不是用來(lái)畫(huà)出整個(gè)應(yīng)用的UI套件，而是用來(lái)記錄元素在不同階段的不同狀態(tài)——也就是流程。設(shè)計(jì)復(fù)用很方便，開(kāi)發(fā)看到這種東西也會(huì)工作的更快。

　　6. 所有屏都放入一個(gè)PSD中

　　如果是移動(dòng)應(yīng)用，我喜歡把所有屏的界面設(shè)計(jì)全部裝入到一個(gè)PSD中。

　　在設(shè)計(jì)移動(dòng)應(yīng)用時(shí)，我喜歡把整個(gè)流程中所有屏的界面設(shè)計(jì)全部裝入到一個(gè)PSD中，整體的對(duì)比效果會(huì)更好，也更容易讓他人理解你的設(shè)計(jì)理念。

　　元素的復(fù)用也非常方便，只需要復(fù)制一下其他屏的圖層/圖層組，修改一下背景或者幾個(gè)圖標(biāo)就成了。

　　（圖片來(lái)自網(wǎng)絡(luò)）

　　7. 整理、規(guī)范圖層和圖層組

　　小編個(gè)人認(rèn)為的規(guī)則是，如果超過(guò)8個(gè)圖層，那么就創(chuàng)建一個(gè)圖層組。

　　這里推薦一下《PS禮儀手冊(cè)》，有興趣的可以去看看。

　　8. 和朋友溝通

　　我非常重視那些能夠給出專(zhuān)業(yè)性反饋意見(jiàn)的人。留意他們的反應(yīng)和初次看到你設(shè)計(jì)時(shí)的想法，這未嘗不是一種用戶(hù)測(cè)試。而且多聆聽(tīng)別人的意見(jiàn)，能夠讓你從不同的角度看待問(wèn)題。在整個(gè)設(shè)計(jì)流程中，我盡可能的多和別人溝通，避免出現(xiàn)主觀差錯(cuò)。每個(gè)人都可以給出一些不錯(cuò)的意見(jiàn)。還記得那句話(huà)嗎?“只要你進(jìn)了這個(gè)屋子，你就是用戶(hù)體驗(yàn)設(shè)計(jì)師。”

　　9.圖示

　　當(dāng)所有屏的設(shè)計(jì)都裝入到一個(gè)PSD中后。應(yīng)該做一點(diǎn)圖示，用來(lái)暗示交互流程，我覺(jué)得這算是一種早期原型設(shè)計(jì)吧，與此同時(shí)，還能充分感受到視覺(jué)設(shè)計(jì)的細(xì)節(jié)。集中到一個(gè)PSD中的好處是，如果你畫(huà)多個(gè)交互流程，畫(huà)多個(gè)以上的時(shí)候，指示線的視覺(jué)風(fēng)格可能會(huì)混亂，而一個(gè)PSD能夠讓你整體視覺(jué)高度一致。

　　ui設(shè)計(jì)產(chǎn)品的流程有什么呢?相信大家看完之后，都有了全面的認(rèn)識(shí)了吧，總之，希望上面的內(nèi)容可以很好的幫助到大家。