ui設(shè)計的內(nèi)容很多，其中界面設(shè)計是重中之重。而界面設(shè)計有涵蓋了很多，包括色彩、文字、圖片等。大家平時對文字的設(shè)計是否忽視呢？今天就讓faceui為大家介紹文字在UI界面設(shè)計中的作用，版式設(shè)計的核心。

　　文字在UI界面設(shè)計中的作用

　　文字是UI設(shè)計中一個重要的組成元素，文字使用的好壞會極大影響產(chǎn)品的用戶體驗。想象一下用戶打開你的app，發(fā)現(xiàn)界面中的文字都是同一個字體，同樣大的字號，連顏色都是一樣的。這樣的文字搭配用戶讀起來會很累，費時費力。用不了多久他們就可能會卸載你的產(chǎn)品，轉(zhuǎn)而使用另一個界面設(shè)計更加友好，文字搭配更加合理的產(chǎn)app。文字對界面設(shè)計的重要性可見一斑。要做好文字的設(shè)計，需要做好以下內(nèi)容：

　　1、建立視覺層級

　　設(shè)計師的一個主要職責(zé)就是將頁面中的元素整合起來，以一種清晰可見的形式呈現(xiàn)給用戶。當(dāng)然我們都知道一個頁面中不同元素的重要性是不一樣的，有優(yōu)先級之分。文字也是一樣，有些文字比較重要，我們更希望用戶看到，有些文字比較雞肋我們不希望用戶看到。為了達到這個目的，我們給界面的文字建立視覺層級，將文字大致分為三類：主標(biāo)題，次標(biāo)題和正文。

　　主標(biāo)題：主標(biāo)題是對于整個頁面內(nèi)容的一個總結(jié)，合格的主標(biāo)題用戶看了一眼就應(yīng)該知道這個頁面的大致內(nèi)容。主標(biāo)題是用戶進入一個頁面第一眼就應(yīng)該看到的文字。主標(biāo)題應(yīng)該用字號要足夠的大，要加粗，這樣才可以更好的吸引用戶的注意力。此外，為了更好的節(jié)約用戶時間，主標(biāo)題應(yīng)該簡練。

文字在UI界面設(shè)計中的作用(圖片來自網(wǎng)絡(luò)）

　　次標(biāo)題：將所有的信息都塞進主標(biāo)題是不太現(xiàn)實的，這也是我們需要次標(biāo)題的原因。次標(biāo)題的要求和主標(biāo)題類似，都要求文字簡潔干練，概括性強。和主標(biāo)題一樣，次標(biāo)題也要進行加粗處理，當(dāng)然為了和主標(biāo)題區(qū)分，字號要稍微小點。

　　正文：正文是提供詳細說明和解釋的文字，從頁面層級的角度來說重要性要低于主標(biāo)題和次標(biāo)題。正文文字長度沒有定論，有人認(rèn)為長的文案可以給用戶提供更為詳細的信息，而且看起來更加正規(guī)嚴(yán)謹(jǐn)。但是也有人認(rèn)為用戶不喜歡閱讀過長的文字。兩種觀點都有自己的道理。

　　2、根據(jù)使用設(shè)備決定

　　短文案適用于移動端。移動端相對來說空間有限，文字太多會顯得比較擁擠，影響頁面美觀程度的同時也會降低用戶的閱讀體驗。

　　長文字更適用于PC端，PC有足夠的空間來展示特定內(nèi)容的詳細信息或者用戶不太熟悉的內(nèi)容(需要用戶仔細閱讀)。

　　3、產(chǎn)品定位

　　產(chǎn)品的定位對于正文文案的選用是具有決定性意義的。例如，你要設(shè)計一個讀書，旅行這類偏文藝小眾的界面，正文文案要足夠的短，頁面中要有大量的留白，這樣的頁面會給用戶一種透氣、從容、開放、平靜、自由的感覺，而這些感覺都是與產(chǎn)品的風(fēng)格相契合的。相反，如果這類頁面中元素都擠在一起，就會導(dǎo)致視覺壓力，引發(fā)用戶緊張。當(dāng)然并不是所有擁擠的頁面設(shè)計都會引發(fā)緊張情緒，如果文字和頁面中其他元素之間的空間處理的合適，行間距留的足夠大，那么也可以做到做保持內(nèi)容的可讀性的同時保留了頁面的“呼吸感”。

文字在UI界面設(shè)計中的作用(圖片來自網(wǎng)絡(luò)）

　　版式設(shè)計的核心

　　1、了解字體字形

　　字體的版式設(shè)計中，需要了解字體基本結(jié)構(gòu)和字體的空間結(jié)構(gòu)在實際工作運用的時候，你會發(fā)現(xiàn)字體上下部分是有一個留白空間的，其實際的高度要比可視的高度要高。

　　2、了解行高與行間距

　　設(shè)計師提供的設(shè)計稿與開發(fā)出來的文字高度有所不同比如，實際開發(fā)出來的會更高一些；iOS 設(shè)備與Android 設(shè)備也有所不同，比如可以看到同樣是顯示20號的字體，安卓的行高會偏高一些。在不同的 Android 設(shè)備上使用的字體不一樣，可能還會出現(xiàn)更多的差別。如果不想辦法抹平這差別，就不能真正意義上實現(xiàn)雙端一致了。

　　3、字體文字段排版

　　行間距：大段文字排版時，建議使用左對齊的方式，可讀性更高。

　　避免符號行首及右側(cè)過多鋸齒形：文字的編排時，如果行首與行尾有標(biāo)點符號時，閱讀起來很不友好，為了更加便于閱讀我們需要進行避頭尾的處理，甚至為了整齊我們需要對文字區(qū)塊進行強制對齊。

　　4、版心/虛擬邊框

　　在版式設(shè)計中，不論是平面海報還是UI界面設(shè)計，我們都需要有一個版心的概念把所有需要展現(xiàn)的內(nèi)容，都放置在此容器中，讓內(nèi)容更加有條理，具有更好的“透氣性”；實際工作中這樣的好處是多頁面改版會節(jié)省很多的工作量，且效果更加統(tǒng)一美觀。

　　5、網(wǎng)格系統(tǒng)/柵格化

　　網(wǎng)格系統(tǒng)是提升頁面條理性的有效設(shè)計方法，通過網(wǎng)格的設(shè)定，讓排版更加有參考的標(biāo)準(zhǔn)，去設(shè)計時有跡可循；在不同設(shè)計師配合過程中，也能夠避免不同設(shè)計師設(shè)定的間距不同等造成的效果不一致。

　　以上就是faceui為大家介紹的關(guān)于文字在UI界面設(shè)計中的作用的相關(guān)內(nèi)容。作為一名優(yōu)秀的ui設(shè)計師，文字也是很值得關(guān)注的設(shè)計內(nèi)容，千萬不要忽視了。