首頁 > 網頁教程 > 設計分享 > 20個精致漂亮的視頻播放器界面設計欣賞及點評

江苏十一选五体育彩票:20個精致漂亮的視頻播放器界面設計欣賞及點評

時間:2012-04-17    來源:飛魚的聲納

江苏十一选五开奖公告 www.ervgn.com 網頁設計中非常細節的東西,比如就一個描邊,有時就造成了用戶心理感受上的差別,進而影響用戶的使用偏好,直至對整個設計的成功與否以及作品的商業價值產生非常大的影響。類似于”千里之堤毀于蟻穴”和”蝴蝶效應”的感覺??浯篤浯事??絕對不!細節的力量我認為在網頁設計中有著無窮的魅力。認真想想那些你個人認為優秀的設計作品,其中是什么東西打動了你?真的很多時候就是一種描述不出來的顏色,一些1像素的高光,或者是一種質感。

例如下面的這20個網頁視頻播放器的界面設計,似乎一眼看上去差別并不大,但是如果讓你必須從中選擇一個最偏愛的,并且要付費購買的話,我想每個人都能做出自己的選擇。然后你再想想為什么選擇的是這個而非其他?所以我這里想要說的是,作為網頁設計師,或者是UI設計師,我們需要不斷的努力,常問自己一個問題”我是否有了掌控視覺設計的細節到比較準確的實現目標設計方案,從而引導用戶的心理感受的能力?”我想,這是我們可以從這20個設計中學到的一點東西。

一、鋒利的邊緣

full-preview-580.jpg

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

二、輕快

mimi_player.png

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

三、??仄?/strong>

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個趨勢:視差滾動 響應式設計等
淘寶店鋪廣告文案排版快速設計經驗分享

精彩推薦

熱門教程