2021-7-2 鶴鶴
設計行業每天發生著翻天覆地的變化，隨著專業的發展，我們也在不斷的學習新的技巧和趨勢，但同時我們也要明白，設計中那些基礎的UI準則，才是好的趨勢和風格建立的基礎。今天我們就一起來聊聊做好設計最重要的能力之一：區分視覺層次。
視覺層次你可以理解為，通過將界面元素進行設計上的區分，引導用戶的注意力，并使用戶的注意力始終集中在頁面的關鍵地方。但是今天沒有一個方法可以一直控制用戶注意力，就像我們今天做設計一樣，不同的產品要用不同的設計手法去設計，才能達到幫助用戶分清主次的作用。
視覺層次不僅僅包含文字有關，它還包含我們的圖片，視頻按鈕以及文字以外的視覺元素。所以當你設計一個網頁時候，除了網站整體的顏色，排版，圖片也能夠影響視覺層次。那么如何讓設計的層次更清晰，常用方法有哪些，今天我們一起來聊聊關于設計層次，希望可以幫助到你。
▲如上圖插畫的比重很大，在設計這種大的元素時，你的每個元素比例和細節處理都被同時放大了，我們可以看見這副插畫四周還運用了很多元素，讓頁面達到平衡，同時這個畫面和旁邊的文字場景也很好融合在一起。一個好的設計一定是通過視覺手段讓用戶理解信息更加準確，在看完頁面文字和圖片后，很自然的引導到底部的按鈕，這才能算是一個很引人注目的設計。
▲Zenly：國外知名產品，在引導頁面設計時候運用紅色按鈕吸引用戶注意，在App主頁面里面，通過深藍色強調選中效果以及Tab.
▲Tiktok：抖音海外版本設計，整體UI部分非常簡單，頁面還是一如既往突出內容為主，所以在整個設計上就通過色彩來強調頁面優先級，比如拍攝，分享，選擇這些核心操作都通過色彩來引導完成任務。
▲如上圖，選中的黑色視覺重量最重，其次是藍色選中效果，最后是未選中的黑色，視覺重量幾乎我們每一個頁面中都會使用到。
▲headspace這款產品我非常喜歡，將情感化用到了極致，在頁面很多細節地方運用了不同的小橙人在背景上，視覺重量有輕有重，通過不同視覺重量來表達頁面內容，非常巧妙。
▲在列表的表達上，不同視覺重量感受是不一樣的，比如左邊的視覺重量更輕一點，用戶關注圖形同時也去關注文字內容，右邊這個視覺更重，更加引導用戶去點擊功能模塊內容。
▲設計師熟悉的medium官方App設計，在正文閱讀時，同樣采用不同的視覺重點來突出重要信息，比如左邊通過字重以及文字背景綠色底色和正文對比，非常醒目。右側通過淺綠色作為背景強調突出。
▲同樣在一些重要位置，Medium也是運用視覺重量處理，如左圖通過頂部提示條提示可以通過語音播放，在右側付費文章通過行動按鈕引導用戶升級付費。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務