激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

快速提升 UI 設(shè)計(jì)效果的 6 個(gè)小技巧

發(fā)布時(shí)間：2023-12-29 18:21:34 瀏覽量：230次

你學(xué)會(huì)了嗎？

文章來源：優(yōu)設(shè)
ID：uisdcer
作者：優(yōu)設(shè)
編輯：卝生

編者按：在進(jìn)行 UI 設(shè)計(jì)的時(shí)候，很多小技巧能夠恰到好處地提升界面的設(shè)計(jì)視覺效果、用戶體驗(yàn)。這篇來自Mark Andrew 的文章梳理了 6 個(gè)實(shí)用性很強(qiáng)的 UI 效果提升小技巧，是系列文章的八篇，原文最早發(fā)布于 marcandrew.me 。

在創(chuàng)建實(shí)用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時(shí)候，我們大多只需要進(jìn)行有限度的微調(diào)，即可達(dá)到頗為不錯(cuò)的效果。在之前，我已經(jīng)撰寫了很多實(shí)用的 UI & UX 優(yōu)化小貼士（看完文章在文末獲?。@篇文章繼續(xù)增加 6 條實(shí)用的建議，一起來看看吧！

01

留白應(yīng)被視為最常見/實(shí)用的設(shè)計(jì)元素

不要把你的整個(gè)頁面都用信息給填滿，讓你的設(shè)計(jì)盡量更有呼吸感，而不會(huì)顯得擁擠。

留白其實(shí)和文本、圖片、配色一樣，應(yīng)當(dāng)視作為一個(gè)排版的元素，無論是在網(wǎng)頁還是在 APP 的UI界面當(dāng)中，它們都是一起協(xié)同來構(gòu)成版面，傳遞信息，給用戶帶來更好的體驗(yàn)。

而屏幕空間足夠充裕并不意味著你需要用信息填滿整個(gè)空間，使用留白合理地將信息劃分出優(yōu)先級(jí)，這一點(diǎn)在幾乎所有的設(shè)計(jì)里面都是通用的規(guī)則。

02

保持文本和圖像之間合適的對(duì)比度

在涉及到圖文混排或者圖文疊加的地方，前景的文本和背景的圖片之間的對(duì)比度控制也是一個(gè)常見的問題。尤其是在圖片的視覺信息比較多和混雜的時(shí)候，前景的文字很難確保整體的可讀性。

這個(gè)/時(shí)候，在文本和圖片之間添加一個(gè)深色半透明的疊加層，就能夠讓圖片和文本之間保持良好的對(duì)比度。

另外，這種設(shè)計(jì)還可以在更換圖片和文本情況下，合理地在深色和淺色之間切換，確保不同情況下的對(duì)比度。

03

控制好文本段落在垂直方向上的節(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í)候，我通常會(huì)讓段落標(biāo)題和上有正文段落之間的間距拉開，這樣能夠讓標(biāo)題和下方段落之間有更加清晰的關(guān)系，保留更好的垂直節(jié)奏感。這種思路延伸開來，可以根據(jù)需求做的更細(xì)致，但是總體上，就是為了提供更好的視覺層次結(jié)構(gòu)。

04

請(qǐng)使用x高度或 Il1 來進(jìn)行測(cè)試文本可讀性

我之前曾今介紹過類似的技巧，這次主要是迭代升級(jí)了這一測(cè)試方法。感謝 Jessica Hische 提供的 Il1 測(cè)試法，這個(gè)方法能夠讓字體可讀性測(cè)試更加準(zhǔn)確。

在進(jìn)行西文字體設(shè)計(jì)的時(shí)候，小寫x通常是作為字體設(shè)計(jì)的基準(zhǔn)，它和大寫字母的尺寸對(duì)比比例直接影響著字體的可讀性。

如果你選的字體的 x 高度特別高，那么在長(zhǎng)篇文章當(dāng)中，這樣的字體通常會(huì)有著更好的可讀性。

但是這種測(cè)試方法有點(diǎn)粗略。

而 Il1 測(cè)試方法也非常有用。

這個(gè)測(cè)試方法是使用3個(gè)不同的字母，大寫的字母i（I），小寫的L（l），以及數(shù)字 1。

在一套字體當(dāng)中，這3個(gè)字符在視覺上非常接近，測(cè)試中，3個(gè)字符越接近，那么在可讀性上，相對(duì)應(yīng)的也就越差。類似這樣的測(cè)試技巧還有很多，最典型的就是使用小寫字母A（a）和小寫字母G（g）來進(jìn)行對(duì)比：

可以明顯看出，在襯線字體中，a 和 g 有的時(shí)候更容易分辨。

05

根據(jù)文本塊的大小靈活調(diào)節(jié)行高

在版式設(shè)計(jì)當(dāng)中，如果想要保證體驗(yàn)足夠優(yōu)秀，并非所有地行高都是完全一樣的。在處理不同大小地文本塊地時(shí)候，最好根據(jù)不同段落本身地特征，來設(shè)置行高。（注意：行高通常指的上一行的字符底部到下一行的字符底部的距離）

對(duì)于大面積的文本，適當(dāng)?shù)卦黾有懈撸軌蜃屝兄g的辨識(shí)度變得更高，但是段落本身比較緊湊短小的時(shí)候，比如只有三四行，行寬也不大，這個(gè)時(shí)候適當(dāng)縮減行高，因?yàn)檫@樣不會(huì)帶來易讀性的問題。

06

文本內(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)上太差。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定