拆解界面的過(guò)程其實(shí)就是逆向解析產(chǎn)品的用戶需求和企業(yè)需求的過(guò)程，我們需要通過(guò)這個(gè)過(guò)程從上到下、從外到內(nèi)地把整個(gè)產(chǎn)品拆解開(kāi)，看到其深層的布局。

在談拆解界面之前，咱們先說(shuō)交互設(shè)計(jì)中一個(gè)重要概念——“創(chuàng)新”。

創(chuàng)新能力似乎是交互設(shè)計(jì)師必須要具備的一種能力，因?yàn)檎搲系教幎际穷愃朴凇坝脙r(jià)值公式來(lái)衡量創(chuàng)新”、“如何做好產(chǎn)品的跨界創(chuàng)新”、“深度理解創(chuàng)新三要素”之類的文章，而我認(rèn)為，對(duì)于大部分普通設(shè)計(jì)師來(lái)說(shuō)，一味追求創(chuàng)業(yè)是本末倒置的。

創(chuàng)新能力固然是設(shè)計(jì)師通向大師之路必備的能力，但是在普通設(shè)計(jì)師的日常工作中，創(chuàng)新屬于打破難關(guān)的冒險(xiǎn)嘗試，而不是維持產(chǎn)品的基本招數(shù)。交互設(shè)計(jì)師的視角不應(yīng)該是炫目多彩的，而應(yīng)該是穩(wěn)健中帶著強(qiáng)悍的洞察力，好的界面是信息化的，而不是創(chuàng)新化的。

以前互聯(lián)網(wǎng)行業(yè)一個(gè)新app的生命周期是兩年，但是現(xiàn)在，新app預(yù)期的壽命周期僅剩了十個(gè)月甚至更短，你得不斷研究新產(chǎn)品才能保證自身的競(jìng)爭(zhēng)力，但是新app的更新速度又決定了你壓根沒(méi)時(shí)間把每個(gè)競(jìng)爭(zhēng)對(duì)手都進(jìn)行細(xì)致研究，所以快速拆解界面的能力，就成了每一位交互設(shè)計(jì)師都必須具備的能力。

下面我就以今日頭條和貓眼電影為例，帶著大家看看如何拆解界面。

今日頭條

今日頭條是一款非常成熟化的新聞?lì)怉PP，它的首頁(yè)由上至下包含了非常多的功能點(diǎn)和新聞信息，假如說(shuō)你是一個(gè)新聞?lì)惍a(chǎn)品的交互設(shè)計(jì)師，領(lǐng)導(dǎo)讓你分析今日頭條在界面設(shè)計(jì)方面的優(yōu)劣勢(shì)， 你要怎樣去拆解這款產(chǎn)品呢？

今日頭條相對(duì)來(lái)說(shuō)還是比較好分析的一款產(chǎn)品，請(qǐng)大家記住一點(diǎn)，用戶量越大的產(chǎn)品其實(shí)越好分析，這不僅是因?yàn)樗脑O(shè)計(jì)模式輕易不會(huì)更改，更是因?yàn)樗雀?，所以網(wǎng)絡(luò)上有著鋪天蓋地的新聞、文章、問(wèn)答詳情可以幫助你看透這款產(chǎn)品，越成熟的產(chǎn)品越透明，理解起來(lái)也越容易。

首先我們可以把界面框架按照同等大小的比例畫(huà)出來(lái)，用簡(jiǎn)單的矩形線條勾勒出一個(gè)簡(jiǎn)單的線框，工具可以使用最基本的PPT，也可以手繪，手機(jī)屏幕的截圖有多大，我們畫(huà)出來(lái)的矩形就有多大。

狀態(tài)欄通常是自動(dòng)顯示在界面頂部的，app內(nèi)部的界面內(nèi)容不會(huì)影響到狀態(tài)欄，所以我們用一道細(xì)長(zhǎng)的矩形指代它就行了，不需要細(xì)致的繪制。

再往下面是搜索和發(fā)布兩個(gè)功能，它們?cè)谧髠?cè)的真實(shí)界面中是由“圖標(biāo)+文字”展示的，我們?cè)僦匦吕L制的時(shí)候，可以將其還原為基本的信息元素——比如搜索功能就是“搜索圖標(biāo)+一行提示性的文字”，發(fā)布功能則是“點(diǎn)擊發(fā)布可以發(fā)布什么內(nèi)容”。

再向下繼續(xù)繪制出導(dǎo)航欄，主導(dǎo)航是底層的5個(gè)標(biāo)簽（平行式主導(dǎo)航），頁(yè)面導(dǎo)航是上層的一行分類標(biāo)簽（標(biāo)簽式頁(yè)面導(dǎo)航），整個(gè)首頁(yè)的文章內(nèi)容被上層的多個(gè)標(biāo)簽完整切割開(kāi)了，用戶第一次進(jìn)入頁(yè)面時(shí)默認(rèn)看到的是“推薦”這一頁(yè)的內(nèi)容，這點(diǎn)我們可以在界面上標(biāo)注清楚，以備將來(lái)設(shè)計(jì)同類界面時(shí)借鑒。

除去頂層的搜索和發(fā)布兩大功能，再去除主導(dǎo)航和頁(yè)面導(dǎo)航，整個(gè)界面剩下的區(qū)域都是內(nèi)容區(qū)域，今日頭條的內(nèi)容主要是以新聞條目的形式呈現(xiàn)的，當(dāng)我們把它還原成本來(lái)的信息面貌后，就能看穿其中細(xì)微的設(shè)計(jì)差別。

很多設(shè)計(jì)師會(huì)被原有的視覺(jué)界面吸引，一眼就看到了新聞條目里醒目的標(biāo)題和圖片，事后回憶起來(lái)的時(shí)候往往會(huì)默認(rèn)一個(gè)新聞條目里只有這兩個(gè)因素比較重要，其實(shí)界面上不那么明顯的細(xì)節(jié)有很多，這些細(xì)節(jié)才是體現(xiàn)設(shè)計(jì)師功底的地方。

如圖所示的新聞條目由新聞標(biāo)題、置頂標(biāo)簽、新聞來(lái)源、評(píng)論數(shù)和時(shí)間組成，這些信息幾乎全部都是有其價(jià)值的——新聞標(biāo)題是為了第一時(shí)間告訴用戶這條新聞是講什么內(nèi)容的（指引內(nèi)容），置頂標(biāo)簽意味著它置于頂端（重點(diǎn)提醒），新聞來(lái)源是為了屏蔽版權(quán)風(fēng)險(xiǎn)（昭示新聞版權(quán)方），評(píng)論數(shù)是為了吸引人們點(diǎn)擊新聞（高評(píng)論數(shù)的新聞對(duì)熱愛(ài)閱讀新聞的用戶更有吸引力），時(shí)間是為了提示用戶新聞的發(fā)布時(shí)間。

而在下面配有圖片的新聞條目中，“新聞來(lái)源”這項(xiàng)信息被更換為了“專題”，這說(shuō)明這條新聞并不是從其他新聞渠道抓取來(lái)的，而是今日頭條獨(dú)家運(yùn)營(yíng)的新聞（或者是它掌握有版權(quán)的內(nèi)容），因此它沒(méi)有標(biāo)注新聞來(lái)源。

整個(gè)新聞條目的所有信息都是為用戶服務(wù)的，我們可以依次將這些信息陳列出來(lái)，最后總結(jié)這些信息的特點(diǎn)。

搜索的作用是輔助用戶根據(jù)關(guān)鍵詞查詢他想要的內(nèi)容，這是有明確目標(biāo)的用戶最主要使用的新聞查詢工具。

發(fā)布則是今日頭條希望用戶使用的功能，它通過(guò)這個(gè)功能收集用戶自己發(fā)布的新聞和文章，以此來(lái)打造自身的社群內(nèi)容體系，因此發(fā)布本質(zhì)上是一個(gè)提供用戶內(nèi)容、拉升用戶活躍度的功能。

導(dǎo)航的作用是為了劃分界面的內(nèi)容，這種導(dǎo)航設(shè)計(jì)適合內(nèi)容量較大、內(nèi)容分類較多的產(chǎn)品，如果你自家的產(chǎn)品新聞內(nèi)容較少，就不適合這種導(dǎo)航形式，但今日頭條可以。

界面的具體內(nèi)容都是新聞和文章，它們的排布順序是按照時(shí)間和熱度來(lái)排列的，其中今日頭條的內(nèi)容推薦算法是關(guān)鍵，我截圖的首頁(yè)頭屏只有三條新聞，往下滑動(dòng)還可以看到熱度較高的用戶發(fā)布的文章、商家購(gòu)買的廣告位、今日頭條為你推薦的好友名單等，這里面的內(nèi)容推送邏輯是可以通過(guò)觀察界面推演出來(lái)的。

貓眼電影

交互設(shè)計(jì)師應(yīng)該持有的信息視角，其實(shí)就是穿透了視覺(jué)界面，直達(dá)信息本質(zhì)的視角，美觀大方的視覺(jué)界面就像是一位化好了妝容的美女，交互設(shè)計(jì)師要做的就是朝她臉上潑一盆卸妝水，而后看清楚她的眉眼到底長(zhǎng)成了什么模樣。

我們也可以把同類型的功能歸納在一起觀察，看界面由上至下的排布究竟分成幾個(gè)層次。

例如貓眼電影的“我的”標(biāo)簽頁(yè)，從細(xì)節(jié)上就可以劃分成用戶的個(gè)人中心、用戶主動(dòng)造成的互動(dòng)行為和用戶高頻使用的購(gòu)票行為等部分，我們?cè)诜治鼋缑娴臅r(shí)候就可以將它們提煉出來(lái)，反向歸納成一項(xiàng)項(xiàng)的需求信息。

而如果你想要把歸納的范圍擴(kuò)大一些，想看出整個(gè)界面的用戶行為走勢(shì)，或者想看出貓眼電影的設(shè)計(jì)師是怎樣規(guī)劃界面的，也可以從歸納它的內(nèi)容模塊著手，用自己的分析語(yǔ)言描述界面的各部分有著怎樣的特征，這是總結(jié)歸納的范圍更大了一些。

貓眼電影的“我的”頁(yè)面很長(zhǎng)，超越了一個(gè)屏幕的高度，它后續(xù)的內(nèi)容我們也需要用歸納的方法把它還原成最基本的信息，排除了視覺(jué)效果的干擾，這張頁(yè)面在交互設(shè)計(jì)師眼中就是內(nèi)容和描述的聚合體，即使是最普通的功能也有著它的作用。

最后整個(gè)界面都可以被反向歸納成一張簡(jiǎn)單的信息圖，“我的”頁(yè)面的內(nèi)容布局清晰可見(jiàn)，其中哪些是高頻的任務(wù)場(chǎng)景、哪些是低頻的任務(wù)場(chǎng)景、哪些是貓眼電影導(dǎo)流的盈利渠道、哪些是產(chǎn)品附帶的基礎(chǔ)設(shè)置功能，全部都能從界面上看出來(lái)了。

總結(jié)

我們拆解界面的過(guò)程就是分析“這個(gè)東西對(duì)用戶有什么用處？”和“這個(gè)東西對(duì)企業(yè)有什么用處？”的過(guò)程，也就是逆向解析產(chǎn)品的用戶需求和企業(yè)需求的過(guò)程。

普通設(shè)計(jì)師的分析思路往往是東一榔頭西一棒子，視線掃過(guò)界面時(shí)總希望能找到它的設(shè)計(jì)亮點(diǎn)，如果我們轉(zhuǎn)換一種視角，將手里揮舞的榔頭和棒子收納起來(lái)，從上到下、從外到內(nèi)地把整個(gè)產(chǎn)品一層一層都拆解開(kāi)，就會(huì)看到它深層的布局。

執(zhí)著于創(chuàng)新的設(shè)計(jì)師總擔(dān)心自己的設(shè)計(jì)不能脫穎而出，有信息視角的交互設(shè)計(jì)師則會(huì)根據(jù)產(chǎn)品的特性和功能的作用，精心打磨每個(gè)設(shè)計(jì)點(diǎn)的細(xì)節(jié)，盡可能地考慮全面，不要讓它在你意想不到的地方突然冒出個(gè)問(wèn)題打你個(gè)措手不及。換句話說(shuō)，交互設(shè)計(jì)師要做的不是打扮自家產(chǎn)品，也不是人為的給它設(shè)計(jì)出某個(gè)創(chuàng)新的亮點(diǎn)，而是讓自家產(chǎn)品面對(duì)這個(gè)不確定的市場(chǎng)環(huán)境，具備強(qiáng)大的抗打擊能力、自我發(fā)展能力和自我調(diào)節(jié)能力。

所謂的創(chuàng)新，并不是在界面樣式和視角效果上的創(chuàng)新，而是在產(chǎn)品本質(zhì)上的進(jìn)階優(yōu)化。古人說(shuō)“買櫝還珠”，一個(gè)人在追逐珍珠的時(shí)候過(guò)度迷戀裝珍珠的盒子，和試圖把產(chǎn)品當(dāng)成自己試驗(yàn)創(chuàng)新想法的實(shí)驗(yàn)品，卻將創(chuàng)新失敗的風(fēng)險(xiǎn)轉(zhuǎn)嫁給企業(yè)的行為，豈不是非常類似嗎？

從工作的角度考慮，不愿意花費(fèi)水磨工夫夯實(shí)自身的基本功，卻把交互輸出物的質(zhì)量寄托在靈機(jī)一動(dòng)的創(chuàng)新意識(shí)上面，不見(jiàn)得是一件穩(wěn)妥的事情。

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

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