400-611-9921
2015-11-26
2430
移動(dòng)端的UI設(shè)計(jì)有其獨(dú)有的一套設(shè)計(jì)規(guī)則和約束。新技術(shù)的不斷加入促進(jìn)了移動(dòng)平臺(tái)的快速增長(zhǎng),而移動(dòng)端的UI設(shè)計(jì)也和傳統(tǒng)的平面海報(bào)/網(wǎng)頁(yè)設(shè)計(jì)不太一樣。那么,要成為一個(gè)合格的移動(dòng)端UI設(shè)計(jì)師需要掌握什么樣的技能,經(jīng)歷怎樣的涅磐才行呢?
每個(gè)媒體都有它的局限所在。即使是在移動(dòng)端這個(gè)充滿機(jī)會(huì)、自由和創(chuàng)意的平臺(tái)上也有著許多亟待解決的問題,和無法回避的局限性。
時(shí)至今日,市面上流通的智能機(jī)已經(jīng)多不勝數(shù)了,不同的智能終端不僅僅尺寸不盡相同,而且因?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ì)的不同以及用戶體驗(yàn)上的變化。
目前主流的三大移動(dòng)端操作系統(tǒng)是iOS,Android 和 Windows Phone(市場(chǎng)份額較小,在國(guó)內(nèi)基本被邊緣化了),每個(gè)操作系統(tǒng)都有它們自己的一套設(shè)計(jì)規(guī)范,交互方式,程序接口,而隨著操作系統(tǒng)的版本更新,這些東西也都有著各自的變化。其中最典型的就是Android操作系統(tǒng)的版本分裂,分裂所造成的程序兼容問題至今都尚未彌合,這其中涉及到了操作系統(tǒng)版本的差異,以及廠商定制化之后造成的千奇百怪的兼容性問題(Android開發(fā)者已經(jīng)無數(shù)次哭暈在廁所)。iOS也隨著6.0到7.0的大版本升級(jí),經(jīng)歷了一個(gè)較長(zhǎng)的過度時(shí)期,至今兩個(gè)大版本之間在設(shè)計(jì)風(fēng)格和兼容性上的問題還影響著開發(fā)者。Windows Phone 從7到8的升級(jí)有多蛋疼我就不在此贅述了,那不堪回首的過去和微軟高管被口水淹沒的場(chǎng)景我真的不想回憶。
即使是三大平臺(tái)在各自平臺(tái)內(nèi)交互設(shè)計(jì)有著較高的統(tǒng)一,系統(tǒng)版本分裂、操作系統(tǒng)差異以及廠商定制化所造成的影響是不容開發(fā)者和設(shè)計(jì)師忽視的。
設(shè)計(jì)和構(gòu)建一個(gè)APP的方式會(huì)直接影響到它的性能。換句話說,手機(jī)里安裝的程序如果設(shè)計(jì)的好可以你的手機(jī)可以待機(jī)一天半,而如果其中有一個(gè)程序設(shè)計(jì)的有問題,會(huì)讓你需要出門多帶一個(gè)移動(dòng)電源了。一些不必要的轉(zhuǎn)場(chǎng)動(dòng)畫可能會(huì)讓你的CPU為之進(jìn)行密集地運(yùn)算,一段存在問題的JS代碼可能讓你的瀏覽器耗費(fèi)多于平常數(shù)倍的電量。也許今年剛剛上的Galaxy S5能夠流暢運(yùn)行某個(gè)應(yīng)用,但是2年前的Galaxy Nexus可能會(huì)打開應(yīng)用的時(shí)候立馬卡出翔??偟膩碚f,設(shè)計(jì)和開發(fā),都會(huì)影響到APP的性能,甚至左右手機(jī)的續(xù)航(部分國(guó)產(chǎn)手機(jī)用戶同開發(fā)者一起哭暈在廁所)。
有很多應(yīng)用在構(gòu)思之初非常酷炫新穎,但是這并不意味著它可以輕松實(shí)現(xiàn)。應(yīng)用的設(shè)計(jì)和開發(fā)的方式會(huì)直接決定它能否在Deadline來臨之前實(shí)現(xiàn)。如果我們無法認(rèn)清一個(gè)應(yīng)用的開發(fā)成本,那么開發(fā)者所承擔(dān)的負(fù)擔(dān)會(huì)成倍增加,也為應(yīng)用的后續(xù)發(fā)展埋下了禍根。
當(dāng)我們剛剛開始學(xué)習(xí)設(shè)計(jì)和開發(fā)的時(shí)候,,這個(gè)數(shù)字時(shí)代才剛剛開始,我們對(duì)于新興事物的認(rèn)知尚且稚嫩。學(xué)校教育和實(shí)際設(shè)計(jì)開發(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)知。
移動(dòng)端設(shè)計(jì)和平面設(shè)計(jì)有著巨大的差異,它不再是一張平面的畫布。我懷疑PS和AI并不足以幫助設(shè)計(jì)師完成從平面向移動(dòng)互聯(lián)網(wǎng)的轉(zhuǎn)變,盡管PS和AI已經(jīng)幫助設(shè)計(jì)師們?cè)谶^去的20年里完成了無數(shù)壯舉。目前,我們依然需要借助它們來繪制更多不同屏幕尺寸下的UI和圖標(biāo),但是我們需要借助更多的其他軟件來展現(xiàn)移動(dòng)端不一樣的一面,比如用AE來繪制動(dòng)效。
的確,當(dāng)涉及移動(dòng)端UI設(shè)計(jì)的時(shí)候,單單考慮屏幕布局是遠(yuǎn)遠(yuǎn)不夠的。像Facebook Paper,雅虎天氣,Weather Channl這樣的優(yōu)質(zhì)移動(dòng)APP就像我們證明了界面間的轉(zhuǎn)場(chǎng)動(dòng)畫到底能讓一個(gè)UI界面產(chǎn)生怎樣的張力。而剛剛推出的Android L所用的Material Design則更是在看似普通的靜態(tài)界面之后,隱藏了一系列讓你欲罷不能的過度效果。
界面轉(zhuǎn)換之間的動(dòng)效,在過去只為博得一笑,今天卻正在走向主流,成為移動(dòng)端的用戶體驗(yàn)的核心。它正在成為交互和界面的重要元素,賦予界面以韻律和生命力。動(dòng)效不僅呈現(xiàn)運(yùn)動(dòng)的過程,還能表現(xiàn)出空間、層次,變化,在基礎(chǔ)的界面結(jié)構(gòu)上為用戶帶來截然不同的體驗(yàn)。
你并不需要將界面做獨(dú)特或者原創(chuàng),尤其是當(dāng)你是為了獨(dú)特而重新設(shè)計(jì)所有的界面,然后讓整個(gè)產(chǎn)品為獨(dú)特而擔(dān)上風(fēng)險(xiǎn)。很多時(shí)候,堅(jiān)持使用原生UI元素和模式是讓應(yīng)用能按時(shí)出貨的重要保證。比起強(qiáng)行推動(dòng)獨(dú)特原創(chuàng)的設(shè)計(jì),很多時(shí)候更合適的做法是打造簡(jiǎn)單高效的交互界面,創(chuàng)造真正的品牌價(jià)值。
很多設(shè)計(jì)師喜歡上Behance和Dribbble這樣的網(wǎng)站上去找靈感,雖然其中有很動(dòng)優(yōu)質(zhì)的設(shè)計(jì)作品,但如果你并非一個(gè)經(jīng)驗(yàn)豐富的移動(dòng)UI設(shè)計(jì)師的話,可能會(huì)被這些作品誤導(dǎo)。其中很多設(shè)計(jì)都僅僅只是從未實(shí)現(xiàn)過的高保真Demo,當(dāng)你正打算設(shè)計(jì)一個(gè)界面的時(shí)候,其中某些設(shè)計(jì)可能會(huì)影響你的思路。所以,不妨從那些已經(jīng)上線的成功APP中汲取營(yíng)養(yǎng)吧。你會(huì)從中汲取到豐富的營(yíng)養(yǎng),看到蓬勃發(fā)展的設(shè)計(jì)趨勢(shì),這些經(jīng)過市場(chǎng)和用戶驗(yàn)證的案例會(huì)讓你明白什么值得學(xué)習(xí)的設(shè)計(jì)。
正如同web設(shè)計(jì)師需要了解HTML/CSS一樣,作為移動(dòng)端UI設(shè)計(jì)師的你應(yīng)該了解移動(dòng)端APP的架構(gòu)。首先移動(dòng)端開發(fā)的語(yǔ)言和網(wǎng)頁(yè)設(shè)計(jì)就不太一樣,各個(gè)不同平臺(tái)有著各自的編程語(yǔ)言和接口,界面的構(gòu)成也無法使用CSS和標(biāo)簽來實(shí)現(xiàn)。
你需要深入閱讀官方的開發(fā)文檔,明白APP的構(gòu)成,編譯方式,發(fā)布方式,了解設(shè)計(jì)的規(guī)則。這些東西不僅關(guān)系到你的應(yīng)用開發(fā)好壞,還會(huì)影響系統(tǒng)的穩(wěn)定性,電池續(xù)航長(zhǎng)短等多種因素。作為移動(dòng)端UI設(shè)計(jì)師,你單了解設(shè)計(jì)是不夠的。當(dāng)然,從長(zhǎng)遠(yuǎn)來看,這對(duì)于你的職業(yè)生涯也很有好處。
光了解平臺(tái)的基本特征是不夠的。接下來你需要了解它相關(guān)的技術(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è)模式。
每個(gè)移動(dòng)操作系統(tǒng)中中總有著大量的本地UI組件,他們有著極大的自由度,方便你進(jìn)行定制。你需求確切地知道他們的特征(尺寸,大小,功用),你可以為與你合作的開發(fā)者節(jié)省大量的工作時(shí)間。
安裝SDK并運(yùn)行,了解移動(dòng)開發(fā)框架,比如TubyMotion、Xamarin、Titanium。熟悉集成開發(fā)環(huán)境,因?yàn)檫@其中包含了移動(dòng)開發(fā)所需的方方面面。
三大移動(dòng)平臺(tái)之間,有著相似之處,但是在深入探究他們的交互設(shè)計(jì),會(huì)發(fā)現(xiàn)它們?cè)诶砟钌系木薮蟛町?。作為一個(gè)設(shè)計(jì)師,你需要明白這些差異所在,以及它們是如何體現(xiàn)在實(shí)際案例中的。
不要只著眼于單一平臺(tái),三大平臺(tái)都需要深入體驗(yàn),每天至少都要把玩一下,并且最少要持續(xù)半年。在這個(gè)過程中,體會(huì)差異,并且將你覺得重要的、有代表性的、值得保存記錄的界面截圖留存。作為單一平臺(tái)的狂熱粉絲,你是做不好移動(dòng)端UI設(shè)計(jì)師的。
考慮到屏幕截圖并不足以表現(xiàn)UI全部的特性,你需要學(xué)會(huì)記錄界面不同的狀態(tài)、轉(zhuǎn)變過程、轉(zhuǎn)場(chǎng)動(dòng)畫等信息,并且學(xué)會(huì)記錄界面對(duì)于不同狀況的反饋。
一個(gè)現(xiàn)代的設(shè)計(jì)師應(yīng)該是具備戰(zhàn)略眼光的設(shè)計(jì)師。你的目標(biāo)不能局限于悶頭制作漂亮的界面,你應(yīng)該讓你的設(shè)計(jì)與團(tuán)隊(duì)合作結(jié)合到一起,切合項(xiàng)目需求。洞悉用戶深層次的需求,并且能快速地隨之反饋到設(shè)計(jì)上。將設(shè)計(jì)作品保存下來并附上詳細(xì)的說明,確保所有的設(shè)計(jì)都與核心理念保持一致,與用戶需要保持一致。
你不能只將高保真的模型交給開發(fā)者就了事,因?yàn)樵陂_發(fā)過程中會(huì)不斷提出新的需求。總會(huì)有之前考慮不周全的情況,需要在開發(fā)階段進(jìn)行補(bǔ)充完善,設(shè)計(jì)師需要隨之進(jìn)行快速響應(yīng)。所以,在這個(gè)階段,設(shè)計(jì)師真的需要坐在開發(fā)者旁邊應(yīng)付突發(fā)情況。確保開發(fā)者在碰到新的需求的時(shí)候,不用他們自己來補(bǔ)充UX的細(xì)節(jié),或者再來找設(shè)計(jì)師。
在移動(dòng)端,響應(yīng)式設(shè)計(jì)并非是放之四海皆準(zhǔn)的解決方案。有時(shí)候它非常適用,但是有的時(shí)候并非如此。你有責(zé)任考量什么時(shí)候采用專門的解決方案,什么時(shí)候需要做響應(yīng)式設(shè)計(jì)。
的確,CSS動(dòng)畫,漸變,陰影都非常贊,也非常容易實(shí)現(xiàn)。視差網(wǎng)頁(yè)看起來也很酷,很多設(shè)計(jì)師都對(duì)此感興趣。但是這些元素都非常消耗資源,對(duì)移動(dòng)端的瀏覽器會(huì)產(chǎn)生很大的負(fù)荷,進(jìn)而影響電池續(xù)航。適度控制CSS特效和JS動(dòng)效都是很有必要的。即便低性能手機(jī)上瀏覽器可以良好地支持CSS3選擇器,但是性能的瓶頸會(huì)讓整體體驗(yàn)非常差。
這并不是是一個(gè)非常確切的清單,但是你能從中發(fā)現(xiàn)很多不錯(cuò)的工具幫你完成不同的工作。其中有一部分是免費(fèi)的,有一部分是Mac平臺(tái)的。
這么說,對(duì),但也不對(duì)。目前移動(dòng)端開發(fā)發(fā)展非常迅猛,設(shè)計(jì)趨勢(shì)不斷轉(zhuǎn)變,智能家電,物聯(lián)網(wǎng)時(shí)代也即將來臨,相應(yīng)的傳感器技術(shù)和移動(dòng)應(yīng)用也會(huì)帶來更多的挑戰(zhàn)。作為一個(gè)移動(dòng)端UI設(shè)計(jì)師,我們要學(xué)習(xí)的東西太多了,相應(yīng)的,機(jī)會(huì)也迎面走來。
關(guān)注我們:在查找公眾號(hào)中搜索:zomsky1688,或者掃描下方二維碼快速關(guān)注。
本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天
關(guān)鍵詞:移動(dòng)網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),廣州響應(yīng)式網(wǎng)站
400-611-9921
020-29860991
地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F
業(yè)務(wù) QQ: 3561401262
E-mail: sales@zomsky.com