說明：本文同步發(fā)表于個(gè)人博客遇革。
與用戶對(duì)接軟件項(xiàng)目需求時(shí)尖啡，有一個(gè)初步的原型投影在會(huì)議室几睛，能極大地提高甲乙雙方對(duì)需求理解的一致性朴则，減少后期的變更雕擂。很多年前绽榛，公司繪制原型使用的是 Excel嗓节。后來臼节，Axure 出現(xiàn)了接剩。它可以快速繪制出網(wǎng)站及 APP 的產(chǎn)品原型切厘，成為了當(dāng)前主流的原型設(shè)計(jì)工具，是產(chǎn)品經(jīng)理的必備技能懊缺。
2019 年 Axure 的最新版本是 Axure RP 9疫稿。說實(shí)話，這個(gè)版本并沒有突破性的變化鹃两，在交互設(shè)計(jì)的便捷性上反而不如上一個(gè)版本遗座，不過用起來比上一版好看和順滑，算是嘗嘗鮮了俊扳。因此途蒋，以下提到的技巧也不局限于 Axure RP 9，其他版本基本都適用馋记。
快速設(shè)計(jì)
使用母版
母版基于「一次設(shè)計(jì)号坡，多處使用」的理念懊烤，常用于導(dǎo)航欄、頁(yè)眉宽堆、頁(yè)腳等腌紧。假如導(dǎo)航菜單需要新增一個(gè)模塊，只要把母版改了畜隶，其他引用的地方將自動(dòng)修改壁肋。
另外，導(dǎo)航籽慢、頁(yè)眉浸遗、頁(yè)腳等母版類的元件放到畫布上后，可以鎖定后再設(shè)計(jì)其他元件嗡综，減少誤觸的概率乙帮。
收集第三方素材庫(kù)
第三方元件庫(kù)有：
- 阿里的 Ant Design 元件庫(kù)，包含 Web 端和 Mobile 端极景。
- Layui 元件庫(kù)察净，包含 Web 端。
第三方圖標(biāo)庫(kù)有：
- 阿里圖標(biāo)庫(kù)盼樟，下載單個(gè) SVG 后氢卡，粘貼至 Axure 中使用，還可以直接在軟件中編輯晨缴。
- flaticon 圖標(biāo)庫(kù)译秦，下載單個(gè) SVG 后，粘貼至 Axure 中使用击碗，還可以直接在軟件中編輯筑悴。
第三方素材庫(kù)確實(shí)方便，做一個(gè)帶交互的登錄頁(yè)面只要 2 分鐘不到稍途。不過值得注意的是阁吝，素材庫(kù)不一定是越豐富越好，因?yàn)樗哪康氖翘岣咝市蹬模钦宜夭倪@個(gè)過程本身是需要花時(shí)間的突勇，靈活使用一兩個(gè)庫(kù)就足夠了。
快速排版
- 打開網(wǎng)格對(duì)齊坷虑，并設(shè)置為 5px甲馋。打開之后，畫布上就會(huì)出現(xiàn)均勻分布小點(diǎn)迄损，排版時(shí)能自動(dòng)吸附定躏，每個(gè)元件的起點(diǎn)坐標(biāo)都在 5 的倍數(shù)上，方便對(duì)齊。
- Axure RP 9 的畫布存在負(fù)空間痊远，且目前無(wú)鎖定功能绑谣，如果不適應(yīng)，用快捷鍵 Ctrl+9拗引，可將畫布的起點(diǎn)重置到 (0,0)。
- 根據(jù)實(shí)際情況幌衣，在工具欄切換框選模式矾削，選擇包含選中或者相交選中。包含選中是指鼠標(biāo)拖拽產(chǎn)生的矩形要完全選中目標(biāo)對(duì)象豁护，而相交選中不用哼凯。
- 從標(biāo)尺上可以拖拽出參考線，用于對(duì)齊楚里。使用完畢后可以刪除断部。
- 使用「對(duì)齊」按鈕快速對(duì)齊。
- 使用「分布」按鈕均勻分布班缎。
頁(yè)面精簡(jiǎn)
動(dòng)態(tài)面板
動(dòng)態(tài)面板是最常用的功能之一蝴光。剛開始使用 Axure 時(shí)，不大明白「動(dòng)態(tài)面板」的作用达址。其實(shí)蔑祟，顧名思義，動(dòng)態(tài)面板是指一個(gè)面板有多個(gè)狀態(tài)沉唠，就像女孩子有多個(gè)包包疆虚，但每次出門，她只會(huì)根據(jù)當(dāng)天的衣著搭配背一個(gè)满葛。
舉個(gè)例子径簿，京東網(wǎng)站的登錄欄，登錄前顯示「你好嘀韧，請(qǐng)登錄」篇亭，登錄后會(huì)顯示昵稱。又比如乳蛾，淘寶網(wǎng)頭部有很多廣告在滾動(dòng)暗赶，實(shí)質(zhì)上一個(gè)元件在不停地變化狀態(tài)。這種情況下肃叶，不需要放多個(gè)元件來回顯示蹂随、隱藏切換，只要做一個(gè)動(dòng)態(tài)面板的元件切換多個(gè)狀態(tài)因惭。頁(yè)面能更加簡(jiǎn)潔岳锁。
除此之外，動(dòng)態(tài)面板還能設(shè)置大小蹦魔，超出面板大小激率，可以自動(dòng)顯示滾動(dòng)條咳燕。
熟悉內(nèi)置交互效果
Axure 的基礎(chǔ)功能 PPT 都有，但 Axure 在產(chǎn)品設(shè)計(jì)領(lǐng)域做了很多特性乒躺，比如 Axure 中顯示元件可以設(shè)置燈箱效果招盲。當(dāng)給一個(gè)彈框設(shè)置燈箱效果，出現(xiàn)時(shí)頁(yè)面自動(dòng)加遮罩嘉冒，最頂層顯示彈框曹货，類似聚光燈的效果。以前為了實(shí)現(xiàn)這種效果讳推，需要自己手動(dòng)加一個(gè)遮罩層顶籽，設(shè)置可見/不可見的切換，非常麻煩银觅。熟悉內(nèi)置交互效果礼饱，事半功倍。
靈活應(yīng)用熱區(qū)
熱區(qū)可以在頁(yè)面的任一位置添加跳轉(zhuǎn)究驴、切換可見性等交互效果镊绪，常用于組合元件上，不需要每個(gè)元件設(shè)置動(dòng)作洒忧。不過镰吆，很多單個(gè)元件本身就可以設(shè)置交互，比如按鈕可以設(shè)置交互跑慕，按鈕+熱區(qū)可以設(shè)置交互万皿，此時(shí)應(yīng)該采用前者。頁(yè)面上的元素越少越好核行。
理解交互的三個(gè)層級(jí)
Axure 的交互有三個(gè)層級(jí)牢硅，事件、用例和動(dòng)作芝雪，動(dòng)作是最小的單元减余。
舉個(gè)例子，用戶點(diǎn)擊登錄按鈕是一個(gè)事件惩系，驗(yàn)證碼輸錯(cuò)了位岔，用戶名或密碼錯(cuò)誤、登錄成功是三個(gè)用例堡牡，不同用例對(duì)應(yīng)不同動(dòng)作抒抬。
減小開發(fā)者的認(rèn)知負(fù)擔(dān)
用 Axure 繪制流程圖。Axure 的流程圖繪制功能甚至比 Visio 還好用晤柄，可以快速對(duì)齊擦剑，關(guān)鍵是能在原型中直接引用/關(guān)聯(lián)頁(yè)面，使開發(fā)人員能直觀感受到頁(yè)面之間的業(yè)務(wù)邏輯關(guān)系。
部分復(fù)雜的業(yè)務(wù)邏輯輔以文字說明惠勒，而不是僅僅停留在產(chǎn)品經(jīng)理的腦海中赚抡。
直接發(fā)布到用戶的設(shè)備上
完成原型后，需要給用戶做演示纠屋，可以使用「預(yù)覽」功能涂臣，與用戶面對(duì)面溝通。還有一種方式售担，就是「發(fā)布」肉康。給用戶一個(gè)鏈接地址 ，讓他自己的電腦或者手機(jī)訪問灼舍。當(dāng)用戶發(fā)現(xiàn)能直接在自己的設(shè)備上看到原型的逼真效果，一方面會(huì)看得更加仔細(xì)涨薪，一方面會(huì)覺得產(chǎn)品做得很專業(yè)骑素。
發(fā)布有兩種方式：Axure Cloud 發(fā)布和導(dǎo)出壓縮包在私有云發(fā)布。
- Axure Cloud 在之前的版本叫 Axure Share刚夺，最新版里只是改了一個(gè)名字献丑。免費(fèi)注冊(cè)后，將發(fā)布到 Axure Share侠姑，允許設(shè)置密碼訪問创橄。發(fā)布成功后，軟件會(huì)返回一個(gè)訪問鏈接莽红。
- 如果出于商業(yè)和速度的考量妥畏，不愿意將原型放在 Axure Cloud 的網(wǎng)站上 ，可以導(dǎo)出壓縮包在私有云發(fā)布安吁。
個(gè)人體會(huì)
- 在理清業(yè)務(wù)邏輯與操作邏輯時(shí)醉蚁，紙筆比數(shù)碼工具更好用。
- 使用 Axure 原型繪制初步方案時(shí)鬼店，不需要太精致网棍，把需要表達(dá)的方案展示清楚即可，輔助以文字說明妇智。初步方案往往是要大改的滥玷。
- 重視業(yè)務(wù)邏輯，不盲目追求交互特性巍棱，防止本末倒置惑畴。
- 推薦一本書：《Axure RP原型設(shè)計(jì)基礎(chǔ)與案例實(shí)戰(zhàn)》，書中的 50 多個(gè)案例 源文件 是很好的實(shí)戰(zhàn)學(xué)習(xí)資料航徙。
