互動設計：好的產品是含蓄的，資訊的呈現絕不喧賓奪主
非技術型產品經理福音來了，和程式設計師不再撕逼，10天線上學習，補齊產品經理必備技術知識。 瞭解一下
釋放雙眼，帶上耳機，聽聽看~！
00:00
00:00
好的設計是在恰如其分的情況下，為使用者呈現資訊，而不讓資訊絕不喧賓奪主。
首先，我希望大家能夠思考以下問題：
- 為什麼做互動設計的時候出現資訊結構不一致呢 ？
- 為什麼有人說你畫的頁面不夠乾淨呢？
- 為什麼細節總是出錯？
大家都在通過基本圖形繪製原型頁面，為什麼有的人畫得好，有的人畫得差？同樣是點線面到底有何神奇之處？
——答案就是：每個人對資訊的理解層次不同，原型的根本是使用者互動介面的表達，想要表達更加清晰，更加細膩，就需要對資訊架構有更深的理解。那麼，應該如何提升你的 資訊設計能力 呢？
什麼是資訊？
資訊，指：音訊、訊息、通訊系統傳輸和處理的物件，泛指人類社會傳播的一切內容。
看起來不是很好理解，縮小定義範圍，在網際網路中介面中，資訊載體一般是PC和移動裝置。
介面資訊有圖文、語音、視訊， 我們常作的原型都是以圖文為結構，輔助動效設計 。
那麼，產品原型的構成是什麼？
我們從真實產品介面進行逆推，選了兩個非常常用的產品，頁面結構都很複雜，但是表現差別很大。
淘寶App首頁
淘寶的首頁相對複雜，介面元素非常多，當你看到一個頁面的時候，先看頁面整體結構。把頁面拆分成模組，好的產品，模組劃分都是非常清晰的，顯然這個頁面也是非常清晰地呈現了非常多內容。
再看具體每個模組的基本構成，小圖示、色塊、線條、文字，這是最基本構成。
仔細觀察你會發現， 對資訊的呈現根據需要的不同，強弱表現不同 。
頂部的小圖示配文字說明，圖表都是線條構成，這裡沒有用色塊填充圖示，因為需要更好的融入背景色塊，保證識別度的情況下，降低干擾，資訊提現的非常輕。
再看 搜尋白塊的內容 ，整個白塊佔的面積最大，也是頭部中最醒目的部分，中間有一個搜尋圖示，一個拍照圖示，同樣是採用的線，並且有一個小細節， 圖示的線都沒有把圖示連滿，讓圖示更輕了。中間還有灰色的文字，顯示了最近搜尋過內容，並且會變化。
再看 熱搜 ，採用了輕微的色塊，中間輸入文字，而不是用邊緣線。
因為輕微的色塊與整體更契合，在不降低識別度的情況下，干擾更低，如果是線，線的距離太小，會強過中間的字。
同樣的分析方法，可以細緻到最小單位進行觀察。
微信首頁
微信的內容非常豐富，模組簡單，頁面色彩簡單。微信的資訊結構是完全一致的，不論是聊天、群聊、訂閱號、服務號、通知。這樣 微信的資訊排列和閱讀習慣都一致 ，最大程度的提高了資訊體驗。
有一個小細節： 為什麼一個聊天資訊和另一個聊天資訊的中間有一根細灰線，但是線沒有穿過整個螢幕呢 ？
因為這根線穿過整個螢幕之後，一個聊天資訊和另一個聊天資訊被一定程度的阻斷了。同時，當用戶從上至下尋找資訊的時候是優先通過左邊的圖示來識別的，降低了視覺流的阻斷。
為什麼會有這根線呢？
因為需要一定程度上區分資訊，一條資訊是獨立存在的。
為什麼紅點沒有數字？
當設定為訊息免打擾之後，只顯示有新訊息，但是不顯示數字，進一步降低打擾。
整體設計有一個相同點，那就是使用盡可能地使用更少的元素，更低干擾的元素，清晰表達資訊，資料結構清晰。特別是微信，作為一款社交產品在這個頁面已經做到了極簡。
資訊的美，用最基本的文字、圖示、色塊構成的頁面，依然可以做到簡單又複雜的設計。
從灰度頁面看資訊強弱
可以看到灰度之下，模組依然是非常清晰。
作為頭部最強的資訊——搜尋，仍然是最強的，頭部的色塊能夠從視覺上感知到這部分的資訊層級是比較高的，看起來就像是頭部所在的海拔比下方內容位置要高。可以看到色塊的資訊強度會比文字高很多。
這裡有一個小細節，banner下方有一個小的弧形向內凹。
為什麼要向內有一個弧形被切掉呢？
假如不切掉，這個資訊塊與下方“我的頻道”資訊塊的間距，我們看到是比較近的，那麼就要提供更高的間距。
切掉後，整體頁面會突然多了一種空間感，沒有那麼擠壓了。同時，也會多了一種向上感，整個頁面內容是向上的。
影響就是：banner的資訊塊被切掉了，非常小的一部分，我認為這是設計的取捨，選擇這種方案來解決整個頁面空間的問題。
淘寶App首頁
假如不切掉，可以看一下頁面的情況是這樣的：
微信首頁
置頂的表現，清晰，但是不是非常強，在沒有增加文字和色彩的情況下，用了和頂部一樣的灰色作為標識。可以說頁面的每一個資訊都是不可減少的，微信是一個10億人使用的產品，非常值得互動設計師畫素級別的研究。
微信整個介面都是平的，資訊的海拔關係非常的薄弱。利用了色塊關係，強調了不同模組之間區別。
專業資訊結構
想要更進一步，需要理解專業資訊結構。
資訊是有層級結構的，層級越多，使用者操作所需要時間和精力越多。
例如這個圖，展現出來的就是三層。
導航結構是可以將資訊進行歸類的一個設計方式。
比如：現在通用底部TAB結構，就是比較符合移動操作的導航結構，像我們剛才分析的微信和淘寶App都是這個結構。
還有 抽屜式的導航 ，這種結構是通過在側邊展開一個導航結構，進行頁面切換。
優點是：導航資訊隱藏起來，可以放置很多內容，讓介面更乾淨，干擾更少。
缺點是：操作多一個步驟，也沒有那麼直觀。
還有一種是 頂部TAB ，頂部導航在安卓系統更常用，這種TAB在PC也可以使用。
導航的結構有很多， 那麼導航的本質是什麼 ？
資訊是通過不同的層級進行排列，分佈在不同的頁面，導航就是使用者遊走於不同頁面的通道，通道設計的複雜，就會像迷宮一樣，難以使用。
導航的型別：
用一個音樂的產品舉例：
橫向導航：允許在同一層級之間的資訊流動。
使用者可以在音樂產品中，資訊的頂級之間移動，就像底部的TAB。
前嚮導航：在同一條資訊路徑中，向前進入另一個頁面。
可以通過專輯進入一首歌曲，也可以通過搜尋進入一首歌曲。
反向導航：按時間順序，在一個應用程式內或跨不同的應用程式或在分層中（在應用程式內）向後移動螢幕。
從歌曲返回專輯；如果剛從搜尋進入歌曲，使用者可以從歌曲直接返回搜尋，跨越了中間層級。
舉一反三
靈活實際運用，離不開舉一反三。
每一個資訊的設計，都有多種多樣的設計方法，優秀的互動設計師應該能夠舉一反三，設計多種方案。
基本設計模型：
PC：
移動：
那麼，從這兩種設計模型就可以衍生出以下的設計：
PC：
移動：
你可能會說，怎麼都不像平時看到的設計呢？
先看結構，與前面說的基本設計模型是一致的，跳不出這個基本結構。
再看資訊的設計：
複雜的頁面，如淘寶App的首頁，資訊非常豐富。我的頻道部分其實是導航的入口，下方其實是資訊的模組，每一個資訊都可以進入更豐富的頁面。
頁面構成都是由基本元素構成，淘寶作為一個電商平臺，元資料就是一個一個的商品。因為商品有非常的多， 搜尋就非常重要，比直接分類效率要高。那麼商品的分類，其實是電商的一個核心功能，採用什麼維度劃分，是需要根據策略和大資料來決定的，這裡涉及到定價的問題。
不要被頁面本身的排布迷惑了，而是要舉一反三，看穿資訊構成。
使用者場景
爐火純青，需要理解使用者場景。
資訊是為了使用者而呈現，所以資訊與使用者場景密不可分。 好的互動設計師應該具備快速變小白的同理心，理解使用者在使用這個功能的時候的情況 。
騰訊有一個10-100-1000的方法。
每個月訪談10個使用者，調研100個使用者，檢視1000個使用者的帖子。
有的人會說：公司沒有給我那麼多時間去做這些事情，公司定了要做什麼的方向，一個星期就要出產品方案，那怎麼辦？
快速衝刺，團隊統一目標，一週之內要解決哪一個使用者場景？
目標制定之後不要再更改，儘量把自己變成重度使用者，這樣你才能比使用者還要了解使用者。
那平時如何提高使用者的感知能力？
持續關注網際網路有效資訊，尋找優質讀物，這方面保持自己對行業的持續關注，平時關注優秀的設計產品，反覆揣摩：為什麼這麼設計？有哪些基本的設計邏輯？
我認為：越基本的常識，才是越重要的東西。
前面也提到了，把自己變成重度使用者，反覆把玩產品。樹立對使用者的正確心態，把使用者當成朋友一樣對待。
那提高之後，如何驗證自己的同理心呢？
嘗試能不能理解一些你原來不理解的設計，理解你原來不理解的人，他們為什麼有這樣的行為？比如快手這個產品，他的底層邏輯是什麼，為什麼那麼多人去快手直播。
快手的底層邏輯是記錄，快手的分發邏輯是每一個視訊和直播都是從0開始導流，不論你是100萬粉絲，還是100粉絲。
在回去看看以往自己的設計，有沒有一種想把這個設計撕掉的衝動，如果有，說明你已經脫胎換骨了。
最後的話
產品設計的世界裡，把自己逼瘋，讓使用者感知不到你，是給使用者提供的最好的設計。
好的產品是含蓄的，不是花樣繁多的，對資訊的理解越深，才能做得更好。
灰度是看一個設計好壞的重要方法，一個好設計一定是在灰度之下仍然清晰明確的。
專業的設計結構，Google、Apple這樣優秀的偉大公司已經給了我們非常好的指引，一定要站在巨人的肩膀上做設計。
靈活運用資訊設計，舉一反三，嘗試更多的表達方式，好的設計猶如鶯鶯細語，使用者耳聽愉悅。
資訊是在場景中呈現，好的設計是在恰如其分的情況下，為使用者呈現，絕不喧賓奪主。
好的設計師不僅努力而且有愛，會讓使用者感受到你的用心，如果能做到這一點，我相信你一定會成為一個好的設計師，並且擁有一個美好的人生。
作者：非凡，公眾號：集創堂
本文由 @非凡 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
