移動設備的種類影響著我們設計過程的方方面面。在本篇文章中（移動端設計系列文章第一節(jié)），Elaine McVicar將帶領大家探索幾個當下最火爆的移動端網(wǎng)站及應用架構。在1993年的某一天，我老爹帶回家了一臺巨大的磚頭手機。記得當時我們都被這種高科技驚呆了，但誰也沒想到，這種高科技會在日后給我們的生活帶來如此巨大的影響。過了幾年，我的很多朋友都開始購買手機，不過那時的我還是覺得這不過是個噱頭而已。而今天，世界上已經(jīng)有了60億手機用戶，也就是說，按一人一一部算，全世界人口的87%都有了手機。相比之下，全球只有不到30億人使用臺式機。移動設備絕不是曇花一現(xiàn)，但其興起也給設計帶來了許許多多的新制約（和機會）。下面我們來看一下應當如何相應地革新我們的設計方式。移動設備的不同之處是什么？

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

物理特性與規(guī)格

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

何時何地如何做

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

我們的行為與感覺

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

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

移動對設計師的影響

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

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

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

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

移動端信息架構

移動設備也有自己的一套信息架構模式。雖然響應式站點的結(jié)構可以采用“標準”模式，但是，以本機應用為例，其通常會采用基于標簽的導航式結(jié)構。再次強調(diào)，移動站點或應用的架構并沒有一定之規(guī)。比如下面這些比較熱門的模式：分層結(jié)構、軸輻式結(jié)構、套娃結(jié)構、標簽視圖、便當盒結(jié)構及篩選視圖結(jié)構：

分層結(jié)構

分層結(jié)構模式是一種比較標準的網(wǎng)站結(jié)構，其擁有索引頁及一系列子頁。對于響應式網(wǎng)站，可能這是唯一可用的模式了，不過你也可以自己構思其他模式來針對移動端量身定制用戶體驗。

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

適合于

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

要注意

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

軸輻式結(jié)構

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

適合于

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

要注意

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

套娃結(jié)構

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

適合于

主題單一或彼此相近的應用或網(wǎng)站。也可用作其他模式的子模式，例如標準分層結(jié)構或軸輻式結(jié)構模式。

要注意

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

標簽視圖

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

適合于

主題類似的工具類應用。多任務。

要注意

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

便當盒/儀表盤

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

適合于

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

要注意

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

篩選視圖

最后，篩選視圖模式可以讓用戶通過選擇篩選器選項形成分類視圖以便在系列數(shù)據(jù)中進行導航。篩選以及分類搜索方法的使用是方便用戶以自己喜愛的方式探索內(nèi)容的好辦法。

適合于

內(nèi)容量大的應用或網(wǎng)站，例如文章、圖片和視頻類網(wǎng)站?？梢杂米鲭s志類應用或網(wǎng)站的模板，或者用作其他導航模式的子模式。

要注意

移動端?？紤]到復雜性問題，篩選器和分類搜索在比較小的屏幕上顯示時可能會有困難。

后續(xù)

距離我第一次看見搬磚機的時間已經(jīng)過去將近20年了（我買自己的第一部手機也是12年前的事了）?，F(xiàn)在，我，我老爹和幾乎我認識的人都用上了智能手機，我們幾乎天天或者說隨時都在使用它們?？萍嫉娜招略庐愐笪覀円惨粩噙m應，不斷隨之改變。

開發(fā)出適合于手機和平板電腦的信息架構只是打造優(yōu)秀移動用戶體驗的第一步。在本系列的第2節(jié)-設計注意事項中，我將說明移動與傳統(tǒng)之間的種種差別對最終設計解決方案的出爐會存在哪些影響。