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

來源:互聯網
上載者:User

 

  移動端的UI設計有其專屬的一套設計規則和約束。新技術的不斷加入促進了移動平台的快速增長,而移動端的UI設計也和傳統的平面海報/網頁設計不太一樣。那麼,要成為一個合格的移動端UI設計師需要掌握什麼樣的技能,經曆怎樣的涅磐才行呢?

  Part 1 挑戰和制約

  每個媒體都有它的局限所在。即使是在移動端這個充滿機會、自由和創意的平台上也有著許多亟待解決的問題,和無法迴避的局限性。

  片段化的移動端

  時至今日,市面上流通的智能機已經多不勝數了,不同的智能終端不僅僅尺寸不盡相同,而且因為解析度的差異使得螢幕的像素密度也有很大差異,往細了考慮,這些終端的輸入機制、螢幕比例、螢幕方向都會影響到移動端的UI設計。

  移動端的網頁設計可以藉助響應式設計保證不同螢幕下的瀏覽體驗,相比之下移動端的APP設計則相對缺少流動性。所以,作為移動端的UI設計師,還是需要考慮螢幕差異造成的布局設計的不同以及使用者體驗上的變化。

  分裂的作業系統平台

  目前主流的三大移動端作業系統是iOS,Android 和 Windows Phone(市場份額較小,在國內基本被邊緣化了),每個作業系統都有它們自己的一套設計規範,互動方式,程式介面,而隨著作業系統的版本更新,這些東西也都有著各自的變化。其中最典型的就是Android作業系統的版本分裂,分裂所造成的程式相容問題至今都尚未彌合,這其中涉及到了作業系統版本的差異,以及廠商定製化之後造成的千奇百怪的相容性問題(Android開發人員已經無數次哭暈在廁所)。iOS也隨著6.0到7.0的大版本升級,經曆了一個較長的過度時期,至今兩個大版本之間在設計風格和相容性上的問題還影響著開發人員。Windows Phone 從7到8的升級有多蛋疼我就不在此贅述了,那不堪回首的過去和微軟高管被口水淹沒的情境我真的不想回憶。

  即使是三大平台在各自平台內互動設計有著較高的統一,系統版本分裂、作業系統差異以及廠商定製化所造成的影響是不容開發人員和設計師忽視的。

  效能

  設計和構建一個APP的方式會直接影響到它的效能。換句話說,手機裡安裝的程式如果設計的好可以你的手機可以待機一天半,而如果其中有一個程式設計的有問題,會讓你需要出門多帶一個移動電源了。一些不必要的轉場動畫可能會讓你的CPU為之進行密集地運算,一段存在問題的JS代碼可能讓你的瀏覽器耗費多於平常數倍的電量。也許今年剛剛上的Galaxy S5能夠流暢運行某個應用,但是2年前的Galaxy Nexus可能會開啟應用的時候立馬卡出翔。總的來說,設計和開發,都會影響到APP的效能,甚至左右手機的續航(部分國產手機使用者同開發人員一起哭暈在廁所)。

  開發與成本控制

  有很多應用在構思之初非常酷炫新穎,但是這並不意味著它可以輕鬆實現。應用的設計和開發的方式會直接決定它能否在Deadline來臨之前實現。如果我們無法認清一個應用的開發成本,那麼開發人員所承擔的負擔會成倍增加,也為應用的後續發展埋下了禍根。

  Part 2 拋棄思維定勢

  當我們剛剛開始學習設計和開發的時候,,這個數字時代才剛剛開始,我們對於新興事物的認知尚且稚嫩。學校教育和實際設計開發上的“時代差異”,讓很多設計師對數字化的互連網的認知稍顯“靜態”,甚至形成某種思維定製,對於移動互連網也知之甚少。在這個資訊爆炸的時代,激烈的競爭催化下的移動互連網正在以一種恐怖的速度演化、推進,這使得設計師們需要緊跟發展的步伐,隨時更新升級自己對於互連網的認知。

  移動端並非畫布

  移動端設計和平面設計有著巨大的差異,它不再是一張平面的畫布。我懷疑PS和AI並不足以協助設計師完成從平面向移動互連網的轉變,儘管PS和AI已經協助設計師們在過去的20年裡完成了無數壯舉。目前,我們依然需要藉助它們來繪製更多不同螢幕尺寸下的UI和表徵圖,但是我們需要藉助更多的其他軟體來展現移動端不一樣的一面,比如用AE來繪製動效。

  從構思螢幕布局到考慮介面轉換

  的確,當涉及移動端UI設計的時候,單單考慮螢幕布局是遠遠不夠的。像Facebook Paper,雅虎天氣,Weather Channl這樣的優質移動APP就像我們證明了介面間的轉場動畫到底能讓一個UI介面產生怎樣的張力。而剛剛推出的Android L所用的Material Design則更是在看似普通的靜態介面之後,隱藏了一系列讓你欲罷不能的過度效果。

  介面轉換之間的動效,在過去只為博得一笑,今天卻正在走向主流,成為移動端的使用者體驗的核心。它正在成為互動和介面的重要元素,賦予介面以韻律和生命力。動效不僅呈現運動的過程,還能表現出空間、層次,變化,在基礎的介面結構上為使用者帶來截然不同的體驗。

  將你的“設計師做派”扔到一邊

  你並不需要將介面做獨特或者原創,尤其是當你是為了獨特而重新設計所有的介面,然後讓整個產品為獨特而擔上風險。很多時候,堅持使用原生UI元素和模式是讓應用能按時出貨的重要保證。比起強行推動獨特原創的設計,很多時候更合適的做法是打造簡單高效的互動介面,創造真正的品牌價值。

  真實的APP不比設計師的概念設計差

  很多設計師喜歡上Behance和Dribbble這樣的網站上去找靈感,雖然其中有很動優質的設計作品,但如果你並非一個經驗豐富的移動UI設計師的話,可能會被這些作品誤導。其中很多設計都僅僅只是從未實現過的高保真Demo,當你正打算設計一個介面的時候,其中某些設計可能會影響你的思路。所以,不妨從那些已經上線的成功APP中汲取營養吧。你會從中汲取到豐富的營養,看到蓬勃發展的設計趨勢,這些經過市場和使用者驗證的案例會讓你明白什麼值得學習的設計。

  Part 3 學習新技能

  瞭解平台

  正如同web設計師需要瞭解HTML/CSS一樣,作為移動端UI設計師的你應該瞭解移動端APP的架構。首先移動端開發的語言和網頁設計就不太一樣,各個不同平台有著各自的程式設計語言和介面,介面的構成也無法使用CSS和標籤來實現。

  你需要深入閱讀官方的開發文檔,明白APP的構成,編譯方式,發布方式,瞭解設計的規則。這些東西不僅關係到你的應用開發好壞,還會影響系統的穩定性,電池續航長短等多種因素。作為移動端UI設計師,你單瞭解設計是不夠的。當然,從長遠來看,這對於你的職業生涯也很有好處。

  瞭解移動端的技術構成

  光瞭解平台的基本特徵是不夠的。接下來你需要瞭解它相關的技術構成:位置服務(wifi,GPS等),藍芽(低功耗藍芽技術),訊號,前後網路攝影機,麥克風,陀螺儀,定位感應器,加速度感應器,指紋掃描器(iPhone 5s),眼動追蹤技術,語音辨識,Face Service,等等等等。每一個新技術的背後以為著應用程式更多的可能性,互動設計、使用體驗,甚至商業模式。

  發掘本地UI組件的開發潛質

  每個移動作業系統中中總有著大量的本地UI組件,他們有著極大的自由度,方便你進行定製。你需求確切地知道他們的特徵(尺寸,大小,功用),你可以為與你合作的開發人員節省大量的工作時間。

  瞭解移動端的工作流程

  安裝SDK並運行,瞭解移動開發架構,比如TubyMotion、Xamarin、Titanium。熟悉整合式開發環境,因為這其中包含了移動開發所需的方方面面。

  瞭解移動端的介面模式

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

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

  記錄並解釋你的UI設計

  考慮到螢幕截圖並不足以表現UI全部的特性,你需要學會記錄介面不同的狀態、轉變過程、轉場動畫等資訊,並且學會記錄介面對於不同狀況的反饋。

  在設計階段踐行精益UX設計

  一個現代的設計師應該是具備戰略眼光的設計師。你的目標不能局限於悶頭製作漂亮的介面,你應該讓你的設計與團隊合作結合到一起,切合項目需求。洞悉使用者深層次的需求,並且能快速地隨之反饋到設計上。將設計作品儲存下來並附上詳細的說明,確保所有的設計都與核心理念保持一致,與使用者需要保持一致。

  在開發階段採用敏捷UX設計

  你不能只將高保真的模型交給開發人員就了事,因為在開發過程中會不斷提出新的需求。總會有之前考慮不周全的情況,需要在開發階段進行補充完善,設計師需要隨之進行快速響應。所以,在這個階段,設計師真的需要坐在開發人員旁邊應付突發情況。確保開發人員在碰到新的需求的時候,不用他們自己來補充UX的細節,或者再來找設計師。

  Part 4 關於移動端網頁設計的小技巧

  響應式設計

  在移動端,響應式設計並非是放之四海皆準的解決方案。有時候它非常適用,但是有的時候並非如此。你有責任考量什麼時候採用專門的解決方案,什麼時候需要做響應式設計。

  謹慎使用CSS和JS

  的確,CSS動畫,漸層,陰影都非常贊,也非常容易實現。視差網頁看起來也很酷,很多設計師都對此感興趣。但是這些元素都非常消耗資源,對移動端的瀏覽器會產生很大的負荷,進而影響電池續航。適度控制CSS特效和JS動效都是很有必要的。即便低效能手機上瀏覽器可以良好地支援CSS3選取器,但是效能的瓶頸會讓整體體驗非常差。

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

  這並不是是一個非常確切的清單,但是你能從中發現很多不錯的工具幫你完成不同的工作。其中有一部分是免費的,有一部分是Mac平台的。

  Part 5 所有的這些都已經過時了?

  這麼說,對,但也不對。目前移動端開發發展非常迅猛,設計趨勢不斷轉變,智能家電,物聯網時代也即將來臨,相應的感應器技術和行動裝置 App也會帶來更多的挑戰。作為一個移動端UI設計師,我們要學習的東西太多了,相應的,機會也迎面走來。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。