如何設計更有科技感?

0 評論 15453 瀏覽 19 收藏 12 分鐘

編輯導語:科技感可以理解為未來科技的一種展現形式,作為一名設計師如何讓作品具有科技感呢?本篇文章,作者教大家如何提取科技感中的關鍵詞,并且從背景、圖形、配色、字體這四個角度出發,做出的科技感作品。

一、什么是科技感

科技感我們也可以將它理解為是未來科技的一種展現形式。

而未來科技是指超越現實的科學技術,未來科技與高科技、最新科技以及前沿科學技術等的概念完全不同,而且是有本質區別的。后者代表剛剛被人類發明、創造并能夠掌握和使用的,代表人類科研成果的先進的科學技術。

而未來科技強調的是,人類能夠預期或未能預見到的,至今仍未被人類發明或使用的,只有將來某一時期才被人類所掌握和使用的科學技術。

剛才所表達的其實針對關鍵詞的官方解答,但貌似閱讀這樣的內容,并不能被我們設計師很好的吸收和理解,可以說不太好嫁接到我們的日常設計中。

我們可以仔細的拆解后琢磨一下,在科技感的背后,所呈現的本質其實應該解讀衛視產品本身的技術和很多功能,這些綜合在一起,其實就是科技的呈現。

比如:數據的視覺可視化呈現、人工智能的人機交互、自動駕駛的邏輯與展現,都是科技的呈現,而“感”就是我們對科技的一種真實感受,是機器展現給我們的一種表達方式,綜合起來,我們稱它為“科技感”。

作為設計師,我們要做的,其實就是根據真實的商業和產品需求,將科技結合到自身的產品屬性上,再通過視覺的表現形式呈現給用戶,讓用戶和機器產生共鳴的結果,就是我們理解中的科技感。

二、如何讓設計具有科技感

通過上面的解答,大家可能已經比較清楚科技感的作用,還有科技感在設計中的地位,那么,現在,我們假設將“科技”和“感受”兩個詞進行拆解開來進行單獨思考。

“科技”我們會聯想到機器、太空、電子投屏等等,而“感受”范圍比較廣泛,是不同人對不同事物的一種主觀判定,我們稱之為感受。不同的人對同一事物的感受也是有區別的。那么問題來了,如何才能將科技的正確表達形式傳遞給用戶呢?讓用戶感受到“科技”?這就是設計師需要思考的東西。

我先通過幾個簡單的案例來讓大家尋找一下科技的定位,比如以下幾個案例:

當前這個圖片,其實我們可以第一想到的就是科技圖片或者素材,那么為什么它會被我們定義是帶有科技的呢?從中我們提取一些相關元素,比如:光感的線條、帶有光體的地球,謎虹的燈光點。這些都是傳遞給我們科技的直觀內容。

如何設計更有科技感?

再來看這個素材,同樣的會帶有光帶,但和剛才圖片不同的是,除了光帶以外,banner內還增添了文案元素,詞匯上不光是鎖定了“未來”一詞,同時設計師還在20201上做和排線類設計手法,并在其他字符上增添的漸變色。目的就是為了增添科技感。

如何設計更有科技感?

那么通過以上兩個案例,我們可以摸排出一定的規律,如果想讓自己的設計作品帶有科技感,就需要先做幾個工作。

三、提取關于“科技感”的關鍵詞

比如我們從剛才的素材中提取一些可用的關鍵詞,例如:地球、光線、太空、藍色、漸變、顆粒、眩暈效果、層次效果、半透明、球體、三維。

通過這些關鍵詞的篩選,然后和我們的產品進行融合,過程中帶著關鍵詞進行相關素材的尋找,并制作一個簡單的情緒版,隨之就會出現一個非常直觀且可以參考的設計風格了。

比如我們要做一個數據類展示的banner圖或者海報,我們可以選擇排線、層次效果、顆粒、漸變、光線、地球、等元素,然后顏色可以選用深藍色或深黑色。最終做成一套簡單的情緒版來供我們自己定位:

如何設計更有科技感?

四、找競品,學習共同點

光有自己的情緒版還不夠,這個步驟只是幫助你直觀的鎖定一些關于科技的素材和感受,如果想真正貼合自身產品做出比較符合產品調性的設計,那么我么還需要進行一個步驟,那就是尋找和自身較為類似的競品。

學習相關產品的設計手法和展現形式,俗話說,每個行業都有他特定的趨勢和調性,科技感的設計風格也是一樣,如果只是將情緒版中的素材進行拼湊,雖然你的設計可以有一定的科技風格,但卻不一定符合當前產品的調性。所以,這一步,是尋找競品,然后挖掘類似產品的共同點。比如涉及到的一些元素:點、線、深色背景、文字修飾、光效等等。

如何設計更有科技感?

如何設計更有科技感?

確定好方向和準備工作,下一步我們就可以從背景、圖形、配色、字體這四大方面著手設計了。

五、背景

在強調科技類產品相關設計中,背景多數分為:顏色或寫實圖片兩種。

顏色很好理解,大多以深色底為主。強調一種神秘感和沉穩感,同時可以和淺色的文字內容形成很好的對比。

而圖片背景的使用,就要求圖片的質量要高。版權、質量、產品匹配度、視覺干擾,這些都是我們應該注意的點。一張高質量的圖片可以很好的凸顯產品調性,提升設計圖的整體質量。反之就會大大降低用戶對其的好感度與信任度,顯得廉價,無品質。

如何設計更有科技感?

如何設計更有科技感?

如何設計更有科技感?

六、圖形

通過前期分析,科技感設計當中常出現的圖形樣式包括:點、線條、抽象圖形等。用最簡單的圖形,呈現最合理的設計。

無論是 banner 還是海報,設計的重點都應該放在文字內容上,要讓用戶明白產品的核心是什么,畢竟設計是為產品服務的。

所以,在使用圖形進行點綴搭配時,切不可過于花哨,從而搶了主要內容的風頭。

如何設計更有科技感?

如何設計更有科技感?

七、配色

提到科技我們下意識地就會聯想到藍色,這也是最安全、最穩妥,使用也最多的顏色。其應用的范圍非常廣泛:科技、金融、醫療、航空、企業官網等都可以用到。

但并不是說藍色就是唯一可選,雖然藍色的使用很常見,但卻給人一種冷冰的感覺。所以我們可以嘗試用其他顏色來進行搭配調整,例如白色、橙色、紫色等。

如何設計更有科技感?

如何設計更有科技感?

八、字體

從剛才的這些案例中,我們可以發現和“科技“相關的設計很多都是使用正?;蛘咂毜淖煮w來進行設計的。

原因有幾個:

  1. 可以和圖形當中的線條完美搭配。
  2. 占據少量的空間,有更多的留白。
  3. 纖細字體自帶的精致屬性。
  4. 匹配產品自身的屬性。

標題的使用應該簡短干練,突出重點即可。更多的文字可以放到副標題當中去,盡可能壓縮文字個數。過多的文字會讓用戶產生迷茫和不耐煩等負面情緒,畢竟我們的設計風格是以簡潔為主。

如何設計更有科技感?

用文字當作字符來進行裝飾,也是科技感設計當中的加分點之一。細小的文字點綴其中,會使頁面整體更飽滿更有立體感。

如何設計更有科技感?

九、總結

綜合上訴,將背景、圖形、配色、字體這四大塊揉到一起,做出的科技感作品才會更加出彩。還是文中的幾個要點要穩抓,其一就是理解自己的產品是走的哪種科技感設計線,然后尋找相關的元素并做成情緒版進行定位(這樣你才能知道自己要怎么做),然后帶著問題和疑惑再去尋找競品,你就會清晰的知道設計方向和發力點在哪了。

融合剛才說的4大塊,你就能做出比較符合產品調性,并帶有科技的感的作品了。

 

本文由 @西瓜的設計 原創發布于人人都是產品經理;未經許可,禁止轉載

題圖來自 Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!