谈谈当今移动端设计者必备素质

职业发展 / 发展规划 | 2014-06-28 | 发布者: mobileui

移动端一直以来都有自己的一套规则制约。同时,这也是一个高速发展的平台,随着新技术和功能的推陈出新。我们不能再像我们做海报和网页那样设计移动端。那么如今的移动设计者需要怎样的技能和思维模式呢？

挑战和约束

每个载体都有其局限性。即使是移动平台—设计者梦想中最理想的画板之一，都有其必须被遵循的特点。

设备的多元化

如今有不计其数的智能手机和平板电脑,每一种有不同的屏幕大小,像素密度,和物理输入(更不用说屏幕旋转)。这意味着我们不能只考虑iPhone 5 屏幕大小然后设计适配它。在移动网页端,响应式设计让我们不必大费周折地设计匹配,就能使设计适应不同屏幕。本地移动设计缺少流动性,因此我们需要考虑设计对于不同屏幕大小的适配，并记录不同变化对布局的影响。

操作系统多元化

如今，我们有3个主流的移动端操作系统，Android，IOS和Windows OS。每种操作系统都有其独有的接口标准，外部输入和设计规范，更别说系统版本之间的升级和变更。其中Android系统更加复杂，不同的安卓设备会受到设备制造商的限制，比如不同终端商的UI设计是不同的，硬件架构和处理能力也不尽相同。（更不用说运营商提供的后续升级）

虽说系统多元化的到来不至于使设计工作迥然相异，但是确实会影响到用户对操作系统在用户体验上的期望值。举例说吧，大多数用户对于安卓系统体验习惯于TouchWiz（三星用户界面）或Sense（HTC界面）。

性能

应用程序设计的方式可以影响系统耗电量。换句话说,我们的设计可以使我们的用户电量消耗殆尽。某些不必要的视觉效果或动画需要大量的图形运算处理;一个大量 Javascript Web页面会比较耗电。我们新买的设备可能运行APP非常流畅,2年后的老设备就会相应迟缓。这些例子只是来说明,移动设计师需要更了解他们的设计对于系统资源占用以及APP性能的影响。

开发成本的考量

很酷的新APP并不意味着它很容易实现。我们设计APP的方式可以直接导致我们的应用能否按时发布。如果我们不清楚地理解我们的设计决策的开发成本,那基本上是在给开发人员徒增负担，并为以后的摩擦埋下隐患。

新技能的学习

我们中的许多人作为设计师在某领域已接受专业的培训，但在数字设计领域才刚起步。我们从比较客观的从以往的经验来看一下（有人直接从火狐导出HTML 吧？）,并且这种有争议的方法依然在学校传授。随着移动端的发展其中的差异性越来越大，带来了我们当前的语言,几乎所有的工具和方法的不足，所以是时候改变我们的心态了。

移动平台并非白板

HTML也不是画布。你不能像你设计海报一样随意布局。我想用Photoshop也不能帮助我们改变,因为我们一直用它来设计海报和插图和润饰照片二十多年。我们仍然“画”我们的接口,而屏幕尺寸多样化和移动的动态交互特性都要求我们用一种不同的方法设计。

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

我们开始认识到界面式的呈现并不会影响到移动端的设计。感谢Facebook和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 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去给开发人员好的多。