<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          設計模式 | 多級撤銷 Multilevel Undo:讓用戶更有安全感

          ui設計分享達人

          What 是什么

          簡介:「多級撤銷」允許用戶撤銷一系列的操作。用戶操作的順序能被系統捕獲記錄,根據原始執行順序,一步步返回歷史操作。


          例子:用 Sketch 畫設計稿時,可以多級撤銷,允許用戶返回上一步或更早的歷史操作


          undefined


          Why 為什么

          具備多級撤銷的功能可以讓用戶覺得能夠對界面進行安全探索,不必擔心造成某些不可取消的修改。例如,如果單擊了錯誤的菜單項,不需要進行復雜的恢復,不需要退回到此前保存的文件版本,或者尋求系統管理員的幫助。


          多級撤銷也讓專家用戶更快更容易地探索工作路徑。舉例而言,一名 Photoshop 用戶可能會在一個圖片上執行一系列的濾鏡操作,研究那些結果看是不是他喜歡的,然后再逐一撤銷,回到起點。


          When 什么時候使用

          需要用戶頻繁在單一頁面上交互的用戶界面,相比普通的網站或者移動端 APP,交互操作要復雜得多。例如:文件編輯器、圖形建模工具、郵件閱讀器、數據庫軟件、寫作工具、編程環境等。該功能能使用戶撤銷一系列操作而非單一個操作。


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


          How 如何使用

          軟件首先需要一個強大的模型,這個模型是關于動作是什么樣的——動作的名稱、動作所關聯的對象,以及如何返回歷史動作。


          決定哪些動作需要成為可取消的操作。如果動作可以改變一個文件或者數據庫——任何將是永久性存在的對象——都應該是可取消的動作。具體而言,在大部分應用里,人們期望能撤銷下面這些改變:

          • 文檔或表單的文字輸入

          • 數據庫

          • 圖片或畫布的修改

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

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

          • 對象的創建、刪除和重新組織,例如郵件消息或電子表單的列

          • 任何剪切、復制、粘貼操作


          下面這些修改基本上是不可撤銷的:

          • 文本或對象選擇

          • 窗口或頁面之間的導航

          • 鼠標光標和文本光標的定位

          • 滾動條的位置

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

          • 在一個未提交的對話框或模態對話框上的改動


          展現方式

          然后,決定以哪種方式把撤銷操作展現給用戶。大部分桌面應用程序會把“撤銷/重復”的菜單項放在“編輯”菜單下。撤銷通常也關聯到Ctrl+Z 或類似的快捷鍵。


          Example 案例

          案例一:Microsoft OneNote 筆記編輯器

          用戶需求:撤銷文字輸入

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

          undefined


          案例二:Photoshop 多級撤銷

          用戶需求:回到歷史操作記錄

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

          undefined


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

          用戶需求: 撤銷回到上幾步圖像處理結果

          使用美圖秀秀等圖片處理 App 對圖像進行美化操作時,常常會返回查看對比不同的效果,或者操作錯誤時返回到前幾步,頂部的撤銷按鈕可以讓用戶回到任何歷史操作步驟。

          undefined

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          為何深色模式看起來不自然?

          ui設計分享達人

          在過去的幾年中,深色模式一直是用戶最期待的一個功能。你可以自由切換你喜歡的模式來適應當前的場景,iOS和Android也都在2019年布局了系統級的深色模式,深色模式可獲得出色的視覺體驗,尤其是在弱光環境中……有助于你專注地開展工作,因為內容會較為顯眼,而顏色加深的控制項和窗口則會隱入背景之中。但真是這樣嗎,或者只是一種實際上弊大于利的操作? 


          文章內容:


          1、什么是深色模式

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

          3、為什么深色模式看起來不自然

          4、從設計角度看深色模式

          5、結論


          什么是深色模式?


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


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


                     

                    

           ibm 5151單色監視器


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


                                

          1973年的施樂Alto是最早使用輕型接口模式的計算機之一


          從可用性角度看深色模式


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


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



                      


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


                       

          擴大的瞳孔讓光線更多,但感覺到的銳度受到損害



          行業對深色模式追逐的群羊效應,也進一步加劇、放大了一個見解:深色模式對眼睛更友好更健康!


          但是,事實并非如此。對于一些有散光的人來說,在某種程度上深色模式對他們的眼睛來說更糟糕,深色模式比淺色模式更友好更健康的科學仍有待討論。斯坦?!ぐ轄査寡劭蒲芯克难劭茖<覍Υ吮硎荆骸拌b于文獻中的數據,我認為深色模式對眼睛沒有任何的友好和健康?!?nbsp;這種深色模式對眼睛疲勞和潛在的眼睛健康的影響時,使用時間可能比設備的亮度或亮度更重要。


          根據美國驗光協會的說法稱,大多數人的眼睛在某種程度上都患有散光,但通常不會引起注意。據美國眼科學院統計,每三個美國人中就一個存在散光的情況,1.5億美國人需要佩戴眼鏡來矯正視力;香港理工大學針對2700多人的臨床檢測發現,在21歲的30歲的香港人中,近40%以上患有100度以上散光。


          一起看下面的說明性圖像。即使你有完美的視覺,你也很可能在黑色背景上看到白色文字周圍的光暈。



                      

          淺色模式與深色模式


          如果增加文字并降低文字的大小,這種效果可能會更強:


                       


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


          當然,從實用性上講,深色模式也有它的好處,深色模式利用OLED屏幕在純黑的背景下不發光的特性,確實能有效的省電,讓你的電子設備續航上提升很大,這也是很多人一直在追求深色模式的一個重要原因,只要手機續航強比啥都重要!這也可能是蘋果公司決定在幾乎所有產品上線深色模式的一個原因。


          另外深色模式更有利于給用戶營造一種沉浸體驗,對于視覺娛樂應用尤為如此。當你想突出顯示特定類型的內容時,深色模式會特別有用。豆瓣、數字尾巴、網易云音樂是我常用的幾個軟件,它們都已經適配了深色模式。在這種模式下你的目光會更加注意到電影的海報、數碼產品和充滿活力的音樂專輯上。



                       

          豆瓣、數字尾巴、網易云音樂的深色模式


          為什么深色模式看起來不自然


          一是由于我們人腦的組織結構造成的,從多年來的多項科學研究和調查得出的結論是,從物種進化來看,人類99%的時間都是在白天中活動,人腦更傾向于在淺的背景上顯示深色的圖像。所以無論白天還是黑夜,淺色的背景都可以讓你更快地專注于顯示的元素,而深色的背景則使其難以辨別文字和視覺界面元素,從而影響你的閱讀效果并最終使你的眼睛疲勞。 其實從世界各地多個洞穴中發現的史前壁畫也能說明為什么我們傾向于喜歡淺色模式。



                      

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


          德國帕紹大學曾經做過一次測試。在該研究要求參與者閱讀屏幕上的正極性(白色背景上的黑色文本)或負極性(黑色背景上的白色文本)的文本。隨后,參與測試的人員會執行基本的校對任務,例如查找拼寫或語法錯誤。研究人員還測量了每種模式下參與者的閱讀速度。結果是所有參與者在正極性條件下的表現都會更好,他們檢查出更多的錯誤以及閱讀的速度更快。


                                 

          可讀性差異


          另一個學習發現正極性對于在顯示器上讀取小文本特別有利。人腦具有更快的可讀性,更喜歡在光線背景下顯示的深色文本和物體。


          二是由于含有大量藍光的光源會使我們眼睛不舒服,當我們談論屏幕對眼睛的潛在破壞性影響時,我們通常是在談論“藍光”,這是由短、高能量波長構成的光譜的一部分。研究發現藍光可能是導致眼睛疲勞的一個因素,但指出長時間不眨眼的干眼也是導致眼睛疲勞的一個更嚴重的原因,當然也有是因為字體太小,以及散光這樣的原因。


          當我們身處暗室或是在黃昏或夜晚時,眼睛會切換成不同的視覺模式;在弱光環境下,人眼會從對綠色敏感變成對高能量藍光敏感,這代表我們在大量的接收藍光,因此對刺眼強光的敏感度會增強。這類情形對駕駛人而言并不陌生,當他們被來車車頭燈的強光照射時,特別是使用現代化氙氣燈或LED頭燈的車輛,可能會暫時喪失視力。


                     

          平板電腦、智能手機和其他電子顯示屏,不僅改變了我們所接觸的光譜,也使我們的視覺行為發生轉變。我們必須意識到,我們現在用于“近距離”視物的時間比以往多得多,這通常是因為背景亮度太暗所致。


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


          從設計角度看深色模式


          在WWDC 2019大會上,蘋果宣布了iOS13的深色模式功能,在令人興奮之余,作為設計師和開發人員,我們應該考慮的該如何去實現它。蘋果和安卓已經發布了為應用程序設計深色模式的設計指南。當然,沒有硬性規定要求遵循他們提供的設計指南,這些只是指導原則。


                       

          由于Material Design設計語言的原因,投影的占比是非常大的。在淺色模式下還好,但這不太適用于深色模式,因為深色背景上的黑色陰影在視覺上不容易察覺,為此安卓還提供了在深色模式下不同層級的卡片與投影上的參考。


                      

          根據設計文檔來看,iOS背景為純黑色,色值為#000000,Google 則更喜歡深灰色,色值為#121212。


                      

          通過提供的設計指南,我們可以輕易上手來設計和開發我們的軟件,但要注意的是深色模式并不是簡單的與淺色模式顏色對調,必須為所有的元素進行單獨配色。


                      

          淺色模式下的白色不會在深色模式下轉換成純黑色


          這樣也就能理解為什么很多軟件并沒有全部去適配新的深色模式,一方面使用場景決定的,另一方面就是深色模式并不是簡單地換個換個顏色就行,很多元素需要重新設計和開發。


          結論:該選擇哪種模式


          在去年的 WWDC 大會上,蘋果人機交互團隊的設計師曾對 macOS 的深色模式使用場景做了進一步的解釋。

          他指出,只有閱讀瀏覽或是內容創作型 App 才需要長期啟用深色模式,比如文字或代碼編輯。它們會借助黑底白字的高對比度特性來讓用戶視線保持集中,其它大部分軟件對于深色模式的需求反而并不強烈。


          或則你可以通過使用場景去選擇,在明亮的環境中使用淺色模式,在昏暗的環境中使用深色模式。



                      

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

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          延遲增強——視頻信息流廣告的提轉秘訣

          ui設計分享達人

          伴隨短視頻平臺的崛起,移動互聯網的主流內容消費形態向短視頻視聽語言轉變,視頻信息流廣告的時代已經來臨。如何通過設計提升轉化,是視頻信息流廣告所面臨的挑戰。


          為了提升廣告轉化效果,我們結合實際項目,通過大量的實驗與思考,梳理并總結了一套適用于視頻信息流廣告的轉化組件呈現原則,我們將其命名為“延遲增強”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場景。


          ///

          延遲增強是什么?


          視頻信息流廣告有三要素:內容、框架、轉化組件。其中廣告內容來源于廣告主投放的物料,基礎框架需對齊宿主保持一致性,所以僅有承載轉化信息和行為的轉化組件,是可設計部分。 


          “延遲增強”就是針對“轉化組件”的一種伴隨視頻內容分階段/漸進式的呈現方式。它由消費者決策時的理想心理動線,結合廣告行為推導得出,并經過實驗驗證了其對于轉化提升的有效性。


          “延遲增強”包括兩個階段:1.廣告展現初始階段,延遲展現廣告意圖,通過內容吸引潛在用戶;2.廣告內容逐步呈現階段,轉化組件漸進式增強,輔以增益信息,不斷強化,引導轉化行為。


          它指導了轉化組件從“呈現”到“增強”的全流程,從時機(出現&增強時機)/引導(動效&互動引導)/前置(信息&轉化前置)三個部分,幫助提升廣告轉化效果。



          ///

          時機-延遲增強如何呈現?


          轉化組件的呈現時機包含“何時展現”與“何時增強”兩個部分,前者幫助增加廣告接收率,后者提升廣告轉化率。


          01/ 出現時機:

          延遲展現廣告意圖,可以提升廣告賣點的展現機率


          互聯網的快速發展使得受眾被動卷入爆炸式增長的資訊信息體中,廣告借助這一媒介迅速發展,但也因為部分商業廣告的過度宣傳與其降低用戶信息獲取便捷性的本質,不可避免的使受眾產生了心理上的逆反與抵觸情緒,從源頭拒絕了廣告信息。

           

          所以對廣告來說,在廣告展現初始,延遲展現廣告意圖,融入內容,可以緩解受眾的抵觸情緒,提升廣告賣點的展現機率。



          02/ 增強時機:

          通過用戶行為和視頻特征動態決定增強時機,可以有效提升轉化


          對廣告來說,搭配廣告內容進行增強,通過內容積累購買欲/信任感,然后通過階段性的增強來提示操作,對比一成不變能起到更好的轉化效果。


          我們首先嘗試了程序化的增強時機,在不增加技術成本的前提下,根據歷史經驗,面向不同的廣告均采用固定時段的階段性增強。


          但不同的廣告物料內容不同,不同的用戶偏好也不同,固定的增強時機并不能很好的滿足所有廣告需求。所以在技術能力可以承載的時候,我們采用了動態時機策略,通過用戶行為和視頻特征動態決定增強時機,在程序化增強時機之后,再次實現了轉化提升


          undefined


          ///

          引導-延遲增強如何引導轉化行為?


          轉化組件如何引導轉化,則可分為基礎的視覺引導與進階的互動引導,前者幫助搶奪視覺注意力,后者則能夠在互動體驗中植入部分幫助決策的“小心思”。

           

          01/ 視覺引導:

          適當增加視覺吸引點,可以有效引導點擊

           

          延遲增強需要通過階段性的增強來提示操作,而如何增強能有效吸引注意則需要琢磨,已有實驗表明轉化按鈕增加掃光動效與智能取色,能有效吸引注意,引導點擊,對轉化提升有良好效果。



          02/ 互動引導:

          讓用戶主動選擇,可以增加廣告曝光,輔助轉化決策

           

          互聯網產品設計對于用戶交互體驗的追求越發極致,如影視行業走向可交互網劇,本質上是從用戶接收轉變為用戶主動參與,用戶本身對于獲得優質體驗的意識逐漸覺醒。商業化產品也需要緊跟“體驗”與“互動”,將廣告變為互動體驗或具備使用價值的信息,讓用戶從被動瀏覽到主動參與,掌握對廣告的選擇權

           

          以互動投票為例,我們通過用戶與用戶之間的觀點表達,以投票選擇的形式誘發群體性選擇,引起好奇心與同儕壓力。

           

          若用戶選擇符合群體選擇,則帶來群體性背書,增強信任感;若用戶選擇不符合群體選擇,基于從眾心理,用戶極有可能對群體選擇產生好奇,從而瀏覽兩種選項的內容,有效的增加了品牌曝光。


          undefined


          ///

          前置-延遲增強如何幫助轉化達成?

           

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


          01/ 信息前置:

          增加增益信息或前置落地頁信息,可以輔助轉化決策


          購買/轉化一定是需要足夠的信息積累信任感才能達成的,在前卡適當的增加賣點信息能夠更好的幫助用戶決策。針對下載類廣告可增加評分與星級,二電類廣告可以增加價格信息,甚至可以前置優惠劵、圖片banner等信息,均能實現轉化的正向提升。


          undefined


          02/ 轉化前置:

          縮短轉化路徑,可以幫助轉化行為更便捷的達成


          在信任感積累與階段性的增強都達成的時候,在當前轉化對比跳轉落地頁再進行轉化,鏈路更短,用戶流失概率更小。比起實驗嘗試,更像是延遲增強的基礎能力配置。


          首先,我們針對表單/咨詢/電話/安卓下載都進行了轉化前置,具有用戶明確意向的按鈕點擊會直接在當前進行反饋。



          除了直接將操作前置外,針對不同細分場景的需求,還可以通過交互形態的優化在感官上縮短路徑

           

          這里以百度的視頻MAX廣告為例,我們針對重落地頁的商家,將MAX首屏(視頻頁)與H5落地頁的關系變拼接結構為雙層結構,通過浮層面板承載落地頁,延時自動彈出,強引導下方內容,激發用戶上滑瀏覽興趣,解決了落地頁隱藏較深,轉化鏈路過長的問題,同時增加了落地頁曝光從而提升轉化。



          ///
          結語


          在視頻信息流領域中,延遲增強仍然可以繼續深挖,作為“基礎建設”承載未來更多細分場景下的互動化、個性化的“精神需求”。

           

          同時延遲增強設計方法也可以橫向復用于廣告前卡、落地頁、IM工具等各種需要在合適時機抓取用戶注意的場景中,去追求點擊或者轉化的提升。甚至在未來可以嘗試其在長視頻或圖文場景中的應用。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          市場與用戶研究基礎

          ui設計分享達人

          前言:互聯網產品都是以用戶為中心,為用戶服務,那么市場與用戶研究對工作的重要性自然不言而喻。這是一項市場與用戶研究的欄目,總計大概十個篇幅。本欄目將會對工作中市場與用戶研究做一系列的整理與復盤,希望可以拋磚引玉,帶給大家在市場分析與用戶研究中一些經驗。



          一、WHAT/什么是用研?


          更準確的定義是:市場與用戶研究。


          市場研究:是指為實現市場信息目的而進行研究的過程,包括將相應問題所需的信息具體化、設計信息收集的方法、管理并實施數據收集過程、分析研究結果、得出結論并確定其含義等。


          —— 著重于產品的市場營銷


          用戶研究:是用戶中心的設計流程中的第一步。它是一種理解用戶,將它們的目標、需求與企業的商業宗旨相匹配的理想方法。用戶研究的首要目的是幫助企業定義產品的目標用戶群、明確、細化產品概念,并通過對用戶的任務操作特性、知覺特性、認知心理特性的研究,使用戶的實際需求成為產品設計的導向,使產品更符合用戶的習慣、經驗和期待。


          —— 著重于產品設計體驗優化


          二、WHY/為什么要做用戶研究?


          理解用戶行為數據產生的原因


          用戶為什么來?為什么不來?

          用戶為什么留存?為什么流失?

          用戶為什么付費?為什么不花錢?

          用戶為什么喜歡A活動不喜歡B活動?



          新的開發功能、新的界面風格、新的運營活動、新的品牌賣點更加貼合用戶


          這個真的是用戶想要的嗎?

          這個風格是我們的目標用戶喜歡的嗎?

          目標用戶愿意參與我們的運營活動嗎?

          我們與競品的差異化是什么?



          產品的想法與用戶的行為習慣與心理訴求


          這個功能真的是用戶需要的嗎?

          這個功能真的符合用戶的行為路徑嗎?

          ......



          三、WHEN/什么時候做用戶研究?

          我們可以聽到:


          “用戶流失,我要做個用戶研究,看看到底是為什么?”

          “用戶不付費,我要做個用戶研究,我要找到原因?!?

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


          但是事實上,我們應該

          以科學的方法貫穿整個產品生命周期做用戶研究。

              

          1、在產品概念期,我們需要把握市場機會的判斷、挖掘用戶需求、做好產品概念的設計,那么在這個階段,我們通過用戶研究做好市場細分研究,估算市場價值。并且預測市場的規模,估算產品的競爭潛力。同時做好競品的分析與研究,決定自己產品的定位與賣點。挖掘用戶需求,找到用戶痛點、爽點、癢點。做好產品概念測試,分析是否滿足用戶的需求,解決用戶的痛點,找到用戶的爽點,把握用戶的癢點。


          2、在產品設計開發期,在這個產品時期,我們需要進一步的把握目標用戶的定位,設計產品的核心功能,做好用戶付費策略的設計。那么在這個階段,我們通過用戶研究做美術風格的測試、核心功能的測試甚至產品名稱測試,看產品在該市場的定位研究、以及進行商業化研究,幫助產品研究用戶付費策略。


          3、在產品的宣傳推廣期,在這個時期,為了更好的實現產品商業化,我們需要制定產品競爭的策略,幫助產品在市場中獲得更好的變現。同時幫助市場營銷部門制定傳播策略,提煉產品的核心賣點。在這個階段,我們通過用戶研究幫助市場部門以及運營部門測試宣傳素材、評估宣傳效果、研究用戶的觸媒習慣以及測試用戶U&A研究(使用與態度研究),提升市場營銷品質。


          4、在產品進入平穩發展期,在這個時期,我們需要進行持續競爭的策略制定,需要做好產品生命周期的管理,同時也要隔一段時間做品牌營銷刷新。以便于更快,更好,更貼合市場。在這個階段,用戶研究需要做市場推廣效果評估、版本迭代的監測研究、用戶滿意度的調查研究,并且需要做好流失用戶研究,找到用戶流失的點,做好改進。同時也要做好競品研究,監測市場的變化。也需要做好品牌定位研究研究、用戶訴求的研究以及用戶情感研究,幫助產品做好迭代與更新。


          5、 最后在產品衰退期,用戶研究需要做再定位策略或者做好退出的計劃。那么我們需要通過用戶研究做好整體市場趨勢研究、競品研究、新機會的探測性調查,提供數據,幫助公司決策接下來的發展,是引流導入到二代產品?亦或是做好迎接新產品的準備?


          四、WHERE/到哪里去做用研


          我們可以采取線下以及線上兩種方式相結合:

          • 線下

          在街頭進行街頭訪談、或者去用戶家里進行面談或者調查紙質調查問卷的形式、到公司里進行入戶訪問以及在專門的訪談室進行座談會等等。

          • 線上

          可選方式更多,可以在qq群、論壇以及貼吧等平臺發送調查問卷,或者在微信中直接進行語音或者視頻等方式。也可以在產品內發放調查表,或者發放調查表到用戶的電子郵箱等等。


          五、WHO/誰來做用戶研究? 對誰做用戶研究?


          誰來做用戶研究呢?

          一般來說,大企業有自己的用戶研究團隊,中小型企業可以外包給專業的用戶研究公司,也可以進行內部設崗。

                

          用戶研究的對象是哪些人?

          在不同的產品階段、面對不同的問題、對應不同的目的,找到不同的人群。


          1、在產品概念期,用戶研究對象是通過各種維度定義出來的目標用戶以及競品用戶。


          2、在設計開發期,用戶研究對象是圍繞產品或者研究目的找到核心用戶、次核心用戶以及外圍用戶。


          3、在宣傳推廣期,用戶研究對象是把握住新進用戶。


          4、在平穩發展期,用戶研究對象是產品的留存用戶、活躍用戶以及流失用戶和回流用戶。


          5、在產品衰退期,根據策略決定需要調研的用戶群體。



          六、怎樣做用研(How)


          用戶研究是為目的服務。


          把握住問題六要素,是用戶研究的核心。

          (1)問題癥狀?

             ? 在決策問題時遇到什么困惑,有哪些癥狀?

          (2)用研目的?

             ? 希望用研達成什么目的?

          (3)決策處境?

             ? 現階段能支配怎樣的資源?何時采取措施?

          (4)問題假設?

             ? 預計會是什么原因引起問題?結果可能會有哪些?

          (5)行動方案?

             ? 可能采取的行動方案有哪些?

          (6)效果預期?

             ? 行動方案下希望產生或者可能達到怎樣的效果?


          常用的市場與用戶研究方法:




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          深度解析|流量時代私域H5營銷設計的流量密碼

          ui設計分享達人









          一、由銷售演變成運營


          在我看來,當今互聯網行業的經營實際上與傳統行業的銷售并無區別,我們可以從以下兩個行業的業務結構圖看出,互聯網行業的經營實際上是從傳統行業的銷售模式轉變而來。



          1.1 傳統行業的銷售

          按照傳統行業的業務結構可分為“采購、生產、加工、銷售、財務”四個環節。一提起銷售大家肯定都不陌生,指的是企業生產的產品通過銷售人員的銷售手段,將企業的產品賣出來兌換成貨幣,流入企業的財務。



          1.2 互聯網行業的運營

          在互聯網行業中業務結構還可分為“采購、PM/開發、運營、財務”。就流程而言,互聯網行業的經營實際上存在著傳統銷售的影子,在將企業的產品(成品)轉化為財務的這一環節之前,需要經歷銷售或運營這兩個環節。


          不像傳統企業銷售,運營不直接負責賣,更多地是負責推廣。不直接負責銷售,更多的是負責推廣。換言之,互聯網企業的產品并不直接兌換成貨幣,而是通過“引流、活動、轉化、流失”等一系列運營操作,提升用戶體驗,將產品好服務賣給用戶。


          ·引導用戶使用產品:我們可以將傳統銷售中的初次拜訪客戶當作運營中的引流;

          ·保持用戶黏性:把傳統銷售中的維護客戶關系當作運營中做的活動和轉化;

          ·用戶流失管理:將傳統銷售中挽回客戶這個動作當作運營中用戶流失這個動作。

          因此,互聯網行業更加重視運營而不是銷售。






          二、運營設計的核心目標


          在簡單了解了互聯網的運營之后,我們再談一談最新出現的一個新詞“運營設計”。



          2.1 運營設計并不是運營

          運營設計在我看來是一個相對模糊的詞匯,我能清楚地講明白什么是品牌設計、界面設計、工業設計、平面設計、產品設計,但總覺得說不明白什么是運營設計。


          比如說品牌設計是品牌,界面設計設計的是界面,而運營設計不是運營設計,好像運營設計無法用一個專業的方向來描述。


          但在國內的互聯網市場中,產品的運營又是一件必不可少的事情,從企業盈利的角度來看運營設計的地位不亞于UI設計和產品設計。在我看來運營設計是介于“運營”與“設計”之間的一個崗位。


          ·菜鳥運營設計師:多是幫助運營經理完成運營活動的投放物料,按時上線。

          ·老鳥運營設計師:通過較為多樣的手段(合理的規劃)和技能(設計感覺形式)更好地實現“用戶獲取&用戶付費”等目的,并且在這個過程中可以“更好實現已有用戶的維系”。



          2.2 增長設計(海盜模型)

          實際上,運營設計也被稱為增長設計,一提到增長,我的第一反應就是《增長黑客》中的海盜模型,也就是AAARR模型。


          AARRR(海盜模型)是《增長黑客》中最為重要的理論——用戶生命周期的模型,因為這個模型和運營設計有許多相似之處,也有人將其作為業務流程的模型。運營的流程需要經歷:先拉新,再促活,接著提高留存,然后獲取收入,最后實現自我傳播這5個環節,可以和模型中的概念一一對應上。


          *對于海盜模型的知識點,我在這篇文章《一文讀懂|數據好體驗就好嗎?—數據認知篇》里面講過,這里我就不做過多地贅述了。


          對用戶生命周期AAARR模型的理解是一方面,最重要是要學會用模型中的關鍵數據指標去衡量活動,畢竟我們做運營設計的最重要的是以最低的設計成本來獲得最大的運營收益。模型只是一種工具,對于不清楚怎么使用模型的同學,我建議看看我寫的《史上最全|數據體驗好就好嗎?—體驗度量篇》



          2.3 以運營目標推導運營形式

          運營經理的運營手段可謂是百花齊放,變化莫測,這里我們不展開討論。一般運營活動屬于推廣這個動作,在推廣的這個環節里面不會特指某一個目標,而是包含多個目標,所以對于運營設計師而言目標不能是一個,而應該多個。常規的以產品運營為核心提出來運營目標大致是“拉新、促活、回流、營收”等這四種。


          如果把運營的目標需求轉換成我們設計師的目標需求的話,逃不出我們常見的“用戶增長、品牌傳達、營銷策略、商品成交量”這四個范疇。


          把運營側的目標轉換為產品是為了幫設計更準確理解運營經理的需求,以目標確定活動類型、以類型快速定位適合的風格,提高運營活動質量,促進用戶轉化,如圖


          ·基于用戶的活動運營:如果是以用戶為目標的活動,設計應該偏向于符合用戶屬性的風格,比如我們的用戶都是年輕的用戶,那在頁面的設計上就應該多有“年輕化、博人眼球的、好玩有趣”等元素的呈現。


          ·基于營收的活動運營:如果是以營收為目標的活動,設計應該偏向活動場景對于入口的設計優化,比如Banner、落地頁等物料設計。通過優化入口,提高轉化率,完成產品體驗的優化的目標。


          ·基于品牌的活動運營:如果是以品牌宣傳為目標的活動,設計應該偏向企業品牌形象的樹立以及傳播,把產品的特色傳遞給用戶,與其他競品拉開差距,提升自己產品的核心競爭力。





          三、私域的精細化運營

          與運營有關的“私域”這倆詞,最近火得不行,哪里都可以見到。為什么互聯網企業這么重視私域的運營呢?主要是因為在互聯網時代,大家都認同有了私域流量就相當于有了盈利這個觀點。


          3.1 什么是公域運營

          首先我要簡單地描述一下什么叫流量,流量的本質就是指用戶,但是“用戶”這個詞過于抽象了,常常都用閱讀量,粉絲量,點贊量,播放量等這些數據維度去衡量流量的體積。


          打個不恰當的比喻,流量就像是一條河,如果無人管理的話,那就叫公域交通。您在河邊挖一條水溝,將河水引到自己事先制作好的蓄水池里面,這個蓄水池里面的河水就叫做私域流量。


          3.2 什么是私域流量

          如上例所說,我們將能夠自主運營的流量或用戶(蓄水池),可以反復觸達、“騷擾”、交流,獲取反饋的流量統稱為私域流量。典型的產品形態有微商、拼團群、朋友圈、微信公眾號。私域流量相對于公域流量來說,是一種更精準,更容易被轉化的流量。


          簡單的理解就是可以為所欲為的流量,比如我在我自己的微信公眾號里面可以隨意地刪減用戶的評論,典型產品形態有微信公眾號、微商、拼團群、朋友圈等。


          如今許多互聯網產品都是私域流量與公域相結合的產品,比如說大家經常使用的站酷這個平臺,如果我發布的作品沒有上首頁的推薦,只會在我的個人主頁展示,獲得的粉絲就屬于私域流量;反之我的作品獲得了首頁推薦,在站酷首頁展示,獲得粉絲增長量就屬于公域流量。


          許多企業老板都明白這樣一個道理“用戶在哪里,私域流量就在哪里,生意就在哪里,企業的盈利就在哪里。”因此,企業老板們都希望把公域流量吸引到自己產品的中,成為私域流量,這樣企業的流量即相對公域流量而言更加可控、高效、精準,后期盈利也有保障。



          3.3 精細化的運營模式

          正是因為許多企業開始注意到私域流量的重要性,互聯網從之前的流量粗放運營模式,逐漸變成用戶精細化運營模式,這是流量思維到用戶思維的轉變。精細化運營簡單理解就是基于龐大的數據分析,讓企業的產品為不同的用戶推送不同的運營內容(或者是用戶感興趣的內容)。


          提出“精細化運營”這一個概念行業里面最早最有名氣的應當是號稱一分鐘出8000張Banner的鹿班平臺,鹿班平臺最大的意義不在于取代設計師這一個崗位,而是阿里巴巴在精細化運營的第一次嘗試,為不同的用戶推送自己所需要的商品內容。當然了,除了鹿班平臺京東集團也有羚瓏營銷內容創意平臺,有興趣的同學可以查看一下。


          在精細化運營中還有一個很專業的名詞叫“千人千面營銷策略”,這個營銷策略的概念是指每一個用戶看到的每一個內容都是不一樣的,仔細想想這是人力所不能及,只有AI的大數據才能做到的,例如用戶A的收藏夾是襯衫品類比較多,那淘寶Feed流推送的商品襯衫比重會多一些,用戶B的購物車首飾品類比較多,那產品中推送的內容珠寶首飾占多數;用戶C喜歡電子產品,那么產品推送的將會是電子類產品比較多。





          四、了解運營設計師的工作內容

          在公司里,產品體驗設計師(又被稱為界面設計師、UI設計師)在公司中扮演著美化產品的角色,隨著互聯網行業的業務擴張、人才涌入后會把UI設計師這一角色進行更加精細化的分類,在互聯網企業中會把設計師按照工作內容進行兩種類型的分類,分別是產品體驗設計師和運營視覺設計師。



          4.1 產品體驗設計師

          工作職責:產品體驗設計師的工作職責,主要以提升產品功能體驗為主。在分析產品邏輯和交互邏輯后,從視覺層面把控產品界面設計,并通過視覺設計高效傳達有效的信息,并制造出愉悅的用戶體驗。

          設計工具:Figma、Sketch、Axure、問卷工具等。



          4.2 運營視覺設計師

          工作職責:運營設計工作職責是在短期內達成提升相關運營活動的指標。他們以運營活動設計為主,運用視覺語言吸引用戶參加對應的活動,加深用戶對產品的印象,從而促使用戶參與活動,完成活動中完成引流、成交、復購、傳播等行為。

          設計工具:PS、AI、AE、C4D等。



          4.3 運營設計師需要具備的能力

          運營設計師的主要工作內容就是協助企業中的運營經理做好產品的用戶運營、內容運營、產品運營和活動運營。運營設計師應該參與到運營活動的策劃中去,幫助運營經理想一些更有趣更好的設計策略,并且在這個過程中更好地提高自己的運營策略、數據分析、文案能力和視覺表現能力。


          4.4 運營設計的工作范疇

          運營設計師這個一個崗位更多的是內容驅動型(音樂、視頻、教育應用等)、交易驅動型(電商、o2O服務等)產品中。它的工作范疇是一個很繁雜的事情,不僅需求數量大而且頻率高,最繁雜的一點是需求種類比較多,比如有廣告位Banner、專題頁面設計 、活動專題、Icno圖標等內容,并且需要批量處理的各種資源入口圖,線下活動的海報、印刷物料等等。










          如今運營活動可謂鋪天蓋地,手機端也能經常見到各大企業產品的優惠活動設計,比如活動圖,落地頁,優惠券,戰略樓層等設計。國內的運營設計推廣形式多以落地頁(H5)的形式幫助企業做推廣企業產品或者樹立企業形象的活動。


          由于,這類狂轟濫炸式的運營活動,讓用戶倍感無味,致使運營活動流量不高,設計師在實際的工作中往往會遇到以下三類問題,導致我們的運營活動流量不高,達不到預期的運營目的,如圖





          一、用形式解決內容過長問題

          近些年在市面上落地頁的推廣形式多以長頁面為主,比如電商的推薦頁、商品的宣傳頁。由于企業想要表達的內容過多,使落地頁的長度越來越長,這種形式雖然可以更全面地介紹商品優勢,但是在快節奏的互聯網市場,用戶自然會覺得很臃腫。


          針對落地頁內容過長,視覺呈現不佳的問題,我們最快能想到的辦法就是刪減字段,但是如果運營經理不同意刪減字段那怎么辦?因此,刪減這是一個辦法,但不是最好的辦法。


          既然不能刪減,我們不妨換個思路來解決這個問題。剛剛談到內容過長導致用戶感覺臃腫,感覺臃腫的核心所在是“內容”對用戶沒意義,按著這思路延展下去解決問題的關鍵在于“突出重點”,這里我提供四個方法幫助大家解決困擾。



          1.1 優化頭圖的尺寸

          許多設計設計師由于沒有考慮清楚手機到最終的預覽效果,導致很多重要的元素出現在低活躍的區域 ,用戶第一眼看不到能吸引自己的內容,從而失去往下滑動了解更多內容的動作,造成運營推廣的效果大打折扣。


          因此在設計這種長圖時要事先考慮好首屏要呈現什么內容,一般的運營頭部高度一般定在600px-750px左右,如果是內容較多的話,我建議把頭圖的高度控制在460左右,這樣可以促使用戶在首屏看到更多的信息,引導用戶有興趣向下滑動,用戶的點擊率也隨之上升。


          1.2 手機海報的表現形式

          除了縮減頭圖的高度之外,實際上利用海報宣傳的方式進行設計也是可以的。在朋友圈或其他社交平臺上經常看到這種帶有二維碼的宣傳海報,用戶通過掃碼直接進入運營活動中心。


          這類海報形式有著短小精悍,言簡意賅、便于傳播的優點,是一種提高運營活動流量很好的表現形式。



          1.3 九宮格拼圖的表現形式

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



          1.4 閃屏的表現形式

          閃屏這種表現形式雖然點擊率并不高,但是一種很好蹭熱度的方法。對閃屏的設計,設計師只需要思考好用什么呈現表現形式為閃屏物料注入新的活力,例如用下面這種只突出主體物和標題的表現形式,把內容更加精簡、準確地傳遞給用戶,這種表現形式就很好。





          二、了解興趣低的原因

          在第二部分里,我想分為4個模塊——了解興趣低的原因、用形式提高用戶興趣、讓標題文案更加突出、用獵奇心理引起用戶興趣,來談一談我對“用戶興趣”的理解。


          2.1 解決用戶興趣的方法

          早期的互聯網產品以工具為主,例如百度就是用來搜索的、QQ就是用來聊天的、淘寶就是用來買東西的,這些產品呈現的感覺都以簡潔清晰為主,但隨之互聯網越來越普及,娛樂產品出現與工具類產品越來越多的差異性趨勢發展,尤其對于運營設計,簡潔清晰變得沒那么重要,個性、趣味才是占據主導。想要運營設計做得讓用戶有興趣,不妨試一試我下面所說的四個技巧。



          2.2 為什么要“動”會引起用戶興趣

          以圖片+內容的這種展現形式在市場出現很久了,對用戶的吸引度不免有減弱的趨勢,在這一階段我們需要尋找一種更加有趣的形式來吸引用戶。


          興趣可以用更為科學的方法“注目度”來解釋,當我們眼睛在看到某一個事物的時候,大腦會根據事物的形態給一個由“強”到“弱”的排序,去支配眼睛去觀察事物,如下圖所示,我們可以直觀地看到“動畫”這個類目是排在前面的。大部分用戶在看到運營活動內容的精神狀態(注目度)是分散的,所以要搶占用戶的時間,設計用戶第一眼的吸引力。




          三、用形式提高用戶興趣


          3.1 加入更多的動效

          根據上面的結論,在提高用戶興趣這個問題上,我們完全可以增加展示效果的動效來做到,很多產品也是這樣做的。


          比如今年拼多多的Banner上,做了一些標題旋轉、優惠券飛出的動畫效果:

            


          像京東購物節中做一些開場的動畫效果:

            



          在活動流程上面的動效,比如在一些抽獎環節模擬真實物體的運動軌跡:

            




          在圖標或者標簽上面加一些位移、漸隱漸顯的動畫效果:

            


          在一些彈窗上面加上一圈光效,也是一個不錯的選擇:

            


          如今在運營活動上加入更多的動效是設計師必備技能之一,最常規的就是把畫面中的某一個元素變大,像是下面的按鈕,采用放大縮小的動效。

            


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

            


          元素圍繞主題物周邊沿著運動軌跡活動。

            


          關于動效的案例,這里我就不一一舉例說明了,大家可以登錄螞蟻設計服務平臺 - 犸良這個平臺獲取靈感。



          2.2 以靜制動

          對于不會動效軟件的同學也沒有關系,也可以著重對畫面的張力進行設計,以靜至動,以下我就分享幾個以靜至動的方法。


          ·元素之間的動勢:合理的運營元素之間的組合關系可以營造出有動的感覺,如果單單放一個開飛機的場景可能并沒有感覺在飛,但如果加上飛翔的紅包、模糊的背景,那就感覺真的在開飛機。


          ·有力的指引力:如果單單地放一張優惠券,不會產生吸引人的觀感,但設計四只手從四個方向爭搶的畫面,就會感覺畫面有力量有爭搶的感覺。


          ·以破形產生動感:畫面中從左側設計一張卡片,遠處門的入口塑造的,大膽地破形處理,很容易營造出一種動態感覺。


          ·夸張的構圖設計:當然了不同的視角和構圖也可以讓畫面感覺生動,如下面這樣的構圖就會給用戶營造出一種畫面外還有畫面的感覺。


          ·營造運動畫面感:下面這套海報采用硬朗的直線和運營動作的完美結合,通過營造強烈的運動感給用戶傳達動的感覺。



          2.3 視頻推廣的形式

          由于短視頻領域的興起,朋友圈中轉發視頻的用戶也日益增加,如果設計師可以給運營經理在以視頻形式進行運營活動的推廣的需求上出謀劃策的話,也是一個很專業的設計師了。





          四、讓標題文案更加突出


          造成用戶不感興趣的原因還有可能是信息傳遞效率不高,用戶無法通過標題知道這是什么活動,怎么可能引起用戶的興趣而點擊?

          標題的文案可謂是用戶判斷信息的首要思想要素,他能迅速讓用戶了解活動主題,傳達活動興趣點,激發用戶參與。


          4.1 選擇識別度高的字體

          設計師是一個創造美的職業,但是也要有取舍,在我看來漂亮固然重要但高效的信息傳遞更為重要,尤其是在運營活動的標題設計上應該盡量選擇一些識別度高的字體,先讓用戶清楚地知道該活動是干什么的,再用特殊的技法去吸引用戶點擊。


          在標題字體上我比較推薦使用無襯線字體,因為黑體去掉過多的襯線裝飾,是橫平豎直,筆畫粗細均衡,使字更為精練并且醒目。例如下面這張效果圖,都是在黑體的字體基礎上做的設計,光看標題就可以清楚活動大致是個什么類型的了。



          4.2 給字體加點效果

          如果覺得以上的方法并不能給用戶起到視覺沖擊力的效果,不妨給標題的字體加一點效果圖,比如立體效果、加裝飾物、更改字體結構等等,如圖

          我推薦一個我自己作圖的習慣,就是先做標題文案的樣式設計,再做配圖元素的設計,我覺得這個方法既可以突出標題文案字體設計又很高效。博大精深,有機會后期會寫一篇字體設計的文章,敬請期待吧。





          五、用獵奇心理引起用戶興趣


          以下內容不算是設計技法的內容了,算是運營思維方面的小竅門,我認為身為運營設計師,還是有必要知道的。



          5.1 倒計時營造緊張感

          如果在手機海報的表現形式上,加入以下這種“倒計時”主題,有助于激發起用戶期待感和代入感,起到事半功倍的效果。


          5.2 明星的效應

          如果活動中有明星素材可以使用,千萬不要放過這個機會,因為明星自帶流量和話題,也是吸引用戶興趣,提高流量的好辦法。


          5.3 節日的熱點

          一年中有很多節日或者節氣的時間節點,這些時間節點自帶吸睛功能,可以把他們當成借勢營銷的主題,有的放矢地制作活動宣傳圖,增加曝光度,保證營銷的新鮮度。


          接下來,讓我們談一談第三個問題——用戶審美疲勞。









          隨著市場上充斥大量運營活動,對用戶來說不免會造成審美疲勞,而用戶出現審美疲勞的情況也是造成運營數據下降一個重要的因素。



          一、了解什么叫審美疲勞


          1.1 審美疲勞的概念

          所謂審美疲勞,源于一個經典的心理學概念——刺激適應(Sensory Adaptation),就是用戶長時間接觸一種類型或者表現形式的事物而產生的厭倦、麻木的心理,最終都會被“適應”(即令人無感覺)。


          這里我列一個例子,比如每天打你一棍子,你當然很不爽。但是連續打你一年后,你并不會感覺到不爽了,因為它變成了你生活的一部分,你已經沒有感覺了——這就是刺激適應。


          1.2 為什么會出現審美疲勞

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


          內容上眼花繚亂:是指一方面市場的運營活動太多,另一方面是活動內容讓用戶提不起興趣,久而久之自然就會產生審美疲勞的心理。


          時間上的心生厭倦:這是人正常的心理狀態,當人從外部獲得了幸福感(升值、金錢、美食)多會隨著時間的推移最終回到基礎水平。

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



          二、審美疲勞的解決方法

          對于內容讓用戶提不起興趣這一點,我在前一章我已經闡述了自己的觀點,這里不做過多贅述了。但是我們可以就“時間上的心生厭倦”這一問題出發,來討論設計方面的解決方法。


          在我看來設計側的解決方法其實就一個詞——新穎,我總結設計師可以從以下5個方面著手進行設計方案的確立——夸張視角、細致刻畫、多種風格、故事性、游戲化。



          2.1 設計一些新奇的視角

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


          或者以微觀視角看世界的視角去做設計稿,比如說OPPO的運營圖設計,正常視角中人永遠都是比手表大的,但如果反過來去觀察,就好比自己像是一個小微生物去觀察這個視覺,會給用戶一種很新奇的感覺。



          2.2 把刻畫發揮到極致

          形、色、質、構是搭建一個畫面的基礎,其中質感是拉開差距的關鍵,它是細微的,往往有質感的視覺感受會給用戶一種高級的感覺,吸引用戶點擊或者是向下滑動瀏覽更多的內容。身為設計應該更專注于自己觀察方法和技法的提升,一個圖層達不到想要的效果,那兩個圖層呢?那把其中一個圖層的圖層樣式調整成“正片疊底”呢?


          質感雖然是一個相對抽象的詞,但是做出質感并沒有想象中的那么難,最重要的就是有耐心多做一些層次,如下圖,不管是以文字或者圖像為主形象的效果,都是因為考慮了字體變形、字體結構、投影、高光、色塊對比等細節,才會讓整體的效果給人一種很有質感的感覺。


          *設計技法的提升是一個很漫長的過程,比較注重于直覺和感性的認知能力的培養,要多觀察、多嘗試,要相信自己總會有成功的那一天的。



          如果你會3D類型的軟件那就太好了,因為3D類型的工具最終呈現的畫面本身就帶有空間關系并且由于可以渲染不同種類質感的材質,畫面天生帶有一種質感,比如下面這兩張圖如果單單地鋪上一個大色塊點綴一些圖形元素和3D類型的作品對比來看,質感還是差一截子。左側是質感相對較弱的落地頁,右側是質感較好的落地頁,如果你是用戶的話,你會點擊哪個?又會向下劃動查看哪個呢?


          并且現在的移動端設備的性能都有提升,并且5g的技術也在市場中出現,以前的3D場景加載卡頓的問題也逐漸在消失,我們不妨事先在運營活動中多加入一些3D的效果,來博取用戶眼球。


          就目前來看視覺觀感偏向越來越立體化,而不是簡單的平視扁平效果,以下這種成系列的設計稿,是深受用戶所喜歡的,并且成系列的設計稿,也很容易讓用戶產生記憶點,是一個我非常推薦的做法。



          2.3 多種風格的探索

          為什么要做多種風格的運營設計呢?從設計美學的角度上來講,用戶的審美性質在發生變化,由過去“專注式”的審美在強大的信息流影響下變成娛樂式的“快餐式”審美,所以做多種風格這是適應市場趨勢的必然結果。


          每個企業的目標并不是為了用戶設計出更好的視覺作品,企業的目的是在于用“創意”快速吸引用戶眼球。有點兒像是鉛筆和鋼筆的關系,不是為了最好的鉛筆而是鋼筆,而是為了設計出可以代替鉛筆的鋼筆。


          例如下圖中的描邊MBE風格、孟菲斯、噪點插畫、復古等風格都可以運營到設計中。


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



          2.4 有故事性活動延展

          大多數用戶都喜歡聽故事,在故事中包裝自己的產品,告訴用戶可獲得什么好處的這種方法也是提高運營活動的數據的一種好辦法。


          這種形式早在2017年的offo就有用過,當時ofof的產品有借助于《神偷奶爸3》中小黃人的形象,設計了一系列新的自行車造型,以一系列報紙的形式設計,以小黃人車潛入車間為主要故事,了解 OFO小黃人版是如何造出來的,某種程度上說很好地宣傳了 OFO。


          例如《德芙Dove x故宮》的H5項目中,用長卷的表現形式繪制了從清朝至現代的過年場景,意指“以前宮里人也吃德芙,現在將德芙的福氣傳到千家萬戶”,讓用戶眼前一亮的同時,也宣傳了企業產品。


          《當代清明上河圖》,快手品牌宣傳H5項目中,設計師將現代與古代結合,通過長圖繪制生活百態,用不同的故事來講述勵志故事和暖心故事,是故事性宣傳企業品牌的經典案例。



          2.5 活動ip的游戲化

          用戶對簡單的商品宣傳(運營活動)是沒有什么興趣的,但是如果把運營活動包裝成一個游戲,卻能俘獲用戶的芳心。很多企業正是抓出用戶的這個心理,在自己企業的ip形象上做足了功夫,阿里巴巴集團就是這樣一個典型的企業,只要是過節,ip形象總能參與其中發揮其最大的商業價值,是典型把ip形象加入運營活動游戲化的企業。


          每年支付寶都會有積攢5福的游戲,在2021年他們還升級了自己的ip形象,讓用戶體驗更加升級。ip形象的游戲化,未來也會成為一個趨勢,每年應該都會有吉祥物來送錢。




          三、構圖好就成功了一半

          畫面清晰、構圖合理應該是做運營設計的第一準則,尤其是大家都審美疲勞的今天,有一個好的構圖,可以起到事半功倍的效果。


          接下來我就介紹運營活動中常用的四種構圖方法,便于大家在工作中有規律有節奏地排版畫面上的圖形、文字、元素之間的關系。



          3.1 上下構圖法

          “上下的構圖法”是將布局分成上、下兩個部分,或使整個畫面元素呈上下分布的趨勢,主要信息(標題)常常融入圖片中,放在主空間成為主體,閱讀性文字放在次空間,這種構圖的特點是內容的沖擊力比較強。



          3.2 左右構圖法

          “左右構圖法”是占據圖片和文字的一部分,形成左右兩個獨立的空間,產生良好的閱讀體驗。很實用的一種構圖方式。這種構圖的特點所占圖幅較小,但要求文案的數量需要精簡,盡量不超過6個字。



          3.3 三分構圖法

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



          3.4 中心構圖法

          “中心構圖法”是把主體放置于畫面視覺中心,形成視覺焦點,再利用其他信息烘托與呼應主體。其特點是能夠突出重點信息,讓用戶一目了然。



          3.5 對角構圖法

          “中心構圖法”是指對畫面進行等值分割,并將所要表達的信息對角排列。這種構圖方式,會讓頁面顯得更靈活,有動勢,讓畫面有更多可能性。



          3.6 傾斜構圖法

          “傾斜構圖法”是版面整體或部分元素以傾斜的角度呈現在畫面上,能很好地營造出輕松、動感、刺激等氣氛感,一般游戲類活動也會比較常用。









          好的運營活動會為企業帶來可觀的短期收益這是眾多互聯網企業所認同的,也是每一個企業所需要的,以下是我對運營設計的一些經驗心法,希望對你有所幫助




          一、如何最大限度地規避返工風險

          對于設計者來說,最苦惱的是改稿,特別是那種做許多疊加質感光效的效果圖,改起來成本很高,改稿這件事對運營設計師來說可以說是最頭疼的事。


          針對這種返工改稿的情況,我個人認為問題多數出在“溝通”這個環節。在溝通環節中最要解決的核心問題就是要進行有效的溝通,如果需求方(運營經理)和設計師之間的溝通是無效的,改稿那是必然結果,下面是我對于“高效溝通”上的3點經驗。



          1.1 明確項目的目標

          身為設計師的你遇到一次兩次交付后要改稿的情況倒是沒有關系,有些協同的同事是初次合作,難免有些觀點不對齊的情況,這屬于正常的,但是經常遇到這種情況就要引起重視了。


          需要反思一下是不是自己對項目的目標沒有搞清楚,在做項目之前我建議直接讓需求方說出痛點,多問問目標用戶群體是誰?投放平臺和渠道是哪些?上線時間和排期?尺寸大小等問題,把目標明確下來。


          1.2 從抽象化到具象化

          人和人受到教育不同,理解能力是不同的,有的需求方上來就說了很多概念詞匯,比如我希望這次運營活動是高端、大氣、上檔次的,這很難讓設計師正確地理解。


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



          1.3 提前弄清楚運營活動的要求

          關于版權的問題是有可能導致項目無法上線的,我之前的一個項目就因為C4D這款軟件侵權收到了一份律師函,需要將帶有3D效果的在線元素全部替換。


          因此在項目啟動前可與需求方確認有關字體版權、圖片版權、軟件使用權等問題,避免在效果圖出來后再去調整,耗費公司人力成本。



          1.4 除了溝通還應該設立審核環節

          這個并不屬于交流的范疇,但是我覺得他也是影響設計師反復改圖的重要原因之一,還是有必要說一下的。


          運營活動上線都是有明確時間節點的排期安排的,所以設計稿審核的環節要特別重視,尤其是大型的運營活動不要等到最后的環節再去審核,因為如果審核不通過有可能會重新做,所以在設計過程之中應多設立幾個審核環節,保持和需求方的想法是時時同步的,千萬不要等交付時間快到了再進行審核,到時候誰加班誰痛苦。詳細審核環節設置,大家可以參照下面的圖片:






          二、運營設計其實也可以增效

          “增效”這個詞近幾年火得不行,尤其是和老板說增效的事情,他會非常感興趣的。以下是我親身經歷的一個項目,也正是從這個時候開始,我開始思考團隊增效的事情。



          2.1 明白運營經理想要什么

          以前遇到一個運營活動落地頁的項目,需求方說;“我們不需要繪制復雜的插畫放在Banner里,簡單畫點喜慶的元素,把活動標題展現清楚就好了,設計同學也不需要花那么多時間來設計,你們能多久給到我呢??!?


          我相信有不少小伙伴曾經遇到過這個情況,通過以上案例,不難看出設計師想要的跟運營經理想要的并不一樣。大部分運營經理更在意的是文案的露出、能多快地交付;而大部分運營設計師更在意的是圖片美不美、炫不炫,整體的圖形表達最終給用戶的感覺是否和設計師所想的一致。



          2.2 增效的兩種方式

          在理解了運營經理他們所在意的事情之后,我發現針對有嚴格交付時間的運營項目而言,運營設計的增效是很有必要的。一般來說“增效”有兩種方式,一種是提高輸出效率,另外一種是降低人工成本。


          提高輸出效率:我知道在行業內,58集團自主研發的運營頁面設計平臺——斑馬智能物料設計審核平臺和靈動編輯器算是兩款增效的工具,這兩款工具為運營工作提供高效且高質量的輸出環境。


          降低人工成本:我相信大多數同學的公司是沒有這類平臺資源,不用擔心,沒有我們可以自己搭建簡略版的組件代替,比如公司里有些運營活動要跟上新聞熱點,如果我們事先做好3-5個尺寸一致的模版套件,當新聞熱點來的時候只需要插入圖片更新標題就可以先推送出去,這種做法會極大地降低設計師的制作成本。


          再比如組內成員可以利用平時的工作時間做一些通用的組件如紅包、優惠券等,在要求快速完成運營活動的時候,可以挑選風格合適的樣式替換。





          三、做好運營需要了解用戶心理

          縱觀市場,會發現大部分設計師都是作圖高手,那些能夠在前期參與策劃運營活動,幫助運營經理想一些更有趣好玩兒的idea的人才是鳳毛麟角的。



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

          記得看過一次求職類節目,一位求職者推銷頸椎治療儀的案例讓我印象深刻。因為他的推銷過程很精彩,他用了兩種方法去推銷產品。


          第一種思路:介紹產品的優點,表示你買了我們的頸椎儀脖子的酸痛問題會得到緩解。

          第二種思路:如果你不買我們的頸椎儀,你很有可能因為頸椎不舒服而失去良好的睡眠質量。


          當然那個應聘者也得到了心儀的企業offer,那時候我就覺得這位應聘者很聰明,聰明的點在于對猶豫不決、不想買的用戶都設計了自己的對策。


          對猶豫不決的用戶來說,通過正向介紹產品優勢,從而獲取用戶青睞;對于不想買的用戶則利用反向思維講述這個產品會和你睡眠質量有關系。


          設計師是一個很重視用戶同理心的一個職業,當我們越是了解用戶的想法,就會知道用戶最需要什么,做的設計也就能更好地貼合用戶需求,最終完成提高運營活動的數據的運營目標。



          3.2 觸發點擊行為和用戶心理有關系

          2009年,斯坦福大學行為科學教授福格(Fogg)提出了一種人體行為模型,簡稱為 FBM。根據這一模型,他提出促使一個人的行為的發生離不開三個因素:行為動機(Motivation),行為能力(Ability)和觸發條件(Triggers),用公式表達就是B=MAT。用戶行為的產生需要動機、能力、觸發等有機結合,通過對動機、能力、觸發等干預可以影響使用者的行為。


          引發用戶點擊行為,本就是運營設計師必須要做的事情,但是觸發用戶點擊這個行為就要洞察到用戶心理所想。這里我推薦《飛書官方-認知偏差知識手冊》,大家可以從這本書里面了解一些用戶基礎的心理學知識。


          這里我還想補充一點,設計師為什么要學習心理學。如果有人問你設計是什么,很多人都會回答設計就是解決問題,這是一個很標準的答案。在我看來,設計解決兩個問題,第一個就是實現,把以前沒有的東西做出來,第二個就是推廣,把已有的東西賣出去讓更多人知道。很明顯運營屬于第二種。


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



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:斜杠7濕兄
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務




          騰訊文檔-色彩系統應用篇

          ui設計分享達人

          《騰訊文檔-構建科學有效的色彩系統》這篇文章中,我們闡述了騰訊文檔如何升級了新的品牌色,為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知,以及如何構建一個科學有效的調色板。


          在設計系統的實際運行中,我們也需要著眼于如何應用調色板,建設協同工作流,并給各個角色提供有關色彩的擴展指導,以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。

          在建設騰訊文檔色彩系統的工作中,我們首先構建了一個包含品牌色、灰色、輔助色的調色板,但僅有這個調色板不足以支撐我們流暢、無障礙的協同工作。日常工作中,“這里我用哪個藍色?”“這里我用哪個灰色?”“開發同學能否快速的變更某些元素的顏色?”等等問題層出不窮,建設系統的協同工作流迫在眉睫。



          Chapter 1

          ——————————

          如何建設?

          HIG強調不要在APP中使用“硬代碼”,即十六進制色值進行編碼,但前期我們構建的調色板僅有色值,這種硬代碼應用到app中導致項目效率低下,維護也會成本激增。


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


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


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



          Chapter 2

          ——————————

          為調色板的基礎色值命名


          調色板的各個色值(hex value)是最底層的基礎樣式,我們將色板上的顏色進行規則化命名,以方便后期將其引用到顏色變量中。


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

          *騰訊文檔調色板命名圖表



          Chapter 3

          ——————————

          定義顏色使用規則


          1、 從調色板中選擇合適的顏色并測試

          從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試,做具體任務中顏色選擇的最優解。


          例如,我們需要選擇一個藍色作為鏈接色,作為文本,對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。


          騰訊文檔的界面中,灰色系列占主導地位,起著至關重要的作用,為產品界面創造結構、表達邊界、建立信息層次。在調色板中,我們選擇了兩種灰色:中性灰色和藍灰色,來支撐系統的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。



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



          2 、根據任務定義顏色的使用規則

          經常會有設計師問,“這里我能用這個灰色嗎?”出現這種問題,根本上還是顏色使用規則定義的不夠清晰,含混的口口相傳的規則會導致更多的混亂。于是,需要我們根據任務和使用場景把顏色的使用規則清晰的定義。


          首先定義在界面中占主導地位的灰色、藍色的使用規則。


          藍灰色_Grayblue:

          在騰訊文檔中,藍灰色與品牌藍共同建立品牌印象,由此,藍灰色主要應用于與風格相關的場景。包括:圖標色、填充底色及大面積的背景色等。



          中性灰色_Gray:

          中性灰色主要應用于一些全局系統行為。如:文本、分割線及交互反饋hover、press等場景。



          品牌藍色_Primayblue:

          品牌藍色主要應用于系統中的各種行為,如藍色圖標、button、文本鏈接等。



          其次定義在界面中用于警示、狀態提醒的其他顏色的使用規則。


          紅色_Red:

          紅色主要應用于系統中需要警示的場景,如紅色警示圖形、錯誤文本、紅色tag等。



          其他顏色:

          在騰訊文檔中,會針對不同的任務應用不同的顏色,如左滑操作、成功提示、高亮顯示等。



          品類圖標基準色:

          在騰訊文檔中,不同的品類有不同的基準色。



          Chapter 4

          ——————————

          顏色變量的語義化命名

          定義了顏色在系統設計中的使用規則后,我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規則需要易于維護且具備可拓展性,如果只是將調色板的色值命名為 blue-01、blue-02... ,語義化的收益并不明顯。哪天設計團隊需要調整品牌風格,或是蘋果又掀起什么新潮流,把所有命名為 blue_x 的變量改為 gradient_serenity, 對于開發來說也是巨大的災難。


          根據 HIG 的建議,語義化命名不應該描述外觀或者色值,而是指明這個顏色的任務用途——標簽 Labels,分割線 Sepatators 或者填充 Fill。


          在思考如何賦予顏色語義化的命名時,設計師也需要用更概括和結構化的視角來看待界面設計,同時也需與開發同學達成一致,使用同樣的命名,滿足以更好地維護一套收斂和統一的設計語言。


          在騰訊文檔中,顏色的任務用途定義為為以下幾種:背景色 Background、文本色Text、圖標色Icon、分割線 Border、透明填充 Transparent fill 、實色填充 Opaque fill 、默認交互反饋 Feedback、語義 Intent。統一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達顏色強度。在需要更明確的用途說明的任務中,直接描述其用途,例如:hover,pressed、disabled等。





          Chapter 5

          ——————————

          建設團隊協同工作流


          以上種種,最終目的在于建設團隊的協同工作流,將顏色變量(color token)嵌入設計組件中與開發代碼形成聯動,便于設計利用變量及組件、開發利用程序中的變量來做全局修改,橫向提升團隊的協作效率。


          1、 設計內協同:在Figma中生成顏色變量

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


          2、 設計組件與開發代碼聯動:利用顏色變量表進行信息同步

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



          最終形成了設計組件庫與開發組件庫的聯動,構建了一個協同工作流,橫向提升工作效率。



          結束語

          上篇的調色板設計后,一直在醞釀這篇調色板的實際應用。在設計一個較為復雜、龐大的產品時,提效是永恒的課題。痛過、踩過坑的設計師應該深有感觸,溝通的無力、推動的困難都推動著我們發動自己的能量去想辦法提效。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          UI設計師如何避免用戶不滿與困惑

          ui設計分享達人

          案例1.用戶操作時的困惑


          相信大家在做設計的時候都遇到過這種情況,一個產品內有多個入口指向同一個界面,這是產品的投機取巧還是另有深意,很多人都對這樣的設計有不同的看法。


          這樣的設計就好像是狡兔三窟,在產品中流量可以從不同的入口進來,到多個不同的出口,也可以從不同的入口進入同一個地方。



          有人會覺得如果一個界面中有多個入口指向同一個界面會出現問題:


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


          2.多個選擇會讓用戶拉高轉化的成本,用戶在選擇的時候會花更多的時間思考有什么區別。


          我們來看一個例子,下面德邦app之前的一個版本,目前已經優化了。從截圖中我們發現頁面上方的查詢和寄件都和底部標簽單獨出來的界面功能重復了,并且我的快件也直接可以展示在首頁的下方,我的快件目前可以從首頁頂部、首頁下方和個人中心3個入口進入查看。



          通過這個案例我們發現確實這些板塊和功能重復度太高,并且沒有區分出場景,這樣的設計證實了以上的兩個說法,降低用戶使用效率和提高選擇成本。而且從業務角度看也并沒有目標的差別。


          但是我們分析問題也要多角度去觀察,多個入口進入同一個界面只有缺點沒有優點嗎?


          顯然不是,我們再來看幾個案例


          下方是一個商品評價的卡片,經過我小手的實際測試,發現無論點擊這個卡片任何有內容的區域,都會跳轉到全部評價的界面,那這樣的設計邏輯是否會造成和上面的案例一樣的問題呢?答案是,不會。



          這里的設計邏輯并不是和沙面那里的場景那么單一,而是用戶在面臨不同需求場景的時候可以有選擇。


          不知道大家有沒有發現一個問題,在上面德邦案例的時候,你會對兩個入口有疑問,但是在評價卡片的時候并沒有,這個卡片包含了4種不同的場景:

          1.我想看看有哪些好評、哪些差評 

          2.幾個不同標簽的用戶都是怎么說 

          3.下面用戶的實拍到底是不是真實的 

          4.還有沒有更多類似真實用戶的使用評價。


          所以即便最終到了一個界面,對于用戶來說也是從獨立的出發點開始的,而再回過頭看上面案例,你會發現,我就是要寄東西,這里有兩個入口,怎么選。


          而且,考拉這里其實還做了從不同內容點進去的一個區分。



          再來看個案例,貝殼的地圖找房,在首頁中有兩個入口,導航欄一個,分類中一個,這里出現重復會造成一開始說的問題嗎?首先我們看到貝殼的業務很多,以至于在這個分類中居然還需要通過滾動指示器來展示剩余內容,大家也可以思考一下,在這個界面中,會不會出現兩個地圖找房不同的場景出發點呢?我個人覺得其實是可以商榷的,首先地圖找房在房產app中是很核心高頻的一個功能,他的屬性是“工具”。



          所以我覺得他之所以在卡片中再放一個地圖找房是3個原因


          第一個是導航欄的找房肯定不能動,他是一個全局的入口,即使頁面滾動也可以隨時點擊到,即便要撤一個,也肯定要撤下方卡片分類中的。


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


          第三點是可能右上角的地圖不太能清晰表達這個圖標的具體功能,所以將“地圖找房”四個字顯示全。


          但這些都有一些主觀因素在里面,如果真的去掉卡片中的,我覺得可能影響也并不是很大。有小伙伴可能想說是為了分流,但是分流的目前主要是讓流量流到他應該去的地方產生實際價值,除了以上的3個原因,好像確實有點重復了。


          再來看一個例子,小鹿茶app。



          首頁的現在下單和底部菜單標簽都是到同一個界面,那為什么要重復呢?這里其實考慮更多的他并不想讓用戶進來就直接去購買,為什么不直接購買呢?應該是想要建立自己的品牌人設、滿足更多的消費場景和增值業務,比如給別人點奶茶、周邊的杯子跟合作商品推銷、最新的奶茶的推薦。


          如果只有菜單,產品也會顯得更工具化,很難突出自己的品牌,對業務增長沒有太大的幫助。有同學要說,那這個界面只是產品的“一廂情愿”,我就只要點奶茶就可以了,多個入口只會給我帶來困擾。所以他這里的設計邏輯是在用戶打開app的時候首先定位的是菜單,而不是首頁。


          所以,到底多個入入口進入同一目標我們還是要看不同的場景和目標的。如果既沒有業務目標做支撐,又沒有用戶場景的變化,那么這個重復的入口就是雞肋的。


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




          案例2.用戶使用中的不滿


          一個優秀的產品或者說一個合格的產品,能給用戶帶來愉悅的體驗。何為體驗,用大白話來說就是用的舒服、自然、高效率。


          再有一個底線就是不要讓用戶產生由產品帶來的負面情緒,例如產品出錯了卻不告知用戶解決方法、用戶出錯了沒有辦法及時幫助糾正、高危操作沒有二次確認等等,根據負面情緒的嚴重程度幾乎就可以直接讓部分用戶流失。


          很不幸的是我就遇到了這樣的體驗,當時正在給同學們布置一些作業練習,體驗一些產品的優缺點并給出解決方法。我也下載了這款文玩類的App,體驗了極速撿漏這個功能模塊。


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


          進入直播間,商家在賣力吆喝,頁面底部有加一手的按鈕,就是類似于拍賣,價高者得。于是我就抱著試一試的心態點了加一手按鈕,因為我預期是產品會再次向我確認是否要加價,結果是居然加價成功了,發生了什么?最后競拍結束也沒有人繼續加價了。




          實際場景中用戶可能誤操作不小心點了按鈕,這樣的場景和情況是非常多的,即便不是誤操作,給一個二次確認的對話框也可以避免這樣的尷尬狀況,因為用戶就喜歡在產品中點來點去,然而你在這里就像埋了一顆地雷。


          如果到這里就結束了,那其實我也感覺沒必要去吐槽,問題在于當我拍下還沒付款,直播間的商家就開始喊我的名字:xx大哥恭喜你拍到了我們的產品,可以去付款了。連續播報了幾十遍,我尷尬的直接退出了后臺,這種感覺就像是一群觀眾看著一個被騙的小白一樣,當我過10分鐘后打開系統提示商品流拍了,并且累積了違約積分。


          ???


          到這里,可能會有人說,你自己拍了的又不付款,當然要懲罰你了。


          于是我還是認真的去研究了一下,發現極速撿漏和競拍并不是同樣的規則。該產品和競品其實都有競拍板塊,在競拍板塊都會有需要用戶確認的操作,并在操作下方給出拍賣規則,顯示出價即表示同意拍賣規則。




          但是該產品極速撿漏的板塊并沒有這樣的說明,既然沒有提前展示這樣的說明和約定,用戶就不知道有這樣的規則,我拿了競品一對比,其實在直播帶貨的場景下,這個出價流程還是不同的,雙方其實都沒有給規則說明,但競品還是給了一個出價選擇后再出價的步驟。



          最后我甚至被商家拉黑了,不過還給我一個投訴商家的入口


          我當時的想法:


          1.如果因為誤操作讓用戶付出這么大代價的話成本就太高了。讓用戶點擊是否就等于用戶同意?


          2.請先告知我約定與協議的內容,單方面在我不知情的情況下對產品進行操作后,通知扣我違約積分,這樣就有點“霸道”了。


          3.平臺對商家和消費者的權益是如何平衡的,文玩行業和互聯網結合的難點在哪里。


          3.線下文玩圈的一些不成文行規,導致新人入圈后產生的沖突。


          于是我就想對此說說我的看法



          1.交易是產品平臺其中的一個功能屬性


          交易是產品平臺其中的一個功能屬性,需要優先滿足產品對用戶價值,其次再談交易的合理性。在這個流程中,面對用戶很有可能遇到的誤操作行為以及需要讓用戶去下單支付成本,我們必須提前告知用戶。在尼爾森可用性原則中我們也發現了,如果用戶不小心操作失誤,那么我們盡可能減少這些因為用戶犯錯帶來的成本,同時在用戶犯錯之前就要明顯告知用戶,將風險控制、前置。


          所以,你在注冊的時候、登錄的時候,產品一定會讓你同意一份用戶協議,告知你我們要保存你的數據和一些跟你相關的信息,如果你不同意,那就無法繼續體驗產品。


          這是一種契約。


          同理,如果你想讓用戶在這個產品中去參與拍賣,在進入這個板塊之前或者用戶點擊按鈕之后,也需要讓用戶明確這個操作帶來的風險是什么,取得用戶的同意。而不是直接讓用戶加價成功,導致用戶不明所以的被扣違約積分、被商家拉黑,這就和你去泰國,在街頭你朋友拍了一張你和一個抱著蜥蜴的人的照片,結果別人來問你收錢是一個道理。


          對于正常線下拍賣的流程,舉辦方也會對參與拍賣的人員進行相關規則、流程的告知,并且將風險、問題都提前讓客戶進行協議確認。


          所以,在產品中的交易,必須先滿足用戶與產品信息之間的對稱關系,保持信息的透明和契約公正,規則、約束、條件是用戶使用你產品的前提和體驗反饋的衡量標準之一。



          2.對于商家和產品的價值


          商家希望有更多的流量來曝光商品,撿漏商品的低價可以快速吸引一大批用戶,比如8塊錢的一個木頭核桃的雕刻掛件等,產品通過營造搶購、限時的氛圍,吸引用戶下單,并且降低用戶參與的門檻。


          那么,直接加價成功是一個好的降低門檻的策略嗎?我覺得并不是,降低門檻并不意味著就是直接拍到,而是需要提高用戶對產品的信任度,這個極速撿漏的模塊的目標用戶幾乎都是小白用戶,因為資深的玩家看不上、更不會買,有一定經驗的玩家也看的出好壞,明白它的價值。所以面對這些沒有了解過文玩產品的小白玩家來說,內心是謹慎的


          可能有人會想,這幾塊錢、十幾塊錢的東西還需要考慮嗎?當然在這個場景中,從眾心理是很明顯的,大家都覺得很便宜,但就是沒人拍。這都幾塊錢撿漏了怎么都沒人要,大部分人都覺得這么便宜東西肯定不咋樣,運費是不是貴的離譜、有沒有托在背后跟你抬價呢?大家都不拍我也觀望。越多人圍觀,越難促成交易。


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


          人總是對太輕易得到的東西不珍惜,更何況是幾塊錢的小玩意兒。所以針對直接拍下這個交互,個人認為是不妥的,無論是上面任何一種情況,都沒有辦法讓降低門檻,甚至通過這種“小聰明”反而會讓用戶更加不信任產品和用戶。


          不信任產品是大。尤其是作為一家平臺來說,虛假交易、以次充好、濫竽充數等等行為是致命的。



          3.文玩的價值


          我其實有玩過一段時間文玩,受我老丈人的影響,有一段時間喜歡玩手串、玉什么的。經常也會在某音去刷一些鑒寶類的視頻,很有意思。


          文玩它的價值在于品相、稀有度、盤玩程度、大眾接受度、歷史背景還有工藝等等。所以它并不是一個在每個人心中同等效用的商品,同樣一塊玉,他的種水一般,但是花紋很獨特,買賣雙方其實心理的價值預期會相差非常多,它就不像買電子產品一樣價格那么透明容易計算。


          有的人玩這些就是覺得命里該有它,它能給我帶來財、運,幫我辟邪,看的是眼緣。而不是路邊上一塊無用的石頭,可以隨意拾取丟棄。那么換句話說,如果在用戶下單的時候,我們利用一些情感化的文案,讓用戶喜歡上這款文玩,是不是也可以大概率的促進交易呢?



          4.文玩圈的行規


          我相信很多玩文玩的小伙伴都知道,在文玩圈有一些不成文的行規。也或許就是因為這些行規出現到了線上產品中。


          1.還價意味著出價,出價意味著買下

          在文玩圈,你不想買就不要還價。如果賣家同意了你的還價,那你就必須買。這代表著你個人的信譽和道德品質。


          所以文玩圈和互聯網的用戶之前有許多的鴻溝需要一步一步建設橋梁,不能單純的以線下圈子內的行規來要求剛接觸這個圈子的互聯網用戶,這需要大家一起努力和營造起一個良好的文玩圈的文化和規則,而不是直接生搬硬套,提高這個門檻。


          2.不要打聽別人的成本

          文玩沒有實際的成本,可能別人花10塊錢淘到的價值1萬塊的東西,也可能別人花了巨資看走了眼。所以你知道了成本對誰都沒好處,別人也不會告訴你。


          3.別人在交易的時候保持沉默

          文玩在每個人心中的價值不同,所以貨幣價值也不同,當別人在詢價還價的時候,不管怎樣我們都不要去表明自己的看法和想法。


          當然還有其他的規則就不一一敘述了,針對這3條,其實在互聯網的產品中是會有沖突存在的。例如你買了某個文玩,你一拍下,別人就說這個根本不值這個價錢。還有你出價了但是又不想買了,這些原本在文玩圈子中不允許的規則,在互聯網上去要求用戶著實有點困難,因為互聯網上的交易并不一定所見即所得,可能展示的是這樣,收到貨又是另一個東西。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:應駿
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          B端設計|數據展示控件應用

          ui設計分享達人

          將數據查詢的條件、邏輯、方式,整理清楚后,那么下一步的內容就是如何將查詢后的數據更好的展示給使用者看。到這一步設計師或是產品應該思考的是如何將眾多分散的信息,有序的、直觀的展示出來,并且輔助使用者解決問題,為產品提效。 

          數據展示主要以表格為主,由業務需要對表格進行擴展,結合其他組件使用;其次是列表,列表與卡片樣式結合的較多。 

          設計原則
          依然要牢記的一些設計原則,即:簡潔清晰、靈活高效 
          簡潔清晰:剔除不必要的裝飾元素,避免過度; 
          靈活高效:在現有的規范指導下,根據不同業務的不同需求,快速組合多種樣式的表格,提升設計效率,也要兼顧減少開發代碼冗余; 

          一、表格 

          基礎表格包括幾點基本要素:表名、列名、數據、翻頁,這些構成了表格的主體框架,而在真實場景里使用的表格都是升級版本,補充了更多功能作為輔助,比如排序、篩選、操作、導入導出...... 

          數據篩選:不同于查詢模塊的篩選方式,直接在表頭標簽操作,一般會以“倒三角形”圖標展示,通常應用在這一條數據處在哪種狀態,例如:進行中、未開始、已完成、已取消、審核中; 


          排序:現在比較少的應用,因為排序大多是對時間上的排序,而一般一個新的數據也是按照時間倒序展示,在第一行展示; 

          操作:對某一條數據的操作,或查看或編輯或刪除; 

          導入導出:對超過一定量的數據,會進行導入數據,導出數據,當然會有遵循一定的規則,才能和線上表格數據類型一一對應上; 

          實際工作中,我們都是根據產品需求和業務需要對表格進行補充輔助功能的,在設計表格的時候,總結下來通常會遇到下列幾類問題: 


          • 有層級關系的數據該怎么展示?

          • 一條數據有父子關系,該如何展示?

          • 一條數據類型太多,表格容不下怎么展示?

          • 一些數據其中的一類型字段較長,其他類型字段段,甚至只有幾個字,該怎么展示?

          • 一組數據,數據不全,類型不全,部分數據是共同的主體,該怎么展示?




          除此之外還有樹表結合的、表格套娃 

          對于這些常見的問題,在設計時會充分考慮這一領域的專業操作者,特別是從事醫療行業的專業人士,嚴謹的數據要求會比較高。 

          1、數據的層級關系 

          在相關醫療數據的管理系統里,因為醫療數據的復雜和嚴謹性,常見的表格展示不能滿足層級關系的表達,所以在視覺呈現上增加結構化層級關系。 

          2、數據本身的父子集關系 
          另外就是同屬一條數據之下,還會進行細分多個子數據,并對應的歸類列項; 

          3、并不好看的數據 
          上邊兩種說的是工作里典型數據結構的層級關系,并且數據容量相對美觀,不多不少。而實際的數據沒有那么美好,數據長短是參差不齊的,所以在考慮上述兩個設計原則的基礎上還需滿足,可閱讀和最大化兼容; 

          在一組數據中,單條數據中某一個類型的字段很長,管理系統里表格的容量是有限的,所以在可行性的前提下,對這部分數據縮短,可以按照需要但不重要的要求,隱藏部分,將主要信息顯示出來,并給予查看全部信息的入口。 

          4、殘缺不齊的數據 
          上述的說的數據還是比較好看的,而真實數據是殘缺不全的,甚至部分數據是“丟失”的,而且列項類型很多,表格橫向寬度是不夠的。 
          那么此時通過兩種方式優化這塊內容:一種是固定左右邊際列項,中部滑動;另一個種將空數據的列項隱藏,并給予條件選擇,按需展示數據的哪些列項; 
          當然在患者端也會有患者頭像,那么在管理系統里的患者表格相對應的頭像,另外也存在患者上傳的文件(圖片),也會以縮略圖的形式展示在表格中。一般會將所有涉及到的圖片(頭像、文件)規范統一的大小尺寸。 

          二、列表

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

          查詢篩選類 

          1、也會遇到查詢條件較多的,那么以多組列表形式出現,兩組或是三組。多重的查詢條件,就不敘述場景了,查詢是最基本的常用方式。 

          2、遇到多組篩選條件,考慮電商網頁版的篩選和布局方式,因為它主要是表達對數據的篩選不同類型的多組聯合后,能夠符合產品需求預期的結果。 

          段落數據類 

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

          2、九宮格列表,同樣,對于上述的分點類型的卡片列表,在數據容量的允許下,可以采用視覺上的九空格,將一級重要信息突出,作為識別來源,二級信息附著。為什么這么做呢,因為信息更突出吶~ 

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

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:啊嗚計
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          B端產品設計分析方法總結

          ui設計分享達人

          做一個完整B端系統項目前,從交互設計的七大定律,B端產品業務調研,用戶訪談研究方法,精準推導B端用戶畫像,到B端產品主風格的設計定調,深度理解B端主流組件庫的視覺規范,進而為B端產品設計做充分的準備工作,以下內容較多,大家可以根據上述目錄來進行選擇性閱讀。

          1.1 B端組件庫的概念及作用


          概念:組件庫的底層邏輯就是原子理論,類似于我們在拼樂高積木的時候,根據說明書一個模塊一個模塊來拼湊,先找零件,再拼成部件,然后是成品,這個過程和UI中的組件化是一模一樣的,組件化就是原子理論集中得表現,原子(圖標、按鈕、字體樣式等)——分子(標簽欄、導航欄、搜索框等)——有機體(圖文列表、內容卡片、布局模塊、瀑布流圖等)——模板(原子、分子組合排列組成了模板,也就是原型圖)——界面(最后根據原型圖形成視覺設計稿)


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

          高效性:比如所有的按鈕不用單獨去設計了,從組件庫里調用就可以,這樣對于設計師來說就是高效的。對用戶來說,也會讓用戶的使用效率提升,比如當用戶看到藍色的按鈕就是可以提交的按鈕,看到白色得按鈕就是次要得按鈕,看到不帶邊框的按鈕就是一個危險按鈕等等。

          組合性:通過調用不同的組件來進行組合可以形成不同的頁面。


          1.2 如何正確使用組件庫


          1.2.1 組件庫的使用前提

          一些主流的組件庫,比如AntDesign、Element Design、ZanDesign組件庫等,這些框架機構本質都差不太多, 但他們有自己的特點,具體用哪個組件庫,通常由公司的架構師來進行架構選型,比如VUE(Element Design)和REACT(Ant Design),這是兩種不同的技術選型,(VUE和REACT是一種前端框架的技術架構版本,可幫助前端工程師快速進行開發的前端框架)。從技術角度講,大部分公司會首選AntDesign(React),因為有很多案例提供,VUE和有贊也可以但用的少。從設計角度,Ant Design得設計組件形式案例很完善。Element Design做起來視覺單一得樣式白白得感覺,沒有設計層次化,Ant Design更好看一點。所以先選擇底層的前端框架,再根據這個選擇前端的機構布局。

          1.2.2 組件庫的使用過程

          設計師和前端最終目標是一樣的,都是快完成保證設計質量的,原生組件不能達到要求的時候,設計師可以根據原生組件庫修改樣式來表達到自己的想法。但對前端來說最好什么都別改,就用原生組件庫前端工程師直接復制就行,這也是因為我們設計師的要求和前端的要求是不一樣的。但修改后樣式的組件,底層邏輯還是原來的組件。從Antdesign等組件庫里復制出來,經過figma里的各種功能操作后,比如分離組件、改變組件得形狀、替換內容等,但這個組件仍然是Antdesign里的組件,組件是否改變取決于,這個圖形,這個組件是不是已經代碼化,我們設計師設計的組件,只是樣式,需要經過前端來形成代碼,只有代碼化的組件,才是組件,如果沒有代碼化,那只是一個樣式而已。所以,我們用Antdesign里是已經實現代碼化了得組件,組件庫里有的組件前端一定是可以代碼實現的。


          1.3 如何設計組件庫


          1.3.1 每個項目都會分這四個周期


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

          項目中期:繼續完善基本組件庫,應用案例的完善,迭代組件庫、樣例庫、最佳實踐案例。然后再次迭代進入基本組件庫。


          項目后期:形成最終組件庫與設計系統的規范建立,根據項目不一樣詳細程度也可以不一樣。


          延展期:為項目2.0升級準備根據使用反饋、迭代之前得組件庫與規范,預計未來版本中出現的典型案例,并針對性的設計應用組件。通常很少有公司進行到這一步。


          1.3.2 組件庫的開發流程


          1.3.3 B端組件庫存在的價值


          B端組件庫的存在是不是意味著不需要設計師了?其實并不是,組件庫可以幫助設計師增進設計效率和溝通效率,和前端溝通告知按照對應的選型組件庫規范使用就可以了,同時組件庫得一致性、準確性、協同性它的質量有保證。但設計師做完組件庫后,繼續需要關注的點是:

          01、根據業務場景來優化設計組件庫:因為組件庫是一定會去更新的,如有必要再去更新,那一定會是很復雜得業務場景下去做更新的,這個業務場景是程序員或者以前的組件不能實現的,需要很強的設計技能去做迭代,所以需要設計師繼續去做一些結合業務場景的組件來放到組件庫里。

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


          1.3.4 B端主流組件庫有哪些

          2.1 B端產品的設計過程


          2.1.1 用戶體驗五要素


          戰略層(屬于產品愿景,滿足用戶的需求,產品的愿景和目標


          由于用戶有不同的需求進而產生了不同的產品,戰略層決定了用戶用干什么樣的產品,比如,用戶需有很多銷售客戶的線索需要進行管理,用戶需要管理客戶,那就做一個CRM系統。比如,用戶想寫日報,想要一個打卡的OA系統,那么產品目標就是要做一個OA系統。比如,電商里面很多商品,牽扯到很多進銷存,那就做一個ERP系統。這部分跟設計師相關度沒有那么高。


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

          功能規劃:比如要做一個OA系統,其中就包含了打卡、日報、項目管理、報銷、人事流轉等等都是跟辦公相關聯的,需要把規格和功能畫出來,畫成簡單的表格并且將它們分類,這里所有的功能都不是詳細的,就是簡單的分類,將功能簡單描述一下,同時做一個簡單的用戶畫像。這部分設計師只需要閱讀產品經理給到得PRD需求文檔即可,整體看還是偏愿景,沒有形成具體的產出。比如OA系統中就總結出重點做一個審批得功能,并不知道什么樣的界面,只知道一個大概的范圍。


          結構層(指原型設計)

          這部分,設計師通常就需要參與進來,如果設計師只按產品給的設計好的原型來設計,就顯得很被動,這樣只能叫做視覺美化,被稱之為美工,設計師應該從沒有形成原型的時候,可能只是一個簡單的PRD需求文檔或者草圖,設計師就應該參與進去。


          設計師對原型進行優化設計,優化的不是業務,因為很多業務內容肯定沒有產品經理了解得深刻入,這時,設計師需要優化的其實是它的交互邏輯、交互內容,一旦原型里里產生點擊,一旦產生多種狀態,那就要去了解它,每種狀態產生不一樣的界面結果,其實對標的就是設計師設計的界面將產生什么樣的變化,換句話說,如果有界面的變化,內容得變化,設計師就需要參與到其中。目前來看,很少公司有專門的交互設計師,要么這部分工作由UI設計師來完成,要么由產品經理來完成,很多企業已經把設計進行前置化,由UI設計師來完成交互的工作。


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


          框架層(指界面設計、組件設計)

          框架層這部分有一些爭議,有的設計師認為就直接做界面設計了,其實框架層還不能把它理解成是界面設計,它僅僅是做了一些業務的模塊兒的框架而已,更多的其實是將它組件化: 將原型組件化、模塊兒化,類似我們直接從Antdesign組件庫復制來內容簡單改改之類得操作,完成的是組件和界面的設計,這些界面并不是最終完整的交付樣式。


          表現層(可視化呈現,UI視覺呈現)

          這部分和設計師關聯度最大的一部分,就是界面中的配色、配色、圖標、樣式、結構、布局、排版等設計,但是我們設計師需要從范圍層了解業務熟悉最初PRD產品需求文檔去一點點做起,其中設計師在戰略層參與度可能只有2%左右,范圍層參與度5%左右,從結構層開始逐步往上參與度越來越高,至少結構層,框架層和表現層的參與度是很深得。



          2.1.2 B端產品的設計過程是什么

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


          2.2 交互設計七大定律


          01. 菲茨定律:當設計師需要讓用戶重點去看到頁面中某一個突出點,點擊到一個區域時,設計師就需要做到適合的大小,適合的區域,適合的位置,適合的形狀,適合的顏色。也就是你想讓用戶點擊的時候就突出重點想顯示的,不想讓用戶點擊退出的,就把它設計的的足夠小。比如按鈕得退出和付款,實心付款按鈕為主要按鈕,虛線置灰退出按鈕為次要按鈕,比如常說的海報中字要大,logo要大,這些都屬于菲茨定律。


          02. 席克定律:用戶面對的刺激(或選擇)越多,他們做出決定的時間就越長,由于用戶的時間很寶貴 ,用戶沒有義務花更多留在我們的網站上,所以我們需要有選擇的地方對選擇進行分類。


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


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


          05. 防錯原則:當用戶在使用產品中,預判用戶本身或產品一定會出錯時候,可以告訴用戶怎么可以不犯錯,或者將風險降低。比如電腦的關閉電源鍵,就允許電腦司機時允許系統犯錯,讓用戶使用關閉電腦電源鍵進行重啟。比如銀行取出錢后,銀行卡有忘拔現象,銀行完全可以做到像光大銀行那樣去再取錢流程中改成先拔卡再出鈔得交互流程,就可以避免忘記拔卡,但其他銀行都沒有這么改進,仍然是先出鈔后拔卡得原因是允許用戶犯錯。


          06. 奧卡姆剃刀原理:化繁為簡,如無必要,勿增實體。比如小米電視遙控器的設計,由原來傳統的很多遙控器按鍵只優化成了保留上下左右為數不多的幾個重要按鍵,原來的遙控器數字按鈕如果真正要輸入數字的時候通過功能性,調出數字來,這樣在遙控器得設計中基本只保留20%主要功能按鍵。這就是交互上的優化。比如在UI界面中,也會用到這個問題,簡化文字,把文字用圖標替換,還有各種流程得優化等等。


          07. 雅克布定律:以用戶習慣的使用模式去設計產品,降低用戶學習成本,遵從用戶使用習慣。 利用現有的思維模型,用戶習慣,我們可以創建出色的用戶體驗,使用戶可以專注于自己的任務而不是學習新的模型習慣。



          2.3 B端產品用戶畫像


          2.3.1用戶畫像概念

          用戶畫像又稱用戶角色,作為一種勾畫目標用戶、聯系用戶訴求與設計方向的有效工具,用戶畫像在各領域得到了廣泛應用。用戶畫像分為兩種,不論C端和B端都會做這樣的用戶畫像。總共可分為兩部分,基本信息數據和行為數據。


          基本信息數據:當我們去了解用戶的基本信息的一些數據時,職業,收入,年齡等等,這些和功能有很多的關聯度,比如唯品會用戶畫像關鍵詞是:女性、折扣、白領 ,唯品會產品定位聚焦女性,這些基礎信息數據,就能給產品帶來很好的結果,當我們要做一個女性的購物平臺的時候,可以先把男性用戶拋除掉去考慮設計方向,再比如收入就知道了,大概產品面向的收入群體將是什么收入群體的人,那么我賣貨的價格區間、包括設計的風格就是一個什么樣群體的設計風格。那些賣奢侈品的不是黑色就是灰色,要不就是棕色,但未必是適合唯品會產品的風格,需要找出這些基本信息去和產品進行關聯度,把基本信息放到設計結果中去考慮。


          行為數據:指用戶的愛好,這部分群體有哪些愛好,是喜歡購物,還是喜歡運動,他/她的消費情況是什么,喜歡旅游還是美食,他/她經常用哪些APP,他常用的設備,是蘋果手機呢還是安卓,小米還是華為,等等得到這些數據,也能得到一些用戶喜歡什么樣的競品,這些數據就能側面的在我們的產品中得到反饋,得到功能和設計上的指導和其他產品的區別。這些行為數據,不管我們做C端還是B端,都要獲取到,但C端和B端獲取到這些行為數據的結論是不一樣的。因為C端用戶研究方法不一定適用在B端用戶研究方法。C端最終抽象成一個人,給他帶來的很多屬性,這些等等都會成為他的用戶畫像。

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


          2.3.2 B端用戶畫像本質

          比如做一個和電影相關的管理系統,電影行業包括很多人員管理,設備管理等,這里不能把用戶畫像抽象成一個男性或者女性了,而應該把它抽象成一個職業,比如抽象成一個導演,導演需要去管理什么東西,它需要哪些資源去整合。導演就又叫做行業屬性坐標。B端不以社會屬性去做用戶畫像,一定以行業坐標去做用戶畫像,我們在整理作品集的時候需注意不要與C端畫像整理混淆。


          我們要做一個行業可以不用管他/她是誰,也可以不用管他/她有什么樣的社會屬性,比如做CRM最重要的在里面起到作用的是,客戶關系管理和銷售等; 比如做OA系統,就是一般的員工,等級,職能等等,可以看出行業屬性(職業屬性)決定了他的用戶畫像的精準度,一定把這個人拉到行業里去研究,研究社會屬性沒有價值。這是C端和B端做用戶研究最大的區別。


          2.4 B端產品用戶調研


          2.4.1用戶調研的作用/目的/重要性


          01. 了解產品業務需求定位:可以幫助了解目標用戶的信息,從用戶的角度:未來使用你產品的用戶,他理不理解你的產品想要表達什么,你的產品講了哪些功能。因為很多好的產品我們打開它第一眼就知道要干什么,是給我們做什么的。同時站在設計者的角度:怎么可以把這個產品設計清楚,比如做一個CRM客戶關系管理系統,具體管理什么我們是不清晰的,想要清晰就需要通過用戶調研這個過程給它展開。


          02.解決功能信息架構問題:可以幫助設計師更明確需求功能得合理性和優先級,比如頁面標題的使用、標題的層級、需要在信息層級清晰得情況下體現出來,而明確信息層級同樣需要通過用戶研究體現出來。


          03.讓可用性測試更加準確:可以幫助鎖定合適的測試用戶,來測試我們的產品使用程度,使用體驗是不是好,這時需要要找目標用戶去測試,比如小米有品針對群體是米粉,唯品會針對的群體是職場女性,而不像C端找所有的人去測試。


          04.解決團隊協作溝通問題:確定用研目標可以有理有據的把設計目標和產品經理的意見達成共識,因為未來一定會多次和產品進行PK,像諸如設計師組件化沒用好這些理由也不會是pk點,確定用研護鏢可以更好的深度去理解原型圖,可以把團隊協作溝通的問題解決好。


          2.4.2 用戶調研的方法


          01. 確定研究對象:首先拿到一個產品,拿到一個需求的時候,這個需求通常很模糊,比如只告訴做一款CRM客戶關系管理系統,但汽車行業,服裝電商行業,保險行業,銀行金融等等,都有CRM客戶管理系統,不同行業的CRM肯定是不一樣的,這時候,比如要做金融的CRM,那研究方向就已經確定了,金融CRM就可以確定去研究金融行業的業務鏈,業務流程,具體找哪些用戶群體,可以根據以往的驚經驗和產品的目標去確認。


          02. 找研究方法 : 研究方法分主動和被動,我們通常用的方法是被動方法,比如自我報告法:當這個產品產生了一些數據,我們從后臺可以拉取這些數據的時候,通過這些數據去分析,這是被動的方法,這個被動的方法所有項目都可以用。而主動的方法,就是觀察和采訪,主動去找用戶去找關聯度。


          03. 獲取到數據 : B端和C端區別之一是提高效率,它要產生的結果只有一個結果,就是減少成本,任何B端的系統都是為了實現這個目標,提高效率和減少成本。所以獲取數據,研究數據的方向不能偏離搞錯,用戶研究的方向不要搞錯。比如我們以用戶為中心來設計,就會認為用戶的操作體驗感是第一位的,其實不對,放在第一位去考慮的應該是以系統的最優化,提升效率為第一位,而用戶也可以為這件事情做一些改變而找到平衡點,數據導向得提高效率,減少成本有時會大于用戶的操作體驗。


          04. 用研行為: 剛才前面提到的這些注意事項,到底應該找什么方法去得到這些數據呢?第一我們可以通過后臺數據比如通過百度統計等系統來獲得;第二通過問卷法發出一些問卷,用戶可能散落在全國不同位置;第三可以通過用戶定性訪談來獲得;第四可以通過用戶旅程圖來決定用研行為。


          05. 分析調研結果: 研究結果不是為了放到我們的B端作品集里的,而研究結果一定是為了去定性、定量、讓數據回歸到產品功能本身。同時經常問自己這些問題,去根據研究結果和問題進行匹配思考,比如研究了那么多,用到了用戶畫像得出的結論了么,用到了哪里?在項目中能舉個例子嗎?采用什么樣的視覺去實現了用戶體驗要素?


          2.4.3 B端用戶訪談模板


          2.4.3.1 用戶訪談概念:


          01.確定訪談目標:了解目標用戶群體,通過訪談信息來進一步構建所需要的用戶畫像,從而確定設計方案與功能優先級。02. 定性/定量訪談目標:將這些目標定量、定性,選擇不同的訪問對象,構建不同的角色畫像。比如問銷售的用戶畫像,要找不同的訪問對象,銷售總監,普通實習生等等,三到四個角色,樣本越多,用戶畫像越準確。03. 訪談過程:提前把問題寫出來,拿著問題去聊,用錄音設備,記錄表格,一個提問,一個記錄,分開后記錄比較準確。04.訪談結束:要做信息匯總,要做分析建模。分析建模就是將信息最終變得有意義。


          B端用戶訪談模板有30個問題,這30個問題決定了我們的用戶畫像的精準度和產品的用戶畫像的價值。用戶訪談會問些什么問題呢?當我們調研的時候把問題寫出來的時候,就已經解決了一半的問題了。


          2.4.3.2 B端用戶訪談30問


          01、基礎特征


          崗位:你是從事什么崗位的?是總監還是普通職員?目的是為了知道不同的權限的使用者,進而就可以在系統中設置這些權限。

          職責:需要獲取到用戶不同的需求,因為每一個崗位有不同的職責,他們的需求點也是不一樣的。根據這些不同的需求,我們在界面中得動態儀表盤部分,就可以根據不同職責來顯示不同的內容。

          姓名:可以讓訪談記錄得到更加真實的體現,目的是可以獲得產品的一些真實的基礎字段。

          年齡:是用戶認知和經驗度的體現,用戶的年齡可以代表他們對行業的認知,和整個企業流程的認知程度,一般性理解,用戶的年齡越大,那么他的經驗越豐富。

          教育:指用戶是什么學歷,目的是為了了解用戶的經歷與熟練程度,通常認為,用戶的教育越高的人,他們往往使用軟件操作的熟練度會越好。

          位置:指用戶在什么地方來使用,目的是知道了場景與優先級,用戶是在寫字樓里還是精英場所來使用我們的產品。因此得出基礎特征是要得出這些結論,得出這些結論進而反饋到產品中去。


          02、行為接觸點


          使用頻次:不同的崗位用戶使用功能的優先級是不一樣的,用戶使用頻次越高的功能,這個功能的優先級就越高。了解之后,那在下次迭代的時候就需要把重要級別的功能放在易操作的區域去體現。比如這個重要功能就是一個icon,那么把它放一個快捷入口。

          使用時長:也能代表功能的優先級,用戶使用時間最長的功能,代表可這個功能優先級很高。

          時間段:用戶在什么時間段使用的是最多的,我們就知道了這個功能的活躍度,這個數據指標,主要和技術有關,我們可以從后臺數據去獲得。

          使用設備:用戶使用設備兼容的優先級,平時用戶用什么設備,再訪談過程中,需要問具體使用電腦的分辨率,屏幕的尺寸,屏幕的比例,都可以去實際的調研一下。在我們做B端界面選擇屏幕尺寸的時候,可以采用結合實際情況用戶使用的屏幕分辨率尺寸來設計界面。

          相關軟件:用戶平時的操作習慣和流程是什么,還會使用其他軟件嗎?比如他們還用什么其他的競品,可以繼續問用戶其他的競品哪里比較好,哪里是亮點,那最終得到的目標就是用戶的操作習慣和流程,這些也可都可以反饋在我們產品中。


          03. 使用環境


          碎片化時間:主要解決用戶場景的問題,比如汽車4S店銷售,當你去買車時,銷售人員會問,你會買什么樣的車,會記錄你的年齡,用車習慣,用車時間,姓名,預算,都會記錄,銷售通常會用一些碎片化的時間去記錄。此時就可以得出兩個結論:1.我們在設計的時候是否可以考慮讓銷售充分利用碎片化來進行這些信息的錄入,而且方便他的錄入,比如他本來只有電腦端,電腦端是一個完整版的功能,我們能不能給他設計出一個移動端來,讓銷售不用回到電腦屏幕中就可以去記錄這些內容。2. 記錄時也有兩種記錄方式,是客戶講話的時候銷售去記錄還是這些事情做完之后銷售再去記錄。通過這樣的行為會得到這樣不同的設計結果,比如有人問你們公司為什么要做B端的移動端設計?以上就可以有理有據去解決銷售的場景問題。


          用戶的操作環境是什么:主要解決視覺體驗問題,用戶是白天操作還是晚上操作,是在強光環境操作還是弱光環境操作。這些都應該是考的點。比如B端使用的ATM機,應該設計成白色還是深色模式,我們知道一般都是深色模式,是因為通常是室內,它和光線有關系,如果是室外的取款機,四周又沒有遮擋,如果還設計成深色,肯定是看不清楚的。比如HMI車載系統,白天模式開了深色,一定會看不清楚。所以要提前判斷使用深色模式還是淺色模式,也需要考慮在設計的時候使用什么樣的色彩和色調,在室外使用還是室內使用,如果對色彩不怎么挑,那也可以使用VI色,這樣一來視覺的保障色就確定了。還可以確定在使用周期時間,要多長時間完成一個操作,應該使用什么樣的方法可以盡快完成一個操作。通過用戶的操作環境可以得到以上信息。


          是否有平行事件:用戶在做這件事情的同時,他是不是需要做其他的事情,要得出至少兩種平行事件,得到的結論是,我們的界面是不是需要把某些功能整合在一起,因為用戶經常是需要同時做這兩種事情,同時去打開這兩個功能,通過這樣的反饋可以把同時使用的這兩個功能結合到一起,通過訪談可以得到這樣的依據,來進行功能的整合。


          04. 主動詢問用戶觀點


          用戶的驅動力: 去了解激勵因素,就知道了什么功能應該做完善,什么功能并沒有那么重要。比如汽車銷售為什么要錄入信息,因為可以增加汽車的銷量,錄入越準確的用戶信息,他的銷售量越高。也就是用戶做這件事情,他的原因是什么。


          用戶遇到最難事件: 在工作中或者用戶使用過程中遇見了什么樣難的事情,這件難的事情,就是產品的痛點,就明白了當前產品迫切需要什么樣的功能去幫我們設計師來解決當前產品痛點的問題。


          用戶遇到最颯事件:他在使用過程中最滿意的是什么事情,就是爽點是什么事情,那些產品中解決了用戶很好的問題的部分,去把產品更好的放大,讓用戶繼續使用。也就是通過訪談我們知道了產品的爽點是什么。


          用戶擔心事件:在他們使用過程中擔心的是什么,我們也要要了解這些隱藏的問題.


          用戶期望事件: 用戶希望得到什么樣的改善,最終的目標是想解決什么樣的問題,到這一步其實所有問題目前都沒有答案,我們可以繼續訪問,先做記錄,不做最終的答案.


          問用戶目前狀態: 我們可以了解待解決的問題,通過產品想解決什么問題,進行收集需求;用戶對于產品升級有什么小期待,進行收集需求;通過用戶的反饋目前產品的哪些問題,收集到目前反饋的問題;以往問題是否有效解決;進行收集反饋。覺得不錯的同類型產品有哪些,通過了解競品情報,我們可以競量多問一些 覺得不錯的競品有哪些;目前產品有哪些地方很好,很好的地方要保持,有的產品升級后,以前特別好的功能突然消失了,改了沒必要,好的功能保持就可以;前產品有哪些地方不好,我們去優化不好的地方;以往問題是否有效解決,當有問題需要解決的時候,用戶的問題是否是通暢的。通過看用戶如何反饋,我們可以了解功能傾向,了解整個流程是否通暢


          05. 聊生活

          發覺人性閃光點,提升產品差異競爭力,1、問目前的生活狀態,婚姻狀態,有沒有孩子,接送孩子的時間,平時有什么愛好?什么愛好不錯?發覺人人性的閃光點,好的不好的產品都有共性,B端產品中視覺的傾向是什么?比如有插畫,溫馨的語言提示,通過什么樣的情感設計可以照顧到每個人的生活。


          2.4.4 B端用戶訪談得出結論


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

          2.4.4.1定量整理:行為


          第一步是行為的總結,量級的總結,把記錄的問題點、功能點和關鍵詞放到表格里面,經常出現,迫切需要解決的是什么問題,較少的問題是什么,偶爾的行為問題是什么,因此偶爾的優先級就不高了,主要關注經常遇到的問題點、功能點和關鍵詞。


          2.4.4.2 定量整理:特征


          把每個角色按照以下表格里的的特征進行定量的描述,這時候仍然不能找出它的共性點,但已經把用戶的特征進行分類整理了,定量之后再去定性。


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


          這個角色名稱是一個具體的名字,比如王某某。以下這張表:可以看到在我們的系統中有哪些的權限,有哪些的角色,他們的需求是怎么樣的,這是一個完整的用戶畫像。用戶畫像是一個結果,是通過用戶訪談的形式完成了用戶畫像,并不是被動的接受數據信息得出的,所以通過用戶訪談的形式進行定量定性分析得到的結果是最準確的。


          3.1 建立情緒版


          3.1.1 情緒版的概念及作用

          本質是將情緒視覺化,情緒版并不是玄學的東西,它確實可以通過圖片找到對應的圖形元素,因為圖形(照片)是可以表達情緒的,比如看到一張照片會感受什么什么情緒:熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關的關鍵詞。


          情緒版是一個特別快速能和產品,我們的團隊包括設計團隊進行溝通的一種方式,比如要設計一個界面,需要幾天才能設計出來,但我想提前知道一下未來界面設計成什么樣子,那就先做一個情緒版,讓大家知道,找的方向是什么,這樣適合與大家及時的溝通,大家也會明白產品將會做成什么樣子,達成產品的最終設計定調。


          3.1.2 怎么建立情緒版


          01. 提煉關鍵詞:獲取本次產品設計中所要實現的產品3-5個必要的關鍵字詞組,其中包括交互或視覺目標,通常由一些比較抽象的形容詞組成。比如:在做的產品是醫療行業,那么醫療相關關鍵字詞組是:生命/健康/安全等。


          02.關鍵詞發散:通過獲取到的關鍵詞的基礎上,發散出來一些新的詞語,這種發散詞匯,不是簡單頭腦風暴產生的,而是要有目的性的進行提取,要更加的具體。比如剛才舉例醫療行業,生命可以繼續發散出血液、器官等衍生關鍵詞。


          03. 搜索圖形: 對之前總結出的幾個關鍵詞在圖庫中進行查找,也可以在直接在behance里找別人收藏好的情緒版圖片直接用,效率可能更高一點。


          04. 制作情緒版: 搜索大量圖片后,挑出我們需要的進行整理,采用一種拼貼方式進行設計排版,拼貼出來需要得到需要得到的色彩,構圖,質感和字體。


          05. 得出結論: 在圖形、色彩、字體、質感、構圖,以上五點,得到合適的設計方案,快速與團隊進行溝通,直觀表達產品清徐,達成產品的設計定調。產品調性(企業調性)其實就是用企業的方式把故事講述出來,是一種通過情緒版方法來講故事的方式。


          3.2 品牌三元法


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


          品牌三元法是通過品牌三板斧模型得出的一個確定設計主風格的一種新得方法,品牌三板斧模型可以總概為用戶調研關鍵的三個維度,一目標用戶是誰?二產品服務是什么?三對于目標用戶來說,你的產品服務有什么核心價值。當在回答完這三個問題以后,我們其實就已經清楚我們的品牌定位是什么了,因為它的核心優勢是比較明顯的,這樣我們就知道我們將來會面對什么樣的人群,去怎樣去宣傳它的賣點,同時做出產品的差異化。


          通過這幾年得工作案例設計實踐,在確定設計主風格時,情緒版方法逐漸有被品牌三元法替代得趨勢,因為情緒版這種把抽象的詞不太好表現的詞,翻譯成圖片的方式,比如剛才提到醫療行業的關鍵詞是生命,健康,安全的,設計師找到很多這種相關的圖片,挑出來后從這些圖片里面找到一個共同的規律,最后去設計。這里面就有兩個問題,一個原因是關鍵詞非常的平,生面,安全,健康,很難更準確的表達衍生關鍵詞。另外一個問題是它非常局限設計師的創意,因為它是從一些現有的圖片里面然后去挑,所以很多設計師就反饋現有的方法不是很好用,比如當我們想到安全這個詞,可能所有人想到都是特別綠的感覺,或者干凈這個詞,就會統一聯想到白色這個畫面,大家從一開始想法就差不多,所以它很難體現出創意。所以由于情緒版嚴重限制了自己的想象力,沒辦法把產品核心的氣質表現出來,雖然情緒版正確但是是一個平庸的結果,大家沒辦法記住的結果。


          3.2.2 如何應用品牌三元法


          01. 理性層面(業務層面),傳遞產品理念:獲取本次產品設計中體現業務層面,可以傳達產品理念得5-10個關鍵詞,對應的放在左邊。


          02. 感性層面(人文層面),營造產品氛圍:主要體現這個產品給用戶帶來什么好處,宣傳的角度是什么。獲取本次產品設計中體現人文層面,可以傳達產品氛圍的5-10個關鍵詞,對應的放在右邊。


          03. 個性層面(氣質靈魂),創造獨特風格:結合理性的業務層面和感性的人文層面,來創作出什么樣的畫面,和獨特風格的感覺。同樣總結出5個左右的關鍵詞,放在下邊。


          04. 結合以上三個維度,提煉主視覺畫面:當出現這三部分詞的時候,經過思考或者大家一起頭腦風暴,可能一開始想到的比較淺,但最終一定能想到一個最終關鍵詞或者特別符合我們這個產品氣質的畫面,因為以上三部分得出關鍵詞也都是經過品牌三板斧模型推演出有關聯的關鍵詞,想到一個符合產品氣質的畫面并不難,再得出這個主視覺畫面后,這就是最終產品調性的主視覺,既符合產品定位,又具有獨特的差異性。


          05. 傳達產品,用視覺語言講故事:接下來,當這個主題、主視覺確定了以后,在看怎么樣用具體的視覺設計技能,去傳達我們的產品,也就是用視覺語言來講故事,具體注意三個方面,一是表像,元素要符合這個視覺主題,二是關聯,元素之間要具有關聯。三是隱喻,用視覺的手段含蓄的表達產品的一些特性。比如云計算的一些產品,做得比較復雜每一個圖標上都有一些曲線切割的畫面,這樣做的原因其實不是為了炫技,它是為了表達云計算彈性可擴展的特性,好比拍電影,中國人講究隱晦。


          4.1 色彩規范


          4.1.1 選色

          在系統色彩中,以Antdedign為例,系統色彩里包含了很多不同的色調,但不可能用到這么多顏色,這時要應用選擇幾個顏色,選幾個我們應用的顏色。第一步要做的就是選色,選出應用色彩,這個應用色彩也就是我們建立得視覺規范中的基礎色板,在選色時候需注意,要有有明確的心理預期,比如醫療行業中常用藍色和綠色,就是符合預期的顏色。在基礎色板里選擇調色,應選擇兩個相同級別的藍色和綠色;基礎色板里選不同顏色時不要超過三個級別的跳躍;當選擇一個確定的顏色時,可以選擇草綠或者青綠色來作為輔助色;在基礎色板里,最頂部的顏色最適合做背景色,中間的顏色適合做按鈕色,底部的顏色適合做狀態色,或者小面積文字的填充色,其余就是搭配過度的作用。再比如零售、比如金融行業的產品,會選擇不同的顏色,那這些顏色代表了什么,是不是會和企業的VI色是有相符之處,這些都是我們去要考慮的。


          4.1.2 注意色彩的兩個特性


          01. 注意品牌性:體現特性和傳播理念、價值觀:比如宜家,我們立刻會想到的是黃色和藍色。比如京東,我們會想到紅色。如果是餓了么,我們會想到藍色。這些都是標識性的色彩,體現和傳遞的就是品牌理念和價值觀。這些顏色一定不是隨便選的,比如,宜家的黃色和藍色,其實是瑞典的國旗的顏色,代表著宜家的來源地來源于瑞典,因為瑞典是一個很強調簡約設計的國家,貫穿始終是在強調它的的價值觀。一些關鍵行動點:比如選中的狀態,按鈕的顏色,在很重要的地方用主色表達,這就是在體現B端的產品的色彩價值觀和企業價值觀的地方


          02. 注意色彩的功能性:色彩需要體現功能有明確的信息以及狀態含義,色彩代表它獨特的含義,比如成功色,通常會選擇綠色,再系統色板里,青綠草綠都可以選。比如出錯/刪除/失敗用紅色,表示警告警示。比如鏈接要用藍色。


          4.2 圖標規范

          畫圖標要注意圖標的識別性、統一性和獨特性。圖標首先要一眼看出來表達的含義,其次是圖標設計圖標的大小,線寬粗細,圓角大小,圖標風格等這些都需要統一,最后最好可以體現出圖標的獨特性,獨特性就是差異化,這也是品牌三遠法得核心,塑造產品的差異化,具體分析方法也可應用在圖表設計當中,比如根據品牌基因進行延展,也可根據主風格主視覺設計定調,設計出獨特風格且符合產品定位得圖標應用在產品當中。


          4.3 文字規范


          4.3.1 字體家族

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


          4.3.2 主字體

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


          4.3.3 大小與行高


          方法一:在Antdesign中規定的,比如字體大小是14px,行高就是22px。規范里最小字體是14px,但可能有注釋字體,字號最小是12px。表格里的內容是按照表格里的行高來約定的,與字體行高無關,這個前提是,不在表格里內。當沒有出現文本字體,表格里的字體的時候就需要去設置字體的行高,Figma里默認行高是140%,比如14px字體,行高就設置成22。這是Antdesign里的規范,但不是唯一的規范。需要注意的是,如果使用一個標準就全部使用一個標準,這個需要把選中文字段落進行調整行高。


          方法二:是當按倍率去算的行高規范,方法步驟是先調整好行高,去改變字體大小,比如無行高時,1/100%/1倍行高,注意加上%號;緊湊行高,1.3行高/130%;常規行高1.5行高/150%;寬松行高,1.7行高/170%。


          4.3.4 文字的層級關系

          輔助文字12px、正文(?。?3px、正文(常規)14px、小標題(16px,小標題是相對于14號字出現的)、標題18px、主標題20px


          4.3.5 字重

          比如常用的蘋方有6個字重,但在平時的設計中根本用不上。中文環境6個字重在實際顯示并沒那么好,常用兩個字體,萍方常規體400(常規),蘋方中黑體500(粗體)。而英文可以用粗體600。


          4.3.6 字體顏色

          在深色背景下、和淺色背景下不同內容的色彩透明度不同,具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下,字體應該使用白色還是黑色,應該按著規范嚴格使用,難點在顏色相近的時候選擇白色還是黑色,也需按照規范執行。


          4.3.7 文字對齊關系


          文案類對齊:頁面的字段、段落較短標題、需正文左對齊


          表單類對齊:保證整齊適合閱讀,冒號對齊法找到中間的冒號,(左右對齊),如果全部使用左對齊或者右對齊會更亂。左邊一般最長字段六個字。前提是中文環境,不是國際化。冒號左右要留多少像素:8px的倍數相關值,4(窄點)、8(正常)、12、16(寬一點)都可以。


          數字類對齊:日期,居中對齊;年齡,居中對齊/左對齊;非固定的數字:價格,采用右對齊,因為右對齊很容易看到價格的多少,哪個超出的更多,就越貴的,更容易區分數字的多少。


          4.4 層級規范


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


          這里需注意,關于投影,再前端角度考慮盡量不要用太多的特效濾鏡來設計,因為在B端網頁中,瀏覽器的兼容性不好,比如用ie瀏覽器就根本看不到這樣的效果,如果用谷歌瀏覽器能看到,用safri瀏覽器能看到,但在火狐下等又會看不到,想要都看到就需要兼容很多代碼,需要前端加很多代碼實現兼容性的效果,很增加前端的工作量,所以在B端很少用非標準型的濾鏡代碼使用,雖然可以實現,但一般不太用,一般就是變灰、變深、變透明度最簡單的方法實現。不同于移動端,因為IOS用的是原生的開發,所以不存在這個問題。


          從接觸B端設計兩年以來,第一次詳細梳理B端設計的系統知識點,從B端產品設計的工作流程,到B端設計前的準備工作,交互設計的七大定律,B端產品業務調研,用戶訪談研究方法,精準推導B端用戶畫像,到B端產品主風格的設計定調,進而深度理解B端主流組件庫的視覺規范,為B端產品設計做出了充分的指導作用,對比我之前零散的知識記憶,這次B端設計前的準備工作梳理,也更加深刻的由點及面的形成了系統的框架,也重新認識了B端產品的分析方法,區別于之前一直從事的C端設計工作,也真正對B端和C端在設計思維上有了本質的區分,同時也鍛煉了我的歸納能力和演繹思維和系統思維能力,期間參考資料有《B端設計研修》、《用戶體驗要素》、《信息架構設計》,謝謝閱讀,希望對大家也有幫助~thanks


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

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

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          如何定義用戶體驗研究方法

          ui設計分享達人

          用戶體驗研究可幫助企業了解目標受眾的需求和行為,證明或反駁潛在假設,使他們不會根據虛假信息繼續前進,并根據數據戰略性地發展他們的產品。最終,它幫助他們創建和維護能夠吸引和留住客戶的產品,從而使企業取得成功。但是,您實際上如何確定用戶體驗研究項目的最佳方法?

          本文分享了四步框架的概述:(1) 確定您想學習的內容;(2) 確定您要針對的對象;(3) 考慮時間表、預算和團隊;(4)選擇方法。

          1. 確定你想學什么

          讓我們從第一步開始——確定你想學習什么。此時有3個問題:

          您是在嘗試探索想法還是評估想法?

          探索性研究,也稱為生成性研究,通常發生在產品設計和開發過程的開始階段。它提供了對客戶問題、需求和動機的深入洞察,幫助您確定構建什么、如何構建以及目標對象。

          評估研究通常發生在產品設計和開發已經開始或產品發布之后。它評估產品的功效和可用性,幫助您確定痛點和改進機會。

          您是在收集與新產品還是現有產品相關的數據?

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

          如果您正在嘗試確定如何改進和改進現有產品,則評估研究將是最佳選擇。

          這是一項獨立的研究工作還是更大項目的一部分?

          探索性研究通常是在推進產品創意之前自行進行的。

          評估研究活動往往是在正在進行的設計和/或開發工作的背景下進行的。

          2. 確定您的目標對象

          現在讓我們進入第二步——確定你想要定位的對象。這是該過程的關鍵部分。只有與合適的人一起進行研究,您的研究見解才會有價值,因此您需要注意尋找能夠提供您所需觀點的參與者。此時有3個問題:

          誰是目標受眾?

          定義你想要接觸的人的特征。例如,您的目標受眾可能是向消費者銷售產品或服務且每月在數字廣告上花費不到 1,000元的小型企業的所有者。

          您是否已經可以訪問此受眾群體?

          如果您正在對現有產品進行研究,您可以利用現有的客戶群。

          如果您正在研究新產品或嘗試接觸新的客戶群,則需要探索其他選擇來接觸目標受眾。

          如果沒有,你怎么能接觸到有代表性的受眾?

          您可能會考慮使用自助招聘工具,如用戶面試或與招聘機構合作。

          3. 考慮時間表、預算和團隊

          現在讓我們進入第三步——考慮時間表、預算和團隊。所有項目——不僅僅是研究項目——都有限制,重要的是在考慮這些限制的情況下定義你的研究方法。不過,約束不一定要受到限制。它們實際上是一個有用的工具,可幫助您專注于如何利用可用資源來產生最大影響并提供最大價值。

          時間線

          對于您的時間表,您想確定您是否在特定的截止日期前工作,例如即將舉行的董事會會議或產品發布。

          預算

          對于預算,您需要確定哪些資源可用并且可以分配給該項目。當您考慮預算時,不僅要考慮人員成本,還要考慮任何補充研究成本,如招聘費用、參與者薪酬和工具,這一點很重要。

          團隊

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

          4. 選擇方法

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

          范圍

          對于范圍,您首先需要確定是要使用單個方法還是多個方法。利用多種方法可以收集更廣泛、更細致的數據集,但也更昂貴和耗時。您還需要確定是要進行長期研究還是需要立即獲得反饋。

          長期研究將是最適合的探索性研究,你需要建立的觀眾基礎的了解,然后才能繼續前進。

          即時反饋 最適合評估性研究,在這種研究中,您希望在繼續之前獲得投入的正在進行的工作。

          數據

          對于數據,您首先要考慮哪種方法最適合目標和受眾。

          如果您正在探索新產品的想法,您可以從采訪開始。如果您正在收集有關原型的反饋,并且需要盡快從受眾那里獲得反饋,您可以利用簡短的未經審核的可用性測試會議。

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

          您使用的方法將取決于您嘗試獲取的信息類型,以及與您合作的時間表、預算和團隊。

          每個研究項目都是獨一無二的。但是定義方法的過程在不同項目中是相似的。如果您對進行研究感興趣,我鼓勵您利用上面概述的四步框架來幫助您找出最佳的前進道路。一旦您有了基本的構建塊,您就可以繼續制定更精細的研究計劃,其中概述了具體的假設以及您將如何執行工作。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:對啊設計君
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合