产品体验日记:住宿类APP
这是我个人对部分住宿类APP产品体验日记。文章仅作为个人意见,欢迎大佬评论交流
一、爱彼迎
1.1 爱彼迎(进入页)
设计:简单的logo作为等待页,增加了用户对品牌的认知;首次登陆欢迎页与打开通知页简洁干净,减少用户阅读负担。
交互:首次登陆爱彼迎app的欢迎页简洁干净,配合主色爱彼红“立即体验”按钮,给予用户情切感。打开通知页以蓝绿色为主,给用户更理性的选择感,同时通过icon的类别的区分,表明了app设计师想让用户优先选择的选项。这样设计在给予用户充分尊重的同时,也表明了设计师意图。简洁的呈现形式可以让用户在5秒内作出决定,减少逗留时间。

1.2 爱彼迎(民宿预订-搜索功能)
设计:预订栏的位置设计于让用户第一眼发现的主页中间位置,并且为预订增加了投影,使预订栏在首页中视觉冲击力更强,在屏幕中层级更高,更吸引用户的眼球,突出了民宿产品主打功能。
交互:预订栏通过“一项切换,3项选择,一项输入”满足用户搜索需求同时,减少了用户做选择的时间——1.位置直接调用当前位置;2.时间自动选择当前时间,且选择页使用弹窗区减少跳转时间;3.搜索通过用户位置,将热门推荐,商圈,景点栏目呈现,增加用户选择,减少打字输入于搜索过程。总的来说,搜索功能的交互设计极大的缩短了用户的选择时间。

1.3 爱彼迎(民宿预订-筛选功能)
交互功能——筛选选项:1.大致地点;2.详细地址;3.日期;4.人数筛选;5.位置筛选;6.综合筛选;7.细节筛选。爱彼迎的筛选都是通过在搜索页完成,通过弹窗的形式,减少了页面跳转,让筛选过程更直观清晰。筛选分类尤为清晰,几乎涵盖所有需求的筛选,举例:人数筛选上考虑到儿童与婴儿的区分,贴心的考虑到婴儿床与儿童的区别,给用户带来更好的体验。详细筛选则更为更满足用户定向筛选,节约手动筛选房源的时间,减少时间成本。

1.4 爱彼迎(目的地)
设计:“热门排行榜”采用左右滑动栏,最右侧预留模块边界,减少用户操作思考;内页大图单栏设计更能吸引用户视线。“精选房客推荐”采用瀑布流形式,让用户看到更多信息,增加阅读效率;内页房源卡片使用投影突出,增加导向性。
交互:目的地功能为房客评价提供了展示平台,让用户点评房源更具客观性,也为优质商家增加曝光率,增加了平台竞争,促进平台收益。认证榜单通过热门地区进行分类,减少用户筛选操作,同时认证榜中单页瀑布的形式可以更好的聚焦用户的目光,从视觉上吸引用户点击详情。总体来说,目的地模块给用户一种客观值得参考信任感。

1.5 爱彼迎(心愿单)
设计:线面结合的icon设计更清晰的传达出栏目的含义,留白空间让整个界面更加透气,弹出式筛选减少了页面跳转,图左文右,让房源内容更具吸引力。
交互:心愿单设计让用户可以在一级界面直接找到自己心仪的名宿。定位设定帮助用户快速找到自己想去的旅行区心仪的民宿,价格定位可以让用户筛选预算内的民宿区域,底部显示民宿信息帮助用户一览名宿信息。筛选功能弹窗可以在一个界面中显示查看符合条件的民宿。筛选功能的人数/日期/城市与定位中价格定位相辅相成,满足不同用户不同需求。

1.6 爱彼迎(订购详情图片)
设计:精致房间实拍置顶与入轮播查看让页面视觉更具吸引力。全图展示通过1pt做间隔让风格相近的图片直接关系更紧密。单图详情页用黑色背景叠图片的形式让视觉中心聚焦于图片上,底部指示器明确了图片可左右滑动与当前位置。
交互:通过精美房间实拍置顶的形式让用户更直观的看到民宿内景增加用户预订信心,因为大部分用户对美的事物有更少的防备心理。图片详情内的满图形式充分利用有限空间,让用更短的时间滑动通览所有图片。如果对某张图片感兴趣可以点击打开单图放大查看图片的细节。底部菜单明确告知用户图片可左右滑动与当前的图片处于什么位置。

1.7 爱彼迎(民宿地图定位)
交互——地图:作为民宿酒店最为重要的除了环境就是地理位置,爱彼迎详情地图将房源周围的景区,地铁等都在订购页中做出了明确的定位标识别,让用户更清晰直观的看到满足出行需求的地铁,机场等位置,给用户脑海中形成一定距离概念。帮助用户快速判断房源是否适合自己的需求。

1.8 爱彼迎(icon设计)
爱彼迎的icon设计大多为线性icon,部分特色icon结合区域颜色使得icon更加突出。首页金刚区icon设计风格统一,样式别致,让用户忍不住去点击。底部金刚区采用简单,信息传递准确,不多一分,不少一毫。“我的”与“房源设备信息页”中icon颜色统一,通过icon与文字结合减少用户的阅读文字时间。
总体来说,全局采用线性icon,在重要地区加入了又设计感的突出,一目了然的主次关系与同种样式的icon交相呼应,不累赘,不做作。

爱彼迎(产品体验总结)
在国内众多的订房软件中,爱彼迎在国内可以算是知名度较高的国外引入产品。它也有着别具一格的优势与优秀的交互体验
1.订房中多处使用弹窗功能,减少了页面跳转,给用户带来了很多心理上的操作简便感。
2.订房位于首页的中间,通过投影将整个页面突出,在用户进入首页中第一视觉就聚焦于订房卡片上,非常直观的传达了app的主打功能与订房信息展示。
3.通过标签化管理,帮助用户更快找到自己想要的房源信息,减少了用户的思考时间。
4.筛选功能简洁,信息一目了然,便捷性强。
5.以最少的页面跳转,与信息填写来满足大部分用户的需求,减少用户点击次数,准确的给予用户合适自己的定位。
6.目的地采用瀑布流的形式,有效利用用户对信息好奇心理,增加用户的活跃度,提高房源的成交比例。
7.内部房源信息模块划分清晰:字好颜色图标等形式将每个模块很好的区分开来了,让整个订房页面更清晰。
8.图标与图片精致,夺人眼球。
9.设计感强,有效利用了每一寸空间,增加一屏的信息量,但也不显拥挤,布局很赞!
二、携程
2.1 携程APP(酒店预定)
携程酒店预定布局也是顶层banner,中间预定页,接着就是推荐内容。通过居中预定页,让用户在进入酒店预定第一眼就能看到预定选项,增加对页面的认知度。筛选日期采用传统日历样式,更方便用户了解星期,月份等概念,减少日期选择所消耗的时间。价格/星级筛选通过大多数用户最在意的预算与服务两项进行大致筛选,通过最直观的价格来减少内容的不符合用户需求的选项。其余的筛选条件都会在内页中显示。
直观的价格,服务与日期筛选节约了用户的预定选择时间,更好的满足了当下快节奏的生活,减少用户思考过程。

2.2 携程APP(酒店搜索)
酒店的搜索页给人第一感受是内容充实,较大的模块与紧凑的间距在有限的空间内放入了更多的功能。1.三层筛选栏:三层结构的筛选栏分别从,用户打字搜索栏,点击筛选栏与推荐栏组合,这样既满足了用户的使用需求,也减少了很多用户在预定内容筛选上付出的时间。2.酒店信息排布主次分明:通过不同颜色,字号大小,样式等将酒店等重要信息按用户心理占比最重的服务与价格优惠依次传递给用户,缩短了用户在一家酒店停留时间。3.插入式广告:千篇一律的酒店会给用户带来视觉的疲劳,此时插入广告可以让用户有更多时间停留于广告的内容上。不同的样式将更容抓住用户的视线。

2.3 携程APP(酒店详情页)
携程酒店详情页延续其饱和式风格,将信息尽可能一屏幕展示,价格放大让用户更直观的看到价格信息,红色抢购标志增强了用户点击的欲望,同时筛选页置顶方便了用户进一步快捷筛选自己想要的房间。优惠展示与比价让用户更能感受到价格优势。

2.4 携程APP(引导页)
携程引导页通过界面重点区域局部突出与插画形式结合很好的将更新部分:1.国内火车票订购;2,小视频专栏区域结合。加上文字提示让用户于短时间内了解更新区块,在视觉上给予更新后页面内容变动的视觉缓冲效果。

2.5 携程APP(旅拍页)
设计:携程旅拍发现页tab切换通过icon装饰与下划线可以让tab更清晰。
交互:旅拍页是增加了当下非常流行的瀑布流形式文档与视频结合,一级标签是经过调研得出的用户关注度较高的模糊切换,二级tab则采用更准确的综合,最新,最热形式,便捷用户查找自己想要的看的自媒体资讯。

2.6 携程APP(行程页)
无行程状态下:将添加行程置顶,让用户明确此处为行程添加页,同时下文的旅行推荐与文章推送,能促进用户出行欲望。
行程出行:将用户所需所想所需的服务都考虑浓缩于一屏幕展示,让用户感受到更好更贴心的服务体验。
添加行程:添加行程通过4个模块的形式简化了用户思考添加行程时的犹豫时间。明确的分类与搜索相结合,让用户更快速的添加行程。

2.7 携程APP(客服页)
设计:顶部破面式设计让客服机器人的形象更加生动突出,提示按钮icon色彩艳丽,功能表述准确,同时底部帮助按钮与渐隐式遮罩,更好让内容页与底部tab栏区分,也解决了固定帮助按钮抵挡住字的尴尬。
交互:通过卡片设计,将用户常见的问题进行点击提问,减少用户打字时间。底部帮助栏目可以更好的调出用户常见需求问题,减少内容过多时页面上滑的困扰。

2.8 携程APP(搜索页对比)
交互:携程的搜索页在不同的搜索页都有着不同的模块组成的。
1.主页搜索:以用户常用的搜索内容为推荐内容,其次由底部tab切换不同的热搜榜单。这样的好处是极大给予用户搜索的灵感,给犹豫用户提供选择。
2.酒店搜素:根据用户地理位置推荐大数据常出现的词,通过tab划分用户关注的点,再将每个点细化,通过点击次数降低打字率。
3.民宿搜索:民宿与酒店不同的是民宿更注重地域性,装修风格,所以搜索形式采用平铺呈现,方便用户筛选。

2.9 携程APP(主页)
视觉:首页从头到尾贯穿了携程蓝的主色基调,使页面布局的统一性很高。icon设计独特直观,减少用户思考时间。大图瀑布的菜单形式,配合精美的图片,更能吸引用户去点击查看内容详情。
交互:首页的排版布局上采用意元集组布局原则,将相近的功能信息进行4+-1的排布,增加用户短期的记忆信息能力。同时icon区采用金字塔原理,通过颜色布局将重点功能优先突出,次级功能通过大小形式变化区分。通过主功能将两层icon区进行有效的分隔,节约空间的同时,也有效的让用户了解到两组icon的功能是不同的。

携程(产品体验总结)
携程作为中国内地使用率排名第一的出行类APP,重点用户体现为25-40岁的用户为主,整个产品稳重,平衡,更为此类用户的青睐。
1.酒店预定栏占全界面一半比重,通过叠于banner上显得更加突出。
2.增加了价格/星级选项,因为用户在预定酒店时对价格与服务注重远高于其他。
3.页面内容饱和都高,信息量大,节约间距留白,用最简单的方式捕获用户心理。
4.评分机制,相较于打星与其他图形形式服务,数字评分有效减少用户筛选思考时间
5.广告植入巧妙,在千篇一律一的预定页中插入一个不同样式的广告能更吸引用户。
三、飞猪
3.1 飞猪APP(主页搜索)
视觉:搜索栏采用了不对称性样式设计,使得搜索功能更加富有产品个性。
交互:飞猪首页的搜索没有加入筛选功能,只有简单的推荐,很符合现代年轻群体的搜索使用习惯。并且通过用户大数据分析精准推测出用户潜在的需求。自动调出键盘的设计可以减少一部点击输入栏的过程。

3.2 飞猪APP(消息通知)
交互:提供了一键清除所有消息的功能,满足年轻一代对快速处理消息的需求。消息的主要形式是以推送的形式为主的一些旅行计划与攻略,大图的设计形式会更吸引有出行欲望的旅客点击查看。缺省页采用吉祥物拟态的形式,生动有趣且符合当下潮流形式,总体来说消息页设计简洁易懂,短期记忆能记住更多信息,用户操作便捷的优势。

3.3 飞猪APP(行程引导页)
设计:卡片式展示配合大量的留白让整个页面更加的透气与舒适,通过字号大小与位置变化的主次关系明确,让用户可以更容易接受产品页给他们传递的意图。
交互:界面详情展示形式的设计让引导内容更用户更加理解,居中的排版让页面主次关系更加明确。跳过按钮的设计位置即满足已知用户的需求。放大镜区域将重点位置放大,更便于用户理解, 同时也突出了产品的重点内容。

3.4 飞猪APP(筛选功能)
交互:通过切换tab来调整不同的筛选栏目,极大的满足了不同用户针对不同需求的不同筛选方式。而筛选内容的模块是通过大数据分析得出的该模块用户最关心的1-2个筛选。整个搜索信息页通过切换不同的tab,筛选用户对内容的初步需求,再通过细节的筛选得出模糊的架构进行推送合适的产品,极大的节约了用户的浏览时间。

3.5 飞猪APP(缺省页)
设计:“缺省页1”通过吉祥物无奈的表情与其他小伙伴们快乐玩耍的背景行程对比,给用户一种无可奈何的情感渲染,起到了提示用户应该给购物车里添加一些东西的作用,同时细节的插画描绘形式让整个页面更加饱满耐看。“缺省页2”是有图形组合而成的,画面简洁同时传达意图明确,没有过多的元素需要用户思考与反应。

3.6 飞猪APP(刷新页)
设计:刷新页与缺省页同样的有两种不一样的形态,“刷新页1”完美的体现了飞猪的概念,在行程页中让用户看到刷新具有更多的趣味性,同时也能在刷新过程中减少焦虑感。“刷新页2”则是飞猪吉祥物拿着攻略路线在城市里旅行的一个场景描绘,形象生动且与APP的主题旅行十分符合,趣味性很足。

飞猪(产品体验总结)
飞猪的前身是阿里旅行,阿里为了实现让用户更自由,更开放,打造专属更具想象力的独特旅行理念于2016年将阿里旅行更名为飞猪。而飞猪的用户群更侧重于与互联网一同成长起来的年轻一代消费者。
1.预定页中加入了钟点房选项,满足年轻一代对酒店的需求。
2.删去了人数的选择,因为年轻一代往往是两两出行或独立行,不需要增加人数栏。
3.酒店图片使用统一的小圆角,使得整体页面更加的灵动跳脱。
4.适当的留白让页面更加透气,同时也增加了栏目的区分度。
5.减少了底部tab切换,增加了首页的可读性,操作更简便,降低点击次数。
没有更多了~






















































































