扣丁學堂UI設計培訓之微信大改版UI設計分析
2018-12-25 15:16:52
1708瀏覽
今天扣丁學堂UI電商設計培訓老師給大家分享一下關于微信大改版之UI設計分析詳解，12月21日，微信在APPStore發布了iOSV7.0版本，版本號從6.7.5直接跳到了7.0，而6.0的發布是在2014年。本次更新是重大版本更新，icon的改變，界面全新改版，新增「時刻視頻」，「錢包」升級為「支付」，公眾號「點贊」變成了「好看」，并且可以在「看一看」入口發現等；
基本有以下8大更新點：
1、微信圖標顏色變淺
2、開機畫面大變樣
3、微信界面變成白色調
4、新增“時刻視頻”功能
5、看一看，可瀏覽好友推薦好看的文章
6、公眾號文章的“贊”按鈕變成“好看”
7、新增“強提醒”功能
8、公眾號和小程序關注頁UI調整
今天我將從UI視角對本次微信7.0版本的更新進行對比分析~
一、圖標
我用photoshop拾色器進行對比發現，新版本圖標背景顏色變淺了，圖標主體大小比舊版本更小一些。
二、開屏（新增）
因你看見，所以存在
萬年不變的開屏，在7.0版本，用戶首次打開APP時，使用了視頻方式，給用戶一種全新的感官體驗。
三、首頁
通過對比發現，首頁的UI變化有以下幾點：
1、狀態欄、導航欄由之前的黑色變為了淺灰色#F2F2F2（此項為全局屬性）
2、導航欄“+”圖標改變為帶圓圈的“+”
3、新版本列表高度，比舊版本要高
4、底部TabBar欄高度增高
5、底部標簽欄圖標進行了優化，顏色統一使用了新icon的主色，沒選中狀態圖標顏色加深、對圖標粗細也進行了優化
6、頭像距離左邊距由20px增加到了32px
7、列表分割線變短，由和微信頭像對齊改為和微信昵稱對齊
8、頂部下拉小程序背景色，改變為淺灰色#F2F2F2
9、默認背景色變為#F2F2F2（全局屬性）
四、通訊錄
通過對比發現，通訊錄的UI變化有以下幾點：
1、圖標顏色進行了調整
2、每一個類目間距變大了
3、背景色變為#F2F2F2
五、發現
通過對比發現，UI變化有以下幾點：
1、列表高度增高，變得更高了
2、列表間距變小
3、背景色變為#F2F2F2
六、我
通過對比發現，UI變化有以下幾點：
1、頭像、昵稱、微信號區域高度變得更高，頭像、昵稱、微信號字體更大
2、列表間距變小
3、圖標進行了重新設計，風格由面性圖標變為線性圖標
4、列表高度增高
5、背景色變為#F2F2F2
6、新增“時刻視頻”功能入口
七、錢包
通過對比發現，UI變化有以下幾點：
1、錢包改變為“支付”
2、頂部功能區背景色改變為綠色背景色，使用了卡片設計
3、背景色變為#F2F2F2
八、朋友圈
通過對比發現，UI變化有以下幾點：
1、頂部背景圖增加了陰影范圍
2、背景圖高度增高
3、所有頭像變成了圓角設計，看起來更舒服
4、朋友圈點贊、評論圖標進行了重新設計
九、個人資料頁
通過對比發現，UI變化有以下幾點：
1、個人信息列表高度增高
2、個人信息字體更大
3、列表高度增高
4、發消息按鈕調整為通欄按鈕
5、背景色變為#F2F2F2
總結
1、UI界面整體設計變得更簡潔、扁平、現代。
2、應用了更多的大留白、大字體、大間距設計，讓界面更加簡潔明了和易用。
3、應用了更多的圓角設計，讓界面更具有親和力。
4、界面視覺更好看！
5、7.0版本，界面更加扁平化和年輕化，更貼切用戶，擁有了更好的用戶體驗；進一步增加了微信的可用性和易用性！
以上就是關于扣丁學堂扣丁學堂UI設計培訓之微信大改版UI設計分析的全部內容，
想要了解更多關于UI設計方面內容的小伙伴，請關注扣丁學堂UI培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育平臺為您提供權威的UI視頻教程，UI培訓后的前景無限，行業薪資和未來的發展會越來越好的，通過千鋒扣丁學堂金牌講師在線錄制的UI視頻教程，讓你快速掌握UI從入門到精通開發實戰技能。扣丁學堂UI交互設計交流群：568096113。
【關注微信公眾號獲取更多學習資料】
查看更多關于“ui設計資訊”的相關文章>>
標簽:
UI培訓
UI設計培訓
UI設計視頻
UI視頻教程
UI學習視頻
返回頂部