一、手機網(wǎng)站設(shè)計是什么意思

手機網(wǎng)站設(shè)計有稱為移動端網(wǎng)站設(shè)計，是將手機網(wǎng)站策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合設(shè)計師的認(rèn)識通過藝術(shù)的手法表現(xiàn)出來，要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。手機網(wǎng)站設(shè)計要符合手機用戶的瀏覽習(xí)慣、操作特性，使手機網(wǎng)站具有良好的用戶體驗。

二、手機網(wǎng)站設(shè)計的理念

手機網(wǎng)站設(shè)計通常只能滿足主流用戶的常用功能，大體為日常交流與生活所用，所以移動終端的網(wǎng)頁設(shè)計體現(xiàn)精簡原則，頁面設(shè)計要重點突出，滿足客戶需求，提升網(wǎng)頁瀏覽的便捷性和畫面感，更注重用戶體驗設(shè)計。

1、導(dǎo)航必須簡潔有力：手機網(wǎng)站的菜單設(shè)計應(yīng)該盡可能簡潔有力。因為手機用戶在訪問網(wǎng)站時不會有太多的耐心去尋找相關(guān)的分類，所以盡量減少菜單的數(shù)量。

2、刪減不必要的元素：手機端網(wǎng)站功能太多會使頁面負(fù)荷不了，精簡風(fēng)格簡單粗暴的實現(xiàn)手法就是刪減與用戶任務(wù)無關(guān)的非功能性元素，只保留重要的信息，減輕用戶的認(rèn)知負(fù)荷。

3、盡量減少用戶的文字輸入操作：這一點非常得要，因為受手機硬件設(shè)備的限制，在手機上輸入文字依然不是很方便，企業(yè)手機網(wǎng)站設(shè)計時為了能夠給用戶帶來方便，一定要盡可能的文字輸入操作給用戶帶來的麻煩。如用戶名、密碼等操作應(yīng)盡量簡化。

三、手機網(wǎng)站設(shè)計的原則

1、以用戶為中心

在用戶界面設(shè)計中，設(shè)計師要清楚誰才是真正的使用者。要能夠站在用戶的立場和角度來考慮設(shè)計網(wǎng)頁。用戶是你終端產(chǎn)品的體驗者，所以，在做設(shè)計時，要遵循以用戶為中心的原則。用戶不會花太多時間在同一個網(wǎng)頁，只要他找到自己所要的訊息，就會跳轉(zhuǎn)到另一個頁面繼續(xù)尋找下一個信息。網(wǎng)頁設(shè)計師要知道，用戶之間的差別很大，他們的操作習(xí)慣和能力也各有不同。不能滿足所有人的期望，也別試圖去滿足所有人的期望，因為那是不可能的事。要做的只能是讓手機網(wǎng)站使用更加方便易操作，要做到這點，必須了解用戶的需求，目標(biāo)和偏好以及操作習(xí)慣。

2、主題明確（設(shè)定網(wǎng)站氛圍）

手機網(wǎng)站要營造什么氣氛是非常重要的事情，也是設(shè)計公司常常說的「設(shè)計風(fēng)格」，網(wǎng)頁UI設(shè)計要表達出一定的意圖和要求，有明確的主題，并按照視覺心理規(guī)律和形式將主題傳達給用戶，使主題在適當(dāng)?shù)沫h(huán)境里被用戶理解和接受，從而滿足其需求。這就要求網(wǎng)頁UI設(shè)計不僅要單純、簡練、清晰和精準(zhǔn)，還需要在凸顯藝術(shù)性的同時通過視覺沖擊力來體現(xiàn)主題。

3、視覺美觀

視覺美觀是網(wǎng)頁UI設(shè)計最基本的原則。網(wǎng)頁UI設(shè)計中內(nèi)容的主次與輕重、結(jié)構(gòu)的虛實與繁簡、形體的大小以及配色等都是造成視覺美觀的重要因素。還可以結(jié)合動畫等多媒體形式使網(wǎng)頁的視覺沖擊力表現(xiàn)得更有力度，最終呈現(xiàn)給用戶一個視覺美觀、操作方便的網(wǎng)頁界面。

4、 KISS(Keep It Simple And Stupid)原則

簡單易操作，這也是網(wǎng)頁設(shè)計基本也是重要的原則。要讓用戶覺得自己是在控制軟件，而不是感覺被軟件控制。切記網(wǎng)頁的可操作性，用戶的習(xí)慣和能力各不相同，他們不是網(wǎng)頁設(shè)計師，并不懂你們設(shè)計這個網(wǎng)頁的原理和操作方式。并且絕大數(shù)的用戶，對于電腦的使用經(jīng)驗是很初級的，只要稍微復(fù)雜一點的操作就會讓他們感覺很費力，所以網(wǎng)頁設(shè)計師需要注意的是，減少操作，減輕用戶的負(fù)擔(dān)，讓操作更加簡單。

5、一致性原則

一致的結(jié)構(gòu)設(shè)計，可以讓用戶對網(wǎng)站的形象有深刻的記憶；一致的導(dǎo)航設(shè)計，可以讓用戶迅速而又有效的進入到網(wǎng)頁中找到自己所需要的信息；一致的操作設(shè)計，可以讓用戶快速學(xué)會整個網(wǎng)站的各種功能操作。破壞這一原則，會誤導(dǎo)用戶，并且讓網(wǎng)頁顯的雜亂無章，給人留下不好的印象。當(dāng)然，網(wǎng)站設(shè)計的一致性并不意味著一成不變，有的網(wǎng)頁在不同欄目使用不同的風(fēng)格，或者隨著時間的推移不斷的改版網(wǎng)站，會給用戶帶來新鮮的感覺。

6、整體性原則

網(wǎng)站UI設(shè)計的整體性包括內(nèi)容上和形式上兩方面，網(wǎng)頁的內(nèi)容主要是指Logo、文字、圖像和動畫等，形式是指整體版式和不同內(nèi)容的布局方式。在設(shè)計網(wǎng)頁時，強調(diào)頁面各組成部分的共性因素是形成整體性的常用方法。強調(diào)整體性更有利于用戶全面了解，并給人整體統(tǒng)一的美感。

7、網(wǎng)頁布局的合理性原則

保證頁面布局均勻：主要體現(xiàn)在欄目與欄目，色塊與色塊，圖片與文字之間的搭配協(xié)調(diào)問題。重要的信息要醒目：分清主次，重要的信息放置中心的位置。

合理的顏色搭配：顏色對人的視覺和大腦感官沖擊力是極大的，合理利用顏色，實現(xiàn)內(nèi)容與形式的協(xié)調(diào)。一個屏幕的色彩種類要少于7種，重要信息的對象選取醒目的顏色等。

圖文并茂：一個網(wǎng)頁有過多的圖像將會降低這個網(wǎng)頁的信息量，過多的文字則會顯得沉悶無生氣，理想的圖文并茂才能互相襯托，使得網(wǎng)頁變得生動活躍又使得頁面有豐富的內(nèi)容。

8、適配性原則

用戶將使用各種設(shè)備（從智能手機到臺式機）、瀏覽器訪問您的網(wǎng)站。 因此，網(wǎng)站在不同的屏幕尺寸、瀏覽器上正確顯示是非常重要的，務(wù)必在多個瀏覽器上檢查您的網(wǎng)站，以確保一切正常顯示。

9、拇指法則

拇指法則"是資深交互設(shè)計大神Steven Hoober在2013年對1300名手機用戶的調(diào)查研究后提出來一個新名詞。他通過研究發(fā)現(xiàn)，49%的用戶都是單手拿著手機，使用拇指進行操作。甚至某些大屏手機使我們不得不進行雙手持握的時候，多數(shù)人也還是傾向于使用自己的拇指。Josh Clark在另一項研究中也得出了類似的結(jié)論，他指出：75%的手機交互都是由拇指完成的。因此我們也可以說，對觸摸屏手機進行交互設(shè)計，主要針對的就是拇指。

上圖就是手指在手機的活動范圍熱圖，我們通過到拇指距離將其分為Natural區(qū)（容易操作），Stretching區(qū)（拇指需要伸直才能操作）和Hard區(qū)（拇指比較難操作）。這個手指活動熱圖可以在我們產(chǎn)品原型圖設(shè)計時提供很多幫助，比如將一些用戶經(jīng)常用到的功能放到Natural區(qū)或Stretching區(qū)，一些用戶不怎么使用的模塊可以放到Hard區(qū)。

四、手機網(wǎng)站設(shè)計的要點

1、保證網(wǎng)站的導(dǎo)航設(shè)計清晰流暢

在手機網(wǎng)站設(shè)計中，導(dǎo)航也是非常重要的，因為導(dǎo)航就好比指南針方向標(biāo)，指引用戶去想去的地方，用戶通過網(wǎng)站的導(dǎo)航設(shè)計能迅速捕捉到重點和有效信息，這對提高用戶的體驗度十分有利。手機網(wǎng)站的導(dǎo)航設(shè)計一般放在頁面的頭部或者尾部，常用操作類的一般都放底部，符合拇指原則；其次手機屏幕比較小，導(dǎo)航要精簡。

2、網(wǎng)頁圖片的設(shè)計和色彩搭配

網(wǎng)頁設(shè)計的色彩搭配也是很重要的，網(wǎng)頁不要單獨采用一種顏色，一般都是采用一種主色調(diào)外加兩種輔助色調(diào)，網(wǎng)站的頁面看上去要和諧溫馨，簡潔，有些網(wǎng)站經(jīng)常使用各種色彩，使得網(wǎng)站看上去就像五顏六色的畫板一樣，沒有重點沒有特色，這讓用戶看上去感覺很不專業(yè)。高質(zhì)量的企業(yè)品牌網(wǎng)站，一定要用自己的品牌顏色為網(wǎng)站主打色，再用其他適配的輔助色，給訪客留下深刻的品牌印象。

3、整齊有序的排版

想要進行手機網(wǎng)站建設(shè)，首先要設(shè)計好框架布局，像電腦網(wǎng)站的框架能夠左右布局，而手機網(wǎng)站的瀏覽習(xí)慣是從上而下，那么左右布局就不合適用在手機網(wǎng)站里。因而，在設(shè)計手機網(wǎng)站的同時框架版塊需從上而下設(shè)計。因為手機的屏幕尺寸有限，像一些產(chǎn)品展示和新聞欄目不合適出目前同一排，只能作上下分布，一行就1個欄目。這樣的布局設(shè)計才會顯得網(wǎng)站整潔，讓客戶看上去舒服而且欄目分明容易尋找。

4、網(wǎng)站文字編排

網(wǎng)站不是圖就是文，圖片就是一張圖，但文字沒那么簡單，文字需要編排，需要注意的事項：文字字距、行距、字體大小、文字字?jǐn)?shù)、標(biāo)題顏色、靠左靠右靠中、標(biāo)點符號、換行字?jǐn)?shù)、文字段落留白、編排一致性…，光是文字編排得好，就會有好的設(shè)計呈現(xiàn)，文字多的網(wǎng)站更應(yīng)該重視文字編排。

文章的行距太擠，會難以閱讀，最好的行距是字高的50%~100%之間。字體大小的使用也不是越大越好，字號過大有粗糙感，文字大小應(yīng)該要依據(jù)網(wǎng)站特性適時的微調(diào)通用的字體，一般手機屏幕一行閱讀20左右各文字比較常用。

5、瀏覽器的兼容性

目前市場上，各種瀏覽器有很多，每個用戶對瀏覽器都有自己的偏好，所以對手機網(wǎng)站對常用的一些瀏覽器要具有兼容性，比如常用的UC瀏覽器、360瀏覽器、搜狗瀏覽器、Safari 瀏覽器等，網(wǎng)站設(shè)計至少對這些常用瀏覽器兼容。

6、功能簡化

手機端網(wǎng)站功能太多會使頁面負(fù)荷不了，因此PC端網(wǎng)站中的導(dǎo)航功能應(yīng)該簡化，甚至該去掉的就去掉。為了提升更好的用戶體驗，也可以設(shè)計返回頂部按鈕，便于用戶處于頁面底部時第一時間回到頁面頂部，減少不必要的上下滑動。

五、手機網(wǎng)站設(shè)計的規(guī)范

1、PS工具設(shè)計IOS界面

(1)、畫布尺寸

新建750×1334  分辨率72，像素/英寸。

(2)、常見的字體大小

24px、26px、28px、30px、32px、34px，36px等等。記住是偶數(shù)的。最小字號20px。

(3)、常用字體

中文用蘋方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。

(4)、界面里的小圖標(biāo)常見的尺寸

注：ios開發(fā)里單位是pt

750×1334尺寸的換算關(guān)系 1pt=2px，也就是說程序員拿到我們的px單位的標(biāo)注稿，自己除以2就是pt了。

24px、32px，48px等，記住4的倍數(shù)比較好。

注意圖標(biāo)的尺寸要統(tǒng)一尺寸，以眼睛觀察為主調(diào)整尺寸看上去一樣。方形的比圓形的看著要大，需要調(diào)整下。

界面上的間距和元素尺寸：

以偶數(shù)為單位，不清楚的可以截圖量大公司的APP界面作為參考。

750 x 1334 設(shè)計稿尺寸：

狀態(tài)欄高度：40 px

導(dǎo)航欄高度：88 px

標(biāo)簽欄高度：98 px

2、PS工具設(shè)計安卓界面規(guī)范

(1)、畫布尺寸

如果想一稿適配ios，那就新建720×1280  分辨率72，像素/英寸。

如果單獨設(shè)計安卓MD新規(guī)范的，那就新建1080×1920  分辨率72，像素/英寸。

(2)、720×1280常見的字體大小

24px、26px、28px、30px、32px、34px，36px等等。記住是偶數(shù)的。最小字號20px。

(3)、常用字體

中文用Noto/思源黑體（是一個字體，叫法不同而已），英文用Roboto。

(4)、界面上的間距和元素尺寸

最新規(guī)范MD的做法：

8dp原則：柵格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。

常見一般常用做法：

直接把ios的設(shè)計稿照搬過來，只不過狀態(tài)欄，導(dǎo)航欄，標(biāo)簽欄按照安卓的來。

720 x 1280 設(shè)計稿尺寸：

狀態(tài)欄高度：50px

導(dǎo)航欄高度：96px

標(biāo)簽欄高度：96px

六、手機網(wǎng)站設(shè)計的流程

1、產(chǎn)品需求分析

當(dāng)一個UI設(shè)計師拿到項目或者需求之后，正常情況是交互設(shè)計師細(xì)化過后的交互文檔，里面包含交互原型。而作為UI設(shè)計師所要做的就是理解并吃透文檔，包括里面交互邏輯，具體的操作方式，流程，反饋等，需要不斷核對和確認(rèn)。

2、深層次的用戶體驗研究與分析

對已定義的目標(biāo)用戶群體及特征進行深層次的剖析，包括目標(biāo)用戶群體的年齡，性別及目標(biāo)戶群體的一些情感習(xí)慣，心理特征等，這樣就可以有針對的對這個產(chǎn)品構(gòu)想設(shè)計出一個大概的色系搭配及元素控件設(shè)計。

3、初稿設(shè)計

結(jié)合產(chǎn)品設(shè)計原型和自己對產(chǎn)品的體驗研究分析結(jié)合起來設(shè)計初稿。（大概的色系搭配，框架布局，元素控件，圖標(biāo)ICON等設(shè)計都可以在這一步呈現(xiàn)出來）

4、視覺規(guī)范設(shè)計及細(xì)節(jié)優(yōu)化設(shè)計

初稿設(shè)計完成后，就是要做好視覺規(guī)范設(shè)計及細(xì)節(jié)優(yōu)化設(shè)計。視覺規(guī)范設(shè)計就是要對整個產(chǎn)品的顏色，字體，字號，元素控件，圖標(biāo)ICON，間距及交互效果做個統(tǒng)一的規(guī)范，這樣才可以做出一個成熟的產(chǎn)品，對前端制作也是有很大的好處的。

5、前端對接

確認(rèn)完設(shè)計稿后，進入UI設(shè)計師與前端工程師對接的階段，UI設(shè)計師需要提供切圖，標(biāo)注，設(shè)計說明文檔以及設(shè)計圖給到前端工程師。這個階段需要保持跟開發(fā)頻繁地溝通，確?？梢院芎玫剡€原設(shè)計稿（實際工作中很難苛求百分百還原），特別是需要設(shè)計師自身要懂得一點前端代碼知識，可以更好地進行溝通。

6、測試與反饋

產(chǎn)品進入到測試階段，需要測試人員介入，一般這個時候是先部門內(nèi)部進行可用性測試，然后擴大到整個公司，反復(fù)測試幾輪之后確保沒有很大的問題之后才可以發(fā)包給客戶測試或者上線，而UI設(shè)計師這個時候就要收集反饋，收集意見，與產(chǎn)品一起討論改進方案。

七、手機網(wǎng)站設(shè)計的注意事項

1、按鈕狀態(tài)：一般按鈕會有四態(tài)，不可點擊效果、可點擊效果、聚焦?fàn)顟B(tài)、按下狀態(tài)。如果你的按鈕此時處于不可用狀態(tài)，那么一定要灰掉，或者拿掉按鈕，否則會給用戶誤導(dǎo)。

2、菜單層次太深：菜單項以4~6個為宜，如果有二級菜單，就要注意合理的菜單分類，不能有太多層級的菜單，否則很難預(yù)期，也很難找到，尋找和返回都會變得很麻煩。

3、文字過于沉余：手機界面很小，寸土寸金，一頁只能顯示下6~10個列表，一行只能顯示下16~24個字，標(biāo)題欄的字?jǐn)?shù)以5個以內(nèi)為宜，標(biāo)簽欄也以2~4個為宜，那么這時候出現(xiàn)文字過長的情況，一定要定義一下處理方式，如果是選擇型的，一般是截斷或者打點縮略；如果是內(nèi)容閱讀型的，可以折行。但最合理的方式還是精簡文字內(nèi)容，縮短文字長度。

4、交互流程分支太多：做交互的時候一定要有一個任務(wù)流程的概念貫穿始終，用戶是為了完成某個任務(wù)而使用軟件的，交互設(shè)計師除了關(guān)注界面元素、跳轉(zhuǎn)邏輯和交互反饋之外，還要關(guān)注用戶任務(wù)，分得清主要任務(wù)和次要人物，給主要任務(wù)一個暢通無阻的清晰流程，不要給予太多可能的分支，干擾主要流程。

5、相關(guān)的選項離的很遠：UI設(shè)計中相關(guān)選項一定要具有操作上的延續(xù)性，雖然手機屏幕看起來比電腦屏幕要小的多，但是手機在屏幕上移動的代價，卻要比鼠標(biāo)在電腦上移動的代價大的多，如果手機上相關(guān)選選離得很遠的話，用戶一是容易迷失，找不到下一步操作，二是需要移動手指，到屏幕另一端觸發(fā)操作。

6、點擊范圍過?。?/strong>我們都知道移動端有個神奇的數(shù)字"44"，根據(jù)食指最小點觸距離7mm、拇指最小點觸距離9mm，可以推導(dǎo)出做設(shè)計的時候，最小的點觸距離是44*32 px。你可以設(shè)計一個精美的小圖標(biāo)，但是在定義它的點觸大小的時候，卻可以做放大處理，但你千萬不要設(shè)計一個傻大的圖標(biāo)，點觸范圍卻比圖標(biāo)要小，這樣會給用戶帶來明顯的誤操作挫敗感。