如何成為手機(jī)ui設(shè)計(jì)師

　　一個(gè)成熟的設(shè)計(jì)規(guī)范，一定離不開(kāi)精確的經(jīng)過(guò)多次調(diào)試的數(shù)據(jù)。一個(gè)優(yōu)秀的手機(jī)UI設(shè)計(jì)師，必定也是從一個(gè)普普通通的UI設(shè)計(jì)師慢慢轉(zhuǎn)變的，經(jīng)手過(guò)大大小小上千上萬(wàn)個(gè)設(shè)計(jì)才能積累下豐富的設(shè)計(jì)經(jīng)驗(yàn)，才能根據(jù)需求快速設(shè)計(jì)出滿(mǎn)意的作品。小編帶大家來(lái)學(xué)習(xí)一下手機(jī)UI設(shè)計(jì)的相關(guān)知識(shí)。

　　挑戰(zhàn)和制約：每個(gè)媒體都有它的局限所在。即使是在移動(dòng)端這個(gè)充滿(mǎn)機(jī)會(huì)、自由和創(chuàng)意的平臺(tái)上也有著許多亟待解決的問(wèn)題，和無(wú)法回避的局限性。
 

　　碎片化的移動(dòng)端：不同的智能終端不僅僅尺寸不盡相同，而且因?yàn)榉直媛实牟町愂沟闷聊坏南袼孛芏纫灿泻艽蟛町?，往?xì)了考慮，這些終端的輸入機(jī)制、屏幕比例、屏幕方向都會(huì)影響到移動(dòng)端的UI設(shè)計(jì)。移動(dòng)端的網(wǎng)頁(yè)設(shè)計(jì)可以借助響應(yīng)式設(shè)計(jì)保證不同屏幕下的瀏覽體驗(yàn)，相比之下移動(dòng)端的APP設(shè)計(jì)則相對(duì)缺少流動(dòng)性。所以，作為移動(dòng)端的UI設(shè)計(jì)師，還是需要考慮屏幕差異造成的布局設(shè)計(jì)的不同以及用戶(hù)體驗(yàn)上的變化。
 

　　分裂的操作系統(tǒng)平臺(tái)：每個(gè)操作系統(tǒng)都有它們自己的一套設(shè)計(jì)規(guī)范，交互方式，程序接口，而隨著操作系統(tǒng)的版本更新，這些東西也都有著各自的變化。
 

　　設(shè)計(jì)和構(gòu)建一個(gè)APP的方式會(huì)直接影響到它的性能。手機(jī)里安裝的程序如果設(shè)計(jì)的好可以你的手機(jī)可以待機(jī)一天半，而如果其中有一個(gè)程序設(shè)計(jì)的有問(wèn)題，會(huì)讓你需要出門(mén)多帶一個(gè)移動(dòng)電源。一些不必要的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)可能會(huì)讓你的CPU為之進(jìn)行密集地運(yùn)算，一段存在問(wèn)題的JS代碼可能讓你的瀏覽器耗費(fèi)多于平常數(shù)倍的電量。設(shè)計(jì)和開(kāi)發(fā)，都會(huì)影響到APP的性能，甚至左右手機(jī)的續(xù)航。
 

　　拋棄思維定勢(shì)
 

　　學(xué)校教育和實(shí)際設(shè)計(jì)開(kāi)發(fā)上的“時(shí)代差異”，讓很多設(shè)計(jì)師對(duì)數(shù)字化的互聯(lián)網(wǎng)的認(rèn)知稍顯“靜態(tài)”，甚至形成某種思維定制，對(duì)于移動(dòng)互聯(lián)網(wǎng)也知之甚少。在這個(gè)信息爆炸的時(shí)代，激烈的競(jìng)爭(zhēng)催化下的移動(dòng)互聯(lián)網(wǎng)正在以一種恐怖的速度演化、推進(jìn)，這使得設(shè)計(jì)師們需要緊跟發(fā)展的步伐，隨時(shí)更新升級(jí)自己對(duì)于互聯(lián)網(wǎng)的認(rèn)知。
 

　　從構(gòu)思屏幕布局到考慮界面轉(zhuǎn)換
 

　　當(dāng)涉及手機(jī)UI設(shè)計(jì)的時(shí)候，單單考慮屏幕布局是遠(yuǎn)遠(yuǎn)不夠的。優(yōu)質(zhì)移動(dòng)APP向我們證明了界面間的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)到底能讓一個(gè)UI界面產(chǎn)生怎樣的張力。而Android L所用的Material Design則更是在看似普通的靜態(tài)界面之后，隱藏了一系列讓你欲罷不能的過(guò)度效果。界面轉(zhuǎn)換之間的動(dòng)效，在過(guò)去只為博得一笑，今天卻正在走向主流，成為移動(dòng)端的用戶(hù)體驗(yàn)的核心。它正在成為交互和界面的重要元素，賦予界面以韻律和生命力。動(dòng)效不僅呈現(xiàn)運(yùn)動(dòng)的過(guò)程，還能表現(xiàn)出空間、層次，變化，在基礎(chǔ)的界面結(jié)構(gòu)上為用戶(hù)帶來(lái)截然不同的體驗(yàn)。
 

　　你不需要將界面做獨(dú)特或者原創(chuàng)，尤其是當(dāng)你是為了獨(dú)特而重新設(shè)計(jì)所有的界面，然后讓整個(gè)產(chǎn)品為獨(dú)特而擔(dān)上風(fēng)險(xiǎn)。很多時(shí)候，堅(jiān)持使用原生UI元素和模式是讓?xiě)?yīng)用能按時(shí)出貨的重要保證。比起強(qiáng)行推動(dòng)獨(dú)特原創(chuàng)的設(shè)計(jì)，很多時(shí)候更合適的做法是打造簡(jiǎn)單高效的交互界面，創(chuàng)造真正的品牌價(jià)值。
 

　　然而，想要學(xué)習(xí)手機(jī)UI設(shè)計(jì)新技能需要：
 

　　了解平臺(tái)：正如同web設(shè)計(jì)師需要了解HTML/CSS一樣，作為移動(dòng)端UI設(shè)計(jì)師的你應(yīng)該了解移動(dòng)端APP的架構(gòu)。首先移動(dòng)端開(kāi)發(fā)的語(yǔ)言和網(wǎng)頁(yè)設(shè)計(jì)就不太一樣，各個(gè)不同平臺(tái)有著各自的編程語(yǔ)言和接口，界面的構(gòu)成也無(wú)法使用CSS和標(biāo)簽來(lái)實(shí)現(xiàn)。深入閱讀官方的開(kāi)發(fā)文檔，明白APP的構(gòu)成，編譯方式，發(fā)布方式，了解設(shè)計(jì)的規(guī)則。這些東西不僅關(guān)系到你的應(yīng)用開(kāi)發(fā)好壞，還會(huì)影響系統(tǒng)的穩(wěn)定性，電池續(xù)航長(zhǎng)短等多種因素。
 

　　了解移動(dòng)端的技術(shù)構(gòu)成：了解位置服務(wù)(wifi，GPS等)，藍(lán)牙(低功耗藍(lán)牙技術(shù))，信號(hào)，前后攝像頭，麥克風(fēng)，陀螺儀，位置傳感器，加速度傳感器，指紋掃描儀(iPhone 5s)，眼動(dòng)追蹤技術(shù)，語(yǔ)音識(shí)別，人臉識(shí)別，等等等等。每一個(gè)新技術(shù)的背后以為著應(yīng)用程序更多的可能性，交互設(shè)計(jì)、使用體驗(yàn)，甚至商業(yè)模式。
 

　　發(fā)掘本地UI組件的開(kāi)發(fā)潛質(zhì)：每個(gè)移動(dòng)操作系統(tǒng)中中總有著大量的本地UI組件，他們有著極大的自由度，方便你進(jìn)行定制。你需求確切地知道他們的特征(尺寸，大小，功用)，你可以為與你合作的開(kāi)發(fā)者節(jié)省大量的工作時(shí)間。
 

　　了解移動(dòng)端的工作流程：安裝SDK并運(yùn)行，了解移動(dòng)開(kāi)發(fā)框架，比如TubyMotion、Xamarin、Titanium。熟悉集成開(kāi)發(fā)環(huán)境，因?yàn)檫@其中包含了移動(dòng)開(kāi)發(fā)所需的方方面面。
 

　　了解移動(dòng)端的界面模式：三大移動(dòng)平臺(tái)之間，有著相似之處，但是在深入探究他們的交互設(shè)計(jì)，會(huì)發(fā)現(xiàn)它們?cè)诶砟钌系木薮蟛町悺Ｗ鳛橐粋€(gè)設(shè)計(jì)師，你需要明白這些差異所在，以及它們是如何體現(xiàn)在實(shí)際案例中的。
 

　　記錄并解釋你的UI設(shè)計(jì)：考慮到屏幕截圖并不足以表現(xiàn)UI全部的特性，你需要學(xué)會(huì)記錄界面不同的狀態(tài)、轉(zhuǎn)變過(guò)程、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)等信息，并且學(xué)會(huì)記錄界面對(duì)于不同狀況的反饋。
 

　　在設(shè)計(jì)階段踐行精益UX設(shè)計(jì)：一個(gè)現(xiàn)代的設(shè)計(jì)師應(yīng)該是具備戰(zhàn)略眼光的設(shè)計(jì)師。你的目標(biāo)不能局限于悶頭制作漂亮的界面，你應(yīng)該讓你的設(shè)計(jì)與團(tuán)隊(duì)合作結(jié)合到一起，切合項(xiàng)目需求。洞悉用戶(hù)深層次的需求，并且能快速地隨之反饋到設(shè)計(jì)上。將設(shè)計(jì)作品保存下來(lái)并附上詳細(xì)的說(shuō)明，確保所有的設(shè)計(jì)都與核心理念保持一致，與用戶(hù)需要保持一致。
 

　　在開(kāi)發(fā)階段采用敏捷UX設(shè)計(jì)：你不能只將高保真的模型交給開(kāi)發(fā)者就了事，因?yàn)樵陂_(kāi)發(fā)過(guò)程中會(huì)不斷提出新的需求?？倳?huì)有之前考慮不周全的情況，需要在開(kāi)發(fā)階段進(jìn)行補(bǔ)充完善，設(shè)計(jì)師需要隨之進(jìn)行快速響應(yīng)。所以，在這個(gè)階段，設(shè)計(jì)師真的需要坐在開(kāi)發(fā)者旁邊應(yīng)付突發(fā)情況。確保開(kāi)發(fā)者在碰到新的需求的時(shí)候，不用他們自己來(lái)補(bǔ)充UX的細(xì)節(jié)，或者再來(lái)找設(shè)計(jì)師。
 

　　手機(jī)UI設(shè)計(jì)的小技巧
 

　　響應(yīng)式設(shè)計(jì)：在移動(dòng)端，響應(yīng)式設(shè)計(jì)并非是放之四海皆準(zhǔn)的解決方案。有時(shí)候它非常適用，但是有的時(shí)候并非如此。你有責(zé)任考量什么時(shí)候采用專(zhuān)門(mén)的解決方案，什么時(shí)候需要做響應(yīng)式設(shè)計(jì)。
 

　　謹(jǐn)慎使用CSS和JS：CSS動(dòng)畫(huà)，漸變，陰影都非常贊，也非常容易實(shí)現(xiàn)。視差網(wǎng)頁(yè)看起來(lái)也很酷，很多設(shè)計(jì)師都對(duì)此感興趣。但是這些元素都非常消耗資源，對(duì)移動(dòng)端的瀏覽器會(huì)產(chǎn)生很大的負(fù)荷，進(jìn)而影響電池續(xù)航。適度控制CSS特效和JS動(dòng)效都是很有必要的。即便低性能手機(jī)上瀏覽器可以良好地支持CSS3選擇器，但是性能的瓶頸會(huì)讓整體體驗(yàn)非常差。
 

　　像素密度
 

　　大部分的app和移動(dòng)端網(wǎng)頁(yè)，在各種尺寸的屏幕上都能正常顯示。屏幕是由很多像素點(diǎn)組成的。之前提到那么多種分辨率，都是手機(jī)屏幕的實(shí)際像素尺寸。每個(gè)點(diǎn)發(fā)出不同顏色的光，構(gòu)成我們所看到的畫(huà)面。而手機(jī)屏幕的物理尺寸，和像素尺寸是不成比例的。像素密度這項(xiàng)指標(biāo)是連接數(shù)字世界與物理世界的橋梁。
 

　　Pixels per inch，準(zhǔn)確的說(shuō)是每英寸的長(zhǎng)度上排列的像素點(diǎn)數(shù)量。1英寸是一個(gè)固定長(zhǎng)度，等于2.54厘米，大約是食指最末端那根指節(jié)的長(zhǎng)度。像素密度越高，代表屏幕顯示效果越精細(xì)。
 

　　倍率與邏輯像素
 

　　以1倍的mdpi作為基準(zhǔn)。像素密度更高或者更低的設(shè)備，只需乘以相應(yīng)的倍率，就能得到與基準(zhǔn)倍率近似的顯示效果。Android設(shè)備的邏輯像素尺寸并不統(tǒng)一。比如兩種常見(jiàn)的屏幕480x800和1080x1920，它們分別屬于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320x533和360x640。即使有倍率的存在，各種Android設(shè)備的顯示效果仍然無(wú)法做到完全一致。真正決定顯示效果的，是邏輯像素尺寸。單位決定了我們的思考方式。在設(shè)計(jì)和開(kāi)發(fā)過(guò)程中，應(yīng)該盡量使用邏輯像素尺寸來(lái)思考界面。
 

　　無(wú)論畫(huà)布設(shè)成多大，我們?cè)O(shè)計(jì)的是基準(zhǔn)倍率的界面樣式，而且開(kāi)發(fā)人員需要的單位都是邏輯像素。所以為了保證準(zhǔn)確高效的溝通，雙方都需要以邏輯像素尺寸來(lái)描述和理解界面。
 

　　實(shí)際應(yīng)用
 

　　要把單位設(shè)置成邏輯像素。打開(kāi)PS的首選項(xiàng)——單位與標(biāo)尺界面，把尺寸和文字單位都改成點(diǎn)(Point)。這里的點(diǎn)也就是pt，無(wú)論設(shè)計(jì)iOS、Android還是Web應(yīng)用，單位都用它;調(diào)節(jié)倍率，則通過(guò)圖像大小里的DPI來(lái)控制。這個(gè)DPI，其實(shí)就是PPI，像素密度。有個(gè)常識(shí)大家都知道，屏幕上的設(shè)計(jì)DPI設(shè)成72，印刷品設(shè)計(jì)DPI設(shè)成300;由于1英寸是固定長(zhǎng)度，每1英寸有多少個(gè)像素點(diǎn)決定了畫(huà)質(zhì)清晰程度，DPI達(dá)到300以上，其細(xì)膩程度就會(huì)給人真實(shí)感，像真實(shí)世界中的物件。最早的圖形設(shè)計(jì)是在mac電腦上進(jìn)行的，mac本身的顯示器分辨率就是72。PS中把圖像DPI也設(shè)成72，就能保證屏幕上顯示的尺寸和打印尺寸相同，便于設(shè)計(jì)。
 

　　移動(dòng)端的尺寸比PC端復(fù)雜，關(guān)鍵就在倍率。但也正因?yàn)楸堵实拇嬖?，把大大小小的屏幕拉回到同一水平線(xiàn)，得以保證一套設(shè)計(jì)適應(yīng)各種屏幕。
 

　　交互設(shè)計(jì)規(guī)則適應(yīng)手機(jī)端
 

　　交互設(shè)計(jì)的五大要素：
 

　　目標(biāo)群設(shè)計(jì)(Goal-driven Design)
 

　　為你的目標(biāo)用戶(hù)群做設(shè)計(jì)。像調(diào)研或者訪(fǎng)談形式的用戶(hù)研究，能幫助你塑造目標(biāo)用戶(hù)群的人物特征。這可以讓你為用戶(hù)目標(biāo)定制app的工作流程，以滿(mǎn)足他們的需求。
 

　　可用性(Usability)
 

　　如果用戶(hù)認(rèn)為你的app很復(fù)雜，那么他們肯定不會(huì)從App Store下載?？捎眯詴?huì)讓產(chǎn)品變得有用，這也是成為希望的第一步。
 

　　功能與標(biāo)識(shí)(Affordance & Signifiers)
 

　　標(biāo)識(shí)是功能的提示作用。比如，帶下劃線(xiàn)的藍(lán)色文本的顯示，你會(huì)知道點(diǎn)擊它會(huì)跳轉(zhuǎn)到別處 。使用正確的標(biāo)識(shí)，讓用戶(hù)不用花費(fèi)時(shí)間去考慮每個(gè)UI元素的用途。
 

　　易學(xué)(Learnability)
 

　　你希望用戶(hù)本能的知道如何使用的界面。這是設(shè)計(jì)模式的用場(chǎng)，在后文中我們將會(huì)說(shuō)到。熟悉的模式能夠讓用戶(hù)很容易地適應(yīng)新的app。
 

　　反饋與響應(yīng)時(shí)間(Feedback & Response Time)
 

　　反饋?zhàn)層脩?hù)知道一個(gè)任務(wù)完成與否。它可以是一個(gè)很簡(jiǎn)單的蜂鳴聲，又或是復(fù)雜一點(diǎn)的模態(tài)窗口。請(qǐng)確保您的意見(jiàn)是友好的，人性化，并通過(guò)尼爾森諾曼集團(tuán)規(guī)定的時(shí)間內(nèi)指導(dǎo)響應(yīng)。
 

　　用戶(hù)群
 

　　屏幕尺寸不是手機(jī)設(shè)計(jì)中的唯一約束，用戶(hù)也形成了界面約束的基礎(chǔ)，所以，在創(chuàng)建針對(duì)目標(biāo)群app的第一步是要了解你的用戶(hù)。

　　UX設(shè)計(jì)過(guò)程中的三個(gè)基本策略：
 

　　角色
 

　　角色是從你的目標(biāo)用戶(hù)的預(yù)期行為塑造虛構(gòu)人物，它將幫你決定app需要什么來(lái)運(yùn)營(yíng)。
 

　　用戶(hù)場(chǎng)景
 

　　場(chǎng)景會(huì)模擬用戶(hù)會(huì)干什么。隨著用戶(hù)場(chǎng)景，你就可以設(shè)計(jì)出最適合他們的UI以及他們的想要達(dá)成的效果是怎樣。
 

　　體驗(yàn)地圖
 

　　在這里你可以了解所有的單一交互中的會(huì)出現(xiàn)的條件。體驗(yàn)地圖繪制的每個(gè)步驟都是用戶(hù)在APP中可能經(jīng)歷的。它可以幫助你了解所有步驟發(fā)生時(shí)用戶(hù)的情感和周?chē)那闆r。
 

　　原型圖
 

　　在勾畫(huà)原型之前，用書(shū)面大綱的形式先表現(xiàn)可以幫助你更清楚的摸索最重要的部分——內(nèi)容。在內(nèi)容基礎(chǔ)上建立流程能讓你對(duì)頁(yè)面的總數(shù)有一個(gè)更精確的評(píng)估，接下來(lái)為app每一頁(yè)流程都繪制一張草圖。然后將紙上的草圖剪出來(lái)形成紙上原型，或用工具生成數(shù)字原型。大綱可以幫助您快速了解不同頁(yè)面的流程;草圖將APP的布局和結(jié)構(gòu)的詳細(xì)信息融入流程中;快速原型可以幫助你測(cè)試這些用戶(hù)的想法。
 

　　兩種常見(jiàn)的交互設(shè)計(jì)模式：
 

　　手勢(shì)
 

　　觸摸設(shè)備的定義由手勢(shì)決定。觸摸，滑動(dòng)，雙擊，捏和縮放正在成為用戶(hù)的第二自然反應(yīng)。
 

　　動(dòng)畫(huà)
 

　　加入動(dòng)作能使用戶(hù)專(zhuān)注于用戶(hù)界面。元素消失與元素滑出的視線(xiàn)也是有差的，前者是缺失;后者是之后還可以供用戶(hù)使用。當(dāng)動(dòng)畫(huà)與手勢(shì)相結(jié)合，又有了更深度的體驗(yàn)。手機(jī)的交互模式更有助于選取通用界面元素的布局。
 

　　漸變和陰影
 

　　扁平化是現(xiàn)今的設(shè)計(jì)趨勢(shì)，但不意味著陰影和漸變都沒(méi)了。當(dāng)設(shè)計(jì)按鈕，切換等視覺(jué)效果，你必須考慮使用陰影。通過(guò)擴(kuò)展陰影梯度，使UI設(shè)計(jì)更自然的呈現(xiàn)給用戶(hù)。您可以使用陰影和漸變創(chuàng)建3D按鈕和輸入形式框，使元素出現(xiàn)嵌入和擴(kuò)展的效果。
 

　　我們來(lái)看下相關(guān)的元素
 

　　嵌入式元素：輸入字段，按鈕觸動(dòng)，滑塊軌道，未選中的單選按鈕，復(fù)選框。
 

　　外顯元素包括：未按下按鈕，滑塊按鈕，下拉控件，選擇單選按鈕，彈出窗口。
 

　　看過(guò)扁平化設(shè)計(jì)趨勢(shì)的現(xiàn)在與未來(lái)，使用半扁平化設(shè)計(jì)解決嵌入和外顯元素會(huì)更為安全。
 

　　分享四款UI設(shè)計(jì)師手機(jī)上必裝的幾款配色參考APP。
 

　　Palette — 一款設(shè)計(jì)愛(ài)好者會(huì)喜歡的取色 APP (Android)
 

　　Palette 的中文意思調(diào)色板。它能夠?qū)⒁粡垐D片里的突出顏色和顏色代碼提取出來(lái)，從而方便你學(xué)習(xí)其中的配色方案以及獲得配色靈感。主要功能是取到一張圖的色彩，然后返回一系列顏色，可供我們選擇設(shè)置我們的文本顏色，背景顏色，從而達(dá)到界面的一致性。很適合插畫(huà)師和前端工程師快速提取顏色搭配代碼的一款安卓APP。
 

　　Pixolor — 一鍵拾取屏幕色彩，設(shè)計(jì)師高效工作利器(Android)
 

　　Pixolor 是一款 Android 平臺(tái)下的屏幕取色應(yīng)用,它能夠在屏幕上懸浮一個(gè)圓形放大鏡,其中包含顏色信息與像素坐標(biāo)。Pixolor 可以精確地查看手機(jī)圖片對(duì)應(yīng)的像素的顏色，它有一個(gè)浮動(dòng)在屏幕上的取色盤(pán)用來(lái)獲取色彩信息和像素信息，以后不用擔(dān)心手機(jī)圖片上傳到電腦會(huì)失真。
 

　　RealHex (iOS)
 

　　RealHex 作為一個(gè)拾取顏色并記錄顏色參數(shù)值的應(yīng)用，不僅僅是設(shè)計(jì)師，畫(huà)家，攝影師的專(zhuān)利，任何人都可以創(chuàng)造性地使用它。大自然的世界具有天然的和諧配色：選取一處風(fēng)景，對(duì)景物取色，形成的配色方案可以運(yùn)用在平面設(shè)計(jì)，室內(nèi)設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)中，相比去配色網(wǎng)站尋找現(xiàn)成的配色方案。
 

　　FABRIKA – 自制裝飾藝術(shù)(iOS)
 

　　Fabrika 并不算是一個(gè)純粹的配色工具，同時(shí)FABRIKA也是一款專(zhuān)門(mén)設(shè)計(jì)制作壁紙的APP, 它的色彩選擇和搭配功能特別好，所以將它推薦給設(shè)計(jì)師或插畫(huà)師?？梢园阉?dāng)做是一款風(fēng)格特異的繪圖軟件，雙擊空白畫(huà)紙即可選擇圖案的色板，繼而再選取圖案的形狀，可以同時(shí)選擇多種。
 

　　學(xué)會(huì)軟件技能從來(lái)都不是目的，都是為了設(shè)計(jì)出滿(mǎn)意的作品，在一些便捷快速繪圖的軟件的幫助下，不只是手機(jī)UI設(shè)計(jì)師，所有的UI設(shè)計(jì)師，都有了更多思考的時(shí)間，更多的用思維考慮與用戶(hù)之間的關(guān)聯(lián)，怎么設(shè)計(jì)出用戶(hù)需要以及滿(mǎn)意的作品，能得到用戶(hù)的認(rèn)可才是對(duì)一個(gè)作品好不好的最好證明。