2020-4-22 資深UI設(shè)計(jì)者
目前眾多的網(wǎng)文產(chǎn)品中，設(shè)計(jì)同質(zhì)化比較高，無(wú)論是產(chǎn)品視覺(jué)或是品牌運(yùn)營(yíng)視覺(jué)大多都缺乏獨(dú)創(chuàng)性與統(tǒng)一性。番茄小說(shuō)想要從眾多產(chǎn)品中脫穎而出就需要走出一條合而不同的設(shè)計(jì)道路。因此提升產(chǎn)品的識(shí)別度與消費(fèi)者對(duì)品牌的認(rèn)知?jiǎng)菰诒匦?，設(shè)計(jì)需探索構(gòu)建一套屬于產(chǎn)品的語(yǔ)言體系。
探索番茄小說(shuō)的設(shè)計(jì)語(yǔ)言，建立產(chǎn)品認(rèn)知
傳統(tǒng)文學(xué)
文學(xué)分為兩類(lèi)，嚴(yán)肅文學(xué)（看重語(yǔ)言和細(xì)節(jié)）、通俗文學(xué)（注重情節(jié)和故事，淺顯易懂）。
周憲《文學(xué)理論導(dǎo)引》里定義「文學(xué)是以精致語(yǔ)言書(shū)寫(xiě)的具有藝術(shù)價(jià)值的以文本為中心的文化系統(tǒng)?！雇ㄟ^(guò)定義可以概括出文學(xué)的特點(diǎn)就是具有藝術(shù)價(jià)值，并且能夠通過(guò)文字內(nèi)容帶人用戶(hù)反思或者收獲。當(dāng)人們?cè)陂喿x文學(xué)書(shū)籍時(shí)是冷靜的，只有在這樣的心境下讀者才能更好的獨(dú)立思考與分析。因此在氛圍上需要給用戶(hù)提供一個(gè)相對(duì)沉浸的空間、安逸的環(huán)境，通過(guò)分析可以提煉出的傳統(tǒng)文學(xué)情緒關(guān)鍵詞：沉浸、冷靜、舒適、價(jià)值
網(wǎng)絡(luò)文學(xué)
不同于傳統(tǒng)文學(xué)，網(wǎng)絡(luò)文學(xué)是順應(yīng)市場(chǎng)價(jià)值而誕生，是文學(xué)創(chuàng)作的平民化，讓大家能夠以網(wǎng)絡(luò)為載體而發(fā)表的文字內(nèi)容。廣義來(lái)說(shuō)，網(wǎng)絡(luò)文學(xué)屬于通俗文學(xué)的一類(lèi)，注重情節(jié)和故事，通過(guò)文字傳遞的內(nèi)容更加的樸實(shí)、接地氣，在創(chuàng)作分類(lèi)上也更加的多樣化，作者可以天馬行空的表達(dá)自己感受，可以說(shuō)是在傳統(tǒng)文學(xué)的基礎(chǔ)上，給文字增加了幾分煙火氣息，也多了幾分熱鬧的感受。
因此通過(guò)文學(xué)關(guān)鍵詞可擴(kuò)展出網(wǎng)絡(luò)文學(xué)情緒關(guān)鍵詞：沉浸、愉悅、煙火氣
前期通過(guò)對(duì)小說(shuō)用戶(hù)群體與市場(chǎng)的走訪(fǎng)調(diào)研，并通過(guò)數(shù)據(jù)分析，我們得到了如下結(jié)論：
產(chǎn)品用戶(hù)類(lèi)型
12-50歲青中年人；后GenX時(shí)代；一二三線(xiàn)城市有閱讀小說(shuō)習(xí)慣的人群；目前為對(duì)生活充滿(mǎn)向往的學(xué)生與藍(lán)領(lǐng)
產(chǎn)品品牌人格
樂(lè)觀(guān)愉悅（輕松）；品質(zhì)（書(shū)好）；親民、豐富（書(shū)多）
產(chǎn)品視覺(jué)風(fēng)格
品牌色貫穿產(chǎn)品，但不過(guò)分使用；視覺(jué)為產(chǎn)品功能服務(wù)，不做多余的設(shè)計(jì)；視覺(jué)表現(xiàn)多樣化，但需要表達(dá)相同的產(chǎn)品氣質(zhì)；適度的留白，增強(qiáng)設(shè)計(jì)空間感
產(chǎn)品核心詞：「沉浸中的愉悅」
正如我們對(duì)文學(xué)的分析，小說(shuō)閱讀同樣是一種獨(dú)立個(gè)體的行為方式，在讀書(shū)時(shí)，我們不希望被人打擾，不希望被瑣事細(xì)節(jié)阻斷，我們希望在一個(gè)相對(duì)安靜、舒適的環(huán)境下閱讀，這是一種沉浸式的感受。
因此這里我們就根據(jù)用戶(hù)的想要的感受，引入「沉浸」的概念——希望能夠給讀者留下一定的空間，并拋除繁雜打擾，讓大家享受閱讀與獨(dú)立思考。其核心是圍繞信息內(nèi)容本身而呈現(xiàn)，設(shè)計(jì)不再作為獨(dú)立于內(nèi)容之外的元素存在，而將著眼于內(nèi)容本身，為用戶(hù)打造直觀(guān)的視覺(jué)體驗(yàn)。拉大層級(jí)對(duì)比，增加適當(dāng)?shù)牧舭?，在一定程度上增加少許修飾，打破絕對(duì)的冷淡。其既能體現(xiàn)出文學(xué)的特點(diǎn)，又能夠在簡(jiǎn)約的基礎(chǔ)上增加畫(huà)面的構(gòu)成感，給用戶(hù)愉悅的感受。
觸感
網(wǎng)絡(luò)小說(shuō)與傳統(tǒng)文學(xué)另外一個(gè)最大的區(qū)別是觸感。
傳統(tǒng)文學(xué)大多以實(shí)體書(shū)籍紙張為承載，而網(wǎng)絡(luò)文學(xué)來(lái)自于互聯(lián)網(wǎng)是虛擬的。我們?cè)陂喿x時(shí)，觸摸紙張與書(shū)本樸實(shí)的質(zhì)感，也能夠給讀者帶來(lái)額外的舒適感受，因此如果能以視覺(jué)的形式還原用戶(hù)對(duì)書(shū)籍的「觸感」，不僅能夠?qū)⒕W(wǎng)絡(luò)與實(shí)體相鏈接，也可以幫助用戶(hù)增加電子閱讀的樂(lè)趣。
根據(jù)歸納出的文學(xué)特征，以及調(diào)研用戶(hù)年齡層與喜好，我們可以歸納出番茄小說(shuō)基礎(chǔ)原生關(guān)鍵詞。
基礎(chǔ)原生關(guān)鍵詞
拓展衍生關(guān)鍵詞
根據(jù)網(wǎng)絡(luò)文學(xué)原生關(guān)鍵詞，我們拓展出衍生詞
圖片搜索、提取情緒版
根據(jù)相關(guān)的衍生關(guān)鍵詞，我們收集大量的視覺(jué)圖片并將其匯總，借以分析其視覺(jué)特征
色彩提取
視覺(jué)映射
通過(guò)對(duì)情緒版的分析，我們可以得出結(jié)論并整理出番茄小說(shuō)設(shè)計(jì)語(yǔ)言，輕量的色彩、寫(xiě)意式元素、非對(duì)稱(chēng)布局、紙紋理噪點(diǎn)
將傳統(tǒng)的冷靜沉浸與網(wǎng)絡(luò)文學(xué)的熱鬧向融合是番茄小說(shuō)設(shè)計(jì)語(yǔ)言的重要視覺(jué)呈現(xiàn)方式風(fēng)格
多元化的簡(jiǎn)約設(shè)計(jì)+情感化修飾
Logo
番茄的品牌名稱(chēng)基于「、優(yōu)質(zhì)」的產(chǎn)品理念，服務(wù)于產(chǎn)品設(shè)計(jì)、品牌設(shè)計(jì)中。番茄相對(duì)于紅果是一個(gè)更加具象的表達(dá)，不僅可提高用戶(hù)對(duì)產(chǎn)品的認(rèn)知，也能傳遞小說(shuō)品牌的理念和態(tài)度?；诖耍@個(gè)理念框架是講述品牌故事的關(guān)鍵載體。
logo動(dòng)畫(huà)展示
小說(shuō)相關(guān)產(chǎn)品logo匯總
在logo的設(shè)計(jì)上我們將番茄的圖形概念化，保留番茄籽，局部的留白讓標(biāo)志同樣能表達(dá)空間與白的概念。我們選擇在白色底上用紅色非對(duì)稱(chēng)性式logo ，既區(qū)別了市面上大多產(chǎn)品logo樣式，又能夠加深用戶(hù)對(duì)產(chǎn)品的印象，突出了「愉悅」的特性。
選定 logo 并設(shè)計(jì)圖形+文字組合：
在文字設(shè)計(jì)上，相比正常宋體弱化文字襯線(xiàn)，為了突出空間感，我們擴(kuò)大了字面拉伸了中宮的占比，這樣做不僅提高文字識(shí)別度，整體氣質(zhì)也也能夠與沉浸的定義相耦合。
品牌色
前期通過(guò)情緒版的分析，摘取關(guān)鍵詞配色，綜合歸納出符合番茄小說(shuō)特性的的色彩搭配
通過(guò)對(duì)情緒版色彩的歸納，我們抽取具有代表性的顏色，作為番茄小說(shuō)的品牌色
輔助圖形
從logo中番茄圖形的概念出發(fā)，提取出以圓、番茄籽、番茄輪廓為基本型的品牌圖形元素
官方字體
考慮到官方字體在沉浸式頁(yè)面中的運(yùn)用，番茄官方字體的選擇與品牌屬性相契合的蘋(píng)方體、宋體。
VI 呈現(xiàn)：
品牌視覺(jué)感受：
品牌體現(xiàn)—產(chǎn)品場(chǎng)景
番茄小說(shuō)給人的感覺(jué)是安靜、平和、友好。因此在顏色使用中以品牌色配合低飽和度背景色做搭配，突出產(chǎn)品的帶給用戶(hù)的沉浸、愉悅感。
運(yùn)營(yíng)場(chǎng)景—運(yùn)營(yíng)設(shè)計(jì)對(duì)品牌塑造的意義
第一眼的感受，往往決定了用戶(hù)對(duì)產(chǎn)品的整體印象。目前在番茄小說(shuō)的產(chǎn)品中，最直觀(guān)的品牌視覺(jué)展示主要以書(shū)單活動(dòng)banner為載體，其做為活動(dòng)入口本身就處在一個(gè)前置的位置，占用空間大且更能吸引到用戶(hù)的注意。因此，需要對(duì)運(yùn)營(yíng)焦點(diǎn)圖設(shè)計(jì)精細(xì)化的打磨，讓用戶(hù)在打開(kāi)產(chǎn)品的瞬間，快速塑造產(chǎn)品在用戶(hù)心中的視覺(jué)形象。
番茄小說(shuō)運(yùn)營(yíng)設(shè)計(jì)——和而不同
運(yùn)營(yíng)設(shè)計(jì)的基本原則
因此番茄小說(shuō)的運(yùn)營(yíng)視覺(jué)需要緊密?chē)@在這個(gè)大前提下進(jìn)行設(shè)計(jì)，快速傳達(dá)信息=保證信息的簡(jiǎn)單化、文字有效性，促使用戶(hù)行動(dòng)=畫(huà)面內(nèi)容的趣味性、吸引性。
視覺(jué)呈現(xiàn)形式
遵循番茄體系，體現(xiàn)小說(shuō)內(nèi)核的「煙火」氣質(zhì)，視覺(jué)呈現(xiàn)多元化。以運(yùn)營(yíng)文案為中心，畫(huà)面設(shè)計(jì)貼近內(nèi)容，降低用戶(hù)信息識(shí)別成本。
品牌運(yùn)營(yíng)視覺(jué)一期構(gòu)建：手繪元素+非對(duì)稱(chēng)構(gòu)圖+質(zhì)感
設(shè)計(jì)規(guī)范
運(yùn)營(yíng)視覺(jué)與品牌調(diào)性應(yīng)是統(tǒng)一的，因此在運(yùn)營(yíng)設(shè)計(jì)的色彩選擇需要與品牌配色相呼應(yīng)，保證視覺(jué)與整個(gè)產(chǎn)品的和諧性。
運(yùn)營(yíng)插圖案例
在運(yùn)營(yíng)活動(dòng)中，依然要以產(chǎn)品所傳遞的氣質(zhì)來(lái)進(jìn)行畫(huà)面設(shè)計(jì)，即是保留沉浸的前提下，抽取關(guān)鍵詞的某個(gè)方向來(lái)表達(dá)品牌運(yùn)營(yíng)所傳遞的理念。在色彩的使用上可以圍繞關(guān)鍵詞的方向來(lái)選擇顏色，以表達(dá)內(nèi)容所傳遞的信息，可適當(dāng)使用品牌色作為點(diǎn)綴，但依然需要的保持視覺(jué)給人帶來(lái)的平和感。
作為一個(gè)從 0 到1的品牌，番茄小說(shuō)的設(shè)計(jì)語(yǔ)言依然在不斷的打磨、優(yōu)化。整體清晰的品牌規(guī)劃能夠保證線(xiàn)上、線(xiàn)下、產(chǎn)品與營(yíng)銷(xiāo)的各個(gè)視覺(jué)設(shè)計(jì)環(huán)節(jié)更加統(tǒng)一，同時(shí)也為后續(xù)的設(shè)計(jì)指明方向，助力業(yè)務(wù)持續(xù)發(fā)展。
文章來(lái)源：優(yōu)設(shè) 作者：今日頭條UED
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com