• <center id="sm46c"></center>
  • <dfn id="sm46c"></dfn>
  • <strike id="sm46c"></strike>
  • <cite id="sm46c"><source id="sm46c"></source></cite>
    • <strike id="sm46c"><source id="sm46c"></source></strike>
      <option id="sm46c"></option>
      国产精品天天看天天狠,女高中生强奷系列在线播放,久久无码免费的a毛片大全,国产日韩综合av在线,亚洲国产中文综合专区在,特殊重囗味sm在线观看无码,中文字幕一区二区三区四区在线,无码任你躁久久久久久老妇蜜桃

      首頁

      【蘭亭妙微圖標(biāo)設(shè)計(jì)】為什么視覺大小和實(shí)際大小不相同?如何做到視覺統(tǒng)一?

      杰睿 圖標(biāo)設(shè)計(jì)文章及欣賞


      26082bb9-3b33-4e00-b4c1-4c60727d6087.png
      在 UI 設(shè)計(jì)和圖標(biāo)開發(fā)中,我們常常遇到一個讓人困惑的問題:
      明明兩個圖標(biāo)尺寸一樣,為什么看起來一個大一個小?
      這就是「視覺大小」和「實(shí)際大小」不一致所引發(fā)的經(jīng)典設(shè)計(jì)挑戰(zhàn)。
       這篇文章將帶你了解其中的原理,并分享一些實(shí)操方法,幫你設(shè)計(jì)出視覺協(xié)調(diào)、統(tǒng)一專業(yè)的圖標(biāo)。

      ---
      一、為什么視覺大小 ≠ 實(shí)際大小?
      在設(shè)計(jì)中,「實(shí)際大小」是指圖標(biāo)在畫布上的像素尺寸,而「視覺大小」是指人眼感知到的圖形體積或重量感。這兩者之所以不一致,主要有以下幾個原因:
      1. 圖形形狀對視覺感知的影響
      不同形狀對人眼的“占據(jù)感”不同:
      - 圓形、橢圓形:邊界柔和,看起來比實(shí)際尺寸小;
      - 尖角圖形:具有延伸感,看起來更“張揚(yáng)”;
      - 封閉 vs. 開放圖形:封閉圖形更“緊湊”,視覺重心靠內(nèi);開放圖形更“輕”,容易被忽視。
      舉例說明:一個 24x24 的正方形圖標(biāo)和一個 24x24 的圓形圖標(biāo)放在一起,圓形常常顯得更小。
      2. 視覺重心偏移
      圖標(biāo)的視覺重心不是幾何中心:
      - 有些圖標(biāo)上方留白較多,若嚴(yán)格居中,整體會顯得“偏下”;
      - 有些圖標(biāo)線條向一側(cè)偏移,也會影響視覺穩(wěn)定性。
      3. 顏色、線條粗細(xì)的錯覺
      - 顏色明亮的圖標(biāo)通常看起來更大;
      - 線條較細(xì)的圖標(biāo)會顯得“輕”或“空”;
      - 相同尺寸下,深色圖標(biāo)比淺色圖標(biāo)更具“存在感”。

      ---
      二、如何實(shí)現(xiàn)圖標(biāo)的視覺統(tǒng)一?
      4. 關(guān)注“視覺等值”而非“尺寸一致”
      優(yōu)秀的圖標(biāo)設(shè)計(jì)不會追求數(shù)值上完全一致,而是讓圖標(biāo)“看起來”一樣大。這就需要設(shè)計(jì)師具備一定的視覺判斷力和對比經(jīng)驗(yàn)。
      5. 使用統(tǒng)一的對齊原則
      - 每個圖標(biāo)放在相同的畫布尺寸(如 24×24、48×48)中;
      - 保證主圖形部分在視覺上居中,而非僅僅坐標(biāo)居中;
      - 調(diào)整視覺重心,讓圖標(biāo)看起來平衡、不傾斜。
      6. 使用光學(xué)微調(diào)
      所謂「光學(xué)對齊」,就是打破機(jī)械對齊規(guī)則,讓視覺更舒服:
      暫時無法在飛書文檔外展示此內(nèi)容
      7. 放在真實(shí)場景中預(yù)覽
      設(shè)計(jì)圖標(biāo)時,建議不要孤立操作,而是:
      - 放入實(shí)際使用場景(如按鈕、導(dǎo)航欄);
      - 對比多個圖標(biāo)在一組中是否協(xié)調(diào);
      - 測試在不同設(shè)備分辨率下的適配情況。

      ---
      三、圖標(biāo)設(shè)計(jì)實(shí)操建議
      以下是一些日常圖標(biāo)設(shè)計(jì)中實(shí)用的技巧和判斷標(biāo)準(zhǔn):
      暫時無法在飛書文檔外展示此內(nèi)容

      視覺大小與實(shí)際大小的偏差,是每一位圖標(biāo)設(shè)計(jì)師都會經(jīng)歷的學(xué)習(xí)過程。
       真正優(yōu)秀的設(shè)計(jì)不是追求數(shù)值一致,而是注重 用戶感受的和諧統(tǒng)一。
      圖標(biāo)設(shè)計(jì)的細(xì)節(jié)感,往往藏在你“感覺不舒服但又說不出哪里不對”的那一刻。
      理解視覺感知,訓(xùn)練視覺判斷力,才是做出專業(yè)、協(xié)調(diào)圖標(biāo)系統(tǒng)的關(guān)鍵。

      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

      UI 界面圖標(biāo)設(shè)計(jì)的 10 個關(guān)鍵細(xì)節(jié)

      濤濤 圖標(biāo)設(shè)計(jì)文章及欣賞

      UI 界面圖標(biāo)設(shè)計(jì)的 10 個關(guān)鍵細(xì)節(jié):使用光柵框架確保圖標(biāo)視覺重量一致,設(shè)計(jì)時注意像素網(wǎng)格重要性、優(yōu)先 2 像素邊框,從最復(fù)雜圖標(biāo)開始設(shè)計(jì)以保持細(xì)節(jié)層次統(tǒng)一,控制相鄰元素最小間隙、避免輪廓 “粘滯”,去除重復(fù)圖形元素以簡化設(shè)計(jì),保持圖標(biāo)風(fēng)格(如角度、線性 / 填充)一致,基于 8 像素網(wǎng)格等二倍數(shù)度量系統(tǒng)設(shè)計(jì),確保輪廓節(jié)點(diǎn)對齊、尺寸為整數(shù),清理 SVG 代碼中的冗余圖層,同時強(qiáng)調(diào)這些建議需靈活應(yīng)用而非刻板遵循。

      采用 M3 設(shè)計(jì)的 Google Phone 應(yīng)用

      杰睿 圖標(biāo)設(shè)計(jì)文章及欣賞

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

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

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

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

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

      (C)谷歌

       

       
      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

      UI 設(shè)計(jì)|審美積累 | 擬物化風(fēng)格(Skeuomorphism)

      杰睿 圖標(biāo)設(shè)計(jì)文章及欣賞

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

      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

      更多項(xiàng)目/合作請私信,支持定制設(shè)計(jì)服務(wù)
      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

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

      杰睿 圖標(biāo)設(shè)計(jì)文章及欣賞

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

      DM_20250701224752_001.PNG


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

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


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


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


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

       

      如何使用按鈕組
      DM_20250701224752_005.PNG
      按鈕組使您的產(chǎn)品更具表現(xiàn)力。
      標(biāo)準(zhǔn)按鈕組增加了相鄰按鈕之間的交互,使它們相互響應(yīng)。選擇標(biāo)準(zhǔn)組內(nèi)的按鈕時,會發(fā)生以下變化:
      所選按鈕的形狀和寬度將會改變。
      選定的切換按鈕也會改變顏色。
      相鄰的按鈕移動并暫時改變寬度。

       

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

       

      DM_20250701224752_007.PNG
      可以使用一組鏈接的按鈕在類似的操作之間切換。
      鏈接按鈕組可幫助用戶選擇選項(xiàng)、切換視圖或?qū)R頁面上的元素。它們的行為與標(biāo)準(zhǔn)按鈕組類似,但不
      會影響相鄰的按鈕。鏈接按鈕組應(yīng)取代已棄用的分段按鈕。

       

      DM_20250701224752_008.PNG

      如果按鈕內(nèi)容彼此關(guān)聯(lián)且可選,請使用鏈接按鈕組。在購物應(yīng)用中,鏈接按鈕組用于選擇商品的容量,
      因此,密切相關(guān)的操作在鏈接按鈕組中效果更佳。

      DM_20250701224752_009.PNG
      使用一組鏈接按鈕來實(shí)現(xiàn)單選或多選模式。
      對于使用切換按鈕的單選或多選模式,應(yīng)使用鏈接按鈕組。如果所有按鈕均不可切換,則不應(yīng)使用鏈接
      按鈕組。

       

      DM_20250701224752_010.PNG

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

       

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


      手動調(diào)整圖標(biāo)按鈕的寬度時,避免將其拉伸得太寬。

       

      DM_20250701224752_012.PNG

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

      DM_20250701224752_013.PNG

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

       

      DM_20250701224752_014.PNG

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


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

       

      DM_20250701224752_016.PNG

      所選按鈕應(yīng)改變形狀以實(shí)現(xiàn)視覺區(qū)分。
      選定的按鈕應(yīng)從圓形變?yōu)榉叫?或從方形變?yōu)閳A形。

       

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

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

       

      三維圖標(biāo)設(shè)計(jì)寶典

      濤濤 圖標(biāo)設(shè)計(jì)文章及欣賞

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

      掌握這3個方法,新手也能做出精致的圖標(biāo)設(shè)計(jì)

      lanlanwork

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

      第一:找到合適的圖標(biāo)素材

      第二:增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

      第三:給設(shè)計(jì)素材加入自己的想法

      我們這次做的圖標(biāo)分別為:通知、商城、發(fā)現(xiàn)、我的。

      第一:找到合適的圖標(biāo)素材

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

      image.png

      接下來是商城圖標(biāo),繼續(xù)搜索商城,我們選用第一頁,第 2 排第 2 個:

      image.png

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

      image.png

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

      image.png

      第二:增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

      有了素材之后,我們首先要讓他們看起來是一套的,所以在統(tǒng)一性上需要優(yōu)化,先優(yōu)化大小和線條粗細(xì):

      image.png

      大小和粗細(xì)優(yōu)化完之后,我們再優(yōu)化下圓角統(tǒng)一性,現(xiàn)在很明顯,只有第二個圖標(biāo)是圓潤的,其他的都是有點(diǎn)硬朗的,可以進(jìn)行統(tǒng)一下:

      image.png

      直角圓角統(tǒng)一了之后,還有一個統(tǒng)一性就是斷線,只有第二個沒有斷開的設(shè)計(jì),所以我們再把商城進(jìn)行斷線處理:

      image.png

      第三:給設(shè)計(jì)素材加入自己的想法

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

      image.png

      比如一些細(xì)節(jié)的調(diào)整,像通知圖標(biāo),感覺有點(diǎn)禿,是不是可以讓中間伸出一點(diǎn)寬度來:

      image.png

      細(xì)微調(diào)整之后,如果覺得還不夠,我們還可以繼續(xù)添加新的設(shè)計(jì)語言,比如增加配色點(diǎn)綴:

      image.png

      就這樣,這幾個圖標(biāo),漸漸的就成為了你自己的作品!

      我們在放適當(dāng)?shù)陌b一下:

      image.png

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

      image.png

      效果還是提升很大的!

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

      歡迎關(guān)注作者的微信公眾號:「菜心設(shè)計(jì)鋪」

       

      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

       

       

      應(yīng)用圖標(biāo) | 全面解析,助力設(shè)計(jì)出更優(yōu)質(zhì)的應(yīng)用圖標(biāo)!

      杰睿

      編輯導(dǎo)語:各大APP的圖標(biāo)都各有特點(diǎn),圖標(biāo)的設(shè)計(jì)也是一門學(xué)問。在這篇文章中,作者全面解析了各類APP圖標(biāo)設(shè)計(jì)背后的用意,一起學(xué)習(xí)一下吧。

      如果說一個人的臉面、衣著打扮是給陌生人的第一印象,那么APP的應(yīng)用圖標(biāo)風(fēng)格與氣質(zhì)就是留給新用戶的第一印象,關(guān)系著用戶是否對這個APP感興趣、是否會打開應(yīng)用介紹、是否會點(diǎn)擊下載按鈕起著決定性的作用。

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

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

      本文根據(jù)筆者對大量應(yīng)用圖標(biāo)的分析、結(jié)合設(shè)計(jì)準(zhǔn)則進(jìn)行總結(jié),希望能幫助大家在設(shè)計(jì)過程中規(guī)避掉一些常見的問題,歡迎一起探討、取長補(bǔ)短、共同進(jìn)步。

      分享目錄

      1. 四大設(shè)計(jì)原則
      2. 色彩的表現(xiàn)形式
      3. 主體圖形分類
      4. 背景圖案及元素
      5. 主體圖形的表現(xiàn)手法
      6. 應(yīng)用圖標(biāo)設(shè)計(jì)流程
      7. 總結(jié)

      一、四大設(shè)計(jì)原則

      應(yīng)用圖標(biāo)代表產(chǎn)品的外在形象,設(shè)計(jì)的精美與否決定著用戶的第一印象,是否產(chǎn)生打開的欲望跟當(dāng)前圖標(biāo)的視覺所傳達(dá)的內(nèi)涵有最直接的關(guān)系。應(yīng)用圖標(biāo)雖然不同于設(shè)計(jì)LOGO,表現(xiàn)方式也千變?nèi)f化,但必定有自身的設(shè)計(jì)準(zhǔn)則要去遵守,利用設(shè)計(jì)的手段將視覺傳播的價值最大化。

      1. 可識別性

      首先,應(yīng)用圖標(biāo)需要盡量簡約。過于復(fù)雜的圖標(biāo)會增加用戶的理解成本、甚至誤導(dǎo)用戶,但如果過于追求簡約,缺乏細(xì)節(jié)、個性化以及必要的隱喻信息,也會因過于單調(diào),造成表意不明確等問題。

      簡約并非簡單,設(shè)計(jì)師需要通過專業(yè)的知識進(jìn)行合理的簡化,以提升應(yīng)用圖標(biāo)的設(shè)計(jì)品質(zhì),方便用戶在不同場景中都能清晰的辨認(rèn)。其次,需表意明確、易于理解。

      應(yīng)用圖標(biāo)代表的是產(chǎn)品的行業(yè)屬性、功能作用或與眾不同的優(yōu)勢,要讓用戶第一眼就能識別出所代表的含義,貼近用戶的心理預(yù)期。

      簡約易識別是應(yīng)用圖標(biāo)必備的基礎(chǔ)屬性之一,這也是為什么大部分產(chǎn)品都將logo作為應(yīng)用圖標(biāo)主視覺的原因,因?yàn)閘ogo設(shè)計(jì)考慮到了方方面面以及后續(xù)延展的問題,即便有些logo較為復(fù)雜,也會通過提取局部元素、吉祥物、主體色等方式來強(qiáng)化應(yīng)用圖標(biāo)屬性,給用戶形成獨(dú)特的記憶,以提升應(yīng)用的下載量和使用率。

      2. 關(guān)聯(lián)性

      應(yīng)用圖標(biāo)應(yīng)該與產(chǎn)品的屬性、品牌有極強(qiáng)的關(guān)聯(lián)性,通過品牌延展賦予產(chǎn)品更強(qiáng)的生命力,讓用戶從接觸應(yīng)用圖標(biāo)的第一眼開始、再到后面的使用,整個過程始終都能保持清晰且統(tǒng)一的品牌認(rèn)知,通過和諧統(tǒng)一的視覺效果,帶來更好的用戶體驗(yàn)。

      應(yīng)用圖標(biāo)需要與品牌之間必須保持高度的一致,著重從以下幾點(diǎn)體現(xiàn):

      1)LOGO

      毫無疑問,用品牌logo作為主體圖形是最佳選擇,結(jié)合品牌色搭配使用,能將產(chǎn)品核心理念、品牌形象的傳播效果達(dá)到極致,在APP應(yīng)用市場中,大家會發(fā)現(xiàn)大多數(shù)產(chǎn)品都在使用logo作為應(yīng)用圖標(biāo)的主視覺圖形。

      2)品牌色

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

      3)IP/吉祥物

      吉祥物屬于品牌logo延展的一部分, 也是產(chǎn)品的靈魂。當(dāng)logo較為復(fù)雜時,因移動設(shè)備應(yīng)用圖標(biāo)位置空間有限,logo細(xì)節(jié)無法在短時間被用戶捕捉,不宜展示時,使用IP/吉祥物或其局部元素代替也是不錯的選擇。

      4)產(chǎn)品名稱

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

      將產(chǎn)品名稱作為應(yīng)用圖標(biāo)需謹(jǐn)慎使用:首先,文字傳達(dá)的信息量有限:其次,用戶對于圖形的理解效率要優(yōu)于文字;再者,應(yīng)用圖標(biāo)都會有對應(yīng)的產(chǎn)品名稱展示(應(yīng)用市場在右、桌面在下方),多少有些信息重復(fù)。

      所以大家見到的應(yīng)用圖標(biāo)主體是產(chǎn)品名稱的不外乎兩種情況,一種是產(chǎn)品本身將名稱設(shè)計(jì)成字體logo,例如美團(tuán)、懶飯;另一種是將產(chǎn)品名稱作為logo的輔助信息提示,例如繽紛生活。

      以上是應(yīng)用圖標(biāo)與品牌屬性關(guān)聯(lián)最常見的四種方式,在設(shè)計(jì)中可靈活搭配,使用兩種及以上的方式組合,能將品牌傳播的途徑發(fā)揮到最大值。

      3. 差異化

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

      舉這個例子似乎并不恰當(dāng),但結(jié)果是驚人的相似,筆者想要陳述的一個觀點(diǎn)是,不要讓你辛苦做出的設(shè)計(jì)成為別人的嫁衣,讓用戶誤以為這是其他企業(yè)的“某某某…”產(chǎn)品。

      目前,應(yīng)用市場中的APP數(shù)量巨大,且還處于增長的趨勢,同行業(yè)的圖標(biāo)設(shè)計(jì)同質(zhì)化相當(dāng)嚴(yán)重。想要讓自身產(chǎn)品應(yīng)用圖標(biāo)脫穎而出,就有必要在設(shè)計(jì)之前做好競品分析,借鑒競品的優(yōu)點(diǎn),在突出自身產(chǎn)品核心特征、屬性的基礎(chǔ)上,還要用不同的表現(xiàn)手法突出其差異性,給用戶留下獨(dú)特的印象,避免同質(zhì)化。

      4. 可用性

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

      雖然可用性測試存在設(shè)計(jì)之后,但這一環(huán)節(jié)至關(guān)重要,它決定著產(chǎn)品的下載量以及使用率。

      二、圖標(biāo)顏色的表現(xiàn)形式

      1. 單色圖標(biāo)

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

      單色應(yīng)用圖標(biāo)雖然色彩比較單一、表現(xiàn)形式也受到局限,但視覺清晰、簡潔且識別性強(qiáng),如果能運(yùn)用其他設(shè)計(jì)手法豐富圖標(biāo)細(xì)節(jié)就再好不過了。

      2. 多色圖標(biāo)

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

      多色圖標(biāo)的細(xì)節(jié)、層次更加豐富,設(shè)計(jì)時確保各色彩搭配協(xié)調(diào),一旦因色彩過多造成視覺混亂,就得不償失了。

      3. 漸變圖標(biāo)

      無論是單色還是多色,添加漸變會讓應(yīng)用圖標(biāo)更加細(xì)膩、耐看。漸變的表現(xiàn)手法應(yīng)用廣泛,簡單的漸變能讓圖標(biāo)細(xì)節(jié)豐富,同時也具備空間感和微立體感。

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

      4. 顏色疊加

      單色、多色或是漸變都可通過調(diào)整不透明度、圖層疊加的方式來豐富應(yīng)用圖標(biāo)細(xì)節(jié),相比純粹的漸變,立體感和空間感更強(qiáng)。使用顏色疊加需注意色彩對比及明暗關(guān)系,否則會衍生出臟亂的顏色。

      5. 色環(huán)的運(yùn)用

      環(huán)形構(gòu)圖為主,由多個元素復(fù)制并以統(tǒng)一的中心點(diǎn)、旋轉(zhuǎn)角度,旋轉(zhuǎn)衍生出一個主體圖形。這種應(yīng)用圖標(biāo)的設(shè)計(jì)構(gòu)圖飽滿、色彩豐富,能給用戶傳遞出輕松愉快的視覺體驗(yàn)。

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

      三、主體圖形的分類

      一個好的應(yīng)用圖標(biāo)應(yīng)該是多元素、多信息結(jié)合運(yùn)用,才能達(dá)到更好的效果。雖然大部分主體圖形使用了logo,但并不影響設(shè)計(jì)師們對其進(jìn)行拆解,提取局部元素、色彩、名稱等信息進(jìn)行二次創(chuàng)作,從原則上來說,是一次線上logo的設(shè)計(jì)。

      應(yīng)用圖標(biāo)種類繁多,切不可盲目跟風(fēng),需經(jīng)過認(rèn)真的分析、研究,找到最適合自身產(chǎn)品的才是最重要的,且每種類型并非獨(dú)立,在條件允許的情況下還能跨類型靈活搭配、相互組合。

      1. 中文字體

      1)單中文字體

      僅次于圖形logo的表現(xiàn)方式,通常會在產(chǎn)品名稱中提取一個具有代表性的文字對筆畫、結(jié)構(gòu)等進(jìn)行再設(shè)計(jì)。基于國人文化的優(yōu)勢以及對漢字的敏感度,既能降低用戶對應(yīng)用圖標(biāo)的認(rèn)知成本、還能根據(jù)產(chǎn)品特性設(shè)計(jì)出差異化的視覺效果。

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

      2)多中文字體

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

      多文字圖標(biāo)建議將字?jǐn)?shù)控制在2~6個范圍內(nèi),3字以內(nèi)一行顯示,超過3字即兩行顯示且最多不超過兩行,否則會影響圖標(biāo)的識別效果。

      3)中文、圖形組合

      適當(dāng)添加帶有產(chǎn)品特性的輔助圖形,用引導(dǎo)或指向性的方式對文字進(jìn)行強(qiáng)調(diào),圖標(biāo)細(xì)節(jié)會更豐富,可以突出產(chǎn)品想要傳達(dá)的信息、以及不同的氣質(zhì),還能增加圖標(biāo)的形式感和趣味性。注意添加的圖形不要過于復(fù)雜,不然會讓信息混亂,適得其反。

      4)中文圖形化

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

      5)中文、IP形象組合

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

      2. 英文字體

      1)單英文字體

      單英文字體通常是提取產(chǎn)品名稱拼音首字母或英文首字母進(jìn)行創(chuàng)意設(shè)計(jì),跟中文字體相比,基于字母本身線條的簡潔及流暢性,再結(jié)合產(chǎn)品特點(diǎn),很容易設(shè)計(jì)出兼具美感、高識別度的應(yīng)用圖標(biāo)。

      需要明確一點(diǎn),不管如何創(chuàng)意,也僅局限于在26個英文字母中選擇,如果想設(shè)計(jì)出差異化的應(yīng)用圖標(biāo),對設(shè)計(jì)師來說,是一個很大的挑戰(zhàn)。

      2)多英文字體

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

      多英文的應(yīng)用圖標(biāo)很很容易形成獨(dú)有的產(chǎn)品簡稱,更利于用戶記憶,但字母一定不要過多,如果無法刪減,那就只突出特定的2~4個字母。

      3)其他類型

      字母與圖形、IP形象組合以及字母圖形化,其表現(xiàn)方式、設(shè)計(jì)原則與中文字體圖標(biāo)類似,這里不做過多闡述。

      3. 數(shù)字符號

      1)數(shù)字設(shè)計(jì)

      人們對于數(shù)字來說是非常敏感的,不存在文化差異或認(rèn)知誤區(qū),基于數(shù)字便于記憶且容易識別的特點(diǎn),將數(shù)字圖形化后應(yīng)用到圖標(biāo)當(dāng)中,會讓產(chǎn)品具有親和力,有利于品牌傳播。單純的數(shù)字過于簡單,需增加一些細(xì)節(jié),豐富圖標(biāo)層次,讓其具備獨(dú)特的記憶點(diǎn),不然會顯得單調(diào)。

      2)符號設(shè)計(jì)

      每個符號都有特定的含義,因此,在選擇符號作為應(yīng)用圖標(biāo)之前,首先需要了解清楚該符號是否能體現(xiàn)出產(chǎn)品屬性以及想要表達(dá)的意思,例如“¥”適合攢錢、理財(cái)相關(guān)的應(yīng)用,而“+-×÷”則適合用于計(jì)算器或數(shù)學(xué)相關(guān)的應(yīng)用;其次,符號跟數(shù)字一樣,都比較簡單,需經(jīng)過二次創(chuàng)作后才會使用。

      4. 扁平化圖形

      1)線性圖形

      線性風(fēng)格的應(yīng)用圖標(biāo)能給人一種簡潔輕快的感覺,設(shè)計(jì)師通過提取產(chǎn)品的品牌信息、功能服務(wù)等進(jìn)行創(chuàng)意設(shè)計(jì),將得到的關(guān)鍵詞以一條或多條線段組成高度抽象的圖形來達(dá)到信息傳播的目的。

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

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

      設(shè)計(jì)時,切記圖形不能過于復(fù)雜,否則會影響其辨識度,增加用戶的認(rèn)知成本,也不利于品牌推廣。

      2)面性圖形

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

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

      因現(xiàn)實(shí)世界中事務(wù)的復(fù)雜性,被提煉出的圖形如果細(xì)節(jié)過多會顯的復(fù)雜且不夠干練、細(xì)節(jié)過少則難以辨認(rèn),所以需要對圖形進(jìn)行創(chuàng)意加工,最終以確保應(yīng)用圖標(biāo)的功能和美感兼具。

      3)幾何圖形

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

      幾何圖形構(gòu)圖簡潔,設(shè)計(jì)形式豐富多樣,想設(shè)計(jì)出具備設(shè)計(jì)感和差異化的應(yīng)用圖標(biāo),很考驗(yàn)設(shè)計(jì)師的創(chuàng)意能力。

      5. 卡通形象

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

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

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

      6. 擬人化

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

      擬人化的應(yīng)用圖標(biāo)會顯得親民,便于拉近與用戶之間的關(guān)系,適度在抽象的圖形上加入情感化(動作/表情)表達(dá),能生動、形象的體現(xiàn)出產(chǎn)品獨(dú)有的特性。

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

      7. 擬物化

      擬物化圖標(biāo)使用的比較少,它更偏向于某種行業(yè)類型,例如工具、游戲類型的應(yīng)用,通過超接近于現(xiàn)實(shí)世界中的物體造型,基本不需要用戶思考,一眼就能理解,但也正因?yàn)檫@種特性,信息量的傳播受到很大局限,僅適合單一且大眾化的信息傳達(dá)。

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

      四、背景圖案及元素

      1. 圖形背景

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

      2. 炫彩背景

      當(dāng)主體圖形的結(jié)構(gòu)、色彩不是很復(fù)雜,且產(chǎn)品面對的是年輕化用戶群體時,可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設(shè)計(jì)出炫彩效果,色彩表現(xiàn)豐富的應(yīng)用圖標(biāo),能帶給用戶更強(qiáng)的視覺沖擊力。色彩可多但不可亂,需要把控好色彩之間的對比關(guān)系。

      3. 運(yùn)營標(biāo)簽

      常見于在特定的節(jié)日中,例如618、雙11、雙12及傳統(tǒng)節(jié)日等,產(chǎn)品會存在促銷、打折活動,為了更早的讓用戶知道,會在應(yīng)用圖標(biāo)的某個區(qū)域以標(biāo)簽的方式出現(xiàn),起到引導(dǎo)用戶的作用。

      不過這種表現(xiàn)方式具有時效性,活動截止即圖標(biāo)樣式復(fù)原。

      4. 節(jié)日氛圍

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

      五、主體圖形的表現(xiàn)手法

      1. 對比

      通過元素的大小、長短、虛實(shí)、稀疏、方向以及不同的色彩、明暗關(guān)系等方式進(jìn)行對比,形成強(qiáng)烈的反差效果,同時兼具張力和美感,這也是應(yīng)用圖標(biāo)設(shè)計(jì)中很常見的技法表現(xiàn)之一。

      2. 對稱

      對稱在自然界中隨處可見,在互聯(lián)網(wǎng)設(shè)計(jì)中也是如此,應(yīng)用圖標(biāo)中的主體圖形以對稱的方式呈現(xiàn),能給用戶平衡、和諧的感覺,也讓圖標(biāo)更具有觀賞性。

      3. 分割

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

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

      4. 重復(fù)

      將相同或相近的圖形以某種規(guī)律連續(xù)性的排列,相比單調(diào)的圖形,會更加飽滿。重復(fù)性的表現(xiàn)手法以大小、色彩、位置、形狀等作為出發(fā)點(diǎn)進(jìn)行有序的排列,最終形成一種規(guī)律、整齊的節(jié)奏和藝術(shù)感。

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

      5. 重疊

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

      6. 正負(fù)形

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

      正負(fù)形圖標(biāo)能將信息傳播最大化,且設(shè)計(jì)感十足,好的正負(fù)形圖標(biāo)能給用戶形成獨(dú)特的記憶點(diǎn),但設(shè)計(jì)時需要注意正、負(fù)銜接的順暢度,否則無法清晰的傳播信息。

      六、應(yīng)用圖標(biāo)設(shè)計(jì)流程

      1. 發(fā)散思維、尋找隱喻

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

      2. 分析競品、避免同質(zhì)化

      確定了大致的設(shè)計(jì)方向,就去找同行業(yè)、同類型或相似的應(yīng)用圖標(biāo)分析其形狀、配色、組合類型等,取長補(bǔ)短,這也是避免同質(zhì)化非常重要的一個環(huán)節(jié),幫助自己在后續(xù)設(shè)計(jì)出具備差異化的應(yīng)用圖標(biāo)做鋪墊。

      3. 提取關(guān)鍵詞

      可以從產(chǎn)品名稱或功能屬性方面找出產(chǎn)品最想傳達(dá)的核心信息,并提煉出關(guān)鍵詞。切記,關(guān)鍵詞不可脫離帶水、表意不明確,一定要夠精煉、能表達(dá)出核心內(nèi)容。關(guān)鍵詞在精不在多,如果太多,需要通過層層遞進(jìn),篩選出“一主三輔”,要知道這關(guān)系著后續(xù)應(yīng)用圖標(biāo)傳達(dá)信息的精準(zhǔn)度。

      4. 圖標(biāo)繪制

      將上一步得到的關(guān)鍵詞轉(zhuǎn)化成抽象圖形,進(jìn)行視覺化提煉,這時應(yīng)用圖標(biāo)的雛形已經(jīng)形成,再結(jié)合前面所提到的圖形分類、表現(xiàn)手法以及注意事項(xiàng)等,進(jìn)入圖標(biāo)繪制流程。關(guān)于圖標(biāo)設(shè)計(jì)規(guī)范及原則,在之前的《圖標(biāo)篇 | 圖標(biāo)設(shè)計(jì)必備的基礎(chǔ)知識!》文章中有詳細(xì)說明,這里不做闡述。

      5. 細(xì)節(jié)處理

      基本圖形繪制完成后,通過添加點(diǎn)綴、輔助圖形、背景處理等方式豐富圖標(biāo)細(xì)節(jié),進(jìn)行精細(xì)化處理,使其更精致,具備高識別度及品質(zhì)感。

      6. 適用性測試

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

      7. 輸出切圖

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

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

      七、總結(jié)

      首先,筆者要感謝耐心看到這里的小伙伴,希望總結(jié)的內(nèi)容能幫到大家,在前期設(shè)計(jì)中作為資料參考,避免出現(xiàn)常見的問題,防止進(jìn)入誤區(qū)。

      其次,要想設(shè)計(jì)出優(yōu)秀的應(yīng)用圖標(biāo)僅看上述內(nèi)容是遠(yuǎn)遠(yuǎn)不夠的,少不了平時的多看、多練、多思考,需日積月累,逐漸提升自己的視覺審美、造型提煉、執(zhí)行效率等多方面設(shè)計(jì)能力。

      應(yīng)用圖標(biāo)的總結(jié)分享就到這里了,對你有幫助的話就給筆者點(diǎn)個贊吧,如果有不同意見,歡迎在評論區(qū)交流或指正,以便查漏補(bǔ)缺,共同進(jìn)步。

      #專欄作家#

      大漠飛鷹;公眾號:能量眼球,人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗(yàn)的挖掘,利用設(shè)計(jì)的手段為受眾用戶帶來更好的體驗(yàn),即好看、好用。

      本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

      題圖來自Unsplash,基于 CC0 協(xié)議

      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

      扁平化設(shè)計(jì)終結(jié)?新趨勢來了?

      杰睿

      扁平化設(shè)計(jì)這一趨勢已經(jīng)流行了挺長時間,而現(xiàn)在,設(shè)計(jì)風(fēng)向似乎要有所轉(zhuǎn)變了,這或許可以從一些設(shè)計(jì)案例中透露出來。這篇文章里,作者就從案例出發(fā),展示了設(shè)計(jì)趨勢的演變,一起來看看吧。

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

      最近感覺設(shè)計(jì)風(fēng)向有點(diǎn)變啊,我碰到幾個例子感覺挺有意思的,似乎是印證了這波轉(zhuǎn)變。

      在這篇文章里,我主要聚焦在UI設(shè)計(jì)領(lǐng)域,看看設(shè)計(jì)趨勢在這方面都經(jīng)歷了哪些變化。

      一、扁平化設(shè)計(jì)趨勢是怎么興起的?

      2013 年蘋果推出 iOS 7 后,扁平化設(shè)計(jì)火得一塌糊涂,界面設(shè)計(jì)方向一夜之間發(fā)生了轉(zhuǎn)變。雖然蘋果也是借鑒了其他制造商已經(jīng)應(yīng)用的元素,但其作為行業(yè)風(fēng)向標(biāo)的影響力依然無人能及。

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

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

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

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

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

      二、Reddit 品牌設(shè)計(jì)刷新

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

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

      現(xiàn)代的品牌logo設(shè)計(jì)大多是扁平的,因?yàn)檫@樣既清晰易讀又方便調(diào)整大小。真想看看其他公司接下來會怎么玩品牌設(shè)計(jì)。

      三、MacOS Big Sur 圖標(biāo)

      回到2020年,在那年的11月,蘋果刷新了它們的MacOS圖標(biāo)風(fēng)格。我個人認(rèn)為,這是在細(xì)節(jié)設(shè)計(jì)上搭配更多3D效果這股趨勢的源頭,我在網(wǎng)上看到了很多這樣的討論。

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

      一看蘋果都整 3D 了,不少第三方應(yīng)用開發(fā)商也坐不住了,紛紛改起了自家圖標(biāo),看起來更立體了。

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

      四、Airbnb 新版本設(shè)計(jì)

      Airbnb在最近的夏冬主題設(shè)計(jì)更新里,玩了不少 3D 和復(fù)雜設(shè)計(jì)。就拿它們新出的“游客護(hù)照”來說吧,圖標(biāo)就跟真“書”似的,點(diǎn)開交互還有翻書動畫,賊逼真。

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

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

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

      五、Shopify更新了設(shè)計(jì)系統(tǒng)

      Shopify 對深受好評的設(shè)計(jì)系統(tǒng) Polaris 進(jìn)行了重大更新,換了套新花樣!以前那些扁平的按鈕,現(xiàn)在縮小了,還更帶感了,按著賊舒服。

      這次重設(shè)計(jì)也不是瞎改,當(dāng)初設(shè)計(jì)團(tuán)隊(duì)說扁平化做能讓界面干凈,理解簡單,用著還效率高。可時間一長,商家們就不樂意了,說這界面整得“沒勁”、“乏味”還“單調(diào)”。

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

      探索的2種不同設(shè)計(jì)風(fēng)格

      總結(jié)

      上面這些案例展示了現(xiàn)代設(shè)計(jì)趨勢的演變,從扁平化設(shè)計(jì)向更加注重細(xì)節(jié)的方向過渡。

      扁平化設(shè)計(jì)固然擁有清晰高效等優(yōu)點(diǎn),但現(xiàn)代設(shè)計(jì)更傾向于展現(xiàn)層次和深度。設(shè)計(jì)師和開發(fā)者應(yīng)當(dāng)密切關(guān)注這一趨勢,并做好準(zhǔn)備將相關(guān)元素融入自身系統(tǒng),尤其是在大型品牌和產(chǎn)品中逐漸成為趨勢的情況下。

      設(shè)計(jì)趨勢真是一個輪回。

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

      譯者:彩云Sky,人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級視覺設(shè)計(jì)師。

      本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

      題圖來自 Unsplash,基于 CC0 協(xié)議

      該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

      創(chuàng)造出眾的UI圖標(biāo):點(diǎn)亮你的界面

      杰睿

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

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

      一、UI圖標(biāo)的定義和作用

      A. UI圖標(biāo)的定義

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

      B. UI圖標(biāo)的作用

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

      C. UI圖標(biāo)在用戶界面中的重要性

      UI圖標(biāo)在用戶界面設(shè)計(jì)中扮演著不可或缺的角色,其重要性體現(xiàn)在以下幾個方面:

      • 導(dǎo)航和標(biāo)識功能:UI圖標(biāo)通過視覺上的差異化,幫助用戶快速識別和定位所需的功能模塊,提供直觀導(dǎo)航,減少操作復(fù)雜度。
      • 美觀和統(tǒng)一性:精心設(shè)計(jì)的UI圖標(biāo)能夠增加界面的美感,提升用戶體驗(yàn)。通過一致性的圖標(biāo)設(shè)計(jì),整個界面呈現(xiàn)出協(xié)調(diào)統(tǒng)一的視覺效果。
      • 信息傳遞效果:UI圖標(biāo)通過形狀、顏色和圖像等視覺元素,能夠傳達(dá)具體的信息和功能,使用戶更容易理解界面的意圖和操作方式。
      • 增強(qiáng)品牌形象:UI圖標(biāo)能夠?qū)⑵放菩蜗笕谌氲浇缑嬷校纬瑟?dú)特的品牌風(fēng)格和個性,幫助品牌建立與用戶的情感聯(lián)系。

      二、設(shè)計(jì)原則和要素

      UI圖標(biāo)設(shè)計(jì)是用戶界面的重要組成部分,它們不僅可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站,還可以增強(qiáng)整體視覺效果。為了設(shè)計(jì)出高質(zhì)量的UI圖標(biāo),設(shè)計(jì)師需要遵循一些基本原則和要素。

      A. 獨(dú)特性和可識別性

      設(shè)計(jì)具有獨(dú)特特征的圖標(biāo) UI圖標(biāo)應(yīng)該具有獨(dú)特的特征,使其能夠與其他圖標(biāo)區(qū)分開來。設(shè)計(jì)師可以通過使用不同的形狀、顏色和風(fēng)格來實(shí)現(xiàn)這一目標(biāo)。同時,圖標(biāo)的形狀和顏色也應(yīng)該與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標(biāo)的功能和意義。

      避免與其他圖標(biāo)混淆 為了避免UI圖標(biāo)與其他圖標(biāo)混淆,設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與其他圖標(biāo)有足夠的區(qū)別。如果圖標(biāo)的形狀和顏色與其他圖標(biāo)過于相似,用戶可能會難以區(qū)分它們的功能和意義,從而影響用戶的使用體驗(yàn)。

      B. 簡潔性和清晰性

      追求簡潔的圖標(biāo)設(shè)計(jì) 簡潔的圖標(biāo)設(shè)計(jì)可以幫助用戶更快地理解和使用圖標(biāo)。設(shè)計(jì)師應(yīng)該盡可能地簡化圖標(biāo)的形狀和顏色,避免使用過多的細(xì)節(jié)和復(fù)雜的形狀。簡潔的圖標(biāo)設(shè)計(jì)還可以幫助應(yīng)用程序或網(wǎng)站的整體視覺效果更加統(tǒng)一和和諧。

      避免過度復(fù)雜化的細(xì)節(jié) 過度復(fù)雜化的細(xì)節(jié)可能會使圖標(biāo)變得過于復(fù)雜和難以理解。設(shè)計(jì)師應(yīng)該避免使用過多的細(xì)節(jié)和復(fù)雜的形狀,以確保圖標(biāo)的簡潔性和清晰性。同時,設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色足夠明確,以便用戶能夠輕松地識別和理解圖標(biāo)的功能和意義。

      C. 一致性和統(tǒng)一性

      維護(hù)整個UI界面的一致性風(fēng)格 UI圖標(biāo)應(yīng)該與整個UI界面的風(fēng)格保持一致。設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀、顏色和風(fēng)格與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致。這樣可以幫助用戶更快地識別和理解圖標(biāo)的功能和意義,同時也可以增強(qiáng)應(yīng)用程序或網(wǎng)站的整體視覺效果。

      使用相似的線條、顏色和風(fēng)格 為了實(shí)現(xiàn)一致性和統(tǒng)一性,設(shè)計(jì)師應(yīng)該使用相似的線條、顏色和風(fēng)格來設(shè)計(jì)圖標(biāo)。這樣可以使圖標(biāo)與整個UI界面的風(fēng)格保持一致,同時也可以使圖標(biāo)的形狀和顏色更加和諧統(tǒng)一。

      D. 可視化傳達(dá)

      明確圖標(biāo)所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標(biāo),設(shè)計(jì)師應(yīng)該確保圖標(biāo)的形狀和顏色能夠明確地傳達(dá)

      使用適當(dāng)?shù)男螤睢⒎柡皖伾珎鬟_(dá)信息 為了確保圖標(biāo)能夠明確地傳達(dá)信息,設(shè)計(jì)師應(yīng)該使用適當(dāng)?shù)男螤睢⒎柡皖伾?/p>

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

      同時,設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的形狀和顏色與應(yīng)用程序或網(wǎng)站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標(biāo)的功能和意義。

      E. 可縮放性和適應(yīng)性

      使用矢量圖形實(shí)現(xiàn)圖標(biāo)的可縮放性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性,設(shè)計(jì)師應(yīng)該使用矢量圖形來實(shí)現(xiàn)圖標(biāo)的可縮放性。

      矢量圖形是一種基于數(shù)學(xué)公式的圖形,它們可以在不失真的情況下進(jìn)行任意大小的縮放。

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

      確保在不同屏幕和設(shè)備上的可用性 為了確保圖標(biāo)在不同屏幕和設(shè)備上的可用性,設(shè)計(jì)師應(yīng)該考慮圖標(biāo)在不同分辨率和屏幕尺寸下的表現(xiàn)。

      例如,設(shè)計(jì)師應(yīng)該確保圖標(biāo)的大小和形狀適合不同屏幕和設(shè)備的顯示。

      同時,設(shè)計(jì)師也應(yīng)該確保圖標(biāo)的顏色在不同的屏幕和設(shè)備上都能夠保持一致,以幫助用戶更快地識別和理解圖標(biāo)的功能和意義。

      三、設(shè)計(jì)流程和技巧

      UI圖標(biāo)設(shè)計(jì)需要遵循一定的流程和技巧,以確保圖標(biāo)的高質(zhì)量和可用性。

      以下是一些常用的設(shè)計(jì)流程和技巧:

      A. 需求分析和功能定義

      在開始設(shè)計(jì)之前,設(shè)計(jì)師需要了解UI圖標(biāo)的使用場景和目的。這可以幫助設(shè)計(jì)師確定圖標(biāo)所代表的含義和功能,以確保圖標(biāo)的準(zhǔn)確性和可用性。

      B. 創(chuàng)意和草圖階段

      在進(jìn)行創(chuàng)意和草圖階段,設(shè)計(jì)師應(yīng)該進(jìn)行創(chuàng)意思維和頭腦風(fēng)暴,以產(chǎn)生出多種不同的設(shè)計(jì)方案。同時,設(shè)計(jì)師也應(yīng)該從簡單的草圖開始構(gòu)思圖標(biāo)設(shè)計(jì),以確保圖標(biāo)的可行性和可實(shí)現(xiàn)性。

      C. 細(xì)化和完善設(shè)計(jì)

      在細(xì)化和完善設(shè)計(jì)階段,設(shè)計(jì)師應(yīng)該使用矢量工具進(jìn)行圖標(biāo)設(shè)計(jì),并重點(diǎn)關(guān)注細(xì)節(jié)和清晰度的提升。這可以幫助設(shè)計(jì)師創(chuàng)建出具有獨(dú)特特征的圖標(biāo),并確保圖標(biāo)的可縮放性和適應(yīng)性。

      D. 反饋和優(yōu)化

      在反饋和優(yōu)化階段,設(shè)計(jì)師應(yīng)該向用戶和團(tuán)隊(duì)收集反饋,并根據(jù)反饋進(jìn)行圖標(biāo)的優(yōu)化和調(diào)整。這可以幫助設(shè)計(jì)師確保圖標(biāo)的準(zhǔn)確性和可用性,并根據(jù)用戶的需求和期望進(jìn)行調(diào)整和優(yōu)化。

      四、設(shè)計(jì)最佳實(shí)踐和案例研究

      UI圖標(biāo)設(shè)計(jì)是一個重要的設(shè)計(jì)領(lǐng)域,它可以幫助用戶更快地理解和使用應(yīng)用程序或網(wǎng)站。以下是一些成功的UI圖標(biāo)設(shè)計(jì)案例和分析。

      A. 探索成功的UI圖標(biāo)設(shè)計(jì)案例

      成功的UI圖標(biāo)設(shè)計(jì)案例可以幫助設(shè)計(jì)師了解和學(xué)習(xí)一些設(shè)計(jì)最佳實(shí)踐和技巧。成功的圖標(biāo)有很多以下只列舉兩個圖標(biāo)設(shè)計(jì)案例:

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

      B. 分析圖標(biāo)設(shè)計(jì)背后的原理和決策

      成功的UI圖標(biāo)設(shè)計(jì)案例背后都有一些共同的原理和決策。

      以下是一些分析圖標(biāo)設(shè)計(jì)背后的原理和決策的方法:

      • 了解用戶的需求和期望:設(shè)計(jì)師應(yīng)該了解用戶的需求和期望,并根據(jù)用戶的需求和期望進(jìn)行圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加符合用戶需求和期望的圖標(biāo),從而提高圖標(biāo)的可用性和易用性。
      • 遵循一致性和統(tǒng)一性原則:設(shè)計(jì)師應(yīng)該遵循一致性和統(tǒng)一性原則,使用相似的線條、顏色和風(fēng)格來設(shè)計(jì)圖標(biāo)。這可以幫助設(shè)計(jì)師創(chuàng)建出具有一致性和統(tǒng)一性的圖標(biāo),從而提高圖標(biāo)的可視化傳達(dá)和可用性。
      • 避免過度復(fù)雜化的細(xì)節(jié):設(shè)計(jì)師應(yīng)該避免過度復(fù)雜化的細(xì)節(jié),追求簡潔的圖標(biāo)設(shè)計(jì)。這可以幫助設(shè)計(jì)師創(chuàng)建出更加簡潔和易于理解的圖標(biāo),從而提高圖標(biāo)的可用性和易用性。

      五、最后

      A. 總結(jié)UI圖標(biāo)設(shè)計(jì)的重要性和原則

      UI圖標(biāo)在用戶界面中扮演著重要的角色,它們不僅能夠傳達(dá)信息和功能,還能夠增強(qiáng)用戶體驗(yàn)和界面的美感。以下是一些重要的UI圖標(biāo)設(shè)計(jì)原則:

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

      B. 鼓勵設(shè)計(jì)師繼續(xù)探索和發(fā)展圖標(biāo)設(shè)計(jì)技能

      圖標(biāo)設(shè)計(jì)是一個不斷發(fā)展和演進(jìn)的領(lǐng)域。鼓勵設(shè)計(jì)師們繼續(xù)學(xué)習(xí)、實(shí)踐和探索,通過不斷嘗試新的技術(shù)和方法,提升自己的設(shè)計(jì)能力。以下是一些建議:

      • 深入研究:學(xué)習(xí)不同的圖標(biāo)設(shè)計(jì)風(fēng)格和趨勢,深入了解各種設(shè)計(jì)工具和技術(shù),保持對設(shè)計(jì)領(lǐng)域的持續(xù)學(xué)習(xí)。
      • 觀察和啟發(fā):注意身邊的圖標(biāo)設(shè)計(jì),從成功的案例中汲取靈感,拓寬自己的設(shè)計(jì)思維。
      • 反饋和合作:與團(tuán)隊(duì)和用戶溝通交流,接受他們的反饋和建議,與其他設(shè)計(jì)師合作分享經(jīng)驗(yàn)和知識。
      • 認(rèn)識目標(biāo)用戶:了解目標(biāo)用戶的需求和偏好,將其融入到圖標(biāo)設(shè)計(jì)的決策中。

      UI圖標(biāo)設(shè)計(jì)在用戶界面中起著重要的作用。通過掌握設(shè)計(jì)原則和實(shí)踐技巧,繼續(xù)學(xué)習(xí)和發(fā)展設(shè)計(jì)技能,我們將能夠創(chuàng)造出令人印象深刻的UI圖標(biāo)作品,提升用戶體驗(yàn)和界面美感。不斷探索和挑戰(zhàn)自己,成為一名卓越的圖標(biāo)設(shè)計(jì)師!

      本文由 @Esc 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

      題圖來自 Unsplash,基于 CC0 協(xié)議

      該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

      日歷

      鏈接

      個人資料

      存檔

      主站蜘蛛池模板: 国产极品久久久久极品| 人人妻人人澡人人爽不卡视频 | 亚洲欧美精品一中文字幕| 日本边添边摸边做边爱喷水| 波多野结衣在线一区二区| 日韩精品中文字幕人妻| 四川丰满少妇无套内谢| 亚洲男人av天堂久久资源| 绝顶丰满少妇av无码| 成人午夜激情在线观看| 无码精品久久久久久人妻中字| 新余市| 国产精品自拍视频第一页| 国产香蕉97碰碰久久人人| 老熟妇Av| 国产精品你懂得| 国产女人综合久久精品视| 色妞www精品免费视频| 久草午夜视频| 国产福利在线免费观看 | 亚洲永久精品日本久精品| 亚洲伊人成综合网| 亚洲熟妇av午夜无码不卡| 国产亚洲精品久久久久秋霞不卡| 精品亚洲国产成人蜜臀av| 欧美成人va免费看视频| 日韩AV高清在线看片| 国产一区二区三区免费观看在线| 免费无码又爽又刺激网站| 在线无码va中文字幕无码| 国产成人精彩在线视频| 日本国产高清色www视频在线 | 高清国产精品人妻一区二区| 偷亚洲偷国产欧美高清| 99精品视频九九精品| 精品国产高清中文字幕| 亚洲国产在一区二区三区| 高清免费毛片| 国产精品久久久久7777| 精品欧美h无遮挡在线看中文| 无码人妻品一区二区三区精99|