曾經(jīng)在顧客面前調(diào)侃網(wǎng)站風(fēng)格參考思路:高科技看高通,國際簡約氣質(zhì)風(fēng)參考蘋果,上市集團看萬科,平面建筑設(shè)計公司參考Gensler。后來也發(fā)現(xiàn)這樣跟顧客指引之后,做什么新網(wǎng)站設(shè)計項目就輕松了很多,顧客自己所屬行業(yè)以及個人喜好有了一個清晰的追求方向。同樣做企業(yè)網(wǎng)站設(shè)計也是需要有一個清晰的風(fēng)格設(shè)計思路。今天分享一打非常有特色有氣質(zhì)的網(wǎng)站,希望大家能從中網(wǎng)站布局、網(wǎng)頁色彩搭配、網(wǎng)站內(nèi)容策劃等方面取經(jīng)!
01
-
網(wǎng)頁布局中巧用3D、C4D建模元素營造空間立體效果裝飾網(wǎng)頁主題,容易提升網(wǎng)頁的視覺沖擊力和吸引力,留下深刻印象。
02
-
手機網(wǎng)頁ui中跟PC網(wǎng)頁設(shè)計一樣,通過有趣和獨特的插畫元素或手繪等設(shè)計技巧,提升網(wǎng)站趣味性和獨特性。
03
-
屏幕兩對半?yún)^(qū)隔開,讓用戶快速獲取重點信息,便于檢索與高效閱讀。
04
-
畫面感設(shè)計中,通過圖像與筆刷的融合,營造一種隨意、親和的視覺氛圍。這種設(shè)計技巧大多數(shù)適合在運動、力量感甚至餐飲等感性居多的主題網(wǎng)站頁面設(shè)計中。
05
-
利用視覺元素、版塊等的層級關(guān)系,巧妙通過圖片、形狀等信息內(nèi)容形成層疊和錯位感,打破常規(guī)的扁平、沉悶布局,提升設(shè)計的表現(xiàn)力和彰顯重要版塊。
06
-
通過引入特殊的不規(guī)則有機形狀圖形,使得畫面看起來更跳躍。
07
-
數(shù)據(jù)分析統(tǒng)計界面通常喜歡采用柵格化系統(tǒng)來做版面版式輔助設(shè)計,有利于做內(nèi)容編排和信息版塊清晰化。
08
-
uber官網(wǎng)采用的非對稱設(shè)計技巧。將界面中的圖像放置在出血位置上,形成視覺上的非對稱,可迅速提升整體的設(shè)計感和現(xiàn)代感。
09
-
抽象圖形的植入會打造一種超強的視覺吸引力,通常用在個人站點或從事新銳超前行業(yè)的企業(yè)網(wǎng)頁中。
10
-
網(wǎng)站首頁頭圖或視頻模糊化設(shè)計技巧,可提升視覺豐富感和專業(yè)感,大背景模糊化再適當(dāng)搭配一些疊加色,會使得畫面感更加神秘、豐富。
11
-
整體畫面采用斜切設(shè)計手法。斜切可以說是一種長期存在但不會過時的設(shè)計技巧。它可以傳達一種新穎、速度的氛圍,整體視覺效果容易出彩。
12
-
全屏采用單場景圖片布局,使得整體畫面感高度統(tǒng)一,同時還可以利用畫面中的虛實景象留白技巧,產(chǎn)生視覺意境和禪意。
素馬經(jīng)典案例眾城卓越MICCTECH
13
-
圖標、按鈕、幾何元素、小色塊等網(wǎng)頁裝飾元素的采用,可突出網(wǎng)頁重點內(nèi)容。但這種技巧一般用在設(shè)計類網(wǎng)站或個性化網(wǎng)頁中。
14
-
真實場景圖片采用,有給人一種真實的震撼感。尤其是首頁背景圖片的設(shè)計與攝影相當(dāng)關(guān)鍵,如能跟主題內(nèi)容一致,會無形中助力風(fēng)格設(shè)計,留給用戶深刻印象。(跟這個手法相反的,例如高通-中國官網(wǎng)舊版一樣,是一種虛擬的場景)
素馬經(jīng)典案例科皓
15
-
利用插畫風(fēng)格中的等距視覺效果來排版,不但有空間立體感,還有畫面動感效果。
16
-
漸變技巧的采用,讓網(wǎng)站更加具有魅力。但我們很多設(shè)計師以為漸變技巧可能就是我們平常扁平風(fēng)里的一種色過度到另一種色而已。有設(shè)計師吐槽,Iphone X的 UI界面中的那種漸變才是高逼格漸變,沒有九段界面設(shè)計功底做不出這個效果。
17
-
場景俯視構(gòu)圖法。這種背景圖的設(shè)計技巧通常采用在餐飲美食行業(yè)網(wǎng)站設(shè)計中。
18
-
Balenciaga.com巴黎世家官網(wǎng)就采用了極端化設(shè)計風(fēng)格。反常規(guī)化設(shè)計在某些特定條件下會達到非常棒的效果。因為它有別于同行的常規(guī)展示理念和方式,用戶能從中被深度感染。