当前位置:首页 > 芯闻号 > 充电吧
[导读] 本文来自Stripe公司的产品经理Michaël Villar的文章,文章讲诉了一款IOS应用的开发过程,对于有志于从事IOS APP开发的人来说,看完这篇文章相信会获益匪浅。看完之后,相信你会对IOS APP的开发有一个比较直观

 

本文来自Stripe公司的产品经理Michaël Villar的文章,文章讲诉了Dashboard这样一款iOS app的设计开发过程,对于有志于从事IOS APP开发的人来说,看完这篇文章相信会获益匪浅。看完之后,相信你会对IOS APP的开发有一个比较直观的认识。对于想要当APP产品经理的你来说,值得一看。全文如下:

由于我们提供的是企业服务,所以像现在流行的其它创业公司一样,我们起初并没有做移动端的 App。我们的核心业务是提供支付的 API 接口,允许其它的公司接入支付功能。web 版的dashboard 让每一个团队成员可以很方便的跟踪,完成订购,付款,消费及调货。然而,以往它的整套系统是为桌面级屏幕设计的,在手机上很难用。在完成“收银台”功能之后,我们决定在 开发移动版本,首先在 iPhone 上推出。

这篇文章写的就是我们一起开发App 的具体过程,或者从更广的意义上说,这是关于我和 Benjamin 创造产品的经验分享。看完这篇文章不能使你当上产品经理,但至少对一个 App 是怎么做出来的有一个大概的了解。

设计任何的产品,体验都是一样的:孤独,抑郁,沮丧,自由,高潮,狂喜,一大堆乱七八糟的感受如潮水般向你涌来。但当产品完成并最终服务于用户时,你会感到之前的所有努力都是值得的。

图像

我们花了不少时间在早期的概念阶段。它不仅仅是设计的第一步,也是永远没有完成的一天的最后一步,你必须随时准备为了更好的用户体验推倒重来。

在我们第一次产品讨论会时,我们在旁边放了一张白板,我们在那次会议中定下了应用的核心功能,正如我们当初开发的目的。在 Dashboard 的 iPhone app ,我们将它想象为一个辅助软件,拥有两大核心功能,与全功能版本的网页软件有所区别:

1.在你早上第一次打开这个应用的时候,你可以检查昨天的消费情况

2.拥有快速检视支付情况,消费信息等功能

线匡模型的草图绘制


在确定好功能之后,我们开始了 UI 的绘制,我们利用正常的 9 小时工作之外的时间来做这件事情。为了顺利进行,我们把它画在了纸上,画出线框图,在旁边写了文字说明,为什么要这么设计。我们先各自画一份,交流之后再去粗取精,结合两个版本的优势制作出最终版本。

我们的线框图画的很粗糙,没有精致优雅的可视化界面,只有关于大致的画面及大体的用户界面。但他们确确实实地帮助了我们确定用户的核心体验并且时刻提醒我们在每一个场景中我们的第一要务是什么。

视觉设计

在线框图完成之后,我们开始了可视化界面的设计。在这个阶段开始之前,我们几乎每天都呆在一起,探讨正确的设计方向。例如,在主页的设计上,就经过了无数次的迭代。我们很清楚,最重要的一点是,什么按钮是应该在主页上出现的,什么是不应该出现的。从常识来想,当然是能够在主页上展示越多的数据越好,但我们决定只把最重要的,最值得关注的信息留下,其它的隐藏起来。

但把界面设计到我们两个都满意了,Benjamin 开始做最后的设计稿。当然,随着时间的推移,我们收到了大量的反馈信息,但我们已经决定了,就没有再做改动。

交互

交互的构思从视觉界面的设计时就开始了,但我们仅仅在有明确的想法时才做出交互原型。在做交互原型阶段,我们可以证实我们最初的想法正确与否。

在 Dashboard 应用上,卡片式的信息呈现方式是最主要的功能。我们决定使用一套 web 工具,虽然它的 bug 出奇的多,但它对我们而言很方便,值得一试。

要做出符合直觉,轻盈优雅的 UI 是一项极为复杂的工作:

新的卡片要如何以一种符合直觉的方式被打开?我们的做法是,让卡片从稍微带有弹性的侧面进入,划出,这样能隐喻卡片可以被划掉及移动。

• 当你拖动卡片式,你必须要有一个匹配活跃卡片的阴影加以强调

• 如果你想移动在后面的其它卡片,你要将处于前面的卡片划掉

• 动画的移动速度要与手指的移动相匹配

• 像现实生活中一样,当卡片往后移动的时候会逐渐变暗

对于动作菜单来说,我们希望在打开一个庞大的菜单之前能有足够的暗示。我们把这个有趣的功能实现了出来,它运行的很棒,使我们的每张卡片中不会出现两个以上的动作按钮。如果你不感兴趣的话,你也不需要关掉菜单。

切换动作按键 (通过 html/css 实现)

你可以选择展示“收入/消费者数”图表的时间长度。这个动画可以帮助用户理解两个时间点的长度区别。如果你仔细观察,你会发现当时间长度从“天”变为“周”时,我们将多个时间点合并了。

在图表视图中改变时间长度

当你的应用需要联网使用,你可以通过登录画面及大量的过渡动画减少用户在网络延迟时的焦虑感。我们最后决定在数据加载时使用前者并结合一个过渡动画。下面是我们想出来的启动动画原型:

作为一个创业公司,考虑到代码重用性,我们使用大量的 HTML/CSS 代码及 AE 动画效果。

在 App 启动时,数据会被加载并展示到首页上。如果网速足够的快,我们不会展示过渡动画,直接进入主页,如果网络太慢了,我们会在接下来的数秒内展示 UI 的过渡动画,以减少用户等待过程中的焦虑感。

我们同样的也增加了一个悬浮动作按钮(灵感来源于谷歌的“材质设计”),你可以在应用的任意页面点按这个按钮,会出现一排标签页。我们增加了一个 100 纳秒的迟滞在卡片上,原因有二:数据需要加载,一张空白的页面是没有帮助的。2 用户可以有足够的时间看清楚他们按了哪个按钮。

UI 执行

我们开发应用的策略是非常简单的:我经常从用户界面工具开始。UI 在应用中是最重要的且应该成为 iOS 应用开发者的最主要关注点。从用户界面开始,没有任何数据及 API 的包袱将帮助你做出更友好的用户界面。这也能很容易地解释为什么不断添加新功能会使整个应用的体验及性能下降,只有从 UI 出发才能指导我们有序克制的添加必须的功能。

推送通知

这是我最喜欢的一个功能。我们的推送通知针对不同情况进行了细致的处理:

• 每天总结:一个快速检视你昨天的销售情况及新用户增加情况的通知,在每天早上你醒了之后推送。

• 新交易及新用户:对于中小型商业用户而言,当看到你的交易数量增长是一件很令人兴奋的事情。

• 调动失败:我们希望用户在操作失败之后能立刻收到反馈,并了解失败的具体原因。

账户变化:在用户在帐户余额或密码发生改变时我们会第一时间通过推送消息的方式予以通知,使用户减少被盗号的风险。

对于非紧急的通知,我们只会在工作时间推送,具体时间点可由用户自行设置。在午夜被推送吵醒绝对不是好的用户体验!

今日,我们日渐成熟的 iOS 团队在开发一串新功能并实现我与 benjiamin 设计出来的新版本。

为什么我与 Benjamin 能够如此高效地合作?这是一个值得深思的问题。

起初,我们一同做出了产品原型,尔后他专注于视觉设计上的细节打磨,我则把精力放在了代码实现上。这是一对极佳的组合——我们两个的长处互补之后,正好将产品完整地创造了出来。之后每一步的迭代都像闪电般迅速,因为我们在同一地方工作,免去了见面讨论产品环节。当然,我们之间长达 5 年的合作经验也有很大的帮助。

本站声明: 本文章由作者或相关机构授权发布,目的在于传递更多信息,并不代表本站赞同其观点,本站亦不保证或承诺内容真实性等。需要转载请联系该专栏作者,如若文章内容侵犯您的权益,请及时联系本站删除。
换一批
延伸阅读

罗德与施瓦茨与SmartViser携手开发了一种用于测试符合欧盟销售的智能手机和平板电脑的新Energy Efficiency Index(EEI)标签法规的解决方案。该解决方案的核心是R&S CMX500,这是...

关键字: 智能手机 Android iOS

移动通信对人类社会的影响,从来没有象今天这样深刻和广泛,从社交APP到掌上银行、从云会议到导航APP、从掌上理财到手机游戏等等

关键字: 移动通信 APP GSM

杭州2023年9月22日 /美通社/ -- 9月18日-22日,备受瞩目的第十四届中国国际石油化工大会在浙江宁波盛大开幕。大会以"驾驭不确定性 共促绿色复苏"为主题,汇聚了全球优秀的石油化工企业和专家...

关键字: 数字化 控制系统 智能化 APP

上海2023年9月21日 /美通社/ -- 9月21日,兄弟(中国)商业有限公司在北京举办以"启云In 慧工作 享生活"为主题的新品发布会,共三十余款产品...

关键字: 激光打印 缝纫机 数码 APP

北京2023年9月21日 /美通社/ -- 中国领先的科技益智产品企业洪恩(纽约证券交易所股票代码:IH)(“洪恩”或“公司”)今天公布了截至2023年6月30日的第二季度未...

关键字: BSP APP COM AN

全面激活120帧画质 穿云入海畅游立体幻想大世界 上海2023年9月21日 /美通社/ -- 专业的视觉处理方案提供商逐点半导体宣布,其与全球领先的游戏研发公司网...

关键字: 半导体 显示技术 移动 SDK

亚特兰大2023年9月16日 /美通社/ -- 在2023年AppMarket解决方案大奖中,低代码软件开发领域的先驱和领导者Xebia荣获跨行业价值奖。 这一认可凸显了X...

关键字: APP MARKET PPM PI

新加坡2023年9月15日 /美通社/ -- SAI.TECH Global Corporation(以下简称 "SAI.TECH "或 "SAI "或 "公司"...

关键字: AI 移动 TE 数据中心

(全球TMT2023年9月8日讯)全新宝丽来Polaroid I-2相机发布,配备品牌迄今为止最锐利的镜头和内置手动控制系统。I-2的核心,在于一个连续自动对焦的三镜片系统,能让使用一体式胶片的宝丽来相机带来令人印象深...

关键字: POLAR 相机 自动对焦 APP

舍弗勒和VDL计划合作开发和生产用于公共交通的新一代自动驾驶电动穿梭巴士 Mobileye将为穿梭巴士提供SAE 4级自动驾驶系统 舍弗勒(B3展厅/B40展台)和VDL Groep(B3展厅/B21展台)...

关键字: 自动驾驶 移动 MOBILEYE 生态系统
关闭
关闭