引言：此文是近期途牛UED內(nèi)部紛享會(huì)的一次設(shè)計(jì)師演講主題，有感于近期做的一些B端項(xiàng)目，設(shè)計(jì)師對信息結(jié)構(gòu)的一些想法...不足之處還請大家交流指導(dǎo).

有的時(shí)候我們在做項(xiàng)目的過程中經(jīng)常會(huì)遇到以下兩個(gè)問題：

1、為什么剛線上的界面短時(shí)間內(nèi)需要大改，有時(shí)甚至是推翻了重來？

2、為什么總感覺原型有什么不舒服的地方？

這時(shí)候很有可能是頁面的信息架構(gòu)出現(xiàn)了問題！

任何產(chǎn)品都有信息結(jié)構(gòu)，簡單或復(fù)雜...信息架構(gòu)是產(chǎn)品的骨骼.

下面我們從兩種維度來解析下信息架構(gòu)的層次：

一、輕重緯度

此維度是從產(chǎn)品架構(gòu)的輕重來劃分的，一般的對To C重體驗(yàn)的服務(wù)性APP都是輕架構(gòu)，對ToB重功能的基本是重架構(gòu)。

輕架構(gòu)的產(chǎn)品簡單明了，并不給用戶帶來太多的學(xué)習(xí)成本，可用且效率高，優(yōu)點(diǎn)是輕松愉悅，能被用戶共感感知；而重架構(gòu)的產(chǎn)品則較為嚴(yán)謹(jǐn)，有一定的學(xué)習(xí)成本，用戶群體較為聚焦，優(yōu)點(diǎn)是交互結(jié)構(gòu)完整，缺點(diǎn)是設(shè)計(jì)師對全局的把握度需要增高。

二、導(dǎo)向緯度

此維度的分類依據(jù)是用戶的使用場景，以及用戶使用目的。

主要分為任務(wù)導(dǎo)向型及瀏覽導(dǎo)向型：

任務(wù)導(dǎo)向型的產(chǎn)品，如我們的ToB產(chǎn)品招客寶業(yè)務(wù)，對于快速完成任務(wù)的訴求較高，如果在此過程中用戶需要靠瀏覽、靠猜來使用產(chǎn)品特性完成任務(wù)，必然會(huì)引起用戶的反感，繼而降低產(chǎn)品的使用率。

瀏覽導(dǎo)向型的產(chǎn)品，如蝦米音樂、微信這類ToC產(chǎn)品如果不是任務(wù)導(dǎo)向，那很有可能就是用戶在無聊，需要時(shí)才會(huì)進(jìn)入瀏覽，使用的場景較為碎片化，因而對于內(nèi)容的豐富度要求則會(huì)相對變高。

下面，是前段時(shí)間為公司廣告競價(jià)平臺(tái)——招客寶的設(shè)計(jì)經(jīng)歷，來詳細(xì)描述一樣如何組織信息，如何設(shè)計(jì)信息架構(gòu)？

招客寶業(yè)務(wù)是途牛今年新推出的廣告位推廣平臺(tái)，其目標(biāo)用戶主要針對產(chǎn)品經(jīng)理或供應(yīng)商。前期我們通過功能分類，對內(nèi)容進(jìn)行信息分組，了解用戶動(dòng)線，歸納出相對獨(dú)立的3個(gè)信息單元即：競拍、上架、推廣。

如何梳理這三個(gè)模塊的架構(gòu)？這其中的方法論既有有從上到下的（決策型功能梳理），也有從下到上（內(nèi)容整合型功能梳理）。在實(shí)際的項(xiàng)目過程中，兩種方法一般都是結(jié)合在一起使用的，既有老板一拍腦袋決定的功能，也有用戶調(diào)研畫像后產(chǎn)生的功能，具體放在什么位置，和產(chǎn)品業(yè)務(wù)的邏輯流程有關(guān)。

下面是我們簡單的羅列做招客寶的流程：

Step1. 信息架構(gòu)流程梳理

繪制主流程其實(shí)在后臺(tái)設(shè)計(jì)中不可或缺，因?yàn)橐粋€(gè)好用的后臺(tái)，必須有良好的信息反饋機(jī)制，如果設(shè)計(jì)者不摸清用戶的使用流程，哪里出錯(cuò)應(yīng)該有提醒，哪里應(yīng)該跳出說明提示這些交互就無法完成，所以，在設(shè)計(jì)后臺(tái)的時(shí)候和產(chǎn)品經(jīng)理詳細(xì)確定了每個(gè)步驟的流程。

招客寶產(chǎn)品作為一個(gè)重架構(gòu)任務(wù)導(dǎo)向型的產(chǎn)品，用戶角色的專業(yè)度較高，他們往往有著明確的目的來尋找自己想要的功能模塊，所以如何高效的完成操作任務(wù)是我們需要關(guān)注的問題。

Step2. 視覺布局

而當(dāng)信息結(jié)構(gòu)劃分完成，接下來就是視覺布局的事了。

1）視覺動(dòng)線引導(dǎo)

首頁我們根據(jù)框架體系繪制出首頁的草圖（左圖），其次，搭建960柵格系統(tǒng)確定每個(gè)模塊的位置、大?。ㄓ覉D）。在設(shè)計(jì)模塊功能性布局的時(shí)候，我們依據(jù)視覺動(dòng)線的原則從左到右，從上到下的原則，劃分功能模塊的主次。

下圖為不同的視覺動(dòng)線適合不同分類的網(wǎng)頁布局，主流的觀點(diǎn)一般F型布局適合內(nèi)容為主的網(wǎng)頁，比如之前做過的評價(jià)頁等；

而Z型布局比較適合這種不以文本為中心的網(wǎng)頁（比如這個(gè)項(xiàng)目的首頁）。

視覺動(dòng)線tips：1. 用戶不讀取整個(gè)頁面，他們只是掃描  2.頭兩段／標(biāo)題應(yīng)傳達(dá)最重要的信息。

2）簡化表單操作

而對于招客寶這類對于表單依賴度更高的B端產(chǎn)品，表單在整體的設(shè)計(jì)中也是不可或缺的。

在之前的項(xiàng)目中，我們或多或少都接觸過表單的設(shè)計(jì)，一個(gè)好的表單應(yīng)該盡量減少很多惹眼的視覺化元素，因?yàn)檫@樣會(huì)妨礙用戶對表單所提問題的理解，所以在此次項(xiàng)目設(shè)計(jì)中，我們建議每頁只做一件事。

16年我們在設(shè)計(jì)笛風(fēng)分銷平臺(tái)的APP設(shè)計(jì)工作中，涉及到了設(shè)計(jì)一個(gè)計(jì)算表單，這是一個(gè)核對表單類型組合而成的一個(gè)多步驟表單，（下圖一）將選擇團(tuán)期，出游價(jià)格人數(shù)都收在一個(gè)彈出頁面的手風(fēng)琴面板中，（下圖2）是一個(gè)長頁面包括了團(tuán)期詳情，價(jià)格&優(yōu)惠、聯(lián)系人信息、游客信息等模塊，這樣的長表單一旦用戶填錯(cuò)了數(shù)據(jù)很難發(fā)現(xiàn)，修改也很苦難，因此分拆成幾步會(huì)是個(gè)不錯(cuò)的方法。

所以實(shí)際在應(yīng)用到招客寶平臺(tái)的設(shè)計(jì)時(shí)遇到一個(gè)登錄的場景。由于招客寶的用戶較為特殊，需要增加了用戶選擇身份的過程；在一開始的原型中，項(xiàng)目經(jīng)理本打算將兩種身份登錄做在一個(gè)界面中，然而身份1產(chǎn)品經(jīng)理用的是用戶名和密碼登錄，而身份2供應(yīng)商則鏈接到NBooking的登錄頁登錄，這是兩個(gè)完全不同的交互模式。在這個(gè)登錄表單中應(yīng)該只包括少量的信息輸入：用戶名、密碼、操作按鈕、密碼幫助等選項(xiàng)。經(jīng)過討論，簡化操作流程，最終決定將登錄分為兩步：第一步只解決身份識(shí)別，第二步再根據(jù)身份的不同選擇不同的登錄頁。

（圖2為產(chǎn)品經(jīng)理登錄的界面）

（表單設(shè)計(jì)中的操作優(yōu)化）

Step3. 搭建規(guī)范

在界面設(shè)計(jì)完成后及時(shí)將界面中的控件提取出來制成組件表，不僅可以審視相同控件尺寸風(fēng)格是否在視覺上一致，也能方便平臺(tái)二期的功能擴(kuò)展及設(shè)計(jì)師間高效溝通，也能為后續(xù)的業(yè)務(wù)拓展?fàn)I造一個(gè)統(tǒng)一的品牌調(diào)性。

總結(jié)：

當(dāng)設(shè)計(jì)師做完一個(gè)產(chǎn)品設(shè)計(jì)項(xiàng)目需求，可以回頭想想這個(gè)產(chǎn)品信息架構(gòu)你做了什么樣的創(chuàng)新、調(diào)整等，產(chǎn)生了什么價(jià)值 ?

不要僅僅拘泥于做界面元素的規(guī)范、設(shè)計(jì)細(xì)節(jié)等問題解決。
因?yàn)樾畔⒓軜?gòu)，是設(shè)計(jì)大局觀的最好練功秘籍。