設(shè)計(jì)師中，設(shè)計(jì)師需要清楚地了解設(shè)計(jì)的目的，特別是當(dāng)你不一個(gè)受歡迎的產(chǎn)品，不能以個(gè)人認(rèn)知、強(qiáng)大的主題（如游戲）或趨勢(shì)風(fēng)格來(lái)確定目標(biāo)時(shí)。例如，老年人在設(shè)計(jì)小米手機(jī)時(shí)需要什么顏色？增加風(fēng)格是干擾還是更好的體驗(yàn)？按鈕多大才合適？在本產(chǎn)品中UI在設(shè)計(jì)過(guò)程中，設(shè)計(jì)師需要從頭開(kāi)始參與，在設(shè)計(jì)過(guò)程中，設(shè)計(jì)師基本上已經(jīng)知道了。

　　我傾向于說(shuō)整個(gè)交互設(shè)計(jì)過(guò)程。在這里，UI在視覺(jué)設(shè)計(jì)開(kāi)始之前，界面的交互規(guī)劃和設(shè)計(jì)是一個(gè)非常重要的前提步驟，對(duì)最終的用戶體驗(yàn)有很大的影響。

　　我們的團(tuán)隊(duì)在交互設(shè)計(jì)階段通常有產(chǎn)品經(jīng)理、交互設(shè)計(jì)師和UI設(shè)計(jì)師主要參與。據(jù)我所知，很多公司由產(chǎn)品經(jīng)理完成相關(guān)工作，而不是專門的交互設(shè)計(jì)師。以下是我在這里的工作流程(圖片來(lái)自網(wǎng)絡(luò)，團(tuán)隊(duì)不貼)。希望整個(gè)產(chǎn)品團(tuán)隊(duì)都能參與其中，加強(qiáng)對(duì)產(chǎn)品的理解。或者借一個(gè)時(shí)尚的概念，我希望團(tuán)隊(duì)能有更多DesignThinking，加強(qiáng)和促進(jìn)解決問(wèn)題的能力，激發(fā)更多的創(chuàng)新。

　　一定要開(kāi)始Scenario應(yīng)用場(chǎng)景和Persona制作用戶角色。您的產(chǎn)品在什么場(chǎng)景中使用，您的用戶角色是什么特征。設(shè)計(jì)是否正確取決于用戶角色，而不是設(shè)計(jì)師或產(chǎn)品經(jīng)理本身。清楚地描述場(chǎng)景和角色，讓整個(gè)團(tuán)隊(duì)徹底理解，以確保團(tuán)隊(duì)少犯錯(cuò)誤。

　　*用戶角色Persona，在實(shí)際工作中寫文字描述是好的，不需要做如下圖所示的高度。如果你想給客戶或客戶，或者Boss提案，可以做提升逼格。

　　1.Storyboard故事版：

　　主要負(fù)責(zé)人：產(chǎn)品經(jīng)理或交互設(shè)計(jì)師

　　早些時(shí)候，我們開(kāi)始討論用戶體驗(yàn)過(guò)程，并在白板上繪制過(guò)程加粗略的UI元素。會(huì)后交互設(shè)計(jì)師會(huì)在在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI包括技術(shù)工程師在內(nèi)的設(shè)計(jì)師會(huì)一起做很多討論，主要討論過(guò)程和主要功能，所以手繪故事版快捷方便，易于修改。

　　這個(gè)環(huán)節(jié)要敲定Userflow，每一步都是用戶流程和關(guān)鍵步驟的主界面。

　　*白板一般都是這樣，交互設(shè)計(jì)的學(xué)生會(huì)在紙上重畫。

　　*這樣設(shè)計(jì)移動(dòng)產(chǎn)品也可以，不買專用模板本和工具尺，自己打印也可以。

　　2.Keywireframe關(guān)鍵界面線框圖

　　主要負(fù)責(zé)人：交互設(shè)計(jì)師：

　　在確定的用戶流程中，選擇幾個(gè)關(guān)鍵的、有代表性的步驟并進(jìn)行細(xì)化Wireframe線框圖。確保線框圖中的每一個(gè)。UI元素的設(shè)計(jì)包括其大小和位置。我們制作的線框圖是1:1，即線框圖與實(shí)際界面尺寸一致。1:1的線框圖可以避免早期考慮不當(dāng)、執(zhí)行困難等諸多問(wèn)題。

　　在關(guān)鍵界面中確定此鏈接UI元素和布局，以及整體布局和布局風(fēng)格。

　　*線框圖1:1出名。輸出到文檔中添加說(shuō)明。在以下工作中，本文檔允許UI設(shè)計(jì)與工程師共享。

　　3.Keyvisualdesign視覺(jué)設(shè)計(jì)的關(guān)鍵界面

　　主要負(fù)責(zé)人：UI設(shè)計(jì)師

　　交互設(shè)計(jì)師將繼續(xù)根據(jù)確定的用戶流程和確定的布局風(fēng)格制作其他界面的線框圖。UI設(shè)計(jì)師則同時(shí)開(kāi)始做關(guān)鍵界面的視覺(jué)設(shè)計(jì)，進(jìn)行配色、樣式不同風(fēng)格的嘗試。

　　本環(huán)節(jié)應(yīng)確定產(chǎn)品界面的視覺(jué)設(shè)計(jì)風(fēng)格。

　　4.Allwireframe所有界面線框圖

網(wǎng)站設(shè)計(jì)-沙漠風(fēng)網(wǎng)站建設(shè)公司" />

　　主要負(fù)責(zé)人：交互設(shè)計(jì)師：

　　交互設(shè)計(jì)師應(yīng)完成所有界面的線框圖(1:1)設(shè)計(jì)，并由團(tuán)隊(duì)確認(rèn)。

　　*完成所有的線框圖，一般會(huì)產(chǎn)生總結(jié)構(gòu)圖。如果有足夠大的場(chǎng)地，也可以逐頁(yè)打印，貼在墻上。方便團(tuán)隊(duì)隨時(shí)參考。

　　5.Prototype可動(dòng)原型

　　主要負(fù)責(zé)人：交互設(shè)計(jì)師：

　　這個(gè)鏈接取決于產(chǎn)品的需求。如果靜態(tài)線框圖不能完全反映產(chǎn)品的特點(diǎn)，則需要制作可操作甚至關(guān)鍵界面動(dòng)畫示意的可移動(dòng)原型。HTML可移動(dòng)原型和特殊項(xiàng)目也做過(guò)Flash我還有一個(gè)很棒的朋友用它。PPT做過(guò)（PPT的開(kāi)發(fā)工具VBScript）可移動(dòng)原型幾乎接近成品界面。

　　與上一步相同，團(tuán)隊(duì)的理解將更加準(zhǔn)確。

　　*忍不住貼一個(gè)PPT開(kāi)發(fā)工具面板，提供VS風(fēng)格控件，直接使用VBscript寫控件邏輯！也可以帶來(lái)dummy數(shù)據(jù)！客戶認(rèn)為你已經(jīng)開(kāi)發(fā)好了。

　　6.UIdesign所有界面視覺(jué)設(shè)計(jì)

　　主要負(fù)責(zé)人：UI設(shè)計(jì)師

　　完成所有界面UI視覺(jué)設(shè)計(jì)。

　　全部確認(rèn)此鏈接UI設(shè)計(jì)。同時(shí)確認(rèn)UI在文檔中更新。