<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          如何使用色彩可視化出行耗時

          資深UI設計者

          比對出行時長

          每天,世界上有40億人在城市中穿行,這個不斷增長變化的群體占據了世界人口的一半還多。了解人們如何出行以及出行的演變對于改善我們的城市、環境和數十億人的生活至關重要。我們創建了 Uber Movement,來幫助大家增進理解。

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

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

          圖1:從華盛頓市中心出發到各地所需的出行時長

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

          對于需考慮在哪里新增公交線路的公共交通機構,以及那些判別什么時候主干道需要進行道路養護的城市機構,都能夠通過這些數據了解到什么時候減少車道會對交通的影響最小,應向駕駛者提供哪些替代路線。

           

          眼見為實

          為了讓這些數據有價值,必須讓它們有使用價值。這就需要數據可視化的加持了。作為負責 Uber Movement 的產品設計師,我需要確保我們分享的數據是盡可能清晰易懂的。

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

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

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

          圖2:早期設計的5階色(左側單位為絕對耗時,右側單位為相對耗時比)

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

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

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

          顯而易見,可用性測試的參與者難以從地圖判斷出耗時,特別是當地圖縮放聚焦在市中心時,也難以區分兩種模式(耗時熱力圖/對比熱力圖),見圖3。

          圖3:西雅圖的出現時長

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

           

          設計探索

          通過多步的探索實驗,我將這個復雜的設計難題拆解為幾個不同的小挑戰,并驗證不同的方案,最終獲得一個色彩系統達到易讀性最理想的熱圖效果。

          1.通過相鄰色和對比色兩個樣本有效區分耗時熱力圖和對比熱力圖

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

          圖4:為實驗準備的色階方案

           

          2.根據時長間隔等比或是梯度增加色組的色彩階層數

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

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

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

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

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

          圖5:用于實驗的2個色階(左側為淡色系,右側為多色系)

           

          3.嘗試通過提升對比度去除掉區間的漸變效果

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

          圖6:采用離散色值消除漸變色。(從左側變為右側)

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

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

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

           

          4.在測試環境中對比顏色方案

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

          表2:鄰近色組的對比度計算

          下圖7展示了波士頓城整體區域的熱圖效果,讓我們再看看聚焦到市中心的效果如何。

          圖7:波士頓城整體區域的熱圖效果

          圖8更進一步地確認了「變化時間間隔取色」提供了更高的對比度。

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

           

          5.對配色色階進行微調

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

          我們的內部團隊對實驗進行了評審和測試,并最終敲定了色彩范圍(見圖表1),結果將在近期發布。

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

           

          因效用而美

          數據可視化的最終目的還是信息溝通。當我們試圖清晰地傳達事實時,創作物的美學不是附屬品,而是一種內在價值。美感不只是粉飾。當數據可視化被合理地創造時,它因效用而美。

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



          文章來源:UXRen    作者:Dawei Huang


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          資深UI設計者

          新版本的改動介紹

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

          我們先來簡單看看新版本有哪些重要的改進:

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          • 去掉了分類分頁器
          • 頂部輪播圖下移,改成豎狀的
          • 減少瓷片區的數量,進行卡片化分離
          • 刪除推薦商品瀑布流的分頁器
          • 推薦商品卡片的類型調整
          • 商品卡片不再直接跳轉詳情頁

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

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

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

          現在的首頁從上到下的結構即:

          • 搜索欄
          • 業務入口
          • 營銷模塊
          • 推薦瀑布流

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

          但不要這么容易被結構上的改造欺騙,改版后的淘寶降低了模塊的數量,但只是把減少的元素在其它地方呈現。即這次改版的重點——推薦瀑布流。

          細心的同學應該都發現了,瀑布流卡片已經出現在了第一屏的底部,即使不用上滾也可以看見卡片的頭部了。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

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

          當我們開始瀏覽瀑布流的推薦內容以后,淘寶夾帶的大量私貨就進來了,我們來統計下總共有哪些類型:

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

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

          而其中最重要的商品卡片,甚至也不能直接點擊就跳轉到商品詳情頁中,而是添加了一個中轉頁面,進一步根據算法推薦相關商品,能直接跳轉進詳情頁的少數商品卡片,應該是有做廣告投放的定向導流。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

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

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          可能很多人會覺得,難道不應該讓流程更短,購買步驟更容易,才符合優秀交互設計的定義嘛?

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

          關于新設計的思考

          對于一個商業應用來講,交互不是為了無條件迎合用戶的,雖然無論是 UX 還是 UED 的概念里,都愛強調用戶至上論,體驗為王之類的。但是…

          1. 商業訴求 > 用戶體驗

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

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

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

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

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

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          大家都知道雙十一將近,各家電商平臺作妖時間又到了。但這兩年的電商行業已經發生了巨大的改變,那就是直播、短視頻帶貨形式帶來的變局。

          這兩年,以抖音、快手為代表,興起的短視頻、直播帶貨風潮,已經成社會的熱門話題,薇婭沒事就在綜藝里和愛豆們一起帶貨,李佳琦身體有恙上微博熱搜,羅永浩靠帶貨上演 “真還傳”……

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          本來,購物方式的多元化,對于大型平臺來講是非常有幫助的。無論是十幾年前就開始出現的社會化電商平臺、返利網、或值得買,都可以促進電商行業的繁榮,促進平臺和整個產業鏈的發展。

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

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          2. 直播電商規模,不算短視頻

          主流的數據預測報告中,20年的直播電商規模都會達到萬億級別,直播電商的高速發展是沒法阻擋的大趨勢,它的發展會搶奪存量用戶的注意力,有大量的用戶購物逛商品,不在淘寶APP內,而是通過其它平臺轉化,再進來下單,或干脆在外部下單,這是絕對不能被容忍的。

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

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          同時,雙十一的直播觀看用戶 18 年為 1793 萬人次,19 年為 4133 萬人次,同比增長 131%,對比 618 數據,毫無疑問今年肯定也會保持的增長。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

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

          所以今年,淘寶在國慶前,上架了首頁新版本的設計,在應用形態上押寶信息流的算法推薦機制。不僅要開始改變用戶使用淘寶的習慣,也在為后續的雙十一做預熱,相信屆時會有大量的直播內容露出和短視頻推薦。

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


          文章來源:優設    作者:超人的電話亭


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          APP設計實例解析,深色模式為什么突然就火了?

          ui設計分享達人

          蘋果在2019年6月發布的iOS13中增加了“黑暗模式”,用戶打開“黑暗模式”后,應用界面將會變為深色,隨后Google Android 10的發布同樣搭載“黑暗模式”。為了適配系統,不少APP紛紛推出了深色模式。

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


          微 信

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

          雖然深色模式也被叫做暗黑模式,但并不代表要將底色變為純黑。如果使用100%的純黑底色,長時間閱讀時,反而會造成眼睛疲勞。微信的深色模式里,聊天背景及主頁面底色采用的就不是純黑,而是深灰色。

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

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

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


          Q Q

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

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

          當用戶開啟夜間模式時,還會有一個設計彩蛋:部分圖標會根據模式切換而改變。如消息圖標會從笑臉切換為休息的狀態,這種具有趣味性的設計,也會拉近用戶與產品之間的距離。


          豆 瓣

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

          豆瓣的夜間模式和微信一樣,同樣保留了五顏六色的圖標。同時,豆瓣在設計時始終保證內容有良好的對比度和清晰的視覺層級,保證了信息結構的準確傳達。

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


          知 乎

          另一款社區APP知乎和豆瓣存在同樣的問題。知乎在設計夜間模式時,知乎采用了主色調藍色+深灰色的搭配,深藍和灰色作為背景,展示出的效果既有強烈的對比,又擺脫了深色的壓抑感。

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

          知乎在設計夜間模式時目標應該很明確,即只考慮用戶在夜間的使用,因此整體色調都很暗,在強光環境下無法正常瀏覽。


          bilibili動畫

          B站剛推出深色模式時收到了許多批評,字體和背景色對比不強,視頻封面仿佛蒙了一層霧,一刀切的暗化處理,導致用戶瀏覽體驗極差。

          在最近一次更新中,B站終于對深色模式進行了優化,適度提亮了視頻封面和圖標的亮度,將多彩型圖標調整為了單線型圖標,既統一了畫面風格,又提升了界面閱讀體驗。

          設計深色模式時,必須注意各頁面的配色及對比度都要盡可能地統一。在深色模式下點開B站創作中心或推薦服務中的版塊時,加載畫面仍然是白色,突然出現的強光無疑會對眼睛造成刺激,對于用戶來說體驗感也極差。


          百度網盤

          高飽和度的色彩會在深色背景上產生炫光的視覺效果,引發視覺疲勞。百度網盤的深色模式下,背景接近全黑,圖標卻沒有太大的調整,給用戶帶來的閱讀體驗并不好。

          同樣,由于背景顏色太深,導致百度網盤的文本和背景對比度太大,也存在難以閱讀的情況,對于誦讀困難癥患者來說,在閱讀時會感覺文字在旋轉、模糊。

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

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


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


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

          1.避免使用純黑色;

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

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

          4.做好情感化設計;

          5.注意結構和層次感;

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


          文章來源:UI中國  作者:摹客產品協作設計

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          合理打造“稀缺性”,提升你的設計轉化率

          資深UI設計者


          摘要:本文原標題為《用戶體驗中的稀缺性:心理偏見成為常態》,文章對當前設計稀缺性的情況進行了簡要分析,并給出了一些需要牢記的小貼士,閱讀預計需要7分鐘。

           

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

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

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

          是的,多數時候這個杯子不會倒

           

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

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

           

          稀缺性已成為常態

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

          這看起來很貴

          但隨著科技企業變得更加成熟,數字產品變得更加精細,稀缺性很快走向了線上,現在稀缺性已成為增加吸引力最流行的方法之一。

          目前人們已經習慣了在線上瀏覽時看到并期待某種形式的稀缺性,運用稀缺性已經不再具有競爭優勢,而是為滿足用戶需求而做的最基本的起點。

           

          稀缺性融合了多種偏見

          稀缺性變得流行起來,因為它非常有效并相對容易實現。而它如此富有成效的原因在于它結合了多種偏見:

          1. 損失厭惡(Loss Aversion)

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

          2. 社會認同(social proof)

          通常,當一款產品需求變高時,這款產品會變得稀缺。一旦出現這種情況,就意味著有其他人在過去購買了這款產品,所以它一定是有價值的,我們也該抓住這個機會。

          3. 預期后悔(Anticipated regret)

          當面臨一個決定時,我們不僅會預期會發生的事件,還會預期我們可能會經歷的與之相關的后悔。決定現在就采取行動是我們試圖消除這種可能性的努力。

           

           

          稀缺性會以不同形式出現

          盡管稀缺性可以被應用于品質、體驗等不可量化的特征,但當評估對象是可量化的物品、地點等時,稀缺性的應用效果會更加出色。這就是像亞馬遜和Booking.com這樣的公司接受它并廣泛使用它的原因。

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

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

          當對時間進行限制時,就會產生一個截止時間,讓人們在截止時間之前采取行動。當看到截止時間時,人們不確定之后是否還能獲得這個產品,除非他們現在就采取行動,但這樣就增加了壓力,從用戶體驗的角度來看,反而缺乏了同理心。

          舉例如下:

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

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

          有限或稀少的產品供給會讓人們覺得這威脅到了他們選擇的自由,進而激發他們做出反應,來對抗這種威脅并維持他們對資源的獲得權。

          限量稀缺被認為比限時稀缺更有效,因為供給的結束是不可預測的,完全取決于需求而不是時間。

          舉例:

          • 在Booking.com上搜索酒店:印象深刻
            Booking.com在運用稀缺性上跑得飛快,可謂是行業里對博爾特,他們的成功在很大程度上都要歸功于限量稀缺。網頁不僅顯示剩余房間的數量,還會顯示一大堆的標簽和文本,讓你感覺自己下單78物超所值。Booking.com很聰明的運用了自己擁有的大量數據,網頁提供的信息量雖然很大,但都很有用。
          • 在Ryan Air上預定機票:好
            Ryan Air利用低價機票優先出售這一事實,以強調低價機票僅剩的數量。
          • 在Selfridges上購買衣服:巧妙
            Selfridges 網站上的產品詳細信息同時顯示了可購買和不可購買的尺碼。這讓可購買的尺碼看起來更稀缺。這樣顯示是微妙且有用的,因為有些人的尺寸介于兩個尺碼之間。

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

          它指的是限制對信息、群組或空間等功能的訪問。研究表明,潛意識中的抑制力會讓人們更重視那些受限制的功能,而不是那些不受限制的功能,因為排他性讓他們覺得自己很特別。

          舉例:

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

           

           

          稀缺性有爭議,但本不應該有

          如果稀缺性適合我們所設計的產品,那它可以優化用戶流量并對業務目標產生影響。稀缺性還會重構信息,并在有緊急需求時提醒用戶。

          有些人可能會說,這迫使用戶做出了決定,但只要數字是真實的,還有什么其他的選擇嗎? 我們如果沒有及時告知用戶產品稀缺的情況,難道就不會造成他們對遺憾或挫敗感嗎?這樣我們難道不是正在創造糟糕的用戶體驗嗎?只要我們向人們展示的是事實,催促人們做決定看起來反而是公平的。

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

           

           

          稀缺性的應用應該遵循一些規則

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

          可以做的事情:

          1. 利用稀缺性來提高感知價值并加速轉化
          2. 利用時間稀缺來促銷時效性強的產品
          3. 利用數量稀缺來讓人們意識到庫存短缺
          4. 利用訪問稀缺來強調受限功能的優勢
          5. 利用A/B測試來測試哪些稀缺性信息最適合你的受眾
          6. 利用可用性測試來測試信息對可信度和信任度的影響
          7. 利用動畫元素來強調緊迫性(例如,顯示一個發光的紅色圖標來突出實時狀態)

          不可以做的事情:

          1. 在未做用戶測試之前。不要使用稀缺性
          2. 如果庫存的數量不可靠的話,不要使用稀缺性
          3. 如果信息不能保證不會出錯的話,不要使用稀缺性
          4. 不要編造虛假數字來人為的制造稀缺產品

           

          結論

          稀缺性會讓我們對稀缺的東西賦予更高的價值,隨著時間的推移,這已經成為增加吸引力的必由之路。稀缺性的方法很有效,因為它結合了多種偏見(損失厭惡、社會認同和預期后悔),并擁有不同的形式(時間、數量和訪問受限)。

          稀缺性是有爭議,但這些爭議本不應該出現,因為我們并不能對用戶隱藏信息。如果你遵循一些簡單的規則,稀缺性可以幫你提高用戶體驗。

          文章來源:UXRen    作者:David Teodorescu



          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

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

          資深UI設計者

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

          距離雙十一這場年度大戰已經不到一個月,各個相關環節都已經進入“戰備”狀態;當然,逃不過直播二字。

          如今再說直播帶貨,想必大家都不會感到陌生;經歷過2019年李佳琦、薇婭出圈帶來的高速發展,今年年初黑天鵝事件的催熟式暴增;明星直播帶貨首秀、企業總裁直播自救等等相關話題都成了熱搜??停哉急娙搜矍?。

          直播帶貨從2016年起步以來,短短三年多時間就成為了一項“全民運動”,它的發展其實帶著必然性。

          一方面,處于移動互聯網時代,智能手機、4G網絡的普及以及如今5G的發展,都極大提升了用戶網絡瀏覽的便利性。

          另一方面,用戶手機網絡購物習慣已經養成。

          據統計,2019年通過手機進行購物的網民超7.07億,占手機網民的78.9%;而相較于圖文、短視頻等介質,直播帶貨能夠更加全面、立體地展示商品,通過主播講解推薦,實現足不出戶的陪伴式購物體驗,用戶可以邊看邊買,實時互動性強。

          突破了時間和空間上的局限性,直播成為更具帶貨優勢的載體。

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

          從風口成為行業大趨勢,直播電商競爭必然日益激烈;以淘寶直播為例,2019年,平臺誕生了177個帶貨過億的主播;這背后是千億級的貨品量、貨品品質、貨品服務保障的訴求。

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

          一、直播選品四大維度:品牌+產品+價格+用戶

          直播帶貨中,并不是所有的產品都能進入直播間。

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

          究其底層邏輯,主播在選品時,通常會考慮四個維度:品牌、產品、價格、用戶;并根據直播節奏,安排產品上播順序,最終確定引流品、暢銷品、利潤品、特色品等品類進入直播間。

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

          首先,在品牌層面挑選時,主播通常會考慮品牌知名度、品牌產地、品牌供應鏈這三方面。

          高知名度品牌可提升直播間聲量并起到引流的效果;如水果等帶有地域特色的產品往往會因為產地而影響質量;完善的品牌供應鏈則是確保產品從售前到售后流暢運作的基礎保障。

          從產品層面看,在標品、非標品兩個大范圍下,主播往往希望自己的直播間內有著更為豐富多樣的產品組合;比如同一場直播里,同時包含著新品、熱銷品、庫存品;新品可作為特色品存在,熱銷品作為利潤品,庫存品則是充當低價引流的鉤子產品。

          直播帶貨剛起步的時候,標品更受主播青睞,明碼標價一定程度上降低了直播的難度,用戶購買更依賴產品本身。

          隨著產業的逐漸成熟,主播專業度的提高,高單價、低復購的非標品類在直播帶貨中逐步增多;比如昂貴的珠寶翡翠,在直播產業中已經成為一個不容小覷的億級市場。

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

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

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

          從用戶層面看,主播在推薦產品時,也有剛需產品、非剛需產品的差別;會根據自己粉絲的用戶畫像、使用場景、消費能力、興趣愛好等進行選品。

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

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

          數據來源:知瓜數據

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

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

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

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

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

          三、直播電商“貨”的未來發展趨勢

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

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

          未來,直播電商中的“貨”將呈現以下趨勢:

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

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

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

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

          3)品效協同,產品進入直播間更加理性

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


          文章來源:人人都是產品經理    作者:面朝研究院


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          圖標設計指南

          資深UI設計者

          圖標是UI設計中除了文字之外最不可或缺的視覺元素,在設計中看似只占一個很小的區域,但是它卻是考驗設計師基本功的重要標準,了解圖標相關的概念,以及正確繪制的方法,是入門 UI設計的必備條件。

          兩萬字超強干貨!設計師必看的圖標設計指南

          本文將對圖標進行系統的介紹,篇幅所限,本文只針對圖標設計中最重要的設計概念和設計思路為主。大家如果對圖標的其他方面感興趣,歡迎給留言,后續出相關系列內容。過程中也有針對幾種典型的圖標進行實操代練。想要把圖標設計的更好,這就需要我們在平時勤加練習外,還要進行深度的思考,希望我的這篇梳理可以給大家帶來幫助。

          圖標概述及發展歷程

          1. 圖標的定義

          圖標,也稱為icon或Picoto,是計算機世界對現實世界的隱喻和概括,代表軟件產品中的功能及操作。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標做為國際通用性語言,生活中隨處可見,例如商場導視中收銀臺圖標、出口圖標、衛生間圖標等,又或者是日常手機里使用的那些App圖標,如微信、電話、短信等。的確,圖標的形式有很多種,它可以應用在很多場景中,并且表現方式非常豐富,有線的、有面的、還有擬物的等。

          兩萬字超強干貨!設計師必看的圖標設計指南

          粗淺劃分的話,UI設計中常見的圖標大致分為兩大類,第一類我們稱之為「標志性圖標」,比如手機中應用啟動圖標;第二類我們稱之為「功能性圖標」,這類圖標經常出現于 App 或網站中,用于功能性指示引導或操作。

          2. 圖標的重要性

          對于UI設計而言,圖標可以說是整個產品的點睛之筆,它甚至可以直接影響著一款產品的形象和氣質。在不少 UI 界面中,圖標幾乎是這個頁面的核心支撐體,它直接影響著產品的視覺體驗和產品調性。它有以下幾點好處:

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          3. 起源

          圖標的發展歷程其實有些類似中文、英文等語言的發展,大體也分為兩個階段:

          實物 → 符號;符號 → 新符號

          來看一個小例子:

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          如你所知,圖標、標識都不是界面設計師所創造的概念,它的存在可以追溯到人類文明誕生之初,在漫長的歷史長河當中,早期用來傳達信息的圖標演變為系統的文字,而在地圖、圖書、壁畫和建筑等各種各樣的地方,還存在著用來代表和傳達特定概念的圖標和標識。

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          4. 擬物圖標

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

          兩萬字超強干貨!設計師必看的圖標設計指南

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

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

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          再者,大家都熟悉的事物其實非常有限,而 APP 的創新卻在不斷進行,很多創新的產品本身在現實世界就沒有參照物,所以也決定了擬物圖標必然會被扁平化取代。

          5. 扁平化

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          區別于擬物化更加接近于真實的實物,扁平化則是簡化真實的物體,轉而通過抽象、簡化、符號化的設計元素來表現。

          2013年,蘋果推出了iOS7 開啟了擬物向扁平轉變的風潮。在iOS7中對整個界面的圖標、按鈕、字體、信息層級等各方面都進行扁平化設計。蘋果的這一系列動作打破了人們對扁平化風格的芥蒂,并最終推動了整個移動端扁平化設計的進程。

          兩萬字超強干貨!設計師必看的圖標設計指南

          那么,蘋果公司在堅持了多年的擬物化設計風格之后,曾經作為該風格的引領者和受益者,為何會突然轉向,熱情地擁抱起扁平化設計來了呢?難道是因為我們視覺疲勞了嗎?答案很簡單,

          1. 因為使用了Retina屏,屏幕清晰度支持扁平化更多的細節;
          2. 當具象化慢慢達到了,當大師們發現具象化已經不再有挑戰時,于是開始嘗試從別的角度表達;
          3. 高度的擬物在一定程度上減輕了學習成本,但是提高了辨識成本。

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

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          6. 微扁平、輕擬物

          由于扁平風格表現形式單一,同質化嚴重,缺乏個性,圖標慢慢開始發展到微扁平輕擬物的方向。相較于擬物風格不會有太多復雜的視覺元素,與扁平風格又有了更豐富的情感內容,所以現在界面中,在面積比較小的區域我們使用扁平圖標或線形圖標;在面積比較大的區域我們會使用加入漸變甚至輕質感的圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          7.「新擬物」風格圖標

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

          macOS Big Sur是第一個將「新擬物」設計投入大規模商用的操作系統,這可視為「新擬物」在實用化道路上的首次勝利。值得一提的是,在 Big Sur 的 ” 外觀 ” 設置里,多了一項名為” 自適應強調色 “的選項。蘋果將主題色的指定權留給開發者,這是否暗示新一代 App 在光影上會有更豐富的效果?

          兩萬字超強干貨!設計師必看的圖標設計指南

          「新擬物」設計的精髓在于對光線的絕妙運用。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間,進而打造一種全新的視覺體驗。

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

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          應用圖標的類型及作用

          產品應用圖標(也叫啟動圖標),是指產品「品牌標識」中獨立的圖形,也是產品品牌的核心組成元素。作為產品所有視覺通信中必不可少的元素,其使用率非常高,所以該獨立圖形在設計中應做到最簡化。

          一個小問題:為什么iOS系統中圖標形狀是統一的圓角矩形?

          蘋果官方給出的解釋是在空間有限的的區域,太多形狀顯得雜亂,如果形狀不規則,就無法控制統一間距,設計師水平也不一樣,這樣統一規范能保證標準。推薦一個iOS啟動圖標資源網站,設計時可以找找靈感。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ iOSIcon gallery

          而安卓應用圖標就沒那么規范,處于百花齊放的狀態,各家廠商都在設計獨屬于自己的視覺語言。大家都不一樣,也就導致沒有個性之美。

          兩萬字超強干貨!設計師必看的圖標設計指南

          安卓應用圖標設計規范網站

          兩萬字超強干貨!設計師必看的圖標設計指南

          應用圖標的類型

          應用圖標有不同的風格,這些風格有可能偏擬物,也有可能很扁平,有可能很抽象,也可能很具象。通過不同的設計風格可以更加標新立異,從而被用戶記住。因此能在第一時間贏得用戶的好感和記憶非常重要,將產品圖標設計的好看且容易被人記住就成了非常重要的任務。應用圖標的風格主要有以下幾種。

          1.  中文文字圖標

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

          單字

          提取產品名稱中最具代表性的文字,通過對筆畫及整體骨架進行字體設計,以達到符合產品特性和視覺差異化的目的。其優點是可以直截了當的傳遞產品信息,識別性強。

          兩萬字超強干貨!設計師必看的圖標設計指南

          多字

          多字圖標設計要注意的是整體的協調性和可讀性,一般為2-3個字,最多兩行(四個字)排列。

          其優點是更加直接的告訴用戶產品名稱,達到品牌推廣的目的,減輕用戶記憶成本。其缺點是如果圖標上的文字和下面的輔助文字完全一樣,會顯得重復啰嗦,像介紹了兩遍自己一樣。

          兩萬字超強干貨!設計師必看的圖標設計指南

          字加圖形組合

          文字加輔助圖形的組合,也是常見的產品圖標設計方法,相比純文字圖標,顯得更加豐富有獨特的產品的氣質和屬性。需要注意的是做好文字和輔助圖形間的平衡。

          兩萬字超強干貨!設計師必看的圖標設計指南

          2. 英文字母圖標

          英文設計與中文設計的設計模式相似,通常是提取應用名稱的首字母融合產品的功能賣點或行業屬性進行創意加工,新的字母圖形依舊保持本身的識別性。

          單字母

          通常提取英文首字母進行設計,由于英文字母本身結構簡潔,稍加改動就很容易達到設計感于識別性兼備的產品圖標。需要注意的是英文字母本來就少,都用字母很容易創意雷同,難以形成差異化。

          兩萬字超強干貨!設計師必看的圖標設計指南

          多字母

          提取產品全稱或幾個單詞的首字母組合而成,形成獨有的產品簡稱,方便用戶記憶。

          兩萬字超強干貨!設計師必看的圖標設計指南

          字母加圖形組合

          字母加圖形組合的設計形式比較廣泛,圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創意加工,可以使應用圖標視覺表現更加飽滿。

          兩萬字超強干貨!設計師必看的圖標設計指南

          3. 數字圖標

          直接用數字做應用圖標的相對較少,但是數字識別性強,易于傳播的特點。利用數字進行設計能給人親和力。難點是怎樣與品牌形成強關聯性。

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 特殊符號圖標

          由于符號本身的含義會對產品屬性有一定限制,所以特殊符號在應用圖標的設計案例中相對較少。如“$”符號可代表與金錢有關聯性的產品,無法運用在與此屬性無關的產品上。不過也正是由于自身屬性強的特點,可以很好的詮釋關聯的產品屬性。

          兩萬字超強干貨!設計師必看的圖標設計指南

          除了中英文圖標,還有圖形類圖標比較常見。這種類型的設計模式的優點就是直觀醒目和簡潔大方,視覺沖擊力強。常見的有以下幾種:

          5. 幾何圖形

          幾何圖形的設計模式給人簡約、現代、個性等視覺感受,從單個具象圖形到復雜的空間感營造,幾何圖形的表現形式非常豐富。不同的形狀給人的情感表達不同,如三角形給人傳達個性、穩定、現代、時尚等,添加圓角后又會更加親民、可愛。我們可以結合產品特征,合理的選擇適合的形狀圖形進行創意。此類型較考驗設計師的圖形創意能力。

          兩萬字超強干貨!設計師必看的圖標設計指南

          6. 單雙形/剪影

          單雙形是指應用圖標只展示單個或兩個的剪影圖形。通常有兩種設計方式,在深色背板上使圖形反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖形填充顏色,圖形可以是單色也可以是漸變色。這種設計模式的優點是簡潔明確,易于用戶在眾多的應用圖標陣列中快速找到目標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          7. 線形

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          8. 動物圖形/剪影

          動物作為圖標設計元素是比較常見的方式之一,通過提取動物整體形象或者局部特征部位作為設計元素,背景填充單色或漸變色,簡潔明了。動物給人的印象比較可愛,有助于加深用戶對產品的印象。常見的表現形式有剪影、線性描邊風格、面性風格等。

          兩萬字超強干貨!設計師必看的圖標設計指南

          9. 卡通形象

          卡通風格的產品圖標會讓用戶更有好感,一個可愛的卡通形象有助于加深用戶對產品的印象。很多決策者會認為卡通是一種低齡的審美,這種想法其實是錯誤的??ㄍ梢哉f是一種各年齡層都能接受的風格,例如Bear,它的卡通形象是一頭潔白的北極熊,簡潔的形象設計與產品的閱讀體驗一致。

          兩萬字超強干貨!設計師必看的圖標設計指南

          10. 正負形

          以正形為底突出負形特征,以負形表達產品屬性,傳遞產品信息。例如NPR One,圖標中的負形圖形是對話氣泡,告訴我們這是一個媒體或社交的應用,而正形圖形強調產品氣質。

          兩萬字超強干貨!設計師必看的圖標設計指南

          11. 白色漸變

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          12. 彩色漸變

          色彩比任何圖形都更能抓住用戶的注意力,同時色彩更加具有情緒,能傳遞出應用的產品氣質。比起白色漸變圖形,彩色漸變圖形的色彩表現更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比,營造空間感。應用圖標的背景和圖形的色彩要拉開對比,一般為白色或淺色背景。

          兩萬字超強干貨!設計師必看的圖標設計指南

          13. 無

          無,即沒有設計。除了背板什么也沒有。雖然這類設計模式比較獨特,但我們并不鼓勵,因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標設計成一塊黃油的樣子已深入人心了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          14. 應用圖標的作用

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

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          應用圖標繪制方法及流程

          1. iOS應用圖標

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          我們把兩個圓角曲線放大重疊后進行對比,其中灰色線框為標準圓角矩形繪制的圓角,紅色為iOS平滑圓角,它與圓角矩形擁有相同的對角線錨點,區別在于其曲線稍微向中心收緊。

          兩萬字超強干貨!設計師必看的圖標設計指南

          事實上,我們很難在Retina屏幕上區分這么細微的差別,因此設計師在繪制iOS應用圖標時不必過分糾結它的圓角,直接繪制成直角矩形交給開發同學即可,如果應用圖標需用于展示,可以繪制120*120px圓角矩形、27px圓角半徑代替。

          2. 安卓應用圖標

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

          3. iOS應用圖標設計流程

          在我之前的設計作品中,有個“影記”的攝影社區APP,本篇我們就以此為產品案例拋磚引玉來學習一個iOS應用圖標的繪制過程。

          尋找隱喻

          隱喻是在彼類事物的暗示之下感知、體驗、想象、理解、談論此類事物的心理行為、語言行為和文化行為,即人們看到某樣東西或聽到某件事情能夠馬上在大腦中形成聯想。例如說到攝影,馬上就能想到相機、快門、閃光燈、暗房等。然后通過這些聯想詞,去找一些氣質相符的圖片制作情緒版,通過情緒版可以感受到產品的調性,然后從中提取一些形狀和色彩作為產品圖標的主要造型。

          兩萬字超強干貨!設計師必看的圖標設計指南

          競品分析

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          提取關鍵詞

          根據收集的圖片,創建情緒版,結合自己的產品提取關鍵詞,然后就知道在接下來的設計中應該突出什么。我們從“影記”中可提取首字母“Y”,相機中的“快門”“信號燈”“開關機”,并依次將關鍵詞描繪成下列圖形。

          兩萬字超強干貨!設計師必看的圖標設計指南

          抽象圖形

          確立了首字母“Y”、“快門/開關機”和“信號燈”作為應用圖標的主圖形,接下來將繪制好的3個圖形相結合,即完成初步設想。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標柵格線

          使用iOS應用圖標柵格線作為設計依據有助于建立和諧的圖標繪制比例,并與iOS系統保持統一,下圖為iOS系統天氣應用使用了圖標柵格線。將圖形放置在圖標柵格上調整大小并注意圖形與其比例協調。

          兩萬字超強干貨!設計師必看的圖標設計指南

          豐富細節

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          多場景測試

          將應用圖標設計稿交付開發提交至App Store上架,正確的圖標設計稿應是直角矩形,iOS會自動應用一個圓角遮罩將圖標的4個角遮住,假如圖標設計稿自帶圓角,就有可能露出圖標透明區域。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ 注:上圖非實際大小,僅表明不同分辨率下的比例關系

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          功能圖標的設計規范

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

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

          1. 圖標的規范

          圖標是良好設計系統的基本組成部分,對營銷材料非常有幫助。他們是插畫內容的基礎構建塊,但他們也具有很高的技術性。因此科學嚴謹的設計規范能幫助我們設計精致、風格統一的圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          2. 圖標尺寸

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          通常我們只需要選擇一個通用的尺寸來繪制,然后讓開發人員根據倍數調整可能需要的尺寸即可,這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。

          不過當我們的圖標涉及一些復雜的細節時,還是需要根據尺寸大小單獨繪制。比如我們的系統圖標可能是24px,但是營銷圖標是80px,兩者的使用差別會很大,那么我們就需要為那些較大的尺寸添加一些細節。

          兩萬字超強干貨!設計師必看的圖標設計指南

          知識點:

          這里建議從最大的尺寸開始,然后依次繪制小一點的。因為刪除和簡化細節要比添加容易得多,也能的保留圖標原始狀態。

          圖標繪制基于48x48px畫布繪制的線性圖標,線寬默認為4px,不同場景縮放比例使用:

          • 圖標為32x32px時,線寬3px(基準線寬)
          • 圖標為24x24px時,線寬2px(基準線寬)
          • 圖標為16x16px時,線寬2px(基準線寬)
          • ……

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          3. 圖標的keyline

          圖標網格為圖形元素的一致但靈活的定位建立了明確的規則,keyline是網格的基礎-。通過使用這些核心形狀作為知道,你可以跨系統保持一致的視覺比例。

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 圖標關鍵圖形

          圖標柵格用于圖標元素繪制的參考并幫助建立清晰的內容輪廓邊界,關鍵線有助于促進圖標統一性,簡化設計過程中比例調整成本,繪制小圖形需要參照小正方形的keyline。

          兩萬字超強干貨!設計師必看的圖標設計指南

          5. 圖標的拐角

          兩萬字超強干貨!設計師必看的圖標設計指南

          直角拐角:當基礎圖形為滿容器正方形時,建議使用3X圓角,當基礎圖形為滿高(寬)矩形時,建議使用2X圓角。當基礎圖形為較?。ㄐ∮?/2寬高)矩形時,建議使用1X圓角。

          兩萬字超強干貨!設計師必看的圖標設計指南

          非直角拐角:根據圖標場景,通常情況下無論角度,默認均為1X圓角;特殊弧度的曲線“拐角”情況除外,根據圖標設計需要單獨考慮。

          兩萬字超強干貨!設計師必看的圖標設計指南

          6. 圖標區域 封閉和非封閉

          封閉區域,有閉合曲線構成的為封閉區域,可以進行獨立顏色填充;

          非封閉區域,由非閉合曲線構成的非封閉區域,原則上是不能進行獨立的顏色填充;

          兩萬字超強干貨!設計師必看的圖標設計指南

          封閉區域為曲線形狀且有相交線段時,原則上是不能進行獨立的顏色填充;

          7. 圖標繪制規則

          當線段與曲線相交或者與直線非垂直相交時,線段末端用圓頭端點;

          當線段與直線垂直相交時,線段末端用方頭端點;

          當圓點的直徑與線寬一樣時,圓點用圖形繪制,不用線段;

          當圓形和方形在小于16px時建議用圖形繪制,不要用線;

          兩萬字超強干貨!設計師必看的圖標設計指南

          傾斜角度

          根據像素的網格線來設置一條線的起點和終點,會讓你的圖標看起來更清晰。圖標中的傾斜角度應為45的倍數,保持與keyline中的對角線或十字垂直相交線保持平行關系,若是矩形外框,傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關系。應避免用13.7°,81°等這些奇怪的數值。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線段和端點

          為保證風格的整體一致性,圖標所有線段端點默認均應為與線段同寬的圓角端點,通常情況下線段端點和可編輯節點坐標以整數坐標為佳。默認基于48px畫布繪制的線性圖標,線寬默認為4px,無論直線和曲線在任何時候線寬都應均保持一致。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標斷口與間距

          內部結構與外框的間距不得不小于線寬,內部元素之間的間距不得不小于線寬的1/2px。

          外形框的端口尺寸關系:4px、8px、12px,建議尺寸為4的倍數。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標風格變換

          圖標在特定規律下允許不同風格之間的變換,分別為線性風格(默認)、填充風格、混合風格、多色混合風格。

          兩萬字超強干貨!設計師必看的圖標設計指南

          單雙像素描邊

          如果為圖標設置1像素的邊框,邊框應該使用外部或內部的描邊樣式,但是不建議居中描邊樣式,居中描邊的1px邊框,雖然在放大它們的時候,它們看起來很清晰。但在100%比例大小顯示的時候,它們會模糊。雙數用居中描邊,單數用外描邊,所有錨點要與網格對齊不能出現偏移。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線段閉合

          所有線段結合處應為閉合狀態,避免錯位出現。

          兩萬字超強干貨!設計師必看的圖標設計指南

          統一透視

          如果圖標有透視需求的話,就要統一透視角度,例如圖標透視方向朝左,那就統一所有圖標的透視角度都朝左邊。

          兩萬字超強干貨!設計師必看的圖標設計指南

          8. 視覺柵格

          除了像素柵格,還有視覺柵格。視覺柵格可以幫助我們找出圖標的中心在哪里,以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小。因此我們應該在繪制圖標時設定一個固定大小的容器,這樣它們在導出時就都是相同的尺寸了。添加內邊距可以讓圖標在視覺上看起來更加平衡,避免以后開發時還需要重新調整。

          兩萬字超強干貨!設計師必看的圖標設計指南

          9. 視覺重量

          繪制圖標不光要滿足物理上大小統一,還要實現視覺上大小統一。設計師要懂得調節圖標大小以避開視覺上的覺錯。

          UI界面的圖標通常可以近似的看做以下的基本格式之一:橫向矩形,縱向矩形,對角矩形,圓形,三角形,正方形。 如果把它們做成高斯模糊效果,你就會發現它們具有相同的視覺重量,因為它們變成或多或少相同的斑點效果。

          兩萬字超強干貨!設計師必看的圖標設計指南

          根據圖標形狀,將它們放在相應的框架中。你就會發現,方形圖標比三角形或細長圖標更緊湊。

          10. 圖標繪制細節

          清晰是圖標的基本要素,在sketch中,參數不要有小數點,讓圖標占滿像素網格。因為計算機不能識別小數點,導出圖標時計算機會把不能識別參數的部分拉伸填滿像素網格,導致圖標出現虛邊。

          兩萬字超強干貨!設計師必看的圖標設計指南

          通常從一套圖標中最復雜的那個開始,因為它會幫助我們定義相同的視覺重量,讓所有的圖標視覺重量保持一致。因為當圖標具有不同的細節層次時,更復雜的圖標會吸引用戶更多的注意力,而且視覺上看上去更重。

          兩萬字超強干貨!設計師必看的圖標設計指南

          11. 圖標的顏色

          默認顏色:如果是功能圖標,那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復雜,不利于和其他設計師協作。而對于營銷圖標,出于品牌宣傳的目的,你可能會想要使用兩種顏色,個人認為圖標最好是單一顏色的,3種或3種以上顏色的東西都是插圖,而不是圖標。

          選擇狀態顏色:未選擇圖標顏色為#000000,透明度為87%;未激活圖標顏色為#000000,透明度為54%;禁用圖標顏色為#000000,透明度為38%。

          兩萬字超強干貨!設計師必看的圖標設計指南

          12. 功能圖標的風格

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

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          線性圖標

          線性圖標是通過線條來表現物體的輪廓,它比面形圖標更能塑造優美的外觀,且作為貫穿圖標繪制的線條本身就是一種設計語言,因此繪制整套線性圖標會更加統一,具有整體感。例如twitter和微信底部的tab圖標等。在一個場景下的幾個同等重要的圖標,如果線條粗細不一致,會給人一種權重上存在差異的感覺。所以,在繪制線型圖標時,通常會使用統一粗細的線條。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線性圖標具有辨識度高,清晰,簡約易識別等優點,線性圖標不會對頁面造成太多的視覺干擾。缺點是:線性圖標的創作空間較少,太復雜的線性圖標對識別性產生較大的困擾。

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          線性圖標根據樣式還可以分為:雙色線性圖標、線面填充圖標、線性漸變圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線性圖標使用場景

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          通常,在UI設計中,線性圖標很少和背板同時存在,因為線條的圖形視覺表現力較弱,容易埋沒在背景色中,但也不是必須的,如果掌握好一定的規則,一些簡單的線性圖標和背板的組合也會很協調。

          面形圖標

          面形圖標是以面為主要表現形式的圖標,通過線或者面去切割基礎輪廓面,通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。在「微信」底部標簽欄中,未選中的圖標是線性圖標,而選中的圖標則是面形圖標,同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態。面形圖標占用的面積要比線性圖標多,所以更加顯眼。實際上,蘋果在新的設計規范中也建議開發者在APP底部標簽欄中全部使用面形圖標,是否處于點擊態通過改變填充圖標的顏色進行區別。這是因為填充圖標看上去像可點擊的。

          兩萬字超強干貨!設計師必看的圖標設計指南

          面形圖標具有表意能力強,細節豐富,情緒感強,視覺突出,創作空間大等優點。面性圖標可以讓用戶迅速定位圖標位置,預知點擊后的狀態。但是面性圖標在頁面中不可過多出現,否則會造成頁面臃腫,難分主次,用戶視覺疲勞。

          面性圖標根據不同的配色樣式可以分為:單色飽和度填充圖標,純色漸變圖標和多色漸變圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          基于最基本的「線性圖標」和「面型圖標」,通過不同的形態和風格的組合,再結合豐富的 表現手法,就可以設計出形形色色的圖標風格了。比如:不同粗細線條線性圖標的組合,或者面面組合,或者線面組合。大家在設計圖標的時候,需要根據自己的產品特征、受眾和使用場景,去選擇適合自己的表現形式。

          面形圖標使用場景

          面形圖標具有廣泛適用性,通常在運動、時尚類應用的標簽欄出現。由于面形圖標的視覺占比最大化,具有強烈的視覺表現力。

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          13. 扁平圖標的使用場景

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          14. 品類區圖標

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          常見的設計手法有:圓形底板+45度漸變+白色面形+微投影;45度漸變+扁平圖標+微投影;簡單線性;45度漸變+不透明度+面形圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          15. 文字圖標

          文字圖標是指用文字直接表示特定含義的圖標符號。由于文字本身就是一種演化而來的符號,英文的首字母或者詞語關鍵字本身也具備很強的信息濃縮性,因此在某些場景下,采用文字或字符作為圖標,是一種很不錯的表現手法。

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          知識點:

          如果可能的話,盡量避免在圖標中使用文字。因為圖標應該是全球性的。如果你確實需要文字圖標(例如貨幣符號等等),那么請你自己繪制,而不是直接使用字體。

          16. 動態圖標

          這幾年動效設計的熱度穩定增長,只有靜態排版的時代正在過去。動效的出現,也讓圖標擁有了更多的可能性。動態圖標可以讓你的app或網站生動有趣,在我們所常見的各種數字產品當中,UI組件和各色元素都已經動畫化了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          運動中的物體比靜態的物體更能快速引起人們的注意,在UI設計中嘗試添加一些動畫及動畫圖標,不僅能在視覺上快速吸引用戶,還能使產品更具交互性,提升產品的趣味性。分享幾個動態圖標資源網站:

          useAnimations:支持所有設備、網站、Android和iOS,可以免費用于個人和商業用途。

          兩萬字超強干貨!設計師必看的圖標設計指南

          useanimations.com

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ https://lordicon.com

          Icons8 Animated icons 2.0:提供的動態圖標格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式,透過網頁可以搜尋、預覽動態圖標效果。

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          Feather:設計師Cole Bemis制作的一個開源圖標庫,可自行調節圖標大小和線條粗細。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ https://feathericons.com/

          17. 圖標命名規則

          科學和的命名規則能夠幫助我們快速定位到自己制作的圖標,并且幫助開發縮短命名時間,加強團隊寫作效率。切圖可按照“業務_類型_功能_大小_狀態”的格式進行命名。

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          如何繪制功能圖標

          1. 圖標繪制方法

          圖標的繪制方式主要有兩種:布爾運算 和 貝塞爾曲線。

          布爾運算

          布爾指的是喬治·布爾,19世紀的一位數學家,為了紀念布爾在符號邏輯運算中的杰出貢獻,所以將這種運算稱為布爾運算。

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

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          基本上通過布爾運算,我們能繪制出常見的大部分圖標了,但有時我們需要針對某些線條進行單獨的調整,又或者我們需要打造一套手繪風的矢量圖標,這個時候就需要用到貝塞爾曲線了。

          貝塞爾曲線

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

          貝塞爾曲線包括:節點、控制點、控制線、曲線這幾個基本概念。

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          節點包括 4 種基礎屬性類型,一種是沒有控制點和控制線的「直線節點」;另一種是「鏡像關聯節點」,這種節點控制其中一側的控制點,另一側的控制點會發生鏡像變化,適合繪制對稱結構的曲線;再有一種是「無關聯節點」,即節點兩側的控制點可以各自自由控制它們那一側的曲線而不互相影響;最后一種是「不對稱關聯節點」,這種類型下,節點兩側的控制點和節點會永遠保持在同一條直線上,但是卻不會對稱控制線的長度。

          知識點:

          在 Sketch 中,我們可以在選中節點后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當前節點的類型,加快繪制效率。

          鋼筆工具

          繪制自由貝塞爾曲線常用的工具便是鋼筆工具,鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點復雜,但是一但上手,會非常方便。The Bézier Game 這個是一個非常不錯的練習鋼筆工具的網站,以游戲的形式練習鋼筆工具,通關的時候你對鋼筆工具就已經輕車熟路了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          繪制實戰

          這里選擇了幾個比較典型的圖標,簡單演示下繪制方法和各自的繪制思路:

          面性

          眼睛:布爾運算相交 / 相減 / 合并形狀

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          位置定位:旋轉 / 相減

          這個圖標由兩個大小圓形相減,得到環形,再繪制一個和大圓半徑相等的正方形,和圓環左、下對齊,最后逆時針旋轉45度完成。

          兩萬字超強干貨!設計師必看的圖標設計指南

          WIFI:相加 / 相減 / 旋轉

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          齒輪:旋轉 / 相減

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          鈴鐺:相加 / 相減

          由3個矩形組成鈴鐺主體,鈴鐺頂部圓頂結構通過設置全圓角所得,鈴鐺底部的半圓使用圓形和矩形進行布爾運算,完成。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線性

          放大鏡:旋轉 / 相加

          繪制一個正圓和一條線,用對齊工具將其居中對齊,編組后逆時針旋轉45度即可。

          兩萬字超強干貨!設計師必看的圖標設計指南

          時鐘:鋼筆 / 剪刀工具

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          雨傘:相減 / 剪刀工具

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          相機:合并

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          愛心:相加 / 旋轉

          繪制兩個正圓和一個直徑與圓形等寬的正方形,然后逆時針旋轉45度所得。

          兩萬字超強干貨!設計師必看的圖標設計指南

          2. 制定規范

          無規矩不成方圓,規矩的出現可以讓一切雜亂的東西變得合理,統一起來。在設計上也是如此,規范具有統一輸出,指引細節、便于查看的好處,規范就是一組圖標中的規矩,所有圖標的繪制都按照規矩來,最終的成品就會顯得井然有序。

          小小的圖標是由很多圖形元素組成的,在這些圖標中,元素的一致性是建立一個共同視覺于洋的關鍵。熟悉這些元素可以更容易地理解每個圖標和他們之間細微的差異,也將幫助我們學會圖標設計的底層結構,依次是筆畫末端、圓角、留白、筆觸、內部角、禁繪區。

          兩萬字超強干貨!設計師必看的圖標設計指南

          在制定規范時,我們通常先繪制出一個符合業務風格的圖標,然后根據這一個圖標定制后續的圖標規范,依次按照上述圖標元素進行規范。如果是漸變填充圖標還要規定它的漸變角度,光影角度等。在一組中的圖標需要在這些圖形屬性中進行統一,這樣的圖標雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。

          兩萬字超強干貨!設計師必看的圖標設計指南

          制定規范的三個過程:

          • 拆分細節:將圖標中的細節元素(圓角、筆畫末端等)進行分解,并在規范中制定細節元素的使用法則。
          • 風格定位:根據產品調性,業務屬性在規范中制定相應的色彩、質感風格。
          • 功能劃分:不同功能(金剛區和標簽欄等)的圖標要區分開來,功能相近的包括色彩、質感應該采取相近性。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ 圖標設計規范

          3. 線性or面性

          設計中,我們應該是用「線性圖標」還是「面性圖標」呢?

          其實二者沒有太明顯的選擇優劣,很多場景下已經越來越模糊,但總的來說,還是有一些法則可以作為參考:

          常用的手法:在App的底部導航欄,選中狀態使用面型圖標,而非選中狀態使用線性圖標;

          16px左右的小圖標慎用線性圖標,線性圖標在16px下,可排布像素的區域較小,這個時候線性圖標不容易設計;

          面型圖標比起線性圖標,除裝飾性外具備更強的視覺信息層次感,更具引導性,比如金剛區功能圖標、IOS設置界面,使用面型圖標;

          車載等系統界面,更適合用面型圖標,面型圖標的視覺面積較大,短時間內更加容易識別;

          線性圖標看起來通常會更加細膩精致,適合比較精致簡潔的設計或者女性化產品設計;

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 圖標導出

          文件格式是導出圖標的關鍵。不同的人需要的文件格式也不同,如果你為外部合伙人提供圖標,那么可能會提供1x、2x和3x.的png文件,以適應多種設備。而對于開發和其他設計人員,則通常需要導出.svg文件,這些文件可以在設計程序中編輯,并且可以通過代碼在應用程序或瀏覽器中繪制。導出的svg可以用sketch的官方插件「sketch-SVGO」進行代碼優化,壓縮svg的體積,精簡svg代碼。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ sketch-SVGO 插件官方下載頁

          svg格式僅支持居中描邊的圖標,并且不支持投影,因此對于復雜豐富的圖標還是切img圖為好。

          兩萬字超強干貨!設計師必看的圖標設計指南

          5. 圖標管理和交付

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ 圖標資源管理工具:Nucleo

          圖標設計的評判標準

          我們了解了 icon 的基本知識,那么如何設計一個好的 icon 呢?怎樣評判我們的 icon 是否合適,是否貼合整個產品呢?我們需要了解什么才是一個好的 icon 。

          我們可以從以下五個方面來檢驗,分別是:識別性,規范性、統一性、呼吸感與品牌感。

          兩萬字超強干貨!設計師必看的圖標設計指南

          1. 識別性

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

          圖標識別性可以分為兩類,分別是含義識別和視覺識別。

          • 含義識別:是視覺語言是否可替換文字語言,簡言之就是讓你的圖標可以被用戶理解,不會讓用戶產生歧義。
          • 視覺識別:圖標的大小,復雜度,顏色,線條的粗細,這些影響視覺識別的因素識別性是否高。

          兩萬字超強干貨!設計師必看的圖標設計指南

          靈活的設計思路,在保證識別度的前提下靈活發揮,嘗試各種不同風格的表現形式。

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          2. 規范性

          規范性也是做好一個圖標的基礎,我們要保證圖標在視覺大小的一致性,圖標飽滿度、遵循同一種規律,細節統一性。

          視覺大小的一致性:在相同尺寸的基礎上分析形狀間的視覺差異,來審視視覺上是否統一,如一樣尺寸大小的圓和方形的視覺大小就不一致,那么我們可以規定它的最大尺寸,進而在尺寸規范中適當調整,使得視覺大小達到統一;

          兩萬字超強干貨!設計師必看的圖標設計指南

          • 飽滿度:常用的衡量方法就是正負形衡量法,在圖標所占區域的矩形框中,看圖標的正形的面積是否還可以增加;
          • 相同規律:同一套圖標必須是以同種風格呈現的,例如是否全部使用了圓角或直角的風格,圓角大小、繪制風格是否一致;
          • 細節統一:包括像素是否對齊、圓角、描邊粗細是否統一的問題;

          3. 統一性

          在繪制多個類型相同的圖標時,我們需要注意這一套圖標合集需要在視覺上保持統一性。在一整套產品中,會有很多種圖標,但是圖標的功能不一樣,所表達的內容也不同。這時,圖標一致性的意義就體現出來了,根據格式塔原理中的相似性原則:人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素,則應在視覺上保持統一匹配。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標內容的統一會讓用戶明白相似的圖標所代表的的功能也相同,而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重,邊角的大小,配色方案,細節層次和設計元素在整個合集中是否是不變且一致的。

          圖標的統一性可以從:線條粗細、設計語言、復雜程度、顏色規范四個大的方向去著手。

          線條粗細:相同功能類型的圖標線寬粗細統一,有背板的圖標線條不易過細;

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          復雜程度:如果不能簡化圖標,就保持同一組圖標的墨水重量一致,簡化太復雜的圖標,增強辨識度;

          兩萬字超強干貨!設計師必看的圖標設計指南

          顏色規范:對于線面結合的扁平圖標建議最多用兩種顏色,活動入口圖標如果需要的色彩數量多,那就需要保持敏感,從一種色彩的周圍小幅度提取另一種色彩或多種色彩,調整其色相、飽和度、明度就能搭配出許多和諧的顏色。

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 呼吸感

          呼吸感的意思就是適當留白。不管是圖標還是界面,適當的留白可以突出主體內容,讓內容具備易看性。在圖標的繪制過程中,我們應該注意圖標元素之間的間距不宜過近,元素也不宜過多。圖標是一個物體的簡略縮影,目的是為了表達內容,讓用戶快速理解,太過復雜的細節會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素,避免使圖標變得太過復雜難以識別。

          兩萬字超強干貨!設計師必看的圖標設計指南

          5. 品牌感

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          那么,該如何提升品牌感,打造屬于自己App的獨特風格呢?品牌基因為我們提供了一些線索,這是近年來非常流行的一種趨勢。

          圖標的品牌感

          我們都知道圖標在APP設計中的重要性,但是打開許多APP你會發現他們的圖標設計都非常普通,似乎是在圖標網站上下載的素材。雖然一些優秀的設計師在進行圖標設計師加入一些諸如圓角、斷線等設計語言,但是仍逃脫不了與其他APP設計雷同、毫無個性的通病,使得UI看上去普通、不精致,缺少產品氣質。

          那么,該如何打造屬于自己APP的獨特風格呢?品牌基因為我們提供了一些線索。它是由平面設計中的VIS(視覺識別系統)引入的一種設計策略,通過對品牌形象進行延生設計形成一套完整的視覺符號。每一個APP都有其品牌形象,代表了與眾不同的氣質。接下來,我們就來學習如何利用品牌基因進行圖標設計。

          1. 提取品牌圖形

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          但是請注意,這種設計策略并不適合于所有的App,當第一個tab被賦予特定功能,就不可使用品牌圖形,否則用戶會難以理解。例如微信第一個tab是聊天列表,此時使用氣泡就比品牌圖形更加合適。

          還有另外一種情況。通常一個App的最后一個tab是個人中心,即“我的”。如果App的品牌圖形是動物圖形,也可以使用其整體或局部圖形來作為「個人中心」的入口圖標。

          2. 提取品牌色彩

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          3. 提取設計語言

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 提取產品氣質

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          5. 拆分品牌名稱

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          6. 展開形象聯想

          我們日常使用的眾多App大多數都有著相同的功能模塊:首頁、發現、動態、我的等,因此也就出現了很多雷同的圖標設計。比如“首頁”是尖頂房子,“發現”是眼睛,“動態”是氣泡,如果有差別也只是設計風格的差異,有的直角有的圓角,有的線性有的面形。這樣的設計沒有品牌歸屬感,試一下將這些圖標單獨拿出來就無法判斷它是誰,它從哪兒來?

          兩萬字超強干貨!設計師必看的圖標設計指南

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

          兩萬字超強干貨!設計師必看的圖標設計指南

          知識點:

          總之,要想在繪制整套圖標時建立統一風格,就要從外觀和顏色上確立主風格,在局部尋求個性特征,將兩者結合,并融合產品屬性和符合用戶定位,先在腦海中構思出清晰的概念,然后在稿紙上繪制草圖,最后確立一個最佳方案上機完成,只有不斷地思考和打磨才能創作出最佳的設計方案。

          兩萬字超強干貨!設計師必看的圖標設計指南

          寫在最后

          圖標設計是UI設計中非常重要的環節,在尺寸有限的界面上,小小的 icon 可以更加簡單的表達含義,傳遞給用戶正確和友好的指引。建議每位UI設計師在平時做大量的練習嘗試各種不同的風格,以滿足不同的業務需求。另外,關于如何繪制keyline線,還有的iphone12樣機,有需要的同學可以出門右轉私信我。


          文章來源:優設    作者:印跡時光


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          2020-2021 設計趨勢 · 年輕文化篇

          ui設計分享達人

          It is ultra experience

          About Millennials and Generation Z


          ——————————

          Intro 前言



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


          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.




          千禧一代:在美國,千禧一代通常指的是出生于1980到21世紀初的人。對于千禧一代的界限有很多分歧,但2018年3月1日,《紐約時報》宣布,美國皮尤研究中心對1981年至1996年的千禧一代進行了定義。千禧一代也被稱為 Y 一代,意思是他們是 X 一代的下一代。因為熟悉 IT 技術,這一代人也被稱為技術一代。在《時代》雜志上,他們把這一代人稱為“自我一代” ,因為這一代人的思考和行動以自我為主。


          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年后出生,在全球和美國市場上已占據最高人口比例,超過了千禧一代的人。目前,Z世代處于十幾歲到二十多歲的年齡段,他們被稱為數字原住民,不像千禧一代生長在模擬和數字文化的混合環境中,他們從小就接觸到數字環境。


          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個能代表千禧一代和z世代的關鍵詞來總結他們的特征。其目的是了解處于趨勢中心的他們,解讀流動的變化,并預測未來。我們將以匹配每個關鍵詞的例子來研究年輕一代的特點。


          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.



          對于千禧一代和Z一代來說,被認為是某一特定階層的專有財產的文化,如向公眾傳播的游戲、動畫和科幻電影等,已經成為他們生活的一部分。品牌歷來在戰略上排斥流行文化,但他們目前正試圖通過針對千禧一代和 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


          嘻哈和滑板在過去只是亞文化,現在成為談論潮流不可或缺的因素。擁有滑板運動員感性和理念的街頭品牌Supreme,受到全世界年輕人的支持。他們與許多品牌合作,激發年輕一代的收集欲望。千禧一代和Z世代毫不猶豫地將資金投入到他們喜歡的東西上。許多具有亞文化精神的公司和品牌正在引領這一潮流。


          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


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


          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.




          復古是一種持續數年的潮流,如今,年輕一代更注重將舊的潮流創造詮釋為新事物,而不僅僅是發現舊的東西。千禧一代和 z 世代不懷念過去,但過去本身對他們很有吸引力。比起始終如一的文化,他們認為多樣性和原創性是時髦的,他們沒有經歷過的內容是新出現的。


          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年發布了一款名為triple S的運動鞋,這是他們品牌之前從未見過的設計。它包含一個大的外底,一個不同成分的多層鞋幫,并被至少設計了3-4種顏色。triple S打開了ugly shoes的時代,因為設計得很像爸爸會穿的運動鞋,這種鞋也被稱為“老爹鞋”。在不同品牌中,他們發布了代表“ugly shoes”的運動鞋,并變得非常流行。90年代是運動服裝的全盛時期,許多品牌都使用技術重新推出當時熱銷的產品。這些款式不是根據鐵桿趨勢匆忙制造的,它蘊含著品牌悠久的傳統。年輕一代對這些品牌的設計和故事充滿熱情。


          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世代在物質豐富的生活環境中長大,他們傾向于追求有價值的生活。在購買產品時,除了實用性,他們更喜歡獨特性或故事化的產品。收音機曾經是記憶的產物,但最近又形成了以年輕消費者為中心的,復古收音機的新的消費趨勢。集感性設計、故事性和多種功能于一體的復古收音機,成為年輕消費者喜愛的禮物,也是年輕一代想要擁有的室內配飾。


          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.



          在認為環保就是性感的態度下,千禧一代和Z世代喜歡素食主義,覺得假皮草很新潮,甚至會考慮制作過程來購買化妝品?,F在,企業已經讀懂了這些市場趨勢,并開始改變營銷方式,只有注重可持續性而不是追求簡單美的公司才能生存下來。


          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是一家以引領環境保護和自然保護而聞名的公司,他們發布了一則“不要買這件夾克”的廣告,兩年內銷售額增長40%。年輕一代不是通過廣告來購買Patagonia的產品,而是贊同他們的理念,即盡量減少對環境的破壞,追求公平交易,并且告知一件夾克的制作過程如何影響環境,通過商業來保護環境。


          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品牌包包由卡車防水布、汽車安全帶、廢棄自行車橡膠管制作而成,是環境保護和循環再造的代表。它回收現有的廢棄品,并通過添加不同的價值進行再創造。盡管售價高達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.



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


          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


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


          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


          蘋果在其系統為每個表情符號添加了“性別中立”的選項。區分男人和女人的視覺元素被排除在外,比如頭發的長度變為中等長度,并使用灰色,這樣衣服的顏色就不會讓人想起特定的性別。膚色也拓寬了選擇范圍,讓用戶選擇與自己相似的顏色。蘋果2019年推出的表情符號功能為更多種族和性別提供了多種選擇,包括臉型、膚色、發型等,人們可以對蘋果的性別和種族問題一目了然。


          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.



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


          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產品演唱的Gucci Gang,在Billboard排行榜上名列第三。他通過Facebook,Instagram和YouTube對這首歌進行各種視頻營銷。2017年,以“Gucci” 和 “Gucci-ish”為關鍵詞的谷歌搜索量也高居時尚類榜首。當其他品牌擔心自己的品牌形象會在網絡空間受損時,Gucci在網絡進行投資,使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


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


          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 世代把消費看成是當前的滿足感,而不是未來的儲蓄,新的體驗是必須的投資。即使減少了其他方面的開支,他們也會根據自己的心情和目的,投資消費一種不同尋常的、更加現實的體驗。


          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


          創造與眾不同的概念空間,引導用戶體驗和購買眼鏡產品,Gentle Monster在空間上充了產品購買與體驗價值的空間策略,給千禧一代和Z世代帶來好感。針對線上線下,他們同時有效滿足了這幾代人的體驗型消費傾向。


          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通過各種營銷活動,提供令人愉悅的跑步體驗,引領跑步趨勢。在每年都舉辦高水平跑步活動,并且可以與專業教練和參與者一起訓練的Nike + Run Club上,根據不同的距離、速度和水平等技能,Nike為跑步者提供定制的跑步程序。Nike的營銷策略注重運動的難忘體驗,而不僅僅是銷售運動鞋,因為那些體驗到跑步樂趣的年輕消費者會在社交媒體上,不斷上傳展示自己跑步記錄的照片。


          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世代追求理性消費,并首先傾向于投資自己。接受一個品牌的方式也取決于品牌所追求的價值,它所具有的風格,以及它與自身的契合程度。過去,品牌在戰略上排斥流行文化,但現在他們正在針對年輕一代進行各種嘗試。千禧一代和Z世代正在成為最有影響力的消費者,品牌需要的是能夠直接吸引他們品味并帶來樂趣的營銷,而不是他們過去所追求的優雅的品牌戰略。


          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合作打造的全明星運動鞋已經發布。這款聯名運動鞋世上僅有一雙,用Chrome Hearts的識別標志-金屬十字徽標緊密地貼在匡威運動鞋中設計而成。這款運動鞋在Bam Margiela的Instagram上發布,他一直在發穿著聯名運動鞋進行滑板運動的視頻。


          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開了一家游戲中心,當你進入這個游戲中心,你會發現一個化妝品與娛樂共存的世界。以游戲機為概念,Chanel的目的是購物+娛樂。比起引誘人們對品牌進行單次性購買,重要的是讓他們體驗品牌并塑造一個年輕的形象。質量和苛性比固然重要,但是針對千禧一代和Z世代,品牌體驗是否有吸引力和是否有樂趣更重要。


          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設計師Virgil Abloh和NIGO(日本街頭時尚的傳奇人物和Human Made的創始人)進行了一次合作。NIGO曾為日本代表性街頭品牌Bape工作,Humanmade是NIGO于2010年創立的服裝品牌,正在推出基于日常主題的美國復古休閑服裝。這一合作,是通過Louis Vuitton 2020年秋季前系列外觀手冊公布的,由標題為LV2的設計產品組成,用Nigo的風格表達Louis Vuitton的特征。當這兩個在高級時裝和街頭品牌領域處于領先地位的品牌打破界限,展現出前所未有的融合,千禧一代和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


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


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


          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


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


          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發布了一款新產品,緞面午餐袋。因為外形酷似麥當勞的午餐袋,這款產品備受關注。Alexander Wang后來與麥當勞合作發布了午餐袋和野餐籃。他說“麥當勞品牌一直是最接近流行文化的品牌,能夠參與到創意項目中來,我感到很榮幸”。麥當勞中國首席營銷官徐佳婷(Christine Xu)也提到,“與Alexander Wang的合作反映了中國消費者對新理念和創新的強烈渴望,我希望這次合作能使人們微笑,能給他們的日常生活帶來微小但令人驚嘆的快樂”。


          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年,可口可樂推出一種新配方贏得了百事可樂的競爭,但由于現有消費者的強烈反對,新配方在上市三個月后就停止了生產。30年后,這款新可樂隨Netflix電視劇《怪奇物語3》回歸。30年前沒體驗過新可樂的年輕一代通過這部劇對新可樂的味道產生了好奇,可口可樂通過一家特殊的彈出式商店復制了新可樂的配方以及設計,并對這款限量版新可樂進行銷售。


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


          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和淺藍色瓶包裝。這款重新詮釋了他們原來品牌形象的產品在推出后兩個月內就實現了銷售目標。 Jinro正通過與Obey,Covernat等街頭時尚品牌合作,與戶外品牌Helinox發行野餐裝等方式,努力吸引年輕一代。


          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


          積極抓住年輕消費者的Louis Vuitton也將數字營銷擴展到了電子競技領域。Louis Vuitton與英雄聯盟合作的特別目標似乎是中國消費者,因為他們希望利用LoldCup (英雄聯盟+世界杯)在中國的流行來擴展消費者的體驗。


          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


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


          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


          與被新冠疫情捆住了手和腳的現實世界不同,動物之森允許人們在虛擬空間中享受日常生活,它給那些不得不呆在家里的人帶來了滿足感。在這個游戲中,你可以通過換幾件在現實中很難穿的衣服來展示你的時尚感。隨著游戲對時尚越來越感興趣,品牌也進入了虛擬世界。Valentino在動物之森中發布了二十種風格的衣服,Mark Jacobs 免費發布了6套,Anna Sui和 GCDS也有參與。對于追求個性和自我滿足的千禧一代與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角色服務公司Zepeto與韓國偶像Black Pink有過一次代表性的合作。由于 Zepeto APP沒有時間和空間的限制,粉絲可以和Black Pink的角色合照,并一起享受和參加各種各樣的活動。如今,年輕一代喜歡在網上創建他們自己的角色,這些角色生活在網絡空間,比在現實擁有更多的自由。


          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在 《堡壘之夜》的游戲世界中舉辦演唱會并發布新歌。1230萬用戶在世界第五大游戲中同時觀看了這場show。他們實時演出,用戶則在游戲中交流和享受這場演唱會。在因為新冠疫情無法舉辦演唱會的情況下,通過游戲進行的虛擬演唱會給年輕一代帶來了特別的樂趣。


          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


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


          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


          當代最著名的英國藝術家 Damien Hirst發明了一種 Snapchat鏡頭,任何人都可以在Snapchat APP中使用AR技術來體驗他的旋轉作品。有了這個鏡頭,人們可以用Demian Hirst完成作品的方式在APP上作畫。Damien Hirst和Snapchat建議通過這個項目,向那些致力于為弱勢群體提供現代醫學科學的非盈利組織捐款。這項捐贈政策使Snapchat得到了不大會為社會或環境花錢的,千禧一代和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


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


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


          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世代都是數字原住民,他們使用移動設備的比例遠遠高于其他任何一代。通過移動設備,這些年輕一代可以進行超越時空限制的交流,他們喜歡通過圖像和視頻與同齡人交流,通過社區獲取新聞和信息,也更加自由地展示自己的個性。這幾代人的這些特點也被應用到了移動APP的首選項上。對于千禧一代和Z世代來說,從通信到社交,購物到銀行,移動APP幾乎應用于他們日常生活的每一部分。本節我們將分享市場上正在興起的年輕一代的移動服務。


          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.



          年輕一代喜歡根據圖片或視頻來尋找、編輯和分享他們想要的信息,他們喜歡不厭其煩地制作和消費在線內容來展現自己。此外,千禧一代和Z世代熱衷于不到一分鐘的短視頻。因為年輕人非常渴望用簡單易行的方式制作和分享他們的日常故事,可以制作短視頻的,像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提供各種各樣的工具幫助人們進行短視頻內容創作。通過AR技術修飾人臉的濾鏡、各種貼紙、速度控制器、反向播放和慢動作等功能,只需按幾個按鈕,就可以應用于用戶的視頻。不像其他視頻平臺,用戶可以在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是一項功能,它允許用戶將照片和視頻分享到訂閱源,并實時分享他們的日常生活。Instagram Story有一個特點,內容會在24小時之后消失。因為知道內容會很快就消失,用戶可以以一種更隨意的方式,實時展示他們的日常生活。Instagram Story受到喜歡獲取關注,喜歡展示和表現自己的千禧一代和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,一個新的,允許用戶上傳長達一小時視頻的視頻平臺。IGTV開通移動優化視頻頻道,降低了新影響者的門檻。雖然在YouTube上發布內容的用戶比例要遠遠低于使用它的用戶,通過在IGTV的個人賬戶上發布內容,Instagram有讓用戶成為內容生產商的潛力,而不僅僅是使用者。


          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.



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


          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世代用來獲取信息的最大移動APP。例如當年輕一代想知道如何烹飪時,他們會搜索YouTube而不是閱讀書籍或在門戶網站上搜索。根據最近的一項研究,59%的千禧一代和Z世代更喜歡從YouTube視頻中學習,55%的人說他們在YouTube上學到的東西實際上很有幫助。對于這幾代人來說,YouTube已經成為教育和娛樂的平臺。


          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世代都喜歡的,特定游戲流媒體服務。Twitch針對的是想在游戲文化中進行積極交流的游戲粉絲,作為一名社區成員,他們在Twitch內感到聯系,自愿管理和擴大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是美國的一家社交新聞網站。大致來說,它是一個巨大的社區網站,但它專注于分享有趣的新聞和信息,而不是像社交網絡一樣注重成員之間的交流。千禧一代和Z世代通過訪問Reddit社區來了解他們感興趣的主題。調查顯示,87%的千禧一代和Z世代表示,Reddit社區包含了他們想要的所有信息。


          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世代的口味變得更加個性化和細分化,他們希望獲得的是適合自己口味的內容。精選服務對個人口味進行分析并推薦合適的內容。最近,AI技術可以讓用戶更加細致地獲得他們想要的內容推薦。


          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的每周發現功能, 可以自動分析用戶聽過的,并推薦適合他們口味的音樂。用戶聽得越多,越能得到更好的推薦。通過這個功能,Spotify已經成為世界上最好的音樂流媒體平臺,它滿足了許多千禧一代和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是一項利用AI技術搜索 beauty YouTubers,并給用戶推薦適合他們口味的美妝視頻的服務。Zamface在年輕一代中越來越受歡迎,它的訂閱用戶中,95%的年齡在13至24歲之間。Z世代通過beauty Youtuber的視頻關注和學習化妝方法,這是準確讀取了他們的需求,并利用AR技術不斷對服務進行創新的結果。


          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."



          現在的信息服務有很多,但很少能受到千禧一代和Z世代的喜愛。比起面對面,年輕一代有時候會覺得在網上交流更舒服。他們更熟悉實時分享自己現在的狀態。有些服務就專注于這些特性。


          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在用戶界面只留下兩個按鈕,將功能最小化,并特別強調社交功能。Facebook messenger帶來了Instagram story的功能,用戶可以在messenger中查看朋友的故事,也可以隨時查看朋友的連接狀態。千禧一代和Z世代通過移動設備與每個人建立聯系是自然而然的。對于他們來說,不需要與真正的朋友見面,就能感覺到彼此在一起,因為這樣,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 是在一款基于谷歌地圖的社交網絡信息服務,它在青少年中很受歡迎。Zenly 有一項普通messenger服務沒有的獨特的功能。如果你使用Zenly ,你可以獲知你朋友的位置,速度和剩余電量,當你與朋友相遇時,APP警報會顯示你正在遇見他的事實。 Zenly 在Z世代中如此受歡迎的原因是,其他幾代人經常認為分享自己的位置是對隱私的侵犯,而年輕一代則認為共享位置很有趣,可以確認與朋友的關系。


          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世代強調概念和故事的性格特征,許多公司為之創造了新的角色,并通過年輕人可以共情的故事與他們進行交流。 年輕人現在熟悉圖像或視頻而不是文字,他們通過創建自己的角色內容來引領新文化,并通過將自己喜歡的角色轉化為“文化因子”來自愿推廣。 此外,虛擬網紅已經成為一種新的營銷工具,以熱衷于網紅的年輕人為營銷對象。


          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.




          許多公司根據年輕一代的口味,使用角色IP內容來制作短視頻。 最近,可以實時反饋用戶響應并可以在社交平臺上快速傳播和輕松消費的短視頻內容,已成為一種有效的營銷工具。 它以機智的短片而不是長篇故事片吸引年輕的消費者。


          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角色品牌為例,通過使用其角色IP在TikTok中制作模仿的格式,產生了大量與年輕一代的口味相匹配的內容,并受到年輕人的喜愛。 此外,它們還提供了用于粘貼TikTok視頻內容的角色貼紙,使用戶可以自然地在他們制作的內容中宣傳角色。 以Spotify和華為為例,通過使用一些適合年輕一代口味的流行藝術家的人物IP分享短視頻,將新的品牌形象傳達給了這些世代。


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


          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世代人認為,表情包是一種新型的交流工具。 表情包是數字世界中獨特的交流工具,可幫助清晰直觀地表達情感并理解信息。 對于那些喜歡在不面對面的情況下進行交流的人來說,表情包已成為一種超越語言障礙的強大交流工具。 如今,千禧一代和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世代的個性和自我表達,而讓AR技術進一步發展。 年輕一代使用他們自己的頭像表情包來表達自己并創造新的文化。


          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世代使用的在線表情包包含了小眾情感的表達,而且他們更喜歡輕便且大致帶有直觀信息的表情包。 隨著小眾情緒表達的在線表情包變得流行,習慣了數字繪圖的年輕一代傾向于自己制作在線表情包。 即使它不那么精致,但如果年輕人能夠共情這個概念,它也會受到年輕人的喜愛。


          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. 



          隨著在線表情包在年輕一代中的流行,它已成為角色行業的重要組成部分。 由于個人可以在社交平臺上出售在線表情包,因此出現了各種角色,受歡迎的角色則擴展到了角色商品業務。 這些角色IP可以通過快閃店、在線商店,甚至可以直接與各種品牌進行合作。


          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世代的支持下,網絡卡通市場急劇增長。網絡卡通最近已成為制作電影、戲劇和游戲的主流內容。 隨著全球OTT市場的擴展,具有良好故事和想法的網絡卡通內容成為IP業務的機會。 網絡卡通的流行,讓《上帝之塔》和《高中之神》被制作成了動畫。 它已經在全球發行,包括亞洲、美國和歐洲,并且在海外市場上有很多粉絲。 Itaewon類也是基于網絡卡通在Netflix上制作的。 它在亞洲市場排名第一,并取得了巨大的成功。


          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.



          網絡卡通IP在角色IP行業中占據很大一部分。 使用網絡卡通IP設計的角色商品受到年輕一代的喜愛。 另外,各家公司與網絡卡通IP進行合作以推廣其品牌,因為它們可以自然地推廣其產品并為消費者(尤其是年輕人)帶來樂趣。


          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.




          虛擬網紅是由主要消費者群體的變化和科學技術的發展創造的一種新的數字IP趨勢。 它們主要在Instagram,Twitter,Facebook和Snapchat等社交媒體上活躍。 即使他們不是真實的人,但卻能通過與粉絲交流來表現自己,并且擁有大量的關注者。 這種虛構的特征已經成為利用社交媒體的公關市場的新趨勢。


          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.



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


          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.



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


          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.



          過去,品牌標識設計更加精致和不變,通常應用于印刷和應用程序。 但如今,媒體變得越來越多樣化,品牌標識也正在轉變為一種靈活的形式,可以適應這種變化。 許多品牌正在進行多種嘗試,以在千禧一代和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制作簡短的logo動畫。 品牌logo已不再是品牌標識中不可更改的元素。 品牌形象可以給千禧一代和Z世代一個有趣輕松的印象。



          隨著數字平臺的發展,海報也正在演變為移動海報。 由于千禧一代和Z世代都熟悉視頻內容,因此他們對移動圖形比對精致圖像更感興趣。 而且,與過去不得不將所有內容打印在一頁上的情況有所不同,通過運動圖形以更加有趣的方式顯示更多信息變得更加容易,這也吸引了年輕一代的關注。


          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)的動態海報是由字體和復古圖形組成的,感覺粗糙而怪誕。 羅伯托·華納(Roberto Warner)的海報采用簡單的版式和圖紙制作而成,突出了藝術家希望使用動態圖形顯示的內容。 許多圖形海報傾向于具有復古風格或由年輕一代喜歡的簡單有趣的圖形元素組成。


          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世代寧愿主動參與并獨自體驗新事物,而不是單方面看到信息。 許多設計師或藝術家試圖通過使用諸如AR之類的新技術,使年輕一代參與他們的作品。 年輕一代對與他們互動的圖形更感興趣。


          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和后印刷時代都是使觀眾參與到使用AR觀看展覽的項目,并且有很多使用AR技術的圖形實驗,使人們可以通過圖形海報體驗三維技術。 通過讓人們積極參與該項目,自然地將品牌形象烙印于熱衷有趣和新體驗的年輕一代中。


          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.



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


          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是一位專業的滑板手和藝術家。 他過去從事滑板很長一段時間,他從街頭和滑板場景中汲取了靈感并在推出了自己的作品后就成為一名藝術家。 他的自由奔放和個人主義插圖受到許多年輕人的歡迎,并在他與Supreme發行合作產品時聞名世界。


          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)是一位來自英格蘭的藝術家,比杜奇先生更著名。 他的作品的特征在于圖案、角色和對象像病毒傳播一般不斷擴展。 乍一看,他的作品看上去很幼稚,但氣氛明亮,受到很多人的喜愛。 他最近還與芬迪開展了有趣的合作。


          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年去世,是歌手兼作詞人和視覺藝術家。 他一生中大部分時間都在精神疾病中掙扎,這影響了他的圖形風格。 2020年,街頭品牌Supreme與其合作推出了聯名產品。


          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.



          俗話說,潮流在變,復古風格如今卻風行一時。 現在,可以使人聯想起80年代和90年代游戲和動畫的圖形重新成為一種時尚風格。 復古風格對某些人來說可能是懷舊的,或者對某些人來說是新鮮的。


          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是一個受歡迎的Instagram使用者,擁有24萬追隨者,主要繪制以K-pop偶像為主題的插圖。 他的插圖使人們覺得自己正在觀看90年代的動畫場景。 另外,Pixeljeff的插圖讓人想起90年代游戲中的場景。 過去由于技術限制而制作的粗糙且簡單的虛線游戲圖形現在被當成了表達個性的一種方式。 隨著這種復古趨勢,許多藝術家傾向于從過去的文化中獲得啟發。


          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.



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


          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世代人口現在占比為32%。 千禧一代已經在改變世界,Z世代也開啟了新的范例。 他們是現在和未來的真正消費者。 這篇研究文章研究了這樣的情況:這些世代具有比其他任何世代都更為獨特的個性,它們正在成為未來的力量,并且正在發生變化,以理解和反映這些世代在設計和營銷方面的文化和品味。 我們希望本文能夠幫助人們了解這些世代的特征,并了解他們所領導的趨勢。


          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.

          文章來源:公眾號ISUV

          做設計能用到的三條設計曲線,學起來準沒錯!

          資深UI設計者

          作為人類,我們無法總是理性地看到事物的本質。社會心理學告知我們,人類的感知與決策,在一定程度上,會帶有偏差。而作為設計師,我們可以主動利用這些偏差,設計更好的產品。

          做設計能用到的三條設計曲線,學起來準沒錯!

          本文介紹了三條曲線,它們都將認知偏差做了可視化的表達,前兩個來自日常收集整理,后面一個由筆者總結工作經驗得出,下面開始吧。

          雙曲貼現

          1984 年,經濟學家 Mazur 提出模型:我們的大腦難以處理冗長的信息,因為不確定性隨著信息的增加而增加。隨著時間推移,我們對收益的感知下降。

          做設計能用到的三條設計曲線,學起來準沒錯!

          決策中,我們傾向于把長期的權重調低:無論是收益還是成本,只要時間夠長,我們都傾向認為它不夠重要。

          舉例來看:各大銀行如何吸引潛在用戶辦理信用卡?可以承諾在后期,提供專業的優質服務與購物優惠,也可以信用卡辦理完成的當下,讓用戶領取諸如行李箱、廚具套裝之類的禮品。雖然兩種方式都有可能吸引來用戶,但原本辦卡意愿相對低的用戶,大部分是被當下的禮品所吸引。換言之,這部分用戶是「額外的」。

          做設計能用到的三條設計曲線,學起來準沒錯!

          各大互聯網產品都深諳此道,比如購買會員的頁面,首月打折/首月免費/一年后付費都是慣用的手法,就在當下,給用戶利益,促進轉化。

          做設計能用到的三條設計曲線,學起來準沒錯!

          技巧總結:比起稍后的利益,我們更傾向當下給用戶一些甜頭,哪怕甜頭很小。

          峰終定律

          峰終定律由諾貝爾獎得主 DanielKahneman 提出:人們對于一段體驗的評價,取決于這段時間內最好的體驗,與結尾的體驗。我們的大腦最擅長「以偏概全」,它不會無差別收錄所有內容,只會去記錄離自己最近、讓自己印象最深的點。

          做設計能用到的三條設計曲線,學起來準沒錯!

          宜家是峰終定律最好的踐行者。顧客的購物流程中,差強人意的體驗不在少數。比如店員很少,難以及時獲得幫助,比如購物路線很長,對于有明確購物目的的顧客不太友好,比如永遠要排的結賬長隊等等。

          做設計能用到的三條設計曲線,學起來準沒錯!

          但是宜家把握了它的「峰&終」。「峰」是過程中的小驚喜,比如隨時可以坐下體驗的沙發躺椅,比如偶爾出現的極便宜的家居用品,比如貼心的鉛筆與尺子;「終」就是結賬出口外,撫平顧客排隊焦躁的冰淇淋與熱狗。

          做設計能用到的三條設計曲線,學起來準沒錯!

          而這些產品宜家本可以提高售價,但卻沒有。因為用一個美味便宜的冰激淋結束購物之旅,糟糕體驗被拋到腦后,人們回想起宜家時,會選擇性地認為整個流程都非常棒。

          做設計能用到的三條設計曲線,學起來準沒錯!

          游戲產品也非常善于遵循峰終定律讓玩家玩得更盡興。比如疫情之后大熱的 Switch 健身環大冒險。

          做設計能用到的三條設計曲線,學起來準沒錯!

          運動時,系統會一直強力夸夸為玩家打氣,完成動作都會有及時的鼓勵給到,創造一個接一個的體驗「峰」值。每一次通過關卡,還會讓玩家站直并高抬雙手,將健身環舉過頭頂堅持幾秒,畫面里的「終」是非常有儀式感的 ending 動作,讓玩家成就感滿滿。

          做設計能用到的三條設計曲線,學起來準沒錯!

          技巧總結:在滿足了用戶的常規體驗之后,用心打造一些帶有巧思的設計,安排在流程的中間與結尾處,給用戶創造峰值體驗。這不僅有可能讓普通用戶轉化轉化成忠誠用戶,還能極大提高產品滿意度還能帶來口碑效應。

          徒勞曲線

          租房產品中,用戶在 APP 內挑選幾套心儀的房源,再約房東/經紀人去實地看房,是很典型租房用戶場景。我們發起「看房路線」這一功能的設計。使用看房路線,用戶能夠在選好x套房源后,根據智能規劃的看房順序與路線,輔以時間提示與導航,有條不紊地去實地看房,妥妥貼心功能。

          做設計能用到的三條設計曲線,學起來準沒錯!

          我們大費周章產出了設計方案,上線后的效果,無論是使用頻率與使用深度,都不理想。調研后發現,實地看房的場景,其實存在極大的不確定性。用戶在看房中途,可能做出決策租賃某一套,也可能被經紀人帶領去看別的房源,從而中斷原本的計劃。

          做設計能用到的三條設計曲線,學起來準沒錯!

          用戶是完全自由的,他們會尋求最熟悉、最好用、最穩妥的途徑去解決自己的非娛樂性問題。至于導航,用戶平時使用什么同類產品呢?高德地圖、百度地圖這類很成熟的地圖類應用。

          用戶不會因為場景不在專業的地圖APP內,就原諒打折扣的導航體驗。用戶預期遠高于實際產品開發程度,這種認知偏差,需要產品人來買單。

          做設計能用到的三條設計曲線,學起來準沒錯!

          總結這個功能的問題出現在哪里?其一,設計缺失,沒有將線下流程的旁枝側節考慮全面;其二,設計過度,但沒有成本去滿足用戶的高階需求。如何調整用戶的預期到合理的區間,我們做設計時的「度」怎樣把握,徒勞曲線應運而生。

          做設計能用到的三條設計曲線,學起來準沒錯!

          橫軸是設計投入程度,縱軸是用戶滿意度,隨著設計投入程度的加大,用戶的滿意度呈遞增態勢,但到了一定程度,滿意度會斷崖式下跌至谷底,這個階段的設計投入便是徒勞。當設計投入快到達極限時,滿意度又陡然到了一個新的高度。

          我們要將自己的設計置于一個合理的區間,并將用戶的期望調整同步。當有足夠成本支持(無論可觀支持抑或主觀爭?。r,把握機會,為用戶創造體驗。

          做設計能用到的三條設計曲線,學起來準沒錯!

          技巧總結:要引導用戶在使用產品的時候,對功能有合理的預期——如果不能提供完善的服務,就用樸素的設計方案滿足用戶的基本訴求,而非好高騖遠。在用戶有更加合理選擇的時候,給與用戶便利,尊重用戶的自由。這樣不太功利的思考與設計,很可能帶給你的產品帶來更快的迭代,與更多的用戶。

          雙曲貼現、峰終定理、徒勞曲線,三條曲線嘗試將人們的思維偏差暴露出來,利用得當,事半功倍。希望能帶給你一點啟發。


          文章來源:優設    作者:58UXD


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          論用戶有多懶!

          ui設計分享達人

          滿足用戶的懶是用戶體驗的本質,利用用戶的懶是探索人性的設計!





          用戶有多懶?


          從我生活中的一個例子說起,我成功讓公司洗手間的紙變得夠用了。 

          事情是這樣的,公司每個樓層的洗手間每天只提供一卷紙,每次中午之后大多就是缺紙狀態,這讓人很不爽! 

          洗手間裝有兩個抽紙盒,一個靠里,一個靠外,每次保潔阿姨,都把卷紙裝在離洗手池較近靠外的抽紙盒中,這就滿足了人們洗手后很方便的拿到紙來擦手。 

          有一次在洗手間門口遇到保潔阿姨,我跟她說“大姐以后把紙裝在里面的抽紙盒,這樣用的時間長”,她笑了笑(當然我先說的是,兩個都裝上)。卷紙裝在里面之后,結果有時我晚上加班還有。 






          人有多懶,洗手后一多半人不再選擇多走幾步去拿紙擦手。所以在產品中和生活中,有時當你覺得有些設計不合理時,有可能是設計者的故意為之。 


          人有七宗罪,其中就有懶惰,懶是人的天性,是刻在骨子里的基因。


          現在互聯網產品幾乎都是在滿足人的懶,買菜不用去超市、餓了可以叫外賣、不想看書讀給你聽、不想打字有語言功能等等,互聯網的發展把人慣得越來越懶,也正因如此,才成就了許許多多的產品。




           產品中如何滿足用戶的懶  


          很多產品的商業屬性是滿足人的懶,其實產品中好的交互設計,通常也是以滿足用戶的懶,而讓用戶感受到好的體驗。 


          1、簡單簡潔

          電影《教父》中一句臺詞給我印象深刻, “能用半分鐘看清楚事物本質的人,注定和用半輩子看透的人,有不同的命運”,這句話在產品設計中,反過來看就是, 能用一句話說清楚的事情,為什么要長篇大論,復雜不會給帶用戶帶來價值,而是消費了他們的認知,因為用戶很懶。 

          下圖是產品中很常見的通知設置,天貓讀書的提示文案太啰嗦,用戶根本不會逐字的閱讀,用戶看提示文案就是一掃而過,這是因為用戶懶而養成的行為習慣。 



          2、為用戶多想一步

          滿足用戶的懶,就是給用戶制造“爽點”,在產品的交互設計中為用戶多想一步,用戶就會覺得用的很爽,覺得產品懂他。 

          當手機截圖后,在一定的時間內打開微信對話框點擊加號圖標,截圖會自動預備發送,因為用戶的操作行為大概率就是要發截圖。 

          iPhone手機長按微信應用圖標,會彈出一些即時性強的功能入口,這大大提高了產品的使用效率,用戶一旦使用一次就會愛上。 

          在此之前,如果面對面互加好友,需要好多步才能打開二維碼,主要還不好找到,對于陌生的朋友等待時間長了,難免會有一些尷尬的氣氛。 



          為用戶多想一步,就是思考用戶的行為目的是什么,然后在設計上為用戶提供快捷的操作方式,這樣就能提高產品的使用體驗。


          設計產品時不能總以自己慣有的思維方式去設計,要能把自己變成當下產品的用戶,站在用戶的角度去尋找答案解決問題。




          3、的交互方式

          用簡單的方式,讓用戶輕松完成任務。一般來說,用戶完成一項任務花費的時間越少,在易用性、性的體驗上也就越好。 

          這點在手機解鎖的交互演變上能體現出來,以前手機都是密碼解鎖,然后有了滑動解鎖,又有了指紋解鎖,再到現在的面目解鎖,每次的演變都是在減少用戶的操作,提高了使用效率。 

          手機解鎖的演變過程 

          與手機解鎖相同的還有APP的登錄演變,從繁瑣的輸入用戶名密碼登錄到如今與電信運營商合作識別手機號一鍵登錄,你會發現每一次的變化,同樣是在減少操作提率。 


          另外要強調的是,產品設計者要善于結合自己的產品思考問題,不能看別人有什么就加什么。 

          別人家產品有第三方登錄快捷方便,你也加,但其實如果不結合自己產品去思考,為什么要加,要滿足什么,目的是什么,加上可能就是多此一舉,制作麻煩,比如有些B端對內的產品根本不適合第三方登錄。 


          4、保持探索創新精神

          有位產品大佬曾經說過,“用戶習慣的操作路徑,不要試圖去改變,改變就會影響用戶體驗”,這觀點聽著似乎沒毛病,但其實有問題,至少我是不認同的。 

          試想一下,每次微信大改版的時候,是不是有很多人都會抱怨,“改的什么呀,用的好不習慣”,究其原因就是用戶的懶惰所致,對于改變熟悉的事物,普通用戶本能上就是會有排斥心理,因為他(她)懶的去適應。 

          然而隨著時間的推移,用戶會慢慢發現原來這樣的設計好像是比以前好用了。 

          用戶再次適應有兩個原因:一是因為用戶又習慣了,二是確實是產品的創新設計提高了體驗。 

          所以,改變操作路徑,只要經過團隊驗證測試后,對體驗和效率是可以提升的、有利的,就可以去嘗試轉變用戶原有的操作習慣,如果是好的改版,用戶很快就能適應并感受到變化后的價值。 


          5、產品中用戶懶的做的事

          產品設計者們有必要知道的事,用戶使用產品是懶惰的,用戶在沒有硬性需求的情況下, 很少有人更改產品的默認設置,也很少有用戶看系統消息和群發的短信,所以用這兩種方式推廣活動,轉化率極低。 

          對于推送消息,不要那么頻繁,除非你是新聞類產品,推送頻率高用戶會直接關閉推送。另外,有很大一部分用戶,對于絕大多數的產品不會開推送,因為他(她)不希望被推送所打擾。 

          有些功能從產品的角度希望用戶使用,但如果設計上不能吸引用戶,那用戶肯定是懶得摸索使用,所以改變用戶的懶,就得讓無聊的設計變得有趣、有激勵,從而吸引用戶,這樣才能改變用戶的懶的狀態。 

          產品的體驗設計,其實就是滿足用戶的懶,但其實能把懶用戶通過設計手段調動起來一定是探索人性后的設計。 


           最后 


          其實,因為人性中的懶,才成就了如今的互聯網盛世;因為人性中的懶,人們才為省力氣發明了輪子、嫌溝通麻煩才發明了電話等等,從某種程度上看,是因為人性中的懶才推動了社會的進步。 

          我們從更高一個層面去思考這個問題,是哪些人創造了互聯網盛世,又是哪些人推動了社會進步,絕對不是懶的學習、懶的改變自己的人,而是那些善于思考想要改變“懶”的人。


          文章來源:站酷-吳星辰

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務




          設計師要懂的原子設計(AtomicDesign)理念

          周周

          “我們不設計頁面,我們設計構成元素的系統?!薄猄tephen Hay 

          原子設計理論并不是什么高大上的規則。

          隨著網頁設計的持續發展,我們認識到開發設計系統(design system)的重要性,它最早就是為了讓網頁設計師更容易理解網頁的構成,后來才延伸到UI設計當中。


          簡單來說,當公司的業務產品逐漸擴大時,我們需要制定一套完整的設計系統,提升設計和開發的協作效率,統一所有設計師的輸出物。 開始設計系統的制定時,大部分設計師可能都會先去網上找到大廠現成的設計系統,當拿到他們的成品的時候,會把自己的產品進行拆解和借鑒,這的確能快速解決問題,但是如果不理解其中的組織規則和邏輯,只是借鑒他們現成的設計系統,只能了解個大概,知其然而不知其所以然。因此,原子設計理論的出現就是為了幫助我們去搭建設計系統,這套理論已經逐漸被國外一些大廠應用于創建統一和富有層次的設計系統。

          原子是所有事物的基本構成物質。每一個化學元素都具有不同的性質,并且它們一旦被分解就會失去其意義。

          分子是由兩個或兩個以上的原子通過化學鍵結合在一起的。這些原子的組合具有自己獨特的性質,并且相較于原子來說,更具實際意義和可操作性。
          有機體是由分子有機地組合在一起的。這些相對復雜的結構可以從單細胞生物一直到像人類這樣難以置信的復雜生物體。 


           宇宙中的物質都可以被分解成為原子元素。

          碰巧的是,我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網站、APP、企業內部網、hoobadyboops等等是如何由相同的HTML元素組成的。

          △Josh Duck的“HTML元素周期表”

          接下來和大家細聊一下什么是原子設計;原子設計到底好在哪里;為什么要有設計系統;以及該如何利用原子理論創建自己的項目組件庫。

          原子設計(Atomic Design)理念最早是由國外網頁設計師Brad Frost提出的,他從化學元素周期表中得到啟發,發現原子結合在一起,可以形成分子,進一步形成組織,從科學的角度來講,在宇宙中的所有事物都是由一組有序的原子組成。

          Brad將這個概念應用到界面設計中,仔細觀察后我們不難發現,界面其實就是由一些基本的元素組成,文字,顏色和圖標等都是一個個原子。

           

          通過原子設計,我們可以把界面看作是一個連貫的整體,同時也是一些元素的集合,每個元素都不盡相同,互相結合產生更多層次和結構,模塊之間相互統一。說到底,原子設計其實是一種設計方法論,它由原子、分子、組織、模塊和頁面共同協作,由此創作出統一和富有層次的設計系統。 

          簡單來說:原子結合在一起,形成分子,進一步結合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。

          原子設計是一種方法,由五個不同的階段一起工作,以更慎重和更具層次的方式創建界面設計系統。從而創造出更有效的用戶界面系統的一種設計方法。

          它的五個不同階段是:

          原子(Atoms):為頁面構成的基本元素,例如標簽、輸入框、文字、顏色等;
          分子(Molecules):由原子構成的簡單UI元素,例如按鈕;
          組織(Organisms):相對分子而言,較為復雜的構成物,由原子及分子所組成;
          模板(Templates):以頁面為基礎的架構,將以上元素進行排版;
          頁面(Pages):將實際內容(圖片、文章等)放置在特定模板內;

           

          原子設計不是一個線性的過程, 它更像是一個心理模型,來幫助我們把用戶界面看作是一個連貫的整體,同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面,讓我們更深入的了解每一個階段哦~

          原子

          如果原子是物質的基礎組成部分,那么我們用戶界面的“原子”就是那些構成我們用戶界面的基本構件了 。在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線等。 


          在團隊開始新項目時,為了保證各個頁面具有統一的設計風格,我們會制定一套簡易的視覺規范,在關鍵的設計元素上,各個設計師達成一致,這樣就能很大程度保證不同頁面的風格統一,并在這個基礎上去探索更有創新意義的設計方案。

           


          在模式庫中,原子一目了然地展示了所有的基本樣式,當你回來繼續開發和維護你的設計系統時,這是一份很有用的設計參考指南。

          分子

          分子是原子組合建立的元素,兩個原子即可組成一個分子。

          在界面中,分子就像是一個由UI元素組成的相對簡單的組織。例如,搜索框里的文字和圖標共同打造一了個搜索表單分子。

           


           以按鈕為例,它的組成元素包含了文字、色塊、圖標和柵格。合并后,這些抽象的原子從毫無關聯到又一個共同的目的,圖標和文字互相配合傳達意義,顏色定義了按鈕的特性,柵格為按鈕定義了一個尺寸和規范。

           


          將單個元素組裝為簡單的功能組是我們一直以來構建用戶界面的方式,可幫助UI設計人員和開發人員堅持單一職責原則,這種方式簡單且復用性高,可以保證界面具有良好的可用性。

          以界面設計中的表單為例,表單是一個非常常見的設計元素,一個表單分子是由文字、圖標和線條原子組成。這些原子合并后,得到的是一個可以應用在任何信息展示或者功能入口的組合。

           

          組織

          組織是由分子或原子或其它有機體組成的相對復雜的UI部分 。這些組織組成了界面的不同部分。

          通過結合分子和原子,我們可以構建更復雜和可擴展性的模塊,這個稱之為組織,其實也可以稱之為組件,這些組件組成了界面的不同部分。同樣以表單為例,一個表單我們可以通過數量的組合,以及間距的調整,元素的增減,在界面中表達不同的場景和含義。從建立分子到建立更精細的組件,這為設計師和開發人員提供了重要的內容構建思路。

           

          組件在解放設計師生產力方面有著重要的作用,我們可以把界面中常見的組件進行分類整理,如搜索、表單、圖片和卡片等,這些常用組件基本能滿足日常的設計需求。以Aribnb為例,他們主要分為3類:卡片、表單和內容。每個標簽內容的設計形式盡量都保持統一,因此負責不同內容模塊的設計師只要選擇同一個組件就能完成頁面的設計。在短時間內就可以完成頁面超多的復雜項目,極大的提升了團隊的設計效率。

           

          在網頁端最典型的例子就是網站導航,搜索表單,我們幾乎訪問的每個網站都會看到這些類型的組件。 

          模板

          原子,分子和組織的這種語言有助于我們有意識地構造設計系統的組件。但是,最終我們必須采用一個更適合描述我們最終產出的語言,這樣才好匯報給老板、客戶和同事,簡單來說就是說人話。

           

          模版的本質就是線框圖,在這一步我們基本可以看到一個產品的形態。我們可以不斷調整組件和分子組合在一起的效果來嘗試不同的方案,找到一個相對合適的方案。模版的意義就在于可以專注于頁面的內容結構布局,而不是頁面的最終內容,此時模版內容是隨時可以調整的,嘗試不同的方案,在多個模版中進行對比,在這個階段改動和溝通保證了成本。因此,模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。

           

          模板是頁面級別的對象,它將組件放置在布局中,并顯示設計的底層內容結構。在設計一個有效的設計系統時,必須在布局的環境中展示組件的外觀和功能,以證明這些部件組成了一個功能良好的整體。

           

          模板的另一個重要特征是它們專注于頁面的底層內容結構,而不是頁面的最終內容。設計系統必須考慮內容的動態性質,因此,把例如標題和文字段落的圖像大小和字符長度此類組件的重要屬性說清楚是很有幫助的。

          頁面

          頁面是模板的具體實例,填充了真實的內容(圖片、文字等)后形成頁面,也就是常說的「視覺稿」,將占位符替換為有代表性的真是內容,使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的視覺方案。

           

          頁面階段是原子設計中最具體的階段,由于一些眾所周知的原因這個階段非常重要。別忘了,這可是用戶在訪問你的界面時會實際看到和交互的內容。

          除了演示用戶所看到的最終界面之外, 頁面對于測試底層設計系統的有效性是必不可少的 。在頁面階段,我們可以看到當將真實內容應用于設計系統時,所有這些模式如何運作。所有的一切看起來都很棒嗎?如果答案是否定的,那么我們可以回過頭去修改我們的分子、生物體和模板,以更好地滿足我們內容的需求。

           

          頁面還提供了一個表達模板變量的地方,這對建立強大而可靠的設計系統至關重要。以下是模板變量的幾個例子:

          用戶在其購物車中有一個商品,另一個用戶在其購物車中有十個商品。
          網頁APP的儀表板通常顯示最近的活動,但是該部分對于首次使用的用戶是禁用的。
          一篇文章標題可能是40個字符長,而另一篇文章標題可能是100個字符長 

          在所有這些例子中,底層的模板是相同的,但用戶界面將會隨著內容的動態性質而改變。這些變化直接影響了底層分子,有機體和模板的構建方式。因此,創建解釋這些變量的頁面有助于我們建立更具彈性的設計系統。


           這就是原子設計!這五個不同的階段同時協同工作,以產生有效的用戶界面設計系統。


          原子是最基礎的UI元素,并且是可以用作界面的元素構建塊;
          分子是用于形成相對簡單的UI組件的原子集合;
          組織是形成界面各個部分的相對復雜的部件;
          模板將組件放置在布局中,并演示設計的底層內容結構;
          頁面將真實內容應用于模板,設計出視覺稿,并最終成為開發落地的依據;

           

          原子設計為制作設計系統提供了清晰的方法??蛻艉蛨F隊成員通過實際的設計流程與步驟,能更好的去理解設計系統的概念。原子設計使我們能夠從抽象的設計中過渡到具體的設計中來,因此我們可以對一個設計系統進行一致性和可伸縮性等類似特性的控制。


          通過模塊化的設計系統調動組件,可以使我們開發新的產品時,從開始就可以對產品進行嚴格的把控與一定程度上的控制,進而規避了事后風險。開發之前不確定好系統模塊化,毫無邏輯的去開發,開發到一半發現功能與需求對不上等問題逐漸產生,會導致產品的延期、人員成本的浪費、資金成本的增加,產品的迭代率的下降、進而影響市場先機與市場占有率。 

          原子化設計與原來的樣式庫設計思路不一樣,原子化設計從抽象到具象,從元素到組件,讓設計師從底層開始思考,對整個設計會有更清晰的理解。同時也能讓設計更加統一,在新增組件的時候更謹慎。

          原子設計的原理可以保證任何一個設計組件的構成與開發構建組件一一對應。同時應用原子設計的設計軟件(e.g., Sketch, Figma)可以給新設計師足夠的自由滿足需求變通,并且可以保證同一個設計組件的更新會覆蓋到任何一個使用這個組件的設計中。 

          原子設計為我們提供了一些關鍵的見解,幫助我們創建更有效、更深思熟慮的UI設計系統。

          那么、 


          如果產品規模小只需要1,2個設計師,大概率是前期不需要大費周章搞一個需要開發配合的設計系統??梢灾焕肧ketch或者Figma做一個像貼紙一樣的設計組件庫。但是功能多了怎么辦,公司來新人了,當新設計師產出后就會發現與原設計師設計的風格不一樣,慢慢發現整體設計風格不統一了,只靠一個簡單的組件庫很難能滿足新功能需求,新功能貼紙上沒有設計或者設計需要變通,又或者是新設計師忙著交工忘記檢查自己新組件和已有組件的異同。

           

          這時候就會需要一個設計師領頭去重新整理設計系統,走查發現同一個正文所用的十幾個不同字號,又或者是十幾個透明度不同的灰黑色字體,所有組件跟現有上線產品對比整理好后一并交給開發,開發再一一整理代碼庫。

          設計系統(Design Systems)對于很多年輕設計師可能十個新名詞,但是設計規范和組件等我們應該還是有一定認知的。在設計的過程中,我們會被其影響。在我們日常所使用的App產品中,如Apple、Google、Airbnb、Uber、滴滴等,他們的產品體驗非常流暢,用戶使用產品時能夠地滿足需求,在其良好的體驗背后都有著一套強大的設計系統做支撐。


          為什么需要設計系統

           

          1、團隊協作,體驗一致。以滴滴為例,雖然只是一個簡單的打車應用,但是其旗下的業務卻很多,快出、出租車、順風車等,每個業務都由不同的團隊和設計師負責??梢韵胂笕绻麤]有設計系統,任由各模塊設計師自由發揮,風格各異,出來的結果可想而知。而有了設計系統的幫助,就會感覺界面風格非常統一,感覺是出自同一個設計師之手,可見其設計系統的功勞不小。

           


          2、系統的管理多樣性。在設計過程中,我們會發現過程中,我們會發現每個業務的形態都是基于不同的場景,因為場景的多樣性,在表現上就會催生出不同的樣式。如果每個業務都用一種樣式表達,久而久之當業務增長過快時,我們現有的設計模式就會難以滿足。Airbnb的設計方式就是非常值得參考的一個案例,從最開始是提供民宿,到后來新增的餐館服務,你會發現房源和餐館都用了同一套圖文信息結構,只是在內容的細節上有一些不同。這樣可以降低設計的難度。設計師不用為每個場景思考一個設計模式而煩惱。同時,用戶在瀏覽不同場景的內同時,在相互切換中也不會產生為違和感,一切都是很自然的操作。

           

           

          3、幫助產品成長,避免一次性設計。互聯網產品的成長模式是一種漸進式迭代,在產品初期的主要訴求是快速上線,等到產品上線獲取一定的用戶,證明它可以活下去時再逐步完善,增加更多的功能。每一次的迭代都是站在我們之前的思考之上,每一次的優化都會讓我們的設計更進一步,這是我們期望達到的結果。

           


          以Uber為例,新版本繼承了黑色按鈕的設計,并和地圖進行了結合,地圖的配色和舊版本相比也變得生動了,這種改變并不是一蹴而就,而是建立在原有版本之上。

          一致性(Consistency):由于分解界面成單一元素,不論在哪一個頁面,UI元素的互動性是相同的,例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗相同,在視覺上更為和諧。


          效率(Efficiency):由于建立了組件庫,一旦要更改某一個元素,可以馬上施行、應用。


          跨部門的共通語言(Collaboration):不僅方便設計師思考頁面的和諧性,也可以讓工程師、測試檢驗清楚頁面的邏輯架構及變化,減少不必要的來回溝通

          在此,順便淺談下設計系統。

          通常,設計系統包含的內容由設計原則、設計語言和組件庫,這是一個整體的概念。

           

          設計原則

          設計原則是一個產品的核心設計理念,設計的本質就是解決問題,在制定設計原則時要建立在這個中心思想之上。這些問題也許是一個業務形態,例如打車的場景,也許是一個設計形式,如表單。設計形式又很多,我們應該如何選擇呢?相對合理的方法就是建立一個規則,所有的問題和形式都想這個規則靠攏,減少不確定性,這就是設計原則的出發點。因此我們可以理解為,設計原則就是一系列的規則,是我們設計過程中要遵循的中心思想。

          例如:蘋果把審美作為第一要素存在于設計原則中,它的產品往往也是品味的代名詞,看看它的設計原則就知道了:

          審美的完整性

          一致性

          直接操作

          即使的反饋

          隱喻

          用戶可控

           

          △ 官網:https://developer.apple.com/design/ 

          再來看看Material Design,Google對其定義是一個完整統一的系統,結合了理論、資源和工具的數字體驗產品,相比而言它的設計原則就是更加獨特,這是它的設計原則:

          材料是一種隱喻

          大膽/圖形/強調/

          運動賦予意義

          靈活的基礎

          跨平臺 

          △ 官網:https://material.io/design

          由此可以看出,和iOS相比,Material Design的設計原則更加的抽象,因為他擁有一個獨特的設計世界觀,用還原的方法和物理方法呈現出它的本質,通過抽象的視覺卡片傳遞出設計的目的和原則。

          設計語言

           在建立設計原則后,下一步就是制定一套設計語言規范,設計規范是設計系統的表現層,面向的對象是團隊設計師和開發者,他能幫助設計師的設計輸出保持風格統一。同樣也能幫助開發者高度還原設計。非常有利于設計師和開發者的協作。這套規范包含的有:字體、顏色、圖標和柵格。 

          組件化設計

          組件化設計主要作用有兩點,一是保證多人協作效率,組件化設計可以快速完成一個簡單頁面的設計,提升設計效率;二是保持產品體驗的統一性。同時,組件化設計環節在設計系統中是一個相對重要的工作,需要有一個全局觀,要有較強的設計水平和溝通協作能力,這樣,組件化的落地才會得到很好的推進。

           

          在多屏時代,我們時時刻刻都在設計產品界面,需適配多系統,其中很重要的一點是如何在多系統之間保持體驗一致性,很多人想到的就是規范,要想做一套嚴謹邏輯好,靈活的設計規范,那么原子設計可以幫助我們來很好的實現它,它在構建設計系統中算是比較科學的一種方法,國外很多設計團隊都在使用這樣的設計方法。比如以下這幾個團隊: 

          1、Airbnb

          Airbnb設計副總裁Alex Schleifer在IXDC2017國際體驗設計大會上分享了這一創新React Sketch app 管理設計系統, 這是為Airbnb的設計系統而設計的,其實就是個實時更新的代碼數據庫,可以實時查詢sketch數據、代碼,也可以下載圖標、設計模塊,所有工程師、設計師都可以免費下載。

          △ 官網:https://airbnb.design/events/when-we-use-systems/

          2、Frames

          Frames 使用了精致的組件和先進技術,并結合 Sketch 構建了強大的 Web 設計系統,同樣能滿足修改原子,全局同步更新的功能,支持響應式布局。提供了近百個網頁模板,可以非常迅速地完成效果圖制作。

          △ 官網:http://framesforsketch.com

          3、Nested Symbols

          這是一套免費的設計系統,它將按鈕、輸入框、下拉菜單、通知等控件,都制作成了嵌套符號,方便自定義和編輯。

          △ 官網:https://www.janlosert.com/ 

          原子設計理論最大的價值,就是為設計體系/組件庫的構建提供思路和方法,如果你不滿足于市場上現有的設計系統,我們還可以自己創建。因此我們首先要為產品設計出一個獨特的視覺語言作為起點。這個視覺語言一定要有力度、易于擴展,必須能在所有地方奏效!


          接下來就以 Sketch Library 功能來實現組件庫的創建。

          第一步:定義顏色(color)

          將顏色添加 Main、Text、Status 等一級分類,例如:Color/Status;再添加二級分類,例如:Color/Status/Success 等,命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后,將每個顏色轉換成 Symbol,便可統一調用。

           


          第二步:定義字體(font)

          根據設計規范,將不同字號的文字樣式羅列出來,例如:Title 1、Body、Body2 等,按照「樣式名稱/顏色/對齊方式」的層級結構,將文字賦予 Text Style,整理出所有的字體樣式。

          第三步:定義圖標(icon)

          將圖標放置在 24*24px 大小畫板內,從定義好的顏色系統中選擇合適的 Symbol,這樣替換圖標顏色時直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸(size)大小,并把調整尺寸(Resizing) 設為上下左右同時吸附,以確保圖標在使用時可以等比縮放。

           

          第四步:加入其他元素(Elements)

           

          根據以上對原子的定義和命名方式,依次完成對其他原子、分子和組織的定義,例如:按鈕、表單、空狀態等,整個過程都是通過 Symbol 的不斷嵌套,最終實現組件庫的創建。

           

          第五步:加入組件庫

           

          使用快捷鍵「cmd+, 」打開 Preferences 面板,選擇「Libraries」(組件庫)標簽,點擊「Add Library」(添加組件庫)按鈕添加剛才的 Sketch 文件,完成后就可以從其他的 Sketch 文件中,對此庫里的元素進行調用了。

           

           

          寫在最后,原子設計是一套具有科學嚴謹的創建設計系統的方法論,是一個構建UI系統的心理模型。

           


          原子設計使我們可以將我們的界面UI細分為原子元素,并通過這些元素組合在一起形成最終的界面。

          原子作為整個理論最基礎的元素,當我們改變其中的原子時,整個體系都會發生變化。原子的設計概念和sketch中的“符號”有異曲同工之妙,當我們改變其中一個元素時,其他所有包含這個元素的頁面都會發生變化,可以保證整個系統的一致性和層次感。原子設計為界面元素提供了應用規則和組織原理,這套方法論對于設計系統建立、團隊協作、產品迭代都具有非常重要的指導意義。

          經常有同學問ios設計規范,安卓設計規范在哪看這類問題,最后,來推薦一些大平臺的設計網站,上文出現過的下面就不重復了。我們耳熟能詳的優秀設計都是來自于這些世界互聯網公司,說真的,審美這東西還真是人家說了算~


          反正看看又不要錢,都去康康唄~

           

          Google Design

          谷歌設計中心,它非常全面的展示了谷歌的設計工作和概念。包括Material Design在內的所有關于設計、體驗、產品等互聯網領域的探索。 

          △ 網址:https://design.google/

          Fluent Design

          微軟基于Windows10的設計語言,包括人機界面布局、控件、樣式及資源下載。

           

           

          △ 網址:https://www.microsoft.com/design/fluent/#/

           

          IBM Design Language

          IBM設計語言是偉大設計的代名詞,他將人們的需求轉化成精心打造的產品。在這里可以學習IBM設計團隊一用戶為中心設計的新思維方式。

           


          △ 網址:https://www.ibm.com/design/

           

          Facebook Design

          臉書設計官網,在國內,我們常??吹侥槙脑O計文章被翻成中文為中國設計師所學習

           

           

          △ 網址:https://facebook.design/

           

          Uber Design

          作為全球第一家即時打車應用,優步其超前的設計理念和優秀的用戶體驗成為同類產品競相模仿的對象。

           

          △ 網址:https://www.uber.deign.com/


          Ant Design

          螞蟻金服設計平臺是阿里旗下子公司,基于螞蟻金服生態系統的跨設計與開發的體驗解決方案。

           

          △ 網址:https://design.alipay.com/


          參考資料

          《原子設計》官網

          Airbnb 設計規范

          Apple 設計規范

          Material Design設計規范

          Google及其他

          文章來源:tob.design

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合