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