保姆级教程!可视化大屏地图制作技巧

综合 2294℃

1、百度落地页体验***总览

百度搜刮不时戮力于汲引搜刮用户的挪动不雅不雅不雅不雅鉴赏体验,营建安康的地页搜刮生态。近几年百度搜刮延续宣布《百度挪动搜刮落地页体验***》,体验尽心戮力改进和迭代搜刮计策,解读剖断与低劣告白作战,全文与各位斥地者共创安康精细的百度搜刮处事  。

《百度APP挪动搜刮落地页体验***5.0》如今是挪动搜刮成本平台最新最全的官方带领文档 ,从信息掉落踪掉落踪 、地页页面不雅不雅不雅不雅鉴赏、体验交互独霸 、解读处事圭表类型四方面制订了愈加了了、全文正视的百度圭表类型请求 ,全方位汲引挪动搜刮落地页体验 。挪动

搜刮产品运营师郭教员连络最新案例 ,地页全方位地为斥地者们解读《百度APP挪动搜刮落地页体验***5.0》的相干内容,快来一同上课啦  !

百度挪动APP落地页体验***解读(官方)(图1)

2、页面信息掉落踪掉落踪

1、加载速度 :页面首屏内容应在1秒内加载完成  。
2 、H5页面优化建议:

(1) 成本加载 :

· 膨胀或回并同类成本;

· 非首屏图片懒加载 。

(2) 页面衬着:

· 将CSS格式写在头部格式表,促进由CSS文件群集请求构成的衬着梗阻;

· 对非文字元素(如图片,视频)指定大年夜小 。

3、智能小法度圭表类型加载速度优化建议 :

(1) 优化小法度圭表类型包体积 :减小包的体积可以促进包的下载时分。

(2)请求数据优化 :触及到关头数据的异步请求可以尽早的发出,越早筹搞妥数据 ,就可以越早的向视图层发送这些衬着用的数据 。

(3)渐进式加载 :延迟加载页面的骨架,可以促进用户的白屏等待时长 。

3 、页面不雅不雅不雅不雅鉴赏圭表类型

1 、内容模块有较着分辨

(1)页面主体内容与告白、相干推荐有较着分辨。

百度挪动APP落地页体验***解读(官方)(图2)

△后背示例:正文与告白距离不较着,用户体验不佳 。

(2)翻页键 、展开全文等下场键与告白之间需有较着距离或豆割线;阻拦烦扰用户独霸 。

百度挪动APP落地页体验***解读(官方)(图3)

△正面示例:展开全文有文字标识,放置公允 。

2、公允放置"展开全文"按钮:

(1)展开全文下场有了了的文字标识。

百度挪动APP落地页体验***解读(官方)(图4)

△后背示例:展开下场无文字标示,且与APP调起按钮距离过近,不契合请求。

(2)展开全文下场在全文中最多展示一次 。

(3)不成涌如今落地页的首屏内容中。

百度挪动APP落地页体验***解读(官方)(图5)

△后背示例 :展开全文下场放置在首屏。

(4)与其告白等其他内容模块需设置距离距离  。

3、字体间距适中

落地页的字体大年夜小及文本间距的选择 ,不成较着过除夜太小 ,需契合手机用户不雅不雅不雅不雅鉴赏  。页面主体内容的字号应不小于10pt ,字体与行高的比率应除夜于1.4 。

小法度圭表类型具体字号的选择可参考《智能小法度圭表类型筹划圭表类型》 。

百度挪动APP落地页体验***解读(官方)(图6)百度挪动APP落地页体验***解读(官方)(图7)

△左图为正面示例 ,页面字体适中,段落筹划公允;右图为后背示例 ,字体太小。

4、机型适配

不合手机型号应做好页面适配 ,不影响用户的正常不雅不雅不雅不雅鉴赏独霸;IOS单方面屏手机底部横线不成遮挡页面的具体下场和内容 。

百度挪动APP落地页体验***解读(官方)(图8)

△左图为正面示例:黑色横条没有遮挡页面内容;右图为后背示例:不适配IOS单方面屏,底部黑色横条遮挡下场键 。

5 、严禁的告白内容

(1)严禁背禁低俗告白内容(包含但不限于色情 、打赌、功令圭表类型的背禁品及处事;)

百度挪动APP落地页体验***解读(官方)(图9)

△后背示例 :打赌类告白,背反功令圭表类型。

(2)严禁子虚困惑类告白内容 ,阻拦独霸"国度级" 、"最初级" 、"最好"等用语  ,不克不及朴实大年夜大年夜大年夜大年夜大年夜大年夜大年夜大年夜终局、子虚承诺,诱惑用户分享;

百度挪动APP落地页体验***解读(官方)(图10)

△后背示例:子虚告白 。

(3)严禁告白内容伤害国度慎重益处 、泄漏国度奇妙 、伤害小我隐私。

百度挪动APP落地页体验***解读(官方)(图11)

△后背示例:上图告白内容伤害小我肖像权 ,不合规圭表类型 。

6 、严禁的告白格式

(1)悬浮告白

百度挪动APP落地页体验***解读(官方)(图12)

△页面设置悬浮告白 ,不契合请求。

(2)弹窗告白

百度挪动APP落地页体验***解读(官方)(图13)

△阻拦设置弹窗告白

(3)遮屏告白

百度挪动APP落地页体验***解读(官方)(图14)

△阻拦设置页面遮屏告白

(4)股栗/明灭告白

百度挪动APP落地页体验***解读(官方)(图15)

△后背示例 :页面顶部设置明灭告白,不契合请求 。

(5)轮播告白

百度挪动APP落地页体验***解读(官方)(图16)

△后背示例:底部轮播APP下载告白,不契合请求  。

(6)告白主动播放

7 、告白面积及职位

(1)顶部嵌进告白

首屏顶部准予嵌进不超出一屏面积10%的精细告白;告白位上有了了的【告白】字样标识;图片了然、格式美不美不雅不雅不雅不雅不雅不雅 ,视觉体验好 ,色采与页面集团调和。

百度挪动APP落地页体验***解读(官方)(图17)

△顶部嵌进不超出一屏面积10%的图文格式告白。

(2)正文交错告白

文章内容页或信息概略页中 ,从主体内容问题最早到正文内容停止前阻拦拔出任何告白,包含问题与正文之间;正文中;正文及下场键之间 。

百度挪动APP落地页体验***解读(官方)(图18)

△后背示例 :正文中交错告白。

(3)首页、列表页告白

列表页与首页中,一屏的告白总面积必须小于1/3;告白内容视觉感知上不克不及与原生内容反差很除夜。

百度挪动APP落地页体验***解读(官方)(图19)百度挪动APP落地页体验***解读(官方)(图20)

△左图为后背示例:告白面积过除夜;右图为正面示例 :告白面积公允  。

4、交互独霸圭表类型

1 、下场导航按钮设置

(1)下场职位结实且吻合用户习惯  ,与页面其他内容模块(如告白)有较着间距;

(2)下场真实可用,独霸便捷,不成展示困惑信息或带领跳转至第三方页面;

(3)侧悬浮下场按钮面积不克不及过除夜 ,阻拦影响用户不雅不雅不雅不雅鉴赏。

百度挪动APP落地页体验***解读(官方)(图21)百度挪动APP落地页体验***解读(官方)(图22)

△左图为正面示例:前去键放置公允;右图为后背示例 :下场键放在目次中  ,影响用户体验。

2、征询按钮

(1)往后页不合征询下场只能展示一次;

(2)征询下场可在页面底部或正面嵌进或悬浮,面积不成超出一屏面积的10%;

(3) 在用户未主动点击的气候下 ,征询的对话窗口不成主动弹出 。

百度挪动APP落地页体验***解读(官方)(图23)

△正面示例:下场键放置公允。

百度挪动APP落地页体验***解读(官方)(图24)

△正面示例:征询下场悬浮底部 ,面积合规 。

3 、文本独霸/图片交互

(1)页面的文本内容应支撑长按可复制,链接可点击;

(2)支撑点击调起搜检除夜图,点击前去小图;

(3)双指按捏放除夜促进下场独霸自如;

(4)有多张图片的气候下,支撑放置滑动切换图片  。

百度挪动APP落地页体验***解读(官方)(图25)

△正面示例 :图片支撑点击调起除夜图、放置滑动切换图片。

5、处事圭表类型

1 、登录便捷

站点及小法度圭表类型的登录出口了然较着,登录编制便捷,支撑受权登录,比如百度账号受权等;可以经久贯穿连接登录外形,阻拦多次几回登录给用户带来的宏壮体验 。

百度挪动APP落地页体验***解读(官方)(图26)

△正面示例 :小法度圭表类型支撑多种登录编制 ,既有登录受权也有手机号登录 ,契合请求。

2、定位处事

当站点及小法度圭表类型供给给用户的处事有定位需求时  ,理应支撑主动定位处事,并且做到定位切确无误 。

百度挪动APP落地页体验***解读(官方)(图27)

△后背示例:该小法度圭表类型不支撑主动定位,用户体验差 。

3、下场无缺

(1)H5站及智能小法度圭表类型供给处事时 ,中心的处事下场应设置无缺 ,并且理论可用 ,给用户有效回响,独霸户享有便捷、无缺的全流程处事体验 。比如电商类站点或小法度圭表类型应具有搜刮  、客服、收入、购物车 、订单查询、退货等根本处事下场。

(2)除夜部分处事体验的幻想下场完成都需求有收入下场 ,是以斥地者应支撑调起除夜部分用户习惯独霸的收入平台,如微信收入或收入宝 ,简化收入流程。

百度挪动APP落地页体验***解读(官方)(图28)

△下场无缺:具有客服征询 、购物车、采办等下场 。

百度挪动APP落地页体验***解读(官方)(图29)

△正面示例:以上小法度圭表类型支撑多重收入编制 ,简化了收入流程。

4、处事交互

处事界面集团排版了然,筹划公允,色彩齐截,页面和控件切换自如。

百度挪动APP落地页体验***解读(官方)(图30)

△集团页面美不美不雅不雅不雅不雅不雅不雅,筹划了然。

5 、信息查询

支撑用户登录后可查询汗青信息,如快递追踪  、采办记实查询征询 、记实查询等;且汗青信息保管无缺。