中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

最近開始接觸了大型sasa平臺項目，由于產品及業務的需求相當復雜，導致常規的基礎組件已無法滿足業務的基本功能，需要定制大量的高級組件。當業務組件越來越龐大復雜時，就導致了表單布局產生了諸多不協調的問題，非常影響用戶體驗。有些地方還會對用戶在數據錄入過程當中造成一些困惑。那么我針對這個問題，進行了分析和總結，在此分享給大家一些小小的經驗。

目錄：

1. 常見表單布局
2. 復雜業務表單經常出現的問題
3. 解決辦法
4. 畫重點

一、常見表單布局

我們常見的表單布局為單列信息展示布局，其通常適用于業務需求較為簡單的情況。如下圖所示：

但當業務信息較為復雜，需要大量錄入信息的時候，如果還采用單列信息展示的情況則會使整個頁面變得很長，用戶想要檢驗表單信息填寫是否正確的時候來回翻閱造成了諸多不便。那么我們通常會考慮采用多列信息展示的方式進行布局，如下圖所示：

復雜業務表單經常出現的問題

然而，關于多列信息展示會出現很多問題，比如：當多列信息展示的組件標題長度不一時，這是我們經常遇到的情況。

而且大多也無法預計標題的最大長度，我們初始寬度定多寬，都有可能無法滿足業務小哥哥D2。誰知道業務小哥哥，哪天來個超長標題呢，是吧？

當然問題還不止這些，比如：業務小哥哥D2：“我要出發時間、到達時間；出發日期、到達日期；出發地點、到達地點…*&……%%￥##@……”

設計師D1：“好的，老板！沒問題！通通滿足你?。　?/p>

接下來我們將看到來自太空基佬村的A、B、C組合，閃亮登場！

三列布局有3對基佬怎么辦？？？好辦！縱向結構唄！

然而理想很美好，現實很骨感。乍一看似乎沒什么大問題…那我們拿給用戶檢驗一下…

經過用戶的一番眼動測試…我們發現由于成雙成對的組件并列出現，會造成用戶的視線像打乒乓球一樣上下交替。

那么，如果采用橫向排列呢？

則會有其中一對組合被活生生拆分，拆分后用戶的眼動軌跡就更不可思議了，會出現如下狀況：

由于換行造成的成對組件被拆分，用戶下一步的視線落腳點會被打亂。

綜上所述在面對復雜業務場景時表單布局所存在的問題主要有2點：

1. 標題長度不一時，組件間的間距無法等距怎么辦；
2. 組件成對出現的時候，如何布局才能避免成對被拆分且不影響用戶在獲取表單信息時的快捷度。

解決辦法

那么我們先來解決第一個問題，如下圖所示：

我們可以將標題文本與文本框在同一列上進行展示，這樣無論標題文本有多長都不會再出現組件間距不一的問題了。接下來我們來解決組件成對出現的問題，我們將3列調整為2列分布，如下圖所示：

也就是關聯組件最多2列展示，這樣就能很好的解決組件不成對，且不影響用戶在獲取表單信息時的快捷度。

說到快捷度，還有更簡化的辦法么？當然！有?。?！如下圖所示：

我們可以看到關聯組件重組成了復合組件，從此再也不分離了。當然在未錄入信息的時候，文本框需要有相應的錄入信息提示，用戶才能清晰的知道需要錄入的內容是什么。另外標題文本也需要有錄入信息的范圍描述，這樣才能很好的組合在一起。等等，上圖出現了個BUG！

由于布局空間的變化，之前的顯示區域被壓縮到了右側，開發小哥哥動態渲染出的組件出現了溢出的狀況！這可怎么辦？直接讓他換行？

別急我們接著往下看……設計師跟業務方溝通后產出的高級組件和開發根據具體運用場景動態渲染后的結果對比如下：

我們可以看到由于特殊業務場景的變化，設計師不可能將所有場景都設計覆蓋到，那么這個時候就需要開發哥哥的動態渲染了，就可能出現業務組件超長甚至溢出的情況。

那么如何正確換行呢？如下圖所示：

這個時候我們就需要與開發溝通，搞清楚哪些是后臺動態渲染的組件，哪些是前端寫死的組件。我們可以看到錯誤的換行方式是將前端寫死的組件進行了拆分換行，寫死的是不可拆分的哦！正確的換行方式是在前端寫死的組件區域內換行。上面那個正確的例子不出錯，但也不是最佳用法。

我們看看更合理的方式是什么，如下圖所示：

仔細觀察我們可以看到后臺配置項通常第一個是業務的綜合屬性，它一般是枚舉或者枚舉相關的復雜組件。第二個配置項是備注框，備注框其實是可放置在第一行或者第二行的，但為了遵循不打算前端配置組件的原則，所有放置在第一行。

由于布局空間的限制，我們將溢出的增刪區也就是整個組件的控制區域進行換行更為合理，因為它控制了整個組件的增加或者刪除。那么知道了上述的各種解決方案，我們設計師在定制組件規范的時間就需要更加細致的考慮到不同情景的配置的配置情況了，如下圖所示：

我們可以用An來定義綜合屬性組件代號，因為它是后臺配置的，不確定會是什么?？蓳Q行區域也可以進行更為細致的定義，比如布局排版經常會因為不同頁面而有所不同，那么這就需要定義換行的極限區域是哪里，需要將關聯性高的不可換行區域標注出來。這樣最終的落地實現效果，雖然是開發動態渲染的，但是設計師也會更具有還原度的把控性。

畫重點

好了關于B端表單的布局我們今天就講到這里，面對復雜的業務場景總結如下：

1. 標題長度不一時，組件間的間距無法等距，我們需要將標題文本與文本框布局在一列；
2. 組件成對出現的時候，最多采用2列的情況展示，如能夠合并為一個組件則進行合并；
3. 面對復雜的動態渲染業務場景，我們需要對組件規范進行更為詳細的說明，搞清楚哪些是動態配置，哪些是前端寫死的，哪些部分可以換行，如何換行等。

作者：角馬X

本文由 @角馬X 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議