我在上一篇文章中（詳情見《UI設計師面臨的問題—如何改版提升產品？》）提到，改版提升產品并不是只簡單從表現層，即視覺層面改版就可以提升產品的。從產品視覺層面進行改版，只是提升產品體驗的一部分。那么既然改版產品，那就想讓產品整體表現更好，視覺層面改版只是提升了視覺層面的體驗。正如我之前舉的例子，視覺設計師好似產品的美妝師，更多的職責是把產品的界面包裝的更好看。并未動產品的“骨架”，還記得上一篇文章中的那個例子嗎？一個女生身高150cm，體重140斤，無論你再怎么怎么化妝，臉蛋再怎么好看也能改變她內部骨架對她的的限制。

之前也提到產品的用戶體驗要素包括五個層面：表現層、框架層、結構層、范圍層、戰略層。既然提升產品，那么必然這五個層面必不可少。那么又由于這五個層的關系是這樣的：每個層面都是根據它下面的那個層面來決定的。所以，表現層由框架層決定，框架則建立在結構層的基礎上，結構層的設計基于范圍層，范圍層是根據戰略層來制定。這種依賴性，意味著在戰略層上的決定將具有某種自下而上的的“連鎖效應”。

那作為視覺設計師的我們，一般被應聘到公司，產品所要研發基本功能已經確定，不然我想公司也不會招聘視覺設計師。而產品的基本功已經由這個公司高層即決策者已經確定。那么也就是說產品的「戰略成」和「范圍層」（產品所包含的最功能）基本已經確定。那么作為視覺設計師的我們要想優化產品，那必然要把精力放在產品的其他層面，即：「結構層」、「框架層」和「表現層」。因為產品的另外兩個層面「戰略層」、「范圍層」已經由公司高層確定。

既然『戰略層』和『范圍層』我們幾乎無法改變，那我們就應該把改版軟件的重點放在后面三個層面上。又由于產品的下一層決定上一層，那么我們若是想改版產品那就要從，產品的『結構層』入手。

產品的結構層：結構層是五個層面的第三層，用來設計用戶如何到達某個頁面，并且在他們做完事情之后去到某個地方。它也適當的將我們關注點從抽象的決策層（戰略層）和范圍層的問題上，轉移到更能影響最后的用戶體驗的具體因素。那么移動端的信息架構有哪幾種方式呢？下面我也總結了下，并分開闡述：

移動端信息架構
移動設備也有自己的一套信息架構模式。但是移動站點或應用的架構并沒有一定之規。比如下面這些比較熱門常用的模式：分層結構、軸輻式結構、套娃結構、標簽視圖、便當盒結構及篩選視圖結構。那我們一一舉例分析他們各個的利弊。

1.分層結構

1.png

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

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

適合于
組織需要遵循臺式機網站結構的復雜型網站結構。

要注意的問題
導航。多層面導航結構容易給使用小屏幕的用戶帶來問題。

2.軸輻式結構軸輻式結構

2.png

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

適合于
每個功能都有自己內部導航和用途的多功能工具。

要注意
需要執行多任務的用戶

3.套娃結構

3.png

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

適合于
主題單一或彼此相近的應用或網站。也可用作其他模式的子模式，例如標準分層結構或軸輻式結構模式。

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

4.標簽視圖

4.png

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

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

要注意
不要做的太復雜。這一模式最適合于簡單的內容結構。

5.便當盒/儀表盤

5.png

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

適合于
主題類似的多功能工具和基于內容的平板電腦應用。

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

6.篩選視圖

6.png

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

適合于
內容量大的應用或網站，例如文章、圖片和視頻類網站。可以用做雜志類應用或網站的模板，或者用作其他導航模式的子模式。

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

最后：
開發出適合于手機和平板電腦的信息架構只是打造優秀移動用戶體驗的第一步。上面列舉的這六種，關于「結構層」的布局方式，只是現在最常用的的布局方式，在一個軟件里 可能會兼具了好幾種架構的布局方式。由于每個產品行業特性和屬性的不同，并不能一概而論，給一個具體的架構方式。具體采取那種結構層的布局方式，還需根據你的產品具體應用。萬變不離其宗，了解每一種架構的優、劣點，再結合產品的具體內容、行業、等特性，作出適合自己產品結構層布局的產品。

這是我簡單梳理的結構層的布局，希望這些能在你完善產品的路上幫到你。