萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

B2B 網站按鈕設計標準化指南:五大維度促進用戶高效互動

設計師分析能力>設計技術。按鈕(含真按鈕與偽按鈕)核心目的是讓用戶知曉「點這裡可提交數據/交互」。成敗標準:有需求用戶是否注意到、願意點擊,而非按鈕本身多漂亮。中國用戶受利益驅動,設計時刻關注用戶利益。

1. 高對比度醒目顏色:突出重要性

高對比度與醒目色常同時使用。多數情況需突出重要性,少數次要按鈕故意弱化。中國製造網搜索按鈕用高對比黃色,字體加粗,明顯優於同列灰色按鈕。

中國製造網搜索按鈕

2. 較大尺寸:視覺權重直觀表達

元素相對大小暗示重要性。阿里巴巴中國站服裝欄目搜索按鈕極大,因海量信息下搜索是核心價值入口,運營方極欲引導采購商搜索。新站信息少則不宜過度突出搜索,暴露弱點。

阿里巴巴大搜索按鈕
產品頁關鍵行動按鈕群

產品頁「簽訂保障合同」「立即詢價」等按鈕極大極顯眼,甚至犧牲美觀換取實用價值最大化。設計師須從「打造產品」高度對待每個元素,美觀有時須為實用犧牲。

3. 形狀規範:規則、突出、嚴肅

B2B 面向職業人士,工作嚴肅非娛樂化。按鈕宜長方形+小圓角,圓角過大顯不嚴肅。六大 B2B 站登錄/註冊按鈕多為長方形微圓角。主次行動按鈕並列時,用顏色區分(阿里巴巴做得佳)。

六站登錄按鈕對比
阿里巴巴 vs 慧聰網註冊按鈕

阿里巴巴用 CSS 強化系統按鈕,慧聰網直接用原生系統按鈕不顯眼,細節見真章。

反面教材:不合規範按鈕

  • 過圓→不嚴肅;
  • 過度突出→像補丁;
  • 為對齊強行超大→頁面粗糙。
失敗按鈕案例

4. 文字傳達期待與消除疑慮

吸引眼球後,用戶仍會問:為何點?有何好處?會有壞處?文案不解?按鈕文字須解答;需較多說明時,在按鈕上下左右輔助引導。熟知操作(登錄、提交)無需贅述。

按鈕文案與輔助文字

「免費註冊」打消收費疑慮、營銷免費牌;「立即登錄」催動會員;旁側「忘記密碼」「免費註冊」解決現實阻礙。六個按鈕均在告訴用戶「會員能做什麼,非會員快行動」,如電視購物話術,文案上盡量不加鏈接省去思考。

會員權益按鈕群

5. 圖標輔助:以形表意,文字精煉

小圖標提升精致度、降低認知負荷。按鈕文字簡短精煉,「點擊進入」四字純屬多餘(屬鼠標與我之間事)。播放器播放按鈕因普及度極高可純形狀表示,懸停提示補充文字。

帶圖標按鈕範例

按鈕文字與圖標組合,讓用戶幾乎無思考即懂含義

文章來源:不詳(B2B 設計規範研究)

copyright © 萬盛學電腦網 all rights reserved