網(wǎng)站建設(shè)移動端設(shè)計-信息架構(gòu)

發(fā)表日期：2015/8/5 17:07:23 文章編輯：瀏覽次數(shù)：2565

雖然這是一篇老文章，但是對剛?cè)胄械耐瑢W(xué)來說仍然非常重要，所以今天再次拿出來，進行了重新翻譯，希望對大家有幫助！

移動端設(shè)計——第一節(jié)：信息架構(gòu)

移動設(shè)備的種類影響著我們設(shè)計過程的方方面面。在本篇文章中（移動端設(shè)計系列文章第一節(jié)），Elaine McVicar將帶領(lǐng)大家探索幾個當(dāng)下最火爆的移動端網(wǎng)站及應(yīng)用架構(gòu)。

在1993年的某一天，我老爹帶回家了一臺巨大的磚頭手機。記得當(dāng)時我們都被這種高科技驚呆了，但誰也沒想到，這種高科技會在日后給我們的生活帶來如此巨大的影響。過了幾年，我的很多朋友都開始購買手機，不過那時的我還是覺得這不過是個噱頭而已。

而今天，世界上已經(jīng)有了60億手機用戶，也就是說，按一人一一部算，全世界人口的87%都有了手機。相比之下，全球只有不到30億人使用臺式機。

移動設(shè)備絕不是曇花一現(xiàn)，但其興起也給設(shè)計帶來了許許多多的新制約（和機會）。下面我們來看一下應(yīng)當(dāng)如何相應(yīng)地革新我們的設(shè)計方式。

移動設(shè)備的不同之處是什么？

關(guān)于移動端設(shè)計，我們首先要了解的是除了尺寸其還有哪些不同于傳統(tǒng)之處。移動設(shè)備的物理特性和規(guī)格產(chǎn)生出了不同的設(shè)計可容性及要求。移動設(shè)備更加輕便、易于攜帶，從而使用起來也就更方便。由此造成的對移動設(shè)備的頻繁使用，會讓我們對它們產(chǎn)生一種獨特的情感聯(lián)系。

物理特性與規(guī)格

大部分移動設(shè)備都采用觸摸屏，也就是讓用戶在簡單的界面元素之外依靠手勢來與設(shè)備進行交互?？紤]到移動設(shè)備的尺寸較小，我們有時候就會希望其內(nèi)容結(jié)構(gòu)更加簡單小巧。除此之外，移動設(shè)備的網(wǎng)絡(luò)帶寬和連接也存在限制，因此就要求設(shè)計針對加載時間進行適當(dāng)?shù)膬?yōu)化，也就是說要盡量減少數(shù)據(jù)需求。

何時何地如何做

大家一般都會把移動設(shè)備帶在身邊，所以對其使用也就相對來說比較頻繁。比方說在公交地鐵上、在路上或者看電視時，我們都可以隨時使用。換句話說，我們一般都是在干著其他事的時候“順便”使用。這樣一來，移動設(shè)備的使用就會受到視覺條件的限制，或者存在著諸多分散人注意力的因素。

我們的行為與感覺

最后一點，在使用移動設(shè)備時我們有著各自不同的態(tài)度、行為和主次順序。用戶體驗設(shè)計公司Foolproof在其Going Mobile 2012調(diào)研中發(fā)現(xiàn)，移動設(shè)備給我們帶來了一種全新的自由和控制感。進而，有的用戶就會對自己的移動設(shè)備產(chǎn)生出實實在在的情感。Foolproof還發(fā)現(xiàn)，有63%的人在發(fā)現(xiàn)自己的智能手機沒放在能輕松拿到的地方時會覺得不爽。他們將移動設(shè)備看作是“有生命的”…是自己身體和人格的一個延伸。

移動設(shè)備已經(jīng)從本質(zhì)上改變了用戶的心理預(yù)期，因此，我們作為設(shè)計師就務(wù)求遵循以用戶為核心的流程來打造各項解決方案。這里唯一的問題就是我們傳統(tǒng)的最佳實踐可能就不那么好用了。

移動對設(shè)計師的影響

移動設(shè)備的獨特性直接影響著以用戶為中心設(shè)計流程的各個方面：從用戶調(diào)查到最終開發(fā)再到測試等等。而流程中受影響最大的部分之一就是我們的交付方式以及信息架構(gòu)。

移動端呈現(xiàn)方式

有別于傳統(tǒng)網(wǎng)站，移動端的呈現(xiàn)方式比較流行的有四種。使用瀏覽器查看內(nèi)容的移動用戶最愛的是專門針對移動設(shè)備的網(wǎng)站（針對移動設(shè)備特別優(yōu)化）或響應(yīng)式網(wǎng)站（可針對移動設(shè)備調(diào)整顯示方向或重新布局）。而通過安裝應(yīng)用瀏覽內(nèi)容的用戶則一般會選擇本機應(yīng)用或混合型應(yīng)用。本機應(yīng)用通常功能完備：應(yīng)用的所有界面都經(jīng)過預(yù)先的規(guī)劃?；旌闲蛻?yīng)用則比較靈活一些，其可通過web加載內(nèi)容（因為需要通過瀏覽器查看），但最后通過類似應(yīng)用的界面（或Chrome）進行呈現(xiàn)。

上面每種呈現(xiàn)方式都有著自己的優(yōu)劣之處。所以大家需要根據(jù)項目的設(shè)計背景相應(yīng)進行選擇。（下表中星數(shù)越多表示越好）

移動端信息架構(gòu)

移動設(shè)備也有自己的一套信息架構(gòu)模式。雖然響應(yīng)式站點的結(jié)構(gòu)可以采用“標(biāo)準(zhǔn)”模式，但是，以本機應(yīng)用為例，其通常會采用基于標(biāo)簽的導(dǎo)航式結(jié)構(gòu)。再次強調(diào)，移動站點或應(yīng)用的架構(gòu)并沒有一定之規(guī)。比如下面這些比較熱門的模式：分層結(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īng)式網(wǎng)站，可能這是唯一可用的模式了，不過你也可以自己構(gòu)思其他模式來針對移動端量身定制用戶體驗。

Luke Wroblewski的“移動為先”方法可以幫助我們將注意力先集中到關(guān)鍵的內(nèi)容上，例如有助于打造優(yōu)秀用戶體驗的功能及用戶旅程等。

適合于

組織需要遵循臺式機網(wǎng)站結(jié)構(gòu)的復(fù)雜型網(wǎng)站結(jié)構(gòu)。

要注意

導(dǎo)航。多層面導(dǎo)航結(jié)構(gòu)容易給使用小屏幕的用戶帶來問題。

軸輻式結(jié)構(gòu)

軸輻式結(jié)構(gòu)可讓用戶通過中央索引向外導(dǎo)航。這是iPhone默認采用的模式。用戶不能在各個“輻條”之間進行導(dǎo)航切換，只能先回到軸心再出去。這個方式在歷史上一直用于工作流程存在限制（通常是表單或購買流程等技術(shù)限制）的臺式機情況，但其現(xiàn)在也開始逐漸流行到了移動端，因為在移動端用戶往往需要專注于單項任務(wù)，另外設(shè)備的形狀因素也造成全局導(dǎo)航使用比較不便。

適合于

每個功能都有自己內(nèi)部導(dǎo)航和用途的多功能工具。

要注意

需要執(zhí)行多任務(wù)的用戶

套娃結(jié)構(gòu)

套娃結(jié)構(gòu)模式能夠以相對線性的方式引領(lǐng)用戶查看細節(jié)內(nèi)容。當(dāng)用戶身處環(huán)境不便時，這種導(dǎo)航方式相對比較快捷簡單。其簡單的前后推進模式還能讓用戶清楚明確地知道自己目前在內(nèi)容結(jié)構(gòu)的什么位置。

適合于

主題單一或彼此相近的應(yīng)用或網(wǎng)站。也可用作其他模式的子模式，例如標(biāo)準(zhǔn)分層結(jié)構(gòu)或軸輻式結(jié)構(gòu)模式。

要注意

用戶無法快速在不同板塊直接切換，所以要考慮其適用性，不能成為對內(nèi)容探索的障礙。

標(biāo)簽視圖

這是普通應(yīng)用用戶比較熟悉的模式之一。其實際上就是通過工具欄菜單把一系列板塊綁在一起。這種方式可以方便用戶在首次打開時快速瀏覽并理解應(yīng)用的全部功能。

適合于

主題類似的工具類應(yīng)用。多任務(wù)。

要注意

不要做的太復(fù)雜。這一模式最適合于簡單的內(nèi)容結(jié)構(gòu)。

便當(dāng)盒/儀表盤

便當(dāng)盒或者叫儀表板模式可以通過使用組件形式展示相關(guān)工具或內(nèi)容的不同部分將詳細具體的內(nèi)容直接呈現(xiàn)到索引屏幕上。這一模式比較復(fù)雜，因此更適合于平板電腦。其可以讓用戶一眼發(fā)現(xiàn)關(guān)鍵信息，因此功效強大。但是這種模式同時也嚴重依賴于設(shè)計界面的優(yōu)劣以及信息呈現(xiàn)是否明確。

適合于

主題類似的多功能工具和基于內(nèi)容的平板電腦應(yīng)用。

要注意

平板電腦的屏幕較大，因此能夠留出更大的空間發(fā)揮這一模式。但設(shè)計時尤其要注意理解用戶與各部分內(nèi)容之間進行交互的方式，以便確保應(yīng)用的簡便和樂趣性。