首頁(yè)

設(shè)計(jì)模式 | 多級(jí)撤銷(xiāo) Multilevel Undo:讓用戶(hù)更有安全感

ui設(shè)計(jì)分享達(dá)人

What 是什么

簡(jiǎn)介:「多級(jí)撤銷(xiāo)」允許用戶(hù)撤銷(xiāo)一系列的操作。用戶(hù)操作的順序能被系統(tǒng)捕獲記錄,根據(jù)原始執(zhí)行順序,一步步返回歷史操作。


例子:用 Sketch 畫(huà)設(shè)計(jì)稿時(shí),可以多級(jí)撤銷(xiāo),允許用戶(hù)返回上一步或更早的歷史操作


undefined


Why 為什么

具備多級(jí)撤銷(xiāo)的功能可以讓用戶(hù)覺(jué)得能夠?qū)缑孢M(jìn)行安全探索,不必?fù)?dān)心造成某些不可取消的修改。例如,如果單擊了錯(cuò)誤的菜單項(xiàng),不需要進(jìn)行復(fù)雜的恢復(fù),不需要退回到此前保存的文件版本,或者尋求系統(tǒng)管理員的幫助。


多級(jí)撤銷(xiāo)也讓專(zhuān)家用戶(hù)更快更容易地探索工作路徑。舉例而言,一名 Photoshop 用戶(hù)可能會(huì)在一個(gè)圖片上執(zhí)行一系列的濾鏡操作,研究那些結(jié)果看是不是他喜歡的,然后再逐一撤銷(xiāo),回到起點(diǎn)。


When 什么時(shí)候使用

需要用戶(hù)頻繁在單一頁(yè)面上交互的用戶(hù)界面,相比普通的網(wǎng)站或者移動(dòng)端 APP,交互操作要復(fù)雜得多。例如:文件編輯器、圖形建模工具、郵件閱讀器、數(shù)據(jù)庫(kù)軟件、寫(xiě)作工具、編程環(huán)境等。該功能能使用戶(hù)撤銷(xiāo)一系列操作而非單一個(gè)操作。


使用條件:該軟件的單一界面交互比較復(fù)雜和頻繁


How 如何使用

軟件首先需要一個(gè)強(qiáng)大的模型,這個(gè)模型是關(guān)于動(dòng)作是什么樣的——?jiǎng)幼鞯拿Q(chēng)、動(dòng)作所關(guān)聯(lián)的對(duì)象,以及如何返回歷史動(dòng)作。


決定哪些動(dòng)作需要成為可取消的操作。如果動(dòng)作可以改變一個(gè)文件或者數(shù)據(jù)庫(kù)——任何將是永久性存在的對(duì)象——都應(yīng)該是可取消的動(dòng)作。具體而言,在大部分應(yīng)用里,人們期望能撤銷(xiāo)下面這些改變:

  • 文檔或表單的文字輸入

  • 數(shù)據(jù)庫(kù)

  • 圖片或畫(huà)布的修改

  • 布局上的變化位置、大小、順序或分組在圖像應(yīng)用程序中

  • 文件操作,例如刪除或修改

  • 對(duì)象的創(chuàng)建、刪除和重新組織,例如郵件消息或電子表單的列

  • 任何剪切、復(fù)制、粘貼操作


下面這些修改基本上是不可撤銷(xiāo)的:

  • 文本或?qū)ο筮x擇

  • 窗口或頁(yè)面之間的導(dǎo)航

  • 鼠標(biāo)光標(biāo)和文本光標(biāo)的定位

  • 滾動(dòng)條的位置

  • 窗口或面板的位置和尺寸

  • 在一個(gè)未提交的對(duì)話(huà)框或模態(tài)對(duì)話(huà)框上的改動(dòng)


展現(xiàn)方式

然后,決定以哪種方式把撤銷(xiāo)操作展現(xiàn)給用戶(hù)。大部分桌面應(yīng)用程序會(huì)把“撤銷(xiāo)/重復(fù)”的菜單項(xiàng)放在“編輯”菜單下。撤銷(xiāo)通常也關(guān)聯(lián)到Ctrl+Z 或類(lèi)似的快捷鍵。


Example 案例

案例一:Microsoft OneNote 筆記編輯器

用戶(hù)需求:撤銷(xiāo)文字輸入

Microsoft Onenote  文檔編輯器擋在輸入過(guò)程中需要修改可以用快捷鍵 COM + Z 撤銷(xiāo),或者使用編輯菜單下的按鈕幫助用戶(hù)返回上一步。

undefined


案例二:Photoshop 多級(jí)撤銷(xiāo)

用戶(hù)需求:回到歷史操作記錄

Photoshop 同樣可以采用快捷鍵和菜單按鈕返回歷史操作,由于 PS 的操作修改繁瑣且復(fù)雜,所以為用戶(hù)提供了歷史記錄面板,用戶(hù)也可以點(diǎn)擊歷史操作步驟回到想要的歷史操作記錄。

undefined


案例三:美圖秀秀圖像處理 App

用戶(hù)需求: 撤銷(xiāo)回到上幾步圖像處理結(jié)果

使用美圖秀秀等圖片處理 App 對(duì)圖像進(jìn)行美化操作時(shí),常常會(huì)返回查看對(duì)比不同的效果,或者操作錯(cuò)誤時(shí)返回到前幾步,頂部的撤銷(xiāo)按鈕可以讓用戶(hù)回到任何歷史操作步驟。

undefined

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

文章來(lái)源:站酷 作者:Ant_Design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)www.yvirxh.cn )是一家專(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ù)



為何深色模式看起來(lái)不自然?

ui設(shè)計(jì)分享達(dá)人

在過(guò)去的幾年中,深色模式一直是用戶(hù)最期待的一個(gè)功能。你可以自由切換你喜歡的模式來(lái)適應(yīng)當(dāng)前的場(chǎng)景,iOS和Android也都在2019年布局了系統(tǒng)級(jí)的深色模式,深色模式可獲得出色的視覺(jué)體驗(yàn),尤其是在弱光環(huán)境中……有助于你專(zhuān)注地開(kāi)展工作,因?yàn)閮?nèi)容會(huì)較為顯眼,而顏色加深的控制項(xiàng)和窗口則會(huì)隱入背景之中。但真是這樣嗎,或者只是一種實(shí)際上弊大于利的操作? 


文章內(nèi)容:


1、什么是深色模式

2、從可用性角度看深色模式

3、為什么深色模式看起來(lái)不自然

4、從設(shè)計(jì)角度看深色模式

5、結(jié)論


什么是深色模式?


雖然各種軟件界面的色調(diào)和顏色會(huì)有所不同,但是對(duì)深色模式的處理方式都是在深色背景上顯示明亮文本和界面元素的配色方案。相比之下,在淺色背景上顯示深色文本和界面元素的配色方案,在這里我們稱(chēng)之為淺色模式。


而事實(shí)上,深色模式比淺色模式早了幾十年。在其最初的階段,深色模式并不是一種有意的解決方案,而僅僅是當(dāng)時(shí)計(jì)算顯示設(shè)備是陰極射線(xiàn)管(CRT),且只能顯示單色的顯示,屏幕看上去就是黑的,黑底白字或者黑底綠字就是計(jì)算機(jī)行業(yè)的早期狀態(tài)。直到1980年代彩色顯示器發(fā)明后,微軟視窗系統(tǒng)上線(xiàn)之后,黑底顯示才退出主流。蘋(píng)果在1984年推出“麥金塔”個(gè)人電腦,第一次發(fā)布采用圖形用戶(hù)界面,由此開(kāi)啟了計(jì)算機(jī)屏幕白底顯示的主流之路。


           

          

 ibm 5151單色監(jiān)視器


淺色模式出現(xiàn)的確切時(shí)間很難確定,但可以追溯到施樂(lè)Parc圖形用戶(hù)界面,它也極大地影響了早期蘋(píng)果的“麥金塔”和其他操作系統(tǒng),該界面使用了以白色背景為主的深色文本和界面元素。它與顯示技術(shù)的進(jìn)步和現(xiàn)代圖形用戶(hù)界面的出現(xiàn)密切相關(guān)。這種能夠顯示色彩的且更先進(jìn)的RGB CRT顯示器拉開(kāi)了淺色模式的序幕。


                      

1973年的施樂(lè)Alto是最早使用輕型接口模式的計(jì)算機(jī)之一


從可用性角度看深色模式


深色模式的實(shí)用性有多少,每個(gè)人看法也不一樣。盡管深色模式的界面可能不像淺色模式那樣觀感清晰,但深色模式的界面卻具有一定的魅力,可以讓你聯(lián)想到新穎,高端,精致,神秘,力量,奢華這些詞。但是,黑色也是一種會(huì)引起人們強(qiáng)烈的情感一個(gè)顏色,并且在過(guò)度使用時(shí)很容易使人無(wú)法承受。


2019年9月,蘋(píng)果公司上線(xiàn)深色模式(Dark Model)時(shí),在官網(wǎng)上如是宣傳道。從iPhone到Mac,當(dāng)庫(kù)克決定在蘋(píng)果公司幾乎所有產(chǎn)品上線(xiàn)深色模式、甚至要求所有在AppStore上架的應(yīng)用都必須兼容深色模式時(shí),安卓陣營(yíng)的谷歌、華為、三星等頭部公司也紛紛在其最新手機(jī)中推出了深色模式,相應(yīng)地從WhatsApp到微信等全球主流的應(yīng)用也都推出了深色模式。



            


但是,想要獲得良好的深色模式是相對(duì)比較難的。一方面,深色模式迫使放大瞳孔來(lái)捕獲必要的視覺(jué)信息,從而導(dǎo)致整體清晰度的降低。而同時(shí)界面中高亮的部分又迫使我們的瞳孔縮小去適應(yīng)亮度,以便提高清晰度。這也就能理解為什么白色背景上的黑色文本在你的眼睛中通常會(huì)顯得更清晰的原因。


             

擴(kuò)大的瞳孔讓光線(xiàn)更多,但感覺(jué)到的銳度受到損害



行業(yè)對(duì)深色模式追逐的群羊效應(yīng),也進(jìn)一步加劇、放大了一個(gè)見(jiàn)解:深色模式對(duì)眼睛更友好更健康!


但是,事實(shí)并非如此。對(duì)于一些有散光的人來(lái)說(shuō),在某種程度上深色模式對(duì)他們的眼睛來(lái)說(shuō)更糟糕,深色模式比淺色模式更友好更健康的科學(xué)仍有待討論。斯坦福·拜爾斯眼科研究所的眼科專(zhuān)家對(duì)此表示:“鑒于文獻(xiàn)中的數(shù)據(jù),我認(rèn)為深色模式對(duì)眼睛沒(méi)有任何的友好和健康。” 這種深色模式對(duì)眼睛疲勞和潛在的眼睛健康的影響時(shí),使用時(shí)間可能比設(shè)備的亮度或亮度更重要。


根據(jù)美國(guó)驗(yàn)光協(xié)會(huì)的說(shuō)法稱(chēng),大多數(shù)人的眼睛在某種程度上都患有散光,但通常不會(huì)引起注意。據(jù)美國(guó)眼科學(xué)院統(tǒng)計(jì),每三個(gè)美國(guó)人中就一個(gè)存在散光的情況,1.5億美國(guó)人需要佩戴眼鏡來(lái)矯正視力;香港理工大學(xué)針對(duì)2700多人的臨床檢測(cè)發(fā)現(xiàn),在21歲的30歲的香港人中,近40%以上患有100度以上散光。


一起看下面的說(shuō)明性圖像。即使你有完美的視覺(jué),你也很可能在黑色背景上看到白色文字周?chē)墓鈺灐?



            

淺色模式與深色模式


如果增加文字并降低文字的大小,這種效果可能會(huì)更強(qiáng):


             


右邊的圖像你應(yīng)該會(huì)看到更多的光暈,如果你有散光癥狀,深色模式可能會(huì)讓你看屏幕更費(fèi)勁。在深色模式下,虹膜打開(kāi)以接收更多的光,并且瞳孔的變形在眼睛上產(chǎn)生了更加模糊的焦點(diǎn),因此,當(dāng)你在深色屏幕上看到淺色文本時(shí),其邊緣似乎滲入黑色背景,也就是所謂的“光暈效果”。雖然深色模式可能更適合夜晚等弱光環(huán)境下使用,但不一定能幫助更好地閱讀,對(duì)于散光患者來(lái)說(shuō),可能還會(huì)加劇視疲勞。


當(dāng)然,從實(shí)用性上講,深色模式也有它的好處,深色模式利用OLED屏幕在純黑的背景下不發(fā)光的特性,確實(shí)能有效的省電,讓你的電子設(shè)備續(xù)航上提升很大,這也是很多人一直在追求深色模式的一個(gè)重要原因,只要手機(jī)續(xù)航強(qiáng)比啥都重要!這也可能是蘋(píng)果公司決定在幾乎所有產(chǎn)品上線(xiàn)深色模式的一個(gè)原因。


另外深色模式更有利于給用戶(hù)營(yíng)造一種沉浸體驗(yàn),對(duì)于視覺(jué)娛樂(lè)應(yīng)用尤為如此。當(dāng)你想突出顯示特定類(lèi)型的內(nèi)容時(shí),深色模式會(huì)特別有用。豆瓣、數(shù)字尾巴、網(wǎng)易云音樂(lè)是我常用的幾個(gè)軟件,它們都已經(jīng)適配了深色模式。在這種模式下你的目光會(huì)更加注意到電影的海報(bào)、數(shù)碼產(chǎn)品和充滿(mǎn)活力的音樂(lè)專(zhuān)輯上。



             

豆瓣、數(shù)字尾巴、網(wǎng)易云音樂(lè)的深色模式


為什么深色模式看起來(lái)不自然


一是由于我們?nèi)四X的組織結(jié)構(gòu)造成的,從多年來(lái)的多項(xiàng)科學(xué)研究和調(diào)查得出的結(jié)論是,從物種進(jìn)化來(lái)看,人類(lèi)99%的時(shí)間都是在白天中活動(dòng),人腦更傾向于在淺的背景上顯示深色的圖像。所以無(wú)論白天還是黑夜,淺色的背景都可以讓你更快地專(zhuān)注于顯示的元素,而深色的背景則使其難以辨別文字和視覺(jué)界面元素,從而影響你的閱讀效果并最終使你的眼睛疲勞。 其實(shí)從世界各地多個(gè)洞穴中發(fā)現(xiàn)的史前壁畫(huà)也能說(shuō)明為什么我們傾向于喜歡淺色模式。



            

追逐獵物的獅子,法國(guó)Chauvet Cave,約公元前30,000-28,000


德國(guó)帕紹大學(xué)曾經(jīng)做過(guò)一次測(cè)試。在該研究要求參與者閱讀屏幕上的正極性(白色背景上的黑色文本)或負(fù)極性(黑色背景上的白色文本)的文本。隨后,參與測(cè)試的人員會(huì)執(zhí)行基本的校對(duì)任務(wù),例如查找拼寫(xiě)或語(yǔ)法錯(cuò)誤。研究人員還測(cè)量了每種模式下參與者的閱讀速度。結(jié)果是所有參與者在正極性條件下的表現(xiàn)都會(huì)更好,他們檢查出更多的錯(cuò)誤以及閱讀的速度更快。


                       

可讀性差異


另一個(gè)學(xué)習(xí)發(fā)現(xiàn)正極性對(duì)于在顯示器上讀取小文本特別有利。人腦具有更快的可讀性,更喜歡在光線(xiàn)背景下顯示的深色文本和物體。


二是由于含有大量藍(lán)光的光源會(huì)使我們眼睛不舒服,當(dāng)我們談?wù)撈聊粚?duì)眼睛的潛在破壞性影響時(shí),我們通常是在談?wù)摗八{(lán)光”,這是由短、高能量波長(zhǎng)構(gòu)成的光譜的一部分。研究發(fā)現(xiàn)藍(lán)光可能是導(dǎo)致眼睛疲勞的一個(gè)因素,但指出長(zhǎng)時(shí)間不眨眼的干眼也是導(dǎo)致眼睛疲勞的一個(gè)更嚴(yán)重的原因,當(dāng)然也有是因?yàn)樽煮w太小,以及散光這樣的原因。


當(dāng)我們身處暗室或是在黃昏或夜晚時(shí),眼睛會(huì)切換成不同的視覺(jué)模式;在弱光環(huán)境下,人眼會(huì)從對(duì)綠色敏感變成對(duì)高能量藍(lán)光敏感,這代表我們?cè)诖罅康慕邮账{(lán)光,因此對(duì)刺眼強(qiáng)光的敏感度會(huì)增強(qiáng)。這類(lèi)情形對(duì)駕駛?cè)硕圆⒉荒吧?dāng)他們被來(lái)車(chē)車(chē)頭燈的強(qiáng)光照射時(shí),特別是使用現(xiàn)代化氙氣燈或LED頭燈的車(chē)輛,可能會(huì)暫時(shí)喪失視力。


           

平板電腦、智能手機(jī)和其他電子顯示屏,不僅改變了我們所接觸的光譜,也使我們的視覺(jué)行為發(fā)生轉(zhuǎn)變。我們必須意識(shí)到,我們現(xiàn)在用于“近距離”視物的時(shí)間比以往多得多,這通常是因?yàn)楸尘傲炼忍邓隆?


在德國(guó)光學(xué)公司蔡司官方網(wǎng)站上,對(duì)于藍(lán)光也作一分為二的評(píng)價(jià):“好處是當(dāng)外界環(huán)境變亮也就是藍(lán)光較多時(shí),身體便釋放出血清素—它是其中一種快樂(lè)荷爾蒙以及皮質(zhì)醇—這是一種壓力荷爾蒙。這兩種荷爾蒙能讓我們保持清醒,富有活力,同時(shí)也應(yīng)用于冬季抑郁和失眠的治療中。但過(guò)多的紫外光和藍(lán)紫光可能會(huì)對(duì)肉眼造成損傷,除了可能導(dǎo)致令人難受的結(jié)膜和角膜發(fā)炎,也可能會(huì)破壞眼睛的晶狀體(例如白內(nèi)障),尤其是傷害我們的視網(wǎng)膜(黃斑病變)?!?


從設(shè)計(jì)角度看深色模式


在WWDC 2019大會(huì)上,蘋(píng)果宣布了iOS13的深色模式功能,在令人興奮之余,作為設(shè)計(jì)師和開(kāi)發(fā)人員,我們應(yīng)該考慮的該如何去實(shí)現(xiàn)它。蘋(píng)果和安卓已經(jīng)發(fā)布了為應(yīng)用程序設(shè)計(jì)深色模式的設(shè)計(jì)指南。當(dāng)然,沒(méi)有硬性規(guī)定要求遵循他們提供的設(shè)計(jì)指南,這些只是指導(dǎo)原則。


             

由于Material Design設(shè)計(jì)語(yǔ)言的原因,投影的占比是非常大的。在淺色模式下還好,但這不太適用于深色模式,因?yàn)樯钌尘吧系暮谏幱霸谝曈X(jué)上不容易察覺(jué),為此安卓還提供了在深色模式下不同層級(jí)的卡片與投影上的參考。


            

根據(jù)設(shè)計(jì)文檔來(lái)看,iOS背景為純黑色,色值為#000000,Google 則更喜歡深灰色,色值為#121212。


            

通過(guò)提供的設(shè)計(jì)指南,我們可以輕易上手來(lái)設(shè)計(jì)和開(kāi)發(fā)我們的軟件,但要注意的是深色模式并不是簡(jiǎn)單的與淺色模式顏色對(duì)調(diào),必須為所有的元素進(jìn)行單獨(dú)配色。


            

淺色模式下的白色不會(huì)在深色模式下轉(zhuǎn)換成純黑色


這樣也就能理解為什么很多軟件并沒(méi)有全部去適配新的深色模式,一方面使用場(chǎng)景決定的,另一方面就是深色模式并不是簡(jiǎn)單地?fù)Q個(gè)換個(gè)顏色就行,很多元素需要重新設(shè)計(jì)和開(kāi)發(fā)。


結(jié)論:該選擇哪種模式


在去年的 WWDC 大會(huì)上,蘋(píng)果人機(jī)交互團(tuán)隊(duì)的設(shè)計(jì)師曾對(duì) macOS 的深色模式使用場(chǎng)景做了進(jìn)一步的解釋。

他指出,只有閱讀瀏覽或是內(nèi)容創(chuàng)作型 App 才需要長(zhǎng)期啟用深色模式,比如文字或代碼編輯。它們會(huì)借助黑底白字的高對(duì)比度特性來(lái)讓用戶(hù)視線(xiàn)保持集中,其它大部分軟件對(duì)于深色模式的需求反而并不強(qiáng)烈。


或則你可以通過(guò)使用場(chǎng)景去選擇,在明亮的環(huán)境中使用淺色模式,在昏暗的環(huán)境中使用深色模式。



            

但是在大多數(shù)情況下,真正幫助你避免眼睛疲勞的是不要整天盯著屏幕,而不是糾結(jié)到底用深色還是淺色模式。

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

文章來(lái)源:站酷 作者:羅小盒
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)www.yvirxh.cn )是一家專(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ù)


延遲增強(qiáng)——視頻信息流廣告的提轉(zhuǎn)秘訣

ui設(shè)計(jì)分享達(dá)人

伴隨短視頻平臺(tái)的崛起,移動(dòng)互聯(lián)網(wǎng)的主流內(nèi)容消費(fèi)形態(tài)向短視頻視聽(tīng)語(yǔ)言轉(zhuǎn)變,視頻信息流廣告的時(shí)代已經(jīng)來(lái)臨。如何通過(guò)設(shè)計(jì)提升轉(zhuǎn)化,是視頻信息流廣告所面臨的挑戰(zhàn)。


為了提升廣告轉(zhuǎn)化效果,我們結(jié)合實(shí)際項(xiàng)目,通過(guò)大量的實(shí)驗(yàn)與思考,梳理并總結(jié)了一套適用于視頻信息流廣告的轉(zhuǎn)化組件呈現(xiàn)原則,我們將其命名為“延遲增強(qiáng)”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類(lèi)常見(jiàn)信息流場(chǎng)景。


///

延遲增強(qiáng)是什么?


視頻信息流廣告有三要素:內(nèi)容、框架、轉(zhuǎn)化組件。其中廣告內(nèi)容來(lái)源于廣告主投放的物料,基礎(chǔ)框架需對(duì)齊宿主保持一致性,所以?xún)H有承載轉(zhuǎn)化信息和行為的轉(zhuǎn)化組件,是可設(shè)計(jì)部分。 


“延遲增強(qiáng)”就是針對(duì)“轉(zhuǎn)化組件”的一種伴隨視頻內(nèi)容分階段/漸進(jìn)式的呈現(xiàn)方式。它由消費(fèi)者決策時(shí)的理想心理動(dòng)線(xiàn),結(jié)合廣告行為推導(dǎo)得出,并經(jīng)過(guò)實(shí)驗(yàn)驗(yàn)證了其對(duì)于轉(zhuǎn)化提升的有效性。


“延遲增強(qiáng)”包括兩個(gè)階段:1.廣告展現(xiàn)初始階段,延遲展現(xiàn)廣告意圖,通過(guò)內(nèi)容吸引潛在用戶(hù);2.廣告內(nèi)容逐步呈現(xiàn)階段,轉(zhuǎn)化組件漸進(jìn)式增強(qiáng),輔以增益信息,不斷強(qiáng)化,引導(dǎo)轉(zhuǎn)化行為。


它指導(dǎo)了轉(zhuǎn)化組件從“呈現(xiàn)”到“增強(qiáng)”的全流程,從時(shí)機(jī)(出現(xiàn)&增強(qiáng)時(shí)機(jī))/引導(dǎo)(動(dòng)效&互動(dòng)引導(dǎo))/前置(信息&轉(zhuǎn)化前置)三個(gè)部分,幫助提升廣告轉(zhuǎn)化效果。



///

時(shí)機(jī)-延遲增強(qiáng)如何呈現(xiàn)?


轉(zhuǎn)化組件的呈現(xiàn)時(shí)機(jī)包含“何時(shí)展現(xiàn)”與“何時(shí)增強(qiáng)”兩個(gè)部分,前者幫助增加廣告接收率,后者提升廣告轉(zhuǎn)化率。


01/ 出現(xiàn)時(shí)機(jī):

延遲展現(xiàn)廣告意圖,可以提升廣告賣(mài)點(diǎn)的展現(xiàn)機(jī)率


互聯(lián)網(wǎng)的快速發(fā)展使得受眾被動(dòng)卷入爆炸式增長(zhǎng)的資訊信息體中,廣告借助這一媒介迅速發(fā)展,但也因?yàn)椴糠稚虡I(yè)廣告的過(guò)度宣傳與其降低用戶(hù)信息獲取便捷性的本質(zhì),不可避免的使受眾產(chǎn)生了心理上的逆反與抵觸情緒,從源頭拒絕了廣告信息。

 

所以對(duì)廣告來(lái)說(shuō),在廣告展現(xiàn)初始,延遲展現(xiàn)廣告意圖,融入內(nèi)容,可以緩解受眾的抵觸情緒,提升廣告賣(mài)點(diǎn)的展現(xiàn)機(jī)率



02/ 增強(qiáng)時(shí)機(jī):

通過(guò)用戶(hù)行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī),可以有效提升轉(zhuǎn)化


對(duì)廣告來(lái)說(shuō),搭配廣告內(nèi)容進(jìn)行增強(qiáng),通過(guò)內(nèi)容積累購(gòu)買(mǎi)欲/信任感,然后通過(guò)階段性的增強(qiáng)來(lái)提示操作,對(duì)比一成不變能起到更好的轉(zhuǎn)化效果。


我們首先嘗試了程序化的增強(qiáng)時(shí)機(jī),在不增加技術(shù)成本的前提下,根據(jù)歷史經(jīng)驗(yàn),面向不同的廣告均采用固定時(shí)段的階段性增強(qiáng)。


但不同的廣告物料內(nèi)容不同,不同的用戶(hù)偏好也不同,固定的增強(qiáng)時(shí)機(jī)并不能很好的滿(mǎn)足所有廣告需求。所以在技術(shù)能力可以承載的時(shí)候,我們采用了動(dòng)態(tài)時(shí)機(jī)策略,通過(guò)用戶(hù)行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī),在程序化增強(qiáng)時(shí)機(jī)之后,再次實(shí)現(xiàn)了轉(zhuǎn)化提升


undefined


///

引導(dǎo)-延遲增強(qiáng)如何引導(dǎo)轉(zhuǎn)化行為?


轉(zhuǎn)化組件如何引導(dǎo)轉(zhuǎn)化,則可分為基礎(chǔ)的視覺(jué)引導(dǎo)與進(jìn)階的互動(dòng)引導(dǎo),前者幫助搶奪視覺(jué)注意力,后者則能夠在互動(dòng)體驗(yàn)中植入部分幫助決策的“小心思”。

 

01/ 視覺(jué)引導(dǎo):

適當(dāng)增加視覺(jué)吸引點(diǎn),可以有效引導(dǎo)點(diǎn)擊

 

延遲增強(qiáng)需要通過(guò)階段性的增強(qiáng)來(lái)提示操作,而如何增強(qiáng)能有效吸引注意則需要琢磨,已有實(shí)驗(yàn)表明轉(zhuǎn)化按鈕增加掃光動(dòng)效與智能取色,能有效吸引注意,引導(dǎo)點(diǎn)擊,對(duì)轉(zhuǎn)化提升有良好效果。



02/ 互動(dòng)引導(dǎo):

讓用戶(hù)主動(dòng)選擇,可以增加廣告曝光,輔助轉(zhuǎn)化決策

 

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)對(duì)于用戶(hù)交互體驗(yàn)的追求越發(fā)極致,如影視行業(yè)走向可交互網(wǎng)劇,本質(zhì)上是從用戶(hù)接收轉(zhuǎn)變?yōu)橛脩?hù)主動(dòng)參與,用戶(hù)本身對(duì)于獲得優(yōu)質(zhì)體驗(yàn)的意識(shí)逐漸覺(jué)醒。商業(yè)化產(chǎn)品也需要緊跟“體驗(yàn)”與“互動(dòng)”,將廣告變?yōu)榛?dòng)體驗(yàn)或具備使用價(jià)值的信息,讓用戶(hù)從被動(dòng)瀏覽到主動(dòng)參與,掌握對(duì)廣告的選擇權(quán)。

 

以互動(dòng)投票為例,我們通過(guò)用戶(hù)與用戶(hù)之間的觀點(diǎn)表達(dá),以投票選擇的形式誘發(fā)群體性選擇,引起好奇心與同儕壓力。

 

若用戶(hù)選擇符合群體選擇,則帶來(lái)群體性背書(shū),增強(qiáng)信任感;若用戶(hù)選擇不符合群體選擇,基于從眾心理,用戶(hù)極有可能對(duì)群體選擇產(chǎn)生好奇,從而瀏覽兩種選項(xiàng)的內(nèi)容,有效的增加了品牌曝光。


undefined


///

前置-延遲增強(qiáng)如何幫助轉(zhuǎn)化達(dá)成?

 

轉(zhuǎn)化組件的前置主要包含信息前置與轉(zhuǎn)化前置,前者輔助轉(zhuǎn)化決策,后者幫助便捷操作,更好更快的完成轉(zhuǎn)化。


01/ 信息前置:

增加增益信息或前置落地頁(yè)信息,可以輔助轉(zhuǎn)化決策


購(gòu)買(mǎi)/轉(zhuǎn)化一定是需要足夠的信息積累信任感才能達(dá)成的,在前卡適當(dāng)?shù)脑黾淤u(mài)點(diǎn)信息能夠更好的幫助用戶(hù)決策。針對(duì)下載類(lèi)廣告可增加評(píng)分與星級(jí),二電類(lèi)廣告可以增加價(jià)格信息,甚至可以前置優(yōu)惠劵、圖片banner等信息,均能實(shí)現(xiàn)轉(zhuǎn)化的正向提升


undefined


02/ 轉(zhuǎn)化前置:

縮短轉(zhuǎn)化路徑,可以幫助轉(zhuǎn)化行為更便捷的達(dá)成


在信任感積累與階段性的增強(qiáng)都達(dá)成的時(shí)候,在當(dāng)前轉(zhuǎn)化對(duì)比跳轉(zhuǎn)落地頁(yè)再進(jìn)行轉(zhuǎn)化,鏈路更短,用戶(hù)流失概率更小。比起實(shí)驗(yàn)嘗試,更像是延遲增強(qiáng)的基礎(chǔ)能力配置。


首先,我們針對(duì)表單/咨詢(xún)/電話(huà)/安卓下載都進(jìn)行了轉(zhuǎn)化前置,具有用戶(hù)明確意向的按鈕點(diǎn)擊會(huì)直接在當(dāng)前進(jìn)行反饋。



除了直接將操作前置外,針對(duì)不同細(xì)分場(chǎng)景的需求,還可以通過(guò)交互形態(tài)的優(yōu)化在感官上縮短路徑。

 

這里以百度的視頻MAX廣告為例,我們針對(duì)重落地頁(yè)的商家,將MAX首屏(視頻頁(yè))與H5落地頁(yè)的關(guān)系變拼接結(jié)構(gòu)為雙層結(jié)構(gòu),通過(guò)浮層面板承載落地頁(yè),延時(shí)自動(dòng)彈出,強(qiáng)引導(dǎo)下方內(nèi)容,激發(fā)用戶(hù)上滑瀏覽興趣,解決了落地頁(yè)隱藏較深,轉(zhuǎn)化鏈路過(guò)長(zhǎng)的問(wèn)題,同時(shí)增加了落地頁(yè)曝光從而提升轉(zhuǎn)化。



///
結(jié)語(yǔ)


在視頻信息流領(lǐng)域中,延遲增強(qiáng)仍然可以繼續(xù)深挖,作為“基礎(chǔ)建設(shè)”承載未來(lái)更多細(xì)分場(chǎng)景下的互動(dòng)化、個(gè)性化的“精神需求”。

 

同時(shí)延遲增強(qiáng)設(shè)計(jì)方法也可以橫向復(fù)用于廣告前卡、落地頁(yè)、IM工具等各種需要在合適時(shí)機(jī)抓取用戶(hù)注意的場(chǎng)景中,去追求點(diǎn)擊或者轉(zhuǎn)化的提升。甚至在未來(lái)可以嘗試其在長(zhǎng)視頻或圖文場(chǎng)景中的應(yīng)用。


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

文章來(lái)源:站酷 作者:百度MEUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)www.yvirxh.cn )是一家專(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ù)


市場(chǎng)與用戶(hù)研究基礎(chǔ)

ui設(shè)計(jì)分享達(dá)人

前言:互聯(lián)網(wǎng)產(chǎn)品都是以用戶(hù)為中心,為用戶(hù)服務(wù),那么市場(chǎng)與用戶(hù)研究對(duì)工作的重要性自然不言而喻。這是一項(xiàng)市場(chǎng)與用戶(hù)研究的欄目,總計(jì)大概十個(gè)篇幅。本欄目將會(huì)對(duì)工作中市場(chǎng)與用戶(hù)研究做一系列的整理與復(fù)盤(pán),希望可以?huà)伌u引玉,帶給大家在市場(chǎng)分析與用戶(hù)研究中一些經(jīng)驗(yàn)。



一、WHAT/什么是用研?


更準(zhǔn)確的定義是:市場(chǎng)與用戶(hù)研究。


市場(chǎng)研究:是指為實(shí)現(xiàn)市場(chǎng)信息目的而進(jìn)行研究的過(guò)程,包括將相應(yīng)問(wèn)題所需的信息具體化、設(shè)計(jì)信息收集的方法、管理并實(shí)施數(shù)據(jù)收集過(guò)程、分析研究結(jié)果、得出結(jié)論并確定其含義等。


—— 著重于產(chǎn)品的市場(chǎng)營(yíng)銷(xiāo)


用戶(hù)研究:是用戶(hù)中心的設(shè)計(jì)流程中的第一步。它是一種理解用戶(hù),將它們的目標(biāo)、需求與企業(yè)的商業(yè)宗旨相匹配的理想方法。用戶(hù)研究的首要目的是幫助企業(yè)定義產(chǎn)品的目標(biāo)用戶(hù)群、明確、細(xì)化產(chǎn)品概念,并通過(guò)對(duì)用戶(hù)的任務(wù)操作特性、知覺(jué)特性、認(rèn)知心理特性的研究,使用戶(hù)的實(shí)際需求成為產(chǎn)品設(shè)計(jì)的導(dǎo)向,使產(chǎn)品更符合用戶(hù)的習(xí)慣、經(jīng)驗(yàn)和期待。


—— 著重于產(chǎn)品設(shè)計(jì)體驗(yàn)優(yōu)化


二、WHY/為什么要做用戶(hù)研究?


理解用戶(hù)行為數(shù)據(jù)產(chǎn)生的原因


用戶(hù)為什么來(lái)?為什么不來(lái)?

用戶(hù)為什么留存?為什么流失?

用戶(hù)為什么付費(fèi)?為什么不花錢(qián)?

用戶(hù)為什么喜歡A活動(dòng)不喜歡B活動(dòng)?



新的開(kāi)發(fā)功能、新的界面風(fēng)格、新的運(yùn)營(yíng)活動(dòng)、新的品牌賣(mài)點(diǎn)更加貼合用戶(hù)


這個(gè)真的是用戶(hù)想要的嗎?

這個(gè)風(fēng)格是我們的目標(biāo)用戶(hù)喜歡的嗎?

目標(biāo)用戶(hù)愿意參與我們的運(yùn)營(yíng)活動(dòng)嗎?

我們與競(jìng)品的差異化是什么?



產(chǎn)品的想法與用戶(hù)的行為習(xí)慣與心理訴求


這個(gè)功能真的是用戶(hù)需要的嗎?

這個(gè)功能真的符合用戶(hù)的行為路徑嗎?

......



三、WHEN/什么時(shí)候做用戶(hù)研究?

我們可以聽(tīng)到:


“用戶(hù)流失,我要做個(gè)用戶(hù)研究,看看到底是為什么?”

“用戶(hù)不付費(fèi),我要做個(gè)用戶(hù)研究,我要找到原因?!?

“用戶(hù)一直活躍度不高,我要做個(gè)用戶(hù)研究,找找改版的方向?!?


但是事實(shí)上,我們應(yīng)該

以科學(xué)的方法貫穿整個(gè)產(chǎn)品生命周期做用戶(hù)研究。

    

1、在產(chǎn)品概念期,我們需要把握市場(chǎng)機(jī)會(huì)的判斷、挖掘用戶(hù)需求、做好產(chǎn)品概念的設(shè)計(jì),那么在這個(gè)階段,我們通過(guò)用戶(hù)研究做好市場(chǎng)細(xì)分研究,估算市場(chǎng)價(jià)值。并且預(yù)測(cè)市場(chǎng)的規(guī)模,估算產(chǎn)品的競(jìng)爭(zhēng)潛力。同時(shí)做好競(jìng)品的分析與研究,決定自己產(chǎn)品的定位與賣(mài)點(diǎn)。挖掘用戶(hù)需求,找到用戶(hù)痛點(diǎn)、爽點(diǎn)、癢點(diǎn)。做好產(chǎn)品概念測(cè)試,分析是否滿(mǎn)足用戶(hù)的需求,解決用戶(hù)的痛點(diǎn),找到用戶(hù)的爽點(diǎn),把握用戶(hù)的癢點(diǎn)。


2、在產(chǎn)品設(shè)計(jì)開(kāi)發(fā)期,在這個(gè)產(chǎn)品時(shí)期,我們需要進(jìn)一步的把握目標(biāo)用戶(hù)的定位,設(shè)計(jì)產(chǎn)品的核心功能,做好用戶(hù)付費(fèi)策略的設(shè)計(jì)。那么在這個(gè)階段,我們通過(guò)用戶(hù)研究做美術(shù)風(fēng)格的測(cè)試、核心功能的測(cè)試甚至產(chǎn)品名稱(chēng)測(cè)試,看產(chǎn)品在該市場(chǎng)的定位研究、以及進(jìn)行商業(yè)化研究,幫助產(chǎn)品研究用戶(hù)付費(fèi)策略。


3、在產(chǎn)品的宣傳推廣期,在這個(gè)時(shí)期,為了更好的實(shí)現(xiàn)產(chǎn)品商業(yè)化,我們需要制定產(chǎn)品競(jìng)爭(zhēng)的策略,幫助產(chǎn)品在市場(chǎng)中獲得更好的變現(xiàn)。同時(shí)幫助市場(chǎng)營(yíng)銷(xiāo)部門(mén)制定傳播策略,提煉產(chǎn)品的核心賣(mài)點(diǎn)。在這個(gè)階段,我們通過(guò)用戶(hù)研究幫助市場(chǎng)部門(mén)以及運(yùn)營(yíng)部門(mén)測(cè)試宣傳素材、評(píng)估宣傳效果、研究用戶(hù)的觸媒習(xí)慣以及測(cè)試用戶(hù)U&A研究(使用與態(tài)度研究),提升市場(chǎng)營(yíng)銷(xiāo)品質(zhì)。


4、在產(chǎn)品進(jìn)入平穩(wěn)發(fā)展期,在這個(gè)時(shí)期,我們需要進(jìn)行持續(xù)競(jìng)爭(zhēng)的策略制定,需要做好產(chǎn)品生命周期的管理,同時(shí)也要隔一段時(shí)間做品牌營(yíng)銷(xiāo)刷新。以便于更快,更好,更貼合市場(chǎng)。在這個(gè)階段,用戶(hù)研究需要做市場(chǎng)推廣效果評(píng)估、版本迭代的監(jiān)測(cè)研究、用戶(hù)滿(mǎn)意度的調(diào)查研究,并且需要做好流失用戶(hù)研究,找到用戶(hù)流失的點(diǎn),做好改進(jìn)。同時(shí)也要做好競(jìng)品研究,監(jiān)測(cè)市場(chǎng)的變化。也需要做好品牌定位研究研究、用戶(hù)訴求的研究以及用戶(hù)情感研究,幫助產(chǎn)品做好迭代與更新。


5、 最后在產(chǎn)品衰退期,用戶(hù)研究需要做再定位策略或者做好退出的計(jì)劃。那么我們需要通過(guò)用戶(hù)研究做好整體市場(chǎng)趨勢(shì)研究、競(jìng)品研究、新機(jī)會(huì)的探測(cè)性調(diào)查,提供數(shù)據(jù),幫助公司決策接下來(lái)的發(fā)展,是引流導(dǎo)入到二代產(chǎn)品?亦或是做好迎接新產(chǎn)品的準(zhǔn)備?


四、WHERE/到哪里去做用研


我們可以采取線(xiàn)下以及線(xiàn)上兩種方式相結(jié)合:

  • 線(xiàn)下

在街頭進(jìn)行街頭訪(fǎng)談、或者去用戶(hù)家里進(jìn)行面談或者調(diào)查紙質(zhì)調(diào)查問(wèn)卷的形式、到公司里進(jìn)行入戶(hù)訪(fǎng)問(wèn)以及在專(zhuān)門(mén)的訪(fǎng)談室進(jìn)行座談會(huì)等等。

  • 線(xiàn)上

可選方式更多,可以在qq群、論壇以及貼吧等平臺(tái)發(fā)送調(diào)查問(wèn)卷,或者在微信中直接進(jìn)行語(yǔ)音或者視頻等方式。也可以在產(chǎn)品內(nèi)發(fā)放調(diào)查表,或者發(fā)放調(diào)查表到用戶(hù)的電子郵箱等等。


五、WHO/誰(shuí)來(lái)做用戶(hù)研究? 對(duì)誰(shuí)做用戶(hù)研究?


誰(shuí)來(lái)做用戶(hù)研究呢?

一般來(lái)說(shuō),大企業(yè)有自己的用戶(hù)研究團(tuán)隊(duì),中小型企業(yè)可以外包給專(zhuān)業(yè)的用戶(hù)研究公司,也可以進(jìn)行內(nèi)部設(shè)崗。

      

用戶(hù)研究的對(duì)象是哪些人?

在不同的產(chǎn)品階段、面對(duì)不同的問(wèn)題、對(duì)應(yīng)不同的目的,找到不同的人群。


1、在產(chǎn)品概念期,用戶(hù)研究對(duì)象是通過(guò)各種維度定義出來(lái)的目標(biāo)用戶(hù)以及競(jìng)品用戶(hù)。


2、在設(shè)計(jì)開(kāi)發(fā)期,用戶(hù)研究對(duì)象是圍繞產(chǎn)品或者研究目的找到核心用戶(hù)、次核心用戶(hù)以及外圍用戶(hù)。


3、在宣傳推廣期,用戶(hù)研究對(duì)象是把握住新進(jìn)用戶(hù)。


4、在平穩(wěn)發(fā)展期,用戶(hù)研究對(duì)象是產(chǎn)品的留存用戶(hù)、活躍用戶(hù)以及流失用戶(hù)和回流用戶(hù)。


5、在產(chǎn)品衰退期,根據(jù)策略決定需要調(diào)研的用戶(hù)群體。



六、怎樣做用研(How)


用戶(hù)研究是為目的服務(wù)。


把握住問(wèn)題六要素,是用戶(hù)研究的核心。

(1)問(wèn)題癥狀?

   ? 在決策問(wèn)題時(shí)遇到什么困惑,有哪些癥狀?

(2)用研目的?

   ? 希望用研達(dá)成什么目的?

(3)決策處境?

   ? 現(xiàn)階段能支配怎樣的資源?何時(shí)采取措施?

(4)問(wèn)題假設(shè)?

   ? 預(yù)計(jì)會(huì)是什么原因引起問(wèn)題?結(jié)果可能會(huì)有哪些?

(5)行動(dòng)方案?

   ? 可能采取的行動(dòng)方案有哪些?

(6)效果預(yù)期?

   ? 行動(dòng)方案下希望產(chǎn)生或者可能達(dá)到怎樣的效果?


常用的市場(chǎng)與用戶(hù)研究方法:




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

文章來(lái)源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)www.yvirxh.cn )是一家專(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ù)


深度解析|流量時(shí)代私域H5營(yíng)銷(xiāo)設(shè)計(jì)的流量密碼

ui設(shè)計(jì)分享達(dá)人









一、由銷(xiāo)售演變成運(yùn)營(yíng)


在我看來(lái),當(dāng)今互聯(lián)網(wǎng)行業(yè)的經(jīng)營(yíng)實(shí)際上與傳統(tǒng)行業(yè)的銷(xiāo)售并無(wú)區(qū)別,我們可以從以下兩個(gè)行業(yè)的業(yè)務(wù)結(jié)構(gòu)圖看出,互聯(lián)網(wǎng)行業(yè)的經(jīng)營(yíng)實(shí)際上是從傳統(tǒng)行業(yè)的銷(xiāo)售模式轉(zhuǎn)變而來(lái)。



1.1 傳統(tǒng)行業(yè)的銷(xiāo)售

按照傳統(tǒng)行業(yè)的業(yè)務(wù)結(jié)構(gòu)可分為“采購(gòu)、生產(chǎn)、加工、銷(xiāo)售、財(cái)務(wù)”四個(gè)環(huán)節(jié)。一提起銷(xiāo)售大家肯定都不陌生,指的是企業(yè)生產(chǎn)的產(chǎn)品通過(guò)銷(xiāo)售人員的銷(xiāo)售手段,將企業(yè)的產(chǎn)品賣(mài)出來(lái)兌換成貨幣,流入企業(yè)的財(cái)務(wù)。



1.2 互聯(lián)網(wǎng)行業(yè)的運(yùn)營(yíng)

在互聯(lián)網(wǎng)行業(yè)中業(yè)務(wù)結(jié)構(gòu)還可分為“采購(gòu)、PM/開(kāi)發(fā)、運(yùn)營(yíng)、財(cái)務(wù)”。就流程而言,互聯(lián)網(wǎng)行業(yè)的經(jīng)營(yíng)實(shí)際上存在著傳統(tǒng)銷(xiāo)售的影子,在將企業(yè)的產(chǎn)品(成品)轉(zhuǎn)化為財(cái)務(wù)的這一環(huán)節(jié)之前,需要經(jīng)歷銷(xiāo)售或運(yùn)營(yíng)這兩個(gè)環(huán)節(jié)。


不像傳統(tǒng)企業(yè)銷(xiāo)售,運(yùn)營(yíng)不直接負(fù)責(zé)賣(mài),更多地是負(fù)責(zé)推廣。不直接負(fù)責(zé)銷(xiāo)售,更多的是負(fù)責(zé)推廣。換言之,互聯(lián)網(wǎng)企業(yè)的產(chǎn)品并不直接兌換成貨幣,而是通過(guò)“引流、活動(dòng)、轉(zhuǎn)化、流失”等一系列運(yùn)營(yíng)操作,提升用戶(hù)體驗(yàn),將產(chǎn)品好服務(wù)賣(mài)給用戶(hù)。


·引導(dǎo)用戶(hù)使用產(chǎn)品:我們可以將傳統(tǒng)銷(xiāo)售中的初次拜訪(fǎng)客戶(hù)當(dāng)作運(yùn)營(yíng)中的引流;

·保持用戶(hù)黏性:把傳統(tǒng)銷(xiāo)售中的維護(hù)客戶(hù)關(guān)系當(dāng)作運(yùn)營(yíng)中做的活動(dòng)和轉(zhuǎn)化;

·用戶(hù)流失管理:將傳統(tǒng)銷(xiāo)售中挽回客戶(hù)這個(gè)動(dòng)作當(dāng)作運(yùn)營(yíng)中用戶(hù)流失這個(gè)動(dòng)作。

因此,互聯(lián)網(wǎng)行業(yè)更加重視運(yùn)營(yíng)而不是銷(xiāo)售。






二、運(yùn)營(yíng)設(shè)計(jì)的核心目標(biāo)


在簡(jiǎn)單了解了互聯(lián)網(wǎng)的運(yùn)營(yíng)之后,我們?cè)僬勔徽勛钚鲁霈F(xiàn)的一個(gè)新詞“運(yùn)營(yíng)設(shè)計(jì)”。



2.1 運(yùn)營(yíng)設(shè)計(jì)并不是運(yùn)營(yíng)

運(yùn)營(yíng)設(shè)計(jì)在我看來(lái)是一個(gè)相對(duì)模糊的詞匯,我能清楚地講明白什么是品牌設(shè)計(jì)、界面設(shè)計(jì)、工業(yè)設(shè)計(jì)、平面設(shè)計(jì)、產(chǎn)品設(shè)計(jì),但總覺(jué)得說(shuō)不明白什么是運(yùn)營(yíng)設(shè)計(jì)。


比如說(shuō)品牌設(shè)計(jì)是品牌,界面設(shè)計(jì)設(shè)計(jì)的是界面,而運(yùn)營(yíng)設(shè)計(jì)不是運(yùn)營(yíng)設(shè)計(jì),好像運(yùn)營(yíng)設(shè)計(jì)無(wú)法用一個(gè)專(zhuān)業(yè)的方向來(lái)描述。


但在國(guó)內(nèi)的互聯(lián)網(wǎng)市場(chǎng)中,產(chǎn)品的運(yùn)營(yíng)又是一件必不可少的事情,從企業(yè)盈利的角度來(lái)看運(yùn)營(yíng)設(shè)計(jì)的地位不亞于UI設(shè)計(jì)和產(chǎn)品設(shè)計(jì)。在我看來(lái)運(yùn)營(yíng)設(shè)計(jì)是介于“運(yùn)營(yíng)”與“設(shè)計(jì)”之間的一個(gè)崗位。


·菜鳥(niǎo)運(yùn)營(yíng)設(shè)計(jì)師:多是幫助運(yùn)營(yíng)經(jīng)理完成運(yùn)營(yíng)活動(dòng)的投放物料,按時(shí)上線(xiàn)。

·老鳥(niǎo)運(yùn)營(yíng)設(shè)計(jì)師:通過(guò)較為多樣的手段(合理的規(guī)劃)和技能(設(shè)計(jì)感覺(jué)形式)更好地實(shí)現(xiàn)“用戶(hù)獲取&用戶(hù)付費(fèi)”等目的,并且在這個(gè)過(guò)程中可以“更好實(shí)現(xiàn)已有用戶(hù)的維系”。



2.2 增長(zhǎng)設(shè)計(jì)(海盜模型)

實(shí)際上,運(yùn)營(yíng)設(shè)計(jì)也被稱(chēng)為增長(zhǎng)設(shè)計(jì),一提到增長(zhǎng),我的第一反應(yīng)就是《增長(zhǎng)黑客》中的海盜模型,也就是AAARR模型。


AARRR(海盜模型)是《增長(zhǎng)黑客》中最為重要的理論——用戶(hù)生命周期的模型,因?yàn)檫@個(gè)模型和運(yùn)營(yíng)設(shè)計(jì)有許多相似之處,也有人將其作為業(yè)務(wù)流程的模型。運(yùn)營(yíng)的流程需要經(jīng)歷:先拉新,再促活,接著提高留存,然后獲取收入,最后實(shí)現(xiàn)自我傳播這5個(gè)環(huán)節(jié),可以和模型中的概念一一對(duì)應(yīng)上。


*對(duì)于海盜模型的知識(shí)點(diǎn),我在這篇文章《一文讀懂|數(shù)據(jù)好體驗(yàn)就好嗎?—數(shù)據(jù)認(rèn)知篇》里面講過(guò),這里我就不做過(guò)多地贅述了。


對(duì)用戶(hù)生命周期AAARR模型的理解是一方面,最重要是要學(xué)會(huì)用模型中的關(guān)鍵數(shù)據(jù)指標(biāo)去衡量活動(dòng),畢竟我們做運(yùn)營(yíng)設(shè)計(jì)的最重要的是以最低的設(shè)計(jì)成本來(lái)獲得最大的運(yùn)營(yíng)收益。模型只是一種工具,對(duì)于不清楚怎么使用模型的同學(xué),我建議看看我寫(xiě)的《史上最全|數(shù)據(jù)體驗(yàn)好就好嗎?—體驗(yàn)度量篇》



2.3 以運(yùn)營(yíng)目標(biāo)推導(dǎo)運(yùn)營(yíng)形式

運(yùn)營(yíng)經(jīng)理的運(yùn)營(yíng)手段可謂是百花齊放,變化莫測(cè),這里我們不展開(kāi)討論。一般運(yùn)營(yíng)活動(dòng)屬于推廣這個(gè)動(dòng)作,在推廣的這個(gè)環(huán)節(jié)里面不會(huì)特指某一個(gè)目標(biāo),而是包含多個(gè)目標(biāo),所以對(duì)于運(yùn)營(yíng)設(shè)計(jì)師而言目標(biāo)不能是一個(gè),而應(yīng)該多個(gè)。常規(guī)的以產(chǎn)品運(yùn)營(yíng)為核心提出來(lái)運(yùn)營(yíng)目標(biāo)大致是“拉新、促活、回流、營(yíng)收”等這四種。


如果把運(yùn)營(yíng)的目標(biāo)需求轉(zhuǎn)換成我們?cè)O(shè)計(jì)師的目標(biāo)需求的話(huà),逃不出我們常見(jiàn)的“用戶(hù)增長(zhǎng)、品牌傳達(dá)、營(yíng)銷(xiāo)策略、商品成交量”這四個(gè)范疇。


把運(yùn)營(yíng)側(cè)的目標(biāo)轉(zhuǎn)換為產(chǎn)品是為了幫設(shè)計(jì)更準(zhǔn)確理解運(yùn)營(yíng)經(jīng)理的需求,以目標(biāo)確定活動(dòng)類(lèi)型、以類(lèi)型快速定位適合的風(fēng)格,提高運(yùn)營(yíng)活動(dòng)質(zhì)量,促進(jìn)用戶(hù)轉(zhuǎn)化,如圖


·基于用戶(hù)的活動(dòng)運(yùn)營(yíng):如果是以用戶(hù)為目標(biāo)的活動(dòng),設(shè)計(jì)應(yīng)該偏向于符合用戶(hù)屬性的風(fēng)格,比如我們的用戶(hù)都是年輕的用戶(hù),那在頁(yè)面的設(shè)計(jì)上就應(yīng)該多有“年輕化、博人眼球的、好玩有趣”等元素的呈現(xiàn)。


·基于營(yíng)收的活動(dòng)運(yùn)營(yíng):如果是以營(yíng)收為目標(biāo)的活動(dòng),設(shè)計(jì)應(yīng)該偏向活動(dòng)場(chǎng)景對(duì)于入口的設(shè)計(jì)優(yōu)化,比如Banner、落地頁(yè)等物料設(shè)計(jì)。通過(guò)優(yōu)化入口,提高轉(zhuǎn)化率,完成產(chǎn)品體驗(yàn)的優(yōu)化的目標(biāo)。


·基于品牌的活動(dòng)運(yùn)營(yíng):如果是以品牌宣傳為目標(biāo)的活動(dòng),設(shè)計(jì)應(yīng)該偏向企業(yè)品牌形象的樹(shù)立以及傳播,把產(chǎn)品的特色傳遞給用戶(hù),與其他競(jìng)品拉開(kāi)差距,提升自己產(chǎn)品的核心競(jìng)爭(zhēng)力。





三、私域的精細(xì)化運(yùn)營(yíng)

與運(yùn)營(yíng)有關(guān)的“私域”這倆詞,最近火得不行,哪里都可以見(jiàn)到。為什么互聯(lián)網(wǎng)企業(yè)這么重視私域的運(yùn)營(yíng)呢?主要是因?yàn)樵诨ヂ?lián)網(wǎng)時(shí)代,大家都認(rèn)同有了私域流量就相當(dāng)于有了盈利這個(gè)觀點(diǎn)。


3.1 什么是公域運(yùn)營(yíng)

首先我要簡(jiǎn)單地描述一下什么叫流量,流量的本質(zhì)就是指用戶(hù),但是“用戶(hù)”這個(gè)詞過(guò)于抽象了,常常都用閱讀量,粉絲量,點(diǎn)贊量,播放量等這些數(shù)據(jù)維度去衡量流量的體積。


打個(gè)不恰當(dāng)?shù)谋扔?,流量就像是一條河,如果無(wú)人管理的話(huà),那就叫公域交通。您在河邊挖一條水溝,將河水引到自己事先制作好的蓄水池里面,這個(gè)蓄水池里面的河水就叫做私域流量。


3.2 什么是私域流量

如上例所說(shuō),我們將能夠自主運(yùn)營(yíng)的流量或用戶(hù)(蓄水池),可以反復(fù)觸達(dá)、“騷擾”、交流,獲取反饋的流量統(tǒng)稱(chēng)為私域流量。典型的產(chǎn)品形態(tài)有微商、拼團(tuán)群、朋友圈、微信公眾號(hào)。私域流量相對(duì)于公域流量來(lái)說(shuō),是一種更精準(zhǔn),更容易被轉(zhuǎn)化的流量。


簡(jiǎn)單的理解就是可以為所欲為的流量,比如我在我自己的微信公眾號(hào)里面可以隨意地刪減用戶(hù)的評(píng)論,典型產(chǎn)品形態(tài)有微信公眾號(hào)、微商、拼團(tuán)群、朋友圈等。


如今許多互聯(lián)網(wǎng)產(chǎn)品都是私域流量與公域相結(jié)合的產(chǎn)品,比如說(shuō)大家經(jīng)常使用的站酷這個(gè)平臺(tái),如果我發(fā)布的作品沒(méi)有上首頁(yè)的推薦,只會(huì)在我的個(gè)人主頁(yè)展示,獲得的粉絲就屬于私域流量;反之我的作品獲得了首頁(yè)推薦,在站酷首頁(yè)展示,獲得粉絲增長(zhǎng)量就屬于公域流量。


許多企業(yè)老板都明白這樣一個(gè)道理“用戶(hù)在哪里,私域流量就在哪里,生意就在哪里,企業(yè)的盈利就在哪里?!?/strong>因此,企業(yè)老板們都希望把公域流量吸引到自己產(chǎn)品的中,成為私域流量,這樣企業(yè)的流量即相對(duì)公域流量而言更加可控、高效、精準(zhǔn),后期盈利也有保障。



3.3 精細(xì)化的運(yùn)營(yíng)模式

正是因?yàn)樵S多企業(yè)開(kāi)始注意到私域流量的重要性,互聯(lián)網(wǎng)從之前的流量粗放運(yùn)營(yíng)模式,逐漸變成用戶(hù)精細(xì)化運(yùn)營(yíng)模式,這是流量思維到用戶(hù)思維的轉(zhuǎn)變。精細(xì)化運(yùn)營(yíng)簡(jiǎn)單理解就是基于龐大的數(shù)據(jù)分析,讓企業(yè)的產(chǎn)品為不同的用戶(hù)推送不同的運(yùn)營(yíng)內(nèi)容(或者是用戶(hù)感興趣的內(nèi)容)。


提出“精細(xì)化運(yùn)營(yíng)”這一個(gè)概念行業(yè)里面最早最有名氣的應(yīng)當(dāng)是號(hào)稱(chēng)一分鐘出8000張Banner的鹿班平臺(tái),鹿班平臺(tái)最大的意義不在于取代設(shè)計(jì)師這一個(gè)崗位,而是阿里巴巴在精細(xì)化運(yùn)營(yíng)的第一次嘗試,為不同的用戶(hù)推送自己所需要的商品內(nèi)容。當(dāng)然了,除了鹿班平臺(tái)京東集團(tuán)也有羚瓏營(yíng)銷(xiāo)內(nèi)容創(chuàng)意平臺(tái),有興趣的同學(xué)可以查看一下。


在精細(xì)化運(yùn)營(yíng)中還有一個(gè)很專(zhuān)業(yè)的名詞叫“千人千面營(yíng)銷(xiāo)策略”,這個(gè)營(yíng)銷(xiāo)策略的概念是指每一個(gè)用戶(hù)看到的每一個(gè)內(nèi)容都是不一樣的,仔細(xì)想想這是人力所不能及,只有AI的大數(shù)據(jù)才能做到的,例如用戶(hù)A的收藏夾是襯衫品類(lèi)比較多,那淘寶Feed流推送的商品襯衫比重會(huì)多一些,用戶(hù)B的購(gòu)物車(chē)首飾品類(lèi)比較多,那產(chǎn)品中推送的內(nèi)容珠寶首飾占多數(shù);用戶(hù)C喜歡電子產(chǎn)品,那么產(chǎn)品推送的將會(huì)是電子類(lèi)產(chǎn)品比較多。





四、了解運(yùn)營(yíng)設(shè)計(jì)師的工作內(nèi)容

在公司里,產(chǎn)品體驗(yàn)設(shè)計(jì)師(又被稱(chēng)為界面設(shè)計(jì)師、UI設(shè)計(jì)師)在公司中扮演著美化產(chǎn)品的角色,隨著互聯(lián)網(wǎng)行業(yè)的業(yè)務(wù)擴(kuò)張、人才涌入后會(huì)把UI設(shè)計(jì)師這一角色進(jìn)行更加精細(xì)化的分類(lèi),在互聯(lián)網(wǎng)企業(yè)中會(huì)把設(shè)計(jì)師按照工作內(nèi)容進(jìn)行兩種類(lèi)型的分類(lèi),分別是產(chǎn)品體驗(yàn)設(shè)計(jì)師和運(yùn)營(yíng)視覺(jué)設(shè)計(jì)師。



4.1 產(chǎn)品體驗(yàn)設(shè)計(jì)師

工作職責(zé):產(chǎn)品體驗(yàn)設(shè)計(jì)師的工作職責(zé),主要以提升產(chǎn)品功能體驗(yàn)為主。在分析產(chǎn)品邏輯和交互邏輯后,從視覺(jué)層面把控產(chǎn)品界面設(shè)計(jì),并通過(guò)視覺(jué)設(shè)計(jì)高效傳達(dá)有效的信息,并制造出愉悅的用戶(hù)體驗(yàn)。

設(shè)計(jì)工具:Figma、Sketch、Axure、問(wèn)卷工具等。



4.2 運(yùn)營(yíng)視覺(jué)設(shè)計(jì)師

工作職責(zé):運(yùn)營(yíng)設(shè)計(jì)工作職責(zé)是在短期內(nèi)達(dá)成提升相關(guān)運(yùn)營(yíng)活動(dòng)的指標(biāo)。他們以運(yùn)營(yíng)活動(dòng)設(shè)計(jì)為主,運(yùn)用視覺(jué)語(yǔ)言吸引用戶(hù)參加對(duì)應(yīng)的活動(dòng),加深用戶(hù)對(duì)產(chǎn)品的印象,從而促使用戶(hù)參與活動(dòng),完成活動(dòng)中完成引流、成交、復(fù)購(gòu)、傳播等行為。

設(shè)計(jì)工具:PS、AI、AE、C4D等。



4.3 運(yùn)營(yíng)設(shè)計(jì)師需要具備的能力

運(yùn)營(yíng)設(shè)計(jì)師的主要工作內(nèi)容就是協(xié)助企業(yè)中的運(yùn)營(yíng)經(jīng)理做好產(chǎn)品的用戶(hù)運(yùn)營(yíng)、內(nèi)容運(yùn)營(yíng)、產(chǎn)品運(yùn)營(yíng)和活動(dòng)運(yùn)營(yíng)。運(yùn)營(yíng)設(shè)計(jì)師應(yīng)該參與到運(yùn)營(yíng)活動(dòng)的策劃中去,幫助運(yùn)營(yíng)經(jīng)理想一些更有趣更好的設(shè)計(jì)策略,并且在這個(gè)過(guò)程中更好地提高自己的運(yùn)營(yíng)策略、數(shù)據(jù)分析、文案能力和視覺(jué)表現(xiàn)能力。


4.4 運(yùn)營(yíng)設(shè)計(jì)的工作范疇

運(yùn)營(yíng)設(shè)計(jì)師這個(gè)一個(gè)崗位更多的是內(nèi)容驅(qū)動(dòng)型(音樂(lè)、視頻、教育應(yīng)用等)、交易驅(qū)動(dòng)型(電商、o2O服務(wù)等)產(chǎn)品中。它的工作范疇是一個(gè)很繁雜的事情,不僅需求數(shù)量大而且頻率高,最繁雜的一點(diǎn)是需求種類(lèi)比較多,比如有廣告位Banner、專(zhuān)題頁(yè)面設(shè)計(jì) 、活動(dòng)專(zhuān)題、Icno圖標(biāo)等內(nèi)容,并且需要批量處理的各種資源入口圖,線(xiàn)下活動(dòng)的海報(bào)、印刷物料等等。










如今運(yùn)營(yíng)活動(dòng)可謂鋪天蓋地,手機(jī)端也能經(jīng)常見(jiàn)到各大企業(yè)產(chǎn)品的優(yōu)惠活動(dòng)設(shè)計(jì),比如活動(dòng)圖,落地頁(yè),優(yōu)惠券,戰(zhàn)略樓層等設(shè)計(jì)。國(guó)內(nèi)的運(yùn)營(yíng)設(shè)計(jì)推廣形式多以落地頁(yè)(H5)的形式幫助企業(yè)做推廣企業(yè)產(chǎn)品或者樹(shù)立企業(yè)形象的活動(dòng)。


由于,這類(lèi)狂轟濫炸式的運(yùn)營(yíng)活動(dòng),讓用戶(hù)倍感無(wú)味,致使運(yùn)營(yíng)活動(dòng)流量不高,設(shè)計(jì)師在實(shí)際的工作中往往會(huì)遇到以下三類(lèi)問(wèn)題,導(dǎo)致我們的運(yùn)營(yíng)活動(dòng)流量不高,達(dá)不到預(yù)期的運(yùn)營(yíng)目的,如圖





一、用形式解決內(nèi)容過(guò)長(zhǎng)問(wèn)題

近些年在市面上落地頁(yè)的推廣形式多以長(zhǎng)頁(yè)面為主,比如電商的推薦頁(yè)、商品的宣傳頁(yè)。由于企業(yè)想要表達(dá)的內(nèi)容過(guò)多,使落地頁(yè)的長(zhǎng)度越來(lái)越長(zhǎng),這種形式雖然可以更全面地介紹商品優(yōu)勢(shì),但是在快節(jié)奏的互聯(lián)網(wǎng)市場(chǎng),用戶(hù)自然會(huì)覺(jué)得很臃腫。


針對(duì)落地頁(yè)內(nèi)容過(guò)長(zhǎng),視覺(jué)呈現(xiàn)不佳的問(wèn)題,我們最快能想到的辦法就是刪減字段,但是如果運(yùn)營(yíng)經(jīng)理不同意刪減字段那怎么辦?因此,刪減這是一個(gè)辦法,但不是最好的辦法。


既然不能刪減,我們不妨換個(gè)思路來(lái)解決這個(gè)問(wèn)題。剛剛談到內(nèi)容過(guò)長(zhǎng)導(dǎo)致用戶(hù)感覺(jué)臃腫,感覺(jué)臃腫的核心所在是“內(nèi)容”對(duì)用戶(hù)沒(méi)意義,按著這思路延展下去解決問(wèn)題的關(guān)鍵在于“突出重點(diǎn)”,這里我提供四個(gè)方法幫助大家解決困擾。



1.1 優(yōu)化頭圖的尺寸

許多設(shè)計(jì)設(shè)計(jì)師由于沒(méi)有考慮清楚手機(jī)到最終的預(yù)覽效果,導(dǎo)致很多重要的元素出現(xiàn)在低活躍的區(qū)域 ,用戶(hù)第一眼看不到能吸引自己的內(nèi)容,從而失去往下滑動(dòng)了解更多內(nèi)容的動(dòng)作,造成運(yùn)營(yíng)推廣的效果大打折扣。


因此在設(shè)計(jì)這種長(zhǎng)圖時(shí)要事先考慮好首屏要呈現(xiàn)什么內(nèi)容,一般的運(yùn)營(yíng)頭部高度一般定在600px-750px左右,如果是內(nèi)容較多的話(huà),我建議把頭圖的高度控制在460左右,這樣可以促使用戶(hù)在首屏看到更多的信息,引導(dǎo)用戶(hù)有興趣向下滑動(dòng),用戶(hù)的點(diǎn)擊率也隨之上升。


1.2 手機(jī)海報(bào)的表現(xiàn)形式

除了縮減頭圖的高度之外,實(shí)際上利用海報(bào)宣傳的方式進(jìn)行設(shè)計(jì)也是可以的。在朋友圈或其他社交平臺(tái)上經(jīng)??吹竭@種帶有二維碼的宣傳海報(bào),用戶(hù)通過(guò)掃碼直接進(jìn)入運(yùn)營(yíng)活動(dòng)中心。


這類(lèi)海報(bào)形式有著短小精悍,言簡(jiǎn)意賅、便于傳播的優(yōu)點(diǎn),是一種提高運(yùn)營(yíng)活動(dòng)流量很好的表現(xiàn)形式。



1.3 九宮格拼圖的表現(xiàn)形式

雖然現(xiàn)在是抖音的天下,但是這類(lèi)九宮格拼圖的表現(xiàn)形式,在微博(微信、微淘)如日中天的時(shí)代也是風(fēng)靡一時(shí)的,這里提出九宮格拼圖的形式也是給大家提供一個(gè)思路,是否采用還需要考慮企業(yè)主要運(yùn)營(yíng)的平臺(tái)。



1.4 閃屏的表現(xiàn)形式

閃屏這種表現(xiàn)形式雖然點(diǎn)擊率并不高,但是一種很好蹭熱度的方法。對(duì)閃屏的設(shè)計(jì),設(shè)計(jì)師只需要思考好用什么呈現(xiàn)表現(xiàn)形式為閃屏物料注入新的活力,例如用下面這種只突出主體物和標(biāo)題的表現(xiàn)形式,把內(nèi)容更加精簡(jiǎn)、準(zhǔn)確地傳遞給用戶(hù),這種表現(xiàn)形式就很好。





二、了解興趣低的原因

在第二部分里,我想分為4個(gè)模塊——了解興趣低的原因、用形式提高用戶(hù)興趣、讓標(biāo)題文案更加突出、用獵奇心理引起用戶(hù)興趣,來(lái)談一談我對(duì)“用戶(hù)興趣”的理解。


2.1 解決用戶(hù)興趣的方法

早期的互聯(lián)網(wǎng)產(chǎn)品以工具為主,例如百度就是用來(lái)搜索的、QQ就是用來(lái)聊天的、淘寶就是用來(lái)買(mǎi)東西的,這些產(chǎn)品呈現(xiàn)的感覺(jué)都以簡(jiǎn)潔清晰為主,但隨之互聯(lián)網(wǎng)越來(lái)越普及,娛樂(lè)產(chǎn)品出現(xiàn)與工具類(lèi)產(chǎn)品越來(lái)越多的差異性趨勢(shì)發(fā)展,尤其對(duì)于運(yùn)營(yíng)設(shè)計(jì),簡(jiǎn)潔清晰變得沒(méi)那么重要,個(gè)性、趣味才是占據(jù)主導(dǎo)。想要運(yùn)營(yíng)設(shè)計(jì)做得讓用戶(hù)有興趣,不妨試一試我下面所說(shuō)的四個(gè)技巧。



2.2 為什么要“動(dòng)”會(huì)引起用戶(hù)興趣

以圖片+內(nèi)容的這種展現(xiàn)形式在市場(chǎng)出現(xiàn)很久了,對(duì)用戶(hù)的吸引度不免有減弱的趨勢(shì),在這一階段我們需要尋找一種更加有趣的形式來(lái)吸引用戶(hù)。


興趣可以用更為科學(xué)的方法“注目度”來(lái)解釋?zhuān)?dāng)我們眼睛在看到某一個(gè)事物的時(shí)候,大腦會(huì)根據(jù)事物的形態(tài)給一個(gè)由“強(qiáng)”到“弱”的排序,去支配眼睛去觀察事物,如下圖所示,我們可以直觀地看到“動(dòng)畫(huà)”這個(gè)類(lèi)目是排在前面的。大部分用戶(hù)在看到運(yùn)營(yíng)活動(dòng)內(nèi)容的精神狀態(tài)(注目度)是分散的,所以要搶占用戶(hù)的時(shí)間,設(shè)計(jì)用戶(hù)第一眼的吸引力。




三、用形式提高用戶(hù)興趣


3.1 加入更多的動(dòng)效

根據(jù)上面的結(jié)論,在提高用戶(hù)興趣這個(gè)問(wèn)題上,我們完全可以增加展示效果的動(dòng)效來(lái)做到,很多產(chǎn)品也是這樣做的。


比如今年拼多多的Banner上,做了一些標(biāo)題旋轉(zhuǎn)、優(yōu)惠券飛出的動(dòng)畫(huà)效果:

  


像京東購(gòu)物節(jié)中做一些開(kāi)場(chǎng)的動(dòng)畫(huà)效果:

  



在活動(dòng)流程上面的動(dòng)效,比如在一些抽獎(jiǎng)環(huán)節(jié)模擬真實(shí)物體的運(yùn)動(dòng)軌跡:

  




在圖標(biāo)或者標(biāo)簽上面加一些位移、漸隱漸顯的動(dòng)畫(huà)效果:

  


在一些彈窗上面加上一圈光效,也是一個(gè)不錯(cuò)的選擇:

  


如今在運(yùn)營(yíng)活動(dòng)上加入更多的動(dòng)效是設(shè)計(jì)師必備技能之一,最常規(guī)的就是把畫(huà)面中的某一個(gè)元素變大,像是下面的按鈕,采用放大縮小的動(dòng)效。

  


或者是按鈕旁邊加上一個(gè)手指的元素,也可以起到吸引用戶(hù)的目的。

  


元素圍繞主題物周邊沿著運(yùn)動(dòng)軌跡活動(dòng)。

  


關(guān)于動(dòng)效的案例,這里我就不一一舉例說(shuō)明了,大家可以登錄螞蟻設(shè)計(jì)服務(wù)平臺(tái) - 犸良這個(gè)平臺(tái)獲取靈感。



2.2 以靜制動(dòng)

對(duì)于不會(huì)動(dòng)效軟件的同學(xué)也沒(méi)有關(guān)系,也可以著重對(duì)畫(huà)面的張力進(jìn)行設(shè)計(jì),以靜至動(dòng),以下我就分享幾個(gè)以靜至動(dòng)的方法。


·元素之間的動(dòng)勢(shì):合理的運(yùn)營(yíng)元素之間的組合關(guān)系可以營(yíng)造出有動(dòng)的感覺(jué),如果單單放一個(gè)開(kāi)飛機(jī)的場(chǎng)景可能并沒(méi)有感覺(jué)在飛,但如果加上飛翔的紅包、模糊的背景,那就感覺(jué)真的在開(kāi)飛機(jī)。


·有力的指引力:如果單單地放一張優(yōu)惠券,不會(huì)產(chǎn)生吸引人的觀感,但設(shè)計(jì)四只手從四個(gè)方向爭(zhēng)搶的畫(huà)面,就會(huì)感覺(jué)畫(huà)面有力量有爭(zhēng)搶的感覺(jué)。


·以破形產(chǎn)生動(dòng)感:畫(huà)面中從左側(cè)設(shè)計(jì)一張卡片,遠(yuǎn)處門(mén)的入口塑造的,大膽地破形處理,很容易營(yíng)造出一種動(dòng)態(tài)感覺(jué)。


·夸張的構(gòu)圖設(shè)計(jì):當(dāng)然了不同的視角和構(gòu)圖也可以讓畫(huà)面感覺(jué)生動(dòng),如下面這樣的構(gòu)圖就會(huì)給用戶(hù)營(yíng)造出一種畫(huà)面外還有畫(huà)面的感覺(jué)。


·營(yíng)造運(yùn)動(dòng)畫(huà)面感:下面這套海報(bào)采用硬朗的直線(xiàn)和運(yùn)營(yíng)動(dòng)作的完美結(jié)合,通過(guò)營(yíng)造強(qiáng)烈的運(yùn)動(dòng)感給用戶(hù)傳達(dá)動(dòng)的感覺(jué)。



2.3 視頻推廣的形式

由于短視頻領(lǐng)域的興起,朋友圈中轉(zhuǎn)發(fā)視頻的用戶(hù)也日益增加,如果設(shè)計(jì)師可以給運(yùn)營(yíng)經(jīng)理在以視頻形式進(jìn)行運(yùn)營(yíng)活動(dòng)的推廣的需求上出謀劃策的話(huà),也是一個(gè)很專(zhuān)業(yè)的設(shè)計(jì)師了。





四、讓標(biāo)題文案更加突出


造成用戶(hù)不感興趣的原因還有可能是信息傳遞效率不高,用戶(hù)無(wú)法通過(guò)標(biāo)題知道這是什么活動(dòng),怎么可能引起用戶(hù)的興趣而點(diǎn)擊?

標(biāo)題的文案可謂是用戶(hù)判斷信息的首要思想要素,他能迅速讓用戶(hù)了解活動(dòng)主題,傳達(dá)活動(dòng)興趣點(diǎn),激發(fā)用戶(hù)參與。


4.1 選擇識(shí)別度高的字體

設(shè)計(jì)師是一個(gè)創(chuàng)造美的職業(yè),但是也要有取舍,在我看來(lái)漂亮固然重要但高效的信息傳遞更為重要,尤其是在運(yùn)營(yíng)活動(dòng)的標(biāo)題設(shè)計(jì)上應(yīng)該盡量選擇一些識(shí)別度高的字體,先讓用戶(hù)清楚地知道該活動(dòng)是干什么的,再用特殊的技法去吸引用戶(hù)點(diǎn)擊。


在標(biāo)題字體上我比較推薦使用無(wú)襯線(xiàn)字體,因?yàn)楹隗w去掉過(guò)多的襯線(xiàn)裝飾,是橫平豎直,筆畫(huà)粗細(xì)均衡,使字更為精練并且醒目。例如下面這張效果圖,都是在黑體的字體基礎(chǔ)上做的設(shè)計(jì),光看標(biāo)題就可以清楚活動(dòng)大致是個(gè)什么類(lèi)型的了。



4.2 給字體加點(diǎn)效果

如果覺(jué)得以上的方法并不能給用戶(hù)起到視覺(jué)沖擊力的效果,不妨給標(biāo)題的字體加一點(diǎn)效果圖,比如立體效果、加裝飾物、更改字體結(jié)構(gòu)等等,如圖

我推薦一個(gè)我自己作圖的習(xí)慣,就是先做標(biāo)題文案的樣式設(shè)計(jì),再做配圖元素的設(shè)計(jì),我覺(jué)得這個(gè)方法既可以突出標(biāo)題文案字體設(shè)計(jì)又很高效。博大精深,有機(jī)會(huì)后期會(huì)寫(xiě)一篇字體設(shè)計(jì)的文章,敬請(qǐng)期待吧。





五、用獵奇心理引起用戶(hù)興趣


以下內(nèi)容不算是設(shè)計(jì)技法的內(nèi)容了,算是運(yùn)營(yíng)思維方面的小竅門(mén),我認(rèn)為身為運(yùn)營(yíng)設(shè)計(jì)師,還是有必要知道的。



5.1 倒計(jì)時(shí)營(yíng)造緊張感

如果在手機(jī)海報(bào)的表現(xiàn)形式上,加入以下這種“倒計(jì)時(shí)”主題,有助于激發(fā)起用戶(hù)期待感和代入感,起到事半功倍的效果。


5.2 明星的效應(yīng)

如果活動(dòng)中有明星素材可以使用,千萬(wàn)不要放過(guò)這個(gè)機(jī)會(huì),因?yàn)槊餍亲詭Я髁亢驮?huà)題,也是吸引用戶(hù)興趣,提高流量的好辦法。


5.3 節(jié)日的熱點(diǎn)

一年中有很多節(jié)日或者節(jié)氣的時(shí)間節(jié)點(diǎn),這些時(shí)間節(jié)點(diǎn)自帶吸睛功能,可以把他們當(dāng)成借勢(shì)營(yíng)銷(xiāo)的主題,有的放矢地制作活動(dòng)宣傳圖,增加曝光度,保證營(yíng)銷(xiāo)的新鮮度。


接下來(lái),讓我們談一談第三個(gè)問(wèn)題——用戶(hù)審美疲勞。









隨著市場(chǎng)上充斥大量運(yùn)營(yíng)活動(dòng),對(duì)用戶(hù)來(lái)說(shuō)不免會(huì)造成審美疲勞,而用戶(hù)出現(xiàn)審美疲勞的情況也是造成運(yùn)營(yíng)數(shù)據(jù)下降一個(gè)重要的因素。



一、了解什么叫審美疲勞


1.1 審美疲勞的概念

所謂審美疲勞,源于一個(gè)經(jīng)典的心理學(xué)概念——刺激適應(yīng)(Sensory Adaptation),就是用戶(hù)長(zhǎng)時(shí)間接觸一種類(lèi)型或者表現(xiàn)形式的事物而產(chǎn)生的厭倦、麻木的心理,最終都會(huì)被“適應(yīng)”(即令人無(wú)感覺(jué))。


這里我列一個(gè)例子,比如每天打你一棍子,你當(dāng)然很不爽。但是連續(xù)打你一年后,你并不會(huì)感覺(jué)到不爽了,因?yàn)樗兂闪四闵畹囊徊糠?,你已?jīng)沒(méi)有感覺(jué)了——這就是刺激適應(yīng)。


1.2 為什么會(huì)出現(xiàn)審美疲勞

審美疲勞的出現(xiàn),有其客觀必然性,多數(shù)情況造成用戶(hù)審美疲勞的原因可以分為兩種:


內(nèi)容上眼花繚亂:是指一方面市場(chǎng)的運(yùn)營(yíng)活動(dòng)太多,另一方面是活動(dòng)內(nèi)容讓用戶(hù)提不起興趣,久而久之自然就會(huì)產(chǎn)生審美疲勞的心理。


時(shí)間上的心生厭倦:這是人正常的心理狀態(tài),當(dāng)人從外部獲得了幸福感(升值、金錢(qián)、美食)多會(huì)隨著時(shí)間的推移最終回到基礎(chǔ)水平。

這里我列一個(gè)例子,比如剛收到名校錄取通知書(shū)的大學(xué)生,感覺(jué)到幸福感爆棚,但也最多持續(xù)幾個(gè)月——等他入學(xué)后,日復(fù)一日地上課下課和高中生活一樣,慢慢地覺(jué)得索然無(wú)味。



二、審美疲勞的解決方法

對(duì)于內(nèi)容讓用戶(hù)提不起興趣這一點(diǎn),我在前一章我已經(jīng)闡述了自己的觀點(diǎn),這里不做過(guò)多贅述了。但是我們可以就“時(shí)間上的心生厭倦”這一問(wèn)題出發(fā),來(lái)討論設(shè)計(jì)方面的解決方法。


在我看來(lái)設(shè)計(jì)側(cè)的解決方法其實(shí)就一個(gè)詞——新穎,我總結(jié)設(shè)計(jì)師可以從以下5個(gè)方面著手進(jìn)行設(shè)計(jì)方案的確立——夸張視角、細(xì)致刻畫(huà)、多種風(fēng)格、故事性、游戲化。



2.1 設(shè)計(jì)一些新奇的視角

這種方法屬于吸引眼球而追求的形式上的“奇特”,比如我們看看第一幅設(shè)計(jì)稿(植美村的頁(yè)面),夸張的魚(yú)眼大透視配合風(fēng)格感十足的原畫(huà)級(jí)頁(yè)面,至少第一眼就把我震撼了。


或者以微觀視角看世界的視角去做設(shè)計(jì)稿,比如說(shuō)OPPO的運(yùn)營(yíng)圖設(shè)計(jì),正常視角中人永遠(yuǎn)都是比手表大的,但如果反過(guò)來(lái)去觀察,就好比自己像是一個(gè)小微生物去觀察這個(gè)視覺(jué),會(huì)給用戶(hù)一種很新奇的感覺(jué)。



2.2 把刻畫(huà)發(fā)揮到極致

形、色、質(zhì)、構(gòu)是搭建一個(gè)畫(huà)面的基礎(chǔ),其中質(zhì)感是拉開(kāi)差距的關(guān)鍵,它是細(xì)微的,往往有質(zhì)感的視覺(jué)感受會(huì)給用戶(hù)一種高級(jí)的感覺(jué),吸引用戶(hù)點(diǎn)擊或者是向下滑動(dòng)瀏覽更多的內(nèi)容。身為設(shè)計(jì)應(yīng)該更專(zhuān)注于自己觀察方法和技法的提升,一個(gè)圖層達(dá)不到想要的效果,那兩個(gè)圖層呢?那把其中一個(gè)圖層的圖層樣式調(diào)整成“正片疊底”呢?


質(zhì)感雖然是一個(gè)相對(duì)抽象的詞,但是做出質(zhì)感并沒(méi)有想象中的那么難,最重要的就是有耐心多做一些層次,如下圖,不管是以文字或者圖像為主形象的效果,都是因?yàn)榭紤]了字體變形、字體結(jié)構(gòu)、投影、高光、色塊對(duì)比等細(xì)節(jié),才會(huì)讓整體的效果給人一種很有質(zhì)感的感覺(jué)。


*設(shè)計(jì)技法的提升是一個(gè)很漫長(zhǎng)的過(guò)程,比較注重于直覺(jué)和感性的認(rèn)知能力的培養(yǎng),要多觀察、多嘗試,要相信自己總會(huì)有成功的那一天的。



如果你會(huì)3D類(lèi)型的軟件那就太好了,因?yàn)?D類(lèi)型的工具最終呈現(xiàn)的畫(huà)面本身就帶有空間關(guān)系并且由于可以渲染不同種類(lèi)質(zhì)感的材質(zhì),畫(huà)面天生帶有一種質(zhì)感,比如下面這兩張圖如果單單地鋪上一個(gè)大色塊點(diǎn)綴一些圖形元素和3D類(lèi)型的作品對(duì)比來(lái)看,質(zhì)感還是差一截子。左側(cè)是質(zhì)感相對(duì)較弱的落地頁(yè),右側(cè)是質(zhì)感較好的落地頁(yè),如果你是用戶(hù)的話(huà),你會(huì)點(diǎn)擊哪個(gè)?又會(huì)向下劃動(dòng)查看哪個(gè)呢?


并且現(xiàn)在的移動(dòng)端設(shè)備的性能都有提升,并且5g的技術(shù)也在市場(chǎng)中出現(xiàn),以前的3D場(chǎng)景加載卡頓的問(wèn)題也逐漸在消失,我們不妨事先在運(yùn)營(yíng)活動(dòng)中多加入一些3D的效果,來(lái)博取用戶(hù)眼球。


就目前來(lái)看視覺(jué)觀感偏向越來(lái)越立體化,而不是簡(jiǎn)單的平視扁平效果,以下這種成系列的設(shè)計(jì)稿,是深受用戶(hù)所喜歡的,并且成系列的設(shè)計(jì)稿,也很容易讓用戶(hù)產(chǎn)生記憶點(diǎn),是一個(gè)我非常推薦的做法。



2.3 多種風(fēng)格的探索

為什么要做多種風(fēng)格的運(yùn)營(yíng)設(shè)計(jì)呢?從設(shè)計(jì)美學(xué)的角度上來(lái)講,用戶(hù)的審美性質(zhì)在發(fā)生變化,由過(guò)去“專(zhuān)注式”的審美在強(qiáng)大的信息流影響下變成娛樂(lè)式的“快餐式”審美,所以做多種風(fēng)格這是適應(yīng)市場(chǎng)趨勢(shì)的必然結(jié)果。


每個(gè)企業(yè)的目標(biāo)并不是為了用戶(hù)設(shè)計(jì)出更好的視覺(jué)作品,企業(yè)的目的是在于用“創(chuàng)意”快速吸引用戶(hù)眼球。有點(diǎn)兒像是鉛筆和鋼筆的關(guān)系,不是為了最好的鉛筆而是鋼筆,而是為了設(shè)計(jì)出可以代替鉛筆的鋼筆。


例如下圖中的描邊MBE風(fēng)格、孟菲斯、噪點(diǎn)插畫(huà)、復(fù)古等風(fēng)格都可以運(yùn)營(yíng)到設(shè)計(jì)中。


今年大火的酸性設(shè)計(jì)(最早出現(xiàn)在西方60年代迷幻搖滾(Aicd Rock)文化中)是一種打破傳統(tǒng)美感的設(shè)計(jì),暗調(diào)的背景和鐳射材質(zhì)的素材搭配鏤空的字體設(shè)計(jì),在視覺(jué)感受上制造出一種迷幻絢爛的氛圍,特別適合用在一些需要體現(xiàn)“潮流、新銳、個(gè)性”的視覺(jué)設(shè)計(jì)中。文章結(jié)尾我也給大家準(zhǔn)備了素材,需要的去獲取吧。



2.4 有故事性活動(dòng)延展

大多數(shù)用戶(hù)都喜歡聽(tīng)故事,在故事中包裝自己的產(chǎn)品,告訴用戶(hù)可獲得什么好處的這種方法也是提高運(yùn)營(yíng)活動(dòng)的數(shù)據(jù)的一種好辦法。


這種形式早在2017年的offo就有用過(guò),當(dāng)時(shí)ofof的產(chǎn)品有借助于《神偷奶爸3》中小黃人的形象,設(shè)計(jì)了一系列新的自行車(chē)造型,以一系列報(bào)紙的形式設(shè)計(jì),以小黃人車(chē)潛入車(chē)間為主要故事,了解 OFO小黃人版是如何造出來(lái)的,某種程度上說(shuō)很好地宣傳了 OFO。


例如《德芙Dove x故宮》的H5項(xiàng)目中,用長(zhǎng)卷的表現(xiàn)形式繪制了從清朝至現(xiàn)代的過(guò)年場(chǎng)景,意指“以前宮里人也吃德芙,現(xiàn)在將德芙的福氣傳到千家萬(wàn)戶(hù)”,讓用戶(hù)眼前一亮的同時(shí),也宣傳了企業(yè)產(chǎn)品。


《當(dāng)代清明上河圖》,快手品牌宣傳H5項(xiàng)目中,設(shè)計(jì)師將現(xiàn)代與古代結(jié)合,通過(guò)長(zhǎng)圖繪制生活百態(tài),用不同的故事來(lái)講述勵(lì)志故事和暖心故事,是故事性宣傳企業(yè)品牌的經(jīng)典案例。



2.5 活動(dòng)ip的游戲化

用戶(hù)對(duì)簡(jiǎn)單的商品宣傳(運(yùn)營(yíng)活動(dòng))是沒(méi)有什么興趣的,但是如果把運(yùn)營(yíng)活動(dòng)包裝成一個(gè)游戲,卻能俘獲用戶(hù)的芳心。很多企業(yè)正是抓出用戶(hù)的這個(gè)心理,在自己企業(yè)的ip形象上做足了功夫,阿里巴巴集團(tuán)就是這樣一個(gè)典型的企業(yè),只要是過(guò)節(jié),ip形象總能參與其中發(fā)揮其最大的商業(yè)價(jià)值,是典型把ip形象加入運(yùn)營(yíng)活動(dòng)游戲化的企業(yè)。


每年支付寶都會(huì)有積攢5福的游戲,在2021年他們還升級(jí)了自己的ip形象,讓用戶(hù)體驗(yàn)更加升級(jí)。ip形象的游戲化,未來(lái)也會(huì)成為一個(gè)趨勢(shì),每年應(yīng)該都會(huì)有吉祥物來(lái)送錢(qián)。




三、構(gòu)圖好就成功了一半

畫(huà)面清晰、構(gòu)圖合理應(yīng)該是做運(yùn)營(yíng)設(shè)計(jì)的第一準(zhǔn)則,尤其是大家都審美疲勞的今天,有一個(gè)好的構(gòu)圖,可以起到事半功倍的效果。


接下來(lái)我就介紹運(yùn)營(yíng)活動(dòng)中常用的四種構(gòu)圖方法,便于大家在工作中有規(guī)律有節(jié)奏地排版畫(huà)面上的圖形、文字、元素之間的關(guān)系。



3.1 上下構(gòu)圖法

“上下的構(gòu)圖法”是將布局分成上、下兩個(gè)部分,或使整個(gè)畫(huà)面元素呈上下分布的趨勢(shì),主要信息(標(biāo)題)常常融入圖片中,放在主空間成為主體,閱讀性文字放在次空間,這種構(gòu)圖的特點(diǎn)是內(nèi)容的沖擊力比較強(qiáng)。



3.2 左右構(gòu)圖法

“左右構(gòu)圖法”是占據(jù)圖片和文字的一部分,形成左右兩個(gè)獨(dú)立的空間,產(chǎn)生良好的閱讀體驗(yàn)。很實(shí)用的一種構(gòu)圖方式。這種構(gòu)圖的特點(diǎn)所占圖幅較小,但要求文案的數(shù)量需要精簡(jiǎn),盡量不超過(guò)6個(gè)字。



3.3 三分構(gòu)圖法

“三分構(gòu)圖法”是將畫(huà)面中的內(nèi)容三等分,并突出c位的信息,旁邊有裝飾元素圍繞增添畫(huà)面的氣氛,具有穩(wěn)定性又可以避免使用中心構(gòu)圖形成的呆板感。



3.4 中心構(gòu)圖法

“中心構(gòu)圖法”是把主體放置于畫(huà)面視覺(jué)中心,形成視覺(jué)焦點(diǎn),再利用其他信息烘托與呼應(yīng)主體。其特點(diǎn)是能夠突出重點(diǎn)信息,讓用戶(hù)一目了然。



3.5 對(duì)角構(gòu)圖法

“中心構(gòu)圖法”是指對(duì)畫(huà)面進(jìn)行等值分割,并將所要表達(dá)的信息對(duì)角排列。這種構(gòu)圖方式,會(huì)讓頁(yè)面顯得更靈活,有動(dòng)勢(shì),讓畫(huà)面有更多可能性。



3.6 傾斜構(gòu)圖法

“傾斜構(gòu)圖法”是版面整體或部分元素以?xún)A斜的角度呈現(xiàn)在畫(huà)面上,能很好地營(yíng)造出輕松、動(dòng)感、刺激等氣氛感,一般游戲類(lèi)活動(dòng)也會(huì)比較常用。









好的運(yùn)營(yíng)活動(dòng)會(huì)為企業(yè)帶來(lái)可觀的短期收益這是眾多互聯(lián)網(wǎng)企業(yè)所認(rèn)同的,也是每一個(gè)企業(yè)所需要的,以下是我對(duì)運(yùn)營(yíng)設(shè)計(jì)的一些經(jīng)驗(yàn)心法,希望對(duì)你有所幫助




一、如何最大限度地規(guī)避返工風(fēng)險(xiǎn)

對(duì)于設(shè)計(jì)者來(lái)說(shuō),最苦惱的是改稿,特別是那種做許多疊加質(zhì)感光效的效果圖,改起來(lái)成本很高,改稿這件事對(duì)運(yùn)營(yíng)設(shè)計(jì)師來(lái)說(shuō)可以說(shuō)是最頭疼的事。


針對(duì)這種返工改稿的情況,我個(gè)人認(rèn)為問(wèn)題多數(shù)出在“溝通”這個(gè)環(huán)節(jié)。在溝通環(huán)節(jié)中最要解決的核心問(wèn)題就是要進(jìn)行有效的溝通,如果需求方(運(yùn)營(yíng)經(jīng)理)和設(shè)計(jì)師之間的溝通是無(wú)效的,改稿那是必然結(jié)果,下面是我對(duì)于“高效溝通”上的3點(diǎn)經(jīng)驗(yàn)。



1.1 明確項(xiàng)目的目標(biāo)

身為設(shè)計(jì)師的你遇到一次兩次交付后要改稿的情況倒是沒(méi)有關(guān)系,有些協(xié)同的同事是初次合作,難免有些觀點(diǎn)不對(duì)齊的情況,這屬于正常的,但是經(jīng)常遇到這種情況就要引起重視了。


需要反思一下是不是自己對(duì)項(xiàng)目的目標(biāo)沒(méi)有搞清楚,在做項(xiàng)目之前我建議直接讓需求方說(shuō)出痛點(diǎn),多問(wèn)問(wèn)目標(biāo)用戶(hù)群體是誰(shuí)?投放平臺(tái)和渠道是哪些?上線(xiàn)時(shí)間和排期?尺寸大小等問(wèn)題,把目標(biāo)明確下來(lái)。


1.2 從抽象化到具象化

人和人受到教育不同,理解能力是不同的,有的需求方上來(lái)就說(shuō)了很多概念詞匯,比如我希望這次運(yùn)營(yíng)活動(dòng)是高端、大氣、上檔次的,這很難讓設(shè)計(jì)師正確地理解。


對(duì)于這種情況,我建議找一些可用的真實(shí)案例給到需求方,將抽象的概念具象化,事先搞清楚需求方心中的畫(huà)面是什么樣子的,特別是要明確設(shè)計(jì)風(fēng)格、配色方案、背景元素、圖文板式結(jié)構(gòu)等信息。



1.3 提前弄清楚運(yùn)營(yíng)活動(dòng)的要求

關(guān)于版權(quán)的問(wèn)題是有可能導(dǎo)致項(xiàng)目無(wú)法上線(xiàn)的,我之前的一個(gè)項(xiàng)目就因?yàn)镃4D這款軟件侵權(quán)收到了一份律師函,需要將帶有3D效果的在線(xiàn)元素全部替換。


因此在項(xiàng)目啟動(dòng)前可與需求方確認(rèn)有關(guān)字體版權(quán)、圖片版權(quán)、軟件使用權(quán)等問(wèn)題,避免在效果圖出來(lái)后再去調(diào)整,耗費(fèi)公司人力成本。



1.4 除了溝通還應(yīng)該設(shè)立審核環(huán)節(jié)

這個(gè)并不屬于交流的范疇,但是我覺(jué)得他也是影響設(shè)計(jì)師反復(fù)改圖的重要原因之一,還是有必要說(shuō)一下的。


運(yùn)營(yíng)活動(dòng)上線(xiàn)都是有明確時(shí)間節(jié)點(diǎn)的排期安排的,所以設(shè)計(jì)稿審核的環(huán)節(jié)要特別重視,尤其是大型的運(yùn)營(yíng)活動(dòng)不要等到最后的環(huán)節(jié)再去審核,因?yàn)槿绻麑徍瞬煌ㄟ^(guò)有可能會(huì)重新做,所以在設(shè)計(jì)過(guò)程之中應(yīng)多設(shè)立幾個(gè)審核環(huán)節(jié),保持和需求方的想法是時(shí)時(shí)同步的,千萬(wàn)不要等交付時(shí)間快到了再進(jìn)行審核,到時(shí)候誰(shuí)加班誰(shuí)痛苦。詳細(xì)審核環(huán)節(jié)設(shè)置,大家可以參照下面的圖片:






二、運(yùn)營(yíng)設(shè)計(jì)其實(shí)也可以增效

“增效”這個(gè)詞近幾年火得不行,尤其是和老板說(shuō)增效的事情,他會(huì)非常感興趣的。以下是我親身經(jīng)歷的一個(gè)項(xiàng)目,也正是從這個(gè)時(shí)候開(kāi)始,我開(kāi)始思考團(tuán)隊(duì)增效的事情。



2.1 明白運(yùn)營(yíng)經(jīng)理想要什么

以前遇到一個(gè)運(yùn)營(yíng)活動(dòng)落地頁(yè)的項(xiàng)目,需求方說(shuō);“我們不需要繪制復(fù)雜的插畫(huà)放在Banner里,簡(jiǎn)單畫(huà)點(diǎn)喜慶的元素,把活動(dòng)標(biāo)題展現(xiàn)清楚就好了,設(shè)計(jì)同學(xué)也不需要花那么多時(shí)間來(lái)設(shè)計(jì),你們能多久給到我呢?。”


我相信有不少小伙伴曾經(jīng)遇到過(guò)這個(gè)情況,通過(guò)以上案例,不難看出設(shè)計(jì)師想要的跟運(yùn)營(yíng)經(jīng)理想要的并不一樣。大部分運(yùn)營(yíng)經(jīng)理更在意的是文案的露出、能多快地交付;而大部分運(yùn)營(yíng)設(shè)計(jì)師更在意的是圖片美不美、炫不炫,整體的圖形表達(dá)最終給用戶(hù)的感覺(jué)是否和設(shè)計(jì)師所想的一致。



2.2 增效的兩種方式

在理解了運(yùn)營(yíng)經(jīng)理他們所在意的事情之后,我發(fā)現(xiàn)針對(duì)有嚴(yán)格交付時(shí)間的運(yùn)營(yíng)項(xiàng)目而言,運(yùn)營(yíng)設(shè)計(jì)的增效是很有必要的。一般來(lái)說(shuō)“增效”有兩種方式,一種是提高輸出效率,另外一種是降低人工成本。


提高輸出效率:我知道在行業(yè)內(nèi),58集團(tuán)自主研發(fā)的運(yùn)營(yíng)頁(yè)面設(shè)計(jì)平臺(tái)——斑馬智能物料設(shè)計(jì)審核平臺(tái)和靈動(dòng)編輯器算是兩款增效的工具,這兩款工具為運(yùn)營(yíng)工作提供高效且高質(zhì)量的輸出環(huán)境。


降低人工成本:我相信大多數(shù)同學(xué)的公司是沒(méi)有這類(lèi)平臺(tái)資源,不用擔(dān)心,沒(méi)有我們可以自己搭建簡(jiǎn)略版的組件代替,比如公司里有些運(yùn)營(yíng)活動(dòng)要跟上新聞熱點(diǎn),如果我們事先做好3-5個(gè)尺寸一致的模版套件,當(dāng)新聞熱點(diǎn)來(lái)的時(shí)候只需要插入圖片更新標(biāo)題就可以先推送出去,這種做法會(huì)極大地降低設(shè)計(jì)師的制作成本。


再比如組內(nèi)成員可以利用平時(shí)的工作時(shí)間做一些通用的組件如紅包、優(yōu)惠券等,在要求快速完成運(yùn)營(yíng)活動(dòng)的時(shí)候,可以挑選風(fēng)格合適的樣式替換。





三、做好運(yùn)營(yíng)需要了解用戶(hù)心理

縱觀市場(chǎng),會(huì)發(fā)現(xiàn)大部分設(shè)計(jì)師都是作圖高手,那些能夠在前期參與策劃運(yùn)營(yíng)活動(dòng),幫助運(yùn)營(yíng)經(jīng)理想一些更有趣好玩兒的idea的人才是鳳毛麟角的。



3.1 需要有正向、反向思考角度

記得看過(guò)一次求職類(lèi)節(jié)目,一位求職者推銷(xiāo)頸椎治療儀的案例讓我印象深刻。因?yàn)樗耐其N(xiāo)過(guò)程很精彩,他用了兩種方法去推銷(xiāo)產(chǎn)品。


第一種思路:介紹產(chǎn)品的優(yōu)點(diǎn),表示你買(mǎi)了我們的頸椎儀脖子的酸痛問(wèn)題會(huì)得到緩解。

第二種思路:如果你不買(mǎi)我們的頸椎儀,你很有可能因?yàn)轭i椎不舒服而失去良好的睡眠質(zhì)量。


當(dāng)然那個(gè)應(yīng)聘者也得到了心儀的企業(yè)offer,那時(shí)候我就覺(jué)得這位應(yīng)聘者很聰明,聰明的點(diǎn)在于對(duì)猶豫不決、不想買(mǎi)的用戶(hù)都設(shè)計(jì)了自己的對(duì)策。


對(duì)猶豫不決的用戶(hù)來(lái)說(shuō),通過(guò)正向介紹產(chǎn)品優(yōu)勢(shì),從而獲取用戶(hù)青睞;對(duì)于不想買(mǎi)的用戶(hù)則利用反向思維講述這個(gè)產(chǎn)品會(huì)和你睡眠質(zhì)量有關(guān)系。


設(shè)計(jì)師是一個(gè)很重視用戶(hù)同理心的一個(gè)職業(yè),當(dāng)我們?cè)绞橇私庥脩?hù)的想法,就會(huì)知道用戶(hù)最需要什么,做的設(shè)計(jì)也就能更好地貼合用戶(hù)需求,最終完成提高運(yùn)營(yíng)活動(dòng)的數(shù)據(jù)的運(yùn)營(yíng)目標(biāo)。



3.2 觸發(fā)點(diǎn)擊行為和用戶(hù)心理有關(guān)系

2009年,斯坦福大學(xué)行為科學(xué)教授福格(Fogg)提出了一種人體行為模型,簡(jiǎn)稱(chēng)為 FBM。根據(jù)這一模型,他提出促使一個(gè)人的行為的發(fā)生離不開(kāi)三個(gè)因素:行為動(dòng)機(jī)(Motivation),行為能力(Ability)和觸發(fā)條件(Triggers),用公式表達(dá)就是B=MAT。用戶(hù)行為的產(chǎn)生需要?jiǎng)訖C(jī)、能力、觸發(fā)等有機(jī)結(jié)合,通過(guò)對(duì)動(dòng)機(jī)、能力、觸發(fā)等干預(yù)可以影響使用者的行為。


引發(fā)用戶(hù)點(diǎn)擊行為,本就是運(yùn)營(yíng)設(shè)計(jì)師必須要做的事情,但是觸發(fā)用戶(hù)點(diǎn)擊這個(gè)行為就要洞察到用戶(hù)心理所想。這里我推薦《飛書(shū)官方-認(rèn)知偏差知識(shí)手冊(cè)》,大家可以從這本書(shū)里面了解一些用戶(hù)基礎(chǔ)的心理學(xué)知識(shí)。


這里我還想補(bǔ)充一點(diǎn),設(shè)計(jì)師為什么要學(xué)習(xí)心理學(xué)。如果有人問(wèn)你設(shè)計(jì)是什么,很多人都會(huì)回答設(shè)計(jì)就是解決問(wèn)題,這是一個(gè)很標(biāo)準(zhǔn)的答案。在我看來(lái),設(shè)計(jì)解決兩個(gè)問(wèn)題,第一個(gè)就是實(shí)現(xiàn),把以前沒(méi)有的東西做出來(lái),第二個(gè)就是推廣,把已有的東西賣(mài)出去讓更多人知道。很明顯運(yùn)營(yíng)屬于第二種。


但是需要大家注意的是主語(yǔ),上一句話(huà)的主語(yǔ)是“設(shè)計(jì)”而不是“設(shè)計(jì)師”。設(shè)計(jì)師更像是一個(gè)翻譯官的角色,其本質(zhì)在于精準(zhǔn)地表達(dá),設(shè)計(jì)師利用擅長(zhǎng)的圖形、色塊等元素給用戶(hù)傳遞信息,比如說(shuō)格式塔原理就在于能幫助設(shè)計(jì)師,清晰地規(guī)劃出用戶(hù)先看到什么,提早預(yù)測(cè)出用戶(hù)看到這張圖會(huì)產(chǎn)生什么感受,做到可以通過(guò)設(shè)計(jì)技巧,讓用戶(hù)感受到設(shè)計(jì)師想傳遞的信息和感受,這就是我們要學(xué)習(xí)心理學(xué)的原因——為了更科學(xué)地了解用戶(hù)使用習(xí)慣(如格式塔原則可以科學(xué)地構(gòu)建效果圖的閱讀順序),做貼合用戶(hù)需要的設(shè)計(jì),讓用戶(hù)滿(mǎn)意,從而完成盈收的運(yùn)營(yíng)目標(biāo)。總結(jié)一句話(huà),運(yùn)營(yíng)設(shè)計(jì)師不僅要詢(xún)問(wèn)用戶(hù)想要什么,更要詢(xún)問(wèn)運(yùn)營(yíng)經(jīng)理想表達(dá)什么。



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(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ì)www.yvirxh.cn )是一家專(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)應(yīng)用篇

ui設(shè)計(jì)分享達(dá)人

《騰訊文檔-構(gòu)建科學(xué)有效的色彩系統(tǒng)》這篇文章中,我們闡述了騰訊文檔如何升級(jí)了新的品牌色,為騰訊文檔塑造更加有未來(lái)科技感及智慧感的視覺(jué)感受和品牌認(rèn)知,以及如何構(gòu)建一個(gè)科學(xué)有效的調(diào)色板。


在設(shè)計(jì)系統(tǒng)的實(shí)際運(yùn)行中,我們也需要著眼于如何應(yīng)用調(diào)色板,建設(shè)協(xié)同工作流,并給各個(gè)角色提供有關(guān)色彩的擴(kuò)展指導(dǎo),以達(dá)到在騰訊文檔中構(gòu)建一致且有品牌感的數(shù)字界面并有效提升效率的目的。

在建設(shè)騰訊文檔色彩系統(tǒng)的工作中,我們首先構(gòu)建了一個(gè)包含品牌色、灰色、輔助色的調(diào)色板,但僅有這個(gè)調(diào)色板不足以支撐我們流暢、無(wú)障礙的協(xié)同工作。日常工作中,“這里我用哪個(gè)藍(lán)色?”“這里我用哪個(gè)灰色?”“開(kāi)發(fā)同學(xué)能否快速的變更某些元素的顏色?”等等問(wèn)題層出不窮,建設(shè)系統(tǒng)的協(xié)同工作流迫在眉睫。



Chapter 1

——————————

如何建設(shè)?

HIG強(qiáng)調(diào)不要在APP中使用“硬代碼”,即十六進(jìn)制色值進(jìn)行編碼,但前期我們構(gòu)建的調(diào)色板僅有色值,這種硬代碼應(yīng)用到app中導(dǎo)致項(xiàng)目效率低下,維護(hù)也會(huì)成本激增。


于是在騰訊文檔中,我們開(kāi)始采用顏色變量(color token)和主題(theme)來(lái)管理顏色,顏色變量(color token)基于任務(wù)(role)、主題(theme),為UI中的任務(wù)指定十六進(jìn)制代碼的色值(hex value),以弭平設(shè)計(jì)師之間、開(kāi)發(fā)與設(shè)計(jì)師之間的溝壑,將顏色變量(color token)嵌入設(shè)計(jì)組件中與開(kāi)發(fā)代碼形成聯(lián)動(dòng),便于開(kāi)發(fā)利用程序中的變量來(lái)做全局修改,橫向提升團(tuán)隊(duì)的協(xié)作效率。


所謂顏色變量,通俗的意思就是可以將一個(gè)顏色按任務(wù)用途去抽象,抽象成一個(gè)有命名的顏色樣式,這個(gè)顏色樣式就是顏色變量。


在設(shè)計(jì)或者代碼中,可以通過(guò)修改這個(gè)顏色變量的值來(lái)進(jìn)行全局顏色的更新。例如,我們現(xiàn)在需要給button一個(gè)顏色,不要將其寫(xiě)為 #1E6FFF這樣的色值,而是將button的顏色指定為命名是Fill-01的顏色變量, 如果有重大版本更新,僅需將顏色變量Fill-01的色值更新,即可實(shí)現(xiàn)全局顏色的高效更新。如果在不同的主題下(例如淺色/深色模式)button有不同的顏色表現(xiàn),顏色變量Fill-01可以在不同主題下,映射不同的十六進(jìn)制色值。這就是我們建設(shè)協(xié)同工作流的的基礎(chǔ)邏輯。



Chapter 2

——————————

為調(diào)色板的基礎(chǔ)色值命名


調(diào)色板的各個(gè)色值(hex value)是最底層的基礎(chǔ)樣式,我們將色板上的顏色進(jìn)行規(guī)則化命名,以方便后期將其引用到顏色變量中。


騰訊文檔包含核心藍(lán)色、藍(lán)灰色、中性灰色及其他輔助色,按照顏色屬性,將其命名為:Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red,并在命名中加入色階后綴。

*騰訊文檔調(diào)色板命名圖表



Chapter 3

——————————

定義顏色使用規(guī)則


1、 從調(diào)色板中選擇合適的顏色并測(cè)試

從調(diào)色板中根據(jù)UI中的任務(wù)挑選合適的顏色并進(jìn)行可用性測(cè)試,做具體任務(wù)中顏色選擇的最優(yōu)解。


例如,我們需要選擇一個(gè)藍(lán)色作為鏈接色,作為文本,對(duì)比度必須達(dá)到4.5:1以上才符合WCAG2.0的可用性標(biāo)準(zhǔn)。經(jīng)過(guò)測(cè)試我們選擇了primayblue-02作為鏈接色。


騰訊文檔的界面中,灰色系列占主導(dǎo)地位,起著至關(guān)重要的作用,為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次。在調(diào)色板中,我們選擇了兩種灰色:中性灰色和藍(lán)灰色,來(lái)支撐系統(tǒng)的設(shè)計(jì)。藍(lán)色系列是騰訊文檔產(chǎn)品和體驗(yàn)的主要?jiǎng)幼黝伾?



同時(shí)我們也使用了其他顏色以滿(mǎn)足一些沖突性任務(wù)(警示等)的顏色使用,這些顏色需要謹(jǐn)慎、有目的地使用。



2 、根據(jù)任務(wù)定義顏色的使用規(guī)則

經(jīng)常會(huì)有設(shè)計(jì)師問(wèn),“這里我能用這個(gè)灰色嗎?”出現(xiàn)這種問(wèn)題,根本上還是顏色使用規(guī)則定義的不夠清晰,含混的口口相傳的規(guī)則會(huì)導(dǎo)致更多的混亂。于是,需要我們根據(jù)任務(wù)和使用場(chǎng)景把顏色的使用規(guī)則清晰的定義。


首先定義在界面中占主導(dǎo)地位的灰色、藍(lán)色的使用規(guī)則。


藍(lán)灰色_Grayblue:

在騰訊文檔中,藍(lán)灰色與品牌藍(lán)共同建立品牌印象,由此,藍(lán)灰色主要應(yīng)用于與風(fēng)格相關(guān)的場(chǎng)景。包括:圖標(biāo)色、填充底色及大面積的背景色等。



中性灰色_Gray:

中性灰色主要應(yīng)用于一些全局系統(tǒng)行為。如:文本、分割線(xiàn)及交互反饋hover、press等場(chǎng)景。



品牌藍(lán)色_Primayblue:

品牌藍(lán)色主要應(yīng)用于系統(tǒng)中的各種行為,如藍(lán)色圖標(biāo)、button、文本鏈接等。



其次定義在界面中用于警示、狀態(tài)提醒的其他顏色的使用規(guī)則。


紅色_Red:

紅色主要應(yīng)用于系統(tǒng)中需要警示的場(chǎng)景,如紅色警示圖形、錯(cuò)誤文本、紅色tag等。



其他顏色:

在騰訊文檔中,會(huì)針對(duì)不同的任務(wù)應(yīng)用不同的顏色,如左滑操作、成功提示、高亮顯示等。



品類(lèi)圖標(biāo)基準(zhǔn)色:

在騰訊文檔中,不同的品類(lèi)有不同的基準(zhǔn)色。



Chapter 4

——————————

顏色變量的語(yǔ)義化命名

定義了顏色在系統(tǒng)設(shè)計(jì)中的使用規(guī)則后,我們需要根據(jù)顏色變量的使用用途對(duì)其進(jìn)行語(yǔ)義化命名。一套好的語(yǔ)義化命名規(guī)則需要易于維護(hù)且具備可拓展性,如果只是將調(diào)色板的色值命名為 blue-01、blue-02... ,語(yǔ)義化的收益并不明顯。哪天設(shè)計(jì)團(tuán)隊(duì)需要調(diào)整品牌風(fēng)格,或是蘋(píng)果又掀起什么新潮流,把所有命名為 blue_x 的變量改為 gradient_serenity, 對(duì)于開(kāi)發(fā)來(lái)說(shuō)也是巨大的災(zāi)難。


根據(jù) HIG 的建議,語(yǔ)義化命名不應(yīng)該描述外觀或者色值,而是指明這個(gè)顏色的任務(wù)用途——標(biāo)簽 Labels,分割線(xiàn) Sepatators 或者填充 Fill。


在思考如何賦予顏色語(yǔ)義化的命名時(shí),設(shè)計(jì)師也需要用更概括和結(jié)構(gòu)化的視角來(lái)看待界面設(shè)計(jì),同時(shí)也需與開(kāi)發(fā)同學(xué)達(dá)成一致,使用同樣的命名,滿(mǎn)足以更好地維護(hù)一套收斂和統(tǒng)一的設(shè)計(jì)語(yǔ)言。


在騰訊文檔中,顏色的任務(wù)用途定義為為以下幾種:背景色 Background、文本色Text、圖標(biāo)色I(xiàn)con、分割線(xiàn) Border、透明填充 Transparent fill 、實(shí)色填充 Opaque fill 、默認(rèn)交互反饋 Feedback、語(yǔ)義 Intent。統(tǒng)一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來(lái)表達(dá)顏色強(qiáng)度。在需要更明確的用途說(shuō)明的任務(wù)中,直接描述其用途,例如:hover,pressed、disabled等。





Chapter 5

——————————

建設(shè)團(tuán)隊(duì)協(xié)同工作流


以上種種,最終目的在于建設(shè)團(tuán)隊(duì)的協(xié)同工作流,將顏色變量(color token)嵌入設(shè)計(jì)組件中與開(kāi)發(fā)代碼形成聯(lián)動(dòng),便于設(shè)計(jì)利用變量及組件、開(kāi)發(fā)利用程序中的變量來(lái)做全局修改,橫向提升團(tuán)隊(duì)的協(xié)作效率。


1、 設(shè)計(jì)內(nèi)協(xié)同:在Figma中生成顏色變量

在設(shè)計(jì)系統(tǒng)中,顏色變量屬于底層的設(shè)計(jì)原子,需要將其生成為顏色變量并嵌入到設(shè)計(jì)組件中,便于設(shè)計(jì)內(nèi)部使用。我們將已根據(jù)任務(wù)用途命名的色值,生成figma中的顏色樣式(color style),后續(xù)無(wú)論是進(jìn)行組件的設(shè)計(jì),還是項(xiàng)目的設(shè)計(jì),都可以直接賦予設(shè)計(jì)元素明確的顏色樣式。


2、 設(shè)計(jì)組件與開(kāi)發(fā)代碼聯(lián)動(dòng):利用顏色變量表進(jìn)行信息同步

我們生成了一個(gè)面向內(nèi)部、外部的顏色變量表,進(jìn)行顏色變量的說(shuō)明和信息的同步,沉淀落到實(shí)處的資料文檔。(此處推薦使用騰訊文檔,多人協(xié)作實(shí)時(shí)溝通~)



最終形成了設(shè)計(jì)組件庫(kù)與開(kāi)發(fā)組件庫(kù)的聯(lián)動(dòng),構(gòu)建了一個(gè)協(xié)同工作流,橫向提升工作效率。



結(jié)束語(yǔ)

上篇的調(diào)色板設(shè)計(jì)后,一直在醞釀這篇調(diào)色板的實(shí)際應(yīng)用。在設(shè)計(jì)一個(gè)較為復(fù)雜、龐大的產(chǎn)品時(shí),提效是永恒的課題。痛過(guò)、踩過(guò)坑的設(shè)計(jì)師應(yīng)該深有感觸,溝通的無(wú)力、推動(dòng)的困難都推動(dòng)著我們發(fā)動(dòng)自己的能量去想辦法提效。




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

文章來(lái)源:站酷 作者:騰訊ISUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)www.yvirxh.cn )是一家專(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ù)


UI設(shè)計(jì)師如何避免用戶(hù)不滿(mǎn)與困惑

ui設(shè)計(jì)分享達(dá)人

案例1.用戶(hù)操作時(shí)的困惑


相信大家在做設(shè)計(jì)的時(shí)候都遇到過(guò)這種情況,一個(gè)產(chǎn)品內(nèi)有多個(gè)入口指向同一個(gè)界面,這是產(chǎn)品的投機(jī)取巧還是另有深意,很多人都對(duì)這樣的設(shè)計(jì)有不同的看法。


這樣的設(shè)計(jì)就好像是狡兔三窟,在產(chǎn)品中流量可以從不同的入口進(jìn)來(lái),到多個(gè)不同的出口,也可以從不同的入口進(jìn)入同一個(gè)地方。



有人會(huì)覺(jué)得如果一個(gè)界面中有多個(gè)入口指向同一個(gè)界面會(huì)出現(xiàn)問(wèn)題:


1.違反了效率、用戶(hù)預(yù)期的原則,會(huì)認(rèn)為頁(yè)面空間有限,在同一個(gè)界面中有多個(gè)入口指向一個(gè)界面效率變低,而且用戶(hù)知道后往往就會(huì)只從一個(gè)入口進(jìn)入。


2.多個(gè)選擇會(huì)讓用戶(hù)拉高轉(zhuǎn)化的成本,用戶(hù)在選擇的時(shí)候會(huì)花更多的時(shí)間思考有什么區(qū)別。


我們來(lái)看一個(gè)例子,下面德邦app之前的一個(gè)版本,目前已經(jīng)優(yōu)化了。從截圖中我們發(fā)現(xiàn)頁(yè)面上方的查詢(xún)和寄件都和底部標(biāo)簽單獨(dú)出來(lái)的界面功能重復(fù)了,并且我的快件也直接可以展示在首頁(yè)的下方,我的快件目前可以從首頁(yè)頂部、首頁(yè)下方和個(gè)人中心3個(gè)入口進(jìn)入查看。



通過(guò)這個(gè)案例我們發(fā)現(xiàn)確實(shí)這些板塊和功能重復(fù)度太高,并且沒(méi)有區(qū)分出場(chǎng)景,這樣的設(shè)計(jì)證實(shí)了以上的兩個(gè)說(shuō)法,降低用戶(hù)使用效率和提高選擇成本。而且從業(yè)務(wù)角度看也并沒(méi)有目標(biāo)的差別。


但是我們分析問(wèn)題也要多角度去觀察,多個(gè)入口進(jìn)入同一個(gè)界面只有缺點(diǎn)沒(méi)有優(yōu)點(diǎn)嗎?


顯然不是,我們?cè)賮?lái)看幾個(gè)案例


下方是一個(gè)商品評(píng)價(jià)的卡片,經(jīng)過(guò)我小手的實(shí)際測(cè)試,發(fā)現(xiàn)無(wú)論點(diǎn)擊這個(gè)卡片任何有內(nèi)容的區(qū)域,都會(huì)跳轉(zhuǎn)到全部評(píng)價(jià)的界面,那這樣的設(shè)計(jì)邏輯是否會(huì)造成和上面的案例一樣的問(wèn)題呢?答案是,不會(huì)。



這里的設(shè)計(jì)邏輯并不是和沙面那里的場(chǎng)景那么單一,而是用戶(hù)在面臨不同需求場(chǎng)景的時(shí)候可以有選擇。


不知道大家有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題,在上面德邦案例的時(shí)候,你會(huì)對(duì)兩個(gè)入口有疑問(wèn),但是在評(píng)價(jià)卡片的時(shí)候并沒(méi)有,這個(gè)卡片包含了4種不同的場(chǎng)景:

1.我想看看有哪些好評(píng)、哪些差評(píng) 

2.幾個(gè)不同標(biāo)簽的用戶(hù)都是怎么說(shuō) 

3.下面用戶(hù)的實(shí)拍到底是不是真實(shí)的 

4.還有沒(méi)有更多類(lèi)似真實(shí)用戶(hù)的使用評(píng)價(jià)。


所以即便最終到了一個(gè)界面,對(duì)于用戶(hù)來(lái)說(shuō)也是從獨(dú)立的出發(fā)點(diǎn)開(kāi)始的,而再回過(guò)頭看上面案例,你會(huì)發(fā)現(xiàn),我就是要寄東西,這里有兩個(gè)入口,怎么選。


而且,考拉這里其實(shí)還做了從不同內(nèi)容點(diǎn)進(jìn)去的一個(gè)區(qū)分。



再來(lái)看個(gè)案例,貝殼的地圖找房,在首頁(yè)中有兩個(gè)入口,導(dǎo)航欄一個(gè),分類(lèi)中一個(gè),這里出現(xiàn)重復(fù)會(huì)造成一開(kāi)始說(shuō)的問(wèn)題嗎?首先我們看到貝殼的業(yè)務(wù)很多,以至于在這個(gè)分類(lèi)中居然還需要通過(guò)滾動(dòng)指示器來(lái)展示剩余內(nèi)容,大家也可以思考一下,在這個(gè)界面中,會(huì)不會(huì)出現(xiàn)兩個(gè)地圖找房不同的場(chǎng)景出發(fā)點(diǎn)呢?我個(gè)人覺(jué)得其實(shí)是可以商榷的,首先地圖找房在房產(chǎn)app中是很核心高頻的一個(gè)功能,他的屬性是“工具”。



所以我覺(jué)得他之所以在卡片中再放一個(gè)地圖找房是3個(gè)原因


第一個(gè)是導(dǎo)航欄的找房肯定不能動(dòng),他是一個(gè)全局的入口,即使頁(yè)面滾動(dòng)也可以隨時(shí)點(diǎn)擊到,即便要撤一個(gè),也肯定要撤下方卡片分類(lèi)中的。


第二個(gè)是卡片分類(lèi)中的圖標(biāo)入口是都具備工具屬性的,那首頁(yè)上面部分就分為了:搜索、業(yè)務(wù)分類(lèi)、工具這三塊。所以用戶(hù)看到這些工具屬性也會(huì)聯(lián)想到通過(guò)地圖去找房。而且這些多色彩的圖標(biāo)對(duì)于新進(jìn)入的用戶(hù)是比較吸引注意力的,所以很有可能用戶(hù)看不到右上角的地圖找房(可以參考古騰堡圖表的原則)。


第三點(diǎn)是可能右上角的地圖不太能清晰表達(dá)這個(gè)圖標(biāo)的具體功能,所以將“地圖找房”四個(gè)字顯示全。


但這些都有一些主觀因素在里面,如果真的去掉卡片中的,我覺(jué)得可能影響也并不是很大。有小伙伴可能想說(shuō)是為了分流,但是分流的目前主要是讓流量流到他應(yīng)該去的地方產(chǎn)生實(shí)際價(jià)值,除了以上的3個(gè)原因,好像確實(shí)有點(diǎn)重復(fù)了。


再來(lái)看一個(gè)例子,小鹿茶app。



首頁(yè)的現(xiàn)在下單和底部菜單標(biāo)簽都是到同一個(gè)界面,那為什么要重復(fù)呢?這里其實(shí)考慮更多的他并不想讓用戶(hù)進(jìn)來(lái)就直接去購(gòu)買(mǎi),為什么不直接購(gòu)買(mǎi)呢?應(yīng)該是想要建立自己的品牌人設(shè)、滿(mǎn)足更多的消費(fèi)場(chǎng)景和增值業(yè)務(wù),比如給別人點(diǎn)奶茶、周邊的杯子跟合作商品推銷(xiāo)、最新的奶茶的推薦。


如果只有菜單,產(chǎn)品也會(huì)顯得更工具化,很難突出自己的品牌,對(duì)業(yè)務(wù)增長(zhǎng)沒(méi)有太大的幫助。有同學(xué)要說(shuō),那這個(gè)界面只是產(chǎn)品的“一廂情愿”,我就只要點(diǎn)奶茶就可以了,多個(gè)入口只會(huì)給我?guī)?lái)困擾。所以他這里的設(shè)計(jì)邏輯是在用戶(hù)打開(kāi)app的時(shí)候首先定位的是菜單,而不是首頁(yè)。


所以,到底多個(gè)入入口進(jìn)入同一目標(biāo)我們還是要看不同的場(chǎng)景和目標(biāo)的。如果既沒(méi)有業(yè)務(wù)目標(biāo)做支撐,又沒(méi)有用戶(hù)場(chǎng)景的變化,那么這個(gè)重復(fù)的入口就是雞肋的。


最后留一個(gè)小思考題:網(wǎng)易云音樂(lè)的“歌單”在首頁(yè)上也重復(fù)了,大家知道這里為什么他要做成重復(fù)入口嗎? 




案例2.用戶(hù)使用中的不滿(mǎn)


一個(gè)優(yōu)秀的產(chǎn)品或者說(shuō)一個(gè)合格的產(chǎn)品,能給用戶(hù)帶來(lái)愉悅的體驗(yàn)。何為體驗(yàn),用大白話(huà)來(lái)說(shuō)就是用的舒服、自然、高效率。


再有一個(gè)底線(xiàn)就是不要讓用戶(hù)產(chǎn)生由產(chǎn)品帶來(lái)的負(fù)面情緒,例如產(chǎn)品出錯(cuò)了卻不告知用戶(hù)解決方法、用戶(hù)出錯(cuò)了沒(méi)有辦法及時(shí)幫助糾正、高危操作沒(méi)有二次確認(rèn)等等,根據(jù)負(fù)面情緒的嚴(yán)重程度幾乎就可以直接讓部分用戶(hù)流失。


很不幸的是我就遇到了這樣的體驗(yàn),當(dāng)時(shí)正在給同學(xué)們布置一些作業(yè)練習(xí),體驗(yàn)一些產(chǎn)品的優(yōu)缺點(diǎn)并給出解決方法。我也下載了這款文玩類(lèi)的App,體驗(yàn)了極速撿漏這個(gè)功能模塊。


撿漏:在文玩圈的一句行話(huà),意思就是用很便宜的價(jià)格買(mǎi)到很值錢(qián)的古玩,而賣(mài)家卻不知情,是一種可遇不可求的行為,所以寓意就是比較難得、走好運(yùn)了。


進(jìn)入直播間,商家在賣(mài)力吆喝,頁(yè)面底部有加一手的按鈕,就是類(lèi)似于拍賣(mài),價(jià)高者得。于是我就抱著試一試的心態(tài)點(diǎn)了加一手按鈕,因?yàn)槲翌A(yù)期是產(chǎn)品會(huì)再次向我確認(rèn)是否要加價(jià),結(jié)果是居然加價(jià)成功了,發(fā)生了什么?最后競(jìng)拍結(jié)束也沒(méi)有人繼續(xù)加價(jià)了。




實(shí)際場(chǎng)景中用戶(hù)可能誤操作不小心點(diǎn)了按鈕,這樣的場(chǎng)景和情況是非常多的,即便不是誤操作,給一個(gè)二次確認(rèn)的對(duì)話(huà)框也可以避免這樣的尷尬狀況,因?yàn)橛脩?hù)就喜歡在產(chǎn)品中點(diǎn)來(lái)點(diǎn)去,然而你在這里就像埋了一顆地雷。


如果到這里就結(jié)束了,那其實(shí)我也感覺(jué)沒(méi)必要去吐槽,問(wèn)題在于當(dāng)我拍下還沒(méi)付款,直播間的商家就開(kāi)始喊我的名字:xx大哥恭喜你拍到了我們的產(chǎn)品,可以去付款了。連續(xù)播報(bào)了幾十遍,我尷尬的直接退出了后臺(tái),這種感覺(jué)就像是一群觀眾看著一個(gè)被騙的小白一樣,當(dāng)我過(guò)10分鐘后打開(kāi)系統(tǒng)提示商品流拍了,并且累積了違約積分。


???


到這里,可能會(huì)有人說(shuō),你自己拍了的又不付款,當(dāng)然要懲罰你了。


于是我還是認(rèn)真的去研究了一下,發(fā)現(xiàn)極速撿漏和競(jìng)拍并不是同樣的規(guī)則。該產(chǎn)品和競(jìng)品其實(shí)都有競(jìng)拍板塊,在競(jìng)拍板塊都會(huì)有需要用戶(hù)確認(rèn)的操作,并在操作下方給出拍賣(mài)規(guī)則,顯示出價(jià)即表示同意拍賣(mài)規(guī)則。




但是該產(chǎn)品極速撿漏的板塊并沒(méi)有這樣的說(shuō)明,既然沒(méi)有提前展示這樣的說(shuō)明和約定,用戶(hù)就不知道有這樣的規(guī)則,我拿了競(jìng)品一對(duì)比,其實(shí)在直播帶貨的場(chǎng)景下,這個(gè)出價(jià)流程還是不同的,雙方其實(shí)都沒(méi)有給規(guī)則說(shuō)明,但競(jìng)品還是給了一個(gè)出價(jià)選擇后再出價(jià)的步驟。



最后我甚至被商家拉黑了,不過(guò)還給我一個(gè)投訴商家的入口


我當(dāng)時(shí)的想法:


1.如果因?yàn)檎`操作讓用戶(hù)付出這么大代價(jià)的話(huà)成本就太高了。讓用戶(hù)點(diǎn)擊是否就等于用戶(hù)同意?


2.請(qǐng)先告知我約定與協(xié)議的內(nèi)容,單方面在我不知情的情況下對(duì)產(chǎn)品進(jìn)行操作后,通知扣我違約積分,這樣就有點(diǎn)“霸道”了。


3.平臺(tái)對(duì)商家和消費(fèi)者的權(quán)益是如何平衡的,文玩行業(yè)和互聯(lián)網(wǎng)結(jié)合的難點(diǎn)在哪里。


3.線(xiàn)下文玩圈的一些不成文行規(guī),導(dǎo)致新人入圈后產(chǎn)生的沖突。


于是我就想對(duì)此說(shuō)說(shuō)我的看法



1.交易是產(chǎn)品平臺(tái)其中的一個(gè)功能屬性


交易是產(chǎn)品平臺(tái)其中的一個(gè)功能屬性,需要優(yōu)先滿(mǎn)足產(chǎn)品對(duì)用戶(hù)價(jià)值,其次再談交易的合理性。在這個(gè)流程中,面對(duì)用戶(hù)很有可能遇到的誤操作行為以及需要讓用戶(hù)去下單支付成本,我們必須提前告知用戶(hù)。在尼爾森可用性原則中我們也發(fā)現(xiàn)了,如果用戶(hù)不小心操作失誤,那么我們盡可能減少這些因?yàn)橛脩?hù)犯錯(cuò)帶來(lái)的成本,同時(shí)在用戶(hù)犯錯(cuò)之前就要明顯告知用戶(hù),將風(fēng)險(xiǎn)控制、前置。


所以,你在注冊(cè)的時(shí)候、登錄的時(shí)候,產(chǎn)品一定會(huì)讓你同意一份用戶(hù)協(xié)議,告知你我們要保存你的數(shù)據(jù)和一些跟你相關(guān)的信息,如果你不同意,那就無(wú)法繼續(xù)體驗(yàn)產(chǎn)品。


這是一種契約。


同理,如果你想讓用戶(hù)在這個(gè)產(chǎn)品中去參與拍賣(mài),在進(jìn)入這個(gè)板塊之前或者用戶(hù)點(diǎn)擊按鈕之后,也需要讓用戶(hù)明確這個(gè)操作帶來(lái)的風(fēng)險(xiǎn)是什么,取得用戶(hù)的同意。而不是直接讓用戶(hù)加價(jià)成功,導(dǎo)致用戶(hù)不明所以的被扣違約積分、被商家拉黑,這就和你去泰國(guó),在街頭你朋友拍了一張你和一個(gè)抱著蜥蜴的人的照片,結(jié)果別人來(lái)問(wèn)你收錢(qián)是一個(gè)道理。


對(duì)于正常線(xiàn)下拍賣(mài)的流程,舉辦方也會(huì)對(duì)參與拍賣(mài)的人員進(jìn)行相關(guān)規(guī)則、流程的告知,并且將風(fēng)險(xiǎn)、問(wèn)題都提前讓客戶(hù)進(jìn)行協(xié)議確認(rèn)。


所以,在產(chǎn)品中的交易,必須先滿(mǎn)足用戶(hù)與產(chǎn)品信息之間的對(duì)稱(chēng)關(guān)系,保持信息的透明和契約公正,規(guī)則、約束、條件是用戶(hù)使用你產(chǎn)品的前提和體驗(yàn)反饋的衡量標(biāo)準(zhǔn)之一。



2.對(duì)于商家和產(chǎn)品的價(jià)值


商家希望有更多的流量來(lái)曝光商品,撿漏商品的低價(jià)可以快速吸引一大批用戶(hù),比如8塊錢(qián)的一個(gè)木頭核桃的雕刻掛件等,產(chǎn)品通過(guò)營(yíng)造搶購(gòu)、限時(shí)的氛圍,吸引用戶(hù)下單,并且降低用戶(hù)參與的門(mén)檻。


那么,直接加價(jià)成功是一個(gè)好的降低門(mén)檻的策略嗎?我覺(jué)得并不是,降低門(mén)檻并不意味著就是直接拍到,而是需要提高用戶(hù)對(duì)產(chǎn)品的信任度,這個(gè)極速撿漏的模塊的目標(biāo)用戶(hù)幾乎都是小白用戶(hù),因?yàn)橘Y深的玩家看不上、更不會(huì)買(mǎi),有一定經(jīng)驗(yàn)的玩家也看的出好壞,明白它的價(jià)值。所以面對(duì)這些沒(méi)有了解過(guò)文玩產(chǎn)品的小白玩家來(lái)說(shuō),內(nèi)心是謹(jǐn)慎的。


可能有人會(huì)想,這幾塊錢(qián)、十幾塊錢(qián)的東西還需要考慮嗎?當(dāng)然在這個(gè)場(chǎng)景中,從眾心理是很明顯的,大家都覺(jué)得很便宜,但就是沒(méi)人拍。這都幾塊錢(qián)撿漏了怎么都沒(méi)人要,大部分人都覺(jué)得這么便宜東西肯定不咋樣,運(yùn)費(fèi)是不是貴的離譜、有沒(méi)有托在背后跟你抬價(jià)呢?大家都不拍我也觀望。越多人圍觀,越難促成交易。


還有一種可能就是我賣(mài)不賣(mài)的出去東西,并不重要,重要的是有人來(lái)看了,這些邊角料都是用來(lái)回饋直播間粉絲的,就是一個(gè)窗口,真正有利潤(rùn)的東西在櫥窗里。所以這里的撿漏只是一個(gè)引流的噱頭。


人總是對(duì)太輕易得到的東西不珍惜,更何況是幾塊錢(qián)的小玩意兒。所以針對(duì)直接拍下這個(gè)交互,個(gè)人認(rèn)為是不妥的,無(wú)論是上面任何一種情況,都沒(méi)有辦法讓降低門(mén)檻,甚至通過(guò)這種“小聰明”反而會(huì)讓用戶(hù)更加不信任產(chǎn)品和用戶(hù)。


不信任產(chǎn)品是大。尤其是作為一家平臺(tái)來(lái)說(shuō),虛假交易、以次充好、濫竽充數(shù)等等行為是致命的。



3.文玩的價(jià)值


我其實(shí)有玩過(guò)一段時(shí)間文玩,受我老丈人的影響,有一段時(shí)間喜歡玩手串、玉什么的。經(jīng)常也會(huì)在某音去刷一些鑒寶類(lèi)的視頻,很有意思。


文玩它的價(jià)值在于品相、稀有度、盤(pán)玩程度、大眾接受度、歷史背景還有工藝等等。所以它并不是一個(gè)在每個(gè)人心中同等效用的商品,同樣一塊玉,他的種水一般,但是花紋很獨(dú)特,買(mǎi)賣(mài)雙方其實(shí)心理的價(jià)值預(yù)期會(huì)相差非常多,它就不像買(mǎi)電子產(chǎn)品一樣價(jià)格那么透明容易計(jì)算。


有的人玩這些就是覺(jué)得命里該有它,它能給我?guī)?lái)財(cái)、運(yùn),幫我辟邪,看的是眼緣。而不是路邊上一塊無(wú)用的石頭,可以隨意拾取丟棄。那么換句話(huà)說(shuō),如果在用戶(hù)下單的時(shí)候,我們利用一些情感化的文案,讓用戶(hù)喜歡上這款文玩,是不是也可以大概率的促進(jìn)交易呢?



4.文玩圈的行規(guī)


我相信很多玩文玩的小伙伴都知道,在文玩圈有一些不成文的行規(guī)。也或許就是因?yàn)檫@些行規(guī)出現(xiàn)到了線(xiàn)上產(chǎn)品中。


1.還價(jià)意味著出價(jià),出價(jià)意味著買(mǎi)下

在文玩圈,你不想買(mǎi)就不要還價(jià)。如果賣(mài)家同意了你的還價(jià),那你就必須買(mǎi)。這代表著你個(gè)人的信譽(yù)和道德品質(zhì)。


所以文玩圈和互聯(lián)網(wǎng)的用戶(hù)之前有許多的鴻溝需要一步一步建設(shè)橋梁,不能單純的以線(xiàn)下圈子內(nèi)的行規(guī)來(lái)要求剛接觸這個(gè)圈子的互聯(lián)網(wǎng)用戶(hù),這需要大家一起努力和營(yíng)造起一個(gè)良好的文玩圈的文化和規(guī)則,而不是直接生搬硬套,提高這個(gè)門(mén)檻。


2.不要打聽(tīng)別人的成本

文玩沒(méi)有實(shí)際的成本,可能別人花10塊錢(qián)淘到的價(jià)值1萬(wàn)塊的東西,也可能別人花了巨資看走了眼。所以你知道了成本對(duì)誰(shuí)都沒(méi)好處,別人也不會(huì)告訴你。


3.別人在交易的時(shí)候保持沉默

文玩在每個(gè)人心中的價(jià)值不同,所以貨幣價(jià)值也不同,當(dāng)別人在詢(xún)價(jià)還價(jià)的時(shí)候,不管怎樣我們都不要去表明自己的看法和想法。


當(dāng)然還有其他的規(guī)則就不一一敘述了,針對(duì)這3條,其實(shí)在互聯(lián)網(wǎng)的產(chǎn)品中是會(huì)有沖突存在的。例如你買(mǎi)了某個(gè)文玩,你一拍下,別人就說(shuō)這個(gè)根本不值這個(gè)價(jià)錢(qián)。還有你出價(jià)了但是又不想買(mǎi)了,這些原本在文玩圈子中不允許的規(guī)則,在互聯(lián)網(wǎng)上去要求用戶(hù)著實(shí)有點(diǎn)困難,因?yàn)榛ヂ?lián)網(wǎng)上的交易并不一定所見(jiàn)即所得,可能展示的是這樣,收到貨又是另一個(gè)東西。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(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īng)駿
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)www.yvirxh.cn )是一家專(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ù)


B端設(shè)計(jì)|數(shù)據(jù)展示控件應(yīng)用

ui設(shè)計(jì)分享達(dá)人

將數(shù)據(jù)查詢(xún)的條件、邏輯、方式,整理清楚后,那么下一步的內(nèi)容就是如何將查詢(xún)后的數(shù)據(jù)更好的展示給使用者看。到這一步設(shè)計(jì)師或是產(chǎn)品應(yīng)該思考的是如何將眾多分散的信息,有序的、直觀的展示出來(lái),并且輔助使用者解決問(wèn)題,為產(chǎn)品提效。 

數(shù)據(jù)展示主要以表格為主,由業(yè)務(wù)需要對(duì)表格進(jìn)行擴(kuò)展,結(jié)合其他組件使用;其次是列表,列表與卡片樣式結(jié)合的較多。 

設(shè)計(jì)原則
依然要牢記的一些設(shè)計(jì)原則,即:簡(jiǎn)潔清晰、靈活高效 
簡(jiǎn)潔清晰:剔除不必要的裝飾元素,避免過(guò)度; 
靈活高效:在現(xiàn)有的規(guī)范指導(dǎo)下,根據(jù)不同業(yè)務(wù)的不同需求,快速組合多種樣式的表格,提升設(shè)計(jì)效率,也要兼顧減少開(kāi)發(fā)代碼冗余; 

一、表格 

基礎(chǔ)表格包括幾點(diǎn)基本要素:表名、列名、數(shù)據(jù)、翻頁(yè),這些構(gòu)成了表格的主體框架,而在真實(shí)場(chǎng)景里使用的表格都是升級(jí)版本,補(bǔ)充了更多功能作為輔助,比如排序、篩選、操作、導(dǎo)入導(dǎo)出...... 

數(shù)據(jù)篩選:不同于查詢(xún)模塊的篩選方式,直接在表頭標(biāo)簽操作,一般會(huì)以“倒三角形”圖標(biāo)展示,通常應(yīng)用在這一條數(shù)據(jù)處在哪種狀態(tài),例如:進(jìn)行中、未開(kāi)始、已完成、已取消、審核中; 


排序:現(xiàn)在比較少的應(yīng)用,因?yàn)榕判虼蠖嗍菍?duì)時(shí)間上的排序,而一般一個(gè)新的數(shù)據(jù)也是按照時(shí)間倒序展示,在第一行展示; 

操作:對(duì)某一條數(shù)據(jù)的操作,或查看或編輯或刪除; 

導(dǎo)入導(dǎo)出:對(duì)超過(guò)一定量的數(shù)據(jù),會(huì)進(jìn)行導(dǎo)入數(shù)據(jù),導(dǎo)出數(shù)據(jù),當(dāng)然會(huì)有遵循一定的規(guī)則,才能和線(xiàn)上表格數(shù)據(jù)類(lèi)型一一對(duì)應(yīng)上; 

實(shí)際工作中,我們都是根據(jù)產(chǎn)品需求和業(yè)務(wù)需要對(duì)表格進(jìn)行補(bǔ)充輔助功能的,在設(shè)計(jì)表格的時(shí)候,總結(jié)下來(lái)通常會(huì)遇到下列幾類(lèi)問(wèn)題: 


  • 有層級(jí)關(guān)系的數(shù)據(jù)該怎么展示?

  • 一條數(shù)據(jù)有父子關(guān)系,該如何展示?

  • 一條數(shù)據(jù)類(lèi)型太多,表格容不下怎么展示?

  • 一些數(shù)據(jù)其中的一類(lèi)型字段較長(zhǎng),其他類(lèi)型字段段,甚至只有幾個(gè)字,該怎么展示?

  • 一組數(shù)據(jù),數(shù)據(jù)不全,類(lèi)型不全,部分?jǐn)?shù)據(jù)是共同的主體,該怎么展示?




除此之外還有樹(shù)表結(jié)合的、表格套娃 

對(duì)于這些常見(jiàn)的問(wèn)題,在設(shè)計(jì)時(shí)會(huì)充分考慮這一領(lǐng)域的專(zhuān)業(yè)操作者,特別是從事醫(yī)療行業(yè)的專(zhuān)業(yè)人士,嚴(yán)謹(jǐn)?shù)臄?shù)據(jù)要求會(huì)比較高。 

1、數(shù)據(jù)的層級(jí)關(guān)系 

在相關(guān)醫(yī)療數(shù)據(jù)的管理系統(tǒng)里,因?yàn)獒t(yī)療數(shù)據(jù)的復(fù)雜和嚴(yán)謹(jǐn)性,常見(jiàn)的表格展示不能滿(mǎn)足層級(jí)關(guān)系的表達(dá),所以在視覺(jué)呈現(xiàn)上增加結(jié)構(gòu)化層級(jí)關(guān)系。 

2、數(shù)據(jù)本身的父子集關(guān)系 
另外就是同屬一條數(shù)據(jù)之下,還會(huì)進(jìn)行細(xì)分多個(gè)子數(shù)據(jù),并對(duì)應(yīng)的歸類(lèi)列項(xiàng); 

3、并不好看的數(shù)據(jù) 
上邊兩種說(shuō)的是工作里典型數(shù)據(jù)結(jié)構(gòu)的層級(jí)關(guān)系,并且數(shù)據(jù)容量相對(duì)美觀,不多不少。而實(shí)際的數(shù)據(jù)沒(méi)有那么美好,數(shù)據(jù)長(zhǎng)短是參差不齊的,所以在考慮上述兩個(gè)設(shè)計(jì)原則的基礎(chǔ)上還需滿(mǎn)足,可閱讀和最大化兼容; 

在一組數(shù)據(jù)中,單條數(shù)據(jù)中某一個(gè)類(lèi)型的字段很長(zhǎng),管理系統(tǒng)里表格的容量是有限的,所以在可行性的前提下,對(duì)這部分?jǐn)?shù)據(jù)縮短,可以按照需要但不重要的要求,隱藏部分,將主要信息顯示出來(lái),并給予查看全部信息的入口。 

4、殘缺不齊的數(shù)據(jù) 
上述的說(shuō)的數(shù)據(jù)還是比較好看的,而真實(shí)數(shù)據(jù)是殘缺不全的,甚至部分?jǐn)?shù)據(jù)是“丟失”的,而且列項(xiàng)類(lèi)型很多,表格橫向?qū)挾仁遣粔虻摹?nbsp;
那么此時(shí)通過(guò)兩種方式優(yōu)化這塊內(nèi)容:一種是固定左右邊際列項(xiàng),中部滑動(dòng);另一個(gè)種將空數(shù)據(jù)的列項(xiàng)隱藏,并給予條件選擇,按需展示數(shù)據(jù)的哪些列項(xiàng); 
當(dāng)然在患者端也會(huì)有患者頭像,那么在管理系統(tǒng)里的患者表格相對(duì)應(yīng)的頭像,另外也存在患者上傳的文件(圖片),也會(huì)以縮略圖的形式展示在表格中。一般會(huì)將所有涉及到的圖片(頭像、文件)規(guī)范統(tǒng)一的大小尺寸。 

二、列表

另一個(gè)常用的列表了,常和表格組合使用的,另外在某一條數(shù)據(jù)詳情里也比較常見(jiàn)。在視覺(jué)表現(xiàn)上與表格并無(wú)多大的差異,較明顯的就是列表沒(méi)有列名名稱(chēng),實(shí)質(zhì)上的區(qū)別是在前端編寫(xiě)代碼上的區(qū)別。(希望這個(gè)圖能幫到在座的各位設(shè)計(jì)師朋友們,和前端叫法意見(jiàn)不同時(shí),可以了解下,畢竟你在看視覺(jué)時(shí),他/她在想用什么代碼寫(xiě)出來(lái)) 
列表一般幾個(gè)場(chǎng)景下會(huì)出現(xiàn): 
會(huì)根據(jù)數(shù)據(jù)“長(zhǎng)”的怎么樣,然后采用不同的形式去展示數(shù)據(jù),讓它“好看”些,且更容易被閱讀和理解。 

查詢(xún)篩選類(lèi) 

1、也會(huì)遇到查詢(xún)條件較多的,那么以多組列表形式出現(xiàn),兩組或是三組。多重的查詢(xún)條件,就不敘述場(chǎng)景了,查詢(xún)是最基本的常用方式。 

2、遇到多組篩選條件,考慮電商網(wǎng)頁(yè)版的篩選和布局方式,因?yàn)樗饕潜磉_(dá)對(duì)數(shù)據(jù)的篩選不同類(lèi)型的多組聯(lián)合后,能夠符合產(chǎn)品需求預(yù)期的結(jié)果。 

段落數(shù)據(jù)類(lèi) 

1、卡片列表,針對(duì)的是單條結(jié)果信息內(nèi)容較多,一條信息占據(jù)一行,把重點(diǎn)區(qū)別于其他信息展示給管理者查看,便于識(shí)別?;拘畔ⅰF(xiàn)病史,省去二次點(diǎn)擊詳情查看操作。 
除了上述所說(shuō)的段落形式的內(nèi)容,也有內(nèi)容是分點(diǎn)和分類(lèi)型的展示,主要是滿(mǎn)足直觀可見(jiàn),提升效率為主。 

2、九宮格列表,同樣,對(duì)于上述的分點(diǎn)類(lèi)型的卡片列表,在數(shù)據(jù)容量的允許下,可以采用視覺(jué)上的九空格,將一級(jí)重要信息突出,作為識(shí)別來(lái)源,二級(jí)信息附著。為什么這么做呢,因?yàn)樾畔⒏怀鰠取?nbsp;

詳情類(lèi) 
對(duì)于詳情內(nèi)容,即一條數(shù)據(jù)的完整展示,如無(wú)必要,別起新頁(yè),痛苦操作給大家的忠告~~~可用模態(tài)彈窗,將信息展示出來(lái),條理清晰,又明朗是不是 
三、總結(jié)
還是以一貫的方式來(lái)呈現(xiàn)視覺(jué),需求先行、數(shù)據(jù)先行,再考慮后邊的視覺(jué)展示,理解了業(yè)務(wù)需求,才能讓視覺(jué)表現(xiàn)能夠更好的符合需求,并且兼顧對(duì)后期的數(shù)據(jù)變化考慮可擴(kuò)展的空間。 

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

文章來(lái)源:站酷 作者:啊嗚計(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ì)www.yvirxh.cn )是一家專(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ù)



B端產(chǎn)品設(shè)計(jì)分析方法總結(jié)

ui設(shè)計(jì)分享達(dá)人

做一個(gè)完整B端系統(tǒng)項(xiàng)目前,從交互設(shè)計(jì)的七大定律,B端產(chǎn)品業(yè)務(wù)調(diào)研,用戶(hù)訪(fǎng)談研究方法,精準(zhǔn)推導(dǎo)B端用戶(hù)畫(huà)像,到B端產(chǎn)品主風(fēng)格的設(shè)計(jì)定調(diào),深度理解B端主流組件庫(kù)的視覺(jué)規(guī)范,進(jìn)而為B端產(chǎn)品設(shè)計(jì)做充分的準(zhǔn)備工作,以下內(nèi)容較多,大家可以根據(jù)上述目錄來(lái)進(jìn)行選擇性閱讀。

1.1 B端組件庫(kù)的概念及作用


概念:組件庫(kù)的底層邏輯就是原子理論,類(lèi)似于我們?cè)谄礃?lè)高積木的時(shí)候,根據(jù)說(shuō)明書(shū)一個(gè)模塊一個(gè)模塊來(lái)拼湊,先找零件,再拼成部件,然后是成品,這個(gè)過(guò)程和UI中的組件化是一模一樣的,組件化就是原子理論集中得表現(xiàn),原子(圖標(biāo)、按鈕、字體樣式等)——分子(標(biāo)簽欄、導(dǎo)航欄、搜索框等)——有機(jī)體(圖文列表、內(nèi)容卡片、布局模塊、瀑布流圖等)——模板(原子、分子組合排列組成了模板,也就是原型圖)——界面(最后根據(jù)原型圖形成視覺(jué)設(shè)計(jì)稿)


作用:一致性:比如在不同得界面中,如果用樣的按鈕,他的按鈕的展現(xiàn)形式,要保持一致性。

高效性:比如所有的按鈕不用單獨(dú)去設(shè)計(jì)了,從組件庫(kù)里調(diào)用就可以,這樣對(duì)于設(shè)計(jì)師來(lái)說(shuō)就是高效的。對(duì)用戶(hù)來(lái)說(shuō),也會(huì)讓用戶(hù)的使用效率提升,比如當(dāng)用戶(hù)看到藍(lán)色的按鈕就是可以提交的按鈕,看到白色得按鈕就是次要得按鈕,看到不帶邊框的按鈕就是一個(gè)危險(xiǎn)按鈕等等。

組合性:通過(guò)調(diào)用不同的組件來(lái)進(jìn)行組合可以形成不同的頁(yè)面。


1.2 如何正確使用組件庫(kù)


1.2.1 組件庫(kù)的使用前提

一些主流的組件庫(kù),比如AntDesign、Element Design、ZanDesign組件庫(kù)等,這些框架機(jī)構(gòu)本質(zhì)都差不太多, 但他們有自己的特點(diǎn),具體用哪個(gè)組件庫(kù),通常由公司的架構(gòu)師來(lái)進(jìn)行架構(gòu)選型,比如VUE(Element Design)和REACT(Ant Design),這是兩種不同的技術(shù)選型,(VUE和REACT是一種前端框架的技術(shù)架構(gòu)版本,可幫助前端工程師快速進(jìn)行開(kāi)發(fā)的前端框架)。從技術(shù)角度講,大部分公司會(huì)首選AntDesign(React),因?yàn)橛泻芏喟咐峁?,VUE和有贊也可以但用的少。從設(shè)計(jì)角度,Ant Design得設(shè)計(jì)組件形式案例很完善。Element Design做起來(lái)視覺(jué)單一得樣式白白得感覺(jué),沒(méi)有設(shè)計(jì)層次化,Ant Design更好看一點(diǎn)。所以先選擇底層的前端框架,再根據(jù)這個(gè)選擇前端的機(jī)構(gòu)布局。

1.2.2 組件庫(kù)的使用過(guò)程

設(shè)計(jì)師和前端最終目標(biāo)是一樣的,都是快完成保證設(shè)計(jì)質(zhì)量的,原生組件不能達(dá)到要求的時(shí)候,設(shè)計(jì)師可以根據(jù)原生組件庫(kù)修改樣式來(lái)表達(dá)到自己的想法。但對(duì)前端來(lái)說(shuō)最好什么都別改,就用原生組件庫(kù)前端工程師直接復(fù)制就行,這也是因?yàn)槲覀冊(cè)O(shè)計(jì)師的要求和前端的要求是不一樣的。但修改后樣式的組件,底層邏輯還是原來(lái)的組件。從Antdesign等組件庫(kù)里復(fù)制出來(lái),經(jīng)過(guò)figma里的各種功能操作后,比如分離組件、改變組件得形狀、替換內(nèi)容等,但這個(gè)組件仍然是Antdesign里的組件,組件是否改變?nèi)Q于,這個(gè)圖形,這個(gè)組件是不是已經(jīng)代碼化,我們?cè)O(shè)計(jì)師設(shè)計(jì)的組件,只是樣式,需要經(jīng)過(guò)前端來(lái)形成代碼,只有代碼化的組件,才是組件,如果沒(méi)有代碼化,那只是一個(gè)樣式而已。所以,我們用Antdesign里是已經(jīng)實(shí)現(xiàn)代碼化了得組件,組件庫(kù)里有的組件前端一定是可以代碼實(shí)現(xiàn)的。


1.3 如何設(shè)計(jì)組件庫(kù)


1.3.1 每個(gè)項(xiàng)目都會(huì)分這四個(gè)周期


項(xiàng)目初期:在一個(gè)B端項(xiàng)目得初期,大家都會(huì)有疑問(wèn),B端組件庫(kù)應(yīng)該什么時(shí)候開(kāi)始建立?是不是先建組件庫(kù)再開(kāi)始設(shè)計(jì)?答案是,如果不是從0開(kāi)始的項(xiàng)目,組件庫(kù)在設(shè)計(jì)之初就應(yīng)該建立起來(lái),如果項(xiàng)目是從0開(kāi)始,由于沒(méi)有業(yè)務(wù)的案例,組件庫(kù)組件庫(kù)也無(wú)法建立,但可以建立一些最小元素:原子。比如字體(應(yīng)該用什么樣的字體,在正標(biāo)題,副標(biāo)題,大標(biāo)題,正常情況下應(yīng)該怎么樣使用字體的得明度)、色彩(色彩規(guī)范是什么,比如醫(yī)療行業(yè),航空行業(yè),交通行業(yè)應(yīng)該用什么色彩,決定主色不是好不好看,而是由企業(yè)來(lái)決定得,首先了解企業(yè)的VI色,通過(guò)結(jié)合VI色和產(chǎn)品分析出的用戶(hù)畫(huà)像特征,來(lái)確定主色,輔主色,確定主色后,相應(yīng)的背景色、深色背景、淺色背景、灰度背景、卡片背景等,也就都可以做出來(lái)了)、按鈕(通常狀態(tài),點(diǎn)擊狀態(tài),當(dāng)前焦點(diǎn)狀態(tài),不可點(diǎn)狀態(tài))、基本控件、布局柵格、圖表(圖標(biāo)icon、文本標(biāo)簽、按鈕、圖表)、圖標(biāo);通過(guò)建立原子組件,完成一些基本典型的頁(yè)面設(shè)計(jì)。

項(xiàng)目中期:繼續(xù)完善基本組件庫(kù),應(yīng)用案例的完善,迭代組件庫(kù)、樣例庫(kù)、最佳實(shí)踐案例。然后再次迭代進(jìn)入基本組件庫(kù)。


項(xiàng)目后期:形成最終組件庫(kù)與設(shè)計(jì)系統(tǒng)的規(guī)范建立,根據(jù)項(xiàng)目不一樣詳細(xì)程度也可以不一樣。


延展期:為項(xiàng)目2.0升級(jí)準(zhǔn)備根據(jù)使用反饋、迭代之前得組件庫(kù)與規(guī)范,預(yù)計(jì)未來(lái)版本中出現(xiàn)的典型案例,并針對(duì)性的設(shè)計(jì)應(yīng)用組件。通常很少有公司進(jìn)行到這一步。


1.3.2 組件庫(kù)的開(kāi)發(fā)流程


1.3.3 B端組件庫(kù)存在的價(jià)值


B端組件庫(kù)的存在是不是意味著不需要設(shè)計(jì)師了?其實(shí)并不是,組件庫(kù)可以幫助設(shè)計(jì)師增進(jìn)設(shè)計(jì)效率和溝通效率,和前端溝通告知按照對(duì)應(yīng)的選型組件庫(kù)規(guī)范使用就可以了,同時(shí)組件庫(kù)得一致性、準(zhǔn)確性、協(xié)同性它的質(zhì)量有保證。但設(shè)計(jì)師做完組件庫(kù)后,繼續(xù)需要關(guān)注的點(diǎn)是:

01、根據(jù)業(yè)務(wù)場(chǎng)景來(lái)優(yōu)化設(shè)計(jì)組件庫(kù):因?yàn)榻M件庫(kù)是一定會(huì)去更新的,如有必要再去更新,那一定會(huì)是很復(fù)雜得業(yè)務(wù)場(chǎng)景下去做更新的,這個(gè)業(yè)務(wù)場(chǎng)景是程序員或者以前的組件不能實(shí)現(xiàn)的,需要很強(qiáng)的設(shè)計(jì)技能去做迭代,所以需要設(shè)計(jì)師繼續(xù)去做一些結(jié)合業(yè)務(wù)場(chǎng)景的組件來(lái)放到組件庫(kù)里。

02、需要設(shè)計(jì)師把更多時(shí)間精力投入更多設(shè)計(jì)體驗(yàn)中,而非搬磚:組件庫(kù)的建立同時(shí)解放了設(shè)計(jì)師的精力,設(shè)計(jì)師可以把時(shí)間投入到設(shè)計(jì)體驗(yàn)中去,而不是做一些搬磚得工作,比如按鈕怎么畫(huà),用圓角還是用什么顏色,這些沒(méi)有技術(shù)含量的工作,這樣一來(lái),可以投入更多時(shí)間來(lái)賦能業(yè)務(wù)更好體驗(yàn)設(shè)計(jì)工作。


1.3.4 B端主流組件庫(kù)有哪些

2.1 B端產(chǎn)品的設(shè)計(jì)過(guò)程


2.1.1 用戶(hù)體驗(yàn)五要素


戰(zhàn)略層(屬于產(chǎn)品愿景,滿(mǎn)足用戶(hù)的需求,產(chǎn)品的愿景和目標(biāo)


由于用戶(hù)有不同的需求進(jìn)而產(chǎn)生了不同的產(chǎn)品,戰(zhàn)略層決定了用戶(hù)用干什么樣的產(chǎn)品,比如,用戶(hù)需有很多銷(xiāo)售客戶(hù)的線(xiàn)索需要進(jìn)行管理,用戶(hù)需要管理客戶(hù),那就做一個(gè)CRM系統(tǒng)。比如,用戶(hù)想寫(xiě)日?qǐng)?bào),想要一個(gè)打卡的OA系統(tǒng),那么產(chǎn)品目標(biāo)就是要做一個(gè)OA系統(tǒng)。比如,電商里面很多商品,牽扯到很多進(jìn)銷(xiāo)存,那就做一個(gè)ERP系統(tǒng)。這部分跟設(shè)計(jì)師相關(guān)度沒(méi)有那么高。


范圍層(指功能規(guī)劃,功能的規(guī)格、包括內(nèi)容的需求)

功能規(guī)劃:比如要做一個(gè)OA系統(tǒng),其中就包含了打卡、日?qǐng)?bào)、項(xiàng)目管理、報(bào)銷(xiāo)、人事流轉(zhuǎn)等等都是跟辦公相關(guān)聯(lián)的,需要把規(guī)格和功能畫(huà)出來(lái),畫(huà)成簡(jiǎn)單的表格并且將它們分類(lèi),這里所有的功能都不是詳細(xì)的,就是簡(jiǎn)單的分類(lèi),將功能簡(jiǎn)單描述一下,同時(shí)做一個(gè)簡(jiǎn)單的用戶(hù)畫(huà)像。這部分設(shè)計(jì)師只需要閱讀產(chǎn)品經(jīng)理給到得PRD需求文檔即可,整體看還是偏愿景,沒(méi)有形成具體的產(chǎn)出。比如OA系統(tǒng)中就總結(jié)出重點(diǎn)做一個(gè)審批得功能,并不知道什么樣的界面,只知道一個(gè)大概的范圍。


結(jié)構(gòu)層(指原型設(shè)計(jì))

這部分,設(shè)計(jì)師通常就需要參與進(jìn)來(lái),如果設(shè)計(jì)師只按產(chǎn)品給的設(shè)計(jì)好的原型來(lái)設(shè)計(jì),就顯得很被動(dòng),這樣只能叫做視覺(jué)美化,被稱(chēng)之為美工,設(shè)計(jì)師應(yīng)該從沒(méi)有形成原型的時(shí)候,可能只是一個(gè)簡(jiǎn)單的PRD需求文檔或者草圖,設(shè)計(jì)師就應(yīng)該參與進(jìn)去。


設(shè)計(jì)師對(duì)原型進(jìn)行優(yōu)化設(shè)計(jì),優(yōu)化的不是業(yè)務(wù),因?yàn)楹芏鄻I(yè)務(wù)內(nèi)容肯定沒(méi)有產(chǎn)品經(jīng)理了解得深刻入,這時(shí),設(shè)計(jì)師需要優(yōu)化的其實(shí)是它的交互邏輯、交互內(nèi)容,一旦原型里里產(chǎn)生點(diǎn)擊,一旦產(chǎn)生多種狀態(tài),那就要去了解它,每種狀態(tài)產(chǎn)生不一樣的界面結(jié)果,其實(shí)對(duì)標(biāo)的就是設(shè)計(jì)師設(shè)計(jì)的界面將產(chǎn)生什么樣的變化,換句話(huà)說(shuō),如果有界面的變化,內(nèi)容得變化,設(shè)計(jì)師就需要參與到其中。目前來(lái)看,很少公司有專(zhuān)門(mén)的交互設(shè)計(jì)師,要么這部分工作由UI設(shè)計(jì)師來(lái)完成,要么由產(chǎn)品經(jīng)理來(lái)完成,很多企業(yè)已經(jīng)把設(shè)計(jì)進(jìn)行前置化,由UI設(shè)計(jì)師來(lái)完成交互的工作。


其中交互設(shè)計(jì)+信息架構(gòu)設(shè)計(jì)是設(shè)計(jì)原型圖的關(guān)鍵,這兩個(gè)是密不可分的,如何制作原型圖,如何在原型圖里設(shè)置一些交互事件,給大家推薦《信息架構(gòu)設(shè)計(jì)》這本書(shū)里有專(zhuān)門(mén)講到。再了解原型設(shè)計(jì)之前,不得不提到一個(gè)通用知識(shí)點(diǎn),交互設(shè)計(jì)的七大定律。(后文有介紹)


框架層(指界面設(shè)計(jì)、組件設(shè)計(jì))

框架層這部分有一些爭(zhēng)議,有的設(shè)計(jì)師認(rèn)為就直接做界面設(shè)計(jì)了,其實(shí)框架層還不能把它理解成是界面設(shè)計(jì),它僅僅是做了一些業(yè)務(wù)的模塊兒的框架而已,更多的其實(shí)是將它組件化: 將原型組件化、模塊兒化,類(lèi)似我們直接從Antdesign組件庫(kù)復(fù)制來(lái)內(nèi)容簡(jiǎn)單改改之類(lèi)得操作,完成的是組件和界面的設(shè)計(jì),這些界面并不是最終完整的交付樣式。


表現(xiàn)層(可視化呈現(xiàn),UI視覺(jué)呈現(xiàn))

這部分和設(shè)計(jì)師關(guān)聯(lián)度最大的一部分,就是界面中的配色、配色、圖標(biāo)、樣式、結(jié)構(gòu)、布局、排版等設(shè)計(jì),但是我們?cè)O(shè)計(jì)師需要從范圍層了解業(yè)務(wù)熟悉最初PRD產(chǎn)品需求文檔去一點(diǎn)點(diǎn)做起,其中設(shè)計(jì)師在戰(zhàn)略層參與度可能只有2%左右,范圍層參與度5%左右,從結(jié)構(gòu)層開(kāi)始逐步往上參與度越來(lái)越高,至少結(jié)構(gòu)層,框架層和表現(xiàn)層的參與度是很深得。



2.1.2 B端產(chǎn)品的設(shè)計(jì)過(guò)程是什么

所以,通過(guò)梳理用戶(hù)體驗(yàn)五要素,不難看出B端UI設(shè)計(jì)師的工作流程就是,01. 接到項(xiàng)目后,設(shè)計(jì)師主要閱讀產(chǎn)品經(jīng)理給到的PRD需求文檔,同時(shí)去參與原型設(shè)計(jì),根據(jù)最初版PRD輸出一份低保真原型圖,和其他部門(mén)進(jìn)行初次評(píng)審;02. 經(jīng)過(guò)初次評(píng)審討論過(guò)后,完善后的功能和頁(yè)面文案,產(chǎn)品經(jīng)理補(bǔ)全和輸出完善后的產(chǎn)品PRD需求文檔,由設(shè)計(jì)師根據(jù)完善后得PRD需求文檔經(jīng)過(guò)規(guī)范設(shè)計(jì)輸出高保真原型圖 ,與其他部門(mén)帶著初次評(píng)審討論后的問(wèn)題,進(jìn)行二次評(píng)審。03. 最終再由設(shè)計(jì)師經(jīng)過(guò)組件化形成視覺(jué)圖。04. 同時(shí)設(shè)計(jì)師提供切圖,與前端緊密溝通,上線(xiàn)前制作設(shè)計(jì)走查表,進(jìn)行設(shè)計(jì)走查。05、最后上線(xiàn)后根據(jù)數(shù)據(jù)、用戶(hù)反饋等提出交互和視覺(jué)可優(yōu)化得方案建議,進(jìn)行版本迭代。


2.2 交互設(shè)計(jì)七大定律


01. 菲茨定律:當(dāng)設(shè)計(jì)師需要讓用戶(hù)重點(diǎn)去看到頁(yè)面中某一個(gè)突出點(diǎn),點(diǎn)擊到一個(gè)區(qū)域時(shí),設(shè)計(jì)師就需要做到適合的大小,適合的區(qū)域,適合的位置,適合的形狀,適合的顏色。也就是你想讓用戶(hù)點(diǎn)擊的時(shí)候就突出重點(diǎn)想顯示的,不想讓用戶(hù)點(diǎn)擊退出的,就把它設(shè)計(jì)的的足夠小。比如按鈕得退出和付款,實(shí)心付款按鈕為主要按鈕,虛線(xiàn)置灰退出按鈕為次要按鈕,比如常說(shuō)的海報(bào)中字要大,logo要大,這些都屬于菲茨定律。


02. 席克定律:用戶(hù)面對(duì)的刺激(或選擇)越多,他們做出決定的時(shí)間就越長(zhǎng),由于用戶(hù)的時(shí)間很寶貴 ,用戶(hù)沒(méi)有義務(wù)花更多留在我們的網(wǎng)站上,所以我們需要有選擇的地方對(duì)選擇進(jìn)行分類(lèi)。


03. 7土2法則(米勒定律):比如圓周率3.1415926,一般都能記住,而如果再往后加幾個(gè)數(shù)字,大家往往很難記住,原因就是經(jīng)過(guò)大量測(cè)試,人腦容易記憶7位數(shù)字前后得數(shù)字,比如設(shè)計(jì)銀行輸入密碼的時(shí)候就用到了7土2 法則,設(shè)置密碼過(guò)多人腦不易記憶。


04. 接近法則:格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。


05. 防錯(cuò)原則:當(dāng)用戶(hù)在使用產(chǎn)品中,預(yù)判用戶(hù)本身或產(chǎn)品一定會(huì)出錯(cuò)時(shí)候,可以告訴用戶(hù)怎么可以不犯錯(cuò),或者將風(fēng)險(xiǎn)降低。比如電腦的關(guān)閉電源鍵,就允許電腦司機(jī)時(shí)允許系統(tǒng)犯錯(cuò),讓用戶(hù)使用關(guān)閉電腦電源鍵進(jìn)行重啟。比如銀行取出錢(qián)后,銀行卡有忘拔現(xiàn)象,銀行完全可以做到像光大銀行那樣去再取錢(qián)流程中改成先拔卡再出鈔得交互流程,就可以避免忘記拔卡,但其他銀行都沒(méi)有這么改進(jìn),仍然是先出鈔后拔卡得原因是允許用戶(hù)犯錯(cuò)。


06. 奧卡姆剃刀原理:化繁為簡(jiǎn),如無(wú)必要,勿增實(shí)體。比如小米電視遙控器的設(shè)計(jì),由原來(lái)傳統(tǒng)的很多遙控器按鍵只優(yōu)化成了保留上下左右為數(shù)不多的幾個(gè)重要按鍵,原來(lái)的遙控器數(shù)字按鈕如果真正要輸入數(shù)字的時(shí)候通過(guò)功能性,調(diào)出數(shù)字來(lái),這樣在遙控器得設(shè)計(jì)中基本只保留20%主要功能按鍵。這就是交互上的優(yōu)化。比如在UI界面中,也會(huì)用到這個(gè)問(wèn)題,簡(jiǎn)化文字,把文字用圖標(biāo)替換,還有各種流程得優(yōu)化等等。


07. 雅克布定律:以用戶(hù)習(xí)慣的使用模式去設(shè)計(jì)產(chǎn)品,降低用戶(hù)學(xué)習(xí)成本,遵從用戶(hù)使用習(xí)慣。 利用現(xiàn)有的思維模型,用戶(hù)習(xí)慣,我們可以創(chuàng)建出色的用戶(hù)體驗(yàn),使用戶(hù)可以專(zhuān)注于自己的任務(wù)而不是學(xué)習(xí)新的模型習(xí)慣。



2.3 B端產(chǎn)品用戶(hù)畫(huà)像


2.3.1用戶(hù)畫(huà)像概念

用戶(hù)畫(huà)像又稱(chēng)用戶(hù)角色,作為一種勾畫(huà)目標(biāo)用戶(hù)、聯(lián)系用戶(hù)訴求與設(shè)計(jì)方向的有效工具,用戶(hù)畫(huà)像在各領(lǐng)域得到了廣泛應(yīng)用。用戶(hù)畫(huà)像分為兩種,不論C端和B端都會(huì)做這樣的用戶(hù)畫(huà)像。總共可分為兩部分,基本信息數(shù)據(jù)和行為數(shù)據(jù)。


基本信息數(shù)據(jù):當(dāng)我們?nèi)チ私庥脩?hù)的基本信息的一些數(shù)據(jù)時(shí),職業(yè),收入,年齡等等,這些和功能有很多的關(guān)聯(lián)度,比如唯品會(huì)用戶(hù)畫(huà)像關(guān)鍵詞是:女性、折扣、白領(lǐng) ,唯品會(huì)產(chǎn)品定位聚焦女性,這些基礎(chǔ)信息數(shù)據(jù),就能給產(chǎn)品帶來(lái)很好的結(jié)果,當(dāng)我們要做一個(gè)女性的購(gòu)物平臺(tái)的時(shí)候,可以先把男性用戶(hù)拋除掉去考慮設(shè)計(jì)方向,再比如收入就知道了,大概產(chǎn)品面向的收入群體將是什么收入群體的人,那么我賣(mài)貨的價(jià)格區(qū)間、包括設(shè)計(jì)的風(fēng)格就是一個(gè)什么樣群體的設(shè)計(jì)風(fēng)格。那些賣(mài)奢侈品的不是黑色就是灰色,要不就是棕色,但未必是適合唯品會(huì)產(chǎn)品的風(fēng)格,需要找出這些基本信息去和產(chǎn)品進(jìn)行關(guān)聯(lián)度,把基本信息放到設(shè)計(jì)結(jié)果中去考慮。


行為數(shù)據(jù):指用戶(hù)的愛(ài)好,這部分群體有哪些愛(ài)好,是喜歡購(gòu)物,還是喜歡運(yùn)動(dòng),他/她的消費(fèi)情況是什么,喜歡旅游還是美食,他/她經(jīng)常用哪些APP,他常用的設(shè)備,是蘋(píng)果手機(jī)呢還是安卓,小米還是華為,等等得到這些數(shù)據(jù),也能得到一些用戶(hù)喜歡什么樣的競(jìng)品,這些數(shù)據(jù)就能側(cè)面的在我們的產(chǎn)品中得到反饋,得到功能和設(shè)計(jì)上的指導(dǎo)和其他產(chǎn)品的區(qū)別。這些行為數(shù)據(jù),不管我們做C端還是B端,都要獲取到,但C端和B端獲取到這些行為數(shù)據(jù)的結(jié)論是不一樣的。因?yàn)镃端用戶(hù)研究方法不一定適用在B端用戶(hù)研究方法。C端最終抽象成一個(gè)人,給他帶來(lái)的很多屬性,這些等等都會(huì)成為他的用戶(hù)畫(huà)像。

進(jìn)而找到這個(gè)人,將他的社會(huì)屬性,從抽象的角度慢慢變得具象,C端是他/她的社會(huì)屬性,把他做成一個(gè)普通的人,這個(gè)人有他的社會(huì)屬性,有他的社會(huì)價(jià)值,有他的社會(huì)行為。比如一個(gè)女性,一定喜歡美食,一定會(huì)買(mǎi)化妝品。


2.3.2 B端用戶(hù)畫(huà)像本質(zhì)

比如做一個(gè)和電影相關(guān)的管理系統(tǒng),電影行業(yè)包括很多人員管理,設(shè)備管理等,這里不能把用戶(hù)畫(huà)像抽象成一個(gè)男性或者女性了,而應(yīng)該把它抽象成一個(gè)職業(yè),比如抽象成一個(gè)導(dǎo)演,導(dǎo)演需要去管理什么東西,它需要哪些資源去整合。導(dǎo)演就又叫做行業(yè)屬性坐標(biāo)。B端不以社會(huì)屬性去做用戶(hù)畫(huà)像,一定以行業(yè)坐標(biāo)去做用戶(hù)畫(huà)像,我們?cè)谡碜髌芳臅r(shí)候需注意不要與C端畫(huà)像整理混淆。


我們要做一個(gè)行業(yè)可以不用管他/她是誰(shuí),也可以不用管他/她有什么樣的社會(huì)屬性,比如做CRM最重要的在里面起到作用的是,客戶(hù)關(guān)系管理和銷(xiāo)售等; 比如做OA系統(tǒng),就是一般的員工,等級(jí),職能等等,可以看出行業(yè)屬性(職業(yè)屬性)決定了他的用戶(hù)畫(huà)像的精準(zhǔn)度,一定把這個(gè)人拉到行業(yè)里去研究,研究社會(huì)屬性沒(méi)有價(jià)值。這是C端和B端做用戶(hù)研究最大的區(qū)別。


2.4 B端產(chǎn)品用戶(hù)調(diào)研


2.4.1用戶(hù)調(diào)研的作用/目的/重要性


01. 了解產(chǎn)品業(yè)務(wù)需求定位:可以幫助了解目標(biāo)用戶(hù)的信息,從用戶(hù)的角度:未來(lái)使用你產(chǎn)品的用戶(hù),他理不理解你的產(chǎn)品想要表達(dá)什么,你的產(chǎn)品講了哪些功能。因?yàn)楹芏嗪玫漠a(chǎn)品我們打開(kāi)它第一眼就知道要干什么,是給我們做什么的。同時(shí)站在設(shè)計(jì)者的角度:怎么可以把這個(gè)產(chǎn)品設(shè)計(jì)清楚,比如做一個(gè)CRM客戶(hù)關(guān)系管理系統(tǒng),具體管理什么我們是不清晰的,想要清晰就需要通過(guò)用戶(hù)調(diào)研這個(gè)過(guò)程給它展開(kāi)。


02.解決功能信息架構(gòu)問(wèn)題:可以幫助設(shè)計(jì)師更明確需求功能得合理性和優(yōu)先級(jí),比如頁(yè)面標(biāo)題的使用、標(biāo)題的層級(jí)、需要在信息層級(jí)清晰得情況下體現(xiàn)出來(lái),而明確信息層級(jí)同樣需要通過(guò)用戶(hù)研究體現(xiàn)出來(lái)。


03.讓可用性測(cè)試更加準(zhǔn)確:可以幫助鎖定合適的測(cè)試用戶(hù),來(lái)測(cè)試我們的產(chǎn)品使用程度,使用體驗(yàn)是不是好,這時(shí)需要要找目標(biāo)用戶(hù)去測(cè)試,比如小米有品針對(duì)群體是米粉,唯品會(huì)針對(duì)的群體是職場(chǎng)女性,而不像C端找所有的人去測(cè)試。


04.解決團(tuán)隊(duì)協(xié)作溝通問(wèn)題:確定用研目標(biāo)可以有理有據(jù)的把設(shè)計(jì)目標(biāo)和產(chǎn)品經(jīng)理的意見(jiàn)達(dá)成共識(shí),因?yàn)槲磥?lái)一定會(huì)多次和產(chǎn)品進(jìn)行PK,像諸如設(shè)計(jì)師組件化沒(méi)用好這些理由也不會(huì)是pk點(diǎn),確定用研護(hù)鏢可以更好的深度去理解原型圖,可以把團(tuán)隊(duì)協(xié)作溝通的問(wèn)題解決好。


2.4.2 用戶(hù)調(diào)研的方法


01. 確定研究對(duì)象:首先拿到一個(gè)產(chǎn)品,拿到一個(gè)需求的時(shí)候,這個(gè)需求通常很模糊,比如只告訴做一款CRM客戶(hù)關(guān)系管理系統(tǒng),但汽車(chē)行業(yè),服裝電商行業(yè),保險(xiǎn)行業(yè),銀行金融等等,都有CRM客戶(hù)管理系統(tǒng),不同行業(yè)的CRM肯定是不一樣的,這時(shí)候,比如要做金融的CRM,那研究方向就已經(jīng)確定了,金融CRM就可以確定去研究金融行業(yè)的業(yè)務(wù)鏈,業(yè)務(wù)流程,具體找哪些用戶(hù)群體,可以根據(jù)以往的驚經(jīng)驗(yàn)和產(chǎn)品的目標(biāo)去確認(rèn)。


02. 找研究方法 : 研究方法分主動(dòng)和被動(dòng),我們通常用的方法是被動(dòng)方法,比如自我報(bào)告法:當(dāng)這個(gè)產(chǎn)品產(chǎn)生了一些數(shù)據(jù),我們從后臺(tái)可以拉取這些數(shù)據(jù)的時(shí)候,通過(guò)這些數(shù)據(jù)去分析,這是被動(dòng)的方法,這個(gè)被動(dòng)的方法所有項(xiàng)目都可以用。而主動(dòng)的方法,就是觀察和采訪(fǎng),主動(dòng)去找用戶(hù)去找關(guān)聯(lián)度。


03. 獲取到數(shù)據(jù) : B端和C端區(qū)別之一是提高效率,它要產(chǎn)生的結(jié)果只有一個(gè)結(jié)果,就是減少成本,任何B端的系統(tǒng)都是為了實(shí)現(xiàn)這個(gè)目標(biāo),提高效率和減少成本。所以獲取數(shù)據(jù),研究數(shù)據(jù)的方向不能偏離搞錯(cuò),用戶(hù)研究的方向不要搞錯(cuò)。比如我們以用戶(hù)為中心來(lái)設(shè)計(jì),就會(huì)認(rèn)為用戶(hù)的操作體驗(yàn)感是第一位的,其實(shí)不對(duì),放在第一位去考慮的應(yīng)該是以系統(tǒng)的最優(yōu)化,提升效率為第一位,而用戶(hù)也可以為這件事情做一些改變而找到平衡點(diǎn),數(shù)據(jù)導(dǎo)向得提高效率,減少成本有時(shí)會(huì)大于用戶(hù)的操作體驗(yàn)。


04. 用研行為: 剛才前面提到的這些注意事項(xiàng),到底應(yīng)該找什么方法去得到這些數(shù)據(jù)呢?第一我們可以通過(guò)后臺(tái)數(shù)據(jù)比如通過(guò)百度統(tǒng)計(jì)等系統(tǒng)來(lái)獲得;第二通過(guò)問(wèn)卷法發(fā)出一些問(wèn)卷,用戶(hù)可能散落在全國(guó)不同位置;第三可以通過(guò)用戶(hù)定性訪(fǎng)談來(lái)獲得;第四可以通過(guò)用戶(hù)旅程圖來(lái)決定用研行為。


05. 分析調(diào)研結(jié)果: 研究結(jié)果不是為了放到我們的B端作品集里的,而研究結(jié)果一定是為了去定性、定量、讓數(shù)據(jù)回歸到產(chǎn)品功能本身。同時(shí)經(jīng)常問(wèn)自己這些問(wèn)題,去根據(jù)研究結(jié)果和問(wèn)題進(jìn)行匹配思考,比如研究了那么多,用到了用戶(hù)畫(huà)像得出的結(jié)論了么,用到了哪里?在項(xiàng)目中能舉個(gè)例子嗎?采用什么樣的視覺(jué)去實(shí)現(xiàn)了用戶(hù)體驗(yàn)要素?


2.4.3 B端用戶(hù)訪(fǎng)談模板


2.4.3.1 用戶(hù)訪(fǎng)談概念:


01.確定訪(fǎng)談目標(biāo):了解目標(biāo)用戶(hù)群體,通過(guò)訪(fǎng)談信息來(lái)進(jìn)一步構(gòu)建所需要的用戶(hù)畫(huà)像,從而確定設(shè)計(jì)方案與功能優(yōu)先級(jí)。02. 定性/定量訪(fǎng)談目標(biāo):將這些目標(biāo)定量、定性,選擇不同的訪(fǎng)問(wèn)對(duì)象,構(gòu)建不同的角色畫(huà)像。比如問(wèn)銷(xiāo)售的用戶(hù)畫(huà)像,要找不同的訪(fǎng)問(wèn)對(duì)象,銷(xiāo)售總監(jiān),普通實(shí)習(xí)生等等,三到四個(gè)角色,樣本越多,用戶(hù)畫(huà)像越準(zhǔn)確。03. 訪(fǎng)談過(guò)程:提前把問(wèn)題寫(xiě)出來(lái),拿著問(wèn)題去聊,用錄音設(shè)備,記錄表格,一個(gè)提問(wèn),一個(gè)記錄,分開(kāi)后記錄比較準(zhǔn)確。04.訪(fǎng)談結(jié)束:要做信息匯總,要做分析建模。分析建模就是將信息最終變得有意義。


B端用戶(hù)訪(fǎng)談模板有30個(gè)問(wèn)題,這30個(gè)問(wèn)題決定了我們的用戶(hù)畫(huà)像的精準(zhǔn)度和產(chǎn)品的用戶(hù)畫(huà)像的價(jià)值。用戶(hù)訪(fǎng)談會(huì)問(wèn)些什么問(wèn)題呢?當(dāng)我們調(diào)研的時(shí)候把問(wèn)題寫(xiě)出來(lái)的時(shí)候,就已經(jīng)解決了一半的問(wèn)題了。


2.4.3.2 B端用戶(hù)訪(fǎng)談30問(wèn)


01、基礎(chǔ)特征


崗位:你是從事什么崗位的?是總監(jiān)還是普通職員?目的是為了知道不同的權(quán)限的使用者,進(jìn)而就可以在系統(tǒng)中設(shè)置這些權(quán)限。

職責(zé):需要獲取到用戶(hù)不同的需求,因?yàn)槊恳粋€(gè)崗位有不同的職責(zé),他們的需求點(diǎn)也是不一樣的。根據(jù)這些不同的需求,我們?cè)诮缑嬷械脛?dòng)態(tài)儀表盤(pán)部分,就可以根據(jù)不同職責(zé)來(lái)顯示不同的內(nèi)容。

姓名:可以讓訪(fǎng)談?dòng)涗浀玫礁诱鎸?shí)的體現(xiàn),目的是可以獲得產(chǎn)品的一些真實(shí)的基礎(chǔ)字段。

年齡:是用戶(hù)認(rèn)知和經(jīng)驗(yàn)度的體現(xiàn),用戶(hù)的年齡可以代表他們對(duì)行業(yè)的認(rèn)知,和整個(gè)企業(yè)流程的認(rèn)知程度,一般性理解,用戶(hù)的年齡越大,那么他的經(jīng)驗(yàn)越豐富。

教育:指用戶(hù)是什么學(xué)歷,目的是為了了解用戶(hù)的經(jīng)歷與熟練程度,通常認(rèn)為,用戶(hù)的教育越高的人,他們往往使用軟件操作的熟練度會(huì)越好。

位置:指用戶(hù)在什么地方來(lái)使用,目的是知道了場(chǎng)景與優(yōu)先級(jí),用戶(hù)是在寫(xiě)字樓里還是精英場(chǎng)所來(lái)使用我們的產(chǎn)品。因此得出基礎(chǔ)特征是要得出這些結(jié)論,得出這些結(jié)論進(jìn)而反饋到產(chǎn)品中去。


02、行為接觸點(diǎn)


使用頻次:不同的崗位用戶(hù)使用功能的優(yōu)先級(jí)是不一樣的,用戶(hù)使用頻次越高的功能,這個(gè)功能的優(yōu)先級(jí)就越高。了解之后,那在下次迭代的時(shí)候就需要把重要級(jí)別的功能放在易操作的區(qū)域去體現(xiàn)。比如這個(gè)重要功能就是一個(gè)icon,那么把它放一個(gè)快捷入口。

使用時(shí)長(zhǎng):也能代表功能的優(yōu)先級(jí),用戶(hù)使用時(shí)間最長(zhǎng)的功能,代表可這個(gè)功能優(yōu)先級(jí)很高。

時(shí)間段:用戶(hù)在什么時(shí)間段使用的是最多的,我們就知道了這個(gè)功能的活躍度,這個(gè)數(shù)據(jù)指標(biāo),主要和技術(shù)有關(guān),我們可以從后臺(tái)數(shù)據(jù)去獲得。

使用設(shè)備:用戶(hù)使用設(shè)備兼容的優(yōu)先級(jí),平時(shí)用戶(hù)用什么設(shè)備,再訪(fǎng)談過(guò)程中,需要問(wèn)具體使用電腦的分辨率,屏幕的尺寸,屏幕的比例,都可以去實(shí)際的調(diào)研一下。在我們做B端界面選擇屏幕尺寸的時(shí)候,可以采用結(jié)合實(shí)際情況用戶(hù)使用的屏幕分辨率尺寸來(lái)設(shè)計(jì)界面。

相關(guān)軟件:用戶(hù)平時(shí)的操作習(xí)慣和流程是什么,還會(huì)使用其他軟件嗎?比如他們還用什么其他的競(jìng)品,可以繼續(xù)問(wèn)用戶(hù)其他的競(jìng)品哪里比較好,哪里是亮點(diǎn),那最終得到的目標(biāo)就是用戶(hù)的操作習(xí)慣和流程,這些也可都可以反饋在我們產(chǎn)品中。


03. 使用環(huán)境


碎片化時(shí)間:主要解決用戶(hù)場(chǎng)景的問(wèn)題,比如汽車(chē)4S店銷(xiāo)售,當(dāng)你去買(mǎi)車(chē)時(shí),銷(xiāo)售人員會(huì)問(wèn),你會(huì)買(mǎi)什么樣的車(chē),會(huì)記錄你的年齡,用車(chē)習(xí)慣,用車(chē)時(shí)間,姓名,預(yù)算,都會(huì)記錄,銷(xiāo)售通常會(huì)用一些碎片化的時(shí)間去記錄。此時(shí)就可以得出兩個(gè)結(jié)論:1.我們?cè)谠O(shè)計(jì)的時(shí)候是否可以考慮讓銷(xiāo)售充分利用碎片化來(lái)進(jìn)行這些信息的錄入,而且方便他的錄入,比如他本來(lái)只有電腦端,電腦端是一個(gè)完整版的功能,我們能不能給他設(shè)計(jì)出一個(gè)移動(dòng)端來(lái),讓銷(xiāo)售不用回到電腦屏幕中就可以去記錄這些內(nèi)容。2. 記錄時(shí)也有兩種記錄方式,是客戶(hù)講話(huà)的時(shí)候銷(xiāo)售去記錄還是這些事情做完之后銷(xiāo)售再去記錄。通過(guò)這樣的行為會(huì)得到這樣不同的設(shè)計(jì)結(jié)果,比如有人問(wèn)你們公司為什么要做B端的移動(dòng)端設(shè)計(jì)?以上就可以有理有據(jù)去解決銷(xiāo)售的場(chǎng)景問(wèn)題。


用戶(hù)的操作環(huán)境是什么:主要解決視覺(jué)體驗(yàn)問(wèn)題,用戶(hù)是白天操作還是晚上操作,是在強(qiáng)光環(huán)境操作還是弱光環(huán)境操作。這些都應(yīng)該是考的點(diǎn)。比如B端使用的ATM機(jī),應(yīng)該設(shè)計(jì)成白色還是深色模式,我們知道一般都是深色模式,是因?yàn)橥ǔJ鞘覂?nèi),它和光線(xiàn)有關(guān)系,如果是室外的取款機(jī),四周又沒(méi)有遮擋,如果還設(shè)計(jì)成深色,肯定是看不清楚的。比如HMI車(chē)載系統(tǒng),白天模式開(kāi)了深色,一定會(huì)看不清楚。所以要提前判斷使用深色模式還是淺色模式,也需要考慮在設(shè)計(jì)的時(shí)候使用什么樣的色彩和色調(diào),在室外使用還是室內(nèi)使用,如果對(duì)色彩不怎么挑,那也可以使用VI色,這樣一來(lái)視覺(jué)的保障色就確定了。還可以確定在使用周期時(shí)間,要多長(zhǎng)時(shí)間完成一個(gè)操作,應(yīng)該使用什么樣的方法可以盡快完成一個(gè)操作。通過(guò)用戶(hù)的操作環(huán)境可以得到以上信息。


是否有平行事件:用戶(hù)在做這件事情的同時(shí),他是不是需要做其他的事情,要得出至少兩種平行事件,得到的結(jié)論是,我們的界面是不是需要把某些功能整合在一起,因?yàn)橛脩?hù)經(jīng)常是需要同時(shí)做這兩種事情,同時(shí)去打開(kāi)這兩個(gè)功能,通過(guò)這樣的反饋可以把同時(shí)使用的這兩個(gè)功能結(jié)合到一起,通過(guò)訪(fǎng)談可以得到這樣的依據(jù),來(lái)進(jìn)行功能的整合。


04. 主動(dòng)詢(xún)問(wèn)用戶(hù)觀點(diǎn)


用戶(hù)的驅(qū)動(dòng)力: 去了解激勵(lì)因素,就知道了什么功能應(yīng)該做完善,什么功能并沒(méi)有那么重要。比如汽車(chē)銷(xiāo)售為什么要錄入信息,因?yàn)榭梢栽黾悠?chē)的銷(xiāo)量,錄入越準(zhǔn)確的用戶(hù)信息,他的銷(xiāo)售量越高。也就是用戶(hù)做這件事情,他的原因是什么。


用戶(hù)遇到最難事件: 在工作中或者用戶(hù)使用過(guò)程中遇見(jiàn)了什么樣難的事情,這件難的事情,就是產(chǎn)品的痛點(diǎn),就明白了當(dāng)前產(chǎn)品迫切需要什么樣的功能去幫我們?cè)O(shè)計(jì)師來(lái)解決當(dāng)前產(chǎn)品痛點(diǎn)的問(wèn)題。


用戶(hù)遇到最颯事件:他在使用過(guò)程中最滿(mǎn)意的是什么事情,就是爽點(diǎn)是什么事情,那些產(chǎn)品中解決了用戶(hù)很好的問(wèn)題的部分,去把產(chǎn)品更好的放大,讓用戶(hù)繼續(xù)使用。也就是通過(guò)訪(fǎng)談我們知道了產(chǎn)品的爽點(diǎn)是什么。


用戶(hù)擔(dān)心事件:在他們使用過(guò)程中擔(dān)心的是什么,我們也要要了解這些隱藏的問(wèn)題.


用戶(hù)期望事件: 用戶(hù)希望得到什么樣的改善,最終的目標(biāo)是想解決什么樣的問(wèn)題,到這一步其實(shí)所有問(wèn)題目前都沒(méi)有答案,我們可以繼續(xù)訪(fǎng)問(wèn),先做記錄,不做最終的答案.


問(wèn)用戶(hù)目前狀態(tài): 我們可以了解待解決的問(wèn)題,通過(guò)產(chǎn)品想解決什么問(wèn)題,進(jìn)行收集需求;用戶(hù)對(duì)于產(chǎn)品升級(jí)有什么小期待,進(jìn)行收集需求;通過(guò)用戶(hù)的反饋目前產(chǎn)品的哪些問(wèn)題,收集到目前反饋的問(wèn)題;以往問(wèn)題是否有效解決;進(jìn)行收集反饋。覺(jué)得不錯(cuò)的同類(lèi)型產(chǎn)品有哪些,通過(guò)了解競(jìng)品情報(bào),我們可以競(jìng)量多問(wèn)一些 覺(jué)得不錯(cuò)的競(jìng)品有哪些;目前產(chǎn)品有哪些地方很好,很好的地方要保持,有的產(chǎn)品升級(jí)后,以前特別好的功能突然消失了,改了沒(méi)必要,好的功能保持就可以;前產(chǎn)品有哪些地方不好,我們?nèi)?yōu)化不好的地方;以往問(wèn)題是否有效解決,當(dāng)有問(wèn)題需要解決的時(shí)候,用戶(hù)的問(wèn)題是否是通暢的。通過(guò)看用戶(hù)如何反饋,我們可以了解功能傾向,了解整個(gè)流程是否通暢


05. 聊生活

發(fā)覺(jué)人性閃光點(diǎn),提升產(chǎn)品差異競(jìng)爭(zhēng)力,1、問(wèn)目前的生活狀態(tài),婚姻狀態(tài),有沒(méi)有孩子,接送孩子的時(shí)間,平時(shí)有什么愛(ài)好?什么愛(ài)好不錯(cuò)?發(fā)覺(jué)人人性的閃光點(diǎn),好的不好的產(chǎn)品都有共性,B端產(chǎn)品中視覺(jué)的傾向是什么?比如有插畫(huà),溫馨的語(yǔ)言提示,通過(guò)什么樣的情感設(shè)計(jì)可以照顧到每個(gè)人的生活。


2.4.4 B端用戶(hù)訪(fǎng)談得出結(jié)論


如何判斷功能在用戶(hù)那里好還是不好?前面所有的都只是在記錄,現(xiàn)在才是在做判斷,判斷的第一件事,是做定量的整理,所有的問(wèn)題都收集到了,也記錄到了,至少需要有兩個(gè)樣本,去做定量整理。

2.4.4.1定量整理:行為


第一步是行為的總結(jié),量級(jí)的總結(jié),把記錄的問(wèn)題點(diǎn)、功能點(diǎn)和關(guān)鍵詞放到表格里面,經(jīng)常出現(xiàn),迫切需要解決的是什么問(wèn)題,較少的問(wèn)題是什么,偶爾的行為問(wèn)題是什么,因此偶爾的優(yōu)先級(jí)就不高了,主要關(guān)注經(jīng)常遇到的問(wèn)題點(diǎn)、功能點(diǎn)和關(guān)鍵詞。


2.4.4.2 定量整理:特征


把每個(gè)角色按照以下表格里的的特征進(jìn)行定量的描述,這時(shí)候仍然不能找出它的共性點(diǎn),但已經(jīng)把用戶(hù)的特征進(jìn)行分類(lèi)整理了,定量之后再去定性。


2.4.4.3 定量整理:特征/角色/流程


這個(gè)角色名稱(chēng)是一個(gè)具體的名字,比如王某某。以下這張表:可以看到在我們的系統(tǒng)中有哪些的權(quán)限,有哪些的角色,他們的需求是怎么樣的,這是一個(gè)完整的用戶(hù)畫(huà)像。用戶(hù)畫(huà)像是一個(gè)結(jié)果,是通過(guò)用戶(hù)訪(fǎng)談的形式完成了用戶(hù)畫(huà)像,并不是被動(dòng)的接受數(shù)據(jù)信息得出的,所以通過(guò)用戶(hù)訪(fǎng)談的形式進(jìn)行定量定性分析得到的結(jié)果是最準(zhǔn)確的。


3.1 建立情緒版


3.1.1 情緒版的概念及作用

本質(zhì)是將情緒視覺(jué)化,情緒版并不是玄學(xué)的東西,它確實(shí)可以通過(guò)圖片找到對(duì)應(yīng)的圖形元素,因?yàn)閳D形(照片)是可以表達(dá)情緒的,比如看到一張照片會(huì)感受什么什么情緒:熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關(guān)的關(guān)鍵詞。


情緒版是一個(gè)特別快速能和產(chǎn)品,我們的團(tuán)隊(duì)包括設(shè)計(jì)團(tuán)隊(duì)進(jìn)行溝通的一種方式,比如要設(shè)計(jì)一個(gè)界面,需要幾天才能設(shè)計(jì)出來(lái),但我想提前知道一下未來(lái)界面設(shè)計(jì)成什么樣子,那就先做一個(gè)情緒版,讓大家知道,找的方向是什么,這樣適合與大家及時(shí)的溝通,大家也會(huì)明白產(chǎn)品將會(huì)做成什么樣子,達(dá)成產(chǎn)品的最終設(shè)計(jì)定調(diào)。


3.1.2 怎么建立情緒版


01. 提煉關(guān)鍵詞:獲取本次產(chǎn)品設(shè)計(jì)中所要實(shí)現(xiàn)的產(chǎn)品3-5個(gè)必要的關(guān)鍵字詞組,其中包括交互或視覺(jué)目標(biāo),通常由一些比較抽象的形容詞組成。比如:在做的產(chǎn)品是醫(yī)療行業(yè),那么醫(yī)療相關(guān)關(guān)鍵字詞組是:生命/健康/安全等。


02.關(guān)鍵詞發(fā)散:通過(guò)獲取到的關(guān)鍵詞的基礎(chǔ)上,發(fā)散出來(lái)一些新的詞語(yǔ),這種發(fā)散詞匯,不是簡(jiǎn)單頭腦風(fēng)暴產(chǎn)生的,而是要有目的性的進(jìn)行提取,要更加的具體。比如剛才舉例醫(yī)療行業(yè),生命可以繼續(xù)發(fā)散出血液、器官等衍生關(guān)鍵詞。


03. 搜索圖形: 對(duì)之前總結(jié)出的幾個(gè)關(guān)鍵詞在圖庫(kù)中進(jìn)行查找,也可以在直接在behance里找別人收藏好的情緒版圖片直接用,效率可能更高一點(diǎn)。


04. 制作情緒版: 搜索大量圖片后,挑出我們需要的進(jìn)行整理,采用一種拼貼方式進(jìn)行設(shè)計(jì)排版,拼貼出來(lái)需要得到需要得到的色彩,構(gòu)圖,質(zhì)感和字體。


05. 得出結(jié)論: 在圖形、色彩、字體、質(zhì)感、構(gòu)圖,以上五點(diǎn),得到合適的設(shè)計(jì)方案,快速與團(tuán)隊(duì)進(jìn)行溝通,直觀表達(dá)產(chǎn)品清徐,達(dá)成產(chǎn)品的設(shè)計(jì)定調(diào)。產(chǎn)品調(diào)性(企業(yè)調(diào)性)其實(shí)就是用企業(yè)的方式把故事講述出來(lái),是一種通過(guò)情緒版方法來(lái)講故事的方式。


3.2 品牌三元法


3.2.1 品牌三元法為什么逐漸替代情緒版


品牌三元法是通過(guò)品牌三板斧模型得出的一個(gè)確定設(shè)計(jì)主風(fēng)格的一種新得方法,品牌三板斧模型可以總概為用戶(hù)調(diào)研關(guān)鍵的三個(gè)維度,一目標(biāo)用戶(hù)是誰(shuí)?二產(chǎn)品服務(wù)是什么?三對(duì)于目標(biāo)用戶(hù)來(lái)說(shuō),你的產(chǎn)品服務(wù)有什么核心價(jià)值。當(dāng)在回答完這三個(gè)問(wèn)題以后,我們其實(shí)就已經(jīng)清楚我們的品牌定位是什么了,因?yàn)樗暮诵膬?yōu)勢(shì)是比較明顯的,這樣我們就知道我們將來(lái)會(huì)面對(duì)什么樣的人群,去怎樣去宣傳它的賣(mài)點(diǎn),同時(shí)做出產(chǎn)品的差異化。


通過(guò)這幾年得工作案例設(shè)計(jì)實(shí)踐,在確定設(shè)計(jì)主風(fēng)格時(shí),情緒版方法逐漸有被品牌三元法替代得趨勢(shì),因?yàn)榍榫w版這種把抽象的詞不太好表現(xiàn)的詞,翻譯成圖片的方式,比如剛才提到醫(yī)療行業(yè)的關(guān)鍵詞是生命,健康,安全的,設(shè)計(jì)師找到很多這種相關(guān)的圖片,挑出來(lái)后從這些圖片里面找到一個(gè)共同的規(guī)律,最后去設(shè)計(jì)。這里面就有兩個(gè)問(wèn)題,一個(gè)原因是關(guān)鍵詞非常的平,生面,安全,健康,很難更準(zhǔn)確的表達(dá)衍生關(guān)鍵詞。另外一個(gè)問(wèn)題是它非常局限設(shè)計(jì)師的創(chuàng)意,因?yàn)樗菑囊恍┈F(xiàn)有的圖片里面然后去挑,所以很多設(shè)計(jì)師就反饋現(xiàn)有的方法不是很好用,比如當(dāng)我們想到安全這個(gè)詞,可能所有人想到都是特別綠的感覺(jué),或者干凈這個(gè)詞,就會(huì)統(tǒng)一聯(lián)想到白色這個(gè)畫(huà)面,大家從一開(kāi)始想法就差不多,所以它很難體現(xiàn)出創(chuàng)意。所以由于情緒版嚴(yán)重限制了自己的想象力,沒(méi)辦法把產(chǎn)品核心的氣質(zhì)表現(xiàn)出來(lái),雖然情緒版正確但是是一個(gè)平庸的結(jié)果,大家沒(méi)辦法記住的結(jié)果。


3.2.2 如何應(yīng)用品牌三元法


01. 理性層面(業(yè)務(wù)層面),傳遞產(chǎn)品理念:獲取本次產(chǎn)品設(shè)計(jì)中體現(xiàn)業(yè)務(wù)層面,可以傳達(dá)產(chǎn)品理念得5-10個(gè)關(guān)鍵詞,對(duì)應(yīng)的放在左邊。


02. 感性層面(人文層面),營(yíng)造產(chǎn)品氛圍:主要體現(xiàn)這個(gè)產(chǎn)品給用戶(hù)帶來(lái)什么好處,宣傳的角度是什么。獲取本次產(chǎn)品設(shè)計(jì)中體現(xiàn)人文層面,可以傳達(dá)產(chǎn)品氛圍的5-10個(gè)關(guān)鍵詞,對(duì)應(yīng)的放在右邊。


03. 個(gè)性層面(氣質(zhì)靈魂),創(chuàng)造獨(dú)特風(fēng)格:結(jié)合理性的業(yè)務(wù)層面和感性的人文層面,來(lái)創(chuàng)作出什么樣的畫(huà)面,和獨(dú)特風(fēng)格的感覺(jué)。同樣總結(jié)出5個(gè)左右的關(guān)鍵詞,放在下邊。


04. 結(jié)合以上三個(gè)維度,提煉主視覺(jué)畫(huà)面:當(dāng)出現(xiàn)這三部分詞的時(shí)候,經(jīng)過(guò)思考或者大家一起頭腦風(fēng)暴,可能一開(kāi)始想到的比較淺,但最終一定能想到一個(gè)最終關(guān)鍵詞或者特別符合我們這個(gè)產(chǎn)品氣質(zhì)的畫(huà)面,因?yàn)橐陨先糠值贸鲫P(guān)鍵詞也都是經(jīng)過(guò)品牌三板斧模型推演出有關(guān)聯(lián)的關(guān)鍵詞,想到一個(gè)符合產(chǎn)品氣質(zhì)的畫(huà)面并不難,再得出這個(gè)主視覺(jué)畫(huà)面后,這就是最終產(chǎn)品調(diào)性的主視覺(jué),既符合產(chǎn)品定位,又具有獨(dú)特的差異性。


05. 傳達(dá)產(chǎn)品,用視覺(jué)語(yǔ)言講故事:接下來(lái),當(dāng)這個(gè)主題、主視覺(jué)確定了以后,在看怎么樣用具體的視覺(jué)設(shè)計(jì)技能,去傳達(dá)我們的產(chǎn)品,也就是用視覺(jué)語(yǔ)言來(lái)講故事,具體注意三個(gè)方面,一是表像,元素要符合這個(gè)視覺(jué)主題,二是關(guān)聯(lián),元素之間要具有關(guān)聯(lián)。三是隱喻,用視覺(jué)的手段含蓄的表達(dá)產(chǎn)品的一些特性。比如云計(jì)算的一些產(chǎn)品,做得比較復(fù)雜每一個(gè)圖標(biāo)上都有一些曲線(xiàn)切割的畫(huà)面,這樣做的原因其實(shí)不是為了炫技,它是為了表達(dá)云計(jì)算彈性可擴(kuò)展的特性,好比拍電影,中國(guó)人講究隱晦。


4.1 色彩規(guī)范


4.1.1 選色

在系統(tǒng)色彩中,以Antdedign為例,系統(tǒng)色彩里包含了很多不同的色調(diào),但不可能用到這么多顏色,這時(shí)要應(yīng)用選擇幾個(gè)顏色,選幾個(gè)我們應(yīng)用的顏色。第一步要做的就是選色,選出應(yīng)用色彩,這個(gè)應(yīng)用色彩也就是我們建立得視覺(jué)規(guī)范中的基礎(chǔ)色板,在選色時(shí)候需注意,要有有明確的心理預(yù)期,比如醫(yī)療行業(yè)中常用藍(lán)色和綠色,就是符合預(yù)期的顏色。在基礎(chǔ)色板里選擇調(diào)色,應(yīng)選擇兩個(gè)相同級(jí)別的藍(lán)色和綠色;基礎(chǔ)色板里選不同顏色時(shí)不要超過(guò)三個(gè)級(jí)別的跳躍;當(dāng)選擇一個(gè)確定的顏色時(shí),可以選擇草綠或者青綠色來(lái)作為輔助色;在基礎(chǔ)色板里,最頂部的顏色最適合做背景色,中間的顏色適合做按鈕色,底部的顏色適合做狀態(tài)色,或者小面積文字的填充色,其余就是搭配過(guò)度的作用。再比如零售、比如金融行業(yè)的產(chǎn)品,會(huì)選擇不同的顏色,那這些顏色代表了什么,是不是會(huì)和企業(yè)的VI色是有相符之處,這些都是我們?nèi)ヒ紤]的。


4.1.2 注意色彩的兩個(gè)特性


01. 注意品牌性:體現(xiàn)特性和傳播理念、價(jià)值觀:比如宜家,我們立刻會(huì)想到的是黃色和藍(lán)色。比如京東,我們會(huì)想到紅色。如果是餓了么,我們會(huì)想到藍(lán)色。這些都是標(biāo)識(shí)性的色彩,體現(xiàn)和傳遞的就是品牌理念和價(jià)值觀。這些顏色一定不是隨便選的,比如,宜家的黃色和藍(lán)色,其實(shí)是瑞典的國(guó)旗的顏色,代表著宜家的來(lái)源地來(lái)源于瑞典,因?yàn)槿鸬涫且粋€(gè)很強(qiáng)調(diào)簡(jiǎn)約設(shè)計(jì)的國(guó)家,貫穿始終是在強(qiáng)調(diào)它的的價(jià)值觀。一些關(guān)鍵行動(dòng)點(diǎn):比如選中的狀態(tài),按鈕的顏色,在很重要的地方用主色表達(dá),這就是在體現(xiàn)B端的產(chǎn)品的色彩價(jià)值觀和企業(yè)價(jià)值觀的地方


02. 注意色彩的功能性:色彩需要體現(xiàn)功能有明確的信息以及狀態(tài)含義,色彩代表它獨(dú)特的含義,比如成功色,通常會(huì)選擇綠色,再系統(tǒng)色板里,青綠草綠都可以選。比如出錯(cuò)/刪除/失敗用紅色,表示警告警示。比如鏈接要用藍(lán)色。


4.2 圖標(biāo)規(guī)范

畫(huà)圖標(biāo)要注意圖標(biāo)的識(shí)別性、統(tǒng)一性和獨(dú)特性。圖標(biāo)首先要一眼看出來(lái)表達(dá)的含義,其次是圖標(biāo)設(shè)計(jì)圖標(biāo)的大小,線(xiàn)寬粗細(xì),圓角大小,圖標(biāo)風(fēng)格等這些都需要統(tǒng)一,最后最好可以體現(xiàn)出圖標(biāo)的獨(dú)特性,獨(dú)特性就是差異化,這也是品牌三遠(yuǎn)法得核心,塑造產(chǎn)品的差異化,具體分析方法也可應(yīng)用在圖表設(shè)計(jì)當(dāng)中,比如根據(jù)品牌基因進(jìn)行延展,也可根據(jù)主風(fēng)格主視覺(jué)設(shè)計(jì)定調(diào),設(shè)計(jì)出獨(dú)特風(fēng)格且符合產(chǎn)品定位得圖標(biāo)應(yīng)用在產(chǎn)品當(dāng)中。


4.3 文字規(guī)范


4.3.1 字體家族

在B端頁(yè)面中字體的顯示順序,有固定的一套代碼模式,可以理解為,比如有的用戶(hù)電腦沒(méi)有平方字體,所以會(huì)顯示出冬青黑體,來(lái)替代平方字體的設(shè)計(jì)稿,如果沒(méi)有冬青黑體,就用微軟雅黑替代顯示,字體家族中,從左到右代表了字體顯示的有限順序,平方、冬青黑體、微軟雅黑、黑體、宋體,中英文都是。


4.3.2 主字體

在系統(tǒng)中有中文常用PingFangSC、微軟雅黑、思源黑體;英文常用San FranciscoUI(SF字體)、Helvetica Neue、Arial


4.3.3 大小與行高


方法一:在Antdesign中規(guī)定的,比如字體大小是14px,行高就是22px。規(guī)范里最小字體是14px,但可能有注釋字體,字號(hào)最小是12px。表格里的內(nèi)容是按照表格里的行高來(lái)約定的,與字體行高無(wú)關(guān),這個(gè)前提是,不在表格里內(nèi)。當(dāng)沒(méi)有出現(xiàn)文本字體,表格里的字體的時(shí)候就需要去設(shè)置字體的行高,F(xiàn)igma里默認(rèn)行高是140%,比如14px字體,行高就設(shè)置成22。這是Antdesign里的規(guī)范,但不是唯一的規(guī)范。需要注意的是,如果使用一個(gè)標(biāo)準(zhǔn)就全部使用一個(gè)標(biāo)準(zhǔn),這個(gè)需要把選中文字段落進(jìn)行調(diào)整行高。


方法二:是當(dāng)按倍率去算的行高規(guī)范,方法步驟是先調(diào)整好行高,去改變字體大小,比如無(wú)行高時(shí),1/100%/1倍行高,注意加上%號(hào);緊湊行高,1.3行高/130%;常規(guī)行高1.5行高/150%;寬松行高,1.7行高/170%。


4.3.4 文字的層級(jí)關(guān)系

輔助文字12px、正文(小)13px、正文(常規(guī))14px、小標(biāo)題(16px,小標(biāo)題是相對(duì)于14號(hào)字出現(xiàn)的)、標(biāo)題18px、主標(biāo)題20px


4.3.5 字重

比如常用的蘋(píng)方有6個(gè)字重,但在平時(shí)的設(shè)計(jì)中根本用不上。中文環(huán)境6個(gè)字重在實(shí)際顯示并沒(méi)那么好,常用兩個(gè)字體,萍方常規(guī)體400(常規(guī)),蘋(píng)方中黑體500(粗體)。而英文可以用粗體600。


4.3.6 字體顏色

在深色背景下、和淺色背景下不同內(nèi)容的色彩透明度不同,具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下,字體應(yīng)該使用白色還是黑色,應(yīng)該按著規(guī)范嚴(yán)格使用,難點(diǎn)在顏色相近的時(shí)候選擇白色還是黑色,也需按照規(guī)范執(zhí)行。


4.3.7 文字對(duì)齊關(guān)系


文案類(lèi)對(duì)齊:頁(yè)面的字段、段落較短標(biāo)題、需正文左對(duì)齊


表單類(lèi)對(duì)齊:保證整齊適合閱讀,冒號(hào)對(duì)齊法找到中間的冒號(hào),(左右對(duì)齊),如果全部使用左對(duì)齊或者右對(duì)齊會(huì)更亂。左邊一般最長(zhǎng)字段六個(gè)字。前提是中文環(huán)境,不是國(guó)際化。冒號(hào)左右要留多少像素:8px的倍數(shù)相關(guān)值,4(窄點(diǎn))、8(正常)、12、16(寬一點(diǎn))都可以。


數(shù)字類(lèi)對(duì)齊:日期,居中對(duì)齊;年齡,居中對(duì)齊/左對(duì)齊;非固定的數(shù)字:價(jià)格,采用右對(duì)齊,因?yàn)橛覍?duì)齊很容易看到價(jià)格的多少,哪個(gè)超出的更多,就越貴的,更容易區(qū)分?jǐn)?shù)字的多少。


4.4 層級(jí)規(guī)范


層級(jí)規(guī)范得核心是對(duì)信息的間隔和區(qū)分,信息的區(qū)分間隔要用偶數(shù)8的倍數(shù)。具體可分為同層級(jí)的區(qū)分,用色塊(比如氣泡)、邊框(欄目之間抖索狂等)、線(xiàn)段來(lái)進(jìn)行區(qū)分。錯(cuò)層區(qū)分,用彈窗(背景變暗)、邊框陰影(陰影的出現(xiàn)是擬物化的出現(xiàn),當(dāng)物體離它的光源越近,比如高度越高,它的陰影就越大越寬。離它的底部越近,陰影就越小,比如下拉框、搜索框、日歷控件、彈出窗口來(lái)區(qū)分)。


這里需注意,關(guān)于投影,再前端角度考慮盡量不要用太多的特效濾鏡來(lái)設(shè)計(jì),因?yàn)樵贐端網(wǎng)頁(yè)中,瀏覽器的兼容性不好,比如用ie瀏覽器就根本看不到這樣的效果,如果用谷歌瀏覽器能看到,用safri瀏覽器能看到,但在火狐下等又會(huì)看不到,想要都看到就需要兼容很多代碼,需要前端加很多代碼實(shí)現(xiàn)兼容性的效果,很增加前端的工作量,所以在B端很少用非標(biāo)準(zhǔn)型的濾鏡代碼使用,雖然可以實(shí)現(xiàn),但一般不太用,一般就是變灰、變深、變透明度最簡(jiǎn)單的方法實(shí)現(xiàn)。不同于移動(dòng)端,因?yàn)镮OS用的是原生的開(kāi)發(fā),所以不存在這個(gè)問(wèn)題。


從接觸B端設(shè)計(jì)兩年以來(lái),第一次詳細(xì)梳理B端設(shè)計(jì)的系統(tǒng)知識(shí)點(diǎn),從B端產(chǎn)品設(shè)計(jì)的工作流程,到B端設(shè)計(jì)前的準(zhǔn)備工作,交互設(shè)計(jì)的七大定律,B端產(chǎn)品業(yè)務(wù)調(diào)研,用戶(hù)訪(fǎng)談研究方法,精準(zhǔn)推導(dǎo)B端用戶(hù)畫(huà)像,到B端產(chǎn)品主風(fēng)格的設(shè)計(jì)定調(diào),進(jìn)而深度理解B端主流組件庫(kù)的視覺(jué)規(guī)范,為B端產(chǎn)品設(shè)計(jì)做出了充分的指導(dǎo)作用,對(duì)比我之前零散的知識(shí)記憶,這次B端設(shè)計(jì)前的準(zhǔn)備工作梳理,也更加深刻的由點(diǎn)及面的形成了系統(tǒng)的框架,也重新認(rèn)識(shí)了B端產(chǎn)品的分析方法,區(qū)別于之前一直從事的C端設(shè)計(jì)工作,也真正對(duì)B端和C端在設(shè)計(jì)思維上有了本質(zhì)的區(qū)分,同時(shí)也鍛煉了我的歸納能力和演繹思維和系統(tǒng)思維能力,期間參考資料有《B端設(shè)計(jì)研修》、《用戶(hù)體驗(yàn)要素》、《信息架構(gòu)設(shè)計(jì)》,謝謝閱讀,希望對(duì)大家也有幫助~thanks


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

文章來(lái)源:站酷 作者:moring_c
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(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ì)www.yvirxh.cn )是一家專(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ù)


如何定義用戶(hù)體驗(yàn)研究方法

ui設(shè)計(jì)分享達(dá)人

用戶(hù)體驗(yàn)研究可幫助企業(yè)了解目標(biāo)受眾的需求和行為,證明或反駁潛在假設(shè),使他們不會(huì)根據(jù)虛假信息繼續(xù)前進(jìn),并根據(jù)數(shù)據(jù)戰(zhàn)略性地發(fā)展他們的產(chǎn)品。最終,它幫助他們創(chuàng)建和維護(hù)能夠吸引和留住客戶(hù)的產(chǎn)品,從而使企業(yè)取得成功。但是,您實(shí)際上如何確定用戶(hù)體驗(yàn)研究項(xiàng)目的最佳方法?

本文分享了四步框架的概述:(1) 確定您想學(xué)習(xí)的內(nèi)容;(2) 確定您要針對(duì)的對(duì)象;(3) 考慮時(shí)間表、預(yù)算和團(tuán)隊(duì);(4)選擇方法。

1. 確定你想學(xué)什么

讓我們從第一步開(kāi)始——確定你想學(xué)習(xí)什么。此時(shí)有3個(gè)問(wèn)題:

您是在嘗試探索想法還是評(píng)估想法?

探索性研究,也稱(chēng)為生成性研究,通常發(fā)生在產(chǎn)品設(shè)計(jì)和開(kāi)發(fā)過(guò)程的開(kāi)始階段。它提供了對(duì)客戶(hù)問(wèn)題、需求和動(dòng)機(jī)的深入洞察,幫助您確定構(gòu)建什么、如何構(gòu)建以及目標(biāo)對(duì)象。

評(píng)估研究通常發(fā)生在產(chǎn)品設(shè)計(jì)和開(kāi)發(fā)已經(jīng)開(kāi)始或產(chǎn)品發(fā)布之后。它評(píng)估產(chǎn)品的功效和可用性,幫助您確定痛點(diǎn)和改進(jìn)機(jī)會(huì)。

您是在收集與新產(chǎn)品還是現(xiàn)有產(chǎn)品相關(guān)的數(shù)據(jù)?

如果您正在嘗試產(chǎn)生想法并弄清楚如何塑造新產(chǎn)品,那么探索性研究將是最合適的。

如果您正在嘗試確定如何改進(jìn)和改進(jìn)現(xiàn)有產(chǎn)品,則評(píng)估研究將是最佳選擇。

這是一項(xiàng)獨(dú)立的研究工作還是更大項(xiàng)目的一部分?

探索性研究通常是在推進(jìn)產(chǎn)品創(chuàng)意之前自行進(jìn)行的。

評(píng)估研究活動(dòng)往往是在正在進(jìn)行的設(shè)計(jì)和/或開(kāi)發(fā)工作的背景下進(jìn)行的。

2. 確定您的目標(biāo)對(duì)象

現(xiàn)在讓我們進(jìn)入第二步——確定你想要定位的對(duì)象。這是該過(guò)程的關(guān)鍵部分。只有與合適的人一起進(jìn)行研究,您的研究見(jiàn)解才會(huì)有價(jià)值,因此您需要注意尋找能夠提供您所需觀點(diǎn)的參與者。此時(shí)有3個(gè)問(wèn)題:

誰(shuí)是目標(biāo)受眾?

定義你想要接觸的人的特征。例如,您的目標(biāo)受眾可能是向消費(fèi)者銷(xiāo)售產(chǎn)品或服務(wù)且每月在數(shù)字廣告上花費(fèi)不到 1,000元的小型企業(yè)的所有者。

您是否已經(jīng)可以訪(fǎng)問(wèn)此受眾群體?

如果您正在對(duì)現(xiàn)有產(chǎn)品進(jìn)行研究,您可以利用現(xiàn)有的客戶(hù)群。

如果您正在研究新產(chǎn)品或嘗試接觸新的客戶(hù)群,則需要探索其他選擇來(lái)接觸目標(biāo)受眾。

如果沒(méi)有,你怎么能接觸到有代表性的受眾?

您可能會(huì)考慮使用自助招聘工具,如用戶(hù)面試或與招聘機(jī)構(gòu)合作。

3. 考慮時(shí)間表、預(yù)算和團(tuán)隊(duì)

現(xiàn)在讓我們進(jìn)入第三步——考慮時(shí)間表、預(yù)算和團(tuán)隊(duì)。所有項(xiàng)目——不僅僅是研究項(xiàng)目——都有限制,重要的是在考慮這些限制的情況下定義你的研究方法。不過(guò),約束不一定要受到限制。它們實(shí)際上是一個(gè)有用的工具,可幫助您專(zhuān)注于如何利用可用資源來(lái)產(chǎn)生最大影響并提供最大價(jià)值。

時(shí)間線(xiàn)

對(duì)于您的時(shí)間表,您想確定您是否在特定的截止日期前工作,例如即將舉行的董事會(huì)會(huì)議或產(chǎn)品發(fā)布。

預(yù)算

對(duì)于預(yù)算,您需要確定哪些資源可用并且可以分配給該項(xiàng)目。當(dāng)您考慮預(yù)算時(shí),不僅要考慮人員成本,還要考慮任何補(bǔ)充研究成本,如招聘費(fèi)用、參與者薪酬和工具,這一點(diǎn)很重要。

團(tuán)隊(duì)

對(duì)于任何團(tuán)隊(duì)限制,確定您是否具有研究能力以及這些能力是什么。您需要考慮您的團(tuán)隊(duì)中是否有可以進(jìn)行研究的人員,或者您是否需要引入外部支持。即使你有一些內(nèi)部能力,這些人也可能沒(méi)有能力在截止日期前完成工作。

4. 選擇方法

現(xiàn)在是該過(guò)程的最后一步 - 選擇用于收集數(shù)據(jù)的方法。在這里,您可以真正深入研究并弄清楚自己要做什么。有兩個(gè)組成部分會(huì)影響您的決策——范圍和數(shù)據(jù)。

范圍

對(duì)于范圍,您首先需要確定是要使用單個(gè)方法還是多個(gè)方法。利用多種方法可以收集更廣泛、更細(xì)致的數(shù)據(jù)集,但也更昂貴和耗時(shí)。您還需要確定是要進(jìn)行長(zhǎng)期研究還是需要立即獲得反饋。

長(zhǎng)期研究將是最適合的探索性研究,你需要建立的觀眾基礎(chǔ)的了解,然后才能繼續(xù)前進(jìn)。

即時(shí)反饋 最適合評(píng)估性研究,在這種研究中,您希望在繼續(xù)之前獲得投入的正在進(jìn)行的工作。

數(shù)據(jù)

對(duì)于數(shù)據(jù),您首先要考慮哪種方法最適合目標(biāo)和受眾。

如果您正在探索新產(chǎn)品的想法,您可以從采訪(fǎng)開(kāi)始。如果您正在收集有關(guān)原型的反饋,并且需要盡快從受眾那里獲得反饋,您可以利用簡(jiǎn)短的未經(jīng)審核的可用性測(cè)試會(huì)議。

您還需要考慮是要捕獲定性數(shù)據(jù)、定量數(shù)據(jù)還是兩者兼而有之。如果我們回到前面,定性數(shù)據(jù)可以幫助我們理解原因,而定量數(shù)據(jù)可以幫助我們理解什么。

您使用的方法將取決于您嘗試獲取的信息類(lèi)型,以及與您合作的時(shí)間表、預(yù)算和團(tuán)隊(duì)。

每個(gè)研究項(xiàng)目都是獨(dú)一無(wú)二的。但是定義方法的過(guò)程在不同項(xiàng)目中是相似的。如果您對(duì)進(jìn)行研究感興趣,我鼓勵(lì)您利用上面概述的四步框架來(lái)幫助您找出最佳的前進(jìn)道路。一旦您有了基本的構(gòu)建塊,您就可以繼續(xù)制定更精細(xì)的研究計(jì)劃,其中概述了具體的假設(shè)以及您將如何執(zhí)行工作。

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

文章來(lái)源:站酷 作者:對(duì)啊設(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ì)www.yvirxh.cn )是一家專(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è)人資料

存檔