年前開始接手友空間產(chǎn)品視覺設(shè)計(jì)工作，從移動(dòng)端、產(chǎn)品品牌VI、到web端的上線，友空間整體品牌形象升級(jí)改造工作總體完成。因此利用這兩天的空閑時(shí)間，把友空間v4.0視覺改版工作做下總結(jié)分享。

隨著智能手機(jī)的普及，辦公移動(dòng)化已經(jīng)成為一種趨勢(shì)。伴隨著移動(dòng)互聯(lián)網(wǎng)整個(gè)行業(yè)已經(jīng)成熟，職業(yè)分工越來越細(xì)，職業(yè)化程度的越來越高，用戶和行業(yè)對(duì)設(shè)計(jì)的要求、設(shè)計(jì)對(duì)于產(chǎn)品的重要性也達(dá)到了一個(gè)新的高度。

品牌概述

友空間是用友網(wǎng)絡(luò)旗下專為大中型企業(yè)及組織打造的社交化協(xié)同辦公平臺(tái)，是“用友云”生態(tài)的統(tǒng)一應(yīng)用入口，為企業(yè)提供辦公協(xié)同、溝通協(xié)作等核心價(jià)值，提高管理和工作效率。

而隨著友空間的日益壯大，友空間希望通過品牌重塑使產(chǎn)品形象更加強(qiáng)有力和更具統(tǒng)一性。

面臨問題

友空間3.0目前版本設(shè)計(jì)語言比較老舊，缺乏品牌一致性和辨識(shí)度，與競(jìng)品沒有形成差異化，內(nèi)容處理上比較紊亂。圖標(biāo)與細(xì)節(jié)設(shè)計(jì)不夠精致，沒有形成規(guī)范體系化

人群定位

在針對(duì)友空間目前的市場(chǎng)現(xiàn)狀調(diào)研以及產(chǎn)品定位分析中，目前友空間用戶所在企業(yè)以大中型企業(yè)為主，崗位維度覆蓋面非常廣泛，年齡從18歲—40歲以上，群體年齡分布相對(duì)均勻。

寬泛的行業(yè)范圍，以及不同領(lǐng)域之間的辦公需求千差萬別，這決定了我們?cè)谔釤挳a(chǎn)品品牌定位的過程中，更趨向于中性性格色彩，同時(shí)避免指向性色彩的使用(卡通、柔美等風(fēng)格)

被調(diào)研群體的特點(diǎn)：

1. 年齡從18歲~40歲以上，群體年齡分布相對(duì)均勻
2. 崗位維度覆蓋面非常廣泛，包括了其他11個(gè)崗位，其中研發(fā)和銷售數(shù)量居多
3. 行業(yè)維度包括IT互聯(lián)網(wǎng)、制造業(yè)、服務(wù)業(yè)、建筑房地產(chǎn)等行業(yè)

確認(rèn)目標(biāo)

結(jié)合當(dāng)前產(chǎn)品定位與人群定位分析，以及在對(duì)目前市場(chǎng)上的社交協(xié)同辦公產(chǎn)品競(jìng)品研究中（釘釘、企業(yè)微信、云之家、Teambition)。我們提煉了新版本的品牌情感關(guān)鍵詞：品質(zhì)、專業(yè)、效率。并以內(nèi)容為主進(jìn)行設(shè)計(jì)

明確的設(shè)計(jì)目標(biāo)能指引我們不偏離大方向，我們基于設(shè)計(jì)目標(biāo)結(jié)合產(chǎn)品本身特性提煉出以下改版方向：

1. 情感定位—確定產(chǎn)品情感定位，指導(dǎo)產(chǎn)品風(fēng)格的探索包括顏色、動(dòng)效、字體等等的選用，確保保持一致的產(chǎn)品形象；
2. 色彩—對(duì)用戶最為有效的感知就是色彩，通過不同的色彩定義來傳達(dá)不同的情感，挖掘產(chǎn)品色彩的管理，讓色彩成為情感輸出的潤(rùn)滑劑；
3. 圖標(biāo)—圖標(biāo)保持精致化且一致性，加強(qiáng)功能識(shí)別性，根據(jù)不同色彩定義來管理功能分類，呼應(yīng)產(chǎn)品風(fēng)格；
4. 細(xì)節(jié)設(shè)計(jì)—挖掘比較溫和友好的細(xì)節(jié)設(shè)計(jì)，既讓普通用戶無法察覺，又使頁面看起來活躍、不乏味；
5. 簡(jiǎn)潔—對(duì)于社交協(xié)同這類功能性較強(qiáng)的產(chǎn)品，需要將其復(fù)雜的功能分類整理，將頁面合理分區(qū)，歸納散落的功能，讓頁面看起來整體感更強(qiáng)。并保持簡(jiǎn)潔、干凈的風(fēng)格為主
6. 動(dòng)效—功能與功能之間的關(guān)聯(lián)動(dòng)畫順暢合理，為原本枯燥的產(chǎn)品增添一點(diǎn)樂趣；
7. 效率—精簡(jiǎn)每屏傳達(dá)內(nèi)容，精確傳達(dá)頁面信息，注意留白，加強(qiáng)頁面的呼吸感。

結(jié)合設(shè)計(jì)趨勢(shì)

從Material Design的發(fā)布，到如今ios10的正式發(fā)布，我們看到一種越來越簡(jiǎn)化的風(fēng)潮正在襲來，而極簡(jiǎn)化的背后，就是以內(nèi)容為主進(jìn)行設(shè)計(jì)，即內(nèi)容為王。精簡(jiǎn)傳達(dá)內(nèi)容、精確傳達(dá)頁面信息，降低其他因素對(duì)用戶使用上的干擾。

因此動(dòng)畫、品牌、色彩、布局、字體在信息與情感的傳達(dá)中將起更為巨大的作用。

可以預(yù)見，未來整體風(fēng)格將呈現(xiàn)極簡(jiǎn)化、精致化、品牌化。這對(duì)設(shè)計(jì)師必然是不小的挑戰(zhàn)，同時(shí)也是更大的價(jià)值體現(xiàn)，我們知道，越簡(jiǎn)單的東西越難設(shè)計(jì)。

極簡(jiǎn)化是在界面設(shè)計(jì)中去把握簡(jiǎn)的程度以及如何平衡和傳達(dá)更多的信息和指引用戶。精致化是對(duì)設(shè)計(jì)細(xì)節(jié)的精致追求，一種工匠精神。品牌化是從更宏觀的角度去考慮設(shè)計(jì)，基于產(chǎn)品、品牌定位去傳達(dá)一個(gè)更整體的概念。

視覺方案展示

情感定位

經(jīng)過前期的調(diào)研以及關(guān)鍵詞的提取，新版本整體的視覺風(fēng)格將趨向簡(jiǎn)潔、效率。在細(xì)節(jié)上凸顯情感化設(shè)計(jì)，整體呈現(xiàn)極簡(jiǎn)化、精致化、品牌化。傳達(dá)友空間專業(yè)、品質(zhì)的辦公體驗(yàn)

色彩定義

對(duì)用戶最有效的感知就是色彩，不同的色彩定義傳達(dá)不同的情感，挖掘產(chǎn)品色彩的管理，讓色彩成為情感輸出的潤(rùn)滑劑。

色彩搭配

主色采用用友的品牌色紅色為基礎(chǔ)色，保持用友品牌的一致性和識(shí)別性。

色彩比例

因?yàn)樯缃粎f(xié)同產(chǎn)品本身功能的豐富性與拓展性，除了主色以外，還需要一系列輔色來展示產(chǎn)品的不同場(chǎng)景。并保持一定的使用比例結(jié)構(gòu)，保證產(chǎn)品的整體性和品牌的傳達(dá)

界面設(shè)計(jì)

總結(jié)

很喜歡這句話：“產(chǎn)品只是一個(gè)虛擬框架，需要視覺的幫助，賦予它全新的生命，讓它變得更加充實(shí)”

如前面設(shè)計(jì)趨勢(shì)所說，在如今內(nèi)容為王的時(shí)代，產(chǎn)品將呈現(xiàn)極簡(jiǎn)化、品牌化、精致化的趨勢(shì)。而這無疑將是視覺設(shè)計(jì)師的價(jià)值所在。賦予產(chǎn)品品牌力以及生命力。讓產(chǎn)品更親近用戶體驗(yàn)。

作者：wnoony。微信公眾號(hào)：設(shè)計(jì)師Wnoony

本文由 @wnoony 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。