插畫如何助力UI多場景設計

2020-12-25 人人都是產品經理

插畫目前在UI設計中已經逐漸成為了較為重要甚至不可或缺的一部分,無論是在運營UI還是在UX中,插畫設計以自己獨特的屬性魅力,成為了UI設計中的新趨勢,今天我們就來聊聊插畫對於不同需求與場景下的UI設計的助力。

插畫在UI中的使用可以被視為一個較為聚焦的使用方式,在這樣的場景限定下的插畫,我們不能以單獨的藝術畫作或是信筆塗鴉單獨視之,而是將其帶入整個界面、整個產品中去理解。

那麼也就是說在創作和使用插畫的時候一定要將需求方的價值主張、盈利點、品牌價值、產品定位、企業文化調性等納入重要考量標準同時還要思考用戶的期許需求、體驗感、潮流喜好等。

插畫本身自帶的優勢其實就極為明顯,尤其是從視覺的角度來說,相比於文字,插畫對於信息傳遞的賦能是文字無法比擬的;具體體現在:信息傳遞效率、視覺隱喻、故事性、藝術性、包容性與與時俱進性。

首先,選擇插畫是我們人類生理性的選擇,實驗心理學家赤瑞特拉曾在測試人類獲取信息來源的實驗中表示,人類獲取的信息83%來自視覺、11%來自聽覺、3.5%來自嗅覺、1.5%來自觸覺、1%來自味覺,所以很明顯視覺是我們主要感知這個世界的方式。

而圖片的信息傳遞特徵是多線同時以一種匯總的方式進行傳遞,同樣的一個場景也許你幾秒鐘就能清晰的抓取大部分的信息,相對於純文字來說,圖片(插畫)具有更高的視覺信息傳遞效率。

當然這裡並不是說文字傳遞就一定比圖片傳遞差,文字相比於圖片而言具有對想像的空間限制較小等優勢,只是在產品中基於快速傳達、精準接收的需求而言,圖片的效率在很大程度上是優於文字的。

每一幅插畫都可以理解為一個小情景,情境中包含了場景、角色這些概念。每個角色在這個場景中並不孤立而存在組成一個整體,在同一個場景的組織下會角色之間產生了屬於他們專屬的故事。

插畫脫胎於藝術繪畫的範疇,也是傳統藝術繪畫的分支,所以其無論是出於什麼目的被創作,都會不由自主的帶有一定的藝術氣質,十分有利于格調感、品質感、氛圍感、個性感的營造。

而且更重要的是插畫會隨著時代潮流的發展不斷更迭著自己的風格以適應每個時代的喜好,與時俱進。

2.2 用戶和市場的需求

除了插畫本身的優勢以外,能讓插畫如今大行其道的關鍵原因還是市場和用戶的選擇。

2.2.1 情感化需求

在目前被稱為UI設計的下半場的階段,用戶對於產品有了更深層次的訴求,不再是僅僅局限於產品的好用;同時也需要更有溫度的產品,更能彰顯自身品味的產品,基於這樣的需求,插畫無疑是承接這一需求較為優秀的載體。

圖形化的表達會增加趣味性和情感連接屬性,豐富產品顏色基調,擴大產品情感閾值。

2.2.2 品牌差異化需求

當產品的功能已經趨於完善,僅從功能性上來說,同類產品之間很難再拉開明顯的差距,這個時候新的增長需要依託於品牌的調性提升,建立自己獨有的IP屬性,此時一個產品代表了一個具有一定人格化的品牌形象。

想要在用戶的心中錨定出自己別具一格的Style,就需要營造出屬於自己的視覺語言及品牌元素,而選擇插畫進行設計層面上的助力無疑是值得考慮的方向,同時這也是品牌感營造的重要組成部分。

3. 插畫對於UI的意義

談到插畫對於UI的意義時,我們需要思考的是UI本身對於產品的意義與主要作用,這對於UI工作者來說答案並不陌生,即:視覺傳達、交互引導、品牌價值。

3.1 視覺傳達

視覺傳達是最表層也是最直接作用影響於UI和用戶的一個層次維度,它通過視覺元素與用戶視覺感知的第一時間連接,直接決定用戶對於UI及其所屬產品的首次印象。

好的插畫設計在UI和產品中對於用戶的吸引會起到十分顯著的助力作用,具體表現為:滿足審美需求、更為生動有趣的傳達、增大單位面積信息承載量。

3.1.1 滿足審美需求

就插畫本身而言,它屬於繪畫藝術作品的範疇,所以從插畫的基因之中是自帶藝術欣賞性在其中的。

而上文中也提到過,插畫的創作形式和風格眾多,所以對於用戶而言,對插畫的喜好的不同體現了不同的受眾品味,對產品來說這也是彰顯企業文化的表徵特性。

而這些需求從視覺的角度來看可以認為是個人或集體審美的體現,無論是產品設計、環藝設計還是數字媒體設計等滿足審美的需求一直是設計追求的重要課題。

3.1.2 更為生動與有趣

除了在上文中提到的插畫本身具有更高的信息傳遞效率外,相比於文字在很多方面能做到更為快速、準確、直觀的意思傳達外。

因為插畫本身圖形化的表達方式就是具有親和力的,那麼在傳遞同樣的意思的時候,插畫的表達和敘述方式會更為具有生動性和趣味性。

如此,不僅讓用戶可以快速知曉需要被傳達的:功能更新、產品特點、差異屬性……還能讓用戶在第一眼看到的時刻就迅速拉近與產品之間的距離,消除陌生感。

3.1.3 增大固定面積信息承載量

這點來說,主要是針對動態插畫而言。插畫在UI中雖然是以固定組件的形式而大量存在,但是在固定的面積內,插畫可以通過動態的展示形式(如:滾動播放、微動效、組件切換),不斷更新在固定面積內的不同內容。

這時插畫就如同短視頻一般,被賦予了時間這個新的維度,所能夠承載的信息量在有限面積內便具有無限擴張的可能總的來說,這一步需要做到悅目的地步

3.2 交互引導

除了在視覺層進行第一眼的吸引作用外,因為插畫本身具有一定的故事敘述性在裡面,可以被安排入一些短小的情節。所以利用這樣的故事敘述性,在頁面中插畫對於交互體驗的提升同樣不可忽視,具體體現在:

3.2.1 狀態提示與引導操作

用戶在與UI進行交互的時候,經常會在很多操作的時候出現操作不可預知或是操作不明確的困擾。

這時為了提升用戶交互動線的流暢程度、消除操作中不可預知性所帶來的不必要的困擾,插畫此時對於用戶操作的提示與引導作用就顯得非常重要。

3.2.2 情緒的緩解與肯定

從目前主流用戶的APP使用數量來說,一個用戶平均每天會與10—25個左右的APP發生交互使用關係。

除了因工作必要和生活必要需要打開並使用的APP外,其餘的APP產品如果想要儘可能的吸引用戶更多的使用時間、使用頻率以提升更多的日活數據等,那麼對用戶操作體驗情緒的把控是至關重要的。

而在這個情緒化設計越來越被重視的年代,在操作體驗中對於用戶出現情緒的正面、負面情緒的正確引導是提升用戶使用體驗感、增加用戶粘性至關重要的點。

對於此更直白的說就是對負面情緒和操作未知恐懼進行疏導和緩解,對正確操作進行正向的肯定。

總的來說,這一步需要做到悅心的地步。

3.3 品牌價值

從產品的角度來說,無論是視覺吸引還是用戶體驗其根本目的都是為了盈利這樣一個核心訴求來進行服務,而當產品的功能價值已經無法顯現出明顯的優勢的時候,品牌價值所帶來的巨大升值空間就是產品需要在新的階段需要努力的發力點。

本質上來說品牌貫穿了所有設計內容,它是一套體系,只不過最後的落腳點不同而已。

通過串聯這些落腳點,形成品牌記憶,最後把產品的價值達到最大化,而在設計內容中將品牌進行穿針引線,插畫無疑是十分適合的選擇。具體來說主要表現在:

3.3.1 品牌定位

如前文所說,產品的IP是一個產品的人格化形象,而這些人格化的面貌、內核都會在設計中通過視覺的形式給予受眾第一時間的傳達。

通過這樣的傳達,受眾能迅速的被告知產品的產品定位、企業文化、氣質屬性……這也是品牌在用戶心中錨定下自身特徵的重要第一步。

舉個最簡單的例子為什麼很多人看到一個產品第一眼會有:「這個產品是做給年輕人的」、「這個產品應該是服務潮人的」這樣的定論,都是因為第一眼被傳達了品牌的定位的緣故而插畫本身可以做到的是將上述信息以給予用戶一種「看圖說話」的模式來對產品進行閱讀。

3.3.2 差異定製

錨定品牌形象只是後產品時代品牌打入用戶內心的第一步,其底層邏輯是為了在高度同質化的使用屬性中做出差異化競爭,建立自己獨特的調性,從而在用戶心中烙印該產品的專屬記憶,而專屬的記憶的連接就需要獨一無二的符號語義。

如果說符號語義太抽象,那麼不妨聯繫插畫的藝術屬性:藝術風格。

就如同每個畫家都擁有自己的畫風一樣,每個產品的基因都是有其獨特屬性存在的,打造、定製自己的專屬插畫符號系統,其實就是將這種獨特基因屬性外化,找到自己的「畫風」。

舉個例子,為什麼大家每當提到租房軟體也許腦中會有很多選擇,但是一旦給出年輕、潮流、插畫這些關鍵詞的時候第一時間就會想到自如,因為自如已經在產品差異層面打造了自己的「畫風」。

3.3.3 重複與衍生

除了差異化與定位錨定以外,插畫重大的意義在於能將一個產品整合一個套系,並且易於將品牌元素轉化為各種形式在產品的各個位面進行復用,通過不斷地復用讓品牌形象能夠得到不斷的重複。

畢竟所謂的品牌價值最大化其本質就是將品牌概念以一定頻率不斷的重複以達到廣而告之,進而在用戶心中留下深刻、立體的形象,比如當年電視上動不動就會聽到「收禮只收腦白金」的slogan一樣。

而在重複這個行為中對於具體產品而言更為實際的意義則是衍生,衍生在落地中具體表現在:

  • 跨媒體、媒介的適配:電腦、手機、平板等多種客戶端、硬體中的匹配與嵌入;
  • 品牌物料的多元化:產品因企業IP所產生的周邊、文創等一系列商業衍生物。

總的來說,這一步需要做到悅神的地步。

3.4 小結

插畫對UI的意義存在於:

  • 視覺上,滿足審美的需求,更生動的傳達信息以及擴大單位面積內信息的承載量;
  • 交互上,引導用戶優化操作並進行情緒的疏導與控制;
  • 品牌上,進行品牌的定位,提升差異化競爭力並創造重複與衍生的可行性。

4. 插畫實際應用方法論

4.1 被需求的時機和場景

談到插畫落地的實際運用時,很多人的慣性思路是對於各種風格進行具體的分析然後對應具體的產品特性進行篩選,這無可厚非。但是本文以為相對於討論風格定位,從產品的層面去思考插畫在UI中被需要的場景和時機則更為重要。

經過了大量的實際案例和優秀產品調研,插畫在UI場景中被需求的時機與場景體現在:

4.1.1 活動內容的吸引

當產品中出現新活動、層級較高的信息需要告知用戶並有將用戶吸引誘導其點擊的需求時,就是插畫的作用需要發揮的時機,這也目前的主流運營類UI設計中最為人所熟知的插畫適用場景之一,在此場景之中插畫的主要目的在於吸引用戶的關注和觸發點擊行為。

具體實際場景:Banner、啟動頁、活動頁面等。

4.1.2 主要內容的概括

在用戶與UI界面的交互中會面臨在單個頁面中閱讀大量的信息流的情境,當這些信息流呈現為較為繁雜冗長文字時,用戶需要快速被告知此信息流的主要內容,並對此信息作出快速的內容判斷。

除了幹練的文字大標題以外,在頭部用插畫進行概括性敘述,也是一個非常適合的做法,這也是插畫被需要的重要的時機。

我們可以通過對信息流的主旨要義、核心關鍵點進行提煉,並以此為出發點在插畫中置換上相關的人類行為、社會行為,最後以再現、隱喻、重構的方式對文字信息進行最精煉的概括性敘述,就能達到點題的效果。

具體實際場景:文章頭部、應用功能介紹板塊等。

4.1.3 統一與整體感的需求

同樣立足於產品層,如前文所述,插畫因為本身自帶的藝術屬性——風格,所以具有將元素從視覺層面整合統一的能力形成一種套系感。

他們會在顏色、形態、藝術風格方面體現出單一品牌獨有的基因特性,而越來越多的產品基於這樣的需求,需要插畫在各個層面打造出屬於自己的套系屬性。

具體實際場景:ICON設計、同品類等。

4.1.4 正負面狀態情緒接力

除了套系感的營造,插畫還具有對於用戶出現情緒的正面、負面情緒的正確引導以提升用戶使用體驗感的效果,而在實際的用戶交互中經常會出現從正向、負向兩個方面去影響用戶體驗的系統狀態:

  • 正向:任務完成、操作執行成功等;
  • 負向:空白狀態、功能無法執行、調用失敗、網絡失去連接、等待與加載等。

插畫的在此時的作用就很明顯了,即將用戶在此時所產生的負面情緒進行排解並配合文字給出合理的建議;反之對於正面情緒進行再次肯定,以提升用戶在使用過程中的成就感,達到對於情緒的接力。

具體實際場景:狀態空白頁、操作成功狀態顯示、網絡斷開提示頁面等。

4.1.5 新手引導與新更新信息提示

每個人都有第一次接觸某款應用或者面對使用的應用升級帶來新功能的時候,而當產品需要將這些新的信息準確的告知用戶的時候,往往可以通過將插畫置入在界面的合理位置中進行敘述,以達到與新用戶有效溝通、降低操作學習成本的目的。

具體實際場景:新上線功能提示遮罩、啟動頁新功能解釋等。

4.1.6 核心內容強調與輔助敘述

在用戶對較長的文字信息流進行快速閱讀的時候,其核心表達含義很容易隨著文字信息密度的提升而產生閱讀核心丟失的可能性或者被混淆。

這個時候就需要插畫作為一個視覺照明彈將主旨進行簡潔明確的敘述及提煉,降低閱讀幹擾並作為文字信息流的承擔輔助敘述功能,同時提升視覺透氣。

具體實際場景:工具類應用網站主頁介紹等。

4.2 常規落地五步法

在這一步驟探討之前需要聲明和強調的是,這並不是指具體到一幅插畫創作作品上面的步驟教學演示(畢竟從繪畫的流程上來說千人千法,而畫本無定法貴在得法即可)。

而是基於插畫在項目中從提出到構思再到最後產出與執行的一整套實踐鏈路模型,具有普適性,當然也並不是說只有這一種。

從大量的項目調研和項目經驗來說,插畫的落地大致可以分為這五步:基本規範——風格探索——風格確立——畫面繪製——檢查交付。

4.2.1 基本規範

這一步一般是出現在任務的早期(一般是最開端)設計師需要根據需求方(甲方或PM)提出的品牌訴求並結合產品的企業形象、市場定位、體量……

與需求方溝通協商出一套雙方都較為認可的設計規範標準以便在後面的設計中作為參考的依據與憑藉,這也是對後面一系列設計行為所進行的約束。

這樣做的最大好處是能儘可能規避偏離設計目標等類似風險,同時能有效提升整體的設計效率。

在這一步中可以但不一定需要具體到顏色的色值這種微觀的層面,而是在宏觀策略層面上規定其需要向受眾和開發者傳遞的核心詞彙如:一致、可控、效率、生長性等。

4.2.2 風格探索

當確立了插畫設計的基本規範就可以進一步進行風格的探索,而風格元素的探索依舊是圍繞品牌的基因屬性進行提取,這是為了給插畫中的元素賦予一個統一的世界觀,不會造成視覺上的割裂感。

首先,我們在這一步進行的時候需要先進行風格測試,即採用多版有明顯的差異但是又滿足以上約束的風格進行對比,很類似於設計中的比稿。

在此時並不需要將畫面面面俱到,但是一定要滿足第一眼就能感受到其中差異的這項條件,這就會很容易讓我們快速通過比較找到最為適合的大概風格方向從而進行決策。

在風格測試中不可避免的思考在於用何種元素作為視覺傳達符號更凸顯其意味。

這個問題其實可以參照著名美學研究者李澤厚先生對於意味的來源的觀點,即「意味來自於原始的積澱、藝術的積澱和生活的積澱。」其中最具指導意義的就是對生活的積澱。

為什麼這麼說呢?

這是因為在目前我們大部分的商業插畫中很少有純抽象的創作形式,就算是有一定的誇張、解構、變形其本質還是對我們生活、工作、生存環境等現實物像的再現。

用藝術創作術語來說這是一種現實主義表現形式,而李澤厚先生所說的「對於生活的積澱」就明確指「包括了「對社會氛圍的捕捉對時代、潮流氣息、人們的命運的感知」前後二者不謀而合。

所以面對元素的選擇我們更多的還是要對所需要表現的對象進行生活化觀察聯繫,以一個核心物品或詞彙進行發散聯想,承接聯想的每一個節點都可以是一件與之相關的具象化物品,然後對這些元素進行融合。

其次,統一的世界觀從視覺的層面來說主要表現為統一的造型風格,統一的色彩風格。

4.2.2.1 造型風格

造型風格是設計資產中的重要組成部分,具有高度的統一性,以人物素材為例,無論是進行哪一版本風格的測試都需要給起建立統一的比例構造。

這是動畫人物設計中老生常談的話題,就是統一世界觀下的頭身比例,人物與人物之間可以有高矮胖瘦的差異,但是一定不能在比例上失衡的太過,這樣的比例要求同樣適用於人物與景物的比例造型關係。

如果在組件化人物系統的繪製中,甚至還能為其準備好統一的骨骼系統以適用與動態應用的擴展。

4.2.2.2 色彩風格

色彩風格的探索也並不死板而單一,但其核心一定是各色相相互之間權重的控制,大致可分為:主色、輔色、點綴色三者比例從大到小(理論佔比是70%、25%、5%當然數值並不絕對)。

在主色的選取上我們可以以靠近品牌色本身或者通過「腦暴」找出關鍵詞。並根據關鍵詞聯想發散推導出主色的思路來進行創作。

主色的選擇儘量在同一色系中選擇,不要超過三種,但是對於單幅的相對獨立的創作來說,只需要定好畫面的主導色相併做好色彩上的對立統一關係即可。

最後,在前幾步的基礎之上繼續深入細化思考,基於其最終大致使用的實際場景進行篩選和調整,實際使用場景中需要考慮到的因素包括在整個界面中的視覺整體效果、開發層可行性的最小可行度、易用性、靈活性、可復用性……

通過這些更為落地的條件進行約束、甄別出較為可行的方案。

4.2.3 風格確立

當經過了一系列如上的對比、篩選、甄別之後,其實基本上的風格走向就已經確立了,這一步是對風格的深入化打磨,就像對花草養護的修剪旁雜枝幹,突出主幹。

需要做的主要是兩件事:風格的演化與延展性測試、大眾屬性的遷移。

風格的演化與延展性其實比較好理解,就是將既定的風格進行更為接近於實際應用層面的組合嘗試,探索該風格下畫面元素的最大潛力,同時套用到比較接近於實際使用環境的Mockup中,反覆確定其最小可行性。

而大眾屬性遷移其實際意義在於最大化的滿足受眾接受度,大部分的存在於UI中的商業插畫其受眾組成成分都相對而言都較為複合。

如果個性風格過於強烈,那麼會很容易引起一定的爭議性,對於此類插畫設計我們需要非常克制,保持美觀的同時避免過分鮮明的個性,達到所謂的平均風格,這也一般會成為插畫設計的最優解。

4.2.4 畫面繪製

畫面的繪製部分如果要嚴格意義來進行每一種類別的劃分真的可以稱得上是千人千法,所以本文只是給出一些通用化的繪製思路供大家參考。

如果是大學、高中就是美術專業出身的設計師那麼對於插畫的繪製流程一定並不陌生,其可以較為概括的分為:手稿——線稿——上色——塑造——調整五個階段。

在手稿的階段基本要確立的東西在於:

  1. 畫面整體的構圖,物體與物體之間的比例關係;
  2. 整體透視關係;
  3. 畫面的疏密組織關係;
  4. 遠、中、近景之間的虛實關係,在這一步中其實大致的畫面關係就已經出來了。

而且這一步做得越詳細,對於後面的轉線稿工作就越有利。

基礎的手稿繪製完後下一步就是開始轉更為精確的電子稿,可以用到Illustrator、Photoshop等工具進行分圖層轉稿,在這一步需要相對於手稿而言需要刻畫出更多的細節,使具體的線面表達更為明確,層次感更豐富,到這步造型工作就基本結束了。

當造型結束後我們可以開始我們的上色階段,在上色階段沒有固定的套路,有直接鋪大調子然後再嵌入輔色、點綴色的方法,也有顏色直接一步鋪到位,由點及面、步步為營的進行上色,符合自己的習慣就行。

但是在上色的過程中同樣需要時刻注意整體色調的比例協調,以免造成色調的跑偏。

深入塑造是一個相對的步驟,當畫面整體的調性定格了後,由於每個創作者的習慣不一樣,就會導致畫面的深入程度不一樣,這一步是對於沒有完善或者說需要深入刻畫的細節而進行繪製的。

當然在深入塑造的時候還是要十分注意整體關係,不能因為沉迷於某處細節塑造開始自嗨然後在主體中過於出跳,這是一個十分耐心且克制的過程(當然對於整體把控感極強的老司機一切都隨意)。

作為整幅畫面的收官之舉調整是必不可少的一步,將畫面置於整體視角觀察,如果有十分搶主體的局部需要進行適當的削減;如果主體物的一些細節還不夠突出,那麼可以再適當的豐富豐富畫面,達到最佳效果,這一步是加法與減法之間的平衡。

這裡需要再次強調的是,不是說一定需要按照上面按部就班得來,只是這種模式具有一定的普適性而且相對來說較為嚴謹,每個設計師都有自己獨特的繪畫流程,畫無定法,貴在得法。

一幅整體的作品完工後,在效率化設計需求的當下,我們需要儘可能的提高單幅畫面的二次利用率,賦予畫面中每個元素能被替換和多次利用的能力,這就出現了我們耳熟能詳的組件化繪製的設計方式,大大提升了設計效率。

所謂的組件化繪製其實就是將畫面中的分子元素,如:人物、樹、花甚至文字等物品進行歸類化整理並內置與一個單獨的庫中,也就是我們常說的組件庫,在我們需要將某個位置的具體元素進行替換時就可以快速的用庫中的資源進行快速替換。

當然如果繼續進行拆分那麼分子庫可以被拆成更小的原子即:人物的某一個關鍵部位、花草樹木的花瓣、枝幹等,以進行更為細緻化的組合和更多的可能性復用。

4.2.5 檢查交付

當所需要的插畫繪製完成時就需要進行最後的檢查交付階段,這個階段主要是將插畫置入最終的使用場景中進行檢查,可以是高保真Mockup。

這一步與之前提到的置入Mockup的行為不同的地方在於這一步側重於糾錯和調整,上一步則是側重於探索和驗證。

如果面對一些即將上線的具有動效的插畫時,設計師要特別注意與開發再次核實其最終實現效果和可行度。

在上線後可以通過數據埋點、用戶反饋、日活等數據信息反饋進行反饋和復盤。檢測是否解決問題的標準還是可以分以以上提到的三個方面為標準進行檢查:

  1. 是否優化了視覺完成了對於用戶審美的滿足和興趣的吸引;
  2. 是否對用戶交互進行了減負,提升了使用中的體驗感;
  3. 是否在不同的層級上充當了品牌的傳播工具,有利於品牌價值的最大化。

5. 拓展部分:日常修煉

感謝你耐心地看到現在,在文章的最後部分想和大家聊聊在插畫的日常練習中自己的一些心得體會。

5.1 良好的觀察習慣

首先就是要養好好觀察事物的習慣,我們目前從事的UI中的插畫作業大部分還是對生活中實物的再現。

如何能在被接到需求之時就能迅速的聯想出具體物體的具體狀態,那麼離不開平日的大量觀察,觀察中需要特別注意物體的光色關係、光影關係、形狀區別,並且自己要有意識地去給雜亂無章的事物進行主動構圖和景深式取捨。

主動構圖的意思就是學會從雜亂無章的自然、生活事物中去用畫框的概念去截取較為美觀的構圖,通過大量的構圖式思維來養成。

一旦畫畫就自然而然具備構圖的意識,這點真的很重要,這是很多學了不短的繪畫時間的人仍就容易忽視的習慣,但這卻是你對於畫面的組織能力是決定性的習慣。

景深式取捨是指我們需要學會像照相機那樣觀看物體——懂得聚焦觀察,都說設計師需要像素眼。

但其實也同樣需要要聚焦眼,聚焦的意義在於我們會對物體的觀察有主次的概念,聚焦意味著一部分的虛化和另一部分的清晰,尤其是在視覺Z軸上形成這樣的層次感,而繪畫中前中後景的處理方式也大多類似於此,長此以往有助於我們對於畫面主次關係的處理能力。

5.2 勤奮與素材推薦

當然了無論是什麼技能與意識說到底還是那句老生常談的筆耕不輟,日積月累,畢竟長期的練習是磨合能力與意識的最好方式,推薦一些經常去逛的插畫網站:

Behance:https://www.behance.net/

這個大家並不陌生了,設計師必備:Notefolio:https://www.notefolio.net

這是一個較為小眾的韓國的設計網站,有點像韓國的Behance但是風格也更為別具一格,是很不錯的插畫案例參考網站:Pinterest:https://www.pinterest.com

同樣是一個耳熟能詳的素材網站,除了瀑布流的分布外最方便的就是具有聯想推薦功能,而且會根據每個設計師自己的情緒版特徵進行更為精準的定向推送,實時更新最新的相關內容:Free illustrations:https://freeillustrations.xyz/

十分垂直的插畫素材集合型網站,可根據標籤選擇自己需要的格式並且支持源文件下載,能得到最真實最還原的的插畫素材:Stories by Freepik:https://stories.freepik.com/

除了擁有大量的場景人物場景應用插畫素材之外,這個網站最大的殺手鐧在於他擁有線上的動態現實功能,可通過對於腳本的設置對素材進行動態顯示查看。

5.3 創意思維

創意思維可以抽象的理解為想像力,考慮到這是一個很寬泛的概念的我僅以幾個我常用的思維訓練方法來略作分享:

第一:針對於繪畫想像力延展來說,我們可以將生活中很多自然的帶有殘缺感東西(比如桌子上的被磕碰過的痕跡)通過拍照拍下,將其想像成一個完整的形的一部分,然後在這個殘缺的基礎之上慢慢通過腦補成一個完整的具象的形。

這個完整的形可以通過畫筆逐步繪畫成型,這是一個練習再創作衍生思維十分可靠的方法,有助於設計師對原素材的發散聯想能力。

第二:針對於形的舉一反三能力來說,可以以外形為一個共同點來進行聯繫式練習即通過形與形之間的相似來將這些形狀相似但是類型也許是千差萬別的物體進行歸類,然後拆解在組合,很多時候會組合出完全意想不到的效果。

在完成一些視覺上的荒誕組合效果的插圖作業時,會起到出奇兵的效果。

第三:針對於發散思維想像來說,可以在閒碎的時間裡沒事兒多畫兩筆,將這些塗鴉在空閒的時候不斷的如移花接木一般進行補充,這很有利於進行從0到1的創作,讓我們在接到需求的時候不至於手足無措,腦海裡空空如也。

當然以上只是我的一點拙見,如果能夠對你有一定的幫助那麼不甚榮幸。

再次感謝你看到最後,對於插畫在UI中的助力探索還遠不止於此,也歡迎留下你的見解和看法,祝每一個熱愛設計的你都能變得更強,加油!

 

本文由 @核糖 原創發布於人人都是產品經理,未經許可,禁止轉載

題圖來自 Pexels,基於 CC0 協議

相關焦點

  • 插畫助力UI多場景設計
    插畫目前在UI設計中已經逐漸成為了較為重要甚至不可或缺的一部分,無論是在運營UI還是在UX中,插畫設計以自己獨特的屬性魅力,成為了UI設計中的新趨勢,今天我們就來聊聊插畫對於不同需求與場景下的UI設計的助力
  • UI設計插畫神器
    教你如何用神器快速搞定插畫非科班出身的設計師經常有一個苦惱,每當想在界面上加一些插畫豐富細節時,卻因為不會手繪而放棄。最近發現一個非常好用插畫神器。能自動生成各種你需要的插畫形式,重點是這些插畫都是可以免費商用的,肯定能幫到你。
  • UI設計需要學什麼軟體?
    ui動效在當下是一種非常流行的設計元素,所以我們需要掌握這項技能,才能保證在ui設計滔滔大軍中立於不敗之地啊!sketch這款軟體可以說是以專門為app界面設計而生的,界面省略了一些繁瑣不必要的功能,使得設計非常便利,但是這款軟體的話現在只是支持蘋果系統,微軟是用不了的,所以局限性還是很大的!要是微軟可以用那肯定是會很普及的!墨刀毫無疑問,對於APP的原型設計真的是體驗非常好,其控制項的拖拉、大小的調整,都會自然的去匹配相應的母版大小。無需去擔心有多移動一點或多 選擇一點。
  • 一組高質量的場景插畫!涵蓋多種風格場面宏大壯麗的場景設計作品
    這組場面壯麗宏大的插畫是來自於中外不同國家的多名場景插畫高手的場景設計作品!質量非常高,風格多種多樣,從科幻,魔幻,復古到賽博朋克風格的作品都有涵蓋,有些是2D手繪作品有些是3D設計作品,整體質量看上去非常衝擊視覺,相當不錯的一組場景設計繪畫作品!
  • 學UI設計是否需要美術基礎?零基礎如何學習UI設計?
    一、學ui設計是不是一定需要有美術基礎呢?UI設計主要是學習一些二維設計的理念以及軟體的操作,對美術基礎的要求也不是很高,即使沒有美術手繪基礎也是可以學UI設計。比起產品的美觀度,UI設計更加注重用戶體驗。讓軟體的操作變得舒適簡單,關注用戶體驗,設計出用戶喜歡的軟體,才是優秀的UI設計師。美術功底代表著接受過一定的訓練,但不一定能做出好的作品。一個好的作品,是一個系統工程,包括很多內容,包括科學性、實用性、準確定位、審美等,所以應該說是個一個綜合應用。
  • 哈爾濱UI設計培訓初翼教育
    本網12月24日訊 哈爾濱ui培訓哪個好?哈爾濱ui設計培訓機構,哈爾濱ui設計培訓哪裡好,哈爾濱UI設計培訓學校初翼教育,哈爾濱ui設計培訓學校哪家好?就選擇初翼教育
  • UI設計自學視頻教程,UI設計培訓教程
    UI設計行業的火爆已經感染了太多人的加入,很多想學習UI設計的同學卻苦於找不到合適的學習資料,今天千鋒小編為大家分享一個自學UI設計必備佳品:UI視頻教程(http://video.mobiletrain.org/ui/)。
  • 14款精美插畫場景設計
    關注gongzhonghao「阿濱設計分享中心」更多插畫設計與你分享Illustration作者:Guilherme其實很多場景不僅是以趣味性來吸引讀者的,視覺效果也是很重要的一個因素。總結:時光匆匆,歲月慢慢流逝,過去的,已成往事,未來的,還讓人充滿希望。那些往日的歲月,就像初春的微風颳過的枝頭,在心間搖曳生姿,就像你的一雙明眸,熠熠生輝如那夏夜的漫天繁星。圖片版權歸作者所有,如有侵權,請聯繫刪除。
  • 你了解ui設計嗎?
    你了解ui設計嗎?作為當下熱門的就業崗位之一,許多新人轉行從ui培訓學校進行系統的ui設計學習,所謂知己知彼,百戰不殆。既然選擇學習ui設計,那麼首先要了解ui設計究竟是什麼,我們要學習的內容有什麼,今天小編就來給大家簡單的介紹ui設計中要學習的內容。
  • UI設計網站 | 常用的UI設計網站大集合
    好多小夥伴知道的UI設計網站可能也就那麼幾個,今天給大家整理了一些經常跟新的UI學習網站,每天堅持瀏覽這些網站,多看大神的作品和文章,可以快速的提升你的UI設計水平,切記,不要只是看,要一邊看一邊動手一邊臨摹,不要覺得臨摹就是抄襲,每個人都是從這個階段過來的。
  • 【插畫課程】超高人氣的場景插畫,終於有教程了!
    應該也有創作吧,趁著這被隔離在家的期間,不妨一起學一門插畫課程吧,開始上班的時候,你就已經比其他人多了一門插畫手法了,把握住這麼好的機會,利用起來吧。而且這門課程現在正是優惠期哦,也是給大家的福利。場景插畫更能承載情緒,傳達感覺,營造氛圍。
  • 不會手繪沒關係,有這款插畫神器,幫你搞定1000+插畫場景
    設計乾貨!!!強烈建議收藏,分享給更多需要的小夥伴!獲取方式:留言評論區,或者私聊我!有問必回。不會手繪的設計師福利來了,看這裡有了我你可以DIY不同人物角色造型和背景搭配可生成上百套不重樣的插畫,在各種場景都可以完美適配,極大地提高你的日常生產力,話不多說,一起來看看效果吧
  • 如何才能讓Ui設計看著有「高大上」的感覺?
    「高大上」這個詞相信大家都不陌生,那麼怎麼才能把自己的ui設計產品也設計的「高大上」並且得到人們的喜愛呢?接下來,我們一起了解一下吧。如何才能讓Ui設計看著有「高大上」首先要從ui設計產品的宣傳入手,抓住客戶的心裡需求,再加上一些營銷手段,能夠很快精準的定位客戶人群。
  • UI設計就業前景怎麼樣?如何去學習呢?
    ,百度谷歌這樣的巨頭,擁有非常明確的ui分工,主要就是指的互動設計互動設計師的主要任務就是來發掘開發用戶的需求,讓用戶的界面能夠更加直觀更有觀賞感。當然對於一些小型的公司目前還沒有這樣一個專門的專業人才,所以說現在的ui設計師非常的吃香。很多人都通過在線教育平臺學習ui設計,當然通過在線學習只能起到一定的輔助作用但是並不能更好地去進行深入的學習,因為ui設計的範圍比較廣泛,比如說網頁設計能夠在細節上起到一定的,作用讓網頁看上去更加有渲染性。
  • 一組漂亮的場景插畫作品!來自於國內外多名插畫師精美的大作欣賞
    這組畫技很不錯的插畫是來自於國內外多名場景大佬的精緻作品!來自於本小編精心的整理!雖然都是場景插畫但是畫風還是很不相同的,有線條繁複的純手繪作品,也有寫實風格和唯美風格的插畫作品,十分值得欣賞和收藏,個人覺著對於動漫繪畫愛好者和設計師來說,這組作品有一定的借鑑價值!
  • UI設計新人如何兼職接單
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享UI設計新人如何兼職接單?其實這個問題也是很多新人的痛點啊,新人前期剛入行除了工資就沒有其他收入,卻又不得不面對各種各樣的房租水電煤,交通,或者說還有女朋友等開銷... ...
  • 參加ui設計培訓都應該知道的事!天津ui設計培訓機構
    正打算學習ui設計的你,不論是想通過線上學習、線下學習還是自學,小築都希望給你一些建議,能夠在ui設計的學習道路上不迷路,不走彎路。 今年的市場情況不是很理想,也給了很多求職者重重一擊尤其是大部分的應屆生同學們,也讓很多人意識到了學習一門技能的重要性,想當然ui設計成了熱門之選。
  • UI設計哪個學校好?零基礎學UI設計教程分享
    UI設計哪個學校好?零基礎學UI設計教程分享。沒有任何基礎到底適不適合學習ui設計,多久可以學會,如果零基礎想學習ui設計哪裡好呢?其實ui設計入門簡單,很多職場轉行和畢業的新手小白系統的學習幾個月都能學會,所以大家想學習ui設計其實不要太過於擔心。
  • ui設計中大學生如何提升自身的價值?
    大家好,相信ui設計師的小夥伴們應該都想提升自己,充實自己。那麼怎麼才能提升UI設計師的價值呢?我們一起來了解一下吧。ui設計中大學生如何提升自身的價值?UI設計師在設計師首先要先了解產品的特性,優點和缺點。然後以人群的定位做為側重點,去了解你定位人群的喜好或是一些習慣之類的。
  • 2020的UI設計趨勢,我先收藏了(上)
    所以在構建一個品牌時候,插畫是非常重要的點之一,但是做之前一定要儘量多去了解我們為客戶提供的設計價值,只有了解了用戶價值,才能去定義去特色的故事,幫助產品。等距插畫這兩年已經是一個主流風格之一,在未來還會接著流行,但是等距插畫未來或許和場景聯繫在更緊密,在每年天貓雙11設計中,互動城的設計每年基本都是等距插畫風格,它的故事感和畫面感,都能讓人眼前一亮,所以電商的設計,在短時間內