“良好的交互設(shè)計(jì)關(guān)注人們所想，所做以及所感”——斯蒂芬·P·安德森
安德森的這句話適用于整個(gè)交互設(shè)計(jì)領(lǐng)域，同樣這也是手機(jī)交互設(shè)計(jì)的真理。讓用戶快速地找到他們想要的信息是手機(jī)交互設(shè)計(jì)的必要條件。最重要的一點(diǎn)還是用戶可以以最簡(jiǎn)便的方式找到最重要的東西。由于手機(jī)是一個(gè)最為私人的設(shè)備，所以一定要讓用戶對(duì)自己正在做的事有著非常好的感覺，這樣才會(huì)讓他們?cè)絹碓蕉嗟毓馀R你的網(wǎng)站。
我在去年購(gòu)買了N95，現(xiàn)在我在去上班的路上檢查和整理郵件，通過手機(jī)上YouTube看視頻，實(shí)時(shí)地檢查Twitter feed和郵件信息，也查看Facebook好友的信息。主題就是：我往往在走路的時(shí)候，用手機(jī)登陸這些網(wǎng)站的手機(jī)版來檢查最新信息。
在一個(gè)手機(jī)上，這些網(wǎng)站的電腦版就遇到麻煩了。在買N95之前，我的諾基亞和摩托羅拉手機(jī)的屏幕更小，手機(jī)瀏覽器還是個(gè)新奇玩意。隨著屏幕的增大以及瀏覽器變得更加先進(jìn)，N95有著足夠的屏幕空間，整個(gè)網(wǎng)站體驗(yàn)也達(dá)到合理的程度，不過所有的這些應(yīng)用的網(wǎng)站并不是按照電腦瀏覽器設(shè)計(jì)的，就算是 iPhone，雖然有著優(yōu)秀的網(wǎng)頁縮小和放大功能，但是與iPhone自帶的這些網(wǎng)站（Facebook、Twitter、Gmail）相比，完全版的網(wǎng)站用起來要麻煩的多。
隨著網(wǎng)站和Web應(yīng)用變得更為先進(jìn)，現(xiàn)在迫切需要提供針對(duì)手機(jī)等移動(dòng)設(shè)備的網(wǎng)站和Web引用。一個(gè)有著很好的移動(dòng)體驗(yàn)的應(yīng)用往往存在一種難以解釋的情感依戀。使用手機(jī)版網(wǎng)站的用戶感受很好，簡(jiǎn)版和完整版Twitter都可以通過手機(jī)瀏覽器打開，但是往往簡(jiǎn)潔手機(jī)版更有吸引力，因?yàn)樯厦娴拿考挛锒几聊幌喾孟窬褪轻槍?duì)用戶的手機(jī)設(shè)計(jì)的。
接下來，我介紹一些我每天都在用的幾個(gè)手機(jī)應(yīng)用，以及我的一些思考。
如我之前所言，我每天都要使用Gmail，我在上班的途中檢查郵件。我一般檢查3個(gè)郵箱，每個(gè)都設(shè)置書簽。一般是查看信息、存檔、刪除、報(bào)告垃圾郵件，如果需要緊急回復(fù)一條郵件，就會(huì)用到回復(fù)和發(fā)郵件功能。
手機(jī)版Gmail的主屏幕上沒有過多的界面功能（如圖），主要是重要的郵件瀏覽和管理功能。我可以瀏覽、發(fā)送、接受、刪除和管理郵件。在最重要的部分中，信息被優(yōu)先安置在界面的頂端，兒其他如存檔、報(bào)告垃圾郵件和刪除等功能在安置在頁面的下端。我在使用手機(jī)版Gmail時(shí)，80%的情況下不使用這些功能，只是檢查和閱讀郵件。
Gmail手機(jī)版的成功之處在于郵件優(yōu)先，其他界面功能置后。
我第二個(gè)要用的就是Twitter，主要是查看我跟隨的人的最新信息，以及更新自己的信息。
Twitter的主頁可謂單刀直入（如圖）：狀態(tài)更新功能，緊接著是最新狀態(tài)信息，附帶一些簡(jiǎn)單的界面元素。
Twitter本來就是一個(gè)很簡(jiǎn)潔的應(yīng)用，就算是電腦版的功能也非常少，手機(jī)版的就更少了。Twitter手機(jī)應(yīng)用在基本系統(tǒng)交互功能上做的非常好，界面簡(jiǎn)潔，有兩個(gè)最主要的功能：狀態(tài)更新和feed瀏覽。與Gmail的使用方式不同點(diǎn)在于，我很多時(shí)候使用手機(jī)版Twitter是為了更新信息。因此，理所當(dāng)然地，狀態(tài)更新應(yīng)處于主屏幕的頂端，下面是feed。Feed的長(zhǎng)度一般都是20條最近更新的信息：這是一個(gè)很好的內(nèi)容處理策略，在手機(jī)上，點(diǎn)擊去往新頁面的成本要比滾動(dòng)查看的成本高得多。
Twitter的成功點(diǎn)在于：信息更新功能快速簡(jiǎn)便，還顯示朋友的信息內(nèi)容。
我每天用手機(jī)登陸Facebook是為了看看朋友、查看墻上的帖子以及發(fā)送接收Facebook郵件。
手機(jī)版Facebook優(yōu)先顯示的還是一些簡(jiǎn)單的功能和lists（菜單）。與Twitter類似，F(xiàn)acebook假設(shè)大部分手機(jī)用戶主要是為了更新信息。然后才是3條最新更新的信息、朋友請(qǐng)求和news feed items。再往下，才顯示墻上近幾天里朋友發(fā)布的帖子。
我覺得Facebook在一些關(guān)鍵功能的定位和強(qiáng)調(diào)顯示上做的很好，一些重要性稍次的功能得到了適當(dāng)?shù)慕导?jí)。
有趣的是，F(xiàn)acebook是為一個(gè)提供導(dǎo)航欄的。在處理眾多功能同時(shí)又要強(qiáng)調(diào)重要的功能時(shí)，導(dǎo)航欄確實(shí)是一個(gè)有用的、整潔的處理方式。
Facebook的成功點(diǎn)在于：選擇了用戶在“走”的時(shí)候最需要的功能，簡(jiǎn)潔的互動(dòng)界面提供了其他的次要功能。
小結(jié)1：
上述的三個(gè)應(yīng)用都有一個(gè)共同點(diǎn)：界面已經(jīng)精簡(jiǎn)到不能再精簡(jiǎn)了，保留了最重要的應(yīng)用功能。
這3個(gè)網(wǎng)站都是使用CSS，看起來都不普通，都在屏幕的頂端掛了彩色的Logo。Gmail有效地使用了顏色等分離信息，用帶顏色的links和背景有效地分割了信息內(nèi)容、郵件標(biāo)題和界面。Twitter則是簡(jiǎn)單地用顏色和直線劃分信息，同時(shí)顯示精簡(jiǎn)信息時(shí)間。Facebook采用了Twitter 的辦法將內(nèi)容與內(nèi)容、內(nèi)容與界面分隔開。
、邊框
所有這3個(gè)網(wǎng)站還提供完整版網(wǎng)站鏈接，這是我比較喜歡的一點(diǎn)。先進(jìn)點(diǎn)的手機(jī)瀏覽器完全支持完整版網(wǎng)站，就算有著Javascript和互動(dòng)行為。有時(shí)候，手機(jī)版是遠(yuǎn)遠(yuǎn)不夠的，提供完整版鏈接是必要的，盡管會(huì)感覺多余，但確實(shí)值得。
雖然這些都不是必須的，但是確實(shí)為用戶提供了一個(gè)很棒的使用感受。
·精簡(jiǎn)應(yīng)用，但保留最重要的功能
上述三個(gè)應(yīng)用都是值得效仿的，在手機(jī)版中這三個(gè)應(yīng)用都沒有提供全部功能。
Twitter手機(jī)版的一個(gè)重要的缺陷就是沒有“回復(fù)”功能，Twitter最重要的功能之一就是與線上朋友互動(dòng)交流，如果你不能看到誰回復(fù)你，你就無法參與到對(duì)話中。在我看來，“回復(fù)”功能的省略算是多余了。刪除與保留其實(shí)都講究平衡性。Google提出了一大堆個(gè)性化設(shè)置，“設(shè)置”頁面在手機(jī)界面上完全沒有。其實(shí)就是思考對(duì)于在“走”這一狀態(tài)的用戶，他最需要的最重要的會(huì)時(shí)時(shí)刻刻都用的功能是什么，哪些是偶爾會(huì)用的次要功能。就而言，這些次要功能，我在走得時(shí)候根本不會(huì)用。
最后要討論的是是否將網(wǎng)站默認(rèn)設(shè)置成自動(dòng)登錄至手機(jī)版。Twitter和Facebook都是設(shè)置成登錄到其電腦版（全版）網(wǎng)站。不過Gmail則是默認(rèn)登錄至手機(jī)版，不過提供轉(zhuǎn)至全版網(wǎng)站的選項(xiàng)。問題其實(shí)不在于默認(rèn)設(shè)置登錄到哪個(gè)版本的網(wǎng)站，比如我喜歡自動(dòng)登錄至手機(jī)版，但這也僅是我一個(gè)人的偏好。正如上面所說的，有些情況下，用戶需要更多的界面功能，所以要有一個(gè)全班網(wǎng)站的鏈接是非常有用必要的。
確定你的服務(wù)中最重要的部分。如果是新聞或博客等信息，那就讓你的訪問者最快地接觸到信息，如果是更新信息等行為，那么就讓他們快速地達(dá)到目的。
如果功能繁多，要盡可能地刪減。剔除一些額外的應(yīng)用，讓其集中在重要的應(yīng)用。如果一個(gè)用戶需要改變?cè)O(shè)置或者做大改動(dòng)，那他們可以有選項(xiàng)去使用電腦版。
不要節(jié)省頁面中的信息量。手機(jī)的屏幕雖然少，但如果信息內(nèi)容是相關(guān)的且連續(xù)的，那么滾屏比轉(zhuǎn)至新頁面體驗(yàn)要好。
提供轉(zhuǎn)至全版網(wǎng)站的方式。手機(jī)版網(wǎng)站不會(huì)具備全部的功能設(shè)置，雖然重新轉(zhuǎn)至全版網(wǎng)站的用戶成本要高，但是這個(gè)選項(xiàng)至少要有。
在我看來，成功的手機(jī)網(wǎng)站的設(shè)計(jì)秉持一個(gè)簡(jiǎn)明的原則：讓用戶快速地得到他們想知道的，最有效率地完成他們的行為，所有設(shè)置都能讓她們滿意。
由于手機(jī)設(shè)備屏幕尺寸不一，網(wǎng)站要支持每一個(gè)屏幕尺寸是不切實(shí)際的，這里我使用240X320作為目標(biāo)屏幕尺寸，因?yàn)閾?jù)Device Atlas Data Explorer的調(diào)查顯示，240X320在保持實(shí)用的同時(shí)，還能保證你的網(wǎng)站能夠在眾多手機(jī)設(shè)備上顯示正常。的確，240X320與桌面電腦屏幕相比真是太小了（參見下圖），幾乎是其十分之一，這也是值得注意的一點(diǎn)。
首先，用網(wǎng)站線框圖來勾勒出一個(gè)頁面所需要具備的東西。我要設(shè)計(jì)出電子商店的3個(gè)頁面：瀏覽頁面、搜索頁面以及物品查看頁面。
第一個(gè)就是瀏覽頁面，這是訪問者經(jīng)常點(diǎn)擊的頁面之一，通常由主頁鏈接過來，內(nèi)容通常是與一個(gè)主題或類目相關(guān)的次要內(nèi)容。與桌面電腦網(wǎng)站一樣，在手機(jī)網(wǎng)站上要具有廣告標(biāo)識(shí)是最劇本的，不過站的空間不要太多，在頁面頂端有一個(gè)簡(jiǎn)單的log就能起到很好的效果。
瀏覽頁面有著眾多的作用，比如導(dǎo)航功能，設(shè)計(jì)點(diǎn)簡(jiǎn)潔的導(dǎo)航告訴用戶所處的位置以及下一個(gè)位置是什么。然后是搜索框，之后是一些列單，圖片以及其他部分的鏈接。
主導(dǎo)航處于最低端。在手機(jī)網(wǎng)站上要把最重要的東西擺在優(yōu)先的位置，而額外的導(dǎo)航元素則應(yīng)該處于頁面底端。最后，還有一個(gè)瀏覽全版網(wǎng)站的選項(xiàng)，由于并不是每個(gè)人都必定使用手機(jī)版網(wǎng)站，又或者手機(jī)版網(wǎng)站的功能不齊全，所以這個(gè)選項(xiàng)還是很有用的。
然后就是搜索結(jié)果頁面的草圖。網(wǎng)絡(luò)商店最常用的一個(gè)功能就是搜索，所以這個(gè)頁面必須能夠有效地幫助用戶達(dá)到他們想找的頁面。頁面頂端是一些告訴用戶現(xiàn)在在哪個(gè)位置的簡(jiǎn)單信息，然后是搜索結(jié)果。額外的導(dǎo)航信息仍在最下面。
最終就是物品查看頁面。用戶在這頁面主要是為了重新查看商品的信息并把商品加入購(gòu)物車。先是物品圖片、價(jià)格以及關(guān)鍵性的“加入購(gòu)物車”選項(xiàng)，然后是商品信息全文，這幾個(gè)元素是最重要的，被優(yōu)先處理。搜索仍舊是相關(guān)有用的，不過被移到頁面的底端，因?yàn)樗皇亲钪匾摹?/p>
那么現(xiàn)在就是進(jìn)一步勾勒出這三個(gè)頁面的樣子了，更加直觀準(zhǔn)確地展現(xiàn)最終的網(wǎng)站是什么樣的。
瀏覽頁面（如上圖）：正如Twitter把信息更新功能放在最優(yōu)先的位置，我們把搜索擺在頂端，因?yàn)樗阉魇怯脩舻卿浘W(wǎng)店用的最多的功能。
搜索頁面（如上圖）：正如草圖所設(shè)計(jì)的，最重要的內(nèi)容是搜索結(jié)果，所以被放在最高位。設(shè)計(jì)的主線就是告訴客戶他們搜索到什么，有多少搜索結(jié)果，根據(jù)需要我們對(duì)這些內(nèi)容做了進(jìn)一步的簡(jiǎn)化。
上圖是物品瀏覽頁面，我們對(duì)頁面元素進(jìn)行了整理。Ok！網(wǎng)站框線圖設(shè)計(jì)就完成了！