ui布局設計元素：ui布局設計元素有哪些？這一直是我比較喜歡研究的話題，今天正好朋友正好問起。是以就在這裡來把自己在行業裡的總結寫下來，給大家參考一下。說實話，做ui設計師以來，一直有很多朋友問我相關的知識，我也很高興能夠幫助到你們。
在UI頁面的布局當中，可以把其幾個核心視覺元素進行分解，單獨羅列。某些在多個頁面設計中，我們可以了解為幾大核心點，如『版，質，形，色，字』
- 局– 版式及布局，版式間距會直接影響到頁面的張力及空間感；
- 質 – 頁面風格，肌理次元，整個産品視覺調性；
- 形 – 大面積區域的形狀，控件尺寸比例，icon形狀的統一性；
- 色 – 顔色風格，頁面色相，彩度，明度整體風格統一性；
- 字 – 字型的樣式，字型，字号，襯線，内容識别性。
像這些核心元素，我們可以進行進行刻意練習，來提升綜合的視覺基礎能力，不過首要，我們需要了解并進行梳理。
什麼是布局？
在界面設計當中，布局會直接影響到使用者該頁面的了解能力，良好的資訊傳達力離不開科學的組織布局。資訊之間層級關系的羅列展示非常重要，适當的布局，能展示不同資訊的差異化，提升使用者了解閱讀效率，而且視覺上也非常美觀大方。
一：親密性
這裡我們可以通過一個很簡單的話術來表達，那就是『同類相近，異類相遠』，物以類聚，人以群分。資訊聯系緊密的，間距相近，資訊次元差異大的，間距要遠，這樣不但視覺上錯落有緻，而且對于使用者了解資訊，也是非常有效快速的。
二：節奏性
節奏性指的就是在同一個頁面内容中，間距呈有規則的變化。是以這也要求這間距的樣式不要太多，盡量使用倍數，比如1x、2x、3x、4x。比如現需設計一個讓使用者感受到輕松愉悅的頁面，可以使用較大的栅格間距比例，以12為基準，比如間距一律使用12、24、36、48。如果是資訊較為緊密的，則可以使用8的倍數，如8、16、24、32等。當然，這也不是絕對值，具體使用情況，還得根據實際情況跟業務場景而定。
從手動量的尺寸來看，京東金融app的間距是以4為機關進行倍增，但用的則是較大的間距，如24、28、32、36、40、44。而Airbnb則是以12的機關進行縮放，如12、24、36、48、60的機關，不同的栅格比例，傳遞出來的心理暗示，也是不一樣的。是以間距通常沒有絕對的設定值，而是根據業務進行适當調整，有規律的進行變化組合。
三：頁面結構比例
關于頁面的節奏比例，大家可以多研究一下黃金比例。黃金比例是在界面設計當中用的較多的一個比例，此比例通過了自然界大資料的驗證。在實際項目中，使用黃比例的作品，往往更具有美感，令人賞心悅目。
除了黃金比例，其實還有着白銀鉑金等比例，這類比例也是具有着較多的美感的。相信很多同學不知道，這裡也發出來讓各位同學知曉下。推薦使用黃金比例線上生成工具，用它可以計算出不同的黃金比例，很好用。
何為質？
質，是視覺語言組成的重要部分，頁面的風格特征，肌理虛實都靠它來表達。産品的質地風格應當與産品的整體形象保持一緻，是多個頁面統一風格的重要組成元素。好的質感表現，不僅能幫助使用者認識及記住産品特征，更能讓産品迅速拉開與同類産品的差別，做到别具一格。這裡簡單給大家介紹幾種常見的風格類型。
樣式一：大卡片、輕投影式
這種風格在iOS11後更是變的普及了起來，因為微投影能在很好的拉開層級提升空間感的同時，還能讓頁面變的更為細膩。像蘋果的Appstore跟大量其它産品，都使用了這類較為不錯的樣式。不過要注意的是，漸變樣式不能太過于厚重，頁面留白要大。另外卡片圓角及投影參數，之前有給小夥伴們提供過的，卡片圓角半徑≈卡片寬度的0.04%，陰影顔色=按鈕顔色的 Alpha50%，x=0，y=按鈕高度的20%，模糊值=按鈕高度的50%，擴充=按鈕高度的 -15%，進階又簡單，完美！
樣式二：高純度漸變
在近兩年，漸變風又開始變的流行起來，不過跟以前陰影較為厚重的漸變相比，新的漸變樣式，變得更為扁平更為輕量化了起來。在Dribbble流行起漸變風之後，國内各大應用也開始使用流行起來，如淘寶與京東金融、優酷、餓了麼等主流應用開始紛紛效仿。同樣在漸變的配色方案中，不适合多類顔色同時漸變，漸變的兩個顔色在一個色系上進行微調即可。
樣式三：輕拟物
在經過扁平風的洗涮之後，拟物風仍保留了一席之地。目前輕拟物的視覺主流更多的是在扁平的基礎上，加些拟物的元素，在汽車終端、智能家居等物聯網系統尤為多見。但與傳統的拟物相比，現代的拟物風變的更為簡潔，主要層級資訊變的更為突出
何為形
形，決定着整個産品線的調性，能直接将産品所蘊含的情感文化通過視覺表現傳達給給使用者。無論是按鈕的圓角比例，還是圖示的統一性，都是形的重要組成部分。而在UI界面設計中圖形更多的展現在圖示和按鈕上，這裡可以嘗試這樣來提升形的統一感
要素一：統一的icon風格
在圖示設計中，首先要把控好圖示視覺語言的核心，以多個常見的線性圖示為例，其中就包括着：描邊線寬，圓角，斷點方式，點綴，顔色填充類型，圖示重心。像這些，都是需要進行統一規範化。如果你是剛入門的設計師，對圖示這塊不擅長，可以去圖示網站如iconfont上找相關圖示進行參考，再根據自己的想法進行替換，但基礎的風格樣式，都需要保持統一。
要素二：統一的圖形元素
在界面設計中使用品牌圖形可以使使用者快速記錄品牌形象，讓産品快速搶占市場，提高使用者比。例如天貓，京東，QQ，網易雲等優秀産品，在這塊就運用的非常完美。天貓使用替換貓頭的形象，而網易雲，則提取了唱片的元素，整個圖示風格，都使用了多個圓潤的造型。
何為色?
色，通常是人感官中留下的第一印象。想要合理的運用顔色，其實并不容易。其實在界面設計中，對于選擇配色方案，就好像比穿衣服一樣，顔色越多越花哨，跟傳統的空間設計一樣，在大部分界面設計中，一般使用幾種顔色就夠了，除非設計師擁有者非常高的配色駕馭能力，不其然整個頁面都會出現大量花哨，影響資訊傳遞。下面，我們可以使用兩個小技巧，來幫助您提升配色的能力。
技巧一：
使用情緒闆決定主色調。設計師通過在做界面設計時，都是感性的，常常難以支撐各樣的質疑。那麼通過場景關鍵字，收集相應的圖檔素材，使用情緒闆來創造顔色，能更好地幫助設計師完成對産品情緒的了解，同時提高工作效率流程，并實作界面設計更符合使用者的預期，完成産品目标需求。設計出來的方案也更具有說服力，能更好的幫助設計師拿到産品視覺設計的替代權。
技巧二：六三一原則
所謂的六三一原則就是在空間設計中，通常主色調占60%，輔助色占30，突出色占10%。其實在界面設計中也是一樣的，設計稿中顔色不宜過多，不同色系最好不要超過三種。如果對色系不能很好了解的同學，我這邊給個辦法、就像當初學畫畫，眯着眼睛看即可看出其主要色調。但如果一個大型圖案的個别色塊很大的話，同樣得視為一種色
何為字
字，字型的形狀及樣式會直接影響到資訊傳遞的速度。是以根據不同的場景，使用不同的字型樣式也是極為重要的。是以對UI設計師而言，了解字型也是個必不可缺的技能。這裡也給大家提供幾個小技巧，幫助大家提升對字型的了解能力。
技巧一：合理的使用字型樣式
在做界面設計時，永遠要把内容的适當性放在首位，其次再去考慮其他樣式。根據不同的業務模式，選擇不同的字型，可以讓頁面更容易達到使用者的心理預期。
如襯線字與無襯線字，所傳遞出來的感覺也是存在截然不同的，一般而言，需要呈現的文字或小篇章文字中，使用無襯線字會更合适一些。而在一些長篇文章中，如在網頁設計中，最小的11号字型使用襯線體宋體，會比非襯線體的微軟雅黑更具有優勢。
技巧二：合理的使用字重
在單色環境中，使用不同的字重能更好的加強内容之間的呼應對比。減少過渡色階層級的使用，能使核心内容更為聚焦，減輕閱讀負擔。是以在界面設計中，使用較粗的字重來作為标題是較為合适的。
在iOS11中，這樣的設計手法尤為多見。使用了不同的字重，很明顯，左邊的圖會更利于資訊閱讀一些，因為層級的主次得到了很好的區分。是以大家在設計界面中，不妨把一些主标題加粗試試，或許有一些意想不到的效果。
技巧三：合理的控制字距及行高
标題的字距要緊密，正文大排字的字間距要稀疏一些。其他正文的行間距應該設定為字型大小的120％到150％之間。大家可以多進行一下嘗試，直到資訊較容易識别閱讀為止。
總結
以上幾個大點，構成了一套較為完整的視覺語言。我們可以通過對以上這幾個點進行刻意練習，來熟練掌握這些基本知識。另外除了通過臨摹一些優秀的視覺作品，拿現有産品進行Redesign或者視覺改版都是一個較為不錯的選擇。
以上就是ui布局設計元素：ui布局設計元素有哪些的總結，希望對你能夠幫助，可以多去看看又經驗分享的一些文章或者ui設計網站作品，提升自己的設計感。大家有了解更多關于UI設計學習方法、小技巧以及行業相關資訊，都可以加V：913438879一起交流，我會把兩年來的UI設計師工作經驗和建議傾囊相授的。