1.1 什么是UI動效設(shè)計

當互聯(lián)網(wǎng)時代發(fā)展到移動互聯(lián)網(wǎng)時代時，不僅有網(wǎng)頁UI，還有手機和穿戴設(shè)備的UI，都為動效設(shè)計的發(fā)展提供了更多的可能性。在學習UI動效設(shè)計之前，先認識一下什么是UI。

1.1.1 先說UI

UI是英文User Interface的縮寫，本意是用戶界面，從字面上看由用戶和界面兩個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系。以手機為例，手機上的界面都屬于UI。UI設(shè)計是指軟件的人機交互、操作邏輯和界面美觀的整體設(shè)計。

UI設(shè)計具體包括界面設(shè)計、按鈕設(shè)計、導航設(shè)計、圖標設(shè)計等，如圖1-1所示。

1.3.3 配色方式

色彩和其他事物一樣，需要使用得恰到好處。如果在配色方案中使用3種基本色，將獲得更好的效果。將顏色應用于設(shè)計項目中，要保持色彩平衡，使用的顏色越多，越難保持平衡。配色方式有以下幾種。

1. 色相差配色

色相差配色是由一種色相構(gòu)成的統(tǒng)一性配色，即由某一種色相支配、統(tǒng)一畫面的配色。除同一種色相外，色相環(huán)上相鄰的類似色也可以形成相近的配色效果。圖1-24所示為同色系主導的配色界面，主色和輔助色都在統(tǒng)一的色相上，這種配色方式的頁面往往會給人一致化的感受。

1.4.2 按鈕

按鈕的作用是引發(fā)即時操作，即當用戶單擊按鈕后，觸發(fā)即時操作。作為基礎(chǔ)組件之一，按鈕廣泛應用于不同平臺的產(chǎn)品中。同一應用軟件的按鈕應該具有統(tǒng)一的設(shè)計風格，每個按鈕之間也應該有所區(qū)別，如圖1-28所示。

完整的按鈕視覺體系包含強、中、弱3個層次，按鈕的狀態(tài)分為正常未單擊、單擊時和不可用3種狀態(tài)，如圖1-29所示。

1.4.3 導航

導航的作用是引導和指示，它可以引導用戶和產(chǎn)品進行有效的交互，實現(xiàn)用戶的目標。單擊導航上的按鈕可以進入對應的內(nèi)容頁面，導航的種類有很多，如宮格式導航、陳列式導航、舵式導航等。圖1-30所示為宮格式導航和陳列式導航。

1.4.4 欄

欄是包含了導航信息、告訴用戶目前所在的位置和能幫助用戶瀏覽或啟動某些操作的控制按鈕。欄分為狀態(tài)欄、導航欄、標簽欄和工具欄。圖1-31所示為狀態(tài)欄。