首頁(yè)

辛辛苦苦做的設(shè)計(jì),被人說(shuō)沒(méi)質(zhì)感,結(jié)果兩招就搞定了!

seo達(dá)人


1.明暗是影響質(zhì)感的最關(guān)鍵因素

我們來(lái)看一組對(duì)比,左側(cè)是原作,右側(cè)是星友的練習(xí)作品:

圖片

很明顯,練習(xí)作品的質(zhì)感沒(méi)有原作好,其中最重要的一個(gè)原因就是,原作的明暗交接線非常清晰,明暗對(duì)比很強(qiáng)烈,而練習(xí)作品就會(huì)有點(diǎn)平。

很久之前做的這個(gè)作品,當(dāng)時(shí)看起來(lái)還可以:

圖片

但現(xiàn)在一看,也是缺少明暗對(duì)比,導(dǎo)致整體質(zhì)感差了很多,人家下面這種在明暗方面就對(duì)比很強(qiáng)烈:

圖片

所以,質(zhì)感看起來(lái)就杠杠滴!

再比如下面這組對(duì)比,上面的是原做,下面的是臨摹:

圖片

我覺(jué)得臨摹的要比原作好,我們看底部對(duì)比,下面那個(gè)底部暗部足夠暗,形成強(qiáng)烈明暗對(duì)比,整體質(zhì)感看起來(lái)就很舒服。

兄弟們,這個(gè)明暗非常重要,要牢記?。?

 

2.邊緣光的重要性

再來(lái)說(shuō)一個(gè)影響質(zhì)感的因素——邊緣光。

我們看下面這個(gè)對(duì)比,左側(cè)為網(wǎng)上原作,右側(cè)為練習(xí)作品:

圖片

能看出來(lái)什么問(wèn)題嗎?右側(cè)是不是和背景糊在一起了?如果,主體都和背景糊在一起了,那層次肯定就不夠,整體效果也就差了很多。而這一切的問(wèn)題都是因?yàn)闆](méi)有加邊緣光導(dǎo)致。

其實(shí)以前做項(xiàng)目的時(shí)候,我也遇到過(guò)這類(lèi)問(wèn)題,比如這個(gè)頁(yè)面,最開(kāi)始也是主體和背景糊在一起:

圖片

后來(lái)加了一點(diǎn)邊緣光,調(diào)整一下燈光色調(diào):

圖片

效果立馬就好多了。

其實(shí)很多作品,都是帶有邊緣光的,這光一加上,立馬就感覺(jué)高級(jí)很多:

圖片

是不是,兄弟們!

 

3.前中后景的三個(gè)層次

下面這組設(shè)計(jì)是十豆三同學(xué)做的:

圖片

最開(kāi)始做的更新是比較常規(guī)的火箭,后來(lái)用品牌形象加飛船元素改了一版,更加有創(chuàng)意和特點(diǎn)了。

但是這里我們來(lái)說(shuō)下后面這張圖的不足,我會(huì)覺(jué)得主體和背景銜接的還不夠自然,如果我們把畫(huà)面分成前中后三個(gè)層級(jí),這個(gè)畫(huà)面就缺少了一點(diǎn)中層的內(nèi)容。

我也經(jīng)常做這種類(lèi)似的畫(huà)面,比如這種:

圖片

如果說(shuō)黑色是背景,白色形象是前景,那么背景上面的這些元素就是中景:

圖片

這個(gè)中景是提高畫(huà)面整體質(zhì)感的關(guān)鍵因素之一,非常重要,不可忽視!

再比如這個(gè)畫(huà)面:

圖片

也是在中景加了一些圖形和雞蛋,讓整體畫(huà)面更加豐富,層次更加清晰。

 

總結(jié)

好了,以上就是我經(jīng)常使用到的提升設(shè)計(jì)質(zhì)感的小方法,希望可以幫助到大家,么么扔!

 

原文地址:菜心設(shè)計(jì)鋪(公眾號(hào))
作者:菜心設(shè)計(jì)鋪
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》辛辛苦苦做的設(shè)計(jì),被人說(shuō)沒(méi)質(zhì)感,結(jié)果兩招就搞定了!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


用好“對(duì)比色”,讓你的設(shè)計(jì)更有吸引力?。▽?shí)操篇)

seo達(dá)人



01 對(duì)比色配色實(shí)操

本次提取上期“對(duì)比色配色”理論篇講解的部分文案,進(jìn)行配色的實(shí)操演示:

圖片

 

方案一

在PS中新建文件,背景選擇藍(lán)色。

英文放大鋪滿(mǎn)背景,并加入邊框。顏色選擇藍(lán)色的對(duì)比色紅色。(英文字體:Champion)

圖片

新建圖層,填充白色,用套索工具畫(huà)出不規(guī)則選區(qū)。

圖片

點(diǎn)擊“添加圖層蒙版”按鈕,給圖層添加蒙版。

選擇蒙版,執(zhí)行“濾鏡-濾鏡庫(kù)-噴色描邊”,得到不規(guī)則的撕紙邊緣效果。

圖片

復(fù)制一個(gè)新圖層,填充紅色,向上錯(cuò)位移動(dòng)。

在白色圖層添加“圖層樣式-投影”,撕紙效果就制作好了。

圖片

復(fù)制“文字”和“矩形”圖層,移動(dòng)到紅色圖層上方,填充藍(lán)色。

按“Ctrl+Alt+g”建立剪切蒙版,讓文字只在紅色圖層范圍顯示。

圖片

把藍(lán)色字改為白色,白色是萬(wàn)能的調(diào)和色,可以緩沖藍(lán)紅對(duì)比色強(qiáng)烈的對(duì)抗性,也可以讓作品更加透亮。

圖片

最后加入文字排版和紙張褶皺效果,設(shè)計(jì)完成:

圖片

 

方案二

使用AI進(jìn)行制作,顏色選用對(duì)比色紫色和綠色搭配。(英文字體:Current)

圖片

給英文創(chuàng)建輪廓,取消群組。

使用直線工具畫(huà)出一條分割線,使用“路徑查找器”中的“分割”功能,把字母切割開(kāi)

圖片

取消群組,右鍵選擇“變換-旋轉(zhuǎn)”180度,調(diào)整兩個(gè)色塊重合。

執(zhí)行“效果-風(fēng)格化-陰影”加入陰影。這樣得到了折紙效果:

圖片

使用相同的方法制作出其他字母:

圖片

最后加入文字排版和紙張褶皺效果,設(shè)計(jì)完成:

圖片

 

方案三

繼續(xù)使用AI進(jìn)行制作,把所有英文放置在畫(huà)面中。(英文字體:Current)

圖片

顏色選用黃、藍(lán)、紅的三色對(duì)比色進(jìn)行搭配。

圖片

圖片

圖片

最后加入文字排版和紙張褶皺效果,設(shè)計(jì)完成:

圖片

可以嘗試新的配色方案,

此方案顏色選用橙、綠、紫的三色對(duì)比色搭配。

圖片

本期使用的字體、樣機(jī)、源文件,請(qǐng)關(guān)注微信公眾號(hào):藝海拾貝Design(ID:YHSBds),公眾號(hào)主頁(yè)回復(fù)“對(duì)比色”獲取下載鏈接。

 

優(yōu)秀作業(yè)展示

01 NoctilucaGladys

圖片

 

02 風(fēng)少

圖片

 

03 沕風(fēng)

圖片

 

04 龍娟(2張作品)

圖片

圖片

 

05 七陌

圖片

 

06 Joyce

圖片

 

07 蛋蛋DAN

圖片

 

08 珞影隨行

圖片

 

09 咪奧mao

圖片

圖片

 

10 小孔呀

圖片

 

原文地址:藝海拾貝Design(公眾號(hào))

作者:鄧海貝

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》用好“對(duì)比色”,讓你的設(shè)計(jì)更有吸引力!(實(shí)操篇)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



大廠活動(dòng)分析|《請(qǐng)回答2020》年度品牌活動(dòng)

seo達(dá)人



什么是《請(qǐng)回答》

《請(qǐng)回答》系列活動(dòng)是百度知道歷年大型年終品牌活動(dòng),目標(biāo)是通過(guò)此活動(dòng)詮釋回答是一種力量,樹(shù)立有溫度有力量的品牌形象,打造一年一度的全民打卡活動(dòng),成為有互聯(lián)網(wǎng)記憶的品牌年度活動(dòng)。
 

項(xiàng)目背景:

今年的活動(dòng)聚焦2020年的人和事,結(jié)合各行各業(yè)的創(chuàng)作者一起總結(jié),引發(fā)用戶(hù)對(duì)這特殊一年的情感共鳴。比起去年組隊(duì)答題的玩法,今年降低用戶(hù)參與成本,通過(guò)2020紅包、大富翁游戲、任務(wù)系統(tǒng)等多重手段,擴(kuò)大《請(qǐng)回答2020》在站內(nèi)外的影響力,增強(qiáng)用戶(hù)對(duì)知道品牌的認(rèn)知,把《請(qǐng)回答》做成有互聯(lián)網(wǎng)記憶的連續(xù)性品牌活動(dòng)。
基于活動(dòng)定位,今年我們將打造有溫情的知道專(zhuān)屬品牌活動(dòng)作為設(shè)計(jì)目標(biāo)。
圖片
 

如何打造有溫情的品牌活動(dòng)呢?

01品牌的延續(xù)

2019年是這個(gè)活動(dòng)首次亮相,作為品牌活動(dòng)我們?cè)O(shè)計(jì)了專(zhuān)屬的logo,今年的活動(dòng)首先要延續(xù)《請(qǐng)回答》的品牌喚起用戶(hù)對(duì)這個(gè)活動(dòng)的回憶。視覺(jué)上保持之前的字體風(fēng)格,改變排版形式,強(qiáng)化知道的品牌露出,且適配活動(dòng)冠名的需求,同時(shí)加入了星球的圖形,寓意知識(shí)像星球一樣充滿(mǎn)奧秘感,這也作為今年品牌差異化的升級(jí)。
圖片 
 

02主視覺(jué)傳達(dá)溫情與品牌

前面講到2020年的特殊性,基于有溫情的品牌活動(dòng)的設(shè)計(jì)目標(biāo),主視覺(jué)突出人格化,體現(xiàn)知道有各行各業(yè)的人以及2020年的一些大事件。
圖片 
 

03核心玩法滲透溫情設(shè)計(jì)

I.游戲區(qū)
用戶(hù)在大富翁游戲區(qū)通過(guò)完成任務(wù),積累骰子獲得前進(jìn)格數(shù)并獲得獎(jiǎng)品。游戲區(qū)的場(chǎng)景設(shè)定為一座漂浮的小島,島中間由20個(gè)格子組成心形,寓意2020年。同時(shí)這個(gè)心形也與用戶(hù)建立暖心互動(dòng),傳遞活動(dòng)溫度。
圖片  
 
II.隱藏彩蛋
游戲區(qū)有一個(gè)設(shè)計(jì)創(chuàng)意點(diǎn),隱藏彩蛋作為鏈接事件卡的載體,對(duì)用戶(hù)來(lái)說(shuō)是一種情感的激勵(lì)。
漂流瓶的偶然性和神秘感以及撿到瓶子后帶給人的驚喜感,都與彩蛋的玩法高度的契合,于是確定下來(lái)漂流瓶作為彩蛋的表現(xiàn)形式,將事件卡元素放在漂流瓶中,用戶(hù)通過(guò)完成任務(wù)積累骰子,在游戲的過(guò)程中觸發(fā)隱形彩蛋,從而獲得相應(yīng)的事件卡。
圖片  
 
III.事件卡
事件卡一共12張,從2020年每個(gè)月中選取一個(gè)熱點(diǎn)事件,用插畫(huà)故事和主視覺(jué)相呼應(yīng),帶用戶(hù)回顧難忘的2020??ㄆ刹鍒D層、統(tǒng)一的卡片樣式、回答區(qū)以及品牌元素構(gòu)成,給用戶(hù)傳達(dá)統(tǒng)一的視覺(jué)感受。
圖片 
 

04群像故事海報(bào)傳播,擴(kuò)大影響力

活動(dòng)中后期通過(guò)百度官方及營(yíng)銷(xiāo)號(hào)聯(lián)合發(fā)布群像海報(bào),強(qiáng)化平臺(tái)背后回答者的真實(shí)性,擴(kuò)大《請(qǐng)回答》活動(dòng)的影響力。海報(bào)以人物為主題,背景沿用主視覺(jué)同時(shí)加入問(wèn)答元素作為點(diǎn)綴,整體保持視覺(jué)延展一致性傳播。
圖片
 

項(xiàng)目總結(jié)

《請(qǐng)回答》作為百度知道系列化品牌活動(dòng),未來(lái)我們的思考不僅僅只局限在視覺(jué)的表現(xiàn)上,還要挖掘品牌系列化活動(dòng)的延續(xù)性與獨(dú)特性,同時(shí)更要通過(guò)合理的情感互動(dòng)建立和用戶(hù)的鏈接,為品牌長(zhǎng)線發(fā)展提供更多價(jià)值,一起期待明年的《請(qǐng)回答》活動(dòng)吧! 
 
 
原文地址:百度MEUX(公眾號(hào))
 
作者:愛(ài)分享的
 
 轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》大廠活動(dòng)分析|《請(qǐng)回答2020》年度品牌活動(dòng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


版式技巧 | 不一樣的三角構(gòu)圖技巧

seo達(dá)人



文末點(diǎn)擊原文地址 可觀看教程視頻;

 

今天用另一種角度

教大家三角構(gòu)圖的實(shí)用方法

圖片

 

圖片

 

用三個(gè)點(diǎn)所相連成的線稱(chēng)之為三角構(gòu)圖,看似簡(jiǎn)單,實(shí)際該如何運(yùn)用?

圖片

 

圖片

第一眼看好像沒(méi)什么問(wèn)題,但是由于文字的分段較多導(dǎo)致內(nèi)容層級(jí)不明顯,閱讀上會(huì)出現(xiàn)斷層和不夠直觀的體驗(yàn)。

圖片

 

三角構(gòu)圖作為層次空間的搭建者,將數(shù)字、主題、信息、時(shí)間利用三角的結(jié)構(gòu)進(jìn)行了分層以及信息主次和布局的整理,讓大眾可以清晰直觀的看到想要體現(xiàn)的利益和重要順序。

圖片圖片

 

兩者之間的對(duì)比一下,是不是右邊的也更有設(shè)計(jì)感一些。

圖片

 

 

圖片

物體之間的三角構(gòu)圖,一個(gè)奧特曼放在畫(huà)面中,看上去有些孤單,主要是怕萬(wàn)一打不過(guò)怪獸。

圖片

 

根據(jù)三角的結(jié)構(gòu)和方向性,依次左右放置更多的物體進(jìn)行組合,再放置主標(biāo)題,這樣是不是既顯得有層次又看起來(lái)內(nèi)容豐富一些呢。

圖片

 

可惜80、90年代人最美好的童年回憶也終將逝去,某些家長(zhǎng)不相信光,把教育不好的鍋丟給了奧特曼,可奧特曼又有什么錯(cuò)了,他只是單純的想保護(hù)地球。

圖片

 

 

圖片

 

教程步驟

剛才這兩個(gè)示例都是拆分式的講解,如何在實(shí)際設(shè)計(jì)時(shí)完整的使用?

設(shè)計(jì)一張海報(bào)時(shí),放置物體和文字,這樣的結(jié)合看起來(lái)是不是有點(diǎn)單調(diào)且缺設(shè)計(jì)感。

圖片

 

一、解決層次和空間

根據(jù)三角構(gòu)圖,用剛才奧特曼的方式依次將物體有序的以三角構(gòu)建的方向組合羅列。

圖片

將文字做出透視感放置到物體腳下,增加質(zhì)感讓文字貼合到背景中。放置一些城市元素在物體身后,這幾步的操作都是增加遠(yuǎn)景以提升空間感。

圖片

 

二、解決畫(huà)面的融合和完整度

調(diào)整整個(gè)畫(huà)面包括物體的質(zhì)感。

圖片

 

將主標(biāo)題放置畫(huà)面時(shí),主標(biāo)題區(qū)域與下面物體還沒(méi)能很好的融合在一起,我們可以將主標(biāo)題以扇形或者同以三角構(gòu)圖的方法展開(kāi)結(jié)合到畫(huà)面中,這樣一來(lái),視覺(jué)的完整度就有了很大的提高。

圖片

 

到這很多人可能就做完了,但其實(shí)還缺點(diǎn)睛之筆,我們發(fā)現(xiàn)人物的視線是直視著畫(huà)面前方,可以利用這樣的引導(dǎo),增加一個(gè)兵乓球在視線前方,讓畫(huà)面具有一定的律動(dòng)感和視覺(jué)的穿透力。

圖片

 

我們?cè)賹?duì)比下前后的效果。

圖片

這就是今天帶來(lái)的三角構(gòu)圖方法,視頻完整版內(nèi)容都在我最新的直播課程當(dāng)中。

 

原文地址:修先森撩設(shè)計(jì)(公眾號(hào))

作者:修先森

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》版式技巧 | 不一樣的三角構(gòu)圖技巧

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



都在聽(tīng)網(wǎng)易云,卻不知道banner設(shè)計(jì)這么好用

seo達(dá)人



5分鐘教你快速設(shè)計(jì)網(wǎng)易云banner

圖片

▲往下繼續(xù)看文章,內(nèi)含設(shè)計(jì)實(shí)操案例干貨!

圖片

作為老網(wǎng)抑云的鐵粉,最近的2020年度報(bào)告刷紅了朋友圈,不看不知道,原來(lái)這一年小編一共聽(tīng)了954小時(shí)3089首歌,如果24小時(shí)不間斷也要40天才能聽(tīng)完,不知道這算不算老網(wǎng)抑云了,如果有聽(tīng)歌時(shí)間比我長(zhǎng)的可以留言batter一下!

圖片

▲小編的2020歌單

圖片

為什么偏偏網(wǎng)易云成為了年輕人和大眾的最?lèi)?ài)

網(wǎng)易云做對(duì)了兩件事情

-懂音樂(lè)

聽(tīng)著歌曲,看著評(píng)論,有無(wú)數(shù)個(gè)故事在治愈和慰藉那些深夜不眠的孤獨(dú)患者,總能有一句話戳到你早已滿(mǎn)目瘡痍的內(nèi)心,吃著火鍋眼眶里含著淚水,發(fā)送了分手文字的短信,所以在網(wǎng)易云里聽(tīng)的不只是音樂(lè),還有故事。

圖片

圖片

▲評(píng)論來(lái)自網(wǎng)易云

-懂設(shè)計(jì)

打開(kāi)網(wǎng)易云,我們可以從banner的設(shè)計(jì)中感受到聽(tīng)取音樂(lè)的風(fēng)格,甚至發(fā)行EP所要闡述的理念都能在一張小小的banner設(shè)計(jì)中有效讀取,在小編認(rèn)為這是與音樂(lè)融合出來(lái)的設(shè)計(jì),而不只是為了設(shè)計(jì)和推廣這首歌曲的目的。

圖片

圖片

▲圖片來(lái)自網(wǎng)易云

圖片

圖片

 

1、讓色彩情緒化

色彩并不只是用來(lái)配合文字和圖片的工具,而是需要賦予設(shè)計(jì)靈魂,讓色彩變得富有深度和畫(huà)面感,小編稱(chēng)為色彩屬性,每一首歌不管是流行、民謠、搖滾、電子、獨(dú)立音樂(lè)類(lèi)型,都有著背后的創(chuàng)作故事和曲風(fēng)類(lèi)型,從色彩屬性最直觀的將故事里的情緒化表現(xiàn)出來(lái),讓觀者看到畫(huà)面就能知道這首歌大概是什么曲風(fēng),是悲傷的還是開(kāi)心的歌曲。

圖片

圖片

▲圖片來(lái)自網(wǎng)易云

圖上歌曲想要體現(xiàn)的是一場(chǎng)與自由的角逐,曲風(fēng)也偏向于Hip-Ho說(shuō)唱和電音的一種結(jié)合,代表著勇敢與激情的紅色調(diào)鋪滿(mǎn)了整個(gè)畫(huà)面,結(jié)合展露的肌肉身材,從中釋放出想要自由和尋找自由的情緒性。當(dāng)顏色調(diào)整為黑白配色后,原本代表著勇敢和自由的感覺(jué)突然消失了,從畫(huà)面中反而獲取了一種孤獨(dú)和悲傷的情緒感。

圖片

圖片

▲圖片來(lái)自網(wǎng)易云

再看圖上的banner結(jié)合歌曲名,我想大部分人都能判斷出這首歌是寫(xiě)的對(duì)另一伴的不舍和留念,雨天昏暗的深夜加大了對(duì)于觀者的理解與感受,而如果整個(gè)畫(huà)面的色彩調(diào)整為黑白色,只留出燈、紅酒、相框的顏色后,那種失去的強(qiáng)烈是不是會(huì)更加的明顯和深刻。

圖片

圖片

▲圖片來(lái)自網(wǎng)易云

 

2、控制畫(huà)面留白

留白的目的除了解決畫(huà)面內(nèi)容層次的一種梳理以外,還會(huì)為設(shè)計(jì)增加很多藝術(shù)美感和想象空間。

圖片

圖片

▲圖片來(lái)自網(wǎng)易云

我們可以看到兩張圖的對(duì)比,從本身版式的理解上,文字居左對(duì)齊,將文字的大小、粗細(xì)通過(guò)層次分開(kāi)得到流暢的閱讀感,本身是沒(méi)有問(wèn)題,但卻失去了音樂(lè)特性的本質(zhì),而留白就是改變和拆分版式編排的結(jié)構(gòu),將其原有連串起來(lái)的主題文字拆分重組,讓版式內(nèi)部得到一個(gè)流通。

圖片

圖片

▲圖片來(lái)自網(wǎng)易云

 

3、讓設(shè)計(jì)變得有趣

設(shè)計(jì)不是表格也不是冷冰冰的數(shù)字,設(shè)計(jì)是為了讓人們感受人和生活的理想化,所以有趣就變成了一種特質(zhì)化標(biāo)簽,可以提升對(duì)于大眾的新鮮感。利用字體之間的變化,符合主題的元素圖形或者涂描來(lái)放大畫(huà)面設(shè)計(jì)的趣味性,就像烤羊肉一定要放孜然或者椒鹽才算吃的夠爽是一個(gè)意思。

圖片

圖片

 

▲圖片來(lái)自網(wǎng)易云

 

實(shí)操案例步驟

圖片

圖片

▲實(shí)操案例分享

設(shè)計(jì)詮釋?zhuān)骸逼扑榈墓饩€在水彩浸潤(rùn)過(guò)你的臉,Tsing River,it will wash me” 這是白皮書(shū)樂(lè)隊(duì)里關(guān)于《清河》歌曲里的一段歌詞。從歌詞中感受到人浮在水面上,斑斕的色彩光照進(jìn)全身,又隨著余暉漸漸消失殆盡的感受。所以在設(shè)計(jì)中利用了雙色漸變將整體的畫(huà)面顏色變成了涂抹色彩,扭曲和波瀾的水面塑造出與眾不同的設(shè)計(jì)感。

圖片

 

步驟1:

利用參考線找到中心區(qū)域,并放置主體圖片。

[優(yōu)化輸出圖像]

 

步驟2:

  • 【漸變隱射】工具繪制綠色與藍(lán)色的漸變
  • 【漸變隱射】工具繪制紫色與藍(lán)色的漸變并選擇圖層模式中的【飽和度】
  • 【色彩平衡】將整體的顏色往青色與藍(lán)色兩塊區(qū)域拉伸參數(shù)

[優(yōu)化輸出圖像]

 

步驟3:

使用濾鏡>液化工具,選擇左側(cè)工具欄的「褶皺」將重心的畫(huà)面拉出層次距離,在將湖面做變形處理,得到扭曲的畫(huà)面效果。

圖片

 

步驟4:

將文字的字間距拉松并且放置到中心區(qū)域,將英文字母拉出高度形成設(shè)計(jì)元素與文字融合成整體。

[優(yōu)化輸出圖像]

 

步驟5:

復(fù)制畫(huà)面中的一部分進(jìn)行變形處理得到一個(gè)類(lèi)似紙張飄散在空間的效果,放置到文字框架的中間,與白皮書(shū)樂(lè)隊(duì)得到一個(gè)很好的風(fēng)格統(tǒng)一。

[優(yōu)化輸出圖像]

 

步驟6:

用類(lèi)似毛筆字筆刷的字體繪制出清河的歌曲名,再分散到左右兩側(cè),形成一個(gè)版式上的平衡,否則會(huì)顯得兩側(cè)過(guò)于留白過(guò)多,當(dāng)然中心區(qū)域與兩側(cè)之間形成的留白區(qū)域是作為一個(gè)空間進(jìn)行想象。

圖片

———————————————————————-

注意事項(xiàng)

設(shè)計(jì)版式中的留白和文字段的分拆和組合處理對(duì)于banner設(shè)計(jì)來(lái)說(shuō)非常重要,可以很有效的體現(xiàn)設(shè)計(jì)感的美觀。

 

原文地址:修先森撩設(shè)計(jì)

作者:修先森

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》都在聽(tīng)網(wǎng)易云,卻不知道banner設(shè)計(jì)這么好用

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



插畫(huà)教程 | PS 手繪板~日系薔薇花

seo達(dá)人



教程示范:

1.打草稿

首先,選擇一個(gè)硬筆刷打一個(gè)草稿,花花和葉子注意一下疏密大小關(guān)系。

圖片

 

 

圖片

 

2.草稿基礎(chǔ)上再打線稿

這一步依然是選擇一個(gè)硬筆把藤枝畫(huà)出來(lái)。

圖片

 

圖片

 

 

3.畫(huà)花瓣

畫(huà)花花的部分選擇一個(gè)勾線筆刷,用打圈的方式先定好花瓣的位置,然后再去一層一層畫(huà)花瓣。

圖片

我這里的話因?yàn)楣P刷選擇的有點(diǎn)大,所以畫(huà)出來(lái)的線條有點(diǎn)粗,大家在畫(huà)的時(shí)候要把筆刷刷頭縮小一些。因?yàn)檫@里沒(méi)有打草稿,所以我畫(huà)的時(shí)候是邊畫(huà)邊修線稿。

圖片

 

 

4.畫(huà)葉子

葉片也是選擇一個(gè)硬筆筆刷直接去把大型畫(huà)出來(lái)就可以了。注意葉子形狀要好看哦~

圖片

圖片

 

5.上色

在花花線稿圖層下面新建一個(gè)圖層填充顏色,然后再整體把線稿的顏色修改一下。

圖片

這個(gè)地方是我覺(jué)得花枝在整個(gè)疏密大小上還不夠好看,所以在做調(diào)整修改。

圖片

 

6.繼續(xù)上色

接著給葉子上色,選擇一個(gè)透明筆刷刷一些漸變色在葉子上,花花上面也刷刷漸變色。

圖片

 

圖片

 

7.添加陰影

然后開(kāi)始細(xì)化加花花的陰影,直接在有花瓣遮擋的部分添加陰影之后,選擇水彩筆或者涂抹筆刷把剛剛畫(huà)好的陰影涂抹開(kāi)(注意不要過(guò)度涂抹哦!)

圖片

圖片

 

8.勾線

接著把葉子勾一下線,然后稍微細(xì)化一下。

圖片

圖片

最后整體也可以再調(diào)一調(diào)顏色。

圖片

 

那我們的花花就畫(huà)好了,希望對(duì)大家有所幫助,我們下一期再見(jiàn),如果有收獲記得分享給身邊畫(huà)畫(huà)的朋友哦!

 

原文地址:空青肆繪(公眾號(hào))

作者:Tcat

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》插畫(huà)教程 | PS 手繪板~日系薔薇花

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)



關(guān)于toG系統(tǒng)的一些總結(jié)思考

資深UI設(shè)計(jì)者


寫(xiě)在前面


近幾年云計(jì)算和大數(shù)據(jù)的興起,以及政府?dāng)?shù)據(jù)化戰(zhàn)略的升級(jí),G端逐漸出現(xiàn)在大眾視野里,受到各大互聯(lián)網(wǎng)公司、IT廠商的青睞,BAT也在2018年宣布進(jìn)軍G端市場(chǎng),給信息化市場(chǎng)帶來(lái)了新的氣息。


由于工作需要,經(jīng)常會(huì)和客戶(hù)溝通,總結(jié)出來(lái)G端客戶(hù)有一個(gè)特性是,他們大部分為高知人群,從學(xué)歷、社會(huì)地位、經(jīng)濟(jì)收入、家庭背景等都占有相當(dāng)?shù)膬?yōu)勢(shì),長(zhǎng)期在政府部門(mén)工作,他們習(xí)慣于政令形式、層級(jí)森嚴(yán)的環(huán)境,會(huì)有工作任務(wù)固定、重復(fù)率高、失誤率低的需求。


與toB相比,toG產(chǎn)品項(xiàng)目的特點(diǎn)是——


1/ 客戶(hù)業(yè)務(wù)主導(dǎo)性強(qiáng)

調(diào)研對(duì)象政府相關(guān)部門(mén)的領(lǐng)導(dǎo)和科員,對(duì)業(yè)務(wù)主導(dǎo)性強(qiáng)


2/ 改變用戶(hù)行為難

原系統(tǒng)運(yùn)行時(shí)間較長(zhǎng),形成了用戶(hù)習(xí)慣,接受新系統(tǒng)難度較大


3/ 項(xiàng)目工期短

部分toG項(xiàng)目要求工期緊,系統(tǒng)需求調(diào)研、開(kāi)發(fā)時(shí)間較短


4/ 系統(tǒng)應(yīng)用阻力大

涉及原系統(tǒng)、單位內(nèi)部環(huán)境等問(wèn)題,系統(tǒng)使用過(guò)程需要長(zhǎng)期博弈



工作以來(lái)做了不少toB和toG的項(xiàng)目,這兩者相似卻又不同。


【相同點(diǎn)】


  • 都是服務(wù)于用戶(hù),需要站在用戶(hù)的角度分析用戶(hù)需求,為用戶(hù)解決問(wèn)題

  • 都是要把產(chǎn)品和項(xiàng)目做好,兼顧功能的同時(shí),使用戶(hù)體驗(yàn)更好,才能實(shí)現(xiàn)盈利

  • 都是重功能、輕視覺(jué),要符合產(chǎn)品的實(shí)際需求,并有效提升業(yè)務(wù)運(yùn)營(yíng)的效率

  • ...



【不同點(diǎn)】


1/ 面對(duì)的客戶(hù)群體——

toB是面向企業(yè)客戶(hù)的,一般為企業(yè)內(nèi)部人員使用,不向大眾公開(kāi)。

toG是從toB衍生出來(lái)的一種特殊劃分,面向的企業(yè)是政府相關(guān)單位。


2/ 資金來(lái)源——

toB通常由企業(yè)撥出資金

toG通常由國(guó)家財(cái)政撥出預(yù)算,并非完全基于自身的組織或企業(yè)的資金。


3/ 決策機(jī)制——

toB一般為客戶(hù)、公司管理層

toG的話,不同層級(jí)的決策者有不同的考量,比如高層領(lǐng)導(dǎo)希望打造影響力來(lái)獲得政績(jī),中層領(lǐng)導(dǎo)希望體現(xiàn)布局和價(jià)值,小領(lǐng)導(dǎo)希望解決自身申請(qǐng)項(xiàng)目和提升職稱(chēng)等的需求,最終用戶(hù)能否用起來(lái),反而不是很重要。所以解決方案要滿(mǎn)足不同層級(jí)和角色的需求。


4/ 產(chǎn)品需求——

toB滿(mǎn)足剛性需求并滿(mǎn)足一線使用者需求為主

toG非常多的產(chǎn)品功能非剛性,通常會(huì)讓研發(fā)人員難辦,因?yàn)楸容^難證明產(chǎn)品或研發(fā)價(jià)值,但在售前和控標(biāo)階段,大而全的功能又會(huì)成為各產(chǎn)品之間的軍備競(jìng)賽,最后將產(chǎn)品功能補(bǔ)齊,開(kāi)啟同質(zhì)化競(jìng)爭(zhēng)。所以更多的是滿(mǎn)足非剛性、但有利于搞定決策人的、有價(jià)值的功能需求。

5/ 產(chǎn)品標(biāo)準(zhǔn)化——

toB面對(duì)中小型客戶(hù),需求淺、沒(méi)有足夠的談判籌碼,不需要定制化;大客戶(hù)的話,需求更深入,定制化不可避免。

toG比較難實(shí)現(xiàn)標(biāo)準(zhǔn)化,因?yàn)閠oG本質(zhì)上是重政績(jī)輕實(shí)用,這就導(dǎo)致相關(guān)決策人總希望做出不一樣的東西,不僅別人有的我要有,我的還要有特色。所以可以從兩方面入手,一是只做通用層能力,定制化找合作伙伴來(lái)做,保證渠道和底層能力的核心競(jìng)爭(zhēng)力;一是自建定制化團(tuán)隊(duì),專(zhuān)做定制化需求,避免拖累正常的產(chǎn)品迭代。


6/ 視覺(jué)設(shè)計(jì)——

toB一般冷色系居多,整體簡(jiǎn)潔

toG要根據(jù)客戶(hù)喜好來(lái)設(shè)計(jì),最好能體現(xiàn)單位或地方特色;視覺(jué)方面,界面不能過(guò)于簡(jiǎn)單,互聯(lián)網(wǎng)扁平化并不適用,要盡可能充實(shí)界面,但要把握「度」,不能太花哨,一般配色以紅&藍(lán)為主,莊重、大氣;內(nèi)容方面,要遵循國(guó)家相關(guān)要求和當(dāng)下政策環(huán)境,不可隨意亂造,最好是當(dāng)前業(yè)務(wù)測(cè)試內(nèi)容;交互方面,不可有過(guò)多的交互層級(jí)和特效,操作路徑要盡可能短一些,一般是一到兩個(gè)交互動(dòng)作就可以完成任務(wù),要考慮40-50歲人群的體驗(yàn)習(xí)慣。

(這里可參考之前寫(xiě)的一篇文章,詳細(xì)介紹了簡(jiǎn)化操作路徑的案例,一站式解決問(wèn)題,有需要的同學(xué)可以看看,鏈接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html)


7/ 產(chǎn)品迭代——

toB一般有一定的周期

toG產(chǎn)品項(xiàng)目,一般第一次上線之后,客戶(hù)會(huì)提出一系列問(wèn)題,返工重新做的情況也是有的。所以toG很適合MVP(最小可行性產(chǎn)品),因?yàn)檎?wù)用戶(hù)不同層級(jí)的需求和對(duì)需求的認(rèn)知不同,造成了對(duì)統(tǒng)一功能不同用戶(hù)的意見(jiàn)有很大的不同,其實(shí)第一次上線運(yùn)行就相當(dāng)于一次內(nèi)部測(cè)試,返工的時(shí)候不必太挫敗,只要做到核心業(yè)務(wù)流程和業(yè)務(wù)模塊完整即可。接下來(lái)再通過(guò)幾次的測(cè)試、收集意見(jiàn)反饋,討論決定最后的需求,這就是很多toG項(xiàng)目需要去客戶(hù)現(xiàn)場(chǎng)駐場(chǎng)的一個(gè)原因,采用小版本、多迭代、多溝通,及時(shí)解決問(wèn)題。


PS: 關(guān)于去客戶(hù)現(xiàn)場(chǎng),這里想多說(shuō)幾句。

通常情況下,是產(chǎn)品經(jīng)理和開(kāi)發(fā)團(tuán)隊(duì)駐場(chǎng)居多,但有時(shí)候設(shè)計(jì)方面常會(huì)遇到一種情況是,客戶(hù)需求不明確。通過(guò)產(chǎn)品經(jīng)理在客戶(hù)和設(shè)計(jì)師之間來(lái)回轉(zhuǎn)達(dá)消息,效果也并不是很好,這個(gè)時(shí)候就需要設(shè)計(jì)師主動(dòng)爭(zhēng)取機(jī)會(huì)去客戶(hù)現(xiàn)場(chǎng)。有一個(gè)典型的案例是,去年做GAB的項(xiàng)目,需要設(shè)計(jì)一個(gè)登錄界面。設(shè)計(jì)稿做了很多,客戶(hù)一直不滿(mǎn)意,于是我申請(qǐng)到客戶(hù)現(xiàn)場(chǎng)進(jìn)行面對(duì)面溝通,去的時(shí)候會(huì)帶幾個(gè)有代表性的風(fēng)格給客戶(hù)看,先把不想要的風(fēng)格排除掉,然后把握大的設(shè)計(jì)方向。具體設(shè)計(jì)的時(shí)候同步表達(dá)自己的設(shè)計(jì)理念,一步步引導(dǎo)客戶(hù),客戶(hù)中途一步步給意見(jiàn)建議,參與其中,這樣更容易明確需求,客戶(hù)也會(huì)覺(jué)得這是自己與設(shè)計(jì)師共同的成果,會(huì)更容易接受,做出雙方都滿(mǎn)意的設(shè)計(jì),促進(jìn)驗(yàn)收,最后雙贏。

這就是那個(gè)「看起來(lái)平平無(wú)奇 · 但解決了實(shí)際問(wèn)題 · 客戶(hù)很滿(mǎn)意」的登陸界面,如下圖:



8/ ...




很多toG的產(chǎn)品項(xiàng)目上線后造成的客戶(hù)影響不好,這個(gè)時(shí)候要調(diào)整好心態(tài),只要你設(shè)身處地站在用戶(hù)的角度思考,分析場(chǎng)景和需求,用我們的專(zhuān)業(yè)技能來(lái)解決問(wèn)題,當(dāng)你經(jīng)歷各種否定和困難最終得到客戶(hù)的認(rèn)可,這種打磨過(guò)后的成就感真的難以言喻。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來(lái)源:站酷  作者:Alita Joyce


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



競(jìng)品分析的正確方式

資深UI設(shè)計(jì)者



互聯(lián)網(wǎng)行業(yè),競(jìng)品分析已不僅僅是產(chǎn)品經(jīng)理的工作內(nèi)容,對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)系統(tǒng)地分析競(jìng)品并且做出有理有據(jù)地分析已經(jīng)成為必不可少的技能了。


*文章中出現(xiàn)的工具名單以及網(wǎng)址出處,我會(huì)匯總到文章結(jié)尾,供大家學(xué)習(xí)使用。












一、競(jìng)品分析的概念


競(jìng)品分析(Competitive Analysis)一詞最早源于經(jīng)濟(jì)學(xué)領(lǐng)域,是指對(duì)現(xiàn)有的或潛在的競(jìng)爭(zhēng)產(chǎn)品的優(yōu)勢(shì)和劣勢(shì)進(jìn)行分析。


通過(guò)找尋市場(chǎng)上存在競(jìng)爭(zhēng)關(guān)系,高品質(zhì)的產(chǎn)品,把他們進(jìn)行分類(lèi)和對(duì)比,輸出結(jié)論為下一步?jīng)Q策提供正確的方向,它就像是武林中的吸星大法武功秘籍一樣,可以把各家的絕招都變成自己的武功招式。


他山之石,可以攻玉。競(jìng)品分析是一個(gè)長(zhǎng)時(shí)間定期持續(xù)積累,不斷挖掘和分析的一個(gè)過(guò)程,我理解它更像是一種解題公式。設(shè)計(jì)產(chǎn)品最終目標(biāo)就是追溯用戶(hù)需求本身,解決用戶(hù)痛點(diǎn),而競(jìng)品分析就是解決用戶(hù)痛點(diǎn)這道大題的思路方法,就好比要解開(kāi)一道復(fù)雜的數(shù)學(xué)題,需要用到很多公式,而競(jìng)品分析就是一個(gè)環(huán)節(jié)中的一種公式而已。





二、競(jìng)品分析的框架


一套完整的競(jìng)品分析主要由以下七個(gè)模塊組成,因?yàn)槠髽I(yè)資源的原因一般是不需要全部輸出出來(lái)的,需要根據(jù)具體需求進(jìn)行重點(diǎn)分析,并不是每次競(jìng)品分析都是面面俱到的。



正是因?yàn)槠髽I(yè)為了適應(yīng)小步快跑的產(chǎn)品迭代頻率,要求在做競(jìng)品分析時(shí)候都會(huì)盡量地精簡(jiǎn)化,比較有針對(duì)性,所以市面上就出現(xiàn)了三種不同表現(xiàn)形式的競(jìng)品分析,分別是商業(yè)模式分析、交互體驗(yàn)分析視覺(jué)體驗(yàn)分析。




3.1 產(chǎn)品經(jīng)理——商業(yè)模式分析


如果你以為產(chǎn)品經(jīng)理只是拍腦袋想需求的這樣一個(gè)工作者的話,那你就大錯(cuò)特錯(cuò)了,其實(shí)在現(xiàn)實(shí)工作中產(chǎn)品經(jīng)理有一半以上的時(shí)間是做競(jìng)品分析的。


產(chǎn)品經(jīng)理作為架構(gòu)產(chǎn)品核心功能,排期產(chǎn)品迭代頻次的主要負(fù)責(zé)任人,考慮的多數(shù)是產(chǎn)品盈利問(wèn)題。所以產(chǎn)品經(jīng)理關(guān)注的是產(chǎn)品的商業(yè)模式的分析,多有對(duì)產(chǎn)品數(shù)據(jù)層、產(chǎn)品層、用戶(hù)層、盈利方式等維度的分析。





3.2 交互設(shè)計(jì)師——交互體驗(yàn)分析


交互體驗(yàn)的分析,顧名思義,就是對(duì)產(chǎn)品功能場(chǎng)景交互結(jié)構(gòu)的分析。對(duì)于體量小一點(diǎn)的公司會(huì)把這項(xiàng)重任都交付給UI設(shè)計(jì)師了。


交互體驗(yàn)分析可以分為三個(gè)層次的分析分別是

·核心功能:對(duì)產(chǎn)品的基礎(chǔ)交互框架的分析。

·次核心功能:對(duì)產(chǎn)品易用性、提升效率、消除擔(dān)憂(yōu)的功能點(diǎn)的分析。

·輔助功能:對(duì)產(chǎn)品情感化設(shè)計(jì)、特殊狀態(tài)處理、特定使用場(chǎng)景優(yōu)化等交互功能的分析。




3.3 視覺(jué)設(shè)計(jì)師——視覺(jué)體驗(yàn)分析


視覺(jué)體驗(yàn)的分析,一般是由UI設(shè)計(jì)師和運(yùn)營(yíng)設(shè)計(jì)師兩個(gè)職業(yè)完成的工作:


·UI設(shè)計(jì)師:主要是對(duì)比競(jìng)品中圖形、顏色、字體、頁(yè)面布局構(gòu)成、質(zhì)感、動(dòng)態(tài)效果等元素。

·運(yùn)營(yíng)設(shè)計(jì)師:是近幾年剛剛興起的一個(gè)職業(yè),主要負(fù)責(zé)設(shè)計(jì)風(fēng)格、品牌影響力和內(nèi)部運(yùn)營(yíng)渠道的分析。

*有人還會(huì)說(shuō)要分析設(shè)計(jì)規(guī)范,我覺(jué)得沒(méi)必要,因?yàn)椴豢赡芸吹礁?jìng)品的設(shè)計(jì)規(guī)范,另外與其說(shuō)是看設(shè)計(jì)規(guī)范,倒不如說(shuō)對(duì)比頁(yè)面的還原程度。






三、 競(jìng)品分析的2個(gè)視角



3.1 宏觀視角——縱向分析


以宏觀的視角,根據(jù)不同的版本迭代,拉長(zhǎng)戰(zhàn)線進(jìn)行縱向的對(duì)比總結(jié),這類(lèi)做法雖然并不常見(jiàn),但是可以提煉出很多競(jìng)品的設(shè)計(jì)思路,在做產(chǎn)品規(guī)劃起到很好的借鑒作用,常用于產(chǎn)品定位、商業(yè)模式、運(yùn)營(yíng)思路模塊的分析中。




3.2 深入視角——橫向分析


以深入勘探的視角,通過(guò)在不同的產(chǎn)品上相同或者類(lèi)似的功能(這類(lèi)的相同的功能可以是一個(gè)功能或者是一組功能)上作比較。這種橫向的分析方法有助于在相對(duì)關(guān)鍵的場(chǎng)景中找到競(jìng)品的功能亮點(diǎn), 常用于產(chǎn)品體驗(yàn)、產(chǎn)品功能、UI視覺(jué)等模塊的分析比較多。





3.3 競(jìng)品分析&體驗(yàn)報(bào)告的不同


值得一提的是,很多新手在制作競(jìng)品分析的時(shí)候,上面就寫(xiě)幾個(gè)競(jìng)品分析的模板,也有同學(xué)直接上來(lái)就開(kāi)始寫(xiě)文檔,寫(xiě)的和產(chǎn)品體驗(yàn)報(bào)告,傻傻分不清楚。這里我就講解一下兩者區(qū)別。


我舉一個(gè)例子,如果有人問(wèn)“這個(gè)男生怎么樣子,那就這就產(chǎn)品體驗(yàn);你看別人家的男朋友在看看你,這個(gè)就是競(jìng)品分析。”競(jìng)品分析比較強(qiáng)調(diào)“產(chǎn)品功能的對(duì)比”,即指兩款以上產(chǎn)品的差異化;而產(chǎn)品體驗(yàn)則強(qiáng)調(diào)對(duì)“產(chǎn)品體驗(yàn)的深度”。





四、為什么做競(jìng)品分析


隨著互聯(lián)網(wǎng)的發(fā)展,競(jìng)品分析被應(yīng)用在互聯(lián)網(wǎng)產(chǎn)品發(fā)起項(xiàng)目或者改版初期階段,幫助我們摸清產(chǎn)品規(guī)律和對(duì)手弱點(diǎn)的一個(gè)工具。



4.1 競(jìng)品分析的三個(gè)意義


對(duì)于產(chǎn)品經(jīng)理而言:他是避開(kāi)之前產(chǎn)品迭代功能坑的試金石,比如:有一天,老板覺(jué)得我競(jìng)品的這個(gè)功能就不錯(cuò),想把這個(gè)功能弄到我們的產(chǎn)品上,我們沒(méi)有參考行業(yè)里面的競(jìng)品,直接按照老板的意思實(shí)現(xiàn)了,效果應(yīng)該不會(huì)理想。為什么會(huì)這樣,主要是因?yàn)樵谧鲂鹿δ苋绻际桥闹X袋想需求,是很缺乏經(jīng)驗(yàn)的一種表現(xiàn),結(jié)果肯定不會(huì)特別理想。


對(duì)視覺(jué)設(shè)計(jì)師而言:競(jìng)品分析其實(shí)可以作為一個(gè)設(shè)計(jì)決策的依據(jù)和支撐。比如說(shuō)別人在質(zhì)疑你設(shè)計(jì)風(fēng)格或者是顏色選擇,兩方不能很好地達(dá)成一致觀點(diǎn),這個(gè)時(shí)候你就可以說(shuō)我這個(gè)東西是調(diào)查、分析過(guò)的,而不是“我認(rèn)為”這種蒼白無(wú)力的表述,用專(zhuān)業(yè)的水平說(shuō)服對(duì)方目前方案是最優(yōu)方案。


對(duì)整個(gè)團(tuán)隊(duì)而言:競(jìng)品分析可以讓團(tuán)隊(duì)更好地了解這個(gè)行業(yè),了解對(duì)手,了解別人都在做什么,在和競(jìng)爭(zhēng)企業(yè)PK中取得勝利。通過(guò)競(jìng)品分析,確定其自己的產(chǎn)品的優(yōu)勢(shì)和劣勢(shì),并制定有效的產(chǎn)品策略或者設(shè)計(jì)策略。






五、競(jìng)品分析的目的


通過(guò)關(guān)注競(jìng)爭(zhēng)對(duì)手與自己的差異化,分析其設(shè)計(jì)背后的原因,取其精華,去其糟粕,發(fā)現(xiàn)自己的產(chǎn)品問(wèn)題,為產(chǎn)品后期的迭代提供最為合適的方案。










競(jìng)品分析有三個(gè)關(guān)鍵詞發(fā)現(xiàn)——分析——論證。一套完整的競(jìng)品分析要具備了解、目的、競(jìng)品、對(duì)比、分析、總結(jié)六個(gè)步驟。






一、 大視野了解信息


做競(jìng)品分析最忌諱的就是直接找到競(jìng)品進(jìn)行對(duì)比,我們第一步應(yīng)該做的是了解,比如在抖音的競(jìng)品分析中就有對(duì)視頻行業(yè)的分析,如圖:




1.1 了解哪些維度信息


了解行業(yè)信息其實(shí)就是了解我們目前產(chǎn)品的生態(tài)環(huán)境,例如了解整個(gè)行業(yè)背景、競(jìng)品的產(chǎn)品定位、現(xiàn)階段行業(yè)內(nèi)發(fā)生了什么事件、新的功能玩法等等,這些信息都可以了解,這里提供四個(gè)了解信息的維度(以下內(nèi)容不用全寫(xiě),挑幾項(xiàng)重要的即可):


·產(chǎn)業(yè)鏈路圖:行業(yè)中產(chǎn)業(yè)鏈圖,從生產(chǎn)到服務(wù)之間的產(chǎn)業(yè)鏈條之間的關(guān)系是如何進(jìn)行的。

·成員規(guī)模:公司內(nèi)成員的規(guī)模和產(chǎn)品的核心目標(biāo)以及在行業(yè)中的品牌影響力、企業(yè)價(jià)值、slogan等。

·盈利情況:季度、年度的盈利數(shù)值、各條產(chǎn)品線資金重點(diǎn)投入的信息,投資占比。

·用戶(hù)群體:用戶(hù)群體覆蓋面積、市場(chǎng)占有率、運(yùn)營(yíng)盈利模式、產(chǎn)品的注冊(cè)用戶(hù)量。




1.2 搜集信息的兩種渠道


很多人不知道從哪些渠道獲取行業(yè)或者市場(chǎng)的信息,可能在第一個(gè)步驟出了問(wèn)題,這里我推薦兩個(gè)渠道進(jìn)行信息搜集,一個(gè)是用戶(hù)的意見(jiàn)的渠道另一個(gè)是第三方平臺(tái)的行業(yè)信息報(bào)告。


·收集用戶(hù)意見(jiàn)渠道:如qq群、微信群、知乎、 微博、百度論壇(現(xiàn)在用比較少)、用戶(hù)訪談、在做可用性測(cè)試對(duì)用戶(hù)的詢(xún)問(wèn)問(wèn)題、看應(yīng)用商店的評(píng)論等等。


·第三方平臺(tái)信息渠道:這類(lèi)渠道市場(chǎng)上有很多,我推薦幾種如酷傳咨詢(xún)、易觀智庫(kù)、比達(dá)咨詢(xún)、企鵝智庫(kù)等找一些行業(yè)分析報(bào)告,通過(guò)這些報(bào)告了解目前行業(yè)發(fā)展現(xiàn)狀、國(guó)家政策的支持方向、競(jìng)爭(zhēng)對(duì)手占有市場(chǎng)份額等。(下圖大家也可以收藏使用)


在競(jìng)品分析上展示的了解的信息可以不具體,但是一定要有了解的過(guò)程,因?yàn)榱私庑畔⑹歉?jìng)品分析是有科學(xué)依據(jù)的證明,所有不關(guān)注市場(chǎng)趨勢(shì)和行業(yè)現(xiàn)狀的競(jìng)品分析都屬于功能性的競(jìng)品分析,是沒(méi)有說(shuō)服力的。




1.3 呈現(xiàn)形式案例借鑒


通過(guò)行業(yè)和市場(chǎng)的了解,為了梳理一個(gè)對(duì)自己產(chǎn)品和競(jìng)品的認(rèn)知、觀點(diǎn),如下圖這樣表格的形式把自己的認(rèn)知和觀點(diǎn)一一梳理出來(lái)。


或者可以梳理得更加精細(xì)一些,如把產(chǎn)品定位差異化、關(guān)鍵詞、產(chǎn)品特點(diǎn)都梳理出來(lái)。


再或者像是摩拜單車(chē)這種,以產(chǎn)品生命周期為橫向維度把每個(gè)階段的產(chǎn)品當(dāng)時(shí)確定的戰(zhàn)略目標(biāo)都書(shū)寫(xiě)出來(lái)。





二、明確分析目標(biāo)


目的決定一切,明確目標(biāo)也是競(jìng)品分析前最為關(guān)鍵的一個(gè)步,目標(biāo)確立直接關(guān)系到后續(xù)競(jìng)品選擇、分析思路和結(jié)論的輸出。


許同學(xué)在做競(jìng)品分析的時(shí)候會(huì)被其他產(chǎn)品的某一個(gè)功能所吸引,導(dǎo)致后續(xù)在推導(dǎo)結(jié)論的過(guò)程中失去了方向。帶著問(wèn)題,帶著目的去分析體驗(yàn)競(jìng)品,只有這樣才不會(huì)流于表面,學(xué)習(xí)到表象。所以我們?cè)谧龈?jìng)品分析之前就要想好我們想要得到什么,也就是做競(jìng)品分析的目標(biāo)。




2.1 不妨多問(wèn)自己幾個(gè)問(wèn)題


做之前不妨多問(wèn)問(wèn)自己幾個(gè)問(wèn)題,希望通過(guò)競(jìng)品分析,獲得什么?資訊or知識(shí)or行動(dòng)方案?需要通過(guò)競(jìng)品分析抄襲這個(gè)新功能嗎?不做行不行,為什么?這些新功能會(huì)和產(chǎn)品的其他模塊有什么聯(lián)系?等等。當(dāng)我們以自我反省式的問(wèn)法向自己提問(wèn)時(shí)候,并給出答案時(shí)候,這個(gè)答案就是我們做競(jìng)品分析的目標(biāo)了。





2.2 三種常見(jiàn)的目標(biāo)類(lèi)型


在工作中做競(jìng)品分析基本出于這三個(gè)目的,第一次做競(jìng)品分析的同學(xué)可以按照我這三個(gè)目的找出自己項(xiàng)目的競(jìng)品分析目標(biāo):


·了解市場(chǎng)動(dòng)向:如果是“為了了解行業(yè)的動(dòng)向,把確定下一個(gè)季度作為目標(biāo)的話”,那分析側(cè)重點(diǎn)應(yīng)該放在行業(yè)新聞?lì)I(lǐng)域,查閱一些行業(yè)競(jìng)品的日活月活情況,盈利模式等宏觀層面上的信息。


·幫助做出決策:如果“為了敲定新功能是否上線的話作為目標(biāo)的話”,那分析側(cè)重點(diǎn)應(yīng)該圍繞有這個(gè)功能的競(jìng)品的功能對(duì)比上,多思考新功能解決什么問(wèn)題,新功能和其他模塊的功能有什么聯(lián)系,競(jìng)品是怎么做這個(gè)新功能的等。


·借鑒競(jìng)品優(yōu)點(diǎn):如果‘為了確定下一版本采用什么UI風(fēng)格作為目標(biāo)的話”,那分析側(cè)重點(diǎn)應(yīng)該圍繞有視覺(jué)設(shè)計(jì)做得好的競(jìng)品,對(duì)比分析競(jìng)品的UI用了什么設(shè)計(jì)風(fēng)格和設(shè)計(jì)元素等等。




2.3 不同階段目標(biāo)側(cè)重點(diǎn)不同


眾所周知,每個(gè)產(chǎn)品都是具有周期的,分別是進(jìn)入期、成長(zhǎng)期、成熟期、衰退期(衰退期一般不做競(jìng)品分析),產(chǎn)品所處的周期不同那產(chǎn)品所處的階段就不同,進(jìn)去期的產(chǎn)品處于開(kāi)拓階段、成長(zhǎng)期的產(chǎn)品處于成長(zhǎng)階段、成熟期的產(chǎn)品處于防守階段。


接下來(lái)聊一聊產(chǎn)品處于的階段不同,那產(chǎn)品的需要關(guān)注的問(wèn)題不同,競(jìng)品分析的目標(biāo)(內(nèi)容)也會(huì)有所不同。


·產(chǎn)品進(jìn)入期——開(kāi)拓階段:作為一個(gè)行業(yè)的新產(chǎn)品,活下去是最重要的事情,關(guān)注的問(wèn)題應(yīng)該是做什么產(chǎn)品?關(guān)注核心應(yīng)該行業(yè)情況。

比如行業(yè)發(fā)展史、經(jīng)營(yíng)環(huán)境、市場(chǎng)規(guī)模及增長(zhǎng)趨勢(shì)、產(chǎn)品發(fā)展史、目標(biāo)客戶(hù)、業(yè)務(wù)流程、盈利模式等維度分析。


·產(chǎn)品成長(zhǎng)期——成長(zhǎng)階段:在成熟期的產(chǎn)品總會(huì)遇到自身的瓶頸,如何在激烈的市場(chǎng)提出創(chuàng)新性需求,更好地服務(wù)和其他競(jìng)爭(zhēng)對(duì)手拉開(kāi)差距這是成熟期要考慮的問(wèn)題。

關(guān)注的側(cè)重點(diǎn)是我要做出什么樣子的產(chǎn)品?怎么實(shí)現(xiàn)?怎么去運(yùn)營(yíng)推廣?怎么和競(jìng)品拉開(kāi)差距?關(guān)注核心應(yīng)該是競(jìng)爭(zhēng)對(duì)手經(jīng)營(yíng)數(shù)據(jù)和經(jīng)營(yíng)策略,產(chǎn)品功能、用戶(hù)規(guī)模、研發(fā)技術(shù)成本、用戶(hù)體驗(yàn)設(shè)計(jì)等維度。


·產(chǎn)品成熟期——防守階段:經(jīng)歷了成長(zhǎng)期后,可以證明產(chǎn)品在行業(yè)中是有一定的競(jìng)爭(zhēng)優(yōu)勢(shì),產(chǎn)品需要考慮的問(wèn)題就是如何守住原有的用戶(hù),不被其他競(jìng)爭(zhēng)對(duì)手侵占市場(chǎng)份額。

關(guān)注側(cè)重點(diǎn)是市場(chǎng)份額不被吞噬、侵占,關(guān)注核心應(yīng)該是監(jiān)控追趕競(jìng)品的各項(xiàng)指標(biāo)及行動(dòng)舉措等維度。


為什么要講這個(gè),很多時(shí)候我們接到的競(jìng)品分析需求都是不明確的,我們可以結(jié)合自己產(chǎn)品所處的階段,更明確地分析出競(jìng)品分析的目標(biāo)。






三、尋找·劃分 ·挑選競(jìng)品


明確了競(jìng)品分析的目標(biāo),就可以進(jìn)行第三步挑選競(jìng)品了。對(duì)于不知道怎么選擇合適的競(jìng)品的同學(xué)可以用“尋找——?jiǎng)澐帧暨x”這三個(gè)步驟選出最合適的競(jìng)品。





3.1 尋找·競(jìng)品的三種方法


尋找好的競(jìng)品無(wú)外乎就是考察自己的“搜商”能力,這里我推薦三種方法,幫助大家在搜索階段找到競(jìng)品:


·習(xí)慣搜索方法:最常用的辦法就是通過(guò)“關(guān)鍵詞”在瀏覽器上進(jìn)行搜索,注意的是這個(gè)“關(guān)鍵詞”不用太具體,比如自己產(chǎn)品是大學(xué)生咖啡,我在瀏覽器中搜索“大學(xué)咖啡”,是沒(méi)有這類(lèi)競(jìng)品的,那可以用瑞星咖啡來(lái)代替。


·資源搜索方法:除了在瀏覽器進(jìn)行搜索,還可以去應(yīng)用商店或者第三方平臺(tái)的“排行榜”找競(jìng)品,這種方法我經(jīng)常用,因?yàn)榭梢灾庇^地看到各個(gè)維度的競(jìng)品分析數(shù)據(jù)指標(biāo),比較高效。


·推薦搜索方法:就是找公司的產(chǎn)品經(jīng)理詢(xún)問(wèn)相關(guān)競(jìng)品,因?yàn)楣纠锩娴膯T工比較了解公司業(yè)務(wù)說(shuō)出來(lái)的競(jìng)品會(huì)比較有針對(duì)性。也可以上脈脈這種平臺(tái)找行業(yè)大牛,問(wèn)問(wèn)他們的想法,唯一缺點(diǎn)就是在脈脈上等待回復(fù)的時(shí)間比較長(zhǎng),建議提前詢(xún)問(wèn)。


*對(duì)資源搜索方法,我推薦四個(gè)可以查發(fā)布的時(shí)間、排行榜、版本號(hào)、注冊(cè)用戶(hù)量競(jìng)品的網(wǎng)站,分別是酷傳咨詢(xún)、易觀分析、七麥數(shù)據(jù)、it橘子。




3.2 劃分·競(jìng)品的三個(gè)種類(lèi)


找尋到競(jìng)品之后不用全部分析,工作量太大,可以按照競(jìng)爭(zhēng)關(guān)系給競(jìng)品劃分種類(lèi)。競(jìng)品大致分為直接關(guān)系的競(jìng)品(核心競(jìng)品)、間接關(guān)系的競(jìng)品(重要競(jìng)品)和其他關(guān)系(翹楚競(jìng)品)這三類(lèi)。


垂直競(jìng)品:是指市場(chǎng)目標(biāo)方向一致,用戶(hù)群體針對(duì)性較強(qiáng),產(chǎn)品核心功能和用戶(hù)需求相似度較高的產(chǎn)品,如優(yōu)酷和愛(ài)奇藝。


·間接競(jìng)品:是指在功能需求方面互補(bǔ)的產(chǎn)品,用戶(hù)群體高度重合,先階段不是直接市場(chǎng)利益的競(jìng)爭(zhēng)者,但是有可能成為潛在的競(jìng)爭(zhēng)關(guān)系,如大眾點(diǎn)評(píng)和小紅書(shū)。


·翹楚競(jìng)品:是指沒(méi)有直接的用戶(hù)群重合,在市場(chǎng)利益上也沒(méi)有競(jìng)爭(zhēng)關(guān)系,但有高水準(zhǔn)前瞻性的產(chǎn)品,如夸克和躺友。





3.3 挑選·競(jìng)品的二八原則


競(jìng)品的選擇不在量多,而在質(zhì)優(yōu),接下來(lái)的重點(diǎn)在于“挑選”,在這個(gè)環(huán)節(jié)我建議可以通過(guò)二八原則挑選競(jìng)品,其目的就是縮小競(jìng)品范圍,比如在直接關(guān)系中挑選前1到2個(gè)算是頭部的直接競(jìng)品來(lái)分析,然后挑選個(gè)別優(yōu)秀的間接競(jìng)品和翹楚競(jìng)品中比較優(yōu)秀的競(jìng)品。



a 垂直競(jìng)品找相似、差異化設(shè)計(jì)

垂直競(jìng)品中因業(yè)務(wù)線高度吻合所以比較適合對(duì)比相似設(shè)計(jì)與差異化設(shè)計(jì)特點(diǎn)。


·所謂相似化設(shè)計(jì),就是針對(duì)自己產(chǎn)品有相似的功能可以直接借鑒。比如在做優(yōu)酷和愛(ài)奇藝兩款產(chǎn)品對(duì)比發(fā)現(xiàn),視頻的固定比例16:9、彈幕功能都是在最左側(cè),并且都會(huì)對(duì)新注冊(cè)的用戶(hù)進(jìn)行VIP會(huì)員服務(wù)購(gòu)買(mǎi)的指引,反觀自己的產(chǎn)品在做視頻播放功能也可以采用視頻的固定比例16:9,引導(dǎo)VIP服務(wù)購(gòu)買(mǎi)指引的功能,不要出現(xiàn)3:4等其他尺寸影響用戶(hù)的慣性體驗(yàn)。


·差異化的設(shè)計(jì),就是考慮其相同功能,但是產(chǎn)品背景原因不同造成設(shè)計(jì)不同的樣式,比如快手和抖音兩款產(chǎn)品,都有關(guān)注功能,快手關(guān)注后會(huì)有標(biāo)簽展示,而抖音卻沒(méi)有。分析后可以得出結(jié)論是兩款產(chǎn)品的頁(yè)面布局不同,抖音有底部tab欄而快手沒(méi)有,如果抖音關(guān)注后也有“已關(guān)注”的標(biāo)簽展示,加上tab欄的高度有可能會(huì)遮擋住視頻畫(huà)面,影響用戶(hù)直觀感受,我們?cè)谠O(shè)計(jì)類(lèi)似視頻功能時(shí)候,是不是也要考慮一下有tab欄的設(shè)計(jì)樣式和沒(méi)有tab欄如何選擇呢。



b 間接競(jìng)品找相同設(shè)計(jì)

通過(guò)間接競(jìng)爭(zhēng)找相同設(shè)計(jì)和通過(guò)垂直競(jìng)品找相似設(shè)計(jì)有些類(lèi)似。間接競(jìng)品因?yàn)橛脩?hù)群體高度重合,業(yè)務(wù)領(lǐng)域或是核心功能上有類(lèi)似的地方,是找相同的設(shè)計(jì)點(diǎn)很好的辦法,這些共同點(diǎn)都是我們需要借鑒和避免踩坑的地方。


比如大眾點(diǎn)評(píng)/小紅書(shū)都是種草社區(qū)的產(chǎn)品,在首頁(yè)Feed流推薦的功能上,卡片的設(shè)計(jì)上就可以找到相同的設(shè)計(jì)( 圖片比例、內(nèi)容布局、播放圖標(biāo)樣式),降低用戶(hù)的學(xué)習(xí)成本,促成大眾點(diǎn)評(píng)用戶(hù)往小紅書(shū)產(chǎn)品上用戶(hù)流量的轉(zhuǎn)換。



c 翹楚競(jìng)品找靈感設(shè)計(jì)

如果我們?cè)谧龈?jìng)品分析時(shí)候只挑選垂直類(lèi)和間接類(lèi)的產(chǎn)品進(jìn)行分析,最后的結(jié)論只能是和競(jìng)品很像很難走出“抄襲”的困境,在這個(gè)時(shí)候同類(lèi)競(jìng)品就派上用場(chǎng)了。


利用同類(lèi)競(jìng)品可以激發(fā)靈感創(chuàng)造更多可能性,比如自如的設(shè)計(jì)師可能借鑒了喜馬拉雅產(chǎn)品滑動(dòng)Banner背景圖片更換的設(shè)計(jì)亮點(diǎn),再加上騰訊動(dòng)漫對(duì)主題形象破形的處理手法,形成了現(xiàn)在獨(dú)特的自如Banner表現(xiàn)形式。


當(dāng)然他們的設(shè)計(jì)不僅如此,還增加了更有趣的設(shè)計(jì)亮點(diǎn),Banner采取重力感應(yīng)設(shè)計(jì)方式,圖片中的所有元素會(huì)實(shí)現(xiàn)x軸的位移。


當(dāng)手握住手機(jī)左右搖晃的時(shí)候,可以感受Banner元素竟然會(huì)動(dòng),這不失為一種通過(guò)翹楚競(jìng)品找尋靈感的設(shè)計(jì)案例。






四、需要對(duì)比什么


挑選出合適的競(jìng)品之后,我們不可能把全部的競(jìng)品功能都做對(duì)比,一般都會(huì)分析以下四個(gè)維度進(jìn)行對(duì)比功能對(duì)比、價(jià)格對(duì)比、用戶(hù)體驗(yàn)對(duì)比和服務(wù)對(duì)比,如圖:






五、需要分析什么


產(chǎn)品的分析是指對(duì)原始信息進(jìn)行整理、歸納、推理,使信息轉(zhuǎn)化為有價(jià)值結(jié)論的過(guò)程,接下來(lái)我就以網(wǎng)上一個(gè)咸魚(yú)的競(jìng)品分析案例,梳理一個(gè)產(chǎn)品大致可以從以下4個(gè)維度進(jìn)行分析。


a 對(duì)產(chǎn)品屬性的分析

在了解行業(yè)信息那一個(gè)部分,我們講到通過(guò)第三方平臺(tái)查閱對(duì)行業(yè)、市場(chǎng)的研究報(bào)告,這個(gè)時(shí)候就派上了用場(chǎng)。


前面做的行業(yè)了解,都是為了進(jìn)一步對(duì)自家產(chǎn)品的分析,比如我們就可以從七麥數(shù)據(jù)這個(gè)平臺(tái),獲取一些咸魚(yú)和競(jìng)品的數(shù)據(jù)。



b 對(duì)用戶(hù)畫(huà)像的分析

對(duì)用戶(hù)的分析可以從用戶(hù)的基礎(chǔ)屬性和用戶(hù)消費(fèi)這兩個(gè)維度入手,看看彼此的目標(biāo)用戶(hù)的需求上有哪些異同點(diǎn),比如對(duì)核心用戶(hù)的分析(最忠誠(chéng)的用戶(hù)群體是那類(lèi)); 對(duì)主流用戶(hù)的分析(占領(lǐng)最大的用戶(hù)群體是那些); 用戶(hù)構(gòu)成的分析(各類(lèi)用戶(hù)群體的比例構(gòu)成)。


基本屬性:姓名、性別、學(xué)歷、婚姻狀況、興趣愛(ài)好等。

用戶(hù)消費(fèi):從事行業(yè)、職業(yè)、收入水平、設(shè)備型號(hào)。


對(duì)用戶(hù)進(jìn)行分析之后并沒(méi)有結(jié)束,最重要的是得出自己產(chǎn)品的用戶(hù)畫(huà)像,可以參考以下四個(gè)問(wèn)題給予自己分析維度的思考:

·競(jìng)品的目標(biāo)用戶(hù)是誰(shuí)?有哪些關(guān)鍵特征?與自己產(chǎn)品的目標(biāo)用戶(hù)群一致嗎?

·競(jìng)品的用戶(hù)數(shù)據(jù),包括活躍用戶(hù)數(shù)、付費(fèi)用戶(hù)數(shù)、ARPU值等。

·用戶(hù)對(duì)競(jìng)品優(yōu)、劣勢(shì)的看法。

·用戶(hù)喜歡產(chǎn)品的哪些功能?不喜歡產(chǎn)品的那些功能。



d 對(duì)功能對(duì)比的分析

另外就是對(duì)產(chǎn)品功能的對(duì)比分析,可以把競(jìng)品的主要功能路徑畫(huà)出來(lái),思考競(jìng)品為什么做這個(gè)功能,做這個(gè)功能會(huì)給產(chǎn)品帶來(lái)什么好處,把自己認(rèn)為重要的功能列舉出來(lái),再看看哪些平臺(tái)有,哪些平臺(tái)沒(méi)有等等。


對(duì)競(jìng)品功能對(duì)比分析并不是把功能簡(jiǎn)單地羅列出來(lái),最重要的是通過(guò)功能的對(duì)比,幫助梳理出用戶(hù)需求的痛點(diǎn),發(fā)現(xiàn)自己產(chǎn)品的問(wèn)題,尤其對(duì)后續(xù)的改版的方向都可以在對(duì)產(chǎn)品功能的解析中找到答案。



e 對(duì)功能數(shù)據(jù)的分析

對(duì)于數(shù)據(jù)的分析可以理解為對(duì)功能對(duì)比分析的升華,假設(shè)我們提案一個(gè)產(chǎn)品功能是否值得上線,這時(shí)就需要產(chǎn)品的數(shù)據(jù)增長(zhǎng)波動(dòng),來(lái)佐證提案的可行性。


一般在進(jìn)行產(chǎn)品數(shù)據(jù)收集的時(shí)候我們可以把目光鎖定在兩個(gè)數(shù)據(jù)維度——基礎(chǔ)數(shù)據(jù)和趨勢(shì)數(shù)據(jù),我們需要用兩個(gè)維度的數(shù)據(jù)去判斷產(chǎn)品的體量和目前的階段狀態(tài)。


基礎(chǔ)數(shù)據(jù)的范圍有:產(chǎn)品的日活躍用戶(hù)數(shù)字、周/月活躍用戶(hù)數(shù)字、使用時(shí)長(zhǎng)/下載次數(shù)、版本號(hào)/最后更新時(shí)間。

趨勢(shì)數(shù)據(jù)的范圍有:產(chǎn)品在一年內(nèi)的用戶(hù)的增長(zhǎng)情況或者固定周期的總注冊(cè)用戶(hù)量/下載量/有效轉(zhuǎn)化率的趨勢(shì)情況、產(chǎn)品平臺(tái)及官方的排名情況。這里再推薦兩個(gè)針對(duì)查詢(xún)產(chǎn)品數(shù)據(jù)趨勢(shì)比較好用的網(wǎng)站。






六、以終為始復(fù)盤(pán)總結(jié)


以上5步全部做完還是不夠的,最重要的還是競(jìng)品分析的結(jié)論,也就回到了開(kāi)篇那個(gè)問(wèn)題,我們的目的是什么?達(dá)到了嗎?


很多同學(xué)的競(jìng)品分析,就是為了分析而分析,并沒(méi)有總結(jié)出一個(gè)結(jié)論。沒(méi)有結(jié)論前面所有的分析豈不是就沒(méi)有任何的意義, 沒(méi)有結(jié)論的話又按照什么方向去迭代產(chǎn)品升級(jí)改版呢?所以說(shuō)


·一定要有最后的結(jié)論:雖然結(jié)論很主觀但是也要有結(jié)論,沒(méi)有結(jié)論的競(jìng)品分析是展示報(bào)告,是沒(méi)有意義的。

·結(jié)論要具有真實(shí)性:是推導(dǎo)出來(lái)的而不是硬加上去的,要知道一個(gè)錯(cuò)誤的結(jié)論比沒(méi)有結(jié)論的后果更可怕。


文章很長(zhǎng),我們來(lái)做一個(gè)小練習(xí)吧~











有些同學(xué)們?cè)谧龈?jìng)品分析時(shí)候,先找到市面上的最火爆的直接競(jìng)品,把自己的產(chǎn)品與直接競(jìng)品一一對(duì)照,把設(shè)計(jì)亮點(diǎn)直接copy;或者是找到間接競(jìng)品、翹楚競(jìng)品找到與自家產(chǎn)品共有的功能,取一部分粘貼復(fù)制到自己產(chǎn)品身上。


這樣的做法并不是錯(cuò)誤的,只會(huì)讓自己產(chǎn)品與競(jìng)品相似度很高很難讓我們的設(shè)計(jì)改版具有創(chuàng)新性。為什么大家做競(jìng)品分析相似度很高,我認(rèn)為問(wèn)題出在目標(biāo)不夠明確和方法使用不正確這兩點(diǎn)上。


接下來(lái)我就用錘子和釘子的關(guān)系,向同學(xué)們一一說(shuō)明,競(jìng)品分析的十錘法則,希望大家在不同的競(jìng)品分析目標(biāo)面前用對(duì)競(jìng)品分析方法。





一、對(duì)比表格法——最為直觀的對(duì)比工具


釘子:

常用于競(jìng)品的橫向比較,比如想要全面地了解一個(gè)功能的概況。或者是當(dāng)我們思考某個(gè)功能元素是否需要保留,可使用對(duì)比表格法。


錘子:

對(duì)比表格法是競(jìng)品分析最經(jīng)常用到的一種分析方法,衍生的還有打勾比較法、評(píng)分比較法和描述比較法三種形式,常用于視覺(jué)競(jìng)品分析里面。


打勾比較法通過(guò)與競(jìng)品的功能一一對(duì)比打勾,有的話就在表格上對(duì)應(yīng)位置打勾,不存在就空著。用這種方法來(lái)了解自己產(chǎn)品與競(jìng)品在產(chǎn)品功能上的差異,全方位地了解競(jìng)品的功能分布,為自己的產(chǎn)品是否加入這個(gè)功能規(guī)范做參考依據(jù)。


評(píng)分比較法多用于體驗(yàn)設(shè)計(jì)中,把自家產(chǎn)品都有的功能得分列成一行作為一個(gè)標(biāo)準(zhǔn),把競(jìng)品的數(shù)據(jù)依次排列,可以直觀看到與競(jìng)品之間數(shù)據(jù)的差異。


另外描述比較法這種方法比較的是競(jìng)品的功能細(xì)節(jié)、界面的比較等功能,并且跟上自己的觀點(diǎn)和看法,在競(jìng)品中也很常用,如圖。





二、用戶(hù)體驗(yàn)地圖——發(fā)現(xiàn)用戶(hù)痛點(diǎn)的工具


釘子:

當(dāng)自己不知道產(chǎn)品的問(wèn)題是什么?或者想避免自己產(chǎn)品在產(chǎn)品體驗(yàn)上犯同類(lèi)錯(cuò)誤的時(shí)候,可以使用用戶(hù)體驗(yàn)地圖,算是一種尋找產(chǎn)品問(wèn)題、用戶(hù)痛點(diǎn)的方法。


錘子:

用戶(hù)體驗(yàn)地圖的意義是在于分析前模擬用戶(hù)的視角去發(fā)現(xiàn)用戶(hù)整個(gè)行為的痛點(diǎn),發(fā)現(xiàn)用戶(hù)要的是什么,而不是說(shuō)我們想在產(chǎn)品上放什么。


建立多張用戶(hù)體驗(yàn)地圖可以對(duì)比不同的產(chǎn)品在流程中的不同,發(fā)現(xiàn)并記錄流程中的共同的問(wèn)題來(lái)幫助設(shè)計(jì)師避免自己產(chǎn)品犯同類(lèi)錯(cuò)誤。






三、競(jìng)品畫(huà)布—— 最小可行性方案


釘子:

當(dāng)時(shí)間排氣不充足,但是需要快速出一份競(jìng)品分析的場(chǎng)景交付到領(lǐng)導(dǎo)面前的場(chǎng)景時(shí)候,可以采用競(jìng)品畫(huà)布的方法。


錘子:

競(jìng)品畫(huà)布是提前避免不符合領(lǐng)導(dǎo)需求造成返工和浪費(fèi)時(shí)間的工具,比如領(lǐng)導(dǎo)想讓你寫(xiě)一份競(jìng)品分析報(bào)告,先通過(guò)競(jìng)品畫(huà)布快速地寫(xiě)明分析的目標(biāo)、挑選競(jìng)品范圍等信息,再找領(lǐng)導(dǎo)確認(rèn)是否符合領(lǐng)導(dǎo)要求,確認(rèn)和領(lǐng)導(dǎo)所期望的目標(biāo)一致后再投入大量精力做詳細(xì)的競(jìng)品分析。

以下是我在網(wǎng)上找到的制作競(jìng)品畫(huà)布的要點(diǎn),建議大家收藏。

1、競(jìng)品分析的目標(biāo)要明確,最好能夠解決產(chǎn)品當(dāng)前面臨的問(wèn)題。

2、選擇競(jìng)品時(shí)先發(fā)散后收斂,初選階段可以把眼界放寬,避免遺漏重要的競(jìng)品;精選階段要收斂,聚焦到3個(gè)左右的競(jìng)品做重點(diǎn)分析。

3、分析維度取決于分析目標(biāo),最好寫(xiě)出分析維度的選擇理由。

4、搜集競(jìng)品信息時(shí),除了常規(guī)渠道,還可以考慮合法的非正式渠道。找不到關(guān)鍵信息時(shí),可以嘗試在公司內(nèi)部尋求幫助。

5、優(yōu)勢(shì)、劣勢(shì)是企業(yè)內(nèi)部的,最好不超過(guò)5個(gè)。

6、機(jī)會(huì)、威脅是外部環(huán)境,最好不超過(guò)5個(gè)。

7、建議總結(jié)要具體,不要泛泛而談,同時(shí)要考慮可操作性。





四、精益畫(huà)布 ——分析商業(yè)模式的工具


釘子:

精益畫(huà)布應(yīng)用于以下兩個(gè)場(chǎng)景:


·想知道自己產(chǎn)品商業(yè)模式是否完成或者存在紕漏或者是想清楚競(jìng)品在某一個(gè)功能上這樣做在商業(yè)上是怎么想的。

· 想判斷產(chǎn)品的商業(yè)模式、運(yùn)營(yíng)渠道等各個(gè)方面是否一致等問(wèn)題。



錘子:

精益畫(huà)布常用于產(chǎn)品成熟階段的產(chǎn)品,做產(chǎn)品商業(yè)模式分析,建立產(chǎn)品全局觀,檢查產(chǎn)品商業(yè)功能清單來(lái)使用,一般產(chǎn)品經(jīng)理或者是產(chǎn)品戰(zhàn)略者的角色會(huì)使用。比如OFO這種體量比較大的公司會(huì)用到精益畫(huà)布,制定產(chǎn)品戰(zhàn)略,如圖


以下是關(guān)于 精益畫(huà)布的模塊構(gòu)成,需要的自行復(fù)制吧:

1、問(wèn)題:目標(biāo)用戶(hù)最需要解決的3個(gè)問(wèn)題是什么?用戶(hù)有哪些痛點(diǎn)?

2、用戶(hù)細(xì)分:你的目標(biāo)用戶(hù)是誰(shuí)?這些用戶(hù)有哪些關(guān)鍵的特征?

3、獨(dú)特賣(mài)點(diǎn):為什么用戶(hù)要選擇你的產(chǎn)品而不選競(jìng)品?你能以清晰、獨(dú)特、令人印象深刻的方式說(shuō)明為何你的產(chǎn)品更加優(yōu)異或者卓爾不群?jiǎn)幔?

4、解決方案:你能為現(xiàn)存問(wèn)題找到正確的解決方案嗎?

5、渠道:如何將產(chǎn)品或服務(wù)送到用戶(hù)手中,又如何收取用戶(hù)支付的款項(xiàng)?如何與用戶(hù)保持連接?

6、關(guān)鍵指標(biāo):哪些數(shù)據(jù)指標(biāo)能讓你了解產(chǎn)品的真實(shí)狀況?

7、競(jìng)爭(zhēng)壁壘:如何為產(chǎn)品構(gòu)建“護(hù)城河”?無(wú)法被對(duì)手輕易復(fù)制或買(mǎi)去的競(jìng)爭(zhēng)優(yōu)勢(shì)有哪些?

8、成本分析:做這個(gè)產(chǎn)品的直接成本和間接成本都有哪些?

9、收入分析:產(chǎn)品如何賺錢(qián)?收入能大于成本嗎?何時(shí)能達(dá)到盈虧平衡?





五、PEST 模型 ——預(yù)測(cè)市場(chǎng)、大環(huán)境的工具


釘子:

屬于宏觀層面的分析,是一種想要了解市場(chǎng)大環(huán)境、市場(chǎng)趨勢(shì),直觀地找出機(jī)會(huì)與威脅所在的方法。

比如2018年p2p網(wǎng)貸行業(yè)集體暴雷,因?yàn)檎谋O(jiān)管制度的完善,一大批不合法律法規(guī)的p2p平臺(tái)倒閉,預(yù)測(cè)未來(lái)p2p的市場(chǎng)份額將會(huì)減少。再比如,當(dāng)今中國(guó)市場(chǎng)人口老齡化嚴(yán)重,年齡分布不均勻等情況屬于社會(huì)分類(lèi)的范疇,預(yù)測(cè)未來(lái)適老化的產(chǎn)品可能會(huì)成為互聯(lián)網(wǎng)市場(chǎng)下一個(gè)風(fēng)口。


錘子

在一張大白紙上畫(huà)出4個(gè)格子,團(tuán)隊(duì)成員分別代表“政治、經(jīng)濟(jì)、社會(huì)、技術(shù)”盡可能多地羅列關(guān)鍵詞填寫(xiě)到4個(gè)格子中,最后集體投票,每個(gè)格子選出得票較高的3~5個(gè)點(diǎn)子作為PEST分析的結(jié)果。






六、競(jìng)品雷達(dá)圖 ——不同競(jìng)品功能對(duì)比的工具


釘子:

不知道自己產(chǎn)品的競(jìng)品如何分類(lèi)的,常用來(lái)對(duì)比多個(gè)產(chǎn)品或者同一產(chǎn)品的多個(gè)方面的非常好的工具。


錘子:

雷達(dá)圖起源于財(cái)務(wù)狀況的綜合評(píng)估方法,通過(guò)雷達(dá)圖的繪制可展現(xiàn)公司各項(xiàng)財(cái)務(wù)指標(biāo),后被人應(yīng)用于互聯(lián)網(wǎng)行業(yè),稱(chēng)競(jìng)品雷達(dá)圖(又叫蜘蛛圖)。

競(jìng)品雷達(dá)一般選6個(gè)-9個(gè)維度分析,這9個(gè)維度參考尼爾森的十大可用性原則自行組合,進(jìn)行產(chǎn)品分析。





七、四象限矩陣 ——區(qū)分競(jìng)品類(lèi)型的工具


釘子:

對(duì)自己產(chǎn)品的優(yōu)勢(shì)、劣勢(shì)不明確,判斷現(xiàn)有的產(chǎn)品是否需要重新定位,并幫助我們重新找到合理的定位的場(chǎng)景的工具。


錘子:

矩陣分析法是一個(gè)場(chǎng)景的分析法,以四維矩陣的方式分析自己的產(chǎn)品與競(jìng)品的定位、特色或優(yōu)勢(shì),最大的好處就是可以梳理清楚市場(chǎng)中存在的空白點(diǎn)。以下圖為例,在嚴(yán)肅和親民這個(gè)范圍領(lǐng)域就是沒(méi)有這個(gè)產(chǎn)品,企業(yè)是否可以在戰(zhàn)略層面上投入開(kāi)發(fā)成本,開(kāi)發(fā)這個(gè)空白領(lǐng)域的產(chǎn)品,搶占市場(chǎng)。





八、SWOT 模型 ——制定戰(zhàn)略規(guī)劃的工具


釘子:

SWOT是一種基于四個(gè)要素的戰(zhàn)略規(guī)劃方法,與PEST模型不同的是這個(gè)SWOT模型不僅可以幫助梳理產(chǎn)品優(yōu)勢(shì)和劣勢(shì),還可以制定企業(yè)的競(jìng)爭(zhēng)策略和未來(lái)開(kāi)發(fā)的計(jì)劃規(guī)劃,是一種既可以分析產(chǎn)品/公司內(nèi)部(優(yōu)勢(shì)、劣勢(shì))外部(機(jī)會(huì)、威脅)競(jìng)爭(zhēng)環(huán)境的工具。


錘子:

S、W 指產(chǎn)品內(nèi)部有哪些優(yōu)劣勢(shì),O、T 指的是產(chǎn)品外部市場(chǎng)存在哪些機(jī)會(huì)和威脅。簡(jiǎn)單地來(lái)說(shuō)就是將與研究對(duì)象密切相關(guān)的各種主要內(nèi)部?jī)?yōu)勢(shì)、劣勢(shì)和外部的機(jī)會(huì)和威脅,通過(guò)四個(gè)格矩陣排列出來(lái),加以分析,從中得出一系列相應(yīng)的結(jié)論,而這個(gè)結(jié)論是帶有一定決策性和預(yù)測(cè)性。


我自己使用的時(shí)候會(huì)把這個(gè)方法放到競(jìng)品分析和總結(jié)的那部分,比如在競(jìng)品分析前半部分把宏觀層分析完、競(jìng)品的功能亮點(diǎn)對(duì)比完,最后進(jìn)行輸出總結(jié)歸類(lèi)到產(chǎn)品的優(yōu)勢(shì)和劣勢(shì),再預(yù)警一下現(xiàn)階段可能會(huì)出現(xiàn)的問(wèn)題,預(yù)測(cè)一下以后的機(jī)會(huì)。





九、五層九緯度法


釘子:

對(duì)于做競(jìng)品分析一點(diǎn)頭緒都沒(méi)有的同學(xué),可以使用這個(gè)五層九緯度法(也叫用戶(hù)體驗(yàn)五要素)。


錘子:

一套完整的競(jìng)品分析其實(shí)和做產(chǎn)品思路一樣,將復(fù)雜的事物抽象成分層的模型,能讓人直觀、清晰地獲取其內(nèi)在的邏輯,算是比較常規(guī)的方法了。





十、可用性測(cè)試 &用戶(hù)訪談


釘子:

使用場(chǎng)景分為兩個(gè),第一個(gè)是針對(duì)競(jìng)品分析前不知道競(jìng)品哪個(gè)功能來(lái)說(shuō)對(duì)用戶(hù)意義重要;第二個(gè)是競(jìng)品分析后驗(yàn)證自己產(chǎn)品中某個(gè)功能改版是否成功。


錘子:

可用性測(cè)試的意義在于如果不用競(jìng)品的產(chǎn)品,自己可能不能真實(shí)地感受到競(jìng)品好在哪里,就不能真實(shí)找到競(jìng)品在體驗(yàn)層面上值得我們借鑒的功能是什么。它除了可以還原競(jìng)品功能對(duì)用戶(hù)真實(shí)的體驗(yàn)之外,更是一個(gè)驗(yàn)證功能改版是否成功的工具。之前講到了數(shù)據(jù)是有欺騙性,數(shù)據(jù)會(huì)受環(huán)境因素所影響,有些數(shù)據(jù)是代替不了可用性測(cè)試和用戶(hù)訪談的結(jié)論的真實(shí)性。










通過(guò)以上的講解,我相信大家對(duì)“競(jìng)品分析”會(huì)有一個(gè)更為深入的認(rèn)知,雖然大家較為清晰地知道了競(jìng)品分析的概念、制作流程以及方法,但是在我實(shí)際工作中經(jīng)常出現(xiàn)以下9個(gè)問(wèn)題,值得注意。




一、要注重平時(shí)積累


人的認(rèn)知是有局限性的,尤其是接受一個(gè)不太熟悉的觀點(diǎn)時(shí)候,就好比你讓雕刻工刻一個(gè)馬的扶手,因?yàn)槊枋霾磺宄膯?wèn)題,他可能會(huì)刻成一個(gè)驢的扶手。


我們?cè)谡撟C一個(gè)觀點(diǎn)最好就是舉例論證,這樣才能做到有理有據(jù),所以要注重平時(shí)的素材積累,有一定的知識(shí)儲(chǔ)備,做到觀點(diǎn)都有資料可以佐證避免假大空,不會(huì)出現(xiàn)低級(jí)錯(cuò)誤。最好把競(jìng)品分析當(dāng)作一個(gè)產(chǎn)品來(lái)做,用產(chǎn)品思維(有邏輯性)做競(jìng)品分析。






二、不要定過(guò)大的目標(biāo)


競(jìng)品分析絕對(duì)不是說(shuō)找不同,競(jìng)品分析方法千千萬(wàn),無(wú)論是在分析前,還是分析后,跟著目標(biāo)走才能得出有價(jià)值的結(jié)論,最終做到產(chǎn)品設(shè)計(jì)人無(wú)我有,人有我優(yōu)的終極目標(biāo)。我梳理了兩類(lèi)目標(biāo),供大家思考自己做競(jìng)品分析的目標(biāo)。


現(xiàn)在互聯(lián)網(wǎng)公司的發(fā)展相當(dāng)快,已經(jīng)沒(méi)有那么多時(shí)間讓我們做大而全的競(jìng)品分析,對(duì)于初創(chuàng)公司來(lái)講,有可能做完競(jìng)品分析公司都倒閉的尷尬局面。所以,小而精地分析、跟緊產(chǎn)品、業(yè)務(wù)的腳步才是企業(yè)需要的。





三、分清楚給誰(shuí)看


知己知彼,百戰(zhàn)不殆。分清楚給誰(shuí)看也是容易犯的一個(gè)錯(cuò)誤,最好要問(wèn)清楚最終呈現(xiàn)給誰(shuí)看,因?yàn)橥隆㈩I(lǐng)導(dǎo)、老板的角度不同所以需要看的切入點(diǎn)就不同。


·老板的角度:競(jìng)品在行業(yè)中的影響力、目前行業(yè)的經(jīng)營(yíng)狀況如何、自己產(chǎn)品的發(fā)展方向怎么樣,競(jìng)爭(zhēng)對(duì)手的經(jīng)營(yíng)狀況怎么樣。


·團(tuán)隊(duì)/領(lǐng)導(dǎo)的角度:競(jìng)品的產(chǎn)品功能、交互設(shè)計(jì)、視覺(jué)的優(yōu)點(diǎn)和缺點(diǎn)是什么;有沒(méi)有創(chuàng)新性的產(chǎn)品體驗(yàn)點(diǎn)可以應(yīng)用到產(chǎn)品迭代中去,決策是采納A方案啊,還是采納B方案或者是還有更好的C方案。


·自己/同事的角度:為了更好地執(zhí)行領(lǐng)導(dǎo)們定的目標(biāo),自己或者團(tuán)隊(duì)內(nèi)部協(xié)調(diào)的同時(shí),需要用到什么方法把任務(wù)完成好。





四、多用事實(shí)佐證結(jié)論


分析是一個(gè)嚴(yán)謹(jǐn)?shù)倪^(guò)程,得有理有據(jù)讓人信服。在分析報(bào)告里面,發(fā)現(xiàn)很多分析的數(shù)據(jù)沒(méi)有標(biāo)明來(lái)源,可信度真的不高。設(shè)想如果是把這樣一份數(shù)據(jù)來(lái)源不明確的報(bào)告遞到一個(gè)企業(yè)決策者辦公桌上,他敢作出決策嗎?我看很懸。


所以在分析報(bào)告中,事實(shí)一定是嚴(yán)謹(jǐn)可信的,是市場(chǎng)上認(rèn)可的,這樣通過(guò)分析得出來(lái)的觀點(diǎn)才會(huì)不帶有主觀臆測(cè)的。






五、注重產(chǎn)品深度&上下文邏輯


正所謂,學(xué)我者生,像我者死!在與競(jìng)品進(jìn)行比較階段的時(shí)候,并不是什么情況下去模仿照搬,應(yīng)該把關(guān)注點(diǎn)放到競(jìng)品這么做的背后原因。一個(gè)上層建筑的高度和樣式必定由其底層地基決定,產(chǎn)品也是如此,雖然是一個(gè)簡(jiǎn)單的功能,也可以從數(shù)據(jù)、產(chǎn)品定位、用戶(hù)群體、經(jīng)營(yíng)策略等層面,多注重自己產(chǎn)品與競(jìng)品的對(duì)比,挖掘產(chǎn)品策略背后的原因,為后期迭代思考我們是否可以去優(yōu)化做準(zhǔn)備。


另外一點(diǎn)我想說(shuō)的是注重邏輯,有些競(jìng)品分析一會(huì)兒分析市場(chǎng)大環(huán)境,一會(huì)分析產(chǎn)品核心功能,看似面面俱到,但是分析的主線思路不清晰,缺乏邏輯關(guān)系,形式歸于表面。





六、選擇最為合適的分析方法


做競(jìng)品分析常規(guī)的方式是先挑選3-5個(gè)競(jìng)品,圍繞用戶(hù)體驗(yàn)要素(戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層)對(duì)競(jìng)品展開(kāi)分析,我知道大家都是受了ajax之父jesse james garrett的經(jīng)典之作《用戶(hù)體驗(yàn)要素:以用戶(hù)為中心的產(chǎn)品設(shè)計(jì)》的影響,我最開(kāi)始入行的時(shí)候也是我的啟蒙書(shū)。


但是大家要清楚“由于產(chǎn)品不同、受眾用戶(hù)不同、產(chǎn)品階段不同、分析目標(biāo)不同競(jìng)品分析最終呈現(xiàn)的樣子就會(huì)不同,”如果大家都用這五層去寫(xiě)的話,避免不了有套模板的嫌疑。


這里列舉一個(gè)不恰當(dāng)?shù)睦樱?015年時(shí)候互聯(lián)網(wǎng)很流行“互聯(lián)網(wǎng)+傳統(tǒng)行業(yè)”的創(chuàng)業(yè)概念,但互聯(lián)網(wǎng)+并不是適合所有行業(yè),要認(rèn)清自己產(chǎn)品適合“互聯(lián)網(wǎng)+傳統(tǒng)行業(yè)還是傳統(tǒng)行業(yè)+互聯(lián)網(wǎng)”,了解清楚自己產(chǎn)品的特長(zhǎng),清楚誰(shuí)主導(dǎo)誰(shuí)的,處于什么產(chǎn)品階段后再做決策,不要跟著主流輿論裹挾,盲目做選擇。


除了我所講的通過(guò)適合競(jìng)品的方法來(lái)審視自己產(chǎn)品之外,還有一點(diǎn)值得大家注意的就是設(shè)計(jì)方案的合理性,尤其是在UI設(shè)計(jì)當(dāng)中,并不能保證設(shè)計(jì)方案是一直對(duì)的,只能說(shuō)在某一個(gè)產(chǎn)品階段或者應(yīng)對(duì)某一個(gè)問(wèn)題設(shè)計(jì)方案是最好的方案,更為精準(zhǔn)的說(shuō)法是設(shè)計(jì)方案沒(méi)有絕對(duì)的正確和錯(cuò)誤,只能說(shuō)那個(gè)設(shè)計(jì)方案更合適當(dāng)前這個(gè)需求。





七、形式與內(nèi)容同樣重要


我看了很多競(jìng)品分析,內(nèi)容深度很深,視角也很獨(dú)特,觀點(diǎn)也很鮮明有價(jià)值,只是其表現(xiàn)形式太難讓人閱讀下去。我們是設(shè)計(jì)師,競(jìng)品分析的結(jié)論固然重要,但是精心包裝才能更好地傳遞競(jìng)品分析的價(jià)值本身,這也是體現(xiàn)我們基礎(chǔ)設(shè)計(jì)師價(jià)值的一部分。


設(shè)計(jì)領(lǐng)域中的眼球理論也是如此,一份好的競(jìng)品分析,務(wù)必在視覺(jué)包裝上下點(diǎn)功夫,通過(guò)合適的邏輯結(jié)構(gòu)進(jìn)行梳理,可以讓你的觀點(diǎn)更易于理解并接受,配上適當(dāng)?shù)膱D文制作成PPT,保證文字信息可以高速清晰地進(jìn)行傳達(dá),讓讀者第一眼就有繼續(xù)閱讀的興趣。正所謂好的內(nèi)容+好的設(shè)計(jì)形式=易于別人接受,才能發(fā)揮最大的效用。





八、務(wù)必要自我檢查


細(xì)節(jié)決定成敗,很多同學(xué)按照流程步驟一一分析了,得出了結(jié)論也是真實(shí)有效的,認(rèn)為競(jìng)品分析就完成了。


我們的目的不是交付100分的答卷,而是交付100+的答卷,自我檢查是提高自己的能力的好方法,如果工作周期允許的情況下,還是要從頭到尾,把競(jìng)品分析查缺補(bǔ)漏,這樣也利于發(fā)現(xiàn)更有價(jià)值的信息。





九、持續(xù)跟蹤,保持節(jié)奏


競(jìng)品分析不是一次性的事情,它對(duì)團(tuán)隊(duì)來(lái)說(shuō)是每時(shí)每刻的,因?yàn)槭袌?chǎng)和需求是不停地更新,做競(jìng)品分析也是一個(gè)了解市場(chǎng)了解產(chǎn)品的手段,需要持續(xù)更新的。可以說(shuō)它是貫穿整個(gè)產(chǎn)品迭代的始終的,把握節(jié)奏可以讓你更從容地應(yīng)對(duì)市場(chǎng)的變化,建議至少半年更新一次。










總結(jié)


競(jìng)品分析在不同的階段能給我們的產(chǎn)品帶來(lái)不同的效益,學(xué)習(xí)好競(jìng)品分析也能避免走很多的彎路。


最后,感謝文章內(nèi)容案例的作者,寫(xiě)這篇文章著實(shí)不容易 ,查閱了大約40個(gè)競(jìng)品分析,但編成系統(tǒng)方法寫(xiě)出來(lái)真的很耗心神。


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來(lái)源:站酷  作者:斜杠7濕兄

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


從易讀性和易操作性?xún)纱蠓矫妫绾巫龊帽砀裨O(shè)計(jì)

資深UI設(shè)計(jì)者

導(dǎo)語(yǔ):提起中后臺(tái),除了高效、靈活和強(qiáng)大之外,不可忽視的還有它的海量數(shù)據(jù)。海量數(shù)據(jù)的篩選與呈現(xiàn),直接決定決策人員的效率高低。本文作者主要是結(jié)合自己在實(shí)際工作中遇到的表格設(shè)計(jì)問(wèn)題,針對(duì)Web端數(shù)據(jù)呈現(xiàn)方式之一,表格的設(shè)計(jì)進(jìn)行探討。

表格,是一種常見(jiàn)的信息組織整理手段。常用來(lái)展示、保存、對(duì)比分析、排序、篩選 、歸納等,是最清晰、高效的數(shù)據(jù)展現(xiàn)形式之一,由內(nèi)、外兩部分組成。

  • 內(nèi)部:由表頭、表體、表尾共3部分組成;
  • 外部:由篩選區(qū)域、操作按鈕區(qū)、分頁(yè)區(qū)共3大類(lèi)組成。

從易讀性和易操作性?xún)纱蠓矫妫棠阕龊帽砀裨O(shè)計(jì)

說(shuō)完表格的組成,接下來(lái)將會(huì)從易讀性和易操作性?xún)蓚€(gè)方面來(lái)分析下表格設(shè)計(jì)。

易讀性

1. 行與列

表格的組成,也可以看作行與列的自由組合,這種組合賦予了表格多樣性的特點(diǎn)。行與列構(gòu)成了單元格的長(zhǎng)與高,不同的長(zhǎng)高會(huì)有疏密之分,充實(shí)與透氣之感。

B端中后臺(tái)通常會(huì)對(duì)應(yīng)不同的角色及場(chǎng)景需求,根據(jù)目的及信息主體的不同,讓用戶(hù)根據(jù)自己的需求來(lái)定義表格的展示列及列的順序,也可以通過(guò)行與列的顯隱變化,來(lái)更好的滿(mǎn)足信息的傳達(dá)。

但需要注意的是系統(tǒng)應(yīng)記住用戶(hù)上一次的自定義列設(shè)置,減少用戶(hù)重復(fù)操作。對(duì)于列的選擇,應(yīng)盡量減少列的數(shù)量,既要展示用戶(hù)必要信息,又要避免出現(xiàn)用戶(hù)無(wú)關(guān)數(shù)據(jù),以免信息冗余,影響信息閱讀效率性。對(duì)于用戶(hù)需要的非重點(diǎn)、輔助性信息可以通過(guò)入口提供的方式來(lái)解決。

默認(rèn)排序,應(yīng)從用戶(hù)目的出發(fā),遵循用戶(hù)查看數(shù)據(jù)的習(xí)慣,尊重?cái)?shù)據(jù)之間的關(guān)聯(lián)性,設(shè)計(jì)用戶(hù)查看、操作數(shù)據(jù)的路徑,而非隨機(jī)排列。

從易讀性和易操作性?xún)纱蠓矫妫棠阕龊帽砀裨O(shè)計(jì)

2. 數(shù)據(jù)展示

B端中后臺(tái)中的表格展示的數(shù)據(jù)多且雜,這就要為用戶(hù)先一步對(duì)數(shù)據(jù)進(jìn)行梳理歸納,提高用戶(hù)獲取信息速度。

為便于對(duì)數(shù)據(jù)進(jìn)行對(duì)比分析,一般需要在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、平均值、總計(jì)等數(shù)據(jù)處理結(jié)果,減少用戶(hù)二次加工數(shù)據(jù)的過(guò)程,提升用戶(hù)閱讀信息的效率。

數(shù)據(jù)匯總展示

在表頭或者表尾分別提供了總計(jì)的數(shù)據(jù),方便用戶(hù)進(jìn)行快速查閱。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

數(shù)據(jù)對(duì)齊展示

常用對(duì)齊方式有數(shù)字右對(duì)齊,文字左對(duì)齊,混合型文本左對(duì)齊,列標(biāo)簽的對(duì)齊方式與數(shù)據(jù)的對(duì)齊方式保持一致。這樣能形成的視覺(jué)邊界線,便于視線的流動(dòng),從而快速提升數(shù)據(jù)的瀏覽、對(duì)比效率。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

空數(shù)據(jù)展示

B端中后臺(tái)數(shù)據(jù)類(lèi)型較多,對(duì)于空數(shù)據(jù),切忌不要與數(shù)據(jù)為“0”進(jìn)行混淆,對(duì)于空數(shù)據(jù)通用做法是用“-”表示,而不是什么都不顯示,會(huì)讓用戶(hù)誤以為是沒(méi)有數(shù)據(jù)還是“0”數(shù)據(jù)。

最好做法就是為空數(shù)據(jù)做出釋義,可以加在“列標(biāo)簽”的名詞解釋文案中。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

數(shù)據(jù)的關(guān)鍵屬性標(biāo)識(shí)展示

對(duì)于用戶(hù)重點(diǎn)關(guān)注的數(shù)據(jù)狀態(tài)、上升和下降等,可以用符號(hào)進(jìn)行標(biāo)識(shí),幫助用戶(hù)快速定位到目標(biāo)信息。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

3. 固定表頭、固定列和固定分頁(yè)

在有限屏幕內(nèi),有限的內(nèi)容展示區(qū)域內(nèi),閱讀豐富且繁多的表格時(shí),用戶(hù)不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息。

固定表頭、固定列和固定分頁(yè),能夠讓用戶(hù)明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。

固定表頭

在固定的小區(qū)域內(nèi)滾動(dòng)會(huì)非常局促,而且區(qū)域滾動(dòng)和全屏滾動(dòng)同時(shí)存在時(shí)體驗(yàn)也很不好。固定表頭可幫助用戶(hù)識(shí)別信息,在全屏滾動(dòng)上去后固定表頭,有利于用戶(hù)向下翻屏?xí)r能夠便利的閱讀數(shù)據(jù)。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

固定列

固定列的內(nèi)容可視業(yè)務(wù)及目標(biāo)用戶(hù)的訴求而定,一般采用方法是固定比較重要信息,方便用戶(hù)進(jìn)行數(shù)據(jù)定位與對(duì)比,最好可以讓用戶(hù)自定義,滿(mǎn)足不同用戶(hù)訴求。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

固定分頁(yè)

分頁(yè)處理目前有放在上部、下部或上下部均有,需要根據(jù)場(chǎng)景來(lái)選擇。分頁(yè)固定目的是為了省去用戶(hù)需要翻到頂部或底部進(jìn)行操作的麻煩。

特別是可以自定義每頁(yè)的數(shù)量和需要橫向拖動(dòng)數(shù)據(jù)查看,這就需要把分頁(yè)固定在底部,方便用戶(hù)橫向拖動(dòng)滑條查看信息和進(jìn)行翻頁(yè)操作。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

4. 分頁(yè)

在Web端中的表格,涉及到跨頁(yè)的數(shù)據(jù)操作時(shí),分頁(yè)會(huì)帶來(lái)不便。

但往往受限于數(shù)據(jù)加載的壓力,這種情況在大廠中尤其突出,加載數(shù)據(jù)都是億量級(jí)別的,在Web端和手機(jī)端都需要實(shí)時(shí)下載數(shù)據(jù)的終端,我們通常做法就是提供分頁(yè)展示數(shù)據(jù)來(lái)緩解服務(wù)器的壓力。

表格中的的數(shù)據(jù)內(nèi)容超過(guò)一定“數(shù)量”時(shí)需要提供翻頁(yè)功能,而這個(gè)“數(shù)量”是由表頭的數(shù)據(jù)的高度、表格的行間距、目標(biāo)用戶(hù)群體的顯示設(shè)備的配置等因素來(lái)決定。

原則上整張表不要超過(guò)一屏,考慮到每個(gè)用戶(hù)的使用習(xí)慣,我們一般提供可以讓用戶(hù)自定義每頁(yè)的顯示的數(shù)量,相比于跨屏翻頁(yè)而言,向下滾屏?xí)憷哺蠟g覽信息路徑。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

5. 全屏查閱

表格全屏展示是非常有必要的:

  • 特別是在小屏設(shè)備上,全屏模式下可以直接屏蔽掉左側(cè)導(dǎo)航欄、上方的報(bào)表區(qū)域和頂部的導(dǎo)航欄,可為用戶(hù)提供更多可視區(qū)域。
  • 在大量數(shù)據(jù)前面,可為用戶(hù)提供沉浸式閱讀體驗(yàn),讓用戶(hù)更加專(zhuān)注,可減少與表格無(wú)關(guān)的視覺(jué)干擾。
  • 用戶(hù)可通過(guò)ESC鍵或關(guān)閉按鈕隨時(shí)退出全屏模式,操作成本低。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

易操作性

1. 篩選

在大量的表格信息中,如果沒(méi)有篩選查找信息簡(jiǎn)直猶如大海撈針,而表格跟篩選是不分家的。

說(shuō)到表格一定會(huì)說(shuō)到篩選,篩選也就是數(shù)據(jù)過(guò)濾,常在數(shù)據(jù)量較大的場(chǎng)景中使用,其目的是通過(guò)關(guān)鍵字搜索和條件篩選能夠幫助用戶(hù)快速的找到所需要的信息內(nèi)容。

對(duì)于表格外部篩選,如果有時(shí)間會(huì)單獨(dú)出一篇詳情介紹。這里不展開(kāi)詳細(xì)說(shuō)。

篩選根據(jù)篩選功能的位置不同,可分為表外篩選和表內(nèi)篩選。

  • 表外篩選:篩選功能位于表格上方,與表內(nèi)篩選的不同之處是過(guò)濾值可以不限“表格列”的內(nèi)容、可單次進(jìn)行多列的交叉篩選。
  • 表內(nèi)篩選:篩選功能位于表格內(nèi),也就是放置在列標(biāo)簽上的篩選,受“表格列”內(nèi)容的限制,僅能做單次單列的篩選。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

2. 數(shù)據(jù)選擇

在信息列數(shù)較多的情況下,數(shù)據(jù)的選擇就尤為重要。當(dāng)鼠標(biāo)指針懸停在表格列或行時(shí),給予視覺(jué)狀態(tài)的變化提示,可以讓用戶(hù)捕捉到所在的位置,而不至于視覺(jué)上的錯(cuò)行,能夠降低人的心理壓力和增加掌控感。根據(jù)數(shù)據(jù)選擇功能分為單個(gè)選擇和批量選擇。

單個(gè)選擇

鼠標(biāo)指針懸停在整行時(shí)應(yīng)與默認(rèn)態(tài)有所區(qū)分。當(dāng)標(biāo)識(shí)選中行或選中行的數(shù)量,選中行可操作的命令狀態(tài)須同步,明示當(dāng)前行可操作的命令或反饋當(dāng)前已選行的數(shù)量。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

批量選擇

提供選擇當(dāng)前頁(yè)部分行、選擇全部行、取消選擇全部行三種功能;狀態(tài)反饋分為半選態(tài) 、未選態(tài)、全選態(tài)共三種。

  • 當(dāng)用戶(hù)未進(jìn)行選擇時(shí),表頭的選擇框的狀態(tài)是未選態(tài);
  • 當(dāng)用戶(hù)選擇一行數(shù)據(jù)時(shí),此時(shí)表頭的選擇框的狀態(tài)切換為半選態(tài),同時(shí)反饋此行的數(shù)量;
  • 當(dāng)用戶(hù)在表頭勾選“當(dāng)前頁(yè)所有行”時(shí),表頭的選擇框切換成了全選態(tài),且給出了選擇“全部所有行”的操作。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

3. 數(shù)據(jù)操作

對(duì)于數(shù)據(jù)的操作,主要針對(duì)表格內(nèi)部來(lái)說(shuō)。表格操作大體可分為顯性操作和隱形操作。

顯性操作

指操作選項(xiàng)顯示在行內(nèi),優(yōu)點(diǎn)是明顯直觀,可以根據(jù)列表上的信息做出快速的判斷并且高頻發(fā)生的操作。

適用列數(shù)較少的列表。但弊端是信息過(guò)載,尤其是列數(shù)較多,可展示列數(shù)會(huì)隨操作數(shù)增加而減少,同時(shí)誤操作率較高。對(duì)于危險(xiǎn)系數(shù)比較高的操作,也不建議采用這種設(shè)計(jì)。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

隱性操作

當(dāng)鼠標(biāo)懸?;螯c(diǎn)擊時(shí)才顯示其他低頻、高危的操作選項(xiàng),優(yōu)點(diǎn)是界面簡(jiǎn)潔明快,信息密度低,可以幫助頁(yè)面突出更加重要的信息,可減輕空間壓力,減少干擾。

弊端是增加用戶(hù)的點(diǎn)擊次數(shù)和提高了操作門(mén)檻。列數(shù)較少的表格不適用隱性操作。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

4. 數(shù)據(jù)下載

為方便用戶(hù)對(duì)數(shù)據(jù)進(jìn)行再次整合分析、統(tǒng)計(jì)分析等,可提供數(shù)據(jù)下載功能及多種下載格式。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

5. 空表

對(duì)于B端中后臺(tái)來(lái)說(shuō),表格顯示最多就是兩種情況:一種就是表格有數(shù)據(jù),這種最容易解決,有數(shù)據(jù)就顯示相應(yīng)數(shù)據(jù);還有一種表格是沒(méi)有數(shù)據(jù),也就是空表狀態(tài),這也是讓很多設(shè)計(jì)師容易忽略掉的頁(yè)面。

空表分兩種:可創(chuàng)建和純展示

可創(chuàng)建

是用戶(hù)有創(chuàng)建訴求,數(shù)據(jù)是由用戶(hù)或系統(tǒng)產(chǎn)生的,可創(chuàng)建分兩種:

  • 比較輕量的方式,是直接示意用戶(hù)創(chuàng)建數(shù)據(jù),無(wú)須給出表格樣式。
  • 在表格的空白內(nèi)容處加入創(chuàng)建的快捷入口,引導(dǎo)用戶(hù)新建。

從易讀性和易操作性?xún)纱蠓矫妫棠阕龊帽砀裨O(shè)計(jì)

純展示

沒(méi)有創(chuàng)建訴求的,數(shù)據(jù)是系統(tǒng)產(chǎn)生的,不是由用戶(hù)創(chuàng)建的,直接告之暫無(wú)數(shù)據(jù)。

從易讀性和易操作性?xún)纱蠓矫?,教你做好表格設(shè)計(jì)

寫(xiě)在最后

看上去平淡無(wú)奇的數(shù)據(jù)表格,其實(shí)是非常重要的,通過(guò)合理的組織架構(gòu)和呈現(xiàn)方式,使原本枯燥的數(shù)據(jù)呈現(xiàn)出生命力,這是一件很神奇的事。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來(lái)源:優(yōu)設(shè)  作者:WOWdesign


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

資深UI設(shè)計(jì)者

為什么了解網(wǎng)頁(yè)布局很重要?網(wǎng)頁(yè)布局在很大程度上決定了網(wǎng)站的訪問(wèn)者將如何與網(wǎng)頁(yè)內(nèi)容進(jìn)行交互。

這里將介紹一些常見(jiàn)的網(wǎng)頁(yè)布局形式,例如卡片式、分屏布局、網(wǎng)格布局……一起來(lái)看看吧!

卡片式網(wǎng)頁(yè)布局

卡片式布局被Pinterest、臉書(shū)和推特等網(wǎng)站所使用,它非常適合在新聞網(wǎng)站和博客上使用,因?yàn)榭ㄆ讲季挚梢栽陧?yè)面上放置大量?jī)?nèi)容,同時(shí)又保持每部分內(nèi)容各不相同。

卡片式布局主要有兩種形式:

網(wǎng)頁(yè)中每個(gè)卡片的尺寸相同,卡片的排列非常標(biāo)準(zhǔn),例如Dribbble的網(wǎng)頁(yè)布局;

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

使用不同尺寸的卡片組成頁(yè)面的布局,卡片間沒(méi)有固定的排序,例如Pinterest、花瓣的頁(yè)面布局。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

分屏布局

當(dāng)兩個(gè)元素在頁(yè)面上具有相等的權(quán)重時(shí),分屏布局是一種流行的設(shè)計(jì)選擇,并且通常用于文本和圖像都需要突出顯示的設(shè)計(jì)中。

分屏設(shè)計(jì)特別適合電子商務(wù)網(wǎng)站上的產(chǎn)品頁(yè)面。產(chǎn)品圖片需要在頁(yè)面上突出顯示,但價(jià)格、規(guī)格、購(gòu)物車(chē)按鈕等信息也要顯示。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

大標(biāo)題

隨著移動(dòng)設(shè)計(jì)的盛行,大標(biāo)題排版變得流行起來(lái)。大號(hào)字體在標(biāo)題中特別流行,在一些網(wǎng)站的正文中也能看到。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

較大的文本更具可讀性,可以改善使用體驗(yàn)。另外它還提供了強(qiáng)大的視覺(jué)效果,因此這種布局在極簡(jiǎn)主義設(shè)計(jì)中特別受歡迎。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

個(gè)性化推薦

個(gè)性化算法推薦可以根據(jù)每個(gè)人的喜好量身定制數(shù)字體驗(yàn)。人工智能技術(shù)的發(fā)展讓算法變得更易用,能精確分析用戶(hù)的喜好。

根據(jù)用戶(hù)之前的訂閱習(xí)慣,Netflix可以為用戶(hù)個(gè)性化推薦他們最有可能觀看的電影。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

像Medium這樣的網(wǎng)站會(huì)基于用戶(hù)以前閱讀和喜歡的內(nèi)容,向他們展示很多同類(lèi)型的文章。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

網(wǎng)格布局

網(wǎng)格為設(shè)計(jì)提了視覺(jué)上的平秩序感,以一種平衡且有組織的方式呈現(xiàn)內(nèi)容,使內(nèi)容更易于人們使用。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

在網(wǎng)格設(shè)計(jì)中使用不同大小的內(nèi)容可以在保持內(nèi)容有序的同時(shí)增加視覺(jué)吸引力。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

雜志版式布局

雜志和期刊的布局方式影響了網(wǎng)絡(luò)雜志的版面設(shè)計(jì)。這些網(wǎng)頁(yè)布局很適合有大量?jī)?nèi)容的網(wǎng)站,尤其是每天都需要更新內(nèi)容的網(wǎng)站。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

單頁(yè)布局

單頁(yè)布局將網(wǎng)站的所有主要內(nèi)容放在一個(gè)網(wǎng)頁(yè)上,通過(guò)滾動(dòng)完成導(dǎo)航,有時(shí)還使用視差滾動(dòng)效果。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

對(duì)于內(nèi)容稀疏的網(wǎng)站,單頁(yè)布局是一個(gè)很好的解決方案。同時(shí)它也是內(nèi)容敘事的完美選擇,比如交互式兒童讀物。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

F型&Z型布局

F型和Z型布局是指用戶(hù)的視線如何在頁(yè)面上移動(dòng),即用戶(hù)如何掃描內(nèi)容。F型布局有非常明確的視覺(jué)層次結(jié)構(gòu),因此適合內(nèi)容更多的頁(yè)面。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

Z型布局將視線吸引到頂部,然后沿對(duì)角線方向向下延伸到底部,然后再次延伸。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

不對(duì)稱(chēng)布局

在設(shè)計(jì)中,不對(duì)稱(chēng)會(huì)產(chǎn)生動(dòng)態(tài)化的視覺(jué)沖擊力。大多數(shù)情況下不對(duì)稱(chēng)是由于圖像和文本間無(wú)法平衡而造成的。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

由于不對(duì)稱(chēng)會(huì)產(chǎn)生動(dòng)態(tài)的、充滿(mǎn)活力的視覺(jué)印象,因此對(duì)那些想要傳達(dá)這種形象的品牌來(lái)說(shuō)是非常有用的。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

簡(jiǎn)潔布局

這種布局的優(yōu)點(diǎn)在于完全專(zhuān)注于內(nèi)容,沒(méi)有視覺(jué)上的混亂。

干凈簡(jiǎn)單的布局幾乎適用于任何類(lèi)型的網(wǎng)站。許多優(yōu)雅的網(wǎng)站都可以被認(rèn)為是“簡(jiǎn)潔的”,無(wú)論它們包含什么設(shè)計(jì)形式。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

導(dǎo)航標(biāo)簽

導(dǎo)航標(biāo)簽適合用于包含少數(shù)項(xiàng)目的菜單,否則導(dǎo)航會(huì)顯得很混亂。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

輪播

輪播內(nèi)容包含圖像和文本,通常出現(xiàn)在網(wǎng)站的頂部,用來(lái)突出顯示內(nèi)容。

用一篇文章,帶你了解12種常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)

總結(jié)

好的網(wǎng)頁(yè)設(shè)計(jì)具有很強(qiáng)的適應(yīng)性并且對(duì)用戶(hù)來(lái)說(shuō)始終是友好的。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來(lái)源:優(yōu)設(shè)  作者:Clip設(shè)計(jì)夾

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



日歷

鏈接

個(gè)人資料

存檔