項(xiàng)目簡(jiǎn)介

　　360影視(v.360.cn)改版后，不僅在視覺(jué)上有了一個(gè)全新的體驗(yàn)，在頻道劃分及內(nèi)容整合上，也做出了很大調(diào)整，希望能夠成為一個(gè)具有高水準(zhǔn)用戶(hù)體驗(yàn)及全網(wǎng)資源最全的視頻網(wǎng)站。下面就和大家分享一下在這個(gè)改版過(guò)程中的問(wèn)題及收獲吧。

　　前期準(zhǔn)備

　　在拿到設(shè)計(jì)需求之后，作為一名設(shè)計(jì)師，前期的思考是非常重要的，遠(yuǎn)比后續(xù)的在表現(xiàn)形式上面的思考要重要的多。正確的思路和梳理決定了產(chǎn)品的方向。所以在前期和需求方進(jìn)行深入的溝通顯得尤為重要，在了解了產(chǎn)品的用戶(hù)群體、產(chǎn)品目的、設(shè)計(jì)所要表達(dá)的意義，后續(xù)的商業(yè)推廣之后，我們針對(duì)原型圖進(jìn)行深入的分析和思考，從專(zhuān)業(yè)角度上給出合理的建議。這樣不僅可以最大限度的減少設(shè)計(jì)稿反復(fù)修改的概率，也可以在實(shí)現(xiàn)商業(yè)目標(biāo)的基礎(chǔ)上最大化視覺(jué)的價(jià)值，根據(jù)自己的想法去詮釋設(shè)計(jì)。

　　設(shè)計(jì)理念

　　根據(jù)360影視網(wǎng)站希望突出的四大主要功能，確定了整站的色彩調(diào)性。以藍(lán)色為主，灰色為輔。 藍(lán)色非常純凈，容易讓人聯(lián)想到天空，海洋，宇宙等。藍(lán)色表達(dá)出的是一種廣闊，冷靜，包容及沉穩(wěn)。非常符合360影視新版希望給用戶(hù)營(yíng)造的一種穩(wěn)重，又不失愉悅的感官體驗(yàn)。

　　LOGO設(shè)計(jì)

　　這次全新改版，決定加入圖形化的logo，這樣不僅可以提高網(wǎng)站的用戶(hù)認(rèn)知度和用戶(hù)忠誠(chéng)度，也可以提高品牌自身的凝聚和影響力。我們的品牌定位不僅在于強(qiáng)調(diào)視頻網(wǎng)站最基本的播放功能，更多的應(yīng)該去探究一種現(xiàn)代人的人文關(guān)懷和情感狀態(tài)。藝術(shù)原本就源自于生活，只有在情感上能夠于用戶(hù)達(dá)到更深層次的交流或者互動(dòng)，才能夠算是一個(gè)成功的產(chǎn)品。我們希望傳遞給用戶(hù)的是一種自由愜意的生活狀態(tài)，而不僅僅是一個(gè)工具或者產(chǎn)品。

　　在前期的手稿過(guò)程中，舍棄了所有具象的元素，比如攝像機(jī)，電影屏幕等。因?yàn)檫@些元素過(guò)于寫(xiě)實(shí)，會(huì)讓產(chǎn)品的定位局限于工具性的體現(xiàn)，沒(méi)有更深層次的內(nèi)涵。于最初的產(chǎn)品定位不符。最后我們決定用播放按鈕的三角形作為原型，在此基礎(chǔ)上進(jìn)行進(jìn)一步的延伸可擴(kuò)展。

　　標(biāo)志的整體造型以播放按鈕為原型，通過(guò)圓滑了邊角的三角播放鍵拼接而成。而負(fù)形正好形成了一個(gè)播放按鈕。五彩繽紛的顏色也寓意著360影視內(nèi)容豐富，精彩紛呈。LOGO完整的表達(dá)出360影視自由便捷的選擇以及傳遞給用戶(hù)愉悅輕松的生活狀態(tài)。

　　界面優(yōu)化

　　1，導(dǎo)航條用了視頻播放器常用的黑灰色搭配，利用亮色的單線條以及滑過(guò)的按鈕顏色變化，突出了質(zhì)感的表現(xiàn)。

　　2，用單色線條和色塊來(lái)分割各區(qū)域，并采用大面積的純色作為底色，配合單線條的區(qū)域劃分來(lái)均衡頁(yè)面的重量，使得頁(yè)面更加的透氣和輕盈。在內(nèi)容很豐富圖片信息很大的情況下，平面化的設(shè)計(jì)起到了區(qū)分主次的作用。不會(huì)讓過(guò)多的線條來(lái)妨礙用戶(hù)的視線。

　　設(shè)計(jì)細(xì)節(jié)提升用戶(hù)體驗(yàn)

　　通常，我們做一個(gè)項(xiàng)目，都會(huì)通過(guò)對(duì)每個(gè)設(shè)計(jì)細(xì)節(jié)的反復(fù)推敲來(lái)提高網(wǎng)站的易用性。

　　A.當(dāng)用戶(hù)鼠標(biāo)移動(dòng)到搜索或其它button上面的時(shí)候，button會(huì)變亮，表示這里可點(diǎn)擊，當(dāng)鼠標(biāo)按下去的時(shí)候，button會(huì)變暗，表示點(diǎn)擊下去了，并會(huì)有結(jié)果等著你。每個(gè)這樣的button在網(wǎng)頁(yè)都呈現(xiàn)三個(gè)點(diǎn)擊態(tài);

　　B.當(dāng)用戶(hù)鼠標(biāo)移到所有文字上的時(shí)候，文字會(huì)變紅加下劃線，表示這是一個(gè)鏈接，點(diǎn)擊下去后，會(huì)打開(kāi)新頁(yè)面;

　　C.當(dāng)用戶(hù)鼠標(biāo)移動(dòng)所有海報(bào)圖上的時(shí)候，會(huì)出現(xiàn)一個(gè)播放icon，表示這是一個(gè)能播放的視頻資源，點(diǎn)擊下去后，可以觀看;

　　D.當(dāng)用戶(hù)點(diǎn)擊影片后的“喜歡”按鈕后，后面會(huì)有一個(gè)“+1”的形態(tài)飄過(guò)，給用戶(hù)一種正面的激勵(lì)，表示你這個(gè)操作獲得了一次加分。

　　項(xiàng)目總結(jié)

　　一個(gè)看似簡(jiǎn)單的設(shè)計(jì)原則，應(yīng)用到實(shí)際產(chǎn)品中， 都需要設(shè)計(jì)者用心思考。一個(gè)看似很不起眼的細(xì)節(jié)，都可能帶給用戶(hù)很不一樣的用戶(hù)體驗(yàn)。設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中，不僅需要考慮視覺(jué)的和諧美感和頁(yè)面的整體有序，更應(yīng)該重視如何在此基礎(chǔ)上達(dá)到更加完美的用戶(hù)體驗(yàn)。希望我們的產(chǎn)品可以脫離本身的一種最基本的觀看功能，而是能給用戶(hù)帶來(lái)的一場(chǎng)愉悅自由的視覺(jué)體驗(yàn)。享受到的是一種輕松淡然的生活狀態(tài)。思考用戶(hù)本該怎樣使用這個(gè)產(chǎn)品，用戶(hù)使用的方式不是設(shè)計(jì)者自己創(chuàng)造出來(lái)的，而是用戶(hù)本能的就知道的。以上所舉，只是我們?cè)趯?shí)踐中零星摸索的思考，希望能夠起到拋磚引玉的作用。360影視的設(shè)計(jì)師們還將繼續(xù)對(duì)用戶(hù)心理抱有極大的好奇和探索，讓我們的每個(gè)功能本身具有價(jià)值，對(duì)細(xì)節(jié)保持極大的關(guān)注，讓用戶(hù)的使用體驗(yàn)無(wú)限接近來(lái)自現(xiàn)實(shí)生活的認(rèn)知。

　　360影視官網(wǎng)體驗(yàn)地址：http://v.360.cn

　　文章來(lái)源：360UXC