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

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

UI&UX小技巧 (第4篇)

發(fā)布時(shí)間：2024-04-09 20:27:54 瀏覽量：204次

本文共 2152 字，預(yù)計(jì)閱讀 6 分鐘

TCC 情報(bào)局的 第 200 篇 干貨分享

2023 年的 第 29 篇


TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是張聿彤。在做界面設(shè)計(jì)時(shí)，往往細(xì)節(jié)決定成敗。好的細(xì)節(jié)往往可以起到“四兩撥千斤”的作用，讓你的設(shè)計(jì)檔次大幅提升。今天我們就來看看web設(shè)計(jì)中有哪些好用的小技巧吧～



1. 留白也是一種設(shè)計(jì)元素，用好它

1. Yup. Whitespace is a design element. So use it well.


不要過度堆砌你的設(shè)計(jì)，讓你的設(shè)計(jì)和用戶有“呼吸空間”。


留白是與排版、顏色和圖像同樣重要的設(shè)計(jì)元素，它可以清晰傳達(dá)你的網(wǎng)站或 app 的信息，并為用戶帶來更好的用戶體驗(yàn)。


如果你有很多的屏幕空間可用，并不代表你需要把每一寸空間都填滿。用好留白，就像其他的設(shè)計(jì)元素一樣。


（用好留白，不要讓每一寸空間都堆滿信息內(nèi)容）



2. 在淺色文本和圖片間保持合適的對(duì)比度

2. Maintain a suitable contrast ratio between light text and images.



始終要檢查淺色文本在較淺的圖片背景下是否清晰可讀。


有時(shí)候簡(jiǎn)單給你的文字加一個(gè)略微不透明的深色背景，就可以使這些元素保持一個(gè)很好的對(duì)比度。


這也使你可以在深色和淺色圖片之間快速切換，而不用去改變字體顏色。


（用略微深色的不透明背景，保持淺色文本和圖片的對(duì)比度，使文本更易讀）



3. 為你的標(biāo)題和正文打造完美的垂直韻律

3. Get the perfect Vertical Rhythm for your Headlines and Body Text.


當(dāng)想要在設(shè)計(jì)中實(shí)現(xiàn)出色的垂直韻律和文本元素之間穩(wěn)固的視覺層級(jí)，就需要將邊距處理得當(dāng)。


我看過許多的設(shè)計(jì)，特別是文章列表，標(biāo)題的上下頁邊距是相同的，這樣就導(dǎo)致了其與下面的正文失去了聯(lián)系。


這種情況下，我總是會(huì)給標(biāo)題留出更多的上邊距，而下邊距則稍短一些。這樣使得標(biāo)題與下方的正文的聯(lián)系更加緊密，列表中所有的文章也能保持良好的垂直韻律和視覺層級(jí)。


（利用上下邊距的差異，來打造垂直韻律和層級(jí)）



4. 根據(jù)使用的文本塊大小，調(diào)節(jié)合適的行高

4. Depending on the size of the text block you use, adjust your line-height accordingly.


并非所有的行高都是相同的。


當(dāng)處理不同大小的文字塊時(shí)，你需要根據(jù)實(shí)際找到最合適的行高。


例如，對(duì)于大段的文字，增加一些行高可以讓用戶的眼睛更容易分辨一行的結(jié)尾和下一行的開頭，可以在更大的段落中順暢移動(dòng)。


如果文本段落較短（只有3-4行），行的長(zhǎng)度也短，可以繼續(xù)用標(biāo)準(zhǔn)的行高或者略微減小一些，不用擔(dān)心可讀性問題。


調(diào)整行高，使其最適應(yīng)文本。


（大段落適當(dāng)增加行高，小段落適當(dāng)降低行高）



5. 保持文字調(diào)色板的簡(jiǎn)潔，只使用色調(diào)和陰影

5. Keep your text colour palette simple and just use Tints & Shades.


如果項(xiàng)目允許，沒必要認(rèn)為非得用許多不同的文本顏色才能很好地表達(dá)信息。


對(duì)有些人來說，尤其在沒有項(xiàng)目規(guī)范的情況下，找到能很好搭配的顏色組合是一件困難的事情。


你是可以嘗試使用主色調(diào)的淺色或深色變體。


（保持顏色的簡(jiǎn)潔，找到合適的顏色搭配不是一件易事）



6.用好親密性原則

6. Proximity. A key Design Principle. Use it well.


親密性原則是指彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組在一起。這一原則可以幫助你為用戶創(chuàng)造更清晰的用戶界面。


當(dāng)運(yùn)用親密性原則時(shí)，可以確保有關(guān)系的設(shè)計(jì)元素被放在一起，這又可以反過來表明它們之間的關(guān)系，有助于提升用戶在使用網(wǎng)站或 app 時(shí)的認(rèn)知速度。


（把有關(guān)系的元素放在一起，好讓它們被認(rèn)為是一組的）



7. 投影，用得含蓄點(diǎn)

7. Shadows. Go subtle or go home.


在設(shè)計(jì)中巧妙地應(yīng)用投影可以達(dá)到很強(qiáng)的視覺提示作用。


但記住，投影在現(xiàn)實(shí)世界中大部分時(shí)間是很難被注意到的。因此在你的界面中也應(yīng)該遵循并復(fù)現(xiàn)這種情況。


當(dāng)在界面中使用陰影時(shí)，請(qǐng)用得淡一些，用得含蓄一些，要不然寧肯不要使用。


（投影只要淡淡一些就足夠了）


希望以上一些小小的技巧可以幫助你認(rèn)識(shí)到，其實(shí)只要花一些小小的調(diào)整，就可以讓設(shè)計(jì)達(dá)到很好的效果。

原文：https://www.marcandrew.me/ui-ux-micro-tips-volume-nine/

作者：Marc Andrew

譯者：藍(lán)建杭

審核：李澤慧

編輯：韓碩

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

往期精選文章：

十個(gè)技巧幫助你設(shè)計(jì)一款在線學(xué)習(xí) APP

這些色彩心理學(xué)知識(shí)教你如何傳遞信息

案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計(jì)

Web Vitals —— 谷歌的新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)

網(wǎng)頁設(shè)計(jì)師能從日式美學(xué)中學(xué)到什么？

案例研究｜一款為你帶來難忘體驗(yàn)的美食 APP

如何制作打動(dòng)面試官的作品集，這里有一份完整的指導(dǎo)手冊(cè)

如何做好用戶體驗(yàn)項(xiàng)目？從一個(gè)好計(jì)劃開始

如何建立設(shè)計(jì)系統(tǒng)

如何把握不同層級(jí)用戶的需求：回歸本質(zhì)，打磨信息架構(gòu)

TCC 視野｜2021 年用戶體驗(yàn)設(shè)計(jì)趨勢(shì)分析


- 設(shè)計(jì)師自習(xí)社區(qū) -
TCC 設(shè)計(jì)情報(bào)局歡迎小伙伴加入，一起交流設(shè)計(jì)知識(shí)，了解全球設(shè)計(jì)資訊，鍛煉英文能力，發(fā)掘更多可能性～

添加小助手微信，備注「社群」，即可加入讀者群。

熱門課程推薦

熱門資訊

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

獲取驗(yàn)證碼
x

同學(xué)您好！

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