從25款天氣APP的“首頁”去看天氣產品的設計

5 評論 52749 瀏覽 55 收藏 28 分鐘

我選了一種非常干脆的做法,直接聚焦于App首頁面,最核心的肯定是在這里充分體現(一款產品首頁做到什么程度,也能反映背后的產品實力和產品理解,這里顯示的是產品認為對于用戶最有價值的是什么?),特別是感受一款產品的調性,所以下面關于產品分析的內容并不會涉及很多方面,也不討論優劣等,我們集中在“(最核心)天氣業務”就好。

天氣,基本是每個人在生活中都會關注的,它影響著我們的一些生活決策,比如特別是出行活動,所以,天氣的預報就非常有必要有價值了。

過去小時候,像我主要的獲知途徑就是,跟著家里看完新聞聯播等著接下來的天氣預報節目,大概就是先由天氣預報員從整體宏觀上講解一下天氣變化趨勢,然后依次具體到各個主要城市的未來一到兩天的天氣,期間可能出現一些特殊天氣情況的提示。根據這里獲得的天氣預報條件,決定明天穿什么衣服,是不是要帶傘,如果拿到現在可能更關注空氣質量等因素,所以也考慮要不要帶口罩。

現在,我們獲取天氣信息的渠道就更多了,而且天氣信息量能獲取的也更大,這里主要關注于App這個渠道。在具體說App之前,還是先回過頭來再稍作考慮一下:作為天氣用戶,我們核心的需求點是什么?

這么來講,一般我們說”天氣怎么樣”,這大概包含了想知道的哪些信息?最關鍵的,現在起碼會有以下3點(尤其是前2點):

  1. 晴天還是雨天?
  2. 氣溫多少?
  3. 空氣質量如何?

再從這3點延伸展開(非必需,是豐富面),對于某個地方,分別從時間、天氣要素這2個層面還有:

時間:

  1. 未來3天,一周,甚至更多天的天氣走向?
  2. 一天內每個小時段的天氣情況,特別是雨天,大概多久會下雨,大概多久會停?

天氣要素:有沒有風,濕度等如何?

這里并非做大而全的分析,其他層面(地理相關因素暫且忽略)不做考慮暫且就這些繼續吧,只抓最要緊的部分。

特別的,往本質一點去考慮,我們關注天氣其實并非關注天氣本身,而是為了從天氣信息中判斷決定接下來的生活安排,所以是“天氣因素”影響到觸發“接下來的行動(計劃)”。表面上我們關注的是天氣,實質是生活,天氣是我們關心生活的一個角度,一個切入口,從它可以看到自然生活的一面。

將這些內容匯總整理一下理解,做一點產品方向上的思考,從深度上天氣App可以分為2大類:

  1. 天氣信息展示。這相當于一個信息展示板,我只是到這里來看看天氣,獲取信息后離開。
  2. 生活助手。這相當于一個秘書,我在這里了解天氣,秘書還會提示建議一些生活決策供我參考,甚至呈上一份點心。

在上面的了解基礎上,我掃了一下目前市場上相關App還不少,我就有點好奇到底有哪些天氣App以及它們各是怎么在做,所以從App Store里找到了100多款天氣App。

經過一些篩選,比如有的實在太丑(丑到不能用),有的無法使用(比如數據異常),有的個別單位專用,有的是特殊用途(并非常用天氣需求),有的太赤裸裸橫條廣告,有的過于不人性化,有的很干擾太多,從功能可用性、粗暴廣告、低劣設計等因素剔除了絕大部分,這里收錄了25款(排名不分先后優劣)相對更加優質的App。

當然不可避免可能存在誤傷,所以個別可能你覺的很好的相關App沒有收錄在這里(這批收集時間為11月,新出來的這里也沒有),歡迎交流,如果真的好產品值得多加推薦,大家也都能發現更多美好的存在。

案例

接下來看看它們是怎么做的。介于這里數量不少,我選了一種非常干脆的做法,直接聚焦于App首頁面,最核心的肯定是在這里充分體現(一款產品首頁做到什么程度,也能反映背后的產品實力和產品理解,這里顯示的是產品認為對于用戶最有價值的是什么?),特別是感受一款產品的調性,所以下面關于產品分析的內容并不會涉及很多方面,也不討論優劣等,我們集中在“(最核心)天氣業務”就好。

依次的首頁截圖如下(部分頁面中地理信息有打碼):

1. 墨跡天氣(6.1.6)

1

墨跡天氣App

墨跡天氣的首頁上“信息非常豐富”,上部分的信息塊是“實時天氣信息”,特別給出了“短時內下雨”預告;下部分是“今天、明天的天氣信息”;中間還有個特色的小人,它會根據不同的天氣情況,顯示不同的穿著(帶沒帶傘)。

PS.頁面上點綴散布的“小廣告”不是關注重點,直接忽略,對于其他App也是如此處理。

那么,我們整理一下關于天氣業務的服務,在最核心的首頁上,墨跡天氣提供了3個方面的內容:

  1. 實時天氣信息(短時下雨預告):溫度、降水率、風級、空氣質量
  2. 今、明兩天的天氣信息:晴雨、溫度、空氣污染程度
  3. 以小人為呈現媒介的“天氣相關生活建議”(比如根據天氣穿什么樣的衣服)

以上基本足以囊括一般生活關于“天氣”的需要,甚至有富裕??梢钥闯?,墨跡天氣更注重“實時天氣、短時降雨、今明兩天天氣”這3個層面的天氣信息,偏“實時、短近期天氣”。

另外提一下,從大的框架上看,墨跡天氣是劃分出了3個版塊,默認是“天氣”,其次是“時景”,“我”最后。即使我們不切換到其它版塊,從“時景”這個名字也可以大概了解(當然我自己是體驗過了),這款產品提供了“天氣”主題以外,或者說延伸出去的生活內容。

2. 天氣預報(3.6.1 來自app夢工廠)

2

天氣預報App

天氣預報的首頁上的組成相對簡單,天氣信息主要集中在下部分,提供了“今天的天氣信息”(實時氣溫),以及一個天氣小人,它會根據不同天氣變換應景的(表情)狀態,點擊它還會出現對話氣泡顯示“今明兩天的天氣,及逗趣文字”。

所以這里就提供了1個方面的內容:

今(明兩天)的天氣信息:溫度、降水率、風級、空氣質量

這項信息也是對于天氣的最基本的需要了??梢钥闯?,天氣預報更注重“今(明兩天)的天氣信息”這1個層面的天氣信息,偏“實時、近期天氣”。

3. 天氣通(5.25)

3

天氣通App

天氣通的首頁上天氣信息塊也集中在下半部分,有“實時天氣”和“今、明兩天的天氣”。中間還有個默認折疊起來的“24h氣溫變化”。

這里有3個方面的內容:

  1. 實時天氣:溫度、晴雨、空氣質量
  2. 今、明兩天的天氣:晴雨、溫度范圍、空氣質量
  3. 24h氣溫變化

可以看到,天氣通更注重“實時天氣、今、明兩天的天氣”這2個層面的天氣信息,偏“實時,短近期天氣”。

4. 黃歷天氣(3.20.0.2)

4

黃歷天氣App

黃歷天氣的首頁上,天氣信息也主要在底部,不過左上角有個“今天空氣質量”,下部分是“實時天氣”,以及“今、明兩天的天氣”。

這里有2個方面的內容:

  1. 實時天氣:溫度、晴雨、空氣質量
  2. 今、明兩天的天氣:晴雨、溫度范圍

可以看到,黃歷天氣更注重“實時天氣、今、明兩天的天氣”這2個層面的天氣信息,偏“實時,近期天氣”。

這款產品還有2個額外的業務版塊,特別是“黃歷”,對于有這方面認知的人群來說,“黃歷+天氣”也確實算是很不錯的搭配,關鍵講得通。

5. 2345天氣王(3.5)

5

2345天氣王App

2345天氣王的首頁,右上角是“今天空氣質量”,上部中間是“今天天氣信息”,下部分是“15日天氣預報(入口)”、“今天詳情(入口)”、“明天詳情(入口)”和“15天天氣信息(入口)”。

這里有2個方面的內容:

  1. 今天天氣信息:晴雨、溫度范圍、當前溫度、風級、氣壓
  2. 15天天氣信息:晴雨、溫度范圍

可以看到,2345天氣王更注重“今天天氣信息、15天天氣信息”這2個層面的天氣信息,偏“近超長期天氣”。

6. 中央天氣預報(4.4.6)

6

中央天氣預報App

中央天氣預報的首頁上,上部分是“今天天氣信息”,底部是“明天、后天、大后天這3天的天氣”。

這里有2個方面的內容:

  1. 今天天氣信息:當前溫度、晴雨、溫度范圍、體感溫度、空氣質量、天氣發布時間
  2. 明天、后天、大后天這3天的天氣信息:晴雨、溫度范圍

中央天氣預報更注重“今天天氣信息、明天、后天、大后天這3天的天氣信息”這2個層面的天氣信息,偏“實時,近期天氣”。

7. Yahoo天氣(1.10.1)

7

Yahoo天氣App

Yahoo天氣的首頁,天氣信息就一塊,集中在底部左下角,是“今天的天氣信息”。

這里有1個方面的內容:

今天的天氣信息:實時溫度,晴雨、溫度范圍。

Yahoo天氣更注重“今天天氣信息”這1個層面的天氣信息,偏“實時、近期天氣”。

8. 最美天氣(2.2)

8

最美天氣App

最美天氣的首頁,右上角是“今天空氣質量”,下方是“實時溫度、風級、空氣質量提示”(短時降雨預測入口),“今、明2天的天氣信息”。

這里有2個方面的內容:

  1. 實時天氣信息:實時溫度,晴雨
  2. 今、明2天的天氣信息:晴雨、溫度范圍

最美天氣更注重“今天天氣信息”這2個層面的天氣信息,偏“實時,短近期天氣”。

這里有一個“實景”版塊,也是在從天氣主題去往外擴展內容。

9. 我的天氣(1.4.1)

9

我的天氣App

我的天氣的首頁,從上到下依次是“今天天氣信息”、“明天天氣信息”、“包括昨天在內的6天天氣信息”、“當前天氣信息(入口)”。

這里有3個方面的內容:

  1. 今、明天氣信息:溫度范圍、晴雨
  2. 6天天氣信息:晴雨、溫度范圍
  3. 實時天氣信息(入口):晴雨、當前溫度、空氣質量提示

我的天氣更注重“今、明天氣信息、6天天氣信息、實時天氣信息”這3個層面的天氣信息,偏“實時,近長期天氣”。

10. 天氣預報(1.1 hongyu wang)

10

天氣預報App

天氣預報的首頁,右上角是“今天空氣質量”,上部中間是“今天天氣信息”,下部分是“15日天氣預報(入口)”、“今天詳情(入口)”、“明天詳情(入口)”和“5天天氣信息”。

這里有2個方面的內容:

  1. 今、明天氣信息:晴雨、溫度范圍、當前溫度、風級、氣壓
  2. 5天天氣信息:晴雨、溫度范圍

我的天氣更注重“今、明天氣信息、5天天氣信息”這2個層面的天氣信息,偏“近長期天氣”。

11. PM2.5(2.5.1)

11

PM2.5App

PM2.5的首頁,右上角是“今天空氣質量”,底部是“AQI空氣質量指數”、“當前溫度、晴雨”、“PM2.5、PM10等空氣質量指標”。

這里有1個方面的內容:

今天氣信息:晴雨、空氣質量

PM2.5更注重“今天氣信息”這2個層面的天氣信息,偏“近期天氣”。

12.?天氣預報(2.5 YouLoft Tech)

12

天氣預報App

天氣預報的首頁,上部是“今天、明天、后天這3天的天氣信息”,底部是“實時天氣”。

這里有2個方面的內容:

  1. 今天、明天、后天這3天的天氣信息:晴雨、溫度范圍
  2. 實時天氣:溫度、有霧、PM2.5

天氣預報更注重“今天、明天、后天這3天的天氣信息、實時天氣”這2個層面的天氣信息,偏“實時、近期天氣”。

13. 彩云天氣(3.0)

13

彩云天氣App

彩云天氣的首頁,左上角是“今天空氣質量”,中部是“實時天氣(當前溫度、晴雨、風級)”,下部是“短時內降雨預告”。

這里有2個方面的內容:

  1. 實時天氣:當前溫度、晴雨、風級
  2. 短時內降雨

彩云天氣更注重“實時天氣、短時內降雨”這2個層面的天氣信息,偏“實時、短期天氣”。

14. 中國天氣通(6.0)

14

中國天氣通App

中國天氣通的首頁,上部是“實時天氣”,沿著時間軸依次往下是“短時內降雨預告、今天天氣、明天天氣、后天天氣(入口)”。

這里有3個方面的內容:

  1. 實時天氣:溫度、風級、空氣質量
  2. 短時內降雨
  3. 今、明這2天的天氣信息:晴雨、溫度范圍、風級

中國天氣通更注重“實時天氣、短時內降雨、今、明這2天的天氣信息”這3個層面的天氣信息,偏“實時、短近期天氣”。

15. Skycast(1.0.3)

15

SkycastApp

Skycast的首頁,整個默認就是“實時天氣(晴雨、溫度)”,下部是“24h內各小時天氣(入口)”,右劃依次看到各個小時的情況。

這里有2個方面的內容:

  1. 實時天氣:晴雨、溫度
  2. 24h內各小時天氣:晴雨、溫度

Skycast更注重“實時天氣、24h內各小時天氣”這2個層面的天氣信息,偏“實時、短期天氣”。

16. 天氣預報(1.0.0)

16

天氣預報App

天氣預報的首頁,上部分是“今天天氣”,底部是“明天、后天、大后天這3天的天氣”。

這里有2個方面的內容:

  1. 今天天氣:當前溫度、晴雨、溫度范圍、體感溫度、空氣質量、天氣發布時間
  2. 明天、后天、大后天這3天的天氣:晴雨、溫度范圍

天氣預報更注重“今天天氣、明天、后天、大后天這3天的天氣”這2個層面的天氣信息,偏“近期天氣”。

PS.它和“中央天氣預報”是一家。

17. 蔚藍地圖(3.1.4)

17

蔚藍地圖App

蔚藍地圖的首頁,中部是“實時天氣”,下部是“今天、明天、后天的天氣信息”。

這里有2個方面的內容:

  1. 實時天氣:溫度、晴雨、風級、濕度、空氣質量
  2. 今天、明天、后天這3天的天氣信息:晴雨、溫度范圍、空氣質量

蔚藍地圖更注重“實時天氣、今天、明天、后天這3天的天氣信息”這2個層面的天氣信息,偏“實時、近期天氣”。

18. 小蝦天氣(2.1.3)

18

小蝦天氣App

小蝦天氣的首頁,天氣信息集中在底部,“實時天氣(溫度、晴雨、風級、濕度、空氣質量)”,底部是“包括昨天在內的5天天氣信息”,外加一個小人(語音播報今天天氣)。

這里有2個方面的內容:

  1. 實時天氣:溫度、晴雨、風級、濕度、空氣質量
  2. 5天天氣信息:晴雨、溫度范圍

小蝦天氣更注重“實時天氣、5天天氣信息”這2個層面的天氣信息,偏“實時、長期天氣”。

19. 知趣天氣(3.2.1)

19

知趣天氣App

知趣天氣的首頁上,左上角是“實時溫度”、“今天溫度范圍”、“AQI169”,右上角是“空氣質量”、“明天天氣概況”,中部是“晴雨”,底部是“5天天氣信息”。

這里有2個方面的內容:

  1. 今天天氣:溫度、晴雨、空氣質量
  2. 5天天氣信息:晴雨

知趣天氣更注重“今天天氣、5天天氣信息”這2個層面的天氣信息,偏“長期天氣”。

20. 天氣(1.3.2 Aotesiqi LLC)

20

天氣App

天氣的首頁上,上部是“實時天氣”,下部是“4天天氣信息”。

這里有2個方面的內容:

  1. 實時天氣:溫度、晴雨
  2. 4天天氣信息:晴雨、溫度范圍

天氣更注重“實時天氣、4天天氣信息”這2個層面的天氣信息,偏“實時、長期天氣”。

21. 天氣預報(2.0.2 ?Shang Zou)

21

天氣預報App

天氣預報的首頁,上部是“今天天氣”,下部是“實時天氣”,“5個小時內天氣變化”,“6天天氣信息(入口)”。

這里有2個方面的內容:

  1. 今天天氣:溫度范圍、晴雨、空氣質量
  2. 實時天氣(短期預告):晴雨、溫度

天氣更注重“實時天氣(短期預告)、今天天氣”這2個層面的天氣信息,偏“實時、短近期天氣”。

22. 天氣君(4.0.3)

22

天氣君App

天氣君的首頁,天氣信息主要集中在下部,背景顯示“晴雨”,“實時天氣信息”,“明天天氣、后天天氣”。這小人點擊后顯示的內容,基本屬于“逗趣”,沒有天氣信息價值(就體驗中得知)。

這里有2個方面的內容:

  1. 實時天氣信息:溫度、晴雨、空氣質量、降雨率、風級、短期內降雨預告
  2. 明后這2天的天氣:晴雨、溫度范圍、空氣質量

天氣君更注重“實時天氣信息、明后這2天的天氣”這2個層面的天氣信息,偏“實時、短近期天氣”。

23. 天氣(1.0 Xiao He)

23

天氣App

天氣的首頁,上部是“實時天氣”,下部分是“5天天氣信息”,以及“穿衣指數等(入口)”。

這里有2個方面的內容:

  1. 實時天氣:晴雨、溫度、空氣質量、濕度
  2. 5天天氣信息:晴雨、溫度范圍

天氣更注重“實時天氣、5天天氣信息”這2個層面的天氣信息,偏“實時、長期天氣”。

24. 美天氣(3.2.4)

24

美天氣App

美天氣的首頁,天氣信息集中在底部,左下角是“實時溫度”,右下角是“今天天氣”。

這里有2個方面的內容:

  1. 實時天氣:溫度
  2. 今天天氣:晴雨、溫度范圍

美天氣更注重“實時天氣、今天天氣”這1個層面的天氣信息,偏“實時、近期天氣”。

25. 天氣家(2.1)

25

天氣家App

天氣家的首頁,背景圖顯示天氣對應場景效果,天氣信息集中在中部,是“實時天氣信息”。

這里有1個方面的內容:

實時天氣:溫度、晴雨、空氣質量、風級

天氣家更注重“實時天氣”這1個層面的天氣信息,偏“實時天氣”。

總體來說

  1. 這些天氣App主要以風景圖為背景,部分會依據實際天氣來顯示對應的內容(以告知天氣情況),有的則更多是美化裝飾。大多數的“天氣信息”集中在偏下方,其余頁面空間大量“留白”。
  2. “天氣信息”則主要分為“實時、短期預告、1-3天近期天氣、4-6天長期天氣、15天超長天氣”這5種劃分來有偏向的組合突顯。
  3. 少部分App從“天氣”在往“生活”層面去擴展,有的體現在明顯的業務版塊劃分,有的則通過一些新穎的玩法(比如動畫小人物、黃歷、采花等)來提供。

以上僅為淺嘗后的一家之言,個人理解而已,歡迎交流,也許我說的都是錯的。ps.這里的編輯器上傳圖片體驗很一般,速度慢、無提示……

iOS版本,10.1.1

 

本文由 @鯉洋 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 收集這么多,都沒有細細分析下去,還不如選擇幾個代表性的,全面分析。

    來自福建 回復
  2. 背景圖自定義,跟隨天氣的霧化,虛化,雨化分享的自定義自拍圖片,獨有特色的分享模式的可自定義的精簡APP才是最有價值的。順帶學習下微信朋友圈的模糊照片可擦拭查看的方式,肯定又是爆款。懸念,又達到得式的揭曉懸念的心里。撩妹手法。

    回復
  3. 沒有get到up主的點,做了這么多工作是為了干嘛。感覺只是信息集合,沒有看到有營養的分析。選取的應用也可以根據你自己設定的維度來分類舉例,畢竟也沒有挨個枚舉。

    來自北京 回復
  4. 很費力氣,意義不大

    來自日本 回復
  5. 很用心,但是看得眼都花了~感覺大同小異~每個公司都不能脫穎而出啊~

    來自北京 回復