整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
容排版的存在是為了榮譽(yù)。
溝通在設(shè)計(jì)中起著至關(guān)重要的作用。這是建立用戶和網(wǎng)站之間的明確聯(lián)系，并幫助你的用戶實(shí)現(xiàn)目標(biāo)的關(guān)鍵。當(dāng)我們談?wù)摼W(wǎng)頁(yè)設(shè)計(jì)環(huán)境中的溝通時(shí)，這通常是指文本。排版在這個(gè)過(guò)程中起著至關(guān)重要的作用：網(wǎng)絡(luò)中超過(guò)95％的信息是以文字的形式出現(xiàn)。
好的排版提高了用戶的閱讀積極性性，反之，差的排版會(huì)降低用戶的閱讀積極性。 正如Oliver Reichenstein在他的文章《Web Design is 95% Typography》中所說(shuō)：
優(yōu)化排版就是優(yōu)化可讀性，可訪問(wèn)性，可用性！讓整體的圖形平衡。
換句話說(shuō)：優(yōu)化你的排版就是優(yōu)化你的用戶界面。在這篇文章中，我將提供一組規(guī)則，幫助你提高文本內(nèi)容的可讀性。
使用超過(guò)3種不同的字體讓網(wǎng)站看起來(lái)沒(méi)有結(jié)構(gòu)且不專業(yè)。記住，太多的尺寸類型和風(fēng)格也可能破壞任何布局。
為了防止這種情況，嘗試將字體數(shù)量限制在最小限度
一般來(lái)說(shuō)，將字體數(shù)量限制在最小限度（兩個(gè)很充足，通常一個(gè)就足夠了），并粘貼相同的字體到整個(gè)網(wǎng)站。如果使用多個(gè)字體，請(qǐng)確保字體系基于字符寬度互相補(bǔ)充。以下面的字體組合為例。Georgia和Verdana（左）的組合具有相似的價(jià)值，配對(duì)的很和諧。比較與Baskerville和Impact（右）的配對(duì)，其中大大加重的Impact使與其對(duì)應(yīng)的襯線字體沒(méi)有光彩。
確保字體系基于字符寬度互相補(bǔ)充
字體的嵌入服務(wù)（如Google Web Fonts或Typekit)）可以為你的設(shè)計(jì)提供新鮮的和意想不到的許多有趣的字體。它們也非常容易使用。以Google為例：
實(shí)際上，這種方法有一個(gè)很嚴(yán)重的問(wèn)題：因?yàn)橛脩舾煜?biāo)準(zhǔn)字體，因此可以更快地讀取它們。
除非你的網(wǎng)站對(duì)于自定義字體（如對(duì)品牌宣傳或創(chuàng)建沉浸式體驗(yàn)）非常有吸引力，否則通常最好使用系統(tǒng)字體。最安全的方法是用一個(gè)系統(tǒng)的字體：Arial，Calibri，Trebuchet等。記住，好的排版可以吸引讀者到內(nèi)容中去，而不是排版本身。
每行擁有適當(dāng)?shù)淖址麛?shù)量是讓文本具有可讀性的關(guān)鍵。它不是你的設(shè)計(jì)，決定你的文本的寬度，它應(yīng)該是一個(gè)可讀性的問(wèn)題。考慮Baymard Institute關(guān)于可讀性和行的長(zhǎng)度的建議：
“如果你想有一個(gè)好的閱讀體驗(yàn)，應(yīng)該每行約60個(gè)字符。每行擁有適當(dāng)?shù)淖址麛?shù)量是讓你的文本具有可讀性的關(guān)鍵?！?/p>
圖片來(lái)源：Material Design
如果行太短，視線必須經(jīng)常返回，這就會(huì)打破讀者的節(jié)奏。如果一行文字太長(zhǎng)，用戶的視線將很難專注于文本。
對(duì)于移動(dòng)設(shè)備，應(yīng)該每行30-40個(gè)字符。以下是在移動(dòng)設(shè)備上查看的兩個(gè)網(wǎng)站的示例。第一個(gè)是使用每行50-75個(gè)字符，而第二個(gè)使是用最佳的30-40個(gè)字符。
圖片來(lái)源：Usertesting
在網(wǎng)頁(yè)設(shè)計(jì)中，可以通過(guò)使用em或像素限制文本的寬度來(lái)實(shí)現(xiàn)每行最佳數(shù)量的字符。
用戶會(huì)從具有不同屏幕尺寸和分辨率的設(shè)備訪問(wèn)你的網(wǎng)站。大多數(shù)用戶界面需要各種大小的文本元素（按鈕復(fù)制，字段標(biāo)簽，章節(jié)標(biāo)題等）。選擇一個(gè)能夠在多種尺寸和重量上運(yùn)行良好的字體以保持每個(gè)尺寸的可讀性和可用性是非常重要。
Google的Roboto字體
確保你說(shuō)選擇的字體在較小的屏幕上清晰可辨！嘗試避免使用草書的字體，例如Vivaldi（在下面的示例中）：雖然它們很漂亮，但它們很難閱讀。
Vivaldi字體很難以在小屏幕上閱讀
許多字體讓相似的字形很容易混淆，特別是與“i”和“L”（如下圖所示）以及在字母間距較小的空間中，例如當(dāng)“r”和“n”看起來(lái)像“M”。因此，在選擇你的排版時(shí)，請(qǐng)務(wù)必在不同的文本環(huán)境中檢查你的排版，以確保不會(huì)為用戶造成問(wèn)題。
所有大寫字母：意思是文本中的所有大寫字母，在不涉及閱讀的上下文中很好（如首字母縮略詞或標(biāo)識(shí)），但是當(dāng)你的信息涉及閱讀時(shí)，不要強(qiáng)制用戶閱讀所有大寫文字。正如Miles Tinker所說(shuō)，在他的具有里程碑意義的作品中，可讀性的印刷，全部大寫印刷與小寫排版相比，大大地延緩了用戶的閱讀速度。
在排版中，我們有一個(gè)特殊術(shù)語(yǔ)，用于兩行文本之間的間距（或行高）。通過(guò)增加行高，可以增加文本行之間的垂直空白空間，通常提高可讀性以換取屏幕空間。作為一個(gè)規(guī)則，行高應(yīng)該是字符高度的30％，以提高可讀性。
好的間距有助于可讀性。圖片來(lái)源：Microsoft
正如Dmitry Fadeyev所指出的那樣，正確地使用段落之間的空白已被證明可以將理解提高20％。使用空白的技能在于為用戶提供可消化量的內(nèi)容，然后剝離無(wú)關(guān)緊要的細(xì)節(jié)。
左：幾乎重疊的文字。右：良好的間距有助于可讀性。圖片來(lái)源： Apple
不要在文本和背景中使用相同或相似的顏色。文本越明顯，用戶就能更快地掃描和閱讀它。 W3C建議對(duì)身體文字和圖像文字的對(duì)比度如下：
這些文本行不符合顏色對(duì)比度的建議，難以根據(jù)背景顏色進(jìn)行閱讀。
這些文本行符合顏色對(duì)比度建議，易于閱讀背景顏色。
一旦你選擇了顏色，必須要在大多數(shù)設(shè)備上與真實(shí)用戶進(jìn)行測(cè)試。如果測(cè)試顯示閱讀副本有問(wèn)題，那就可以確定你的用戶具有完全相同的問(wèn)題。
色盲是一種常見(jiàn)的情況，特別是在男性中（8％的男性是色盲），建議使用除這些顏色以外的其他顏色來(lái)區(qū)分重要信息。也避免單獨(dú)使用紅色和綠色來(lái)傳達(dá)信息，因?yàn)榧t色和綠色色盲是最常見(jiàn)的色盲形式。
閃爍的內(nèi)容可能會(huì)引發(fā)敏感個(gè)體的癲癇發(fā)作。它不僅可以引起癲癇發(fā)作，而且對(duì)于一般用戶來(lái)說(shuō)，這是令人討厭且使人分心。
避免閃爍文字！
排版是一件重要的事情。做出正確的排版選擇可以讓你的網(wǎng)站看上去更優(yōu)雅。另一方面，糟糕的排版選擇會(huì)讓人分心，往往會(huì)引起對(duì)排版的注意。讓排版具有可讀性，可理解性和清晰度是至關(guān)重要。
內(nèi)容排版的存在是為了榮譽(yù)。
排版應(yīng)以不會(huì)增加用戶認(rèn)知負(fù)荷的方式來(lái)尊重內(nèi)容。
譯者：SKYUI
原文作者：Nick Babich
本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
近忙里偷閑，給自己加油充電的時(shí)候，發(fā)現(xiàn)自己腦海中布局這塊非常的凌亂混雜，于是花了一些時(shí)間將一些常用的布局及其實(shí)現(xiàn)方法整理梳理了出來(lái)，在這里，分享給大家。
單列布局是最常用的一種布局，一般是將一個(gè)元素作為容器，設(shè)置一個(gè)固定的寬度，水平居中對(duì)齊。
單列布局一般有兩種形式：
(圖片來(lái)源：https://blog.csdn.net/Ace_Arm/article/details/81036129)
一欄布局頭部、內(nèi)容、底部寬度一致
html
<header></header>
<main></main>
<footer></footer>
復(fù)制代碼css
header,footer{
width: 1200px;
height: 100px;
margin: 0 auto;
background: black;
}
main{
width: 1200px;
height: 600px;
background: red;
margin: 0 auto;
}
復(fù)制代碼一欄布局（通欄）頭部和底部寬度一致，占滿整個(gè)頁(yè)面，中間內(nèi)容區(qū)域?qū)挾容^小不占滿屏幕。
html
<header></header>
<main></main>
<footer></footer>
復(fù)制代碼css
header,footer{
width: 100%;
height: 100px;
background: black;
}
main{
width: 1200px;
height: 600px;
background: red;
margin: 0 auto;
}
復(fù)制代碼單列布局是最為基礎(chǔ)和簡(jiǎn)單的一種，實(shí)現(xiàn)方法并不局限于以上兩種，大家可自由發(fā)揮，找到更多的方法來(lái)實(shí)現(xiàn)。
2列布局的使用頻率也非常高，其實(shí)現(xiàn)效果主要就是將頁(yè)面分割成左右寬度不等的兩列。一般寬度較小的一列會(huì)設(shè)置為固定寬度，作為側(cè)邊欄之類的，而另一列則充滿剩余寬度，作為內(nèi)容區(qū)。
在后臺(tái)管理系統(tǒng)及api文檔中使用較為廣泛。
先來(lái)看看效果：
實(shí)現(xiàn)兩列布局的方法有很多，這里主要介紹兩種方法。
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。實(shí)現(xiàn)思路很簡(jiǎn)單，側(cè)邊欄寬度固定，設(shè)置絕對(duì)定位，使其脫離文檔流，內(nèi)容區(qū)域通過(guò)calc()函數(shù)計(jì)算剩余寬度并設(shè)置寬度，再加一個(gè)margin-left，值為側(cè)邊欄的寬度。
代碼如下：
html
<div class="slider"></div>
<div class="main"></div>
復(fù)制代碼css
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
.slider,.main{
height: 100%;
}
.slider{
position: absolute;
left: 0;
top: 0;
width: 100px;
background: black;
}
.main{
width: calc(100% - 100px);
background: red;
margin-left: 100px;
}
復(fù)制代碼通過(guò)flex屬性實(shí)現(xiàn)思路也很簡(jiǎn)單，將父元素設(shè)置為flex，側(cè)邊欄寬度固定，內(nèi)容區(qū)域設(shè)置flex:1即可充滿剩余區(qū)域。
代碼如下：
html
<div class="slider"></div>
<div class="main"></div>
復(fù)制代碼css
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
body{
display: flex;
}
.slider,.main{
height: 100%;
}
.slider{
width: 100px;
background: black;
}
.main{
flex: 1;
background: red;
}
復(fù)制代碼3 列布局在日常開發(fā)中使用頻率也是很高的，其按照左中右的順序進(jìn)行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應(yīng)，能根據(jù)屏幕大小做響應(yīng)。
還是先來(lái)看看效果圖
三列布局的實(shí)現(xiàn)方法也很多，這里主要介紹兩種（雙飛翼布局、圣杯布局、flex布局）
在介紹雙飛翼布局和圣杯布局之前要先說(shuō)一下margin設(shè)置負(fù)值的作用：
當(dāng)margin的值設(shè)為負(fù)值的時(shí)候，元素會(huì)對(duì)應(yīng)的像那個(gè)放向移動(dòng)，比如margin-left為負(fù)值，元素則會(huì)左移
代碼如下：
html
<div class="main">
<div class="middle">
<div class="content">
中間
</div>
</div>
<div class="left">
左邊
</div>
<div class="right">
右邊
</div>
</div>
復(fù)制代碼css
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
div{
height: 100%;
}
.main>div {
float: left;
}
.left {
width: 200px;
background: red;
margin-left: -100%;
}
.right {
width: 200px;
background: blue;
margin-left: -200px;
}
.middle {
width: 100%;
background: yellow;
}
.content {
margin-left: 200px;
margin-right: 200px;
}
復(fù)制代碼代碼如下: html
<div class="main">
<div class="center">中間中間中間中間中間中間中間后</div>
<div class="left">左邊</div>
<div class="right">右邊</div>
</div>
復(fù)制代碼css
* {
margin: 0;
padding: 0;
}
.main {
height: 200px;
padding: 0 150px 0 200px;
background: greenyellow;
*zoom: 1;
}
.left,
.center,
.right {
float: left;
}
.center {
width: 100%;
height: 200px;
background: red;
}
.left {
width: 200px;
height: 200px;
background: yellow;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 150px;
height: 200px;
background: gainsboro;
margin-left: -150px;
position: relative;
left: 150px;
}
復(fù)制代碼雙飛翼布局其實(shí)和圣杯布局的精髓是一樣的，都是通過(guò)設(shè)置負(fù)margin來(lái)實(shí)現(xiàn)元素的排布，不同的就是html結(jié)構(gòu)，雙飛翼是在center元素內(nèi)部又設(shè)置了一層inner-center的元素并設(shè)置它的左右margin，而非圣杯布局的padding，來(lái)排除兩邊元素的覆蓋。所以這兩種布局原理基本一樣，關(guān)鍵就是在于設(shè)置負(fù)margin的技巧，和元素浮動(dòng)的相對(duì)定位技巧來(lái)實(shí)現(xiàn)。
代碼如下: html
<div class="main">
<div id="left">左邊定寬</div>
<div id="main">中間自適應(yīng)</div>
<div id="right">右邊定寬</div>
</div>
復(fù)制代碼css
* {
padding: 0px;
margin: 0px;
}
body,html{
width: 100%;
height: 100%;
}
body{
display: flex;
}
#left,
#right {
width: 100px;
background-color: #0FC;
}
#main {
flex: 1;
background-color: #999;
}
復(fù)制代碼如果不考慮瀏覽器兼容問(wèn)題的話，運(yùn)用flex布局是最簡(jiǎn)單的方式。
這種布局將頁(yè)面分成上、中、下三個(gè)部分，上、下部分都為固定高度，中間部分高度不定。當(dāng)頁(yè)面高度小于瀏覽器高度時(shí)，下部分應(yīng)固定在屏幕底部；當(dāng)頁(yè)面高度超出瀏覽器高度時(shí)，下部分應(yīng)該隨中間部分被撐開，顯示在頁(yè)面最底部。
這種布局也稱之為sticky footer，意思是下部分粘黏在屏幕底部。
首先我們先構(gòu)建簡(jiǎn)單的HTML代碼
<body>
<div class="content"></div>
<div class="footer"></div>
</body>
復(fù)制代碼其中content為我們的內(nèi)容區(qū)。下面開始介紹解決方法。
這種方法重要用vh(viewpoint height)來(lái)計(jì)算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內(nèi)容區(qū)域的最小高度。例如我們可以添加如下樣式：
.content{
min-height:calc(100vh-footer的高度);
box-sizing:border-box;
}
復(fù)制代碼從而這個(gè)問(wèn)題就解決了，但是如果頁(yè)面的footer高度不同怎么辦?每一個(gè)頁(yè)面都要重新計(jì)算一次，這是很麻煩的，所以這種方法雖然簡(jiǎn)單但卻是不推薦的。
這種方法就是利用flex布局對(duì)視窗高度進(jìn)行分割。footer的flex設(shè)為0，這樣footer獲得其固有的高度;content的flex設(shè)為1，這樣它會(huì)充滿除去footer的其他部分。
代碼如下：
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer{
flex: 0;
}
復(fù)制代碼這樣的布局簡(jiǎn)單使用，比較推薦。
這種方法就是在content的外面添加一個(gè)包裹容易，將html代碼改成這樣：
<body>
<div class="wrapper">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
復(fù)制代碼然后添加以下樣式：
html, body, .wrapper {
height: 100%;
}
body > .wrapper {
height: auto;
min-height: 100%;
}
.content {
padding-bottom: 150px; /* 必須使用和footer相同的高度 */
}
.footer {
position: relative;
margin-top: -150px; /* footer高度的負(fù)值 */
height: 150px;
clear:both;
}
復(fù)制代碼另外，為了保證兼容性，需要在wrapper上添加clearfix類。其代碼如下：
<body>
<div class="wrapper clearfix">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
復(fù)制代碼.clearfix{
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
復(fù)制代碼ok,好，完成了，這種方法也比較推薦，但就是加入的代碼比較多，也改變了html的文檔結(jié)構(gòu)。
粘性布局是什么呢？我們先來(lái)看看效果演示
沒(méi)錯(cuò)，其實(shí)就是在頁(yè)面滾動(dòng)的時(shí)候保持元素（這里的是標(biāo)題）在頁(yè)面視圖上方，也就是我們常常看到的 吸附效果。
標(biāo)題行設(shè)置了背景色。如果不設(shè)置背景色（背景透明），正常文檔流的文字就會(huì)和標(biāo)題行文字重疊在一起顯示。
sticky定位的元素會(huì)遮住滾動(dòng)而來(lái)的“正常”的文檔流；后面的sticky元素會(huì)覆蓋前面的sticky元素，就好像一層層的便利貼，是不是很酷~~。
實(shí)現(xiàn)粘性布局主要依靠position的sticky屬性。
position: sticky;
復(fù)制代碼先來(lái)看看兼容性：
從Can I use上查詢可以看出，sticky的兼容性并不是太好，所以大家使用的時(shí)候要慎重考慮，如果不要求兼容的情況，用這個(gè)還是相當(dāng)?shù)氖娣恕?/p>
下面給出一個(gè)簡(jiǎn)單的示例。
html:
<main>
<header>標(biāo)題一</header>
<div class="content">
</div>
<header>標(biāo)題二</header>
<div class="content">
</div>
<header>標(biāo)題三</header>
<div class="content">
</div>
<header>標(biāo)題四</header>
<div class="content">
</div>
</main>
復(fù)制代碼js(不想寫太多p標(biāo)簽，所以用js生成，偷個(gè)懶):
let num=20
let html=''
for (var i=0; i < num; i++) {
html +=`<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
item.innerHTML=html
})
復(fù)制代碼css:
main {
width: 400px;
height: 300px;
margin: 200px auto;
overflow: auto;
}
header {
position: sticky;
top: 0;
height: 30px;
background-color: blanchedalmond;
}
復(fù)制代碼
作者：monkeysoft
鏈接：https://juejin.cn/post/6907027007318687751
來(lái)源：掘金
網(wǎng)站上使用不同的書寫風(fēng)格和swirly字體是增強(qiáng)其吸引力的一種很棒的方式。Alihashmi在網(wǎng)頁(yè)設(shè)計(jì)方面擁有四年多的經(jīng)驗(yàn)，目前教授人們他的技能，他說(shuō)"正確的排版方式使得閱讀網(wǎng)站的內(nèi)容毫不費(fèi)力，而糟糕的排版則讓讀者失去了興趣。"簡(jiǎn)潔的機(jī)身字體與花哨優(yōu)雅的字體相輔相成，使文章易于上手，閱讀愉快。
在編寫時(shí)，您需要使用簡(jiǎn)單，可辨別且易于閱讀的字體類型; 但當(dāng)排版過(guò)于簡(jiǎn)單時(shí)，內(nèi)容會(huì)變得單調(diào)乏味。以下是在九種網(wǎng)頁(yè)設(shè)計(jì)中使用的最佳排版方法。
可讀性是關(guān)鍵。你絕對(duì)不想過(guò)度使用書法字體，以至于讀者幾乎無(wú)法弄清楚你所寫的字。事實(shí)上，使用標(biāo)準(zhǔn)字體可以更好地吸引讀者，因?yàn)榇蠖鄶?shù)人都熟悉它們。
簡(jiǎn)潔性增加了您網(wǎng)站的可讀性并增強(qiáng)了其視覺(jué)吸引力。您應(yīng)該努力在您的網(wǎng)站上使用最少數(shù)量的字體來(lái)保持結(jié)構(gòu)和專業(yè)性。當(dāng)內(nèi)容變成難以辨認(rèn)而讓人感到混亂時(shí)，嘗試使用書法字體顯得過(guò)于復(fù)雜，對(duì)于您的網(wǎng)站來(lái)說(shuō)可能是災(zāi)難性的。
您網(wǎng)站的排版很大程度上取決于您的需求。例如，在宣傳您的品牌時(shí)，自定義字體在此時(shí)非常有用。此外，請(qǐng)考慮用戶將主要訪問(wèn)您網(wǎng)站的設(shè)備 - 無(wú)論是筆記本電腦，平板電腦還是智能手機(jī)。這將幫助您選擇在目標(biāo)設(shè)備上清晰易讀的字體。
對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，系統(tǒng)字體是一種安全的選擇，因?yàn)樗鼈円子谑褂们也粫?huì)給出復(fù)雜的布局。但是，要正確使用文本工具中可用的眾多書法字體，您需要成對(duì)選擇和匹配它們，從而提供出色的混合效果。
當(dāng)與其他特定字體匹配時(shí)，一些書法字體會(huì)產(chǎn)生有利的結(jié)果; 因此，你需要巧妙地挑選和混合它們。有些網(wǎng)站提供了一系列免費(fèi)字體，但確認(rèn)它們是否獲得許可以及是否允許您使用它們非常重要。
您不希望在您的網(wǎng)站上使用需要許可的書法字體，因?yàn)檫@相當(dāng)于偷竊。有些網(wǎng)站需要令人討厭的字體上傳，而有些則不需要，因此您必須找到最適合您的字體。
一行文本中的字符數(shù)很大程度上決定了用戶閱讀和掌握信息的難易程度。較短的句子比較長(zhǎng)的句子具有更好的可讀性; 因此，您的排版不應(yīng)太寬或太窄。常見(jiàn)的Web排版規(guī)則是將每行的字符數(shù)限制為約50-60。要獲得網(wǎng)站的最佳線長(zhǎng)，您應(yīng)該考慮修改布局的寬度。
正確使用文本行之間的空白不僅可以提高可視性和視覺(jué)吸引力，還可以提高易讀性。未能允許正確的線高測(cè)量可能會(huì)使您的網(wǎng)站看起來(lái)混亂，無(wú)法吸引讀者的興趣。您應(yīng)該考慮在網(wǎng)站上的文本行之間應(yīng)用正確的行高，以便更好地排版。
顏色在網(wǎng)絡(luò)排版最佳實(shí)踐中扮演著重要角色。因此，仔細(xì)對(duì)比文本和背景顏色可以提高文本的易讀性。
最終用戶如何接收和解釋消息在很大程度上取決于書法。要有效地傳達(dá)設(shè)計(jì)中的消息，請(qǐng)確保您選擇的字體不會(huì)改變消息的意圖。例如，如果您的目標(biāo)是創(chuàng)造和傳達(dá)愉快和輕松的氛圍，正式字體是不夠的 - 尖叫或"可怕"字體也不會(huì)起作用。因此，遵循字體最佳實(shí)踐來(lái)實(shí)現(xiàn)有效的設(shè)計(jì)。
您制作內(nèi)容的場(chǎng)合會(huì)影響網(wǎng)頁(yè)設(shè)計(jì)中的排版。當(dāng)您決定用于設(shè)計(jì)的字體時(shí)，它應(yīng)該始終發(fā)揮作用。例如，像索菲亞公主這樣有趣且富有創(chuàng)意的字體最適合銷售兒童用品的網(wǎng)站。而且，如果為婚禮設(shè)計(jì)，更復(fù)雜和浪漫的字體，如Coneria Script是合適的。您要為其創(chuàng)建設(shè)計(jì)的事件應(yīng)始終指導(dǎo)您使用項(xiàng)目中使用的最佳字體。
將文本或消息中的所有字符大寫，使您看起來(lái)像是在尖叫并強(qiáng)加給讀者。這對(duì)眼睛來(lái)說(shuō)是令人不愉快的，大多數(shù)讀者甚至不會(huì)到達(dá)消息的末尾，因?yàn)樗赡軙?huì)讓他們失望。
為了使您的網(wǎng)站能夠與目標(biāo)受眾保持良好關(guān)系，您應(yīng)該了解最終用戶，并在制作印刷設(shè)計(jì)時(shí)考慮他們的需求和期望。你是誰(shuí)設(shè)計(jì)的？他們的年齡組是什么？他們喜歡和不喜歡什么？回答有關(guān)目標(biāo)受眾的此類問(wèn)題將幫助您為要傳達(dá)給他們的信息選擇正確的字體。
要實(shí)現(xiàn)您的網(wǎng)頁(yè)設(shè)計(jì)目標(biāo)，您需要確保您的網(wǎng)站的排版內(nèi)容清晰，精致和不受干擾。此外，您需要具有創(chuàng)造性，并使用各種系統(tǒng)和自定義刻字來(lái)完成不同的字體集合和練習(xí)，以確定哪些匹配最佳。最重要的是，沒(méi)有單一的公式來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)排版的完美，但通過(guò)足夠的練習(xí)，你將增加你的技能。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
