網(wǎng)頁設(shè)計(jì)中的排版·洛壹觀點(diǎn)
關(guān)于排版設(shè)計(jì),我們大多時(shí)候都會聯(lián)想到界面的文字內(nèi)容布局。在文字選擇上,網(wǎng)站應(yīng)該盡量避免選用2種以上的字體及風(fēng)格樣式,容易影響界面中各內(nèi)容中的層級,給用戶帶來信息上的混亂。
接下來,我們從文字的其他細(xì)節(jié)來入手研究:
文字間距
文字間距,就是文字之間的間距,不同字間距能給用戶展現(xiàn)出不一樣的視覺感受,例如字間距過大,缺乏閱讀的連貫性,但同時(shí)會讓界面的透氣感更強(qiáng),更加舒適;字間距過小,會增強(qiáng)文字中信息連接性,但會缺乏文字的獨(dú)立性,也會影響界面的易讀性。
一般內(nèi)文字間距設(shè)定在-20~10pt的視覺效果更佳,不過具體還需根據(jù)文字字體、粗細(xì)、大小以及行距來決定,例如:
文字越大,字距越??;文字越小,字距越大。
字體越細(xì),字距越??;字體越寬,字距越大。
行距越大,字距也越大;行距越小,字距也越小
要注意英文字母間的間距,由于各個(gè)字母占據(jù)的空間大小不一,大小寫字母占據(jù)的空間大小也各不一樣,字體變化影響較大,合理字間距的變化會更多。
文字行距和行高
行距和行高兩者有著緊密而不可分割的關(guān)系,很多人經(jīng)常會將行距和行高混淆,其實(shí)行距就是文字間行與行的間距,行高則是文字底部到頂部,則文字的大小。
一般來說,如果字體的行高為10px,行距為2px(即行高的0.2倍),那么會顯得界面內(nèi)容太擠,不容易閱讀;相反,如果行距設(shè)置為行高的2倍,又會顯得界面內(nèi)容過于松散,不夠緊湊;因此,行距設(shè)定為行高的0.5-1倍,這樣閱讀起來會更加舒暢輕松。
文字對齊
文字的對齊一般分為:左對齊、居中對齊和右對齊。
如果網(wǎng)頁設(shè)計(jì)中存在大量文字,盡量避免出現(xiàn)多種對齊方式,否則會顯得界面很凌亂,毫無規(guī)律可言。
通常,網(wǎng)站設(shè)計(jì)最常用到且最容易操作的就是左對齊。文字排版采用左對齊的方式排會顯得整個(gè)界面非常規(guī)整、簡潔,在視覺上也十分舒服。
如果你對排版設(shè)計(jì)已經(jīng)非常嫻熟,也可以選擇居中對齊,將整段文字看作一個(gè)整體,再進(jìn)行布局,同樣可以保持界面的統(tǒng)一性和協(xié)調(diào)性。
界面進(jìn)行對齊布局時(shí)需注意,很多看似隨意擺放的文字,其實(shí)都會與其他元素之間存在某種對齊關(guān)系,千萬別真的以為它們脫離了頁面布局規(guī)則而「隨意擺放」。
文字對比
對比會幫助文字布局制造焦點(diǎn),更具有吸引力,同時(shí)避免用戶混淆了界面內(nèi)容的層級。常見的對比包括大小對比、顏色對比、疏密對比、虛實(shí)對比,以及粗細(xì)對比等。
制造對比效果時(shí),一定要大膽強(qiáng)烈,不要拿28px的文字和29px的文字進(jìn)行對比,大小太過相似,無法突出焦點(diǎn)。現(xiàn)在很多網(wǎng)站設(shè)計(jì)都流行大標(biāo)題,因此不妨將標(biāo)題適當(dāng)增大,增加與正文的對比。
另外,除非標(biāo)題或裝飾性文字,否則不要使用特殊字體,要確保內(nèi)容清晰易讀,尤其是一大段文字,盡量使用基礎(chǔ)字體,這樣才會方便用戶閱讀。
設(shè)計(jì)網(wǎng)站中有哪些關(guān)鍵技巧?有哪些陷阱?在這里,世界上一流的網(wǎng)站設(shè)計(jì)專家,讓你共享他們的秘密,告訴你:使網(wǎng)站賦予情趣的訣竅、應(yīng)該避免做什么、應(yīng)使用什么工具軟件以及他們喜愛和厭惡的網(wǎng)站。
大部分網(wǎng)站或產(chǎn)品的按鈕色彩都不會超過3種,指向“動(dòng)作”的按鈕應(yīng)當(dāng)統(tǒng)一為同一種顏色,比如Google的“搜索”按鈕是藍(lán)色,而Twitter的“注冊”按鈕則是明亮的黃色。色彩能夠幫助品牌極為簡易的建立用戶認(rèn)知:
今年,許多網(wǎng)站都將這個(gè)小元素納入界面,成為頁面導(dǎo)航的重要組成部分。除了導(dǎo)航設(shè)計(jì)趨勢,還有各種設(shè)計(jì)方法,如全屏導(dǎo)航,底部導(dǎo)航等,所有這些都有利于網(wǎng)頁設(shè)計(jì)師。
網(wǎng)頁設(shè)計(jì)必須簡約,任何無用的特質(zhì)都必須移除;與此同時(shí),網(wǎng)頁設(shè)計(jì)必須能夠滿足用戶需求。
做網(wǎng)站設(shè)計(jì)時(shí),我們應(yīng)該考慮哪些因素?在做的過程中設(shè)計(jì)師應(yīng)該思考哪些問題,怎么樣才能做好網(wǎng)站設(shè)計(jì)?
用戶體驗(yàn)好的方案,用戶感受到的體驗(yàn)真的好嗎,真的在意嗎?用戶愿意為這個(gè)體驗(yàn)更多的使用?還是愿意付更多錢? 如果設(shè)計(jì)希望被認(rèn)可價(jià)值,那么就必須清晰表明:設(shè)計(jì)到底實(shí)現(xiàn)了什么價(jià)值,以及設(shè)計(jì)是如何穩(wěn)定實(shí)現(xiàn)這些價(jià)值的。 網(wǎng)站設(shè)計(jì)中設(shè)計(jì)師到底要實(shí)現(xiàn)什么價(jià)值?
玻璃擬態(tài)(Glassmorphism),更直觀的說就是玻璃擬物化。它是在2020年末開始在各大設(shè)計(jì)平臺流行起來的設(shè)計(jì)趨勢。當(dāng)時(shí)蘋果新發(fā)布的Mac OS Big Sur操作系統(tǒng)中也使用了這種風(fēng)格
網(wǎng)頁設(shè)計(jì)師想出了一些非常聰明的技巧,讓他們的作品有一種實(shí)體感。玻璃擬態(tài)(Glassmorphism)就是這樣一種技術(shù)。當(dāng)您將模糊效果與透明度相結(jié)合時(shí),像素會呈現(xiàn)出磨砂玻璃的略微不透明的品質(zhì)——為設(shè)計(jì)增添一絲質(zhì)感和維度。

