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

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

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

目前，頁面類設(shè)計一般分為運營型和平臺型。

運營型

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

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

平臺型

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

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

案例

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

1. 元素位置及表意

瀏覽順序 元素表意

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

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

2. 模塊比重及樣式

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

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

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

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

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

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

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

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

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

3. 控件樣式

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

常規(guī)的視覺展示

場景化表達-日歷

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

場景化表達-餐桌

這個案例視覺側(cè)在模塊面積上進行擴大，影響到原首屏內(nèi)展示內(nèi)容的信息量。這種情況則需要與業(yè)務(wù)同學進行溝通，信息后置是否會影響他們在首屏信息的展示需求。一般活動類頁面，首屏內(nèi)容和頁面長度的要求，相對寬松；如果是工具類/綜合性展示頁面，信息是否能在首屏出現(xiàn)，對頁面點擊和使用效率會有很大影響。

TAB的引導位置

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

4. 元素順序

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

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

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

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

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

小結(jié)

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

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