之前做 Web 項(xiàng)目，拿到手就開(kāi)始編碼登淘，編到一半又會(huì)變得很迷糊箫老，這是由于準(zhǔn)備工作不充分給后續(xù)工作帶來(lái)的坑。我了解的項(xiàng)目生命周期是這樣的：（也可能不準(zhǔn)確啦...）
- 需求分析黔州。拿到客戶提的需求進(jìn)行分析耍鬓；（產(chǎn)品經(jīng)理）
- 原型圖出稿。UI 設(shè)計(jì)師畫(huà)原型圖跟客戶確定是否頁(yè)面大致做成這樣流妻；（產(chǎn)品經(jīng)理）
- 設(shè)計(jì)表結(jié)構(gòu)牲蜀。原型圖確認(rèn)之后，分析業(yè)務(wù)绅这，這一過(guò)程要考慮表之間關(guān)聯(lián)關(guān)系涣达；（開(kāi)發(fā)人員）
- 開(kāi)發(fā)代碼。原型圖幫助開(kāi)發(fā)人員理清做出來(lái)的東西像什么樣子证薇，表結(jié)構(gòu)幫助開(kāi)發(fā)人員確認(rèn)功能如何開(kāi)發(fā)度苔；（開(kāi)發(fā)人員）
- 測(cè)試代碼。寫(xiě)測(cè)試案例浑度，覆蓋盡可能多的應(yīng)用場(chǎng)景寇窑，讓代碼變得健壯；（開(kāi)發(fā)人員 + 測(cè)試人員）
- 運(yùn)維箩张。服務(wù)器選擇/購(gòu)買+環(huán)境搭建+部署代碼甩骏；（運(yùn)維人員）
- 交付項(xiàng)目完残。前面每一步都按部就班，編寫(xiě)對(duì)應(yīng)的文檔横漏，這一步就會(huì)變得很簡(jiǎn)單，匯總完整的開(kāi)發(fā)流程文檔熟掂，方便后續(xù)維護(hù)人員修復(fù) bug 或者擴(kuò)展功能缎浇。（運(yùn)維人員）
就我個(gè)人來(lái)說(shuō)，前面關(guān)注點(diǎn)大多放在開(kāi)發(fā)赴肚、測(cè)試和運(yùn)維素跺。對(duì)于需求分析、原型圖出稿和表結(jié)構(gòu)設(shè)計(jì)沒(méi)怎么接觸誉券。很多項(xiàng)目組開(kāi)發(fā)都會(huì)忽略其中一至兩點(diǎn)指厌，但在我看來(lái)缺一不可。
本文調(diào)研原型圖出稿的 "硬件"踊跟，使用什么軟件制作原型圖踩验，相關(guān)的素材網(wǎng)站、學(xué)習(xí)教程等商玫。
- 原型圖設(shè)計(jì)工具
- Axure RP箕憾。老牌設(shè)計(jì)工具，貌似對(duì)中文支持不是很好拳昌，但有漢化包可以解決這一問(wèn)題袭异；
- 磨刀。國(guó)產(chǎn)工具炬藤，可在瀏覽器在線編輯御铃，也可以下載客戶端本地編輯。使用文檔比較齊全沈矿，視頻教程也很 nice上真；
- xiao piu。
原型圖設(shè)計(jì)的頁(yè)面比較單調(diào)细睡，需要加點(diǎn)圖片谷羞、圖標(biāo)等點(diǎn)綴亚茬。這就需要 photoshop拱绑。常見(jiàn)的摳圖葛超、修圖等逆粹。推薦一本 ps 入門書(shū) 《好學(xué)讥蔽、好用猫妙、好玩的 Photoshop》,不像板磚那么厚干像，有很多插圖哺徊，看著都能懂图贸。（這周剛好買了本二手書(shū)蹂季，費(fèi)用：￥18）
使用 ps 摳圖/修圖都需要圖片冕广，圖片從哪來(lái)？偿洁？網(wǎng)上有很多圖片素材網(wǎng)站撒汉，多逛逛總有適合的圖片，也能培養(yǎng)自己的審美涕滋，看的多了有比較了也就知道什么好看了睬辐。收集的素材網(wǎng)：
- 創(chuàng)客貼
- 包圖網(wǎng)
- 千圖網(wǎng)
- 昵圖網(wǎng)
- 花瓣網(wǎng)
- 除了圖片也會(huì)用到圖標(biāo)，現(xiàn)在圖標(biāo)基本都用字體庫(kù)代替而不是純圖片了宾肺。圖標(biāo)庫(kù)有：
- iconfont
- font-awsome
在做移動(dòng)端如微信小程序底部 bar 會(huì)用到圖片而不是圖標(biāo)溯饵，使用 ps 慢慢修吧。
- 有時(shí)候?qū)D片有要求锨用，要用矢量圖丰刊，相關(guān)設(shè)計(jì)軟件有 ai（Adobe Illustrator）
吐槽一下：Adobe 的正版軟件 Illustrator 和 photoshop 單獨(dú)購(gòu)買都是 3300 元。去網(wǎng)上下載試用期只有一個(gè)月增拥，找序列號(hào)真是累死人啄巧，試了好多都不管用。有人說(shuō)下載注冊(cè)機(jī)掌栅，裝個(gè)軟件麻煩的一逼棵帽。
