分享5個(gè)文本排版的小技巧幫你快速提升網(wǎng)頁設(shè)計(jì)效果
每個(gè)人都是以新手的身份入行設(shè)計(jì),沒有人天生就有很好的審美,它也必須像其他事物一樣得到訓(xùn)練。
在創(chuàng)建實(shí)用、可訪問性良好且視覺效果頗為出彩的網(wǎng)頁設(shè)計(jì)界面的時(shí)候,我們大多只需要進(jìn)行有限度的微調(diào),即可達(dá)到頗為不錯(cuò)的效果。下面跟大家分享一下這幾個(gè)文本排版的小技巧,幫你提升網(wǎng)頁設(shè)計(jì)效果。
1、留白應(yīng)被視為最常見/實(shí)用的設(shè)計(jì)元素
不要把你的整個(gè)頁面都用信息給填滿,讓你的設(shè)計(jì)盡量更有呼吸感,而不會(huì)顯得擁擠。
留白其實(shí)和文本、圖片、配色一樣,應(yīng)當(dāng)視作為一個(gè)排版的元素,無論是在網(wǎng)頁設(shè)計(jì)中還是在 APP 的UI界面當(dāng)中,它們都是一起協(xié)同來構(gòu)成版面,傳遞信息,給用戶帶來更好的體驗(yàn)。
而屏幕空間足夠充裕并不意味著你需要用信息填滿整個(gè)空間,使用留白合理地將信息劃分出優(yōu)先級(jí),這一點(diǎn)在幾乎所有的設(shè)計(jì)里面都是通用的規(guī)則。
2、保持文本和圖像之間合適的對(duì)比度

在涉及到圖文混排或者圖文疊加的地方,前景的文本和背景的圖片之間的對(duì)比度控制也是一個(gè)常見的問題。尤其是在圖片的視覺信息比較多和混雜的時(shí)候,前景的文字很難確保整體的可讀性。
這個(gè)/時(shí)候,在文本和圖片之間添加一個(gè)深色半透明的疊加層,就能夠讓圖片和文本之間保持良好的對(duì)比度。
另外,這種設(shè)計(jì)還可以在更換圖片和文本情況下,合理地在深色和淺色之間切換,確保不同情況下的對(duì)比度。
3、控制好文本段落在垂直方向上的節(jié)奏感

文本內(nèi)容在垂直方向上其實(shí)也是有講究的,合理的節(jié)奏能夠讓標(biāo)題、副標(biāo)題、段落標(biāo)題、文本之間的各自的歸屬關(guān)系、層級(jí)結(jié)構(gòu),呈現(xiàn)的更加清晰。
最常見的一種情況,所有的行間距和段間距都是一樣的,邊距和間距也都非常粗暴地完全一樣,這種排版設(shè)計(jì)之下,視覺上無法讓人清晰地了解到底標(biāo)題和上下段落之間的歸屬關(guān)系。
其實(shí)這個(gè)時(shí)候,通常讓段落標(biāo)題和上段正文段落之間的間距拉開,這樣能夠讓標(biāo)題和下方段落之間有更加清晰的關(guān)系,保留更好的垂直節(jié)奏感。這種思路延伸開來,可以根據(jù)需求做的更細(xì)致,但是總體上,就是為了提供更好的視覺層次結(jié)構(gòu)。
4、根據(jù)文本塊的大小靈活調(diào)節(jié)行高

在版式設(shè)計(jì)當(dāng)中,如果想要保證體驗(yàn)足夠優(yōu)秀,并非所有地行高都是完全一樣的。在處理不同大小文本塊的時(shí)候,最好根據(jù)不同段落本身地特征,來設(shè)置行高。(注意:行高通常指的上一行的字符底部到下一行的字符底部的距離)
對(duì)于大面積的文本,適當(dāng)?shù)脑黾有懈?,能夠讓行之間的辨識(shí)度變得更高,但是段落本身比較緊湊短小的時(shí)候,比如只有三四行,行寬也不大,這個(gè)時(shí)候適當(dāng)縮減行高,因?yàn)檫@樣不會(huì)帶來易讀性的問題。
5、文本內(nèi)容的配色盡量只調(diào)整色相和明暗
在項(xiàng)目允許的情況下,不要使用大量不同的文本顏色來區(qū)分信息的類型,因?yàn)檫@種方式會(huì)讓整體的體驗(yàn)變得花哨且不協(xié)調(diào)。
在缺少嚴(yán)格設(shè)計(jì)系統(tǒng)和相對(duì)嚴(yán)謹(jǐn)?shù)那捌谘芯抗ぷ鞯那闆r下,臨時(shí)調(diào)整出來的色彩組合應(yīng)用在不同功能的文本上,所呈現(xiàn)出來的效果通常會(huì)特別難看。
通常而言,為了讓設(shè)計(jì)不至于深陷反復(fù)調(diào)整文本配色怪圈當(dāng)中,通常最好基于你的整個(gè)配色方案來進(jìn)行設(shè)計(jì),比如可以借用你的主色的色相,在保證對(duì)比度的情況下,讓不同的文本呈現(xiàn)出不同的明暗即可,這樣既保證了視覺上的統(tǒng)一,又差異性的處理,又不至于體驗(yàn)上太差。

設(shè)計(jì)網(wǎng)站中有哪些關(guān)鍵技巧?有哪些陷阱?在這里,世界上一流的網(wǎng)站設(shè)計(jì)專家,讓你共享他們的秘密,告訴你:使網(wǎng)站賦予情趣的訣竅、應(yīng)該避免做什么、應(yīng)使用什么工具軟件以及他們喜愛和厭惡的網(wǎng)站。
大部分網(wǎng)站或產(chǎn)品的按鈕色彩都不會(huì)超過3種,指向“動(dòng)作”的按鈕應(yīng)當(dāng)統(tǒng)一為同一種顏色,比如Google的“搜索”按鈕是藍(lán)色,而Twitter的“注冊(cè)”按鈕則是明亮的黃色。色彩能夠幫助品牌極為簡易的建立用戶認(rèn)知:
今年,許多網(wǎng)站都將這個(gè)小元素納入界面,成為頁面導(dǎo)航的重要組成部分。除了導(dǎo)航設(shè)計(jì)趨勢(shì),還有各種設(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ì)平臺(tái)流行起來的設(shè)計(jì)趨勢(shì)。當(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í),像素會(huì)呈現(xiàn)出磨砂玻璃的略微不透明的品質(zhì)——為設(shè)計(jì)增添一絲質(zhì)感和維度。