2024-6-21 資深UI設(shè)計者
本文的前4步適用于公司沒有產(chǎn)品經(jīng)理的情況下。
【Step 1 討論 & 草圖框架】
所需工具：紙、筆
與客戶或產(chǎn)品負(fù)責(zé)人討論，了解產(chǎn)品的需求。討論前帶好紙筆，討論時可以畫出大概的框架草圖。
若是外包項目的話，會更會費(fèi)周折一點(diǎn)，因為對方可能只有大概的需求，功能、流程無法很快落實(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)頁流程圖模板、移動線框包、迷你暗色流程線框圖、iPhone框架模板、Apple Watch交互流程包。
在原型框架素材的基礎(chǔ)上，用 Sketch 畫出符合產(chǎn)品需求的框架圖。如下：
POP —— Prototyping on Paper，一款手機(jī) App，把紙上的東西變?yōu)樵?。拍照后可在手機(jī)上編輯熱區(qū)，手機(jī)上快速模擬原型動效。
POP 原是由一個僅有3個人的年輕臺灣團(tuán)隊做出，后被 Marvel 收購，可與你的 Marvel 賬戶打通，Marvel 線上做的原型，這下手機(jī)瀏覽起來更方便啦！
POP 下載鏈接：點(diǎn)擊進(jìn)入App Store
【Step 4 確定設(shè)計稿 & 原型交互】
所需工具：Sketch（設(shè)計稿）、Axure（原型交互）、Marvel（原型展示）、Principle（交互動效）
Axure 是產(chǎn)品經(jīng)理必備工具，主要作用就是用來做原型交互的。在沒有設(shè)計稿的情況下，可以讓客戶或團(tuán)隊的其他人了解產(chǎn)品的初步原型。也是產(chǎn)品經(jīng)理與設(shè)計師溝通的主要工具之一。
Axure PR 8 下載鏈接： 點(diǎn)擊進(jìn)入下載頁面
作為設(shè)計師，我們或許不必用 Axure 了，可以用 Skecth 設(shè)計完后，直接上 Marvel，實(shí)現(xiàn)高保真交互展示。且 Marvel 有 Sketch 插件，可以一鍵導(dǎo)入。
前面講 POP 時提到的，如果你設(shè)計的是手機(jī) App，用 Marvel 后，就可以直接在手機(jī)上給別人演示啦。
Marvel 插件下載地址：點(diǎn)擊進(jìn)入下載頁面
而 Principle 主要用于實(shí)現(xiàn)較復(fù)雜的交互動效，操作比 Marvel 難一些，適合有動畫基礎(chǔ)的人。
Principle 下載地址： 點(diǎn)擊進(jìn)入官網(wǎng)
它有本地軟件可提供下載，很多復(fù)雜炫酷的原型交互效果都是用 Principle 做出來的。如下：
【Step 5 完成設(shè)計 & 待開發(fā)】
所需工具：Zeplin（切圖、設(shè)計稿標(biāo)注）、阿里媽媽（圖標(biāo)）、Icomoon（圖標(biāo)）
Zeplin 是配合著 Sketch 非常好用的一款插件，設(shè)計稿完成后，可以直接從 Sketch 導(dǎo)入到 Zeplin 中。Zeplin 可以幫你自動生成尺碼標(biāo)注、CSS 樣式代碼、需導(dǎo)出的圖片（在 Sketch 中設(shè)好切片的設(shè)計稿，在 Zeplin 中可以直接導(dǎo)出），以及共享成員間可以備注和評論。
Zeplin 下載地址： 點(diǎn)擊進(jìn)入下載頁面
Zeplin 幫我們解決了大部分開發(fā)前的準(zhǔn)備工作，但有 Icons 的設(shè)計稿我們還需要用到 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è)計師們再也不需要去糾結(jié)怎么把 Icon 調(diào)到畫布居中的問題了，它可以挪動、旋轉(zhuǎn)、放大縮小，居中、去色一個 Icon 等（雖然界面看起來有點(diǎn)挫）。
Icomoon 網(wǎng)址： 點(diǎn)擊進(jìn)入官網(wǎng)
【Tips 進(jìn)度管理】
所需工具：Trello（任務(wù)管理）、Bearychat（團(tuán)隊溝通）
在此過程中，我們或許會需要用到任務(wù)管理軟件，例如 Trello： 點(diǎn)擊進(jìn)入官網(wǎng)
Trello 是國外非?；鸬娜蝿?wù)管理軟件，據(jù)說擁有 1900 萬注冊用戶，國際紅十字會、谷歌、美國迪爾公司都在使用。
看板樣式擅長處理流程化任務(wù)，適用于產(chǎn)品研發(fā)設(shè)計等。如下：
由于是英語界面，若是團(tuán)隊中有人對此不適應(yīng)則可能無法很好得協(xié)作。這種情況可以使用中國版本的類似產(chǎn)品，如 Tower 或 Teambition 。
Bearychat 是中國版的 Slack，聊天群組 + 工具集成，取代 QQ 或微信作為團(tuán)隊工作中的及時聊天溝通工具。有在線版和本地版。下載與具體功能可上官網(wǎng)查看： 點(diǎn)擊進(jìn)入官網(wǎng) 。
藍(lán)藍(lán)設(shè)計(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司
銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍(lán)藍(lán)設(shè)計的小編 http://www.cqzjtgb.com