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

創(chuàng)新能力似乎是交互設計師必須要具備的一種能力，因為論壇上到處都是類似于“用價值公式來衡量創(chuàng)新”、“如何做好產(chǎn)品的跨界創(chuàng)新”、“深度理解創(chuàng)新三要素”之類的文章，而我認為，對于大部分普通設計師來說，一味追求創(chuàng)業(yè)是本末倒置的。

創(chuàng)新能力固然是設計師通向大師之路必備的能力，但是在普通設計師的日常工作中，創(chuàng)新屬于打破難關的冒險嘗試，而不是維持產(chǎn)品的基本招數(shù)。

交互設計師的視角不應該是炫目多彩的，而應該是穩(wěn)健中帶著強悍的洞察力，好的界面是信息化的，而不是創(chuàng)新化的。

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

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

今日頭條

今日頭條是一款非常成熟化的新聞類APP，它的首頁由上至下包含了非常多的功能點和新聞信息，假如說你是一個新聞類產(chǎn)品的交互設計師，領導讓你分析今日頭條在界面設計方面的優(yōu)劣勢， 你要怎樣去拆解這款產(chǎn)品呢？

今日頭條相對來說還是比較好分析的一款產(chǎn)品，請大家記住一點，用戶量越大的產(chǎn)品其實越好分析，這不僅是因為它的設計模式輕易不會更改，更是因為它知名度高，所以網(wǎng)絡上有著鋪天蓋地的新聞、文章、問答詳情可以幫助你看透這款產(chǎn)品，越成熟的產(chǎn)品越透明，理解起來也越容易。

首先我們可以把界面框架按照同等大小的比例畫出來，用簡單的矩形線條勾勒出一個簡單的線框，工具可以使用最基本的PPT，也可以手繪，手機屏幕的截圖有多大，我們畫出來的矩形就有多大。

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

再往下面是搜索和發(fā)布兩個功能，它們在左側(cè)的真實界面中是由“圖標+文字”展示的，我們再重新繪制的時候，可以將其還原為基本的信息元素——比如搜索功能就是“搜索圖標+一行提示性的文字”，發(fā)布功能則是“點擊發(fā)布可以發(fā)布什么內(nèi)容”。

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

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

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

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

而在下面配有圖片的新聞條目中，“新聞來源”這項信息被更換為了“專題”，這說明這條新聞并不是從其他新聞渠道抓取來的，而是今日頭條獨家運營的新聞（或者是它掌握有版權的內(nèi)容），因此它沒有標注新聞來源。

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

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

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

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

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

貓眼電影

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

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

例如貓眼電影的“我的”標簽頁，從細節(jié)上就可以劃分成用戶的個人中心、用戶主動造成的互動行為和用戶高頻使用的購票行為等部分，我們在分析界面的時候就可以將它們提煉出來，反向歸納成一項項的需求信息。

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

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

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

總結(jié)

我們拆解界面的過程就是分析“這個東西對用戶有什么用處？”和“這個東西對企業(yè)有什么用處？”的過程，也就是逆向解析產(chǎn)品的用戶需求和企業(yè)需求的過程。普通設計師的分析思路往往是東一榔頭西一棒子，視線掃過界面時總希望能找到它的設計亮點，如果我們轉(zhuǎn)換一種視角，將手里揮舞的榔頭和棒子收納起來，從上到下、從外到內(nèi)地把整個產(chǎn)品一層一層都拆解開，就會看到它深層的布局。

執(zhí)著于創(chuàng)新的設計師總擔心自己的設計不能脫穎而出，有信息視角的交互設計師則會根據(jù)產(chǎn)品的特性和功能的作用，精心打磨每個設計點的細節(jié)，盡可能地考慮全面，不要讓它在你意想不到的地方突然冒出個問題打你個措手不及。

換句話說，交互設計師要做的不是打扮自家產(chǎn)品，也不是人為的給它設計出某個創(chuàng)新的亮點，而是讓自家產(chǎn)品面對這個不確定的市場環(huán)境，具備強大的抗打擊能力、自我發(fā)展能力和自我調(diào)節(jié)能力。

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

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

原作者：小龍 (集創(chuàng)堂)