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

          首頁

          這篇導流條設計方法,讓我打開了新思路

          資深UI設計者

          // 寫在前面


          端到端導流是指在產品矩陣體系內引導優質產品的用戶使用另外一款產品,帶來使用量的提升,從而實現用戶規模提升的一種增長手段。隨業務快速增長,有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產品矩陣,依托各端流量實現矩陣產品間的導流,逐步積累用戶規模,是有駕目前獲客渠道中占比最高的方式。本文將以有駕導流體驗升級的項目為例,分享導流增長探索的設計思路與實踐經驗。



          // 為什么要做導流


          導流的目的

          對于業務本身而言,隨著移動互聯網流量紅利期的結束,獲取新用戶的成本越來越高,不管是新產品還是成熟型產品,都需要通過導流的手段來持續擴充新用戶。其次,對于有駕產品生態而言,需要各端產品間的相互聯動,協同發揮優勢,實現流量價值最大化。


          導流的優勢

          • 成本低,相較于投放、活動等渠道流量獲取方式,矩陣導流成本低;

          • 高意向,用戶購車意向明確更容易實現商業轉化;

          • 可共享,用戶數據及行為關聯互通。


          // 如何做好導流設計


          1.問題分析

          通過梳理核心場景的4種導流條,發現各個場景導流形式各異,用戶缺乏統一認知,導流引導語單一內容吸引力弱。在用戶在瀏覽頁面時,點擊功能入口或想要繼續查看更多內容,需要下載APP才能繼續阻礙用戶瀏覽

          • 缺乏統一認知:視覺表達形式不成體系,用戶感知不夠;

          • 內容吸引力弱:內容單一缺乏吸引力,用戶沒有點擊欲望;

          • 阻礙用戶瀏覽:打斷用戶正常使用功能,影響用戶體驗。



          從導流鏈路的用戶行為來看,整個流程下載路徑過長,發現用戶流失較大的轉化點:

          • 從小程序落地頁到下載頁:在進入小程序瀏覽頁面時,用戶沒有注意到導流條就滑走了;

          • 點擊導流條進入下載頁:點擊導流條會先調起導流彈窗,點擊確認后再進入到下載頁,用戶未選擇下載就退出了。



          2.明確設計方向

          針對導流現狀缺乏統一認知,內容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題,我們搭建了一個完整的導流鏈路圖,根據用戶增長模型,把用戶生命周期各節點的用戶行為與產品觸點一一羅列出來,找到增長路徑的設計機會點。



          通過以上的問題分析,如何建立用戶和產品的鏈接,保障友好的體驗,是本次導流升級要解決的問題。根據用戶關鍵行為,我們可以將整個導流鏈路拆分為3個階段來挖掘主要機會點:

          • 下載前:興趣激發導流吸引,建立用戶穩定認知;

          • 下載中:強化用戶轉化動機,刺激用戶完成下載;

          • 下載后:保障還原體驗暢通,提升首次使用體驗。



          下面將分別介紹導流下載前階段的設計落地實踐,以及下載中、下載后階段的延伸設計思考。


          // 下載前


          1.強化觸點吸引

          是否能成功引起用戶注意,是轉化開始的第一步,統一的視覺風格和滿足用戶訴求的內容,有利于增強導流條的吸引力。


          1)收斂導流條類型

          針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉預期的體驗問題,下線了阻斷式和截斷式兩種體驗不友好的導流類型,將原來4種導流類型收斂為2種,僅保留通用導流條和功能延展導流條,基于這2種導流形態進行深入的設計探索。



          2)建立通用視覺標準

          針對【缺乏統一認知】視覺表達形式不成體系、用戶感知不夠的視覺問題,建立了通用導流條標準化規范。統一視覺形態,優化為頁面內通欄嵌入式,同時融入品牌色強化用戶感知,根據頁面布局制定了不同的展示規則。



          上線后,內嵌導流條在展現受限的情況下,導流轉化數據與改版前基本持平,為了進一步提升導流的點擊效果,開始探索場景化定制提轉的設計方向。


          3)定制場景化內容

          針對【內容吸引力弱】內容單一缺乏吸引力、用戶沒有點擊欲望的內容問題,在通用標準化形態的基礎上,根據不同場景用戶訴求點,豐富導流內容。分別從內容定制、按鈕文案優化、以及氛圍強化3個方向驗證對轉化的影響。

          • 內容定制:豐富導流利益點、場景化內容更能激發用戶興趣,促進轉化達成;

          • 按鈕文案:轉化按鈕文案導向性明確、內容與導流利益點匹配,可以助力按鈕轉化提升;

          • 氛圍強化:導流樣式上適度弱化氛圍、樣式更傾向于原生功能,有助于提升導流條點擊。



          2.拓展場景擴量

          復利通用標準導流條的成功經驗,應用到功能延展類導流條中繼續驗證有效性,從產品價值點出發,挖掘高流量場景的機會點從而帶來轉化增量。


          1)價值傳遞

          根據小程序和APP兩端各自的不同點,分別從功能差異及體驗差異兩個方向進行優化。

          • APP特有功能:APP完善的功能體驗可以更好滿足用戶訴求,例如參配瀏覽場景下,引導用戶體驗搜索及橫屏查看的高頻功能,對于導流轉化有正向幫助;

          • 各端體驗差異:小程序和APP兩端體驗存在差異,例如圖片瀏覽場景下,APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗,能夠刺激用戶轉化。



          2)價值延續

          當用戶完成核心內容消費后,是否可以引導用戶去APP繼續瀏覽更多相關內容,進而引導用戶下載呢?

          • 服務透傳:平臺服務內容傳遞,例如在內容落地頁文末增加品牌廣告導流條,幫助用戶建立品牌認知;

          • 相關推薦:引導相關內容消費,例如在文章或視頻頁增加相關推薦導流條,引導用戶瀏覽更多相似內容。




          // 下載中


          當用戶通過導流條進入到下載流程時,還有哪些手段可以刺激用戶激活減少流失呢?

          • 強化下載動機:下載頁前置APP落地頁內容,例如將通用下載頁優化為場景化下載頁,給用戶超前產品體驗吸引轉化;

          • 減少用戶流失:縮短鏈路簡化流程,例如可在下載中間頁完成應用下載,同時退出下載頁時增加挽留。




          // 下載后


          當用戶在應用商店下載完成后,我們還能做哪些提升首次啟動APP的體驗呢?

          • 還原鏈路暢通:提升場景還原成功率,減少頻繁提示信息干擾;

          • 建立用戶心智:引導新用戶探索功能,根據用戶興趣推薦適合的內容。


          以上內容是下載中和下載后階段導流優化方向的一些延伸設計思考,為大家提供可以繼續探索的方向。



          // 寫在最后


          總結一下本篇文章關于導流的體驗設計要點:

          • 全鏈路洞察,對導流鏈路進行拆解,通過盤點導流鏈路的用戶行為,明確每個節點的設計方向;

          • 降低廣告干擾性,減少用戶瀏覽過程中的阻斷感,適度弱化廣告氛圍;

          • 用戶的視角引導,讓用戶專注于產品本身傳遞的價值,引領用戶完成對產品的探索從而完成下載激活。


          作者:百度MEUX
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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


                                 

          垂類品牌年輕化重塑—有駕品牌升級

          資深UI設計者

          有駕是百度旗下汽車信息與服務平臺,累計用戶超5.3億,為用戶提供真實可靠的看選買車服務,為車企和經銷商提供一站式營銷方案。


          什么是“有駕”

          【有駕】是百度旗下的汽車信息與服務平臺,累計用戶超5.3億,致力于為用戶提供真實、可靠的看選買車服務,以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。

          現狀分析

          有駕品牌在孵化初期,重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號,減少歧義,強化用戶的感知。

          但是隨著品牌持續運營進入新的階段,我們發現現有的設計無法滿足后續的運營訴求了,主要體現在:

          品牌logo:不能體現汽車的行業屬性,缺乏成體系的品牌符號和VI體系,色彩上也不夠符合時下潮流的年輕配色體系。

          品牌活動:品牌關聯度弱,活動維度單一。



          項目概述

          因此,我們重新梳理有駕的品牌定位與調性,借助本次品牌升級,打造有駕差異化風格,形成獨有的視覺印記。

          因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知,在原有基礎上進行品牌標識的探索及應用,以強化品牌感知,提升品牌的競爭力,整合業務資源做心智觸達。





          前期分析

          前期我們對汽車垂類的競品進行了一輪調研,并且結合有駕的用戶群里,尋找有駕品牌的差異點。

          有駕用戶群體年輕化為主,普遍具有高學歷,集中在新一線二線城市。

          通過以上在用戶、行業及行業趨勢等多唯獨的信息搜集后,我們確定了有駕品牌設計的四個核心關鍵詞:年輕、科技、未來、專業。



          建立體系

          在明確設計方向后,我們梳理了線上線下的所有品牌觸點,結合前期的調研結論,匯總出了有駕設計系統的完整框架,以確保品牌設計的完整性和靈活適用性。




          設計落地

          基于前期分析洞察結論,我們在繼承圓形和車形的基礎上,對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入,簡化圖形形態,嘗試不同的形態呈現的視覺感受和氣質。最終確定了全新品牌logo方案。




          相對于升級前,新版的logo加入汽車元素,解決升級前logo的行業屬性不明確的問題,讓產品app的行業屬性更加直觀。同時增加品牌符號做為底紋,輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。





          符號提煉

          確定品牌logo后,為了確保品牌能夠更好的拓展應用,進行了品牌符號的提煉。并為了延續之前的品牌調性。所以輔助圖形延續了之前的圓環造型,造型偏向輪胎;在不破壞原有型的基礎上,加入一些折角的質感的變化,使圖形變化更加豐富,更有識別度。





          設計語言

          為了更好的觸達到各業務場景,所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向,以適配不同的落地場景。結合有駕的年輕化,科技感的設計目標,探索出以下三種質感呈現:






          符號拓展

          在提取的形狀基礎上進行變形,增加折疊細節。在大事件活動,海報等場景使用,增加品牌關聯度。




          設計字體

          結合全新的品牌定位,我們也優化了有駕的品牌字體,從細節出透出有駕的品牌感知。




          品牌手冊

          新的品牌需要一套更全面的品牌系統來滿足不同場景下的業務拓展需求。

          目前我們也對現有的品牌手冊進行拓展和完善,同步到業務方,以便更好的保證各業務場景觸點下品牌的認知和統一,達到提質增效的目的。



          品牌落地

          除了對品牌對角度的塑造和升級,我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中,讓有駕品牌形象更加立體多元。









          結語

          目前有駕品牌升級已經取得階段性成果,沉淀出更加完善的品牌資產,不僅提升設計效率保證全鏈路的品牌曝光,也為業務規模化打下基礎。之后我們也將不斷完善和擴充品牌資產,將設計成果不斷落地到業務中,細化業務目標并與設計目標緊密結合,多維度助力業務的高速發展。





          作者:百度MEUX
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

                                     

          天貓雙十一品牌設計背后的故事

          資深UI設計者

          一年一度,天貓雙十一全球狂歡節,如約而至!

          從2015年開始,我們每年都會在雙十一期間,將雙十一品牌設計的完整思路分享給大家,這已經成為雙十一設計團隊的傳統。不為別的,各位同仁辛苦一年,想跟大家就著新鮮出爐的設計嘮嘮嗑。 

          每逢雙十一logo出街,都會有熱心的朋友幫我們解讀,也有人問我們為啥不搞個官方發布?各位朋友,您現在看到的就是官方發布的內容,它不只有logo,而是從頭到尾一個完整的故事。


          2019天貓雙十一主logo


          2019天貓雙十一主logo多語言版本

          今年是雙十一的第十一年,當我們接到這個任務的時候,就有機靈的同學提議:“我們用6個1吧,111111,61兒童節!”、“讓我們回歸購物的純真快樂!”。


          “哈哈哈哈哈哈…”魔性的笑聲在整個會議室回蕩,看來往年撓破頭也解不開的難題,就這么解開了?故事當然不會這么簡單,我們還沒有往這個方向嘗試就被否了。


          其一,雙十一是一個深入人心的認知,這四個一已經成為了超級符號,是我們寶貴的品牌資產,而六個一不但不能幫我們強化認知價值,反而會增加認知成本。


          其二,六個一是一個純視覺的創意,他很難支撐起我們要傳達的消費者價值,也很難建立起情感連接。


          我們應該從哪兒入手?


          回歸到設計的本質來思考,我們認為,設計的本質是將一個想法或者觀點巧妙的表達給目標對象,表達的過程中,形式只是手段,重點在于我們要表達什么。


          我們集合了阿里各事業部的設計師代表,讓大家回歸到一個普通消費者的狀態,一起聊一聊各自的雙十一故事,把這些故事提煉出來,就是消費者對于雙十一普遍真實的認知。在全年最便宜的一天,無論湊熱鬧也好,跟風也好,貪便宜也好,好像不買點什么總感覺錯過了什么。在這一天,“購物”毫無疑問成為頭等重要的事情。


          阿里巴巴經濟體設計師共創

          那么我們要對消費者表達“購物”嗎,講我們多么便宜,貨品多么豐富,多么物美價廉?這些是消費者早就形成的認知,是我們不用表達大家都知道的事,它看起來并不是一個想法和觀點。


          還是購物,但肯定不是教大家怎么購物,作為消費者,購物能給我們帶來什么?


          有人說,購物能讓我們吃飽穿暖,讓我們出行方便,讓我們安居無憂。


          如果這些你都有,你為什么還要購物?


          因為每個人都向往更好的生活!


          為了更好的生活,我們需要通過物品的改善帶來心理的滿足感。當然也有人會會說,滿足感也可以通過其他的方式獲取,比如關愛他人、親近自然、學習、修行、冥想等等,我們非常認同,更好的生活當然不僅僅只有購物。但我們當下探討的范疇僅僅只是“購物”以及“購物”能帶來的滿足感,對這種滿足感的期待,是每一個消費行為的動因。比如你想要買一件新衣服的時候,其實你已經在期待穿上這件新衣服的樣子,你在挑選一件禮物的時候,已經在期待他人收到這件禮物時的反應……


          雙十一,全年最便宜的一天,無疑讓你的期待,變得“更值得”期待,所以“更值得”讓大家買得更多。


          但,這些洞察還只是幫我們理清了消費行為背后的共性規律,實際上,細分到每個消費者,因為身份角色生活方式的不同,動因各自不同,還不能簡單的用向往更好的生活來概括,因為它太抽象,聽上去對,但每個消費者更關心的是我的需求是不是被滿足,而對于雙十一來講,我們就是要打造屬于每一人的雙十一,而不僅僅只是購物,這樣它才具有節日的文化屬性。



          所以,我們開始探尋真實的消費者故事,尋找那些通過物品讓生活變得更好的故事,這些真實的故事,給了我們很大的感觸。我們發現,購物行為下,其實還隱藏了每一個消費者內心更深層的需求,它是一個個藏在心底的愿望,正是這些不同人的愿望,成就了每一個平凡人鮮活的人生。我們想要幫助他們實現自己的愿望。在雙十一當天,幫助每個消費者“愿望11實現”!這才是雙十一更應該滿足的消費者需求,它不僅僅是購物,而是通過物品價值上升到情感價值,這樣的品牌,才真正能夠讓人感受到溫度。在傾聽這些故事的時候,我們的阿里女神被感動了,她主動要求幫我們寫一首歌,她想把她的感動通過音樂的方式記錄下來,配合我們精選出來的11個故事,講給大家聽。


          雙十一品牌設計概念篇mv

           

           “logo出來了?”低沉而沙啞的聲音,把我們從自我陶醉中喚醒,我們找到了想要表達什么,但和怎么表達之間還隔著上百個logo方案。 


          于是,我們開始了一輪又一輪的打磨,打磨的的重點放在了如何表達“愿望11實現”這一主題,這個過程中,有兩個大方向上的分歧:


          一個大方向是表現愿望,因為它比較有畫面感,也比較容易表達。


          另一個大方向是表現實現,因為它是對結果的描述,更符合消費者對結果的預期。


          在糾結掙扎過后,我們選擇了把兩個方向融合,劇情貌似又回到了熟悉的設計故事,“把這兩個方案融合一下!”我相信做設計的朋友,一定反復聽過這句話,沒聽過的朋友,那說明你做設計還不久,我保證在你今后的職業生涯里,這句話一定會反復出現。(一個會心的微笑) 


          融合說起來容易,這么抽象的文字怎么轉換成圖形表達,同時還要和貓頭+11.11融合,為什么要和貓頭+11.11融合呢,因為這是我們重要的品牌形象資產,從2015年開始,貓頭+11.11的組合就固定下來了,這意味著logo的80%的主體已經固定,我們的難點就在于在這20%的區域里,如何既要表達主題,還能做出和往年不一樣的感覺。我敢向你保證,雙十一的logo是所有logo里最難的,沒有之一,至少是我十幾年職業生涯里最硬的茬。 


          “愿望、實現、貓頭、11.11”這幾個詞反復在腦海里縈繞,經驗告訴我們,當面對如此復雜的局面,我們應該從里面跳出來,換個視角看問題,換什么視角?當然還是再次回到消費者視角,消費者愿望實現時是一種什么樣的狀態?是愿望實現時的滿足?好像還差點意思,愿望平時也能實現,和在雙十一實現愿望有什么不同?

           


          我們認為,它應該是超越你期待的表達,從愿望實現時的滿足,升級到愿望實現時的驚喜!這才是狂歡節該有的味道。當然,驚喜也有很多種它還不夠有體感,如何找準驚喜體感? 



          答案是感同身受。于是我們開始了場景模擬,模擬消費者逛雙十一的場景。



          當我們來到雙十一的時候:“咦!今年好像真的不一樣!” 



          繼續探索的時候:“呀!找了好久的idou同款原來在這里!”



          準備下單的時候:“喔!真的很便宜!”



          收到快遞的時候:“哇?。。?!”


          聽上去有點夸張,但這確實是我們想要營造給消費者的驚喜,當人感到超越期待的驚喜時,會不自覺的放大瞳孔、張開嘴巴脫口而出。這是人類共通的體感,是不用解釋就有的共鳴。這讓我們瞬間被點亮了,“驚喜到脫口而出!”我們一下子找到了核心創意。


          通過反復嘗試,我們發現氣泡形的表達,不僅能成為承載所有消費者愿望的想法框,同時也能成為表達愿望實現時驚喜到脫口而出的對話框,把這個氣泡形和貓頭+11.11結合,這就是我們今年雙十一主logo的原由,這個logo和以往雙十一的logo最大的不同在于,它更像是一個容器,容納不同人不同的個性化表達。它一改之前一直端著的狀態,以一種更加親民,更加個人化的方式呈現給大家。


          2019天貓雙十一品牌logo演繹視頻


          當然,作為容器,我們還要把核心創意延展到線上線下各個場景。



          雙十一定制禮盒


          走向全球的雙十一


          過去幾年,我們向大家介紹過天貓雙11的主風格的來龍去脈,一定會在創新的基礎上,保持一貫的傳承。所以今年波普藝術的主基調還是會延續下去,問題又回到了我們如何在波普藝術這個大的基調下面,通過老元素的新組合,創造出全新的視覺感受。相比符號,視覺風格更容易表現“驚喜到脫口而出!”這個idea,它可以通過形色質構全方位的表達。當一個人“驚喜到脫口而出!”的時候,快樂的氣場圍繞在他周圍,這些無形的從中心向四周放散的表現,看上去很像是圓形聲波,同時它還能根據不同人的狀態做動態變化,這就形成了一種設計語言,一種能用固定的形式做出千變萬化的效果的語言。





          當我們把它和波普藝術的主基調結合的時候,就形成了今年雙十一獨特的視覺語言,再通過形色質構的拆解,應用到各個場景。



          裝置應用


          天貓雙十一發布會現場應用


          天貓雙十一開幕盛典現場應用


          天貓雙十一許愿貓


          天貓雙十一,助你愿望11實現!


          現在參與阿里巴巴設計官方微博@AlibabaDesign 的雙十一話題互動,就有阿里設計限量周邊好禮相贈!這個雙十一,我們一起讓愿望11實現~

          作者:阿里巴巴設計
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

                                   

          雙11大屏——情緒的超級機器

          資深UI設計者

          數據大屏的設計有什么不同?

          數據大屏的設計,并非是傳統意義上的設計師或產品經理就能完成的。它需要將藝術家、科學家與企業家的能力集于一身,需要擁有對動態數據的把握能力、對產業經濟與供應鏈的結構方法、對社會議題的捕捉與構造,以及宏觀的視野和細致入微的匠人用心??梢暬尡涞臄祿a生溫度。


          1.雙11為什么需要數據大屏?


          數據大屏是一個凝聚情緒的超級機器。

          數據大屏不講述傳奇,它就是傳奇本身。



          在這塊巨幕上,數據是公開透明的,它的變化在實時的體現著每一筆消費的數字。每個人都能看到,也會被傳遞到全世界每個角落。雙11所帶來的巨大能量與共振,我們需要一塊巨大的屏幕來承載這份共情——這并不是一則新聞播報、一條統計數據,抑或一張圖表就可以完成的。在這樣一個狂歡的日子里,手機、個人電腦、電視機這些面向個人的設備,全都需要融入到這個巨型的超級情緒機器之中。


          2.導演、故事與設計


          從宣傳與商業作戰的角度講,數據大屏需要兼顧故事性和震撼性兩重特點。通過故事腳本與內容框架的設計,讓觀眾層層抽絲撥繭,從表層的情緒,看到內核的戰略。


          1. 內容規劃:故事與腳本設計

          2019數據大屏的內容框架大致分為三個層次。


          情緒層:GMV的節節攀升滿足了媒體不斷推升的情緒高潮。在日益蕭條的國際環境中,中國的經濟仍能屢創新高,每一位在雙11買買買的中國人背后是一種愛國主義與中國信心的體現。


          業務層:阿里的自我表達。阿里經濟體在城市中繼續深化的服務我們的消費者,數據成為城市可持續發展的新資源;而商業操作系統隨著數字經濟時代的到來,開始系統的服務我們的品牌與商家,在新的時代續寫“讓天下沒有難做的生意”。


          戰略層:企業與國家發展同行。阿里的改變,反射了社會關系和社會結構。點擊購物車就能買到全世界的東西,而對于國內市場,精準的人群定位、產業帶的建設都讓拉動內需變成一個大眾都能參與的事情。


          2. 情緒規劃:情緒鏈路與鏡頭設計

          依據數據表現,雙11當天的情緒高潮會集中0點和24點前后。24小時內,情緒的跌宕起伏,媒體向世界專遞著這種情緒。現場,根據數據和情緒的變化,我們開始導演數據大屏在不同的時間段出現的鏡頭:GMV的彎道超車緊張窒息,晚飯過后是觀看城市夜經濟的最佳時機,還有“買遍全球的購物車”、“小鎮青年”等進20個鏡頭。


          3. 核心理念:新商業文明是中國的彎道超車

          為什么是彎道超車?

          大航海時代是貿易全球化的開端,也是當代中國繼續擴大開放,用一帶一路、進博會等等新模式,承接人類當今世界發展的新格局所在?;ヂ摼W與移動互聯時代的到來,讓中國得以彎道超車占據世界領先地位,而隨之到來的數字經濟時代正式開始了人類歷史上的新商業文明。馬老師說:打造新商業文明的時機已經到來。數字時代是我們面臨的最大機遇,這個新時代最大的風險就是錯失機會。



          我們將這個核心理念融入GMV大屏的設計,正如逍遙子所說的那樣“消費不是商業的終點,通過消費者來提升生產端生產契機,優化生產決策?!睘榇?,我們導演了新商業文明的數據大戲:GMV屏中的賽道,3個鏡頭穿越了大航海時代、互聯網時代,數字經濟時代彎道超車的新商業文明,快進了商業文明的發展。

          11.11當天的數據也被融入其中,賽道上奔跑著餓了么、盒馬配送線和菜鳥的物流線,空中飄散的氣泡是實時產生的交易熱力。


          △2019雙11數據大屏-GMV彎道超車&3個視角切換


          3.雙11數據大屏設計概覽


          1. GMV:11剁手鑄就中國信心

          2019年,即使是在國際經濟大環境衰退的今天,阿里的雙11仍舊創造了新的商業奇跡:2684億人民幣的GMV的背后,是中國人為了家庭與自己而歡樂剁手,也是中國消費者面對全球大環境下對中國的強大信心。從2009年的電商大促,到11年后的全球狂歡節,阿里伴隨著中國經濟海洋的形成而不斷掀起巨浪。李克強總理就曾經用雙11的銷售數據,來解答那些對中國經濟感到不解的人們,讓他們瞬間懂得中國經濟是汪洋大海。


          △2019雙11數據大屏-歷年GMV增速


          2. 全球化:買遍全球的購物車

          中國經濟與中國消費者的貢獻,是對全球經濟的貢獻。消費者購物車里藏著美好生活的愿景,打開了世界消費的新空間。天貓國際把來自全球78個國家和地區的品牌和商品帶進中國,滿足消費者的品質消費需求。買遍全球的購物車,更為世界經濟增長貢獻拉動力。越來越多國際品牌青睞中國市場,通過天貓國際滿足中國消費者的需求。


          △2019雙11數據大屏-全球化


          3. 服務夜生活點亮城市夜經濟地圖

          隨著政策的推動,全國經濟進入夜生活消費時代,大量的城市開始準備成為一座座不夜城。在這個新的消費增長領域,新商品、新商機、新消費模式、新空間與新玩法都層出不窮。在未來,理解夜晚的中國,或許比理解白天的中國更為重要。


          △2019雙11數據大屏-杭州經濟體服務網絡


          △2019雙11數據大屏-天貓商超網絡


          △2019雙11數據大屏-杭州城市夜生活


          4. 相信不起眼的改變:小鎮青年與那些你不知道的族群

          14億的中國人口、巨大的地域差異與文化差異意味著,每一種類型的消費人群都是海量的,都擁有現有經濟理論所無法囊括的巨大潛力。小鎮青年、銀發一族、95后作為新消費崛起的代表族群,正悄悄改變著社會的消費結構。通過數據我們清晰看到:族群的喜好千差萬別,數字化的新消費使得商家能針對消費者需求創造新供給。


          △2019雙11數據大屏-新人群,新消費


          5. 品牌榜:千里江山圖

          天貓創造的價值是真正支持品牌的數字化轉型,不僅僅贏得今天的業務,更在于決勝未來。國潮席卷而來,智能商業魅力無限,全球供應鏈在動蕩與智能化中全面轉身。全方位重構產品創新、品牌建設,強化天貓與品牌之間的合作,這便是我們想在雙11這天展現的萬里品牌江山畫卷。


          △2019雙11數據大屏-品牌榜


          4.結束語


          當GMV越來越逼近2684億人民幣時,炸裂感給每個人的沖擊是:中國又誕生了一個新的奇跡!即使在全球經濟放緩的今天,中國人民對于天貓雙11全球狂歡節的熱情絲毫不減。在這背后,是數字經濟時代下的阿里巴巴,向新商業文明邁進了一大步。

          作者:阿里巴巴設計
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

                                     

          7個實用技巧,教你搞定可視化圖表

          資深UI設計者

          可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。

          可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中,如果沒有系統的可視化知識,會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么,在復雜的數據關系中如何設計和選用圖表,如何在好看的同時提升信息傳達效率,看完這篇文章希望對你的設計過程有所幫助。


          // 為什么要數據可視化


          數據可視化就是用圖表來表示數據信息,它所傳達的信息包括你所拿到的數據源和你分析后的結果,再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息,是我們可視化的最終目的。



          舉個例子,同樣一組數據,用表格的形式呈現是很難有所洞察的;如果將各個地區維度的數據聚合以柱圖形式呈現,很容易就能看出各個地區間數據的差異,并從中洞察規律


          關于如何設計好數據可視化圖表,這邊總結了三個步驟:選擇適合的圖表,強化視覺層次,圖表響應式適配。


          一、選擇適合的圖表


          數據可視化的圖表種類繁多,當我們真的開始作圖,往往會遇到一個困境:有這么多類型,要如何選擇正確的圖表呢?首要依據是考慮所要傳達的信息意圖,即所要制作的圖表它的任務是什么,再通過分析數據關系來選擇表達方式;第二層意圖是圖表傳達內容,這時候我們就需要根據數據的特征去突出和強化。


          1. 分析數據關系

          根據數據分析的方式來看,每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構,再結合數據關系作出選擇。了解圖表的可能知道,一般圖表的數據關系有構成、比較、分布,以商業數據為例,常見的還有流轉關系。



          構成關系

          構成關系的圖表表達的是部分和整體的關系,用于分析總體和各部分的占比比例,構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小,也可以使用比較關系的圖表。

          常用圖表:餅/環圖、堆疊圖、面積圖等,如涉及到層級結構,還會用矩形樹圖或旭日圖等特殊結構圖表。

          關鍵詞:“占比、比例、百分比”



          比較關系

          比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內,通過對兩個或兩個以上的指標分析,可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式,趨勢對比用于表示一段時間內數據的變化,分類對比用于比較數據規模。

          常用圖表:趨勢對比常用圖表有折線圖、散點圖等;分類對比常用條形圖、柱狀圖、氣泡圖等。

          關鍵詞:“增減、升降、漲跌、波動”



          分布關系

          利用空間分區來展示數據之間的分布關系,常用于體現兩個或以上數據的相關性。

          常用圖表:散點圖、熱力圖、雷達圖等

          關鍵詞:“隨著……而變化、A/B之間的相關性、交/并集”等



          關聯與流轉

          流轉關系是B端數據常用的一種關系,它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等,以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。

          常用圖表:關系圖、?;鶊D、漏斗圖、進度圖等

          關鍵詞:“流程步驟、留存、轉化、關系”



          2. 分析數據特征

          按數據關系和分析目的選擇好圖表類型后,第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有:變量特征、維度特征、層級特征、流程特征。


          變量特征

          分辨一個指標通常有兩類特征,按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢,離散數據通常統計各分類下數量的變化。

          • 連續型數據:指在一定區間內可以任意取值的數據叫連續數據,其數值是連續不斷的。如身高、體重等帶有時間因素變量的數據等,通常用折線圖體現變化趨勢。
          • 離散型數據:指其數值只能用自然數或整數單位計算的數據。如當天銷量、進店人數等表示分類類型的數據,用柱圖表現更加體現變量的特征。


          維度特征

          多維度分析需要將多個變量在同一平面上直觀的表示,可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據,可使用不同顏色進行分類

          • 根據分析視角選擇圖表:對于多維度變量的數據我們需要明確分析的視角,去找準對應的數據映射。如案例中多個班級的科目成績的這組數據,如需要全局視角查看個班的綜合素質,推薦使用雷達圖;對比單科成績的變化分布,則推薦使用堆積圖。


          層級特征

          多層級數據由多個部分構成一個整體,又稱樹形結構數據。除了用結構樹圖表表現以外,還可以考慮以下兩種圖表類型:

          • 矩形樹圖:突出子層級占比大小。最初是用來顯示計算機硬盤驅動器上文件的結構和大小,它以面積的形式突出展現各個子層級節點的占比,可幫助用戶看到數據的層次結構以及各層級之間的關系。


          例如:上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額,通過色調來區分不同類型,顏色的深淺代表分類下的子集,面積體現銷售占比。對比一般結構樹圖表,它的優勢在于可以有效利用空間。

          • 旭日圖:突出細分層級關系。由多個圓環圖嵌套而成,也稱為徑向樹圖,它既能像餅圖一樣表現局部和整體的占比,又能像矩形樹圖一樣表現層級關系。常用于細分分析方法,將事物從大到小進行拆解。每個級別的數據通過1個圓環表示,離原點越近代表圓環級別越高。 旭日圖在顯示一個環如何被劃分為多個層級時最有效,而矩形樹圖適合比較相對大小。


          流程特征

          流轉關系是表達數據轉化流程的重要類型,不僅包含統計意義上的數據總和,同時還表達了信息流轉的路徑;其中?;鶊D和漏斗圖都可以表達路徑中流量的變化,不同的是桑基圖重點強調流量的強度和走向,漏斗圖更加注重突出轉化率和效果,根據不同的表達目的選用。



          二、強化視覺層次


          選擇合適的圖表后,在信息傳達上也需要正確的表達,展示形式美觀的同時能夠清晰的體現數據特點。


          1. 強化數據特性

          使用圖表正確的表達信息,需要設計師在強化數據特性的同時避免偏差

          • 趨勢易感知:折線圖數值如過于平均導致趨勢平緩,有時候無法體現偏差;在強調數據趨勢的場景下,推薦用動態取值范圍讓波動保持在一定范圍內,放大波動占比更突出趨勢。


          • 展示更準確:柱狀圖依靠柱體面積體現最終數值,使用動態范圍截斷將會導致數據解讀不完整;始終將 y 軸從 0 開始,才能更準確的反映柱圖中的值。


          2. 色彩視覺傳達

          除了在設計構圖上優化以外,顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知,錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板,精確傳達信息同時后續的項目在選用時也可以達到用色的統一。



          我們在之前的文章里有介紹過圖表的取色模型,通過調整顏色HSL值的區間,可以得到以下三種意圖色板:

          • 定性型-分類色板:用于區分不同的類型,又稱為無序色板。適合區分沒有內在順序的類別
          • 定量分歧型-發散色板:通過兩邊互補色來體現,具有明亮的中間值,然后以不同的色調在刻度的兩端變暗。通常用于可視化負值和正值
          • 定量順序型-順序色板:從亮到暗或相反的漸變。適合可視化從低到高的數字。

          那么我們要怎么樣去使用這些色板呢?下面幾個案例將帶你了解其中的差異。


          定性型:使用色調來進行分類

          數據內在沒有順序差別時,建議使用色調值(H)進行區分;如定義國家、行業等類型。如果希望圖表看起來更加專業,以下有幾項分類色板的小建議:

          • 選取盡量少的色調:取色時無需使用整個色環,使用鄰近色或互補色的取色方式顯得更加專業。


          • 色板適度明暗交替:一些視障人士無法區分色相,主要靠顏色的明暗差異來識別,通過飽和度和暗度的調整,創造明暗交替的色板。


          定量型:使用深淺色板強調內在順序

          如果在同一個分類下包含子類別,或者數據本身具有排名屬性,那么建議使用連續色板來突出他們內在的順序,使圖表更加易讀。

          • 順序色板-選擇合適的插值:根據數據的分布情況選擇不同的的插值斷點,突出數據的差異。如以下案例中,根據統計學概念設定不同的取值區間,左側示例使用的是平均線性差值,反映的是數據的集中趨勢;右側示例使用的是中位數插值,能更好的體現數據分布的形態。


          • 發散色板-關注對比色的識別性:盡量避免紅綠配色,如需使用綠色,偏黃或偏藍的綠色更易分辨,對視障人士也更加友好。


          三、圖表中的響應式設計


          B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報,在基礎設計完成后還需要考慮到圖表展示的環境,根據不同端去適配顯示效果,以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。


          1. 布局框架適配

          在網頁端顯示時,有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態,將非必要的的元素轉化或隱藏,保留重要的圖形元素去適應當前空間;元素隱藏后使用懸浮交互來保證信息的展示,保持圖表的可讀性同時也避免產生元素的重疊。



          如案例中的圖表,在不同尺寸下通過改變和隱藏圖表元素,以達到適配當前空間的效果。

          2. 圖表元素適配

          要適配移動端,網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外,還需要考慮手機屏幕的尺寸和圖表元素的適配性,去兼容相關的交互操作。

          • 信息浮層:在圖表中,信息卡元素是傳達信息內容的重要組件,在網頁端中懸浮展示,通常會占據很大空間;圖表適配移動端后,信息浮層改動到圖表上方常駐顯示,并跟隨手指的滑動變化響應數值,完整展示信息的同時也避免了頁面抖動。


          • 坐標軸標簽:過長的坐標標簽在適配過程中會產生重疊,而省略也會造成信息展示的不完整。我們需要針對不同的坐標軸類型給出響應的規范。如文本類軸標簽我們可以采用省略、換行、旋轉等方式適配,避免信息的缺失。針對有連續型的數據類坐標軸我們可以使用抽樣、轉化單位等方式適配,精簡空間避免堆疊。


          3. 極值適配

          因B端平臺的特性,我們無法預知客戶傳入的數據量,可能會遇到因數據量過多,造成圖表顯示不佳,數據讀取困難等問題。這種情況下,提前考慮數據極限場景,通過交互的形式變化的方式讓用戶獲取完整信息,提升理解同時信息展示更靈活。

          • 縮放和平移:在數據范圍過多時增加取值范圍的縮略軸組件,通過限制展示范圍讓數據量顯示可控。


          • 互動切換視圖:如果折線的類別過多且無法省略的,建議分組查看。默認狀態僅當前組折線高亮,其他數據以淺色顯示,通過切換的方式查看其他組別的信息。


          • 懸浮鼠標高亮:在分類過多不好分辨時,可使用懸浮高亮的交互方式突出相關聯的數據組。


          還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因,在這篇文章就不做深入講解了,以后可獨立介紹。


          // 結語


          數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確,才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據,確保用戶能夠更好的接收信息,才是可視化的關鍵。

          * 以上圖表中均為虛擬數據,僅作為案例參考


          感謝閱讀,以上內容均由百度MEUX團隊原創設計,以及百度MEUX版權所有,轉載請注明出處,違者必究,謝謝您的合作。申請轉載授權后臺回復【轉載】。也歡迎加入MEUX,視覺/交互/運營設計師,可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如:站酷)


          關于我們:
          MEUX,百度移動生態用戶體驗設計中心,負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業產品等。MEUX以「簡單極致」為設計理念,創造極致用戶體驗的同時賦能商業,推動設計行業的價值和影響力,讓生活因設計而更美好。


           

          作者:百度MEUX   來源:站酷


          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          文化美育產品1.0視覺設計探索

          資深UI設計者

          前言

          博學多聞,不同凡響。

          博聞美育,是一款致力于提升用戶文化素養的產品。研發團隊以“長見識,會思考,懂審美”作為核心理念,設計出《中國故事》《四方采風》《高端文學》等的系列課程。

          面對一個真正落實人文素養的全新課程產品,我們作為視覺設計師,首先希望的就是為用戶打造出最美的課堂,使用戶在高品質的美學場景中能沉浸式體驗到學習的樂趣。當然,我們同樣希望探尋如何通過設計幫助青少年在使用產品時養成高審美意識,加強文化自信。

          在此次對博聞產品的視覺品牌設計中,設計團隊探尋了如何將視覺設計體驗與課程教學更好的結合,以下為我們的設計過程以及設計成果。

          設計目標:提升學習體驗

          首先,我們通過對產品特性的分析,明確了此次視覺品牌探索的主要設計目標 —— 重新定義什么是提升學習體驗的人文素養產品,從用戶視角轉變為參與者,更加沉浸于課堂。

          基于對設計目標的進一步探索,我們提煉出了提升學習體驗的三種核心理念:

          核心理念:情 感 | 經 典 | 沉 浸

          情感 · 價值認同

          近年來,國潮文化與傳統藝術在青少年群體中“走紅”,成為青年對話傳統的方式。體現了青少年對中華優秀傳統文化的價值認同和情感認同。我們希望在青少年養成審美與內在的關鍵階段,也盡到自己的一份小小的努力。

          經典 · 傳承創新

          在保留傳統藝術精華的基礎上,我們尋求視覺上的創新,突破設計的思維慣性,使用戶可以通過現代的視覺表達形式與經典文化產生共鳴,傳達國風之美,多角度喚起青少年用戶對于傳統經典的文化價值和藝術價值的理解。

          沉浸 · 專注體驗

          我們希望將國風之美呈現在用戶面前,將有道博聞系列課程全面包裝成能夠讓學生身臨其境的國風互動課堂,豐富用戶的心智,發揮產品的雙重價值。

          設計策略:探索國風之美

          確立核心理念后,我們將中國傳統藝術中的精髓進一步提煉,最終選擇了以下關鍵詞作為視覺設計的表現點:

          接下來,我們基于各個關鍵詞對具體方案展開探索

          01 國風之美 · 符號

          容納承載,歷史淵源。

          為了確保博聞三個系列的課程(《中國故事》《四方采風》《高端文學》)在品牌視覺設計上能夠更好的進行拓展應用、傳播差異化、與用戶情感共鳴。我們結合了三個系列課程的特點與對傳統文化的研究,分別為各個課程建立了代表性的元素作為超級符號,加強用戶的記憶點:

          中國故事 —— 講述中華經典

          中國故事系列課程會通過詩、詞、歌、賦、散文、小說全類型文學作品,講述中華經典。玉璽作為皇帝的玉印,是至高權力的象征,在各朝各代中見證了各色各樣的傳奇故事。因此選用【玉璽】作為中國故事的符號圖形。

          四方采風 —— 探訪文化名城

          四方采風系列課程首次“走出屏幕”,采用文化直播結合外景采拍的形式,在歷史文化名城中講述各地的風土人情。使用【中國古建筑】作為這一系列課程的超級符號,見證和反映了各地社會的發展和歷史變遷。

          高端文學 —— 精讀文學作品

          高端文學系列課程將帶領用戶學習重磅文學作品,該系列選用【卷軸】作為代表符號,卷軸不僅承載了國人對中國繪畫、書法的認識,更是寫入了古人的思想與信念。

          在確認好三個系列的代表符號后,我們將構圖一分為二,左邊作為系列的重點信息區域,右邊作為符號以及視覺表現區域。

          02 國風之美 · 色彩

          濃墨淡彩,總相宜。

          在視覺品牌的色彩方面,我們從古代寫意的濃墨重彩中,提取出了富有中國氣質的一抹顏料。

          歷史厚重的「紅」,風光寫意的「綠」,靜心閱讀的「藍」代表了三個系列課程各自獨有的氣質。

          03 國風之美 · 書法

          剛柔并濟,行云流水。

          我們依據行楷的筆畫特點,設計了三個系列的第一識別字體?!感锌菇橛诳瑫c行書之間,比端正的楷書多一分活潑自由,又比隨性的行書多一份端莊。我們在此行楷的靈活中增添一抹穩重,剛柔并濟,恰到好處。

          第二識別字體的設計靈感來源于印章。「印章」的歷史可以追溯到戰國,至今仍在生活中廣泛應用,古人鑿銅刻玉,力艱功深,我們希望這種信念依舊可以傳承在青少年的品格中。受到印章印面形式的啟發,設計了第二識別字體。文字采用現代字體為基礎,增加辨識性。

          04 國風之美 · 國畫

          清新淡雅,水天一色。

          國畫,以其永恒的藝術魅力穿越時空。國畫的繪制講求布局、造型、運筆、賦彩,不拘泥于自然物象的再現,強調主觀意境的創造,是中華民族傳統文化的瑰寶。我們借鑒了國畫中工筆畫的「留白」構圖理念,并添加水墨畫中的「墨韻」作為細節補充,創作了既符合現代視覺風格,又不失古韻的插畫;

          最終,我們將提煉出的「符號」「色彩」「書法」「國畫」這四個關鍵詞融合在系列課程之中。

          創作作品凝結:深挖沉浸體驗

          01 除了賦予課堂知識,我們還能為用戶做什么?

          除了設計課程產品常規的講義以及線上頁面,為了進一步提升用戶的沉浸式學習體驗,有道博聞獨創了「手賬本」這一教輔材料,并且隨課程附贈可以使用戶進一步體驗傳統藝術魅力的「國風禮盒」。

          02 如何使用戶更加沉浸地參與課堂?

          「手賬本」可以幫助用戶將課上的知識融會貫通,并收入「手抄報」「旅行MAP」「作家名片」「思維導圖」等模塊,讓用戶深度參與到【輸入-加工-輸出】的產品結構中,使用戶充分吸收課堂知識、加入自己的思考理解,并最終輸出觀點和總結?!韭?想-做】循環,鞏固知識印象。我們最終會收集用戶的優秀作品,并集結成刊,出版成冊,進一步提升用戶的參與度,增強他們的學習熱情。

          在手賬本的視覺設計中,我們根據課程內容繪制了精美插圖,考慮到用戶書寫的便捷性,設計了古風的書寫外框,力求用戶可以時時刻刻沉浸在充滿國風之美的課堂中,使視覺設計與教學內容完美融合。

          03 所有心意,只為準備給喜愛課程的你!

          「國風禮盒」將“長見識,會思考,懂審美”的概念植入到禮盒的選品和包裝中。封面設計我們選用了「時空穿梭」的概念,通過時空隧道,串聯古今,大開眼界。禮品內容里,充分尊重用戶的喜好,最終選取了「國畫顏料」「手繪扇子」「國風筆記本」「考古盲盒」。每一份禮品,都充滿著我們對它的嚴格要求和對用戶參與的期待。

          寫在最后

          “古老的種子,它生命的胚芽蘊藏于內部,只是需要在新時代的土壤里播種?!?nbsp;   ——泰戈爾

          中華傳統文化正是一顆充滿驚喜和生機的種子,靜待著我們的細心發掘。我們會繼續探索,用設計在新時代中傳承優秀傳統文化。讓傳統藝術擁抱青少年,讓東方美學成為青少年心中最引以為豪的文化。


          本次有道博聞項目的設計過程中,我們牢記以用戶為中心的理念,做與課程產品融合的設計,最終收獲了一份寶貴的經驗,也獲得了用戶的一致好評和贊許。未來,設計團隊也會堅持做以用戶為中心的產品,傳達設計的力量。


          相信種子,相信力量。

                                   



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系。 



          作者: 有道LCT設計團隊  來源:站酷





          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          配色老被說不好看?這160種配色方案拿去用吧!

          資深UI設計者

          顏色可以在很大程度上影響一件設計作品的調性和美觀性,要想抓準一件設計作品的調性,選擇一個合適的色彩搭配組合尤為關鍵,為此,蔥爺花兩天時間整理了19大設計調性,多達160種配色方案,趕緊收藏起來以備不時之需吧。


          1. 高端


          視覺調性高端的色彩,通常具有明度低、飽和度低、顏色數量少等特點,所以很多高端的設計都會以深色作為背景色,因為深色更顯低調、更具神秘感,所以給人的感覺更高貴。然后以亞金色、銀色、桔紅色、白色等作為輔助色。


          2.科技


          想要表現科技感,色彩的整體調性通常會偏冷色系,明暗對比要強,且通常會使用漸變色。比如以深藍色到藍色的漸變作為背景色,然后用高飽和度、高亮度的青色和紫色作為輔助色,這時這些輔助色就會非常的跳躍,具有一種發光的效果。


          3.時尚

          其實所有調性的配色都應該要盡量時尚一點,即使是想表現復古,也不能太土,所以這里所說的時尚特指偏向年輕、潮流的時尚。這種色彩通常具有飽和度高、明度適中、色相對比較大等特點。蔥爺這里概括了兩類,一類是以純色作為背景,這種色彩比較適合于品牌設計、網頁設計、畫冊設計等;一類是以漸變色作為背景,這種色彩比較適合于電商設計、廣告設計等。


          4.酷炫

          酷炫是指那種視覺效果特別張揚、甚至是極具個性的色彩搭配,比如近幾年比較火的蒸汽波風格、酸性風格、賽博朋克風格、故障風格,其色彩就屬于酷炫類的。該類設計通常也是以深色作為背景,圖片元素會使用高飽和度且對比很強的漸變色,色彩相對較多。


          5.好吃


          即讓人感覺很有食欲的色彩搭配,這種色彩通常以暖色為主,比如紅色、橙色、黃色。飽和度較高、明度較低的組合方式通常用于餐飲行業;而飽和度較低、明度較高的色彩組合通常用于甜點、飲料等行業。


          6.夏天


          目前正值火熱的夏季,所以蔥爺專門整理了一些適合表現夏季的好看色彩,該類色彩通常會以藍色、青色、綠色這種冷色系最為主要顏色,然后以黃色或紅色、白色作為輔助色,這種色彩組合會給人清涼、快樂的感覺。


          7.清新


          小清新的視覺感受為輕松、柔和、淡雅,要達到這樣的效果,顏色的明度通常是比較高的,飽和度偏低,常用的顏色有淺青色、淺綠色、淺黃色、粉紅色等,在奶茶、女性護膚品的相關設計中比較常見。


          8.快樂

          快樂是張揚的、是活潑的,所以快樂的色彩飽和度較高、明度不會太低、色彩的種類會比較多,通常也是以暖色為主,但是會搭配冷色一起使用。黃色具有很強的快樂、陽光屬性,所以想要表達快樂,黃色通常是少不了的。

          9.可愛


          跟兒童、年輕女性相關的設計,通常需要表現出可愛的調性,這類色彩通常是用冷色和暖色相互組合,顏色的明度同樣不會太低,否則會有壓抑的感覺,另外飽和度也不要過高,飽和度稍低一點效果會更柔和一些。


          10.健康


          想到健康我們立馬就會想藍天白云、青山、綠色的草地和樹葉,還有黃色的小野花等等,所以藍色、綠色、青色、黃色、白色都是常用于表現健康的色彩,紅色也可以偶爾作為點綴色加進來。由于健康的調性也是要給人一種舒適、輕松的感覺,所以整體的顏色明度不要太低。


          11.運動


          要想讓色彩動起來,對比一定要強,可以是色相對比、也可以是明度對比和飽和度對比。橙色和黃色是兩個很具活力的的顏色,所以常用于表現運動的設計里。

          12.科幻


          這是一些科幻電影、機動游戲的海報設計常用的色彩搭配組合,給人的視覺感受是穩重而大氣,科技感和神秘感并存,所以背景色通常也比較暗,喜歡用青色和黃色這種比較亮的顏色作為點綴。

          13.喜慶



          在設計節日海報或促銷海報時,通常需要表現出喜慶的調性,有些設計師會局限在大紅色、黃色、和橙色里,這樣搭配出來的色彩容易土,而想要解決這個問題,一方面可以加入冷色搭配使用,另一方面顏色的飽和度和亮度也不要過高。


          14.復古


          這類色彩的特點是顏色的飽和度會相對低一點,而且大多數情況下,整體的明度通常也不會太高,常用類比色搭配和對比色搭配。

          15.中國風


          具有中國風特色的顏色和色彩組合有很多,蔥爺這里僅列舉了8個組合。這類色彩同樣飽和度不會達到最高,有點復古和充滿文化氣息的感覺。胭脂(暗紅色)、緗色(中黃)、紺青(深藍色)、黛(褐色)等是中國風常用的顏色。


          16.夢幻


          夢幻具有奇妙和神秘的感覺,好像在黑暗中找到了一點曙光,奇遇了驚喜一般,所以大多數情況下,背景色會使用從深色到亮色的漸變。顏色相對會比較豐富,而且以漸變色居多。


          17.女性


          女性是溫柔的,是感性的,所以該類色彩組合通常為類比色,偶爾會用一點對比色作為點綴,以增加畫面的活潑氣息,顏色的明度和飽和度都不能太低,當然飽和度最好也不要過高,粉色、紫色是常用于表現女性的色彩。

          18.優雅


          優雅可以理解為低調、高級、溫和、安靜,所以這類色彩的對比通常不會太強,飽和度也會比較低,整體的色彩調性會偏中性,常用卡其色、麻色,還有單色組合及類比色組合。


          19.經典色彩組合

          除了以上十八大調性,蔥爺還給大家推薦一些經典的配色,很難把它們具體歸為哪一類,但是我們在做很多設計時,用上這種配色總能得到不錯的效果,比如紅黃黑、紅白藍、黃綠黑、等等,在很多平面海報設計中經常能看到。


          以上所列舉的色彩組合,矩形色塊為背景色,圓形色塊為畫面中圖片元素或文字使用的顏色。根據需要可以把其中的某些純色轉變為單色漸變,或者也可以把某些單色漸變轉化為純色。另外,在不包含黑白灰的色彩組合里,仍可以根據需要自行加入黑白灰,比如用于填充文字的顏色。

          當然,能體現以上這些調性的顏色還有很多,大家可以自行補充,建立起自己的色庫。


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

          作者:蔥爺   來源:站酷


          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          8個立馬提升設計感的畫冊標題排版技巧

          資深UI設計者

          標題排版在畫冊設計中有著很關鍵的作用,標題排得好可以讓整個版面的氣質提升不少,反之亦然,而很多設計師在排畫冊的標題時,通常都是單純選擇一個筆畫較粗的字體,把字號拉大與正文對齊,這種標題的排版太過常規,容易導致整個版面缺乏設計感,比如下圖。

          其實畫冊的標題也能排出許多新意,本篇文章,蔥爺來給大家分享幾個可以給畫冊設計加分的標題排版技巧。

          01.描邊字錯位組合

          上圖是某院校招生畫冊的“學院簡介”排版,由于太過講究對齊,缺少變化,所以顯得不夠靈活,我們可以把標題的中英文詞匯拆開進行錯位排版,錯位時要注意左右的平衡,另外,三行錯位比起兩行錯位的變化會更豐富一些。

          單純只是做錯位處理,效果并不怎么好,因為沒有層級關系,所以可以再加上字號大小的變化,突出重點詞匯,弱化次要詞匯。

          這樣層級豐富多了,但是眾多很粗很黑的字體擠在一起略顯壓抑,把其中部分詞匯改成描邊后,整體就變得更透氣、更有設計感一些了,注意描邊要細一點,以避免描邊的筆畫重疊在一起影響識別性和美觀性。

          標題排好以后,再根據標題調整一下內文、頁眉、頁碼的排版,內文通常會對齊標題中的某個字詞,但一邊對齊就好,不需要兩端都對齊,頁眉、頁碼可以作為裝飾來排版,填充一點顏色可以讓版面變得更活躍。


          02.彩色標題疊加灰色圖片

          還是拿前面的那個案例舉例,把學校圖片換成一張沒有去底的矩形照片,然后把它處理成黑白色照,移動至版面上方,標題使用藍色壓住圖片的左上角,這時標題就不是孤立的幾行文字了,而是與圖片形成了一個整體,這種排版方式在網頁設計中比較常見,用于畫冊的標題排版,效果也是很不錯的。

          圖片做出血處理顯得更大氣,左下角的頁碼與標題左對齊,可以加強版面的整體性和關聯性。

          3.手寫體搭配黑體

          同一個標題我們通常只會使用一種字體(不包括英文),但有時候也可以試試用兩種字體搭配來使用,比如手寫字體搭配無襯線字體,這兩種字體在風格上完全不一樣,對比非常強烈,能夠給版面帶來新意。

          由于該中文標題過于簡短,所以搭配上英文會更豐富一些。

          正文刻意與標題進行了錯位排版,當然,同時也保持著某些對齊關系,圖片的排版同樣如此,與正文錯位,但與標題左對齊,整個版面既靈活又很有序,符合學校畫冊的調性。

          04.文字疊加色塊

          加色塊是標題設計中常用的手法,但如果只是用一個色塊把標題包住,那么效果是比較普通的,很容易像促銷折頁的做法。所以我們可以只把色塊作為標題的一個裝飾元素,用一個小小的色塊放在標題后面,使其視覺上更豐富、更突出。

          圖片的刻意錯位很關鍵,如果圖片與正文兩端對齊,那么英文標題、正文、圖片、頁碼都是沿著一條直線對齊的,整個版面就會變得生硬很多。

          文字加色塊還有另一種效果也不錯,即把文字色塊合并在一起做成補丁效果,首先把文字錯位排版,然后分別給每一行文字加一個色塊把文字框住,色塊與色塊上下相連。

          搭配上序號和英文標題,豐富標題的對比關系,使其更美觀、更有設計感,色塊可以根據需求適當超出文字的長度。

          正文的排版我做了一點改變,把第一段單獨拿出來作為引文使用,剛好這段文字在內容上也正好是起到提前說明的作用,這樣處理后這個版面也變得有了一些新意,標題十分顯目。

          05.手寫體跨版

          在畫冊設計對于有些版面,可以排得大氣一點,比如把原本可以1P排完的內容排成一個跨P,這時標題也可以拉大跨版排列,這種做法可以加強文字的大小對比,也會有更多留白空間。


          為什么用手寫體呢?宋體和黑體不行嗎?其實也可以,不過由于漢字的筆畫比較復雜,宋體和黑體又比較方正,所以拉太大排列時會顯得不夠靈活,如果是英文則會好一些,所以在排版的時候我還做了了傾斜與裁剪處理,并且搭配了英文進行錯位排版,不然會顯得過于單調。

          06.標題與正文左右排版

          在豎版的畫冊中,我們通常喜歡把標題排在正文的上方,而如果把標題與正文左右擺放,那么又會有種不一樣的感覺。

          但不要把標題與正文水平對齊,那樣的話標題的空間就過小了,會顯得很壓抑,而是要把標題放在正文的左上方,并保持某些對齊關系。

          如果把這種排版方式看成是分欄網格,那么它屬于不對稱網格,即正文欄應該比標題欄更大一些,以保證有足夠大的空間排列正文內容。標題欄可以有大量留白,頁腳可以與標題形成呼應,豐富版面的細節。

          07.扭曲標題

          這種標題處理手法在海報設計中比較常見,其實國外很多畫冊也這么做,效果很酷,沖擊力很強。

          用中文來做這種效果行不行呢?也可以,不過不適合太嚴肅的畫冊,用在設計類和時尚類的畫冊中會比較合適,比如前面列舉過的設計書籍的排版。

          由于文字較多,所以進行分行錯位處理,然后在頂部菜單欄中選擇對象-封套扭曲-用網格建立,把網格參數設置為3行5列。

          移動網格的錨點使文字呈波浪形,如下圖。

          拉拽錨點左右兩邊的手柄使波浪形變得柔和一點。

          波浪效果做得差不多后,按快捷鍵E調出自由變換工具面板,并選擇自由扭曲工具,把標題扭曲成如下效果。

          再調整一下細節,然后把它放在版面中,把內容篇章的序號處理成描邊樣式與標題疊加在一起,可以起到裝飾的作用。

          扭曲的標題搭配上鮮艷一點的顏色,效果會更時尚,對于這種版面,正文也不要排得過于規矩,所以,我刻意把版面中的兩張圖片做了錯位處理。

          08.打散排列

          通常我們會把標題文字集中排放,但對于設計和時尚類畫冊,我們可以打破傳統的做法,把標題做適當的分散排版,效果也很不錯,當然,標題文字如果太少就不合適了。

          另外,為了使標題更特別 ,給文字加上下劃線效果會更好,并且下劃線可以根據需求適當延長,以加強這些分散文字的關聯性,甚至還可以加上英文做裝飾。

          正文的排版與標題文字左右兩端保持對齊。

          結語

          設計是一個不斷嘗試、調整的過程,排標題同樣也是如此。另外,標題的排版固然是很重要的,但是想要整體效果得到比較大的改善,正文、圖片、頁眉、頁腳、頁碼的配合也很重要,永遠要把整體的大效果擺在第一位。


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

          作者:蔥爺   來源:站酷


          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          五步提升智能產品體驗

          資深UI設計者



          1、場景細分

          隨著各大智能廠商對用戶行為數據的收集積累,拆分提煉出了不同場景下用戶的特定需求,相比以前的大而全臃腫的功能界面,現在的功能、信息更加精確,產品將不同場景下的解決方案為用戶提前準備好,用戶只需要簡單的選擇就好,更加人性便捷:

           

          1-1 B&O音箱歌曲模糊切換界面

          B&O音箱面向的人群是音樂發燒友,他們對音樂有獨到的理解,為了為用戶提供便捷合乎口味的音樂,B&O將歌曲類型與顏色情感相結合,分別是:黃色代表愉快的歌曲、紅色代表激情的歌曲、紫色代表憂郁的歌曲、藍色代表輕松的歌曲。用戶只需要選擇顏色就可以播放相應風格的音樂,給用戶濃烈的感性藝術氣息。


          并且B&O將音樂播放場景做了細分:只收聽自己收藏的歌曲、收聽與自己品味相似的歌曲、隨便聽聽;這三個場景下的需求通過三層圓環來滿足:點擊外環區域播放全網歌曲、點擊中環區域播放與用戶收藏相似的歌曲、點擊內環區域播放用戶收藏的歌曲。這種感性的操作方式省去了搜索歌曲的過程,極大的提高了便捷性。

           

          1-2 三星智能冰箱2.0系統

          我們先了解一下三星智能冰箱1.0的系統是什么樣的,首頁包含時間、天氣顯示、音樂播放、購物清單、備忘錄、相冊、留言板、設備控制,用戶在冰箱面板上什么都能做,整體感覺是一個臃腫的功能集合。


          在2.0中,三星將用戶使用場景做了以下的細分:烹飪模式、日常模式、娛樂休閑模式、家庭管理模式;在烹飪場景下,為用戶展現菜譜,用戶可以專注的去研究飯菜制作方法;在日常場景下,為用戶提供日歷、照片墻、留言板、日程等日常生活相關信息;娛樂場景下,用戶可以在廚房一邊忙碌一邊聽音樂,還可以查看社交消息,所有的功能都是圍繞娛樂休閑;家庭管理場景下,全職媽媽可以一邊做著飯,一邊看著監控屏幕上兒童房孩子的情況及全屋的安防情況,也可以控制家中的設備。


          場景細分可以有重點的為用戶提供他們真正需要的服務,讓用戶感受到產品帶來的貼心感。

           

          1-3 Orvibo 燈光照明場景


          Orvibo根據用戶使用燈光的習慣,按照用戶對于光線的需求程度,將燈光使用場景分為:夜晚光線昏暗需要明亮的光照、白天光線充足不需要燈光、休閑時需要柔和些的光線、閱讀需要不刺眼但明亮的光線、起夜時微弱的輪廓照明即可。為用戶提供每種場景下的照明方案,準確快速的滿足用戶不同的需求。

           

          1-4 小米TV端空調控制界面

          小米根據用戶對于空調各個功能的操作頻率,羅列出核心功能:開關、溫度調節、冷熱模式,界面中只體現這幾種種信息,將低頻功能隱藏起來,為視覺降噪,突出核心功能,提升了用戶操控效率。

           

          1-5 WOM天氣展示模塊

          針對那些上班中不方便看手機、穿好衣服正要出門、旅游到達當地酒店需要看一眼天氣狀況的場景,WOM提供了簡潔直觀的設計方案,產品顯示區域只保留4種常見天氣類型,高亮的天氣icon代表當前的天氣狀況,當天氣將要發生變化時,相應的天氣icon會閃爍。


          此外,通過利用顏色來傳達不同的溫度,藍色代表0℃,白色代表10℃,黃色代表20℃,紅色代表30℃,在不需要手機的情況下為用戶提供了豐富的展現形式。

           

          1-6 三星電子畫框

          隨著手機的普及,家庭對于電視的需求已不完全是為了收看節目,往往一個禮拜也看不了幾回。三星基于這種情況為了延續電子屏幕的銷量,賦予了電視裝飾屬性,演變為純展示的電子畫框,用戶可以選擇各種風格的肖像或風景圖片進行輪播展示,扮演藝術裝飾畫的角色,從而滿足用戶日常家庭裝飾需求。


          2.直觀明確的表現方式

          在設計中融入圖片,將操作、狀態可視化,這些具象的形式可以讓用戶快速理解并操作,讓我們看看各大智能產品廠商是如何實施的:

           

          2-1 Nest溫控器安裝界面

          大多數智能設備買回家后,需要用戶自己安裝,有的甚至牽扯到線路問題,Nest溫控器安裝界面采用與實物一致的模型元素,讓用戶有參照依據;通過零部件的運動告訴用戶安裝順序;通過放大細節,告訴用戶應該選哪一個部件及如何鏈接。讓用戶有更好的參與感、成就感,還可以降低公司的人力安裝成本、客服成本。

           

          2-2 小米智能家居電視

          小米智能家居電視背景運用實物圖片,給用戶營造家庭的氛圍,設備卡片icon運用半寫實風格,和實際產品一一對應,便于用戶快速查找設備;卡片底部體現設備狀態,精簡的卡片信息使得設備的狀態更容易被用戶感知到。

           

          2-3 三星、蘋果智能家居系統首頁

          三星、蘋果都運用圖片作為系統的背景,可以很好的和用戶拉近距離,通過白色或磨砂卡片與背景做區分,三星的設備icon采用多彩漸變風格,和它趨于年輕化、時尚個性的品牌戰略方向保持一致。

           

          2-4 Whirlpool洗衣機、烤箱、冰箱模式選擇界面

          由于洗衣機、烤箱、冰箱的運行模式和用戶想要洗的衣物類型、材質、烹飪的食物類型、儲藏的食物類型有強關聯,Whirlpool運用圖片作為模式背景,將功能和物品類型結合,用戶可以直觀感性的理解和區分各個功能,從而快速做出選擇。

           

          2-5 Orvibo MixPad

          Orvibo在大屏智能面板的設計上大量使用圖片元素,不僅可以區分各個功能模塊,還增添了內容的豐富性,要知道智能面板的首屏和設備控制列表頁功能是不一樣的,它是用來承接并向用戶展示房間內各個信息的,房間圖片作為背景烘托出家的氛圍,每個房間頁面的左上角顯示屋內溫度、濕度、當前開啟的設備類型及數量,很直觀的向用戶展示屋內信息。

           

          每個場景都用具體的圖片作為卡片背景,可以讓用戶預想到每個場景對應的運行效果。有的場景卡片中體現所屬房間信息,告訴用戶該場景只聯動運行特定區域的設備。


          運用圖片會有以下問題:1、找到能體現各個特定功能的圖片增加了人力成本;2、圖片的多樣性容易打破畫面的整體統一感。所以要結合公司的現狀克制的運用圖片。

           

          2-6 Amazon智能家居系統

          Amazon的監控設備卡片背景外顯了房間內的監控畫面,用戶在設備列表界面就可以直觀的看到監控區域的信息,強調了用戶關注的內容,縮短了操作步長。

           

          2-7 Lenovo Smart Clock 備忘提醒時間設置界面

          通常,我們設置時間時,系統會給我彈出時間選擇控件,需要我們上下滑動設置;Lenovo Smart Clock的做法是將時、分的設置具象成了時鐘實際運行的圓形軌跡,與用戶對于時間的認知保持一致,很貼心的設計,這種方式非常值得我們學習。

           

          2-8 Google Nest Hub 定時界面

          Google Nest Hub 將傳統的定時列表具象成了一個個正在倒計時的時鐘,用戶可以更直觀的每個定時的狀態。點擊某個定時卡片可以快速的進行暫停或刪除操作。

           

          2-9 小米空氣凈化器界面

          小米空氣凈化器界面,每一檔空氣質量值都對應不同的顏色,并且將顏色延續到了其他操控按鈕,讓用戶對當前空氣質量有更強的感知;凈化器被關閉時,顯示區域、控制區域置灰,明確告知用戶設備狀態及可操作區域。

           

          2-10 三星SmartThings 設備連接查看界面

          房屋面積大,會有很多的設備與多個網關連接,家中與網關連接的智能設備有時候會連接中斷,具體哪個設備與哪個網關中斷了不容易被查清。三星SmartThings將設備與網關的連接情況可視化,可以向用戶直觀的反映出哪個設備連接出了問題。


          3.運用手勢控制

          通過利用不同形式的手勢操控,讓用戶和產品的交互過程更新穎更便捷。要注意的是雖然手勢不需要操控物理按鍵,但手勢操控的形式要建立在用戶已有認知習慣之上,請看以下案例:

           

          3-1 LG手機系統控制界面

          最左邊的圖為行程信息截屏操作,目前截圖方式有幾個按鍵一起按下的,也有手機背面敲擊三下的,這些都需要與設備接觸,接觸交互的過程就需要花費用戶更多的時間,LG通過雙手捏合截圖的形式體現現實中“抓取”的語義,用戶使用起來順其自然,瞬間就可以完成截圖的目標。

          中間的圖為應用快速切換操作,用戶只需要對著屏幕做揮手動作,就可以切換至下一個應用,這個隔空操控的手勢核心使用場景是:當你正在廚房,手上沾著面粉或其他東西時,需要操控手機又不想弄臟手機,那么隔空操作就可以解決這一痛點。

          最右邊的圖為多媒體音量調節,只需要作出旋鈕的動作,就可以實現音量的控制,是不是覺著很Cool。這種新的控制形式可以讓用戶加深對產品的印象。

           

          3-2 Google Nest Hub音樂播放控制界面

          在Google Nest Hub的音樂播放界面,當你想開啟或暫停音樂播放,只需要手掌隔空朝著屏幕方向做按壓動作,就可以快速觸發相應功能,這種方式讓用戶會感覺很爽,自己就像有了魔力。

           

          3-3 Google Nest Hub鬧鐘控制界面

          早上鬧鐘響起時,需要用戶選擇關閉鬧鐘還是稍后提醒,常見的情景是,用戶睜開眼伸手去點擊某個選項,會干擾想要接著睡的用戶。Google Nest Hub在此處增加了隔空操控手勢,用戶如果想關閉鬧鐘,只需要閉著眼,手掌朝著屏幕一揮手,就可以搞定了,有沒有被寵愛的感覺。

           

          3-4 HomePod 音樂投射功能

          蘋果用戶如果想將手機上正在聽的歌曲通過HomePod播放,只需要將手機靠近HomePod,就可以輕松完成音樂投射,整個過程就像將一個容器的內容倒入到另一個容器內,既充滿趣味性又大大簡化了音樂播放設備切換的過程。


          4.提供個性化、多樣化的選擇

          通過設計語言為用戶提供更多的視覺風格,甚至開放編輯權限讓用戶更自由的制定自己喜歡的形式,這些都可以滿足用戶的個性化需求及專屬感,請看以下案例:


          4-1 Sony HUIS遙控器

          Sony HUIS遙控器為用戶提供了最大限度的自主編輯權,用戶可以從后臺設定每個按鍵的形式及功能,也可以在屏幕中設置戶型圖,方便控制對應的設備。


          甚至可以繪制只有自己理解的專屬圖案,大大提升了專屬感。

           

          4-2 三星智能冰箱屏保

          用戶具有喜新厭舊的心理,三星智能冰箱為用戶提供了豐富的屏保:有沒有任何信息展示的抽象幾何藝術畫風格、有配合溫度展示的春夏秋冬風格、有簡潔素雅的時間顯示風格、還有照片背景墻風格;兼顧了用戶日常裝飾和功能的需求。

           

          4-3 Lenovo Smart Clock

          Lenovo Smart Clock對于時鐘屏保為用戶提供了不同的風格,涵蓋了大多數的人群風格喜好:活潑跳躍、實用直觀、極簡現代、抽象藝術、純文字、純數字等

           

          甚至在同一種風格中再細分為多種色彩搭配方案供用戶選擇??梢哉f想盡辦法來滿足用戶的個性化需求。


          5.統一的設計語言及操控邏輯

          這里的統一設計語言有兩個方面:一、同一個功能在不同的智能設備上布局要一致;二、同一類設備在APP中的功能布局要一致;操控邏輯統一指的是:產品中設備的操控方式要和用戶對實際設備的認知一致。一致性可以降低學習成本,提升更穩定的操控體驗。請看以下案例:

           

          5-1 溫控器多端控制界面

          Nest溫控器及ecobee溫控器在設備上的設計語言和App上的保持一致,方便用戶在多端設備上的無縫操控體驗。移動端與智能設備界面唯一不同的是,移動端,同一層級上展示的功能入口更多,適合更復雜的操作;

           

          5-2 Orvibo 移動端設置界面

          在移動端設置智能面板功能按鍵的界面中,Orvibo將按鍵列表做成與實物一致的樣式,便于用戶快速找到對應的按鍵進行設置,這是提升智能家居一致體驗常見的方式。

           

          5-3 三星SmartThings 功能卡片

          在智能家居App中,由于功能種類繁多、內容不確定等因素,承載它們的卡片在布局設計上面臨很大挑戰,需要兼容各種功能、還要保證卡片的整體一致性及合理的屏效比;在SmartThings智能家居控制系統中,三星對功能卡片進行了統一的部署,卡片左上角為功能名稱,左下角為狀態信息,右下角區域為操控區,并且還考慮了只有功能控制沒有狀態、只有信息沒有功能控制情況下卡片的拓展形式。充分保證了操控的一致體驗。

           

          5-4 Google Nest Hub調光燈控制界面

          在調光燈的操作邏輯里有這么個問題:是將亮度值調至0%關閉燈光還是需要一個單獨的開關按鈕??纯碐oogle是怎么做的,它將調光區域與燈的開關做了區分,也就是說亮度通過調光區域操作最低為1%,需要通過開關按鈕進行關閉;這樣做的好處是操作邏輯明確,并且當用戶在80%亮度下關閉燈光,下次開啟時還是80%的亮度,更加人性。


          總結:

          發表一下個人的心得,內容是關于如何選擇正確的產品提升方法,目前網上各平臺的智能產品界面有很多,然而大多都是不落地的概念稿,里面的設計稿由于沒有具體場景及需求的約束,大多都無法解決公司實際項目中的問題,經常瀏覽僅能提升個人審美。只有平時通過對各行業實際落地產品的搜集積累和分析,才能發現它們在提升產品體驗道路上的共通點、差異點,從而為公司提供真正有價值的設計方案。


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

          作者:土木君    來源:站酷


          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          三星SmartThings產品解析

          資深UI設計者

          這篇文章主要探索三星智能家居App-SmartThings的主要功能和核心流程,以及新版本與上一版本的差異給我們的啟發。



          1.整體風格布局差異對比

          1-1 SmartThings 1.0 界面

          三星上一版本界面標題選用細體字,頭部區域留白,卡片功能區域小,背景選用寫實簡約照片,體現文藝感。

          圓形的場景卡片與矩形的設備卡片形成對比,場景卡片與文字上下排列,更加凸顯場景圖片,但文字存在多行、單行顯示,這種表現方式會顯得凌亂。

          設備卡片從上到下依次為圖標、設備名、狀態。



          1-2 SmartThings 2.0 界面

          新版本標題選用粗體字,標題區域更加緊湊,功能區域展示空間變大,背景使用抽線雙色漸變,更現代時尚。

          功能卡片為統一圓角矩形,場景卡片圖文左右排布,底部白色卡片區域可以很好兼容多行、單行文字的情況。

          設備卡片從上到下依次為圖標、房間名、設備名、狀態。

          底部新增Tab區域,細分為收藏、設備、生活、自動化、菜單5個模塊。

           

          風格布局總結:新版本屏幕利用率更高,粗體字和抽象背景使得內容更凸顯,底部的Tab提供了更多模塊入口,功能分類更合理。



          2.架構差異對比

          2-1 SmartThings 1.0 架構

          舊版本只有一個首頁,功能都在此被分發,并且功能較為單一。



          2-2 SmartThings 2.0 架構

          新版本增加收藏、設備、生活、自動、更多模塊,對用戶使用場景做了細分。

          界面頂部的房屋設置、添加、編輯為全局設計,不過在每個模塊中添加的內容不同。

          收藏作為用戶每次進入App的第一屏,說明是用戶常用的重要功能,在收藏模塊中,可以添加的內容最多,用戶在此頁面可以完成大多數常用操作。

          設備模塊是全屋設備的合集,自動模塊是場景、自動化的合集。

          生活模塊主要提供家庭安全監控信息,還可接入其他服務,例如:智能家電監控、智能烹飪服務。



          3.設備卡片分析

          3-1 設備卡片結構解析

          新版本設備卡片主要由設備圖標、房間名、設備名、狀態、控制區構成;房間名域為預留區,保證在不同頁面下的統一性。

          設備在離線狀態下,右上角會顯示離線圖標,代替控制按鈕。

          只有我們提前羅列出更多的頁面顯示情況,整合并預留可變區域,才能使頁面更統一。



          4.新版本收藏模塊分析

          4-1 收藏界面

          收藏模塊分為3大區域,區域1為狀態通知區;區域2為收藏的場景區;區域3為收藏的服務或設備。這3個區域展示順序是固定的,可以選擇是否展示,無法改變展示順序。

          因為每個區域的卡片尺寸是不一樣的,區域固定的好處是,可以保證顯示的統一性。否則大小卡片穿插顯示,還可能會空缺幾個,很影響美觀。并且操控邏輯也是固定的,用戶更容易理解。



          4-2 添加到收藏方式1

          點擊收藏模塊右上角添加,可批量選擇內容快速添加收藏。



          4-3 添加到收藏方式2、3

          在非收藏頁,長按卡片,可單獨添加收藏內容。

          在設備、場景等新建或編輯界面,可以選擇添加至收藏的選項。省去了后續的單獨添加動作。



          4-4 移除收藏

          在收藏頁,長按卡片,可以進行單獨移除操作。

          在收藏編輯頁面,可以批量快速移除移除。滿足了不同的用戶需求。



          5.設備模塊分析

          5-1 設備界面

          首次進入,展示的是某個房間內的設備,通過左右滑動進行切換房間,三星可能想為用戶提供模糊操作來提升效率,在房間少的情況下,這種方式比較好。當房間多了,用戶會滑動多次才能到目標房間;當然三星給出了針對精確選擇的方式,點擊左上角的房間入口,可以選擇、編輯房間。

          房間多的情況下這2種方式都不是很好的解決方案。

          這里要注意的是,三星把“沒有房間”也放進房間列表,供用戶選擇?,F實中,有好多設備是不屬于任何房間或者用戶暫時不想放到某個房間,增加無房間選擇可以更靈活的滿足實際使用場景。



          5-2 房間添加流程

          在房屋編輯頁面,可以添加房間,在這里三星已經為用戶預設了很多房間類型選項,用戶只需要做選擇,很方便,即使沒有要的,還可以在列表底部選擇自定義。



          5-3 設備添加方式

          在設備頁面,只能添加設備、燈光組、監控組。

          用戶可以通過關鍵詞搜索、掃碼、設備類型篩選、品牌篩選進行設備添加。

          很全,幾乎涵蓋了所有的添加方式。



          5-4 燈光組添加流程

          在添加頁面,第一步要先填寫組的名稱、選擇所在房間,第二步選擇要合并的燈,添加完成跳轉至設備組詳情,方便立即調控。



          5-5 設備控制頁

          設備控制頁面采用了模塊化的設計方式,控制區域均為列表形式,不同的設備只需要替換圖標和文字及對應的操控列表,降低新設備重新創作新界面的設計成本。



          5-6 單獨移動設備

          長按設備卡片,選擇目標房間,可完成單個設備轉移。



          5-7 批量移動設備

          選擇設備頁面右上角的移動方式,可以批量進行設備的轉移。



          6.自動模塊分析

          6-1 自動運行界面

          自動模塊包含場景、自動化、第三方設備,它們不具備房間屬性;

          點擊右上角的箭頭可以展開或收起對應列表,方便查找內容。



          6-2 新建場景流程

          第一步,先填寫場景名稱、選擇圖標、是否要添加到收藏;

          第二步,選擇執行的設備,可以根據設備名稱、房間名稱進行快速定位,并且可以批量選擇設備;

          第三步,設備添加成功后,根據需要,單獨對設備執行狀態設置。

           

          新建場景的邏輯是:先批量選擇要執行的設備,再單獨設置執行內容。

          這種方式的好處是,不易打斷用戶的設置思路,還可以減少操作步長。



          6-3 新建自動化

          新建自動化界面分為觸發條件、執行內容兩大塊;

          初始狀態會為用戶提供使用描述,便于用戶操作。

          可以通過時間的變化、設備狀態變化、位置變化、天氣變化、安防變化來觸發執行命令。



          6-4 添加觸發條件

          將設備狀態變化作為觸發條件時,設置邏輯是,完成一個設備的設置才能設置下一個,不能批量選擇。為什么和新建場景的流程不一樣?可能是因為在設置執行條件時,用戶心智里認為設備和狀態聯系更緊一些,并且條件種類不會太多。



          6-5 條件滿足類型

          當添加了一個以上的設備作為觸發條件時,界面會顯示“同時滿足或滿足任何一個”的選項。



          6-6 執行內容

          執行內容可以是控制設備、通知給用戶、運行場景、改變安防模式。

          可以批量選擇設備,并且可以設置執行延遲時間、自動復位,滿足用戶不同需求。


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

          作者:土木君     來源:站酷


          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

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

          日歷

          鏈接

          個人資料

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

          存檔

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