像一个APP设计者一样去思考

随着移动互联网发展,移动应用程序视觉设计流行风向推陈出新。 现阶段我需要深入了解新型智能硬件设备,它通常意味着改变我们的思维方式——即使这意味着远离我们之前的网页设计技巧。

我的职业生涯就像许多UI设计者一样开始的:平面设计的工作。 此后不久,我发现网站UI设计并吸引我学习参与,成为我当时工作的重点。 一路上我学会了相关概念交互设计用户体验,在那之前我几乎都不认识这两个关键词。

在某种程度上我觉得自己陷在一种重复性的工作循环:我发现了一个公式,一个几乎肯定的设计的方法,使我更容易且快速的完成每个新项目,做的项目比以往任何时候都要多,但在某种程度上,所有的设计看起来相似。 就在那时我了解到第一个(跨平台产品)的版本发布iOS和Android。

此后,寻找呼吸新鲜空气,我的生活出现了一个意想不到的转折,我关注到一个似乎完全不同以往的设计方向:移动应用设计。 这就是我需要的,一个真正的挑战。 我不仅学到新的东西,但不知何故不得不忘记的一部分设计网站的技巧。

眨眼之间,几年之后,几天前事实上,各大设计社区的讨论符合苹果的推出新的智能硬件smartwatch而为了新的APP交互设计却喜忧参半。 一方面,看到智能穿戴设备,提供了一种新设计的可能性令人兴奋的世界。 另一方面,了解媒介的挑战以前所未有的互动和用例是困难和艰巨的。

这不是我们第一次看过这样的设备在市场上。 但随着新技术,需要新设计方法显得越来越频繁,我们将不得不适应速度越来越快。

01-apple-watch-opt
新设备类别,如smartwatches,迫使设计师不断学习新的设计模式。 (图片来源:苹果)

当然,UI设计的第一轮的大推进是近20年前,无处不在的互联网接入,迎来了第一个网站。 在此之前,大多数设计师,像我一样,专注于打印和网络时代的到来要求我们学习如何设计一个人机交互的的媒介。 用户已经不仅仅是一个旁观者。

过渡是一些别人更难这就是为什么这么多的网站看起来按钮符号上和之后开发的客户端并没有针对移动化进行优化设计,设计师并没有及时理解这种新媒介的特性,有些产品落后了移动应用时代的发展

02-app-mini-web-opt
应用程序由BBC(左)和Hertz(右)看起来像网站超过本地APP应用,省略了一些移动设计惯例。

体验糟糕的应用同样的事情正在发生。 人们经常遇到的APP看起来像mini-websites(国内称之为Wap):他们为智能手机开发的网页“翻译”,难免他们失败了,原因是:字体大小、触摸和手势目标混乱。 他们也没有遵守各大平台的应用组织将使用应用程序的分辨率等要求。

在设计移动时,避免网络结构是必要的,因为它可以对我们的移动应用产生影响。我们不得不面对项目有不同的心态充分理解移动设备为了充分利用他们,提供令人愉快的用户使用体验。

那么,从一个网页端设计师转行到移动应用设计师需要些什么? 除了知识和工具,你需要改变你的思维方式。 下面是一些建议适应移动APP设计师。

改变你工作的方式

此时此刻数百个应用程序进入市场,你有没时间浪费了。

作为专业人士,我们再也不能花费数周或数月之前详细的花式设计推出一个产品,才意识到其他应用程序已经解决了这个问题(也是最可能以类似的方式解决了这个问题)。

这就是快速交互原型设计,在短快速周期工作的一种方式。 在设计和开发需要不断迭代的方法,使一个焦点:没有什么是必然的,直到用户试一试。

03-lean-ux-opt
快速交互原型设计是基于恒定在一个永无止境的循环迭代。 

因此,应用程序设计不能从界面设计Photoshop和Illustrator开始。 它已经开始之前,应该先使用wireframe-based等原型工具进行基本设计。 这样,如果改变是必要的,它将可以快速迭代原型——而不是几个月的开发周期。

一些UI设计师直接从UI阶段进行设计,这通常是最有趣的,因为交互没有做出来,常常需要返工。 在某些方面,我们也习惯了以这种方式工作,因为它可能是唯一的方式,项目上没有进行交互原型设计。

最近,在与许多设计师来说,最吃惊的看着我当我建议他们开始工作的项目甚至没有使用电脑,而是通过简单地画在纸上。 这听起来如此自然,以至于我们经常忘记甚至一种可能性。 这样的设计已被证明是非常有用的在阻止我们考虑变量(如设计文档的大小、颜色和字体使用,等等),变量和细节,可以阻止我们的创造力,当我们开始一个项目。

就我个人而言,我在纸上画草图找到更有用,因为我们只关注和要解决的问题,而不落入陷阱的考虑设计细节,或至少在第一阶段。

手机第一”,或者从屏幕小,也是一种很好的策略来使用。 即使您的应用程序将运行在智能手机和平板电脑,开始通过设计更小的手机更有效。 开始设计过程从手机的角度来看迫使我们优先考虑,选择最重要的是改变我们的心理结构,这是习惯了大屏幕的桌面计算机一般起点。

04-mobile-first-opt
“移动第一”是基于设计智能手机作为起点,之前搬到更大的屏幕。

我第一次开始这样一个项目,我几乎结束了头痛。 也许是一个类似的情况,当你第一次去健身房,肌肉,你没有使用过一段时间开始伤害,由于努力工作是不同的。 如果你还没有这么做,有一天试试。 你会注意到你的优先级如何改变,你将更早意识到什么是真正重要的事情在你的应用程序,是不可或缺的。

你也可以画一个与旅行的行李。 如果你有一个小箱子,你带什么? 你把最重要的事情,当然,你肯定会需要的东西在旅行,抛开一切。 不管你信不信,这个普通的例子类似于当我们设计一个智能手机。

学习其他的一半

应用程序的成功取决于设计师和开发人员,他们必须共同努力,创新,实现最高水平的质量。 有效地完成这项工作时,你可以缩短迭代并行工作。 对于这个工作,你都必须意识到的复杂性的设计以及实际实现。

这样做的一个方法是学会使用开发工具,不一定要开发应用程序从开始到结束,但至少建立屏幕可以快速转移和忠实,而准确地交流设计的意图。

05-bottle-neck-opt
我是唯一一个设计师,很多开发人员正在等待我去完成交互和UI设计,导致一个流程断点有依赖条件。 

后不久抵达巴塞罗那,我开始工作在一个科技创业公司。 我惊奇地发现,当时我唯一的设计师——开发人员所包围,起初有很多瓶颈,因为每个人都在等待我完成我的设计为了继续自己的工作。

随着时间的推移,我学会了如何使用工具,如Xcode和一些基本的编程语言。 这些使我更复杂的建议和工作在某些时刻与团队的其他成员相同的速度。

过了一段时间,一旦我公司几个月,开发人员学习我的工作方式。 现在他们会直接打开我的设计文档并将知道如何导出设计文档没有我的帮助情况下。

最后,我想给你一个小窍门:学会使用相同的术语作为团队的其他成员。这样做,你会觉得每个人都在办公室讲同一种语言。 设计师和开发人员通常指的是同一件事,但在不同的话说,这使得了解各方之间更加困难。也就是项目组之间要相互学习对方技能和沟通方式,以便能理解对方工作思路对接起来就方便了。

认识到团队合作的价值

回到之前的话题,团队合作需要角色之间的协作和沟通。 原型设计需要结束级联依赖过程,在一个人的工作另一个结束的开始。

但在实践中,大多数团队的一种有效的混合过程,与开发人员的敏捷方法(使用一个目标来完成一个特定的期限)和设计原型(快速迭代,通常没有一个特定的期限)。

虽然仍有残余的“级联”(或瀑布)在这里,与设计师通常工作稍微领先于其他团队,开发人员可以开始不用等待每一个设计做好准备。

这就是为什么一个应用程序设计师必须认识到,他们的同事——尤其是程序员——是盟友,而不是敌人。 了解彼此,越来越习惯一起工作将导致一个更好的,更多的协同作用的结果。

我们往往害怕分享我们的工作。 我们倾向于有点防守可能出现的评论和注释,尤其是来自其他设计师。 事实是,许多的事情,其他人说对于改善我们的提议是至关重要的,包括来自那些没有反馈设计背景,比如程序员。 他们的愿景,一般比我们更加务实,可以提供一个良好的平衡。

人在公司我参观了前一段时间告诉我,设计人员和开发人员在不同的楼层工作,通过各种交流的即时消息系统。 我建议他们尝试另外一种东西:设计师和开发人员工作在相同的项目应该坐在一起混合。几个月之后,他们告诉我,他们的产品的质量有显著提高,即使是团队成员之间的关系也是如此。

使用各种操作系统(跨平台)

当你设计一个手机应用程序,您不能使用自己的手机供参考。 如果你的目标是全球手机市场,你必须获得至少Android,iOS和Windows Phone设备和不断成长习惯使用它们,以完全理解如何解决每个平台上不同的设计方案。

事实是,世界不与iPhone的开始和结束。 很多设计师自己限制在iOS和Android设计的时候,他们只是翻译-几乎从字面上原来的应用程序。

06-patterns-opt
资源像一个简单的导航选项卡以不同的方式使用iOS、Android和Windows Phone。 

交互模式(即建立解决问题的设计)每个操作系统上是不同的。 这样,设计师必须交替频繁以同化他们,正确地使用它们。

仅举几个例子,标签的位置,如何显示菜单,何时以及如何显示中小学行为变化在每一个移动操作系统。

学习每个移动操作系统上的不同模式,下面是一个实际的运动你可以遵循:下载并安装同一应用程序在不同的操作系统,并分析其差异和相似性批判性;模式应该是不同的。 所以,如果你发现一个应用程序的外观和工作几乎相同的iOS和Android,可能有些事情没有做正确的。

07-incorrect-pattern-opt
Instagram的应用程序看起来疑似iOS(左)和Android(右)。 开发人员似乎移植应用的Android,不遵循一些基本的交互模式。 例如,Android版本的标签应该在屏幕的上方。

此外,不断地观察和尝试其他应用程序是一个伟大的方式来发现如何解决自己的接口问题。 例如,很多时候当我感到某种创造性的块,不知道如何解决一个问题,我就开始玩我的手机,仔细分析应用面临的问题我看他们的方法。

如果你附近没有电话你,你可以检查网站等Pttrns(iPhone),Android应用程序模式Windows Phone用户界面设计模式有大量的例子,可能对你有用。

原型的一切

一个敏捷方法需要了解的东西之前将外观和功能实现。 同样,原型帮助我们评估(通过用户测试)应用程序的可用性。 理想情况下,我们不需要等太久之前建立我们的第一个原型。

08-palm-pilot-opt
原型可能非常简单,比如一块木头在一张纸上,如掌上电脑的原型。 (图片来源:计算机历史博物馆)

可能很少有人记得掌上电脑:第一个原型是一个简单的木头有一张纸的印刷设计接口。 员工将原型口袋里就好像它是一个真正的设备。

它是为了测试——大小、重量和舒适的使用——原型是绰绰有余。 关键是确定的程度是必要的设计是为了测试你有什么想法,然后开始工作!

许多工具存在原型,甚至查看设计智能手机,仿佛它是一个成品。 也就是说,一个原型是不仅仅是显示一个静态设计;它还必须包括图像、转换和手势。

09-pop-opt
流行使您拍照的设计和构建一个交互式原型在几分钟内。 (图片来源:popapp.in)

选择最合适的工具将在很大程度上取决于你的工作流程,你想实现什么和你预期的结果。 例如,我经常使用popapp当我没有超过简单的线框图画在纸上。 使用这个应用程序,我可以拍照的设计,然后添加手势和转换——快速、轻松地!

但更高级的概念时,我发现它更方便在专门设计的软件,工作等素描,然后构建一个原型使用奇迹,FlintoInVision,让更多的原型。 (注意,有时一个工具并不一定比另一个。 选择其中部分将取决于你感觉最舒服。 然而,如果你想了解更多关于原型设计草图和InVision)

正如前面提到的,一个吨的原型应用程序是,这么多几个月前,我决定创建一个小的网站,原型设计工具,其中列出了所有我知道的。 网站概述了每个工具提供的特性,所以应该帮助你选择一个。

10-prototyping-tools-opt
我的个人项目,原型设计工具 (prototypingtools.co)

另一方面,要知道Android操作系统(如,“材料设计”——把更多的关注micro-interactions。 原型micro-interactions今天许多设计师的责任。 (这样的工具主题使您能够相对轻松地原型这些细节。 主题的魔法移动选项方便。)

不要相信你所看到的

网页的设计时,可以观看设计来生活,你的工作。 但是随着应用程序,你必须移动设备上测试为了看到一个接口(函数)。 最重要的是,这样的测试是必要的选择对比和大小。

工具为Android和iOS将帮助设计师查看他们的工作在手机屏幕上不同分辨率和密度。 iOS,最知名的选项之一LiveView。 我用的最多的,另一个是斯卡拉(可为iOS和Android),附带了一个桌面版本,您可以使用Mac。如果你使用草图,你也可以试一试素描的镜子

不幸的是,这种工具是不能用于Windows和Windows Phone(至少不是我所知道的)。

11-pixate-opt
Pixate应用程序,连接电脑显示预览设计在你的手机上你的工作。 (图片来源:Pixate)

在工作流中,我总是在我的手机预览设计,才能确保它将如何采取下一步之前。 同样,我通常开始为一个操作系统设计,总是电话接近我大部分的时间。 这样,我可以经常评论我的工作将如何出现在屏幕上,并从第一线框图都准备好了,我可以确定大小(图形、文本和触摸目标),对比和颜色将是我的期待。 如果你不这样做,你可能会注意到它后,当进行更改和修正将需要更多的时间。

同样重要的是,开始工作的设计文档是一样的大小(宽度和高度)的电话你预览你的工作。 (注意:如果你设计不同的屏幕尺寸,然后请记住,像素不再是最好的方法来测量尺寸,因为他们改变从一个系统转移到另一个——例如,看到之间的区别在iOS和密度独立像素在Android上。 这迫使你以某种方式完全理解如何设计的差异和如何对待图像在当前移动景观。)

一旦你的设计被实现的开发人员,检查应用程序的外观和如何执行在不同的手机操作系统版本,而不是只在最好的电话你有你旁边。

谦卑地设计

应用程序设计者必须放弃创造最终的概念。 应用程序还没有结束,因为这是一个数码产品的发展。 出于这个原因,我们不能方法界面设计有明确的立场。 事实是发现通过可用性测试和破译用户遇到的问题。

有时我们设计师倾向于认为当用户使用应用程序出错时,他们是错误的,因此释放我们一切的责任。 事实上,我们更可能有做错事情的时候。

检测问题,发现我们的错误并不是一件坏事。 相反,它是一个学习的机会和纠正我们的工作,从而提高它和建筑的东西更容易使用。 我们必须的方法设计一个谦卑的态度。

在我工作的一个公司,每次我告诉我的老板,我已经完成设计,他会问我,“你与用户测试它了吗? “我没有总是测试它,但最后我把它作为一种习惯,每次我测试,我就准备好了以开放的心态,愿意看到什么问题我会找到。

只能这样做如果你足够成熟接受你的错误,要从中吸取教训。 是很困难的,但是如果你成功真的很值得。

呆在最前列

外面的信息量使得它几乎不可能保持目前的一切时设计为明天。 然而,作为应用程序设计者,我们必须保持专注和好奇什么是新的,什么。

这包括应用程序设计的趋势,以及新版本的操作系统。 不管你喜欢与否,我们必须安装新的操作系统和保持领先,以看到应用程序设计走向。

获得有价值的设计信息的好方法之一是通过阅读官方设计指南的最新操作系统版本。 你也可以从行业领导者,就像乔希·克拉克Luke Wroblewski,只是其中几个。

的事情也意味着尝试的工具简化设计和使我们的工作更有效率因为他们在市场上销售。 我们不能害怕走出舒适区,抛弃旧的工作方式和设计。

12-sketch-ui-opt
素描是一种相对较新的工具,很容易使用。 (图片来源:bohemiancoding.com)

沿着这些线路,前一段时间我终于敢使用草图。 有点困难,因为这意味着从头开始学习新的东西,当-我不得不承认我已经舒服(的)使用的工具我已经知道。

几个月后,我现在意识到这个软件相当温和的学习曲线。 它节省了我的时间并且使我工作在一个非常灵活的方式,所有的奖励已经愿意学习新东西。

结论

在一天结束的时候,改变一个人的心态,以适应应用来自于内部。 没有人会强迫你去做。 如果你不调整,就有可能成为一个图标多工厂,只是设计在一个更大的过程中迈出的一小步。

最重要的是,设计应用程序需要一种新的思维方式。 是时候离开我们的网页设计盒子,了解智能手机,平板电脑,甚至手表作为独立和不同的设备。 它是唯一真正的设计完成,全面的移动体验。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/4883/

(0)
iouedioued
上一篇 2015-04-13 08:12
下一篇 2015-04-14

相关推荐

  • 设计规范如何写,这20个精选案例让你大开眼界

    一篇干货贴,开篇必须来点镇楼的。 如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。 1. Brand Style Guide Examples http://saijogeorge.com/brand-style-guide-examples/ 从中大致可以总结出规范的分类: …

    2015-11-09
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • 打造有温度的H5动画:用户的故事将会被如何演绎

    2016年末,各路APP也纷纷展开一轮轮的数据厮杀,从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间,在这个既难忘又不舍的2016年,用户的故事将会被如何演绎,在寒冬带给用户怎样的温暖回忆呢?

    2017-05-11
  • NO.14 下一站用户体验

    今天要为大家推荐的书是杨艾祥的《下一站用户体验》,用户体验这个词大家并不陌生,但用户体验的定义以及所包含的具体内容有哪些,这个问题,可能并不是很多人都特别清楚的了解,用户体验这个被用“烂”了的词到底具备哪些威力,作为一个设计师又如何去提升产品的用户体验,在《下一站用户体验》这本书中都可以找到答案。目录(简版):一、那些让人讨厌的流氓行为1、这是个烦躁的世界2、这个世界没有新物种3、美丽的错误二、用户究竟在体验些什么1、腾讯为什么那样牛2...

    微信热点 2018-02-25
  • 【产品体验报告】探探+豆瓣=披着“大数据+心理测试“的“如故”

    “白首如新,倾盖如故”,出自《史记》,大意是有些人相交虽久却是一辈子的陌生人,有些人刚认识却一见如故。没错,这款APP就取“如故”二字,清新高雅,真的给人一见如故的感觉! 体验环境 体验机型:OPPOR9 系统版本:…

    2017-04-25
  • 订单流程研究之提交订单

    在上一篇笔者有提到,平台不一定都提供货到付款服务,因此京东、唯品会和亚马逊在提交订单时需要选择支付方式,而淘宝天猫则是在提交订单之后才需要选择支付方式。提交订单之后,每种类型的订单可支持的操作也就不一样了。

    2017-05-31
  • 用户界面缓解曲线

    由于采用扁平设计,动画的质量是创造伟大的界面更是必不可少的因素。通过动作设计,可以影响产品的整体体验,并从市场上把它分开。动画可以使复杂的相互作用简单,把好设计成令人难忘的用户体验。但是,我们如何创…

    2015-05-26
  • 3种基本方法,引导用户正确操作

    作为一名产品经理,当人们使用你的产品的时候,需要尽可能避免他们犯错误。我们应该留心用户可能犯错误的地方,在合适的地方给他们一个温和的推动,以确保一切都能正常进行。(不要让用户认为自己被指使着做什么事,至少不要用被认为是“粗鲁”和“侵扰式”的)

    2017-05-31
  • 交互设计丛书分享:《瞬间之美:Web界面设计如何让用户心动》

    作者简介: (美国)Robert Hoekman.Jr Robert Hoekman,Jr.著名的交互设计师。Miskeeto公司创始人,曾任职于Adobe、美联航等知名公司。除本书外。他还著有Desiging the Obvious以及FlashUser Experience Best Practi…

    2015-07-26
  • 【用户体验】和路通X1真实详细评测——智能车时代的钥匙

    点击蓝字关注这个神奇的公众号~中国移动和路通智能后视镜的项目已经开展了一段时间,这期间收到了多位客户的体验反馈,今天,小编整理了一些产品体验测评分享给大家,从使用者的角度,让大家对中移动智能后视镜有更加深刻的了解!用户体验和路通X1真实详细评测——智能车时代的钥匙很荣幸从天津蜂享信息技术有限公司,购买了一台和路通X1智能后视镜,并进行装车体验。感谢中国移动对智能出行的重视与执着。目前智能后视镜的市场方兴未艾,市场上智能后视镜产品如雨后春...

    2018-02-05