交互設計師必備技能之一——拆解UI界面

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

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

創新能力固然是設計師通向大師之路必備的能力,但是在普通設計師的日常工作中,創新屬于打破難關的冒險嘗試,而不是維持產品的基本招數。

交互設計師的視角不應該是炫目多彩的,而應該是穩健中帶著強悍的洞察力,好的界面是信息化的,而不是創新化的。

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

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

 

 

今日頭條

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

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

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

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

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

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

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

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

 

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

 

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

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

搜索的作用是輔助用戶根據關鍵詞查詢他想要的內容,這是有明確目標的用戶最主要使用的新聞查詢工具。

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

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

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

 

 

貓眼電影

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

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

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

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

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

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

 

總結

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

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

換句話說,交互設計師要做的不是打扮自家產品,也不是人為的給它設計出某個創新的亮點,而是讓自家產品面對這個不確定的市場環境,具備強大的抗打擊能力、自我發展能力和自我調節能力。

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

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

 

 

原作者:小龍 (集創堂)

每天更新,
全站高品質素材免費下載!