<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          采用 M3 設計的 Google Phone 應用

          杰睿 圖標設計文章及欣賞

          谷歌已向部分測試用戶發布了其手機應用的新界面,該界面采用了 Material 3 Expressive 設計。此次改進超越了簡單的視覺風格,更注重使整體應用流程和功能更加直觀。

          最顯著的變化是底部導航欄的重新組織。現有的“收藏夾”選項卡已被移除,并作為“收藏夾集合”集成到新的“主頁”選項卡中。“聯系人”選項卡也消失了,取而代之的是新的“鍵盤”選項卡,該選項卡位于中心位置,取代了現有的浮動操作按鈕。因此,底部導航欄簡化為總共三個選項卡。

          此外,通話記錄功能也得到了簡化。此前,同一個人的來電會嵌套在一個條目中,現在它們將被分開并按時間順序列出,方便用戶快速識別未接來電或已接來電。

          來電屏幕也進行了改進。用戶可以通過新的水平滑動手勢來接聽或拒絕來電,這一改進是根據用戶反饋而來的,旨在減少從口袋中拿出手機時的誤操作。

          谷歌解釋說,這些更新“旨在讓你的應用從始至終都擁有更簡單、更輕松的體驗”。新的設計和功能將在未來幾周內陸續向公測組推出,但并非所有功能都會一次性推出,而且一些 Material 3 Expressive 元素可能會限量推出。

          (C)谷歌

           

           
          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          UI 設計|審美積累 | 擬物化風格(Skeuomorphism)

          杰睿 圖標設計文章及欣賞

          擬物化是指把現實世界的材質、光影和結構帶到數字界面中。木紋、金屬、皮革、紙張等真實物體的質感,被細致地還原到屏幕上,讓用戶一眼就明白元素的意義與操作方式。它曾是iOS6之前移動端設計的主流風格,也一度被極簡風格取代,但在如今的創意項目和品牌中,擬物化又以精致的小范圍應用回潮。
          核心特點:
          強調光影、漸變、紋理和材質感
          元素看上去像真實物體,有層次和觸感
          圖標、按鈕、卡片常帶高光或陰影,突出立體效果
          通過形象化隱喻幫助用戶理解功能(例如垃圾桶圖標表示刪除)
           
          適用場景:
          游戲UI界面(卡牌、任務面板、背包系統等)
          兒童類App、教育軟件(通過形象化幫助理解)
          復古、懷舊主題的官網或活動頁
          精致的產品展示頁、品牌定制化網站
          擬物化能帶來強烈的情感共鳴,尤其在需要溫度感和可玩性的界面中更顯優勢。但大面積使用容易產生信息冗余,對資源體積和加載性能也要求高。相比純視覺風格,它更適合在重點組件、小范圍點綴,作為界面亮點出現。
           

          5aa03006-e211-49d4-90ee-c797a6caf109.png

          9a878ddc-1587-41f1-96d0-a3efeeb6380c.png

          85001f9c-4ff6-419f-b0d2-4511ae10546e.png

          771615d3-923c-4e5b-b438-22214c0ecb9a.png

          b8419aeb-fb14-4b7d-831a-21970dce1e40.png

          c3bf255b-6cce-4245-9908-19120727d983.png

          更多項目/合作請私信,支持定制設計服務
          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          Google如何分組按鈕——按鈕組功能及其使用方法

          杰睿 圖標設計文章及欣賞

          按鈕組(ButtonGroup)是一個將多個按鈕以可視化的方式組合在在一起的組件,幫助用戶快速識別并操
          作相關操作。在M3Expressive中,按鈕組通過增強按鈕間的交互、布局適配以及層級表現力,提升
          了界面的靈活性。

          DM_20250701224752_001.PNG


          為什么要分組按鈕?
          現有的按鈕只是簡單地并排放置,缺乏任何鏈接交互或按鈕之間的視覺統一。
          拼中人。簡單
          Co
          在Material3中,我們將按鈕組定義為獨立的組件,以實現更豐富的表現力和自適應的布局,并提出
          了一種名為Connected Button Group的新形式來取代Segmentted Button的作用。
          本文我們將了解新增按鈕組的功能和使用方法。如果您想了解更多關于Expressive新增的Split Button

          配置按鈕組
          DM_20250701224752_002.PNG
          容器
          按鈕組可以包含各種元素,例如圖標、文本按鈕等,但其核心概念是"容器",它是一種更高級的結構,
          包裹著這些元素并控制其布局和交互。因此,將按鈕組理解為一個充當按鈕容器的容器,而不是按鈕的
          集合,似乎更準確。


          按鈕組的類型
          按鈕組分為標準按鈕組和聯動按鈕組。
          DM_20250701224752_003.PNG
          標準按鈕組
          使用標準按鈕組將獨立的操作按鈕并排放置。
          每個按鈕都保持圓潤的形狀,并且按鈕之間有一定的間距。在此組中,選定的按鈕可以改變寬度或形
          狀,并且這種變化通常會影響相鄰的按鈕。整個按鈕組被設計:為一個有機的整體。
          一般適合展現保存、取消、刪除等主要操作,并且按鈕的大小和樣式根據上下文靈活調整。


          DM_20250701224752_004.PNG
          鏈接按鈕組
          連接按鈕組是一種主要用于允許選擇多個選項的組件。現有的分段按鈕將被連接按鈕組取代。
          按鈕之間物理連接、共享邊框或以一致的高度和寬度對齊。用戶可以選擇一個或多個按鈕,并且只有選中的按鈕會在視覺上突出顯示。這種設計可以有效地傳過達清晰的選擇狀態,而不會影響其他按鈕。


          它主要用于替代分段按鈕的作用,例如過濾、視圖切換和排序選項。

           

          如何使用按鈕組
          DM_20250701224752_005.PNG
          按鈕組使您的產品更具表現力。
          標準按鈕組增加了相鄰按鈕之間的交互,使它們相互響應。選擇標準組內的按鈕時,會發生以下變化:
          所選按鈕的形狀和寬度將會改變。
          選定的切換按鈕也會改變顏色。
          相鄰的按鈕移動并暫時改變寬度。

           

          DM_20250701224752_006.PNG
          僅在重要的交互時使用形狀變化。
          您可以使用不同的按鈕類型、寬度和顏色組合來強調重要元素,并在視覺上對相關按鈕進行分組。默認
          情況下,標準按鈕組中的所有按鈕應具有相同的尺寸(XS到XL)和形狀(圓形或方形)。
          ·只有在英雄時刻,您才應該在群體中使用不同尺寸。
          ?混合尺寸并不常用。
          僅當選擇按鈕或需要添加含義或對比時才應使用不同的形狀。
          區當選擇這邊以而安添加古文現對比的才應使用個問的形狀。

           

          DM_20250701224752_007.PNG
          可以使用一組鏈接的按鈕在類似的操作之間切換。
          鏈接按鈕組可幫助用戶選擇選項、切換視圖或對齊頁面上的元素。它們的行為與標準按鈕組類似,但不
          會影響相鄰的按鈕。鏈接按鈕組應取代已棄用的分段按鈕。

           

          DM_20250701224752_008.PNG

          如果按鈕內容彼此關聯且可選,請使用鏈接按鈕組。在購物應用中,鏈接按鈕組用于選擇商品的容量,
          因此,密切相關的操作在鏈接按鈕組中效果更佳。

          DM_20250701224752_009.PNG
          使用一組鏈接按鈕來實現單選或多選模式。
          對于使用切換按鈕的單選或多選模式,應使用鏈接按鈕組。如果所有按鈕均不可切換,則不應使用鏈接
          按鈕組。

           

          DM_20250701224752_010.PNG

          一組鏈接按鈕被配置為填充其所在頁面或區域的寬度,這會導致內部按鈕的寬度也隨之增加。在寬屏
          上,建議設置最大寬度,以防止按鈕組過寬。

           

          DM_20250701224752_011.PNG
          可以根據窗口大小手動調整按鈕的寬度、大小和填充。
          按鈕組應在布局中移動到一行,并且不應換行。您可以垂直堆疊多個按鈕組,以使項目保持緊密排列,
          但按鈕組之間不能進行垂直交互。


          手動調整圖標按鈕的寬度時,避免將其拉伸得太寬。

           

          DM_20250701224752_012.PNG

          您還可以根據窗口大小手動調整一組按鈕的大小、形狀和填充。
          在小窗口中,最好使用較小、較窄的按鈕來容納按鈕組中的所有按鈕,而在較大的屏幕上,最好使用較
          大、較寬的按鈕來有效地填充可用空間。
          靈活按鈕或按鈕組會根據窗口大小自動調整其寬度。

          DM_20250701224752_013.PNG

          必須在布局和設備之間保持一致的層次結構。
          當窗口變大時,您應該利用顏色和大小等屬性來確保每個按鈕保持其視覺層次。例如,主要操作按鈕在
          所有窗口尺寸下都應保持最大、最寬且視覺上最突出。

           

          DM_20250701224752_014.PNG

          根據屏幕的大小,按鈕應該在榮單中隱藏或重新顯示。
          在小窗口中,您可以將按鈕組末尾的按鈕設置為折疊成榮單,然后在窗口大小增加時重新顯示。建議將
          榮單放置在按鈕組的末尾。按鈕組外部的按鈕不受按鈕組行為的影響。


          DM_20250701224752_015.PNG
          在標準組中,當您按下一個按鈕時,相鄰的按鈕也會改變寬度...
          按下按鈕時,其寬度和形狀會發生變化。在標準按鈕組中,按皮下按鈕也會影響相鄰按鈕的寬度。相比之
          下,在鏈接按鈕組中,只有按下的按鈕會改變形狀,其他按鈕丑不受影響。

           

          DM_20250701224752_016.PNG

          所選按鈕應改變形狀以實現視覺區分。
          選定的按鈕應從圓形變為方形,或從方形變為圓形。

           

          鏈接按鈕組和分段按鈕之間有什么區別?
          雖然兩者的功能相同,但可以說它們被納入了一個按鈕組,以實現富有表現力的交互。
          DM_20250701224752_017.PNG
          鏈接到現有分段按鈕的一組按鈕。
          分段按鈕也允許單選或多選,但其配置相對固定,并且視覺呈現受到限制。
          鏈接按鈕組在調整按鈕的大小、顏色和形狀方面提供了更大的靈活性,其視覺交互也得到了增強,例如
          根據選擇狀態改變形狀。按鈕以連接形式排列,并且只有選中的按鈕才會在視覺上突出顯示,從而提供
          清晰的反饋。
          Expressive在這種靈活性和表現力的基礎上,逐漸減少分段按鈕的的使用,轉而采用鏈接按鈕組作為替
          代。

          綜上所述
          DM_20250701224752_018.PNG
          按鈕組是實用的組件,能夠直觀地將相關操作分組,并為用戶提供清晰的上下文。它們旨在直觀地展示
          按鈕之間的關系,并根據屏幕尺寸或具體情況靈活操作,從而在不同界面上提供一致的體驗。標準按鈕
          組有利于實現交互和層級結構,而鏈接按鈕組則有利于清晰的選擇結構。然而,形狀、尺寸設置以及響
          應式設計需要精細的設計。
          Material3取代了現有的分段按鈕,并提出將一組按鈕作為獨立組件,以實現富有表現力的UI組合。
          這種設計超越了簡單的按鈕排列,全面考慮了交互、布局和層級,指明了提升整個產品一致性和可用性
          的方向。

           

          三維圖標設計寶典

          濤濤 圖標設計文章及欣賞

          ?“三維圖標設計寶典” 方法論,強調從前期構思(分析競品如馬蜂窩與本品飛豬的圖標類型、配色、風格及核心辨識點,通過關鍵詞腦暴鎖定 “品質、活力、青春” 方向并產出情緒版)、繪制圖標(具象功能、簡化結構、確定基本形,融入飛豬品牌超級符號,添加毛玻璃質感等細節)到走查圖標(從辨識度、統一性、美感度、差異化四方面檢查,如類型、風格、體量感統一,融入品牌符號增強差異化)的完整流程,助設計師提升過稿率。

          掌握這3個方法,新手也能做出精致的圖標設計

          lanlanwork

          你只需要做三件事情,就可以讓你做出足夠優秀的作品

          第一:找到合適的圖標素材

          第二:增強設計素材的統一性

          第三:給設計素材加入自己的想法

          我們這次做的圖標分別為:通知、商城、發現、我的。

          第一:找到合適的圖標素材

          我就拿最常用的阿里巴巴圖標庫,打開網址,找通知圖標,直接下載第一頁,第 1 排第 2 個:

          image.png

          接下來是商城圖標,繼續搜索商城,我們選用第一頁,第 2 排第 2 個:

          image.png

          相同的方式,我們找到以下四個圖標的原始素材:

          image.png

          這里面我們需要注意,在找素材的時候,你至少需要找到一兩個不太一樣的圖標,否則整體就會比較普通,我們現在這樣看上去,第四個“我的”圖標,相對來說不一樣一點,至少沒那么常見:

          image.png

          第二:增強設計素材的統一性

          有了素材之后,我們首先要讓他們看起來是一套的,所以在統一性上需要優化,先優化大小和線條粗細:

          image.png

          大小和粗細優化完之后,我們再優化下圓角統一性,現在很明顯,只有第二個圖標是圓潤的,其他的都是有點硬朗的,可以進行統一下:

          image.png

          直角圓角統一了之后,還有一個統一性就是斷線,只有第二個沒有斷開的設計,所以我們再把商城進行斷線處理:

          image.png

          第三:給設計素材加入自己的想法

          大家要明白,雖然我們可以直接下載圖標素材,而且可以通過審美讓他們變得相對精致統一,但素材畢竟還是通用的,我們還是需要融入自己的想法和設計,不能完全依賴素材,舉一個最簡單的例子,“我的”這個圖標,他的腦袋是圓形的,那我們是不是可以把他改成矩形的?

          image.png

          比如一些細節的調整,像通知圖標,感覺有點禿,是不是可以讓中間伸出一點寬度來:

          image.png

          細微調整之后,如果覺得還不夠,我們還可以繼續添加新的設計語言,比如增加配色點綴:

          image.png

          就這樣,這幾個圖標,漸漸的就成為了你自己的作品!

          我們在放適當的包裝一下:

          image.png

          我們再對比一下原始的素材:

          image.png

          效果還是提升很大的!

          所以,做任何事情,一定要講究方法,不能死腦筋,否則進步就很慢。

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

           

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

           

           

          應用圖標 | 全面解析,助力設計出更優質的應用圖標!

          杰睿

          編輯導語:各大APP的圖標都各有特點,圖標的設計也是一門學問。在這篇文章中,作者全面解析了各類APP圖標設計背后的用意,一起學習一下吧。

          如果說一個人的臉面、衣著打扮是給陌生人的第一印象,那么APP的應用圖標風格與氣質就是留給新用戶的第一印象,關系著用戶是否對這個APP感興趣、是否會打開應用介紹、是否會點擊下載按鈕起著決定性的作用。

          一個好的應用圖標有著無限可能,無形中對用戶產生強大的吸引力,并有一種想要了解的沖動,況且圖形本身就能讓人充分發揮想象力,這就是為什么不管在哪個應用市場第一眼看到的是應用圖標,而非應用名稱。

          在一部手機就能解決很多問題的互聯網時代,相信每個人都有下載幾十上百個APP,琳瑯滿目的列表,應用圖標是否能在第一時間抓住用戶眼球(目標明確或鐵粉除外)非常重要,一個視覺傳達清晰且有吸引力的圖標能提升用戶點擊率,即便用戶只使用過一次,相對來說,印象也會更深刻。

          本文根據筆者對大量應用圖標的分析、結合設計準則進行總結,希望能幫助大家在設計過程中規避掉一些常見的問題,歡迎一起探討、取長補短、共同進步。

          分享目錄

          1. 四大設計原則
          2. 色彩的表現形式
          3. 主體圖形分類
          4. 背景圖案及元素
          5. 主體圖形的表現手法
          6. 應用圖標設計流程
          7. 總結

          一、四大設計原則

          應用圖標代表產品的外在形象,設計的精美與否決定著用戶的第一印象,是否產生打開的欲望跟當前圖標的視覺所傳達的內涵有最直接的關系。應用圖標雖然不同于設計LOGO,表現方式也千變萬化,但必定有自身的設計準則要去遵守,利用設計的手段將視覺傳播的價值最大化。

          1. 可識別性

          首先,應用圖標需要盡量簡約。過于復雜的圖標會增加用戶的理解成本、甚至誤導用戶,但如果過于追求簡約,缺乏細節、個性化以及必要的隱喻信息,也會因過于單調,造成表意不明確等問題。

          簡約并非簡單,設計師需要通過專業的知識進行合理的簡化,以提升應用圖標的設計品質,方便用戶在不同場景中都能清晰的辨認。其次,需表意明確、易于理解。

          應用圖標代表的是產品的行業屬性、功能作用或與眾不同的優勢,要讓用戶第一眼就能識別出所代表的含義,貼近用戶的心理預期。

          簡約易識別是應用圖標必備的基礎屬性之一,這也是為什么大部分產品都將logo作為應用圖標主視覺的原因,因為logo設計考慮到了方方面面以及后續延展的問題,即便有些logo較為復雜,也會通過提取局部元素、吉祥物、主體色等方式來強化應用圖標屬性,給用戶形成獨特的記憶,以提升應用的下載量和使用率。

          2. 關聯性

          應用圖標應該與產品的屬性、品牌有極強的關聯性,通過品牌延展賦予產品更強的生命力,讓用戶從接觸應用圖標的第一眼開始、再到后面的使用,整個過程始終都能保持清晰且統一的品牌認知,通過和諧統一的視覺效果,帶來更好的用戶體驗。

          應用圖標需要與品牌之間必須保持高度的一致,著重從以下幾點體現:

          1)LOGO

          毫無疑問,用品牌logo作為主體圖形是最佳選擇,結合品牌色搭配使用,能將產品核心理念、品牌形象的傳播效果達到極致,在APP應用市場中,大家會發現大多數產品都在使用logo作為應用圖標的主視覺圖形。

          2)品牌色

          品牌色即主體色,將貫穿APP所有頁面的元素組件。眾所周知,每種顏色都有其特定的含義,能傳遞給用戶不同的心理感受。用主體色作為應用圖標的背景色,可以烘托出產品的情感氛圍,并與進入應用后的主體色遙相呼應,以最小的視覺跳躍性將前后關聯,強化用戶對產品的記憶感知。

          3)IP/吉祥物

          吉祥物屬于品牌logo延展的一部分, 也是產品的靈魂。當logo較為復雜時,因移動設備應用圖標位置空間有限,logo細節無法在短時間被用戶捕捉,不宜展示時,使用IP/吉祥物或其局部元素代替也是不錯的選擇。

          4)產品名稱

          如果說logo是產品的臉面,通過暗示和隱喻給用戶無限遐想并讓用戶記住它的樣子,那么名稱的出現就相當于產品主動進行了自我介紹,并讓用戶知道如何稱呼它。

          將產品名稱作為應用圖標需謹慎使用:首先,文字傳達的信息量有限:其次,用戶對于圖形的理解效率要優于文字;再者,應用圖標都會有對應的產品名稱展示(應用市場在右、桌面在下方),多少有些信息重復。

          所以大家見到的應用圖標主體是產品名稱的不外乎兩種情況,一種是產品本身將名稱設計成字體logo,例如美團、懶飯;另一種是將產品名稱作為logo的輔助信息提示,例如繽紛生活。

          以上是應用圖標與品牌屬性關聯最常見的四種方式,在設計中可靈活搭配,使用兩種及以上的方式組合,能將品牌傳播的途徑發揮到最大值。

          3. 差異化

          筆者上小學時,曾經在一次彩鉛繪畫作業中得到了老師的真心夸贊,但內心卻備受打擊。老師對著我畫的桃子說“這西紅柿畫的太像了”。

          舉這個例子似乎并不恰當,但結果是驚人的相似,筆者想要陳述的一個觀點是,不要讓你辛苦做出的設計成為別人的嫁衣,讓用戶誤以為這是其他企業的“某某某…”產品。

          目前,應用市場中的APP數量巨大,且還處于增長的趨勢,同行業的圖標設計同質化相當嚴重。想要讓自身產品應用圖標脫穎而出,就有必要在設計之前做好競品分析,借鑒競品的優點,在突出自身產品核心特征、屬性的基礎上,還要用不同的表現手法突出其差異性,給用戶留下獨特的印象,避免同質化。

          4. 可用性

          應用圖標在設計完成之后(測試小組)、上線后(用戶反饋)進行可用性測試,主要針對圖標對用戶的吸引力、識別度等問題作進一步優化,以確保圖標在不同場景中都能被用戶清晰識別并提升印象。

          雖然可用性測試存在設計之后,但這一環節至關重要,它決定著產品的下載量以及使用率。

          二、圖標顏色的表現形式

          1. 單色圖標

          單色圖標通常以品牌色作為背景色、logo以反白的形式呈現,既能突出品牌色、還能用于烘托主體圖形,不過這種方式僅適合色值單一的logo,多色值可能會與背景色產生融合或色彩反差太大影響視覺傳達效果。另外,如果logo視覺重量較大,也可使用白色背景+原品牌色logo,這樣會更直觀。

          單色應用圖標雖然色彩比較單一、表現形式也受到局限,但視覺清晰、簡潔且識別性強,如果能運用其他設計手法豐富圖標細節就再好不過了。

          2. 多色圖標

          多色圖標使用了兩種及以上的顏色,更多是直接使原多色彩的logo圖形+白色背景,無需任何加工,控制好尺寸規范就行。如果是運營推廣所需,如春節、618、雙11等活動,會對應用圖標加以其他色彩烘托、點綴元素或標簽等,色彩就會更多,但一般都具有時效性,活動過期即圖標復原。

          多色圖標的細節、層次更加豐富,設計時確保各色彩搭配協調,一旦因色彩過多造成視覺混亂,就得不償失了。

          3. 漸變圖標

          無論是單色還是多色,添加漸變會讓應用圖標更加細膩、耐看。漸變的表現手法應用廣泛,簡單的漸變能讓圖標細節豐富,同時也具備空間感和微立體感。

          設計漸變色圖標需注意圖形銜接處的對比度,花里胡哨的漸變色會拉低品質感,要確保色彩的和諧,讓圖標視覺清晰且容易識別。

          4. 顏色疊加

          單色、多色或是漸變都可通過調整不透明度、圖層疊加的方式來豐富應用圖標細節,相比純粹的漸變,立體感和空間感更強。使用顏色疊加需注意色彩對比及明暗關系,否則會衍生出臟亂的顏色。

          5. 色環的運用

          環形構圖為主,由多個元素復制并以統一的中心點、旋轉角度,旋轉衍生出一個主體圖形。這種應用圖標的設計構圖飽滿、色彩豐富,能給用戶傳遞出輕松愉快的視覺體驗。

          需要注意的是,由于顏色較多,至少在三種顏色及以上,否則無法構成色環類的主體圖形(錯覺)。如果沒有超強的配色功底,最好按照色環的順序依次取色,即便沒有太大的優勢,但至少不會出錯。

          三、主體圖形的分類

          一個好的應用圖標應該是多元素、多信息結合運用,才能達到更好的效果。雖然大部分主體圖形使用了logo,但并不影響設計師們對其進行拆解,提取局部元素、色彩、名稱等信息進行二次創作,從原則上來說,是一次線上logo的設計。

          應用圖標種類繁多,切不可盲目跟風,需經過認真的分析、研究,找到最適合自身產品的才是最重要的,且每種類型并非獨立,在條件允許的情況下還能跨類型靈活搭配、相互組合。

          1. 中文字體

          1)單中文字體

          僅次于圖形logo的表現方式,通常會在產品名稱中提取一個具有代表性的文字對筆畫、結構等進行再設計。基于國人文化的優勢以及對漢字的敏感度,既能降低用戶對應用圖標的認知成本、還能根據產品特性設計出差異化的視覺效果。

          不過因為文字筆畫的原因,單個文字提取難度較大,避免信息傳遞有誤或影響識別度,建議選擇筆畫較少且具有特性/代表性的文字,若達不到條件,最好選擇其他表現方式。

          2)多中文字體

          使用兩個及以上漢字,大多直接將產品名稱用在圖當中,對用戶來說更容易記憶,有利于品牌推廣。相比單字體,設計感會受到一定的局限,不宜做過于夸張的表現方式,因文字較多,設計時一定要注意文字的協調與可讀性。

          多文字圖標建議將字數控制在2~6個范圍內,3字以內一行顯示,超過3字即兩行顯示且最多不超過兩行,否則會影響圖標的識別效果。

          3)中文、圖形組合

          適當添加帶有產品特性的輔助圖形,用引導或指向性的方式對文字進行強調,圖標細節會更豐富,可以突出產品想要傳達的信息、以及不同的氣質,還能增加圖標的形式感和趣味性。注意添加的圖形不要過于復雜,不然會讓信息混亂,適得其反。

          4)中文圖形化

          根據單個字體筆畫的特點進行巧妙的變形或延展,會讓你的應用圖標更具設計感、品質好。這種方式對設計功底的要求較高,需要確保字體的識別度,切勿霸王硬上弓,如果是為了設計而設計,就違背的信息傳播的初衷。

          5)中文、IP形象組合

          由產品名稱和IP形象組合而成,這種方式能通過品牌IP不同的視覺形象帶給用戶情感化的體驗,讓產品更具親和力,拉近與用戶之間的關系。例如,IP的喜、怒、哀、樂表情變化分別對應用戶不同的心理感受,以加深用戶對產品的印象及品牌認知。

          2. 英文字體

          1)單英文字體

          單英文字體通常是提取產品名稱拼音首字母或英文首字母進行創意設計,跟中文字體相比,基于字母本身線條的簡潔及流暢性,再結合產品特點,很容易設計出兼具美感、高識別度的應用圖標。

          需要明確一點,不管如何創意,也僅局限于在26個英文字母中選擇,如果想設計出差異化的應用圖標,對設計師來說,是一個很大的挑戰。

          2)多英文字體

          跟多中文不同,中文產品名稱在移動端基本不會超出6個字,而全拼音或英文名則多達十幾位甚至更多,為了用戶能更好容易識別、記憶,依然是提取不同拼音或單詞的首字母(中文全稱)進行設計。

          多英文的應用圖標很很容易形成獨有的產品簡稱,更利于用戶記憶,但字母一定不要過多,如果無法刪減,那就只突出特定的2~4個字母。

          3)其他類型

          字母與圖形、IP形象組合以及字母圖形化,其表現方式、設計原則與中文字體圖標類似,這里不做過多闡述。

          3. 數字符號

          1)數字設計

          人們對于數字來說是非常敏感的,不存在文化差異或認知誤區,基于數字便于記憶且容易識別的特點,將數字圖形化后應用到圖標當中,會讓產品具有親和力,有利于品牌傳播。單純的數字過于簡單,需增加一些細節,豐富圖標層次,讓其具備獨特的記憶點,不然會顯得單調。

          2)符號設計

          每個符號都有特定的含義,因此,在選擇符號作為應用圖標之前,首先需要了解清楚該符號是否能體現出產品屬性以及想要表達的意思,例如“¥”適合攢錢、理財相關的應用,而“+-×÷”則適合用于計算器或數學相關的應用;其次,符號跟數字一樣,都比較簡單,需經過二次創作后才會使用。

          4. 扁平化圖形

          1)線性圖形

          線性風格的應用圖標能給人一種簡潔輕快的感覺,設計師通過提取產品的品牌信息、功能服務等進行創意設計,將得到的關鍵詞以一條或多條線段組成高度抽象的圖形來達到信息傳播的目的。

          通常以反白的形式出現,背景可以是單色、漸變色或加以輔助圖形點綴。

          線性圖形非常適合文藝類簡約風格的應用,通過不同的線條帶給用戶不同的心理感受,例如直線代表大方、專業、正直;斜線代表張力、速度;曲線代表流暢、飄逸及柔軟等。

          設計時,切記圖形不能過于復雜,否則會影響其辨識度,增加用戶的認知成本,也不利于品牌推廣。

          2)面性圖形

          也可稱之為剪影圖形,根據產品屬性,將日常生活中被大眾所熟知的動物、植物、食品、工具、玩具…等事物進行簡化,通過刻畫事物的造型輪廓來形成獨立的剪影圖形。

          高識別度的剪影圖形會讓整體看起來非常醒目,提高信息傳播的效率,只要控制好造型,即便把圖標縮到很小也能清晰辨認。

          因現實世界中事務的復雜性,被提煉出的圖形如果細節過多會顯的復雜且不夠干練、細節過少則難以辨認,所以需要對圖形進行創意加工,最終以確保應用圖標的功能和美感兼具。

          3)幾何圖形

          幾何圖形在應用圖標中使用的很廣泛,可以是線性或面性,表現形式也非常豐富,利用幾何圖形通過單獨、組合、布爾運算等方式形成簡單且個性化的創意圖形,帶給用戶簡約、現代、空間、熱鬧等不同的心理感受。

          幾何圖形構圖簡潔,設計形式豐富多樣,想設計出具備設計感和差異化的應用圖標,很考驗設計師的創意能力。

          5. 卡通形象

          對純色剪影圖形增加太多細節,無疑是將其“大卸八塊”,變成一堆零件,但通過多色、漸變、圖層樣式等表現手法設計成卡通形象,就完全不一樣了。

          卡通形象能體現出產品的生命力、親和力,以及直觀且易于理解和記憶的特質,對品牌形象的塑造、傳播起到了很好作用。

          在畫卡通形象時,需要注意產品主用戶群體的年齡段,切勿一開始就把活潑可愛作為卡通形象的代名詞,避免絕對低齡化的表達,同時需要設計師有一定的繪畫功底。

          6. 擬人化

          利用人體的局部元素,如眼睛、嘴巴、手足、頭部等,再結合常見的表情動作進行圖形化設計,相當于給原本冷冰冰的圖形賦予了生命力,傳達出不一樣的情感,而且用戶原本就對人體元素敏感度更高,更容易打動用戶并形成較強的記憶。

          擬人化的應用圖標會顯得親民,便于拉近與用戶之間的關系,適度在抽象的圖形上加入情感化(動作/表情)表達,能生動、形象的體現出產品獨有的特性。

          如果想要較強的視覺沖擊力,建議元素不要過多,最好是對某個單一的元素作放大或特寫處理,讓用戶看到更多的細節,也可用夸張、比喻、襯托等表現手法強化特點。

          7. 擬物化

          擬物化圖標使用的比較少,它更偏向于某種行業類型,例如工具、游戲類型的應用,通過超接近于現實世界中的物體造型,基本不需要用戶思考,一眼就能理解,但也正因為這種特性,信息量的傳播受到很大局限,僅適合單一且大眾化的信息傳達。

          在如今,想同時融入行業、屬性、品牌等多元化內容的信息化時代,顯然不太實用了。

          四、背景圖案及元素

          1. 圖形背景

          應用圖標背景通常以單色、漸變色居多,除此之外,還可以添加與主體圖形相呼應的輔助圖形背景,以豐富圖標的視覺層次。圖形背景一定是為襯托或突出主體圖形的輔助存在,切勿過分表達,以免喧賓奪主。

          2. 炫彩背景

          當主體圖形的結構、色彩不是很復雜,且產品面對的是年輕化用戶群體時,可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設計出炫彩效果,色彩表現豐富的應用圖標,能帶給用戶更強的視覺沖擊力。色彩可多但不可亂,需要把控好色彩之間的對比關系。

          3. 運營標簽

          常見于在特定的節日中,例如618、雙11、雙12及傳統節日等,產品會存在促銷、打折活動,為了更早的讓用戶知道,會在應用圖標的某個區域以標簽的方式出現,起到引導用戶的作用。

          不過這種表現方式具有時效性,活動截止即圖標樣式復原。

          4. 節日氛圍

          通過配色或節日相關的元素點綴,營造出一種感同身受的節日氛圍。例如:春節期間,部分應用圖標背景會調整為紅色,并使用燈籠、煙花、文案等元素點綴,制造出普天同慶、與用戶同樂的喜慶感,或者在高考期間鼓勵學生,少了套路、多了真誠,給用戶留下較深的印象。

          五、主體圖形的表現手法

          1. 對比

          通過元素的大小、長短、虛實、稀疏、方向以及不同的色彩、明暗關系等方式進行對比,形成強烈的反差效果,同時兼具張力和美感,這也是應用圖標設計中很常見的技法表現之一。

          2. 對稱

          對稱在自然界中隨處可見,在互聯網設計中也是如此,應用圖標中的主體圖形以對稱的方式呈現,能給用戶平衡、和諧的感覺,也讓圖標更具有觀賞性。

          3. 分割

          將應用圖標中的主體圖形分割,賦予不同的顏色、樣式等,明確層級劃分,可提升圖標的美感。例如:將色塊分割成不同的比例、形狀,就能組合成一個完整的熊貓圖形(百度搜“熊貓剪影”圖片)。

          如果適合使用0.168黃金比例分割就再好不過了,這是被公認為最具美感的比例。

          4. 重復

          將相同或相近的圖形以某種規律連續性的排列,相比單調的圖形,會更加飽滿。重復性的表現手法以大小、色彩、位置、形狀等作為出發點進行有序的排列,最終形成一種規律、整齊的節奏和藝術感。

          需要注意的是基礎圖形不能過于復雜,一定是有規律的重復,否則會讓圖形變的混亂,無法形成整體。

          5. 重疊

          在保證識別度清晰的前提下,將兩個或以上的元素相互重疊、交叉在一起,能形成前后左右的層級關系,制造空間感,同時也能將多個圖形關聯在一起,避免圖標元素零散或單調,讓整體性更強,豐富用戶視覺感知。

          6. 正負形

          正負形也是常見的表現手法之一,利用正圖為底,通過減去底層挖空的方式突出(錯覺)負形,將產品特征、屬性及服務多途徑的傳達給用戶,可謂是“一石二鳥”。

          正負形圖標能將信息傳播最大化,且設計感十足,好的正負形圖標能給用戶形成獨特的記憶點,但設計時需要注意正、負銜接的順暢度,否則無法清晰的傳播信息。

          六、應用圖標設計流程

          1. 發散思維、尋找隱喻

          通過產品屬性、功能或特點進行思維發散,例如:夏天,我們會想到空調、海灘、冰淇淋、比基尼、裙子(女性)、夜空等一系列相關聯的事和物,搜集起來并做好整理歸類,確定大致的設計方向。

          2. 分析競品、避免同質化

          確定了大致的設計方向,就去找同行業、同類型或相似的應用圖標分析其形狀、配色、組合類型等,取長補短,這也是避免同質化非常重要的一個環節,幫助自己在后續設計出具備差異化的應用圖標做鋪墊。

          3. 提取關鍵詞

          可以從產品名稱或功能屬性方面找出產品最想傳達的核心信息,并提煉出關鍵詞。切記,關鍵詞不可脫離帶水、表意不明確,一定要夠精煉、能表達出核心內容。關鍵詞在精不在多,如果太多,需要通過層層遞進,篩選出“一主三輔”,要知道這關系著后續應用圖標傳達信息的精準度。

          4. 圖標繪制

          將上一步得到的關鍵詞轉化成抽象圖形,進行視覺化提煉,這時應用圖標的雛形已經形成,再結合前面所提到的圖形分類、表現手法以及注意事項等,進入圖標繪制流程。關于圖標設計規范及原則,在之前的《圖標篇 | 圖標設計必備的基礎知識!》文章中有詳細說明,這里不做闡述。

          5. 細節處理

          基本圖形繪制完成后,通過添加點綴、輔助圖形、背景處理等方式豐富圖標細節,進行精細化處理,使其更精致,具備高識別度及品質感。

          6. 適用性測試

          分別通過移動端應用商店列表、應用詳情、設置中應用列表、桌面以及WEB商店等,對不同位置的大小、不同的桌面背景進行虛擬測試,以確保在不同場景中都能被用戶高度識別,如果這些問題等著被用戶發現,很可能給產品帶來不利的影響。

          7. 輸出切圖

          需要對iOS和Android系統各輸出一套圖標,iOS只需一個1024px的切圖便能適配所有,且無需設定圓角。Android則需要多套切圖規范,如512px、198px、144px、96px、72px、48px,圓角半徑以512px為基準設定為90px(參考值)。

          這些固定的尺寸規范并不在技術能力范疇,如果實在不清楚,需要用時就“百度一下”一大把,或直接找開發人員拿尺寸都不是難事。

          七、總結

          首先,筆者要感謝耐心看到這里的小伙伴,希望總結的內容能幫到大家,在前期設計中作為資料參考,避免出現常見的問題,防止進入誤區。

          其次,要想設計出優秀的應用圖標僅看上述內容是遠遠不夠的,少不了平時的多看、多練、多思考,需日積月累,逐漸提升自己的視覺審美、造型提煉、執行效率等多方面設計能力。

          應用圖標的總結分享就到這里了,對你有幫助的話就給筆者點個贊吧,如果有不同意見,歡迎在評論區交流或指正,以便查漏補缺,共同進步。

          #專欄作家#

          大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

          本文原創發布于人人都是產品經理,未經許可,禁止轉載

          題圖來自Unsplash,基于 CC0 協議

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          扁平化設計終結?新趨勢來了?

          杰睿

          扁平化設計這一趨勢已經流行了挺長時間,而現在,設計風向似乎要有所轉變了,這或許可以從一些設計案例中透露出來。這篇文章里,作者就從案例出發,展示了設計趨勢的演變,一起來看看吧。

          設計趨勢來來去去,但一個普遍的趨勢已經流行了很長時間,那就是扁平化設計,現在也幾乎是無處不在,UI中的按鈕,Logo,圖形設計等等。

          最近感覺設計風向有點變啊,我碰到幾個例子感覺挺有意思的,似乎是印證了這波轉變。

          在這篇文章里,我主要聚焦在UI設計領域,看看設計趨勢在這方面都經歷了哪些變化。

          一、扁平化設計趨勢是怎么興起的?

          2013 年蘋果推出 iOS 7 后,扁平化設計火得一塌糊涂,界面設計方向一夜之間發生了轉變。雖然蘋果也是借鑒了其他制造商已經應用的元素,但其作為行業風向標的影響力依然無人能及。

          從擬物到扁平,iOS 7 帶來了革命性的設計語言飛躍,顛覆了之前 iOS 的視覺風格。蒂姆·庫克將其稱為 “iPhone 以來 iOS 最大的變革”。

          看上圖就一目了然(iOS 6 左,iOS 7 右),iOS 7 砍掉了許多元素的 3D 效果,整體扁平了很多。其實改成這樣是有道理的,畢竟擬物設計當初是為了讓用戶更快上手新界面,現在大家都習慣了,設計語言也需要更新迭代了。

          十年過去了,絕大部分現代界面設計依然在用這種設計語言。然而,隨著設計逐漸追求更多復雜性和立體感(是的,又是3D,回到擬物設計),一些方面也開始出現變化。讓我們來看看幾個近期的例子。

          值得說的是,盡管蘋果公司在引領扁平化設計趨勢方面發揮了重要作用,但其實靈感還是來自Windows Mobile 和 Android 等產品。Windows Mobile 才是先在主流制造商中第一個用扁平化設計的大廠。

          對這段歷史感興趣的可以看看這篇10年前寫的文章:https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences

          二、Reddit 品牌設計刷新

          先一起看看最近的一個大廠設計改版案例,Reddit最近刷新了它的Logo。你能從上面的圖中看到,相比于舊版,新的設計有了一些3D風格化。

          一直以來,扁平化logo是主流,但隨著像Pentagram這樣的設計大廠都開始探索3D化設計風格,預示著扁平化的時代就快要過去了。

          現代的品牌logo設計大多是扁平的,因為這樣既清晰易讀又方便調整大小。真想看看其他公司接下來會怎么玩品牌設計。

          三、MacOS Big Sur 圖標

          回到2020年,在那年的11月,蘋果刷新了它們的MacOS圖標風格。我個人認為,這是在細節設計上搭配更多3D效果這股趨勢的源頭,我在網上看到了很多這樣的討論。

          從 Big Sur 開始,蘋果就在圖標上下功夫,給原生應用圖標加料,讓它們看起來不那么乏味。你看上面那些,陰影也深了,漸變也多了,整個圖標更有立體感。

          一看蘋果都整 3D 了,不少第三方應用開發商也坐不住了,紛紛改起了自家圖標,看起來更立體了。

          蘋果在界面設計上向來引領潮流,這次的新趨勢,又不知道多少公司和個人會跟著玩。

          四、Airbnb 新版本設計

          Airbnb在最近的夏冬主題設計更新里,玩了不少 3D 和復雜設計。就拿它們新出的“游客護照”來說吧,圖標就跟真“書”似的,點開交互還有翻書動畫,賊逼真。

          游客護照打開后,頂部卡片加了陰影,看著更有立體感,一點都不扁了。

          Airbnb 在其他地方也玩兒 3D 了,比如“最受歡迎”那個地方,評分都立體起來了,還有那個改版后的“選月份”的按鈕,做得跟真表盤似的。

          最后,他們冬天的新版本里,插畫也搞起了等角投影風格,給你們看下面他們那個新版本宣傳片就知道了。

          五、Shopify更新了設計系統

          Shopify 對深受好評的設計系統 Polaris 進行了重大更新,換了套新花樣!以前那些扁平的按鈕,現在縮小了,還更帶感了,按著賊舒服。

          這次重設計也不是瞎改,當初設計團隊說扁平化做能讓界面干凈,理解簡單,用著還效率高??蓵r間一長,商家們就不樂意了,說這界面整得“沒勁”、“乏味”還“單調”。

          改設計主要是為了把軟件界面打造成 “專業工具”,更加高大上。改動之后,按鈕在點擊時更爽了一些,就像商家們平時在用的物理按鍵一般。

          探索的2種不同設計風格

          總結

          上面這些案例展示了現代設計趨勢的演變,從扁平化設計向更加注重細節的方向過渡。

          扁平化設計固然擁有清晰高效等優點,但現代設計更傾向于展現層次和深度。設計師和開發者應當密切關注這一趨勢,并做好準備將相關元素融入自身系統,尤其是在大型品牌和產品中逐漸成為趨勢的情況下。

          設計趨勢真是一個輪回。

          原文作者:Chan Karunaratne(本文翻譯已獲得作者的正式授權)

          譯者:彩云Sky,人人都是產品經理專欄作家,騰訊高級視覺設計師。

          本文由@彩云sky 翻譯發布于人人都是產品經理,未經許可,禁止轉載

          題圖來自 Unsplash,基于 CC0 協議

          該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          創造出眾的UI圖標:點亮你的界面

          杰睿

          在做產品設計的時候,UI界面更多是由設計師完成,產品僅是提供界面元素和布置,其他的由設計師發揮。但如果產品能了解更多設計相關的知識,在和設計師探討、分析時會更有針對性,也會讓產品的工作顯得更為專業。

          在當今數字化時代,我們與各種移動應用、網頁和軟件界面打交道,圖標就像是這些界面的明星。它們小巧玲瓏、獨具特色,扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標的定義、作用以及在用戶界面中的重要性。

          一、UI圖標的定義和作用

          A. UI圖標的定義

          UI圖標是指用簡潔明了的小型圖形符號來表示特定功能、操作或信息的設計元素。圖標通過簡單的形狀和圖像,向用戶傳遞信息和功能,并在界面中起到重要的導航和標識作用。

          B. UI圖標的作用

          • 提供快速識別:UI圖標能夠以簡單直觀的方式展示功能和操作,使用戶迅速識別界面元素,快速完成操作。
          • 提升用戶體驗:UI圖標能夠使界面更加直觀、友好和易于使用,用戶無需過多猜測,更加自信地與界面互動。
          • 增加品牌識別度:UI圖標承載著品牌形象,設計合理的圖標能夠提升品牌的識別度和記憶性,促進用戶與品牌的情感連接。

          C. UI圖標在用戶界面中的重要性

          UI圖標在用戶界面設計中扮演著不可或缺的角色,其重要性體現在以下幾個方面:

          • 導航和標識功能:UI圖標通過視覺上的差異化,幫助用戶快速識別和定位所需的功能模塊,提供直觀導航,減少操作復雜度。
          • 美觀和統一性:精心設計的UI圖標能夠增加界面的美感,提升用戶體驗。通過一致性的圖標設計,整個界面呈現出協調統一的視覺效果。
          • 信息傳遞效果:UI圖標通過形狀、顏色和圖像等視覺元素,能夠傳達具體的信息和功能,使用戶更容易理解界面的意圖和操作方式。
          • 增強品牌形象:UI圖標能夠將品牌形象融入到界面中,形成獨特的品牌風格和個性,幫助品牌建立與用戶的情感聯系。

          二、設計原則和要素

          UI圖標設計是用戶界面的重要組成部分,它們不僅可以幫助用戶更快地理解和使用應用程序或網站,還可以增強整體視覺效果。為了設計出高質量的UI圖標,設計師需要遵循一些基本原則和要素。

          A. 獨特性和可識別性

          設計具有獨特特征的圖標 UI圖標應該具有獨特的特征,使其能夠與其他圖標區分開來。設計師可以通過使用不同的形狀、顏色和風格來實現這一目標。同時,圖標的形狀和顏色也應該與應用程序或網站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標的功能和意義。

          避免與其他圖標混淆 為了避免UI圖標與其他圖標混淆,設計師應該確保圖標的形狀、顏色和風格與其他圖標有足夠的區別。如果圖標的形狀和顏色與其他圖標過于相似,用戶可能會難以區分它們的功能和意義,從而影響用戶的使用體驗。

          B. 簡潔性和清晰性

          追求簡潔的圖標設計 簡潔的圖標設計可以幫助用戶更快地理解和使用圖標。設計師應該盡可能地簡化圖標的形狀和顏色,避免使用過多的細節和復雜的形狀。簡潔的圖標設計還可以幫助應用程序或網站的整體視覺效果更加統一和和諧。

          避免過度復雜化的細節 過度復雜化的細節可能會使圖標變得過于復雜和難以理解。設計師應該避免使用過多的細節和復雜的形狀,以確保圖標的簡潔性和清晰性。同時,設計師也應該確保圖標的形狀和顏色足夠明確,以便用戶能夠輕松地識別和理解圖標的功能和意義。

          C. 一致性和統一性

          維護整個UI界面的一致性風格 UI圖標應該與整個UI界面的風格保持一致。設計師應該確保圖標的形狀、顏色和風格與應用程序或網站的主題和品牌形象相一致。這樣可以幫助用戶更快地識別和理解圖標的功能和意義,同時也可以增強應用程序或網站的整體視覺效果。

          使用相似的線條、顏色和風格 為了實現一致性和統一性,設計師應該使用相似的線條、顏色和風格來設計圖標。這樣可以使圖標與整個UI界面的風格保持一致,同時也可以使圖標的形狀和顏色更加和諧統一。

          D. 可視化傳達

          明確圖標所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標,設計師應該確保圖標的形狀和顏色能夠明確地傳達

          使用適當的形狀、符號和顏色傳達信息 為了確保圖標能夠明確地傳達信息,設計師應該使用適當的形狀、符號和顏色。

          例如,一個圖標可能需要使用一個圓形作為基本形狀,同時使用一個代表性的符號來表示它的功能和意義。

          同時,設計師也應該確保圖標的形狀和顏色與應用程序或網站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標的功能和意義。

          E. 可縮放性和適應性

          使用矢量圖形實現圖標的可縮放性 為了確保圖標在不同屏幕和設備上的可用性,設計師應該使用矢量圖形來實現圖標的可縮放性。

          矢量圖形是一種基于數學公式的圖形,它們可以在不失真的情況下進行任意大小的縮放。

          這意味著:即使圖標被放大或縮小,它們的形狀和顏色也不會發生變化。

          確保在不同屏幕和設備上的可用性 為了確保圖標在不同屏幕和設備上的可用性,設計師應該考慮圖標在不同分辨率和屏幕尺寸下的表現。

          例如,設計師應該確保圖標的大小和形狀適合不同屏幕和設備的顯示。

          同時,設計師也應該確保圖標的顏色在不同的屏幕和設備上都能夠保持一致,以幫助用戶更快地識別和理解圖標的功能和意義。

          三、設計流程和技巧

          UI圖標設計需要遵循一定的流程和技巧,以確保圖標的高質量和可用性。

          以下是一些常用的設計流程和技巧:

          A. 需求分析和功能定義

          在開始設計之前,設計師需要了解UI圖標的使用場景和目的。這可以幫助設計師確定圖標所代表的含義和功能,以確保圖標的準確性和可用性。

          B. 創意和草圖階段

          在進行創意和草圖階段,設計師應該進行創意思維和頭腦風暴,以產生出多種不同的設計方案。同時,設計師也應該從簡單的草圖開始構思圖標設計,以確保圖標的可行性和可實現性。

          C. 細化和完善設計

          在細化和完善設計階段,設計師應該使用矢量工具進行圖標設計,并重點關注細節和清晰度的提升。這可以幫助設計師創建出具有獨特特征的圖標,并確保圖標的可縮放性和適應性。

          D. 反饋和優化

          在反饋和優化階段,設計師應該向用戶和團隊收集反饋,并根據反饋進行圖標的優化和調整。這可以幫助設計師確保圖標的準確性和可用性,并根據用戶的需求和期望進行調整和優化。

          四、設計最佳實踐和案例研究

          UI圖標設計是一個重要的設計領域,它可以幫助用戶更快地理解和使用應用程序或網站。以下是一些成功的UI圖標設計案例和分析。

          A. 探索成功的UI圖標設計案例

          成功的UI圖標設計案例可以幫助設計師了解和學習一些設計最佳實踐和技巧。成功的圖標有很多以下只列舉兩個圖標設計案例:

          1. Airbnb圖標:Airbnb是一個在線旅行房屋租賃平臺,它的圖標設計非常簡潔和具有代表性。Airbnb的圖標設計使用了一個圓形的形狀,并使用了一個代表性的符號來表示它的功能和意義。同時,Airbnb的圖標設計也非常簡潔,它只使用了少量的顏色和形狀,這使得圖標非常易于理解和使用。
          2. Apple的App Store圖標:Apple的App Store圖標采用了一個簡單明了的大字母”A”,代表了應用程序。這個圖標的設計借鑒了蘋果公司的品牌風格,采用了簡潔、現代的風格,使其在界面中易于辨認。

          B. 分析圖標設計背后的原理和決策

          成功的UI圖標設計案例背后都有一些共同的原理和決策。

          以下是一些分析圖標設計背后的原理和決策的方法:

          • 了解用戶的需求和期望:設計師應該了解用戶的需求和期望,并根據用戶的需求和期望進行圖標設計。這可以幫助設計師創建出更加符合用戶需求和期望的圖標,從而提高圖標的可用性和易用性。
          • 遵循一致性和統一性原則:設計師應該遵循一致性和統一性原則,使用相似的線條、顏色和風格來設計圖標。這可以幫助設計師創建出具有一致性和統一性的圖標,從而提高圖標的可視化傳達和可用性。
          • 避免過度復雜化的細節:設計師應該避免過度復雜化的細節,追求簡潔的圖標設計。這可以幫助設計師創建出更加簡潔和易于理解的圖標,從而提高圖標的可用性和易用性。

          五、最后

          A. 總結UI圖標設計的重要性和原則

          UI圖標在用戶界面中扮演著重要的角色,它們不僅能夠傳達信息和功能,還能夠增強用戶體驗和界面的美感。以下是一些重要的UI圖標設計原則:

          • 簡潔明了:使用必要的元素和形狀,避免過度復雜化的細節。
          • 可識別性:使圖標獨特、清晰、易于辨認,以便用戶快速理解其含義。
          • 一致性:與品牌風格相匹配,確保整個界面的視覺統一性。
          • 可擴展性:使用矢量圖形制作圖標,以便在不同尺寸和分辨率下保持清晰度。
          • 用戶反饋和測試:收集用戶的意見和建議,進行測試和調整,以提升圖標的質量和效果。

          B. 鼓勵設計師繼續探索和發展圖標設計技能

          圖標設計是一個不斷發展和演進的領域。鼓勵設計師們繼續學習、實踐和探索,通過不斷嘗試新的技術和方法,提升自己的設計能力。以下是一些建議:

          • 深入研究:學習不同的圖標設計風格和趨勢,深入了解各種設計工具和技術,保持對設計領域的持續學習。
          • 觀察和啟發:注意身邊的圖標設計,從成功的案例中汲取靈感,拓寬自己的設計思維。
          • 反饋和合作:與團隊和用戶溝通交流,接受他們的反饋和建議,與其他設計師合作分享經驗和知識。
          • 認識目標用戶:了解目標用戶的需求和偏好,將其融入到圖標設計的決策中。

          UI圖標設計在用戶界面中起著重要的作用。通過掌握設計原則和實踐技巧,繼續學習和發展設計技能,我們將能夠創造出令人印象深刻的UI圖標作品,提升用戶體驗和界面美感。不斷探索和挑戰自己,成為一名卓越的圖標設計師!

          本文由 @Esc 原創發布于人人都是產品經理,未經許可,禁止轉載

          題圖來自 Unsplash,基于 CC0 協議

          該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          畫圖標,我是認真的

          杰睿

          對于 UI 設計師來說,圖標設計的能力至關重要,也是提升感官體驗的重要方向。對于一些初入行業的設計師,習慣下載圖標素材應付項目需求,失去了動手能力培養的機會。甚至一些多年工作經驗的老司機,依然還擺脫不了使用素材的習慣,稍微復雜一點的技法就會難以駕馭。

           

          1. 切勿過度素材化

           

          對于初入職場的設計師來說,偶爾運用素材可以理解,但是一定要學會拆解和分析,掌握還原設計的技巧和能力。

           

           

          過度依賴素材容易導致思維固化,不愿意去創造,失去創新設計的能力;也容易導致眼高手低,有想法卻實現不出來,極容易萌生放棄的念頭;素材拼貼形式完成的設計,在規范性和細節性上面也是大打折扣的,導致設計作品不夠精細化和規范性。

           

           

           

           

           

          2. 刻意練習強化

           

          我們需要通過刻意練習來提升圖標設計的能力,根據一萬小時定律,技法層面的提升都是通過反復磨練達到的。

           

           

           

           

           

           

          3. 擺脫素材才能規范化

           

          圖標設計從素材習慣過度到設計動手其實很容易,但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設計規范化的關鍵,然后再統一風格和細節規范,掌握數字化關系也是需要我們反復研究的課題。

           

           

           

           

          比如以這個天氣圖標來舉例,相信很多同學都能畫出來,但是有沒有把控里面的數字關系就難說了。通過以下示意圖我們可以看出來,大圓和小圓之間的比例關系是 4:3,而間距的關系也與圓形的大小有著數字關系。這些數字關系可以使得圖標設計更加精細化,也能引導我們去探索設計背后量化的標準和關系。

           

           

           

           

           

           

          4. 質感的層層強化

           

          當我們繪制完圖標的造型之后,運用合適的風格進行質感強化也是尤為重要的。這里我先運用其中的一個風格來完成,選擇了磨砂玻璃質感的效果。為了質感和層級關系更加明顯,這里單獨對局部進行了光影強化和邊界處理,看看以下步驟拆解圖感受一下。

           

           

           

           

          備注:運用的軟件功能是背景模糊,Sketch 或者 Figma 等軟件皆可實現。

           

           

           

          5. 延展界面場景

           

          為了進一步強化圖標練習,延展了一個簡單的界面場景,一個由宮格布局組合成的界面設計。為了填充所需的內容,先把之前的一些圖標作品放進去占個位置。雖然都是質感一類的圖標,但是由于透視、配色、風格和細節規范等不一致,整體還是存在一定的排斥感。

           

           

           

           

           

           

          6. 根據界面環境重新調整

           

          由于界面設計屬于深色主題,之前練習的天氣圖標放入場景中顯得過于突出,而且玻璃質感的通透性沒有得到很好的發揮。于是根據界面環境對天氣圖標進行了重新調整,以深色關系調整了云朵部分,針對太陽的配色和尺寸比例也進行了調整,如以下效果圖。

           

           

           

           

           

           

          7. 延續風格補全設計

           

          以調整后的天氣圖標作為風格規范,延續了其它業務場景的圖標設計,在透視關系、細節規范、配色比例和光影效果等方面進行了直接延續。在光影方向上面選擇了縱向區分,左邊三個選擇左上角打光,右邊三個選擇右上角打光。(當然也可以統一一個方向設置光影)

           

           

           

           

           

           

          8. 統一性還是差異化

           

          完成的整體設計視覺風格雖然比較統一,但是也有一些問題存在。圖標之間缺少差異化,過度統一容易視覺疲勞,于是在統一性和差異化上面開始糾結了。

           

           

           

           

          為了既保障圖標設計表達的統一性,又能形成視覺感的差異化,做出了調整配色關系的決定。根據天氣圖標的配色關系延續出了其它色系,看看最終的效果如何。

           

           

           

           

           

           

          你喜歡哪一版?

           

          關于統一性和差異化因人而異,在朋友圈征集意見也是各有差異,那么你會喜歡哪一版呢?歡迎留言區一起互動交流。

           

           

           

           


          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTQyOTA5Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          常見的 10 大圖標設計風格

          杰睿

          圖標是產品中不可或缺的部分,隨著設計趨勢的不斷變化,圖標設計風格也在不斷豐富。在產品中會出現哪些常見的圖標設計風格呢?結合產品案例體驗,今天黑馬哥為大家簡單梳理一下,列舉出常見的 10 個圖標設計風格。
          常見的 10 大圖標設計風格
           
           
           
           
          1. 線性功能圖標
          線性功能圖標是產品中最常見的風格,設計時控制好圖標規范即可。常見的多為單色(無彩色系、品牌色等),也有用品牌色作為點綴色的案例。
          常見的 10 大圖標設計風格
           
           
           
           
          2. 面性功能圖標
          面性功能圖標與線性風一樣,也是產品中最常見的風格。有單色單圖形、多色疊加風、微漸變風格等表達形式。
          常見的 10 大圖標設計風格
           
           
           
           
          3. 磨砂玻璃質感圖標
          磨砂玻璃質感圖標是輕質感的表達形式之一,也是近些年較為流行的趨勢??梢员馄揭部梢晕①|感,在立體感圖標上面也可以運用這類效果。
          常見的 10 大圖標設計風格
           
           
           
           
          4. 微質感圖標
          微質感圖標相較于扁平化設計而言,更能突出細節的深入和真實感的體現。微質感圖標的層次感也更豐富,該技法也是設計師的必備技能。
          常見的 10 大圖標設計風格
           
           
           
           
          5. 晶白風圖標
          晶白風圖標常用于金剛區欄目,利用白色不透明度關系和背景色關系進行圖標設計,圖標質感、層次感、空間感等都能得以體現。
          常見的 10 大圖標設計風格
           
           
           
           
          6. 立體感圖標
          立體感圖標分為 2.5D、偽 3D、3D 建模等形式,特別是隨著三維設計趨勢的普及,立體感圖標的運用也逐步普及,也可以利用 AI 工具完成該類型圖標。
          常見的 10 大圖標設計風格
           
           
           
           
          7. 插畫風圖標
          插畫風圖標是插畫風格的簡化融入,以此提升圖標設計的特征感,使得圖標具備差異化的視覺效果,也能烘托出整體設計的質量。
          常見的 10 大圖標設計風格
           
           
           
           
          8. 主題化圖標
          主題化圖標設計風格多樣,會結合活動主題或者節日慶典等內容,根據主題設計圖標更能體現產品溫度。
          常見的 10 大圖標設計風格
           
           
           
           
          9. 寫實類圖標
          寫實圖標是以技法表現實物特征,比較考驗質感表現、透視光影等技法能力。隨著扁平化趨勢,寫實類設計逐步被淡化,但是也有部分產品會局部性運用。
          常見的 10 大圖標設計風格
           
           
           
           
          10. 實物圖圖標
          直接將產品實物圖作為圖標相對較少,但是依然有產品會選擇使用,還原其內容表達的真實性。
          常見的 10 大圖標設計風格
           
           
           
          以上為產品中常見的圖標設計風格,根據不同需求采用。對于設計師而言,這也是首先需要掌握的圖標技能。
           
          本文由 @黑馬青年(heimaui)原創發布。未經許可,禁止轉載。

          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTYzMDg3Mg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合