rem單位確實好處蠻多的,它是相對于根節(jié)點,讓我們整個網(wǎng)站單位可以統(tǒng)一。還可以讓我們的字體更好的自適應(yīng)網(wǎng)站的大小。但是,你用過了就知道,它會出現(xiàn)一個問題:
用Chrome瀏覽器打開你做的網(wǎng)站的時候,有時候會出現(xiàn)字體很大的情況。但是刷新一下頁面就好了。
之所以會出現(xiàn)這種情況,原因是因為我們?yōu)榱擞嬎惴奖悖瑢⒃灸J(rèn)1rem=16px修改1rem=10px。因此,我們在html中通常做了如下設(shè)置:
html {font-size: 62.5%; /**10 ÷ 16 * 100% = 62.5% 1rem = 10px **/}
但是呢,Chrome瀏覽器有時候會忽略了html的設(shè)置。于是在初始化頁面的時候,出現(xiàn)了上面字體過大的情況,本來1.6rem應(yīng)該渲染成16px的字體,卻被渲染成了16*1.6=25.6px大小了。
第一:移動網(wǎng)站頁面設(shè)計 因為移動端不同于PC端,我們在設(shè)計之前就必須要考慮到其分辨率的問題,由于移動端的特點屏幕小卻對內(nèi)容要求要精簡全。
所以移動網(wǎng)站建站對于頁面要求很高,在移動網(wǎng)站頁面設(shè)計之前就需要合理安排網(wǎng)站內(nèi)容和結(jié)構(gòu)。同時也要做好網(wǎng)站頁面布局和視覺體驗,因為只有良好的用戶體驗,才能讓網(wǎng)站在移動端獲得好的排名。
第二、移動網(wǎng)站導(dǎo)航設(shè)計 由于移動設(shè)備分辨率的局限性,所以移動網(wǎng)站的導(dǎo)航設(shè)計顯得尤為困難,但是又不得不設(shè)計出很清晰導(dǎo)航結(jié)構(gòu),因為用戶進(jìn)入到首頁之后,如果導(dǎo)航不清晰,將很難繼續(xù)訪問到網(wǎng)站內(nèi)部。所以如何把PC端導(dǎo)航盡可能簡單甚至濃縮到移動網(wǎng)站就變得很重要,小編認(rèn)為導(dǎo)航盡量包含主要欄目和重要信息頁足矣。
第三、網(wǎng)站內(nèi)容布局要直奔主題 移動端由于分辨率的問題,不可能做的跟PC端那么全面。這就需要把重要信息放在顯眼的位置。
最好別下滑到下一頁面。盡可能讓用戶在首屏就找到用戶想要的信息。
這樣減少用戶下拉頁面時間,也可以用戶良好體驗度。 第四、移動網(wǎng)站加載問題 移動網(wǎng)站打開速度或者速率,都影響用戶打開網(wǎng)站。
如果網(wǎng)站打開過慢,甚至超過5秒用戶打開率就迅速下降。因此,移動網(wǎng)站打開速率盡量保持在3秒之內(nèi),用戶就很愿意在內(nèi)容上面花費一定時間。
因此,移動網(wǎng)站建設(shè)就盡量減少不必需要的圖片甚至動畫的使用,保證網(wǎng)站打開速度。
手機(jī)端網(wǎng)頁設(shè)計需要注意的事項總結(jié)如下:1、明確自己想在手機(jī)網(wǎng)站上展示哪些信息:在手機(jī)網(wǎng)站制作之前應(yīng)該明確自己想在手機(jī)網(wǎng)站上展示什么,分析一下可能的瀏覽者會有哪些,然后有針對性地策劃和設(shè)計網(wǎng)站上的相關(guān)內(nèi)容,這樣才能做到有的放矢,不至于手機(jī)網(wǎng)站制作好了卻沒人瀏覽,或者瀏覽了不感興趣。
如果能做到有針對性的進(jìn)行手機(jī)網(wǎng)站制作,通常手機(jī)網(wǎng)站在推廣之后都會為企業(yè)帶來一定量的潛在用戶。2、在手機(jī)網(wǎng)站制作時要盡量符合滑動屏幕的方式:一般的手機(jī)屏幕,畫面都不如桌上電腦那么大,尤其是閱讀文字時更需要加以放大。
即使智能手機(jī)具有網(wǎng)頁放大縮小功能,但是觀看起來也較為麻煩,因為網(wǎng)頁放大后,很可能還要左右滑動才能瀏覽網(wǎng)頁,瀏覽后還要縮小回原大小。 因此在設(shè)計手機(jī)網(wǎng)頁時,應(yīng)能夠以滑動屏幕的方式來閱讀網(wǎng)頁,因為滑動網(wǎng)頁操作比著放大網(wǎng)頁觀看來要簡單得多。
3、不能參照PC端網(wǎng)站來設(shè)計手機(jī)網(wǎng)站上的導(dǎo)航功能:手機(jī)網(wǎng)頁與跟一般的PC端網(wǎng)頁不同,由于受到手機(jī)屏幕大小和屏幕操作的限制,在設(shè)計導(dǎo)航功能時應(yīng)該按照手機(jī)屏幕來設(shè)計,不能完全照搬PC端網(wǎng)站,該簡單的地方簡單化,該去掉的去掉,同時在當(dāng)閱讀文章到最后時,要方便于用戶回到最前頭,減少卷動畫面的機(jī)會,讓網(wǎng)頁變得更容易于移動設(shè)備上閱讀。 4、手機(jī)網(wǎng)站制作也要考慮多種瀏覽器的兼容:現(xiàn)在的移動瀏覽器能夠處理大多數(shù)網(wǎng)站,一般的瀏覽器都能夠正常瀏覽網(wǎng)頁。
但由于手機(jī)上的瀏覽器也有多種,比如UC瀏覽器、360瀏覽器、搜狗瀏覽器、其他瀏覽器,如此多的瀏覽器在瀏覽網(wǎng)頁的時候,如果手機(jī)網(wǎng)站的兼容性差,就很可能會出現(xiàn)在某些瀏覽器上出現(xiàn)網(wǎng)頁變形、內(nèi)容顯示不全的情況。 因此,手機(jī)網(wǎng)站制作必須考慮到兼容于多種瀏覽器。
5、在手機(jī)網(wǎng)站制作時一定要減少用戶文字輸入操作:現(xiàn)在智能手機(jī)一般都沒有實體的鍵盤,或僅只有12鍵的電話輸入功能,因此在輸入文字上會比起使用電腦鍵盤麻煩得多。因此,減少使用者輸入文字的機(jī)會,例如用戶名、密碼等,都是手機(jī)網(wǎng)站制作時要盡力避免的。
6、在手機(jī)網(wǎng)站制作時就應(yīng)該考慮到日后的推廣和宣傳:在手機(jī)網(wǎng)站制作時,不要忽略了用戶體驗,否則在日后的網(wǎng)站推廣時將會遇到麻煩。任何一個手機(jī)網(wǎng)站,都必須經(jīng)過廣策劃、設(shè)計和推廣的過程,在手機(jī)網(wǎng)站制作時需要考慮日后的推廣,手機(jī)網(wǎng)站應(yīng)該在豐富站內(nèi)內(nèi)容的同時,提供詳盡的產(chǎn)品信息以及聯(lián)系方式,并收集有關(guān)產(chǎn)品的用戶滿意度和顧客需求方面的反饋信息。
這樣的手機(jī)網(wǎng)站上線后,其推廣工作也會非常有效果。7、手機(jī)網(wǎng)站制作要兼顧非觸摸屏幕的設(shè)計:雖然大多數(shù)手機(jī)都是智能手機(jī),但也有為數(shù)不少的傳統(tǒng)手機(jī),不具備觸摸的功能,使用的是傳統(tǒng)的控制方向鍵做為滑動的工具,這時候,手機(jī)網(wǎng)頁的制作應(yīng)兼顧到非觸摸屏的手機(jī)瀏覽。
比如減少畫面中超鏈接的數(shù)量、加大文字以減少誤點。8、在手機(jī)網(wǎng)站制作時要記得要簡化網(wǎng)頁內(nèi)容:一般的手機(jī)、平板電腦等移動設(shè)備,由于屏幕大小的限制,不易容納下個人電腦的大容量的網(wǎng)頁資訊,因此手機(jī)網(wǎng)站制作的首要一點就是減少網(wǎng)頁內(nèi)容,最好不用圖片或是影音視頻等,文字也應(yīng)該精簡,但要保持網(wǎng)頁內(nèi)容的可讀性。
只需要將最重要的資訊放入移動版網(wǎng)頁,不太重要的內(nèi)容內(nèi)容,可以略去,或者通過超鏈接鏈接到新網(wǎng)頁上。9、手機(jī)網(wǎng)站制作要注重網(wǎng)頁產(chǎn)品和服務(wù)的展示:企業(yè)在手機(jī)網(wǎng)站上,需要表現(xiàn)的重點仍然是產(chǎn)品和服務(wù)的展示。
移動用戶訪問企業(yè)手機(jī)網(wǎng)站往往是有備而來,想了解某個產(chǎn)品或者服務(wù)的詳細(xì)價格、服務(wù)內(nèi)容和功能。 所以企業(yè)在手機(jī)網(wǎng)站上的產(chǎn)品和服務(wù)展示,可選擇企業(yè)的主要產(chǎn)品,對其各類參數(shù)或價格加以詳細(xì)說明,對于企業(yè)的新產(chǎn)品,也可以適當(dāng)?shù)募右越榻B,必要時可以采用圖文并茂的方式,但圖片的體積應(yīng)盡量小。
以上是在手機(jī)網(wǎng)站制作中需要注意的幾個方面,手機(jī)網(wǎng)站頁面設(shè)計需要符合用戶體驗,以方便用戶操作為準(zhǔn)則,能夠為用戶帶來切實的幫助,這是手機(jī)網(wǎng)站制作上的基本要求,也是滿足用戶需求的基本原則。
1、導(dǎo)航菜單移動站點最為重點的部分應(yīng)該就是頭部導(dǎo)航,導(dǎo)航必須包含重要的欄目以及內(nèi)容。
網(wǎng)站多用整站導(dǎo)航按鈕及搜索功能,建議把不允許用戶縮放,給禁用了,可能放大了網(wǎng)站就錯位了,影響用戶體驗。2、整體結(jié)構(gòu)分明移動站點和pc站點一樣要注意網(wǎng)頁的整體布局樣式,關(guān)于我們、產(chǎn)品、新聞等的樣式要舒服。
3、字體大小字體和字體大小可以直接影響用戶體驗,在一般情況下建議使用微軟雅黑字體,不要使用藝術(shù)字體。字體顏色和背景色要有一定的對比,字號應(yīng)該在14px-20px之間,字體太小看著眼睛疼,太大影響整體的布局。
4、頁面分辨率移動站點頁面分辨率要控制得當(dāng),要做適配不同分辨率的手機(jī),一些標(biāo)題要居中對齊。頁面不能出現(xiàn)橫向滾動條,建議適配chrome瀏覽器開發(fā)者模式下面的各種分辨率即可5、瀏覽器兼容移動端要考慮各種瀏覽器的兼容性,主流的手機(jī)瀏覽器有:UC瀏覽器、百度瀏覽器、QQ瀏覽器、蘋果瀏覽器等,都要測試有無差錯。
1、導(dǎo)航菜單
移動站點最為重點的部分應(yīng)該就是頭部導(dǎo)航,導(dǎo)航必須包含重要的欄目以及內(nèi)容。網(wǎng)站多用整站導(dǎo)航按鈕及搜索功能,建議把不允許用戶縮放,給禁用了,可能放大了網(wǎng)站就錯位了,影響用戶體驗。
2、整體結(jié)構(gòu)分明
移動站點和pc站點一樣要注意網(wǎng)頁的整體布局樣式,關(guān)于我們、產(chǎn)品、新聞等的樣式要舒服。
3、字體大小
字體和字體大小可以直接影響用戶體驗,在一般情況下建議使用微軟雅黑字體,不要使用藝術(shù)字體。字體顏色和背景色要有一定的對比,字號應(yīng)該在14px-20px之間,字體太小看著眼睛疼,太大影響整體的布局。
4、頁面分辨率
移動站點頁面分辨率要控制得當(dāng),要做適配不同分辨率的手機(jī),一些標(biāo)題要居中對齊。頁面不能出現(xiàn)橫向滾動條,建議適配chrome瀏覽器開發(fā)者模式下面的各種分辨率即可
5、瀏覽器兼容
移動端要考慮各種瀏覽器的兼容性,主流的手機(jī)瀏覽器有:UC瀏覽器、百度瀏覽器、QQ瀏覽器、蘋果瀏覽器等,都要測試有無差錯。
聲明:本網(wǎng)站尊重并保護(hù)知識產(chǎn)權(quán),根據(jù)《信息網(wǎng)絡(luò)傳播權(quán)保護(hù)條例》,如果我們轉(zhuǎn)載的作品侵犯了您的權(quán)利,請在一個月內(nèi)通知我們,我們會及時刪除。
蜀ICP備2020033479號-4 Copyright ? 2016 學(xué)習(xí)鳥. 頁面生成時間:4.006秒