久久蜜臀精品av_国产欧美日韩_亚洲一区二区三区四区_国产精品无码久久久久_久久性_国产日本在线视频

當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

設計師總結了這5個圖標設計實戰方法

2018-01-03 3285 1
圖標設計是界面設計最重要的組成部分之一,作為UI視覺設計師,這項技能已經是我們必須要掌握的基本技能,那圖標設計要遵循什么樣的原則呢?這5個圖標設計方法都是我實戰后總結的,適合新手進階學習。 “識別性”、“符合行為習慣”、“原創性”、“易用性”··· 上面這些原則都是大的標準,在圖標設計的時候起到了指導性的意義,但是這些規則其實都被大家說爛了,如果你對上面這幾點還不太了解,可以自行百度一下,這里我就不多說了,我要分享的是能夠幫助你提升專業度的一些實戰經驗,如果你所做的圖標能做到以下這幾點,那么恭喜你,你及格了! (本文沒有對圖標進行詳細的分類,所談范圍也只是App中一些功能性圖標的設計經驗) 還是先來看下大綱:
  1. 像素對齊
  2. 多用布爾運算
  3. 獨特的風格
  4. 視覺大小的統一
  5. 2017年圖標的流行趨勢預測
1. 像素對齊 我記得以前在小公司的時候,一個人負責整個app的交互設計與視覺設計,設計團隊只有兩個人,有什么問題都沒人可以請教,當時困惑我最大的一個問題就是:為什么我做的圖標總是發虛的呢?直到來了大公司和前輩們學習之后,才知道原來是因為像素沒有對齊。 我們來看下面這張圖: uisdc-icon-20170108-1
圖片背景的網格就是我們所說的像素網格,我標明紅點是想告訴大家,第一條豎線做到了像素對齊,而第二條豎線沒有做到。我們沒有看到二者的區別,是因為現在是在矢量圖形的環境下顯示的,如果導出來圖片就會變成下面這樣: uisdc-icon-20170108-2
這就是圖標發虛的原因,因為我們沒有嚴格的做到像素對齊,尤其是在做較小尺寸的圖標時,如果不嚴格的遵循像素對齊,那最終的顯示效果就會出現問題,比如說下面這種情況:
uisdc-icon-20170108-3
所以在你通往專業UI設計師的路上,這一點是必須要注意的。
2. 多用布爾運算 在做圖標的時候,能用基本圖形進行布爾運算的時候,盡量不要使用鋼筆,這樣做的好處有如下幾點:
  • 讓你的圖標更加規范
  • 對圖形結構理解更加深刻
  • 后期更改形狀更加方便
舉個例子,下面這個圖標:
uisdc-icon-20170108-4
如果我們使用鋼筆直接去畫,其實我們很難畫的特別規范,而且后期調整也很麻煩,最正確的方法就是去思考他的結構,這樣一個外形是否可以使用基本圖形進行組合來實現,在經過思考與嘗試后,我們會發現,其實他是用一個圓形和三個矩形組合而成的,如下圖: uisdc-icon-20170108-5 在平時,我們可以多去嘗試分析并練習一些好看的圖標或者真實的物體,去理解其中的結構與制作方法,當你積累的經驗足夠多時,你就可以很自如的去設計你想要的精美圖標了。 多做點布爾運算的教程也可以:《15分鐘繪制一個春晚吉祥物「康康」(布爾運算實例)》
3. 獨特的風格 作為專業視覺設計師的你,在時間充足的情況下,千萬不要去網上下幾個圖標直接拿來用,你會上癮的,并且也會被一些行內人進行批判,因為他們很容易就能看出來你做的圖標是直接在網上下載的,比如下面這樣的圖標: uisdc-icon-20170108-6
我們在做系列圖標的時候,一定要在前期給圖標設定一個風格及原則,使之看起來與眾不同,例如下面的圖標: uisdc-icon-20170108-7
一眼看上去,我們就可以看出上面圖標的特點,線條是斷開的、所有的圖標都是一筆畫出來的,這些都可以讓你的圖標變得與眾不同。再比如你也可以從顏色上做文章,如下圖:
uisdc-icon-20170108-8 其實方法還有很多,大家可以多多嘗試與創新。 在這里值得一提就是,我們在做線性圖標時,一定要保證描邊粗細相同、圓角相同,如果這些基礎的規則都沒有遵循,那也就談不上風格的統一、創新了。
4. 視覺大小統一
uisdc-icon-20170108-9 看上面這張圖,同樣都是44x44px尺寸的形狀,方形就會比圓形看著大一些,雖然我們統一了物理尺寸,但是在視覺大小上沒有進行統一。 在進行圖標設計的時候,我們會使用柵格輔助線來幫助我們更加嚴格謹慎,但一定不要被輔助線困住,學會靈活運用,保持視覺上的大小統一。 這個方法具體可參見優設之前的文章:《高階技巧!聊聊LOGO 設計中的視覺矯正法》 再舉個英文字體的例子,如下圖:
uisdc-icon-20170108-10 雖然在設計的時候,使用了輔助線,但是設計者并沒有被輔助線所束縛,為了達到視覺大小的統一,將曲線字母(例如o)進行了適當的放大,這樣整體看起來才會和諧穩固。 設計圖標的時候也是一樣,不僅僅是圖標的大小,包括元素與元素的距離、正形與負形的比例都是我們需要考慮的內容,如果有哪些內容自己還不太清楚,那就需要利用業余的時間去好好補充一下系統知識了。
5. 2017年圖標的流行趨勢預測 觀察了很多App的改版,發現功能性圖標的變化趨勢在某種程度上有一定的共性可尋,在這里我來分享兩個自己的預測:
1. 利用局部顏色差異來突顯圖標風格
uisdc-icon-20170108-11
這種風格一直出現在dribbble網站上的概念圖標,現在也慢慢的在移動app上面使用起來,如果現在你正在尋找圖標風格,這個方向不妨一試。
2. 閱讀類App圖標的無色化
uisdc-icon-20170108-12 底部導航圖標的無色化風格,在閱讀類App開始慢慢流行起來,這種情況也可以理解,是為了讓用戶更好的聚焦閱讀內容,優化閱讀體驗。 但不知道以后其它類型的App圖標會不會也走這個風格路線呢? 以上就是我本次分享的內容,其實一些很基本的原則,例如:識別性、易用性,也都是十分重要的,但我覺得沒什么好解釋的,就沒有特別拿出來闡述,希望大家能把所有重要的原則都銘記于心,不斷地分析、練習,也許未來的圖標設計大師就是你了!
35
評論區(0)
正在加載評論...
相關推薦
主站蜘蛛池模板: 国产精品久久久久久久久婷婷 | 国产大片一区 | 欧美天堂在线 | 久久精品国产99国产精品 | 最近中文字幕在线视频1 | 男女下面一进一出网站 | 国产成人高清在线观看 | 日韩欧美国产综合 | 毛片一区二区三区 | 欧美一区二区在线视频 | av黄色在线| 亚洲91 | 亚洲综合国产 | 国产中文区二幕区2012 | 一级黄色片免费在线观看 | 国产精品免费视频一区 | 国产一区精品在线 | 精品国产一区二区三区性色av | 日韩三级在线 | 久久精品网 | 欧美日韩久久精品 | 成人免费视频网站在线观看 | 午夜爱爱毛片xxxx视频免费看 | 成人福利视频 | 国产在线精品区 | 一级黄色片在线看 | 精品欧美一区二区三区精品久久 | 久久99网 | 视频一区二区中文字幕 | 日韩成人在线免费观看 | av黄色在线 | 密室大逃脱第六季大神版在线观看 | 亚洲国产69 | 日韩在线观看网站 | 亚洲永久精品国产 | 91亚洲精选| 久久精品欧美电影 | 日韩综合一区 | 国产欧美精品一区二区三区 | 日本黄色不卡视频 | 一级黄色日本片 |