用戶體驗(yàn)設(shè)計(jì)USEREXPERIENCEDESIGN授課教師：李佳黛如何著手？產(chǎn)品的界面流程方案第十七節(jié)設(shè)計(jì)草稿怎么畫技能二原型（Prototype）依據(jù)之前調(diào)研得到的材料，接下來我們將進(jìn)入平面視覺的領(lǐng)域，將之前的產(chǎn)品原料一步步地呈現(xiàn)轉(zhuǎn)化為視覺設(shè)計(jì)圖。它是產(chǎn)品功能與內(nèi)容的示意圖，包含界面的樣式與交互的操作效果?！霸汀卑凑站?xì)程度可以分為低保真原型、中保真原型、和高保真原型。原型（Prototype）1.對(duì)概念，功能和交互方式進(jìn)行規(guī)劃和設(shè)想2.主要工作是市場(chǎng)調(diào)查、應(yīng)用定位和用戶分析，從而形成原型草圖草圖低保真原型中保真原型高保真Demo原型數(shù)字化：1.選擇布局和導(dǎo)航方式2.設(shè)置控件和界面元素3.可用性測(cè)試進(jìn)一步視覺設(shè)計(jì)的完善：1.簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)2.界面的個(gè)性化設(shè)計(jì)；標(biāo)簽欄等設(shè)計(jì)和運(yùn)用3.整體色調(diào)，交互動(dòng)作等細(xì)節(jié)的設(shè)定保真模型1.對(duì)概念，功能和交互方式進(jìn)行規(guī)劃和設(shè)想2.主要工作是市場(chǎng)調(diào)查、應(yīng)用定位和用戶分析，從而形成原型草圖草圖低保真保真模型原型中保真原型數(shù)字化：1.選擇布局和導(dǎo)航方式2.設(shè)置控件和界面元素3.可用性測(cè)試保真模型原型中保真原型數(shù)字化：1.選擇布局和導(dǎo)航方式2.設(shè)置控件和界面元素3.可用性測(cè)試手繪線框圖保真模型原型中保真原型數(shù)字化：1.選擇布局和導(dǎo)航方式2.設(shè)置控件和界面元素3.可用性測(cè)試中保真紙面原型圖保真模型原型中保真原型數(shù)字化：1.選擇布局和導(dǎo)航方式2.設(shè)置控件和界面元素3.可用性測(cè)試模型圖保真模型原型中保真進(jìn)一步視覺設(shè)計(jì)的完善：1.簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)2.界面的個(gè)性化設(shè)計(jì)；標(biāo)簽欄等設(shè)計(jì)和運(yùn)用3.整體色調(diào)，交互動(dòng)作等細(xì)節(jié)的設(shè)定保真模型原型中保真進(jìn)一步視覺設(shè)計(jì)的完善：1.簡(jiǎn)潔的圖標(biāo)設(shè)計(jì)2.界面的個(gè)性化設(shè)計(jì)；標(biāo)簽欄等設(shè)計(jì)和運(yùn)用3.整體色調(diào)，交互動(dòng)作等細(xì)節(jié)的設(shè)定保真模型參考步驟線框圖線框圖讓設(shè)計(jì)師定義設(shè)計(jì)的信息層級(jí)、層次與結(jié)構(gòu)。線框圖是一種用線條、框架和其他形狀組成的圖形，用于展示界面與交互設(shè)計(jì)。它們是用來表達(dá)頁面或屏幕內(nèi)容以及導(dǎo)航流程的圖形化設(shè)計(jì)和簡(jiǎn)單勾勒。線框圖是以用戶行為為基礎(chǔ)，描述設(shè)想工作流程的過程草圖。線框圖線框圖主要使用線條、方框和灰階色塊組成，將內(nèi)容文本和圖形放置于對(duì)象中，以便在設(shè)計(jì)中表示占位。線框圖示例線框圖的制作1.內(nèi)容清單在創(chuàng)建線框圖之前合理地組織它，根據(jù)頁面劃分，清晰列出所有需要單獨(dú)呈現(xiàn)的內(nèi)容。列出所有內(nèi)容后，并附上URL和簡(jiǎn)短描述。將每個(gè)內(nèi)容條目分配到最合理的頁面，并標(biāo)記出多個(gè)不同頁面上的內(nèi)容條目，篩選冗余內(nèi)容，刪除你不需要的內(nèi)容。線框圖的制作2.視覺層次根據(jù)內(nèi)容列表創(chuàng)建視覺層級(jí)，通過排列優(yōu)先級(jí)，將每個(gè)項(xiàng)目分為一級(jí)、二級(jí)和三級(jí)內(nèi)容。線框圖的制作3.內(nèi)容方框圖把之前計(jì)劃好的內(nèi)容分成不同的塊，內(nèi)容線框圖只需要關(guān)于內(nèi)容的方向即可，比如圖片的占位符與文字段落的占位符可以為灰色方框圖案，按鈕、菜單等控件的擺放位置?？丶钦嘉环恍枰龅哪敲淳珳?zhǔn)，為一切頁面上的內(nèi)容預(yù)留好空間，合理布局。線框圖的制作3.內(nèi)容方框圖需要根據(jù)頁面間的鏈接和圖標(biāo)之間的交互方向，計(jì)算好每個(gè)組件之間的尺寸比。然后增添上交互的流程設(shè)計(jì)，讓頁面之間通過“線”串聯(lián)起來，達(dá)到指引流程方向的目的。并將