微信7.0大改版之UI設計分析

12月21日,微信在APP Store發佈了iOS V7.0版本,版本號從 6.7.5迭代到了 7.0,而6.0 的發佈是在2014年。本次更新是重大版本更新,icon的改變,界面全新改版,新增「時刻視頻」,「錢包」升級爲「支付」,公衆號「點贊」變成了「好看」,並且可以在「看一看」入口發現等,可謂產品經理煞費心思,接下來剛哥進行全面解讀。
微信7.0大改版之UI設計分析
本次的大更新雖然視覺變化大,總結起來基本就是8大更新點:

1、微信圖標顏色變淺(由環保綠變成原諒綠)

2、開機畫面大變樣(全局觀向微觀世界轉變)

3、微信界面變成白色調

4、新增“時刻視頻”功能

5、看一看,可瀏覽好友推薦好看的文章

6、公衆號文章的“贊”按鈕變成“好看”

7、新增“強提醒”功能

8、公衆號和小程序關注頁UI調整

下面從UI視角對本次微信7.0版本的更新進行對比分析

一、圖標
微信7.0大改版之UI設計分析

使用photoshop拾色器進行對比發現,新版本圖標背景顏色變淺了,圖標主體大小比舊版本更小一些。

二、啓動頁(新增)

因你看見,所以存在
微信7.0大改版之UI設計分析

萬年不變的啓動頁,在7.0版本,用戶首次打開APP時,使用了視頻方式,給用戶一種全新的感官體驗。

三、首頁

微信7.0大改版之UI設計分析

通過對比發現,首頁的UI變化有以下幾點:

1、狀態欄、導航欄由之前的黑色變爲了淺灰色#F2F2F2(此項爲全局屬性)

2、導航欄“+”圖標改變爲帶圓圈的“+”

3、新版本列表高度,比舊版本要高

4、底部TabBar欄高度增高

5、底部標籤欄圖標進行了優化,顏色統一使用了新icon的主色,沒選中狀態圖標顏色加深、對圖標粗細也進行了優化

6、頭像距離左邊距由20px增加到了32px

7、列表分割線變短,由和微信頭像對齊改爲和微信暱稱對齊

8、頂部下拉小程序背景色,改變爲淺灰色#F2F2F2

9、默認背景色變爲#F2F2F2(全局屬性)

四、通訊錄

微信7.0大改版之UI設計分析

通過對比發現,通訊錄的UI變化有以下幾點:

1、圖標顏色進行了調整

2、每一個類目間距變大了

3、背景色變爲#F2F2F2

五、發現

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、列表高度增高,變得更高了

2、列表間距變小

3、背景色變爲#F2F2F2

六、我

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、頭像、暱稱、微信號區域高度變得更高,頭像、暱稱、微信號字體更大

2、列表間距變小

3、圖標進行了重新設計,風格由面性圖標變爲線性圖標

4、列表高度增高

5、背景色變爲#F2F2F2

6、新增“時刻視頻”功能入口

七、錢包

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、錢包改變爲“支付”

2、頂部功能區背景色改變爲綠色背景色,使用了卡片設計

3、背景色變爲#F2F2F2

八、朋友圈

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、頂部背景圖增加了陰影範圍

2、背景圖高度增高

3、所有頭像變成了圓角設計,看起來更舒服

4、朋友圈點贊、評論圖標進行了重新設計

九、個人資料頁

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、個人信息列表高度增高

2、個人信息字體更大

3、列表高度增高

4、發消息按鈕調整爲通欄按鈕

5、背景色變爲#F2F2F2

十、聊天詳情

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、列表高度增高

2、新增“強提醒”功能

3、背景色變爲#F2F2F2

十一、搜索頁

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、“取消” 顏色由綠色變爲黑色

2、6項指定內容文件由綠色改變爲藍色

3、背景色變爲#F2F2F2

4、新增語音搜索功能

十二、小程序主頁

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、主界面進行了重新設計

2、關注公衆號、取消關注文字顏色由綠色改變爲藍色

3、背景色變爲#F2F2F2

十三、聊天對話頁

微信7.0大改版之UI設計分析

通過對比發現,UI變化有以下幾點:

1、聊天頭像增加了圓角設計,由直角轉化爲圓角設計

2、去掉了聊天氣泡的描邊線,讓界面更加輕鬆

3、去掉了頭像的描邊線,讓界面更加輕鬆

4、聊天輸入框圖標進行重新設計,顏色更深,讓用戶更易點擊

5、背景色變爲#F2F2F2

十四、新增功能

1、新增“強提醒功能”

微信7.0大改版之UI設計分析

2、新增“時刻視頻”

3、“點贊” 改爲“好看”

微信7.0大改版之UI設計分析

總結

1、UI界面整體設計變得更簡潔、扁平、現代。

2、應用了更多的大留白、大字體、大間距設計,讓界面更加簡潔明瞭和易用。

3、應用了更多的圓角設計,讓界面更具有親和力。

4、界面視覺更好看!

5、7.0版本,界面更加扁平化和年輕化,更貼切用戶,擁有了更好的用戶體驗;進一步增加了微信的可用性和易用性。引領2019年BAT第三方應用的發展方向。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章