网页设计参考:WEBJX收集网页视频播放器的界面设计案例(2)

http://www.itjxue.com  2015-08-07 20:47  来源:未知  点击次数: 

十一、大小不统一

video_player.jpg

看来,包括这个设计在内都是不够好的案例,可以仔细观察这个设计,相较于狭窄的播放器来说,进度条有些过于宽了。控制按钮图标的大小也不够统一,除了心形图标,播放、高清、音量图标都稍微有点小,这些都是看上去不够用心的地方。

十二、时尚

580th_videoplayer.jpg

大幅的画面,画面的斜纹,硕大的半透明背景的播放按钮,简单的播放条和控制按钮的设计,没有过多的图层样式,让这个设计多了一些时尚的感受。

十三、丰富的细节

580th_Big (2).jpg

简单的要会做,酷的炫的更要会做,注意观察透亮的播放按钮的细节,考虑一个问题”高光为什么要放在这里?这样做给了这个按钮怎样的质感感受?”然后把它临摹一遍,牢牢地记在脑子里,以后你就会做按钮了,就这么简单!再深入一个层次,同样的按钮,还能做出怎么样的质感来?我做了另外一个样式放在下面,看看这两个有什么质感上的差别?再想想还能不能做出其他的样式?

play-button.jpg

十四、中规中矩

yt-player-small-shot.png

这个设计中规中矩,时常见到的设计方案。

十五、杂色的质感

12.jpg

从技术上来和第一个设计方案差别不大,但是这个播放器的背景添加一定数量的杂色,让表面从光滑变为粗糙的质感。

十六、还是透明

ui_elements_-_video_player_01_-_dribbble.png

这像是一个没做完的设计,很多设计元素,例如播放时间等都没有添加上,但是,如果说这只是一个开头的话,还是很不错的,播放器界面透明的质感和控制按钮的玻璃质感非常的统一,很漂亮。从这个案例也能感受到透明的风格总是比纯色的设计更清爽那么一点点。

十七、毛玻璃

shot_1287127522.png

高亮的边缘和控制按钮柔和的白色高光给了这个设计那么一点毛玻璃的质感,很特别。

十八、更高的透明度

screen_shot_2011-09-16_at_10.07.24_pm.png

相较于前面几个半透明的播放器背景来说,这个设计的透明度要更高,所以会有更加清爽、透亮的感觉。

十九、一个整体

audio-player-400x300.png

这个设计有着值得借鉴的创意,那就是整个播放器控制按钮融合在一起,拉近了鼠标点击的距离,并且有着更加浑然天成的感觉。

二十、发光

shot_1298950008.png

鼠标悬停的效果不只是高亮,还可以让元素的四周扩散出一点点光晕出来,好像是灯被点亮的感觉,这也是细节上值得学习的地方。

(责任编辑:IT教学网)

更多