APP原型设计学习:去哪儿网APP的低保真原型案例

APP原型设计在整个移动产品的生命周期当中,占据一个重要的位置,也是移动APP产品经理根据产品需求文档绘制出来的产品原型。也是APP设计师和APP客户端工程师们必备的文件。

同时,一个APP原型设计的好坏也决定了一个APP产品的发展轨迹。不同的产品策略和侧重点也影响整个APP项目的开发进度与产品发布。

去哪儿网APP最新截图

 

去哪儿网APP下载地址:https://itunes.apple.com/cn/app/qu-na-er-dang-cha-xun-yu-ding/id626147107?mt=8

 

 

下面25学堂的小编给大家分享一套非常不错的 去哪儿网APP的低保真原型案例。

APP原型设计使用工具:墨刀

 

我们根据去哪儿网APP主要界面来分析和学习原型设计思路:

 

1、去哪儿网APP原型首页

去哪儿网主页1

 

 

2、主题定制旅游—发现页 

发现页

主题定制旅游主体为底部Tab标签式的交互框架,这种框架的优点在于入口清晰且频繁跳转不会迷失方向。

发现页作为用户快速浏览定位信息,帮助用户决策的界面,承载有较多内容。针对用户使用场景,将浏览方式分为两种:

一是主动浏览

主要针对旅游目的地或其他信息明确的用户,图中以搜索框、各一级分类入口(红色框)以及单独的分类Tab标签呈现,随着旅游产品细分类别的增多,对主动浏览对于用户能快速定位信息则显得尤为重要。

二是被动浏览

针对旅行计划模糊的人群,发现页全部信息为被动浏览而设,其关键在于如何通过内容本身吸引用户或者如何根据用户行为,精准推荐信息。

页面悬浮的“+”按钮作为旅游定制入口,和回到顶部按钮(向上滑入时出现,向下滑出时消失,原型中没做该动效)一起置于右下角,采用卡片式设计风格,之后的其他界面会出现相应按钮。

 

3、主题定制旅游—分类、社区页

分类社区页

 

4、关于分类页:

首先,分类功能作为主动浏览的主要入口之一,独立成Tab标签式导航,有助于承载海量、细分的主题类别。其次,页面左侧的局部导航方便快速切换,右侧页面能清晰地展现产品信息。右侧视频随着手势上下滑动,出现在正中位置的视频可以自动播放,并且双击屏幕暂停,原型该动效有待实现。

5、关于社区页:

社区页主要功能采用顶部标签导航(全局),作为吸引用户参与互动的入口,内容的选取与展现方式对用户体验有较大影响。社区页悬浮“+”按钮,作为发起提问、践行等的入口。

 

 

6、主题定制旅游—行程页(未支付、已支付、路书)

行程页

行程页主体继续使用顶部标签导航(全局),方便3个主要界面快速切换,整体界面以卡片式风格展现,便于分类明确。利用移动端可随意上下滑动、无限下拉的优势,将路书所有内容放在同一页展示,并结合左侧辅助导航快速定位。

 

 

7、主题定制旅游—系统定制过程对应页面

 

旅游定制过程主要界面如下,定制步骤与页面跳转为:

————选择目的地

————主题、心愿确定

————选择目的地景点

————开始定制

————行程确定(可修改机票、酒店、景点等信息)

————确认支付。

系统定制页1

 

8、系统定制页1:

已选定的目的地、主题、景点按钮可删除,可左右滑动,视频滑到中心可自动播放,动效待实现。

系统定制页2

 

9、系统定制页2:

旅行天数可左右随意滑动,出发时间、地点均设置有下拉菜单(动效待实现)。

行程确认页

 

10、行程确认页:

详情页向下滑出时可见总行程概要,点击第一天位置可出现选择其他时间的下拉菜单,行程中所有的产品,包括航班、酒店等信息都可自行修改等,这些动效后续会一一完善。

 

最后,再附上完整版的去哪儿网APP的以低保真的原型图,希望大家可以好好预览一下。

网址为:https://modao.cc/app/J7Rure0oxNtMKmnIoEJd

 

每天更新,
全站高品质素材免费下载!