“良好的交互設(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)站。
我在去年購買了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的長度一般都是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)航信息仍在最下面。
最終就是物品查看頁面。用戶在這頁面主要是為了重新查看商品的信息并把商品加入購物車。先是物品圖片、價(jià)格以及關(guān)鍵性的“加入購物車”選項(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ì)就完成了!