*本文作者系潑辣修圖團隊首席設(shè)計師Adi

圖標(biāo)同圖片一樣，相較于文字擁有更強的表現(xiàn)力，它是人類交流方式立體化和多面化的體現(xiàn)，同時也是設(shè)計中的永恒語言。它們結(jié)合人類環(huán)境的形狀和樣式，溶解成現(xiàn)代人類社會難以想象的各種各樣的符號標(biāo)志。

動態(tài)設(shè)計的邏輯

設(shè)計最為重要的特征之一就是能夠適應(yīng)人類社會的動態(tài)變化。也正是由于這個特性，這種媒介成功的與我們的理念一起發(fā)展，并且由于它的適應(yīng)性，它也是視覺傳達中最具活力的分支，同時還是商業(yè)社會中經(jīng)濟需求與藝術(shù)表達之間的必要橋梁。

作為這種動態(tài)特性的一個很好的例子，我們可以提到與這個主題最為相似的分支：UI設(shè)計，其中例如擬物化（作為一種趨勢）似乎是一個被遺忘的過去。但是，擬物化設(shè)計不僅僅是一種趨勢，而是將人們的互動方式以數(shù)字內(nèi)容表現(xiàn)出來的工具，這是合乎數(shù)字通信必然改革的一步，即為無技術(shù)時代的到來做的前期教育和必然準(zhǔn)備。

盡管設(shè)計在不斷變化，但設(shè)計的基本骨干之一卻幾乎保持不變（我推薦大家觀看由Genevieve von Petzinger發(fā)表的一篇簡短的TED講座，內(nèi)容是相關(guān)主題） ，即每個人都可以理解的象征、精密而簡約的多層次的視覺語言。 關(guān)于這個話題的細節(jié)以及這個設(shè)計流程的主要焦點，我將在下文中進一步闡述。

符號的視覺表達

“潑辣修圖設(shè)計語言一致性”是我的首個設(shè)計任務(wù)之一。

這是一個艱巨而嚴(yán)肅的任務(wù)，特別是當(dāng)你注意到你正在與超過1500萬的用戶溝通，并且他們已經(jīng)形成了一定的潑辣修圖使用習(xí)慣時。

在任務(wù)的初期，我對用戶群和競爭對手進行了一些研究，通過這里得出了一個眾所周知的結(jié)論：傾聽實際上是分析和定義問題過程中最重要的技術(shù)。但是傾聽不一定意味著滿足所有用戶的要求，而是了解他們的需求和原因，這可以幫助我們得到更好的結(jié)果。

考慮到早期的設(shè)計過程，現(xiàn)有的批評和要求，并考慮到未來的更新和日益增多的應(yīng)用程序，不難得出結(jié)論：圖標(biāo)是交互的關(guān)鍵。其原因在于，在當(dāng)今多平臺應(yīng)用程序的設(shè)計中，存在一個顯著而通用的途徑去轉(zhuǎn)變設(shè)計元素（通常通過創(chuàng)建和復(fù)制不同的色調(diào)，而形狀和字體的變化則主要基于預(yù)設(shè)框架和微觀趨勢）。在這種情況下，我認為UI一致性的基礎(chǔ)是圖形語言，即特定的圖標(biāo)集。

創(chuàng)造過程

潑辣修圖以及任何高級圖片編輯軟件都擁有十分豐富的選項，包含了豐富的交互元素、工具和各種術(shù)語，因此UI組件的細節(jié)至關(guān)重要。為此，這一套UI由簡單明了的“平面”元素組成，并結(jié)合極簡風(fēng)格的圖標(biāo)。在這種情況下，圖標(biāo)扮演著用戶與應(yīng)用程序之間的交互式鏈接角色，即用戶與軟件溝通的語言。

我首先在紙上畫出了草圖，然后使用Sketch軟件轉(zhuǎn)移到數(shù)字表單。圖標(biāo)的設(shè)計沒有根本改變，采用的形式被保留、文字變化很小。為了與公司新的（圓形）視覺識別體系保持更高的一致性，我使用略微彎曲的邊緣與嚴(yán)格的用戶界面、矩形圖像以及24px的圖標(biāo)寬高比形成鮮明對比。

完成設(shè)計后，我們在用戶群組中對新圖標(biāo)進行了測試，然后更新了軟件。兩個月的研究和工作終于得到了一套180多個重新設(shè)計的完美矢量圖標(biāo)集。

技術(shù)問題和解決方案

潑辣修圖是一個基于Web Kit的軟件套件，因此導(dǎo)出格式（.svg和.png）的穩(wěn)定性和兼容性都不太滿意，這指示我們創(chuàng)建Dbbat圖標(biāo)字體，主要是因為后者處理起來更簡單，并且它們的體積也更小。

一個相對容易的任務(wù)，如果沒有找到合適的方法，可能會很容易變得復(fù)雜。

我必須指出，我開始是在Adobe Illustrator中創(chuàng)建的原始圖標(biāo)，盡管有多年的使用經(jīng)驗，以及有數(shù)百個圖標(biāo)設(shè)計和數(shù)十個圖標(biāo)集都在這個軟件之中，但Adobe Illustrator CC 2017依舊被證明是相當(dāng)不穩(wěn)定的任務(wù)解決方案。簡而言之，導(dǎo)出多個表單，命名和組織文件以及優(yōu)化.svg格式和代碼是最大的問題，因此我使用Sketch應(yīng)用程序完成了設(shè)計。

另一方面，Sketch并不是真正的對字體設(shè)計師友好的軟件，所以為什么我被迫將完成的圖標(biāo)復(fù)制到Illustrator（幸運的是這里沒有問題），然后為Glyphs編輯做準(zhǔn)備。我使用標(biāo)準(zhǔn)的Unicode圖表創(chuàng)建了等寬字符圖標(biāo)。

幸運的是，Glyphs有一系列優(yōu)質(zhì)的免費插件和腳本，您可以使用它們來雕琢字體的每一個細節(jié)。由于這個字體的基本目的是為了簡化軟件本身，也是為了簡化開發(fā)過程，除了標(biāo)準(zhǔn)的字體導(dǎo)出（對于otf，ttf和woof）外，我使用了webfont測試HTML腳本。

這種技術(shù)的優(yōu)點是可以直接在瀏覽器中測試dingbat字體（eot，woff，woff2），還可以深入了解CSS中的unicode字符。

這就是新版潑辣修圖圖標(biāo)設(shè)計與調(diào)試的全過程。

結(jié)果和好處

創(chuàng)建一個新的視覺語言并保持一致性，從來不是一個簡單的任務(wù)，但這項工作的好處很多。 除了全新繪制的圖標(biāo)之外，潑辣修圖還有一套可以輕松拓展與升級的全新字符庫。

為了與更多的設(shè)計師共享這一創(chuàng)意成果，我們決定以開源的形式與大家分享這一套圖標(biāo)與字體，任何組織或個人都可以免費的將這套圖標(biāo)與字體用于任何用途，我們會聯(lián)合「優(yōu)設(shè)網(wǎng)」（www.uisdc.com）于今晚發(fā)布這套素材，大家可以前往「優(yōu)設(shè)網(wǎng)」下載，希望能夠為大家的創(chuàng)意工作帶來一些幫助！