談談當今移動端設計者必備素質

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

挑戰和約束

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

裝置的多元化

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

作業系統多元化

如今，我們有3個主流的移動端操作系 統，Android，IOS和Windows OS。每種作業系統都有其專屬的介面標準，外部輸入和設計規範，更別說系統版本之間的升級和變更。其中Android系統更加複雜，不同的安卓裝置會受到 裝置製造商的限制，比如不同終端商的UI設計是不同的，硬體架構和處理能力也不盡相同。更不用說電訊廠商提供的後續升級）

雖說系統多元化的到來不至於使設計工作迥然相異，但是確實會影響到使用者對作業系統在使用者體驗上的期望值。舉例說吧，大多數使用者對於安卓系統體驗習慣於TouchWiz三星使用者介面）或SenseHTC介面） 。

效能

應用程式設計的方式可以影響系統耗電量。換句話說,我們的設計可以使我們的使用者電量消耗殆盡。某些不必要的視覺效果或動畫需要大量的圖形運算處理; 一個大量 Javascript Web頁面會比較耗電。我們新買的裝置可能運行APP非常流暢,2年後的老裝置就會相應遲緩。這些例子只是來說明,移動設計師需要更瞭解他們的設計對於系 統資源佔用以及APP效能的影響。

開發成本的考量

很酷的新APP並不意味著它很容易實現。我們設計APP的方式可以直接導致我們的應用能否按時發布。如果我們不清楚地理解我們的設計決策的開發成本,那基本上是在給開發人員徒增負擔，並為以後的摩擦埋下隱患。

新技能的學習

我們中的許多人作為設計師在某領域已接受專業的培訓，但在數字設計領域才剛起步。我們從比較客觀的從以往的經驗來看一下有人直接從Firefox匯出 HTML 吧？）,並且這種有爭議的方法依然在學校傳授。隨著移動端的發展其中的差異性越來越大，帶來了我們當前的語言,幾乎所有的工具和方法的不足，所以是時候改 變我們的心態了。

移動平台並非白板

HTML也不是畫布。你不能像你設計海報一樣隨意布局。我想用Photoshop也不能協助我們改變,因為我們一直用它來設計海報和插圖和潤飾照片二十多年。我們仍然“畫”我們的介面,而螢幕尺寸多樣化和移動的動態互動特性都要求我們用一種不同的方法設計。

最佳介面思考並開始思考互動

我們開始認識到介面式的呈現並不會影響到移動端的設計。感謝Facebook和Yahoo天氣為我們展示了不同的設計方式,讓我們明白設計應該更專註於互動而不是靜態展示。
互動,一次驚豔的視覺體驗,正成為移動使用者體驗核心。他們不僅讓介面本身變得生動友好，他們本身也是一個介面元素。互動能夠建立APP與使用者溝通的橋樑並表達動作，空間，轉變以及一系列通訊方式。這讓純靜態展示相形見拙。

把設計師的身份放下

你不需要獨一無二或原創,尤其是只是為了“獨特性”而重新設計一個已知介面的時候。往往堅持原本UI元素和模式是讓應用程式按時完成是最明智之舉。比起從頭開始設計你的UI組件,專註於建立一個簡單、有效介面和建立品牌更有價值。

尋找靈感，現有的APP會比設計類網站更好

許多設計師喜歡去Behance或Dribbble上為他們的下一個移動項目尋找靈感。當然你會找到絕佳藝術的網站,但如果你不是一個經驗豐富的移動設計師,這些模型可能會誤導人。很多人只是建立模板但從未實現,而且他們會誤導你相信每次都能為使用者定製的UI。
真正的靈感來自於成功的應用。你會發現設計讓產品穩步增長。他們的介面互動已經被現實世界檢測過,而且你確認這些可以被複製。

學習新技能

對於平台的學習

就像你作為一個不錯的網頁設計師需要瞭解HTML / CSS是一樣,你需要瞭解行動裝置 App程式的底層結構,和他們是完全不同的網頁。例如,他們並非像HTML / CSS一樣呈現流內容,這會改變我們考慮布局的方式。你將沒有神奇的CSS繼承(至少不能像那樣開箱即用)從頁面中分離標記。甚至連標記的概念都沒。

你需要閱讀一些開發人員來的閱讀手冊,瞭解行動裝置 App程式架構,編譯和發布。理解一個行動裝置是如何工作的以及哪些比較消耗電池。甚至你可能需要學習一些代碼基礎,作為長期回報:學習開發語言後,你的設計工作會更具效率和可行性。

學習移動端的各種元件

這裡有一個清單:位置服務(Wi-Fi和GPS),藍芽,藍芽低功耗,燈,前後網路攝影機、麥克風、陀螺儀、加速度計、震動器、指紋掃描器,眼球跟蹤、 語音辨識,Face Service,壓力檢測,這樣的技術不勝枚舉。每一個新技術都為全新APP的實現開啟了大門。而你的職責是成為一個走在科技尖端的設計者。

學習你能用原生的組件做到什麼

原生的UI組件實際上給了很多自由定製的空間,但是你需要知道如何使用它們。如果你能做到讓你的UI在原生組件上做出的一點調整,開發人員會感謝你為他們節省大量的開發時間。

瞭解移動端的工作流程

瞭解移動端SDK,整合並運行。瞭解移動架構,如RubyMotion Xamarin或Titanium。熟悉IDEs,以及圖片資源位於一個移動項目位置,他們應該如何命名等。

瞭解移動端的使用者介面模式

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

對UI解釋說明的文檔

因為介面並不能直觀呈現所有業務,你需要文檔說明不同的狀態狀態,互動,和動畫以及如何應用對資料和環境。注釋你的原型,提供動畫執行個體,並為策劃裝置旋轉。

在項目設計階段學習UX

現代設計師應該是一個戰略設計師。所以你的目標,並非僅僅創造美感,是投入到設計團隊瞭解了產品的一切。優先快速原型為了得到早期的預見的使用者想要什麼。細節的藝術創作工作放到後面去做。確保所有設計與核心價值滿足使用者的需求。

在項目實現階段持續關注UX

你不能光顧著給開發人員原型而忘記使用者體驗,因為大多數的圖形需求將出現在開發階段。新的互動和狀態變化,需要新的圖形資源。你需要即時響應，所以把你的椅子放在開發人員旁邊並準備隨時進入設計工作。

Mobile Web的一些小貼士

對響應設計負責

對於移動Web,響應設計並非一刀切的萬能方案。在某些情況下能行得通,有時則不可取。你的責任是知道哪些情況移動端可用專用解決方案，哪些情況維 護一個獨立的程式碼程式庫去做一些響應調整。即使你是“傳統”的網路設計，也得優雅地計劃你的頁面配置,讓它適應不同的螢幕尺寸。並去考量資源的大小:華麗的全 屏1M背景圖片會讓你的使用者在使用移動蜂窩資料訪問時浪費金錢。

謹慎使用CSS和JS

誠然，CSS 動畫、 漸層、 轉換和陰影卓越而且非常易於實現。並且視覺效果很贊，還有一幫很酷的技術人員在開發，對吧？但這些元素在移動端都會對電量造成負面影響。使用越逼真生動的實現，我們的裝置就會越不流暢而且越耗電。

CSS3 選取器可以控制在低端的裝置上的效能影響。儘可能使用ID和 Classes，並保持你的元素選取器低版本。 如果你用#submit替代.main .container .form > div .submit，那也是個好辦法。

選擇合適的工具

• Sketch 移動開發的工具箱）。可以說是繼承了Adobe Fireworks，目前在移動端表現搶眼。
• LiveView 和 Sketch Mirror 是能夠在虛擬設備上映射你產品的工具。要知道很多東西再實際裝置上效果會不一樣，你能夠運用它們輕鬆測試尺寸，互動和控制
• Origami (by Facebook) 和 Quartz Composer 都是移動端的快速原型工具，能夠讓你在無需代碼的情況下快速建立一個UI原型，並且為你帶來一些邏輯思考和編程使用的大致瞭解。
• PaintCode能夠直接將UI和向量圖形直接匯出成Objective-C的神器.
• 基於Web的原型軟體。有很多： Balsamiq Mockups, Axure, UXPin, Moqups, Proto.io。
• Flinto能夠建立互動原型，並把他們實際安裝到你的iPhone中，類比真實應用。利用 Safari 的添加到主畫面功能）。
• ImageOptim 能夠為你無損壓縮 PNG，JPG 檔案。
• 版本控制軟體，最好是 Git or Mercurial. 即時提交你的資源和改動到遠程存放庫，會比郵件一個Zip去給開發人員好的多。

所有這一切即將過時

不完全肯定,但移動技術發展的步伐令人難以置信的快速。很快我們將面臨將穿戴式裝置、智慧型裝置和感應器和我們的行動裝置 App互聯的挑戰。每天都有新的挑戰和創新出來。所以,如果可以，保持求知慾，靈活思維，好奇心將會讓作為設計師的你不會被時代所淘汰。

本文由人人都是產品經理 小核桃 翻譯，轉載請註明並儲存本文連結

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