好久没有更新,章鱼哥又来给大家分享姿势!鼓掌👏
产品经理提出要进行金大师APP直播室改版,我负责交互展示,所以分享一下这次做交互设计的经验。这篇主要以视频直播室改版交互设计作为案例说明。
首先,介绍一下视频直播室的使用场景、改版目的以及改版目标。
一、视频直播室的使用场景:
用户在听老师讲课的同时可以和网友进行互动,对老师进行提问,可以看行情,跟单并快捷交易。
二、改版的目的:
后续功能的扩展性
更好的交互体验
三、改版目标:
以互动+纸条+打赏为辅助功能去增加用户与用户、用户和老师的互动粘性
以行情+交易/开户为辅助功能去更方便快捷的让用户去在一个界面完成所有和交易相关的操作
下面分享一下实际工作的总结。
做交互的顺序遵循从无到有,从有到优原则
一、导航不要放太多选项:
这次改版目的之一就是为以后拓展功能做铺垫,产品需求添加了快捷交易、课程预告、历史直播、直播观点以及分享功能,下边是第一版交互界面的导航tab,我按照产品提供的原型,把所有要添加的新功能放在了黄色加号里。
加号展开,效果如下图:
然而后期优化的时候发现如果这里的加号作为功能拓展入口,那么就是将来所有要添加的选项都要放在这里,会造成这块展开后占屏比太大,后期设计会遇到困难。
因此就要考虑把这些选项的入口放在哪里,最后考虑放在标题栏的设置选项位置
但是这就需要把设置换一个icon,换成➕,表示更多。这样布局,瞬间就觉得导航Tab也清爽了不少,只有优先级最高的四项:纸条、互动、快捷交易和礼物。如下图:
同时,导航Tab设计改变为独立按钮形式,单项的点击面积也变大了,操作体验上有了优化。
因此,导航是最引导用户使用的功能,那么在导航设计的时候一定不要放太多内容,尤其第一版设计竟然把拓展入口放在了这么关键位置,对以后的拓展会很蹩脚。
二、选项布局依照其功能的优先级:
对于功能优先级的了解有利于页面布局设计,上面总结的导航条不要放太多内容,其实就是对功能优先级的筛选结果,优先级比较高的可以放一级位置展示,次级功能当然就可以收纳到二级入口。
对功能优先级的把控对于页面布局作用还体现在功能列表的排序,例如上图中点击➕号,展开拓展功能选项,按照功能优先级依次排序。
同时对功能优先级的把控对于页面布局作用还体现在功能突出设计,例如上图中加强交易功能按钮设计。
三、细节取舍可以优化页面体验:
这一点主要体现在标题栏处直播室名称下的在线人数和礼物数的取舍,最终觉得这个数值并没有什么必要性,就残忍去掉了,同时提升了页面体验,啊,标题栏也清爽了!
这篇主要是对直播室首页的交互设计工作的总结上篇,敬请期待下篇章鱼哥带你了解二级功能页面交互设计的总结要点。