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

40 評論 52622 瀏覽 276 收藏 6 分鐘

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

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

先給好看定義標準:

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

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

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

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

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

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

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

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

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

二. 熟練使用各種對齊方式

要提高頁面的可看性,整齊是必不可少的。要做到高效整齊很簡單,就是熟悉Axure的各個對齊方式。

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

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

  • 上下左右對齊將以選中的第一個元件為準;
  • 水平/垂直分布將以選中元件中兩個最外邊為準。

合理使用柵格和輔助線同樣能保證頁面的整齊:

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

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

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

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

很多人會沉迷于Axure制作交互的強大中,而忽視了原型最重要讀者的需求。

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      來自江蘇 回復(fù)
  16. 給頁面做標注,有時候程序還是不明白。可能我解釋不到位,現(xiàn)在想的是 做個動態(tài)的,然后下面放上靜態(tài)頁面,這樣,看不懂,自己就會去點下了。

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

      來自遼寧 回復(fù)
  17. 確實,簡單直觀,達到溝通的目的即可

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      來自遼寧 回復(fù)