如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

 昨天下午 

微信在App Store發(fā)布了7.0版本

無論是品牌LOGO還是UI整體界面

都發(fā)生了重大的改變。

由于昨天開了一天的會

所以今天才寫出設(shè)計分析

下面我們進入正題，

一起來看看微信做了哪些調(diào)整。

當(dāng)晚，張小龍也在朋友圈

發(fā)布了一段王陽明的話：

你未看此花時，此花與汝心同歸于寂；

你來看此花時，則此花顏色一時明白起來。

LOGO做了升級

通過微信的LOGO歷史

我們可以看到

新LOGO的圖形其實也做了些微調(diào)

圖形整體縮小了并且居中

使四周增加了更多的留白

從7.0版本我們能看出

整體都經(jīng)過了細(xì)致的調(diào)整

在顏色的對比上能夠看出很明顯的差別

調(diào)整后的新logo整體顏色

更為清淡了許多，

除此之外符號感也加強了不少。

據(jù)了解，全新LOGO已經(jīng)

開始在微信的各個子品牌中進行使用。

我們在使用微信界面時都能夠看到。

除了LOGO的變化外，

米醋再來說說整體界面的變化。

開機畫面

進入畫面之后，你會看見開屏動畫是

藍(lán)天背景下的一枝格?；?，

文案的內(nèi)容也進行了改變：

因你看見，所以存在，

同時也凸顯了升級與視覺的關(guān)聯(lián)。

不過米醋在這里想說

新畫面中的格?；ň拖裰欣夏甑膽?yīng)用一樣

散發(fā)出了寫意和對時尚的追求

---

再來說說整體的內(nèi)部變化

給米醋第一感覺就是更加扁平化

其次導(dǎo)航上的深黑色變成了白灰色，

讓整體的界面顯得更加的整體，層次感更加扁平

視覺集中在內(nèi)容塊上。

 

   

首頁

界面框框的設(shè)計

其實很早之前寫過一篇相關(guān)的設(shè)計分析

其中也講到了

對于左右距離越大，內(nèi)容信息越聚焦

層次感也越突出

這次微信的改版左右間距寬度的調(diào)整

讓內(nèi)容的層次變得更高

有興趣的同學(xué)可以看一下這篇文章

【解構(gòu)界面】對齊！框框?。∕ICU出品）

我們對細(xì)節(jié)進行了像素化的對比

發(fā)現(xiàn)整體的圖標(biāo)內(nèi)容更為清晰

列表高度變得更高了

微信圖標(biāo)的顏色統(tǒng)一為LOGO色，

其次“發(fā)現(xiàn)”圖標(biāo)也進行了加粗。

底部欄高度對比

從原來的的147px增加到168px

底部欄圖標(biāo)描邊對比

從原來的的1dp加粗到1.5dp

下滑小程序背景對比

深黑色的下拉背景改為了灰白色背景之后

讓上面不再顯得頭重腳輕

添加好友頁

添加朋友變化不大

下方的菜單欄沒有變化

頂部“添加朋友”的底色改為了灰色

添加好友的圖標(biāo)

于底部標(biāo)簽欄圖標(biāo)統(tǒng)一為24dp

個人主頁

對比一下效果

你就能發(fā)現(xiàn)很明顯的變化吧！

新版的設(shè)計，列表高度進行了加高

讓用戶的點擊感變得更強

讓頁面的留白也增多了

讓視覺效果更加舒適輕松

其次圖標(biāo)進行了更新

這樣的調(diào)整也能夠減少用戶的錯誤率

單行列表高度對比

     

發(fā)現(xiàn)頁

同樣發(fā)現(xiàn)頁也進行了細(xì)致的調(diào)整

除了更新了之前的圖標(biāo)

同時也增加了列表的高度，

使整個界面舒適了不少。

通訊錄

通訊錄的變化改了圖標(biāo)的顏色

同時去掉了深色的底色。

聊天頁

聊天頁面的上方的

功能圖標(biāo)顏色進行了加深

去掉了icon背景的描邊

讓多圖標(biāo)的頁面更加輕松

另外輸入框的高度也進行了增高

更易于用戶的點擊

朋友圈

朋友圈頁面除了個人頭像邊框更加圓滑

其次右上角的相機圖標(biāo)也做了相應(yīng)調(diào)整

刪除了左上角的“發(fā)現(xiàn)”字標(biāo)

錢包

再來說說微信的“錢包”，

更新后改為了“支付”。

零錢余額不會像從前那樣

直接在“零錢”下方顯示出來

頁面的設(shè)計也比之前變得更為好看了！

“好看”功能

去中心化，通過關(guān)系鏈，

提高內(nèi)容分發(fā)效率和質(zhì)量，

把朋友看的內(nèi)容推送給你。

但是像菊花一樣的圖標(biāo)

沒有體現(xiàn)出好看的識別度

新功能上線不太好建立

功能識別和印象。

會發(fā)現(xiàn)原來

點贊的位置變成了“好看”！

可以將你認(rèn)為好看的文章

進行分析推薦，

當(dāng)然你也可以在看一看

里瀏覽朋友認(rèn)為好看的文章。

跟拍前置功能

跟拍功能前置到輸入框的表情選擇

可以添加自拍表情包

自拍表情包

聊天界面發(fā)表情時，

可以直接制作「拍自己的表情」！

還可以根據(jù)自己的需求添加文字

顏色可以隨意更換！

 即刻視頻

點擊“我”之后，進入個人頁面，

你會發(fā)現(xiàn)右上角多了一個照相機符號。

點擊它，可以立即錄制或者上傳一段小視頻。

你想要查看自己的即刻視頻，

可以點擊“我”，

在個人頁面的最上方，

就是你的即刻視頻，

下拉可以進行錄制拍攝播放。

錄制完成之后，

還可以配樂、加表情符。

這應(yīng)該是本次微信7.0版本

更新最大的變化，發(fā)布之后，

在24小時之內(nèi)朋友能夠看到，

并且可以進行互動哦~~

發(fā)布后被點贊會顯示氣泡

即刻視頻可見

如果你的朋友發(fā)布了即刻視頻，

無論是在朋友圈還是群聊天，

點擊朋友頭像，也能看到他的即刻視頻。 

當(dāng)頭像上有個圈

雙擊后就可以看到視頻了！

朋友圈相冊

打開朋友圈相冊

你也能看到“時刻視頻”的圖標(biāo)

點擊后之前錄制的視頻在那里都能看到~~

總體來說，此次的微信的升級進行了很多地方的改變，其實核心最關(guān)鍵的是“好看”的功能，利用了關(guān)系鏈打通了朋友之間的互動，讓“看一看”里面的內(nèi)容更有互動感，而增加的“時刻視頻”，恐怕是堪稱史上最巨大的變化，也許這也意味著微信將全面進軍短視頻領(lǐng)域 。

藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計