关于H5页面组件的交互方式
2023-04-28 14:23:17 6 举报
AI智能生成
这里整理了一下关于H5页面的一些交互方式,希望能帮到有需要的产品小伙伴哈~
作者其他创作
大纲/内容
以文字为主导,内容以列表的形式表现出来
手机短信列表
图文并排布局-左图右文/左文右图/上文下图
举例
新闻
信息
资讯类产品
应用
列表流
喜马拉雅FM、qq浏览器
图像与文字结合的方式,与列表流相比相当于把图片尺寸访达,内容图文结合以卡片的形式展现出来
公众号,一行只有一个卡片,每个卡片的尺寸固定大小
单列卡片流/双列卡片流
卡片流
滑动页面时,内容源源不断刷新出来,感觉一直滑不到底,瀑布流是内容呈现的方式,只负责展现内容,不对内容进行干预
Pinterest
瀑布流
呈现内容时,会对内容进行干预,会根据用户的喜好来更新和推荐内容,常和”推荐“一起使用
淘宝
小红书
feed流
4种信息流
功能个数不受限,延展性强
展示区域大,设计细节发挥空间大
优点
信息层级区别弱,差异性小
超出两行采用左滑手势属于低频操作,并没有给其他功能预期的流量加持
缺点
不区分设计
核心与个性化(or推荐)优先级明显,便于用户过滤其他功能
算法提升,个性化区域更易命中用户画像(千人千面
功能个数有限
依赖平台技术
区分设计
两种布局方式
区分式布局:在核心功能与推荐功能之间设置灵活的运营位,更利于塑造首页的活动氛围
不区分式布局:营销位由原先的卡片式优化为版头通栏or全屏大图,强调活动氛围
金刚位响应活动氛围:坑位根据活动基调调整,周期短,设计创意、活动氛围整体提升,但更改样式,使icon辨识度降低,用户的学习成本随之提升
演变(营销位)
主题明确,更直观、理解成本低
素材依赖度高,易视觉疲劳
适合具象型产品,如生鲜蔬果、日用品、文玩用品、服饰、家具等
场景
实物类
创意性强、可塑性强、氛围感强,延展性强、易形成品牌调性
不直观,依赖文本信息,不易把控设计细节
适合偏概念型产品,如:金融、音频、运动、视频、旅游等
插画类
具象产品与运营入口兼并
依赖设计师对整体区位的风格把握度,处理不好易造成视觉混乱,用户理解成本提升
适合具象型产品,且风格相对冷静的APP,如:数码、服装配饰、轻奢等
实物与插图结合
风格
金刚区的风格将很长一段时间是用户打开APP最熟悉的区域,风格设计不宜常改动
从设计角度从出发
金刚区聚合了核心功能是用户对平台业务形成习惯的重要模块,不宜常改动业务位置
从业务角度出发
营销氛围可拆分日常活动或大促活动进行区位探索
从营销角度出发
总结
金刚区
由运营板块拼接而成,视觉上像一块块瓷片,灵活性高
适用于各种运营模式,具有较高的转化率
定义
瓷片的外容器排版
节省屏效,日常营销为重点业务留白
坑位有限,三个以上时营销氛围设计受限
单行
主次层级清晰,适合作为功能入口
坑位越多,越影响营销氛围;推行者需具备与各业务沟通的能力,协调入口之间的平衡
左右排列
个数不受限制,易塑造氛围感
高信噪比
上下排列
多行
布局
以图片为吸引点,充斥整个瓷片区,文本内容居左排版为主,常见旅游、电竞、资讯类
满版型
版面分为上下两部分,分别配置文字或图片,常见上文下多图的形式,符合常规的阅读顺序,该场景下图片更易引起用户兴趣,常见电商类
上下分割型
版面分割成左右两部分,分别配置文字或图片,常见左文右图的形式,该场景下,文本偏理性,具有直观的表述能力;图片偏感性,辅助文本信息点缀模块。常见资讯类、产品入口等
左右分割型
常见垂直排列,信息更集中有活力
中轴型
版面主体倾斜排列,常见对角线式形式。能承载更多的信息内容,页面层级也更活跃
倾斜型
图文排版
识别性高、更直观、可复用、设计效率高,个性化推荐更精准
对图片素材要求较高,个性化服务需要开发资源
创意性强、可塑性强、具有趣味性、易形成品牌调性
缺点:抽象图形不直观,复用性低,绘制耗时,不易做个性化
配图风格
瓷片区
交互方式
0 条评论
回复 删除
下一页