移動終端網站建設之頁面設計技巧

時間:2015-06-28 作者: 瀏覽次數:分享:

移動終端在國內已經是人手必備的裝備了,移動終端瀏覽在全球的使用程度各有不同。在韓日,移動終端瀏覽器被廣泛應用于移動服務,在歐洲,Wap服務一直在增長,而在美國,人們更多通過PDA瀏覽器瀏覽網頁而不是移動終端。但是移動終端的網站建設已經迫在眉睫。

雖然移動終端瀏覽目前并不是在每個地方都受歡迎,但是在接下來的10年內,它將成為大多數人上網的主要途徑,移動終端瀏覽器也將成為人們每天都會用到的工具。而這些都要求移動終端瀏覽的用戶體驗都要得到改善,主要體現在:連接速度、服務數量、可用性增加以及流量成本降低。本文主要簡單地說明移動終端瀏覽可用性的幾個方面。

移動終端瀏覽可用性

移動終端瀏覽可用性包含幾個層次(如圖1),不過用戶是不會發現是哪個層次導致可用性問題的。對于終端用戶,移動終端瀏覽是一個整體的體驗,所有層次都必須無縫配合以提高可用性。

圖片文字:

設備可用性:

鍵·展示

瀏覽器入口

UI風格

瀏覽器可用性:

交互

頁面渲染

緩存等等

站點可用性:

結構

內容

布局

1:三個獨立層次構成整體的可用性

在移動終端設備設計過程中,瀏覽器應用的重要性決定了硬件設計以及整體UI風格。如果是觸摸屏且有手寫筆,那么瀏覽器交互會容易多。另外完整的QWERTY鍵盤也讓用戶可以輸入網址以及填寫表格。如果不將瀏覽作為主要應用,那么移動終端設備必須輕巧,從而能夠滿足一只手使用的需求。在一些非觸摸屏設備上,瀏覽器主頁上必須有幾個關鍵性的鍵,還有網絡連接狀態以及最重要的回退功能。

小屏幕的移動終端瀏覽器設計比較困難。同時大多數移動終端設備在不同國家都有使用,所以理解不同移動終端瀏覽文化的差異以及理解目標用戶的移動終端瀏覽體驗變得尤為重要。一個好移動終端瀏覽器必須能夠承載所有類型的內容,不僅是專門為移動設備優化的內容而且還包括為PC屏幕設計的網頁內容。

在為移動終端設計服務時,設計人員必須知道哪些內容是在移動狀態下會使用的,以及一個友好的網站結構和UI設計原則是什么[參見注釋1,2]。

內容人員和瀏覽器開發人員都需要理解移動環境屬性和移動狀態下的用戶需求,而且必須測試自己的產品在移動環境下的效果,要分清楚哪些功能可以在實驗室里測試,而什么內容是必須在移動環境下測試的。我們一直在做用戶在移動終端上的注意力分配以及瀏覽器交互行為等等方面的用戶研究。

在移動狀態下瀏覽完整網頁

針對移動終端用戶優化的服務要求研發人員需要確定移動狀態下的用戶在手持設備上的需求。許多服務往往跟地點有關,比如旅游信息或者地圖;與時間有關,比如列車時刻表;或者是非常個人化的需求,必須最喜歡的酒吧等等。這就要求服務必須具有靈活性,基于不同因素而變化。

移動終端用戶使用PC網址登陸網站的原因往往是由于很多用戶只記得PC上的網站網址,不知道移動終端版網站的地址,很多情況下,用戶在移動終端上登陸電腦版網站,然后得到移動終端版網站的鏈接。如果網頁不提供移動終端版網站的鏈接,那么肯定會喪失一些用戶。

另外我們相信大多數國家的用戶仍舊需要登陸完整網頁,3G網絡再加上優秀的移動終端屏幕使得在移動終端上瀏覽完整網頁仍具有比較好的用戶體驗。所以我們希望針對移動終端優化的內容能夠增加,而且內容人員還要注意到,移動終端瀏覽器用戶在增加,不過還要在Web網站上提供移動終端網站的入口。

1、狹窄布局

在小屏幕上顯示大的web頁面仍舊需要一些信息視覺處理方法。目前一些瀏覽器采用狹窄布局作為默認查看模式,Opera將其稱為小屏幕渲染,NetFront將其稱為SmartFit,我們稱之為狹窄布局,因為整個內容的顯示窄且長,并且所有內容都做了簡化以符合屏幕寬度。

我們對這一布局做過很多用戶研究[參見注釋5],狹窄布局的主要好處就是文本容易閱讀,如果文本的寬度超過屏幕的寬度,用戶的閱讀就會很困難,雖然可以采取滾動的方法處理這一問題。

不過根據我們的調查,狹窄布局仍有很多問題。最糟糕的就是為了符合屏幕寬度,一些大圖片被刪減,結果導致圖像細節丟失。第二個問題就是表格。如果有一行表格不與屏幕吻合,就會自動調至下一行。

還有一點就是內容排序。如上圖,所有內容的顯示變得很長,所以用戶很難找到一些想要的內容,經常需要在屏幕滾動時去尋找關鍵詞,這也就意味著滾動速度不能太快,結果看完所有內容會是一個非常漫長的過程。如果加快滾動速度,用戶又可能丟失一些重要信息。

一個典型的Web頁面中,最左邊往往有很多鏈接,主要內容顯示在頁面中部。在狹窄布局中,用戶必須滾過這些鏈接,才能看到主體內容。不過在瀏覽一個網站時,這些鏈接多數情況下是不相關,用戶會變得很生氣。還有一個相關的問題就是,一個網站的任何頁面的上端往往很類似,用戶會弄不清楚自己在哪個頁面,所以如果這些鏈接中包含用戶已經點擊過的,那么用戶很有可能再點擊這些鏈接。我們遇見過很多用戶由于這個問題而放棄閱讀,他們會說瀏覽器壞掉了。

2、原始布局

由于狹窄布局存在很多可用性方面的問題,所以很多瀏覽器還提供原始布局頁面模式,這很類似在PC上,讓用戶根據內容來選擇不同的視圖模式,原始布局中,大圖片細節和表格的效果會更好,同時如果用戶知道PC上的網站的結構,那么就很容易找到自己所需要的內容。

當然原始布局并非什么問題都沒有。最糟糕的就是閱讀寬文本內容,會很費力。用戶每次都得向前向后拉動滾動條。另外由于頁面很大,所以需要滾動的地方也越多。

3、理想布局

很明顯,小屏幕移動終端上的頁面瀏覽仍需要很多改進和革新。如果想讓自己的網站在小屏幕上具有可讀性,可以遵守以下3個指導建議:

避免那些一眼就能看出來的大物體;

避免在圖片上使用小文本;

頁面要輕化。

移動終端的網站建設有很多技巧,需要要認真掌握。

聯系我們

CONTACT US     點擊進入<<

你可以隨時與我們聯系,或把你的需求提交給我們。

電話:029-62221182 / 029-62221180

郵箱:[email protected](綜合業務)

          [email protected](人才招聘)

地址:中國-西安 雁塔區朱雀大街132號陽陽國際廣場B座18樓21804室

提交需求
工作時間周一到周五(09:00am - 17:00pm) 歡迎咨詢
我要咨詢

ONLINE MESSAGE

山东11选5在线计划免费 湖南幸运赛车官网 急求快乐双彩的走势图啊 辽宁11选5杀号 美股首页新浪财经 买江西快三平台 山东群英会玩法规则 重庆快乐10分计划软件 陕西11选五5开奖走势图 小额理财