信息架構確定了之后,就需要對每一個頁面進行元素的排版,排版之前,一般都會先對頁面進行一個布局設計的考慮。我們需要對這些內容塊進行一定的設計布局,這里的布局結構取決於設計人員對內容編排的把握,不同的布局會產生不同的效果。
其實這個應該較早的提出來,因為已經發布過很多關於用Axure RP設計原型實例的文章,不過大部分都是關於單個功能或者交互效果的演示實例,而沒有將其串聯起來形成一個整體,比如一個網站或者是一個互聯網產品。用 Axure RP設計一個實例的步驟和用其設計一個整體產品的步驟還是不一樣的,所側重的點不一樣,實例更側重於功能點或交互效果的表現,整體產品則需要將各個實例串 聯起來,形成一個功能或效果集合,達到集中展示。因此整體的產品更側重於信息架構,布局展示,實例合並,整體效果聚合等方面,本文就結合自己的工作經驗, 簡單的介紹一下如何用Axure RP設計完整的產品。
1、確定信息架構
信息架構對於一個整體 產品而言是非常重要的,猶如現在蓋房子時的地基和框架結構,整個結構決定了將來的房型樣子,及房子是否穩固。而WEB產品的信息架構則決定了產品未來的功 能導航結構,是一個底層框架的作用,因此非常重要,地基不穩,安能蓋高樓?那么如何來確定信息架構呢?
一般來講,我們在做需求分析的時 候,都會把幾個主要的功能點抓出來,這幾個功能點就可以濃縮一下形成產品的初步信息架構。比如要做一個合同管理的功能,要求實現合同信息管理,合同履約管 理,合同統計報表等功能,這里列出來的功能點就可以拿來做信息架構。再比如我們要做一個會員管理的功能,注冊和登錄是必不可少的功能點,那么就可以將其列 為會員管理下的兩個基本信息架構。其實每個網站產品最終確定下來的一級導航欄里面的各個欄目就是一個網站的信息架構了。
那么用Axure RP如何來管理信息架構呢?Axure RP提供了一個非常方便操作的站點地圖面板(Sitemap)來管理頁面結構,結構菜單采用樹形菜單,層級分明,結構清晰,還能自動生成框架結構圖,非常方便。關於站點地圖面板的使用,詳情可參見《Axure RP介紹–站點地圖面板》里面的介紹。這里簡單的以一個企業網站的首頁內容為例。
2、確定頁面布局
信息架構確定了之后,就需要對每一個頁面進行元素的排版,排版之前,一般都會先對頁面進行一個布局設計的考慮。通常我們做WEB產品設計的時候,都會遵 循一些已有產品總結出來的布局結構,比如三行三列布局,三行兩列布局等,再如左導航右內容的形式,左內容右導航的形式等,這些都是大的布局結構,是整體頁 面的布局排版。細分到具體頁面內容的時候,就需要對每一個內容塊的展示位置進行布局,如企業網站首頁的一般內容有圖片新聞,通知通告,公司新聞,產品介 紹,產品展示等等,我們需要對這些內容塊進行一定的設計布局,這里的布局結構取決於設計人員對內容編排的把握,不同的布局會產生不同的效果。如電子商務網 站,對內容塊和廣告塊的布局排版就非常講究,因為不一樣的布局,所帶來的用戶點擊量和轉化率是不一樣的。這種情況下,即對某一類產品的布局把握不好的時 候,可以參照已有成熟產品的內容布局,因為它們已經有運營數據在支持。
在用Axure RP做布局設計的時候,可以用默認組件庫里面的占位符組件來設計(關於占位符組件的使用,參照這里),先將需要設計的區塊用占位符布局,然后標上文字標示,以此來表示這里將來需要設計放置的內容。這個步驟基本決定了一個頁面的布局。
3、內容完善
頁面布局布的就是內容塊,當決定了某塊內容的放置位置之后,就可以一塊一塊的完善設計內容,使其接近於最終產品的展示樣式。這個時候就是要用到各個實例 效果的時候了,比如圖片新聞,我們可以用幻燈片效果來做,比如產品展示,我們可以用跑馬燈效果來做,具體采用什么樣的交互效果來實現內容塊要求展示的內 容,取決於產品設計人員的把握和用戶的需求及用戶體驗,其中用戶體驗是比較大的一塊,就拿幻燈片效果來說,是否需要設計數字導航鍵,是否需要自動播放,是 否需要設計縮略圖等等,這些都需要仔細考慮之后再做決定,這個可以在設計產品時候多多討論溝通,多看看別人的設計效果。譬如電子商務網站首頁的Flash 圖片輪播效果,其實就是幻燈片效果,各個電商網站的設計大同小異,就完全可以借鑒參考。
這里用Axure RP來設計的實例介紹,前面講的比較多了,用到的是Axure RP的核心功能,如組件的組合使用,動態面板的靈活應用等等,需要去發揮設計人員自己的想象力和創造力,現在網絡上有的這些效果也都是人想出來的,並不是一開始就有的。
經過這樣三個步驟的設計,一個中低保真度的產品頁面原型就算完成了,逐步的完成所有頁面的設計之后,這個產品的原型設計也就告一段落了。如果要設計高保 真度的原型,可能還需要UI設計人員的介入,提供一套接近最終產品效果的UI效果,然后切換到原型上去。基本上按照這樣三個步驟來做原型設計,不會有什么 大的問題,前提是產品的需求已經基本確定,要是連框架都還沒有定下來,也就是說第一步都還不能做,那是沒有辦法開始做原型設計的。