想讓你的設計更有“科技感”，不僅需要找到設計關鍵詞和參考競品，還需要從背景、圖形、配色、字體這四大方面下手。

什麼是“科技感”？

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

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

如何設計的更有“科技感”？

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

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

電影：機械姬/創戰紀/遺落戰境

1. 我們需要提取出“科技感”中能聯想到的關鍵詞

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

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

拟定的情緒闆

2. 尋找相關競品或參考

挖掘此類型設計的共同點。比如其中涉及到的元素：點、線、深色背景、文字修飾、光效等等。

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

3. 背景

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

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

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

4. 圖形

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

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

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

5. 配色

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

藍色的使用很常見，但過分使用會給人一種冷冰冰的感覺。所以我們可以嘗試用其他顔色來進行搭配調整。例如白色、橙色、紫色等。

為了能讓我們的設計更有特點，産生差異性，我們可以試着去使用漸變色、暖色來形成反差。但不可使用過多的配色。繁多的配色會嚴重影響産品後期的延展。為了避免後期設計的失控，我們最好固定在三種顔色範圍内進行設計。

6. 字體

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

原因：

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

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

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

電影：機械姬

7. 延展

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

①空間感：通過視角的轉換、模拟鏡頭光圈虛化等處理，可以讓我們的設計圖更立體，更有深度。

②卡通元素：添加插畫、卡通風格元素表面上與偏寫實的科技風格不相幹。不過，通過視覺元素和色彩的合理搭配，以及動效的融入，可以達到出乎意料的效果。

③運用三維：使用三維元素，如三維的地球、城市等。與科技寫實風格相匹配。并讓界面充滿立體感，形成差異性。有很好的視覺沖擊力。

④光效加持：全局光、點光、線性光。不同的光效必然會産生不同的效果。在“科技”類的視覺風格當中，光的使用也非常頻繁。背景光烘托前景物體；點光、線性光可以加強局部，同時可以作為很好的點綴。具體如何使用，需要根據我們設計的具體元素來制定。

界面設計中如何凸顯“科技感”？

上述提到的方法更多的是對運營設計或是平面設計等視覺方面的思考。

在UI設計當中，個人認為依舊可以遵從簡潔、品質感這兩點原則進行嘗試。

MOO音樂

悅跑圈

Apple Store

通過對某些産品界面的分析，我發現一些科技公司旗下的産品或是一些極具科技感的産品界面都非常的簡潔，且信息十分突出。

為了達到簡潔、有品質感、内容突出這三點要求，我們可以接上文從配色、布局、圖标、文字和動效等方面進行設計。

1. 配色

配色上還是多數以藍色系或深色系為主。這應該已經是人們的一種固有印象了。當然暖色系也是有一些的，但數量占比相對較少。這一點需要結合自身産品的品牌色來決定。同時，運營方面的設計需要與之相匹配。方便日後的延展設計。

2. 布局

在界面設計趨于同質化的現在，落地的布局設計與“科技感”這個詞關聯性有限。需要注意的點應該就是元素之間的間距與整體的留白。内容排布過滿會顯得臃腫，且不易突出重點信息。to B端的産品需要根據需求進行特殊優化。

（後台相關産品容易産生“科技感”的原因是自帶的深色背景和數據可視化等因素影響。）

3. 圖标

圖标應該是除了banner外最能在頁面設計當中凸顯“科技感”的點了。查看了一些相關的設計，發現此類圖标有幾個共同的特點：

①用色肯定。

②簡潔留白。

③樣式豐富。

4. 文字

接上文，受移動設備尺寸的限制，更加需要精煉文字。理想情況是用最剪短的話術突出核心賣點。切不可使用過多的文字，會使界面變得雜亂。

5. 動效

我們之前提到的有“科技感”的設計應當是簡潔、有品質感的。好的動效可以增加這些特性。所以，優秀的動效個人認為應當是幹脆、流暢、克制的。

幹脆，可以給用戶及時的反饋；流暢，增強使用的體驗；克制，避免過度的炫技，造成用戶的審美疲勞。UI動效不是影視特效，好的體驗應當是自然流暢的。

總結

以上，是我個人對“科技感”這個詞的相關設計如何落地的一些想法。整理下來，其中的關鍵點是：提取分析關鍵詞、搜索相關競品參考、挖掘其共性、構思差異化。

日常工作當中，我們也可以針對具體需求，按照此流程進行梳理，并制定成自己的方法進行延展。

作者：FLYXMF，Fly Lab

本文由 @FLYXMF 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,