什么是「科技感」？

科技感：等同于未來科技，未來科技是指超越現實的科學技術，未來科技與高科技、最新科技以及前沿科學技術等的概念完全不同，而且是有本質區別的……

網上找到的說法顯得高深甚至玄學，與我們的日常設計工作并不匹配。仔細想來，和科技本身最相關的應該是產品自身的技術和功能。設計師需要做的，就是根據需求，將「科技」這個詞結合自身產品屬性，通過視覺表現的方式呈現出來，讓用戶產生共鳴。
 

如何設計的更有「科技感」？

說到「科技感」這個詞，我會把它拆開成「科技」和「感受」兩個詞來進行分析。

談到「科技」，我會聯想到機器人、外太空、全息投影等等；而「感受」這個詞的范圍就很大了，所有看上去對得上「科技感覺」的事物都可以歸到「感受」當中去。


 

1. 提取出「科技感」中能聯想到的關鍵詞

Key words：地球、地圖、外太空、三維圖形、藍色、城市、寫實照片、粒子、太空、機器人、全息投影、人工智能、透明玻璃、賽博朋克、游戲、電影、武器、移動設備、FUI、AR、VR 等等。

結合產品的屬性和我們對產品認知的感受進行篩選，并根據篩選后的關鍵詞尋找相關圖片，制作情緒板擬定主視覺風格。這類風格的視覺走向個人認為應當是簡潔且具有品質感的。


 

2. 尋找相關競品或參考，挖掘此類型設計的共同點

尋找相關競品或參考，挖掘此類型設計的共同點。比如其中涉及到的元素：點、線、深色背景、文字修飾、光效等等。


 

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

3. 背景

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

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

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


 

4. 圖形

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

無論是 banner 還是海報，設計的重點都應該放在文字內容上，要讓用戶明白產品的核心是什么，畢竟設計是為產品服務的。所以，在使用圖形進行點綴搭配時，切不可過于花哨，從而搶了主要內容的風頭。

當然，我們也可以跳出固有印象，嘗試平面形狀和其他立體形狀來設計，讓我們的設計更加飽滿。


 

5. 配色

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

藍色的使用很常見，但過分使用會給人一種冷冰冰的感覺。所以我們可以嘗試用其他顏色來進行搭配調整，例如白色、橙色、紫色等。為了能讓我們的設計更有特點，產生差異性，我們可以試著去使用漸變色、暖色來形成反差，但不可使用過多的配色。繁多的配色會嚴重影響產品后期的延展。為了避免后期設計的失控，我們最好固定在三種顏色范圍內進行設計。


 

6. 字體

從眾多參考當中，我們能發現和「科技」相關的設計很多都是使用正常或者偏細的字體來進行設計的。

原因：

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

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

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

其他可以增加「科技感」的設計形式：空間感、卡通元素、運用三維、光效加持。