轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(  www.lzhte.cn )是一家專注而深入的設(shè)計機構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、  cs界面設(shè)計 、  ipad界面設(shè)計  、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、  網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://startwmlife.com/20-video-player-interface-to-appreciate-and-comment/

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，          請點這里  

 

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

一、鋒利的邊緣

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

二、輕快

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

三、遙控器

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

四、清晰明了

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

五、寬大的背景面板

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

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

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

七、濃郁的黑色

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

八、清爽的味道

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

九、粗糙的、草草一做的

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

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

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

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

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

十二、時尚

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

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

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

十四、中規(guī)中矩

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

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

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

十六、還是透明

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

十七、毛玻璃

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

十八、更高的透明度

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

十九、一個整體

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

二十、發(fā)光

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