《工業(yè)可視化》課件 任務1.1 創(chuàng)建可視化項目 -任務實施

項目一：工業(yè)企業(yè)信息的可視化設計任務1.1創(chuàng)建可視化項目>>※任務實施《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程湖南三一工業(yè)職業(yè)技術學院《工業(yè)可視化》/工業(yè)互聯(lián)網(wǎng)系列課程目錄1.頁面規(guī)劃2.登錄平臺3.準備素材4.創(chuàng)建項目5.設計布局1.頁面規(guī)劃（1）

任務分析

在項目背景中，甲方公司需要展示的企業(yè)信息內容包括：公司簡介、介紹視頻、公司產品圖片、研發(fā)實力、辦公大樓、當前日期和時間等。相關內容展示需要用的組件如下：展示內容條目名稱使用組件數(shù)據(jù)源備注公司介紹公司簡介文本組件無客戶提供文字宣傳視頻視頻組件無客戶提供視頻公司產品圖片輪播組件無客戶提供圖片公司實力研發(fā)實力圖片組件無客戶提供圖片集團大樓圖片組件無客戶提供圖片其他當前日期和時間文本組件系統(tǒng)時間日期無任務分析1.頁面規(guī)劃

在進行頁面設計之前，先規(guī)劃草圖，將需要展示的內容在頁面上完成布局。公司簡介（文本組件）宣傳視頻（視頻組件）公司名稱（文本組件）集團大樓（圖片組件）當前日期和時間（文本組件）研發(fā)實力（圖片組件）公司產品（圖片輪播組件）規(guī)劃頁面草圖2.登錄平臺登錄云視界（1）打開可視化設計平臺——云視界的地址，并輸入注冊的手機號和密碼。云視界的登錄的地址為：/view/login。2.登錄平臺登錄云視界（2）登錄云視界后，可以單擊“幫助文檔”或“幫助視頻”的標簽可以進入云視界用戶手冊頁面，里面有對云視界使用的詳細說明。3.準備素材云視界有系統(tǒng)自帶的素材，截止版本號為4.6.18的系統(tǒng)素材中，預置了設備、圖標、裝飾、背景4大分類設計素材，用戶可以直接使用。如果用戶擅長設計，也可以根據(jù)設計需求制作素材上傳云視界使用，文件格式支持jpg，png，gif，svg，mp4，mp3，mpeg，webp等，文件大小限制100MB以內。

（1）在云視界的左邊導航欄，選擇“資源庫”下的“素材庫”標簽，進入素材庫頁面。

3.準備素材新建文件夾（2）切換到“我的素材庫”標簽，單擊“新建文件夾”，在彈出來的對話框中，輸入文件夾名稱（可自定義），最后單擊“確認”按鈕。文件夾下還可以創(chuàng)建子文件夾“項目1素材”。3.準備素材上傳素材（3）單擊創(chuàng)建好的素材文件夾，如圖1-1-12所示。進入文件夾后，單擊“上傳文件”，找到素材存放的位置，選擇并單擊“打開”按鈕，即可完成素材上傳。4.創(chuàng)建項目

（1）在云視界首頁，創(chuàng)建項目有兩種方式：第一種，以空白模板創(chuàng)建新的項目。操作步驟如下：單擊“創(chuàng)建項目”標簽，在彈框中輸入自定義項目名稱，選擇所需的模板，最后單擊“創(chuàng)建”按鈕完成創(chuàng)建項目。4.創(chuàng)建項目

（1）在云視界首頁，創(chuàng)建項目有兩種方式：第二種，通過導入項目ID創(chuàng)建新的項目。操作步驟如下：單擊“創(chuàng)建項目”，在彈窗中單擊“導入項目ID”，在新彈窗中輸入項目ID、授權碼、項目名稱，單擊“導入”按鈕。這種方式相當于復制已有的其他項目。說明：本書示例輸入的項目ID數(shù)值不是固定的，是根據(jù)實際需要復制的項目的ID而定，項目的授權碼默認為“123456”。4.創(chuàng)建項目創(chuàng)建項目（2）創(chuàng)建項目完成后，頁面自動跳轉到可視化編輯頁面，在編輯區(qū)可以通過拖動下方的比例圖標來調節(jié)頁面在編輯區(qū)的顯示比例。4.創(chuàng)建項目修改頁面名稱（3）修改頁面名稱。先單擊頁面切換圖標，出現(xiàn)的彈框中，單擊修改圖標，把頁面名稱改為“集團信息展示”（注：名稱可自定義，但是建議按照一定的規(guī)范進行修改，便于其他工程師運維），單擊“確定”按鈕完成修改，操作順序如下。說明：建議用戶在頁面編輯過程中，應及時手動保存頁面設計。5.設計布局頁面尺寸設計1）根據(jù)展示大屏的大小設置可視化項目的頁面尺寸，本任務使用的尺寸為默認的1980px*1080px5.設計布局設置頁面背景2）在可視化編輯器的頂部導航欄，單擊選擇“素材庫”圖標，選擇本書配套的任務1.1中的“背景圖”素材，拖拽到右側屬性欄下的“選擇圖片”框中，如圖所示。本步驟也可以選擇系統(tǒng)素材庫中的“背景”文件下合適的圖片作為頁面背景。5.設計布局使用容器布局3）完成背景設置之后，在頁面用容器進行布局。首先單擊頂部導航欄的“基本組件”按鈕，單擊“容器”圖標，頁面上會出現(xiàn)容器的圖框，可以通過拖拽容器邊框的方式來調整容器大小，如圖所示。5.設計布局使用容器布局4）選中容器，打開容器的“鎖定縱橫比”；在素材庫中找到合適的圖片，本示例中使用的本書配套資源“任務1.1”文件夾下的“標題”圖片；將選中的圖片拖拽到容器屬性的“背景圖片”框中；如圖所示。5.設計布局使用容器布局5）重復前“3）至4）”這2個步驟的操作，添加其他容器并更改容器背景，完成整個頁面的布局設置，如圖所示。本示例新增容器使用的容器背景均是本書配套的“任務1.1”文件夾下的“裝飾框”圖片，也可以自定義使用系統(tǒng)素材中的“裝飾→邊框”文件下合適的邊框圖片。5.設計布局說明容器在手機端的顯示順序是按照圖層中的容器順序來定，因此可以在圖層中選中某個容器，通過調整其排列順序來調整