您現在的位置是:電腦技術吧?>? 基礎知識 ??>??icon圖標,iconfont圖標??>??正文詳情

icon圖標,iconfont圖標

罕春柔2019-11-17 04:30:37 人圍觀
簡介icon設計現在越來越多的移動應用和web應用開始重視動態效果的設計,它能給用戶帶來愉悅的交互體驗,是應用美觀的重要組成部分。(`)圖標,即圖標。在交互過程中,各種圖標的應圖

  現在越來越多手機應用和web應用都開始注重動效的設計,恰到好處的動效可以給用戶帶來愉悅的交互體驗,是應用顏值擔當的一大重要部分。

(`)  icon,也就是圖標。

在交互過程中,應用各種icon都會跟隨不同的事件發生不同的轉換。

舉兩個例子,一個音樂播放器的播放模式改變和充電時電量圖標的改變。

  過去,icon的轉換都十分死板,而近年來開始流行在切換icon的時候加入過渡動畫,這種動效給用戶體驗帶來的正面效果十分明顯,給應用添色不少。

  然而面對icon動效,我們應該如何設計?今天分享幾個設計icon動效的思路。

在此說明一下,配圖的動效有些是臨摹有些是原創,只為了統一樣式方便閱讀。

  一、屬性轉換法  這是最為普遍也最為簡單的一種icon切換思路。

  屬性包含了位置、大小、旋轉、透明度、顏色等,在這些屬性上面做動效,若運用恰當,可以做出令人眼前一亮的動效。

  現在絕大多數icon動效都離不開屬性變化,運動恰當,這個簡單而強大的方法大有可為之處。

  二、路徑重組法  這可能是看慣了屬性變換的動效之后,又一個讓人眼前一亮的動效思路。

  將icon的路徑(筆畫)進行重組,構成一個新的icon,這期間考驗著更多的東西,比如觀察兩個icon筆畫之間的關系,這個思路最近相當流行,同時也具有挑戰性。

  三、點線面降級法  這是一個相當有用的思路。

  面和面進行轉換的時候,可以用線作為介質,一個面先轉換成一根線,再通過這根線轉換成另一個面。

同理,線和線轉換時,可以用點作為介質,一根線先轉換成一個點,再通過這個點轉換成另一根線。

  這么說有點抽象,我們來看幾個例子。

  四、遮罩法  兩個圖形之間相互轉換時,可以用其中一個圖形作為另一個圖形的遮罩,也就是邊界,當這個圖形放大的時候,因為另一個圖形作為邊界的緣故,轉換成了另一個圖形的形狀。

  思路很簡單,卻又一點局限性,兩個圖形必須是包含關系。

  在谷歌的Material design規范中也出現類似的動效。

  五、分裂融合法  打個貼切的比方,就是把一把劍融成鐵水之后,鑄成一把新刀。

  分裂融合法尤其適用于其中一個圖標是一個整體,另一個圖標由多個分離的部分組成的情況。

由分裂融合法做出來的動效也相當有趣。

  六、圖標特性法  以上的思路只是停留在如何讓icon動效有趣的層面上,那么如何讓icon動效不僅有趣而且有意義呢?這就需要考慮不同icon之間的特性來設計動效。

  圖標特性法,顧名思義就是利用圖標表達的實際意義,做出與之吻合的動效,需要很強的思維發散性。

  要做好一個icon動效,光有思路是不行的,還需要了解一些圖形運動方面的知識。

如何做出令人愉悅的icon動效,可以考慮的方面有緩動、彈動、拖尾、時差、隨機、層次感、運動修飾等等。

版權聲明:本文由 罕春柔 整理編輯。

原標題:什么是圖標,圖標怎么做

轉載注明出處:http://www.dn9ww09s.icu/basics/13053.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦用格式工廠怎么剪輯視頻,格式工廠截取片段

    電腦用格式工廠怎么剪輯視頻,格式工廠截取片段 相關圖片格式工廠無法再次截取作為互聯網上最強大的免費視頻編輯工具,format factory被認為有很多剛使用過這個軟件的新手朋友。他們不知道如何從format factory截取視頻以格式工廠如何剪掉不要...

  • ppt保存格式,excel保存格式

    ppt保存格式,excel保存格式 相關圖片excel保存后格式消失文本區域的格式在保存時可以保存到數據庫中,但在顯示時,由于/N和不能相互旋轉,頁面不能按開頭的格式顯示,因此在顯示頁面時,應該在值外嵌套一層標簽,即...

  • win10臨時文件能刪嗎,c盤臨時文件可以清理嗎

    win10臨時文件能刪嗎,c盤臨時文件可以清理嗎 相關圖片windows臨時安裝文件可以刪除嗎在Windows系統中,臨時文件的積累是導致系統運行緩慢的一個非常重要的原因。我可以刪除臨時Windows文件嗎?臨時windows文件夾在哪里?讓我們用超人軟win...

  • steam無充值加好友,steam怎么設置拒絕加好友

    steam無充值加好友,steam怎么設置拒絕加好友 相關圖片steam0級加好友如果在steam平臺上下載安裝游戲,當一些游戲需要邀請好友參與時,可以直接粉碎steam搜索好友,與好友一起體驗游戲的樂趣。但有些用戶仍然不知道如何在steam網頁版stea...

  • reset,reset是什么

    reset,reset是什么 相關圖片trip reset什么意思在當今的Web設計/開發實踐中,使用CSS向語義(x)HTML標記添加樣式樣式是一個重要的關鍵。在設計師的夢想中,有一個完美的世界:所有瀏覽器都可以理解和應用多電腦...

  • wps公式編輯器無法使用,wps重新安裝公式編輯器

    wps公式編輯器無法使用,wps重新安裝公式編輯器 相關圖片wps公式編輯如何改變字體在使用WPS進行編輯時,有時需要插入公式,但此時,我們發現公式的選項將變為灰色并且不可用。怎么了?WPS公式編輯器不能做什么?下面的小編輯為您帶來W...

  • 圖像網格轉換,醫學圖像與網格

    圖像網格轉換,醫學圖像與網格 相關圖片怎樣關閉ps打開圖像上的網格網格化圖像效果在設計中也很常見,如圖4-127所示。此效果適合作為網頁或列的背景圖像。具體制作方法如下:圖4-127網格圖像效果1。打開焰火中的材質圖像...

  • win7無法關機修復工具,win7一直顯示正在關機

    win7無法關機修復工具,win7一直顯示正在關機 相關圖片w7系統不能關機怎么辦最近,很多win7的用戶和朋友都報告說,當他們想關機時,點擊關機按鈕總是無法反映。那么如果win7不能關閉呢?現在,超人軟件編輯器告訴你,如果win7點擊關閉,...

  • win7的臨時文件在哪,win7大量臨時文件

    win7的臨時文件在哪,win7大量臨時文件 相關圖片windows系統臨時文件最近,很多小伙伴說,他們用系統維護軟件檢查電腦,發現了很多臨時文件。我可以刪除win7的臨時文件嗎?win7的臨時文件夾的路徑在哪里?我不需要說太多。接下來...

  • 寫給大家看的設計書,寫給設計師的話

    寫給大家看的設計書,寫給設計師的話 相關圖片對設計師的祝福迪夫生來就有欺負人的基因(如果你不明白,請先看最后一篇文章)。事實上,這主要是因為你還沒有遇到能征服它的人!哈哈,今天帶大家去把他干掉,好吧,我承認...

熱評文章

  • wps行距怎么調小,wps里行距怎么調整

    wps行距怎么調小,wps里行距怎么調整 相關圖片wps表格上下間距怎么調在使用WPS時,在輸入文檔內容的同時,我們還將設置文本的間距和行距,這將使文檔更加美觀,滿足我們的要求。但是,如果使用較少的WPS,則可以設置行距wps冒...

  • 炫酷播放器,炫酷的播放器是怎樣弄的

    炫酷播放器,炫酷的播放器是怎樣弄的 相關圖片AcG播放器上圖是音頻播放器的用戶界面,其中還隱藏了歌曲的播放列表。整個播放器的界面除了大背景的人像圖和歌曲的星譜外,都是用CSS和字體來繪制的。看來唯一的困難就是CD和C電...

  • 三星手機突然網速很慢,三星s8上網速度慢

    三星手機突然網速很慢,三星s8上網速度慢 相關圖片手機網絡太慢了我相信對于三星手機用戶來說,最麻煩的是上網速度慢。三星上網速度慢怎么辦?三星上網速度慢怎么辦?讓我們用超人軟件來了解一下,三星的網速慢怎么辦?一。移...

  • css水平垂直居中,css中圖片垂直居中

    css水平垂直居中,css中圖片垂直居中 相關圖片css垂直對齊今天,我想和大家分享純CSS實現的垂直時間線效果。垂直時間線適用于具有類似任務調度的頁面。實現采用藍色作為主題色,界面效果良好。讓我們看看呈現:實現代碼HTML...

  • word怎么讓頁碼從某一頁開始,word不顯示頁碼怎么辦

    word怎么讓頁碼從某一頁開始,word不顯示頁碼怎么辦 相關圖片wps怎么從第三頁開始設置頁碼當使用WPS輸入文檔時,我們有時會在文檔中添加頁碼,以便標準化和便于查看。但是,如果您的文檔包含封面和目錄,則封面和目錄的前兩頁應從頁碼中刪...

  • 釘釘管理員有哪些權限,釘釘管理員權限在哪里

    釘釘管理員有哪些權限,釘釘管理員權限在哪里 相關圖片釘釘群管理員權限釘住是目前非常流行的企業通信軟件。各部門組和企業集團之間可以方便的溝通,使團隊合作更加高效。各小組的組長管理基本上是各部門的組長。因為工作很忙,有...

  • 火焰特效,ae怎么做火焰特效

    火焰特效,ae怎么做火焰特效 相關圖片ae手上火焰特效本教程介紹了利用flash CS5創建鼠標觸發的煙花落下交互效果,主要是利用計算鼠標跟隨物體產生火花效果,用一定的規則將鼠標掃過屏幕,你可以看到華麗的互動效果Ia...

  • 出現異常,應用出現異常

    出現異常,應用出現異常 相關圖片ping的過程出現異常近日,不少pptv用戶和朋友反映,他們在使用pptv的過程中出現了異常錯誤。那么pptv的異常錯誤呢?現在,超人軟件編輯將介紹如何解決pptv的異常錯誤。讓我們QQ出現異...

  • 繪制矩形,在草圖中繪制矩形的方法

    繪制矩形,在草圖中繪制矩形的方法 相關圖片如何畫矩形讓我們看一看畫布上一個簡單的幾何矩形的繪圖。在畫布中,有三種方法可以繪制矩形:填充矩形、筆劃矩形和清除矩形。當然,我們也可以使用路徑來描繪所有形狀,包括...

  • 為什么下載不了pp助手,為何pp助手安裝失敗

    為什么下載不了pp助手,為何pp助手安裝失敗 相關圖片為什么用pp助手安裝不了軟件最近,很多小伙伴都反映,他們在使用PP助手安裝軟件時,總會提示出現安裝失敗的異常現象。PP助手安裝失敗的原因是什么?如果PP助手無法安裝應用程序,...

關注微信

变脸官网查询