整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          B端設(shè)計(jì)指南-表格(上)


          前我主要深耕于B端設(shè)計(jì)中,深知B端表格設(shè)計(jì)與C端有很大的不同,無論是表格的展示形式以及承載內(nèi)容上都有非常大的差異。而現(xiàn)在網(wǎng)上有不少關(guān)于表格如何設(shè)計(jì)的文章,但要真正落到實(shí)處的少之又少,因此今天我們就來聊聊表格,探討一下B端表格究竟應(yīng)該如何設(shè)計(jì)。


          由于表格組件類型復(fù)雜,因此分為上下兩篇,上篇主要講基礎(chǔ)知識(shí)點(diǎn),下篇主要針對(duì)交流群中的20個(gè)問題進(jìn)行解答,歡迎持續(xù)關(guān)注~


          在我們B端表格頁中,由導(dǎo)航、篩選、表格幾大模塊構(gòu)成,因?yàn)楸砀?/span>面積占比最大,頁面呈現(xiàn)最為重要,會(huì)直接影響用戶的使用體驗(yàn)。


          在我們對(duì)表格的設(shè)計(jì)思考過程中,需要注意兩項(xiàng)原則:易讀與易用

          前者是提升使用者在表格瀏覽時(shí)的體驗(yàn),主要是從信息密度、色彩分隔、以及視覺節(jié)奏三個(gè)方面去理解;后者是使用表格時(shí)的操作感受,比如快捷操作、多數(shù)據(jù)編輯等方面去理解。無論是B端的任何頁面,表格都是必不可少的部分。

          想要把這三種形式講透,需要將數(shù)據(jù)的形式結(jié)合起來說,我會(huì)從展示形式、數(shù)據(jù)結(jié)構(gòu)、前端標(biāo)簽 三個(gè)方面去解釋三者的區(qū)別。


          1) 數(shù)據(jù)采集 - 表單

          表單擁有一對(duì)一的數(shù)據(jù)結(jié)構(gòu),能夠讓用戶明白數(shù)據(jù)間的對(duì)應(yīng)關(guān)系。同時(shí)使用表單的門檻最低,擁有更合理的錄入形式,比如在常見的問卷調(diào)查、登陸注冊(cè)都是采取表單的形式。

          在前端展示方面,表單采用的標(biāo)簽一般會(huì)包含:text、password、radio、checkbox、button、submit、reset、image、file等屬性,我們也要針對(duì)不同的屬性進(jìn)行相應(yīng)的設(shè)計(jì)區(qū)分。

          2) 單唯獨(dú)數(shù)據(jù)整理 - 列表

          列表能夠?qū)?shù)據(jù)在一列中井然有序的展示,保持?jǐn)?shù)據(jù)的有序與整潔。列表擁有一對(duì)多的數(shù)據(jù)結(jié)構(gòu),能夠讓用戶理清一條數(shù)據(jù)下的多個(gè)對(duì)應(yīng)關(guān)系,并且多個(gè)對(duì)應(yīng)關(guān)系是相互并列。比如在常見地待辦事項(xiàng)、走查清單中里,就是使用單維度數(shù)據(jù)進(jìn)行排列。

          在前端展示上,列表中的標(biāo)簽分為有序與無序。


          ? 有序列表:即有順序的列表,其各個(gè)列表項(xiàng)按照一定的規(guī)則排列定義,前端標(biāo)簽上采取<ol><li>的結(jié)構(gòu)。

          通常有序列表一般為數(shù)字序號(hào)(1、2、3、4...)或者字母序號(hào)(a、b、c、d)

          ? 無序列表:無序列表的各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分,為并列關(guān)系。前端標(biāo)簽上采取<ul><li>的結(jié)構(gòu)。

          3) 多緯度數(shù)據(jù)整理、數(shù)據(jù)分析 - 表格

          在多維度的數(shù)據(jù)分析中,你是永遠(yuǎn)的逃離不了表格,使用多維度數(shù)據(jù)進(jìn)行統(tǒng)一的結(jié)構(gòu)化展示,讓用戶清晰的看到在同一主題下的多條數(shù)據(jù)的對(duì)比,使數(shù)據(jù)能夠進(jìn)行多維度的展示,保證數(shù)據(jù)的完整性。


          在前端的方面,表格中都是采取 <table> 標(biāo)簽進(jìn)行展示,同時(shí)表格中的行與列分別用 <tr> 與 <td> 標(biāo)簽,我們通常說的表頭,則為 <th> 標(biāo)簽。但要注意,在前端眼中表格永遠(yuǎn)沒有列的概念,列都是每行拼接而成。


          正式開始之前,我們先定義一下表格~

          表格是一種常見的信息展現(xiàn)形式,它是所有B端組件中信息展示密度最高,同時(shí)涵蓋了B端的所有場(chǎng)景,因此是B端設(shè)計(jì)中的一個(gè)重要的組件。

          在我們常見的B端產(chǎn)品改版中,除了對(duì)頁面流程調(diào)整以外,更多就是圍繞表格而展開的一系列優(yōu)化。因此表格的設(shè)計(jì),做為B端設(shè)計(jì)師的基礎(chǔ)能力之一,也是檢驗(yàn)一個(gè)B端設(shè)計(jì)師是否合格的關(guān)鍵因素。


          1) 表格痛點(diǎn)


          ? 形式單一

          表格屬于形式十分單一的組件,對(duì)于沒有經(jīng)驗(yàn)的設(shè)計(jì)師來說,會(huì)認(rèn)為能夠調(diào)整的地方實(shí)在太少,往往在思考層面就會(huì)有所不足。對(duì)于一個(gè)B端表格來說,它需要具備數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計(jì),因此功能多而全,很難思考解決問題思路。


          ? 組件聯(lián)動(dòng)多

          通常設(shè)計(jì)師設(shè)計(jì)單個(gè)組件,都會(huì)有較好的全量意識(shí)。而到了多組件的聯(lián)動(dòng)時(shí),就會(huì)出現(xiàn)問題。

          比如在表格中,除了表格本身,還會(huì)有搜索、篩選、視圖、分頁等操作,如果不對(duì)多組件的交叉使用進(jìn)行思考,也會(huì)缺少對(duì)于這些場(chǎng)景的設(shè)計(jì)。

          ? 數(shù)據(jù)形式多

          在表格中,會(huì)承載多種多樣的字段類型,而每一個(gè)字段類型都會(huì)有相應(yīng)的差異。形式的不同落到表格上就會(huì)有不同的呈現(xiàn)形式,在關(guān)鍵數(shù)值的處理上,也會(huì)差強(qiáng)人意。因此看上去簡(jiǎn)單的一個(gè)表格,其實(shí)會(huì)有很多需要設(shè)計(jì)的點(diǎn)。

          而深入到表格的內(nèi)部中,你會(huì)發(fā)現(xiàn)能做的遠(yuǎn)遠(yuǎn)不止于此,如果剛開始沒有對(duì)表格進(jìn)行梳理,那么你在設(shè)計(jì)的過程中,對(duì)于反復(fù)出現(xiàn)的表格將束手無策,為了讓大家能夠?qū)Ρ砀裼懈畹睦斫猓覍⒈砀襁M(jìn)行系統(tǒng)的拆解,結(jié)合實(shí)際案例,能夠讓表格更淺顯易懂。


          2) 表格拆解

          首先問大家一個(gè)問題,你覺得表格一共有幾個(gè)部分組成,分別是什么?給大家五秒鐘時(shí)間思考~

          5

          4

          3

          2

          1

          在我看來,表格一共分為五部分:

          a.標(biāo)題

          概括整個(gè)表格的內(nèi)容信息,讓用戶一眼就知道該表格的用途是否符合自己心中的預(yù)期。

          在實(shí)際場(chǎng)景中,除了通過標(biāo)題文字去的形式之外,你還可以為每一個(gè)表格去設(shè)計(jì)不同類型的圖標(biāo),這樣能夠讓用戶看到圖標(biāo)就能聯(lián)想到內(nèi)容,這也是現(xiàn)在無代碼開發(fā)平臺(tái)常見的處理方式。

          b.工具欄

          但在工具欄的排列方式會(huì)有非常多的講究,在市面上的操作區(qū)域一般可分為單行與雙行的狀態(tài),可根據(jù)自身產(chǎn)品要求的特點(diǎn)進(jìn)行隨意的變化,會(huì)在文章后半部分具體講到工具欄的設(shè)計(jì)思路,這里就不再過多贅述。

          c.表頭

          概括每列的主要信息,在用戶使用表格中,起到數(shù)據(jù)解釋作用,讓數(shù)據(jù)能與之進(jìn)行匹配,使用戶能夠看懂?dāng)?shù)據(jù)。同時(shí)在表頭處會(huì)擁有一些操作,比如凍結(jié)、篩選、排序都會(huì)放置于此,因此需要進(jìn)行留意。

          d.單元格

          承載用戶的每一條數(shù)據(jù),也是整個(gè)表格的核心。單元格的大小行高都會(huì)直接影響用戶使用表格的體驗(yàn),單元格的設(shè)計(jì)上也會(huì)有很多設(shè)計(jì)思路,在后半部分也給他家提供了我自己的看法,與大家進(jìn)行探討,在這個(gè)就先按下不表。

          e.分頁

          嚴(yán)格意義上講,分頁是不屬于表格當(dāng)中,但當(dāng)數(shù)據(jù)超過用戶所設(shè)定的閾值時(shí),就需要使用分頁拆解數(shù)據(jù),所以分頁和表格是經(jīng)常聯(lián)系在一起的。分頁一共有:基礎(chǔ)型、迷你型、完整型三種類型。

          而如何進(jìn)行跨頁的操作,一直都是分頁在B端中的難點(diǎn),需要有好的思路與邏輯,在分頁模塊中與大家聊聊。


          你知道表格類型的多少?zèng)Q定你了設(shè)計(jì)表格的下限。

          雖然在大多數(shù)業(yè)務(wù)場(chǎng)景中都是使用基礎(chǔ)表格,但在B端產(chǎn)品中業(yè)務(wù)的多樣性使得很多特殊的表格有它獨(dú)特發(fā)揮的空間。

          我發(fā)現(xiàn)在我的B端交流群都有著類似的問題,他們不知道表格還存在這么多的類型,這時(shí)候你與別人之間的認(rèn)知的差距就是你設(shè)計(jì)優(yōu)勢(shì)所在。


          1) 基礎(chǔ)表格

          基礎(chǔ)表格是根基,是由行與列的單元格組成。在使用層面上能滿足用戶多維度查看數(shù)據(jù)的需求。因?yàn)榇蠹叶己苁熘谶@一章節(jié)并不是主角,我們就不做過多贅述。


          2) 樹形表格 - 包含關(guān)系

          當(dāng)表格中的數(shù)據(jù)為包含與被包含的結(jié)構(gòu)時(shí),可采取樹形表格。

          通過逐級(jí)大綱的形式來展現(xiàn)數(shù)據(jù)間的層級(jí)關(guān)系,讓整個(gè)信息結(jié)構(gòu)變得一目了然。這一表格形式常出現(xiàn)于項(xiàng)目管理工具中,比如 Teambition、Tapd、飛蛾都有這樣的設(shè)計(jì)。

          Tapd

          作為騰訊最重要的項(xiàng)目管理工具,在產(chǎn)品設(shè)計(jì)之初,就考慮到類似情況,你能夠在Tpad單列數(shù)據(jù)編輯點(diǎn)擊入口,創(chuàng)建子數(shù)據(jù),這樣在項(xiàng)目管理的場(chǎng)景下,有著較為友好的交互體驗(yàn)。

          Teambition

          前段時(shí)間,Teambition正式成為阿里旗下的辦公套件,而釘釘?shù)脑漆斠惑w化,或許證明這樣龐大的市場(chǎng)仍然還要等待時(shí)間的挖掘。期待資本對(duì)于B端行業(yè)的更多動(dòng)作

          我們回到設(shè)計(jì)上,Teambition在9月份經(jīng)歷的改版,變化很多,有機(jī)會(huì)可以總結(jié)一個(gè)改版分析分享給大家,作為一個(gè)項(xiàng)目管理軟件,Teambition也擁有樹形表格的這樣一共功能,它的添加入口出現(xiàn)在每個(gè)數(shù)據(jù)詳情頁的最下方,同時(shí)在視圖層面,也可以篩選展示為:所有任務(wù)、僅父任務(wù)、僅子任務(wù)四種場(chǎng)景,更能滿足用戶的需求~

          3) 子表格 - 嵌套關(guān)系

          當(dāng)一條主數(shù)據(jù)下有多條數(shù)據(jù)結(jié)構(gòu)不同的關(guān)聯(lián)數(shù)據(jù)進(jìn)行嵌套時(shí),這時(shí)候就可以用子表格進(jìn)行創(chuàng)建。它能夠?qū)χ鲾?shù)據(jù)進(jìn)行更加細(xì)致的解釋,詳細(xì)的了解主數(shù)據(jù)中數(shù)據(jù)的含義。從表象上看,就是在一個(gè)表格中還能嵌套另一個(gè)表格。

          比如在對(duì)某集團(tuán)對(duì)旗下子公司的銷售表格中,它能夠通過嵌套子表格的形式,將每一個(gè)子公司下的銷售人員的銷售記錄進(jìn)行記錄,從而能夠更加細(xì)的了解到每一個(gè)公司、每一個(gè)人員的具體情況。

          在國外報(bào)表中,這類表格很少出現(xiàn),而在中國的報(bào)表中,嵌套子表格算是一種不折不扣的中國式報(bào)表。


          當(dāng)然這里我們依舊可以深入理解,比如在兩個(gè)表格之間,用戶是通過什么樣的方式建立一個(gè)父子的關(guān)系?表格中當(dāng)父數(shù)據(jù)刪除時(shí),子數(shù)據(jù)如何處理?設(shè)計(jì)上對(duì)父子之間的關(guān)聯(lián)有著何種限制,這都是我們需要思考的,因?yàn)檫@里牽涉到業(yè)務(wù)實(shí)在太多,我也無法抽象出一個(gè)規(guī)律供大家學(xué)習(xí),因此只有具體問題具體分析。


          4) 交叉表格/表頭分組 - 兩條數(shù)據(jù)在形式上有交叉

          當(dāng)一個(gè)表格里面有多條數(shù)據(jù)在同一個(gè)小范圍的維度進(jìn)行展示時(shí),它就是交叉表格。從表象上看,就是表頭有很多分組進(jìn)行區(qū)分,因此它也叫做表頭分組。

          它能夠通過硬拆分將數(shù)據(jù)進(jìn)行切割,但是這樣數(shù)據(jù)的易讀性就是有很大的差距,比如在2010-2020公司年度收支表格中,需要同時(shí)展示每一年份的收入、支出與利潤(rùn),使用交叉報(bào)表能夠讓用戶一眼就是看清數(shù)據(jù),而基礎(chǔ)表格卻不行。交叉表格也算是中國式表格中的一種,能夠滿足具體業(yè)務(wù)上的需求。


          5) 圖表表格 表格數(shù)據(jù)的另一種展現(xiàn)形式

          當(dāng)一個(gè)表格里面有多種圖表數(shù)據(jù)進(jìn)行展示時(shí),他就是圖表表格。

          在對(duì)一些項(xiàng)目做定制化開發(fā)時(shí),這是十分常見的場(chǎng)景。用戶點(diǎn)擊某一數(shù)據(jù)后,直接跳出數(shù)據(jù)的統(tǒng)計(jì)圖,方便用戶進(jìn)行對(duì)比。同時(shí)這一功能也可以通過儀表盤這樣的功能去解決,也就說到國內(nèi)最愛做的數(shù)據(jù)可視化。



          1) 表格尺寸

          這是很多人都會(huì)忽略的一個(gè)點(diǎn),主要是大家對(duì)于表格的理解各不相同,也沒有具體的文章對(duì)于表格尺寸有個(gè)非常明確的限制,在這里分享一個(gè)我常用的數(shù)據(jù)點(diǎn),用于判斷表格設(shè)計(jì)的優(yōu)劣:表占比。

          表占比:表占比是指在1920x1080的屏幕大小下,表格占整個(gè)頁面的比例 即:表格面積 / 頁面面積 = 表占比

          這里需要指出,這里的表格面積是指,表頭+單元格+分頁(不包含工具欄)

          在我對(duì)十幾款主流B端軟件的總結(jié)分析中,驚奇的發(fā)現(xiàn)大多數(shù)產(chǎn)品「表占比」都是在65-70%之間,而一些不注重交互設(shè)計(jì)上的產(chǎn)品則會(huì)有所偏差。


          那為何65-70%是一個(gè)更為合理的數(shù)據(jù)?

          因?yàn)橹灰陧撁嬷谐霈F(xiàn)表格,就代表這個(gè)頁面一定是以表格作為核心。而表占比低于65%,代表頁面中的表格不處于內(nèi)容的核心,你需要重新審視這個(gè)頁面所需要傳達(dá)的功能。

          如果表占比高于80 %,則代表表格出現(xiàn)面積過大,要考慮用戶是否能夠接受如此大的占比。

          因此,設(shè)計(jì)的合理性來說,占比在65-70%之間能夠保證數(shù)據(jù)展示的合理性,同時(shí)這主要是針對(duì)CRM產(chǎn)品,大家可以使用這個(gè)占比去衡量自己設(shè)計(jì)的B端產(chǎn)品~

          當(dāng)然這樣的情況并不是一塵不變的,B端最大的魅力便是業(yè)務(wù)邏輯,我們來看一個(gè)看起來像是反面的例子:在銷幫幫中,表占比為:61.2% ,看似是一個(gè)并不合格的成績(jī),而且數(shù)據(jù)十分異常,讓我想要深挖,為何會(huì)如此的低。

          通過進(jìn)一步的分析,發(fā)現(xiàn)銷幫幫是一款與釘釘生態(tài)深度綁定的產(chǎn)品,其產(chǎn)品只能通過釘釘軟件進(jìn)行使用,而釘釘本身默認(rèn)并不是1080px的寬度,用戶打開并且全屏的尺寸偏小。默認(rèn)尺寸大小的不同,最終讓銷幫幫選擇去滿足業(yè)務(wù)而犧牲表占比去換取更多的功能。


          2) 工具欄設(shè)計(jì)

          因?yàn)樵贐端的工具欄的設(shè)計(jì)中,市面上缺少思路與方法的指導(dǎo),會(huì)出現(xiàn)非常多的問題,因此我展開講講工具欄的設(shè)計(jì),就不出單獨(dú)系列進(jìn)行講解~

          首先,對(duì)于工具欄,不同的產(chǎn)品,會(huì)對(duì)它有著不同的定義。比如在Apple MacOS 系統(tǒng)當(dāng)中經(jīng)常提到的Toolbars和Toolbar Items;又或者是Microsoft 產(chǎn)品中采取的Ribbon設(shè)計(jì)模式。在設(shè)計(jì)底層思路上截然不同,平臺(tái)級(jí)產(chǎn)品思路與定制化產(chǎn)品思路存在很多截然不同的做法,我們今天簡(jiǎn)單聊聊大家遇到過多的表格工具欄設(shè)計(jì),不做深挖~

          在表格工具欄的設(shè)計(jì)中,信息分區(qū)與頁面透氣是非常重要的兩個(gè)設(shè)計(jì)核心。

          信息分區(qū):

          因?yàn)楣ぞ邫谑怯蓸?biāo)題、篩選、搜索、視圖、新建等操作組成,而功能間的區(qū)分是工具欄設(shè)計(jì)的一個(gè)關(guān)鍵。

          當(dāng)一個(gè)工具欄中,需要將如此多的元素進(jìn)行組合排列時(shí),必然會(huì)有其排序的規(guī)則,這時(shí)我們就可以通過親密性原則,對(duì)工具欄中的信息進(jìn)行相應(yīng)區(qū)分


          在設(shè)計(jì)的親密性原則中,我們可以將功能相近的工具放在一起,比如:搜索與篩選都是數(shù)據(jù)過濾的操作,應(yīng)該放在同一分區(qū);

          同樣,工具欄也會(huì)存在一些功能點(diǎn)不太相近操作,我們就應(yīng)該通過分區(qū)將其間隔開,比如在下圖中,每個(gè)功能都將其用線條區(qū)分。

          當(dāng)然,在信息的去區(qū)分上,也有強(qiáng)弱兩種不同的方式,一種是通過線條直接分割;另一種是將工具欄進(jìn)行空間上的區(qū)分。因此可以通過信息區(qū)分去檢查你的工具欄設(shè)計(jì)是否合理。

          內(nèi)容呼吸:

          在一個(gè)定制化項(xiàng)目中,設(shè)計(jì)師一定要讓自己的頁面具有呼吸感。在B端業(yè)務(wù)中,信息量本身就已經(jīng)足夠龐大,而頁面的中的疏密關(guān)系就顯得尤為重要。

          通常列表都承載著繁雜、冗余的數(shù)據(jù),是一個(gè)信息集中的密;工具欄作為與表格關(guān)聯(lián)的上部分,呼吸感便成為表格的重要因素。通常在表頭處要將空間盡量分散開,這樣才能滿足整體的疏密關(guān)系。

          3) 表格設(shè)計(jì)

          經(jīng)常看到一些十分冗雜的表頭,甚至它喪失了表頭的真正含義。在實(shí)際情況下,盡可能明確、簡(jiǎn)單的講出表頭的內(nèi)容,以免造成表格的宣兵奪主。當(dāng)然也會(huì)存在一些專業(yè)術(shù)語,這時(shí)候,給一個(gè)Tooltips再合適不過。

          4) 單元格設(shè)計(jì)


          在表格中,單元格的行高是一直都是一個(gè)難以控制的變量,因?yàn)樾懈邥?huì)直接控制表格中的信息密度,而信息密度永遠(yuǎn)是一個(gè)無法量化的元素。而在我們?cè)O(shè)計(jì)過程中,需要采取盒子模型的方式,讓你的設(shè)計(jì)更加落地。


          知識(shí)點(diǎn)補(bǔ)充:盒子模型

          從前端開發(fā)而言,單元格是一個(gè)最為基礎(chǔ)的盒子模型。而HTML中的所有元素都可以看作是一個(gè)盒子。而我們所設(shè)計(jì)的頁面也正是由這個(gè)樣的原理去還原出來。


          Margin(外邊距):清除邊框外的區(qū)域,外邊距是透明的。


          Border(邊框):圍繞在內(nèi)邊距和內(nèi)容外的邊框。

          Padding(內(nèi)邊距):清除內(nèi)容周圍的區(qū)域,內(nèi)邊距是透明的。

          Content(內(nèi)容):盒子的內(nèi)容,顯示文本和圖像。


          a.單元格內(nèi)容

          內(nèi)容一般為文字、圖標(biāo)、頭像等等,而對(duì)于數(shù)據(jù)中你想要格外突出的內(nèi)容,這里稱為關(guān)鍵數(shù)據(jù)標(biāo)識(shí)別。從盒子模型的角度來看,它就是當(dāng)中的Connect,但單元格內(nèi)容中,一般會(huì)有一些處理技巧:

          關(guān)鍵數(shù)據(jù)標(biāo)識(shí):

          用戶在使用表格時(shí),會(huì)經(jīng)常去留意一些關(guān)鍵的數(shù)據(jù)。比如數(shù)據(jù)的狀態(tài)、變化的多少…

          如果在系統(tǒng)中,你能夠很明確知道用戶想要了解的數(shù)據(jù)時(shí),便可在關(guān)鍵數(shù)據(jù)上進(jìn)行標(biāo)識(shí)。這樣能夠幫助用戶快速定位到自己想要的信息,減少數(shù)據(jù)尋找所化的時(shí)間。但如果你對(duì)關(guān)鍵數(shù)據(jù)標(biāo)識(shí)出現(xiàn)誤判,這條數(shù)據(jù)便是一條十分干擾的數(shù)據(jù),因此在這里的設(shè)計(jì),需要慎重考慮。

          比如在飛書的成員與部門中,對(duì)于賬號(hào)狀態(tài)就是一個(gè)關(guān)鍵數(shù)據(jù)的標(biāo)識(shí),一方面用戶可以快速了解到已經(jīng)激活的成員,另一方面對(duì)于未激活狀態(tài)的進(jìn)行突出展示,同時(shí)給予用戶未激活后的再次發(fā)送提醒的操作,是對(duì)用戶使用的優(yōu)化提升。但,如果將不重要的數(shù)據(jù)進(jìn)行標(biāo)識(shí),例如手機(jī)號(hào),那么這將會(huì)是一個(gè)令人痛苦的設(shè)計(jì)。


          人員角色展示

          人員角色展示在表格中十分常見,通常會(huì)是以用戶名稱+頭像的形式展示。

          但在真實(shí)場(chǎng)景的表格中,頭像需要給予默認(rèn)的形式,比如釘釘、飛書就是以用戶“姓”作為頭像的默認(rèn)值,而在多個(gè)人員角色展示時(shí),就需要考慮特殊情況,無論是極值省略展示與獲取全量數(shù)據(jù)中,都需要我們進(jìn)行設(shè)計(jì)上的處理。


          進(jìn)度條


          進(jìn)度條是屬于關(guān)鍵數(shù)據(jù)的一種,它所涉及到的功能與圖表表格類似,能夠更直觀展示數(shù)據(jù)的占比,方便用戶對(duì)于多條數(shù)據(jù)間的值進(jìn)行判斷。進(jìn)度條常見于“容量、使用量”的數(shù)據(jù)中。

          表格空白處理

          表格中經(jīng)常出現(xiàn)空數(shù)據(jù)的情況,而表格的留白對(duì)于用戶而言會(huì)造成一些困擾,特別存在與頁面中的大面積留白,感覺像是數(shù)據(jù)沒有加載出。因此在表格空白數(shù)據(jù)處理上,可以使用“-”來進(jìn)行默認(rèn)展示。


          b.單元格行高


          單元格行高一般由:文字大小、文字行高、左右上下邊距共同組成。

          從盒子模型的角度來看,它就是其中的Padding。因此行高的確定,是由上方四個(gè)條件共同組成。

          文字大小:一般出現(xiàn)在表格中的文字大小都在12-16px之間,通常13、14px最為常見,建議大家設(shè)計(jì)也在此范疇內(nèi)。


          文字行高: 行高是一行文本垂直方向的高度,這個(gè)高度和字高無關(guān),文字內(nèi)容水平居中。可設(shè)置為字號(hào)的1.2-1.8倍,文字與分割線間距離可以設(shè)定為字號(hào)的1-1.5倍。

          邊距(Padding):表格中的邊距分為左上右下四個(gè)方向,而左上右下恰好就是對(duì)應(yīng)前端去編寫Padding代碼的順序,在對(duì)頁面驗(yàn)收時(shí),便可采取這樣的形式。

          單元格行高可配置:單元格行高直接影響著信息排列的密度,而在實(shí)際業(yè)務(wù)中,真正落地也有著不同的做法。

          在對(duì)定制化項(xiàng)目的開發(fā)中,通常會(huì)設(shè)計(jì)一套設(shè)計(jì)師認(rèn)為更加合理的單元格高度,一般為32px-56px區(qū)間內(nèi),而在很多通用化產(chǎn)品中,存在多個(gè)設(shè)備屏幕分辨率的差異,為了讓每一個(gè)分辨率下的產(chǎn)品都能夠有較好的展示效果,于是乎將選擇權(quán)交給用戶,在表格左下角會(huì)設(shè)置舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足需求,使得表格更加落地合理。


          總結(jié):整個(gè)單元格的行高,就是由這三部分組成,它們的嵌套與組合,所形成了單元格的行高


          c.表格分割

          在表格設(shè)計(jì)當(dāng)中,每一條線都有著它存在的意義。

          當(dāng)表格中展示橫線;隱藏縱線。

          用戶的橫向閱讀體驗(yàn)更佳,強(qiáng)調(diào)一條數(shù)據(jù)的完整性,能夠讓用戶進(jìn)行快速的對(duì)應(yīng)。

          當(dāng)表格中展示縱線;隱藏橫線。

          用戶的縱向閱讀體驗(yàn)更佳,強(qiáng)調(diào)數(shù)據(jù)上下間的對(duì)比,能夠讓用戶找到同一緯度數(shù)據(jù)下的對(duì)比。


          比如在一個(gè)組織架構(gòu)的成員列表中,我相信大家都設(shè)計(jì)過類似頁面,同樣的設(shè)計(jì)方式,我一個(gè)采取展示橫線、一個(gè)展示縱線,結(jié)果明顯,我成員需要閱讀完整條數(shù)據(jù),因此橫線會(huì)更加合理。

          當(dāng)然,在我們?nèi)粘5脑O(shè)計(jì)中,展示橫線的場(chǎng)景顯然會(huì)更多,但我們?nèi)粘J褂脮r(shí),數(shù)據(jù)對(duì)應(yīng)的場(chǎng)景還會(huì)更多這是需要有更強(qiáng)的設(shè)計(jì)形式:

          d.行、列凍結(jié)


          當(dāng)表格的行與列的數(shù)量過多時(shí),會(huì)導(dǎo)致一屏展示不下,而表格中的關(guān)鍵信息與操作是需要在任何時(shí)候都展示,這是采取行、列凍結(jié),能讓用戶快速觸達(dá)。

          表頭凍結(jié):通常出現(xiàn)在垂直滾動(dòng)時(shí),通過固定表頭的信息,能夠讓用戶閱讀時(shí)對(duì)應(yīng)不同的數(shù)據(jù),使用戶更好理解數(shù)據(jù)。

          首尾凍結(jié):通常出現(xiàn)在水平滾動(dòng),通過固定首列的主屬性字段以及尾列的數(shù)據(jù)操作,來滿足用戶對(duì)于一列數(shù)據(jù)的認(rèn)知,從而使用戶進(jìn)行快速操作。


          5) 分頁設(shè)計(jì)

          在對(duì)分頁設(shè)計(jì)的分析中,我們需要對(duì)分頁中的元素進(jìn)行拆解,才能明白分頁的類型所帶來的不同。

          表格信息:會(huì)展示表格信息當(dāng)中的數(shù)據(jù)總量、更新時(shí)間、默認(rèn)排序方式等...


          數(shù)據(jù)總量主要展示用戶需要瀏覽的內(nèi)容的總量;常見于管理后臺(tái)搜索、篩選符合條件的數(shù)據(jù)記錄時(shí),搜索結(jié)果頁通常會(huì)展示這個(gè)信息,這讓銷售人員在操作時(shí)有心理預(yù)期。

          更新時(shí)間主要是展示用戶當(dāng)前表格所操作時(shí)的日期時(shí)間;常見于金融類產(chǎn)品中,他們對(duì)于表格中數(shù)據(jù)的時(shí)效性尤為關(guān)注,這樣可以方便用戶對(duì)表格數(shù)據(jù)中的有效性進(jìn)行判斷

          默認(rèn)排序方式主要是展示表格中是按照哪一個(gè)字段進(jìn)行的排序;通常這種做法多出現(xiàn)于表頭直接展示icon,但對(duì)于可配置化的產(chǎn)品而言,隨著列數(shù)的增多,你越來越找不到你想要的默認(rèn)排序方式,因此在表格的固定位置展示,就再好不過(記住,只針對(duì)特定場(chǎng)景)


          頁面展示數(shù)量:結(jié)構(gòu)為「X條/頁」

          它能控制每個(gè)頁面展示多少條數(shù)據(jù);當(dāng)在系統(tǒng)中有很多數(shù)據(jù)時(shí),你可以直接通過「頁面展示數(shù)據(jù) * 分頁總數(shù)」 直接算出整個(gè)表格的數(shù)據(jù)總和。


          上一頁和下一頁翻頁:分頁中基本組成元素通過用戶點(diǎn)擊上一頁、下一頁的按鈕,實(shí)現(xiàn)表格的翻頁功能。翻頁通常會(huì)根據(jù)場(chǎng)景不同,去省略翻頁中的不同元素,比如在下面馬上那個(gè)講到的三種翻頁類型,但是上一頁和下一頁是絕對(duì)不可省略的。翻頁也如同你翻書一樣,可以進(jìn)行對(duì)數(shù)據(jù)的逐頁閱讀,遵從用戶之前的使用習(xí)慣。


          當(dāng)前頁碼:當(dāng)前頁碼說明了頁面中數(shù)據(jù)當(dāng)前所處的位置,方便用戶進(jìn)行翻頁的操作。


          相鄰頁碼展示:相鄰頁碼通常展示前后兩頁,比如你在第6頁時(shí),頁面需要展示:4、5、6、7、8;但頁碼在第1頁時(shí),就需要展示:1、2、3、4、5;頁尾同理。


          更多分頁:當(dāng)表格數(shù)據(jù)過多時(shí),就需要使用分頁,同樣,當(dāng)分頁過多時(shí),我們需要進(jìn)行處理,就是省略,采用更多分頁,去展示多余的分頁情況,當(dāng)用戶需要查看更多的分頁,點(diǎn)擊更多圖標(biāo)即可。


          總頁數(shù):代表大概會(huì)有多少頁此類數(shù)據(jù),通過使用總頁數(shù)才能讓用戶知道

          總頁數(shù)說明了內(nèi)容一共有多少頁,就像一本紙質(zhì)書有總頁數(shù),一本有聲書有總時(shí)長(zhǎng);通過這個(gè)元素,用戶才能了解內(nèi)容的多少,對(duì)整理內(nèi)容有個(gè)把握。


          頁碼跳轉(zhuǎn):頁碼跳轉(zhuǎn)幫助用戶從當(dāng)前頁面跳轉(zhuǎn)到其他某個(gè)頁面;比如用戶在搜索了某件商品,按銷量排序,這時(shí)瀏覽到了第15頁,滿意度越來越低;于是打算從前5頁選一個(gè),這時(shí)就能通過頁碼跳轉(zhuǎn)快速跳轉(zhuǎn)到第1-5頁了。


          簡(jiǎn)潔型:


          當(dāng)分頁數(shù)量較少時(shí),通常在7頁以內(nèi),就只有最基礎(chǔ)的展示:上一頁、分頁數(shù)量、下一頁。

          迷你型:

          當(dāng)頁面空間不足或者降低分頁的視覺影響時(shí),可以采用迷你型,主要為當(dāng)前頁/總頁數(shù),可以直接跳轉(zhuǎn)到某頁面。

          完整型:

          當(dāng)表格數(shù)據(jù)較多,為了滿足更多的用戶需求,可以根據(jù)需求選擇分頁類型。比較完整的分頁還包括如下功能:顯示總數(shù)、調(diào)整每頁顯示條數(shù)、直接跳轉(zhuǎn)到某頁。完整型的雖然滿足各種功能需求,但是所占空間較大,所以我們要根據(jù)自己的需求合理拆分使用。

          分頁固定:

          在表格中使用分頁,除了選擇合理的分頁類型外,我們還需要注意當(dāng)數(shù)據(jù)過多的時(shí)候,是否要固定分頁。這個(gè)需要根據(jù)需求來決定,如果用戶翻頁很頻繁,表格數(shù)據(jù)又特別長(zhǎng),就可以考慮分頁固定在底部,免得每次用戶翻頁都要跑到表格的最底部才能分頁,還可以在表頭也放迷你型分頁。但通常在設(shè)計(jì)表格的時(shí)候就沒有固定,也很少使用表頭分頁,所以根據(jù)需求來定。同樣按鈕的設(shè)計(jì)也會(huì)存在類似的情況。

          另外就是當(dāng)數(shù)量過少時(shí),只有一頁或者無數(shù)據(jù)的時(shí)候,我們是不需要分頁的,這個(gè)時(shí)候最好去掉分頁,展示在這里沒有什么意義了。但很多時(shí)候我們?cè)O(shè)計(jì)沒有做區(qū)分,開發(fā)也就不管了。



          老讀者都知道,我會(huì)反復(fù)去強(qiáng)調(diào)“場(chǎng)景”這一概念(比如在導(dǎo)航菜單、篩選、彈窗、圖標(biāo)中經(jīng)常提到這一詞),因?yàn)槟阒挥忻靼子脩粽嬲臉I(yè)務(wù)場(chǎng)景,才能夠真正的明白用戶的痛點(diǎn)。我們回到表格中,在表格的場(chǎng)景主要分為五類不同場(chǎng)景:數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計(jì)與通用場(chǎng)景。我會(huì)通過不同場(chǎng)景的梳理分析我們?cè)诓煌瑘?chǎng)景中存在那些優(yōu)化點(diǎn),可以進(jìn)行深入探討。

          1) 數(shù)據(jù)瀏覽


          在數(shù)據(jù)瀏覽的場(chǎng)景中,本質(zhì)上是對(duì)大量數(shù)據(jù)進(jìn)行尋找與確認(rèn)。用戶需要在此場(chǎng)景下進(jìn)行高效準(zhǔn)確的數(shù)據(jù)查找。而伴隨著用戶的尋找,就需要使用表格當(dāng)中的工具進(jìn)行輔助查找,比如篩選、搜索,這些工具的出現(xiàn),都能夠幫助用戶進(jìn)行數(shù)據(jù)的清洗,使得用戶想要的數(shù)據(jù)能夠快速的被找到。


          比如:我們公司的銷售人員在每天早上,都需要去 check in 今天自己所要跟進(jìn)、回訪的客戶,銷售人員就會(huì)通過表格中的各種工具,去幫助銷售人員找到自己想要的那部分?jǐn)?shù)據(jù)。

          常見行為及設(shè)計(jì)點(diǎn):

          數(shù)據(jù)篩選瀏覽:通過自己對(duì)數(shù)據(jù)的一定了解,結(jié)合各種篩選條件,配合得到用戶想要的篩選結(jié)果。

          數(shù)據(jù)多選:用戶可以通過多選,為他尋找的數(shù)據(jù)進(jìn)行標(biāo)記,方便之后的操作。


          2) 數(shù)據(jù)新增

          數(shù)據(jù)新增本質(zhì)上是將復(fù)雜的數(shù)據(jù)結(jié)構(gòu),通過系統(tǒng)字段類型的相應(yīng)規(guī)則,錄入保存到系統(tǒng)中。這也就我們常說的增刪改查的“增”


          比如:銷售人員在對(duì)新增的客戶進(jìn)行登記時(shí),需要登記公司名稱,聯(lián)系人,聯(lián)系方式,跟進(jìn)記錄等等。且需要不斷更新跟進(jìn)記錄,因此銷售人員在表格上的新增是一個(gè)非常高頻操作~


          3) 數(shù)據(jù)操作

          數(shù)據(jù)操作分為對(duì)單個(gè)數(shù)據(jù)的操作、單行數(shù)據(jù)的操作、多行數(shù)據(jù)的操作三種情況

          單個(gè)數(shù)據(jù)的操作,就是我們常見的快捷編輯,可以點(diǎn)擊快捷編輯按鈕,對(duì)單個(gè)數(shù)據(jù)進(jìn)行錄入,

          為何需要快捷編輯,在銷售使用場(chǎng)景中,使用表格去編輯一條信息是一個(gè)循序漸進(jìn)的過程,比如在對(duì)客戶進(jìn)行溝通時(shí),數(shù)據(jù)的不斷更改,跟進(jìn)內(nèi)容也在不停修改,導(dǎo)致用戶需要每次進(jìn)入用戶詳情點(diǎn)擊編輯之后才能進(jìn)行操作,而在表格內(nèi)進(jìn)行快捷編輯直接滿足實(shí)時(shí)編輯的需求,在交互層面上這是一個(gè)非常OK的需求

          但落到開發(fā)層面上,就意味著要在用戶進(jìn)入表格中去判斷權(quán)限,才能讓用戶知道是否能夠點(diǎn),點(diǎn)擊過后需要判斷字段屬性,明確該字段是與哪些字段進(jìn)行聯(lián)動(dòng)


          單條數(shù)據(jù)主要通常會(huì)采取兩種路徑進(jìn)行操作:進(jìn)入用戶詳情頁界面,對(duì)一整列數(shù)據(jù)進(jìn)行編輯,這種情況通常都需要多個(gè)數(shù)據(jù)進(jìn)行處理,因此進(jìn)入編輯頁面更容易尋找,同時(shí)也是最為正常的一種做法


          多行數(shù)據(jù)操作主要采取多選過后的操作方式:當(dāng)用戶想要對(duì)多條數(shù)據(jù)進(jìn)行操作時(shí),就需要對(duì)多個(gè)數(shù)據(jù)進(jìn)行checkbox 的勾選,從而滿足多行操作的需求


          4) 數(shù)據(jù)統(tǒng)計(jì)

          數(shù)據(jù)統(tǒng)計(jì)主要針對(duì)用戶需要審查分析。目的是在通過大量的數(shù)據(jù)分析去得出自己的某一些結(jié)論,由于關(guān)注的數(shù)據(jù)會(huì)有主次之分,數(shù)據(jù)與數(shù)據(jù)之間也會(huì)有內(nèi)在聯(lián)系,用戶會(huì)更加跳躍地掃視頁面,而且會(huì)更加反復(fù)地審查數(shù)據(jù)。例如,銷售人員需要查閱本月的銷售情況,進(jìn)入到商品銷售明細(xì)表中,分析本月的經(jīng)營狀況,若其中某些商品


          了解了表格的使用場(chǎng)景過后,針對(duì)不同的場(chǎng)景,在設(shè)計(jì)上它的思路就會(huì)有所不同

          使用上就會(huì)有不同的設(shè)計(jì)思路。由于篇幅原因,我們主要了解了表格的基本形態(tài),如果對(duì)于表格的場(chǎng)景還不太清楚,我會(huì)在下篇中與大家通過20個(gè)問題,了解B端表格中究竟應(yīng)該如何設(shè)計(jì)~


          我是CE青年

          一個(gè)2 B行業(yè)的2B設(shè)計(jì)師

          我們下篇文章再見

          格,這個(gè)其實(shí)對(duì)于做過網(wǎng)站的人來說,并不陌生,而且可以說是最為常用的各種列表的展示,有時(shí)候也會(huì)因?yàn)橛脩艋蛘呃习宓男枨蠖械筋^疼。下面我們來看一下,Bootstrap已經(jīng)為我們準(zhǔn)備那些類型的表格呢?如下所示:

          3.1、基本案例

          為任意<table>標(biāo)簽添加.table可以為其賦予基本的樣式—少量的內(nèi)補(bǔ)(padding)和水平方向的分隔線。這種方式看起來很多余!?但是我們覺得,表格元素使用的很廣泛,如果我們?yōu)槠滟x予默認(rèn)樣式可能會(huì)影響例如日歷和日期選擇之類的插件,所以我們選擇將其樣式獨(dú)立出來。

          一個(gè)簡(jiǎn)單的Table示例,代碼如下:

          <div class="container">

          <table class="table">

          <caption>Table基本案例</caption>

          <thead>

          <tr>

          <th>First Name</th>

          <th>Last Name</th>

          <th>User Name</th>

          </tr>

          </thead>

          <tbody>

          <tr>

          <td>aehyok</td>

          <td>leo</td>

          <td>@aehyok</td>

          </tr>

          <tr>

          <td>lynn</td>

          <td>thl</td>

          <td>@lynn</td>

          </tr>

          </tbody>

          </table>

          </div>

          效果:

          3.2、條紋狀表格

          利用.table-striped可以給<tbody>之內(nèi)的每一行增加斑馬條紋樣式。在上面示例的table元素上再添加一個(gè) 樣式類 <table class="table table-striped">。看現(xiàn)在的效果,還是有點(diǎn)變化的。

          3.3、帶邊框的表格

          利用.table-bordered為表格和其中的每個(gè)單元格增加邊框。

          還是將第一個(gè)示例中的table元素上再添加一個(gè)樣式類

          <table class="table table-bordered">

          效果:

          3.4、鼠標(biāo)懸停

          利用.table-hover可以讓<tbody>中的每一行響應(yīng)鼠標(biāo)懸停狀態(tài)。

          <table class="table table-hover">

          將鼠標(biāo)移到那一行那一行就會(huì)有效果的,如下圖所示:

          3.5、緊縮表格

          利用.table-condensed可以讓表格更加緊湊,單元格中的內(nèi)部(padding)均會(huì)減半。

          <table class="table table-condensed">

          這個(gè)效果沒那么明顯,主要就是單元格中內(nèi)容padding減半了。

          3.6、表格狀態(tài)

          通過這些狀態(tài)class可以為行貨單元格設(shè)置顏色。

          示例代碼:

          <table class="table table-condensed">

          <caption>表格狀態(tài)</caption>

          <thead>

          <tr>

          <th>#</th>

          <th>First Name</th>

          <th>Last Name</th>

          <th>User Name</th>

          </tr>

          </thead>

          <tbody>

          <tr class="active">

          <td>1</td>

          <td>aehyok</td>

          <td>leo</td>

          <td>@aehyok</td>

          </tr>

          <tr class="success">

          <td>2</td>

          <td>lynn</td>

          <td>thl</td>

          <td>@lynn</td>

          </tr>

          <tr class="warning">

          <td>3</td>

          <td>Amdy</td>

          <td>Amy</td>

          <td>@Amdy</td>

          </tr>

          <tr class="danger">

          <td>4</td>

          <td>Amdy</td>

          <td>Amy</td>

          <td>@Amdy</td>

          </tr>

          <tr >

          <td class="success">5</td>

          <td class="danger">Amdy</td>

          <td class="warning">Amy</td>

          <td class="active">@Amdy</td>

          </tr>

          </tbody>

          </table>

          效果如下:

          3.7、響應(yīng)式表格

          將任何.table包裹在.table-responsive中即可創(chuàng)建響應(yīng)式表格,其會(huì)在小屏幕設(shè)備上(小于768px)水平滾動(dòng)。當(dāng)屏幕大于768px寬度時(shí),水平滾動(dòng)條消失。

          <div class="table-responsive">

          <table class="table">

          <caption>響應(yīng)式表格</caption>

          <thead>

          <tr>

          <th>#</th>

          <th>First Name</th>

          <th>Last Name</th>

          <th>User Name</th>

          </tr>

          </thead>

          <tbody>

          <tr class="active">

          <td>1</td>

          <td>aehyok</td>

          <td>leo</td>

          <td>@aehyok</td>

          </tr>

          <tr class="success">

          <td>2</td>

          <td>lynn</td>

          <td>thl</td>

          <td>@lynn</td>

          </tr>

          <tr class="warning">

          <td>3</td>

          <td>Amdy</td>

          <td>Amy</td>

          <td>@Amdy</td>

          </tr>

          <tr class="danger">

          <td>4</td>

          <td>Amdy</td>

          <td>Amy</td>

          <td>@Amdy</td>

          </tr>

          <tr >

          <td class="success">5</td>

          <td class="danger">Amdy</td>

          <td class="warning">Amy</td>

          <td class="active">@Amdy</td>

          </tr>

          </tbody>

          </table>

          </div>

          效果:

          發(fā)現(xiàn)出現(xiàn)滾動(dòng)條了!

          總結(jié)

          1.基本案例

          2.條紋狀表格

          3.帶邊框的表格

          4.鼠標(biāo)懸停

          5.緊縮表格

          6.狀態(tài)class

          7.響應(yīng)式表格

          一篇文章,小編結(jié)合自己的實(shí)際和各種面試經(jīng)歷總結(jié)整理了一些比較重點(diǎn)和常用的CSS知識(shí)點(diǎn),大伙可以邊看邊動(dòng)手寫一寫,實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)嘛。

          一、px,em,rem、vw、vh

          1.px (pixel,像素)

          是一個(gè)虛擬長(zhǎng)度單位,是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位,如果px要換算成物理長(zhǎng)度,需要指定精度DPI(Dots Per Inch,每英寸像素?cái)?shù)),在掃描打印時(shí)一般都有DPI可選。Windows系統(tǒng)默認(rèn)是96dpi,Apple系統(tǒng)默認(rèn)是72dpi。

          2.em(相對(duì)長(zhǎng)度單位,相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸)

          是一個(gè)相對(duì)長(zhǎng)度單位,最初是指字母M的寬度,故名em。現(xiàn)指的是字符寬度的倍數(shù),用法類似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。

          3.rem(root em,根em)

          rem是一個(gè)相對(duì)單位,1rem等于html元素上字體設(shè)置的大小。我們只要設(shè)置html上font-size的大小,就可以改變r(jià)em所代表的大小。這樣我們就有了一個(gè)可控的統(tǒng)一參考系。我們現(xiàn)在有兩個(gè)目標(biāo):

          • rem單位所代表的尺寸大小和屏幕寬度成正比,也就是設(shè)置html元素的font-size和屏幕寬度成正比
          • rem單位和px單位很容易進(jìn)行換算,方便我們按照標(biāo)注稿寫css

          rem與em的區(qū)別:

          • rem是相對(duì)于根元素(html)的字體大小,而em是相對(duì)于其父元素的字體大小
          • em最多取到小數(shù)點(diǎn)的后三位

          4.vw、vh

          css3中引入了一個(gè)新的單位vw/vh,與視圖窗口有關(guān),vw表示相對(duì)于視圖窗口的寬度,vh表示相對(duì)于視圖窗口高度,除了vw和vh外,還有vmin和vmax兩個(gè)相關(guān)的單位。各個(gè)單位具體的含義如下:

          這里我們發(fā)現(xiàn)視窗寬高都是100vw/100vh,那么vw或者vh,下簡(jiǎn)稱vw,很類似百分比單位。vw和%的區(qū)別為:

          二、圣杯布局-雙飛翼布局

          圣杯布局與雙飛翼布局針對(duì)的都是三列左右欄固定中間欄邊框自適應(yīng)的網(wǎng)頁布局

          • 三列布局,中間寬度自適應(yīng),兩邊定寬
          • 中間欄要在瀏覽器中優(yōu)先展示渲染
          • 允許任意列的高度最高

          1.相對(duì)布局

          .container { width: 100%; min-height: 300px; padding: 0 60px; box-sizing: border-box;}
          .container > div { position: relative; float: left;}
          .left, .right { width: 60px; height: 100%;}
          .left { left: -60px; margin-left: -100%;}
          .right { right: 0; margin-right: -100%;}
          .main { width: 100%; height: 100%;}
          

          2.flex布局

          .container {
           width: 100%;
           min-height: 300px;
           display: flex;
          }
          .main {
           flex-grow: 1;
          }
          .left {
           order: -1;
           flex-basis: 60px;
          }
          .right {
           flex-basis: 60px;
          }
          

          3.絕對(duì)布局

          .container {
           width: 100%;
           min-height: 300px;
           position: relative;
          }
          .container > div {
           position: absolute;
          }
          .left, .right {
           width: 60px;
           height: 100%;
          }
          .main {
           width: calc(100% - 120px);
           height: 100%;
           left: 60px;
          }
          .left {
           left: 0;
          }
          .right {
           right: 0;
          }
          

          三、流式布局與響應(yīng)式布局

          流式布局使用非固定像素來定義網(wǎng)頁內(nèi)容,也就是百分比布局,通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進(jìn) 行伸縮,不受固定像素的限制,內(nèi)容向兩側(cè)填充。

          響應(yīng)式開發(fā)利用CSS3 中的 Media Query(媒介查詢),通過查詢 screen 的寬度來指定某個(gè)寬度區(qū)間的網(wǎng)頁布局。

          • 超小屏幕(移動(dòng)設(shè)備) 768px 以下
          • 小屏設(shè)備 768px-992px
          • 中等屏幕 992px-1200px
          • 寬屏設(shè)備 1200px 以上

          由于響應(yīng)式開發(fā)顯得繁瑣些,一般使用第三方響應(yīng)式框架來完成,比如 bootstrap 來完成一部分工作,當(dāng)然也 可以自己寫響應(yīng)式。

          四、CSS優(yōu)先級(jí)算法

          • 元素選擇符: 1
          • class選擇符: 10
          • id選擇符:100
          • 元素標(biāo)簽:1000
          1. !important聲明的樣式優(yōu)先級(jí)最高,如果沖突再進(jìn)行計(jì)算。
          2. 如果優(yōu)先級(jí)相同,則選擇最后出現(xiàn)的樣式。
          3. 繼承得到的樣式的優(yōu)先級(jí)最低。

          五、CSS3新增偽類有那些?

          1. p:first-of-type 選擇屬于其父元素的首個(gè)元素
          2. p:last-of-type 選擇屬于其父元素的最后元素
          3. p:only-of-type 選擇屬于其父元素唯一的元素
          4. p:only-child 選擇屬于其父元素的唯一子元素
          5. p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
          6. :enabled :disabled 表單控件的禁用狀態(tài)。
          7. :checked 單選框或復(fù)選框被選中。

          六、CSS3新特性

          1. RGBA和透明度
          2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
          3. word-wrap(對(duì)長(zhǎng)的不可分割單詞換行)word-wrap:break-word
          4. 文字陰影:text-shadow: 5px 5px 5px #FF0000;(水平陰影,垂直陰影,模糊距離,陰影顏色)
          5. font-face屬性:定義自己的字體
          6. 圓角(邊框半徑):border-radius 屬性用于創(chuàng)建圓角
          7. 邊框圖片:border-image: url(border.png) 30 30 round
          8. 盒陰影:box-shadow: 10px 10px 5px #888888
          9. 媒體查詢:定義兩套css,當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性

          七、CSS優(yōu)化、提高性能的方法有哪些?

          1. 避免過度約束
          2. 避免后代選擇符
          3. 避免鏈?zhǔn)竭x擇符
          4. 使用緊湊的語法
          5. 避免不必要的命名空間
          6. 避免不必要的重復(fù)
          7. 最好使用表示語義的名字。一個(gè)好的類名應(yīng)該是描述他是什么而不是像
          8. 避免!important,可以選擇其他選擇器
          9. 盡可能的精簡(jiǎn)規(guī)則,你可以合并不同類里的重復(fù)規(guī)則

          八、CSS動(dòng)畫

          CSS 中的 transform,transition 和 animation 是分開的三部分內(nèi)容,其中 transfrom 主要是控制元素變形,并沒有一個(gè)時(shí)間控制的概念,而 transition 和 animation 才是動(dòng)畫的部分,它們可以控制在一個(gè)時(shí)間段里,元素在兩個(gè)或以上的狀態(tài)切換的效果。

          1.transition

          transition 屬性:

          • transition-delay 延遲多久后開始動(dòng)畫
          • transition-duration 過渡動(dòng)畫的一個(gè)持續(xù)時(shí)間
          • transition-property 執(zhí)行動(dòng)畫對(duì)應(yīng)的屬性,例如 color,background 等,可以使用 all 來指定所有的屬性
          • transition-timing-function 隨著時(shí)間推進(jìn),動(dòng)畫變化軌跡的計(jì)算方式,常見的有:linear,ease,ease-in,ease-out,cubic-bezier(...) 等。

          transition 相關(guān)的事件

          transitionend 事件會(huì)在 transition 動(dòng)畫結(jié)束的時(shí)候觸發(fā)。通常我們會(huì)在動(dòng)畫結(jié)束后執(zhí)行一些方法,例如繼續(xù)下一個(gè)動(dòng)畫效果或者其他。Zepto.js 中的動(dòng)畫方法都是使用 CSS 動(dòng)畫屬性來處理,而其中動(dòng)畫運(yùn)行后的回調(diào)便應(yīng)該是使用這個(gè)事件來處理。

          2.animation

          雖然 transition已經(jīng)提供了很棒的動(dòng)畫效果了,但是我們只能夠控制從一個(gè)狀態(tài)到達(dá)另外一個(gè)狀態(tài),沒法來控制多個(gè)狀態(tài)的不斷變化,而 animation 而幫助我們實(shí)現(xiàn)了這一點(diǎn)。使用 animation 的前提是我們需要先使用 @keyframes 來定義一個(gè)動(dòng)畫效果,@keyframes 定義的規(guī)則可以用來控制動(dòng)畫過程中的各個(gè)狀態(tài)的情況,語法大抵是這個(gè)樣子:

          @keyframes test {
           from { left: 0; top: 0; }
           to { left: 100%; top: 100%; }
          }
          

          @keyframes 關(guān)鍵詞后跟動(dòng)畫的名字,然后是一個(gè)塊,塊中有動(dòng)畫進(jìn)度的各個(gè)選擇器,選擇器后的塊則依舊是我們常見的各個(gè) CSS 樣式屬性。

          animation 屬性:

          • animation-name 你需要的動(dòng)畫效果的 @keyframes 的名字。
          • animation-delay 和 transition-delay 一樣,動(dòng)畫延遲的時(shí)間。
          • animtaion-duration 和 transition-duration 一樣,動(dòng)畫持續(xù)的時(shí)間。
          • animation-direction 動(dòng)畫的一個(gè)方向控制。
          • 默認(rèn)是 normal,如果是上述的 left 從 0% 到 100%,那么默認(rèn)是從左到右。如果這個(gè)值是 reverse,那么便是從右到左

          由于 animation 提供了循環(huán)的控制,所以還有兩個(gè)值是 alternate 和 alternate-reverse,這兩個(gè)值會(huì)在每次循環(huán)開始的時(shí)候調(diào)轉(zhuǎn)動(dòng)畫方向,只不過是起始的方向不同。

          animation 相關(guān)事件

          可以通過綁定事件來監(jiān)聽 animation 的幾個(gè)狀態(tài),這些事件分別是:

          • animationstart 動(dòng)畫開始事件,如果有 delay 屬性的話,那么等到動(dòng)畫真正開始再觸發(fā),如果是沒有 delay,那么當(dāng)動(dòng)畫效果應(yīng)用到元素時(shí),這個(gè)事件會(huì)被觸發(fā)。
          • animationend 動(dòng)畫結(jié)束的事件,和 transitionend 類似。如果有多個(gè)動(dòng)畫,那么這個(gè)事件會(huì)觸發(fā)多次,像上邊的例子,這個(gè)事件會(huì)觸發(fā)三次。如果 animation-iteration-count 設(shè)置為 infinite,那么這個(gè)事件則不會(huì)被觸發(fā)。
          • animationiteration 動(dòng)畫循環(huán)一個(gè)生命周期結(jié)束的事件,和上一個(gè)事件不一樣的是,這個(gè)在每次循環(huán)結(jié)束一段動(dòng)畫時(shí)會(huì)觸發(fā),而不是整個(gè)動(dòng)畫結(jié)束時(shí)觸發(fā)。無限循環(huán)時(shí),除非 duration 為 0,否則這個(gè)事件會(huì)無限觸發(fā)

          九、BFC

          BFC全稱是Block Formatting Context,即塊格式化上下文。它是CSS2.1規(guī)范定義的,關(guān)于CSS渲染定位的一個(gè)概念。要明白BFC到底是什么,首先來看看什么是視覺格式化模型。

          視覺格式化模型

          視覺格式化模型(visual formatting model)是用來處理文檔并將它顯示在視覺媒體上的機(jī)制,它也是CSS中的一個(gè)概念。

          視覺格式化模型定義了盒(Box)的生成,盒主要包括了塊盒、行內(nèi)盒、匿名盒(沒有名字不能被選擇器選中的盒)以及一些實(shí)驗(yàn)性的盒(未來可能添加到規(guī)范中)。盒的類型由display屬性決定。

          怎樣才能形成BFC

          根元素或其它包含它的元素;

          浮動(dòng) (元素的float不為none);

          絕對(duì)定位元素 (元素的position為absolute或fixed);

          行內(nèi)塊inline-blocks(元素的 display: inline-block);

          表格單元格(元素的display: table-cell,HTML表格單元格默認(rèn)屬性);

          overflow的值不為visible的元素;

          彈性盒 flex boxes (元素的display: flex或inline-flex);

          但其中,最常見的就是overflow:hidden、float:left/right、position:absolute。也就是說,每次看到這些屬性的時(shí)候,就代表了該元素已經(jīng)創(chuàng)建了一個(gè)BFC了。

          瀏覽器對(duì)BFC區(qū)域的約束規(guī)則:

          1. 生成BFC元素的子元素會(huì)一個(gè)接一個(gè)的放置。
          2. 垂直方向上他們的起點(diǎn)是一個(gè)包含塊的頂部,兩個(gè)相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級(jí)元素的外邊距會(huì)折疊(Mastering margin collapsing)。
          3. 生成BFC元素的子元素中,每一個(gè)子元素左外邊距與包含塊的左邊界相接觸(對(duì)于從右到左的格式化,右外邊距接觸右邊界),即使浮動(dòng)元素也是如此(盡管子元素的內(nèi)容區(qū)域會(huì)由于浮動(dòng)而壓縮),除非這個(gè)子元素也創(chuàng)建了一個(gè)新的BFC(如它自身也是一個(gè)浮動(dòng)元素)。

          BFC是頁面上的一個(gè)隔離的獨(dú)立容器,容器里面的子元素不會(huì)影響到外面元素,反之亦然。我們可以利用BFC的這個(gè)特性來做很多事。

          十、flex 布局

          基本概念

          采用 Flex 布局的元素,稱為 Flex 容器(flex container),簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員,稱為 Flex 項(xiàng)目(flex item),簡(jiǎn)稱"項(xiàng)目"。

          容器默認(rèn)存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點(diǎn))叫做main start,結(jié)束位置叫做main end;交叉軸的開始位置叫做cross start,結(jié)束位置叫做cross end。

          項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size,占據(jù)的交叉軸空間叫做cross size。

          容器的屬性:

          1.flex-direction: 屬性決定主軸的方向(即項(xiàng)目的排列方向)

          • row(默認(rèn)值):主軸為水平方向,起點(diǎn)在左端。
          • row-reverse:主軸為水平方向,起點(diǎn)在右端。
          • column:主軸為垂直方向,起點(diǎn)在上沿。
          • column-reverse:主軸為垂直方向,起點(diǎn)在下沿。

          2.flex-wrap :默認(rèn)情況下,項(xiàng)目都排在一條線(又稱"軸線")上

          • nowrap(默認(rèn)):不換行。
          • wrap:換行,第一行在上方。
          • wrap-reverse:換行,第一行在下方。

          3.flex-flow:是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式

          4.justify-content:定義了項(xiàng)目在主軸上的對(duì)齊方式

          • flex-start(默認(rèn)值):左對(duì)齊
          • flex-end:右對(duì)齊
          • center: 居中
          • space-between:兩端對(duì)齊,項(xiàng)目之間的間隔都相等。
          • space-around:每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

          5.align-items:定義項(xiàng)目在交叉軸上如何對(duì)齊

          • flex-start:交叉軸的起點(diǎn)對(duì)齊。
          • flex-end:交叉軸的終點(diǎn)對(duì)齊。
          • center:交叉軸的中點(diǎn)對(duì)齊。
          • baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
          • stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度。

          6.align-content:定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線,該屬性不起作用

          • flex-start:與交叉軸的起點(diǎn)對(duì)齊。
          • flex-end:與交叉軸的終點(diǎn)對(duì)齊。
          • center:與交叉軸的中點(diǎn)對(duì)齊。
          • space-between:與交叉軸兩端對(duì)齊,軸線之間的間隔平均分布。
          • space-around:每根軸線兩側(cè)的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
          • stretch(默認(rèn)值):軸線占滿整個(gè)交叉軸。

          項(xiàng)目的屬性

          1. order屬性定義項(xiàng)目的排列順序。數(shù)值越小,排列越靠前,默認(rèn)為0。
          2. flex-shrink屬性定義了項(xiàng)目的縮小比例,默認(rèn)為1,即如果空間不足,該項(xiàng)目將縮小。
          3. flex-basis屬性定義了在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間(main size)。
          4. flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫,默認(rèn)值為0 1 auto。
          5. align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,可覆蓋align-items屬性。

          該屬性可能取6個(gè)值,除了auto,其他都與align-items屬性完全一致。

          十一、Grid 布局總結(jié)

          grid 布局是 css 中的一種新的布局方式,對(duì)盒子和盒子內(nèi)容的位置及尺寸有很強(qiáng)的控制能力。與 flex 不同,flex 著重于單軸,而 grid 適應(yīng)于多軸,下面就來做個(gè)簡(jiǎn)單的介紹。

          flex 布局示意

          grid 布局示意

          基本概念

          設(shè)置 display: grid; 的元素稱為容器,它的直接子元素稱為項(xiàng)目,但注意子孫元素不是項(xiàng)目。

          • grid line:網(wǎng)格線,構(gòu)成 grid 布局的結(jié)構(gòu),分為水平和豎直兩種。
          • grid track:兩條相鄰網(wǎng)格線之間的空間,可以認(rèn)為是一行或者一列。
          • grid cell:兩條相鄰行和相鄰列之間分割線組成的空間,是 grid 布局中的一個(gè)單元。
          • grid area:四條網(wǎng)格線包裹的全部空間,任意數(shù)量的 grid cell 組成一個(gè) grid area。

          容器屬性

          grid 容器的屬性還是有點(diǎn)多的,一共有 18 個(gè),但是很多可以通過簡(jiǎn)寫完成,所以也不用太緊張。

          • grid-template 系列
          1. grid-template-columns
          2. grid-template-rows
          3. grid-template-areas
          • grid-gap 系列
          1. grid-column-gap
          2. grid-row-gap
          • place-items 系列
          1. justify-items
          2. align-items
          • place-content 系列
          1. justify-content
          2. align-content
          • grid 系列
          1. grid-auto-columns
          2. grid-auto-rows
          3. grid-auto-flow

          十二、box-sizing

          設(shè)置CSS盒模型為標(biāo)準(zhǔn)模型或IE模型。標(biāo)準(zhǔn)模型的寬度只包括content,而IE盒模型包括border和padding,box-sizing屬性可以為三個(gè)值之一:

          • content-box,默認(rèn)值,只計(jì)算內(nèi)容的寬度,border和padding不計(jì)算入width之內(nèi)
          • padding-box,padding計(jì)算入寬度內(nèi)
          • border-box,border和padding計(jì)算入寬度之內(nèi)

          十三、硬件加速

          有時(shí)候動(dòng)畫可能會(huì)導(dǎo)致用戶的電腦卡頓,你可以在特定元素中使用硬件加速來避免這個(gè)問題:

          .block {
           transform: translateZ(0);
          }
          

          你并不會(huì)察覺有什么不同,但瀏覽器會(huì)為這個(gè)元素進(jìn)行3D硬件加速,在will-change這個(gè)特殊屬性未被全面支持之前,這個(gè)方法還是很有用的。

          小結(jié)

          這里總結(jié)CSS中比較常用也是比較重要的十三個(gè)知識(shí)點(diǎn),內(nèi)容比較多,希望大伙能多看多寫,好的程序員是寫出來的,這也算是小編對(duì)自己的激勵(lì)吧。


          上一篇:焦我辦app
          下一篇:JSP 自定義標(biāo)簽
          主站蜘蛛池模板: 精品不卡一区中文字幕| 亚洲爆乳精品无码一区二区| 亚洲爆乳精品无码一区二区三区 | 久久久久久综合一区中文字幕| 日韩一区在线视频| 国产一区二区三区影院| 成人区精品一区二区不卡| 免费看无码自慰一区二区| 国产成人精品第一区二区| 亚洲一区二区三区偷拍女厕| 一区二区三区在线视频播放| 日韩一区二区三区视频| 国产在线精品一区在线观看| 亚洲A∨精品一区二区三区下载| 亚洲一区无码中文字幕乱码| 亚洲国产精品一区第二页| 亚洲色欲一区二区三区在线观看 | 久久久久人妻一区精品| 日韩一区二区三区在线精品| 日本中文字幕在线视频一区| 国产一区二区三区在线看片| 日韩精品福利视频一区二区三区| 精品国产一区二区三区| 国产精品综合一区二区| 精品视频一区在线观看| 精品3d动漫视频一区在线观看| 国产免费私拍一区二区三区| 合区精品久久久中文字幕一区| 亚洲一区二区三区国产精品| 人妻少妇AV无码一区二区| 久久精品国产一区| 亚洲一区免费视频| 日本一区中文字幕日本一二三区视频 | 蜜桃视频一区二区三区在线观看| 亚洲AV福利天堂一区二区三| 亚洲视频一区在线播放| 国产一区二区在线| 亚洲国产高清在线一区二区三区| 在线观看午夜亚洲一区| 高清国产精品人妻一区二区| 国产精品揄拍一区二区|