Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android學習系列(22)--App主界面比較

Android學習系列(22)--App主界面比較

編輯:Android開發實例

本文算是一篇漫談,談一談當前幾個流行應用的主界面布局,找個經典的布局我們自己也來實現一個。
不是為了追求到底有多難,而是為了明白我們確實需要這麼做。 
走個題,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.小結
從上面我們看到這些流行應用的主要布局方式,各有特點。
本文只是從整體布局分析,並沒有考慮局部布局和色彩調配的因素。
接下來我們選擇第四種模式作為我們的經典模式,草圖如下:


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

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved