互聯(lián)網(wǎng)在過去十年中發(fā)生了翻天覆地的變化,但它根本沒有改變。如果我們看看10 年前,我們會(huì)發(fā)現(xiàn)大量的網(wǎng)站都有一個(gè)共同的排版模型。頁(yè)眉、頁(yè)腳、側(cè)邊欄和內(nèi)容區(qū)域構(gòu)成了這個(gè)簡(jiǎn)單的布局。這是人們對(duì)網(wǎng)絡(luò)排版的期望。與此同時(shí),Macromedia Flash 的興起將其他排版方式帶入了一個(gè)新時(shí)代。布局不再必須綁定到固定格式。當(dāng)然,隨著FLASH的沒落,這種方式也淡出一些了……我說是淡了,因?yàn)樗F(xiàn)在正在卷土重來。
假設(shè)您研究了一個(gè)流行的投資組合網(wǎng)站,該網(wǎng)站展示了當(dāng)今的網(wǎng)頁(yè)設(shè)計(jì)。毫無疑問,您會(huì)注意到網(wǎng)頁(yè)的基本結(jié)構(gòu)是千變?nèi)f化的,根本沒有固定的形式。它可以被拉伸并轉(zhuǎn)換成任何想要的東西。我認(rèn)為這是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的最佳副產(chǎn)品。事實(shí)上,新規(guī)范是根本沒有固定的規(guī)范。
總之,我們可以觀察到幾個(gè)重要的排版設(shè)計(jì)趨勢(shì),它們代表了我所理解的非常規(guī)布局。它們是非常規(guī)的,因?yàn)樗鼈儾粐?yán)格遵循特定的代碼或既定系統(tǒng)。但我可以找到數(shù)十個(gè)(如果不是數(shù)百個(gè))屬于這些類別的這種趨勢(shì)的實(shí)例。
在本文中,您會(huì)發(fā)現(xiàn)非常規(guī)印刷趨勢(shì)的有趣大雜燴,希望它能激發(fā)您思考網(wǎng)頁(yè)設(shè)計(jì)的基本結(jié)構(gòu)。讓我們仔細(xì)看看.基于模塊或網(wǎng)格
這個(gè)案例完美地說明了這一點(diǎn)。整個(gè)設(shè)計(jì)是響應(yīng)式的。隨著屏幕尺寸的變化,每個(gè)模塊都會(huì)改變尺寸以適應(yīng)空間。均勻劃分屏幕使設(shè)計(jì)更容易適應(yīng)。它們還(在大屏幕尺寸下)引入了打破模塊邊界的元素,這是點(diǎn)睛之筆。
下一個(gè)排版基于模塊化或網(wǎng)格狀結(jié)構(gòu)。在這些設(shè)計(jì)中,每個(gè)模塊都試圖縮放到屏幕尺寸。這并不是真正的新方法,但響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)使其更加有用。它意味著可以從各種模塊化組件(如構(gòu)建塊)創(chuàng)建的自適應(yīng)布局模式。分割屏幕
在此類別中,我們選擇的網(wǎng)站使用垂直分隔線來劃分屏幕。這可能有很多原因,通過研究大量此類案例,我發(fā)現(xiàn)了兩個(gè)主要的原因。
其中一個(gè)原因是,有時(shí)在一組設(shè)計(jì)中,確實(shí)有兩個(gè)同樣重要的主要元素。網(wǎng)頁(yè)設(shè)計(jì)的一種常見方法是按重要性對(duì)內(nèi)容進(jìn)行排序。然后,重要性在設(shè)計(jì)的層次結(jié)構(gòu)和結(jié)構(gòu)中體現(xiàn)出來。但是,如果您只想宣傳兩件事怎么辦?這樣,您就可以突出顯示兩者并讓用戶快速在它們之間進(jìn)行選擇。
第二個(gè)原因是有時(shí)你必須表現(xiàn)出重要的二元性。以八四網(wǎng)站為例。他們?cè)谶@里想表達(dá)的是,他們的核心競(jìng)爭(zhēng)力來自扎根于數(shù)字領(lǐng)域,以及多才多藝的員工。這兩件事造就了他們。通過屏幕分割來表達(dá)這一點(diǎn)是一種令人愉快的方式。去界面化
網(wǎng)頁(yè)設(shè)計(jì)中的主要元素之一是容器元素:框、邊框、形狀和所有類型的容器都用于將內(nèi)容與頁(yè)面分開。想象一個(gè)悶熱的標(biāo)題,元素整齊地放在里面,與內(nèi)容分開?,F(xiàn)在的一個(gè)普遍趨勢(shì)是刪除所有這些額外的界面元素。
這是一種極簡(jiǎn)主義的方法,但它通過一些有趣的曲折更進(jìn)了一步。
可以看出,通過去除任何感性的頁(yè)眉和頁(yè)腳,內(nèi)容得到了極大的強(qiáng)調(diào)。您將首先看到公司名稱,然后是對(duì)他們做什么(和在哪里)的清晰描述,而不是首先看到標(biāo)題。之后是主導(dǎo)航。在讓用戶瀏覽之前強(qiáng)調(diào)品牌的好方法!它形成了美麗的視覺流動(dòng)。有趣的是,標(biāo)題和界面僅在您滾動(dòng)頁(yè)面時(shí)出現(xiàn)。漂亮而有效的排版,這種模式的使用令人鼓舞。
我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!