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