UI控件的三要素：繪制、數據、控制。(轉載)

　　uI控件的三要素：繪制、數據、控制。

　　首先，展現在我們視線(xiàn)里的是可見(jiàn)的，那就是繪制，每一個(gè)控件都有自己的樣子，就跟人的相貌一樣，比如TableView是一張數據表，又比如datePicker是一個(gè)時(shí)間選擇器，他們的樣子都是不一樣的。

　　然后是數據，控件也需要自己的數據，比如label，需要顯示文字的數據，比如imageView需要顯示圖片的數據，如果沒(méi)有數據這些控件的使用將會(huì )變得沒(méi)有意義；

　　最后一個(gè)就是控制了，最典型的就是button了，這是用戶(hù)與界面交互的關(guān)鍵，還有其他的控件，比如scrollview，可以滑動(dòng)加載數據，這是控制。

　　基本UI控件：

　　Web UI控件：圖表和圖形、日期和日歷、組合框、對話(huà)框、進(jìn)度條、所見(jiàn)即所得編輯器、條形碼等可交互控件。

　　iOS基本UI控件：Button控件、開(kāi)關(guān)控件、滑塊控件、工具欄、WebView等。

　　安卓UI控件：文本控件、按鈕控件、狀態(tài)開(kāi)關(guān)控件、單選與復選按鈕、圖片控件、時(shí)鐘控件、日期與時(shí)間選擇控件等。

　　Windows RT控件：例如ComponentOne Studio for WinRT，它包含了磁貼、日歷、按鈕、輸入、下拉列表等控件。

　　[4]

　　對于日益增加的UI控件需求，市場(chǎng)上也出現了很多可供選擇的UI控件，滿(mǎn)足用戶(hù)比較復雜的需求。這些控件幫助簡(jiǎn)化UI設計工作，提高效率。

　　布局合理化原則

　　在進(jìn)行UI設計時(shí)需要充分考慮布局的合理化問(wèn)題，遵循用戶(hù)從上而下，自左向右瀏覽、操作習慣，避免常用業(yè)務(wù)功能按鍵排列過(guò)于分散，（UI設計學(xué)習交流群：294717688）以造成用戶(hù)鼠標移動(dòng)距離過(guò)長(cháng)的弊端。多做“減法”運算，將不常用的功能區塊隱藏，以保持界面的簡(jiǎn)潔，使用戶(hù)專(zhuān)注于主要業(yè)務(wù)操作流程，有利于提高軟件的易用性及可用性。

　　菜單

　　-保持菜單簡(jiǎn)潔性及分類(lèi)的準確性，避免菜單深度超過(guò)3層。

　　-菜單中功能是需要打開(kāi)一個(gè)新頁(yè)面來(lái)完成的，需要在菜單名字后面加上“…”。【只適用于C/S架構，B/S請無(wú)視】。

　　按鈕

　　確認操作按鈕放置左邊，取消或關(guān)閉按鈕放置于右邊。

　　功能

　　-未完成功能必須隱藏處理，不要置于頁(yè)面內容中，以免引起誤會(huì )。

　　排版

　　-所有文字內容排版避免貼邊顯示（頁(yè)面邊緣），盡量保持10-20像素的間距并在垂直方向上居中對齊；各控件元素間也保持至少10像素以上的間距，并確?？丶夭痪o貼于頁(yè)面邊沿。

　　表格數據列表

　　-字符型數據保持左對齊，數值型右對齊（方便閱讀對比），并根據字段要求，統一顯示小數位位數。

　　滾動(dòng)條

　　-頁(yè)面布局設計時(shí)應避免出現橫向滾動(dòng)條。

　　頁(yè)面導航（面包屑導航）

　　-在頁(yè)面顯眼位置應該出現面包屑導航欄，讓用戶(hù)知道當前所在頁(yè)面的位置，并明確導航結構，如：首頁(yè)>新聞中心>歐科智能招商服務(wù)平臺正式發(fā)布，其中帶下劃線(xiàn)部分為可點(diǎn)擊鏈接。

　　信息提示窗口

　　-信息提示窗口應位于當前頁(yè)面的居中位置，并適當弱化背景層以減少信息干擾，讓用戶(hù)把注意力集中在當前的信息提示窗口。（UI設計學(xué)習交流群：294717688）一般做法是在信息提示窗口的背面加一個(gè)半透明顏色填充的遮罩層。