華文網

設計反復修改?可能是你的資訊層級沒有梳理好!

今天跟大家分享一下我在經歷需求不明確、設計反復改稿後,如何發現用“十字法”來梳理頁面中的資訊層級的。

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

第一部分:反復改稿!誰的責任?

1. 產品經理總是憑感覺讓我改!改!改!

下面是我之前做的一個專案電商平臺產品詳情頁改版,如下圖:

這是最初做的幾個版本中的其中一版,每次過設計稿,產品經理總是讓我改改這裡調調那裡,某個資訊一會要加粗加重,一會要高亮,一會又要弱化一下。

一開始覺得可能是自己能力不足,沒能達到對方的要求,所以就耐著性子改,但心裡卻是一萬隻草泥馬略過……

最主要的是產品經理自己也講不出緣由,就是憑感覺讓我改!改!改!

而且我自認為算是一個好脾氣的設計師,但總是這樣反復調整,真的有些不耐煩起來。

2. 設計師的反擊——多稿並排發現新大陸

後面為了證明我有多苦多累,就把幾個版本的設計稿全部拼在一起。

本想拿給產品經理看,然而當放在一起對比的時候,問題就昇華了。

我發現每個版本的變化基本上都是資訊強弱關係的調整。而產品經理本身對資訊優先順序的概念是很模糊的,所以才不斷地讓我調整,想通過設計的嘗試來彌補需求的不足,這一點我感覺好像發現了新大陸。即這不只是設計的原因,是需求不明確!而產品經理又想通過設計的手段去解決需求中資訊層級不明確的問題!

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

當初沒意識到這個問題,沒能幫產品經理把控資訊層級這一關,也是自身能力的不足,所以設計改了一稿又一稿,作為設計師本人也要負起一定的責任。

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

1. 回顧四象限原則

意識到問題之後,便想先把資訊層級明確下來再設計。但要怎麼明確呢?憑感覺是不行了,因為它太不靠譜,此時此景需要的是理性的分析。

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

對這一點印象很深刻,腦海中會時不時地浮現出來。然後心裡想著既然工作可以這樣分類,那麼產品詳情頁裡眾多的資訊是否也可以按這4個維度進行分類呢?

想到這裡立馬就進行了嘗試,結果卻發現語義不通。

因為我們在設計中,關於某個資訊只有重要不重要,沒有緊急不緊急一說,若只有重要這一個權重,就無法構成四象限,必須再增加一個才行。

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

具體要增加哪個呢?是老闆要求的?或是客戶需要?還是什麼其它的原因?感覺都不合適!然後又進行大腦回路。盡可能想像需求方看重什麼,回憶工作時的場景,特別是與需求方過設計稿的情況,發現經常會聽到:

“這個資訊並不是很重要,但要展示”

或是“這個雖然不是產品本身必要的資訊,但很重要,要強化”

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

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

想到這裡,我便把重要緊急中的“緊急”調整為“必須”,即重要的必須的要展示的內容,依次類推分別是:重要必須的 / 重要不必須的 / 必須不重要的 / 不重要不必須的。同樣也是畫一個十字,如下圖:

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

把這個勾畫出來之後,便拉著產品經理一起按照這四個象限對產品詳情頁的資訊重新進行了梳理。

第三部分:用十字法構建信息層級

1. 羅列產品詳情頁首屏要展示的所有資訊

首先,我們把產品詳情頁所有的資訊都羅列出來,有產品圖片、產品SKU、產品所屬店鋪等資訊,大大小小一共有30多條,這還不包括輔助性內容,如下圖:

2. 把資訊按照“十字法”,分別填到對應的象限裡

羅列出來之後,再按照前面說的十字法,把上述資訊全部按照這四個象限進行分類,根據優先順序的不同,分別填到相應的象限裡,像產品的圖片、名稱、價格等都屬重要且必須的內容,如下圖:

△ 這一過程會有些難度,可能會出現反復的情況,我們在做的時候,針對物流即shipping資訊討論了很久,因為物流很重要,但我們平臺並沒有物流優勢,所以最終還是決定放在第三象限裡,只要使用者需要的時候能找到即可。

3. 再對象限裡的資訊進行二次梳理

做完上述兩步之後,我們有些象限裡的資訊非常多,尤其是第三象限。於是又把各象限裡的資訊進行了二次梳理,如下圖:

像上圖這樣,把每個象限裡面把資訊又分成了幾個梯隊,因為優先順序的關係,每個象限裡的每個梯隊在設計上的處理都會有所不同。具體體現在設計中詳見第四部分內容。

第四部分:根據資訊層級進行視覺設計

1. 第一象限

下面所使用的配圖中灰色圓圈標1.1、1.2等的即代表該象限第1梯隊的資訊,標2.1、2.1等即代表該象限第2梯隊的資訊

首先看圖中用箭頭標的第一象限第1、2梯隊的資訊,不但佔據了頁面中的黃金位置,在設計上也進行了加強。下面是摘取其中一些資訊進行簡單的說明,如下:

1.1 產品圖片:產品圖片中的產品大圖,這個無需多做修飾,圖片本身以及位置就能說明其重要性。

1.2 產品價格:產品價格的處理方式,不但在字型大小上均大於其它內容,且在顏色上也是比較高亮的暖色。

1.3 button:buy now 和 add to cart同屬第1梯隊的資訊,在大小和顏色上與其它元素有著明顯的區別,而且button本身就自帶突出的屬性。

2.1 產品名稱:產品名稱在產品所有內容中屬總領性資訊,優先順序為第2梯隊,由於其所在位置的特殊性,在設計上並不需要強化,所以用的是最普通的黑灰色,字型大小上相較產品價格也要小些。因為本身所在的區域已經非常明顯了。

2. 第二象限

第二象限裡的資訊並不是很多,所以在設計上相對好處理一些。如下:

產品評價和成交量:這兩個雖不是產品必要資訊,但在使用者購買決策中起著非常重要的作用。所以在設計上與第一象限裡第2梯隊的資訊,採用了相同的處理手法,在重點資訊的字型大小和顏色上均與產品名稱保持一致,另外擔心這塊過重,所以輔助性資訊的採用了頁面中的最小字型大小12px。

3. 第三象限

第三象限內容非常多,所以分了4個梯隊, 每個梯隊的視覺表現也分別有些不同,如下:

1.1 產品SKU區域:這一塊資訊除了button,其它都屬第1梯隊資訊,像shipping / size / quantity / add to wish list 等都屬使用者在購買之前需要操作的內容,所以用了一個灰度的背景把這部分操作類內容整合在一起。另外由於圖片類內容天生自帶吸引屬性,所以像add to wish list 這種有icon的資訊,即把文案弱化一些,像total price這種無icon的資訊即加強一些。主要以調整字型大小的大小來達到相對平衡的效果。

2.1 店鋪名稱:第2梯隊的資訊主要跟店鋪相關,處理起來會簡單很多,由於店鋪名稱要明確表示可點擊,但又不希望太強,所以用了深藍的連結色。

2.2 店鋪星鑽 / 評價:店鋪星鑽評價等相關資訊用的是最普通的黑灰色,但希望可以與店鋪名稱在層級上持平,所以對字型大小做了加大加粗的處理,以達到不弱于甚至還強於店鋪名稱的效果。

2.3 visit store:進入店鋪是一個行動點,在層級上弱於購買操作,但又強於頁面中查看更多的操作,所以在設計上做了中和處理,保留button的形式,但採用灰度設計,使之整體上不強但也不至於太弱,與店鋪名稱等內容達到一個持平的狀態。

3 retum policy:第3梯隊的資訊處理起來就更容易了,包括麵包屑、還有店鋪相關的detailed seller ratings等資訊,都用了最簡單處理手法,顏色為黑灰色,字型大小為12px。

4 chat now:聯繫方式線上狀態時屬第3梯隊,離線狀態時屬第4梯隊,在設計上沒有做過多的變化,直接灰度展示。

4. 第四象限

如果前面的資訊都能處理好的話,那麼優先順序最低的資訊就基本沒有什麼問題了。對於第四象限裡的資訊,連同頁面輔助性內容都統一採用#999的灰度和12px字型大小,整個頁面看起來會更乾淨清爽 。如下:

1.1 bulk price:關於批發價格資訊,直接以灰度處理,沒有做過多的變化。

1.2 店鋪地址:在店鋪名稱後面有一串店鋪地址,屬非必要且非重要資訊,純粹是需求需要,所以在設計上也是進行了弱化的灰度處理方式。

第五部分:視覺評審

通過對資訊層級的梳理,整個設計過程都非常順暢。在沒做之前,就基本能夠預知哪些資訊該如何處理,後面在細節上又進行了微調,下面便是與產品經理確認的最終稿。

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

兩個版本其中有一些不同點,我簡單標了幾個,大家可以對比下:

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

1 mouse over to zoom in:關於這個資訊,起初覺得使用者會去看產品細節,所以用了比較深的顏色,經過資訊梳理之後,發現它也並不那麼重要,一般如果想看產品細節更多會向下滑動看更多的圖片,所以放在了第四象限裡,在最終版時都採用了統一的灰度處理。

2 bulk price:起初採用的箭頭外面是有個小框的,且查看更多的箭頭與這個樣式還不一樣,總得來說有一點點小複雜,所以在最終版時,把箭頭的樣式全部進行了統一,只是因功能和層級不同,箭頭的顏色和方向做不同的處理而已。

3 shipping:起初設計時物流相關的資訊與產品的SKU並沒有放在一起,後面在梳理資訊層級時, 發現它都是使用者在購買產品時需要進行操作的項,所以在最終版的設計時把操作類內容都整體放在了一起。

4 add to wish list:關於我的最愛,會感覺是一個比較重要的功能,所以不管是icon還是文案都用了深一點的顏色,雖然層級上也並不明顯,但會影響整個頁面資訊層次的展示,所以在最終版設計時也做了降級的處理。

5 保障資訊:這個資訊也是憑個人購物的感覺來做,覺得應該是比較重要的內容,所以起初設計時,採用了較大的塊面來展示,實際上這個資訊確實重要,但卻不是我們平臺的優勢,而這個保障資訊也起不了多大作用,所以在最終版也是做了弱化處理。

6 店鋪名稱:關於這個資訊,最初的設計只是用了普通的黑灰色,但從賣家層面來說,從需求出發,是希望產品詳情頁能夠給賣家店鋪引一些流量,但又不能過於明顯,還是以產品詳情資訊的展示為主,所以在最終版設計時就稍微強化了一下,採用深藍的連結色。

7 chat now:起初聯繫方式在離線狀態時雖然用的不是桔色,但也是比較深的顏色。當這種狀態時,我們是不鼓勵用戶點擊聯繫賣家的,因為時差的關係,賣家並不能即時回復,會影響買家的體驗,所以在最終版設計時就採用灰度處理,弱化這塊資訊。

除了以上這些,還有一些留白、間距等細節都做了不同的處理,在這裡就不一一說明了。

看了最終版與最初設計的區別,接下來再說下視覺評審時的一個小插曲。

即在視覺評審時有同學問到“物流的輔助說明資訊感覺是比較重要的內容,現在用這個灰色好像有些弱”。

大家注意這個問題,前面說的是資訊的重要性,跟需求有關。後面說的是設計,總體來說,是感覺用灰色有些弱,好像是這個顏色的原因,是設計的問題,但其實是這樣嗎?

當然不是!因為物流是重要,但前面也說了為什麼要弱化的原因,平臺的發展階段不同,後面若物流發展起來,當然可以再強化物流資訊。

所以當時我並沒有就物流的輔助說明資訊用什麼顏色這個問題展開討論,而是首先說明產品詳情頁裡確實有很多很重要的資訊,不同重要程度的內容,處理方式也不一樣。而物流的輔助資訊屬優先順序最低的一個類別,體現在設計中便是用了灰色。另外,你只提了這個資訊有些弱,而像產品的批發價、人民幣價等這類資訊都沒有覺得弱,那說明它可能不是顏色的問題,而是我們在做資訊層級時把它放在了最低的一級。

說完之後,提問的同學隨即就明白了這樣設計的原因,轉而與產品經理探討物流資訊屬於哪個層級的問題。當然最後仍然是屬於最低的一級。但這樣至少避免了在設計上進行無謂的討論,因為有時候表面看起來是設計問題,但實際上卻是需求的問題。

評審最後,除了一些視覺上的小點要調整之外,整個過程都十分的順利,大部分都得益於用“十字法”對資訊層級做了梳理。

以上便是在做詳情頁改版時遇到因資訊不明確問題的整個過程,當然還有其它的一些問題,這裡就不一一詳說了。

後面換了新工作後,某天有個同事跟我說頁面資訊內容太多,不知該如何設計才能更好看?我心裡想這又是一個典型的資訊層級沒有梳理好卻希望通過設計手段去解決的問題。於是我就跟他講了十字法,把所有資訊按照這四個象限進行分類,並同他一起梳理,然後發現其實頁面中並不需要展示那麼多資訊,去掉了將近一半內容,設計起來不但清晰,而且也更容易些。

以上便是用十字法構建設計中的資訊層級。當你在設計中不能自拔,或是反復調整,或與產品經理意見不同時,可以思考下是否遇到了資訊不明確的問題。若是,便可以用上述方法説明自己來構建資訊層級。

------

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

具體要增加哪個呢?是老闆要求的?或是客戶需要?還是什麼其它的原因?感覺都不合適!然後又進行大腦回路。盡可能想像需求方看重什麼,回憶工作時的場景,特別是與需求方過設計稿的情況,發現經常會聽到:

“這個資訊並不是很重要,但要展示”

或是“這個雖然不是產品本身必要的資訊,但很重要,要強化”

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

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

想到這裡,我便把重要緊急中的“緊急”調整為“必須”,即重要的必須的要展示的內容,依次類推分別是:重要必須的 / 重要不必須的 / 必須不重要的 / 不重要不必須的。同樣也是畫一個十字,如下圖:

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

把這個勾畫出來之後,便拉著產品經理一起按照這四個象限對產品詳情頁的資訊重新進行了梳理。

第三部分:用十字法構建信息層級

1. 羅列產品詳情頁首屏要展示的所有資訊

首先,我們把產品詳情頁所有的資訊都羅列出來,有產品圖片、產品SKU、產品所屬店鋪等資訊,大大小小一共有30多條,這還不包括輔助性內容,如下圖:

2. 把資訊按照“十字法”,分別填到對應的象限裡

羅列出來之後,再按照前面說的十字法,把上述資訊全部按照這四個象限進行分類,根據優先順序的不同,分別填到相應的象限裡,像產品的圖片、名稱、價格等都屬重要且必須的內容,如下圖:

△ 這一過程會有些難度,可能會出現反復的情況,我們在做的時候,針對物流即shipping資訊討論了很久,因為物流很重要,但我們平臺並沒有物流優勢,所以最終還是決定放在第三象限裡,只要使用者需要的時候能找到即可。

3. 再對象限裡的資訊進行二次梳理

做完上述兩步之後,我們有些象限裡的資訊非常多,尤其是第三象限。於是又把各象限裡的資訊進行了二次梳理,如下圖:

像上圖這樣,把每個象限裡面把資訊又分成了幾個梯隊,因為優先順序的關係,每個象限裡的每個梯隊在設計上的處理都會有所不同。具體體現在設計中詳見第四部分內容。

第四部分:根據資訊層級進行視覺設計

1. 第一象限

下面所使用的配圖中灰色圓圈標1.1、1.2等的即代表該象限第1梯隊的資訊,標2.1、2.1等即代表該象限第2梯隊的資訊

首先看圖中用箭頭標的第一象限第1、2梯隊的資訊,不但佔據了頁面中的黃金位置,在設計上也進行了加強。下面是摘取其中一些資訊進行簡單的說明,如下:

1.1 產品圖片:產品圖片中的產品大圖,這個無需多做修飾,圖片本身以及位置就能說明其重要性。

1.2 產品價格:產品價格的處理方式,不但在字型大小上均大於其它內容,且在顏色上也是比較高亮的暖色。

1.3 button:buy now 和 add to cart同屬第1梯隊的資訊,在大小和顏色上與其它元素有著明顯的區別,而且button本身就自帶突出的屬性。

2.1 產品名稱:產品名稱在產品所有內容中屬總領性資訊,優先順序為第2梯隊,由於其所在位置的特殊性,在設計上並不需要強化,所以用的是最普通的黑灰色,字型大小上相較產品價格也要小些。因為本身所在的區域已經非常明顯了。

2. 第二象限

第二象限裡的資訊並不是很多,所以在設計上相對好處理一些。如下:

產品評價和成交量:這兩個雖不是產品必要資訊,但在使用者購買決策中起著非常重要的作用。所以在設計上與第一象限裡第2梯隊的資訊,採用了相同的處理手法,在重點資訊的字型大小和顏色上均與產品名稱保持一致,另外擔心這塊過重,所以輔助性資訊的採用了頁面中的最小字型大小12px。

3. 第三象限

第三象限內容非常多,所以分了4個梯隊, 每個梯隊的視覺表現也分別有些不同,如下:

1.1 產品SKU區域:這一塊資訊除了button,其它都屬第1梯隊資訊,像shipping / size / quantity / add to wish list 等都屬使用者在購買之前需要操作的內容,所以用了一個灰度的背景把這部分操作類內容整合在一起。另外由於圖片類內容天生自帶吸引屬性,所以像add to wish list 這種有icon的資訊,即把文案弱化一些,像total price這種無icon的資訊即加強一些。主要以調整字型大小的大小來達到相對平衡的效果。

2.1 店鋪名稱:第2梯隊的資訊主要跟店鋪相關,處理起來會簡單很多,由於店鋪名稱要明確表示可點擊,但又不希望太強,所以用了深藍的連結色。

2.2 店鋪星鑽 / 評價:店鋪星鑽評價等相關資訊用的是最普通的黑灰色,但希望可以與店鋪名稱在層級上持平,所以對字型大小做了加大加粗的處理,以達到不弱于甚至還強於店鋪名稱的效果。

2.3 visit store:進入店鋪是一個行動點,在層級上弱於購買操作,但又強於頁面中查看更多的操作,所以在設計上做了中和處理,保留button的形式,但採用灰度設計,使之整體上不強但也不至於太弱,與店鋪名稱等內容達到一個持平的狀態。

3 retum policy:第3梯隊的資訊處理起來就更容易了,包括麵包屑、還有店鋪相關的detailed seller ratings等資訊,都用了最簡單處理手法,顏色為黑灰色,字型大小為12px。

4 chat now:聯繫方式線上狀態時屬第3梯隊,離線狀態時屬第4梯隊,在設計上沒有做過多的變化,直接灰度展示。

4. 第四象限

如果前面的資訊都能處理好的話,那麼優先順序最低的資訊就基本沒有什麼問題了。對於第四象限裡的資訊,連同頁面輔助性內容都統一採用#999的灰度和12px字型大小,整個頁面看起來會更乾淨清爽 。如下:

1.1 bulk price:關於批發價格資訊,直接以灰度處理,沒有做過多的變化。

1.2 店鋪地址:在店鋪名稱後面有一串店鋪地址,屬非必要且非重要資訊,純粹是需求需要,所以在設計上也是進行了弱化的灰度處理方式。

第五部分:視覺評審

通過對資訊層級的梳理,整個設計過程都非常順暢。在沒做之前,就基本能夠預知哪些資訊該如何處理,後面在細節上又進行了微調,下面便是與產品經理確認的最終稿。

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

兩個版本其中有一些不同點,我簡單標了幾個,大家可以對比下:

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

1 mouse over to zoom in:關於這個資訊,起初覺得使用者會去看產品細節,所以用了比較深的顏色,經過資訊梳理之後,發現它也並不那麼重要,一般如果想看產品細節更多會向下滑動看更多的圖片,所以放在了第四象限裡,在最終版時都採用了統一的灰度處理。

2 bulk price:起初採用的箭頭外面是有個小框的,且查看更多的箭頭與這個樣式還不一樣,總得來說有一點點小複雜,所以在最終版時,把箭頭的樣式全部進行了統一,只是因功能和層級不同,箭頭的顏色和方向做不同的處理而已。

3 shipping:起初設計時物流相關的資訊與產品的SKU並沒有放在一起,後面在梳理資訊層級時, 發現它都是使用者在購買產品時需要進行操作的項,所以在最終版的設計時把操作類內容都整體放在了一起。

4 add to wish list:關於我的最愛,會感覺是一個比較重要的功能,所以不管是icon還是文案都用了深一點的顏色,雖然層級上也並不明顯,但會影響整個頁面資訊層次的展示,所以在最終版設計時也做了降級的處理。

5 保障資訊:這個資訊也是憑個人購物的感覺來做,覺得應該是比較重要的內容,所以起初設計時,採用了較大的塊面來展示,實際上這個資訊確實重要,但卻不是我們平臺的優勢,而這個保障資訊也起不了多大作用,所以在最終版也是做了弱化處理。

6 店鋪名稱:關於這個資訊,最初的設計只是用了普通的黑灰色,但從賣家層面來說,從需求出發,是希望產品詳情頁能夠給賣家店鋪引一些流量,但又不能過於明顯,還是以產品詳情資訊的展示為主,所以在最終版設計時就稍微強化了一下,採用深藍的連結色。

7 chat now:起初聯繫方式在離線狀態時雖然用的不是桔色,但也是比較深的顏色。當這種狀態時,我們是不鼓勵用戶點擊聯繫賣家的,因為時差的關係,賣家並不能即時回復,會影響買家的體驗,所以在最終版設計時就採用灰度處理,弱化這塊資訊。

除了以上這些,還有一些留白、間距等細節都做了不同的處理,在這裡就不一一說明了。

看了最終版與最初設計的區別,接下來再說下視覺評審時的一個小插曲。

即在視覺評審時有同學問到“物流的輔助說明資訊感覺是比較重要的內容,現在用這個灰色好像有些弱”。

大家注意這個問題,前面說的是資訊的重要性,跟需求有關。後面說的是設計,總體來說,是感覺用灰色有些弱,好像是這個顏色的原因,是設計的問題,但其實是這樣嗎?

當然不是!因為物流是重要,但前面也說了為什麼要弱化的原因,平臺的發展階段不同,後面若物流發展起來,當然可以再強化物流資訊。

所以當時我並沒有就物流的輔助說明資訊用什麼顏色這個問題展開討論,而是首先說明產品詳情頁裡確實有很多很重要的資訊,不同重要程度的內容,處理方式也不一樣。而物流的輔助資訊屬優先順序最低的一個類別,體現在設計中便是用了灰色。另外,你只提了這個資訊有些弱,而像產品的批發價、人民幣價等這類資訊都沒有覺得弱,那說明它可能不是顏色的問題,而是我們在做資訊層級時把它放在了最低的一級。

說完之後,提問的同學隨即就明白了這樣設計的原因,轉而與產品經理探討物流資訊屬於哪個層級的問題。當然最後仍然是屬於最低的一級。但這樣至少避免了在設計上進行無謂的討論,因為有時候表面看起來是設計問題,但實際上卻是需求的問題。

評審最後,除了一些視覺上的小點要調整之外,整個過程都十分的順利,大部分都得益於用“十字法”對資訊層級做了梳理。

以上便是在做詳情頁改版時遇到因資訊不明確問題的整個過程,當然還有其它的一些問題,這裡就不一一詳說了。

後面換了新工作後,某天有個同事跟我說頁面資訊內容太多,不知該如何設計才能更好看?我心裡想這又是一個典型的資訊層級沒有梳理好卻希望通過設計手段去解決的問題。於是我就跟他講了十字法,把所有資訊按照這四個象限進行分類,並同他一起梳理,然後發現其實頁面中並不需要展示那麼多資訊,去掉了將近一半內容,設計起來不但清晰,而且也更容易些。

以上便是用十字法構建設計中的資訊層級。當你在設計中不能自拔,或是反復調整,或與產品經理意見不同時,可以思考下是否遇到了資訊不明確的問題。若是,便可以用上述方法説明自己來構建資訊層級。

------