原型制作技巧:4招讓你的線框圖更好看
網(wǎng)絡(luò)上很多Axure或原型相關(guān)的文章,更多是原型設(shè)計技巧、軟件操作、案例之類的內(nèi)容;而對于原型本身及認知層面的內(nèi)容,極少進行探討。這篇文章,從原型的技巧出發(fā),從認知層面,解釋如何讓你的線框圖更好看。
線框圖原型需不需要好看?我覺得在保證效率的前提下,需要好看。
先給好看定義標準:
- 簡潔清晰,能一眼了解頁面布局和元素;
- 規(guī)整統(tǒng)一,能高效分辨不同類型模塊;
- 準確到位,原型表達準確,不僅僅是布局與元素,還有線框圖中選用的示例;
- 重點突出,在不影響后續(xù)設(shè)計師設(shè)計的前提下,突出頁面重點。
所以,好看并不只是外觀審美,而是看起來方便,很容易看懂。
針對以上四點,我總結(jié)了4個應(yīng)對小技巧。下面以模仿淘票票APP首頁為例,詳細介紹這4招。
一. 少用線條,使用顏色和陰影區(qū)分模塊
使用顏色區(qū)分模塊在視覺上比線條區(qū)分更直觀,也更容易觀察出頁面布局。我的建議是只使用黑白灰,如果產(chǎn)品定了主色,可以增加一個主色使用在重要元素、選中狀態(tài)元素上
可以根據(jù)制作原型母版和元件庫的理念,去事先規(guī)定同類元素的表現(xiàn)形式,例如:
- 底色都使用淺灰色;
- 按鈕,使用圓角,重要按鈕使用主色;
- 選中狀態(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ò)
非常贊同作者的一個觀點,即原型的目標讀者為開發(fā)和UI,制作的原則準確直觀!非常討厭一些公司領(lǐng)導(dǎo),要求高保真的原型,我真不知道搞這么高保真有什么卵用,而且一般需求評審過后還需要改。還有一些公司要求寫PRD文檔,一個小的系統(tǒng),能寫上一百頁。連“登陸時需校驗密碼是否正確”,這種細節(jié)都要寫到文檔中,我覺得這種文檔,要么是開發(fā)傻,要么是產(chǎn)品傻。為了畫而畫,為了寫而寫,不談效率,這種團隊賊扯淡~~~
很準確的建議,我上司也這么跟我說
麻煩大佬們,告訴一下用的什么軟件制作原型的
Axure
非常使用的技巧
都是細節(jié)上的東西,但確實很實在很有用。
非常好的技巧
超級棒的技巧,感謝慷慨的分享
說的不錯,看起來都是很實用的技巧
最后一條,小公司沒有交互設(shè)計師,還是要自己動手??!
是的哦,但是我覺得在流程上不影響,一般都是先確定流程,畫線框圖畫頁面,再去考慮交互
嗯,是這樣的 ??
受教了
大兄弟,剛開始學(xué),你這個狠實用呀,贊一個
嘿嘿,是不是簡單易學(xué) ??
個人覺得,看這個原型是用來干嘛的
如果是研發(fā)導(dǎo)向的,這個思路完全正確
如果是demo性質(zhì)的,用于向客戶展示,或者做市場調(diào)研的,或者是路演什么的,還是有較為復(fù)雜精準的交互比較好
是的是的,目標導(dǎo)向。所以在題目里強調(diào)了一下是線框圖,一般都是團隊內(nèi)部用~
感謝分享,已經(jīng)拿小本本記下來。
看到第一張圖我就去打開淘票票,看了一下最近還有什么電影可看 ??
淘票票的公關(guān)看這里,可以聯(lián)系我付廣告費啦~ ?
背景不用顏色,用距離做間隔,不用純色,主用灰色。
??
試了下,淺灰色做背景效果不錯(但要注意非常淺,否則過于突出)
灰色起到弱化背景的作用,從而更加突出白色重點部分,所以顯示了干凈整潔的視覺效果。
給頁面做標注,有時候程序還是不明白。可能我解釋不到位,現(xiàn)在想的是 做個動態(tài)的,然后下面放上靜態(tài)頁面,這樣,看不懂,自己就會去點下了。
嗯嗯,這是個好辦法,有動效也方便看。其實都是根據(jù)交互本身難易程度,團隊間溝通方式等等決定的~
確實,簡單直觀,達到溝通的目的即可
是的,還是要從原型目的入手~
動態(tài)交互可以在評審得時候用,讓業(yè)務(wù)、開發(fā)和測試更直觀得理解。
是的,但動態(tài)交互并不是線框圖的必須,可以單拎出來做,比如做成動圖什么的~
是的,有些效果做出來了,還有標注,程序都不愿意去點
是的,程序員大多瀏覽一下頁面就開始開發(fā)了,做很多一眼看不到的東西他們會漏掉
我也贊同,但是很多小公司并沒有配備專門的交互設(shè)計師,交互設(shè)計僅由PM和UI完成,這個怎么破
那就需要專門學(xué)習(xí)交互和視覺使用的工具了,這樣做出來更專業(yè)。當然簡單交互可以使用Axure,但還是有一個程序員們不會點擊看交互的問題,我覺得可以把交互錄屏(我使用ScreenToGif這個軟件)做成動圖,直接放在文檔里
請問怎么把gif放到sketch文件里顯示呢?
這個我沒有試過??~我一直使用Axure和confluence(一個企業(yè)協(xié)作文檔)寫
請問怎么把錄屏文件放在axure里面呢
挺有道理的,程序員確實不怎么喜歡點擊交互
嗯吶,原型需要方便程序員也方便自己
挺有道理的,有些網(wǎng)頁確實花樣多得眼花繚亂??
是的,很多原型做的完全偏離了本來目的,變成一種炫技~