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 年年初,飛書裁員,據(jù)說設計師裁員高達 60%,用研100%… 這一件事帶來了一系列的連鎖反應。
首先是市場會覺得設計并沒有價值,B 端設計沒有價值,設計師只是一個作圖的工具。
因為飛書在我看來之前是異常重視用戶體驗,從我們梳理他們的設計改版開始,你會發(fā)現(xiàn)整個管理后臺產(chǎn)品都在往著好的方向發(fā)展。
但即使這樣,設計師也被裁員,會讓我們感到困惑,問題到底出在哪里?
同時,這樣大量且優(yōu)質的設計師被裁過后,也會造成行業(yè)的踩踏效應。對于普通的設計師而言,行業(yè)內(nèi)卷,求職會異常艱難,相信在那段時間求職的同學、特別是在北京的同學都會有感悟,真的是異常艱難。
在五月份時,沉寂許久的 Salesforce 迎來了其新版本的視覺更新,這是 Salesforce 成立以來,做的最大維度的更新。
首先整體頁面樣式經(jīng)歷了調整,從之前帶有上世紀 90 年代風格轉變?yōu)楦鼮槌墒?、商務化的風格,這使得整個界面的協(xié)調性得以增強,這也符合目前 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)常這樣用游戲來吸引用戶進行升級。
在我們看來,一個良好的 B 端產(chǎn)品,一定是需要擁有更理想的商業(yè)模式,而釘釘?shù)纳虡I(yè)化就顯得更為順利。
釘釘自從在阿里被獨立出過后,幾次發(fā)布會都在強調自己的在商業(yè)模式上的進展和變化。
從整體來看會發(fā)現(xiàn)釘釘對于用戶的態(tài)度也會有所轉變,從原來 以“老板為核心”變?yōu)楝F(xiàn)在以“要考慮員工感受”,也說明整個 B 端產(chǎn)品整體的發(fā)展路徑就應該如此。
所以很多企業(yè)都是在產(chǎn)品初期,經(jīng)歷過混沌的時期過后才會需要 B 端設計師。
聊到公眾號文章,也順帶說說今年的設計氛圍和往年相比是更差的。
你會發(fā)現(xiàn)大家都不太愿意更新文章,無論是設計大會又或者是設計文章分享,最近能閱讀的東西真的很少,這會導致大家的交流異常的匱乏。
從我整理過去 B 端行業(yè)的資料來看,這兩年的資源更新是非常少的。
我們簡單聊聊市場環(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 年,我們會認為有以下幾個發(fā)展趨勢:
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ā)展。
行業(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ī)模結構也沒有那么大,更容易被用戶所接受。
產(chǎn)品出海是一個老生常談的話題,很早之前我們就有談到。由于國內(nèi)市場競爭激烈,而且對于應對市場需求已經(jīng)有了豐富的經(jīng)驗,很多企業(yè)將自己方向轉向國外。比如最早飛書推出的國際版本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ù)卣故疽恍в杏⑽牡捻椖?,并展示自己的國際化和本土化的設計能力
除了常規(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)許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協(xié)議。
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
為了避免出現(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ù)據(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)后,從一個單點可以衍生出來的信息是海量的、無邊的。
我們當然不能把這全家桶一整個砸給用戶呀,用戶會被砸暈的。那我們該怎么做?
有兩個定律,跟“復雜”有關。
這兩個定律告訴我們一個道理:復雜,不會讓用戶覺得更好用,甚至增加了不必要的內(nèi)耗。
處理復雜,我們一般有哪些辦法呢。
第一步,先刪除多余的部分。就好比我們整理房間時,先挑出垃圾和閑置。
第二步,把物品歸類。被子和被子疊在一起,衣服和衣服掛在一起,書本放在書架上??傊荒芏级训酱采?。
第三步,漸進呈現(xiàn)。這就到了設計師要用“容器類”組件來完成“空間膨脹術”的環(huán)節(jié)了。
漸進呈現(xiàn)的設計理論有點像C4模型。C4模型是一種軟件架構可視化方法。它的獨特之處,就是從宏觀到微觀,設置了多個焦距,來層層遞進。
產(chǎn)品中的內(nèi)容也存在層層遞進。內(nèi)容之間的關系,常見以下兩種。
一種是從屬關系,或父子關系。
一種是關聯(lián)關系,數(shù)據(jù)以某種維度建立了關聯(lián)。
我們?nèi)绾斡萌萜黝怳I組件,去放置這些復雜且層層關聯(lián)的內(nèi)容?
以下是我們常見的容器類UI組件。
這些組件都可以用來收納,但是它們的特征差異也是巨大的,不能隨意混用。
我從“復雜度高低”和“關聯(lián)性強弱”這兩個坐標維度來劃分出四個象限,展示這幾個容器的特征。
左下角這里基本是空的,為什么?因為這個是按照組件的最大潛力來擺放的,高維度可以兼容低維度。
值得注意的是,有一些組件在當前頁面內(nèi),而有些在浮層中。浮層在空間Z軸上有高度,視覺表現(xiàn)為有投影。
容器可以展示信息,也可以用來承載操作。我們把這兩個場景分開考慮。首先,我們從信息展示場景開始,分析如何選擇容器。
這里有幾個關鍵問題,我們逐個分析:
關鍵問題一:能否分清主次。
這個問題很難。用戶可能說“這個內(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的應用)
關鍵問題三:是否需要保持上下文。
有這樣一個場景:上級單位對多個下屬單位進行考核,打分有一定主觀性,需要參考其他單位得分。如果跳轉新頁面進行打分操作,就會斷開原有上下文的關系,影響用戶操作流暢性。
需要保持上下文的場景中,應避免迫使用戶離開父級頁面,建議在原頁面或浮層中呈現(xiàn)更多信息。
關鍵問題四:是否頻繁往返。
這個一般由任務類型決定,即當前操作是“主線任務”還是“支線任務”。
在主線任務場景中,用戶持續(xù)前進。比如網(wǎng)購商品,用戶在選購商品-確認地址-付費-下單完成···等步驟中環(huán)環(huán)前行。這時建議使用原頁面跳轉的方式。
支線任務完成后,一般要回歸主任務,也就是存在“往返”,就像從小路回歸到大路上。比如清理郵箱:用戶閱讀處理完一封未讀郵件后返回未讀列表,繼續(xù)處理下一條。在這里,“閱讀并處理一條郵件”是支線任務,“”清理郵箱”是主線任務。建議給“支線任務”新開標簽頁處理。
關鍵問題五:是不是必須看到的。
當前信息對用戶來說是否重要且關鍵?模態(tài)是較為“強勢”的交互模式。原則上,界面態(tài)度保持禮貌克制,以免打擾到用戶。
并不是所有容器都適合放置表單操作——部分容器因“排他性”的特征,會隱藏部分信息,可導致用戶遺漏重要操作。
我們一般將操作分成兩類:
我們可以按照表單的體量,或者信息的重要及關鍵程度,選擇相應的UI組件。
容器組件的的神奇之處是可以多次嵌套和疊加,創(chuàng)造出更多空間。
但注意保持信息體量和層級之間的平衡,避免過多嵌套和疊加,讓用戶在多個容器中迷失方向。
(↑案例:抽屜嵌套抽屜)
(↑案例:tabs嵌套tabs)
(↑案例:抽屜嵌套tabs)
感謝讀到最后的讀者們,就用一句話來結束今天的分享吧~
設計一件東西時,總是要在更大的環(huán)境中考慮它——房間里的一把椅子、房子里的房間、環(huán)境中的房子、城市規(guī)劃中的環(huán)境。
——埃里爾·沙里寧 (1873–1950),芬蘭建筑師
本文由 @杜大大杜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協(xié)議。
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
在視覺設計的世界里,色彩不僅僅是一種裝飾,它是傳達情感、影響情緒和吸引用戶的關鍵。本文深入探討了色彩在界面設計中的重要性,揭示了如何通過色彩的定義、屬性、模型以及在不同場景下的應用來增強設計的吸引力。
色彩在我們?nèi)粘TO計中起著定生死的作用,它是設計的靈魂,舒適的色彩搭配可以讓設計師一遍定稿,感覺在自己的設計生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設計至關重要。
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應用
五、 不同場景下的色彩應用
六、 色彩在B端設計中的作用
七、 B端色彩設計使用的原則
1、物理學角度
色彩是光的屬性,當光波通過物體時,物體會吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。
2、心理學角度
色彩是人腦對光波長的視覺感知,不同的波長刺激視網(wǎng)膜上不同類型的感光細胞,進而產(chǎn)生不同的色彩感覺。
3、 藝術學角度
色彩是藝術創(chuàng)作的重要元素,它不僅關乎視覺感受,還與情感、文化、象征意義相關聯(lián)。
4、 設計學角度
在設計領域,色彩是傳達信息、影響情緒和創(chuàng)造美感的關鍵工具。
5、 計算機科學角度
在數(shù)字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時,同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下,會呈現(xiàn)不同的明暗變化和差異。
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會越高;不同色別所達到的飽和度不同,一般情況下,紅色的純度可達到最高,綠色的則相對較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會導致飽和度和明度發(fā)生變化;通常,照明光線的性質、物體表面結構對光線吸收與反射的性能等因素影響飽和度。
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
這種色彩模型是我日常在的設計工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細微的變化,我通常會通過調節(jié)S和B的百分比數(shù)值來達到自己想要的目的。
以上就是我在設計項目中,運用該色彩模型做的一個實戰(zhàn),項目中用到了一個圖形,需要用同色系來表達,我保持了H色值的不變,讓S值和B值都發(fā)生著微妙的不同,于是就產(chǎn)生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵大家多在實戰(zhàn)中運用這樣的色彩模型,簡單實用。
RGB是從顏色發(fā)光的原理來設計定的,通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈,當它們的光相互疊合的時候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
紅、綠、藍三個顏色通道每種色各分為256階亮度,在0時“燈”最弱——是關掉的,而在255時“燈”最亮。當三色灰度數(shù)值相同時,產(chǎn)生不同灰度值的灰色調,即三色灰度都為0時,是最暗的黑色調;三色灰度都為255時,是最亮的白色調。
雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來,于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過顏料反射和吸收光線來顯色。
記得之前自己從事平面工作的時候,就經(jīng)常要用到CMYK模式,因為印出來的效果偏差是最小的,是最靠近設計效果圖的。
通過對比,我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉化為成CMYK的色彩模式。
紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力,也常與興奮、熱烈的情緒相關。
著名的快餐品牌肯德基,在自己的網(wǎng)頁及店鋪裝修中都運用了紅色,因為紅色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。
橙色傳達溫暖、歡快和積極向上的情感;它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺。
百度網(wǎng)盤的這個登錄界面就運用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運用一下讓界面有了溫度。
黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個色調采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時它是一種快樂的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長的需求。
綠色代表平靜、和諧與生機。綠色常與大自然相關,給人帶來安寧、放松的感覺,也象征著成長、希望和新生。
青椒云的目標用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關注,同時綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
青色寓意清新、寧靜和沉穩(wěn),它給人一種冷靜、理智的印象,同時也帶有一絲清新的活力。
青色是一種帶有藍色和綠色的顏色,因此青色既有藍色的專業(yè)感、信任感,也有綠色的生機感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁,病人希望在這里帶來健康與復蘇,也希望獲得專業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。
藍色代表冷靜、忠誠和信任;它常與沉穩(wěn)、深邃的情感相關,能帶來寧靜、平和的心境,也象征著智慧和理性。
123云盤使用了藍色,藍色符合社會的普遍審美認知,接受度比較高;其次,藍色給人安全的感覺,也符合云盤的初衷,給用戶安全的存儲服務。
紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺,同時也帶有神秘莫測的氛圍,與夢幻、創(chuàng)造力等情感相關。
美柚的主要用戶是女性,紫色在色彩心理學中常被認為具有優(yōu)雅、神秘、浪漫的特質,這些特質與女性的審美和情感需求相契合,能夠吸引女性的關注。
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡潔又不失大氣,傳遞出了一種質樸、雅致的感覺。
? 吸引顧客注意力
在眾多商業(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ū)采用了大量的吃喝玩樂的插畫來引導用戶消費。
? 視覺特性方面
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)境,它需要安靜,不需要過于刺激的顏色搭配。
比方在日常設計當中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍色代表著鏈接,同時不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結果和狀況方面,色彩起著非常重要的作用。
下面這個IDC運營的監(jiān)測平臺,它就是通過顏色來區(qū)分不同的告警級別的,可見顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
B端設計中大面積使用品牌色,可以強化品牌形象,使用與品牌標志風格相近的色彩,可以幫助用戶快速識別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強用戶對品牌的信任。
例如我給湖南高速設計的一套B端界面設計,用戶強烈要求改變傳統(tǒng)的藍色風格,要求整套界面設計要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
在B端界面設計中,顏色在幫助信息區(qū)分起著非常重要的作用,通??梢酝ㄟ^不同的色彩來區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結構和布局,例如,導航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。
我設計的天翼寫作,就是這樣的設計思路,導航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
選擇合適的色彩對比度可以增強文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
選擇適當?shù)纳士梢誀I造出專業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗。
我參與的這個后臺界面,就是通過合理的色彩搭配來引導用戶使用的,當用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒有走完的流程就會是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進程的卡點,提升了用戶體驗。
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實色彩也是有性格的,不同的色彩也有不同的性格,當我們對色彩的性格有足夠多的了解,在面對不同的客戶時,我們對色彩的拿捏以及設計需求的把握時,會更加的游刃有余。
我們平常確實是在做設計,但是我們更多的是在與人打交道,我們更好的聆聽,會幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設計,少受加班之苦。
比方說我之前給云門戶設計的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛深沉的UI風格;而我負責的天翼云電腦專家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調,不同的決策層客戶,就會帶來不同的設計結果。
在這個登錄頁面中,我就是運用的6:3:1原則,60%的主色,30%的次要色,10%的點綴色;使用了大面積的藍色和藍灰色,最后使用一點點的橙色,這樣的配色會顯得高級。
為了保證畫面風格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區(qū)分信息的層級關系。
比方說我參與的星辰大模型AI文檔生成能力的應用,里面無論文字顏色還是底色都是運用的無彩色,只是通過了色彩深淺變化來做了層級區(qū)分,因為無彩色可以起到很好的降噪作用,既傳達了信息,又不會顯得界面凌亂復雜。
比方說,日常我們設計的卡片都是用的白色,而底色我們用的是灰色,因為卡片里面的內(nèi)容都是比較重要的信息,需要用一個亮度比較高的顏色,讓內(nèi)容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個一前一后的對比,更好的幫助內(nèi)容進行傳播。
比方說我設計的這個IT運維監(jiān)控平臺的首頁,物理主機、網(wǎng)絡及安全設備、工單、在途工單這幾個指標是非常關鍵的,所以他們的圖片底色用了純度比較高的有彩色來標識。
作為設計師,我們的設計工作其實就是在設計一種感覺,一種情緒,設計前定調的意識真的太重要了,感覺對了,什么都就對了。
比方說我前段時間接到了一個B端的大屏可視化需求設計,客戶說之前的大屏設計不喜歡,希望重新出一個新的設計,然后公司的需求對接人員在給我下達需求時,真的就只是給我下達了這幾個字,讓我重新出一個設計試試。
以我的職業(yè)直覺,感覺這個需求是不夠細化的,于是我就多問了幾句,我問客戶是想要常規(guī)的藍色調的還是別的?果然一問,客戶說不希望再用常規(guī)的藍色的,希望新的設計要用他們的品牌色綠色,剛聽到這幾個字的時候,我以為這次我把握住需求了,在收集參考圖的時候,我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習慣,我覺得深色會更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風格來出圖。
在出稿之前,通過自己反復的溝通確認,發(fā)現(xiàn)設計前的定調意識真的太重要了,要不是有出圖前一波三折的反復確認以及需求的細化,就不會有后來的一遍過稿。
不管我們設計什么色系的界面,都避不開用到灰色,在設計中用跟主視覺相符的灰,會使得界面更加的高級、協(xié)調與美觀,注意好了這個小細節(jié),會給我們的設計加分不少。
下面是我日常體驗到的兩個界面,上面綜合管理平臺里面的灰色就沒有跟主色調藍色相呼應,灰色沒有向藍色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設計就非常的注重細節(jié),灰色偏紫,整個界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個等級。
一個微小細節(jié)的在意,在無形中拉高了設計的高度,十個細節(jié)乃至更多細節(jié)的在意,就會帶來更多意想不到的結果。
總結:
以上就是我最近對色彩的一些頓悟、感受和學習收獲,在不斷的復盤總結中,我們總會收獲一些新的認知,通過這次色彩的復盤之旅,發(fā)現(xiàn)色彩對設計師真的太重要了,希望我的分享對大家有啟發(fā),不足之處也歡迎大家留言交流。
本文由 @姝斐suphie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉載
題圖來自 Unsplash,基于CC0協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
隨著電動車的發(fā)展,駕艙也越來越智能,對設計的要求也越來越高。從一開始的只是展示信息,到現(xiàn)在的情感陪伴、多感官交互,這篇文章,我們來看看都有哪些變化。
在科技飛速發(fā)展的今天,汽車已不再僅僅是一種交通工具,更是人們生活中的重要伙伴。隨著人機交互技術的不斷進步,智能駕艙多感官交互正從滿足傳統(tǒng)的安全駕駛需求逐漸轉變?yōu)樘峁┯星楦械闹悄?AI 陪伴需求,為駕駛者帶來全新的出行體驗。
在過去,智能駕艙的主要功能是確保駕駛的安全。通過先進的傳感器、顯示屏和控制系統(tǒng),為駕駛者提供車輛狀態(tài)信息、導航指引和安全警示等。例如,高清數(shù)字儀表盤能夠清晰地顯示車速、油耗等關鍵數(shù)據(jù),幫助駕駛者隨時掌握車輛運行情況;倒車影像和雷達系統(tǒng)可以在倒車時提供清晰的后方視野,降低碰撞風險。然而,這種以安全為核心的智能駕艙雖然滿足了基本的駕駛需求,但缺乏情感互動和個性化體驗。
如今的智能駕艙多感官交互技術能夠實現(xiàn)對駕駛者情感狀態(tài)的識別。車內(nèi)的攝像頭和傳感器可以捕捉駕駛者的面部表情、語音語調、身體動作等信息,分析其情緒變化。當檢測到駕駛者疲勞時,智能 AI 會發(fā)出溫馨的提醒,建議休息或播放輕松的音樂來緩解疲勞;當駕駛者感到焦慮或緊張時,智能 AI 可以通過調節(jié)燈光顏色、播放舒緩的音樂或者講述有趣的故事來幫助駕駛者放松心情。
智能 AI 還能根據(jù)駕駛者的情緒做出個性化的回應。例如,如果駕駛者心情愉快,智能 AI 可能會播放歡快的音樂并與駕駛者進行愉快的交流;如果駕駛者情緒低落,智能 AI 則會給予安慰和鼓勵,讓駕駛者感受到被理解和關心。
基于對駕駛者的了解,智能駕艙可以提供高度個性化的交互體驗。智能 AI 會記住駕駛者的喜好,如喜歡的音樂類型、溫度設置、座椅調節(jié)角度等,并在駕駛者上車時自動調整到相應的狀態(tài)。這種個性化的服務讓駕駛者感受到車輛是為自己量身定制的,增強了駕駛者與車輛之間的情感連接。
智能 AI 還可以根據(jù)駕駛者的日常習慣和興趣愛好提供個性化的建議和服務。比如,如果駕駛者經(jīng)常在周末去郊外游玩,智能 AI 可能會在周末來臨前推薦適合的郊游地點和路線;如果駕駛者喜歡聽某一類型的廣播節(jié)目,智能 AI 會在合適的時間自動播放該節(jié)目。
智能駕艙不再是一個孤立的空間,而是可以與外界進行社交互動的平臺。通過車聯(lián)網(wǎng)技術,駕駛者可以與家人、朋友保持聯(lián)系,分享自己的行程和感受。例如,在行駛過程中,駕駛者可以通過語音指令發(fā)送消息給朋友,或者與家人進行視頻通話。
智能 AI 還可以組織車內(nèi)的社交活動,增強駕駛者與乘客之間的互動。例如,在長途旅行中,智能 AI 可以發(fā)起游戲或話題討論,讓大家在旅途中充滿樂趣。
對于長期駕駛者來說,智能駕艙可以成為一個陪伴成長與學習的伙伴。智能 AI 可以記錄駕駛者的駕駛習慣和技能提升過程,提供針對性的駕駛建議和培訓。例如,當駕駛者在某個駕駛操作上存在不足時,智能 AI 會及時指出并提供改進方法。
智能 AI 還可以提供各種知識和信息,滿足駕駛者的學習需求。比如,在等待紅綠燈的間隙,智能 AI 可以播放一段新聞、歷史故事或者科普知識,讓駕駛者在碎片化的時間里不斷學習和成長。
高清顯示屏和數(shù)字儀表盤不僅可以提供車輛信息,還可以展示溫馨的畫面和個性化的主題,根據(jù)駕駛者的情緒和喜好進行變化。例如,當駕駛者心情愉悅時,顯示屏可以呈現(xiàn)出絢麗的色彩和歡快的動畫;當駕駛者需要放松時,顯示屏可以切換到寧靜的自然風景畫面。
氛圍燈的運用也為情感交互增添了色彩。不同顏色的氛圍燈可以反映不同的情緒狀態(tài),營造出相應的氛圍。比如,藍色的氛圍燈可以帶來寧靜的感覺,紅色的氛圍燈可以增加活力和激情。
高品質的音響系統(tǒng)可以播放各種類型的音樂和聲音,滿足駕駛者不同的情感需求。智能 AI 可以根據(jù)駕駛者的情緒選擇合適的音樂播放列表,或者根據(jù)場景自動調整音樂的風格和音量。
語音交互更加自然和親切。智能 AI 的語音不再是機械的合成音,而是具有情感色彩的聲音,能夠更好地與駕駛者進行交流和互動。
座椅的按摩功能和溫度調節(jié)可以根據(jù)駕駛者的身體狀況和情緒進行調整,提供舒適的駕駛體驗。例如,當駕駛者感到疲勞時,座椅可以自動啟動按摩功能,幫助駕駛者放松身體。
方向盤和控制面板的觸摸反饋更加靈敏和個性化,讓駕駛者在操作過程中感受到與車輛的互動。
香氛系統(tǒng)可以釋放不同的氣味,調節(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)許可,禁止轉載。
題圖來自 Pexels,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
對九類交互狀態(tài)的深入理解和不斷創(chuàng)新,將為產(chǎn)品設計帶來更大的提升空間,為用戶帶來更加卓越的體驗,推動產(chǎn)品在競爭激烈的市場中不斷發(fā)展和進步。
交互狀態(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)品的整體品質。例如,在 B 端產(chǎn)品的 UI 設計中,深入了解用戶需求與場景,進行簡潔直觀的界面設計,可以提升產(chǎn)品的可用性。通過用戶研究方法,了解用戶的工作環(huán)境、使用習慣和設備網(wǎng)絡條件等,將用戶需求轉化為具體的設計元素和功能,為用戶提供更加貼合實際的使用體驗。
綜上所述,交互狀態(tài)在產(chǎn)品設計中具有重要的地位,它對用戶體驗和產(chǎn)品可用性有著重大的影響。產(chǎn)品開發(fā)者和設計師應該充分重視交互狀態(tài)的設計,以提高產(chǎn)品的競爭力,在市場中脫穎而出。
加載類型:除了電商 APP 和計算器應用的不同加載方式外,一些社交平臺在加載用戶動態(tài)時也會采用類似的漸進式加載。當用戶打開社交平臺,首先會看到最近的幾條動態(tài),隨著用戶不斷下拉刷新,更多的動態(tài)內(nèi)容逐步加載出來。這樣既保證了用戶能夠快速看到部分內(nèi)容,又不會因為一次性加載過多數(shù)據(jù)而導致等待時間過長。
加載狀態(tài):在加載狀態(tài)中,不同的產(chǎn)品會有不同的表現(xiàn)形式。例如,一些在線學習平臺在加載課程視頻時,除了會有旋轉的加載動畫外,還會顯示加載進度條,讓用戶清楚地知道視頻加載的進度。如果加載成功,會有一個短暫的提示音,增強用戶的感知。而如果加載失敗,除了提示用戶檢查網(wǎng)絡連接外,還會提供一些常見問題的解決方案,如清理緩存、更換網(wǎng)絡環(huán)境等。
中斷:中斷情況在實際應用中較為復雜。以在線辦公軟件為例,如果在編輯文檔過程中出現(xiàn)網(wǎng)絡中斷,軟件會自動保存當前文檔的進度,以防止數(shù)據(jù)丟失。同時,會提示用戶網(wǎng)絡中斷,并嘗試重新連接。如果長時間無法連接,用戶可以選擇將文檔保存到本地,待網(wǎng)絡恢復后再進行上傳。
深度 / 夜間模式:除了閱讀類應用,一些視頻播放平臺也提供夜間模式。在夜晚觀看視頻時,開啟夜間模式可以降低屏幕亮度,減少對眼睛的刺激。同時,夜間模式下的界面顏色通常會更加柔和,營造出舒適的觀看氛圍。
存在沉浸模式插件:在一些在線教育平臺中,也會有類似沉浸模式的功能。當學生進入課程學習時,平臺會自動隱藏無關的通知和廣告,讓學生專注于學習內(nèi)容。同時,學生可以通過特定的快捷鍵退出沉浸模式,方便隨時查看其他信息。
輸入:除了即時通訊軟件,一些辦公軟件在輸入方面也有很多優(yōu)化。例如,在文檔編輯軟件中,當用戶輸入一些特定的關鍵詞時,軟件會自動彈出相關的文檔模板或格式設置選項,提高用戶的輸入效率。
點擊:在電商平臺的商品詳情頁面,點擊商品圖片通常會放大顯示,讓用戶更清楚地看到商品的細節(jié)。同時,點擊購買按鈕后,會有一個短暫的確認彈窗,讓用戶再次確認購買信息,避免誤操作。
重復點擊 / 惡意操作:在一些金融類應用中,對于重復點擊或惡意操作的防范更加嚴格。例如,在股票交易軟件中,如果用戶連續(xù)多次提交相同的交易指令,系統(tǒng)會自動鎖定該用戶的交易功能,并提示用戶聯(lián)系客服解決問題。
極值:在旅游預訂平臺上,用戶在選擇酒店價格區(qū)間時,系統(tǒng)也會進行極值限制。價格下限通常為平臺上的最低價格,價格上限則會根據(jù)當?shù)鼐频甑氖袌鰞r格和用戶的搜索歷史進行動態(tài)調整,確保用戶能夠得到合理的搜索結果。
邊界:在一些圖形設計軟件中,除了畫筆工具的邊界限制,其他工具也有類似的限制。例如,當用戶使用裁剪工具時,裁剪區(qū)域不能超出畫布的范圍,否則無法進行裁剪操作。
時間:在在線考試系統(tǒng)中,時間限制尤為重要。考試開始前,考生只能看到考試的相關信息和注意事項,無法進入答題頁面??荚囬_始后,系統(tǒ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é)省流量。
沒有內(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)容,商品會被下架,并通知賣家進行整改。同時,平臺會對賣家進行警告,嚴重的可能會關閉賣家的店鋪。
站外內(nèi)容:在一些知識分享平臺中,當用戶點擊站外鏈接時,平臺會提示用戶 “該鏈接為站外內(nèi)容,請注意安全”,并提供一個返回平臺的快捷按鈕,方便用戶隨時返回。同時,平臺會對站外鏈接進行安全檢測,確保鏈接的合法性和安全性。
橫豎屏:在一些圖片編輯軟件中,橫豎屏切換會影響用戶的操作體驗。當用戶將手機從豎屏切換到橫屏時,軟件會自動調整界面布局,將工具菜單和編輯區(qū)域分別放置在屏幕的兩側,方便用戶進行操作。而當用戶將手機從橫屏切換回豎屏時,軟件會恢復到原來的布局。
分辨率:在一些游戲開發(fā)中,開發(fā)者會根據(jù)不同設備的分辨率進行優(yōu)化。例如,在高分辨率的設備上,游戲畫面會更加細膩,特效也會更加豐富;而在低分辨率的設備上,游戲會自動降低畫質,以保證游戲的流暢運行。
清晰度:在一些在線視頻教育平臺中,清晰度的選擇會影響用戶的學習體驗。在網(wǎng)絡條件好的情況下,用戶可以選擇高清或超清的視頻清晰度,以便更清楚地看到教學內(nèi)容;而在網(wǎng)絡條件差的情況下,用戶可以選擇標清或流暢的清晰度,以保證視頻的播放流暢度。
不同版本:在一些軟件的不同版本中,功能和界面會有所不同。例如,在一款繪圖軟件的專業(yè)版中,會提供更多的高級功能和工具,而在免費版中,功能會相對較少。同時,軟件會在界面上明確標識出不同版本的特點和優(yōu)勢,方便用戶根據(jù)自己的需求進行選擇。
硬件調用:在一些智能家居控制軟件中,當用戶需要調用攝像頭進行監(jiān)控時,軟件會彈出請求授權的提示框。在獲得用戶授權后,軟件會提供實時監(jiān)控畫面,并支持遠程控制攝像頭的角度和焦距。
硬件聯(lián)動:在一些智能辦公場景中,硬件聯(lián)動可以提高工作效率。例如,當用戶在會議室中使用智能投影儀時,投影儀可以與會議室的燈光和音響系統(tǒng)聯(lián)動,根據(jù)投影內(nèi)容自動調整燈光亮度和音響音量。
未登錄 / 已登錄:在一些在線教育平臺上,未登錄用戶只能瀏覽部分公開的課程內(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ù)囊龑Ш吞崾?。站外?nèi)容相關的設計保障了用戶在訪問外部鏈接時的安全。設備相關的橫豎屏、分辨率、清晰度、不同版本、硬件調用和聯(lián)動等設計,適應了不同設備和用戶需求。角色相關的不同狀態(tài)設計,為不同類型的用戶提供了個性化的服務和體驗。
展望未來,隨著科技的不斷進步,交互狀態(tài)的設計也將不斷發(fā)展和創(chuàng)新。一方面,人工智能、大數(shù)據(jù)等技術的應用將使交互狀態(tài)更加智能化和個性化。例如,通過分析用戶的使用習慣和偏好,自動調整加載策略、推薦適合的操作模式等。另一方面,虛擬現(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)作者許可,禁止轉載
題圖來自 Unsplash,基于CC0協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務
蘭亭妙微(www.z1277.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)象:特殊的東西往往比普通的東西更容易被人記住。這就意味著,在設計中,我們要制造一些“特殊”的元素,使它們能夠從眾多的信息中脫穎而出,成為用戶關注的焦點。今天筆者就帶大家了解一下設計中常用的心理學之一馮·雷斯托夫效應。
在1933年的德國,一個名叫海德維希·馮·雷斯托夫的醫(yī)生開啟了一項改變我們對人類記憶理解的實驗。她深入探索了當人們面對一系列物品時,他們的記憶是如何運作的。通過精心設計的對比實驗,她發(fā)現(xiàn)了一個令人驚奇的現(xiàn)象:在一組物品中,那個最特別的物品總是更容易被人們記住。
這一發(fā)現(xiàn)為我們揭示了一個核心事實:特別的事物更能吸引我們的注意力,并在我們的記憶中留下深刻的印記。想象一下,在一組物品中,如果有一個被聚光燈照亮,那么相比其他未被照亮的物品,它無疑會成為人們關注的焦點,從而在記憶中留下更深的痕跡。
這個人類行為和記憶的規(guī)律后來被命名為“馮·雷斯托夫效應”。這一效應不僅僅是一個簡單的觀察,它實際上是人類行為學和心理學領域的一項重要研究成果。隨著時間的推移,這一效應逐漸被應用于美學和設計領域,為設計師們提供了全新的視角和工具,以創(chuàng)造出更具吸引力和影響力的作品。
自馮·雷斯托夫效應被正式確立命名以來,眾多科研學者在此基礎上進行了更深入的研究,他們不僅剖析了這一效應的內(nèi)在機制和影響因素,還探討了其在不同情境下的應用。隨著研究的深入,對于這一效應的理解也在不斷加深,并衍生出了許多其他的理論和學術觀點。
馮·雷斯托夫效應為我們提供了一個獨特的視角,幫助我們更好地理解人類記憶的運作方式。通過運用這一原理,我們可以在設計中有意識地創(chuàng)造出令人難忘的元素,從而與觀眾建立更深刻的聯(lián)系。無論是在廣告、品牌推廣還是產(chǎn)品設計中,突出特別的元素都是一種有效的策略,可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。
馮·雷斯托夫效應,又被稱為隔離效應或新奇效應,揭示了人們在記憶中的偏好。當情境或經(jīng)歷中出現(xiàn)與眾不同的刺激時,這種效應尤為明顯。
在當今信息爆炸的時代,用戶往往沒有耐心去仔細查找信息,而是快速掃視。因此,設計師需要巧妙地運用萊斯托夫效應,使關鍵內(nèi)容從繁雜的信息中脫穎而出,吸引用戶的目光。
統(tǒng)一性是設計的基礎,但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運用顏色、形狀、布局等元素,我們可以創(chuàng)造出與眾不同的視覺效果,引導用戶的視線。通過巧妙地突出關鍵內(nèi)容,我們能夠更好地與用戶溝通,引領他們的注意力,為業(yè)務創(chuàng)造更大的價值。
在界面設計中,我們常常會遇到這樣的情況:在同類型的元素中,某一元素與其他元素存在顯著差異,這種現(xiàn)象我們稱之為“背景不同”。為了使某個模塊或元素在用戶心中留下深刻印象,我們可以利用環(huán)境差異來提高其識別度和記憶度。這種手法在UI設計中被廣泛應用,它利用了馮·雷斯托夫效應,能有效吸引用戶點擊。
例如淘寶底部標簽欄中的四個ICON,唯獨首頁的第一個ICON(品牌logo)風格與眾不同。即使離開了該頁面,這個特殊的ICON依然讓人印象深刻,餓了么第二的圖標也是如此。因此,我們在設計界面時,若想吸引用戶的注意或提高點擊量,可以打破常規(guī),讓特定元素在同背景下脫穎而出。
再比如下圖的個人中心界面,功能入口模塊均采用ICON展示,而游樂場模塊卻采用了特殊的布局和設計。因此,當用戶進入個人中心時,最先映入眼簾的便是游樂場模塊。這也解釋了為什么我們在進行廣告和活動投放時,需要特別設計的原因。
當遇到與過去經(jīng)驗顯著不同的情況時,我們的大腦會產(chǎn)生一種特殊的效應,這種效應被稱為“經(jīng)驗不同”的效應。例如,在騎自行車的過程中,我們通常習慣于左手控制左把手,右手控制右把手。但是,如果我們嘗試用雙手交叉的方式來騎車,結果很可能會摔倒。從此以后,每當我們聽到或描述有關騎車摔倒的事情時,我們都會立刻想起那次“經(jīng)驗不同”的嘗試。
同樣地,淘寶和京東在618、雙十一等大型促銷活動時,會選擇重新設計他們的首頁。與往常的設計相比,這些新的首頁設計通常會增加更多的促銷入口,甚至改變ICON的風格。從馮·雷斯托夫效應的角度來看,這種與以往不同的設計能夠更好地吸引用戶的注意力,加深用戶的記憶,并擴大活動對用戶的影響力。
在視覺層面難以實現(xiàn)強烈差異化時,我們可以通過功能來實現(xiàn)有效的隔離。以微信為例,其置頂功能允許用戶將好友或群聊消息置于頂部,從而與其他信息區(qū)分開來。這種設計確保了關鍵信息的優(yōu)先級,使用戶能夠更快速地找到和關注所需內(nèi)容。通過巧妙地運用功能,我們可以輕松地解決視覺上的一致性與差異化之間的矛盾,為用戶提供更加流暢和個性化的體驗。
靜態(tài)頁面容易讓人視覺疲勞,動效能夠更加生動有趣地展示內(nèi)容,引導用戶更加關注頁面。相較于被動接受信息,動效能夠更加有效地吸引用戶注意。
隨著Banner自動輪播的普及,用戶對其的吸引力逐漸降低。面對不斷變化的廣告,用戶不再耐心地逐個瀏覽。當無法獲取所需信息時,他們的視線會迅速轉向其他區(qū)域。
為了應對這一挑戰(zhàn),騰訊視頻首頁的Banner采用了背景聯(lián)動的形式。這意味著頭部背景色會根據(jù)Banner圖片的色調進行變化,從而擴大了內(nèi)容的變化空間。這種設計不僅使廣告更加引人注目,還使用戶更容易被吸引并保持關注。
頻道頁的入口方式多種多樣,金剛區(qū)icon無疑是最優(yōu)選擇。若要突出展示某些業(yè)務功能,單一的icon配合動效可有效吸引用戶關注。此策略簡單高效,有助于用戶快速找到所需內(nèi)容。
在設計界面時,我們追求的是在有限的空間內(nèi)展示更多的有效信息,避免信息的無效重復。但在電商平臺中,尤其是涉及到利益點時,我們需要確保信息具有足夠的價值感和吸引力。
以智行APP開通會員為例,領神卡作為核心賣點被突出展示,采用了平鋪展開的方式,從而突顯其價值。相對其他權益則相應地進行了弱化處理,以保持整體信息的清晰度和重點。這樣的設計既充分利用了屏幕空間,又確保了用戶能夠快速了解到核心的利益點。
頁面信息層次分明,信息層級越高,用戶感知越強烈,越能吸引注意。例如,模態(tài)彈窗處于最上層,與內(nèi)容層完全隔離,用戶無法忽視。其次是非模態(tài)懸浮層,與內(nèi)容層隔離,但不影響用戶操作。還有側邊懸浮按鈕、頂部或底部懸浮橫條等。
受“危險按鈕”的影響,過去設計師常常給予負向情緒操作很高的視覺層級,例如退出登錄。這樣的設計意圖是警示用戶操作危險,但視覺上卻過于強調,甚至有些“喧賓奪主”。近年來,移動端設計中這種矛盾逐漸減少,但仍然存在。與其強調操作的難度和危險性,不如考慮如何讓用戶自然地忽視這些操作,減少不必要的干擾。從馮·雷斯托夫效應來看,這種設計方式有本末倒置之嫌,應盡量避免。
新手設計師常常會遇到想要突出所有元素,但最終無法突出任何一項的問題。頁面中的特異點應該屬于少數(shù),如果所有元素都想做得不一樣,都會讓頁面整體視覺效果崩潰。因此,在設計中要學會取舍,選擇最重要的元素進行突出,才能達到最佳的視覺效果。
總的來說,將馮·雷斯托夫效應運用到設計中,能幫助我們創(chuàng)造出更具吸引力、更容易被記住的設計。但請記住,任何設計決策都應以用戶為中心,了解他們的需求和心理是關鍵。只有這樣,我們才能真正創(chuàng)造出打動人心的設計。
專欄作家
大漠飛鷹;人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅動、產(chǎn)品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協(xié)議。
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
對于設計同學來說,很多基礎知識可能看起來很簡單,容易被忽視。但隨著設計經(jīng)驗越來越多,更建議大家牢固系統(tǒng)地掌握這些基礎知識。在本篇文章中作者給大家系統(tǒng)性地講解了界面設計進階過程中需要搞懂的基本設計要素。一起來看吧。
當下大多數(shù)界面設計類軟件都是以矢量圖的方式工作。通過調整參數(shù)來定義圖形的大小,并且在不降低質量的情況下對圖形進行拉伸和放大。
在進行界面設計時,我們需要生成出各種尺寸的矩形、圓形等對象,規(guī)定這些對象的尺寸和樣式,并對這些對象進行移動,將它們放到合適的位置上。
很多基礎知識可能看起來很簡單,容易被忽視。但隨著設計經(jīng)驗越來越多,更建議大家牢固系統(tǒng)地掌握這些基礎知識,厚積薄發(fā)才能越走越遠!
盒子模型是在設計和開發(fā)中定義數(shù)字接口最基本的方法。我們所做的大多數(shù)設計都是根據(jù)盒子模型進行,因此了解盒子模型對界面設計來說非常重要。
盒子模型由四個主要元素組成:
內(nèi)容 (content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)。
內(nèi)邊距(padding)是內(nèi)容和邊框線之間的空間,如下圖灰色區(qū)域。內(nèi)邊距的范圍越廣,內(nèi)容的安全區(qū)域就越大。
外邊距(margin)是盒子與其他元素之間的空白區(qū)域,如下圖藍色區(qū)域。外邊距保證了盒子與盒子之間有足夠的間距。
寬度(width)和高度(height)是定義對象大小的參數(shù)。在二維空間上,寬度代表橫軸上的比例,高度代表縱軸上的比例。
一定比例的寬和高構成的矩形是容納對象的最小矩形框。如果對象本身是不規(guī)則的形狀,在設計時我們需要根據(jù)對象的尺寸制定一個規(guī)則的矩形框,方便交付開發(fā)。
角度定義了對象順時針旋轉的方向,默認為0°。另外旋轉也可以是負數(shù),比如-15°旋轉與345°旋轉的角度是相同的。
如果我們想要一個統(tǒng)一的界面,最好不要手動旋轉對象,而是通過輸入度數(shù)來旋轉,這樣會比手動旋轉更精確。
旋轉對圓形來說是特殊的存在,因為一個圓形無論旋轉到哪個角度看都是一樣的。
邊框半徑數(shù)值越大,這個形狀的圓角度數(shù)就越大。例如一個矩形,既能一次性設置四個點的圓角半徑,也可以單獨設置某個點的圓角半徑。
正常來說,設置圓角的圖形看起來比直角圖形更友好。界面設計中,相同的圖形最好能保持一樣的的圓角度數(shù),這樣界面看起來會更統(tǒng)一。
另外一個圖形是否需要圓角,要根據(jù)產(chǎn)品風格靈活選擇,確保與當前使用場景相匹配。例如某個產(chǎn)品的logo或主視覺使用了不同半徑的圓角,在界面中我們也可以使用不同半徑的圓角按鈕,保持風格統(tǒng)一。
一旦我們決定了用某種樣式的圓角按鈕,那么界面中的其他按鈕也應該保持一致。
填充是指對對象內(nèi)容的操作,填充的可以是一種顏色,也可以是一張圖片。
針對不同對象,我們需要差異化定義每個對象的填充效果,保證這些對象簡單易懂,清晰可見。
在設計過程中,可以對同一個對象組合使用多種填充效果。例如一個正方形頭像,首先填充一張照片,在照片的基礎上再添加各種顏色效果,能讓頭像的設計與界面更匹配。
如果說填充強調對象內(nèi)部,那么描邊就是對對象外部邊框的操作。
描邊分為內(nèi)部邊框、居中邊框和外部邊框三種樣式,其中只有內(nèi)部邊框不會在視覺上使對象變大。
例如下圖是一個60px大小的正方形,有2px的描邊。從左起分別是內(nèi)邊框、居中邊框、外邊框的描邊效果。因為內(nèi)邊框是在正方形內(nèi)部描邊,所以視覺上看這個正方形仍是60px大小。
居中邊框是指正方形的外部和內(nèi)部各占1px,那么采用居中邊框的正方形尺寸變成了62×62。
同理,外部邊框是指正方形的外部多了2px,采用外部邊框的正方形尺寸變成了64×64。
對于不同的對象,我們可以設定不同寬度的描邊,描邊的樣式可以是虛線、實線、純色、漸變色等多種樣式。
目前大多數(shù)設計軟件支持修改描邊的端點和節(jié)點。端點樣式包括方頭、平頭和圓頭,節(jié)點樣式包括斜接連接、圓角連接、斜角連接。
陰影是UI設計中最常用的效果,根據(jù)對象的X軸、Y軸的偏移程度、模糊程度、擴展程度、顏色和不透明度等屬性構成。
通過設置模糊能讓陰影的面積擴散擴得更大,顏色由深變淺。一般來說陰影的不透明度低于40%時,呈現(xiàn)的效果比較好。
當陰影的擴展程度為負數(shù)時,陰影看起來會更自然。對比上下兩個圖例也能看出來,擴展程度為負時陰影看起來更柔和。
使用陰影有助于劃分界面的層次結構!在設計中,讓陰影看起來自然柔和不生硬是界面美觀與否的關鍵因素之一。
首先要避免純黑色陰影,純黑對比太強會影響視覺效果,建議使用基礎色調派生的顏色作為陰影顏色。
例如基礎色是綠色,可以使用飽和度、亮度較低的深綠色作為陰影顏色。陰影顏色確定后,再給陰影足夠大的模糊數(shù)值,最終會得到了一個不錯的陰影效果。
顏色太深、太生硬的陰影和按鈕顏色對比太大,設計時應盡可能調整陰影的顏色、透明度等參數(shù),避免生成這種效果;把黑色陰影調整成同色系的深色陰影,陰影的效果看起來就會更自然、更柔和;再把陰影的擴展程度調成負數(shù),就能消除陰影的外展,讓陰影看起來更真實。
內(nèi)陰影
內(nèi)陰影在UI設計中相對少見,內(nèi)陰影和上面所講的陰影有相同的參數(shù)設置,只不過內(nèi)陰影是在圖形內(nèi)部起效果。
內(nèi)陰影無法像外陰影那樣展現(xiàn)圖層之間的深度和層級關系,只對圖形內(nèi)部起作用。如果內(nèi)陰影使用太多,可能會混淆圖層間的層級關系,讓界面關系看起來不明確。
高斯模糊是最常用的設計效果,呈現(xiàn)出從中心向四周均勻擴散的模糊效果。高斯模糊由半徑控制,半徑數(shù)值越大,模糊效果越明顯。
高斯模糊常用在界面之間的過渡或者用來模糊背景突出景深效果。
高斯模糊還可以作為陰影效果,放在對象下面使用。例如新建一個橢圓做成模糊效果,放在對象下面,就能快速呈現(xiàn)出一個帶有陰影的效果。
蘋果在操作系統(tǒng)中經(jīng)常使用背景模糊,呈現(xiàn)出背景很模糊的玻璃效果。
背景模糊主要針對圖層覆蓋的內(nèi)容起作用,比如新建一個矩形調整透明度,做成背景模糊效果,那么該圖層覆蓋的區(qū)域會變模糊,圖層沒有覆蓋的區(qū)域保持不變。
動感模糊由模糊數(shù)值和角度兩個參數(shù)控制,用來模擬對象在不同角度上的移動效果。
當對象由內(nèi)到外變得模糊時,就會發(fā)生縮放模糊。這種模糊效果在界面設計中用得較少。
縮放模糊由模糊數(shù)值和原點兩個參數(shù)控制。在縮放模糊中可以隨機設置模糊原點,通過移動原點獲得一些有趣的圖形效果。
以上是界面設計進階過程中需要搞懂的基本設計要素,希望通過本次系統(tǒng)性的講解,能更進一步提升設計精細度!
專欄作家
作者:Clippp,每周精選設計文章,專注分享關于產(chǎn)品、交互、UI視覺上的設計思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉載。
題圖來自 Unsplash,基于CC0協(xié)議。
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
如果你想設計出卓越,高效和流暢的用戶界面,就請參考Ben Shneiderman的“界面設計的八大黃金法則” 。蘋果,谷歌和微軟設計的產(chǎn)品都反映了Shneiderman的法則,這些行業(yè)巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征,而這些公司的熱門界面設計則是法則的視覺體現(xiàn)。本文將告訴你如何整合8大黃金法則來改進你的工作。
Ben Shneiderman(生于1947年8月21日)是美國馬里蘭大學人機交互實驗室的計算機科學家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設計用戶界面:有效的人機交互策略(Designing the User Interface: Strategies for Effective Human-Computer Interaction)”中介紹了界面設計的八個黃金法則:
一致性
當你在設計類似的功能和操作時,可以利用熟悉的圖標,顏色,菜單的層次結構,行為召喚,用戶流程圖來實現(xiàn)一致性。規(guī)范信息表現(xiàn)的方式可以減少用戶認知負擔,用戶體驗易懂流暢。一致性通過幫助用戶快速熟悉產(chǎn)品的數(shù)字化環(huán)境從而更輕松地實現(xiàn)其目標。
常用用戶使用快捷操作
隨著使用次數(shù)的增加,用戶需要有更快的完成任務的方法。例如,Windows和Mac為用戶提供了用于復制和粘貼的鍵盤快捷方式,隨著用戶更有經(jīng)驗,他們可以更快速,輕松地瀏覽和操作用戶界面。
提供有用信息的反饋
用戶每完成一個操作,需要系統(tǒng)給出反饋,然后用戶才能感知并進入下一步操作。反饋有很多類型,例如聲音提示,觸摸感,語言提示,以及各種類型的組合。對于用戶的每一個動作,應該在合理的時間內(nèi)提供適當?shù)?,人性化的反饋。如設計多頁問卷時應該告訴用戶進行到哪個步驟,要保證讓用戶在盡量少受干擾的情況下得到最有價值的信息。
作者/版權持有人:Google,Inc. 版權條款和許可:合理使用
Windows Media Player設計師應該牢記Ben Shneiderman的第三個黃金法則:提供有用信息的反饋。體驗不佳的錯誤消息通常會只顯示錯誤代碼,對用戶來說這毫無意義。作為一名好的設計師,你應該始終給用戶以可讀和有意義的反饋。
設計流程需要設計一個完結
不要讓你的用戶猜來猜去,告訴他們其操作會引導他們到哪個步驟。例如,用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會感到滿足和安心。
提供簡潔的錯誤操作的解決方案
用戶不喜歡被告知其操作錯誤。設計時應該盡量考慮如何減少用戶犯錯誤的機會,但如果用戶操作時發(fā)生不可避免的錯誤,不能只報錯而不提供解決方案,請確保為用戶提供簡單,直觀的分步說明,以引導他們輕松快速地解決問題。例如,用戶在填寫在線表單時忘記填寫某個輸入框時,可以標記這個輸入框以提醒用戶。
允許撤銷操作
設計人員應為用戶提供明顯的方式來讓用戶恢復之前的操作,無論是單次動作,數(shù)據(jù)輸入還是整個動作序列后都應允許進行返回操作,正如Shneiderman在他的書中所說:
“這個功能減輕了焦慮,因為用戶知道即便操作失誤,之前的操作也可以被撤銷,鼓勵用戶去大膽放手探索。”
給用戶掌控感
設計時應考慮如何讓用戶主動去使用,而不是被動接受,要讓用戶感覺他們對數(shù)字空間中一系列操作了如指掌,在設計時按照他們預期的方式來獲得他們的信任。
減少短時記憶負擔
人的記憶力是有限的,我們的短時記憶每次最多只能記住五個東西。因此,界面設計應當盡可能簡潔,保持適當?shù)男畔哟谓Y構,讓用戶去再認信息而不是去回憶。再認信息總是比回憶更容易,因為再認通過感知線索讓相關信息重現(xiàn)。例如,我們經(jīng)常發(fā)現(xiàn)選擇題比簡答題更容易,因為選擇題只需要我們對正確答案再認,而不是從我們的記憶中提取。被彭博商業(yè)周刊稱為“世界上最具影響力的設計師之一”的Jakob Nielsen發(fā)明了幾種可用性研究方法,包括啟發(fā)式評估。信息再認而非回憶就是Nielsen界面設計10種可用性啟發(fā)式原則之一。
蘋果整合Shneiderman的八項黃金法設計出成功的產(chǎn)品,他們從Mac到移動設備設計都取得了巨大的成功,他們以產(chǎn)品設計的一致性,直觀而美麗為榮。蘋果的iOS人機界面指南也告訴我們他們的設計團隊如何應用Shneiderman的設計原則。
“一致性”和“感知的穩(wěn)定性”在Mac OS的設計中體現(xiàn)得淋漓盡致。不管是80年代的版本,還是現(xiàn)在的版本,Mac OS菜單欄設計都包含一致的圖形元素。
作者/版權持有人:StockSnap.io 版權條款和許可:CC0
作者/版權持有人:StockSnap.io 版權條款和許可證:CC0
隨著時間的推移,Mac OS的外觀有很大變化,Mac OS菜單欄設計都保持一致。
如前所述,Mac允許用戶使用各種鍵盤快捷鍵,使用頻率高的包括復制和粘貼(Command-X和Command-V)以及截圖(Command-Shift-3)。
作者/版權持有人:StockSnap.io 版權條款和許可證:CC0
Mac允許用戶鍵盤快捷方式操作實現(xiàn)通常需要鼠標、觸控板或其他輸入設備才能完成的操作。
當用戶點擊Mac桌面上的文件時,該文件會“突出顯示”,這是視覺反饋的一個很好的示例。另外,當用戶拖動桌面上的文件夾時,他們可以看到在按住鼠標時,文件夾顯示被移動的狀態(tài)。
作者/版權持有人:Euphemia Wong 版權條款和許可:合理使用
作者/版權持有人:Euphemia Wong 版權條款和許可:合理使用
當用戶將軟件安裝到Mac OS時,提示信息的屏幕顯示用戶當前的安裝步驟。
作者/版權持有人:Google,Inc. 版權條款和許可:合理使用
在軟件安裝過程中,如果發(fā)生錯誤,用戶將收到友好的提示信息。提供復雜的解決方案,或用戶難以理解的解決方案,或只報錯不提供解決方案,都是極大影響用戶體驗,使用戶沮喪的關鍵原因。根據(jù)錯誤操作的嚴重程度,區(qū)分何時使用小的,不會影響用戶操作的提醒,以及何時使用大的,侵入式提醒。但當錯誤操作發(fā)生時,請謹慎選擇正確的語氣和正確的語言提醒用戶操作錯誤。
作者/版權持有人:Google,Inc. 版權條款和許可:合理使用
Mac OS通過顯示一個溫和的提示消息向用戶解釋出現(xiàn)了什么錯誤操作及其原因。另外,解釋這是由于自己的安全偏好選擇,進一步向用戶保證,告訴他們一切在掌控范圍內(nèi)。
作者/版權持有人:Manutencaonet Blogspot 版權條款和許可:CC BY 3.0
Windows系統(tǒng)中這個非常不友好的提示信息使用“fatal(后果嚴重的)”和“terminated(被終止)”字樣。這樣的負面的,不友好的言語肯定會嚇倒大多數(shù)用戶!
當用戶在安裝過程中提供信息時發(fā)生錯誤,允許他們重新回到上一步,而不必重新開始。
作者/版權持有人:Euphemia Wong 版權條款和許可:合理使用
讓用戶有權選擇是繼續(xù)運行程序還是退出程序,Mac的活動監(jiān)視器允許用戶在程序意外崩潰時“強制退出”。
作者/版權持有人:Euphemia Wong 版權條款和許可:合理使用
由于人類短時記憶每次只能記住5個東西,所以蘋果iPhone屏幕底部的主菜單區(qū)域中只能放置4個及以下的應用程序圖標,這個設計不僅涉及對記憶負荷的考慮,還考慮了不同版本一致性問題。
作者/版權持有人:Brian Voo 版權條款和許可:合理使用
作為設計師,你的工作是創(chuàng)建直觀,精美和流暢的用戶界面設計,讓用戶感到輕松和滿意。下面這個工作表可以幫你把上述這些規(guī)則應用于你的設計中。
譯者:oftodesign
原文作者:Euphemia Wong(The Interaction Design Foundation用戶體驗研究員,設計師)
本文由 @oftodesign 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載。
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
編輯導語:前幾篇文章中,我們已經(jīng)了解到了許多關于界面設計的相關知識。今天這篇文章讓我們回歸一下界面設計本身,談一談其設計原則與標準,希望對你有幫助。
前面介紹了5種基本的界面形式,如果從構成界面的要素(構件)層面看,實際上所有的界面都是一樣的,因為它們都是由同樣的控件構成的,只是控件的位置不同而已。
因此就有必要對界面的布置進行統(tǒng)一的標準化,建立了界面布置的標準后設計效率會提升、同時也為界面設計資料的復用奠定了基礎。
界面設計的標準化非常重要,因為界面是用戶認知系統(tǒng)的窗口,這個標準實際上是構建“人-機-人”工作環(huán)境的標準之一,標準化的界面形式也可以減少用戶的認知負擔和培訓成本。
這里給出一些界面設計上的基本原則和標準供作參考,按照從整體到局部的順序,重點提出以下的幾個界面設計時的原則與標準(不限于此):
這些原則/標準根據(jù)界面的使用場景不同、設計師的設計理念的不同等都會有所不同,需要根據(jù)具體情況具體分析設計,這些原則和標準僅供參考。
界面的布局是用戶理解業(yè)務功能的重要手段,布局一定要以“業(yè)務導向”,布局的規(guī)范化、規(guī)律化可以培養(yǎng)用戶逐漸地走向“無師自通”的方向,如:
圖1 布局原則
如圖1所示,細表區(qū)的標題設置過多(A~J),致使大約有40%的信息在處在窗口外,用戶不使用橫向滾動條就看不到。
如果這是一個頻繁操作的動作,那么工作效率就會低下,這就是所謂的應用體驗設計的不好,這種設計會極大地造成用戶滿意度的下降。解決的方法可以考慮采用分頁表達的形式。
注:對具有自適應功能的界面也存在同樣的原則,由于列數(shù)過多界面自適應后的字體太小看不清楚,為了看清楚必須要放大字體,結果還是要頻繁地使用橫向滾動條,所以適當減少列數(shù)是最有效的解決方法。
要約定好界面上基本的控件距離、尺寸,參見圖2,比如:
圖2 界面設計標準的制定
以組件的主界面為第一層界面,子窗體的層數(shù)最好控制在3層以內(nèi),也就是連續(xù)打開三個界面為限,參見圖3:
圖3 子窗體的層數(shù)示意圖
如果內(nèi)容實在是比較多,最終彈出的子窗體要超過3層時,可以考慮另外再設置一個組件來分擔處理的內(nèi)容,不然子界面彈出過多,就會造成界面的混亂,會降低用戶的操作效率。
字段控件的表達格式根據(jù)內(nèi)容不同而不同,字段控件由兩個部分構成:標題欄和輸入框,參見圖4:
圖4 字段控件的長度與數(shù)據(jù)位置
標題的字數(shù)不要太多,因為標題長到如同一句話時就不容易記憶了,最佳字數(shù)在2~6個字之間(易于記憶與稱呼的長度);另外標題中的文字位置可以參考:有背景框時居中,沒有時居左或居右,圖4中的標題欄有背景色,所以采用了文字居中的形式。
注:這里的”標題欄名稱“指的是”字段名稱“,不是4個業(yè)務功能中的”表單名稱“,后者可以按照實際的名稱寫,多少字都可以,不必要設置字數(shù)。
輸入框的字段長度是不一定的,建議輸入框的長度與字數(shù)相匹配不必統(tǒng)一,如圖4(a)的式樣,因為如果要統(tǒng)一長度就一定會以字數(shù)最多的字段為準,那么字數(shù)少的字段也用長輸入框就不容易讀取,而且輸入框的長度一樣時字段之間的辨識度就會降低,尋找某個字段的時間會增加。
比如:圖4(b)樣式的“工程月數(shù)”字段只有2個單位的長度,如果采用和具有30個單位長度的“項目名稱”一樣長的輸入框時,則“工程月數(shù)”就會因為標題與數(shù)據(jù)的距離太遠而不容易讀取(看不準)。
相比較而言,圖4(a)樣式中的“座機號碼”、“郵政編號”、”工程月數(shù)“的輸入框長度比較短,就比較容易尋找和識別。
輸入框內(nèi)數(shù)據(jù)的位置,根據(jù)內(nèi)容不同而不同,參見圖4(a):
這里介紹的界面設計中雖然不涉及到美工的內(nèi)容,但是也希望作為設計師具有一些美學的意識,因為最終用戶的滿意度是個綜合的指標,這個指標至少包括了下述內(nèi)容:
因為企業(yè)管理系統(tǒng)不是宣傳用的網(wǎng)站、電商平臺,界面風格要具有以下的特點(僅供參考):
隨著計算機技術的發(fā)展,計算機的使用領域和用途越來越廣泛,界面風格也隨之更加多樣化。
比如:互聯(lián)網(wǎng)風格頁面、物聯(lián)網(wǎng)的界面,硬件技術的進步也影響界面風格的變化;比如:智能手機端、平板電腦端等,它們的設計內(nèi)容、風格都有所不同,但是上述的基本理念、原則等還是適用的。
本文由 @李鴻君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協(xié)議
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
在交互設計的范疇里,對用戶的深入研究能夠為設計師提供關鍵的解決問題的參考依據(jù)。本文旨在運用一些成熟的方法,助力新人設計師更深入地理解用戶,拓寬認知視野,進而創(chuàng)造出更多具有價值的設計。
在設計的廣袤領域中,對于眾多初入行業(yè)的設計新人來說,設計工作常常被誤解為純粹主觀且感性的行為。
他們往往認為個人對美觀的評判即是設計的全部要義,似乎用戶理應沉浸于設計師所營造的美感之中。然而,設計的本質遠非如此表面。
實際上,設計是一項通過精心設想和精確計算來創(chuàng)造價值的工作,其真正的意義聚焦于是否具有價值以及能否切實解決特定的問題。
首先,讓我們從一道看似簡單的題目開始:
一雙球鞋和一個籃球共計 1100 元,球鞋比籃球貴 1000 元,那么這個籃球究竟值多少錢?
許多人可能會在瞬間給出 100 元的答案,但經(jīng)過仔細斟酌后會發(fā)現(xiàn)正確答案其實是 50 元。
這種錯誤判斷的根源在于大多數(shù)人所具有的兩種思考模式,即快思考和慢思考。它們也被稱為“無意識思維和有意識受控思維”“感性和理性”等不同的表述方式。
每個人都同時擁有這兩種思考方式,然而通常情況下,慢思考會在接收快思考的估計和決策之后才開始啟動。人類在漫長的生存歷程中,不斷地處理著各種各樣的問題,有復雜的難題,也有相對簡單的情況。快思考是對眾多事情給出下意識的回應,是一種未經(jīng)充分大腦思考的快速處理方式,其主要目的在于降低大腦的能量消耗。人類作為一種善于尋找規(guī)律的生物,快思考往往在以往的經(jīng)驗中迅速找尋答案。只有當問題獲得反饋或者進入需要慢思考的情境時,人們才會察覺快思考中存在的疏漏。例如,我們時常會在未經(jīng)深思熟慮的情況下,脫口而出對某些問題的回答,這正是快思考在發(fā)揮作用。
正如前文所述,大多數(shù)人同時具備快思考和慢思考兩種模式,所以在未經(jīng)特殊訓練的情況下,大多數(shù)用戶也同樣兼具感性和理性。在大多數(shù)情形下,用戶帶著感性的心態(tài)而來,只有當遭遇問題或者涉及自身切實利益時,才會啟動慢思考,從而變得理性。對于商業(yè)領域而言,更傾向于快思考的用戶。
因為快思考會帶來感性和沖動,促使用戶迅速做出決策。這也正是為什么許多銷售人員熱衷于趁熱打鐵,讓用戶在快思考的狀態(tài)下被感性和沖動所支配,進而快速完成交易。在各類電商以及活動類的運營活動中,精心營造氛圍的目的就是期望用戶在快思考的時候就完成決策,避免用戶進入慢思考狀態(tài)后因猶豫不決而影響決策的達成。
在交互設計中,有以下更為深入的常見做法可以讓用戶持續(xù)保持感性:
1、顯著地標識狀態(tài)與當前進度:
不僅僅是簡單地顯示狀態(tài)和進度,更要通過巧妙的設計讓用戶在第一時間就能直觀地理解其含義。例如,使用動態(tài)的進度條,配合清晰的數(shù)字顯示和簡潔的文字說明,讓用戶不僅知道自己所處的位置,還能預估完成任務所需的時間。同時,根據(jù)不同的進度階段,采用不同的顏色或圖標進行區(qū)分,增強用戶的視覺感知和心理預期。
在游戲設計中,常見的經(jīng)驗條就是一個很好的例子。玩家可以通過經(jīng)驗條的變化,清晰地了解自己距離升級還有多遠,這種明確的進度展示能夠激發(fā)玩家繼續(xù)努力的動力,保持他們在游戲中的投入感。
2、引導用戶完成他們的目標:
引導不僅僅是提供方向,更要深入理解用戶的心理需求和行為模式,以更加個性化的方式引導用戶。通過分析用戶的歷史行為數(shù)據(jù)和偏好,為用戶量身定制引導路徑。例如,在在線學習平臺上,根據(jù)用戶的學習進度和能力水平,為其推薦適合的課程和學習資源,引導用戶逐步實現(xiàn)學習目標。
利用智能助手或虛擬角色進行引導,增加互動性和趣味性。例如,一些購物 APP 中的虛擬導購員,可以根據(jù)用戶的瀏覽記錄和購買意向,為用戶提供個性化的購物建議和推薦商品,讓用戶在購物過程中感受到貼心的服務和引導。
3、明確無誤地告知用戶想了解的信息:
信息的傳達要做到準確、簡潔、全面。除了基本的產(chǎn)品特點、功能和價格等信息外,還應提供用戶可能關心的其他細節(jié)。例如,在電子產(chǎn)品的介紹頁面,除了列出產(chǎn)品的技術參數(shù)外,還可以提供使用教程、常見問題解答、用戶評價等內(nèi)容,讓用戶能夠全面了解產(chǎn)品,做出更明智的決策。
采用多種信息傳達方式,滿足不同用戶的需求。例如,對于視覺型用戶,可以提供圖片、視頻等直觀的信息展示;對于聽覺型用戶,可以提供語音介紹;對于閱讀型用戶,可以提供詳細的文字說明。同時,利用信息分層和漸進式披露的方式,讓用戶可以根據(jù)自己的需求逐步獲取更深入的信息。
4、不要讓用戶去診斷問題:
系統(tǒng)應具備強大的自我診斷和故障排除能力,在問題出現(xiàn)的第一時間自動檢測并提供解決方案。例如,當軟件出現(xiàn)故障時,系統(tǒng)可以自動彈出錯誤提示窗口,同時提供可能的解決方案,如重新啟動軟件、檢查網(wǎng)絡連接等。用戶只需按照提示進行操作,無需自己去尋找問題所在。
建立完善的用戶反饋機制,及時收集用戶遇到的問題,并進行快速響應和解決。例如,在 APP 中設置反饋入口,用戶可以隨時提交問題和建議,開發(fā)團隊可以及時跟進處理,并將處理結果反饋給用戶,增強用戶的信任感和滿意度。
5、盡量減少設置的數(shù)量和復雜度:
進行深入的用戶需求分析,去除不必要的設置選項,簡化操作流程。例如,在智能家居設備的設置中,通過智能化的默認設置和自動配置功能,減少用戶的手動操作。同時,對于一些復雜的設置,可以采用逐步引導的方式,讓用戶在需要的時候再進行深入設置。
采用可視化的設置界面,讓用戶能夠直觀地了解設置選項的作用和效果。例如,在圖像編輯軟件中,通過實時預覽功能,讓用戶可以在調整設置參數(shù)的同時看到效果的變化,從而更加方便地進行設置。
6、讓用戶感覺而不是去計算:
設計要注重用戶的直覺和感受,通過巧妙的視覺設計、交互反饋和情感化元素,讓用戶在無需進行復雜計算的情況下就能做出決策。例如,在酒店預訂網(wǎng)站上,通過展示酒店的圖片、評價和星級等信息,讓用戶能夠直觀地感受酒店的品質和舒適度,從而更容易做出選擇。
利用大數(shù)據(jù)和人工智能技術,為用戶提供個性化的推薦和決策支持。例如,音樂播放 APP 根據(jù)用戶的聽歌歷史和偏好,為用戶推薦符合其口味的音樂,讓用戶無需花費時間去搜索和篩選。
7、讓描述更貼近用戶:
深入了解用戶的語言習慣和文化背景,使用用戶熟悉的詞匯和表達方式進行描述。例如,在面向年輕人的產(chǎn)品中,可以采用流行的網(wǎng)絡語言和表達方式,增強用戶的認同感和親近感。在面向不同地區(qū)的用戶時,要考慮到當?shù)氐奈幕町悾捎煤线m的語言和表達方式。
進行用戶測試和反饋收集,不斷優(yōu)化描述內(nèi)容。邀請用戶對產(chǎn)品的描述進行評價和建議,根據(jù)用戶的反饋進行調整和優(yōu)化,確保描述內(nèi)容能夠準確傳達產(chǎn)品的特點和優(yōu)勢,同時符合用戶的需求和期望。
8、在需要計算的內(nèi)容提前幫用戶計算好:
利用自動化計算和智能算法,為用戶提供準確、及時的計算結果。例如,在理財 APP 中,自動計算用戶的收益和風險,為用戶提供投資建議。在購物網(wǎng)站上,自動計算商品的總價、優(yōu)惠金額和運費等信息,讓用戶清楚知道自己需要支付的費用。
提供多種計算方式和比較工具,讓用戶可以根據(jù)自己的需求進行選擇。例如,在房貸計算器中,提供等額本金和等額本息兩種還款方式的計算結果,讓用戶可以比較不同還款方式的優(yōu)缺點,做出更合適的選擇。
9、用情感帶給用戶細微的感受:
通過情感化設計,觸動用戶的內(nèi)心深處,建立與用戶的情感連接。例如,在社交 APP 中,通過溫馨的提示和問候,讓用戶感受到關懷和溫暖。在紀念日或特殊節(jié)日,為用戶送上個性化的祝福和禮物,增強用戶的忠誠度。
利用故事和場景化設計,讓用戶在使用產(chǎn)品的過程中產(chǎn)生情感共鳴。例如,在旅游 APP 中,通過展示美麗的風景圖片和用戶的旅行故事,激發(fā)用戶的旅行欲望。在產(chǎn)品介紹中,以故事的形式講述產(chǎn)品的誕生和發(fā)展歷程,讓用戶更加了解產(chǎn)品的背后故事,增強用戶的認同感。
許多新人設計師在初期往往喜歡站在個人和美學的角度來看待自己的設計。然而,隨著設計經(jīng)驗的不斷積累和對行業(yè)的深入理解,他們會逐漸認識到有價值、能解決問題才是人類發(fā)展的核心目的。在市場上存在眾多同類型產(chǎn)品都具有價值、能解決問題的情況下,才需要通過設計出不同的差異點來脫穎而出。但始終要牢記的前提是設計必須具有價值、能解決問題,一旦拋棄了這個大前提,任何設計都會顯得空洞、索然無味。
設計與藝術雖然有一定的關聯(lián),但它們并不是一回事。設計更注重實用性和功能性,以滿足用戶的需求和解決實際問題為主要目標。而藝術則更強調審美價值和自我表達,追求的是情感的共鳴和創(chuàng)造力的展現(xiàn)。設計師需要在設計過程中平衡好實用性和美觀性,既要確保設計能夠解決問題,又要讓設計具有一定的審美價值,從而提升用戶的體驗和滿意度。
總之,交互設計要深入理解用戶的思維方式,通過更為深入和有效的方法讓用戶持續(xù)保持感性,從而提高用戶的滿意度和忠誠度。同時,設計師要時刻牢記設計的價值和目的,不斷創(chuàng)造有價值、能解決問題的設計作品,為人類的發(fā)展和進步做出貢獻。
以上觀點僅代表個人看法,如有不對之處,歡迎在評論區(qū)指正交流。謝謝!
本文由 @用戶體驗王叔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉載
題圖來自Unsplash,基于CC0協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務
蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
藍藍設計的小編 http://www.z1277.cn