首頁電商視覺設計技術文章正文

如何設計H5頁面?有什么技巧?

更新時間:2021年02月21日11時11分來源:傳智教育瀏覽次數(shù):

設計需求：

校園表白場景感的播放音視頻界面設計

產(chǎn)品目標：校園表白鼓勵用戶聽廣播表白

用戶目標：通過廣播結識朋友，表白獲得愛情

頂部設計：彈幕區(qū);此處不易手控操作，所有設計為用戶可以觀看的內(nèi)容，刺激用戶主觀能動性發(fā)布彈幕

頂部背景設計：視覺效果要突出，營造校園愛情表白氛圍，此處可設計篇幅大一些，便于吸引用戶視覺

中部內(nèi)容設計：播放電臺的控制按鈕，便于用戶操作切換電臺，還可以給感興趣的主播點歌，強調(diào)點歌功能，刺激用戶

中下部設計更多內(nèi)容選擇：當用戶對當前推送內(nèi)容不感興趣時可以快速切換，給用戶帶來更多選擇

底部設計：強調(diào)發(fā)彈幕和聊天，促進用戶之間的溝通營造校園表白的氛圍，在滿足用戶需求的前提下，達成產(chǎn)品目標

草圖設計如下

H5頁面設計效果

H5設計草圖

猜你喜歡：

UI設計是什么?UI設計師有哪些職能?