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

什么是“科技感”？

科技感：等同于未來(lái)科技，未來(lái)科技是指超越現(xiàn)實(shí)的科學(xué)技術(shù)，未來(lái)科技與高科技、最新科技以及前沿科學(xué)技術(shù)等的概念完全不同，而且是有本質(zhì)區(qū)別的…（解釋來(lái)自網(wǎng)絡(luò)）

網(wǎng)上找到的說(shuō)法顯得高深甚至玄學(xué)，與我們的日常設(shè)計(jì)工作并不匹配。仔細(xì)想來(lái)，最和科技本身相關(guān)的應(yīng)該是產(chǎn)品自身的技術(shù)和功能。設(shè)計(jì)師需要做的，就是根據(jù)需求，將“科技”這個(gè)詞結(jié)合自身產(chǎn)品屬性，通過(guò)視覺(jué)表現(xiàn)的方式呈現(xiàn)出來(lái)，讓用戶(hù)產(chǎn)生共鳴。

如何設(shè)計(jì)的更有“科技感”？

說(shuō)道“科技感”這個(gè)詞，我會(huì)把它拆開(kāi)成“科技”和“感受”兩個(gè)詞來(lái)進(jìn)行分析。

“科技”我會(huì)聯(lián)想到–機(jī)器人、外太空、全息投影等等；而“感受”這個(gè)詞的范圍就很大了。所有看上去對(duì)的上“科技感覺(jué)”的事物都可以歸到“感受”當(dāng)中去。

電影：機(jī)械姬/創(chuàng)戰(zhàn)紀(jì)/遺落戰(zhàn)境

1. 我們需要提取出“科技感”中能聯(lián)想到的關(guān)鍵詞

Key words：地球、地圖、外太空、三維圖形、藍(lán)色、城市、寫(xiě)實(shí)照片、粒子、太空、機(jī)器人、全息投影、人工智能、透明玻璃、賽博朋克、游戲、電影、武器、移動(dòng)設(shè)備、FUI、AR、VR等等。

結(jié)合產(chǎn)品的屬性和我們對(duì)產(chǎn)品認(rèn)知的感受進(jìn)行篩選，并根據(jù)篩選后的關(guān)鍵詞尋找相關(guān)圖片，制作情緒板擬定主視覺(jué)風(fēng)格。這類(lèi)風(fēng)格的視覺(jué)走向個(gè)人認(rèn)為應(yīng)當(dāng)是簡(jiǎn)潔且具有品質(zhì)感的。

擬定的情緒板

2. 尋找相關(guān)競(jìng)品或參考

挖掘此類(lèi)型設(shè)計(jì)的共同點(diǎn)。比如其中涉及到的元素：點(diǎn)、線(xiàn)、深色背景、文字修飾、光效等等。

確定好方向和準(zhǔn)備工作，下一步我們就可以從“背景、圖形、配色、字體”這四大方面著手設(shè)計(jì)了。

3. 背景

在強(qiáng)調(diào)簡(jiǎn)潔的科技類(lèi)產(chǎn)品相關(guān)設(shè)計(jì)中，背景多數(shù)分為：顏色或?qū)憣?shí)圖片兩種。

顏色很好理解，大多以深色底為主。強(qiáng)調(diào)一種神秘感和沉穩(wěn)感，同時(shí)可以和淺色的文字內(nèi)容形成很好的對(duì)比。

而圖片背景的使用，就要求其圖片的質(zhì)量要高。版權(quán)、質(zhì)量、產(chǎn)品匹配度、視覺(jué)干擾，這些都是我們應(yīng)該注意的點(diǎn)。一張高質(zhì)量的圖片可以很好的凸顯產(chǎn)品調(diào)性，提升設(shè)計(jì)圖的整體質(zhì)量。反之就會(huì)大大降低用戶(hù)對(duì)其好感度與信任度。顯得廉價(jià)，無(wú)品質(zhì)。

4. 圖形

通過(guò)前期分析，“科技感”設(shè)計(jì)當(dāng)中常出現(xiàn)的圖形樣式包括–點(diǎn)、線(xiàn)條、抽象圖形等。用最簡(jiǎn)單的圖形，呈現(xiàn)最合理的設(shè)計(jì)。

無(wú)論是banner還是海報(bào)，設(shè)計(jì)的重點(diǎn)都應(yīng)該放在文字內(nèi)容上，要讓用戶(hù)明白產(chǎn)品的核心是什么。畢竟設(shè)計(jì)是為產(chǎn)品服務(wù)的。所以，在使用圖形進(jìn)行點(diǎn)綴搭配時(shí)，切不可過(guò)于花哨，從而搶了主要內(nèi)容的風(fēng)頭。

當(dāng)然，我們也可以跳出固有印象，嘗試面形和其他立體形狀來(lái)嘗試設(shè)計(jì)。讓我們的設(shè)計(jì)更加飽滿(mǎn)。

5. 配色

提到“科技”我們下意識(shí)的就會(huì)聯(lián)想到藍(lán)色。這也是最安全最穩(wěn)妥使用最多的顏色。其應(yīng)用的范圍非常廣泛：科技、金融、醫(yī)療、航空、企業(yè)官網(wǎng)等都可以用到。

藍(lán)色的使用很常見(jiàn)，但過(guò)分使用會(huì)給人一種冷冰冰的感覺(jué)。所以我們可以嘗試用其他顏色來(lái)進(jìn)行搭配調(diào)整。例如白色、橙色、紫色等。

為了能讓我們的設(shè)計(jì)更有特點(diǎn)，產(chǎn)生差異性，我們可以試著去使用漸變色、暖色來(lái)形成反差。但不可使用過(guò)多的配色。繁多的配色會(huì)嚴(yán)重影響產(chǎn)品后期的延展。為了避免后期設(shè)計(jì)的失控，我們最好固定在三種顏色范圍內(nèi)進(jìn)行設(shè)計(jì)。

6. 字體

從眾多參考當(dāng)中，我們能發(fā)現(xiàn)和“科技”相關(guān)的設(shè)計(jì)很多都是使用正?；蛘咂?xì)的字體來(lái)進(jìn)行設(shè)計(jì)的。

原因：

1. 可以和圖形當(dāng)中的線(xiàn)條完美搭配。
2. 占據(jù)少量的空間，有更多的留白。
3. 纖細(xì)字體自帶的精致屬性。
4. 匹配產(chǎn)品自身的屬性。
5. …

標(biāo)題的使用應(yīng)該簡(jiǎn)短干練，突出重點(diǎn)即可。更多的文字可以放到副標(biāo)題當(dāng)中去。盡可能的壓縮文字個(gè)數(shù)。過(guò)多的文字會(huì)讓用戶(hù)產(chǎn)生迷茫和不耐煩等負(fù)面情緒。畢竟我們的設(shè)計(jì)風(fēng)格是以簡(jiǎn)潔為主。

用文字當(dāng)做字符來(lái)進(jìn)行裝飾，也是科技感設(shè)計(jì)當(dāng)中的加分點(diǎn)之一。細(xì)小的文字點(diǎn)綴其中，會(huì)使頁(yè)面整體更飽滿(mǎn)更有立體感。

電影：機(jī)械姬

7. 延展

其他可以增加“科技感”的設(shè)計(jì)形式：空間感、卡通元素、運(yùn)用三維、光效加持。

①空間感：通過(guò)視角的轉(zhuǎn)換、模擬鏡頭光圈虛化等處理，可以讓我們的設(shè)計(jì)圖更立體，更有深度。

②卡通元素：添加插畫(huà)、卡通風(fēng)格元素表面上與偏寫(xiě)實(shí)的科技風(fēng)格不相干。不過(guò)，通過(guò)視覺(jué)元素和色彩的合理搭配，以及動(dòng)效的融入，可以達(dá)到出乎意料的效果。

③運(yùn)用三維：使用三維元素，如三維的地球、城市等。與科技寫(xiě)實(shí)風(fēng)格相匹配。并讓界面充滿(mǎn)立體感，形成差異性。有很好的視覺(jué)沖擊力。

④光效加持：全局光、點(diǎn)光、線(xiàn)性光。不同的光效必然會(huì)產(chǎn)生不同的效果。在“科技”類(lèi)的視覺(jué)風(fēng)格當(dāng)中，光的使用也非常頻繁。背景光烘托前景物體；點(diǎn)光、線(xiàn)性光可以加強(qiáng)局部，同時(shí)可以作為很好的點(diǎn)綴。具體如何使用，需要根據(jù)我們?cè)O(shè)計(jì)的具體元素來(lái)制定。

界面設(shè)計(jì)中如何凸顯“科技感”？

上述提到的方法更多的是對(duì)運(yùn)營(yíng)設(shè)計(jì)或是平面設(shè)計(jì)等視覺(jué)方面的思考。

在UI設(shè)計(jì)當(dāng)中，個(gè)人認(rèn)為依舊可以遵從簡(jiǎn)潔、品質(zhì)感這兩點(diǎn)原則進(jìn)行嘗試。

MOO音樂(lè)

悅跑圈

Apple Store

通過(guò)對(duì)某些產(chǎn)品界面的分析，我發(fā)現(xiàn)一些科技公司旗下的產(chǎn)品或是一些極具科技感的產(chǎn)品界面都非常的簡(jiǎn)潔，且信息十分突出。

為了達(dá)到簡(jiǎn)潔、有品質(zhì)感、內(nèi)容突出這三點(diǎn)要求，我們可以接上文從配色、布局、圖標(biāo)、文字和動(dòng)效等方面進(jìn)行設(shè)計(jì)。

1. 配色

配色上還是多數(shù)以藍(lán)色系或深色系為主。這應(yīng)該已經(jīng)是人們的一種固有印象了。當(dāng)然暖色系也是有一些的，但數(shù)量占比相對(duì)較少。這一點(diǎn)需要結(jié)合自身產(chǎn)品的品牌色來(lái)決定。同時(shí)，運(yùn)營(yíng)方面的設(shè)計(jì)需要與之相匹配。方便日后的延展設(shè)計(jì)。

2. 布局

在界面設(shè)計(jì)趨于同質(zhì)化的現(xiàn)在，落地的布局設(shè)計(jì)與“科技感”這個(gè)詞關(guān)聯(lián)性有限。需要注意的點(diǎn)應(yīng)該就是元素之間的間距與整體的留白。內(nèi)容排布過(guò)滿(mǎn)會(huì)顯得臃腫，且不易突出重點(diǎn)信息。to B端的產(chǎn)品需要根據(jù)需求進(jìn)行特殊優(yōu)化。

（后臺(tái)相關(guān)產(chǎn)品容易產(chǎn)生“科技感”的原因是自帶的深色背景和數(shù)據(jù)可視化等因素影響。）

3. 圖標(biāo)

圖標(biāo)應(yīng)該是除了banner外最能在頁(yè)面設(shè)計(jì)當(dāng)中凸顯“科技感”的點(diǎn)了。查看了一些相關(guān)的設(shè)計(jì)，發(fā)現(xiàn)此類(lèi)圖標(biāo)有幾個(gè)共同的特點(diǎn)：

①用色肯定。

②簡(jiǎn)潔留白。

③樣式豐富。

4. 文字

接上文，受移動(dòng)設(shè)備尺寸的限制，更加需要精煉文字。理想情況是用最剪短的話(huà)術(shù)突出核心賣(mài)點(diǎn)。切不可使用過(guò)多的文字，會(huì)使界面變得雜亂。

5. 動(dòng)效

我們之前提到的有“科技感”的設(shè)計(jì)應(yīng)當(dāng)是簡(jiǎn)潔、有品質(zhì)感的。好的動(dòng)效可以增加這些特性。所以，優(yōu)秀的動(dòng)效個(gè)人認(rèn)為應(yīng)當(dāng)是干脆、流暢、克制的。

干脆，可以給用戶(hù)及時(shí)的反饋；流暢，增強(qiáng)使用的體驗(yàn)；克制，避免過(guò)度的炫技，造成用戶(hù)的審美疲勞。UI動(dòng)效不是影視特效，好的體驗(yàn)應(yīng)當(dāng)是自然流暢的。

總結(jié)

以上，是我個(gè)人對(duì)“科技感”這個(gè)詞的相關(guān)設(shè)計(jì)如何落地的一些想法。整理下來(lái)，其中的關(guān)鍵點(diǎn)是：提取分析關(guān)鍵詞、搜索相關(guān)競(jìng)品參考、挖掘其共性、構(gòu)思差異化。

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

作者：FLYXMF，微信公眾號(hào)：Fly Lab

本文由 @FLYXMF 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。