設(shè)計師如何讓自己的設(shè)計作品富有科技感

什么是「科技感」?

科技感：等同于未來科技，未來科技是指超越現(xiàn)實的科學技術(shù)，未來科技與高科技、最新科技以及前沿科學技術(shù)等的概念完全不同，而且是有本質(zhì)區(qū)別的……

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

如何設(shè)計的更有「科技感」?

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

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

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

 

1. 提取出「科技感」中能聯(lián)想到的關(guān)鍵詞

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

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

△ 擬定的情緒板

 

延伸閱讀：

 

少改稿利器!寫給設(shè)計師的情緒板全方位使用指南

@喪心病狂十六夜貓 ：你經(jīng)歷過如果有很多設(shè)計師參與了同一個項目，在會見客戶的時候，設(shè)計的認識和圖片不一致而導致打回重做這樣的事情嗎? 在設(shè)計上圖片比其他要素更容易讓人理解，...閱讀文章 >>2. 尋找相關(guān)競品或參考，挖掘此類型設(shè)計的共同點

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

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

 

3. 背景

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

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

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

4. 圖形

 

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

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

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

 

5. 配色

 

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

很贊哦！ ()

打賞本站

感謝您的支持，我會繼續(xù)努力的!

掃碼打賞，你說多少就多少

打開支付寶掃一掃，即可進行掃碼打賞哦

Powered by ，優(yōu)秀ps教程網(wǎng)站

 

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

 

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

 

6. 字體

 

從眾多參考當中，我們能發(fā)現(xiàn)和「科技」相關(guān)的設(shè)計很多都是使用正?；蛘咂毜淖煮w來進行設(shè)計的。

原因：

可以和圖形當中的線條完美搭配。

占據(jù)少量的空間，有更多的留白。

纖細字體自帶的精致屬性。

匹配產(chǎn)品自身的屬性。

……

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

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

 

△ 電影：機械姬

 

7. 延展

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

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

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

 

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

 

光效加持：全局光、點光、線性光。不同的光效必然會產(chǎn)生不同的效果。在「科技」類的視覺風格當中，光的使用也非常頻繁。背景光烘托前景物體;點光、線性光可以加強局部，同時可以作為很好的點綴。具體如何使用，需要根據(jù)我們設(shè)計的具體元素來制定。

 

界面設(shè)計中如何凸顯「科技感」?

 

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

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

△ MOO音樂

 

△ 悅跑圈

 

很贊哦！ ()

打賞本站

感謝您的支持，我會繼續(xù)努力的!

掃碼打賞，你說多少就多少

打開支付寶掃一掃，即可進行掃碼打賞哦

Powered by ，優(yōu)秀ps教程網(wǎng)站

 

△ Apple Store

 

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

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

1. 配色

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

2. 布局

 

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

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

3. 圖標

 

圖標應(yīng)該是除了 banner 外最能在頁面設(shè)計當中凸顯「科技感」的要素了。查看了一些相關(guān)的設(shè)計，發(fā)現(xiàn)此類圖標有幾個共同的特點：

用色肯定

簡潔留白

樣式豐富

4. 文字

 

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

5. 動效

 

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

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

總結(jié)

 

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

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

很贊哦！ ()

打賞本站

感謝您的支持，我會繼續(xù)努力的!

掃碼打賞，你說多少就多少

打開支付寶掃一掃，即可進行掃碼打賞哦

Powered by ，優(yōu)秀ps教程網(wǎng)站