移動(dòng)端一直以來都有自己的一套規(guī)則制約。同時(shí),這也是一個(gè)高速發(fā)展的平臺(tái),隨著新技術(shù)和功能的推陳出新。我們不能再像我們做海報(bào)和網(wǎng)頁那樣設(shè)計(jì)移動(dòng)端。那么如今的移動(dòng)設(shè)計(jì)者需要怎樣的技能和思維模式呢？

開發(fā)成本的考量

很酷的新APP并不意味著它很容易實(shí)現(xiàn)。我們?cè)O(shè)計(jì)APP的方式可以直接導(dǎo)致我們的應(yīng)用能否按時(shí)發(fā)布。如果我們不清楚地理解我們的設(shè)計(jì)決策的開發(fā)成本,那基本上是在給開發(fā)人員徒增負(fù)擔(dān)，并為以后的摩擦埋下隱患。

新技能的學(xué)習(xí)

我們中的許多人作為設(shè)計(jì)師在某領(lǐng)域已接受專業(yè)的培訓(xùn)，但在數(shù)字設(shè)計(jì)領(lǐng)域才剛起步。我們從比較客觀的從以往的經(jīng)驗(yàn)來看一下（有人直接從火狐導(dǎo)出HTML 吧？）,并且這種有爭(zhēng)議的方法依然在學(xué)校傳授。隨著移動(dòng)端的發(fā)展其中的差異性越來越大，帶來了我們當(dāng)前的語言,幾乎所有的工具和方法的不足，所以是時(shí)候改變我們的心態(tài)了。

移動(dòng)平臺(tái)并非白板

HTML也不是畫布。你不能像你設(shè)計(jì)海報(bào)一樣隨意布局。我想用Photoshop也不能幫助我們改變,因?yàn)槲覀円恢庇盟鼇碓O(shè)計(jì)海報(bào)和插圖和潤飾照片二十多年。我們?nèi)匀弧爱嫛蔽覀兊慕涌?而屏幕尺寸多樣化和移動(dòng)的動(dòng)態(tài)交互特性都要求我們用一種不同的方法設(shè)計(jì)。

最佳界面思考并開始思考交互

我們開始認(rèn)識(shí)到界面式的呈現(xiàn)并不會(huì)影響到移動(dòng)端的設(shè)計(jì)。感謝Facebook和Yahoo天氣為我們展示了不同的設(shè)計(jì)方式,讓我們明白設(shè)計(jì)應(yīng)該更專注于交互而不是靜態(tài)展示。
交互,一次驚艷的視覺體驗(yàn),正成為移動(dòng)用戶體驗(yàn)核心。他們不僅讓接口本身變得生動(dòng)友好，他們本身也是一個(gè)接口元素。交互能夠建立APP與用戶溝通的橋梁并表達(dá)動(dòng)作，空間，轉(zhuǎn)變以及一系列通信方式。這讓純靜態(tài)的展示相形見拙。

把設(shè)計(jì)師的身份放下

你不需要獨(dú)一無二或原創(chuàng),尤其是只是為了“獨(dú)特性”而重新設(shè)計(jì)一個(gè)已知接口的時(shí)候。往往堅(jiān)持原本UI元素和模式是讓應(yīng)用程序按時(shí)完成是最明智之舉。比起從頭開始設(shè)計(jì)你的UI組件,專注于建立一個(gè)簡(jiǎn)單、有效的界面和創(chuàng)建品牌更有價(jià)值。

尋找靈感，現(xiàn)有的APP會(huì)比設(shè)計(jì)類網(wǎng)站更好

許多設(shè)計(jì)師喜歡去Behance或Dribbble上為他們的下一個(gè)移動(dòng)項(xiàng)目尋找靈感。當(dāng)然你會(huì)找到絕佳藝術(shù)的網(wǎng)站,但如果你不是一個(gè)經(jīng)驗(yàn)豐富的移動(dòng)設(shè)計(jì)師,這些模型可能會(huì)誤導(dǎo)人。很多人只是創(chuàng)建模板但從未實(shí)現(xiàn),而且他們會(huì)誤導(dǎo)你相信每次都能為用戶定制的UI。
真正的靈感來自于成功的應(yīng)用。你會(huì)發(fā)現(xiàn)設(shè)計(jì)讓產(chǎn)品穩(wěn)步增長。他們的接口交互已經(jīng)被現(xiàn)實(shí)世界檢測(cè)過,而且你確認(rèn)這些可以被復(fù)制。

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

對(duì)于平臺(tái)的學(xué)習(xí)

就像你作為一個(gè)不錯(cuò)的網(wǎng)頁設(shè)計(jì)師需要了解HTML / CSS是一樣,你需要了解移動(dòng)應(yīng)用程序的底層結(jié)構(gòu),和他們是完全不同的網(wǎng)頁。例如,他們并非像HTML / CSS一樣呈現(xiàn)流內(nèi)容,這會(huì)改變我們考慮布局的方式。你將沒有神奇的CSS繼承(至少不能像那樣開箱即用)從頁面中分離標(biāo)記。甚至連標(biāo)記的概念都沒。

你需要閱讀一些開發(fā)人員來的閱讀手冊(cè),了解移動(dòng)應(yīng)用程序架構(gòu),編譯和發(fā)布。理解一個(gè)移動(dòng)設(shè)備是如何工作的以及哪些比較消耗電池。甚至你可能需要學(xué)習(xí)一些代碼基礎(chǔ),作為長期回報(bào):學(xué)習(xí)開發(fā)語言后,你的設(shè)計(jì)工作會(huì)更具效率和可行性。

學(xué)習(xí)移動(dòng)端的各種元件

這里有一個(gè)清單:位置服務(wù)(Wi-Fi和GPS),藍(lán)牙,藍(lán)牙低功耗,燈,前后攝像頭、麥克風(fēng)、陀螺儀、加速度計(jì)、振動(dòng)器、指紋掃描儀,眼球跟蹤、語音識(shí)別,人臉識(shí)別,壓力檢測(cè),這樣的技術(shù)不勝枚舉。每一個(gè)新技術(shù)都為全新APP的實(shí)現(xiàn)打開了大門。而你的職責(zé)是成為一個(gè)走在科技尖端的設(shè)計(jì)者。

學(xué)習(xí)你能用原生的組件做到什么

原生的UI組件實(shí)際上給了很多自由定制的空間,但是你需要知道如何使用它們。如果你能做到讓你的UI在原生組件上做出的一點(diǎn)調(diào)整,開發(fā)人員會(huì)感謝你為他們節(jié)省大量的開發(fā)時(shí)間。

了解移動(dòng)端的工作流

了解移動(dòng)端SDK,集成并運(yùn)行。了解移動(dòng)框架,如RubyMotion Xamarin或Titanium。熟悉IDEs,以及圖片資源位于一個(gè)移動(dòng)項(xiàng)目位置,他們應(yīng)該如何命名等。

了解移動(dòng)端的用戶界面模式

三大移動(dòng)平臺(tái)上有相似之處而差異在于對(duì)移動(dòng)交互設(shè)計(jì)詮釋。他們的用戶期望從它們展示不同的東西。作為一個(gè)移動(dòng)設(shè)計(jì)師,你應(yīng)該完全意識(shí)到這些差異,能夠檢測(cè)到它們。
不要只關(guān)注一個(gè)移動(dòng)平臺(tái)。嘗試所有三個(gè),或者每天至少使用Android和iOS堅(jiān)持6個(gè)月。我做到了，太棒了—你對(duì)每個(gè)平臺(tái)的深刻理解將避免你盲目使用它們。而且多嘗試切換的好處是：成為一個(gè)平臺(tái)專注的粉絲并不利于移動(dòng)設(shè)計(jì)者。

對(duì)UI解釋說明的文檔

因?yàn)榻缑娌⒉荒苤庇^呈現(xiàn)所有業(yè)務(wù),你需要文檔說明不同的狀態(tài)狀態(tài),交互,和動(dòng)畫以及如何應(yīng)用對(duì)數(shù)據(jù)和環(huán)境。注釋你的原型,提供動(dòng)畫實(shí)例,并為策劃設(shè)備旋轉(zhuǎn)。

在項(xiàng)目設(shè)計(jì)階段學(xué)習(xí)UX

現(xiàn)代設(shè)計(jì)師應(yīng)該是一個(gè)戰(zhàn)略設(shè)計(jì)師。所以你的目標(biāo),并非僅僅創(chuàng)造美感,是投入到設(shè)計(jì)團(tuán)隊(duì)了解了產(chǎn)品的一切。優(yōu)先快速原型為了得到早期的預(yù)見的用戶想要什么。細(xì)節(jié)的藝術(shù)創(chuàng)作工作放到后面去做。確保所有設(shè)計(jì)與核心價(jià)值滿足用戶的需求。

在項(xiàng)目實(shí)現(xiàn)階段持續(xù)關(guān)注UX

你不能光顧著給開發(fā)人員原型而忘記用戶體驗(yàn),因?yàn)榇蠖鄶?shù)的圖形需求將出現(xiàn)在開發(fā)階段。新的交互和狀態(tài)變化,需要新的圖形資源。你需要實(shí)時(shí)響應(yīng)，所以把你的椅子放在開發(fā)人員旁邊并準(zhǔn)備隨時(shí)進(jìn)入設(shè)計(jì)工作。

Mobile Web的一些小貼士

對(duì)響應(yīng)設(shè)計(jì)負(fù)責(zé)

對(duì)于移動(dòng)Web,響應(yīng)設(shè)計(jì)并非一刀切的萬能方案。在某些情況下能行得通,有時(shí)則不可取。你的責(zé)任是知道哪些情況移動(dòng)端可用專用解決方案，哪些情況維護(hù)一個(gè)獨(dú)立的代碼庫去做一些響應(yīng)調(diào)整。即使你是“傳統(tǒng)”的網(wǎng)絡(luò)設(shè)計(jì)，也得優(yōu)雅地計(jì)劃你的頁面布局,讓它適應(yīng)不同的屏幕尺寸。并去考量資源的大小:華麗的全屏1M背景圖片會(huì)讓你的用戶在使用移動(dòng)蜂窩數(shù)據(jù)訪問時(shí)浪費(fèi)金錢。

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

誠然，CSS 動(dòng)畫、 漸變、 轉(zhuǎn)換和陰影卓越而且非常易于實(shí)現(xiàn)。并且視覺效果很贊，還有一幫很酷的技術(shù)人員在開發(fā)，對(duì)吧？但這些元素在移動(dòng)端都會(huì)對(duì)電量造成負(fù)面影響。使用越逼真生動(dòng)的實(shí)現(xiàn)，我們的設(shè)備就會(huì)越不流暢而且越耗電。

CSS3 選擇器可以控制在低端的設(shè)備上的性能影響。盡可能使用ID和 Classes，并保持你的元素選擇器低版本。 如果你用#submit替代.main .container .form > div .submit，那也是個(gè)好辦法。

選擇合適的工具

• Sketch （移動(dòng)開發(fā)的工具箱）?？梢哉f是繼承了Adobe Fireworks，目前在移動(dòng)端表現(xiàn)搶眼。
• LiveView 和 Sketch Mirror 是能夠在虛擬設(shè)備上映射你產(chǎn)品的工具。要知道很多東西再實(shí)際設(shè)備上效果會(huì)不一樣，你能夠運(yùn)用它們輕松測(cè)試尺寸，交互和控制
• Origami (by Facebook) 和 Quartz Composer 都是移動(dòng)端的快速原型工具，能夠讓你在無需代碼的情況下快速建立一個(gè)UI原型，并且為你帶來一些邏輯思考和編程使用的大致了解。
• PaintCode能夠直接將UI和矢量圖形直接導(dǎo)出成Objective-C的神器.
• 基于Web的原型軟件。有很多：?Balsamiq Mockups, Axure, UXPin, Moqups, Proto.io。
• Flinto能夠創(chuàng)建交互原型，并把他們實(shí)際安裝到你的iPhone中，模擬真實(shí)應(yīng)用。（利用 Safari 的添加到主屏幕功能）。
• ImageOptim 能夠?yàn)槟銦o損壓縮 PNG，JPG 文件。
• 版本控制軟件，最好是 Git or Mercurial. 即時(shí)提交你的資源和改動(dòng)到遠(yuǎn)程存儲(chǔ)庫，會(huì)比郵件一個(gè)Zip去給開發(fā)人員好的多。

所有這一切即將過時(shí)

不完全肯定,但移動(dòng)技術(shù)發(fā)展的步伐令人難以置信的快速。很快我們將面臨將可穿戴設(shè)備、智能設(shè)備和傳感器和我們的移動(dòng)應(yīng)用互聯(lián)的挑戰(zhàn)。每天都有新的挑戰(zhàn)和創(chuàng)新出來。所以,如果可以，保持求知欲，靈活思維，好奇心將會(huì)讓作為設(shè)計(jì)師的你不會(huì)被時(shí)代所淘汰。

本文由人人都是產(chǎn)品經(jīng)理 小核桃 翻譯，轉(zhuǎn)載請(qǐng)注明并保存本文鏈接

原文：http://uxmag.com/articles/what-does-it-take-to-be-a-mobile-designer-today