起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識掌握這4點，UI排版再無難題
本文和大家聊下 UI 設計中的一些排版的設計原則，作為 UI/UX 設計師，如何更加有方法的去掌握排版設計，這樣能保證你在設計中，界面排版能力到達一個長期穩定的水準，而不是時好時壞。
UI排版4大黃金原則：
- 視覺焦點
- 層次結構
- 視覺重量
- 視覺方向
01 視覺焦點
視覺焦點就是在界面中占主導地位的視覺元素，第一時間進入你眼睛，在整個設計中不能強調所有設計元素；需要確保關鍵元素用戶的操作目標是清晰的。
上圖左側界面中,作者通過圖形黑色塊來強調重要的Button，這樣能吸引你的注意力，關鍵元素高亮顯示，比如添加小圖標
這個選座購票中，中間座位元素都是同一個，但是選中后的效果突出，形成視覺焦點，右邊的空狀態界面提示按鈕形成焦點
這是反面例子：右邊界面所有元素看起來都很重要，沒有一個明確的視覺方向指引，看起來有顏色的都能點擊？左邊的其實設計也是有點問題，整個界面比較輕浮，顏色太多。
02 層次結構
確保在幾秒鐘內,用戶就能明確知道關鍵要點和頁面元素之間的關系，并且順利快速的完成當前任務。建立視覺層次結構可以通過大小，對比，顏色，肌理，留白，空間等可感知的視覺元素；好的設計它的視覺層次結構分明且符合用戶閱讀習慣
界面中的視覺關系我標注出來了，我們可以思考別人作品是通過什么來表達這種層次關系；其實可以直觀看出運用有顏色、大小，明暗對比（列表文字關系）。
頂部視覺焦點第一也是導航比較重要的一部分，下面介紹設計師和聯系圖標，右邊頁面頂部視覺重量大，里面文字通過明暗關系區分層級
上面的案例我通過序號標注層級關系
03 視覺重量
如何去衡量視覺重量，影響視覺重量的因素有大小、對比、顏色、留白、形狀、位置等等，那么在一個界面中如何把握視覺重量的比例，下面看幾個例子。
看完有什么感受嗎？他們大小都是120px
第一個例子：為何左邊看起來比右邊大
第二個例子：為何黑色視覺重量比較大第三個例子：為何紅紫色比左邊方塊更吸引眼球
上面三個場景我們會在界面中和圖標設計中會經常遇到。
下圖是調整后的大小左邊方形大小是108px 右邊圓形還是120px
再來看個列子：
圖左邊為何我會第一時間留意中間logo 而不是大面積的藍紫色，因為留白，周圍沒有任何元素。圖右邊按鈕第一時間吸引我，這就是通過顏色來吸引我的視覺焦點，需要關注的重點的地方。
圖左邊購買按鈕和評分，購買按鈕第一進入眼睛，黑色在白底上視覺重量比較大。圖右邊選座購票區域，都是圓形，通過顏色來區分他們之間的層級關系，重要的內容通過顏色強調，次要的通過明暗關系來表達
04 視覺方向
前面講了視覺重量，它能第一時間把你帶到特定重要的位置，那么接下來視覺方向是引導的一個作用，設計師要做的就是通過視覺引導，讓用戶能快速完成任務和達到預期目標，常用的視覺引導有Fpattern 和 Zpattern,下面來和大家詳細說下
左邊圖標和右邊列表形成一個豎向軸的概念，那么就會有線，線連接元素的方向。右圖再看下形成Z字結構 ，就是我們說的Z模式
上圖6個功能入口的圖標水平排列，在頁面內系統的建立一個平行軸的關系，所以視覺方向比較清晰.
總的來說要形成視覺方向就需要有線，這條線是看不見摸不著，他是通過軸來形成。如何形成軸的概念，那通過對齊，相同形狀元素
總結
上面一共說了UI排版中常用的四大排版黃金原則，綜合使用能給排版設計帶來質的提升。視覺焦點、層次結構、視覺重量,三者相互影響，最后視覺方向是前面三者影響的結構。
用戶能否順利在你的產品完成任務，達到預期目標，全靠視覺方向指引，那么這些我們通過大小、對比、顏色、留白、形狀、位置等來協調使用他們
#專欄作家#
Tony，微信公眾號：洞見設計，人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長，簡歷指導，每周分享最有價值的設計經驗，擅長產品體驗設計，關注【洞見設計】后臺回復“彩蛋”領取設計資料。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
