產(chǎn)品設(shè)計丨ICON設(shè)計的反思與總結(jié),以公眾號為例

0 評論 13675 瀏覽 50 收藏 15 分鐘

何謂ICON設(shè)計

ICON,是誕生于上世紀(jì)九十年的IT產(chǎn)業(yè)中,原意指計算機軟件中為使UI(人機界面)更加易于操作和人性化而設(shè)計出的標(biāo)識特定功能的圖形標(biāo)志。同時也是一種圖片格式簡稱:*.icon、*.ico。ICON既然是一種圖片(標(biāo)),那么就需要表達(dá)一些東西,可以是產(chǎn)品的邏輯(功能),創(chuàng)作者的性格,設(shè)計風(fēng)格等等。

而一般工作(商業(yè))中,ICON往往需要將某項功能(應(yīng)用)進行直觀的視覺表達(dá),讓用戶以最少的思考便可還原其現(xiàn)實邏輯,常使用擬真(物)。如下圖:一款桌球游戲的ICON

152262-fd4784b48cfa6468

除了擬真之外,有時候因為產(chǎn)品、創(chuàng)作者本身有強烈的獨有色彩(特點)或者出于某些特殊需求,采用抽象、異化實物等方式設(shè)計ICON(往往是逼格的源頭)。如下圖:一些藝術(shù)機構(gòu)的ICON(不明覺厲)

152262-c5603741d2586f0e

除了表達(dá)產(chǎn)品邏輯之外,ICON還往往體現(xiàn)了設(shè)計師的設(shè)計情。擬真確定了ICON的形意骨架,而細(xì)節(jié)處理、光影色彩、主從骨架的布局等,往往是設(shè)計師功力深淺的體現(xiàn)。

設(shè)計一個ICON除了考慮上述兩點之外,還有一樣大概就是新意。同樣的基本元素,怎樣變形可以更好地突出主題(例如:采用字母做主體骨架,加上lowpoly風(fēng)格,立刻就領(lǐng)跑其它ICON)或是類似的競品,如何體現(xiàn)差異化(反觀國內(nèi)的IM、社交類APP,基本都是采用信息泡作為ICON的骨架,大同小異,難道沒有其它更有新意且不失易讀性的元素嗎?)

152262-e0c72825bffdc792

以公眾號ICON設(shè)計為例

恰逢最近樓主在自學(xué)一些前端和設(shè)計的技能,且一直不滿意公眾號的ICON太干癟,一個黃色的毛(樓主不黃,( # ▽ # ))和黑色背景。無論是表達(dá)邏輯還是美感都略搓,于是打算重新設(shè)計一個ICON。

立意

設(shè)計之初,需要設(shè)計立意,找出公眾號ICON需要完成的哪些視覺任務(wù):

  • 表達(dá)自我(產(chǎn)品):將這個公眾號是什么,做什么,有什么特色等含義傳遞給用戶…
  • 彰顯美感:用戶能通過這個ICON感知到背后邏輯之后,需要額外的美感來提升視覺體驗,也凸顯樓主逼格(如果有的話…)

一位弱冠騷年,一塊自留地,談?wù)劗a(chǎn)品與設(shè)計,聊聊情感和浮生。讀文章,看故事,有所啟迪

上面一段話對這個公眾號與作者進行了粗略的定位。但有這么一段話,還不足以精確定位ICON的立意,于是將這段話擴展,羅列若干關(guān)鍵字,方便進一步篩選。

152262-ea25aca9d673dedf

為了盡可能精確立意,再進行一次篩選:

152262-d51f3cbf52fbffa4

篩選完之后,可以看出,關(guān)鍵字還是比較多。但是結(jié)合自身的運營小半年的一些體驗和經(jīng)驗可以看出,這里可以分離關(guān)鍵字組合成兩條風(fēng)格不同的線:

  • ?IT媒體方向:和大多數(shù)XX產(chǎn)品、XX設(shè)計抑或部分相關(guān)從業(yè)人員的公眾號一樣,提供專業(yè)高價值的互聯(lián)網(wǎng)題材內(nèi)容和運營;
  • 業(yè)余寫手方向:雖然也有主要創(chuàng)作方向是互聯(lián)網(wǎng)題材的背景,但是立意在強調(diào)寫作和感悟,一個有情懷的自留地。

直白地說,前者就像是人人都是產(chǎn)品經(jīng)理一樣的專業(yè)社區(qū),是科技和專業(yè)知識的聚合,后者就像簡書、知乎一樣的大雜燴。

因為前者是理想狀態(tài),后者是目前且較長一段時間內(nèi)可能的情況,所以準(zhǔn)備以這兩個線去分別設(shè)計,看看效果怎樣?

在確定立意之后,還有一步很重要,篩選可用的設(shè)計素材,這次設(shè)計中,我就想利用這些素材進行重構(gòu),名稱這些都是比較固定的東西,最大的不確定因素就是公眾號的類型,并借此引申的素材,例如:PM、Design、筆、IT、互聯(lián)網(wǎng)等素材。

選材

立意確定之后,就是ICON素材的選擇,顯示最重要的元素骨架(自己意淫的詞兒),意思就是什么形態(tài)的東西來表達(dá)立意。

先說第一種立意,專業(yè)的IT媒體,將立意和一些設(shè)計思路結(jié)合發(fā)散思維:

科技感、金屬質(zhì)感、線條硬朗,(類)lowpoly風(fēng)、簡潔、幾何形狀、扁平化、Material Design、科幻風(fēng)、毛玻璃、對比度高……

可以腦補出一堆設(shè)計相關(guān)的詞,然而這并沒有什么卵用。這也是UI小白一樣X疼的地方:缺乏設(shè)計與創(chuàng)意積累,很難腦補出什么有用的靈感。只能乖乖打開網(wǎng)站去找靈感。同時打開微信訂閱號頁面,看看那些大號的設(shè)計思路。

因為設(shè)計之前就有大概的想法,將利用字母或其變形和幾何形狀結(jié)合,設(shè)計出比較線條硬朗,色彩對比高,元素簡單的風(fēng)格。栗子就是人人都是產(chǎn)品經(jīng)理中一些相關(guān)的作品

確定這個設(shè)計風(fēng)格之后,開始著手選擇素材。既然是字母變形,那么先要選擇變形的字母:

  • Mao(公眾號名稱和樓主姓)
  • Maos(公眾號名稱”毛事”)
  • Ms(公眾號名稱”毛事”)
  • M(公眾號名稱和樓主姓縮寫)
  • PM+Mao
  • GWMS(公眾號名稱)
  • AaronMao(樓主洋名)

確定ICON元素(骨架)之后,就可以進一步思考設(shè)計風(fēng)格。

這里需要一個問題,什么樣的設(shè)計風(fēng)格能貼合IT、科技、PM這些關(guān)鍵字呢?

以樓主對此第一反應(yīng)是:結(jié)構(gòu)簡單,線條簡潔,用強烈對比或偏冷色系的色彩來表達(dá)。因為一想到IT科技,就是0和1的世界,就是機械質(zhì)感,就是尖端前沿的科技。于是聯(lián)想到簡潔的幾何體則有利于表達(dá)。當(dāng)然這極可能受創(chuàng)作者的閱歷水平而產(chǎn)生偏差。

如上文說道:我希望這個ICON可以色彩對比高,線條簡單,易讀和差異化明顯,最好有一些科技感(逼格)。

色彩對比高,我選擇用兩種情感強烈的色彩來營造效果,例如:紅黑,黑白,紅藍(lán)。

一般來說,用明度低的純色背景,用明度較高的顏色填充素材,可以獲得較高的視覺聚焦,容易突出主題元素。但是值得注意的是,顏色反差過于強烈,容易造成眩目感,視覺疲勞。就像紅綠等,紅藍(lán)燈,黑板字一樣。

保證易讀性和結(jié)構(gòu)簡單方便用戶記憶,用簡單的幾何圖形組合最方便直接了,三角形和正方形在我們生活中無處不在,閱讀起來基本無需解釋。

綜合上面一些要點,有如下初稿:

152262-5d2db90abf5ad00f

繪制出來之后看了一下不同具體策略的圖,覺得略顯死板。隨后進行第二種思路的設(shè)計:

業(yè)余寫手,雖為工科男,卻長有一個文青心啊。在這條線上,我確定拋棄之前的一些思路;因為這個風(fēng)格,是以文字傳播力量和價值,強調(diào)寫作,除了IT干貨還有生活雜想,所以我想用一些輕松,溫暖的元素來表達(dá)立意,讓用戶一看到有種暖暖的感,同時又能突出寫作的意味。具體的發(fā)散過程不一一細(xì)說,結(jié)論是:

  • 寫作–用筆寫字;
  • 溫暖的情感–暖色調(diào)or卡通色彩;

這里第一反應(yīng)就是簡書app的寫作按鈕。羽毛筆的骨架十分有逼格,滿滿文青feel。

但是筆的元素確定之后,就是寫什么字的問題,把公眾號名字用上去。這基本是最實際的方法。但是繪制過程中發(fā)現(xiàn),羽毛筆一般書寫的是花體字(對應(yīng)漢字估計是草體一類吧),這時候因為布局問題和在微信UI中,公眾號ICON較小,這些字體下會使文字比較潦草,難以識別具體筆畫,進而增加用戶思考時間,很可能就流失或者印象不好。

此時只能換種思路,恰好看到一個不錯的例子,是一只卡通化的鉛筆ICON,入眼比較舒服,立馬就借鑒來使用。

經(jīng)過一番繪制和修改,有下圖:

152262-5bfd8d6e76c6f3a9

到這里,這次公眾號ICON的設(shè)計過程就差不多結(jié)束了,經(jīng)過這次設(shè)計的鍛煉,對ICON設(shè)計做了一個簡單的總結(jié):

152262-f1800e99f117cea0

一些設(shè)計反思和總結(jié)

靈感比工具重要

這里坦白一下,這次設(shè)計純PPT制作,原因很多啦,試用版PS過期懶得下載,PS用得不夠溜等等。但是都不重要,之所以用PPT畫,也有因為全能俊杰的啟發(fā)。其實用什么軟件真的真的沒那么重要,不是說你用AI或PS就有卵用。設(shè)計師核心競爭力是對藝術(shù)靈感和商業(yè)用途的把握與平衡。自己第一次嘗試,0基礎(chǔ),遇到最大的問題不是能不能畫出來,而是想出一個有點新意,能有實際用途的idea都特么太困難了,源自于缺少對設(shè)計的積累和美感的捕捉。只能靠多看案例,多想原因,多練習(xí)繪制來提升。

ICON設(shè)計的一些總結(jié)

  1. 元素的造型盡可能簡潔和完整:讓用戶越快反應(yīng)出背后的邏輯越好
  2. 表達(dá)符合的認(rèn)知習(xí)慣:不是所有設(shè)計風(fēng)格都可以和一些元素相搭配,注意符合生活中的認(rèn)知習(xí)慣,夸張和變換都要有個度
  3. 色彩搭配協(xié)調(diào):之前一位女神曾說道,大量黑底白字的視覺體驗不好。諸如還有紅藍(lán)搭配有閃爍感之類,這方面需要補一下色彩學(xué)的知識避免踩坑。除此之外,低飽和度的顏色可以更顯高檔感,因為顏色越飽和,傳遞的情緒越強烈,越容易影響用戶。這里在第二思路的設(shè)計中,卡通鉛筆的軀干用了低飽和的藍(lán)色。當(dāng)然,借用一些優(yōu)秀設(shè)計的配色就比較簡單,像樓主鐘愛網(wǎng)易的紅黑和京東的紅白。說實話,我還是蠻喜歡黑底白圖的。囧。
  4. 位置排列體會:這一點深有體悟,在第二種思路的繪制中,筆的傾斜角和文字?jǐn)[放的位置很大關(guān)聯(lián),既要保證元素的重心盡可能靠近幾何中心,又要排列好兩塊元素,十分麻煩。
  5. ICON應(yīng)該是一套具有適用性且互相協(xié)調(diào)的集合,這次嘗試設(shè)計了公眾號的ICON,接下來可能會把文章開頭結(jié)尾的一些圖標(biāo)也繪好。這樣才是完整的視覺系統(tǒng)。

#專欄作家#

Aaron毛,微信公眾號:關(guān)我毛事,人人都是產(chǎn)品經(jīng)理專欄作家,90后工科男,信奉“在你身邊,為你設(shè)計”。電商產(chǎn)品汪,關(guān)注移動電商和社交領(lǐng)域。主業(yè)是熱愛探索各類產(chǎn)品設(shè)計之道,副業(yè)是積極尋找產(chǎn)品安慰師的愛撫。業(yè)余探索微信社群的力量,運營了一個存活1年以上的互聯(lián)網(wǎng)垂直社群,歡迎同行交(si)流(bi)

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!