一、前言

試著回想最近一次與公司網(wǎng)站交互的情況，訪問了多個頁面，并且可能使用了某些功能。有可能基于這種互動，可以向某人介紹公司的一些主要功能。其中一些可能是更膚淺的東西，比如他們的標志是什么樣子或他們的主要配色方案是什么，但你很可能也能回憶起更深層次的東西。您認為該網(wǎng)站是用于商業(yè)用途還是休閑用途？你認為公司想要平易近人，還是想要排外？他們是否努力被視為可靠或創(chuàng)新？無論您的答案是什么，這些印象很可能在所有頁面和功能中都是一致的。所以UI是一個非常大的話題，簡單的UI可能幾天就能搞定，復(fù)雜的可能需要花幾個月的時間。

就品牌而言，讓您的用戶或客戶知道會發(fā)生什么非常重要。這就是讓他們相信某家公司會提供他們需要的東西的原因。一種方法是確保公司的所有（數(shù)字）產(chǎn)品具有相同的外觀和感覺。這就是設(shè)計系統(tǒng)的用武之地。設(shè)計系統(tǒng)不是一個單一的具體事物，而是在為特定公司設(shè)計或開發(fā)某些東西時要牢記的重要元素的集合。這些元素可以包括但不限于：

• 風格指南
• 模式庫
• 公司價值觀和理念
• 文檔指南
• 可重復(fù)使用的組件
• 相關(guān)工具

大多數(shù)時候，設(shè)計系統(tǒng)與公司一起成長。隨著公司身份越來越清晰，可以添加、更新或指定新事物。建立設(shè)計系統(tǒng)將確保人們在為公司設(shè)計或開發(fā)時可以參考單一的事實。這樣，即使有很多人在開發(fā)同一產(chǎn)品，您也可以實現(xiàn)一致性。

設(shè)計系統(tǒng)的另一個好處是它可以節(jié)省大量時間和精力：風格指南的存在可以讓人們專注于解決問題，而不是解決方案應(yīng)該是什么樣子。同樣，可重用的組件將允許人們快速將事物組合在一起并專注于任何復(fù)雜或獨特的事物?？偠灾?，投資建立設(shè)計系統(tǒng)是非常有益的。

正如上面所提到的，在設(shè)計系統(tǒng)中包含的內(nèi)容之一是風格指南。這可能是設(shè)計系統(tǒng)中最常見的元素之一，因此更好地了解它們是什么很有用。風格指南是一份文件，它從圖形和語言的角度指定了品牌應(yīng)該如何表現(xiàn)的指導方針。

風格指南的圖形部分涵蓋了品牌標識的所有視覺指南。它可以涵蓋：

• 徽標的不同版本以及何時使用
• 企業(yè)調(diào)色板
• 印刷細節(jié)（例如字體系列、大小、間距等）
• 圖標
• 頁面布局
• 圖表

接下來會分享一些大家最常用的模塊：切換頁面布局，container和layout Grid的使用

二、簡單頁面布局更改

當右鍵頁面的上方，選擇properties會彈出如下界面。在Layout這里可以選擇界面，最常用的是選擇Alta_topbar其他界面 那么導航欄將會在從豎著顯示改為橫著顯示，比如第二個圖。 當公司會有統(tǒng)一的layout，導入layout后也是在這里進行選擇，比如西門子風格的，SAP風格的。

還有一個選項比較重要，layout type.這個選項決定了這個頁面是自適應(yīng)頁面，還是專門給phone或者平板使用，或者是彈窗頁面。

最后當我們用高版本升級舊版本的項目的時候或者導入新模塊的時候會報錯，很多就是關(guān)于layout的報錯，那么只需要在這里選擇適合的layout就可以解決報錯。

三、Layout Grid

1 簡介

布局網(wǎng)格是一個為頁面提供結(jié)構(gòu)的小部件。

布局網(wǎng)格由行和列組成：

在瀏覽器中，布局網(wǎng)格基于 Bootstrap 網(wǎng)格系統(tǒng)。

2 屬性面板

屬性窗格通過窗格頂部的切換按鈕分為兩個主要部分：屬性和樣式。布局網(wǎng)格屬性由以下部分組成：

特性和造型

3 屬性

3.1 一般部分

3.1.1 寬度

General部分包含Width屬性，它決定了布局網(wǎng)格的寬度。

由于布局網(wǎng)格響應(yīng)視口寬度，而不是其容器的寬度，因此只能在頂層使用固定寬度的布局網(wǎng)格。

4 造型

公共部分

4.1 類

class屬性允許您為小部件指定一個或多個級聯(lián)樣式表 (CSS) 類。類應(yīng)該用空格分隔。這些類將應(yīng)用于瀏覽器中的小部件，小部件將獲得相應(yīng)的樣式。這些類應(yīng)該是應(yīng)用程序中使用的主題中的類。它推翻了小部件的默認樣式。

樣式按以下順序應(yīng)用：

1. 應(yīng)用使用的主題定義的默認樣式。
2. Class與小部件的Dynamic classes屬性相結(jié)合。
3. 小部件的Style屬性。

您可以通過單擊顯示樣式按鈕查看頁面中的哪些小部件通過類或樣式屬性應(yīng)用了樣式。

4.2 風格

style屬性允許你指定額外的 CSS樣式。如果還指定了一個類，則在該類之后應(yīng)用此樣式。例如，?>background-color:lightblue; color:red;將導致藍色背景上的紅色文本：

4.3 動態(tài)類

動態(tài)類屬性允許您指定一個或多個級聯(lián)樣式表 (CSS) 類，如類屬性，但基于表達式。這允許您基于來自封閉數(shù)據(jù)容器的數(shù)據(jù)動態(tài)地構(gòu)造類。表達式中構(gòu)造的動態(tài)類附加到Class屬性中定義的類。

5 行及其屬性

布局網(wǎng)格可以包含一行或多行。每行包含列，每行的列數(shù)可以不同。

下圖顯示了布局網(wǎng)格行屬性的示例：

5.1 公共部分

請參照4.1,4.2和4.3

5.2 一般部分

行的General部分包含以下屬性：

• Columns?– 設(shè)置行中的列數(shù)
• 垂直對齊列- 此屬性垂直對齊一行中的所有列。您可以選擇以下選項：

• • 未設(shè)置- 未設(shè)置對齊
  • 頂部- 列與布局網(wǎng)格的頂部對齊
  • 中心- 列與布局網(wǎng)格的中心對齊
  • 底部- 列與布局網(wǎng)格的底部對齊

此設(shè)置可以被單個列的垂直對齊設(shè)置覆蓋。

• 列之間的間距- 當設(shè)置為Yes時，增加列之間的間距

5.3 可見性部分

可見性確定小部件是否作為頁面的一部分顯示給最終用戶。比如基于某個字段選擇是否顯示，基于某個角色是否顯示。

6 列及其屬性

列形成布局網(wǎng)格的一行。

布局網(wǎng)格列屬性的示例如下圖所示：

6.1 公共部分

請參照4.1,4.2和4.3

6.2 一般部分

6.2.1寬度

此屬性允許您定義列寬。

對于網(wǎng)頁，它分為桌面寬度、平板電腦寬度和手機寬度，允許您定義每種設(shè)備類型的列寬。

對于本機頁面，您將看到一個名為Width的屬性。

Width屬性包含以下選項：

• 自動填充- 占用一列的可用空間（例如，如果有一列，它將跨越整行的列，對于兩列，它將在它們之間平均分配空間）
• 自動調(diào)整內(nèi)容——自動調(diào)整列的大小以適應(yīng)其內(nèi)容
• 手動- 允許您手動設(shè)置列的大小

列寬可用于使您的布局更加靈活并適應(yīng)不同類型的設(shè)備。

例如，您有一個包含一行和兩列的布局網(wǎng)格：圖片位于一列，帶有詳細信息的文本位于另一列。

對于臺式機和平板電腦，您可能需要將帶有圖片的第一列設(shè)置為“自動調(diào)整內(nèi)容”?，將第二列設(shè)置為“自動填充”?，這樣第一列將根據(jù)圖片的大小進行調(diào)整，而第二列將根據(jù)圖片的大小進行調(diào)整。取該行的其余部分：

對于phone?，最好將兩列并排放置，將它們設(shè)置為Manual?width of?12?（有關(guān)列大小屬性的更多信息）。在這種情況下，第二列將自動換行：

在下圖中，您可以看到上述兩列的設(shè)置：

6.2.2尺寸

僅當寬度設(shè)置為Manual時才會顯示Size選項。

此設(shè)置允許您使用相應(yīng)的屬性手動設(shè)置桌面、平板電腦或手機的列大?。鹤烂娲笮　⑵桨咫娔X大小、手機大小。

7 執(zhí)行基本操作

7.1 添加新行或新列

要添加新行，請執(zhí)行以下操作：

1. 在布局網(wǎng)格中選擇現(xiàn)有行。
2. 右鍵單擊并選擇在上方插入行或在下方插入行：

   

3. 選擇一個列布局（一行應(yīng)該有多少列以及應(yīng)該有什么權(quán)重列）。

一個新行被添加到布局網(wǎng)格中。添加新列是類似的操作。

四、Container

1 簡介

容器是一個布局元素，可用于同時設(shè)置樣式、隱藏、拖動或刪除放置在其中的一組小部件：

在瀏覽器中，它默認呈現(xiàn)為一個簡單的div元素。也可以將容器呈現(xiàn)為 HTML5 語義元素之一（例如section?、?main?、?article?、?nav?）。

2 屬性面板

屬性窗格通過窗格頂部的切換按鈕分為兩個主要部分：屬性和樣式。容器屬性由以下部分組成：

特性：

• 一般的
• 可見性
• 事件
• 公共的
• 可訪問性

造型：

• 設(shè)計屬性
• 公共的

3 屬性

3.1 一般部分

3.1.1 渲染模式

渲染模式決定了將使用哪個 HTML5 標記在 Web 瀏覽器中顯示容器。

3.2 可見性部分

可見性確定小部件是否作為頁面的一部分顯示給最終用戶。此部分與layout grid相同

3.3 事件部分

3.3.1 單擊

On-click屬性指定當用戶單擊容器時將執(zhí)行的操作（使用鼠標指針或在容器處于焦點時按Enter或Space鍵）。

Container其他模塊與Layout類似，這里就不做具體介紹了。

五、實際案例

1. 為了好區(qū)分我們先做一個標準的布局如下。給上和下分好系統(tǒng)已有的類，將中間用Layout grid平分

接著復(fù)雜整個模塊更改設(shè)置如下

讓我們來看看結(jié)果把，由于下面的模塊選擇了根據(jù)內(nèi)容自動縮放，所以第一個Layout會占據(jù)剩余的位置。

2. 選擇container28，然后高度設(shè)置成200px,

然后選擇container29，選擇按列對齊。

另外一個對比選擇按行對齊，最終展示結(jié)果如下：

3. 對兩個報表做如下設(shè)置，在手機端顯示完整一行

結(jié)果如下電腦端

手機端

4. 設(shè)置動態(tài)的類，根據(jù)優(yōu)先級不同

展示結(jié)果如下，右上角的圓圈根據(jù)優(yōu)先級不同顯示不同顏色

關(guān)于Mendix

作為西門子Xcelerator平臺的低代碼引擎，Mendix正在迅速成為推動企業(yè)數(shù)字化發(fā)展的首選應(yīng)用程序開發(fā)平臺。Mendix讓企業(yè)能夠以前所未有的速度構(gòu)建應(yīng)用程序、促進IT團隊與業(yè)務(wù)專家之間開展有意義的協(xié)作，并幫助IT團隊保持對整個應(yīng)用程序環(huán)境的控制。作為一直被領(lǐng)先的行業(yè)分析師視為“領(lǐng)軍者和遠見者”的低代碼平臺，Mendix是云原生的、開放的、可擴展的、敏捷的，并且經(jīng)過實踐驗證。從人工智能和增強現(xiàn)實，到智能自動化和原生移動，Mendix和西門子Xcelerator已成為“數(shù)字優(yōu)先”企業(yè)的中堅力量。Mendix已被46個國家的4,000多家企業(yè)采用，并建立了由30多萬名開發(fā)人員組成的活躍社區(qū)，這些開發(fā)人員使用該平臺創(chuàng)建了20多萬款應(yīng)用程序。文章來源地址http://www.zghlxwxcb.cn/news/detail-758548.html

到了這里，關(guān)于Mendix UI頁面布局以案說法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！