我是如何為MAC應用FLINTO設計UI圖標的?

發布時間:2017-04-15 09:45 來源:互聯網 當前欄目:網頁設計教程

   這篇文章是 Flinto 設計團隊設計師 Peter Nowell 的專訪整理而成,采訪中 Peter 介紹了他是如何設計 Flinto 的圖標,以及一些經驗心得。

  Flinto 團隊 最近采訪了我關于Flinto用戶界面圖標背后的設計流程。

  你是怎么為Mac版本的Flinto貢獻自己的設計?

  我參與了Flinto新的Mac版本的用戶界面部分和用戶體驗部分的設計,就在他發布之前的幾個月。但是因為Flinto是一個特殊的工具,我們越是深入思考每一部分的用戶體驗,我們越感覺到Flinto需要大量的定制icons。譬如說Flinto應用的列表(List),工具欄(Toolbar),動畫的設計面板(Transition Designer),下拉手勢(Gestures dropdown)都需要他們獨自的一套圖標。所以,如何快速的設計圖標變成了我的主要工作。

  當設計大型應用的圖標和菜單的時候,你采用什么樣的設計策略?

  設計總是情境驅動的。我驚奇的發現專業Mac應用的情境設計是最復雜的工作之一,就算你只是設計圖標。工具欄(Toolbar)的圖標大小必須一致,而且最好根據圖標知道用途。這與側邊欄的圖標和下拉菜單看到的圖標的設計原則上有所差異。 一些圖標會以不同的尺寸和不同的樣式重復出現在不同的地方。不是只要調整圖標尺寸或者樣式就能夠適用于每一個用戶界面的,所以我在設計圖標的時候需要考慮到圖標是否具有通用性以及不破壞用戶界面的整體一致性。

我是如何為MAC應用FLINTO設計UI圖標的? 電腦高手

  我都是在紙上開始設計圖標的,我一直堅信這個原則。我會在紙上畫下我想象中這個圖標的所有可能性,譬如設計的這個圖標包含了什么暗喻以及圖標可能需要/產生的變化。所以在概念設計的這個階段上,我盡量讓自己將所有的內容都寫在我的紙上,甚至是一些不相關的想法。下一步則分析概念設計中的內容如何能夠更好符合我們設計的目標,已有的限制以及這個圖標的情境聯系。

  我發現將繪圖構思和評估這兩個過程分開進行是很至關重要的。前者的工作需要想象力,好奇心,而且持有自己主觀的判斷,是一個加法的過程,是心血來潮的創作。評估則需要批判性,實用性,以及需要考慮圖標背后一連串所延伸出來的隱喻,是一個做減法的過程。如果你嘗試同時做這兩件事情,那么你會考慮不過來從而得不到任何結果。

  我最近還在網上授課講述我認為在設計圖標中最重要的原則。里面還包含了我是如何來評估我的想法和草稿的。

  通常來說,只有一部分的設計想法會被保存到電腦里面。使用sketch可以提高我的生產效率并且在生產的過程中會有一些創造性的決定。但最主要的目的還是要完善和精煉圖標的形式,保證每一個圖標都是像素完美的。我對此具備相當大的熱情,我對其他忽視這個細節的人感到很煩惱。

  能夠為我們再稍微解釋一下什么是“像素完美”和如何實現?

  像素完美其實意味著很多東西,它更像是一個想法而不是一個能夠具體描述的特征。像“注意細節”一樣,當被忽視的時候我們能夠很容易的感覺出來。完美的像素對小圖標的可辨別度有巨大的影響。想要實現像素完美不僅僅是將設計元素的像素網格對齊(如下圖)。這基本上來說就是在和鋸齒做斗爭。使用抗鋸齒是很好的一件事情,但它會讓圖像一些地方產生模糊,尤其是在對角線和曲線中。

  舉個例子,我們想在圖層列表中加上一些注釋來表明哪些層是被隱藏或者是被鎖住的。當然給圖層加上隱藏和鎖定是很簡單的事情,只需要點擊按鈕操作一下就好了。我們考慮的是我們有一個小的注釋,他會占用一小部分空間,來注釋兩個已經隱藏和鎖定圖標。為了完成這個目標,我們的圖標必須要做到像素完美。我對我設計的8×8大小的圖標感到非常的自豪。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、