好的設(shè)計是在恰如其分的情況下，為用戶呈現(xiàn)信息，而不讓信息絕不喧賓奪主。

首先，我希望大家能夠思考以下問題：

• 為什么做交互設(shè)計的時候出現(xiàn)信息結(jié)構(gòu)不一致呢 ？
• 為什么有人說你畫的頁面不夠干凈呢？
• 為什么細(xì)節(jié)總是出錯？

大家都在通過基本圖形繪制原型頁面，為什么有的人畫得好，有的人畫得差？同樣是點線面到底有何神奇之處？

——答案就是：每個人對信息的理解層次不同，原型的根本是用戶交互界面的表達，想要表達更加清晰，更加細(xì)膩，就需要對信息架構(gòu)有更深的理解。那么，應(yīng)該如何提升你的信息設(shè)計能力呢？

什么是信息？

信息，指：音訊、消息、通訊系統(tǒng)傳輸和處理的對象，泛指人類社會傳播的一切內(nèi)容。

看起來不是很好理解，縮小定義范圍，在互聯(lián)網(wǎng)中界面中，信息載體一般是PC和移動設(shè)備。

界面信息有圖文、語音、視頻，我們常作的原型都是以圖文為結(jié)構(gòu)，輔助動效設(shè)計。

那么，產(chǎn)品原型的構(gòu)成是什么？

我們從真實產(chǎn)品界面進行逆推，選了兩個非常常用的產(chǎn)品，頁面結(jié)構(gòu)都很復(fù)雜，但是表現(xiàn)差別很大。

淘寶App首頁

淘寶的首頁相對復(fù)雜，界面元素非常多，當(dāng)你看到一個頁面的時候，先看頁面整體結(jié)構(gòu)。把頁面拆分成模塊，好的產(chǎn)品，模塊劃分都是非常清晰的，顯然這個頁面也是非常清晰地呈現(xiàn)了非常多內(nèi)容。

再看具體每個模塊的基本構(gòu)成，小圖標(biāo)、色塊、線條、文字，這是最基本構(gòu)成。

仔細(xì)觀察你會發(fā)現(xiàn)，對信息的呈現(xiàn)根據(jù)需要的不同，強弱表現(xiàn)不同。

頂部的小圖標(biāo)配文字說明，圖表都是線條構(gòu)成，這里沒有用色塊填充圖標(biāo)，因為需要更好的融入背景色塊，保證識別度的情況下，降低干擾，信息提現(xiàn)的非常輕。

再看搜索白塊的內(nèi)容，整個白塊占的面積最大，也是頭部中最醒目的部分，中間有一個搜索圖標(biāo)，一個拍照圖標(biāo)，同樣是采用的線，并且有一個小細(xì)節(jié)， 圖標(biāo)的線都沒有把圖標(biāo)連滿，讓圖標(biāo)更輕了。中間還有灰色的文字，顯示了最近搜索過內(nèi)容，并且會變化。

再看熱搜，采用了輕微的色塊，中間輸入文字，而不是用邊緣線。

因為輕微的色塊與整體更契合，在不降低識別度的情況下，干擾更低，如果是線，線的距離太小，會強過中間的字。

同樣的分析方法，可以細(xì)致到最小單位進行觀察。

微信首頁

微信的內(nèi)容非常豐富，模塊簡單，頁面色彩簡單。微信的信息結(jié)構(gòu)是完全一致的，不論是聊天、群聊、訂閱號、服務(wù)號、通知。這樣微信的信息排列和閱讀習(xí)慣都一致，最大程度的提高了信息體驗。

有一個小細(xì)節(jié)：為什么一個聊天信息和另一個聊天信息的中間有一根細(xì)灰線，但是線沒有穿過整個屏幕呢？

因為這根線穿過整個屏幕之后，一個聊天信息和另一個聊天信息被一定程度的阻斷了。同時，當(dāng)用戶從上至下尋找信息的時候是優(yōu)先通過左邊的圖標(biāo)來識別的，降低了視覺流的阻斷。

為什么會有這根線呢？

因為需要一定程度上區(qū)分信息，一條信息是獨立存在的。

為什么紅點沒有數(shù)字？

當(dāng)設(shè)置為消息免打擾之后，只顯示有新消息，但是不顯示數(shù)字，進一步降低打擾。

整體設(shè)計有一個相同點，那就是使用盡可能地使用更少的元素，更低干擾的元素，清晰表達信息，數(shù)據(jù)結(jié)構(gòu)清晰。特別是微信，作為一款社交產(chǎn)品在這個頁面已經(jīng)做到了極簡。

信息的美，用最基本的文字、圖標(biāo)、色塊構(gòu)成的頁面，依然可以做到簡單又復(fù)雜的設(shè)計。

從灰度頁面看信息強弱

可以看到灰度之下，模塊依然是非常清晰。

作為頭部最強的信息——搜索，仍然是最強的，頭部的色塊能夠從視覺上感知到這部分的信息層級是比較高的，看起來就像是頭部所在的海拔比下方內(nèi)容位置要高?？梢钥吹缴珘K的信息強度會比文字高很多。

這里有一個小細(xì)節(jié)，banner下方有一個小的弧形向內(nèi)凹。

為什么要向內(nèi)有一個弧形被切掉呢？

假如不切掉，這個信息塊與下方“我的頻道”信息塊的間距，我們看到是比較近的，那么就要提供更高的間距。

切掉后，整體頁面會突然多了一種空間感，沒有那么擠壓了。同時，也會多了一種向上感，整個頁面內(nèi)容是向上的。

影響就是：banner的信息塊被切掉了，非常小的一部分，我認(rèn)為這是設(shè)計的取舍，選擇這種方案來解決整個頁面空間的問題。

淘寶App首頁

假如不切掉，可以看一下頁面的情況是這樣的：

微信首頁

置頂?shù)谋憩F(xiàn)，清晰，但是不是非常強，在沒有增加文字和色彩的情況下，用了和頂部一樣的灰色作為標(biāo)識?？梢哉f頁面的每一個信息都是不可減少的，微信是一個10億人使用的產(chǎn)品，非常值得交互設(shè)計師像素級別的研究。

微信整個界面都是平的，信息的海拔關(guān)系非常的薄弱。利用了色塊關(guān)系，強調(diào)了不同模塊之間區(qū)別。

專業(yè)信息結(jié)構(gòu)

想要更進一步，需要理解專業(yè)信息結(jié)構(gòu)。

信息是有層級結(jié)構(gòu)的，層級越多，用戶操作所需要時間和精力越多。

例如這個圖，展現(xiàn)出來的就是三層。

導(dǎo)航結(jié)構(gòu)是可以將信息進行歸類的一個設(shè)計方式。

比如：現(xiàn)在通用底部TAB結(jié)構(gòu)，就是比較符合移動操作的導(dǎo)航結(jié)構(gòu)，像我們剛才分析的微信和淘寶App都是這個結(jié)構(gòu)。

還有抽屜式的導(dǎo)航，這種結(jié)構(gòu)是通過在側(cè)邊展開一個導(dǎo)航結(jié)構(gòu)，進行頁面切換。

優(yōu)點是：導(dǎo)航信息隱藏起來，可以放置很多內(nèi)容，讓界面更干凈，干擾更少。

缺點是：操作多一個步驟，也沒有那么直觀。

還有一種是頂部TAB，頂部導(dǎo)航在安卓系統(tǒng)更常用，這種TAB在PC也可以使用。

導(dǎo)航的結(jié)構(gòu)有很多，那么導(dǎo)航的本質(zhì)是什么？

信息是通過不同的層級進行排列，分布在不同的頁面，導(dǎo)航就是用戶游走于不同頁面的通道，通道設(shè)計的復(fù)雜，就會像迷宮一樣，難以使用。

導(dǎo)航的類型：

用一個音樂的產(chǎn)品舉例：

橫向?qū)Ш剑涸试S在同一層級之間的信息流動。

用戶可以在音樂產(chǎn)品中，信息的頂級之間移動，就像底部的TAB。

前向?qū)Ш剑涸谕粭l信息路徑中，向前進入另一個頁面。

可以通過專輯進入一首歌曲，也可以通過搜索進入一首歌曲。

反向?qū)Ш剑喊磿r間順序，在一個應(yīng)用程序內(nèi)或跨不同的應(yīng)用程序或在分層中（在應(yīng)用程序內(nèi)）向后移動屏幕。

從歌曲返回專輯；如果剛從搜索進入歌曲，用戶可以從歌曲直接返回搜索，跨越了中間層級。

舉一反三

靈活實際運用，離不開舉一反三。

每一個信息的設(shè)計，都有多種多樣的設(shè)計方法，優(yōu)秀的交互設(shè)計師應(yīng)該能夠舉一反三，設(shè)計多種方案。

基本設(shè)計模型：

PC：

移動：

那么，從這兩種設(shè)計模型就可以衍生出以下的設(shè)計：

PC：

移動：

你可能會說，怎么都不像平時看到的設(shè)計呢？

先看結(jié)構(gòu)，與前面說的基本設(shè)計模型是一致的，跳不出這個基本結(jié)構(gòu)。

再看信息的設(shè)計：

復(fù)雜的頁面，如淘寶App的首頁，信息非常豐富。我的頻道部分其實是導(dǎo)航的入口，下方其實是信息的模塊，每一個信息都可以進入更豐富的頁面。

頁面構(gòu)成都是由基本元素構(gòu)成，淘寶作為一個電商平臺，元數(shù)據(jù)就是一個一個的商品。因為商品有非常的多， 搜索就非常重要，比直接分類效率要高。那么商品的分類，其實是電商的一個核心功能，采用什么維度劃分，是需要根據(jù)策略和大數(shù)據(jù)來決定的，這里涉及到定價的問題。

不要被頁面本身的排布迷惑了，而是要舉一反三，看穿信息構(gòu)成。

用戶場景

爐火純青，需要理解用戶場景。

信息是為了用戶而呈現(xiàn)，所以信息與用戶場景密不可分。好的交互設(shè)計師應(yīng)該具備快速變小白的同理心，理解用戶在使用這個功能的時候的情況。

騰訊有一個10-100-1000的方法。

每個月訪談10個用戶，調(diào)研100個用戶，查看1000個用戶的帖子。

有的人會說：公司沒有給我那么多時間去做這些事情，公司定了要做什么的方向，一個星期就要出產(chǎn)品方案，那怎么辦？

快速沖刺，團隊統(tǒng)一目標(biāo)，一周之內(nèi)要解決哪一個用戶場景？

目標(biāo)制定之后不要再更改，盡量把自己變成重度用戶，這樣你才能比用戶還要了解用戶。

那平時如何提高用戶的感知能力？

持續(xù)關(guān)注互聯(lián)網(wǎng)有效資訊，尋找優(yōu)質(zhì)讀物，這方面保持自己對行業(yè)的持續(xù)關(guān)注，平時關(guān)注優(yōu)秀的設(shè)計產(chǎn)品，反復(fù)揣摩：為什么這么設(shè)計？有哪些基本的設(shè)計邏輯？

我認(rèn)為：越基本的常識，才是越重要的東西。

前面也提到了，把自己變成重度用戶，反復(fù)把玩產(chǎn)品。樹立對用戶的正確心態(tài)，把用戶當(dāng)成朋友一樣對待。

那提高之后，如何驗證自己的同理心呢？

嘗試能不能理解一些你原來不理解的設(shè)計，理解你原來不理解的人，他們?yōu)槭裁从羞@樣的行為？比如快手這個產(chǎn)品，他的底層邏輯是什么，為什么那么多人去快手直播。

快手的底層邏輯是記錄，快手的分發(fā)邏輯是每一個視頻和直播都是從0開始導(dǎo)流，不論你是100萬粉絲，還是100粉絲。

在回去看看以往自己的設(shè)計，有沒有一種想把這個設(shè)計撕掉的沖動，如果有，說明你已經(jīng)脫胎換骨了。

最后的話

產(chǎn)品設(shè)計的世界里，把自己逼瘋，讓用戶感知不到你，是給用戶提供的最好的設(shè)計。

好的產(chǎn)品是含蓄的，不是花樣繁多的，對信息的理解越深，才能做得更好。

灰度是看一個設(shè)計好壞的重要方法，一個好設(shè)計一定是在灰度之下仍然清晰明確的。

專業(yè)的設(shè)計結(jié)構(gòu)，Google、Apple這樣優(yōu)秀的偉大公司已經(jīng)給了我們非常好的指引，一定要站在巨人的肩膀上做設(shè)計。

靈活運用信息設(shè)計，舉一反三，嘗試更多的表達方式，好的設(shè)計猶如鶯鶯細(xì)語，用戶耳聽愉悅。

信息是在場景中呈現(xiàn)，好的設(shè)計是在恰如其分的情況下，為用戶呈現(xiàn)，絕不喧賓奪主。

好的設(shè)計師不僅努力而且有愛，會讓用戶感受到你的用心，如果能做到這一點，我相信你一定會成為一個好的設(shè)計師，并且擁有一個美好的人生。

作者：非凡，公眾號：集創(chuàng)堂

本文由 @非凡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議