字體設(shè)計(jì)（項(xiàng)目式全彩微課版）課件項(xiàng)目五：數(shù)字界面中的字體設(shè)計(jì)

項(xiàng)目五數(shù)字界面中的字體設(shè)計(jì)01ONE【項(xiàng)目引入】

【項(xiàng)目引入】數(shù)字時(shí)代的到來，界面設(shè)計(jì)應(yīng)用成為我們?nèi)粘Ｉ畹囊徊糠郑瑥氖謾C(jī)的界面、電腦界面到各類APP界面，科技與創(chuàng)新生活成為主流。很多產(chǎn)品并不像大家理解的都是用系統(tǒng)字體，隨著界面設(shè)計(jì)的發(fā)展，越來越多的產(chǎn)品放寬了字體的束縛，要求界面的字體設(shè)計(jì)能夠讓用戶準(zhǔn)確獲取信息的同時(shí)，還在視覺上提升界面設(shè)計(jì)的觀感，讓用戶有良好的操作體驗(yàn)。本項(xiàng)目為“中國膏方數(shù)字博物館”網(wǎng)站進(jìn)行首頁標(biāo)題字體設(shè)計(jì)，以契合中國傳統(tǒng)醫(yī)藥的品牌風(fēng)格特點(diǎn)，從而促進(jìn)傳統(tǒng)文化的傳承。

項(xiàng)目背景該項(xiàng)目以中國膏方數(shù)字博物館為創(chuàng)作對象設(shè)計(jì)字體，要體現(xiàn)中國傳統(tǒng)醫(yī)藥的深厚底蘊(yùn)和博大精深。中國膏方歷史悠久，可以追溯到先秦時(shí)期，主要以中藥、配料、輔料組成，是一種重要的中醫(yī)治療和養(yǎng)生手段。所以網(wǎng)站字體的風(fēng)格、形態(tài)應(yīng)與中醫(yī)的文化內(nèi)涵、理念相契合，體現(xiàn)自然天成的特點(diǎn)。從受眾角度考慮，需求人群多數(shù)是患者、醫(yī)生、中醫(yī)愛好者等，設(shè)計(jì)的字體要便于閱讀，為了體現(xiàn)中醫(yī)的傳統(tǒng)韻味，可以采用一些具有簡潔裝飾的字體，展現(xiàn)出中醫(yī)的歷史傳承和網(wǎng)站主題。

設(shè)計(jì)需求及分析隨著人們對健康養(yǎng)生的重視，中醫(yī)文化關(guān)注度越來越高，像中醫(yī)網(wǎng)站這種傳播中醫(yī)知識，提供服務(wù)的平臺，受到受眾廣泛關(guān)注，所以網(wǎng)站設(shè)計(jì)的風(fēng)格和互動(dòng)體驗(yàn)是實(shí)際過程中的關(guān)鍵。字體設(shè)計(jì)作為網(wǎng)站視覺設(shè)計(jì)的重要組成部分，對于傳達(dá)中醫(yī)文化內(nèi)涵、提升網(wǎng)站的專業(yè)性和吸引力起著至關(guān)重要的作用。設(shè)計(jì)一套符合中醫(yī)文化特色的字體，用于中醫(yī)網(wǎng)站的標(biāo)題、導(dǎo)航欄、正文內(nèi)容等各個(gè)部分。確保字體設(shè)計(jì)與中醫(yī)文化相切合，既體現(xiàn)中醫(yī)養(yǎng)生的特點(diǎn)，又要展現(xiàn)出字體設(shè)計(jì)自身的裝飾性。增強(qiáng)中醫(yī)網(wǎng)站的視覺吸引力和品牌形象力。

設(shè)計(jì)需求及分析項(xiàng)目需求本項(xiàng)目中要求字體設(shè)計(jì)體現(xiàn)中醫(yī)特色，理解中醫(yī)的本質(zhì)內(nèi)涵，運(yùn)用中醫(yī)相關(guān)的元素，例如植物紋樣、中藥圖案等融入字體設(shè)計(jì)，并且找到適合的顏色作為輔助，讓文字和色彩共同表達(dá)膏方數(shù)字博物館的主題。受眾在本項(xiàng)目中參與網(wǎng)站的互動(dòng)反饋，設(shè)計(jì)師從受眾的反饋中提煉能夠引起共鳴的設(shè)計(jì)元素，優(yōu)化設(shè)計(jì)方案。

設(shè)計(jì)需求及分析任務(wù)描述字體設(shè)計(jì)師需要根據(jù)不同的場合設(shè)計(jì)不同的字體風(fēng)格，本項(xiàng)目就是通過字體設(shè)計(jì)的形態(tài)和內(nèi)涵表達(dá)中國膏方數(shù)字博物館的特點(diǎn)，通過字體的設(shè)計(jì)傳達(dá)出博物館的價(jià)值觀和情感，引起用戶的情感共鳴，增強(qiáng)用戶對中醫(yī)文化的認(rèn)同感和忠誠度。

關(guān)鍵問題1.數(shù)字界面設(shè)計(jì)中字體設(shè)計(jì)考量的因素有哪些？2.數(shù)字界面設(shè)計(jì)的原則？

數(shù)字界面字體設(shè)計(jì)考量因素易讀性這是數(shù)字界面字體設(shè)計(jì)的首要原則。在不同的設(shè)備屏幕和顯示環(huán)境下，字體的筆畫結(jié)構(gòu)、字間距、行間距等都要保證用戶能夠清晰、快速地識別文字內(nèi)容。例如，為了便于識別，通常會(huì)選擇像宋體、微軟雅黑等筆畫清晰、結(jié)構(gòu)規(guī)整的字體。

數(shù)字界面字體設(shè)計(jì)考量因素風(fēng)格匹配字體的風(fēng)格需要與界面的整體風(fēng)格和品牌形象相契合。對于游戲類界面，可能會(huì)選擇具有個(gè)性和創(chuàng)意的手寫體或藝術(shù)字體來營造獨(dú)特的氛圍；而對于商務(wù)辦公類界面，一般會(huì)采用簡潔、穩(wěn)重的無襯線字體，如Arial、Helvetica等，以體現(xiàn)專業(yè)和高效。

數(shù)字界面字體設(shè)計(jì)考量因素適配性要考慮字體在不同設(shè)備和分辨率下的顯示效果。一些字體在高分辨率屏幕上顯示效果很好，但在低分辨率屏幕上可能會(huì)出現(xiàn)模糊、鋸齒等問題。因此，要選擇那些在各種設(shè)備上都能保持良好顯示效果的字體，或者針對不同設(shè)備進(jìn)行字體的優(yōu)化和適配。

數(shù)字界面字體設(shè)計(jì)的原則一致性在整個(gè)數(shù)字界面中，字體的使用要保持一致性，包括字體類型、大小、顏色、粗細(xì)等方面。這有助于建立統(tǒng)一的視覺風(fēng)格，使用戶在瀏覽界面時(shí)感到舒適和連貫，如標(biāo)題字體的風(fēng)格和大小在各個(gè)頁面都應(yīng)保持一致。

數(shù)字界面字體設(shè)計(jì)的原則層級分明通過對字體大小、粗細(xì)、顏色等屬性的調(diào)整，來創(chuàng)建清晰的信息層級。重要的信息，如標(biāo)題、關(guān)鍵操作按鈕上的文字等，通常會(huì)使用較大的字號、較粗的字體或醒目的顏色來突出顯示；而輔助信息、說明文字等則使用較小的字號和較淺的顏色，以便用戶能夠快速地獲取重點(diǎn)信息。

數(shù)字界面字體設(shè)計(jì)的原則簡潔性數(shù)字界面的空間有限，字體設(shè)計(jì)應(yīng)盡量簡潔，避免過于復(fù)雜的字體樣式和裝飾，以免干擾用戶對信息的讀取。簡潔的字體能夠讓用戶在短時(shí)間內(nèi)快速理解界面?zhèn)鬟_(dá)的信息，提高用戶的操作效率。

設(shè)計(jì)思維拓展和創(chuàng)新數(shù)字界面設(shè)計(jì)字體設(shè)計(jì)的具象思維具象思維是指通過具體的形象、事物或場景來進(jìn)行思考和表達(dá)的思維方式。在字體設(shè)計(jì)中，具象思維可以幫助設(shè)計(jì)師將抽象的概念轉(zhuǎn)化為具體的視覺形象，使字體更具表現(xiàn)力和感染力。

設(shè)計(jì)思維拓展和創(chuàng)新自然中的靈感自然界的萬事萬物都可以作為我們藝術(shù)描摹的對象，樹的葉子、草的紋理等，將其用到該項(xiàng)目的字體設(shè)計(jì)中，既可以體現(xiàn)中醫(yī)文化的主題，又能加強(qiáng)裝飾性。使其具有柔和、優(yōu)美的曲線。

設(shè)計(jì)思維拓展和創(chuàng)新自然中的靈感

設(shè)計(jì)思維拓展和創(chuàng)新傳統(tǒng)文化符號的應(yīng)用挖掘不同文化中的符號、圖案和傳統(tǒng)元素，將其融入字體設(shè)計(jì)中，傳達(dá)特定的文化內(nèi)涵和價(jià)值觀。該項(xiàng)目體現(xiàn)的是中醫(yī)文化，設(shè)計(jì)中加入中國傳統(tǒng)元素，例如纏枝紋等，設(shè)計(jì)具有中國風(fēng)格的數(shù)字界面字體，展現(xiàn)中國文化的獨(dú)特魅力。

設(shè)計(jì)思維拓展和創(chuàng)新打破傳統(tǒng)字體結(jié)構(gòu)傳統(tǒng)的字體樣式往往需要遵循一定的設(shè)計(jì)規(guī)律和規(guī)范，在界面字體中我們可以改變字體的形式，為了主題的展示可以運(yùn)用夸張變形、動(dòng)態(tài)字體等形式增強(qiáng)視覺審美和文化內(nèi)涵。

設(shè)計(jì)思維拓展和創(chuàng)新色彩的抽象思維從色彩學(xué)的角度來看，每種色彩都有自身表述意義，這種意義的表達(dá)是超越具象的抽象思維，我們通過色彩的聯(lián)想和色彩內(nèi)涵象征來確定適合本項(xiàng)目的色彩樣式，設(shè)計(jì)師可以在設(shè)計(jì)中運(yùn)用色彩來傳達(dá)更加豐富、深刻的意義和價(jià)值。在未來的設(shè)計(jì)中，色彩的抽象思維將繼續(xù)發(fā)揮重要作用，為我們帶來更多充滿創(chuàng)意和魅力的設(shè)計(jì)作品。

設(shè)計(jì)思維拓展和創(chuàng)新根據(jù)任務(wù)描述，首先掌握數(shù)字界面設(shè)計(jì)中字體設(shè)計(jì)的具象及抽象思維，在中國膏方數(shù)字館網(wǎng)站設(shè)計(jì)需求分析基礎(chǔ)上，結(jié)合網(wǎng)站首頁設(shè)計(jì)風(fēng)格，進(jìn)行首頁標(biāo)題字體設(shè)計(jì)，并能夠進(jìn)行設(shè)計(jì)的綜合應(yīng)用延展。

設(shè)計(jì)思維拓展和創(chuàng)新字體設(shè)計(jì)初步構(gòu)思在中國膏方數(shù)字館網(wǎng)站設(shè)計(jì)基礎(chǔ)上，進(jìn)行品牌需求分析，為了突出中國膏方數(shù)字館網(wǎng)站中傳統(tǒng)文化的特點(diǎn)，又要滿足界面字體設(shè)計(jì)中識別的重要功能，字體設(shè)計(jì)的基礎(chǔ)框架測試中從黑體、站酷酷黑、宋體、書法字體中進(jìn)行了比較選擇，最終選擇宋體作為字體設(shè)計(jì)的基礎(chǔ)框架。圖字體測試

設(shè)計(jì)思維拓展和創(chuàng)新字體設(shè)計(jì)創(chuàng)意優(yōu)化結(jié)合中國膏方數(shù)字館網(wǎng)站設(shè)計(jì)風(fēng)格，進(jìn)行設(shè)計(jì)元素提煉，將網(wǎng)站設(shè)計(jì)的植物圖形融入到字體設(shè)計(jì)中，運(yùn)用卷葉法進(jìn)行字體與圖形的結(jié)合。在此基礎(chǔ)上進(jìn)行創(chuàng)意草圖繪制，如下圖。圖中國膏方數(shù)字博物館網(wǎng)站標(biāo)題字體設(shè)計(jì)草圖

數(shù)字化繪制將已采用的草圖導(dǎo)入AdobeIllustrator，通過以下步驟，將草圖進(jìn)行數(shù)字化處理。

數(shù)字化繪制以粗宋建構(gòu)字體框架使用思源宋體CN-SemiBold，作為字體設(shè)計(jì)架構(gòu)的框架基礎(chǔ)，如下圖所示。

數(shù)字化繪制選擇框架保留部分筆畫（1）執(zhí)行【文字】/【創(chuàng)建輪廓】（Shift+Ctrl+O）,將文字轉(zhuǎn)換為圖形。（2）根據(jù)草圖，保留框架中的部分筆畫。

數(shù)字化繪制刪除筆畫部分按照草圖進(jìn)行數(shù)字化繪制使用【鋼筆工具】，按照草圖上的創(chuàng)意構(gòu)思，進(jìn)行筆畫繪制。

結(jié)合網(wǎng)站進(jìn)行整合優(yōu)化1.根據(jù)中國膏方數(shù)字館網(wǎng)站需求分析，結(jié)合中草藥草本的特性，為體現(xiàn)網(wǎng)站帶給受眾的健康、綠色和安全，因此將字體顏色設(shè)置為綠色（C:80/M:25/Y:90/K:0）。2.根據(jù)中國膏方數(shù)字館網(wǎng)站首頁整體設(shè)計(jì)布局，將字體進(jìn)行豎排版式設(shè)計(jì)，如圖所示。

結(jié)合網(wǎng)站進(jìn)行整合優(yōu)化

最終確定與交付完成所有的修改和優(yōu)化后，確定最終的字體設(shè)計(jì)。界面中字體設(shè)計(jì)的文件交付需要滿足界面設(shè)計(jì)切圖規(guī)范，此時(shí)，需要將進(jìn)行界面設(shè)計(jì)的Photoshop軟件與切圖標(biāo)注軟件藍(lán)湖、PxCook（像素大廚)等軟件結(jié)合使用，進(jìn)行字體設(shè)計(jì)切圖。1.本案例切圖教學(xué)展示，使用PxCook（像素大廚)進(jìn)行。PxCook（像素大廚)安裝完畢后，首先將Photoshop與其進(jìn)行遠(yuǎn)程連接。執(zhí)行【編輯】/【遠(yuǎn)程連接】，勾選“啟用遠(yuǎn)程連接”，設(shè)置密碼（此密碼需要與PxCook中的相同）

最終確定與交付2.運(yùn)行PxCook（像素大廚)，點(diǎn)擊軟件頁面最上方的“PS切圖工具”。3.在彈出的對話框中，將密碼置入，點(diǎn)擊“開始使用”，即可進(jìn)入切圖頁面。4.設(shè)置“切圖工具”數(shù)值，由于當(dāng)前界面設(shè)計(jì)文件是網(wǎng)頁設(shè)計(jì)，因此，選擇“Web”，可以設(shè)置“路徑”保存位置；按照需求選擇保存的圖片格式，此處選擇.png格式。5.回到Photoshop中打開首頁設(shè)計(jì)文件，在圖層面板中，選擇需要截圖的圖層或編組；隨后，在“切圖工具”中，點(diǎn)擊“切所選圖層”，字體設(shè)計(jì)即可按照網(wǎng)頁顯示尺寸進(jìn)行保存。

AIGC在字體設(shè)計(jì)中面臨的挑戰(zhàn)

缺乏人文情感與創(chuàng)意深度AIGC生成的字體雖然在形式上可能很新穎，但往往缺乏人文情感和創(chuàng)意深度。字體設(shè)計(jì)不僅僅是形式上的美觀，還需要傳達(dá)特定的情感和文化內(nèi)涵，而AIGC目前還難以理解和把握這些深層次的內(nèi)容。

難以滿足復(fù)雜定制需求對于一些具有高度定制化需求的字體設(shè)計(jì)，如特定品牌的專屬字體，需要體現(xiàn)品牌獨(dú)特的價(jià)值觀和個(gè)性，AIGC可能無法完全滿足這些需求，需要設(shè)計(jì)師進(jìn)行大量的后期調(diào)整和完善。

存在版權(quán)和倫理問題AIGC生成字體的版權(quán)歸屬尚不明確，如果在生成過程中使用了未經(jīng)授權(quán)的字體數(shù)據(jù)作為訓(xùn)練樣本，可能會(huì)引發(fā)版權(quán)糾紛。同時(shí)，AIGC生成的字體可能會(huì)被用于不良目的，如設(shè)計(jì)欺騙性或誤導(dǎo)性的內(nèi)容，這涉及到倫理和道德問題。

字體動(dòng)態(tài)字體動(dòng)態(tài)是指文字在界面、視頻、動(dòng)畫等場景中，通過改變自身的形態(tài)、位置、顏色等屬性，產(chǎn)生動(dòng)態(tài)變化的視覺效果。這種動(dòng)態(tài)效果可以增強(qiáng)文字的吸引力、表現(xiàn)力和信息傳達(dá)能力。在UI設(shè)計(jì)中，為字體賦予一定的動(dòng)態(tài)可以使界面更加具有動(dòng)感和活力。尤其當(dāng)我們在使用較為普通的字體時(shí)，為整體加入一定的方向感可以加強(qiáng)界面的動(dòng)態(tài)效果，同時(shí)也能為使用者引導(dǎo)出較為明確的視覺走向。2016年何庭安發(fā)布了一組漢字動(dòng)態(tài)設(shè)計(jì)作品，是關(guān)于將漢字與動(dòng)態(tài)設(shè)計(jì)接軌的專案。與傳統(tǒng)的靜態(tài)字體設(shè)計(jì)不同，他的設(shè)計(jì)為漢字加上動(dòng)態(tài)效果后，更好地詮釋了字面含義，看上去非常酷炫。比如單個(gè)文字“中”，其動(dòng)態(tài)設(shè)計(jì)像是在展示旗幟在風(fēng)中飄揚(yáng)；“國”字則呈現(xiàn)出一種建筑搭建的過程。

字體動(dòng)態(tài)而在2021年，他為《怎辦！字型怪怪的？》展覽打造的視覺設(shè)計(jì)，在其數(shù)字設(shè)備上進(jìn)行播放，引起了廣泛討論。取材自小時(shí)候上網(wǎng)的體驗(yàn)，呈現(xiàn)出一個(gè)由文字拼湊而成、資訊量爆炸，充滿各種表現(xiàn)風(fēng)格，但仍維持著數(shù)位質(zhì)感的虛擬國度。該展覽依照不太正常的邏輯談字體，透過虛擬國度中字體的缺席、變異與錯(cuò)置，讓大家去感受各種不合時(shí)宜的情境。

字體動(dòng)態(tài)INCLUDEPICTURE\d"/?url=/2021/0614/63c2de59j00quoifv0011c000u000gwg.jpg&thumbnail=660x2147483647&quality=80&type=jpg"INET

字體動(dòng)態(tài)圖何庭安漢字動(dòng)態(tài)設(shè)計(jì)作品軟件制作方面，專業(yè)且豐富的動(dòng)態(tài)字體設(shè)計(jì)可選擇AdobeAnimate、AfterEffects等軟件，當(dāng)然，也可以選擇使用Pho