隨著移動互聯網的普及,大多數網站開始開發相應的移動版。移動互聯網設計開發完畢后,自己先看一看,這個網頁瀏覽方式是否讓用戶感興趣。雖然移動互聯網規則可能各不不同,但設計創新在有條不紊地進行中,設計師們想方設法解決這一難題。下面我分享2011年移動互聯網設計趨勢的16種手機網頁設計,并提供16個實際案例,你可以參考這16中設計運用到你的手機網頁設計開發中。
主要的移動網絡設計的趨勢在于使互聯網版本與移動版本的差異最小化。關鍵的問題是我們的移動設備和電腦屏幕的分辨率相差很大,如何能夠更直觀地顯示網站內容。另一個問題是移動設備的網絡速度是根據所在環境而定,如何確保用戶能夠快速瀏覽網頁。這些問題迫使設計人員打開手機網頁設計的創新思維,接下來,我們就來看看他們的網站有哪些設計的突破。
1.滑動欄
滑塊被看作是一種方便的解決方案來處理大容量的圖像。通常是提供一種奇特的過渡效果讓您輕松瀏覽多張幻燈片。這個方法特別有用,因為在移動布局在有限的空間,您可以顯示多張圖片。
2.大圖背景
使用大尺寸圖片作為網站的背景,也是令人震撼的視覺效果。用一張能夠迅速表達含義的圖片比一大堆文字內容更有意義。
3.雜志封面
雜志的設計也變得越來越流行,因為除了網站的其余功能,他們更喜歡的門戶網站上的內容。這里需要考慮到的主要是圖像和標題。
4.視頻內容列表
5.整站導航
移動網站的不同版本通常提供一個鏈接,而且可以跳轉到桌面版本的網站訪問,為用戶提供其他內容。這一趨勢會越來越流行,因為現在的移動設備大部分有大屏幕和wifi上網可以輕松地連接任何網站的顯示桌面版本。
6.集成社會化網絡
另一種流行的趨勢是為了用戶提供移動版的網絡社區和外部嵌入式社會化網絡站點。
7.簡介版塊
許多移動網站使用簡介版塊,顯示一些關于網站或公司的介紹等信息,給瀏覽者留下第一印象。
8.精簡版
這是最常見的方式之一。把無關緊要的網站內容去除,留下主要的內容部分,然后優化輸出,用在移動版本。
9.縮略圖樣式
基于網格的縮略圖樣式,對視覺內容的分類、分組極其有用。只要點擊縮略圖就能打開指定的幻燈片內容或網頁。
10.兩列導航菜單
把導航菜單欄拆分成兩列顯示。許多移動網站已經使用了這種布局。
11.二元線性指尖導航
這種導航菜單式是由一個雙重對比的顏色風格的導航欄。通常是用于重要的內容版塊,例如:‘關于’和‘加入’。
12.下拉菜單
一般情況下,根據瀏覽者的點擊顯示下拉部分菜單。通常放置在頁面頂部,用于調整了網站菜單占用屏幕的空間。
13.用圖片做導航
全部用圖片做菜單欄。這種情況下,附加圖片有助于明確指導該網站的不同部分的游客。
14.圖片+文字導航
利用圖片+文字制作的導航也使人們更容易瀏覽你的網站。為圖片加上文字說明,非常直觀,有利于更快的了解鏈接內容。
15.橫向導航面板
橫向導航面板是未來移動互聯網設計的一大趨勢,肯定會成為主流設計。橫向導航面板充分有效的利用屏幕空間,菜單點擊的區域較大,大大的方便了瀏覽者瀏覽網站內容。
16.簡潔風格