2023-10-13 分類: 網站建設
1、網站logo
確保logo的保護空間,確保品牌的清晰展示而又不占據過分空間。很多客戶的logo比較大,pc端瀏覽大點沒有問題,移動端直接調取適配過去會導致移動端頭部過高,為此大家可以移動端與pc端logo分別上傳,而非調用同一個logo圖片。
2、頁面速度
5G很快,有了5G以后,4G網絡就慢了下來,加上現在做網頁用的都是高清大圖。響應式網站又是需要加載多套css樣式導致速度慢一些,為此移動端的速度需要盡可能快,建議1秒內即可打開網站。
3、圖片展示
比例協調、不變形,圖片清晰。圖片排列既不過于密集,也不會過于疏遠。圖片適配到移動端時,我們應該根據自己的產品圖片、產品標題長短,來決定是一排1個還是一排兩個來進行適配。畢竟一排一個需要有清晰的圖片支持,一排兩個又不能產品標題過長,否則容易隱藏字段,標題做換行顯示也不一定美觀。
4、banner圖的分開制作
我們經常會發現一個現象,很多響應式網站移動端的banner與pc端是同一個,雖然這樣省人力。但是會造成banner圖上的文字或者需要突出的主題,移動端等比縮小后,會變得很小。為此我們在進行移動端適配時,也需要移動端的banner圖單獨上傳。這一點同樣適合任意位置圖片效果,移動端顯示不佳的修改。
5、適當隱藏內容,進行降噪。
比如一些內容頁,大家都喜歡調用相關文章,相關作品等、友情鏈接、首頁或者專題頁移動端頁面過長等問題。由于pc端的電腦屏幕都是橫著的,不管是頁面的左側還是右側瀏覽網頁主題內容,相關信息的調用并不影響訪客、搜索引擎對主題相關度的判斷。而移動端由于屏幕較小,也都是手指滑動的方式。為此我們需要適當降噪,隱藏這些信息。
6、內容較少的模塊,少用選項卡進行切換
很多站點由于pc端做了選項卡形式,所以適配到移動端時,都也是選項卡進行切換。這里建議大家根據選項卡來確認移動端是否取消,還是移動端從上到下展示。因為內容少的情況下,手指滑動1次,就可以看完內容。為什么還需要手指點好幾次選項卡呢。
7、少用置頂導航
大多數建站的目的都是用來做推廣,為了獲客。為此大家的網站右懸浮都會加一些溝通工具,如QQ、郵箱、微信二維碼等。適配到移動端時,一般都會寫成固定在頁面底部。如果導航再一直懸浮置頂,那么底部菜單+導航的高度加起來是非常高的,這就導致了可瀏覽內容的區域就比較低了,嚴重影響到了瀏覽體驗。
8、去除多余的分享按鈕
目前市面上的分享插件都是基于pc端進行開發的,而移動端本身瀏覽器都帶各種分享功能。為此多余的分享按鈕是沒有作用的,我們可以單獨針對移動端進行屏蔽,pc端繼續保留。
9、詳情頁的圖片點擊可彈出,左右滑動切換與放大。
如新聞詳情頁、作品詳情頁,有些訪客只想看圖片,涉及到一些參數的圖片可能還需要放大來看清參數。為此我們的移動端網頁需要與微信聊天一樣,點擊一張圖片,可以彈出。并可以切換到下一張、上一張、也可針對單張圖片進行放大拖拽。
10、針對個別的頁面或者模塊出具兩套設計圖
一些非主流的設計,或者特殊的模塊,pc端很美觀。但是適配到移動端時,它是非常的丑陋,比如一般企業站的發展流程模塊。針對這樣的模塊或頁面,我們可以單獨出具設計圖,單獨寫兩套樣式,pc一套,移動一套。當然這只是針對于局部模塊,非整站移動端出圖,這樣只會增加很多工時。
11、企業網站可以考慮去除面包屑
面包屑的作用主要是為了讓搜索引擎與用戶清楚自己當前位置,不至于迷路。國內互聯網已發展了那么多年,企業網站一般也沒有幾個頁面。為此是否需要面包屑,并不影響搜索引擎與用戶的識別。若是面包屑的設計,影響了移動端的美觀,我們可以考慮直接去除。
12、頭部的折疊菜單查看子菜單建議在一個平面內
這一條專業術語怎么說更合適,大叔也布吉島。就姑且這樣說吧,相信大家見過很多網站,有些網站當你點開折疊菜單時,你想看它的子欄目,你點擊這個欄目時,它會再出現一個頁面,你想返回就需要點箭頭返回。而有些網站的子菜單,不管多少級的菜單,都是點擊展開或者點擊收縮即可。這里建議第二種,因為第一種當子菜單較多或者是子菜單之間的名稱過于相似時,訪客很多時候都不知道自己點的哪一級進來的。
13、折疊菜單下拉時收起后,停留在當前位置。
不少站點在折疊菜單點開后,如果不想訪問其他頁面,就會進行關閉。但是關閉后總是會刷新頁面,導致本來停留的位置不見了,直接頁面頭部置頂了。為此這一點我們在適配時,需要格外注意,算是比較明顯的一個錯誤。
14、自動播放視頻或者視頻作為背景圖層形式做banner的站點,建議移動端寫成圖片。
移動端有一個特性,如果遇見此類站點,那么一輸入域名時,就會發現是黑的,英文播放視頻還全屏,會給訪客懵逼的感覺,當點擊退出視頻時,才可以瀏覽網頁。當刷新時還會繼續重復,為此建議此類站點移動端單獨寫成圖片。
15、Pdf在線預覽移動端單獨增加下載的按鈕
很早之前移動端是不支持pdf在線預覽的,現在基本上各個瀏覽器都是可以直接在線預覽pdf文件。Pc端在線預覽時,可以單獨下載。而移動端非常多的瀏覽器是可以在線預覽,但是會找不到下載按鈕,這讓訪客比較苦惱。
16、表單適配時寫成多表頭或者是增加左右方向的滾動條
一些產品參數密密麻麻的表格,電腦端由于屏幕較大,都可以展示完全。而移動端如果直接按比例寫會導致文字無法瀏覽。為此我們需要移動端寫多表頭或者用滾動條的形式。
17、少用彈窗形式
很多網站電腦端看案例,愛用彈窗,因為點擊一下可以看大圖。但是移動端只會越彈越小。為此我們如果電腦端是彈窗形式,那么移動端可以取消彈窗,單獨做個詳情頁即可。
分享文章:響應式網站移動端適配的17個體驗點
URL分享:http://m.newbst.com/news5/285855.html
成都網站建設公司_創新互聯,為您提供網站排名、網站營銷、企業建站、面包屑導航、做網站、定制開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容