由于手機終端紛繁復(fù)雜，各種分辨率的屏幕，各種適配不同機型的特殊規(guī)則，都對手機網(wǎng)站的設(shè)計提出了更多的要求。大屏幕上已有的網(wǎng)站向小屏幕的設(shè)備上遷移，是需要經(jīng)過一些調(diào)整的，今天就來探討三種可用的遷移方式。

• 拍扁式
• 手風琴式
• 棋盤式

一.第一種：拍扁式

這種形式最簡單，也是目前web遷移到wap采用的最多的一種形式，就是把主流的1:2:1三欄布局的web網(wǎng)頁拍扁成一個線性的一維的wap頁面，比如看這張圖1-1

圖1-1

這是elya自己的網(wǎng)站，如何將它轉(zhuǎn)化為一種線性的形式呢？

一種有效的方法，就是將主要的導航欄移至頁面的頂部，然后在下方，按照區(qū)塊的重要程度依次排列起來，文章以標題顯示，導航可以反復(fù)出現(xiàn)，讓用戶可以在頁面的任何位置都能方便的調(diào)整，頁面太長也可以在頁尾設(shè)置一個返回頂端的按鈕。比如我們按照圖1-2的形式

圖1-2

按照1、2、3、4、5的重要層級把web網(wǎng)站縱向排列成一個豎條，就成了wap網(wǎng)站，如圖1-3：

圖1-3

有很多瀏覽器是能夠自動做出這種轉(zhuǎn)換的，比如Oprea瀏覽器，它能自動的將web內(nèi)容呈現(xiàn)形式轉(zhuǎn)化為線性的。然而這種自適應(yīng)遠不能替代你的設(shè)計工作。

二. 第二種 手風琴式

線性視圖是能夠解決一個信息排列的問題，但是無法解決大量的信息堆積在一個小屏幕上，用戶怎樣才能獲得網(wǎng)站的全貌這個問題。為了減少冗余的信息，我們需要學會利用歸納或隱藏內(nèi)容的技術(shù)，或者說是利用摘要。用戶首先看到的僅僅是一個簡單的摘要，但是可以隨著層層展開，可以看到更多更詳細的信息。最理想的狀態(tài)是，當用戶將內(nèi)容展開以后，展開的內(nèi)容可以沿著垂直軸收縮。

正如傳說中的“手風琴摘要（accondion summarization）”的瀏覽方法，就像手風琴一樣，它可以讓內(nèi)容展開或者收縮以便看到更詳細或更摘要的內(nèi)容。

如果你想通過摘要的形式，把web網(wǎng)站轉(zhuǎn)換成wap，可以采用很多種方法，比如Mobile Interaction Design中提到的：

• 遞增的——一開始只顯示文本的第一行，隨后顯示前三行，最后顯示整個文本
• 關(guān)鍵詞——首先自動顯示從文本中提取的關(guān)鍵詞，然后顯示前三行，最后顯示整個文檔
• 概要——一開始顯示最重要的句子，在第二次點擊后會顯示出全文內(nèi)容
• 關(guān)鍵詞/概要——綜合了關(guān)鍵詞和概要的方法，先顯示出關(guān)鍵詞，然后是關(guān)鍵句子，再點擊一次會顯示全文內(nèi)容

舉個簡單的例子，如圖2-1，就是把圖1-3的elyaaa.com的wap網(wǎng)頁做了縮略處理。

圖2-1

三. 第三種 棋盤式

第三種方法則比較藝術(shù)，我們都知道，用戶的空間記憶能力遠比文字記憶能力強的多得多，也就是說網(wǎng)站的大概布局，那部分是什么內(nèi)容，用戶基本上是知道呢，那么如果想讓用戶在進入頁面后仍然保存著對全局的感知，同時能縮放局部達到瀏覽細節(jié)的效果，豈不是很好呢？

這里有兩種方法，第一種是局部點擊縮放法：

比如我們?nèi)匀挥胑lyaaa.com的頁面舉例，見圖3-1：

圖3-1

這個方法是加載了頁面全局之后，點擊局部放大成右側(cè)的詳細內(nèi)容。當然這對沒有使用過web而直接使用wap的人來說可能會造成一定的負擔，因為小屏幕確實無法看清詳細的文字。

第二種是九宮格法：

具體的例子不詳述了，可以借鑒Facebook客戶端和Opera瀏覽器的樣式和思想，不多說，見圖3-2：

圖3-2

以上是最近的一些收獲和思考，還沒有具體實踐到操作層面，總結(jié)如下，小屏幕到大屏幕的遷移方法主要有如下三個：

• 拍扁式
• 手風琴式
• 棋盤式

如果有不符合實踐層面的地方，還請大家批評指正，希望積累更多實戰(zhàn)經(jīng)驗，分享更多設(shè)計心得體會。

elya原創(chuàng)，轉(zhuǎn)載聲明：http://elyaaa.com/product/536.html