ui設(shè)計是一個熱門行業(yè)，有很多具體的設(shè)計單元。比如ui界面設(shè)計、ui頁面設(shè)計等等。每一種設(shè)計都有相應(yīng)的規(guī)則和原則，也有一些靈活的技巧。今天就讓小編為大家好好介紹ui頁面設(shè)計的技巧有哪些。

　　ui頁面設(shè)計技巧

　　1、清晰的布局，稍顯錯落的排版

　　布局設(shè)計的時候，圖片、文字、按鈕等元素，需要遵循“相關(guān)靠近”的規(guī)則來分組排布，這樣的布局會顯得邏輯清晰，易于理解。不過，在保持這樣的視覺關(guān)系的同時，讓排版稍微錯落一點，能夠讓頁面優(yōu)雅而又足夠活潑生動，不會顯得太簡單呆板。

　　2、單色網(wǎng)站，需要突出的全彩圖片

　　單色網(wǎng)站通常會以一種色彩為主，但是如果在單色網(wǎng)站中再加入幾張明顯是全彩的圖片，會顯得非?！冈邸沟?，但是這也會讓它們非常明顯地吸引用戶的注意力。這種設(shè)計同樣是秉承「打破一條規(guī)則」的設(shè)計策略，當(dāng)然前提是你的設(shè)計目標(biāo)就是要凸顯這寫圖片內(nèi)容。

　　3、全屏大圖，兼顧功能的線性元素

　　高清大圖撐滿全屏，加上展示性比較強(qiáng)的字體作為標(biāo)題也是經(jīng)典的搭配，但是在很多時候依然會讓人覺得單調(diào)。線性元素的加入，不僅不會遮蓋住作為視覺主體的圖片，而且能夠強(qiáng)化形式感，如果運用得當(dāng)?shù)脑?，還能作為視覺引導(dǎo)，強(qiáng)化交互，引導(dǎo)用戶點擊，非常有用。

　　4、高清大圖，超出邊界的布局

　　使用占據(jù)整個屏幕的高清大圖固然賞心悅目，但是更多的圖片在邊界露個頭，能夠更好地吸引用戶的好奇心，這比起單純的左右翻頁按鈕更能夠促進(jìn)交互。這種不對稱的布局，結(jié)合形式感極強(qiáng)的標(biāo)題和數(shù)字元素，整體會顯得更加優(yōu)雅。

ui頁面設(shè)計（圖片來自網(wǎng)絡(luò)）

　　5、經(jīng)典布局，錯落的交互元素

　　打破規(guī)則，或者說打破常規(guī)是經(jīng)常用到的一種設(shè)計思路，但是通常只能打破一種常規(guī)，打破太多的規(guī)則和習(xí)慣會帶來混亂。在經(jīng)典的左右布局之下，加入不那么規(guī)則、整齊的交互元素，能夠讓設(shè)計維持經(jīng)典的外觀的同時，顯得更加活潑有趣，又不會讓人覺得太過跳脫。

　　6、統(tǒng)一色彩，明確的視覺焦點

　　凝聚力是這種設(shè)計組合的主題。統(tǒng)一的色彩讓整個頁面顯得非常的集中，而聚焦的元素讓所有的視覺內(nèi)容都圍繞著它來進(jìn)行設(shè)計，標(biāo)題、輔助性的說明文本、交互按鈕等都在一個統(tǒng)一的設(shè)計想法和目標(biāo)之下得到了統(tǒng)一性的規(guī)劃和設(shè)計。

　　7、單色配色，打破常規(guī)的排版

　　單色配色也是最近幾年比較流行的配色方式，這樣的配色簡單直觀，更重要的是能夠突出排版。這種情況下，非常規(guī)的排版能夠得到增益和凸顯?？v向排布的標(biāo)題，被邊緣遮擋的作者名稱，用來視覺引導(dǎo)的細(xì)線，左下方用來強(qiáng)調(diào)的裝飾性色塊，都很好的強(qiáng)化頁面的排版形式感。

　　8、高雅中性色，明快提亮色

　　色彩通常是最快抓人眼球的設(shè)計元素。黑白灰這樣的中性色，不論是圖片和色塊常常能創(chuàng)造高級感和沉靜的氛圍，而精選一種明快的提亮色，比如明黃，能夠打破這種氛圍,增加一個層次，如果用來承載核心的信息，能夠讓用戶更快搞清主次。這樣的設(shè)計不僅高效，而且優(yōu)雅。

　　9、簡約風(fēng)格，沿中線錯開布局

　　這同樣是在常見的基礎(chǔ)上，稍加調(diào)整就能做出來的好設(shè)計。在純白背景下的簡約風(fēng)格之下，沿著中線的左右兩側(cè)來排布文本和圖片內(nèi)容，沒必要刻意保證左右兩側(cè)的準(zhǔn)確對齊，只需要保證中線,上整個視覺路徑的清晰規(guī)整，同樣可以做到清晰而不拘一格。

ui頁面設(shè)計（圖片來自網(wǎng)絡(luò)）

　　ui頁面設(shè)計的風(fēng)格類型

　　1、留白設(shè)計

　　應(yīng)用基本去分割線，通過留白區(qū)分層級。這樣的好處可以減少分割線對內(nèi)容的干擾，界面呼吸感增強(qiáng)，達(dá)到簡約設(shè)計的目的。

　　2、黑夜模式

　　黑夜模式無疑是今年比較熱的一個設(shè)計方向，黑夜模式出現(xiàn)為減少用戶眼睛疲勞，提升產(chǎn)品使用體驗。

　　3、蘋果設(shè)計風(fēng)格

　　蘋果風(fēng)包括大圓角卡片設(shè)計、大標(biāo)題、粗字體，目前又增強(qiáng)了卡片設(shè)計?？ㄆO(shè)計作為承載內(nèi)容的容器，其實更適用今天移動互聯(lián)網(wǎng)的大方向，因為卡片可以作為一個容器封裝復(fù)雜的內(nèi)容，使得模塊層級區(qū)分明顯，適配性也是更強(qiáng)，更聚焦。

　　4、網(wǎng)格化布局

　　網(wǎng)格化是一切設(shè)計系統(tǒng)的基礎(chǔ)，目前網(wǎng)格研究是比較成熟的，方形網(wǎng)格，8px網(wǎng)格2PX網(wǎng)格等。因此網(wǎng)格化布局也是非常重要的一個工具。

　　以上就是小編為大家介紹的關(guān)于ui頁面設(shè)計的相關(guān)內(nèi)容。ui頁面設(shè)計同樣也很考驗設(shè)計者的創(chuàng)新思維，如何在ui設(shè)計中讓更多用戶接受并喜歡這樣的ui頁面設(shè)計是每一個ui設(shè)計者要思考的問題。