布局網(wǎng)頁設(shè)計的欄目,調(diào)整板塊的合并和分離,各種項目都可以為游客帶來新的體驗,用網(wǎng)頁設(shè)計,創(chuàng)造新的視覺沖擊力。當(dāng)涉及到設(shè)計時,我們需要考慮從設(shè)計師的角度來看文本。對網(wǎng)站本身的風(fēng)格一致的前提下,文字必須清晰可辨,必要時,對需要匹配相同的內(nèi)容的層次結(jié)構(gòu)。層次結(jié)構(gòu)是一個網(wǎng)站的整體框架,但當(dāng)你進(jìn)入布局的一步,也必須在頁面上建立特定的文本的相關(guān)水平。在這篇文章中,我們將解釋如何使文本與標(biāo)題或網(wǎng)站標(biāo)題相呼應(yīng),以及如何使用空白,使長段落上的視覺變得容易消化。
每一個標(biāo)題都應(yīng)該體現(xiàn)自己獨(dú)特的風(fēng)格,同時也需要在頁面風(fēng)格上相互補(bǔ)充和其他。華麗或光榮的稱號會很容易吸引人,但無論是標(biāo)題風(fēng)格,白色的空間是非常重要的。
Square是采用傳統(tǒng)的界面開始,包含了大量的圖像和文本塊。標(biāo)題是一個很有趣的部分的設(shè)計,因為標(biāo)題,但可以小字體變化。然而,與大小相比,標(biāo)題更重要的是與其他詞的關(guān)系。注意上面的截圖中的標(biāo)題和文本的行距的使用,每章的標(biāo)題對視覺的獨(dú)特之處,而且可以自然地結(jié)合在一起,形成較大的標(biāo)題和段落。使用一個更小的字幕文本的每個內(nèi)部功能塊。這些內(nèi)部標(biāo)題的字體大小是相同的段落的文字和冷漠,但他們在大膽和不同的字體顏色,以突出自己。視覺上,清晰的和大膽的或下劃線的文本非常醒目比視覺焦點(diǎn)(只)。
標(biāo)題和段落之間的間距也明確了其中的小段落屬于標(biāo)題。同時,與主標(biāo)題和副標(biāo)題應(yīng)預(yù)留足夠的空間。第二,負(fù)面空間也會影響視覺設(shè)計和布局水平。作為網(wǎng)頁界面設(shè)計的最佳做法,創(chuàng)建頁面標(biāo)題,請記住以下幾:
一個視覺層次應(yīng)該是通過使用空間、大小、顏色、文本樣式等元素來創(chuàng)建,使它變得容易閱讀。即使從監(jiān)控3-5英尺遠(yuǎn)的地方站著,應(yīng)該是可見的。您還可以使用5 -第二個高斯模糊測試測試,檢查層次結(jié)構(gòu)。保持每一個小標(biāo)題在它的第一個孩子的段落。在一個更尖銳的標(biāo)題更快速、清楚地交流思想。
就文本留白這個話題,其實就基于如何圍繞常用的段落設(shè)計的問題。牢固,可靠,幾乎無處不在,段落是每一個網(wǎng)站的內(nèi)容戰(zhàn)略的支柱。但是,內(nèi)容如何置入是取決于內(nèi)容的風(fēng)格而言的。舉個例子,一個在線的新聞雜志會比一個小的園藝博客使用更多的不同種類的段落。段落的內(nèi)容量,內(nèi)容長度和詳細(xì)程度在進(jìn)行排版設(shè)計時都需要被考慮。試著用足夠大的文字設(shè)計,使文字哪怕跟屏幕相距3英尺遠(yuǎn)也是可讀易讀的。文字大小是同空白空間是非常相似的,通常大的比小的好。但是,在實踐中仍然需要適度和因地制宜。
如果文本尺寸過大,那么它會是占用更多的屏幕空間,需要更多的卷軸。但是,如果它太小也可能是不可讀的,當(dāng)游覽者的目光從一行跳躍到另一行的時候,他們會覺得很難找到一種垂直的閱讀節(jié)奏。兩個要牢記的重要事情是段落邊距和行高(每行之間的空間)。文本在段落的大小決定了這兩個值,因為空白取決于大小。
行使設(shè)計權(quán)利的網(wǎng)絡(luò)博客平臺就是一種處理媒介,其中的文字是清晰的,可讀的并且相互之間有足夠的空間距離。正如博客中的段落設(shè)計向我們展示的,行高必須足夠大,這樣連接的下一行才不會讓人覺得過剩。根據(jù)Web Design Trends 2016 ebook推薦,這里有一些簡單上手的規(guī)則可以遵循:避免使該行高度大于文本的常規(guī)行高度;使用em font unit字體單位非常適合在所有瀏覽器建立統(tǒng)一字體大小;行高度經(jīng)常是比字體大一點(diǎn)點(diǎn);嘗試用1EM的字體大小和1.5em-1.75em的行高組合。
處理段落間距可能會非常棘手,但它是一個非常重要的課題,特別是對文字為主的網(wǎng)站來說。底部段落邊距,應(yīng)該比文本的常規(guī)行大得多。底部段邊距應(yīng)該足夠大,這樣就可以直觀地確定一個段落已經(jīng)結(jié)束。一旦文字的大小被確定,找出合適的行高和間距就比較容易了,搭配組合就能發(fā)揮更大的價值。這樣做的目的在于闡釋清楚和搭建結(jié)構(gòu),每一個新的段落都應(yīng)該是顯而易見的,沒有任何疑問的。達(dá)到這種效果的關(guān)鍵在于對每個文本塊之前比例空間的把握。正如前面提到的,如果空的太多往往比空的不夠來的安全。盡可能的避免使用過多的空間,或者你也可以盡量使內(nèi)容密度變得小一點(diǎn)。保持頁面中有足夠的內(nèi)容,并且保證所有的內(nèi)容都是有趣的,不在多在于精,使其具有一種壓倒性。
文字本身的內(nèi)容如果不合適,會同時對整體組合和小的元素產(chǎn)生負(fù)面影響。所以文字排版時,內(nèi)容為王。頁面中的段落邊距可能需要比在側(cè)邊欄中的段落更大。標(biāo)題鏈接需要設(shè)置的看起來微胖線條流暢,但在頁腳的鏈接就需要減少填充,盡量整潔。但是記住,排版設(shè)計本身并沒有什么固定的規(guī)定,只有實踐才是最好的方法。同樣要記住的是,排版必須跟著自身的風(fēng)格結(jié)構(gòu)(例如網(wǎng)頁結(jié)構(gòu))來設(shè)計,大量的實踐將是提高你的眼界和經(jīng)驗的最佳方式,它可以使你切實了解如何在特定的web空間中進(jìn)行設(shè)置排版,做出最合適的設(shè)計。當(dāng)涉及到空間設(shè)計,請記住,空間首先是一個設(shè)計工具,其次才是一種美學(xué)素養(yǎng)??臻g創(chuàng)造層次關(guān)系,定義層次結(jié)構(gòu),并強(qiáng)調(diào)內(nèi)容。
想看更多精彩的網(wǎng)頁設(shè)計基礎(chǔ)知識文章,可點(diǎn)擊直接跳轉(zhuǎn)。