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

UI界面設(shè)計(jì)是什么?我們來(lái)解釋一下。對(duì)于用戶(hù)的界面，我們想一下，我們?nèi)粘Ｉ�活中接觸到的哪些是用戶(hù)界面?我們的手機(jī)界面、電腦界面、iPad界面、還有車(chē)載系統(tǒng)界面、VR界面等。將這些界面設(shè)計(jì)劃分為三類(lèi)：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上，因此可稱(chēng)為web UI。它的設(shè)計(jì)范圍包括常見(jiàn)的網(wǎng)站(電商、社交)設(shè)計(jì)、工具(郵箱、后臺(tái)系統(tǒng))類(lèi)網(wǎng)站設(shè)計(jì)等，在web UI的設(shè)計(jì)過(guò)程中，一定要注意其載體的基本屬性，用戶(hù)使用鼠標(biāo)對(duì)web界面進(jìn)行操作，鼠標(biāo)的操作精準(zhǔn)度相對(duì)較高，產(chǎn)生錯(cuò)誤的概率也會(huì)比較小。

web UI的設(shè)計(jì)師有安全距離的，這個(gè)安全距離會(huì)隨著電腦屏幕尺寸的變化而進(jìn)行適配，但一般情況下，我們會(huì)使用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)過(guò)按鈕的懸停狀態(tài)，鼠標(biāo)點(diǎn)擊時(shí)的點(diǎn)擊狀態(tài)，按鈕不能被使用的不可用狀態(tài);按鈕的使用位置上，因?yàn)殡娔X操作的界面，所以對(duì)于按鈕位置的要求并沒(méi)有限制，對(duì)于web UI的操作方式主要可通過(guò)單擊、雙擊、右鍵。

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

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

相對(duì)于電腦，手機(jī)的尺寸比較小，并且一般都是使用手指進(jìn)行操作，所以我們?cè)谠O(shè)計(jì)手機(jī)端的點(diǎn)擊區(qū)域時(shí)，要考慮用戶(hù)手指的粗細(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)，相對(duì)于web UI來(lái)講少了懸停狀態(tài)，主要是因?yàn)椴僮髅浇椴煌��?/p>

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