在產(chǎn)品的具體設(shè)計(jì)中，原型是怎么來的呢？筆者認(rèn)為原型由信息架構(gòu)設(shè)計(jì)與條目設(shè)計(jì)組成，并以途家app搜索頁為例講解了條目設(shè)計(jì)。

幾千年來，哲學(xué)家們一直在思考三個問題：我是誰？我從哪里來？我到哪里去？對于設(shè)計(jì)師來說，我覺得同樣存在類似的三個問題：

1. 這個產(chǎn)品有什么價(jià)值？
2. 這個產(chǎn)品怎么活下去？
3. 這個產(chǎn)品具體怎么設(shè)計(jì)？

這是三個很大的問題，就像幾千年來哲學(xué)家們還沒有想通的哲學(xué)三問一樣。作者今天就是想結(jié)合自己的理解和一個案例，針對上面第三個問題的一個分支說說自己的理解，即：在產(chǎn)品的具體設(shè)計(jì)中，原型是怎么來的？

在進(jìn)行產(chǎn)品設(shè)計(jì)之前，會有大量的市場調(diào)研和產(chǎn)品定位問題，再之后才是進(jìn)行原型設(shè)計(jì)，開始產(chǎn)品初期的測試，繼而進(jìn)行不斷的測試、迭代、完善。在我看來，原型會由兩部分設(shè)計(jì)生成，其一是信息架構(gòu)設(shè)計(jì)，其二是條目設(shè)計(jì)。

一、首先說一下信息架構(gòu)設(shè)計(jì)

1. 什么是信息架構(gòu)？

“信息架構(gòu)”在百度百科中的解釋是：對某一特定內(nèi)容里的信息進(jìn)行統(tǒng)籌、規(guī)劃、設(shè)計(jì)、安排等一系列有機(jī)處理的想法。

“信息架構(gòu)”在我們設(shè)計(jì)層面是：指對某應(yīng)用的功能、信息、導(dǎo)航進(jìn)行規(guī)劃，包括該應(yīng)用有多少層級，每個層級包括多少頁面，每個頁面里包括多少個條目，每個條目里要有多少功能元素要呈現(xiàn)以及每個元素的優(yōu)先級排序。好的信息框架能讓用戶快速的尋找到自己想要的內(nèi)容和功能，

例如產(chǎn)品中一級頁面有幾個、分別是什么，每個一級頁面中又有什么功能。如果你把一個產(chǎn)品的功能點(diǎn)按照層級用腦圖畫出來，那么這就是這個產(chǎn)品的信息架構(gòu)。途家app的信息框架圖：

2. 怎么設(shè)計(jì)產(chǎn)品的信息架構(gòu)呢？

按我的理解和市面上常見的做法，一般會把產(chǎn)品的核心功能放到首頁、也就是信息架構(gòu)的頂級。把其他重要的功能放到一級頁面。依次按重要性進(jìn)行信息架構(gòu)層級的設(shè)計(jì)（當(dāng)然也會因?yàn)楫a(chǎn)品方對某一業(yè)務(wù)的重視程度把他放到信息架構(gòu)中更上級的地方，也就是推廣）。

這里我曾經(jīng)在聽純色老師的講座中提到過一個案例：微信的朋友圈功能其實(shí)和通訊錄或首頁的關(guān)聯(lián)性更強(qiáng)，因?yàn)槭侨说膭討B(tài)嘛，他和看一看、小程序、游戲、購物等等明顯不應(yīng)該處于信息架構(gòu)的同一部分。那么為什么微信的朋友圈功能放到了發(fā)現(xiàn)頁面呢？

答案是朋友圈是一個明星功能，可能在使用頻率上僅次于聊天功能。把他放到發(fā)現(xiàn)頁面可以增大發(fā)現(xiàn)頁面中其他信息條目的曝光量，讓用戶更多的去使用購物功能、游戲功能、看一看、小程序……等等其他功能。課件信息架構(gòu)也并不是一成不變的按照分類和邏輯在設(shè)計(jì)的，需要結(jié)合業(yè)務(wù)目標(biāo)靈活變通。

有的時(shí)候信息架構(gòu)的設(shè)計(jì)還會出現(xiàn)一些冗余設(shè)計(jì)，例如支付寶首頁中【掃一掃】功能是有兩個入口的，一個在頁面頂部直接露出，一個在加號里。這樣的設(shè)計(jì)按作者初步來想的話是考慮到用戶在使用其他產(chǎn)品時(shí)的時(shí)候習(xí)慣，進(jìn)而影響了本產(chǎn)品的設(shè)計(jì)。也就是我們常說的雅各布原理。

我們在確定了信息架構(gòu)之后，頁面的層級和包含內(nèi)容都已經(jīng)確定了，下面要做的就是設(shè)計(jì)出每個具體的頁面，包含功能的優(yōu)先級、按鈕位置、展示什么信息等等。這就需要引出一個概念：條目。

二、條目

1. 條目是什么呢？

條目是頁面中的可點(diǎn)擊單元，就像你現(xiàn)在看到了我寫的這篇短文，短文包含了標(biāo)題、封面圖、作者名稱、摘要、發(fā)布時(shí)間、閱讀量、點(diǎn)贊量、等等這些信息組合在一起形成了一個信息單元，這個按照一定規(guī)則顯示的信息單元就是條目。如下圖紅框框起來的都是一個頁面中的條目。

2. 條目中的構(gòu)成元素包括什么？

條目的構(gòu)成元素有：圖片，文字，圖標(biāo)，標(biāo)簽，圖形等。

以上圖“中間淘寶搜索頁面”中框起來的條目為例，列出該條目的構(gòu)成元素：商品圖片+熱門商品的角標(biāo)+天貓商鋪的標(biāo)簽+標(biāo)題+小標(biāo)簽+價(jià)格+銷量+發(fā)貨地+店鋪+相似寶貝icon。

（注：一種條目會存在不同的幾種狀態(tài)，如淘寶第一條商品圖上有hot的角標(biāo)，第二條商品圖上沒有角標(biāo)，這就是兩種狀態(tài)）

3. 我們具體怎么設(shè)計(jì)條目呢？

1）產(chǎn)品性質(zhì)決定條目的設(shè)計(jì)

產(chǎn)品的性質(zhì)決定了我們構(gòu)建信息時(shí)要強(qiáng)化哪些信息。

以途家民宿app為例，我們使用途家app時(shí)，主要搜索挑選符合我們條件的民宿，如下圖是途家app的搜索結(jié)果頁兩種條目設(shè)計(jì)，都滿足了我們在這個頁面需求，選擇自己喜歡的房間同時(shí)關(guān)注價(jià)格和更加詳細(xì)的位置，哪種條目設(shè)計(jì)更好呢？

是第一個條目的設(shè)計(jì)比較好，因?yàn)槲覀冞M(jìn)入這個頁面，最先關(guān)注房間的情況，第一個條目設(shè)計(jì)圖片比較大而且可以左右滑動查看更多關(guān)于房間的信息，省了一步用戶點(diǎn)擊進(jìn)入情況頁查看圖片的步驟，所以民宿的特性就決定了我們在進(jìn)行條目設(shè)計(jì)的時(shí)候，要強(qiáng)化圖片信息。

2）產(chǎn)品資源決定條目的設(shè)計(jì)

下圖左邊是36kr的首頁文章列表，資源豐富每天更新的文章比較多，注重用戶的閱讀效率，所以條目設(shè)計(jì)的比較小。

右側(cè)是初創(chuàng)公司的文章列表，文章資源有限，更新速度較慢，所以條目設(shè)計(jì)比較大，一屏展示2.5個條目，提高用戶的轉(zhuǎn)化率。

3）使用場景決定條目的設(shè)計(jì)

如下圖，分別為餓了么“首頁上的商家推薦”和“搜索列表頁”兩者的條目結(jié)構(gòu)，

“商家推薦”條目商家logo會很大，目的是為了用戶深刻記憶商家（logo圖形比文字更容易記憶）形成品牌效應(yīng)；“搜索列表頁”用戶有明確目的的去搜索，所以食物的圖片會更加引起用戶的注意，這里把商家logo做的小一些，主要突出食物圖片轉(zhuǎn)化用戶。

4）需要考慮到后期的擴(kuò)展性，迭代過程中能夠承載更為復(fù)雜的信息與功能

如：初創(chuàng)項(xiàng)目第一個版本會功能條目比較簡單，這就需要我們在設(shè)計(jì)的初期，一定要考慮到后期迭代的內(nèi)容，把條目設(shè)計(jì)的更具靈活性；

4. 原型設(shè)計(jì)的注意事項(xiàng)

多個條目信息組成高保真原型，我們在畫原型的時(shí)候，一定要注意：

1. 盡量使用灰色文字，不要大面積使用彩色的文字，有色彩傾向會影響UI設(shè)計(jì)師對頁面的設(shè)計(jì)；
2. 做好交互規(guī)范，相同的功能要用一樣的樣式表達(dá)。

當(dāng)我們輸出高保真原型圖時(shí)，需要對照交互自查表，看自己的交互狀態(tài)，交互說明是否都寫全面，以免丟掉異常流程和特殊的內(nèi)容狀態(tài)。（下圖是交互自查表，需要高清版的，在公眾號內(nèi)回復(fù)“交互設(shè)計(jì)自查表”領(lǐng)取)

以上是我對【在產(chǎn)品的具體設(shè)計(jì)中，原型是怎么來的？】這個問題的理解，是從信息架構(gòu)和條目兩方面來說的，下面我們逆向來拆解一個產(chǎn)品中的真實(shí)條目案例，來看一看。

三、條目分析的案例——途家app搜索頁

途家slogan-全球酒店公寓和短租預(yù)定平臺

1. 條目狀態(tài)

2. 條目規(guī)則

a. 房屋圖片房東可上傳多張（我翻看多個條房源目猜，最少的圖片是7張，最多的是37張，所以我猜測最少要上傳5張，因?yàn)閳D片輪播是5個，最多應(yīng)該不限制）房東上傳的圖片需要官方審核通過；

b. 房屋信息除了圖片展示，還有VR和視頻模式；

c. 標(biāo)題顯示一行，超出是標(biāo)題文字+…顯示一行；

d. 價(jià)格顯示到個位；

e. 房東頭像必須上傳，分為超贊房東和普通房東；

f. 每個條目的大小是一致的，約占屏幕的1/2。

3. 條目推薦機(jī)制

a. 第三行標(biāo)簽最多顯示5個，根據(jù)房屋信息及用戶評價(jià)自動生成，前面的橘黃色標(biāo)簽是根據(jù)房東填寫的房屋信息生成的，后邊灰色的是根據(jù)用戶評價(jià)自動生成的（猜測）。

b. 下拉滑動4個條目信息（2屏），會根據(jù)你的搜索情況，出現(xiàn)篩選條件，更加準(zhǔn)確的推送信息；

c. 篩選條件后邊再滑動4個條目信息（2屏），還會根據(jù)你的情況，再次出現(xiàn)篩選條件；

以上是作者的一點(diǎn)點(diǎn)理解，歡迎大家補(bǔ)充指正~

作者：杜昭，微信：17611113635，微信公眾號：設(shè)計(jì)的威嚴(yán)

本文由 @?杜昭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議