如(ru)何做好手機(ji)端(duan)的適配問題，需要做哪些準(zhun)備工作?

1、手機網站建設(she)(she)導(dao)航設(she)(she)計

手機(ji)導航是對用戶的(de)引導，既(ji)要(yao)顯眼(yan)容易(yi)點擊(ji)，又不能擋(dang)住主要(yao)內(nei)容展(zhan)示。試想一(yi)下，如(ru)果我們把二三十個(ge)欄(lan)(lan)目(mu)全(quan)部平(ping)鋪到手機(ji)上(shang)，欄(lan)(lan)目(mu)就占了(le)一(yi)大屏(ping)(ping)，要(yao)想看主要(yao)內(nei)容，還得往(wang)下滑動。比較(jiao)流行的(de)做法是采用面(mian)包屑(xie)導航展(zhan)開收縮的(de)方(fang)式，用戶點擊(ji)的(de)時候才全(quan)屏(ping)(ping)展(zhan)開詳(xiang)細(xi)的(de)欄(lan)(lan)目(mu)結構，這樣就節省了(le)很多空間，也方(fang)便用戶快速找到想要(yao)的(de)內(nei)容信息(xi)，比如(ru)我們新為客戶制作(zuo)電腦手機(ji)一(yi)體化(hua)網站。

2、優化頁面結構

手(shou)機瀏覽網站，點擊跳轉新頁面(mian)的(de)(de)時候，一般(ban)都是直接覆蓋掉原來(lai)的(de)(de)頁面(mian)，而不會(hui)像電腦瀏覽器一樣有多(duo)個(ge)窗口，所以(yi)在設計(ji)頁面(mian)目錄的(de)(de)時候，應盡量減少手(shou)機端的(de)(de)頁面(mian)層級，方(fang)便用(yong)戶返回原來(lai)的(de)(de)頁面(mian)，切換自如。

一(yi)個(ge)標準的手(shou)機網(wang)站頁(ye)面(mian)層(ceng)級一(yi)般(ban)不超過3層(ceng)，我們可以這樣設(she)置(zhi)層(ceng)級關系，如(ru)首頁(ye) -> 列表頁(ye) -> 列表詳情(qing)頁(ye)，這樣的目錄簡潔清(qing)晰，提升用(yong)戶瀏覽體驗。

把公司的介紹(shao)、資質等信息歸類在(zai)一個頁面(mian)展示，而不是拆成多個頁面(mian)，以減少不必(bi)要(yao)的跳轉等待。

3、優化排版布局

手(shou)機網站(zhan)設計在布(bu)局(ju)方(fang)(fang)面，根(gen)據自身產品特性，可以(yi)采(cai)用一排(pai)兩個或(huo)者三個的(de)(de)放，對(dui)瀏覽者來看是比較方(fang)(fang)便的(de)(de)，一排(pai)放的(de)(de)太多(duo)太擠(ji)，太少又太空洞(dong)，都不(bu)是好的(de)(de)布(bu)局(ju)方(fang)(fang)案。新聞可以(yi)采(cai)用左圖右文的(de)(de)結構排(pai)列，圖片占屏幕的(de)(de)三分之一，凸顯標題文字內容。

如果你還不(bu)是(shi)很熟悉手(shou)機(ji)(ji)端(duan)設計這塊，在(zai)(zai)布局(ju)上盡量(liang)避(bi)免采用不(bu)規則的(de)布局(ju)，雖然在(zai)(zai)電(dian)腦端(duan)上看(kan)起來比(bi)較新穎(ying)有(you)個性，但是(shi)手(shou)機(ji)(ji)端(duan)屏(ping)幕小，看(kan)起來就(jiu)會(hui)比(bi)較奇怪(guai)。

4、靈活的交互設計

手機網站(zhan)很(hen)注(zhu)重頁面之間的(de)交互設計，合理的(de)設置按鈕銜接(jie)跳轉，保持這種交互能夠增加用(yong)戶的(de)停留(liu)。

5、優化手機站加載速度

我們(men)用(yong)手機(ji)信號訪(fang)問可能沒(mei)有電腦(nao)寬帶的(de)速(su)度那么快(kuai)，對(dui)手機(ji)網站的(de)內容，我們(men)有必要再壓縮優化一下，進(jin)而(er)提高訪(fang)問速(su)度。

手機端的圖(tu)片，再壓縮一下(xia)大(da)小，不能(neng)直接搬用電腦站的圖(tu)片，每張圖(tu)片盡量控制在100KB以內。

頁面動效(xiao)在PC網站上顯(xian)得有活力，但手(shou)機端(duan)應避免(mian)使用，因為它會影(ying)響頁面的(de)加載，大(da)量的(de)動畫會使得整個頁面變得卡頓(dun)，尤(you)其(qi)在配(pei)置沒有那么高的(de)手(shou)機上瀏(liu)覽，這(zhe)種卡頓(dun)會更加明(ming)顯(xian)。

6、做(zuo)好PC端(duan)和(he)移動端(duan)之間的切換

對于(yu)(yu)很(hen)多用戶(hu)(hu)來(lai)說，習慣于(yu)(yu)PC端之間(jian)的瀏覽和(he)用戶(hu)(hu)，因此我們(men)在設置和(he)優化(hua)移動端頁面就需要(yao)注重移動端和(he)PC端切換保持正常的進行，讓用戶(hu)(hu)在PC端和(he)移動端暢通無阻的瀏覽。