界面好看,字體當(dāng)然不能拖后腿

sky
0 評論 8989 瀏覽 67 收藏 18 分鐘
🔗 产品经理的不可取代的价值是能够准确发现和满足用户需求,把需求转化为产品,并协调资源推动产品落地,创造商业价值。

字體作為設(shè)計(jì)中重要的模塊,卻很少被提及,大部分設(shè)計(jì)師遵循常規(guī)地進(jìn)行字體的選擇。實(shí)際上,如果設(shè)計(jì)的字體出彩,那么對設(shè)計(jì)而言將是錦上添花。

一、字體的價(jià)值

在界面設(shè)計(jì)中,字體應(yīng)該是最被忽略的一個(gè)點(diǎn),我們有圖標(biāo)規(guī)范,設(shè)計(jì)規(guī)范,表單,顏色規(guī)范等等,但是對于字體規(guī)范少之又少。

除了規(guī)范蘋果和安卓設(shè)計(jì)默認(rèn)那些字體,關(guān)于字體的研究少之又少,很多人會說UI中用的字體就那么幾個(gè),我們又不是做運(yùn)營活動和營銷,不需要了解那么多字體。其實(shí)不是,今天和大家分享下UI中的字體。

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

網(wǎng)易考拉品牌升級明確規(guī)定中英文字體運(yùn)用

字體在設(shè)計(jì)中重要程度越來越高,文字不僅是閱讀形式一種,不同的字體不僅能影響排版,同時(shí)也能反應(yīng)出產(chǎn)品的性格。越來越多的品牌把字體設(shè)計(jì)融于品牌DNA中,上圖是在網(wǎng)易考拉改版設(shè)計(jì)中,針對中英文字體和整體品牌的融合 。

界面好看,有本事界面中的字體也好看

韓國知名電商11街的視覺升級中,對于中英文字體,有著明確的規(guī)范

界面好看,有本事界面中的字體也好看

UBER的設(shè)計(jì)規(guī)范中,也對字體有著明確的要求,英文字體,印刷字體,以及詳細(xì)使用規(guī)則

越來越多的公司慢慢對字體在設(shè)計(jì)中運(yùn)用進(jìn)行規(guī)范,今天我們一起來聊聊界面設(shè)計(jì)中如何去定義我們的字體,以及UI中字體的一些運(yùn)用規(guī)則。

二、字體的情感

界面好看,有本事界面中的字體也好看

字體是影響品牌的很關(guān)鍵詞元素,如果了解色彩心理學(xué)的同學(xué),應(yīng)該知道不同的顏色其實(shí)有對應(yīng)的色彩情感,那么同樣的不同字形,筆畫等等都也是有品牌情感的。

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

比如我們常用的西文常見字體之一,Helvetica作為一種無襯線字體,整體字體筆畫安全,專業(yè),嚴(yán)謹(jǐn)廣泛適用于各種場合,尤其受品牌商標(biāo)的偏愛, 包括3M,寶馬,雀巢, 曾經(jīng)的蘋果等等。另外,該字體很受政府青睞,美國稅單上用的字體就是 Helvetica。

界面好看,有本事界面中的字體也好看

圖源:https://www.behance.net/gallery/41054815/Typography-Google-Fonts-Combinations-Volume-2

Roboto是為Android操作系統(tǒng)設(shè)計(jì)的一個(gè)無襯線字體家族,該字型特點(diǎn)為“現(xiàn)代的、平易近人”也一直是安卓系統(tǒng)默認(rèn)英文字體。

界面好看,有本事界面中的字體也好看

《機(jī)械姬》這個(gè)電影大家應(yīng)該很熟悉,作者使用幾何版型襯線字體,整體呈現(xiàn)科技感。

界面好看,有本事界面中的字體也好看

《鋼鐵俠》電影中,整套設(shè)計(jì)來源Territorystudio團(tuán)隊(duì)設(shè)計(jì)的虛擬界面。里面一整套虛擬界面,包括圖形,字體等,整體風(fēng)格高度一致,整體字體呈現(xiàn)未來和科技感。

所以一套字體一定是和整個(gè)品牌DNA是相延續(xù)的,它們之間有整體品牌調(diào)性,而不是單獨(dú)存在,就像我們的內(nèi)衣,看不見但是很重要,字體也是如此。

三、中文字體

界面好看,有本事界面中的字體也好看

iOS和安卓都有官方推薦默認(rèn)字體,見上圖,但是很多時(shí)候我們的品牌,整體設(shè)計(jì)語言都有自己獨(dú)特個(gè)性化,所以有時(shí)候也需要去重新制定一套新的字體,那么對于這些字體,我們要如何去選擇呢?

在選擇字體時(shí)候,一定要根據(jù)整體品牌調(diào)性去選擇最合適的字體,下面是一些界面中常用的中文字體,而且版權(quán)也比較容易買到。

界面好看,有本事界面中的字體也好看

華文黑體視覺感受:字形方正,筆畫較粗,整體給人易識別,可讀性高。

界面好看,有本事界面中的字體也好看

思源黑體視覺感受:由adobe和Google 聯(lián)合推出的開源字體。字體家族龐大,涵蓋了中日韓用字。由日本設(shè)計(jì)師主導(dǎo),與小冢黑體風(fēng)格上一脈相承,字體堅(jiān)固穩(wěn)定,字符空間均勻,整體給人專業(yè),硬朗感受。

界面好看,有本事界面中的字體也好看

微軟黑體視覺感受:是方正第一代屏顯字體,也開創(chuàng)了中文屏顯字體設(shè)計(jì)先河,字形略呈扁方而飽滿,筆畫簡潔而舒展,易于閱讀,視覺感受清新和優(yōu)美。

界面好看,有本事界面中的字體也好看

冬青黑體視覺感受:字的結(jié)構(gòu)是日本的印刷字設(shè)計(jì)與中國用字習(xí)慣有諸多不一致的地方,盡管冬青黑體簡體針對中國大陸而設(shè)計(jì),卻保留了原設(shè)計(jì)的風(fēng)格,這反倒讓字體顯得別具風(fēng)味,有個(gè)性,錘子系統(tǒng)貌似運(yùn)用的此款字體。

界面好看,有本事界面中的字體也好看

黑體-簡視覺感受:黑體字是現(xiàn)代漢字體系中最重要的字體之一,特點(diǎn):非常突出,方正、粗獷、樸素、簡潔、無裝飾、橫豎筆形粗細(xì)視覺相等、筆形方頭方尾、黑白均勻,因此非常醒目,運(yùn)用廣泛。

界面好看,有本事界面中的字體也好看

蘋方-簡視覺感受:蘋方是蘋果新一代主題字,整體字體特點(diǎn):專業(yè),便捷,排版嚴(yán)謹(jǐn),比較容易識別,是蘋果官方中文字體,也是大多數(shù)app首選字體。

界面好看,有本事界面中的字體也好看

方正蘭亭黑感受:方正蘭亭黑系列是微軟雅黑的延續(xù)設(shè)計(jì),字面略為縮小,字重梯度多,獲得了更廣泛的適用性,其中用在品牌營銷中很多。它的特點(diǎn):靈活多變,個(gè)性化營銷字體,排版嚴(yán)謹(jǐn),識別性高,比如天貓?zhí)詫毢芏酄I銷banner規(guī)范都是運(yùn)用的蘭亭黑。

關(guān)于字重

界面好看,有本事界面中的字體也好看

字重:字體中很重要一個(gè)概念,不同字重傳遞出來視覺感受完全不一樣。

輕字重:傳遞出輕盈,放松視覺感受,常配合粗的字重使用,在一些引導(dǎo)頁面,閱讀頁面,說明文案時(shí)候使用。

重字重:視覺感受莊重,嚴(yán)謹(jǐn),很重要,常用在重點(diǎn)強(qiáng)調(diào)的文字,數(shù)字,引導(dǎo)行動操作點(diǎn)上,或者頁面中大的標(biāo)題,banner主標(biāo)題等等。

四、英文字體

英文字體相對中文來說,字體包更小,所以選擇性更大一些,今天主要推薦一些谷歌免費(fèi)開源字體,谷歌字體真的非常棒,搭配好了,能帶來很多不一樣視覺效果。

1. Playfair Display

受很多設(shè)計(jì)師喜歡的襯線字體,整體搭配出來雜志感,大牌感特別強(qiáng),在很多高品質(zhì)的產(chǎn)品頁面,或者H5頁面中有應(yīng)用到。

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面來源于網(wǎng)絡(luò)

這個(gè)字體在我喜歡的字體中排前10,常常和一些非襯線字體搭配起來,用作大標(biāo)題或者主題,非常優(yōu)雅并具有藝術(shù)雜志美感。

界面好看,有本事界面中的字體也好看

界面來源于網(wǎng)絡(luò)

該字體在UI設(shè)計(jì)中也是廣受熱愛,在一些PC頁面,或者閱讀類產(chǎn)品中,配合優(yōu)美的排版,整體非?,F(xiàn)代。

2. Nunito Sans

英文界面常用的字體,國外設(shè)計(jì)師用的比較多,字形很現(xiàn)代、干凈,字母之間添加一些字間距,看起來更加干凈。

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面來源于網(wǎng)絡(luò)

Nunito Sans無論在平面設(shè)計(jì)中,或者UI設(shè)計(jì)中都非常干凈、現(xiàn)代,有利于閱讀。所以在做設(shè)計(jì)時(shí)候非常喜歡用,有個(gè)小竅門,在做英文時(shí)候,字母之間加一個(gè)字間距,可以讓設(shè)計(jì)看起來更舒服。

3. Montserrat

這種字體很獨(dú)特,不像Nunito Sans那樣干凈。但每個(gè)字母上的一個(gè)小裝飾,使得UI看起來非常有吸引力。

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面來源于網(wǎng)絡(luò)

可以看出Montserrat字體深受一些大廠喜愛,無論是大小寫組合,還是正文閱讀,都很獨(dú)特。

界面好看,有本事界面中的字體也好看

在UI界面中也是如此,讓整體設(shè)計(jì)更加獨(dú)一無二,充滿著細(xì)節(jié)。

4. Roboto

谷歌產(chǎn)品界面默認(rèn)字體,PC和線上默認(rèn)字體,可見在谷歌的重視程度。如果你做一個(gè)英文頁面,不知道選什么字體,那么選擇這個(gè)是最安全的。

界面好看,有本事界面中的字體也好看

界面好看,有本事界面中的字體也好看

界面來源于網(wǎng)絡(luò)

這個(gè)字體通用性很強(qiáng),字重也很豐富,無論是粗體還是細(xì)體,用在各類產(chǎn)品網(wǎng)站和移動界面中都非常簡潔優(yōu)雅。

5. Open Sans

Open Sans是一種無襯線字體,移動設(shè)計(jì)中也是運(yùn)用比較多的一個(gè)字體,比較現(xiàn)代,具有簡潔的視覺感受。

界面好看,有本事界面中的字體也好看

運(yùn)用在網(wǎng)站中很干凈,幾乎沒有多余的筆畫正式,字重對比強(qiáng)烈。

界面好看,有本事界面中的字體也好看

它配合其他字體運(yùn)用,都很OK,幾乎百搭,在國外很多經(jīng)典的官方網(wǎng)站都有運(yùn)用到。

6. PT Sans

1998年發(fā)布,基于俄羅斯的無襯線字體,一般常用于雜志,美食產(chǎn)品。

界面好看,有本事界面中的字體也好看

PT Sans在美食頁面中的運(yùn)用,和食物本身也融合地很好。

界面好看,有本事界面中的字體也好看

PT Sans在雜志排版中運(yùn)用也同樣很和諧。

7. Futura PT

Futura PT是一種無襯線字體,也是深受設(shè)計(jì)師喜歡的一款字體,整體視覺感受現(xiàn)代時(shí)尚,我們一起來看看它的視覺魅力。

界面好看,有本事界面中的字體也好看

作為大標(biāo)題的運(yùn)用,簡單清晰干凈

界面好看,有本事界面中的字體也好看

作為設(shè)計(jì)公司網(wǎng)站的運(yùn)用,配上網(wǎng)格的布局,非常時(shí)尚

界面好看,有本事界面中的字體也好看

寶馬御用字體之一,用在寶馬官方APP和網(wǎng)站上,可見尊貴感

界面好看,有本事界面中的字體也好看

時(shí)尚雜志的官網(wǎng)運(yùn)用,干凈簡潔

英文系列字體還有很多,后續(xù)有機(jī)會再和大家推薦,今天推薦的這些英文字體在界面中完全可以用到,并且很容易下載,都在 fonts.google.com 網(wǎng)站中。

五、最后

正如前面開頭所說,字體是設(shè)計(jì)中體現(xiàn)品牌很重要一點(diǎn),字體選擇非常重要,字體也是設(shè)計(jì)中最大量的內(nèi)容,所以我們一定要掌握起來,下一篇我將會圍繞數(shù)字字體運(yùn)用分享給大家,下周見。

 

作者:sky,支付寶設(shè)計(jì)專家,微信公眾號:我們的設(shè)計(jì)日記(ID:helloskys),設(shè)計(jì)交流添加微信:helloskys000

本文由 @我們的設(shè)計(jì)日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!
专题
16963人已学习14篇文章
图标是用户页面不可缺少的元素,本专题的文章分享了图标设计指南。
专题
18023人已学习15篇文章
促销的规则多样,对提高客单价和客单量有很大帮助。本专题的文章提供了促销系统设计指南。
专题
12471人已学习13篇文章
发票是财务中必不可少的物品,那发票系统该如何设计呢?本专题的文章分享了发票系统设计指南。
专题
76515人已学习25篇文章
APP设计是一位优秀产品经理的基本功。
专题
12641人已学习12篇文章
运营分很多类,流量运营、用户运营、内容运营…每一个环节都有特别关注的数据和指标。本专题的文章分享了互联网运营,应该分析哪些数据和指标。
专题
35722人已学习18篇文章
好的数据分析可以使我们的产品不断优化,而做好数据分析的第一步就是做好数据埋点。