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

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

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

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

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

而且我自認(rèn)為算是一個(gè)好脾氣的設(shè)計(jì)師，但總是這樣反復(fù)調(diào)整，真的有些不耐煩起來?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站

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

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

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

這顯然是本末倒置的，因?yàn)樵O(shè)計(jì)是建立在需求明確的前提下，若需求都不確定，那么怎么設(shè)計(jì)都是不對的。就像猜謎一樣，但猜謎至少還有一個(gè)謎底，而這種情況連謎底都沒有，因?yàn)槌鲱}人自己也不知道。——重慶定制網(wǎng)站

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

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

1. 回顧四象限原則

意識到問題之后，便想先把信息層級明確下來再設(shè)計(jì)。但要怎么明確呢？憑感覺是不行了，因?yàn)樗豢孔V，此時(shí)此景需要的是理性的分析。

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

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

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

因?yàn)槲覀冊谠O(shè)計(jì)中，關(guān)于某個(gè)信息只有重要不重要，沒有緊急不緊急一說，若只有重要這一個(gè)權(quán)重，就無法構(gòu)成四象限，必須再增加一個(gè)才行。

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

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

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

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

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

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

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

另外三個(gè)象限依次是優(yōu)先級2 / 優(yōu)先級3 / 優(yōu)先級4。

把這個(gè)勾畫出來之后，便拉著產(chǎn)品經(jīng)理一起按照這四個(gè)象限對產(chǎn)品詳情頁的信息重新進(jìn)行了梳理?！?a href="http://pgwc.com.cn" target="_self">網(wǎng)站設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

1. 第一象限

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

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

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

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

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

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

2. 第二象限

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

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

3. 第三象限

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

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

2.1 店鋪名稱：第2梯隊(duì)的信息主要跟店鋪相關(guān)，處理起來會(huì)簡單很多，由于店鋪名稱要明確表示可點(diǎn)擊，但又不希望太強(qiáng)，所以用了深藍(lán)的鏈接色?！?a href="http://pgwc.com.cn" target="_self">重慶定制網(wǎng)站

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

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

3 retum policy：第3梯隊(duì)的信息處理起來就更容易了，包括面包屑、還有店鋪相關(guān)的detailed seller ratings等信息，都用了最簡單處理手法，顏色為黑灰色，字號為12px?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁設(shè)計(jì)

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

4. 第四象限

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

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

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

第五部分：視覺評審

通過對信息層級的梳理，整個(gè)設(shè)計(jì)過程都非常順暢。在沒做之前，就基本能夠預(yù)知哪些信息該如何處理，后面在細(xì)節(jié)上又進(jìn)行了微調(diào)，下面便是與產(chǎn)品經(jīng)理確認(rèn)的最終稿?！?a href="http://pgwc.com.cn" target="_self">網(wǎng)頁設(shè)計(jì)

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

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

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

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

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

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

4 add to wish list：關(guān)于收藏夾，會(huì)感覺是一個(gè)比較重要的功能，所以不管是icon還是文案都用了深一點(diǎn)的顏色，雖然層級上也并不明顯，但會(huì)影響整個(gè)頁面信息層次的展示，所以在最終版設(shè)計(jì)時(shí)也做了降級的處理?！?a href="http://pgwc.com.cn" target="_self">重慶定制網(wǎng)站

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

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

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

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

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

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

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

當(dāng)然不是！因?yàn)槲锪魇侵匾?，但前面也說了為什么要弱化的原因，平臺(tái)的發(fā)展階段不同，后面若物流發(fā)展起來，當(dāng)然可以再強(qiáng)化物流信息。

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

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

評審最后，除了一些視覺上的小點(diǎn)要調(diào)整之外，整個(gè)過程都十分的順利，大部分都得益于用“十字法

來源聲明：本文【設(shè)計(jì)反復(fù)修改？可能是你的信息層級沒有梳理好！】由潤雪科技編輯原創(chuàng)或采編整理，如需轉(zhuǎn)載請注明來自潤雪科技。以上內(nèi)容部分（包含圖片、文字）來源于網(wǎng)絡(luò)，如有侵權(quán)，請及時(shí)與本站聯(lián)系。

TAG標(biāo)簽：網(wǎng)站開發(fā) 網(wǎng)站設(shè)計(jì)