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

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

有手就會的 UI&UX 小技巧(第3篇)

發(fā)布時(shí)間：2024-02-28 12:21:00 瀏覽量：118次


本文共 2994 字，預(yù)計(jì)閱讀 8 分鐘
TCC 情報(bào)局的 第 191 篇 干貨分享2023 年的 第 20 篇

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


當(dāng)你在為項(xiàng)目創(chuàng)建高效、無障礙、美觀的UI界面時(shí)，有時(shí)候只需要一些小小的調(diào)整就可以快速改善你的設(shè)計(jì)。

在這篇文章中，我收集了一些易于投入實(shí)踐的小技巧，只需要付出一點(diǎn)點(diǎn)努力，就可以改善你的設(shè)計(jì)和用戶體驗(yàn)。



1.想要說得不那么正式？用全小寫吧。

1.Want to speak in a more informal tone? Try going all lowercase.


使用較大的字重和大寫字母會讓人感覺有點(diǎn)過于正式，而且有時(shí)會嘈雜。嘗試使用全小寫字母和更輕的字重。在設(shè)計(jì)某些項(xiàng)目時(shí)，這可以呈現(xiàn)出更非正式、友好的信息。



2.用字重、字號和顏色來表現(xiàn)文字層級

2.Use weight, size, and colour to indicate hierarchy within your type.


當(dāng)設(shè)計(jì)文字時(shí)，所有元素不需要總是喊著說“快看我，快看我”。它們需要一個(gè)合適均衡的層級結(jié)構(gòu)。只需要通過字重、字號和顏色的細(xì)微調(diào)節(jié)，就可以達(dá)到這個(gè)效果。這可以讓用戶在快速掃描后找到最重要的元素，避免過程中的出現(xiàn)疑惑。



3.深色背景上的亮文本？增加字重可讀性更佳

3.Light Text on dark? Fatten up that font-weight for the best legibility.


當(dāng)把深色文字放在亮色背景中時(shí)，你可以偶爾嘗試一下選較輕的字重。但是，當(dāng)情況反過來的時(shí)候，即亮色文本放在暗色背景時(shí)，你應(yīng)該考慮加重一點(diǎn)字重，特別是對于那些長篇幅的文本。以此來達(dá)到最佳的可讀性，并避免用戶的眼睛疲勞。



4.選擇合適的字體來創(chuàng)建正確情緒反應(yīng)

4.Create the right emotional response with your typeface choices.


嘗試為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶們都很聰明，他們有一種直覺，知道什么時(shí)候內(nèi)容在與他們交談，什么時(shí)候不是。選擇正確的字體是使你的內(nèi)容直接與他們對話的關(guān)鍵，且是在情感層面的。

（右邊的案例，用更加渾厚穩(wěn)重的字體，配合營造出“工作-生活”平衡的穩(wěn)重感）



5.如果你不得不使用多種字體，堅(jiān)持最多2個(gè)原則

5.If you (have to) use multiple typefaces, try to stick to the 2 max rule.


對我來說，只要有可能，我就會盡量堅(jiān)持只使用1種字體的原則。但是，如果項(xiàng)目實(shí)在需要（多種字體），我建議將這些字體進(jìn)行組合并控制數(shù)量最大為2。對于經(jīng)驗(yàn)欠缺的人來說，很好地組合字體是比較困難的。放輕松點(diǎn)，但不要因?yàn)槟憧梢约泳碗S意加另一種字體。最多使用2個(gè)，然后結(jié)合字重、字號和顏色，瞬時(shí)就可以為你的設(shè)計(jì)帶來視覺和諧。

（右邊的案例，控制字體數(shù)量最多2個(gè)，并調(diào)整字體屬性來達(dá)到視覺和諧）



6.全大寫字母+字母間距=更佳可讀性

6.All-Uppercase + Letter-Spacing = Better Legibility.


正在用全大寫字母處理短行文字？為這些字母增加間距是一個(gè)為用戶創(chuàng)造更佳可讀性的好方法。這樣做可以使單詞更容易閱讀和處理，因?yàn)樽帜傅膮^(qū)別更大。只需要略微增加字母之間的間距，就能提高可讀性，并為你的大寫字母字體增添一些亮點(diǎn)。



7.設(shè)計(jì)元素保持一致性

7.Be consistent with your design elements.


我們是習(xí)慣性的生物，總是期望產(chǎn)品以我們所熟悉的方式呈現(xiàn)。我們期望在瀏覽一個(gè)網(wǎng)站或者 app 時(shí)整體能夠保持一致，這也是一條需要執(zhí)行的基本設(shè)計(jì)原則。

在布局、圖標(biāo)、顏色和按鈕以及其他方面需要做到這樣。保持一致性，減少困惑，改善用戶體驗(yàn)。

（右邊的案例，圓角保持一致）



8.大方地使用留白

8.White Space. Use it generously


留白是負(fù)空間。但同樣的事物，也能有不同的意義。我的建議是，大方或適度地使用它，但是也要用好它。

在你的設(shè)計(jì)中添加留白是快速改進(jìn)它們的最簡單方法之一，讓你的作品有呼吸感，并看起來更優(yōu)雅。



9.為開頭段落設(shè)計(jì)風(fēng)格，吸引用戶

9.Style that opening paragraph, and draw the user in.


如果你在處理長篇幅的內(nèi)容，例如博客推送或文章，吸引讀者進(jìn)入內(nèi)容至關(guān)重要。要做到這點(diǎn)，開頭段落的外觀幾乎與內(nèi)容本身一樣重要。一些簡單的調(diào)整，諸如不同的字號、行高、字重和顏色，就可以有更好的第一印象。



10.為掃讀者設(shè)計(jì)，用短段落

10.Design for scanners. Use short paragraphs.


在處理長篇幅的內(nèi)容時(shí)，嘗試將段落變得簡潔會很實(shí)用。我們現(xiàn)在都是掃讀者，希望盡可能快地消化信息。盡可能用簡短、清晰的段落來呈現(xiàn)你的文案，是令你的信息更好地被用戶閱讀和消化的可靠方法。



11.定義調(diào)色板，在設(shè)計(jì)中創(chuàng)造統(tǒng)一性

11.Define a colour palette, and create uniformity in your designs.


想要創(chuàng)造出看起來更專業(yè)的UI界面？定義你的調(diào)色板！不要用大量的隨機(jī)顏色選擇來填充你的設(shè)計(jì)。從開始就創(chuàng)建一個(gè)好的調(diào)色板，并堅(jiān)持使用。這樣子可以避免（選擇顏色時(shí)）頭痛，為你的設(shè)計(jì)增添統(tǒng)一性。



12.用8pt網(wǎng)格系統(tǒng)統(tǒng)一布置你的圖標(biāo)

12.Lay out your icons consistently when using the 8pt Grid System.


（例如：16×16, 24×24, 32×32等）。只有偶爾，才并非如此。如果不是特殊情況，確保任何插入到你的設(shè)計(jì)中的圖標(biāo)，都要放在一個(gè)8pt網(wǎng)格值（例如24×24）的容器內(nèi)。這樣做可以讓你的圖標(biāo)在設(shè)計(jì)中得到一致的布局。

希望通過這些小技巧集，你能夠認(rèn)識到即使是設(shè)計(jì)中一些小小的調(diào)整，都可以對你和你的用戶產(chǎn)生很好的結(jié)果。

原文：https://www.marcandrew.me/ui-ux-micro-tips-8-bit-edition/
作者：Marc Andrew
譯者：藍(lán)建杭
審核：李澤慧
編輯：孫淑雅、李莉好
本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

內(nèi)容回顧：
第一篇文章：https://mp.weixin.qq.com/s/nDY67qGM-hSJoz1EgUnGYg
第二篇文章：https://mp.weixin.qq.com/s/lN9FLcm-wn-EikCyp_-iUQ?notreplace=true

往期精選文章：

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

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

案例研究｜康奈爾大學(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ǎo)手冊

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

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

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

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


- 設(shè)計(jì)師自習(xí)社區(qū) -

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


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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

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