手機站設計與電腦版網站設計有很大不同，手機站設計除了小且可以觸摸外，很多設計原則與電腦網頁設計是共通的。所以網絡公司在進行手機網站建設的時候，一定要站在用戶的角度思考，手機網站建設需要遵循以下原則：

1、導覽功能大不同

手機網頁與跟一般的網頁不同的，在於當閱讀文章到最后時，要回到最前頭是麻煩的，因此設計網頁的企業，除了減少卷動畫面的機會外，也會加強導覽的功能，讓網頁變得更容易於行動裝置上閱讀。導覽設計的重點有：

*只在首頁的部份加入搜尋的功能

*建立導覽功能鍵，其中以「回到首頁」、「回到上一頁」這兩個最為重要

*最后，「回到上一頁」的按鍵除了首頁以外，其他的頁面都需要放置

2、手機站設重在內容的排版及簡化

一般的手機、平板電腦等行動裝置，不易容納下適合於個人電腦的龐大網頁資訊，因此手機行動網頁的首要重點，就是減少內容，不論是圖片、文字或是影音。

請記住一個重點：只要將最重要的資訊放入行動版網頁，就是最主要的準則，重要性較低的、讀取需要時間的內容，則可以透過超連結，連回到正常的官方網站。

行動網站必須十分的重視內容簡化這一點，一個塞滿內容的行動網站無法獲得網路客戶的青睞。

簡單地對內容進行刪除操作并不會令頁面更簡潔，而且這些被刪除的內容說不定正是用戶所需要的，因此對內容的排版設置多花點兒時間是很有必要的。

不要簡單地刪除你認為“不重要”的內容，應該重新調整這些內容的布局。為了易于用戶閱讀，要盡量避免使用大量的文字，將這些文本重新調整為小圖標或小條目是不錯的做法。此外，用引語、線條或其他設計元素隔開大段的文字，使這些板塊顯得更美觀。

北京凡度網絡科技有限公司認為使用視覺元素來完善文本元素：

標題同時使用文字和圖標。

使用圖形元素日期代替文字日期。

使用小信息圖標來加強解釋的部分。

除了字體的大小變化，使用不同的文章/標題顏色。

使用不同的淺背景色來區別不同的內容。

使用高亮來強調重要部分。

使用padding和negative space來突出文本或區分文本。

使用不同的“視圖”，將內容分解成較小的部分。

從用戶角度來說，他們希望閱讀所有的內容，所以我們進行內容呈現，只是用隔斷、重組或其他視覺方案來讓這些內容更容易訪問。

3、利用手機的天生優勢

手機有著許多傳統電腦所沒有擁有的優勢，其中最大的優勢就是「行動力」，因此手機版網頁應該要特別發揚這些特色，讓行動網頁具有一般網頁更多的優勢。舉例來說：

*行動定位：大部分的智慧裝置都有GPS或是定位的機制，可以讓客戶主動找到您的位置

*行動聯系：如果客戶使用的是行動電話，可以立即發話；如果是平板電腦，亦可以使用簡訊或是e-Mail的方式傳遞訊息給客戶

*鄰近地點：如果您的事業有很多據點，請告訴您的客戶，在他附近有哪一些地點是便於他能夠抵達的

近年已經成為行動條碼的QR Code設計，也應該納入行動網頁的設計元素在內。

4、手機站設計要有意義的導航

在移動設備上獲取信息實際上是有趣的體驗，因此，令用戶在使用過程中感到愉快很有必要，簡單地刪除屏幕上的鏈接（或taps）并不能達到用戶友好體驗的目的。導航應該包含用戶需要的內容，并提供明確的路徑。如果用戶知道跳轉的具體頁面，就會進行點擊。

首先，確保導航在用戶看來是“可點擊”的，比如按鈕、列表、箭頭等等，這些小圖標可以在一定程度上幫助用戶明白下一步的操作。在沒有鼠標懸停效果和tags的幫助下，要盡可能多地對用戶進行引導。

標簽是很重要的，用好它可以更好地引導用戶。標簽應保持簡單且有意義，例如有一個鏈接需要好幾個taps，你不用把返回鍵命名為前一頁的標題，只需用“back”代替就行了。此外，避免使用作用不清的按鈕或標簽，這些都是丟失用戶的潛在陷阱。但是簡潔并不意味著簡單，因此與其把“My Profile”或“Passwords” 隱藏在“設置”里，不如為它們增加額外的一兩個導航按鈕。

圖標是一個簡單卻強大的溝通途徑，不僅僅是因為手機閱讀文字比較困難且耗時，還因為使用圖標可以達到更好的視覺平衡。在手機網頁中恰當地使用圖標，可以提高用戶的整體體驗。另外，與標簽相結合的圖標對用戶來說意味著更明確的導航路徑。

5、 一欄卷動的最佳策略

大部分的行動裝置，畫面都不如桌上電腦那麼大，尤其是閱讀文字時更需要加以放大。即使智慧手機都具有網頁放大縮小功能，但是觀看起來較為麻煩。

因此設計行動網頁時，建議是能夠以滑動螢幕的方式閱讀網站，因為滑動網頁比起放大網頁觀看來得簡單多了。

6、手機站設計要有信息反饋

信息反饋是設計中很關鍵的一個部分，特別是手機網頁，用戶反饋顯得尤為重要。

移動設備不存在鼠標懸停和動畫，而且大多數設備都是在被觸摸時才有所顯示，所以及時提供清晰的操作反饋信息是非常重要的。在現實生活中，當我使用ATM機時，操作反饋信息包含聽覺（按鍵聲）、觸覺（按鈕的金屬冰涼感）等方面，

但在移動設備上，我們只有一個選擇——視覺反饋。

使用視覺反饋機制來與用戶交流：

用色彩來突出已選擇的區域。

當用戶切換時使用淡入淡出動畫。

使用邊框顏色和漸變來表示按鈕觸摸狀態。

使用不同的按鈕或文本顏色來顯示狀態的變化。

當選擇下拉菜單時，使用正在轉向/已經轉向箭頭。

7、手機站設計要留白

雖然屏幕的尺寸變小了，空白卻依然不可少，因為留白是所有優秀設計的關鍵。在手機網頁設計中，由于空間限制，為了讓設計更加有效、可用、可讀，所有元素（按鈕、導航、圖標、文本等）需要有序正確地排列。

這并不是要你刪減內容以達到留白的目的，也不是指用大字體以便用戶閱讀。手機網頁設計需要比電腦網頁設計更多的UI規劃，而留白的規劃更是起著重要的作用。

留白，以創造更好的用戶體驗：

用較小的字體，這樣文本周圍有空白部分，不會像用大字體那樣顯得臃腫。

在所有的方塊元素周圍使用大量的padding來構建文本塊或圖標。

元素和元素之間用大量清晰的白色網格進行區分。

圍繞整個視圖使用大量的padding把所有元素包圍起來，以免元素溢出到無法操作的區域。

8、手機站設計要清晰的品牌

每個公司或應用都有不同風格的品牌元素，塑造品牌的關鍵是設計元素比如logo、字體和顏色等等要能代表該品牌。對于手機網頁設計來說，這一點至關重要。Logo的位置可能與電腦版本有所不同，甚至可能只在Web應用的主視圖呈現，所以配色方案很重要。

另一個要注意的點是，手機網頁的頂部沒有標題欄或地址欄，相應地，也就沒有網站標題和圖標。所以你的設計應該讓用戶知道，他們現在所瀏覽的網站名稱，這對塑造品牌也很重要。

9、保證手機網站的打開速度。現在企業間的競爭激烈，同行的手機網站非常多，如果自己網站打開的速度太慢，很多用戶沒有耐心等待，就會流失掉許多客戶。

10、手機網站圖片要適配設置。

從手機上瀏覽網站必然沒有那么方便，操作也不如PC端靈活自如，前面也說到了使用網站設計技術可以解決網站適應屏幕的問題，網站圖片也不例外，但為了用戶能將頁面使用圖片的地方看得更加清晰，可采用整站縮放的模式，而不是用戶點擊單張圖片的縮放模式，小凡小編認為在這方面做得比較好的手機網站有站長工具，值得借鑒。當然，手機網站能少用圖片是最好的。

用戶在移動客戶端都喜歡進行留言，分享功能。特別是看到一篇很棒的帖子都會選擇分享到朋友圈或者空間中，讓朋友也參與里面。例如現在比較流行的做就是做微信公眾號大咖們，往往一篇帖子都會造成幾千人的持續瀏覽、點贊或者分享內容，粉絲喜歡中這種參與行為，因為這種圈子拉動粉絲在持續發酵中，用戶慢慢都會舍不得離開。