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