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

          首頁

          Bs界面設計之二:如何做好B端用戶研究?我總結了這4個方面!

          博博

          用戶研究產品設計中很關鍵的一項,它在整個流程中發揮著關鍵的影響。

          在設計中確定相關的數據指標以及用戶行為使得設計更加符合用戶的目標。設計驗證階段可以驗證設計是否符合設計目標。從而讓整個設計流程具有確定性,為用戶與公司帶來價值。

          有哪些研究方法?


          1. 主動找用戶


          日常主動找用戶做研究的方式有:問卷調查,線上數據,深度訪談,可用性測試。

          如何選擇研究方式:

          在日常工作中,要選擇什么方式進行用戶研究其實是非常糾結的。這里給一組日常工作中我們常用的指標進行判斷組合,包括:定量數據,用戶行為,定性數據,用戶態度。

          1. 定量數據:以數量形式存在的屬性,并因此可以對其進行測量,以物理量為例,距離、質量、時間等都是定量數據。

          2. 定性數據:一組表示事物性質、規定事物類別的文字表述型數據。

          3. 用戶態度:用戶對于產品的態度,喜歡或者是不喜歡。

          4. 用戶行為:用戶的針對一個任務的行為路徑。

          這里舉一個例子:想要根據定量數據推測用戶行為—線上獲取數據的方式有很多,其中深度用戶訪談在日常的調研中用的比較多,所以今天主要講講深度用戶訪談如何做。


          2. 深度用戶訪談


          前期準備:三個階段不同

          針對產品設計有三個階段:需求確認,設計實施以及全量上線后的驗證效果。

          1. 需求確認階段核心:確認需求是真實存在的而不是意淫的,主要是用于場景評審過程中,產品經理講述需求的場景和需求的價值。

          2. 設計實施階段核心:為設計師提供用戶行為參考,防止因為沒有用戶行為進行參考而導致的設計師腦補用戶行為產生臆想。

          3. 全量上線后:主要是驗證前期需求和設計過程中的想法給用戶帶來的正負影響,有時候如果內部出現不同的聲音往往會有灰度測試以及 AB 測試等等方式來確認具體哪個方式更合理。全量上線后,主要是看全部設計的結果。

          選取對象:

          除了要挑選不同對象外,還要挑選合適的測試對象才能測試出想要知道的方面,具體的有以下維度:

          用戶類型:具體的分 KA/非 KA,KA 是核心大客戶的意思,客戶具體的分級別是:KA,A,B,C,D。

          一般的情況下是邀請 KA 客戶進行測試。

          角色:具體的要看測試什么功能,比如要測試美業服務場景相關模塊,一般處于這一塊的角色是銷售。

          使用年限成熟度:一般分為新/老,舉個例子:針對新功能上線時候,一般會選擇新用戶,測試操作的難度。

          是否使用過競品:往往用過競品的可以找到兩個產品之間的對比,從而找到優化的點。

          常用的模塊/端:不同的模塊與不同的端,針對的是不同的用戶。舉個例子:在工廠內部,生產工人常用的是 pda 設備。

          如何建立邀約:特殊的角色

          這里講到 SaaS 中有一個角色:客戶成功。為什么要講這個角色,因為有兩個點:

          1. 調研之類的需要獲取客戶信任,客戶成功(客戶服務)是最接近客戶的。如果通過客戶成功邀約的話,成功率最高;

          2. 還有一個點是調研過程中有時候口誤會引起不必要的誤會,這個時候就會反映到客戶成功身上,從而影響到客戶成功的業績。

          針對性話術:

          提高邀約的成功率要通過客戶成功同學,這個時候客戶成功同學其實有自己的顧慮,主要是怕打擾到自己的客戶從而影響到業績,針對調研話術分三個方面:

          1. 價值傳遞打擊痛點:客戶成功同學的業績主要是由客戶的續費率以及流失率兩方面決定,作為設計/調研先表明不會打擾到客戶,而且這次測試的功能/模塊有助于提高客戶成功同學的續費率以及流失率兩個方面,就能大小顧慮。

          2. 了解敏感話題:這里還要通過客戶成功同學來了解客戶的敏感話題,比如:核心數據,收入等等直接不要提。

          3. 注意點:一次性不要去太多人(消費除外),容易嚇到別人。

          邀約客戶注意點:

          1. 電話說明身份和來意,打消客戶的顧慮獲取信任

          2. 盡可能避開營業高峰期,不影響客戶的正常營業

          3. 有時候也會被拒絕,但是也別死心,可以約下一次

          實施中間:

          邀約到位之后,實施主要是兩個部分訪談技巧和人員配合。

          訪談技巧:

          一般的訪談技巧分為 3 種:開放式,半開放式,結構式。

          (1)開放式:話題會比較分散,訪談起來會比較隨意。舉個例子:你覺得這個如何?

          (2)結構式:準確詢問,有一定的壓迫感,更多的是針對用戶行為可以詢問,但是一旦涉及到開放式問題效果就不會太好。而且客戶時間長了也會感覺不會舒服。

          (3)半開放式:針對部分用戶進行開放式詢問,通常選擇這個方式,既不讓用戶感到不舒服,又能達到調研的目的。一般是分成 4 步:

          破冰:一般是自我介紹,情況說明,活絡氣氛,為接下來做準備

          信息確認:了解用戶的基本信息,產品體驗歷史和大概經歷

          逐步深入:開始深入較深度,詳細的提問,了解用戶使用體驗的真實情況和體驗細節

          回顧與補充:結合前面訪談過程中的對話內容,可能要補充的問題,在這里可以跟用戶展開開放式的對話,了解用戶對產品的整體態度、建議,對競品的態度等等。

          人員配合:

          訪談時候不光有訪談的技巧還有人員之間的配合也是比較關鍵的,主要是分為 5 類人員:

          1. 主采訪人員:主要是專業的調研人員負責詢問,這里需要一定的專業的知識作為支撐。

          2. 補充采訪人員:詢問的時候可能會漏掉問題,這時候補充人員就可以找時間進行補充詢問。

          3. 錄音:這個跟客戶之間要先進行說明以及確認才可以進行,不然會引起客戶的反感。

          4. 拍照:輔助人員一般會進行拍照留念,返回去跟團隊進行分析,這里也要提前說明而不是直接進行拍照,這是對客戶的一種尊重

          5. 記錄人員:這里注意點就是不要只會埋頭記錄,還要會抬頭跟客戶有眼神交流

          訪談結束后要對客戶進行感謝,并贈送一點的禮物。

          訪談后期:

          訪談結束回到公司的階段,主要涉及到兩個階段:數據清洗,歸納復盤

          數據清洗:

          在訪談當中,其實不是所有的內容都對改版是有利用價值的(比如:簡單的發泄情緒),需要把重復的問題和無關的問題清理出來,找到所有訪談中有價值的部分,為后面的設計進行有力的支撐。

          歸納復盤:

          歸納復盤階段主要是把所有需求進行分類,然后根據類型進行任務區分以及任務排期,主要分成 5 個類型:

          1. 新增功能:以前沒有的功能,現在新增功能,具體的執行角色是產品經理。

          2. 功能優化:單個功能的問題,不流暢等等產品帶來的體驗問題。具體執行人是研發人員。

          3. 流程優化:單挑流程復雜,效率低等界面操作流程優化問題。具體執行人是設計師。

          4. 視覺優化:顏色不清晰/圖標表達不明/字號看不清等等示意和指引,信息標識問題。具體執行人是設計師。

          5. 性能優化:卡/BUG/LOADING 等系統緩慢的問題。具體執行人是研發人員。


          3. 用戶找我們


          我們除了可以去找客戶,客戶也回來找我們反映問題。這個方式其實是更加直接的。這個方式的三個階段,分別是收集需求、問題分類、以及問題進行排期。

          收集問題:

          用戶主動找我們有三種方式:用戶需求方反饋池,客服記錄,群聊記錄。

          1. 用戶需求反饋池:銷售/客服/客戶成功將收集到的用戶需求放入池子中,產品經理可以去池子里面篩選需求。

          2. 客服記錄:用戶直接跟客服進行反饋,客服收集之后直接扔到需求反饋池里面。

          3. 群聊記錄:這里的群聊有“銷售+客戶成功+產研群”也有“客戶成功+商家群”,定時會有值班的設計師/研發/產品經理進行值班,在內部我們叫做司機。有句風趣的,長期值班的我們會戲稱對方“X 司機”。主要是將問題收集起來直接發給相關的人員,將問題及時解決。這里的回復方式比較講究:回答盡可能給不確定的時間節點,打消用戶的顧慮。

          問題歸類就跟復盤分析一樣,重復的就不用再寫一遍了。

          如何解決用戶反饋的問題?

          需求分級:

          我們內部專門有個區分的表格,其中橫軸是重要與不重要,縱軸是成本低和成本高。我們會將所有需求開會討論進行排布。

          需求排序:

          具體的需求我們分成 4 類:

          1. 重要/成本低:一般是 KA 級別的客戶才是重要的,成本計算要具體看,這個優先進入排期。

          2. 重要/成本高:次優先級解決

          3. 成本低/不重要:需要排期一次性解決

          4. 不重要/成本高:有時間再解決,沒時間再說,這里一般指的是 F 類客戶個性化需求。


          4. 成為用戶


          這個一般是土豪公司的選擇,典型的像有贊,把實體店開在公司樓下。然后讓產研人員定期去當店小二,在自己的系統當中去找出問題,早上去做店小二,下午就把 BUG 修改完。


          總結


          用戶調研
          是產品設計中很關鍵的一個環節,需要每個環節和每個人認真的去做。

          作者:玩設計的雞腿

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:















          Bs界面設計之三:B端設計指南:快速了解B端產品的四種分類

          博博

          在我們日常的溝通當中,很多時候大家都會將自己的產品,以“B 端產品” 這樣寬泛、含糊的方式進行闡述。但是 B 端產品由于服務對象不同、發展方向差異,也就導致產品本身就會有很多不同的分類。

          今天就和大家分享 B 端產品的四種分類,以及對于設計師而言,這些分類會給我們設計落地、職業選擇造成哪些影響?


          垂直業務型產品


          垂直業務型產品是針對企業垂直獨立的業務需求所設計出來的 B 端產品。這類產品的出現,主要是圍繞某一個復雜業務場景,去解決這個場景當中企業經營、管理的實際問題。

          B端設計指南:快速了解B端產品的四種分類

          比如以 CRM 為例:CRM 的全稱客戶關系管理系統

          因為它是客戶關系管理系統,而使用這類產品的主要角色就是銷售員工,他們在進行商品售賣(特別是交易周期較長的商品時)需要銷售人員通過 CRM 進行管理客戶。

          B端設計指南:快速了解B端產品的四種分類

          而作為企業為什么要使用 CRM 產品?

          其實是因為企業本身會有較強的管理需求,我希望能夠通過 CRM 去監督每一個銷售人員究竟是否認真完成工作,是否合理合規高效的與客戶進行跟進溝通,因此可以通過 CRM 滿足企業的管理需求。

          但“銷售”這類角色往往非常特殊,它存在于各行各業,比如樓下提供保險業務的銷售人員、樓上在線培訓的銷售人員、自己公司 B 端產品本身的業務銷售人員。

          B端設計指南:快速了解B端產品的四種分類

          而大多數 CRM 產品考慮的不是針對每一個行業單獨去制作一款 CRM,因為銷售團隊在使用的過程當中,就會存在很多共性,產品便可以通過共性去抽象一個針對多行業的客戶關系管理系統。

          垂直業務型通常屬于 B 端產品當中難度較高的產品類型,因為不同的業務,往往作為設計師需要了解的不是簡單的這個頁面長什么樣,而是這個業務下,員工應該怎么用,怎么用才是更為合理的,而在很多招聘信息當中,就會發現企業更喜歡去招聘有過類似經驗的設計師。

          當然作為設計師,如果選擇進入一家垂直業務性產品的企業,應該更多的去閱讀行業相關的書籍,比如想要做好 CRM 產品,你必須了解什么樣的銷售人員,具備什么能力,才是一名資深的銷售。通過了解行業人員的具體使用細則才能更好落地設計。

          B端設計指南:快速了解B端產品的四種分類


          行業屬性型產品


          行業屬性型產品是針對某個行業定制的一系列,從上至下、從內到外的產品功能。這類產品主要是圍繞一個具體的行業去構建整個產品的解決方案,目的是這個行業的商家,在使用了這款產品過后,就能夠解決它目前經營過程當中的問題。

          比如以在線教育行業為例,小鵝通應該就是在線教育行業的頭部產品,去觀察它的產品功能模塊你會發現它會涵蓋課程詳情的內容管理、學員知識付費的交易管理、對產品進行營銷的 Marketing、成功付費學員的客戶關系管理,而這些功能模塊在其他產品當中都可以單獨拿出來,當做一個大型的 B 端系統的功能。

          B端設計指南:快速了解B端產品的四種分類

          行業屬性型產品更多是以這個行業當中需要用到的產品出發,考慮就不再是單一的老師角色,而是一個課程培訓行業所涉及到的所有工具,都希望能夠通過行業屬性型產品去解決。

          在設計上,行業屬性型產品不會過于復雜,功能都會相對比較簡單,因為對于這些商家而言,不需要過于復雜的系統,只要你能夠滿足它的日常工作即可。

          比如小鵝通,就是屬于在線教育行業的產品,它與紛享銷客當中的客戶管理就會存在明顯差異,無論是從功能還是界面的復雜程度來說,都完全不一樣。可以看到篩選、視圖、表格操作,等多方面的交互、產品規劃,都會有明顯的差異。

          B端設計指南:快速了解B端產品的四種分類


          協同辦公型產品


          協同辦公型產品是通過軟件實現工作協同、辦公自動化,讓企業高效運轉的產品。

          大多數情況下,企業內部的辦公管理沒有太多個性化訴求,因此會購買成熟的辦公協同產品:比如飛書、企微、釘釘、泛微

          B端設計指南:快速了解B端產品的四種分類

          目前較為常見的協同辦公產品包含:在線文檔、OA 辦公自動化、IM、在線會議、項目管理、研發管理等產品。

          協同辦公產品,在企業當中通常只會有一款軟件。比如在一家企業 使用了企業微信,就等于它會去使用騰訊會議、騰訊文檔、tapd 等多款關聯性的產品。

          在設計層面上,協同辦公型產品是最接近 C 端產品的特性,因為他的使用人群很多,并且使用的角色也復雜多樣,因此在產品設計上,對于 視覺交互往往有著更高的要求。


          運營管理型產品


          運營管理主要分為運營與管理兩個系統。

          運營是針對自己本身就有 一款產品 A(不限于 C 端 B 端) ,為了滿足產品 A日常界面的展示與維護,需要專業的運營類后臺系統所支撐。比如淘寶、抖音、小紅書,這些產品,他們都會有自己的內容審核 、廣告投放等多個后臺系統。

          B端設計指南:快速了解B端產品的四種分類

          運營的主要目的就是審核,日常的數據資料維護,比如以 sspai 為例,在少數派的網站當中,有作者進行投稿,因此必然會存在對應的運營人員進行內容審核,同時少數派還會有會員、商品購買,因此能夠推斷出少數派的運營后臺一定會包含類似成員管理、會員管理,訂單管理等前臺系統已經擁有的功能,來執行網站后續的運營工作。而管理則是針對系統當中的商戶、用戶、租戶的“信息資料”進行管理。

          主要會涉及到:

          商戶的門店信息:

          餓了么的商家服務后臺,商家可以進入到系統里面去配置門店的具體信息、售賣的菜品、對應的活動等等,而餓了么就是通過這樣一個平臺能夠規范商家在系統當中的行為,能夠對他們進行有效的監管。

          B端設計指南:快速了解B端產品的四種分類

          租戶功能的開通:

          租戶主要針對的是 SaaS 產品,也就是購買 SaaS 產品的客戶,而我作為產品提供方,想要對每一個客戶進行管理,就會有一個租戶平臺進行管理。比如在我們一個租戶管理系統當中,為了讓客戶成功對每位租戶的信息進行快速操作,在設計上并沒有優先去考慮設計原則,而更多是將操作外置,讓信息快速傳遞的同時,能夠快速操作。同時使用的客戶因為都需要進行上崗培訓,這樣簡單的操作也能讓他們更容易理解。

          用戶信息的分析:

          對所有在平臺的數據進行分析管理。比如在 B 站當中,就會存在大量的用戶,一旦有人發言出現問題,或者言語行為過于暴力,那一定會有系統來管理這樣的特殊情況。而用戶給到的數據我們還能夠對其進行更為細致的分析。


          最后


          其實一款 B 端產品并不是固定在某一個類型當中,更多是隨著市場的不斷發展進行變化,因此要去理解的是這個軟件背后的業務訴求、推導他們的功能模塊,盯著一款產品“發呆”(其實就是去想想,多理解),當然這對于 B 端產品的類型,有什么自己的想法也可以在評論區發表自己的看法~

          作者:CE青年

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:














          大數據可視化界面設計之一:超全面的數據可視化設計指南:風格篇

          博博

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

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


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

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

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

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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


          傳統酷炫風格


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

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

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

          超全面的數據可視化設計指南:風格篇

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


          HUD 風格


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

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

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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


          FUI 風格


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

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

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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

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


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


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

          • 傳統風格:多種色彩
          • FUI 風格:科技圖形
          • HUD 風格:版式排版

          超全面的數據可視化設計指南:風格篇

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

          超全面的數據可視化設計指南:風格篇

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

          • 科技感的界面有哪些特征?
          • 同展示條件下不同應用場景,又會有什么樣的差異?
          • 三維的表現形式,是否真的跟科技感成正比?
          • 面對段落文本需求,列表需求等如何把頁面做出科技感?

          超全面的數據可視化設計指南:風格篇

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

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

          超全面的數據可視化設計指南:風格篇

          配色

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

          超全面的數據可視化設計指南:風格篇

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

          • 傳統科技藍風格可視化

          超全面的數據可視化設計指南:風格篇

          • 其他科技藍風格可視化

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          • 橘色科技感風格可視化

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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

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

          背景

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

          超全面的數據可視化設計指南:風格篇

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

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

          圖形

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

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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

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

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

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

          超全面的數據可視化設計指南:風格篇

          動效

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

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

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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

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

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

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

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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

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

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

          超全面的數據可視化設計指南:風格篇

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

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

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

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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

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

          超全面的數據可視化設計指南:風格篇

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

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

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

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

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

          超全面的數據可視化設計指南:風格篇

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

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

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

          超全面的數據可視化設計指南:風格篇

          • who:王局長
          • when:領導人會議時
          • where:公安局
          • what:新基建建設 數字化轉型事項

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

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

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

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

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

          超全面的數據可視化設計指南:風格篇

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

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

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

          超全面的數據可視化設計指南:風格篇

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

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

          超全面的數據可視化設計指南:風格篇

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

          • 優點

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

          • 缺點

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

          • 難點

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

          • 網址

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

          以高德 API 為例

          超全面的數據可視化設計指南:風格篇

          矢量地圖、省市區塊

          • 優點

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

          • 缺點

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

          • 難點

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

          • 網址

          http://datav.aliyun.com/tools/atlas/

          以 DATAV 地圖下載器為例

          超全面的數據可視化設計指南:風格篇

          矢量地圖模型、省市區塊

          • 優點

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

          • 缺點

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

          • 難點

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

          • 教程

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

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

          超全面的數據可視化設計指南:風格篇

          三維模型、城市建模

          • 優點

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

          • 缺點

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

          • 難點

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

          • 教程

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

          cityengine 程序化建模

          超全面的數據可視化設計指南:風格篇

          知識圖譜、數據中臺等

          • 優點

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

          • 缺點

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

          • 難點

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

          • 網址

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

          以知識圖譜為例

          超全面的數據可視化設計指南:風格篇


          知識點總結


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

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

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

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

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

          超全面的數據可視化設計指南:風格篇

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

          作者:生活因你而火熱

          轉載請注明:優設網

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

          魏華的微信.png

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

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

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設

          ui設計,界

          計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇












          大數據可視化界面設計之二:可能是最詳細的大屏數據可視化設計指南!

          博博

          @UX-BOY :可能是大屏數據可視化設計介紹最詳盡的一篇文章,幫你盡量躲開大屏數據可視化路上那些坑。

          1.jpg

           

          文章目錄

           
          1. 基礎概念
          2. 大屏數據可視化設計原則
          3. 大屏可視化設計流程
          4. 大屏設計的注意事項
          5. Q&A
          6. 總結

           

          基礎概念


          1. 什么是數據可視化

          把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化,數據可視化是為了更形象地表達數據內在的信息和規律,促進數據信息的傳播和應用。

          在當前新技術支持下,數據可視化除了「可視」,還有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射,是抽象數據的具象表達。

          2.jpg

          3.gif

          △ 數據可視化作品《 launchit 》,作者:Shane Mielke

          作者寫了本書,地圖上顯示了世界各地讀者的分布情況及對應人數。

          4.jpg

          △ 數據可視化作品《 world-drawn-by-travelers 》,作者:TripHappy

          國家之間相互連通的旅游路線,顏色越相近的國家,表明兩個國家的人們互動越頻繁。

          2. 什么是大屏數據可視化

          大屏數據可視化是以大屏為主要展示載體的數據可視化設計。

          「大面積、炫酷動效、豐富色彩」,大屏易在觀感上給人留下震撼印象,便于營造某些獨特氛圍、打造儀式感。電商雙11時大屏利用此特點打造了熱烈、狂歡的節日氛圍,原本看不見的數據可視化后,便能調動人的情緒、引發人的共鳴,傳遞企業文化和價值。

          5.gif

          利用面積大、可展示信息多的特點,通過關鍵信息大屏共享的方式可方便團隊討論和決策,故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。

          數據分析類:

          6.jpg

          △ 圖片來源:必應,圖片作者:帆軟軟件有限公司

           

          大屏數據可視化設計原則


          大屏數據可視化設計原則:設計服務需求、先總覽后細節。

          1. 設計服務需求

          大屏設計要避免為了展示而展示,排版布局、圖表選用等應服務于業務,所以大屏設計是在充分了解業務需求的基礎上進行的。那什么是業務需求呢?業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標,是大屏數據可視化的價值所在。

          2. 先總覽后細節

          大屏因為大,承載數據多,為了避免觀者迷失,大屏信息呈現要有焦點、有主次。可以通過對比,先把核心數據拋給用戶,待用戶理解大屏主要內容與展示邏輯后,再逐級瀏覽二三級內容。部分細節數據可暫時隱藏,用戶需要時可通過鼠標點擊等交互方式喚起。

           

          大屏可視化設計流程


          規范的流程是好結果的保證。找到一個可參考的流程,然后步步為營,就能避免很多不必要的返工,保證設計質量和項目進度。

          7.jpg

          1. 根據業務場景抽取關鍵指標

          關鍵指標是一些概括性詞語,是對一組或者一系列數據的統稱。一般情況下,一個指標在大屏上獨占一塊區域,所以通過關鍵指標定義,我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。以共享單車電子圍欄監控系統為例,這里的關鍵指標有:企業停車時長、企業違停量、熱點違停區域、車輛入欄率等。

          確定關鍵指標后,根據業務需求擬定各個指標展示的優先級(主、次、輔)。

          8.jpg

          2. 確立指標分析維度

          「橫看成嶺側成峰」。同一個指標的數據,從不同維度分析就有不同結果。很多小伙伴做完可視化設計,發現可視化圖形并沒有準確表達自己的意圖,也沒能向觀者傳達出應有的信息,可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。

          9.jpg

          上圖向大家展示了數據分析常用的4個維度,我們在選定指標后,就需要跟項目組其他小伙伴討論:我們的各個指標主要想給大家展示什么,更進一步的講,是我們想通過可視化表達什么樣的規律和信息。而上圖,可以引導我們從「聯系、分布、比較、構成」四個維度更有邏輯的思考這個問題。

          • 聯系:數據之間的相關性。
          • 分布:指標里的數據主要集中在什么范圍、表現出怎樣的規律。
          • 比較:數據之間存在何種差異、差異主要體現在哪些方面。
          • 構成:指標里的數據都由哪幾部分組成、每部分占比如何。

          當然,上圖例舉的示例圖表都比較傳統,在大屏數據可視化中常還有另一類地理信息(常以2/3D地圖、地球呈現)出現。上圖雖未包含這類圖形,但它提供給我們的確定數據分析維度的思路和方法是相通的,可借鑒。

          3. 選定可視化圖表類型

          當確定好分析維度后,事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里篩選出最能體現我們設計意圖的那個就好了。

          選定圖表注意事項:易理解、可實現。

          易理解

          可視化設計要考慮大屏最終用戶,可視化結果應該是一看就懂,不需要思考和過度理解,因而選定圖表時要理性,避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。

          10.jpg

          可實現

          我們需要了解現有數據的信息、規模、特征、聯系等,然后評估數據是否能夠支撐相應的可視化表現。

          我們設計的圖形圖表,要開發能夠實現。實際工作中,一些可視化效果開發用代碼寫很容易實現,效果也不錯,但這些效果設計師用 Ps / Ai / Ae 這些工具模擬時會發現比較困難;同樣的,某些效果設計師用設計工具可以輕易實現,但開發要用代碼落地卻非常困難,所以大屏設計中跟開發常溝通非常重要,我們需要明確哪些地方設計師可以盡情發揮,哪些地方需要謹慎設計。一個項目總有周期與預算限制,不會無限期的修改迭代,所以設計師在這里需要抓住重點,有取舍,不鉆牛角尖、不死磕不放。

          11.jpg

          4. 了解物理大屏,確定設計稿尺寸

          多數情況下設計稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個信號源時,就會有多個設計稿,此時每個設計稿的尺寸即對應信號源電腦屏幕的分辨率。

          12.jpg

          一般情況下設計稿的分辨率就是電腦的分辨率,當有多個信號源時,有時會通過顯卡自定義電腦屏幕分辨率,從而使電腦顯示分辨率不等于其物理分辨率,此時,對應設計稿的分辨率也就變成了設置后的分辨率。此外,當被投電腦分辨率長寬比與大屏物理長寬比不一致時(單信號源),也會對被投電腦屏幕分辨率做自定義調整,這種情況設計稿分辨率也會發生變化。所以設計開始前了解物理大屏長寬比很重要。

          5. 頁面布局、劃分

          尺寸確立后,接下來要對設計稿進行布局和頁面的劃分。這里的劃分,主要根據我們之前定好的業務指標進行,核心業務指標安排在中間位置、占較大面積;其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近,把圖表類型相近的指標放一起,這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

          13.jpg

          6. 定義設計風格

          很多小伙伴也許沒接觸過大屏設計工作,但大多數人都應該有 APP 或者 Web 風格定義的經驗。我們在定義一款 APP 或者 Web 頁面設計風格時常用的方法是什么呢?情緒板。

          大屏雖酷炫,但實際上也是運行在瀏覽器里的 Web 頁面,所以大屏設計風格定義方法也同樣可以用情緒板來做,這種方法也是目前比較科學高效的風格定義手段。

          14.jpg

          上圖提供了情緒板應用的腦圖,具體操作細節不做介紹,不太了解的小伙伴可以自己找找資料。

          編者按:一篇好文幫你掃盲,運用情緒板搞定設計→《該怎么運用情緒板,才能讓設計作品更有說服力?》

          情緒板的一套流程下來,我們定義的風格基本是科學準確的,可以指導我們執行設計。如果是給甲方做大屏,這個流程也可以讓我們提出的方案更有說服力。

          7. 可視化設計

          根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來說大屏可視化主要有指標類信息點和地理類信息點兩大可視化數據。指標類信息點可視化效果相對簡單易實現,而地理類信息點一般可視化效果酷炫,但是開發相對困難,需要設計師跟開發多溝通。地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點,所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求,硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況,所以這點也是需要提前溝通評估的。

          15.gif

          8. 樣圖溝通確認

          這里的溝通分三個層面:設計師對內溝通、設計師對外溝通、設計師與大屏的「溝通」。

          16.jpg

          樣圖溝通環節,最初的樣圖不需要十分精致,我們可以把它理解為一個「低保真」原型,然后通過不斷溝通修改,讓它逐步完善精致起來,也就是小步快跑,避免那種一下子走到終點,然后又大修大改的情況。

          因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點,所以這一步我們需要用盡可能簡單的方法 ,把之前幾步的成果在頁面上快速體現出來,然后根據樣圖效果嘗試確定五方面內容:

          • 之前確立的布局在放入設計內容后是否依然合適;
          • 確立的圖表類型帶入數據后是否仍然客觀準確;
          • 根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受;
          • 已有的樣式、數據內容、動效等在開發實現方面是否存在問題;
          • 大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。

          跟大屏「溝通」是比較重要也是個特殊的環節,這也是我覺得大屏設計跟其它設計不一樣的地方,大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境,這里的很多問題只有設計稿投到大屏上才能夠被發現,所以這一步在樣圖溝通確認環節非常重要,有時候需要開發出 demo,反復測試多次。

          9. 頁面定稿、開發

          事實上頁面開發階段并不是到了這一步才進行,這里說的頁面開發僅指前端樣式的實現,實際上后臺數據準備工作在定義好分析指標后就已經開始進行了,而我們當前的工作是把數據接入到前端,然后用設計的樣式呈現出來。

          17.jpg

          切圖與標注

          由于大屏實際就是一個 web 頁面,所以開發階段的切圖與標注是少不了的。

          切圖:哪些元素需要切圖,怎么切?

          一般開發用代碼寫不出的樣式或動效,都需要設計師切圖作支持:比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。

          標注:Web頁面用什么插件做標注這個大家都很熟悉,我就不多說了。需要注意的是,如果大屏頁面需要在不同比例的終端展示,那么此時的標注與開發可以使用 rem 作為基本單位來實現,這樣實現的大屏頁面在后期會有更好的擴展性與適應性。

          10. 整體細節調優與測試

          這部分是指頁面開發完成后,將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。

          視覺方面的測試(有點像 APP 的 UI走查):關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。

          性能與數據方面的測試:圖形圖表動畫是否流暢、數據加載、刷新有無異常;頁面長時間展示是否存在崩潰、卡死等情況;后臺控制系統能否正常切換前端頁面顯示。

           

          大屏設計的注意事項


          1. 字體使用

          字體優先使用系統默認字體,需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。

          18.jpg

          如果頁面是云端部署,需要嵌入字體包時,我們可以使用 FontCreator 這類的軟件把那些用不到的字符從字體包中刪掉,然后重新打包上傳,減小字體包大小,可以優化頁面加載體驗,避免在替換默認字體的過程中出現頁面文字跳動等現象。(一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符,對于大屏這個明確的場景,我們可以刪掉其它使用不到的字符,僅保留中文、拼音和數字)

          19.jpg

          2. 顏色搭配

          色彩明度與飽和度差異顯著、對比鮮明, 盡量避免使用鄰近色配色。

          20.jpg

          使用深色暗色背景:深色暗色背景可減少拼縫帶來的不適感。由于背景面積大,使用暗色背景還能夠減少屏幕色差對整體表現的影響;同時暗色背景更能聚焦視覺,也方便突出內容,做出一些流光、粒子等酷炫的效果。

          漸變色慎重使用:大屏普遍色域有偏差,顯示偏色,因而使用漸變色需要根據大屏反饋確定是否調整,純色最佳。

          3. 頁面布局

          主次分明、條理清晰、注意留白,合理利用大屏上各個小的顯示單元,并盡量避免關鍵數據被拼縫分割。

          21.jpg

           

          Q&A


          1. 設計稿投到大屏上顯示效果不佳怎么辦?

          大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下,我們應該在設計開始前,就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品,然后投上去查看實際效果。因為大多數時候大屏都會存在色彩偏差,這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現,如果不可以,那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面,樣圖溝通環節及時測試也很重要。

          2. 大屏設計定稿后,切圖切幾倍圖?

          由于是將我們電腦屏幕投射到了大屏,大屏上的內容是運行在我們電腦瀏覽器上的頁面。所以切圖根據我們電腦的分辨率,正常切1倍圖就可以了。

          3. 1920*1080的設計稿,投到9000*4320的屏幕上,文字圖片會虛么?

          看情況,視大屏系統硬件規格與觀看距離來定。這塊有四個概念需要跟大家交流一下。

          大屏邏輯分辨率(設計稿尺寸)、顯卡輸出分辨率、視頻矩陣切換器( DVI )支持分辨率、大屏實際物理分辨率。

          一般后兩個是沒問題的,大屏跟矩陣切換器是由大屏廠商提供,一般剛好配套大屏。容易出問題的是顯卡輸出分辨率,我們電腦屏幕分辨率并不是最終顯卡傳遞到 DVI 接口的分辨率,傳遞到 DVI 接口的分辨率是電腦顯卡所能輸出的最大分辨率(部分電腦可設置或自定義輸出分辨率)。輸出分辨率等于 DVI 支持分辨率時顯示效果最佳。輸出分辨率低于 DVI 支持分辨率,DVI 會將信號放大后傳遞到大屏,放大的過程中就有圖像信息丟失,雖然此過程中有各種算法支持去保證圖像盡可能清晰,但算法再好,跟真實圖形還是有差距的。此外,多信號源投射效果優于單個信號源投射。對于現場直播數據大屏,一般至少有兩個信號源,一個投屏,另一個也投屏但是處于備用狀態。

          離大屏的距離也影響觀感,一般離得近,顆粒感明顯,距離稍遠,會顯的較為清晰。

          4. 設計稿完成開發后,發現在大屏上頁面有被拉伸或者壓縮的情況,怎么補救?

          一般來講,開發只需要對設計圖做還原即可。但特殊情況下,比如顯示器擴展不正確導致頁面被拉伸或壓縮,這時就需做處理:我們可以先得到被拉伸/壓縮的比例,然后對整體視圖做壓縮/拉伸處理,再由其拉伸/壓縮,這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外,了解被投電腦硬件特點,有的電腦可以通過自定義分辨率解決這部分問題。

          5. 除自行開發可視化大屏外,還可以通過哪些第三方服務來快速實現?

          阿里云 DataV、騰訊云圖、百度 Sugar 等。

          6. 數據可視化的圖表樣式可以在哪些地方找到參考?

          圖表部分的二個庫是我們設計師可以打開瀏覽查看的,這里面所有的圖表樣式都是基于代碼實現的,可以作為我們設計圖表的參考,也可以讓開發拿代碼去用,或者在這些圖表的基礎上修改。

          工具類的需要有一定的代碼基礎,里面同樣有豐富的圖表,所以跟開發的溝通也很重要,因為他們可能會了解多一些更新的前沿的圖表形式,是我們設計師不知道的,所以彼此多溝通交流實在太重要了。

          22.jpg

           

          總結


          數據可視化是一門龐大系統的科學,本文所有討論僅針對大屏數據可視化這一特定領域,管中窺豹,如有遺漏或不足之處歡迎大家討論交流。

          作者:UXBoy

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

           

          大數據可視化界面設計之十:數據可視化必修課:表格篇

           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           

           

           

          大數據可視化界面設計之三:可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          博博

          可視化大屏 UI


          上文說到可視化設計是一個綜合類交叉學科,同樣在大屏 UI 設計中也是一個相對復雜的流程,我們需要對大屏的布局、風格、主視覺、信息圖表、字體、規范、動效等方面綜合考慮,推導設計方案。

          設計前:一定要對用戶需求充分分析和理解,要知道大屏的展示場景及設計分辨率,大屏的拼接方法都要有一定的了解,最后是跟開發溝通下實現的工具與方法。

          設計中:構思布局,可以在紙上簡單畫一下。根據業務需求定義設計關鍵詞進行設計的提煉與分析,方便自己找參考。顏色上背景深色為主,為了更好地聚焦,數據可以采用亮色,有一定的對比關系,便于業務信息傳達。字體上可以采用系統默認字體,數字采用特殊字體包的形式(這塊根據實際需求,切記不要照搬)。圖表選擇恰當的展示形式,同時保證視覺上的統一(分清頁面的主次關系,圖表的展示切莫設計過度,容易造成搶主體)

          設計后:再次校驗信息層級、文字大小、圖表等各層級間的對比關系是否傳達準確,與技術同步溝通下技術的實現性。最后開發完成后,要拿演示 demo 去現場測試,看下整體展示效果,測試輸出是否有問題,有無拉伸問題,拼接縫與內容有無穿插,及時與開發進行頁面的校驗工作,最終才算是設計完成。

          下面針對可視化設計中布局、風格、主視覺、信息圖表、字體、規范、動效等 7 個方向細節點的拆解。

          1. 布局

          通過硬件設備信息可以得到可視化的設計尺寸,基于尺寸新建設計畫布后,第一件事就需考慮頁面的整體布局??梢暬笃猎O計從信息布局到數據表達,都需要設計師對業務深入了解后才能用數據助力業務決策。

          常見的大屏布局:居中結構、左右結構兩種常見的布局形式以常規的 16:9 模板為例,下面列舉的一些常見的布局形式,供大家參考。

          居中結構

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          異形超寬拼接屏幕。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          左右結構

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          布局的原則一定要主次分明,根據業務需求抽取關鍵性的指標,提取主要信息。可以在紙上大概畫一下,然后在軟件里具體細化布局。避免次要信息的面積過大,喧賓奪主,影響整體的視覺效果。

          2. 風格

          提起可視化大屏,大家都會聯想到:科技感、FUI、HUD 這些關鍵詞,可以說可視化大屏跟科技、數據這兩詞是強關聯的,風格上也基本是這一類方向。

          定義設計風格:一般會基于業務需求場景去定義幾個設計關鍵詞,根據關鍵詞去找一些參考圖,推導出貼合業務的設計風格。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          我們可以通過調整顏色、裝飾細節、主視覺、字體等一些細節點控制區分不同的設計風。下面拿圖表舉例,我們在做設計的時候,只需調整卡片和標題的裝飾,就能夠展現出不同的設計風格。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          3. 主視覺

          主視覺部分大致分為:地球、地圖、智慧城市、行業類業務展示等。目前比較容易出效果的都會采用三維模型的處理方式。

          地球:粒子地球、地圖貼圖、地球模型。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          地圖:第三方在線地圖(百度、高德、騰訊、谷歌)基于地圖開放平臺進行個性化配置?;蛘咄ㄟ^地理位置數據建模:如全國和各個省份的輪廓模型。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          智慧城市:GIS 參數化生成簡模和重點樓宇定制化建模。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          行業類:多數為定制化建模。如工業類、醫療類、能源類、園區、學校、港口、工廠、倉儲庫房、零售、工程、安防、國防軍工等。

          以下圖片源于 DATAV

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          主視覺是可視化設計中的一大難點,不光是設計落地的時候也會有需要注意的點,這里建議大家在做之前一定要充分跟開發溝通,確認好技術選型,方便后期輸出跟開發更加高效的對接。

          4. 信息圖表

          圖表的設計原則是易理解、可實現,能夠準確表達數據意圖,給用戶傳達明確信息。


          以下圖片源于網絡,如侵刪

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          上圖通過使用場景可分為比較、聯系、構成、分布四個維度解釋圖表的不同屬性類別。在做可視化大屏設計的時候可以參照上圖,選擇對應的數據圖表。

          比較

          兩個及以上變量數據,一是基于分類不同的對比,二是基于時間維度的對比。常見的圖表:條形圖、柱狀圖、雷達圖、玫瑰圖、?;鶊D等

          聯系

          兩個及以上數據之間的相關性,隨時間變化比較關聯。常見的圖表:散點圖、氣泡圖、多級餅圖、熱力圖、力導向圖等。

          構成

          指標里的數據都由哪幾部分組成、每部分占比如何。常見的圖表:餅圖、環形圖、堆積面積圖、堆積柱狀圖、瀑布圖等。

          分布

          指標里的數據主要集中在什么范圍、表現出怎樣的規律,想表達兩個數據點之間數量的演變過程。常見的圖表:階梯折線圖、面積圖、直方圖等。

          基于圖表的類型可分為:餅圖、線形圖、柱狀圖、混合圖、面積圖、散點圖、極坐標圖、關系圖、樹圖、?;鶊D、漏斗圖、熱力圖、還有其他圖表類型等。

          餅圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          適合展示分類的占比情況,不適合展示分類過多(超過 9 條數據)或者差別不明顯的場景。

          線形圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          折線圖用于顯示數據在一個連續的時間間隔或者時間跨度上的變化,它的特點是反映事物隨時間或有序類別而變化的趨勢。

          當水平軸的數據類型為無序的分類或者垂直軸的數據類型為連續時間時,不適合使用折線圖。同樣,當折線的條數過多時不建議將多條線繪制在一張圖上。

          柱狀圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          柱狀圖提供了分類數據的可視化展示,基于不同的數據類型有以上幾種不同的形式。分類數據是將數據分組成離散的組,例如月份、年齡組、鞋碼和動物。這些類別通常是定性的。圖表上的條形圖可以按任何順序排列。

          混合圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          折線圖和堆疊柱狀圖的組合圖表。同時顯示兩個坐標軸,用于展示兩種不同類型的數據。

          適用于帶有細分分類的累計數據大小以及與之相關的趨勢數據,例如在過去十年全國三大產業的具體產值,以及 GDP 增長率。

          面積圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          面積圖強調數量隨時間而變化的程度,也可用于引起人們對總值趨勢的注意。適合于比較多個變量隨時間間隔變化趨勢。

          散點圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          散點圖是一種使用直角坐標來顯示一組數據的兩個變量值的圖表。數據顯示為一個點的集合,每個點都有一個變量的值決定水平軸上的位置,另一個變量的值決定垂直軸上的位置。

          通常用于顯示和比較數值,不光可以顯示趨勢,還能顯示數據集群的形狀,以及在數據云團中各數據點的關系。

          極坐標圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          基于直角坐標系的徑向變形(相當于把直角坐標卷起來)。適用于顯示三個或更多的維度的變量對比或者部分與整體的趨勢。

          關系圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可以展示數據的占比情況,還能厘清多級數據之間的關系。 通常用于可視化大量元素之間的復雜關系。

          樹圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          樹圖是一種流行的利用包含關系表達層次化數據的可視化方法,是研究多元目標問題的一般工具。 適合展示數據之間的層級關系,適合 6 條以上數據。

          ?;鶊D

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          一種特定類型的流程圖,用于描述一組值到另一組值的流向,圖中延伸的分支的寬度對應數據流量的大小。用以展示數據的層級關系。常用于可視化能源或成本轉移,也幫助我們確定各部分流量在總體中的大概占比情況。

          漏斗圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          一種直觀表現業務流程中轉化情況的分析工具,總是開始于一個 100%的數量,結束于一個較小的數量。通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節,進而做出決策。 適用于業務流程比較規范、周期長、環節多的流程分析,比如流程流量分析、轉化率分析。

          熱力圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          將數值大小通過色塊有序且緊湊地在坐標系中呈現。 適合呈現多組數據連續的數值分布,適合做數據的預測統計,可以在圖片上直接展示熱度。例如展示城市在不同時間段打車熱度情況。

          其他圖表

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          詞云圖適用于對比大量文本或繪制特定形狀的詞云。水球圖適用于多個百分百數據呈現。子彈圖用于表達多項同類數據的對比,可以表達一項數據與不同目標的校對結果。 維諾圖適用于層級數據比較大小,同時能看到各層級之間的情況。金字塔圖適合展示分類的占比情況,不適合展示分類過多或者差別不明顯的場景。

          5. 字體

          文字是可視化展示中最重要的構成要素之一,可視化大屏設計中字體的運用其實原理跟網頁 app 的邏輯基本一致。在字體選擇上會基于業務需求選擇對應的字體,與設計風格相結合。這里要注意的是字體有無襯線、字重、字距等。

          大屏設計中,中文字體一般會采用瀏覽器默認字體(微軟雅黑、思源黑體、蘋方等)頁面中標題會采用特殊字體處理,常用的字體有:優設標題黑、時尚中黑簡體、方正正中黑體等。英文數字字體推薦:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。


          6. 規范

          建立規范的主要目的是:保證設計的一致性、提高開發效率和還原度、方便迭代 ,輔助設計和開發更好地完成設計的協作。

          可視化設計中規范一般會分為:色彩、文字、圖表、標題控件等,跟網頁端規范同理,這里就不一一贅述了。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          7. 動效

          數據可視化大屏設計少不了動效,動效是可視化重要的組成部分,動效能增加觀感體驗,凸顯關鍵產品內容、強調功能信息關聯,幫助用戶理解產品、情感化互動。但過分的動效極其容易喧賓奪主,影響用戶閱讀,反而弱化了數據的展示。

          動效的設計原則

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          動效應優先滿足核心內容、故事線。常見的大屏動效 – 展示類,用于突出產品核心功能和特點。界面信息按照一定的規律呈現,引導用戶的視覺流向。

          好的大屏設計應該是數據展示模塊最好動效不宜過多,要有一定的主次關系變化,例如一個動畫表現的視覺強,另一個就表現稍弱化,有強有弱、有主有次節奏才會舒服,同時動效要結合數據變化,考慮極端情況的展示效果,最終輸出一套完整的動效方案。


          結語


          以上通過布局、風格、主視覺、信息圖表、字體、規范、動效等 7 個方向總結的基本知識和事項,能幫助我們快速進入大屏設計及避免一些坑。由于篇幅原因字體、規范、動效沒有詳細拆解說明,后面會陸續更新相關文章,感謝大家支持??梢暬w驗遠遠不止這些。歡迎大家提出更多意見和建議,我們一起前行。

          作者:Mr.小六

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇













          大數據可視化界面設計之四:可視化大屏設計快速入門指南,看這篇就夠了!

          博博


          前言


          隨著大數據產業的蓬勃發展,很多企業都開始應用數據可視化。智慧城市、智慧交通、智慧醫療等等越來越多的行業都有了可視化的需求,可視化行業也迎來了迅速發展的成長期。

          可視化大屏設計快速入門指南,看這篇就夠了!


          數據可視化釋義


          數據可視化就是把一些相對復雜、抽象的、我們看不懂的數據通過“可視化”的方式,運用圖形化的手段清晰有效地將數據信息進行解讀和傳達,幫助我們發現其中的規律和特征,挖掘數據背后的價值。


          可視化大屏


          可視化大屏
          是以大屏為主要展示載體的數據可視化設計。它的應用場景非廣泛如 ToC、ToB、ToG 等都會存在。一般應用在會議展廳、園區管理、城市交通調度中心、公安指揮中心、企業生產監控等重要場所。

          可視化用戶群體相對比較明確,主要是單位領導及一些一線人員。通過交互式實時數據監測,洞悉運營增長,助力智能高效決策。

          可視化大屏設計快速入門指南,看這篇就夠了!

          伴隨行業的發展,行業內也對可視化進行了一些行業細分。常見的一些類別:行業可視化(如交通、醫療、金融、軍警部隊、農業、工廠、化工等)、智能終端系統類(定制化終端產品)、演示 demo(數據演示、展覽展示、數據看板 )、可視化分析系統(通過對數據的分析監控輔助決策,如交通預警平臺、天氣監控平臺等)。


          市場現狀


          平臺化

          由于近幾年可視化的需求越來越大,一般的公司都會有一些可視化的需求,各大廠商也逐漸整合可視化資源,實現平臺化、低代碼化。滿足了大多數公司的可視化需求。國內比較知名的可視化廠商:光啟元(Ray design)、Data V、優諾科技(森工廠)、袋鼠云(Easy V)、數字冰雹、圖撲、等等。他們將一些可視化效果組件化集成在平臺,拖拖拽拽就能實現一些不錯的效果,滿足了一些公司的展示需求。

          可視化大屏設計快速入門指南,看這篇就夠了!

          實現方式

          目前可視化框架是大多數都是基于 Web 端的(基于 web 開發或者 web 封裝)而非 PC 端。常見的可視化實現方式是二維加三維相結合,比如大屏兩側的可視化圖表可以用 Echarts 這種第三方的輕量化圖表控件或者 Vue 去實現。

          主視覺部分會基于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具去實現。滿足三維炫酷的效果需求。使整個可視化大屏效果有了質的提升。這些三維工具的優勢是三維粒子效果能很好的支持,且效果非常炫酷。多平臺支持,可通過 webgl 封裝在瀏覽器里打開使用。缺點就是維護成本較高,需要相關的專業人員去開發維護,有一定的使用門檻。一般公司如果不是專門做可視化相關業務不會配備相關專業人員。

          可視化大屏設計快速入門指南,看這篇就夠了!

          說下幾種工具的優缺點:

          Ventuz 國內用的相對較少,相關專業人員也較少。虛幻引擎效果上是比較好的,但是對 WebGL 參數支持的較少。Threejs 雖然支持三維但是沒有 Unity 那么強大的編輯器,一些復雜的效果實現不了。相對于前者 Unity 來說成熟一些,也是目前市場上用的比較多的,不過 three 對于前端開發同學更友好一些,容易上手,學習成本相對低一些。


          可視化設計師應了解的知識


          可視化設計是相對新興的行業,就目前市場來看也是當今比較火的行業。作為一名設計師,不僅僅是只做完效果圖就能行的,他是一個結合硬件設備、UI 設計、三維建模、三維渲染、動態設計、數據可視化、圖形技術、GIS 數據、渲染引擎、交互技術等等綜合類的交叉學科。

          可視化大屏設計快速入門指南,看這篇就夠了!

          1. 硬件設備

          硬件設備信息是做大屏一切的開始,我們首先要了解它的尺寸、比例、屏幕種類(拼接屏、LED 屏)投影方式等等 一系列的信息,方便后續的設計工作。

          可視化大屏設計快速入門指南,看這篇就夠了!

          上圖為一些常見的屏幕拼接方式,確認好屏幕的拼接方式就可以計算出整個大屏的物理分辨率。舉個例子:上圖中最后一個的拼接方式為橫向3塊屏,豎向2塊屏幕。他們每塊的屏幕分辨率為寬1920px 高1080px,那么這塊2×3的拼接屏幕的尺寸就應該是:寬度 1920乘以3(橫向3塊屏)高度1080乘以2(豎向2塊屏)得出整個屏幕的物理分辨率為:5760×2160。

          可視化大屏設計快速入門指南,看這篇就夠了!

          物理分辨率 VS 輸出分辨率

          可視化大屏設計快速入門指南,看這篇就夠了!

          大屏的投射方式大致分為三種:1、電腦屏幕 1 比 1 等比例投屏。2、通過主機直接輸出給拼接屏(這種大多都是一些自定義比例屏幕和分辨率超大的情況會應用到)。3、投影儀投射。

          一般大屏的物理屏幕分辨率大小都有不同,有的是極大的,幾萬像素,如果我們按照物理分辨率來去做設計的話會很卡,所以這里設計尺寸建議按照輸出分辨率設計。輸出分辨率會受到硬件的限制(超大情況下需等比縮放),我們一般會采用輸出分辨率作為最終的設計尺寸。針對硬件設備設計時要關注以下幾點:屏幕拼接方式、單屏幕像素及拼接后像素、輸出像素等這些決定了設計尺寸、內容排布、拼接縫的規避等問題。

          2. GIS 數據

          通常應用于參數化建模,之前寫的 0-1 帶你制作智慧城市地圖(二)就屬于參數化建模的一種,主要是通過一些地理位置高程數據進行模型的生成。屬于智慧城市可視化設計的基礎設施。

          常見的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于貼圖處理)。

          一些常用的工具:Qgis、Arcgis、Google mapper

          3. 三維建模

          在可視化設計中,一般我們會結合生成參數化模型加定制化手工模型的方式處理整體效果。這么處理的目的:一是設計上能突出主體,增加畫面的層次感。二是在性能上能很好地優化,提高整體性能。

          下圖為設計側到開發側對接流程:

          可視化大屏設計快速入門指南,看這篇就夠了!

          4. 動效設計

          常見的一些動效對接格式:GIF、MP4、APNG、Lottie、序列幀。


          可視化大屏設計快速入門指南,看這篇就夠了!

          5. 圖形技術

          了解圖形成像原理,是由一個個的粒子點生成的畫面。

          可視化大屏設計快速入門指南,看這篇就夠了!

          下圖是由一個 50×100 的粒子組成的平面,每個粒子都會對應他的 xy 軸的坐標位置,我們通過控制的粒子透明度、大小、顏色、位置、旋轉等參數呈現不同的視覺效果。

          可視化大屏設計快速入門指南,看這篇就夠了!

          世界地圖的是通過一個一個粒子成像形成的畫面,其中黑色=0、白色=1。比如粒子大小是 1,它對應的位置是黑色,黑色是 0,1×0 就=0 顯示為黑色。

          可視化大屏設計快速入門指南,看這篇就夠了!

          我們常做的粒子世界地圖就是通過控制粒子黑白 x 粒子大小疊加出來的。

          可視化大屏設計快速入門指南,看這篇就夠了!

          比如我們做粒子地球的時候是通過一張貼圖來去控制黑白度,海洋是黑色所以就不顯示粒子,陸地為白色顯示為白色粒子,最終呈現了一個粒子地球的效果。

          可視化大屏設計快速入門指南,看這篇就夠了!

          6. 渲染引擎的技術架構

          前面實現方式里講到市面上可視化落地基本都是基于于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具實現的。

          它們的底層是由 BS(Browser-Server)架構和 CS(Client-Server)架構兩大架構組成的。

          BS 架構與 CS 架構特點

          • BS:(Browser-Server,)瀏覽器/服務器模式,web 應用可以實現跨平臺,客戶端零維護,但是個性化能力低,響應速度較慢。
          • WebGL 就屬于 BS 架構的一種。優點就是使用便捷、數據實時更新、跨平臺。缺點是渲染效果較差,大場景支持差。
          • CS:(Client Server,客戶端/服務器模式),桌面級應用響應速度快,安全性強,個性化能力強,響應數據較快。
          • Unreal Engine、Unity3D、Ventuz 屬于 CS 框架。優勢就是整體渲染視覺效果棒,大場景支持好,缺點是必須安裝客戶端、電腦性能要求高、不同平臺需要不同文件。


          最后


          本期給主要是給大家普及可視化設計的一些流程以及相關的專業知識,歡迎后臺添加小六微信溝通交流。

          作者:Mr.小六

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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








          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇




          交互設計七大原則之——費茨定律

          博博

          通過改變目標的大小和到目標的距離來改變操作時間,幫助設計按鈕等的交互.證明了獲取目標的時間和目標的大小、距離的相關性。

          什么是菲茲定律?

          菲茲定律由心理學家Paul Fitt于1954年提出,它是物理世界中人體運動的數學模型。這一定律提出之后,在很多領域都得到了應用,但是在人機交互領域的影響尤為深遠,可以說是人機交互領域的第一條定律,它通常被用來解釋鼠標(PC端)和手勢(移動端)在界面中的移動規律。這項定律尤其適合按鈕等可點擊、可選擇、可交互的元素,目的:易于查找和選擇。作為一個數學模型,菲茲定律是有表達式的,表達式如下:

          T 是完成動作的時間a代表裝置開始結束的時間,b表示該裝置的速度,這些常數可從實測數據進行直線近似取得。D是起始位置到目標中心的距離。w是目標區域在運動維上的寬度。


          結論: 離目標距離越近,所需的時間越短;目標尺寸越大,完成速度越快,時間就越短。也就是說,預測點擊一個目標的時間,取決于目標和當前位置的距離+目標的大小。



          如何將菲茲定律應用在交互設計上?

          1 、放大可點擊元素的尺寸

          大且近的目標元素讓用戶不需要做太精細的調整就可以輕易選中。小而遠的按鈕則意味著用戶要將鼠標/手指移動比較長的一段距離,并且再進行精細的調整才能選中,這樣不僅難以點擊、且需要花費更多的時間。

          這里的大指按鈕的實際大小、也就是點擊熱區的大小,包含按鈕留白區域的大小。網頁設計里現在常見的設計方式就是大按鈕,四周大量留白; 而移動端設計里通常會擴展寬度,使用各種通欄按鈕,使用戶操作更加容易和快捷,可點擊圖標也會放大可點擊區域。


          注意: 并不能無限的放大。大小給可用性帶來的加成是有限制的,如果把一個很小的按鈕放大,它會變得更易于點擊;但是如果按鈕尺寸已經足夠大,那么再放大尺寸,也并不會提高可用性和用戶操作效率。


          2、 減少移動的距離

          依據菲茨定律所言,距離目標越近,用戶點擊越快。所以我們通常會縮短當前交互元素和目標元素的距離,來提高用戶的使用效率和交互體驗。

          1>減少絕對距離

          因為移動端用戶通常為單手操作,也就是大拇指為主要操作工具,在現在大屏手機泛濫的情況下,屏幕很多地方是單手無法觸及的,所以現在我們通常會把按鈕和常用操作元素放在頁面下方的易操作區域。

          2>減少相對距離

          在兩個或多個操作中,通過縮短可交互元素之間的距離來提高用戶的使用效率。比如確認刪除操作,因為它是重要的負向操作,所以對于雙重確認,相比于在當前列表區域確認刪除(如下圖微信),如果使用彈框,那么用戶手勢的移動距離相對會更長(如下圖淘寶)


          p:對于微信來說,刪除對話是用戶比較常執行的操作,因此便利性應該更高;而淘寶更想阻止用戶進行此操作。 也就是說并不是所有操作都需要縮短距離。


          3 、相關元素靠近

          相關的內容或者交互元素要彼此靠近,可以在視覺上增強他們之間的相關性認知


          4 、屏幕的邊緣和角落無限大

          因為屏幕的邊角有一個隱形的“結界”,可以阻止用戶鼠標因為大幅移動而超出目標區域范圍,因此用戶可以直接將鼠標大幅度移動到屏幕的邊緣、角落,而不用進一步微調。 所以屏幕的邊角適合放置菜單欄、按鈕這樣的元素,不管箭頭移動多遠,最終會停在屏幕的邊緣并定位到菜單上。 比如chrome瀏覽器它把TAB欄放在了屏幕最頂部邊界,用戶使用效率比較高。




          其他補充:


          1、餅狀菜單會比線型菜單更易選擇,而且錯誤率更低,這里面有兩個原因:

          • 餅狀菜單的每個菜單項和菜單中心的距離都一致

          • 餅狀菜單的每個菜單項的楔形目標區域都非常大,一般都會擴展到屏幕的邊緣


          2、 目標點的位置實際上是邊緣的一些像素加上邊緣之外的全部面積。所以,這樣看來目標點就足夠大了。原因是基于fitts定律,它的一個分母的增大了而使得界面的效率提高了




          總結:

          1、我們想要更容易點擊到控件,就應該放在屏幕的邊緣或角落里。讓常用的控件更大,更容易辨別;

          2、使用屏幕的邊緣和角落讓控件有效擴大,永遠不要把控件放在離屏幕邊緣或角落一個像素遠的地方;

          3、邊緣之外的地方,也可以算作目標點的面積,這樣一來,目標的面積就被無限的放大了,也更方便用戶操作。


          補充一張雅虎ued繪制的關于Fitts’ Law的Q版小漫畫,先初步了解下:


          作者:GIGI小王子

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          設計總是憑感覺?那是你不了解這些交互設計原則

          博博

          設計總是憑感覺?你有這樣的困惑么


          本文主要聊一下產品中使用的幾個交互設計原則,一致性,費茨定律,容錯性,??硕?。



          一致性


          我們在做設計時,經常會講到要保持一致。一致性的好處從外部來說,可以極大的提升產品的易用性,降低用戶的學習成本,同時也有利于品牌形象的傳達。從內部來說,將一些相同或類似的功能進行復用,提高團隊的協作效率,讓資源得到更充分的利用。


          那么設計師該如何做到一致性呢?

          一致性體現在產品中可以體現在很多方面,比如是視覺風格統一,交互操作統一。視覺上可以是配色、字體、圖標、頁面布局、插畫,以及在不同終端上的統一。交互操作可以是相同相似功能在不同頁面的呼出方式,一些地方動畫的表現形式。

          另外,產品與本身所處的行業內的競品的一致性,比如音樂播放頁面,用戶已經習慣了上面是歌曲宣傳圖,下面是播放切換的控件,各個產品的排版布局都是相似的,這樣的統一可以讓用戶沒有陌生感,在接觸一個新的音樂類產品時很快的上手。

           

          滴答清單的網頁端、桌面版、網頁插件,將頁面的主要功能信息都放在了左邊,中間部分是清單列表,最右側是清單詳情,配色都是用了灰色、白色、淺藍色,圖標風格上使用的面型風格,這三個終端的視覺風格是保持了高度的一致,傳遞給用戶的也是很強的品牌理念。

           

           

          阿里云盤,App啟動頁和網頁功能介紹,都是使用了C4D插畫,來保證兩個終端品牌風格的一致性。

           

           


          微博App的詳情頁及他人主頁,這兩個頁面的評論功能都使用了相同的底部彈出框的控件樣式,用戶可以在不用思考的情況下直接操作,這是利用了相同功能在不同頁面復用了相同的交互控件。

           

           

           

          費茨定律


          簡單點來說,有兩個關鍵因素,兩個操作目標的距離、操作目標大小。第一個因素意思就是在當前產品中兩步操作,手指移動的距離越短,操作就越容易。第二個因素是當前操作目標越大,操作越容易。

           

          石墨文檔App。在頁面右下角有一個懸浮的新建按鈕,點擊后從底部彈出活動視圖,用戶可以進行新建文檔、表格等操作。這里使用從底部彈出活動視圖,而不是在新頁面或者頁面中間,正是利用了費茨定律,縮短了兩步操作之間手指移動的距離,降低操作難度。

           

           

           

          滴滴出行、如祺出行

          滴滴出行打車頁面,App首先會自動定位你當前所在位置為出發位置,目的地一欄顯示文案「輸入目的地」。設計師將輸入框設計的很大,文案字體也很大,在當前頁面中非常醒目,極大的方便了用戶的操作。這就是應用了費茨定律的第二個因素,當前操作目標越大,操作也就越容易。

          反觀如祺出行的打車頁面,出發地一欄和目的地一欄的尺寸是一樣大的,都是使用圖標+文字樣式,出發地一欄使用深灰色的圖標、深灰色的字體,而目的地一欄圖標雖然使用了橙色主題色,但是文字的顏色是淺灰色,字號也沒有放大,非常不顯眼。要知道用戶當前的迫切需求是輸入目的地,這樣設計無疑是增加了用戶操作的難度。

           

           

           

           

          容錯性


          平時在操作產品界面時,經常會因為一些原因造成操作錯誤,而有些錯誤造成的損失是無法挽回的。那么設計師應該怎么避免用戶操作中犯錯呢?容錯性原則可以很好的解決這個問題。容錯性定義是:


          “容錯性是產品對錯誤操作的承載性能,即一個產品操作時出現錯誤的概率和錯誤出現后得到解決的概率和效率。容錯性最初應用于計算機領域,它的存在能保證系統在故障存在的情況下不失效,仍然正常工作。產品容錯性設計能使產品與人的交流或人與人借助產品的交流更加流暢。”

          拆解一下,影響「操作時出現錯誤的概率」的因素有,操作前的引導提醒以及操作時的提示。影響「錯誤出現后得到解決的概率和效率」的因素有,操作后的解決方案

           

          微信的修改微信號功能,不同于修改昵稱直接進入編輯頁面,微信在中間增加了一個頁面,頁面內容顯示當前的微信號及提示文字,目的是提醒用戶要慎重,避免有些用戶修改了微信號之后后悔。這里是用到了容錯性的操作前的引導提醒,降低了出現錯誤的概率。

           

           

          QQ注冊頁面,用戶輸入昵稱后,系統會檢測昵稱是否可用,及時給出給出提示。輸入密碼時會自動出現密碼設置的提示,及時提醒密碼都有哪些規則,避免用戶輸入不符合要求的密碼。操作中給出這些相應的提示,可以使用戶更加流暢的完成注冊流程。

           

           

           

          印象筆記網頁版。將一篇筆記刪除后,頁面頂部會出現一個提示框,文案是「已將XX文章移至廢紙簍」,提示框2、3秒之后自動消失。如果剛好這篇筆記是不小心誤刪的,這里的提示框給予了用戶反悔的機會,幫助用戶及時的找回筆記,彌補錯誤。

           

           

           

           

          ??硕?/span>


          希克定律,又叫是??艘缓B桑℉ick Hymalrs 1aw),是一種心理物理學定律。應用在產品設計當中,就是當頁面中需要有不同選項時,要盡可能的少而簡單,降低用戶的決策成本。

           

          美團外賣頁面的金剛區,共有三行應用。核心推薦的5個應用是放在第一排,其他10個應用排成兩排,核心推薦應用與其他應用在圖標風格上使用了區別化設計,用戶在進行選擇時變成了5選1,而不是15選1。這是設計師在功能設計時針對應用做出了重要程度的區分,以幫助用戶更快做出選擇。


          作者:不吃橙子D

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          在交互設計中,作為設計師應遵循的7大定律-上

          博博

          在設計中尋找真理,探索每一個設計背后的意義。



          除非有更好的選擇,否則就遵從標準  —— 阿蘭庫珀



          費茨定律:

          距離:起始位置離目標位置越遠,我們到達目標位置所花費的時間就越長,反之亦然。

          目標大?。耗繕嗣娣e越大,我們定位到目標位置所花費的時間就越短,反之,目標越小,定位時間越長。


          ·生活中的費茨定律

          剎車和油門踏板相距很近,剎車時的物理面積比油門的物理面積大,會最快接觸到踏板,減少事故的發生。




          ·界面中的費茨定律

          (1)距離目標位置盡量縮短,相關操作保持親密性

          例如:抖音的視頻播放界面,系統會判斷用戶進行觸發時手指與屏幕的接觸位置,并將操作按鈕顯示在離用戶手指最近的位置。


                                                  


          (2)目標尺寸大小要合適

          目標點擊熱區在合適的范圍內,越大越容易精準點擊,越小越容易誤操作。iOS交互指南中規定最小點擊熱區為44*44。

          (3)拇指原則

          人們在使用手機時,75%的交互操作都是由拇指驅動的,考慮到費茨定律,如果目標位置超出拇指的移動范圍,操作成本增加。



          米勒定律:

          是交互設計中常用的一個定律,美國心理學家對人的記憶能力進行定量研究,他發現人的短時記憶能力廣度為7±2個信息塊,超過這個范圍就容易出錯,在7+2與7-2之間浮動。


          ·生活中的米勒定律

          電話號碼,銀行卡號,身份證號碼進行數字分隔,降低記憶成本,提高信息的易讀性,視覺防錯。




          ·界面中的米勒定律

          (1)分段記憶,信息分層

          文章、文本中的字號、字間距,目的就是便于讀者記憶和提高易讀性

          (2)導航和選項卡不超過9個

          網頁設計的一級導航不要超過9個,如果導航和選項卡內容過多,可通過聚合按鈕來包容其他次要入口。(用戶使用導航就是要快速找到自己想要的內容,如不能快速查找,用戶可能會就此流失掉)

          (3)系列位置效應

          首因效應:相對中間位置,我們對最前面的物體記憶清晰。

          新近效應:相對中間位置,對序列末尾物體記憶更清晰。




          席克定律:

          是一種心理物理學定律,用戶所面臨的選擇數量越多,花費時間越長,人機交互界面選項越多,用戶決策時間越長。


          ·生活中的席克定律

          遙控器按鈕越少,越快做出操作;如交互設計四策略:刪除、組合、隱藏、轉移。功能層級也需要細分核心功能、輔助功能、邊緣功能。而核心功能是進入產品第一個發現的功能,操作頻率高,所以它的視覺應是最突出的,可以幫助用戶增強感知和節約選擇時間。


                


          ·界面中的席克定律

          (1)減少選項并提供默認值

          選項越多,用戶決策的時間越長,減少用戶思考的時間就是減少操作時間和學習成本,讓用戶不思考就做出正確的選擇,對于小模塊來說,一般選項不超過9個,9個以上可以用交互約束用戶的行為,如展開收縮。


          (2)選項分類分層,信息區分主次

          在菜單欄的設計過程中,我們會進行同類分組和多級分層的設計,效率會更高。重點信息、推薦信息和普通信息要在時間上做區分,這樣才能搶占視覺并在第一時間感知到。

          (3)分步完成,分布顯示

          分解復雜流程,讓用戶一步步操作,而不是全部堆到用戶面前,通過分步完成一個任務流,降低其他信息給用戶帶來的干擾。例如:用戶填寫表單時,可展示選項,當填完最后一項選“其他”時,再展開剩余的表單,目的上是為了減輕大量表單,給用戶感知上帶來的壓力,達到場景細分的目的。


          接近法則:

          接近法則也是格式塔理論中我們最熟悉的,最常用的一種法則。觀察者看到彼此臨近的物體時,會將它們視為一體。


          ·生活中的接近法則

          小區規劃圖中,會通過較寬的過道,綠植圍欄來劃分他們之間的關系,從而增強人們的感知。



          ·界面中的接近法則

          界面中的接近原則是對相似的信息及功能類別進行分組、布局。作用是直接影響到用戶與產品的視覺交流,引導用戶的瀏覽及操作行為。

          常見的在列表頁面,通過色塊區分大組與大組,分割線區分小組與小組,目的都是在視覺上通過組與組的區分來劃分功能與功能之間的關聯性。



          以上這四條是我們在平常工作時都會用到的,我們再進行一個界面的設計時應該對照下以上幾條定律,在與產品或開發battle時也能有理有據,告訴他我們「為什么這樣設計」。寫的手有些痛,剩下的4條定律下期我再繼續補充,下期見~


          作者:瞧見貓

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          八大交互設計原則幫你避免出現基礎錯誤

          博博

          八大交互設計原則幫你避免出現基礎錯誤


          八個交互設計原則幫你避免出現基礎錯誤


          一致性:一致性能給用戶節約成本、元素風格統一和延續性、產品內部結構的一致性


          d02058fd5d48a8012160f70f1ec9.jpg





          反饋:操作成功或失敗都有明確的反饋、告訴用戶此刻的狀態是什么會有什么結果


          25a158fd5d6da8012160f7f8444b.jpg




          方便使用: 減法設計(扁平的框架設計—減少不必要的操作步驟,每個流程清晰沒有太多分支)

          881358fd5da8a8012160f755522b.jpg




          重點功能隨手可用 多選擇少輸入






          預防出錯/防錯原則: 操作給予提示


          b8ab58fd5ebfa8012160f77f33f6.jpg




          幫助用戶認識改正錯誤:如果出錯要幫助用戶從錯誤中恢復過來


          085f58fd5ed5a8012160f7506532.jpg




          高識別性:(復雜的交互要給與引導和幫助)


          903558fd5ef0a8012160f79cf40e.jpg




          用戶自由控制權:用戶可以取消正在執行的操作 每個層級都能找到上一級的方法


          465e58fd5f04a8012160f7a13a98.jpg



          符合用戶的操作習慣


          作者:why夏天的風

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          日歷

          鏈接

          個人資料

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

          存檔

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