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

                隨著大數據時代的快速發展,日常生活中對數據信息的接觸場景越來越多,我們在做數據展示設計前首先要梳理數據重點,數據結構關系得到的結論結合用戶需求產品需求等進行合理的設計。

                最初的數據展示接近于數據報表的形式,而現今數據展示有兩種:靜態數據可視化、交互數據可視化。它們的設計基礎均基于數據可視化的設計要點進行延展的,而數據可視化要點已有很多優秀的設計師進行總結,因此我重點介紹一下我對交互式數據可視化的理解(僅代表個人觀點),希望對大家有所幫助。

                什么是交互式可視化

                靜態與交互式數據可視化的區別

                交互式數據可視化中的用戶體驗

                交互式數據可視化設計思維

                開源數據可視化庫



          什么是交互式數據可視化

                交互式數據可視化是一種更能夠吸引用戶的數據信息交流形式,在BI中的應用也變得越來越流行,并且由于其有較強的易用性以及能夠為用戶體驗帶來更多附加值而逐漸成為大多數數據分析系統的常見部分。它通過數據動態演示的交互方式,使用戶可以直接與信息交互,用以構建自己對信息的理解,交互式可視化必須具有與人機交互方式,如單擊按鈕,移動滑塊,快速響應以顯示輸入和輸出之間的真實關系。

                有效的交互式可視化能夠保持展示形式和數據功能之間的平衡關系。簡單的圖表可能因為太無聊而無法引起用戶的注意,復雜數據可視化可能完全無法傳達正確的信息。因此數據視覺和交互形式效果需要協同工作。



          靜態與交互式數據可視化的區別

                靜態數據可視化是不包含任何交互功能且不隨時間變化的數據可視化,從單一視角關注特定數據故事的信息圖。圖表中沒有可操作的交互功能來調整靜態可視化的數據展示結果,更適合不太復雜的數據故事、建立概念之間的關系以及傳達預定的視圖。其構建成本遠低于交互式設計。因此在設計時必須充分考慮如何展示當前顯示的數據擬定好數據故事。

                交互式是可視化設計中的絕佳工具,因為它們能夠優化信息的顯示方式,減少視覺噪音,降低用戶對數據閱讀的難度。系統中最常見應用之一是數字化儀表板或數字看板,如果直接從枯燥的數據表格獲取信息這樣的體驗是非常原始且視覺干擾過多。而通過梳理數據結構使用適當的交互可視化使看板,能夠成為用戶快速汲取主要數據信息的理想工具

              設計時決定應用哪種數據可視化形式一方面需通過用戶畫像分析了解用戶偏好如何,另一方面則需要結合數據故事復雜程度采用哪種才能夠更全面更準確的傳達數據信息,以及在構建項目的過程投入成本最終回報率的高低也起著決定性因素。




          交互式數據可視化中的用戶體驗

                大量數據可用于幫助用戶做出更好的業務決策。為了實現這一點,并從數據中獲得最大價值,用戶必須能夠理解它;提出問題、體驗模型并識別異常。

                在設計數據可視化面板時,最至關重要的是,需要考慮用戶將如何使用這些數據。讓更多的用戶會使用數據面板而不是讓他們去創建面板。強迫用戶按照我們設定的規則去破譯圖表含義不僅不切實際且學習成本高昂。

                用戶需要在不受額外功能干擾的情況下看到我們所展示的內容,當我們使用太多的顏色、形狀、圖案和大量的數據時,容易使用戶迷失在數據展示中。我們的工作就是為用戶處理數據信息結構降低用戶對數據認知的難度。


          視覺成像基礎

                我們的大腦處理視覺圖像要比處理文字內容快 60,000 倍,能夠在13 ms內處理一張圖像,然而,大腦的處理能力也是有限的。為了展示最優效果,數據可視化必須基于人類認知速度提供信息。需要設計輸入來將信息分解成可管理的模塊并以用戶能夠簡易處理的方式呈現它。

           

          用戶分析

                我們在構建任何類型數據可視化時都需以用戶為中心,了解用戶的目標、動機和需求,經營環境,需要解決什么問題,以及用戶語言和特定領域的知識;

          在做這方面用戶分析不需要耗費大量的時間,只要足以使我們能夠進入下一階段——設計用戶路徑上即可


          用戶體驗路徑

                系統用戶的體驗建立在兩個主要元素上:關鍵點可視化以及交互路徑。而用戶路徑中每個關鍵點需設計為對應特定的業務問題。

                可視化工具能夠以豐富而復雜的方式與圖表交互:篩選、縮放、細分、導出值等。它們都有助于將信息分解為更易于管理的塊,因此我們需要考慮多種操作結果,綜合起來能夠串聯出具有多個分支交互路徑和圖表用戶體驗路徑。




          交互式數據可視化設計思維

                可視化中的交互改變了數據的視角,始終致力于簡單的可視化而不是復雜的可視化。目標是使其更易于理解和閱讀。因此,需要避免使因使用過多的圖表引起頁面結構混亂,意味著通過過濾某些數據點,選擇數據的不同區域,甚至完全改變可視化的類型。重要的一點是:交互式可視化不再是靜態的,也不代表數據的單一視圖。交互使人們能夠根據自己的需要調整可視化并提出不同的問題。


          尋找理論依據

                通過了解受眾群體是誰,需要展示哪些數據,了解他們將如何使用這些數據。這些都將作為我們設計的理論依據,用以解決設計中哪些圖表是可以快速應用到實際場景中,如何為數據結構做簡化等問題;在數據的展示形式上通常是使用圖表、線條或點、條形圖和地圖來實現的。萬變不離其宗,交互可視化也是同樣在此基礎上進行擴展發揮作用。


          遵循設計原則

                在設計中需要為數據可視化創建各種交互式小部件,但首先需要遵循數據可視化交互設計的三個基本設計原則——可用性、可訪問和可操作。

                 是否有直觀的交互功能和數據可視化?

                 用戶是否可訪問數據,并且能夠快速理解其含義?

                是否為用戶提供簡便易上手的可操作的系統平臺?

                當我們有了一個粗略的理論基礎模型,就可以搭建數據模型來記錄每條數據和相關的元數據,接下來是通過各種交互形式設計用戶界面。


          清晰的架構

                可視化架構是映射數據故事的形式化基礎,在此基礎上通過線條、圖標和顏色等設計元素的視覺工具進行展示。為了利用這些工具,我們責需要運用對比關系、比重關系、顏色差異、位置信息和象征意義等突出顯示信息所呈現的目的及數據間的結構關系。


          可視化美學

                設計美學中少即是多的設計理念經久不衰,我們在進行可視化設計時也可按照這一標準在有限的設計空間內為用戶提供最多的想法,清晰準確的傳達復雜的想法


          交互式繪圖

               交互不一定發生在頁面中明顯可點擊的事物上,也可融入在圖像結構中,用圖表中交互的小部件,擴展到其他類型的內容上,通常需要一個或多個UI 元素進行轉換提示。

          如在做地圖中的交互可視化時要探索當前特定點或區域的實時信息,此時需要將圖標或交互功能融入在地圖上


          開源數據可視化庫

                簡單介紹一下開源的交互可視化數據庫,如果對數據沒有什么概念在圖表設計前可以參考一下數據庫中的樣式及類型,然后根據自己實際項目的需要進行設計。

          D3.js 可能是最流行和最廣泛的 Javascript 數據可視化庫  專為基于數據操作文檔而構建,并使用 HTML、SVG 和 CSS 使數據栩栩如生。

          還有很多開源數據庫可以查看- 11 個 Javascript 數據可視化庫-里面有詳細的介紹,這里就不一一說明了,希望在你們的設計中有所幫助。

          結論

          為了提高交互式數據可視化易用性以及為用戶體驗帶來更多附加值,我們需要基于數據調研,用戶分析,場景模擬等方向逐一解決相對應的問題,才可從各項結論中得出設計方向和目標。

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

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷    作者:胖Kuan

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          提升產品易用性的10個知識點

          ui設計分享達人

          作為設計師,我們希望做出來的產品對于用戶而言易于訪問、易于瀏覽、易于理解和可供所有人使用。而我們在做頁面的過程還要考慮具有視力障礙、行動不便等殘疾類人群

          萬維網的創始人蒂姆·伯納斯·李 (Tim Berners Lee) 也重申了這一點,他說:

          “網絡的力量在于它的普遍性。無論是否殘疾,

          每個人都可以訪問是一個重要方面?!?

          因此,這里有十種方法可以使你的界面更易于訪問和更具包容性,并確保你是為用戶設計的產品


          文章內容包含以下:

          1、顏色對比

          2、導航選項

          3、不僅僅使用顏色來指示狀態變化

          4、視覺焦點

          5、預先加載

          6、設計表達

          7、視覺層級

          8、合理交互

          9、用戶測試

          10、無障礙設計


          1、顏色對比

          色彩是設計的主要方面之一。確保背景和元素模塊之間有適當的對比,可以使用適當的陰影和顏色對比來

          區分,突出重要信息是使你的產品更易于訪問的最簡單的方法。


          這里推薦使用工具WebAIM 顏色對比度檢查器來實現平衡的顏色對比度。該工具允許輸入特定的十六進制代碼或從色輪中進行選擇,然后進行增量調整以達到元素之間的 AA(最低對比度)或 AAA(增強對比度)對比度標準。

          網址:https://webaim.org/resources/contrastchecker/


          2、導航選項

          在用戶使用時,導航的便利性是最重要的因素之一

          (確保產品內跨頁面的導航具有一致的命名、樣式和定位)

          (為用戶提供站點搜索或站點地圖)

          (通過提供方向提示例如面包屑和清晰的標題幫助用戶了解他們在網站或頁面上的位置)


          3、不僅僅使用顏色來指示狀態變化

          雖然顏色對于傳達信息很有用,但它不應該是傳達信息的唯一方式。在使用顏色來區分元素時,請確保始終提供不依賴于顏色感知的額外標識,以便于用戶易識別


          比如在做表單的情況可以通過以下方式去做區分


          (除了顏色之外,還使用星號來指示所需的表單字段)

          (使用提示標簽來區分狀態)

          (添加說明文字)



          4、視覺焦點

          一些用戶使用手機端產品時很難去聚焦于某個點,作為設計者這時需要去通過手法去制造焦點引導用戶進行操作。

          以手機屏幕為例,用戶閱讀的習慣分為兩種,一種是“z”習慣型另一種是“F”習慣


          比如可以在用戶瀏覽路徑上去做視覺焦點,引導告知用戶進行點擊,下面是列出的有效焦點指標:

          (具備清晰的對比度)

          (具有與元素互補的形狀和大?。?

          (使用互補但引人注目的配色方案)

          (好的動畫可以幫助用戶跟蹤焦點移動)

          (元素位置大小等適配各種型號)


          5、預先加載

          在產品上不管是文字還是圖片都需要提前告訴用戶當前狀態,不同的使用環境下用戶的網絡相對是有波動情況,在網絡不好的情況下用戶打開產品如果產品沒有做預加載大概率會造成用戶直接關閉產品


          6、設計表達

          “沒有用戶喜歡點擊他不想點的入口”聽起來比較繞,你可以這樣理解,我們平常看到的按鈕是什么樣呢如果在頁面中我們把一個按鈕做成一個灰色上面寫著點擊進入,作為設計者的我們在遇到這樣的一個按鈕相信都會猶豫的,灰色傳達給用戶的信息是禁止不可點擊,用戶已經被培養出這樣一種習慣,但是遇到這種按鈕上面還寫著《點擊進入》就會造成信息傳達不準確(不僅僅是按鈕)。




          (樣式符合用戶理解范圍內)

          (交互給用戶合理反饋,點擊后狀態、按壓狀態、禁止狀態)


          7、視覺層級

          建立視覺層次結構, 元素在你的頁面設計中的定位方式,并在這些相應元素之間建立一定的連貫性。


          (不要擠滿屏幕,否則會提升用戶閱讀成本)

          (視力受損的人可能需要放大屏幕上的元素,因此請使你的內容具有可擴展性)

          (將重要信息放在視線水平附近)

          (使用空格和鄰近度使內容之間的關系更加明顯)


          8、合理的交互

          一個好的交互能夠讓產品達到一個沉浸式體驗,相反一個差的交互會造成用戶的反感;什么是合理的交互例如在使用閱讀產品時,翻頁功能是模仿現實中書本的翻頁效果作用到線上就會制造出一個良好的體驗

          交互不僅僅是操作反饋還包含頁面布局、元素展示、場景使用等

          (符合用戶對現實物體的認知,達到聯覺效果)

          (內容簡潔,具備吸引力)

          (出現場景是否合情合理)

          (具備反饋能力)


          9、用戶測試

          即使在前期工作做的足夠好的情況下,在你覺得整個產品設計易于用戶使用之后,使用產品的用戶也可能會發現某些地方并不像你希望的那樣友好


          避免這類問題的最佳和最有效的方法是通過用戶測試,在整個產品開發項目中進行非正式評估比在項目結束時進行正式的可用性測試更有效,用戶測試有很多好處,至關重要的是你能夠了解你的產品還存在哪些不足那些設計不到位,然后針對這些不足進行問題解決



          10、無障礙設計

          創建無障礙設計最重要的部分之一在于知道它絕不是創新的障礙,但是它可以讓你創新你的設計,在做產品的時候要考慮到產品不單單只服務一部分人,所以在設計時應當考慮到具備一定障礙的群體

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

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷    作者:愛吃貓的魚_

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          設計要知道-HMI設計必看!車載中控的前世今生

          ui設計分享達人

          首先先普及下HMI的概念

          HMI:- Human Machine Interface : 人機界面,現在多指車載交互系統體驗設計。

          既然說到人機界面,我們先來設計的載體是如何演變的。




          一、車載中控儀表盤演變過程


          1886 年,由卡爾·本茨發明的第一輛汽車。當時根本就沒有所謂的儀表盤概念,所以載體還得從1908年T型車(Ford Model T)說起,到2012年劃時代的特斯拉Model S,汽車儀表盤目前經歷四代。



          1、第一代:以按鍵為主


          機械式儀表盤: 第一個時代儀表盤為機械芯儀表,一般包含了車速里程表、轉速表、機油壓力表、水溫表、燃油表、充電表等,之后汽車儀表還需要裝穩壓器來穩定儀表電源的電壓,抑制波動幅度,保證汽車儀表的準確性。初代的汽車儀表盤主要以傳統的熱式和動磁式,顯示的信息極為有限,更多的是車輛物理信息“通信員”的角色。


          在機械時期中控臺哪有什么屏幕可言,那時候的中控臺就是收音機和空調的調節器,而且都是實體按鍵的,只能滿足駕駛的基本需求,沒有屏幕,都是照搬飛機中控布局,以實體按鍵為主,功能簡陋單一。堆砌功能按鈕儀表,沒有交互可言。






          2、第二代:電氣式儀表盤+小中控屏


          第二個時代的電氣式儀表盤終于誕生,從真空熒光顯示屏(VFD),發展到采用液晶顯示屏(LED)及小尺寸薄膜晶體管顯示器(TFT),顯示屏顯示的信息越來越清晰、快捷。目前電氣式儀表在市場的保有量最大,且一般采用機械儀表結合數字儀表的方式,例如車速、轉速信息采用指針,指示燈信息采用LED等點亮,其它信息則采用TFT屏。



          雖然相較于第一代機械機芯儀表增加了不少功能,汽車信息反饋也更全面更及時,但是其發展速度卻明顯與汽車行業不相匹配,對于更深層次的駕駛需求,電氣式儀表仍無法滿足。




          3、第三代:全數字化儀表


          汽車儀表盤領域在不斷追求更新,于是劃時代的全數字液晶儀表盤孕育而生,也是就我們常說的虛擬儀表盤。全數字汽車儀表盤使用了一整塊液晶屏取代了傳統的指針和刻度表,所有信息都通過這塊屏幕顯示出來。


          單從外觀上來看就能給人以一種比較高大上的感覺,這類儀表盤上往往沒有指針等部件,所有信息都通過屏幕傳遞出來。功能更強大、信息顯示更具邏輯性,駕駛者接受信息更快,提升行車安全。也可以根據個人喜好調整相應參數,比如比亞迪的儀表盤就可以改變背景顏色。在高級點的,像寶馬的全數字儀表就可以切換N多種模式。


          2007年iPhone問世后,大屏、輕薄機身、高清顯示屏、可安裝應用等功能引領了整個行業的革命。電動汽車行業飛速發展,智能AI和人際互聯等人車交互概念也跟著興起,對于中控臺的需求和功能復雜度也跟著越發精細起來,結果就是屏幕越來越大。


          2013年上市的特斯拉Model S,座艙里最驚艷的就是那塊17寸的大屏。超高的分辨率和流暢的操作,和漂亮的UI設計,最初讓很多美國民眾瘋狂。就像蘋果手機顛覆了傳統手機業,特斯拉也顛覆了傳統汽車行業。


          2014年換代的奔馳S級將兩塊12.3寸屏幕連在一起,合成了一塊23寸大屏,比特斯拉的大屏還多出6英寸。




          拜騰M-Byte,48寸巨屏,橫向貫穿儀表臺,再一次顛覆汽車的內飾設計。



          比亞迪系列汽車的旋轉大屏,玩出新花樣,可以旋轉控制,就像手機橫屏和豎屏的場景。


          縱觀下來,其實不難看出,雖然汽車的中控屏幕也是往著越來越大的方向發展,但因為空間以及功能需求的不同,相比起手機來說,中控屏幕的變化更具備多樣性。




          4、第四代:HUD顯示屏


          從上世紀80年代,抬頭顯示技術在汽車領域已經開始被使用,直到現在才開始逐漸展露頭腳。

          HUD抬頭顯示器(Head Up Display),又叫平視顯示系統。它可以把重要的信息,映射在風窗玻璃上的全息半鏡上,使駕駛員不必低頭,就能看清重要的信息。


          戰斗機是率先應用HUD抬頭顯示器的。飛行員在空戰中,需要交替觀察艙外目標和艙內儀表,易產生瞬間視覺中斷,因此會導致反應遲緩、操作失誤,并有可能貽誤戰機,采用HUD抬頭顯示可克服這一缺點。


          第一架使用HUD抬頭顯示的飛機是美國海軍的A-5艦載機。民用航空最早使用HUD抬頭顯示是法國達索飛機公司的mercure飛機。



          在復雜多變的道路上開車,駕駛員雙眼離開車輛前方,是個非常危險的事情,尤其是在高速公路上更是明顯。于是很多車型,就給車輛配備了一個不需要挪開視線,就能知道車輛基本信息的配置,這就是HUD抬頭顯示。



          HUD作為一款新技術,優勢顯而易見。當駕駛員需要查看儀表盤或中控臺上的信息,視線至少需要轉移0.3秒,而HUD投影的信息就在駕駛員平視的正前方,駕駛員可以將更多的注意力放在路面上。將駕駛體驗及駕駛員對于路況信息的認知能力進行革新式升級。





          二、六大車載系統的特點


          現在各家系統百家爭鳴,各家車載系統設計有哪些不同?



          1. 阿里 斑馬智行


          簡介:


          1、阿里車載小程序是一種無需下載安裝即可使用的“應用”,旨在為用戶打造“隨時可用”、“用完即走”的使用體驗。


          2、AliOS作為互聯網汽車操作系統,原生地支持阿里小程序,引入阿里生態服務的同時也面向開發者開放,圍繞車場景為用戶提供從出行到生活的各類智慧服務。


          特點:


          1、設計特點:


          獨立的大卡片式的內容界面模塊方便車主在行車過程中單手操作,其配色鮮艷,風格扁平,符合使用場景和國人的使用習慣。


          2、功能特點:自帶場景智能感知的基因。


          得到車主授權后,車載小程序可以圍繞行車場景,實現上車前、行車中、下車后自然串聯的智能化場景服務。


          用戶可以在車上通過觸控、語音、手勢等多模態交互方式,咨詢附近的推薦餐廳,小程序會基于用戶的喜好作出推薦,還可以預約排號;到達餐廳附近,系統會自動喚醒小程序,為用戶找到停車場;下車后,車載小程序會無縫連接到手機小程序端,用戶可以在手機上查看餐廳的預約信息等。


          △ 斑馬智行2.0系統設計


          斑馬智行,采用智能手機界面和應用商城下載 APP 的使用方式,實現車載和手機的雙重控制。


          強大的云端特性在語音識別和線上互聯方面提供了良好的使用體驗,車主可以連接手機藍牙后,讀取其手機通訊錄,實現利用車載系統撥打和接聽電話的功能。支持 USB 接口,通過 U 盤實現播放音頻、視頻文件等。在娛樂生活方面,內置蝦米音樂,蜻蜓FM,喜馬拉雅等,支持在線搜索,在線播放以及在線廣播等服務。


          同時,斑馬智行依靠阿里強大的技術和資源支持,打通停車場,加油站,高速公路支付等,使用戶駕車時產生的費用均能通過支付寶支付。




          2. 百度 Car Life和Apollo


          簡介:


          1、打造智能車載服務生態,滿足用戶出行、娛樂、生活等多元化需求,構建人-車-家一體化互聯閉環成為時代趨勢。


          2、智能小程序,是百度提供的一種技術解決方案。開發者基于此開發出來的服務,在各類宿主環境(手機 App、車載系統、IOT 設備等)中,可做到用戶無感知安裝,即點即用。


          特點:


          1、設計特點


          車載端主界面分別采用藍、綠、紅、灰四個色塊對應四個功能模塊,「發現」集成音樂、娛樂、聽書、電臺等特色音視頻服務,采用紅色在界面中最為突出,其設計風格整體扁平,面性 icon 利于識別與點擊。


          2、功能特點


          智能小程序包括“車后服務”、“資訊”、“休閑游戲”、“視頻”、“購物”、“親子”、“旅游”、“工具”等8個類別,一共80多款。車企可以根據車型定位和自身需求自行定義和組合可供使用的車載小程序。


          百度的車載小程序大部分場景下還是只能依靠用戶用語音喚醒,但在生態的開放性上,百度車載小程序則做得更為徹底,可以在百度App、百度地圖、百度貼吧、百度網盤百度系App上運行。





          3. 騰訊 Ai in Car




          簡介:


          1、“騰訊小場景”是專為出行場景打造的車載輕應用生態,部署在云端,不需要下載,即用即走,并支持語音交互。


          2、分為3類,出行服務小型車、生活服務小程序和視聽服務小程序。


          特點:


          1、設計特點:


          運用的FutureLink3.0系統,FutureLink3.0 基于安卓平臺開發,在 12 英寸的中控屏幕上并沒有將大量的圖標堆砌在首頁,反而以地圖為背景,將六大功能模塊以大板塊的形式布局在地圖下方,整個界面設計簡潔。


          2、功能特點:


          最大特色:基于位置和場景會被自動喚醒。比如用戶經過加油站、停車場、旅游景點的時候,有些購買和支付的服務就會主動彈在車機上,用戶再通過語音完成操作。


          手機小程序是“人找服務”,那么騰訊車載小程序則進化成“服務找人”。


          △ 騰訊在車載場景下的生態布局


          Ai in Car,顧名思義,基于 AI 的連接能力和生態,融合騰訊內容生態的優質資源,包括資訊、視頻、IP、文學等板塊,為車主提供更豐富的內容消費。風行搭載的 FutureLink3.0 車聯網系統,就是和騰訊深度合作而誕生的優質案例。



          △ FutureLink3.0系統界面


          只在設置頁中,才會出現二級子菜單列表,而且提供的設置項目也不多,界面層級簡單,不累贅,也給司機帶來輕松愉悅的操作體驗。同時,基于行車安全考慮,在類似天氣、股票等查詢功能上,比較依賴語音控制。在娛樂生活方面,打通手機和車機賬號,用戶無需切換賬號就可以與車載導航、電臺、QQ音樂、微信等功能無縫銜接,支持車主組建聊天組,在行車途中與好友進行實時溝通。


          從整體來看 FutureLink3.0 的設計,它更像是一個把需求頁面展現在車主面前的「輕應用」,沒有傳統概念上的主界面、多層交互菜單以及相應的「系統特質」的設計,它更希望把海量資源建立在云端,終端只給車主呈現其所需要的服務即可。




          4. 谷歌 Android auto


          簡介:


          Android Auto 系統的工作原理是將手機連接到兼容的汽車,讓駕駛員可以使用汽車屏幕和語音操作與手機的應用程序進行交互。它提供了一種導航、收聽媒體和消息等的簡單方法。


          特點:


          1、設計特點:


          在 UI 框架設計方面,主屏幕以卡片的形式顯示通知、活動、導航和消息,右下角有啟動語音命令的麥克風圖標和底部的活動欄,這些特性屬于全局 UI。在它下方,應用程序內容區域顯示應用程序啟動器或當前使用的主應用程序的內容。



          △ Android auto手持設備與車載設計系統


          Android auto 將 Android 平臺擴展到汽車上,它有兩種使用方法:在手機上或在兼容的車載屏幕上。


          它有一個簡單的界面,標準化的用戶交互模型和強大的聲音動作,其目的是幫助司機盡量減少分心。需要注意的是,為汽車設計交互式應用程序與手持式設備的設計有根本上的不同,其應用程序的交互界面應該簡化,以確保司機的眼睛和手集中在開車上,減少司機分心。


          △ Android auto車載系統UI框架


          卡片上提供如消息字符串、圖標、圖形和操作等內容,會根據用戶最近的使用情況和優先級來確定卡片的大小。主屏幕會限制卡片的數量,以保持列表的簡短和相關。因此,當新的、更相關的內容出現時,應用程序的通知可能會從屏幕上消失。同時,抽屜式的交互方式,提供了簡單的操作和導航。每個抽屜項目必須提供一個單一的觸摸目標,避免在抽屜里放長的列表,或者在相同內容的視圖之間切換。這里官方給出的最佳 UI 做法是簡化內容,關注上下文,顯示新鮮的、有用的和大多數不滾動的項目,使用單行,對決策至關重要的較長字符串使用兩行。




          5. 蘋果 CarPlay



          簡介:


          CarPlay 車載系統旨在令用戶通過汽車制造商之原生車載系統來使用、操控iOS設備并發揮其功能。該產品的首個版本計劃于2014年發布,最早出現在一些制造商的汽車展覽上。


          特點:


          1、設計特點:


          基于手機映射,所以界面除了橫向布局外,icon都和手機端統一。以簡潔的布局提供有用的、重點突出的信息,便于從駕駛員座椅上進行掃描。不要用不必要的細節和不必要的裝飾來弄亂屏幕。


          在整個應用程序中保持整體一致的外觀。一般來說,具有相似功能的元素應該看起來相似。


          2、功能特點:


          作為車內輔助、操作、娛樂的中心,Carplay 可以直接連接到汽車中控的觸摸屏上,提供基于 iOS 的相關的服務和應用。Carplay 的整體設計圍繞著車內駕駛這一使用場景,而它的設計原則也圍繞著這一場景來規劃:

          • 成熟。基于最熟悉的 iOS 應用,來設計界面元素,并提供熟悉、直觀的體驗。

          • 簡短。采用盡可能簡短的交互,不過度引人矚目

          • 相關。屏幕顯示信息高度相關,提供盡可能少選項,不需要復雜決策

          • 語音。基于Siri,以語音交互為核心,司機無需視線離開前方,手也不用離開方向盤即可完成交互。


          全新的電子車鑰匙,加上 Apple CarPlay 車載流暢的使用體驗,讓 iPhone 能在旅途上發揮更多作用。地圖、電話、信息、音樂、日歷、一言、一觸、一旋隨你駕馭。






          6、華為車機應用



          簡介:


          HMS for Car是華為終端云服務打造的智慧車載云服務解決方案,基于HMS(Huawei Mobile Services),通過AI場景引擎結合華為生態資源,為用戶提供精準豐富的出行場景內容和服務,助力汽車從交通工具向具有交互和服務的能力的智能終端進化。


          華為快應用是一種基于行業標準開發的新型免安裝應用,其標準由主流手機廠商組成的快應用聯盟聯合制定。開發者開發一次即可將應用分發到所有支持行業標準的手機運行。


          HMS Core提供端、云開放能力,幫助開發者實現應用高效開發、快速增長、商業變現,使能開發者創新,為全球用戶提供精品內容、服務及體驗。

          1、全球化分發。已上線超過170+國家和地區。

          2、全終端接入。全面支持從小屏幕到大屏幕各種智能終端。

          3、全場景支持??鞈弥边_鏈接和卡片嵌入全終端場景。


          特點:


          1、設計特點:


          在交互界面上,Carplay和Carlife由于使用的投屏方式,主界面依然是一個個的APP圖標,需要點擊啟動進入后才能使用。筆者認為采用這樣移動端過于笨重的交互方式并不適用于車載場景;HUAWEI HiCar的設計理念是"安全便捷、自然舒適、智能貼心", 對車載端的人機交互要素重新布局規劃設計,采用桌面卡片的設計方式,以滿足復雜駕駛狀態下的使用需求。



          桌面卡片是應用內容和功能特性的重要載體,用戶通過對卡片的快捷操作直達應用的核心功能,提升交互的便捷性。應用可通過接入 HUAWEI HiCar 桌面卡片的方式呈現最核心的功能和服務,并根據自身的需求特性,自行組合卡片元素以滿足不同場景下的用戶訴求。

          • 背板:背板樣式可以為色彩填充或設置背景圖。

            背景色支持黑、白、彩色三套。

            應用需提供三套背板以適配卡片主題切換。

          • 品宣區:品宣樣式為圖標+文字,應用可根據在此區域顯示品牌圖標和名稱。

          • 內容區:展示與應用場景相關的信息,其內容可以是圖片、文本或圖文樣式。

          • 操作區:操作區為文字或圖片按鍵,最多 3 個控件或 1 個控件組。



          2、功能特點:


          華為智慧助手,可結合用戶使用場景,以卡片形式推送提醒、服務和行程,實現智慧化服務找人。例如,送孩子上學時,車機端華為智慧助手將自動推送"有聲續播"卡片,用戶點擊卡片,即可一鍵續播孩子在華為手機上沒聽完的有聲兒童內容;用戶在開車下班回家路上,進入離家500米范圍內時,車機系統可自動啟動"回家模式",提前打開家中的窗簾、空調等設備,方便用戶享受愜意生活。



          My Car功能面向車企開放華為手機等智能硬件系統級入口能力,能夠實現遠程控車、查車、汽車服務/告警關鍵信息等反向推送能力。遠程控車功能,可以滿足用戶高頻控車訴求,例如,遠程開關空調、尋車、查看門窗狀態等。另外,當車輛胎壓不足、門窗未關閉時,用戶也能通過手機、車機及時收到提醒。





          三、系統的開源地址


          1、阿里Alios開放平臺

          https://miniapp.alios.cn/index#/document


          2、百度車載生態開放平臺

          https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html


          3、騰訊-車載小場景(私我領取PDF)


          4、谷歌駕駛

          https://developers.google.com/cars/design/design-foundations


          5、蘋果apple car play

          iOS - CarPlay 車載


          6、華為車機三方應用交互設計規范

          https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014






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

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷    作者:郝小七

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          彈窗主按鈕與菲茨定律的糾葛

          ui設計分享達人

          問題是這樣的:有位設計師和我探討彈窗主按鈕在左側還是右側的問題,他說,他覺得應該在右側,原因是因為菲茨定律(Fitts’ Law):“彈窗主按鈕在右側,次按鈕在左側,是由于菲茨定律,這是因為邊角的按鈕更容易被點擊?!?


          主按鈕在右側,這個我是能理解的,但在右側的原因是由于菲茲定律決定的,我是持需考證態度的,畢竟雖然這個說法確實聽到過,但我認為還有待進一步梳理,這里需要細究的要點包括:


          第一、彈窗主按鈕一定要在右側嗎?


          第二、如果彈窗主按鈕“更適合”在右側,是不是只有菲茨定律的原因,還有其他原因嗎?


          第三、菲茨定律到底在解決什么問題,它是否除了上述問題,還解決了其他問題?


          帶著這三個問題,本文打算從如下幾個方面展開:
          第一部分:彈窗主按鈕位置 
          1、PC端彈窗主按鈕位置情況 
          2、彈窗主按鈕位置在哪里更合適 
          第二部分:費茨定律 
          1、什么是菲茨定律 
          2、菲茨定律的啟示 
          第三部分:總結 

          第一部分:彈窗主按鈕位置
          1、PC端彈窗主按鈕位置情況
          為了聚焦用戶的視覺與心理,激起用戶的反饋,彈窗誕生了。由于彈窗可以承載的內容豐富,且交互具備擴展性,彈窗被廣泛應用于應用、網頁等產品中。在彈窗設計中,標題、關閉的位置基本設計者們基本不會產生爭議,而主次按鈕的位置是一個永恒的話題。 

          1.1、按鈕組位置
          對于彈窗來說,按鈕組的位置位于footer區,此點無可爭議。但按鈕組應該在footer區的左側、中間,還是右側呢?從大量產品設計中我們可以發現,位于左邊的比例幾乎為0,中間大約5%,而位于右側的比例達到95%。 

          1.2、主次按鈕順序
          既然彈窗按鈕組在95%的情況下都為右側,那么我們就來看下,在該種情況下,win和mac系統主次按鈕的順序是怎樣的,站在巨人肩膀上,總是能看的更遠。 

          主按鈕是指行動按鈕,行動按鈕是連接用戶與產品的接觸點,一個優秀的行動按鈕,可以提升用戶體驗,且幫助用戶高效完成任務。主按鈕顏色在視覺上通常被醒目突出,而次按鈕被弱化表現,這可以降低用戶出錯的風險,及提高用戶完成操作的概率。 

          在win系統中:
          主按鈕在左側,次按鈕在右側。 

          在mac系統中:
          主按鈕在右側,次按鈕在左側。 

          這里插一句題外話,mac的窗口關閉,最小化、最大化按鈕在左上角,而win在右上角,它倆總是做啥都反一反。 

          那為什么win和mac會做出不同的選擇呢?背后又有哪些設計理念在支撐?翻閱了網上各種說法后,我總結出如下說辭: 

          1、mac傾向于把當前場景下推薦用戶點擊的按鈕放在右側,例如,mac推薦取消,就會把取消放右側;推薦儲存,就會把儲存放右側。且右側按鈕為主按鈕,視覺上突出強化。 

          2、win傾向于把最安全的按鈕(比如取消,關閉)放在右側。因此,可以說它的主按鈕在左側,只是主按鈕沒有明確的視覺樣式,保持和次按鈕一致。 
          2、彈窗主按鈕位置在哪里更合適
          關于主次按鈕在左側還是右側更合適,兩大巨頭給出來的設計方案是不同的,網上也有很多同學做了該方面的實驗,結果大致是說:不論主按鈕在左側還是右側,只要系統中統一皆可。就像中國人吃飯用筷子,西方人用刀叉,與其糾結筷子和刀叉哪個更適合吃飯,還不如考慮用戶的習慣、使用場景等因素,制定出更合適自身產品的解決方案。 

          不過話說回來,目前支持彈窗主按鈕在右側的人數占多數(產品專家、設計專家、用戶皆包括),原因不外乎:
          1、右手操作原則; 
          2、用戶在彈窗中的閱讀模式為“Z”字模式; 
          3、BLABLA(接下來我們看看是不是菲茨定律也要參與進來)。 

          第二部分:費茨定律
          什么是菲茨定律
          1954年保羅.菲茨首先提出菲茨定律,費茨定律是用來預測從任意一點到目標中心位置所需時間的數學模型,其后來在人機交互領域也得到了廣泛的應用。它的計算公式為: 
          T代表完成移動所需的平均時間; 
          a代表光標開始/停止的時間; 
          b代表光標移動的速度; 
          D代表從起點到目標中心的距離; 
          W代表目標的寬度(按移動方向為水平方向計算)。 

          首先,完成移動所需的平均時間由兩個參數來決定,即起點到目標中心的距離D和目標的大小W。其次,起始點與目標距離遠,耗時越長;目標越大,耗時越短。 

          這里還涉及用戶在使用產品時到達到目標的心理訴求:
          1、用戶對鼠標指針達到目標并沒有時間要求,則用戶會緩慢移動鼠標指針,在此過程中逐步調整鼠標指針移動的位置,從而最終達到目標。 

          2、用戶對鼠標指針達到目標有明確時間要求(例如股票下單場景),此時用戶會快速將鼠標指針移動到目標附近,然后在做精細化的調整,從而精確操作目標。 

          由上我們可以發現,不論用戶是否對鼠標指針達到目標有時間要求, 菲茨定律中的兩個關鍵點為:鼠標指針移動到目標大致區域及精細化微調后精確定位目標中心。且在實際產品設計中,我們必須要考慮如何讓用戶的鼠標指針以最短的時間到達目標。 

          因此,我們可以將菲茨定律中,從起點到目標所需的時間細化為以下四種情況:
          1、距離遠-目標大
          除了鼠標指針需要跨越較大的屏幕范圍,相對來說還是比較容易到達目標的,因為目標大。 
          2、距離遠-目標小
          用戶需要在鼠標達到目標可觸位置前做一些鼠標位移的精細化調整。 
          3、距離近-目標大
          用戶無需做太精細的調整就可以輕易到達目標。 
          4、距離近-目標小
          在快速到達目標后,鼠標需要做一些精細化的調整。 

          以上的距離遠近實際上還可以進行細化區分,一個是鼠標指針處于頁面任意位置,與目標并無上下文關系;一個是鼠標指針處于下一步操作的上一步位置。 

          這里可能會影響到的情況是,當鼠標指針處于頁面任意位置時,目標元素的大小需要做通用化考慮(使用業界標準或用戶的常規認知)。而當可以非常明確鼠標指針與目標的上下關聯時,可以適當調整設計策略,例如鼠標hover一個按鈕,出現面板,我們可以發現 ,鼠標指針一定是在按鈕上了,才可以去進行下一步操作,這個場景下,鼠標指針的起始位置永遠是不變的,變的是目標,即選擇了面板中的哪個操作。 

          菲茨定律的啟示
          從上述可知,在產品設計中,我們需要 優先考慮使用“距離近-目標大”的設計方案,再考慮“距離遠-目標大”和“距離近-目標小”(但也不能太小,還是要稍微合理化一些),不要去考慮“距離遠-目標小”的方法。下面梳理了一些在產品中用到菲茨定律的例子,讓大家加深對菲茨定律的感知。 

          1、點擊區域合理加大,降低操作復雜度。例如表格排序功能,需要擴大點擊區域。 
          2、可點擊屬性視覺化。例如tabs的下面會帶一條選中的寬度線,由此可推理出鼠標hover到其他tabs上的區域也是如此。 
          3、相關內容與操作靠近。例如word中鼠標選中文字,右鍵可帶出相關的操作。 
          4、相關按鈕互相靠近擺放。例如word文檔需要被保存,通常保存和取消靠近,便于用戶快速做出選擇和操作。 
          5、給目標操作安排流程,而不是點狀設計功能。例如對單條數據啟動編輯后,在原位進行保存。 
          6、不希望用戶操作的時候,目標設計遠一點。例如word文檔需要被保存時,mac系統會將“不儲存”按鈕距離“儲存”按鈕遠一些。 
          7、控制風險。在移動端中,如果不想用戶誤觸,會將危險系數較高的按鈕放在距離拇指熱區遠的位置。還有例如睡眠、關機、重啟等按鈕也不適合放一起(實際上真的放一起了,我無數次誤關機)。 

          第三部分:總結
          說到這里,想必大家對菲茨定律已經有了基本認知吧。在菲茨定律中,有一條為:頁面四周的按鈕更容易被點擊(無限可選中),因為鼠標達到屏幕的邊角后,就不可能在超過了,所以mac和win都會將按鈕放在屏幕邊緣。這個就是那位設計師小伙伴說的,“彈窗主按鈕在右側,次按鈕在左側,是由于菲茨定律,這是因為邊角的按鈕更容易被點擊?!?nbsp;

          實際上我們會發現,假如彈窗的主按鈕在右側,鼠標也并不是達到屏幕的邊角,鼠標只是達到了彈窗的邊緣(這里會存在一定的心理邊緣感知,可能那位設計師就是說的這個吧)。然而,這與菲茨定律中的邊角無限可選中概念不是一回事。 

          所以說,目前彈窗主按鈕大家更贊同在右側的設計理念是:
          1、右手操作原則:右手用鼠標,用戶會習慣性把光標放在屏幕右邊。 
          2、用戶在彈窗中的閱讀模式為“Z”字模式:先瀏覽標題,最后視覺落腳點在footer右側。手眼協調,手會執行視覺落腳點的操作。 
          3、mac已經培養了大多數人的用戶習慣,這點從很多產品設計中就可以看出,放棄用戶習慣就是挑戰用戶體驗,所以,我們為何不去擁抱呢。

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

          截屏2021-05-13 上午11.41.03.png


          文章來源:站酷    作者:小果1

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          jquery實現input輸入框實時輸入觸發事件代碼(最全)

          前端達人

          第一種辦法

          $('#productName').bind('input propertychange', function() { console.log(123); }); 
          
          • 1
          • 2
          • 3

          第二種辦法

          //鍵盤事件 $('input').keydown(function() { console.log(123); }); 
          
          • 1
          • 2
          • 3
          • 4

          第三種辦法

          <input type="text" oninput="myFunction()"> 
          
          • 1
          <script> function myFunction() { console.log(111); } </script> 
          
          • 1
          • 2
          • 3
          • 4
          • 5

          如果您覺得本篇對你有幫助,可以點關注,給個贊,支持一下,過程有遇到什么問題也歡迎評論私信,進行交流


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




          文章來源:csdn

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

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

          jquery更改輸入框type為密碼框password

          前端達人

          很蛋疼的一個問題:


           <input type="text" id="e1" value="123" />



          用juqery將文本框變成密碼框


          
          
          1. $(document).ready(function(){
          2. $("#e1").val("hello world!");
          3. $("#e1").click(function(){
          4. alert('11');
          5. $("#e1").attr("type","password");
          6. $("#e1").attr("value","ni mei de ");
          7. });
          8. });



          執行的結果:彈出11,文本框沒有變!


          然后百度一下,發現type的t要大寫,即Type偷笑


          
          
          1. $(document).ready(function(){
          2. $("#e1").val("hello world!");
          3. $("#e1").click(function(){
          4. alert('11');
          5. if(e1.disabled)
          6. ("#e1").attr("Type","password");
          7. $("#e1").attr("value","ni mei de ");
          8. });
          9. });


          效果就有了! 疑問


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



          文章來源:csdn

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

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


          UI 大革新:微軟 Win11 界面設計分析

          藍藍設計的小編

          不得不說,此次 Win11 的發布還真是戳中了很多人關注點,雖然一直被吐槽果里果氣的,可…… 大家似乎都挺受用。其實此次 Win11 升級,除了統一外觀 UI 外,一個很重要的目標就是提高平板用戶的操作體驗。眾所周知,微軟一直都是生產力的代言人,而蘋果則是人性化交互的倡導者,那么此次 Win11 提升了交互界面,它和蘋果的巔峰對決,又將鹿死誰手呢!

          1。 更不容易誤點的“任務欄”

          任務欄此次被吐槽得不輕,一個很重要原因,是它更改了很多人們之前習慣的操作邏輯。不過很多人并未發現,當我們將鍵盤與平板電腦分離時,任務欄上的圖標也會自動擴大一丟丟。正是這一丟丟的距離,讓點按時更不容易誤觸了。

          不過相比蘋果的 Dock 欄,Win11 的任務欄還是顯得小了一些,特別是沒法修改大小這個“Bug”,著實讓人難受。好在,這只是個對比,如果你一直都是微軟的 Fans,慢慢也就適應了。

          2。 操作中心

          操作中心的改進同樣明顯,不得不說 Win11 這一次的確帶給了我們不一樣的體驗。和之前的 Win10 通知中心相比,新操作中心不光結構緊湊,運行邏輯也要明顯強于老版。特別是新增加的開關按鈕,更加適合觸控。

          不過與蘋果的控制中心相比,Win11 的操作中心能夠控制的功能并不多,可新增選項也僅限于之前 Win10 的那幾個(甚至還少了個截圖)。相比之下,蘋果的邏輯更像是通常的手機系統,除了各種控制功能外,你還能根據喜好調出計時器、備忘錄、秒表、掃碼、手電筒等,在日常生活中也是十分方便的。

          3。 夜間模式

          微軟的夜間模式一直都是老大難問題,即便到了 Win11,這種情況也沒有好哪兒去!Win11 的夜間模式依舊采用了之前設計,雖然換裝了新版資源管理器和新版操作中心,可效果…… 依舊難以直視。而且微軟還面臨著一個比蘋果更大的阻礙。前者開發環境開放,海量的存量應用難以更新,明顯限制住了夜間模式推行。而后者則被一直限定在蘋果的開發框架內,無論外觀還是夜間效果,都要比微軟更統一。

          此外,蘋果還在傳統夜間模式基礎上,開發出了定時換壁紙和定時切換夜間模式等小功能。這些變化雖然都不足掛齒,可的確能有效提升操作體驗。

          4。 觸屏手勢

          Win 11 在觸屏手勢上增加了很多,比如三指下滑顯示桌面、三指上滑多任務管理、三指左右滑動切換軟件、四指左右滑動切換桌面等。特別是在新動畫的加持下,整體效果要強于 Win10。

          不過和深耕觸屏多年的蘋果相比,Win11 的手勢還是顯得贏弱了些。除了手勢數量更加豐富外(比如一個動作可以有多組手勢),iPad 還將很多系統功能也融入到日常的手勢操作里。比如桌面下滑打開快速搜索欄、頂部下滑調出通知中心、三指捏合/松開完成復制粘貼等,幾乎覆蓋到了日常使用的各個方面。當然這也和兩家的發展方向有關,一個更注重于生產力體驗(都生產力了當然沒必要玩手勢了),一個更注重于用戶操作邏輯。從這一點上說,Win11 在觸屏方面的改進仍然任重而道遠。

          5。 動畫效果

          作為系統 UI 的重要組成部分,動畫對于現代操作系統來說,已經不單單是好不好看,或者卡不卡頓的問題了。舉個最簡單例子,同樣是滑動多任務窗口,iPad 的動畫效果就要明顯流暢和跟手,這其中一個奧秘,就是屏幕刷新率和動畫慣性在作怪。不過給人的最直觀感受,就是蘋果系統更流暢,而 Windows 太生硬。

          6。 窗口布局

          Win11 在原有 4 分屏基礎上,增加了隨屏幕尺寸自動調整的新分屏方案。在我們之前的測試中,發現在一些超寬屏幕顯示器上,Win11 可以自動激活“左/中/右”、“左輔/中主/右輔”兩組全新分屏布局。同時此次新增加在最大化按鈕上的布局控件,也明顯是為觸屏用戶準備的,除了更加直觀外,使用起來也會更便捷。

          相比之下,iPad 的分屏邏輯就要明顯落后于 Win11。先不說沿用多年的雙分屏策略,基本就是 Win8 時代玩剩下的。即使是目前最新的 M1 芯片,也最多支持三分屏。當然像 Windows 那樣的窗口布局也是可以了,只是…… 需要你自己慢慢去挪。

          7。 App 使用

          自打 Win8 正式轉向平板模式后,微軟已經歷經了 N 次應用迭代,之前也出現過 Metro、UWP 等不同版本的新應用形式。然鵝…… 最終結果大家也看到了,應用商店不死不活,開發商依舊青睞于為傳統應用添磚加瓦。實話說,這的確是微軟的一個尷尬,因為傳統軟件中能夠適配觸屏的數量極少,而且與 Win11 的 UI 也不是很搭。這也就意味著微軟首先要面對的,其實就是自己陣營里的那部分人。

          反觀蘋果,封閉的生態鏈體系保證了自家應用,無論在風格還是操作邏輯上都極為統一。即便是個別應用由于歷史原因沒有得到適配,也可以強制拉伸至全屏使用。當然這里還有蘋果完善的生態鏈保障,一款應用從 iPad 到 macOS,并不會有明顯的外觀差異。

          當然還有一點也是不容忽視的,那就是微軟此次在發布會上宣稱的兼容 Android 應用一事。雖然不能解決數據同步與多端共享問題,但卻相當于短時間內上架了海量的可支持觸屏的應用。當然這項功能目前也僅限于發布會視頻,由于預覽版尚未開放此功能,實際體驗未知。但對于 Win11 來說,這仍然是一件值得夸耀的事。

          8。 手寫筆

          微軟對于手寫筆的定位,僅僅是簡單的標注與繪圖。一個最明顯例子,就是 Apple Pencil 可以直接將書寫轉為文字。相對而言,微軟認為搞定生產力的家伙還得靠鍵鼠,至于手寫筆么,日常玩玩就可以了,不必太認真。

          9。 多屏幕管理

          Win11 對于多屏幕管理進步明顯,一個最顯著變化,就是當我們將外接顯示器移除后,Win11 不會自動回收這些窗口。甚至當顯示器重連后,窗口還會自動恢復到以前的位置。這樣的表現相信大家也能想到有什么用了,沒錯!做演示簡直爽呆了。

          10。 小組件

          Win11 的小組件擺明了就是為了踢蘋果場子,此次更新的小組件,無論從外觀還是功能使用上,都和蘋果極為相似。即便是第一個測試版,也安排上了天氣、待辦、日程這些與生產力有關系的模塊。同時信息流的加入,也可看作是小部件的一大看點。除了支持點贊互動以外,用戶感興趣的內容還可以收藏起來稍后待看。

          不過目前 Win11 的小組件使用的是云端數據,并沒有和本地 App 打通。比方說你在本地日歷建立好的日程,在小組件中是看不到的。這樣的邏輯與 iPad 完全不同,因為在蘋果中,小部件其實就是 App 的代言人,如果本尊沒有了,小部件自然也就不存在了。

          寫在最后

          總體來說,Win11 此次在觸屏方面的改進是比較大的,特別是它沒有一味地順從蘋果的思路,依舊保持了熟悉的 Windows 味道,必須給個大大的贊。未來的世界一定是生態鏈的競爭,這一點上蘋果做到了,那么微軟呢?拭目以待吧。

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


          文章來源:太平洋電腦網

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          被刷屏的微軟全新3D表情,微軟官方分享背后的設計思路

          seo達人



          圖片

          移動設備激增,零工經濟迅速發展,遠程工作開始興起。在疫情的影響下,幾乎每個人都成了遠程工作者。

          表情符號與我們一道穩步發展,成為鮮活和豐富情感的必要交流工具。肢體語言,微妙幽默,或者環境條件——雖然我們可以親眼看到并回應這些暗示,但在網絡環境中失去它們會極大地影響我們的交流。然而,用表情符號,幾個像素就能以有趣、清晰、能引起情感共鳴的方式表達我們的想法和感受。(彩云注:這就是這項艱巨工作的商業價值)

          隨著世界走向混合工作場景,面對面和遠程結合,線上交流的表達形式比以往任何時候都更加重要。微軟365里有超過1800個表情符號,我們在過去的一年里一直在努力通過創建一個自然的Fluent(流暢)系統 (彩云注:這是他們更新整套表情系統的理念)來更新它們。

          我們選擇了3D設計而不是2D設計,并選擇了讓大多數表情動畫化。在接下來的幾個月里,你會看到這些產品的推出,我們想和大家分享一下,以紀念世界表情符號日。我們也很激動地推出了五個全新的表情符號,這代表著我們對工作、表達和空間的新視角。

           

          擁抱游戲的力量

          在疫情改變工作和生活之間的界限之前,交流就已經朝著真實情感和娛樂的方向發展。為了確保我們的新設計反映這一點,設計研究員Meghan Stockdale與我們密切合作,重新思考專業的圖形表達。通過主次研究,她專注于游戲概念,將其作為一種催化劑,幫助我們挖掘最好的作品和最誠實的自我。她引用了斯圖爾特·布朗(Stuart Brown)的精彩著作Play: How it Shapes the Brain, open the Imagination, and inspiring the Soul (游戲:如何塑造大腦,開拓想象力,激發靈魂),對她的有著特別地影響。

          “游戲對于創造性頭腦風暴、發展和掌握新技能以及團隊建設等活動至關重要,”Meghan說,“但我們通常不愿意在工作或工作工具中給予游戲空間。由于我們工作和成年的關系,玩有時會讓一些人感到不舒服——盡管我們生來就是為玩而生的?!?

          因為對每個人來說,好玩或富有表現力不是件容易的事,表情符號是完美的小幫手。它們絕不是無聊或裝飾性的,而是我們人性的延伸,是重要的溝通工具。根據Meghan的研究,它們可以軟化或強化我們的語氣,為平淡無奇的互動增添樂趣,幫助我們以一種比書面文字更普遍的方式表達自己。

          圖片

          這張圖片展示了我們用不完美的圓來做頭部的形狀。人是不完美的,為什么我們的圖形表示要完美的正圓呢?

          那么,表情符號或其他好玩的媒體適合在工作中交流嗎?游戲鼓勵創新,而表情符號則是有趣的交流者。也許文字和表情符號之間的相互作用加強了兩者的交流力量。也許表情符號的脆弱和輕松不僅可以激發我們自己的創造力,還可以鼓勵我們組織中其他人共同參與。當我們進一步進入混合工作模式世界時尤為重要,在那里我們將首次在網上見到新的團隊成員。

          我們的一些全新表情符號甚至試圖捕捉這個新的混合世界。下面是一些概念草圖,我們希望能得到你的想法。

          圖片

          以上是我們正在創建的新表情符號的概念草圖,以幫助傳達混合工作的現實。從左到右:一心多用,靜音,不拍照,一邊工作一邊照顧孩子,穿著睡衣。

           

          自然有趣,天生流利

          在整個過程中,信任和清晰是我們的指導原則。我們希望人們相信,我們的新表情符號風格會理解到他們的意圖,反映出他們的人性。人是不完美的,我們的創意中有美,這就是為什么我們選擇了一個不完美的圓形作為頭部的輪廓形狀。

          我們還密切關注表情符號中眼睛的表情,并傾向于把眉毛特征做的更加明顯。對我們來說,在保留情感意圖的同時進行設計是至關重要的。最后,因為我們希望人們相信他們并能從設計中找到令人振奮和鼓舞,我們傾向于明亮、高飽和的顏色和大膽的形式! 

          通過全面利用特定的眼睛、嘴巴和頭部形狀,我們創建了一套統一的面部特征,可以縮放,同時保持一致的外觀和感覺。

          為了保持不同類別的1888個表情的一致性,我們在新風格中使用了簡單的幾何形狀作為每個表情的基礎。如果這聽起來很熟悉,那是因為我們連接圖標系統的工作方式是相同的。螃蟹表情確實突出了這一點;我們用圓形和半圓形來代替解剖的表示法,造型更加簡單,從而賦予它更多的個性。

          圖片

          當你注意細節時,平凡也能變得不平凡。圖中的螃蟹表情符號通過大膽、美麗的顏色和厚實的圖形形狀證明了這一點。

          整套表情我都喜歡,但我最喜歡的還是這只螃蟹。這只酷炫的小螃蟹體現了我喜歡我們表情符號系統的地方:它讓看似普通的表情符號都變得與眾不同。無論是螃蟹還是人類,我們的獨創性都蘊含著美。(彩云注:這就是作品中的亮點部分闡述,面試的時候講自己作品的亮點,就可以從類似這樣的角度去講,學到了!)

          最后,但并非最不重要的是,我們必須利用這個機會做出一個改變,只有我們才能真正做到——將經典標準的回形針,改了全新的3D形態。

          當然,我們現在使用的回形針可能比全盛時期要少,但我們無法抗拒懷舊的吸引力。

          圖片

          為了讓自己煥然一新,我們忍不住把扁平的、標準的回形針變成了新造型的回形針。

          表情符號正在鞏固其作為在線交流不可或缺的工具角色,你將能夠在不同平臺和設備上使用這些全新的表情符號。我們的一些新表情從今天開始在Flipgrid中上線,其余的將在未來幾周推出。在這個假日季,團隊和Windows將配備該套件,Yammer、Outlook和更多的產品將在2022年全年實現落地。

          除了表情符號,我們還將在微軟365中通過更具表現力的主題、插圖、背景等,將我們的流暢美學帶入生活。但首先,我們想聽聽你的意見!你最喜歡的表情符號有哪些?如果你能成為一天的表情符號設計師,你會創造出哪些新的表情符號?

           

          本文翻譯已獲得作者的正式授權(授權截圖如下)圖片 

          原文地址:medium

          作者:Microsoft Design

          譯文地址:彩云譯設計(公眾號)

          譯者:彩云Sky

          轉載請注明:學UI網》被刷屏的微軟全新3D表情,微軟官方分享背后的設計思路

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

          截屏2021-05-13 上午11.41.03.png


          文章來源:csdn

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

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



          微軟講解 Win11 設計改進:讓你更接近你所熱愛的一切和生活

          藍藍設計的小編

          微軟發布了一篇博客,向用戶講述了他們 Windows 11 中的設計改進,微軟稱其為“洞察用戶需求和體驗,為十億人創造”的下一代設計。

          微軟指出,Windows 11 的設計關注的是人,電腦如何賦予用戶做他們想做事情的能力,以及用戶喜歡什么。

          這包括 85 個以上的研究項目和數以萬計的測試機制,微軟因此與 Windows 資深粉絲以及對 Windows 有所期望的新用戶進行了交流和探討。

          主題:冷靜(輕松)78886604d33a6e773135d1e9207b607dcd9fc66ec0517-YNt9iW_fw1200.png

          這一改變是可以讓用戶的生活真正變得更美好。

          微軟指出,Windows 11 軟化了此前生硬的 Windows UI(或指圓角 UI 設計?),進一步增加了情感之間的聯系。

          新的開始菜單

          IT之家了解到,Win11 全新的開始菜單現在被放到了底部中間的位置,更簡潔,用戶使用的程序和需要的文件也會被優先排到前部,進一步適配了各種尺寸屏幕的體驗。

          此外,Windows 11 還包括了一些非常別致的設計,例如包括強調中心設計的桌面壁紙。

          保證工作效率

          09fa513d269759ee23b282f33b85f61e6c22dfab.png

          微軟表示,windowing and snapping 功能已經有了改頭換面的設計。所以當你休息片刻或者暫時去查看新聞時(新的小部件旨在尊重工作流程),系統可以記住你的喜好并保持空間設計。

          微軟還為 Windows 11 更新了一種新的設計語言,使 Windows 在使用體驗上比以之前更加連貫。

          新的用戶界面也更加柔和、更加友好,微軟為 Win11 帶來了圓角設計和暖色主題,旨在構建一種更人性化和平易近人的語言,而不會影響到用戶的工作。

          微軟表示,他們希望 Windows 11 不僅僅是一個操作系統,而是編織用戶生活的一塊錦緞,讓你更接近你所熱愛的一切和生活,幫助你更好地工作和與其他人聯系。

          微軟原文(機翻):

          從我們記事起,Windows 就一直伴隨著我們許多人。它擁有 35 年的豐富歷史,充滿了新體驗,向我們展示了計算如何豐富我們的生活:在 Microsoft Word 中撰寫您的第一篇文章,在 Microsoft Paint 中繪制您的第一幅數字藝術作品,或者編寫您的第一行代碼.

          設計下一代 Windows 需要了解過去,但更重要的是對當前和新興人類需求的深刻理解 —— 以及對技術如何支持這些需求的理解。當我們開始 Windows 11 的設計之旅時,我們研究了世界在過去 18 個月中是如何變化的,包括大流行暴露未滿足的需求和加速新行為的方式。更重要的是,我們與人們談論了他們的夢想和抱負,這樣我們就可以了解是什么推動了他們,以及他們需要從他們的技術中獲得什么才能實現他們的目標。Windows 11 的設計完全專注于人、計算如何賦予他們權力以及他們喜歡什么。
          a8773912b31bb051f1be3d9da7046fbc4bede070.png

          創造大量的愛需要與人建立大量的聯系,我們喜歡這一點,因為以人為本是我們設計理念的核心。在 85 多項研究和數以萬計的測試輪次中,我們與每個人都進行了交談,從喜歡我們產品熟悉方面的長期粉絲到希望 Windows 更容易、更平易近人的新客戶。要了解更多信息,請隨時查看我們關于我們的設計、研究過程和理念的視頻!


          這是我們有史以來最以人為本的版本之一,指導性設計原則基于研究期間出現的一個關鍵主題:讓我們的生活真正變得更美好的平靜技術。當今世界非常需要冷靜,而這往往取決于我們是否有掌控感、輕松自在和信任感的能力。Windows 11 通過熟悉的基礎體驗促進了這一點,軟化了以前令人生畏的 UI,并增加了情感聯系。讓您更接近您最愛的體驗:家人、朋友、激情、娛樂和創作。Windows 11 是一切都匯集在一起的地方,對此的需求從未如此強烈。

          與所有事情一樣,大流行影響了 Windows 11。雖然移動技術的興起使 PC 遠離了聚光燈,但去年使它重新回到了舞臺的中心。在個人與專業混合的新虛擬范式中,PC 的強大功能和靈活性使我們能夠在家中的各個角落工作。它一直是工作、家庭和學校值得信賴的工具和值得信賴的合作伙伴,靜靜地等待我們的輝煌時刻。

          過去的一年向我們展示了人類可以有多聰明。在喧囂和動蕩中,我們看到人們實時學習如何在混合環境中工作,幫助孩子們學習,并找到新的聯系和玩耍方式。當我們與它們一起迭代 Windows 11 的設計時,我們努力創造一種深受喜愛的體驗,讓我們可以輕松地專注于對我們每個人最重要的事情。


          以你為中心

          Microsoft Windows 設計團隊受到創造性實用主義的推動。為超過 10 億人設計需要同理心。它依賴于內化人類需求來構建包容所有人的解決方案,同時仍然提供個人風格。隨著 Windows 進入下一個時代,其演變的故事通過以人為本的產品設計和對構建最具包容性和個性化操作系統的堅定承諾再次講述。

          考慮開始菜單:Windows 體驗的基石移到了核心位置。在聽取人們表示在使用 Start 時需要更高的效率和更少的噪音后,我們設計了一種更干凈、更簡單的體驗,通過優先考慮他們喜歡的應用程序和他們需要的文檔,以人為中心。它還適應現代設備的外形尺寸,可以更輕松地訪問從 Surface Go 到超寬顯示器的所有屏幕尺寸。

          在 Microsoft,這些設計決策并不是輕率的。團隊癡迷于每一個像素;我們更新了開始徽標以與我們的新視覺語言保持一致,并利用動畫為交互增添樂趣和信心。我們還特意選擇了壁紙圖像,它歡迎您開機并補充新的中心對齊方式,使您的體驗更加平衡和專注。我們希望您從一開始就真正以 Windows 11 為中心。

          我們對讓技術更加人性化的關注也反映在開箱即用的體驗中,這個時刻曾經歡迎您加入,但現在歡迎您回來。我們知道并非每個人都是首次使用的客戶,我們渴望通過我們的設計來尊重我們與長期忠誠者的關系。您還可以在設置過程中為您的 PC 命名,以便 Windows 感覺獨一無二,比系統設置所使用的隨機名稱更人性化。Windows 是你的,我們設計它是為了慶祝你的生活和工作方式。

          新的 Windows 11 主題提供個性化和自我表達的選擇。

          一旦您安頓下來,Windows 11 就會記住您是誰以及您在一天中需要什么。一鍵式交互將帶您從任務到任務、體驗到體驗,而不會中斷您的工作流程。在過去的一年里,工作和生活之間的界限被重新定義。在這個新版本的 Windows 中,組織活動的能力是我們密切關注的,確保無論環境如何變化,您都能保持專注和流暢。窗口和捕捉已經過重新設計以記住您的偏好,因此當您暫時離開工作大腦查看新聞時(新的小部件旨在尊重您的工作流程),系統會記住您如何組織空間。我們創造了您家中辦公桌的數字等效物,

          窗口和捕捉可幫助您保持工作效率和流程。

          這些變化通過漂亮的新設計語言變為現實,使 Windows 在各種體驗中比以往任何時候都更加一致。聽到人們對更柔和、更友好且不那么令人生畏的 UI 的渴望,我們改進了我們的視覺和聽覺表達方式。我們圓了尖角并創建了一個更溫暖的調色板,以構建一種更人性化、更平易近人的語言,不會妨礙您的工作效率。

          ▲ 一些我們新的 Fluent 圖標、UI 和插圖內容的選擇,以及我們 Segoe UI 可變字體的表示。

          不僅僅是操作系統

          您如何為超過 10 億具有多樣化和獨特需求的人構建產品?你傾聽、迭代和適應。通過對客戶的洞察,我們通過柔化邊緣、減少混亂和設計一致性,使 Windows 11 更加人性化和受歡迎。這些變化還通過新材料和字體、更新的調色板以及旨在吸引廣泛品味的新壁紙和主題包來提升自我表達能力。

          在 Windows 11 中,我們看到了從簡單的功能性技術到情感化、人性化和非常個性化的技術的轉變。Windows 不僅僅是一個操作系統 —— 它是織入我們生活的一部分,讓我們更接近我們所愛的一切,并幫助我們創造和聯系。

          數據可視化設計指南:設備篇

          資深UI設計者

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

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

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

          超全面的數據可視化設計指南(一):設備篇

          設備分類

          1. 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 米。

          超全面的數據可視化設計指南(一):設備篇

          2. 液晶拼接屏

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

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

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

          超全面的數據可視化設計指南(一):設備篇

          3. 大屏拼接處理器

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

          超全面的數據可視化設計指南(一):設備篇

          4. 視頻矩陣處理器

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

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

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

          超全面的數據可視化設計指南(一):設備篇

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

          5. 液晶拼接屏的優勢 – 拼接處理器預設場景

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

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

          超全面的數據可視化設計指南(一):設備篇

          預設場景一:

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

          超全面的數據可視化設計指南(一):設備篇

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

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

          超全面的數據可視化設計指南(一):設備篇

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

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

          超全面的數據可視化設計指南(一):設備篇

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

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

          超全面的數據可視化設計指南(一):設備篇

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

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

          超全面的數據可視化設計指南(一):設備篇

          6. WEB 端大屏

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

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

          超全面的數據可視化設計指南(一):設備篇

          7. 觸摸屏

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

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

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

          超全面的數據可視化設計指南(一):設備篇

          8. 滑軌屏

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

          超全面的數據可視化設計指南(一):設備篇

          9. 虛擬沙盤

          虛擬沙盤/數字沙盤就是用計算機通過投影儀或者 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

          超全面的數據可視化設計指南(一):設備篇

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

          • 結果一:如果正方形比例不變,設計尺寸無限接近于大屏實際比例;
          • 結果二:如果正方形比例被拉伸,設計尺寸小于大屏實際尺寸;
          • 結果三:如果正方形比例被壓縮,設計尺寸大于大屏實際尺寸。

          超全面的數據可視化設計指南(一):設備篇

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

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

          投屏事項

          1. 電腦直接投屏

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

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

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

          超全面的數據可視化設計指南(一):設備篇

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

          超全面的數據可視化設計指南(一):設備篇

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

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

          2. 硬件投屏本地運行

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

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

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

          超全面的數據可視化設計指南(一):設備篇

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

          超全面的數據可視化設計指南(一):設備篇

          3. 控制端操控大屏

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

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

          超全面的數據可視化設計指南(一):設備篇

          4. 多主機多信號投屏

          此種情況主要使用場景:屏幕寬度非常高,并且內容可以分很多模塊展示,模塊彼此之間不受影響獨立展示,這種情況下我們就可以通過此種方式去投屏。通過多個主機分別去投射大屏的同等大小區域,比如圖中的場景模塊被我分成了四等份,我們就可以通過四臺主機去分別投射四個模塊,形成一個完整的大屏。

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

          超全面的數據可視化設計指南(一):設備篇

          5. 不同比例投屏及解決方案

          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??梢钥闯鲈O計分辨率確實太大了,設計的時候如何去優化設計尺寸呢?

          超全面的數據可視化設計指南(一):設備篇

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

          超全面的數據可視化設計指南(一):設備篇

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

          全篇知識點

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

          超全面的數據可視化設計指南(一):設備篇

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



          文章來源:優設 作者:

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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





          日歷

          鏈接

          個人資料

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

          存檔

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