首页 > 网页教程 > 设计分享 > 20个精致漂亮的视频播放器界面设计欣赏及点评

20个精致漂亮的视频播放器界面设计欣赏及点评

时间:2012-04-17    来源:飞鱼的声纳

网页设计中非常细节的东西,比如就一个描边,有时就造成了用户心理感受上的差别,进而影响用户的使用偏好,直至对整个设计的成功与否以及作品的商业价值产生非常大的影响。类似于”千里之堤毁于蚁穴”和”蝴蝶效应”的感觉。夸大其词吗?绝对不!细节的力量我认为在网页设计中有着无穷的魅力。认真想想那些你个人认为优秀的设计作品,其中是什么东西打动了你?真的很多时候就是一种描述不出来的颜色,一些1像素的高光,或者是一种质感。

例如下面的这20个网页视频播放器的界面设计,似乎一眼看上去差别并不大,但是如果让你必须从中选择一个最偏爱的,并且要付费购买的话,我想每个人都能做出自己的选择。然后你再想想为什么选择的是这个而非其他?所以我这里想要说的是,作为网页设计师,或者是UI设计师,我们需要不断的努力,常问自己一个问题”我是否有了掌控视觉设计的细节到比较准确的实现目标设计方案,从而引导用户的心理感受的能力?”我想,这是我们可以从这20个设计中学到的一点东西。

一、锋利的边缘

full-preview-580.jpg

细微的浅灰色渐变、边缘2个像素的内发光、各控制按钮内阴影、1像素的边缘高光的组合是最常见到的设计方案之一,很经典,并且让这个播放器看上去感觉边缘锋利,能划破手指一般。

二、轻快

mimi_player.png

圆角黑色控制条背景调整到半透明,各控制按钮也没添加更多的图层样式,当鼠标离开画面的时候它就消失,看上去简单轻快的感觉。

三、遥控器

player.png

玻璃般光亮的控制条背景,较粗的线条描边,各控制按钮添加了1像素的深色描边。让人联想到耳机上的线控装置。

四、清晰明了

shot_1282217345.png

这是我个人最喜欢的设计风格,所有元素周围都有深色的1像素描边和细微的内发光效果,高光、描边、发光效果都控制在1像素之内,直角设计,并且添加了杂色的材质,让整个控制条看上去不会是光溜溜的感觉,而是清晰明了,硬朗,有质感的心理感受。

五、宽大的背景面板

shot_1296245976.png

宽大的面板让这个设计方案有一种一整块的感觉,好像一个简单的遥控器,玻璃质感,高饱和度的蓝色让重要的控制按钮醒目易见,音量调节界面的设计很有特点。

六、金属的、拉丝的质感

shot_1297712094.png

细看控制条背景有一种金属般的拉丝质感,进度条的滑动按钮也是金属的质感,底部的1像素高光让边缘有了凸出的感觉,播放进度条中间更深层次的1像素的凹陷给设计添加了更丰富的细节。

七、浓郁的黑色

shot_1298331320.png

浓的化不开的黑色是这个设计给人的直观感受,面板顶部凹陷的刻痕给面板厚重、实在的感受。三种设计方案让我们看到了控制按钮不同的组合方式。

八、清爽的味道

shot_1298584822.png

半透明的背景设计给了这个播放器清爽的味道。

九、粗糙的、草草一做的

ui.png

我个人认为这是一个反面的案例,宽于1个像素的描边让设计界面看上去感觉笨拙和不够精致,很像是随随便便做一下的样子。

十、风格不统一

video_components.png

高饱和度和亮度的黄色在深灰色背景下格外的抢眼,但是播放器颜色和背景色的对比度不够让两者有模糊在一起的感觉,另外,看上去类似显示器的亮度、对比度、和颜色的调节图标的玻璃质感和整个设计的质感不够统一。所以Dribbble上的作品也不是完美的无可挑剔,个别设计,比如我这里随便挑到的九和十应该说是做的不够好的设计。

相关推荐
腾讯CDC:泛泛而谈界面中的斑马纹设计
简单而又不单调的网页视觉设计技巧
如何杜绝网页设计中视噪对用户的影响
如何让手绘应用于视觉设计中而增强亲和力和感染力
网页视觉设计如何针对用户有效表达信息
网站页面设计中光的特效设计引导用户视觉焦点
网页PS设计教程:手把手教你制作漂亮的商业模板
网页PS设计教程:手把手教你制作WordPress新闻博客模板
网页设计教程:5个原则助你设计一个成功的购买按钮
案例分析社交型网站首页设计的优秀设计原则
从网站可用性的角度深入分析苹果和微软官网设计的优劣
视觉设计:页面构建的审图与细节
视觉设计之材质绘制的色彩理论
网站设计之10个儿童网站分析及设计特点总结
网页配色经验分享:叠柔配色技巧及图解分析
工具型网站设计及典型案例分析
深入探讨图片格式与网页设计的那点事儿
分享:网页核心内容对视觉表现的影响
响应式网页设计正成为移动互联网大势所趋
20个超棒的photoshop网页设计教程分享
浅谈界面设计中的结构设计
网站营销活动页面制作过程图文分享
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
深入分析网页栅格系统的规范制作
分享:360安全桌面主题设计过程及思路总结
网页设计教程分享—能影响观众的网站首页设计10个要点
网页Banner设计的风格、排版以及配色经验分享
国外精彩网页界面设计案例赏析
中文网页设计排版之破格的好例子
30个国外立体动感的视差滚动效果网站欣赏
网页设计教程:关于网页设计的那些事儿
网页设计中使用不对称设计创建不平衡中的平衡
最新Web设计8个趋势:视差滚动 响应式设计等
淘宝店铺广告文案排版快速设计经验分享

分类导航

教程推荐

热门特效

热门教程