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