火星網校
如何提高UI設計中畫面層次感
發(fā)布時間：2024-03-14 15:55:49 瀏覽量：124次
很多設計師容易犯一個錯：設計不明確。設計一旦不明確，就容易讓用戶產生疑惑，甚至認為出現(xiàn)了bug!我的原則就是，要么不做變化，要做咱就做的徹底一點，明確一點!今天我就針對如何提高UI設計中畫面層次感進行簡單的說明。
我從以下方面舉幾個例子：
1.間距
2.大小
3.樣式
4.顏色
1.間距
當信息內容需要區(qū)隔的時候，最常用的兩種方式：
一種是加一條細細的分割線;
另一種是加一條粗粗的分割塊：
我們有一次在加分割塊的時候就出現(xiàn)了一個小失誤，把分割塊設定為4pt：
這樣會存在什么問題?
會讓用戶懷疑，這是粗一點的線條?還是細一點的色塊?
所以為了避免這樣情況的發(fā)生，線條就細點0.5pt，色塊就粗點10pt(反正稍微大一點就行)，明確一點：
再比如之前有一個小案例，大概的信息是這樣排版的：
不細看也沒啥大問題，但是仔細觀察就會發(fā)現(xiàn)，在間距方面有一定的優(yōu)化空間。圖上有六條信息，實際是三組，如果間距不做徹底，就會讓人感覺是獨立的六組，但如果把間距做的徹底一點：
這樣就可以很明確看出，這是三組信息，而不僅僅只是六條信息。
所以要么就不分組，既然分了，就分的徹底一點!
2.大小
界面內信息有很多，這么多信息，有些需要強調，有些可以弱化。
很簡答一個例子，有時候大字后面需要跟一個小字，如果你沒區(qū)分開就是這樣的效果：
這樣就很不明確，到底是做了大小變化?還是出現(xiàn)了bug?
所以盡量把二者區(qū)分開，比如大小對比、顏色區(qū)分、粗細變化：
這樣就可以很明確!
3.樣式
前短時間有位讀者朋友發(fā)我一組圖標，圖標源自追波，我覺得整體做的還可以，但是有一個樣式上的小細節(jié)可以優(yōu)化下。
整體圖標樣式都是有厚度的，但是郵件這個圖標看起來就有些猶豫，想表達厚度，但是又沒表達清楚：
圖標源自追波
所以可以讓厚度的寬度加大，并且把側面的顏色和正面區(qū)分開，這樣就可以把厚度更明確的表達出來。
再比如之前做過一個引導頁，如何提高UI設計中畫面層次感https://www.aaa-cg.com.cn/ui/2726.html需要做一個影帶，最開始做的是這樣的：
不知道的還以為是個手表帶，所以必須要仔細觀察影帶的特征，并將其明確的表達出來，比如兩邊的孔是方形的，整體材質要軟一下等等：
這樣表達才明確，用戶才不會困惑!
4.顏色
下面兩組顏色：
左面這組可以很好的突出一個顏色，而右面這組就很難突出某一個顏色。
在界面設計中，有很多場景下，會有多個按鈕，我們需要強調其中一個，就需要采用這種徹底的對比方式：
而不是讓人模凌兩可，分不清主次的方式：
明確一點，用戶就不困惑了。
我們再來一個例子!
其實工作上有很多優(yōu)化需求都是基于“明確”這個點展開的，前一陣子做的一個排行榜獎牌標識的優(yōu)化，我們看看原來的樣式，就是因為顏色對比度不夠，產生數(shù)字看不清的情況：
在這樣的背景下，我們就可以拉大顏色對比度，讓數(shù)字更清晰、更明確：
這就是基于“明確“這個點，進行的需求優(yōu)化。
總結
今天講的都是做設計不夠明確的小案例，也是很多朋友容易忽略的問題。
ios有一條設計原則就是清晰，清晰的本質就是做的足夠徹底，該強調的強調，該弱化的弱化，比如他們超級醒目的大標題：
當我們能把設計做的足夠明確、足夠有節(jié)奏感的時候，就可以減少一定的稚嫩，使設計更穩(wěn)更成熟!
希望能給大家?guī)硪恍﹩l(fā)! 因此，您現(xiàn)在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請給我點個關注，我之后還會發(fā)包含有關在該領域工作的更多相關文章。
UI設計中踩過的坑
UI設計中的篩選控件指南
UI設計中標簽欄總結
UI設計色彩趨勢總結
超全面UI基礎設計規(guī)范
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
