您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 瀏覽設(shè)計(jì)教程

360影視網(wǎng)頁改版項(xiàng)目總結(jié)

 

項(xiàng)目簡介

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

前期準(zhǔn)備

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

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

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

LOGO設(shè)計(jì)


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

在前期的手稿過程中,舍棄了所有具象的元素,比如攝像機(jī),電影屏幕等。因?yàn)檫@些元素過于寫實(shí),會讓產(chǎn)品的定位局限于工具性的體現(xiàn),沒有更深層次的內(nèi)涵。于最初的產(chǎn)品定位不符。最后我們決定用播放按鈕的三角形作為原型,在此基礎(chǔ)上進(jìn)行進(jìn)一步的延伸可擴(kuò)展。
標(biāo)志的整體造型以播放按鈕為原型,通過圓滑了邊角的三角播放鍵拼接而成。而負(fù)形正好形成了一個播放按鈕。五彩繽紛的顏色也寓意著360影視內(nèi)容豐富,精彩紛呈。LOGO完整的表達(dá)出360影視自由便捷的選擇以及傳遞給用戶愉悅輕松的生活狀態(tài)。

界面優(yōu)化

1,導(dǎo)航條用了視頻播放器常用的黑灰色搭配,利用亮色的單線條以及滑過的按鈕顏色變化,突出了質(zhì)感的表現(xiàn)。
2,用單色線條和色塊來分割各區(qū)域,并采用大面積的純色作為底色,配合單線條的區(qū)域劃分來均衡頁面的重量,使得頁面更加的透氣和輕盈。在內(nèi)容很豐富圖片信息很大的情況下,平面化的設(shè)計(jì)起到了區(qū)分主次的作用。不會讓過多的線條來妨礙用戶的視線。

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

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

A.當(dāng)用戶鼠標(biāo)移動到搜索或其它button上面的時候,button會變亮,表示這里可點(diǎn)擊,當(dāng)鼠標(biāo)按下去的時候,button會變暗,表示點(diǎn)擊下去了,并會有結(jié)果等著你。每個這樣的button在網(wǎng)頁都呈現(xiàn)三個點(diǎn)擊態(tài);
B.當(dāng)用戶鼠標(biāo)移到所有文字上的時候,文字會變紅加下劃線,表示這是一個鏈接,點(diǎn)擊下去后,會打開新頁面;
C.當(dāng)用戶鼠標(biāo)移動所有海報(bào)圖上的時候,會出現(xiàn)一個播放icon,表示這是一個能播放的視頻資源,點(diǎn)擊下去后,可以觀看;
D.當(dāng)用戶點(diǎn)擊影片后的“喜歡”按鈕后,后面會有一個“+1”的形態(tài)飄過,給用戶一種正面的激勵,表示你這個操作獲得了一次加分。

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

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

最后附上360影視官網(wǎng)體驗(yàn)地址(http://v.#)

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/tutorial1212.html
網(wǎng)頁設(shè)計(jì)的8個趨勢
關(guān)于專題網(wǎng)頁設(shè)計(jì),你怎么看?
圖趣網(wǎng)微信
建議反饋
×