電商領(lǐng)域的單頁設(shè)計(jì),更像是對(duì)平面單頁在使用環(huán)境上的升級(jí),它不僅擁有平面設(shè)計(jì)中的所有設(shè)計(jì)規(guī)律,更有著網(wǎng)站設(shè)計(jì)的很多特點(diǎn)。
比如:可以利用新的視差滾動(dòng)和H5的技術(shù),來使頁面與人的交互更密切,也使得用戶在瀏覽頁面時(shí),更像是在閱讀一個(gè)故事。
它主要出現(xiàn)在一些促銷類的活動(dòng)頁面、產(chǎn)品介紹頁、店鋪首頁等需求中。
如下圖:
在設(shè)計(jì)單頁的專題時(shí),為了讓首屏到次屏再到內(nèi)容區(qū)間的視覺更加的連貫和流暢,就要充分利用好局部對(duì)比和整體關(guān)系來使頁面效果更加的完整。
平面理論中的點(diǎn)用來聚焦、發(fā)散、吸引人們的注意力。
如下圖:
運(yùn)用一些藝術(shù)化的表達(dá)方式,來給頁面增加一些趣味性和裝飾性。
如下圖:
單頁設(shè)計(jì)不要局限于完成首屏設(shè)計(jì)或者某個(gè)單一元素的設(shè)計(jì)中。
下面我們來看3組優(yōu)秀的設(shè)計(jì):
接下來是我整理的10個(gè)專題設(shè)計(jì)的技巧, 主要是一些大的理論點(diǎn),大家結(jié)合著自己的專題去思考吧。
打破首屏(就是俗稱的頭圖)與次屏在設(shè)計(jì)上有明顯的顏色條分隔、形式分隔、線分隔等。
如下圖,紅圈所示的位置就是頭圖的高度所在,一般頭圖的高度值建議在450?600之間,太高了就會(huì)浪費(fèi)空間。
讓元素頭尾呼應(yīng),上下連貫。
舉個(gè)例子:
專題中出現(xiàn)的主要元素如:頭和尾部的元素要在視覺上做到呼應(yīng)和一致性;
專題中貫穿整體的這個(gè)元素,一定要在整體頁面中一筆直下,一氣呵成,否則就會(huì)出現(xiàn)斷點(diǎn)的感覺。
如果在實(shí)際需求應(yīng)用中無法做到整體設(shè)計(jì)的表現(xiàn),那么也應(yīng)該盡量在局部或者某些元素的運(yùn)用上做到這點(diǎn)。
對(duì)于一些平臺(tái)型的活動(dòng)單頁來講,我們??吹揭恍┯貌煌珘K分區(qū)的設(shè)計(jì)。當(dāng)然,這樣的處理方式是為了更好的分出不同的活動(dòng)內(nèi)容,也是做為設(shè)計(jì)的表現(xiàn)形式。
如下圖:
(注:并不是說不能用多色塊對(duì)頁面內(nèi)容進(jìn)行分區(qū),而是要看具體的需求和主題,選擇用不同的形式去表現(xiàn))
上面講到元素的重復(fù)出現(xiàn)是為了更好的連接由點(diǎn)到面的整體感;
如圖所示:
單頁因其把所有信息和元素都集中表現(xiàn)在一整張頁面中,所以單頁設(shè)計(jì)也注定是能超過3屏以上的頁面設(shè)計(jì)。
舉個(gè)例子:
在使用留白時(shí),要注意不要因?yàn)轫撁嬗辛舭缀痛罂障兜某霈F(xiàn),使得整體視覺的連接上,出現(xiàn)視覺斷點(diǎn)的情況。要盡量做到屏內(nèi)可緊、屏外可松,讓整體頁面充滿節(jié)奏感。
整張頁面設(shè)計(jì)強(qiáng)調(diào)的是整體從點(diǎn)、到線、再到面的構(gòu)思和表現(xiàn),它不光只是產(chǎn)出一個(gè)首屏視覺(頭圖)和一個(gè)內(nèi)容區(qū)各自獨(dú)立的體現(xiàn)。
舉個(gè)例子:
如圖所示的幾個(gè)放大效果,在細(xì)節(jié)的處理和技巧上都是很棒的哦。
正是因?yàn)檫^分強(qiáng)調(diào)形式感的東西,所以整張頁面的效果就要具有十足的特色和精巧的創(chuàng)意性,才能必免流于普通單頁設(shè)計(jì)行列中。
從而吸引用戶眼球,讓用戶跟隨整體的設(shè)計(jì)去體驗(yàn)完整的頁面信息,形成對(duì)整張頁面較完整的用戶體驗(yàn)和視覺認(rèn)識(shí)。
舉個(gè)例子:
當(dāng)你設(shè)計(jì)單頁頁面時(shí),在構(gòu)思之初給整體頁面設(shè)定出一個(gè)故事,讓頁面具有新穎的主題性,那單頁給用戶的視覺體驗(yàn)也會(huì)更棒。
二個(gè)作品從立意到技法,到設(shè)計(jì)都脫離了傳統(tǒng)電商的折扣表現(xiàn)。比較有意思,想知道這里面的技法細(xì)節(jié)和更多的幕后知識(shí)嗎?
滾屏動(dòng)畫的特點(diǎn)在于:
如下圖所示,來自蒂芙尼。
分享一下我的觀后感:
跟著漫天飛舞的,飄逸在蒂芙尼的純凈世界。
這里有開啟幸福的鑰匙、有城市的記憶、有定情的禮物、有盟約的海誓,來吧,一起探索屬于你和我的蒂芙尼。
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址:http://16qt59sf.cn/news/industry/1806.html