<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設計分享達人

          一、前言

          視頻播放器中承載著極其豐富的內容畫面和播控功能,尤其是在寸土寸金的移動端視頻播放器中,為使內容更沉浸消費,需盡可能克制界面中的功能元素/入口直接外露。基于此種場景下,合理的手勢設計不但可為界面“減負”,還可幫助用戶更快捷觸達功能、提升操控便捷性。


          視頻場景中目前已有部分的常規單向手勢已被用戶廣泛接受并形成習慣認知,如「單擊 暫?!埂ⅰ鸽p擊點贊」、「長按快進」、「橫滑導航」、「縱滑切視頻」、「雙指捏合縮放視窗」等通用手勢。

          那么如何在保留用戶對于常規通用手勢認知的基礎上,進一步對視頻場景中的手勢交互進行擴容升級?這也是我們接下來在手勢進階交互上的重點探索方向。

          本次針對百度APP中的視頻播放器場景,為提升手勢操控效率,我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型,以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。

          二、什么是「組合手勢」

          「組合手勢」是基于常規手勢的組合擴展,其通常由兩種或兩種以上的常規基礎手勢所構成,若組合方式及使用場景得當,可助力用戶更便捷的觸達功能。

          以前述的視頻場景常規手勢為例,其觸發機制一般可分為兩個階段:step1交互信號step2執行任務,即用戶通過某一基礎手勢發出交互信號,系統收到信號確認后便可立即執行任務,但整個過程是線性的,手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。

          于是我們在現有常規手勢兩階段觸發機制的基礎上,嘗試引入「意圖識別」環節,并梳理出「組合手勢」的設計模型,以探索不同基礎手勢相互組合后的擴展可行性。

          「組合手勢」觸發一般可分為三個階段:step1交互信號step2意圖識別step3執行任務,前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。

          由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口,因此,其差異化創新具有較大設計靈活度,尤其需根據具體的使用場景進行綜合考量。

          三、「長按組合手勢」激活快捷菜單

          1.項目背景

          百度APP視頻場景早期的播控功能較少,如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。

          隨著后續視頻場景的功能建設日漸完善,我們便在基礎菜單面板中拓展了一行視頻菜單,專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項,菜單面板彈出后還需左滑才可露出后面的功能入口,因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。

          2.競品調研及選型

          通過對競品進行調研,我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型,  分別為:長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。

          選型A

          「長按觸發獨立播控面板」:通過長按手勢可激活從屏幕底部彈出的獨立播控面板,此方案擴展性較強,但對視頻沉浸觀感體驗有一定的打斷感;


          選型B

          「長按觸發浮層播控選項」:通過長按手勢可觸發置于視窗上層的浮層選項入口,一定程度上可延續視頻觀看的沉浸體驗,但浮層擴展性有限;


          選型C

          「長按觸發特定播控功能」:通過長按手勢觸發特定的某個播控功能(如長按“快進”),一定程度上可滿足此功能的重度用戶,但對于長按手勢的使用效率較低;

          3.設計方案

          1)長按手勢交互擴容

          針對目前視頻播控菜單存在的問題,經過和業務對上述三種長按交互選型方案進行綜合考量,最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置,并探索一套更便捷的觸發機制,以此對視頻場景中的播控菜單進行設計升級。

          但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據,用戶對此功能的使用頻率高、并已形成較深的操控認知,若直接下線“快進”功能則會對用戶使用習慣產生較大影響,尤其是視頻場景的重度用戶。

          那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢?是否有可能將“快進”和“快捷菜單”進行融合?這也是本次項目對于便捷手勢體驗的重要設計探索點。

          基于此,我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義,通過「長按+滑選」的機制觸發快捷菜單功能項,以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為:

          step1:以“長按手勢”創建一個新模式,即發出交互信號并喚出浮層菜單;

          step2:若用戶未松開手指,則系統默認開始識別用戶意圖,是否有以“拖拽手勢”滑選至目標功能項以選擇功能;

          step3:用戶滑選錨定至目標功能后,松手釋放即可完成最后的功能執行確認。

          「長按+向上滑選」快捷觸發對應功能項;

          「長按+向下滑選」快捷觸發“快進”(一定程度上兼容老用戶對于此功能的使用習慣)。

          2)容錯性兼容
          在設定「長按+滑選」組合手勢的同時,考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程,我們同時也支持點選的操作模式,即用戶長按后若未產生滑選行為便松手,則松手后依然可通過點選的方式觸發對應播控功能項。

          3)易用性打磨

          差異化的創新設計形式在前期總會面臨質疑和挑戰,本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式,于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試,以預期在上線前可先收集一波體驗問題進行快速打磨優化。

          我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本,并邀請了10+名不同年齡段的目標用戶進行訪談測試。

          測試訪談的過程中,被測用戶在進行1至2次嘗試操作之后,均可掌握如何使用「長按+滑選」的組合手勢,這也為我們增添了不少信心。

          同時,我們通過觀察用戶操作行為及用戶主動反饋,發現仍有部分易用性細節可進一步打磨優化。

          3.1 )擴展觸發熱區:

          考慮到單手握持手機的使用場景,可盡可能擴大定義長按手勢的觸發熱區,屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外,其它大面積區域熱區均可支持長按觸發快捷菜單,以降低觸發難度、提升易用性。

          3.2 )支持跟手觸發:

          長按后浮出的快捷功能項,其浮出位置支持跟隨手指的縱向觸發位置而浮出,可減少手指在屏幕上的位移距離、操控更便捷。

          3.3 )實時提示及響應反饋:

          靈活判斷當前手勢觸控狀態(如滑入選擇 / 松手觸發),在界面中即時給出相對應的引導提示或振感反饋,以幫助用戶快速適應新的手勢觸發機制。

          方案上線及驗證

          以AB實驗對本次設計方案進行定量測試驗證:

          「對照組」效果:長按觸發“快進”(各播控功能入口仍歸置于基礎菜單面板之中);

          「實驗組」效果:長按觸發“快捷菜單”選項(支持滑選和點選模式);

          小流量實驗上線后,經過近半個月的觀察,大盤指標穩定、播放完成率等滿意度指標穩步提升。

          「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升,說明用戶對部分高頻功能的確有很強的快捷觸發訴求。

          「實驗組」的“快進”雖多了一步觸發步長,實驗前期“快進”使用率不及「對照組」,但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高,通過滑選觸發“快進”的操作習慣也快速被培養起來,對于用戶來說,長按快捷菜單帶來的整體收益是大于折損的。

          二期擴展方案
          隨著長按快捷菜單的上線推全,長按手勢的滲透率也持續走高,用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求,于是我們對長按菜單進行了二期的設計升級,在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能,用戶通過長按后的可選播控項增多,播控功能整體的使用量得到進一步提升。

          四、「組合手勢」拓展探索

          手勢交互是用戶在現實世界行為的映射,無論是基礎手勢還是組合類高級手勢,都須符合用戶認知習慣、并融入具體的使用場景中進行設計。

          以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐,我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。

          1.「右滑返回手勢」激活“小窗播放”

          “小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。

          基于用戶的此種操控意圖,我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口,隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖,若有短距上滑拖拽行為,松手釋放即可快捷激活視頻小窗,以提升觀看體驗的連續性。

          2.「雙指手勢」激活“滿屏播放”

          “雙指拖拽手勢”可拖拽并清屏視窗畫面,以此手勢發出交互信號,若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為,則松手釋放即可快捷激活“滿屏播放”,以滿足更沉浸視頻瀏覽體驗。

          五、結語

          便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑,從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發,后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。


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

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


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


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

          “老字號”互聯網產品的年輕化之路

          ui設計分享達人

          一、項目背景

          百度文庫APP是一個在線文檔分享平臺,上線已有十余年的時間,是一款名副其實的老字號互聯網產品。隨著互聯網的成熟以及年輕用戶的涌入,時代語境和流行文化發生了變化。年輕化設計已經成為互聯網產品設計中不可避免的話題。在日常對用戶反饋的監測中,我們發現文庫APP當時的體驗已經不能滿足用戶多樣化的需求。并且在體驗走查以及用戶訪談中發現,文庫APP的視覺風格、交互方式、使用感受都存在老舊、不貼合流行趨勢的問題。

          二、由內而外,打造年輕化感知

          通過對年輕市場進行洞察,我們發現年輕用戶對產品的需求是多維度的。不僅對產品的“顏值”有高要求,他們更追求使用時的便捷和流暢度。他們對新鮮事物的接受程度更高,也更愿意去探索產品新的玩法,與產品進行沉浸的情感互動。

          所以此次年輕化改版不能只是對“產品的外表”進行升級,要從視覺、體驗進行全方位、多維度的年輕化升級。由內而外的打造年輕化感知。



          三、“老字號”互聯網產品的煥新之路

          2.1 視覺升級-更好看















          2.2 體驗升級-更好用









          寫在最后

          從UI設計誕生初期,設計師在屏幕上模擬現實世界的交互方式,用擬物化的設計風格幫助用戶熟悉UI界面操作。到現在用戶對移動屏幕越來越熟悉,設計師們可以在產品設計中去嘗試更多的可能性。產品與用戶共同成長才是年輕化設計的意義。

          未來,我們也會保持好奇心和探索欲,不斷打磨產品體驗,與用戶共同成長。


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


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


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


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

          客戶交付設計 —— 開啟數字化轉型設計篇章

          seo達人

          數字轉型推動社會效率

          在阿里云設計中心有著這樣一只團隊,譜寫了這樣一些故事…

          “ 設計師成為逆行者,第一個定義健康碼體驗流程,為了百姓疫情防控出謀劃策。

          國民級應用不難用,新稅改讓人人都能三步退稅,五步報稅。

          全球卓越家具品牌體驗升級,讓家居行業供應鏈建立合作更加便捷。

          云上展廳,傳統會展線上化,數字化,讓廠家產品展示與投資突破空間阻礙。”

          有人問…這也是ACD設計中心的工作范疇嗎?是的,就是有這樣一支團隊,完成了上百家客戶的產品設計體驗護航,為大型企業和政府的線下交付項目提供有關產品體驗升級的設計能力,在第一時間響應客戶,奔赴現場,通過專業化設計解決方案,為項目提供體驗助力,用設計幫助客戶創造價值。在過去的十年,阿里累計了從底層基礎設施,IoT到協同辦公,大數據,AI,到軟硬件一體化的云平臺。致力于在數字經濟時代實現我們的夢想與使命:讓天下沒有難做的生意。這個夢想的漣漪,成為了今天阿里云設計中心肩負的責任:與合作伙伴一起,助力數字化的能力賦予更多政府和企業。

           

          設計打造客戶價值

          為什么要做這些事呢?數字經濟的發展讓越來越多的企業意識到數字化轉型是長久發展方向下可采用的一種成本更低,方式更靈活的解決方案。政府也在加快推進全國一體化在線政務服務平臺建設,實現“讓群眾少跑腿,讓數據多跑路”,一證通辦,一網通辦,一事聯辦,推動政府治理現代化,建設人民滿意的服務型政府。

          我們常會有相似的體感,一些傳統行業和對民眾服務機構,在數字系統和服務體驗質量上與科技互聯網公司還有著很大差距。往往承擔此類工作的軟件服務商,也更多是從架構、數據出發,從而忽視產品體驗和使用感官的重要性。

          因此,以政企客戶為主導的產品設計需求愈加凸顯,既要滿足客戶業務需求,也要滿足用戶體驗需求,設計已成為重要的一環,從底層到表層,滲透在項目交付的方方面面。我們依托于整個阿里云和數字轉型的契機,堅信只有把自身的設計經驗和能力注入進客戶產品中,才能更好助力阿里云政企客戶和伙伴,賦能整個交付生態。

           

          專業賦能業務探索

          ACD客戶體驗設計團隊非常重視能如何將ACD沉淀的設計經驗、方法、能力輸出到行業中,以阿里云在數字轉型中的重要作用為契機,更好的幫助行業企業、政府為公眾提供更優質的產品與服務體驗。這樣體量的項目,設計師能提供哪些具體能力呢?

          面向全球200多個國家和地區的數百款云計算產品,我們研發了Xconsole云產品一站式設計及研發解決方案,為產品體驗保駕護航;面對企業全面上云,我們搭建了一套完整而靈活的設計系統去組織云上生長的各種企業級服務,即B-Design企業級設計系統;面向成百上千的并行項目,我們基于項目管理作業流程研發了內部設計標準化交付平臺和數字生成平臺,為項目提供豐富設計物料和經驗累積;面對錯綜復雜多變的多端應用,我們在實踐中沉淀下來一套云產品使用體驗度量系統,包含UES度量模型,體驗管理機制和易用性測試和數字化管理的體驗工具集,同時我們也打造了一款深植于云業務體驗管理場景的NPS調研工具;面向不同產品生態,我們探索制定了一套一致性測評方法與度量指標,并歸納成了體系方法模型形成論文,以擴展摘要形式被CSCW收錄;面對特殊的用戶群體,我們進行了無障礙設計方法的研究探索;同時,我們與中國工業設計協會設計標準分會一起對外發布3項設計標準:《云計算管控平臺界面設計指南》《云計算軟件產品使用體驗度量模型及方法》《云計算軟件產品易用性度量》,另外3項《數據可視化大屏設計指南》,《云計算管控平臺無障礙設計規范與評估方法》,《云計算體驗設計標準作業程序》還在籌備中,計劃和業界一起合作發布…..

          圖片

          在設計專業道路上,我們持續深耕探索,并結合數百個項目實踐經歷,通過DPM (design platform for manufacture)設計生產平臺,高效產出行業數字設計解決方案,涵蓋領域包括、金融、數字政府、新零售等多個領域,我們的方法論和經驗體系經過多次驗證,確保方案的準確與高質。針對不同的客戶和項目階段,我們可以輸出獨立完整的產品咨詢體系,拉升項目、客戶、設計中心共同對體驗質量可關注度;遇到綜合項目也可通過NPS和體驗度量測試,更好的面向客戶的目標群體,提供服務。我們面對商業服務提升設計增值,對公眾服務提升使用效率與滿意感知。

           

          項目實踐成就客戶

          1.數據可視化助力疫情防控:你今天有綠碼嗎?

          2020年突如其來的新型冠狀病毒讓每個人都措手不及,疫情防控,關鍵是人的防控,任何一個環節的疏漏,任何一個節點的缺失,都可能讓已有的戰果付之東流甚至化為烏有。一個簡單的二維碼為不同人群在通行提供動態化數字憑證,小小“健康碼”派上大用場,通過科技的手段助力提升疫情防控效果,對打贏這場戰“疫”必將發揮至關重要的作用。

          圖片

          湖北“健康碼”的推行,是“數字政府”改革建設賦能疫情防控和社會治理的一項創新實踐。一方面,“碼”上通行更便捷,上班“企業打碼”、下班“社區掃碼”、出行“健康亮碼”,另一方面“碼”上監管更精準,依托紅碼、藍碼、黃碼、綠碼關注重點人。在設計的過程中,首先需要明確健康碼的定義、關注目標人群的操作習慣,確定各種碼顏色的優先級以及權重,通過集成電子病歷、健康體檢、生活方式管理的相關數據,在關聯健康指標和健康碼顏色的基礎上,探索建立個人健康指數排行,通過防疫健康碼的精細化設計更好助力疫情防控。

           

          2.助力納稅人合理節稅,放心交稅,高效辦理

          談到稅收問題,大部分人對稅務的相關法律法規了解不多,法律知識的不健全讓個人納稅申報“行走”艱難,高收入者對不主動申報者的處罰力度低。同時沒有稅務管理基礎型制度支持,想提高征收效果注定“心有余而力不足”。

          圖片

          基于現狀我們對個稅申報系統進行了服務體驗優化升級,讓系統具有非常好的靈活性和可配置性,從界面外觀到交互體驗對每個細節進行打磨,秉承人性化的設計理念,始終以用戶需求為目標而進行設計,讓用戶辦理事務過程更加高效,真正將政府服務于人的理念滲透到各方面。同時極大的方便了遠程辦理繳稅的納稅人,助力國家更好的保證打工人的納稅人權益,對于偷稅漏稅的個人和公司管控更加嚴格。

           

          3.體驗365天“永不落幕云上投洽會”

          中國國際投資貿易洽談會由商務部和主辦,有23年歷史,是國際展覽業協會(UFI)認證的全球規模最大的投資性展覽會。受到疫情的影響,同時得益于信息化技術的發展,“云展會”成為可能,更多的人不用去會場,在家可以體驗到更便捷、高效、實時的參會與交流。

          圖片

          阿里云攜手中國國際貿易組織傾力打造了“云上投恰會”APP,參展方可實現云上展覽、項目對接、招商洽談、論壇研討和云端簽約,目前已經有近60家展商入駐3D云展廳,集成各類投資項目。5G、人工智能、實時渲染3D大屏、VR等新技術手段,提供了身臨其境的云上參展體驗。其中VR技術的應用給用戶制造出了更加沉浸式體驗,通過一系列視覺線索及交互反饋來增強虛擬世界與現實世界的關聯,從人類認知及行為的基礎原理中獲得理論指導,充分利用虛擬空間打造最符合人們在現實當中的認知及行為規律的互動模式,讓用戶完全沉浸在虛擬世界中。

           

          4.數據服務體驗升級 – 實現實時,靈活,多維用戶洞察

          2021年1月,紅旗品牌以月銷突破32500輛的成績,邁入月銷3萬輛俱樂部,實現單月銷量再次突破;同比增長高達158%,當汽車銷售購買成為很多人的需求,觀看數據整理報表及銷售量就會尤為復雜,所有的業務歸根結底都是為了業務數據的提升和對比,數據查詢成為了領導關心的話題。

          圖片

          數據看板是公司驅動價值增長的重要工具,通過看板檢測核心數據、及時洞察業務問題、溝通各部門的解決方案,在領導與部門查看數據的過程中,可視化的方式混亂常常是最大的問題,通過專業的設計原則和色彩搭配讓數據看板變得更加專業,提高應用的效率是阿里云設計解決一汽集團痛點的最佳方式。

           

          5.卓越家居品牌升級-讓美好的生活不僅有詩和遠方

          美好的生活需要詩和遠方,更需要沙發和床”是紅星美凱龍董事長提出的品牌理念,如何讓大眾增強品牌的認同感,將消費者心中的產品效果無限放大是留給阿里云設計的困難之一。品牌使命也是品牌主張,是一個產品存在的價值與意義,建立起一個獨特且立體的形象,不斷通過渠道和產品與消費者建立聯系,就能夠在消費心中留下品牌烙印,建立認同。

          圖片

          在多端設計的過程中,我們不斷增強品牌的調性定位、提取品牌視覺的DNA,通過品牌色、插畫、紋理等設計視覺元素減少市場上同質化的設計,將界面設計與品牌的提升密切結合,增強品牌友好度、擴大品牌影響力、深入洞察與了解目標用戶。

           

          6.金融技術協助行業服務轉型升級

          隨著時代的發展,我們會發現保險行業出現了越來越多的保險類型和方式,一旦遇到重病,醫療費就如同流水般一去不回,對于普通家庭來說是一筆不小的開支,那么到底怎么買保險才比較劃算、比較實用、每個類型哪種好?怎么篩選適合自己經濟又保障的保險業務,也是生活中的必修課。

          圖片

          阿里云助力新華保險為用戶提供了豐富并可以篩選的業務,全面、優質的風險保障和理財服務,便捷、溫馨的服務體驗。7X24小時全年無休的投保咨詢及理財顧問預約、理賠報案、保單查詢、單證補發、聯系信息修改、回訪等內容。保險APP的服務升級開發方便行業轉型、增加用戶粘度、完善了銷售功能、同時創新購買模式讓保險與互聯網真正實現接軌,讓保險行業也逐漸繁榮起來。

           

          篇章延續新的起始

          客戶交付設計開啟了 to B時代產品設計篇章,接下來我們將會面對更廣闊的項目場景,也有更多專業領域需要挖掘沉淀。在后續文章里我們會分享一系列在實戰經驗中得出的方法和心得,包括:設計服務體系,競爭力打造,產品孵化與定價,商業項目數據運營,業務發展,交付設計能力模型與人才成長路徑,設計的商業價值探索,政企項目分析,設計中臺建設等等。希望能與你一起在數字化轉型設計的路上越走越遠。


          作者:阿里云

          轉載請注明:學UI網》客戶交付設計 —— 開啟數字化轉型設計篇章

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


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


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




          讓設計方案更具說服力的10個心理學原理!

          seo達人


          ??????

           

          1.格式塔原則 

          相似原則

          人的眼睛會把具有相似特征的元素當成一個整體,認為這些元素具有相同的作用。

          圖片

          ▲ 界面中的綠色圖標具有相同的功能,方便用戶快速認知和操作。因此在設計具有相同功能或內容的界面元素時,應該保持一致性。

          應用位置:導航、鏈接、按鈕、內容頁。

           

          連續原則

          用戶傾向于把連續排列的元素視為一個整體。這條原則與對稱性和相似性密切相關。通過在序列上創建相似且重復的元素,引導用戶的視線方向,使操作更加連貫和清晰。

          圖片

          ▲ 只露出一部分的卡片會向用戶發出信號,表示滑動可以查看更多的書。

          應用位置:菜單和子菜單、列表、產品頁、輪播頁。

           

          封閉原則

          當看到不完整的圖像時,我們會依據已有的經驗把不完全封閉的圖像當成一個統一的整體,這是在平面或logo設計中常用到的原則。

          圖片

          ▲ 盡管頁面右上方的餅圖只顯示了一部分,我們仍然能夠輕松地識別出來。

          應用位置:圖標、加載、數據可視化。

           

          鄰近原則

          人們會將彼此相鄰的元素視為一組。在設計時要注意使用間距將元素組合在一起。使用較大的間距來分隔大的內容組,再使用較小的間距來分隔大內容組中的小內容組。

          圖片

          ▲ 頁面上的每個卡片中都含有4組信息,很難快速識別具體的內容。通過調整間距,可以將這些信息清楚地分為2組。

          應用位置:導航、卡片、橫幅、列表頁、分頁。

           

          對稱原則

          我們喜歡看到對稱且平衡的事物。它是所設計領域中最常用和最安全的原則,有助于營造一種穩定感和秩序感。

          圖片

          ▲ 對稱的布局不僅增強了用戶的印象,還強調了中間的視頻播放按鈕。

          應用位置:產品展示頁、列表、導航以及任何內容豐富的頁面。

           

          共同區域原則

          通過信息分組和內容組織,實現內容的組合,有助于提升內容的層次結構和可掃描性。

          圖片

          ▲ 卡片式UI有助于將信息分組并創建內容的層級深度。

          應用位置:卡片、內容、服務、摘要。

           

          共同命運原則

          向同一方向移動的元素被認為比靜止或向另一個方向上移動的元素更相關。這個原則有利于建立不同分組或狀態之間的關系。

          圖片

          ▲ 頁面右側的3個圖形方向相同,有利于展示信息并讓用戶了解它們的功能。

          應用位置:導航/下拉、折疊條目、工具提示、產品滑塊、滾動條。

           

          2.焦點 

          看東西時,我們的視線往往會首先關注最突出的元素。理解這種行為有助于我們在設計中創建一個“錨點”,從而引導用戶按照我們設計的場景查看內容。

          圖片

          ▲ 通過人物插畫將用戶的注意力引導到賬單和人數等主要信息上。

          應用位置:內容、登錄頁、產品頁。

           

          3.馮·雷斯托夫效應 

          又稱隔離效應,相對于普通事件或物體,獨特、有特色的事件或物體更容易被人記住。應用此原則的元素通常獨立存在,不需要向用戶導航額外的信息。

          圖片

          ▲ 中間的升級插畫部分在整個頁面上是獨立存在的,并且吸引注意力是號召性用語或轉化的關鍵。

          應用位置:價格表、促銷頁、圖標入口。

           

          4.本能反應 

          根據現實中的用戶行為創建視覺上引人入勝的體驗。例如看幽默類視頻的時候,如果在視頻的高潮伴有笑聲音效,我們也會更容易跟著笑起來。

          圖片

          如果能讓用戶感覺良好和舒適,他們也會更喜歡我們的設計。

          應用位置:產品圖、插圖、攝影。

           

          5.色彩心理學 

          許多研究表明,顏色對我們的潛意識有特殊的影響。性別、宗教和文化對顏色的理解也有所不同。

          圖片

          ▲ 關于顏色的運用,這張色彩心理學海報介紹了豐富的方法。同時也要記住最廣泛使用的系統顏色:紅色代表錯誤;綠色代表成功;藍色代表進行中;黃色代表警告。

           

          6.形狀心理學 

          圖片

          ▲ 同顏色一樣,人們的潛意識對不同的形狀也有不同的反應:

          圓形、橢圓形:傳達積極的信息,通常與社區或關系有關;

          正方形、三角形:傳達強烈的信息,通常與強度和穩定性有關;

          垂直線:表示強度或力量。

          水平線:表示平靜、相等或安靜。

           

          7.雙重編碼理論 

          這個理論解釋了人類需要視覺和語言信息來盡快處理信息。為了最大限度地提高設計的有效性,不應該刪除必要的說明性文字。

          圖片

          ▲ 大多數App的底部導航欄都利用圖標與文字相結合的方式讓用戶快速知道功能。

           

          另一個好的設計案例:

          圖片

           

          8.并行設計 

          人眼傾向于看到平行因素比其他因素更相關。這一原理經常用來對同一頁面中的兩組不同內容進行分類。

          圖片

          ▲ 使用垂直排列的卡片代表相同的問題,水平排列的卡片代表不同的問題。

           

          9.公共區域 

          這一原理類似于格式塔原則中的相似原則。公共區域通過使用線、形狀或顏色劃分的方式創建。

          圖片

          ▲ 如果頁面需要用戶不斷滾動來查看內容,可以考慮使用顏色來更清楚地劃分這些內容,而不僅僅是使用間距。

           

          10.掃描模式 

          根據NNGroup、UXPin等設計團體的研究,最常用的兩種掃描模式是“F型”和“Z型”:

          “F型”應用最為廣泛,尤其是對于內容豐富的網站。

          “Z型”用于那些文字信息少,最后需要強調用戶點擊類的網站。

          關于掃描模式更詳細的內容可以查看我之前的文章:如何構建直觀有效的導航結構(上)

          了解如何使用這些模式后,我們就可以有效地選擇布局和安排元素來實現設計目標。

           

          最后 

          第一印象是最令人難忘的,好的體驗可以在用戶與產品之間建立持久的聯系。


          作者:Hoang Nguyen

          譯者:Clippp

          轉載請注明:學UI網》讓設計方案更具說服力的10個心理學原理!

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


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


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




          干貨遲到了,但三魚不會讓它缺席2

          seo達人

          產品體驗設計師的核心價值

          一款產品,本質是提供服務以解決某個用戶問題。因此產品體驗設計師對整個業務的核心價值一定是解決用戶/業務問題,其次才是帶來美的感受。“產品設計師的價值取決于業務需要他貢獻出多大的價值”。如果你認同這個觀點,你就能理解接下來的兩個觀點。

           

          交互創造價值的機會大于視覺

          交互在工作流程上在視覺上游,產品問題的討論一定是先基于交互,所以在交互領域解決問題的機會遠遠多于視覺。因此在產品體驗設計中,交互創造價值的機會往往大于視覺。所以我的建議是:體驗設計師可以做純交互,但盡可能不要做純視覺,工作中一定要觸及交互部分。

           

          B端體驗設計創造價值的機會大于C端

          價值,應該是所有大廠設計師都被問到過的點。不管你的價值陳述對象是誰,本質上都是陳述給業務方,區別僅僅是由你直接陳述給業務方,還是由你的上級將大家的價值匯總打包陳述給業務方。

          所以,業務方愿意買單的價值才算價值。

          作為一個C端B端都待過的設計師,我說說二者的特點:

          C端產品功能少+簡單(面向小白)、產品體驗有競品可參考,因此體驗設計難度可控。

          B端產品功能復雜+龐大、競品參考成本高 (賽道小眾(無競品)、專業門檻(跨行業)、收費門檻(企業版定制)),因此產品體驗難度更大,業務只能依賴設計師所給出的體驗方案。

          從前文的觀點“產品設計師的價值取決于業務需要他貢獻多大的價值”來看,B端體驗設計的難度更高,所以B端體驗設計創造價值的機會應該更大。

          坊間傳言:tb的設計團隊據說有上百人… dy的設計團隊據說有數百人… wx的設計師連按鈕是圓角還是方角都要展開討論,還要做ABtest… 三魚講個小故事吧:

          在C端的工作就好像在一艘裝滿水手的大船上

          你在船上被分配到了負責擦拭桅桿的工作

          你需要思考如何在擦桅桿的工作中展現自己的價值

          于是你研究了不同擦拭工具的工作效率

          研究不同溫度、濕度下的桅桿油漆磨損情況

          你越研究越癡迷

          這份工作看似簡單,但其實

          有很多可以深挖的點

          有很多值得研究的課題

          甚至你的價值看起來還很好衡量

          畢竟在大船上

          哪怕是一根桅桿都會被天天使用

          看來這真是一份有價值的工作

          畢竟

          體驗設計就應該做到嚴謹且錙銖必較嘛!

          可以思考一下,倘若一個領域能創造價值的機會已經很少了,那就意味著這個領域的競爭會變得殘酷且事不由人。大家論證價值的成本越來越高,邊際收益越來越低,俗稱“內卷”…

          再來看看B端,B端體驗設計師往往可以負責一個完整產品(甚至多個),設計師會負責產品的框架搭建、邏輯梳理、頁面設計、品牌、官網、運營等一系列設計。有趣的是,由于B端設計往往都是創新項目,產品經理其實對這個產品該是什么樣的也沒有清晰的認知,最終的產品形態往往是設計師和產品經理一同討論出來的,設計對業務的價值不言而喻。

          如果還是套用那個故事,在B端工作,你所負責的可能是一艘小船,你的注意力不再是這艘小船的桅桿是否擦得夠嚴謹科學,而是這條小船的航道、動力、擴建規劃等,這些將會更有意思。

          工作難度決定價值,價值與職業壽命掛鉤,職業壽命決定了焦慮感。那三魚的建議也不言而喻。

           

          動態思維是B端交互很重要的能力

          一直以來我們把動效歸為視覺能力。但事實上,動效背后的動態思維應該是交互尤其是B端交互必備的能力??纯聪旅孢@幾個案例中設計師所解決的問題。

          案例1

          下圖是AE的界面,當用戶不選中任何圖層時,點擊“形狀工具”,可以新建一個矢量圖形,但當用戶選中某個圖層時,再點擊“形狀工具”,該功能則變成了給用戶選中的圖層創建蒙版。我相信用過AE的人,都見識過這個鬼畜的交互:即同一個按鈕卻有兩種不同的含義。

          Adobe After Effects-“形狀工具”

          在我所負責的一款數據分析產品中,也遇到了類似的問題 (即用戶點擊圖表icon可以新建一個圖表,用戶選中某個已有圖表時,再點擊圖表icon則是切換該圖表的類型)。

          因此在2.0版我們嘗試將 “創建圖表” 和 “切換圖表類型” 兩種場景區分開??梢钥吹较聢D中,圖1和圖2都解決了這個的問題。但圖1的方式是直接將其拆分成兩套功能區,雖然解決了問題,但也讓導航的內容變得冗余。而圖2的方式則更為巧妙,拆分功能區的同時,利用鼠標的點擊和失焦,用動效的方式讓用戶感知到場景的切換,不影響操作的同時還節約了導航空間。

           

          案例2

          在一款數據產品中,我們上線了一款新功能,對用戶有很大的學習成本,于是我們計劃在承接頁放一張功能全局流程圖,它既可以對新功能有一個系統的介紹,同時也可作為功能入口快速定位想要的模塊。但問題來了,由于功能復雜,導致流程圖上的信息體量太大,倘若完整展示,則會超出一屏空間,用戶就很難看清完整的功能流程。最終我們通過動效手段,兼顧了“模塊介紹”和“流程展示”,這種展現形式也被業內好評,還被華為云等多家云服務廠商所借鑒,現在大家在很多B端產品中都能看到我們的影子。

           

          案例3

          以上兩個案例比較復雜,再舉兩個簡單的例子:B端產品限于專業性,表單信息通常很長,所以為了表單信息能盡可能完整展現,我們在下拉框展開的瞬間,往外“借”了一部分空間,以展示更多的信息。

           

          案例4

          這是一個“邏輯表”,一個數據模型中通常有N個邏輯表,信息密度極大,因此我們要盡可能節約空間,所以我們在不影響用戶使用效率的基礎上,把搜索框“收”了起來。

          有沒有發現這幾個案例解決的都是交互問題,而且是直接影響用戶感知的交互細節問題。我們可以看到,在不具備動態思維的時候,交互在面對“信息過載”這個B端繞不過去的課題時,唯一的解法只有“平鋪”一招,但這招在面對復雜問題時明顯不夠用。而一旦具備動態思維,交互設計師就可以從“時間(出現順序) + 空間(疊放層級)”兩個維度對信息的展示進行重組,解題能力將大幅提升。

          不止是前文提到的“信息過載”… 諸如“提升操作效率”、“降低認知成本”、“數據可視化”也全是B端體驗中對用戶體驗影響極大的課題,對于交互的工作,也不僅僅只有產品框架的梳理,還有產品細節的打磨,尤其是一款產品成長到后期,一定會圍繞體驗細節精細化打磨,只靠“靜態平鋪”這一招恐怕遠遠不夠解題,而動態思維能拓寬B端交互在細節上的解題思路,對交互而言是很重要的能力。

           

          視覺創造價值的機會大于交互

          我瘋了嗎?明明前面才說了“交互的機會大于視覺”。三魚解釋解釋:對業務而言,交互的機會往往大于視覺,但對設計師自己而言,“交互”是一種必備的但不易被證明的能力,反之“視覺”是一種錦上添花的但容易出彩的能力。

          再說詳細一點:在設計師的職場博弈中,“交互能力弱”有可能會成為你的短板,但“交互能力強”卻很難被塑造成你的長板,因為它的論證成本極高,尤其是在B端復雜的業務場景下。與之相比,“視覺能力弱”往往不會成為一個設計師的短板,但“視覺能力強”則可能成為一個設計師的長版,因為它的論證成本極低。不要小看論證成本,晉升答辯通常只有15-20分鐘,如果不能在極短時間內論證清楚自己的能力(價值),就會很吃虧。所以短時間內把自己的能力(價值)論證清楚極為重要。

          根據我的經驗,短時間內將“交互”論證到“強”的難度遠大于將“視覺”論證到“強”。所以成本最小、收益最大的方式應該是將交互論證到“不弱”+將視覺論證到“強”的能力組合。

          但現實是幾乎所有大公司的體驗團隊,視覺設計師往往被交互設計師“壓著打”。因為“交互”是必備能力,“視覺”是錦上添花能力,“視覺能力弱”并不算短板,而“交互能力弱”卻是明顯的短板。在大部分設計師都談不上具備明顯長板的前提下,在職場博弈中,存在明顯短板的一方一定會輸,也就是說視覺一定會被交互壓著打。所以如前文所講,三魚建議:“體驗設計師的工作一定要觸及交互部分”。

          所以標題可以完善一下:“在交互已不是短板的前提下,視覺創造價值的機會大于交互”。

           

          三魚的做法

          (這一段是題外話)既然講到這里,大概能理解三魚的做法了吧?我在站酷所發的作品,都是英文排版+動效展示,目的就是只展現視覺的“強”,因為它是一種觀眾只需要“看”就能感受到的、論證成本極低的能力,很適合線上場景。倘若有聽過三魚線下分享的同學就會發現,同樣的作品我在線下會花很大的篇幅講出背后的交互思考,因為要想論證清楚交互的“強”,就離不開闡述業務原理,這是需要觀眾付出“看+聽+提問互動”的理解成本才能get到的,因此只有線下場景才比較適合展現出交互的“強”。

          嗯,雖然前面說了交互的論證成本很大,但誰規定了“視覺”和“交互”必須要孤立論證。有機會我也分享一下體驗設計該如何論證交互的“強”。

           

          B端的劣勢

          我不喜歡很多人鼓吹的“B端是一片藍?!保路疝D行B端就進入職業發展的快車道一樣。三魚必須坦言,B端比起C端,同樣存在著極大的劣勢:開發成本大就不多講了,B端產品往往服務于一小戳群體的工作,這些用戶群體本身數量較小,而且很多還是新興職業,所以B端產品發展初期的用戶體量都很小。那么就帶來一個問題,一小戳用戶的收益往往短時間攤不掉研發成本,如果沒有公司戰略上的強投入,那么產品更新迭代將是極慢的,甚至90%的產品會因為收益不足,永遠停留在1.0版,也就意味著大部分B端產品可能連體驗流程都無法閉環,更別說打磨體驗了。這些問題在C端不容易遇到,但在B端卻很常見。

          這也就導致了開發資源都優先投入到功能研發中,留給體驗打磨的開發資源很有限,這會影響設計師的價值論證。我親眼見過一些設計師負責了很多1.0的B端項目,這些產品在幾個核心功能上線后,就停止更新迭代了,產品經理和研發只在意核心功能能讓用戶用起來,至于體驗是否流暢,流程是否閉環,對他們而言并不重要。因此這些設計師忙了一年,卻沒有一個可以論證自己價值的體驗設計故事。這在B端是一個普遍現象,是B端相對于C端的劣勢。那些只講B端的好,不講B端存在問題的言論是不負責的。

          當然,哪怕存在這樣的劣勢,B端體驗設計依托復雜業務所帶來的價值優勢依然是C端無法比擬的。而B端的劣勢其實是可以克服掉的,也就是接下來我要分享的“干貨”。

           

          干貨來了

          先說說上次那篇文章中,我認為通常情況下設計師要講出有價值的好故事主要靠兩點:

          1. 時+運:B端產品更新迭代慢,你如果有充足的耐心陪伴它成長,且它足夠好運地成長起來了,且你也足夠好運沒有被中途變更業務,那么恭喜你總算等來了一個講出好故事的機會。但目前互聯網早就過了野蠻生長的時期,這種機會已經越來越少了;

          2. 權力:依靠你能調動的資源,以體量來堆出一個好的體驗故事,比如造輪子。好處是簡單粗暴,故事往降本提效上講業務肯定是買單的,缺點是輪子不能經常造,造多了就不降本了。而且故事的效果受限于業務體量,有多大體量講多大故事,所以這種故事更多地適合大廠的管理層去講。但這似乎就把雞和蛋顛倒了,倘若設計都熬到這個位子上了,又何必來等我的“干貨”呢?

          所以在過去兩者都不具備的前提下,我有一招自己的玩法。先來看一個案例:

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

          如果你把案例中的視頻看完,你大概能感受到這是一個涵蓋了產品框架、角色路徑、界面設計、品牌設計的還算蠻大而全的方案,雖然限于保密,對外只能看視覺,連Logo我都不敢多解釋兩句。所以我大致講講:一開始,產品經理所提過來的需求僅僅只是幾個核心功能的設計需求,大概4-5頁原型圖,這時大部分設計師可能會按照原型圖把交互和視覺完善,然后產出設計稿的標注和切圖,交付開發。

          但三魚了解完業務之后,發現這個1.0的需求用戶的路徑并沒有閉環,于是我繼續深入理解業務,為產品定義了三種不同的使用角色,并根據每一種角色的訴求推導出場景和體驗路徑,從而重新梳理了整個產品框架,補全了缺失場景。

          然后將產品能力集成并可視化展現出來,最終交付了一套流程閉環、交互創新、視覺感知強烈的體驗方案。

          這套產出令業務很驚喜,也認可了整套方案并愿意為之投入開發資源。但三魚實話告訴你,目前大半年過去了,我所提交的方案被開發上線的只有60%,因為目前的用戶體量實在支撐不起更多開發人力投入了,所以哪怕那40%的功能是對的,也需要很久以后才能開發上線。

          但沒有關系,對我而言,我已經得到了一個流程閉環、交互創新、視覺感知強烈、能充分反映設計價值的故事了。

          這便是三魚的思路,概括下來就一句話:把1.0的需求按3.0的質量產出。畢竟當現實條件無法支撐你展示自己的價值,那就自己創造機會去展示??窟@個思路,當別人還在耐心且不確定地等待業務慢慢成長時,三魚已經在短時間內積累了大量優質故事,這也讓我的職場博弈占了優勢。

          這里有個問題:就是我創造的價值,并不是業務方當下買單的價值,似乎與前面我所說的觀點有出入。

          這里我要再講一個觀點:設計對業務的價值不一定以設計師對當前業務的價值為轉移。通俗來說,所有業務方都希望自己的產品是功能完善、流程閉環、體驗舒適的,這個訴求可能會因為當下開發成本的短缺而被抑制,但卻是可預見的只要條件成熟業務就一定會產生的訴求。因此設計師主動往前走一步的做法一定是業務方所認可的,哪怕最后沒有開發人力落地這些設計,業務方也清楚是現階段的業務水平所導致的,而不是去否定設計的價值。而對于設計師而言,只要你提供的設計方案是超預期的,總有一天會有優質的業務場景愿意為之買單 (意會) … 總之,“把1.0的需求按3.0的標準交付”是一條經過三魚驗證過的行之有效的手段。

          以上輸出的都是認知,認知的提升會帶來成長的幻覺。但事實上,哪怕你知道了動畫對交互的提升巨大,但不具備動畫能力也是空談;哪怕你知道視覺創造價值的機會更大,視覺能力不夠成為你的長板也是空談;哪怕你知道把1.0的需求按3.0來產出收益巨大,你不具備3.0的視野也是空談… 認知更像是臨門一腳的點破,手上功夫才是你的基本盤。

           

          手上功夫的成長

          最后聊聊成長,三魚的經歷可能會給你一些參照吧。先附上我的培訓班作品,這就是三魚最初的水平,那時我已是工作了兩年轉行的狀態,年齡和經驗都很吃虧。

          培訓班作品-《愛情小管家》

          但三魚運氣還算好,趕在互聯網的末班車進了大廠。這保證了我的成長環境至少是不錯的,也更有機會接觸到一些好的產品、優秀的設計師,能學到更多的東西 (說真的,當初能進大廠,也許有能力的加持,但更多的要歸功于時代的運氣)。

          但進了大廠也未必就踏上了快車道,大廠的競爭很激烈,好的項目機會從來都是搶手貨。從培訓班出來的我,因為沒有工作經驗,被分配去做廣告圖優化,三魚先解釋一下這個工作:就是客戶在我們的產品中投放廣告,有些客戶投放的廣告點擊率并不理想,為了確保客戶的推廣費花得值 (不然人家不投了),于是我們會對一些不理想的廣告圖進行設計優化。對設計師來說,這些廣告圖的質量參差不齊,且沒有源文件,優化工作是一件繁瑣且低價值的事。這種事,很適合我這個剛轉行的菜鳥來干。下圖是一些我優化過的廣告圖,這就是三魚在大廠一開始的主要工作。

          廣告圖優化

          這對當時的我來說已經很滿足了,畢竟能創造價值、能挺過試用期三魚就謝天謝地了。于是我很認真地完成手上的工作,還沉淀了一套廣告圖優化“方法論”,比如把廣告圖分為電商、工具、游戲、社交等,每一種類別有特定的優化方式,還附帶最后的數據驗證… 嗯,這是我第一次接觸 “大廠套路”。

          看我廣告圖優化得還不錯,于是主管給我新增了一項任務:我們團隊每天都要在Facebook上發一條動態,每條動態都會附一張配圖,所以每周我需要畫5張運營配圖。

          日常運營支持

          日常運營配圖所要求的質量并不高,倘若只是按可交差的水準來產出設計,這5張圖其實費不了多少功夫,于是三魚決定利用富余的時間去錘煉自己的專業能力。具體來說:每周一業務方會告知本周需要繪制的5個主題,我會用一天的時間把其中4個主題快速地畫完交差,然后留一個自己最感興趣的主題,去設計平臺上學習新的風格,并結合主題去創作。比如下圖的產品矩陣紀念日:https://www.zcool.com.cn/work/ZMTQ4MTQyMDg=.html  。就是花了心思去做的。

          產品矩陣紀念日

          再比如美食節活動:https://www.zcool.com.cn/work/ZMTUwNDk4NzY=.html  。我不僅嘗試了新的風格,還給它加入了愛情故事。

          還有一些名人名著的紀念日閃屏:https://www.zcool.com.cn/work/ZMTY3MTkzMjg=.html  。

          于是我就一直用這種刻意練習的方式,把自己的手上功夫越練越扎實了。而對于業務方來說,本來預期就不高,偶爾還能收到三魚超預期的設計交付,自然是很欣喜的,于是對我的評價也很高。

          隨著我的交付質量不斷提升,業務方的預期也越來越高。一次在別的設計師的運營事故中,業務方指名要三魚來設計。于是我站出來救了場,這次事件過后,大家突然意識到我不是一個初入行的菜鳥了。

          地球一小時

          但三魚的目標還是想往產品體驗方向發展,但產品設計的機會是很稀缺的。但三魚隨即等來了一個機會:我們的核心產品要進行一次體驗升級,這種級別的項目只有最資深的設計師才能參與的。所以我們的主管選了三位資深設計師來比稿定方案。

          三魚很積極地表示自己也想參與比稿,不僅表達了自己的職業規劃,還保證參與比稿不會耽誤手上的工作。由于我之前的工作中已經積累了不錯的口碑,主管同意了我的請求。

          我很珍惜這樣的機會,于是一口氣出了兩套方案 (都在站酷中)。

          但現實很殘酷,大家并不認可我作為一個設計新人的實力,我的方案在一開始的內部評審中就被提前“斃掉”了 (其實這很正常,沒有人會相信一個新入行的設計師的實力)。不過主管考慮到我認真的態度,雖然讓我失去了上臺提案資格,但還是把我的兩套方案作為“更多風格探索”放在PPT的最后了…

          三魚的兩套方案

          但戲劇性的一幕又來了,提案的過程很不順利。可能是因為那時流行扁平風,但過于千篇一律導致幾個大領導看膩了,反而認為我這種帶質感的方案讓人耳目一新。結果我的陪跑方案居然奇跡般地被采納了…

          這可把三魚牛逼壞了,當晚我把這個結果告訴小白,小白叮囑我:“這個時候很尷尬,這么重要的項目不可能完全交給你這個新人來負責,你現在最好的做法是一定要低調,明天去了公司別吭聲,等你的主管來找你聊,聽安排就是了,切記切記,我看你已經飄得不行了”!

          于是第二天三魚全程裝蒜,默默地等待著。果然!主管來找我了,希望我能加入到產品改版的項目中來,她會安排一位資深設計師帶著我一起做,至于我手上目前的工作,就交接給其他設計師吧。于是三魚開開心心地服從了安排。

          噢對,由于原來業務方對我實在太滿意了,這次的業務調整,那些業務方紛紛跑去請求我的主管“讓三魚再為我們畫最后一張吧…” 我也被主管戲稱為設計團隊的“頭牌”。

          寫到這里,三魚算不算靠努力與運氣就走上快車道了?事實上還早… 目前為止我的手上功夫還僅限于PS用得不錯罷了,其它能力為0。而能力的欠缺很快就讓我遇到了難題。

          那就是:動效設計師不干了。

          以前的一些大廠會設置專門的動效設計崗,由一位擅長動畫軟件的同學來幫其他設計師實現動畫上的創意演示,但這種“只能替別人實現創意”的工作模式,對動效設計師的職業成長不利,于是越來越多動效設計師轉行去做產品體驗。

          這可苦了那些不會做動效的設計師 (包括三魚),工具類的產品,對動效的要求比較高,倘若沒人替自己實現腦海里的動畫創意,工作對接就很吃力了。

          所以只好去學。三魚覺得動效比3D還難學,它難在幾乎找不到針對性的動畫教程,那時我能從網上找到的動畫教程全是教“影視后期”的??蓻]辦法,只能硬著頭皮學,不然我的創意就不得不妥協于手上功夫了。于是三魚一路東拼西湊,艱難地把動效學會了。

          下圖是我做的第一個動效,一開始我只會簡單的位移旋轉,動畫雖然生硬,但好在PS畫的素材質量本身不錯。

          這是一年以后的水平,那時我已經能3D+動效結合著玩了。

          說到3D能力,也是在這期間,我和小白一起報名了第一期的白無常C4D課程培訓班 (三魚喜歡抱團學,可以互相監督,一個人學很容易半途而廢),我還把學到的東西應用到了實際工作案例中。

          當我把這兩張圖發給白無常老師看的時候,老師很詫異:“我沒有教角色建模呀”?其實圖里的熊是PS畫的,說明那時我的PS水平已經比較強了。

          說到PS繪畫,這種風格受李舜影響比較大。在李舜的風格剛出現的時候,我覺得很驚艷,就去學習了她的畫法 (她寫過一篇教程,感興趣的朋友可以去她的站酷找找)。下圖的IP算比較出名的了,因為這套作品時不時被我發現放在了某些淘寶店里掛羊賣狗…

          那段時間是我過得最快樂的時候,我同時負責產品體驗和品牌設計,包容的大廠環境也給了我學習和應用新技能的空間,一年的時間我的手上功夫突飛猛進。

          再后來去了福廠,那是三魚最痛苦、但也是成長最大的經歷:

          我遇到了一個很糟糕的主管,在福場的三年多時間里,三魚一方面依托平臺加速成長,一方面對抗來自主管的PUA,并最終完成了反殺。細節不多講了,說說最后的結果吧:這三年里,我的績效全是最優(憑借著無法否定的能力和成果,三魚逼著主管給自己打了好績效),反觀這位主管,三年里有兩年拿了最差績效,最后被迫轉崗…

          我在福廠的成長不僅是手上功夫,更多的成長是“認知”,而后者對我的職業突破起了決定性作用。但這段經歷很痛苦,如果說在百度的成長是技能上的成長,它是一個逐漸變好的過程,是愉快的,那么在福廠的經歷更像是把人打碎以后的重塑,因為認知的成長一定是伴隨著否定、懷疑、焦慮的,三魚在其中艱難地探索出了一條可能是對的的路,以后有機會再慢慢分享吧。

          回想起來,三魚算幸運的,我趕上了互聯網的末班車,在狼廠寬容的環境下鍛煉了能力,在福場如日中天的階段實現了個人的成長。但三魚也是不容易的,我的成長經歷并沒有大家臆想的那么一帆風順。大廠的競爭非常慘烈,被打碎以后是一蹶不振還是再重塑?這么多大廠設計師,能出頭的有幾個?玩明白的又有幾個?

           

          寫在最后

          這篇文章真長,如果你能耐心讀完… 嗯,算你厲害。我最后再總結一下吧:

          前半部分講了認知,是三魚基于自身環境所形成的認知,但這些認知希望大家斟酌著看:第一,它是基于三魚的成長路徑和自身條件所得出的,未必適合所有人;第二,行業是不斷發展的,認知也不會一成不變,也許一年以后這套認知就失效了。

          后半部分講了成長,當然主要集中在專業上的成長,這也是目前大部分設計師更需要的,也是比較適合在站酷分享給大家的。

          認知可以讓你們前進的過程中少走彎路,但是技能才是推動你前進的核心動力。三魚能講的東西還有很多,后續再慢慢聊。

           

          原文地址:站酷

          作者:三魚先生

          轉載請注明:學UI網》干貨遲到了,但三魚不會讓它缺席2

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


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


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



          如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

          seo達人


          圖片

          現如今企業都在不斷追求打造簡單好用的產品,期望在產品中有更多的功能,更新的技術以及更強的能力但仍然能有一個非常輕量和簡單使用體驗。但通常情況下,做減法反而是最難的事情。

           

          一、如何定義”簡單“?

          我們可以把簡單定義為容易理解,不難做到的事情。然而簡單是主觀的,某些事情對某些人來說簡單,但對另一些人來說又會很難。一般來講,我們對任何簡單或復雜的過程形成個人意見,大致分為三個階段:

          圖片

          為用戶在實現他們目標的路上消除困難,幫助他們輕松的到達目的地。John Maeda在《簡單法則》一書中提出了在商業、技術和設計中平衡簡單與復雜的十條法則,核心思想就是希望做更少的動作但得到更多。

          圖片

          《簡單法則》 John Maeda: http://lawsofsimplicity.com/

          Maeda是MIT媒體實驗室教授,也是世界著名的圖形設計師,他一直在探索如何重新定義”改進“的概念,使得這個概念不再人云亦云。這本書非常不錯,所以推薦大家去看看。

           

          二、什么是復雜的?

          談到簡單的時候,需要考慮到它的反面范圍。簡單或是復雜是比較主觀的感受。經過適當的培訓,即使是造火箭都可能不會那么難。但有幾個因素會使非常簡單的任務復雜化。在產品設計中,應該盡可能地避免以下這些情況:

          圖片

          我們應該如何應用到產品設計中?

          1、建立產品的核心價值

          有許多產品都希望盡可能地滿足所有用戶,然后成為行業中領頭羊。如果你希望你的產品變得簡單,就需要定義產品的核心價值,并且確定你真正想要服務好的用戶群體。不是每一個產品都需要內置一個facebook。

          圖片

          2、移除掉任何不必要的元素

          變簡單最直接的辦法就是深思熟慮地做減法。當你猶豫這個元素要不要拿掉時,拿掉就好。次要信息,不經常使用的控件需要處理,把樣式盡量弱化。就是這么簡單,一旦你使用這個原則后,效果是立竿見影的。只是你需要考慮清楚,哪些需要移除掉。

          圖片

          ”簡單不意味著沒有復雜的功能,只是在結果上簡單。簡單是某種程度上描述一個物件和產品的目標及位置。不復雜是說產品本身的功能設計不是雜亂無章的,要做到這一點并不簡單。“——Jonathan Ive(蘋果的喬納森)說。

          3、數據轉換為更直觀的樣式

          我們日常設計的大多數產品都聚集在用戶需要理解的大數據上,以便有效地執行他們的日常任務。當你知道用戶對于趨勢和變化更有興趣,把數據可視化會比單純的數字表格對用戶來說更有幫助。在數據圖表中,還可以根據需要顯示更多有價值的信息,并將這些直觀呈現在用戶的面前。

          圖片

          4、支持快速決策

          用戶被各種選擇狂轟濫炸,不得不花時間去理解和決定,給他們增加了不必要的工作。這里可以用一個非常著名的希克定律來解釋,選項增多會增加用戶做決定的時間和精力。所以,如果你想提升用戶體驗,讓用戶感覺到簡單,那么就盡可能地幫助用戶更快地做出決定。盡可能地減少不必要的選擇。

          圖片圖片

          5、太多的選擇會嚇跑用戶

          當前的心理學理論和研究肯定了個人選擇對情感和動機的積極影響。這些發現導致了一種流行的觀念,即選擇越多越好——人類管理選擇的能力和欲望是無限的。但在現實中,研究證明了相反的情況。

          Jam實驗是消費心理學中最著名的實驗之一,減少消費者的選擇有利于銷售。重要的是,研究表明準確地提供較少的選擇可能會提高你的銷量。

          圖片

          這個實驗似乎證明了,與選擇較多的顧客相比,選擇較少的顧客購買的可能性是前者的10倍。它一直是選擇過多的一個關鍵例子,即給顧客提供太多的選擇實際上會抑制顧客購買。

          圖片

          6、在有多個選擇的時候提供建議

          當多選不可避免時,試著增加一些建議。給選擇增加推薦選項,或分享其他客戶最喜歡的數據。通過設計清晰地向用戶傳達選項之間的關鍵區別。這種方法通過用于選擇不同套餐的界面。

          圖片

          7、將用戶的注意力吸引到正確的區域

          當你理解用戶實現目標的過程時,每個步驟都有一些更相關的內容,這些內容將幫助你朝著最終目標前進。找到這些關鍵區域并讓用戶能聚集在這些區域上。(彩云注:給操作設定好清晰的優先級)

          圖片

          8、使用顏色和排版來傳達內容的層次結構

          你應該經常能聽到——”用戶不喜歡閱讀“。這沒錯,我們對能記住和對需要深入了解的東西是有選擇性的。如果你曾經一個字都不愿意讀就選擇同意了用戶協議,你肯定懂我的意思。有許多因素會影響傳達:字體類型、尺寸、字間距、行距、大小寫、顏色。用這些要素來組織內容的結構層次,使用正確的顏色和字體,將能夠增強品牌感,使其更好地被識別,更有吸引力和記憶。

          圖片

          9、合理的組織能夠幫助系統看起來更簡單好用

          讓我們做一個簡單的測試。下面的2張圖片,用秒表來記錄下你大概花多久時間數完所有的黑點。

          圖片

          結束了嗎?就像你自己會看到的那樣,計算不規則的圓點方塊會花費更多的時間,除此之外,還會給你帶來更多的認知負擔。為什么我們會得到這個結果?因為正方形中有相同數量的點。

          把這些點擺成一個特殊的矩陣,在視覺上可以幫助掃描,成組的非常好統計。在左邊沒有組織的方塊中,我們必須逐個計算。另外,對于左圖來說,有時候你還可能會統計錯誤,需要再次確認才能放心,太麻煩了。

          圖片

          組織好的元素不僅僅好認,而且還非常好記。不論是操作什么樣的產品,記住所有控件位置和功能非常重要。讓我們做另一個小練習,一分鐘前,你還在認真的數兩張圖中的點,現在請你回憶下兩個正方形中的每個點的位置。對大多數人來說,回憶這種無序的結構幾乎是不可能的。

          圖片

          10、將內容分組

          簡化一個頁面,有一個簡單的辦法就是把內容進行分組。此時,用戶在處理組信息時,精力耗費很少,而不是要看大量不相關的元素。在元素或元素組周圍添加邊框是創建與周圍元素分離的一種簡單方法。格式塔心理學中有多種分組原則可以幫助物品產生關聯性:接近性、相似性、連續性、封閉性和連通性。

          圖片

          11、把大任務分解成小步驟,嘗試用一列來布局

          現在幾乎每個產品中都有不同的表單,為了收集你的資料。有時候即使去掉所有不必要的東西后,它依然會很復雜。這些表單會讓用戶失去完成的動力。所以我們能做的就是把這個大任務分解成一系列的小任務。眨眼間,把這個過程進行到底似乎變得容易多了。完成小的子任務會給用戶帶來一部分內啡肽和繼續進行的滿足感。

          在設計這個表單時,用單列布局替代多列布局。單列布局更容易填寫。這樣用戶就不大需要考慮下一步要填什么,只需要沿著直線向下移動填完就好了。

          圖片

          12、及時告知進度和當前狀態

          不確定性讓我們感到焦慮,在操作過程中應該盡可能地給用戶確定的信息。用戶需要知道他現在的位置,下一步要做什么。常駐一個信息進度摘要會是一個非常棒的做法,能讓用戶降低認知壓力,并能方便退回前一步確認信息。

          圖片

          13、幫用戶自動計算

          人類大腦不擅長涉及數字的原始計算。嘗試讓系統自動完成所有計算對用戶來說會有更好的體驗。

          圖片

          14、采用漸進式呈現復雜信息

          漸進呈現是UX設計中更容易讓用戶理解的一種用戶界面設計模式。它涉及到在多個界面上排列信息和動作,這樣就不會讓用戶淹沒在無關信息中,直至優化到所有信息都強相關。漸進呈現屬于從”抽象到具體“的典型概念,包括用戶行為和交互順序。一個非常好的漸進案例就是iOS的嵌套開關設置界面。

          圖片

          15、設計普遍接受的模式和交互

          用戶將大部分時間花在其他產品上。這意味著用戶喜歡用在其他產品上他已有習慣來使用你的產品,他們會對你的產品的外觀和性能有特定的期望。

          這句話適用于從互聯網產品到你家冰箱的任何數字或實體產品,反映了用戶心態。但這并不意味著你應該停止創新,更多的是評估背離傳統的導航或控制方式是否能讓用戶改變他們的思維模式。

          圖片

          16、設計一個精簡的新手引導

          設計的主要目標是為了將用戶與產品提供的價值聯系起來。任何阻擋在用戶和他實際操作之間的東西都是障礙,除非它服務于功能性需求。首次體驗對于產品來說非常重要,我們人類會很快形成對產品的看法,當我們不滿意就會立即離開。

          你在第一次操作時,即使是最簡單的任務也可能是一項挑戰。有時在我們操作產品之前需要額外的學習。在數字設計中,用戶期望的是產品應該足夠簡單易懂,他們希望根據需求得到幫助,或者在出現問題時得到幫助。提供上下文幫助,而不是預先為用戶提供學習材料,設計一堆引導頁。

          圖片

          17、牢記人體工程學和使用產品的環境

          簡單,正如我們已經定義的,你可以多么容易地使用產品。人體工程學是設計、產品和系統的考慮因素,以使它們適合操作它們的人。大多數人認為這與座位或汽車控制裝置和儀表的設計有關,事實確實如此。但它的意義遠不止于此。人體工程學適用于任何與人有關的設計,包括數字產品。

          1954年,心理學家保羅·菲茨(Paul Fitts)對人體運動系統進行了研究,發現移動到一個目標所需的時間取決于它與目標的距離,與目標的大小成反比。因此,要確保常用元素的尺寸較大,并將它們放置在靠近用戶的常用位置。

          圖片

          18、支持內聯編輯和自動建議值

          刪除每個流程中所有不必要的交互、視圖和步驟。用戶操作系統有一個最佳速度,它被稱為“心流狀態”。不要用彈出窗口打破這種流暢。對于以后可以更改的所有操作/值,盡可能支持內聯編輯。當有大量值可用時,應當自動建議值。

          圖片

          19、使用智能默認值來減少認知負荷

          智能默認設置是給問題預先填入答案,讓用戶更快地完成表單。在定義相關的默認值時,設計師需要理解用戶以及他們將在何種環境下使用產品。這只有通過深入的研究和測試才能實現,從用戶身上學習,并根據用戶的歷史數據和使用模式調整默認值。如果需要明確的選擇,就將默認選項設置為絕大多數用戶(比如90 – 95%)會選擇的選項。

          圖片

          20、預防錯誤

          錯誤消息會帶來很大的壓力,讓用戶覺得他們搞砸了或者不能勝任任務。確保自動檢查輸入的數據,并對不適當的數據輸入提供警報或提醒,以減少錯誤。要么消除容易出錯的條件,要么檢查這些條件,并在用戶提交操作之前向他們提供確認選項。應使用強制功能保護破壞性和不可恢復的操作,以確保用戶意識到他們的選擇將產生的影響。

          圖片

          21、無障礙設計

          作為一名設計師,你的目標是維護易用性,確保你的產品能夠被更廣泛的受眾所訪問。全世界有超過10億人有殘疾。不要把顏色作為傳達信息的唯一視覺手段(彩云注:增加圖標不僅僅是為了好看,也為了提升操作的識別性)。確保文本和背景之間有足夠的對比度,支持鍵盤導航等。可訪問性并不局限于具有某些不同能力的一組用戶,當針對可訪問性進行設計時,你將改善每個使用產品的人的體驗。

          圖片

           

          三、總結

          設計出好用簡單易于理解的產品不容易,但那是一個方向,這些快速的小技巧能夠快速地讓界面變得簡單。如有學到,記得點贊分享給朋友們~


          作者:彩云Sky


          轉載請注明:學UI網》如何做簡單又高級的設計?這21個設計方法總結的太全面了,必須收藏!

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


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


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



          數據可視化與信息可視化淺談!

          seo達人


          1.柱狀圖

          2

          適用場景:它的適用場合是二維數據集(每個數據點包括兩個值x和y),但只有一個維度需要比較。
          優勢:柱狀圖利用柱子的高度,反映數據的差異。肉眼對高度差異很敏感,辨識效果非常好。
          劣勢:柱狀圖的局限在于只適用中小規模的數據集。

          2.折線圖

          3

          適用場景: 折線圖適合二維的大數據集,尤其是那些趨勢比單個數據點更重要的場合。它還適合多個二維數據集的比較。
          優勢:容易反應出數據變化的趨勢。

          3.餅圖

          4

          適用場景:適用簡單的占比圖,在不要求數據精細的情況下可以適用。
          劣勢:餅圖是一種應該避免使用的圖表,因為肉眼對面積大小不敏感。

          4.漏斗圖

          5

          適用場景:漏斗圖適用于業務流程比較規范、周期長、環節多的流程分析,通過漏斗各環節業務數據的比較,能夠直觀地發現和說明問題所在。
          優勢:能夠直觀地發現和說明問題所在。在網站分析中,通常用于轉化率比較,它不僅能展示用戶從進入網站到實現購買的最終轉化率,還可以展示每個步驟的轉化率。
          劣勢:單一漏斗圖無法評價網站某個關鍵流程中各步驟轉化率的好壞。

          5.地圖

          7

          適用場景:適用于有空間位置的數據集。
          優劣勢:特殊狀況下使用。

          6.雷達圖

          8適用場景:雷達圖適用于多維數據(四維以上),且每個維度必須可以排序。但是,它有一個局限,就是數據點最多6個,否則無法辨別,因此適用場合有限。
          劣勢:需要注意的時候,用戶不熟悉雷達圖,解讀有困難。使用時盡量加上說明,減輕解讀負擔。

          數據可視化使用小貼士
          餅圖順序不當

          9

          (最好的做法是將份額最大的那部分放在12點方向,順時針放置第二大份額的部分,以此類推。)

          2.在線狀圖中使用虛線

          10

          (虛線會讓人分心,用實線搭配合適的顏色更容易區分。)

          3.數據被遮蓋

          11

          (確保數據不會因為設計而丟失或被覆蓋。例如在面積圖中使用透明效果來確保用戶可以看到全部數據。)

          4. 耗費用戶更多的精力

          12

          (通過輔助的圖形元素來使數據更易于理解,比如在散點圖中增加趨勢線。)

          5.柱狀過寬或過窄
          13

          (經過調研,柱子的間隔最好調整為寬的1/2。)

          6.數據對比困難

          14

          (選擇合適的圖表,讓數據對比更明顯直接。上圖的數據作用是為了比較,顯然,柱狀圖比餅圖在視覺上更易于比較。)

          7.錯誤呈現數據

          15

          (確保任何呈現都是準確的,比如,上圖氣泡圖的面積大小應該跟數值一樣。)

          8.不要過分設計

          16

          (清楚標明各個圖形表示的數據,避免用與主要數據不相關的顏色,形狀干擾視覺。)

          9. 數據沒有很好歸類,沒有重點區分

          17

          (將同類數據歸類,簡化色彩,幫助用戶更快理解數據。上圖的第一張沒有屬于同類型手機中不同系統進行顏色上的歸類,從而減少了比較的作用。下圖就通過藍色系很好的把iPhone,Android,WP版歸為一類,很好的與iPad版,其他比較。)

          10.誤導用戶的圖表

          18

          (要客觀反映真實數據,縱坐標不能被截斷,否則視覺感受和實際數據相差很大。左圖的數據起始點被截斷從50開始。)

          信息可視化案例
          信息可視化囊括了數據可視化,信息圖形,知識可視化,科學可視化,以及視覺設計方面的所有發展與進步。下面是信息可視化的案例分享。
          19
          (上圖為關系網——基于60000封電子郵件存檔數據,用不同顏色深度的線條呈現了地址簿中用戶和個體之間的關系,比如回復、發送、抄送。)

          20
          (上圖通過數據化的比較,用變形的柱狀圖等圖形,形象的展示了不同國家老師的收入水平,社會包括學生和公眾對其的尊重度。)

          如何制作信息可視化?
          第一步:確定表意正確明確信息圖表達內容,確定最主要的表現內容。
          第二步:優化展現形式內容正確還不夠,還要易懂。我們需要在這個步驟里尋找信息圖最優表現形式,讓讀者 一目了然,降低理解難度。
          第三步:探索視覺風格在探索視覺風格時要注意抓大放小,先定下來最主要模塊的風格,再做延展。
          第四步:完善細節視覺風格確定后,可根據需要添加、完善細節。
          第五步:風格延展“一致”的視覺設定有助于用戶理解,也能更好的提升品牌形象。所以主風格確定后,我們需要把它延展到其它有需要的頁面上。

          以上是分享了數據可視化和信息可視化相關內容,不過信息可視化和數據可視化是兩個容易混淆的概念,基于數據生成的數據可視化和信息可視化這兩者在現實應用中非常接近,并且有時能夠互相替換使用。但是這兩者其實是不同的,數據可視化是指那些用程序生成的圖形圖像,這個程序可以被應用到很多不同的數據上。信息可視化是指為某一數據定制的圖形圖像,它往往是設計者手工定制的,只能應用在那個數據中。信息可視化的代表特征:具體化的,自解釋性的和獨立的。為了滿足這些特征,這個圖是需要手工定制的。 并沒有任何一個可視化程序能夠基于任一數據生成這樣具體化的圖片并在上面標注所有的解釋性文字。
          數據可視化則是普適的,比如平行坐標圖并不因為數據的不同而改變自己的可視化設計??梢暬膹姶蟮钠者m性能夠使用戶快速應用某種可視化技術在一些新的數據上,并且通過可視化結果圖像理解新數據,與針對已知特定數據進行信息可視化設計繪制相比,用戶更像是通過對數據進行可視化的應用來學習和挖掘數據,而普適性的數據可視化技術本身并沒有解釋數據的功能。

          (感謝數據平臺組同仁們對此文章的貢獻,感謝魏茜璐的視覺配圖。)

          文章來源:京東設計中心

          轉載請注明:學UI網》數據可視化與信息可視化淺談!

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


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


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



          數據可視化設計淺析與研究(一)

          seo達人

          一. 數據可視化歷史淵源

          從人類誕生之日起,便有了信息的呈現形式,并伴隨著人類發展足跡不斷變遷。如今出現的任何信息可視化類型,并非一夜之前突現的新物種,幾乎都是從過去經典的表達式中發展而來。

          17000 年前

          如果你問最早的信息圖表設計師是誰,很多學者認為是遠古時代的洞穴人,他們是最早用圖像描繪成日常生活比如戰斗,野生動物、死亡和慶祝活動等等。

          法國發現的洞穴繪畫遺址-拉斯科壁畫,距今約17000年

           

          公元前 3000 年

          古埃及象形文字,作為那時的正式書寫系統,開始使用符號來代表字母和概念,可追溯到公元前3000年。

           

          公元前 550 年

          希臘哲學家阿那克西曼德創造了第一個出版的世界地圖,這可以說是最早的可視化地圖了。

           

          公元 950 年

          歐洲人畫出了基于時間變化的折線圖,用于展示太陽,月亮等行星的位置變化趨勢,開始出現如今的數據圖表的雛形。

           

          17 世紀

          統計圖形之父威廉·普萊費爾,發明了我們今天經常使用的折線圖和條形圖,也被認為創建了面積和餅圖。普萊費爾是蘇格蘭工程師和政治經濟學家,并在1786年出版了商業和政治地圖集。

          智能時代

          隨著時代的發展,智能時代AR、VR 技術的興起,我們開始看多更多新穎的的數據可視化形式。

          1992-2010年內世界小型武器和彈藥的進出口貿易數據展示

           

          “里約+20”地球峰會期間的Twitter話題匯集成一顆顆大樹

           

          二. 認識主流可視化圖表

          如今隨著科學技術的發展,已經沉淀出豐富且經典耐用的信息可視化表達。無論在傳統的紙質媒體,還是如今手機、電腦,電視等各類終端的電子媒體都得以大放異彩。目前,各大可視化工具中有非常詳盡的圖表類型介紹,比如 Excel2010 的版本里面,提供了 10 類共 53 個圖表。AntV 平臺則提供了 15 類近 200 個數據圖表,現在我們就來普及一下基本知識。

          常用可視化圖表分類

          目前主流的可視化平臺把常用圖表分成九大類(來自 AntV ),分別是:比較、分布、關聯、占比、區間、流程、趨勢、時間、地圖。

          1. 比較

          顯示值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積、角度和顏色來比較數值的大小,通常用于展示不同分類間的數值對比,不同時間點的數據對比。

          典型圖表:柱狀圖、條形圖、直方圖、K 線圖、矩形樹圖等

           

          2. 分布

          顯示頻率,數據分散在一個區間或分組。使用圖形的位置、大小、顏色的漸變程度來表現數據的分布,通常用于展示連續數據上數值的分布情況。

          典型圖表:散點圖、氣泡圖、熱力圖、箱型圖

           

          3. 占比

          顯示同一維度上占比關系

          典型圖表:餅圖、環形圖、堆疊面積圖、堆疊柱狀圖

           

          4. 關聯

          顯示數據之間相互關系。 使用圖形的嵌套和位置表示數據之間的關系,通常用于表示數據之間的前后順序、父子關系以及相關性。

          典型圖表:和弦圖、桑基圖(我有點讀不懂)

           

          5. 區間

          顯示同一維度上值的上限和下限之間的差異。 使用圖形的大小和位置表示數值的上限和下限,通常用于表示數據在某一個分類(時間點)上的最大值和最小值。

          典型圖表:儀表盤、堆疊圖

           

          6. 流程

          顯示流程流轉和流程流量。一般流程都會呈現出多個環節,每個環節之間會有相應的流量關系,這類圖形可以很好的表示這些關系。

          典型圖表:漏斗圖、?;鶊D

           

          7. 趨勢

          分析數據的變化趨勢。使用圖形的位置表現出數據在連續區域上的分布,通常展示數據在連續區域上的大小變化的規律。

          典型圖表:折線圖、K 線圖、堆疊面積圖

           

          8. 時間(個人認為時間可以放在各大類型中作為一個維度)

          顯示以時間為特定維度的數據。使用圖形的位置表現出數據在時間上的分布,通常用于表現數據在時間維度上的趨勢和變化。

           

          9. 地圖

          顯示地理區域上的數據。使用地圖作為背景,通過圖形的位置來表現數據的地理位置,通常來展示數據在不同地理區域上的分布情況。

          典型圖表:地圖

           

          常用可視化圖表舉例分析

          1) 柱狀圖

          條形圖

          展示多個分類的數據變化和同類別各變量之間的比較情況。使用垂直或水平的柱子顯示類別之間的數值比較。其中一個軸表示需要對比的分類維度,另一個軸代表相應的數值。

          優點:對比分類數據。

          缺點:分類過多則無法展示數據特點。

           

          # 相似圖表

          堆積柱狀圖:比較同類別各變量和不同類別變量總和差異。

          百分比堆積柱狀圖:適合展示同類別的每個變量的比例。

           

          2) 條形圖(也可歸到柱狀圖大類中)

          類似柱狀圖,只不過兩根軸對調了一下。

          優點:類別名稱過長,將有大量空白位置標示每個類別的名稱。

          缺點:分類過多則無法展示數據特點 。

           

          #相似圖表

          堆積條形圖:比較同類別各變量和不同類別變量總和差異。

          百分比堆積條形圖:適合展示同類別的每個變量的比例。

          雙向柱狀圖:比較同類別的正反向數值差異。

           

          3) 折線圖

          折線圖

          堆積面積圖

          展示數據隨時間或有序類別的波動情況的趨勢變化。

          優點:有序的類別,比如時間。

          缺點:無序的類別無法展示數據特點。

           

          # 相似圖表

          面積圖:用面積展示數值大小,展示數量隨時間變化的趨勢。

          堆積面積圖:同類別各變量和不同類別變量總和差異。

          百分比堆積面積圖:比較同類別的各個變量的比例差異。

           

          4) 散點圖(以及氣泡圖)

          散點圖

           

          氣泡圖

           

          用于發現各變量之間的關系。

          優點:存在大量數據點,結果更精準,比如回歸分析。

          缺點:數據量小的時候會比較混亂。

           

          # 相似圖表

          氣泡圖:用氣泡代替散點圖的數值點,面積大小代表數值大小。

           

          5) 餅圖

          餅圖

          玫瑰圖

          餅圖可以很好地幫助用戶快速了解數據的占比分配。

          優點:了解數據的分布情況。

          缺點:分類過多,則扇形越小,無法展現圖表。

           

          # 相似圖表

          環形圖:挖空的餅圖,中間區域可以展現數據或者文本信息。

          玫瑰餅圖:對比不同類別的數值大小。

          旭日圖:展示父子層級的不同類別數據的占比。

           

          6) 詞云

          詞云

           

          7) 箱型圖

          箱型圖

          以上只是部分常用圖表樣式,更多詳細的圖標樣式及其介紹,可前往阿里數據可視化平臺 AntV 學習。

           

          數據圖表使用指南

          數據圖表如此繁雜多樣,到底該如何靈活運用呢?

          數據圖表專家 Andrew abela 設計了一張匯總圖,從全局出發,幫助我們快速確定圖表樣式

          Andrew abela 繪制的圖表選擇指南被廣泛運用

           

          這其實為我們提供了一種快速選擇數據圖表類型的思考流程,四步走:

          1.分析數據源

          2.確定展示的類型

          3.選擇的變量類型及數量

          4.選擇對應的數據圖表

           

          三. 實用的學習通道

          介紹這些基本知識是遠遠不夠的,網絡上有非常多的平臺、工具和團隊可以供我們深入學習和研究數據可視化設計,以下列舉了我平時經常光顧的學習資源。

          1. 了解數據可視化設計的歷史淵源(完整版):

          數據可視化圖表發展史:http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9

           

          2. 各類可視化圖表的概念及用法(超詳細):

          螞蟻金服可視化解決方案 AntV:https://antv.alipay.com/zh-cn/index.html

          圖表示例:https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

          圖表用法:https://antv.alipay.com/zh-cn/vis/chart/index.html

           

          3. 前端可視化圖表庫(前端可直接調用):

          ECharts:http://echarts.baidu.com/index.html

          AntV:https://antv.alipay.com/index.html

          Google Chat:https://google-developers.appspot.com/chart/

           

          4.數據分析工具:

          Google Analytics: https://analytics.google.com

          百度統計:https://#baidu.com/

           

          5.運用可視化工具搭建自己的可視化圖表(可以建立自己的可視化圖表):

          BDP個人版:https://me.bdp.cn/home.html

          平時還可以使用 Excel 或 Numbers 整理和輸出可視化圖表

           

          寫在最后

          除了學習鞏固數據相關的基礎知識以外,更需要在日常工作學習中培養習慣,養成數據化的思維方式。

          • 1.保持對數據的敏感度
          • 2.嘗試利用可視化工具創建圖表,鍛煉分析整理的能力
          • 3.密切關注自家產品線的用戶行為數據,解讀各類數據指標,培養分析的習慣
          • 4.關注前沿技術和可視化新形式,保持開放包容的心態

          好了,文章就介紹到這里,大家一起學來吧。

          預告:下一篇系列文章著重介紹可視化設計的具體方法,譬如從色彩、布局、交互等方面如何設計數據圖表,歡迎持續關注。


          作者:又彬

          轉載請注明:學UI網》數據可視化設計淺析與研究(一)

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


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


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



          數據可視化設計淺析與研究(二)

          seo達人

          第一部分: 圖表布局 

          圖表的基本構成(來源網易 UEDC)

           

          圖表標題

          標題一般居中或居左對齊,但是布局時,需要綜合考慮副標題、圖例甚至篩選器控件等元素的位置。

           

          坐標軸

          坐標軸包括 X 坐標軸和 Y 坐標軸,有時還會出現次坐標軸。

          1. X 軸刻度方向的改變,如果維度過多,則橫向刻度的展示范圍會非常有限,為了展示更多內容,通常會用其他替代圖表(比如橫向柱狀圖),不能替代的情況下,可以考慮將標注文案進行傾斜(不鼓勵)。

          2. 數據類刻度值盡量轉化為千位分隔符(如 K,M,B),保持簡潔,以節省空間。坐標軸上的最大值取值要恰當,保證圖表占據 2/3 以上,畫面更飽滿。

          3. 還需考慮坐標軸上的極值。

          坐標軸

           

          圖例

          離散型數據包括橫向排列和縱向排列,連續型數據包括連續圖例。

          1. 所有圖表類型的排列方式要統一,所以要考慮整體的圖表空間是適合橫向排列,還是縱向排列。

          2. 所有形式總長度超過內容區換行或換列。

          3. 雙軸圖包含了 2 種圖表類型,不同類型的圖例樣式要有所區分。

          4. 連續型數據通過漸變色來展示數據大小的變化,具體漸變顏色定義在下文中有詳細介紹。

          圖例

           

          背景柵格

          背景柵格主要用來幫助用戶快速讀取數據值,方便參考和對比。背景柵格一般有網格線、虛線、點陣、斑馬紋等。在設計柵格時,應該盡可能減少對數據的干擾,在合適的場景下,甚至可以去掉背景柵格。

          柵格

           

          Hover 態(或點擊態)

          用戶在查看某一項數據指標時,給出明確的反饋和提示。數據詳情多時,還會通過浮窗的形式展現。此時該狀態下數據可以突出顯示,可以變化顏色、增加背景元素(線/面)、或者增加動態變化等。

           

          字體

          數據圖表的字體一般采用無襯線體,另外需要考慮字體的辨識度,防止在顯示上產生歧義。多數情況下,數據圖表會運行在不同分辨率的大小屏中,所以在文字排版上。

          做到以上幾條,我們在設計圖表時就可以避免掉絕大多數的坑,不過畢竟圖表類型這么多,在實際場景中也會遇到各種情況。總之有這么幾條總的原則

          1. 保持數據圖表簡潔、清晰、易讀

          2. 強調用戶關注的數據,幫助用戶快速聚焦

          3. 弱化次要元素,如柵格、圖例等

          4. 刪除不必要的元素,陰影效果、酷炫動畫

          5. 合理布局圖表的間距、留白等

          6. 充分考慮頁面的適配效果

          7. 最好使用真實的數據進行設計排版

           

           第二部分: 圖表配色 

          考慮到圖表顏色在設計中至關重要,我把它單獨分出來討論。由于數據的復雜性和趨勢變化,配色方案需要考慮非常多的因素,比如可辨識度、舒適性,還需要考慮特殊人群(色盲色弱人士等)對顏色的可讀性等等。在配色過程中我們需要區分背景色和圖表配色。

           

          背景配色

          背景色一般分為深色、淺色、彩色。在很多 LED 大屏上展現數據時,多采用深色背景,比如即將到來的天貓雙十一活動,官方數據展示基本上會用深藍色作為背景,這樣可以減少屏幕拖尾,觀看時也不會過于刺眼。深色背景中的圖表配色一般不會采用太多的色彩,且圖表也不會設計得過于復雜。

          中小屏幕的背景選擇性更大,中小屏幕背景色選擇范圍就比較廣,淺色、彩色、深色均可以做出很好的設計。在 Web 端,大多數場景下,我們會采用淺色甚至白色作為背景,淺色背景更適合展示大量的數據信息,而且識別度更高。

           

          圖表配色

          圖表配色最關鍵的一點,就是要有辨識度。

          我們可以通過明度上的變化增加辨識度,也可以采用大跨度的不同色相來增加辨識度,另外這兩者也可以有機結合,常用于色彩較多的圖表中。

           

          明度變化

          當我們需要使用單一色相配色時,勢必要用明度差來進行設計,明度的跨度也要盡可能大才能更清晰。我們可以通過在灰度模式下配色的辨識度來判斷明度差是或否合適。

          (Google Material Colors 中的 Light Blue 色卡)

          需要注意的是,采用單一色相的配色種類不宜太多,建議不超過 6 種。一旦種類過多,色彩之間的明度差異勢必會變小,因而影響辨識度。

           

          色相跨度變化

          通過色相跨度來增加顏色辨識度也是我們常用的方式。

          色環

          需要的顏色較少時,我們盡量避免使用相近的色相,比如同類色和相近色。盡量選擇對比色或互補色,這樣可以使不同屬性數據在圖表中展示更加清晰。

           

           

          美國大選圖

           

          所需顏色較多時,建議最多不超過 12 種色相。

          通常情況下人在不連續的區域內可以分辨 6?12 種不同色相。過多的顏色對傳達數據是沒有作用的,反而會讓人產生迷惑。

           

          三種常用的取色方法

          01. 色環提取

          可以采用色環中同一明度下的不同色調作為圖表顏色。前面提到的單色相內取色,也可以在這個色環中進行采集,此外 Google Material Colors 是一個不錯的色板,可以結合使用。

           

          02. 借鑒自然界中的色彩

          自然界中有非常豐富的漸變色彩,而且被大家所熟知,這些色彩更容易給人們帶來愉悅感。

          自然界中的色彩

           

          在借鑒過程中,我們需要注意,比如天空經常會出現紅、藍、紫的漸變色,但這顏色的明度會有其規律,通常是淺黃到深紫,但絕對不會出現淺紫到深黃色。還有一些自然界其他的經驗配色,比如淺綠色到紫藍色,淺黃色到深綠色,橙棕色到冷灰色。

           

          03. 漸變與明度疊加取色

          在正常漸變色的基礎上疊加一層只有明度變化的灰色漸變,形成既有明度差異也有色相跨度變化的配色。

           

          漸變與明度疊加取色

           

          漸變色應用案例

          好了,配色部分就探討到這里。除了以上關鍵內容以外,我們平時還需要注意數據圖表的適配效果、交互細節、以及動畫設計方面的問題,由于篇幅的關系暫不展開,以后有機會進一步探討。

           

          說在最后

          我們在參與此類項目設計時,通常會通過以下的流程去思考:

          1. 為誰設計,用戶想要什么

          2. 明確設計目標和價值

          3. 明確數據指標

          4. 選擇最合適的數據圖表

          5. 規劃設計,輸出方案

          前三步更多會由產品經理、運營人員去思考并輸出結果,最后兩步則由我們設計師來完成,這兩步也正是這兩篇系列文章的主題所在。

          在學習過程中,我們每個人可有不同的思考方式和側重點,以我個人的角度出發:能夠讀懂常見的數據可視化圖表,并從圖表中能獲取到關鍵信息。當有一堆數據擺在面前,能根據業務目標選擇合適的數據展示類型,并運用設計手段完整的表達給用戶。有了這些沉淀,我就能更好的和產品、運營打交道,更多的關注鏈路上游的信息,從而進一步提升設計的產出質量。

          歡迎交流、批評和指正。


          作者:又彬

          轉載請注明:學UI網》數據可視化設計淺析與研究(二)

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


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


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



          日歷

          鏈接

          個人資料

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

          存檔

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