[[114992]]

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

挑戰(zhàn)和約束

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

設(shè)備的多元化

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

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

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

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

性能

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

[[114993]]

開發(fā)成本的考量

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

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

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

移動平臺并非白板

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

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

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

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

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

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

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

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

對于平臺的學(xué)習(xí)

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

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

[[114994]]

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

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

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

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

了解移動端的工作流

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

了解移動端的用戶界面模式

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

對UI解釋說明的文檔

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

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

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

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

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

Mobile Web的一些小貼士

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

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

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

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

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

選擇合適的工具

• Sketch （移動開發(fā)的工具箱）?？梢哉f是繼承了Adobe Fireworks，目前在移動端表現(xiàn)搶眼。
• LiveView 和 Sketch Mirror 是能夠在虛擬設(shè)備上映射你產(chǎn)品的工具。要知道很多東西再實(shí)際設(shè)備上效果會不一樣，你能夠運(yùn)用它們輕松測試尺寸，交互和控制
• Origami (by Facebook) 和 Quartz Composer 都是移動端的快速原型工具，能夠讓你在無需代碼的情況下快速建立一個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. 即時提交你的資源和改動到遠(yuǎn)程存儲庫，會比郵件一個Zip去給開發(fā)人員好的多。

所有這一切即將過時

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

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

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