UI界面設(shè)計(jì)基本視覺(jué)元素

UI界面由多個(gè)不同的基本視覺(jué)元素組成的。它們通過(guò)圖形的組合、色彩的搭配、材質(zhì)和風(fēng)格的統(tǒng)一、合理的布局構(gòu)成一個(gè)完整的界面效果。優(yōu)秀的基本視覺(jué)元素是UI界面成功的基礎(chǔ)。

在UI界面中，圖標(biāo)就是放置在主屏幕上的應(yīng)用圖標(biāo)，用戶可以通過(guò)單擊圖標(biāo)來(lái)啟動(dòng)應(yīng)用，它是整個(gè)應(yīng)用品牌的重要組成部分。用戶在看到圖標(biāo)的時(shí)候便建立起對(duì)該應(yīng)用的第一印象，并以此評(píng)判應(yīng)用的品質(zhì)作用以及可靠性，美觀的圖標(biāo)有助于增加App的吸引力。

與Logo不同，圖標(biāo)通過(guò)視覺(jué)設(shè)計(jì)提供信息和引導(dǎo)，而Logo則是品牌信息的展示，圖標(biāo)體積小巧，它的設(shè)計(jì)要求更加精確，更加一目了然地呈現(xiàn)在用戶面前。通常圖標(biāo)的像素更精準(zhǔn)。

按鈕是UI界面設(shè)計(jì)和交互設(shè)計(jì)的基本元素。它們是用戶交互的時(shí)候，和系統(tǒng)溝通交流的核心組件，是圖形化界面中最早出現(xiàn)的元素，也是最為常見(jiàn)的一種交互對(duì)象。

當(dāng)用戶面對(duì)UI界面時(shí)，用戶基于以往的經(jīng)驗(yàn)和視覺(jué)對(duì)當(dāng)前UI界面中的元素進(jìn)行判斷。設(shè)計(jì)按鈕時(shí)，需要合適的視覺(jué)符號(hào)，如尺寸、形狀、顏色、陰影等，來(lái)幫助用戶理解按鈕。

開(kāi)關(guān)在移動(dòng)UI界面中是經(jīng)常會(huì)遇到的一個(gè)控件，它能夠?qū)�界面中某個(gè)功能或設(shè)置進(jìn)行開(kāi)啟和關(guān)閉。這也是一個(gè)用戶非常好理解的元素。因?yàn)樗�很好地模仿了現(xiàn)實(shí)世界里人們熟悉的開(kāi)關(guān)概念。

關(guān)于這個(gè)元素的設(shè)計(jì)，特別要注意的是“開(kāi)”和“關(guān)”的狀態(tài)在視覺(jué)上需要有明顯差別。這樣能避免用戶花時(shí)間去研究開(kāi)關(guān)的狀態(tài)，很多種的形式對(duì)比或者切換動(dòng)畫(huà)都可以解決這個(gè)問(wèn)題，從而設(shè)計(jì)出很好的用戶體驗(yàn)。

進(jìn)度條是用戶在進(jìn)入某個(gè)界面或者進(jìn)入某個(gè)程序的過(guò)程中，應(yīng)用程序?yàn)榱司彌_和加載信息所顯示出來(lái)的控件。它主要顯示出當(dāng)前加載的百分比，讓用戶掌握相關(guān)的數(shù)據(jù)和進(jìn)度。不管是在移動(dòng)App端，還是PC端，進(jìn)度條的應(yīng)用都非常廣形式也多種多樣。

在內(nèi)容繁雜的界面中，搜索欄通常是最常用的基本視覺(jué)元素。當(dāng)用戶遇到相對(duì)復(fù)雜的界面時(shí)，他們會(huì)立即尋找搜索欄達(dá)到搜索信息的目的。在進(jìn)行界面設(shè)計(jì)時(shí)，可以考慮放置一個(gè)搜索欄以方便用戶操作。

列表布局不同于網(wǎng)格布局，這種導(dǎo)航模式簡(jiǎn)單地由一個(gè)元素與另元素按字母順序、數(shù)字順序，甚至是隨機(jī)的順序排列組成。在使用垂直滾動(dòng)菜單時(shí)，列表框非常適合給用戶操作和閱讀。

列表可以有很多不同的變體，比如產(chǎn)品列表甚至是下拉菜單，列表占用的空間比網(wǎng)格少。如果內(nèi)容文本繁多，可選擇列表布局。

在一個(gè)移動(dòng)設(shè)備的App應(yīng)用程序中，標(biāo)簽欄能夠?qū)崿F(xiàn)在不同的視圖或者功能之間的切換操作，以及瀏覽不同類別的數(shù)據(jù)。它的存在讓界面信息更加規(guī)范和系統(tǒng)。

這里需要注意的是，標(biāo)簽欄和工具欄的不同是，標(biāo)簽欄讓用戶在不同的子任務(wù)、視圖和模式中進(jìn)行切換；工具欄放置著用于操作當(dāng)前屏幕中各對(duì)象。

本文由培訓(xùn)無(wú)憂網(wǎng)長(zhǎng)沙牛耳教育課程顧問(wèn)老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L(zhǎng)沙UI設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無(wú)憂網(wǎng)電腦IT培訓(xùn)或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://elsolbar.com/news-id-11333.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050