原型輸出規(guī)范

原型輸出規(guī)范產(chǎn)品部1原型輸出規(guī)范目錄1原型的基本定義及要點2常見的原型種類3原型工具及其特點4

高保真原型設(shè)計規(guī)范2原型輸出規(guī)范原型是對一個產(chǎn)品的可視化呈現(xiàn)，主要傳達(dá)一個產(chǎn)品的信息架構(gòu)、內(nèi)容、功能和交互方式。1原型的定義2原型的種類3原型的工具4高保真原型3原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型保真度低保真原型高保真原型介質(zhì)種類紙面原型電子原型原型的工具AxureVisioFireworks……4原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型2:低保真原型低保真原型能夠準(zhǔn)確的傳達(dá)界面的布局和交互方式，但是美觀、效果欠佳。用于快速Demo以及項目內(nèi)部人員溝通使用。5原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型3:高保真原型高保真原型通常指高保真灰度線框圖或產(chǎn)品演示Demo。界面布局和交互效果與實際產(chǎn)品完全等效，體驗上也與真實產(chǎn)品接近。而為了達(dá)到完整的效果，很大程度上就要求交互設(shè)計師有較好的視覺審美的能力，對界面比較敏感，有控件和組件的概念，注重界面的規(guī)范性和一致性。6原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型Axure（推薦使用）快速上手豐富的控件豐富的腳本模式自定義控件庫擅長Web界面Visio適用性廣控件庫強(qiáng)大便捷的模板套用支持絕大多數(shù)格式擅長桌面程序界面Mockflow在線軟件基于web的存儲適合虛擬團(tuán)隊豐富的控件庫豐富的控件模式Fireworks、Illustrator、PS、Pencil、UIDesigner、GUIDesignStudio、ＷPF、Silverlight、ExpressionDesign、PrototypeComposer、LucidSpec、IriseProfessionalEdition、AdobeReader......7原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型高保真原型制作步驟建立控件庫建立組件庫繪制流程圖設(shè)計關(guān)鍵頁設(shè)計輔助頁故事版原型注釋8原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型高保真原型設(shè)計規(guī)范灰度線框圖：顏色會干擾視覺設(shè)計，效果會影響大家對易用性的判斷。清晰地展示流程：好的操作流程是易用性的最基本標(biāo)準(zhǔn)。關(guān)鍵功能要有故事版：更好的、更快的理解產(chǎn)品。要有注釋：圖只能展示界面元素，圖文并茂才能準(zhǔn)確全部傳達(dá)設(shè)計思想。有一致性：一致性會降低用戶對界面的學(xué)習(xí)和識別成本。有規(guī)范性：好的軟件或者網(wǎng)站絕對是規(guī)范的。把看原型的人想象成對產(chǎn)品一無所知的人，怎么圖文并茂的展示產(chǎn)品的邏輯和功能；怎么讓她通過原型來理解這個產(chǎn)品，使用這個產(chǎn)品。9原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型STEP1:建立控件庫示例控件是指界面中所有的最小元件。比如：按鈕、文本框、下拉框、單選按鈕、復(fù)選框、圖片占位符等等。10原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型STEP2:建立組件庫能夠完成一個功能點，形成一種模塊，能夠被重復(fù)使用，從而降低開發(fā)成本，實現(xiàn)界面的一致性，規(guī)范性，突出界面的風(fēng)格特征。Accordion(手風(fēng)琴)TagCloud(標(biāo)簽云)11原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型組件庫示例示例12原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型STEP3:繪制流程圖流程圖表達(dá)的是一個用戶用例，通常是HappyFlow流程圖有一個起點和一個終點流程圖中相同的元件代表相同的意思結(jié)構(gòu)清晰，易于理解不要用一個流程圖展示所有的流程邏輯完整，清晰每一個用戶的決策都是DecisionPoint流程圖的作用在于梳理流程和規(guī)范流程13原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型流程圖示例示例14原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型STEP4:設(shè)計關(guān)鍵頁面示例15原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型STEP4:設(shè)計輔助頁面示例16原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型STEP5:關(guān)鍵功能Storyboard展示1示例17原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型示例STEP5:關(guān)鍵功能Storyboard展示218原型輸出規(guī)范1原型的定義2原型的種類3原型的工具4高保真原型STEP6:原型注釋注釋的是界面元素的功能界面與人的交互方式控件的狀態(tài)以及在什么情況下會出現(xiàn)什么狀態(tài)操作的結(jié)果鏈接的指向報錯信息及其展示方式對于