最近做的一個(gè)后臺(tái)管理項(xiàng)目,界面設(shè)計(jì)中很多彈窗表單,表單的對(duì)齊方式為頂對(duì)齊方式,當(dāng)時(shí)選擇頂對(duì)齊的排列方式的原因是標(biāo)題和輸入框的間距小,縮短填寫(xiě)表單時(shí)間;垂直路徑一直向下,用戶的視線固定;統(tǒng)一輸入框?qū)挾?,視覺(jué)效果更統(tǒng)一。設(shè)計(jì)的時(shí)候展示表單信息也是一屏的高度正好,但是沒(méi)考慮到前端實(shí)現(xiàn)頁(yè)面效果可能會(huì)有偏差,標(biāo)題間距太大,導(dǎo)致一個(gè)彈窗還顯示不全,需要加下拉框,效果如下圖所示:
導(dǎo)致這種原因一個(gè)是間距,另一個(gè)就是對(duì)齊方式了,頂部對(duì)齊方式高度會(huì)比左對(duì)齊占據(jù)的多,因此此時(shí)對(duì)齊方式選擇左對(duì)齊最為合適,如下圖所示:
如展示數(shù)據(jù)過(guò)多,可另起兩列展示,且沒(méi)有下拉框,展示清晰明了。