網(wǎng)頁設(shè)計(jì)方法之十字法

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

共包含五個(gè)部分，下面為第一部分。

第一部分：反復(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á)到對(duì)方的要求，所以就耐著性子改，但心里卻是一萬只草泥馬略過……

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

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

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

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

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

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

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

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

1. 回顧四象限原則

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第四部分：根據(jù)信息層級(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)行簡(jiǎn)單的說明，如下：

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

1.2 產(chǎn)品價(jià)格：產(chǎn)品價(jià)格的處理方式，不但在字號(hào)上均大于其它內(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)先級(jí)為第2梯隊(duì)，由于其所在位置的特殊性，在設(shè)計(jì)上并不需要強(qiáng)化，所以用的是最普通的黑灰色，字號(hào)上相較產(chǎn)品價(jià)格也要小些。因?yàn)楸旧硭诘膮^(qū)域已經(jīng)非常明顯了。

2. 第二象限

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

產(chǎn)品評(píng)價(jià)和成交量：這兩個(gè)雖不是產(chǎn)品必要信息，但在用戶購買決策中起著非常重要的作用。所以在設(shè)計(jì)上與第一象限里第2梯隊(duì)的信息，采用了相同的處理手法，在重點(diǎn)信息的字號(hào)和顏色上均與產(chǎn)品名稱保持一致，另外擔(dān)心這塊過重，所以輔助性信息的采用了頁面中的最小字號(hào)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)整字號(hào)的大小來達(dá)到相對(duì)平衡的效果。

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

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

2.3 visit store：進(jìn)入店鋪是一個(gè)行動(dòng)點(diǎn)，在層級(jí)上弱于購買操作，但又強(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等信息，都用了最簡(jiǎn)單處理手法，顏色為黑灰色，字號(hào)為12px。

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

4. 第四象限

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

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

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

第五部分：視覺評(píng)審

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

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

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

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

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)一，只是因功能和層級(jí)不同，箭頭的顏色和方向做不同的處理而已。

3 shipping：起初設(shè)計(jì)時(shí)物流相關(guān)的信息與產(chǎn)品的SKU并沒有放在一起，后面在梳理信息層級(jí)時(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)的顏色，雖然層級(jí)上也并不明顯，但會(huì)影響整個(gè)頁面信息層次的展示，所以在最終版設(shè)計(jì)時(shí)也做了降級(jí)的處理。

5 保障信息：這個(gè)信息也是憑個(gè)人購物的感覺來做，覺得應(yīng)該是比較重要的內(nèi)容，所以起初設(shè)計(jì)時(shí)，采用了較大的塊面來展示，實(shí)際上這個(gè)信息確實(shí)重要，但卻不是我們平臺(tái)的優(yōu)勢(shì)，而這個(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ū)別，接下來再說下視覺評(píng)審時(shí)的一個(gè)小插曲。

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

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

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

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

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

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

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

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

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

名稱欄目：網(wǎng)頁設(shè)計(jì)方法之十字法
分享地址：http://www.bm7419.com/news41/158841.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、微信小程序、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)