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

挑戰(zhàn)和約束

每個(gè)載體都有其局限性。即使是移動(dòng)平臺(tái)—設(shè)計(jì)者夢(mèng)想中最理想的畫板之一，都有其必須被遵循的特點(diǎn)。

設(shè)備的多元化

如今有不計(jì)其數(shù)的智能手機(jī)和平板電腦,每一種有不同的屏幕大小,像素密度,和物理輸入(更不用說(shuō)屏幕旋轉(zhuǎn))。這意味著我們不能只考慮iPhone 5 屏幕大小然后設(shè)計(jì)適配它。在端,響應(yīng)式設(shè)計(jì)讓我們不必大費(fèi)周折地設(shè)計(jì)匹配,就能使設(shè)計(jì)適應(yīng)不同屏幕。本地移動(dòng)設(shè)計(jì)缺少流動(dòng)性,因此我們需要考慮設(shè) 計(jì)對(duì)于不同屏幕大小的適配，并記錄不同變化對(duì)布局的影響。

操作系統(tǒng)多元化

如今，我們有3個(gè)主流的移動(dòng)端操作系 統(tǒng)，Android，IOS和Windows OS。每種操作系統(tǒng)都有其獨(dú)有的接口標(biāo)準(zhǔn)，外部輸入和設(shè)計(jì)規(guī)范，更別說(shuō)系統(tǒng)版本之間的升級(jí)和變更。其中Android系統(tǒng)更加復(fù)雜，不同的安卓設(shè)備會(huì)受到 設(shè)備制造商的限制，比如不同終端商的UI設(shè)計(jì)是不同的，硬件架構(gòu)和處理能力也不盡相同。（更不用說(shuō)運(yùn)營(yíng)商提供的后續(xù)升級(jí)）

雖說(shuō)系統(tǒng)多元化的到來(lái)不至于使設(shè)計(jì)工作迥然相異，但是確實(shí)會(huì)影響到用戶對(duì)操作系統(tǒng)在用戶體驗(yàn)上的期望值。舉例說(shuō)吧，大多數(shù)用戶對(duì)于安卓系統(tǒng)體驗(yàn)習(xí)慣于TouchWiz（三星用戶界面）或Sense（HTC界面） 。

性能

應(yīng)用程序設(shè)計(jì)的方式可以影響系統(tǒng)耗電量。換句話說(shuō),我們的設(shè)計(jì)可以使我們的用戶電量消耗殆盡。某些不必要的視覺(jué)效果或動(dòng)畫需要大量的圖形運(yùn)算處理;一個(gè)大量 Javascript Web頁(yè)面會(huì)比較耗電。我們新買的設(shè)備可能運(yùn)行APP非常流暢,2年后的老設(shè)備就會(huì)相應(yīng)遲緩。這些例子只是來(lái)說(shuō)明,移動(dòng)設(shè)計(jì)師需要更了解他們的設(shè)計(jì)對(duì)于系統(tǒng)資源占用以及APP性能的影響。

開發(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)來(lái)看一下（有人直接從火狐導(dǎo)出HTML 吧？）,并且這種有爭(zhēng)議的方法依然在學(xué)校傳授。隨著移動(dòng)端的發(fā)展其中的差異性越來(lái)越大，帶來(lái)了我們當(dāng)前的語(yǔ)言,幾乎所有的工具和方法的不足，所以是時(shí)候改變我們的心態(tài)了。

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

HTML也不是畫布。你不能像你設(shè)計(jì)海報(bào)一樣隨意布局。我想用Photoshop也不能幫助我們改變,因?yàn)槲覀円恢庇盟鼇?lái)設(shè)計(jì)海報(bào)和插圖和潤(rùn)飾照片二十多年。我們?nèi)匀?ldquo;畫”我們的接口,而屏幕尺寸多樣化和移動(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)展示。
交互,一次驚艷的視覺(jué)體驗(yàn),正成為移動(dòng)用戶體驗(yàn)核心。他們不僅讓接口本身變得生動(dòng)友好，他們本身也是一個(gè)接口元素。交互能夠建立APP與用戶溝通的橋梁并表達(dá)動(dòng)作，空間，轉(zhuǎn)變以及一系列通信方式。這讓純靜態(tài)的展示相形見(jiàn)拙。

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

你不需要獨(dú)一無(wú)二或原創(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。
真正的靈感來(lái)自于成功的應(yīng)用。你會(huì)發(fā)現(xiàn)設(shè)計(jì)讓產(chǎn)品穩(wěn)步增長(zhǎng)。他們的接口交互已經(jīng)被現(xiàn)實(shí)世界檢測(cè)過(guò),而且你確認(rèn)這些可以被復(fù)制。

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

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

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

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

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

這里有一個(gè)清單:位置服務(wù)(Wi-Fi和GPS),藍(lán)牙,藍(lán)牙低功耗,燈,前后攝像頭、麥克風(fēng)、陀螺儀、加速度計(jì)、振動(dòng)器、指紋掃描儀,眼球跟蹤、語(yǔ)音識(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解釋說(shuō)明的文檔

因?yàn)榻缑娌⒉荒苤庇^呈現(xiàn)所有業(yè)務(wù),你需要文檔說(shuō)明不同的狀態(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ù)見(jiàn)的用戶想要什么。細(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ì)并非一刀切的萬(wàn)能方案。在某些情況下能行得通,有時(shí)則不可取。你的責(zé)任是知道哪些情況移動(dòng)端可用專用解決方案，哪些情況維護(hù)一個(gè)獨(dú)立的代碼庫(kù)去做一些響應(yīng)調(diào)整。即使你是“傳統(tǒng)”的網(wǎng)絡(luò)設(shè)計(jì)，也得優(yōu)雅地計(jì)劃你的頁(yè)面布局,讓它適應(yīng)不同的屏幕尺寸。并去考量資源的大小:華麗的全屏1M背景圖片會(huì)讓你的用戶在使用移動(dòng)蜂窩數(shù)據(jù)訪問(wèn)時(shí)浪費(fèi)金錢。

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

誠(chéng)然，CSS 動(dòng)畫、 漸變、 轉(zhuǎn)換和陰影卓越而且非常易于實(shí)現(xiàn)。并且視覺(jué)效果很贊，還有一幫很酷的技術(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è)好辦法。

選擇合適的工具

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

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

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

本文由 小核桃 翻譯