前往
大廳
主題

分享表格其中幾種設計心得

毛毛之狐狸 | 2022-03-07 12:00:22 | 巴幣 2214 | 人氣 770

分享表格其中幾種設計

 前言 

強調,此設計較適用於哈拉版文章

此文是面向哈拉版發文所分享自己
在做巴哈表格使用的方式及心得,
以表格排出能同時兼顧網頁與APP版面的排版。
有些會故意去使用巴哈表格崩壞的特性來呈現排版
(表格崩壞:裡面不放東西 ➔ 被壓得扁扁的表格)
說明應用如有誤、說明不清或已知用火的部分,
還請指正,感謝!

文中的圖寬皆設為 999 px
(欲使用此文設計前須熟知表格基本使用方法)

參考文章

目錄
1.
一般的單欄表格  
2.
並排的單欄表格  
3.
多欄表格的相關應用
4.
表格框線與格內配色
1.一般的單欄表格
單獨的單欄表格呈現
25%
50%
75%
99%

2.並排的單欄表格

設計並排單欄表格並排表格於APP上會自動分段。讓表格在APP上易於瀏覽,類似 Flex 的排版。
並排單欄表格的應用在APP中小屋文章閱覽上就不適用



99%  位置 : 未設定
50% 位置 : 靠左
50% 位置 : 未設定
34% 位置 : 靠左
33% 位置 : 靠左
33% 位置 : 未設定

25% 位置 : 靠左
25% 位置 : 靠左
25% 位置 : 靠左
25% 位置 : 未設定

20%  位置 : 靠左

20% 位置 : 靠左

20% 位置 : 靠左

20% 位置 : 靠左

20% 位置 : 未設定



3.多欄表格的相關應用

在APP上如果要不產生滾動條,那就要避免建立超過5欄的表格。格內也不要有過多的文字內容,建議欄數越多,每欄用字越少。而圖片建議一欄一圖為限,APP顯示格中寬度會依照表格內容改變。

預設寬度
(此一列列是獨立分開的)
99
50 50
33 33 33
25 25 25 25
20 20 20 20 20


6欄會產生需要拖曳的滾動條
在APP中小屋文章閱覽上例外

配合表格的特性也能達到這樣的效果(APP)

表格寬度設定
1% 69% 29%

本月排名
這是第一個標題文字
999
這是第二個標題文字
 99
 是第三個標題文字
 99

(此表格中圖片設定的寬度:1 px)
12 月排名
德意志第三蘿莉帝國
120
若葉與他的29隻茉莉
 37
 大東亞蘿莉共榮圈
 50

4.表格框線與格內配色

如不想要設整個表格的框線又想在特定儲存格加上框線,那就在特定儲存格中再丟一個設有框線的1x1單欄表格,表格寬度設為 99%,然後在該儲存格設定與框線相同顏色的背景,其作用在於切替暗色主題時也能區隔標題。

框線色碼:#808080
背景色碼:#142A33
實際應用
角色簡單介紹
兔田佩克拉 hololive【三期生】
兔田佩克拉設定
喜愛胡蘿蔔的容易
感到寂寞的兔女郎。
喜歡聊天與電子遊戲
主要於YouTube進行
聊天及遊戲直播。

角色簡單介紹
茉莉(萬聖節)

ATK
3000
DEF
2500
【物理】前衛
以銳爪進行突刺的
萬聖節見習騎士。
技能會根據必殺技
施展次數而強化,
傷害和行動速度UP
撕裂眼前的敵人


網頁 APP

標題結構:
打板子測試

實際應用結構:
角色簡單介紹
兔田佩克拉 hololive【三期生】
兔田佩克拉設定為
喜愛胡蘿蔔的容易
感到寂寞的兔女郎。
喜歡聊天與電子遊戲
主要於YouTube進行
聊天及遊戲直播。
角色簡單介紹
茉莉(萬聖節)

ATK
3000
DEF
2500
【物理】前衛
以銳爪進行突刺的
萬聖節見習騎士。
技能會根據必殺技
施展次數而強化,
傷害和行動速度UP
撕裂眼前的敵人。


招生文結構:

01
月號
DEC. 2022
V3.8
伺服器 真步真步王國
軸心蘿莉聯盟


看版人物 #天野ピカミィ
隸屬
VOMS Project
繪師
アイムス

德意志第三蘿莉帝國
隊長 眷屬阿魯
58
12月排名
150
當前目標
--
01月缺額
非報刀
出刀模式
大東亞蘿莉共榮圈
隊長 天  海
24
12月排名
50
當前目標
--
01月缺額
報刀
出刀模式





 後記 

如未來巴哈對於表格呈現上做了改版或修正,
導致此設計過時甚至失效,請留言通知我,感謝!

實際應用
公主連結哈拉版


圖源

草稿已儲存於 2023-01-14 08:25,共 38494 個 byte

創作回應

主管同事在天堂◔.̮◔
你好,請問一下文中這個要怎麼用,標題用這樣很美 https://truth.bahamut.com.tw/s01/202203/3d1190f2651c773cac605e28aee68983.PNG
2022-03-24 14:19:02
毛毛之狐狸
有問題在那回文就好
https://forum.gamer.com.tw/C.php?bsn=60111&snA=121904&subbsn=2&page=1&gothis=362856#362856
2022-03-24 18:01:42

相關創作

更多創作