-
當(dāng)前位置:首頁(yè) > 創(chuàng)意學(xué)院 > 景觀設(shè)計(jì) > 專題列表 > 正文
單頁(yè)設(shè)計(jì)(單頁(yè)設(shè)計(jì)圖片)
大家好!今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于單頁(yè)設(shè)計(jì)的問(wèn)題,以下是小編對(duì)此問(wèn)題的歸納整理,讓我們一起來(lái)看看吧。
開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具,一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等
只需要輸入關(guān)鍵詞,就能返回你想要的內(nèi)容,越精準(zhǔn),寫出的就越詳細(xì),有微信小程序端、在線網(wǎng)頁(yè)版、PC客戶端
官網(wǎng):https://ai.de1919.com。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè),服務(wù)客戶遍布全球各地,如需了解相關(guān)業(yè)務(wù)請(qǐng)撥打電話175-8598-2043,或添加微信:1454722008
本文目錄:
一、web端交互設(shè)計(jì)頁(yè)面布局對(duì)比分析2018-04-07
頁(yè)面布局
頁(yè)面布局大致可分為網(wǎng)頁(yè)(web)、軟件、手機(jī)三類,其中web和軟件有較大相似性,不作區(qū)分。軟件界面布局依功能而決定,布局復(fù)雜。因?yàn)槎x種類的標(biāo)準(zhǔn)和方式不同,頁(yè)面布局類型分類較多,先總結(jié)比較常用和普遍的布局方式,以其他方式做補(bǔ)充。
頁(yè)面布局的定義
頁(yè)面布局是指,在設(shè)計(jì)頁(yè)面的過(guò)程將頁(yè)面各要素通過(guò)合理、有效、統(tǒng)一的規(guī)則進(jìn)行排版,產(chǎn)生很好的傳播信息的視覺(jué)效果。一般來(lái)說(shuō),都會(huì)基于下原則進(jìn)行頁(yè)面布局設(shè)計(jì):
(1)對(duì)比:是防止頁(yè)面元素過(guò)于單一或沒(méi)有差異性。假如空間、大小、形狀、字體、線條、顏色等設(shè)計(jì)元素都要各不相同,那么就要制造較大的差別,要讓頁(yè)面引人注目。
(2)重復(fù):可W重復(fù)顏色、形狀、線寬、字體、大小和圖片等等。既能夠増加條理性,也可増強(qiáng)頁(yè)面的統(tǒng)一性。
(3)對(duì)齊:在頁(yè)面上,不同元素不能孤立存在,而應(yīng)當(dāng)構(gòu)建特殊的視覺(jué)關(guān)聯(lián)效果,從外觀上給予用戶更為清爽、稽巧和情緒化的體驗(yàn)。
(4)親密性:頁(yè)面上的元素不應(yīng)當(dāng)孤立的存在,彼此之間存在親密性,形成一個(gè)視覺(jué)單元。這樣可有助于信息的架構(gòu),減少信息組織的混亂。
網(wǎng)頁(yè)布局類型
網(wǎng)頁(yè)版式的基本類型主要有骨骼型、國(guó)字型、拐角型、框架型、滿版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱型、焦點(diǎn)型、自由型等12種。
1. “國(guó)”字型布局
也可以稱為“同”字型,是一些大型網(wǎng)站所喜歡的類型,即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條,接下來(lái)就是網(wǎng)站的主要內(nèi)容,左右分列兩小條內(nèi)容,中間是主要部分,與左右一起列到底,最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們?cè)诰W(wǎng)上見(jiàn)到的差不多最多的一種結(jié)構(gòu)類型。
口字型、同字型、回字型都可歸屬于此類,是一些大型網(wǎng)站所喜歡的類型,即最上面是網(wǎng)站的標(biāo)題、導(dǎo)航以及橫幅廣告條,接下來(lái)就是網(wǎng)站的主要內(nèi)容,左右分列一些小條內(nèi)容,中間是主要部分,與左右一起羅列到底,最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局的優(yōu)點(diǎn)是充分利用版面,信息量大,缺點(diǎn)是頁(yè)面擁擠,不夠靈活。這種結(jié)構(gòu)是我們?cè)诰W(wǎng)上見(jiàn)到的差不多最多的一種結(jié)構(gòu)類型,常用于門戶網(wǎng)站的設(shè)計(jì)。
2.拐角型 匡型布局或T型布局可歸于此類,在匡型布局中,常見(jiàn)的類型有上面是標(biāo)題與導(dǎo)航,左側(cè)是展示圖片的類型和最上面是標(biāo)題及廣告,右側(cè)是導(dǎo)航鏈接的類型。這種版式在韓國(guó)的網(wǎng)站中常見(jiàn)。T布局就是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志與廣告條,下方左面為主菜單,右面顯示內(nèi)容的布局,因?yàn)椴藛伪尘吧瘦^深,整體效果類似英文字母T,所以稱之為T形布局。這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰,主次分明,是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板,如果在細(xì)節(jié)色彩上不注意,則很容易讓人感覺(jué)枯燥無(wú)味。
2.1“匡”字型布局
這種結(jié)構(gòu)與上一種其實(shí)只是形式上的區(qū)別,它去掉了“國(guó)”字形布局的最右邊的部分,給主內(nèi)容區(qū)釋放了更多空間。這種布局上面是標(biāo)題及廣告橫幅,接下來(lái)的左側(cè)是一窄列鏈接等,右列是很寬的正文,下面也是一些網(wǎng)站的輔助信息。
2.2.T型布局
“T”結(jié)構(gòu)布局形式。所謂“T”結(jié)構(gòu),就是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志+廣告條,下方左面為主菜單,右面顯示內(nèi)容的布局,整體效果類似英文字母“T”,所以稱之為“T,形布局。這是網(wǎng)頁(yè)設(shè)計(jì)中用得最廣泛的一種布局方式。這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰,主次分明,是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板,如果不注意細(xì)節(jié)色彩,很容易讓人”看之無(wú)味“
3. “三”字型布局
是一種簡(jiǎn)潔明快的網(wǎng)頁(yè)布局,在國(guó)外用的比較多,國(guó)內(nèi)比較少見(jiàn)。這種布局的特點(diǎn)是在頁(yè)面上由橫向兩條色塊將網(wǎng)頁(yè)整體分割為三部分,色塊中大多放置廣告條與更新和版權(quán)提示。
4. “川”字型布局
整個(gè)頁(yè)面在垂直方向分為三列,網(wǎng)站的內(nèi)容按欄目分布在這三列中,最大限度地突出主頁(yè)的索引功能。
5, 封面型布局 (滿版型/海報(bào)型/POP型)
POP布局屬于此類。就是指頁(yè)面布局像一張宣傳海報(bào),以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心,頁(yè)面以圖像充滿整版。主要以圖像為訴求點(diǎn),將少量文字壓置于圖像之上。滿版型給人以舒展、大方的感覺(jué),視覺(jué)傳達(dá)效果直觀而強(qiáng)烈,缺點(diǎn)就是速度慢。隨著當(dāng)今網(wǎng)絡(luò)帶寬不斷變大,這種版式在商業(yè)網(wǎng)站設(shè)計(jì)尤其是網(wǎng)絡(luò)廣告中比較常見(jiàn)。
這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁(yè),大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫(huà),放上幾個(gè)簡(jiǎn)單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接甚至直接在首頁(yè)的圖片上做鏈接而沒(méi)有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人主頁(yè),如果說(shuō)處理的好,會(huì)給人帶來(lái)賞心悅目的感覺(jué)。
6. Flash布局
這種布局是指整個(gè)網(wǎng)頁(yè)就是一個(gè)Flash動(dòng)畫(huà),它本身就是動(dòng)態(tài)的,畫(huà)面一般比較絢麗、有趣,是一種比較新潮的布局方式。其實(shí)這種布局與封面型結(jié)構(gòu)是類似的,不同的是由于Flash強(qiáng)大的功能,頁(yè)面所表達(dá)的信息更豐富。其視覺(jué)效果及聽(tīng)覺(jué)效果如果處理得當(dāng),會(huì)是一種非常有魅力的布局
7. 標(biāo)題文本型布局
標(biāo)題文本型布局是指頁(yè)面內(nèi)容以文本為主,這種類型頁(yè)面最上面往往是標(biāo)題或類似的一些東西,下面是正文,比如一些文章頁(yè)面或注冊(cè)頁(yè)面等就是這一類。
8. 框架型布局 ,
采用框架布局結(jié)構(gòu),常見(jiàn)的有左右框架型、上下框架型和綜合框架型。由于兼容性和美觀等因素,這種布局目前專業(yè)設(shè)計(jì)人員采用的已不多,不過(guò)在一些大型論壇上還是比較受青睞的,有些企業(yè)網(wǎng)站也有應(yīng)用。
框架型版式常用于功能型網(wǎng)站,例如郵箱、論壇、博客等。1)左右框架型這是一種左右分別為兩頁(yè)的框架結(jié)構(gòu),一般左面是導(dǎo)航鏈接,有時(shí)最上面會(huì)有一個(gè)小塊標(biāo)題或標(biāo)志,右面是正文。我們見(jiàn)到的大部分的大型論壇都是這種結(jié)構(gòu),一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰,一目了然。
2)上下框架型與左右框架類似,區(qū)別僅僅在于這是一種上下分為兩頁(yè)的框架。
3)綜合框架型這是上述兩種結(jié)構(gòu)的結(jié)合,是一種相對(duì)復(fù)雜的下型框架結(jié)構(gòu),較為常見(jiàn)的類似于“拐角型”結(jié)構(gòu)的,只是采用了框架結(jié)構(gòu)。常見(jiàn)的郵箱網(wǎng)站的版式都是綜合框架型。
9. 頂部大圖Banner+簡(jiǎn)單的柵格
無(wú)論屏幕多大,這種布局都能夠?yàn)橛脩粽故境渥愕膬?nèi)容,供用戶瀏覽和探索。雖然這種布局隨著屏幕、設(shè)備而有所差異,有的設(shè)計(jì)師會(huì)傾向于設(shè)計(jì)成固定寬或者橫跨整個(gè)頁(yè)面的布局,但是總體的模式都大同小異。
·導(dǎo)航欄·頂部大圖,圖片上疊有文字標(biāo)題·2~4個(gè)分欄,承載不同類別的信息,有的會(huì)有圖標(biāo)·主要的內(nèi)容區(qū)域·頁(yè)腳
這種布局設(shè)計(jì)干凈清爽,有足夠強(qiáng)的視覺(jué)表現(xiàn)力,并且常常采用的響應(yīng)式設(shè)計(jì),斷點(diǎn)也很好控制。頂部大面積的輪播圖或者Banner 也有許多插件或者應(yīng)用來(lái)幫你實(shí)現(xiàn)。
原理:這種布局中,每個(gè)元素都各司其職,并且整個(gè)流程是富有邏輯的,頂部大圖足以營(yíng)造氛圍,給予用戶特定的體驗(yàn),下面的次一級(jí)元素能夠做的很好的支撐。
相關(guān)趨勢(shì):越來(lái)越多這類網(wǎng)頁(yè)開(kāi)始采用色彩豐富的插畫(huà)式的圖標(biāo),而扁平化的設(shè)計(jì)和這種布局頁(yè)面有著天然的契合。
10. 單頁(yè)設(shè)計(jì),單欄布局
單頁(yè)式設(shè)計(jì)這幾年非?;?,它非常適宜于展現(xiàn)極簡(jiǎn)的內(nèi)容,或者專注呈現(xiàn)一個(gè)主題。當(dāng)網(wǎng)站的主題集中,內(nèi)容也比較固定的時(shí)候,無(wú)需復(fù)雜的布局來(lái)呈現(xiàn),單頁(yè)單列式的布局足以應(yīng)付一切。
·導(dǎo)航·主要內(nèi)容區(qū)域,文字+圖片為主·頁(yè)腳
采用這種布局模式的時(shí)候,空間的控制至關(guān)重要,相當(dāng)考驗(yàn)設(shè)計(jì)師設(shè)計(jì)留白和布局平衡的功力。元素和元素之間的疏密關(guān)系是需要設(shè)計(jì)師反復(fù)推敲的,如果空間控制不合理會(huì)給用戶一種混亂的感覺(jué),如果過(guò)于緊密則會(huì)產(chǎn)生局促感。
原理:?jiǎn)雾?yè)式設(shè)計(jì)適合于小網(wǎng)站或者小型項(xiàng)目的展示,它可以用來(lái)制造一個(gè)簡(jiǎn)單的介紹頁(yè)面,讓簡(jiǎn)單的內(nèi)容顯得不那么單調(diào),強(qiáng)化內(nèi)容的形式感和重量感。對(duì)于內(nèi)容簡(jiǎn)單的博客網(wǎng)站而言,單頁(yè)式設(shè)計(jì)也是不錯(cuò)的選擇。
相關(guān)趨勢(shì):和單頁(yè)設(shè)計(jì)結(jié)合最緊密的應(yīng)該是動(dòng)效設(shè)計(jì)和視差滾動(dòng),他們可以讓單頁(yè)式設(shè)計(jì)更加生動(dòng)有趣,淡化單調(diào)的設(shè)計(jì),賦予頁(yè)面更強(qiáng)的生命力。
11 、自定義柵格
方塊元素被用來(lái)組織排列他的作品。這是組織排列任意數(shù)量?jī)?nèi)容的簡(jiǎn)單途徑,讓事物保持簡(jiǎn)潔。
到處都是方塊,移動(dòng)鼠標(biāo)時(shí)還有個(gè)有趣的動(dòng)畫(huà)效果。不過(guò)除了組織內(nèi)容之外,你會(huì)發(fā)現(xiàn)方塊元素也成為了設(shè)計(jì)風(fēng)格的一部分。它是這種風(fēng)格關(guān)鍵的決定性元素。
那些被整齊分割出來(lái)的網(wǎng)頁(yè)布局從來(lái)都沒(méi)有過(guò)時(shí)過(guò)。無(wú)論是分割得細(xì)碎的網(wǎng)頁(yè)區(qū)域還是大塊的頁(yè)面區(qū)塊,大多都需要借助一套干凈整齊的柵格來(lái)支撐。在此基礎(chǔ)上,內(nèi)容按部就班地被置于不同的區(qū)塊中,被精心地組織展示出來(lái)。
在設(shè)計(jì)師的作品集頁(yè)面中,你可以發(fā)現(xiàn)各種各樣自定義的柵格布局。自定義柵格展示內(nèi)容的優(yōu)勢(shì)在于,它可以同時(shí)呈現(xiàn)大量的視覺(jué)化的內(nèi)容,看起來(lái)足夠豐富又不會(huì)落于下乘。下面這個(gè)圖庫(kù)的效果看起來(lái)就相當(dāng)震撼。
在柵格中填充色彩,還可以用來(lái)承載文字內(nèi)容。不同的區(qū)塊之間不一定非要用線條進(jìn)行分割,可供選擇的方案有很多,不過(guò)千萬(wàn)要控制好柵格尺寸和間距。控制不好的細(xì)節(jié),整個(gè)設(shè)計(jì)的平衡感可能會(huì)被破壞。
原理:柵格的優(yōu)勢(shì)在于它的組織性,對(duì)于用戶而言,它具有規(guī)律性和可預(yù)期性。一個(gè)漂亮的柵格系統(tǒng)能夠讓用戶更快找到需要的內(nèi)容,在視覺(jué)上也更加協(xié)調(diào)自然。
相關(guān)趨勢(shì):柵格很容易被人視為卡片這樣的元素,可以為其加入翻轉(zhuǎn)等各式各樣的動(dòng)效,呈現(xiàn)出更多的信息和視覺(jué)層次。
12. 經(jīng)典的F式布局
傳統(tǒng)的布局方式,依賴布置視覺(jué)線索,“控制”用戶的視覺(jué)路徑,相較之下,F(xiàn)式布局更加自然,更加友好。F式布局符合用戶的瀏覽習(xí)慣,更自然。符合“從上到下,從左到右”的閱讀模式。
研究表明,用戶在瀏覽網(wǎng)頁(yè)的時(shí)候,習(xí)慣于沿著F式的閱讀軌跡來(lái)瀏覽信息,也就是說(shuō),用戶喜歡從左到右閱讀,然后向下移動(dòng),再繼續(xù)從左到右閱讀。
這種F式的閱讀模式對(duì)應(yīng)的網(wǎng)頁(yè)布局就是F式布局,最關(guān)鍵的信息靠左顯示,從上到下盡量保持在一條線上。
·頁(yè)頭和導(dǎo)航·靠左的一欄相對(duì)較寬,展示主要的內(nèi)容·靠右常為側(cè)邊欄,展示相關(guān)鏈接等內(nèi)容·頁(yè)腳
原理:人的行為很容易受到習(xí)慣的影響,而研究也證實(shí)了人思考、行為確實(shí)是模式化的。從左到右,自上而下,人們大多習(xí)慣了這種行為模式。F式的布局模式擁有良好的適用性,便于用戶理解和交互。
相關(guān)趨勢(shì):F式布局中側(cè)邊玩法很多,有的設(shè)計(jì)師會(huì)將導(dǎo)航與之結(jié)合,或者在頁(yè)面頂部加上大圖Banner。
13 、極簡(jiǎn)分層
極簡(jiǎn)化的設(shè)計(jì)一直都在流行,它的流行不是沒(méi)有原因的。開(kāi)放式的空間讓用戶感覺(jué)更加輕松,也使得其中展現(xiàn)的內(nèi)容更容易被聚焦。如果極簡(jiǎn)化的頁(yè)面中加入不多的幾個(gè)并列的內(nèi)容層,可以讓信息更有層次,也使得極簡(jiǎn)的頁(yè)面擁有了細(xì)節(jié)。
這種設(shè)計(jì)并不復(fù)雜,但是讓頁(yè)面更加有趣了,它可以適配更多不同類型的項(xiàng)目了。這也解釋了為什么用戶如此的喜愛(ài)類似Apple 官網(wǎng)這樣的設(shè)計(jì)。
原理:極簡(jiǎn)化的頁(yè)面中加入簡(jiǎn)單的幾個(gè)分層,讓頁(yè)面有了視覺(jué)焦點(diǎn),尤其是當(dāng)設(shè)計(jì)者想要引導(dǎo)用戶關(guān)注到某個(gè)關(guān)鍵的內(nèi)容的時(shí)候,這種頁(yè)面布局很很容易實(shí)現(xiàn)這一點(diǎn)。
相關(guān)趨勢(shì):微妙的陰影和漸變常常被用在這樣的頁(yè)面當(dāng)中,強(qiáng)化元素之間的層次感。雖然這些設(shè)計(jì)手法一度“過(guò)時(shí)”,但是現(xiàn)在大有卷土重來(lái)之勢(shì),而Material Design 這樣的設(shè)計(jì)風(fēng)格就是它們的沖鋒號(hào)。
14. Z-模式
Z-模式是最簡(jiǎn)單、最通用的模式,普遍用于任何基于文本的網(wǎng)頁(yè)。讀者首先橫向的瀏覽頂部,接著回到左邊,然后再橫向地瀏覽整個(gè)底部。
理解通用的Z-模式很重要,因?yàn)樗鉀Q了網(wǎng)站的核心需求:層次結(jié)構(gòu)、品牌化和用戶行為號(hào)召。它的美在于既簡(jiǎn)單又具有“用戶號(hào)召”型網(wǎng)站的理想布局。當(dāng)然,對(duì)于更復(fù)雜的或包含大量?jī)?nèi)容的網(wǎng)站,Z-模式可能過(guò)于簡(jiǎn)單。
考慮一下Z-模式是否適合你的網(wǎng)站?下面有一些最佳實(shí)踐可以更好的優(yōu)化該模式:
背景:保持背景在它應(yīng)該處于的位置:隱蔽在內(nèi)容之下。不讓它分散讀者的注意力。
要點(diǎn)1:作為第一個(gè)要點(diǎn),將Logo放置在固定位置。
要點(diǎn)2:雖然主要的用戶號(hào)召應(yīng)該放在后面,這對(duì)二級(jí)用戶號(hào)召來(lái)說(shuō)是一個(gè)好位置,可強(qiáng)調(diào)或突出導(dǎo)航條(一個(gè)漂亮的圖形或圖像滑塊將有助于分割頁(yè)面的頂部和底部,鼓勵(lì)讀者按照Z(yǔ)模式所期待的方式來(lái)瀏覽)。
要點(diǎn)3:選取最佳位置來(lái)吸引讀者對(duì)其它鏈接的注意,或者吸引讀者的目光到網(wǎng)站的最終目標(biāo):要點(diǎn)4。
要點(diǎn)4——作為“終點(diǎn)”,這是一個(gè)完美的放置主要用戶號(hào)召的地方。
首先你需要做的是把頁(yè)面上的元素按照重要性進(jìn)行排序。然后,從結(jié)果中挑選出適當(dāng)?shù)摹盁狳c(diǎn)”就會(huì)變得很簡(jiǎn)單。
此外,Z-模式可以重復(fù)和擴(kuò)展到整個(gè)頁(yè)面。我們來(lái)看看Evernote是如何按“之”字型向下放置他們的“用戶號(hào)召”和賣點(diǎn)的。
DropBox沒(méi)有使用任何背景圖片,很簡(jiǎn)單地實(shí)現(xiàn)了這種“曲折”的模式。相反的,更多功能型的設(shè)計(jì)內(nèi)置在了布局中,比如用戶號(hào)召“瀏覽更多”,當(dāng)用戶瀏覽整個(gè)網(wǎng)頁(yè)時(shí),它幫助用戶鏈接進(jìn)入每一板塊的細(xì)節(jié)部分。這也有助于通知讀者點(diǎn)擊到下一個(gè)相關(guān)頁(yè)面,而不需要先去通讀頁(yè)面所有內(nèi)容。
15.分割屏幕
在這類中,我們精選的網(wǎng)站都用了垂直分隔線來(lái)分割屏幕??赡苓@么做有很多原因,通過(guò)研究大量此類案例,我發(fā)現(xiàn)主要有兩點(diǎn)。
原因之一,有時(shí)候在一套設(shè)計(jì)中,的確存在兩個(gè)同等重要的主體元素。網(wǎng)頁(yè)設(shè)計(jì)的通常方法,是按照重要性給內(nèi)容排序。然后重要性會(huì)體現(xiàn)在設(shè)計(jì)的層次和結(jié)構(gòu)上。但是假如你就是要推廣兩樣?xùn)|西呢?這種方式,可以讓你突出兩者,并讓用戶迅速在其中做出選擇。
原因之二,有時(shí)你要表現(xiàn)出一種重要的兩重性。以Eight and Four網(wǎng)站為例。他們?cè)诖艘磉_(dá)的是,他們的核心競(jìng)爭(zhēng)力來(lái)自植根數(shù)字領(lǐng)域,還有多才多藝的員工。這兩點(diǎn)成就了他們。通過(guò)屏幕分割來(lái)表現(xiàn)這一點(diǎn),是種令人愉快的方式。
16. 去界面化
網(wǎng)頁(yè)設(shè)計(jì)中的主要元素之一,就是容器元素:方塊、邊框、形狀和所有類型的容器,用于將內(nèi)容從頁(yè)面中分離開(kāi)。想象一個(gè)古板的頁(yè)頭,元素剛好容納其中,與內(nèi)容分隔開(kāi)。如今的一項(xiàng)普遍趨勢(shì),就是去除所有這些額外的界面元素。
這是種極簡(jiǎn)主義的方式,但它更進(jìn)一步,帶來(lái)一些有趣的轉(zhuǎn)變。
17. 基于模塊或網(wǎng)格
接下來(lái)這些排版方式,建立在模塊化或類似網(wǎng)格的結(jié)構(gòu)上。在這些設(shè)計(jì)中,每個(gè)模塊都力圖根據(jù)屏幕尺寸伸縮調(diào)整。實(shí)際上這并不是什么新的方式,不過(guò)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)讓它變得更加有用。它暗示了一種自適應(yīng)布局模式,可以像搭積木一樣,由各種模塊組件創(chuàng)建而成。
這個(gè)案例更加激進(jìn)。當(dāng)然,它也包含了模塊化的方式,讓他們能夠根據(jù)需要輕松增減內(nèi)容。但此處還有一個(gè)重要的設(shè)計(jì)元素在發(fā)揮作用,之前的案例是沒(méi)有的。模塊通過(guò)尺寸變化,來(lái)反映其重要程度和在各層級(jí)中的地位。這類模塊化的布局方式存在一種風(fēng)險(xiǎn),它使每樣?xùn)|西尺寸都相同,這意味著無(wú)法強(qiáng)調(diào)任何事物。相反,這個(gè)案例還是清晰地突出了主要元素。
18. 一屏以內(nèi)
最后,還有一些網(wǎng)站采用這樣的方式,讓設(shè)計(jì)完全在一屏內(nèi)展現(xiàn)。這是響應(yīng)式設(shè)計(jì)的一個(gè)分支,因?yàn)樗鼤?huì)適應(yīng)屏幕尺寸。不過(guò)在這個(gè)絕佳案例中,整個(gè)設(shè)計(jì)的適應(yīng)方式完完全全吻合屏幕,沒(méi)有產(chǎn)生滾動(dòng)條。沒(méi)有滾動(dòng),意味著內(nèi)容必須極度聚焦,而且要建立清晰的內(nèi)容層次。我發(fā)現(xiàn)這些網(wǎng)站的聚焦能力和清晰程度,令人耳目一新。
二、如何設(shè)計(jì)宣傳單頁(yè)?
1、突出主題,作為宣傳冊(cè)種的一員也脫離不來(lái)提高宣傳的目的,因此主題一定要夠大,這樣才能夠比較突出。2、布局內(nèi)容,一般把主題布局到上部分三分之一的位置,而所宣傳的亮點(diǎn)則布局到中間的位置,這樣層次更加明顯。3、顏色基調(diào),產(chǎn)品公司基本情況給予相應(yīng)的色彩計(jì)劃定制,確保與公司整個(gè)風(fēng)格相符合一致。
三、ps單頁(yè)設(shè)計(jì),A4紙大小,216*291mm,出血距3mm,那么 1設(shè)計(jì)版面的時(shí)候上下左右的留白是多少呢,
出血的意思設(shè)計(jì)印刷的圖比實(shí)際成品在每個(gè)切邊都加大3mm,使在切為成品時(shí)即使下刀略有偏差都可以保證畫(huà)面是滿幅的。
所以A4紙大小是210mmX297mm,則圖片應(yīng)設(shè)計(jì)為(210+3+3)mmX(297+3+3)mm大小。
如果你的圖已設(shè)計(jì)好,你可告訴印刷廠說(shuō)你沒(méi)有留出血位,請(qǐng)你們給你留即可。不知道我的說(shuō)法對(duì)你有否幫助。
四、如何做有效地宣傳單頁(yè)
說(shuō)的不錯(cuò)啊,做有效的宣傳單頁(yè)要有下列三個(gè)條件
一、限定區(qū)域范圍的廣告
可以限定配發(fā)區(qū)域?yàn)槟硡^(qū)某街道,也可以擴(kuò)展為附件的幾條街:也可以根據(jù)自己店鋪商業(yè)消費(fèi)圈來(lái)自由劃定廣告的配發(fā)區(qū)域。
宣傳單在商品相應(yīng)的商圈范圍內(nèi)可以起到很好地傳遞信息的作用并使?fàn)I業(yè)活動(dòng)更加有效率。因此對(duì)商圈范圍進(jìn)行調(diào)查就顯得尤為重要。
二、宣傳單上要有有效地商業(yè)信息
要傳達(dá)出詳細(xì)的商品信息
宣傳單要通過(guò)比較,反映出詳細(xì)的商品數(shù)據(jù)及商品形、色等特征,對(duì)商品信息進(jìn)行細(xì)致入微的表現(xiàn)以獲得消費(fèi)者的認(rèn)同。
三、根據(jù)舉辦活動(dòng)的日期進(jìn)行引導(dǎo)
結(jié)合活動(dòng)日來(lái)進(jìn)行廣告宣傳
可以在最恰當(dāng)?shù)臅r(shí)候配發(fā)傳單。如果是高價(jià)的商品,就在活動(dòng)前一天配發(fā)給消費(fèi)者留出與家人商議的時(shí)間:如果是比較一般性的活動(dòng).在當(dāng)天早上配發(fā)傳單即可。
如果遇到有超大型的競(jìng)爭(zhēng)對(duì)手開(kāi)業(yè),就要搞一個(gè)緊急特價(jià)活動(dòng)來(lái)對(duì)抗在黃色的紙上用墨色的手寫體來(lái)制作傳單,然后在店面擺好各種大降價(jià)的商品。這樣一切準(zhǔn)備就緒了。
用謹(jǐn)慎的證明來(lái)彌補(bǔ)信賴度的不足
以上就是關(guān)于單頁(yè)設(shè)計(jì)相關(guān)問(wèn)題的回答。希望能幫到你,如有更多相關(guān)問(wèn)題,您也可以聯(lián)系我們的客服進(jìn)行咨詢,客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。
推薦閱讀:
vi設(shè)計(jì)手冊(cè)單頁(yè)(vi設(shè)計(jì)手冊(cè)排版)
產(chǎn)品介紹單(產(chǎn)品介紹單頁(yè)設(shè)計(jì))
如何進(jìn)入淘寶的天貓榜單(如何進(jìn)入淘寶的天貓榜單頁(yè)面)