完整的 UI 術(shù)語(yǔ)表：所有設(shè)計(jì)師都應(yīng)該知道的 100 個(gè)術(shù)語(yǔ)

時(shí)間：2023-09-10 13:00:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-10 13:00:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

完整的 UI 術(shù)語(yǔ)表：所有設(shè)計(jì)師都應(yīng)該知道的 100 個(gè)術(shù)語(yǔ)：如果你想在 UI 中工作（或與 UI 設(shè)計(jì)師一起工作），你需要會(huì)說(shuō)這些語(yǔ)言。在我們的 UI 詞匯表中，下面匯編（并解釋了）100 個(gè)所有設(shè)計(jì)師都應(yīng)該知道的術(shù)語(yǔ)、短語(yǔ)和資源。

UI 設(shè)計(jì)本身就是一種語(yǔ)言。有很多有趣的術(shù)語(yǔ)和小眾流行語(yǔ)。整理了100 個(gè)所有設(shè)計(jì)師都應(yīng)該知道的最重要的 UI 術(shù)語(yǔ)、短語(yǔ)和資源。

1.無(wú)障礙設(shè)計(jì)

可訪問(wèn)性或可訪問(wèn)性設(shè)計(jì)可幫助具有各種能力的用戶與產(chǎn)品進(jìn)行交互。要實(shí)施無(wú)障礙設(shè)計(jì)，您必須為色盲、視覺(jué)障礙、聾啞或聽(tīng)力障礙者以及認(rèn)知障礙者進(jìn)行設(shè)計(jì)。

2. 手風(fēng)琴

在 UI 設(shè)計(jì)中，折疊式菜單是一種垂直堆疊項(xiàng)目的菜單，可讓用戶展開和折疊內(nèi)容。當(dāng)用戶單擊標(biāo)簽時(shí)，該部分會(huì)展開以顯示擴(kuò)展內(nèi)容。一次可以打開一個(gè)或多個(gè)標(biāo)簽，它可以幫助用戶快速瀏覽大量信息。

3.Adobe XD

Adobe XD是最流行的UX 和 UI 設(shè)計(jì)工具之一。作為 Adob??e Creative Cloud 套件的一部分，它是一個(gè)基于矢量的設(shè)計(jì)工具，用于創(chuàng)建線框、原型、動(dòng)畫和 UI 設(shè)計(jì)。

4.對(duì)齊

對(duì)齊是用于創(chuàng)建結(jié)構(gòu)和可讀性的設(shè)計(jì)原則。它建立秩序并幫助引導(dǎo)人們完成您的設(shè)計(jì)。

5.動(dòng)畫

在 UI 術(shù)語(yǔ)中，動(dòng)畫是向任何 UI 元素添加動(dòng)作以改善產(chǎn)品交互性的行為。動(dòng)畫可用于標(biāo)記進(jìn)度條中的不同階段，或者它們可以簡(jiǎn)單地用于為徽標(biāo)添加有趣和運(yùn)動(dòng)的元素。

6. 上升者

在排版中（在下面第 90 中介紹），字母寫在基線上。大多數(shù)字母會(huì)達(dá)到 x 高度，我們?cè)诘?100 中對(duì)此進(jìn)行了解釋，但超過(guò)該高度的字母稱為上升高度。這些字母包括 b、d、f、h、i、j、k、l 和 t。

7. 基線

如數(shù)字 6 和 24 所述，基線是文本位于頁(yè)面上的不可見(jiàn)線。在 UI 設(shè)計(jì)中，基線是文本和任何其他元素之間的重要測(cè)量工具。

8. 便當(dāng)菜單

便當(dāng)菜單以將飯菜打包成整齊的部分的日本午餐盒命名，是一種帶有網(wǎng)格項(xiàng)目的菜單。它一次提供多個(gè)項(xiàng)目的概覽。

9.面包屑

繼續(xù)食物主題，面包屑是一個(gè)導(dǎo)航系統(tǒng)，它顯示用戶當(dāng)前在網(wǎng)站中的位置。面包屑通常位于頁(yè)面的頂部，讓用戶可以看到他們當(dāng)前的位置以及他們到達(dá)那里所采取的步驟。由于這些是可點(diǎn)擊的鏈接，用戶可以返回閱讀或編輯他們填寫的任何信息。 例如，如果您正在瀏覽 ASOS 服裝網(wǎng)站，您可能會(huì)看到顯示您所在位置（以及您是如何獲得的）的鏈接軌跡那里）如下： 首頁(yè) > 男裝 > 運(yùn)動(dòng)裝 > 鞋子

10.斷點(diǎn)

斷點(diǎn)是需要對(duì)布局進(jìn)行特定更改的屏幕尺寸的預(yù)定范圍。

11. 按鈕

按鈕通過(guò)文本、圖像或兩者來(lái)指示用戶采取行動(dòng)。

12. 號(hào)召性用語(yǔ)/CTA

號(hào)召性用語(yǔ)按鈕（或 CTA）鼓勵(lì)用戶在網(wǎng)站或應(yīng)用程序上執(zhí)行特定操作。例如：注冊(cè)、立即預(yù)訂、訂閱。CTA 按鈕作為轉(zhuǎn)換目標(biāo)存在，鼓勵(lì)用戶購(gòu)買、消費(fèi)或注冊(cè)產(chǎn)品或服務(wù)。

13. 卡片

卡片將相關(guān)內(nèi)容并排分組，以便用戶無(wú)需滾動(dòng)列表即可找到他們正在尋找的信息。正方形或長(zhǎng)方形，它們具有名片的外觀，可以包括按鈕、文本和圖像。

14. 輪播/圖片輪播

很多人都會(huì)熟悉圖像輪播，因?yàn)?LinkedIn 和 Instagram 使用這種格式來(lái)顯示多張圖像。但是，這些圖像是超鏈接的，因此用戶可以瀏覽一組項(xiàng)目/圖像并為特定操作選擇一個(gè)。這是另一種節(jié)省屏幕空間的巧妙方法，因?yàn)樗试S在一個(gè)部分中顯示多個(gè)項(xiàng)目。

15. 復(fù)選框

復(fù)選框允許用戶從屏幕上的框中“選中”或“取消選中”項(xiàng)目。每個(gè)項(xiàng)目單獨(dú)操作，但用戶通常可以檢查多個(gè)項(xiàng)目。您通常會(huì)在申請(qǐng)表或調(diào)查表上看到一個(gè)復(fù)選框。

16. 分組

設(shè)計(jì)師使用分塊將大塊信息、圖像或文本分解成更小的塊，使其更容易理解。當(dāng)項(xiàng)目或信息在網(wǎng)頁(yè)或應(yīng)用程序的同一區(qū)域中“分組”時(shí)，可以認(rèn)為它們是相關(guān)的或連接的。

17.調(diào)色板

調(diào)色板是新設(shè)計(jì)的顏色的小組合。UI設(shè)計(jì)師將使用這些來(lái)直觀地代表品牌，視覺(jué)上令人愉悅并傳達(dá)不同的信息。例如，紅色可用于警告或錯(cuò)誤，綠色可用于成功。

18. 顏色模型

顏色模型是一種有助于使用數(shù)字或字母描述顏色的系統(tǒng)。最流行的 UI 設(shè)計(jì)顏色模型是：RGB – 紅色、綠色、藍(lán)色HSL – 色相、飽和度、亮度HSV/HSB – 色相、飽和度、值或亮度


HEX 是六個(gè)數(shù)字和字母的簡(jiǎn)寫組合，用于表示 RGB 的許多不同值。例如，星巴克品牌中使用的綠色是#00704A，可口可樂(lè)品牌中使用的紅色是#F40009。

19.評(píng)論框

評(píng)論框是當(dāng)今大多數(shù)界面上的常見(jiàn)功能。它們用于顯示用戶的評(píng)論和反饋，按時(shí)間順序或流行順序運(yùn)行。

20. 容器

容器是一種 UI 元素，旨在根據(jù)用戶屏幕的大小包含一定寬度的頁(yè)面元素。手風(fēng)琴是容器的一個(gè)例子。

21. 柜臺(tái)

在排版中，我們?cè)谙旅娴牡?90 中進(jìn)行了解釋，計(jì)數(shù)器是字母的完全或部分被字母或符號(hào)包圍的區(qū)域。該區(qū)域形成“碗”形。 封閉計(jì)數(shù)器是完全封閉的字母，它們包括：A、B、D、O、P、Q、R、a、b、d、e、g、o、p 和 q。打開的計(jì)數(shù)器是部分關(guān)閉的字母，它們包括但不限于：c、f、h、s 。

22. 評(píng)審

雖然有些人可能害怕任何形式的批評(píng)，但評(píng)審讓設(shè)計(jì)師、研究人員和內(nèi)容策略師走到一起，提供建設(shè)性的評(píng)審來(lái)改進(jìn)產(chǎn)品。產(chǎn)品的創(chuàng)建者將與團(tuán)隊(duì)的其他成員討論設(shè)計(jì)，然后他們會(huì)提出問(wèn)題以進(jìn)一步探索設(shè)計(jì)。兩種最常見(jiàn)的評(píng)審形式是：沉默——在白板上使用便利貼，您的同事會(huì)將反饋寫成問(wèn)題。例如，如果有人對(duì)按鈕的顏色不滿意，他們可以寫“我們可以試試其他顏色選項(xiàng)嗎？” 在這種形式下，每個(gè)人都有機(jī)會(huì)發(fā)表自己的看法。常規(guī)的——在小組環(huán)境中，團(tuán)隊(duì)將坐下來(lái)討論產(chǎn)品的設(shè)計(jì)過(guò)程。然而，這種評(píng)審有時(shí)會(huì)跑題，有些人可能沒(méi)有機(jī)會(huì)發(fā)言。

23. 日期或時(shí)間選擇器

日期或時(shí)間選擇器允許用戶從數(shù)字日歷或時(shí)鐘中選擇日期和/或時(shí)間。然后將選定的日期或時(shí)間格式化并放入系統(tǒng)。這方面的一個(gè)日常示例是在餐廳預(yù)訂餐桌。單擊您選擇的日期和時(shí)間后，您的請(qǐng)求將被發(fā)送到餐廳進(jìn)行確認(rèn)。

24. 后裔

第 6 的反面。在排版中，下降是位于 x 高度以下和基線以下的字母。這些字母包括 q、g、p、y 和 j。

25. 設(shè)計(jì)模式

UX 和 UI 設(shè)計(jì)模式是可重復(fù)、可重用的設(shè)計(jì)組件，用于解決用戶經(jīng)常遇到的可用性問(wèn)題。例如，面包屑導(dǎo)航元素（我們的 UI 詞匯表中的編號(hào) 9）是一種設(shè)計(jì)模式，用于向用戶展示從主頁(yè)到他們當(dāng)前正在查看的頁(yè)面的路徑。

26. 設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)是設(shè)計(jì)團(tuán)隊(duì)的通用信息來(lái)源——在開始新設(shè)計(jì)項(xiàng)目時(shí)要遵守的設(shè)計(jì)資產(chǎn)、指南、約束和最佳實(shí)踐的集合。 支付寶、微信、蘋果、 Google都有自己的設(shè)計(jì)系統(tǒng)畫布，人們可以訪問(wèn)和使用。

27. 設(shè)計(jì)思維

設(shè)計(jì)思維過(guò)程包括五個(gè)階段：移情（與用戶）、定義（問(wèn)題）、構(gòu)思（潛在解決方案）、原型和測(cè)試。設(shè)計(jì)思維用于解決特別棘手的 UI 問(wèn)題。

28. 菜單圖標(biāo)

菜單圖標(biāo)類似于漢堡菜單，我們?cè)诘?43 號(hào)對(duì)其進(jìn)行了更詳細(xì)的解釋。菜單由相互堆疊的三行組成，但每行的長(zhǎng)度遞減。最上面的線最長(zhǎng)，中間的線更短，下面的第三條線更短。

29. 追波

Dribbble是一個(gè)社交媒體平臺(tái)，專注于建立強(qiáng)大的設(shè)計(jì)師社區(qū)，無(wú)論是在尋找靈感還是合作。這是與其他設(shè)計(jì)師聯(lián)系或?qū)ふ覍?duì)自己工作的反饋的很好資源。

30.下拉/下拉列表

??下拉列表類似于單選按鈕，我們?cè)?73 號(hào)中介紹過(guò)，但它們可以節(jié)省大量屏幕空間。當(dāng)用戶從列表中選擇一個(gè)項(xiàng)目并且菜單下拉以顯示更多信息時(shí)，會(huì)發(fā)生下拉操作。這些列表可能需要一個(gè)指令，例如“單擊此處”，以幫助用戶導(dǎo)航空間。

31. 下拉按鈕

下拉按鈕是下拉列表中用于顯示項(xiàng)目列表的可點(diǎn)擊按鈕。

32. 緩和

緩動(dòng)（或緩入緩出）是動(dòng)畫 UI 元素緩慢而漸進(jìn)的移動(dòng)。具體來(lái)說(shuō)，緩動(dòng)是指動(dòng)畫的運(yùn)動(dòng)以及它如何逐漸開始運(yùn)動(dòng)，而不是搖晃開始或突然結(jié)束。

33. PS

PS是Adobe公司開發(fā)的一款名叫Adobe photoshop的圖片編輯軟件的簡(jiǎn)稱。PhotoShop可以進(jìn)行圖片美化，尺寸修改,界面設(shè)計(jì)等。

34. Figma

Figma是一個(gè)基于瀏覽器的界面設(shè)計(jì)工具，可實(shí)現(xiàn)快速設(shè)計(jì)和原型制作以及流暢的協(xié)作工作流程。它是最流行的設(shè)計(jì)工具之一，你很難找到不使用它的 UI 或 UX 設(shè)計(jì)師。

35. AE

AE是 After Effects的簡(jiǎn)稱,是一款圖形視頻處理軟件,我們可以用AE進(jìn)行多種影像的合成,制作動(dòng)畫效果、制作出優(yōu)美的視覺(jué)效果。

36. 字體

字體是字體或文本的特定大小、粗細(xì)和樣式的名稱。我們?cè)谙旅娴牡?89 中更詳細(xì)地介紹了字體，但它很容易與字體混淆。這是理解兩者之間區(qū)別的簡(jiǎn)單方法：Helvetica 是一種字體，而 Helvetica Bold 或 Helvetica Italia 是字體。

37. 表格

表單是我們生活中的常規(guī)功能，但由于自動(dòng)填充功能，表單的工作變得更加容易。與現(xiàn)實(shí)生活一樣，表單由希望提交信息的用戶填寫。一個(gè)常見(jiàn)的例子是當(dāng)您在線訂購(gòu)商品并在運(yùn)輸表格中填寫您的地址時(shí)。

38. 表單域狀態(tài)

數(shù)字表單應(yīng)該改變它們的狀態(tài)或外觀，以便用戶在遇到它們時(shí)知道該怎么做。字段狀態(tài)可以有以下形式：原始- 這是用戶與其交互之前的默認(rèn)狀態(tài)

On hover – 這是當(dāng)用戶的光標(biāo)懸停在表單域上方時(shí)發(fā)生的狀態(tài)。用戶不會(huì)在移動(dòng)、觸摸或滑動(dòng)設(shè)備上看到此選項(xiàng)

選中/聚焦- 當(dāng)用戶與表單交互時(shí)，此狀態(tài)會(huì)告訴他們輸入信息。它應(yīng)該在視覺(jué)上與其他表單域狀態(tài)不同。例如，讓鍵盤出現(xiàn)在字段中或讓屏幕完全聚焦在該字段上。

已禁用– 此狀態(tài)讓用戶知道此元素當(dāng)前不可用于交互。它會(huì)告訴用戶他們要么需要先完成其他事情，要么這個(gè)選項(xiàng)不可用。例如，當(dāng)您在網(wǎng)上訂餐但未填寫收貨地址時(shí)，您可能無(wú)法填寫付款詳情。

內(nèi)聯(lián)驗(yàn)證- 如果用戶已成功或未成功完成某個(gè)字段，此狀態(tài)通常會(huì)顯示為綠色勾號(hào)或紅色 X。例如，如果您輸入了信用卡詳細(xì)信息但信息錯(cuò)誤，則會(huì)提示您輸入您的信息正確。

39. 全棧設(shè)計(jì)師

全棧設(shè)計(jì)師是指具有承擔(dān)產(chǎn)品設(shè)計(jì)和開發(fā)過(guò)程的所有“堆?！保ɑ?qū)樱┑募寄芎蛯I(yè)知識(shí)的設(shè)計(jì)師。雖然大多數(shù)設(shè)計(jì)師只專注于一個(gè)領(lǐng)域，例如 UX 設(shè)計(jì)或 UI 設(shè)計(jì)，但全棧設(shè)計(jì)師可以從事 UX 設(shè)計(jì)、UI 設(shè)計(jì)、交互設(shè)計(jì)甚至前端開發(fā)。

40.格式塔原則

格式塔原則是一組心理學(xué)定律，描述了我們的大腦如何組織和解釋視覺(jué)數(shù)據(jù)。格式塔原則可用于為設(shè)計(jì)決策提供信息并塑造用戶與產(chǎn)品的交互。例如，鄰近法則指出，位置靠近的元素似乎比距離較遠(yuǎn)的元素更相關(guān)。如果您根據(jù)鄰近法則設(shè)計(jì)網(wǎng)站，您會(huì)將相關(guān)元素更緊密地組合在一起。

接近度：彼此靠近的元素被認(rèn)為比距離較遠(yuǎn)的元素更密切

相關(guān)：相似的元素被認(rèn)為比不同的元素更相關(guān)。形狀、比例、方向和顏色都有助于使元素看起來(lái)相似。連續(xù)性：當(dāng)元素被放置在一條直線或軟曲線中時(shí)，它們被認(rèn)為比那些隨機(jī)排列的元素更相關(guān)。當(dāng)內(nèi)容流向某個(gè)方向時(shí)，同樣的概念也適用。

連接性：當(dāng)我們?cè)诿摴?jié)或不完整的對(duì)象中看到連接時(shí)。一個(gè)很好的例子是在實(shí)際連接點(diǎn)之前識(shí)別連接點(diǎn)圖片中的圖像。

閉合：當(dāng)我們查看復(fù)雜的視覺(jué)元素時(shí)，我們自然會(huì)尋找單一或可識(shí)別的模式。換句話說(shuō)，我們填補(bǔ)了我們看不到的空白。我們不需要查看徽標(biāo)中的每個(gè)元素來(lái)識(shí)別它屬于哪個(gè)公司或品牌。這方面的例子包括星巴克、Adobe 或 NBC 的徽標(biāo)。

41. 網(wǎng)格

在 UI 設(shè)計(jì)中，網(wǎng)格是一種布局約束，用于確定 UI 元素在屏幕或頁(yè)面上的位置。作為有效設(shè)計(jì)系統(tǒng)的基礎(chǔ)，它們使用列和行為布局帶來(lái)秩序，并有助于保持一致性并消除任何錯(cuò)誤空間。它使圍繞尺寸和空間的決策過(guò)程變得更快、更容易。

這些是不同網(wǎng)格類型的標(biāo)準(zhǔn)數(shù)字： 臺(tái)式機(jī)：12 列、平板電腦：8 列、移動(dòng)設(shè)備：4 列、可穿戴設(shè)備：2 列

42. 排水溝

排水溝是網(wǎng)格中列之間的垂直條，用于防止元素相互碰撞。

43. 漢堡菜單

三個(gè)等長(zhǎng)的水平線堆疊在一起，漢堡菜單看起來(lái)像 - 但嘗起來(lái)不像 - 漢堡包。這個(gè)非常常用的圖標(biāo)通常位于應(yīng)用程序的頂部角落。單擊后，它會(huì)像抽屜一樣打開，顯示多個(gè)導(dǎo)航鏈接的列表。

44.層次結(jié)構(gòu)

層次結(jié)構(gòu)是一種 UI 設(shè)計(jì)原則，用于根據(jù)信息的重要性以不同的強(qiáng)調(diào)級(jí)別呈現(xiàn)信息。這樣做有助于引導(dǎo)用戶瀏覽網(wǎng)頁(yè)或應(yīng)用程序。

45. 圖標(biāo)

有許多圖像可以作為普遍理解的符號(hào)。圖標(biāo)是原始圖像的一個(gè)非常基本的版本，可幫助用戶瀏覽網(wǎng)頁(yè)或應(yīng)用程序。通常超鏈接，它們?cè)诓皇褂萌魏挝谋镜那闆r下傳達(dá)內(nèi)容或提示操作。一個(gè)明顯的例子是購(gòu)物車圖標(biāo)，它告訴您您在網(wǎng)上商店購(gòu)買了哪些商品。

46. 信息組件

在 UI 設(shè)計(jì)中，信息組件是告訴用戶正在發(fā)生什么的元素。雖然我們?cè)谠~匯表的其他地方詳細(xì)介紹了這些元素，但工具提示、圖標(biāo)、進(jìn)度條、通知、消息框和模式窗口都是信息組件的示例。

47.輸入控制

輸入控件是在任何界面上使用的交互元素。這些包括復(fù)選框、單選按鈕、下拉列表、列表框、按鈕、切換、文本字段和日期字段。

48. 輸入欄

相當(dāng)不言自明，輸入字段是用戶可以將內(nèi)容輸入系統(tǒng)的地方。表單是最常見(jiàn)的示例，但搜索欄是我們每小時(shí)使用的輸入字段的示例。

49. 站酷

站酷(http://www.zcool.com.cn),聚焦了非常多的優(yōu)秀設(shè)計(jì)創(chuàng)意從業(yè)者、愛(ài)好者，提供學(xué)習(xí)、展示、交流、就業(yè)、交易的國(guó)內(nèi)設(shè)計(jì)師平臺(tái)。

50. 烤肉串菜單

UI 烤肉串菜單不僅僅是一個(gè)深夜菜單，它由三個(gè)垂直點(diǎn)組成，代表一組分組選項(xiàng)供用戶導(dǎo)航。不要與我們?cè)?58 號(hào)中解釋的肉丸菜單混淆。

51. 行高

行高是文本行上方和下方的距離。當(dāng)空間太多時(shí)，內(nèi)容可能會(huì)顯得不連貫，而空間太小，則可能很難閱讀。

55. 安全間距

當(dāng)人們談?wù)撨吘鄷r(shí)，他們談?wù)摰氖俏挥诰W(wǎng)格左右兩側(cè)的區(qū)域，我們?cè)谏厦娴牡?41 條中對(duì)此進(jìn)行了解釋。

56. UI中國(guó)

國(guó)內(nèi)具有影響力的UI設(shè)計(jì)平臺(tái)之一。

57. 肉丸菜單

與烤肉串菜單類似，肉丸菜單是一組三個(gè)水平點(diǎn)。當(dāng)用戶點(diǎn)擊這些點(diǎn)時(shí)，會(huì)顯示更多選項(xiàng)。

58.消息框

消息框是一個(gè)彈出的小窗口，向用戶提供信息并要求他們?cè)谶M(jìn)入下一步之前采取行動(dòng)。一個(gè)很好的例子是，如果您正在從手機(jī)中刪除一個(gè)應(yīng)用程序，并且會(huì)彈出一條小消息以確認(rèn)您是否確實(shí)要?jiǎng)h除它。

59. 模態(tài)

消息框也稱為模式窗口，它們的工作方式相同。

60.情緒板

情緒板本質(zhì)上是設(shè)計(jì)作品中圖像、文本和對(duì)象樣本的拼貼。它們是用于產(chǎn)品頭腦風(fēng)暴階段的視覺(jué)呈現(xiàn)。

61. 導(dǎo)航組件

導(dǎo)航組件是允許用戶與您的產(chǎn)品交互和使用的元素。面包屑、滑塊、搜索字段、分頁(yè)、滑塊、標(biāo)簽和圖標(biāo)都是導(dǎo)航組件的示例。它們讓用戶知道他們?cè)谀睦?，并幫助他們到達(dá)下一個(gè)想要的位置。

62. 通知

通知是我們生活中的常規(guī)功能。在應(yīng)用程序或網(wǎng)頁(yè)中使用時(shí)，通知會(huì)在用戶看到新內(nèi)容時(shí)提醒用戶，例如新消息、已完成的任務(wù)或發(fā)生錯(cuò)誤。它們可以顯示為點(diǎn)、標(biāo)志、感嘆號(hào)——任何東西。

63. Axure

Axure是一款原型設(shè)計(jì)工具,可以用動(dòng)畫效果表現(xiàn)出清晰的內(nèi)容。

64. 填充

填充是網(wǎng)格列內(nèi)的間距，它就像邊緣周圍的墊子一樣。填充物在設(shè)計(jì)中允許更多的呼吸空間——奢侈品牌利用這一點(diǎn)——但這樣做，你可以減少內(nèi)容。

65. 分頁(yè)

通過(guò)在不同頁(yè)面之間劃分內(nèi)容，分頁(yè)讓讀者知道他們?cè)谀睦?，同時(shí)允許他們?cè)陧?yè)面之間跳過(guò)或按順序閱讀。

66.加號(hào)按鈕

通常形狀像加號(hào)，加號(hào)按鈕表示可以將新內(nèi)容添加到數(shù)字產(chǎn)品中。例如，在您的電話通訊錄中，加號(hào)按鈕表示您可以將新人添加到您的電話簿中。在 Spotify 上，加號(hào)按鈕意味著您可以將新歌曲添加到播放列表中。在某些情況下，單擊加號(hào)按鈕將打開一個(gè)模式窗口以創(chuàng)建新內(nèi)容。

67.主要按鈕和次要按鈕

如果屏幕上有多個(gè) CTA（在數(shù)字 12 中說(shuō)明），主按鈕會(huì)讓我們知道哪個(gè)操作最重要。次要按鈕仍然是一個(gè)重要的 CTA，但不如主要按鈕重要。它應(yīng)該在視覺(jué)上不占優(yōu)勢(shì)，并且不應(yīng)該與主要的圖像或外觀發(fā)生沖突。

68. Principle

Principle for Mac是一款易于使用的設(shè)計(jì)軟件，用于創(chuàng)建動(dòng)畫和交互元素。

69. 進(jìn)度條

進(jìn)度條用于直觀地告訴用戶他們?cè)诙嗖襟E過(guò)程中的位置。它們通常用于在線商店的結(jié)賬，告訴用戶在他們完全購(gòu)買商品之前還剩下多少階段。

70. 原型

原型是最終產(chǎn)品將（或可能）看起來(lái)像的模擬或模型。UX 設(shè)計(jì)師創(chuàng)建原型以收集反饋并改進(jìn)他們的設(shè)計(jì)，然后再將其推向開發(fā)。您可以在本指南中了解有關(guān)原型制作和一些最流行的原型制作工具的更多信息。

71.ProtoPie

ProtoPie是一款靈活而強(qiáng)大的原型制作工具，因其易于使用的界面和幾乎不存在的學(xué)習(xí)曲線而受到設(shè)計(jì)界的好評(píng)。

72. 單選按鈕

單選按鈕是小的圓形按鈕，用于允許用戶一次選擇一個(gè)項(xiàng)目。這些可能與復(fù)選框混淆，復(fù)選框允許用戶一次單擊多個(gè)項(xiàng)目。

73.響應(yīng)式設(shè)計(jì)

響應(yīng)式設(shè)計(jì)可確保您的設(shè)計(jì)在不同的屏幕尺寸上準(zhǔn)確顯示。無(wú)論是在臺(tái)式電腦、平板電腦還是智能手機(jī)上查看，響應(yīng)式設(shè)計(jì)的網(wǎng)站都會(huì)看起來(lái)很棒。

74. 掃描模式

在規(guī)劃網(wǎng)頁(yè)或應(yīng)用程序的布局時(shí)，設(shè)計(jì)人員必須仔細(xì)選擇重要文本或圖像的位置，以適應(yīng)讀者的“掃描”風(fēng)格。雅各布尼爾森根據(jù)眼球追蹤數(shù)據(jù)進(jìn)行了一項(xiàng)研究，得出的結(jié)論是人們通常不閱讀網(wǎng)格，但他們會(huì)掃描它。要記住的兩種掃描模式是：

F 模式– 通過(guò)水平掃描頁(yè)面并從左到右、從后到左、從下到左到右閱讀，用戶以 F 形閱讀。

Z 模式——通過(guò)從左到右、對(duì)角線向下、從左到右掃描頁(yè)面，用戶以鋸齒形或 Z 形閱讀。

75. 搜索欄

搜索字段允許用戶鍵入關(guān)鍵字、短語(yǔ)或查詢來(lái)搜索索引并找到最相關(guān)的結(jié)果。搜索字段通常是單行文本框——有時(shí)里面有一個(gè)放大鏡圖像——并且它們帶有一個(gè)隨附的搜索按鈕。

76.分享按鈕

共享按鈕用于在外部向其他社交網(wǎng)絡(luò)帳戶共享頁(yè)面或產(chǎn)品。每個(gè)社交網(wǎng)絡(luò)帳戶都由其自己易于識(shí)別的圖標(biāo)表示。

77. 側(cè)邊欄

側(cè)邊欄可以是可見(jiàn)的或隱藏的，它在網(wǎng)頁(yè)或應(yīng)用程序的一側(cè)顯示導(dǎo)航操作或內(nèi)容的菜單。

78.Sketch

Sketch是一個(gè)矢量圖形編輯器，用于繪圖、線框圖、原型制作和設(shè)計(jì)交接——基本上是您將設(shè)計(jì)變?yōu)楝F(xiàn)實(shí)所需的一切。它是一個(gè)強(qiáng)大而靈活的 UX 和 UI 設(shè)計(jì)平臺(tái)，專為協(xié)作設(shè)計(jì)而構(gòu)建。長(zhǎng)期以來(lái)，它一直被認(rèn)為是行業(yè)標(biāo)準(zhǔn)工具，非常適合初學(xué)者和高級(jí)設(shè)計(jì)師。

79. 滑塊控件

滑塊允許用戶設(shè)置或更改值。一個(gè)非常常見(jiàn)的例子是，當(dāng)您搜索度假住宿時(shí)，您可以設(shè)置您的價(jià)格范圍。另一個(gè)示例是更改手機(jī)屏幕上的亮度級(jí)別。

80.步進(jìn)器

步進(jìn)器與滑塊非常相似，因?yàn)樗鼈冊(cè)试S用戶調(diào)整值。但是，步進(jìn)器僅允許用戶更改預(yù)定義數(shù)量的值。

81. 標(biāo)記

標(biāo)簽是用戶在同一類別中查找內(nèi)容（如博客文章）的一種簡(jiǎn)便方法。標(biāo)簽充當(dāng)標(biāo)簽，使用相關(guān)關(guān)鍵字對(duì)內(nèi)容進(jìn)行分類，以便用戶可以找到他們正在尋找的內(nèi)容。

82. 標(biāo)簽欄

標(biāo)簽欄出現(xiàn)在移動(dòng)應(yīng)用程序的底部，它們使用易于區(qū)分的圖標(biāo)告訴用戶他們?cè)谀睦?。它還允許用戶在應(yīng)用程序的不同部分之間來(lái)回移動(dòng)。

83. 文本字段

文本字段非常簡(jiǎn)單，允許用戶輸入文本。在表格或問(wèn)卷中使用，用戶可以輸入單行或多行文本。

84. 拇指可達(dá)性

很容易記住作為經(jīng)驗(yàn)法則。人們?cè)谑褂檬謾C(jī)時(shí)，通常只用拇指即可操作。人們無(wú)法將拇指伸到屏幕的頂部或中間，因此設(shè)計(jì)師需要考慮圍繞此放置屏幕上的交互元素。

屏幕的左上角是拇指難以觸及的，而左下角則容易。屏幕的右下角和中心是可行的，但并不理想。

85. 工具提示

當(dāng)用戶將鼠標(biāo)懸停在某個(gè)項(xiàng)目上時(shí)，會(huì)出現(xiàn)一個(gè)工具提示來(lái)進(jìn)一步解釋它。例如，當(dāng)在線商店詢問(wèn)您的 CVV 號(hào)碼時(shí)，通常會(huì)出現(xiàn)一個(gè)工具提示，告訴您在哪里可以找到信用卡或借記卡上的 CVV 號(hào)碼。

86. 切換

切換按鈕就像一個(gè)開關(guān)，允許用戶在兩??種狀態(tài)之間更改設(shè)置。例如，可以在手機(jī)設(shè)置上使用撥動(dòng)開關(guān)來(lái)打開或關(guān)閉 Wi-Fi 或藍(lán)牙連接。

87.類型

類型是屏幕上任何文本或字母的基本描述。

88. 字體

字體是刻字的設(shè)計(jì)集。它可以在大小、重量、坡度、寬度等方面有所不同。Times、Arial 和 Sans Serif 都是字體的例子。

89. 排版

很容易與字體混淆，排版是刻字本身的藝術(shù)。它專門指字母的排列和樣式。設(shè)計(jì)師必須選擇對(duì)用戶來(lái)說(shuō)既清晰又具有視覺(jué)吸引力的排版。

90. 墨刀

墨刀是一款在線原型設(shè)計(jì)與協(xié)同工具，借助墨刀，產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)、銷售、運(yùn)營(yíng)及創(chuàng)業(yè)者等，能夠搭建為產(chǎn)品原型，演示項(xiàng)目效果。

91. 用戶界面

用戶界面（UI）是人與計(jì)算機(jī)之間的交互點(diǎn)。它包含用戶與數(shù)字產(chǎn)品交互所需的所有功能：輸入控件 使用戶能夠輸入信息N導(dǎo)航元素允許用戶從一個(gè)點(diǎn)移動(dòng)到下一個(gè)點(diǎn) 為用戶提供有價(jià)值信息的 信息組件容器組將內(nèi)容分成有意義的部分。UI設(shè)計(jì)師負(fù)責(zé)創(chuàng)建用戶友好且美觀的界面。

92. 用戶界面設(shè)計(jì)

UI設(shè)計(jì)是設(shè)計(jì)用戶界面的過(guò)程。用戶界面是人與計(jì)算機(jī)之間的交互點(diǎn)。用戶界面設(shè)計(jì)關(guān)注最終用戶對(duì)數(shù)字產(chǎn)品的外觀、感覺(jué)和行為方式。良好的 UI 是創(chuàng)造令人愉悅的用戶體驗(yàn)的一部分，UX 和 UI 設(shè)計(jì)師緊密合作。

93. 用戶界面元素

UI 元素是應(yīng)用程序和網(wǎng)站設(shè)計(jì)中使用的構(gòu)建塊。當(dāng)您使用網(wǎng)站或應(yīng)用程序時(shí)，您會(huì)遇到按鈕、表單、菜單、下拉列表、圖像輪播等。這些都是 UI 元素的示例。

94. 用戶體驗(yàn)

UX 代表“用戶體驗(yàn)”，它基本上描述了用戶在使用產(chǎn)品或服務(wù)時(shí)的感受。好的用戶體驗(yàn)是輕松愉快的，而糟糕的用戶體驗(yàn)是復(fù)雜的、令人困惑的和令人沮喪的。

95. 用戶體驗(yàn)設(shè)計(jì)

UX 設(shè)計(jì)是設(shè)計(jì)上述第 95 條中解釋的這些體驗(yàn)的過(guò)程。它涉及識(shí)別和理解特定的用戶問(wèn)題，并設(shè)計(jì)產(chǎn)品或服務(wù)以以用戶為中心的方式解決問(wèn)題。

96. 用戶體驗(yàn)

UXPin是一種 UX 和 UI 工具，一個(gè)端到端平臺(tái)，能夠提供精美的交互式原型，無(wú)需編碼技能。

97. 視覺(jué)設(shè)計(jì)

視覺(jué)設(shè)計(jì)考慮了應(yīng)用程序或網(wǎng)站的美學(xué)。視覺(jué)設(shè)計(jì)和 UI 設(shè)計(jì)之間有很大的重疊，但一個(gè)常見(jiàn)的區(qū)別是視覺(jué)設(shè)計(jì)師會(huì)考慮整體視覺(jué)品牌和身份，而不是專注于個(gè)人設(shè)計(jì)。

98. 線框

線框圖描繪了網(wǎng)站或應(yīng)用程序的“基本骨架”，重點(diǎn)關(guān)注屏幕上不同元素的布局和定位。線框圖允許您在將最初的概念開發(fā)成高保真設(shè)計(jì)并最終成為實(shí)時(shí)產(chǎn)品之前對(duì)其進(jìn)行測(cè)試和驗(yàn)證。

99. X-高度

在決定字體及其大小時(shí)，設(shè)計(jì)師將使用小寫 x 的高度來(lái)確定字體中所有小寫字母的高度。如果任何字母超出 x 高度，則它們被稱為上升字母。任何低于 x 高度的字母都稱為下降字母。如果 x 高度較小，則需要增加字體大小以提高可讀性。

100.藍(lán)湖

藍(lán)湖是一款基于云的軟件，它在 UI 設(shè)計(jì)師和前端開發(fā)人員之間架起了一座橋梁。它提供了一個(gè)平臺(tái)來(lái)發(fā)布設(shè)計(jì)并生成規(guī)范和代碼片段，以保障與開發(fā)人員順利交接。




——

谷和體驗(yàn)設(shè)計(jì)

杭州谷和設(shè)計(jì)有限公司專注智能終端、數(shù)字化產(chǎn)品UI/UX設(shè)計(jì)

http://www.goohoux.com