項目背景
時光游園會是QQ閱讀上半年的大型重點項目，以推廣基礎(chǔ)功能和提升社區(qū)滲透為目的。設(shè)計組需完成神算子卦攤、夫子學(xué)堂、寒江獨釣、歌詠會、百閱酒肆、百寶鋪六大模塊的設(shè)計工作。
運營設(shè)計組首次在大型活動中挑戰(zhàn)水墨風(fēng)格。在時間緊迫的情況下投入交互設(shè)計2名，視覺設(shè)計5名，前端開發(fā)3名。輸出了規(guī)范1份，活動頁22個，動效3套，廣告圖20個，勛章掛件等元素圖26個。
項目設(shè)計中主要遇到了以下問題：
本篇文章會針對這些問題一一闡述解決方案
【首次嘗試水墨風(fēng)，如何實現(xiàn)】
本次項目的定位非常適合水墨風(fēng)。關(guān)于水墨風(fēng)的設(shè)計主要考慮了三個方面：
1. 表現(xiàn)手法
不只是我，相信在很多人的印象中，水墨感的設(shè)計大約都是上圖中水墨筆觸做為裝飾或背景，用來塑造氛圍。而在此項目中需要用水墨風(fēng)格表現(xiàn)熱鬧的場景，其中的建筑和小場景要跳出整幅畫面，提醒用戶可點。以上水墨的用法恐怕無法實現(xiàn)。
我們的解決方法：可點擊元素采用水墨感的線條搭配現(xiàn)代感的細節(jié)設(shè)計，得到有細節(jié)的水墨元素。如下圖
2. 字體
頁面設(shè)計中選擇了兩種字形和運筆都比較相似的字體來搭配：模塊標(biāo)題字體——華康龍門石碑，正文字體——華康古籍木蘭。這兩種字體具有足夠的古風(fēng)氣質(zhì)，雅俗共賞。
夫子學(xué)堂和百閱酒肆模塊的標(biāo)題字
正文字體在頁面中的使用效果
3.色彩搭配
色彩優(yōu)先選用了低飽和度的傳統(tǒng)色，淺色和墨色為主，紅色做為點綴。
通過以上表現(xiàn)手法，字體選擇和色彩搭配三方面，成功塑造了熱鬧小鎮(zhèn)的氛圍，實現(xiàn)出不一樣的水墨風(fēng)。
【模塊多頁面長，如何均衡點擊率】
在地圖頁面共有6個模塊，不能保證每個模塊都能在首屏露出，但我們希望模塊的點擊率不隨位置向下而降低。針對這一點我們做了兩件事：
1. 利用動畫對頁面自下而上做一個完整預(yù)覽，讓用戶知道除了首屏，下面還有更多內(nèi)容；
2. 此外，每個模塊添加小腳印動效，提示用戶此模塊中的任務(wù)還未完成。
最終從數(shù)據(jù)上看，各模塊活動的參與率比較均衡，達到預(yù)期。
【多人合作，視覺如何統(tǒng)一 】
舊流程
主視覺確定風(fēng)格并制定設(shè)計規(guī)范，其他設(shè)計師獨立負責(zé)1個或多個模塊。這樣的方式在實踐中也暴露了缺點：
1.風(fēng)格無法統(tǒng)一
各模塊由不同設(shè)計師獨立設(shè)計，同時進行，對于需要手繪的元素風(fēng)格差異明顯。
2.時間不好把控
每個設(shè)計師手繪所需的時間不一樣，不利于整個項目的整體規(guī)劃。
為了解決舊合作模式暴露出來的問題，在本次項目中嘗試了新的合作模式。
新流程
新流程其實是對整個項目的整合再分工，問題明顯改善：
1.風(fēng)格高度統(tǒng)一
一位設(shè)計師負責(zé)所有頁面中需要手繪的元素；其他設(shè)計師搭建剩余頁面；本次項目中需要動效，所有動效也是由專門一位設(shè)計師完成。這樣就很好的統(tǒng)一了視覺，再多設(shè)計師合作也沒問題。
2.更精準(zhǔn)地把控時間節(jié)點
有了規(guī)范和手繪元素，其他設(shè)計師搭建頁面的時間就能容易預(yù)估，從項目角度看，就能更精準(zhǔn)地把控時間節(jié)點。
【效果展示】
思考總結(jié)：
1. 本次項目中探究了如何用ps筆刷模擬水墨筆觸；探討了地圖頁適合用什么樣的透視角度；細節(jié)元素如何去繪制等。勇于嘗試，不能讓常見的設(shè)計方式限制了我們的思維。
2. 同一活動多人跨流程合作，最好是提前選定主視覺、主交互、主前端，保證各個環(huán)節(jié)均有人清楚全部活動內(nèi)容，合理分配人力和制定規(guī)則，提升效率。本次新合作方式很實用，相信以后針對不同活動會有更優(yōu)方案。
最后感謝所有在項目中辛勤工作，精誠協(xié)作的產(chǎn)品、設(shè)計、前端、開發(fā)和測試的同學(xué)們。
