首頁

2025年B端設計還會有哪些趨勢?

天宇 行業(yè)趨勢

2024年,行業(yè)經(jīng)歷了飛書裁員、Salesforce視覺更新、釘釘商業(yè)化等重大事件,這些變化不僅影響了設計師的職業(yè)發(fā)展,也重塑了B端設計的市場格局。站在2025年的起點,本文將深入探討B(tài)端設計的未來趨勢,供大家參考。

每一年,我都有一個“任務”,為過去一整年的 B 端設計師進行匯報。

一方面是給大家匯報過去一整年瞬息變化的市場,同時呢也想聊聊站在我的視角當中,未來一整年的行業(yè)發(fā)展趨勢,以及我自己的判斷。

那今年也不例外,在今年整體行業(yè)的大背景下,我們究竟應該何去何從?想坐下來靜靜的和大家聊聊~

今天我們主要聊三個方面:2024 B 端行業(yè)大事件、當前整體環(huán)境、2025 年 B 端設計趨勢判斷,文章有些長,內(nèi)容稍干,大家耐心觀看~

一、2024 B 端行業(yè)大事件

在回憶過去一整年時,我會覺得有幾件事情是非常重要,因此在這里提出給大家進行分享。

1. 飛書裁員設計師

在 2024 年年初,飛書裁員,據(jù)說設計師裁員高達 60%,用研100%… 這一件事帶來了一系列的連鎖反應。

首先是市場會覺得設計并沒有價值,B 端設計沒有價值,設計師只是一個作圖的工具。

因為飛書在我看來之前是異常重視用戶體驗,從我們梳理他們的設計改版開始,你會發(fā)現(xiàn)整個管理后臺產(chǎn)品都在往著好的方向發(fā)展。

但即使這樣,設計師也被裁員,會讓我們感到困惑,問題到底出在哪里?

同時,這樣大量且優(yōu)質(zhì)的設計師被裁過后,也會造成行業(yè)的踩踏效應。對于普通的設計師而言,行業(yè)內(nèi)卷,求職會異常艱難,相信在那段時間求職的同學、特別是在北京的同學都會有感悟,真的是異常艱難。

2. Salesforce 產(chǎn)品更新

在五月份時,沉寂許久的 Salesforce 迎來了其新版本的視覺更新,這是 Salesforce 成立以來,做的最大維度的更新。

首先整體頁面樣式經(jīng)歷了調(diào)整,從之前帶有上世紀 90 年代風格轉(zhuǎn)變?yōu)楦鼮槌墒?、商務化的風格,這使得整個界面的協(xié)調(diào)性得以增強,這也符合目前 B 端產(chǎn)品的視覺風格發(fā)展趨勢。

其次頁面之中有效減少了信息干擾,讓頁面內(nèi)容能夠清晰地呈現(xiàn)于用戶眼前。

同時針對元素圓角,將其增大。不過就我個人而言,不太欣賞整體圓角加大的設計,因為感覺這與 Salesforce 的整體品牌形象不夠契合。

最后會發(fā)現(xiàn),這次修改主要集中在界面樣式方面,對信息結構以及界面布局并沒有作出大規(guī)模的變動,我猜測他們是不敢做、也不能做。一個小的改動對于 Salesforce 這個龐然巨獸來說影響都會非常的大。

這里,想和大家一同聊聊 Salesforce 更新的原因竟是什么?

我認為,一方面是產(chǎn)品自身迭代的內(nèi)在需求,確實需要進行 Style 層面的更新維護;

另一方面則是為新推出的 AI 功能進行鋪墊,想試圖借助嶄新的視覺形象,吸引更多用戶去使用 AI 功能。這也是很多產(chǎn)品更新常用的手段,比如早些年的微信也經(jīng)常這樣用游戲來吸引用戶進行升級。

3. 釘釘商業(yè)化變現(xiàn)

在我們看來,一個良好的 B 端產(chǎn)品,一定是需要擁有更理想的商業(yè)模式,而釘釘?shù)纳虡I(yè)化就顯得更為順利。

釘釘自從在阿里被獨立出過后,幾次發(fā)布會都在強調(diào)自己的在商業(yè)模式上的進展和變化。

  • 在 PLG 方面,不斷提升基礎功能和復雜的流程管理,這讓更多的 ISV 企業(yè)入駐,打造完善的生態(tài);
  • 在 SLG 方面,會為企業(yè)提供更為完整的數(shù)字化解決方案,保證產(chǎn)品的高效運轉(zhuǎn)。

從整體來看會發(fā)現(xiàn)釘釘對于用戶的態(tài)度也會有所轉(zhuǎn)變,從原來 以“老板為核心”變?yōu)楝F(xiàn)在以“要考慮員工感受”,也說明整個 B 端產(chǎn)品整體的發(fā)展路徑就應該如此。

所以很多企業(yè)都是在產(chǎn)品初期,經(jīng)歷過混沌的時期過后才會需要 B 端設計師。

4. 設計行業(yè)整體氛圍較差

聊到公眾號文章,也順帶說說今年的設計氛圍和往年相比是更差的。

你會發(fā)現(xiàn)大家都不太愿意更新文章,無論是設計大會又或者是設計文章分享,最近能閱讀的東西真的很少,這會導致大家的交流異常的匱乏。

從我整理過去 B 端行業(yè)的資料來看,這兩年的資源更新是非常少的。

二、市場環(huán)境

我們簡單聊聊市場環(huán)境,對于整個互聯(lián)網(wǎng)行業(yè)來說,你會發(fā)現(xiàn)整體都是異常蕭條。

無論是 C 端產(chǎn)品的增長乏力也好、又或者是 B 端產(chǎn)品的行業(yè)不景氣也罷,總之過去一年大家整體過得都比較艱難。對于設計行業(yè)的各位來說,我們目前的狀態(tài)其實都是茍著~

因為設計師很難做到雪中送炭,也就是通過一個設計點,真正為企業(yè)、為產(chǎn)品創(chuàng)造更多的收入,所以這也就導致我們目前的處境十分尷尬。

你會發(fā)現(xiàn)大家在各個媒體上都在勸退 B 端設計師,說這是一個夕陽行業(yè)。

但這里想對剛入行的新人多說兩句。目前經(jīng)濟環(huán)境,任何行業(yè)都會有勸退的人,你要做的是去分析目前自己的選擇,也就是如果我不做 B 端設計師,我還有其他什么選擇?

比如你學習的是 環(huán)藝設計、城市規(guī)劃設計 等相關專業(yè),又或者是你自己已經(jīng)在 B 端工作多年,那可能 B 端設計師或許還是一個相對求職容易的行業(yè),尋找明確的方向,就能獲得行業(yè)當中的一些回報。

本來想說很多,但想想還是算了,今年的就業(yè)形勢確實有所回暖,我們可以期待一波~

三、2025 年 B 端產(chǎn)品的發(fā)展趨勢

對于 2025 年,我們會認為有以下幾個發(fā)展趨勢:

1. B 端產(chǎn)品 AI 化

AI是目前行業(yè)當中最迅猛的趨勢,B端產(chǎn)品也不例外。

對于很多B端產(chǎn)品而言,AI的出現(xiàn)優(yōu)化了用戶在日常工作當中使用繁瑣的問題,在許多B端產(chǎn)品當中,都會把AI當做是最為重要的產(chǎn)品功能。

比如我們之前總結過的:Salesforce、金碟、飛書,又或者是在阿里、騰訊內(nèi)部的很多系統(tǒng),都會通過AI的方式加以介入,來確保產(chǎn)品的高效使用。

在未來一年,我們要多去考慮 AI與語音交互、低代碼產(chǎn)品、配置類系統(tǒng)之間的碰撞,在未來肯定會有著更為不錯的發(fā)展。

2. 無代碼/低代碼產(chǎn)品

行業(yè)當中有著非常多的無代碼產(chǎn)品,原因在于國內(nèi)的大多數(shù)系統(tǒng),我們會發(fā)現(xiàn)通常都需要通過定制化的方式來進行處理。為此,行業(yè)當中就出現(xiàn)了較多的無代碼產(chǎn)品,將產(chǎn)品的功能提供給用戶進行配置和相應使用。比如常見的有釘釘宜搭,又或者是騰訊的微搭等等。這類產(chǎn)品的類型非常多。

但在行業(yè)中,有人會覺得這類型的產(chǎn)品不適用于小團隊的管理。因為如果本身是小團隊,需求整體沒有那么大。因此在行業(yè)里還會存在像多維表格這樣的系統(tǒng)來進行相應的呈現(xiàn)。

所以我們會發(fā)現(xiàn),這類型的產(chǎn)品其實是市場大環(huán)境所需。在未來一年,個人認為類似多維表格、Airtable 這類型的產(chǎn)品會更受大家歡迎。因為它們能夠很流暢地與 AI 進行結合,同時整個產(chǎn)品的規(guī)模結構也沒有那么大,更容易被用戶所接受。

3. 產(chǎn)品出海

產(chǎn)品出海是一個老生常談的話題,很早之前我們就有談到。由于國內(nèi)市場競爭激烈,而且對于應對市場需求已經(jīng)有了豐富的經(jīng)驗,很多企業(yè)將自己方向轉(zhuǎn)向國外。比如最早飛書推出的國際版本Lark,ONES推出偏向研發(fā)管理相關的國際版本,以及小鵝通推出的付費國際版(這還挺影響我們國外同學學習聽課…)

由于國內(nèi)產(chǎn)品研發(fā)效率快,人力成本相對較低,所以能以更低的價格吸引到國外的用戶。與此同時,國外對于整個產(chǎn)品付費的意愿比較高,產(chǎn)品出海有著廣闊的發(fā)展空間。

除了以上提到的互聯(lián)網(wǎng)產(chǎn)品出海外,我發(fā)現(xiàn)很多國內(nèi)的越來越多的企業(yè)也開始跨國經(jīng)營。面對出海發(fā)展的挑戰(zhàn),數(shù)字化平臺的建設和應用就成了這些企業(yè)的剛需,會去設計開發(fā)相應的海外系統(tǒng)和軟件。

所以在目前的整個求職階段中,如果你在沿海城市,在工作中一定要考慮到英文的環(huán)境。在你的作品集里也可以適當?shù)卣故疽恍в杏⑽牡捻椖?,并展示自己的國際化和本土化的設計能力

4. 跨境電商

除了常規(guī)的產(chǎn)品出海,還會有很多跨境電商相關的業(yè)務,這些業(yè)務也需要對應的管理系統(tǒng)。

比如行業(yè)當中常見的貨代,需要有與之對應的海外倉儲物流相關系統(tǒng)來配套。而且國內(nèi)的很多相關產(chǎn)品其實都需要海外版本進行對應的維護。在這些系統(tǒng)當中,我見過最為奇特的便是國外網(wǎng)紅的 MCN 系統(tǒng)。

因為很多電商類的產(chǎn)品都需要考慮廣告投放相關事宜,因此會使用對應的 MCN 系統(tǒng)來管理不同的網(wǎng)紅。這類系統(tǒng)其實在海外場景當中是非常常見的。所以很多從事跨境電商相關業(yè)務的產(chǎn)品想要拓展海外市場,可以去考慮跨境電商相關業(yè)務拓展。

本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】,微信公眾號:【CE青年Youthce】,原創(chuàng)/授權 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

蘭亭妙微(m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

用好容器類UI組件,實現(xiàn)界面空間膨脹術!

天宇 系統(tǒng)UI設計文章及欣賞

為了避免出現(xiàn)用戶所想看的信息被其他海量信息所淹沒的情況,設計師或者產(chǎn)研團隊需要思考如何做好信息收納,讓擁有厚重信息和功能的產(chǎn)品變得簡單清爽且易用。這篇文章里,作者就梳理了如何利用好容器類UI組件達成這一目標的策略,一起來看。

用戶的矛盾

如果你問用戶他需要什么,他的回答大概率是“我全都要”。但是如果你把他想要的東西全都展示在頁面上,會發(fā)生什么?

用戶被自己想要的信息淹沒了。他會說:“這根本沒法看,也沒法用,你們的設計太爛了。”

信息量大、操作復雜是B端產(chǎn)品的典型特征。我們?nèi)绾伟丫哂泻裰匦畔⒑凸δ艿漠a(chǎn)品,變得對用戶來說清爽易用?

設計師就像魔術師

My dad once told me that graphic design is the art of fitting a newspaper inside a matchbox, and I would say a lot of interface design is the same.

——Tess Gadd《UX cheat sheet: Preview and full display》

“界面設計就是把報紙塞進火柴盒的藝術”,這個比喻真是太妙了?。ū就粱喊汛笙笱b進冰箱的藝術)。怎么把報紙塞進火柴盒?變魔術嗎?其實從某種角度上看,我們設計師就是魔術師——在適當?shù)臅r機展示恰到好處的信息。

而我們用到的道具,就是容器類UI組件。區(qū)別于其他類型的組件(比如輸入框下拉框),容器類組件就像收納盒,也就是用來收納信息和操作的。

咱們今天就來探索一下,如何利用好容器類UI組件,完成“空間膨脹術”,把報紙絲滑地塞進火柴盒。

本文結構

本文會分成兩部分。

  • 第一部分:尋找到問題所在,探索出恰當?shù)脑O計策略。
  • 第二部分:針對設定好的設計策略,提煉出“容器類”組件使用決策樹。

這個決策樹不限于提供以下價值:

  • 幫助設計師們在設計過程中高效決策,提升設計效率;
  • 幫助產(chǎn)研團隊在討論中快速達成一致、減少內(nèi)耗;
  • 提升匯報時的說服力,獲得干系人支持。

下面我們正式開始吧~

PART 1:定位問題、設定策略

1. 問題所在

一個單點數(shù)據(jù)關聯(lián)的信息量能有多大?看一個網(wǎng)安行業(yè)的例子:

安全管理的目標是要確保資產(chǎn)安全。用戶要做的,首先是要清點資產(chǎn),資產(chǎn)分類分級和業(yè)務信息是資產(chǎn)自身屬性。另外,資產(chǎn)本身會存在一系列漏洞,漏洞也有分類分級以及修復過程數(shù)據(jù)。如果漏洞被利用,就會產(chǎn)生威脅告警,而告警也存在分類分級及處置過程數(shù)據(jù)。

可以看出,將數(shù)據(jù)建立層層關聯(lián)后,從一個單點可以衍生出來的信息是海量的、無邊的。

我們當然不能把這全家桶一整個砸給用戶呀,用戶會被砸暈的。那我們該怎么做?

2. 設計策略

有兩個定律,跟“復雜”有關。

這兩個定律告訴我們一個道理:復雜,不會讓用戶覺得更好用,甚至增加了不必要的內(nèi)耗。

處理復雜,我們一般有哪些辦法呢。

第一步,先刪除多余的部分。就好比我們整理房間時,先挑出垃圾和閑置。

第二步,把物品歸類。被子和被子疊在一起,衣服和衣服掛在一起,書本放在書架上??傊?,不能都堆到床上。

第三步,漸進呈現(xiàn)。這就到了設計師要用“容器類”組件來完成“空間膨脹術”的環(huán)節(jié)了。

漸進呈現(xiàn)的設計理論有點像C4模型。C4模型是一種軟件架構可視化方法。它的獨特之處,就是從宏觀到微觀,設置了多個焦距,來層層遞進。

3. 內(nèi)容分析

產(chǎn)品中的內(nèi)容也存在層層遞進。內(nèi)容之間的關系,常見以下兩種。

一種是從屬關系,或父子關系。

一種是關聯(lián)關系,數(shù)據(jù)以某種維度建立了關聯(lián)。

PART 2:容器,以及如何使用容器

1. 關于容器

我們?nèi)绾斡萌萜黝怳I組件,去放置這些復雜且層層關聯(lián)的內(nèi)容?

以下是我們常見的容器類UI組件。

這些組件都可以用來收納,但是它們的特征差異也是巨大的,不能隨意混用。

我從“復雜度高低”和“關聯(lián)性強弱”這兩個坐標維度來劃分出四個象限,展示這幾個容器的特征。

左下角這里基本是空的,為什么?因為這個是按照組件的最大潛力來擺放的,高維度可以兼容低維度。

值得注意的是,有一些組件在當前頁面內(nèi),而有些在浮層中。浮層在空間Z軸上有高度,視覺表現(xiàn)為有投影。

容器可以展示信息,也可以用來承載操作。我們把這兩個場景分開考慮。首先,我們從信息展示場景開始,分析如何選擇容器。

2. 信息展示容器的決策樹

這里有幾個關鍵問題,我們逐個分析:

關鍵問題一:能否分清主次。

這個問題很難。用戶可能說“這個內(nèi)容我需要”,但“需要”這個詞存在極大的灰度空間,我們要判斷“需要”是多“重要”,需要從這幾個維度去分析。

關鍵問題二:是否需要對比參考。

如果需要對比參考,不能使用tabs(選項卡)。因為tabs組件存在“排他性”——只有選中tab的子內(nèi)容是展示的,未選中的tabs下的內(nèi)容是被隱藏的。

以購物為例,用戶在對幾款產(chǎn)品進行對比挑選時,期望在一個界面同時看到幾款產(chǎn)品的參數(shù)和價格等。如果把產(chǎn)品數(shù)據(jù)放入各tab中,用戶就得在tab間反復橫跳,讓有限的短期記憶承受巨大壓力。

(↑案例:蘋果手機參數(shù)對比)

當然,如果沒有對比參考的需求,我們可以考慮把內(nèi)容歸類到不同tabs下。在使用tabs組件時要確保內(nèi)容分類合理、標簽文案簡潔易懂。這樣用戶才能理解并愿意探索。

(↑tabs的應用)

關鍵問題三:是否需要保持上下文。

有這樣一個場景:上級單位對多個下屬單位進行考核,打分有一定主觀性,需要參考其他單位得分。如果跳轉(zhuǎn)新頁面進行打分操作,就會斷開原有上下文的關系,影響用戶操作流暢性。

需要保持上下文的場景中,應避免迫使用戶離開父級頁面,建議在原頁面或浮層中呈現(xiàn)更多信息。

關鍵問題四:是否頻繁往返。

這個一般由任務類型決定,即當前操作是“主線任務”還是“支線任務”。

在主線任務場景中,用戶持續(xù)前進。比如網(wǎng)購商品,用戶在選購商品-確認地址-付費-下單完成···等步驟中環(huán)環(huán)前行。這時建議使用原頁面跳轉(zhuǎn)的方式。

支線任務完成后,一般要回歸主任務,也就是存在“往返”,就像從小路回歸到大路上。比如清理郵箱:用戶閱讀處理完一封未讀郵件后返回未讀列表,繼續(xù)處理下一條。在這里,“閱讀并處理一條郵件”是支線任務,“”清理郵箱”是主線任務。建議給“支線任務”新開標簽頁處理。

關鍵問題五:是不是必須看到的。

當前信息對用戶來說是否重要且關鍵?模態(tài)是較為“強勢”的交互模式。原則上,界面態(tài)度保持禮貌克制,以免打擾到用戶。

3. 功能操作決策樹

并不是所有容器都適合放置表單操作——部分容器因“排他性”的特征,會隱藏部分信息,可導致用戶遺漏重要操作。

我們一般將操作分成兩類:

  • 一類是需要用戶提交信息的,例如填寫表單,一般由用戶喚起。
  • 一類是接收和確認系統(tǒng)信息,一般由系統(tǒng)發(fā)起。

我們可以按照表單的體量,或者信息的重要及關鍵程度,選擇相應的UI組件。

4. 空間膨脹術

容器組件的的神奇之處是可以多次嵌套和疊加,創(chuàng)造出更多空間。

但注意保持信息體量和層級之間的平衡,避免過多嵌套和疊加,讓用戶在多個容器中迷失方向。

(↑案例:抽屜嵌套抽屜)

(↑案例:tabs嵌套tabs)

(↑案例:抽屜嵌套tabs)

今天的分享就到這里了

感謝讀到最后的讀者們,就用一句話來結束今天的分享吧~

設計一件東西時,總是要在更大的環(huán)境中考慮它——房間里的一把椅子、房子里的房間、環(huán)境中的房子、城市規(guī)劃中的環(huán)境。

——埃里爾·沙里寧 (1873–1950),芬蘭建筑師

本文由 @杜大大杜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

7大色彩技巧讓你界面更吸睛

天宇 B端ui設計文章及欣賞

在視覺設計的世界里,色彩不僅僅是一種裝飾,它是傳達情感、影響情緒和吸引用戶的關鍵。本文深入探討了色彩在界面設計中的重要性,揭示了如何通過色彩的定義、屬性、模型以及在不同場景下的應用來增強設計的吸引力。

色彩在我們?nèi)粘TO計中起著定生死的作用,它是設計的靈魂,舒適的色彩搭配可以讓設計師一遍定稿,感覺在自己的設計生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設計至關重要。

目錄

一、 色彩的定義

二、 色彩的三屬性

三、 色彩的三種常見模型

四、 色彩的語意及它的應用

五、 不同場景下的色彩應用

六、 色彩在B端設計中的作用

七、 B端色彩設計使用的原則

一、色彩的定義?

1、物理學角度

色彩是光的屬性,當光波通過物體時,物體會吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。

2、心理學角度

色彩是人腦對光波長的視覺感知,不同的波長刺激視網(wǎng)膜上不同類型的感光細胞,進而產(chǎn)生不同的色彩感覺。

3、 藝術學角度

色彩是藝術創(chuàng)作的重要元素,它不僅關乎視覺感受,還與情感、文化、象征意義相關聯(lián)。

4、 設計學角度

在設計領域,色彩是傳達信息、影響情緒和創(chuàng)造美感的關鍵工具。

5、 計算機科學角度

在數(shù)字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。

二、色彩的三屬性

1、色相

色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。

2、明度

明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。

同時,同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下,會呈現(xiàn)不同的明暗變化和差異。

3、飽和度(純度)

飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會越高;不同色別所達到的飽和度不同,一般情況下,紅色的純度可達到最高,綠色的則相對較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會導致飽和度和明度發(fā)生變化;通常,照明光線的性質(zhì)、物體表面結構對光線吸收與反射的性能等因素影響飽和度。

三、色彩三種常見模型

1、HSB模型

HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。

這種色彩模型是我日常在的設計工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細微的變化,我通常會通過調(diào)節(jié)S和B的百分比數(shù)值來達到自己想要的目的。

以上就是我在設計項目中,運用該色彩模型做的一個實戰(zhàn),項目中用到了一個圖形,需要用同色系來表達,我保持了H色值的不變,讓S值和B值都發(fā)生著微妙的不同,于是就產(chǎn)生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵大家多在實戰(zhàn)中運用這樣的色彩模型,簡單實用。

  • H色相: Hue,以角度(0°-360°)表示
  • S飽和度: Saturation,以百分比值(0%-100%)表示
  • B/V 亮度: Brightness 或 Value,以百分比值(0%-100%)表示

2、RGB模型

RGB是從顏色發(fā)光的原理來設計定的,通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈,當它們的光相互疊合的時候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。

紅、綠、藍三個顏色通道每種色各分為256階亮度,在0時“燈”最弱——是關掉的,而在255時“燈”最亮。當三色灰度數(shù)值相同時,產(chǎn)生不同灰度值的灰色調(diào),即三色灰度都為0時,是最暗的黑色調(diào);三色灰度都為255時,是最亮的白色調(diào)。

  • R紅:Red,以數(shù)值(0-255)表示
  • G綠:Green,以數(shù)值(0-255)表示
  • B藍:Blue,以數(shù)值(0-255)表示

3、CMYK模型

雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來,于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過顏料反射和吸收光線來顯色。

記得之前自己從事平面工作的時候,就經(jīng)常要用到CMYK模式,因為印出來的效果偏差是最小的,是最靠近設計效果圖的。

通過對比,我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉(zhuǎn)化為成CMYK的色彩模式。

  • R青:Cyan,以百分比值(0%-100%)表示
  • M品紅:Magenta,以百分比值(0%-100%)表示
  • Y黃:Yellow,以百分比值(0%-100%)表示
  • B黑:Black,以百分比值(0%-100%)表示

四、色彩的語意及應用

1、紅色的語意及應用

紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力,也常與興奮、熱烈的情緒相關。

著名的快餐品牌肯德基,在自己的網(wǎng)頁及店鋪裝修中都運用了紅色,因為紅色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。

2、橙色的語意及應用

橙色傳達溫暖、歡快和積極向上的情感;它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺。

百度網(wǎng)盤的這個登錄界面就運用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運用一下讓界面有了溫度。

3、黃色的語意及應用

黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。

叫叫閱讀是一款非常著名的兒童閱讀軟件,整個色調(diào)采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時它是一種快樂的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長的需求。

4、綠色的語意及應用

綠色代表平靜、和諧與生機。綠色常與大自然相關,給人帶來安寧、放松的感覺,也象征著成長、希望和新生。

青椒云的目標用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關注,同時綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。

5、青色的語意及應用

青色寓意清新、寧靜和沉穩(wěn),它給人一種冷靜、理智的印象,同時也帶有一絲清新的活力。

青色是一種帶有藍色和綠色的顏色,因此青色既有藍色的專業(yè)感、信任感,也有綠色的生機感、希望感。

以下是日本某牙醫(yī)品牌的官網(wǎng)首頁,病人希望在這里帶來健康與復蘇,也希望獲得專業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。

6、藍色的語意及應用

藍色代表冷靜、忠誠和信任;它常與沉穩(wěn)、深邃的情感相關,能帶來寧靜、平和的心境,也象征著智慧和理性。

123云盤使用了藍色,藍色符合社會的普遍審美認知,接受度比較高;其次,藍色給人安全的感覺,也符合云盤的初衷,給用戶安全的存儲服務。

7、紫色的語意及應用

紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺,同時也帶有神秘莫測的氛圍,與夢幻、創(chuàng)造力等情感相關。

美柚的主要用戶是女性,紫色在色彩心理學中常被認為具有優(yōu)雅、神秘、浪漫的特質(zhì),這些特質(zhì)與女性的審美和情感需求相契合,能夠吸引女性的關注。

8、白色的語意及應用

白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。

以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡潔又不失大氣,傳遞出了一種質(zhì)樸、雅致的感覺。

五、不同場景下的色彩應用

1、商場色彩多彩的原因?

? 吸引顧客注意力

在眾多商業(yè)場所中脫穎而出,色彩鮮艷的商場外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發(fā)他們的好奇心和探索欲。

確實多彩的顏色更加容易引起我的關注,這不看到商場的美圖,都忍不住拍照留念了,成功的吸引了我的目光。

? 增強可見性

即使在較遠的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發(fā)現(xiàn),提高商場的知名度和曝光度。

多彩的配色,讓我很遠就被商場美輪美奐的插畫吸引,大大增加了商場的可見性。

營造愉悅氛圍

色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關聯(lián)。當顧客進入一個色彩豐富的商場時,會感受到一種愉悅和輕松的氛圍,從而更愿意在商場中停留和購物。

星沙永旺城的美陳設計很好,墻面采用極具誘惑力的顏色與美食,把小小實物十倍放大,增加了視覺看點,讓人忍不住過去拍照曬一下,大大增加了愉悅性。

緩解壓力

在現(xiàn)代生活中,人們常常面臨各種壓力。走進一個多彩熱烈的商場,可以暫時擺脫日常的煩惱和壓力,享受購物的樂趣。

特別可愛夸張的插圖設計,引發(fā)了絲絲童趣和歡樂,讓人短暫忘記壓力,遠離煩惱。

引導消費行為

商場通常會使用不同的顏色來區(qū)分不同的區(qū)域,如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購物效率。

突出重點商品,對于一些重點推薦的商品或促銷活動,商場可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導他們進行購買。

塑造品牌形象

6.1 傳達個性和風格

不同的商場可能有不同的品牌定位和目標客戶群體。通過選擇特定的色彩組合,商場可以傳達出自己的個性和風格,吸引與之相符的顧客。

6.2 增強品牌記憶度

獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識度。

芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭,是一個區(qū)域型的購物中心,集購物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體,為消費者提供一站式商業(yè)綜合體,它在餐飲區(qū)采用了大量的吃喝玩樂的插畫來引導用戶消費。

2、為什么藍色在B端設計中廣泛應用?

? 視覺特性方面

1.1 穩(wěn)定性

藍色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中,用戶往往需要處理重要的業(yè)務數(shù)據(jù)和進行復雜的操作,藍色的穩(wěn)定性可以讓用戶感到安心,增強對產(chǎn)品的信任感。

1.2 專業(yè)性

藍色通常與科技、專業(yè)領域相關聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶,需要傳達出專業(yè)、高效的形象,藍色正好符合這一需求。

? 心理影響方面

2.1 減少焦慮

相比鮮艷、刺激的顏色,藍色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場景中,用戶可能需要長時間使用產(chǎn)品,藍色的舒緩效果有助于提高用戶的使用體驗。

2.2 提高專注度

藍色具有一定的沉靜作用,能夠幫助用戶集中注意力,專注于工作任務。對于B端用戶來說,高效完成工作是首要目標,藍色的這一特性有助于提高工作效率。

B端產(chǎn)品在心理上追求的是類似如下圖的這種寧靜式的體驗,跟教育有著異曲同工之處,就像這個易貝樂少兒英語一樣,用大面積的藍色,希望孩子在這里能很快的安靜下來學習、專注自己的事情。

? 行業(yè)習慣方面

3.1 科技行業(yè)引領

許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場中廣泛使用藍色,逐漸形成了一種行業(yè)習慣。其他企業(yè)在設計B端產(chǎn)品時,也會傾向于選擇藍色以符合用戶的認知和期望。

3.2 傳統(tǒng)與延續(xù)

在過去的設計中,藍色在 B 端領域的成功應用使得它成為了一種傳統(tǒng)選擇。設計師們在延續(xù)這一傳統(tǒng)的同時,也不斷優(yōu)化和創(chuàng)新藍色的運用方式,使其更符合現(xiàn)代設計趨勢和用戶需求。

嘉為科技是一個有著20多年技術沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風格一直是沿用著科技藍的風格,應該也是基于傳統(tǒng)的沉淀吧。

?藍色可以提高產(chǎn)品的復用率

很多用戶都能接受藍色的B端界面,當面對有差不多需求客戶時,同一套UI,可以多次復用,可以減少開發(fā)成本和設計成本,這也是自己通過長期實戰(zhàn)觀察發(fā)現(xiàn)的。

一個UI風格,用在了兩個項目中,不同的用戶,趨向同樣的風格,說明藍色在大家心目中的接受度是非常的高,用藍色可以促進設計的多次復用。

在日常的項目中,我看到的B端UI界面是千篇一律的穩(wěn)重,不追求過于刺激的顏色搭配,通常都比較的干凈簡潔,不像商場里面的美陳背景設計,色彩對比非常的強烈,比較的吸引人眼球。

有一次我厭煩了常規(guī)的穩(wěn)重風,探索一種大膽的色彩風格時,雖然風格比較新穎,可是發(fā)出去客戶的接受度不高,覺得太不穩(wěn)重了,然后重新按照以往習慣進行設計時,就很好,客戶一致認同。

可見每個領域都有自己的色彩運用習慣,商場需要吸引人眼球、刺激消費,越大膽越好,可是B端設計需要提供一個讓人平靜去處理工作事項的環(huán)境,它需要安靜,不需要過于刺激的顏色搭配。

六、色彩在B端設計中的作用?

1、通過色彩向用戶反饋操作結果及當前狀況

比方在日常設計當中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍色代表著鏈接,同時不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結果和狀況方面,色彩起著非常重要的作用。

下面這個IDC運營的監(jiān)測平臺,它就是通過顏色來區(qū)分不同的告警級別的,可見顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)

2、可以助力品牌傳達

B端設計中大面積使用品牌色,可以強化品牌形象,使用與品牌標志風格相近的色彩,可以幫助用戶快速識別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強用戶對品牌的信任。

例如我給湖南高速設計的一套B端界面設計,用戶強烈要求改變傳統(tǒng)的藍色風格,要求整套界面設計要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)

3、顏色可以很好的進行信息區(qū)分

在B端界面設計中,顏色在幫助信息區(qū)分起著非常重要的作用,通常可以通過不同的色彩來區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結構和布局,例如,導航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。

我設計的天翼寫作,就是這樣的設計思路,導航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。

4、舒適的色彩搭配可以提升用戶體驗

選擇合適的色彩對比度可以增強文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。

選擇適當?shù)纳士梢誀I造出專業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗。

我參與的這個后臺界面,就是通過合理的色彩搭配來引導用戶使用的,當用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒有走完的流程就會是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進程的卡點,提升了用戶體驗。

5、色彩可以傳遞性格

人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實色彩也是有性格的,不同的色彩也有不同的性格,當我們對色彩的性格有足夠多的了解,在面對不同的客戶時,我們對色彩的拿捏以及設計需求的把握時,會更加的游刃有余。

我們平常確實是在做設計,但是我們更多的是在與人打交道,我們更好的聆聽,會幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設計,少受加班之苦。

比方說我之前給云門戶設計的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛深沉的UI風格;而我負責的天翼云電腦專家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶,就會帶來不同的設計結果。

七、B端色彩設計使用的原則

1、B端設計中,色彩設計應遵循6:3:1原則

在這個登錄頁面中,我就是運用的6:3:1原則,60%的主色,30%的次要色,10%的點綴色;使用了大面積的藍色和藍灰色,最后使用一點點的橙色,這樣的配色會顯得高級。

2、文字、卡片背景色和邊框都使用無彩色

為了保證畫面風格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區(qū)分信息的層級關系。

比方說我參與的星辰大模型AI文檔生成能力的應用,里面無論文字顏色還是底色都是運用的無彩色,只是通過了色彩深淺變化來做了層級區(qū)分,因為無彩色可以起到很好的降噪作用,既傳達了信息,又不會顯得界面凌亂復雜。

3、需要凸顯的內(nèi)容,用明度和純度比較高的色彩

比方說,日常我們設計的卡片都是用的白色,而底色我們用的是灰色,因為卡片里面的內(nèi)容都是比較重要的信息,需要用一個亮度比較高的顏色,讓內(nèi)容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個一前一后的對比,更好的幫助內(nèi)容進行傳播。

比方說我設計的這個IT運維監(jiān)控平臺的首頁,物理主機、網(wǎng)絡及安全設備、工單、在途工單這幾個指標是非常關鍵的,所以他們的圖片底色用了純度比較高的有彩色來標識。

4、設計前一定要有定色調(diào)的意識

作為設計師,我們的設計工作其實就是在設計一種感覺,一種情緒,設計前定調(diào)的意識真的太重要了,感覺對了,什么都就對了。

比方說我前段時間接到了一個B端的大屏可視化需求設計,客戶說之前的大屏設計不喜歡,希望重新出一個新的設計,然后公司的需求對接人員在給我下達需求時,真的就只是給我下達了這幾個字,讓我重新出一個設計試試。

以我的職業(yè)直覺,感覺這個需求是不夠細化的,于是我就多問了幾句,我問客戶是想要常規(guī)的藍色調(diào)的還是別的?果然一問,客戶說不希望再用常規(guī)的藍色的,希望新的設計要用他們的品牌色綠色,剛聽到這幾個字的時候,我以為這次我把握住需求了,在收集參考圖的時候,我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習慣,我覺得深色會更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風格來出圖。

在出稿之前,通過自己反復的溝通確認,發(fā)現(xiàn)設計前的定調(diào)意識真的太重要了,要不是有出圖前一波三折的反復確認以及需求的細化,就不會有后來的一遍過稿。

5.設計的灰色盡量使用帶有色彩偏向的灰

不管我們設計什么色系的界面,都避不開用到灰色,在設計中用跟主視覺相符的灰,會使得界面更加的高級、協(xié)調(diào)與美觀,注意好了這個小細節(jié),會給我們的設計加分不少。

下面是我日常體驗到的兩個界面,上面綜合管理平臺里面的灰色就沒有跟主色調(diào)藍色相呼應,灰色沒有向藍色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設計就非常的注重細節(jié),灰色偏紫,整個界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個等級。

一個微小細節(jié)的在意,在無形中拉高了設計的高度,十個細節(jié)乃至更多細節(jié)的在意,就會帶來更多意想不到的結果。

總結:

以上就是我最近對色彩的一些頓悟、感受和學習收獲,在不斷的復盤總結中,我們總會收獲一些新的認知,通過這次色彩的復盤之旅,發(fā)現(xiàn)色彩對設計師真的太重要了,希望我的分享對大家有啟發(fā),不足之處也歡迎大家留言交流。

本文由 @姝斐suphie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于CC0協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

人機交互時代的交互新趨勢——智能駕艙多感官交互

天宇 行業(yè)趨勢

隨著電動車的發(fā)展,駕艙也越來越智能,對設計的要求也越來越高。從一開始的只是展示信息,到現(xiàn)在的情感陪伴、多感官交互,這篇文章,我們來看看都有哪些變化。

在科技飛速發(fā)展的今天,汽車已不再僅僅是一種交通工具,更是人們生活中的重要伙伴。隨著人機交互技術的不斷進步,智能駕艙多感官交互正從滿足傳統(tǒng)的安全駕駛需求逐漸轉(zhuǎn)變?yōu)樘峁┯星楦械闹悄?AI 陪伴需求,為駕駛者帶來全新的出行體驗。

一、傳統(tǒng)安全駕駛需求下的智能駕艙

在過去,智能駕艙的主要功能是確保駕駛的安全。通過先進的傳感器、顯示屏和控制系統(tǒng),為駕駛者提供車輛狀態(tài)信息、導航指引和安全警示等。例如,高清數(shù)字儀表盤能夠清晰地顯示車速、油耗等關鍵數(shù)據(jù),幫助駕駛者隨時掌握車輛運行情況;倒車影像和雷達系統(tǒng)可以在倒車時提供清晰的后方視野,降低碰撞風險。然而,這種以安全為核心的智能駕艙雖然滿足了基本的駕駛需求,但缺乏情感互動和個性化體驗。

二、向情感智能 AI 陪伴需求的轉(zhuǎn)變

1. 情感識別與回應

如今的智能駕艙多感官交互技術能夠?qū)崿F(xiàn)對駕駛者情感狀態(tài)的識別。車內(nèi)的攝像頭和傳感器可以捕捉駕駛者的面部表情、語音語調(diào)、身體動作等信息,分析其情緒變化。當檢測到駕駛者疲勞時,智能 AI 會發(fā)出溫馨的提醒,建議休息或播放輕松的音樂來緩解疲勞;當駕駛者感到焦慮或緊張時,智能 AI 可以通過調(diào)節(jié)燈光顏色、播放舒緩的音樂或者講述有趣的故事來幫助駕駛者放松心情。

智能 AI 還能根據(jù)駕駛者的情緒做出個性化的回應。例如,如果駕駛者心情愉快,智能 AI 可能會播放歡快的音樂并與駕駛者進行愉快的交流;如果駕駛者情緒低落,智能 AI 則會給予安慰和鼓勵,讓駕駛者感受到被理解和關心。

2. 個性化交互體驗

基于對駕駛者的了解,智能駕艙可以提供高度個性化的交互體驗。智能 AI 會記住駕駛者的喜好,如喜歡的音樂類型、溫度設置、座椅調(diào)節(jié)角度等,并在駕駛者上車時自動調(diào)整到相應的狀態(tài)。這種個性化的服務讓駕駛者感受到車輛是為自己量身定制的,增強了駕駛者與車輛之間的情感連接。

智能 AI 還可以根據(jù)駕駛者的日常習慣和興趣愛好提供個性化的建議和服務。比如,如果駕駛者經(jīng)常在周末去郊外游玩,智能 AI 可能會在周末來臨前推薦適合的郊游地點和路線;如果駕駛者喜歡聽某一類型的廣播節(jié)目,智能 AI 會在合適的時間自動播放該節(jié)目。

3. 增強社交互動

智能駕艙不再是一個孤立的空間,而是可以與外界進行社交互動的平臺。通過車聯(lián)網(wǎng)技術,駕駛者可以與家人、朋友保持聯(lián)系,分享自己的行程和感受。例如,在行駛過程中,駕駛者可以通過語音指令發(fā)送消息給朋友,或者與家人進行視頻通話。

智能 AI 還可以組織車內(nèi)的社交活動,增強駕駛者與乘客之間的互動。例如,在長途旅行中,智能 AI 可以發(fā)起游戲或話題討論,讓大家在旅途中充滿樂趣。

4. 陪伴成長與學習

對于長期駕駛者來說,智能駕艙可以成為一個陪伴成長與學習的伙伴。智能 AI 可以記錄駕駛者的駕駛習慣和技能提升過程,提供針對性的駕駛建議和培訓。例如,當駕駛者在某個駕駛操作上存在不足時,智能 AI 會及時指出并提供改進方法。

智能 AI 還可以提供各種知識和信息,滿足駕駛者的學習需求。比如,在等待紅綠燈的間隙,智能 AI 可以播放一段新聞、歷史故事或者科普知識,讓駕駛者在碎片化的時間里不斷學習和成長。

三、多感官交互技術的支持

1. 視覺交互

高清顯示屏和數(shù)字儀表盤不僅可以提供車輛信息,還可以展示溫馨的畫面和個性化的主題,根據(jù)駕駛者的情緒和喜好進行變化。例如,當駕駛者心情愉悅時,顯示屏可以呈現(xiàn)出絢麗的色彩和歡快的動畫;當駕駛者需要放松時,顯示屏可以切換到寧靜的自然風景畫面。

氛圍燈的運用也為情感交互增添了色彩。不同顏色的氛圍燈可以反映不同的情緒狀態(tài),營造出相應的氛圍。比如,藍色的氛圍燈可以帶來寧靜的感覺,紅色的氛圍燈可以增加活力和激情。

2. 聽覺交互

高品質(zhì)的音響系統(tǒng)可以播放各種類型的音樂和聲音,滿足駕駛者不同的情感需求。智能 AI 可以根據(jù)駕駛者的情緒選擇合適的音樂播放列表,或者根據(jù)場景自動調(diào)整音樂的風格和音量。

語音交互更加自然和親切。智能 AI 的語音不再是機械的合成音,而是具有情感色彩的聲音,能夠更好地與駕駛者進行交流和互動。

3. 觸覺交互

座椅的按摩功能和溫度調(diào)節(jié)可以根據(jù)駕駛者的身體狀況和情緒進行調(diào)整,提供舒適的駕駛體驗。例如,當駕駛者感到疲勞時,座椅可以自動啟動按摩功能,幫助駕駛者放松身體。

方向盤和控制面板的觸摸反饋更加靈敏和個性化,讓駕駛者在操作過程中感受到與車輛的互動。

4. 嗅覺交互

香氛系統(tǒng)可以釋放不同的氣味,調(diào)節(jié)車內(nèi)的氛圍。智能 AI 可以根據(jù)駕駛者的情緒和喜好選擇合適的香氛,如清新的花香可以帶來愉悅的感覺,舒緩的草本香可以幫助駕駛者放松心情。

四、未來展望

隨著技術的不斷進步,智能駕艙多感官交互將在滿足情感智能 AI 陪伴需求方面發(fā)揮更大的作用。未來的智能駕艙將更加智能化、個性化和人性化,成為駕駛者真正的情感伙伴。汽車制造商和科技企業(yè)將不斷創(chuàng)新和完善多感官交互技術,為駕駛者帶來更加豐富、溫暖的出行體驗。

五、結論

從滿足安全駕駛需求到提供有情感的智能AI陪伴需求,智能駕艙多感官交互的發(fā)展為汽車行業(yè)帶來了新的機遇和挑戰(zhàn)。通過情感識別、個性化交互、增強社交互動和多感官技術的支持,智能駕艙將成為駕駛者生活中不可或缺的一部分,為人們的出行帶來更多的樂趣和溫暖。

本文由 @INFP怡伶設計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

深入剖析交互狀態(tài):設計與體驗的關鍵

天宇 交互設計及用戶體驗

對九類交互狀態(tài)的深入理解和不斷創(chuàng)新,將為產(chǎn)品設計帶來更大的提升空間,為用戶帶來更加卓越的體驗,推動產(chǎn)品在競爭激烈的市場中不斷發(fā)展和進步。

一、交互狀態(tài)的重要性

交互狀態(tài)在產(chǎn)品設計中起著至關重要的作用,它直接關系到用戶體驗和產(chǎn)品的可用性。良好的交互狀態(tài)設計能夠讓用戶在使用產(chǎn)品的過程中感受到便捷、高效和愉悅,從而提高用戶對產(chǎn)品的滿意度和忠誠度。

從用戶體驗的角度來看,交互狀態(tài)可以增強用戶參與感和控制感。例如,在人機交互設計中,互動性和反饋機制能夠讓用戶覺得他們對系統(tǒng)有一定的掌控能力。當用戶進行操作時,系統(tǒng)能夠及時給予反饋,如按鈕按下后出現(xiàn)的狀態(tài)變化、鼠標懸停時的提示信息等,讓用戶清楚地知道他們的操作產(chǎn)生了什么效果。這種即時的反饋可以幫助用戶理解系統(tǒng)的運作邏輯,減少用戶的操作失誤,提升用戶的效率和滿意度。

在產(chǎn)品的可用性方面,交互狀態(tài)的設計也至關重要。例如,在電子產(chǎn)品設計過程中,實現(xiàn)人機交互可以為消費者提供良好的使用體驗。設計師需要考慮不同人群的需求,如設計操作簡單的老人機,以滿足老年人的使用需求。同時,將人機交互理念融入產(chǎn)品設計中,能夠提升消費者對產(chǎn)品的喜好程度,使設計出來的產(chǎn)品能夠滿足人們對電子產(chǎn)品設計的要求。

此外,交互狀態(tài)的設計還能夠影響產(chǎn)品的整體品質(zhì)。例如,在 B 端產(chǎn)品的 UI 設計中,深入了解用戶需求與場景,進行簡潔直觀的界面設計,可以提升產(chǎn)品的可用性。通過用戶研究方法,了解用戶的工作環(huán)境、使用習慣和設備網(wǎng)絡條件等,將用戶需求轉(zhuǎn)化為具體的設計元素和功能,為用戶提供更加貼合實際的使用體驗。

綜上所述,交互狀態(tài)在產(chǎn)品設計中具有重要的地位,它對用戶體驗和產(chǎn)品可用性有著重大的影響。產(chǎn)品開發(fā)者和設計師應該充分重視交互狀態(tài)的設計,以提高產(chǎn)品的競爭力,在市場中脫穎而出。

二、九類交互狀態(tài)詳解

1. 加載相關

加載類型:除了電商 APP 和計算器應用的不同加載方式外,一些社交平臺在加載用戶動態(tài)時也會采用類似的漸進式加載。當用戶打開社交平臺,首先會看到最近的幾條動態(tài),隨著用戶不斷下拉刷新,更多的動態(tài)內(nèi)容逐步加載出來。這樣既保證了用戶能夠快速看到部分內(nèi)容,又不會因為一次性加載過多數(shù)據(jù)而導致等待時間過長。

加載狀態(tài):在加載狀態(tài)中,不同的產(chǎn)品會有不同的表現(xiàn)形式。例如,一些在線學習平臺在加載課程視頻時,除了會有旋轉(zhuǎn)的加載動畫外,還會顯示加載進度條,讓用戶清楚地知道視頻加載的進度。如果加載成功,會有一個短暫的提示音,增強用戶的感知。而如果加載失敗,除了提示用戶檢查網(wǎng)絡連接外,還會提供一些常見問題的解決方案,如清理緩存、更換網(wǎng)絡環(huán)境等。

中斷:中斷情況在實際應用中較為復雜。以在線辦公軟件為例,如果在編輯文檔過程中出現(xiàn)網(wǎng)絡中斷,軟件會自動保存當前文檔的進度,以防止數(shù)據(jù)丟失。同時,會提示用戶網(wǎng)絡中斷,并嘗試重新連接。如果長時間無法連接,用戶可以選擇將文檔保存到本地,待網(wǎng)絡恢復后再進行上傳。

2. 特殊模式

深度 / 夜間模式:除了閱讀類應用,一些視頻播放平臺也提供夜間模式。在夜晚觀看視頻時,開啟夜間模式可以降低屏幕亮度,減少對眼睛的刺激。同時,夜間模式下的界面顏色通常會更加柔和,營造出舒適的觀看氛圍。

存在沉浸模式插件:在一些在線教育平臺中,也會有類似沉浸模式的功能。當學生進入課程學習時,平臺會自動隱藏無關的通知和廣告,讓學生專注于學習內(nèi)容。同時,學生可以通過特定的快捷鍵退出沉浸模式,方便隨時查看其他信息。

3. 操作相關

輸入:除了即時通訊軟件,一些辦公軟件在輸入方面也有很多優(yōu)化。例如,在文檔編輯軟件中,當用戶輸入一些特定的關鍵詞時,軟件會自動彈出相關的文檔模板或格式設置選項,提高用戶的輸入效率。

點擊:在電商平臺的商品詳情頁面,點擊商品圖片通常會放大顯示,讓用戶更清楚地看到商品的細節(jié)。同時,點擊購買按鈕后,會有一個短暫的確認彈窗,讓用戶再次確認購買信息,避免誤操作。

重復點擊 / 惡意操作:在一些金融類應用中,對于重復點擊或惡意操作的防范更加嚴格。例如,在股票交易軟件中,如果用戶連續(xù)多次提交相同的交易指令,系統(tǒng)會自動鎖定該用戶的交易功能,并提示用戶聯(lián)系客服解決問題。

4. 限制相關

極值:在旅游預訂平臺上,用戶在選擇酒店價格區(qū)間時,系統(tǒng)也會進行極值限制。價格下限通常為平臺上的最低價格,價格上限則會根據(jù)當?shù)鼐频甑氖袌鰞r格和用戶的搜索歷史進行動態(tài)調(diào)整,確保用戶能夠得到合理的搜索結果。

邊界:在一些圖形設計軟件中,除了畫筆工具的邊界限制,其他工具也有類似的限制。例如,當用戶使用裁剪工具時,裁剪區(qū)域不能超出畫布的范圍,否則無法進行裁剪操作。

時間:在在線考試系統(tǒng)中,時間限制尤為重要??荚囬_始前,考生只能看到考試的相關信息和注意事項,無法進入答題頁面??荚囬_始后,系統(tǒng)會精確計時,一旦考試時間結束,答題頁面會自動提交,無法再進行答題。

5. 網(wǎng)絡相關

網(wǎng)絡中斷:在在線游戲中,網(wǎng)絡中斷會對玩家的游戲體驗產(chǎn)生很大影響。當網(wǎng)絡中斷時,游戲會自動暫停,并提示玩家網(wǎng)絡中斷。如果玩家在網(wǎng)絡中斷前已經(jīng)保存了游戲進度,那么在網(wǎng)絡恢復后可以繼續(xù)游戲;如果沒有保存進度,可能會丟失部分游戲數(shù)據(jù)。

信號不佳 / 不穩(wěn)定:在視頻會議軟件中,當網(wǎng)絡信號不佳時,軟件會自動降低視頻的分辨率和幀率,同時關閉音頻中的一些高級功能,如降噪和回聲消除,以保證會議的基本溝通需求。

流量形式切換:在一些音樂播放軟件中,用戶可以根據(jù)自己的網(wǎng)絡環(huán)境手動切換流量形式。例如,在 Wi-Fi 環(huán)境下,用戶可以選擇自動播放高清音樂視頻;而在移動數(shù)據(jù)環(huán)境下,用戶可以選擇只播放音頻,以節(jié)省流量。

6. 內(nèi)容相關

沒有內(nèi)容:在在線文檔協(xié)作平臺中,如果一個文檔沒有內(nèi)容,系統(tǒng)會提示用戶 “此文檔為空,請?zhí)砑觾?nèi)容”,并提供一些常用的文檔模板供用戶選擇,方便用戶快速創(chuàng)建內(nèi)容。

敏感 / 違規(guī)內(nèi)容:在電商平臺上,對于商品描述中的敏感或違規(guī)內(nèi)容,系統(tǒng)會進行嚴格的審核。如果發(fā)現(xiàn)違規(guī)內(nèi)容,商品會被下架,并通知賣家進行整改。同時,平臺會對賣家進行警告,嚴重的可能會關閉賣家的店鋪。

7. 站外內(nèi)容相關

站外內(nèi)容:在一些知識分享平臺中,當用戶點擊站外鏈接時,平臺會提示用戶 “該鏈接為站外內(nèi)容,請注意安全”,并提供一個返回平臺的快捷按鈕,方便用戶隨時返回。同時,平臺會對站外鏈接進行安全檢測,確保鏈接的合法性和安全性。

8. 設備相關

橫豎屏:在一些圖片編輯軟件中,橫豎屏切換會影響用戶的操作體驗。當用戶將手機從豎屏切換到橫屏時,軟件會自動調(diào)整界面布局,將工具菜單和編輯區(qū)域分別放置在屏幕的兩側,方便用戶進行操作。而當用戶將手機從橫屏切換回豎屏時,軟件會恢復到原來的布局。

分辨率:在一些游戲開發(fā)中,開發(fā)者會根據(jù)不同設備的分辨率進行優(yōu)化。例如,在高分辨率的設備上,游戲畫面會更加細膩,特效也會更加豐富;而在低分辨率的設備上,游戲會自動降低畫質(zhì),以保證游戲的流暢運行。

清晰度:在一些在線視頻教育平臺中,清晰度的選擇會影響用戶的學習體驗。在網(wǎng)絡條件好的情況下,用戶可以選擇高清或超清的視頻清晰度,以便更清楚地看到教學內(nèi)容;而在網(wǎng)絡條件差的情況下,用戶可以選擇標清或流暢的清晰度,以保證視頻的播放流暢度。

不同版本:在一些軟件的不同版本中,功能和界面會有所不同。例如,在一款繪圖軟件的專業(yè)版中,會提供更多的高級功能和工具,而在免費版中,功能會相對較少。同時,軟件會在界面上明確標識出不同版本的特點和優(yōu)勢,方便用戶根據(jù)自己的需求進行選擇。

硬件調(diào)用:在一些智能家居控制軟件中,當用戶需要調(diào)用攝像頭進行監(jiān)控時,軟件會彈出請求授權的提示框。在獲得用戶授權后,軟件會提供實時監(jiān)控畫面,并支持遠程控制攝像頭的角度和焦距。

硬件聯(lián)動:在一些智能辦公場景中,硬件聯(lián)動可以提高工作效率。例如,當用戶在會議室中使用智能投影儀時,投影儀可以與會議室的燈光和音響系統(tǒng)聯(lián)動,根據(jù)投影內(nèi)容自動調(diào)整燈光亮度和音響音量。

9. 角色相關

未登錄 / 已登錄:在一些在線教育平臺上,未登錄用戶只能瀏覽部分公開的課程內(nèi)容,無法進行課程報名和學習進度跟蹤。而已登錄用戶可以享受更多的服務,如個性化課程推薦、學習記錄保存等。

新用戶 / 老用戶:對于新用戶,一些在線購物平臺會提供新人專享優(yōu)惠券和折扣,幫助新用戶快速熟悉平臺的購物流程。對于老用戶,平臺會根據(jù)他們的購買歷史和瀏覽記錄,為他們推薦個性化的商品和促銷活動。

游客賬號:在一些在線音樂平臺中,游客賬號可以讓用戶試聽部分歌曲,但無法下載和收藏歌曲。當游客想要享受更多功能時,可以通過注冊賬號成為正式用戶。

普通 / 會員賬號:以在線閱讀平臺為例,會員用戶可以享受無廣告閱讀、優(yōu)先閱讀新書等特權。同時,平臺會在會員專屬內(nèi)容上進行明顯標識,吸引普通用戶升級為會員。

內(nèi)網(wǎng) / 外網(wǎng)賬號:在一些企業(yè)內(nèi)部的項目管理軟件中,內(nèi)網(wǎng)賬號可以訪問企業(yè)內(nèi)部的項目信息和文件,外網(wǎng)賬號則只能查看一些公開的項目進度和報告。在設計這種賬號體系時,軟件會明確區(qū)分內(nèi)網(wǎng)和外網(wǎng)賬號的權限,確保企業(yè)信息的安全。

管理員賬號:在一些社區(qū)論壇中,管理員賬號可以對用戶的發(fā)言進行審核和管理,維護社區(qū)的秩序。同時,管理員賬號還可以進行系統(tǒng)設置和插件管理,提升論壇的功能和性能。

三、總結與展望

通過對九類交互狀態(tài)的深入分析,我們可以清楚地看到交互狀態(tài)在產(chǎn)品設計中的重要性。無論是加載相關、特殊模式,還是操作相關、限制相關等各個方面,交互狀態(tài)都直接影響著用戶對產(chǎn)品的使用體驗和滿意度。

例如,在加載相關方面,合理的加載類型和狀態(tài)顯示能夠減少用戶的等待焦慮,中斷處理機制則能在意外情況下最大程度地保護用戶數(shù)據(jù)和操作進度。在特殊模式中,深度 / 夜間模式和沉浸模式插件為用戶提供了更加舒適和專注的使用環(huán)境。操作相關的輸入、點擊和防范重復點擊 / 惡意操作等設計,確保了用戶操作的準確性和安全性。限制相關的極值、邊界和時間限制,使得產(chǎn)品的使用更加規(guī)范和合理。網(wǎng)絡相關的處理能夠在不同網(wǎng)絡狀況下為用戶提供盡可能好的體驗。內(nèi)容相關的處理確保了用戶在面對不同內(nèi)容情況時都能得到恰當?shù)囊龑Ш吞崾尽U就鈨?nèi)容相關的設計保障了用戶在訪問外部鏈接時的安全。設備相關的橫豎屏、分辨率、清晰度、不同版本、硬件調(diào)用和聯(lián)動等設計,適應了不同設備和用戶需求。角色相關的不同狀態(tài)設計,為不同類型的用戶提供了個性化的服務和體驗。

展望未來,隨著科技的不斷進步,交互狀態(tài)的設計也將不斷發(fā)展和創(chuàng)新。一方面,人工智能、大數(shù)據(jù)等技術的應用將使交互狀態(tài)更加智能化和個性化。例如,通過分析用戶的使用習慣和偏好,自動調(diào)整加載策略、推薦適合的操作模式等。另一方面,虛擬現(xiàn)實、增強現(xiàn)實等新興技術的發(fā)展將為交互狀態(tài)帶來全新的體驗。例如,在虛擬現(xiàn)實環(huán)境中的交互狀態(tài)設計將更加注重沉浸感和自然交互。同時,隨著物聯(lián)網(wǎng)的發(fā)展,硬件之間的聯(lián)動將更加緊密和智能,為用戶提供更加便捷和高效的服務。

本文由 @用戶體驗王叔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于CC0協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務

蘭亭妙微(m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

馮.雷斯托夫效應 | 設計師需要知道的設計原則!

天宇 設計資源

在設計領域,有些原則雖然我們經(jīng)常使用,卻可能并不熟悉其背后的理論。馮·雷斯托夫效應(Von Restorff Effect)就是這樣一種現(xiàn)象,它解釋了為何在一系列相似元素中,獨特的那個更容易被記住。

在我們的日常生活中,心理學的影響無處不在。它像一把神奇的鑰匙,能打開人們內(nèi)心深處的秘密。作為設計師,我們更應該掌握并運用心理學,將其融入我們的設計中,從而創(chuàng)造出更具有吸引力和影響力的作品。

設計并不僅僅是形狀、顏色和布局的組合,更是對人類心理的探索和解讀。我們的每一個設計決策,都與用戶的心理狀態(tài)和認知過程息息相關。如何抓住用戶的眼球、引發(fā)他們的興趣、引導他們的行為,這些都是我們需要深入研究的課題。

在眾多的心理學原理中,馮·雷斯托夫效應(Von Restorff Effect)是一個值得設計師們關注的設計法則。這個效應揭示了一個有趣的現(xiàn)象:特殊的東西往往比普通的東西更容易被人記住。這就意味著,在設計中,我們要制造一些“特殊”的元素,使它們能夠從眾多的信息中脫穎而出,成為用戶關注的焦點。今天筆者就帶大家了解一下設計中常用的心理學之一馮·雷斯托夫效應。

一、關于馮.雷斯托夫效應

1. 產(chǎn)生背景

在1933年的德國,一個名叫海德維希·馮·雷斯托夫的醫(yī)生開啟了一項改變我們對人類記憶理解的實驗。她深入探索了當人們面對一系列物品時,他們的記憶是如何運作的。通過精心設計的對比實驗,她發(fā)現(xiàn)了一個令人驚奇的現(xiàn)象:在一組物品中,那個最特別的物品總是更容易被人們記住。

這一發(fā)現(xiàn)為我們揭示了一個核心事實:特別的事物更能吸引我們的注意力,并在我們的記憶中留下深刻的印記。想象一下,在一組物品中,如果有一個被聚光燈照亮,那么相比其他未被照亮的物品,它無疑會成為人們關注的焦點,從而在記憶中留下更深的痕跡。

這個人類行為和記憶的規(guī)律后來被命名為“馮·雷斯托夫效應”。這一效應不僅僅是一個簡單的觀察,它實際上是人類行為學和心理學領域的一項重要研究成果。隨著時間的推移,這一效應逐漸被應用于美學和設計領域,為設計師們提供了全新的視角和工具,以創(chuàng)造出更具吸引力和影響力的作品。

自馮·雷斯托夫效應被正式確立命名以來,眾多科研學者在此基礎上進行了更深入的研究,他們不僅剖析了這一效應的內(nèi)在機制和影響因素,還探討了其在不同情境下的應用。隨著研究的深入,對于這一效應的理解也在不斷加深,并衍生出了許多其他的理論和學術觀點。

2. 融入設計行業(yè)

馮·雷斯托夫效應為我們提供了一個獨特的視角,幫助我們更好地理解人類記憶的運作方式。通過運用這一原理,我們可以在設計中有意識地創(chuàng)造出令人難忘的元素,從而與觀眾建立更深刻的聯(lián)系。無論是在廣告、品牌推廣還是產(chǎn)品設計中,突出特別的元素都是一種有效的策略,可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。

馮·雷斯托夫效應,又被稱為隔離效應或新奇效應,揭示了人們在記憶中的偏好。當情境或經(jīng)歷中出現(xiàn)與眾不同的刺激時,這種效應尤為明顯。

在當今信息爆炸的時代,用戶往往沒有耐心去仔細查找信息,而是快速掃視。因此,設計師需要巧妙地運用萊斯托夫效應,使關鍵內(nèi)容從繁雜的信息中脫穎而出,吸引用戶的目光。

統(tǒng)一性是設計的基礎,但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運用顏色、形狀、布局等元素,我們可以創(chuàng)造出與眾不同的視覺效果,引導用戶的視線。通過巧妙地突出關鍵內(nèi)容,我們能夠更好地與用戶溝通,引領他們的注意力,為業(yè)務創(chuàng)造更大的價值。

二、馮.雷斯托夫效應對設計的影響

1. 背景不同 強化視覺

在界面設計中,我們常常會遇到這樣的情況:在同類型的元素中,某一元素與其他元素存在顯著差異,這種現(xiàn)象我們稱之為“背景不同”。為了使某個模塊或元素在用戶心中留下深刻印象,我們可以利用環(huán)境差異來提高其識別度和記憶度。這種手法在UI設計中被廣泛應用,它利用了馮·雷斯托夫效應,能有效吸引用戶點擊。

例如淘寶底部標簽欄中的四個ICON,唯獨首頁的第一個ICON(品牌logo)風格與眾不同。即使離開了該頁面,這個特殊的ICON依然讓人印象深刻,餓了么第二的圖標也是如此。因此,我們在設計界面時,若想吸引用戶的注意或提高點擊量,可以打破常規(guī),讓特定元素在同背景下脫穎而出。

再比如下圖的個人中心界面,功能入口模塊均采用ICON展示,而游樂場模塊卻采用了特殊的布局和設計。因此,當用戶進入個人中心時,最先映入眼簾的便是游樂場模塊。這也解釋了為什么我們在進行廣告和活動投放時,需要特別設計的原因。

2. 經(jīng)驗不同 強化記憶

當遇到與過去經(jīng)驗顯著不同的情況時,我們的大腦會產(chǎn)生一種特殊的效應,這種效應被稱為“經(jīng)驗不同”的效應。例如,在騎自行車的過程中,我們通常習慣于左手控制左把手,右手控制右把手。但是,如果我們嘗試用雙手交叉的方式來騎車,結果很可能會摔倒。從此以后,每當我們聽到或描述有關騎車摔倒的事情時,我們都會立刻想起那次“經(jīng)驗不同”的嘗試。

同樣地,淘寶和京東在618、雙十一等大型促銷活動時,會選擇重新設計他們的首頁。與往常的設計相比,這些新的首頁設計通常會增加更多的促銷入口,甚至改變ICON的風格。從馮·雷斯托夫效應的角度來看,這種與以往不同的設計能夠更好地吸引用戶的注意力,加深用戶的記憶,并擴大活動對用戶的影響力。

三、在設計中的應用

1. 功能隔離提高效率

在視覺層面難以實現(xiàn)強烈差異化時,我們可以通過功能來實現(xiàn)有效的隔離。以微信為例,其置頂功能允許用戶將好友或群聊消息置于頂部,從而與其他信息區(qū)分開來。這種設計確保了關鍵信息的優(yōu)先級,使用戶能夠更快速地找到和關注所需內(nèi)容。通過巧妙地運用功能,我們可以輕松地解決視覺上的一致性與差異化之間的矛盾,為用戶提供更加流暢和個性化的體驗。

2. 動效加強引導

靜態(tài)頁面容易讓人視覺疲勞,動效能夠更加生動有趣地展示內(nèi)容,引導用戶更加關注頁面。相較于被動接受信息,動效能夠更加有效地吸引用戶注意。

3. 背景聯(lián)動吸引目光

隨著Banner自動輪播的普及,用戶對其的吸引力逐漸降低。面對不斷變化的廣告,用戶不再耐心地逐個瀏覽。當無法獲取所需信息時,他們的視線會迅速轉(zhuǎn)向其他區(qū)域。

為了應對這一挑戰(zhàn),騰訊視頻首頁的Banner采用了背景聯(lián)動的形式。這意味著頭部背景色會根據(jù)Banner圖片的色調(diào)進行變化,從而擴大了內(nèi)容的變化空間。這種設計不僅使廣告更加引人注目,還使用戶更容易被吸引并保持關注。

4. icon強化加強視覺感知

頻道頁的入口方式多種多樣,金剛區(qū)icon無疑是最優(yōu)選擇。若要突出展示某些業(yè)務功能,單一的icon配合動效可有效吸引用戶關注。此策略簡單高效,有助于用戶快速找到所需內(nèi)容。

5. 內(nèi)容強化凸顯價值感

在設計界面時,我們追求的是在有限的空間內(nèi)展示更多的有效信息,避免信息的無效重復。但在電商平臺中,尤其是涉及到利益點時,我們需要確保信息具有足夠的價值感和吸引力。

以智行APP開通會員為例,領神卡作為核心賣點被突出展示,采用了平鋪展開的方式,從而突顯其價值。相對其他權益則相應地進行了弱化處理,以保持整體信息的清晰度和重點。這樣的設計既充分利用了屏幕空間,又確保了用戶能夠快速了解到核心的利益點。

6. 分層隔離提高信息層級

頁面信息層次分明,信息層級越高,用戶感知越強烈,越能吸引注意。例如,模態(tài)彈窗處于最上層,與內(nèi)容層完全隔離,用戶無法忽視。其次是非模態(tài)懸浮層,與內(nèi)容層隔離,但不影響用戶操作。還有側邊懸浮按鈕、頂部或底部懸浮橫條等。

四、常見問題及解決方式

1. 本末倒置的危險

受“危險按鈕”的影響,過去設計師常常給予負向情緒操作很高的視覺層級,例如退出登錄。這樣的設計意圖是警示用戶操作危險,但視覺上卻過于強調(diào),甚至有些“喧賓奪主”。近年來,移動端設計中這種矛盾逐漸減少,但仍然存在。與其強調(diào)操作的難度和危險性,不如考慮如何讓用戶自然地忽視這些操作,減少不必要的干擾。從馮·雷斯托夫效應來看,這種設計方式有本末倒置之嫌,應盡量避免。

2. 什么都突出等于什么都不突出

新手設計師常常會遇到想要突出所有元素,但最終無法突出任何一項的問題。頁面中的特異點應該屬于少數(shù),如果所有元素都想做得不一樣,都會讓頁面整體視覺效果崩潰。因此,在設計中要學會取舍,選擇最重要的元素進行突出,才能達到最佳的視覺效果。

五、結語

總的來說,將馮·雷斯托夫效應運用到設計中,能幫助我們創(chuàng)造出更具吸引力、更容易被記住的設計。但請記住,任何設計決策都應以用戶為中心,了解他們的需求和心理是關鍵。只有這樣,我們才能真正創(chuàng)造出打動人心的設計。

專欄作家

大漠飛鷹;人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

蘭亭妙微(m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

日歷

鏈接

個人資料

藍藍設計的小編 http://m.yvirxh.cn

存檔