国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

每個(gè)APP原型都是由一個(gè)個(gè)頁(yè)面組成，那么每個(gè)頁(yè)面的線框圖該如何通過(guò)Axure的畫出來(lái)呢？我希望通過(guò)這篇文章，讓剛?cè)腴T的PM可以不走彎路，規(guī)范高效的畫出每個(gè)頁(yè)面的線框圖。

畫出主要狀態(tài)的線框圖

一個(gè)頁(yè)面，可能包含多個(gè)狀態(tài)的顯示效果。比如微信APP首頁(yè)除了常見(jiàn)的下圖顯示效果，還有點(diǎn)擊右上角+的顯示效果，還有刪除所有聊天的顯示效果……

但是，最核心的狀態(tài)應(yīng)該是用戶進(jìn)入該頁(yè)面之后，正常清晰應(yīng)該看到的所有內(nèi)容。PM應(yīng)該以此來(lái)畫出該頁(yè)面的主要狀態(tài)線框圖。

補(bǔ)充次要狀態(tài)的線框圖

然后我們畫出次要狀態(tài)的線框圖。我們可以放置到主要狀態(tài)的線框圖旁邊。

有時(shí)候也可以次要狀態(tài)的線框圖，放到主要狀態(tài)線框圖上面。更加容易理解原型。

優(yōu)化線框圖的細(xì)節(jié)

畫完該頁(yè)面所有的線框圖之后，我們可以調(diào)整一下細(xì)節(jié)。這樣子會(huì)讓我們的原型看起來(lái)比較專業(yè)。PM可以不追求原型的視覺(jué)美，但是得要求原型的邏輯美。

• 元件的大小比較恰當(dāng)，看起來(lái)是否協(xié)調(diào)。
• 元件的位置，是否恰當(dāng)，是不是對(duì)齊。
• 同樣功能的元件，大小是不是一致。
• 元件的配色，是不是只有黑白灰，建議少用彩色。

添加交互

如果你們公司要求只需出靜態(tài)圖或者線框圖，那么畫完上面2步，就足夠了。

如果你們公司除了線框圖之外，還要求PM畫出交互，以此來(lái)更加逼真的表現(xiàn)APP原型。那么我建議你在主要線框圖上面把主要的交互畫出來(lái)。

繼續(xù)拿上面的例子來(lái)講，如果我需要畫出點(diǎn)擊右上角+的交互。

那么我需要把浮出層，生成為動(dòng)態(tài)面板。

然后給+去添加顯示和隱藏動(dòng)態(tài)面板的交互。

按照類似的步驟，畫出左滑聊天，顯示“標(biāo)記未讀”“刪除”，點(diǎn)擊“刪除”按鈕，出現(xiàn)操作列表的交互。

寫上邏輯

最后，我們需要補(bǔ)充主要狀態(tài)線框圖，次要狀態(tài)線框圖中的全部邏輯。邏輯貌似所有PM都會(huì)寫，但是很多PM寫得很一般。原因就是缺乏寫作邏輯的規(guī)范。

• 需要一一考慮每個(gè)元件是否有邏輯
• 不要遺漏元件的視覺(jué)、交互、技術(shù)、業(yè)務(wù)邏輯
• 邏輯相似尤其是相似的元件，建議把邏輯寫到全局規(guī)范里面
• 邏輯圖流程圖也是邏輯的表現(xiàn)方式

至于具體寫邏輯的方法，請(qǐng)移步我的其他文字產(chǎn)品邏輯的5種呈現(xiàn)方法和Notes-Axure最正統(tǒng)的產(chǎn)品邏輯表達(dá)法。

預(yù)覽效果

如果我們做完了所有線框圖，以及主要交互。我們生成原型或者預(yù)覽原型的時(shí)候，可以看到如下效果。點(diǎn)擊查看Axure生成的原型效果，基本上和微信APP很相似。

總結(jié)

當(dāng)你學(xué)會(huì)了畫頁(yè)面的線框圖，整個(gè)APP的原型也就可以大概的畫出來(lái)。然后輔以如何正確的畫出功能流程圖和如何正確地畫出頁(yè)面流程圖。就可以交付給程序員進(jìn)行正式開(kāi)發(fā)。

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于 CC0 協(xié)議