河北盛秋網絡科技有限公司擅長于各種安卓APP應用軟件開發,UI、研發、服務上都保持國內一流標準,確保產品的商業價值。
手機UI設計是手機軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅讓軟件變得有個性有口味...
APP軟件開發公司為企業提供高端型的IOS APP定制,為顧客開發一款有實用性的且具有營銷性的APP應用軟件。
1前言
據國內三大運營商數據來看,中國的手機用戶數已達15.7億,超過3/5的移動用戶每個月都會從手機終端訪問網頁,如今的移動端手機網站比例肯定有提升,但是對于這些存在的移動版本網站來說,小星查看了很大一部分手機網站,很少做SEO優化工作,在這里,小星認為移動端的手機網站優化并不是PC網站的簡單copy過來的移動版本。
作為一個手機用戶,瀏覽網頁的時間是零碎的,用戶不可能耐心的點擊很多頁面。因此,為了優化一個移動網站,需要在制作移動網站的過程中盡可能精簡移動網站的設計,合理優化移動網站的SEO。
2移動端網站的頁面設計
網頁的設計要盡可能簡單,手機可視區域小,布局不同于傳統網頁,要充分利用有限的空間來顯示信息。
1、頁面適配手機屏幕
隨著手機屏幕的不斷增加,一些用戶的手機屏幕仍然是240*320的大小,當然也有一些屏幕分辨率不規則的情況。對于許多UIS人來說,不同的手機屏幕往往會繪制多組圖紙,以確保手機客戶端可以在不同的屏幕上實現匹配。
2、頁面專門針對手機屏幕設計
(1)、頁面隨屏幕寬度變化,無橫向滾動條。
(2)、不放大時,內容瀏覽清楚,文字大小不小于12像素。
(3)、不放大時,方便點擊按鈕和鏈接,按鈕大小不宜過大或過小。
3、最多使用三級頁面結構。
為了降低移動臺的頁面級別,降低用戶的認知難度,一個標準的移動臺應該包括主頁、列表頁和詳細頁三種類型,以滿足廣告主的推廣需求和用戶的認知需求。
對于頁面類型和級別,小星建議不要超過3頁,保證簡單高效的用戶體驗。根據小星的分析,頁面之間的結構應該盡量淺,以減少用戶點擊量,提高瀏覽體驗。
(1)、首頁
整個網站內容索引、內容預覽(使用“更多”、“細節”等鏈接)、首頁作為用戶分流前到達的頁面,需要收集整個網站的大部分模塊和功能,以保證不同需求的用戶登陸后能夠找到自己想要的信息。
一般來說,移動站的主頁可以分為導航型和內容型。導航型,由于其簡潔的風格,一般可以作為品牌推廣,快速傳達品牌形象。內容類型,由于其內容豐富,經常被用來快速傳達廣告主想要傳達的信息。
(2)、列表頁
頻道內容、分類、列表是主要內容。列表頁面一般用于顯示簡單、重復性高的內容,在商家的產品/服務中最為常見,一般形式比較簡單,用于滿足展示多個產品/服務的需求。根據商家的產品/服務信息不同,一般分為純文本和圖形兩種基本形式。
(3)、內容頁
建議以結構化的形式呈現內容,詳細頁面一般用于展示主頁和列表頁面上不完整的信息,以滿足用戶了解細節、輔助用戶決策的需求。
4.使用清晰的導航組件。
全站導航:快速到達各通道;
局部導航:在單個頻道的主頁、列表、詳細頁面之間移動
相關鏈接:相關頻道之間的鏈接。
5、頁面單列布局,重要內容顯示在第一個屏幕上。
頁面內容模塊從上到下,單列布局,重要內容展現在首屏。
6、保證良好的可用性
(1)、頁面內容沒有丟失,交互功能也正常使用。
(2)、不使用flash
(3)、使用html5實現動畫。
7、優秀的交互方式,簡化操作流程,提高使用體驗。
(1)、優秀的交互模式可以有效提升用戶體驗,一方面可以簡化操作流程,提高操作效率;另一方面,小星覺得可以大大提高產品功能的可用性。
(2)、與自動切換和點擊切換相比,滑動切換增強了用戶操作的主動性,提高了切換的便利性。
(3)、滑動切換頁面。用戶可以滑動切換頁面,節省用戶尋址時間。
(4)、點擊放大圖片點擊縮略圖放大圖片,減少了操作流程,一定程度上減少了因頁面跳轉帶來的用戶流失。
(5)、點擊頁面區域可以大大提高用戶點擊的效率,減少定位點擊區域帶來的效率損失。
(6)、點擊加載更多。一方面減少了單個頁面不必要的信息,使頁面簡潔,同時可以減少頁面之間的跳轉,減少因網速等原因造成的用戶流失。
8、確保廣泛的兼容性。
可以在主流操作系統和瀏覽器中正常顯示,比如:操作系統:Android、iOS;瀏覽器:UC、QQ、iOSSafari、Android。
3移動端網站內容設置優化
最好是將keywords、description和meta標簽與PC端區分開來,在手機網站的首頁或頻道首頁的網頁代碼中使用它們,如傳統PC端網站那樣,在每一頁的關鍵字和描述中使用它們,對搜索結果的顯示(摘要)和優化很有幫助。
1、一致性
登陸頁面內容與關鍵詞、廣告文本的關聯性,不僅保證了廣告與目標頁面的呼應和一致,更重要的是可以增加潛在客戶在登陸頁面的點擊量,減少客戶流失。
2、可信度
通過告知潛在客戶公司名稱、聯系地址、客服電話等信息,可以有效提高網站(公司)的可信度。
3、重要信息首屏顯示
具體產品信息盡量出現在網頁的1-2屏,避免和用戶玩尋寶游戲。
4、根據行業特點,放有針對性的內容。
注重移動頁面的信息化建設,滿足用戶需求;
基本信息:公司介紹,產品/服務介紹。
信任信息:榮譽資格、專家團隊、案例。
轉化信息:電話號碼和地址。
5、簡化文字,處理好圖片。
精簡文字:PC內容的一半左右。
使用圖片和幻燈片增強顯示效果,注意壓縮圖片大小。
推薦用寬圖片展示LOGO,正方形圖片展示產品。
4優化移動端頁面性能
隨著移動互聯網的發展,我們應該更加重視移動頁面的性能優化。我們能做的就是優化移動頁面本身,這也是我們專業價值的體現,所以一定要做好移動頁面的性能優化。
1、控制加載時間與網頁大小
跳出前等待時間的用戶比例;
加載時間:單頁5S以內;
頁面大小:每頁50K以內;
優化加載時間和頁面大小:側重前端優化;
減少HTTP請求:減少重定向,合并圖片,懶加載;
減少傳輸數據大?。簤嚎s圖像,開啟GZIP……;
考慮到移動設備和移動互聯網的特點,小星建議在開發和設計移動網站的頁面時,一個普遍的原則是考慮用戶訪問的效率,減少頁面的加載時間。
2、減少訪問請求數
從設計和實現層面簡化頁面,不要放太多圖片、復雜表情、動畫、視頻等。
資源整合壓縮:比如拍背景圖,導航圖等。作為一張圖片,因此只需要一個請求,而不是多個請求。
靜態資源(Css、Js、Image)懶加載;
異步執行inline腳本;
避免重復的資源請求;
縮小cooike;
設置連接方式為keep-alive;
減少DNS查詢;
移動終端可視區域有限,采用延遲加載方式;
開啟服務器壓縮(gzip方式)。
3、優化圖片處理
圖片走CDN;
少用動態gif圖;
圖片不適宜過多及過大;
避免使用bmp圖片;
圖片壓縮;
零碎圖片使用cssSprite技術一次性下載。
4、優化HTML
減少HTML標簽,減少不必要的嵌套;
廢棄table標簽;
減少DOM深度;
壓縮HTML,去掉注釋,空格換行等信息。
5、優化JS
使用臨時變量或數組存儲集合數據,如document.images和document.forms
慎用with語法;
使用AJAX緩存;
避免eval及Function語法;
避免使用inlineScript;
異步、底部加載js;
合并壓縮js;
字符串連接使用數組的連接模式。
總結:
無論是PC還是手機,網站都要考慮清楚消費群體的定位。雖然智能手機用戶數量很普及,但要明白,中國大部分手機用戶使用的網絡速度遠不如PC。所以在設計頁面的時候,需要考慮用戶打開網頁的時間長度,這不僅是用戶體驗的問題,更是盡量減少百度索引抓取,讓百度蜘蛛抓取并盡可能包含頁面的問題。