微交互設(shè)計(jì)，使產(chǎn)品更為生動(dòng)，讓用戶體驗(yàn)更具趣味性。

曾經(jīng)有人在設(shè)計(jì)交流群里面問：學(xué)UI要不要學(xué)畫圖標(biāo)？我告訴你：要！而且圖標(biāo)設(shè)計(jì)一直是UI設(shè)計(jì)里面最重要最基礎(chǔ)的組成部分。一個(gè)小圖標(biāo)看起來簡單，但事實(shí)上圖標(biāo)的設(shè)計(jì)不但要求繪制精美 ，圖形象征意義與其所代表的內(nèi)容高度貼合，還要求圖標(biāo)的形式風(fēng)格與版面風(fēng)格高度一致，圖標(biāo)雖小，卻是濃縮的精華，要求功能與形式上的統(tǒng)一。

在以前寫的一篇介紹標(biāo)簽欄設(shè)計(jì)的心理暗示的文章中曾經(jīng)推薦利用視覺縱深的心理現(xiàn)象將當(dāng)前標(biāo)簽高亮以區(qū)分當(dāng)前標(biāo)簽與非當(dāng)前標(biāo)簽，《標(biāo)簽欄設(shè)計(jì)的心理暗示：高亮與視覺縱深的心理模型》這種方法是基于最原始的心理現(xiàn)象，所以會(huì)一直都適用的?，F(xiàn)在我來引入一種新的方法途徑，就是為標(biāo)簽欄圖標(biāo)設(shè)計(jì)注入故事性。

一個(gè)好的標(biāo)簽本身就具有一定的故事和內(nèi)涵，而因?yàn)闃?biāo)簽欄的圖標(biāo)有當(dāng)前狀態(tài)和非當(dāng)前狀態(tài)的切換，所以在設(shè)計(jì)上可以根據(jù)不同的情境做進(jìn)一步的優(yōu)化，微交互使用戶體驗(yàn)更加具有趣味性。下面這個(gè)是我們當(dāng)前正在推進(jìn)的項(xiàng)目，以下四個(gè)圖標(biāo)為例我來逐一解說一下。

（首頁）

在首頁圖標(biāo)中，依然沿用小房屋來表示“home”的理念，為了與眾不同，以目前我們的項(xiàng)目為例，考慮到項(xiàng)目要求線上與線下連鎖便利店相結(jié)合，這里把小房屋優(yōu)化成便利店的圖標(biāo)。接下來，就可以根據(jù)圖標(biāo)的兩種狀態(tài)腦洞大開，天馬行空地想象了。所以可以想象一下，便利店有什么樣的情境可以表現(xiàn)為當(dāng)前狀態(tài)和非當(dāng)前狀態(tài)呢？我想到的是可以運(yùn)用便利店的營業(yè)狀態(tài)和非營業(yè)狀態(tài)，當(dāng)不在營業(yè)狀態(tài)時(shí)，圖標(biāo)是灰的，單調(diào)冷清；當(dāng)便利店在營業(yè)狀態(tài)時(shí)，圖標(biāo)是山茶紅的，熱情，有人情味，便利店的落地窗旁的茶桌邊坐著一人，隔壁空著的那個(gè)位子，是否正等著你的到來？看著此情此景，暖暖的故事一下子就彌漫開去了，讓人想入非非~

（品質(zhì)）

第二個(gè)頁面名稱為“品質(zhì)”，在這里，我把該頁面的標(biāo)簽圖標(biāo)設(shè)計(jì)為一個(gè)開水壺，因?yàn)樯钜芙^垃圾食品，高品質(zhì)的生活肯定是要多喝水，一個(gè)漂亮優(yōu)雅的水壺就可以表現(xiàn)出生活的品質(zhì)。那水壺有哪種狀態(tài)呢？那就是有水和沒水的狀態(tài)啊^_^ ?哈哈。所以，這個(gè)圖標(biāo)的兩種狀態(tài)可以設(shè)計(jì)成這樣了

（分類）

至于第三個(gè)頁面“分類”，因?yàn)槲覀兊捻?xiàng)目主要針對(duì)的還是生活，所以這里我用多個(gè)抽屜來表示可提供不同的分類可供選擇，那抽屜可以有什么情境可以表示當(dāng)前狀態(tài)和非當(dāng)前狀態(tài)呢，想想，抽屜有打開和關(guān)上的兩種狀態(tài)，當(dāng)你要用到抽屜的時(shí)候，肯定是要打開的啦。你家的抽屜里的物品是不是也按不同的分類來擺放？

（分類）

一級(jí)界面的最后一個(gè)頁面就是個(gè)人中心了，我用了頭像來示個(gè)人頁面的圖標(biāo)。細(xì)想一下，通常情況下你想到一個(gè)人，他在你的腦海里可能只有一個(gè)輪廓；可是當(dāng)你把注意力放在他身上，細(xì)細(xì)觀察的時(shí)候又會(huì)發(fā)現(xiàn)，這個(gè)人不僅有輪廓，還有眼睛，有五官，有神情，有穿好看的衣服，甚至還有他個(gè)人非常豐富的精神世界~他的一切，都包含在個(gè)人中心頁面內(nèi)容里面了。

（個(gè)人）

根據(jù)圖標(biāo)的不同狀態(tài)為標(biāo)簽圖標(biāo)設(shè)計(jì)不同的情境，從而讓圖標(biāo)更加具有故事性，讓用戶獲得更好的用戶體驗(yàn)。我曾見過某個(gè)同事對(duì)著一個(gè)APP頁面不停地切換，他說那些圖標(biāo)看起來很好玩。不可否認(rèn)，細(xì)微的交互往往可以大幅提升產(chǎn)品的用戶體驗(yàn)，細(xì)節(jié)往往決定了成敗~

希望這篇文章能給大家?guī)順?biāo)簽設(shè)計(jì)中新的思考方法和路徑，當(dāng)然這種形式也未必所有設(shè)計(jì)場景都適合，主要還是得根據(jù)產(chǎn)品性格要求和風(fēng)格定位來設(shè)計(jì)。設(shè)計(jì)，本身就是個(gè)不斷探索的過程。

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