(資料圖)

今天我們來調一個桌面端的設置頁面，它不要求有多么難的視覺效果，只是很考驗 UI 排版的基本功，怎么把這個頁面的內容處理的井井有條，看起來清晰不費事兒是這次的首要難點。這個是設計師做好給到：看著比較凌亂，經過修改之后：原版凌亂的原因究竟是什么，以及怎么讓它不凌亂，下面就來說一說01 現(xiàn)在需要處理的顏色關系很多我們一共要通過顏色區(qū)分出以下 6 組關系AB、BC、BE、CD、CE、DE這樣做難度就很高，卡片與卡片之間就很容易融在一起，對比度拉不開。所以我先丟掉一些不必要存在的關系，讓我們處理起來簡單一些只留下 BC、CD 兩組關系這樣結構簡單了，顏色層次也比較好處理！02 站在用戶的角度，思考如何傳達頁面意思自己光想很難，可以看一些相同頁面，看看別人在這方面是怎么做的，取其精華，去其糟粕。比如微軟的這個設計：它在標題就明確寫明并告知用戶可以在這個頁面做什么操作也用大大大字號標明了是幾號屏幕這兩點是可以運用在我們的設計上的。它不好的一點是下面的四個按鈕，讓人很難沒有選擇困難癥，這點我們就不參考了· 我們也在標題標明含義、把屏幕數(shù)字放大· 由于整體界面都是左對齊，這里也要調整為左對齊才順眼些·「檢測」和「標識」按鈕的位置，出于對頁面的理解，改在右上角也更合適：·「應用」和「恢復」的按鈕只有在用戶改變屏幕排列順序后，才顯示，所以根據(jù)親密性，不如把這倆按鈕跟上面屏幕放在一起。而且它的重要性跟上面兩個按鈕也不一致，所以不需要框起來，只需要用文字按鈕就行?，F(xiàn)在頁面的框架已經處理好了，接下來就是要仔細的思考頁面中的間距、寬度高度，才能進一步讓頁面看起來更清晰更美觀一些。03 根據(jù)黃金分割和經驗，調整頁面中的高度、寬度、間距1. 首先是內容的寬度，要定多寬？我們可以先把高度確定下來，再根據(jù)黃金分割去定寬度。在高度上，我想要一窗口展示完，不希望還要滑動才能看到一些內容，所以設定內容邊框距離底部為24px，高度就確定了。再根據(jù)黃金分割，高度除寬度約為 0.6 寬度定為這么寬：（ps：這里輸入框寬度也不能隨意，要對齊填滿頁面的寬度）2. 上下分割也不可以草率隨便，尋找最舒服的位置現(xiàn)在的分割是 55 分還是盡量去 靠近 黃金分割：先按照標準把它比例定為 0.6會發(fā)現(xiàn)下面的選擇框高度 有些擁擠，可以再高一些，只要保證下面不擁擠，但是整體的比例分割又 靠近 黃金分割即可。3. 左右的模塊分割也可以依據(jù)黃金分割這樣就調整得差不多了，相較于原版，是不是變得更清晰直觀了一點呢？原版修改后總結以上就是我的一點做稿心得，希望能對你有啟發(fā)～想學習更多，可以關注第六期UI課程，更新了很多最新案例，詳情看下方鏈接：

關鍵詞： 黃金分割 差不多了 選擇困難癥