1、,1,目錄,2,原型是對(duì)一個(gè)產(chǎn)品的可視化呈現(xiàn)，主要傳達(dá)一個(gè)產(chǎn)品的信息架構(gòu)、內(nèi)容、功能和交互方式。,3,4,5,2: 低保真原型,低保真原型能夠準(zhǔn)確的傳達(dá)界面的布局和交互方式，但是美觀、效果欠佳。用于快速Demo以及項(xiàng)目?jī)?nèi)部人員溝通使用。,6,3: 高保真原型,高保真原型通常指高保真灰度線框圖或產(chǎn)品演示Demo。界面布局和交互效果與實(shí)際產(chǎn)品完全等效，體驗(yàn)上也與真實(shí)產(chǎn)品接近。而為了達(dá)到完整的效果，很大程度上就要求交互設(shè)計(jì)師有較好的視覺(jué)審美的能力，對(duì)界面比較敏感，有控件和組件的概念，注重界面的規(guī)范性和一致性。,7,Fireworks、Illustrator、PS、Pencil、UIDesigner、

2、GUI Design Studio、PF、Silverlight、Expression Design、Prototype Composer、Lucid Spec、Irise Professional Edition、AdobeReader.,8,高保真原型制作步驟,9,高保真原型設(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ì)降低用戶(hù)對(duì)界面的學(xué)習(xí)和識(shí)別成本。 有規(guī)范性：好的軟件或者網(wǎng)站絕對(duì)

3、是規(guī)范的。,把看原型的人想象成對(duì)產(chǎn)品一無(wú)所知的人，怎么圖文并茂的展示產(chǎn)品的邏輯和功能；怎么讓她通過(guò)原型來(lái)理解這個(gè)產(chǎn)品，使用這個(gè)產(chǎn)品。,10,STEP 1: 建立控件庫(kù),控件是指界面中所有的最小元件。比如：按鈕、文本框、下拉框、單選按鈕、復(fù)選框、圖片占位符等等。,11,STEP 2: 建立組件庫(kù),能夠完成一個(gè)功能點(diǎn)，形成一種模塊，能夠被重復(fù)使用，從而降低開(kāi)發(fā)成本，實(shí)現(xiàn)界面的一致性，規(guī)范性，突出界面的風(fēng)格特征。,Accordion(手風(fēng)琴),Tag Cloud(標(biāo)簽云),12,組件庫(kù)示例,13,STEP 3: 繪制流程圖,流程圖表達(dá)的是一個(gè)用戶(hù)用例，通常是HappyFlow 流程圖有一個(gè)起點(diǎn)和一個(gè)終點(diǎn) 流程圖中相同的元件代表相同的意思 結(jié)構(gòu)清晰，易于理解 不要用一個(gè)流程圖展示所有的流程 邏輯完整，清晰 每一個(gè)用戶(hù)的決策都是DecisionPoint 流程圖的作用在于梳理流程和規(guī)范流程,14,流程圖示例,15,STEP 4: 設(shè)計(jì)關(guān)鍵頁(yè)面,16,STEP 4: 設(shè)計(jì)輔助頁(yè)面,17,STEP 5: 關(guān)鍵功能Storyboard展示1,18,STEP 5: 關(guān)鍵功能Storyboard展示2,STEP 6: 原型注釋,注釋的是界面元素的功能 界面與人的交互方式 控件的狀態(tài)以及在什么情況下會(huì)出現(xiàn)什么狀態(tài) 操作的結(jié)果 鏈接的指向 報(bào)錯(cuò)信息及其展示