全方位梳理:如何成為一個移動端UI設(shè)計師

移動端的UI設(shè)計有其獨有的一套設(shè)計規(guī)則和約束。新技術(shù)的不斷加入促進(jìn)了移動平臺的快速增長，而移動端的UI設(shè)計也和傳統(tǒng)的平面海報/網(wǎng)頁設(shè)計不太一樣。那么，要成為一個合格的移動端UI設(shè)計師需要掌握什么樣的技能，經(jīng)歷怎樣的涅磐才行呢？

Part 1 挑戰(zhàn)和制約

每個媒體都有它的局限所在。即使是在移動端這個充滿機(jī)會、自由和創(chuàng)意的平臺上也有著許多亟待解決的問題，和無法回避的局限性。

碎片化的移動端

分裂的操作系統(tǒng)平臺

目前主流的三大移動端操作系統(tǒng)是iOS，Android 和 Windows Phone（市場份額較小，在國內(nèi)基本被邊緣化了），每個操作系統(tǒng)都有它們自己的一套設(shè)計規(guī)范，交互方式，程序接口，而隨著操作系統(tǒng)的版本更新，這些東西也都有著各自的變化。其中最典型的就是Android操作系統(tǒng)的版本分裂，分裂所造成的程序兼容問題至今都尚未彌合，這其中涉及到了操作系統(tǒng)版本的差異，以及廠商定制化之后造成的千奇百怪的兼容性問題（Android開發(fā)者已經(jīng)無數(shù)次哭暈在廁所）。iOS也隨著6.0到7.0的大版本升級，經(jīng)歷了一個較長的過度時期，至今兩個大版本之間在設(shè)計風(fēng)格和兼容性上的問題還影響著開發(fā)者。Windows Phone 從7到8的升級有多蛋疼我就不在此贅述了，那不堪回首的過去和微軟高管被口水淹沒的場景我真的不想回憶。

即使是三大平臺在各自平臺內(nèi)交互設(shè)計有著較高的統(tǒng)一，系統(tǒng)版本分裂、操作系統(tǒng)差異以及廠商定制化所造成的影響是不容開發(fā)者和設(shè)計師忽視的。

性能

設(shè)計和構(gòu)建一個APP的方式會直接影響到它的性能。換句話說，手機(jī)里安裝的程序如果設(shè)計的好可以你的手機(jī)可以待機(jī)一天半，而如果其中有一個程序設(shè)計的有問題，會讓你需要出門多帶一個移動電源了。一些不必要的轉(zhuǎn)場動畫可能會讓你的CPU為之進(jìn)行密集地運(yùn)算，一段存在問題的JS代碼可能讓你的瀏覽器耗費(fèi)多于平常數(shù)倍的電量。也許今年剛剛上的Galaxy S5能夠流暢運(yùn)行某個應(yīng)用，但是2年前的Galaxy Nexus可能會打開應(yīng)用的時候立馬卡出翔。總的來說，設(shè)計和開發(fā)，都會影響到APP的性能，甚至左右手機(jī)的續(xù)航（部分國產(chǎn)手機(jī)用戶同開發(fā)者一起哭暈在廁所）。

開發(fā)與成本控制

有很多應(yīng)用在構(gòu)思之初非?？犰判路f，但是這并不意味著它可以輕松實現(xiàn)。應(yīng)用的設(shè)計和開發(fā)的方式會直接決定它能否在Deadline來臨之前實現(xiàn)。如果我們無法認(rèn)清一個應(yīng)用的開發(fā)成本，那么開發(fā)者所承擔(dān)的負(fù)擔(dān)會成倍增加，也為應(yīng)用的后續(xù)發(fā)展埋下了禍根。

Part 2 拋棄思維定勢

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

移動端并非畫布

移動端設(shè)計和平面設(shè)計有著巨大的差異，它不再是一張平面的畫布。我懷疑PS和AI并不足以幫助設(shè)計師完成從平面向移動互聯(lián)網(wǎng)的轉(zhuǎn)變，盡管PS和AI已經(jīng)幫助設(shè)計師們在過去的20年里完成了無數(shù)壯舉。目前，我們依然需要借助它們來繪制更多不同屏幕尺寸下的UI和圖標(biāo)，但是我們需要借助更多的其他軟件來展現(xiàn)移動端不一樣的一面，比如用AE來繪制動效。

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

的確，當(dāng)涉及移動端UI設(shè)計的時候，單單考慮屏幕布局是遠(yuǎn)遠(yuǎn)不夠的。像Facebook Paper，雅虎天氣，Weather Channl這樣的優(yōu)質(zhì)移動APP就像我們證明了界面間的轉(zhuǎn)場動畫到底能讓一個UI界面產(chǎn)生怎樣的張力。而剛剛推出的Android L所用的Material Design則更是在看似普通的靜態(tài)界面之后，隱藏了一系列讓你欲罷不能的過度效果。

界面轉(zhuǎn)換之間的動效，在過去只為博得一笑，今天卻正在走向主流，成為移動端的用戶體驗的核心。它正在成為交互和界面的重要元素，賦予界面以韻律和生命力。動效不僅呈現(xiàn)運(yùn)動的過程，還能表現(xiàn)出空間、層次，變化，在基礎(chǔ)的界面結(jié)構(gòu)上為用戶帶來截然不同的體驗。

將你的“設(shè)計師做派”扔到一邊

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

真實的APP不比設(shè)計師的概念設(shè)計差

很多設(shè)計師喜歡上Behance和Dribbble這樣的網(wǎng)站上去找靈感，雖然其中有很動優(yōu)質(zhì)的設(shè)計作品，但如果你并非一個經(jīng)驗豐富的移動UI設(shè)計師的話，可能會被這些作品誤導(dǎo)。其中很多設(shè)計都僅僅只是從未實現(xiàn)過的高保真Demo，當(dāng)你正打算設(shè)計一個界面的時候，其中某些設(shè)計可能會影響你的思路。所以，不妨從那些已經(jīng)上線的成功APP中汲取營養(yǎng)吧。你會從中汲取到豐富的營養(yǎng)，看到蓬勃發(fā)展的設(shè)計趨勢，這些經(jīng)過市場和用戶驗證的案例會讓你明白什么值得學(xué)習(xí)的設(shè)計。

Part 3 學(xué)習(xí)新技能

了解平臺

正如同web設(shè)計師需要了解HTML/CSS一樣，作為移動端UI設(shè)計師的你應(yīng)該了解移動端APP的架構(gòu)。首先移動端開發(fā)的語言和網(wǎng)頁設(shè)計就不太一樣，各個不同平臺有著各自的編程語言和接口，界面的構(gòu)成也無法使用CSS和標(biāo)簽來實現(xiàn)。

你需要深入閱讀官方的開發(fā)文檔，明白APP的構(gòu)成，編譯方式，發(fā)布方式，了解設(shè)計的規(guī)則。這些東西不僅關(guān)系到你的應(yīng)用開發(fā)好壞，還會影響系統(tǒng)的穩(wěn)定性，電池續(xù)航長短等多種因素。作為移動端UI設(shè)計師，你單了解設(shè)計是不夠的。當(dāng)然，從長遠(yuǎn)來看，這對于你的職業(yè)生涯也很有好處。

了解移動端的技術(shù)構(gòu)成

光了解平臺的基本特征是不夠的。接下來你需要了解它相關(guān)的技術(shù)構(gòu)成：位置服務(wù)（wifi，GPS等），藍(lán)牙（低功耗藍(lán)牙技術(shù)），信號，前后攝像頭，麥克風(fēng)，陀螺儀，位置傳感器，加速度傳感器，指紋掃描儀（iPhone 5s），眼動追蹤技術(shù)，語音識別，人臉識別，等等等等。每一個新技術(shù)的背后以為著應(yīng)用程序更多的可能性，交互設(shè)計、使用體驗，甚至商業(yè)模式。

發(fā)掘本地UI組件的開發(fā)潛質(zhì)

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

了解移動端的工作流程

安裝SDK并運(yùn)行，了解移動開發(fā)框架，比如TubyMotion、Xamarin、Titanium。熟悉集成開發(fā)環(huán)境，因為這其中包含了移動開發(fā)所需的方方面面。

了解移動端的界面模式

三大移動平臺之間，有著相似之處，但是在深入探究他們的交互設(shè)計，會發(fā)現(xiàn)它們在理念上的巨大差異。作為一個設(shè)計師，你需要明白這些差異所在，以及它們是如何體現(xiàn)在實際案例中的。

不要只著眼于單一平臺，三大平臺都需要深入體驗，每天至少都要把玩一下，并且最少要持續(xù)半年。在這個過程中，體會差異，并且將你覺得重要的、有代表性的、值得保存記錄的界面截圖留存。作為單一平臺的狂熱粉絲，你是做不好移動端UI設(shè)計師的。

記錄并解釋你的UI設(shè)計

考慮到屏幕截圖并不足以表現(xiàn)UI全部的特性，你需要學(xué)會記錄界面不同的狀態(tài)、轉(zhuǎn)變過程、轉(zhuǎn)場動畫等信息，并且學(xué)會記錄界面對于不同狀況的反饋。

在設(shè)計階段踐行精益UX設(shè)計

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

在開發(fā)階段采用敏捷UX設(shè)計

你不能只將高保真的模型交給開發(fā)者就了事，因為在開發(fā)過程中會不斷提出新的需求?？倳兄翱紤]不周全的情況，需要在開發(fā)階段進(jìn)行補(bǔ)充完善，設(shè)計師需要隨之進(jìn)行快速響應(yīng)。所以，在這個階段，設(shè)計師真的需要坐在開發(fā)者旁邊應(yīng)付突發(fā)情況。確保開發(fā)者在碰到新的需求的時候，不用他們自己來補(bǔ)充UX的細(xì)節(jié)，或者再來找設(shè)計師。

Part 4 關(guān)于移動端網(wǎng)頁設(shè)計的小技巧

響應(yīng)式設(shè)計

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

謹(jǐn)慎使用CSS和JS

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

使用合適的工具做合適的事情

這并不是是一個非常確切的清單，但是你能從中發(fā)現(xiàn)很多不錯的工具幫你完成不同的工作。其中有一部分是免費(fèi)的，有一部分是Mac平臺的。

Part 5 所有的這些都已經(jīng)過時了？

這么說，對，但也不對。目前移動端開發(fā)發(fā)展非常迅猛，設(shè)計趨勢不斷轉(zhuǎn)變，智能家電，物聯(lián)網(wǎng)時代也即將來臨，相應(yīng)的傳感器技術(shù)和移動應(yīng)用也會帶來更多的挑戰(zhàn)。作為一個移動端UI設(shè)計師，我們要學(xué)習(xí)的東西太多了，相應(yīng)的，機(jī)會也迎面走來。

本文名稱：全方位梳理:如何成為一個移動端UI設(shè)計師
分享地址：http://www.muchs.cn/news26/160026.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、定制開發(fā)、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、ChatGPT、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)