做有溫度的設計:有故事感的標簽圖標

08-09

微交互設計,使產品更為生動,讓用戶體驗更具趣味性。

曾經有人在設計交流群裡面問:學 UI 要不要學畫圖標?我告訴你:要!而且圖標設計一直是 UI 設計裡面最重要最基礎的組成部分。一個小圖標看起來簡單,但事實上圖標的設計不但要求繪制精美 ,圖形象征意義與其所代表的內容高度貼合,還要求圖標的形式風格與版面風格高度一致,圖標雖小,卻是濃縮的精華,要求功能與形式上的統一。

在以前寫的一篇介紹標簽欄設計的心理暗示的文章中曾經推薦利用視覺縱深的心理現象將當前標簽高亮以區分當前標簽與非當前標簽,標簽欄設計的心理暗示:高亮與視覺縱深的心理模型這種方法是基於最原始的心理現象,所以會一直都適用的。現在我來引入一種新的方法途徑,就是為標簽欄圖標設計註入故事性。

一個好的標簽本身就具有一定的故事和內涵,而因為標簽欄的圖標有當前狀態和非當前狀態的切換,所以在設計上可以根據不同的情境做進一步的優化,微交互使用戶體驗更加具有趣味性。下面這個是我們當前正在推進的項目,以下四個圖標為例我來逐一解說一下。

(首頁)

在首頁圖標中,依然沿用小房屋來表示 "home" 的理念,為瞭與眾不同,以目前我們的項目為例,考慮到項目要求線上與線下連鎖便利店相結合,這裡把小房屋優化成便利店的圖標。接下來,就可以根據圖標的兩種狀態腦洞大開,天馬行空地想象瞭。所以可以想象一下,便利店有什麼樣的情境可以表現為當前狀態和非當前狀態呢?我想到的是可以運用便利店的營業狀態和非營業狀態,當不在營業狀態時,圖標是灰的,單調冷清;當便利店在營業狀態時,圖標是山茶紅的,熱情,有人情味,便利店的落地窗旁的茶桌邊坐著一人,隔壁空著的那個位子,是否正等著你的到來?看著此情此景,暖暖的故事一下子就彌漫開去瞭,讓人想入非非 ~

(品質)

第二個頁面名稱為 " 品質 ",在這裡,我把該頁面的標簽圖標設計為一個開水壺,因為生活要拒絕垃圾食品,高品質的生活肯定是要多喝水,一個漂亮優雅的水壺就可以表現出生活的品質。那水壺有哪種狀態呢?那就是有水和沒水的狀態啊 ^_^ 哈哈。所以,這個圖標的兩種狀態可以設計成這樣瞭

(分類)

至於第三個頁面 " 分類 ",因為我們的項目主要針對的還是生活,所以這裡我用多個抽屜來表示可提供不同的分類可供選擇,那抽屜可以有什麼情境可以表示當前狀態和非當前狀態呢,想想,抽屜有打開和關上的兩種狀態,當你要用到抽屜的時候,肯定是要打開的啦。你傢的抽屜裡的物品是不是也按不同的分類來擺放?

一級界面的最後一個頁面就是個人中心瞭,我用瞭頭像來示個人頁面的圖標。細想一下,通常情況下你想到一個人,他在你的腦海裡可能隻有一個輪廓;可是當你把註意力放在他身上,細細觀察的時候又會發現,這個人不僅有輪廓,還有眼睛,有五官,有神情,有穿好看的衣服,甚至還有他個人非常豐富的精神世界 ~ 他的一切,都包含在個人中心頁面內容裡面瞭。

(個人)

根據圖標的不同狀態為標簽圖標設計不同的情境,從而讓圖標更加具有故事性,讓用戶獲得更好的用戶體驗。我曾見過某個同事對著一個 APP 頁面不停地切換,他說那些圖標看起來很好玩。不可否認,細微的交互往往可以大幅提升產品的用戶體驗,細節往往決定瞭成敗 ~

希望這篇文章能給大傢帶來標簽設計中新的思考方法和路徑,當然這種形式也未必所有設計場景都適合,主要還是得根據產品性格要求和風格定位來設計。設計,本身就是個不斷探索的過程。

精彩圖片
文章評論 相關閱讀
© 2016 看看新聞 http://www.kankannews.cc/