原型制作技巧:4招讓你的線框圖更好看

40 評(píng)論 52609 瀏覽 276 收藏 6 分鐘

網(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ò)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 非常贊同作者的一個(gè)觀點(diǎn),即原型的目標(biāo)讀者為開發(fā)和UI,制作的原則準(zhǔn)確直觀!非常討厭一些公司領(lǐng)導(dǎo),要求高保真的原型,我真不知道搞這么高保真有什么卵用,而且一般需求評(píng)審過后還需要改。還有一些公司要求寫PRD文檔,一個(gè)小的系統(tǒng),能寫上一百頁(yè)。連“登陸時(shí)需校驗(yàn)密碼是否正確”,這種細(xì)節(jié)都要寫到文檔中,我覺得這種文檔,要么是開發(fā)傻,要么是產(chǎn)品傻。為了畫而畫,為了寫而寫,不談效率,這種團(tuán)隊(duì)賊扯淡~~~

    來自河南 回復(fù)
  2. 很準(zhǔn)確的建議,我上司也這么跟我說

    來自廣東 回復(fù)
  3. 麻煩大佬們,告訴一下用的什么軟件制作原型的

    來自河南 回復(fù)
    1. Axure

      來自上海 回復(fù)
  4. 非常使用的技巧

    來自湖北 回復(fù)
  5. 都是細(xì)節(jié)上的東西,但確實(shí)很實(shí)在很有用。

    來自貴州 回復(fù)
  6. 非常好的技巧

    來自四川 回復(fù)
  7. 超級(jí)棒的技巧,感謝慷慨的分享

    來自廣東 回復(fù)
  8. 說的不錯(cuò),看起來都是很實(shí)用的技巧

    來自廣東 回復(fù)
  9. 最后一條,小公司沒有交互設(shè)計(jì)師,還是要自己動(dòng)手??!

    來自浙江 回復(fù)
    1. 是的哦,但是我覺得在流程上不影響,一般都是先確定流程,畫線框圖畫頁(yè)面,再去考慮交互

      來自遼寧 回復(fù)
    2. 嗯,是這樣的 ??

      來自浙江 回復(fù)
  10. 受教了

    來自廣東 回復(fù)
  11. 大兄弟,剛開始學(xué),你這個(gè)狠實(shí)用呀,贊一個(gè)

    來自河北 回復(fù)
    1. 嘿嘿,是不是簡(jiǎn)單易學(xué) ??

      來自遼寧 回復(fù)
  12. 個(gè)人覺得,看這個(gè)原型是用來干嘛的
    如果是研發(fā)導(dǎo)向的,這個(gè)思路完全正確
    如果是demo性質(zhì)的,用于向客戶展示,或者做市場(chǎng)調(diào)研的,或者是路演什么的,還是有較為復(fù)雜精準(zhǔn)的交互比較好

    來自廣東 回復(fù)
    1. 是的是的,目標(biāo)導(dǎo)向。所以在題目里強(qiáng)調(diào)了一下是線框圖,一般都是團(tuán)隊(duì)內(nèi)部用~

      來自遼寧 回復(fù)
  13. 感謝分享,已經(jīng)拿小本本記下來。

    來自廣東 回復(fù)
  14. 看到第一張圖我就去打開淘票票,看了一下最近還有什么電影可看 ??

    來自上海 回復(fù)
    1. 淘票票的公關(guān)看這里,可以聯(lián)系我付廣告費(fèi)啦~ ?

      來自遼寧 回復(fù)
  15. 背景不用顏色,用距離做間隔,不用純色,主用灰色。

    來自江蘇 回復(fù)
    1. ??

      來自遼寧 回復(fù)
    2. 試了下,淺灰色做背景效果不錯(cuò)(但要注意非常淺,否則過于突出)
      灰色起到弱化背景的作用,從而更加突出白色重點(diǎn)部分,所以顯示了干凈整潔的視覺效果。

      來自江蘇 回復(fù)
  16. 給頁(yè)面做標(biāo)注,有時(shí)候程序還是不明白??赡芪医忉尣坏轿?,現(xiàn)在想的是 做個(gè)動(dòng)態(tài)的,然后下面放上靜態(tài)頁(yè)面,這樣,看不懂,自己就會(huì)去點(diǎn)下了。

    來自湖南 回復(fù)
    1. 嗯嗯,這是個(gè)好辦法,有動(dòng)效也方便看。其實(shí)都是根據(jù)交互本身難易程度,團(tuán)隊(duì)間溝通方式等等決定的~

      來自遼寧 回復(fù)
  17. 確實(shí),簡(jiǎn)單直觀,達(dá)到溝通的目的即可

    來自天津 回復(fù)
    1. 是的,還是要從原型目的入手~

      回復(fù)
  18. 動(dòng)態(tài)交互可以在評(píng)審得時(shí)候用,讓業(yè)務(wù)、開發(fā)和測(cè)試更直觀得理解。

    回復(fù)
    1. 是的,但動(dòng)態(tài)交互并不是線框圖的必須,可以單拎出來做,比如做成動(dòng)圖什么的~

      來自遼寧 回復(fù)
  19. 是的,有些效果做出來了,還有標(biāo)注,程序都不愿意去點(diǎn)

    回復(fù)
    1. 是的,程序員大多瀏覽一下頁(yè)面就開始開發(fā)了,做很多一眼看不到的東西他們會(huì)漏掉

      來自遼寧 回復(fù)
  20. 我也贊同,但是很多小公司并沒有配備專門的交互設(shè)計(jì)師,交互設(shè)計(jì)僅由PM和UI完成,這個(gè)怎么破

    來自北京 回復(fù)
    1. 那就需要專門學(xué)習(xí)交互和視覺使用的工具了,這樣做出來更專業(yè)。當(dāng)然簡(jiǎn)單交互可以使用Axure,但還是有一個(gè)程序員們不會(huì)點(diǎn)擊看交互的問題,我覺得可以把交互錄屏(我使用ScreenToGif這個(gè)軟件)做成動(dòng)圖,直接放在文檔里

      來自遼寧 回復(fù)
    2. 請(qǐng)問怎么把gif放到sketch文件里顯示呢?

      回復(fù)
    3. 這個(gè)我沒有試過??~我一直使用Axure和confluence(一個(gè)企業(yè)協(xié)作文檔)寫

      回復(fù)
    4. 請(qǐng)問怎么把錄屏文件放在axure里面呢

      來自廣東 回復(fù)
  21. 挺有道理的,程序員確實(shí)不怎么喜歡點(diǎn)擊交互

    來自江蘇 回復(fù)
    1. 嗯吶,原型需要方便程序員也方便自己

      來自遼寧 回復(fù)
  22. 挺有道理的,有些網(wǎng)頁(yè)確實(shí)花樣多得眼花繚亂??

    回復(fù)
    1. 是的,很多原型做的完全偏離了本來目的,變成一種炫技~

      來自遼寧 回復(fù)