想想看你是怎樣在整個(gè)的
網(wǎng)頁(yè)設(shè)計(jì)中使用的文本文字的——標(biāo)題,正文,導(dǎo)航元素等等。
但是,如何創(chuàng)建合適的層次結(jié)構(gòu),以便可以讓每個(gè)文本元素順利的和下一個(gè)對(duì)接?今天,我們將逐步介紹如何構(gòu)建一個(gè)可用于幾乎任何設(shè)計(jì)項(xiàng)目的排版層次體系(我們會(huì)將提示與排版優(yōu)秀的例子組合說(shuō)明,以幫助你更直觀的看到效果以及收集一些靈感)。
1.制定空間的使用規(guī)則
與字體大小一樣重要的是如何利用它們之間的空間來(lái)提升整體網(wǎng)頁(yè)設(shè)計(jì)的視覺(jué)效果。確定空間的因素包括間距(或行高),縮進(jìn)(或不)和對(duì)齊等。
考慮到縮放文本所使用的刻度的間距比例。畫布的尺寸在這里也很重要。尺寸更大的畫布通過(guò)嚴(yán)格的間距可以比小尺寸的更具可讀性。
就像字體大小一樣,對(duì)于整個(gè)設(shè)計(jì)框架應(yīng)該預(yù)先設(shè)置間距規(guī)則。一致,干凈的間距雖然對(duì)于整體的網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)是一個(gè)小東西,但是對(duì)整體的設(shè)計(jì)來(lái)說(shuō)卻起著至關(guān)重要的作用。
2.設(shè)定粗體和斜體的應(yīng)用規(guī)則
盡管粗體和斜體不是不同類型的元素和大小,但它們?cè)谑褂蒙虾苤匾ㄏ胂笠幌?,如果每一個(gè)字都是粗體的話,設(shè)計(jì)會(huì)是什么樣子)。
所以,針對(duì)粗體和斜體的應(yīng)用規(guī)范指南就顯得尤為重要了。不是看尺寸或空間,而是要更多的考慮語(yǔ)境。 使用規(guī)范可以限定只用特殊單詞或短語(yǔ)(或特定的單詞或短語(yǔ))才能做這種處理。濫用粗體和斜體是一個(gè)常見(jiàn)的錯(cuò)誤,所以,當(dāng)你在使用它的時(shí)候?qū)φw的網(wǎng)頁(yè)設(shè)計(jì)存在疑問(wèn)時(shí),不要使用它。
3.創(chuàng)建一個(gè)“z”型文本區(qū)
通過(guò)科學(xué)的研究我們發(fā)現(xiàn),常見(jiàn)的閱讀模式類似z的形狀。無(wú)論你是從左到右還是從右到左(翻轉(zhuǎn)z)的語(yǔ)言設(shè)計(jì),用戶將從一個(gè)角落讀取到最后一行,然后再重新回到起始角落和重復(fù)圖案中的線條。
所以在屏幕上放置文本元素時(shí),你可以使用這種習(xí)慣的閱讀方式?!皕”型設(shè)計(jì)也是為什么大多數(shù)品牌將標(biāo)志放在左上角的原因之一——這是眼睛閱讀或?yàn)g覽時(shí)的第一視覺(jué)點(diǎn)。
4.從舒適的文本主體開(kāi)始
在網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)始階段,你可能在標(biāo)題上就想要一個(gè)很庫(kù)的效果,但事實(shí)上,開(kāi)始的地方實(shí)際上應(yīng)該在中間的主體內(nèi)容位置。你首先要為主體的內(nèi)容文本選擇一個(gè)舒適的字體,大小和間距。
這么做是有原因的——最主要的其實(shí)是因?yàn)檫@是你設(shè)計(jì)中主要的文本內(nèi)容。無(wú)論你是建立網(wǎng)站還是制作宣傳冊(cè),這個(gè)概念是一樣的。根據(jù)baymard研究所的數(shù)據(jù),主體內(nèi)容理想的可讀性規(guī)則是在每行(或多列)之間介于50到60個(gè)字符之間。該指南還可以幫助你設(shè)置一個(gè)可讀取的文本比例,并記錄不同類型的字體,以幫助你確認(rèn)最好的搭配效果。
5.設(shè)置比例
一旦你知道主體內(nèi)容的設(shè)計(jì)外觀以后,你可以在設(shè)計(jì)中為所有其他的文本元素設(shè)置一個(gè)比例。忽略某些次要的文本塊很容易,你只需要列出項(xiàng)目中各種文字內(nèi)容不同的作用以及用途就行。
· 主體內(nèi)容;
· 大標(biāo)題;
· 小標(biāo)題;
· 說(shuō)明;
· 引用;
· 導(dǎo)航元素;
· 法律文本或免責(zé)聲明。
現(xiàn)在,創(chuàng)建一個(gè)適當(dāng)?shù)目s放比例,你可以指定每個(gè)元素的字體,大小范圍和使用情況(這也將在后續(xù)的css樣式中構(gòu)建你用于工作文檔的網(wǎng)站或樣式文件)。有多種方法可以規(guī)范你的尺度比例,但是個(gè)人覺(jué)得百分比可以是一個(gè)很好的起點(diǎn)。你還可以根據(jù)基準(zhǔn)網(wǎng)格或通過(guò)視覺(jué)的舒適程度來(lái)建立比例。
以下可以是一個(gè)簡(jiǎn)單比例應(yīng)用開(kāi)始:
· 大標(biāo)題延用主體大小的220%;
· 小標(biāo)題延用主體大小的150%;
· 導(dǎo)航元素延用主體大小的80%;
· 底部/法律文本信息延用主體大小的80%。
6.考慮大至最小值,以及從上到下順序
這個(gè)規(guī)則就非常簡(jiǎn)單了:大和最重要的文本應(yīng)該在頂部,當(dāng)你向下閱讀頁(yè)面或屏幕的時(shí)候,其他的文本內(nèi)容應(yīng)該逐級(jí)減小比例。
不過(guò),這并不是說(shuō)你不能隨著時(shí)間的推移和一些設(shè)計(jì)的精巧度來(lái)破壞這個(gè)規(guī)則,但它始終是設(shè)計(jì)文本層次結(jié)構(gòu)的起點(diǎn)(誰(shuí)真的要滾動(dòng)到標(biāo)題的網(wǎng)頁(yè)的末尾,然后回到頂部開(kāi)始閱讀呢?)。
7.考慮視覺(jué)重量
當(dāng)在屏幕上瀏覽涉及到多大的文本元素時(shí),尺寸并不是唯一的考慮因素。視覺(jué)重量同樣也很重要,這可能會(huì)影響你創(chuàng)建排版尺度的方式。
8.創(chuàng)建強(qiáng)調(diào)
有一些單詞或語(yǔ)句相較于頁(yè)面中其他的你會(huì)想要讓其更突出一點(diǎn)。通過(guò)在文字中添加符合強(qiáng)調(diào)元素可以使它脫穎而出,而不必調(diào)整實(shí)際的大小或字體。
常見(jiàn)的主調(diào)包括:
· 顏色;
· 下劃線;
· 突出;
· 在文本中添加按鈕或形狀;
在任何類型的層次結(jié)構(gòu)中添加強(qiáng)調(diào)元素的好處在于,它是一個(gè)立即可被關(guān)注的焦點(diǎn)。這些元素應(yīng)盡可能少地用于設(shè)計(jì)中以強(qiáng)調(diào)那些大影響和關(guān)鍵的要素。
9.使用“眼睛測(cè)試”
最后,每個(gè)規(guī)則都有一個(gè)例外(或兩個(gè))。這就是為什么我們需要“眼睛測(cè)試”,只需看一下屏幕上的比例。文字的外觀和感覺(jué)如何?是否有邏輯性?是否能夠被用戶容易的閱讀?
如果你以任何的方式都感覺(jué)不到
網(wǎng)站設(shè)計(jì)上的主體內(nèi)容以及強(qiáng)調(diào)的信息時(shí),請(qǐng)考慮做適當(dāng)?shù)恼{(diào)整。根據(jù)你使用的字體和設(shè)計(jì)中的其他元素(從圖片到顏色到對(duì)比度),尺度也將需要你重新調(diào)整一下。這不僅僅是一個(gè)起點(diǎn),當(dāng)你不確定你想做什么。
你也可以請(qǐng)不同的人對(duì)你的設(shè)計(jì)進(jìn)行查看。創(chuàng)建一個(gè)或兩個(gè)具有不同層次結(jié)構(gòu)的版本,以查看哪個(gè)版本獲得好響應(yīng)。網(wǎng)頁(yè)設(shè)計(jì)是一種視覺(jué)藝術(shù),使用“眼睛測(cè)試”是一個(gè)不精確但相當(dāng)可靠的選項(xiàng)。
總結(jié)
一旦為
網(wǎng)站建設(shè)項(xiàng)目設(shè)置層次結(jié)構(gòu)以后,你可以做的最好的事情就是記錄它。在為接下來(lái)整體項(xiàng)目的推進(jìn)建立標(biāo)準(zhǔn)規(guī)范或創(chuàng)建樣式文件。
對(duì)于較大規(guī)模的設(shè)計(jì)或品牌規(guī)劃,請(qǐng)將尺寸和規(guī)格書寫在樣式指南中。創(chuàng)建層次結(jié)構(gòu)需要在后端進(jìn)行一些工作,隨著后續(xù)項(xiàng)目的推進(jìn),有更規(guī)范的指南可以使項(xiàng)目完成更快,更簡(jiǎn)單,更不用說(shuō)更一致。
分享標(biāo)題:網(wǎng)站頁(yè)面布局的差異,可能會(huì)毀掉你的心血
本文網(wǎng)址:http://m.rwnh.cn/news42/106542.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、小程序開(kāi)發(fā)、網(wǎng)站導(dǎo)航、動(dòng)態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)