做一个 App 需要哪些步骤?

时间:2021-11-26 来源:未知网络 作者:996建站网

一个应用APP从产品筹划到最后上线,会经历很多个步骤和过程,需要细致的计划和执行,对于产品经理来说,就需要有一个 checklist,随时来检查不同阶段和所需要完成的事项,以确保产品的顺利诞生。下面我们就来简单分享一下 App 从概念到设计再到开发方面的一个checklist:

App definition 产品定义

对产品(app)进行定义,最好能用一句话或者简短的一段话把产品清晰地说明白是干什么用的、给用户带来的价值是什么。一定要落实到纸面上,只有这样才能保证未来的产品不会走样,而所有人对于产品功能和目标的讨论可以保持一致。

做一个 App 需要哪些步骤?插图

当时做 Movie+ Windows app 时候对这个 app 的定义

User study 用户研究

针对用户的研究,分析产品的目标受众,他们的特点,很多时候要建立 Persona(一个具体的用户模型)来帮助进行行为分析。

做一个 App 需要哪些步骤?插图1
User flow 用户使用流程图

一个产品的流程图,用户是怎样在这个 app 种完成使用过程的。有的产品经理也会通过一些在在线的工具(如墨刀 Mobile App Prototyping Tool Without Headache )把用户操作和交互流程做出来。

做一个 App 需要哪些步骤?插图2

低精度手绘的流程,可以快速低成本地描述用户行为和产品路径

做一个 App 需要哪些步骤?插图3

高精度的产品流程,也可以配合下面讲到的Wireframe来制作

Feature list 产品功能列表

具体的产品功能罗列,要尽量详细地规划好有哪些功能,并且按照优先级排序,以方便未来开发的调整。不过一般这个“列表”会直接和 Wireframe 联系在一起,不一定需要单独出现,除非要做非常复杂的项目,或者需要在合同里面体现。

做一个 App 需要哪些步骤?插图4
Content framework 内容框架

这个文档规划了产品上呈现什么样的内容,内容是怎样在app各个界面分布的。对于以内容呈现为主要的 app/网站这个尤为重要。

Wireframe 框线图(原型图)

根据产品流程图、功能列表、内容等制作的框线图,确定了整个app的功能和内容在各个界面的分布,确定了各个界面的 layout。这个可以用 PPT,Sketch,AI甚至手绘都是可以的。这个是非常关键的一步,它可以包含前面提到的3个步骤。Wireframe 帮助我们整理一个产品的所有界面,为设计提供一个“蓝图”。和流程图一样,也可以使用类似“墨刀”这样的工具来做。

做一个 App 需要哪些步骤?插图5

低精度手绘的Wireframe

做一个 App 需要哪些步骤?插图6

高精度的原型图,除了没有设计基本上就是一个可用的界面了

Mood board 设计风格收集

在设计之前,设计师需要根据产品的定义和用户群体来收集各种适合产品的设计参考,以便确定产品的风格方向。

做一个 App 需要哪些步骤?插图7

就是把各种你认为好看的设计、插画、别的app的界面集合在一起寻找灵感,比如icon的风格,颜色的搭配、排版的布置等等。

Design mockup 设计样稿

设计风格稿,一般可以是 app 的首屏或者几个主要的界面,来确定整体风格。

做一个 App 需要哪些步骤?插图8

一般确定几个重要的页面让设计师出风格稿,确定了再往下按照Wireframe进行设计

Style guide 设计样式集

根据风格稿的定稿把确定的颜色方案、文字大小、间距、按钮样式、表单样式、图标等 UI 元素全部归纳到一个 PSD 或者 AI 等文档中,方便以后其他界面设计的复用和统一。最好设计师可以在完成风格稿后马上订立一个 Style Guide,这样余下界面的设计就有章可循,保持一致性,这个在特别大型的项目中尤为显得重要。

做一个 App 需要哪些步骤?插图9

这里推荐一个做得很好的 Style Guide 供大家参考:Barricade Style Guide

Detail interface design 具体界面设计

根据 Wireframe 和设计样式对余下界面进行精确的设计。我们一般在 Sketch 这个适量 UI 设计软件里进行,不管设计 iOS 或者是 Android 的 app,[email protected](一倍大小进行设计)。至于为什么,可以看看这篇文章:medium.com/shyp-design/ (需翻墙)

Interaction document 交互说明或者Prototype

一个PPT文档结合了最终的设计界面来描述整个 app 的操作、状态变化等交互过程。当然对于动态效果来说,语言的描述是很有限的。

建议采用一般比较常见的切换和动态方式,也可以采用一些现成的框架,如HTML5的有“2016年9个值得推荐的网页动态效果框架”:Top 9 Animation Libraries to Use in 2016

做一个 App 需要哪些步骤?插图10

特别推荐这个Animate.css

iOS 的开发可以看看这个“39个开源的 Swift UI 类库,包含动态效果”: medium.mybridge.co/39-o (需翻墙)

如果动态效果比较多,就需要通过视频编辑软件如AE让动画设计师把交互动画做出来,或者使用 InVision(Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool | InVision),Flinto ( Flinto),Principle(Principle – Animated Design)或者 Framer(Design everything with code)等做交互原型的工作把UI和交互的动态变化做出来。

Dimension marking 尺寸标注说明

在主要界面上对文字、图片、按钮和表单等的大小、位置、间距进行标注,以方便开发人员编写代码。可以采用“马克鳗” (马克鳗 – 设计稿标注、测量)不过现在很多时候我们都直接把 Sketch 文件整理好给到开发,开发直接在 Sketch 里就能看到和测量各种尺寸。

做一个 App 需要哪些步骤?插图11

通过“马克鳗”来进行标注

Images slicing for development 界面切图

按照开发需求对界面图片和元素进行切图。一个小小的 tips,为 iOS app UI 切图的时候,我们可以在 Sketch 里直接输出一倍大小(@1X)的 PDF 格式的素材,放到 Xcode 里,系统会自动根据 PDF 文件生成2倍和3倍的图,非常方便。

做一个 App 需要哪些步骤?插图12

大多数情况下,输出1倍大小的PDF文件即可

Development 开发

具体的产品开发过程,当然过程中通常会包括功能或者效果的修改,从而需要调整设计和内容的情况。进入开发阶段就有点“黑匣子”的意味了,如果你对技术一点也懂,那就需要你信赖你的技术团队,如果你想要了解更多他们的工作,你不妨开始学习一下开发,懂得一些基本原理,要不然沟通起来确实会是个问题。

Bug report Bug报告

开发基本完成,提交内部测试,并收集 bugs,进行修改完善,并最终提交商店审核。

虽然说是一个 Chekclist,但整个下来也可以看作是一个全面的过程了,最开始的一些步骤可以简化甚至是省略,但是好的产品是需要一个严谨的过程来确保的,希望对于要创造自己产品的朋友有所帮助,起码可以熟悉一下一个产品从想法到真正实现需要哪些步骤。

做一个 App 需要哪些步骤?插图13

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序