ag电子竞技俱乐部在上海有分部

實例分析:圖標設計4原則

時間:2017-01-19 17:34:02   |    科技   |   

    
點擊
信息與交互設計
關注我們!

 歡迎大家踴躍投稿哦!

投稿郵箱:[email protected]

圖標設計是界面設計最重要的組成部分之一,作為UI視覺設計師,這項技能已經是我們必須要掌握的基本技能,那圖標設計要遵循什么樣的原則呢?

“識別性”、“符合行為習慣”、“原創性”、“易用性”···

上面這些原則都是大的標準,在圖標設計的時候起到了指導性的意義,但是這些規則其實都被大家說爛了,如果你對上面這幾點還不太了解,可以自行百度一下,這里我就不多說了,我要分享的是能夠幫助你提升專業度的一些實戰經驗,如果你所做的圖標能做到以下這幾點,那么恭喜你,你及格了!

本文沒有對圖標進行詳細的分類,所談范圍也只是app中一些功能性圖標的設計經驗。

還是先來看下大綱:

  • 一、像素對齊

  • 二、多用布爾運算

  • 三、獨特的風格

  • 四、視覺大小的統一

  • 五、2017年圖標的流行趨勢預測

一、像素對齊

我記得以前在小公司的時候,一個人負責整個app的交互設計與視覺設計,設計團隊只有兩個人,有什么問題都沒人可以請教,當時困惑我最大的一個問題就是:為什么我做的圖標總是發虛的呢?直到來了大公司和前輩們學習之后,才知道原來是因為像素沒有對齊。

我們來看下面這張圖:

圖片背景的網格就是我們所說的像素網格,我標明紅點是想告訴大家,第一條豎線做到了像素對齊,而第二條豎線沒有做到。我們沒有看到二者的區別是因為現在是在矢量圖形的環境下顯示的,如果導出來圖片就會變成下面這樣:

這就是圖標發虛的原因,因為我們沒有嚴格的做到像素對齊,尤其是在做較小尺寸的圖標時,如果不嚴格的遵循像素對齊,那最終的顯示效果就會出現問題,比如說下面這種情況:

所以在你通往專業UI設計師的路上,這一點是必須要注意的。

二、多用布爾運算

在做圖標的時候,能用基本圖形進行布爾運算的時候,盡量不要使用鋼筆,這樣做的好處有如下幾點:

  • 讓你的圖標更加規范

  • 對圖形結構理解更加深刻

  • 后期更改形狀更加方便

舉個例子,下面這個圖標:

如果我們使用鋼筆直接去畫,其實我們很難畫的特別規范,而且后期調整也很麻煩,最正確的方法就是去思考他的結構,這樣一個外形是否可以使用基本圖形進行組合來實現,在經過思考與嘗試后,我們會發現,其實他是用一個圓形和三個矩形組合而成的,如下圖:

在平時,我們可以多去嘗試分析并練習一些好看的圖標或者真實的物體,去理解其中的結構與制作方法,當你積累的經驗足夠多時,你就可以很自如的去設計你想要的精美圖標了。

三、獨特的風格

作為專業視覺設計師的你,在時間充足的情況下,千萬不要去網上下幾個圖標直接拿來用,你會上癮的,并且也會被一些行內人進行批判,因為他們很容易就能看出來你做的圖標是直接在網上下載的,比如下面這樣的圖標:

我們在做系列圖標的時候,一定要在前期給圖標設定一個風格及原則,使之看起來與眾不同,例如下面的圖標:

一眼看上去,我們就可以看出上面圖標的特點,線條是斷開的、所有的圖標都是一筆畫出來的,這些都可以讓你的圖標變得與眾不同。再比如你也可以從顏色上做文章,如下圖:

其實方法還有很多,大家可以多多嘗試與創新。

在這里值得一提就是,我們在做線性圖標時,一定要保證描邊粗細相同、圓角相同,如果這些基礎的規則都沒有遵循,那也就談不上風格的統一、創新了。

四、視覺大小統一

看上面這張圖,同樣都是44x44px尺寸的形狀,方形就會比圓形看著大一些,雖然我們統一了物理尺寸,但是在視覺大小上沒有進行統一。

在進行圖標設計的時候,我們會使用柵格輔助線來幫助我們更加嚴格謹慎,但一定不要被輔助線困住,學會靈活運用,保持視覺上的大小統一。

再舉個英文字體的例子,如下圖:

雖然在設計的時候,使用了輔助線,但是設計者并沒有被輔助線所束縛,為了達到視覺大小的統一,將曲線字母(例如o)進行了適當的放大,這樣整體看起來才會和諧穩固。

設計圖標的時候也是一樣,不僅僅是圖標的大小,包括元素與元素的距離、正形與負形的比例都是我們需要考慮的內容,如果有哪些內容自己還不太清楚,那就需要利用業余的時間去好好補充一下系統知識了。

五、2017年圖標的流行趨勢預測

觀察了很多app的改版,發現功能性圖標的變化趨勢在某種程度上有一定的共性可尋,在這里我來分享兩個自己的預測:

1.利用局部顏色差異來突顯圖標風格

這種風格一直出現在dribbble網站上的概念圖標,現在也慢慢的在移動app上面使用起來,如果現在你正在尋找圖標風格,這個方向不妨一試。

2.閱讀類app圖標的無色化

底部導航圖標的無色化風格,在閱讀類app開始慢慢流行起來,這種情況也可以理解,是為了讓用戶更好的聚焦閱讀內容,優化閱讀體驗。

但不知道以后其它類型的app圖標會不會也走這個風格路線呢?

以上就是我本次分享的內容,其實一些很基本的原則,例如:識別性、易用性,也都是十分重要的,但我覺得沒什么好解釋的,就沒有特別拿出來闡述,希望大家能把所有重要的原則都銘記于心,不斷地分析、練習,也許未來的圖標設計大師就是你了!


【轉載】本文轉載自微信公眾號 艾藝信息。




我的出處

                  來源:ME網易移動設計

版權聲明

專委會微信公眾號文章來源于作者授權或者投稿文章,大部分轉載文章都盡量標明了出處以及作者信息,版權都歸作者所有,若涉及到版權問題,請添加微信:dajiangjuan聯系刪除,謝謝!(有關投稿問題也可騷擾哦!)



頻道熱點
  1. NO.1 2018高考地理復習必備錦囊,拿下它實現暑假彎道超越

    地理姐說:正確的方法是克敵制勝的重要武器。下面是2018高考地理一輪復習九大錦囊,希望你這個暑假拿下它們,實現彎道超越!錦囊一巧記太 

  2. NO.2 北京剛剛傳來大消息:保安或將消亡

    一士別三日,當刮目相看!今日之中國企業,已非昔日吳下阿蒙!剛剛,北京傳來一個權威榜單,中國企業競爭力,讓全世界為之虎軀一震!最近,麻省理工 

  3. NO.3 女生跑步沒見瘦?你需要這11個塑型妙招!

    請各位同學做好筆記!這套動作共11個動作,可循環2~4組,動作之間休息0-30秒,每套之間休息1-2分鐘。NO.1 弓箭步+側步部位:內收肌、臀肌、 

  4. NO.4 不常聯系的朋友,兼談對微信產品上的想法

    微信 6.5.13 版的更新說明里,寫了「可批量管理不常聯系的朋友」,但是不少人并沒有找到這個功能在哪里。微信團隊說,這個功能在灰度發 

  5. NO.5 VR可以成為主流技術——但它還沒有準備好

    雖然虛擬現實在過去的幾年中獲得了不小的發展,但這個詞在1987年就已經出現了,頭戴式顯示器(HMDs)更是在20世紀60年代就已經問世。Face 

  6. NO.6 ofo攜手軟銀進軍日本 共建萬物互聯的世界

    8月9日,ofo小黃車宣布與軟銀商業服務有限公司(簡稱軟銀C&S)達成合作伙伴關系,正式進入日本市場。日本也成為繼中國、新加坡、英國、美 

  7. NO.7 掃拖一體,全局規劃——科沃斯DE35測評

    是人工智能拯救了掃地機器人!路徑規劃、激光測距,再加上各種傳感器,讓掃地機器人可以自由穿梭在家中,而不至于橫沖直撞,各種摔“跟頭” 

  8. NO.8 不想上班,想明天就去住這些酒店!

    在旅行中讓我們印象深刻的,除了路上的風景,遇到的人,還有各式各樣的民宿或者酒店。一間設計感十足,服務熱心周到,或是洋溢著生活氣息的 

ag电子竞技俱乐部在上海有分部 全天澳洲幸运10在线计划 重庆时时存在改码吗 群英会出号规律 1肖2码公开默认版块 重庆时时走势图诀窍 体彩6十1走势图带连线 福彩今天的出奖号 腾讯棋牌麻将 双色球近5oo期走势图 时时彩1000期历史开奖号码 吉林时时走势图 江苏时时视频 吉林时时预测软件手机版 江西新时时彩组三全选