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

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

一、PC端UI設(shè)計

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

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

二、移動端UI 設(shè)計

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

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

對于APP UI中的按鈕，因為界面的物理尺寸相對來講比較小，所以在進(jìn)行APP UI 的按鈕設(shè)計時，要保證點(diǎn)擊區(qū)域可操作，一般設(shè)置為長矩形，所以占的位置就會比較大，可選擇放置在界面大拇指可觸及的范圍內(nèi)。操作方式上APP UI主要通過單擊、長按、滑動進(jìn)行控制。