人人都是産品經理社區推出産品經理培訓課程,讓BAT産品總監手把手帶你學産品吧!
ICON,是誕生于上世紀九十年的IT産業中,原意指計算機軟件中為使UI(人機界面)更加易于操作和人性化而設計出的标識特定功能的圖形标志。同時也是一種圖片格式簡稱:*.icon、*.ico。ICON既然是一種圖片(标),那麼就需要表達一些東西,可以是産品的邏輯(功能),創作者的性格,設計風格等等。
而一般工作(商業)中,ICON往往需要将某項功能(應用)進行直觀的視覺表達,讓用戶以最少的思考便可還原其現實邏輯,常使用拟真(物)。如下圖:一款桌球遊戲的ICON
除了拟真之外,有時候因為産品、創作者本身有強烈的獨有色彩(特點)或者出于某些特殊需求,采用抽象、異化實物等方式設計ICON(往往是逼格的源頭)。如下圖:一些藝術機構的ICON(不明覺厲)
除了表達産品邏輯之外,ICON還往往體現了設計師的設計情。拟真确定了ICON的形意骨架,而細節處理、光影色彩、主從骨架的布局等,往往是設計師功力深淺的體現。
設計一個ICON除了考慮上述兩點之外,還有一樣大概就是新意。同樣的基本元素,怎樣變形可以更好地突出主題(例如:采用字母做主體骨架,加上lowpoly風格,立刻就領跑其它ICON)或是類似的競品,如何體現差異化(反觀國内的IM、社交類APP,基本都是采用信息泡作為ICON的骨架,大同小異,難道沒有其它更有新意且不失易讀性的元素嗎?)
恰逢最近樓主在自學一些前端和設計的技能,且一直不滿意公衆号的ICON太幹癟,一個黃色的毛(樓主不黃,( # ▽ # ))和黑色背景。無論是表達邏輯還是美感都略搓,于是打算重新設計一個ICON。
設計之初,需要設計立意,找出公衆号ICON需要完成的哪些視覺任務:
一位弱冠騷年,一塊自留地,談談産品與設計,聊聊情感和浮生。讀文章,看故事,有所啟迪
上面一段話對這個公衆号與作者進行了粗略的定位。但有這麼一段話,還不足以精确定位ICON的立意,于是将這段話擴展,羅列若幹關鍵字,方便進一步篩選。
為了盡可能精确立意,再進行一次篩選:
篩選完之後,可以看出,關鍵字還是比較多。但是結合自身的運營小半年的一些體驗和經驗可以看出,這裡可以分離關鍵字組合成兩條風格不同的線:
- IT媒體方向:和大多數XX産品、XX設計抑或部分相關從業人員的公衆号一樣,提供專業高價值的互聯網題材内容和運營;
- 業餘寫手方向:雖然也有主要創作方向是互聯網題材的背景,但是立意在強調寫作和感悟,一個有情懷的自留地。
直白地說,前者就像是人人都是産品經理一樣的專業社區,是科技和專業知識的聚合,後者就像簡書、知乎一樣的大雜燴。
因為前者是理想狀态,後者是目前且較長一段時間内可能的情況,所以準備以這兩個線去分别設計,看看效果怎樣?
在确定立意之後,還有一步很重要,篩選可用的設計素材,這次設計中,我就想利用這些素材進行重構,名稱這些都是比較固定的東西,最大的不确定因素就是公衆号的類型,并借此引申的素材,例如:PM、Design、筆、IT、互聯網等素材。
選材
立意确定之後,就是ICON素材的選擇,顯示最重要的元素骨架(自己意淫的詞兒),意思就是什麼形态的東西來表達立意。
先說第一種立意,專業的IT媒體,将立意和一些設計思路結合發散思維:
科技感、金屬質感、線條硬朗,(類)lowpoly風、簡潔、幾何形狀、扁平化、Material Design、科幻風、毛玻璃、對比度高......
可以腦補出一堆設計相關的詞,然而這并沒有什麼卵用。這也是UI小白一樣X疼的地方:缺乏設計與創意積累,很難腦補出什麼有用的靈感。隻能乖乖打開網站去找靈感。同時打開微信訂閱号頁面,看看那些大号的設計思路。
因為設計之前就有大概的想法,将利用字母或其變形和幾何形狀結合,設計出比較線條硬朗,色彩對比高,元素簡單的風格。栗子就是人人都是産品經理中一些相關的作品。
确定這個設計風格之後,開始着手選擇素材。既然是字母變形,那麼先要選擇變形的字母:
- Mao(公衆号名稱和樓主姓)
- Maos(公衆号名稱"毛事")
- Ms(公衆号名稱"毛事")
- M(公衆号名稱和樓主姓縮寫)
- PM Mao
- GWMS(公衆号名稱)
- AaronMao(樓主洋名)
确定ICON元素(骨架)之後,就可以進一步思考設計風格。
這裡需要一個問題,什麼樣的設計風格能貼合IT、科技、PM這些關鍵字呢?
以樓主對此第一反應是:結構簡單,線條簡潔,用強烈對比或偏冷色系的色彩來表達。因為一想到IT科技,就是0和1的世界,就是機械質感,就是尖端前沿的科技。于是聯想到簡潔的幾何體則有利于表達。當然這極可能受創作者的閱曆水平而産生偏差。
如上文說道:我希望這個ICON可以色彩對比高,線條簡單,易讀和差異化明顯,最好有一些科技感(逼格)。
色彩對比高,我選擇用兩種情感強烈的色彩來營造效果,例如:紅黑,黑白,紅藍。
一般來說,用明度低的純色背景,用明度較高的顔色填充素材,可以獲得較高的視覺聚焦,容易突出主題元素。但是值得注意的是,顔色反差過于強烈,容易造成眩目感,視覺疲勞。就像紅綠等,紅藍燈,黑闆字一樣。
保證易讀性和結構簡單方便用戶記憶,用簡單的幾何圖形組合最方便直接了,三角形和正方形在我們生活中無處不在,閱讀起來基本無需解釋。
綜合上面一些要點,有如下初稿:
繪制出來之後看了一下不同具體策略的圖,覺得略顯死闆。随後進行第二種思路的設計:
業餘寫手,雖為工科男,卻長有一個文青心啊。在這條線上,我确定抛棄之前的一些思路;因為這個風格,是以文字傳播力量和價值,強調寫作,除了IT幹貨還有生活雜想,所以我想用一些輕松,溫暖的元素來表達立意,讓用戶一看到有種暖暖的感,同時又能突出寫作的意味。具體的發散過程不一一細說,結論是:
這裡第一反應就是簡書app的寫作按鈕。羽毛筆的骨架十分有逼格,滿滿文青feel。
但是筆的元素确定之後,就是寫什麼字的問題,把公衆号名字用上去。這基本是最實際的方法。但是繪制過程中發現,羽毛筆一般書寫的是花體字(對應漢字估計是草體一類吧),這時候因為布局問題和在微信UI中,公衆号ICON較小,這些字體下會使文字比較潦草,難以識别具體筆畫,進而增加用戶思考時間,很可能就流失或者印象不好。
此時隻能換種思路,恰好看到一個不錯的例子,是一隻卡通化的鉛筆ICON,入眼比較舒服,立馬就借鑒來使用。
經過一番繪制和修改,有下圖:
到這裡,這次公衆号ICON的設計過程就差不多結束了,經過這次設計的鍛煉,對ICON設計做了一個簡單的總結:
一些設計反思和總結
靈感比工具重要
這裡坦白一下,這次設計純PPT制作,原因很多啦,試用版PS過期懶得下載,PS用得不夠溜等等。但是都不重要,之所以用PPT畫,也有因為全能俊傑的啟發。其實用什麼軟件真的真的沒那麼重要,不是說你用AI或PS就有卵用。設計師核心競争力是對藝術靈感和商業用途的把握與平衡。自己第一次嘗試,0基礎,遇到最大的問題不是能不能畫出來,而是想出一個有點新意,能有實際用途的idea都特麼太困難了,源自于缺少對設計的積累和美感的捕捉。隻能靠多看案例,多想原因,多練習繪制來提升。
ICON設計的一些總結
- 元素的造型盡可能簡潔和完整:讓用戶越快反應出背後的邏輯越好
- 表達符合的認知習慣:不是所有設計風格都可以和一些元素相搭配,注意符合生活中的認知習慣,誇張和變換都要有個度
- 色彩搭配協調:之前一位女神曾說道,大量黑底白字的視覺體驗不好。諸如還有紅藍搭配有閃爍感之類,這方面需要補一下色彩學的知識避免踩坑。除此之外,低飽和度的顔色可以更顯高檔感,因為顔色越飽和,傳遞的情緒越強烈,越容易影響用戶。這裡在第二思路的設計中,卡通鉛筆的軀幹用了低飽和的藍色。當然,借用一些優秀設計的配色就比較簡單,像樓主鐘愛網易的紅黑和京東的紅白。說實話,我還是蠻喜歡黑底白圖的。囧。
- 位置排列體會:這一點深有體悟,在第二種思路的繪制中,筆的傾斜角和文字擺放的位置很大關聯,既要保證元素的重心盡可能靠近幾何中心,又要排列好兩塊元素,十分麻煩。
- ICON應該是一套具有适用性且互相協調的集合,這次嘗試設計了公衆号的ICON,接下來可能會把文章開頭結尾的一些圖标也繪好。這樣才是完整的視覺系統。
#專欄作家#
Aaron毛,關我毛事,人人都是産品經理專欄作家,90後工科男,信奉“在你身邊,為你設計”。電商産品汪,關注移動電商和社交領域。主業是熱愛探索各類産品設計之道,副業是積極尋找産品安慰師的愛撫。業餘探索微信社群的力量,運營了一個存活1年以上的互聯網垂直社群,歡迎同行交(si)流(bi)
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!