一個(gè)產(chǎn)品從0到1,UI設(shè)計(jì)師參與的所有步驟與所需工具(附下載資源)

2024-6-21    資深UI設(shè)計(jì)者

 
 

本文的前4步適用于公司沒有產(chǎn)品經(jīng)理的情況下。

 

【Step 1 討論 & 草圖框架】

 

所需工具:紙、筆

 

與客戶或產(chǎn)品負(fù)責(zé)人討論,了解產(chǎn)品的需求。討論前帶好紙筆,討論時(shí)可以畫出大概的框架草圖。

 

若是外包項(xiàng)目的話,會(huì)更會(huì)費(fèi)周折一點(diǎn),因?yàn)閷?duì)方可能只有大概的需求,功能、流程無法很快落實(shí)到紙上,因此這樣的討論和溝通需要重復(fù)多次。

 

 

【Step 2 流程圖】

 

所需工具:Mindnode、百度腦圖

 

Mindnode 下載地址:點(diǎn)擊進(jìn)入下載頁面

 

 

結(jié)合產(chǎn)品需求和框架草圖,可以用 Mindnode 畫出流程圖,把文字需求更清晰、有條理地展示出來。如下:

 

 

或者也可以使用百度腦圖進(jìn)行繪制: 點(diǎn)擊進(jìn)入百度腦圖

 

Mindnode 是本地使用的,百度腦圖是線上使用的,不過樣式多一些,更適合線上協(xié)作。兩者都可以導(dǎo)出 PDF 文件。

 

 

【Step 3 框架圖 & 初步原型】

 

所需工具:Sketch(框架圖)、POP(初步原型)

 

Sketch 這里就不過多介紹了,大家應(yīng)該都知道了 : P 這里是 Sketch 軟件(版本 47.1)下載資源:點(diǎn)擊進(jìn)入下載頁面

 

原型框架素材包:點(diǎn)擊進(jìn)入下載頁面

 

內(nèi)含網(wǎng)頁流程圖模板、移動(dòng)線框包、迷你暗色流程線框圖、iPhone框架模板、Apple Watch交互流程包。

 

在原型框架素材的基礎(chǔ)上,用 Sketch 畫出符合產(chǎn)品需求的框架圖。如下:

 

 

POP —— Prototyping on Paper,一款手機(jī) App,把紙上的東西變?yōu)樵?。拍照后可在手機(jī)上編輯熱區(qū),手機(jī)上快速模擬原型動(dòng)效。

 

POP 原是由一個(gè)僅有3個(gè)人的年輕臺(tái)灣團(tuán)隊(duì)做出,后被 Marvel 收購,可與你的 Marvel 賬戶打通,Marvel 線上做的原型,這下手機(jī)瀏覽起來更方便啦!

 

POP 下載鏈接:點(diǎn)擊進(jìn)入App Store

 

 

 

【Step 4 確定設(shè)計(jì)稿 & 原型交互】

 

所需工具:Sketch(設(shè)計(jì)稿)、Axure(原型交互)、Marvel(原型展示)、Principle(交互動(dòng)效)

 

Axure 是產(chǎn)品經(jīng)理必備工具,主要作用就是用來做原型交互的。在沒有設(shè)計(jì)稿的情況下,可以讓客戶或團(tuán)隊(duì)的其他人了解產(chǎn)品的初步原型。也是產(chǎn)品經(jīng)理與設(shè)計(jì)師溝通的主要工具之一。

 

Axure PR 8 下載鏈接: 點(diǎn)擊進(jìn)入下載頁面

 

作為設(shè)計(jì)師,我們或許不必用 Axure 了,可以用 Skecth 設(shè)計(jì)完后,直接上 Marvel,實(shí)現(xiàn)高保真交互展示。且 Marvel 有 Sketch 插件,可以一鍵導(dǎo)入。

 

前面講 POP 時(shí)提到的,如果你設(shè)計(jì)的是手機(jī) App,用 Marvel 后,就可以直接在手機(jī)上給別人演示啦。

 

Marvel 插件下載地址:點(diǎn)擊進(jìn)入下載頁面

 

 

 

而 Principle 主要用于實(shí)現(xiàn)較復(fù)雜的交互動(dòng)效,操作比 Marvel 難一些,適合有動(dòng)畫基礎(chǔ)的人。

Principle 下載地址: 點(diǎn)擊進(jìn)入官網(wǎng)

 

它有本地軟件可提供下載,很多復(fù)雜炫酷的原型交互效果都是用 Principle 做出來的。如下:

 

 

 

 

【Step 5 完成設(shè)計(jì) & 待開發(fā)】

 

所需工具:Zeplin(切圖、設(shè)計(jì)稿標(biāo)注)、阿里媽媽(圖標(biāo))、Icomoon(圖標(biāo))

 

Zeplin 是配合著 Sketch 非常好用的一款插件,設(shè)計(jì)稿完成后,可以直接從 Sketch 導(dǎo)入到 Zeplin 中。Zeplin 可以幫你自動(dòng)生成尺碼標(biāo)注、CSS 樣式代碼、需導(dǎo)出的圖片(在 Sketch 中設(shè)好切片的設(shè)計(jì)稿,在 Zeplin 中可以直接導(dǎo)出),以及共享成員間可以備注和評(píng)論。

 

Zeplin 下載地址: 點(diǎn)擊進(jìn)入下載頁面

 

 

Zeplin 幫我們解決了大部分開發(fā)前的準(zhǔn)備工作,但有 Icons 的設(shè)計(jì)稿我們還需要用到 Iconfont 或 Icomoon。

 

要找 Icons 素材,可以上 Iconfont,由阿里媽媽 MUX 打造,它有許多成套的彩色免費(fèi) Icon Set。也可以用作 Icons 轉(zhuǎn) Font 供程序員使用。

 

阿里媽媽圖標(biāo)庫網(wǎng)址: 點(diǎn)擊進(jìn)入官網(wǎng)

 

Icomoon 和阿里媽媽是一樣的,但更棒的是它的編輯功能,設(shè)計(jì)師們?cè)僖膊恍枰ゼm結(jié)怎么把 Icon 調(diào)到畫布居中的問題了,它可以挪動(dòng)、旋轉(zhuǎn)、放大縮小,居中、去色一個(gè) Icon 等(雖然界面看起來有點(diǎn)挫)。

 

Icomoon 網(wǎng)址: 點(diǎn)擊進(jìn)入官網(wǎng)

 

 

 

【Tips 進(jìn)度管理】

 

所需工具:Trello(任務(wù)管理)、Bearychat(團(tuán)隊(duì)溝通)

 

在此過程中,我們或許會(huì)需要用到任務(wù)管理軟件,例如 Trello: 點(diǎn)擊進(jìn)入官網(wǎng)

 

Trello 是國(guó)外非?;鸬娜蝿?wù)管理軟件,據(jù)說擁有 1900 萬注冊(cè)用戶,國(guó)際紅十字會(huì)、谷歌、美國(guó)迪爾公司都在使用。

 

看板樣式擅長(zhǎng)處理流程化任務(wù),適用于產(chǎn)品研發(fā)設(shè)計(jì)等。如下:

 

由于是英語界面,若是團(tuán)隊(duì)中有人對(duì)此不適應(yīng)則可能無法很好得協(xié)作。這種情況可以使用中國(guó)版本的類似產(chǎn)品,如 Tower Teambition 。

 

Bearychat 是中國(guó)版的 Slack,聊天群組 + 工具集成,取代 QQ 或微信作為團(tuán)隊(duì)工作中的及時(shí)聊天溝通工具。有在線版和本地版。下載與具體功能可上官網(wǎng)查看: 點(diǎn)擊進(jìn)入官網(wǎng) 。

 

 

作者:銀子TIMEZEN
鏈接:https://www.zcool.com.cn/article/ZNTk1NTYw.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

 

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔