DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 案例分析:很容易讓用戶陷入迷茫的圖標
案例分析:很容易讓用戶陷入迷茫的圖標
編輯:關於網頁技巧     

你是否發現,在浩如煙海的應用程序堆裡,具有漂亮圖標和清爽名字的 App 更容易被用戶喜愛。作為開發者,面對這自己的作品,能否自問一句:“從圖標和名稱中,能夠知道這個程序的作用是什麼嗎?”

名稱太長,太偏,太繞口或者重名,圖標太簡潔,太花哨,太乏味都是不合格的作品,它很容易讓用戶陷入迷茫。讓我們來看看幾個例子。

圖標和名稱都很糟糕

Calvetica 在功能上絕對是一級棒的作品,它是一款 iPhone 平台的日歷和 GTD 工具,KKK 在《極簡 GTD 和手機》裡推薦過這款程序。問題是,它的圖標和名稱都太糟糕了。

calvetica-icon

第一眼看到這個圖標,你會聯想到什麼?會是日歷嗎?還是紅十字會?這個圖標其實只透露了兩層含義:

  • 它能夠添加什麼東西(加號)
  • 它的設計非常簡潔

當然,緊接著要看程序的名字:Calvetica,這是由 Cal 和 vetica 組成的名詞。但對於非英語國家的用戶,很容易誤解為一個生僻詞,甚至會聯想到“計算器”(Calculator)。而恰恰圖標中的加號,也跟計算器有關,太糟糕了。

再來看一個比較流行的程序:Foursquare,它也好不到哪兒去。

foursquare-icon

圖標上畫著一個勾,你會聯想到什麼?待辦事項?還是耐克?假設你並不了解它的簽到(Check In )玩法,會嘗試這款程序嗎?

等等,紫色的高爾夫球又是什麼意思?或者是籃球?用戶的腦子裡充滿疑問。

再看程序的名字:Foursquare,直譯過來是“四方”。其實這是美國小孩兒在學校裡玩的一種游戲,跟橡膠球有關。哦,這下子有一部分用戶就明白了,原來圖標的意思是用橡膠球砸中一個四方形的標記。

“難道這是一款游戲?”又猜錯了,這可是新潮的 LBS 簽到服務。誰讓這個圖標看上去就是游戲。

名稱很糟糕,圖標卻很出彩

先要說 Instagram ,這個詞是由  Insta 加 Gram 組成的。前者是“立刻,立即”,後者卻很像“電報”(telegram)。誰也猜不到它跟寶麗來(Polaroid)有關系。

名字難讀不要緊,圖標非常精彩:

instagram-icon

非常直觀地點明了它的照相機功能,對,Instagram 就是一部照相機。這個圖標表達了它的基本功能和用法,降低了用戶的學習成本。

類似的還有:Soulver,盯著這個名字,知道它的作用是什麼嗎?猜不到是一款計算器吧。(是 Solver 的變體?)

圖標很糟糕,名稱卻很出彩

先亮出圖標:

simplenote-icon

這玩意是啥?是簡潔的太極圖,你會想到大韓航空嗎?還是 Mac 平台的通用程序?都不是。通過它的名稱 Simplenote ,你就會恍然大悟:原來是具有同步功能的筆記本程序!

圖標和名稱都很出彩

圖標和名稱都很出色的程序很多,除了耳熟能詳的日歷,地圖等官方程序之外,來看下面兩個小程序。

Delivery Status 就是“快遞狀態查詢”的意思,這種工具類的軟件名稱就是需要“簡單明了”,節約用戶的時間才能提升滿意度。

它的圖標是一個未開封的包裹:

deliveries-icon

包裹貼上有精致的快遞單:發件人,收件人,條碼。包裹上還貼著透明膠,細節完美無缺,表現得恰到好處。

Pastebot 是由 Paste 和 Bot 組成,前者是“粘貼”,後者是“機器人”。用戶立刻就知道這是一個自動化剪切板程序。再結合這個卡通的圖標:

pastebot-icon

大概能猜出它的功能了吧:其實這是一個從 Mac 到 iOS 的跨平台剪切板。

一些想法

花了這麼長時間列舉好例子和壞例子,無非是給開發者們提供一些靈感:智能手機用戶已經擁有了一些慣性思維,單純靠“非主流”的圖標和名稱,是無法脫穎而出的。你需要去適應你的用戶,讓他們感到舒服和愉快。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved