項(xiàng)目背景

 

時(shí)光游園會(huì)是QQ閱讀上半年的大型重點(diǎn)項(xiàng)目，以推廣基礎(chǔ)功能和提升社區(qū)滲透為目的。設(shè)計(jì)組需完成神算子卦攤、夫子學(xué)堂、寒江獨(dú)釣、歌詠會(huì)、百閱酒肆、百寶鋪六大模塊的設(shè)計(jì)工作。

 

運(yùn)營設(shè)計(jì)組首次在大型活動(dòng)中挑戰(zhàn)水墨風(fēng)格。在時(shí)間緊迫的情況下投入交互設(shè)計(jì)2名，視覺設(shè)計(jì)5名，前端開發(fā)3名。輸出了規(guī)范1份，活動(dòng)頁22個(gè)，動(dòng)效3套，廣告圖20個(gè)，勛章掛件等元素圖26個(gè)。

 

項(xiàng)目設(shè)計(jì)中主要遇到了以下問題：

本篇文章會(huì)針對(duì)這些問題一一闡述解決方案

 

【首次嘗試水墨風(fēng)，如何實(shí)現(xiàn)】

 

本次項(xiàng)目的定位非常適合水墨風(fēng)。關(guān)于水墨風(fēng)的設(shè)計(jì)主要考慮了三個(gè)方面：

1. 表現(xiàn)手法

不只是我，相信在很多人的印象中，水墨感的設(shè)計(jì)大約都是上圖中水墨筆觸做為裝飾或背景，用來塑造氛圍。而在此項(xiàng)目中需要用水墨風(fēng)格表現(xiàn)熱鬧的場(chǎng)景，其中的建筑和小場(chǎng)景要跳出整幅畫面，提醒用戶可點(diǎn)。以上水墨的用法恐怕無法實(shí)現(xiàn)。

我們的解決方法：可點(diǎn)擊元素采用水墨感的線條搭配現(xiàn)代感的細(xì)節(jié)設(shè)計(jì)，得到有細(xì)節(jié)的水墨元素。如下圖

2. 字體

頁面設(shè)計(jì)中選擇了兩種字形和運(yùn)筆都比較相似的字體來搭配：模塊標(biāo)題字體——華康龍門石碑，正文字體——華康古籍木蘭。這兩種字體具有足夠的古風(fēng)氣質(zhì)，雅俗共賞。

夫子學(xué)堂和百閱酒肆模塊的標(biāo)題字

正文字體在頁面中的使用效果

 

3.色彩搭配

色彩優(yōu)先選用了低飽和度的傳統(tǒng)色，淺色和墨色為主，紅色做為點(diǎn)綴。

通過以上表現(xiàn)手法，字體選擇和色彩搭配三方面，成功塑造了熱鬧小鎮(zhèn)的氛圍，實(shí)現(xiàn)出不一樣的水墨風(fēng)。

 

【模塊多頁面長(zhǎng)，如何均衡點(diǎn)擊率】

 

在地圖頁面共有6個(gè)模塊，不能保證每個(gè)模塊都能在首屏露出，但我們希望模塊的點(diǎn)擊率不隨位置向下而降低。針對(duì)這一點(diǎn)我們做了兩件事：

1. 利用動(dòng)畫對(duì)頁面自下而上做一個(gè)完整預(yù)覽，讓用戶知道除了首屏，下面還有更多內(nèi)容；

2. 此外，每個(gè)模塊添加小腳印動(dòng)效，提示用戶此模塊中的任務(wù)還未完成。

最終從數(shù)據(jù)上看，各模塊活動(dòng)的參與率比較均衡，達(dá)到預(yù)期。

 

【多人合作，視覺如何統(tǒng)一 】

 

舊流程

主視覺確定風(fēng)格并制定設(shè)計(jì)規(guī)范，其他設(shè)計(jì)師獨(dú)立負(fù)責(zé)1個(gè)或多個(gè)模塊。這樣的方式在實(shí)踐中也暴露了缺點(diǎn)：

1.風(fēng)格無法統(tǒng)一

各模塊由不同設(shè)計(jì)師獨(dú)立設(shè)計(jì)，同時(shí)進(jìn)行，對(duì)于需要手繪的元素風(fēng)格差異明顯。

2.時(shí)間不好把控

每個(gè)設(shè)計(jì)師手繪所需的時(shí)間不一樣，不利于整個(gè)項(xiàng)目的整體規(guī)劃。

 

為了解決舊合作模式暴露出來的問題，在本次項(xiàng)目中嘗試了新的合作模式。

新流程

新流程其實(shí)是對(duì)整個(gè)項(xiàng)目的整合再分工，問題明顯改善：

1.風(fēng)格高度統(tǒng)一

一位設(shè)計(jì)師負(fù)責(zé)所有頁面中需要手繪的元素；其他設(shè)計(jì)師搭建剩余頁面；本次項(xiàng)目中需要?jiǎng)有В袆?dòng)效也是由專門一位設(shè)計(jì)師完成。這樣就很好的統(tǒng)一了視覺，再多設(shè)計(jì)師合作也沒問題。

2.更精準(zhǔn)地把控時(shí)間節(jié)點(diǎn)

有了規(guī)范和手繪元素，其他設(shè)計(jì)師搭建頁面的時(shí)間就能容易預(yù)估，從項(xiàng)目角度看，就能更精準(zhǔn)地把控時(shí)間節(jié)點(diǎn)。

 

【效果展示】

思考總結(jié)：

 

1. 本次項(xiàng)目中探究了如何用ps筆刷模擬水墨筆觸；探討了地圖頁適合用什么樣的透視角度；細(xì)節(jié)元素如何去繪制等。勇于嘗試，不能讓常見的設(shè)計(jì)方式限制了我們的思維。

2. 同一活動(dòng)多人跨流程合作，最好是提前選定主視覺、主交互、主前端，保證各個(gè)環(huán)節(jié)均有人清楚全部活動(dòng)內(nèi)容，合理分配人力和制定規(guī)則，提升效率。本次新合作方式很實(shí)用，相信以后針對(duì)不同活動(dòng)會(huì)有更優(yōu)方案。

最后感謝所有在項(xiàng)目中辛勤工作，精誠協(xié)作的產(chǎn)品、設(shè)計(jì)、前端、開發(fā)和測(cè)試的同學(xué)們。