2019-10-10 資深UI設計者
日常工作中，經常聽到交互和視覺同學有著如下對話：
可以看到，無論交互還是視覺同學的提問，其實都是圍繞「信息」表達的邏輯。視覺同學設計過程中，應該如何理解交互稿件，并進一步體現交互的層級邏輯？是否可以對交互稿的布局進行調整發揮？我們通過案例來一起看看。
目前，頁面類設計一般分為運營型和平臺型。
關注重點：「活動利益點」「模塊內容順序」「視覺發揮空間大」
活動頁設計中，信息的層級表達相對簡單，一般分為主氛圍圖-體現活動主題、內容展示區-直接轉化、尾部兜底區-相關擴展。這類型需求，重點在理解交互稿中主題的表達、內容區的分類及重點元素體現。視覺設計師在該類型的設計中，發揮度是很大的。
關注重點：「層級結構」「瀏覽順序」「視覺在信息邏輯之上發揮」
平臺類設計項目，交互設計師通過頁面框架、模塊設計來表達產品/運營的策劃思路，涉及內容及模塊更多，且包含著復雜的邏輯關系。一個優秀的平臺視覺設計師，應當是通過好的視覺表達，按照交互信息層級關系，將信息內容傳遞給用戶。這里視覺同學要避免兩個誤區：完全按照交互框架和排布，只是純粹填色；從「好看」的角度重新布局，忽略交互層級關系。
下圖是美妝頻道的一次改版，通過觀察交互稿和視覺稿可以看到，這位視覺設計師在交互稿的基礎上，采用了更靈活的視覺引導方式。這些改變是否有效傳遞了交互邏輯？視覺階段的這些調整是否都合適呢？看完本文，你就能有一個清晰的答案了。
瀏覽順序 元素表意
這是一個新品速遞模塊的設計方案。交互稿表達的信息是：這個區塊是用來介紹新品的，首先希望用戶知道模塊屬性是什么，然后讓用戶快速了解推薦商品是什么，及為什么值得買。視覺稿較好的傳遞了交互層級及信息表達，首先突出了欄目名稱讓用戶能一眼看到，其次是商品及商品特性展示；而稿件中的欄目名稱位置和樣式則在視覺上做了自由的發揮。
小結：模塊中各元素的瀏覽引導（眼睛瀏覽路徑）需要嚴格按照交互邏輯，元素的表達和位置可以根據邏輯發揮。
下面這組案例，在信息層級上，視覺稿是否完整傳遞了交互邏輯？先自己思考一下吧~
模塊比重 內容布局
交互層級來看，整個區域有2個模塊「正在進行」和「品牌精選」，每個模塊有4個等大的展示單元格。而視覺稿中，「正在進行」模塊的單元格變成了兩大兩小。嚴格來說，這個調整是不符合交互邏輯的。
但是，視覺稿的輸出效果明顯更靈活，瀏覽層次更佳！那，能不能這么改呢？
這需要回到，為什么交互輸出時，畫成了等大樣式。在交互環節，運營側提出四個專題希望是相同層級，無優先級的差異。
這種情況下，視覺同學如果仍然堅持有層級差異的視覺感官更好，可以先和交互同學一起商量，從用戶體驗的角度來看，這個改變是否有嚴重影響，如果團隊內部也都認為改動后的效果更佳，可以一起找到對應的運營同學，說明原因，建議他們進行調整；同時去了解這樣的調整對業務方的業務表達是否有影響。
小結：視覺表達要關注信息模塊的比重，視覺側好的想法也要直接提出和交互及業務方討論
上面這個案例也是關于模塊比重的，最大的差異在于欄目名稱及入口的調整。從不強調樓層名稱變成樓層名稱成為模塊的視覺焦點，因涉及到模塊比重，類似的改動也建議和交互設計師進行討論。同樣，該案例的改動，豐富了樓層樣式，并通過標題模塊強調了樓層的調性氛圍，同時并未對用戶閱讀體驗造成不好的影響，因此是個視覺提升交互表達的優秀案例。
對于同層級關系的單元格，我們也可以采用不同的操作方式，比如上面案例中，視覺環節使用了疊起的展示樣式。相對于交互，優點在于增加了一種互動形式，而缺點則在于會對部分信息進行遮蓋，不能直觀呈現全部內容。這個案例的處理方式是，我們將兩種方案的優劣告知運營方，運營方認為可以犧牲部分信息的呈現，而選擇互動方式的不同呈現。
我們以TAB來舉例，TAB形式體現的是并列關系的多個模塊呈現，視覺設計師可以根據不同場景用不同視覺方案來呈現。
常規的視覺展示
場景化表達-日歷
下面案例中，交互傳達的是一周七天的食物推薦，在視覺階段可以把TAB樣式設計得更貼近日歷，更貼合模塊的主題表達。
場景化表達-餐桌
這個案例視覺側在模塊面積上進行擴大，影響到原首屏內展示內容的信息量。這種情況則需要與業務同學進行溝通，信息后置是否會影響他們在首屏信息的展示需求。一般活動類頁面，首屏內容和頁面長度的要求，相對寬松；如果是工具類/綜合性展示頁面，信息是否能在首屏出現，對頁面點擊和使用效率會有很大影響。
TAB的引導位置
下面案例中，因為TAB的位置發生了調整，用戶的閱讀順序發生了變化。交互稿中，我們希望用戶先看到TAB分類以了解推薦手機的不同緯度；而視覺稿中，優先讓用戶看到推薦商品，如果首輪推薦無興趣，再通過TAB切換查看其它維度內容。
元素的不同呈現順序會體現不同的交互邏輯。
下圖中的推薦區模塊，交互上的順序是圖→人物→具體商品描述，首先強調的是商品，其次是用戶的評價；而視覺稿上的順序是人物→圖→具體商品描述，首先調的是評價的人，再說商品是什么。兩種邏輯其實都符合「食鮮者說」的邏輯，但從屬關系是不同的。這里的邏輯決策是，如果評價用戶是知名度較高的，可以通過人物為食物加分，則我們選擇視覺稿邏輯；而如果我們是靠商品圖本身致勝，評論者只是輔助決策元素，則選擇交互稿邏輯。
模塊間的層級關系，可以通過去色來快速判斷，是否符合交互瀏覽要求。去除顏色和元素對界面視覺優先級的影響，更聚焦邏輯本身。
對比下面案例，去色后可以更容易看到，優化后方案更加整體，視覺引導也更加順暢。
交互稿中體現的邏輯，涉及到樣式/位置調整的，我們應遵循原則：「在保證信息順序、層級關系、信息占比邏輯正確的前提下，視覺可以進行專業的各種發揮」。
文章來源：優設