首頁

交互設(shè)計(jì)太燒腦?學(xué)會模式思維,助你效率狂飆 300%

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

在互聯(lián)網(wǎng)領(lǐng)域中,人機(jī)之間的互動過程就是交互。交互也有一些可預(yù)測的、重復(fù)出現(xiàn)的規(guī)律,作者總結(jié)了其中常見的七種C端交互模式,可以提高大家的工作效率,分享給大家。

前段時間有個產(chǎn)品童鞋,他剛加我就問了一大串問題。

什么是模式(Pattern)?什么是模版(Template)?這兩個概念有什么區(qū)別?

作為一個熱心好學(xué)、樂于助人的產(chǎn)品仔,我當(dāng)然和他暢聊了一個多小時,順便總結(jié)下聊天內(nèi)容。

你是不是也經(jīng)常在生活工作中,碰到類似“行為模式、設(shè)計(jì)模式、語言模式、文檔模版、表格模版”等名詞。

但又搞不清它們有什么區(qū)別,搞懂了又有什么用?

別急,我們花幾分鐘,先來嘮嘮什么是模式。

一、什么是模式?

可預(yù)測、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律,通過歸納總結(jié),就變成了某一種模式。

我們的生活中,就有許多模式的影子。

比如常見的商業(yè)模式、營銷模式、行為模式、數(shù)學(xué)模式、語言模式等。

舉個例子:

簡單說下行為模式,它分為了“習(xí)慣模式、消費(fèi)模式、學(xué)習(xí)模式”等等。

苦逼打工仔普遍的消費(fèi)模式,一般是工作日花錢少,到了周末都愛到商場逛街和購物。

但又有特例,我有個朋友就特別宅,他只喜歡在上班的時候,摸魚逛淘寶下單,簡直離譜~

掌握模式,有什么用?

當(dāng)你掌握了模式的概念,并嘗試在生活中使用,相信你一定能感受到這 7 個好處。

  1. 信息壓縮:把信息精簡成特定的模式,記憶傳播更容易了,教給別人更是輕輕松松;
  2. 知識萃?。和ㄟ^學(xué)習(xí)模式,掌握系統(tǒng)化的知識,就像搭樂高拼積木,簡單易懂、一學(xué)就會、舉一反三;
  3. 簡化問題:用模式來解決問題,意味著它不再是一團(tuán)亂麻,成為了可分割的部分,原來苦惱的事,現(xiàn)在輕松搞定;
  4. 識別規(guī)律:當(dāng)你摸清了模式的現(xiàn)象規(guī)律,就像旅游帶著地圖,走到哪里都不慌;
  5. 提高效率:把模式進(jìn)行泛化使用,可以大大提高你的工作產(chǎn)出,蓋章可比畫圖快太多了;
  6. 組合創(chuàng)新:試著把你學(xué)會的各種模式,打亂排序、重新組合,說不定會拼出一些新玩意;
  7. 預(yù)測未來:搞懂了特定領(lǐng)域的模式,意味著你熟知并能運(yùn)用自如,自然而然學(xué)會了推演未來。

二、C 端交互設(shè)計(jì)的 7 種常見模式

我們試著再舉個例子,加深下對模式的理解,順便學(xué)學(xué)交互設(shè)計(jì)。

什么是交互?

簡單來說,交互指的是在互聯(lián)網(wǎng)領(lǐng)域中,人、機(jī)之間的一系列互動過程。

我還提煉了 3 種常見模式(簡單反饋、數(shù)據(jù)操作、業(yè)務(wù)判斷),比較粗糙湊合也能用。

現(xiàn)在試著再系統(tǒng)總結(jié)下,我常用的 7 種 C 端交互模式,主要有:導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。

學(xué)完就能用,趕緊卷起來~

有人就問了,還有更多交互模式嗎?

確實(shí)可以有,等我有時間再編幾個。。

話說回來,如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則,可能會涉及到 N 個交互模式的任意組合。

1. 導(dǎo)航模式

常見的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。

導(dǎo)航模式的主要作用是,告知用戶當(dāng)前在網(wǎng)站的位置,以及接下來到哪些頁面,這有點(diǎn)像地圖 APP。

上面這張圖中,包含了幾種導(dǎo)航組件呢?

2. 搜索模式

搜索,是各大電商 APP 常見的交互模式。

搜索模式允許用戶輸入關(guān)鍵詞,然后系統(tǒng)返回搜索結(jié)果。

打個比方,這有點(diǎn)像在 Navicat 中寫了一段 SQL 查詢。

SELECT id, name, age
FROM users
WHERE age > 18

這段 SQL 的作用是,查詢大于 18 歲的用戶信息,包含序號、名稱、年齡。

3. 反饋模式

常見的反饋模式組件,涉及了對話框、吐司提示、氣泡提示等。

反饋模式用的比較多的場景是,告知用戶一些信息或提示,比如“輸入密碼錯了、展示訂單取消的注意事項(xiàng)”等。

4. 輸入模式

輸入模式主要用于新數(shù)據(jù)創(chuàng)建,例如淘寶下單時,你新增了一個收貨地址。

打開美團(tuán)叫個外賣,整個訂單創(chuàng)建流程,也是輸入模式。

5. 編輯模式

有很多人可能會把輸入模式和編輯模式搞混。

區(qū)別它們的一個方法是,交互流程涉及新數(shù)據(jù)創(chuàng)建,還是改舊數(shù)據(jù)。

改數(shù)據(jù)的話,那就是編輯模式。

6. 分享模式

我們在看到一些干貨文章,或好用的小程序想要轉(zhuǎn)發(fā)給朋友,那就要用到分享模式。

分享模式可以很簡單,也可以往復(fù)雜了做,看產(chǎn)品階段去實(shí)現(xiàn)。

7. 引導(dǎo)模式

引導(dǎo)模式和反饋模式有點(diǎn)像,都是展示特定的內(nèi)容。

那怎么分辨它們呢?

以設(shè)計(jì)師視角來看,反饋模式需要用戶觸發(fā),系統(tǒng)被動顯示。

而要讓用戶特別關(guān)注的信息,那就是引導(dǎo)模式。

三、總結(jié)

模式,即抽象的規(guī)律。——好夕雷

說了這么多概念和例子,你是不是對模式的認(rèn)知更清晰了呢?

模式運(yùn)用在產(chǎn)品領(lǐng)域,就有了這 7 種交互模式,分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。

如果學(xué)會了模式,那么無論生活還是工作,相信你一定能輕松應(yīng)對、事半功倍。

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

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

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

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

動效設(shè)計(jì)中的節(jié)奏魔力

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

關(guān)于動效節(jié)奏的問題,有什么好的方法可以提供?這算一個常見疑問,我總結(jié)收到的問題反饋,基本都是「動畫節(jié)奏應(yīng)該怎么做呀」「做完的動效一卡一卡的感覺不流暢怎么整」,索性借著今天的契機(jī),我整理了這樣一篇主題文章,分享我對于動效節(jié)奏的一點(diǎn)經(jīng)驗(yàn)與思考,僅代表個人觀點(diǎn),歡迎交流探討~

在當(dāng)今數(shù)字時代,動效設(shè)計(jì)已然成為了產(chǎn)品和服務(wù)中不可或缺的一部分。

無論是手機(jī)APP、網(wǎng)頁界面還是智能設(shè)備,動效設(shè)計(jì)或是引導(dǎo)用戶操作的微小提示,或是增強(qiáng)用戶體驗(yàn)的交互反饋,又或是塑造品牌形象的視覺元素,它們都以其獨(dú)特的方式,為用戶帶來更加直觀、生動的互動體驗(yàn),因此流暢的觀感體驗(yàn)很重要。

動效設(shè)計(jì)中的節(jié)奏魔力

提到流暢度,那動效節(jié)奏的重要性不言而喻。

動效節(jié)奏,簡單來說是動態(tài)呈現(xiàn)中各個元素動作的速度和時長安排,它決定了動效的快慢、強(qiáng)弱、起伏和變化,從而影響著用戶的感知和情緒。

一個優(yōu)秀的動效設(shè)計(jì),不僅要考慮單個元素的動效表現(xiàn),更要考慮整個界面的動效節(jié)奏,使界面動效更加自然、流暢,也更加符合用戶的心理預(yù)期,從而提升用戶體驗(yàn)。

動效設(shè)計(jì)中的節(jié)奏魔力

所以,想入門動效領(lǐng)域并深耕,我認(rèn)為深入理解動效節(jié)奏是尤為重要的,學(xué)會如何運(yùn)用動效節(jié)奏來提升用戶體驗(yàn),讓用戶在享受科技帶來便捷的同時,也能感受到藝術(shù)的魅力。

一、動效設(shè)計(jì)基礎(chǔ)認(rèn)知

1. 動效設(shè)計(jì)在用戶體驗(yàn)中的價(jià)值

動效可以增強(qiáng)界面的可理解性,例如下圖中廣告推送,有一個手機(jī)圖標(biāo)的旋轉(zhuǎn)動態(tài)示例,

動效設(shè)計(jì)中的節(jié)奏魔力

以及多多視頻模塊中的上滑操作指引等,幫助用戶更好地理解界面功能和操作方式,從而更有效地去使用應(yīng)用。

動效設(shè)計(jì)中的節(jié)奏魔力

動效可以提升界面的可用性,例如上傳文件的操作,通過提供及時的反饋和指引,降低用戶的學(xué)習(xí)成本和操作難度。

動效設(shè)計(jì)中的節(jié)奏魔力

動效還可以增加界面的吸引力,例如購物軟件中模擬實(shí)際鞋盒開箱的形式,展現(xiàn)鞋品,通過生動有趣的動效表現(xiàn),提升用戶的使用欲望和滿意度。

動效設(shè)計(jì)中的節(jié)奏魔力

2. 簡述動效設(shè)計(jì)的基本原理與最佳實(shí)踐

提到動效設(shè)計(jì),了解其背后的基本概念和原則,才是賦予動效靈魂和意義的關(guān)鍵。

這里要提到三個關(guān)鍵詞:

1)首先是時間

時間在動效設(shè)計(jì)中扮演著至關(guān)重要的角色。它決定了動畫的快慢、停頓和節(jié)奏,從而影響用戶的情感體驗(yàn)。

動效設(shè)計(jì)中的節(jié)奏魔力

例如,一個緩慢漸入的動畫可能傳達(dá)出優(yōu)雅、穩(wěn)重的感覺;

動效設(shè)計(jì)中的節(jié)奏魔力

而一個迅速閃現(xiàn)的動畫則可能帶來刺激、緊張的感受。

2)其次是空間

空間是指動畫發(fā)生和存在的虛擬環(huán)境。在動效設(shè)計(jì)中,空間的布局、層次和透視關(guān)系都至關(guān)重要。

它們不僅影響動畫的可視性和可讀性,還影響用戶的認(rèn)知和行為。

動效設(shè)計(jì)中的節(jié)奏魔力

例如,合理的空間布局可以使用戶更容易理解和操作界面元素,而不合理的布局則可能導(dǎo)致用戶的困惑和誤操作。

3)最后是構(gòu)圖

構(gòu)圖是指動畫元素的排列組合和視覺平衡。

一個良好的構(gòu)圖可以突出重點(diǎn)、引導(dǎo)視線,并營造出和諧、統(tǒng)一的視覺效果。

相反,一個糟糕的構(gòu)圖可能會分散用戶的注意力,甚至引發(fā)視覺疲勞。

動效設(shè)計(jì)的目標(biāo)不僅僅是實(shí)現(xiàn)技術(shù)上的可能性,更是為了創(chuàng)造出讓用戶愉悅、滿意且易于使用的體驗(yàn),在美感和技術(shù)要求之間尋找平衡點(diǎn),是我認(rèn)為需要不斷練習(xí),積累總結(jié)經(jīng)驗(yàn)的。

二、關(guān)鍵要素:動效節(jié)奏

在動效設(shè)計(jì)中,能讓靜態(tài)元素動起來形成生動流暢的動態(tài)效果,需要用到兩大元素:關(guān)鍵幀與動效節(jié)奏。

1. 關(guān)鍵幀

關(guān)鍵幀代表了在特定時間點(diǎn)上某個參數(shù)的值。在動效制作過程中,通過設(shè)置關(guān)鍵幀,可以控制對象在不同時間點(diǎn)的狀態(tài),從而形成連續(xù)的動作。

動效設(shè)計(jì)中的節(jié)奏魔力

關(guān)鍵幀就像是動效世界里的路標(biāo),它標(biāo)記了在動效呈現(xiàn)中某些重要時刻物體的樣子。比如說,我想讓一個球跳起來,那我就得告訴電腦,在開始的時候球在地上,然后在某個瞬間球在空中最高點(diǎn),最后又回到地面;這些重要的時刻就是關(guān)鍵幀。

關(guān)鍵幀之間的變化可以是線性的,也可以是曲線的,后者可以創(chuàng)造出更為自然和復(fù)雜的動態(tài)效果。

2. 常見的四種動效節(jié)奏形式

線性或曲線變化,統(tǒng)稱動效節(jié)奏,是指在一定時間內(nèi),通過一系列有規(guī)律的動效元素的組合和排列所產(chǎn)生的節(jié)奏感。

常見的四種動效節(jié)奏形式有 勻速、緩入、緩出、緩動。

動效設(shè)計(jì)中的節(jié)奏魔力

1)勻速(Linear)

勻速運(yùn)動指的是物體在動畫過程中速度保持不變的運(yùn)動方式。這種節(jié)奏簡單直接,沒有加速或減速的過程。

動效設(shè)計(jì)中的節(jié)奏魔力

上面的小球彈跳呈現(xiàn)的效果,就是勻速運(yùn)動,有些機(jī)械,缺乏實(shí)際場景中的動感。

在AE中,默認(rèn)的菱形關(guān)鍵幀之間就是勻速運(yùn)動,例如生活中常見的時鐘,上圖中鐘表秒針旋轉(zhuǎn)是平穩(wěn)、機(jī)械的,這就是一個典型的勻速運(yùn)動。

2)緩入(Ease In)

緩入是指物體在動畫開始時速度較慢,隨著時間的推移逐漸加速到最大速度的運(yùn)動方式。

動效設(shè)計(jì)中的節(jié)奏魔力

一般元素離開畫面或者物體加速階段使用,例如上圖中摩托車駛出畫面的部分、進(jìn)度條加載緩慢到快速的節(jié)奏等,它可以增加動畫的真實(shí)感和生動性。

在AE中,以圓球?yàn)槔瑥目罩邢侣涞倪^程,就可以使用緩入的加速曲線;

動效設(shè)計(jì)中的節(jié)奏魔力

調(diào)出圖表編輯器,調(diào)節(jié)曲線弧度如圖「速度圖表」所示,使曲線開始時平緩,越靠近出點(diǎn)速度逐漸上升,完成加速運(yùn)動,此時結(jié)尾有些生硬。

加一個小知識點(diǎn):曲線調(diào)節(jié)有兩種形式,一種為速度圖表,一種為值圖表;

速度圖表顧名思義,看曲線的弧度,圖中球的開始入點(diǎn)曲線弧度較緩,結(jié)尾出點(diǎn)曲線斜度較大,則代表加速度節(jié)奏變化;

值圖表分別代表X,Y軸曲線變化,如圖中球的Y軸位置發(fā)生變化,因此對應(yīng)綠色線條的曲度變化是球體的動效節(jié)奏變化,下落過程中加速,則區(qū)別于前半段的直線,入點(diǎn)平滑,出點(diǎn)更陡峭。

3)緩出(Ease Out)

動效設(shè)計(jì)中的節(jié)奏魔力

緩出與緩入相反,是指物體在動畫結(jié)束時速度逐漸減慢直至停止的運(yùn)動方式,如元素入畫、人物行走至停下等,它能給人一種平滑和自然的結(jié)束感,是先快后慢的減速運(yùn)動。

動效設(shè)計(jì)中的節(jié)奏魔力

同樣以圓球?yàn)槔蚵涞睾蠓磸椀倪^程,就可以使用緩出的減速曲線;
調(diào)出圖表編輯器,調(diào)節(jié)曲線弧度如圖「速度圖表」所示,使曲線結(jié)束時平緩,調(diào)節(jié)出點(diǎn)的手柄桿,完成減速運(yùn)動。

4)緩動(Ease In Ease Out)

緩動是最接近真實(shí)世界物體運(yùn)動規(guī)律的一種方式,適用于大多數(shù)動態(tài)場景,尤其是那些需要表現(xiàn)自然、流暢動作的畫面呈現(xiàn)。

緩動曲線結(jié)合了緩入和緩出的特點(diǎn),物體在動畫開始時速度緩慢上升,中間達(dá)到最高速度,最后在結(jié)束時速度逐漸降低。

動效設(shè)計(jì)中的節(jié)奏魔力

示例繼續(xù)完善小球的曲線節(jié)奏,我想讓它看起來更順滑、更有彈跳感覺,通過球的大小比例(縮放)的變化,增加模糊變化的細(xì)節(jié),這樣球跳起來的動作就會像真實(shí)世界里那樣,既有起跳的沖勁,又有落地的緩沖,整個過程更加生動有趣。

動效設(shè)計(jì)中的節(jié)奏魔力

在AE中,緩動曲線沒有具體的數(shù)值,多數(shù)時候需要結(jié)合不同場景表達(dá),去嘗試不同的曲度形式,通過反復(fù)預(yù)覽檢驗(yàn),找到自己滿意、適合畫面感呈現(xiàn)的形式。

3. 刻意練習(xí)-節(jié)奏感積累

日常積累動效節(jié)奏,我會分析電影或MG動畫中的經(jīng)典鏡頭,比如角色走路、跑步的動作呈現(xiàn),元素的出入場變化,以及自然界中的運(yùn)動現(xiàn)象,如樹葉飄落等。

動效設(shè)計(jì)中的節(jié)奏魔力

多做分鏡腳本的拆分練習(xí),多臨摹實(shí)踐,就可以逐漸掌握常見的運(yùn)動規(guī)律,自己在做設(shè)計(jì)內(nèi)容時,也可以更清晰知道怎樣的節(jié)奏更適合當(dāng)下場景呈現(xiàn)。

三、結(jié)論

總的來說,創(chuàng)造流暢體驗(yàn)對于動效設(shè)計(jì)來說還是很重要的,而要實(shí)現(xiàn)這一目標(biāo),掌握并靈活運(yùn)用好動效節(jié)奏則是必不可少的手段之一。

萬變不離其宗,多看、多思考、多練習(xí),通過實(shí)踐去總結(jié)復(fù)盤規(guī)律、梳理SOP流程,整理出一套適合自己記憶、使用的方法論與行動標(biāo)準(zhǔn),提高自己對動態(tài)的感知,以及節(jié)奏力的把控,也能有效提升工作效率。

「想不如做,知行合一」,想讓學(xué)到的知識和技巧,生長到自身,唯一要做的就是立馬行動!在做的過程中解決一個個卡點(diǎn),迭代出更適合自己的方法。

作者:Shirley_雪

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

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

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

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

B端“簡單設(shè)計(jì)”-化繁為簡,重塑用戶體驗(yàn)

天宇 B端ui設(shè)計(jì)文章及欣賞

在當(dāng)今這個信息爆炸、競爭激烈的市場環(huán)境中,用戶體驗(yàn)已成為企業(yè)核心競爭力的關(guān)鍵因素。在這一背景下,我們啟動了一項(xiàng)名為“簡單設(shè)計(jì)”的專項(xiàng)優(yōu)化項(xiàng)目,旨在通過化繁為簡,重塑用戶體驗(yàn),提升B端產(chǎn)品的用戶滿意度和忠誠度。

在當(dāng)今信息爆炸、競爭白熱化的市場大環(huán)境下,企業(yè)核心競爭力的內(nèi)涵已悄然變遷,不再單純聚焦于產(chǎn)品或服務(wù)本身,而是將重心逐漸傾向于用戶體驗(yàn)這一關(guān)鍵維度。

于招聘領(lǐng)域而言,B 端產(chǎn)品作為銜接招聘方與求職者的關(guān)鍵紐帶,其設(shè)計(jì)的合理性、操作的便捷性以及語義的明晰度,猶如三把密鑰,直接決定著用戶滿意度與忠誠度的高低。

今年,58招聘B端開啟了“簡單設(shè)計(jì)”專項(xiàng)優(yōu)化的征程,作為項(xiàng)目主導(dǎo)設(shè)計(jì)師,我全程深度參與了從調(diào)研、剖析、設(shè)計(jì)至實(shí)施的各個環(huán)節(jié),在這一過程中,深刻領(lǐng)悟到設(shè)計(jì)對于提升用戶體驗(yàn)的非凡意義。

01 深入業(yè)務(wù)前言,洞見用戶痛點(diǎn),錨定設(shè)計(jì)方向

項(xiàng)目伊始,我們即對58招聘B端產(chǎn)品的現(xiàn)有用戶展開了全面且深入的調(diào)研行動。

我們深知,唯有精準(zhǔn)洞悉用戶需求與痛點(diǎn),方能打造出契合用戶期望的產(chǎn)品。

為此,設(shè)計(jì)團(tuán)隊(duì)全員深入一線,置身于用戶的實(shí)際使用環(huán)境,與各行業(yè)用戶進(jìn)行深度的面對面溝通。同時,我們運(yùn)用多種調(diào)研方法,包括問卷調(diào)查、用戶訪談、數(shù)據(jù)分析等,多維度、全方位地搜集用戶信息。

在調(diào)研過程中,一系列影響用戶體驗(yàn)的關(guān)鍵問題浮出水面。

其中,操作繁瑣成為用戶反饋?zhàn)顬橥怀龅膯栴}。眾多用戶抱怨,在使用B端產(chǎn)品時,完成諸如客戶認(rèn)證、發(fā)布職位、篩選簡歷等簡單任務(wù),往往需歷經(jīng)多個復(fù)雜步驟。

這種繁復(fù)的操作流程,不僅耗費(fèi)大量時間與精力,更易引發(fā)用戶的挫敗感和不滿情緒,宛如一道無形的屏障,拉遠(yuǎn)了用戶與平臺的距離。

此外,語義晦澀難懂也是普遍存在的問題。

B端產(chǎn)品中的專業(yè)術(shù)語和復(fù)雜表述,對于非專業(yè)用戶而言,仿若天書,極大地增加了學(xué)習(xí)成本,甚至可能導(dǎo)致誤解和誤操作,嚴(yán)重?fù)p害了用戶體驗(yàn)。

這些問題的根源,經(jīng)深入分析,與傳統(tǒng)產(chǎn)品設(shè)計(jì)理念的局限、對用戶體驗(yàn)的忽視以及用戶研究與溝通的不足密切相關(guān)。

基于此,我們決定從這三個層面入手,重塑設(shè)計(jì)思路,以提升用戶體驗(yàn)。

02 解構(gòu)問題根源,重構(gòu)設(shè)計(jì)理念之維

在扎實(shí)調(diào)研的基礎(chǔ)上,我們對問題進(jìn)行了抽絲剝繭般的分析。

我們深刻意識到,若要從根本上解決用戶問題,必須對設(shè)計(jì)理念進(jìn)行大刀闊斧的革新。

首先,我們毅然摒棄傳統(tǒng)的以產(chǎn)品為核心的設(shè)計(jì)理念,轉(zhuǎn)而擁抱以用戶為中心的設(shè)計(jì)哲學(xué)。用戶作為產(chǎn)品的最終使用者,他們的需求和體驗(yàn)是產(chǎn)品設(shè)計(jì)的靈魂所在。因此,我們將用戶需求與體驗(yàn)置于首位,重新審視產(chǎn)品的功能布局、操作流程以及語義表達(dá)等各個維度。

其次,我們將用戶體驗(yàn)的重視程度提升至前所未有的高度。用戶體驗(yàn),作為產(chǎn)品競爭力的核心要素,貫穿于設(shè)計(jì)的全過程。我們通過簡化操作流程、優(yōu)化界面布局、明晰語義表述等手段,致力于提升用戶的操作效率和滿意度,打造流暢、高效的用戶交互體驗(yàn)。

最后,我們強(qiáng)化了用戶研究與溝通機(jī)制。深知只有深入了解用戶需求與痛點(diǎn),才能設(shè)計(jì)出符合用戶期望的產(chǎn)品。因此,在與用戶的每一次接觸中,我們都用心收集他們的意見和建議,為產(chǎn)品設(shè)計(jì)與優(yōu)化注入源源不斷的智慧源泉。

03 以用戶為中心,雕琢極致體驗(yàn)之境

基于對問題的深度剖析,我們開啟了具體的設(shè)計(jì)工作。

設(shè)計(jì),作為解決問題的關(guān)鍵環(huán)節(jié),需要我們充分施展設(shè)計(jì)師的專業(yè)素養(yǎng)與創(chuàng)新能力,以用戶為中心,對招聘B端產(chǎn)品進(jìn)行全方位的重塑。

在操作流程優(yōu)化方面,我們對現(xiàn)有流程進(jìn)行了細(xì)致梳理和深度優(yōu)化,大刀闊斧地去除了冗余步驟和環(huán)節(jié),使操作流程如行云流水般簡潔明了。

例如,在發(fā)布職位這一關(guān)鍵功能上,我們簡化了信息填寫步驟,并貼心地提供模板和自動填充功能,極大地降低了用戶操作難度和時間成本,讓用戶在操作過程中感受到前所未有的便捷。

在語義表述清晰化上,我們對界面上的專業(yè)術(shù)語和復(fù)雜表述進(jìn)行了精心簡化和優(yōu)化,使其通俗易懂且易于記憶。同時,對重點(diǎn)文案和標(biāo)題進(jìn)行突出處理,便于用戶快速抓取關(guān)鍵信息,清晰知曉每一步操作的目的,輔助用戶迅速決策,從而進(jìn)一步提升用戶體驗(yàn)。

在界面布局精簡方面,我們對界面進(jìn)行了精心雕琢,去除了繁雜的信息和多余的按鈕。通過合理的布局與色彩搭配,提高了界面的可讀性和美觀度,營造出簡潔大氣的視覺體驗(yàn)。此外,增加搜索和篩選功能,使用戶能夠快速定位所需信息,進(jìn)一步提升操作效率和滿意度。

在整個設(shè)計(jì)過程中,我們充分發(fā)揮設(shè)計(jì)師的專業(yè)能力和創(chuàng)新精神,運(yùn)用多種先進(jìn)的設(shè)計(jì)方法和工具,如用戶畫像、設(shè)計(jì)原型、用戶體驗(yàn)測試等,確保設(shè)計(jì)方案的科學(xué)性和有效性。同時,與產(chǎn)品經(jīng)理、開發(fā)人員等團(tuán)隊(duì)成員緊密協(xié)作,形成強(qiáng)大的合力,共同推動項(xiàng)目順利前行。

04 持續(xù)優(yōu)化迭代,升華用戶體驗(yàn)之峰

設(shè)計(jì)完成后,項(xiàng)目進(jìn)入實(shí)施階段。

我們深知,實(shí)施是設(shè)計(jì)落地生根的關(guān)鍵一步,需要團(tuán)隊(duì)充分發(fā)揮協(xié)作精神和強(qiáng)大執(zhí)行力,確保項(xiàng)目順利推進(jìn)。

在實(shí)施過程中,我們采用敏捷開發(fā)方法,通過持續(xù)迭代和優(yōu)化,不斷提升產(chǎn)品的功能和性能。定期收集和分析用戶反饋意見,及時對產(chǎn)品進(jìn)行調(diào)整和改進(jìn)。同時,加強(qiáng)與用戶的溝通,通過多樣化的用戶調(diào)研方式,積極捕捉用戶的每一個意見和建議,為產(chǎn)品的持續(xù)優(yōu)化提供堅(jiān)實(shí)支撐。

經(jīng)過不懈努力,“簡單設(shè)計(jì)”專項(xiàng)已取得顯著成效。用戶操作效率和滿意度大幅攀升,產(chǎn)品留存率和口碑亦顯著改善。然而,我們明白,設(shè)計(jì)優(yōu)化是一場永無止境的修行。隨著用戶需求的持續(xù)演變和技術(shù)的不斷革新,我們需持續(xù)探索與創(chuàng)新,以維持產(chǎn)品的競爭力和生命力。

展望未來,我們將堅(jiān)定不移地秉持以用戶為中心的設(shè)計(jì)理念,持續(xù)優(yōu)化產(chǎn)品功能和性能。同時,進(jìn)一步加強(qiáng)用戶研究與溝通,通過持續(xù)收集和分析用戶信息與意見,不斷改進(jìn)和優(yōu)化產(chǎn)品設(shè)計(jì)。我們堅(jiān)信,在全體設(shè)計(jì)師的共同努力下,58招聘B端產(chǎn)品將為用戶帶來更便捷、高效、愉悅的使用體驗(yàn),成為招聘領(lǐng)域的璀璨之星。

總之,“簡單設(shè)計(jì)”專項(xiàng)不僅是產(chǎn)品設(shè)計(jì)層面的優(yōu)化與提升,更是對用戶需求深度洞察與積極回應(yīng)的生動實(shí)踐。未來,我們將繼續(xù)堅(jiān)守這一理念,為用戶創(chuàng)造更多價(jià)值與驚喜,同時不斷提升自身設(shè)計(jì)能力與創(chuàng)新力,為產(chǎn)品的持續(xù)優(yōu)化與創(chuàng)新注入源源不斷的動力。

 

設(shè)計(jì)團(tuán)隊(duì):老李頭、王丹、溫正遠(yuǎn)、崔秉鑒、趙德馨、陳浩然、劉靜頤、劉春明

本文由人人都是產(chǎn)品經(jīng)理作者【58UXD】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

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

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

吃軟不吃硬?一招教你B端硬件設(shè)計(jì)準(zhǔn)則

天宇 B端ui設(shè)計(jì)文章及欣賞

在效率至上的數(shù)字時代,釘釘硬件卻走出一條“溫暖設(shè)計(jì)”之路,從愉悅體驗(yàn)到隱私守護(hù),再到多感官協(xié)同,它是如何讓冰冷機(jī)器擁有心跳,重塑B端硬件設(shè)計(jì)準(zhǔn)則的?一起來探尋。

釘釘自2015年推出后,逐步構(gòu)建“軟硬一體”生態(tài),其智能硬件以“簡單高效,底色溫暖”為核心,通過普惠(幾何美學(xué)/曲率連續(xù))、專注(層級顯隱/寧靜科技)、平衡(功能-成本-環(huán)境)三大準(zhǔn)則,將復(fù)雜B端需求轉(zhuǎn)化為簡約設(shè)計(jì),設(shè)計(jì)出的產(chǎn)品斬獲iF/Reddot等眾多國際大獎,服務(wù)超1500萬企業(yè)。

四、愉悅

如今用戶的需求已不再局限于實(shí)用功能,更追求情感層面的滿足。

這種轉(zhuǎn)變就像從”需要一臺電腦處理工作”到”渴望一個能提供陪伴的機(jī)器人助手”——本質(zhì)是從單純的功能需求升級為情感連接。

通過洞察用戶從本能需求到行為習(xí)慣,再到情感共鳴的完整鏈條,我們不斷優(yōu)化產(chǎn)品,讓科技與人的關(guān)系變得更加緊密溫暖。

愉悅-人機(jī)工學(xué)

產(chǎn)品與人的配合度決定了使用體驗(yàn)是否安全順手,更是用戶獲得愉悅感的關(guān)鍵。我們建議從三個維度展開研究——人的使用習(xí)慣、設(shè)備性能特征、使用場景特點(diǎn),通過實(shí)際測試與綜合分析,最終得出科學(xué)可靠的最優(yōu)方案。

愉悅-情感化設(shè)計(jì)

讓冰冷的工具性產(chǎn)品因?yàn)椴馁|(zhì)的改變而富有溫度,讓設(shè)備的立桿因?yàn)榻嵌鹊母淖兌兊糜袃x式感和尊重感,以人為本的情感的設(shè)計(jì)賦予產(chǎn)品價(jià)值,形成用戶對品牌的認(rèn)知性與認(rèn)可度。

愉悅-價(jià)值認(rèn)同

2030年的碳中和戰(zhàn)略和可持續(xù)目標(biāo)已經(jīng)是全球的趨勢共識,這意味著產(chǎn)品不僅為今天創(chuàng)造價(jià)值,也為明天創(chuàng)造價(jià)值,釘釘建議從產(chǎn)品級的3R原則 (Reduce、Reuse、Recycle) 再到系統(tǒng)級的LCED(產(chǎn)品生命周期設(shè)計(jì))的設(shè)計(jì)標(biāo)準(zhǔn)去思考如何給用戶帶來產(chǎn)生正向的綠色價(jià)值認(rèn)同感和愉悅感的產(chǎn)品,再到通過設(shè)計(jì)領(lǐng)導(dǎo)力帶來理念變革與循環(huán)經(jīng)濟(jì)。

現(xiàn)今無處不在的智能產(chǎn)品和共享數(shù)據(jù)在帶來變革的同時帶來了巨大的安全風(fēng)險(xiǎn), 釘釘設(shè)計(jì)非常注重可感知的用戶隱私信息保護(hù)(PBD),一直致力于通過最好的手段來守護(hù)用戶安全隱私,消除用戶在使用產(chǎn)品中“被監(jiān)視”來的不安定感。

五、隱私

在隱私性設(shè)計(jì)上應(yīng)考量如下維度:

  • 主動-在隱私泄露發(fā)生前預(yù)判風(fēng)險(xiǎn),而非事后補(bǔ)救
  • 全鏈-排查設(shè)備物理結(jié)構(gòu)、數(shù)字界面等所有接觸點(diǎn),監(jiān)控信息從收集、存儲到共享的全生命周期。
  • 可感-用聲音提醒、呼吸燈閃爍或震動反饋,讓用戶清晰感知設(shè)備何時開啟/關(guān)閉數(shù)據(jù)采集。
  • 可控-以用戶為中心,用戶始終擁有數(shù)據(jù)主權(quán),可隨時一鍵停止數(shù)據(jù)收集或撤回歷史授權(quán)

策略-隱私保護(hù)不是成本負(fù)擔(dān),而是產(chǎn)品核心競爭力。

眼睛看到的不等于全部體驗(yàn)。我們始終相信,當(dāng)視覺與聽覺的韻律、觸覺的肌理、嗅覺的記憶、味覺的驚喜交織成網(wǎng)(五感聯(lián)動),產(chǎn)品才能真正叩擊人心。這種立體的感官交響,不僅塑造獨(dú)特的品牌印記,更能在用戶腦海中種下記憶錨點(diǎn)。要讓感官設(shè)計(jì)真正釋放能量,設(shè)計(jì)師們需要一套系統(tǒng)化的設(shè)計(jì)指南——就像指揮家需要樂譜來統(tǒng)籌交響樂團(tuán)。

六、多感官

多感官-光響應(yīng)

釘釘設(shè)計(jì)一直致力于協(xié)調(diào)所有感官輸入,以提供關(guān)于品牌價(jià)值的豐富信息和功能表達(dá),光作為其中一條重要媒介,即是交互媒介也是內(nèi)容更是品牌記憶點(diǎn),其中包含了光的色彩,明暗,變化形式,以帶給產(chǎn)品獨(dú)特的識別度和無限的可能性。

多感官-聲音識別

聲音的反饋能夠在恰當(dāng)?shù)膱鼍敖o予用戶明確的指向和好的用戶體驗(yàn),同時也能很好得傳達(dá)出品牌和價(jià)值主張,汽車關(guān)車門的聲音是感官設(shè)計(jì)方法中最著名和最常用的例子,許多頂級汽車品牌都有獨(dú)立的車門開發(fā)團(tuán)隊(duì),例如梅賽德斯 SUV 的車門被調(diào)教得聽起來更重,以傳達(dá)它們的堅(jiān)固性。

七、產(chǎn)品細(xì)節(jié)

色彩(Color)

色彩是除了造型以外最能影響產(chǎn)品設(shè)計(jì)視覺體驗(yàn)的關(guān)鍵設(shè)計(jì)因素,中性的黑白灰建議作為產(chǎn)品主基調(diào),能夠適配更多場景的同時也能覆蓋更多受眾,限定色一般做根據(jù)產(chǎn)品定位的特殊版,或者局部的顏色點(diǎn)綴。

材質(zhì)(Material)

材質(zhì)是產(chǎn)品外觀效果實(shí)現(xiàn)的物質(zhì)載體同樣也是凸顯產(chǎn)品定位的重要媒介,我們主張通過引入功能&情感導(dǎo)向材質(zhì)的概念,來進(jìn)行不同產(chǎn)品定位上的區(qū)分,同時保持理念透出的一致性。

工藝處理&圖案(Finish)

工藝處理&圖案是外觀效果最后一步,為營造溫潤感和保證多場景下的耐用性,表面處理應(yīng)注意以下兩點(diǎn):

1.主殼體表面處理應(yīng)避免大面積高亮,避免使用大面積金屬拉絲,表面質(zhì)感光澤低于4分光,素色為主,可點(diǎn)綴亮色,避免大面積純度過高的顏色噴涂,除窗口鏡片外避免大面積亮鍍,

2.肌理圖案應(yīng)選擇低調(diào)克制的圖形,以功能性為導(dǎo)向,例如在關(guān)鍵物理交互點(diǎn)上給予適當(dāng)?shù)挠|感引導(dǎo)或輔助。

在產(chǎn)品落地過程中,設(shè)計(jì)師應(yīng)在量產(chǎn)限制與工藝要求之間平衡出最優(yōu)化解,并將其沉淀成相應(yīng)準(zhǔn)則。

小結(jié)

在效率至上的數(shù)字時代,釘釘硬件的設(shè)計(jì)選擇了一條不同的路——不讓技術(shù)成為壓迫用戶的工具,而是化作理解人心的伙伴。上篇提出的“簡單高效”生態(tài),不是把復(fù)雜功能簡單堆砌,而是像拼樂高一樣,用“普惠、專注、平衡”三大準(zhǔn)則搭建出真正懂用戶需求的硬件;下篇揭示的“溫暖設(shè)計(jì)”,則讓冷冰冰的機(jī)器擁有了心跳:它可能是電腦支架上一個微微傾斜的弧度,讓你工作時挺直腰背的瞬間,感受到被尊重的儀式感;也可能是設(shè)備上一盞呼吸節(jié)奏的指示燈,用光的明暗變化悄悄告訴你:“數(shù)據(jù)已加密,請安心”;或是關(guān)機(jī)時那一秒類似合上書頁的“咔嗒”聲,讓結(jié)束工作的動作變得像放下咖啡杯一樣自然。這些細(xì)節(jié)背后,是釘釘對產(chǎn)品的三個堅(jiān)持:

  1. 隱私不是口號,而是底線——從攝像頭物理遮擋到數(shù)據(jù)授權(quán)隨時可撤銷,把“用戶掌控權(quán)”刻進(jìn)產(chǎn)品基因;
  2. 環(huán)保不靠貼標(biāo)簽,而是真行動——舊設(shè)備零件像積木一樣拆解重組,讓一部會議終端的壽命從三年延長到十年;
  3. 體驗(yàn)不只靠屏幕,而是五感聯(lián)動——就像頂級汽車品牌會專門調(diào)校關(guān)車門的聲音,釘釘?shù)脑O(shè)備提示音也藏著“聽得見的安心”。

說到底,好的設(shè)計(jì)從不需要刻意標(biāo)榜“高大上”。當(dāng)科技能讀懂人的疲憊、尊重隱私的敏感、在乎環(huán)境的未來,甚至在意你觸摸機(jī)身時的指尖溫度——這便是“芥子納須彌”的真正含義:用最小的人文微光,照亮最深的數(shù)字叢林,讓每個人在智能時代依然能體面地工作、自在地生活。

作者:創(chuàng)客 
本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶體驗(yàn)】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

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

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

高效導(dǎo)航:B端側(cè)邊欄設(shè)計(jì)解析

天宇 B端ui設(shè)計(jì)文章及欣賞

許多設(shè)計(jì)團(tuán)隊(duì)在面對復(fù)雜的業(yè)務(wù)需求時,往往忽視了側(cè)邊欄設(shè)計(jì)的細(xì)節(jié)和靈活性。本文將深入探討B(tài)端側(cè)邊欄的設(shè)計(jì)要點(diǎn),并結(jié)合實(shí)際案例,分享如何根據(jù)不同行業(yè)、業(yè)務(wù)場景和用戶習(xí)慣進(jìn)行靈活設(shè)計(jì),供大家參考。

很長一段時間我都覺得做B端的中臺時間沒什么技術(shù)含量,不就是第三方的組件,拼積木一樣,拼接就好,甚至很多團(tuán)隊(duì)也是這么想的,早期很多的中臺都沒有設(shè)計(jì)師;

但是隨著這幾年越來越深度的B端中臺的設(shè)計(jì),做了太多各式各樣的后臺的設(shè)計(jì)系統(tǒng),深入的進(jìn)入業(yè)務(wù),才發(fā)現(xiàn)設(shè)計(jì)過程中必須考慮很多細(xì)節(jié)和維度,甚至很小的點(diǎn),也是有考究的。

最近我們在做側(cè)邊欄的升級,我做了市場上50+中臺的側(cè)邊欄目調(diào)研,看了上萬張圖,越看越越是能發(fā)現(xiàn)針對不同的行業(yè),不同的業(yè)務(wù)場景、信息層級和用戶習(xí)慣進(jìn)行靈活設(shè)計(jì)選擇,需要具體問題具體分析及處理。

下面我就來總結(jié)一下我調(diào)研的這些側(cè)邊的設(shè)計(jì)分類及設(shè)計(jì)規(guī)則。

一、B端側(cè)邊欄的設(shè)計(jì)分類

按布局形態(tài)分類

細(xì)欄(垂直導(dǎo)航):以圖標(biāo)為主,文字輔助,適用于模塊較少、內(nèi)容區(qū)域需最大化展示的場景。

優(yōu)勢是簡潔高效,但要求用戶對圖標(biāo)含義有較高認(rèn)知。

寬欄(混合導(dǎo)航):圖標(biāo)與文字并存,支持多級菜單,兼容性強(qiáng),適合復(fù)雜業(yè)務(wù)層級。這也是常見的側(cè)邊欄樣式。

通過分組和標(biāo)題提升信息密度,但可能壓縮內(nèi)容區(qū)域。

按結(jié)構(gòu)層級分類

單級導(dǎo)航:直接展示所有一級菜單,適合功能模塊較少的中小型系統(tǒng)(如藍(lán)湖、Coding)。

遵循“7±2”原則,菜單數(shù)量控制在5-9個,避免用戶選擇疲勞;

多級導(dǎo)航:通過折疊面板或樹形結(jié)構(gòu)收納子菜單,適用于大型企業(yè)級系統(tǒng)(如ERP、CRM)。

需明確可點(diǎn)擊項(xiàng)與純分類項(xiàng)的區(qū)分,避免交互混淆 ;

按交互模式分類

平鋪模式:菜單完全展開,用戶可快速定位功能(如新紅小紅書后臺、抖音抖店等等模塊)。適用于高頻操作場景;

折疊/懸浮模式:側(cè)邊欄可收縮為圖標(biāo)或隱藏,適應(yīng)窄屏設(shè)備或需專注內(nèi)容的情境(如飛書的icon展開收起)。需提供顯性觸發(fā)按鈕(如漢堡菜單)

二、B端側(cè)邊欄的設(shè)計(jì)規(guī)則

側(cè)邊欄設(shè)計(jì)需平衡功能性與視覺體驗(yàn),核心規(guī)則如下:

視覺對比與層級劃分

背景色差異化:通過深色或淺色背景區(qū)分側(cè)邊欄與內(nèi)容區(qū)域,避免視覺干擾。例如,深色背景可突出白色內(nèi)容區(qū),但需確保品牌色符合無障礙標(biāo)準(zhǔn)(對比度≥4.5:1)

信息分組與留白:使用分割線、標(biāo)題或間距對功能模塊分組,減少信息密度。

圖標(biāo)與交互細(xì)節(jié)

圖標(biāo)設(shè)計(jì)原則:B端圖標(biāo)需簡約且具辨識度,避免過度裝飾。選中狀態(tài)可通過填充色、微動效或標(biāo)識線強(qiáng)化(如Ant Design的選中高亮)

交互反饋優(yōu)化:鼠標(biāo)懸停時圖標(biāo)變色、文字浮現(xiàn);選中狀態(tài)結(jié)合背景色與文字加粗,提升操作感知

拓展性與一致性

響應(yīng)式適配:窄屏下自動切換為圖標(biāo)模式,確保移動端可用性(如飛書后臺的側(cè)邊欄收縮功能)

規(guī)范復(fù)用:建立統(tǒng)一的字號、間距、顏色規(guī)范(如主文字14px、輔助文字12px),降低用戶認(rèn)知成本

業(yè)務(wù)導(dǎo)向的優(yōu)先級

高頻功能前置:將常用模塊置于頂部(如“更多功能、功能設(shè)置等等”),低頻功能收納至底部折疊區(qū)

teambition:不僅做了更多功能,有意思的他還做了自定義導(dǎo)航欄的功能,支持排序,做到低成本的定制化。

權(quán)限分級展示:根據(jù)角色動態(tài)顯示菜單(如管理員可見“系統(tǒng)設(shè)置”,普通員工僅顯示“任務(wù)列表”),減少信息冗余

三、典型案例解析

飛書:平鋪式動態(tài)導(dǎo)航

設(shè)計(jì)亮點(diǎn):頂部導(dǎo)航進(jìn)行功能入口切換,左側(cè)平鋪核心功能,圖標(biāo)與文字比例均衡;通過級分類提升信息層級

適用場景:設(shè)計(jì)協(xié)作工具,功能模塊清晰且用戶操作高頻

小鵝通:混合式寬欄導(dǎo)航

設(shè)計(jì)亮點(diǎn):頂部導(dǎo)航切換業(yè)務(wù)大類,側(cè)邊欄展開子模塊;有一級也有多級菜單通過折疊面板收納,層級深度可控。

適用場景:復(fù)雜業(yè)務(wù),需支持多業(yè)務(wù)線交叉跳轉(zhuǎn)

千牛商家后臺:多層級側(cè)邊欄

設(shè)計(jì)亮點(diǎn):分兩欄導(dǎo)航,窄屏下收縮為圖標(biāo)或者圖標(biāo)+簡短文字;第二欄按照層級排列,客一級或者多級。

適用場景:企業(yè)級后臺系統(tǒng),業(yè)務(wù)場景復(fù)雜,需要多種場景切換,導(dǎo)航多層級切功能極多的情況

微贊直播:可自定義導(dǎo)航

設(shè)計(jì)亮點(diǎn):可自定義導(dǎo)航,包含排版、顏色。相對來說體驗(yàn)感更加,不過對應(yīng)屏幕自適應(yīng)要求更高。

適用場景:針對C端,功能復(fù)雜的情況

老版設(shè)計(jì)

新版設(shè)計(jì)

Ant Design Pro:規(guī)范驅(qū)動的側(cè)邊欄

設(shè)計(jì)亮點(diǎn):遵循原子設(shè)計(jì)方法論,定義圖標(biāo)尺寸(24px)、間距(8px倍數(shù))、選中態(tài)(主色填充),確保開發(fā)與設(shè)計(jì)一致性 ,便于快速搭建新平臺

適用場景:中臺型系統(tǒng),需快速復(fù)用組件庫

四、總結(jié)

側(cè)邊欄設(shè)計(jì)需以業(yè)務(wù)邏輯為核心,考慮信息層級與用戶角色,同時兼顧視覺清晰度與交互效率。

未來趨勢上,側(cè)邊欄的“C端化”設(shè)計(jì)(如情感化微交互、個性化皮膚)可能成為提升B端產(chǎn)品吸引力的新方向。

總的來說,做設(shè)計(jì)這些年,當(dāng)遇到問題的時候,我覺得最好的解法就是看案例,看很多案例,爆炸式的研究一下,很多問題就有了解法。

專欄作家

三原設(shè)計(jì),人人都是產(chǎn)品經(jīng)理專欄作家。分享B端設(shè)計(jì)、品牌設(shè)計(jì),原創(chuàng)設(shè)計(jì)文章、教程。

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

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

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

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

用戶體驗(yàn)設(shè)計(jì)指南 - SUS系統(tǒng)可用性量表

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

1. 什么是SUS ?

 

SUS 全稱 System Usability Scale ,系統(tǒng)可用性量表。SUS最初是Brooke于1986年編制,可以科學(xué)地量化用戶體驗(yàn),用于完成一系列任務(wù)場景后,對產(chǎn)品或系統(tǒng)整體宏觀的感知可用性測量。

0100e56128f98111013eaf70758e58.jpg

 

翻譯過后可以得到下面的中文表,參與者在使用產(chǎn)品后對每個題目下面打鉤來對產(chǎn)品進(jìn)行5點(diǎn)評分。(小伙伴們可自行保存)

0123e1612a56f611013eaf70b3bda8.jpg

2. 問題組成

 

SUS提供整體可用性評估度量,由10個題目組成,奇數(shù)項(xiàng)為正面陳述,偶數(shù)項(xiàng)為反面陳述。

 

第4,5,10三項(xiàng)構(gòu)成的子量表為“有效性”(Effectiveness)&“易學(xué)性”(Learnability) ;第2,3,7,8四項(xiàng)構(gòu)成的子量表為“使用效率”(Use Efficiency)&“可用性”(Usability);第1,6,9三項(xiàng)構(gòu)成子量表“滿意度”(Satisfaction)。

 

01f755612a571a11013f47206091c4.jpg

 

3. 使用場景

 

SUS適用范圍廣泛,產(chǎn)品新舊版本迭代之間對比,同類型競品之間對比,同一產(chǎn)品不同終端之間對比均可使用??刹捎镁€上線下問卷調(diào)研的方式,簡單高效的采集真實(shí)用戶反饋。避免在初期過早的關(guān)注細(xì)節(jié)。

 

01e19a612903c211013f4720d5a891.jpg

 

4. 如何使用

 

當(dāng)收集好用戶問卷反饋過后,步驟如下:

 

1. 對于奇數(shù)序號的問題,將其得分減1;(比如第1題分?jǐn)?shù)為4,得分為4-1=3分)

2. 對于偶數(shù)序號的問題,將其得分被5減去;(比如第2題分?jǐn)?shù)為3,得分為5-3=2分)

3. 將所有問題最后的得分加在一起,然后乘以2.5;(每個題目的得分范圍記為0~4,最大值為40,SUS可用性得分的范圍在0~100,換算后乘以2.5)

4. 計(jì)算出的結(jié)果即為產(chǎn)品的SUS可用性得分。

 

013b21612905f511013f4720e847c6.jpg

 

Tips 注意事項(xiàng):

1. 填寫之前不要進(jìn)行總結(jié)或討論;

2. 應(yīng)當(dāng)要求用戶快速完成各個題目,不要過多思考;

3. 第二題和第六題對于參與者可能難以理解,需要解釋清楚;

4. 如果用戶因?yàn)槟承┰驘o法完成其中某個題目,就視為用戶在該題上選擇了中間值。

 

SUS分?jǐn)?shù)等級與百分等級的區(qū)別:

 

012f56612908b011013eaf7049d2b6.jpg

 

我將其翻譯過后得到中文表,可以大體上感知得出的SUS分?jǐn)?shù)對應(yīng)的用戶可接受范圍。

 

015028612c37a011013f47203f6873.jpg

 

更加細(xì)化的SUS用戶感知,可參照SUS分?jǐn)?shù)曲線分級范圍表:

 

注意到這里SUS分?jǐn)?shù)等級與百分等級的區(qū)別。對照SUS分?jǐn)?shù)曲線分級范圍表,如果你的SUS分?jǐn)?shù)為68,說明你的產(chǎn)品比市面上50%的產(chǎn)品可用性要好。也就是說這個產(chǎn)品的用戶體驗(yàn)算是合格了,表明需要進(jìn)行較小的改進(jìn)。50%中值點(diǎn)對應(yīng)SUS分?jǐn)?shù)68。((59-41)/ (71-65)= 3  故中值點(diǎn)為65+10/3≈68 ,68分是均值,因此對應(yīng)百分比是50%。)

 

012bc5612a4fcb11013eaf70950655.jpg

 

5. SUS的優(yōu)點(diǎn)

 

1. 量表公開免費(fèi),題目簡單,只需參與者打分,實(shí)施便捷,操作簡單;

2. 適用范圍廣泛,產(chǎn)品初期測試驗(yàn)證,競品分析,新舊版本對比等等;

3. 研究證明SUS在樣本量有限時,可以最快達(dá)到效果,可信度系數(shù)高;

4. 快速宏觀有效區(qū)分可用系統(tǒng)(產(chǎn)品)和不可用系統(tǒng)(產(chǎn)品),避免在初期過早的關(guān)注細(xì)節(jié);

5. 當(dāng)團(tuán)隊(duì)內(nèi)產(chǎn)生分歧時,SUS讓更多的人員參與代替少數(shù)意見領(lǐng)袖說了算的形式,定量不追求定性。

6. 小樣本量時依然呈現(xiàn)高度的內(nèi)部一致性,產(chǎn)生真實(shí)可靠的反饋結(jié)果。

016db6612c380411013eaf70cb6cd7.jpg

作者:設(shè)計(jì)師豆?jié){
鏈接:https://www.zcool.com.cn/article/ZMTI4NTgyMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

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

打造卓越用戶體驗(yàn)的六大關(guān)鍵要素

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

在數(shù)字產(chǎn)品設(shè)計(jì)日新月異的今天,打造卓越用戶體驗(yàn)已成為產(chǎn)品成功的關(guān)鍵。這篇文章精準(zhǔn)解析了UX設(shè)計(jì)的六大核心支柱,從用戶研究到無障礙設(shè)計(jì),為讀者提供了全面且實(shí)用的設(shè)計(jì)框架。

開啟用戶體驗(yàn)設(shè)計(jì)探索之旅,首要任務(wù)是全面掌握其核心構(gòu)成要素——這些是構(gòu)筑絕佳用戶體驗(yàn)的基石需求。事實(shí)上,在蘋果、微軟和谷歌等設(shè)計(jì)推動型科技巨頭中,這些因素的關(guān)鍵性是不言而喻的,甚至因此催生了專屬職業(yè)與角色的誕生。在這六大核心維度中,有一個更是脫穎而出,以至于一個全新的職能部門因此得以形成。接下來,讓我們深入剖析這些零部件如何共同定義卓然出色的用戶體驗(yàn)設(shè)計(jì)版圖及行業(yè)切入點(diǎn)。

在深入分析用戶體驗(yàn)設(shè)計(jì)的六大核心要素之前,我們需要先厘清其核心內(nèi)涵。從本質(zhì)上看,用戶體驗(yàn)設(shè)計(jì)是一門創(chuàng)造愉悅且功能強(qiáng)大的體驗(yàn)藝術(shù),確保產(chǎn)品既具有效性又兼具高效性、易用性和用戶滿意度。它涵蓋了一個整體性的設(shè)計(jì)循環(huán),通過不同維度的優(yōu)化來最終實(shí)現(xiàn)這些目標(biāo)??梢园延脩趔w驗(yàn)設(shè)計(jì)比喻成一把“統(tǒng)籌性的大傘”,其下輻射的每個要素都是推動卓越體驗(yàn)構(gòu)建的重要一環(huán)。本篇文章將沿著這把傘的思維體系,逐步探索這些不可或缺的構(gòu)建模塊及其影響力。

01 用戶研究

用戶研究(亦稱 UX 研究)之所以能在設(shè)計(jì)領(lǐng)域占據(jù)重要地位,其原因顯而易見——它是產(chǎn)品設(shè)計(jì)的一大核心要素。隨著其價(jià)值的日益凸顯,越來越多的企業(yè)開始設(shè)立專門的用戶研究團(tuán)隊(duì)。這一趨勢背后的驅(qū)動力是什么?源于對用戶洞察的深入理解直接決定了能否創(chuàng)造出卓越的產(chǎn)品體驗(yàn)。在探索方案的過程中,用戶研究永遠(yuǎn)都是優(yōu)先級最高的起點(diǎn)。這個關(guān)鍵過程的核心在于定義所謂的“用戶”——通過全面梳理他們的使用體驗(yàn),挖掘其需求、期望與操作行為,從而描繪出清晰的用戶畫像。這正是用戶研究的精髓之所在。更具體地說,用戶研究是圍繞用戶的需求、目標(biāo)、行為模式以及心理動機(jī),所展開的系統(tǒng)化調(diào)研與分析。執(zhí)行用戶研究有多種專業(yè)化方法工具,包括深入訪談、結(jié)構(gòu)化調(diào)查、現(xiàn)場可視采樣以及定性和定量化的可用性評估測試,每一步都旨在深刻理解目標(biāo)人群,優(yōu)化體驗(yàn)閉環(huán)。

02 交互設(shè)計(jì)

交互設(shè)計(jì)是產(chǎn)品設(shè)計(jì)中的關(guān)鍵環(huán)節(jié),此階段負(fù)責(zé)精細(xì)化用戶與系統(tǒng)之間的互動路徑與體驗(yàn)設(shè)計(jì)。設(shè)計(jì)師需要梳理并規(guī)劃用戶操作觸發(fā)的系統(tǒng)響應(yīng)——例如按鈕點(diǎn)擊后的動作反饋。從提示的生成到任務(wù)處理的閉環(huán),每一個交互流程都經(jīng)過精致打磨。對交互表現(xiàn)的設(shè)計(jì)需通過深度用戶研究與高頻次的可用性測試進(jìn)行不斷優(yōu)化,以確保全流程交互體驗(yàn)既順暢又高效。

03 信息架構(gòu)

我的清單中提到的第三項(xiàng)是信息架構(gòu),這是在設(shè)計(jì)過程中理解內(nèi)容與功能的關(guān)鍵環(huán)節(jié)。它的核心是對內(nèi)容和功能進(jìn)行科學(xué)的分類組織和標(biāo)記,以確保產(chǎn)品的功能與結(jié)構(gòu)清晰易懂,能夠有效地滿足不同用戶的認(rèn)知需求??梢园研畔⒓軜?gòu)理解為產(chǎn)品的結(jié)構(gòu)藍(lán)圖,為用戶提供在界面元素間高效切換和操作的導(dǎo)引路徑。它的價(jià)值在于將內(nèi)容與功能資源以邏輯和體系化的方式呈現(xiàn)。那么如何精準(zhǔn)定義哪些要素歸屬于頂層導(dǎo)航、次級導(dǎo)航或細(xì)化導(dǎo)航?此時,一種名為“卡片分類法”(Card Sorting)的用戶體驗(yàn)研究方法便派上了用場,它幫助設(shè)計(jì)師優(yōu)化信息層級,制定更具洞察力和用戶思維的導(dǎo)航設(shè)計(jì)決策。

*卡片分類法:卡片分類法是一種用戶體驗(yàn)研究方法,用于幫助設(shè)計(jì)師理解用戶如何組織和分類信息。參與者通過將內(nèi)容項(xiàng)(如網(wǎng)站頁面或功能)進(jìn)行排序和分組,提供了關(guān)于信息架構(gòu)的見解。其主要步驟為:首先,每張卡片上寫一個內(nèi)容項(xiàng);其次,招募目標(biāo)用戶;再次,用戶根據(jù)理解將卡片分組并命名;最后,識別共同的分類方式。此方法有助于優(yōu)化網(wǎng)站和應(yīng)用的導(dǎo)航結(jié)構(gòu),提高用戶體驗(yàn)。

04 用戶界面設(shè)計(jì)

接下來重點(diǎn)分析用戶界面設(shè)計(jì)環(huán)節(jié),也就是我們通常所提到的視覺設(shè)計(jì),這是 UX 設(shè)計(jì)中至關(guān)重要的一環(huán),主要關(guān)注產(chǎn)品的視覺展現(xiàn)層。UI 設(shè)計(jì)師的職責(zé)在于打造具有吸引力且直觀自然的視覺體驗(yàn)。他們通過對色彩體系、排版字體、圖形視覺以及插畫風(fēng)格的細(xì)膩打磨,為產(chǎn)品的整體視覺編碼賦予獨(dú)特且一致的品牌形象。

05 UX 寫作(微文案)

UX 寫作,亦稱微文案,是文案寫作領(lǐng)域下的一個細(xì)分學(xué)科,聚焦于數(shù)字產(chǎn)品中的文本設(shè)計(jì)。UX 寫作者的核心職責(zé)是優(yōu)化數(shù)字界面中的文案,不僅要貼合用戶需求,還要顯著增強(qiáng)整體用戶體驗(yàn)。他們善于運(yùn)用精準(zhǔn)而貼近用戶心智的表達(dá)方式,撰寫既通俗易懂又情感共鳴強(qiáng)的界面文案,從而最大化提升用戶的可讀性與互動效率。

06 可訪問性

最后,我們需要聚焦于可訪問性——這是確保所有用戶(包括有特殊需求的群體)都能高效且無障礙地使用產(chǎn)品的核心要素。作為設(shè)計(jì)從業(yè)者,共情能力是我們設(shè)計(jì)哲學(xué)的重要基石。但這種共情不僅局限于通用用戶,還要涵蓋那些需要特殊支持的用戶群體。在每一次 UI 語義和交互設(shè)計(jì)中,我們必須以可訪問性優(yōu)先,確保無論用戶的能力如何,都能獲得最佳的可讀性和充分的視覺對比體驗(yàn),真正實(shí)現(xiàn)一視同仁的包容性設(shè)計(jì)。

作者:Abhi Chatterjee

譯者:李澤慧

審核:李澤慧

編輯:丁怡豪

本文由人人都是產(chǎn)品經(jīng)理作者【TCC翻譯情報(bào)局】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

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

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

B 端設(shè)計(jì)如何理解色彩空間理論

天宇 B端ui設(shè)計(jì)文章及欣賞

在B端產(chǎn)品設(shè)計(jì)的世界里,色彩不僅僅是視覺元素,它還承載著信息傳遞、用戶體驗(yàn)和品牌識別的重要角色。本文深入探討了色彩空間理論在B端設(shè)計(jì)中的應(yīng)用,從基礎(chǔ)的色彩空間概念到如何在實(shí)際工作中運(yùn)用這些理論,為設(shè)計(jì)師提供了一套科學(xué)的顏色搭配和管理方法。

對于 B 端產(chǎn)品而言,我們經(jīng)常會和顏色進(jìn)行斗爭。

比如在工作當(dāng)中,開發(fā)沒有正確還原顏色、不知道如何進(jìn)行色彩配置、以及對于 B 端產(chǎn)品而言,究竟應(yīng)該如何協(xié)調(diào)科學(xué)的進(jìn)行顏色的搭配~

最近會講顏色的部分,整體會分為四篇文章:B 端設(shè)計(jì)如何理解色彩空間、B 端產(chǎn)品怎樣合理搭配顏色、B 端項(xiàng)目的視覺風(fēng)格、B 端項(xiàng)目顏色的實(shí)戰(zhàn)技巧。

本篇文章是第一篇,我們先來聊聊產(chǎn)品配色的基礎(chǔ) 色彩空間與顏色管理。

不知道各位同學(xué)是否遇到這種情況,當(dāng)你在調(diào)整顏色時,就是在漫無目的的在拾色器上來回游走,在被問到為什么要選擇這個顏色時,也茫然無措,這時候的你作何感想?

所以顏色還原需要熟練的掌握色彩空間,并配合屏幕進(jìn)行顏色管理,才能夠讓設(shè)計(jì)順利落地。但顏色其實(shí)過于抽象,因此我們將整體內(nèi)容進(jìn)行簡化,多和大家聊聊在理論背后究竟應(yīng)該如何與工作內(nèi)容進(jìn)行結(jié)合。

首先我們先說說色彩空間。

一、什么是色彩空間?

色彩空間又叫色彩模型,它是為了讓系統(tǒng)能夠準(zhǔn)確地描述顏色、使用顏色,進(jìn)而定義出來的一種顏色組織方式。

比如有一排隨機(jī)顏色,要按特定規(guī)則排列,你會怎么做?我相信,我們首先想到的便是按照不同的色相進(jìn)行歸類。

如果顏色變?yōu)?0000個,又該怎么排列呢?因此,為了讓企業(yè)更好地使用顏色、設(shè)計(jì)師更便利地選擇一致的顏色,行業(yè)中便提出了色彩空間的概念。

色彩空間其實(shí)很簡單。因?yàn)槲覀冃枰褂妙伾?,且不同人群對顏色的需求不同,所以顏色的排列方式會存在差異?/p>

比如,行業(yè)中較為出名的潘通色彩體系,其實(shí)是基于印刷行業(yè)制定的一種特殊色彩空間;CMYK是為印刷從業(yè)者提供的、便于他們更好地進(jìn)行物料印刷的色彩空間;Lab是一種更強(qiáng)調(diào)色彩亮度的色彩空間。

因此,行業(yè)會根據(jù)顏色的不同規(guī)律和自身使用需求,總結(jié)整理出不同的色彩空間。

我們目前在工作當(dāng)中,主要都是聚焦于屏幕當(dāng)中,因此影響顏色呈現(xiàn)的也就變?yōu)椋?/p>

  • 設(shè)計(jì)軟件當(dāng)中的色彩空間:以 RGB、HSB、HCT 為主,主要是計(jì)算機(jī)識別顏色顏色,調(diào)整顏色的重要方式,在電腦軟件當(dāng)中起到重要作用。
  • 屏幕顯示當(dāng)中的色彩空間:以 Adobe RGB、Display P3、sRGB 為主,主要是能準(zhǔn)確展示屏幕當(dāng)中的各種顏色。

在我們細(xì)致講解色彩空間的部分時,我們先來了解三個重要的概念。

  1. 亮度:是光作用于人眼所引起的明亮程度的感覺,它與被觀察物體的發(fā)光強(qiáng)度有關(guān),主要表現(xiàn)光的強(qiáng)與弱。
  2. 色相:是當(dāng)人眼看一種或多種波長的光時所產(chǎn)生的色彩感覺,它反映顏色的種類,是決定顏色的基本特征。
  3. 飽和度:是指顏色的純度,即該摻入白光的程度,表示顏色深淺的程度。例如:藍(lán)色 + 白色 = 天藍(lán)色,也就是飽和度下降

二、色彩空間的類型

1. RGB  色彩空間

RGB是顯示器當(dāng)中的顏色基礎(chǔ)。

比如在現(xiàn)實(shí)世界當(dāng)中,我們將手機(jī)屏幕進(jìn)行放大,你會發(fā)現(xiàn)屏幕都是由紅綠藍(lán)三個燈管所組成的。

而 RGB 的色彩模式就是模擬現(xiàn)實(shí)世界當(dāng)中的屏幕顯示原理,將燈光照射的邏輯在設(shè)計(jì)軟件當(dāng)中進(jìn)行復(fù)現(xiàn),因此在 RGB 的調(diào)色盤中,就會分別包含三個輸入框,這便是 紅綠藍(lán)。

其中,數(shù)字 0 代表不發(fā)光、255 則是最亮的燈光。

那為什么最亮是 255,不是 250?或者是 280 呢?

原因在于RGB 所有的顏色,最后都需要通過計(jì)算機(jī)進(jìn)行運(yùn)算顯示,對于它說并不認(rèn)識 紅色、藍(lán)色,在它的腦袋里(不對,CPU 里面)就只有 0 與 1,因此在計(jì)算機(jī)存儲的時候,一個字節(jié)也就是 8 個比特、也就是 2 的八次方、也就是 256,這樣 一個色彩信息等于一個字節(jié),數(shù)據(jù)存儲就會更加高效。

所以我們所聊的顏色更多指的是代碼層面的顏色設(shè)定。

接著我們打開 Figma,看到另一種格式 Hex,那我們稱之為是 RGB 模式的精簡版。

因?yàn)樗訔壝總€輸入框都會出現(xiàn) 255(255,255,255 白色)實(shí)在太長,不利于我們在日常工作當(dāng)中進(jìn)行記錄。

因此將每個顏色,三位數(shù)值縮減為兩位數(shù)值(十進(jìn)制變?yōu)槭M(jìn)制),就是增加英文字符的數(shù)據(jù),就能較短的表達(dá)顏色,使得顏色表達(dá)更為高效。

因?yàn)?Hex 只是 RGB 的精簡版本,所以 Hex 里面,每兩個字符所對應(yīng)的就是 紅、綠、藍(lán)。

比如我們剛才提到的這個藍(lán)色,在 RGB 空間當(dāng)中為(0,86,255) ,Hex 則是#0056FF,也是一一對應(yīng)關(guān)系。

RGB 聽上去似乎很美好,但問題在于兩點(diǎn):

1.顏色的調(diào)整不夠直觀:作為設(shè)計(jì)師,我們很難模擬燈光的照射思維對顏色進(jìn)行調(diào)整,具體應(yīng)該增加多少顏色,其實(shí)是不夠清楚的。我們更熟悉的其實(shí)是:亮度、色相、飽和度,因此在調(diào)色時會十分困難。

比如我目前是紅色,那我要調(diào)整到紫色,應(yīng)該輸入多少值呢?其實(shí)我們很難進(jìn)行一個準(zhǔn)確的判斷。

2.顏色信息與亮度信息的數(shù)據(jù)混合:導(dǎo)致我們很難對于有一個準(zhǔn)確的判斷,比如在 RGB 相同的數(shù)值當(dāng)中,明顯會感受到 黃綠色 與其他顏色的亮度存在較大差異,這樣在調(diào)色時,顏色一致性偏差較大。

為了解決這些問題,就提出一種新的色彩模型:HSB

2. HSB 色彩空間

HSB (也叫 HSV)就是通過顏色的  色相、飽和度、亮度 來進(jìn)行表示。

在色相當(dāng)中,由于顏色的呈現(xiàn)是色環(huán)的方式,因此在數(shù)值上是以 0-360 度來進(jìn)行表示的,在設(shè)計(jì)軟件里面,我們也只能輸入所對應(yīng)的數(shù)值。

同時飽和度與亮度都是以百分比的形式進(jìn)行呈現(xiàn),飽和度越低,相對應(yīng)就會給顏色增加白色,使其更灰;亮度越低,就會增加對應(yīng)的黑色,讓其更深。

由于 HSB 的色彩空間的分類模式非常有利于我們進(jìn)行顏色的調(diào)整,因此我們在日常調(diào)色時其實(shí)會經(jīng)常用到。

比如日常工作當(dāng)中,假設(shè)我們需要設(shè)計(jì)一組圖標(biāo),根據(jù) HSB 顏色的基本原理,我們其實(shí)只需要調(diào)整不同的色相,就能夠得到不同的圖標(biāo)顏色。

但… 顏色上依舊會存在問題。

你會發(fā)現(xiàn)當(dāng)我們調(diào)整了色相過后,整體的顏色并沒有形成統(tǒng)一。原因在于我們?nèi)搜蹖τ?黃綠色的感知 會和紅色、藍(lán)色有所不同,我們通常在看黃綠色時會更為刺眼,因此在設(shè)計(jì)層面上需要單獨(dú)調(diào)整。

所以在 HSB 當(dāng)中的顏色邏輯上,也并沒有解決顏色一致性的問題。于是在 2021 年 Google 提出一種全新的色彩模式,HCT。

3. HCT 色彩空間

HCT 首先會將顏色當(dāng)中的 感知度、亮度 進(jìn)行結(jié)合,對之前的 HSB 重新調(diào)整。

在顏色層面上主要分為:Hue:色相、Chroma:色度、Tone:色調(diào)

色相與色度和之前基本類似,但色調(diào)上優(yōu)化了黃綠色凸顯問題,讓人眼的感知度也加入到了色彩空間當(dāng)中,使其顏色更為準(zhǔn)確。

同時色彩空間的呈現(xiàn),優(yōu)化了顏色漸變的流暢性,我們會發(fā)現(xiàn)整體的漸變感覺會更為自然。

那為什么 Google 想要做 HCT?

其實(shí)因?yàn)?Material Design 當(dāng)中會強(qiáng)調(diào)設(shè)計(jì)的一致性和靈活性,在功能設(shè)計(jì)上,需要增加一個根據(jù)屏幕當(dāng)中的圖標(biāo)生成與其風(fēng)格一致的壁紙。

但在之前無論什么樣的色彩空間都不能準(zhǔn)確的還原顏色。現(xiàn)在就提供了一個可靠的色彩基礎(chǔ),能夠讓我們在不同的設(shè)備、平臺和應(yīng)用場景下,都能夠生成具有一致性的色彩方案,同時也能更好地適應(yīng)各種主題和風(fēng)格的變化,如亮色模式和暗色模式的切換。

比如,還是以上面這個案例,我們使用 HSB 與 HCT 對顏色進(jìn)行的色相的調(diào)整,那得到的結(jié)果明顯會發(fā)現(xiàn) HCT 會更加準(zhǔn)確。

那 HCT 就真那么完美無瑕?

其實(shí)也不然,因?yàn)?HCT 色彩空間出現(xiàn)時間較晚,所以在使用上也會有很多問題。

  • 設(shè)備兼容性差:很多設(shè)計(jì)軟件目前對 HCT 基礎(chǔ)沒有適配,所以即使使用,很多老舊設(shè)備也并不能支持。
  • 計(jì)算復(fù)雜度高:HCT 的色彩空間涉及到更為復(fù)雜的計(jì)算算法,因此它對于系統(tǒng)的資源要求更高。
  • 認(rèn)知成本較大:對于新的事物,往往在行業(yè)中的普及會相對較慢,因此還需要長時間的普及才行。

三、色彩空間如何應(yīng)用?

這么深奧的色彩空間,到底要如何使用?

1. 以 HSB 的為主

因?yàn)?HSB 是設(shè)計(jì)師最容易理解的色彩空間,因此我們在調(diào)色時需要根據(jù)數(shù)值來進(jìn)行顏色的調(diào)教。

比如說你的顏色很臟,不夠干凈。其實(shí)就是在強(qiáng)調(diào) HSB 當(dāng)中使用了更多的黑色,我們便可以調(diào)整到這個色彩空間當(dāng)中,去增加 B 的值(也就是第三個輸入框)

比如說你的字體很灰,不夠明確。

其實(shí)就是在說 你的亮度太高,需要減少亮度,也就是 H 的值(也就是第一個輸入框)

2. 色彩更具數(shù)據(jù)化

因?yàn)槊恳粋€屏幕所顯示的顏色其實(shí)都不太相同,因此色彩調(diào)整時要多看數(shù)據(jù),觀察數(shù)據(jù)之間的對比變化。

比如以 B 端產(chǎn)品的中性色為例,現(xiàn)在系統(tǒng)當(dāng)中所使用的正文顏色為 #333333,看到過后就明確知道顏色深度不夠、顏色也不透氣。

我們就會按照,先確定顏色色相,為灰色偏藍(lán)色,因此在色相當(dāng)中需要拖動色環(huán)找到合適的色相;

緊接著確定飽和度,因?yàn)橐{(lán)色,但不宜過多,因此整體的數(shù)值只會在 1-5 之前浮動;

最后確定深度,之前顏色過于淺,需要加深,所以直接減少,變?yōu)?22 左右的數(shù)值。

3. HCT 輔助顏色判斷

其次在判斷顏色時,也會更具章法。

在多輔助色的情況下,我們可以使用 HCT 對顏色進(jìn)行判斷。

對于日常工作來說,我們可以使用 Figma 當(dāng)中的 color Space 插件 進(jìn)行日常的色彩管理。在今后遇到類似同類型圖標(biāo)時,我們可以使用 HCT 的方式快速生成發(fā)散色板,幫助我們進(jìn)行色彩搭配。

4. 引入 HCT 完善工作流

最后在 B 端系統(tǒng)當(dāng)中,會存在較多顏色搭配的場景。

像是圖表設(shè)計(jì)、自定義系統(tǒng)主題,原來只能通過系統(tǒng)預(yù)設(shè)固定顏色的方式進(jìn)行解決,而現(xiàn)在 Google 也將這套計(jì)算公式開源,也就是說程序員可以直接引用 HCT 的色彩空間,將顏色配置的權(quán)限給到用戶,通過顏色的調(diào)整,呈現(xiàn)用戶想要的顏色內(nèi)容。

四、屏幕顯示的色彩空間

對于屏幕顯示的色彩空間而言,有部分內(nèi)容我們也是要重點(diǎn)關(guān)注。比如在 B 端設(shè)計(jì)當(dāng)中,色彩還原老是出問題,那我們就可以通過屏幕的色彩空間進(jìn)行判斷。

1. sRGB 色彩空間

sRGB(standard Red Green Blue)是由惠普公司和微軟公司共同開發(fā)的一種標(biāo)準(zhǔn)色彩空間,目的是提供一種通用的色彩標(biāo)準(zhǔn),使得在不同的設(shè)備(如顯示器、打印機(jī)等)之間能夠?qū)崿F(xiàn)相對一致的色彩顯示。

對于 sRGB 來說,它是我們作為設(shè)計(jì)師最為重要的屏幕顯示色彩空間,因?yàn)樗ㄓ眯詮?qiáng),所以大多數(shù)普通的電腦顯示器、網(wǎng)頁瀏覽器等都默認(rèn)采用 sRGB 色彩空間,這樣在瀏覽網(wǎng)頁、查看普通的數(shù)碼照片時,可以獲得比較穩(wěn)定的色彩效果。

所以我們在做設(shè)計(jì)時,通常都會將屏幕與軟件,都調(diào)整的 sRGB 的空間當(dāng)中,這樣就能夠最大限度保證色彩的一致。

2. Display P3 色彩空間

Display P3 是基于 DCI – P3 色彩空間衍生而來的,主要用于消費(fèi)級顯示器設(shè)備。它在 DCI – P3 的基礎(chǔ)上進(jìn)行了一些調(diào)整,以適應(yīng)顯示器的特性。

整體而言 P3 色彩空間顯示出來的顏色會更加 生動、艷麗,但是這會和你的設(shè)備密切相關(guān)。目前行業(yè)中只在蘋果設(shè)備以及部分高端顯示器才會使用,所以我們在設(shè)計(jì)時需要考慮自己產(chǎn)品的受眾,這一設(shè)備是否普遍使用。

最后,我們總結(jié)一下:

  1. 色彩空間就是我們使用顏色的一種方式
  2. 在調(diào)色時,我們會優(yōu)先使用 HSB 的色彩空間
  3. HCT 是 Google 推出,主要目的是 色彩視覺的統(tǒng)一,在我們生成輔助色的時候有用
  4. 屏幕當(dāng)中我們的所有顯示配置盡量調(diào)整為 sRGB,這樣更符合大多數(shù)用戶的顯示情況

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

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

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

創(chuàng)造出眾的UI圖標(biāo):點(diǎn)亮你的界面

天宇 圖標(biāo)設(shè)計(jì)文章及欣賞

在做產(chǎn)品設(shè)計(jì)的時候,UI界面更多是由設(shè)計(jì)師完成,產(chǎn)品僅是提供界面元素和布置,其他的由設(shè)計(jì)師發(fā)揮。但如果產(chǎn)品能了解更多設(shè)計(jì)相關(guān)的知識,在和設(shè)計(jì)師探討、分析時會更有針對性,也會讓產(chǎn)品的工作顯得更為專業(yè)。

在當(dāng)今數(shù)字化時代,我們與各種移動應(yīng)用、網(wǎng)頁和軟件界面打交道,圖標(biāo)就像是這些界面的明星。它們小巧玲瓏、獨(dú)具特色,扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標(biāo)的定義、作用以及在用戶界面中的重要性。

一、UI圖標(biāo)的定義和作用

A. UI圖標(biāo)的定義

UI圖標(biāo)是指用簡潔明了的小型圖形符號來表示特定功能、操作或信息的設(shè)計(jì)元素。圖標(biāo)通過簡單的形狀和圖像,向用戶傳遞信息和功能,并在界面中起到重要的導(dǎo)航和標(biāo)識作用。

B. UI圖標(biāo)的作用

  • 提供快速識別:UI圖標(biāo)能夠以簡單直觀的方式展示功能和操作,使用戶迅速識別界面元素,快速完成操作。
  • 提升用戶體驗(yàn):UI圖標(biāo)能夠使界面更加直觀、友好和易于使用,用戶無需過多猜測,更加自信地與界面互動。
  • 增加品牌識別度:UI圖標(biāo)承載著品牌形象,設(shè)計(jì)合理的圖標(biāo)能夠提升品牌的識別度和記憶性,促進(jìn)用戶與品牌的情感連接。

C. UI圖標(biāo)在用戶界面中的重要性

UI圖標(biāo)在用戶界面設(shè)計(jì)中扮演著不可或缺的角色,其重要性體現(xiàn)在以下幾個方面:

  • 導(dǎo)航和標(biāo)識功能:UI圖標(biāo)通過視覺上的差異化,幫助用戶快速識別和定位所需的功能模塊,提供直觀導(dǎo)航,減少操作復(fù)雜度。
  • 美觀和統(tǒng)一性:精心設(shè)計(jì)的UI圖標(biāo)能夠增加界面的美感,提升用戶體驗(yàn)。通過一致性的圖標(biāo)設(shè)計(jì),整個界面呈現(xiàn)出協(xié)調(diào)統(tǒng)一的視覺效果。
  • 信息傳遞效果:UI圖標(biāo)通過形狀、顏色和圖像等視覺元素,能夠傳達(dá)具體的信息和功能,使用戶更容易理解界面的意圖和操作方式。
  • 增強(qiáng)品牌形象:UI圖標(biāo)能夠?qū)⑵放菩蜗笕谌氲浇缑嬷校纬瑟?dú)特的品牌風(fēng)格和個性,幫助品牌建立與用戶的情感聯(lián)系。

二、設(shè)計(jì)原則和要素

UI圖標(biāo)設(shè)計(jì)是用戶界面的重要組成部分,它們不僅可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站,還可以增強(qiáng)整體視覺效果。為了設(shè)計(jì)出高質(zhì)量的UI圖標(biāo),設(shè)計(jì)師需要遵循一些基本原則和要素。

A. 獨(dú)特性和可識別性

設(shè)計(jì)具有獨(dú)特特征的圖標(biāo) UI圖標(biāo)應(yīng)該具有獨(dú)特的特征,使其能夠與其他圖標(biāo)區(qū)分開來。設(shè)計(jì)師可以通過使用不同的形狀、顏色和風(fēng)格來實(shí)現(xiàn)這一目標(biāo)。同時,圖標(biāo)的形狀和顏色也應(yīng)該與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標(biāo)的功能和意義。

避免與其他圖標(biāo)混淆 為了避免UI圖標(biāo)與其他圖標(biāo)混淆,設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與其他圖標(biāo)有足夠的區(qū)別。如果圖標(biāo)的形狀和顏色與其他圖標(biāo)過于相似,用戶可能會難以區(qū)分它們的功能和意義,從而影響用戶的使用體驗(yàn)。

B. 簡潔性和清晰性

追求簡潔的圖標(biāo)設(shè)計(jì) 簡潔的圖標(biāo)設(shè)計(jì)可以幫助用戶更快地理解和使用圖標(biāo)。設(shè)計(jì)師應(yīng)該盡可能地簡化圖標(biāo)的形狀和顏色,避免使用過多的細(xì)節(jié)和復(fù)雜的形狀。簡潔的圖標(biāo)設(shè)計(jì)還可以幫助應(yīng)用程序或網(wǎng)站的整體視覺效果更加統(tǒng)一和和諧。

避免過度復(fù)雜化的細(xì)節(jié) 過度復(fù)雜化的細(xì)節(jié)可能會使圖標(biāo)變得過于復(fù)雜和難以理解。設(shè)計(jì)師應(yīng)該避免使用過多的細(xì)節(jié)和復(fù)雜的形狀,以確保圖標(biāo)的簡潔性和清晰性。同時,設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色足夠明確,以便用戶能夠輕松地識別和理解圖標(biāo)的功能和意義。

C. 一致性和統(tǒng)一性

維護(hù)整個UI界面的一致性風(fēng)格 UI圖標(biāo)應(yīng)該與整個UI界面的風(fēng)格保持一致。設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致。這樣可以幫助用戶更快地識別和理解圖標(biāo)的功能和意義,同時也可以增強(qiáng)應(yīng)用程序或網(wǎng)站的整體視覺效果。

使用相似的線條、顏色和風(fēng)格 為了實(shí)現(xiàn)一致性和統(tǒng)一性,設(shè)計(jì)師應(yīng)該使用相似的線條、顏色和風(fēng)格來設(shè)計(jì)圖標(biāo)。這樣可以使圖標(biāo)與整個UI界面的風(fēng)格保持一致,同時也可以使圖標(biāo)的形狀和顏色更加和諧統(tǒng)一。

D. 可視化傳達(dá)

明確圖標(biāo)所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標(biāo),設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀和顏色能夠明確地傳達(dá)

使用適當(dāng)?shù)男螤?、符號和顏色傳達(dá)信息 為了確保圖標(biāo)能夠明確地傳達(dá)信息,設(shè)計(jì)師應(yīng)該使用適當(dāng)?shù)男螤?、符號和顏色?/p>

例如,一個圖標(biāo)可能需要使用一個圓形作為基本形狀,同時使用一個代表性的符號來表示它的功能和意義。

同時,設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標(biāo)的功能和意義。

E. 可縮放性和適應(yīng)性

使用矢量圖形實(shí)現(xiàn)圖標(biāo)的可縮放性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性,設(shè)計(jì)師應(yīng)該使用矢量圖形來實(shí)現(xiàn)圖標(biāo)的可縮放性。

矢量圖形是一種基于數(shù)學(xué)公式的圖形,它們可以在不失真的情況下進(jìn)行任意大小的縮放。

這意味著:即使圖標(biāo)被放大或縮小,它們的形狀和顏色也不會發(fā)生變化。

確保在不同屏幕和設(shè)備上的可用性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性,設(shè)計(jì)師應(yīng)該考慮圖標(biāo)在不同分辨率和屏幕尺寸下的表現(xiàn)。

例如,設(shè)計(jì)師應(yīng)該確保圖標(biāo)的大小和形狀適合不同屏幕和設(shè)備的顯示。

同時,設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的顏色在不同的屏幕和設(shè)備上都能夠保持一致,以幫助用戶更快地識別和理解圖標(biāo)的功能和意義。

三、設(shè)計(jì)流程和技巧

UI圖標(biāo)設(shè)計(jì)需要遵循一定的流程和技巧,以確保圖標(biāo)的高質(zhì)量和可用性。

以下是一些常用的設(shè)計(jì)流程和技巧:

A. 需求分析和功能定義

在開始設(shè)計(jì)之前,設(shè)計(jì)師需要了解UI圖標(biāo)的使用場景和目的。這可以幫助設(shè)計(jì)師確定圖標(biāo)所代表的含義和功能,以確保圖標(biāo)的準(zhǔn)確性和可用性。

B. 創(chuàng)意和草圖階段

在進(jìn)行創(chuàng)意和草圖階段,設(shè)計(jì)師應(yīng)該進(jìn)行創(chuàng)意思維和頭腦風(fēng)暴,以產(chǎn)生出多種不同的設(shè)計(jì)方案。同時,設(shè)計(jì)師也應(yīng)該從簡單的草圖開始構(gòu)思圖標(biāo)設(shè)計(jì),以確保圖標(biāo)的可行性和可實(shí)現(xiàn)性。

C. 細(xì)化和完善設(shè)計(jì)

在細(xì)化和完善設(shè)計(jì)階段,設(shè)計(jì)師應(yīng)該使用矢量工具進(jìn)行圖標(biāo)設(shè)計(jì),并重點(diǎn)關(guān)注細(xì)節(jié)和清晰度的提升。這可以幫助設(shè)計(jì)師創(chuàng)建出具有獨(dú)特特征的圖標(biāo),并確保圖標(biāo)的可縮放性和適應(yīng)性。

D. 反饋和優(yōu)化

在反饋和優(yōu)化階段,設(shè)計(jì)師應(yīng)該向用戶和團(tuán)隊(duì)收集反饋,并根據(jù)反饋進(jìn)行圖標(biāo)的優(yōu)化和調(diào)整。這可以幫助設(shè)計(jì)師確保圖標(biāo)的準(zhǔn)確性和可用性,并根據(jù)用戶的需求和期望進(jìn)行調(diào)整和優(yōu)化。

四、設(shè)計(jì)最佳實(shí)踐和案例研究

UI圖標(biāo)設(shè)計(jì)是一個重要的設(shè)計(jì)領(lǐng)域,它可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站。以下是一些成功的UI圖標(biāo)設(shè)計(jì)案例和分析。

A. 探索成功的UI圖標(biāo)設(shè)計(jì)案例

成功的UI圖標(biāo)設(shè)計(jì)案例可以幫助設(shè)計(jì)師了解和學(xué)習(xí)一些設(shè)計(jì)最佳實(shí)踐和技巧。成功的圖標(biāo)有很多以下只列舉兩個圖標(biāo)設(shè)計(jì)案例:

  1. Airbnb圖標(biāo):Airbnb是一個在線旅行房屋租賃平臺,它的圖標(biāo)設(shè)計(jì)非常簡潔和具有代表性。Airbnb的圖標(biāo)設(shè)計(jì)使用了一個圓形的形狀,并使用了一個代表性的符號來表示它的功能和意義。同時,Airbnb的圖標(biāo)設(shè)計(jì)也非常簡潔,它只使用了少量的顏色和形狀,這使得圖標(biāo)非常易于理解和使用。
  2. Apple的App Store圖標(biāo):Apple的App Store圖標(biāo)采用了一個簡單明了的大字母”A”,代表了應(yīng)用程序。這個圖標(biāo)的設(shè)計(jì)借鑒了蘋果公司的品牌風(fēng)格,采用了簡潔、現(xiàn)代的風(fēng)格,使其在界面中易于辨認(rèn)。

B. 分析圖標(biāo)設(shè)計(jì)背后的原理和決策

成功的UI圖標(biāo)設(shè)計(jì)案例背后都有一些共同的原理和決策。

以下是一些分析圖標(biāo)設(shè)計(jì)背后的原理和決策的方法:

  • 了解用戶的需求和期望:設(shè)計(jì)師應(yīng)該了解用戶的需求和期望,并根據(jù)用戶的需求和期望進(jìn)行圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加符合用戶需求和期望的圖標(biāo),從而提高圖標(biāo)的可用性和易用性。
  • 遵循一致性和統(tǒng)一性原則:設(shè)計(jì)師應(yīng)該遵循一致性和統(tǒng)一性原則,使用相似的線條、顏色和風(fēng)格來設(shè)計(jì)圖標(biāo)。這可以幫助設(shè)計(jì)師創(chuàng)建出具有一致性和統(tǒng)一性的圖標(biāo),從而提高圖標(biāo)的可視化傳達(dá)和可用性。
  • 避免過度復(fù)雜化的細(xì)節(jié):設(shè)計(jì)師應(yīng)該避免過度復(fù)雜化的細(xì)節(jié),追求簡潔的圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加簡潔和易于理解的圖標(biāo),從而提高圖標(biāo)的可用性和易用性。

五、最后

A. 總結(jié)UI圖標(biāo)設(shè)計(jì)的重要性和原則

UI圖標(biāo)在用戶界面中扮演著重要的角色,它們不僅能夠傳達(dá)信息和功能,還能夠增強(qiáng)用戶體驗(yàn)和界面的美感。以下是一些重要的UI圖標(biāo)設(shè)計(jì)原則:

  • 簡潔明了:使用必要的元素和形狀,避免過度復(fù)雜化的細(xì)節(jié)。
  • 可識別性:使圖標(biāo)獨(dú)特、清晰、易于辨認(rèn),以便用戶快速理解其含義。
  • 一致性:與品牌風(fēng)格相匹配,確保整個界面的視覺統(tǒng)一性。
  • 可擴(kuò)展性:使用矢量圖形制作圖標(biāo),以便在不同尺寸和分辨率下保持清晰度。
  • 用戶反饋和測試:收集用戶的意見和建議,進(jìn)行測試和調(diào)整,以提升圖標(biāo)的質(zhì)量和效果。

B. 鼓勵設(shè)計(jì)師繼續(xù)探索和發(fā)展圖標(biāo)設(shè)計(jì)技能

圖標(biāo)設(shè)計(jì)是一個不斷發(fā)展和演進(jìn)的領(lǐng)域。鼓勵設(shè)計(jì)師們繼續(xù)學(xué)習(xí)、實(shí)踐和探索,通過不斷嘗試新的技術(shù)和方法,提升自己的設(shè)計(jì)能力。以下是一些建議:

  • 深入研究:學(xué)習(xí)不同的圖標(biāo)設(shè)計(jì)風(fēng)格和趨勢,深入了解各種設(shè)計(jì)工具和技術(shù),保持對設(shè)計(jì)領(lǐng)域的持續(xù)學(xué)習(xí)。
  • 觀察和啟發(fā):注意身邊的圖標(biāo)設(shè)計(jì),從成功的案例中汲取靈感,拓寬自己的設(shè)計(jì)思維。
  • 反饋和合作:與團(tuán)隊(duì)和用戶溝通交流,接受他們的反饋和建議,與其他設(shè)計(jì)師合作分享經(jīng)驗(yàn)和知識。
  • 認(rèn)識目標(biāo)用戶:了解目標(biāo)用戶的需求和偏好,將其融入到圖標(biāo)設(shè)計(jì)的決策中。

UI圖標(biāo)設(shè)計(jì)在用戶界面中起著重要的作用。通過掌握設(shè)計(jì)原則和實(shí)踐技巧,繼續(xù)學(xué)習(xí)和發(fā)展設(shè)計(jì)技能,我們將能夠創(chuàng)造出令人印象深刻的UI圖標(biāo)作品,提升用戶體驗(yàn)和界面美感。不斷探索和挑戰(zhàn)自己,成為一名卓越的圖標(biāo)設(shè)計(jì)師!

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

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

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

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

春節(jié)爆品背后竟藏著這10+個設(shè)計(jì)秘訣

天宇 平面設(shè)計(jì)

春節(jié)是一個很大的流量池,經(jīng)過一年時間的勞累,人們有了更多的閑暇時光,這是企業(yè)也是內(nèi)容創(chuàng)作者獲取流量的絕佳時機(jī)。

這個春節(jié),我被各大產(chǎn)品的情感化設(shè)計(jì)萌化了,設(shè)計(jì)細(xì)節(jié)太貼心了,極大的增加了產(chǎn)品與用戶的粘性,各大廠都推出了既承載千年文化重量,又具備數(shù)字原生形態(tài)的新春物種,花樣可謂是百花齊放。

各大廠都紛紛從視覺、社交互動、內(nèi)容創(chuàng)作展開想象,設(shè)計(jì)了豐富多彩的春節(jié)用戶體驗(yàn),下面讓我們來開開眼福,一睹他們的風(fēng)采,同時也順便學(xué)習(xí)下,作為設(shè)計(jì)師的我們有哪些創(chuàng)意出發(fā)點(diǎn)?

一、各大廠春節(jié)設(shè)計(jì)的背景

春節(jié),作為中國最重要的傳統(tǒng)節(jié)日,不僅承載著深厚的文化內(nèi)涵,更是一場全民參與的消費(fèi)盛宴和社交狂歡。在這個特殊的時期,人們的注意力高度集中,圍繞春節(jié)展開的各種活動,無論是線上還是線下,都呈現(xiàn)出爆發(fā)式的增長。

從電商數(shù)據(jù)來看,2025年全國網(wǎng)上年貨節(jié)期間,全國日均網(wǎng)上零售額同比增長6.2%,累計(jì)網(wǎng)絡(luò)零售額更是突破7000億元人民幣,同比去年增長9.8%,再創(chuàng)歷史新高。

抖音電商“春節(jié)不打烊,財(cái)神送福氣”活動中,全域日均支付GMV同比增長56.02%,直播日均支付GMV同比增長46.57%。

快手本地生活“新春團(tuán)購節(jié)”GMV同比大漲117%,新線城市日均支付用戶數(shù)環(huán)比增長234%,這些驚人的數(shù)據(jù),無一不彰顯著春節(jié)期間電商消費(fèi)的強(qiáng)勁活力。

社交平臺上同樣熱鬧非凡。除夕及春晚期間微博活動用戶達(dá)2.97億,全站互動超3.1億次,4656萬用戶除夕贏得福運(yùn)紅包,全國年味相關(guān)話題閱讀量破102億。

快手在2025年春節(jié)期間,平臺日活用戶規(guī)模創(chuàng)歷史新高,春節(jié)活動相關(guān)視頻總播放量超2000億,直播總觀看量高達(dá)150多億,“搖發(fā)財(cái)樹”紅包活動中,用戶一共搖了57億次紅包。

如此龐大的流量和用戶注意力,為品牌和商家提供了絕佳的展示舞臺。在這個信息爆炸的時代,誰能在春節(jié)期間成功吸引用戶的注意力,誰就能在市場競爭中搶占先機(jī)。

一個精心設(shè)計(jì)的廣告、一場別出心裁的互動活動,都有可能在這個流量高峰中迅速傳播,收獲海量的關(guān)注和曝光,實(shí)現(xiàn)品牌知名度的提升和產(chǎn)品銷量的增長。

下面就讓我們看看各大廠在春節(jié)期間都找到了哪些設(shè)計(jì)機(jī)會點(diǎn)?

二、視覺機(jī)會點(diǎn)

1、按鈕的設(shè)計(jì)機(jī)會

設(shè)計(jì)思考:

  1. 百度地圖,在按鈕設(shè)計(jì)上動了小心思,按鈕用動車和燈籠相結(jié)合,顏色上也用的大紫大紅,盡顯春節(jié)的氣氛。
  2. 花瓣,把幾個素材的功能入口做成了紅包形式,畫面效果耳目一新,原來按鈕入口還能如此的多姿好看,年味十足。
  3. 農(nóng)業(yè)銀行,功能入口全部由之前玻璃質(zhì)感的扁平風(fēng)變成了現(xiàn)在的微質(zhì)感年味風(fēng),圖標(biāo)的每一個細(xì)節(jié)都在緊靠春節(jié)展開創(chuàng)作,展現(xiàn)了產(chǎn)品的細(xì)心和用心。
  4. 肯德基,功能入口圖標(biāo)全部用剪紙風(fēng)格形式表達(dá),將過年家家戶戶貼窗花的場景搬到了線上,讓用戶盡享年味。
  5. 騰訊視頻,將主要功能入口用了故宮的古典建筑和節(jié)日的鑼鼓,彰顯了節(jié)日的熱鬧,也是不錯的設(shè)計(jì)著手點(diǎn)。

2、網(wǎng)頁皮膚的設(shè)計(jì)機(jī)會

設(shè)計(jì)思考:

  1. 太平洋汽車,左邊燈籠,右邊靈蛇,甚是歡樂,蛇年氛圍十足。
  2. 春秋航空,背景用了極具中國年味的水墨插畫進(jìn)行表達(dá),畫面中有熙熙攘攘拜年玩耍場景,更有調(diào)皮可愛的小蛇帶著帽子在街上行走,飽足了觀眾的眼福。
  3. 搜狐,左邊新年祝福語,右邊一個調(diào)皮的剪影小蛇嘴里叼著一個燈籠,雖簡潔,也是很能感受到節(jié)日的氣息。
  4. 萬方數(shù)據(jù),左右兩對精致的燈籠,通紅的背景,營造出萬家燈火的感覺,滿滿的吉祥寓意,象征著來年的好運(yùn)與吉祥。
  5. 中華網(wǎng),滿屏的煙花秀,讓人瞬間想起大年三十除夕夜的煙花,小小的元素也是有著大大的魔力,讓人浮想聯(lián)翩。

3、彈窗的設(shè)計(jì)機(jī)會

設(shè)計(jì)思考:

  1. 花瓣的彈窗,用了紅包與燈籠的結(jié)合,玫紅色和金色金幣的運(yùn)用,畫面財(cái)源滾進(jìn)的寓意濃厚。
  2. 有道翻譯的彈窗,邊框用了具有中式邊框的造型,左右兩串長長的燈籠,下面還配有祥云,很有意境,紅火的畫面,再將需要凸顯的信息放置在在紫色按鈕上,對比感強(qiáng)烈,信息傳達(dá)無比清晰。
  3. 應(yīng)用寶的彈窗,用了漫畫的風(fēng)格進(jìn)行表達(dá),按鈕和邊框都運(yùn)用了中式的裝飾紋樣,緊扣節(jié)日主題。
  4. 中國電信的這個彈窗,比較討巧,其他的樣式都沿用了日常的樣式,只是在右上角添加了一個小小的煙花造型,氛圍感馬上呈現(xiàn),對于設(shè)計(jì)師來說真是省時省力的舉措。
  5. 支付寶的彈窗,直接用了轉(zhuǎn)紅包的視覺創(chuàng)意,將過年的這種人情世故轉(zhuǎn)到了彈窗中,很親民。
  6. 中信銀行的彈窗,運(yùn)用歡樂的吉祥物形象,外加幾何煙花造型來營造春節(jié)氛圍,也是不錯的視覺表達(dá)。

4、動效在春節(jié)PC端的設(shè)計(jì)機(jī)會

設(shè)計(jì)思考:

  1. 金投網(wǎng)的背景用了一些在空中搖曳的燈籠和福字,讓春節(jié)的氛圍額外的濃烈,果然動效是氛圍打造的絕佳利器。
  2. 地下城與勇士,它的氛圍打造就更濃郁了,有人有物,場景額外的熱鬧,仿佛看到了過年大家一起賞燈看煙花的場景。

5、動效在春節(jié)登錄頁的設(shè)計(jì)機(jī)會

設(shè)計(jì)思考:

登錄元夢之星和洪恩識字,感覺就像打開了一場煙花秀的視覺盛典,特別是洪恩識字,效果特別的炸裂,數(shù)字煙花秀做的特別吸睛。

這樣的動效視覺表現(xiàn)很好的與用戶產(chǎn)生了情感共鳴,拉近了彼此的距離,增加了節(jié)日的樂趣。

6、動效在春節(jié)APP的設(shè)計(jì)機(jī)會

設(shè)計(jì)思考:

支付寶在春節(jié)期間推出了一款很驚艷的皮膚,畫面中仙氣飄飄,一改之前單調(diào)的純色背景,將有中國韻味的敦煌壁畫文化搬上了熒屏,增添了很多喜慶的氛圍和中國味,養(yǎng)顏又養(yǎng)心。

設(shè)計(jì)思考:

騰訊QQ在過年期間,推出了一個領(lǐng)Q幣的活動還挺有意思,小企鵝穿著厚厚的衣服,手中抱著一個福袋在奔跑,通過這樣的動效引導(dǎo)用戶去領(lǐng)金幣,非常的有意思。

7、Banner在春節(jié)的設(shè)計(jì)機(jī)會

設(shè)計(jì)思考:

Banner是很好進(jìn)行情感化設(shè)計(jì)的窗口,也是打造春節(jié)氣氛的絕佳寶地,那么這個春節(jié)它也一定不會缺席。

  1. 優(yōu)設(shè)網(wǎng)在Banner中運(yùn)用古代門頭和靈蛇結(jié)合,再配合煙花,喜慶感倍增。
  2. 釘釘在Banner中采用了他們的吉祥物進(jìn)行了設(shè)計(jì),讓吉祥物身穿年服來傳遞節(jié)日的氣息,也是不錯的設(shè)計(jì)出發(fā)點(diǎn)。
  3. 七貓中華網(wǎng),運(yùn)用城市煙花結(jié)合寫作的筆進(jìn)行創(chuàng)作,符合節(jié)日屬性同時又與平臺業(yè)務(wù)相契合,表達(dá)的很妙。
  4. 創(chuàng)客貼,一改常規(guī)的大紅,用了淡雅的黃色,左右兩邊點(diǎn)綴一個燈籠和些許元宵,也傳遞了不一樣的節(jié)日氛圍。

三、功能創(chuàng)新機(jī)會點(diǎn)

1、微信紅包的微創(chuàng)新

設(shè)計(jì)思考:

今年的微信紅包,新增了一個隨機(jī)的拜年紅包功能,可以隨機(jī)的派送紅包金額,并且在紅包的封面上可以長按,說出你想跟對方說的寄語,這個小小功能的精進(jìn),讓發(fā)紅包這個事情也變得更加有溫度。

微信紅包,還有一個新的創(chuàng)新點(diǎn),小小的紅包封面變成了產(chǎn)品的宣傳欄,比方說廣汽埃安的這個紅包封面,它既是拜年的寄語欄,又是絕佳的產(chǎn)品宣傳欄,配合動效,特別的酷。

2、百度地圖的微創(chuàng)新

設(shè)計(jì)思考:

百度地圖在這個春節(jié)心系百姓的民生問題,知道人們在這個節(jié)日有旅游、探親、出行的需求。

百度地圖開發(fā)了人口遷徙監(jiān)測功能、交通擁堵實(shí)時監(jiān)控功能,讓人們在出行時避開高峰路段,以及人口扎堆的旅游景點(diǎn)。

更有后方快車通過的提醒功能,當(dāng)后方來了一輛很快的車時,百度地圖也會進(jìn)行語音播報(bào),提醒車主這時不能隨便變道。

當(dāng)自己體驗(yàn)到這個功能的時候,感覺到這不僅僅是簡單的功能了,更是一份對用戶的愛,以及對生命的敬畏。

3、滿足拜年需求的產(chǎn)品功能創(chuàng)新

設(shè)計(jì)思考:

過年期間,是重溫感情的好機(jī)會,朋友間彼此的問候還是很有必要的,那么如何問候,是簡單的文字,還是用更有創(chuàng)意的視頻畫面去表達(dá)呢?

發(fā)現(xiàn)我們考慮的,很多產(chǎn)品都已經(jīng)幫我們想好了,比方說訊飛智作、剪映就推出了很多拜年視頻的模板供用戶自己去選擇加工使用。

很大程度提升了用戶制作視頻的效率,也很大程度提升了產(chǎn)品的粘性,為用戶多考慮一點(diǎn),用戶對產(chǎn)品的依賴也會更多一點(diǎn)。

四、社交互動機(jī)會點(diǎn)

1、支付寶的社交互動

設(shè)計(jì)思考:

發(fā)現(xiàn)支付寶在與用戶社交互動這塊做的非常的好,每逢大的節(jié)日都會有與大眾互動的運(yùn)營活動。

比方說元宵節(jié)的點(diǎn)福卡活動,萌萌的元宵,再配合微動效,以及引導(dǎo)用戶去點(diǎn)擊的手勢動效,無不是在號召用戶參與進(jìn)來。

支付寶的五福活動,很有意思,入口的左右兩邊放置一個帥哥和靚妹在接紅包,畫面很有互動感,歡樂性十足,讓人也忍不住去參與集??ǖ幕顒印?/p>

五、營銷機(jī)會點(diǎn)

春節(jié)是消費(fèi)高峰期,人們有購置年貨、禮品等需求,此時也是各大品牌搞營銷活動的好機(jī)會。

1、體驗(yàn)的營銷案列組一

設(shè)計(jì)思考:

  1. 蘇寧易購,在元宵節(jié)推出家電換新補(bǔ)貼20%的政策,滿足了很多人購置新年物品的需求,一定程度上促進(jìn)產(chǎn)品的轉(zhuǎn)化。
  2. 有道和WPS在春節(jié)推出聯(lián)合會員,且只有4折,極大的刺激了用戶的復(fù)購,以及新用戶的購買。
  3. 字由也緊跟節(jié)日步伐,在這個特殊的節(jié)日展開了“阿里漢儀順利熱土體”的公益發(fā)售,促進(jìn)了字體的發(fā)售,就連我這個平時很少購買字體的人來說,也順利下單了,來支持這個公益字體的發(fā)售,可以商用,卻只要59.9就能終身商業(yè)使用,誰人不心動,字體又這么好看。
  4. 農(nóng)業(yè)銀行在這個春節(jié)期間推出鄉(xiāng)村農(nóng)產(chǎn)品的售賣活動,價(jià)格實(shí)惠,同時又帶著助農(nóng)的性質(zhì),我相信一定會帶來一波不錯的銷量。
  5. 長沙銀行也積極推出低利率的貸款活動,吸引人們?nèi)ベJ款。

2、體驗(yàn)的營銷案列組二

設(shè)計(jì)思考:

酷我音樂在過年期間,把皮膚設(shè)計(jì)當(dāng)成了一種增加會員的刺激手段,一旦成為會員就能享受跟普通用戶不一樣的頭像裝飾。

連音樂播放頁的皮膚也會有更多選擇,可以選擇年味十足的播放頁,這讓成為會員的人有一種偏愛的感覺,很不錯的促銷手段。

產(chǎn)品既能賺到錢,又能滿足一些用戶的需求,多好的共贏方式,擁有著健康的成長生態(tài)。

六、阿里春節(jié)設(shè)計(jì)趨勢報(bào)告

在阿里UCAN年度設(shè)計(jì)趨勢報(bào)告中,著重強(qiáng)調(diào)了設(shè)計(jì)在商業(yè)場景里對用戶行為的關(guān)鍵影響。在春節(jié)這一特殊時期,流量高峰帶來海量用戶,此時設(shè)計(jì)的價(jià)值尤為凸顯。

報(bào)告指出,隨著技術(shù)的發(fā)展,設(shè)計(jì)已從單純的視覺美化,轉(zhuǎn)變?yōu)樘嵘脩趔w驗(yàn)和驅(qū)動商業(yè)增長的核心力量。

以春節(jié)紅包設(shè)計(jì)為例,具備按鈕動效的設(shè)計(jì)能極大吸引用戶注意力。從心理學(xué)角度來看,動態(tài)元素更容易刺激用戶的視覺神經(jīng),引發(fā)他們的好奇心和探索欲。

這與UCAN報(bào)告中提到的利用動態(tài)設(shè)計(jì)增強(qiáng)用戶交互體驗(yàn)的理念高度契合。數(shù)據(jù)顯示,這種設(shè)計(jì)使紅包打開率提高了30%,直觀地體現(xiàn)了優(yōu)秀設(shè)計(jì)在春節(jié)流量高峰下,對提升用戶參與度的顯著效果。

在電商頁面設(shè)計(jì)方面,UCAN報(bào)告強(qiáng)調(diào)簡潔直觀且富有創(chuàng)意的界面設(shè)計(jì),能有效引導(dǎo)用戶行為。

春節(jié)期間,電商平臺流量劇增,那些依據(jù)這一理念設(shè)計(jì)的頁面,通過合理布局商品展示、運(yùn)用鮮明的春節(jié)色彩元素,以及提供便捷的購物流程,成功吸引用戶點(diǎn)擊,提升了商品點(diǎn)擊率和購買轉(zhuǎn)化率 。

這不僅印證了報(bào)告中關(guān)于設(shè)計(jì)要貼合用戶心理和行為習(xí)慣的要點(diǎn),也再次證明了在流量高峰時,優(yōu)秀設(shè)計(jì)對商業(yè)轉(zhuǎn)化的巨大推動作用。

七、騰訊春節(jié)趨勢報(bào)告

微信團(tuán)隊(duì)發(fā)布《微信里的賽博年味兒》報(bào)告顯示,自制紅包封面玩法流行,春節(jié)期間微信里誕生了1億+款用戶創(chuàng)作紅包封面,約3.9億人收到此類自制封面紅包。

微信“送禮物”功能中,書籍品類送禮訂單量環(huán)比增長10000%+,收到禮物數(shù)目最多的省份前三甲是廣東省、山東省、浙江省。

看到這份趨勢報(bào)告,我驚呆了,挖掘一個符合用戶需求的產(chǎn)品功能,能帶動海量用戶的黏性和活躍,不得不說,微信自制紅包的這個功能開發(fā)的太好了。

總結(jié)

作為設(shè)計(jì)師,以前只在意產(chǎn)品的視覺和皮膚,沒有站在一個多維的角度去看待一件事情以及背后的邏輯,發(fā)現(xiàn)寫作讓我思維更開闊,視角更全面,想事情想的更清楚,看問題看的更明白,感謝這一年來自己筆耕不輟,一直在精進(jìn)的路上。

作者:姝斐suphie,公眾號:姝斐

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

題圖來自作者提供

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

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

日歷

鏈接

個人資料

存檔