網(wǎng)頁設(shè)計(jì)中非常細(xì)節(jié)的東西,比如就一個(gè)描邊,有時(shí)就造成了用戶心理感受上的差別,進(jìn)而影響用戶的使用偏好,直至對(duì)整個(gè)設(shè)計(jì)的成功與否以及作品的商業(yè)價(jià)值產(chǎn)生非常大的影響。類似于”千里之堤毀于蟻穴”和”蝴蝶效應(yīng)”的感覺。夸大其詞嗎?絕對(duì)不!細(xì)節(jié)的力量我認(rèn)為在網(wǎng)頁設(shè)計(jì)中有著無窮的魅力。認(rèn)真想想那些你個(gè)人認(rèn)為優(yōu)秀的設(shè)計(jì)作品,其中是什么東西打動(dòng)了你?真的很多時(shí)候就是一種描述不出來的顏色,一些1像素的高光,或者是一種質(zhì)感。例如下面的這20個(gè)網(wǎng)頁視頻播放器的界面設(shè)計(jì),似乎一眼看上去差別并不大,但是如果讓你必須從中選擇一個(gè)最偏愛的,并且要付費(fèi)購(gòu)買的話,我想每個(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í)候它就消失,看上去簡(jiǎn)單輕快的感覺。
三、遙控器
玻璃般光亮的控制條背景,較粗的線條描邊,各控制按鈕添加了1像素的深色描邊。讓人聯(lián)想到耳機(jī)上的線控裝置。
四、清晰明了
這是我個(gè)人最喜歡的設(shè)計(jì)風(fēng)格,所有元素周圍都有深色的1像素描邊和細(xì)微的內(nèi)發(fā)光效果,高光、描邊、發(fā)光效果都控制在1像素之內(nèi),直角設(shè)計(jì),并且添加了雜色的材質(zhì),讓整個(gè)控制條看上去不會(huì)是光溜溜的感覺,而是清晰明了,硬朗,有質(zhì)感的心理感受。
五、寬大的背景面板
寬大的面板讓這個(gè)設(shè)計(jì)方案有一種一整塊的感覺,好像一個(gè)簡(jiǎn)單的遙控器,玻璃質(zhì)感,高飽和度的藍(lán)色讓重要的控制按鈕醒目易見,音量調(diào)節(jié)界面的設(shè)計(jì)很有特點(diǎn)。
六、金屬的、拉絲的質(zhì)感
細(xì)看控制條背景有一種金屬般的拉絲質(zhì)感,進(jìn)度條的滑動(dòng)按鈕也是金屬的質(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)一
高飽和度和亮度的黃色在深灰色背景下格外的搶眼,但是播放器顏色和背景色的對(duì)比度不夠讓兩者有模糊在一起的感覺,另外,看上去類似顯示器的亮度、對(duì)比度、和顏色的調(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í)尚
大幅的畫面,畫面的斜紋,碩大的半透明背景的播放按鈕,簡(jiǎn)單的播放條和控制按鈕的設(shè)計(jì),沒有過多的圖層樣式,讓這個(gè)設(shè)計(jì)多了一些時(shí)尚的感受。
十三、豐富的細(xì)節(jié)
簡(jiǎn)單的要會(huì)做,酷的炫的更要會(huì)做,注意觀察透亮的播放按鈕的細(xì)節(jié),考慮一個(gè)問題”高光為什么要放在這里?這樣做給了這個(gè)按鈕怎樣的質(zhì)感感受?”然后把它臨摹一遍,牢牢地記在腦子里,以后你就會(huì)做按鈕了,就這么簡(jiǎn)單!再深入一個(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è)開頭的話,還是很不錯(cuò)的,播放器界面透明的質(zhì)感和控制按鈕的玻璃質(zhì)感非常的統(tǒng)一,很漂亮。從這個(gè)案例也能感受到透明的風(fēng)格總是比純色的設(shè)計(jì)更清爽那么一點(diǎn)點(diǎn)。
十七、毛玻璃
高亮的邊緣和控制按鈕柔和的白色高光給了這個(gè)設(shè)計(jì)那么一點(diǎn)毛玻璃的質(zhì)感,很特別。
十八、更高的透明度
相較于前面幾個(gè)半透明的播放器背景來說,這個(gè)設(shè)計(jì)的透明度要更高,所以會(huì)有更加清爽、透亮的感覺。
十九、一個(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í)的地方。
本文地址:http://m.likemindfilms.com/news/zczx1138.html
您可能還喜歡
- 多迪杯,轟動(dòng)全國(guó)各大高校的網(wǎng)站設(shè)計(jì)開
- 世界上最酷的高清圖庫站W(wǎng)ALLBASE悄然關(guān)
- 搜狗識(shí)圖的十大用法,你知道幾個(gè)?
- “末日”過成節(jié)日 炒“末日論”就是為
- 最好的照片磨皮軟件 ArcSoft Portrait
- [小眾網(wǎng)站] Tartan Designer - 在線生
- 央視在官方Twitter和Facebook賬戶上率
- 眾多知名網(wǎng)站早期網(wǎng)頁設(shè)計(jì)回顧
- Photoshop CC推出 Adobe將停止更新CS版
- 解讀精美網(wǎng)頁設(shè)計(jì)-美國(guó)婚禮策劃Lover.
- 深圳35周年·國(guó)際海報(bào)創(chuàng)意設(shè)計(jì)展
- 多迪杯,轟動(dòng)全國(guó)各大高校的網(wǎng)站設(shè)
- 藥系千萬家-2015第一屆合理用藥科
- 100個(gè)公眾號(hào)的美食題目,不會(huì)寫題
- [小眾網(wǎng)站] Flat Surface Shader
- [小眾網(wǎng)站]visualhunt - 可以按顏
- 阿里釘釘—用戶體驗(yàn)產(chǎn)品分析
- [小眾網(wǎng)站]webgradients - 漸變背
- 世界上最酷的高清圖庫站W(wǎng)ALLBASE
- 一夜圈粉40萬,抖音小姐姐「王藍(lán)莓