有人曾在設(shè)計傳播小組中問過：你想學(xué)畫畫一個圖標(biāo)嗎？我告訴你：是的！圖標(biāo)設(shè)計一直是UI設(shè)計中最重要和最基本的部分。小圖標(biāo)看起來很簡單，但實際上圖標(biāo)的設(shè)計不僅需要漂亮的繪圖，而且圖形符號意義與它所代表的內(nèi)容高度一致。它還要求圖標(biāo)的表單樣式與布局樣式高度一致。圖標(biāo)雖小但集中。精華需要功能和形式的統(tǒng)一。

在之前撰寫的關(guān)于標(biāo)簽欄設(shè)計《關(guān)于標(biāo)簽欄設(shè)計的那點心理暗示》心理暗示的文章中，建議使用視覺深度的心理現(xiàn)象來突出顯示當(dāng)前標(biāo)簽，以區(qū)分當(dāng)前標(biāo)簽和非當(dāng)前標(biāo)簽。這種方法基于最原始的心理學(xué)?，F(xiàn)象，所以它將永遠(yuǎn)適用?，F(xiàn)在讓我介紹一種新方法，即將故事注入標(biāo)簽欄圖標(biāo)的設(shè)計中。

好的標(biāo)簽本身具有一定的故事和內(nèi)涵，并且由于標(biāo)簽欄的圖標(biāo)在當(dāng)前狀態(tài)和非當(dāng)前狀態(tài)之間切換，因此可以根據(jù)不同的場景進一步優(yōu)化設(shè)計，并且微交互使得用戶體驗更多故事和樂趣。以下是我們目前正在推進的項目。以下四個圖標(biāo)是我逐個解釋的例子。

（主頁）

在主頁圖標(biāo)中，小房子仍然用來表達“家”的概念，為了有所作為，考慮到我們的項目需要在線和離線連鎖便利店，小房子被優(yōu)化為便利店圖標(biāo)。 。接下來，您可以根據(jù)圖標(biāo)的兩個狀態(tài)打開大腦，并想象它。所以我可以想象便利店中的哪種情況可以表示為當(dāng)前狀態(tài)和非當(dāng)前狀態(tài)？我認(rèn)為可以使用便利店的業(yè)務(wù)狀態(tài)和非業(yè)務(wù)狀態(tài)。不在業(yè)務(wù)中時，圖標(biāo)為灰色。單調(diào)乏善;當(dāng)便利店處于商業(yè)狀態(tài)時，圖標(biāo)是茶花紅，溫暖，人性化，坐在便利店落地窗旁邊的茶幾，空房旁邊的座位，正在等待為了你的到來？看著這種情況，溫暖的故事突然蔓延開來，讓人們想一想?

（質(zhì)量）

第二頁的名稱是“質(zhì)量”。在這里，我將此頁面的標(biāo)簽圖標(biāo)設(shè)計為水瓶。因為生活拒絕垃圾食品，高品質(zhì)的生活絕對要多喝水，美麗而優(yōu)雅的水壺才能展現(xiàn)出生活品質(zhì)。水壺有什么樣的狀態(tài)？那就是水和水的狀態(tài)。 ^ _ ^哈哈。因此，此圖標(biāo)的兩種狀態(tài)可以像這樣設(shè)計

（分類）

至于第三頁，“分類”，因為我們的項目主要針對生活，所以這里我使用多個抽屜來表示可以提供不同的類別供選擇，抽屜可以有任何情況來指示當(dāng)前狀態(tài)和非現(xiàn)狀，想一想，抽屜有兩種開合狀態(tài)。當(dāng)您想要使用抽屜時，必須打開它。抽屜里的物品也放在不同的類別中嗎？

（個人）

第一級界面的最后一頁是個人中心。我用頭像來顯示個人頁面的圖標(biāo)。想一想，通常你會想到一個人，他的腦海中可能只有一個輪廓;但是當(dāng)你專注于他時，你會發(fā)現(xiàn)這個人不僅有輪廓，還有眼睛，五感，外表，漂亮的衣服，甚至他個人豐富的精神世界。關(guān)于他的一切都包含在個人中心頁面中。因此，非當(dāng)前狀態(tài)的圖標(biāo)只有一個輪廓;當(dāng)用戶點擊它時，角色的細(xì)節(jié)就會豐富?

好的，這里是首頁上四個標(biāo)簽欄圖標(biāo)的具體想法和想法。根據(jù)圖標(biāo)的不同狀態(tài)為標(biāo)簽圖標(biāo)設(shè)計不同的上下文，使得圖標(biāo)更像故事并且允許用戶具有更好的用戶體驗。我看到一位同事一直在應(yīng)用頁面之間切換，他說圖標(biāo)看起來很棒。不可否認(rèn)的是，細(xì)微的互動往往可以大大提升產(chǎn)品的用戶體驗，細(xì)節(jié)往往決定成敗?

當(dāng)然，這種形式并不一定適合所有的設(shè)計場景，而且主要是根據(jù)產(chǎn)品的個性要求和風(fēng)格定位來設(shè)計。本文的目的是為您帶來標(biāo)簽設(shè)計的新思路和路徑。設(shè)計本身就是一個不斷探索的過程。

« 瘋狂的中間！我一直在閑置魚里賣二手魚...... | 網(wǎng)站建設(shè)需要說明，但需要謹(jǐn)慎科學(xué) »