京東團隊出品!視覺設計師應該掌握的五類交互邏輯 - 優設網 - UISDC

京東團隊出品!視覺設計師應該掌握的五類交互邏輯

2019/10/09 12160評論區

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

  • 視覺同學:「這個內容我想換個位置,可以嗎?」「我可以用另外一種布局方式嘛?」…
  • 交互同學:「你這里的表達有些歧義,用戶容易誤解,需要修改?!埂剛飫鋝慵豆叵擋惶?,應該更強調XX內容?!?#8230;

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

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

運營型

關注重點:「活動利益點」「??檳諶菟承頡埂甘泳醴⒒涌占浯蟆?/p>

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

平臺型

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

平臺類設計項目,交互設計師通過頁面框架、??檣杓評幢澩鋝?運營的策劃思路,涉及內容及??楦?,且包含著復雜的邏輯關系。一個優秀的平臺視覺設計師,應當是通過好的視覺表達,按照交互信息層級關系,將信息內容傳遞給用戶。這里視覺同學要避免兩個誤區:完全按照交互框架和排布,只是純粹填色;從「好看」的角度重新布局,忽略交互層級關系。

案例

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

1. 元素位置及表意

瀏覽順序 元素表意

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

小結:??櫓懈髟氐匿酪跡ㄑ劬︿纜肪叮┬枰細癜湊戰換ヂ嘸?,元素的表達和位置可以根據邏輯發揮。

2. ??楸戎丶把?/h5>

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

??楸戎?內容布局

交互層級來看,整個區域有2個??欏剛誚小購汀鈣放憑 ?,每個??橛?個等大的展示單元格。而視覺稿中,「正在進行」??櫚牡ピ癖涑閃肆醬罅叫?。嚴格來說,這個調整是不符合交互邏輯的。

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

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

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

小結:視覺表達要關注信息??櫚謀戎?,視覺側好的想法也要直接提出和交互及業務方討論

上面這個案例也是關于??楸戎氐?,最大的差異在于欄目名稱及入口的調整。從不強調樓層名稱變成樓層名稱成為??櫚氖泳踅溝?,因涉及到??楸戎?,類似的改動也建議和交互設計師進行討論。同樣,該案例的改動,豐富了樓層樣式,并通過標題??榍康髁寺ゲ愕牡饜苑瘴?,同時并未對用戶閱讀體驗造成不好的影響,因此是個視覺提升交互表達的優秀案例。

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

3. 控件樣式

我們以TAB來舉例,TAB形式體現的是并列關系的多個??槌氏?,視覺設計師可以根據不同場景用不同視覺方案來呈現。

常規的視覺展示

場景化表達-日歷

下面案例中,交互傳達的是一周七天的食物推薦,在視覺階段可以把TAB樣式設計得更貼近日歷,更貼合??櫚鬧魈獗澩?。

場景化表達-餐桌

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

TAB的引導位置

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

4. 元素順序

元素的不同呈現順序會體現不同的交互邏輯。

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

5. ??椴慵豆叵?/h5>

??榧淶牟慵豆叵?,可以通過去色來快速判斷,是否符合交互瀏覽要求。去除顏色和元素對界面視覺優先級的影響,更聚焦邏輯本身。

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

小結

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

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

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/5-interactive-logic

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里