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