UI產(chǎn)品設(shè)計(jì)14點(diǎn)心得

1 評(píng)論 12396 瀏覽 65 收藏 11 分鐘

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

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

一、前期工作

1.畫(huà)!

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

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

2.收集圖片

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

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

我們有很多可以豁找靈感的地方。而且很容易就能找到和你項(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)的東西全部按下面分類丟到文件夾里面。

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

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

我不喜歡精雕細(xì)琢線框圖。畢竟.這玩意兒只是一個(gè)過(guò)渡.而且客戶能夠預(yù)先準(zhǔn)備好線框圖就更好了。直正的業(yè)界好客戶(而且肯定對(duì)品質(zhì)也有追求的)肯定預(yù)先會(huì)以草圖或者線框圖的形式來(lái)表述姍求。線框圖的作用是就是讓彼此更好的理解目的,而不是最終結(jié)果。線框圖能夠幫助架構(gòu)層級(jí),讓你了解大概需要多少屏界面,讓你了解客戶的想法。設(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)始Bado。項(xiàng)目的時(shí)候,我最開(kāi)始觀摩了一下同事的工作方法,我覺(jué)得他不是很得要領(lǐng)。最好用PS做一個(gè)大尺寸畫(huà)布,用來(lái)承載流程中的一些細(xì)節(jié)。我一般的畫(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)就成了。

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

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

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

8.和朋友溝通

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

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

三、后期工作–視覺(jué)規(guī)范

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

10.配色表

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

11.字體表

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

12.UI套件

UI套件非常重要,尤其對(duì)于工作對(duì)接來(lái)說(shuō),能夠保持視覺(jué)高度的一致性。前端也非常需要這東西。做好了之后會(huì)丟給前端,他要問(wèn)你,你就說(shuō)這東西在UI套件里,他立馬就能明白了。

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

四,提高效率的一些建議

13.待辦事項(xiàng)

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

14.目標(biāo)

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

五,其他

  • 個(gè)人不用鼠標(biāo),用的是繪圖板;
  • PS沒(méi)有打開(kāi)工具面板,因?yàn)樗泄ぞ叩目旖萱I我都記住了;
  • PS作品iPhone預(yù)覽用Skala Preview;
  • 個(gè)人想學(xué)AE和Sketch;
  • 原型設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì)用InVision;
  • iOS設(shè)計(jì)我用Marve;
  • 有時(shí)會(huì)用POP進(jìn)行一些早期原型設(shè)計(jì)。

個(gè)人不用鼠標(biāo),用的是繪圖板,PS沒(méi)有打開(kāi)工具面板,因?yàn)樗泄ぞ叩目旖萱I我都記住了。然后PS作品iPhone預(yù)覽我用的是Skala Preview。個(gè)人想學(xué)Sketch和AE。原型設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì)我用In Vision應(yīng)用.iOS設(shè)計(jì)我用Marvel應(yīng)用。有時(shí)候還會(huì)用POP進(jìn)行一些早期原型設(shè)計(jì)。

結(jié)語(yǔ)

這就是我的工作流程,希望你能從中得到幫助。

 

原文地址:https://medium.com/@JanLosert/14-different-ways-of-product-design-3f349a19e613

翻譯者:MartinRGB

MartinRGB的地址:http://i.ui.cn/ucenter/88338.html

版權(quán):人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范,任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來(lái)源,若標(biāo)注有誤,請(qǐng)聯(lián)系主編QQ:419297645

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 逐步完成要比統(tǒng)一進(jìn)行節(jié)奏感更強(qiáng)

    回復(fù)