<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          沒想到,同一組圖標(biāo),同事掌握了一個方法直接上線,我哭了!

          共 1615字,需瀏覽 4分鐘

           ·

          2023-09-13 08:07

          「逸城」帶著他的第二篇文章來啦,讓我們一起看看他要和我們分享什么呢?
          今天我們來看一下我在實際工作中做的一個需求,是底部標(biāo)簽欄圖標(biāo)的優(yōu)化,我們首先看一下原圖有哪些不足的地方。


          通過觀察可以發(fā)現(xiàn)三個問題:第一,圓角不統(tǒng)一;第二,疏密程度不舒服;第三,沒什么特點很普通。
          1. 圓角不統(tǒng)一

          圓角統(tǒng)一比較好理解,就是圓角的大小要統(tǒng)一,我們可以發(fā)現(xiàn)第一個圖標(biāo),跟第三個圖標(biāo)比起來就顯得格格不入,過于尖銳。


          2.疏密不統(tǒng)一

          通過我們的觀察可以發(fā)現(xiàn),大部分地方是比較密集的,只有商城的袋子這么空,這樣就會讓人感覺比較突兀,整體不夠和諧。


          3.缺少差異化

          通過我們的觀察可以發(fā)現(xiàn),整個圖標(biāo)沒什么特點,很普通,沒有什么調(diào)性,不是很精致。


          這個圖標(biāo)做的不夠好,基于這三個問題,我們重新又做了一版。在統(tǒng)一性,形式差異,行業(yè)屬性,顏色豐富四個方面進行了一個優(yōu)化,我們先來看一下最終的效果。


          第一步 圓角統(tǒng)一

          通過觀察可以發(fā)現(xiàn),我們在統(tǒng)一性上面做了圓角統(tǒng)一,所有圖標(biāo)的圓角都是統(tǒng)一的。


          第二步 圖標(biāo)形式

          有同學(xué)會問了,為什么要做圖標(biāo)的形式,之前做的圖標(biāo),相對來說比較普通。我們在做設(shè)計的時候,誰都不想讓自己的設(shè)計很普通,盡量做一些差異化的東西,所以我們可以大膽在形式上去創(chuàng)新,我們在圖標(biāo)形式上面做了一個斷線,讓他更加有形式感,我們可以一起來看一下不斷線和斷線的區(qū)別。



          第三步 融入行業(yè)屬性

          我們做的產(chǎn)品是和環(huán)保和碳中和相關(guān),通過對環(huán)保和碳中和的圖形的挖掘,我們得到了一些圖形的案例,像環(huán)保袋,地球,樹葉,小樹苗。


          我們從這些圖形里面,提取出來了一個樹苗的圖形。


          當(dāng)我們把兩者進行一個融合,神奇的效果就出來了。后期我們在制作圖標(biāo)的時候,全部都融入了行業(yè)屬性,通過我們的優(yōu)化之后整個圖標(biāo)變得更加霸氣。



          第四步 顏色豐富

          最后,我們希望顏色更加豐富一些,讓它有一些光感,使它更具有環(huán)保的感覺,我們加入了從青色到藍色的一個漸變。


          有同學(xué)肯定會問了,這個效果我也不會呀,這種漸變到底是怎么來做的鴨!別急!有我!現(xiàn)在我就來一步一步的進行拆解,給它講的透透的。

          1.斷線

          利用鋼筆工具的添加錨點工具,給圖形沿途的路徑進行錨點的添加,添加完成之后復(fù)制圖形,把多余的線段刪除(有幾段就復(fù)制幾個圖形),進行斷線處理。


          2.添加漸變色

          選擇線性漸變,給對應(yīng)的方向進行漸變,第二段的漸變開始顏色選擇第一段漸變結(jié)束的顏色,這樣子就進行了完美的無縫連接。為了讓大家看的更加直觀,我用一個顏色豐富的案例來講解。


          以此類推,一個顏色豐富的圖標(biāo)就做出來啦!


          最后,讓我們再看一下需求改版前后的對比:



          總結(jié)

          今天我們的分享就到這里啦,我來給大家簡單總結(jié)一下這次需求優(yōu)化我收獲到的兩個點。

          1.統(tǒng)一性

          我們做圖標(biāo)必須做到統(tǒng)一性,圓角統(tǒng)一,疏密統(tǒng)一。

          2.差異化

          這次差異化我們用了形式上的斷線,以及賦能行業(yè)屬性。

          我是逸城,希望文章對大家有所幫助!

          UI試聽課  持續(xù)報名中
          菜心08期的試聽課,你將收獲:

          如何做差異化設(shè)計

          如何給大廠項目提案

          如何提升自己的審美

          ... 敬請期待

          上課時間:9月14日(周四)晚8點30。
          接下來共同欣賞一下UI課學(xué)員的作業(yè)吧~


          課程詳情點擊左下角【閱讀原文】即可查看,試聽課僅需9.9元,名額有限,先到先得!
          報名后記得添加下方微信,發(fā)送訂單截圖,拉你進群,以免錯過直播,添加時記得備注:試聽課。

          瀏覽 3624
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  国产69精品久久久久久久久久 | 干成人骚逼网 | 99热都是精品 | 久草毛片| 婷婷五月丁香综合网 |