科技感：等同于未來(lái)科技，未來(lái)科技是指超越現(xiàn)實(shí)的科學(xué)技術(shù)，未來(lái)科技與高科技、最新科技以及前沿科學(xué)技術(shù)等的概念完全不同，而且是有本質(zhì)區(qū)別的……
網(wǎng)上找到的說(shuō)法顯得高深甚至玄學(xué)，與我們的日常設(shè)計(jì)工作并不匹配。仔細(xì)想來(lái)，和科技本身最相關(guān)的應(yīng)該是產(chǎn)品自身的技術(shù)和功能。設(shè)計(jì)師需要做的，就是根據(jù)需求，將「科技」這個(gè)詞結(jié)合自身產(chǎn)品屬性，通過(guò)視覺表現(xiàn)的方式呈現(xiàn)出來(lái)，讓用戶產(chǎn)生共鳴。
說(shuō)到「科技感」這個(gè)詞，我會(huì)把它拆開成「科技」和「感受」兩個(gè)詞來(lái)進(jìn)行分析。
談到「科技」，我會(huì)聯(lián)想到機(jī)器人、外太空、全息投影等等；而「感受」這個(gè)詞的范圍就很大了，所有看上去對(duì)得上「科技感覺」的事物都可以歸到「感受」當(dāng)中去。
△ 電影：機(jī)械姬/創(chuàng)戰(zhàn)紀(jì)/遺落戰(zhàn)境
1. 提取出「科技感」中能聯(lián)想到的關(guān)鍵詞
Key words：地球、地圖、外太空、三維圖形、藍(lán)色、城市、寫實(shí)照片、粒子、太空、機(jī)器人、全息投影、人工智能、透明玻璃、賽博朋克、游戲、電影、武器、移動(dòng)設(shè)備、FUI、AR、VR 等等。
結(jié)合產(chǎn)品的屬性和我們對(duì)產(chǎn)品認(rèn)知的感受進(jìn)行篩選，并根據(jù)篩選后的關(guān)鍵詞尋找相關(guān)圖片，制作情緒板擬定主視覺風(fēng)格。這類風(fēng)格的視覺走向個(gè)人認(rèn)為應(yīng)當(dāng)是簡(jiǎn)潔且具有品質(zhì)感的。
△ 擬定的情緒板
2. 尋找相關(guān)競(jìng)品或參考，挖掘此類型設(shè)計(jì)的共同點(diǎn)
尋找相關(guān)競(jìng)品或參考，挖掘此類型設(shè)計(jì)的共同點(diǎn)。比如其中涉及到的元素：點(diǎn)、線、深色背景、文字修飾、光效等等。
確定好方向和準(zhǔn)備工作，下一步我們就可以從「背景、圖形、配色、字體」這四大方面著手設(shè)計(jì)了。
3. 背景
在強(qiáng)調(diào)簡(jiǎn)潔的科技類產(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)品匹配度、視覺干擾，這些都是我們應(yīng)該注意的點(diǎn)。一張高質(zhì)量的圖片可以很好的凸顯產(chǎn)品調(diào)性，提升設(shè)計(jì)圖的整體質(zhì)量。反之就會(huì)大大降低用戶對(duì)其的好感度與信任度，顯得廉價(jià)，無(wú)品質(zhì)。
4. 圖形
通過(guò)前期分析，「科技感」設(shè)計(jì)當(dāng)中常出現(xiàn)的圖形樣式包括：點(diǎn)、線條、抽象圖形等。用最簡(jiǎn)單的圖形，呈現(xiàn)最合理的設(shè)計(jì)。
無(wú)論是 banner 還是海報(bào)，設(shè)計(jì)的重點(diǎn)都應(yīng)該放在文字內(nèi)容上，要讓用戶明白產(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ì)更加飽滿。
5. 配色
提到「科技」我們下意識(shí)地就會(huì)聯(lián)想到藍(lán)色，這也是最安全、最穩(wěn)妥，使用也最多的顏色。其應(yīng)用的范圍非常廣泛：科技、金融、醫(yī)療、航空、企業(yè)官網(wǎng)等都可以用到。
藍(lán)色的使用很常見，但過(guò)分使用會(huì)給人一種冷冰冰的感覺。所以我們可以嘗試用其他顏色來(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ì)的。
原因：
- 可以和圖形當(dāng)中的線條完美搭配。
- 占據(jù)少量的空間，有更多的留白。
- 纖細(xì)字體自帶的精致屬性。
- 匹配產(chǎn)品自身的屬性。
- ……
標(biāo)題的使用應(yīng)該簡(jiǎn)短干練，突出重點(diǎn)即可。更多的文字可以放到副標(biāo)題當(dāng)中去，盡可能壓縮文字個(gè)數(shù)。過(guò)多的文字會(huì)讓用戶產(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è)面整體更飽滿更有立體感。
△ 電影：機(jī)械姬
7. 延展
其他可以增加「科技感」的設(shè)計(jì)形式：空間感、卡通元素、運(yùn)用三維、光效加持。
空間感：通過(guò)視角的轉(zhuǎn)換、模擬鏡頭光圈虛化等處理，可以讓我們的設(shè)計(jì)圖更立體，更有深度。
卡通元素：添加插畫、卡通風(fēng)格元素，表面上與偏寫實(shí)的科技風(fēng)格不相干，不過(guò)，通過(guò)視覺元素和色彩的合理搭配，以及動(dòng)效的融入，可以達(dá)到出乎意料的效果。
運(yùn)用三維：使用三維元素，如三維的地球、城市等。與科技寫實(shí)風(fēng)格相匹配，并讓界面充滿立體感，形成差異性，有很好的視覺沖擊力。
光效加持：全局光、點(diǎn)光、線性光。不同的光效必然會(huì)產(chǎn)生不同的效果。在「科技」類的視覺風(fēng)格當(dāng)中，光的使用也非常頻繁。背景光烘托前景物體；點(diǎn)光、線性光可以加強(qiáng)局部，同時(shí)可以作為很好的點(diǎn)綴。具體如何使用，需要根據(jù)我們?cè)O(shè)計(jì)的具體元素來(lái)制定。
上述提到的方法更多的是對(duì)運(yùn)營(yíng)設(shè)計(jì)或是平面設(shè)計(jì)等視覺方面的思考。
在 UI 設(shè)計(jì)當(dāng)中，個(gè)人認(rèn)為依舊可以遵從簡(jiǎn)潔、品質(zhì)感這兩點(diǎn)原則進(jìn)行嘗試。
△ MOO音樂
△ 悅跑圈
△ 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ò)滿會(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)中凸顯「科技感」的要素了。查看了一些相關(guān)的設(shè)計(jì)，發(fā)現(xiàn)此類圖標(biāo)有幾個(gè)共同的特點(diǎn)：
- 用色肯定
- 簡(jiǎn)潔留白
- 樣式豐富
4. 文字
接上文，受移動(dòng)設(shè)備尺寸的限制，更加需要精煉文字。理想情況是用最簡(jiǎn)短的話術(shù)突出核心賣點(diǎn)。切不可使用過(guò)多的文字，會(huì)使界面變得雜亂。
5. 動(dòng)效
我們之前提到的有「科技感」的設(shè)計(jì)應(yīng)當(dāng)是簡(jiǎn)潔、有品質(zhì)感的，而好的動(dòng)效可以增加這些特性。所以，個(gè)人認(rèn)為優(yōu)秀的動(dòng)效應(yīng)當(dāng)是干脆、流暢、克制的。
干脆，可以給用戶及時(shí)的反饋；流暢，增強(qiáng)使用的體驗(yàn)；克制，避免過(guò)度的炫技，造成用戶的審美疲勞。UI 動(dòng)效不是影視特效，好的體驗(yàn)應(yīng)當(dāng)是自然流暢的。
以上，是我個(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)行延展。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。