今天跟大家分享一下我在經(jīng)歷需求不明確、設(shè)計反復(fù)改稿后，如何發(fā)現(xiàn)用“十字法”來梳理頁面中的信息層級的。

共包含五個部分，下面為第一部分。

第一部分：反復(fù)改稿！誰的責(zé)任？

1. 產(chǎn)品經(jīng)理總是憑感覺讓我改！改！改！

下面是我之前做的一個項目電商平臺產(chǎn)品詳情頁改版，如下圖:

 

這是最初做的幾個版本中的其中一版，每次過設(shè)計稿，產(chǎn)品經(jīng)理總是讓我改改這里調(diào)調(diào)那里，某個信息一會要加粗加重，一會要高亮，一會又要弱化一下。一開始覺得可能是自己能力不足，沒能達(dá)到對方的要求，所以就耐著性子改，但心里卻是一萬只草泥馬略過……

最主要的是產(chǎn)品經(jīng)理自己也講不出緣由，就是憑感覺讓我改！改！改！

而且我自認(rèn)為算是一個好脾氣的設(shè)計師，但總是這樣反復(fù)調(diào)整，真的有些不耐煩起來。

2. 設(shè)計師的反擊——多稿并排發(fā)現(xiàn)新大陸

后面為了證明我有多苦多累，就把幾個版本的設(shè)計稿全部拼在一起。本想拿給產(chǎn)品經(jīng)理看，然而當(dāng)放在一起對比的時候，問題就升華了。

我發(fā)現(xiàn)每個版本的變化基本上都是信息強弱關(guān)系的調(diào)整。而產(chǎn)品經(jīng)理本身對信息優(yōu)先級的概念是很模糊的，所以才不斷地讓我調(diào)整，想通過設(shè)計的嘗試來彌補需求的不足，這一點我感覺好像發(fā)現(xiàn)了新大陸。即這不只是設(shè)計的原因，是需求不明確！而產(chǎn)品經(jīng)理又想通過設(shè)計的手段去解決需求中信息層級不明確的問題！

這顯然是本末倒置的，因為設(shè)計是建立在需求明確的前提下，若需求都不確定，那么怎么設(shè)計都是不對的。就像猜謎一樣，但猜謎至少還有一個謎底，而這種情況連謎底都沒有，因為出題人自己也不知道。

當(dāng)初沒意識到這個問題，沒能幫產(chǎn)品經(jīng)理把控信息層級這一關(guān)，也是自身能力的不足，所以設(shè)計改了一稿又一稿，作為設(shè)計師本人也要負(fù)起一定的責(zé)任。

第二部分：“十字法”由來

1. 回顧四象限原則

意識到問題之后，便想先把信息層級明確下來再設(shè)計。但要怎么明確呢？憑感覺是不行了，因為它太不靠譜，此時此景需要的是理性的分析。

而那段時間，剛好聽了一個分享，分享中提到美國第34任總統(tǒng)艾森豪威爾會把每天要做的事情按照重要緊急的、重要不緊急的、緊急不重要的、不緊急不重要的這四個象限進(jìn)行分類，然后一天的工作效率就會提高很多。

對這一點印象很深刻，腦海中會時不時地浮現(xiàn)出來。然后心里想著既然工作可以這樣分類，那么產(chǎn)品詳情頁里眾多的信息是否也可以按這4個維度進(jìn)行分類呢？

想到這里立馬就進(jìn)行了嘗試，結(jié)果卻發(fā)現(xiàn)語義不通。

因為我們在設(shè)計中，關(guān)于某個信息只有重要不重要，沒有緊急不緊急一說，若只有重要這一個權(quán)重，就無法構(gòu)成四象限，必須再增加一個才行。

2. 由四象限提取“十字法”

具體要增加哪個呢？是老板要求的？或是客戶需要？還是什么其它的原因？感覺都不合適！然后又進(jìn)行大腦回路。盡可能想象需求方看重什么，回憶工作時的場景，特別是與需求方過設(shè)計稿的情況，發(fā)現(xiàn)經(jīng)常會聽到：

“這個信息并不是很重要,但要展示”

或是“這個雖然不是產(chǎn)品本身必要的信息，但很重要，要強化”

又或是“這個一般，展不展示都行，你設(shè)計的時候自己看吧…”

把以上這些說法梳理總結(jié)出來，就是除了重要不重要之外，還有一個便是要不要展示，是否必須展示。

想到這里，我便把重要緊急中的“緊急”調(diào)整為“必須”，即重要的必須的要展示的內(nèi)容，依次類推分別是：重要必須的 / 重要不必須的 / 必須不重要的 / 不重要不必須的。同樣也是畫一個十字，如下圖:

 

我們姑且把它叫做“十字法”，重要且必須的那一象限自然是優(yōu)先級最高的。另外三個象限依次是優(yōu)先級2 / 優(yōu)先級3 / 優(yōu)先級4。

把這個勾畫出來之后，便拉著產(chǎn)品經(jīng)理一起按照這四個象限對產(chǎn)品詳情頁的信息重新進(jìn)行了梳理。

第三部分：用十字法構(gòu)建信息層級

1. 羅列產(chǎn)品詳情頁首屏要展示的所有信息

首先，我們把產(chǎn)品詳情頁所有的信息都羅列出來，有產(chǎn)品圖片、產(chǎn)品SKU、產(chǎn)品所屬店鋪等信息，大大小小一共有30多條，這還不包括輔助性內(nèi)容，如下圖:

 

2. 把信息按照“十字法”，分別填到對應(yīng)的象限里

羅列出來之后，再按照前面說的十字法，把上述信息全部按照這四個象限進(jìn)行分類，根據(jù)優(yōu)先級的不同，分別填到相應(yīng)的象限里，像產(chǎn)品的圖片、名稱、價格等都屬重要且必須的內(nèi)容，如下圖:

 

△  這一過程會有些難度，可能會出現(xiàn)反復(fù)的情況，我們在做的時候，針對物流即shipping信息討論了很久，因為物流很重要，但我們平臺并沒有物流優(yōu)勢，所以最終還是決定放在第三象限里，只要用戶需要的時候能找到即可。

3. 再對象限里的信息進(jìn)行二次梳理

做完上述兩步之后，我們有些象限里的信息非常多，尤其是第三象限。于是又把各象限里的信息進(jìn)行了二次梳理，如下圖:

 

像上圖這樣，把每個象限里面把信息又分成了幾個梯隊，因為優(yōu)先級的關(guān)系，每個象限里的每個梯隊在設(shè)計上的處理都會有所不同。具體體現(xiàn)在設(shè)計中詳見第四部分內(nèi)容。

第四部分：根據(jù)信息層級進(jìn)行視覺設(shè)計

1. 第一象限

下面所使用的配圖中灰色圓圈標(biāo)1.1、1.2等的即代表該象限第1梯隊的信息，標(biāo)2.1、2.1等即代表該象限第2梯隊的信息

首先看圖中用箭頭標(biāo)的第一象限第1、2梯隊的信息，不但占據(jù)了頁面中的黃金位置，在設(shè)計上也進(jìn)行了加強。下面是摘取其中一些信息進(jìn)行簡單的說明，如下：

1.1 產(chǎn)品圖片：產(chǎn)品圖片中的產(chǎn)品大圖，這個無需多做修飾，圖片本身以及位置就能說明其重要性。

1.2 產(chǎn)品價格：產(chǎn)品價格的處理方式，不但在字號上均大于其它內(nèi)容，且在顏色上也是比較高亮的暖色。

1.3 button：buy now 和 add to cart同屬第1梯隊的信息，在大小和顏色上與其它元素有著明顯的區(qū)別，而且button本身就自帶突出的屬性。

2.1 產(chǎn)品名稱：產(chǎn)品名稱在產(chǎn)品所有內(nèi)容中屬總領(lǐng)性信息，優(yōu)先級為第2梯隊，由于其所在位置的特殊性，在設(shè)計上并不需要強化，所以用的是最普通的黑灰色，字號上相較產(chǎn)品價格也要小些。因為本身所在的區(qū)域已經(jīng)非常明顯了。

 

2. 第二象限

第二象限里的信息并不是很多，所以在設(shè)計上相對好處理一些。如下：

產(chǎn)品評價和成交量：這兩個雖不是產(chǎn)品必要信息，但在用戶購買決策中起著非常重要的作用。所以在設(shè)計上與第一象限里第2梯隊的信息，采用了相同的處理手法，在重點信息的字號和顏色上均與產(chǎn)品名稱保持一致，另外擔(dān)心這塊過重，所以輔助性信息的采用了頁面中的最小字號12px。

 

3. 第三象限

第三象限內(nèi)容非常多，所以分了4個梯隊， 每個梯隊的視覺表現(xiàn)也分別有些不同，如下：

1.1 產(chǎn)品SKU區(qū)域：這一塊信息除了button，其它都屬第1梯隊信息，像shipping / size / quantity / add to wish list 等都屬用戶在購買之前需要操作的內(nèi)容，所以用了一個灰度的背景把這部分操作類內(nèi)容整合在一起。另外由于圖片類內(nèi)容天生自帶吸引屬性，所以像add to wish list 這種有icon的信息，即把文案弱化一些，像total price這種無icon的信息即加強一些。主要以調(diào)整字號的大小來達(dá)到相對平衡的效果。

2.1 店鋪名稱：第2梯隊的信息主要跟店鋪相關(guān)，處理起來會簡單很多，由于店鋪名稱要明確表示可點擊，但又不希望太強，所以用了深藍(lán)的鏈接色。

2.2 店鋪星鉆 / 評價：店鋪星鉆評價等相關(guān)信息用的是最普通的黑灰色，但希望可以與店鋪名稱在層級上持平，所以對字號做了加大加粗的處理，以達(dá)到不弱于甚至還強于店鋪名稱的效果。

2.3 visit store：進(jìn)入店鋪是一個行動點，在層級上弱于購買操作，但又強于頁面中查看更多的操作，所以在設(shè)計上做了中和處理，保留button的形式，但采用灰度設(shè)計，使之整體上不強但也不至于太弱，與店鋪名稱等內(nèi)容達(dá)到一個持平的狀態(tài)。

3 retum policy：第3梯隊的信息處理起來就更容易了，包括面包屑、還有店鋪相關(guān)的detailed seller ratings等信息，都用了最簡單處理手法，顏色為黑灰色，字號為12px。

4 chat now：聯(lián)系方式在線狀態(tài)時屬第3梯隊，離線狀態(tài)時屬第4梯隊，在設(shè)計上沒有做過多的變化，直接灰度展示。

 

4. 第四象限

如果前面的信息都能處理好的話，那么優(yōu)先級最低的信息就基本沒有什么問題了。對于第四象限里的信息，連同頁面輔助性內(nèi)容都統(tǒng)一采用#999的灰度和12px字號，整個頁面看起來會更干凈清爽 。如下：

1.1 bulk price：關(guān)于批發(fā)價格信息，直接以灰度處理，沒有做過多的變化。

1.2 店鋪地址：在店鋪名稱后面有一串店鋪地址，屬非必要且非重要信息，純粹是需求需要，所以在設(shè)計上也是進(jìn)行了弱化的灰度處理方式。

 

第五部分：視覺評審

通過對信息層級的梳理，整個設(shè)計過程都非常順暢。在沒做之前，就基本能夠預(yù)知哪些信息該如何處理，后面在細(xì)節(jié)上又進(jìn)行了微調(diào)，下面便是與產(chǎn)品經(jīng)理確認(rèn)的最終稿。

 

最終稿與最初做的版本整體上雖差別不大，但細(xì)節(jié)上卻是千差萬別，包括在icon、字號、顏色等方面的處理均有所不同。而且從本質(zhì)上已經(jīng)發(fā)生了實際的變化，最初的版本是在摸索中做的，主要是憑感覺，沒有一定的章法和邏輯，比較缺乏底氣，而最終稿是有依據(jù)的，每一個細(xì)節(jié)點都經(jīng)得起推敲。

兩個版本其中有一些不同點，我簡單標(biāo)了幾個，大家可以對比下：

下面配圖中，最初的版本中的圓圈1-7與最終版本是一一對應(yīng)的，可以對比看下效果。

1 mouse over to zoom in：關(guān)于這個信息，起初覺得用戶會去看產(chǎn)品細(xì)節(jié)，所以用了比較深的顏色，經(jīng)過信息梳理之后，發(fā)現(xiàn)它也并不那么重要，一般如果想看產(chǎn)品細(xì)節(jié)更多會向下滑動看更多的圖片，所以放在了第四象限里，在最終版時都采用了統(tǒng)一的灰度處理。

2 bulk price：起初采用的箭頭外面是有個小框的，且查看更多的箭頭與這個樣式還不一樣，總得來說有一點點小復(fù)雜，所以在最終版時，把箭頭的樣式全部進(jìn)行了統(tǒng)一，只是因功能和層級不同，箭頭的顏色和方向做不同的處理而已。

3 shipping：起初設(shè)計時物流相關(guān)的信息與產(chǎn)品的SKU并沒有放在一起，后面在梳理信息層級時， 發(fā)現(xiàn)它都是用戶在購買產(chǎn)品時需要進(jìn)行操作的項，所以在最終版的設(shè)計時把操作類內(nèi)容都整體放在了一起。

4 add to wish list：關(guān)于收藏夾，會感覺是一個比較重要的功能，所以不管是icon還是文案都用了深一點的顏色，雖然層級上也并不明顯，但會影響整個頁面信息層次的展示，所以在最終版設(shè)計時也做了降級的處理。

5 保障信息：這個信息也是憑個人購物的感覺來做，覺得應(yīng)該是比較重要的內(nèi)容，所以起初設(shè)計時，采用了較大的塊面來展示，實際上這個信息確實重要，但卻不是我們平臺的優(yōu)勢，而這個保障信息也起不了多大作用，所以在最終版也是做了弱化處理。

6 店鋪名稱：關(guān)于這個信息，最初的設(shè)計只是用了普通的黑灰色，但從賣家層面來說，從需求出發(fā)，是希望產(chǎn)品詳情頁能夠給賣家店鋪引一些流量，但又不能過于明顯，還是以產(chǎn)品詳情信息的展示為主，所以在最終版設(shè)計時就稍微強化了一下，采用深藍(lán)的鏈接色。

7 chat now：起初聯(lián)系方式在離線狀態(tài)時雖然用的不是桔色，但也是比較深的顏色。當(dāng)這種狀態(tài)時，我們是不鼓勵用戶點擊聯(lián)系賣家的，因為時差的關(guān)系，賣家并不能實時回復(fù)，會影響買家的體驗，所以在最終版設(shè)計時就采用灰度處理，弱化這塊信息。

 

除了以上這些，還有一些留白、間距等細(xì)節(jié)都做了不同的處理，在這里就不一一說明了。

看了最終版與最初設(shè)計的區(qū)別，接下來再說下視覺評審時的一個小插曲。

即在視覺評審時有同學(xué)問到“物流的輔助說明信息感覺是比較重要的內(nèi)容,現(xiàn)在用這個灰色好像有些弱”。

大家注意這個問題，前面說的是信息的重要性，跟需求有關(guān)。后面說的是設(shè)計，總體來說，是感覺用灰色有些弱，好像是這個顏色的原因，是設(shè)計的問題，但其實是這樣嗎?

當(dāng)然不是！因為物流是重要，但前面也說了為什么要弱化的原因，平臺的發(fā)展階段不同，后面若物流發(fā)展起來，當(dāng)然可以再強化物流信息。

所以當(dāng)時我并沒有就物流的輔助說明信息用什么顏色這個問題展開討論，而是首先說明產(chǎn)品詳情頁里確實有很多很重要的信息，不同重要程度的內(nèi)容，處理方式也不一樣。而物流的輔助信息屬優(yōu)先級最低的一個類別，體現(xiàn)在設(shè)計中便是用了灰色。另外，你只提了這個信息有些弱，而像產(chǎn)品的批發(fā)價、人民幣價等這類信息都沒有覺得弱，那說明它可能不是顏色的問題，而是我們在做信息層級時把它放在了最低的一級。

說完之后，提問的同學(xué)隨即就明白了這樣設(shè)計的原因，轉(zhuǎn)而與產(chǎn)品經(jīng)理探討物流信息屬于哪個層級的問題。當(dāng)然最后仍然是屬于最低的一級。但這樣至少避免了在設(shè)計上進(jìn)行無謂的討論，因為有時候表面看起來是設(shè)計問題，但實際上卻是需求的問題。

評審最后，除了一些視覺上的小點要調(diào)整之外，整個過程都十分的順利，大部分都得益于用“十字法”對信息層級做了梳理。

以上便是在做詳情頁改版時遇到因信息不明確問題的整個過程，當(dāng)然還有其它的一些問題，這里就不一一詳說了。

后面換了新工作后，某天有個同事跟我說頁面信息內(nèi)容太多，不知該如何設(shè)計才能更好看？我心里想這又是一個典型的信息層級沒有梳理好卻希望通過設(shè)計手段去解決的問題。于是我就跟他講了十字法,把所有信息按照這四個象限進(jìn)行分類，并同他一起梳理，然后發(fā)現(xiàn)其實頁面中并不需要展示那么多信息，去掉了將近一半內(nèi)容，設(shè)計起來不但清晰，而且也更容易些。

以上便是用十字法構(gòu)建設(shè)計中的信息層級。當(dāng)你在設(shè)計中不能自拔，或是反復(fù)調(diào)整，或與產(chǎn)品經(jīng)理意見不同時，可以思考下是否遇到了信息不明確的問題。若是，便可以用上述方法幫助自己來構(gòu)建信息層級。