網(wǎng)頁設(shè)計(jì)中使字體和圖片更好匹配的技巧

新聞 2023-08-31編輯：重慶網(wǎng)站建設(shè)標(biāo)簽： 網(wǎng)頁設(shè)計(jì) 匹配

重慶網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實(shí)力,PC+手機(jī)+微信+小程序
【模板網(wǎng)站的價(jià)格】國際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營銷網(wǎng)站的效果】重長尾，重優(yōu)化，提權(quán)重，擴(kuò)收錄，提排名
【量身訂制的設(shè)計(jì)】據(jù)據(jù)需求量身定制。設(shè)計(jì)到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對(duì)1的專屬VIP服務(wù)

　　有人說中文網(wǎng)頁的設(shè)計(jì)沒有字體設(shè)計(jì)，因?yàn)榫W(wǎng)頁可以使用的中文字體非常有限，只有粗體、宋體、微軟雅黑等?？梢允褂茫@給中文網(wǎng)頁的美感帶來了損失。相比英文對(duì)字體的考慮，網(wǎng)頁上的中文字體太隨意了。

　　當(dāng)然，這種說法在某種程度上是正確的，但我們應(yīng)該從另一個(gè)角度來看。中文網(wǎng)頁中的字體確實(shí)僅限于這些字體，但并不代表中文網(wǎng)頁沒有字體設(shè)計(jì)。

　　理解網(wǎng)頁設(shè)計(jì)中的“詞”

　　首先，我們簡單地將網(wǎng)頁中的文字劃分為可替換和不可替換的部分。

　　可替換詞是可以通過后臺(tái)管理進(jìn)行編輯的詞，如博文、產(chǎn)品描述等。網(wǎng)頁制作過程中設(shè)置了不可替代的字符。后臺(tái)管理不為字符提供編輯條件，只能通過網(wǎng)頁代碼進(jìn)行修改，如導(dǎo)航、Banner等。不可替換的文字完全不能修改，但是修改一次會(huì)花費(fèi)一定的金額，所以修改間隔，比如導(dǎo)航修改，需要經(jīng)過代碼，Banner中文字的修改也需要重新設(shè)計(jì)Banner圖片。

　　備選字符只能使用網(wǎng)頁允許的給定字體，因此中文字體的選擇范圍較窄。然而，不可替代的字符可以通過圖片等來顯示。并制作成透明背景的圖片。這時(shí)字體的使用和排版都比較靈活，設(shè)計(jì)師會(huì)有足夠的創(chuàng)作自由。

　　下面設(shè)計(jì)使用的字體都有一定的設(shè)計(jì)，字體替換不是很容易。

　　這里所謂的帶圖搭配也是指這種可以設(shè)計(jì)的人物。

　　字形觀察

　　首先，字體是圖形，然后是承載信息的文本。因此，在選擇與圖片相匹配的字體時(shí)，需要重點(diǎn)考慮文字的形態(tài)特征是否與圖片相協(xié)調(diào)。

　　在選擇字體之前，首先要觀察圖片中的形態(tài)特征。如果插圖以插圖的形式呈現(xiàn)，那么插圖中的風(fēng)格細(xì)節(jié)，以及這種風(fēng)格所表達(dá)的時(shí)空氛圍感，都可以為你選擇與之搭配的字體提供依據(jù)。例如，英語中的無襯線通常更現(xiàn)代，而襯線則更古典。

　　下一頁的地圖是用曲線建模的。因此，匹配文本采用Adelle無襯線字體?？梢钥闯?，字體中的弧線處理與地圖中的曲線流建模相呼應(yīng)。

　　下面設(shè)計(jì)的圖紙是分散的矩形，所以對(duì)應(yīng)使用的字體是graphik，也顯示出非常清晰的幾何邊緣。

　　上述字形帶來的形態(tài)特征與圖片的匹配是使圖文完美匹配的途徑之一。此外，我們知道一些特殊的風(fēng)格化字體也可以表達(dá)出一種特殊的氛圍。

　　比如下圖中的機(jī)器在80年代看起來非常機(jī)械，這種造型也營造出了技術(shù)世界的懷舊感，所以像素文字最適合與此搭配。

　　從這些英文字體的圖形匹配的例子來看，我們需要觀察和解構(gòu)“形”的能力。同時(shí)，還需要對(duì)字體所承載的風(fēng)格特征進(jìn)行分類。英語不僅要精挑細(xì)選，中文也要慎重考慮，而不是以期待遇到漂亮字體為目的進(jìn)行設(shè)計(jì)，最后的結(jié)果是失敗。

　　字體也可以在原有字體的基礎(chǔ)上進(jìn)行設(shè)計(jì)和“變形”，當(dāng)然不能頻繁改動(dòng)。根據(jù)主題做一些“微調(diào)”，讓氣氛更加飽滿立體。

　　比如填充圓字母的空心部分，增加了一種可愛感，也非常兼容有圖片的角色形象。

　　字間距和行距

　　用你敏銳的設(shè)計(jì)師的眼睛觀察字形，區(qū)分不同字體的特點(diǎn)，是你選擇較大字體時(shí)需要的能力。所以非常適合第一張圖片，Banner等。其中文本需要顯示為圖片。我們的字體可以顯示在段落中。這時(shí)，形狀的特征逐漸淡化，我們更注重字與字之間的關(guān)系，即字間距。

　　一般來說，字距的選擇總是由字體本身及其與空間的關(guān)系決定的。字距較小時(shí)，傳達(dá)出緊湊感，而寬松的字距可以表達(dá)出輕松感。

　　比如大規(guī)模顯示字體之間的距離總是很近，因?yàn)樽煮w本身已經(jīng)占據(jù)了足夠的空間，如果在字體之間增加更多的空間，整個(gè)空間就會(huì)被填滿。所以我們也可以說，字距是根據(jù)整個(gè)空間來調(diào)整確定的。同時(shí)畫面顯示更加集中，所有箭頭真的是“千夫所指”，字間距縮小，有輕微的集中感。

　　相對(duì)較小的字體略顯輕松閑適，與之相匹配的畫面也是一堆木頭，與木匠的自然舒適相聯(lián)系。

　　它也適用于漢語世界。但不同的是，中文字體之間的距離應(yīng)該更遠(yuǎn)，以保持單一字體的獨(dú)特顯示。因?yàn)闈h語中的每一個(gè)字都可以看作是具有一定意境的畫面，所以保持字距是漢語展示中保持美感的關(guān)鍵。

　　當(dāng)字體垂直顯示時(shí)，上下字距應(yīng)該加寬。這是因?yàn)槲覀內(nèi)祟惖难劬?duì)于上下順序的閱讀習(xí)慣并不熟悉，如果字間距比較近，很容易形成字與字之間的視覺粘連。行距不同。檢查行距時(shí)，字體變成了段落，出現(xiàn)在一段中的字體就是段落。你應(yīng)該注意整個(gè)段落的灰度值。所謂灰度值就是字體的密度。

　　大行距，像大字距一樣，可以傳達(dá)緊湊和輕松的感覺。同時(shí)，行距還與字體的顏色、字距、字號(hào)和最終形狀有關(guān)。英文行距可以是標(biāo)準(zhǔn)比例尺的1.5倍，但是，所有規(guī)則都取決于條件。如果在特殊場合，仍然可以選擇更大或更小的行距進(jìn)行顯示。

　　這一段的字體排列符合畫面?zhèn)鬟_(dá)的兒童教育成長的主題。字體圓潤，間距寬松，顯示出輕松的氛圍。字體本身采用與LOGO相同的顏色，比黑色字體更有意思。

　　附言

　　明確字體的字間距所創(chuàng)造的密度，行距會(huì)帶來段落的灰色幾何。配合字體本身的顯示形式，可以更好地選擇匹配的圖片。對(duì)字體有更多的了解，對(duì)不同風(fēng)格字體的形狀有一個(gè)大概的了解，這樣在使用的時(shí)候就不會(huì)到處瞎找合適的字體了。通常對(duì)于字體的積累是極其重要的。記得給自己打造一個(gè)字體，這樣在圖文匹配的時(shí)候就可以得心應(yīng)手了。

• 上一章：網(wǎng)站頁面設(shè)計(jì)怎樣才會(huì)得到訪客認(rèn)可
• 下一章：網(wǎng)站設(shè)計(jì)要注意事項(xiàng)