網頁設計參考:WEBJX收集網頁視頻播放器的介面設計案例

來源:互聯網
上載者:User

文章描述:20個視頻播放器介面欣賞及點評。

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

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

一、鋒利的邊緣

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

二、輕快

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

三、遙控器

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

四、清晰明了

這是我個人最喜歡的設計風格,所有元素周圍都有深色的1像素描邊和細微的內光暈效果,高光、描邊、光暈效果都控制在1像素之內,直角設計,並且添加了雜色的材質,讓整個控制條看上去不會是光溜溜的感覺,而是清晰明了,硬朗,有質感的心理感受。

五、寬大的背景面板

寬大的面板讓這個設計方案有一種一整塊的感覺,好像一個簡單的遙控器,玻璃質感,高飽和度的藍色讓重要的控制按鈕醒目易見,音量大小介面的設計很有特點。

六、金屬的、拉絲的質感

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

七、濃鬱的黑色

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

八、清爽的味道

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

九、粗糙的、草草一做的

我個人認為這是一個反面的案例,寬於1個像素的描邊讓設計介面看上去感覺笨拙和不夠精緻,很像是隨隨便便做一下的樣子。

十、風格不統一

高飽和度和亮度的黃色在深灰色背景下格外的搶眼,但是播放器顏色和背景色的對比不夠讓兩者有模糊在一起的感覺,另外,看上去類似顯示器的亮度、對比、和顏色的調節表徵圖的玻璃質感和整個設計的質感不夠統一。所以Dribbble上的作品也不是完美的無可挑剔,個別設計,比如我這裡隨便挑到的九和十應該說是做的不夠好的設計。

[1] [2]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。