
1.2.3 App的设计流程
App的设计可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行,如图1-34所示。

图1-34 App设计流程图
1. 分析调研
App的设计是根据品牌的调性、产品的定位进行的,不同定位的App,设计风格也会有所区别,如图1-35所示。因此,要分析需求,了解用户特征,并进行相关竞品的调研,明确设计方向。

图1-35 QQ音乐(左)、网易云音乐(中)与虾米音乐(右)
2. 交互设计
交互设计是对整个App设计进行初步构思和制定的环节,一般需要进行纸面原型设计、架构设计、流程图设计、线框图设计等具体工作,如图1-36所示。

图1-36 乌克兰UI/UX设计师Tatiana Lazarenko创作的页面流程图
3. 交互自查
交互设计完成之后,进行交互自查是整个App设计流程中非常重要的一环,可以在执行界面设计之前检查出是否有遗漏的细节问题,如图1-37所示。

图1-37 交互自查
4. 界面设计
原型图审查通过后,就可以进入界面的视觉设计阶段了,这个阶段的设计图即产品最终呈现给用户的界面。界面设计要求设计规范,图片、内容真实,并运用墨刀、Principle等软件制作成可交互的高保真原型以便进行后续的界面测试,如图1-38所示。

图1-38 乌克兰设计师StasAristov、AlyaPrigotska、Thanh Do联合创作的App界面
5. 界面测试
界面测试阶段是让具有代表性的用户进行典型操作,设计人员和开发人员在此阶段共同观察、记录,如图1-39所示。在测试中可以对设计的细节进行相关的调整。

图1-39 越南设计师Tran Mau Tri Tam进行App的细节调整
6. 设计验证
设计验证是最后一个阶段,是对App进行优化的重要支撑。在产品正式上线后,通过用户的数据反馈进行记录,设计师可验证前期的设计,并继续优化产品,如图1-40所示。

图1-40 数据分析产品GrowingIO针对App弹窗进行的用户数据分析