1.什么是原型設計?
產品原型設計(Prototype Design)最基礎的工作,就是結合批注、大量的說明以及流程圖畫框架圖WireFrame,將自己的產品原型完整而准確的表述給 UI、UE、程序工程師,市場人員,並通過溝通會議,反復修改Prototype 直至最終確認,開始投入執行。
簡單的說就是產品設計成形之前的一個簡單框架,對網站來講,就是將頁面模塊、元素進行粗放式的排版和布局,深入一些,還會加入一些交互性的元素,使其更加具體、形象和生動。
2.普通設計工具
現在大致有哪些普通的工具可以使用進行原型設計,分析他們的利弊何在?
紙筆:簡單易得,上手難度為零。有利於瞬間創意的產生與記錄,有利於對文檔即時的討論與修改。但是保真度不高,難以表述頁面流程,更難以表述交互信息與程序需求細節。
Word:上手難度普通。可以畫WireFrame,能夠畫頁面流程,能夠使用批注與文字說明。但是對交互表達不好,也不利於演示。
PPT:上手難度普通。易於畫框架圖,易於做批注,也可以表達交互流程,也擅長演示。但是不利於大篇幅的文檔表達。
Visio:功能相對比較復雜。善於畫流程圖,框架圖。不利於批注與大篇幅的文字說明。同樣不利於交互的表達與演示。
Photshop/fireworks:操作難度相對較大,易於畫框架圖、流程圖。不利於表達交互設計,不擅長文字說明與批注。
Dreamweave:操作難度大,需要基礎的html知識。易於畫框架圖、流程圖、表達交互設計。不擅長文字說明與批注。
紙筆,更適合在產品創意階段使用,可以快速記錄閃電般的思路和靈感;也可以在即時討論溝通時使用,通過圖形快速表達自己的產品思路,及時的畫出來,是再好不過的方法。
Word則適合在用文字詳細表達產品,對產品進行細節說明時使用,圖片結合文字的排版,是Word最擅長的工作。
PPT自然是演示時更好。Visio則可以適用於各種流程圖、關系圖的表達,更可通過畫USE CASE 獲取用戶需求。
PS/FW是圖片處理的工具,DW則是所見即所得的網頁開發軟件,這些是設計師的看家本領,需要耗費太多的精力去掌握。
其實每件工具,每個軟件,在創造它的初期,軟件設計師們都給它賦予了性格、氣質。因為每個工具的產生,都是為了滿足人類的某一方面需求。
以上這些工具,經常會使用到的,但是從根本上來說,這些工具都不是做Prototype Design的專門利器,需要根據產品開發不同的目的,不同的開發階段,選擇不同的工具搭配使用,才能達到表達、溝通的目的。市面產品原型設計的軟件工具有很多,大家普遍認可,使用頻率最多,最高效,交互效果最好的原型工具是Axure RP。
3.什么是Axure RP?
Axure RP是一個專業的快速原型設計工具。Axure(發音:Ack-sure),代表美國Axure公司;RP則是Rapid Prototyping(快速原型)的縮寫。
Axure RP是美國Axure Software Solution公司旗艦產品,是一個專業的快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具,它能快速、高效的創建原型,同時支持多人協作設計和版本控制管理。
Axure的可視化工作環境可以讓你輕松快捷的以鼠標的方式創建帶有注釋的線框圖。不用進行編程,就可以在線框圖上定義簡單連接和高級交互。在線框圖的基礎上,可以自動生成HTML(標准通用標記語言下的一個應用)原型和Word格式的規格。
4.Axure RP 工作環境
(1).主菜單和工具欄
執行常用操作,如文件打開、保存文件,格式化控件,自動生成原型和規格說明書等操作。
(2).站點地圖面板
對所設計的頁面(包括線框圖和流程圖)進行添加、刪除、重命名和組織頁面層次。
(3).控件面板
該面版包含線框圖控件和流程圖控件,另外,你還可以載入已有的部件庫(*.rplib文件)創建自己的部件庫。
(4).模塊面板
一種可以復用的特殊頁面,在該面板中可進行模塊的添加、刪除、重命名和組織模塊分類層次。
(5).線框圖工作區
線框圖工作區也叫頁面工作區,線框圖工作區是你進行原型設計的主要區域,在該區域中你可以設計線框圖、流程圖、自定義部件、模塊。
(6).頁面注釋和交互區
添加和管理頁面級的注釋和交互。
(7).控件交互面板
定義控件的交互,如:鏈接、彈出、動態顯示和隱藏等。
(8).控件注釋面板
對控件的功能進行注釋說明。
5.界面功能
(1).導航面板
在繪制線框圖(Wireframe)或流程圖(Flow)之前,應該先思考界面框架,決定信息內容與層級。
明確界面框架后,接下來就可以利用頁面導航面板來定義所要設計的頁面。頁面導航面板是用於管理所設計的頁面,可以添加、刪除及對頁面層次進行重新組織。
頁面的添加、刪除和重命名
點擊面板工具欄上的“Add Child Page”按鈕可以添加一個頁面,點擊 “Delete Page” 按鈕可以刪除一個頁面。右鍵單擊選擇“Rename Page”菜單項可對頁面進行重命名。
頁面組織排序
在頁面導航面板中,通過拖拉頁面或點擊工具欄上的排序按鈕,可以上下移動頁面的位置和重新組織頁面的層次。打開頁面進行設計在頁面導航面板中,鼠標雙擊頁面將會在線框面板中打開頁面以進行線框圖設計。
(2).控件
控件是用於設計線框圖的用戶界面元素。在控件面板中包含有常用的控件,如按鈕、圖片、文本框等。
添加控件
從控件面板中拖動一個控件到線框圖面板中,就可以添加一個控件。控件可以從一個線框圖中被拷貝(Ctrl+C),然后粘貼(Ctrl+V)到另外一個線框圖中。
操作控件
添加控件后,在線框圖中點選該控件,然后可以拖拉移動控件和改變控件的大小,還可以一次同時對多個控件進行選擇、移動、改變尺寸。另外,還可以組合、排序、對齊、分配和鎖定控件。這些操作可通過控件右鍵菜單中進行,也可在Object 工具欄上的按鈕進行。
編輯控件風格和屬性
有多種方法可以編輯控件的風格和屬性:
鼠標雙擊:鼠標雙擊某個控件,可以對控件的最常用屬性進行編輯。例如,雙擊一個圖片控件可以導入一張圖片;雙擊一個下拉列表或列表框控件可以編輯列表項。
工具欄:點擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。
右鍵菜單:控件右鍵菜單上可編輯控件的一些特定屬性,不同控件這些屬性也不同。
(3).注釋
可以為控件添加注釋,以說明控件的功能。
添加注釋
在線框圖中選擇控件,然后在控件注釋和交互(Annotations and Interactions)面板中編輯字段中的值,即可為控件添加注釋。面板頂部的 Label 字段是為控件添加一個標識符。
自定義字段(Fields)
通過主菜單Wireframe->CustomizeAnnotation Fields and Views 或點擊面板上Annotations 頭部的“CustommizeFields and Views” 然后在彈出的 CustommizeFields and , Views對話框中可以添加、刪除、修改、排序注釋字段。
腳注(Footnotes)
在控件上添加注釋后,控件的右上角會顯示一個黃色方塊,稱為腳注。
(4).頁面備注
頁面備注可對頁面進行描述和說明。
添加頁面備注
在線框圖下面的Page notes 面板中可以添加頁面備注內容。
管理頁面備注
通過自定義頁面備注,可以為不同的人提供不同的備注,以滿足不同需要。比如可以新增“測試用例”“操作說明”等不同類別的頁面備注。
6.交互設計
(1).控件的交互
控件交互面板用於定義線框圖中控件的行為,包含定義簡單的鏈接和復雜的RIA 行為,所定義的交互都可以在將來生成的原型中進行操作執行。
在控件交互面板中可以定義控件的交互,交互事件(Events) 、場景( Cases)和動作(Actions)組成:
用戶操作界面時就會觸發事件,如鼠標的 OnClick、OnMouseEnter 和 OnMouseOut;
每個事件可以包含多個場景,場景也就是事件觸發后要滿足的條件;
每個場景可執行多個動作,例如:打開鏈接、顯示面板、隱藏面板、移動面板。
(2).定義鏈接
下列步驟說明如何在按鈕控件上定義一個鏈接:
1.首先,拖拉一個按鈕控件到線框圖中,並選擇這個按鈕;
2.然后,控件交互面板中鼠標雙擊“OnClick”這個事件,這時會出現“Interaction Case Properties”對話窗,在這個對話框中可以選擇要執行的動作;
3.在“Step 2”中,勾選“Open Link in Current Window”動作。
4.在“Step 3”中,點擊“Link”,在彈出的Link Properties 對話框中可以選擇要鏈接 的頁面或其它網頁地址 。
除了上面的步驟,加入一個鏈接的最快的方法是單擊控件交互面板頂部的“QuickLink” ,在彈出的 Link Properties 對話框中選擇要鏈接的頁面。
(3).設置動作
除了簡單的鏈接之外,Axure還提供了許多豐富的動作,這些動作可以在任何觸發事件的場景中執行。以下是 Axure所支持的動作:
Open Link in Current Window:在當前窗口打開一個頁面
Open Link in Popup Window:在彈出的窗口中打開一個頁面
Open Link in Parent Window:在父窗口中打開一個頁面
Close Current Window:關閉當前窗口
Open Link in Frame:在框架中打開一個頁面
Set Panel state(s) to State(s):為動態面板設定要顯示的狀態
Show Panel(s):顯示動態面板
Hide Panel(s):隱藏動態面板
Toggle Visibility for Panel(s):切換動態面板的顯示狀態(顯示/隱藏)
Move Panel(s):根據絕對坐標或相對坐標來移動動態面板
Set Variable and Widget value(s) equal to Value(s):設定變量值或控件值
Open Link in Parent Frame:在父頁面的嵌框架中打開一個頁面
Scroll to Image Map Region:滾動頁面到
Image Map 所在位置
Enable Widget(s):把對象狀態變成可用狀態
Disable Widget(s):把對象狀態變成不可用狀態
Wait Time(s):等待多少毫秒(ms)后再進行這個動作
Other:顯示動作的文字說明
(4).多個場景
一個觸發事件可以包含有多個場景,根據條件執行流程或互動。
(5).事件
Axure支持一個頁面層級的觸發事件:OnPageLoad,這個事件在原型載入頁面時觸發。
頁面 OnPageLoad事件在頁面備注面板中的Interactions 子面板中定義, OnPageLoad為事件添加場景的方式與控件事件相同