網(wǎng)站建設中UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)發(fā)布者：本站     時(shí)間：2022-03-28 09:03:26

自從我在Dribbble上貼了一幅我的產(chǎn)品設計成果，受到了大家伙熱烈的反饋，對此我深受鼓勵，我決定寫(xiě)下這篇文章，用來(lái)記錄我這兩年里作為產(chǎn)品設計師，所學(xué)到的東西。
 

說(shuō)起來(lái)有點(diǎn)慚愧，這幾年我一直都在使用同一套產(chǎn)品設計的流程，但是我覺(jué)得這套流程最適合我，對我來(lái)說(shuō)是最理想的，所以就很少去更換。我的這套工作流程我覺(jué)得有4個(gè)地方可以和大家分享一下——前期工作、具體設計、后期工作以及一些提高效率的小細節

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)
 

一、前期工作
1.畫(huà)！

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

 

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)

 

草圖記錄理念


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



2. 收集圖片

 

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)

 

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


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


3. 情緒板和準備工作


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

 

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

 

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)
 
 

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

二、開(kāi)始著(zhù)手設計
3. 不必在乎線(xiàn)框圖的質(zhì)量

 

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

 

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

 

設計師必須懂得去“敏捷”設計，如果真的太在意線(xiàn)框圖的細節，那么整個(gè)設計流程會(huì )拉長(cháng)，設計師應該學(xué)會(huì )去取舍。


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

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


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

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

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

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)
 


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



7. 整理、規范圖層和圖層組


我是一個(gè)崇尚整齊的人，因此我的PSD結構非常的有序。我個(gè)人的規則是，如果超過(guò)8個(gè)圖層，那么就創(chuàng )建一個(gè)圖層組。、

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

 

8. 和朋友溝通

 

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

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

 

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)

 

3 種不同的指示線(xiàn)——第一種指示線(xiàn)用來(lái)指示界面流程（并帶有序號），第二種用來(lái)指示屏幕內的鏈接或元素，第三種用來(lái)指示外部鏈接或應用

 

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)

 

指示線(xiàn)搭配內容的效果
 

 

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)

 

整體預覽


很多人喜歡把連線(xiàn)搞得滿(mǎn)屏都是，但是我采用了一種更靈活的方法，我的線(xiàn)可以畫(huà)得很短，只需要連接到一個(gè)圓圈數字，就可以代表連接到第幾屏。減少連線(xiàn)的繁雜感。

 

為了讓你們更好理解我上述的心得，這里我給出一份PSD，各位請參考：

 

https://www.dropbox.com/s/lnxg174ib9iqpa8/Diagram-Template.zip
 

三、后期工作——視覺(jué)規范

完成了設計工作后，要做的事情就是出一份視覺(jué)規范，然后檢查一下整體的視覺(jué)層級。我個(gè)人認為，無(wú)論是小型項目還是大型項目，視覺(jué)規范都有其存在的必要性。無(wú)論是對你自己，還是對于同事，都能起到很好的規范作用，避免不一致的設計。

 
10. 配色表

扁平化的要領(lǐng)之一是配色精簡(jiǎn)。也方便了我們展現配色表。

 

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)

 

11. 字體表

要完善的記錄Logo使用的字體，文本使用的字體，標題使用的字體等等，這對于開(kāi)發(fā)會(huì )大有裨益。個(gè)人復查作品時(shí)也會(huì )很有幫助。

 

UI產(chǎn)品設計流程中的14個(gè)要點(diǎn)
12. UI 套件
UI套件非常重要，尤其對于工作對接來(lái)說(shuō)，能夠保持視覺(jué)高度的一致性。前端也非常需要這東西。做好了之后丟給前端，他要問(wèn)你，你就說(shuō)這東西在UI套件中，他立馬就能明白了。

這一條非常重要，關(guān)系到整體的視覺(jué)一致性。


四、提高效率的一些建議

13. 待辦事項

前面已經(jīng)提過(guò)，我是一個(gè)崇尚有序的人。因此我高度依賴(lài)待辦事項清單。我推薦Cultured Code的Things，或者直接用一張紙來(lái)做真正的待辦事項清單也可以。這樣當你完成整體清單時(shí)，感受會(huì )非常的棒。以前可能我會(huì )5項工作同時(shí)展開(kāi)，但是最近我發(fā)現，如果僅僅做1-2項工作，我會(huì )更集中，效果也自然會(huì )更好。

14. 目標

必須要清除的了解，你想要達成什么目標，但是也不要過(guò)于受目標限制。我一般會(huì )指定14天的目標（類(lèi)似沖刺計劃)和嫉妒目標。我會(huì )設定一些對我來(lái)說(shuō)是新里程碑的目標（比如用AE完成我個(gè)人的第一個(gè)動(dòng)效設計）以及日常目標（完成2個(gè)Behance案例研究）

其他

個(gè)人不用鼠標，用的是繪圖板，PS沒(méi)有打開(kāi)工具面板，因為所有工具的快捷鍵我都記住了。然后PS作品iPhone預覽我用的是Skala Preview。個(gè)人想學(xué)習Sketch和AE。原型設計，網(wǎng)頁(yè)設計我用InVision應用，iOS設計我用Marvel應用。有時(shí)候還會(huì )用POP進(jìn)行一些早期原型設計。