在今天看見明天
熱門: 台積電 兆豐金 股市 00929 航運股

設計師 David Lanham如何設計出攻佔使用者螢幕的icon

設計師 David Lanham如何設計出攻佔使用者螢幕的icon

2013-07-30 16:35

上禮拜我們曾經聊過app的設計,而美國的科技網站 The Verge 最近訪問在iconfactory工作的設計師David Lanham(@dlanham)1,請他跟大家聊聊他是怎麼設計出這些美好的圖示。

上禮拜我們曾經聊過app的設計,而美國的科技網站 The Verge 最近訪問在iconfactory工作的設計師David Lanham(@dlanham)1,請他跟大家聊聊他是怎麼設計出這些美好的圖示。


David Lanham曾經設計出許多知名程式的圖示,例如許多設計師、網頁開發者喜愛的Coda、Acorn等,Twitter程式 Twitterific和評價很高的行事曆程式 Fantastical(Inside的作者之一Richard一直在Fantastical iPhone版)。


 圖片來源:David Lanham • Coda


2010年時David Lanham因為腳受傷休息了一段時間,但他反而利用那段時間在網路上靠著iOS的「FaceTime」功能為客戶繪製畫像2,大家可以到Flickr欣賞他繪製的作品3。

說不定有讀者看過這張圖喔:p(圖片來源:dlanham

起點

David Lanham說自己從小就喜歡塗塗抹抹,總是隨身帶著三孔活頁夾或是剪貼簿,發揮自己的想像力,在空白的紙張上畫著火箭或是恐龍大戰等場面。跟所有的小孩一樣,他從蠟筆和廣告顏料入門,後來才慢慢接觸其他媒材。

17 歲的時候父母送他一個Wacom的繪圖板當做聖誕禮物,從此一頭哉入Illustrator,那是他開始玩向量繪圖的起點。

給開發者的icon設計建議

David Lanham認為icon要能夠規縮放,而且無論尺寸大小,都應該要能持續傳遞出圖示上的訊息——而且還要很好看。

照片來源:Susan Kare--Alumni Profiles-- NYU Steinhardt

然而這不代表每一個圖示都必須是史詩級的巨作。事實上,許多icon靠著極少的像素就能傳遞訊息,在電腦史上最有名的一套圖示之一大概就是30年前由Susan Kare為麥金塔電腦所繪製的4:除了帶著笑臉的麥金塔電腦螢幕,還有筆刷、剪刀、手掌狀的指標(算是日後被用於Adobe Photoshop、Illustrator等繪圖相關軟體圖示的始祖),以及所有人都忘不了的——垃圾桶圖示。




圖片來源

如同David Lanham所說,有些很棒的圖示都是由非常簡單、非常少的元素所構成。這必須具備扎實的美術與設計知識,明白圖示畫出來後會是什麼樣子,並且懂得如何用最佳的方式去設計和調整圖示的大小。

為何icon如此重要?

Icons are the face and branding of an app.

圖示就是一個程式的臉孔、一個程式的品牌商標。

David Lanham認為圖示就是一個程式的臉孔、一個程式的品牌商標。圖示能夠定一下一個程式的基調,並且讓使用者明白程式可能的用途。大多數情況,使用者第一眼會看見的就是程式的icon(甚至在名稱之前)。無論是在桌上型電腦、平板電腦或智慧型手機,程式的icon妝點螢幕,程式內的圖示則與使用者的操作息息相關。如果我們希望使用者注意到自己設計的程式,那麼 icon非常重要。

設計流程

David Lanham說儘管他的設計流程取決於他所處的地點和想要呈現的概念,然而通常他的設計流程都是從紙筆開始。一旦出現某個他認為大有可為的草圖,就會著手數位化,在Photoshop上進行繪製——它是如此具有彈性,無論是筆刷、橡皮擦、上色,還有那個充滿光輝的「復原」功能。

使用工具

David Lanham最常用的當然是Photoshop跟Wacon繪圖板——他幾乎不用滑鼠,都用繪圖筆跟觸控版代替(他用 Mac)。David Lanham也會用Illustrator(用於個人繪圖),其他像是「訊息(Messages)」、Safari(瀏覽器)、iTunes、Mail和Dropbox 都是不可或缺的,還有Alfred、Versions、Twitteriffic、Slicy、Icon Slate、Candybar、Coda、ImageOptim、Image Capture和xScope等,有必要的話他也會使用Xcode。

熱愛動畫



圖片來源:Dribbble

David Lanham很喜歡動畫,舉凡迪士尼、皮克斯和宮崎駿,都是他學習的對象。David Lanham在自己的Dribbble 頁面5上臨摹了許多宮崎駿動畫的角色。他個人最喜歡的經歷是參觀皮克斯。其實David Lanham自己也有著手在進行動畫的繪製,他告訴The Verge的記者未來大家會有機會看到他的作品。

身為一位設計師,David Lanham平常除了逛Pinterest,還會去 Naimoka、Pasa La Vida、Drawn、Lovely Package 和 Little Big Details(這個網站匯集了許多介面設計上的細節)等網站。iOS 遊戲中他最欣賞的設計之一是「Sword and Sworcery」6。(如果您對app名稱沒印象,看到下方的icon卻立刻想起來在哪看過,那麼表示這個設計應該成功地在您心理留下印象了)

圖片來源:App Store

The Verge 問他如何放鬆自己,David Lanham 回答:

Just observing life around me, or walking through the woods or a park or even just getting outside recharges my batteries and makes me really appreciate everything that’s around us. There are so many little details that are never noticed until you really start looking, and relaxing is essential to appreciating those details even more.

觀察自己的周遭,在森林、公園中散步,或者單純外出為自己「充電」,讓自己能夠好好地去欣賞周圍的事物。有太多小細節是我們不曾注意過的,除非你開始用心去看。讓自己放鬆很重要,這樣才能去欣賞那些細節。


1.The Iconfactory’s David Lanham on what it takes to build home screen-worthy icons

2.David Lanham’s FaceTime Portraits

3.Portraits

4.The Sketchbook of Susan Kare, the Artist Who Gave Computing a Human Face

5.Dribbble -- David Lanham

6.Sword and Sworcery

本文獲「Inside」授權刊登


 

延伸閱讀

高股息ETF這麼多,為何選00878做核心持股?達人存股千張00878、2年領374萬股息:符合1條件「退休金領不完」

2024-04-18

00929準備配息0.2元,年化配息率12%!買19.X元會被套?兩達人喊免操煩:存股只怕1件事

2024-04-22

兆豐金(2886)帳上賺40%,該賣掉改買0050?她把50萬滾成5千萬、不到45歲財富自由:2個最佳賣股時機

2024-04-08

兆豐金配1.5元現金+0.3元股票,股利新高!為何他卻說配股是雙面刃...更棒買點在哪?

2024-04-24

00919、00878...台股大跌如何加碼?曾犯錯解定存買整張玉山金,達人:每月存股2萬,1個操作技巧撿便宜

2024-04-22