??如何讓文字排版在UI界面中劃分層次、突出重點(diǎn)，將文字排版做得富有趣味性、設(shè)計(jì)感、吸引眼球、準(zhǔn)確的傳達(dá)信息等等，是設(shè)計(jì)師需要思考的問(wèn)題。下面為大家總結(jié)了文字排版的7個(gè)超實(shí)用的文字排版技巧，讓你的排版效率飛升。
??網(wǎng)頁(yè)設(shè)計(jì)示例
??1.文字排版合理使用字體樣式
??文字有加粗、傾斜、下劃線和橫杠線等字體樣式，每種樣式所呈現(xiàn)的效果各不相同，合理使用字體樣式可以讓激勵(lì)用戶行為。例如電商平臺(tái)常用橫杠線標(biāo)注原價(jià)，讓用戶明確現(xiàn)在促銷(xiāo)價(jià)格非常優(yōu)惠，促進(jìn)用戶購(gòu)買(mǎi)沖動(dòng)。Pixso內(nèi)置了多個(gè)免費(fèi)可商用的襯線、無(wú)襯線和裝飾性字體，無(wú)需手動(dòng)安裝即可使用，應(yīng)用到商業(yè)設(shè)計(jì)項(xiàng)目中無(wú)侵權(quán)風(fēng)險(xiǎn)。如果Pixso的云端字體庫(kù)不能滿足你的需求，還可以安裝「字體助手」，從本地導(dǎo)入電腦上安裝的字體，給你的設(shè)計(jì)提供更多樣化的選擇。
??加粗可以突出重點(diǎn)；
??傾斜可以描述簡(jiǎn)單對(duì)話和次重點(diǎn)內(nèi)容；
??下劃線可以結(jié)合超鏈接，讓用戶點(diǎn)擊；
??橫杠線樣式則可以對(duì)原有文字進(jìn)行否定。
??合理使用字體樣式
??2.文字排版不要使用過(guò)多字體
??字體是文本的一種設(shè)計(jì)風(fēng)格，由無(wú)數(shù)大小和重量不同的字符組成。根據(jù)字體的粗細(xì)、寬度和樣式不同，可以將字體分為三種基本類(lèi)型：襯線、無(wú)襯線和裝飾性。為了保持界面的整潔，優(yōu)秀的設(shè)計(jì)師永遠(yuǎn)不會(huì)使用超過(guò)三種字體——并將裝飾性字體保持在最低限度。
??不要使用過(guò)多字體
??3.文字排版要建立層次結(jié)構(gòu)
??建立層次結(jié)構(gòu)的文字排版技巧旨在明確區(qū)分標(biāo)題、副本與標(biāo)準(zhǔn)文本的區(qū)別，能讓人對(duì)整體的結(jié)構(gòu)一目了然，使用戶在短時(shí)間內(nèi)獲取必要信息。除了文本本身外，網(wǎng)格、排版、圖片也要格局分明，清晰可見(jiàn)。可以使用大小、顏色、對(duì)比度和對(duì)齊方式來(lái)創(chuàng)建層次結(jié)構(gòu)。
??最典型的建立層次結(jié)構(gòu)的方法是：標(biāo)題的尺寸總是大于副標(biāo)題和標(biāo)準(zhǔn)文本。
??建立層次結(jié)構(gòu)
??4.文字排版用好兩端對(duì)齊
??標(biāo)題排版經(jīng)常使用兩端對(duì)齊的文字排版方式，將主標(biāo)題居中加粗，拉開(kāi)字間距，與副標(biāo)題兩端文字同寬，讓標(biāo)題部分看起來(lái)更加整體統(tǒng)一。
??兩端對(duì)齊
??例如Pixso資源社區(qū)的網(wǎng)頁(yè)注冊(cè)頁(yè)面中，主標(biāo)題拉寬字間距，讓主副標(biāo)題采用了兩段對(duì)齊的方式，標(biāo)題部分更加整體。Pixso的自動(dòng)布局功能可以創(chuàng)建動(dòng)態(tài)畫(huà)板，使文本內(nèi)容自適應(yīng)寬度與高度。在進(jìn)行界面設(shè)計(jì)時(shí)，可以一鍵調(diào)整圖文組合版面、創(chuàng)建等距的文本詳情、創(chuàng)建跨多種版面類(lèi)型的設(shè)計(jì)內(nèi)容。
??網(wǎng)頁(yè)注冊(cè)頁(yè)面
??5.文字排版合理添加圖形裝飾
??文字排版中添加矩形、圓形等圖形的排版技巧，可以打破原有的視覺(jué)統(tǒng)一性，讓頁(yè)面變得更活潑。例如下面案例中的框架結(jié)構(gòu)外就加了矩形形狀，非常吸引用戶視覺(jué)。需要注意的是，要在合適的位置添加適當(dāng)?shù)男螤睿悦馀沙勺尽?/span>
??添加圖形裝飾
??在下圖案例中，就很好的運(yùn)用了借助圖形形狀的文字排版技巧。主標(biāo)題使用形狀框選，讓整個(gè)畫(huà)面視覺(jué)中心聚集到了矩形框中的文字上，突出了核心文案。
??Pixso活動(dòng)專欄
??6.提升排版文字的質(zhì)感
??改變文字質(zhì)感的文字排版技巧可以讓文字更加突出，例如下面案例中的【高級(jí)感】三個(gè)字，單獨(dú)做出漸變光效的文字樣式，使與其他文字區(qū)分開(kāi)，讓用戶一眼就看到關(guān)鍵詞。
??如何做出有高級(jí)感的投影
??7.將排版的文字當(dāng)作圖形裝飾
??文字是形狀的一種，不僅可以傳達(dá)信息，也可以作為裝飾。英文26個(gè)字母其實(shí)就是26個(gè)圖形，在文字排版的時(shí)候可以將因?yàn)樽鳛閳D形襯在標(biāo)題后面，既能解釋標(biāo)題，有起到很好的裝飾效果。
??Pixso自動(dòng)布局功能，讓文字排版更高效
??文字排版需要設(shè)計(jì)師花心思，多看多練，除了掌握文字排版技巧外。還是要認(rèn)真細(xì)心，多看多練，掌握一款高效的設(shè)計(jì)工具，同樣重要。新一代協(xié)作設(shè)計(jì)工具Pixso，便是不錯(cuò)的選擇。在設(shè)計(jì)工作中，設(shè)計(jì)師總是只能以一半的時(shí)間用于創(chuàng)作，另一半耗費(fèi)在改版。而改版后，大多數(shù)修改過(guò)內(nèi)容的情況下，排版都會(huì)有所變動(dòng)，設(shè)計(jì)師需要重新進(jìn)行調(diào)整，以達(dá)到最好的效果，這樣耗費(fèi)精力的瑣碎工作難以體現(xiàn)價(jià)值，更拉低了效率。Pixso「自動(dòng)布局」功能便能很好的化解設(shè)計(jì)師這一苦惱。
??使用Pixso自動(dòng)布局，在內(nèi)容上創(chuàng)建動(dòng)態(tài)框架，根據(jù)設(shè)計(jì)需要設(shè)置固定間距等屬性。當(dāng)設(shè)計(jì)師調(diào)整內(nèi)容時(shí)，父級(jí)元素將自動(dòng)調(diào)整子級(jí)的大小，來(lái)容納所包含的子元素，無(wú)需再手動(dòng)調(diào)整。既提高了工作效率，也避免了手動(dòng)調(diào)整可能帶來(lái)的的疏漏。
聯(lián)系客服
