<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>

          首頁

          淺談Windows 11用戶體驗設計中的不足

          ui設計分享達人


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

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

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

          藍藍設計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到微信等全球主流的應用也都推出了深色模式。



                      


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


                       

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



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


          但是,事實并非如此。對于一些有散光的人來說,在某種程度上深色模式對他們的眼睛來說更糟糕,深色模式比淺色模式更友好更健康的科學仍有待討論。斯坦福·拜爾斯眼科研究所的眼科專家對此表示:“鑒于文獻中的數據,我認為深色模式對眼睛沒有任何的友好和健康?!?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 什么是私域流量

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


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


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


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



          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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          可視化設計十要素-風格篇

          ui設計分享達人

          致數據可視化設計師-風格篇詳解


          本片文章共8000字,閱讀大概需要25分鐘。


          各位數據可視化設計師們大家好,鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方,阿勇決定花一些時間去詳細剖析一下關于這方面的知識,全部都是多年工作經驗所得,絕對有料。


          整個合輯一共有10篇文章,分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章,詳細的講一講可視化大屏設計的知識點。


          風格篇主要包含:常用風格 > 風格解析 > 風格選擇 > 風格應用。


          本篇文章將會從風格分類入手,進行風格解析,總結可視化設計的風格,選擇風格并應用到場景,教大家如何選擇合適的風格應用到商業可視化項目中。


          畫面中的動效GIF圖會比較大,請大家耐心等候加載~



          總結了商業項目中遇到的一些可視化案例以及科幻可視化風格,大體的將其分為三個大類:傳統風格、HUD風格、FUI風格。



          • 傳統酷炫風格


          傳統狹義上的數據可視化, 更多是純圖形去代表數據,通過圖形去展示數據,直觀的展示所需要表現的指標。數據可視化也有很多分類, 不過也許你也懶得了解了。


          比如,網站后臺分析,可以說是可視化分析報表類的,例如百度統計,谷歌統計等等;比如,面對B端后臺的數據可視化,國內做的最好的無非就是antdesign,element;我們此處說的是基于G端的數據可視化大屏,G端數據可視化從本質上來說是注重直接解決問題,通過直觀的展示數據圖表去了解各個指標的詳細數值;


          也有甚者比較注重視覺效果,要酷炫,心理學家說, 人腦70%的神經信號來自視覺, 我們的視覺系統最完善, 而不同的感官之間, 多少是可以轉化的, 而且是每個人的天性。國內傳統可視化對于此處的接受程度確實不一樣。B端和G端的用戶,對于可視化風格的接受程度確實是不太一樣的,B端對于前沿技術以及可視化表現會有一定的接受能力,但是G端更多注重于界面酷炫,功能反而不是很重要了,這多少有點本末倒置的感覺。

          undefined


          在傳統可視化面前,頁面的雜糅程度較強,彷佛是由一塊塊圖表堆砌而成,比較注重色彩的運用,多色搭配,色彩一般具有特質。一般大多數可視化可以看到共同的點就是:配色/布局/構圖,機械而又重復,彷佛一個流水線生產出來的。當然,現如今新基建乃是主流,人群對可視化大屏的認知和審美也在逐漸提升,設計師在以后的工作中還需要取長補短,多吸收一些好的東西去豐富我們具有中國特色的數據可視化大屏設計。



          • HUD風格


          平視顯示器(Head Up Display),以下簡稱HUD,是運用在航空器的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要要的重要資訊。平視顯示器最早出現在軍用飛機上,降低飛行員需要低頭查看儀表的頻率,避免注意力中斷以及喪失對狀態意識(Situation Awareness)的掌握。


          因為HUD的方便性以及能夠提高飛行安全,民航機也紛紛跟進安裝,汽車也開始安裝,在一些游戲用戶界面,很多地方都會采用HUD的風格,比如射擊類,格斗類,動作類游戲等等(賽博朋克,堡壘之夜,絕地求生)。


          在設計的細節當中使用大量的圖形元素,并輔以一定的裝飾元素,主要以點線為主裝飾,排版版式參考價值較強。HUD相比較于傳統和FUI來說,更貼合我們的日常設計,對于圖形的展示也更加的有意義,所以透析HUD風格,對于提升可視化設計水平有很大的幫助。



          • FUI風格


          相對于當前流行的扁平化設計,FUI可謂是在Ul設計中獨樹一幟,設計風格十分鮮明,極具未來感和科技感。


          FUI是一個非常有趣的Ul設計領域,是我們在日?,F實生活之中天法探索的用戶界面設計方式。在我們的日常工作中,通常日常設計很難有機會為宇宙飛船、時間旅行設備,或者感知型人工智能和外星人使用的用戶界面做設計。FUI使設計師有機會去突破現有的用戶體驗和用戶界面的限制,探索一個新的領域。通過虛幻界面設計我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想AR技術的應用,地圖可以采用全息投影技術、人與智能硬件的環境交互等等。


          虛幻界面設計甚至可以是新的發明,它們可以作為一種概念的驗證它們可以啟發我們,提出問題,探索什么可行,什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣,虛幻用戶界面可以激勵人們為未來創造技術。


          FUI的圖形裝飾元素可以說是極其豐富,形式感很強。在設計的細節當中使用大量的“異形”的圖形元素,并輔以一定的裝飾元素,但是一定程度上對于設計中繁瑣的需求,需求層次上尋找設計靈感沒有太多幫助。常用在科幻電影以及概念游戲等領域,落地較難。



          • 升華:如何培養出自己的可視化設計風格


          如何培養和完善自己的可視化設計風格呢?其實這個問題有點狹隘,不同客戶不同使用場景我們可能風格都會不太一樣,但是唯一我們不會變的是我們對于組件圖表的理解,圖表圖形的展示形式。


          傳統風格:多種色彩

          FUI  風格:科技圖形

          HUD風格:版式排版


          一個合格的可視化設計師,對于任何可以參考的頁面,都可以迅速領略到可以應用的部分頁面和展示形式,多吸收知識,提升自己,這就是取其精華,去其糟粕的正確解答吧!所以要將現有風格結合,完善設計理念,提升視覺技法,這才是當下比較重要的。 



          最近由于工作中的一個項目,對自己充滿了懷疑,究竟什么叫科技感?不同的應用場景,科技感是否還依舊有效?同展示條件下不同應用場景,又會有什么樣的差異?究竟是什么樣子的設計,才能被“甲方爸爸"認定為科技感十足,并且很酷炫呢?從酷炫科技感出發,總結了以下四個方面去解析科技感風格。


          • 科技感的界面有哪些特征?

          • 同展示條件下不同應用場景,又會有什么樣的差異?

          • 三維的表現形式,是否真的跟科技感成正比?

          • 面對段落文本需求,列表需求等如何把頁面做出科技感?



          01 科技感的界面有哪些特征?


          相信很多可視化設計師聽到最多的一句話:要酷炫,要科技感!每每聽到這句話我都會變得非常暴躁。究竟是酷炫科技感代表可視化?還是數據可視才是可視化的內核?每每遇到這種令人糟心的問題,我想的是如何通過自己的專業知識去解釋,可是我發現根本解釋不清楚,也無法令甲方客戶信服,甚至和同為乙方的總包也無法達成統一戰線。那么我們應該如何去做呢,又應該如何去解釋科技感這個抽象的概念呢?



          • 1.1 配色 


          提到科技感色系一般我們想到的就是藍色系(科技藍),但是很多人可能走進了一個誤區,科技感的專屬色彩并不是只有藍色,而且一些藍色確實讓我們有審美疲勞的感覺。如圖,就是我們比較常見的傳統可視化設計,一眼看去滿屏都是藍色,具有中國特色的藍色科技感。正如所有人都公認的黨建題材為紅色加黃色,那么科技感真的只有藍色專屬嗎?黨建題材都是紅色專屬嗎?


          由此可見,紅色并不是黨建題材的專屬色彩,存在即合理,也并沒有說黨建可視化一定要做成紅色的。制約的因素有很多:項目背景,項目需求,設計提案,專業認知等等,可視化大屏歸根結底還是做的是服務設計,因此服務好客戶,得到客戶的認可,就能體現設計的價值。但是在設計稿中可以發現,界面運用到了一些黨建色彩的元素,也是通過這種方式去展示,這也是設計師需要注意的一點。


          • 傳統科技藍風格可視化


          • 其他科技藍風格可視化


          • 橘色科技感風格可視化

          undefined


          由此我們可以推斷,配色是塑造科技感界面的一個比較重要的因素。色彩的選擇需要根據實際所運用到的場景,比如安全行業,藍綠色會比較好一點;比如公安行業,傳統藍色就比較合適;比如衛星地圖,用藍色就不合適;根據不同的業務范疇以及不同的應用場景去確定配色,這才是我們要做的。


          藍色并不是科技感的專有屬性,任何一種顏色都是可以塑造科技感的感覺的。比如適合用綠色的場景做的界面,沒有做好看,那只能怪自己學藝不精,跟配色無關。不排斥藍色,但是討厭到處都是用藍色,上來就是用藍色。



          1.2 背景 


          說到背景這是一個影響科技感非常重要的因素,一張超神比比皆是,一張超鬼也是隨處可見,究竟什么樣的背景才是一個優秀的可視化界面所具備的?不是畫面發光,有閃光點,宇宙或者銀河那種圖;也不是科技點線,帶漸變的線條(混合工具做出來的那種)看起來就特別復雜;也不是那種亮度超過畫面任何一個元素的圖。


          科技感的背景所起到的作用應該是襯托畫面,而不是在畫面中比較跳,搶視覺,一大坨發光或者復雜的圖形,只會起到反作用。


          一個好的背景一定是不影響視覺的同時,襯托畫面和主視覺,如果整個頁面分黑白灰三層,那么背景一定是黑的那一層,這樣的畫面效果才會好。



          1.3 圖形 


          圖形應該是以上指標中,最令人可以接受對科技感風格詮釋的一種,科技感的圖形到底有哪些特征,我們又該如何去做呢?


          通過以上案例我們可以發現,所謂圖形表現科技感,最大的特征就是點線面應用的多元化,通過一種或者多種規律將點線面組合起來,線條粗細長短不一,點大小不等。在使用圖形進行點綴搭配時,切不可過于花哨,從而搶了主要內容的風頭。


          不規則圖形,點線裝飾,色彩,外發光,都是圖形詮釋科技感的方式。


          此處可能會出現一些三維樣式的圖形,特殊的視角以及不常見的設計都會增加科技感的元素,但是也不是所有的三維都可以比二維更有科技感的。我最近做的就是甲方客戶一直覺得:三維元素太少了,科技感不夠。我就納悶了,到底什么才是科技感?難道科技感只能用三維的來表示了?只能說一定條件下,三維是優于二維展示的,但這也不是絕對的。如果你的場景主視覺本身就是二維范疇的,何必要要求組件三維展示。


          下圖的二維科技感表現上肯定是超過三維地球的,至少我是這么認為的。



          1.4 動效 


          動效應該是最能體現科技感的方式了,通過動態演示組件,通過動效展示界面,遠遠比靜態頁面要合理的多。動效主要是通過:位移、旋轉、透明度(閃爍)、縮放等方式去制作,形成獨特的動畫節奏。


          最常用的科技動畫:粒子動畫,線條動畫,輝光,剪切路徑,偏移字符等等。


          可以發現科技感動效一般都伴隨著極快的閃爍動畫,動畫的節奏也是比較偏快,再通過出現動畫,字符偏移,剪切路徑等演示組件的形成過程。



          02 同展示條件下不同應用場景,會有怎樣的差異?


          可能大家沒有遇到過這種情況,比如在三維建筑可視化中,科技感本身就依賴于場景的表現,但是不知道大家有沒有試過,將三維建筑可視化換成二維GIS之后,我們如何去使畫面表現的更具科技感呢?


          圖一,圖二,圖三分別就是替換不同的場景,那么我們來看看這些場景為什么不適合原本的之前的科技感風格呢,我們一起思考一下~


          以上三張圖可以看出,圖一的飛機可視化是畫面的原稿,后兩張是在同一種設計面板,替換了不用的主視覺場景,由此可以看出不同主視覺場景可能對應不同的風格UI組件,沒有通用的組件,如果想完美表達一些面板組件,那么需要取設計不同風格的主視覺場景才可以。


          大家可能會覺得科技感只針對于一些特殊的場景,或者說是深色場景,比如一些實景地圖和衛星地圖又該如何去表現科技感的元素呢?那么如果是淺色可視化我們又該如何去做科技感呢?


          科技感風格應用于不同的場景,那么表現科技感的方式也是有很大的不同的。



          03 三維的表現形式,是否真的跟科技感提升成正比?


          其實這本身就是一個偽命題,三維表現對畫面的沖擊力是非常強的,對于畫面視覺效果的提升有很大的幫助。不過是否所有的三維就是最合適的呢,這個也確實有待商榷。不過能肯定的是,一定程度上,三維一定會比二維更加具有沖擊,更加具有科技感。


          首先必須要確定的是,此處三維一定是科技感點線組成或者說是線描類型的三維主體,而不是實景以及仿真的主體,當然并不是絕對的,此處針對大多數場景下。


          可以通過以上圖片看出,科技感一定伴隨的是大量的點線裝飾,畫面主體一定是最突出的地方。而不是有時候遇到的是:GIS地圖就是很普通的樣式,可編輯性不是很強,樣式也比較老舊,對設計就會造成大量的困擾。在主視覺沒有完美表現的時候,就不要強求說把兩邊去做好看,主視覺不好看,那么圖表做的特別華麗也只是讓主視覺更掉分。


          其實最正確的表現就是二維表現加上三維場景展示,兩者相輔相成,對于畫面的展示才是最好的。通過下面這組案例可以發現,二維表現加上三維場景才是最優解。



          04 面對段落文本列表需求時如何把頁面做出科技感?


          很多同學對于文字需求如何制作科技感有很多的疑問,通過最近的作圖,總結出四種關于文字排版科技感的展示,總結起來其實就那么幾點:裝飾,圖形,字體,版式,表現形式...


          其實對于數據可視化設計科技感的研究,不僅需要了解表現層,更需要上升到業務層。一些特定的圖形或者裝飾,對于畫面的豐富程度一定是有幫助的。


          講了這么多,不知道對大家理解科技感是否有幫助,如何提升畫面科技感,是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中,多多酷炫,多多科技感!??!



          1、根據場景-了解展示需求


          場景是什么?是人物、時間、地點三要素所組成的特定關系。在某某時間(when),某某地點(where),特定類型的用戶(who),干了某某事情(what)。


          因此我們要確定的是,根據這四個“W”去確定整體業務框架的基礎構成,這對于設計風格的初步意向確認有著很積極的意義。


          who:王局長

          when:領導人會議時

          where:公安局

          what:新基建建設 數字化轉型事項


          在領導人會試上,公安局王局長提議通過了關于新基建,數字化轉型的各種措施。面對這一場景,有以下幾個問題。受眾是誰?需要干什么事情?誰去干?數字化轉型怎么做?怎么實現?需要用到的技術?展示風格?重功能?還是重展示?


          在有了這些的前提下,對于我們設計風格的選擇就有了很強的指導意義,比如王局長比較喜歡多色搭配,科技感強的風格,主要為了配合展示匯報,那么就可以通過這一些需求,初步制定風格為效果酷炫的展示類大屏,但是主視覺的展示形式還是要根據其他的具體情況去進一步確認。



          2、根據含義-確立設計方向


          在面對一些特有的項目時,一般客戶會給出一些參考術語:“3個一帶”,“2個方針”,“八大成果”“三山,兩水,百林,千田”......


          面對這種問題,能做的就是理解其包含的真實意義,究竟需要展示哪方面的,了解清楚項目的背景需求,結合客戶所說的一些關鍵字段,剖析以上的內容可以發現,客戶通過一些方針和方法,對“山水林田”進行治理,取得了一些階段性成果。


          因此展示的內容可以確定為智慧治理,或者智慧生態方向的,然后就可以根據項目背景的內容去選擇可以應用的具體的一些方案了。



          3、根據需求-明確設計內容


          因在到了需求分析的階段,可以根據客戶提供的大量的資料和業務需求,去明確的設計方向,究竟是需要展示哪些內容?可以提供的數據有哪些?展示條件(硬件設施)是否具備?想要的效果有哪些?


          比如客戶需要查看到山水林田的各個改進措施的效果,以及改進前后的效果對比。說到這單純的二維GIS和影像已經不太好滿足了,那么可以將場景風格定位到三維展示,需要實際1:1建模,至于是通過WEBGL,UE,UNITY就看各自的團隊擅長的方向了。


          場景大體風格確定,那么展示面板需求根據場景去搭建就可以了,這樣一個完整的風格選擇過程就算初步走通了,具體的驗證環節,可以在一次次會議中再去進行交流和修改即可。




          • 二維GIS(深淺)、衛星影像


          優點

          展示容易,風格切換皮膚多,可編輯性高,開發難度低,地圖資源較多,適合快速搭建可視化大屏模版,開 源內容較多,前端開發直接調用樣式即可。


          缺點

          展示形式較普通,地圖風格樣式不出彩,設計效果也會打很多折扣,很難與同行拉開差距。


          難點

          開發過程中可能需要基于高德API以及一些平臺,對封裝地圖進行二次開發,沒有GIS開發經驗的前端,會比較困難。


          網址

          https://lbs.amap.com/product/mapstyle#/  Mapbox,高德API,百度API,超圖,天地圖等等。


          以高德API為例



          • 矢量地圖、省市區塊


          優點

          展示靈活,可下載svg矢量區塊,并可下載json文件直接交付開發,可下鉆到縣級,可編輯性高,一般會結合二維GIS來展示,有插件可以直接繪制全國地圖。


          缺點

          不夠立體,可選樣式比較少,畫面主視覺容易空洞導致畫面效果不強。


          難點

          開發對于設計圖的一些效果還原比較困難,例如發光,漸變等等。只能做一些比較基礎屬性的修改,對于效果還原可能達不到80%以上。


          網址

          http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4


          以DATAV地圖下載器為例



          • 矢量地圖模型、省市區塊


          優點

          展示效果好,三維場景,有立體效果,材質貼圖不同效果會完全不一樣,可編輯性較強,相比較二維更推薦這種表現形式。


          缺點

          三維范疇,不會三維知識的小伙伴會比較難,此處會涉及到三維軟件合并擠壓,展UV,漫射貼圖,QGIS制作高度貼圖,PS制作法線貼圖等等知識點。


          難點

          對于不懂三維的小伙伴比較困難,涉及知識點較多,容易一知半解。


          教程

          https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA(原作者已授權)


          3D地圖建模及貼圖的制作獲取方法



          • 三維模型、城市建模


          優點

          展示形式新穎,展示效果非常好,三維表現往往讓人耳目一新,對于可視化的展示可以說是所見即所得,深得客戶喜愛。


          缺點

          開發難度高,專業性人才比較少,懂三維的設計也是非常的少,對于三維知識以及引擎開發知識需要比較熟悉才行。


          難點

          人才稀缺,入門難,做好更難,教程自學難度有點大,例如cityengine程序化建模,houdini程序化建模等等。


          教程

          https://space.bilibili.com/21247145?from=search&seid=10582171815506234319


          cityengine程序化建模



          • 知識圖譜、數據中臺等


          優點

          主視覺效果強,特殊場景的處理能夠很完美的講清邏輯,對于圖形化的理解有很強的意義。


          缺點

          邏輯復雜,難懂,比較抽象,專業難度高,對業務理解能力需要很強。


          難點

          邏輯處理比較難,設計效果比較難以想象,設計容易偏離主題,比如數據中臺,是一個非常虛幻的東西,很難講清楚處理邏輯和過程。


          網址

          https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html


          以知識圖譜為例



          知識點總結


          可視化風格三大分類以及對于圖形的應用(傳統、HUD、FUI);

          如何培養自己的數據可視化設計風格(色彩+圖形+板式);

          影響科技感風格的四大影響因素(配色,圖形,背景,動效);

          設計風格的選擇以及確定思路(根據場景、含義、需求);

          可視化風格的應用以及拓展(各種主視覺的應用優缺難點)。


          講了這么多,不知道對大家理解科技感是否有幫助,如何提升畫面科技感,是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中,多多酷炫,多多科技感!?。〔恢来蠹矣袥]有一種錯覺,突然有一段時間,某個時候發現自己突然不會做設計了,啥也想不明白了,莫名的有點浮躁,做什么都不能專心。其實很簡單,總的來說就是,你即將突破現有的設計水準,如果能想明白,解決掉問題,你的審美以及設計水平都會有很大的進步。這就是別人口中的,突然就會了,知道怎么做了,其實無非就是積累夠了,需要升入下一個等級了~


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

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

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

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



          可視化設計十要素-設備篇

          ui設計分享達人

          致數據可視化設計師-設備篇詳解


          各位數據可視化設計師們大家好,鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方,阿勇決定花一些時間去詳細剖析一下關于這方面的知識,全部都是多年工作經驗所得,絕對有料。


          整個合輯一共有10篇文章,分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章,具體的詳細的展開來講一講可視化大屏設計的知識點。(我命名為可視化設計十要素)


          同時也會包含一些工作中的同學們問我的一些問題以及我搜集的一些問題,將會以問答的形式去給大家講一講,如有不對的地方,還請大家指出,我們一起探討進步!


          文章較長,請廣大讀者仔細閱讀,基本涵蓋:設備信息,分辨率尺寸,大屏適配,投屏事項,掌握本文可應對日常可視化設計設備方面的知識。



          LED屏幕

          政府大屏主要以點間距去區分屏幕的精細度,點間距越小,造價約昂貴;面積越大越整體,造價越高。離屏幕越近顆粒感越強,設計效果也就越不清晰,LED顯示屏表面不平整是導致LED顯示屏圖像失真的主要原因。LED顯示屏表面粗糙度的好壞主要取決于生產工藝。

          屏幕介紹:按照不同點間距進行分類,P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20(間距越小,圖像越清晰,價格也越高,一般政府led屏基本都在P1.25-P6之間)。

          最佳視距=像素間距/(0.3~0.8),這是一個近似范圍。如LED顯示屏P16mm,最佳視距為20~54米。


          液晶拼接屏

          拼接屏相比于點間距比較小的LED屏,價格方面會更便宜一點,拼接屏設計時最主要就是拼縫的處理,注意拼縫,設計時非必要情況下,都要跳過拼縫,尤其是“圓”這個造型。

          拼接屏:46寸,55寸  物理分辨率:1920*N 1080*N(n代表屏幕數量),1.7mm、3.5mm 、0.88mm、0.44mm、無縫隙;企業常用(1.7mm 和3.5mm)

          大屏拼接縫隙:設計時應盡量不要跨屏去設計,會使畫面交叉,不重疊,尤其是圓形。


          大屏拼接處理器

          大屏拼接處理器主要功能是將一個完整的圖像信號劃分成N塊后分配給N個視頻顯示單元,完成用多個普通視頻單元組成一個超大屏幕動態圖像顯示屏。大屏拼接處理器輸入信號數量和類型取決于用戶需要,輸出信號數量等于顯示單元數量。


          視頻矩陣處理器

          矩陣是將多路輸入信號切換輸出到多個顯示設備,一般來說輸入信號數量要大于輸出信號數量。(我們想在9塊顯示器上同時監控100個攝像頭傳來的信號,就用矩陣來實現即可)


          視頻矩陣是指通過陣列切換的方法將m路視頻信號任意輸出至n路監控設備上的電子裝置,一般情況下矩陣的輸入大于輸出即m>n。有一些視頻矩陣也帶有音頻切換功能,能將視頻和音頻信號進行同步切換,這種矩陣也叫做視音頻矩陣。


          模擬視頻矩陣的輸入設備:監控攝像機、高速球、畫面處理器等很多個設備,顯示終端一般監視器,電視墻,拼接屏等(通常視頻矩陣輸入很多,一般幾十路到幾千路視頻,輸出比較少一般2-128個顯示器;例如64進8出,128進16出,512進32出,1024進48出等)。


          總結:矩陣只能負責信號的切換,不能處理,不能做效果。大屏拼接處理器功能十分強大,具備矩陣功能的同時,還可以實現任意開窗、漫游、疊加、場景保存與輪換。


          液晶拼接屏的優勢 - 拼接處理器預設場景

          4*2大屏展示端,我們通過控制端,借由拼接處理器可以對大屏進行隨意開窗,漫游,疊加,畫中畫等效果。在控制端拖動布局,大屏會隨之改變布局,非常方便。下面我就借由我以前做過的一個項目幫助大家理解一下拼接處理器的優勢以及如何設定不同場景。


          如果你們企業還在因為屏幕適配以及尺寸問題而糾結,或者想展示:開窗,漫游,疊加,畫中畫等效果,毫無疑問你們應該選擇拼接處理器,這比傳統投屏方式更合適,更沒有比例不對的困擾。


          預設場景一

          把控制端的分屏進行編號,接下來移動控制端對應的編號區塊,就可以對大屏進行重新布局,圖中展示的正是我們的預設正常場景。場景為居中布局,左右兩側為圖表展示。


          預設場景二:任意窗口布局

          對控制端進行隨機布局,將主視覺模塊移動到左側四塊屏幕,圖表都集中在右側,由此我們就由預設場景的居中布局變成了左右布局,左側為主視覺。


          預設場景三:任意窗口漫游

          可以隨意的關閉大屏某個模塊的漫游,通過控制端進行屏幕的顯示以及不顯示。


          預設場景四:任意窗口平移

          畫面的任何一個模塊都是可以進行平移操作的,我們將模塊一和模塊五可以平移拖拽到任何一個位置。


          預設場景五:任意窗口疊加

          畫面的任何一個模塊都是可以進行疊加到屏幕任何一處,還可以控制模塊置頂和置底,非常靈活。


          WEB端大屏

          基于web網頁端的展示方式,通過在web開發,有需要時會投屏到大屏上去展示。設備比例一定不能差距過大,比如16:9的投屏到32:9的大屏就不是合適,解決方案可以是外接一塊1920的顯示器即可。


          此處要注意web端演示時,記得全屏顯示,瀏覽器邊框滑動條等可以不考慮,前端會做相應的瀏覽器細節考慮,設計按正常分辨率走即可。


          觸摸屏

          觸摸屏(Touch Panel)又稱為“觸控屏”、“觸控面板”、“觸控臺“,是一種可接收觸頭等輸入訊號的感應式液晶顯示裝置。


          當接觸了屏幕上的圖形按鈕時,屏幕上的觸覺反饋系統可根據預先編程的程式驅動各種連結裝置可用作控制端操作大屏,原理等同于ipad控制,只是載體不同。


          設計規范以及按鍵反饋等交互體驗與ipad類似。



          滑軌屏

          滑軌互動屏系統——又稱為滑軌電視、滑軌播放等,通過特殊設計的機械滑軌控制裝置,結合高清液晶拼接幕墻,實現對屏幕內容的互動控制?;瑒拥讲煌恢闷聊徽故鞠嚓P信息,包括圖片、文字、視頻等,是一種全新的互動展示形式,可與觸摸同時使用。


          虛擬沙盤

          虛擬沙盤/數字沙盤就是用計算機通過投影儀或者LED大屏顯示屏動態/靜態三維顯示:智慧交通、智慧市政、智慧農業、智慧物流、智慧停車、智慧公交、智慧公安、智慧交運等模型,這是一種高科技的模型操作員通過程序,可以隨意調整沙盤的尺寸、規劃區域、區域布置,快速展示多種全新的創意。


          具有三維顯示效果,并可以從不同角度觀察創意模型,篩選創意方案。注意虛擬沙盤和實體沙盤的聯動效果,實體沙盤為底,虛擬沙盤做效果疊加。


          分辨率:物理實際分辨率



          Q:原本設計尺寸是1920*1080,使用場景是PC端,同時在大屏中展示,尺寸為3840*1080,該如何適配?

          A:首先我們需要了解適配最主要的痛點就是:靈活,復用性高,可延展。

          圍繞這幾個點我們可以通過模塊化開發去做,將每個模塊單獨開發。我們設計師做這種需求之前,就需要提前去構思,在設計各模塊時,盡量使用可擴展和可自適應的圖形,這樣面對適配的時候我們可以通過移動,縮放這些模塊,來完成適配。盡量避免二次設計以及開發,提升時間成本。


          圖形放大適配


          圖形位移適配


          Q:如果是16:9適配非32:9是否也是這么去適配的?如果是特殊的形狀或比例該怎么適配?

          A:我們適配一定要記住靈活,減少工作量這些原則,如果不遵循這些原則,那么我們做適配的初衷就錯誤了。這樣我們還不如直接就重新開發一套了。就好比我們通過控制端去控制大屏,如何用開發一套的時間去適配兩個甚至是多個終端,這是我們需要注意的。當然考慮到一些實際情況,會有一定程度上的修改,但是一定是要從節省工作量去出發的。



          場景一:拼接屏分辨率計算,已知某項目設備分辨率為寬高4*2拼接屏,設計稿我們該如何去定義分辨率?分辨率又是多大?

          從命題我們可以看到4*2的拼接屏,我們可以通過一塊屏幕為1920*1080去計算,那么通過計算分辨率應該是1920*4 &1080*2,也就是7680*2160,這樣就計算出我們的分辨率了。


          場景二:LED屏分辨率計算,已知某項目LED屏幕物理尺寸為寬15米,高4米,設備分辨率未知(可以支持4K或者2K輸出),那么如何去制定分辨率?

          工作中相信不少同學都遇到過這種只知物理尺寸而不知道分辨率的項目,那么我們只能通過計算大概的設計分辨率來出初期的設計稿件。

          可能一:屏幕支持4K輸出,既然支持4K輸出,保證畫面輸出的清晰我們可以將設備的高度設定為2160

          此場景下公式為:15/4=X/2160     X=8100    那么可以大概得出寬度大概為8100像素(只是我們通過計算大概得出來的)

          可能二:屏幕支持2K輸出

          此場景下公式為:15/4=X/1080     X=4050  


          重點來了,不要以為這樣就結束了,我一直強調的可視化設計師為什么一定要在現場,為的就是方便各種測試。剛才我們只是通過計算得出的大概數值,此時我們可以在紙上畫一個正方形,并投到設備上,如圖。


          • 結果一:如果正方形比例不變,設計尺寸無限接近于大屏實際比例;

          • 結果二:如果正方形比例被拉伸,設計尺寸小于大屏實際尺寸;

          • 結果三:如果正方形比例被壓縮,設計尺寸大于大屏實際尺寸。


          此處圖片上主要是為了測試計算出來的分辨率究竟是拉伸還是被壓縮了,通過這樣的方式去測試設備大概的分辨率的大小比例,在我們產出效果圖之后,也可以投射設計圖的方式看看屏幕是否是完美適配,這種方法可以在未開發之前,盡可能確定屏幕對設計圖的影響,從而避免對開發造成大規模修改。

          注意:這樣做也只是在不知道設備分辨率的情況下,去大概計算設備分辨率,僅供參考!



          電腦直接投屏

          使用場景:會議室,展廳等

          等比例投屏,投屏電腦投到2*2大屏(4K)

          投屏電腦支持輸出4K分辨率,投屏電腦分辨率以3840*2160作為設計,投到4K拼接屏上,大屏會完美展示,并且畫面非常清晰。


          投屏電腦支持輸出2K分辨率,投屏電腦分辨率以1920*1080作為設計,投到4K拼接屏上,只會以1920*1080進行輸出,因為輸出像素只能支持2K,也只是1920*1080的放大。


          此處需要了解兩個概念:輸出像素和顯示像素,輸出像素指的的是投屏電腦的最大支持分辨率,顯示像素就是我們大屏的支持的最大分辨率。

          我們實際項目中最好以顯示像素的尺寸進行設計(就是以大屏尺寸為主),但是也要看輸出設備的像素大小。


          硬件投屏本地運行

          使用場景:科技展廳,以及一些帶主機的設備。


          此種情況,一般我們的大屏會自帶主機,大屏本身就可以看成一個顯示器非常大的電腦。我們如果需要進行可視化演示,那么我們直接就可以通過顯示器的尺寸去做設計,這樣就是大屏的設計尺寸。


          一般這種靠硬件的投射,都是在拼接處理器的處理下,將多個屏幕拼合成一個大的顯示器,再通過拼控系統(硬件投屏)進行輸出。


          一般我們可以將我們大屏的(UE4或者U3D開發)應用程序打包,打包成一個后綴為.exe的應用程序,在大屏電腦上直接點擊,程序就可以在大屏上完美的跑起來,也不需要去進行電腦投射大屏。


          控制端操控大屏

          如果通過控制端去控制大屏,那么投射設備就可以通過多種方式去展示了,可以是手機,平板,觸摸屏,手勢控制,體感控制等等。


          這種情況下投射設備的尺寸就按照本身設備的規范去設計就可以了(比如750*1334,2048*1536),設計尺寸就是我們大屏本身的分辨率就可以了。


          多主機多信號投屏

          此種情況主要使用場景:屏幕寬度非常高,并且內容可以分很多模塊展示,模塊彼此之間不受影響獨立展示,這種情況下我們就可以通過此種方式去投屏。


          通過多個主機分別去投射大屏的同等大小區域,比如圖中的場景模塊被我分成了四等份,我們就可以通過四臺主機去分別投射四個模塊,形成一個完整的大屏。


          此種大屏設計尺寸我們以輸出設備的尺寸為主要參考,四臺主機那么整體寬度就是1920*4=7680,高度就是1080(如果設備支持4k輸出,那么提升相應的設備尺寸*2就可以了)。


          不同比例投屏及解決方案

          Q:如果遇到一個設備是16:9,投屏到一個20:3比例的大屏幕, 那我設計尺寸以16:9,還是20:3?

          A:我們要記住,如果面對的是正常比例投屏到非等比的大屏,我們需要遵守的規范一定是:一切以大屏展示為主。所以我們設計尺寸一定是按照20:3來設計的,大屏展示正常才是我們的唯一標準,投屏電腦可能會出現的問題,我們只能妥協(投屏電腦可能只能展示很小的一部分,但也是沒有辦法的)


          那么我們遇到這種是否就沒有辦法了呢?在這阿勇給大家提供了三種解決辦法,在實際工作中,我也遇到過這種問題,所以在這給大家分享一下。


          方案一:外接顯示器(外接多個顯示器,一般主機可以另外外接四個顯示器,這樣就可以解決投屏電腦顯示不全的問題了)


          方案二:采用拼控系統,而不是用純粹的設備投屏(拼控系統完美解決了尺寸不一致的難點)


          方案三:設計兩稿,16:9,20:3我們都去做設計(做兩套系統,相當于做的適配)


          Q:請教大家一個問題,電腦的分辨率是3840*2160,單個大屏的分辨率是1920*1080,拼9*6的大屏,設計尺寸該設置多少啊?這樣設計尺寸會不會太大了,如何優化這個設計稿尺寸?

          A:前面的文章我們已經介紹過拼接屏的尺寸的問題,這個問題的解答:1920*9/1080*6 ,這個就是設計分辨率,通過計算得出,最終設計稿尺寸為17280*6480。可以看出設計分辨率確實太大了,設計的時候如何去優化設計尺寸呢?


          通過命題我們可以看出電腦分辨率是支持4K的,就是說輸出分辨率和顯示分辨率我們都是可以上4K的,而4K的分辨率一般會做3840*2160,再結合設計稿尺寸17280*6480,可以將整個效果圖尺寸縮小三倍,也就5760*2160。設計可以按照這個分辨率去出圖,最終交付給開發的就是切三倍圖,并提示開發是縮小三倍做的。


          總結:不管在面對什么尺寸的設計,都要記住,萬變不離其中,一切以大屏完美展示為準則,所有的一切都是要在大屏上觀看,為了完美展示,投屏電腦,設備控制等頁面可以適當的讓步。


          全篇知識點

          通過以上的知識點總結,不知道大家對于數據可視化大屏設計是否有了新的認識,數據可視化對于設備的尺寸,設備的信息,以及投屏注意事項,都要有更多的了解才可以。下圖就是總結本篇文章的知識點。


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

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

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

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


          HSB色彩模式,讓配色有理有據

          ui設計分享達人


          念起

           

           

          作為一名UI設計師,不免每天都會和色彩打交道,但有時總會苦惱于色感把握不準,讓我們配的色彩,總是“不對味兒”。我結合在近期的一些項目中對于HSB色彩模式的應用,與大家分享一些結合HSBHSV)色彩模式幫助我們進行配色的理論和技巧。也歡迎大家一起討論,共同進步。


           

           

          色彩模式有哪些?

           

           

          我們生活中借助觀看而感覺到的“色彩”,可分為光加上顏色之后所透出的“透出色”,以及光照射到物體上反射出的“反射色”。


          透過色是以“加色混合”的方式,由紅、綠、藍,共三色混合,表現出各種的顏色,我們的計算機屏幕就使用這種方式表現顏色。這種色彩表現方式,稱為RGB色彩。


           

          ▲圖《設計入門教室-色彩設計的原理》

           

          物體色彩的反射色,是用畫具或染料、油墨等“色材”來表現顏色,印刷品基本是由青、洋紅、黃、黑四種油墨相互組合而成,所有的顏色皆以“減色混合”的方式表現,這種方式稱為CMYK色彩。


          RGBCMYK兩大色彩模式是最重要和最基礎的。RGB更是與我們的工作密不可分??墒?,在實際工作中我們往往很少直接通過RGB模式進行調色。



          簡單聊聊HSB色彩模式

           

           

          1.HSB是什么?

          「這是什么顏色?鮮不鮮艷?很亮還是很暗?」當我們看到一個顏色時,往往心中都會閃現這三個問題。

          事實上,人類對于色彩的第一個感知往往是從色相(Hue)開始,即紅色橙黃色綠色青色藍色紫中的一個,然后是它的深淺度。

          HSB模式對應的媒介是人眼,在選擇色彩這件事上,HSB使用了更貼近人類感官直覺的方式來描述色彩,它把顏色分為色相、飽和度、明度三個因素(將我們人腦的“深淺”概念擴展為飽和度和明度)。

           

          H—色相/色調:顏色的相貌,顏色的調性,在標準色輪上,色相是按位置度量的,取值在0360度之間(黑色與白色無色相)。

           

          ▲圖網絡圖片-圓形色相環


          S—表示飽和度/純度:顏色的純度,取值在0100之間,飽和度高色彩較艷麗。飽和度低色彩就接近灰色。


          B—表示明度/亮度:顏色的明暗程度。取值也是在0100之間。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到純白,最低得到純黑。

           

          工作中,我們常用的設計軟件ps、 Sketch都是通過拾色器幫助我們選擇需要的顏色。

          ▲圖軟件拾色器截圖


          HSB模式,可以完美固定HSB中的某一個參數,只對其他兩個參數做改變或者只改動其中的一個參數,這一點,完全符合人的色彩直覺,也只有HSB能做到,而RGBCMYK都是牽一發動全身的節奏。


          通過HSB模式,我們可以在已有顏色的基礎上,進行飽和度、明度的微調。以及選定主體色之后,根據需要,通過數值的加減改變色相,選取合適的顏色(互補色為180°、對比色為120°到150°、類似色為90°、鄰近色為60°、同位色為15°。)

           

           

          2.在設計中如何運用HSB色彩模式

          通過上述對HSB的原理、特點簡單介紹后,相信大家對其都有了基本的了解。以下我結合在工作中的幾個案例來說明HSB在設計中是如何實際應用。


          舉個例子:如果我們在設計一個頁面時,除主色之外我們需要一個近似色,就可以運用HSB色彩模式。

           

          通過圖片我們可以看出右側的顏色整體視覺效果感覺更加和諧、舒適。在界面設計中我們常會遇到以顏色對同一種類型的不同狀態進行區分,比如背景,按鈕等。

           

           

          結合上述的例子,以及飽和度與明度的變化規律:

          (在不改變色相的情況下)

           

           

           

          HSB色彩模式在項目中的實際應用

           

           

          1.爆款、預約詳情頁色卡庫

          在去年的vivo游戲中心爆款、預約詳情頁的改版優化中,都運用了HSB色彩模式。使不同游戲可以根據頭部氛圍圖配置出3個相同色相值的近似色并運用到頁面中。保證色彩搭配有規律可行,并且展示效果在基準線之上。


          系統統一從頭部氛圍圖吸取、確定顏色后,通過調整飽和度和明度值(色值不變),即可得到一套色卡。

          ▲圖4 vivo游戲中心預約詳情頁設計規范


          2.聯運深色模式中的應用

          在雙系統的深色模式適配要點中有提到“高飽和的顏色在深色的背景下容易產生視覺抖動,從而導致人眼疲勞”,在深色模式下我們應當選擇更淺的顏色以達到更好的可讀性。

           

          我通過結合Material Design以及Developer深色模式適配規范中的色彩示例來簡單說明,怎樣借助HSB,來達到深色模式色彩科學合理的適配。

          ▲圖5 Material Design深色模式適配規范

           

          ▲圖6 Developer深色模式適配規范


          通過對兩種規范的學習以及對比,可以看出Material Design的規范相對而言更加直觀和系統(手把手教你),Developer的適配則比較微妙(只可意會),沒有明確的說明方法或者規律。但Developer示例中的適配則更加注重視覺表達以及色彩的一致性,帶給人的視覺感受更加的舒適和諧。       


          重點分析Developer深色適配中的配色示例中,通過將Developer給出的深色模式適配示例的色值轉換為HSB之后,發現其HSB的數值變化是有一定規律的,規律基本符合:

           

          BUT

          在根據Developer的深色模式顏色適配的示例總結其規律的過程中,對于數值的變化,產生了一些疑惑:

           

          直到了解到:「每個顏色都有其專屬的“感知明度”,也就是亮度」

           

          將色相環去色后,可以明顯看出:

           

          每一種顏色(色相),都有著獨特的“感知明度”,在S、B相同的情況下,黃,青,洋紅的顏色會讓人感覺比較亮,結合這點再結合Developer深色模式的適配示例以及得到的基礎規律后。可以得出:

           

          將上述我們所得的“HSB配色一般規律”運用在vivo游戲中心聯運深色模式主色的推導,以及vivo游戲中心爆款詳情頁自動吸色系統優化中,使得頁面的閱讀體驗更加良好,整體配色和諧舒適。

          ▲圖7 vivo游戲中心、聯運游戲爆款詳情頁

           

           

          寫在最后的話

           

           

          HSB在設計工作中的應用當然不止上面講的這些,比如我們經常碰到的頁面中為了區分不同層級的文字,會給予文字不同灰度的顏色(最常見的#000000、#333333、#666666#999999)也是應用了HSB模式,當我們所要區分的層級多于四種時,就不需要在色板里糾結了,只要按照上述的規律,以不同明度的變化就可以了。


          在我尋找資料的過程中,也看到很多通過色相,飽和度,明度的一致或者對比等方式得到協調優秀配色的方法。這些都可以通過方法和HSB模式的結合,快速方便準確幫我們找到合適的顏色。

          ▲圖網絡圖片-色相環配色圖


          在日常設計中,可以通過個人對色彩的感知與把握選取一個顏色,再通過HSB快速的選擇相應的色板,運用在頁面配色中。到這里關于HSB色彩模式在設計中的應用就全部介紹完成了,如果你閱讀完也有所收獲,不要忘了點贊喲~

           

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

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

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

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


           

          日歷

          鏈接

          個人資料

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

          存檔

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