首頁

如何使用色彩可視化出行耗時(shí)

資深UI設(shè)計(jì)者

比對(duì)出行時(shí)長(zhǎng)

每天,世界上有40億人在城市中穿行,這個(gè)不斷增長(zhǎng)變化的群體占據(jù)了世界人口的一半還多。了解人們?nèi)绾纬鲂幸约俺鲂械难葑儗?duì)于改善我們的城市、環(huán)境和數(shù)十億人的生活至關(guān)重要。我們創(chuàng)建了 Uber Movement,來幫助大家增進(jìn)理解。

視頻地址:https://youtu.be/bszvEIMVsIc (需翻墻)

目前,Uber已在全球700多個(gè)城市提供服務(wù),所有出行數(shù)據(jù)不僅能幫助我們提高服務(wù)質(zhì)量,也有可能幫助到城市規(guī)劃師,以及那些渴望提高城市建設(shè)水平的人。Uber Movement允許用戶以多種方式查看數(shù)據(jù):用戶可以查看某個(gè)日期某次出行的平均耗時(shí),也可以查看某個(gè)區(qū)域不同日期范圍內(nèi)的平均耗時(shí),或者可以對(duì)比同一個(gè)區(qū)域不同的兩個(gè)行程的耗時(shí)。

圖1:從華盛頓市中心出發(fā)到各地所需的出行時(shí)長(zhǎng)

圖1中的截圖展現(xiàn)了從華盛頓市中心到達(dá)城市其他區(qū)域的平均耗時(shí)(在2016年3月16日鐵路運(yùn)輸因維修而暫停服務(wù))。截圖a中顯示了晚高峰的耗時(shí)情況,截圖b顯示了兩周前鐵路運(yùn)輸未中止的耗時(shí)情況,截圖c則比對(duì)了兩個(gè)時(shí)段下的數(shù)據(jù),指示出鐵路服務(wù)暫停對(duì)路面交通帶來的嚴(yán)重影響。如圖示,在上述情況下,晚高峰時(shí)段從1400 K St NE區(qū)到1500 Kearny St NE區(qū)的平均出行時(shí)間增加了67.8%。

對(duì)于需考慮在哪里新增公交線路的公共交通機(jī)構(gòu),以及那些判別什么時(shí)候主干道需要進(jìn)行道路養(yǎng)護(hù)的城市機(jī)構(gòu),都能夠通過這些數(shù)據(jù)了解到什么時(shí)候減少車道會(huì)對(duì)交通的影響最小,應(yīng)向駕駛者提供哪些替代路線。

 

眼見為實(shí)

為了讓這些數(shù)據(jù)有價(jià)值,必須讓它們有使用價(jià)值。這就需要數(shù)據(jù)可視化的加持了。作為負(fù)責(zé) Uber Movement 的產(chǎn)品設(shè)計(jì)師,我需要確保我們分享的數(shù)據(jù)是盡可能清晰易懂的。

我們遇到了一個(gè)有趣的問題:如何展示兩個(gè)不同卻又有關(guān)聯(lián)的可視化元素?!笗r(shí)長(zhǎng)熱力圖」展現(xiàn)了在一個(gè)特定的日期(例如,2016年1月11日星期一下午)下,從任一起始點(diǎn)到某個(gè)位置的耗時(shí)(以分鐘為單位);也可以是一個(gè)跨度長(zhǎng)達(dá)幾個(gè)月(例如,2016年3月至5月的工作日早晨)的平均耗時(shí)。這個(gè)熱力圖使用了相鄰色,基于相同的顏色來調(diào)整色調(diào)由亮至暗(如下圖1所示,淺藍(lán)色至深藍(lán)色)。

「比對(duì)熱力圖」能夠讓用戶對(duì)比相同路線不同時(shí)段下的平均耗時(shí)。這里需要凸顯信息的對(duì)比度,哪一個(gè)時(shí)段下的耗時(shí)更少,少多少?對(duì)于該熱力圖,我們使用了對(duì)比色(如圖2)來表現(xiàn)數(shù)據(jù)由0至兩極(快與慢)。如果差值為零,則表示兩種情況下的耗時(shí)相同。我們企圖通過兩個(gè)對(duì)比的顏色盡可能的凸顯差異。

我們的用戶會(huì)在這兩種熱力圖中連續(xù)反復(fù)切換,所以我們需要將這兩種模式從視覺上明確區(qū)分出來。

圖2:早期設(shè)計(jì)的5階色(左側(cè)單位為絕對(duì)耗時(shí),右側(cè)單位為相對(duì)耗時(shí)比)

在早期的設(shè)計(jì)中(如圖2),5階相鄰色(由淡綠色至藍(lán)色)被用來表現(xiàn)路程的絕對(duì)耗時(shí),而5階對(duì)比色(由綠至淡黃再到紅色)則用來表現(xiàn)兩種條件的對(duì)比。

初期嘗試使用五個(gè)顏色梯度,但在可用性測(cè)試中發(fā)現(xiàn)地圖的色彩辨識(shí)度低(見下圖3)。主要有以下幾個(gè)問題:

  • 我們通過顏色表現(xiàn)由A點(diǎn)至B點(diǎn)的路程耗時(shí),每一個(gè)目的地區(qū)域根據(jù)時(shí)間被賦予5階范圍中的一個(gè)顏色,并有20%的透明度,疊加在地圖上。這樣的設(shè)計(jì)呈現(xiàn)出由中心至外圍的漸變效果,區(qū)塊之間對(duì)比度較低,使它們看起來糊在一塊,讓色彩背后的數(shù)據(jù)以及地圖上的標(biāo)簽都不那么易讀。
  • 結(jié)果就是,5階色彩沒有足夠的對(duì)比度將中心至邊緣的區(qū)塊區(qū)分開來。
  • 另外,5階色彩不足以滿足不同城市,不同時(shí)間段耗時(shí)的有效展示。

顯而易見,可用性測(cè)試的參與者難以從地圖判斷出耗時(shí),特別是當(dāng)?shù)貓D縮放聚焦在市中心時(shí),也難以區(qū)分兩種模式(耗時(shí)熱力圖/對(duì)比熱力圖),見圖3。

圖3:西雅圖的出現(xiàn)時(shí)長(zhǎng)

圖3,以早期的設(shè)計(jì)效果(5階相鄰色)查看從西雅圖市中心至其他區(qū)域的平均耗時(shí),截圖a 展現(xiàn)了西雅圖所有區(qū)域的耗費(fèi)時(shí)長(zhǎng),顏色讓區(qū)塊看起來“糊在一塊兒”。截圖b則展現(xiàn)了縮放聚焦至市中心區(qū)域時(shí)的效果,難以區(qū)分不同區(qū)域。

 

設(shè)計(jì)探索

通過多步的探索實(shí)驗(yàn),我將這個(gè)復(fù)雜的設(shè)計(jì)難題拆解為幾個(gè)不同的小挑戰(zhàn),并驗(yàn)證不同的方案,最終獲得一個(gè)色彩系統(tǒng)達(dá)到易讀性最理想的熱圖效果。

1.通過相鄰色和對(duì)比色兩個(gè)樣本有效區(qū)分耗時(shí)熱力圖和對(duì)比熱力圖

由于同時(shí)應(yīng)用相鄰色與對(duì)比色,所用的配色就必須是“四色系”配色方案以明確區(qū)分。(譯注:tetradic color 的翻譯可能不合適,根據(jù)定義,其為一種大膽的配色方案,四種顏色對(duì)立均等地分布在色輪的四個(gè)方向上。)我使用了 Uber Movement 的品牌色(#2473BD)作為相鄰色的基準(zhǔn)色,然后使用 Paletton.com 列舉了幾組“四色系”配色方案,將四種顏色分配為兩對(duì)互補(bǔ)組合。

圖4:為實(shí)驗(yàn)準(zhǔn)備的色階方案

 

2.根據(jù)時(shí)長(zhǎng)間隔等比或是梯度增加色組的色彩階層數(shù)

早期設(shè)計(jì)從5階色彩范圍開始(如圖2、3),兩種模式的熱圖都產(chǎn)生了一種“糊在一塊兒”的漸變效果。我們希望這個(gè)系統(tǒng)可以滿足不同體量的城市,從市中心到外圍區(qū)域的平均耗時(shí)跨度從30分鐘到1.5小時(shí)不等。僅使用5種顏色來表現(xiàn)0至1.5小時(shí),顯然不足以讓用戶有效辯識(shí)地圖上的時(shí)間跨度。

我實(shí)驗(yàn)性地將色彩范圍的階層從5增加到9,11,13。時(shí)間間隔分別以等比增加與梯度增加羅列(梯度增加以30分鐘為總時(shí)長(zhǎng))。

表1:5、9、11、13色階方案(左側(cè)為等距增加,右側(cè)為非等距增加)

之所以選擇了梯度增加,是因?yàn)楦鶕?jù)我們與城市規(guī)劃者的溝通,了解到他們是基于「交通分析區(qū)(TAZ)」這種交通規(guī)劃模型來進(jìn)行分析的,它將每個(gè)區(qū)域以人口密度劃分。城市區(qū)域的人口密度相比郊區(qū)會(huì)高很多?;谑袇^(qū)人口密度高,在市區(qū)對(duì)交通狀況進(jìn)行定義時(shí),以每5分鐘為間隔相比在郊區(qū)更有效。

顏色組通過 Chroma.js顏色助手計(jì)算生成。通過單顏色的變體給予一種連續(xù)性(見圖5)。圖中左側(cè)(方案1)使用了單色系,右側(cè)(方案2)則通過不同色調(diào)的顏色組合增加色組內(nèi)的對(duì)比度。

圖5:用于實(shí)驗(yàn)的2個(gè)色階(左側(cè)為淡色系,右側(cè)為多色系)

 

3.嘗試通過提升對(duì)比度去除掉區(qū)間的漸變效果

我將不同的顏色方案放到測(cè)試環(huán)境中去看看實(shí)際效果。為了去除漸變效果,在不受時(shí)間值和透明度影響的情況下,使用了彩色比例尺上的離散色值(見圖6右側(cè)的效果)。這樣處在相同色彩尺度區(qū)間的區(qū)域看起來合并了,能夠很好地辨別出區(qū)域之間耗時(shí)的異同。

圖6:采用離散色值消除漸變色。(從左側(cè)變?yōu)橛覀?cè))

早期的配色方案是基于「耗時(shí)」調(diào)整的色值,并且使用了20%的透明度,由此顯示出一種「漸變效果」,導(dǎo)致鄰近區(qū)域過于相近,用戶難以根據(jù)顏色判斷數(shù)值差異。新的配色方案則取消了以上兩點(diǎn),這使得相同時(shí)間的區(qū)域合并,清晰的色帶使其更易讀。

我還開發(fā)了個(gè)程序用來計(jì)算鄰近色組的對(duì)比度(見下方表2),方案2配色中的9階色彩范圍表現(xiàn)出最佳的平均對(duì)比度,其次是11階??紤]到平均路程耗費(fèi)時(shí)長(zhǎng)在不同城市會(huì)有較大的差異,方案2中的11階色彩能提供最好的擴(kuò)展性與可讀性。與早期方案相比,新方案的對(duì)比度提高了30%。

從上面的圖表可以看到,方案2配色有更高的對(duì)比度。其中,顏色階次越少,對(duì)比度也越高。

 

4.在測(cè)試環(huán)境中對(duì)比顏色方案

基于以上的結(jié)果,我將方案1(單色系)排除了。我們將方案2放到測(cè)試環(huán)境中查看了兩種間隔取色策略的效果。(譯注:這里的兩種策略指的是上面圖表1呈現(xiàn)的兩種取色方案。一種是例如每10分鐘遞進(jìn)一個(gè)色階,等分;另一種則是會(huì)變化,例如前30分鐘每5分鐘遞進(jìn)一個(gè)色階,超過30分鐘則每10分鐘遞進(jìn)一個(gè)色階。

表2:鄰近色組的對(duì)比度計(jì)算

下圖7展示了波士頓城整體區(qū)域的熱圖效果,讓我們?cè)倏纯淳劢沟绞兄行牡男Ч绾巍?

圖7:波士頓城整體區(qū)域的熱圖效果

圖8更進(jìn)一步地確認(rèn)了「變化時(shí)間間隔取色」提供了更高的對(duì)比度。

圖8:「變化時(shí)間間隔取色」后的效果

 

5.對(duì)配色色階進(jìn)行微調(diào)

在這一系列的實(shí)驗(yàn)之后,才明確了這個(gè)方案(方案2中的11階色彩)屬最佳效果。能夠很好地滿足視圖中大跨度時(shí)間差的呈現(xiàn)。不論是城市的整體縱覽或是聚焦在市中心區(qū)域,都能提供最佳的對(duì)比度。

我們的內(nèi)部團(tuán)隊(duì)對(duì)實(shí)驗(yàn)進(jìn)行了評(píng)審和測(cè)試,并最終敲定了色彩范圍(見圖表1),結(jié)果將在近期發(fā)布。

隨著越來越多的用戶在 Uber Movement 中探索他們的城市,我們也在不斷的學(xué)習(xí)與迭代,讓數(shù)據(jù)更有效地為大家所用。

 

因效用而美

數(shù)據(jù)可視化的最終目的還是信息溝通。當(dāng)我們?cè)噲D清晰地傳達(dá)事實(shí)時(shí),創(chuàng)作物的美學(xué)不是附屬品,而是一種內(nèi)在價(jià)值。美感不只是粉飾。當(dāng)數(shù)據(jù)可視化被合理地創(chuàng)造時(shí),它因效用而美。

我們以一種微小的方式,通過不斷試錯(cuò)與探索,試圖讓人們以一種全新的視角看看這個(gè)世界。它是有效的,也即是美的。



文章來源:UXRen    作者:Dawei Huang


藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

資深UI設(shè)計(jì)者

新版本的改動(dòng)介紹

在9月底雙十一臨近的關(guān)口上,淘寶上線了 9.13 新版本,對(duì)首頁做出了巨大的改版,堪稱這 5 年來力度最大的改版幅度。

我們先來簡(jiǎn)單看看新版本有哪些重要的改進(jìn):

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

  • 去掉了分類分頁器
  • 頂部輪播圖下移,改成豎狀的
  • 減少瓷片區(qū)的數(shù)量,進(jìn)行卡片化分離
  • 刪除推薦商品瀑布流的分頁器
  • 推薦商品卡片的類型調(diào)整
  • 商品卡片不再直接跳轉(zhuǎn)詳情頁

如果只是通過視覺角度上來看,新改版必然是比過去的老版本 “清爽” 得多,畢竟精簡(jiǎn)掉了大量的內(nèi)容。尤其是兩個(gè)分頁器組件,除了占空間外,實(shí)在找不出什么要去點(diǎn)擊的必要。

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

輪播圖從頂部撤離和瓷片區(qū)進(jìn)行合并,是一個(gè)比較有趣的設(shè)定,不僅廣告圖的面積減少,而且營(yíng)銷推薦位全部集中到一起,使得模塊的劃分更集中。

現(xiàn)在的首頁從上到下的結(jié)構(gòu)即:

  • 搜索欄
  • 業(yè)務(wù)入口
  • 營(yíng)銷模塊
  • 推薦瀑布流

如此化繁為簡(jiǎn)的改造發(fā)生在淘寶APP身上,就像看一出浪子回頭的感人戲碼…

但不要這么容易被結(jié)構(gòu)上的改造欺騙,改版后的淘寶降低了模塊的數(shù)量,但只是把減少的元素在其它地方呈現(xiàn)。即這次改版的重點(diǎn)——推薦瀑布流。

細(xì)心的同學(xué)應(yīng)該都發(fā)現(xiàn)了,瀑布流卡片已經(jīng)出現(xiàn)在了第一屏的底部,即使不用上滾也可以看見卡片的頭部了。

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

并且瓷片區(qū)也采用了瀑布流式的雙列布局,通過瓷片區(qū)白色背景的襯托,這半截露出的圖片反而顯得越發(fā)顯眼,越能吸引我們控制不住自己去上滾一下康康推薦了什么東西。

當(dāng)我們開始瀏覽瀑布流的推薦內(nèi)容以后,淘寶夾帶的大量私貨就進(jìn)來了,我們來統(tǒng)計(jì)下總共有哪些類型:

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

實(shí)際的卡片類型,可能還不止我羅列出來的這些。這個(gè)本來是用來推薦商品的列表,已經(jīng)演化成一個(gè)聚合了算法推薦內(nèi)容的 “巴別塔”。

而其中最重要的商品卡片,甚至也不能直接點(diǎn)擊就跳轉(zhuǎn)到商品詳情頁中,而是添加了一個(gè)中轉(zhuǎn)頁面,進(jìn)一步根據(jù)算法推薦相關(guān)商品,能直接跳轉(zhuǎn)進(jìn)詳情頁的少數(shù)商品卡片,應(yīng)該是有做廣告投放的定向?qū)Я鳌?/span>

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

這樣改版后的目的,不難分析出目的是為了進(jìn)一步增加用戶 “逛淘寶” 的幾率和時(shí)間,讓本來打開應(yīng)用就搜索—購買—關(guān)閉一條龍的用戶,也會(huì)不自覺陷入信息流的海洋中去。

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

可能很多人會(huì)覺得,難道不應(yīng)該讓流程更短,購買步驟更容易,才符合優(yōu)秀交互設(shè)計(jì)的定義嘛?

下面我們就做一些具體的分析吧!

關(guān)于新設(shè)計(jì)的思考

對(duì)于一個(gè)商業(yè)應(yīng)用來講,交互不是為了無條件迎合用戶的,雖然無論是 UX 還是 UED 的概念里,都愛強(qiáng)調(diào)用戶至上論,體驗(yàn)為王之類的。但是…

1. 商業(yè)訴求 > 用戶體驗(yàn)

只有在用戶量高速擴(kuò)張,商業(yè)目標(biāo)是需要用戶獲得良好體驗(yàn)、口碑的情況下,用戶體驗(yàn)的重要性才和大家在童話里了解的一致。更多的時(shí)候,是產(chǎn)品想喂用戶吃金坷垃時(shí),我們要想辦法讓用戶心甘情愿的吃下去并快速成癮。

淘寶通過不同的方式獲取了大量用戶的數(shù)據(jù),資料、喜好、購物傾向等等,在龐大的商品數(shù)支撐下,可以通過算法給你推薦無窮無盡的商品,總有你會(huì)感興趣的部分。

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

只要增加了信息流的曝光次數(shù),不要讓用戶那么快完事,過早的陷入剁手的悔恨,抽起事后煙……

那么他們就會(huì)被這種簡(jiǎn)單的產(chǎn)品形式俘獲,做多巴胺的奴隸。抖音是這樣的、微博是這樣的、知乎也是這樣的。為什么一個(gè)購物應(yīng)用不想著最快的方式促成交易,而是讓用戶在里面繞圈子,原因也只能有一個(gè) —— 流量。

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

大家都知道雙十一將近,各家電商平臺(tái)作妖時(shí)間又到了。但這兩年的電商行業(yè)已經(jīng)發(fā)生了巨大的改變,那就是直播、短視頻帶貨形式帶來的變局。

這兩年,以抖音、快手為代表,興起的短視頻、直播帶貨風(fēng)潮,已經(jīng)成社會(huì)的熱門話題,薇婭沒事就在綜藝?yán)锖蛺鄱箓円黄饚ж?,李佳琦身體有恙上微博熱搜,羅永浩靠帶貨上演 “真還傳”……

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

本來,購物方式的多元化,對(duì)于大型平臺(tái)來講是非常有幫助的。無論是十幾年前就開始出現(xiàn)的社會(huì)化電商平臺(tái)、返利網(wǎng)、或值得買,都可以促進(jìn)電商行業(yè)的繁榮,促進(jìn)平臺(tái)和整個(gè)產(chǎn)業(yè)鏈的發(fā)展。

但是,直播、短視頻的興起和過去的這些行業(yè)全部不一樣,它們本身并不依附于電商平臺(tái),但卻擁有海量的流量和用戶基數(shù)。而當(dāng)這樣的流量引擎在變現(xiàn)問題聚焦在電商時(shí),直播和短視頻頭部平臺(tái)就有了和電商平臺(tái)們叫板的資格。

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

2. 直播電商規(guī)模,不算短視頻

主流的數(shù)據(jù)預(yù)測(cè)報(bào)告中,20年的直播電商規(guī)模都會(huì)達(dá)到萬億級(jí)別,直播電商的高速發(fā)展是沒法阻擋的大趨勢(shì),它的發(fā)展會(huì)搶奪存量用戶的注意力,有大量的用戶購物逛商品,不在淘寶APP內(nèi),而是通過其它平臺(tái)轉(zhuǎn)化,再進(jìn)來下單,或干脆在外部下單,這是絕對(duì)不能被容忍的。

所以淘寶不僅要緊跟趨勢(shì),也要對(duì)抗外部的競(jìng)爭(zhēng),在今年加大對(duì)短視頻、直播的投入,也就順理成章。根據(jù)淘寶研究院的數(shù)據(jù),過去三年直播帶貨的規(guī)模增長(zhǎng)在 150% 以上,是全球增長(zhǎng)最快的電商模式。

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

同時(shí),雙十一的直播觀看用戶 18 年為 1793 萬人次,19 年為 4133 萬人次,同比增長(zhǎng) 131%,對(duì)比 618 數(shù)據(jù),毫無疑問今年肯定也會(huì)保持的增長(zhǎng)。

淘寶App五年來最大力度改版,從設(shè)計(jì)師角度為你詳細(xì)分析!

并且前幾年淘寶雙十一喜歡玩的病毒式推廣活動(dòng)成效已經(jīng)越來越差,再讓用戶去集福,首頁上增加一大堆煙花繚亂的游戲和活動(dòng),已經(jīng)不能再幫助雙十一獲得快速的增長(zhǎng)了。

所以今年,淘寶在國(guó)慶前,上架了首頁新版本的設(shè)計(jì),在應(yīng)用形態(tài)上押寶信息流的算法推薦機(jī)制。不僅要開始改變用戶使用淘寶的習(xí)慣,也在為后續(xù)的雙十一做預(yù)熱,相信屆時(shí)會(huì)有大量的直播內(nèi)容露出和短視頻推薦。

至于還有什么新花樣或殺手锏還沒秀出來,我們就拭目以待吧……


文章來源:優(yōu)設(shè)    作者:超人的電話亭


藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


APP設(shè)計(jì)實(shí)例解析,深色模式為什么突然就火了?

ui設(shè)計(jì)分享達(dá)人

蘋果在2019年6月發(fā)布的iOS13中增加了“黑暗模式”,用戶打開“黑暗模式”后,應(yīng)用界面將會(huì)變?yōu)樯钌?,隨后Google Android 10的發(fā)布同樣搭載“黑暗模式”。為了適配系統(tǒng),不少APP紛紛推出了深色模式。

使用OLED屏幕的設(shè)備,在純黑色下可以有效降低耗能,進(jìn)一步延長(zhǎng)續(xù)航時(shí)間。除此之外,深色模式還可以有效解決OLED屏燒屏、費(fèi)眼的問題。小摹對(duì)幾款常用APP的深色模式進(jìn)行了體驗(yàn),并為大家分享我的體驗(yàn)感受。從這些案例中,或許我們可以找到深色模式流行的原因。


微 信

深色模式是一種可以降低視覺疲勞且有助于用戶專注的全新外觀。與傳統(tǒng)夜間模式最大的區(qū)別是,深色模式不僅保證了弱光環(huán)境下的體驗(yàn),在強(qiáng)光下仍具有可讀性。

雖然深色模式也被叫做暗黑模式,但并不代表要將底色變?yōu)榧兒?。如果使?00%的純黑底色,長(zhǎng)時(shí)間閱讀時(shí),反而會(huì)造成眼睛疲勞。微信的深色模式里,聊天背景及主頁面底色采用的就不是純黑,而是深灰色。

此外,純黑和純白的高對(duì)比度也會(huì)造成視覺疲勞,因此微信的深色模式中,使用了淺灰色作為字體顏色,既能保持清晰顯示,又降低了對(duì)比度,減輕了用戶的閱讀負(fù)擔(dān)。如果設(shè)置了聊天背景,聊天背景圖片也會(huì)自動(dòng)調(diào)暗,便于閱讀。

雖然整體色彩加深,但微信在設(shè)計(jì)時(shí)仍保持著清晰的層次。比如置頂聊天窗口的灰色會(huì)比其他窗口稍淺,聊天消息的標(biāo)題和摘要也采用了明度不同的淺灰色來區(qū)分層級(jí)。除此之外,微信的彩色線型圖標(biāo)在黑色背景上也變得更具科技感,顏值提升了不少。

微信的深色模式除了可以幫助用戶緩解夜間視力疲勞外,在白天使用也幾乎沒有障礙,總體來說,體驗(yàn)感覺較好。


Q Q

如果說微信的深色模式更加注重顏值,那么騰訊旗下的另一款社交工具QQ則更加注重用戶的深夜閱讀體驗(yàn)。

首先,微信在切換深色模式時(shí),需要重啟軟件后才能生效。QQ在切換夜間模式時(shí),則采用了一個(gè)平滑的漸變過渡,讓用戶可以快速適應(yīng)場(chǎng)景切換。其次,為了減少夜間光線對(duì)人眼的刺激,QQ降低了信息與背景的對(duì)比度,對(duì)用戶頭像等圖片增加了遮罩,使其在弱光環(huán)境中看起來更加柔和。

當(dāng)用戶開啟夜間模式時(shí),還會(huì)有一個(gè)設(shè)計(jì)彩蛋:部分圖標(biāo)會(huì)根據(jù)模式切換而改變。如消息圖標(biāo)會(huì)從笑臉切換為休息的狀態(tài),這種具有趣味性的設(shè)計(jì),也會(huì)拉近用戶與產(chǎn)品之間的距離。


豆 瓣

普通模式下的豆瓣APP背景色為純白色,白天看偶爾都覺得有些刺眼,更不用說睡前必刷豆瓣的用戶有多煎熬。在被用戶罵了一輪又一輪之后,豆瓣APP終于也推出了夜間模式。

豆瓣的夜間模式和微信一樣,同樣保留了五顏六色的圖標(biāo)。同時(shí),豆瓣在設(shè)計(jì)時(shí)始終保證內(nèi)容有良好的對(duì)比度和清晰的視覺層級(jí),保證了信息結(jié)構(gòu)的準(zhǔn)確傳達(dá)。

在配色方面,為了避免“死黑”讓整個(gè)界面太過死板,豆瓣在黑色中還混入了藍(lán)紫色,讓背景色看上去更加通透。底部導(dǎo)航等主要按鈕則使用了豆瓣的主色調(diào)綠色,在夜間模式下既能清晰展示,又不會(huì)顯得過于刺眼,同時(shí)也保證了在強(qiáng)光模式下可以正常瀏覽。


知 乎

另一款社區(qū)APP知乎和豆瓣存在同樣的問題。知乎在設(shè)計(jì)夜間模式時(shí),知乎采用了主色調(diào)藍(lán)色+深灰色的搭配,深藍(lán)和灰色作為背景,展示出的效果既有強(qiáng)烈的對(duì)比,又?jǐn)[脫了深色的壓抑感。

與豆瓣不同,知乎的文本顏色選擇了對(duì)比度更低的灰色,通過字重進(jìn)行區(qū)分。雖然這樣會(huì)讓整體頁面看起來比較和諧,但內(nèi)容變得不夠突出,無法在最短時(shí)間看清標(biāo)題,對(duì)于一個(gè)以內(nèi)容為主的社區(qū)來說,無疑會(huì)給用戶帶來不太好的體驗(yàn)。

知乎在設(shè)計(jì)夜間模式時(shí)目標(biāo)應(yīng)該很明確,即只考慮用戶在夜間的使用,因此整體色調(diào)都很暗,在強(qiáng)光環(huán)境下無法正常瀏覽。


bilibili動(dòng)畫

B站剛推出深色模式時(shí)收到了許多批評(píng),字體和背景色對(duì)比不強(qiáng),視頻封面仿佛蒙了一層霧,一刀切的暗化處理,導(dǎo)致用戶瀏覽體驗(yàn)極差。

在最近一次更新中,B站終于對(duì)深色模式進(jìn)行了優(yōu)化,適度提亮了視頻封面和圖標(biāo)的亮度,將多彩型圖標(biāo)調(diào)整為了單線型圖標(biāo),既統(tǒng)一了畫面風(fēng)格,又提升了界面閱讀體驗(yàn)。

設(shè)計(jì)深色模式時(shí),必須注意各頁面的配色及對(duì)比度都要盡可能地統(tǒng)一。在深色模式下點(diǎn)開B站創(chuàng)作中心或推薦服務(wù)中的版塊時(shí),加載畫面仍然是白色,突然出現(xiàn)的強(qiáng)光無疑會(huì)對(duì)眼睛造成刺激,對(duì)于用戶來說體驗(yàn)感也極差。


百度網(wǎng)盤

高飽和度的色彩會(huì)在深色背景上產(chǎn)生炫光的視覺效果,引發(fā)視覺疲勞。百度網(wǎng)盤的深色模式下,背景接近全黑,圖標(biāo)卻沒有太大的調(diào)整,給用戶帶來的閱讀體驗(yàn)并不好。

同樣,由于背景顏色太深,導(dǎo)致百度網(wǎng)盤的文本和背景對(duì)比度太大,也存在難以閱讀的情況,對(duì)于誦讀困難癥患者來說,在閱讀時(shí)會(huì)感覺文字在旋轉(zhuǎn)、模糊。

在設(shè)計(jì)深色模式時(shí),除了背景顏色盡量使用深灰色以外,還需要確保絕大部分區(qū)域保持深色,盡可能使用數(shù)量有限的色彩。把握好對(duì)比度和飽和度,才能設(shè)計(jì)出舒適的深色模式。

綜上所述,合理使用深色模式,可以降低屏幕亮度,不僅可以減少耗電量,還能減小對(duì)自己或他人眼睛的刺激。除此之外,深色模式對(duì)背景色、文字以及系統(tǒng)圖標(biāo)的顏色都進(jìn)行了優(yōu)化處理,可以提升閱讀舒適度。對(duì)于喜歡深色或黑色系的朋友來說,深色模式更是一種不同于普通模式的全新體驗(yàn)。


除了APP,不少生產(chǎn)力工具也都采用了深色界面,比如PS、摹客等。以摹客為例,用戶在進(jìn)行設(shè)計(jì)時(shí),深色界面不僅僅能降低眼睛疲勞度,還能突出你的設(shè)計(jì)內(nèi)容,打造沉浸式的設(shè)計(jì)體驗(yàn)。


隨著蘋果“黑色模式”的推出,深色模式逐漸成為APP設(shè)計(jì)的流行趨勢(shì)。作為設(shè)計(jì)師,也一定要掌握APP深色模式的設(shè)計(jì)技巧。從上述APP設(shè)計(jì)案例中,我為大家總結(jié)了以下幾點(diǎn)建議以作參考:

1.避免使用純黑色;

2.避免使用高飽和度的顏色;

3.文本顏色選用高亮色,但不宜使用純白;

4.做好情感化設(shè)計(jì);

5.注意結(jié)構(gòu)和層次感;

6.允許用戶自由切換深色模式和普通模式。


文章來源:UI中國(guó)  作者:摹客產(chǎn)品協(xié)作設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

合理打造“稀缺性”,提升你的設(shè)計(jì)轉(zhuǎn)化率

資深UI設(shè)計(jì)者


摘要:本文原標(biāo)題為《用戶體驗(yàn)中的稀缺性:心理偏見成為常態(tài)》,文章對(duì)當(dāng)前設(shè)計(jì)稀缺性的情況進(jìn)行了簡(jiǎn)要分析,并給出了一些需要牢記的小貼士,閱讀預(yù)計(jì)需要7分鐘。

 

你知道稀缺性是咋回事嗎?

我隨意觀看了Unbox Therapy對(duì)這個(gè)杯子的某個(gè)測(cè)評(píng)視頻,很顯然這個(gè)杯子是不會(huì)倒的。我一直在笑,但在視頻的最后,我也很好奇人們對(duì)杯子的需求是什么。

在亞馬遜上,它以14.99 美元的價(jià)格限時(shí)出售,原價(jià)為24.99美元。不銹鋼版本僅剩下3個(gè)庫存。我喜歡不銹鋼的杯子,而且這是一個(gè)減價(jià)品,而且它很快就會(huì)售空。如果不買,我就要用之前會(huì)倒的杯子喝咖啡了。錯(cuò)過它的話太可惜了。

是的,多數(shù)時(shí)候這個(gè)杯子不會(huì)倒

 

稀缺性讓事物變得有吸引力

稀缺性是一種心理偏見,它讓我們覺得稀缺的東西比富足的東西擁有更高的價(jià)值。一般來說,我們更偏愛那些更難得到的東西。

 

稀缺性已成為常態(tài)

和大多數(shù)現(xiàn)象一樣,稀缺性從線下興起。昂貴的餐廳用大盤子裝小份食物,以突出食材的稀缺性;名牌大學(xué)限制招生名額,以保持排他性。

這看起來很貴

但隨著科技企業(yè)變得更加成熟,數(shù)字產(chǎn)品變得更加精細(xì),稀缺性很快走向了線上,現(xiàn)在稀缺性已成為增加吸引力最流行的方法之一。

目前人們已經(jīng)習(xí)慣了在線上瀏覽時(shí)看到并期待某種形式的稀缺性,運(yùn)用稀缺性已經(jīng)不再具有競(jìng)爭(zhēng)優(yōu)勢(shì),而是為滿足用戶需求而做的最基本的起點(diǎn)。

 

稀缺性融合了多種偏見

稀缺性變得流行起來,因?yàn)樗浅S行Р⑾鄬?duì)容易實(shí)現(xiàn)。而它如此富有成效的原因在于它結(jié)合了多種偏見:

1. 損失厭惡(Loss Aversion)

如果我們不去購買某個(gè)稀缺性產(chǎn)品,這基本上意味著短期內(nèi)我們將失去這個(gè)產(chǎn)品本身,而從長(zhǎng)期來看,我們也將失去可以選擇它的自由。加倍的損失=加倍的痛苦。

2. 社會(huì)認(rèn)同(social proof)

通常,當(dāng)一款產(chǎn)品需求變高時(shí),這款產(chǎn)品會(huì)變得稀缺。一旦出現(xiàn)這種情況,就意味著有其他人在過去購買了這款產(chǎn)品,所以它一定是有價(jià)值的,我們也該抓住這個(gè)機(jī)會(huì)。

3. 預(yù)期后悔(Anticipated regret)

當(dāng)面臨一個(gè)決定時(shí),我們不僅會(huì)預(yù)期會(huì)發(fā)生的事件,還會(huì)預(yù)期我們可能會(huì)經(jīng)歷的與之相關(guān)的后悔。決定現(xiàn)在就采取行動(dòng)是我們?cè)噲D消除這種可能性的努力。

 

 

稀缺性會(huì)以不同形式出現(xiàn)

盡管稀缺性可以被應(yīng)用于品質(zhì)、體驗(yàn)等不可量化的特征,但當(dāng)評(píng)估對(duì)象是可量化的物品、地點(diǎn)等時(shí),稀缺性的應(yīng)用效果會(huì)更加出色。這就是像亞馬遜和Booking.com這樣的公司接受它并廣泛使用它的原因。

基于這些可量化的對(duì)象,稀缺性有三種主要的形式:

1. 限時(shí)稀缺(Time-limited scarcity)

當(dāng)對(duì)時(shí)間進(jìn)行限制時(shí),就會(huì)產(chǎn)生一個(gè)截止時(shí)間,讓人們?cè)诮刂箷r(shí)間之前采取行動(dòng)。當(dāng)看到截止時(shí)間時(shí),人們不確定之后是否還能獲得這個(gè)產(chǎn)品,除非他們現(xiàn)在就采取行動(dòng),但這樣就增加了壓力,從用戶體驗(yàn)的角度來看,反而缺乏了同理心。

舉例如下:

  • 亞馬遜的限時(shí)秒殺活動(dòng):好
    限時(shí)秒殺活動(dòng)僅持續(xù)幾個(gè)小時(shí),頁面上會(huì)顯示截止時(shí)間。頁面還會(huì)顯示已購者占總限購人數(shù)的百分比來凸顯緊迫感。
  • 在Interaction Design Foundation上的課程:機(jī)智
    在報(bào)名截止前顯示倒計(jì)時(shí)。已報(bào)滿的課程仍然會(huì)顯示出來,讓人們知道錯(cuò)過機(jī)會(huì)是什么感覺。
  • 在eBay上購買東西:糟糕
    eBay對(duì)限時(shí)產(chǎn)品會(huì)用一個(gè)紅色的圖標(biāo)和一個(gè)模糊的“即將售罄” (Almost gone)的標(biāo)簽。不顯示下架時(shí)間的做法考慮不周,而且是可以被商家操縱的。
  • 在Airbnb上找房源:一般
    Airbnb通過顯示剩余房源比例來表現(xiàn)供給的有限性,并通過一個(gè)“難得發(fā)現(xiàn)(Rare Find)”的標(biāo)簽來讓用戶對(duì)他們的搜索結(jié)果感到幸運(yùn)。

2. 限量稀缺(Quantity-limited scarcity)

有限或稀少的產(chǎn)品供給會(huì)讓人們覺得這威脅到了他們選擇的自由,進(jìn)而激發(fā)他們做出反應(yīng),來對(duì)抗這種威脅并維持他們對(duì)資源的獲得權(quán)。

限量稀缺被認(rèn)為比限時(shí)稀缺更有效,因?yàn)楣┙o的結(jié)束是不可預(yù)測(cè)的,完全取決于需求而不是時(shí)間。

舉例:

  • 在Booking.com上搜索酒店:印象深刻
    Booking.com在運(yùn)用稀缺性上跑得飛快,可謂是行業(yè)里對(duì)博爾特,他們的成功在很大程度上都要?dú)w功于限量稀缺。網(wǎng)頁不僅顯示剩余房間的數(shù)量,還會(huì)顯示一大堆的標(biāo)簽和文本,讓你感覺自己下單78物超所值。Booking.com很聰明的運(yùn)用了自己擁有的大量數(shù)據(jù),網(wǎng)頁提供的信息量雖然很大,但都很有用。
  • 在Ryan Air上預(yù)定機(jī)票:好
    Ryan Air利用低價(jià)機(jī)票優(yōu)先出售這一事實(shí),以強(qiáng)調(diào)低價(jià)機(jī)票僅剩的數(shù)量。
  • 在Selfridges上購買衣服:巧妙
    Selfridges 網(wǎng)站上的產(chǎn)品詳細(xì)信息同時(shí)顯示了可購買和不可購買的尺碼。這讓可購買的尺碼看起來更稀缺。這樣顯示是微妙且有用的,因?yàn)橛行┤说某叽缃橛趦蓚€(gè)尺碼之間。

3. 訪問受限稀缺(Access-limited scarcity)

它指的是限制對(duì)信息、群組或空間等功能的訪問。研究表明,潛意識(shí)中的抑制力會(huì)讓人們更重視那些受限制的功能,而不是那些不受限制的功能,因?yàn)榕潘宰屗麄冇X得自己很特別。

舉例:

  • 成為Medium的訂閱者
    如果你想要閱讀Medium上的所有文章,就需要向平臺(tái)付費(fèi),成為他們的特權(quán)用戶。
  • 加入Tinder Select
    Tinder(交友App)的“Elo”排名系統(tǒng)基于吸引力對(duì)會(huì)員進(jìn)行排名,并邀請(qǐng)排名靠前的會(huì)員加入名為“Tinder Select”的封閉版本。盡管這把其他用戶排除在外,有點(diǎn)見利忘義 ,但Tinder還是達(dá)到了其目的:通過獎(jiǎng)勵(lì)讓受歡迎的用戶感到與眾不同。

 

 

稀缺性有爭(zhēng)議,但本不應(yīng)該有

如果稀缺性適合我們所設(shè)計(jì)的產(chǎn)品,那它可以優(yōu)化用戶流量并對(duì)業(yè)務(wù)目標(biāo)產(chǎn)生影響。稀缺性還會(huì)重構(gòu)信息,并在有緊急需求時(shí)提醒用戶。

有些人可能會(huì)說,這迫使用戶做出了決定,但只要數(shù)字是真實(shí)的,還有什么其他的選擇嗎? 我們?nèi)绻麤]有及時(shí)告知用戶產(chǎn)品稀缺的情況,難道就不會(huì)造成他們對(duì)遺憾或挫敗感嗎?這樣我們難道不是正在創(chuàng)造糟糕的用戶體驗(yàn)嗎?只要我們向人們展示的是事實(shí),催促人們做決定看起來反而是公平的。

話雖如此,我同意一些企業(yè)會(huì)不道德地通過虛假庫存和會(huì)員資格來利用稀缺性,但是他們同樣也可以通過任何其他方式來達(dá)到其可疑的目的,而且從長(zhǎng)期來看,這樣做總是會(huì)導(dǎo)致信譽(yù)喪失。

 

 

稀缺性的應(yīng)用應(yīng)該遵循一些規(guī)則

為避免爭(zhēng)議,下面是一些可以最大化利用稀缺性并真正提升用戶體驗(yàn)的建議。

可以做的事情:

  1. 利用稀缺性來提高感知價(jià)值并加速轉(zhuǎn)化
  2. 利用時(shí)間稀缺來促銷時(shí)效性強(qiáng)的產(chǎn)品
  3. 利用數(shù)量稀缺來讓人們意識(shí)到庫存短缺
  4. 利用訪問稀缺來強(qiáng)調(diào)受限功能的優(yōu)勢(shì)
  5. 利用A/B測(cè)試來測(cè)試哪些稀缺性信息最適合你的受眾
  6. 利用可用性測(cè)試來測(cè)試信息對(duì)可信度和信任度的影響
  7. 利用動(dòng)畫元素來強(qiáng)調(diào)緊迫性(例如,顯示一個(gè)發(fā)光的紅色圖標(biāo)來突出實(shí)時(shí)狀態(tài))

不可以做的事情:

  1. 在未做用戶測(cè)試之前。不要使用稀缺性
  2. 如果庫存的數(shù)量不可靠的話,不要使用稀缺性
  3. 如果信息不能保證不會(huì)出錯(cuò)的話,不要使用稀缺性
  4. 不要編造虛假數(shù)字來人為的制造稀缺產(chǎn)品

 

結(jié)論

稀缺性會(huì)讓我們對(duì)稀缺的東西賦予更高的價(jià)值,隨著時(shí)間的推移,這已經(jīng)成為增加吸引力的必由之路。稀缺性的方法很有效,因?yàn)樗Y(jié)合了多種偏見(損失厭惡、社會(huì)認(rèn)同和預(yù)期后悔),并擁有不同的形式(時(shí)間、數(shù)量和訪問受限)。

稀缺性是有爭(zhēng)議,但這些爭(zhēng)議本不應(yīng)該出現(xiàn),因?yàn)槲覀儾⒉荒軐?duì)用戶隱藏信息。如果你遵循一些簡(jiǎn)單的規(guī)則,稀缺性可以幫你提高用戶體驗(yàn)。

文章來源:UXRen    作者:David Teodorescu



藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

備戰(zhàn)雙十一,直播帶貨主播選品有何底層邏輯?

資深UI設(shè)計(jì)者

編輯導(dǎo)語:雙十一剁手節(jié)快到了,各個(gè)商家已經(jīng)開始在各大平臺(tái)開啟雙十一預(yù)熱活動(dòng);如今的賣貨模式也有所變化,不是僅靠打打廣告,推送信息,如今直播帶貨已經(jīng)成為了各大商家青睞的賣貨模式;本文作者分析了關(guān)于直播帶貨主播的選品有何底層邏輯,我們一起來看一下。

距離雙十一這場(chǎng)年度大戰(zhàn)已經(jīng)不到一個(gè)月,各個(gè)相關(guān)環(huán)節(jié)都已經(jīng)進(jìn)入“戰(zhàn)備”狀態(tài);當(dāng)然,逃不過直播二字。

如今再說直播帶貨,想必大家都不會(huì)感到陌生;經(jīng)歷過2019年李佳琦、薇婭出圈帶來的高速發(fā)展,今年年初黑天鵝事件的催熟式暴增;明星直播帶貨首秀、企業(yè)總裁直播自救等等相關(guān)話題都成了熱搜???,霸占眾人眼球。

直播帶貨從2016年起步以來,短短三年多時(shí)間就成為了一項(xiàng)“全民運(yùn)動(dòng)”,它的發(fā)展其實(shí)帶著必然性。

一方面,處于移動(dòng)互聯(lián)網(wǎng)時(shí)代,智能手機(jī)、4G網(wǎng)絡(luò)的普及以及如今5G的發(fā)展,都極大提升了用戶網(wǎng)絡(luò)瀏覽的便利性。

另一方面,用戶手機(jī)網(wǎng)絡(luò)購物習(xí)慣已經(jīng)養(yǎng)成。

據(jù)統(tǒng)計(jì),2019年通過手機(jī)進(jìn)行購物的網(wǎng)民超7.07億,占手機(jī)網(wǎng)民的78.9%;而相較于圖文、短視頻等介質(zhì),直播帶貨能夠更加全面、立體地展示商品,通過主播講解推薦,實(shí)現(xiàn)足不出戶的陪伴式購物體驗(yàn),用戶可以邊看邊買,實(shí)時(shí)互動(dòng)性強(qiáng)。

突破了時(shí)間和空間上的局限性,直播成為更具帶貨優(yōu)勢(shì)的載體。

備戰(zhàn)雙十一,直播帶貨主播選品有何底層邏輯?

從風(fēng)口成為行業(yè)大趨勢(shì),直播電商競(jìng)爭(zhēng)必然日益激烈;以淘寶直播為例,2019年,平臺(tái)誕生了177個(gè)帶貨過億的主播;這背后是千億級(jí)的貨品量、貨品品質(zhì)、貨品服務(wù)保障的訴求。

今天,我們想來聊聊,直播電商“人、貨、場(chǎng)”三要素中“貨”遵循怎樣的底層邏輯呢?

一、直播選品四大維度:品牌+產(chǎn)品+價(jià)格+用戶

直播帶貨中,并不是所有的產(chǎn)品都能進(jìn)入直播間。

許多商家透露,部分頂流主播的選品率,一般不超過5%;主播往往會(huì)形成自己比較固定的選品配比,交個(gè)朋友CEO黃賀就曾在采訪中總結(jié)出老羅帶貨直播間的一個(gè)選品規(guī)律:食品一場(chǎng)直播占到30%左右,日化、日用百貨占到30%左右,數(shù)碼家電占到20%,新奇特產(chǎn)品占到20%。

究其底層邏輯,主播在選品時(shí),通常會(huì)考慮四個(gè)維度:品牌、產(chǎn)品、價(jià)格、用戶;并根據(jù)直播節(jié)奏,安排產(chǎn)品上播順序,最終確定引流品、暢銷品、利潤(rùn)品、特色品等品類進(jìn)入直播間。

備戰(zhàn)雙十一,直播帶貨主播選品有何底層邏輯?

首先,在品牌層面挑選時(shí),主播通常會(huì)考慮品牌知名度、品牌產(chǎn)地、品牌供應(yīng)鏈這三方面。

高知名度品牌可提升直播間聲量并起到引流的效果;如水果等帶有地域特色的產(chǎn)品往往會(huì)因?yàn)楫a(chǎn)地而影響質(zhì)量;完善的品牌供應(yīng)鏈則是確保產(chǎn)品從售前到售后流暢運(yùn)作的基礎(chǔ)保障。

從產(chǎn)品層面看,在標(biāo)品、非標(biāo)品兩個(gè)大范圍下,主播往往希望自己的直播間內(nèi)有著更為豐富多樣的產(chǎn)品組合;比如同一場(chǎng)直播里,同時(shí)包含著新品、熱銷品、庫存品;新品可作為特色品存在,熱銷品作為利潤(rùn)品,庫存品則是充當(dāng)?shù)蛢r(jià)引流的鉤子產(chǎn)品。

直播帶貨剛起步的時(shí)候,標(biāo)品更受主播青睞,明碼標(biāo)價(jià)一定程度上降低了直播的難度,用戶購買更依賴產(chǎn)品本身。

隨著產(chǎn)業(yè)的逐漸成熟,主播專業(yè)度的提高,高單價(jià)、低復(fù)購的非標(biāo)品類在直播帶貨中逐步增多;比如昂貴的珠寶翡翠,在直播產(chǎn)業(yè)中已經(jīng)成為一個(gè)不容小覷的億級(jí)市場(chǎng)。

備戰(zhàn)雙十一,直播帶貨主播選品有何底層邏輯?

從左至右依次是抖音直播、快手直播、淘寶直播

從價(jià)格層面看,低價(jià)是公認(rèn)的最佳引流方式;主播往往希望利用價(jià)格差或者更大的優(yōu)惠力度來吸引用戶,除此以外還可能采用贈(zèng)品、大禮包等形式。

從用戶層面看,主播在推薦產(chǎn)品時(shí),也有剛需產(chǎn)品、非剛需產(chǎn)品的差別;會(huì)根據(jù)自己粉絲的用戶畫像、使用場(chǎng)景、消費(fèi)能力、興趣愛好等進(jìn)行選品。

以薇婭一場(chǎng)日常直播為例,該場(chǎng)直播共38件產(chǎn)品,各個(gè)價(jià)格區(qū)間商品占比相差不多;其中包括19.9的網(wǎng)紅低脂紅薯番薯仔地瓜干作為鉤子產(chǎn)品,也包括價(jià)格超過3000元的劉雯同款鄂爾多斯羊絨衫提高直播間品牌價(jià)值;而價(jià)格區(qū)間在100-300元,300-500元,500-1000元的產(chǎn)品數(shù)量比例一致,商品價(jià)格結(jié)構(gòu)均衡。

備戰(zhàn)雙十一,直播帶貨主播選品有何底層邏輯?

數(shù)據(jù)來源:知瓜數(shù)據(jù)

另外,薇婭直播帶貨起于服裝,逐漸擴(kuò)展到各個(gè)品類,到如今形成穩(wěn)定的選品策略;但是基于對(duì)粉絲屬性的考慮,在如今的商品分布中,女裝/女士精品類產(chǎn)品占比仍然是最高的。

二、主播、品牌成熟度對(duì)直播賣貨品效影響大不同

不同影響力的主播,不同成熟度的品牌,直播帶貨在品效兩方面的差異非常大,主要可以分為四個(gè)區(qū)間:

  • 品效爆棚=高知名度/社交熱度+頭部主播,比如李佳琦+完美日記;
  • 有品增效=知名度/社交熱度較低+頭部主播,比如薇婭推薦的網(wǎng)紅爆品;
  • 有品無效=知名度/社交熱度較低+員工/導(dǎo)購/尾部主播,比如商場(chǎng)導(dǎo)購直播;
  • 品效兼優(yōu)=高知名度/社交熱度+中腰部主播,比如李子柒螺螄粉+美刻美食(淘寶直播,粉絲數(shù):6.48萬),GMV超30萬。

備戰(zhàn)雙十一,直播帶貨主播選品有何底層邏輯?

三、直播電商“貨”的未來發(fā)展趨勢(shì)

直播電商正處于高速發(fā)展階段,主播或是用戶對(duì)于“貨”的選擇也越發(fā)挑剔。

前幾天,淘寶直播官方就舉辦了一場(chǎng)“雙11主播選品會(huì)”,以滿足主播們對(duì)商品品質(zhì)、性價(jià)比等方面提出的更高要求。

未來,直播電商中的“貨”將呈現(xiàn)以下趨勢(shì):

1)萬物皆可直播,非標(biāo)品滲透率逐漸提高

隨著直播電商的發(fā)展,沖破了我們對(duì)產(chǎn)品的刻板觀念,如汽車、房產(chǎn)等以往只能在線下進(jìn)行的品類也擁有了更多可能;薇婭已經(jīng)賣過火箭,下次又會(huì)是什么,我們可以大膽發(fā)揮想象。

2)貨品規(guī)范化,主播形成自己的選品策略

隨著行業(yè)的不斷成熟,各地政府推出相關(guān)扶持及規(guī)劃化文件,包括“貨”在內(nèi)的各個(gè)方面都將得到規(guī)范化發(fā)展;如今,集中擁有資源的頭部主播都已經(jīng)形成獨(dú)有的選品方法論,這對(duì)中小主播來說,也將是一種示范作用。

3)品效協(xié)同,產(chǎn)品進(jìn)入直播間更加理性

主播和產(chǎn)品是一個(gè)雙向選擇的過程,品牌經(jīng)過前期試水,對(duì)直播帶貨帶來的品效影響有了更直觀感受,對(duì)于直播間的選擇將會(huì)更加理性;一定程度上,也起著對(duì)行業(yè)的正向促進(jìn)作用。


文章來源:人人都是產(chǎn)品經(jīng)理    作者:面朝研究院


藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


圖標(biāo)設(shè)計(jì)指南

資深UI設(shè)計(jì)者

圖標(biāo)是UI設(shè)計(jì)中除了文字之外最不可或缺的視覺元素,在設(shè)計(jì)中看似只占一個(gè)很小的區(qū)域,但是它卻是考驗(yàn)設(shè)計(jì)師基本功的重要標(biāo)準(zhǔn),了解圖標(biāo)相關(guān)的概念,以及正確繪制的方法,是入門 UI設(shè)計(jì)的必備條件。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

本文將對(duì)圖標(biāo)進(jìn)行系統(tǒng)的介紹,篇幅所限,本文只針對(duì)圖標(biāo)設(shè)計(jì)中最重要的設(shè)計(jì)概念和設(shè)計(jì)思路為主。大家如果對(duì)圖標(biāo)的其他方面感興趣,歡迎給留言,后續(xù)出相關(guān)系列內(nèi)容。過程中也有針對(duì)幾種典型的圖標(biāo)進(jìn)行實(shí)操代練。想要把圖標(biāo)設(shè)計(jì)的更好,這就需要我們?cè)谄綍r(shí)勤加練習(xí)外,還要進(jìn)行深度的思考,希望我的這篇梳理可以給大家?guī)韼椭?

圖標(biāo)概述及發(fā)展歷程

1. 圖標(biāo)的定義

圖標(biāo),也稱為icon或Picoto,是計(jì)算機(jī)世界對(duì)現(xiàn)實(shí)世界的隱喻和概括,代表軟件產(chǎn)品中的功能及操作。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)做為國(guó)際通用性語言,生活中隨處可見,例如商場(chǎng)導(dǎo)視中收銀臺(tái)圖標(biāo)、出口圖標(biāo)、衛(wèi)生間圖標(biāo)等,又或者是日常手機(jī)里使用的那些App圖標(biāo),如微信、電話、短信等。的確,圖標(biāo)的形式有很多種,它可以應(yīng)用在很多場(chǎng)景中,并且表現(xiàn)方式非常豐富,有線的、有面的、還有擬物的等。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

粗淺劃分的話,UI設(shè)計(jì)中常見的圖標(biāo)大致分為兩大類,第一類我們稱之為「標(biāo)志性圖標(biāo)」,比如手機(jī)中應(yīng)用啟動(dòng)圖標(biāo);第二類我們稱之為「功能性圖標(biāo)」,這類圖標(biāo)經(jīng)常出現(xiàn)于 App 或網(wǎng)站中,用于功能性指示引導(dǎo)或操作。

2. 圖標(biāo)的重要性

對(duì)于UI設(shè)計(jì)而言,圖標(biāo)可以說是整個(gè)產(chǎn)品的點(diǎn)睛之筆,它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。在不少 UI 界面中,圖標(biāo)幾乎是這個(gè)頁面的核心支撐體,它直接影響著產(chǎn)品的視覺體驗(yàn)和產(chǎn)品調(diào)性。它有以下幾點(diǎn)好處:

  • 全球通用:Windows,iOS, etc., 中文版和英文版甚至各種語言版本,在不打開菜單之前,基本上都長(zhǎng)一樣;
  • 節(jié)約空間:如果能用一個(gè)圖標(biāo)清楚表達(dá)含義的時(shí)候,就不需要用文字,比如用一個(gè)“叉”代表「關(guān)閉」;
  • 快速定位:圖標(biāo)可以用它獨(dú)特的形狀或者顏色讓人快速定位到一個(gè)功能;
  • 上下文的定位:比如小飛機(jī)的圖標(biāo)單獨(dú)放出來不確定是什么,但是在和收件箱在一起它就可以認(rèn)為是發(fā)件箱了。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

3. 起源

圖標(biāo)的發(fā)展歷程其實(shí)有些類似中文、英文等語言的發(fā)展,大體也分為兩個(gè)階段:

實(shí)物 → 符號(hào);符號(hào) → 新符號(hào)

來看一個(gè)小例子:

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

左邊這個(gè)東西叫軟盤,可能很多小伙伴沒見過(事實(shí)上我也沒有),「保存」圖標(biāo)就是將「軟盤」符號(hào)化之后形成的圖形,「軟盤」是「保存」圖標(biāo)的實(shí)體。但隨著時(shí)間的推移,人們逐漸將長(zhǎng)期接觸的符號(hào)本身作為一種新的實(shí)體,在大家的眼里,它不再是一個(gè)具象事物的抽象符號(hào),而是直接當(dāng)成一個(gè)實(shí)體來使用,甚至這個(gè)符號(hào)的實(shí)體已經(jīng)淡出歷史,但人們還在習(xí)慣性使用這個(gè)符號(hào)。

如你所知,圖標(biāo)、標(biāo)識(shí)都不是界面設(shè)計(jì)師所創(chuàng)造的概念,它的存在可以追溯到人類文明誕生之初,在漫長(zhǎng)的歷史長(zhǎng)河當(dāng)中,早期用來傳達(dá)信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字,而在地圖、圖書、壁畫和建筑等各種各樣的地方,還存在著用來代表和傳達(dá)特定概念的圖標(biāo)和標(biāo)識(shí)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

隨著技術(shù)的發(fā)展,計(jì)算機(jī)誕生了,而顯示器的出現(xiàn),也為圖形化界面的誕生,鋪平了道路。20世紀(jì)70年代,施樂在位于帕羅奧托的研究所當(dāng)中,誕生了最早的擁有圖形化界面的電腦,著名的「 Xerox Alto」。這款昂貴的概念機(jī)最終并沒有走進(jìn)大眾的視野,但是它的后續(xù)機(jī)型施樂之星在1981年問世,并且成為了計(jì)算機(jī)史上的重要里程碑,而 Xerox Alto 對(duì)于喬布斯和比爾蓋茨的啟發(fā),更是引發(fā)了計(jì)算機(jī)歷史上最著名的一場(chǎng)戰(zhàn)爭(zhēng):蘋果VS微軟,Windows 對(duì)抗 Macintosh。當(dāng)然這都是后話。

4. 擬物圖標(biāo)

80年代,想做的具象(擬物),卻因?yàn)橄袼睾蜋C(jī)能的限制無法實(shí)現(xiàn),所以對(duì)好的標(biāo)準(zhǔn)是越具象越好 。到了1995年計(jì)算機(jī)顯卡的顯示能力得到革命性的改變,Photoshop 5.0的發(fā)布,恰好讓憋屈了這么多年的圖形和UI設(shè)計(jì)師們巴不得立馬上天(終于可以施展拳腳了)。從win95開始,到osx/win7的這十來年正是UI擬物化發(fā)展壯大并大行其道的階段。同時(shí)也是顯示技術(shù)飛速發(fā)展的十年,從640×480,到800×600,到1024×768,到1920×1080 / 1920×1200,再到4k,再到retina屏,平面顯示技術(shù)能達(dá)到的水準(zhǔn)基本已經(jīng)是人眼能感受到的。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

當(dāng)人們對(duì)計(jì)算機(jī)尚不熟悉的時(shí)候,用戶的需求是“弄懂這玩意到底是干嘛的”,是用戶體驗(yàn)的核心。擬物化的圖標(biāo)和界面會(huì)給予用戶具象化的引導(dǎo),比如回收站,音樂,電腦,文件夾的圖標(biāo),用戶可以直接聯(lián)想到現(xiàn)實(shí)中的物品并更快的理解這些程序或者文件的作用。包括立體的按鈕引導(dǎo)用戶點(diǎn)擊,用戶都可以通過聯(lián)想,更快的理解操作/互動(dòng)的方式。這樣可以降低用戶的學(xué)習(xí)成本,縮短學(xué)習(xí)周期,讓用戶更快的適應(yīng)計(jì)算機(jī)的使用,弄懂這玩意到底是干嘛的。

來自蘋果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無法繞過的里程碑。1991年,蘋果借由Macintosh,首次發(fā)布了彩色的圖標(biāo)設(shè)計(jì)。圖標(biāo)所能容納的信息量比起上一個(gè)黑白界面的時(shí)代更大,全新的樣式使得它在信息傳達(dá)的功能性上有了明顯的提升。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

但是隨著 ICON 的發(fā)展,擬物圖標(biāo)也帶來了一些問題,華麗的視覺元素或許在用戶使用的初期,起到賞心悅目的裝飾,但久而久之,這都將成為對(duì)用戶獲取信息的一種干擾。如今人們對(duì)各種常規(guī)交互模式人們也早已了然于胸,用戶的需求也從“弄懂這玩意這么用”變成了“快捷更舒心的使用”。用戶用的方便變成了用戶體驗(yàn)的重心。

再者,大家都熟悉的事物其實(shí)非常有限,而 APP 的創(chuàng)新卻在不斷進(jìn)行,很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實(shí)世界就沒有參照物,所以也決定了擬物圖標(biāo)必然會(huì)被扁平化取代。

5. 扁平化

從iMac到iPhone引領(lǐng)的擬物圖標(biāo)更是開啟了一個(gè)絢麗的圖標(biāo)設(shè)計(jì)時(shí)代。擬物時(shí)代盛行也帶來了一些麻煩——擬物圖標(biāo)的質(zhì)感、光影會(huì)分散用戶的注意力,形成「視覺噪聲」。于是UI設(shè)計(jì)師開始探索更新的表現(xiàn)形式來設(shè)計(jì)界面中的圖標(biāo)。如微軟引領(lǐng)的Metro風(fēng)格圖標(biāo)設(shè)計(jì)和Google引領(lǐng)的長(zhǎng)投影風(fēng)格的圖標(biāo)設(shè)計(jì)。 不管你喜歡與否,當(dāng)年的微軟讓 Metro 和扁平化賺足了眼球,甚至讓人一看到扁平化就想到Metro。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

區(qū)別于擬物化更加接近于真實(shí)的實(shí)物,扁平化則是簡(jiǎn)化真實(shí)的物體,轉(zhuǎn)而通過抽象、簡(jiǎn)化、符號(hào)化的設(shè)計(jì)元素來表現(xiàn)。

2013年,蘋果推出了iOS7 開啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮。在iOS7中對(duì)整個(gè)界面的圖標(biāo)、按鈕、字體、信息層級(jí)等各方面都進(jìn)行扁平化設(shè)計(jì)。蘋果的這一系列動(dòng)作打破了人們對(duì)扁平化風(fēng)格的芥蒂,并最終推動(dòng)了整個(gè)移動(dòng)端扁平化設(shè)計(jì)的進(jìn)程。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

那么,蘋果公司在堅(jiān)持了多年的擬物化設(shè)計(jì)風(fēng)格之后,曾經(jīng)作為該風(fēng)格的引領(lǐng)者和受益者,為何會(huì)突然轉(zhuǎn)向,熱情地?fù)肀鸨馄交O(shè)計(jì)來了呢?難道是因?yàn)槲覀円曈X疲勞了嗎?答案很簡(jiǎn)單,

  1. 因?yàn)槭褂昧薘etina屏,屏幕清晰度支持扁平化更多的細(xì)節(jié);
  2. 當(dāng)具象化慢慢達(dá)到了,當(dāng)大師們發(fā)現(xiàn)具象化已經(jīng)不再有挑戰(zhàn)時(shí),于是開始嘗試從別的角度表達(dá);
  3. 高度的擬物在一定程度上減輕了學(xué)習(xí)成本,但是提高了辨識(shí)成本。

總之,扁平化這種二維設(shè)計(jì)已經(jīng)成為一種更加流行的設(shè)計(jì)風(fēng)格。所有元素的邊界都很干凈利落,較多使用色塊和符號(hào)化的圖形以及無襯線修飾的字體,界面更加整齊簡(jiǎn)潔。使用這種設(shè)計(jì)風(fēng)格的優(yōu)點(diǎn)是可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來,將一切干擾信息弱化,減少認(rèn)知障礙的產(chǎn)生。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

雖然扁平化的優(yōu)點(diǎn)有很多,也適合當(dāng)下技術(shù)發(fā)展需要的,但是缺點(diǎn)也是顯而易見的。譬如表現(xiàn)形式太過于抽象、缺乏情感的傳遞,而事實(shí)上發(fā)展到今天的扁平化設(shè)計(jì)確實(shí)也在不斷的優(yōu)化自己~使得自己更加的適應(yīng)時(shí)代的發(fā)展。另外還有一個(gè)點(diǎn)就是所謂的 “審美疲勞”。當(dāng)你一直看著簡(jiǎn)單的東西,久而久之就會(huì)越來越煩,你就會(huì)越來越想要看那些豐富多彩的東西。反之亦然。這也表明 UI 新的趨勢(shì)再一部向“突出內(nèi)容”的本質(zhì)靠攏,即“認(rèn)知簡(jiǎn)約”。也許當(dāng)滿世界都是扁平化后,擬物化的設(shè)計(jì)卻又變得更顯眼了呢?最近流行的“新擬物”風(fēng)格就是最好的證明。

6. 微扁平、輕擬物

由于扁平風(fēng)格表現(xiàn)形式單一,同質(zhì)化嚴(yán)重,缺乏個(gè)性,圖標(biāo)慢慢開始發(fā)展到微扁平輕擬物的方向。相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺元素,與扁平風(fēng)格又有了更豐富的情感內(nèi)容,所以現(xiàn)在界面中,在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo);在面積比較大的區(qū)域我們會(huì)使用加入漸變甚至輕質(zhì)感的圖標(biāo)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

7.「新擬物」風(fēng)格圖標(biāo)

蘋果在 WWDC2020 搞了個(gè)大新聞:macOS 將與 iOS 統(tǒng)一步調(diào),從X86 平臺(tái)遷移至ARM 平臺(tái),并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。

macOS Big Sur是第一個(gè)將「新擬物」設(shè)計(jì)投入大規(guī)模商用的操作系統(tǒng),這可視為「新擬物」在實(shí)用化道路上的首次勝利。值得一提的是,在 Big Sur 的 ” 外觀 ” 設(shè)置里,多了一項(xiàng)名為” 自適應(yīng)強(qiáng)調(diào)色 “的選項(xiàng)。蘋果將主題色的指定權(quán)留給開發(fā)者,這是否暗示新一代 App 在光影上會(huì)有更豐富的效果?

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

「新擬物」設(shè)計(jì)的精髓在于對(duì)光線的絕妙運(yùn)用。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間,進(jìn)而打造一種全新的視覺體驗(yàn)。

不同于傳統(tǒng)的擬物,「新擬物」雖然將符合物理規(guī)律的光影效果引入界面,但它所模擬的材質(zhì)是自然界不存在的。換句話說,「新擬物」是將真實(shí)光線用于虛擬對(duì)象,而 ” 擬物 ” 是還原實(shí)際物品在特定光照下的效果;

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

由于整個(gè)設(shè)計(jì)界將不得不考慮新擬物風(fēng)格,圍繞該風(fēng)格的可能性將會(huì)有爆炸性的發(fā)展,并且這種新的數(shù)字空間設(shè)計(jì)理念如何能夠合理地適用于用戶界面設(shè)計(jì)和功能性將取得更大的突破。與以往一樣,第三方應(yīng)用將比蘋果更大膽、更快速地推動(dòng)這一風(fēng)格——這也是我們將會(huì)真正開始解鎖新擬物優(yōu)勢(shì)的時(shí)候。

應(yīng)用圖標(biāo)的類型及作用

產(chǎn)品應(yīng)用圖標(biāo)(也叫啟動(dòng)圖標(biāo)),是指產(chǎn)品「品牌標(biāo)識(shí)」中獨(dú)立的圖形,也是產(chǎn)品品牌的核心組成元素。作為產(chǎn)品所有視覺通信中必不可少的元素,其使用率非常高,所以該獨(dú)立圖形在設(shè)計(jì)中應(yīng)做到最簡(jiǎn)化。

一個(gè)小問題:為什么iOS系統(tǒng)中圖標(biāo)形狀是統(tǒng)一的圓角矩形?

蘋果官方給出的解釋是在空間有限的的區(qū)域,太多形狀顯得雜亂,如果形狀不規(guī)則,就無法控制統(tǒng)一間距,設(shè)計(jì)師水平也不一樣,這樣統(tǒng)一規(guī)范能保證標(biāo)準(zhǔn)。推薦一個(gè)iOS啟動(dòng)圖標(biāo)資源網(wǎng)站,設(shè)計(jì)時(shí)可以找找靈感。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ iOSIcon gallery

而安卓應(yīng)用圖標(biāo)就沒那么規(guī)范,處于百花齊放的狀態(tài),各家廠商都在設(shè)計(jì)獨(dú)屬于自己的視覺語言。大家都不一樣,也就導(dǎo)致沒有個(gè)性之美。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

安卓應(yīng)用圖標(biāo)設(shè)計(jì)規(guī)范網(wǎng)站

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

應(yīng)用圖標(biāo)的類型

應(yīng)用圖標(biāo)有不同的風(fēng)格,這些風(fēng)格有可能偏擬物,也有可能很扁平,有可能很抽象,也可能很具象。通過不同的設(shè)計(jì)風(fēng)格可以更加標(biāo)新立異,從而被用戶記住。因此能在第一時(shí)間贏得用戶的好感和記憶非常重要,將產(chǎn)品圖標(biāo)設(shè)計(jì)的好看且容易被人記住就成了非常重要的任務(wù)。應(yīng)用圖標(biāo)的風(fēng)格主要有以下幾種。

1.  中文文字圖標(biāo)

中文是我們的母語,每一個(gè)漢字都令人記憶深刻,文字也是最直白的信息,而且不容易被曲解,所以很多國(guó)內(nèi)的產(chǎn)品都會(huì)使用文字作為自己的產(chǎn)品圖標(biāo)。中文設(shè)計(jì)模式即字體設(shè)計(jì),提取應(yīng)用名稱中的一個(gè)或多個(gè)漢字,進(jìn)行設(shè)計(jì)變形,變形后的字體圖形具有產(chǎn)品屬性的外貌特征。常見中文圖標(biāo)又分為單字、多字和字加圖形的幾種類型。

單字

提取產(chǎn)品名稱中最具代表性的文字,通過對(duì)筆畫及整體骨架進(jìn)行字體設(shè)計(jì),以達(dá)到符合產(chǎn)品特性和視覺差異化的目的。其優(yōu)點(diǎn)是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息,識(shí)別性強(qiáng)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

多字

多字圖標(biāo)設(shè)計(jì)要注意的是整體的協(xié)調(diào)性和可讀性,一般為2-3個(gè)字,最多兩行(四個(gè)字)排列。

其優(yōu)點(diǎn)是更加直接的告訴用戶產(chǎn)品名稱,達(dá)到品牌推廣的目的,減輕用戶記憶成本。其缺點(diǎn)是如果圖標(biāo)上的文字和下面的輔助文字完全一樣,會(huì)顯得重復(fù)啰嗦,像介紹了兩遍自己一樣。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

字加圖形組合

文字加輔助圖形的組合,也是常見的產(chǎn)品圖標(biāo)設(shè)計(jì)方法,相比純文字圖標(biāo),顯得更加豐富有獨(dú)特的產(chǎn)品的氣質(zhì)和屬性。需要注意的是做好文字和輔助圖形間的平衡。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

2. 英文字母圖標(biāo)

英文設(shè)計(jì)與中文設(shè)計(jì)的設(shè)計(jì)模式相似,通常是提取應(yīng)用名稱的首字母融合產(chǎn)品的功能賣點(diǎn)或行業(yè)屬性進(jìn)行創(chuàng)意加工,新的字母圖形依舊保持本身的識(shí)別性。

單字母

通常提取英文首字母進(jìn)行設(shè)計(jì),由于英文字母本身結(jié)構(gòu)簡(jiǎn)潔,稍加改動(dòng)就很容易達(dá)到設(shè)計(jì)感于識(shí)別性兼?zhèn)涞漠a(chǎn)品圖標(biāo)。需要注意的是英文字母本來就少,都用字母很容易創(chuàng)意雷同,難以形成差異化。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

多字母

提取產(chǎn)品全稱或幾個(gè)單詞的首字母組合而成,形成獨(dú)有的產(chǎn)品簡(jiǎn)稱,方便用戶記憶。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

字母加圖形組合

字母加圖形組合的設(shè)計(jì)形式比較廣泛,圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進(jìn)行創(chuàng)意加工,可以使應(yīng)用圖標(biāo)視覺表現(xiàn)更加飽滿。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

3. 數(shù)字圖標(biāo)

直接用數(shù)字做應(yīng)用圖標(biāo)的相對(duì)較少,但是數(shù)字識(shí)別性強(qiáng),易于傳播的特點(diǎn)。利用數(shù)字進(jìn)行設(shè)計(jì)能給人親和力。難點(diǎn)是怎樣與品牌形成強(qiáng)關(guān)聯(lián)性。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 特殊符號(hào)圖標(biāo)

由于符號(hào)本身的含義會(huì)對(duì)產(chǎn)品屬性有一定限制,所以特殊符號(hào)在應(yīng)用圖標(biāo)的設(shè)計(jì)案例中相對(duì)較少。如“$”符號(hào)可代表與金錢有關(guān)聯(lián)性的產(chǎn)品,無法運(yùn)用在與此屬性無關(guān)的產(chǎn)品上。不過也正是由于自身屬性強(qiáng)的特點(diǎn),可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

除了中英文圖標(biāo),還有圖形類圖標(biāo)比較常見。這種類型的設(shè)計(jì)模式的優(yōu)點(diǎn)就是直觀醒目和簡(jiǎn)潔大方,視覺沖擊力強(qiáng)。常見的有以下幾種:

5. 幾何圖形

幾何圖形的設(shè)計(jì)模式給人簡(jiǎn)約、現(xiàn)代、個(gè)性等視覺感受,從單個(gè)具象圖形到復(fù)雜的空間感營(yíng)造,幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達(dá)不同,如三角形給人傳達(dá)個(gè)性、穩(wěn)定、現(xiàn)代、時(shí)尚等,添加圓角后又會(huì)更加親民、可愛。我們可以結(jié)合產(chǎn)品特征,合理的選擇適合的形狀圖形進(jìn)行創(chuàng)意。此類型較考驗(yàn)設(shè)計(jì)師的圖形創(chuàng)意能力。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

6. 單雙形/剪影

單雙形是指應(yīng)用圖標(biāo)只展示單個(gè)或兩個(gè)的剪影圖形。通常有兩種設(shè)計(jì)方式,在深色背板上使圖形反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖形填充顏色,圖形可以是單色也可以是漸變色。這種設(shè)計(jì)模式的優(yōu)點(diǎn)是簡(jiǎn)潔明確,易于用戶在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

7. 線形

線形的設(shè)計(jì)模式分為兩種設(shè)計(jì)方式,在深色的背板上讓圖標(biāo)反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖標(biāo)填充顏色,圖標(biāo)可以是單色也可以是漸變色,或是其他視覺效果。纖細(xì)的線框圖形傳遞出簡(jiǎn)潔輕快的氣質(zhì),適合于文藝、清新的應(yīng)用,在界面設(shè)計(jì)時(shí)保持這種干凈明快的風(fēng)格,才能與應(yīng)用圖標(biāo)設(shè)計(jì)表里如一。線性風(fēng)格一定注意不可太細(xì),如果做得太細(xì),在手機(jī)上看會(huì)非常尖銳,顯得不易點(diǎn)擊。例如airbnb,它的背景是一個(gè)微漸變,線性風(fēng)格曲線組成“A”,同時(shí)是一個(gè)小蜜蜂。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

8. 動(dòng)物圖形/剪影

動(dòng)物作為圖標(biāo)設(shè)計(jì)元素是比較常見的方式之一,通過提取動(dòng)物整體形象或者局部特征部位作為設(shè)計(jì)元素,背景填充單色或漸變色,簡(jiǎn)潔明了。動(dòng)物給人的印象比較可愛,有助于加深用戶對(duì)產(chǎn)品的印象。常見的表現(xiàn)形式有剪影、線性描邊風(fēng)格、面性風(fēng)格等。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

9. 卡通形象

卡通風(fēng)格的產(chǎn)品圖標(biāo)會(huì)讓用戶更有好感,一個(gè)可愛的卡通形象有助于加深用戶對(duì)產(chǎn)品的印象。很多決策者會(huì)認(rèn)為卡通是一種低齡的審美,這種想法其實(shí)是錯(cuò)誤的??ㄍ梢哉f是一種各年齡層都能接受的風(fēng)格,例如Bear,它的卡通形象是一頭潔白的北極熊,簡(jiǎn)潔的形象設(shè)計(jì)與產(chǎn)品的閱讀體驗(yàn)一致。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

10. 正負(fù)形

以正形為底突出負(fù)形特征,以負(fù)形表達(dá)產(chǎn)品屬性,傳遞產(chǎn)品信息。例如NPR One,圖標(biāo)中的負(fù)形圖形是對(duì)話氣泡,告訴我們這是一個(gè)媒體或社交的應(yīng)用,而正形圖形強(qiáng)調(diào)產(chǎn)品氣質(zhì)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

11. 白色漸變

白色漸變的設(shè)計(jì)模式與透明白色相似,都是通過白色不透明度來構(gòu)建出圖形的立體控件感,它比單純的剪影圖形更加具有質(zhì)感,這種質(zhì)感帶給了我們視覺上的享受。例如印象筆記·圈點(diǎn),它是一只白色的鵝毛形象,垂直的線型漸變使鵝毛富有了生命力一般,顯得更加輕柔。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

12. 彩色漸變

色彩比任何圖形都更能抓住用戶的注意力,同時(shí)色彩更加具有情緒,能傳遞出應(yīng)用的產(chǎn)品氣質(zhì)。比起白色漸變圖形,彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進(jìn)行漸變銜接的時(shí)候要注意色相的對(duì)比,營(yíng)造空間感。應(yīng)用圖標(biāo)的背景和圖形的色彩要拉開對(duì)比,一般為白色或淺色背景。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

13. 無

無,即沒有設(shè)計(jì)。除了背板什么也沒有。雖然這類設(shè)計(jì)模式比較獨(dú)特,但我們并不鼓勵(lì),因?yàn)橛脩艉茈y從一個(gè)顏色上得到有用的信息。例如“黃油相機(jī)”的圖標(biāo)設(shè)計(jì)成一塊黃油的樣子已深入人心了。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

14. 應(yīng)用圖標(biāo)的作用

打開率是一款移動(dòng)應(yīng)用的重要數(shù)據(jù),應(yīng)用只有被打開才有它的運(yùn)營(yíng)價(jià)值。在我們手機(jī)里安裝了許許多多的應(yīng)用,除了一些我們每天必須使用的應(yīng)用如微信,其他大多數(shù)的應(yīng)用在沒有使用場(chǎng)景時(shí)很難想到去打開他們。因此,這些應(yīng)用如何在手機(jī)屏幕上吸引用戶的注意,鼓勵(lì)用戶打開顯得非常重要。于是在應(yīng)用圖標(biāo)上做文章就顯得很有必要,常見的設(shè)計(jì)手法有:

  • 品牌傳播:在游戲領(lǐng)域比較常見,在應(yīng)用圖標(biāo)上打上品牌的旗號(hào)就能或者用戶的注意;
  • 營(yíng)銷事件:將營(yíng)銷事件(例如雙11)展示在應(yīng)用圖標(biāo)上,折扣、促銷等都能吸引眼球;
  • 核心賣點(diǎn):將核心賣點(diǎn)出現(xiàn)在應(yīng)用圖標(biāo)上,引起用戶注意,從而提高應(yīng)用被打開的頻率;
  • 節(jié)日氛圍:節(jié)日通常伴隨著消費(fèi),因此電商類應(yīng)用最注重節(jié)日氛圍的主題設(shè)計(jì),每年春節(jié)期間桌面圖標(biāo)幾乎一片紅,非常有節(jié)日氣氛;

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

應(yīng)用圖標(biāo)繪制方法及流程

1. iOS應(yīng)用圖標(biāo)

在設(shè)計(jì)模板還沒有如今這么發(fā)達(dá)時(shí),設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)(1024x1024px)之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如,在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px,在@2x情況下為120x120px;在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px;這個(gè)工作太煩人了,好在現(xiàn)在我們只需要專注在啟動(dòng)圖標(biāo)設(shè)計(jì)本身上了。在蘋果給我們的這套資源中,有 Template-AppIcons-iOS 這個(gè)文件。打開這個(gè)文件,用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉智能對(duì)象里的內(nèi)容,你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。iOS的圓角圖標(biāo)并不是標(biāo)準(zhǔn)的圓角矩形,而是某種連續(xù)曲線。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

我們把兩個(gè)圓角曲線放大重疊后進(jìn)行對(duì)比,其中灰色線框?yàn)闃?biāo)準(zhǔn)圓角矩形繪制的圓角,紅色為iOS平滑圓角,它與圓角矩形擁有相同的對(duì)角線錨點(diǎn),區(qū)別在于其曲線稍微向中心收緊。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

事實(shí)上,我們很難在Retina屏幕上區(qū)分這么細(xì)微的差別,因此設(shè)計(jì)師在繪制iOS應(yīng)用圖標(biāo)時(shí)不必過分糾結(jié)它的圓角,直接繪制成直角矩形交給開發(fā)同學(xué)即可,如果應(yīng)用圖標(biāo)需用于展示,可以繪制120*120px圓角矩形、27px圓角半徑代替。

2. 安卓應(yīng)用圖標(biāo)

安卓應(yīng)用圖標(biāo)同樣需要很多尺寸,主流需求是1024px、512px、144px、96px、72px、48px六種。設(shè)計(jì)師提供給程序員的同樣是直角矩形,然后程序員通過代碼進(jìn)行切割使其變成圓角圖標(biāo)。

3. iOS應(yīng)用圖標(biāo)設(shè)計(jì)流程

在我之前的設(shè)計(jì)作品中,有個(gè)“影記”的攝影社區(qū)APP,本篇我們就以此為產(chǎn)品案例拋磚引玉來學(xué)習(xí)一個(gè)iOS應(yīng)用圖標(biāo)的繪制過程。

尋找隱喻

隱喻是在彼類事物的暗示之下感知、體驗(yàn)、想象、理解、談?wù)摯祟愂挛锏男睦硇袨?、語言行為和文化行為,即人們看到某樣?xùn)|西或聽到某件事情能夠馬上在大腦中形成聯(lián)想。例如說到攝影,馬上就能想到相機(jī)、快門、閃光燈、暗房等。然后通過這些聯(lián)想詞,去找一些氣質(zhì)相符的圖片制作情緒版,通過情緒版可以感受到產(chǎn)品的調(diào)性,然后從中提取一些形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

競(jìng)品分析

應(yīng)用市場(chǎng)各類產(chǎn)品不勝其數(shù),在同類應(yīng)用中存在大量相似的應(yīng)用圖標(biāo)設(shè)計(jì),如何保持應(yīng)用圖標(biāo)的唯一識(shí)別性非常重要。唯一識(shí)別性不單單指圖形與其他應(yīng)用有所差異,避免創(chuàng)意撞車,讓用戶在腦中形成思維模式,它還指圖形表意是否清晰,是否符合用戶的心里預(yù)期。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

提取關(guān)鍵詞

根據(jù)收集的圖片,創(chuàng)建情緒版,結(jié)合自己的產(chǎn)品提取關(guān)鍵詞,然后就知道在接下來的設(shè)計(jì)中應(yīng)該突出什么。我們從“影記”中可提取首字母“Y”,相機(jī)中的“快門”“信號(hào)燈”“開關(guān)機(jī)”,并依次將關(guān)鍵詞描繪成下列圖形。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

抽象圖形

確立了首字母“Y”、“快門/開關(guān)機(jī)”和“信號(hào)燈”作為應(yīng)用圖標(biāo)的主圖形,接下來將繪制好的3個(gè)圖形相結(jié)合,即完成初步設(shè)想。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)柵格線

使用iOS應(yīng)用圖標(biāo)柵格線作為設(shè)計(jì)依據(jù)有助于建立和諧的圖標(biāo)繪制比例,并與iOS系統(tǒng)保持統(tǒng)一,下圖為iOS系統(tǒng)天氣應(yīng)用使用了圖標(biāo)柵格線。將圖形放置在圖標(biāo)柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

豐富細(xì)節(jié)

通過上面圖形組合已基本完成應(yīng)用圖標(biāo)的設(shè)計(jì),接下來我們還應(yīng)從顏色、質(zhì)感、背板等著手豐富圖形的細(xì)節(jié),建立起應(yīng)用的產(chǎn)品氣質(zhì)。“影記”作為攝影師分享佳作平臺(tái),攝影師們用的器材顏色大多以黑色為主,因此酷酷的黑色更適合作為應(yīng)用的主色。白色的信號(hào)燈過于普通,使用相機(jī)本身發(fā)出的橘紅色燈光作為信號(hào)燈的顏色,使其更加具有動(dòng)感和活力。整體像「消息氣泡」的造型暗示可以在這里進(jìn)行攝影交流。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

多場(chǎng)景測(cè)試

將應(yīng)用圖標(biāo)設(shè)計(jì)稿交付開發(fā)提交至App Store上架,正確的圖標(biāo)設(shè)計(jì)稿應(yīng)是直角矩形,iOS會(huì)自動(dòng)應(yīng)用一個(gè)圓角遮罩將圖標(biāo)的4個(gè)角遮住,假如圖標(biāo)設(shè)計(jì)稿自帶圓角,就有可能露出圖標(biāo)透明區(qū)域。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ 注:上圖非實(shí)際大小,僅表明不同分辨率下的比例關(guān)系

此外,應(yīng)用圖標(biāo)還會(huì)以不同的分辨率出現(xiàn)在不同場(chǎng)景中,例如在iPhone 8plus上需@3x(120px)的圖,而在iPhone7的設(shè)置頁需要58px的圖,就需要將120px的圖縮小。將大圖縮小成小圖時(shí),一些細(xì)節(jié)就會(huì)丟失,使畫面變得模糊,因此設(shè)計(jì)師應(yīng)對(duì)小尺寸圖標(biāo)進(jìn)行細(xì)微調(diào)整,去除不必要的裝飾元素,以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場(chǎng)景下也能保持清晰的識(shí)別度。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

功能圖標(biāo)的設(shè)計(jì)規(guī)范

除了產(chǎn)品圖標(biāo),還有一種圖標(biāo)被稱為功能(或系統(tǒng))圖標(biāo),功能圖標(biāo)指的是擔(dān)負(fù)一定功能和含義的圖形,一般來說需要像文字一般地被人迅速理解,所以表達(dá)方式上不適合特別復(fù)雜,如微信底部四個(gè)系統(tǒng)圖標(biāo)就使用了比較簡(jiǎn)潔的線性風(fēng)格。

功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用,幾乎存在于每一個(gè)應(yīng)用界面中,無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄,還是在首頁、詳情頁或個(gè)人中心頁,都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能,其作用在于替代文字或輔助文字來指引用戶進(jìn)行快速導(dǎo)航,它具有圖形化的符號(hào),比文字更加直觀,符合普羅大眾的認(rèn)知習(xí)慣,有助于用戶形成記憶思維,提高應(yīng)用的易用性。同時(shí)設(shè)計(jì)精致、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果,不但給用戶帶來視覺上的愉悅感,還帶來了良好一致的使用體驗(yàn)。

1. 圖標(biāo)的規(guī)范

圖標(biāo)是良好設(shè)計(jì)系統(tǒng)的基本組成部分,對(duì)營(yíng)銷材料非常有幫助。他們是插畫內(nèi)容的基礎(chǔ)構(gòu)建塊,但他們也具有很高的技術(shù)性。因此科學(xué)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范能幫助我們?cè)O(shè)計(jì)精致、風(fēng)格統(tǒng)一的圖標(biāo)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

2. 圖標(biāo)尺寸

一致性是設(shè)計(jì)圖標(biāo)的關(guān)鍵,在繪制時(shí),一定要確保所有的圖標(biāo)都相同大小。在UI界面設(shè)計(jì)中,網(wǎng)格的大小必須要是4或12的倍數(shù)(安卓是8的倍數(shù),iOS是4的是倍數(shù))。@2x下作圖要保證是4的倍數(shù),這樣可以整除2,適配@1x的屏幕;@3x下作圖就需要是12的倍數(shù)了,這個(gè)數(shù)值可以整除2、3、4,適配@1x和@2x的屏幕,界面中通常使用的圖標(biāo)尺寸24*24px、48*48px。這里建議用48px做為常規(guī)圖標(biāo)設(shè)計(jì)尺寸。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

通常我們只需要選擇一個(gè)通用的尺寸來繪制,然后讓開發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可,這樣就不用一遍又一遍的去繪制不同大小的相同圖標(biāo)了。

不過當(dāng)我們的圖標(biāo)涉及一些復(fù)雜的細(xì)節(jié)時(shí),還是需要根據(jù)尺寸大小單獨(dú)繪制。比如我們的系統(tǒng)圖標(biāo)可能是24px,但是營(yíng)銷圖標(biāo)是80px,兩者的使用差別會(huì)很大,那么我們就需要為那些較大的尺寸添加一些細(xì)節(jié)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

知識(shí)點(diǎn):

這里建議從最大的尺寸開始,然后依次繪制小一點(diǎn)的。因?yàn)閯h除和簡(jiǎn)化細(xì)節(jié)要比添加容易得多,也能的保留圖標(biāo)原始狀態(tài)。

圖標(biāo)繪制基于48x48px畫布繪制的線性圖標(biāo),線寬默認(rèn)為4px,不同場(chǎng)景縮放比例使用:

  • 圖標(biāo)為32x32px時(shí),線寬3px(基準(zhǔn)線寬)
  • 圖標(biāo)為24x24px時(shí),線寬2px(基準(zhǔn)線寬)
  • 圖標(biāo)為16x16px時(shí),線寬2px(基準(zhǔn)線寬)
  • ……

如果你要繪制描邊圖標(biāo),那么需要保證所有的筆畫都是相同的粗細(xì),并且筆畫之間的間距不要比筆畫本身更細(xì)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

3. 圖標(biāo)的keyline

圖標(biāo)網(wǎng)格為圖形元素的一致但靈活的定位建立了明確的規(guī)則,keyline是網(wǎng)格的基礎(chǔ)-。通過使用這些核心形狀作為知道,你可以跨系統(tǒng)保持一致的視覺比例。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 圖標(biāo)關(guān)鍵圖形

圖標(biāo)柵格用于圖標(biāo)元素繪制的參考并幫助建立清晰的內(nèi)容輪廓邊界,關(guān)鍵線有助于促進(jìn)圖標(biāo)統(tǒng)一性,簡(jiǎn)化設(shè)計(jì)過程中比例調(diào)整成本,繪制小圖形需要參照小正方形的keyline。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

5. 圖標(biāo)的拐角

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

直角拐角:當(dāng)基礎(chǔ)圖形為滿容器正方形時(shí),建議使用3X圓角,當(dāng)基礎(chǔ)圖形為滿高(寬)矩形時(shí),建議使用2X圓角。當(dāng)基礎(chǔ)圖形為較小(小于1/2寬高)矩形時(shí),建議使用1X圓角。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

非直角拐角:根據(jù)圖標(biāo)場(chǎng)景,通常情況下無論角度,默認(rèn)均為1X圓角;特殊弧度的曲線“拐角”情況除外,根據(jù)圖標(biāo)設(shè)計(jì)需要單獨(dú)考慮。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

6. 圖標(biāo)區(qū)域 封閉和非封閉

封閉區(qū)域,有閉合曲線構(gòu)成的為封閉區(qū)域,可以進(jìn)行獨(dú)立顏色填充;

非封閉區(qū)域,由非閉合曲線構(gòu)成的非封閉區(qū)域,原則上是不能進(jìn)行獨(dú)立的顏色填充;

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

封閉區(qū)域?yàn)榍€形狀且有相交線段時(shí),原則上是不能進(jìn)行獨(dú)立的顏色填充;

7. 圖標(biāo)繪制規(guī)則

當(dāng)線段與曲線相交或者與直線非垂直相交時(shí),線段末端用圓頭端點(diǎn);

當(dāng)線段與直線垂直相交時(shí),線段末端用方頭端點(diǎn);

當(dāng)圓點(diǎn)的直徑與線寬一樣時(shí),圓點(diǎn)用圖形繪制,不用線段;

當(dāng)圓形和方形在小于16px時(shí)建議用圖形繪制,不要用線;

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

傾斜角度

根據(jù)像素的網(wǎng)格線來設(shè)置一條線的起點(diǎn)和終點(diǎn),會(huì)讓你的圖標(biāo)看起來更清晰。圖標(biāo)中的傾斜角度應(yīng)為45的倍數(shù),保持與keyline中的對(duì)角線或十字垂直相交線保持平行關(guān)系,若是矩形外框,傾斜角度也可以與矩形的對(duì)角線或十字垂直相交線保持平行關(guān)系。應(yīng)避免用13.7°,81°等這些奇怪的數(shù)值。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線段和端點(diǎn)

為保證風(fēng)格的整體一致性,圖標(biāo)所有線段端點(diǎn)默認(rèn)均應(yīng)為與線段同寬的圓角端點(diǎn),通常情況下線段端點(diǎn)和可編輯節(jié)點(diǎn)坐標(biāo)以整數(shù)坐標(biāo)為佳。默認(rèn)基于48px畫布繪制的線性圖標(biāo),線寬默認(rèn)為4px,無論直線和曲線在任何時(shí)候線寬都應(yīng)均保持一致。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)斷口與間距

內(nèi)部結(jié)構(gòu)與外框的間距不得不小于線寬,內(nèi)部元素之間的間距不得不小于線寬的1/2px。

外形框的端口尺寸關(guān)系:4px、8px、12px,建議尺寸為4的倍數(shù)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)風(fēng)格變換

圖標(biāo)在特定規(guī)律下允許不同風(fēng)格之間的變換,分別為線性風(fēng)格(默認(rèn))、填充風(fēng)格、混合風(fēng)格、多色混合風(fēng)格。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

單雙像素描邊

如果為圖標(biāo)設(shè)置1像素的邊框,邊框應(yīng)該使用外部或內(nèi)部的描邊樣式,但是不建議居中描邊樣式,居中描邊的1px邊框,雖然在放大它們的時(shí)候,它們看起來很清晰。但在100%比例大小顯示的時(shí)候,它們會(huì)模糊。雙數(shù)用居中描邊,單數(shù)用外描邊,所有錨點(diǎn)要與網(wǎng)格對(duì)齊不能出現(xiàn)偏移。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線段閉合

所有線段結(jié)合處應(yīng)為閉合狀態(tài),避免錯(cuò)位出現(xiàn)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

統(tǒng)一透視

如果圖標(biāo)有透視需求的話,就要統(tǒng)一透視角度,例如圖標(biāo)透視方向朝左,那就統(tǒng)一所有圖標(biāo)的透視角度都朝左邊。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

8. 視覺柵格

除了像素柵格,還有視覺柵格。視覺柵格可以幫助我們找出圖標(biāo)的中心在哪里,以及人眼能感知到它有多大。圓形和弧形物體看起來會(huì)比正方形更小。因此我們應(yīng)該在繪制圖標(biāo)時(shí)設(shè)定一個(gè)固定大小的容器,這樣它們?cè)趯?dǎo)出時(shí)就都是相同的尺寸了。添加內(nèi)邊距可以讓圖標(biāo)在視覺上看起來更加平衡,避免以后開發(fā)時(shí)還需要重新調(diào)整。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

9. 視覺重量

繪制圖標(biāo)不光要滿足物理上大小統(tǒng)一,還要實(shí)現(xiàn)視覺上大小統(tǒng)一。設(shè)計(jì)師要懂得調(diào)節(jié)圖標(biāo)大小以避開視覺上的覺錯(cuò)。

UI界面的圖標(biāo)通??梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形,縱向矩形,對(duì)角矩形,圓形,三角形,正方形。 如果把它們做成高斯模糊效果,你就會(huì)發(fā)現(xiàn)它們具有相同的視覺重量,因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

根據(jù)圖標(biāo)形狀,將它們放在相應(yīng)的框架中。你就會(huì)發(fā)現(xiàn),方形圖標(biāo)比三角形或細(xì)長(zhǎng)圖標(biāo)更緊湊。

10. 圖標(biāo)繪制細(xì)節(jié)

清晰是圖標(biāo)的基本要素,在sketch中,參數(shù)不要有小數(shù)點(diǎn),讓圖標(biāo)占滿像素網(wǎng)格。因?yàn)橛?jì)算機(jī)不能識(shí)別小數(shù)點(diǎn),導(dǎo)出圖標(biāo)時(shí)計(jì)算機(jī)會(huì)把不能識(shí)別參數(shù)的部分拉伸填滿像素網(wǎng)格,導(dǎo)致圖標(biāo)出現(xiàn)虛邊。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

通常從一套圖標(biāo)中最復(fù)雜的那個(gè)開始,因?yàn)樗鼤?huì)幫助我們定義相同的視覺重量,讓所有的圖標(biāo)視覺重量保持一致。因?yàn)楫?dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí),更復(fù)雜的圖標(biāo)會(huì)吸引用戶更多的注意力,而且視覺上看上去更重。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

11. 圖標(biāo)的顏色

默認(rèn)顏色:如果是功能圖標(biāo),那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復(fù)雜,不利于和其他設(shè)計(jì)師協(xié)作。而對(duì)于營(yíng)銷圖標(biāo),出于品牌宣傳的目的,你可能會(huì)想要使用兩種顏色,個(gè)人認(rèn)為圖標(biāo)最好是單一顏色的,3種或3種以上顏色的東西都是插圖,而不是圖標(biāo)。

選擇狀態(tài)顏色:未選擇圖標(biāo)顏色為#000000,透明度為87%;未激活圖標(biāo)顏色為#000000,透明度為54%;禁用圖標(biāo)顏色為#000000,透明度為38%。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

12. 功能圖標(biāo)的風(fēng)格

功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用,幾乎存在于每一個(gè)應(yīng)用界面中,無論是在導(dǎo)航欄、工具欄或標(biāo)簽欄,還是在首頁、詳情頁、或個(gè)人中心頁,都隨處可見功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能,起作用在于替代文字或輔助文字來指引用戶進(jìn)行快速導(dǎo)航,它具有圖形化的符號(hào),比文字更加直觀,符合普羅大眾的認(rèn)知習(xí)慣,有助于用戶形成記憶思維,提高應(yīng)用的易用性。同時(shí),設(shè)計(jì)精美、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺效果,不但給用戶帶來視覺上的愉悅感,還帶來良好一致的使用體驗(yàn)。

常見的功能性圖標(biāo)風(fēng)格大致有三種:線性圖標(biāo)、面形圖標(biāo)和扁平化圖標(biāo)。但其實(shí)我們可以將「扁平化圖標(biāo)」可以看作是「線性圖標(biāo)」和「面型圖標(biāo)」的一種組合形式,所以歸根到底,基礎(chǔ)的圖標(biāo)風(fēng)格有兩大類:「線性圖標(biāo)」和「面型圖標(biāo)」;

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線性圖標(biāo)

線性圖標(biāo)是通過線條來表現(xiàn)物體的輪廓,它比面形圖標(biāo)更能塑造優(yōu)美的外觀,且作為貫穿圖標(biāo)繪制的線條本身就是一種設(shè)計(jì)語言,因此繪制整套線性圖標(biāo)會(huì)更加統(tǒng)一,具有整體感。例如twitter和微信底部的tab圖標(biāo)等。在一個(gè)場(chǎng)景下的幾個(gè)同等重要的圖標(biāo),如果線條粗細(xì)不一致,會(huì)給人一種權(quán)重上存在差異的感覺。所以,在繪制線型圖標(biāo)時(shí),通常會(huì)使用統(tǒng)一粗細(xì)的線條。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線性圖標(biāo)具有辨識(shí)度高,清晰,簡(jiǎn)約易識(shí)別等優(yōu)點(diǎn),線性圖標(biāo)不會(huì)對(duì)頁面造成太多的視覺干擾。缺點(diǎn)是:線性圖標(biāo)的創(chuàng)作空間較少,太復(fù)雜的線性圖標(biāo)對(duì)識(shí)別性產(chǎn)生較大的困擾。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX,不同的線條粗細(xì) ICON 所帶來的視覺感受也不同,細(xì)線顯得精致,粗線視覺面積大,顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛,個(gè)別 App 的底部標(biāo)簽欄圖標(biāo)采用粗線條設(shè)計(jì),但粗線條的 ICON 圖形較為極簡(jiǎn)才適用。

線性圖標(biāo)根據(jù)樣式還可以分為:雙色線性圖標(biāo)、線面填充圖標(biāo)、線性漸變圖標(biāo)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線性圖標(biāo)使用場(chǎng)景

在iOS所有原生應(yīng)用的導(dǎo)航欄和工具欄都采用了2px線框的圖標(biāo)設(shè)計(jì),很多APP產(chǎn)品的標(biāo)簽欄都選擇用線性風(fēng)格的圖標(biāo)設(shè)計(jì)。無疑,線性圖標(biāo)可以減少視覺干擾,讓用戶集中在產(chǎn)品核心功能上,同時(shí)輕量化的視覺語言也與扁平化的設(shè)計(jì)風(fēng)格更為融合。它比面形圖標(biāo)更能塑造優(yōu)美的外觀,且線條本身就是一種設(shè)計(jì)語言,因此繪制整套線性圖標(biāo)會(huì)更加統(tǒng)一,具有整體感。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

通常,在UI設(shè)計(jì)中,線性圖標(biāo)很少和背板同時(shí)存在,因?yàn)榫€條的圖形視覺表現(xiàn)力較弱,容易埋沒在背景色中,但也不是必須的,如果掌握好一定的規(guī)則,一些簡(jiǎn)單的線性圖標(biāo)和背板的組合也會(huì)很協(xié)調(diào)。

面形圖標(biāo)

面形圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo),通過線或者面去切割基礎(chǔ)輪廓面,通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。在「微信」底部標(biāo)簽欄中,未選中的圖標(biāo)是線性圖標(biāo),而選中的圖標(biāo)則是面形圖標(biāo),同時(shí)顏色會(huì)變成微信的品牌綠色再次暗示用戶選中狀態(tài)。面形圖標(biāo)占用的面積要比線性圖標(biāo)多,所以更加顯眼。實(shí)際上,蘋果在新的設(shè)計(jì)規(guī)范中也建議開發(fā)者在APP底部標(biāo)簽欄中全部使用面形圖標(biāo),是否處于點(diǎn)擊態(tài)通過改變填充圖標(biāo)的顏色進(jìn)行區(qū)別。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

面形圖標(biāo)具有表意能力強(qiáng),細(xì)節(jié)豐富,情緒感強(qiáng),視覺突出,創(chuàng)作空間大等優(yōu)點(diǎn)。面性圖標(biāo)可以讓用戶迅速定位圖標(biāo)位置,預(yù)知點(diǎn)擊后的狀態(tài)。但是面性圖標(biāo)在頁面中不可過多出現(xiàn),否則會(huì)造成頁面臃腫,難分主次,用戶視覺疲勞。

面性圖標(biāo)根據(jù)不同的配色樣式可以分為:?jiǎn)紊柡投忍畛鋱D標(biāo),純色漸變圖標(biāo)和多色漸變圖標(biāo)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

基于最基本的「線性圖標(biāo)」和「面型圖標(biāo)」,通過不同的形態(tài)和風(fēng)格的組合,再結(jié)合豐富的 表現(xiàn)手法,就可以設(shè)計(jì)出形形色色的圖標(biāo)風(fēng)格了。比如:不同粗細(xì)線條線性圖標(biāo)的組合,或者面面組合,或者線面組合。大家在設(shè)計(jì)圖標(biāo)的時(shí)候,需要根據(jù)自己的產(chǎn)品特征、受眾和使用場(chǎng)景,去選擇適合自己的表現(xiàn)形式。

面形圖標(biāo)使用場(chǎng)景

面形圖標(biāo)具有廣泛適用性,通常在運(yùn)動(dòng)、時(shí)尚類應(yīng)用的標(biāo)簽欄出現(xiàn)。由于面形圖標(biāo)的視覺占比最大化,具有強(qiáng)烈的視覺表現(xiàn)力。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

功能入口的面形圖標(biāo)通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標(biāo),正形即圖標(biāo)直接填充色彩且無背板。在帶有背板的圖標(biāo)設(shè)計(jì)時(shí)要注意圖標(biāo)與背板的尺寸比例,雖沒有嚴(yán)格的繪制標(biāo)準(zhǔn),但從整體視覺效果上考慮,圖標(biāo)尺寸最好不低于背板直徑但1/2,最大不超過背板直徑的0.618(黃金比例),同時(shí)還要考慮所有圖標(biāo)的視差一致。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

13. 扁平圖標(biāo)的使用場(chǎng)景

扁平化圖標(biāo)實(shí)際上是線性圖標(biāo)和面形圖標(biāo)的一種組合形式,這種類似插畫感覺的圖形一開始多用于引導(dǎo)頁、空狀態(tài)也的情感化設(shè)計(jì),后來逐漸在標(biāo)簽欄、首頁主要功能入口也出現(xiàn)了扁平化圖標(biāo)的身影。精致的扁平化圖標(biāo)令人賞心悅目,拉近了與用戶之間的距離,從而建立起良好的用戶印象。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

14. 品類區(qū)圖標(biāo)

品類區(qū)圖標(biāo)的衛(wèi)視通常是位于搜索框、banner之下(也俗稱“金剛區(qū)”),而且品類區(qū)區(qū)域通常會(huì)占屏幕22%-25%不等,且位于屏幕頭部,從用戶閱讀屏幕內(nèi)容的視覺流來說位置至關(guān)重要,而且是聚合各類子版塊的入口,為各個(gè)子版塊分發(fā)內(nèi)容引導(dǎo)流量。所以其重要性不言而喻,產(chǎn)品要讓用戶通過不同類型展示方式的組件找到相應(yīng)的功能,而圖標(biāo)具備精煉高度概括內(nèi)容的特性,識(shí)別度也大于文字,所以「金剛區(qū)」的圖標(biāo)設(shè)計(jì)通常以圖標(biāo)+說明文字為主。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

常見的設(shè)計(jì)手法有:圓形底板+45度漸變+白色面形+微投影;45度漸變+扁平圖標(biāo)+微投影;簡(jiǎn)單線性;45度漸變+不透明度+面形圖標(biāo)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

15. 文字圖標(biāo)

文字圖標(biāo)是指用文字直接表示特定含義的圖標(biāo)符號(hào)。由于文字本身就是一種演化而來的符號(hào),英文的首字母或者詞語關(guān)鍵字本身也具備很強(qiáng)的信息濃縮性,因此在某些場(chǎng)景下,采用文字或字符作為圖標(biāo),是一種很不錯(cuò)的表現(xiàn)手法。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

比如「提示」圖標(biāo),使用一個(gè)圓圈包裹一個(gè)英文字母「i」,意為 information,表示「注釋信息」的含義;比如停車場(chǎng)直接使用「Parking」中的首字母 「P」,這些都是比較約定俗稱的使用方式。還有一些場(chǎng)景,很難用象形或者表意的方式進(jìn)行表達(dá),那么就很適合使用文字符號(hào),例如京東/天貓某些商品具備「正品保證」的標(biāo)識(shí),這個(gè)概念太抽象了,很難用象形去概括,創(chuàng)造新的表意符號(hào)又很難被大眾接受,這時(shí)「正」字就很適合作為這個(gè)場(chǎng)景特定的圖標(biāo)符號(hào),作為針對(duì)中國(guó)用戶群體的產(chǎn)品圖標(biāo),簡(jiǎn)單粗暴且有效。

知識(shí)點(diǎn):

如果可能的話,盡量避免在圖標(biāo)中使用文字。因?yàn)閳D標(biāo)應(yīng)該是全球性的。如果你確實(shí)需要文字圖標(biāo)(例如貨幣符號(hào)等等),那么請(qǐng)你自己繪制,而不是直接使用字體。

16. 動(dòng)態(tài)圖標(biāo)

這幾年動(dòng)效設(shè)計(jì)的熱度穩(wěn)定增長(zhǎng),只有靜態(tài)排版的時(shí)代正在過去。動(dòng)效的出現(xiàn),也讓圖標(biāo)擁有了更多的可能性。動(dòng)態(tài)圖標(biāo)可以讓你的app或網(wǎng)站生動(dòng)有趣,在我們所常見的各種數(shù)字產(chǎn)品當(dāng)中,UI組件和各色元素都已經(jīng)動(dòng)畫化了。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

運(yùn)動(dòng)中的物體比靜態(tài)的物體更能快速引起人們的注意,在UI設(shè)計(jì)中嘗試添加一些動(dòng)畫及動(dòng)畫圖標(biāo),不僅能在視覺上快速吸引用戶,還能使產(chǎn)品更具交互性,提升產(chǎn)品的趣味性。分享幾個(gè)動(dòng)態(tài)圖標(biāo)資源網(wǎng)站:

useAnimations:支持所有設(shè)備、網(wǎng)站、Android和iOS,可以免費(fèi)用于個(gè)人和商業(yè)用途。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

useanimations.com

Lordicon:每一個(gè)圖標(biāo)都提供線性輪廓和面形剪影兩種風(fēng)格樣式,并且圖標(biāo)是基于Lottie動(dòng)畫引擎的矢量動(dòng)畫圖標(biāo),大小完全可擴(kuò)展,兼容所有主流瀏覽器。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ https://lordicon.com

Icons8 Animated icons 2.0:提供的動(dòng)態(tài)圖標(biāo)格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式,透過網(wǎng)頁可以搜尋、預(yù)覽動(dòng)態(tài)圖標(biāo)效果。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ https://icons8.com/animated-icons

Feather:設(shè)計(jì)師Cole Bemis制作的一個(gè)開源圖標(biāo)庫,可自行調(diào)節(jié)圖標(biāo)大小和線條粗細(xì)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ https://feathericons.com/

17. 圖標(biāo)命名規(guī)則

科學(xué)和的命名規(guī)則能夠幫助我們快速定位到自己制作的圖標(biāo),并且?guī)椭_發(fā)縮短命名時(shí)間,加強(qiáng)團(tuán)隊(duì)寫作效率。切圖可按照“業(yè)務(wù)_類型_功能_大小_狀態(tài)”的格式進(jìn)行命名。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

切圖命名的格式建議為全英文,可在切圖之前對(duì)圖層進(jìn)行命名,常用切圖命名對(duì)照表如下所示。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

如何繪制功能圖標(biāo)

1. 圖標(biāo)繪制方法

圖標(biāo)的繪制方式主要有兩種:布爾運(yùn)算 和 貝塞爾曲線。

布爾運(yùn)算

布爾指的是喬治·布爾,19世紀(jì)的一位數(shù)學(xué)家,為了紀(jì)念布爾在符號(hào)邏輯運(yùn)算中的杰出貢獻(xiàn),所以將這種運(yùn)算稱為布爾運(yùn)算。

布爾運(yùn)算聽起來比較難,但其實(shí)非常簡(jiǎn)單,布爾運(yùn)算采用的數(shù)字邏輯推演法,主要有數(shù)字邏輯的聯(lián)合、相交、相減。設(shè)計(jì)師在使用軟件過程中引用了這種邏輯運(yùn)算方法,對(duì)應(yīng)到設(shè)計(jì)軟件中,就有:合并形狀、減去頂層形狀、與形狀區(qū)域交叉、排除重疊形狀。例如兩個(gè)圓形相減可以得到一個(gè)月亮的造型,這就是布爾運(yùn)算。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

  • 合并形狀:將兩個(gè)形狀合并為一個(gè),取的是合集;
  • 減去頂層形狀:用底層圖形減去頂層圖形所得最終圖形;
  • 與形狀區(qū)域相交:得到的形狀是兩個(gè)圖形重疊的部分,取的是交集;
  • 排除重疊形狀:簡(jiǎn)單理解就是減去兩個(gè)圖形重疊的部分,與「與形狀區(qū)域相交」相反;

基本上通過布爾運(yùn)算,我們能繪制出常見的大部分圖標(biāo)了,但有時(shí)我們需要針對(duì)某些線條進(jìn)行單獨(dú)的調(diào)整,又或者我們需要打造一套手繪風(fēng)的矢量圖標(biāo),這個(gè)時(shí)候就需要用到貝塞爾曲線了。

貝塞爾曲線

貝塞爾曲線適用于二維圖形繪制的數(shù)學(xué)曲線。1962年法國(guó)工程師皮埃爾·貝塞爾(Pierre Bézier)所發(fā)表。他運(yùn)用貝塞爾曲線來為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線是繪制矢量圖形時(shí)的重要工具,使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。

貝塞爾曲線包括:節(jié)點(diǎn)、控制點(diǎn)、控制線、曲線這幾個(gè)基本概念。

矢量圖形便是由這幾個(gè)基本概念構(gòu)成的。圖形由基礎(chǔ)節(jié)點(diǎn)作為支撐構(gòu)成,控制點(diǎn)和節(jié)點(diǎn)之間的線段稱為控制線,控制線就像皮筋一樣,調(diào)整控制點(diǎn)的位置,可以改變曲線的形狀,就像被皮筋(控制線)拉扯一樣。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

節(jié)點(diǎn)包括 4 種基礎(chǔ)屬性類型,一種是沒有控制點(diǎn)和控制線的「直線節(jié)點(diǎn)」;另一種是「鏡像關(guān)聯(lián)節(jié)點(diǎn)」,這種節(jié)點(diǎn)控制其中一側(cè)的控制點(diǎn),另一側(cè)的控制點(diǎn)會(huì)發(fā)生鏡像變化,適合繪制對(duì)稱結(jié)構(gòu)的曲線;再有一種是「無關(guān)聯(lián)節(jié)點(diǎn)」,即節(jié)點(diǎn)兩側(cè)的控制點(diǎn)可以各自自由控制它們那一側(cè)的曲線而不互相影響;最后一種是「不對(duì)稱關(guān)聯(lián)節(jié)點(diǎn)」,這種類型下,節(jié)點(diǎn)兩側(cè)的控制點(diǎn)和節(jié)點(diǎn)會(huì)永遠(yuǎn)保持在同一條直線上,但是卻不會(huì)對(duì)稱控制線的長(zhǎng)度。

知識(shí)點(diǎn):

在 Sketch 中,我們可以在選中節(jié)點(diǎn)后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當(dāng)前節(jié)點(diǎn)的類型,加快繪制效率。

鋼筆工具

繪制自由貝塞爾曲線常用的工具便是鋼筆工具,鋼筆工具也是所有矢量軟件的核心工具。它的使用對(duì)于新手可能稍微薇有點(diǎn)復(fù)雜,但是一但上手,會(huì)非常方便。The Bézier Game 這個(gè)是一個(gè)非常不錯(cuò)的練習(xí)鋼筆工具的網(wǎng)站,以游戲的形式練習(xí)鋼筆工具,通關(guān)的時(shí)候你對(duì)鋼筆工具就已經(jīng)輕車熟路了。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

繪制實(shí)戰(zhàn)

這里選擇了幾個(gè)比較典型的圖標(biāo),簡(jiǎn)單演示下繪制方法和各自的繪制思路:

面性

眼睛:布爾運(yùn)算相交 / 相減 / 合并形狀

繪制一個(gè)正圓,然后復(fù)制這個(gè)正圓形,通過布爾運(yùn)算「與形狀區(qū)域相交」得到眼睛外輪廓,再繪制兩個(gè)圓通過「相減」與合并形狀得到眼睛造型。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

位置定位:旋轉(zhuǎn) / 相減

這個(gè)圖標(biāo)由兩個(gè)大小圓形相減,得到環(huán)形,再繪制一個(gè)和大圓半徑相等的正方形,和圓環(huán)左、下對(duì)齊,最后逆時(shí)針旋轉(zhuǎn)45度完成。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

WIFI:相加 / 相減 / 旋轉(zhuǎn)

繪制多個(gè)圓通過布爾運(yùn)算的相加減得出三個(gè)圓圈嵌套“靶子造型,再繪制一個(gè)正三角形,和靶子圖形相交得到Wi-Fi圖標(biāo)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

齒輪:旋轉(zhuǎn) / 相減

通過兩個(gè)圖形的布爾運(yùn)算得到環(huán)形,然后繪制一個(gè)梯形,復(fù)制一個(gè)鏡像,將其對(duì)齊環(huán)形兩端,復(fù)制梯形編組并旋轉(zhuǎn)復(fù)制三次(45度),最后合并全部形狀完成。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

鈴鐺:相加 / 相減

由3個(gè)矩形組成鈴鐺主體,鈴鐺頂部圓頂結(jié)構(gòu)通過設(shè)置全圓角所得,鈴鐺底部的半圓使用圓形和矩形進(jìn)行布爾運(yùn)算,完成。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

線性

放大鏡:旋轉(zhuǎn) / 相加

繪制一個(gè)正圓和一條線,用對(duì)齊工具將其居中對(duì)齊,編組后逆時(shí)針旋轉(zhuǎn)45度即可。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

時(shí)鐘:鋼筆 / 剪刀工具

繪制一個(gè)正圓和一個(gè)矩形,使圓形的左下角對(duì)齊圓形中心,用鋼筆工具在矩形左邊和下邊增加兩個(gè)錨點(diǎn),再用剪刀工具減去多余的線條即可。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

雨傘:相減 / 剪刀工具

繪制一個(gè)正圓,再繪制一個(gè)矩形與其相減得到傘頂,然后繪制一個(gè)矩形,通過剪刀工具減去多余部分,得到傘架,傘把手圓角化處理,完成。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

相機(jī):合并

繪制一個(gè)矩形和一個(gè)梯形,通過合并得到相機(jī)主體,再繪制一個(gè)正圓完成相機(jī)鏡頭部分,完成。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

愛心:相加 / 旋轉(zhuǎn)

繪制兩個(gè)正圓和一個(gè)直徑與圓形等寬的正方形,然后逆時(shí)針旋轉(zhuǎn)45度所得。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

2. 制定規(guī)范

無規(guī)矩不成方圓,規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理,統(tǒng)一起來。在設(shè)計(jì)上也是如此,規(guī)范具有統(tǒng)一輸出,指引細(xì)節(jié)、便于查看的好處,規(guī)范就是一組圖標(biāo)中的規(guī)矩,所有圖標(biāo)的繪制都按照規(guī)矩來,最終的成品就會(huì)顯得井然有序。

小小的圖標(biāo)是由很多圖形元素組成的,在這些圖標(biāo)中,元素的一致性是建立一個(gè)共同視覺于洋的關(guān)鍵。熟悉這些元素可以更容易地理解每個(gè)圖標(biāo)和他們之間細(xì)微的差異,也將幫助我們學(xué)會(huì)圖標(biāo)設(shè)計(jì)的底層結(jié)構(gòu),依次是筆畫末端、圓角、留白、筆觸、內(nèi)部角、禁繪區(qū)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

在制定規(guī)范時(shí),我們通常先繪制出一個(gè)符合業(yè)務(wù)風(fēng)格的圖標(biāo),然后根據(jù)這一個(gè)圖標(biāo)定制后續(xù)的圖標(biāo)規(guī)范,依次按照上述圖標(biāo)元素進(jìn)行規(guī)范。如果是漸變填充圖標(biāo)還要規(guī)定它的漸變角度,光影角度等。在一組中的圖標(biāo)需要在這些圖形屬性中進(jìn)行統(tǒng)一,這樣的圖標(biāo)雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

制定規(guī)范的三個(gè)過程:

  • 拆分細(xì)節(jié):將圖標(biāo)中的細(xì)節(jié)元素(圓角、筆畫末端等)進(jìn)行分解,并在規(guī)范中制定細(xì)節(jié)元素的使用法則。
  • 風(fēng)格定位:根據(jù)產(chǎn)品調(diào)性,業(yè)務(wù)屬性在規(guī)范中制定相應(yīng)的色彩、質(zhì)感風(fēng)格。
  • 功能劃分:不同功能(金剛區(qū)和標(biāo)簽欄等)的圖標(biāo)要區(qū)分開來,功能相近的包括色彩、質(zhì)感應(yīng)該采取相近性。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ 圖標(biāo)設(shè)計(jì)規(guī)范

3. 線性or面性

設(shè)計(jì)中,我們應(yīng)該是用「線性圖標(biāo)」還是「面性圖標(biāo)」呢?

其實(shí)二者沒有太明顯的選擇優(yōu)劣,很多場(chǎng)景下已經(jīng)越來越模糊,但總的來說,還是有一些法則可以作為參考:

常用的手法:在App的底部導(dǎo)航欄,選中狀態(tài)使用面型圖標(biāo),而非選中狀態(tài)使用線性圖標(biāo);

16px左右的小圖標(biāo)慎用線性圖標(biāo),線性圖標(biāo)在16px下,可排布像素的區(qū)域較小,這個(gè)時(shí)候線性圖標(biāo)不容易設(shè)計(jì);

面型圖標(biāo)比起線性圖標(biāo),除裝飾性外具備更強(qiáng)的視覺信息層次感,更具引導(dǎo)性,比如金剛區(qū)功能圖標(biāo)、IOS設(shè)置界面,使用面型圖標(biāo);

車載等系統(tǒng)界面,更適合用面型圖標(biāo),面型圖標(biāo)的視覺面積較大,短時(shí)間內(nèi)更加容易識(shí)別;

線性圖標(biāo)看起來通常會(huì)更加細(xì)膩精致,適合比較精致簡(jiǎn)潔的設(shè)計(jì)或者女性化產(chǎn)品設(shè)計(jì);

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 圖標(biāo)導(dǎo)出

文件格式是導(dǎo)出圖標(biāo)的關(guān)鍵。不同的人需要的文件格式也不同,如果你為外部合伙人提供圖標(biāo),那么可能會(huì)提供1x、2x和3x.的png文件,以適應(yīng)多種設(shè)備。而對(duì)于開發(fā)和其他設(shè)計(jì)人員,則通常需要導(dǎo)出.svg文件,這些文件可以在設(shè)計(jì)程序中編輯,并且可以通過代碼在應(yīng)用程序或?yàn)g覽器中繪制。導(dǎo)出的svg可以用sketch的官方插件「sketch-SVGO」進(jìn)行代碼優(yōu)化,壓縮svg的體積,精簡(jiǎn)svg代碼。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ sketch-SVGO 插件官方下載頁

svg格式僅支持居中描邊的圖標(biāo),并且不支持投影,因此對(duì)于復(fù)雜豐富的圖標(biāo)還是切img圖為好。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

5. 圖標(biāo)管理和交付

完成圖標(biāo)后需要進(jìn)行視覺檢視,避免任何多余的線條或形狀,保證盡可能整潔。檢查所有線條是否都在標(biāo)準(zhǔn)框架內(nèi),讓其他人幫忙來檢查你的圖標(biāo)是否整潔是非常有必要的。對(duì)圖標(biāo)精心設(shè)計(jì)評(píng)審,合格后再加入資源庫,這樣避免多人同時(shí)修改而造成混亂,同時(shí)提升團(tuán)隊(duì)協(xié)作效率。推薦一個(gè)免費(fèi)的圖標(biāo)管理工具:Nucleo,團(tuán)隊(duì)協(xié)作需要付費(fèi)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

△ 圖標(biāo)資源管理工具:Nucleo

圖標(biāo)設(shè)計(jì)的評(píng)判標(biāo)準(zhǔn)

我們了解了 icon 的基本知識(shí),那么如何設(shè)計(jì)一個(gè)好的 icon 呢?怎樣評(píng)判我們的 icon 是否合適,是否貼合整個(gè)產(chǎn)品呢?我們需要了解什么才是一個(gè)好的 icon 。

我們可以從以下五個(gè)方面來檢驗(yàn),分別是:識(shí)別性,規(guī)范性、統(tǒng)一性、呼吸感與品牌感。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

1. 識(shí)別性

圖標(biāo)就是幫助用戶理解信息,所以識(shí)別性(也可以說是可訪問性)是一個(gè)圖標(biāo)最重要的一項(xiàng),尤其在沒有文字說明的情況下,一定不能讓用戶產(chǎn)生疑惑。我們檢測(cè)圖標(biāo)的可讀性通常要將圖標(biāo)的背景色底板在黑色和白色之間進(jìn)行切換對(duì)比,不論是黑色還是白色的背景都可以看清圖標(biāo)的全部細(xì)節(jié),還需要確保圖標(biāo)中的每一種顏色都是可見的。

圖標(biāo)識(shí)別性可以分為兩類,分別是含義識(shí)別和視覺識(shí)別。

  • 含義識(shí)別:是視覺語言是否可替換文字語言,簡(jiǎn)言之就是讓你的圖標(biāo)可以被用戶理解,不會(huì)讓用戶產(chǎn)生歧義。
  • 視覺識(shí)別:圖標(biāo)的大小,復(fù)雜度,顏色,線條的粗細(xì),這些影響視覺識(shí)別的因素識(shí)別性是否高。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

靈活的設(shè)計(jì)思路,在保證識(shí)別度的前提下靈活發(fā)揮,嘗試各種不同風(fēng)格的表現(xiàn)形式。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

當(dāng)然,腦洞也不要太大,失去了原本的含義,造成誤解。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

2. 規(guī)范性

規(guī)范性也是做好一個(gè)圖標(biāo)的基礎(chǔ),我們要保證圖標(biāo)在視覺大小的一致性,圖標(biāo)飽滿度、遵循同一種規(guī)律,細(xì)節(jié)統(tǒng)一性。

視覺大小的一致性:在相同尺寸的基礎(chǔ)上分析形狀間的視覺差異,來審視視覺上是否統(tǒng)一,如一樣尺寸大小的圓和方形的視覺大小就不一致,那么我們可以規(guī)定它的最大尺寸,進(jìn)而在尺寸規(guī)范中適當(dāng)調(diào)整,使得視覺大小達(dá)到統(tǒng)一;

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

  • 飽滿度:常用的衡量方法就是正負(fù)形衡量法,在圖標(biāo)所占區(qū)域的矩形框中,看圖標(biāo)的正形的面積是否還可以增加;
  • 相同規(guī)律:同一套圖標(biāo)必須是以同種風(fēng)格呈現(xiàn)的,例如是否全部使用了圓角或直角的風(fēng)格,圓角大小、繪制風(fēng)格是否一致;
  • 細(xì)節(jié)統(tǒng)一:包括像素是否對(duì)齊、圓角、描邊粗細(xì)是否統(tǒng)一的問題;

3. 統(tǒng)一性

在繪制多個(gè)類型相同的圖標(biāo)時(shí),我們需要注意這一套圖標(biāo)合集需要在視覺上保持統(tǒng)一性。在一整套產(chǎn)品中,會(huì)有很多種圖標(biāo),但是圖標(biāo)的功能不一樣,所表達(dá)的內(nèi)容也不同。這時(shí),圖標(biāo)一致性的意義就體現(xiàn)出來了,根據(jù)格式塔原理中的相似性原則:人們會(huì)將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級(jí)別的元素,則應(yīng)在視覺上保持統(tǒng)一匹配。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

圖標(biāo)內(nèi)容的統(tǒng)一會(huì)讓用戶明白相似的圖標(biāo)所代表的的功能也相同,而且在視覺上也更加和諧美觀。因此我們?cè)诶L標(biāo)后還需檢查線條的粗細(xì)比重,邊角的大小,配色方案,細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。

圖標(biāo)的統(tǒng)一性可以從:線條粗細(xì)、設(shè)計(jì)語言、復(fù)雜程度、顏色規(guī)范四個(gè)大的方向去著手。

線條粗細(xì):相同功能類型的圖標(biāo)線寬粗細(xì)統(tǒng)一,有背板的圖標(biāo)線條不易過細(xì);

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

設(shè)計(jì)語言:可拆分為透明度(拉開層次)、圓角(圓角還是直角)、斷線開口(開口位置)、設(shè)計(jì)特征四個(gè)緯度去規(guī)范;

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

復(fù)雜程度:如果不能簡(jiǎn)化圖標(biāo),就保持同一組圖標(biāo)的墨水重量一致,簡(jiǎn)化太復(fù)雜的圖標(biāo),增強(qiáng)辨識(shí)度;

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

顏色規(guī)范:對(duì)于線面結(jié)合的扁平圖標(biāo)建議最多用兩種顏色,活動(dòng)入口圖標(biāo)如果需要的色彩數(shù)量多,那就需要保持敏感,從一種色彩的周圍小幅度提取另一種色彩或多種色彩,調(diào)整其色相、飽和度、明度就能搭配出許多和諧的顏色。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 呼吸感

呼吸感的意思就是適當(dāng)留白。不管是圖標(biāo)還是界面,適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容,讓內(nèi)容具備易看性。在圖標(biāo)的繪制過程中,我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過近,元素也不宜過多。圖標(biāo)是一個(gè)物體的簡(jiǎn)略縮影,目的是為了表達(dá)內(nèi)容,讓用戶快速理解,太過復(fù)雜的細(xì)節(jié)會(huì)影響圖標(biāo)的識(shí)別速度。因此在圖標(biāo)的繪制過程中應(yīng)該刪除所有無法傳達(dá)圖標(biāo)意義的元素,避免使圖標(biāo)變得太過復(fù)雜難以識(shí)別。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

5. 品牌感

品牌感就是我們上面談到的要與品牌理念相符,傳達(dá)給用戶的感受一致,通過吸取品牌色,提取品牌元素,采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設(shè)計(jì)的角度去理解,尋找自己產(chǎn)品獨(dú)特的品牌氣質(zhì),挑選合適的技法。然后把這些元素具象化,融入在界面設(shè)計(jì)中。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

那么,該如何提升品牌感,打造屬于自己App的獨(dú)特風(fēng)格呢?品牌基因?yàn)槲覀兲峁┝艘恍┚€索,這是近年來非常流行的一種趨勢(shì)。

圖標(biāo)的品牌感

我們都知道圖標(biāo)在APP設(shè)計(jì)中的重要性,但是打開許多APP你會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通,似乎是在圖標(biāo)網(wǎng)站上下載的素材。雖然一些優(yōu)秀的設(shè)計(jì)師在進(jìn)行圖標(biāo)設(shè)計(jì)師加入一些諸如圓角、斷線等設(shè)計(jì)語言,但是仍逃脫不了與其他APP設(shè)計(jì)雷同、毫無個(gè)性的通病,使得UI看上去普通、不精致,缺少產(chǎn)品氣質(zhì)。

那么,該如何打造屬于自己APP的獨(dú)特風(fēng)格呢?品牌基因?yàn)槲覀兲峁┝艘恍┚€索。它是由平面設(shè)計(jì)中的VIS(視覺識(shí)別系統(tǒng))引入的一種設(shè)計(jì)策略,通過對(duì)品牌形象進(jìn)行延生設(shè)計(jì)形成一套完整的視覺符號(hào)。每一個(gè)APP都有其品牌形象,代表了與眾不同的氣質(zhì)。接下來,我們就來學(xué)習(xí)如何利用品牌基因進(jìn)行圖標(biāo)設(shè)計(jì)。

1. 提取品牌圖形

通常一個(gè)App的第一個(gè)tab是首頁,是用戶進(jìn)入App后看到的第一個(gè)頁面,最常見的圖標(biāo)設(shè)計(jì)是一個(gè)小房子的圖形。首頁是App中最重要的頁面,承載了整個(gè)產(chǎn)品的核心功能,是用戶瀏覽最多的地方,因此使用一個(gè)讓人印象深刻的品牌圖形作為“首頁”圖標(biāo)是必要的,不但使App內(nèi)外形成了視覺聯(lián)系,同時(shí)也二次傳遞了品牌形象,加強(qiáng)了用戶對(duì)App的良好印象。例如網(wǎng)易云音樂的首頁標(biāo)簽就直接使用了它的品牌圖形,其優(yōu)點(diǎn)不言而喻。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

但是請(qǐng)注意,這種設(shè)計(jì)策略并不適合于所有的App,當(dāng)?shù)谝粋€(gè)tab被賦予特定功能,就不可使用品牌圖形,否則用戶會(huì)難以理解。例如微信第一個(gè)tab是聊天列表,此時(shí)使用氣泡就比品牌圖形更加合適。

還有另外一種情況。通常一個(gè)App的最后一個(gè)tab是個(gè)人中心,即“我的”。如果App的品牌圖形是動(dòng)物圖形,也可以使用其整體或局部圖形來作為「?jìng)€(gè)人中心」的入口圖標(biāo)。

2. 提取品牌色彩

色彩也是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一,合理協(xié)調(diào)的色彩搭配讓用戶在瀏覽頁面時(shí)感覺舒服。從品牌形象中提取色彩作為圖標(biāo)設(shè)計(jì)的依據(jù),可以給用戶帶來由內(nèi)而外一致的視覺體驗(yàn)。在設(shè)計(jì)時(shí)提取品牌色彩可適當(dāng)調(diào)整色彩的飽和度,明度,既可以將圖形整體填充色彩(例如微信),也可以局部填充色彩,還可以填充為圖標(biāo)背景色,使圖標(biāo)之間形成色彩上的關(guān)聯(lián)。直播應(yīng)用Bigo Live的品牌色是青藍(lán)色,在標(biāo)簽欄的圖標(biāo)設(shè)計(jì)上(選中態(tài))將圖形局部元素填充青藍(lán)漸變色,活潑清爽的搭配帶給用戶輕快的感覺,與整體品牌調(diào)性高度一致。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

3. 提取設(shè)計(jì)語言

在VI設(shè)計(jì)中通常提取輔助圖形作為設(shè)計(jì)元素,這在圖標(biāo)設(shè)計(jì)中同樣適用,當(dāng)所有的圖標(biāo)都具備了相同的設(shè)計(jì)元素,他們就構(gòu)成了一套完整的視覺符號(hào)。例如飛豬的品牌圖形就很特別,豬的頭部輪廓是由大寫字母F演變成的翅膀造型,因此可以看到“我的”小人圖標(biāo)的也使用了類似的輪廓,這樣他們就形成了某種視覺聯(lián)系。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

4. 提取產(chǎn)品氣質(zhì)

品牌形象決定了產(chǎn)品的氣質(zhì),而產(chǎn)品的氣質(zhì)決定了吸引什么樣的用戶。就如當(dāng)我們第一次看到一個(gè)人的時(shí)候,往往會(huì)根據(jù)他的外貌形象特征,產(chǎn)生一個(gè)大致的印象,這就是一個(gè)人的氣質(zhì)。APP也同樣,例如傳遞傳統(tǒng)手工藝人社交的「東家」,其產(chǎn)品流淌著古樸、溫潤(rùn)、精致的人文氣息,它將宋體漢字的筆畫進(jìn)行拆解組合,創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

5. 拆分品牌名稱

App標(biāo)簽欄圖標(biāo)最常見的形式是圖形加文字的組合,由于文字本身就能傳達(dá)最直接的含義,因此圖形的識(shí)別性并不那么重要了,我們就可以在其視覺表現(xiàn)形式上賦予更多創(chuàng)意和個(gè)性。MONO是一款閱讀類App,它的標(biāo)簽欄圖標(biāo)直接將品牌名稱中的4個(gè)字母拆分成4個(gè)圖形。雖然每個(gè)字母與其對(duì)應(yīng)的功能模塊本身并沒有直接聯(lián)系,但加上標(biāo)簽文字的輔助也不會(huì)造成閱讀困難,而且產(chǎn)品本身的用戶人群就是比較能接受新鮮事物的年輕人,因此這樣的創(chuàng)意反而給App設(shè)計(jì)加分了。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

6. 展開形象聯(lián)想

我們?nèi)粘J褂玫谋姸郃pp大多數(shù)都有著相同的功能模塊:首頁、發(fā)現(xiàn)、動(dòng)態(tài)、我的等,因此也就出現(xiàn)了很多雷同的圖標(biāo)設(shè)計(jì)。比如“首頁”是尖頂房子,“發(fā)現(xiàn)”是眼睛,“動(dòng)態(tài)”是氣泡,如果有差別也只是設(shè)計(jì)風(fēng)格的差異,有的直角有的圓角,有的線性有的面形。這樣的設(shè)計(jì)沒有品牌歸屬感,試一下將這些圖標(biāo)單獨(dú)拿出來就無法判斷它是誰,它從哪兒來?

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

優(yōu)秀的設(shè)計(jì)師不僅要具備將圖標(biāo)繪制精美的能力,還要具備豐富的設(shè)計(jì)想象力,不拘泥于設(shè)計(jì)規(guī)范的條條框框,有時(shí)候打破規(guī)則才能設(shè)計(jì)出優(yōu)秀的圖標(biāo)?!笆醉摗背诵》孔游覀冞€可以想到什么?馬蜂窩的做法就很巧妙,“首頁”圖標(biāo)是“蜂巢”,而蜂巢是馬蜂的房子,這樣的設(shè)計(jì)與品牌形象緊密相連,簡(jiǎn)直完美!不過的改版好像已經(jīng)改沒了。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

知識(shí)點(diǎn):

總之,要想在繪制整套圖標(biāo)時(shí)建立統(tǒng)一風(fēng)格,就要從外觀和顏色上確立主風(fēng)格,在局部尋求個(gè)性特征,將兩者結(jié)合,并融合產(chǎn)品屬性和符合用戶定位,先在腦海中構(gòu)思出清晰的概念,然后在稿紙上繪制草圖,最后確立一個(gè)最佳方案上機(jī)完成,只有不斷地思考和打磨才能創(chuàng)作出最佳的設(shè)計(jì)方案。

兩萬字超強(qiáng)干貨!設(shè)計(jì)師必看的圖標(biāo)設(shè)計(jì)指南

寫在最后

圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的環(huán)節(jié),在尺寸有限的界面上,小小的 icon 可以更加簡(jiǎn)單的表達(dá)含義,傳遞給用戶正確和友好的指引。建議每位UI設(shè)計(jì)師在平時(shí)做大量的練習(xí)嘗試各種不同的風(fēng)格,以滿足不同的業(yè)務(wù)需求。另外,關(guān)于如何繪制keyline線,還有的iphone12樣機(jī),有需要的同學(xué)可以出門右轉(zhuǎn)私信我。


文章來源:優(yōu)設(shè)    作者:印跡時(shí)光


藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

2020-2021 設(shè)計(jì)趨勢(shì) · 年輕文化篇

ui設(shè)計(jì)分享達(dá)人

It is ultra experience

About Millennials and Generation Z


——————————

Intro 前言



很難界定千禧一代(生于20世紀(jì)80年代至2000年初)和 z 世代(生于1995年以后) ,但那些已成為當(dāng)前消費(fèi)市場(chǎng)中心的人與上一代有著不同的價(jià)值觀和文化品味。他們表現(xiàn)出的消費(fèi)特征是強(qiáng)調(diào)個(gè)人幸福而非群體,分享而非持有,體驗(yàn)而非產(chǎn)品。不僅僅是購買東西,他們傾向于通過購買包含社會(huì)價(jià)值觀和信息的東西來表達(dá)自己的信念,他們也喜歡展示自己的成功或財(cái)富,并且樂于投資昂貴的品。與老一輩為了一個(gè)遙遠(yuǎn)的未來而犧牲了現(xiàn)在不同,他們關(guān)注的是現(xiàn)在。


It is difficult to define the millennials (born between the 1980s and early 2000) and the generation Z(born after 1995), but those who have emerged as the center of the current consumer market have different values and cultural tastes from the previous generation. They show the consumption characteristic that emphasizes individual happiness rather than group, sharing rather than ownership, and experience rather than product. They tend to expresses their belief by purchasing things containing social values and messages, not just purchasing things. They also enjoy the 'flex' culture that shows off their success or wealth, and invest easily in expensive luxury goods. Unlike the older generation who sacrificed the present for a guaranteed distant future, they are concentrating on the present.




千禧一代:在美國(guó),千禧一代通常指的是出生于1980到21世紀(jì)初的人。對(duì)于千禧一代的界限有很多分歧,但2018年3月1日,《紐約時(shí)報(bào)》宣布,美國(guó)皮尤研究中心對(duì)1981年至1996年的千禧一代進(jìn)行了定義。千禧一代也被稱為 Y 一代,意思是他們是 X 一代的下一代。因?yàn)槭煜?IT 技術(shù),這一代人也被稱為技術(shù)一代。在《時(shí)代》雜志上,他們把這一代人稱為“自我一代” ,因?yàn)檫@一代人的思考和行動(dòng)以自我為主。


Millennials: In the United States, millennials are usually referred to births from 1980 to the early 2000s. There were many disagreements about the boundaries of the millennial generation, but on March 1, 2018, the New York Times announced that the Pew Research Center in the United States defines millennials from 1981 to 1996. The millennials are also called generation Y, which refers that they are the next generation of the generation X. This generation is also called 'tech generation' in the sense that they are familiar with IT technology. And in Time magazine, they called ‘me generation' because it is a generation that thinks and acts mainly on oneself.




Z世代:指的是1995年后出生,在全球和美國(guó)市場(chǎng)上已占據(jù)最高人口比例,超過了千禧一代的人。目前,Z世代處于十幾歲到二十多歲的年齡段,他們被稱為數(shù)字原住民,不像千禧一代生長(zhǎng)在模擬和數(shù)字文化的混合環(huán)境中,他們從小就接觸到數(shù)字環(huán)境。


Generation Z: It is a word that refers to births since 1995 and already accounts for the highest proportion of the population in the global and US markets, surpassing the millennial generation. Currently, the generation Z are in their early teens and mid-20s which are called digital natives who have been exposed to the digital environment since childhood, unlike the millennials who grew up in a mixed environment of analog and digital culture.


首先,我們將用6個(gè)能代表千禧一代和z世代的關(guān)鍵詞來總結(jié)他們的特征。其目的是了解處于趨勢(shì)中心的他們,解讀流動(dòng)的變化,并預(yù)測(cè)未來。我們將以匹配每個(gè)關(guān)鍵詞的例子來研究年輕一代的特點(diǎn)。


First of all, we will summarize the characteristics of millennials and generation Z with six keywords that can represent the them. The purpose is to understand these generations that are the center of trends, read the flow of change, and predict the future. We will look at the characteristics of the younger generation with examples that match each keyword.



對(duì)于千禧一代和Z一代來說,被認(rèn)為是某一特定階層的專有財(cái)產(chǎn)的文化,如向公眾傳播的游戲、動(dòng)畫和科幻電影等,已經(jīng)成為他們生活的一部分。品牌歷來在戰(zhàn)略上排斥流行文化,但他們目前正試圖通過針對(duì)千禧一代和 z 世代的各種合作以反映年輕一代的品味和文化。


The culture that was regarded as the exclusive property of a specific class, such as games, animation, and SF movies spread to the public. For the millennial and generation Z, these cultures has become part of life. Traditionally, luxury brands have strategically excluded popular culture but they are currently trying to reflect younger generation’s tastes and culture, by conducting various collaborations targeting the millennial and generation Z.



#Supreme#StreetBrand#Drop


嘻哈和滑板在過去只是亞文化,現(xiàn)在成為談?wù)摮绷鞑豢苫蛉钡囊蛩?。擁有滑板運(yùn)動(dòng)員感性和理念的街頭品牌Supreme,受到全世界年輕人的支持。他們與許多品牌合作,激發(fā)年輕一代的收集欲望。千禧一代和Z世代毫不猶豫地將資金投入到他們喜歡的東西上。許多具有亞文化精神的公司和品牌正在引領(lǐng)這一潮流。


Hip-hop and skateboard culture which were only subcultures in the past are now an indispensable factor in talking about trends. The street brand Supreme, which has the sensibility and philosophy of skateboarders, is supported by young people around the world. They collaborate with many luxury brands which stimulates the desire of young generation to collect them. The millennials and generation Z does not hesitate to invest on the things they like. Many companies and brands which has the spirit of subcultures are leading the trend.



#Popmart#ArtToy#Blindbox#Unboxing


不同于動(dòng)畫或電影中的人物形象,藝術(shù)玩具是以藝術(shù)家的作品為基礎(chǔ),用3D形式制作出來的具有藝術(shù)感的人物。在中國(guó),它們現(xiàn)在是最為熱門的購買項(xiàng)目。千禧一代和Z世代喜歡享受愛好和表達(dá)個(gè)性的需求,使得這個(gè)市場(chǎng)正在迅速增長(zhǎng)。過去,藝術(shù)玩具是一種只有少數(shù)人喜歡的文化,但千禧一代和Z世代不把錢花在業(yè)余愛好上,他們把這種收集藝術(shù)玩具的文化傳播給了大眾。


An art toy is a kind of figure which is produced in 3D form based on artist's work with an artistic sense added to the toy, unlike the animation or movie character figure. This art toy figure is the hottest shopping item in China, and this market is growing rapidly with the demand of the millennials and generation Z, which likes to enjoy hobbies and express their personality. In the past, art toy was a culture which only a few people enjoyed but millennials and generation Z who does not spare money for hobbies, has spread this culture of collecting art toys to public.




復(fù)古是一種持續(xù)數(shù)年的潮流,如今,年輕一代更注重將舊的潮流創(chuàng)造詮釋為新事物,而不僅僅是發(fā)現(xiàn)舊的東西。千禧一代和 z 世代不懷念過去,但過去本身對(duì)他們很有吸引力。比起始終如一的文化,他們認(rèn)為多樣性和原創(chuàng)性是時(shí)髦的,他們沒有經(jīng)歷過的內(nèi)容是新出現(xiàn)的。


Retro is a trend that lasting for several years, and these days the younger generation focuses more on creating and interpreting the old trend to a new thing beyond just discovering old items. Millennials and generation Z are not nostalgic in the past, but 'past' itself can be attractive to them. They think that diversity and originality are trendy rather than consistent culture and the contents they have not experienced are coming up newly.



#UglyShoes#Balenciaga#Sneakers


Balenciaga在2017年發(fā)布了一款名為triple S的運(yùn)動(dòng)鞋,這是他們品牌之前從未見過的設(shè)計(jì)。它包含一個(gè)大的外底,一個(gè)不同成分的多層鞋幫,并被至少設(shè)計(jì)了3-4種顏色。triple S打開了ugly shoes的時(shí)代,因?yàn)樵O(shè)計(jì)得很像爸爸會(huì)穿的運(yùn)動(dòng)鞋,這種鞋也被稱為“老爹鞋”。在不同品牌中,他們發(fā)布了代表“ugly shoes”的運(yùn)動(dòng)鞋,并變得非常流行。90年代是運(yùn)動(dòng)服裝的全盛時(shí)期,許多品牌都使用技術(shù)重新推出當(dāng)時(shí)熱銷的產(chǎn)品。這些款式不是根據(jù)鐵桿趨勢(shì)匆忙制造的,它蘊(yùn)含著品牌悠久的傳統(tǒng)。年輕一代對(duì)這些品牌的設(shè)計(jì)和故事充滿熱情。


Balenciaga released a sneaker called triple S in 2017, which was a design that had not been seen in their brand before. It was consist with a large outsole, an upper with various parts in layers, and at least designed with 3-4 colors. This triple S opened the era of ugly shoes, which also called daddy shoes since design resembled the sneakers that dads wore. In various brands, they released sneakers representing ugly shoes and became very popular. The 90s was the heyday of sportswear, and many brands are relaunching popular products sold at the time with added current technology. These models are not made in a hurry according to the iron trend, containing the brand's long-standing heritage. The young generations are enthusiastic about the designs and stories of these brands.



#RetroRadio#RetroProduct#RetroInterior


千禧一代和Z世代在物質(zhì)豐富的生活環(huán)境中長(zhǎng)大,他們傾向于追求有價(jià)值的生活。在購買產(chǎn)品時(shí),除了實(shí)用性,他們更喜歡獨(dú)特性或故事化的產(chǎn)品。收音機(jī)曾經(jīng)是記憶的產(chǎn)物,但最近又形成了以年輕消費(fèi)者為中心的,復(fù)古收音機(jī)的新的消費(fèi)趨勢(shì)。集感性設(shè)計(jì)、故事性和多種功能于一體的復(fù)古收音機(jī),成為年輕消費(fèi)者喜愛的禮物,也是年輕一代想要擁有的室內(nèi)配飾。


Millennials and generation Z who grew up in a materially rich living environment, tends to pursue a worthy life. They prefer products that are unique or story-like in addition to practicality when purchasing products. Radio was once a product of memories, but recently a new consumption trend for retro radio has been formed, centering on young consumers. Retro radio, which contains sensual design, story and various functions, became a gift that young consumers enjoy and an interior accessories which young generation would want in their home.



在認(rèn)為環(huán)保就是性感的態(tài)度下,千禧一代和Z世代喜歡素食主義,覺得假皮草很新潮,甚至?xí)紤]制作過程來購買化妝品?,F(xiàn)在,企業(yè)已經(jīng)讀懂了這些市場(chǎng)趨勢(shì),并開始改變營(yíng)銷方式,只有注重可持續(xù)性而不是追求簡(jiǎn)單美的公司才能生存下來。


In the attitude of considering eco-friendly as sexy, the millennials and generation Z enjoys vegetarianism, considers fake fur trendy, and even buys cosmetic products by considering the process of making it. Now, companies have read these market trends and started to change marketing, and only companies with sustainability in mind rather than pursuing simple beauty survive.



#Patagonia#DoNotBuyThisJacket#Eco-friendly


Patagonia是一家以引領(lǐng)環(huán)境保護(hù)和自然保護(hù)而聞名的公司,他們發(fā)布了一則“不要買這件夾克”的廣告,兩年內(nèi)銷售額增長(zhǎng)40%。年輕一代不是通過廣告來購買Patagonia的產(chǎn)品,而是贊同他們的理念,即盡量減少對(duì)環(huán)境的破壞,追求公平交易,并且告知一件夾克的制作過程如何影響環(huán)境,通過商業(yè)來保護(hù)環(huán)境。


Patagonia is well known as a company that has been leading the environmental protection and nature conservation activities. They posted an advertisement called 'Do not buy this jacket' and sales increased by 40% in two years. Instead of advertising to buy their products, young generations sympathize with Patagonia's philosophy of minimizing environmental damage, pursuing fair trade, and preserving the environment through business by notifying how the process of making one jacket affects the environment.



#Freitag#UpCycling#Sustainability


Freitag品牌包包由卡車防水布、汽車安全帶、廢棄自行車橡膠管制作而成,是環(huán)境保護(hù)和循環(huán)再造的代表。它回收現(xiàn)有的廢棄品,并通過添加不同的價(jià)值進(jìn)行再創(chuàng)造。盡管售價(jià)高達(dá)200-600美元,但它目前有400家商店,去年的收入為10億美元。


The brand Freitag represents eco-friendly and up-cycling by making bags with truck waterproof fabrics, seat belts for cars, and rubber tubes for waste bicycles. It is a representative brand of up-cycling that recycles existing discarded products and re-creates them by adding different values. Despite the high-priced bag of 200 - 600 USD, it currently has 400 stores and revenue of 1 billion USD last year.



我們稱這些年輕人為“中性”的一代,他們接受不同的種族、性別和文化背景,并承認(rèn)其價(jià)值觀。與上一代相比,千禧一代和Z世代更了解和熟悉那些與自己不同的人,他們對(duì)同性戀和跨性別問題也很感興趣。他們沒有按照別人設(shè)定的標(biāo)準(zhǔn)去調(diào)整自己,而是有一種接受和肯定現(xiàn)狀的意識(shí)。


We call this young people as ‘gender neutral' generation who recognize various races, genders, and cultural backgrounds and admit their values. The millennials and generation Z are more familiar with people who are different from themselves than the previous generation, and they are interested in homosexuality and transgender issues. Rather than adjusting themselves to the standards set by others, they have a sense of accepting and affirming the way it is.



#GlobalPrideCrossing#AnimalCrossing


針對(duì)性少數(shù)群體的活動(dòng)在任天堂游戲《動(dòng)物之森》中舉辦,這款游戲在今年很受歡迎。由于時(shí)間和空間的限制,以前沒有機(jī)會(huì)參加活動(dòng)的人們,可以輕松地在虛擬空間中參與活動(dòng)。


A campaign for sex minorities was held at the Nintendo game 'Animal Forest', which became very popular this year. Because of the limitations of space and time, people who did not have chance to participate in the campaign before, were able to easily get involved in the campaign in the virtual space.



#Non-BinaryEmoji#Memoji#Apple


蘋果在其系統(tǒng)為每個(gè)表情符號(hào)添加了“性別中立”的選項(xiàng)。區(qū)分男人和女人的視覺元素被排除在外,比如頭發(fā)的長(zhǎng)度變?yōu)橹械乳L(zhǎng)度,并使用灰色,這樣衣服的顏色就不會(huì)讓人想起特定的性別。膚色也拓寬了選擇范圍,讓用戶選擇與自己相似的顏色。蘋果2019年推出的表情符號(hào)功能為更多種族和性別提供了多種選擇,包括臉型、膚色、發(fā)型等,人們可以對(duì)蘋果的性別和種族問題一目了然。


Apple added a 'gender neutral' options to every human emoji in its system. The visual elements that distinguish men and women were excluded, such as the length of the hair coming mid length and using gray color so that the color of the clothes would not be reminded of a specific gender. The skin color also broadened the range of choices which made users choose colors similar to themselves. The Memoji feature which Apple launched in 2019, offers a variety of options for more races and genders, including face shape, skin color, and hairstyles, giving a glimpse of Apple’s gender and racial issues.



數(shù)字原住民通常被稱為“擁有智能手機(jī)的一代人”,智能手機(jī)的發(fā)展比其他任何技術(shù)都更主導(dǎo)著數(shù)字原住民的生活。他們熟悉互聯(lián)網(wǎng)和IT,并且喜歡圖像和視頻內(nèi)容,而非文本,喜歡手機(jī)而非電視機(jī)和計(jì)算機(jī)。視頻是千禧一代和Z一代最突出的交流工具,他們把大部分時(shí)間花在YouTube上進(jìn)行搜索、學(xué)習(xí)、消費(fèi)和交流。YouTube已經(jīng)成為他們不可或缺的服務(wù)。由于他們是通過視頻學(xué)習(xí)和交流的一代人,許多公司利用影響力,在視頻內(nèi)容營(yíng)銷上投入大量的資金。在決定購買時(shí),他們不是根據(jù)廣告,而是通過各種渠道收集到的信息和經(jīng)驗(yàn)來判斷產(chǎn)品的價(jià)值。前幾代人主要受老一輩人的影響,而這一代人則受年齡相近的影響者的影響。此外他們熱衷于分享自己的興趣和生產(chǎn)內(nèi)容,他們可以被視為文化的消費(fèi)者和生產(chǎn)者。


Digital natives are often called 'generations born with smartphones', and the development of smartphones dominates the life of digital natives more than any other technology. They are familiar with the internet and IT, and prefer images and video content than texts, smartphones rather than TVs and computers. The most prominent communication tool for millennials and generation Z is the video. They spend most of their time on YouTube in searching, learning, consuming and communicating. YouTube has become an indispensable service for them. Since they are a generation that learns and communicates through video, many companies invest a lot of money in video contents marketing using influencers. They judge the value of the product based on the information and experience collected through various channels rather than advertisement when deciding the purchase. While previous generations were mainly influenced by older generations, this generation is influenced by similar ages of influencers. In addition, they are familiar with sharing their interest and producing contents, and they can be seen as a consumer of culture and a producer.



#GucciGang#Youtube#Influencer


17歲的說唱歌手Lil Pump穿Gucci產(chǎn)品演唱的Gucci Gang,在Billboard排行榜上名列第三。他通過Facebook,Instagram和YouTube對(duì)這首歌進(jìn)行各種視頻營(yíng)銷。2017年,以“Gucci” 和 “Gucci-ish”為關(guān)鍵詞的谷歌搜索量也高居時(shí)尚類榜首。當(dāng)其他品牌擔(dān)心自己的品牌形象會(huì)在網(wǎng)絡(luò)空間受損時(shí),Gucci在網(wǎng)絡(luò)進(jìn)行投資,使Gucci成為千禧一代和Z世代喜愛的品牌。


A 17-year-old rapper Lil Pump who is wearing Gucci products all over his body sang Gucci Gang and has reached number 3 on the Billboard charts. He conducted various video marketing through Facebook, Instagram and YouTube with this song. The number of Google searches with the keyword 'Gucci' or 'Gucci-ish' also topped the fashion category in 2017. When other luxury brands worry that their brand image will be damaged in the online space, Gucci invest in online branding and made Gucci a brand loved by millennials and generation Z.



#Meme#TikTok#Challenge#Remix


通過摘錄、模仿和再加工一些現(xiàn)有內(nèi)容而產(chǎn)生的模因,是業(yè)余愛好者和粉絲自愿創(chuàng)作并傳播到SNS的一種游戲文化。它像病毒一樣迅速傳播,并給分享相同模因的群體一種強(qiáng)烈的同質(zhì)感。最近,它作為一種代表千禧一代和 z 一代的數(shù)字游戲文化受到了廣泛關(guān)注。美國(guó)雜志《紐約客》稱TikTok為模因工廠,TikTok在美的用戶年齡60%為16到24歲之間,它是一款經(jīng)過優(yōu)化的應(yīng)用程序,用戶可以消費(fèi)15秒左右的短視頻,也可以自己制作內(nèi)容。年輕人可以通過TikTok來復(fù)制和創(chuàng)造新的模因。TikTok不同的兩個(gè)視頻有多種混音,并且不同的人編輯相同的圖像,可以產(chǎn)生新的,感覺不一樣的圖像。此外,“挑戰(zhàn)”文化最近在TikTok變得流行起來。從表演特定任務(wù),到舞蹈挑戰(zhàn),再到偶像歌曲,各式各樣的挑戰(zhàn)正在TikTok中舉行。因此,千禧一代和Z世代正通過TikTok積極地引領(lǐng)內(nèi)容市場(chǎng)。


The meme, which is created by excerpts, parody, and reprocessing some of the existing content, is consumed as a play culture that amateurs and fans voluntarily make and spread to SNS. It spreads rapidly like viruses and gives a strong sense of homogeneity to groups that share the same memes. Recently, it has been getting attention as a digital play culture representing the millennial and generation Z. The American magazine New Yorker also called the TikTok a meme factory, which the 60% of Tiktok users in US are 16 to 24 years old. TikTok is an app optimized to consume short videos of about 15 seconds or to produce content by oneself. Young people can reproduce memes or create new memes by using Tiktok. There are many remixes of two different videos of Tiktok, and new images are recreated in a different feeling depending on the person who edits the same images. In addition, the 'challenge' culture has recently become popular in Tiktok. Various types of challenges are being held, ranging from to perform a specific mission or dance challenge to dance to the songs of idols. As such, the millennials and generation Z is actively leading the content market through Tiktok.



千禧一代和 z 世代把消費(fèi)看成是當(dāng)前的滿足感,而不是未來的儲(chǔ)蓄,新的體驗(yàn)是必須的投資。即使減少了其他方面的開支,他們也會(huì)根據(jù)自己的心情和目的,投資消費(fèi)一種不同尋常的、更加現(xiàn)實(shí)的體驗(yàn)。


The millennials and generation Z who focus on consumption for current satisfaction rather than savings for the future, new experiences are a must-investment. Even if they reduce the expenditure on other parts, they invest in consuming an unusual and more realistic experience depending on their mood and purpose.



#GentleMonster#CultureExperience#RetailExperience


創(chuàng)造與眾不同的概念空間,引導(dǎo)用戶體驗(yàn)和購買眼鏡產(chǎn)品,Gentle Monster在空間上充了產(chǎn)品購買與體驗(yàn)價(jià)值的空間策略,給千禧一代和Z世代帶來好感。針對(duì)線上線下,他們同時(shí)有效滿足了這幾代人的體驗(yàn)型消費(fèi)傾向。


Gentle Monster's spatial strategy, which made a space of unusual concept and lead to experience and purchased glasses products in it, filled the experiential value of product purchases in the space and led to the favorable feeling of the millennials and generation Z. It is effective to meet the experience-oriented consumption tendency of these generations by simultaneously targeting on-line and off-line.



#NRC#Nike+RunClub#SNS#BrandExperience


Nike通過各種營(yíng)銷活動(dòng),提供令人愉悅的跑步體驗(yàn),引領(lǐng)跑步趨勢(shì)。在每年都舉辦高水平跑步活動(dòng),并且可以與專業(yè)教練和參與者一起訓(xùn)練的Nike + Run Club上,根據(jù)不同的距離、速度和水平等技能,Nike為跑步者提供定制的跑步程序。Nike的營(yíng)銷策略注重運(yùn)動(dòng)的難忘體驗(yàn),而不僅僅是銷售運(yùn)動(dòng)鞋,因?yàn)槟切w驗(yàn)到跑步樂趣的年輕消費(fèi)者會(huì)在社交媒體上,不斷上傳展示自己跑步記錄的照片。


Nike is leading the running trend through various marketing activities that provide a pleasant running experience. Nike + Run Club, which hosts the highest level of running events every year and can train with professional trainers and participants, provides customized running programs for various runners according to their skills such as distance, speed and level. Nike's marketing strategy is focused on the unforgettable experience of sports, not just selling sneakers, as young consumers who have experienced the pleasure of running on social media every day are constantly uploaded with photos that boast their running records.



千禧一代和Z世代追求理性消費(fèi),并首先傾向于投資自己。接受一個(gè)品牌的方式也取決于品牌所追求的價(jià)值,它所具有的風(fēng)格,以及它與自身的契合程度。過去,品牌在戰(zhàn)略上排斥流行文化,但現(xiàn)在他們正在針對(duì)年輕一代進(jìn)行各種嘗試。千禧一代和Z世代正在成為最有影響力的消費(fèi)者,品牌需要的是能夠直接吸引他們品味并帶來樂趣的營(yíng)銷,而不是他們過去所追求的優(yōu)雅的品牌戰(zhàn)略。


The millennials and generation Z pursues rational consumption and tend to put investment on theirselves first. The way of accepting a brand is also selectively done depending on what value the brand pursues, what style it has, and how much it fits with themselves. In the past, luxury brands have strategically excluded pop culture, but now they are showing various attempts targeting the young generation. For the millennials and generation Z , who are emerging as the most influential consumer now, brands will need marketing that can directly attract their taste and give fun rather than the elegant brand strategy that they have pursued in the past.




Chrome Hearts x Converse Chuck Taylors


Chrome Hearts和Converse合作打造的全明星運(yùn)動(dòng)鞋已經(jīng)發(fā)布。這款聯(lián)名運(yùn)動(dòng)鞋世上僅有一雙,用Chrome Hearts的識(shí)別標(biāo)志-金屬十字徽標(biāo)緊密地貼在匡威運(yùn)動(dòng)鞋中設(shè)計(jì)而成。這款運(yùn)動(dòng)鞋在Bam Margiela的Instagram上發(fā)布,他一直在發(fā)穿著聯(lián)名運(yùn)動(dòng)鞋進(jìn)行滑板運(yùn)動(dòng)的視頻。


The all-star sneakers which is created through a collaboration between Chrome Hearts and Converse have been released. The collaboration sneakers are only one pair exists in the world and designed in a form that metal cross logo, which is the signature of Chrome Hearts, is tightly attached in Converse sneakers. The sneaker was released on the Instagram of Bam Margiela, who has been releasing videos of his skateboarding wearing collaboration sneakers.



Chanel Game Center


品牌Chanel開了一家游戲中心,當(dāng)你進(jìn)入這個(gè)游戲中心,你會(huì)發(fā)現(xiàn)一個(gè)化妝品與娛樂共存的世界。以游戲機(jī)為概念,Chanel的目的是購物+娛樂。比起引誘人們對(duì)品牌進(jìn)行單次性購買,重要的是讓他們體驗(yàn)品牌并塑造一個(gè)年輕的形象。質(zhì)量和苛性比固然重要,但是針對(duì)千禧一代和Z世代,品牌體驗(yàn)是否有吸引力和是否有樂趣更重要。


Luxury brand Chanel opened a game center. When you enter this game center, you will find an interesting world where cosmetics and entertainment coexist. Chanel aimed at the effect of shoppertainment (shopping + entertainment) with the concept of a game arcade. Rather than inducing one-dimensional purchase of a brand product, it is important to make people experience the brand and to make a young image. The quality and caustic ratio are important, but it is more important whether the brand experience is attractive and fun to target the millennials and generation Z.



Louis Vuitton x NIGO


Louis Vuitton設(shè)計(jì)師Virgil Abloh和NIGO(日本街頭時(shí)尚的傳奇人物和Human Made的創(chuàng)始人)進(jìn)行了一次合作。NIGO曾為日本代表性街頭品牌Bape工作,Humanmade是NIGO于2010年創(chuàng)立的服裝品牌,正在推出基于日常主題的美國(guó)復(fù)古休閑服裝。這一合作,是通過Louis Vuitton 2020年秋季前系列外觀手冊(cè)公布的,由標(biāo)題為L(zhǎng)V2的設(shè)計(jì)產(chǎn)品組成,用Nigo的風(fēng)格表達(dá)Louis Vuitton的特征。當(dāng)這兩個(gè)在高級(jí)時(shí)裝和街頭品牌領(lǐng)域處于領(lǐng)先地位的品牌打破界限,展現(xiàn)出前所未有的融合,千禧一代和Z一代都非常喜歡。


Louis Vuitton's designer Virgil Ablo and NIGO, the legend of Japanese street fashion and the founder of Humanmade, have collaborated together. Humanmade is a clothing brand founded in 2010 by NIGO, who worked for a representative street brand in Japan, Bape. Humanmade is introducing American vintage casual style costumes that are based on everyday themes. This collaboration, which was unveiled through Louis Vuitton's 2020 pre-fall collection look-book, consists of design products with the title of LV2 and expressing Louis Vuitton's signature in Nigo's style. When the two brands that were leading the way in each area of high fashion and street brand broke down the boundary and showed the fusion which has never been before, the millennials and generation Z love it.




Burberry


掉落式銷售策略是指,通過一些商店或社交網(wǎng)絡(luò)以驚人的方式銷售限量版或小批量生產(chǎn)的產(chǎn)品。受Supreme等街頭品牌投放策略的啟發(fā),Burberry每月17日推出一款針對(duì)年輕一代口味,僅限于線上銷售的新產(chǎn)品。掉落式銷售策略是一種能夠滿足千禧一代和Z世代渴望擁有特殊產(chǎn)品需求的策略。


The sales strategy called drop refers to the way in which limited editions or products made in small quantities are sold in a surprise manner through some stores or social networks. Burberry has launched a new product that targets the tastes of younger generations on the 17th of each month, which is limited to online, inspired by streetwear brand drop strategies such as Supreme. The drop-type sales strategy is a strategy that can satisfy the needs of the millennials and generation Z, which has a desire to own special products.



PALACE


PALACE是一個(gè)以滑板服裝為主,對(duì)年輕人有很大影響的英國(guó)街頭品牌,在英國(guó)被稱為“Superme”。PALACE使用街頭文化經(jīng)常引用的復(fù)古元素來打造品牌形象。PALACE 公司有意通過模擬VHC(家庭視頻系統(tǒng))的拍攝方式進(jìn)行市場(chǎng)營(yíng)銷。他們還通過模仿不同的品牌或制作看起來像是開玩笑的產(chǎn)品說明頁,來迎合想要獨(dú)特和新鮮事物的,年輕一代的口味。通過這些營(yíng)銷,PALACE得到了喜歡復(fù)古和街頭文化的年輕一代的好評(píng)。


PALACE is a British street brand which mainly has skateboard clothing and has a great influence on young people that it is called Superme in UK. As a street brand, PALACE uses retro elements that are often cited in street culture to create the brand image. PALACE has intentionally attempted marketing through analogue VHS (video home system) shooting. They also try to target the tastes of younger generations who want unique and new things, by parodying different brands or making product description pages that seem to be written as a joke. Through these marketing, PALACE has got a good response from the younger generation who like retro and street culture.



Lululemon


與其他時(shí)尚品牌不同,Lululemon強(qiáng)調(diào)通過品牌而不是產(chǎn)品本身獲得體驗(yàn)。Lululemon有各種各樣的項(xiàng)目,如瑜伽、冥想、現(xiàn)代舞和跑步,顧客可以定期參加,并一起享受鍛煉和文化。Lululemon的 核心哲學(xué)是汗水生活,這是一種喜歡流汗,熱愛生活的人的生活方式。千禧一代和Z世代更喜歡穿能讓自己滿意的衣服,而不是穿衣服給別人看,Lululemon品牌本身就能吸引到他們?,F(xiàn)有的時(shí)尚服裝市場(chǎng)總體呈下降趨勢(shì),但運(yùn)動(dòng)休閑服裝市場(chǎng)在年輕一代中穩(wěn)步增長(zhǎng)。


Different from other fashion brands, Lululemon emphasizes the experience that can be gained through the brand than the product itself. Lululemon has various programs such as yoga, meditation, modern dance and running that customers can regularly participate in, and enjoys exercise and culture together. At the heart of Lululemon’s philosophy is sweat life, which means a lifestyle of people who love sweating and love their lives. The branding of Lululemon alone could appeal to the millennials and generation Z who prefer to wear which can satisfy themselves rather than to wear clothes to show others. The existing fashion apparel market is declining overall, but the athleisure wear market is steadily growing in the young generation. 





Alexander Wang x McDonalds


去年11月,Alexander Wang發(fā)布了一款新產(chǎn)品,緞面午餐袋。因?yàn)橥庑慰崴汽湲?dāng)勞的午餐袋,這款產(chǎn)品備受關(guān)注。Alexander Wang后來與麥當(dāng)勞合作發(fā)布了午餐袋和野餐籃。他說“麥當(dāng)勞品牌一直是最接近流行文化的品牌,能夠參與到創(chuàng)意項(xiàng)目中來,我感到很榮幸”。麥當(dāng)勞中國(guó)首席營(yíng)銷官徐佳婷(Christine Xu)也提到,“與Alexander Wang的合作反映了中國(guó)消費(fèi)者對(duì)新理念和創(chuàng)新的強(qiáng)烈渴望,我希望這次合作能使人們微笑,能給他們的日常生活帶來微小但令人驚嘆的快樂”。


In November last year, Alexander Wang released a new product, the satin lunch bag clutch. This product got some attention because the shape resembled McDonald's lunch bag. Alexander Wang later released McDonald's lunch bag and picnic basket through collaboration with McDonald's. He said "The McDonald's brand is always the closest to pop culture and is honored to participate in creative projects,". McDonald's China CMO, Christine Xu also mentioned that "The collaboration with Alexander Wang reflects the strong desire of Chinese consumers for new ideas and innovations. I hope this collaboration will make people smile and give them a small but amazing pleasure in their daily lives."



CocaCola NewCoke x Stranger Things


1985年,可口可樂推出一種新配方贏得了百事可樂的競(jìng)爭(zhēng),但由于現(xiàn)有消費(fèi)者的強(qiáng)烈反對(duì),新配方在上市三個(gè)月后就停止了生產(chǎn)。30年后,這款新可樂隨Netflix電視劇《怪奇物語3》回歸。30年前沒體驗(yàn)過新可樂的年輕一代通過這部劇對(duì)新可樂的味道產(chǎn)生了好奇,可口可樂通過一家特殊的彈出式商店復(fù)制了新可樂的配方以及設(shè)計(jì),并對(duì)這款限量版新可樂進(jìn)行銷售。


In 1985, Coca-Cola launched a new recipe to win their competitor Pepsi, but it stopped production in three months after its launch due to strong opposition from existing consumers. The New Coke, returned with Netflix drama ‘Stranger Things 3’ in 30 years. Young generations who have not experienced New Coke 30 years ago have been curious about the taste of New Coke through this drama, and Coca-Cola has reproduced the recipe as well as the design through a special pop-up store, and sold this limited edition New Coke.



Gompyo Flour


Gompyo最初是韓國(guó)磨坊公司具有代表性的面粉品牌,但現(xiàn)在,它與LG家居&保健、Run Rabbit、Swanicoco和4XR等各種品牌合作,以復(fù)古概念展示了廚房清潔劑、化妝品、服裝、啤酒等各種產(chǎn)品。雖然“面粉等于Gompyo”在中年人中根深蒂固,但它被認(rèn)為是適合年輕一代的,新穎而有趣的品牌。這種激進(jìn)而富有挑戰(zhàn)性的變化使其成為的復(fù)古品牌。


Gompyo was originally a representative flour brand of company called Korean mill, but now it is showing various products such as kitchen detergent, cosmetics, clothing, beer through collaboration with various brands such as LG Household & Health Care, Run Rabbit, Swanicoco and 4XR in retro concept. The fact that flour equals Gompyo is a stereotype that has been deeply rooted in middle-aged people, but it is recognized as a new and fun brand suitable for the the younger generations. This radical and challenging change in Gompyo has made them the most popular retro brand.



Jinro Soju


Jinro是最近隨著newtro潮流而更新的品牌之一。 Jinro透露了“ Jinro is back”的logo和淺藍(lán)色瓶包裝。這款重新詮釋了他們?cè)瓉砥放菩蜗蟮漠a(chǎn)品在推出后兩個(gè)月內(nèi)就實(shí)現(xiàn)了銷售目標(biāo)。 Jinro正通過與Obey,Covernat等街頭時(shí)尚品牌合作,與戶外品牌Helinox發(fā)行野餐裝等方式,努力吸引年輕一代。


Jinro is one of the brands that have recently renewed with the newtro trend. Jinro revealed the 'Jinro is back' logo and light blue bottle package, which reinterpreted their original brand identity has achieved the target sales amount within two months after launching . Jinro is making efforts to appeal to the younger generation by collaborating with street fashion brands like Obey, Covernat and releasing picnic sets with outdoor brand Helinox.





Louis Vuitton x LOL


積極抓住年輕消費(fèi)者的Louis Vuitton也將數(shù)字營(yíng)銷擴(kuò)展到了電子競(jìng)技領(lǐng)域。Louis Vuitton與英雄聯(lián)盟合作的特別目標(biāo)似乎是中國(guó)消費(fèi)者,因?yàn)樗麄兿M肔oldCup (英雄聯(lián)盟+世界杯)在中國(guó)的流行來擴(kuò)展消費(fèi)者的體驗(yàn)。


Louis Vuitton, which is aggressively marketing young consumers, has also expanded its digital marketing to e-sports. The Louis Vuitton's League of Legend partnership seems to have especially targeted for Chinese consumers since they expect to expand customer experience by utilizing the popularity of LoldCup(League of Legend + World cup) in China.



PUBG x BAPE


韓國(guó)皇室游戲PUBG與日本街頭品牌BAPE合作。通過這次合作,BAPE發(fā)布了含有PUBG品牌元素的標(biāo)志性產(chǎn)品,比如鯊魚迷彩拉鏈風(fēng)帽、短袖襯衫、背包和其他物品。如果用戶在現(xiàn)實(shí)中購買這些產(chǎn)品,他們將獲得可以在游戲中使用的代碼,這些代碼可以獲取 BAPE的物品。通過這款合作產(chǎn)品,PUBG的用戶不僅可以在現(xiàn)實(shí),還可以在游戲中看起來獨(dú)特而時(shí)尚。


A Korean battle royal game PUBG and a Japanese street brand BAPE collaborated together. Through this collaboration, BAPE's iconic products such as shark camo zip-up hood, short-sleeved shirts, backpacks, and other items with PUBG brand elements were released. If the user buy these products in reality, they will be given code to get BAPE items that can be used in the game. Through this collaboration product, PUBG users can look unique and trendy not only in reality but also in the game.



Animal crossing


與被新冠疫情捆住了手和腳的現(xiàn)實(shí)世界不同,動(dòng)物之森允許人們?cè)谔摂M空間中享受日常生活,它給那些不得不呆在家里的人帶來了滿足感。在這個(gè)游戲中,你可以通過換幾件在現(xiàn)實(shí)中很難穿的衣服來展示你的時(shí)尚感。隨著游戲?qū)r(shí)尚越來越感興趣,品牌也進(jìn)入了虛擬世界。Valentino在動(dòng)物之森中發(fā)布了二十種風(fēng)格的衣服,Mark Jacobs 免費(fèi)發(fā)布了6套,Anna Sui和 GCDS也有參與。對(duì)于追求個(gè)性和自我滿足的千禧一代與Z世代來說,游戲中的服飾和配飾成為了一種很好的推廣品牌的方式。


Unlike the real world, where Corona has tied people’s hands and feet, the Animal Forest allows people to enjoy everyday life in the virtual space which has provided surrogate satisfaction to those who have to spend time at home. In this game, you can show off your fashion sense by changing several luxury clothes that are hard to wear in reality. As the interest in fashion in the game grew, luxury brands also entered the virtual world. Valentino introduced twenty styles of clothes in animal forests, and Mark Jacobs distributed six new clothing free of charge in the game. Anna Sui and GCDS also participated. The luxury costumes and accessories in the game have become a great way to promote the power brand for the millennials and generation Z who pursues personality and self-satisfaction.



Zepeto x Blackpink


全球AR角色服務(wù)公司Zepeto與韓國(guó)偶像Black Pink有過一次代表性的合作。由于 Zepeto APP沒有時(shí)間和空間的限制,粉絲可以和Black Pink的角色合照,并一起享受和參加各種各樣的活動(dòng)。如今,年輕一代喜歡在網(wǎng)上創(chuàng)建他們自己的角色,這些角色生活在網(wǎng)絡(luò)空間,比在現(xiàn)實(shí)擁有更多的自由。


Global AR avatar service Zepeto has presented collaboration with Korean pop idol Black Pink. Since there are no restriction in time and space within Zepeto app, fans can take pictures with avatarized Black Pink members or enjoy a variety of activities together. These days, young people enjoy creating their own character (multi persona) in the online space, living in the online space that can have more freedom than reality. 



Fortnite x Travis Scott


Travis Scott在 《堡壘之夜》的游戲世界中舉辦演唱會(huì)并發(fā)布新歌。1230萬用戶在世界第五大游戲中同時(shí)觀看了這場(chǎng)show。他們實(shí)時(shí)演出,用戶則在游戲中交流和享受這場(chǎng)演唱會(huì)。在因?yàn)樾鹿谝咔闊o法舉辦演唱會(huì)的情況下,通過游戲進(jìn)行的虛擬演唱會(huì)給年輕一代帶來了特別的樂趣。


Travis Scott held a concert at the Fortnite Games and also released the new song.12.3 million people watched the show at the same time in this fifth largest game of the world. They performed in real time and the users communicated and enjoyed the concert in the game. In a situation where Corona can not have a real concert, virtual concerts through games have given special fun to younger generations.



Peace Elite x Tesla


《和平精英》是騰訊游戲公司出品的一款皇室戰(zhàn)爭(zhēng)手游。通過與美國(guó)著名電動(dòng)汽車品牌特斯拉合作,《和平精英》的用戶可以在游戲中直接駕駛特斯拉。此前,當(dāng)《和平精英》推出一款可以在游戲中駕駛的瑪莎拉蒂時(shí),游戲用戶增加到了2700萬。與特斯拉的合作也有望產(chǎn)生巨大的廣告效應(yīng)。


Peace Elite is a battle royal mobile game made by Tencent Games. Peace Elite has included Tesla cars that can be driven directly within the game through collaboration with Tesla, a well-known American electric car brand. Previously, when Peace Elite launched a Maserati car that can be played in the game, the number of game users increased to 27 million. The collaboration with Tesla is also expected to have a huge advertising effect.





Snapchat x Demian Hirst


當(dāng)代最著名的英國(guó)藝術(shù)家 Damien Hirst發(fā)明了一種 Snapchat鏡頭,任何人都可以在Snapchat APP中使用AR技術(shù)來體驗(yàn)他的旋轉(zhuǎn)作品。有了這個(gè)鏡頭,人們可以用Demian Hirst完成作品的方式在APP上作畫。Damien Hirst和Snapchat建議通過這個(gè)項(xiàng)目,向那些致力于為弱勢(shì)群體提供現(xiàn)代醫(yī)學(xué)科學(xué)的非盈利組織捐款。這項(xiàng)捐贈(zèng)政策使Snapchat得到了不大會(huì)為社會(huì)或環(huán)境花錢的,千禧一代和Z世代的巨大反響。


One of the most notable British artist of contemporary artists Damien Hirst created a Snapchat lens that allows anyone to experience his spin works using augmented reality within the Snapchat app. With this lens, people can paint on the app the way the actual Demian Hirst completes his work. Through the project, Damien Hirst and Snapchat are recommending donations to non-profit social organizations that strive to provide modern medical science to vulnerable communities. Through this donation policy, Snapchat was able to get a great response from the millennials and generation Z who does not spare money for social or environmental significance.



KAWS Virtual Gallery


隨著新冠病毒對(duì)空間的日益限制,世界各地的一些畫廊和博物館允許人們?cè)诰€觀看他們的展覽。最近墨爾本國(guó)家美術(shù)館與年輕一代喜愛的藝術(shù)家 KAWS共同舉辦了一個(gè)虛擬展覽。進(jìn)入NGV網(wǎng)站,人們可以在一個(gè)由3D構(gòu)成的空間里欣賞一個(gè)逼真的展覽。此外,KAWS還與Acute Art合作,創(chuàng)作了可在全球12個(gè)城市體驗(yàn)的AR雕塑。Acute Art通過積極利用VR和AR等尖端技術(shù),引入了新的視覺藝術(shù)形式。通過手機(jī)的AR技術(shù),用戶可以自由地觀看用3D實(shí)現(xiàn)的KAWS雕塑。采用這一先進(jìn)技術(shù)的展覽超越了時(shí)間和空間的限制,同時(shí)展示了綠色展覽的可能性。


With the corona virus increasing spatial constraints, several galleries and museums around the world are allowing people to view their exhibitions online. Recently, the National Gallery of Melbourne opened a virtual exhibition with KAWS, the artist who is loved by younger generations. Entering the NGV website, people can enjoy a realistic exhibition in a space composed of 3D. In addition, KAWS has created AR sculptures that can be experienced in 12 cities around the world by collaborating with Acute Art, which introduces new forms of visual art by actively utilizing cutting-edge technologies such as VR and AR. Through the AR technology of the mobile phone, the user can freely view the KAWS sculpture implemented in 3D. The exhibition using this advanced technology transcended the constraints of exhibition space and time, and at the same time showed the possibility of eco-friendly exhibition.



Apple [AR]T


使用AR技術(shù),蘋果發(fā)布了一款名為[AR]T的體驗(yàn)系列。該系列由交互式 [AR]T Walk組成,其中包括世界著名的當(dāng)代藝術(shù)家的AR作品;以及Apple Store的[AR]T,用戶可以在全球所有蘋果商店體驗(yàn)AR作品。[[AR]T Walk的概念是體驗(yàn)舊金山、倫敦、香港和東京等城市,并在每個(gè)城市街道行走的同時(shí),通過iPhone的AR技術(shù)欣賞藝術(shù)作品。在Apple Store的[AR]T中,用戶可以在蘋果專賣店欣賞Nick Cave擴(kuò)增現(xiàn)實(shí)的藝術(shù)作品。專注于向數(shù)字原生一代分享有趣經(jīng)驗(yàn)的方式,令蘋果的AR技術(shù)推廣取得了成功。


Apple has released an experience series using augmented reality called [AR]T. This [AR]T series consists of interactive [AR]T Walk, which includes AR works by world-renowned contemporary artists, and [AR]T at the Apple Store, where you can experience AR works in all Apple stores around the world. [[AR]T Walk has the concept of experiencing cities such as San Francisco, London, Hong Kong, and Tokyo, and enjoying art through the AR technology of iPhone while walking the streets of each city. [AR]T at the Apple Store, which can be experienced in the Apple Store, can enjoy Nick Cave's augmented reality artwork in the Apple Store store. Apple's AR technology promotion focusing to share interesting experiences to the digital native generation has been successful.



千禧一代和Z世代都是數(shù)字原住民,他們使用移動(dòng)設(shè)備的比例遠(yuǎn)遠(yuǎn)高于其他任何一代。通過移動(dòng)設(shè)備,這些年輕一代可以進(jìn)行超越時(shí)空限制的交流,他們喜歡通過圖像和視頻與同齡人交流,通過社區(qū)獲取新聞和信息,也更加自由地展示自己的個(gè)性。這幾代人的這些特點(diǎn)也被應(yīng)用到了移動(dòng)APP的首選項(xiàng)上。對(duì)于千禧一代和Z世代來說,從通信到社交,購物到銀行,移動(dòng)APP幾乎應(yīng)用于他們?nèi)粘I畹拿恳徊糠?。本?jié)我們將分享市場(chǎng)上正在興起的年輕一代的移動(dòng)服務(wù)。


The millennials and generation Z are digital natives who use mobile devices overwhelmingly higher than any other generation. These younger generations who can communicate beyond the spatial and temporal limits through mobile devices, enjoy communicating with peers through images and videos, get news and information through the community, and reveal their individuality more freely. These characteristics of this generations have also been applied to mobile app preferences. For the millennials and generation Z, mobile apps are used almost every part of their daily lives, from communication to socializing, shopping and banking. In this section, we will share about the mobile services that are emerging among the young generation market.



年輕一代喜歡根據(jù)圖片或視頻來尋找、編輯和分享他們想要的信息,他們喜歡不厭其煩地制作和消費(fèi)在線內(nèi)容來展現(xiàn)自己。此外,千禧一代和Z世代熱衷于不到一分鐘的短視頻。因?yàn)槟贻p人非常渴望用簡(jiǎn)單易行的方式制作和分享他們的日常故事,可以制作短視頻的,像Instagram 和 TikTok一樣的APP越來越受歡迎。


The younger generations enjoys finding, editing, and sharing information they want based on images or videos. They enjoy showing off themselves by producing and consuming online contents without repulsion. Also, the millennials and generation Z are enthusiastic about short videos of less than a minute, not long breathing. Like Instagram and TikTok, apps that users make their own short-form videos have gained popularity because young people had a great desire to make and share their everyday stories in a simple and easy way.



Tiktok


TikTok提供各種各樣的工具幫助人們進(jìn)行短視頻內(nèi)容創(chuàng)作。通過AR技術(shù)修飾人臉的濾鏡、各種貼紙、速度控制器、反向播放和慢動(dòng)作等功能,只需按幾個(gè)按鈕,就可以應(yīng)用于用戶的視頻。不像其他視頻平臺(tái),用戶可以在TikTok輕松地編輯他們的視頻并分享樂趣。


TikTok provides a variety of tools that helps people to create a short form video contents. The filters that decorate faces through AR technology, various stickers, speed controler, reverse playback and slow motion function can be applied to the user’s video just by pressing several buttons. Unlike other video platforms, users can be easily edit their videos and share to have fun.



Instagram story


Instagram Story是一項(xiàng)功能,它允許用戶將照片和視頻分享到訂閱源,并實(shí)時(shí)分享他們的日常生活。Instagram Story有一個(gè)特點(diǎn),內(nèi)容會(huì)在24小時(shí)之后消失。因?yàn)橹纼?nèi)容會(huì)很快就消失,用戶可以以一種更隨意的方式,實(shí)時(shí)展示他們的日常生活。Instagram Story受到喜歡獲取關(guān)注,喜歡展示和表現(xiàn)自己的千禧一代和Z世代的歡迎。


Instagram Story is a function that allows users to upload photos and videos to their feed and share their daily lives in real time. The Instagram Story has a special feature that contents disappears after 24 hours. People can show their daily lives in real time, in a more casual way since they know the content will disappear soon. Instagram stories gained popularity from millennials and generation Z who enjoy receiving attention and enjoying revealing and showing off themselves. 



IGTV


Instagram還推出IGTV,一個(gè)新的,允許用戶上傳長(zhǎng)達(dá)一小時(shí)視頻的視頻平臺(tái)。IGTV開通移動(dòng)優(yōu)化視頻頻道,降低了新影響者的門檻。雖然在YouTube上發(fā)布內(nèi)容的用戶比例要遠(yuǎn)遠(yuǎn)低于使用它的用戶,通過在IGTV的個(gè)人賬戶上發(fā)布內(nèi)容,Instagram有讓用戶成為內(nèi)容生產(chǎn)商的潛力,而不僅僅是使用者。


Instagram also launched IGTV, a new video platform that allows users to upload videos up to an hour long. IGTV opened mobile-optimized video channels and lowered the threshold for new influencers. While YouTube has a significantly lower percentage of YouTubers who publish content than consumers, Instagram has more potential for users to become a provider than just al consumers by posting content on their personal accounts using IGTV.



與前幾代人在書籍或門戶網(wǎng)站上搜索信息不同,千禧一代和Z世代喜歡通過在基于視頻內(nèi)容的手機(jī)應(yīng)用或社交媒體上提問來獲取答案,它們可以提供即時(shí)的反饋和交流。


Unlike previous generations who searched books or portal sites for information, millennials and generation Z like to get answers by asking questions on video contents based mobile apps or social media that can provide immediate feedback and communication.



Youtube


YouTube是千禧一代和Z世代用來獲取信息的最大移動(dòng)APP。例如當(dāng)年輕一代想知道如何烹飪時(shí),他們會(huì)搜索YouTube而不是閱讀書籍或在門戶網(wǎng)站上搜索。根據(jù)最近的一項(xiàng)研究,59%的千禧一代和Z世代更喜歡從YouTube視頻中學(xué)習(xí),55%的人說他們?cè)赮ouTube上學(xué)到的東西實(shí)際上很有幫助。對(duì)于這幾代人來說,YouTube已經(jīng)成為教育和娛樂的平臺(tái)。


YouTube is the largest mobile app used by millennials and generation Z to acquire information. For example, when they want to know how to cook, younger generation search YouTube instead of reading books or search on portal sites. According to a recent study, 59 % of millennials and generation Z prefer to learn from YouTube videos and 55% said what they learned on YouTube was actually helpful. For these generations, YouTube has become a platform for education as well as entertainment.



Twitch


Twitch是一款千禧一代和Z世代都喜歡的,特定游戲流媒體服務(wù)。Twitch針對(duì)的是想在游戲文化中進(jìn)行積極交流的游戲粉絲,作為一名社區(qū)成員,他們?cè)赥witch內(nèi)感到聯(lián)系,自愿管理和擴(kuò)大Twitch的文化,并喜歡觀看和交流他們喜歡的 star streamers.


Twitch is a game-specific streaming service which millennials and generation Z like. Twitch is targeted for game fans who wants to actively communicate inside the game culture. Game fans feel connected within Twitch, voluntarily manage and expand Twitch's culture as a community member and enjoy seeing and communicating with their favorite star streamers.



Reddit


Reddit是美國(guó)的一家社交新聞網(wǎng)站。大致來說,它是一個(gè)巨大的社區(qū)網(wǎng)站,但它專注于分享有趣的新聞和信息,而不是像社交網(wǎng)絡(luò)一樣注重成員之間的交流。千禧一代和Z世代通過訪問Reddit社區(qū)來了解他們感興趣的主題。調(diào)查顯示,87%的千禧一代和Z世代表示,Reddit社區(qū)包含了他們想要的所有信息。


Reddit is an American social news community site. Basically, it is a huge community site, but it focuses on sharing interesting information and news, rather than on communication among members like social network services. The millennials and generation Z visits Reddit community to learn about certain topics they are interested in. According to the survey, 87% of the millennials and generation Z said there are communities in Reddit that contain all the information they want.



隨著千禧一代和Z世代的口味變得更加個(gè)性化和細(xì)分化,他們希望獲得的是適合自己口味的內(nèi)容。精選服務(wù)對(duì)個(gè)人口味進(jìn)行分析并推薦合適的內(nèi)容。最近,AI技術(shù)可以讓用戶更加細(xì)致地獲得他們想要的內(nèi)容推薦。


As the tastes of the millennials and generation Z are becoming more personalized and subdivided, they want content that suits their own tastes. Curation service analyzes individual tastes and recommends suitable content. Recently, AI technology has allowed for users to get recommendation of contents they want more delicately.



Spotify


Spotify的每周發(fā)現(xiàn)功能, 可以自動(dòng)分析用戶聽過的,并推薦適合他們口味的音樂。用戶聽得越多,越能得到更好的推薦。通過這個(gè)功能,Spotify已經(jīng)成為世界上最好的音樂流媒體平臺(tái),它滿足了許多千禧一代和Z世代的口味。


Spotify's discover weekly feature is a function that automatically analyzes the music that users have listened to and recommends music which suits their tastes. More and more they listen to, the they can get better recommendation. Through this function, Spotify has become the world's best music streaming platform, satisfying the tastes of many millennials and generation Z.



Zamface


Zamface是一項(xiàng)利用AI技術(shù)搜索 beauty YouTubers,并給用戶推薦適合他們口味的美妝視頻的服務(wù)。Zamface在年輕一代中越來越受歡迎,它的訂閱用戶中,95%的年齡在13至24歲之間。Z世代通過beauty Youtuber的視頻關(guān)注和學(xué)習(xí)化妝方法,這是準(zhǔn)確讀取了他們的需求,并利用AR技術(shù)不斷對(duì)服務(wù)進(jìn)行創(chuàng)新的結(jié)果。


Zamface is a service that recommends makeup videos suitable for users by searching the video contents of beauty YouTubers with AI technology. Zamface is gaining huge popularity among younger generation that 95% of all subscribers are aged 13 to 24. This is the result of accurately reading the needs of generation Z to follow and learn makeup methods through the beauty Youtuber video and continuously innovating the service using AI technology."



現(xiàn)在的信息服務(wù)有很多,但很少能受到千禧一代和Z世代的喜愛。比起面對(duì)面,年輕一代有時(shí)候會(huì)覺得在網(wǎng)上交流更舒服。他們更熟悉實(shí)時(shí)分享自己現(xiàn)在的狀態(tài)。有些服務(wù)就專注于這些特性。


There are a lot of messaging services but few of them are loved by the millennials and generation Z. Younger generation sometimes feel more comfortable communicating online than meeting face to face and they are familiar to share their online status in real time. There are some services which focused on their characteristics. 



Facebook Messenger


Facebook messenger在用戶界面只留下兩個(gè)按鈕,將功能最小化,并特別強(qiáng)調(diào)社交功能。Facebook messenger帶來了Instagram story的功能,用戶可以在messenger中查看朋友的故事,也可以隨時(shí)查看朋友的連接狀態(tài)。千禧一代和Z世代通過移動(dòng)設(shè)備與每個(gè)人建立聯(lián)系是自然而然的。對(duì)于他們來說,不需要與真正的朋友見面,就能感覺到彼此在一起,因?yàn)檫@樣,facebook的messenger收獲了巨大的人氣。


Facebook messenger minimized the function by leaving only two buttons on UI and particularly emphasized the socializing functions. Facebook messenger brings the Instagram story function to check the friend's story in the messenger and the user can always check the friend's connection status. It is natural that millennials and generation Z are connected to everyone through mobile devices. For them, Facebook messengers are gaining huge popularity by making them feel if they were next to each other without actually having to meet friends in real.



Zenly


Zenly 是在一款基于谷歌地圖的社交網(wǎng)絡(luò)信息服務(wù),它在青少年中很受歡迎。Zenly 有一項(xiàng)普通messenger服務(wù)沒有的獨(dú)特的功能。如果你使用Zenly ,你可以獲知你朋友的位置,速度和剩余電量,當(dāng)你與朋友相遇時(shí),APP警報(bào)會(huì)顯示你正在遇見他的事實(shí)。 Zenly 在Z世代中如此受歡迎的原因是,其他幾代人經(jīng)常認(rèn)為分享自己的位置是對(duì)隱私的侵犯,而年輕一代則認(rèn)為共享位置很有趣,可以確認(rèn)與朋友的關(guān)系。


Zenly is a social network messenger service based on Google Maps and is popular among teenagers. It has cute and simple interfaces and various functions which younger generation likes. Zenly has unique functions that are not available in ordinary messenger services. If you use Zenly, you are able to know the location, speed, and remaining battery amount of registered friends, and when you meet friends, the app alarm shows the fact that you met them. The reason why Zenly is so popular among generation Z was that other generations often thought that sharing one's location is an invasion of privacy, while younger generation reckon sharing the location is considered fun and confirm the relationship with friends.



考慮到千禧一代和Z世代強(qiáng)調(diào)概念和故事的性格特征,許多公司為之創(chuàng)造了新的角色,并通過年輕人可以共情的故事與他們進(jìn)行交流。 年輕人現(xiàn)在熟悉圖像或視頻而不是文字,他們通過創(chuàng)建自己的角色內(nèi)容來引領(lǐng)新文化,并通過將自己喜歡的角色轉(zhuǎn)化為“文化因子”來自愿推廣。 此外,虛擬網(wǎng)紅已經(jīng)成為一種新的營(yíng)銷工具,以熱衷于網(wǎng)紅的年輕人為營(yíng)銷對(duì)象。


Considering the characteristics of the millennials and generation Z who emphasize concept and story, companies create new characters and communicate with young people through stories that they can sympathize with. These generations, who are familiar with images or videos rather than texts, lead a new culture by creating their own character contents and voluntarily promote the characters which they have affection by making it into memes. In addition, virtual influencers have become a new marketing tool to target young generations who are enthusiastic about influencers.




許多公司根據(jù)年輕一代的口味,使用角色I(xiàn)P內(nèi)容來制作短視頻。 最近,可以實(shí)時(shí)反饋用戶響應(yīng)并可以在社交平臺(tái)上快速傳播和輕松消費(fèi)的短視頻內(nèi)容,已成為一種有效的營(yíng)銷工具。 它以機(jī)智的短片而不是長(zhǎng)篇故事片吸引年輕的消費(fèi)者。


Many companies use character IP contents to produce short forms of video according to the taste of younger generations. Recently, the short video content that can check the user's response in real-time and can be rapidly spread and consumed easily on SNS has become an effective marketing tool. It attracts young consumers with a witty short video rather than a long story video.


以BT21角色品牌為例,通過使用其角色I(xiàn)P在TikTok中制作模仿的格式,產(chǎn)生了大量與年輕一代的口味相匹配的內(nèi)容,并受到年輕人的喜愛。 此外,它們還提供了用于粘貼TikTok視頻內(nèi)容的角色貼紙,使用戶可以自然地在他們制作的內(nèi)容中宣傳角色。 以Spotify和華為為例,通過使用一些適合年輕一代口味的流行藝術(shù)家的人物IP分享短視頻,將新的品牌形象傳達(dá)給了這些世代。


In the case of the BT21 character brand, by producing a parody the format in Tiktok using their character IP, they produce contents that match the tastes of the younger generations and get their favorable feeling. In addition, they provide character stickers to be used for editing Tiktoc video contents that allow users to naturally promote the characters in the contents they make. In the case of Spotify and Huawei, the new brand image was conveyed to these generations by sharing short videos using some trendy artist’s character IP that suits the taste of the younger generation.




千禧一代和Z世代人都熟悉IT設(shè)備,他們很容易以數(shù)字形式繪制事物。 這些世代傾向于將自己的日常生活制作成短片,然后將其上傳到社交平臺(tái)上。 他們制作這些簡(jiǎn)短的動(dòng)畫片來表達(dá)自己的個(gè)性。 卡桑德拉卡林(Cassandracalin)和Min4rin則是根據(jù)作為女性的經(jīng)歷來日常創(chuàng)作。 他們的漫畫獲得了女性的大力支持和同情,并且還出版問世。 這些案例成為Instagram被認(rèn)可為另一個(gè)網(wǎng)絡(luò)卡通平臺(tái)的開始。 以洋基基為例,他幽默地在自己的社交平臺(tái)上刊登了關(guān)于“工作中非理性狀況”的簡(jiǎn)短漫畫。 隨著千禧一代和Z世代的到來,他的故事已在工人群體中引發(fā)許多話題,而且這些內(nèi)容已通過書籍、在線表情包、商品和廣告的形式被大眾消費(fèi)。


The millennials and generation Z are familiar with IT devices that they easily draw things in a digital form. These generations tend to draw about their daily lives into a short cartoon and upload it in their own SNS. They produce this short form cartoon to express their personality. Cassandracalin and Min4rin draw their daily lives based on experiences as a woman. Their cartoons had gained a lot of support and sympathy from women and came out as a book. These cases become the start for Instagram to be recognized as another webtoon platform. In the case of Yangchikii, he humorously published a short cartoon on his SNS about an irrational situation at work. Along with the millennials and generation Z, his stories have become a lot of issues among workers, and these contents have been consumed through books, online stickers, goods, and advertisements.



千禧一代和Z世代人認(rèn)為,表情包是一種新型的交流工具。 表情包是數(shù)字世界中獨(dú)特的交流工具,可幫助清晰直觀地表達(dá)情感并理解信息。 對(duì)于那些喜歡在不面對(duì)面的情況下進(jìn)行交流的人來說,表情包已成為一種超越語言障礙的強(qiáng)大交流工具。 如今,千禧一代和Z世代使用表情包多于書寫,他們甚至只使用表情包交談。


Millennials and Generation Z thinks emoji as a new way of communication tool. Emoji is a unique communication tool in the digital world that helps to express emotions clearly and intuitively understand the message. For those who prefer to communicate without meeting face-to-face, emoji is emerging as a powerful communication tool beyond the barriers of language. Nowadays, millennials and generation Z use emoji more than writing. They even talk through using emojis only.



隨著表情包成為一種新的交流工具,頭像表情包通過將千禧一代及Z世代的個(gè)性和自我表達(dá),而讓AR技術(shù)進(jìn)一步發(fā)展。 年輕一代使用他們自己的頭像表情包來表達(dá)自己并創(chuàng)造新的文化。


As emoji became a new communication tool, avatar emoji evolved one step further by applying the personality and self-expression of the millennials and generation Z to AR technology. The younger generation uses their own avatar emojis in various contents to express themselves and create a new culture.



千禧一代和Z世代使用的在線表情包包含了小眾情感的表達(dá),而且他們更喜歡輕便且大致帶有直觀信息的表情包。 隨著小眾情緒表達(dá)的在線表情包變得流行,習(xí)慣了數(shù)字繪圖的年輕一代傾向于自己制作在線表情包。 即使它不那么精致,但如果年輕人能夠共情這個(gè)概念,它也會(huì)受到年輕人的喜愛。


The online stickers used by the millennials and generation Z contain B-class emotions. And they prefer the stickers which are light and roughly drawn with intuitive messages. As B-class style online sticker becomes popular, the younger generations who are accustomed to digital drawing tend to make online stickers themselves. Even if it is not a well-drawn, it can be loved by young people if they can sympathize with the concept. 



隨著在線表情包在年輕一代中的流行,它已成為角色行業(yè)的重要組成部分。 由于個(gè)人可以在社交平臺(tái)上出售在線表情包,因此出現(xiàn)了各種角色,受歡迎的角色則擴(kuò)展到了角色商品業(yè)務(wù)。 這些角色I(xiàn)P可以通過快閃店、在線商店,甚至可以直接與各種品牌進(jìn)行合作。


As online stickers became popular among the younger generation, it became a big part of the character industry. As individuals were able to sell online stickers on the SNS platform, various characters appeared and popular characters expanded to the character goods business. Pop-up stores, online stores, and even collaborations with various brands are being done with these character IPs. 




在千禧一代和Z世代的支持下,網(wǎng)絡(luò)卡通市場(chǎng)急劇增長(zhǎng)。網(wǎng)絡(luò)卡通最近已成為制作電影、戲劇和游戲的主流內(nèi)容。 隨著全球OTT市場(chǎng)的擴(kuò)展,具有良好故事和想法的網(wǎng)絡(luò)卡通內(nèi)容成為IP業(yè)務(wù)的機(jī)會(huì)。 網(wǎng)絡(luò)卡通的流行,讓《上帝之塔》和《高中之神》被制作成了動(dòng)畫。 它已經(jīng)在全球發(fā)行,包括亞洲、美國(guó)和歐洲,并且在海外市場(chǎng)上有很多粉絲。 Itaewon類也是基于網(wǎng)絡(luò)卡通在Netflix上制作的。 它在亞洲市場(chǎng)排名第一,并取得了巨大的成功。


The webtoon market has grown steeply based on the support of the millennials and generation Z. Webtoon has recently become mainstream content that was made into movies, dramas, and games. As the global OTT market expanded, webtoon contents with good stories and ideas became an opportunity in the IP contents business. The tower of God and the God of High School was made into an animation according to the popularity of Webtoon. It has been released all over the world, including Asia, the United States, and Europe, and has many fans in the overseas market. Itaewon class was also produced on Netflix based on Webtoon. It was ranked top in the Asia market and was a great success.



網(wǎng)絡(luò)卡通IP在角色I(xiàn)P行業(yè)中占據(jù)很大一部分。 使用網(wǎng)絡(luò)卡通IP設(shè)計(jì)的角色商品受到年輕一代的喜愛。 另外,各家公司與網(wǎng)絡(luò)卡通IP進(jìn)行合作以推廣其品牌,因?yàn)樗鼈兛梢宰匀坏赝茝V其產(chǎn)品并為消費(fèi)者(尤其是年輕人)帶來樂趣。


Webtoon IPs occupy a large portion in the character IP industry. The character goods designed with webtoon IPs are loved by the young generation. In addition, various companies collaborate with webtoon IPs to promote their brands because they can promote their products naturally and fun to consumers, especially to young people.




虛擬網(wǎng)紅是由主要消費(fèi)者群體的變化和科學(xué)技術(shù)的發(fā)展創(chuàng)造的一種新的數(shù)字IP趨勢(shì)。 它們主要在Instagram,Twitter,F(xiàn)acebook和Snapchat等社交媒體上活躍。 即使他們不是真實(shí)的人,但卻能通過與粉絲交流來表現(xiàn)自己,并且擁有大量的關(guān)注者。 這種虛構(gòu)的特征已經(jīng)成為利用社交媒體的公關(guān)市場(chǎng)的新趨勢(shì)。


Virtual influencers are a new digital IP trend created by the changes in the main consumer group and the development of science and technology. They are mainly active on SNS such as Instagram, Twitter, Facebook, and Snapchat. Even though they are not the real person they act one by communicating with fans and have a significant number of social media followers. This fictional character has become a new major trend in the PR market utilizing social media.



在某些情況下,品牌會(huì)自己創(chuàng)造虛擬網(wǎng)紅。 肯德基(KFC)創(chuàng)造的桑德斯上校(Colonel Sanders)使人想起了該公司的創(chuàng)始人形象,只不過看著更年輕一些。 韓國(guó)老牌飲料公司Binggrae創(chuàng)建了虛擬角色“ Binggraeus”。 Binggraeus有一個(gè)概念,他是做Instagram推廣Binggrae品牌的王子,該品牌反映了年輕人喜歡的小眾文化。 Binggraeus能夠通過制作具有個(gè)性的各種文化因子,并通過與年輕人積極溝通,來自然地推廣他們的產(chǎn)品。 這些有影響力的人顯然正在將品牌推廣給年輕一代,也被用作各種品牌活動(dòng)的主要典范。


There are also cases that brands create virtual influencers themselves. KFC has created Colonel Sanders which reminds the founder of the company but in a young-looking. And Binggrae, which is the old beverage company in Korea, created the virtual character, ‘Binggraeus’. Binggraeus has a concept that he is the prince who does Instagram to promote the Binggrae brand which reflects the B-class culture that young people like. Binggraeus was able to promote the product naturally by making various memes with the character and actively communicates with young people. These virtual influencers are clearly promoting the brand to the young generation, and also are being used as the main model of various brand events.



圖形設(shè)計(jì)趨勢(shì)不斷變化,以反映千禧一代和Z世代的特征。年輕的一代更喜歡他們能夠直接體會(huì)到的機(jī)智或感性的圖像,而不是精心打磨和精致的圖像。 針對(duì)年輕人,可以快速應(yīng)用于各種媒體的設(shè)計(jì)正在引領(lǐng)潮流。


Graphic design trends keep changing to reflect the characteristics of millennials and generation Z. This younger generation who prefer witty or sensual images that they can empathize with rather than well-polished and refined images. Targeting young people, designs that can be applied quickly to various media are leading the trend.



過去,品牌標(biāo)識(shí)設(shè)計(jì)更加精致和不變,通常應(yīng)用于印刷和應(yīng)用程序。 但如今,媒體變得越來越多樣化,品牌標(biāo)識(shí)也正在轉(zhuǎn)變?yōu)橐环N靈活的形式,可以適應(yīng)這種變化。 許多品牌正在進(jìn)行多種嘗試,以在千禧一代和Z世代人身上打上烙印。


In the past, brand identity design was more refined and immutable and usually applied to print and applications. But these days, the media is becoming more diverse and brand identity is also changing into a flexible form that can be adapted to this change. A lot of brands are trying various attempts to imprint identity on millennials and generation Z generation.



A lot of brands tend to make short logo animation with their brand logos. The brand logos are not an unchangeable element in brand identity anymore. The brand identity can give a fun and easy impression to appeal to millennials and Generation Z. 


許多品牌傾向于使用其品牌logo制作簡(jiǎn)短的logo動(dòng)畫。 品牌logo已不再是品牌標(biāo)識(shí)中不可更改的元素。 品牌形象可以給千禧一代和Z世代一個(gè)有趣輕松的印象。



隨著數(shù)字平臺(tái)的發(fā)展,海報(bào)也正在演變?yōu)橐苿?dòng)海報(bào)。 由于千禧一代和Z世代都熟悉視頻內(nèi)容,因此他們對(duì)移動(dòng)圖形比對(duì)精致圖像更感興趣。 而且,與過去不得不將所有內(nèi)容打印在一頁上的情況有所不同,通過運(yùn)動(dòng)圖形以更加有趣的方式顯示更多信息變得更加容易,這也吸引了年輕一代的關(guān)注。


With the development of digital platforms, posters are also evolving into moving posters. Since millennials and generation Z are familiar with video content, they are more interested in moving graphics than refined images. And unlike in the past when we had to print everything on one page, it is easier to show more information in an interesting way through motion graphics which is also a point that young generations are attracted to. 



艾米莉·洛佩斯(EmilyLópez)的動(dòng)態(tài)海報(bào)是由字體和復(fù)古圖形組成的,感覺粗糙而怪誕。 羅伯托·華納(Roberto Warner)的海報(bào)采用簡(jiǎn)單的版式和圖紙制作而成,突出了藝術(shù)家希望使用動(dòng)態(tài)圖形顯示的內(nèi)容。 許多圖形海報(bào)傾向于具有復(fù)古風(fēng)格或由年輕一代喜歡的簡(jiǎn)單有趣的圖形元素組成。


Emily López's moving poster is composed of type and retro graphics which feels rough and grotesque. Roberto Warner's poster is created with simple typography and drawings which highlights what the artist wants to show using motion graphics. A lot of graphic posters tend to have a retro style or composed of simple and fun graphic elements that young generations will like.



千禧一代和Z世代寧愿主動(dòng)參與并獨(dú)自體驗(yàn)新事物,而不是單方面看到信息。 許多設(shè)計(jì)師或藝術(shù)家試圖通過使用諸如AR之類的新技術(shù),使年輕一代參與他們的作品。 年輕一代對(duì)與他們互動(dòng)的圖形更感興趣。


Millennials and Generation Z prefer to participate actively and experience new things on their own rather than seeing information unilaterally. Many designers or artists try to make the young generation participate in their works by using new technologies such as AR. The young generation feel more attracted to the graphics which they can interact with.



Agenda 2020和后印刷時(shí)代都是使觀眾參與到使用AR觀看展覽的項(xiàng)目,并且有很多使用AR技術(shù)的圖形實(shí)驗(yàn),使人們可以通過圖形海報(bào)體驗(yàn)三維技術(shù)。 通過讓人們積極參與該項(xiàng)目,自然地將品牌形象烙印于熱衷有趣和新體驗(yàn)的年輕一代中。


Agenda 2020 and post-print are both projects that involve audiences to view exhibitions using AR. And there are a lot of graphic experiments using AR technology to let people experience three-dimensional experience through graphic posters. By letting people actively participate in the project, it can naturally imprint the brand image on the younger generations who love interesting and new experiences.



過去,似乎只是由兒童繪制的類似涂鴉的圖像往往不被認(rèn)為是不錯(cuò)的圖形。 但是,千禧一代和Z世代更喜歡以一種輕松自由的方式表達(dá)自己的情感和個(gè)性,他們傾向于將“涂鴉式的插畫”視為一種時(shí)髦的圖形。 有一點(diǎn)可以證明這種說法,許多希望得到千禧一代和Z世代支持的時(shí)裝品牌都渴望與繪制涂鴉風(fēng)格圖形的插畫家合作。


In the past, doodle-like images that seem to have just been drawn by a child could not be recognized as a nice graphic. However, the millennials and generation Z who prefer to express their emotions and individuality in an easy and free way tend to see doodle style Illustration as a trendy graphic. As proof of that, many fashion brands that want to be supported by the millennials and generation Z are eager to collaborate with illustrators who draw doodle style graphics.



Margonzales是一位專業(yè)的滑板手和藝術(shù)家。 他過去從事滑板很長(zhǎng)一段時(shí)間,他從街頭和滑板場(chǎng)景中汲取了靈感并在推出了自己的作品后就成為一名藝術(shù)家。 他的自由奔放和個(gè)人主義插圖受到許多年輕人的歡迎,并在他與Supreme發(fā)行合作產(chǎn)品時(shí)聞名世界。


Margonzales is a professional skateboarder and artist. He had been a skateboarder for a long time and became an artist when he came up with his artwork where he got inspiration from street and skateboard scenes. His free-spirited and individualistic illustrations were enjoyed by many young people and became known all over the world when he released a collaboration product with Supreme.



薩姆·考克斯(Sam Cox)是一位來自英格蘭的藝術(shù)家,比杜奇先生更著名。 他的作品的特征在于圖案、角色和對(duì)象像病毒傳播一般不斷擴(kuò)展。 乍一看,他的作品看上去很幼稚,但氣氛明亮,受到很多人的喜愛。 他最近還與芬迪開展了有趣的合作。


Sam Cox is an artist from England who is more famous than Mr.Doodle. His work is characterized by the constant expansion of patterns, characters, and objects just as viruses spread. His work looks childish at first glance but has a bright atmosphere that seems to be loved by many people. He also recently conducted an interesting collaboration with Fendi.



丹尼爾·約翰斯頓(Daniel Johnston)于2019年去世,是歌手兼作詞人和視覺藝術(shù)家。 他一生中大部分時(shí)間都在精神疾病中掙扎,這影響了他的圖形風(fēng)格。 2020年,街頭品牌Supreme與其合作推出了聯(lián)名產(chǎn)品。


Daniel Johnston, who passed away in 2019, was a singer-songwriter and visual artist. He had struggled with mental illness for much of his life which had been influenced his graphic style. In 2020, street brand Supreme launched a collaboration product with him.



俗話說,潮流在變,復(fù)古風(fēng)格如今卻風(fēng)行一時(shí)。 現(xiàn)在,可以使人聯(lián)想起80年代和90年代游戲和動(dòng)畫的圖形重新成為一種時(shí)尚風(fēng)格。 復(fù)古風(fēng)格對(duì)某些人來說可能是懷舊的,或者對(duì)某些人來說是新鮮的。


As there is a saying that trend is going around, retro styles are now all the rage. Graphics that remind you of games and animations from the '80s and '90s are now recreated into a trendy style. Retro styles can be nostalgic for some people, or fresh and new for some.



Hanavbara是一個(gè)受歡迎的Instagram使用者,擁有24萬追隨者,主要繪制以K-pop偶像為主題的插圖。 他的插圖使人們覺得自己正在觀看90年代的動(dòng)畫場(chǎng)景。 另外,Pixeljeff的插圖讓人想起90年代游戲中的場(chǎng)景。 過去由于技術(shù)限制而制作的粗糙且簡(jiǎn)單的虛線游戲圖形現(xiàn)在被當(dāng)成了表達(dá)個(gè)性的一種方式。 隨著這種復(fù)古趨勢(shì),許多藝術(shù)家傾向于從過去的文化中獲得啟發(fā)。


Hanavbara who is a popular Instagrammer with 240,000 followers, mainly draws illustrations with the theme of K-pop idols. His illustration makes people feel like they are watching a scene from animation in the 90s. Also, Pixeljeff's illustration reminds people of a scene from a 90s game. Rough and simple dotted game graphics which used to be made because of technology constraints are now used as a way to express individuality. Many artists tend to get inspired by the past culture following this retro trend.



路易威登最近發(fā)布了一個(gè)有趣的視頻。 維吉爾·阿布洛(Virgil Abloh)制作了一個(gè)動(dòng)畫,名為“與朋友的動(dòng)物園大冒險(xiǎn)”,這是路易威登男裝系列的新概念視頻。 他們正在根據(jù)千禧一代和Z世代的需求,做出獨(dú)特的新嘗試,以擺脫傳統(tǒng)時(shí)裝秀的形式。 另外,最近包含了老式動(dòng)畫圖形的Toon-out等動(dòng)畫過濾器在年輕人中也很流行。 包括Doja Cat在內(nèi)的許多藝術(shù)家都制作了復(fù)古音樂錄影帶。 這種復(fù)古風(fēng)格已成為針對(duì)千禧一代和Z世代的新趨勢(shì)。


Louis Vuitton recently posted an interesting video. Virgil Abloh created an animation called "The Adventures of Zoooom with Friends" which is a new concept video for Louis Vuitton's men's collection. They are making a unique and new attempt to change in accordance with the needs of millennials and generation Z, away from the format of traditional fashion shows. Also, animation filters such as Toon-out which contains old-style animation graphics were recently popular among young people. Many artists including Doja Cat, made a retro-style music video. This retro style has become a new trend targeting millennials and generation Z.


——————————

千禧一代占人口的31.5%,Z世代人口現(xiàn)在占比為32%。 千禧一代已經(jīng)在改變世界,Z世代也開啟了新的范例。 他們是現(xiàn)在和未來的真正消費(fèi)者。 這篇研究文章研究了這樣的情況:這些世代具有比其他任何世代都更為獨(dú)特的個(gè)性,它們正在成為未來的力量,并且正在發(fā)生變化,以理解和反映這些世代在設(shè)計(jì)和營(yíng)銷方面的文化和品味。 我們希望本文能夠幫助人們了解這些世代的特征,并了解他們所領(lǐng)導(dǎo)的趨勢(shì)。


The millennials consist of 31.5 % of the population and generation Z is now 32 %. Millennials are already changing the world and generation Z is also opening a new paradigm. They are the real consumers of the present and the core of the future. This research article examined the cases where these generations, which have more distinct personalities than any other generation, are emerging as future power, and changes are taking place to understand and reflect the culture and tastes of these generations in terms of design and marketing. We hope this article will help people understand the characteristics of these generations and know the trends they are leading.

文章來源:公眾號(hào)ISUV

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

資深UI設(shè)計(jì)者

作為人類,我們無法總是理性地看到事物的本質(zhì)。社會(huì)心理學(xué)告知我們,人類的感知與決策,在一定程度上,會(huì)帶有偏差。而作為設(shè)計(jì)師,我們可以主動(dòng)利用這些偏差,設(shè)計(jì)更好的產(chǎn)品。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

本文介紹了三條曲線,它們都將認(rèn)知偏差做了可視化的表達(dá),前兩個(gè)來自日常收集整理,后面一個(gè)由筆者總結(jié)工作經(jīng)驗(yàn)得出,下面開始吧。

雙曲貼現(xiàn)

1984 年,經(jīng)濟(jì)學(xué)家 Mazur 提出模型:我們的大腦難以處理冗長(zhǎng)的信息,因?yàn)椴淮_定性隨著信息的增加而增加。隨著時(shí)間推移,我們對(duì)收益的感知下降。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

決策中,我們傾向于把長(zhǎng)期的權(quán)重調(diào)低:無論是收益還是成本,只要時(shí)間夠長(zhǎng),我們都傾向認(rèn)為它不夠重要。

舉例來看:各大銀行如何吸引潛在用戶辦理信用卡?可以承諾在后期,提供專業(yè)的優(yōu)質(zhì)服務(wù)與購物優(yōu)惠,也可以信用卡辦理完成的當(dāng)下,讓用戶領(lǐng)取諸如行李箱、廚具套裝之類的禮品。雖然兩種方式都有可能吸引來用戶,但原本辦卡意愿相對(duì)低的用戶,大部分是被當(dāng)下的禮品所吸引。換言之,這部分用戶是「額外的」。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

各大互聯(lián)網(wǎng)產(chǎn)品都深諳此道,比如購買會(huì)員的頁面,首月打折/首月免費(fèi)/一年后付費(fèi)都是慣用的手法,就在當(dāng)下,給用戶利益,促進(jìn)轉(zhuǎn)化。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

技巧總結(jié):比起稍后的利益,我們更傾向當(dāng)下給用戶一些甜頭,哪怕甜頭很小。

峰終定律

峰終定律由諾貝爾獎(jiǎng)得主 DanielKahneman 提出:人們對(duì)于一段體驗(yàn)的評(píng)價(jià),取決于這段時(shí)間內(nèi)最好的體驗(yàn),與結(jié)尾的體驗(yàn)。我們的大腦最擅長(zhǎng)「以偏概全」,它不會(huì)無差別收錄所有內(nèi)容,只會(huì)去記錄離自己最近、讓自己印象最深的點(diǎn)。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

宜家是峰終定律最好的踐行者。顧客的購物流程中,差強(qiáng)人意的體驗(yàn)不在少數(shù)。比如店員很少,難以及時(shí)獲得幫助,比如購物路線很長(zhǎng),對(duì)于有明確購物目的的顧客不太友好,比如永遠(yuǎn)要排的結(jié)賬長(zhǎng)隊(duì)等等。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

但是宜家把握了它的「峰&終」。「峰」是過程中的小驚喜,比如隨時(shí)可以坐下體驗(yàn)的沙發(fā)躺椅,比如偶爾出現(xiàn)的極便宜的家居用品,比如貼心的鉛筆與尺子;「終」就是結(jié)賬出口外,撫平顧客排隊(duì)焦躁的冰淇淋與熱狗。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

而這些產(chǎn)品宜家本可以提高售價(jià),但卻沒有。因?yàn)橛靡粋€(gè)美味便宜的冰激淋結(jié)束購物之旅,糟糕體驗(yàn)被拋到腦后,人們回想起宜家時(shí),會(huì)選擇性地認(rèn)為整個(gè)流程都非常棒。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

游戲產(chǎn)品也非常善于遵循峰終定律讓玩家玩得更盡興。比如疫情之后大熱的 Switch 健身環(huán)大冒險(xiǎn)。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

運(yùn)動(dòng)時(shí),系統(tǒng)會(huì)一直強(qiáng)力夸夸為玩家打氣,完成動(dòng)作都會(huì)有及時(shí)的鼓勵(lì)給到,創(chuàng)造一個(gè)接一個(gè)的體驗(yàn)「峰」值。每一次通過關(guān)卡,還會(huì)讓玩家站直并高抬雙手,將健身環(huán)舉過頭頂堅(jiān)持幾秒,畫面里的「終」是非常有儀式感的 ending 動(dòng)作,讓玩家成就感滿滿。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

技巧總結(jié):在滿足了用戶的常規(guī)體驗(yàn)之后,用心打造一些帶有巧思的設(shè)計(jì),安排在流程的中間與結(jié)尾處,給用戶創(chuàng)造峰值體驗(yàn)。這不僅有可能讓普通用戶轉(zhuǎn)化轉(zhuǎn)化成忠誠(chéng)用戶,還能極大提高產(chǎn)品滿意度還能帶來口碑效應(yīng)。

徒勞曲線

租房產(chǎn)品中,用戶在 APP 內(nèi)挑選幾套心儀的房源,再約房東/經(jīng)紀(jì)人去實(shí)地看房,是很典型租房用戶場(chǎng)景。我們發(fā)起「看房路線」這一功能的設(shè)計(jì)。使用看房路線,用戶能夠在選好x套房源后,根據(jù)智能規(guī)劃的看房順序與路線,輔以時(shí)間提示與導(dǎo)航,有條不紊地去實(shí)地看房,妥妥貼心功能。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

我們大費(fèi)周章產(chǎn)出了設(shè)計(jì)方案,上線后的效果,無論是使用頻率與使用深度,都不理想。調(diào)研后發(fā)現(xiàn),實(shí)地看房的場(chǎng)景,其實(shí)存在極大的不確定性。用戶在看房中途,可能做出決策租賃某一套,也可能被經(jīng)紀(jì)人帶領(lǐng)去看別的房源,從而中斷原本的計(jì)劃。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

用戶是完全自由的,他們會(huì)尋求最熟悉、最好用、最穩(wěn)妥的途徑去解決自己的非娛樂性問題。至于導(dǎo)航,用戶平時(shí)使用什么同類產(chǎn)品呢?高德地圖、百度地圖這類很成熟的地圖類應(yīng)用。

用戶不會(huì)因?yàn)閳?chǎng)景不在專業(yè)的地圖APP內(nèi),就原諒打折扣的導(dǎo)航體驗(yàn)。用戶預(yù)期遠(yuǎn)高于實(shí)際產(chǎn)品開發(fā)程度,這種認(rèn)知偏差,需要產(chǎn)品人來買單。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

總結(jié)這個(gè)功能的問題出現(xiàn)在哪里?其一,設(shè)計(jì)缺失,沒有將線下流程的旁枝側(cè)節(jié)考慮全面;其二,設(shè)計(jì)過度,但沒有成本去滿足用戶的高階需求。如何調(diào)整用戶的預(yù)期到合理的區(qū)間,我們做設(shè)計(jì)時(shí)的「度」怎樣把握,徒勞曲線應(yīng)運(yùn)而生。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

橫軸是設(shè)計(jì)投入程度,縱軸是用戶滿意度,隨著設(shè)計(jì)投入程度的加大,用戶的滿意度呈遞增態(tài)勢(shì),但到了一定程度,滿意度會(huì)斷崖式下跌至谷底,這個(gè)階段的設(shè)計(jì)投入便是徒勞。當(dāng)設(shè)計(jì)投入快到達(dá)極限時(shí),滿意度又陡然到了一個(gè)新的高度。

我們要將自己的設(shè)計(jì)置于一個(gè)合理的區(qū)間,并將用戶的期望調(diào)整同步。當(dāng)有足夠成本支持(無論可觀支持抑或主觀爭(zhēng)?。r(shí),把握機(jī)會(huì),為用戶創(chuàng)造體驗(yàn)。

做設(shè)計(jì)能用到的三條設(shè)計(jì)曲線,學(xué)起來準(zhǔn)沒錯(cuò)!

技巧總結(jié):要引導(dǎo)用戶在使用產(chǎn)品的時(shí)候,對(duì)功能有合理的預(yù)期——如果不能提供完善的服務(wù),就用樸素的設(shè)計(jì)方案滿足用戶的基本訴求,而非好高騖遠(yuǎn)。在用戶有更加合理選擇的時(shí)候,給與用戶便利,尊重用戶的自由。這樣不太功利的思考與設(shè)計(jì),很可能帶給你的產(chǎn)品帶來更快的迭代,與更多的用戶。

雙曲貼現(xiàn)、峰終定理、徒勞曲線,三條曲線嘗試將人們的思維偏差暴露出來,利用得當(dāng),事半功倍。希望能帶給你一點(diǎn)啟發(fā)。


文章來源:優(yōu)設(shè)    作者:58UXD


藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


論用戶有多懶!

ui設(shè)計(jì)分享達(dá)人

滿足用戶的懶是用戶體驗(yàn)的本質(zhì),利用用戶的懶是探索人性的設(shè)計(jì)!





用戶有多懶?


從我生活中的一個(gè)例子說起,我成功讓公司洗手間的紙變得夠用了。 

事情是這樣的,公司每個(gè)樓層的洗手間每天只提供一卷紙,每次中午之后大多就是缺紙狀態(tài),這讓人很不爽! 

洗手間裝有兩個(gè)抽紙盒,一個(gè)靠里,一個(gè)靠外,每次保潔阿姨,都把卷紙裝在離洗手池較近靠外的抽紙盒中,這就滿足了人們洗手后很方便的拿到紙來擦手。 

有一次在洗手間門口遇到保潔阿姨,我跟她說“大姐以后把紙裝在里面的抽紙盒,這樣用的時(shí)間長(zhǎng)”,她笑了笑(當(dāng)然我先說的是,兩個(gè)都裝上)。卷紙裝在里面之后,結(jié)果有時(shí)我晚上加班還有。 






人有多懶,洗手后一多半人不再選擇多走幾步去拿紙擦手。所以在產(chǎn)品中和生活中,有時(shí)當(dāng)你覺得有些設(shè)計(jì)不合理時(shí),有可能是設(shè)計(jì)者的故意為之。 


人有七宗罪,其中就有懶惰,懶是人的天性,是刻在骨子里的基因。


現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品幾乎都是在滿足人的懶,買菜不用去超市、餓了可以叫外賣、不想看書讀給你聽、不想打字有語言功能等等,互聯(lián)網(wǎng)的發(fā)展把人慣得越來越懶,也正因如此,才成就了許許多多的產(chǎn)品。




 產(chǎn)品中如何滿足用戶的懶  


很多產(chǎn)品的商業(yè)屬性是滿足人的懶,其實(shí)產(chǎn)品中好的交互設(shè)計(jì),通常也是以滿足用戶的懶,而讓用戶感受到好的體驗(yàn)。 


1、簡(jiǎn)單簡(jiǎn)潔

電影《教父》中一句臺(tái)詞給我印象深刻, “能用半分鐘看清楚事物本質(zhì)的人,注定和用半輩子看透的人,有不同的命運(yùn)”,這句話在產(chǎn)品設(shè)計(jì)中,反過來看就是, 能用一句話說清楚的事情,為什么要長(zhǎng)篇大論,復(fù)雜不會(huì)給帶用戶帶來價(jià)值,而是消費(fèi)了他們的認(rèn)知,因?yàn)橛脩艉軕小?/span> 

下圖是產(chǎn)品中很常見的通知設(shè)置,天貓讀書的提示文案太啰嗦,用戶根本不會(huì)逐字的閱讀,用戶看提示文案就是一掃而過,這是因?yàn)橛脩魬卸B(yǎng)成的行為習(xí)慣。 



2、為用戶多想一步

滿足用戶的懶,就是給用戶制造“爽點(diǎn)”,在產(chǎn)品的交互設(shè)計(jì)中為用戶多想一步,用戶就會(huì)覺得用的很爽,覺得產(chǎn)品懂他。 

當(dāng)手機(jī)截圖后,在一定的時(shí)間內(nèi)打開微信對(duì)話框點(diǎn)擊加號(hào)圖標(biāo),截圖會(huì)自動(dòng)預(yù)備發(fā)送,因?yàn)橛脩舻牟僮餍袨榇蟾怕示褪且l(fā)截圖。 

iPhone手機(jī)長(zhǎng)按微信應(yīng)用圖標(biāo),會(huì)彈出一些即時(shí)性強(qiáng)的功能入口,這大大提高了產(chǎn)品的使用效率,用戶一旦使用一次就會(huì)愛上。 

在此之前,如果面對(duì)面互加好友,需要好多步才能打開二維碼,主要還不好找到,對(duì)于陌生的朋友等待時(shí)間長(zhǎng)了,難免會(huì)有一些尷尬的氣氛。 



為用戶多想一步,就是思考用戶的行為目的是什么,然后在設(shè)計(jì)上為用戶提供快捷的操作方式,這樣就能提高產(chǎn)品的使用體驗(yàn)。


設(shè)計(jì)產(chǎn)品時(shí)不能總以自己慣有的思維方式去設(shè)計(jì),要能把自己變成當(dāng)下產(chǎn)品的用戶,站在用戶的角度去尋找答案解決問題。




3、的交互方式

用簡(jiǎn)單的方式,讓用戶輕松完成任務(wù)。一般來說,用戶完成一項(xiàng)任務(wù)花費(fèi)的時(shí)間越少,在易用性、性的體驗(yàn)上也就越好。 

這點(diǎn)在手機(jī)解鎖的交互演變上能體現(xiàn)出來,以前手機(jī)都是密碼解鎖,然后有了滑動(dòng)解鎖,又有了指紋解鎖,再到現(xiàn)在的面目解鎖,每次的演變都是在減少用戶的操作,提高了使用效率。 

手機(jī)解鎖的演變過程 

與手機(jī)解鎖相同的還有APP的登錄演變,從繁瑣的輸入用戶名密碼登錄到如今與電信運(yùn)營(yíng)商合作識(shí)別手機(jī)號(hào)一鍵登錄,你會(huì)發(fā)現(xiàn)每一次的變化,同樣是在減少操作提率。 


另外要強(qiáng)調(diào)的是,產(chǎn)品設(shè)計(jì)者要善于結(jié)合自己的產(chǎn)品思考問題,不能看別人有什么就加什么。 

別人家產(chǎn)品有第三方登錄快捷方便,你也加,但其實(shí)如果不結(jié)合自己產(chǎn)品去思考,為什么要加,要滿足什么,目的是什么,加上可能就是多此一舉,制作麻煩,比如有些B端對(duì)內(nèi)的產(chǎn)品根本不適合第三方登錄。 


4、保持探索創(chuàng)新精神

有位產(chǎn)品大佬曾經(jīng)說過,“用戶習(xí)慣的操作路徑,不要試圖去改變,改變就會(huì)影響用戶體驗(yàn)”,這觀點(diǎn)聽著似乎沒毛病,但其實(shí)有問題,至少我是不認(rèn)同的。 

試想一下,每次微信大改版的時(shí)候,是不是有很多人都會(huì)抱怨,“改的什么呀,用的好不習(xí)慣”,究其原因就是用戶的懶惰所致,對(duì)于改變熟悉的事物,普通用戶本能上就是會(huì)有排斥心理,因?yàn)樗ㄋ械娜ミm應(yīng)。 

然而隨著時(shí)間的推移,用戶會(huì)慢慢發(fā)現(xiàn)原來這樣的設(shè)計(jì)好像是比以前好用了。 

用戶再次適應(yīng)有兩個(gè)原因:一是因?yàn)橛脩粲至?xí)慣了,二是確實(shí)是產(chǎn)品的創(chuàng)新設(shè)計(jì)提高了體驗(yàn)。 

所以,改變操作路徑,只要經(jīng)過團(tuán)隊(duì)驗(yàn)證測(cè)試后,對(duì)體驗(yàn)和效率是可以提升的、有利的,就可以去嘗試轉(zhuǎn)變用戶原有的操作習(xí)慣,如果是好的改版,用戶很快就能適應(yīng)并感受到變化后的價(jià)值。 


5、產(chǎn)品中用戶懶的做的事

產(chǎn)品設(shè)計(jì)者們有必要知道的事,用戶使用產(chǎn)品是懶惰的,用戶在沒有硬性需求的情況下, 很少有人更改產(chǎn)品的默認(rèn)設(shè)置,也很少有用戶看系統(tǒng)消息和群發(fā)的短信,所以用這兩種方式推廣活動(dòng),轉(zhuǎn)化率極低。 

對(duì)于推送消息,不要那么頻繁,除非你是新聞?lì)惍a(chǎn)品,推送頻率高用戶會(huì)直接關(guān)閉推送。另外,有很大一部分用戶,對(duì)于絕大多數(shù)的產(chǎn)品不會(huì)開推送,因?yàn)樗ㄋ┎幌M煌扑退驍_。 

有些功能從產(chǎn)品的角度希望用戶使用,但如果設(shè)計(jì)上不能吸引用戶,那用戶肯定是懶得摸索使用,所以改變用戶的懶,就得讓無聊的設(shè)計(jì)變得有趣、有激勵(lì),從而吸引用戶,這樣才能改變用戶的懶的狀態(tài)。 

產(chǎn)品的體驗(yàn)設(shè)計(jì),其實(shí)就是滿足用戶的懶,但其實(shí)能把懶用戶通過設(shè)計(jì)手段調(diào)動(dòng)起來一定是探索人性后的設(shè)計(jì)。 


 最后 


其實(shí),因?yàn)槿诵灾械膽?,才成就了如今的互?lián)網(wǎng)盛世;因?yàn)槿诵灾械膽?,人們才為省力氣發(fā)明了輪子、嫌溝通麻煩才發(fā)明了電話等等,從某種程度上看,是因?yàn)槿诵灾械膽胁磐苿?dòng)了社會(huì)的進(jìn)步。 

我們從更高一個(gè)層面去思考這個(gè)問題,是哪些人創(chuàng)造了互聯(lián)網(wǎng)盛世,又是哪些人推動(dòng)了社會(huì)進(jìn)步,絕對(duì)不是懶的學(xué)習(xí)、懶的改變自己的人,而是那些善于思考想要改變“懶”的人。


文章來源:站酷-吳星辰

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)




設(shè)計(jì)師要懂的原子設(shè)計(jì)(AtomicDesign)理念

周周

“我們不設(shè)計(jì)頁面,我們?cè)O(shè)計(jì)構(gòu)成元素的系統(tǒng)?!薄猄tephen Hay 

原子設(shè)計(jì)理論并不是什么高大上的規(guī)則。

隨著網(wǎng)頁設(shè)計(jì)的持續(xù)發(fā)展,我們認(rèn)識(shí)到開發(fā)設(shè)計(jì)系統(tǒng)(design system)的重要性,它最早就是為了讓網(wǎng)頁設(shè)計(jì)師更容易理解網(wǎng)頁的構(gòu)成,后來才延伸到UI設(shè)計(jì)當(dāng)中。


簡(jiǎn)單來說,當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴(kuò)大時(shí),我們需要制定一套完整的設(shè)計(jì)系統(tǒng),提升設(shè)計(jì)和開發(fā)的協(xié)作效率,統(tǒng)一所有設(shè)計(jì)師的輸出物。 開始設(shè)計(jì)系統(tǒng)的制定時(shí),大部分設(shè)計(jì)師可能都會(huì)先去網(wǎng)上找到大廠現(xiàn)成的設(shè)計(jì)系統(tǒng),當(dāng)拿到他們的成品的時(shí)候,會(huì)把自己的產(chǎn)品進(jìn)行拆解和借鑒,這的確能快速解決問題,但是如果不理解其中的組織規(guī)則和邏輯,只是借鑒他們現(xiàn)成的設(shè)計(jì)系統(tǒng),只能了解個(gè)大概,知其然而不知其所以然。因此,原子設(shè)計(jì)理論的出現(xiàn)就是為了幫助我們?nèi)ゴ罱ㄔO(shè)計(jì)系統(tǒng),這套理論已經(jīng)逐漸被國(guó)外一些大廠應(yīng)用于創(chuàng)建統(tǒng)一和富有層次的設(shè)計(jì)系統(tǒng)。

原子是所有事物的基本構(gòu)成物質(zhì)。每一個(gè)化學(xué)元素都具有不同的性質(zhì),并且它們一旦被分解就會(huì)失去其意義。

分子是由兩個(gè)或兩個(gè)以上的原子通過化學(xué)鍵結(jié)合在一起的。這些原子的組合具有自己獨(dú)特的性質(zhì),并且相較于原子來說,更具實(shí)際意義和可操作性。
有機(jī)體是由分子有機(jī)地組合在一起的。這些相對(duì)復(fù)雜的結(jié)構(gòu)可以從單細(xì)胞生物一直到像人類這樣難以置信的復(fù)雜生物體。 


 宇宙中的物質(zhì)都可以被分解成為原子元素。

碰巧的是,我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網(wǎng)站、APP、企業(yè)內(nèi)部網(wǎng)、hoobadyboops等等是如何由相同的HTML元素組成的。

△Josh Duck的“HTML元素周期表”

接下來和大家細(xì)聊一下什么是原子設(shè)計(jì);原子設(shè)計(jì)到底好在哪里;為什么要有設(shè)計(jì)系統(tǒng);以及該如何利用原子理論創(chuàng)建自己的項(xiàng)目組件庫。

原子設(shè)計(jì)(Atomic Design)理念最早是由國(guó)外網(wǎng)頁設(shè)計(jì)師Brad Frost提出的,他從化學(xué)元素周期表中得到啟發(fā),發(fā)現(xiàn)原子結(jié)合在一起,可以形成分子,進(jìn)一步形成組織,從科學(xué)的角度來講,在宇宙中的所有事物都是由一組有序的原子組成。

Brad將這個(gè)概念應(yīng)用到界面設(shè)計(jì)中,仔細(xì)觀察后我們不難發(fā)現(xiàn),界面其實(shí)就是由一些基本的元素組成,文字,顏色和圖標(biāo)等都是一個(gè)個(gè)原子。

 

通過原子設(shè)計(jì),我們可以把界面看作是一個(gè)連貫的整體,同時(shí)也是一些元素的集合,每個(gè)元素都不盡相同,互相結(jié)合產(chǎn)生更多層次和結(jié)構(gòu),模塊之間相互統(tǒng)一。說到底,原子設(shè)計(jì)其實(shí)是一種設(shè)計(jì)方法論,它由原子、分子、組織、模塊和頁面共同協(xié)作,由此創(chuàng)作出統(tǒng)一和富有層次的設(shè)計(jì)系統(tǒng)。 

簡(jiǎn)單來說:原子結(jié)合在一起,形成分子,進(jìn)一步結(jié)合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。

原子設(shè)計(jì)是一種方法,由五個(gè)不同的階段一起工作,以更慎重和更具層次的方式創(chuàng)建界面設(shè)計(jì)系統(tǒng)。從而創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計(jì)方法。

它的五個(gè)不同階段是:

原子(Atoms):為頁面構(gòu)成的基本元素,例如標(biāo)簽、輸入框、文字、顏色等;
分子(Molecules):由原子構(gòu)成的簡(jiǎn)單UI元素,例如按鈕;
組織(Organisms):相對(duì)分子而言,較為復(fù)雜的構(gòu)成物,由原子及分子所組成;
模板(Templates):以頁面為基礎(chǔ)的架構(gòu),將以上元素進(jìn)行排版;
頁面(Pages):將實(shí)際內(nèi)容(圖片、文章等)放置在特定模板內(nèi);

 

原子設(shè)計(jì)不是一個(gè)線性的過程, 它更像是一個(gè)心理模型,來幫助我們把用戶界面看作是一個(gè)連貫的整體,同時(shí)也是一些元素的集合。這五個(gè)階段的每一個(gè)階段都會(huì)在我們的界面設(shè)計(jì)系統(tǒng)層級(jí)中扮演重要角色。下面,讓我們更深入的了解每一個(gè)階段哦~

原子

如果原子是物質(zhì)的基礎(chǔ)組成部分,那么我們用戶界面的“原子”就是那些構(gòu)成我們用戶界面的基本構(gòu)件了 。在界面中以「元素」的形式存在,例如:顏色、文字、圖標(biāo)、分割線等。 


在團(tuán)隊(duì)開始新項(xiàng)目時(shí),為了保證各個(gè)頁面具有統(tǒng)一的設(shè)計(jì)風(fēng)格,我們會(huì)制定一套簡(jiǎn)易的視覺規(guī)范,在關(guān)鍵的設(shè)計(jì)元素上,各個(gè)設(shè)計(jì)師達(dá)成一致,這樣就能很大程度保證不同頁面的風(fēng)格統(tǒng)一,并在這個(gè)基礎(chǔ)上去探索更有創(chuàng)新意義的設(shè)計(jì)方案。

 


在模式庫中,原子一目了然地展示了所有的基本樣式,當(dāng)你回來繼續(xù)開發(fā)和維護(hù)你的設(shè)計(jì)系統(tǒng)時(shí),這是一份很有用的設(shè)計(jì)參考指南。

分子

分子是原子組合建立的元素,兩個(gè)原子即可組成一個(gè)分子。

在界面中,分子就像是一個(gè)由UI元素組成的相對(duì)簡(jiǎn)單的組織。例如,搜索框里的文字和圖標(biāo)共同打造一了個(gè)搜索表單分子。

 


 以按鈕為例,它的組成元素包含了文字、色塊、圖標(biāo)和柵格。合并后,這些抽象的原子從毫無關(guān)聯(lián)到又一個(gè)共同的目的,圖標(biāo)和文字互相配合傳達(dá)意義,顏色定義了按鈕的特性,柵格為按鈕定義了一個(gè)尺寸和規(guī)范。

 


將單個(gè)元素組裝為簡(jiǎn)單的功能組是我們一直以來構(gòu)建用戶界面的方式,可幫助UI設(shè)計(jì)人員和開發(fā)人員堅(jiān)持單一職責(zé)原則,這種方式簡(jiǎn)單且復(fù)用性高,可以保證界面具有良好的可用性。

以界面設(shè)計(jì)中的表單為例,表單是一個(gè)非常常見的設(shè)計(jì)元素,一個(gè)表單分子是由文字、圖標(biāo)和線條原子組成。這些原子合并后,得到的是一個(gè)可以應(yīng)用在任何信息展示或者功能入口的組合。

 

組織

組織是由分子或原子或其它有機(jī)體組成的相對(duì)復(fù)雜的UI部分 。這些組織組成了界面的不同部分。

通過結(jié)合分子和原子,我們可以構(gòu)建更復(fù)雜和可擴(kuò)展性的模塊,這個(gè)稱之為組織,其實(shí)也可以稱之為組件,這些組件組成了界面的不同部分。同樣以表單為例,一個(gè)表單我們可以通過數(shù)量的組合,以及間距的調(diào)整,元素的增減,在界面中表達(dá)不同的場(chǎng)景和含義。從建立分子到建立更精細(xì)的組件,這為設(shè)計(jì)師和開發(fā)人員提供了重要的內(nèi)容構(gòu)建思路。

 

組件在解放設(shè)計(jì)師生產(chǎn)力方面有著重要的作用,我們可以把界面中常見的組件進(jìn)行分類整理,如搜索、表單、圖片和卡片等,這些常用組件基本能滿足日常的設(shè)計(jì)需求。以Aribnb為例,他們主要分為3類:卡片、表單和內(nèi)容。每個(gè)標(biāo)簽內(nèi)容的設(shè)計(jì)形式盡量都保持統(tǒng)一,因此負(fù)責(zé)不同內(nèi)容模塊的設(shè)計(jì)師只要選擇同一個(gè)組件就能完成頁面的設(shè)計(jì)。在短時(shí)間內(nèi)就可以完成頁面超多的復(fù)雜項(xiàng)目,極大的提升了團(tuán)隊(duì)的設(shè)計(jì)效率。

 

在網(wǎng)頁端最典型的例子就是網(wǎng)站導(dǎo)航,搜索表單,我們幾乎訪問的每個(gè)網(wǎng)站都會(huì)看到這些類型的組件。 

模板

原子,分子和組織的這種語言有助于我們有意識(shí)地構(gòu)造設(shè)計(jì)系統(tǒng)的組件。但是,最終我們必須采用一個(gè)更適合描述我們最終產(chǎn)出的語言,這樣才好匯報(bào)給老板、客戶和同事,簡(jiǎn)單來說就是說人話。

 

模版的本質(zhì)就是線框圖,在這一步我們基本可以看到一個(gè)產(chǎn)品的形態(tài)。我們可以不斷調(diào)整組件和分子組合在一起的效果來嘗試不同的方案,找到一個(gè)相對(duì)合適的方案。模版的意義就在于可以專注于頁面的內(nèi)容結(jié)構(gòu)布局,而不是頁面的最終內(nèi)容,此時(shí)模版內(nèi)容是隨時(shí)可以調(diào)整的,嘗試不同的方案,在多個(gè)模版中進(jìn)行對(duì)比,在這個(gè)階段改動(dòng)和溝通保證了成本。因此,模版在設(shè)計(jì)系統(tǒng)承載的作用就是保證設(shè)計(jì)方案在原型階段的多樣性。

 

模板是頁面級(jí)別的對(duì)象,它將組件放置在布局中,并顯示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)。在設(shè)計(jì)一個(gè)有效的設(shè)計(jì)系統(tǒng)時(shí),必須在布局的環(huán)境中展示組件的外觀和功能,以證明這些部件組成了一個(gè)功能良好的整體。

 

模板的另一個(gè)重要特征是它們專注于頁面的底層內(nèi)容結(jié)構(gòu),而不是頁面的最終內(nèi)容。設(shè)計(jì)系統(tǒng)必須考慮內(nèi)容的動(dòng)態(tài)性質(zhì),因此,把例如標(biāo)題和文字段落的圖像大小和字符長(zhǎng)度此類組件的重要屬性說清楚是很有幫助的。

頁面

頁面是模板的具體實(shí)例,填充了真實(shí)的內(nèi)容(圖片、文字等)后形成頁面,也就是常說的「視覺稿」,將占位符替換為有代表性的真是內(nèi)容,使設(shè)計(jì)系統(tǒng)有了生命。在模版的基礎(chǔ)上進(jìn)行優(yōu)化和完善就形成了頁面最終的視覺方案。

 

頁面階段是原子設(shè)計(jì)中最具體的階段,由于一些眾所周知的原因這個(gè)階段非常重要。別忘了,這可是用戶在訪問你的界面時(shí)會(huì)實(shí)際看到和交互的內(nèi)容。

除了演示用戶所看到的最終界面之外, 頁面對(duì)于測(cè)試底層設(shè)計(jì)系統(tǒng)的有效性是必不可少的 。在頁面階段,我們可以看到當(dāng)將真實(shí)內(nèi)容應(yīng)用于設(shè)計(jì)系統(tǒng)時(shí),所有這些模式如何運(yùn)作。所有的一切看起來都很棒嗎?如果答案是否定的,那么我們可以回過頭去修改我們的分子、生物體和模板,以更好地滿足我們內(nèi)容的需求。

 

頁面還提供了一個(gè)表達(dá)模板變量的地方,這對(duì)建立強(qiáng)大而可靠的設(shè)計(jì)系統(tǒng)至關(guān)重要。以下是模板變量的幾個(gè)例子:

用戶在其購物車中有一個(gè)商品,另一個(gè)用戶在其購物車中有十個(gè)商品。
網(wǎng)頁APP的儀表板通常顯示最近的活動(dòng),但是該部分對(duì)于首次使用的用戶是禁用的。
一篇文章標(biāo)題可能是40個(gè)字符長(zhǎng),而另一篇文章標(biāo)題可能是100個(gè)字符長(zhǎng) 

在所有這些例子中,底層的模板是相同的,但用戶界面將會(huì)隨著內(nèi)容的動(dòng)態(tài)性質(zhì)而改變。這些變化直接影響了底層分子,有機(jī)體和模板的構(gòu)建方式。因此,創(chuàng)建解釋這些變量的頁面有助于我們建立更具彈性的設(shè)計(jì)系統(tǒng)。


 這就是原子設(shè)計(jì)!這五個(gè)不同的階段同時(shí)協(xié)同工作,以產(chǎn)生有效的用戶界面設(shè)計(jì)系統(tǒng)。


原子是最基礎(chǔ)的UI元素,并且是可以用作界面的元素構(gòu)建塊;
分子是用于形成相對(duì)簡(jiǎn)單的UI組件的原子集合;
組織是形成界面各個(gè)部分的相對(duì)復(fù)雜的部件;
模板將組件放置在布局中,并演示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu);
頁面將真實(shí)內(nèi)容應(yīng)用于模板,設(shè)計(jì)出視覺稿,并最終成為開發(fā)落地的依據(jù);

 

原子設(shè)計(jì)為制作設(shè)計(jì)系統(tǒng)提供了清晰的方法??蛻艉蛨F(tuán)隊(duì)成員通過實(shí)際的設(shè)計(jì)流程與步驟,能更好的去理解設(shè)計(jì)系統(tǒng)的概念。原子設(shè)計(jì)使我們能夠從抽象的設(shè)計(jì)中過渡到具體的設(shè)計(jì)中來,因此我們可以對(duì)一個(gè)設(shè)計(jì)系統(tǒng)進(jìn)行一致性和可伸縮性等類似特性的控制。


通過模塊化的設(shè)計(jì)系統(tǒng)調(diào)動(dòng)組件,可以使我們開發(fā)新的產(chǎn)品時(shí),從開始就可以對(duì)產(chǎn)品進(jìn)行嚴(yán)格的把控與一定程度上的控制,進(jìn)而規(guī)避了事后風(fēng)險(xiǎn)。開發(fā)之前不確定好系統(tǒng)模塊化,毫無邏輯的去開發(fā),開發(fā)到一半發(fā)現(xiàn)功能與需求對(duì)不上等問題逐漸產(chǎn)生,會(huì)導(dǎo)致產(chǎn)品的延期、人員成本的浪費(fèi)、資金成本的增加,產(chǎn)品的迭代率的下降、進(jìn)而影響市場(chǎng)先機(jī)與市場(chǎng)占有率。 

原子化設(shè)計(jì)與原來的樣式庫設(shè)計(jì)思路不一樣,原子化設(shè)計(jì)從抽象到具象,從元素到組件,讓設(shè)計(jì)師從底層開始思考,對(duì)整個(gè)設(shè)計(jì)會(huì)有更清晰的理解。同時(shí)也能讓設(shè)計(jì)更加統(tǒng)一,在新增組件的時(shí)候更謹(jǐn)慎。

原子設(shè)計(jì)的原理可以保證任何一個(gè)設(shè)計(jì)組件的構(gòu)成與開發(fā)構(gòu)建組件一一對(duì)應(yīng)。同時(shí)應(yīng)用原子設(shè)計(jì)的設(shè)計(jì)軟件(e.g., Sketch, Figma)可以給新設(shè)計(jì)師足夠的自由滿足需求變通,并且可以保證同一個(gè)設(shè)計(jì)組件的更新會(huì)覆蓋到任何一個(gè)使用這個(gè)組件的設(shè)計(jì)中。 

原子設(shè)計(jì)為我們提供了一些關(guān)鍵的見解,幫助我們創(chuàng)建更有效、更深思熟慮的UI設(shè)計(jì)系統(tǒng)。

那么、 


如果產(chǎn)品規(guī)模小只需要1,2個(gè)設(shè)計(jì)師,大概率是前期不需要大費(fèi)周章搞一個(gè)需要開發(fā)配合的設(shè)計(jì)系統(tǒng)??梢灾焕肧ketch或者Figma做一個(gè)像貼紙一樣的設(shè)計(jì)組件庫。但是功能多了怎么辦,公司來新人了,當(dāng)新設(shè)計(jì)師產(chǎn)出后就會(huì)發(fā)現(xiàn)與原設(shè)計(jì)師設(shè)計(jì)的風(fēng)格不一樣,慢慢發(fā)現(xiàn)整體設(shè)計(jì)風(fēng)格不統(tǒng)一了,只靠一個(gè)簡(jiǎn)單的組件庫很難能滿足新功能需求,新功能貼紙上沒有設(shè)計(jì)或者設(shè)計(jì)需要變通,又或者是新設(shè)計(jì)師忙著交工忘記檢查自己新組件和已有組件的異同。

 

這時(shí)候就會(huì)需要一個(gè)設(shè)計(jì)師領(lǐng)頭去重新整理設(shè)計(jì)系統(tǒng),走查發(fā)現(xiàn)同一個(gè)正文所用的十幾個(gè)不同字號(hào),又或者是十幾個(gè)透明度不同的灰黑色字體,所有組件跟現(xiàn)有上線產(chǎn)品對(duì)比整理好后一并交給開發(fā),開發(fā)再一一整理代碼庫。

設(shè)計(jì)系統(tǒng)(Design Systems)對(duì)于很多年輕設(shè)計(jì)師可能十個(gè)新名詞,但是設(shè)計(jì)規(guī)范和組件等我們應(yīng)該還是有一定認(rèn)知的。在設(shè)計(jì)的過程中,我們會(huì)被其影響。在我們?nèi)粘K褂玫腁pp產(chǎn)品中,如Apple、Google、Airbnb、Uber、滴滴等,他們的產(chǎn)品體驗(yàn)非常流暢,用戶使用產(chǎn)品時(shí)能夠地滿足需求,在其良好的體驗(yàn)背后都有著一套強(qiáng)大的設(shè)計(jì)系統(tǒng)做支撐。


為什么需要設(shè)計(jì)系統(tǒng)

 

1、團(tuán)隊(duì)協(xié)作,體驗(yàn)一致。以滴滴為例,雖然只是一個(gè)簡(jiǎn)單的打車應(yīng)用,但是其旗下的業(yè)務(wù)卻很多,快出、出租車、順風(fēng)車等,每個(gè)業(yè)務(wù)都由不同的團(tuán)隊(duì)和設(shè)計(jì)師負(fù)責(zé)??梢韵胂笕绻麤]有設(shè)計(jì)系統(tǒng),任由各模塊設(shè)計(jì)師自由發(fā)揮,風(fēng)格各異,出來的結(jié)果可想而知。而有了設(shè)計(jì)系統(tǒng)的幫助,就會(huì)感覺界面風(fēng)格非常統(tǒng)一,感覺是出自同一個(gè)設(shè)計(jì)師之手,可見其設(shè)計(jì)系統(tǒng)的功勞不小。

 


2、系統(tǒng)的管理多樣性。在設(shè)計(jì)過程中,我們會(huì)發(fā)現(xiàn)過程中,我們會(huì)發(fā)現(xiàn)每個(gè)業(yè)務(wù)的形態(tài)都是基于不同的場(chǎng)景,因?yàn)閳?chǎng)景的多樣性,在表現(xiàn)上就會(huì)催生出不同的樣式。如果每個(gè)業(yè)務(wù)都用一種樣式表達(dá),久而久之當(dāng)業(yè)務(wù)增長(zhǎng)過快時(shí),我們現(xiàn)有的設(shè)計(jì)模式就會(huì)難以滿足。Airbnb的設(shè)計(jì)方式就是非常值得參考的一個(gè)案例,從最開始是提供民宿,到后來新增的餐館服務(wù),你會(huì)發(fā)現(xiàn)房源和餐館都用了同一套圖文信息結(jié)構(gòu),只是在內(nèi)容的細(xì)節(jié)上有一些不同。這樣可以降低設(shè)計(jì)的難度。設(shè)計(jì)師不用為每個(gè)場(chǎng)景思考一個(gè)設(shè)計(jì)模式而煩惱。同時(shí),用戶在瀏覽不同場(chǎng)景的內(nèi)同時(shí),在相互切換中也不會(huì)產(chǎn)生為違和感,一切都是很自然的操作。

 

 

3、幫助產(chǎn)品成長(zhǎng),避免一次性設(shè)計(jì)。互聯(lián)網(wǎng)產(chǎn)品的成長(zhǎng)模式是一種漸進(jìn)式迭代,在產(chǎn)品初期的主要訴求是快速上線,等到產(chǎn)品上線獲取一定的用戶,證明它可以活下去時(shí)再逐步完善,增加更多的功能。每一次的迭代都是站在我們之前的思考之上,每一次的優(yōu)化都會(huì)讓我們的設(shè)計(jì)更進(jìn)一步,這是我們期望達(dá)到的結(jié)果。

 


以Uber為例,新版本繼承了黑色按鈕的設(shè)計(jì),并和地圖進(jìn)行了結(jié)合,地圖的配色和舊版本相比也變得生動(dòng)了,這種改變并不是一蹴而就,而是建立在原有版本之上。

一致性(Consistency):由于分解界面成單一元素,不論在哪一個(gè)頁面,UI元素的互動(dòng)性是相同的,例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗(yàn)相同,在視覺上更為和諧。


效率(Efficiency):由于建立了組件庫,一旦要更改某一個(gè)元素,可以馬上施行、應(yīng)用。


跨部門的共通語言(Collaboration):不僅方便設(shè)計(jì)師思考頁面的和諧性,也可以讓工程師、測(cè)試檢驗(yàn)清楚頁面的邏輯架構(gòu)及變化,減少不必要的來回溝通

在此,順便淺談下設(shè)計(jì)系統(tǒng)。

通常,設(shè)計(jì)系統(tǒng)包含的內(nèi)容由設(shè)計(jì)原則、設(shè)計(jì)語言和組件庫,這是一個(gè)整體的概念。

 

設(shè)計(jì)原則

設(shè)計(jì)原則是一個(gè)產(chǎn)品的核心設(shè)計(jì)理念,設(shè)計(jì)的本質(zhì)就是解決問題,在制定設(shè)計(jì)原則時(shí)要建立在這個(gè)中心思想之上。這些問題也許是一個(gè)業(yè)務(wù)形態(tài),例如打車的場(chǎng)景,也許是一個(gè)設(shè)計(jì)形式,如表單。設(shè)計(jì)形式又很多,我們應(yīng)該如何選擇呢?相對(duì)合理的方法就是建立一個(gè)規(guī)則,所有的問題和形式都想這個(gè)規(guī)則靠攏,減少不確定性,這就是設(shè)計(jì)原則的出發(fā)點(diǎn)。因此我們可以理解為,設(shè)計(jì)原則就是一系列的規(guī)則,是我們?cè)O(shè)計(jì)過程中要遵循的中心思想。

例如:蘋果把審美作為第一要素存在于設(shè)計(jì)原則中,它的產(chǎn)品往往也是品味的代名詞,看看它的設(shè)計(jì)原則就知道了:

審美的完整性

一致性

直接操作

即使的反饋

隱喻

用戶可控

 

△ 官網(wǎng):https://developer.apple.com/design/ 

再來看看Material Design,Google對(duì)其定義是一個(gè)完整統(tǒng)一的系統(tǒng),結(jié)合了理論、資源和工具的數(shù)字體驗(yàn)產(chǎn)品,相比而言它的設(shè)計(jì)原則就是更加獨(dú)特,這是它的設(shè)計(jì)原則:

材料是一種隱喻

大膽/圖形/強(qiáng)調(diào)/

運(yùn)動(dòng)賦予意義

靈活的基礎(chǔ)

跨平臺(tái) 

△ 官網(wǎng):https://material.io/design

由此可以看出,和iOS相比,Material Design的設(shè)計(jì)原則更加的抽象,因?yàn)樗麚碛幸粋€(gè)獨(dú)特的設(shè)計(jì)世界觀,用還原的方法和物理方法呈現(xiàn)出它的本質(zhì),通過抽象的視覺卡片傳遞出設(shè)計(jì)的目的和原則。

設(shè)計(jì)語言

 在建立設(shè)計(jì)原則后,下一步就是制定一套設(shè)計(jì)語言規(guī)范,設(shè)計(jì)規(guī)范是設(shè)計(jì)系統(tǒng)的表現(xiàn)層,面向的對(duì)象是團(tuán)隊(duì)設(shè)計(jì)師和開發(fā)者,他能幫助設(shè)計(jì)師的設(shè)計(jì)輸出保持風(fēng)格統(tǒng)一。同樣也能幫助開發(fā)者高度還原設(shè)計(jì)。非常有利于設(shè)計(jì)師和開發(fā)者的協(xié)作。這套規(guī)范包含的有:字體、顏色、圖標(biāo)和柵格。 

組件化設(shè)計(jì)

組件化設(shè)計(jì)主要作用有兩點(diǎn),一是保證多人協(xié)作效率,組件化設(shè)計(jì)可以快速完成一個(gè)簡(jiǎn)單頁面的設(shè)計(jì),提升設(shè)計(jì)效率;二是保持產(chǎn)品體驗(yàn)的統(tǒng)一性。同時(shí),組件化設(shè)計(jì)環(huán)節(jié)在設(shè)計(jì)系統(tǒng)中是一個(gè)相對(duì)重要的工作,需要有一個(gè)全局觀,要有較強(qiáng)的設(shè)計(jì)水平和溝通協(xié)作能力,這樣,組件化的落地才會(huì)得到很好的推進(jìn)。

 

在多屏?xí)r代,我們時(shí)時(shí)刻刻都在設(shè)計(jì)產(chǎn)品界面,需適配多系統(tǒng),其中很重要的一點(diǎn)是如何在多系統(tǒng)之間保持體驗(yàn)一致性,很多人想到的就是規(guī)范,要想做一套嚴(yán)謹(jǐn)邏輯好,靈活的設(shè)計(jì)規(guī)范,那么原子設(shè)計(jì)可以幫助我們來很好的實(shí)現(xiàn)它,它在構(gòu)建設(shè)計(jì)系統(tǒng)中算是比較科學(xué)的一種方法,國(guó)外很多設(shè)計(jì)團(tuán)隊(duì)都在使用這樣的設(shè)計(jì)方法。比如以下這幾個(gè)團(tuán)隊(duì): 

1、Airbnb

Airbnb設(shè)計(jì)副總裁Alex Schleifer在IXDC2017國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)上分享了這一創(chuàng)新React Sketch app 管理設(shè)計(jì)系統(tǒng), 這是為Airbnb的設(shè)計(jì)系統(tǒng)而設(shè)計(jì)的,其實(shí)就是個(gè)實(shí)時(shí)更新的代碼數(shù)據(jù)庫,可以實(shí)時(shí)查詢sketch數(shù)據(jù)、代碼,也可以下載圖標(biāo)、設(shè)計(jì)模塊,所有工程師、設(shè)計(jì)師都可以免費(fèi)下載。

△ 官網(wǎng):https://airbnb.design/events/when-we-use-systems/

2、Frames

Frames 使用了精致的組件和先進(jìn)技術(shù),并結(jié)合 Sketch 構(gòu)建了強(qiáng)大的 Web 設(shè)計(jì)系統(tǒng),同樣能滿足修改原子,全局同步更新的功能,支持響應(yīng)式布局。提供了近百個(gè)網(wǎng)頁模板,可以非常迅速地完成效果圖制作。

△ 官網(wǎng):http://framesforsketch.com

3、Nested Symbols

這是一套免費(fèi)的設(shè)計(jì)系統(tǒng),它將按鈕、輸入框、下拉菜單、通知等控件,都制作成了嵌套符號(hào),方便自定義和編輯。

△ 官網(wǎng):https://www.janlosert.com/ 

原子設(shè)計(jì)理論最大的價(jià)值,就是為設(shè)計(jì)體系/組件庫的構(gòu)建提供思路和方法,如果你不滿足于市場(chǎng)上現(xiàn)有的設(shè)計(jì)系統(tǒng),我們還可以自己創(chuàng)建。因此我們首先要為產(chǎn)品設(shè)計(jì)出一個(gè)獨(dú)特的視覺語言作為起點(diǎn)。這個(gè)視覺語言一定要有力度、易于擴(kuò)展,必須能在所有地方奏效!


接下來就以 Sketch Library 功能來實(shí)現(xiàn)組件庫的創(chuàng)建。

第一步:定義顏色(color)

將顏色添加 Main、Text、Status 等一級(jí)分類,例如:Color/Status;再添加二級(jí)分類,例如:Color/Status/Success 等,命名需使用「 / 」 符號(hào)區(qū)分層級(jí)結(jié)構(gòu)。定義好顏色和命名后,將每個(gè)顏色轉(zhuǎn)換成 Symbol,便可統(tǒng)一調(diào)用。

 


第二步:定義字體(font)

根據(jù)設(shè)計(jì)規(guī)范,將不同字號(hào)的文字樣式羅列出來,例如:Title 1、Body、Body2 等,按照「樣式名稱/顏色/對(duì)齊方式」的層級(jí)結(jié)構(gòu),將文字賦予 Text Style,整理出所有的字體樣式。

第三步:定義圖標(biāo)(icon)

將圖標(biāo)放置在 24*24px 大小畫板內(nèi),從定義好的顏色系統(tǒng)中選擇合適的 Symbol,這樣替換圖標(biāo)顏色時(shí)直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸(size)大小,并把調(diào)整尺寸(Resizing) 設(shè)為上下左右同時(shí)吸附,以確保圖標(biāo)在使用時(shí)可以等比縮放。

 

第四步:加入其他元素(Elements)

 

根據(jù)以上對(duì)原子的定義和命名方式,依次完成對(duì)其他原子、分子和組織的定義,例如:按鈕、表單、空狀態(tài)等,整個(gè)過程都是通過 Symbol 的不斷嵌套,最終實(shí)現(xiàn)組件庫的創(chuàng)建。

 

第五步:加入組件庫

 

使用快捷鍵「cmd+, 」打開 Preferences 面板,選擇「Libraries」(組件庫)標(biāo)簽,點(diǎn)擊「Add Library」(添加組件庫)按鈕添加剛才的 Sketch 文件,完成后就可以從其他的 Sketch 文件中,對(duì)此庫里的元素進(jìn)行調(diào)用了。

 

 

寫在最后,原子設(shè)計(jì)是一套具有科學(xué)嚴(yán)謹(jǐn)?shù)膭?chuàng)建設(shè)計(jì)系統(tǒng)的方法論,是一個(gè)構(gòu)建UI系統(tǒng)的心理模型。

 


原子設(shè)計(jì)使我們可以將我們的界面UI細(xì)分為原子元素,并通過這些元素組合在一起形成最終的界面。

原子作為整個(gè)理論最基礎(chǔ)的元素,當(dāng)我們改變其中的原子時(shí),整個(gè)體系都會(huì)發(fā)生變化。原子的設(shè)計(jì)概念和sketch中的“符號(hào)”有異曲同工之妙,當(dāng)我們改變其中一個(gè)元素時(shí),其他所有包含這個(gè)元素的頁面都會(huì)發(fā)生變化,可以保證整個(gè)系統(tǒng)的一致性和層次感。原子設(shè)計(jì)為界面元素提供了應(yīng)用規(guī)則和組織原理,這套方法論對(duì)于設(shè)計(jì)系統(tǒng)建立、團(tuán)隊(duì)協(xié)作、產(chǎn)品迭代都具有非常重要的指導(dǎo)意義。

經(jīng)常有同學(xué)問ios設(shè)計(jì)規(guī)范,安卓設(shè)計(jì)規(guī)范在哪看這類問題,最后,來推薦一些大平臺(tái)的設(shè)計(jì)網(wǎng)站,上文出現(xiàn)過的下面就不重復(fù)了。我們耳熟能詳?shù)膬?yōu)秀設(shè)計(jì)都是來自于這些世界互聯(lián)網(wǎng)公司,說真的,審美這東西還真是人家說了算~


反正看看又不要錢,都去康康唄~

 

Google Design

谷歌設(shè)計(jì)中心,它非常全面的展示了谷歌的設(shè)計(jì)工作和概念。包括Material Design在內(nèi)的所有關(guān)于設(shè)計(jì)、體驗(yàn)、產(chǎn)品等互聯(lián)網(wǎng)領(lǐng)域的探索。 

△ 網(wǎng)址:https://design.google/

Fluent Design

微軟基于Windows10的設(shè)計(jì)語言,包括人機(jī)界面布局、控件、樣式及資源下載。

 

 

△ 網(wǎng)址:https://www.microsoft.com/design/fluent/#/

 

IBM Design Language

IBM設(shè)計(jì)語言是偉大設(shè)計(jì)的代名詞,他將人們的需求轉(zhuǎn)化成精心打造的產(chǎn)品。在這里可以學(xué)習(xí)IBM設(shè)計(jì)團(tuán)隊(duì)一用戶為中心設(shè)計(jì)的新思維方式。

 


△ 網(wǎng)址:https://www.ibm.com/design/

 

Facebook Design

臉書設(shè)計(jì)官網(wǎng),在國(guó)內(nèi),我們常??吹侥槙脑O(shè)計(jì)文章被翻成中文為中國(guó)設(shè)計(jì)師所學(xué)習(xí)

 

 

△ 網(wǎng)址:https://facebook.design/

 

Uber Design

作為全球第一家即時(shí)打車應(yīng)用,優(yōu)步其超前的設(shè)計(jì)理念和優(yōu)秀的用戶體驗(yàn)成為同類產(chǎn)品競(jìng)相模仿的對(duì)象。

 

△ 網(wǎng)址:https://www.uber.deign.com/


Ant Design

螞蟻金服設(shè)計(jì)平臺(tái)是阿里旗下子公司,基于螞蟻金服生態(tài)系統(tǒng)的跨設(shè)計(jì)與開發(fā)的體驗(yàn)解決方案。

 

△ 網(wǎng)址:https://design.alipay.com/


參考資料

《原子設(shè)計(jì)》官網(wǎng)

Airbnb 設(shè)計(jì)規(guī)范

Apple 設(shè)計(jì)規(guī)范

Material Design設(shè)計(jì)規(guī)范

Google及其他

文章來源:tob.design

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔