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

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

挑戰和約束

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

設備的多元化

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

操作系統多元化

如今，我們有3個主流的移動端操作系 統，Android，IOS和Windows OS。每種操作系統都有其獨有的接口標準，外部輸入和設計規范，更別說系統版本之間的升級和變更。其中Android系統更加復雜，不同的安卓設備會受到 設備制造商的限制，比如不同終端商的UI設計是不同的，硬件架構和處理能力也不盡相同。（更不用說運營商提供的后續升級）

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

性能

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

開發成本的考量

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

新技能的學習

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

移動平臺并非白板

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

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

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

把設計師的身份放下

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

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

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

學習新技能

對于平臺的學習

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

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

學習移動端的各種元件

這里有一個清單:位置服務(Wi-Fi和GPS),藍牙,藍牙低功耗,燈,前后攝像頭、麥克風、陀螺儀、加速度計、振動器、指紋掃描儀,眼球跟蹤、 語音識別,人臉識別,壓力檢測,這樣的技術不勝枚舉。每一個新技術都為全新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 非死book) 和 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去給開發人員好的多。

所有這一切即將過時

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

本文由人人都是產品經理 小核桃 翻譯，轉載請注明并保存本文鏈接

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

來自：http://www.woshipm.com/pd/90760.html