花瓣网
素材会员
登录/注册

拖动进度条实时预览画面 从短视频到长视频,内容量的丰富可以满足用户的观看需求,针对长视频来说进度的设计可以便于用户选取感兴趣的部分。 抖音的进度条设计也在不断的探索新的体验,最近更新的版本中在拖动进度条时,会隐藏其他附属的功能,让界面显得更加简洁。拖动进度条时也会实时预览显示视频画面,辅助用户进行精准的内容确定,提高用户的操作效率。

拖动进度条实时预览画面 从短视频到长视频,内容量的丰富可以满足用户的观看需求,针对长视频来说进度的设计可以便于用户选取感兴趣的部分。 抖音的进度条设计也在不断的探索新的体验,最近更新的版本中在拖动进度条时,会隐藏其他附属的功能,让界面显得更加简洁。拖动进度条时也会实时预览显示视频画面,辅助用户进行精准的内容确定,提高用户的操作效率。
同来源
相似商用素材I源文件可下载编辑更多
APP-瓷片区
190采集 · 518关注
丰富背景设计的视觉感
除了在顶部区域进行运用以外,也有一些产品会在背景层面进行强化,相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少,在局部背景层上的运用比较多些,可以强化局部模块的视觉感。
强化个人中心顶部视觉区域
随着互联网用户年轻化的趋势,在配色上面逐步趋近于年轻化,众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势,可以是同色系的饱和度变化,也可以是不同色相的相互融合。利用低饱和度高明度的配色原则,使得整体的视觉感更加轻量化,视觉效果清新自然且通透力更强。
满足用户好奇心的设计



用户从小白到依赖是一个逐步探索的过程,好奇心的用户会点击尝试任何的功能,甚至连一个图标或者 LOGO 都希望获得彩蛋。作为设计师来说设计出来的每一个元素都需要考虑用户体验,给予反馈式的设计才能满足好奇心的驱使。



爱奇艺 APP 首页左上角的 LOGO 展示你有注意到吗?有没有尝试去点击体验,作为好奇心驱使特意尝试了一下。点击之后会跳转到皮肤等设置的页面,为该功能的曝光新增了首页入口,用户也可以通过个人中心“装扮”进行设置。该设计解决方案不仅满足了用户点击的好奇心,也赋予了
隐藏式设计提高版面利用率
#做任务#签到
对于用户来说希望内容具有较高的可见性,提高内容的曝光度才能被关注。在控制内容的优先级时,通过隐藏式设计可以满足更多内容的呈现,不过需要做好隐藏内容的引导,提高隐藏内容被发现的概率。



网易云音乐 APP 在云贝中心签到设计中使用了隐藏式设计,将签到相关的附属内容隐藏在展开卡片中,为更多主要内容提供了展示空间。为了提高展开的交互设计,在每天初次访问时会默认展开,然后再收起隐藏,这个动态的指引提高了这个交互动作的曝光度。利用隐藏式设计满足了产品需求,通过动作引导提
特殊场景下的差异化设计



根据用户使用场景和特殊情况出现时,产品会结合变化呈现不同的功能或者服务,这种差异化的设计更能体现情感化设计的一面,提高用户对于产品的认可度。



腾讯新闻 APP 在东航事故出现时,在底部操作栏新增了祈祷的图标,方便用户表达祈祷的心情。特殊情况下的差异化设计满足了用户的情感需求,也体现出了产品的温度,带给用户更强的粘性。
UI 场景中的极光风设计

由于在众多落地产品中被广泛运用,形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似,也有设计师将该风格归类为弥散光,下面就看一下具体的运用场景。


2.1、强化导航栏设计的视觉感
如果想要强化顶部导航栏的视觉感,通常是利用品牌色作为背景颜色,这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式,而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力,也能使得整体风格更加年轻化。
弹幕设计也可以出现在社区中,营造社区的氛围感。自如 APP 在发现生活栏目顶部视觉区域也运用了弹幕设计,以此来提高自如社区的氛围感,吸引更多用户参与分享和评论。
优化指引路径提高操作效率



通过提取本机号码一键登录减少了繁琐的注册流程,提高了登录的效率,减少用户的操作路径。在登录时都需要用户同意一些条款协议等内容,当用户未勾选时通常都是提示用户,指引用户选择后操作。这样的设计增加了用户的操作路径,使用体验不是很好。



网易云音乐 APP 在同样问题出现时,提供了一个弹窗进行指引,用户无需重复操作,直接点击“同意并继续”即可完成登录。在用户误操作出现时,无需用户过多的操作路径,给出了更高效的操作解决方案,提高了用户使用体验。
推荐模块的轮播翻页设计

推荐模块在产品设计中较为普遍,也呈现了各式各样的设计解决方案,结合自身的内容属性进行设计,是体现差异化设计的关键。

最近在喜马拉雅 APP 播客栏目发现了不一样的设计表达,通过专辑封面形式结合辅助解释来设计。不仅结合了自身内容属性,也能在强化视觉感的同时利用文案辅助让解释更加清楚。通过手势滑动进行翻页切换,动态效果也是非常的流畅自然。
拖动进度条实时预览画面

从短视频到长视频,内容量的丰富可以满足用户的观看需求,针对长视频来说进度的设计可以便于用户选取感兴趣的部分。

抖音的进度条设计也在不断的探索新的体验,最近更新的版本中在拖动进度条时,会隐藏其他附属的功能,让界面显得更加简洁。拖动进度条时也会实时预览显示视频画面,辅助用户进行精准的内容确定,提高用户的操作效率。
底部功能区的延伸设计

底部功能区是手势操作的最佳区域,近些年越来越多的产品对该区域进行延伸设计,满足更多功能曝光的目的。

百度翻译 APP 在底部标签栏上方延伸了一个功能区,初次进入时呈现隐藏式设计,单击或者上滑展开全部。延伸功能区为用户提供了更多常用功能,便于进行频繁操作,提升用户的操作体验和效率。
利用手势交互实现自动跳转

随着手势交互的不断成熟,被普遍的应用到产品设计中。利用手势的辅助可以缩短用户的操作路径,通过不断优化用户的学习成本,带给用户更加便利的操作体验。

通过指向按钮的引导可以让用户抵达需求目的,需要用户进行点击操作。针对横向滑动的交互输出中,在连贯的滑动操作中配合手势交互,随着滑动力度的不同可以实现自动跳转。比如开言英语 APP 课程模块中,针对推荐的课程卡片在向左滑动过程中,随着滑动的程度提示“查看更多”和“释放查看”,实现详情内容的自动跳转。对于需要查看更多推荐内容的用户来说,
关爱员工 一企前行
关爱员工 一企前行
关爱员工 一企前行
关爱员工 一企前行
关爱员工 一企前行
关爱员工 一企前行
关爱员工 一企前行
自如app - 首页图标(更新版本)1
L丶TataCat
L丶TataCat
5217粉丝 · 2.9w+采集
转采 0 · 喜欢 0