1.3 App界面設(shè)計師的職責(zé)

一般來說，每個設(shè)計師的喜好和能力不同，因此在設(shè)計任務(wù)分配的時候，也會根據(jù)不同設(shè)計師的特點來分配工作，這里大概講一下UI設(shè)計師在工作中可能會遇到的工作任務(wù)。

1.3.1 職責(zé)之內(nèi)

UI設(shè)計師主要負(fù)責(zé)根據(jù)交互設(shè)計稿來做界面設(shè)計，包括界面布局的調(diào)整、界面色調(diào)的選擇、風(fēng)格的設(shè)定、圖標(biāo)的繪制、交互動畫的設(shè)計、圖片資源的輸出、界面尺寸的標(biāo)注、設(shè)計規(guī)范的制定、設(shè)計的走查跟進(jìn)還原，有時也會做LOGO設(shè)計、VI設(shè)定、網(wǎng)頁設(shè)計等。

移動端界面設(shè)計由于應(yīng)用場景的不同，需要設(shè)計簡單、輕量化，還需要準(zhǔn)確地傳達(dá)信息內(nèi)容，讓用戶在App內(nèi)盡快找到自己需要的功能。例如，地圖類App 的界面需要幫助用戶在最短的時間內(nèi)獲取所需信息，而娛樂類App的界面則需要幫助用戶消磨時間。

? 界面布局的調(diào)整

屏幕的布局需要滿足用戶的操作習(xí)慣以及視覺習(xí)慣。如圖1-12所示，用戶在屏幕上的閱讀順序通常是從上到下、從左到右，因此，為了節(jié)約用戶時間，重要的信息應(yīng)該放在屏幕最上方；用戶在屏幕上的操作通常通過大拇指來完成，這就要求設(shè)計師將用戶最常用的操作置于屏幕最下方，但要盡量避免將按鈕置于手指的觸碰死角。如圖1-13所示，通常我們可以通過設(shè)置長按出現(xiàn)操作按鈕的方式來使界面更加簡潔，環(huán)狀排列的按鈕也更符合人體的手指滑動軌跡。

? 界面色調(diào)的選擇

界面色調(diào)的選擇是一門很重要的學(xué)問，色調(diào)首先需要根據(jù)客戶和用戶的定位以及訴求來選擇。冷色調(diào)給人的感覺偏理性，暖色調(diào)給人的感覺偏感性，適宜的顏色能夠在本身特性的基礎(chǔ)上賦予App更多主觀感受，而App反過來也促進(jìn)了不同顏色帶給人們的更多心理感知。在進(jìn)行界面色調(diào)的選擇時，首先可以參考競品顏色，選擇與競品相近的顏色，例如，淘寶、小紅書和聚美優(yōu)品等購物類App，普遍選擇了橙色、紅色；而金融類的支付寶、手機(jī)銀行等App則普遍選擇了藍(lán)色和白色作為界面主色調(diào)。其次也可以采用與競品完全不同的顏色來進(jìn)行區(qū)別定位，例如QQ用比較亮的藍(lán)色和白色作為界面主色調(diào)，而微信采用的則是綠色和黑色，這種顏色的區(qū)別讓QQ更符合面向青少年的定位，讓微信更符合中青年白領(lǐng)的定位，顏色的不同也促進(jìn)了兩者視覺風(fēng)格上的差異化發(fā)展。

? 風(fēng)格的設(shè)定

設(shè)計師在進(jìn)行界面風(fēng)格設(shè)定時，常常想突破原有的設(shè)計進(jìn)行風(fēng)格的創(chuàng)新，但這樣的創(chuàng)新是具有一定風(fēng)險的，如果能從趨勢中發(fā)現(xiàn)潛在的先進(jìn)點，的確能夠使你的設(shè)計脫穎而出，但前提是它必須經(jīng)得起市場的驗證，任何設(shè)計師都不能為了標(biāo)新立異而拿產(chǎn)品冒險。

? 圖標(biāo)的繪制

圖標(biāo)對于界面設(shè)計師來說是花費時間最多的一項工作內(nèi)容，圖標(biāo)能夠加快用戶獲取信息的速度。畫好一個圖標(biāo)需要關(guān)注圖標(biāo)的大小、造型以及氛圍。圖標(biāo)的大小事實上影響到了每個功能的優(yōu)先級，但對于不確定用戶需求優(yōu)先級的功能按鈕，就需要設(shè)計一整套平級的圖標(biāo)，避免因圖標(biāo)大小帶來對界面元素優(yōu)先級的影響。在設(shè)計時，除了判斷優(yōu)先級大小以外，還必須要考慮到人的視覺影響因素。例如，正方形邊長和圓形直徑相等，但是在視覺上，正方形比圓形更大，因此在設(shè)計時，我們就要通過限定框，在畫圖前先規(guī)定好不同圖形的視覺等大框，限定框可以參考Iconfont（阿里巴巴矢量圖標(biāo)庫）中的矢量圖形設(shè)計模板。圖1-14所示為圓角正方形、圓形以及不同方向的長方形的限定框。

? 交互動畫的設(shè)計

對于任何用戶界面來說，視覺反饋都舉足輕重，一方面視覺反饋可以明確用戶對App的有效操控，另一方面視覺反饋可以提示用戶App的正常運轉(zhuǎn)。動效還可以反饋按鈕功能的改變、屏幕空間的擴(kuò)展、操作結(jié)果的提示等，動效還能夠表現(xiàn)按鈕與功能之間的層級關(guān)系，例如長按出現(xiàn)分享圖標(biāo)，則該圖標(biāo)最好從長按處彈出，而不是從屏幕側(cè)面劃出。

? 圖片資源的輸出

圖片資源輸出時，若繪制的界面或圖標(biāo)擁有較多圖層樣式，在輸出多種尺寸的資源時，直接縮放將會導(dǎo)致界面失真，或原有圖形發(fā)生不符合預(yù)期的改變，這是因為縮放過程中圖層樣式中的參數(shù)不會等比縮放。因此，在輸出資源時需要選中所有圖層，轉(zhuǎn)換為智能對象后再進(jìn)行縮放處理，這里的細(xì)節(jié)操作會在后文的實操內(nèi)容中詳細(xì)介紹。

? 界面尺寸的標(biāo)注

頁面標(biāo)注是設(shè)計師與研發(fā)人員交接設(shè)計稿的重要環(huán)節(jié)，它說明了界面中元素與元素之間的距離、元素的尺寸、字體字號等詳細(xì)信息。研發(fā)人員將根據(jù)標(biāo)注去做界面的還原，將靜態(tài)設(shè)計稿轉(zhuǎn)化為可操作的程序。標(biāo)注時需要保證所有的尺寸都是偶數(shù)，這是為了方便研發(fā)人員在寫程序時進(jìn)行屏幕單位的換算。

? 設(shè)計規(guī)范的制定

規(guī)范能夠幫助用戶節(jié)約學(xué)習(xí)成本，將系統(tǒng)養(yǎng)成的使用習(xí)慣直接套用在App中，還能夠幫助前端開發(fā)人員節(jié)約開發(fā)迭代的時間，直接調(diào)用自帶標(biāo)準(zhǔn)控件進(jìn)行程序開發(fā)。

? 設(shè)計的跟進(jìn)和還原

設(shè)計師將設(shè)計稿交到開發(fā)人員手上時，雖然已經(jīng)標(biāo)注好、切好圖，但是不代表開發(fā)人員能夠?qū)⒔缑姹磉_(dá)得與設(shè)計稿完全一樣，有時甚至?xí)嬖诤艽蟮钠睢Ｒ虼耍O(shè)計師要做好走查工作，檢查頁面的一致性，確保方案的可用性，確保屏幕上的按鈕易于操作，確保文本易于閱讀，檢查界面顏色在不同屏幕上的展示效果。

1.3.2 職責(zé)之外

所謂技多不壓身，設(shè)計師涉獵的知識面可以廣一點，但是設(shè)計的基本功一定要扎實。

? 基礎(chǔ)程序語言

通常，UI設(shè)計師不需要做編程相關(guān)的事情，但是懂一點基礎(chǔ)的程序語言，能夠減少頁面修改次數(shù)，降低溝通成本。當(dāng)然，越大的企業(yè)分工越細(xì)致，對專業(yè)水平的要求也就更高，因此，如果處于設(shè)計的初級階段，首先應(yīng)該提升自己的設(shè)計能力，其次才是了解基礎(chǔ)的編程知識。

? 手繪能力

通常，移動端界面設(shè)計師不需要太高超的手繪能力，但優(yōu)秀的手繪能力，能夠幫助你進(jìn)行LOGO或者企業(yè)吉祥物、個性化軟件皮膚的設(shè)計。