【UI設(shè)計(jì)基礎(chǔ)知識】UI界面設(shè)計(jì)怎么劃分

UI界面設(shè)計(jì)是什么?我們來解釋一下。對于用戶的界面，我們想一下，我們?nèi)粘Ｉ�活中接觸到的哪些是用戶界面?我們的手機(jī)界面、電腦界面、iPad界面、還有車載系統(tǒng)界面、VR界面等。將這些界面設(shè)計(jì)劃分為三類：PC端UI設(shè)計(jì)、移動(dòng)端UI設(shè)計(jì)、其他UI設(shè)計(jì)。我們主要給大家介紹的是PC端UI設(shè)計(jì)和移動(dòng)端UI設(shè)計(jì)。

一、PC端UI設(shè)計(jì)

主要應(yīng)用在web上，因此可稱為web UI。它的設(shè)計(jì)范圍包括常見的網(wǎng)站(電商、社交)設(shè)計(jì)、工具(郵箱、后臺系統(tǒng))類網(wǎng)站設(shè)計(jì)等，在web UI的設(shè)計(jì)過程中，一定要注意其載體的基本屬性，用戶使用鼠標(biāo)對web界面進(jìn)行操作，鼠標(biāo)的操作精準(zhǔn)度相對較高，產(chǎn)生錯(cuò)誤的概率也會比較小。

web UI的設(shè)計(jì)師有安全距離的，這個(gè)安全距離會隨著電腦屏幕尺寸的變化而進(jìn)行適配，但一般情況下，我們會使用1000PX的安全距離進(jìn)行設(shè)計(jì)，就是在1000PX的尺寸中進(jìn)行設(shè)計(jì);web UI中的按鈕一般為4中狀態(tài)，處于正常情況下的默認(rèn)狀態(tài)，當(dāng)鼠標(biāo)經(jīng)過按鈕的懸停狀態(tài)，鼠標(biāo)點(diǎn)擊時(shí)的點(diǎn)擊狀態(tài)，按鈕不能被使用的不可用狀態(tài);按鈕的使用位置上，因?yàn)殡娔X操作的界面，所以對于按鈕位置的要求并沒有限制，對于web UI的操作方式主要可通過單擊、雙擊、右鍵。

二、移動(dòng)端UI 設(shè)計(jì)

主要應(yīng)用在移動(dòng)APP上，我們也可稱之為APP UI，它的涉及范圍一般都在手機(jī)和平板電腦上，涉及范圍是手機(jī)和平板電腦上面的各種APP。

相對于電腦，手機(jī)的尺寸比較小，并且一般都是使用手指進(jìn)行操作，所以我們在設(shè)計(jì)手機(jī)端的點(diǎn)擊區(qū)域時(shí)，要考慮用戶手指的粗細(xì)不同，給與一個(gè)合理的點(diǎn)擊范圍，防止進(jìn)行誤操作，提高操作的準(zhǔn)確率。手機(jī)的屏幕尺寸也是比較多的，我們一般采用750x 1334PX 作為設(shè)計(jì)尺寸，APP UI的按鈕有三種狀態(tài)，處于正常情況下的默認(rèn)狀態(tài)，鼠標(biāo)點(diǎn)擊時(shí)的點(diǎn)擊狀態(tài)，按鈕不能被使用的不可用狀態(tài)，相對于web UI來講少了懸停狀態(tài)，主要是因?yàn)椴僮髅浇椴煌��?/p>

對于APP UI中的按鈕，因?yàn)榻缑娴奈锢沓叽缦鄬�來講比較小，所以在進(jìn)行APP UI 的按鈕設(shè)計(jì)時(shí)，要保證點(diǎn)擊區(qū)域可操作，一般設(shè)置為長矩形，所以占的位置就會比較大，可選擇放置在界面大拇指可觸及的范圍內(nèi)。操作方式上APP UI主要通過單擊、長按、滑動(dòng)進(jìn)行控制。