UI設(shè)計(jì)包含的內(nèi)容很豐富。在很多的APP 設(shè)計(jì)中都需要涉及UI設(shè)計(jì)。不同類(lèi)型的APP設(shè)計(jì)風(fēng)格不同，那設(shè)計(jì)理念呢？今天就讓faceui為大家介紹閱讀類(lèi)UI界面設(shè)計(jì)理念是什么，界面視覺(jué)設(shè)計(jì)五要素。

　　閱讀類(lèi)UI界面設(shè)計(jì)理念是什么

　　設(shè)計(jì)的價(jià)值就是一種產(chǎn)生價(jià)值的過(guò)程，只有讓用戶知道，誰(shuí)的設(shè)計(jì)更能幫助客戶產(chǎn)生價(jià)值，誰(shuí)的設(shè)計(jì)就是好設(shè)計(jì)。

　　奧卡姆剃刀原理：“如無(wú)必要，勿增實(shí)體”，即“簡(jiǎn)單有效原理”，該條定律應(yīng)用在了很多領(lǐng)域，在 UI 設(shè)計(jì)理念上，同樣適用。

　　我們?cè)?UI 設(shè)計(jì)理念——一切從用戶出發(fā)中已經(jīng)提到 UI 設(shè)計(jì)的第一條原則便是簡(jiǎn)易性，而我認(rèn)為這條原則在所有原則中是最根本的，其他的將圍繞這一條進(jìn)行展開(kāi)：因?yàn)楹?jiǎn)單，所以就容易找到焦點(diǎn)，記憶負(fù)擔(dān)就會(huì)?。灰?yàn)楹?jiǎn)單，就容易構(gòu)成 UI 的一致性；因?yàn)楹?jiǎn)單，用戶熟悉的速度就會(huì)快。

　　外國(guó)提出的理論叫奧卡姆定律，中國(guó)的理論叫做 “ 大道至簡(jiǎn) ”。大道理是極其簡(jiǎn)單的，簡(jiǎn)單到一兩句話就能說(shuō)明白 。簡(jiǎn)單方為美，用戶很懶，但這也正是促進(jìn)我們不斷創(chuàng)新的來(lái)源， UI 設(shè)計(jì)其實(shí)很關(guān)鍵，既作為軟件的門(mén)面，也作為我們不斷實(shí)踐、應(yīng)用新技術(shù)的前提。

閱讀類(lèi)UI界面設(shè)計(jì)理念（圖片來(lái)自網(wǎng)絡(luò)）

　　界面視覺(jué)設(shè)計(jì)五要素

　　UI界面視覺(jué)設(shè)計(jì)包含5個(gè)要素：色彩、文字、圖標(biāo)、圖片、空間。一個(gè)出色的界面設(shè)計(jì)，必然是將這些要素做到了淋漓盡致。

　　1、色彩

　　了解色彩三屬性，色相(H)、飽和度(S)、明度(B)，明白色彩寓意。對(duì)色彩搭配也有熟練掌握。

　　（1）同類(lèi)色搭配.色環(huán)上相距 0° 的顏色為同類(lèi)色，一般常用同一種色相的不同明度或不同飽和度的組合方式，例如藍(lán)與淺藍(lán)，紅與粉紅等。同類(lèi)色搭配對(duì)比效果統(tǒng)一、清新、含蓄，但也容易產(chǎn)生單調(diào)、乏味的感受。

　?。?） 鄰近色搭配。色環(huán)上相距 30° 左右的顏色為鄰近色 ，例如紫與藍(lán)紫，藍(lán)紫與藍(lán)等。鄰近色搭配對(duì)比效果柔和、文靜、和諧，但也容易感覺(jué)單調(diào)、模糊，需調(diào)節(jié)明度來(lái)加強(qiáng)效果。

　?。?）類(lèi)似色搭配。色環(huán)上相距 60° 左右的顏色為類(lèi)似色，例如橙與黃，黃橙與黃綠等。類(lèi)似色搭配對(duì)比效果較豐富、活潑，同時(shí)又不失統(tǒng)一、和諧的感覺(jué)。

　　（4）中差色搭配。色環(huán)上相距 90° 左右的顏色為中差色，例如紅與黃橙，藍(lán)綠與黃等。中差色搭配對(duì)比效果明快、活潑、飽滿、使人興奮，同時(shí)不失調(diào)和之感。

　?。?）對(duì)比色搭配。色環(huán)上相距 120° 左右的顏色為對(duì)比色，例如紅與黃，紅紫與黃橙等。對(duì)比色搭配對(duì)比效果強(qiáng)烈、醒目、刺激、有力，但也容易造成視覺(jué)疲勞，一般需要采用多種調(diào)和手段來(lái)改善對(duì)比效果。

　　（6）互補(bǔ)色搭配。色環(huán)上相距 180° 左右的顏色為互補(bǔ)色，例如紅與綠，黃與紫等?；パa(bǔ)色搭配表現(xiàn)出一種力量、氣勢(shì)與活力，具有非常強(qiáng)烈的視覺(jué)沖擊力。

　　（7）多色搭配。多色搭配顧名思義是由多種色彩組合而成的一種搭配方式，一般以不超過(guò) 4 種顏色為宜，規(guī)定一種作為主導(dǎo)色，其余作為輔助色使用。多色搭配會(huì)讓畫(huà)面顯得更加豐富、多彩，充滿趣味性，但若控制不好，也容易讓畫(huà)面變花，失去平衡。搭配時(shí)須注意區(qū)分主次，按比例進(jìn)行調(diào)和。

　　2、文字

　　中文字體種類(lèi)大致分為：宋體、黑體、仿宋、楷體、其它（變體字）。西文字體種類(lèi)大致分為：無(wú)襯線體、羅馬正體或襯線體、意大利斜體、手寫(xiě)體、黑字體（哥特體）。

　　文字使用規(guī)則：不同平臺(tái)的界面設(shè)計(jì)中規(guī)范的字體會(huì)有不同，像移動(dòng)端界面的設(shè)計(jì)就會(huì)有固定的字體樣式，網(wǎng)頁(yè)中會(huì)有常用的幾個(gè)字體。

　　移動(dòng)端常規(guī)字體：

　　在 iOS 設(shè)備上，系統(tǒng)默認(rèn)的英文字體為 SanFrancisco，中文字體為 PingFang。值得注意的是，SanFrancisco 字體會(huì)隨著字號(hào)的變化自動(dòng)調(diào)整字母之間的間距，以確保任何情況下都能很清晰地閱讀。

　　在 Android 設(shè)備上，原生系統(tǒng)英文字體使用 DroidSans 或 Roboto，但國(guó)內(nèi)的 Rom 大都是第三方廠商定制而成，對(duì)原生系統(tǒng)字體有所變動(dòng)。

閱讀類(lèi)UI界面設(shè)計(jì)理念（圖片來(lái)自網(wǎng)絡(luò)）

　　網(wǎng)頁(yè)端常用字體：

　　在 Windows 系統(tǒng)中，常用字體有 微軟雅黑、黑體、宋體 等，最小字號(hào)推薦 12px，正文字號(hào)推薦 14px，標(biāo)題字號(hào)推薦 18px、20px、24px、28px、32px 等，盡可能使用偶數(shù)。而行間距一般為字號(hào)的 1.5-1.8 倍。

　　在 Mac OS 系統(tǒng)中，常用中文字體有 蘋(píng)方、思源黑體 、華文細(xì)黑 等，英文字體有 Helvetica、SanFrancisco 等。

　　3、圖標(biāo)

　　圖標(biāo)風(fēng)格：圖標(biāo)的設(shè)計(jì)風(fēng)格有很多種，例如：線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)、扁平圖標(biāo)、輕擬物圖標(biāo)、擬物圖標(biāo)、手繪型圖標(biāo)等。

　　4、圖片

　　圖片在 Web 和 App 界面設(shè)計(jì)中是非常常見(jiàn)的，圖片的質(zhì)量和展現(xiàn)方式都會(huì)影響著用戶對(duì)產(chǎn)品的感官體驗(yàn)。不同比例的圖片所傳遞的主要信息各不相同，我們需要結(jié)合產(chǎn)品的特點(diǎn)，并根據(jù)不同的場(chǎng)景來(lái)選擇合適的圖片比例進(jìn)行設(shè)計(jì)。

　　圖片排版：圖片的排版類(lèi)型有很多種，根據(jù)不同的場(chǎng)景和所需傳遞的主體信息來(lái)選擇與之相符的展現(xiàn)方式，包括滿版型、通欄型、并置型、九宮格型、瀑布流型。

　　5、空間

　　使用柵格系統(tǒng)，可以讓界面的信息呈現(xiàn)更加美觀、易讀和規(guī)范，設(shè)計(jì)時(shí)可以采用「8像素」柵格規(guī)則來(lái)指導(dǎo)元素尺寸和間距的制定；層次感、焦點(diǎn)、韻味、呼吸是留白的四個(gè)屬性，留白的表現(xiàn)形式需結(jié)合品牌的屬性來(lái)選擇。

　　在任何領(lǐng)域，如果想要有所成就，都需要不斷的持續(xù)學(xué)習(xí)提升，需要孜孜以求的探索，需要與時(shí)俱進(jìn)，需要不斷練習(xí)和實(shí)踐。

　　以上就是faceui為大家介紹的關(guān)于閱讀類(lèi)UI界面設(shè)計(jì)理念的相關(guān)內(nèi)容。雖然閱讀類(lèi)UI界面設(shè)計(jì)跟其他的類(lèi)型相比要簡(jiǎn)單一些，但是在設(shè)計(jì)理念上還是都遵從大道至簡(jiǎn)的風(fēng)格。