使用OmniGraffle制作原型圖


原型圖設計是一個藝術創作的過程,所以我們應當使用能夠提高工作效率、激發創作靈感的工具,讓工具為創作服務,而不是為創作去學習如何使用工具。從這一點上說,我覺得Mac下的很多軟件做的非常好,OmniGraffle就是其中一個。下面就介紹一下使用OmniGraffle制作移動應用原型圖的設計。
 
啟動 OmniGraffle 后,可以選擇模板,這里選擇空白模板。
 
OmniGraffle的默認參數設置有些奇怪,所以一般需要修改一下頁面的設置。選擇Inspectors->Canvas->Size。
 
修改默認設置后,避免了文檔隨着文檔中對象的拖動而自動改變頁面的尺寸。另外,使用像素作為單位,也是因為我們是在為桌面或者手持設備在進行設計。我們可以打開標尺,同時從標尺中拖出兩個參考線來,和Photoshop中的操作一樣。
 
做好上面的步驟后,我們就可以開始“解放思想,激發靈感”了。我們不必擔心原型不夠漂亮,畢竟這是一個初步的模型,更多的是關注功能的布局。
 
從最關鍵的着陸頁開始。 這是因為着陸頁頁面會包含整個網站的多個基本元素,包括頭部導航、底部信息等。這樣在做其他頁面時,就能夠比較方便的復制粘貼。
 
保持原型簡潔。我們不必急於馬上開始原型的設計,我們需要靜下來想一想,頁面到底需要什么元素,應當如何布局。原型不必像最終網站一樣,如果你朝着這個方向工作,那么會吃力不討好。原型是用來幫助我們規划頁面、網站的布局和層級設置,協助我們考慮布局在可用性方面存在的問題。
 
原型中的字體,可以一直使用Helvetica和宋體,並且不要使用太多不同的尺寸。對於圖片,使用一個灰色的占位框代替就可以了。OmniGraffle有非常智能的對齊提示,所以在進行多列布局和水平對齊時,完全不需要擔心。這一點真是比原來的Photoshop方便太多了。
 
 
最小化調色板。最小化調色板中的顏色,有助於我們將注意力集中在那些重要的事情上面。文本一律使用白底黑字,一些輔助性的元素使用一點輕微的陰影。唯一需要特別處理的是鏈接文字,我們可以使用藍色來表示這些文字具有其他的功能性。對於一些錯誤信息提示或者刪除、取消操作,可以使用紅色讓他看起來比較明顯。
 
制作符號。對於頁面中重復存在的元素,例如Header、Footer或者Sidebar,可以將這些元素轉換成符號。這樣,如果需要更新時,只需要在一個地方編輯就可以了。OmniGraffle在這一點上不如Axure方便,但也不是沒有辦法。下面是TODD MOY的方法是使用了 LinkBack,具體方法如下:首先選中需要制作成符號的元素,點擊Edit->Copy As …->PDF 也可以使用右鍵,然后將元素復制到需要的地方。
 
Stencils是OminiGraffle中的重要特性,可以幫助我們節省大量的時間。Stencils是我們可以拖動擺放的圖片,多數是矢量圖片。
 
Graffletopia是崔出名的分享Stencils的網站。
 
 

參考資料:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM