2018-12-24 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
昨天下午
微信在App Store發(fā)布了7.0版本
無論是品牌LOGO還是UI整體界面
都發(fā)生了重大的改變。
由于昨天開了一天的會
所以今天才寫出設(shè)計(jì)分析
下面我們進(jìn)入正題，
一起來看看微信做了哪些調(diào)整。
當(dāng)晚，張小龍也在朋友圈
發(fā)布了一段王陽明的話：
你未看此花時(shí)，此花與汝心同歸于寂；
你來看此花時(shí)，則此花顏色一時(shí)明白起來。
LOGO做了升級
通過微信的LOGO歷史
我們可以看到
新LOGO的圖形其實(shí)也做了些微調(diào)
圖形整體縮小了并且居中
使四周增加了更多的留白
從7.0版本我們能看出
整體都經(jīng)過了細(xì)致的調(diào)整
在顏色的對比上能夠看出很明顯的差別
調(diào)整后的新logo整體顏色
更為清淡了許多，
除此之外符號感也加強(qiáng)了不少。
據(jù)了解，全新LOGO已經(jīng)
開始在微信的各個(gè)子品牌中進(jìn)行使用。
我們在使用微信界面時(shí)都能夠看到。
除了LOGO的變化外，
米醋再來說說整體界面的變化。
開機(jī)畫面
進(jìn)入畫面之后，你會看見開屏動(dòng)畫是
藍(lán)天背景下的一枝格?；?，
文案的內(nèi)容也進(jìn)行了改變：
因你看見，所以存在，
同時(shí)也凸顯了升級與視覺的關(guān)聯(lián)。
不過米醋在這里想說
新畫面中的格?；ň拖裰欣夏甑膽?yīng)用一樣
散發(fā)出了寫意和對時(shí)尚的追求
再來說說整體的內(nèi)部變化
給米醋第一感覺就是更加扁平化
其次導(dǎo)航上的深黑色變成了白灰色，
讓整體的界面顯得更加的整體，層次感更加扁平
視覺集中在內(nèi)容塊上。
首頁
界面框框的設(shè)計(jì)
其實(shí)很早之前寫過一篇相關(guān)的設(shè)計(jì)分析
其中也講到了
對于左右距離越大，內(nèi)容信息越聚焦
層次感也越突出
這次微信的改版左右間距寬度的調(diào)整
讓內(nèi)容的層次變得更高
有興趣的同學(xué)可以看一下這篇文章
我們對細(xì)節(jié)進(jìn)行了像素化的對比
發(fā)現(xiàn)整體的圖標(biāo)內(nèi)容更為清晰
列表高度變得更高了
微信圖標(biāo)的顏色統(tǒng)一為LOGO色，
其次“發(fā)現(xiàn)”圖標(biāo)也進(jìn)行了加粗。
底部欄高度對比
從原來的的147px增加到168px
底部欄圖標(biāo)描邊對比
從原來的的1dp加粗到1.5dp
下滑小程序背景對比
深黑色的下拉背景改為了灰白色背景之后
讓上面不再顯得頭重腳輕
添加好友頁
添加朋友變化不大
下方的菜單欄沒有變化
頂部“添加朋友”的底色改為了灰色
添加好友的圖標(biāo)
于底部標(biāo)簽欄圖標(biāo)統(tǒng)一為24dp
個(gè)人主頁
對比一下效果
你就能發(fā)現(xiàn)很明顯的變化吧！
新版的設(shè)計(jì)，列表高度進(jìn)行了加高
讓用戶的點(diǎn)擊感變得更強(qiáng)
讓頁面的留白也增多了
讓視覺效果更加舒適輕松
其次圖標(biāo)進(jìn)行了更新
這樣的調(diào)整也能夠減少用戶的錯(cuò)誤率
單行列表高度對比
發(fā)現(xiàn)頁
同樣發(fā)現(xiàn)頁也進(jìn)行了細(xì)致的調(diào)整
除了更新了之前的圖標(biāo)
同時(shí)也增加了列表的高度，
使整個(gè)界面舒適了不少。
通訊錄
通訊錄的變化改了圖標(biāo)的顏色
同時(shí)去掉了深色的底色。
聊天頁
聊天頁面的上方的
功能圖標(biāo)顏色進(jìn)行了加深
去掉了icon背景的描邊
讓多圖標(biāo)的頁面更加輕松
另外輸入框的高度也進(jìn)行了增高
更易于用戶的點(diǎn)擊
朋友圈
朋友圈頁面除了個(gè)人頭像邊框更加圓滑
其次右上角的相機(jī)圖標(biāo)也做了相應(yīng)調(diào)整
刪除了左上角的“發(fā)現(xiàn)”字標(biāo)
錢包
再來說說微信的“錢包”，
更新后改為了“支付”。
零錢余額不會像從前那樣
直接在“零錢”下方顯示出來
頁面的設(shè)計(jì)也比之前變得更為好看了！
“好看”功能
去中心化，通過關(guān)系鏈，
提高內(nèi)容分發(fā)效率和質(zhì)量，
把朋友看的內(nèi)容推送給你。
但是像菊花一樣的圖標(biāo)
沒有體現(xiàn)出好看的識別度
新功能上線不太好建立
功能識別和印象。
會發(fā)現(xiàn)原來
點(diǎn)贊的位置變成了“好看”！
可以將你認(rèn)為好看的文章
進(jìn)行分析推薦，
當(dāng)然你也可以在看一看
里瀏覽朋友認(rèn)為好看的文章。
跟拍前置功能
跟拍功能前置到輸入框的表情選擇
可以添加自拍表情包
自拍表情包
聊天界面發(fā)表情時(shí)，
可以直接制作「拍自己的表情」！
還可以根據(jù)自己的需求添加文字
顏色可以隨意更換！
即刻視頻
點(diǎn)擊“我”之后，進(jìn)入個(gè)人頁面，
你會發(fā)現(xiàn)右上角多了一個(gè)照相機(jī)符號。
點(diǎn)擊它，可以立即錄制或者上傳一段小視頻。
你想要查看自己的即刻視頻，
可以點(diǎn)擊“我”，
在個(gè)人頁面的最上方，
就是你的即刻視頻，
下拉可以進(jìn)行錄制拍攝播放。
錄制完成之后，
還可以配樂、加表情符。
這應(yīng)該是本次微信7.0版本
更新最大的變化，發(fā)布之后，
在24小時(shí)之內(nèi)朋友能夠看到，
并且可以進(jìn)行互動(dòng)哦~~
發(fā)布后被點(diǎn)贊會顯示氣泡
即刻視頻可見
如果你的朋友發(fā)布了即刻視頻，
無論是在朋友圈還是群聊天，
點(diǎn)擊朋友頭像，也能看到他的即刻視頻。
當(dāng)頭像上有個(gè)圈
雙擊后就可以看到視頻了！
朋友圈相冊
打開朋友圈相冊
你也能看到“時(shí)刻視頻”的圖標(biāo)
點(diǎn)擊后之前錄制的視頻在那里都能看到~~
總體來說，此次的微信的升級進(jìn)行了很多地方的改變，其實(shí)核心最關(guān)鍵的是“好看”的功能，利用了關(guān)系鏈打通了朋友之間的互動(dòng)，讓“看一看”里面的內(nèi)容更有互動(dòng)感，而增加的“時(shí)刻視頻”，恐怕是堪稱史上最巨大的變化，也許這也意味著微信將全面進(jìn)軍短視頻領(lǐng)域 。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com