很可惜 T 。T 您現(xiàn)在還不是作者身份,不能自主發(fā)稿哦~
如有投稿需求,請(qǐng)把文章發(fā)送到郵箱tougao@appcpx.com,一經(jīng)錄用會(huì)有專人和您聯(lián)系
咨詢?nèi)绾纬蔀榇河鹱髡哒?qǐng)聯(lián)系:鳥(niǎo)哥筆記小羽毛(ngbjxym)
Halo,這里是設(shè)計(jì)夾,今天為大家分享的是「B端表格」設(shè)計(jì)。
表格作為B端產(chǎn)品中重要的界面組成部分,承載著內(nèi)容展示、數(shù)據(jù)記錄等多重任務(wù)。每家產(chǎn)品的表格看起來(lái)構(gòu)成差不多,但在交互細(xì)節(jié)上仍然有很多好的地方值得我們仔細(xì)思考。
本次通過(guò)整理10條B端表格設(shè)計(jì)規(guī)范+5條B端表格交互邏輯,系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)~
表格內(nèi)的信息通過(guò)對(duì)齊,會(huì)更加規(guī)范易理解,給用戶視覺(jué)上的統(tǒng)一感,且視線流動(dòng)順暢,能夠讓人快速捕捉到所要的內(nèi)容。
•文本信息左對(duì)齊,因?yàn)楝F(xiàn)代人的閱讀方式習(xí)慣從左到右,符合正常心智;
• 數(shù)據(jù)信息右對(duì)齊,方便數(shù)字大小的直觀對(duì)比;
• 內(nèi)容寬度固定居中對(duì)齊,更好的信息呈現(xiàn)及表格空間的節(jié)?。?/p>
• 表頭與信息內(nèi)容對(duì)齊方式一致,一致性以達(dá)到簡(jiǎn)化,降低視覺(jué)噪音。
默認(rèn)展示的列數(shù)為3-8列,如果需要展示更多列數(shù),則需要優(yōu)先固定展示重要列,其余的列的內(nèi)容會(huì)以滾動(dòng)條滑動(dòng)而展示出來(lái)。
有操作時(shí)需固定,操作項(xiàng)不固定時(shí)無(wú)法快速定位會(huì)降低操作效率;重要信息固定,有利于快速獲取重要的內(nèi)容。
寬度的尺寸大小自適應(yīng),但需要根據(jù)文字的重要性顯示,重要文字內(nèi)容優(yōu)先完整顯示。(如果由于屏幕小表格會(huì)出現(xiàn)省略,就要考慮多一個(gè)瀏覽器自帶的title提示)
注:當(dāng)?shù)谝涣惺切蛱?hào)或多選項(xiàng)時(shí),列寬不需要太寬,這樣視覺(jué)不會(huì)顯得空洞。
字符不要多,如果文字太多,就需要做文字信息精簡(jiǎn)化。同樣,對(duì)于專業(yè)術(shù)語(yǔ)或用戶不常見(jiàn)的名詞應(yīng)給予一定的幫助說(shuō)明。
表格內(nèi)容較多且有長(zhǎng)文本時(shí),長(zhǎng)文本縮略展示;表格內(nèi)容較少時(shí)有長(zhǎng)文本,長(zhǎng)文本換行展示。
表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無(wú)數(shù)據(jù)的情況,留白處理會(huì)給用戶造成一定的困惑和誤解,是系統(tǒng)沒(méi)有加載出來(lái)嗎?明智的做法,使用「-」填充顯示。圖片為空時(shí)使用圖片占位符。
同一項(xiàng)目中的操作列命名應(yīng)該保持統(tǒng)一,例如:常規(guī)增、刪、改、查命名為新增、刪除、編輯、詳情。
操作項(xiàng)超過(guò)三個(gè)時(shí),將操作低頻折疊收起,可以幫助頁(yè)面突出更加重要的信息,減輕空間壓力,減少干擾。
給數(shù)據(jù)做升降區(qū)分可以快速判斷數(shù)據(jù)的趨勢(shì),國(guó)內(nèi)數(shù)據(jù)升圖標(biāo)默認(rèn)為紅色,降的為綠色。
全局操作為無(wú)需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作,常見(jiàn)的有新增、導(dǎo)入、篩選。
批量操作就是對(duì)表格的多行數(shù)據(jù)同時(shí)操作,常見(jiàn)的有導(dǎo)出、刪除。
全局和批量都不屬于單個(gè)對(duì)象因此需要放在表格外,操作具體的位置排放根據(jù)操作的重要程度一次從左到右遞減。
條紋顏色:標(biāo)題背景色透明度60%左右;(條紋顏色視覺(jué)上應(yīng)該比標(biāo)題欄弱一點(diǎn))鼠標(biāo)hover顏色:主題色透明度10%。
當(dāng)閱讀豐富且繁多的表格時(shí),由于屏幕有限,用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息。
固定表頭,能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現(xiàn)。
可以讓無(wú)序信息內(nèi)容進(jìn)行有序排列,排序分為升序和降序,一般用在數(shù)據(jù)、時(shí)間、數(shù)量上。
允許調(diào)整列的寬度來(lái)查看更加完整的縮略數(shù)據(jù)。被截?cái)嗟臄?shù)據(jù),默認(rèn)支持鼠標(biāo)懸停時(shí)瀏覽器自帶title顯示完整數(shù)據(jù)。
呈現(xiàn)大型數(shù)據(jù)集時(shí),水平滾動(dòng)是不可避免的,通過(guò)橫向滾動(dòng)查看其它數(shù)據(jù)。將首列進(jìn)行固定(若包含勾選操作,則一起固定),以便用戶將數(shù)據(jù)與對(duì)象進(jìn)行對(duì)應(yīng)。
若表格是分頁(yè)處理的,分頁(yè)會(huì)放在上部、下部或上下部均有,分頁(yè)固定省去了用戶需要翻到頂部或底部進(jìn)行操作的麻煩。
以上是B端表格設(shè)計(jì)規(guī)范和交互邏輯的整理,希望通過(guò)這些干貨能讓你更進(jìn)一步掌握表格設(shè)計(jì)!
本文為作者獨(dú)立觀點(diǎn),不代表鳥(niǎo)哥筆記立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。
《鳥(niǎo)哥筆記版權(quán)及免責(zé)申明》 如對(duì)文章、圖片、字體等版權(quán)有疑問(wèn),請(qǐng)點(diǎn)擊 反饋舉報(bào)
我們致力于提供一個(gè)高質(zhì)量?jī)?nèi)容的交流平臺(tái)。為落實(shí)國(guó)家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求,為完善跟帖評(píng)論自律管理,為了保護(hù)用戶創(chuàng)造的內(nèi)容、維護(hù)開(kāi)放、真實(shí)、專業(yè)的平臺(tái)氛圍,我們團(tuán)隊(duì)將依據(jù)本公約中的條款對(duì)注冊(cè)用戶和發(fā)布在本平臺(tái)的內(nèi)容進(jìn)行管理。平臺(tái)鼓勵(lì)用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容,同時(shí)也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡(luò)信息。
一、根據(jù)《網(wǎng)絡(luò)信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國(guó)未成年人保護(hù)法》等法律法規(guī),對(duì)以下違法、不良信息或存在危害的行為進(jìn)行處理。
1. 違反法律法規(guī)的信息,主要表現(xiàn)為:
1)反對(duì)憲法所確定的基本原則;
2)危害國(guó)家安全,泄露國(guó)家秘密,顛覆國(guó)家政權(quán),破壞國(guó)家統(tǒng)一,損害國(guó)家榮譽(yù)和利益;
3)侮辱、濫用英烈形象,歪曲、丑化、褻瀆、否定英雄烈士事跡和精神,以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽(yù)、榮譽(yù);
4)宣揚(yáng)恐怖主義、極端主義或者煽動(dòng)實(shí)施恐怖活動(dòng)、極端主義活動(dòng);
5)煽動(dòng)民族仇恨、民族歧視,破壞民族團(tuán)結(jié);
6)破壞國(guó)家宗教政策,宣揚(yáng)邪教和封建迷信;
7)散布謠言,擾亂社會(huì)秩序,破壞社會(huì)穩(wěn)定;
8)宣揚(yáng)淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪;
9)煽動(dòng)非法集會(huì)、結(jié)社、游行、示威、聚眾擾亂社會(huì)秩序;
10)侮辱或者誹謗他人,侵害他人名譽(yù)、隱私和其他合法權(quán)益;
11)通過(guò)網(wǎng)絡(luò)以文字、圖片、音視頻等形式,對(duì)未成年人實(shí)施侮辱、誹謗、威脅或者惡意損害未成年人形象進(jìn)行網(wǎng)絡(luò)欺凌的;
12)危害未成年人身心健康的;
13)含有法律、行政法規(guī)禁止的其他內(nèi)容;
2. 不友善:不尊重用戶及其所貢獻(xiàn)內(nèi)容的信息或行為。主要表現(xiàn)為:
1)輕蔑:貶低、輕視他人及其勞動(dòng)成果;
2)誹謗:捏造、散布虛假事實(shí),損害他人名譽(yù);
3)嘲諷:以比喻、夸張、侮辱性的手法對(duì)他人或其行為進(jìn)行揭露或描述,以此來(lái)激怒他人;
4)挑釁:以不友好的方式激怒他人,意圖使對(duì)方對(duì)自己的言論作出回應(yīng),蓄意制造事端;
5)羞辱:貶低他人的能力、行為、生理或身份特征,讓對(duì)方難堪;
6)謾罵:以不文明的語(yǔ)言對(duì)他人進(jìn)行負(fù)面評(píng)價(jià);
7)歧視:煽動(dòng)人群歧視、地域歧視等,針對(duì)他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊;
8)威脅:許諾以不良的后果來(lái)迫使他人服從自己的意志;
3. 發(fā)布垃圾廣告信息:以推廣曝光為目的,發(fā)布影響用戶體驗(yàn)、擾亂本網(wǎng)站秩序的內(nèi)容,或進(jìn)行相關(guān)行為。主要表現(xiàn)為:
1)多次發(fā)布包含售賣(mài)產(chǎn)品、提供服務(wù)、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式:
2)單個(gè)帳號(hào)多次發(fā)布包含垃圾廣告的內(nèi)容;
3)多個(gè)廣告帳號(hào)互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容;
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容,如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等,誘騙用戶點(diǎn)擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當(dāng)曝光;
6)購(gòu)買(mǎi)或出售帳號(hào)之間虛假地互動(dòng),發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關(guān)交易。
7)發(fā)布包含欺騙性的惡意營(yíng)銷(xiāo)內(nèi)容,如通過(guò)偽造經(jīng)歷、冒充他人等方式進(jìn)行惡意營(yíng)銷(xiāo);
8)使用特殊符號(hào)、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息,主要表現(xiàn)為:
1)包含自己或他人性經(jīng)驗(yàn)的細(xì)節(jié)描述或露骨的感受描述;
2)涉及色情段子、兩性笑話的低俗內(nèi)容;
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容;
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想;
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適;
6)炒作緋聞、丑聞、劣跡等;
7)宣揚(yáng)低俗、庸俗、媚俗內(nèi)容。
5. 不實(shí)信息,主要表現(xiàn)為:
1)可能存在事實(shí)性錯(cuò)誤或者造謠等內(nèi)容;
2)存在事實(shí)夸大、偽造虛假經(jīng)歷等誤導(dǎo)他人的內(nèi)容;
3)偽造身份、冒充他人,通過(guò)頭像、用戶名等個(gè)人信息暗示自己具有特定身份,或與特定機(jī)構(gòu)或個(gè)人存在關(guān)聯(lián)。
6. 傳播封建迷信,主要表現(xiàn)為:
1)找人算命、測(cè)字、占卜、解夢(mèng)、化解厄運(yùn)、使用迷信方式治??;
2)求推薦算命看相大師;
3)針對(duì)具體風(fēng)水等問(wèn)題進(jìn)行求助或咨詢;
4)問(wèn)自己或他人的八字、六爻、星盤(pán)、手相、面相、五行缺失,包括通過(guò)占卜方法問(wèn)婚姻、前程、運(yùn)勢(shì),東西寵物丟了能不能找回、取名改名等;
7. 文章標(biāo)題黨,主要表現(xiàn)為:
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來(lái)誘導(dǎo)用戶;
2)內(nèi)容與標(biāo)題之間存在嚴(yán)重不實(shí)或者原意扭曲;
3)使用夸張標(biāo)題,內(nèi)容與標(biāo)題嚴(yán)重不符的。
8.「飯圈」亂象行為,主要表現(xiàn)為:
1)誘導(dǎo)未成年人應(yīng)援集資、高額消費(fèi)、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動(dòng)「飯圈」粉絲攀比炫富、奢靡享樂(lè)等行為
4)以號(hào)召粉絲、雇用網(wǎng)絡(luò)水軍、「養(yǎng)號(hào)」形式刷量控評(píng)等行為
5)通過(guò)「蹭熱點(diǎn)」、制造話題等形式干擾輿論,影響傳播秩序
9. 其他危害行為或內(nèi)容,主要表現(xiàn)為:
1)可能引發(fā)未成年人模仿不安全行為和違反社會(huì)公德行為、誘導(dǎo)未成年人不良嗜好影響未成年人身心健康的;
2)不當(dāng)評(píng)述自然災(zāi)害、重大事故等災(zāi)難的;
3)美化、粉飾侵略戰(zhàn)爭(zhēng)行為的;
4)法律、行政法規(guī)禁止,或可能對(duì)網(wǎng)絡(luò)生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過(guò)主動(dòng)發(fā)現(xiàn)和接受用戶舉報(bào)兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺(tái)氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當(dāng)一個(gè)用戶發(fā)布違規(guī)內(nèi)容時(shí),本網(wǎng)站將依據(jù)相關(guān)用戶違規(guī)情節(jié)嚴(yán)重程度,對(duì)帳號(hào)進(jìn)行禁言 1 天、7 天、15 天直至永久禁言或封停賬號(hào)的處罰。當(dāng)涉及欺凌未成年人、危害未成年人身心健康、通過(guò)作弊手段注冊(cè)、使用帳號(hào),或者濫用多個(gè)帳號(hào)發(fā)布違規(guī)內(nèi)容時(shí),本網(wǎng)站將加重處罰。
三、申訴
隨著平臺(tái)管理經(jīng)驗(yàn)的不斷豐富,本網(wǎng)站出于維護(hù)本網(wǎng)站氛圍和秩序的目的,將不斷完善本公約。
如果本網(wǎng)站用戶對(duì)本網(wǎng)站基于本公約規(guī)定做出的處理有異議,可以通過(guò)「建議反饋」功能向本網(wǎng)站進(jìn)行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)