極有(yǒu)可(kě)能(néng)被低估的三種有(yǒu)趣的網頁(yè)設計趨勢
來源: 2017-8-14 9:52:23 浏覽量:
設計出不同凡響的網站是許多(duō)設計師一直追求的事情,所以大家着迷各種時尚的元素,漂亮的配色,流行的趨勢,複古的樣式,等等。經過時間驗證的經典設計、固定的搭配是不錯的選擇,而逐步展露頭角的新(xīn)趨勢,則能(néng)更好的滿足這一需求。
一種全新(xīn)的設計手法,融合了最新(xīn)的設計技(jì )巧,展現和前人不同的氣場,用(yòng)更現代的氣質(zhì)來承載内容,這樣的網站無疑會更加吸引用(yòng)戶,讓訪客難以忘懷。今天要聊的三種設計趨勢其實已經出現一陣子了,但是作(zuò)為(wèi)一種相對綜合的設計手法,他(tā)們并沒有(yǒu)引起廣泛的關注。隻需要使用(yòng)現有(yǒu)的元素、色彩和排版手法,就可(kě)以實現這三種設計效果,但是它們不論是從美學(xué)特征上,還是從功能(néng)性上,都不輸于其他(tā)的趨勢。有(yǒu)興趣麽?不妨來看看吧。
1、雙色調配色方案
雙色調配色已經存在很(hěn)長(cháng)的一段時間了,單我們幾天所說的雙色調方案是在全屏設計背景下,加入漸變效果和高沖擊力視覺設計下的雙色調配色方案。在扁平化的大勢之下,Spotify 大範圍使用(yòng)雙色調配色,将這一設計手法推到了潮頭。
那麽雙色調配色具(jù)體(tǐ)是怎麽一回事呢(ne)?
簡單說來,是兩種色彩來構成一套配色。最常見的雙色調配色會選擇互補色來進行組合。在更複雜的場合中(zhōng),會使用(yòng)其他(tā)的組合來營造特定的感覺,打破約定俗成的配色風格,可(kě)能(néng)會有(yǒu)驚喜。
大多(duō)數雙色調效果是使用(yòng)一個色彩鮮豔的色調疊加在照片上實現的,強化深淺色彩對比,從而營造出色彩沖擊力。Shopify 對于這種手法的運用(yòng)非常的純熟,在恰當的排版設計搭配下,将數十位設計師照片以這種獨特的方式展現出來。
從技(jì )術的角度上來看,雙色調配色可(kě)以同許多(duō)其他(tā)的設計手法、技(jì )術一同搭配使用(yòng),比如全屏設計,比如響應式設計,比如插畫,正如同上面的那些案例中(zhōng)的諸多(duō)技(jì )術一樣。除了獨特的視覺效果,它可(kě)以用(yòng)來強調,對比。這是一種非常強的表現手法,用(yòng)的時候記得适量使用(yòng)。
2、分(fēn)屏式設計
分(fēn)屏式的網頁(yè)設計案例正在成倍增長(cháng)。從技(jì )術上來講,這類網頁(yè)的設計師喜歡将屏幕均分(fēn)為(wèi)并排的兩個區(qū)塊,兩者尺寸大小(xiǎo)都一樣,有(yǒu)的時候還會加上輪廓來強調區(qū)域的概念。
這樣設計的效果是很(hěn)酷炫的,在代碼編寫到位的情況下,網頁(yè)在桌面端打開的時候,兩個區(qū)塊并排顯示,而在移動端上,并排的區(qū)塊智能(néng)地以上下堆疊的形式呈現出來。
分(fēn)屏是設計的使用(yòng)其實是可(kě)以嵌套細分(fēn)的,它可(kě)以是簡單的對半分(fēn),也可(kě)以套個栅格,無限分(fēn)割下去,這樣的案例非常的多(duō)。被劃分(fēn)的區(qū)塊可(kě)以承載相似的、對比的内容,也可(kě)以承載截然不同的媒體(tǐ)類型,而栅格式細分(fēn)的區(qū)塊還能(néng)幫助網站的設計者探索用(yòng)戶真正感興趣的内容。
分(fēn)屏式設計對用(yòng)戶是友好的,和響應式設計可(kě)以很(hěn)好地結合起來,同時還可(kě)以加入更多(duō)的新(xīn)技(jì )術和設計手法。
下面是一些高效分(fēn)屏的技(jì )巧:
當你沒有(yǒu)太強的視覺設計之時,注意字體(tǐ)和色彩的搭配
吸引用(yòng)戶的注意力讓他(tā)們從左向右看,從而引導用(yòng)戶的視覺運動。
使用(yòng)色塊來分(fēn)割屏幕,為(wèi)主要信息留下足夠的空間,确保整體(tǐ)的可(kě)讀性。
将分(fēn)屏視作(zuò)為(wèi)超大的卡片。将不同的内容制作(zuò)成更小(xiǎo)的區(qū)塊,在大的卡片中(zhōng)組成馬賽克。
盡量确保每個區(qū)塊中(zhōng)内容的簡單易讀。
3、空間共享式排版
你可(kě)能(néng)在其他(tā)地方看到過這個趨勢:文(wén)字排版被延伸到了共享的設計空間。在絕大多(duō)數的網站中(zhōng),圖像、背景和文(wén)字是最主要的元素,它們要麽相互嵌套有(yǒu)機組合,要麽相互分(fēn)離。
但是越來越多(duō)的設計師開始試圖打破元素之間的界限,不同類型的視覺元素打破固有(yǒu)的位置,進入其他(tā)元素的空間,堆疊,交叉,錯落。看起來還是非常有(yǒu)趣的。
但是考慮到整體(tǐ)的可(kě)讀性,這種設計還是相當具(jù)有(yǒu)挑戰性的。
要使用(yòng)這種設計技(jì )巧,最好搭配以簡單的排版。文(wén)字應當同其他(tā)的元素有(yǒu)足夠的對比性,從而确保它在橫跨多(duō)個不同元素的時候,保持基本的可(kě)讀性和辨識度。這也使得絕大多(duō)數這類網站都傾向于使用(yòng)黑色和白色的文(wén)字。
字體(tǐ)尺寸也是一個值得注意的屬性,它和色彩控制同樣重要。你還需要注意文(wén)本部分(fēn)在不同尺寸的屏幕上的顯示和運動,也就是響應式變化中(zhōng)的斷點。
在諸多(duō)設計案例中(zhōng),最值得注意的是Deux Huit Huit 。橫跨首頁(yè)主圖的文(wén)字的運動方式,當它穿越圖片、背景的時候,是如何确保它的可(kě)讀性的。
結語
各種各樣的設計趨勢很(hěn)多(duō),許多(duō)趨勢在你剛剛了解它們的時候就已經過時了,那些真正站得住腳的趨勢大多(duō)能(néng)同其他(tā)的技(jì )術、趨勢、設計手法能(néng)很(hěn)好的兼容、搭配。而今天我們所說的三個 趨勢正好符合這一特征,它們能(néng)夠兼容現代的風格,流行的布局與開發框架,更重要的是它們能(néng)看,夠看,好看,也不會破壞你的審美。
本文(wén)系本網編輯轉載,轉載目的在于傳遞更多(duō)信息,并不代表本網贊同其觀點和對其真實性負責。如涉及作(zuò)品内容、版權和其它問題,請在30日内與本網聯系,我們将在第一時間删除内容!
[聲明]本站文(wén)章版權歸原作(zuò)者所有(yǒu) 内容為(wèi)作(zuò)者個人觀點 本站隻提供參考并不構成任何投資及應用(yòng)建議。