移動(dòng)設(shè)備的種類影響著我們?cè)O(shè)計(jì)過(guò)程的方方面面。在本篇文章中(移動(dòng)端設(shè)計(jì)系列文章第一節(jié)),Elaine McVicar將帶領(lǐng)大家探索幾個(gè)當(dāng)下最火爆的移動(dòng)端網(wǎng)站及應(yīng)用架構(gòu)。在1993年的某一天,我老爹帶回家了一臺(tái)巨大的磚頭手機(jī)。記得當(dāng)時(shí)我們都被這種高科技驚呆了,但誰(shuí)也沒(méi)想到,這種高科技會(huì)在日后給我們的生活帶來(lái)如此巨大的影響。過(guò)了幾年,我的很多朋友都開(kāi)始購(gòu)買(mǎi)手機(jī),不過(guò)那時(shí)的我還是覺(jué)得這不過(guò)是個(gè)噱頭而已。而今天,世界上已經(jīng)有了60億手機(jī)用戶,也就是說(shuō),按一人一一部算,全世界人口的87%都有了手機(jī)。相比之下,全球只有不到30億人使用臺(tái)式機(jī)。移動(dòng)設(shè)備絕不是曇花一現(xiàn),但其興起也給設(shè)計(jì)帶來(lái)了許許多多的新制約(和機(jī)會(huì))。下面我們來(lái)看一下應(yīng)當(dāng)如何相應(yīng)地革新我們的設(shè)計(jì)方式。移動(dòng)設(shè)備的不同之處是什么?
關(guān)于移動(dòng)端設(shè)計(jì),我們首先要了解的是除了尺寸其還有哪些不同于傳統(tǒng)之處。移動(dòng)設(shè)備的物理特性和規(guī)格產(chǎn)生出了不同的設(shè)計(jì)可容性及要求。移動(dòng)設(shè)備更加輕便、易于攜帶,從而使用起來(lái)也就更方便。由此造成的對(duì)移動(dòng)設(shè)備的頻繁使用,會(huì)讓我們對(duì)它們產(chǎn)生一種獨(dú)特的情感聯(lián)系。
物理特性與規(guī)格
大部分移動(dòng)設(shè)備都采用觸摸屏,也就是讓用戶在簡(jiǎn)單的界面元素之外依靠手勢(shì)來(lái)與設(shè)備進(jìn)行交互??紤]到移動(dòng)設(shè)備的尺寸較小,我們有時(shí)候就會(huì)希望其內(nèi)容結(jié)構(gòu)更加簡(jiǎn)單小巧。除此之外,移動(dòng)設(shè)備的網(wǎng)絡(luò)帶寬和連接也存在限制,因此就要求設(shè)計(jì)針對(duì)加載時(shí)間進(jìn)行適當(dāng)?shù)膬?yōu)化,也就是說(shuō)要盡量減少數(shù)據(jù)需求。
何時(shí)何地如何做
大家一般都會(huì)把移動(dòng)設(shè)備帶在身邊,所以對(duì)其使用也就相對(duì)來(lái)說(shuō)比較頻繁。比方說(shuō)在公交地鐵上、在路上或者看電視時(shí),我們都可以隨時(shí)使用。換句話說(shuō),我們一般都是在干著其他事的時(shí)候“順便”使用。這樣一來(lái),移動(dòng)設(shè)備的使用就會(huì)受到視覺(jué)條件的限制,或者存在著諸多分散人注意力的因素。
我們的行為與感覺(jué)
最后一點(diǎn),在使用移動(dòng)設(shè)備時(shí)我們有著各自不同的態(tài)度、行為和主次順序。用戶體驗(yàn)設(shè)計(jì)公司Foolproof在其Going Mobile 2012調(diào)研中發(fā)現(xiàn),移動(dòng)設(shè)備給我們帶來(lái)了一種全新的自由和控制感。進(jìn)而,有的用戶就會(huì)對(duì)自己的移動(dòng)設(shè)備產(chǎn)生出實(shí)實(shí)在在的情感。Foolproof還發(fā)現(xiàn),有63%的人在發(fā)現(xiàn)自己的智能手機(jī)沒(méi)放在能輕松拿到的地方時(shí)會(huì)覺(jué)得不爽。他們將移動(dòng)設(shè)備看作是“有生命的”…是自己身體和人格的一個(gè)延伸。
移動(dòng)設(shè)備已經(jīng)從本質(zhì)上改變了用戶的心理預(yù)期,因此,我們作為設(shè)計(jì)師就務(wù)求遵循以用戶為核心的流程來(lái)打造各項(xiàng)解決方案。這里唯一的問(wèn)題就是我們傳統(tǒng)的最佳實(shí)踐可能就不那么好用了。
移動(dòng)對(duì)設(shè)計(jì)師的影響
移動(dòng)設(shè)備的獨(dú)特性直接影響著以用戶為中心設(shè)計(jì)流程的各個(gè)方面:從用戶調(diào)查到最終開(kāi)發(fā)再到測(cè)試等等。而流程中受影響最大的部分之一就是我們的交付方式以及信息架構(gòu)。
移動(dòng)端呈現(xiàn)方式
有別于傳統(tǒng)網(wǎng)站,移動(dòng)端的呈現(xiàn)方式比較流行的有四種。使用瀏覽器查看內(nèi)容的移動(dòng)用戶最愛(ài)的是專門(mén)針對(duì)移動(dòng)設(shè)備的網(wǎng)站(針對(duì)移動(dòng)設(shè)備特別優(yōu)化)或響應(yīng)式網(wǎng)站(可針對(duì)移動(dòng)設(shè)備調(diào)整顯示方向或重新布局)。而通過(guò)安裝應(yīng)用瀏覽內(nèi)容的用戶則一般會(huì)選擇本機(jī)應(yīng)用或混合型應(yīng)用。本機(jī)應(yīng)用通常功能完備:應(yīng)用的所有界面都經(jīng)過(guò)預(yù)先的規(guī)劃?;旌闲蛻?yīng)用則比較靈活一些,其可通過(guò)web加載內(nèi)容(因?yàn)樾枰ㄟ^(guò)瀏覽器查看),但最后通過(guò)類似應(yīng)用的界面(或Chrome)進(jìn)行呈現(xiàn)。
上面每種呈現(xiàn)方式都有著自己的優(yōu)劣之處。所以大家需要根據(jù)項(xiàng)目的設(shè)計(jì)背景相應(yīng)進(jìn)行選擇。(下表中星數(shù)越多表示越好)
移動(dòng)端信息架構(gòu)
移動(dòng)設(shè)備也有自己的一套信息架構(gòu)模式。雖然響應(yīng)式站點(diǎn)的結(jié)構(gòu)可以采用“標(biāo)準(zhǔn)”模式,但是,以本機(jī)應(yīng)用為例,其通常會(huì)采用基于標(biāo)簽的導(dǎo)航式結(jié)構(gòu)。再次強(qiáng)調(diào),移動(dòng)站點(diǎn)或應(yīng)用的架構(gòu)并沒(méi)有一定之規(guī)。比如下面這些比較熱門(mén)的模式:分層結(jié)構(gòu)、軸輻式結(jié)構(gòu)、套娃結(jié)構(gòu)、標(biāo)簽視圖、便當(dāng)盒結(jié)構(gòu)及篩選視圖結(jié)構(gòu):
分層結(jié)構(gòu)
分層結(jié)構(gòu)模式是一種比較標(biāo)準(zhǔn)的網(wǎng)站結(jié)構(gòu),其擁有索引頁(yè)及一系列子頁(yè)。對(duì)于響應(yīng)式網(wǎng)站,可能這是唯一可用的模式了,不過(guò)你也可以自己構(gòu)思其他模式來(lái)針對(duì)移動(dòng)端量身定制用戶體驗(yàn)。
Luke Wroblewski的“移動(dòng)為先”方法可以幫助我們將注意力先集中到關(guān)鍵的內(nèi)容上,例如有助于打造優(yōu)秀用戶體驗(yàn)的功能及用戶旅程等。
適合于
組織需要遵循臺(tái)式機(jī)網(wǎng)站結(jié)構(gòu)的復(fù)雜型網(wǎng)站結(jié)構(gòu)。
要注意
導(dǎo)航。多層面導(dǎo)航結(jié)構(gòu)容易給使用小屏幕的用戶帶來(lái)問(wèn)題。
軸輻式結(jié)構(gòu)
軸輻式結(jié)構(gòu)可讓用戶通過(guò)中央索引向外導(dǎo)航。這是iPhone默認(rèn)采用的模式。用戶不能在各個(gè)“輻條”之間進(jìn)行導(dǎo)航切換,只能先回到軸心再出去。這個(gè)方式在歷史上一直用于工作流程存在限制(通常是表單或購(gòu)買(mǎi)流程等技術(shù)限制)的臺(tái)式機(jī)情況,但其現(xiàn)在也開(kāi)始逐漸流行到了移動(dòng)端,因?yàn)樵谝苿?dòng)端用戶往往需要專注于單項(xiàng)任務(wù),另外設(shè)備的形狀因素也造成全局導(dǎo)航使用比較不便。
適合于
每個(gè)功能都有自己內(nèi)部導(dǎo)航和用途的多功能工具。
要注意
需要執(zhí)行多任務(wù)的用戶
套娃結(jié)構(gòu)
套娃結(jié)構(gòu)模式能夠以相對(duì)線性的方式引領(lǐng)用戶查看細(xì)節(jié)內(nèi)容。當(dāng)用戶身處環(huán)境不便時(shí),這種導(dǎo)航方式相對(duì)比較快捷簡(jiǎn)單。其簡(jiǎn)單的前后推進(jìn)模式還能讓用戶清楚明確地知道自己目前在內(nèi)容結(jié)構(gòu)的什么位置。
適合于
主題單一或彼此相近的應(yīng)用或網(wǎng)站。也可用作其他模式的子模式,例如標(biāo)準(zhǔn)分層結(jié)構(gòu)或軸輻式結(jié)構(gòu)模式。
要注意
用戶無(wú)法快速在不同板塊直接切換,所以要考慮其適用性,不能成為對(duì)內(nèi)容探索的障礙。
標(biāo)簽視圖
這是普通應(yīng)用用戶比較熟悉的模式之一。其實(shí)際上就是通過(guò)工具欄菜單把一系列板塊綁在一起。這種方式可以方便用戶在首次打開(kāi)時(shí)快速瀏覽并理解應(yīng)用的全部功能。
適合于
主題類似的工具類應(yīng)用。多任務(wù)。
要注意
不要做的太復(fù)雜。這一模式最適合于簡(jiǎn)單的內(nèi)容結(jié)構(gòu)。
便當(dāng)盒/儀表盤(pán)
便當(dāng)盒或者叫儀表板模式可以通過(guò)使用組件形式展示相關(guān)工具或內(nèi)容的不同部分將詳細(xì)具體的內(nèi)容直接呈現(xiàn)到索引屏幕上。這一模式比較復(fù)雜,因此更適合于平板電腦。其可以讓用戶一眼發(fā)現(xiàn)關(guān)鍵信息,因此功效強(qiáng)大。但是這種模式同時(shí)也嚴(yán)重依賴于設(shè)計(jì)界面的優(yōu)劣以及信息呈現(xiàn)是否明確。
適合于
主題類似的多功能工具和基于內(nèi)容的平板電腦應(yīng)用。
要注意
平板電腦的屏幕較大,因此能夠留出更大的空間發(fā)揮這一模式。但設(shè)計(jì)時(shí)尤其要注意理解用戶與各部分內(nèi)容之間進(jìn)行交互的方式,以便確保應(yīng)用的簡(jiǎn)便和樂(lè)趣性。
篩選視圖
最后,篩選視圖模式可以讓用戶通過(guò)選擇篩選器選項(xiàng)形成分類視圖以便在系列數(shù)據(jù)中進(jìn)行導(dǎo)航。篩選以及分類搜索方法的使用是方便用戶以自己喜愛(ài)的方式探索內(nèi)容的好辦法。
適合于
內(nèi)容量大的應(yīng)用或網(wǎng)站,例如文章、圖片和視頻類網(wǎng)站??梢杂米鲭s志類應(yīng)用或網(wǎng)站的模板,或者用作其他導(dǎo)航模式的子模式。
要注意
移動(dòng)端??紤]到復(fù)雜性問(wèn)題,篩選器和分類搜索在比較小的屏幕上顯示時(shí)可能會(huì)有困難。
后續(xù)
距離我第一次看見(jiàn)搬磚機(jī)的時(shí)間已經(jīng)過(guò)去將近20年了(我買(mǎi)自己的第一部手機(jī)也是12年前的事了)?,F(xiàn)在,我,我老爹和幾乎我認(rèn)識(shí)的人都用上了智能手機(jī),我們幾乎天天或者說(shuō)隨時(shí)都在使用它們??萍嫉娜招略庐愐笪覀円惨粩噙m應(yīng),不斷隨之改變。
開(kāi)發(fā)出適合于手機(jī)和平板電腦的信息架構(gòu)只是打造優(yōu)秀移動(dòng)用戶體驗(yàn)的第一步。在本系列的第2節(jié)-設(shè)計(jì)注意事項(xiàng)中,我將說(shuō)明移動(dòng)與傳統(tǒng)之間的種種差別對(duì)最終設(shè)計(jì)解決方案的出爐會(huì)存在哪些影響。
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)