日常工作中,經常聽到交互和視覺同學有著如下對話:

  • 視覺同學:「這個內容我想換個位置,可以嗎?」「我可以用另外一種結構方式嘛?」…
  • 交互同學:「你這里的表達有些歧義,用戶容易誤解,需要修改。」「這里層級關系不太對,應該更強調XX內容。」…

云南体彩网可以看到,無論交互還是視覺同學的提問,其實都是圍繞「信息」表達的邏輯。視覺同學設計過程中,應該如何理解交互稿件,并進一步體現交互的層級邏輯?是否可以對交互稿的結構進行調劑發揮?我們通過案例來一起看看。

目前,頁面類設計一般分為運營型和平臺型。

運營型

云南体彩网關注重點:「活動利益點」「模塊內容順序」「視覺發揮空間大」

云南体彩网活動頁設計中,信息的層級表達相對簡單,一般分為主氛圍圖-體現活動主題、內容展示區-直接轉化、尾部兜底區-相關擴展。這類型需求,重點在理解交互稿中主題的表達、內容區的分類及重點元素體現。視覺設計師在該類型的設計中,發揮度是很大的。

平臺型

關注重點:「層級結構」「瀏覽順序」「視覺在信息邏輯之上發揮」

平臺類設計項目,交互設計師通過頁面框架、模塊設計來表達產品/運營的謀劃思路,涉及內容及模塊更多,且包含著復雜的邏輯關系。一個優秀的平臺視覺設計師,應當是通過好的視覺表達,依照交互信息層級關系,將信息內容傳遞給用戶。這里視覺同學要避免兩個誤區:完全依照交互框架和排布,只是純粹填色;從「好看」的角度重新結構,忽略交互層級關系。

案例

下圖是美妝頻道的一次改版,通過觀察交互稿和視覺稿可以看到,這位視覺設計師在交互稿的基礎上,采取了更靈活的視覺引導方式。這些改變是否有效傳遞了交互邏輯?視覺階段的這些調劑是否都合適呢?看完本文,你就能有一個清晰的謎底了。

1. 元素位置及表意

瀏覽順序 元素表意

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

云南体彩网小結:模塊中各元素的瀏覽引導(眼睛瀏覽路徑)需要嚴格依照交互邏輯,元素的表達和位置可以根據邏輯發揮。

2. 模塊比重及樣式

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

模塊比重 內容結構

交互層級來看,整個區域有2個模塊「正在進行」和「品牌精選」,每個模塊有4個等大的展示單位格。而視覺稿中,「正在進行」模塊的單位格釀成了兩大兩小。嚴格來說,這個調劑是不符合交互邏輯的。

云南体彩网但是,視覺稿的輸出效果明顯更靈活,瀏覽條理更佳!那,能不克不及這么改呢?

云南体彩网這需要回到,為什么交互輸出時,畫成了等大樣式。在交互環節,運營側提出四個專題希望是相同層級,無優先級的差別。

云南体彩网這種情況下,視覺同學如果仍然堅持有層級差別的視覺感官更好,可以先和交互同學一起商量,從用戶體驗的角度來看,這個改變是否有嚴重影響,如果團隊內部也都認為改動后的效果更佳,可以一起找到對應的運營同學,說明原因,建議他們進行調劑;同時去了解這樣的調劑對業務方的業務表達是否有影響。

云南体彩网小結:視覺表達要關注信息模塊的比重,視覺側好的想法也要直接提出和交互及業務方討論

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

對于同層級關系的單位格,我們也可以采取分歧的操作方式,好比上面案例中,視覺環節使用了疊起的展示樣式。相對于交互,優點在于增加了一種互動形式,而缺點則在于會對部分信息進行遮蓋,不克不及直觀涌現全部內容。這個案例的處理方式是,我們將兩種方案的優劣告知運營方,運營方認為可以犧牲部分信息的涌現,而選擇互動方式的分歧涌現。

3. 控件樣式

我們以TAB來舉例,TAB形式體現的是并列關系的多個模塊涌現,視覺設計師可以根據分歧場景用分歧視覺方案來涌現。

慣例的視覺展示

場景化表達-日歷

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

場景化表達-餐桌

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

TAB的引導位置

下面案例中,因為TAB的位置發生了調劑,用戶的閱讀順序發生了變更。交互稿中,我們希望用戶先看到TAB分類以了解推薦手機的分歧緯度;而視覺稿中,優先讓用戶看到推薦商品,如果首輪推薦無興趣,再通過TAB切換查看其它維度內容。

4. 元素順序

云南体彩网元素的分歧涌現順序會體現分歧的交互邏輯。

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

5. 模塊層級關系

模塊間的層級關系,可以通過去色來快速判斷,是否符合交互瀏覽要求。去除顏色和元素對界面視覺優先級的影響,更聚焦邏輯自己。

云南体彩网對比下面案例,去色后可以更容易看到,優化后方案更加整體,視覺引導也更加順暢。

小結

交互稿中體現的邏輯,涉及到樣式/位置調劑的,我們應遵循原則:「在担保信息順序、層級關系、信息占比邏輯正確的前提下,視覺可以進行專業的各種發揮」。

歡迎收藏「京東設計中心JDC」的小法式:

點贊
收藏 93

發表評論 已發布 3

還可以輸入 800 個字
 
 
載入中....
相關推薦
3 收藏