原型輸出規(guī)范課件

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

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

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