值得您信賴的網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、整合營銷提供商

網(wǎng)站首頁
關(guān)于我們
項(xiàng)目服務(wù)
案例展示
新聞動(dòng)態(tài)
聯(lián)系我們
一種新的設(shè)計(jì)手法融合最新的設(shè)計(jì)技巧

2017-03-02  2407  

返回列表

     一種新的設(shè)計(jì)手法融合最新的設(shè)計(jì)技巧
 
  一、雙色調(diào)配色方案
  雙色調(diào)配色已經(jīng)存在很長的一段時(shí)間了,單我們幾天所說的雙色調(diào)方案是在全屏設(shè)計(jì)背景下,加入漸變效果和高沖擊力視覺設(shè)計(jì)下的雙色調(diào)配色方案。在扁平化的大勢之下,Spotify 大范圍使用雙色調(diào)配色,將這一設(shè)計(jì)手法推到了潮頭。
  那么雙色調(diào)配色具體是怎么一回事呢?
  簡單說來,是兩種色彩來構(gòu)成一套配色。最常見的雙色調(diào)配色會(huì)選擇互補(bǔ)色來進(jìn)行組合。在更復(fù)雜的場合中,會(huì)使用其他的組合來營造特定的感覺,打破約定俗成的配色風(fēng)格,可能會(huì)有驚喜。大多數(shù)雙色調(diào)效果是使用一個(gè)色彩鮮艷的色調(diào)疊加在照片上實(shí)現(xiàn)的,強(qiáng)化深淺色彩對比,從而營造出色彩沖擊力。

  二、分屏式設(shè)計(jì)
  分屏式的網(wǎng)頁設(shè)計(jì)案例正在成倍增長。從技術(shù)上來講,這類網(wǎng)頁的設(shè)計(jì)師喜歡將屏幕均分為并排的兩個(gè)區(qū)塊,兩者尺寸大小都一樣,有的時(shí)候還會(huì)加上輪廓來強(qiáng)調(diào)區(qū)域的概念。
  這樣設(shè)計(jì)的效果是很酷炫的,在代碼編寫到位的情況下,網(wǎng)頁在桌面端打開的時(shí)候,兩個(gè)區(qū)塊并排顯示,而在移動(dòng)端上,并排的區(qū)塊智能地以上下堆疊的形式呈現(xiàn)出來。
  分屏是設(shè)計(jì)的使用其實(shí)是可以嵌套細(xì)分的,它可以是簡單的對半分,也可以套個(gè)柵格,無限分割下去,這樣的案例非常的多。被劃分的區(qū)塊可以承載相似的、對比的內(nèi)容,也可以承載截然不同的媒體類型,而柵格式細(xì)分的區(qū)塊還能幫助網(wǎng)站的設(shè)計(jì)者探索用戶真正感興趣的內(nèi)容。
  分屏式設(shè)計(jì)對用戶是友好的,和響應(yīng)式設(shè)計(jì)可以很好地結(jié)合起來,同時(shí)還可以加入更多的新技術(shù)和設(shè)計(jì)手法。
  下面是一些高效分屏的技巧:
  當(dāng)你沒有太強(qiáng)的視覺設(shè)計(jì)之時(shí),注意字體和色彩的搭配
  吸引用戶的注意力讓他們從左向右看,從而引導(dǎo)用戶的視覺運(yùn)動(dòng)。
  使用色塊來分割屏幕,為主要信息留下足夠的空間,確保整體的可讀性。
  將分屏視作為超大的卡片。將不同的內(nèi)容制作成更小的區(qū)塊,在大的卡片中組成馬賽克。
 
  三、空間共享式排版
  你可能在其他地方看到過這個(gè)趨勢:文字排版被延伸到了共享的設(shè)計(jì)空間。在絕大多數(shù)的網(wǎng)站中,圖像、背景和文字是最主要的元素,它們要么相互嵌套有機(jī)組合,要么相互分離。
  但是越來越多的設(shè)計(jì)師開始試圖打破元素之間的界限,不同類型的視覺元素打破固有的位置,進(jìn)入其他元素的空間,堆疊,交叉,錯(cuò)落。看起來還是非常有趣的。
  但是考慮到整體的可讀性,這種設(shè)計(jì)還是相當(dāng)具有挑戰(zhàn)性的。
  要使用這種設(shè)計(jì)技巧,最好搭配以簡單的排版。文字應(yīng)當(dāng)同其他的元素有足夠的對比性,從而確保它在橫跨多個(gè)不同元素的時(shí)候,保持基本的可讀性和辨識度。這也使得絕大多數(shù)這類網(wǎng)站都傾向于使用黑色和白色的文字。
  字體尺寸也是一個(gè)值得注意的屬性,它和色彩控制同樣重要。你還需要注意文本部分在不同尺寸的屏幕上的顯示和運(yùn)動(dòng),也就是響應(yīng)式變化中的斷點(diǎn)。
  在諸多設(shè)計(jì)案例中,最值得注意的是Deux Huit Huit 。橫跨首頁主圖的文字的運(yùn)動(dòng)方式,當(dāng)它穿越圖片、背景的時(shí)候,是如何確保它的可讀性的。
 
    南京網(wǎng)站建設(shè):http://retailworkerwire.com