激情六月丁香婷婷|亚洲色图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ā)布時間：2024-02-28 12:21:00 瀏覽量：118次


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

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


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

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



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

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


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



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

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


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



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

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


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



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

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


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

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



5.如果你不得不使用多種字體，堅持最多2個原則

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


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

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



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

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


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



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

7.Be consistent with your design elements.


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

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

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



8.大方地使用留白

8.White Space. Use it generously


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

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



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

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


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



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

10.Design for scanners. Use short paragraphs.


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



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

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


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



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

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


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

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

原文：https://www.marcandrew.me/ui-ux-micro-tips-8-bit-edition/
作者：Marc Andrew
譯者：藍建杭
審核：李澤慧
編輯：孫淑雅、李莉好
本文翻譯已獲得作者的正式授權(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

往期精選文章：

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

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

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

Web Vitals —— 谷歌的新一代 Web 性能體驗和質(zhì)量指標

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

案例研究｜一款為你帶來難忘體驗的美食 APP

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

如何做好用戶體驗項目？從一個好計劃開始

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

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

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


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

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


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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

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