編者按：很多同學(xué)不清楚交互設(shè)計(jì)師是做什么的，也不知道如何評(píng)價(jià)一個(gè)App 的交互，不過(guò)看完這篇你就懂啦。

一、交互設(shè)計(jì)師的價(jià)值

1. 職能價(jià)值

將需求轉(zhuǎn)化為解決方案的能力（將模糊抽象的需求轉(zhuǎn)化成清晰具體的可視化解決方案）。

這個(gè)價(jià)值是最基本的專業(yè)價(jià)值，但你千萬(wàn)不要覺得你做的僅僅是用軟件畫幾個(gè)頁(yè)面而已。

例如你接到一個(gè)掃碼申請(qǐng)加入群聊的需求，你的任務(wù)不只是將申請(qǐng)加入的頁(yè)面畫出來(lái)，而是要考慮整個(gè)用戶場(chǎng)景，就比如用戶申請(qǐng)入群后，如果審批人沒有拒絕，也沒有同意，相當(dāng)于服務(wù)器沒有接收到任何指令，那申請(qǐng)的頁(yè)面怎么反饋呢，這些都是要考慮進(jìn)去的。

所有交互設(shè)計(jì)師要提供的是一整套解決方案，其中要考慮正向、反向、閉環(huán)等各種場(chǎng)景。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

近期，我們對(duì)微云WEB端進(jìn)行了一次“簡(jiǎn)單”的改版。這篇文章簡(jiǎn)要記錄了改版過(guò)程中的一些思考。

為什么要改版

微云WEB端與移動(dòng)端體驗(yàn)不一致。移動(dòng)互聯(lián)網(wǎng)背景下，項(xiàng)目團(tuán)隊(duì)把多數(shù)資源都分配給了移動(dòng)端的研發(fā)，桌面端的功能和體驗(yàn)得不到及時(shí)的跟進(jìn)，導(dǎo)致用戶在兩個(gè)平臺(tái)上的體驗(yàn)存在很大的落差。

微云WEB端的設(shè)計(jì)較為陳舊。蘋果iOS的快速發(fā)展使得整個(gè)UI設(shè)計(jì)行業(yè)日新月異，設(shè)計(jì)理念不斷進(jìn)化向前，微云WEB端的設(shè)計(jì)已經(jīng)多年未更新，早已經(jīng)不起當(dāng)下設(shè)計(jì)原則的檢驗(yàn)。

改版前的思考

兩端的體驗(yàn)對(duì)齊需要解決很多矛盾。想要將WEB端的體驗(yàn)與移動(dòng)端統(tǒng)一，并沒有想象中的那么簡(jiǎn)單。聽起來(lái)好像只要把交互框架和視覺風(fēng)格直接照搬過(guò)來(lái)就好了。但實(shí)際上要對(duì)齊的是兩種使用場(chǎng)景的體驗(yàn)，這中間要調(diào)和的是小屏幕和大屏幕的矛盾，觸摸操作和鍵鼠操作的矛盾，兩種不同概念模式和心智模型的矛盾。

新的設(shè)計(jì)除了符合潮流，還要更具前瞻性 。想要做出可持續(xù)的設(shè)計(jì)，首先要明確設(shè)計(jì)潮流的走向，從擬物到扁平，從形式到內(nèi)容，從工具化到情感化，設(shè)計(jì)潮流的走向一直沒有變，在以人為中心的前提下，越來(lái)越注重用戶更深層的需求。

項(xiàng)目團(tuán)隊(duì)在WEB端的資源投入注定了設(shè)計(jì)更新迭代的頻率會(huì)很低。想要改版后的設(shè)計(jì)能夠長(zhǎng)久地支撐產(chǎn)品的發(fā)展，需要設(shè)計(jì)師把眼光放遠(yuǎn)，通過(guò)了解產(chǎn)品未來(lái)發(fā)展方向，做出更有前瞻性的設(shè)計(jì)。

求同存異的兩端統(tǒng)一

品牌統(tǒng)一性

在設(shè)計(jì)一款產(chǎn)品不同平臺(tái)客戶端的時(shí)候，首先要保證品牌的統(tǒng)一性。Logo、字體、品牌色、品牌調(diào)性甚至是文案的措辭規(guī)范都是需要嚴(yán)格保持一致的。保證品牌的統(tǒng)一性，有助于塑造品牌形象，增強(qiáng)用戶對(duì)產(chǎn)品的信任。

交互框架的對(duì)齊

我們先來(lái)對(duì)比一下移動(dòng)端和WEB端的主界面，單純從視覺上，已經(jīng)很難看出這是同一款產(chǎn)品。雖然在頁(yè)面結(jié)構(gòu)上兩端并不一致，但各自也都符合所在平臺(tái)用戶的操作習(xí)慣。

舊版WEB端雖然在視覺風(fēng)格上是扁平的，但是在信息層級(jí)上卻并不扁平，僅僅頂部的信息就有三層，過(guò)度的結(jié)構(gòu)化使整體頁(yè)面看起來(lái)過(guò)于復(fù)雜，用戶很難將注意力集中到內(nèi)容上。我們對(duì)WEB端頂部元素重新歸類整合，主要功能入口的布局和移動(dòng)端進(jìn)行了統(tǒng)一，通過(guò)引入移動(dòng)端的編輯態(tài)邏輯，常態(tài)下隱藏了所有的操作按鈕，將頂部區(qū)域的三層信息減少為一層，使其看起來(lái)更加清爽。

正如上面所說(shuō)，雖然我們追求多端統(tǒng)一的用戶體驗(yàn)，但手機(jī)和電腦的操作場(chǎng)景差別很大，用戶在不同的平臺(tái)已經(jīng)形成了不同的操作習(xí)慣。移動(dòng)端的多級(jí)導(dǎo)航設(shè)計(jì)是針對(duì)小屏幕局限性做出的一種妥協(xié)。在空間足夠大的WEB端，所有的二級(jí)導(dǎo)航都可以平鋪出來(lái)，這樣可以減少一個(gè)層級(jí)，因此，我們保留了原有的左導(dǎo)航結(jié)構(gòu)。通過(guò)對(duì)導(dǎo)航項(xiàng)歸類的方式與移動(dòng)端統(tǒng)一。

品牌調(diào)性和視覺風(fēng)格的對(duì)齊

在視覺風(fēng)格上，微云移動(dòng)端最具代表性的就是藍(lán)色的品牌色和線型的圖標(biāo)， 在嘗試設(shè)計(jì)方案的過(guò)程中我們發(fā)現(xiàn)，由于WEB端尺寸比較大，大面積使用藍(lán)色會(huì)加重用戶的視覺負(fù)擔(dān)，分散用戶對(duì)內(nèi)容信息的注意力，因此，在色彩方案上最終選擇了純白淺灰作為主色，藍(lán)色作為局部點(diǎn)綴，以下是改版后的一些核心頁(yè)面。

秉承著簡(jiǎn)潔、自然、易識(shí)別的原則，我們對(duì)所有的小圖標(biāo)進(jìn)行了優(yōu)化。簡(jiǎn)化了舊版本中的復(fù)雜表達(dá)，并對(duì)默認(rèn)態(tài)、hover態(tài)和選中態(tài)進(jìn)行了規(guī)范。

文檔類型圖標(biāo)也和手機(jī)端進(jìn)行了對(duì)齊，將文件格式進(jìn)行分類整合，同類型的格式采用同一個(gè)圖標(biāo)，將格式后綴在文件名中顯示出來(lái)。在不影響識(shí)別的前提下大大降低了設(shè)計(jì)成本。

內(nèi)容至上的前瞻性設(shè)計(jì)

全新的縮略圖模式

內(nèi)容至上是當(dāng)今設(shè)計(jì)的發(fā)展趨勢(shì)之一，結(jié)合微云未來(lái)的重點(diǎn)方向——辦公體驗(yàn)，我們進(jìn)行了一些對(duì)內(nèi)容的深入思考。

在網(wǎng)盤的使用場(chǎng)景中，什么才是用戶關(guān)注的內(nèi)容？早期的文件管理產(chǎn)品把文件圖標(biāo)、文件名定義為內(nèi)容，文件被包裝成一個(gè)個(gè)方塊，或是一行行的列表，文件間的差異只靠文字來(lái)體現(xiàn)。面對(duì)這樣的界面，用戶對(duì)文件的識(shí)別是十分低效的。這也是為什么在如今的網(wǎng)盤場(chǎng)景中，圖片是最容易識(shí)別的，因?yàn)樗龅搅宋募旧韮?nèi)容的外顯。

在面對(duì)一個(gè)一個(gè)被包裝的文件時(shí)，用戶容易被觸發(fā)的行為局限于整理、刪除等基礎(chǔ)操作，只有在能夠看到文件本身內(nèi)容的時(shí)候，才更容易觸發(fā)編輯、分享、共享協(xié)作等更加沉浸式和更具社交性的操作。這就好比你走進(jìn)一個(gè)倉(cāng)庫(kù)看到貨架上的一個(gè)個(gè)箱子，你會(huì)想要把他們分類、擺放得更整齊。但是當(dāng)你走進(jìn)一家商店，看到貨架上琳瑯滿目的商品時(shí)，你才會(huì)有挑選、對(duì)比和購(gòu)買的沖動(dòng)。

秉承著這個(gè)理念，我們反觀圖片之外的其他文件類型，道理是相同的；因此，我們?cè)诟陌嬷幸肓巳碌目s略圖模式，在新的縮略圖模式下，單個(gè)文件的可視區(qū)域被放大，用來(lái)承載文件本身的內(nèi)容。雖然一屏可以展示的文件數(shù)減少了，但展示出的有效信息是大大增加的，除了讓每個(gè)文件在視覺上有了獨(dú)特性，提高了檢索效率，也更容易觸發(fā)用戶更多的后續(xù)行為。這對(duì)于產(chǎn)品本身的價(jià)值相信大家都懂。

技術(shù)過(guò)渡時(shí)期的體驗(yàn)補(bǔ)償

理想很豐滿，現(xiàn)實(shí)很骨感，讓更多的文件內(nèi)容外顯在技術(shù)上必然要走一段路。在技術(shù)問(wèn)題解決的過(guò)程中需要設(shè)計(jì)對(duì)體驗(yàn)進(jìn)行一些彌補(bǔ)，在縮略圖的文檔圖標(biāo)的設(shè)計(jì)中，我們盡可能的把文件的內(nèi)容樣式圖形化；同時(shí)，為了保證識(shí)別性，那些圖標(biāo)比內(nèi)容形式更具特征的文件，保留了圖標(biāo)設(shè)計(jì)的形式。

寫在最后

微云一直致力于為用戶提供更更自然的使用體驗(yàn)，無(wú)論在功能上還是在設(shè)計(jì)上，我們都秉承著以用戶為中心的原則，不斷打磨每個(gè)細(xì)節(jié)。WEB改版也是如此，這一期改版我們對(duì)WEB端的框架和方向進(jìn)行了調(diào)整，在接下來(lái)的二期、三期.....我們會(huì)不斷深入到各個(gè)模塊，進(jìn)一步提升WEB端的用戶體驗(yàn)。在這個(gè)對(duì)于個(gè)人網(wǎng)盤來(lái)說(shuō)最壞的時(shí)期，微云會(huì)長(zhǎng)久的發(fā)展下去，我們不會(huì)停止前進(jìn)的腳步，更多酷炫的新功能新體驗(yàn)已經(jīng)在路上。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

在有限的界面尺寸里，給予用戶無(wú)限操作可能

股票中行情內(nèi)容是最多的，其內(nèi)容展現(xiàn)的難度系數(shù)相當(dāng)大，所以它的交互設(shè)計(jì)也十分棘手。

在一個(gè)界面中，僅通過(guò)點(diǎn)擊方式無(wú)法承載股票行情的諸多功能點(diǎn)。要想界面簡(jiǎn)潔、突出重點(diǎn)就必須把相對(duì)次要的功能隱藏起來(lái)。在行情界面設(shè)計(jì)過(guò)程中遇到的主要問(wèn)題是哪些東西該顯示，哪些東西隱藏，隱藏后如何讓用戶發(fā)現(xiàn)，怎樣的顯示方式更容易被用戶接受等等。

編者按：今天這篇文章，是由騰訊高級(jí)交互設(shè)計(jì)師@C7210 向同學(xué)們征集問(wèn)題后作出的回答，涉及交互設(shè)計(jì)、行業(yè)趨勢(shì)、職場(chǎng)、工具推薦等等，都是大家平時(shí)特別關(guān)心的，趕緊來(lái)收。

歡迎關(guān)注作者（高級(jí)交互設(shè)計(jì)師、貓奴、吉他手、鼓手、老狗、單身，現(xiàn)就職于騰訊ISUX）的微信公眾號(hào)：Beforweb

提問(wèn)

來(lái)自@X丶field：請(qǐng)問(wèn)對(duì)于現(xiàn)在視覺和交互逐漸融合的UX/Product Designer崗位有什么看法？

C 回復(fù)：

好問(wèn)題，也是我個(gè)人以及一些朋友正在親身面對(duì)、體會(huì)和見證的所謂“行業(yè)趨勢(shì)”。

首先排除全能型個(gè)人以一當(dāng)十的情況，單就通常意義上的團(tuán)隊(duì)協(xié)作的形式而言，目前我所能看到的“融合”分為兩類：

第一類：交互設(shè)計(jì)師與視覺設(shè)計(jì)師在產(chǎn)品層面統(tǒng)一認(rèn)知，理解并認(rèn)同商業(yè)意義及產(chǎn)品目標(biāo)，以此為基礎(chǔ)，在各施所長(zhǎng)、各盡其職的同時(shí)，更多的學(xué)習(xí)、了解彼此職能的目標(biāo)、焦點(diǎn)和工作方法，互相理解，融會(huì)貫通，減少分歧，降低成本，以最大化的合力完成產(chǎn)品設(shè)計(jì)工作。這種模式下，所謂“UX/產(chǎn)品設(shè)計(jì)師”是對(duì)兩種職能的統(tǒng)稱。本質(zhì)上講，這就是對(duì)于我們?nèi)缃袼煜さ膫鹘y(tǒng)團(tuán)隊(duì)模式的一種漸進(jìn)式提升。

晶晶：獨(dú)立項(xiàng)目中，交互設(shè)計(jì)師的工作可以分成四個(gè)核心環(huán)節(jié)：定義方向策略、確定解決方案、有理有據(jù)的進(jìn)行設(shè)計(jì)輸出、上線效果跟蹤。本期要和大家分享的是：方向策略。

長(zhǎng)期以來(lái)我就有對(duì)幾年來(lái)交互設(shè)計(jì)的心得進(jìn)行總結(jié)整理的想法。回到中國(guó)來(lái)親身體會(huì)到不少同行，主要是交互設(shè)計(jì)師和視覺設(shè)計(jì)師對(duì)于交互設(shè)計(jì)的困惑，以及其他行業(yè)對(duì)于交互設(shè)計(jì)的誤解和濫用。后來(lái)我在小范圍內(nèi)開設(shè)了一個(gè)關(guān)于交互設(shè)計(jì)的講座；現(xiàn)在把它整理成文，希望與同行切磋，共同進(jìn)步。

這篇文章是我?guī)啄陙?lái)在美國(guó)從事交互設(shè)計(jì)工作的一個(gè)經(jīng)驗(yàn)總結(jié)。當(dāng)時(shí)我們遵循以用戶為中心（User-Centered-Design, 簡(jiǎn)稱UCD）的設(shè)計(jì)原則，每一個(gè)項(xiàng)目都是不折不扣的按所有UCD的步驟進(jìn)行。下面總結(jié)的交互設(shè)計(jì)的方法，是從UCD的過(guò)程中提煉出來(lái)，也就是說(shuō)，同樣適用于任何非UCD的設(shè)計(jì)過(guò)程。

當(dāng)產(chǎn)品的用戶體驗(yàn)要求越來(lái)越高時(shí)，交互設(shè)計(jì)師的職責(zé)也越來(lái)越明晰了。交互設(shè)計(jì)師除了自身的基本功外，還需要有一個(gè)規(guī)范的流程，才能夠使工作完整有序。

自九月以來(lái)，摩拜單車和OFO讓“共享經(jīng)濟(jì)”概念著實(shí)火了一把。摩拜單車一年之內(nèi)火速搞定三輪融資，OFO在融資規(guī)模和速度上也旗鼓相當(dāng)。要說(shuō)更看好誰(shuí)的話，我想我會(huì)投摩拜一票，在我看來(lái)，摩拜似乎更能靜得下心來(lái)打磨他們的產(chǎn)品。相較于OFO單車的倉(cāng)促面世，摩拜精心打磨的專為“共享”設(shè)計(jì)的單車顯得有誠(chéng)意得多。這份堅(jiān)實(shí)的基礎(chǔ)，我想就夠OFO追趕一陣了，更何況其中的踏實(shí)基因必定還將助其更穩(wěn)更好地發(fā)展呢。

交互設(shè)計(jì)是UI設(shè)計(jì)中的必不可少的一個(gè)過(guò)程，交互設(shè)計(jì)也要遵循一定的步驟，總體來(lái)說(shuō)要經(jīng)歷三個(gè)階段，那么具體是哪三個(gè)階段呢？下邊是以為資深老鳥為我們帶來(lái)的他的交互經(jīng)驗(yàn)，希望對(duì)設(shè)計(jì)師們起到一定的幫助。

（1）讀文檔，明需求，多溝通，擅闡述。需求文檔類型多種多樣，無(wú)論哪種，首要任務(wù)是讀懂需求的內(nèi)容，透徹理解范圍層的含義，及相關(guān)的業(yè)務(wù)形態(tài)。把自己當(dāng)用戶代入思考，如何讓使用者快速上手，減少學(xué)習(xí)成本。一般情況下，拿到PM的需求文檔，我會(huì)先讀一遍，整理出整個(gè)文檔的架構(gòu)、要點(diǎn)、功能點(diǎn)等。記錄過(guò)程中不理解的內(nèi)容，羅列問(wèn)題清單，找PM溝通。溝通的效率也很重要，我會(huì)先聽PM講完，然后用自己的話闡述一遍，助于理解。

深挖產(chǎn)品設(shè)計(jì)背后的工作方式和工作流程，讓產(chǎn)品經(jīng)理受益匪淺。

Design Sprint Method （谷歌沖刺計(jì)劃）是由谷歌創(chuàng)投的 Jake Knapp 發(fā)明的一種產(chǎn)品設(shè)計(jì)工作法，是指由一支不超過(guò) 7 人的團(tuán)隊(duì)，在 5 天之內(nèi)，通過(guò) 5 個(gè)步驟，能夠快速解決產(chǎn)品難題的產(chǎn)品設(shè)計(jì)方法。其基礎(chǔ)概念來(lái)自于敏捷開發(fā)、設(shè)計(jì)思考和個(gè)性游戲法，先后被 100 多家創(chuàng)業(yè)公司實(shí)踐，打造了諸如 Slack、 Nest、Blue Bottle Coffee 和 23andMe 等多個(gè)成功的互聯(lián)網(wǎng)產(chǎn)品。