您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題后@管理員能讓我們及時了解您的意見

成長值達到300分以上才可以發布喲!~

先看看別人的即刻>

如何讓我們的設計更有“科技感”!

原創文章 分類: 經驗/觀點 版權:
13266 420 504 14
2019-06-17
112.5
首頁推薦


什么是“科技感”?


科技感:等同于未來科技,未來科技是指超越現實的科學技術,未來科技與高科技、最新科技以及前沿科學技術等的概念完全不同,而且是有本質區別的...(解釋來自網絡)


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


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


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


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


Image title

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


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


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


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


Image title


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


Image title


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



一、背景


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


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


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


Image title



二、圖形


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


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


Image title


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


Image title



三、配色


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


Image title


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


Image title


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


Image title



四、字體


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


原因:

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

②占據少量的空間,有更多的留白。

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

④匹配產品自身的屬性。

...


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


Image title


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


Image title

機械姬



五、延展


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


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


Image title


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


Image title


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


Image title


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


Image title


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


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


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


Image titleMOO音樂


Image title

悅跑圈

Image title

Apple Store


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


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



一、配色


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


Image title

Image title



二、布局


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


(后臺相關產品容易產生“科技感”的原因是自帶的深色背景和數據可視化等因素影響。)


Image title


三、圖標


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


①用色肯定。

②簡潔留白。

③樣式豐富。


Image title



四、文字


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


Image title



五、動效


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


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


Image title



總結


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


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





FLYXMF

交流合作可加WX:774842582

3000粉絲/35關注

2017年度最佳作品集TOP50得主2016年度最佳作品集TOP50得主人氣明星首頁達人磚家
UI設計師的「武器庫」Gloria酒店網站design
1
竹林浪子

感謝分享,看得出作者認真寫的總結,點贊

精彩!

掃描二維碼
去手機端查看海報

FLYXMF

TA已經獲得17枚勛章啦

  • 成就勛章

    • 特別勛章

    • 身份勛章

  • 已擁有

  • 作品

    創造者才是真正的享受者。

  • 經驗

    經驗是一所好學校,可它的學生卻經常曠課。

  • 活躍

    大神都是從圍觀群眾開始的

  • 拓展

    作品、經驗、活躍還不能滿足你?

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了
四川快乐12号码推荐