一套 UI 界面當中，核心的 APP 圖標是用戶每天都要接觸、經(jīng)常使用的視覺組件和交互對象。設(shè)計圖標的時候，要用到大家最熟悉的元素才能貼合用戶認知，要醒目、統(tǒng)一，也要足夠「隱形」，避免喧賓奪主。今天這篇文章，來自著名的 Tubik Studio 團隊，他們?yōu)槿A為旗下的 EMUI 10 系統(tǒng)設(shè)計了核心的圖標系統(tǒng)，來看看他們的設(shè)計過程吧。

我們總不會低估一個操作系統(tǒng)基礎(chǔ)圖標，對于產(chǎn)品的可用性和合意性的影響?；A(chǔ)圖標雖然小巧，但是對于整個操作系統(tǒng)而言，總是極具影響力的，因為他們是用戶界面的核心元素，幫助用戶快速直觀地在系統(tǒng)中定位、瀏覽、導(dǎo)航。但是，對于設(shè)計師而言，圖標的設(shè)計始終是挑戰(zhàn)，它看起來最為簡單，但實則為最為艱難的工作。

圖標需要，讓人一目了然，但是也要具備良好的可識別性，在傳統(tǒng)和創(chuàng)新之間達到平衡。這一次，Tubik Studio 設(shè)計團隊將要給華為的 EMUI 10 來設(shè)計圖標，而這篇文章將會為你揭示背后的設(shè)計過程。

這次的項目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來負責。這次的設(shè)計項目從最初的探索構(gòu)思入手，逐漸開始繪制草圖，探索樣式，一直到最后打磨，完成設(shè)計。

項目內(nèi)容

為華為 EMUI 10 系統(tǒng)的用戶界面設(shè)計基礎(chǔ)的圖標

客戶介紹

我們在 2019 年夏季，收到了來自華為的邀約，這次的項目要重新設(shè)計 EMUI 這套基于 Android 系統(tǒng)的用戶界面基礎(chǔ)圖標，這套圖標會用來適配華為旗下的旗艦手機，這些圖標將會隨著新版的系統(tǒng)部署到這些手機產(chǎn)品當中。我們的任務(wù)，是創(chuàng)建總計 54 款符合當下潮流趨勢的圖標，這些圖標要能夠貼合品牌和已有用戶的偏好，并且能夠吸引新的用戶。

這個圖標設(shè)計項目如今已經(jīng)在當下的華為旗下手機產(chǎn)品中應(yīng)用且部署好了，最早使用這套圖標的智能手機型號為 Mate 30 ，緊接其后的是 P40。

設(shè)計過程

在整個操作系統(tǒng)中，這些圖標是始終位于用戶視野以內(nèi)、最基礎(chǔ)的最核心的交互元素，通常用戶每天都會同這些核心的基礎(chǔ) APP 進行交互，有時候一天多達幾十次，因此它們應(yīng)當具備良好的功能性，還應(yīng)該足夠美觀，給用戶帶來滿足感。同時，這套圖標的設(shè)計，也應(yīng)當足夠統(tǒng)一，以協(xié)調(diào)的體驗切入到整個 EMUI 的設(shè)計系統(tǒng)當中，貼合整體的樣式特征。

所以，我們使用了一整套圖標網(wǎng)格系統(tǒng)，應(yīng)對不同需求，在設(shè)計的過程中，這套網(wǎng)格有助于確保所有圖標外部尺寸的一致性，也保證了內(nèi)部元素的統(tǒng)一性。

為了發(fā)掘全新的視角，我們決定從傳統(tǒng)的手繪圖標開始，尋找重新塑造圖標設(shè)計的方法。這些圖標所涉及到的元素，早已為全球數(shù)百萬用戶所熟知，要重新設(shè)計圖標外觀，并且還要成套且統(tǒng)一，這本身就是一個巨大的挑戰(zhàn)。

比如「電話」圖標所對應(yīng)的聽筒元素、「信息」圖標所對應(yīng)的氣泡對話框這樣的元素，是不可能完全拋棄重新創(chuàng)造的，所以我們的真正的切入點是在形態(tài)和色彩上尋求解決方案。

越是簡單的東西，重塑起來就越難。

在實際的設(shè)計過程中，我們嘗試了數(shù)以百計的造型變體，從完全放飛、非常規(guī)的的外部造型，到極其常規(guī)，大家熟知的造型解決方案，我們都逐一試過。而在色彩上的嘗試相對會顯得更加具有實驗性：我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來進行混搭。

當然，我們很清楚，這樣的實驗性的工作是探索過程中的一小步，但是它是必須的，是創(chuàng)造新設(shè)計的種子，是尋求正確答案的必經(jīng)之路。

在設(shè)計過程在，有一件有趣的事情發(fā)生在設(shè)計「相機」圖標的過程中。我們嘗試過很多不同的圖標造型，不同的元素，不同的樣式，但是其中始終有一個細節(jié)是不變的，那就是右上角的小紅點。這是為了暗示用戶，華為的攝像頭模組來自徠卡，這個紅色的小點就是向其致敬的標識。

而下面的概念設(shè)計，則是強化了圖標之間的幾何輪廓的差異，從而提升圖標在智能手機屏幕上的對比度和識別度。

下一步，我們基于幾何圖形外觀差異性，設(shè)計了多種造型不同但同樣優(yōu)雅的圖標。在基于這種風格概念進行延伸的過程中，我們會優(yōu)先考慮圓形的元素。而「天氣」圖標明顯既不適合圓形也不適合方形來呈現(xiàn)，所以我們使用的是云和太陽兩種元素的組合?！稿X包」圖標使用的是矩形，然后搭配卡片的組合。盡管造型整體上是相對自由的，但是所有的圖標都是遵循圖標網(wǎng)格，并且在視覺權(quán)重上盡可能統(tǒng)一。

在色彩和樣式上，我們則更加傾向于漸變。沒有色彩漸變，純扁平的圖標顯得過于幼稚和「古早」，沒有足夠的品質(zhì)感，所以，我們在新的圖標設(shè)計上，開始加入漸變色彩，提升質(zhì)感。

不過，在最終版本當中，我們還是保留了圖標外部的圓角矩形的外輪廓，然后將圖標元素的內(nèi)徑進行了適當?shù)乜s減，漸變和核心的簡約幾何特征依然是整套設(shè)計的最高優(yōu)先級。

這套設(shè)計方案展現(xiàn)了在整套 UI 界面中，圖標這個小元素的設(shè)計上所需要投入的精力和潛在的難度。想要圖標足夠協(xié)調(diào)、美觀、易用還要貼合品牌特征、還要區(qū)別于以往，是一件相當不容易的事情。

細節(jié)里藏著魔鬼，任何細小的元素、線條輪廓、色彩的變化都可能會在屏幕上放大、被感知到。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

大家平常都習慣去哪些免費圖庫網(wǎng)站找圖呢？雖然有一些老牌、圖片數(shù)量充足的圖庫，像是 Unsplash、Pixabay、Pexels，但后來經(jīng)過人工智能和大數(shù)據(jù)學(xué)習的搜尋工具更深得我心，也能通過算法將質(zhì)量較低、不適合使用的圖庫圖片先排除掉，大幅節(jié)省搜尋時間。如果在尋找圖片素材時想盡量避免使用和其他人重復(fù)的內(nèi)容，試試看由攝影師親自拍攝的小型圖庫或許是個不錯的方法。

往期回顧：

本文要介紹的「DesignersPics」是一個持續(xù)更新、每個月都會加入新相片的圖庫，由攝影師 Jeshu John 親自拍攝修圖，收錄各種類型的相片，包括建筑、商業(yè)活動、概念、美食和飲料、大自然、人物、科技等等，照片數(shù)量不多，但有一定的獨特性。

DesignersPics 的相片都具有非常高的分辨率和畫質(zhì)，可自由下載用于個人或商業(yè)用途，例如網(wǎng)站、投影片、包裝、標簽、HTML/PSD 模版、T-Shirts、廣告橫幅、商店或辦公室裝飾等等，無需標示出處來源。

DesignersPics

網(wǎng)站鏈接：http://www.designerspics.com/

使用教學(xué)

開啟 DesignersPics 從右上角的「Categories」選擇要瀏覽的相片分類，或是直接從首頁以日期方式瀏覽，網(wǎng)站亦提供搜尋功能，不過圖庫本身相片量不多，瀏覽上不會耗費太多時間。

每張相片會有預(yù)覽圖、標題和免費下載的按鈕。

進入圖片頁面，還能看到圖片尺寸、大小等等信息，點選「Download」就能下載取得 .jpg 格式的圖片文件。雖然 DesignersPics 沒有硬性規(guī)定必須標示作者來源，但如果你喜歡可以協(xié)助推廣。

值得一試的三個理由：

• 由 Jeshu John 親自拍攝，每個月都會更新加入新的相片素材
• 相片都具有大尺寸及高畫質(zhì)，免費下載取得 .Jpg 格式

• 可自由使用于個人或是商業(yè)用途

文章來源：優(yōu)設(shè)    作者：Pseric

一覺醒來，2020 年潘通年度色就這么發(fā)布了。

2020年年度潘通色：「經(jīng)典藍」

這款被命名為為「經(jīng)典藍」（Classic Blue）的色彩沉穩(wěn)耐看，雋永優(yōu)雅，按照潘通官方的說法，「經(jīng)典藍」仿佛暮色四合時的天空，寧神靜心，讓人駐足?！附?jīng)典藍」是一種穩(wěn)固可靠的色彩，給人確信感，撫慰著每一個期待穩(wěn)定者的心靈。

為什么會選擇這樣一種藍色，潘通色彩研究所的執(zhí)行董事 Leatrice Eiseman 在潘通官網(wǎng)上，予以詳細的解釋。

解讀「經(jīng)典藍」

「我們生活在一個亟需信念和信任的時代。潘通 19-4052 經(jīng)典藍 ，這種色彩正是自信和恒久的外化體現(xiàn)，這種堅實可靠的藍色調(diào)，更能與人產(chǎn)生深層的共鳴，令人心安。一望無際的藍色能夠喚起人類對于廣袤無垠夜空的無限遐想，經(jīng)典藍鼓勵著我們透過顯而易見的事實，拓展思維，放飛想象。

經(jīng)典藍敦促著我們更加深入地思考，開闊視野，進行更加深入的交流?！?

——Leatrice Eiseman 潘通色彩研究所執(zhí)行董事

從色彩心理學(xué)的角度上來看，藍色色相本身有著信任、信念的含義，也是的色相。在此之前，潘通曾經(jīng)多次選擇藍色作為年度色， 2000 年的時候選擇天藍色（Cerulean），在 2005 年的時候則選擇了藍綠色（Blue Turquoise），2008 年的年度色叫鳶尾藍（Blue Iris），2016 年的年度色則是靜謐藍（Serenity）。

相比于這4種藍色，「經(jīng)典藍」更為沉靜穩(wěn)重，沒有一點攻擊性，也不顯得沉重，輕松而易于互動。

「經(jīng)典藍」無疑是一個略顯保守，但是非常貼合當下語境的色彩。它充滿了確信感，讓人覺得安全，屏蔽了焦慮。同 2019 年充滿前進感的「活力珊瑚橙」相比，「經(jīng)典藍」更加內(nèi)斂和篤定，悄無聲息地增加每一個的信心。

除了發(fā)布這一年度色彩之外，潘通色彩研究所還專門制定了5套配色方案，這些配色方案應(yīng)該會在接下來的 2020 年，得到更加廣泛的應(yīng)用。

「經(jīng)典藍」的5套官方配色方案

沉思

這是一套舒緩的配色方案，涼爽的藍色調(diào)和同樣柔和的暖色組合到一起，給人以沉靜的感覺。

呼吸

這套名為呼吸的配色方案當中，加入了更為經(jīng)典的黑白色，選擇了對比更加強烈、更加富有活力的搭配方式。這樣的色彩搭配更容易喚起觀者的幸福感，讓你的設(shè)計更加具有田園牧歌的氣息。

沙漠暮色

「經(jīng)典藍」的靈感來源之一就是夜幕降臨時的天空。而這套名為沙漠暮色的配色方案，就與此相關(guān)。充滿金屬質(zhì)感的潘通色更能夠凸顯「沙漠」的閃亮質(zhì)感，而恰為對比色的「經(jīng)典藍」讓這套配色方案優(yōu)雅無比。

異域風情

這套配色方案比起之前的配色更加豐富，更顯混搭，仿佛加入了天然的調(diào)味料。這種健康而自我的色彩搭配方式，讓人仿佛身在異域，不同于此地的文化，迥異與此時的感覺，獨特卻令人著迷。

非傳統(tǒng)

打破常規(guī)的桎梏，選擇異乎尋常的色彩搭配，而足夠傳統(tǒng)的「經(jīng)典藍」恰恰構(gòu)成了這種搭配方式當中，作為基礎(chǔ)的底色。這套配色方案指向時尚，突破規(guī)則，如同小品，有趣而俏皮。

「經(jīng)典藍」的9套精選配色方案

為了更加方便線上的設(shè)計師來使用這些配色方案，優(yōu)設(shè)的小編從官方提供的這些配色方案當中，精心挑選了 9 套適合進行數(shù)字設(shè)計的配色方案，并且標注上了相應(yīng)的 HEX 值便于精準取色，請盡情取用：

轉(zhuǎn)自：站酷——hicatherine86 

Xiao素材 ｜MapBox應(yīng)用

本期精選 / MapBox應(yīng)用教程，讓你的底圖超乎預(yù)料的炫酷

今天給大家?guī)盱趴?span style="font-weight:700;border:0px;margin:0px;padding:0px;">MapBox的具體應(yīng)用

相信大家在繪制平面類分析圖時

都遇到過地圖獲取的問題

在此之前

我們也提供給了其他的類型的方式來繪制分析底圖

1. 其他方式

百度個性地圖

通常地圖形式如下

喜歡用這種類型地圖的小伙伴

網(wǎng)址接好咯

http://developer.baidu.com/map/custom/

文末素材有百度個性地圖代碼

谷歌個性地圖

老規(guī)矩放一波樣式給大家看一看

但是這些

都不是我們今天能的重點

2. MapBox效果

因為真要說到可操控性可調(diào)整性

非MapBox莫屬

先來看看官方效果

是不是已經(jīng)超級酷炫好看了

那看到這里你就以為完了嗎

NO NO NO NO NO

再來看我們根據(jù)模板花幾分鐘改的底圖

看到這的第一眼

是不是覺得這才是

自己想要的分析底圖

誤區(qū)

想想平常我們自己繪制的底圖一般像這樣

純苦力類

怎么樣

是不是想立即Get一波呢

別急，來看視頻學(xué)習一下

大致分為四個板塊

3. 四大板塊

第一個板塊

基本步驟

首頁—Get Started—選擇合適的風格

（建議開啟網(wǎng)頁翻譯哦）

第二個板塊

怎樣來操作

右鍵旋轉(zhuǎn)視圖

中間縮放視圖

左鍵平移視圖

右側(cè)箭頭菜單—還原視圖—

Reset Pith&重設(shè)正北方向 Reset North

第三個板塊

這一個板塊相對復(fù)雜一些

同學(xué)可以看著視頻配著幕布食用

左側(cè)為參數(shù)調(diào)整欄

直接點擊地圖元素的相應(yīng)位置

即可修改相應(yīng)參數(shù)

第四個板塊

添加圖層和修改數(shù)據(jù)

Add Layer/Select Data里面內(nèi)容含

數(shù)據(jù)資源—類型—綻放級別Zoom—過濾器

具體怎么操作一定要看視頻哦

如果覺得觀看視頻還是不太清楚的小伙伴

不要慌張

作者還貼心的為大家準備了

MapBox的知識結(jié)構(gòu)圖

今天就和大家分享到這里了

轉(zhuǎn)載自：搜狐

作者：

大地視覺設(shè)計軟件

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

作者通過以進度條的設(shè)計深入淺出的講解關(guān)于FUI的設(shè)計思路。雖然FUI設(shè)計看起來很復(fù)雜，只要找準規(guī)律，從一些作品中總結(jié)分析細節(jié)，再運用到我們的設(shè)計中。想要了解的小伙伴可以嘗試一下。

前言

看到上期小伙伴想了解一下 FUI 的設(shè)計教程，所以這次再次和大家聊一下關(guān)于 FUI 的設(shè)計風格，我們以“進度條”的設(shè)計教程為例，深入淺出的聊一下關(guān)于 FUI 的設(shè)計思路，因為主要設(shè)計思路的延展，所以不會出現(xiàn)具體的數(shù)據(jù)參數(shù)，小伙伴們要諒解啊。

目錄

1.風格介紹

2.設(shè)計思路

3.總結(jié)

1.風格介紹

關(guān)于 FUI 的定義，閱讀過我上一篇文章的小伙伴可能對 FUI 的定義有了一個較為清晰的定義，即 FUI 是：虛構(gòu)的、未來的、幻想的用戶界面。

2.機甲風格

機甲風格相對于軍事風格的最大特點就是：“具有一定的裝飾圖形元素，或多或少?！睓C甲風格最大的特點便是具有機械或者機甲風格的裝飾元素，其中多為異形元素。其靈感來源于工業(yè)設(shè)計，從機械和機甲的工業(yè)設(shè)計語言中提取圖形元素，在運用到界面設(shè)計上。如下圖，異形的機甲風格讓機器人的頭部設(shè)計顯得更加統(tǒng)一，如果換成當前流行的扁平化設(shè)計，可能就顯得有點奇怪了。

機甲風格的發(fā)展歸功于科幻題材故事的發(fā)展，為人們打開腦洞，暢想更多的可能性。在設(shè)計上激發(fā)了 FUI 的誕生，無論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機甲風格的界面設(shè)計。

我們可以放入界面當中感受一下視覺效果：

設(shè)計樣式 – 機甲風格

我們再來進階一下，設(shè)計一個機甲元素的的進度條。

機甲風格看似裝飾圖形復(fù)雜，設(shè)計難度復(fù)雜，但其實我們只需要掌握好 – “提煉元素”這項技能就能完美應(yīng)對機甲風格的設(shè)計。

我們再回顧對創(chuàng)意設(shè)計的定義：是把再簡單不過的東西或想法不斷延伸給予的另一種表現(xiàn)方式。這里我們可以理解為將機甲元素進行提煉總結(jié)，延伸到彈框設(shè)計當中。例如下圖，漂亮的小姐姐一秒鐘變機械美女，就是通過對機械元素延展到模特身上。

第一步，照一張你喜歡的不錯的參考，這里你可以找成熟的界面設(shè)計作品，也可以找一張不錯的關(guān)于機甲風格的參考，以便于自己進行元素提取。這里我們以大家熟悉的高達為例：

我們從中提取我們需要的圖形，如下圖：

最后我們我們需要仔細思考將圖形進行組合，多嘗試幾次他們的組合方式。這里我對提取的元素進行了二次加工，將圖形一和圖形四進行了結(jié)合，打破固有的組合規(guī)律，讓圖形看起來更加生動。

最后我們可以放入界面當中感受一下視覺效果：

轉(zhuǎn)載自簡書

作者：極創(chuàng)設(shè)計

鏈接：https://www.jianshu.com/p/77665c771153

來源：簡書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

圖標是 UI 設(shè)計中極為重要的一個環(huán)節(jié)，我們在做每個界面的設(shè)計幾乎都會涉及到圖標的表達，出色的圖標設(shè)計可以讓界面表達更加精致、有趣。圖標的設(shè)計往往也體現(xiàn)著設(shè)計師的基本功，因此除了日常多畫提升對圖標造型的把控力外，我們也更需要了解和學(xué)習圖標設(shè)計的趨勢類型，從而幫助我們提高在設(shè)計中的效率。

基于自我學(xué)習的目的，平時在瀏覽一些設(shè)計網(wǎng)站時也會做相對應(yīng)的收集。因此本文主要對于圖標設(shè)計的 「類型、風格」 進行了整理，以及自己對于每種圖標類型的思考。

圖標的類型劃分

設(shè)計網(wǎng)站上的圖標可以說是多種多樣，不同類型的圖標都有著獨特的魅力。例如，線性圖標簡潔輕量、面性圖標厚重直接，當然同一種類型的圖標也具有很多不同的表現(xiàn)形式。

因此基于本人對圖標的理解，大致劃分為三類：線性、面性、線面結(jié)合。結(jié)合三種基礎(chǔ)類型的表達方式可以創(chuàng)造出各式各樣的表現(xiàn)形式。

線性圖標

使用輕量的線條勾勒的圖標，整體感受也趨向于精致、細致而具有銳度感。不同的線條表現(xiàn)具有不同的視覺感受，細線輕量、直線硬朗、曲線柔美。

1. 線型圖標基礎(chǔ)分析及想法

粗細對比

粗細不同，圖標的力度和重量感就會有差異。粗線的圖標，視覺關(guān)注力來說會更加突出，但較于細線的圖標也會顯得粗壯、厚重。細線的圖標，精致、透氣、秀美。

但在設(shè)計時需要依據(jù) 「整體的 UI 風格」 來決定線的粗細，而并非單純的考慮圖標的關(guān)注度，反而更需要考慮圖標與界面整體的平衡感。

柔度對比

直角與圓角決定了外形的感知和風格的走向，如下圖對比中看出，圓角越大圖形越趨向于可愛柔美（如下右圖），圓角越小則越直接、硬朗和陽剛（如下左圖）。因此剛或柔或中間值完全取決于早期對于整體風格的定調(diào)。

繁簡對比

除了輕量化和簡潔之外，圖標的識別性也是極為重要。如下左圖，「過度簡潔」 導(dǎo)致圖標失去該有的識別度而出現(xiàn)歧義，而下右圖的元素疊加使得圖標稍顯復(fù)雜。在繁與簡的平衡中，應(yīng)該保持在不影響圖標識別度的情況下，最大限度的提升圖標的簡潔程度。

特征的識別度

除了簡潔程度，也需要考慮圖標該有的特征。例如下圖 「評論」 圖標的案例，當我把圖標中的「三個點」 去掉時，圖標依舊具有 「對話/評論」 的表意，而當我把下面的 「箭頭」 去掉保留 「三個點」 時，則會出現(xiàn)歧義，它可以被表意為 「更多」 的意思，因此在設(shè)計圖標時需要對于表意做精準把握，避免歧義出現(xiàn)。

保持圖標的特征美感

如下面的 「心形」 圖標，下左圖是我們具有普識性的圖標，與圓形組合之后依然保持著原有的形態(tài)美感。但我們不時也會看到第三種設(shè)計，整體外形雖然保持著愛心，但為了與整體風格「一致」 強行對外輪廓進行切割，與原圖形在美感上則稍微有些出入，這也是我們需要思考的關(guān)鍵點。

組合型比例

組合型的比例會影響到圖標的精致程度，準確的 「比例值」 能讓整體的造型趨向平衡，更具有美感。如下圖案例嘗試了兩組不同比例的效果，這里以圖標窄邊作為 「基準值」 進行嘗試。當內(nèi)形為外形的 1 : 2 時（下圖2），圖標的整體視覺效果較為平衡；當大于 1 : 2 并接近 4 : 3 時，圖標內(nèi)部結(jié)構(gòu)會顯得過于飽滿。而小于 1 : 2 并接近 4 : 1 時（下圖3）則會產(chǎn)生稀疏不緊湊的效果。（這里的比例只是案例需要，實際設(shè)計以最終的視覺感知為準）

2. 線性類型拓展

基礎(chǔ)的理論，結(jié)合延展的應(yīng)用，可以迸發(fā)出更多的創(chuàng)意想法。線形圖標也并非只有一種設(shè)計形態(tài)。通過以下案例，可以看看線型圖標設(shè)計類型的多樣性。

極簡風格

整體風格極為簡約，沒有多余的線條，通過線條還原圖形的本質(zhì)，外形 「簡單」 卻具有很強的識別性，在視覺感知上輕松、干凈。

極簡的風格圖標在于對圖形的把控，多一筆可能顯得復(fù)雜，少一筆可能影響識別程度。以上圖為例，圖標的組合元素保持在 2 個左右，整體較為干凈。

實際應(yīng)用：Instagram、Airbnb、Facebook、Twitte

雙色

相較于 「純色的圖標」 更具表現(xiàn)力，細節(jié)上也會更加豐富，形態(tài)感知上多了一層變化。結(jié)合顏色的疊加、對比、互補提升了圖標的層次感和豐富度。

同色系：同為冷色系、暖色系或同一色系的表達形式。如下圖案例，以暗色為主色，亮色點綴提亮，使得圖標具有一種高光提亮的感覺。

另一組案例是亮色主色結(jié)合暗色，整體圖標效果還算可以，但較亮的顏色沒有應(yīng)用在圖標的關(guān)鍵特征上，使得圖標第一眼的感知稍有減弱。

對比互補色：顏色跨度更大，層次更加分明。如下圖案例，紅色與藍色的撞色之后相比單色的圖標更加出彩和具有記憶點。

實際案例：騰訊動漫我的頁面

透明度變化

本質(zhì)上與上面一種為一個類型的設(shè)計，通過透明度的疊加和變化，提升圖標的層次感和空間感，降低圖標的壓迫性。

實際案例：愛奇藝9宮格圖標

漸變層次疊加

漸變帶出了圖標的質(zhì)感，結(jié)合「不同深度」或「不同飽和度」的變化，讓圖標更具有細節(jié)和層次。

黑白+品牌色

黑白色作為主色調(diào)，結(jié)合品牌色作為點綴色。與常規(guī)的黑白圖標相比，既產(chǎn)生了變化，同時兼顧了品牌色的透出。

實際案例：大眾點評攻略頁面圖標

線性漸變

結(jié)合漸變的顏色，豐富了整個圖標的視覺表達，并提升了圖標的視覺沖擊力和設(shè)計感。案例結(jié)合黑白背景作為嘗試，白底：粗線比細線的視覺效果相對較好，漸變也能較為清晰地被表達；黑底：細線比粗線的視覺效果顯示得更加精致和具有銳度感。

實際案例：網(wǎng)易考拉、NAVER

一筆成形

此類圖標在視覺表達上具有較高的線性流暢度和設(shè)計感，關(guān)注點在于整組圖標的 「開口起始點」 設(shè)定上需保持一致。例如，「從左到右」或「從右到左」形成一體化的連貫線條，開口起始點不一致會影響整組圖標的一致性，應(yīng)用在頁面時也會顯得雜亂。

斷點圖標

與上一種較為類似，但沒有連貫度的要求。在線形圖標基礎(chǔ)上面，尋找一個缺口來打破 「全包邊圖標」 的沉悶感，使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統(tǒng)一的方向及大小，另外需要控制開口個數(shù)避免過多導(dǎo)致圖標外形過于零碎。

實際案例：騰訊體育、京東

面性圖標

面性圖標比線性圖標更能表達出圖標的力量感和重量感，比線性圖標會更加容易吸引用戶目光。在識別度上，面性圖標更加依賴于外輪廓的清晰度，因此在設(shè)計時對于外形的打磨是重中之重，清晰的外輪廓可以幫助提高識別度。

1. 面型圖標基礎(chǔ)分析及想法

輪廓對比

輪廓的差異會體現(xiàn)出不同的氣質(zhì)，如下圖的左邊和右邊的區(qū)別，一個氣質(zhì)較為直接硬朗，另一個則較為柔美可愛。流暢的外形可以讓面形圖標的整體更加簡潔、規(guī)整，如下圖中間的圖標在輪廓的處理上則顯得比較碎，整體外輪廓造型的連貫度有所欠缺。

鏤空對比

適當?shù)溺U空除了補充了圖形的識別度之外，還提升了面性圖標的設(shè)計細節(jié)。另外需要控制好鏤空部分與整體的外形比例，過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊，鏤空過小對圖標的辨識度并沒有多大作用，沒有鏤空則少了一些透氣感。

形體對比

形態(tài)上的差異也會具有不一樣的視覺感知。以「星」和「心」為案例，單獨形體與組合之后的形體相比視覺感知更直觀些，而組合形的圖標相對會精致一些，多了一些層次。在日常設(shè)計中的經(jīng)驗是：越小的圖標形體應(yīng)該越簡單，因此建議單體出現(xiàn)較好；若圖標的尺寸足夠大時可采用組合型的設(shè)計，補充圖標的細節(jié)。

繁簡對比

設(shè)計面性圖標時，對于多余細節(jié)的管理也很重要。隨著細節(jié)的增加，塊面切割過多，會使得整體圖標變得過于零碎（如下右圖）。保持簡約的設(shè)計提高圖標的識別度，在關(guān)鍵的特征細節(jié)上做補充（如下中間圖的相機閃光燈）。

2. 面性圖標類型拓展

面性圖標在設(shè)計時也可以結(jié)合各種不同的表達方式，來提升圖標的質(zhì)感和創(chuàng)意，而非只是簡單的填充顏色。

單色面+點綴色

整體的外形使用統(tǒng)一的顏色，結(jié)合圖標的屬性感知使用不同的顏色進行點綴，通過點綴色提亮了圖標的視覺效果，達到既統(tǒng)一又具有差異化。

多彩雙色

通過對比色、鄰近色的搭配來營造整體的圖標氛圍，提升了圖標的層次和豐富度，雙色的表達也增添了圖形的趣味性。在日常使用的 APP 中極為常見，簡單且容易出效果。

微質(zhì)感漸變

微弱的漸變提升了圖標的質(zhì)感。漸變的方向會影響整體圖標的視覺效果，因此可以根據(jù)不同設(shè)計的需要進行調(diào)整。如下圖案例：

實際案例：全民K歌

透明度/灰度變化

透明度/灰度的變化，讓原來單色的圖標變得更加具有層次感和空間感，設(shè)計細節(jié)更加豐富，降低了單色面性圖標的厚重感。

實際案例：企鵝FM我的頁面

透明度變化+漸變

漸變的設(shè)計提升了面性圖標的質(zhì)感，從顏色上具有一定的豐富度。在漸變的基礎(chǔ)上對組合型做透明度差異化，使得圖標具有了層次感。

透明疊加的圖標+漸變的背景

此類圖標常常被應(yīng)用在 UI 界面中的列表或者頂部入口的位置。

實際案例：全民K歌點歌頁面

顏色疊加穿透

圖標透明疊加之后產(chǎn)生了交錯的負形，疊加出第三個面。雖然整體設(shè)計依然保持著扁平化，但卻多了一份層次感，并且增加了圖標的細節(jié)。

實際案例：百度網(wǎng)盤

漸變層次疊加

整體的效果與透明度變化的圖標較為接近，通過漸變的深淺變化，使得形狀的銜接處出現(xiàn)了明暗對比，因此圖標也具有了厚度感和層次感。

實際案例：NAVER、掌上生活

高斯模糊

此類圖標基本沒有在 APP 中看到，與「透明度變化」或「顏色疊加」相比都更具層次感和空間感，同時圖標也具有較強的設(shè)計感。

線面結(jié)合

結(jié)合了線性和面性的優(yōu)點，既保持了面性的重量感，同時具有線性的精致、細膩。因此在設(shè)計時可以根據(jù)圖標具體想要表達的感覺對線面比例進行把控，不同比例可以呈現(xiàn)出不同的視覺感知。

1. 線面結(jié)合圖標的基礎(chǔ)分析及想法

線面比例

線面比例的差異，圖形呈現(xiàn)出來的張力也會有不同的感受?；谥虚g填充的圖標形態(tài)嘗試了三種不同的比例，從下圖中可以看出，當填充與外形窄邊比為 1 : 3 時（左圖）圖標呈現(xiàn)往內(nèi)收的感覺；填充與外形窄邊比為 1 : 2 時（中間）圖標整體較為平衡；當填充與外形窄邊比為 2 : 3（大于1:2）時（右圖）整體具有外擴趨勢。

組合形式

線面可以通過不同的組合形式進行繪制?；诓煌慕M合形態(tài)可以設(shè)計出多種多樣的線面圖標，不同的組合形式會體現(xiàn)出不同的設(shè)計風格，因此在設(shè)計時盡量多發(fā)散思考，尋找出適合你的組合方式。

繁簡對比

線面結(jié)合本身就由兩種形式組合，因此在設(shè)計的時候更需要對整體造型進行把控，單體（線和面）造型必須保持較高的簡潔程度，這樣最終組合形成的圖標才不會過于復(fù)雜（左圖），若本身形態(tài)過于復(fù)雜，則會降低圖標的辨識度和視覺美觀度。

2. 線面結(jié)合圖標類型拓展

線面結(jié)合的圖標集合了線性和面性的優(yōu)點，在設(shè)計方式上也繼承了兩者的優(yōu)點。設(shè)計方式也是基于以上兩種的結(jié)合，因此可以結(jié)合出更多設(shè)計的可能性。

黑白線+面性品牌色

與「線性+品牌色」的做法較為接近，統(tǒng)一的線性顏色疊加品牌色的透出。

實際案例：好好住、soul

線面雙色

基于線面的基礎(chǔ)上，在線和面的顏色上做差異。具體做法與線性或面性的雙色接近。

線面結(jié)合-陰陽

線和面的結(jié)合按 50% 的比例進行設(shè)計，依據(jù)上下、左右、居中等基礎(chǔ)方式的結(jié)構(gòu)化設(shè)計，整體圖標的視覺效果較為跳躍，非常規(guī)。

線面雙色+錯位

在雙色圖標的基礎(chǔ)上，線和面按照統(tǒng)一的 「百分比」 進行縮放，并進行透視和位移的設(shè)計，整體呈現(xiàn)出來的是一種交錯疊加的視覺效果，相比普通的線面雙色更加豐富。

實際案例：閑魚底部tab、臉球底部tab

線面錯位+漸變

基于上一種風格，對面或者線的顏色進行漸變設(shè)計，豐富了圖標的質(zhì)感和顏色更加細膩。

線面透明度變化

與「線面透明度變化」的設(shè)計方式大致一樣。如下圖案例，「弱線強面」的第一識別度較弱，而「弱面強線」 的外形識別度較高，也更符合圖標的表達。

實際案例：新浪微博、騰訊新聞

基于三種基礎(chǔ)的類型表達，可以拓展出多種多樣的設(shè)計形式。除了以上的案例之外，還收集了一些其他的設(shè)計。

線面結(jié)合 – 插畫

整體比較偏向插圖的感覺，細節(jié)和元素較多，常見于一些 APP 的空白頁設(shè)計。

線面結(jié)合 – 卡通插畫

整體感覺比較可愛、卡通、二次元，常見于一些二次元或漫畫類的 APP。

面性 – 漸變強質(zhì)感

整體風格的光影質(zhì)感會比較強烈，常在一些活動運營或小游戲的界面出現(xiàn)。

面性 – 扁平寫實

整體感覺比較扁平，細節(jié)的豐富度與現(xiàn)實感知接近。

線面+漸變插畫

整體風格比較偏向絢麗多彩的顏色風格，質(zhì)感和細節(jié)較為豐富。

寫實風格

3D質(zhì)感圖標

由于 C4D 的制作成本相對較高，目前較少在常規(guī)的 APP 中看到。但 3D 作為一個主流的設(shè)計趨勢，在時間和能力允許的情況下需要多做這方面的嘗試。

等距的線面結(jié)合

等距的設(shè)計，讓原本線面的圖標豐富了層次，并具有立體透視的感覺。

除了以上這些之外，我們在實際場景中也會發(fā)現(xiàn)一些較為特別的圖標設(shè)計。

Facebook 更多頁面的列表圖標

整體風格偏向插畫風+漸變質(zhì)感。由于更多的頁面為純列表的設(shè)計，因此整個頁面在圖標的設(shè)計上做了很大膽的嘗試，與常規(guī)的單色圖標相比更具有吸引力。為了區(qū)別不同的業(yè)務(wù)，系統(tǒng)性質(zhì)的功能圖標做了色調(diào)的區(qū)分。

APP Store 游戲和新APP界面下的類別列表圖標

整體為具象化扁平風格的設(shè)計表達，圖標的顏色還原了最基本的現(xiàn)實感知。

iOS 系統(tǒng)辦公類軟件的起始頁面圖標

整體風格比較偏商務(wù)簡約，具象的圖形表達+輕微的漸變質(zhì)感。

QQ手機版中延展的功能圖標

整體風格偏向輕寫實+微弱漸變。每個圖標都具有豐富的細節(jié)表達，色調(diào)方面基于業(yè)務(wù)屬性結(jié)合品牌色進行了區(qū)分，整體既統(tǒng)一又具有差異化。

大眾點評頂部入口的圖標

整體風格偏向?qū)憣?強漸變+炫光感，每個圖標都具有豐富的細節(jié)表達。

旅法師營地

游戲、二次元類的 APP，因此在圖標的設(shè)計上也偏向細節(jié)較為豐富的插畫風格。

嗶哩嗶哩動漫

圖標風格偏向卡通插畫，選中態(tài)與默認態(tài)的設(shè)計較為巧妙。

總結(jié)

本文的重點在于透過這些設(shè)計類型或者技法的了解，幫助我們在日常設(shè)計中提升輸出效率。圖標雖然作為 UI 設(shè)計的基礎(chǔ)，卻有很深的學(xué)問，精致的圖標更是可以起到點睛的作用，提升界面的質(zhì)感和氛圍。

圖標的種類遠遠不止本文所提到的這些內(nèi)容，但是萬變不離其宗，都是「線性、面性、線面結(jié)合」 再結(jié)合 「透明度、漸變、顏色疊加、質(zhì)感、多維空間」等等的表達方式而設(shè)計出來的。

我們除了需要掌握這些內(nèi)容之外，還需要提升圖標設(shè)計的造型能力，更需要日積月累的練習和思考，從量到質(zhì)的變化。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

我們先從真實生活場景中的互動說起。

人與人之間的互動無處不在，它是我們生活中必要的組成部分，也是整個人類社會的基石。從本質(zhì)上來講，社交產(chǎn)品要解決的問題就是人們之間互動的問題。那么如何定義互動呢，我們可以從日常的生活場景中窺得一二。

首先，讓我們來看一看日常生活中的互動案例：

這是一個很常見的熟人互動案例，我們可以看到，熟人間很容易產(chǎn)生話題，并持續(xù)互動下去。但是如果同樣的話題發(fā)生在不是很熟悉的人之間，可能就會是另一番場景：

在例二中，因為A與B互相不熟悉，所以A沒有對B的回復(fù)產(chǎn)生進一步互動，對話因此而結(jié)束。我們可以進一步推理，其實在這個案例中，不管原因變成什么，只要A沒有響應(yīng)B的反饋，那么A與B的互動就大概率會終止。

這是因為良好的互動行為一定是雙方(或多方)的互相行為，一旦因為某些原因?qū)е缕渲械姆答佒袛?，互動將無法持續(xù)。由此可以總結(jié)出：

互動在本質(zhì)上是由一系列的反饋(互動)組成的一條反饋鏈

但是光有反饋鏈還遠遠不夠，在社交場景下，我們往往希望反饋鏈足夠長，這樣才能讓互動雙方產(chǎn)生感情升溫。在例二中，其實是存在著一條很短的反饋鏈的，A與B只互動了一個回合。A沒有繼續(xù)響應(yīng)B的反饋，是因為B的反饋質(zhì)量較低。試想，當A向B問好時，若B的回復(fù)是“早上好，你今天穿的真精神！”，那么A會不會響應(yīng)B的反饋呢？我想大概是會的。由此可見：

反饋鏈的長短取決于每次反饋(互動)的質(zhì)量。

高質(zhì)量的反饋具備很多特點，其中有三個尤為重要

1 反饋鏈中的指向性

我們?nèi)粘Ｉ钪械幕有袨?，一般都會以一個“握手機制”作為開端。這個握手機制可以是顯性的（直接喊出對方的稱呼，可以是名字、外號，也可以是關(guān)系稱謂），有時也可以是隱性的（眼光的對視、話題的流轉(zhuǎn)等）。這個握手機制幫助互動雙方建立了互動的場景，讓雙方達成"開始交流"的共識，以便信息的接收者做好傾聽并回復(fù)的準備，這就是互動中的指向性。

任何互動行為都是發(fā)生在兩個或者多個明確的對象之間的，因此在良好的互動行為中，指向性顯得尤為重要——沒有人會去響應(yīng)別人的自言自語。在互動的過程中，指向性不明確的互動行為是低質(zhì)量的，不容易獲得進一步的反饋，例如評論區(qū)中的統(tǒng)一回復(fù)、群發(fā)的新年問候、領(lǐng)導(dǎo)在臺上的講話等。反之指向性明確的互動是高質(zhì)量的，比較容易獲得反饋，例如群聊中@某個人、收件人為某個人而非郵件組的郵件、多人聊天時眼光的對視等。

2 適度的互動行為

互動行為的適度包含兩個方面：信息適度及行為適度。

一方面，由于互動行為本質(zhì)上是信息的傳遞過程，因此每次反饋的信息質(zhì)量會直接影響到反饋的整體質(zhì)量。好的反饋應(yīng)該傳達適度的信息，讓接收者可以對傳遞的信息進行輕松的接收及處理，降低接收者的反饋門檻。

另一方面，傳遞信息的行為也應(yīng)該是適度的。在生活中，不同的場合下，我們會選擇不同的行為來表達同樣的意思，比如比較正式的場合會選擇握手作為問好，而與家人久別后的見面則可能是一個熱情的擁抱。

3 反饋的即時性

互動行為是依賴于一定語境的，當語境消失，互動也將停止。在社交產(chǎn)品的互動場景中，互動語境一般會隨時間流逝而逐漸減弱直到消失，所以反饋的質(zhì)量也隨時間的流逝而逐漸衰減，若想讓反饋鏈可以得到延續(xù)，要盡量保證在語境消失前產(chǎn)生反饋行為，因此即時性的反饋就顯得十分重要。

有了以上的理論基礎(chǔ)，接下來分析一下Qzone中的互動行為。

Qzone中的互動方式可以歸為三類：評論、轉(zhuǎn)發(fā)、點贊。其中，評論和轉(zhuǎn)發(fā)都可以產(chǎn)生完整的反饋鏈。針對評論，用戶還可以繼續(xù)通過評論、點贊等方式進行反饋；針對轉(zhuǎn)發(fā)內(nèi)容，用戶也可以進行進一步的評論、轉(zhuǎn)發(fā)、點贊。而對于點贊行為，反饋鏈到此戛然而止，用戶無法對點贊行為進行直接的反饋。

因此，為了讓用戶的點贊可以形成完整的反饋鏈，我們的設(shè)計目標就呼之欲出——為Qzone中的點贊行為尋找一個具有指向性的、適度的、具有即時性的反饋行為。互動場景的選擇

既然要設(shè)計的是一個具有指向性的互動行為，我們就必須在可以接收到贊的場景里去做這件事。所以我們首先遍歷了主人態(tài)下，所有可以看到別人給自己點贊的場景。

但是以上的場景中，并不是都適合承載點贊的反饋行為。根據(jù)用戶的行為目的，我們可以把以上場景分為兩類：圍繞點贊行為的關(guān)鍵行為路徑（圖c.消息列表、圖d.點贊列表）、不以點贊為核心目標的其他場景（圖a.好友動態(tài)、圖b.個人主頁）。顯然，我們應(yīng)該把圍繞點贊行為的關(guān)鍵行為路徑作為主要互動場景。并且所有對于點贊的反饋都是直接依附于點贊行為本身的，使反饋行為具有明確的指向性。

前文提到，適度的互動包含“信息適度”和“行為適度”兩個方面，落地到產(chǎn)品里，就是定義互動行為的“語義”和“交互行為”。

關(guān)于點贊反饋行為的語義表達，我們列舉了很多來自現(xiàn)實社交場景中的備選方案，然后以動作的情感程度和成熟程度劃分了4個象限，對這系列動作進行歸類。

由于點贊行為本身所傳達的情感是比較輕量化的，我們更傾向于選擇一個輕量化的情感表達方式作為點贊的反饋；同時由于Qzone的用戶群體以年輕用戶為主，我們還需要選擇一個盡量貼合年輕用戶感官的語義。因此我們在象限圖中初步選中位于左下角的“擊掌”和“剪刀手”兩個概念?？紤]到“擊掌”比“剪刀手”具有更為明顯的指向性，所以確定“擊掌”為最終的落地方案。

同時，因為點贊行為本身是一個及其輕量化的行為，所以我們也用最輕量的交互操作作為它的反饋，只需要一次點擊即可。

用戶每次收到針對點贊的反饋，都會收到一條與點贊相同的消息提醒，通過push、首頁新消息提醒、紅點等讓用戶第一時間知曉。在消息箱列表中，每一條點贊和回贊都成為單獨的一條消息，可以讓用戶最直觀的查看并進行反饋。

綜上所述，我們確定了整個反饋鏈的交互框架：

擊掌的視覺設(shè)計是一個發(fā)現(xiàn)問題到解決問不斷循環(huán)的過程。在這個過程中，推動解決方案逐步升級的核心方法是情感化設(shè)計。

擊掌動作本身就帶有豐富的情緒，而情感化的設(shè)計方法可以讓情緒的釋放更大化，所以在視覺設(shè)計階段，我們以情感化設(shè)計作為方法去推進方案逐步完善，最終建立起用戶與產(chǎn)品、用戶與用戶間的情感連接，加深用戶對功能的認可和共鳴，帶來更加有趣的體驗。

情感化設(shè)計具象到擊掌這個功能，需要解決兩個問題：

1.如何喚起用戶在現(xiàn)實場景中的擊掌記憶；

2.如何符合空間用戶群體的基本調(diào)性。

設(shè)計之初，我們用平面icon的形式來表現(xiàn)擊掌，雖然可以滿足基本的功能訴求，但是在視覺體驗上乏善可陳，我們又嘗試更豐富的各種視覺表現(xiàn)以此引起用戶對擊掌這個動作的共鳴。

在設(shè)計推敲的過程中共經(jīng)歷了三個階段，在不斷發(fā)現(xiàn)問題和解決問題的循環(huán)中尋找更優(yōu)的設(shè)計方案：

Step 1 | 靜態(tài)展示到動勢塑造

我們用兩個手掌疊加的樣式構(gòu)造了擊掌icon的基本造型。為了增強用戶對于“擊掌”的語義感知使用了漫畫中常用的動態(tài)線條，讓用戶從視覺上直觀感受到這是一個動態(tài)的互動行為，而非簡單的單方面點亮icon，以此加強用戶對擊掌這個互動行為的認知。

Step 2 | 2D動畫演繹

但是這樣的動勢表達仍然具有局限性，動態(tài)線條的表達方式并不具備普適性，無法保證用戶可以理解其中的含義。因此我們在第二個階段的設(shè)計迭代中使用更加直觀的動畫來幫助用戶理解，使其與現(xiàn)實生活中的動作產(chǎn)生呼應(yīng)。

Step 3 | 3D表現(xiàn)

在解決了語義表達的問題后，我們遇到了一個新的挑戰(zhàn)，由于整個動畫的展示視范圍較小，在視覺表現(xiàn)力上并不理想。因此在第三個設(shè)計階段中，我們通過放大動畫、嘗試3D表現(xiàn)形式的方法解決上述問題。同時，3D的表現(xiàn)手法還可以通過光影和質(zhì)感來傳達更多信息，更加直觀易懂，具有極強的代入感。

空間的主流用戶以年輕人居多，為了匹配用戶群體的基本調(diào)性需要打造一個“年輕”、“有趣”的3D擊掌動畫。為此，我們以“3D”、“young”、“fun”作為關(guān)鍵詞收集參考素材，以此建立情緒版。

1 趣味和輕量的質(zhì)感

如前文所述，對于擊掌反饋行為是一個輕量化的互動，為避免3D表現(xiàn)手法過于寫實而帶來不必要的厚重感，同時也為了增加動畫的趣味性，我們選擇卡通的手掌造型進行建模；在材質(zhì)的選擇上我們偏向黏土材質(zhì)，弱化高光，讓視覺上體驗更加輕量。

2 彈性曲線讓動畫更生動

現(xiàn)實生活中的擊掌動作是一個減速運動，但是為突出擊掌的動勢和加強趣味性，我們采用了非寫實的彈性曲線來打造這個動畫，以此加強動畫的趣味性。

3 禮花烘托氛圍

在后續(xù)的產(chǎn)品迭代優(yōu)化過程中，我們引入了無限擊掌的玩法，用戶之間可以無限回贊。這就導(dǎo)致動畫被重復(fù)播放，會加速用戶對動畫的審美疲勞。所以為配合產(chǎn)品玩法的升級對動畫的設(shè)計也進行了迭代，基于擊掌次數(shù)設(shè)計了不同的展示彩蛋——在擊掌達到特定次數(shù)后，會有彩帶禮花蹦出，在烘托多次擊掌的熱情氛圍的同時，給用戶帶來更多趣味和驚喜。

在擊掌功能的設(shè)計過程中，我們不斷在發(fā)現(xiàn)問題、解決問題的循環(huán)中不斷尋求更優(yōu)解，逐步把一個不到100像素范圍內(nèi)的擊掌icon做到更好，以此來喚起用戶的對現(xiàn)實擊掌的記憶，建立起與用戶情感上的連接。

另外，通過趣味性的視覺表現(xiàn)手法不斷推敲動畫設(shè)計，讓Qzone的年輕用戶不僅從心理上建立連接，在表現(xiàn)層也能感知到符合自身標簽的趣味調(diào)性。

除上文提到的彩帶禮花以外，在擊掌玩法升級過程中，我們也拓展了更多內(nèi)容：

隨著用戶間反復(fù)擊掌次數(shù)變多，粒子效果會不斷升級，并加入富有層次的入場效果；而且達到關(guān)鍵擊掌次數(shù)的時候，會展示擊掌的次數(shù)，通過用戶的成就感來刺激其產(chǎn)生更多的擊掌行為。

為了豐富手掌樣式的選擇，給用戶提供更多樣的體驗，我們和增值團隊一起設(shè)計了更多的手掌形式，同時引入一些IP形象，讓擊掌更能喚起用戶的共鳴，也更加有趣。

擊掌這個功能從前期探索到上線和二次迭代經(jīng)歷了很長一段時間，整個項目對設(shè)計師來說也是一次收獲滿滿的過程。

創(chuàng)新也可以是從1到N的過程

創(chuàng)新并不都是從0到1從無到有的創(chuàng)新，尤其對于功能和框架體系成熟的產(chǎn)品，盲目的追求創(chuàng)新去改變用戶的認知和習慣是不妥的，從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細節(jié)給用戶創(chuàng)造驚喜，以小博大去做創(chuàng)新也能達到四兩撥千斤的效果。

打磨細節(jié)創(chuàng)造驚喜

探索和挖掘到一個不錯的想法之后，打磨細節(jié)也是同樣重要的，我們出了各種不同的擊掌效果方案，去找到給用戶驚喜和操作輕量的平衡，這個功能上線以后我們也一直在關(guān)注用戶的反饋，從用戶反饋中發(fā)現(xiàn)還可以做驚喜升級，從一個點出發(fā)，把這個點不斷的擴充做的更細致和更加閉環(huán)。

從生活中來，到生活中去

擊掌這個功能之所以有這個好的數(shù)據(jù)和用戶認可度，有一個很重要的原因是因為本身這個行為和現(xiàn)實生活中的場景是相對應(yīng)的，所以讓用戶能很快的理解和操作，符合用戶真實場景的認知所以學(xué)習成本比較低，我們在做設(shè)計的時候用生活場景挖掘產(chǎn)品，能達到事倍功半的效果。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

Tab bar 設(shè)計中，有一個很重要但卻常常會被設(shè)計師們遺漏的關(guān)鍵點──tab 切換時的 「圖標動畫設(shè)計」。如這些 APP 的底部 tab 設(shè)計都使用了這一種方式（以下視頻）：

Tab bars圖標動畫的作用

精彩的圖標動畫，對整體的設(shè)計具有畫龍點睛的作用，降低 tab 切換時的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設(shè)計給用戶傳達出整個 APP 設(shè)計的品牌及理念。

1. 動靜對比

動態(tài)的設(shè)計豐富了圖標更多可能性的表達，結(jié)合不同的動態(tài)效果表達出不同的情緒或情感。而除了情感的表達之外，最基礎(chǔ)的作用在于動態(tài)比靜態(tài)更加吸引眼球，增加視覺關(guān)注度，因此在切換 tab 時具有更強的視覺沖擊力。

2. 柔和與生硬

緩動的動效過渡，相比于無動效的設(shè)計，在 tab 切換時整體的視覺感受會更加柔和、輕量。過渡直接的反饋，容易造成生硬而不具美感。

3. 趣味的表達

由于動效的加入，我們在設(shè)計 tab 切換時會變得更加多元化，而不是單純的設(shè)計一個動作的反饋。在過渡的時間差中，可以進行很多趣味的表達。

3. 情緒代入

圖標結(jié)合表情的設(shè)計，運用動效的設(shè)計，讓整體的情緒感受更加直觀。如下圖案例，默認態(tài)與選中態(tài)通過前后的差異對比，點擊后出現(xiàn)的表情驚喜，具有不一樣的情緒變化。

Tab bar圖標動畫的基礎(chǔ)類型

動畫的設(shè)計是多樣化的，Tab bar 圖標動畫的類型實際上并沒有明確的劃分，這里主要列舉的是自己在日常瀏覽設(shè)計網(wǎng)站時的收集，以及個人認為比較常見的一些類型。我們可以基于這些常見類型的設(shè)計，對我們的設(shè)計進行再升華，從而提高整體設(shè)計的質(zhì)感和趣味。

1. 縮放動畫

點擊后通過一定的比例 「縮放」 反饋，突出 tab 之前的變化，從而強化了 tab 操作的感知，提升對于操作區(qū)域的視覺聚焦。結(jié)合不同的縮放效果，可以呈現(xiàn)出不同的視覺感知，縮放動畫大致分為線性和彈性兩種類型。

線性縮放

圖標在放大或縮小的過程中，使用了勻速的動畫效果，整體動畫一步到位、干凈利落。整體視覺感知較為柔和。

彈性縮放

帶有彈性縮放的 tab 反饋，讓整體的設(shè)計更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標的運動規(guī)則：先從 0 放大到最大（數(shù)值根據(jù)實際情況設(shè)定），然后再回彈至正常大小。

2. 透明度自然過渡

讓 tab 切換之間的過渡更加自然、柔和。相比于純靜態(tài)切換只多了一層透明度變化，但卻具有完全不一樣的視覺感受。

3. 位移

位移出現(xiàn)的圖標會產(chǎn)生一定的速度感，但需要控制位移的速度，過快容易忽略中間的運動軌跡，而影響自然過渡的效果。

4. 抖動

通過圖標的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動畫效果節(jié)奏較快，具有一定的速度感。情緒表達上較為俏皮。

左右抖動

點擊后，圖標反饋進行上下快速位移。建議來回位移次數(shù)不宜太多，控制在 1-2 次左右，次數(shù)太多容易顯得拖沓。

跳動的圖標

點擊切換后，圖標從底部彈起再回到初始位置，整體視覺感受具有跳動的韻律感。

晃動的圖標

旋轉(zhuǎn)抖動的圖標比上下或左右會更加具有趣味感。設(shè)定圖標的中心點或角點為旋轉(zhuǎn)軸，通過來回晃動而形成的效果。

5. 填充

切換時，默認 tab 由線性向面性的轉(zhuǎn)變。填充類型的動畫效果整體簡單、直接，直觀地表達出圖標切換前后的對應(yīng)關(guān)系。關(guān)鍵點在于處理好線性與面性圖標的細節(jié)轉(zhuǎn)換。

中心填充

使用某種幾何圖形（可以是圓形或其他）通過發(fā)散放大的設(shè)計方式，結(jié)合一定的節(jié)奏韻律擴展至填滿整個圖標。

掃描填充

動畫效果從圖標的一側(cè)，通過劃動變化至填滿。

6. 畫線-線性軌跡

以線性圖標或線面圖標中的線運動為主，在設(shè)計整套圖標時，運動軌跡需要保持統(tǒng)一（線的初始與結(jié)束的位置/方向等）。軌跡不一致，容易導(dǎo)致圖標的一致性被破壞。

局部細節(jié)畫線

選擇圖標的關(guān)鍵細節(jié)或圖標的特征進行畫線設(shè)計，增強圖標的特征細節(jié)，提高圖標的記憶點。

整體畫線

與局部細節(jié)畫線基本一致，差別的點在于表達了不同的視覺感受。整體畫線從視覺感受上會相對更加飽滿。但需要根據(jù)圖標的復(fù)雜程度而定，圖標過渡復(fù)雜，可能容易造成拖沓的動畫效果。

7. 結(jié)合容器

結(jié)合不同的幾何形作為選中圖標的當前態(tài)的背景，在背景上設(shè)計出現(xiàn)的動畫效果。既強化了選中當前態(tài)，整體的 tab 切換的一致性也較高。

8. 元素介質(zhì)

設(shè)計上結(jié)合某種圖形元素作為當前選中態(tài)，在切換時通過元素的位移、跳動等方式來達到 tab 切換的動畫效果。

Tab圖標動畫的組合形

除了以上單種類型的動畫方式外，還可以嘗試多種方式結(jié)合。通過不同的方式結(jié)合可以產(chǎn)生出更多的可能性，讓你的設(shè)計更加具有創(chuàng)意和打破常規(guī)。

1. 填充+畫線

2. 填充+抖動

3. 彈性縮放+填充

4. 元素介質(zhì)+抖動

5. 位移+透明度

更多案例（來自dribbble）

總結(jié)

tab bar 的圖標動畫最大的作用在于解決切換時的枯燥與單調(diào)，我們在設(shè)計時除了單純追求動畫的變化及多樣性之外，更多需要思考的是什么樣的動畫更符合我們的設(shè)計。

本文的主旨是分享自己日?？吹降囊恍﹦赢嬓Ч?，以及對收集的內(nèi)容進行的分析。實際的動畫樣式或者效果肯定遠遠不只這些，我們可以通過基礎(chǔ)的方法再結(jié)合自己的創(chuàng)意發(fā)揮出更多滿足自我設(shè)計的表達方式。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

虎牙直播是以游戲直播為主的彈幕式互動直播平臺，累計注冊用戶2億，提供熱門游戲直播、電競賽事直播與游戲賽事直播，手游直播等。

最近虎牙在上市一周年之際，發(fā)布了全新的公司級LOGO，也就是為虎牙母公司設(shè)計的全新企業(yè)品牌形象系統(tǒng)。

新logo的造型結(jié)合大寫英文字母“H”和小寫英文“hy”，將其演化為平行空間的兩個45度對稱且平行的立面圖像。

文字logo上由“虎牙”和拼音“huya”兩部分組成，中文“虎”字也進行了筆畫的調(diào)整，將虎”與“h”筆畫末端進行了切斜收尾的處理，從而來呼應(yīng)新logo的平行表現(xiàn)形式。

不同形式組合的新logo效果

在新logo的顏色方面，選用了比較青春具有活力，且明亮的“陽光黃”與“星云紫”。

圖形部分的延展也極具靈活性，靈活的視覺變化使品牌更具多樣性，也同時表現(xiàn)虎牙在數(shù)字時代的不同場景中，所呈現(xiàn)的多元化和創(chuàng)新。

圖形延展效果

再來看看，虎牙新logo應(yīng)用在各種衍生產(chǎn)品的效果。

 藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。