麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 網站 > WEB開發(fā) > 正文

網頁設計的常用字體規(guī)范

2024-04-27 15:12:07
字體:
來源:轉載
供稿:網友

看完上面這張圖你就能明白了 是不是閱讀起來非常的難受? 那就對了! 其實折磨你的問題有以下幾點 1.字體樣式太多,雜亂無章 2.使用的字體不易識別 3.字體和內容的氣氛不匹配 怎么

最新常用字體規(guī)范pg

 

看完上面這張圖你就能明白了

是不是閱讀起來非常的難受?

 

那就對了!

其實折磨你的問題有以下幾點

1.字體樣式太多,雜亂無章

2.使用的字體不易識別

3.字體和內容的氣氛不匹配

 

怎么避免這樣的結果發(fā)生呢?

一句話:通過常用字體規(guī)范可以幫助你做出符合要求的設計

 

一.字不過三!

 

很多大神說過色不過三,其實在同一個APP或在同一個設計作品中字體也不要過三種樣式,一般在每個項目設計中使用1-2個字體樣式就夠了,然后通過對字體大小或顏色來強調重點文案。

 最新常用字體規(guī)范

 

看到上圖中的幾個界面,都是通過字體的大小來區(qū)分出界面內容中的層級關系的。

其中包括了螞蟻花唄的banner里只用了一種字體來區(qū)分主標題和副標題的關系。

其實網頁也是一樣,使用一種字體樣式,通過字體大小的對比也能做出高逼格的構圖和設計。

 

2388573d340c32f8757cb9869fad.jpg

 

講真!字體用的太多,會顯得你不夠專業(yè)!

 

 

二 .字與背景的層次要分明

 

42a2573d51436ac7253f9a8bcedd.jpg

5e98573d514d6ac7253f9a6306fc.jpg

 

看完上面兩張Banner圖是不是發(fā)現了同樣的問題,字體和背景融到一塊去了,在閱讀的時候非常的不方便

這樣的Banner如何才能達到廣而告知呢?

 

包括做移動界面也是一個道理,選擇下面這樣的一個背景,用戶在光照很強的時候能看清嗎?

 

25d5573d345932f8757cb997b40f.jpg

 

所以易讀性和易用性是用戶的根本訴求!

 

三.字體樣式與氣氛要匹配

 

dcec573d348d6ac7253f9a8375a2.jpg

看完這個圖

 

第一個感覺就是看不懂!仔細看才知道是眼部精華油。

文字的風格和整體的設計風格不一致,沒有帶動用戶的購買欲。

 

我們再來看看下圖

 

e078573d34a832f8757cb9ee4332.jpg

 

結合文案內容,設計風格采用了比較明快剛勁的設計風格,字體也選擇了比較剛勁有力的造字工坊勁黑體。氣氛匹配,用戶代入感強。

 

86f3573d34ef32f8757cb961f4b0.jpg

 

 

活動banner的氣氛非常重要,選擇合適的字體樣式能加強購買欲和點擊欲。

 

 

以風格分類常用的字體有以下幾種類型

 

1.平穩(wěn)型字體

1196573d351232f8757cb96972ff.jpg46d1573d35426ac7253f9a14a530.jpg

在陌陌APP歡迎也中使用到了比較平穩(wěn)的方正正中黑,整體風格比較直接明了。

 

5cd0573d354d32f8757cb9f3e61e.jpg

方正蘭亭系列是網頁設計中必用的字體,穩(wěn)重而細膩,還具有時尚科技感。

看看下面這個蘋果的網頁,就造了

用了方正蘭亭超細后的感覺,是不是高端了許多~

 

當然用在科技產品的官網中更合適不過了。穩(wěn)重而富有科技感。

 

ee65573d35ae6ac7253f9a0f9eac.jpg

2.剛勁有力型

629f573d35c432f8757cb9c29fce.jpg

張海山的字體非常的好用,可以試試,清晰明了,年輕有力

 

b2b0573d35e86ac7253f9a4ee8a1.jpg  

華康儷金黑有種大字報的感覺

 

5706573d362632f8757cb9c9701c.jpg

 

3.可愛型字體

5e82573d36356ac7253f9a971cc2.jpg

 使用方正經黑設計的內涵banner

是不是很可愛很有深度~~~

 

3e5e573d36516ac7253f9a716722.jpg

 

漢儀小麥使用在插畫中的感覺,不解釋

 

fb9c573d36b332f8757cb9c24e2a.jpg (by 白茶)

 

華康海報體

專題和引導頁面中經常會用到

 

bf66573d36cd32f8757cb9056c02.jpg

 

騰翔金磚體

 

這也是一個非常不錯的字體

設計師利用了騰翔金磚體的原型將美食的元素融入到了設計中

 

16d8573d36f932f8757cb9cd71dc.jpg

 

(注意合法使用字體,字體都是有版權的哦~)

 

當然我們還可以使用毛筆字生成器

 

通過自由的書法網站在線生成

在網址中輸入文本,再進行選擇書法字體樣式

通過這種方法我們能很快的找到需要的書法字體

 

這招非常管用!

 

22cd573d37216ac7253f9a74df8c.jpg

 

推薦大家來兩個毛筆字生成的網站:

http://www.akuziti.com/mb/

http://www.51poca.com/

二.界面中文字使用的規(guī)則

1.了解系統(tǒng)字體

iOS系統(tǒng)中用的是蘋方字體系列

為了加強層次關系蘋方系列從細到粗有著不同的樣式

c9ed573d37456ac7253f9a1ae65b.jpg

Android的默認字體是Roboto和Noto系列

 

Roboto有6種字樣

Thin、Light、Regular、Medium、Bold 和 Black

 

0974573d37816ac7253f9a04d7a2.jpg

 

Noto有7種字樣

Thin, Light、DemiLight、Regular、Medium、Bold 和 Black

 

4e4e573d379c6ac7253f9a202b17.jpg

 

 

2.統(tǒng)一字號

一個App,不同位置的字體字號

你能準確地說出來嗎?

如果不能,說明你還不了解規(guī)范,沒有去制定規(guī)范。

那我們先了解一下常規(guī)的一些大小(應用于2倍尺寸中,即iphone5/6)

導航主標題字號:34/36px

蘋果默認標題字號為34px,而有些軟件也會用到36px,更加強頁面位置關系

比如微信導航標題字號36px,導航字體醒目易于對應頁面位置。

54ce573d37c532f8757cb9c2a581.jpg

 

在內文展示中字號大小又是多大呢?

 

正文字號32px-34px

副文是28px-24px

最小字號不低于20px

 

字在正文字號使用中,閱讀類的APP更注重文本的閱讀便捷性

正文字號34px,會選擇性的選用蘋方粗體


發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 在线播放中文 | 九一免费在线观看 | 毛片118极品美女写真 | 欧美韩国一区 | 欧美日韩中文字幕在线 | 亚洲一区二区在线免费 | 在线免费日韩 | 国产一级毛片视频在线! | 久久草草影视免费网 | 国产91免费看 | 鲁人人人鲁人人鲁精品 | 91精品久久香蕉国产线看观看 | 草b视频在线观看 | 欧美一级欧美 | 欧美成人午夜一区二区三区 | 免费观看视频网站 | 黄色网址免费入口 | 一级看片免费视频 | 成人午夜小视频 | 特色一级黄色片 | 国产精品色在线网站 | 国产精品自在线拍 | 国产自在自线午夜精品视频在 | 亚洲网站在线观看 | 久久综合福利 | 一级大片在线观看 | 免费播放欧美毛片 | 精品国产91一区二区三区 | 成人国产精品免费 | 成年人高清视频在线观看 | 大胆在线日本aⅴ免费视频 美国黄色毛片女人性生活片 | 久久久久久久免费看 | 国产一区二区三区影视 | 色综合狠狠 | 一级黄色在线观看 | 久久久www成人免费毛片 | 久久老司机精品视频 | 精品久久久久久久久久久久久久久久久久久 | 泰剧19禁啪啪无遮挡 | 国产精品99久久免费观看 | 成人免费看毛片 |