2012-4-18 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://startwmlife.com/20-video-player-interface-to-appreciate-and-comment/
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
網(wǎng)頁(yè)設(shè)計(jì)中非常細(xì)節(jié)的東西，比如就一個(gè)描邊，有時(shí)就造成了用戶心理感受上的差別，進(jìn)而影響用戶的使用偏好，直至對(duì)整個(gè)設(shè)計(jì)的成功與否以及作品的商業(yè)價(jià)值產(chǎn)生非常大的影響。類似于”千里之堤毀于蟻穴”和”蝴蝶效應(yīng)”的感覺(jué)?？浯笃湓~嗎？絕對(duì)不！細(xì)節(jié)的力量我認(rèn)為在網(wǎng)頁(yè)設(shè)計(jì)中有著無(wú)窮的魅力。認(rèn)真想想那些你個(gè)人認(rèn)為優(yōu)秀的設(shè)計(jì)作品，其中是什么東西打動(dòng)了你？真的很多時(shí)候就是一種描述不出來(lái)的顏色，一些1像素的高光，或者是一種質(zhì)感。例如下面的這20個(gè)網(wǎng)頁(yè)視頻播放器的界面設(shè)計(jì)，似乎一眼看上去差別并不大，但是如果讓你必須從中選擇一個(gè)最偏愛(ài)的，并且要付費(fèi)購(gòu)買的話，我想每個(gè)人都能做出自己的選擇。然后你再想想為什么選擇的是這個(gè)而非其他？所以我這里想要說(shuō)的是，作為網(wǎng)頁(yè)設(shè)計(jì)師，或者是UI設(shè)計(jì)師，我們需要不斷的努力，常問(wèn)自己一個(gè)問(wèn)題”我是否有了掌控視覺(jué)設(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像素的邊緣高光的組合是最常見(jiàn)到的設(shè)計(jì)方案之一，很經(jīng)典，并且讓這個(gè)播放器看上去感覺(jué)邊緣鋒利，能劃破手指一般。
二、輕快
圓角黑色控制條背景調(diào)整到半透明，各控制按鈕也沒(méi)添加更多的圖層樣式，當(dāng)鼠標(biāo)離開(kāi)畫面的時(shí)候它就消失，看上去簡(jiǎn)單輕快的感覺(jué)。
三、遙控器
玻璃般光亮的控制條背景，較粗的線條描邊，各控制按鈕添加了1像素的深色描邊。讓人聯(lián)想到耳機(jī)上的線控裝置。
四、清晰明了
這是我個(gè)人最喜歡的設(shè)計(jì)風(fēng)格，所有元素周圍都有深色的1像素描邊和細(xì)微的內(nèi)發(fā)光效果，高光、描邊、發(fā)光效果都控制在1像素之內(nèi)，直角設(shè)計(jì)，并且添加了雜色的材質(zhì)，讓整個(gè)控制條看上去不會(huì)是光溜溜的感覺(jué)，而是清晰明了，硬朗，有質(zhì)感的心理感受。
五、寬大的背景面板
寬大的面板讓這個(gè)設(shè)計(jì)方案有一種一整塊的感覺(jué)，好像一個(gè)簡(jiǎn)單的遙控器，玻璃質(zhì)感，高飽和度的藍(lán)色讓重要的控制按鈕醒目易見(jiàn)，音量調(diào)節(jié)界面的設(shè)計(jì)很有特點(diǎn)。
六、金屬的、拉絲的質(zhì)感
細(xì)看控制條背景有一種金屬般的拉絲質(zhì)感，進(jìn)度條的滑動(dòng)按鈕也是金屬的質(zhì)感，底部的1像素高光讓邊緣有了凸出的感覺(jué)，播放進(jìn)度條中間更深層次的1像素的凹陷給設(shè)計(jì)添加了更豐富的細(xì)節(jié)。
七、濃郁的黑色
濃的化不開(kāi)的黑色是這個(gè)設(shè)計(jì)給人的直觀感受，面板頂部凹陷的刻痕給面板厚重、實(shí)在的感受。三種設(shè)計(jì)方案讓我們看到了控制按鈕不同的組合方式。
八、清爽的味道
半透明的背景設(shè)計(jì)給了這個(gè)播放器清爽的味道。
九、粗糙的、草草一做的
我個(gè)人認(rèn)為這是一個(gè)反面的案例，寬于1個(gè)像素的描邊讓設(shè)計(jì)界面看上去感覺(jué)笨拙和不夠精致，很像是隨隨便便做一下的樣子。
十、風(fēng)格不統(tǒng)一
高飽和度和亮度的黃色在深灰色背景下格外的搶眼，但是播放器顏色和背景色的對(duì)比度不夠讓兩者有模糊在一起的感覺(jué)，另外，看上去類似顯示器的亮度、對(duì)比度、和顏色的調(diào)節(jié)圖標(biāo)的玻璃質(zhì)感和整個(gè)設(shè)計(jì)的質(zhì)感不夠統(tǒng)一。所以Dribbble上的作品也不是完美的無(wú)可挑剔，個(gè)別設(shè)計(jì)，比如我這里隨便挑到的九和十應(yīng)該說(shuō)是做的不夠好的設(shè)計(jì)。
十一、大小不統(tǒng)一
看來(lái)，包括這個(gè)設(shè)計(jì)在內(nèi)都是不夠好的案例，可以仔細(xì)觀察這個(gè)設(shè)計(jì)，相較于狹窄的播放器來(lái)說(shuō)，進(jìn)度條有些過(guò)于寬了?？刂瓢粹o圖標(biāo)的大小也不夠統(tǒng)一，除了心形圖標(biāo)，播放、高清、音量圖標(biāo)都稍微有點(diǎn)小，這些都是看上去不夠用心的地方。
十二、時(shí)尚
大幅的畫面，畫面的斜紋，碩大的半透明背景的播放按鈕，簡(jiǎn)單的播放條和控制按鈕的設(shè)計(jì)，沒(méi)有過(guò)多的圖層樣式，讓這個(gè)設(shè)計(jì)多了一些時(shí)尚的感受。
十三、豐富的細(xì)節(jié)
簡(jiǎn)單的要會(huì)做，酷的炫的更要會(huì)做，注意觀察透亮的播放按鈕的細(xì)節(jié)，考慮一個(gè)問(wèn)題”高光為什么要放在這里？這樣做給了這個(gè)按鈕怎樣的質(zhì)感感受？”然后把它臨摹一遍，牢牢地記在腦子里，以后你就會(huì)做按鈕了，就這么簡(jiǎn)單！再深入一個(gè)層次，同樣的按鈕，還能做出怎么樣的質(zhì)感來(lái)？我做了另外一個(gè)樣式放在下面，看看這兩個(gè)有什么質(zhì)感上的差別？再想想還能不能做出其他的樣式？
十四、中規(guī)中矩
這個(gè)設(shè)計(jì)中規(guī)中矩，時(shí)常見(jiàn)到的設(shè)計(jì)方案。
十五、雜色的質(zhì)感
從技術(shù)上來(lái)和第一個(gè)設(shè)計(jì)方案差別不大，但是這個(gè)播放器的背景添加一定數(shù)量的雜色，讓表面從光滑變?yōu)榇植诘馁|(zhì)感。
十六、還是透明
這像是一個(gè)沒(méi)做完的設(shè)計(jì)，很多設(shè)計(jì)元素，例如播放時(shí)間等都沒(méi)有添加上，但是，如果說(shuō)這只是一個(gè)開(kāi)頭的話，還是很不錯(cuò)的，播放器界面透明的質(zhì)感和控制按鈕的玻璃質(zhì)感非常的統(tǒng)一，很漂亮。從這個(gè)案例也能感受到透明的風(fēng)格總是比純色的設(shè)計(jì)更清爽那么一點(diǎn)點(diǎn)。
十七、毛玻璃
高亮的邊緣和控制按鈕柔和的白色高光給了這個(gè)設(shè)計(jì)那么一點(diǎn)毛玻璃的質(zhì)感，很特別。
十八、更高的透明度
相較于前面幾個(gè)半透明的播放器背景來(lái)說(shuō)，這個(gè)設(shè)計(jì)的透明度要更高，所以會(huì)有更加清爽、透亮的感覺(jué)。
十九、一個(gè)整體
這個(gè)設(shè)計(jì)有著值得借鑒的創(chuàng)意，那就是整個(gè)播放器控制按鈕融合在一起，拉近了鼠標(biāo)點(diǎn)擊的距離，并且有著更加渾然天成的感覺(jué)。
二十、發(fā)光
鼠標(biāo)懸停的效果不只是高亮，還可以讓元素的四周擴(kuò)散出一點(diǎn)點(diǎn)光暈出來(lái)，好像是燈被點(diǎn)亮的感覺(jué)，這也是細(xì)節(jié)上值得學(xué)習(xí)的地方。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com