Android學習系列(22)–App主介面比較

本文算是一篇漫談，談一談當前幾個流行應用的主介面布局，找個經典的布局我們自己也來實現一個。
不是為了追求到底有多難，而是為了明白我們確實需要這麼做。 
走個題，android的UI差異化市場依然很大，依然值得去挖掘。 
鑄就經典，是為了超越經典！
下面我們以下面10個應用來分析比較它們的主介面：
1.QQ2011
2.新浪微博
3.鳳凰周刊
4.小米讀書
5.
6.太平洋電腦網
7.360衛士
8.Camera360
9.福士點評網
10.挖財

1.QQ2011
QQ應用最新版本QQ2011 Beta3，從最新的版本看，介面比之前簡潔了一些。
我以夜間模式為例子：

可以看出來，QQ分為3大模組：空間動態，QQ聊天，其他QQ應用。這些最大的模組現實在底部
因為QQ聊天業務本身也有很多重要東西，如好友，qq群，記錄等等，所以qq聊天在上部分又分成3部分了。這也算是較大的模組。
基本上這麼一分，qq上該用的東西我們都能直覺上都看的見，寥寥數筆，就已經勾畫出最基本最重要的輪廓。
除此之外，qq有大量的設定和子功能，如狀態設定，搜尋好友，添加好友，皮膚設定等等， qq做法很簡單，就是分類分級，然後通過menu菜單顯示。
因為這部分功能不是聊天的最主要的需求，這樣分類分級非常的合理，不影響使用者介面，又能無聲無影的添加到應用中。

總而言之，qq能把這麼多斑駁的功能融合一體，簡約而不失強大，合理而不失風采。

2.新浪微博
新浪微博很早的版本給我得印象好像是挺垃圾的，不知道什麼時候升級的，現在的介面看行。

這個介面就不比qq了：
底部bottom則是業務劃分。
頂部banner為當前頁面的一個標題（主要標誌），能攜帶若干功能的捷徑； 
qq之前的版本好像也是這種劃分，這種布局的特點就是簡簡單單，福士化，使用者一開啟就知道怎麼找相應的功能。
缺點就是福士化，沒什麼特色，不夠炫。 

3.鳳凰周刊
鳳凰周刊的主介面不是一般的簡陋：

模組的劃分在頂部，這種布局個人覺得不如在底部進行模組的劃分。
主要是這個應用是提供雜誌下載的，並沒有提供其他的功能和設定，不然在頂部簡單的劃分，開啟介面第一眼就看到一排模組擠擠的，確實不大美觀。
而且最重要的是，它和新浪微博的布局比較，無形中少了頂部banner，導致無法直接添加若干主要的功能捷徑。
所以說，這個布局的特點就是簡單，簡單還是簡單，對應用的要求也是要簡單。
順便扯一個，其實鳳凰移動台的應用主介面還是挺大氣的：

4.小米讀書、、太平洋電腦網、挖財
這幾個應用的主介面和新浪微博接近，一個top banner+ bottom menu,在bottom中劃分模組，在top中做功能切入點，如果子模組還需要劃分，則top banner下面增加一個類似bottom的業務模組劃分。

  

  

這種布局的特點就是模組劃分分明，每個模組在第一介面能攜帶一兩個功能或者功能捷徑。

5.360衛士、福士點評網、Camera360
下面這幾個應用的介面又是一類，它們或許也有bottom的模組劃分，但是它們更喜歡把功能通過更直接的方式顯示在介面的正中央，這樣做的目的是凸顯這些功能在此應用的重要性，而的確如此，沒有這些功能，或者看不到這些功能，我們甚至就不知道這個應用意欲何為，如何使用等等。

     

這類應用與前面的應用最大的不同，應該從應用本身的服務目的來分析，這類應用強調的是使用者的主動互動性，而前面應用強調的是提供使用者最新的資訊。
目的不同，介面的設計相應的不同，各盡其用，都非常的合理。
當然，這類應用主介面布局和前面布局的不同，從效果上強調二級功能點，而且掩蓋了直接內容，從這點上資訊類應用一般不採用這種布局，但是反過來這類應用布局卻可以採用資訊類布局，比如360衛士就介如兩者之間。 

6.小結
從上面我們看到這些流行應用的主要布局方式，各有特點。
本文只是從整體布局分析，並沒有考慮局部布局和色彩調配的因素。
接下來我們選擇第四種模式作為我們的傳統模式，草圖如下：

下篇文章中我們來實現這樣的一個經典介面。