閱讀類UI界面設(shè)計思維和UI界面視覺設(shè)計五要素

Ui界面設(shè)計內(nèi)容豐富，很多APP設(shè)計都需要涉及Ui界面設(shè)計。不同類型的APP有不同的設(shè)計風(fēng)格，那么設(shè)計理念呢？一起看一下閱讀類的UI界面設(shè)計思維是什么？UI界面視覺設(shè)計五要素。

什么是閱讀類UI界面設(shè)計理念？

設(shè)計的價值是一個產(chǎn)生價值的過程。只有讓用戶知道誰的設(shè)計更能幫助客戶產(chǎn)生價值，誰的設(shè)計就是好的設(shè)計。

奧卡姆剃刀原理:如果沒有必要，就不要增加實體，也就是簡單有效的原理。這個規(guī)律在很多領(lǐng)域都有應(yīng)用，也適用于Ui界面設(shè)計理念。

我們在Ui界面設(shè)計理念——從用戶出發(fā)提到Ui界面設(shè)計的第一個原則就是簡單性，我覺得這個原則是所有原則中最根本的，其他的會圍繞這個進(jìn)行:因為簡單，很容易找到焦點，記憶負(fù)擔(dān)會小；因為簡單，很容易構(gòu)成UI的一致性；因為簡單，用戶熟悉的速度會很快。

國外提出的理論叫奧卡姆定律，中國的理論叫大道至簡。道理極其簡單，一兩句話就能解釋清楚。簡單方面是美，用戶懶，但這也是我們不斷創(chuàng)新的來源。Ui界面設(shè)計其實很關(guān)鍵，既是軟件的門面，也是我們不斷實踐和應(yīng)用新技術(shù)的前提。

界面視覺設(shè)計的五要素

UI界面的視覺設(shè)計包括五個要素:顏色、文字、圖標(biāo)、圖片和空間。一個優(yōu)秀的界面設(shè)計，一定要把這些元素做到淋漓盡致。

一、顏色

理解色彩的三個屬性，色相(H)，飽和度(S)，明度(B)，理解色彩的含義。熟練掌握色彩搭配。

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

(2)鄰近配色。色環(huán)上30°左右的顏色是相鄰的顏色，如紫色和藍(lán)紫色，藍(lán)紫色和藍(lán)色。相鄰顏色搭配對比效果柔和、安靜、和諧，但也容易感到單調(diào)、模糊，需要調(diào)整亮度來增強效果。

(3)類似的配色。色環(huán)上相距60°左右的顏色是相似的顏色，如橙色和黃色、黃橙和黃綠色。類似的配色對比效果豐富活潑，同時又不失統(tǒng)一和諧的感覺。

(4)中差色搭配。相距90°左右的色環(huán)為中差色，如紅與黃橙、藍(lán)綠與黃等。中差配色對比效果明快，活潑，飽滿，令人興奮，同時又不失調(diào)和。

五、對比色搭配。相距120°左右的色環(huán)為對比色，如紅與黃、紅紫與黃橙等。對比色搭配對比效果強烈，醒目，刺激，力，但也容易引起視覺疲勞，一般需要采用多種調(diào)和手段來提高對比效果。

(6)補色搭配。色距180°左右的色環(huán)為補色，如紅綠、黃紫等。補色搭配表現(xiàn)出一種力量、氣勢和活力，具有很強的視覺沖擊力。

七、多色搭配。顧名思義，多色搭配是由多種顏色組合而成的一種搭配方式，一般以不超過4種顏色為宜，規(guī)定一種作為主色，其余作為輔助色。多色搭配會讓畫面看起來更豐富多彩，充滿樂趣，但如果控制不好，很容易讓畫面變花，失去平衡。搭配時要注意區(qū)分主次，按比例調(diào)和。

二、是文字

中文字體大致分為宋體、黑體、仿宋體、楷體等(變體字)。西方字體大致分為：無襯線體、羅馬正體或襯線體、意大利斜體、手寫體、黑色字體(哥特體)。

文字使用規(guī)則:不同平臺的界面設(shè)計會有不同的標(biāo)準(zhǔn)字體。比如移動界面的設(shè)計會有固定的字體風(fēng)格，網(wǎng)頁會有幾個常用的字體。

常規(guī)移動字體：

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

在Android設(shè)備上，原生系統(tǒng)的英文字體使用DroidSans或Roboto，但國內(nèi)的Rom大多是由第三方制造商定制的，從而改變原生系統(tǒng)的字體。

網(wǎng)頁上常用的字體:

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

常用的中文字體有蘋方、思源黑體、華文細(xì)黑等，英文字體有Helvetica、SanFrancisco等。

三、圖標(biāo)

圖標(biāo)風(fēng)格:圖標(biāo)的設(shè)計風(fēng)格有很多種，如線性圖標(biāo)、面性圖標(biāo)、線面組合圖標(biāo)、扁平圖標(biāo)、輕擬物圖標(biāo)、擬物圖標(biāo)、手繪圖標(biāo)等。

四、圖片

圖片在Web和App界面設(shè)計中非常常見，圖片的質(zhì)量和展示方式會影響用戶對產(chǎn)品的感官體驗。不同比例的圖片傳達(dá)不同的主要信息。我們需要根據(jù)產(chǎn)品的特點和不同的場景選擇合適的圖片比例進(jìn)行設(shè)計。

圖片排版:圖片的排版類型有很多種，根據(jù)不同的場景和需要傳遞的主要信息選擇一致的顯示方式，包括通欄、并列、九宮格、瀑布流。

五、空間

使用網(wǎng)格系統(tǒng)可以使界面的信息更加美觀、易讀和規(guī)范。在設(shè)計中，可以使用8像素網(wǎng)格規(guī)則來指導(dǎo)元素尺寸和間距的制定；層次感、焦點、魅力、呼吸是留白的四個屬性，留白的表現(xiàn)形式要結(jié)合品牌屬性來選擇。在任何領(lǐng)域，要想有所成就，都需要不斷的學(xué)習(xí)和提高，不斷的探索，與時俱進(jìn)，不斷的練習(xí)和實踐。