數(shù)字媒體交互設(shè)計(jì)的原理與流程

人機(jī)界面設(shè)計(jì)梅雪人機(jī)界面設(shè)計(jì)的三個(gè)層面以用戶體驗(yàn)為中心的設(shè)計(jì)-用戶研究原型設(shè)計(jì)界面設(shè)計(jì)目錄1人機(jī)界面設(shè)計(jì)的三個(gè)層面2以用戶體驗(yàn)為中心的設(shè)計(jì)-用戶研究界面設(shè)計(jì)交互設(shè)計(jì)信息架構(gòu)用戶研究的方法用戶界面心理學(xué)

3原型設(shè)計(jì)4概念設(shè)計(jì)低保真原型高保真原型常見頁面元素布局顏色界面質(zhì)感界面設(shè)計(jì)情感化設(shè)計(jì)可用性設(shè)計(jì)人機(jī)界面設(shè)計(jì)的三個(gè)層面界面設(shè)計(jì)交互設(shè)計(jì)信息架構(gòu)UIUI=User‘sInterface用戶界面，也稱人機(jī)界面。是指用戶和某些系統(tǒng)進(jìn)行交互方法的集合，這些系統(tǒng)不單單指電腦程序，還包括某種特定的機(jī)器，設(shè)備，復(fù)雜的工具等。IxDIxD=InteractionDesign交互設(shè)計(jì)，又稱互動(dòng)設(shè)計(jì)。是指在用戶與產(chǎn)品進(jìn)行交互時(shí)，決定產(chǎn)品如何響應(yīng)的一種行為和事件設(shè)計(jì)。以按鈕為例，界面設(shè)計(jì)涉及它看起來是否像按鈕及該如何擺放，而交互設(shè)計(jì)則涉及按鈕按下后產(chǎn)生的行為。IAIA=informationarchitecture信息架構(gòu)，其過程包括觀察和分析復(fù)雜的信息集，然后設(shè)計(jì)一個(gè)系統(tǒng)，在這個(gè)系統(tǒng)里信息可以更好地被組織，更好地被程序化以及更好地被理解。UXUX=Userexperiencedesign用戶體驗(yàn)。UX指用戶體驗(yàn)，UX設(shè)計(jì)指以用戶體驗(yàn)為中心的設(shè)計(jì)。人與系統(tǒng)交互時(shí)的感覺就是用戶體驗(yàn)。UX設(shè)計(jì)師研究和評(píng)估一個(gè)系統(tǒng)的用戶體驗(yàn)，關(guān)注與該系統(tǒng)的易用性，價(jià)值體現(xiàn)，實(shí)用性，高效性等。例如，研究一個(gè)電子商務(wù)站點(diǎn)的結(jié)賬（checkout）流程，看看流程是否對(duì)用戶友好易用；研究子系統(tǒng)的組件，比如研究用戶在填寫Web表單的時(shí)候如何更加高效和舒服?；ヂ?lián)網(wǎng)產(chǎn)品生產(chǎn)基本流程市場調(diào)查\用戶研究\競品分析制定商業(yè)計(jì)劃、開發(fā)計(jì)劃、需求文檔界面設(shè)計(jì)、交互設(shè)計(jì)編寫代碼、開發(fā)測試、迭代上線、維護(hù)、營銷用戶研究、二次開發(fā)互聯(lián)網(wǎng)產(chǎn)品生產(chǎn)基本流程從一個(gè)案例開始來學(xué)習(xí)設(shè)計(jì)：C先生從事跨境電商工作，銷售茶葉，目前主要的銷售渠道是亞馬遜，他想再建設(shè)一個(gè)自己的電子商務(wù)網(wǎng)站來展示和銷售自己的產(chǎn)品。目標(biāo)客戶群體：中國和美國年輕人他希望這個(gè)電商網(wǎng)站所具有的功能：

樹立品牌、產(chǎn)品展示

支付、交易功能（登陸、注冊(cè)、購物車）評(píng)價(jià)功能精準(zhǔn)的產(chǎn)品搜索功能留言客服系統(tǒng)向郵箱發(fā)送信息產(chǎn)品經(jīng)理所要權(quán)衡的事：產(chǎn)品業(yè)務(wù)需求。收入模式是什么，或者為什么這個(gè)產(chǎn)品對(duì)公司的戰(zhàn)略目標(biāo)很重要？技術(shù)限制。開發(fā)工程師會(huì)與產(chǎn)品經(jīng)理或團(tuán)隊(duì)溝通。這些限制可能是數(shù)據(jù)庫存儲(chǔ)的挑戰(zhàn)、項(xiàng)目所花費(fèi)的時(shí)間、產(chǎn)品的運(yùn)行速度、代碼與其它系統(tǒng)集成的復(fù)雜性，或者僅僅是從軟件工程角度來看所涉及的工作量。使用產(chǎn)品的用戶體驗(yàn)。產(chǎn)品經(jīng)理需要站在用戶的角度考慮問題，去理解用戶并平衡他們的需求。產(chǎn)品經(jīng)理是最接近產(chǎn)品設(shè)計(jì)的一個(gè)角色，而產(chǎn)品設(shè)計(jì)師則通常扮演用戶，站在用戶的角度考慮問題。以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)用戶研研究-需求文文檔概念設(shè)設(shè)計(jì)-流程圖圖、信信息架架構(gòu)原型設(shè)設(shè)計(jì)-交互流流程、、低保保真原原型圖圖界面設(shè)設(shè)計(jì)-高保真真原型型圖以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——用戶研研究人通過工具完成動(dòng)作達(dá)到目的在環(huán)境里以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——用戶研研究+市場調(diào)調(diào)查++競品研研究發(fā)現(xiàn)用用戶所所需：：Who：誰會(huì)使使用這這個(gè)產(chǎn)產(chǎn)品？？What：他們想想要知知道什什么？？When：他們何何時(shí)想想要知知道？？Where：他們?cè)谠谀氖故褂媚隳愕漠a(chǎn)產(chǎn)品？？Why：為什么么他們們用你你的產(chǎn)產(chǎn)品而而不用用同類類其它它產(chǎn)品品？How：他們?nèi)缛绾问故褂媚隳愕漠a(chǎn)產(chǎn)品？？制定故故事：：誰，，何時(shí)時(shí)，何何地，，干什什么，，為什什么，，怎么么樣以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——設(shè)計(jì)流流程而而非設(shè)設(shè)計(jì)頁頁面以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——設(shè)計(jì)流流程而而非設(shè)設(shè)計(jì)頁頁面百度搜索中的廣告產(chǎn)品頁購買社交媒體中的鏈接著陸頁加入收藏\郵件列表電子商商務(wù)：：會(huì)員、、訂閱閱：把用戶戶流程程和轉(zhuǎn)轉(zhuǎn)化渠渠道結(jié)結(jié)合起起來。。典型用用戶流流程：：付費(fèi)廣廣告社交媒媒體郵件搜索新聞以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——設(shè)計(jì)流流程而而非設(shè)設(shè)計(jì)頁頁面整合整整個(gè)用用戶體體驗(yàn)周周期的的流程程——畫流程程圖。。以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——設(shè)計(jì)流流程而而非設(shè)設(shè)計(jì)頁頁面廣告橫幅著陸頁登記郵箱收到郵件訪問產(chǎn)品頁購買更多推薦以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——交互界界面設(shè)設(shè)計(jì)心心理學(xué)學(xué)以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——交互界界面設(shè)設(shè)計(jì)心心理學(xué)學(xué)為誘導(dǎo)導(dǎo)和潛潛意識(shí)識(shí)設(shè)計(jì)計(jì)界面面以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——交互界界面設(shè)設(shè)計(jì)心心理學(xué)學(xué)為誘導(dǎo)導(dǎo)和潛潛意識(shí)識(shí)設(shè)計(jì)計(jì)界面面為誘導(dǎo)導(dǎo)和潛潛意識(shí)識(shí)設(shè)計(jì)計(jì)界面面大腦的的不同同部分分具有有不同同的功功能，，我們們?cè)诖舜丝蓪⒋竽X腦簡化化為三三個(gè)不不同部部分：：舊腦——判斷什什么是是安全全的什什么是是危險(xiǎn)險(xiǎn)的；；負(fù)責(zé)責(zé)身體體運(yùn)作作：消消化、、移動(dòng)動(dòng)和呼呼吸等等。中腦——處理情情感，，讓你你感知知事物物，也也是很很多沖沖動(dòng)購購買的的根源源所在在。新腦——腦皮層層，負(fù)負(fù)責(zé)語語言處處理、、講話話、閱閱讀、、思考考計(jì)劃劃…以用戶戶體驗(yàn)驗(yàn)為中中心的的設(shè)計(jì)計(jì)——交互界界面設(shè)設(shè)計(jì)心心理學(xué)學(xué)為誘導(dǎo)導(dǎo)和潛潛意識(shí)識(shí)設(shè)計(jì)計(jì)界面面人舊腦腦和中中腦的的大多多數(shù)行行為都都發(fā)生生在我我們的的意識(shí)識(shí)之外外，我我們的的大腦腦中是是新腦腦在加加工我我們意意識(shí)到到的東東西。。我們喜歡認(rèn)認(rèn)為自己的的決定經(jīng)過過深思熟慮慮，但其實(shí)實(shí)大多數(shù)數(shù)決定和行行為是無意識(shí)的。最有效的網(wǎng)網(wǎng)站會(huì)與大大腦的三個(gè)個(gè)部分——舊腦、中腦腦、新腦““對(duì)話”。。以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面尋找歸屬：：社會(huì)認(rèn)同同的作用人們觀察別別人以決定定自己的行行為。在他他們不確定定要不要采采取行動(dòng)以以及如何行行時(shí)尤其如如此。我們會(huì)做其其它人也在在做的事情情，歸屬感感對(duì)我們的的吸引力很很大。以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面例：電商網(wǎng)網(wǎng)站上的評(píng)評(píng)分和評(píng)論論對(duì)我們影影響很大——尤其是在無無意識(shí)層面面。數(shù)據(jù)分析表表明在酒店店銷售電商商網(wǎng)站中，，能夠看到到酒店入住住評(píng)價(jià)比不不能看到顧顧客評(píng)價(jià)信信息，其銷銷售量會(huì)相相差30%之多?！獙ふ覛w屬以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面例：增加統(tǒng)統(tǒng)計(jì)和柱狀狀圖讓我們們更加覺得得自己的決決定很明智智。盡管我我們的決定定來自于不不理智的過過程?！獙ふ覛w屬以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面例：我們會(huì)會(huì)更相信我我們認(rèn)識(shí)并并信任的人人，如果評(píng)評(píng)論有評(píng)論論者的名字字、照片、、日期、身身份標(biāo)簽，，會(huì)使評(píng)論論更可信。?！獙ふ覛w屬以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面負(fù)債感：如如何利用互互惠和讓步步我們報(bào)答別別人的幫助助并且互換換禮物，有有些時(shí)候是是出于愛或或覺得好玩玩，但多數(shù)數(shù)時(shí)候是由由于責(zé)任感感。如果我我給了你禮禮物或者幫幫了你，你你會(huì)有負(fù)債債感，會(huì)希希望送我禮禮物或者幫幫我的忙。。這在很大大程度上是是一種無意意識(shí)的感覺覺，而且會(huì)會(huì)非常強(qiáng)烈烈。我們稱稱之為互惠惠。以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面例：接受別別人說“不不”，也是是一種贈(zèng)予予。這個(gè)技技巧有時(shí)被被稱為“拒絕后讓步步”。發(fā)起者者提出一個(gè)個(gè)大多數(shù)人人都不會(huì)接接受的要求求，在被拒拒絕后提出出更合理的的方案，最最終可以獲獲得他\她一開始就就想要的東東西?！?fù)債感以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面——負(fù)債感例：包郵、、提供免費(fèi)費(fèi)信息、小小禮物。幫你捐款。。以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面引發(fā)稀缺感感：我們傾傾向于多要要那些難以以獲得的東東西。我們會(huì)認(rèn)為為數(shù)量有限限的東西更更值錢，所所以我們更更想得到它它。我們會(huì)認(rèn)為為難以獲得得的信息更更有價(jià)值。。以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面例：小米手手機(jī)和蘋果果手機(jī)。市場部公開開表示上市市的第一批批產(chǎn)品數(shù)量量有限——并且很可能能供不應(yīng)求求?！∪备幸杂脩趔w驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面例：“今日日特價(jià)”““僅剩二雙雙”——稀缺感以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面和稀缺相似似的理論是是，產(chǎn)品的的價(jià)格越貴貴（因而越越難得到——稀缺）質(zhì)量量就越好。。我們無意意識(shí)的追求求貴的東西西，無意識(shí)識(shí)地把昂貴貴與高質(zhì)量量畫上等號(hào)號(hào)?！∪备幸杂脩趔w驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面必殺技：封封殺它。如如果一件東東西無法得得到、被禁禁止了，那那我們會(huì)很很想要它。?！∪备幸杂脩趔w驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面主角是你：：與自我為為中心的無無意識(shí)對(duì)話話。你簡單的舊舊腦只關(guān)注注你自己，，對(duì)它而言言，一切都都是你，你你就是一切切。創(chuàng)建“場景景”引入““顧客”，，并拿“危危險(xiǎn)、性和和食物”吸吸引顧客的的舊腦。以用戶體驗(yàn)驗(yàn)為中心的的設(shè)計(jì)——交互界面設(shè)設(shè)計(jì)心理學(xué)學(xué)為誘導(dǎo)和潛潛意識(shí)設(shè)計(jì)計(jì)界面主角是你：：與自我為為中心的無無意識(shí)對(duì)話話。你簡單的舊舊腦只關(guān)注注你自己，，對(duì)它而言言，一切都都是你，你你就是一切切。創(chuàng)建“場景景”引入““顧客”，，并拿“危危險(xiǎn)、性和和食物”吸吸引顧客的的舊腦。原型設(shè)計(jì)概念設(shè)計(jì)低保真原型型高保真原型型照片VS視頻單單個(gè)頁面面VS整個(gè)交互系系統(tǒng)流線設(shè)計(jì)：：“頁面”的概念源于于紙質(zhì)印刷刷品，數(shù)字字產(chǎn)品的體體驗(yàn)并不是是單一性的的，一個(gè)體體驗(yàn)總有它它的開端，，過程和結(jié)結(jié)局。人們們體驗(yàn)數(shù)字字產(chǎn)品時(shí)并并不只是一一瞬間，而而是一條流流線。注意意產(chǎn)品的：：長、寬、、“時(shí)間””。原型設(shè)計(jì)概念設(shè)計(jì)低保真原型型高保真原型型原型設(shè)計(jì)概念設(shè)計(jì)原型設(shè)計(jì)概念設(shè)計(jì)原型設(shè)計(jì)低保真原型型原型設(shè)計(jì)低保真原型型原型設(shè)計(jì)低保真原型型axure界面設(shè)計(jì)常見頁面元元素布局顏色界面質(zhì)感情感化設(shè)計(jì)計(jì)可用性設(shè)計(jì)計(jì)界面設(shè)計(jì)-常見界面元元素頁頭headbannerlogonavLoginorRegist內(nèi)容contentTextImgButtonLinkform頁腳footSitemapCopyrightBreadcrumbNavigation界面設(shè)計(jì)-布局布局就是布布置視覺線線索，“控控制”用戶戶的視覺路路徑。界面設(shè)計(jì)-布局F式布局用戶瀏覽網(wǎng)網(wǎng)頁的一般般模式：先看看頁面面的左上角，了解一下下這是什么么網(wǎng)站（因因此此處適適合放置Logo)———“知道是什什么”然后掃描描一下頁頁面的頂部（導(dǎo)航欄欄，搜索索欄）——“了解用法法”下一步，，用戶的的視線下下移，開開始閱讀讀下一行行的內(nèi)容容。用戶進(jìn)入入“掃描描模式””，一旦旦找到感感興趣的的內(nèi)容便便會(huì)打開開。界面設(shè)計(jì)計(jì)-布局F式布局界面設(shè)計(jì)計(jì)-布局F式布局-眼動(dòng)熱點(diǎn)點(diǎn)圖熱區(qū)（途途中紅色色、黃色色、橙色色部分））代表用用戶注意意力最集集中的地地方。界面設(shè)計(jì)計(jì)-布局F式布局-從上到下下從從左左到右按照邏輯輯，我們們得出以以下結(jié)論論：品牌標(biāo)志志和導(dǎo)航航應(yīng)該放放在頁面面的頂部部，這是是用戶對(duì)對(duì)網(wǎng)站的的第一印印象。在內(nèi)容結(jié)結(jié)構(gòu)中，，圖片更更容易獲獲得關(guān)注注。用戶瀏覽覽完圖片片后，下下一個(gè)關(guān)關(guān)注點(diǎn)便便是標(biāo)題題。用戶會(huì)大大致的瀏瀏覽文本本，但是是往往不不會(huì)通讀讀。界面設(shè)計(jì)計(jì)-布局25InnovativeWebsitesthatBucktheDesignTrends界面設(shè)計(jì)計(jì)-顏色根據(jù)軟件件屬性、、企業(yè)標(biāo)標(biāo)識(shí)顏色色、所要要表達(dá)的的主題內(nèi)內(nèi)涵等來來選擇界界面配色色?；貞浰伎伎继詫毦W(wǎng)網(wǎng)，京東東網(wǎng)，1號(hào)店，聚聚美優(yōu)品品，蘑菇菇街的配配色。思考該茶茶葉網(wǎng)站站配色。。界面設(shè)計(jì)計(jì)-顏色警告、強(qiáng)強(qiáng)調(diào)色已完成超鏈接不可點(diǎn)擊擊界面設(shè)計(jì)計(jì)-質(zhì)感擬物扁扁平質(zhì)感情感化設(shè)設(shè)計(jì)因?yàn)槿祟愵愄焐鷮?duì)對(duì)于機(jī)器器的恐懼懼和陌生生——我們不喜喜歡冷冰冰冰的機(jī)機(jī)器，比比如DOS命令，我我們喜歡歡的有歡歡迎界面面的windows或者M(jìn)ACOS———我們喜歡歡和人交交談。界面設(shè)計(jì)計(jì)-情感化設(shè)設(shè)計(jì)情感：情感是人人對(duì)外界界事物作作用于自自身時(shí)的的一種生生理的反反應(yīng)。是是由需要和期期望決定的。。當(dāng)這種種需求和期期望得到到滿足時(shí)時(shí)會(huì)產(chǎn)生生愉快、、喜愛的的情感，，反之，，苦惱、、厭惡。。情感化設(shè)設(shè)計(jì)：情感化的的設(shè)計(jì)只只是一種種創(chuàng)意工工具,表達(dá)和發(fā)發(fā)揮設(shè)計(jì)計(jì)師的思思想和設(shè)設(shè)計(jì)目的的。情感化設(shè)設(shè)計(jì)界面設(shè)計(jì)計(jì)-情感化設(shè)設(shè)計(jì)情感化設(shè)設(shè)計(jì)界面設(shè)計(jì)計(jì)-情感化設(shè)設(shè)計(jì)本能水平平人是視覺覺動(dòng)物，，對(duì)外形形的觀察察和理解解是出自自本能的的。如果果視覺設(shè)設(shè)計(jì)越是是符合本本能水平平的思維維，就越越可能讓讓人接受受并且喜喜歡。情感化設(shè)設(shè)計(jì)界面設(shè)計(jì)計(jì)-情感化設(shè)設(shè)計(jì)行為水平平行為水平平的設(shè)計(jì)計(jì)可能是是我們應(yīng)應(yīng)該關(guān)注注最多的的，特別別對(duì)功能能性的產(chǎn)產(chǎn)品來說說，講究究效用，，重要的的是性能能。使用用產(chǎn)品是是一連串串的操作作，美觀觀界面帶帶來的良良好第一一印象能能否延續(xù)續(xù)，關(guān)鍵鍵就要看看兩點(diǎn)：：是否能有有效地完完成任務(wù)務(wù)，是否否是一種種有樂趣趣的操作作體驗(yàn)，這是行行為水平平設(shè)計(jì)需需要解決決的問題題。情感化設(shè)設(shè)計(jì)界面設(shè)計(jì)計(jì)-情感化設(shè)設(shè)計(jì)反思水平平反思水平平的設(shè)計(jì)計(jì)與物品品的意義義有關(guān)，，受到環(huán)環(huán)境、文文化、身身份、認(rèn)認(rèn)同等的的影響，，會(huì)比較較復(fù)雜，，變化也也較快。。