2024-6-21 濤濤
本文的前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ì)方可能只有大概的需求，功能、流程無(wú)法很快落實(shí)到紙上，因此這樣的討論和溝通需要重復(fù)多次。
【Step 2 流程圖】
所需工具：Mindnode、百度腦圖
Mindnode 下載地址：點(diǎn)擊進(jìn)入下載頁(yè)面
結(jié)合產(chǎn)品需求和框架草圖，可以用 Mindnode 畫出流程圖，把文字需求更清晰、有條理地展示出來(lái)。如下：
或者也可以使用百度腦圖進(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)入下載頁(yè)面
原型框架素材包：點(diǎn)擊進(jìn)入下載頁(yè)面
內(nèi)含網(wǎng)頁(yè)流程圖模板、移動(dòng)線框包、迷你暗色流程線框圖、iPhone框架模板、Apple Watch交互流程包。
在原型框架素材的基礎(chǔ)上，用 Sketch 畫出符合產(chǎn)品需求的框架圖。如下：
POP —— Prototyping on Paper，一款手機(jī) App，把紙上的東西變?yōu)樵汀Ｅ恼蘸罂稍谑謾C(jī)上編輯熱區(qū)，手機(jī)上快速模擬原型動(dòng)效。
POP 原是由一個(gè)僅有3個(gè)人的年輕臺(tái)灣團(tuán)隊(duì)做出，后被 Marvel 收購(gòu)，可與你的 Marvel 賬戶打通，Marvel 線上做的原型，這下手機(jī)瀏覽起來(lái)更方便啦！
POP 下載鏈接：點(diǎn)擊進(jìn)入App Store
【Step 4 確定設(shè)計(jì)稿 & 原型交互】
所需工具：Sketch（設(shè)計(jì)稿）、Axure（原型交互）、Marvel（原型展示）、Principle（交互動(dòng)效）
Axure 是產(chǎn)品經(jīng)理必備工具，主要作用就是用來(lái)做原型交互的。在沒有設(shè)計(jì)稿的情況下，可以讓客戶或團(tuán)隊(duì)的其他人了解產(chǎn)品的初步原型。也是產(chǎn)品經(jīng)理與設(shè)計(jì)師溝通的主要工具之一。
Axure PR 8 下載鏈接： 點(diǎn)擊進(jìn)入下載頁(yè)面
作為設(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)入下載頁(yè)面
而 Principle 主要用于實(shí)現(xiàn)較復(fù)雜的交互動(dòng)效，操作比 Marvel 難一些，適合有動(dòng)畫基礎(chǔ)的人。
Principle 下載地址： 點(diǎn)擊進(jìn)入官網(wǎng)
它有本地軟件可提供下載，很多復(fù)雜炫酷的原型交互效果都是用 Principle 做出來(lái)的。如下：
【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)入下載頁(yè)面
Zeplin 幫我們解決了大部分開發(fā)前的準(zhǔn)備工作，但有 Icons 的設(shè)計(jì)稿我們還需要用到 Iconfont 或 Icomoon。
要找 Icons 素材，可以上 Iconfont，由阿里媽媽 MUX 打造，它有許多成套的彩色免費(fèi) Icon Set。也可以用作 Icons 轉(zhuǎn) Font 供程序員使用。
阿里媽媽圖標(biāo)庫(kù)網(wǎng)址： 點(diǎn)擊進(jìn)入官網(wǎng)
Icomoon 和阿里媽媽是一樣的，但更棒的是它的編輯功能，設(shè)計(jì)師們?cè)僖膊恍枰ゼm結(jié)怎么把 Icon 調(diào)到畫布居中的問題了，它可以挪動(dòng)、旋轉(zhuǎn)、放大縮小，居中、去色一個(gè) Icon 等（雖然界面看起來(lái)有點(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 萬(wàn)注冊(cè)用戶，國(guó)際紅十字會(huì)、谷歌、美國(guó)迪爾公司都在使用。
看板樣式擅長(zhǎng)處理流程化任務(wù)，適用于產(chǎn)品研發(fā)設(shè)計(jì)等。如下：
由于是英語(yǔ)界面，若是團(tuán)隊(duì)中有人對(duì)此不適應(yīng)則可能無(wú)法很好得協(xié)作。這種情況可以使用中國(guó)版本的類似產(chǎn)品，如 Tower 或 Teambition 。
Bearychat 是中國(guó)版的 Slack，聊天群組 + 工具集成，取代 QQ 或微信作為團(tuán)隊(duì)工作中的及時(shí)聊天溝通工具。有在線版和本地版。下載與具體功能可上官網(wǎng)查看： 點(diǎn)擊進(jìn)入官網(wǎng) 。
藍(lán)藍(lán)設(shè)計(jì)(www.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lzhte.cn