20個(gè)視頻播放器界面欣賞及點(diǎn)評

網(wǎng)頁設(shè)計(jì)中非常細(xì)節(jié)的東西，比如就一個(gè)描邊，有時(shí)就造成了用戶心理感受上的差別，進(jìn)而影響用戶的使用偏好，直至對整個(gè)設(shè)計(jì)的成功與否以及作品的商業(yè)價(jià)值產(chǎn)生非常大的影響。類似于”千里之堤毀于蟻穴”和”蝴蝶效應(yīng)”的感覺?？浯笃湓~嗎？絕對不！細(xì)節(jié)的力量我認(rèn)為在網(wǎng)頁設(shè)計(jì)中有著無窮的魅力。認(rèn)真想想那些你個(gè)人認(rèn)為優(yōu)秀的設(shè)計(jì)作品，其中是什么東西打動了你？真的很多時(shí)候就是一種描述不出來的顏色，一些1像素的高光，或者是一種質(zhì)感。例如下面的這20個(gè)網(wǎng)頁視頻播放器的界面設(shè)計(jì)，似乎一眼看上去差別并不大，但是如果讓你必須從中選擇一個(gè)最偏愛的，并且要付費(fèi)購買的話，我想每個(gè)人都能做出自己的選擇。然后你再想想為什么選擇的是這個(gè)而非其他？所以我這里想要說的是，作為網(wǎng)頁設(shè)計(jì)師，或者是UI設(shè)計(jì)師，我們需要不斷的努力，常問自己一個(gè)問題”我是否有了掌控視覺設(shè)計(jì)的細(xì)節(jié)到比較準(zhǔn)確的實(shí)現(xiàn)目標(biāo)設(shè)計(jì)方案，從而引導(dǎo)用戶的心理感受的能力？”我想，這是我們可以從這20個(gè)設(shè)計(jì)中學(xué)到的一點(diǎn)東西。

一、鋒利的邊緣

細(xì)微的淺灰色漸變、邊緣2個(gè)像素的內(nèi)發(fā)光、各控制按鈕內(nèi)陰影、1像素的邊緣高光的組合是最常見到的設(shè)計(jì)方案之一，很經(jīng)典，并且讓這個(gè)播放器看上去感覺邊緣鋒利，能劃破手指一般。

二、輕快

圓角黑色控制條背景調(diào)整到半透明，各控制按鈕也沒添加更多的圖層樣式，當(dāng)鼠標(biāo)離開畫面的時(shí)候它就消失，看上去簡單輕快的感覺。

三、遙控器

玻璃般光亮的控制條背景，較粗的線條描邊，各控制按鈕添加了1像素的深色描邊。讓人聯(lián)想到耳機(jī)上的線控裝置。

四、清晰明了

這是我個(gè)人最喜歡的設(shè)計(jì)風(fēng)格，所有元素周圍都有深色的1像素描邊和細(xì)微的內(nèi)發(fā)光效果，高光、描邊、發(fā)光效果都控制在1像素之內(nèi)，直角設(shè)計(jì)，并且添加了雜色的材質(zhì)，讓整個(gè)控制條看上去不會是光溜溜的感覺，而是清晰明了，硬朗，有質(zhì)感的心理感受。

五、寬大的背景面板

寬大的面板讓這個(gè)設(shè)計(jì)方案有一種一整塊的感覺，好像一個(gè)簡單的遙控器，玻璃質(zhì)感，高飽和度的藍(lán)色讓重要的控制按鈕醒目易見，音量調(diào)節(jié)界面的設(shè)計(jì)很有特點(diǎn)。

六、金屬的、拉絲的質(zhì)感

細(xì)看控制條背景有一種金屬般的拉絲質(zhì)感，進(jìn)度條的滑動按鈕也是金屬的質(zhì)感，底部的1像素高光讓邊緣有了凸出的感覺，播放進(jìn)度條中間更深層次的1像素的凹陷給設(shè)計(jì)添加了更豐富的細(xì)節(jié)。

七、濃郁的黑色

濃的化不開的黑色是這個(gè)設(shè)計(jì)給人的直觀感受，面板頂部凹陷的刻痕給面板厚重、實(shí)在的感受。三種設(shè)計(jì)方案讓我們看到了控制按鈕不同的組合方式。

八、清爽的味道

半透明的背景設(shè)計(jì)給了這個(gè)播放器清爽的味道。

九、粗糙的、草草一做的

我個(gè)人認(rèn)為這是一個(gè)反面的案例，寬于1個(gè)像素的描邊讓設(shè)計(jì)界面看上去感覺笨拙和不夠精致，很像是隨隨便便做一下的樣子。

十、風(fēng)格不統(tǒng)一

高飽和度和亮度的黃色在深灰色背景下格外的搶眼，但是播放器顏色和背景色的對比度不夠讓兩者有模糊在一起的感覺，另外，看上去類似顯示器的亮度、對比度、和顏色的調(diào)節(jié)圖標(biāo)的玻璃質(zhì)感和整個(gè)設(shè)計(jì)的質(zhì)感不夠統(tǒng)一。所以Dribbble上的作品也不是完美的無可挑剔，個(gè)別設(shè)計(jì)，比如我這里隨便挑到的九和十應(yīng)該說是做的不夠好的設(shè)計(jì)。

十一、大小不統(tǒng)一

看來，包括這個(gè)設(shè)計(jì)在內(nèi)都是不夠好的案例，可以仔細(xì)觀察這個(gè)設(shè)計(jì)，相較于狹窄的播放器來說，進(jìn)度條有些過于寬了。控制按鈕圖標(biāo)的大小也不夠統(tǒng)一，除了心形圖標(biāo)，播放、高清、音量圖標(biāo)都稍微有點(diǎn)小，這些都是看上去不夠用心的地方。

十二、時(shí)尚

大幅的畫面，畫面的斜紋，碩大的半透明背景的播放按鈕，簡單的播放條和控制按鈕的設(shè)計(jì)，沒有過多的圖層樣式，讓這個(gè)設(shè)計(jì)多了一些時(shí)尚的感受。

十三、豐富的細(xì)節(jié)

簡單的要會做，酷的炫的更要會做，注意觀察透亮的播放按鈕的細(xì)節(jié)，考慮一個(gè)問題”高光為什么要放在這里？這樣做給了這個(gè)按鈕怎樣的質(zhì)感感受？”然后把它臨摹一遍，牢牢地記在腦子里，以后你就會做按鈕了，就這么簡單！再深入一個(gè)層次，同樣的按鈕，還能做出怎么樣的質(zhì)感來？我做了另外一個(gè)樣式放在下面，看看這兩個(gè)有什么質(zhì)感上的差別？再想想還能不能做出其他的樣式？

十四、中規(guī)中矩

這個(gè)設(shè)計(jì)中規(guī)中矩，時(shí)常見到的設(shè)計(jì)方案。

十五、雜色的質(zhì)感

從技術(shù)上來和第一個(gè)設(shè)計(jì)方案差別不大，但是這個(gè)播放器的背景添加一定數(shù)量的雜色，讓表面從光滑變?yōu)榇植诘馁|(zhì)感。

十六、還是透明

這像是一個(gè)沒做完的設(shè)計(jì)，很多設(shè)計(jì)元素，例如播放時(shí)間等都沒有添加上，但是，如果說這只是一個(gè)開頭的話，還是很不錯的，播放器界面透明的質(zhì)感和控制按鈕的玻璃質(zhì)感非常的統(tǒng)一，很漂亮。從這個(gè)案例也能感受到透明的風(fēng)格總是比純色的設(shè)計(jì)更清爽那么一點(diǎn)點(diǎn)。

十七、毛玻璃

高亮的邊緣和控制按鈕柔和的白色高光給了這個(gè)設(shè)計(jì)那么一點(diǎn)毛玻璃的質(zhì)感，很特別。

十八、更高的透明度

相較于前面幾個(gè)半透明的播放器背景來說，這個(gè)設(shè)計(jì)的透明度要更高，所以會有更加清爽、透亮的感覺。

十九、一個(gè)整體

這個(gè)設(shè)計(jì)有著值得借鑒的創(chuàng)意，那就是整個(gè)播放器控制按鈕融合在一起，拉近了鼠標(biāo)點(diǎn)擊的距離，并且有著更加渾然天成的感覺。

二十、發(fā)光

鼠標(biāo)懸停的效果不只是高亮，還可以讓元素的四周擴(kuò)散出一點(diǎn)點(diǎn)光暈出來，好像是燈被點(diǎn)亮的感覺，這也是細(xì)節(jié)上值得學(xué)習(xí)的地方。