搜索框里面有台小看车的APP是什么APP

今天我们来跟公众号:聊设计(ID:liaosheji2010)学习电商首页设计因为这个首页设计非常复杂,所以作者花了很久时间去理清相关知识点讲视觉同时也会讲交互和产品。

移动端產品最难的地方就是在很小的屏幕上展示出你所有的业务因为有了屏幕的限制,加上移动端的客户碎片化阅读的习惯和高流失率所以業务复杂的App是设计难度较高的。电商就是这种类型的App既要保证首页业务展示完整性,又要保证用户体验满意度每一个页面设计都要考慮一些技巧和思考维度,非常考验设计师的设计功力所以电商类App是要展示内容最多也是最难做的一类App。所以我们以电商为例来分析首页設计

用手机去购物已经成为我们生活中不可或缺的一部分,打开天猫、淘宝App进入首页之后基本上都是琳琅满目的商品促销活动、专题汾类以甚至是与电商不太相关的功能性入口。

例如(图1-1)这些都是B2C综合商城类的App设计师显然不喜欢这种类似菜市场杂乱的界面设计,更傾向于去设计小而美的垂直类电商界面设计或者引用国外的电商应用设计,觉得那样的设计留白多图片精美,这才是一个好的设计那么如何我们到底该评价一个电商App的首页设计好坏了?

图1-1 B2C综合商城淘宝和京东

界面与产品服务定位相匹配

对电商而言首页设计的基本原則,就是要能够增加销售机会把产品卖出去。所以我们要围绕这个目的来去设计界面所以不同类型的App的设计策略都会不一样,找到适匼自己产品服务定位的设计方法我们来比对一下B2C综合类App和垂直细分类电商App,如(图1-2)

图1-2 B2C综合类App和垂直细分类电商App运营对比

B2C综合类App一般体量非常庞大他们的目标受众是极为广泛的,无论是社会顶层的精英分子还是只够解决温饱的市井小民。那么此时人物形象的独特性会弱化设计的过程也就尽量避免去塑造带有某些固有人群的特性。所以这类大型电商很像一个大型超市沃尔玛家乐福。超市里满目琳琅被堆满的货架有铺天盖地的打折促销信息。B2C综合类App都有非常多的额外功能,给手机充话费、线下服务、彩票等等从设计师角度来看,他们是不美观甚至冗余的。但从商业上来看它们每天都有巨大的访问量而每个页面都要合理的将这些流量导向对应的目的地,如果頁面内容太少就没办法充分挖掘出用户的潜在需求和兴趣点。而这些页面的密集内容也是在经过大量探索和庞大的数据支撑而逐步优化唍善的

垂直细分类的电商App,产品的目的就是聚合对应类型的产品推送给对应人群从产品诞生的时候就已经确认了精确的目标用户层,設计师需要做的是从产品的各个细节来营造属于这个层次的氛围设计让这个群体产生归属感的UI界面。例如良仓(图1-3)因为设计师面对嘚用户群体非常明确,可能是小资或者文艺青年所以视觉手段可以非常精准。设计师需要通过大块的留白、匠气的字体、纤细的线条等視觉手段营造出相应的设计氛围和格调感。由于这类App体量都不会很大也可以充分发挥设计师的个人色彩。

另外一些小型企业和初创公司人力资源不充沛,商业模式经验不充分在诸多方面都无法比拟大型团队,所以功能单一是必然的客观的造成了界面的简洁。其实這是没办法奢求大而全只能把目光瞄准在小而精上。所以这类型App首页推荐出来的图片为了保证视觉的协调性,都需要经过设计师认真篩选和处理的这些大量人工干预的工作量在综合类App上是不可想象的。例如淘宝的首页(图1-4)用户看到的各种banner图和广告推荐图都是根据鼡户的最近浏览记录,个性化推荐所以需要海量的banner和产品图,这些都是由机器人合成的所以设计与选图并不可能达到设计师所期望的唍美搭配。设计师这里需要考虑的是一个普适性

(图1-4)淘宝首页机器人合成的各种Banner

所以同样是电商,B2C综合类App和垂直细分类的App因为用户嘚属性的不同,体量的不同最终设计师给出的设计解决方案也不一样。那么下面我们分别根据不同类型电商App进行分析设计

电商首页设計思路,从上往下思路是:

用户使用搜索栏快速找到心仪的商品(让快速定位目标)

通过Banner活动拉动流量(产品拉新活跃用户让用户进来)

展示全部服务类别(用户知道产品有哪些商品和服务)

秒杀用流量品带动购买量(让用户知道该商品和服务在我这里很便宜)

首屏后的頁面展示各大类别(方便用户进入沉浸式浏览方式)

大多数用户发生购买行为可能是有明确的目的性的。我知道我想要买什么所以我需偠快速的搜到商品。所以App会把最显眼的位置留给搜索栏搜索栏(图1-5)

(图1-5)淘宝和JD的默认关键词

移动设计的首页寸土寸金,所以搜索栏丅面的Banner图不会做的太高这里就带来一个矛盾,就是Banner尺寸小视觉冲击力小。京东采用的是透明度变化的搜索栏默认是搜索栏的背景是铨透的,这样会留给Banner足够的视觉设计空间滑动页面,搜索栏的背景会由全透明转换为不透明逐渐下滑显现的导航栏会设置两个极限值(图1-6)。下滑多少高度开始出现90%透明的导航栏下滑多少高度出现不透明的导航栏。

(图1-6)京东在不同高度导航栏的透明度变化

因为电商促销活动是拉动消费最大的源泉而Banner是很好展示活动页面的地方。4到6个Banner就能牢牢抓住用户贪便宜的心理而且Banner作为运营位也可以作为销售嘚广告位进行出售。所以一开始就要看见Banner是很好的展示

视觉设计:如果采用半透明导航栏的设计,那么Banner设计(图1-7)的时候文字区域需要留出足够的高度避免文字被导航栏遮住。

(图1-7)PS设计Banner会划出辅助线留出文字安全区域

接下来电商会展示1排或者2排小icon。这些icon相当于web端的汾类类目列表作用起到了让用户知道你有哪些卖的东西和哪些服务可以做。当然像淘宝和京东这类综合类应用有非常多的业务。这些業务分布在界面中的各个角落需要一个快速跳转重要模块的快捷入口。而小电商网站的ICON往往是一个分类

模块分割:这里需要的注意的昰模块宽度的划分。因为手机的屏幕宽度是多种多样的界面设计的宽度是自适应的,所以按照比例定出每个图标的模块的占比而不是具体大宽度大小。一些设计师直接五等分划分每个图标模块的宽度如图(图1-8)飞猪旅行就是使用直接五等分划分的方分割模块的,与大眾点评相比没有留白的做法视觉显得图标摆放松散不够聚拢。

(图1-8)飞猪旅行与大众点评图标模块

正确的做法是给模块边缘留出空白间距这个间距选择30PX或者20PX,然后剩下的宽度按照模块进行均分,比如美团(图1-9)留出了30PX的留白然后五等分划分剩下的总宽度。

(图1-9)美团模塊的边缘留白

图标风格:另外需要注意的是图标设计的风格如果在这里使用剪影或者线性的图标(图1-10),不是一个很好的设计解决方案剪影图标通过面来塑造形体的图标,通过切割面分型来塑造图标的体积感。所以剪影图标需要更大的视觉面积去切割面才能有更多嘚设计细节可看。那么这里图标尺寸显然没有这么大不具备设计发挥的条件。所以容易轮廓设计的简单缺乏设计感。与剪影图标不同嘚是线性图标通过线来塑造形体的轮廓。同样由于图标尺寸比较小线使用的多了,容易线与线纠合在一起看不清楚线少了,图标的視觉面积单薄显得缺乏设计细节。

(图1-10)使用了剪影和线性设计风格的图标

那么如何在小尺寸的图标既不要图标形体复杂,又能保持獨特的设计感了这里推荐使用的微渐变设计手法去塑造图标的形体。例如飞猪(图1-11)的模块快速入口图标使用了微渐变手法这种设计風格的好处是,在小尺寸图标使用不复杂的剪影轮廓通过渐变来分割层次,产生独特的艺术效果

(图1-11)飞猪使用了微渐变设计风格的圖标

微渐变的设计风格的难点就是分型,一般会把设计会有两种分型方法(图1-12)把图标剪影区分为两个层次前后层次通过渐变的手法进荇过渡。

(图1-12)飞猪、支付宝口碑、大众点评使用渐变分层的图标

背板设计:目前我们常见的背板都是圆形或者圆角矩形的背景板那么昰不是只能有这样单调设计形式了。如何进一步创新答案是使用独特的品牌形状做为图标的背景板(图1-13),这个基础形状还可以在底部標题栏图标上使用

(图1-13)使用了独特品牌形状的背景板

或者使用纹理形式填充背景(图1-14)。这里需要注意的是每个背景板的纹理不是每個都一样的那样重复的纹理单调而乏味。淘宝使用了统一粗细且有变化的线条这样统一中又有变化,具有独特的设计形式感

(图1-14)使用了独特纹理的背景板

在背景中运用各种纹理的手法,在品牌设计中经常会运用到(图1-15)M的基本型填充使用了各种纹理效果。

(图1-15)品牌设计运用填充纹理

对于如何使用合适的背景纹理当你的前景图标设计轮廓简单不复杂,那么根据前景图形表达的情绪挑选适合的图形(图1-16)可以让背景足够花哨,营造出不同的氛围感

(图1-16)不同情绪的背景图形

如果前景的图标比较复杂,并不希望背景的图形带来過多的干扰那么需要做的就是几何形状的变换(图1-17),在变化中寻求统一

(图1-17)几何形状变换的背景

淘宝和京东都将这个用户订阅的模块,放置在首页banner底下可见其地位的重要性。原因是用户订阅内容对用户的转化率非常高淘宝和京东都引入自媒体达人作为内容生产鍺生产较为专业的内容,内容中穿插推荐商品及其购买链接相比于单纯的将商品信息呈现给消费者,图文等多方式的推荐降低消费者的忼拒和挑剔心理更易接受事物。就像有时候你确定要去商店买衣服往往买不到中意的,反而是随便看看逛时买到了心仪的商品视觉設计:首页面积非常有限,所以这里的用户订阅内容采用的都是文字滚屏形式出现。通过文字的标题吸引用户的注意力这里需要注意嘚是由于视觉面积非常小,所以没有必要塑造一个块面同其他块面区分开来。这里(图1-18)京东的“京东快报”做的不是太好单独为用戶订阅做了一个模块区分,显得非常琐碎而淘宝的“淘宝头条”模块背景,直接与模块快速入口的背景合并通过间距的留白来区分版塊。减少了块面的琐碎感这样的设计手法显然更合适。

(图1-18)淘宝的“淘宝头条”模块与京东的“京东快报”

模块5:秒杀品如果一件商品常年都是优惠价那么等于没有优惠,所以想出了限时秒杀的方法不是简单促使用户快速下单的,而是只有在规定的时间才可以享受哽加优惠的价格这样增加了用户的粘性,必须在制定的时间去再次登录app在秒杀开始之前,用户可能会告诉他的朋友优惠的信息促使怹的朋友也去进行购买,就形成了线下带动购买的过程或者用户在其他商品品类闲逛,在这个闲逛的时间里用户也有可能去购买其他嘚商品。淘宝和京东会有秒杀品秒杀品起到的作用就是带动更多的流量进入App。视觉设计:既然是秒杀那么三个要素就是用户最关心的。什么时间有秒杀有什么秒杀的商品,秒杀的价格到底多有优惠所以在页面中呈现出这3个要素是非常重要的。京东的“京东秒杀”(圖1-19)在这块的视觉设计是更加突出的非常完整的呈现了这3个要素。而淘宝的“淘抢购”因为版面狭小无法呈现这么多的设计元素,设計上显得非常局促至于为什么淘宝采用这种设计形式,因为版块上面有一个天猫超市明显淘宝更希望主推这个模块。所以“淘抢购”為了追求与有好货的模块设计形式感统一不得不采用轻量级的设计。从这里也可以看出首页设计也是一个根据业务运营需求,平衡的藝术

(图1-19)京东的“京东秒杀”模块与淘宝的“淘抢购”

如果说之前的模块都属于商品直接推荐的交易型电商,那么现在另一种新的电商形态内容电商正在逐步崛起。消费费者并没有我要购物的心态而是在悠闲地看着美妆达人直播,或者自媒体的文章这些达人或者洎媒体孜孜不倦的生产各种专业内容,内容中穿插推荐商品及其购买链接当你在想要购物的时候看到商品信息,和你在没想要购物的时候看到商品信息整个的偏好、选择标准和决策方式,都会发生巨大的变化这两种心态感觉是完全不一样。内容电商的购物心理是我囍欢的达人或者店铺推荐了一款看起来不错的商品,看起来觉得不错可能就下单购买了。这个过程让很像你在旅游景点去购买纪念品洳果这个商品不是非常昂贵,大多数情况下人们斤斤计较这个商品到底值多少钱而是想我购买这样一个商品会给我留下美好的记忆。这昰一个感性的消费心理这个商品推荐模块就是一个内容形模块的快速入口。根据你最近的浏览记录推荐了一些相关的帖子或者达人。洇为每个人关注的商品都不一样所以呈现的界面模块可能也不一样。

例如(图1-20)淘宝这块的推荐淘宝如果判断你是男性用户,默认推薦的是男神范如果判断你是女性用户默认推荐的是爱逛街。

(图1-20)淘宝的内容推荐模块

之后的往下的页面都是超出一个屏幕的过去用來展示电商每个细分类别中最好的商品进行展示。用大量的品类和优惠价格打动用户进入进行消费现在更倾向于内容化电商推荐。

不再強调以商品品类作为分类标准而是以专题来分类。专题的选取往往融合情感因素更能吸引消费者,特别是在消费升级的驱使下这也苻合消费者“逛”时的购买习惯。比如京东的爱生活模块中集合了3C、家居、超市、宝宝用品、个人用品等这样的设计说明消费者不管是茬线上“逛”还是线下逛,对于商品之间的界限并没有那么明确关于电商内容化设计这个在后面的章节会单独去说。

有时候用户逛电商昰漫无目的的并不一定有明确的购买目的。但用户在逛的过程中也许有了别的联想通过分析预测用户行为,促成商品的销售有的商品具有的天然的关联性,例如用户已经购买了牙刷那么会不会再要买几支牙膏。另外一个用户3个月进行两次购买奶粉电商网站记录下鼡户的采购周期,预测出用户即将发生的采购行为的时间及时向用户推荐该品类商品所以电商会对每个商品进行标签分类。通过对用户嘚行为数据挖掘预测用户可能会感兴趣的相关联商品标签,推荐商品这样增加广告投放的精准度,达到提高商品转化率的效果也许現在行为预测效果还不足够理想,促成购买是一个非常复杂的过程但随着大数据技术的发展,展示推荐的东西将会越来越符合用户的需求预测用户的购买行为这是未来的一个趋势。

底部导航一般分为4到5个模块以图标+文字的设计形式进行展示,电商最常见的底部导航栏設置是首页分类,购物车我的。

告诉用户我是卖什么的用户你可以在我这里得到什么。然后通过第2屏幕到第6屏幕左右的浏览让用户徹底明白你这里的能买到什么顺便让用户进入心智模型里。彻底进行逛街浏览的心理

分类页面起到筛选搜索的作用。但这里的搜索与艏页顶部的搜索框还不一样因为分类的搜索带有一定不确定性,但是却是让用户导流进入的商品页面最好且更直接的方式淘宝由于业務众多,已经放弃了在首页提供分类检索商品的做法而更倾向于用内容引导用户发生购买行为。

当用户在浏览页面找到想买的商品后並不一定买一个支付一个,而是把他想要买的各种商品集中付款这符合用户在逛超市时去收银台统一付款的心理。有时候用户看上了商品并不一定马上去支付,这时候购物车也起到不断提醒用户要付款的作用

这是一个个人后台的作用,管理自己购买商品后的一系列状態例如查看商品物流状态,退换商品商品评价等。所以底部导航栏从左到右就是用户购买商品过程一个心理写照

这里需要重点设计嘚就是代表每个模块的图标设计了。打开一些App我们会发现App的底部图标设计的非常普通,没有任何特色在素材网站上都可以下载到这样嘚图标贴合上去。那么我们需要单独花时间精心设计这个在后面的章节图标设计中会单独表述。

在App页面设计中设计师会遇到一个问题僦是页面每个模块做多高多宽合适,页面中主要内容的模块与次要内容模块的比例是否合适特别是电商模块比较多,样式复杂做的不恏,就显得页面乱糟糟的但又说不出什么原因。下面我来告诉你如何设计内容模块的视觉比例屏幕安全边距做App界面的时候,当内容贴匼在屏幕边缘的时候不仅会影响可读性,也会影响美观度所以我们需要设置一个一个留白区域。这个区域就是屏幕安全边距所有的內容设计在这个边距内。一般留白区域是20px或者30px的宽度如果界面内容比较多,例如淘宝(图1-21)就选择用20PX

(图1-21)淘宝的内容模块20px边缘留白

洳果首页内容比较少,排版比较宽松则选用30PX的宽度例如Airbnb的首页(图1-22)内容极简极度宽松,完全由专题banner构成所以留白间距达到了惊人的45px。

由于App设计的界面需要适配显示在各种尺寸上所以我们并不需要直接定义每个模块具体的宽度。因为这个宽度可能会被拉伸我们一般按照比例来定义每个模块的宽度。如果把界面想象成大的豆腐块每个模块就是一个个分割规整的豆腐块。那么划分版块就好像切割豆腐塊一样常见的划分方法有不切分就是整个横条、1/2切分、1/3切分、1/4切分。

例如淘宝采用的就是1/4切分和1/3切分搭配的方法(图1-23)而京东采用的1/2切分和1/3切分搭配的方法。从视觉上极有家、爱生活这个模块内并没有灰色线条切割是不是算1/2切分?因为极有家内的两个商品图片都从属於极有家的并不需要一条灰线切割开,但他还是有一条看不见的线条上下对齐,让模块看起来更加规整

(图1-23)淘宝的1/4切分切割模块

峩们继续看这个时尚大咖这个模块。貌似出现了一个奇怪的切割位置这时候我们比对一下下面淘宝直播模块我们会发现,原来模块是运鼡了1/3切分只不过把前面2/3合并起来了。

(图1-24)淘宝1/3切分切割模块

让我们来看看1年前的淘宝页面长什么样子那时候淘宝的页面并没有严格遵守上下切割规则(图1-25),模块切割的非常的琐碎所以视觉看起来也非常混乱。

(图1-25)淘宝旧版本模块切割琐碎

说完了横向用比例切割嘚方法我们来说说如何确定纵向的模块大小,我常用的办法是用栅格方法栅格系统最早出现于印刷,简单的说就是运用固定的格子使堺面排列工整简洁后来延续到web设计,其中比较有名的是960 Grid System让网页布局的更合理、易于阅读等。基于界面的栅格系统可以很大程度上保证設计产出的质量尤其对于刚入行和经验不足的设计师。可以有一个量化的参考比对考虑各个模块之间视觉关系。

我们来挑选京东界面嘚几个模块来分析下(图1-26)我们使用的20 PX做为间距进行比对分析,发现京东的每个模块是都是符合20PX栅格基准的

(图1-26)京东的横向栅格基准比对

淘宝部分模块例如天猫超市模块遵守这个比例(图1-27),部分模块例如淘抢购为了追求信息的密度在有限的面积内显示更多的内容,减少了模块的高度所以并不是所有模块都必须严格按照这个栅格基准了,这只是一个基准参考值实际界面内容千变万化,可以有所微调但是大的设计比例不会变化太多。

(图1-27)淘宝的横向栅格基准比对

在每个模块之间都会有各自的标题设计来显著区分每个模块。烸个模块的标题既有设计形式感的统一也有所变化。那么我们来介绍一些常见的标题视觉设计形式

视觉设计1 文字+渐变色

淘宝因为追求信息的密度(图1-28),没有留给设计师过多的发挥空间所以只能采取文字+色块背景的设计形式。

(图1-28)淘宝模块名称设计

视觉设计2 文字+辅助图形

京东的信息密度小于淘宝所以空间足够大,每个标题可以加上一些辅助元素(图1-29)两者都利用渐变颜色变化来区分模块。

(图1-29)京东模块名称设计

使用剪影或者线性的图标搭配文字如果模块非常容易提炼成某种具象化的图形。可以使用这种手法例如淘宝的全浗精选首页(图1-30),使用剪影图标地球去表达全球的概念

(图1-30)文字+图标的模块名称设计

视觉设计4 字体粗细的对比

粗体的中文字搭配细體英文文字,产生了微妙的对比形式感美因为把这个标题设计做成图片,所以可以大胆的使用苹方以外的字体当然前提是你的公司购買相应购买字体的版权。这里我倾向使用一个字体家族比如中文字使用方正兰亭黑粗体(图1-31),英文字使用方正兰亭黑超细黑

(图1-31)方正兰亭黑字体粗细搭配

视觉设计5 多种元素的混搭

如果你的App不追求信息高密度展示,有足够的设计面积供你发挥那么这种设计形式会非瑺的适合。粗细字体混搭+半截英文字体+双色线条(图1-32)利用线条的粗细和颜色对比,以及字体的粗细对比营造时尚的氛围感。

(图1-32)粗细字体混搭+半截英文字体+双色线条

衡量一个电商网站首页不能只看视觉体验设计的本质是解决问题,而不是只停留在满足“好看”、“有格调”、“上档次”的视觉层面你的关注点不只是颜色、字体、图片,还有业务的流程电商本身就是一个购买流程。选购、意向、推荐都需要关注如果你期望客户去关注的产品没有达到预期的访问和销售量。那么你这个界面设计如何漂亮或者优雅都是无用的如果这个电商网站已经开始运营了,我们需要多看后台的数据分析有多少用户访问了首页,其中多少人点击了你推荐的产品有多少比率嘚用户在看了之后选择了购买,在购买流程中有多少人在支付这个环节而离开的如果你有这些数据,那你自己就可以衡量你的设计的好壞其他主观臆断都是浪费时间。

更多关于电商app设计思路可以下载

}

作者:朱艳君班级:工设1602,课程:界面设计方法研究指导:余永海。

选题围绕如何改善共享单车出行体验问题也是针对“摩拜单车”、“哈罗出行”这类共享单车App嘚体验问题,展开的用户体验分析和交互设计创新该选题的目标用户为喜欢骑共享单车代步或者出行旅行的人。

一、选题介绍和基本分析

摩拜单车于 2015 年 1 月成立通过智能手机 app 让用户随时随地可以定位并使用最近的摩拜单车,骑行到达目的地后就近停放在路边合适的区域,关锁即实现电子付费结算它以人人可负担得起的价格提供智能共享单车服务,使人们更便利地完成城市内的短途出行并帮助减少交通拥堵,减少环境污染满足了我们绿色出行、健康生活的愿望。

线上支付功能的完善让我们能够随时随地扫码付款骑车和停车让原本需要坐公交、打车才能到达或者步行麻烦懒得出门等问题得到解决,改变了我们的出行方式

摩拜APP满足了我们的部分生存需求,然而在其怹方面与用户之间的情感联系淡泊使用情景单一。日常生活中不外出时根本不会打开这些APP,时间久了甚至会忘记它的存在。骑行者在摩拜APP上极少得到社交、成就体验等情感体验导致用完就“闲置”。

App出现前人们的常见活动情境?

在该类App出现前人们的生活中会骑车出荇情境有这样一些:

(1)目的性比较明确的短途出行,例如上班上学外出购买生活必需品的人们会选择步行、公交、打车或者使用自己嘚交通工具。这一类的出行活动只是单纯的“去”与“回”

(2)以家为中心,游玩、兜风为目的短途出行比如饭后消食消遣的出行活動,人们会选择与家人散步;与朋友相约骑单车、电动车去兜风逛街这里的出行是一种缓解生活压力,享受生活的行为骑行时有愉悦嘚心情。

(3)目的地不明确例如把骑行当做健身或者爱好式出行,希望每一次骑行都能富有意义这时候的出行是充满憧憬或者心情愉赽的甚至兼而有之。等等

本质上,人们想要获得什么情感体验

对于骑车出游来说,首先人们期望获得的是审美、好奇、兴趣体验然後是成就体验和社交体验。

兴趣体验:骑共享单车出游的人群中一部分是在自己熟悉的环境中骑车出行较于其他的出行方法更喜欢共享單车这种即走即停的自由方式。这时候的兴趣可能是临时起意的想要去某个熟悉的老地方地方转一转或者购物也可能是计划安排的每日騎车健身出行。像这种情况app需要为客户根据兴趣类别和常用路线提供私人订制式的出行地图。

好奇体验:身在陌生的环境下出行一部汾人选择骑单车观光,兜风的同时对当地进行探索他们会期望发现某个有趣的店、美味的食物和未见过的一角美景。这些是不同于之前茬网上搜到的“网红店”和拥堵的风景区是我们在好奇心的驱动下自己发现的。

审美体验:人们骑车游玩相当大的原因是为了能够欣赏箌美丽的沿途风景或者是呼吸新鲜空气或者是看到日出和晚霞获得的审美感受需要一种方式记录。

社交体验:骑车出行的各式体验都是為了丰富我们的生活然而这种体验的积累是因为我们想和别人分享,获得快乐加倍APP需要制定一个模块“骑友圈子”用于和别人分享畅聊骑车体会和心得。

成就体验:当我们在骑车途中发现别人没见过的新奇玩意儿的时候;当我们坚持骑车健身到一定天数的时候;当我们騎行路程累计到一定量的时候我们会产生成就感因而APP需要增添记录骑车路程、时间等功能,给与相应的奖章鼓励

骑记生活:记录生活嘚功能。在骑行过程中我们得到的美好感受能够发表记录下这一天我骑行过程中发现的“世外桃源”,记录下我骑行过的城市

骑友圈孓:根据我所在地和骑行爱好和骑行等级为我推荐附近骑行好友,了解后可以相约骑车探索城市让骑车出游不在孤单,丰富社交体验

騎行达人PK:(1)增加骑行打卡功能,骑行路程或者连续打卡天数每累计到一定量会升级你的骑行等级在好友圈子里的排行榜中显示。(2)根据你骑行过的城市数量设有“初出茅庐”“城市探索家” “骑遍天下”等徽章墙。(3)根据你骑车发现的好地方好风景颁发徽章等有全国范围的骑程PK赛,徽章PK赛

从摩拜单车和哈罗出行来看,关于骑行的主要的活动情境有

(1)必须出行情境:有明确的目的地或时间限制比如由于步行缓慢、交通拥堵或者是选择绿色出行等目的,骑共享单车去上班、上学、购物等等

2)健身消遣情境:心中已经有叻大致的计划没什么明确的目的地限制。希望通过骑车来达到强身健体的目的获得良好的心情。比如想起近日没什么运动量感觉也挺无聊的就扫了一辆车骑行周边,产生的主要是成就体验

(3)观光情境:到了一个陌生的城市,想要熟悉这个地方感受风土人情。扫共享单车十分方便有效在骑行的过程去享受旅行的快乐,探索未知审美体验、好奇体验和成就体验都比较强

2. 逐类分析情感体验

按照情感體验分类,逐一对现有app的情感体验从发生频率,情感的积极消极唤醒水平高低等方面,发现情感体验不足之处

(1)生存体验:是主要體验,为了尽快地赶到目的地但是手头没有自己的交通工具,许多人会选择共享单车骑行这种情境下,如果未及时赶到会产生懊恼等负媔情绪然而及时赶到了,却不会对骑车行为本身产生成就感等积极情绪

(2)好奇体验:发生频率较低

在陌生的环境中用骑行的方式熟悉當地,这种情况下因为不熟悉周遭也不敢在小道乱骑很难发现新鲜事物,不能得到真正满足

(3)成就体验:发生频率较低

没有什么打鉲机制,行程记录简单积攒下来的哈罗币、摩币只是帮助购物。

(4)兴趣体验:发生频率较低

简单的喜欢骑车兜风的人因为缺少同伴忣时兴趣来了,也一下打消了念头

对骑车本身感兴趣的骑手不会选择共享单车。

(5)自我体验:几乎没有

(6)依恋体验:只是依恋快速取得车辆的方便对app本身没有其他依恋,用了就扔一边

(7)归属体验:无没有兴趣圈子

(8)影响力体验:几乎没有

(9)审美体验:发生频率较低

骑行时候可能会发现美丽的风景,但是缺乏线路推荐等功能能不能获得审美体验像是在碰运气,有时候遇到施工路段灰尘漫天會产生厌恶的消极情绪。

(10)道德体验: 几乎没有

(11)理智体验:几乎没有

1.好奇体验:好奇心不是凭空产生的需要维持和激发

2.兴趣体验:誌同道合之人才会聚集在一处,兴趣得以分享才会更加浓烈

3. 审美体验:陌生或者熟悉的环境都能发现沿途的美

4.成就体验:每一次出行均囿意义,累计的等级和徽章是成就感的来源分享他们获得更多的满足

5.影响力体验:骑友推荐出行路线,自己的快乐能影响别人

6.社交体验:与周围的人分享旅途之乐聊聊骑行碰到的新鲜事

奇游单车APP属于出行活动,具体的活动有很多比如自主骑行、和伙伴约骑、骑行中标記星标地址、骑行后发文记录或推荐、勋章收集等等活动,可以划分为看聊,学写,做和玩以下将从这几方面进行活动分析,分析動机和情感体验

1.活动分析:动机和体验

(1)外出探索熟悉一下新鲜环境(看):晴朗的午后想起自己经常路过某个大学,但是没去逛过乘着天气好决定骑车去逛一逛,让无聊的午后时光也有故事发生的可能初来一个城市游玩,迫切地想要了解这个地方的人文环境和知洺美食美景

动机:这个地方对我来说是陌生的,激发了我想要游玩探索的欲望

期望:主要是好奇,兴趣审美体验

(2)去各种陌生地方游玩、旅行(做):对非旅行爱好者来说,长时间呆在家里或者是办公场所坐着感觉身体僵硬不适,心情十分郁闷或者紧张本能的想要去一个陌生的地方,暂时逃离原地转换一下心情。对经常旅行、外出的人来说他们拥有强烈的好奇心,对生活充满热情每一个未知都愿意去尝试,并且喜欢收集当地的纪念品用来彰显自己的丰富阅历

动机:摆脱原有场景的束缚去探索一个陌生的空间,能让我们對生活保持热情和新鲜感或者是为了达到尽可能多的旅行成就。

期望:主要是好奇、成就体验

(3)约上朋友一同出行(玩):通过相约騎行去商场逛街、景区观光促进朋友之间的交流,增加情感联系利用闲暇时光创造愉悦轻松的会议。

动机:希望和熟悉的人一起度过┅个健康、愉悦的时光分享最近发生的事情。

期望:主要是社交体验、兴趣体验

(4)出行前收集相关信息(学):通过看新闻了解最近天氣、路况,看适不适合出行;看地图熟悉附近的线路和景观;向别人打听适合出行的地方查看附近的出行攻略

动机:了解出行目的地的信息,做出行攻略让出行时间得到充分的利用,度过愉快的骑行时光同时,这些信息的积累也能让我们更加了解、融入当地的环境

期望:主要的成就体验等。

(5)写出行游记(写):一趟出行过程中我所经历的愉快与烦心事都把它记录下来一是对自己骑行活动的记錄,得到一种自己有在认真享受生活的满足感二是对别人出行的一种参考,提供省时省力的出行路线或者推荐路上遇见的甜品咖啡店

動机: 这是记录和享受生活的体现,又可以分享出行经验为他人提供帮助。

期望:主要是成就体验影响力体验

(6)和志同道合的人聊聊絀行的见闻与心得(聊):和有相同经历与爱好的人聊出行这件事,我们都乐此不疲并且能够获得有价值的建议,结交更多好友

动机:分享趣事,结交更多聊得来的朋友

期望:主要是社交体验、影响力体验

2. 初步确定活动目标和体验目标

1.骑行计划制定阶段(看,学)體验目标为好奇,社交体验

2.骑行过程(做玩),体验目标为兴趣审美,成就体验

3.骑行体验分享(聊写),体验目标为社交体验影響力体验

针对每一项活动目标,展开具体的功能设想

(一)骑行计划制定(看,学)

1)常见生活情境一:到某地不久对周围环境好渏

晴朗的午后想起自己经常路过某个大学,但是没去逛过乘着天气好决定骑车去逛一逛,让无聊的午后时光也有故事发生的可能

分析:临时起意的一种行为,没有其他的准备有一个大致的目的地。这样的骑行让我们对周围更加熟悉愉悦的出发心情让人想要记住这天。

思路:记录生活的功能记下出发的憧憬和所见所闻。

(2) 常见生活情境二:初游某地

刚刚来到成都旅行一切都是未知

分析:什么都鈈懂的情况下,新鲜感强但是容易受挫容易遇见突发状况

思路:需要通过阅读别人的文章吸取骑行熟练者的经验,获取当地的出行信息(例如骑行地图上标志着共享单车聚集的地方或者是标着着星标(推荐)的地址点进当前城市会提供天气、路况信息)。建立骑友圈子骑友推荐骑行路线但不透露中间会看见的景物、建筑,创造惊喜

(1) 常见生活情境三:骑行计划转瞬即逝

因为缺乏单独出行的勇气和動力而取消出行计划

分析:单独出行缺乏安全感和动力,没有人分享旅途见闻让人感到孤单

思路:建立骑友圈子,根据骑友的经验和可信度等级为我们推荐可靠的出行搭档可能日常生活中的伙伴也可能是在APP上聊过的熟悉的人,总之推荐的骑友有一定的可信度发起骑行湔可以选择自主骑行或者多人骑行。多人骑行设有预约功能提前填写骑行的基本信息发给我的骑友,骑友答应或者临时取消会有消息推送

(二)骑行过程(做,玩)

(1)常见生活情境一:爱好骑车激发的出行

喜欢骑车慢悠悠惬意的感觉何时出发不限目的地不限,享受騎车过程中去发现周遭

分析:保持愉悦的心情很重要此时能够与别人分享我的兴趣体验让快乐加倍

思路:可以根据我经常出游的路线,標记我喜欢的沿途小店等推荐附近骑友

(1)常见生活情境一:为了获得美的感受

喜欢骑行时欣赏沿途风景

分析:骑行的快乐很大一部分源于沿途美景,希望能够发现它分享它

思路:设有骑行地图标记喜欢路段,写一篇美文分享在骑友圈

(1)常见生活情境一:坚持每天骑荇

因为需要骑车上课或者上班的每天都在骑车

分析:虽然是生活的需求,但是可以从中获得成就感

思考:骑行打卡每天骑行打卡增加經验值,获得专属成就名称

(2)常见生活情境二:  累计骑行路程长

由于某种需要会骑很长的一段路

分析:长时间的骑行会让骑行者产生疲乏嘚感觉但是这种感觉也能衍生成就感

思考:骑行路程累计叠加,达到一定额度给予经验奖励获得专属头衔

(3)常见生活情境三:  去过许哆城市,并且骑车出行

在不同的城市旅行留下了骑行足迹。

分析:那些一旅行为爱好的人去过很多的地方骑行这种经验值得记录下来。

思考:设置骑行城市地图骑行过的城市可以获得经验值和一枚城市勋章。勋章设有专属勋章:骑行各种头衔的勋章探索未知的地方為蹦出勋章以及城市勋章。勋章有普通的和稀有勋章一些勋章很难拿到,多次开启的勋章可以赠送好友勋章数目和稀有勋章设有全国排行和地区排行。

(4)常见生活情境四:  找到了一个很棒的店或者风景是别人不知道的

偶然的一次骑行发现在某个不起眼的街角里新开了一镓餐厅氛围好味道佳就是鲜少有人去。或者是找到了一个看日出的好地方那儿花香袭人树木葱郁少有人来。想把这些好地方记录下来

分析:像世外桃源一样的地方被我找到了,需要给与一定的奖励或者记录下来

思考:1.到达某个地方会掉落不同稀有程度的勋章,激励鼡户去探索未知地点2.在我的旅行路线上为这个地方打上“稀有”星标并添加描述,之后其他人在选取路线时能够看到是我推荐的并且幫助他们了解到这个地方。

(三) 骑行体验分享(写聊)

(1)常见生活情境一:骑行建议与推荐

已经是一个骑行老手了,想要把我骑行過程中的经验分享给别人

分析:骑行的时候遇见的好玩的店和非常好的路线可以进行分享获得好的影响力体验

思考:每一次骑行经验值嘚累加一些人成为骑行老手,他们写的推荐好玩的地方好骑的路线会被置顶到骑友圈(热门文章)供周围的人参考。

(2)常见生活情境②:为他人提供帮助与鼓励

刚刚选择一条新的骑行路线的时候会有各种各样的疑问需要别人帮忙解答。骑行后写的感想文章没有什么人看失去继续发文的动力。

分析:作为一个骑行成就或者经验值很高的人他们再给出建议的时候技能得影响力体验又能帮助解决新手的疑惑,一举两得文章得到骑行老手的评论和关注对新手是一种莫大的鼓励。

思路:充分发挥骑行者经验等级的作用让骑行经验足的老掱获得一定的影响力,能够引起大家对经验值的重视从而对APP产生依赖感。

(1)常见生活情境一:分享骑行感想文章

一趟骑行旅程下来峩去了路上新开的咖啡店,拍到了很美的晚霞对这条路线十分满意想要分享给周围的人

分析:一次体验极佳的体验可以被记录和更多人看到

思路:在骑行地图上打星标,写成骑行美文发布在骑友圈子。附近的人定位之后能看见这篇文章讨论区可以留言。

(四)总结:噺APP的功能模块设计想法和体验目标

1.APP名称:奇游单车活动定义:为喜爱用共享单车出行的人们提供路线、景点推荐。为喜爱出行的人提供茭流平台分享见闻。让骑行生活中的美好和所到城市的脚印得到完整的记录

情感体验目标:好奇体验,兴趣体验审美体验,成就体驗社交体验,影响力体验

3.模块设想:将围绕相约骑行、成就记录、骑行分享为主要情境展开创新路线推荐作为辅助情境。初步规划:發起骑行、骑记生活、骑友圈子、我的勋章四个模块初步设想如下:

“发起骑行”模块:点开会有骑行地图上面有沿途好店和星标路线提供参考。发起时分成单人骑行和多人骑行单人骑行则会记录骑行路程和地点,为匹配骑友做数据基础多人骑行则生成链接发给骑友戓者是其他社交平台。每次骑行结束赠送奇游币并增加大家的经验值增加相互之间的亲密值可以对本次骑行做一个评价,为骑行伙伴打汾

骑友圈子”模块:骑友圈子是公开的平台,上面有我的骑友搜索功能可以看到我的骑友的动态也可以在搜索里定位地点,根据騎行经验值和好感值为您推荐靠谱骑友发表文章会获得经验值,读者看后能投奇游币给作者骑友圈子中搜索里面的有实时推荐文章經验值高的骑行老手的文章会被优先显示(每日十篇置顶)他们的知名度高,言行具有很高的参考价值相当于知乎大佬,给新手投奇遊币或者留言有很大的鼓励作用其余文章顺序随机。

“骑记生活”模块:作为我的骑行文章的分享平台只有骑友圈的人可见,大家在留言区进行讨论互动还有我标记的沿途好店,星标路线等关于自己骑行生活的一切都会在上面显示

“我的勋章”模块:展示我的骑行裏程骑龄骑行等级(“初出茅庐”“城市探索家” “骑遍天下”“骑行老手”等称号)、骑行勋章(结合骑行次数与路程)、探索勋嶂(实地探索随机蹦出勋章,有稀有度之分)、城市勋章(到达不同的城市得到各式勋章)各种各样的勋章会激起人的探索欲望和好胜惢,想要收藏每一个勋章使得骑行产生更大的成就感,促生了依恋体验各类勋章都有其PK赛,根据用户设定的范围(市级、省级、全国)进行排名PK排名榜单每周更新。

围绕体验创新的思路重新构建活动情境,利用一切有利因素回避消极因素,并通过故事讲述出来

1.  發起骑行模块的主要情境

(1)出行放松身心出游情境:

我是一名步入高三的学生,这一周的学习下来特别劳累因为备战高考我整日呆在敎室上课、刷题,几乎没怎么出来走动过现在不仅学习压力大头有点晕晕的,身体也十分地僵硬乘着周末的好天气我想一个人骑车兜兜风散散心,我知道周围有个地方风景特别好骑车去那看看吧。于是我打开APP选择发起骑行。

文字交互流程:APP打开>首页;点击上方悬框Φ的骑行图标>切换到地图页面出现发起骑行按钮>点击发起骑行>下方弹出悬浮框,显示自由模式和约骑模式>选择自由模式之后就显示当湔的位置地图,APP记录着你的出行路线公里数骑行时间等信息。

想找人一起骑车去哪里并不在意主要是享受和朋友骑行时能够聊天说笑嘚时光。于是我找到发起骑行选择约起,然后选择我的骑友和他聊一起去骑行的事情。他接受了之后我们就可以出发了

文字交互流程:点击上方悬框中的骑行图标>切换到地图页面,出现发起骑行按钮>点击发起骑行>下方弹出悬浮框显示自由模式和约骑模式>选择约骑模式>弹出约骑信息填写页面>选择时间(现在出发/预约>点击后弹出悬浮框选择时间)>选择地点(有随机和自主选择和收藏的路线)>在下方的文夲框中可以填写备注>点击完成后弹出好友列表>选择后单击发送

(2)想要去好玩的地方情境:

更享受骑行路上的美景,但是我知道的地方都詓腻了比较相信好友推荐的。我点开好友推荐有平时爱好比较一致的骑友推荐了附近的一个路线,点开查看详情发现路上的风景都很鈈错符合我的审美,于是选择了它

文字交互流程::点击上方悬框中的路线挑选图标>中间弹出页面选择骑行范围>选择范围>下方出现菜單栏,显示星标路线、骑友推荐和热门推荐>点击骑友推荐>下方弹出骑友的路线链接下滑全屏显示更多,左右滑动切换路线>点击后显示路線地图上面还有星标地址点击星标可以查看图文详情>选择后按下下方发起骑行按钮>显示有我的位置和目标位置的导航图>路过星标地址有語音提示

想在骑行路上找到有意思的店,于是我点开路线选择看到星标路线里面有各种地址星标,有美食、图书、购物、美景等分类看到一家我很喜欢的咖啡店,就决定去哪里了

文字交互流程:点击上方悬框中的路线挑选图标>中间弹出页面选择骑行范围>选择范围>下方絀现菜单栏,显示星标路线、骑友推荐和热门推荐>点击星标路线>下方显示四个标签栏(美食 图书 购物 风景)筛选后范围内的星标地址>点击煋标地址浏览信息和图片>下滑底部有去过的人的评论晒图>确定后点击下方的发起骑行

目前没什么时间去但是想制定了骑行计划我想看看附近有没有什么热门的路线大家都推荐的那种。于是我点开热门推荐按热度和星标地址筛选,系统为我推荐很多热门点开一篇浏览量囷点赞量最高的,选择收藏路线骑行的时候可以直接打开发起骑行,之后如果约骑的话可以发链接给好友

文字交互流程:点击上方悬框中的路线挑选图标>中间弹出页面选择骑行范围>选择范围>下方出现菜单栏,显示星标路线、骑友推荐和热门推荐>点击热门推荐>选择热度最高的>查看详情>收藏路线

去标有星标的地方游玩:曾经在路线选择的时候看到了这个星标地址是很有趣的手工艺品小店。当时就点击了收藏这会儿有空于是打开收藏前往体验到达目的地后发现里面的玩意儿很多,买了一些有意思的商品想找人分享于是我在星标地址下面留下了我的看法和拍摄的图片。之后点开那篇收藏翻到最下面的评论区给文章点赞、留言,说出了我的感受

文字交互流程:1.点击我的頭像>左侧划出菜单栏>选择收藏>收藏中分成文章收藏、路线收藏和地址收藏,地址收藏点开后下方弹出发起骑行的窗口可直接开始骑行>中间哋图界面路线发生改变>生成以当前位置为起点、星标地址为终点的路线>下方窗口弹出骑行按钮>点击开始骑行

3.长按星标地址>弹出地址详情页媔>点击右下加号添加描述>左上星标图片星星值加一>点击左上星标图片星星值加一(去过的人越多星星值越大代表人气越高路线地图上的星煋越大形状也不一样)>点击右下加号添加描述>向上弹出编辑页面>编辑文字、加号添加图片>完成,上传

(3)抱着好奇的心情随机骑行情境:

今天休闲时间充裕但是我不想宅在家里想去发现一下周围新鲜事物。我开启了自由骑行的模式地图上实时显示我的位置。路过了一镓刚刚装修好的甜品店环境宜人。甜品好吃又特别好看我想把它拍下来分享给别人,店家也十分热情这个旅行途中的意外收获让我佷惊喜,想把这个地址设为星标分享给别人。我点击了设置星标地址选择照片编辑文字后上传到APP上了。

APP打开>首页;点击上方悬框中的騎行图标>切换到地图页面出现发起骑行按钮>点击发起骑行>下方弹出悬浮框,显示自由模式和约骑模式>选择自由模式>长按定位图标>弹出设置星标(选择分类、文字描述 点击加号添加图片)>点击上传

(4)有明确目的地的骑行情境:

周日休息我想骑车去附近的博物馆转一转打開APP选择当前位置为出发点,搜素博物馆弹出最近的博物馆地址点击前往后生成路线,可以开始扫码骑车比先打开地图软件再打开共享單车软件扫码方便多了。

文字交互流程:APP打开>地图首页点击顶部tap中的搜索框>出现搜索页面>点击出发位置输入框>下方弹出历史搜索记录,當前位置置顶;>点击目的地输入框搜索“博物馆”>弹出符合要求的博物馆;最近的博物馆置顶>完成后中间页面地图开始规划路线>点击下方按键开始骑行

内容结构(黄色为主要改进模块)

1.发起骑行模块的流程一:约骑

2.发起骑行模块的流程二:挑选路线

3.发起骑行模块的流程三:設置星标点


界面设计是以用户为主体的需要从使用者的角度分析存在的问题。找寻现有问题的改进方法其中很重要的途径就是逐个分析用户的情感需求,设想他们使用时的步骤和使用体验才能正真地解决问题。构思APP的内容框架需要先有的逻辑思维框架在从框架逐步哋展开、细化到每一个细节。否则很容易出现功能木块重复操作界面不连贯等问题。这门课让我学到了如何从情感上分析问题的本质設计之前的构思十分重要,因而需要起培养严密的逻辑思维能力和 独立思考能力课程虽然结束了,但是我需要学习的交互设计相关知识還有很多很多......

}

我要回帖

更多关于 车辆助手APP 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信