[翻译]谈谈当今移动端设计者必备素质

标签: 产品经理 产品设计 mobile Web 移动互联网 | 发表时间:2014-06-24 00:46 | 作者:小核桃
出处:http://www.woshipm.com

mobile1

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

挑战和约束

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

设备的多元化

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

操作系统多元化

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

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

性能

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

mobile3

开发成本的考量

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

新技能的学习

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

移动平台并非白板

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

mobile

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

我们开始认识到界面式的呈现并不会影响到移动端的设计。感谢Facebook和Yahoo天气为我们展示了不同的设计方式,让我们明白设计应该更专注于交互而不是静态展示。
交互,一次惊艳的视觉体验,正成为移动用户体验核心。他们不仅让接口本身变得生动友好,他们本身也是一个接口元素。交互能够建立APP与用户沟通的桥梁并表达动作,空间,转变以及一系列通信方式。这让纯静态的展示相形见拙。

把设计师的身份放下

你不需要独一无二或原创,尤其是只是为了“独特性”而重新设计一个已知接口的时候。往往坚持原本UI元素和模式是让应用程序按时完成是最明智之举。比起从头开始设计你的UI组件,专注于建立一个简单、有效的界面和创建品牌更有价值。

寻找灵感,现有的APP会比设计类网站更好

许多设计师喜欢去Behance或Dribbble上为他们的下一个移动项目寻找灵感。当然你会找到绝佳艺术的网站,但如果你不是一个经验丰富的移动设计师,这些模型可能会误导人。很多人只是创建模板但从未实现,而且他们会误导你相信每次都能为用户定制的UI。
真正的灵感来自于成功的应用。你会发现设计让产品稳步增长。他们的接口交互已经被现实世界检测过,而且你确认这些可以被复制。

学习新技能

对于平台的学习

就像你作为一个不错的网页设计师需要了解HTML / CSS是一样,你需要了解移动应用程序的底层结构,和他们是完全不同的网页。例如,他们并非像HTML / CSS一样呈现流内容,这会改变我们考虑布局的方式。你将没有神奇的CSS继承(至少不能像那样开箱即用)从页面中分离标记。甚至连标记的概念都没。

你需要阅读一些开发人员来的阅读手册,了解移动应用程序架构,编译和发布。理解一个移动设备是如何工作的以及哪些比较消耗电池。甚至你可能需要学习一些代码基础,作为长期回报:学习开发语言后,你的设计工作会更具效率和可行性。

mobile4

学习移动端的各种元件

这里有一个清单:位置服务(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,目前在移动端表现抢眼。
  • LiveViewSketch 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去给开发人员好的多。

所有这一切即将过时

不完全肯定,但移动技术发展的步伐令人难以置信的快速。很快我们将面临将可穿戴设备、智能设备和传感器和我们的移动应用互联的挑战。每天都有新的挑战和创新出来。所以,如果可以,保持求知欲,灵活思维,好奇心将会让作为设计师的你不会被时代所淘汰。

本文由人人都是产品经理 小核桃 翻译,转载请注明并保存本文链接

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


(关注更多人人都是产品经理观点,参与微信互动(微信搜索“人人都是产品经理”或“woshipm”)

相关 [翻译 移动 设计] 推荐:

[翻译]谈谈当今移动端设计者必备素质

- - 人人都是产品经理
移动端一直以来都有自己的一套规则制约. 同时,这也是一个高速发展的平台,随着新技术和功能的推陈出新. 我们不能再像我们做海报和网页那样设计移动端. 那么如今的移动设计者需要怎样的技能和思维模式呢. 即使是移动平台—设计者梦想中最理想的画板之一,都有其必须被遵循的特点. 如今有不计其数的智能手机和平板电脑,每一种有不同的屏幕大小,像素密度,和物理输入(更不用说屏幕旋转).

翻译:web响应设计,乏味!

- est - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1983. 原文链接:Responsive web design is boring!. 原文作者:Jonathan Longnecker. 就在上个月,我写过”应运而生的web页面响应布局“一文,designcrowd上还专门介绍了41个基于Media Queries比较带感的响应布局设计站点;这会儿,Jonathan Longnecker(网络和图形的设计机构FortySeven Media联合创始人)认为目前大部分的web响应设计都是无聊的,并提出了几个切入点来帮助我们创造打破成规的设计.

[翻译]10个妙招帮你设计图片文字

- - 优博客
在设计师应当拥有的诸多技能中,设计图片文字是非常重要的一项,然而要达到成功的效果,同样也要花一番功夫. 首先你要找到合适的图片,还要有排版的眼力劲儿,对于文字与图片结合时,你想达到什么效果也要了然于胸. 如果这些你都准备好了,我们还有10个小妙招,帮你更好的设计图片文字. 要达到成功的效果,就要增加文字的可读性.

【翻译】优秀的RESTful API的设计原则

- - 行业应用 - ITeye博客
原文地址: http://codeplanet.io/principles-good-restful-api-design/. 原文作者:Thomas Hunter Ii. 第一次翻译,若有不对的地方,敬请谅解,若转载请注明本文地址. 定义(Definitions). 数据的设计与抽象化(Data Design and Abstraction).

[ 翻译 ] 微服务架构及设计模式

- -
本文介绍了主流常见的微服务模式. 因此,了解如何处理微服务架构(MSA)以及一些微服务设计模式,一个微服务架构的一些通用目标或者设计原则是很有价值的. 下面是在微服务架构方案中值得考虑的四个目标[1]. 1、缩减成本:MSA将会降低设计、实现和维护IT服务的总体成本. 2、加快发布速度:MSA将会加快服务从想法到部署的落地速度.

移动产品设计之设计

- crystal - 互联网的那点事
移动产品设计最大的差异点在于用户使用场景的变化,场景的变化引发了交互方式巨大的变化,从而也使得信息呈现方式有所不同,再加上硬件设备的差异,最终使得2者千差万别了. 所以,移动产品设计之设计应该首先从用户的使用场景出发,同时考虑用户的硬件设备差异,综合以上2点去帮助用户完成某个任务. 按照我的理解,场景、任务、用户可以称之为设计的三要素,每一个设计实际上都是试图去帮助用户在某个场景下完成某个任务的.

翻译:关于表单每个设计师都必须知道的10件事

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2336. 原文作者: Joe Leech – 2012-04-04. 原文链接: 10 things every designer needs to know about forms. 为避免无用功,翻译之前先要百一下,看看是否有人已经翻译了,结果发现10年的时候有篇名字类似的译文,叫做:“ 每位网页设计师新手都应知道的10件事”,还是不错的译文,有兴趣的可以看下.

浅析Android 4.0的通知系统(附Android 4.0设计指南全文翻译)

- - 百度MUX
通过手机的通知系统,可以将应用程序的一些重要消息告知给用户. 流畅、舒适、友好的应用程序离不开精心设计的消息提醒机制. 但是并不是所有的通知都是用户想看的,否则只会给用户造成骚扰,所以要谨慎使用通知. 在对《Android Design》进行翻译时发现:Android系统已经提出了一些关于通知消息的设计建议,故在此分享给大家.

Android 4.0设计规范 优先导读 十大改变 (附全文翻译pdf)

- - 腾讯CDC
  在拜读和翻译了Android design设计指导后,对比Android 4.0与Android2.3及之前版本的app设计指导,总结了Android 4.0设计的10大改变:. 导航栏 (详见模式PATTERNS>导航Navigation).   由之前的物理按键导航(返回、菜单、搜索、主页)变成了嵌入屏幕的虚拟按键(返回、主页、最近任务).

移动界面隐喻设计

- 星空无语 - 优涩控
是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身. 它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成.