400-895-9196

一个APP从想法到真正实现需要哪些步骤

发表日期:2020-05-22 09:57   作者来源:创胜网络   浏览:134   

       开发一款受人们欢迎的app是一件费时费力的事情,甚至需要产品开发者多年的苦心专研,APP从产品筹划到最后上线,会经历很多个步骤和过程,需要细致的计划和执行,对于产品经理来说,就需要有一个 checklist,随时来检查不同阶段和所需要完成的事项,以确保产品的顺利诞生。

  1.产品定义App definition

  对产品(app)进行定义,用一句话或者简短的一段话把产品清晰地说明白是干什么用的、给用户带来的价值是什么。

d7ac241e77074a40e42e36af4e211558.png

  产品定义

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

  2.用户研究User study

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


f74b708f7a42a4059ac60112a24d7748.png

  用户研究  

  3.用户使用流程图User flow

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


  流程图 


92d59f1b617d70dfd5997c1e617c5605.png

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

  

f68183b4813c80595d7234447669b2a0.png



    高精度的产品流程


4产品功能列表Feature list

  产品功能罗列,要尽量详细地规划好有哪些功能,并且按照优先级排序,以方便未来开发的调整。

  需求分析

f2509baaf28d834c7a18d200e84ece7f.png


  5.容框架Content framework

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

  内容框架

  6.原型图Wireframe

  根据产品流程图、功能列表、内容等制作的框线图,确定了整个app的功能和内容在各个界面的分布,确定了各个界面的 layout。

  原型图

  

5ca5e39af579bac6374dc92dd5500863.png

  低精度手绘的Wireframe

  

8b7a232d257f74978733b3c84a691e6e.png

  高精度的原型图

  7.设计风格收集Mood board

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

  风格参考

  

c50c0f14a196b2161f0d3b4e4c079d1d.png

  把各种好看的设计、插画、别的app的界面集合在一起寻找灵感

  比如icon的风格,颜色的搭配、排版的布置等等

  8.设计样稿Design mockup

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

  风格确定

  

12b776cc95b981ef93e99662312cc437.png

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

  9.设计样式集Style guide

  根据风格稿的定稿把确定的颜色方案、文字大小、间距、按钮样式、表单样式、图标等 UI 元素全部归纳到一个 PSD 或者 AI 等文档中,方便以后其他界面设计的复用和统一。

  设计规范

  

22f8608f790b3297149b8f11bc71b43f.png

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

  Barricade Style Guide

  10.界面设计Detail interface design

  根据 Wireframe 和设计样式对余下界面进行精确的设计。我们一般在 Sketch 这个适量 UI 设计软件里进行,不管设计 iOS 或者是 Android 的 app,我们都建议从@1X(一倍大小进行设计)。

  UI设计

  11.交互说明Interaction document

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

  交互文档

  12.尺寸标注说明Dimension marking

  在主要界面上对文字、图片、按钮和表单等的大小、位置、间距进行标注,以方便开发人员编写代码。

  尺寸标注

  

c226d267b83bc7925d68661eab8608c5.png

  实例“马克鳗”进行标注

  13.界面切图Images slicing for development

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

  界面截图

  

c8122c3546ccba5a515c8e3c030976b1.png

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

  14.开发Development

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

  开发

  15.测试Bug report Bug

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

  测试

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

 


如没特殊注明,文章均为创胜网络原创,转载请注明来源http://www.lnchuangsheng.com/news/appzixun/49.html