首页技术文章正文

H5设计:结构设计分析方法

更新时间:2021-02-21 来源:黑马程序员 浏览量:

设计需求:

校园表白场景感的播放音视频界面设计

产品目标:校园表白 鼓励用户听广播表白

用户目标:通过广播结识朋友,表白获得爱情

结构设计

顶部设计:弹幕区;此处不易手控操作,所有设计为用户可以观看的内容,刺激用户主观能动性发布弹幕

顶部背景设计:视觉效果要突出,营造校园爱情表白氛围,此处可设计篇幅大一些,便于吸引用户视觉

中部内容设计:播放电台的控制按钮,便于用户操作切换电台,还可以给感兴趣的主播点歌,强调点歌功能,刺激用户

中下部设计更多内容选择:当用户对当前推送内容不感兴趣时可以快速切换,给用户带来更多选择

底部设计:强调发弹幕和聊天,促进用户之间的沟通营造校园表白的氛围,在满足用户需求的前提下,达成产品目标

草图设计如下

H5页面设计效果

H5设计草图



猜你喜欢:

UI设计之色彩的心理效应

ui设计是什么?UI设计行业前景怎么样?

UI设计原则:汇总深入人心的UI设计原则

黑马程序员全链路UI/UI设计课程

分享到:

Java培训班课程javaee

Python培训机构python大数据

web前端培训课程升级V8.5web

AI+设计培训课程ui

大数据培训课程cloud

软件测试培训课程test

c

新媒体运营培训netmarket

产品经理培训课程pm

linux培训Linux

movies

智能机器人培训robot

电商视觉设计课程uids

AI

集成电路应用开发(嵌入式)培训课程jdbc

在线咨询 我要报名
和我们在线交谈!