網(wǎng)頁(yè)設(shè)計(jì)(Web Design)空格處理方法
來(lái)源:易賢網(wǎng) 閱讀:1801 次 日期:2015-09-08 14:46:19
溫馨提示:易賢網(wǎng)小編為您整理了“網(wǎng)頁(yè)設(shè)計(jì)(Web Design)空格處理方法”,方便廣大網(wǎng)友查閱!

相信認(rèn)真做過(guò)網(wǎng)頁(yè)設(shè)計(jì)(Web Design),或者關(guān)注過(guò)頁(yè)面設(shè)計(jì)的同行都對(duì)“空格”不陌生。“空格”屬于一類細(xì)節(jié),很容易被忽略,但又比較影響效果,更麻煩是很不好控制。此問(wèn)題總結(jié)的想法,來(lái)自“知乎”上梁海的提問(wèn),以及對(duì)他提供專業(yè)答案的反思和總結(jié)。

就所提問(wèn)題而言,我目前還是堅(jiān)定的“不空格”派系,我不否認(rèn)“空格”后效果的提升,但不能完全解決問(wèn)題,有利有弊。既然效果并不十分理想,再綜合工 作量、可維護(hù)性而言,我認(rèn)為意義實(shí)在有限?;蛘吒^的認(rèn)為,要想達(dá)到完美的效果,必須手動(dòng)調(diào)整,沒(méi)有完美的可控程序邏輯。道理如同圖書排版,真正排版出 色的好書,都是一頁(yè)頁(yè)手工定制的,排版效果必須跟著內(nèi)容走。

這個(gè)問(wèn)題在專業(yè)網(wǎng)頁(yè)設(shè)計(jì)上講,我認(rèn)為可歸類于“內(nèi)容排版”,與用戶體驗(yàn)中“可讀性”直接相關(guān)。平面設(shè)計(jì)里好像叫“字體排印”,我認(rèn)為同樣應(yīng)該用“可 讀性”指標(biāo)來(lái)衡量質(zhì)量。但受限于網(wǎng)頁(yè)構(gòu)成原理,我認(rèn)為在網(wǎng)頁(yè)中,空格影響的不僅有“內(nèi)容排版”,還有“頁(yè)面版式”問(wèn)題也很典型?!皟?nèi)容排版”主要指內(nèi)容層 面,“頁(yè)面版式”主要指結(jié)構(gòu)層面,下邊分開來(lái)討論。

內(nèi)容排版的空格

目前互聯(lián)網(wǎng)上內(nèi)容里,中英文混雜已經(jīng)非常普遍,并且可以放大理解為“中西文混排(自己基本只用英文,所以后續(xù)都寫“中英文混排”)”。不僅僅是英文單詞的使用,各種英文術(shù)語(yǔ)和縮寫已經(jīng)完全融入了普通人生活。尤其在信息爆炸的互聯(lián)網(wǎng)上,此問(wèn)題表現(xiàn)的比較突出。

我最早看到和自己寫的中英文內(nèi)容,全部都是連著寫,不會(huì)考慮加空格。后來(lái)是在一些很專業(yè)的網(wǎng)站上發(fā)現(xiàn),原來(lái)還有在中文、英文之間加空格的說(shuō)法,尤其 翻譯過(guò)來(lái)的技術(shù)參考里。很容易想到,這種寫法是為了更好的區(qū)別不同語(yǔ)言,以免造成閱讀上的“粘連”障礙,加空格后確實(shí)極大提升了“可讀性”。(梁海更專業(yè) 的觀點(diǎn)原文“文字的交界處應(yīng)該是個(gè)盡量平滑的過(guò)渡,盡量滿足雙方文字的需求,并且讓文本的節(jié)奏盡量平穩(wěn)?!保?/P>

但同時(shí)我發(fā)現(xiàn),影響“中英文混排”效果的原因其實(shí)很多,在網(wǎng)頁(yè)設(shè)計(jì)中不僅僅只有“加空格”手段來(lái)優(yōu)化。比如更改字體,因?yàn)樵谟?jì)算機(jī)系統(tǒng)里英文的選擇其實(shí)很多,不比中文“宋體”的單調(diào)。不同的英文字體,不僅對(duì)比中文的大小比例不一樣,而且前后粘連的距離也不一樣。

2003年前后,我最常用的字體是Arial, Tahoma, Verdana,對(duì)比同樣字號(hào)可以發(fā)現(xiàn),Arial最小而Verdana最大。于是在我們當(dāng)時(shí)的理解里,中英文混排最好用Verdana,如果沒(méi)記錯(cuò)當(dāng)時(shí) 的微軟官方網(wǎng)站用的就是,我特地到一些外企中文網(wǎng)站驗(yàn)證過(guò)。

2005年,我開始大量閱讀Blog后,我發(fā)現(xiàn)Wordpress默認(rèn)風(fēng)格的“中英文混排”效果不錯(cuò),查后得知人家用的是Lucida Grande字體,此后我開始有意識(shí)的關(guān)注“中英文混排”效果不錯(cuò)的個(gè)人Blog,以便提取“可讀性”更好的字體,這個(gè)事情如要自己實(shí)驗(yàn)會(huì)很麻煩。但請(qǐng)注 意,當(dāng)時(shí)Wordpress其實(shí)沒(méi)多少人用,甚至還沒(méi)有Movable Type的用戶多。

其實(shí)一開始我也嘗試過(guò)給英文兩邊加空格,但確實(shí)麻煩。而且有個(gè)細(xì)節(jié)不知是否有人關(guān)注過(guò),某些字體(具體哪些字體未深入測(cè)試)定義“空格”的寬度會(huì)因 左側(cè)是中文或者英文而不一樣。也就是說(shuō),給一個(gè)單詞兩邊加上空格后,會(huì)出現(xiàn)左邊寬、右邊窄的效果,這點(diǎn)我也無(wú)法接受的。而在有了通過(guò)“字體”解決的思維方 式后,更完全拋棄了“加空格”的想法。再往后,又先后認(rèn)識(shí)了Helvetica, Calibri等等優(yōu)秀字體,所以用起來(lái)還算綽綽有余。

單就字體而言,學(xué)問(wèn)很大,還有清晰度、襯線等方面的可讀性影響因素,而且在不同客戶端瀏覽器下表現(xiàn)也可能有差異。比如我知道不同字體的下劃線也會(huì)很 影響可讀性,Tahoma的下劃線就是緊挨文字的。這里只談空格,我也不是專業(yè)搞研究的,所有結(jié)論均出于實(shí)踐經(jīng)驗(yàn)。目前我個(gè)人網(wǎng)站上用的就是 Calibri,個(gè)人博客上還是Lucida Grande,我認(rèn)為混排效果都不錯(cuò)。

名單

常用字體中英文混排效果

圖只是舉例示意,不同字號(hào)、瀏覽器等客觀條件都可能影響效果。

頁(yè)面版式的空格

結(jié)構(gòu)層面的空格主要在HTML結(jié)構(gòu)代碼里,很多時(shí)候我們需要針對(duì)不同標(biāo)記的內(nèi)容做間隔。之前我的做法,都是自然空格,就是在HTML代碼里敲入一個(gè) 空格。但慢慢我發(fā)現(xiàn),第一不易做像素級(jí)的精確控制,第二不同客戶端下的空格寬度解析不一致,這在做跨瀏覽器兼容時(shí)很重要。而且我很快意識(shí)到,代碼里做空格 不符合“結(jié)構(gòu)、表現(xiàn)”分離的原則。于是,后來(lái)我把所有需要“空格”效果的內(nèi)容全部用CSS的margin定義解決,想空就空,想空多少隨時(shí)可以改。

很快問(wèn)題又來(lái)了,通常高保真原型里沒(méi)有的空格,但研發(fā)工程師做的測(cè)試原型里卻有。這是因?yàn)樵诳蛻舳舜a里,換行就算一個(gè)空格。工程師在做應(yīng)用層開發(fā) 時(shí),往往不那么注意,通常為了看代碼方便而隨意空行。還有類情況是可能使用了某種控件或者特殊語(yǔ)句,甚至還有查不出來(lái)的情況,這這種事我也碰到不少。

當(dāng)然,這種雞毛蒜皮的細(xì)節(jié)問(wèn)題,往往不會(huì)放多高的優(yōu)先級(jí),但多了確實(shí)影響效果。其實(shí)也不是沒(méi)有解決辦法,可以通過(guò)CSS語(yǔ)句word-spacing:-3px;來(lái)定義讓空格失效,通過(guò)局部控制靈活應(yīng)對(duì),最近試的效果還是挺不錯(cuò)。

回到前文“內(nèi)容排版”的問(wèn)題,如梁海所提,通過(guò)結(jié)構(gòu)層處理統(tǒng)一為英文加上標(biāo)記,如<span lang=”en”>Manual of Style</span>,我認(rèn)為是不可取的。第一太過(guò)麻煩,第二理論上可以用JS直接判斷中英文??偟膩?lái)說(shuō),我認(rèn)為單獨(dú)控制“內(nèi)容排版”中 的英文都有點(diǎn)多此一舉。

個(gè)人網(wǎng)站首頁(yè)截圖

dt內(nèi)各內(nèi)容標(biāo)記之間無(wú)空格,用margin精確控制。

名單

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看技術(shù)文章
易賢網(wǎng)手機(jī)網(wǎng)站地址:網(wǎng)頁(yè)設(shè)計(jì)(Web Design)空格處理方法
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)