2014 年,淘寶宣布開始對網頁版支付寶轉帳收費,但移動端轉帳依然 WordPress 自助建站免費,這一舉措不難看出,隨著移動端網民數量的日益增多,各企業主已經把目標轉移到了移動端,移動端 WP SaaS 網站建設也成為企業發展盈利的又一主攻方向,那移動網站的建設應該從哪些方面下手呢?
又需要遵循什麼規則呢?
下面我就跟大家一一介紹:1 、一目了然 一目了然的意思就是可以讓使用者在短時間內,可以把內容看的清楚,那這就需要確保內容與螢幕大小的一致,有整齊的排版和舒服的字型大小,增強使用者的體驗。
大部分的行動裝置,畫面都不如桌上電腦那麼大,尤其是閱讀文字時更需要加以放大。
即使智慧手機具有網站放大縮小功能,但是觀看起來較為麻煩。
因此設計行動網站時,建議是能夠以滑動螢幕的方式閱讀網站,因為滑動網站比起放大網站觀看來得簡單多了。
2 、簡化導航 為避免使用者橫向滾動頁面,這個就需要有明確的目錄結構,提供醒目的 「後退」 和 「首頁」 按鈕,對於導航的目錄結構,谷歌列出了四種常見的 WordPress 手機網站的導航形式,分別是:橫條式、大按鈕式、列表式和選項式。
WordPress 手機網站與跟一般的 WordPress 網站不同的,在於當閱讀文章到最後時,要回到最前頭是麻煩的,因此,網站製作 SaaS WordPress 公司,除了減少捲動畫面的機會外,也要加強導覽的功能,讓網站變得更容易於行動裝置上閱讀。
導覽設計的重點有:只在首頁的部份加入搜索的功能,建立導覽功能鍵,其中以 「回到首頁」 、 「回到上一頁」 這兩個最為重要,最後,「回到上一頁」 的按鍵除了首頁以外,其餘的頁面都需要放置。
3 、流暢體驗 允許使用者儲存搜索、書籤、購買等資訊的功能。
這就儘可能在所有平台中提供相同資訊和功能,即無論是 PC 端、平板端還是手機端都保持網站資訊的一致性。
4 、減少文字輸入部分 手機大多沒有實體的鍵盤,或僅只有 12 鍵的電話輸入功能,因此輸入文字上會比起使用鍵盤麻煩得多。
因此,減少使用者輸入文字的機會,例如:個人的帳號、密碼、搜索內文、使用編輯器等等,都是行動網站要儘力避免的。
建議設計的重點:允許行動上網使用者儲存輸入的帳號密碼資訊,輸入的區塊盡量加以放大,允許行動上網使用者,輸入簡易的密碼,例如 PIN 數字密碼。
5 、拇指操作 通過較大的按鈕,以降低操作難度。
為防止使用者因為按鈕較小而誤點其它選項或內容而造成的不便,可以在有限的手機螢幕上再適當給按鈕做些留白,按鈕之間的間距要加寬,以此擴大點選範圍。
6 、簡單快捷 所謂簡單快捷,就是要在手機有限的螢幕上以最簡單最實用最快捷的形式展示給使用者最需要的東西,讓使用者方便。
做法是優先提供使用者最需要的內容和功能,儘可能的去掉在 WordPress 手機網站中可以去掉的內容、功能、板塊、按鈕等,只留下最精華的部分,起到精簡的作用。
一般的手機、平板電腦等行動裝置,不易容納下適合於個人電腦的龐大網站資訊,因此手機移動網站的首要重點,就是減少內容,不論是圖片、文字或是影音。
請記住一個重點:只要將最重要的資訊放入行動版網站,就是最主要的準則,重要性較低的、讀取需要時間的內容,則可以透過超連結,連回到正常的官方網站。
行動網站必須十分的重視內容簡化這一點,一個塞滿內容的行動網站無法獲得網路客戶的青睞。
另外,建議您可以使用顏色和陰影,以便來凸顯按鈕。
這一點不僅僅是針對 Google 和百度搜索引擎 的優化設計,更是手機站針對使用者體驗的人性化設計。
7 、 觸控螢幕與非觸控螢幕設計 雖然現在是觸碰型的智慧手機當道,但是仍有為數不少的傳統手機,沒有觸碰的介面,使用的是傳統的控制方向鍵做為導覽的工具。
例如:減少畫面中超連結的數量,可以讓選擇連結的時候出現一些減少一些按鈕的動作,或是加大文字以減少誤擊的問題。
此外更重要的是滑鼠的原理跟觸碰介面的原理有很大的差異,因此行動版的 WordPress 網站應該避免只有電腦滑鼠才能做到的功能。
舉例來說:「下拉選單」 的這一項功能,因為行動裝置沒有 「滑鼠座標」 的設計,所以無法觸發滑鼠移動過去才會顯示出來的選單。
8 、廣泛適應 網站能在不同的移動裝置上執行,移除 flash,可以使用 HTML5 來實現互動內容和動畫。
很多站長可能不太懂 HTML5 相關技術以及自適應網頁技術,沒關係,您可以看下 《如何利用 「自適應網頁設計」 實現不同的裝置上呈現同樣的網頁》 、 《全方位解析自助建站 SaaS 響應式網頁的設計與應用》 和 《自助建站 SaaS 響應式網頁布局的實現方法原理》 的相關介紹,相信可以解決您現在的問題。
手機的規格眾多,有的解析度為 320*240,較新的則為 800*480,而次世代的手機更有 720P 的解析度,因此行動網站如何滿足眾多的需求?
一般來 說有兩種作法,一種是建立不同解析度的行動網站,由使用者於手機行動入口網站自行選擇;另一種做法則是透過手機的語法,例如 CSS 語法中的 Viewpoint 就能夠根據手機的解析度加以決定瀏覽畫面的寬度。
9 、重新定向,持續改進 自動判斷移動裝置,重新定向相應適合的 WordPress 網站內容,根據不同的移動裝置和螢幕尺寸,來顯示相應的 WordPress 網站內容,讓使用者可以切換電腦版與移動版網站,以便他可以選擇下次訪問的版本。
使用分析工具,了解使用者如何使用網站,收集使用者意見並反覆測試,追蹤表現。
移動網站不是移動應用,所以通過這些,可以得到持續的改進和調整。
10 、立足本地,輕鬆轉化 與使用者位置相結合的個人化資訊,例如地圖、路線、電話、本地資訊等,在所有提供內容當中,本地化資訊是最對使用者有幫助的。
簡化註冊登入流程,也就減少了使用者的輸入麻煩,但是提供有助於轉化/註冊的資訊也不能忽視。
只是在簡單流程的前提下,提供有助於提升轉化率的資訊給使用者。
手機上網有著許多傳統電腦所沒有擁有的優勢,其中最大的優勢就是不受時間和地點的限制,因此 WordPress 手機網站應該要特別發揚這些特色,讓移動網站具有一般網站不具有的更多優勢。