

首页  思维导图  详情



关于H5页面组件的交互方式

2023-04-28 14:23:17   7  举报





AI智能生成

这里整理了一下关于H5页面的一些交互方式，希望能帮到有需要的产品小伙伴哈~

交互设计

H5组件

模版推荐

作者其他创作

大纲/内容

4种信息流

列表流

以文字为主导，内容以列表的形式表现出来

举例

手机短信列表

图文并排布局-左图右文/左文右图/上文下图

应用

新闻

信息

资讯类产品

卡片流

图像与文字结合的方式，与列表流相比相当于把图片尺寸访达，内容图文结合以卡片的形式展现出来

举例

公众号，一行只有一个卡片，每个卡片的尺寸固定大小

单列卡片流/双列卡片流

瀑布流

滑动页面时，内容源源不断刷新出来，感觉一直滑不到底，瀑布流是内容呈现的方式，只负责展现内容，不对内容进行干预

举例

feed流

呈现内容时，会对内容进行干预，会根据用户的喜好来更新和推荐内容，常和”推荐“一起使用

举例

淘宝

小红书

金刚区

两种布局方式

不区分设计

优点

功能个数不受限，延展性强

展示区域大，设计细节发挥空间大

缺点

信息层级区别弱，差异性小

超出两行采用左滑手势属于低频操作，并没有给其他功能预期的流量加持

区分设计

优点

核心与个性化（or推荐）优先级明显，便于用户过滤其他功能

算法提升，个性化区域更易命中用户画像（千人千面

缺点

功能个数有限

依赖平台技术

演变（营销位）

区分式布局：在核心功能与推荐功能之间设置灵活的运营位，更利于塑造首页的活动氛围

不区分式布局：营销位由原先的卡片式优化为版头通栏or全屏大图，强调活动氛围

金刚位响应活动氛围：坑位根据活动基调调整，周期短，设计创意、活动氛围整体提升，但更改样式，使icon辨识度降低，用户的学习成本随之提升

风格

实物类

优点

主题明确，更直观、理解成本低

缺点

素材依赖度高，易视觉疲劳

场景

适合具象型产品，如生鲜蔬果、日用品、文玩用品、服饰、家具等

插画类

优点

创意性强、可塑性强、氛围感强，延展性强、易形成品牌调性

缺点

不直观，依赖文本信息，不易把控设计细节

场景

适合偏概念型产品，如：金融、音频、运动、视频、旅游等

实物与插图结合

优点

具象产品与运营入口兼并

缺点

依赖设计师对整体区位的风格把握度，处理不好易造成视觉混乱，用户理解成本提升

场景

适合具象型产品，且风格相对冷静的APP，如：数码、服装配饰、轻奢等

总结

从设计角度从出发

金刚区的风格将很长一段时间是用户打开APP最熟悉的区域，风格设计不宜常改动

从业务角度出发

金刚区聚合了核心功能是用户对平台业务形成习惯的重要模块，不宜常改动业务位置

从营销角度出发

营销氛围可拆分日常活动或大促活动进行区位探索

瓷片区

定义

由运营板块拼接而成，视觉上像一块块瓷片，灵活性高

适用于各种运营模式，具有较高的转化率

布局

瓷片的外容器排版

单行

优点

节省屏效，日常营销为重点业务留白

缺点

坑位有限，三个以上时营销氛围设计受限

多行

左右排列

优点

主次层级清晰，适合作为功能入口

缺点

坑位越多，越影响营销氛围；推行者需具备与各业务沟通的能力，协调入口之间的平衡

上下排列

优点

个数不受限制，易塑造氛围感

缺点

高信噪比

图文排版

满版型

以图片为吸引点，充斥整个瓷片区，文本内容居左排版为主，常见旅游、电竞、资讯类

上下分割型

版面分为上下两部分，分别配置文字或图片，常见上文下多图的形式，符合常规的阅读顺序，该场景下图片更易引起用户兴趣，常见电商类

左右分割型

版面分割成左右两部分，分别配置文字或图片，常见左文右图的形式，该场景下，文本偏理性，具有直观的表述能力；图片偏感性，辅助文本信息点缀模块。常见资讯类、产品入口等

中轴型

常见垂直排列，信息更集中有活力

倾斜型

版面主体倾斜排列，常见对角线式形式。能承载更多的信息内容，页面层级也更活跃

配图风格

实物类

优点

识别性高、更直观、可复用、设计效率高，个性化推荐更精准

缺点

对图片素材要求较高，个性化服务需要开发资源

插画类

优点

创意性强、可塑性强、具有趣味性、易形成品牌调性

缺点：抽象图形不直观，复用性低，绘制耗时，不易做个性化

 Collect

Get Started

APP转化为h5页面设计

 Collect

Get Started

小说H5页面开发方案

 Collect

Get Started

 Collect

Get Started

应用宝H5





0 条评论

下一页