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