導航:首頁 > 萬維百科 > 手機網頁設計字體標准

手機網頁設計字體標准

發布時間:2020-08-30 11:45:52

1、手機頁面一般採用什麼字體

手機頁面一般不用指定,因為不論安卓還是蘋果攜帶的中文字體都比較單一,無非只有Droid Sans Fallback(較老安卓機型)、思源黑體(安卓5.0起)、華文黑體(較老iOS機型)、蘋方(iOS 9起)。
除非你要用web-font,這時候就看網頁設計師需要或者個人喜好了。但原則上還是應當使用正文字體,宋體、黑體、圓體等。

2、網頁設計中一般用什麼字體?

用默認的比較多,微軟雅黑也不錯

3、在用ps設計手機網站界面的時候,應使用多少號的字體適合?

現在非主流的字體都沒有字體庫可供下載,只有自己做。

方法是:選擇一種相近似的字體,輸入文字。在「圖層」里,選擇「柵格化-文字」,然後就可以任意改變筆畫的形狀,成為獨具一格的字體了。不過要有一點美術字的基礎,事先要有一個構想,才能做出滿意的字體來。這樣做出來的字體,只能保持為圖像格式(最好做成PSD格式方便以後調用)而不能保存為字體的TT格式。以後要調用,也只能以調用圖像的方法來調用。

4、手機網頁設計排版需要注意的幾個事項

我們對手機網站製作中需要注意哪些方面的問題展開分析,為各位手機網站製作的用戶們提供一些參考,現總結幾點如下:

1、明確自己想在手機網站上展示哪些信息:

在手機網站製作之前應該明確自己想在手機網站上展示什麼,分析一下可能的瀏覽者會有哪些,然後有針對性地策劃和設計網站上的相關內容,這樣才能做到有的放矢,不至於手機網站製作好了卻沒人瀏覽,或者瀏覽了不感興趣。如果能做到有針對性的進行手機網站製作,通常手機網站在推廣之後都會為企業帶來一定量的潛在用戶。

2、在手機網站製作時要盡量符合滑動屏幕的方式:

一般的手機屏幕,畫面都不如桌上電腦那麼大,尤其是閱讀文字時更需要加以放大。即使智能手機具有網頁放大縮小功能,但是觀看起來也較為麻煩,因為網頁放大後,很可能還要左右滑動才能瀏覽網頁,瀏覽後還要縮小回原大小。因此在設計手機網頁時,應能夠以滑動屏幕的方式來閱讀網頁,因為滑動網頁操作比著放大網頁觀看來要簡單得多。

3、不能參照PC端網站來設計手機網站上的導航功能:

手機網頁與跟一般的PC端網頁不同,由於受到手機屏幕大小和屏幕操作的限制,在設計導航功能時應該按照手機屏幕來設計,不能完全照搬PC端網站,該簡單的地方簡單化,該去掉的去掉,同時在當閱讀文章到最後時,要方便於用戶回到最前頭,減少卷動畫面的機會,讓網頁變得更容易於移動設備上閱讀。

4、手機網站製作也要考慮多種瀏覽器的兼容:

現在的移動瀏覽器能夠處理大多數網站,一般的瀏覽器都能夠正常瀏覽網頁。但由於手機上的瀏覽器也有多種,比如UC瀏覽器、360瀏覽器、搜狗瀏覽器、其他瀏覽器,如此多的瀏覽器在瀏覽網頁的時候,如果手機網站的兼容性差,就很可能會出現在某些瀏覽器上出現網頁變形、內容顯示不全的情況。因此,手機網站製作必須考慮到兼容於多種瀏覽器。

5、在手機網站製作時一定要減少用戶文字輸入操作:

現在智能手機一般都沒有實體的鍵盤,或僅只有12鍵的電話輸入功能,因此在輸入文字上會比起使用電腦鍵盤麻煩得多。因此,減少使用者輸入文字的機會,例如用戶名、密碼等,都是手機網站製作時要盡力避免的。

6、在手機網站製作時就應該考慮到日後的推廣和宣傳:

在手機網站製作時,不要忽略了用戶體驗,否則在日後的網站推廣時將會遇到麻煩。任何一個手機網站,都必須經過廣策劃、設計和推廣的過程,在手機網站製作時需要考慮日後的推廣,手機網站應該在豐富站內內容的同時,提供詳盡的產品信息以及聯系方式,並收集有關產品的用戶滿意度和顧客需求方面的反饋信息。這樣的手機網站上線後,其推廣工作也會非常有效果。

7、手機網站製作要兼顧非觸摸屏幕的設計:

雖然大多數手機都是智能手機,但也有為數不少的傳統手機,不具備觸摸的功能,使用的是傳統的控制方向鍵做為滑動的工具,這時候,手機網頁的製作應兼顧到非觸摸屏的手機瀏覽。比如減少畫面中超鏈接的數量、加大文字以減少誤點。

8、在手機網站製作時要記得要簡化網頁內容:

一般的手機、平板電腦等移動設備,由於屏幕大小的限制,不易容納下個人電腦的大容量的網頁資訊,因此手機網站製作的首要一點就是減少網頁內容,最好不用圖片或是影音視頻等,文字也應該精簡,但要保持網頁內容的可讀性。只需要將最重要的資訊放入移動版網頁,不太重要的內容內容,可以略去,或者通過超鏈接鏈接到新網頁上。

9、手機網站製作要注重網頁產品和服務的展示:

企業在手機網站上,需要表現的重點仍然是產品和服務的展示。移動用戶訪問企業手機網站往往是有備而來,想了解某個產品或者服務的詳細價格、服務內容和功能。所以企業在手機網站上的產品和服務展示,可選擇企業的主要產品,對其各類參數或價格加以詳細說明,對於企業的新產品,也可以適當的加以介紹,必要時可以採用圖文並茂的方式,但圖片的體積應盡量小。

以上是在手機網站製作中需要注意的幾個方面,手機網站頁面設計需要符合用戶體驗,以方便用戶操作為准則,能夠為用戶帶來切實的幫助,這是手機網站製作上的基本要求,也是滿足用戶需求的基本原則。

5、手機 ui設計 字體一般多少像素?有沒有扁平化設計的網站?

iOS界面20-40px;使用雙數。安卓根據尺寸解析度不一樣,大小也不一樣一半12px—36px;

6、手機前端頁面尺寸

iPhone4/iPhone4s
320
*
372
/
320
*
441
(已隱藏URL與狀態欄)
iPhone5/iPhone5s
320
*
460
/
320
*
529
(已隱藏URL與狀態欄)
Note2
360
*
567
(未隱藏URL與狀態欄)
iPad
3/4
768*928
(未隱藏URL與狀態欄)
GALAXY
SIII
360
*
567
(未隱藏URL與狀態欄)
小米2A
360
*567
(未隱藏URL與狀態欄)
HTC
G10
320
*
460
<meta
name="viewport"
網頁手機wap2.0網頁的head里加入下面這條元標簽,在iPhone的瀏覽器中頁面將以原始大小顯示,並不允許縮放。
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
width
-
viewport的寬度
height
-
viewport的高度
initial-scale
-
初始的縮放比例
minimum-scale
-
允許用戶縮放到的最小比例
maximum-scale
-
允許用戶縮放到的最大比例
user-scalable
-
用戶是否可以手動縮放
參考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
一、網頁手機wap2.0網頁的head里加入下面這條元標簽,在iPhone的瀏覽器中頁面將以原始大小顯示,並不允許縮放。
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
其中:
width
-
viewport的寬度
height
-
viewport的高度
initial-scale
-
初始的縮放比例
minimum-scale
-
允許用戶縮放到的最小比例
maximum-scale
-
允許用戶縮放到的最大比例
user-scalable
-
用戶是否可以手動縮放c
二、關於meta的詳細介紹請參考
三、下文是關於Meta的例子的詳細介紹
原文地址
3.
Meta元素可視區
默認情況下,iPhone上的Safari會象在大屏幕的
桌面瀏覽器那樣顯示你的頁面,寬度達到了980像素,然後縮小內容以適應iPhone的小屏幕,因此用戶在iPhone看這個頁面時感覺字體就比較小了,
也比較模糊,必須要放大才能看得真切,對於一個普通的Web頁面似乎可以接受,但對於一個常用的應用程序就沒幾個人能夠受得了。
幸運的是可以使用特殊的Meta元素可視區進行糾正:
<meta
name="viewport"
content="width=device-width"/>
這個元素通知瀏覽器使用設備的寬度作為可視區的寬度,而不是默認的980像素了,我們可以看看兩個不同的例子。
 例3(鏈接:http://www.sitepoint.com/examples/iphone-development-12tips/no-
viewport.html)顯示了一個簡單的段落元素,沒有Meta元素可視區,字體有點模糊。在iPhone中運行的實際情況如下圖所示。

1
無可視區的顯示效果
 例4(鏈接:http://www.sitepoint.com/examples/iphone-development-12tips
/viewport.html)包括了一個可視區元素,現在設備寬度只有320像素,字體也比前一個例子更清晰了。在iPhone中運行的實際情況如下圖
所示。

2
有可視區的顯示效果
 另外,你還可以手動設置device-width的值,例如,假設你的博客頁面的寬度是750像素,那麼桌面屏幕最佳大小就是800x600像素,例
5(鏈接:http://www.sitepoint.com/examples/iphone-development-12tips
/fixed750.html)顯示了一個刪減版本,如果你在iPhone中瀏覽它,你會看到980像素剩下的空間都填充了白色。
為了消除額外的空間,可以使用meta元素可視區將寬度設為780像素:
<meta
name="viewport"
content="width=780"/>
例6(鏈接:http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區布局被固定後的效果。
Meta元素可視區的內容可以包括多個逗號分隔的值,如initial-scale

用戶最初看到頁面時的放大級別,對於Web應用程序,一個常見的設置是:
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"/>
這個元素設置寬度為設備的最大寬度,禁止用戶放大和縮小

7、製作手機版網頁解析度設多大?一般字的大小是多大的

手機版的解析度也是72,一般字體在12像素左右

與手機網頁設計字體標准相關的知識