安卓ui組件有什麼

Ⅰ UI組件是什麼

UI設計英文叫User Interface翻譯成中文意思就是（用戶界面）。UI設計是指對軟體的人機交互，操作邏輯，界面美觀的整體設計。
說到這個界面設計，其實非常好理解，因為我們每天都在使用。我們手機裡面的APP軟體，QQ和微信的界面圖標設計都屬於UI設計師的工作內容
移動端互聯網時代，每位同學都有一部智能手機，手機裡面看APP界面圖標，我們可以稱為用戶界面，也就是我說的UI設計。簡單的來說，UI設計師就是負責設計這些在電子屏幕上顯示的產品，（包括游戲UI，網頁端，手機，以及目前比較火的VR,AR，其他設備端等）
比如微信界面、裡面的圖標 文字 圖片整個操作點擊 都屬於UI設計師要設計的范疇。所以UI設計一直存在於我們的生活！
UI設計師需要做的工作有，APP界面圖標設計，視覺設計，運營插畫設計，交互動效設計，原型圖設計，平面設計，小程序設計等。
好的UI設計不僅是讓軟體變得有個性有品位，還要讓軟體的操作變得舒適簡單、自由，充分體現軟體的定位和特點。
一般UI設計師使用的軟體：Sketch、藍湖、figma、Axure

Ⅱ UI組件——標簽導航簡介

導航是任何網站或應用程序的支柱。選項卡代表了一種相當傳統的對內容進行分組並以模仿文件中的真實選項卡分隔符或文件夾中的選項卡的形式組織內容的模式。

在將這種簡單的（乍一看）導航元素設計為選項卡時，牢牢掌握該組件的解剖結構並有效地設計它是很重要的。

選項卡通常遵循許多不同的樣式指南。打開的選項卡與背景顏色匹配；選項卡通常具有圓形選項卡角，並且可以使用漸變來添加深度和尺寸等。從選項卡解剖開始以正確設計控制項。否則，您可能會混淆用戶，而不是幫助他們瀏覽內容。

水平標簽 從傳統文件夾中汲取靈感。用戶可以輕松地在相關內容組之間來回導航。選擇選項卡後，頁面內容會相應更改。

垂直標簽 更常用於具有許多不同導航選項的強大產品中。它們遵循與水平選項卡相同的基本概念，但選項卡沿頁面側面垂直堆疊。

避免使用超過 7-9 個類別。

雖然導航通常位於頁面頂部，但在移動應用程序中， 底部標簽欄 （在 iOS 產品中）和 底部導航 （在 Material Design 中）也很常見。這些是移動界面上屏幕底部的固定元素。與頂部導航一樣，它們允許用戶立即在應用程序的不同部分之間切換。

它們用於全局導航，因此它們應該始終保持可見。確保在此區域中不要包含太多選項卡以避免使界面混亂——3 到 5 個就足夠了。

水平選項卡有兩種主要類型：固定和可滾動。 固定選項卡 具有一定數量的部分，所有部分同時可見。它們在桌面界面上更為常見，那裡有大量可用的水平空間來顯示它們。如果您在移動設備上使用固定標簽，請確保它們的標簽適合您定位的所有設備，以防止破壞界面。

當顯示空間太窄而無法一次顯示所有選項卡時，使用可 滾動選項卡。 標簽可以更長，並且您可以使用比固定標簽更多的標簽，因為有溢出的空間。

通過半隱藏邊緣選項卡並將欄向右對齊來指示選項卡是可滾動的。

如果可以進一步分解選項卡的內容，則可以使用 嵌套選項卡。 它們相對於它們的父選項卡看起來略微縮進，並允許將信息分成更小的塊。小心使用過多的嵌套選項卡，因為它們會使您的界面看起來混亂並對可用性產生負面影響。

製表符間距  對於可讀性和使界面看起來干凈且具有視覺吸引力很重要。選項卡之間的間距應該一致且足夠大以定義元素之間的關系。此外，每個選項卡都應該有一個可點擊或觸摸的目標區域。至關重要的是，用戶可以輕松地在選項卡之間導航，並且不必擔心在類別之間意外切換。 

標簽高度 對於保持令人愉悅的視覺效果和提高可讀性也至關重要。高度不足會使標簽看起來雜亂無章。

Material Design 指南指定添加至少 12px 的垂直填充，以使標簽易於掃描和識別。在桌面上，填充可能會少一些，但要確保標簽有一些呼吸空氣。

如果您想在掃描標簽時為用戶提供一些額外幫助，請考慮使用 標簽圖標 。圖標可以幫助用戶更快地識別標簽的用途，同時還可以增加個性和視覺吸引力。請務必堅持使用簡單、具體和熟悉的圖標，並避免為多個選項卡重復圖標。圖標最好僅用於主要導航，並確保在設置樣式時牢記狀態變化。

僅將圖標用於主要導航選項卡並牢記狀態更改。

標簽是使標簽可用的關鍵。雖然有時可以單獨使用圖標來指示選項卡的功能，但標簽使選項卡更有用。 標簽大小 是創建可讀標簽的重要元素。文本應該足夠大以閱讀，但不要太大以至於它成為頁面的焦點。確保標簽在標簽之間的大小一致，盡管標簽長度。

盡可能使用短標簽——1-2 個詞就足夠了。它們比較長的標簽更容易掃描和格式化。如果您需要更長的標簽，也許這個類別對於選項卡控制項來說太復雜了。

但是，如果標簽需要更長並且需要超出標准標簽大小，則最好截斷標簽以保持其高度一致，而不是將其 包裹 在兩行上。

用戶應該始終知道他們在哪裡。確保 選定的選項卡突出顯示 ，以便用戶可以立即指示選擇了哪個選項卡。對比色、下劃線、疊加——所有這些工具都可以幫助活動標簽脫穎而出。

在水平選項卡中，當前類別應連接到內容區域。它允許用戶區分選定和未選定的選項卡，即使導航僅包含 2 個選項卡。

為用戶提供至少兩個選項卡被選中的視覺提示。

Ⅲ UI組件——選擇控制項簡介

選擇控制項是表單設計的重要組成部分。它們使表格更容易填寫和標准化收集的數據。可用、高效的表單可提高轉化率並阻止用戶與您的產品交互。

掌握在哪些情況下使用哪些選擇控制項可以使您的表單更有用。了解哪些圖標用於哪些選擇控制項也是表單設計的一個重要方面。

選擇控制項有兩種主要類型：復選框和單選按鈕。復選框是唯一允許用戶多選多個選項或使用零個選項的選擇  控制項  。單個復選框的選擇不取決於列表中的其他復選框是選中還是未選中。

您可以使用獨立的復選框來啟用或禁用選項，例如在新聞通訊注冊表單上授予發送電子郵件的許可權或同意條款和條件。

如果您有多個相關的復選框選項，請考慮包括全選/取消全選按鈕。

復選框圖標 應該是方形的，帶有復選標記或 X 表示選中的復選框。雖然創建獨特的圖標形狀可能很誘人，但統一的元素可提供跨系統的一致性。方形復選框意味著您的界面對用戶來說將是直觀的，他們不必花時間熟悉您產品的 UI。

當一個復選框下有多個「子」復選框，並且有的被選中而有的沒有被選中時，父復選框將顯示為 不確定狀態 。它通常用水平線或正方形表示。

當只能選擇一個選項時，使用單選按鈕是有意義的。對於付款方式、交付類型或類似選項，您可能需要  單選選項  ，如果多個選項會造成混亂。

與復選框相比，單選按鈕選項是互斥的，選擇一個選項會取消選擇之前在列表中選擇的任何其他按鈕。創建單選按鈕時，始終啟用默認選擇，設置最安全的選項以防止數據丟失。

切勿將單選按鈕用於應立即生效的命令。

單選按鈕圖標  是圓形的，基於早期收音機上的物理按鈕。它們是在內部使用點或實心圓圈來顯示所選選項的輪廓圓圈。

與復選框一樣，堅持單選按鈕的標准設計很重要，以防止用戶混淆。

圖標形狀 對於選擇控制項很重要。遵守約定（方形表示復選框，圓形表示單選按鈕，圓角矩形表示開關）使您的 UI 對於新用戶來說更加直觀，並有助於消除對如何與表單交互的困惑。

您的 標簽大小 需要足夠大，以便用戶在填寫表格時輕松閱讀它們。雖然理想尺寸因平台而異，但 14 像素通常是一個安全的選擇。調整標簽的重量和顏色，使它們不像正文那樣突出，同時仍然保持可讀性。

為了提高可用性，請為復選框或單選按鈕等內容創建 可操作的標簽 。可操作標簽是可點擊的，這意味著用戶可以點擊選擇的任意位置來激活它。確保可點擊區域足夠大，讓人們可以舒適地點擊，尤其是在觸摸界面上。在桌面 UI 上，使用指針游標指示標簽可單擊。

在您的選擇控制項和標簽周圍包含足夠的空白區域非常重要，這樣它們就不會擁擠並且更容易掃描。 標簽邊距 將標簽與選擇控制項分開，為它們提供喘息空間並允許用戶更快地完成表單。

但是，較大的邊距使用戶很難分辨哪個標簽對應於哪個選擇控制項，尤其是在選項列表很長的情況下。

標簽有一個主要功能——讓用戶不必思考。這意味著避免使用模稜兩可、可能令人困惑的 標簽命令 對您來說至關重要。以關鍵字（通常是動詞）開始您的標簽，並刪除任何多餘的短語或問題。

標簽應該簡短明了，如果是開關，它們應該指出開關打開時會發生 什麼 。

標簽應該簡潔明了。您可以通過大聲朗讀標簽並添加「開/關」來檢查它是否有意義。

將您的輸入對齊到屏幕左側的單個列上。為什麼？有兩個原因：

單一的垂直線更容易遵循。

研究表明，使用從左到右語言的用戶傾向於從屏幕左側開始掃描頁面。

你仍然可以使用水平布局，但是你的按鈕和標簽應該被安排好，以便用戶可以毫不費力地分辨出哪個選項對應於哪個標簽。

在移動設備上使用開關打開和關閉 選項 時，請確保將這些開關對齊到屏幕的右側，同時保持標簽與左側對齊。由於設備屏幕的大小不同，這種  移動對齊方式  使界面更易於掃描和使用。

切換開關 是選擇控制項，僅提供 2 個互斥選項（通常為「開」或「關」）並且始終具有默認值。

撥動開關是更改即時反饋的系統設置的最佳解決方案，例如打開暗模式或飛行模式。

撥動開關的選擇立即生效。另一方面，在選擇復選框選項後，用戶必須按下提交按鈕。

切勿在表單中使用帶有其他選擇控制項或需要用戶單擊保存或提交的輸入的切換開關。

Ⅳ UI組件——圖表簡介

定性數據功能強大，但給設計師帶來了挑戰，以使其可視化並以吸引人且易於解釋的形式呈現。為此，我們使用圖表和圖形。

數據可視化可以用不同的形式表示，例如折線圖、條形圖、餅圖、散點圖或地圖。設計圖表時，您應該專注於您的目標，並仔細考慮如何以最具視覺吸引力、可掃描且永不誤導的方式傳達信息。

x 軸和 y 軸構成任何 2D 圖表的基礎，其中 x 軸 是構成坐標平面的水平線。

通常，x 軸用於表示時間。

y 軸是一條垂直線，到達天空（sky)。很容易記住，對吧？ 

確保始終從零開始 y 軸。否則，您會通過顯示比實際收益更高的數據來誤導用戶。

通常，使用 y 軸表示數量。

圖例  的作用是描述一個圖表，在圖表上顯示與特定數據相關的名稱和顏色。

比較多個數據集時，您只需要一個圖例。

網格 線是將圖表區域劃分為多個部分的垂直水平線或垂直線。如果您曾經玩過戰艦，那麼您就會知道網格有助於發現對手的船隻。圖表也是如此——網格有助於定位坐標平面上的任何點並更容易閱讀圖表。

氣泡圖 很容易識別  ，因為它們看起來像一堆肥皂泡。圖表中的每個氣泡代表一個數據點，該數據點由三個維度定義，使用 x 軸和 y 軸上的位置以及氣泡的大小。有時，氣泡的顏色或其在動畫中的運動可以代表更多的維度。 

氣泡圖可能會讓人不知所措，因此當您的數據沒有至少 3 個維度時，請避免使用它們。例如，您可以比較每個學生在過去一個學期和每年的學習成績和出勤率。 

始終在圖例中包含不同氣泡大小的含義。

雷達圖 ，又名蜘蛛圖或網路圖，不是用來編織陰謀的。我們使用它們來概述多個變數的一組或多組值。例如，雷達圖可以幫助比較組中不同人的不同健康指標或可視化團隊中每個人的績效數據。 

一方面，雷達圖是比較多個變數的不錯選擇。另一方面，如果您使用太多或太獨特的變數或在一個雷達圖中有多個填充顏色的多邊形，它們可能難以解釋。

燭台圖 在金融市場中很常見，每個「燭台」代表給定時間范圍內的價格走勢。蠟燭的主體顯示開盤價和收盤價之間的波動。實心蠟燭表示價格上漲，而空心蠟燭表示價格下跌。 

餅圖  每一片都包含豐富的信息。 切片越大，特定類別級別在整體中所佔的比例就越大。

什麼是好的餅圖？

• 添加註釋 

如果某些類別切片的大小相似，則很難估計確切的值，因此包含注釋對用戶非常有幫助。

• 限制餅圖的數量

當餅圖超過 5 個時，圖表變得難以閱讀。此外，設計師很難找到足夠明顯的對比色。您可以限制類別的數量，也可以將具有最小值的類別折疊到單個「其他」切片中。

• 設置切片的順序

當您以合乎邏輯的方式放置切片時，圖表變得更易於掃描。您可以將它們設置為從最大到最小的大小或遵循它們的自然順序。例如，說明人口群體失業率的圖表將包括 18-24 歲、25-34 歲、35-44 歲等。

• 避免 3D 效果

不建議為任何圖表類型添加 3D 效果，因為它會扭曲比例並使用戶對實際類別大小感到困惑。

如果您想將類別相互比較，而不是將每個類別與一個整體進行比較，請考慮使用餅圖以外的其他類型。

環形 圖  是餅圖的變體。這是一個簡單易讀的圖表，其中每個環形塊代表一種數據類型的數量。

選擇餅圖或環形圖取決於您的審美。唯一的區別是餅圖沒有可用於添加註釋或其他信息移除的中心圓。

柱狀圖 是最受歡迎的圖表之一，它表示水平或垂直條的組合，其中高度或長度定義了所代表的整體值。

根據研究，柱狀圖也是最容易讓用戶理解的。

設計柱狀圖的最佳實踐是什麼？

• 始終從零值基線開始。它簡化了閱讀，並且不會以不明確的數據誤導觀眾。

• 不要使設計過於復雜，並將您的基線保持在直邊的矩形形狀。3-D 效果或圓條使用戶難以解釋數據並獲得精確值。

• 謹慎使用顏色。為每個條形應用不同的顏色會產生認知負荷。取而代之的是，在特定的列中使用顏色來突出差異，或者在含義需要時在使用顏色。

• 包括注釋。柱狀圖很容易解釋，但有時為了傳達准確的數據，需要進行價值標注。

當標簽很長時，水平柱狀圖  是一個不錯的選擇——例如，功能名稱或任務描述。與垂直柱狀圖相比，您無需旋轉或縮寫文本即可以易於閱讀的方式顯示它。

如果你用曲線連接數據點，你會得到一個折線圖。我們使用  折線圖  來顯示指標的進展，例如匯率，在垂直軸上描繪。此時，水平軸顯示一個變數，該變數表示具有規則測量間隔的連續值，通常是時間（分鍾、小時、日、周或月）。

您還可以使用折線圖來比較多個類別跟隨時間的行為。

有效折線圖的建議是什麼？

• 使用適當的間隔。選擇太大的間隔可能無法說明暫時發生的任何波動。相反，太小的間隔可能會在圖表上造成不必要的混亂，使發現重大事件變得復雜。

• 避免繪制過多的線條。它們可能難以閱讀，有可能陷入無法閱讀的混亂之中。

與柱狀圖相比，折線圖不應從零值基線開始。請記住，我們需要觀察度量在一個值（例如，時間）上的行為，而不是它的大小。

如果您使用折線圖並為其下方的空白區域著色，您將得到一個 面積圖 。單區域圖表也擅長表示事物隨時間的變化——例如，學生全年的表現。 

通常，當我們說「面積圖」時，我們指的是堆積面積圖，其中每個區域都說明了它對總數的貢獻。例如，您可以使用堆積面積圖來顯示擁有免費計劃、基本計劃和高級計劃的活躍用戶的數量。 

重疊面積圖使我們能夠比較組之間的值。如果您有兩個以上的區域，它們可能會讓人很困惑。

為了幫助用戶更輕松地閱讀面積圖，最好選擇正確的面積順序。通常，最穩定和最大的群體應該奠定基礎，而變化最大或最小的群體應該在上面。

散點圖對您來說可能看起來不像圖表，因為它們讓我們想起了在射擊范圍內擊中目標的草率嘗試。但是，水平軸和垂直軸相交處的每個點都代表一個單獨的數據點的值。

散點圖非常適合觀察變數之間的關系。例如，我們可以在 A/B 測試期間將用戶參與度與 CTA 按鈕的兩種變體（例如訂閱或結帳）進行比較。x 軸顯示用戶點擊按鈕的百分比，而 y 軸顯示過去 30 天內每個用戶每天點擊該按鈕的平均次數。

請記住，繪制太多數據點可能會導致重疊，從而難以甚至不可能識別變數之間的關系。

Ⅳ android的ui布局有哪些

布局（Layout）的概念是針對Activity的，Activity就是布滿整 個Android設備的窗口或者懸浮於其他窗口上的交互界面。在一個應用程序中通常由多個Activity構成，每個需要顯示的Activity都需要在AndroidManifest.xml文件之中聲明。

通常情況下，開發人員可以使用兩種方式來創建UI組件，一種方式是使用XML方式來配置UI組件的相關屬性，然後裝載這些UI組件，這也是最常用的方式。但是有些特殊情況下，需要動態生成UI組件，則需要使用第二種方式，完全使用java代碼來創建UI組件。

XML布局文件是Android系統中定義的Layout的常用方式，所有布局文件必須包含在res/layout目錄中，且必須符合Java的命名 規范。當在res/layout目錄下新增了布局文件之後，R.java文件會自動收錄該布局資源，Java代碼可通過setContentView方法 在Activity中顯示該Layout。

setContentView(R.layout.<資源名稱>)；

在布局文件中可以指定UI組件的android:id屬性，該屬性的屬性值代表該組件的唯一標識。通過Activity.findViewById()訪問，並且findViewById()必須在setContentView載入xml文件之後使用，否則會拋出異常。

findViewById(R.id.)

Android應用的絕大部分UI組件都放在android.widget包及其子包、android.view包及其子包中，Android應用的 所有UI組件都繼承了View類。View類還有一個重要的子類：ViewGroup，ViewGroup類是所有布局管理器的父類。

ViewGroup容器控制其子組件的分布依賴於ViewGroup.LayoutParams、ViewGroup.MarginLayoutParams兩個內部類。

ViewGroup.LayoutParams提供兩個XML屬性設定組件的大小。

android:layout_height:指定該子組件的基本高度；

android:layout_width：指定該子組件的基本寬度。

這兩個屬性有三個基本值，這兩個屬性有三個特定的值：

fill_parent：指定組件的高度、寬度與父容器組件的一樣。

match_parent：與fill_parent一樣，Android2.2開始推薦使用。

warp_content：內容包裹。

ViewGroup.MarginLayoutParams用於控制子組件周圍的頁邊距。

android:layout_marginBottom(下邊距);

android:layout_marginLeft（左邊距）;

android:layout_marginRight（右邊距）:

layout_marginTop（上邊距）

對於View的尺寸，android提供了三種單位供選擇使用：

px：像素。

dp：dpi，表示屏幕實際的像素。

sp：與scale無關的像素，與dp類似。

尺寸單位選擇的技巧：如果設置長度、高度等屬性時可以使用dp或sp，但是如果設置字體，需要使用px。如果使用dp或sp，系統會根據屏幕密度的變化進行轉換。

為了適應各種界面風格，Android提供了五種布局規范，利用這五種布局，基本上可以在設備上隨心所欲的擺放任何UI組件，這五種布局分別是：

FrameLayout（幀布局）。

LinearLayout（線性布局）

RelativeLayout（相對布局）。

TableLayout（表格布局）。

AbsoluteLayout（絕對布局）。

線性布局（LinearLayout）

LinearLayout是最常用的布局方式，在XML文件中使用標記。它會將容器里的UI組件一個一個挨著排列起來。但是LinearLayout不會換行，當UI組件超出屏幕之後，則不會被顯示出來。LinearLayout有兩個重要的XML屬性：androidgravity（對齊方 式）；android：orientation（排列方式）。

android：orientation（排列方式），設定了LinearLayout中包含的UI組件的排列方式，有兩個選項vertical（豎向）、horizontal（橫向，默認值）

android：gravity（對齊方式），設定LinearLayout中包含UI組件的對齊方式，其選項很多，常用上（top）、下（bottom）、左（left）、右（right）。

Ⅵ UI設計常用的UI控制項有哪些

uI控制項的三要素：繪制、數據、控制。
1、Axure
RP（Rapid
Prototyping）
Axure（讀音為Ack-Sure）無疑是目前最受關注的原型開發工具，其能通過組件的方式幫助網站或軟體設計師快速建立帶有注釋的原型（流程圖、線框圖），並憑借自定義可重用的元件、動態面板以及豐富的script能夠建立基本功能或頁面邏輯的動態演示文件。
Axure借鑒了office的界面，能夠讓用戶快速上手，並且提供了豐富的組件樣式修改，使得通過其能夠創建低保真、高保真甚至接近於實際效果的界面。然而最讓人稱道的是，Axure的豐富的腳本模式，可以通過點擊和選擇能夠快速完成界面元素的交互，如鏈接、state切換、動態變化等效果，使得Axure能夠生成十分接近於真實產品的原型。另一方面，Axure能夠導入其他人創建的元件庫，使得Axure能夠滿足絕大多數類型產品的設計。
但Axure仍然有一個讓人頭痛的問題：對於中文的支持不太友好。在小部分元件上輸入中午的時候，經常需要像碰運氣似的反復切換輸入法，破壞了咱們設計師的用戶體驗。
瑕不掩瑜，Axure仍然是交互設計師的首選原型工具。
2、Microsoft
Office
Visio
Visio在2000年被微軟收購，並在2002年成為office2003套件中的一個組件，最新版本是2007。Visio能夠獲得推薦的原因是因為Visio的適用性非常之廣，從網站界面、資料庫模型，到平面布置圖到工藝流程圖，Visio都提供了相應的元件庫和模板來進行快速創建。
相較Axure而言，Visio更適合於傳統行業的生產或流程設計，或者軟體及互聯網行業中的信息、數據和流程的說明，而不太適用於web界面。因為其的基於web的元件庫還是比較少，並且形式和結構也更類似於word中的圖形工具，因此在原型開發效率上都有所不足。
3、Balsamiq
Mockups
這個基於Adobe
AIR
Runtime的工具實在是有讓人眼前一亮的感覺，手繪風格的元件樣式粗獷淋漓，能創建接近於紙上手繪的原型文件。其提供了豐富的手繪風格的web常用元件，包括常用的html控制項、以及一些組合控制項，如多媒體控制器、標簽頁、列表、Iphone界面元件等。
Mockups最值得贊賞之處在於其提供的多數組件都可定製外觀，對於中文的支持也不錯（選擇View
>
Use
System
Fonts）。
4、Mockflow
Mockflow和以上工具最大的不同在於Mockflow是一項基於Adobe
Flex技術開發在線服務，提供了與Balsamiq
Mockups基本相似的功能，甚至更豐富的組件，雖然其元件定製化不夠強大，但其提供的元件庫默認樣式卻非常適合用來做商業產品原型的搭建。有一個讓我愛不釋手的功能是模板，可以設置基於任何頁面的模板來進行新的頁面設計。
與其他模板工具相比，mockflow有一個非常特色的功能，基於web的存儲可以在任意電腦上聯機打開，同時可以其他人進行快速的分享，並收集在線反饋意見，非常適合虛擬團隊的原型設計交流。

Ⅶ UI組件——常用組件二

通用 UI 組件使網站和應用程序更易於使用。通過使用通用組件，用戶不必猜測如何與界面交互——他們可以識別每個元素應該做什麼。

折疊面板、列表和圖表等 UI 組件可以讓用戶更輕松地消化信息。麵包屑和分頁等組件將用戶定向到他們在網站或應用程序中的位置。還有其他組件，例如選擇器或滑塊，可以更輕松地與界面交互。 

折疊面板 是折疊的內容塊堆棧，單擊時會顯示隱藏的內容。它們通常用於常見問題解答等，其中多個相關內容應包含在同一頁面上，但一次顯示它們可能會讓用戶感到沮喪。關閉時，它們僅顯示標題（通常是問題）並在用戶單擊後顯示完整內容。

對打開和關閉的部分使用不同的圖標。

雜貨清單、新年願望、遺願清單——如果你能說出它的名字，可能會有一個清單。在設計界， 列表 有助於排列相關元素，例如文本或圖像。

列表可以按字母順序、時間順序或數字順序排列，並用項目符號或圖標進行標記。用戶喜歡它們，因為它們很容易被掃描以找到所需的信息。

確保對齊列表並在選項之間添加足夠的空白以讓它們呼吸。易讀性是關鍵！

術語 麵包屑 指的是看起來像一排鏈接的輔助導航元素。就像在 Hansel 和 Gretel 的故事中一樣，麵包屑會留下痕跡來引導用戶並幫助他們回家。

最後一個元素表示用戶的當前位置，其餘元素表示他們到達那裡的路徑。如果用戶深入到網站並遠離主頁，麵包屑可以幫助他們了解自己的位置並找到返回的路。 

當前頁面應該始終是路徑中的最後一個碎屑。 

分頁 是信息架構的基本組成部分。它在網頁設計中很普遍，出現在許多網路應用程序中。

分頁將內容分成可消化的部分——頁面——並幫助用戶瀏覽界面。當頁面出現在物理世界中的書籍、雜志和其他書面材料中時，它們很容易被用戶識別。期望在電子商務網站或您的收件箱上看到分頁。

頁面的頂部和底部是最常見的分頁位置。 

線條是設計師用來分隔內容組中不同元素的最常見的視覺 分隔線 類型。它們支持視覺層次結構並幫助用戶掃描相關的信息塊。

顏色、空白、圖像或陰影是線條的絕佳替代品，線條會產生過多的視覺噪音。

通知 是提醒用戶有關更新或操作的系統消息，例如新消息或成功發送電子郵件的確認。它們採用徽標數、全局提示或覆蓋橫幅的形式，其主要目的是吸引用戶的注意力。

在設計界， 標簽 （又名chips）是緊湊的文本元素，可以提供多種功能。它們允許我們標記、分類、選擇、過濾或觸發動作。

那麼為什麼是「chips」呢？谷歌的 Material Design 引入了這個術語，現在它可以與「標簽」這個詞互換使用（盡管「chips」也可以指代標簽之外的元素）。

選擇器是選擇日期范圍、時間段或兩者的完美工具。單擊時，它們會展開為模態框或對話框，並向用戶提供一組可供選擇的選項。

用戶乍一看應該很明顯當前日期和選定日期。另外，不要限制用戶的選擇；允許他們鍵入日期而不是滾動和選擇。有時，打字要容易得多。

禁用不可用的選項——例如，過去或不可用的日期——以防止用戶錯誤和摩擦。 

圖表 是任何儀表盤的重要組成部分，因為它們使我們能夠可視化和比較數據。圖表有多種形式——堆積面積圖、柱形圖、餅圖等等。

選擇正確的圖表類型不是品味問題。這取決於您擁有多少數據類別以及圖表的用途。例如，餅圖不適合比較超過 5 個切片。對於用戶來說，它變得過於擁擠且難以閱讀。

大多數人在嘗試將您的 Instagram 提要載入到 3G 網路上之前都不會考慮太多關於 載入程序的問題 。載入器是通知用戶載入過程的元素。進度條、微調器和骨架屏是向用戶指示存在延遲的最常見方式。

為了減少挫敗感，請添加對用戶需要等待的原因的解釋，並指出可能需要多長時間。

文字提示 是不能單獨存在的簡短、信息豐富的消息——它們總是與互動式元素配對，例如圖標、按鈕或文本鏈接。文字提示由用戶觸發，並在滑鼠懸停或單擊或通過鍵盤懸停時顯示。

不要將文字提示變成唯一的解釋來源。它們是提供額外幫助和提供額外信息的好夥伴，但用戶應該能夠在沒有它們的情況下完成任務。

一個好的文字提示簡短、簡潔且有用。最好的文字提示是您從未真正需要的文字提示。

滑塊 是用於選擇值或值范圍的現成解決方案。通過水平拖動手柄（也稱為「拇指」），用戶可以設置價格範圍或選擇一個數字。一些滑塊包含一個浮動值，該值會隨著用戶拖動拇指而更新。

在移動設備上使用滑塊時，請確保拇指足夠大並且易於定位和拖動。

請記住，對於有運動障礙的人來說，滑塊可能很難控制。 

千里之行，始於足下。 進度跟蹤器 向用戶顯示他們已經採取了多少步驟以及還剩下多少步驟。他們一步一步地指導我們，將大表格分成更小的塊，並鼓勵我們完成每一步。

向進度跟蹤器添加文本以指示流程中的每個步驟包括的內容對用戶很有幫助，並鼓勵他們繼續旅程。

避免超過 5 步的旅程。

Ⅷ UI組件——按鈕介紹

按鈕是任何用戶界面中最重要和最普遍的交互元素之一。它們可以有各種形狀和大小，用於表單、號召性用語、注冊表單、登錄鏈接以及網站或應用程序的其他地方。 

根據用戶期望與它們交互的方式，有 3 個主要類別的按鈕：主要的、次要的和第三的。視覺層次結構定義了不同的應用程序用例，設計人員應該對何時使用這些變化有深刻的理解。

主要按鈕  突出顯示界面想要或期望用戶做什麼。它們應該從界面的其餘部分和其他按鈕中脫穎而出，尤其是那些靠近的按鈕。主要按鈕通常以 CTA 形式出現，例如表單上的提交按鈕。

在設置主按鈕樣式時，使用更飽和的顏色以使它們更醒目。對於號召性用語按鈕，使用與界面其餘部分形成對比的顏色特別有用。

避免每頁有太多的主按鈕，以防止超載和混淆用戶。

輔助按鈕 是主按鈕的替代品。如果提交按鈕是主要按鈕，則取消按鈕將是次要按鈕。輔助按鈕應該有更柔和的樣式，讓主按鈕在設計中占據中心位置。

盡管輔助按鈕應該不那麼顯眼，但請確保用戶可以識別他們的不同狀態（啟用、禁用、懸停、聚焦等）。

第三級按鈕  用於執行較少的操作——用戶不太可能執行的操作。因此，它們根本不應該引人注目。事實上，您可能希望將第三個按鈕與界面中的其他按鈕分開放置，以防止用戶意外選擇它們。

圖標按鈕 ，顧名思義，僅包含一個圖標。因為圖標沒有文字，所以這些按鈕只能用於日常操作，例如編輯或將某些內容移動到垃圾箱。符號的含義需要熟悉且可立即識別，以防止混淆用戶。

從可訪問性方面來看，僅圖標按鈕對於輔助技術用戶來說意義不大。有幾種方法可以使此類按鈕更易於訪問。例如，您可以將圖標與文本一起使用或在<button>元素中定義按鈕的名稱。

如果您仍然認為使用純圖標按鈕值得冒險，請確保提供信息豐富的工具提示。 

與僅圖標按鈕相比，  文本按鈕  僅包含文本，沒有圖標。它們也不包括邊框或填充顏色。純文本按鈕的視覺重量顯著減少，因此建議僅將它們用於不太重要的操作。

例如，您不想將純文本按鈕用作 CTA。在設計純文本按鈕時，請務必使用與其他按鈕大小相同的不可見容器，以保持一致的間距。

輪廓按鈕 ，也稱為幽靈按鈕，僅包含邊框和文本標簽。它們比純文本按鈕具有更多的視覺重量，但並不是特別突出。輪廓按鈕非常適合作為二級或三級按鈕，但它們在視覺上不夠突出，無法指示主要操作。 

如果您想要一個視覺重量更重的按鈕，請考慮使用  凸起的按鈕 。凸起的按鈕由於使用陰影而脫穎而出。陰影使它們在設計中更加突出並引起用戶的注意。但是，請注意不要過度使用它們，因為它們會使用戶不知所措。

較大的陰影表示與表面的距離較大，並強調按鈕的重要性。 

與凸起按鈕相比，我們有  扁平按鈕 。它們不使用陰影或其他樣式來模仿高度或體積，但由於它們的形狀和顏色，它們仍然看起來像按鈕。

最好避免使用扁平按鈕，因為它們缺乏交互性的任何視覺指示。換句話說，它們看起來不可點擊或可點擊，從而使用戶感到困惑。

拆分按鈕 是菜單按鈕的變體。然而，它不僅僅是它的主要作用。拆分按鈕提供默認的單擊操作，同時還通過下拉菜單提供替代選項。他們經常使用箭頭圖標來指示輔助功能可用。

拆分按鈕與常規菜單按鈕的唯一區別是按鈕的主要功能和下拉功能之間的某種視覺分隔符。它可以防止用戶假設整個按鈕都會暴露下拉菜單。

限制選擇的數量以防止選擇麻痹。將其保持在桌面的 10-12 個選項之內，而對於移動設備則更少。

如果您想將多個功能（通常是 2 或 3 個）組合到一個按鈕中，同時保持所有功能可見，那麼 切換按鈕 就是答案。他們總是群居，共享一個容器。在每個組中，一次只能選擇一個按鈕。

確保使用顏色或覆蓋清楚地傳達選擇了哪個選項。

如果您需要對同等重要的類似操作進行分組，但又不想將它們與切換按鈕並排顯示，請考慮使用  菜單按鈕 。菜單按鈕只需在單擊/點擊時打開操作列表。在對相關操作進行分組時，它們是節省空間的絕佳選擇。

浮動操作按鈕 (FAB) 最初是由 Google 的 Material Design 指南推廣的。它們提供一致且固定的主按鈕。通常，它們是圓形的、僅圖標的、固定在屏幕邊緣或角落的凸起按鈕。您可能已經在 Google 的應用程序中看到過它們，例如 Google 日歷中的加號添加事件按鈕。

通常每頁只應使用一個 FAB 來進行建設性的主要操作，例如創建、添加或共享。

Ⅸ UI組件——通用組件 I

無論網站的設計多麼獨特，您都可能會找到某些 UI 組件。這些組件對用戶來說很熟悉，可以幫助他們在網站或應用程序中定位自己，從而改善整體用戶體驗。

您將遇到的最常見的 UI 組件包括按鈕、輸入、表單、卡片、模態彈框、菜單、頂部布局和底部布局。當您了解這些 UI 組件的工作原理以及如何將它們整合到您的設計中時，您將增加用戶的積極體驗。您可以在它們的實施和樣式方面發揮自己的創造力。

UI 按鈕 的起源可以追溯到最初出現在電子產品和其他小工具上的物理按鈕。在數碼產品中，按鈕是主要的交互構建塊之一。它們允許用戶通過單擊或點擊執行操作；例如，提交、啟動、新建等。

按鈕的作用是鼓勵用戶採取行動。按鈕標簽與其設計一樣重要。使用動作動詞來告訴用戶按鈕的作用，這樣他們就可以在不閱讀支持文本的情況下採取行動。

在標簽的主動語態中使用命令式形式，以最大限度地減少單詞數量並使標簽更易於掃描。

復選框 也常見於表單中。它們允許同時選擇多個選項，並允許用戶啟用或禁用一個選項。啟用後，它們會顯示一個復選標記。禁用時，它們是空的。

復選框旁邊有一個標簽，可以單獨使用（例如允許添加到電子郵件列表的復選框）或堆疊在一起使用。

當您的用戶可以選擇多個選項時使用復選框，例如聖代酒吧的冰淇淋配料。 

雖然復選框允許選擇多個選項，但 單選按鈕 只允許選擇一個。它們在組中使用，其中可用的選項是互斥的（例如「是」或「否」）。

單選按鈕未選中時為空，選中時填充一個點。單選按鈕通常最初顯示時未選擇任何選項。一旦選擇了一個選項，它們就不能通過僅與按鈕交互來返回到該狀態（用戶只能在按鈕之間切換他們的選擇）。如果取消選擇的狀態很重要，您需要為用戶提供另一種返回該狀態的方法。

單選按鈕以老式收音機上的按鈕命名。

切換開關 最常出現在應用程序的設置屏幕等內容中。開關允許用戶在元素的兩個互斥選項之間切換，通常是「開」和「關」狀態。

一般來說，它們應該只用於即時反饋的情況，例如打開黑暗模式或飛行模式。有時，可能會在表單或菜單中使用開關，但這不太常見。

確保撥動開關的「開」和「關」狀態立即顯現。

文本輸入 是最常見的表單輸入類型。它們可以採用多種形狀和形式，具體取決於輸入數據的情況和類型。您可以將文本輸入用於姓名、電子郵件地址、電話號碼或較長格式的文本（如評論）等內容。

創建可識別特定類型數據（例如電話號碼或電子郵件地址）的文本輸入，以便數據格式正確（以及移動設備上的鍵盤更改）可以改善用戶體驗。

菜單 是在特定交互後打開的臨時元素，例如點擊下拉菜單或右鍵單擊。它們根據觸發它們的交互顯示上下文選擇列表。使用菜單的優勢在於，您可以在界面中添加許多額外的操作選項，而不會在它們不相關時佔用屏幕空間。

表單 可以說是您將遇到的最重要的 UI 組件之一。有效的表單可以增加轉化率，而設計不佳的表單可能會使用戶望而卻步。 

表單包括多個輸入控制項，允許通過復選框、單選按鈕、文本輸入和其他類型的輸入欄位進行結構化或復雜的輸入。精心設計的表單收集完成用戶操作所需的盡可能少的信息。 

例如，如果為新聞通訊注冊創建表單，將表單欄位限制為電子郵件地址、姓名（這有助於自定義發送給訂閱者的消息）和許可權復選框將增加轉化率。

阻礙越低，用戶成功完成表單的機會就越高。 

模態彈框 使用的好與壞。負責任地使用精心設計的模態可以改善用戶體驗並使您的界面不那麼混亂。如果使用不當（例如用於中斷用戶體驗的廣告彈出窗口），它們只會令人討厭。 

模態彈框應該謹慎使用，以響應用戶採取的行動或警告他們一些重要的事情。每當一個模態彈框被間接觸發時，它都會中斷用戶正在做的任何事情的流程。只有在收益大於干擾時才使用它們。

UI 中的卡片類似於現實生活中的交易卡片——它們是矩形的，通常包含圖像和一些文本。它們還可能包含對卡片內容進行操作的交互元素，例如「了解更多」按鈕。

基於卡片的布局對於具有許多類似信息集的界面很有用，例如列出成員或員工的頁面，或者像 Pinterest 這樣的網站。他們有效地對相關信息進行分組，同時保持統一的用戶界面模式。

曾幾何時（在 CSS 成為布局標准之前），在界面中使用 表格 來布局整個網站頁面。值得慶幸的是，我們已經恢復了表格的正確用途：以易於閱讀和理解的方式組織數據。 

表格（也稱為數據表）通常用於諸如運動隊排名、航空公司航班時刻表、庫存清單以及與多條信息相關的類似數據集。通過允許用戶對它們包含的數據進行排序、編輯、搜索或過濾，表可以為用戶提供更多功能。

頂部布局 是站點范圍的組件，對於給用戶留下良好的第一印象很重要。它們在引導用戶瀏覽網站方面發揮著關鍵作用，並且可以包含動態元素，如登錄或注冊按鈕，或導航元素。它們還可能包括有關網站的識別信息，例如公司徽標和標語。

在整個網站或應用程序中保持統一的頂部布局設計。

雖然頂部布局通常是用戶首先看到的，但 底部布局 通常是最後一個。底部布局通常包括導航鏈接，這些鏈接可能會或可能不會在網站的其他地方找到（例如指向隱私政策和服務條款的鏈接）。

底部布局還可以包括聯系信息或表格、實體企業的營業時間、社交媒體帳戶鏈接或業務合作夥伴鏈接等內容。該網站的版權信息通常也可以在此處找到。

Ⅹ 什麼是android的四大組件

Android四大組件有Activity，Service服務，Content Provider內容提供，BroadcastReceiver廣播接收器。

Android應用程序由一些零散的有聯系的組件組成，通過一個工程manifest綁定在一起。在manifest中，描述了每一個組件以及組件的作用，其中有6個組件，它們是Android應用程序的基石

(10)安卓ui組件有什麼擴展閱讀

Activities(活動)

應用程序的顯示層。每一個畫面對應於你的應用程序，將會是Activity類的擴展。Activity使用Views去構建UI來顯示信息和響應用戶的行為。就桌面開發而言，一個Activity相當於一張Form。

Services(服務)

Android應用程序中不可見的「工人」。 Service組件運行時不可見，但它負責更新的數據源和可見的Activity，以及觸發通知。它們常用來執行一些需要持續運行的處理，當你的 Activity已經不處於激活狀態或不可見。

Content(內容)

提供共享的數據存儲。Content Provider(內容提供器)用來管理和共享應用程序的資料庫。在應用程序間，Content Provider是共享數據的首選方式。

Broadcast Receivers(廣播接收器)

Intent廣播的「消費者」。通過創建和注冊一個Broadcast Receiver，應用程序可以監聽符合特定條件的廣播的Intent。Broadcast Receiver 會自動的啟動你的Android應用程序去響應新來的Intent。Broadcast Receiver是事件驅動程序的理想手段。

參考資料來源：網路-Android組件