從零開始學!B 端產品圖標繪製指南(創意篇)

2019-09-25     視覺設計工坊

設計師可能會覺得 B 端設計少有發揮空間。一是產品風格嚴肅專業,不像 C 端產品風格多種多樣,可以調動起用戶豐富細膩的情緒;二是用戶更關注成本、效率、質量、安全,而非用戶體驗,公司願意為此投入的資源也有限;三是視覺上的創新可能對用戶習慣產生衝擊,造成降低工作效率甚至出錯等後果。

如此一來,設計師很難以一己之力推動創新。但設計師不該任由客觀條件禁錮、約束自己的創造力,在夾縫中也要努力生長。創造力,始終是設計師最核心的競爭力。

本文總結的是我在繪製 B 端圖標之前,創意發散階段用到的方法和技巧,拋磚引玉,歡迎大家在留言區討論補充。

盤點和分類,居高臨下整體把握

B 端平台因其覆蓋的業務類型多,操作鏈路長,角色權限複雜等特性,圖標種類多、數量大。因此建議大家先對圖標進行盤點和分類,從一個居高臨下的角度獲得整體上的把握。盤點分類工作需要注意以下兩點。

1. 遵循窮盡互斥原則

即不遺漏、不重複原則。分類可以多個層級,也可以多個維度。劃分合理的分類維度,需要設計師深入了解業務,對抽象的專有名詞刨根問底,並對未來可能擴充的內容做出預判。

2. 長期維護

產品是個生命體,疊代中隨時會出現業務和功能模塊的調整、新增、重組、合併等變動,圖標整理也不是一勞永逸的,需要長期維護。推薦使用 Excel 等表格類軟體或在線工具來管理,便於團隊共享和協作,也有利於自我沉澱。

從草圖開始,不要在意手繪技法

有些設計師的習慣是上手就用電腦畫圖。本該是創意發散階段,卻從第一個圖標開始就陷入細節的泥沼里爬不出來,線條 1px 還是 2px 好?圓角是 4px 還是 8px?顏色要不要換一個?有投影會不會更精緻?結果花了很多時間,卻沒有高效率高質量的產出。

有些設計師覺得自己沒有紮實的繪畫基礎,對手繪草圖敬而遠之。其實畫草圖不是為了交付給別人,而是設計師對頭腦里一閃而過的靈感想法的快速記錄。這個記錄過程包括橫向的發散對比,也包括縱向的推敲深化。所以儘管大膽落筆就好,至於草圖表現形式是不是美觀成熟,不要在意。

日本著名產品設計大師,深澤直人的草圖

創意發散,方寸之間的頭腦風暴

怎樣為圖標選取合適的形象?在創意發散階段,我一般混用下面幾個套路。

1. 客觀形象

這是最直接的方法,圖標形象在現實生活中客觀存在,抽象出整體外觀或者部分特徵形態,也可選取場景中的代表物。

「購物車」選取手推車整體外觀,「倉庫」選取了場景代表物「貨架」

2. 隱喻

把抽象的概念,藉以具體事物來表現。這個難度大一些,發散的時候要結合生活經驗展開豐富的聯想和類比。

用「雪花」類比「凍結」,用「警燈」類比「預警」

3. 拋開固化形象

是不是一說到主頁,大家就聯想到一座尖頂的房子?一說到搜索,就是放大鏡?在創意發散階段,大家儘量嘗試拋開那些已經固化的形象,釋放自己的好奇心,探索一下還有沒有其他的可能性,刻意培養自己的創造力。另外隨著科技發展技術更迭,一些通用形象也在慢慢被淘汰,被代表新技術的形象取代。例如保存圖標從原來的軟盤形象變成了雲朵/箭頭,密碼圖標從鎖頭或鑰匙形象變成更豐富的形象。

保存圖標的進化

密碼圖標有了更豐富的形象

這不是鼓動大家必須要用新創意取代固化形象。創新的價值是洞察問題本質,找到更好的解決方案。在接下來的方案篩選階段,建議大家還是選擇用戶接受度高的形象,而那些沒有入選的創意圖形,已經實現了設計師提升自己的價值。

4. 組合元素

對於抽象、複雜、組合的概念,可以用組合元素來闡述含義和使用場景。

「利息」是經過時間積累產生的費用或收益,「貨押」體現貨物和現金之間的轉換關係

「對公打款」使用企業帳戶轉帳,「人臉核身」通過面部識別驗證用戶身份

5. 直接用字

這個方法簡單粗暴了點,但在表達效果上也是直接且準確的。

「包郵」圖標、「正品保證」圖標

總結

  • 圖標的特徵要足夠鮮明,容易被用戶識別。
  • 在選取形象時,要還原使用場景,貼合目標用戶的心理模型。不同場景下或不同目標受眾看到同一形象,腦袋中映射到的可能是不同物品。例如消息框,在不同的場景下可能是消息、通知、評論、留言等等。

文章來源: https://twgreatdaily.com/zh-mo/rhYPb20BJleJMoPMzbNP.html