iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
15
自我挑戰組

學什麼就寫什麼,知道什麼就分享什麼系列 第 9

與工程師的協作之路-icon篇(上)

其實這兩天github壞了,害我有點開心可以合理挑戰失敗...沒想到工程師實在太熱情,立馬就找了替代方案給我,還很得意的跟我說:沒藉口斷文章了吼~
(只好繼續寫下去...)


有鑒於寫了一週的文章,讚數卻少到讓人百思不得其解...(明明就是作者問題!)
今天就來探討一下icon好了!/images/emoticon/emoticon33.gif

icons錯亂

PM「這有什麼不對?這樣不是很可愛嗎?」
Designer「可是這樣用很不直覺啊...」
PM「聖誕節快到了,放個聖誕樹應景啊!我們是賣貓咪用品的,加入購物車用隻貓也沒什麼不好吧!不希望使用者登出所以用個炸彈~不覺得這樣很幽默嗎?」
Designer.RD「不覺得!!!!」

通常來說,使用者的認知是 依照過去取得的經驗長期累積下來的一種直覺(習慣) ,所以如果有非常經常被使用的功能,通常使用者都會有個先入為主的印象,你突然將它換掉的話,有可能會造成使用者用起來覺得「卡卡的」或是「找不到功能在哪裡」!


當然,在少數情況下,你也可以教育你的使用者!
例如「按讚」這個習慣大概是從Facebook養成的,所以現在大家大概看到下面這種icon都會蠻直覺的知道是「like」的意思!
like icon
(圖片截自google搜尋結果)

或是遊戲畫面中,總是會讓你知道哪個icon是什麼技能,即便你是初入江湖菜味十足的新手,玩久了你也是會認識這個圖案就是我的大絕招~

前提是你的使用者黏著度要夠!不然在 他還沒學起來之前,就已經因為難用而離開你家網站 ,那還談什麼教育呢?

例如說,鐵人賽網站的「點讚」icon設計。
就在文章title左邊,按按看就知道了!請務必按按看!! (被拖走)
鐵人賽icon

嗯?嗯嗯嗯!!??

go top icon
(圖片截自google搜尋結果)

難道是我誤會了什麼嗎?O_O...
我一開始還以為 為什麼這個go top不會跟著我飄到下面,這樣是要怎麼go ?(咖麻喜麥安抓造!?)

但是 鐵人賽這麼大的年度盛事我想大家黏著度都很高吧哈哈哈哈哈哈 (拜託不要吉我)
想想就釋懷了(X)


趕緊來講點正經的,不然被叫去領五百怎麼辦(等等,好像不錯?)

我比較常用的是fontawesomeMaterial Design icons
sketch的外掛中,也有支援對這兩套的使用~只要安裝外掛就可以了。
sketch icon plugin

改顏色和大小的方式,比照一般文字就可以了~在工程師眼中這種就叫做icon font,就是說這樣的svg已經文字化了,直接用針對文字設定的語法就可以改變它!
對設計師來說,這樣的方式也增加了修改的活性~想改顏色的話,不必再重新生圖!下個color就可以了!
簡直是天上掉下來的禮物(喂。)


那麼切版時又該怎麼用呢?
下篇再告訴大家喔~(絕對不是在拖搞!)/images/emoticon/emoticon29.gif


上一篇
與工程師的協作之路-User story這檔事
下一篇
與工程師的協作之路-icon篇(下)
系列文
學什麼就寫什麼,知道什麼就分享什麼31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

4
SunAllen
iT邦研究生 1 級 ‧ 2018-10-23 11:12:25

自從,好幾年前,官方把「喜歡」或「讚」的icon,換成很像是
go top之後,就沒有多少人,在鐵人賽文章中,會去按那個icon了...

因為,那個icon的位置很...奇特。

文章看完,要按讚,要像我一樣,手動把畫面拉回到上面,才按的到...
從,UX的角度來看,實在很弔詭,看完後,再倒帶。

不過,多年下來,文章看完,該按的還是要按啊!

看更多先前的回應...收起先前的回應...
Wen Chien iT邦新手 4 級 ‧ 2018-10-23 11:24:05 檢舉

就是很弔詭啊!!!但我又不好意思說太大聲!(喂)
且話說一天最高似乎只能按十個...這樣我寧可按FB好了XD
大概意圖不想讓人使用~~XD


他是否怕跟著跑就更像go top了XDDD

SunAllen iT邦研究生 1 級 ‧ 2018-10-23 12:17:20 檢舉

iT邦幫忙,是討論IT的地方,但iT邦幫忙網站,不在此範圍,這是多年來的心得...(茶),年輕人,懂了嗎XD

Wen Chien iT邦新手 4 級 ‧ 2018-10-23 13:06:47 檢舉

/images/emoticon/emoticon01.gif

Homura iT邦高手 1 級 ‧ 2018-10-23 16:11:35 檢舉

我也覺得很奇怪
幹嘛不做成浮動的

SunAllen iT邦研究生 1 級 ‧ 2018-10-23 16:16:51 檢舉

浮動...不就變成『go top』了嗎XD

Homura iT邦高手 1 級 ‧ 2018-10-23 17:44:51 檢舉

差不多吧
像Addthis這種
https://www.addthis.com/
我覺得這樣蠻好用的

Wen Chien iT邦新手 4 級 ‧ 2018-10-23 18:37:28 檢舉

姑且不論位置~長這樣就不像like啊XD
不過我發現大陸網站「知乎」也是用這個~
難道又是傳說中的 因為XX也這樣做 !?
(我會不會從此黑掉一輩子不能參加鐵人賽)

SunAllen iT邦研究生 1 級 ‧ 2018-10-23 19:15:45 檢舉

Wen Chien
我都還在,別怕...參加當然沒問題...(茶)...只參加歐

網路的世界,認真你就輸了!/images/emoticon/emoticon15.gif

Wen Chien iT邦新手 4 級 ‧ 2018-10-24 10:22:06 檢舉

SunAllen 寫一萬字也是參加獎這樣XD
darwin0616我認真..的想耍廢RRR

tacodrem iT邦新手 5 級 ‧ 2018-10-24 15:05:13 檢舉

同樣無法理解這三角形的icon選擇跟UX設計....

Wen Chien iT邦新手 4 級 ‧ 2018-10-24 18:34:05 檢舉

tacodrem我如果因為說太多實話而「被消失」的話拜託來救我~/images/emoticon/emoticon26.gif

我要留言

立即登入留言