什么是交互設(shè)計

什么是交互設(shè)計用戶界面有兩部分的設(shè)計：交互設(shè)計和視覺設(shè)計。在下圖中，左邊和右邊分別是微信的交互設(shè)計和視覺設(shè)計。交互設(shè)計vs.視覺設(shè)計交互設(shè)計的產(chǎn)出物是可交互的低保真原型，設(shè)計內(nèi)容包括：信息架構(gòu)；頁面布局；流程跳轉(zhuǎn)。一、信息架構(gòu)信息架構(gòu)，是為了讓用戶在使用APP、軟件、網(wǎng)頁的時候，能夠快速找到自己需要的信息、資料、功能，并且在使用的過程不會迷路。它有層級、有邏輯順序、要能反映信息（功能）的重要程度和關(guān)系。信息架構(gòu)的組成部分：1.組織系統(tǒng)：關(guān)注如何組織信息。比如小說，按篇幅，可以分為短篇、中篇、長篇；按年代，可以分為：古代、近代、現(xiàn)代、當(dāng)代；按題材，可以分為武俠、推理、歷史、言情等等……從哪個角度來組織、到底多少層合適，需要設(shè)計者的判斷和權(quán)衡。比如當(dāng)當(dāng)網(wǎng)的商品組織方式：組織系統(tǒng)2.導(dǎo)航系統(tǒng)協(xié)助用戶了解他在哪個位置，以及可以到何處去。比如微信的功能導(dǎo)航：微信功能導(dǎo)航豆瓣的功能導(dǎo)航：豆瓣功能導(dǎo)航3.搜索系統(tǒng)關(guān)注用戶如何搜索信息。比如淘寶的搜索：搜索系統(tǒng)4.標(biāo)簽系統(tǒng)關(guān)注如何表示信息。我們可以把標(biāo)簽系統(tǒng)理解為如何為信息和它的組織方式命名。比如我們剛才提到的小說按題材，可以分為武俠、推理、歷史、言情等等，其中的武俠、推理這些就是信息的標(biāo)簽。一些大型網(wǎng)站，比如淘寶、當(dāng)當(dāng)、京東等，設(shè)有專門的信息架構(gòu)師角色。而大部分的APP、應(yīng)用軟件中，信息架構(gòu)由交互設(shè)計師設(shè)計。[1]二、頁面布局頁面布局的工作，就是確定每個頁面有哪些元素，它們位置、順序、分組，要突出什么元素，弱化或隱藏什么元素。、頁面布局在設(shè)計布局時，有一個要特別注意的事情，就是盡可能減少父頁（所有布局抽象出來的模板）。比如說360安全路由的APP，它的父頁如下，所有頁面布局，都是由這四個模板變化而來。這樣的軟件，用戶在使用時，會感覺統(tǒng)一、易學(xué)。360安全路由三、流程跳轉(zhuǎn)設(shè)計頁面之間的跳轉(zhuǎn)邏輯。通過鏈接、按鈕還是手勢；單擊還是雙擊；上劃還是下劃……我們在做可交互的原型時，要盡可能貼近軟件的最終效果。流程跳轉(zhuǎn)交互和視覺的分工交互設(shè)計師在設(shè)計頁面布局時，為了突出主次，會設(shè)計字體大小、間距、顏色等內(nèi)容，但這不是最終效果。最終的字體、顏色、圖片、圖標(biāo)、大小、間距等，由視覺設(shè)計師確定。交互設(shè)計師在設(shè)計流程跳轉(zhuǎn)時，會設(shè)計過場動畫，但這同樣不是最終效果。最終效果由視覺設(shè)計師（或動畫設(shè)計師）確定。區(qū)分交互和視覺有一種快速判斷法，那就是web工程師平時寫的css里的屬性和參數(shù)，都屬于視覺設(shè)計的范疇。所以很多公司會多招幾個UI設(shè)計師，他們不僅僅負(fù)責(zé)視覺設(shè)計，還負(fù)責(zé)輸出css樣式表。交互和視覺對人的要求交互設(shè)計和視覺設(shè)計對人的要求不同，并且往往越往深入做，這兩者所需的性格、背景和思維方式差別越大?？梢院唵蔚乩斫?，交互設(shè)計是靠理性和邏輯驅(qū)動，而視覺設(shè)計是靠感性驅(qū)動。這也是為什么目前的交互設(shè)計師中理工科院的學(xué)生占了很大比例。業(yè)界也有很多開發(fā)工程師轉(zhuǎn)做交互設(shè)計的成功案例。所以做開發(fā)，學(xué)交互設(shè)計有優(yōu)勢。交互和視覺高度交叉我上面說，交互設(shè)計和視覺設(shè)計的分工，也說它們對人的要求不同。這可能會讓大家誤以為，這兩個角色的工作比較獨立，各自負(fù)責(zé)各自的內(nèi)容。交互不用管視覺，視覺不用管交互。但這是不對的。交互和視覺，是高度交叉的兩個領(lǐng)域，無法簡單的分隔。首先，交互設(shè)計師一定要有很好的視覺設(shè)計的感覺，因為一個頁面布局的好壞，會直接影響視覺的發(fā)揮。如果交互設(shè)計師導(dǎo)入一個沒主次，結(jié)構(gòu)很糟糕的設(shè)計給視覺設(shè)計師，他只有兩個選擇，一、降低自己的水平，隨便做一個；二、自己動手，重新設(shè)計一個。其次，交互設(shè)計會影響視覺設(shè)計，視覺設(shè)計也有可能反過來，讓交互設(shè)計做修改。舉個例子，我們最近正在做的一個功能。最早的交互設(shè)計里沒有列表選擇功能。后來在視覺設(shè)計過程中發(fā)現(xiàn)，我們的窗口大小，如果要保證視頻旁邊不出現(xiàn)黑邊，可能會留很大得空隙，如果布局滿了，又會導(dǎo)致視頻出現(xiàn)黑邊。一種方式，是把底下的點贊、分享、評論移上來，放到右邊，但這樣的排版怎么也不會滿意。況且我們這個頁面最核心的目的，是讓用戶看視頻。后來我們想了一下，增加了選集的功能，雖然這樣增加了開發(fā)工作量，但是對用戶來說，在這頁面可以直接導(dǎo)航到其它視頻，使用體驗更好，也解決了我們看視頻黑邊的問題。說這些想要表達(dá)的是，我們要時刻注意，自己是在同視覺設(shè)計師配合完成一個作品。我們設(shè)計的好壞，會影響他的工作。所以在介入真實項目前，我們要通過大量的學(xué)習(xí)+練習(xí)，達(dá)到準(zhǔn)設(shè)計師水平。如何學(xué)習(xí)交互設(shè)計1.看交互設(shè)計師需要有好的視覺設(shè)計的感覺，需要有基本的審美能力。如何提升審美能力？只有一種方法，看。我們要看大量優(yōu)秀的設(shè)計作品?，F(xiàn)在有很多平臺可以很容易的找到世界上頂尖的設(shè)計師們設(shè)計的東西。比如behance、pinterest、FWA、dribbble等等……如果嫌國外的訪問太慢，也可以選擇國內(nèi)的，比如花瓣。不要只看軟件界面，也看看其它領(lǐng)域的設(shè)計作品，好的產(chǎn)品、好的建筑、好的電影海報、好的攝影作品、好的藝術(shù)作品?？吹较矚g的，把它們收集起來?？戳撕?，該怎么判斷自己的審美能力有提升呢？隔幾個月去看看自己前幾個月喜歡的東西，當(dāng)時覺得不錯，現(xiàn)在是不是覺得丑的掉渣？如果是的話，審美水平就在進(jìn)步。[3]還有一種辦法，把自己平時喜歡的、會分享的設(shè)計，同設(shè)計領(lǐng)域的人溝通，聽聽他們的意見。一個專業(yè)的設(shè)計師，不會只說，這個好，那個不好，他們說為什么好，為什么不好，比如「這個界面主次不夠突出，重點元素沒有強(qiáng)調(diào)出來」、「沒有引導(dǎo)用戶的視線」等等等等……2.用我們在dribble、在花瓣，看的都是單個頁面。交互設(shè)計不只是設(shè)計一個個頁面，它還得把頁面串起來。所以看單個頁面還不行，我們要用、要體驗實際的產(chǎn)品，看看別人是怎么把一個個頁面組合成產(chǎn)品，頁面和頁面間的過場是怎樣的。怎么用呢？很簡單，我們每個人都有手機(jī)或pad。去下載優(yōu)秀的APP，每個APP花20分鐘，把所有頁面、所有功能跑一遍。優(yōu)秀的APP來源，可以是應(yīng)用市場每個分類下的Top20，也可以來自一些優(yōu)秀的組織、用戶推薦，如最美應(yīng)用、如知乎上的APP推薦等。我還有一個很誠懇的建議。如果有條件的話，最好買個MAC。為什么設(shè)計師喜歡用MAC？我們看幾張對比圖。PC和MAC上的QQ。PC和MAC上的應(yīng)用市場。PC上的「精美」PPT模板，和MAC上的keynote模板。MAC的軟件比PC的軟件優(yōu)雅太多，完全不在一個level。如果我們每天看的、用的都是最好的產(chǎn)品，我們的審美能力自然會提升，對什么是好設(shè)計，什么是壞設(shè)計會更敏銳，更有感覺。3.想認(rèn)知科學(xué)研究發(fā)現(xiàn)：世界上最好的象棋選手之間的差距，其實并不是他們思考能力的差異，或者是否能走出一招妙棋，而是他們熟悉的棋譜的多寡。做交互設(shè)計也是這樣，決定交互設(shè)計師的設(shè)計水平，是在做設(shè)計時，設(shè)計師能夠想起多少個相似的的設(shè)計，并借鑒、組合、改進(jìn)它們，成為自己的設(shè)計。我們看了那么多優(yōu)秀的設(shè)計，我們用了那么多優(yōu)秀的產(chǎn)品，怎么樣才能在需要的時候記起它們呢？認(rèn)知科學(xué)給出的答案很簡單，去想，去思考。一樣?xùn)|西進(jìn)入我們的大腦，如果我們沒有思考過，大腦會認(rèn)為這個東西沒用，就丟掉它，不存下來。但如果我們仔細(xì)思考過它，大腦就會自己做個判斷，認(rèn)為以后有可能要再度想起它，就把它存下來。所以不只要看，要用，還要想。比如我們看到這個頁面，要想：信息架構(gòu)是怎樣的？有沒有層級，有沒有邏輯順序？能不能反映它們的重要程度和關(guān)系？頁面布局是怎樣的？它們位置、順序是怎樣的？它是怎么分塊的？它是怎么突出主要任務(wù)的？有沒有其它設(shè)計亮點，比如好的隱喻，比如視覺怎么營造氛圍。把所有思考結(jié)果記錄下來。記得多了，形成自己的觀點后寫成文章，同其他人分享。4.做一開始模仿，在這個過程中，學(xué)習(xí)工具的使用，把它用熟。為什么要先把工具用熟呢？道理很簡單，如果工具還不熟悉，大腦會把主要精力都耗費在工具的使用上，根本騰不出空間來思考設(shè)計的事。當(dāng)工具使用沒有任何問題后，做真實的產(chǎn)品設(shè)計。我們可以直接在項目中實踐，但大部分人應(yīng)該沒這個條件，那怎么做？重新設(shè)計現(xiàn)有的產(chǎn)品。比如我們可以重新設(shè)計微信，重新設(shè)計簡書；我們覺得某個軟件設(shè)計的不夠好，重新設(shè)計它。通過這種訓(xùn)練方式，提升設(shè)計技能，達(dá)到準(zhǔn)設(shè)計師的水平。那么，一個產(chǎn)品（或功能）的設(shè)計流程，是怎樣的呢？1.明確使用場景我們經(jīng)?？吹揭粋€被分解后的功能指標(biāo)項如下：我要一個遠(yuǎn)程控制的功能。老師可以控制某個學(xué)生的電腦。如果按照這個需求做的話，在產(chǎn)品首頁加一個遠(yuǎn)程控制的按鈕，點一下，老師可以選擇某個學(xué)生進(jìn)行控制，這個功能就設(shè)計好了。但是實際上老師是怎么用的呢？我們和產(chǎn)品經(jīng)理（或用戶）溝通，會發(fā)現(xiàn)老師使用這個功能的場景是：老師查看屏幕預(yù)覽圖，覺得某個學(xué)生可能做的不錯，雙擊查看學(xué)生完整的屏幕。發(fā)現(xiàn)學(xué)生做的很好，就轉(zhuǎn)播給其他學(xué)生看，在這個過程中會協(xié)助學(xué)生微調(diào)作業(yè)。學(xué)生有問題時，舉手請求老師協(xié)助，老師在講臺上協(xié)助解決問題，（并將這個協(xié)助過程廣播給其它同學(xué)）。這就是使用場景。場景非常非常重要。它決定了功能入口放在哪里比較合適，應(yīng)該突出它，還是弱化它。它的前一步是什么，下一步是什么。只有明確了真實的使用場景，才能設(shè)計出用戶可用的產(chǎn)品。2.收集素材去前面提到的設(shè)計網(wǎng)站，或是平時用的軟件商找同類設(shè)計來對比和分析，看看其他人是怎么設(shè)計的。比如遠(yuǎn)程協(xié)助，可以看看QQ是怎么設(shè)計的。把它的整個流程跑幾遍，并且把每個過程截圖下來。借鑒它設(shè)計好的地方。QQ遠(yuǎn)程協(xié)助3.畫草圖有了想法以后，在紙上畫草圖。草圖里面，主要是把每個頁面都有哪些功能、元素，擺放順序定清楚。這個就是梳理我們設(shè)計思路的過程。這個過程一定要有。千萬不要一上來就做原型，那會花很多時間在對齊、排版等等瑣碎的事情上，我們也沒辦法一下子看到全貌，把每個頁面都想清楚了，頁面流程怎么跳轉(zhuǎn)都想好了，再搬到Axure上。4.畫低保真原型把草圖搬到Axure上。這個過程還會調(diào)整，修改。5.可用性測試，調(diào)整設(shè)計做完動態(tài)的、可交互的原型后，找三個用戶試用下（不一定要真實的最終用戶，另外，不用太多用戶，三個用戶就已經(jīng)能夠發(fā)現(xiàn)70%關(guān)鍵問題），觀察他們在使用的時候會碰到什么問題，找出最關(guān)鍵的問題，進(jìn)行調(diào)整。這個階段完成后，就可以提交開發(fā)了。6.補(bǔ)充細(xì)節(jié)設(shè)計有一些很細(xì)節(jié)的流程，我們沒辦法在一個交互稿里面完全體現(xiàn)，比如頁面內(nèi)容為空時，怎么辦；數(shù)據(jù)加載出錯時，怎么辦。這個時候用文檔來補(bǔ)充這些分支流程。我們就像寫開發(fā)文檔一樣，把整個軟件的所有分支流程、異常流程都過一遍，記下來，然后提交開發(fā)。文檔形式不重要，只要能傳遞思考結(jié)果就行。以上只是一個大概的流程，在實際操做的時候，還會碰到很多問題。有一些東西我會在后面分享的時候再細(xì)講，還有一些東西，可能就需要大家實際動手，自己去摸索和沉淀?？偨Y(jié)看、用、想、做。最后，我想說的是，我們掌握一個東西，要下很大的功夫，沒有捷徑可走。那些想要走捷徑的人，往往到最后會發(fā)現(xiàn)，繞了一大圈，卻什么也沒得到。只有那些腳踏實地一步步前行的人，才有機(jī)會走到自己想要到達(dá)的地方。【最能借鑒的經(jīng)驗都是實戰(zhàn)出來的】交互設(shè)計起源于網(wǎng)站設(shè)計和圖形設(shè)計，但現(xiàn)在已經(jīng)成長為一個獨立的領(lǐng)域。現(xiàn)在的交互設(shè)計師遠(yuǎn)非僅僅負(fù)責(zé)文字和圖片，而是負(fù)責(zé)創(chuàng)建在屏幕上的所有元素，所有用戶可能會觸摸，點按或者輸入的東西：簡而言之，產(chǎn)品體驗中的所有交互。這篇文章對有興趣學(xué)習(xí)更多關(guān)于交互設(shè)計的知識的人來說是一個很好的起點。我們將會簡要討論交互設(shè)計的歷史，相關(guān)的指導(dǎo)原則，值得關(guān)注的貢獻(xiàn)者，以及有關(guān)這個迷人學(xué)科的工具。一、什么是交互設(shè)計？交互設(shè)計（IxD）定義了交互系統(tǒng)的結(jié)構(gòu)和行為。交互設(shè)計師努力在用戶和用戶使用的產(chǎn)品或者服務(wù)間創(chuàng)建有意義的關(guān)聯(lián)，不管是從電腦到移動設(shè)備，家用電器或者其他。我們的實踐會與世界一同不斷發(fā)展。”——交互設(shè)計協(xié)會（IxDA）從第一臺用來容納靜態(tài)副本以外的信息的屏幕被設(shè)計出來的那天開始，交互設(shè)計就開始了。從按鈕，鏈接到表單的一切都是交互設(shè)計的一部分。在過去的幾十年里，有許多相關(guān)的書已經(jīng)出版了，這些書解釋了交互設(shè)計的方方面面，并探索了交互設(shè)計與體驗設(shè)計間交叉和重疊的多種方式．交互設(shè)計的發(fā)展幫助和促進(jìn)了人和他們所在的環(huán)境之間的相互作用。不像用戶體驗設(shè)計那樣占據(jù)所有面向用戶的系統(tǒng)，交互設(shè)計師只關(guān)心用戶和屏幕之間的特定相互作用。當(dāng)然，在實際中從來不會如此清楚地劃分開來。二、常見的交互設(shè)計方法盡管交互設(shè)計跨越了無數(shù)類型的Web和移動應(yīng)用程序和網(wǎng)站，有一些固定的方法是所有設(shè)計師都可以依賴的。我們將探討一些比較常見的方法：目標(biāo)驅(qū)動設(shè)計，可用性，五個維度理論，認(rèn)知心理學(xué)和人機(jī)界面指南。1.目標(biāo)驅(qū)動的設(shè)計目標(biāo)驅(qū)動的設(shè)計是由艾倫·庫珀在他的著作《囚犯正在逃出庇護(hù)：為什么高科技產(chǎn)品讓我們瘋狂，如何恢復(fù)理智》（出版于1999年）中推廣的。艾倫定義了目標(biāo)驅(qū)動的設(shè)計是指把解決問題作為最高優(yōu)先級的設(shè)計過程。換句話說，目標(biāo)驅(qū)動設(shè)計首先關(guān)注滿足終端用戶的具體需求和欲望，而不同于舊的設(shè)計方法只是專注于技術(shù)側(cè)上的能力。今天來看，艾倫提出的一些觀點是顯而易見的，因為設(shè)計師很少會選擇設(shè)計完全受制于技術(shù)發(fā)展約束的交互。然而，其核心的方法是滿足最終用戶的需要并想要的，也就是說就這一點對現(xiàn)在和曾經(jīng)都是一樣必要的。根據(jù)艾倫所說的，目標(biāo)驅(qū)動的設(shè)計過程，需要作為交互設(shè)計師的我們進(jìn)行五個思維方式的轉(zhuǎn)變。1）先設(shè)計，再編程。換句話說，目標(biāo)驅(qū)動的設(shè)計首先要考慮用戶如何與產(chǎn)品交互，而不是以技術(shù)因素開始。2）獨立開設(shè)計和編程的負(fù)責(zé)。這其中的必要性是，這樣可以使交互設(shè)計師可以盡量擁護(hù)用戶，而不去擔(dān)心技術(shù)限制。一個設(shè)計師應(yīng)該信任他或她的開發(fā)人員來處理技術(shù)方面的問題，事實上艾倫建議如此，否則會把設(shè)計師放在利益沖突的位置。3）設(shè)計師要對產(chǎn)品質(zhì)量和用戶滿意度負(fù)責(zé)。雖然利益相關(guān)者或客戶會有各自的目標(biāo)，交互設(shè)計師出也對任何在屏幕的另一邊的人有責(zé)任。4）為你的產(chǎn)品定義某個特定的用戶。這個想法已經(jīng)發(fā)展成為現(xiàn)在用戶研究最通常的東西：角色模型。然而艾倫依舊不斷提醒我們要把角色模型關(guān)聯(lián)回產(chǎn)品，不斷問自己：這個用戶會在哪里使用這個產(chǎn)品？他或她是誰？他或她想要完成什么目標(biāo)？5）結(jié)對工作。最后一點是，交互設(shè)計師不應(yīng)該獨自完成工作，而應(yīng)該與他人協(xié)作，艾倫稱其為關(guān)鍵的“設(shè)計溝通者”。雖然作為設(shè)計溝通者的艾倫，在1999年時的設(shè)想不過是一個典型的旨在提供營銷產(chǎn)品副本的廣告文字撰稿人，但到今天已經(jīng)設(shè)計溝通者擴(kuò)展到了包括項目經(jīng)理、內(nèi)容策略師、信息架構(gòu)師等在內(nèi)的許多其他人。2.可用性可用性感覺起來可能是一個模糊的概念，但其核心只是設(shè)計師的一個簡單問題——“是不是誰都可以輕松使用這個產(chǎn)品呢？“。這個概念在無數(shù)的書籍和網(wǎng)絡(luò)文章上解釋過，我們將回顧一些不同的定義來發(fā)現(xiàn)一些共同的主題和細(xì)微的差別：在艾倫迪克斯，珍妮特芬利，拉塞爾比爾，格里高利阿柏德幾個全著的書《人機(jī)交互》中，可用性被劃分成三個原則：易學(xué)性：新用戶學(xué)會在系統(tǒng)中導(dǎo)航的容易程度如何？靈活性：有多少種方法可以實現(xiàn)用戶和系統(tǒng)的交互？魯棒性：我們對用戶面對他們的操作錯誤時的支持做得怎么樣？與此同時，由尼爾森和施耐德曼所解釋的可用性是由五項原則構(gòu)成的：易學(xué)性：新用戶學(xué)會在系統(tǒng)中導(dǎo)航的容易程度如何？有效性：用戶執(zhí)行任務(wù)的速度如何？記憶性：如果一個用戶一段時間沒有訪問系統(tǒng)，他們對界面的記憶程度如何？錯誤度：用戶一共犯了多少錯誤，從錯誤中恢復(fù)的速度如何？滿意度：用戶是否喜歡他們所使用的界面，以及他們是否對結(jié)果滿意？最后，國際標(biāo)準(zhǔn)（ISO9241）也把可用性這個詞也分解成五項原則：易學(xué)性：新用戶學(xué)會在系統(tǒng)中導(dǎo)航的容易程度如何？可理解性：用戶對他們所看到的界面的理解程度如何？可操作性：用戶對界面的控制程度如何？吸引度：界面在視覺上的吸引程度如何？易用性的依從性：界面是否遵循了標(biāo)準(zhǔn)？顯然，在這些解釋中，我們能看出構(gòu)成可用的界面是有一些共同的主題的，無論一個設(shè)計師依據(jù)的是哪條原則，在設(shè)計任何界面的時候可用性都是一個重要的考慮方面。3.五維度理論在比爾莫格里奇的訪談書籍《設(shè)計交互》中，吉莉安史密斯，一位交互設(shè)計學(xué)者，介紹了關(guān)于“交互設(shè)計語言“的四維空間的概念，。換句話說，這些維度能夠構(gòu)成交互本身，因此它們最后形成了用戶和屏幕之間的溝通。原來的四個維度是這樣的：話語，視覺表征，物體或空間，以及時間。最近，凱文西爾韋，一位IDEXX實驗室的資深交互設(shè)計師，增加了第五個維度，行為。一維：話語應(yīng)該盡量易于用戶理解，用這樣一種方式表達(dá)使信息能夠輕松傳達(dá)給最終用戶。二維：視覺表征一般都是圖形或圖像，基本上就是指一切非文本的東西。他們應(yīng)該適量地被使用，而不是壓倒。三維：物理對象或空間指的是物理硬件，無論是鼠標(biāo)和鍵盤，或者任何用戶能與之交互的移動設(shè)備。四維：時間是指用戶與前三個維度交互所花費的時間長度。它也包括用戶可能的用來衡量進(jìn)展的方式，包括聲音和動畫。五維：凱文西爾韋在他的文章《交互設(shè)計中的設(shè)計》中增加了行為這個維度。這是指用戶與系統(tǒng)交互時產(chǎn)生的情緒和反應(yīng)。通過使用這五個維度，交互設(shè)計師可以非常專注于用戶與系統(tǒng)通信和連接時的體驗。4.認(rèn)知心理學(xué)認(rèn)知心理學(xué)是關(guān)于大腦如何工作，以其發(fā)生的心理過程的研究。根據(jù)美國心理協(xié)會的定義，這些過程包括了“注意力、語言的使用、記憶、感知、解決問題，創(chuàng)造力和思考”。雖然心理學(xué)是一個非常廣泛的領(lǐng)域，認(rèn)知心理學(xué)尤為重視其中的某些關(guān)鍵的元素，實際上，這可能幫助了交互設(shè)計領(lǐng)域的形成。唐諾曼在他的書《日常生活的設(shè)計》中提到了其中的很多概念。以下只是那些概念中的一部分：1）心理模型是指的在用戶心中的一幅景像，使他們產(chǎn)生了對特定的交互或系統(tǒng)的期望。通過學(xué)習(xí)用戶的心智模型，交互設(shè)計師可以創(chuàng)建出使用戶有直觀感覺的系統(tǒng)。2）界面隱喻是指利用已知的行為來引導(dǎo)用戶產(chǎn)生新的行動。例如，大多數(shù)計算機(jī)上的垃圾桶圖標(biāo)都類似于現(xiàn)實中的垃圾桶，這是為了提醒用戶做出預(yù)期的行動。3）功能可見性是指界面元素不僅是為了達(dá)到功能而設(shè)計出來的，而且也是為了讓它們看起來像是可以達(dá)成功能而設(shè)計出來的。例如，按鈕看起來像一個可以按的物體，這就是一個功能可見性的設(shè)計，使得不熟悉按鈕的人仍能理解如何與之交互。5.人機(jī)界面指南這部分內(nèi)容其實有點不恰當(dāng)，實際上是沒有一整套完整的人機(jī)界面指南的。然而，創(chuàng)建人機(jī)界面指南背后的理念本身就是一種方法論。準(zhǔn)則是由主要的技術(shù)設(shè)計企業(yè)，包括蘋果和安卓、Java和微軟等構(gòu)建的。他們的目標(biāo)都是一樣的：用這些建議和推薦來提醒未來的設(shè)計師和開發(fā)者，這將幫助他們創(chuàng)建普遍意義上直觀的界面和程序。三、日常任務(wù)和可交付成果在整個開發(fā)過程中交互設(shè)計師是一名關(guān)鍵的球員。他或她從事的一系列的活動都是項目團(tuán)隊的關(guān)鍵。這些活動通常包括形成設(shè)計策略、將關(guān)鍵交互做成線框圖，以及將所有交互建立為產(chǎn)品原型。1.設(shè)計策略雖然這個將會物的界限比較模糊，但有一點是肯定的：一個交互設(shè)計師需要知道自己在為誰設(shè)計，以及用戶的目標(biāo)是什么。通常情況下，這些信息會用戶研究員提供。然后，交互設(shè)計師在獨立或者受到團(tuán)隊中其他設(shè)計師的幫助的情況下，將會評估目標(biāo)并形成設(shè)計策略。好的設(shè)計策略將幫助團(tuán)隊成員對在哪些需要的地方應(yīng)該發(fā)生什么樣的交互有一個共同的理解，以方便用戶目標(biāo)。2.關(guān)鍵交互的線框圖交互設(shè)計師在用于激勵其設(shè)計的設(shè)計策略上有了好主意之后，就可以開始畫草圖，畫出那些可以促進(jìn)必要交互的界面。交互的妙門藏在細(xì)節(jié)中：在這個過程中，有一些專家會直接在紙板上素描，而有些則使用在線應(yīng)用程序來幫助他們，而有的則會使用兩者的組合。有一些專家會協(xié)同工作來創(chuàng)建這些界面，而有的則獨自創(chuàng)建。這一切都取決于交互設(shè)計師自己的特定工作流。3.原型根據(jù)項目的需要，交互設(shè)計師的下一個合乎邏輯的步驟可能涉及到創(chuàng)建原型。團(tuán)隊制作交互原型有許多不同的方法，比如html/css原型，或紙上原型，在這里，我們不會覆蓋廣泛的細(xì)節(jié)。4.保持流行性對一個現(xiàn)實中的交互設(shè)計師來說，最難的部分是適應(yīng)工業(yè)發(fā)展變化的速度。每一天，新的設(shè)計師都可能要在不同的方向上看待媒介。結(jié)果便是，用戶也會預(yù)期這些新類型的交互會出現(xiàn)在你的網(wǎng)站上。謹(jǐn)慎的交互設(shè)計師會響應(yīng)這種演變，不斷探索在線交互以及利用新技術(shù)，但是我們總是要記住正確的交互或技術(shù)是最好地滿足角色用戶的需要的那些，而不只是最新穎或最令人興奮的那些。交互設(shè)計師還通過在推特上跟隨交互設(shè)計的思想領(lǐng)袖（比如下列的著名設(shè)計師）并主動推動媒介本身的發(fā)展，以保持流行性。四、著名的設(shè)計師從左到右，從上到下分別是：ALANCOOPER，BILLSCOTT，BRADFROST，BRENDALAUREL，BRENDASANDERSON，DANSAFFER，DONNORMAN，KARENMCGRANE，KIMGOODWIN，MATMARQUIS，MIKEMONTEIRO，THERESANEIL，WHITNEYHESS譯者注：此處篇幅過長，因而對設(shè)計師作了聚合，可在原文中查看詳細(xì)個人說明。五、工具交互設(shè)計師使用許多不同的工具來完成他們的工作。無論是在一張餐巾紙上畫交互草圖，還是向客戶展示原型，他們的目標(biāo)都是一樣的：通過對話來溝通。交互設(shè)計師最需要的就是溝通。下面的列表里是一系列用于促進(jìn)對話的工具。記住，最終創(chuàng)建的Web界面，通常與面向用戶的（前端）技術(shù)完成的，比如CSS/HTML。1.

BalsamiqMockupsBalsamiq的界面簡單,使用手繪風(fēng)格元素和comicsans字體，使得制作交互線框圖的過程變得簡單，可以認(rèn)為它是一個在線版的紙上原型！2.

InvisionInVision是一個免費的網(wǎng)站和移動App的原型工具。InVision旨在通過結(jié)合Photoshop，Sketch等其他應(yīng)用促進(jìn)溝通。設(shè)計師可以上傳線框圖，并通過熱區(qū)來連接它們。客戶、利益相關(guān)者和他的同事設(shè)計可以直接添加評論，并有實時演示工具LiveShare。3.

OmnigroupOmnigraffle是OSX上的交互設(shè)計師可以利用的圖表軟件，用單調(diào)的審美創(chuàng)造的圖表軟件Omnigraffle更關(guān)注背后的交互設(shè)計而不是設(shè)計本身，同時其也具備許多優(yōu)秀的模擬功能。4.

Patternry沒有人愿意浪費時間重新發(fā)明輪子。良好的交互設(shè)計或代碼聚合在一起更能節(jié)省時間和精力,并確保設(shè)計的一致性。Patternry是一種允許團(tuán)隊交互設(shè)計師分享并將其設(shè)計和代碼資產(chǎn)存儲在一個中央位置的工具。5.

SketchSketch是一種設(shè)計工具（Mac），最好用于圖標(biāo)的中高級保真度模型，是一個AdobePhotoshop的一個輕量級替代。6.

AxureAxureRP可以說是市場上最好的交互設(shè)計工具。比Balsamiq擁有更強(qiáng)大的功能，內(nèi)置的協(xié)作和共享功能，并且能夠輕松地實現(xiàn)線框原型。缺點是，它可能提供了太多，這意味著它有一個緩慢的學(xué)習(xí)曲線。7.UxpinUXPin是一個協(xié)同設(shè)計平臺,支持低保真的線框圖和高保真的動畫原型。設(shè)計師使用Photoshop或Sketch制作的分層原型可以直接導(dǎo)入，然后從利益相關(guān)者處得到反饋。該工具還包括可用性測試和現(xiàn)場演示功能。六、協(xié)會和組織不管交互設(shè)計師是否屬于任何特定的組織，其仍然是一個交互設(shè)計者。不過，找到其他設(shè)計師的網(wǎng)絡(luò)是向他人學(xué)習(xí)的好方法。這些協(xié)會在美國都有，有一些則是國際性組織。1）IXDA－InteractionDesignAssociation交互設(shè)計協(xié)會，其提供了一個討論交互設(shè)計問題的在線論壇。2）AGIA－AmericanInstituteofGraphicArts美國平面藝術(shù)學(xué)院，組織中的平面設(shè)計師更經(jīng)常地為新媒體設(shè)計作品，交互設(shè)計在其中扮演了重要組成部分。七、書籍其實相關(guān)的交互設(shè)計書籍列表可以占掉好多頁。在這里，我們縮小成幾本標(biāo)志性的圖書的列表。如果你真的渴望擴(kuò)大你的圖書收藏，可以看看我們網(wǎng)站搜索用戶體驗的推薦書集：/book/從左到右依次是《交互設(shè)計：創(chuàng)建創(chuàng)新應(yīng)用和設(shè)備(第二版)》《設(shè)計數(shù)字時代：如何創(chuàng)建以人為本的產(chǎn)品和服務(wù)》《設(shè)計界面》《交互設(shè)計：超越人機(jī)交互》《日常生活的設(shè)計》\o"優(yōu)設(shè)"Home

/

\o"查看PS教程&設(shè)計文章中的全部文章"PS教程&設(shè)計文章

/

正文超實用！移動端界面中的版式設(shè)計原理(上)推薦:

\o"cyRotel"cyRotel

2016/01/04

in

PS教程&設(shè)計文章

\o"分享到微信"\o"分享到新浪微博"\o"分享到QQ空間"\o"分享到花瓣"\o"分享到騰訊微博"\o"分享到豆瓣網(wǎng)"\o"分享到人人網(wǎng)"\o"分享到有道云筆記"\o"分享到QQ好友"更多45justinlam：“我總覺得頁面不太好看但是我又說不出來”，“我不懂設(shè)計，但是我就是覺得不協(xié)調(diào)”，“你覺得這好看？你的審美要加強(qiáng)啊”這些聽著熟悉的話往往是產(chǎn)品和設(shè)計產(chǎn)生矛盾的開端。還有一種評價叫說不出哪里好也說不出哪里不好，相信很多人也有過感同身受的無奈。其實設(shè)計本身就是一門理性的學(xué)科，審美因人而異，只有言之有理的設(shè)計才能夠說服別人。當(dāng)設(shè)計師拿到產(chǎn)品的原型開始做設(shè)計時，如果只是單純的按照原型進(jìn)行而不考慮任何規(guī)則，那么很多時候就會產(chǎn)生一些不協(xié)調(diào)的結(jié)果。設(shè)計完之后產(chǎn)品不滿意，自己也不滿意。在UI設(shè)計中其實也存在大量的版式設(shè)計原理，如果產(chǎn)品和設(shè)計都能對版式設(shè)計有一定的了解，那么設(shè)計師拿到原型的時候，評審設(shè)計輸出稿的時候大家都能更好地理解對方的設(shè)計。以下我總結(jié)了幾種常見的版式設(shè)計原理，是工作當(dāng)中做出良好視覺效果的前提。1.信息的排布對任何信息進(jìn)行排布的時候，首先必須要掌握的是對齊/重復(fù)/親密/對比，貫穿設(shè)計的四大原則。對齊除了能建立一種清晰精巧的外觀，還能方便開發(fā)的實現(xiàn)。基于從左上至右下的閱讀習(xí)慣，移動端界面中內(nèi)容的排布通常使用左對齊和居中對齊，表單填寫的輸入項使用右對齊。設(shè)計和做其他事情一樣，也要有輕重緩急之分，不要讓用戶去找重點/需要注意的地方，應(yīng)該讓用戶流暢地接收到我們想要傳達(dá)的重要的信息。重復(fù)和對比是一套組合拳，讓設(shè)計中的視覺元素在整個設(shè)計中重復(fù)出現(xiàn)既能增加條理性也可以加強(qiáng)統(tǒng)一性，降低用戶認(rèn)知的難度。那么在需要突出重點的時候就可以使用對比的手法，例如圖片大小的不同或者顏色的不同表示強(qiáng)調(diào)，讓用戶直觀地感受到最重要的信息。在排布復(fù)雜信息的時候，如果沒有規(guī)則地排布那么文本的可讀性就會降低。組織信息可以根據(jù)親密性的原則，把彼此相關(guān)的信息靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個孤立的元素。這有助于減少混亂，為讀者提供清晰的結(jié)構(gòu)。在設(shè)計表達(dá)的時候，一定要考慮內(nèi)容的易讀性。適當(dāng)使用圖形可以增加易讀性和設(shè)計感，而且圖形的理解比文字更高效。那些用文字方式表現(xiàn)時顯得冗長的說明，一旦換成可視化的表現(xiàn)方式也會變得簡明清晰，可視化的圖形可以將說明/標(biāo)題/數(shù)值這種比較生硬的內(nèi)容，以比較柔和的方式呈現(xiàn)出來。2.圖片的使用App的頁面結(jié)構(gòu)和文本確定之后，就要開始安排圖標(biāo)/按鈕/圖片的安排了，這時頁面也就從單純文本的“閱讀”型結(jié)構(gòu)調(diào)整為“觀看”型結(jié)構(gòu)，對于頁面的易讀性以及頁面整體的效果會產(chǎn)生巨大的影響。頁面中圖片所占的比率叫做圖版率，通常情況下降低圖版率會給人一種寧靜典雅、高級的感覺。提升圖版率會有充滿活力，使畫面有富有感染力的效果。實際中也跟選取圖片的元素/色調(diào)/表達(dá)出來的情感有關(guān)系，合適的圖片也能散發(fā)出整個應(yīng)用的氣質(zhì)，直接傳達(dá)給人“高級”，“平民化”，“友好”等不同的感覺。在內(nèi)容比較少但是又想提高版面率的話可以采用一些色塊，或者抽象化模擬現(xiàn)實存在的物件，例如電影票，書本紙張，優(yōu)惠券，便簽等的效果，使界面更友好也降低空洞的感覺。通過這種方式也可以改變頁面所呈現(xiàn)出的視覺感受，只是這種方法最多改變頁面的色調(diào)/質(zhì)感，并不能改改變“閱讀”內(nèi)容的比例，這點是需要注意的。3.顏色的使用不同的顏色可以帶給用戶不同的感覺，這點應(yīng)該是常識。在移動端界面中通常需要選取主色，標(biāo)準(zhǔn)色，點晴色。移動端與網(wǎng)頁端稍微不同，主色雖然是決定了畫面風(fēng)格的色彩但是往往不會被大面積的使用。通常在導(dǎo)航欄/部分按鈕/icon/特殊頁面等地方出現(xiàn)，會有點晴，定調(diào)的作用。統(tǒng)一的主色調(diào)也能讓用戶找到品牌感的歸屬，例如網(wǎng)易紅/騰訊藍(lán)/京東紅/阿里橙等等。標(biāo)準(zhǔn)色指的是整套移動界面的色彩規(guī)范，確定文本/線段/圖標(biāo)/背景等等的顏色。點晴色通常會用在標(biāo)題文本/按鈕/icon等地方，通常起強(qiáng)調(diào)和引導(dǎo)閱讀的作用。主色在選擇上可能不止一個，點睛色通常也由兩三個顏色組成，標(biāo)準(zhǔn)色更是一套從強(qiáng)到弱的標(biāo)準(zhǔn)群，那么在點晴色與主色，主色與主色之間的選擇上便有不同的方法。第一種是鄰近色配色(色相環(huán)上鄰近的顏色)，這種方法比較常用因為色相柔和過渡也非常自然。第二種是同色系配色(色相一致，飽和度不同)，主色和點晴色都在統(tǒng)一的色相上，給用戶一種一致化的感受。第三種是點亮色配色，主色用相對沉穩(wěn)的顏色，點晴色采用一個高亮的顏色，起帶動頁面氣氛，強(qiáng)調(diào)重點的作用。第四種是中性色配色，用一些中性的色彩為基調(diào)搭配，弱化干擾。這種方法在移動端是最常見的方法。還有一些漸變，明暗調(diào)對比，多色搭配等方法在這里不一一說明，你感受一下。未完待續(xù)。內(nèi)容預(yù)告：4.留白的藝術(shù)

5.視覺心理的靈活運用

6.沒有設(shè)計的設(shè)計【為了這8個指南也得存書簽！】平面設(shè)計：《超贊！設(shè)計師完全自學(xué)指南》交互設(shè)計