移動端的設計網頁文字規范

1、UI設計網頁設計字體規范應該要注意什麼

可以參考常規字體的使用規范：

1、在每個項目設計中只使用1-2個字體樣式，而在品牌字有明確的規范的情況下，只需要一種字體貫穿全文，通過對字體放大來強調重點文案。字體用的太多，越顯得不夠專業。

2、不同的樣式的字體，形狀或系列最好相同，保證字體風格的一致性。

3、字體與背景的層次要分明,確保字體樣式與色調氣氛相匹配，等。

(1)移動端的設計網頁文字規范擴展資料：

網頁設計

1、需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。

2、以業務目標為中心進行功能策劃，製作出欄目結構關系圖。

3、以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。

4、以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。

5、根據用戶反饋，進行頁面設計調整，以達到最優效果。

2、網頁設計 自適應到移動端字體問題

首先你要明白，PC端和移動端的效果是不一樣的。PC端是大屏幕（譬如1280*960），移動端是小屏幕（譬如320×480），兩者的尺寸是存在差異的。所以比較直白的解釋就是PC端效果圖是大圖，移動端效果圖是小圖。如果是單純的網頁photoshop設計，視覺美觀就按照48px，因為兩者的圖其實是不一樣的。程序員在編輯代碼時，可能會採用em或者rem相對大小來設計，而不是採用px。

3、移動端頁面提示性一段文字，怎麼排版

text-overflow:ellipsis屬性來實現單行文本的溢出顯示省略號(…)
在WebKit瀏覽器或移動端，用-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數
兩者結合就能得到你要的效果。

例子：
<p style="
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
">響應式Web設計(Responsive Web design)的理念是頁面的設計與開發應當根據設備環境（屏幕尺寸、屏幕定向、系統等）以及用戶行為（改變窗口大小等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局
</p>

4、在移動端的文字設計中，標題文字較為適合是多少

一般是按比例自適應，不會固定字型大小，不然不同尺寸的屏幕打開是會嚴重變形的

5、移動端的h5頁面的尺寸是多少

H5的尺寸一般設計為640x1136px

既滿足了顯示需求，又能降低用戶載入圖片需要的帶寬。

可以用各種解析度的移動智能手機查看我們設計的H5頁面時，當然，也會出現如下的情況，內容顯示不全，甚至一些重要內容和按鈕都會被遮擋。

第一：背景圖片必須採用background-size:cover;來實現。

第二：我們在進行H5頁面內容規劃布局設計的時候，不能把重要內容放在太偏下的位置或者偏上，否則前端布局時可能出現內容顯示不全的情況。

(5)移動端的設計網頁文字規范擴展資料：

標准通用標記語言下的一個應用HTML標准自1999年12月發布的HTML4.01後，後繼的HTML5和其它標准被束之高閣。

為了推動Web標准化運動的發展，一些公司聯合起來，成立了一個叫做 Web Hypertext Application Technology Working Group （Web超文本應用技術工作組 -WHATWG） 的組織。

WHATWG 致力於 Web 表單和應用程序，而W3C（World Wide Web Consortium，萬維網聯盟） 專注於XHTML2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。

參考資料：網路－HTML5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7、HTML5移動網頁的設計稿尺寸應該是多少

HTML5的移動端網頁設計稿，通常情況下，內容區為750px或960px或者1080px的，一般不小於750px像素大小（寬度）
設計稿可以比750px大，但是絕對不能比750px小，這個主要是由於當前手機的解析度相對較高（iPhone 6是375物理像素，但實際像素為其兩倍，也就是750，這個750就是這么來的）
如果設計圖稿過小，前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清，所以這也是為何要「大」解析度
此外需要注意的是，要保證頁面的基準字體大小，在320px的設計稿當中，最小字體不宜小於12像素，其他像素的設計稿當中，等比例換算即可（12/320px*設計稿像素值）

8、誰有移動端網頁開發規范？

下面是我從網上收集整理的wap2.0手機網站開發需要注意的7個問題：
手機網頁編碼需要遵循什麼規范？
遵循XHTML Mobile Profile規范（WAP-277-XHTMLMP-20011029-a.pdf），簡稱為XHTML MP，也就是通常說的WAP2.0規范。 XHTMLMP是為不支持XHTML的全部特性且資源有限的客戶端所設計的。它以XHTML Basic為基礎，加入了一些來自XHTML 1.0的元素和屬性。這些內容包括一些其他元素和對內部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴格的XHTML 1.0子集。
網頁文檔推薦使用擴展名？
推薦命名為xhtml，按WAP2.0的規范標准寫成html/htm等也是可以的。但少數手機對html支持的不好。
為什麼現今大多數的網站一行字數上限為14個中文字元？
由於手持設備的特殊性，其頁面中實際文字大小未必是我們在CSS中設定的文字大小，尤其是在第三方瀏覽器中。例如Nokia5310，其內置瀏覽器 頁面內文字大小與CSS設定相符，但是第三方瀏覽器OperaMini與UCWEB頁面內文字大小卻大於CSS設定。經測試，其文本大概在16px左右。 假如屏幕解析度寬度為240px，去除外邊距，那麼其一行顯示14個字以內，是比較保險（避免文本換行）的做法。
使用WCSS還是CSS?
WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適於移動互聯網特性的屬性，並加入一些具有WAP特性的擴展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，這些特殊的屬性擴展並不是很實用，所以在實際的項目開發當中，不推薦使用WCSS特有的屬性。
避免空值屬性
如果屬性值為空，在web頁面中是完全沒有問題的，但是在大部分手機網頁上會報錯。
網頁大小限制
建議低版本頁面不超過15k，高版本頁面不超過60k。
用手機模擬器和第三方手機瀏覽器的在線模擬器來測試頁面是不是靠譜？
有條件的話，我們當然建議在手機實體上進行測試，因為目標客戶群的手機設備總是在不斷變化的，這些手機模擬器通常不能完全正確的模擬頁面在手機上的顯示情況，比如圖片色彩，頁面大小限制等就很難再模擬器上測試出來。當然，一些第三方手機瀏覽器的在線模擬器還是可以進行測試的，第三方瀏覽器相對來說受手機設備的影響較小。

9、手機版網頁設計規范

手機版網頁設計和PC端網頁設計大同小異，只要注意手機端的整體排布盡量採用豎排，橫排太多會壓縮文字和圖片空間，影響呈現效果，手機頁面的尺寸一般寬度設置為640像素，高度不限，其他就沒什麼了！~