起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)畫完原型圖，我用Axure重新搭配了抖音APP頁(yè)面色彩風(fēng)格
在上篇寫抖音APP原型圖繪制的文章中，在文章結(jié)尾提到了一些關(guān)于對(duì)抖音APP的一些思考中提到關(guān)于抖音APP中顏色搭配的一些建議。然后我在Axure中重新對(duì)抖音的APP的色彩搭配做了設(shè)計(jì)。本文主要站在用戶角度分析抖音色彩搭配及一些修改建議及思考。
抖音APP色彩搭配解析
1.1 從抖音logo看抖音色彩搭配
抖音logo顏色主要由黑白兩種顏色和品紅與湖藍(lán)這對(duì)互補(bǔ)色搭配設(shè)計(jì)。其中，logo顏色整體以黑色為底，白、湖藍(lán)、品紅三種顏色的音符圖標(biāo)相互疊加，且品紅和湖藍(lán)分別在白色兩側(cè)組合成音符抖動(dòng)的效果，這也符合“字節(jié)跳動(dòng)”名字的由來(lái)。
從色彩搭配整體上看，互補(bǔ)色搭配使用使logo整體視覺(jué)效果協(xié)調(diào)而不突兀，且顏色搭配對(duì)于用戶長(zhǎng)時(shí)間觀看也不會(huì)產(chǎn)生較大的視覺(jué)沖擊。
而抖音APP內(nèi)整體色彩搭配也基本與logo色彩搭配一致，這對(duì)于用戶長(zhǎng)時(shí)間使用和觀看也不會(huì)導(dǎo)致視覺(jué)疲勞，抖音色彩搭配對(duì)用戶視覺(jué)體驗(yàn)有較強(qiáng)的促進(jìn)作用。
1.2 解析抖音APP內(nèi)色彩搭配
抖音APP中，抖音使用的顏色搭配主要有以下幾種：黑、白、品紅、湖藍(lán)、灰、黃；從色系上來(lái)看，黑、白、灰屬于冷色調(diào)，品紅、湖藍(lán)、黃屬于暖色調(diào)，也形成了一定的素材互補(bǔ)。
而這幾種顏色使用范圍大致整理如下：
從腦圖可以看出，抖音logo所使用的顏色元素均被使用在了APP頁(yè)面中，且同時(shí)也加入了灰色和黃色色彩來(lái)豐富了色彩搭配。
但明顯感覺(jué)到有以下幾點(diǎn)不和諧：
- 品紅和湖藍(lán)色彩使用比例差距較大，甚至湖藍(lán)使用占比小于黃色。
- 登錄頁(yè)白色和APP黑色頁(yè)面整體搭配不協(xié)調(diào)，比較突兀。
- 當(dāng)前頁(yè)面導(dǎo)航菜單和非當(dāng)前頁(yè)面導(dǎo)航菜單使用白色和灰色搭配使用，無(wú)法突出重點(diǎn)。
- 黃色在APP中使用不協(xié)調(diào)，沒(méi)有跟logo整體色彩搭配保持一致。
抖音APP目前的色彩搭配效果部分頁(yè)面展示：
更改抖音色彩搭配
2.1 色彩搭配改了哪些內(nèi)容
本文對(duì)抖音色彩搭配的更改主要考慮以下幾個(gè)方面：
- 顏色整體性，頁(yè)面背景統(tǒng)一修改成黑色。
- 與logo顏色協(xié)調(diào)性，去掉黃色元素，但保留灰色原色，理由是灰色在整體上與白色文字和黑色背景形成互補(bǔ)，且不重要的內(nèi)容可使用灰色展示，可稍微突出重要信息，對(duì)頁(yè)面整體美觀和協(xié)調(diào)性不會(huì)產(chǎn)生較大影響，反而會(huì)起到凸顯和對(duì)比的作用。
- 增加湖藍(lán)色使用比例，使顏色搭配更協(xié)調(diào)。
- 增強(qiáng)顏色使用統(tǒng)一性。
2.2 色彩搭配修改分類
2.3 修改前后效果比對(duì)
（1）登錄
修改前：
修改后：
（2）首頁(yè)
修改前
修改后：
（3）關(guān)注
修改前：
修改后：
（4）發(fā)布
修改前：
修改后：
（5）消息
修改前：
修改后：
（6）我
修改前：
修改后：
總結(jié)
- 增強(qiáng)了顏色的統(tǒng)一性，去掉黃色原色，增加湖藍(lán)元素的使用比例，使頁(yè)面布局更加具有整體性。
- 整體色彩以黑色背景為主要色調(diào)，當(dāng)前頁(yè)面中重要的操作區(qū)域使用品紅展示，重要信息使用白色展示，標(biāo)簽標(biāo)記等色彩使用湖藍(lán)色展示，增強(qiáng)頁(yè)面內(nèi)容的分類和可操作性，視覺(jué)體驗(yàn)更佳。
- 相似操作按鈕或者完全相反的操作按鈕排列在一起，分別使用品紅標(biāo)識(shí)主要操作按鈕，湖藍(lán)標(biāo)識(shí)次要或者相反操作按鈕，使得交互上更簡(jiǎn)潔明了，減少用戶學(xué)習(xí)成本，增強(qiáng)可操作性。
- 色彩使用規(guī)范性更高，便于用戶區(qū)分不同色彩的功能和體驗(yàn)。
本文作為產(chǎn)品小白在繪制完抖音APP原型圖后對(duì)于色彩搭配修改的個(gè)人思考和改進(jìn)的結(jié)果，僅代表個(gè)人觀點(diǎn)，歡迎各位產(chǎn)品前輩指正并提出寶貴意見(jiàn)。
抖音產(chǎn)品原型圖繪制詳見(jiàn)文章：《新手教程：抖音APP原型圖制作》
本文由 @陪時(shí)間旅行 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
本人產(chǎn)品小白，有點(diǎn)拙見(jiàn)。作者把取消關(guān)注/取消等按鈕變成紅色之后，其實(shí)是在提高提醒強(qiáng)度，好像是引導(dǎo)用戶取消關(guān)注或者取消分享這個(gè)作品，這個(gè)其實(shí)是違背產(chǎn)品或者運(yùn)營(yíng)的初心的。像抖音這種社交類的產(chǎn)品，應(yīng)該是盡量降低取消按鍵的存在感，通過(guò)顯眼的配色、模塊等鼓勵(lì)用戶去關(guān)注、分享、互動(dòng)。此外我覺(jué)得湖藍(lán)這個(gè)配色的亮度略高了。
同意評(píng)論區(qū)的看法，產(chǎn)品經(jīng)理應(yīng)該更加關(guān)注產(chǎn)品的邏輯，設(shè)計(jì)有專業(yè)的人可以去完善，但是產(chǎn)品經(jīng)理也要有自己的看法~~~
不過(guò)畫的很棒，真的畫原型花了很多時(shí)間~~~
可不可以不要使用axure自帶的那個(gè)圖片？巨丑，用個(gè)灰色色塊+“pic”不香么
哈哈哈哈哈
大佬有個(gè)什么學(xué)習(xí)方向沒(méi)有，剛?cè)腴T，學(xué)習(xí)盲目性，沒(méi)有方向，很頭疼
請(qǐng)問(wèn)這些你畫 了多久呢
整體色調(diào)是統(tǒng)一了，但是感覺(jué)還沒(méi)以前好看。選色調(diào)時(shí)有考慮用戶體驗(yàn)嗎
很想跟你學(xué)習(xí)下怎么畫的圖，我畫圖還是很糙，求教
請(qǐng)?jiān)囍蛨D干掉色彩。
這個(gè)原型圖確實(shí)四不像，還畫了另外一版低保真圖，這個(gè)是用來(lái)學(xué)習(xí)軟件畫的，在于學(xué)習(xí)畫法和軟件使用。(^_^)
我認(rèn)為產(chǎn)品經(jīng)理的著重點(diǎn)不應(yīng)該是界面配色這種表現(xiàn)層的東西，而是產(chǎn)品信息框架，業(yè)務(wù)邏輯的處理，配色和界面結(jié)構(gòu)是交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師考慮的范疇，建議更多關(guān)注產(chǎn)品本身的設(shè)計(jì)，其他的交給更相迎職能的人去做就可以了
感謝指點(diǎn) ?? 受教了
個(gè)人覺(jué)得沒(méi)有很大的必要去為了貼近logo配色特地將現(xiàn)有的配色改成這樣，尤其是發(fā)消息對(duì)話框、登陸的（其他方式）按鍵、直播中配色由原本的改成湖藍(lán)，會(huì)比較刺眼、當(dāng)字體顏色還是白的時(shí)候會(huì)看不清。再加上一個(gè)頁(yè)面中有紅的時(shí)候，用上這個(gè)藍(lán)色顯得頁(yè)面中的湖藍(lán)更為突出、刺眼了，整體頁(yè)面配色上也不如原本的看上去協(xié)調(diào) ?? 像發(fā)布作品的時(shí)候，感覺(jué)原本之所以將【草稿】鍵設(shè)置為灰底，【發(fā)布】為紅，就是希望鼓勵(lì)用戶更多去發(fā)布作品（紅色與灰色的對(duì)比下，會(huì)更加優(yōu)先想點(diǎn)紅色按鍵），但是改【草稿】是湖藍(lán)為底色的時(shí)候，兩個(gè)顏色同等鮮艷顯眼的情況下，可能就降低了這個(gè)鼓勵(lì)的感覺(jué)。
感謝指點(diǎn)，個(gè)人考慮的還是比較片面。
感覺(jué)原型圖改變顏色意義不大 原型圖首先的功能應(yīng)該是讓使用者在視覺(jué)上和交互上清晰明白想要表達(dá)的功能。至于獨(dú)特的顏色風(fēng)格，做了之后效果還不一定能讓使用者對(duì)原型圖的理解有更好的提升
感謝指點(diǎn)，這是個(gè)練手作品。本人考慮的范圍肯定不如抖音產(chǎn)品經(jīng)理思考得到位。以后多學(xué)習(xí)相關(guān)知識(shí)
u1s1，湖藍(lán)的色塊加上白色字體，有點(diǎn)看不清字啊，會(huì)感覺(jué)有些刺眼
感謝指點(diǎn)，這是作為新手的一些思考和改進(jìn)。還沒(méi)有考慮到視覺(jué)體驗(yàn)。以后多學(xué)習(xí)^?_?^