您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計理論 >> 瀏覽設計教程

如何畫好斷線圖標?我總結了這4個規(guī)律

@菜心設計鋪 :關于圖標如何斷線,假如是經(jīng)驗雄厚的設計師,估計靠感覺做就可以了,但不是大神的我們怎么辦呢?總得有點規(guī)律讓我們參考吧。雖然有些規(guī)律不能全盤通用,但這次總結肯定能給你帶來幫助。

大綱如下:

  • 先考慮在拼接處斷線
  • 平衡視覺復雜度
  • 避免正中心處斷線
  • 盡量讓圖標一筆畫完

一. 先考慮在拼接處斷線

假如一個物體是由兩個部分組成,當我們選擇在拼接處斷開:

我會覺得兩個部分還沒組裝好,是一種很天然的分開。

但假如是下面如許的:

我會覺得它壞了,很不恬逸。

我們做斷線圖標的時候也一樣,可以先考慮在物體的拼接處斷線,讓斷口看起來天然協(xié)調。

舉個例子,下圖是一個「我的」圖標:

假如如今讓我給它來做斷線,我就先找到拼接處,分析如下:

雖然例子有點血腥,但事實確實如此,拼接處就在頭和身子連接的地方,所以嘗試在這里斷開:

我覺得還可以。行,那再來個例子。下圖是個新聞的圖標:

再來分析,它的形狀是由一個矩形和一個三角形組成的:

我們照舊在拼接處斷開,得到如下圖:

嗯,也還行。

所以一樣平常做斷線圖標,我會先行使這一個規(guī)律看看可不可行。

假如可行,就繼承優(yōu)化細節(jié),假如不可行再嘗試其他方法。

二. 視覺復雜度要平衡

偶然候,我們不好將其圖標拆解,這時候我們就可以嘗試去考慮圖標的視覺復雜度。

來個例子,下圖是一個皇冠的圖標:

經(jīng)過分析,我們可以得出,圖標紅色區(qū)域的復雜程度要比藍色區(qū)域高:

所以我選擇在藍色區(qū)域斷口,來增長藍色區(qū)域的復雜程度,達到平衡的結果:

那假如在紅色區(qū)域斷開是什么樣的呢,我們來分析對比一下:

所以,通過對視覺上復雜程度的解析后發(fā)現(xiàn),方案一會平衡和諧許多。

再來個例子,下面是個通信錄圖標:

圖標的左側要比右側復雜:

假如我們選擇在左側斷線,那左側就會更復雜,如許兩邊的復雜度就會失調,所以我選擇在右邊斷線:

如許圖標左右都有細節(jié),視覺上平衡多了。

三. 避免正中心處斷線

有同伙會說,有些圖標沒有拼接處,復雜程度也都一樣,比如下面這種:

怎么辦呢?

很簡單,這種圖標只要盡量避免在正中心斷線就ok,由于正中心斷線顯得過于呆板:

其它地方都可以嘗試,例如左上角、左上角、右上角、右下角等等。

四. 盡量讓圖標一筆畫完

這也是一個很緊張的知識點:假如可以的話盡量讓圖標外輪廓一筆畫完,如下圖:

其實許多時候,只要我們能從拼接處斷線,基本都是可以一筆畫完的,所以大家細致一下就好了。

當然,假如實在不能一筆畫下來,也不必勉強,由于強扭的瓜不悅目。

總結

這四個知識點就是目前為止菜心所整頓的關于斷線圖標的規(guī)律,小我經(jīng)驗,供大家參考。

不過提示大家,這些方法難免會有少數(shù)不適用的時候,碰到不適用的情況,萬萬不要由于規(guī)則而被困住,多多嘗試,敢于不同,大概可以找到更合適的解決方案。

迎接關注作者的微信公眾號:「菜心設計鋪」

[教程作者:互聯(lián)網(wǎng)]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/di3935.html
如何打造良好的語音交互體驗?這兒總結了四個方法
脫手試試!手把手教你如何適配 iPhone X
圖趣網(wǎng)微信
建議反饋
×