日常工作中，經(jīng)常聽到交互和視覺(jué)同學(xué)有著如下對(duì)話：

• 視覺(jué)同學(xué)：「這個(gè)內(nèi)容我想換個(gè)位置，可以嗎？」「我可以用另外一種布局方式嘛？」…
• 交互同學(xué)：「你這里的表達(dá)有些歧義，用戶容易誤解，需要修改?！埂高@里層級(jí)關(guān)系不太對(duì)，應(yīng)該更強(qiáng)調(diào)XX內(nèi)容?！埂?

可以看到，無(wú)論交互還是視覺(jué)同學(xué)的提問(wèn)，其實(shí)都是圍繞「信息」表達(dá)的邏輯。視覺(jué)同學(xué)設(shè)計(jì)過(guò)程中，應(yīng)該如何理解交互稿件，并進(jìn)一步體現(xiàn)交互的層級(jí)邏輯？是否可以對(duì)交互稿的布局進(jìn)行調(diào)整發(fā)揮？我們通過(guò)案例來(lái)一起看看。

目前，頁(yè)面類設(shè)計(jì)一般分為運(yùn)營(yíng)型和平臺(tái)型。

運(yùn)營(yíng)型

關(guān)注重點(diǎn)：「活動(dòng)利益點(diǎn)」「模塊內(nèi)容順序」「視覺(jué)發(fā)揮空間大」

活動(dòng)頁(yè)設(shè)計(jì)中，信息的層級(jí)表達(dá)相對(duì)簡(jiǎn)單，一般分為主氛圍圖-體現(xiàn)活動(dòng)主題、內(nèi)容展示區(qū)-直接轉(zhuǎn)化、尾部兜底區(qū)-相關(guān)擴(kuò)展。這類型需求，重點(diǎn)在理解交互稿中主題的表達(dá)、內(nèi)容區(qū)的分類及重點(diǎn)元素體現(xiàn)。視覺(jué)設(shè)計(jì)師在該類型的設(shè)計(jì)中，發(fā)揮度是很大的。

平臺(tái)型

關(guān)注重點(diǎn)：「層級(jí)結(jié)構(gòu)」「瀏覽順序」「視覺(jué)在信息邏輯之上發(fā)揮」

平臺(tái)類設(shè)計(jì)項(xiàng)目，交互設(shè)計(jì)師通過(guò)頁(yè)面框架、模塊設(shè)計(jì)來(lái)表達(dá)產(chǎn)品/運(yùn)營(yíng)的策劃思路，涉及內(nèi)容及模塊更多，且包含著復(fù)雜的邏輯關(guān)系。一個(gè)優(yōu)秀的平臺(tái)視覺(jué)設(shè)計(jì)師，應(yīng)當(dāng)是通過(guò)好的視覺(jué)表達(dá)，按照交互信息層級(jí)關(guān)系，將信息內(nèi)容傳遞給用戶。這里視覺(jué)同學(xué)要避免兩個(gè)誤區(qū)：完全按照交互框架和排布，只是純粹填色；從「好看」的角度重新布局，忽略交互層級(jí)關(guān)系。

案例

下圖是美妝頻道的一次改版，通過(guò)觀察交互稿和視覺(jué)稿可以看到，這位視覺(jué)設(shè)計(jì)師在交互稿的基礎(chǔ)上，采用了更靈活的視覺(jué)引導(dǎo)方式。這些改變是否有效傳遞了交互邏輯？視覺(jué)階段的這些調(diào)整是否都合適呢？看完本文，你就能有一個(gè)清晰的答案了。

1. 元素位置及表意

瀏覽順序 元素表意

這是一個(gè)新品速遞模塊的設(shè)計(jì)方案。交互稿表達(dá)的信息是：這個(gè)區(qū)塊是用來(lái)介紹新品的，首先希望用戶知道模塊屬性是什么，然后讓用戶快速了解推薦商品是什么，及為什么值得買。視覺(jué)稿較好的傳遞了交互層級(jí)及信息表達(dá)，首先突出了欄目名稱讓用戶能一眼看到，其次是商品及商品特性展示；而稿件中的欄目名稱位置和樣式則在視覺(jué)上做了自由的發(fā)揮。

小結(jié)：模塊中各元素的瀏覽引導(dǎo)（眼睛瀏覽路徑）需要嚴(yán)格按照交互邏輯，元素的表達(dá)和位置可以根據(jù)邏輯發(fā)揮。

2. 模塊比重及樣式

下面這組案例，在信息層級(jí)上，視覺(jué)稿是否完整傳遞了交互邏輯？先自己思考一下吧~

模塊比重 內(nèi)容布局

交互層級(jí)來(lái)看，整個(gè)區(qū)域有2個(gè)模塊「正在進(jìn)行」和「品牌精選」，每個(gè)模塊有4個(gè)等大的展示單元格。而視覺(jué)稿中，「正在進(jìn)行」模塊的單元格變成了兩大兩小。嚴(yán)格來(lái)說(shuō)，這個(gè)調(diào)整是不符合交互邏輯的。

但是，視覺(jué)稿的輸出效果明顯更靈活，瀏覽層次更佳！那，能不能這么改呢？

這需要回到，為什么交互輸出時(shí)，畫成了等大樣式。在交互環(huán)節(jié)，運(yùn)營(yíng)側(cè)提出四個(gè)專題希望是相同層級(jí)，無(wú)優(yōu)先級(jí)的差異。

這種情況下，視覺(jué)同學(xué)如果仍然堅(jiān)持有層級(jí)差異的視覺(jué)感官更好，可以先和交互同學(xué)一起商量，從用戶體驗(yàn)的角度來(lái)看，這個(gè)改變是否有嚴(yán)重影響，如果團(tuán)隊(duì)內(nèi)部也都認(rèn)為改動(dòng)后的效果更佳，可以一起找到對(duì)應(yīng)的運(yùn)營(yíng)同學(xué)，說(shuō)明原因，建議他們進(jìn)行調(diào)整；同時(shí)去了解這樣的調(diào)整對(duì)業(yè)務(wù)方的業(yè)務(wù)表達(dá)是否有影響。

小結(jié)：視覺(jué)表達(dá)要關(guān)注信息模塊的比重，視覺(jué)側(cè)好的想法也要直接提出和交互及業(yè)務(wù)方討論

上面這個(gè)案例也是關(guān)于模塊比重的，最大的差異在于欄目名稱及入口的調(diào)整。從不強(qiáng)調(diào)樓層名稱變成樓層名稱成為模塊的視覺(jué)焦點(diǎn)，因涉及到模塊比重，類似的改動(dòng)也建議和交互設(shè)計(jì)師進(jìn)行討論。同樣，該案例的改動(dòng)，豐富了樓層樣式，并通過(guò)標(biāo)題模塊強(qiáng)調(diào)了樓層的調(diào)性氛圍，同時(shí)并未對(duì)用戶閱讀體驗(yàn)造成不好的影響，因此是個(gè)視覺(jué)提升交互表達(dá)的優(yōu)秀案例。

對(duì)于同層級(jí)關(guān)系的單元格，我們也可以采用不同的操作方式，比如上面案例中，視覺(jué)環(huán)節(jié)使用了疊起的展示樣式。相對(duì)于交互，優(yōu)點(diǎn)在于增加了一種互動(dòng)形式，而缺點(diǎn)則在于會(huì)對(duì)部分信息進(jìn)行遮蓋，不能直觀呈現(xiàn)全部?jī)?nèi)容。這個(gè)案例的處理方式是，我們將兩種方案的優(yōu)劣告知運(yùn)營(yíng)方，運(yùn)營(yíng)方認(rèn)為可以犧牲部分信息的呈現(xiàn)，而選擇互動(dòng)方式的不同呈現(xiàn)。

3. 控件樣式

我們以TAB來(lái)舉例，TAB形式體現(xiàn)的是并列關(guān)系的多個(gè)模塊呈現(xiàn)，視覺(jué)設(shè)計(jì)師可以根據(jù)不同場(chǎng)景用不同視覺(jué)方案來(lái)呈現(xiàn)。

常規(guī)的視覺(jué)展示

場(chǎng)景化表達(dá)-日歷

下面案例中，交互傳達(dá)的是一周七天的食物推薦，在視覺(jué)階段可以把TAB樣式設(shè)計(jì)得更貼近日歷，更貼合模塊的主題表達(dá)。

場(chǎng)景化表達(dá)-餐桌

這個(gè)案例視覺(jué)側(cè)在模塊面積上進(jìn)行擴(kuò)大，影響到原首屏內(nèi)展示內(nèi)容的信息量。這種情況則需要與業(yè)務(wù)同學(xué)進(jìn)行溝通，信息后置是否會(huì)影響他們?cè)谑灼列畔⒌恼故拘枨?。一般活?dòng)類頁(yè)面，首屏內(nèi)容和頁(yè)面長(zhǎng)度的要求，相對(duì)寬松；如果是工具類/綜合性展示頁(yè)面，信息是否能在首屏出現(xiàn)，對(duì)頁(yè)面點(diǎn)擊和使用效率會(huì)有很大影響。

TAB的引導(dǎo)位置

下面案例中，因?yàn)門AB的位置發(fā)生了調(diào)整，用戶的閱讀順序發(fā)生了變化。交互稿中，我們希望用戶先看到TAB分類以了解推薦手機(jī)的不同緯度；而視覺(jué)稿中，優(yōu)先讓用戶看到推薦商品，如果首輪推薦無(wú)興趣，再通過(guò)TAB切換查看其它維度內(nèi)容。

4. 元素順序

元素的不同呈現(xiàn)順序會(huì)體現(xiàn)不同的交互邏輯。

下圖中的推薦區(qū)模塊，交互上的順序是圖→人物→具體商品描述，首先強(qiáng)調(diào)的是商品，其次是用戶的評(píng)價(jià)；而視覺(jué)稿上的順序是人物→圖→具體商品描述，首先調(diào)的是評(píng)價(jià)的人，再說(shuō)商品是什么。兩種邏輯其實(shí)都符合「食鮮者說(shuō)」的邏輯，但從屬關(guān)系是不同的。這里的邏輯決策是，如果評(píng)價(jià)用戶是知名度較高的，可以通過(guò)人物為食物加分，則我們選擇視覺(jué)稿邏輯；而如果我們是靠商品圖本身致勝，評(píng)論者只是輔助決策元素，則選擇交互稿邏輯。

5. 模塊層級(jí)關(guān)系

模塊間的層級(jí)關(guān)系，可以通過(guò)去色來(lái)快速判斷，是否符合交互瀏覽要求。去除顏色和元素對(duì)界面視覺(jué)優(yōu)先級(jí)的影響，更聚焦邏輯本身。

對(duì)比下面案例，去色后可以更容易看到，優(yōu)化后方案更加整體，視覺(jué)引導(dǎo)也更加順暢。

小結(jié)

交互稿中體現(xiàn)的邏輯，涉及到樣式/位置調(diào)整的，我們應(yīng)遵循原則：「在保證信息順序、層級(jí)關(guān)系、信息占比邏輯正確的前提下，視覺(jué)可以進(jìn)行專業(yè)的各種發(fā)揮」。

文章來(lái)源：優(yōu)設(shè)