網(wǎng)絡(luò)上很多Axure或原型相關(guān)的文章，更多是原型設(shè)計(jì)技巧、軟件操作、案例之類的內(nèi)容；而對(duì)于原型本身及認(rèn)知層面的內(nèi)容，極少進(jìn)行探討。這篇文章，從原型的技巧出發(fā)，從認(rèn)知層面，解釋如何讓你的線框圖更好看。

線框圖原型需不需要好看？我覺得在保證效率的前提下，需要好看。

先給好看定義標(biāo)準(zhǔn)：

1. 簡(jiǎn)潔清晰，能一眼了解頁(yè)面布局和元素；
2. 規(guī)整統(tǒng)一，能高效分辨不同類型模塊；
3. 準(zhǔn)確到位，原型表達(dá)準(zhǔn)確，不僅僅是布局與元素，還有線框圖中選用的示例；
4. 重點(diǎn)突出，在不影響后續(xù)設(shè)計(jì)師設(shè)計(jì)的前提下，突出頁(yè)面重點(diǎn)。

所以，好看并不只是外觀審美，而是看起來方便，很容易看懂。

針對(duì)以上四點(diǎn)，我總結(jié)了4個(gè)應(yīng)對(duì)小技巧。下面以模仿淘票票APP首頁(yè)為例，詳細(xì)介紹這4招。

一. 少用線條，使用顏色和陰影區(qū)分模塊

使用顏色區(qū)分模塊在視覺上比線條區(qū)分更直觀，也更容易觀察出頁(yè)面布局。我的建議是只使用黑白灰，如果產(chǎn)品定了主色，可以增加一個(gè)主色使用在重要元素、選中狀態(tài)元素上

可以根據(jù)制作原型母版和元件庫(kù)的理念，去事先規(guī)定同類元素的表現(xiàn)形式，例如：

1. 底色都使用淺灰色；
2. 按鈕，使用圓角，重要按鈕使用主色；
3. 選中狀態(tài)，使用主色陰影。

少了生硬黑線的頁(yè)面，看起來簡(jiǎn)潔干凈，布局清晰；同時(shí)統(tǒng)一的元素表現(xiàn)形式降低了理解難度。

這個(gè)技巧能大大提升原型的被理解效率，我在工作中使用后，發(fā)現(xiàn)原型評(píng)審會(huì)的效率提高了很多，大家對(duì)于產(chǎn)品設(shè)計(jì)的理解誤差減小了。

二. 熟練使用各種對(duì)齊方式

要提高頁(yè)面的可看性，整齊是必不可少的。要做到高效整齊很簡(jiǎn)單，就是熟悉Axure的各個(gè)對(duì)齊方式。

首先，我在“視圖”中設(shè)置了自定義工具欄（也可以記憶和熟練各個(gè)操作快捷鍵）：

在制作原型過程中，配合復(fù)制粘貼使用對(duì)齊，但每個(gè)對(duì)齊都有規(guī)則，需要自己在實(shí)踐中去靈活操作。例如：

• 上下左右對(duì)齊將以選中的第一個(gè)元件為準(zhǔn)；
• 水平/垂直分布將以選中元件中兩個(gè)最外邊為準(zhǔn)。

合理使用柵格和輔助線同樣能保證頁(yè)面的整齊：

三. 使用真實(shí)數(shù)據(jù)表現(xiàn)元素

很多人為了方便會(huì)將將頁(yè)面上的數(shù)據(jù)用數(shù)據(jù)名稱表示，甚至使用“xxxx”來代指。這樣做的弊端是不能更直觀展現(xiàn)頁(yè)面和元素的功能，不方便理解。

我在工作中發(fā)現(xiàn)，可以使用真實(shí)數(shù)據(jù)和數(shù)據(jù)名稱結(jié)合的方式去更好地展現(xiàn)頁(yè)面元素信息，傳遞頁(yè)面功能。

四. 不使用Axure制作復(fù)雜交互

很多人會(huì)沉迷于Axure制作交互的強(qiáng)大中，而忽視了原型最重要讀者的需求。

原型目標(biāo)讀者大多為設(shè)計(jì)師和程序員，他們希望你能提供準(zhǔn)確直觀的原型。原型中的交互，需要讀者自己點(diǎn)擊操作才能了解，程序員可能只會(huì)看，進(jìn)而漏掉了很多交互內(nèi)容；而且很多交互表現(xiàn)得不夠準(zhǔn)確，在我看來反而會(huì)使原型不夠?qū)I(yè)。

所以，我在原型中只使用簡(jiǎn)單的頁(yè)面鏈接，一些交互直接交給交互設(shè)計(jì)師，或者在頁(yè)面旁做簡(jiǎn)單的注釋。

以上4招只是我在工作中總結(jié)的小技巧，不一定適合每個(gè)產(chǎn)品和團(tuán)隊(duì)，希望能拋磚引玉，啟發(fā)你去探索自己的快速原型妙招~

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

題圖來自網(wǎng)絡(luò)