交互設(shè)計分享（一）
發(fā)布時間：2024-10-07 點擊：165
如果你看了很多優(yōu)秀的設(shè)計，但是自己卻仍然還覺得有所欠缺。來看看作者梳理的掌握交互設(shè)計的方法吧。
最近兩個月給公司的伙伴們做交互設(shè)計的分享，這是第一期分享的內(nèi)容。在這次分享中，我認真梳理了交互設(shè)計師掌握和精通這門技藝的方法。我認為，如果想成為拔尖的設(shè)計師，只有這條路可走。
什么是交互設(shè)計
用戶界面有兩部分的設(shè)計：交互設(shè)計和視覺設(shè)計。在下圖中，左邊和右邊分別是微信的交互設(shè)計和視覺設(shè)計。
交互設(shè)計 vs. 視覺設(shè)計
交互設(shè)計的產(chǎn)出物是可交互的低保真原型，設(shè)計內(nèi)容包括：
信息架構(gòu)； 頁面布局； 流程跳轉(zhuǎn)；
1. 信息架構(gòu)
信息架構(gòu)，是為了讓用戶在使用app、軟件、網(wǎng)頁的時候，能夠快速找到自己需要的信息、資料、功能，并且在使用的過程不會迷路。它有層級、有邏輯順序、要能反映信息（功能）的重要程度和關(guān)系。
信息架構(gòu)的組成部分：
組織系統(tǒng)：關(guān)注如何組織信息。比如小說，按篇幅，可以分為短篇、中篇、長篇；按年代，可以分為：古代、近代、現(xiàn)代、當代；按題材，可以分為武俠、推理、歷史、言情等等……從哪個角度來組織、到底多少層合適，需要設(shè)計者的判斷和權(quán)衡。比如當當網(wǎng)的商品組織方式：
組織系統(tǒng)
導航系統(tǒng)：協(xié)助用戶了解他在哪個位置，以及可以到何處去。比如微信的功能導航：
微信功能導航
豆瓣功能導航
搜索系統(tǒng)：關(guān)注用戶如何搜索信息。比如淘寶的搜索：
搜索系統(tǒng)
標簽系統(tǒng)：關(guān)注如何表示信息。我們可以把標簽系統(tǒng)理解為如何為信息和它的組織方式命名。比如我們剛才提到的小說按題材，可以分為武俠、推理、歷史、言情等等，其中的武俠、推理這些就是信息的標簽。
一些大型網(wǎng)站，比如淘寶、當當、京東等，設(shè)有專門的信息架構(gòu)師角色。而大部分的app、應(yīng)用軟件中，信息架構(gòu)由交互設(shè)計師設(shè)計。
2. 頁面布局
頁面布局的工作，就是確定每個頁面有哪些元素，它們位置、順序、分組，要突出什么元素，弱化或隱藏什么元素。
在設(shè)計布局時，有一個要特別注意的事情，就是盡可能減少父頁（所有布局抽象出來的模板）。比如說360安全路由的app，它的父頁如下，所有頁面布局，都是由這四個模板變化而來。這樣的軟件，用戶在使用時，會感覺統(tǒng)一、易學。
360安全路由
3. 流程跳轉(zhuǎn)
設(shè)計頁面之間的跳轉(zhuǎn)邏輯。通過鏈接、按鈕還是手勢；單擊還是雙擊；上劃還是下劃……我們在做可交互的原型時，要盡可能貼近軟件的最終效果。
交互和視覺的分工
交互設(shè)計師在設(shè)計頁面布局時，為了突出主次，會設(shè)計字體大小、間距、顏色等內(nèi)容，但這不是最終效果。最終的字體、顏色、圖片、圖標、大小、間距等，由視覺設(shè)計師確定。
交互設(shè)計師在設(shè)計流程跳轉(zhuǎn)時，會設(shè)計過場動畫，但這同樣不是最終效果。最終效果由視覺設(shè)計師（或動畫設(shè)計師）確定。
區(qū)分交互和視覺有一種快速判斷法，那就是web工程師平時寫的css里的屬性和參數(shù)，都屬于視覺設(shè)計的范疇。所以很多公司會多招幾個ui設(shè)計師，他們不僅僅負責視覺設(shè)計，還負責輸出css樣式表。
交互和視覺對人的要求
交互設(shè)計和視覺設(shè)計對人的要求不同，并且往往越往深入做，這兩者所需的性格、背景和思維方式差別越大。可以簡單地理解，交互設(shè)計是靠理性和邏輯驅(qū)動，而視覺設(shè)計是靠感性驅(qū)動。這也是為什么目前的交互設(shè)計師中理工科院的學生占了很大比例。業(yè)界也有很多開發(fā)工程師轉(zhuǎn)做交互設(shè)計的成功案例。所以做開發(fā)，學交互設(shè)計有優(yōu)勢。
交互和視覺高度交叉
我上面說，交互設(shè)計和視覺設(shè)計的分工，也說它們對人的要求不同。這可能會讓大家誤以為，這兩個角色的工作比較獨立，各自負責各自的內(nèi)容。交互不用管視覺，視覺不用管交互。
但這是不對的。交互和視覺，是高度交叉的兩個領(lǐng)域，無法簡單的分隔。
首先，交互設(shè)計師一定要有很好的視覺設(shè)計的感覺，因為一個頁面布局的好壞，會直接影響視覺的發(fā)揮。如果交互設(shè)計師導入一個沒主次，結(jié)構(gòu)很糟糕的設(shè)計給視覺設(shè)計師，他只有兩個選擇，一、降低自己的水平，隨便做一個；二、自己動手，重新設(shè)計一個。
其次，交互設(shè)計會影響視覺設(shè)計，視覺設(shè)計也有可能反過來，讓交互設(shè)計做修改。舉個例子，我們最近正在做的一個功能。
最早的交互設(shè)計里沒有列表選擇功能。后來在視覺設(shè)計過程中發(fā)現(xiàn)，我們的窗口大小，如果要保證視頻旁邊不出現(xiàn)黑邊，可能會留很大得空隙，如果布局滿了，又會導致視頻出現(xiàn)黑邊。一種方式，是把底下的點贊、分享、評論移上來，放到右邊，但這樣的排版怎么也不會滿意。況且我們這個頁面最核心的目的，是讓用戶看視頻。后來我們想了一下，增加了選集的功能，雖然這樣增加了開發(fā)工作量，但是對用戶來說，在這頁面可以直接導航到其它視頻，使用體驗更好，也解決了我們看視頻黑邊的問題。
說這些想要表達的是，我們要時刻注意，自己是在同視覺設(shè)計師配合完成一個作品。我們設(shè)計的好壞，會影響他的工作。所以在介入真實項目前，我們要通過大量的學習 練習，達到準設(shè)計師水平。
如何學習交互設(shè)計
1.看
交互設(shè)計師需要有好的視覺設(shè)計的感覺，需要有基本的審美能力。如何提升審美能力？只有一種方法，看。
我們要看大量優(yōu)秀的設(shè)計作品。現(xiàn)在有很多平臺可以很容易的找到世界上頂尖的設(shè)計師們設(shè)計的東西。比如behance、pinterest、fwa、dribbble等等……如果嫌國外的訪問太慢，也可以選擇國內(nèi)的，比如花瓣。
不要只看軟件界面，也看看其它領(lǐng)域的設(shè)計作品，好的產(chǎn)品、好的建筑、好的電影海報、好的攝影作品、好的藝術(shù)作品。看到喜歡的，把它們收集起來。
看了后，該怎么判斷自己的審美能力有提升呢？
隔幾個月去看看自己前幾個月喜歡的東西，當時覺得不錯，現(xiàn)在是不是覺得丑的掉渣？如果是的話，審美水平就在進步。
還有一種辦法，把自己平時喜歡的、會分享的設(shè)計，同設(shè)計領(lǐng)域的人溝通，聽聽他們的意見。一個專業(yè)的設(shè)計師，不會只說，這個好，那個不好，他們說為什么好，為什么不好，比如「這個界面主次不夠突出，重點元素沒有強調(diào)出來」、「沒有引導用戶的視線」等等等等……
2.用
我們在dribble、在花瓣，看的都是單個頁面。交互設(shè)計不只是設(shè)計一個個頁面，它還得把頁面串起來。所以看單個頁面還不行，我們要用、要體驗實際的產(chǎn)品，看看別人是怎么把一個個頁面組合成產(chǎn)品，頁面和頁面間的過場是怎樣的。
怎么用呢？很簡單，我們每個人都有手機或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. 想
認知科學研究發(fā)現(xiàn)：
世界上最好的象棋選手之間的差距，其實并不是他們思考能力的差異，或者是否能走出一招妙棋，而是他們熟悉的棋譜的多寡。
做交互設(shè)計也是這樣，決定交互設(shè)計師的設(shè)計水平，是在做設(shè)計時，設(shè)計師能夠想起多少個相似的的設(shè)計，并借鑒、組合、改進它們，成為自己的設(shè)計。
我們看了那么多優(yōu)秀的設(shè)計，我們用了那么多優(yōu)秀的產(chǎn)品，怎么樣才能在需要的時候記起它們呢？認知科學給出的答案很簡單，去想，去思考。
一樣東西進入我們的大腦，如果我們沒有思考過，大腦會認為這個東西沒用，就丟掉它，不存下來。但如果我們仔細思考過它，大腦就會自己做個判斷，認為以后有可能要再度想起它，就把它存下來。
所以不只要看，要用，還要想。
比如我們看到這個頁面，要想：
1.信息架構(gòu)是怎樣的？有沒有層級，有沒有邏輯順序？能不能反映它們的重要程度和關(guān)系？ 2.頁面布局是怎樣的？它們位置、順序是怎樣的？它是怎么分塊的？它是怎么突出主要任務(wù)的？ 3.有沒有其它設(shè)計亮點，比如好的隱喻，比如視覺怎么營造氛圍。
把所有思考結(jié)果記錄下來。記得多了，形成自己的觀點后寫成文章，同其他人分享。
4. 做
一開始模仿，在這個過程中，學習工具的使用，把它用熟。
為什么要先把工具用熟呢？道理很簡單，如果工具還不熟悉，大腦會把主要精力都耗費在工具的使用上，根本騰不出空間來思考設(shè)計的事。
當工具使用沒有任何問題后，做真實的產(chǎn)品設(shè)計。
我們可以直接在項目中實踐，但大部分人應(yīng)該沒這個條件，那怎么做？
重新設(shè)計現(xiàn)有的產(chǎn)品。比如我們可以重新設(shè)計微信，重新設(shè)計簡書；我們覺得某個軟件設(shè)計的不夠好，重新設(shè)計它。通過這種訓練方式，提升設(shè)計技能，達到準設(shè)計師的水平。
那么，一個產(chǎn)品（或功能）的設(shè)計流程，是怎樣的呢？
1.明確使用場景
我們經(jīng)常看到一個被分解后的功能指標項如下：
我要一個遠程控制的功能。老師可以控制某個學生的電腦。
如果按照這個需求做的話，在產(chǎn)品首頁加一個遠程控制的按鈕，點一下，老師可以選擇某個學生進行控制，這個功能就設(shè)計好了。
但是實際上老師是怎么用的呢？我們和產(chǎn)品經(jīng)理（或用戶）溝通，會發(fā)現(xiàn)老
服務(wù)器日常維護內(nèi)容
剛才顯示正常以后再訪問就顯示無法訪問了
那么SEO優(yōu)化中的圖片優(yōu)化指什么
wegame啟動assistant失敗怎么辦 wegame啟動assistant失敗如何修復
阿里云服務(wù)器怎么最便宜
生活中常見的人工智能應(yīng)用
超云服務(wù)器配置raid
Photoshop怎么調(diào)整圖片的對比度 教你調(diào)整圖片對比度的方法
最近兩個月給公司的伙伴們做交互設(shè)計的分享，這是第一期分享的內(nèi)容。在這次分享中，我認真梳理了交互設(shè)計師掌握和精通這門技藝的方法。我認為，如果想成為拔尖的設(shè)計師，只有這條路可走。
什么是交互設(shè)計
用戶界面有兩部分的設(shè)計：交互設(shè)計和視覺設(shè)計。在下圖中，左邊和右邊分別是微信的交互設(shè)計和視覺設(shè)計。
交互設(shè)計 vs. 視覺設(shè)計
交互設(shè)計的產(chǎn)出物是可交互的低保真原型，設(shè)計內(nèi)容包括：
信息架構(gòu)； 頁面布局； 流程跳轉(zhuǎn)；
1. 信息架構(gòu)
信息架構(gòu)，是為了讓用戶在使用app、軟件、網(wǎng)頁的時候，能夠快速找到自己需要的信息、資料、功能，并且在使用的過程不會迷路。它有層級、有邏輯順序、要能反映信息（功能）的重要程度和關(guān)系。
信息架構(gòu)的組成部分：
組織系統(tǒng)：關(guān)注如何組織信息。比如小說，按篇幅，可以分為短篇、中篇、長篇；按年代，可以分為：古代、近代、現(xiàn)代、當代；按題材，可以分為武俠、推理、歷史、言情等等……從哪個角度來組織、到底多少層合適，需要設(shè)計者的判斷和權(quán)衡。比如當當網(wǎng)的商品組織方式：
組織系統(tǒng)
導航系統(tǒng)：協(xié)助用戶了解他在哪個位置，以及可以到何處去。比如微信的功能導航：
微信功能導航
豆瓣功能導航
搜索系統(tǒng)：關(guān)注用戶如何搜索信息。比如淘寶的搜索：
搜索系統(tǒng)
標簽系統(tǒng)：關(guān)注如何表示信息。我們可以把標簽系統(tǒng)理解為如何為信息和它的組織方式命名。比如我們剛才提到的小說按題材，可以分為武俠、推理、歷史、言情等等，其中的武俠、推理這些就是信息的標簽。
一些大型網(wǎng)站，比如淘寶、當當、京東等，設(shè)有專門的信息架構(gòu)師角色。而大部分的app、應(yīng)用軟件中，信息架構(gòu)由交互設(shè)計師設(shè)計。
2. 頁面布局
頁面布局的工作，就是確定每個頁面有哪些元素，它們位置、順序、分組，要突出什么元素，弱化或隱藏什么元素。
在設(shè)計布局時，有一個要特別注意的事情，就是盡可能減少父頁（所有布局抽象出來的模板）。比如說360安全路由的app，它的父頁如下，所有頁面布局，都是由這四個模板變化而來。這樣的軟件，用戶在使用時，會感覺統(tǒng)一、易學。
360安全路由
3. 流程跳轉(zhuǎn)
設(shè)計頁面之間的跳轉(zhuǎn)邏輯。通過鏈接、按鈕還是手勢；單擊還是雙擊；上劃還是下劃……我們在做可交互的原型時，要盡可能貼近軟件的最終效果。
交互和視覺的分工
交互設(shè)計師在設(shè)計頁面布局時，為了突出主次，會設(shè)計字體大小、間距、顏色等內(nèi)容，但這不是最終效果。最終的字體、顏色、圖片、圖標、大小、間距等，由視覺設(shè)計師確定。
交互設(shè)計師在設(shè)計流程跳轉(zhuǎn)時，會設(shè)計過場動畫，但這同樣不是最終效果。最終效果由視覺設(shè)計師（或動畫設(shè)計師）確定。
區(qū)分交互和視覺有一種快速判斷法，那就是web工程師平時寫的css里的屬性和參數(shù)，都屬于視覺設(shè)計的范疇。所以很多公司會多招幾個ui設(shè)計師，他們不僅僅負責視覺設(shè)計，還負責輸出css樣式表。
交互和視覺對人的要求
交互設(shè)計和視覺設(shè)計對人的要求不同，并且往往越往深入做，這兩者所需的性格、背景和思維方式差別越大。可以簡單地理解，交互設(shè)計是靠理性和邏輯驅(qū)動，而視覺設(shè)計是靠感性驅(qū)動。這也是為什么目前的交互設(shè)計師中理工科院的學生占了很大比例。業(yè)界也有很多開發(fā)工程師轉(zhuǎn)做交互設(shè)計的成功案例。所以做開發(fā)，學交互設(shè)計有優(yōu)勢。
交互和視覺高度交叉
我上面說，交互設(shè)計和視覺設(shè)計的分工，也說它們對人的要求不同。這可能會讓大家誤以為，這兩個角色的工作比較獨立，各自負責各自的內(nèi)容。交互不用管視覺，視覺不用管交互。
但這是不對的。交互和視覺，是高度交叉的兩個領(lǐng)域，無法簡單的分隔。
首先，交互設(shè)計師一定要有很好的視覺設(shè)計的感覺，因為一個頁面布局的好壞，會直接影響視覺的發(fā)揮。如果交互設(shè)計師導入一個沒主次，結(jié)構(gòu)很糟糕的設(shè)計給視覺設(shè)計師，他只有兩個選擇，一、降低自己的水平，隨便做一個；二、自己動手，重新設(shè)計一個。
其次，交互設(shè)計會影響視覺設(shè)計，視覺設(shè)計也有可能反過來，讓交互設(shè)計做修改。舉個例子，我們最近正在做的一個功能。
最早的交互設(shè)計里沒有列表選擇功能。后來在視覺設(shè)計過程中發(fā)現(xiàn)，我們的窗口大小，如果要保證視頻旁邊不出現(xiàn)黑邊，可能會留很大得空隙，如果布局滿了，又會導致視頻出現(xiàn)黑邊。一種方式，是把底下的點贊、分享、評論移上來，放到右邊，但這樣的排版怎么也不會滿意。況且我們這個頁面最核心的目的，是讓用戶看視頻。后來我們想了一下，增加了選集的功能，雖然這樣增加了開發(fā)工作量，但是對用戶來說，在這頁面可以直接導航到其它視頻，使用體驗更好，也解決了我們看視頻黑邊的問題。
說這些想要表達的是，我們要時刻注意，自己是在同視覺設(shè)計師配合完成一個作品。我們設(shè)計的好壞，會影響他的工作。所以在介入真實項目前，我們要通過大量的學習 練習，達到準設(shè)計師水平。
如何學習交互設(shè)計
1.看
交互設(shè)計師需要有好的視覺設(shè)計的感覺，需要有基本的審美能力。如何提升審美能力？只有一種方法，看。
我們要看大量優(yōu)秀的設(shè)計作品。現(xiàn)在有很多平臺可以很容易的找到世界上頂尖的設(shè)計師們設(shè)計的東西。比如behance、pinterest、fwa、dribbble等等……如果嫌國外的訪問太慢，也可以選擇國內(nèi)的，比如花瓣。
不要只看軟件界面，也看看其它領(lǐng)域的設(shè)計作品，好的產(chǎn)品、好的建筑、好的電影海報、好的攝影作品、好的藝術(shù)作品。看到喜歡的，把它們收集起來。
看了后，該怎么判斷自己的審美能力有提升呢？
隔幾個月去看看自己前幾個月喜歡的東西，當時覺得不錯，現(xiàn)在是不是覺得丑的掉渣？如果是的話，審美水平就在進步。
還有一種辦法，把自己平時喜歡的、會分享的設(shè)計，同設(shè)計領(lǐng)域的人溝通，聽聽他們的意見。一個專業(yè)的設(shè)計師，不會只說，這個好，那個不好，他們說為什么好，為什么不好，比如「這個界面主次不夠突出，重點元素沒有強調(diào)出來」、「沒有引導用戶的視線」等等等等……
2.用
我們在dribble、在花瓣，看的都是單個頁面。交互設(shè)計不只是設(shè)計一個個頁面，它還得把頁面串起來。所以看單個頁面還不行，我們要用、要體驗實際的產(chǎn)品，看看別人是怎么把一個個頁面組合成產(chǎn)品，頁面和頁面間的過場是怎樣的。
怎么用呢？很簡單，我們每個人都有手機或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. 想
認知科學研究發(fā)現(xiàn)：
世界上最好的象棋選手之間的差距，其實并不是他們思考能力的差異，或者是否能走出一招妙棋，而是他們熟悉的棋譜的多寡。
做交互設(shè)計也是這樣，決定交互設(shè)計師的設(shè)計水平，是在做設(shè)計時，設(shè)計師能夠想起多少個相似的的設(shè)計，并借鑒、組合、改進它們，成為自己的設(shè)計。
我們看了那么多優(yōu)秀的設(shè)計，我們用了那么多優(yōu)秀的產(chǎn)品，怎么樣才能在需要的時候記起它們呢？認知科學給出的答案很簡單，去想，去思考。
一樣東西進入我們的大腦，如果我們沒有思考過，大腦會認為這個東西沒用，就丟掉它，不存下來。但如果我們仔細思考過它，大腦就會自己做個判斷，認為以后有可能要再度想起它，就把它存下來。
所以不只要看，要用，還要想。
比如我們看到這個頁面，要想：
1.信息架構(gòu)是怎樣的？有沒有層級，有沒有邏輯順序？能不能反映它們的重要程度和關(guān)系？ 2.頁面布局是怎樣的？它們位置、順序是怎樣的？它是怎么分塊的？它是怎么突出主要任務(wù)的？ 3.有沒有其它設(shè)計亮點，比如好的隱喻，比如視覺怎么營造氛圍。
把所有思考結(jié)果記錄下來。記得多了，形成自己的觀點后寫成文章，同其他人分享。
4. 做
一開始模仿，在這個過程中，學習工具的使用，把它用熟。
為什么要先把工具用熟呢？道理很簡單，如果工具還不熟悉，大腦會把主要精力都耗費在工具的使用上，根本騰不出空間來思考設(shè)計的事。
當工具使用沒有任何問題后，做真實的產(chǎn)品設(shè)計。
我們可以直接在項目中實踐，但大部分人應(yīng)該沒這個條件，那怎么做？
重新設(shè)計現(xiàn)有的產(chǎn)品。比如我們可以重新設(shè)計微信，重新設(shè)計簡書；我們覺得某個軟件設(shè)計的不夠好，重新設(shè)計它。通過這種訓練方式，提升設(shè)計技能，達到準設(shè)計師的水平。
那么，一個產(chǎn)品（或功能）的設(shè)計流程，是怎樣的呢？
1.明確使用場景
我們經(jīng)常看到一個被分解后的功能指標項如下：
我要一個遠程控制的功能。老師可以控制某個學生的電腦。
如果按照這個需求做的話，在產(chǎn)品首頁加一個遠程控制的按鈕，點一下，老師可以選擇某個學生進行控制，這個功能就設(shè)計好了。
但是實際上老師是怎么用的呢？我們和產(chǎn)品經(jīng)理（或用戶）溝通，會發(fā)現(xiàn)老
服務(wù)器日常維護內(nèi)容
剛才顯示正常以后再訪問就顯示無法訪問了
那么SEO優(yōu)化中的圖片優(yōu)化指什么
wegame啟動assistant失敗怎么辦 wegame啟動assistant失敗如何修復
阿里云服務(wù)器怎么最便宜
生活中常見的人工智能應(yīng)用
超云服務(wù)器配置raid
Photoshop怎么調(diào)整圖片的對比度 教你調(diào)整圖片對比度的方法