之所以“泛談”，是覺得移動互聯時代對交互設計師的要求，想用一個觀念來概括一下還真不易：功能小而美、信息可視化、扁平化設計、緊貼用戶習慣·········。不過在現實面前，面對各方面的壓力和左右（畢竟現在這個時期，設計師在團隊裏的話語權還是比較低的），能否配合產品和技術推動設計完成，讓產品儘快上線變成了最實際的要求。因爲與過去的功能時代和遊戲時代不同，在針對人們生活的各種服務產品大爆發的今天，能夠先把產品上線推廣，並吸引到用戶是至關重要的。
好在如今技術越來越平等，同樣的功能和服務誰都可以實現，那麼想要使產品拉開差距更重要的恐怕要體現在用戶體驗上，因此大家也越來越重視設計，這對設計師來說確實很有利，有可能我們設計師將再次迎來一個黃金時期（之前九十年代初印刷技術蓬勃發展，兩千年代房地產形式暴漲的時期，對於設計師都算是黃金時期）。那麼問題來了，面對這個移動互聯時代即將爆發的黃金時期，作爲交互設計師，你做好準備了嗎？
不敢說在設計上我有多深的造詣，只想通過幾個點來談談我對現階段交互設計師的素質要求，以及能力培養上應該注意的細節。不過仔細想想，大部分的切入點都是老生常談的東西，我寫文章又比較隨性，想到哪寫到哪，而且喜歡談這陣子比較關注的東西，不想站在宏觀角度上去梳理重點。比如導航的問題，在大的框架上無非是選擇層級式還是扁平化，各有利弊，根據自己的業務邏輯選就好了；再比如操作流程的問題，多做點可用性測試，再麻煩的操作也可以優化的比較靠譜。這兩個主題我不太想聊，也不想輕描淡寫，因爲真正的實現起來對於交互設計師來說還是很有些難度的，這裏面有個如何把這些交互思路在界面上藉助圖形化方式讓用戶理解的問題。所以我想先聊聊這個：
圖形化與圖解力
我這裏所說的圖形化可不是圖形用戶界面（GUI），而是如何藉助圖形化來展示你的功能或信息，達到更好的傳遞、理解和互動的效應。2013年，喬納森面對大家對iOS 7設計上的質疑與曲解的時候（那個時候大家幾乎一致認爲iOS 7太單調、太乏味，沒質感）特意強調扁平化設計是爲了讓用戶重視內容而不是UI，他巧妙的把UI比喻成飯盒，言外之意就是：我們不會因爲飯盒好看而吃着這頓飯，用戶不會因爲你精美的擬物化界面而使用你的產品，所以你要想在iOS上開發產品，最好把你的內容做的很精彩，把你的功能做的很吸引人，別指望用精美的圖標和有質感的界面把用戶留住。所以，iOS的界面元素是單調的，圖標和按鈕是無邊框的，沒有主題色（其實就是白色和淡灰色），我們需要做的就是強化信息和功能對用戶的吸引力（圖1），這個纔是移動互聯時代交互設計師的正事。
不過，能否有效的利用圖形化方式傳遞信息、展現功能，實現界面的圖形化交互對設計師確實不是件容易的事，關鍵在於圖解能力，而設計師的圖解能力則依靠他的理解力和想象力。當然，我們都知道，設計能力的體現主要就在設計師的想象力上。
去年有一家公司找我設計諮詢，是一款非常簡單的LED檯燈，燈泡的亮度和顏色可以通過手機來調節，也就通過產品在手機上的用戶端界面控制檯燈。需求貌似很簡單，起初我以爲甲方是希望通過諮詢提高產品界面的個性化設計（大部企業的設計諮詢目標都是這樣），但是當我拿出原型紙，開始考慮這兩個簡單功能的界面操作的時候，發現問題還是挺棘手的。亮度調節很簡單，一根滑動軸就可以搞定（普通滑塊不行，不適合手指在觸屏上操作），但是燈泡顏色的調節卻需要兩個軸來同時參照：色相和純度。怎麼才能讓用戶即直觀又簡易的完成操作呢？總不能設計成PS的拾色器那樣，那是給專業選手的操作界面，我們面對的是最簡單、最直接的普通用戶。當然，想要解決問題也不是沒有辦法，於是我先畫了這兩個：
看上去應該可以使用，但我感覺這不是交互設計師的作品，只能算是平鋪直敘的把功能羅列在界面上。對於用戶體驗和交互設計的要求，我通常會站在用戶操作的角度把設計分成四個檔次：
底線——“這個貌似可以用，我試試”；
低檔——“這個能用”；
中檔——“這個更直觀、好操作”；
高檔——“這個用起來太high了”。
雖然這樣的評判好像要經過可用性測試才能評估出來，不過我還是會在設計過程中主觀的用這樣的方式對設計結果歸類。我們不能只把功能簡單的羅列在界面上，那不是交互設計，設計應該是創造性工作，設計師就是要通過自己的想象力把功能生動的圖解出來。所以，我得接着畫：
即使是最普通用戶，對於選擇顏色這件事也會有不同的理解，有的人認爲顏色就是選擇“紅橙黃綠青藍紫”，有的人則比較敏感，喜歡在色相的過度間細緻的甄別，因此把色彩用環狀的方式展現比較合理：既可以直接點選，也可以細膩的選擇，關鍵是比較直觀、有圖形感。不過，對於色彩純度的選擇，普通用戶不會很敏感（燈光的色彩純度表現爲光的顏色是否很鮮豔，或是逐漸褪色趨於白色），因此只需要給出幾個明確的階梯，這樣用戶可以直觀、輕鬆的做出選擇。這樣的設計結果確實有了些靈感和想法，加上GUI設計師的表現力和精心的打磨，應該可以讓界面很吸引人。不過，我覺得不夠簡約。
我對“簡約”的理解是三個詞：簡潔、實用、高效。上面的設計雖然有想法，有設計，但是用戶操作的時候不一定會感覺得心應手，更好的交互應該是滿足用戶在界面上的觸摸欲、控制慾和流暢感。所以下一步，我應該簡化界面、優化操作，這個真的很很需要想象力，我覺得我的想法還不夠完美：
雖然這個案例比較小（有點拿不上臺面），但是比較清晰的展現了用圖形展現交互的思路。面對的業務需求無論簡單還是複雜，我們都不應該簡單的用一個列表、一個餅圖或幾根柱狀圖，平鋪直敘的把信息羅列在界面上。應該考慮的是用戶能否快速的理解內容，直觀的上手操作，高效的反饋結果。
有沒有什麼方法能夠加強圖解能力嗎？方法確實有，但算不上是捷徑：準備一個速寫本，要求自己每天畫出至少一副速寫（這其實是設計師的基本要求），畫寫生、畫想法、畫心情·······或者信手胡畫。畫的時候不需要精美細膩（這不是在練習繪畫），只需用單線快速勾勒，簡單潦草就夠了，但是儘量的多畫。日積月累之後，你在畫原型的時候就會感到“下筆如有神”，腦子裏的想法會得心應手的在紙面上展現，甚至可以從多個角度，多個側面的表現你的想象和靈感。能堅持下來不容易，不過我有很多的學生，他們的成功案例可以證明這是個很有效，很靠譜的解決方法。
提高想象力的方法也沒有捷徑，只能靠積累，主要是兩個方面的積累：一個是多玩“頭腦風暴”，當然，這個只能和大家在一起的時候才能做到，好的想法和點子在都是在碰撞中迸發出來的，所以要善於藉助別人的力量強大自己。另一個方面聽起來扯得有點遠，就是要善於在生活中積累，好的可交互圖形往往都是對現實生活的隱喻，所以要善於從生活中發現亮點，把它提煉成我們設計中需要的圖形。
重視字體與排版
有一次參加51CTO組織的技術交流會，飯桌上聽到一位中年的微軟程序員聊設計：“現在的交互都講究扁平化設計，原來的那種設計師恐怕得被淘汰，大部分設計師沒法勝任現在這種交互設計工作”，這樣的言論當然會讓我感到很刺耳，雖然聽起來很有些道理。於是我湊過去，問他爲什麼會有這種想法，當然，人家的解釋很在理，這也是我們很多設計師面臨的難題：
扁平化設計講究的是用模塊的方式平鋪信息塊與功能塊，我們需要在一個界面裏更直觀，更有效的展現更多的內容或層級，所以在過去流行的擬物化風格里的陰影、光澤、紋理和材質等特效當然就沒法使用，取而代之的是簡約或無邊框的按鈕、平面化的圖標、高亮的底色和纖細的字體。那麼無論是GUI設計師還是交互設計師，我們都會面臨一個如何解決扁平化思路的問題。比如，過去的GUI設計，你只要PS玩得狗好，善於打磨細節，製作各種水晶、金屬拉絲、木紋等等的特效，總會讓界面看起來很光鮮，即使你的造型能力很一般，色彩把握能力不夠好，只要掌握了這些PS的特效技術，都能把界面打造的很高端，很漂亮。但是在現在的扁平化風格里，我們無法使用這些能使我們界面出彩的特效，每一個圖形、每一個控件都需要反覆推敲，一板一眼的展現在用戶的面前，就等於你的造型能力和色彩把握能力赤裸裸展現在界面上，沒有任何可以修飾和遮掩的辦法。那些不夠好的設計師就會抱怨：“扁平化設計太空洞了，太沒有質感了，太無趣了········”。
這對交互設計師的衝擊也同樣很大：“我們產品的業務邏輯沒那麼複雜，我們的內容沒那麼豐富，我們的功能只是個小而美的服務··········，沒辦法支撐起空洞的界面。”由此看來，從某種意義上說，這兩個角色（GUI和交互）是一體的，我們大部分的小團隊這兩個職位是由一個設計師承擔的，而UED的工作就交給產品經理了。
問題確實很棘手，解決的辦法其實也不少，但是根本上，設計師需要勇敢的做出改變，只有不斷的改變和提高自己，才能應對移動互聯時代的種種變局。對於UI設計師，最長遠的解決之道還是要想辦法提高造型能力，對於任何設計師這都是軟肋。當然，科班出身的設計師在上學的時候都經歷過長時間的素描、色彩、表現技法和攝影的訓練，這方面會有很大的優勢，那麼對於半路出家的設計師，唯一的捷徑依然是前面提到的辦法：多畫速寫。界面的佈局、空間比例關係、細節造型和形式感，都會在你的速寫本上通過日積月累，一點一滴的提高上來。我們可以瞭解到西方的設計師培養是沒有中國式的素描色彩教學的，主要就在速寫和三大構成這兩個點上積累和培養設計能力，這裏面速寫尤其重要。
那麼對於交互設計師，我們的解決方法也很簡單：那就是重視字體和版面設計。這兩個概念聽起來不像是交互設計師的知識領域，更像是平面設計師專利。爲了解釋清楚這個問題，我們先看看最原汁原味的扁平化設計——Windows Phone的Metro UI
Metro UI最大的特點就是簡化操作、優化層級。這兩個點實際上是一回事，而這正是交互設計上最不容易實現的，也是最本質化的需求。我們看看微軟的設計師是怎麼做到的：
優化層級的目的其實就是爲了簡化操作，這也是扁平化設計的目的，可是層級代表着交互的遞進邏輯，是保證交互過程中用戶能夠思路明確、邏輯清晰進行操作的關鍵，那可不是想扁平就扁平、想去掉就去掉的，一旦處理不好就會造成操作錯誤或邏輯混亂。Metro的做法叫做“樞軸導航”，實際上就是把所有的操作和信息放置在一個很長的界面上，通過左右的滑動來切換和梳理。那怎麼來劃分功能模塊和上下層級的關係呢？Metro有三大法寶：Tiles、色彩和字體。
只有層級式導航才能表現上下層次的邏輯關係嗎？絕對不會那麼單一，在同一個版面上、同一個卡片中、同一個列表項目裏，我們都可以通過文字的大小、粗細和虛實來表現和劃分層級，舉個例子：我們看看iOS的音樂播放器裏的播放列表。在一個格子裏，我們可以清晰的看到三個層級的信息：粗黑字體是歌曲的名稱，細小字體是樂隊或藝人的名稱，淡灰字體是歌曲專輯的名稱，三個層級，三個不同級別的信息在這個小格子裏清清楚楚、一目瞭然，怎麼做到的？通過設計師對字體的粗細、大小、深淺、虛實的敏銳把握。
現在我們把這個觀念放大，Metro就是利用這個原理進行優化層級的，我們來看兩個典型的Metro界面：一個是Windows Phone原生的Xbox Games。
進入應用之後看到的是標準的樞軸界面，醒目的XboxGames大字標題告訴我們：“你沒點錯，來對地方了”。之下有三個信息模塊：收藏、社交、特別推薦，這就是二級標題，也是二級信息，通過左右滑動循環切換。再看“收藏”板塊，上下滑動可以看到列表有分組，前四款產品屬於Xbox推薦，之後的是其他平臺的產品，這是第三個層級，每個產品的列表中還有兩個層級的內容。看到了嗎？一個界面搞定了4-5個層級的信息，而且瀏覽和查找的過程清晰易懂不會亂套，完全靠空間排版和字體比例的細緻把握，可見字體和版面設計對扁平化交互的重要性。
那麼如何提高字體和版面的設計技巧已達到提高扁平化交互的效果呢？我總結了兩個技巧（可能不全面，但是很重要）：一個是重視空間和留白，一個是加強文字的對比。
空間和留白做過平面設計的設計師都會明白，所謂的版面設計關鍵就是頁面上每個標題、每一行文字的上下左右的空間，太寬了顯得空曠不連貫，太窄了擁擠錯亂不容易點選，那麼專業的設計師就會細心的推敲每一條邊界，每一個縫隙。要達到什麼效果算最好呢？就是看上去即很連貫，又很“透氣”（聽上去有點抽象，但是設計這東西到了一定程度就是隻能會意，沒法言表）。
同時，如果想要突出一個內容或信息，在界面上提高它的受關注度，就要特意的在它周圍增大空間，增加留白，版面設計的訣竅，並不是字越大就越重要，實際上是誰的地盤大誰更要。
文字的對比爲了讓標題或動態數據在交互中形成層級關係，我們需要重視文字間的對比關係，因爲只有形成了合理的對比，我們才能直觀、清晰的操作界面。怎麼形成對比呢？就是把它們設置成不同的大小嗎？專業的設計師絕不僅僅這一條思路，大小對比只是對比中的一種，文字的字體還有粗和細的對比，在大小一樣的前提下，很粗的字體和很細的字體可以形成鮮明的層級關係。文字還有色彩虛實上的對比，並不是把界面搞得五顏六色，而是注重文字間的虛實關係，比如，相同大小和粗細的情況下，黑色的字和灰色的字就可以形成鮮明的層級關係，在圖像或顏色背景上，白色的字和半透明的字也可以形成這個效應。
因此，Xbox Games的設計我覺得還不夠好，界面的信息層級還不夠清晰，USA Today的Windows Phone用戶端這方面處理的更棒。頂部應用名稱的第一個層級就不說了，使用樞軸導航的第二層級的字體大而清晰，當前界面的標題用白色顯示，而右側平行的界面標題則用透明淺色的文字顯示，這纔是樞軸架構的真諦，界面滑動的過程中可以清晰地感受到信息模塊的動態切換。接下來第三個層級的信息通過Tiles清晰的分隔開，每一個小空間都可獨立的排版，圖文並茂，虛實搭配，使操作和識別更加的清晰，直觀，活躍自如。所以我們發現，排版設計的時候，精密的處理好字體關係很重要。同時我們也看到了，合理的利用Tiles對信息層級的劃分更加有效，這是Metro UI實現交互扁平化更重要的法寶，所以我們接下來聊聊Tiles。
Tiles的魔力
Tiles有很多種翻譯，有人翻譯成“瓦片”，這主要是做遊戲場景設計時拼接地圖時的叫法，也就是製作攻略類遊戲時常用的“瓦片地圖”。在Windows Phone平臺上，官方的翻譯把它叫“磁貼”，這讓人想到冰箱門上貼着的菜譜和購物清單，有人覺得這對交互的比喻還不夠形象，所以把它翻譯成“磁塊”。衆說紛紜，有點亂，但是英文就是這一個單詞，所以我們在這裏就用英文的“Tiles”。
Windows或WindowsPhone裏的Tiles，就是在界面上可大可小，可長可短的方塊。放在主頁上的Tiles看上去和圖標的功效一樣，實際上完全不是一個概念。圖標只是一個png的圖像，唯一的交互就是點擊打開，而Windows的Tiles交互功能是非常豐富的，可以縮放，可以翻轉，可以推送，可以展示應用的信息內容，可以觀察應用的功能狀態·······，因此我們很多時候不需要點擊進入應用，只需要觀察應用的Tiles就可以獲得結果。這實在是一個創舉，它實實在在的推動了扁平化設計、現代交互理念、乃至整個移動互聯網的發展。這個理念有效的解決了屏幕適配的碎片化問題（利用Tiles實現響應式佈局），使我們設計和開發的流程更加的敏捷。
Tiles的概念雖然是微軟提出來的，但是這個觀念可早就存在，絕不是微軟的專利。我在這裏和大家談的Tiles，也絕不僅僅指的是Windows平臺裏的方格子，而是如何在各個平臺上駕馭這種理念。那麼我們就先來看看iOS的設計，蘋果公司的設計其實在很早就有這樣的觀念，不過它是建立在擬物化基礎上的（畢竟這是蘋果的傳統設計理念），實際上是用一疊卡片來隱喻的。而這種卡片式的交互在iOS上無處不在，我們通過幾個大家熟悉的iOS界面就可以清楚的理解：
卡片是有正反面的，是可以翻轉的，這實際上也是Tiles交互的關鍵，不過卡片這個擬物化觀念受到了一些人們生活上的物理約束，比如它不應該是動態的，應該用手指來翻轉，應該大小一致，應該帶有厚度和質感等等，因此從形式上確實沒有windows的Tiles活，也沒有它操作靈便。當然，設計師是活的，我們在打造自己的產品時就不應該有這些條條框框了。
那麼再看看Android的設計，實際上Android全新的MaterialDesign真的把Tiles理念玩的是出神入化，我覺得在交互的空間上和廣度上都超越了Windows。在Material Design裏，Tiles變成了一疊可以自由伸縮變形的電子紙，我們可以自由的把它們展開，鋪平，摺疊，滑走或摞成一疊········。
由此可見，只要你有足夠的想象力，Tiles就可以變化無窮。當然了，想象力和靈感這種東西可不是想來就來的。設計師最希望擁有的狀態，就是能夠在任何時候都可以迸發出充滿創造力和個性的火花，能做到嗎？那要看你是不是具備“娛樂精神”
娛樂精神
這個詞聽起來不太理性和嚴謹，但是作爲移動互聯時代的設計師，這一點至關重要。
設計師不是程序員，雖然在打造產品的過程中設計師需要和開發人員站在同一條戰線上，相互溝通、理解和銜接，但是設計師同時需要保持自己應有的狀態，一種做設計必須具備的狀態，能產生豐富想象力的和創意精神的狀態，我把它稱作“娛樂精神”。
上大學的時候一個老師（真不應該把老師的名字給忘了）對設計師狀態的描述讓我很有些感觸，他說：“設計師是感性動物，身上長滿了類似蝸牛一樣的觸角，這些觸角到處探尋，伸進了社會的各個層面，各個角落。不過這些觸角太嬌嫩、太敏感，一旦受到刺激或傷害就會立即縮回來”。剛聽完覺得很噁心，現在想想很在理，因爲他很貼切的描述了三個設計師應該具備的素質：一個是要興趣廣泛，一個是要善於融入社會，第三個就是要敏感、細膩，而這三點正是娛樂精神必須具備的條件。
我們的產品爲什麼會吸引人？爲什麼便於推廣？爲什麼能保持生命週期？很重要的原因是產品在設計層面符合了大衆的口味。有人可能覺得我是在談時尚範疇的東西，但是在我看來，這屬於用戶體驗設計。咱們就從產品的生命週期的維護來說（這應該是我們做產品的最關心的話題），很多時候我們爲了有效延續產品的壽命，需要在設計上給它注入新鮮的血液，讓它充滿活力。什麼是新鮮血液，當然是時下大衆喜聞樂見的這些觀念和時尚產物，設計師的工作把它提煉出來，轉化成適合產品的，可以被產品吸收的元素，使產品更好的適應大衆。
這個過程需要設計師具備剛纔提到的這些能力和素質，那麼問題來了，我們怎麼培養自己的“娛樂精神”呢？方法聽上去很簡單，但是操作起來不太容易，那就是：重視生活。
看過《喬布斯傳》的朋友應該會有感觸，我們的喬教主在上大學的時候絕不算什麼好學生。他這個大學可以說上的非常的隨性，先是中途就退學了，然後今天聽聽這個專業，明天看看那個講座。還有人說喬布斯懂設計，那明明就是爲了泡妞去上了幾次字體設計課。你要是覺得這種上學的方法才能造就天才那就錯了，因爲這裏得有個前提條件：你得是個聰明人。簡單的說：普通人是在生活中尋找娛樂，聰明人在娛樂中積累閱歷。當我們聽完一個笑話的時候，大部分人哈哈大笑，然後就完了，但是有些人就會利用這個點子去整人，設計師必須就是這樣的人。
那麼我剛纔所說的“重視生活”，具體的操作就是：不要天天鑽技術、忙工作，要去生活，去娛樂。加大社交範圍，看電影，KTV，陪老婆逛街，陪孩子去動物園，野營，參加各種活動··········，而且也別打着什麼用戶研究的名義，一定要真心的投入。當然，工作的時候也一樣，設計師考慮方案或溝通產品的時候應該去咖啡館，而不是辦公室。要多玩“頭腦風暴”，注意，設計師的頭腦風暴是遊戲不是會議，是娛樂不是工作，只有娛樂效應纔可能產生逆向思維，在設計上我們叫點子或火花。
大家都很清楚，移動互聯時代的今天，我們太需要點子。作爲產品設計師，保持和提高自己的專業水準固然重要，但是想要打造出吸引用戶的，充滿活力的產品，一定要保持自己的娛樂精神，在生活中（而不是學習和鑽研中）積累和充實自己和自己的產品。