B端體驗(yàn)設(shè)計(jì)專題-表格篇

B端體驗(yàn)設(shè)計(jì)專題一一表格篇B端企業(yè)經(jīng)常會用到表格，表格在日常工作中能示范作用起到很大作用，對于數(shù)據(jù)的整理以及總結(jié)都很有用，也能提高我們的整體素質(zhì)；本文分享了關(guān)于B端樂趣設(shè)計(jì)中的表格設(shè)計(jì)，我們一起不難看出一下。做ToB的同行都知道，降本增效一直是企業(yè)中所后臺繞不開的熱點(diǎn)話題，現(xiàn)任公司業(yè)務(wù)涵蓋倉（WMS）、運(yùn)（TMS）、配、人（HRM），所編出項(xiàng)目雖功能各異，但是有一個(gè)共同點(diǎn)——大量使用表格。本文受有贊設(shè)計(jì)師室內(nèi)設(shè)計(jì)美芳的啟發(fā)，將我日常工作通過優(yōu)化表格來提效的思路整理成文章，一方面是對企業(yè)后臺的數(shù)據(jù)表格作一個(gè)簡單的階段性總結(jié)，另一方面給部門制做一個(gè)年終分享。表格是彰顯數(shù)據(jù)最為清晰、高效的形式之一，它也是B端產(chǎn)品和設(shè)計(jì)師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他桌面元素一起協(xié)同。在B端中后臺中，常應(yīng)用于：表格的結(jié)構(gòu)通常表格的組成元素以及或者相關(guān)機(jī)構(gòu)元素會有多個(gè)部分，根據(jù)粒度的用戶目標(biāo)將其解構(gòu)三部分：

設(shè)計(jì)原則與目標(biāo)首先，我們要明確，什么是一個(gè)聽話的表格？我認(rèn)為好的信息表格應(yīng)便于用戶對信息進(jìn)行快速掃描、查詢、過濾、分析等操作，以獲取深刻認(rèn)知并快速準(zhǔn)確完成目標(biāo)任務(wù)。圖表是為可讀性而生的，一個(gè)結(jié)構(gòu)的布局能大大提升用戶對信息的接收速度和理解程度；因此，拆分到表格的構(gòu)成就是，設(shè)計(jì)目標(biāo)就是：數(shù)據(jù)查看區(qū)-易讀、易瀏覽、易對比；數(shù)據(jù)檢索區(qū)-易查找；數(shù)據(jù)操作區(qū)-易操作。故喀松索雄力!儺刑5卬褪雄力!儺事宜&曷匈鑿、對就鼻**事宜&曷匈鑿、對就鼻**數(shù)據(jù)檢索區(qū)可以看作表格的導(dǎo)航按預(yù)定目標(biāo)過濾出有某種具有數(shù)據(jù)檢索區(qū)可以看作表格的導(dǎo)航按預(yù)定目標(biāo)過濾出有某種具有特定性質(zhì)的數(shù)據(jù)，將操操作員所關(guān)注的數(shù)據(jù)展示到前面，便于快速查看查看、對比、分析內(nèi)部信息的操作過程；從用戶角度出發(fā)，按不同粒度的數(shù)據(jù)過濾方式分為3種方式，依序?qū)?yīng)不同程度的用戶。搜索 *口審相對照曲 一 先亂￡蹶灣旭常目府唯一悔■總的字段赭選j T案普麗—耳滯―美司機(jī)華標(biāo)3E *無宰■的位褶 *?甘隨優(yōu)若的流椅搜索搜索可以幫助廣告主在巨大的信息首要目標(biāo)池中縮小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。由于考慮到用戶需要手動輸入，很難保證精準(zhǔn)搜索，原則上所有搜索均為模糊搜索，必要精準(zhǔn)搜索的地方使用篩選功能，給用戶提供挑選選項(xiàng)；通常上端搜索欄質(zhì)量范圍不被限定搜索范圍，可以全部搜索。a.模糊搜索b.帶標(biāo)簽的搜索現(xiàn)標(biāo)茶的圖索I就物單號事到捌各秣攢掏?號電密幡|?篩選

篩選可以協(xié)助用戶縮小數(shù)據(jù)縮減范圍，逐步找到想要的內(nèi)容；或者當(dāng)用戶的目標(biāo)就是查看范圍的數(shù)據(jù)時(shí)，篩選將是一種十分快捷的方式；在企業(yè)級中后臺產(chǎn)品中，篩選的使用場景通常是后一種。wmw??!s*fifa.wmw??!s*fif女牌圈作人力占者4EMb.平鋪篩選芾國民日 ￡v *n- ftnz =0三□□ass mq^'口七 閉口^ad.hflavnM h 址高& 本* *r *—n-i藥e■可看*量3由工相事 現(xiàn)臭二 哀,三 下加！ I*rtc.表頭篩選標(biāo)簽使用場景：標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒有交集的數(shù)據(jù)內(nèi)容；主要樣式有基礎(chǔ)、卡片、膠囊等。優(yōu)點(diǎn)：根據(jù)標(biāo)簽，可以極為清楚知道劃分，切換tab就可以篩選內(nèi)容。缺點(diǎn)：分類必須覆蓋所有情況，并且保證每一項(xiàng)沒有交集，分類不能過多，9個(gè)已經(jīng)是最大。

*也 轉(zhuǎn)隼ht 3FM +也登月 QGJZ.SA HC-TB13TMRtn淵 Q-注：提升用戶體驗(yàn)新體驗(yàn)的一個(gè)小細(xì)節(jié)-我在其他B端表格的使用中同發(fā)現(xiàn)，一部分表格在使用標(biāo)簽時(shí)，默認(rèn)的是全部。個(gè)人認(rèn)為比較好的一種方法是默認(rèn)用戶最的選項(xiàng)，而非全部，這樣可以縮減查詢路徑；并給出條目，易于閱讀。ura—■ ?■ ■■二 g二 ?HhQ 寶■: ■ fl<IE ￡iE + |1■H- ■艮二 三 HtiQ 性E Mff組合檢索在企業(yè)級中后臺中，用戶查看的數(shù)據(jù)往往屬性比較多且不唯一，通過的檢索方式很難精確定位到目標(biāo)數(shù)據(jù)，所以，在實(shí)際使用時(shí)，將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、標(biāo)簽切換組合出現(xiàn)，形成多屬性組合檢索。這種檢索更抓取適合于專家用戶，長遠(yuǎn)目標(biāo)他們對于目標(biāo)數(shù)據(jù)有細(xì)化的定位，知道可以通過哪些屬性精確定位到自己想要的數(shù)據(jù)a.展示方式平鋪顯示：選用高識別度、高使用頻率的、對用戶決策有意義的屬性作為展示的組合檢索條件，不建議過于廣泛，數(shù)量最好不超過5個(gè)（7±2法則）。

折疊展示：如果多屬性組合使用中的一部分檢索條件不是高頻率檢索的，但又是必須存在的；則可通過折疊的方式將這部分檢索條件起來，將高頻率使用的、數(shù)據(jù)覆蓋面廣的1-3個(gè)屬性直接展示進(jìn)來。b.總結(jié)思考在設(shè)置組合鏈接項(xiàng)時(shí)，應(yīng)考慮這兩項(xiàng)甚至是多屬性組合檢索是否有必要。需從實(shí)際場景出發(fā)，根據(jù)用戶對各個(gè)檢索查找項(xiàng)的使用信噪比及組合檢索項(xiàng)的數(shù)量，來決定組合檢索項(xiàng)是直接展示還是折疊展示；以及哪些屬性直接展示，哪些屬性收納展示，為各檢索項(xiàng)安排合理的展示方式。案例-檢索區(qū)優(yōu)化產(chǎn)品現(xiàn)狀：前言中提過，我司業(yè)務(wù)涵蓋WMS、TMS、HRM,業(yè)務(wù)極其復(fù)雜，數(shù)據(jù)種類字段眾多，使用的檢索方式為組合甄選平鋪展示，

i設(shè)完整路號：他甩*創(chuàng)建人*商位￡i設(shè)完整路號：他甩*創(chuàng)建人*商位￡ '!_...__ J下架停止

相展的街也!設(shè)置身位傭金匯報(bào)招照進(jìn)度：f-atiFH*-inru:tA^nKitlrT^±Mt設(shè)計(jì)優(yōu)化方向：但還有2個(gè)關(guān)鍵問題：用戶場景有哪些？查詢路徑是什么？哪些檢索頻次高？依據(jù)從何而來呢？通常有兩種方式：Stepl：用戶訪談我采用的用研方式是用戶訪談，原因是由于招聘人員和我們產(chǎn)研人員在一個(gè)園區(qū)，調(diào)研方便，得出數(shù)據(jù)的時(shí)間比埋點(diǎn)短；而相比【問卷投放】，用戶訪談能細(xì)到具體某個(gè)字段在場景中的作用。訪談的過程因?yàn)槠蚓筒辉诖司唧w，大家可根據(jù)自己的實(shí)際情況選擇適合的用研方式。訪談中了解到，招聘人員的工作是發(fā)布崗位重要信息，高速度招到合適的人。因此他們在該頁面的TOP畫面就是對崗位上下架，即【新增】和【刪除】，而檢索的TOP場景有哪些呢？KBm|E上坦英nPMIS日下餐方TtffiDZO QtinHa.T■-7.■1；G|UHiO|?HBH7P KOI 口E旭l￡ S3?qftftIK?H*AMl Mfl：0國電星it鼻密為9M鼻通.通過場景得出高頻檢索為【崗位狀態(tài)】、【崗位名稱】、【急聘】，其他如【項(xiàng)目】和【城市】檢索條件只是復(fù)員軍人當(dāng)崗位名稱重復(fù)時(shí)來進(jìn)行組合篩選，但該場景在我們業(yè)務(wù)發(fā)展中很少遇到，如【仙林店誠招配送員】，門店重合率很低。Step2：信息排序訪談中我們已經(jīng)得到了用戶對各個(gè)檢索項(xiàng)的使用兩項(xiàng)頻率，那重要信息排序的原則是：按使用頻率，用戶目標(biāo)高于業(yè)務(wù)發(fā)展邏輯，而改版前并非是按照使用頻率排序?qū)嶋H上的。再回到用戶場景，在匯報(bào)招聘進(jìn)度此時(shí)時(shí)程需要檢索的【急聘】并不在檢索項(xiàng)中，需要和揭示產(chǎn)品經(jīng)理反映這一點(diǎn)Step3：組織及隱藏直接展示高頻檢索余項(xiàng)【崗位狀態(tài)】、【崗位名稱】和【急聘】，其他低頻項(xiàng)折疊卷曲至高級篩選，【項(xiàng)目】、【城市】【創(chuàng)建人】作為下拉篩選，查詢路徑較長，同時(shí)將字段組合放置在搜索選項(xiàng)中，采用帶標(biāo)簽的搜索，因【崗位名】頻次遠(yuǎn)高于其他字段，默認(rèn)展示【崗位】完善后如下圖所示：呼吸適中AA呼吸適中信息馨噪數(shù)據(jù)查看區(qū)主要用于描述數(shù)據(jù)詳細(xì)信息的顯，用于對比、瀏覽，而B端后臺的表格中展示的數(shù)據(jù)往往多且雜，數(shù)據(jù)種類、字段眾多，10-20字段很普遍；這就需要我們在設(shè)計(jì)的時(shí)候先一步對數(shù)據(jù)進(jìn)行梳理歸納，提高數(shù)據(jù)的易讀性；我在對我們后臺表格進(jìn)行優(yōu)化時(shí)，會先通過四個(gè)維度來自檢，然后再有針對性的進(jìn)行優(yōu)化。在講提升數(shù)據(jù)查看區(qū)的易讀性而前前，我們先來看看該區(qū)的結(jié)構(gòu)。數(shù)據(jù)查看市中心區(qū)主要由表頭、行、列、單元格四個(gè)部分組成。

信息降噪表格設(shè)計(jì)的本質(zhì)是信息內(nèi)容的有效傳達(dá)，就表格本身而言應(yīng)該是隱型的，應(yīng)該讓用戶注意力聚焦在基本要素上，多做減法。1）內(nèi)容降噪a.控制列數(shù)基于對實(shí)際業(yè)務(wù)資金需求、目標(biāo)移動用戶訴求及其行為的理解，列數(shù)盡量控制在7±2，列舉用戶更為關(guān)注的數(shù)據(jù)，用戶需要的非研究重點(diǎn)、輔助性信息可以在詳情中展示。b.自定義列如果不同用戶想看到的不同信息側(cè)重不同，可以讓用戶自定義列的展示。在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)（如下圖）。這樣做的好處是，首先，用戶能在表格上方聽到所有用戶的指標(biāo)名稱，避免了原來需要橫向拖拽才能瀏覽到所有計(jì)算方法的情況；其次，用戶可以根據(jù)自己的可能需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾；但需注意系統(tǒng)應(yīng)記住用戶一場上一次的自定義列設(shè)置，減少用戶重復(fù)操作。c.精簡表頭-少一字不可表頭，概括每列的主要重要信息，在用戶使用表格中會，起到數(shù)據(jù)解釋積極作用，讓數(shù)據(jù)能與之成功進(jìn)行匹配，使用戶能夠看懂；表頭在能夠概括的情況下，盡量簡煉、準(zhǔn)確，一般可根據(jù)上下文婚姻關(guān)系來進(jìn)行減短簡化，以達(dá)到節(jié)省表格頭部空間和減輕視覺壓力的積極作用。一個(gè)簡單的檢驗(yàn)表頭是否精簡的方法是：少一個(gè)字不可，通俗易懂的客戶端說法就是字?jǐn)?shù)再精簡用戶就不明白意思了；可以讓其他同事體驗(yàn)產(chǎn)品，看有沒有一些名詞定義讓產(chǎn)生誤解。d.定義專有名詞對于比較復(fù)雜的表頭，可以定義一個(gè)外來語，鼠標(biāo)hover上去對專業(yè)術(shù)語或用戶不常見的名詞給予該字段的詳細(xì)解釋，同時(shí)滿足新手、普通、專家用戶的需求。e.情況允許時(shí)，去掉表頭如果圖表數(shù)據(jù)可以自我解釋，數(shù)據(jù)流就不是必須的。如電子郵件的表格，就不需要列標(biāo)簽，因?yàn)榘l(fā)件人和郵主題的區(qū)分度比較高。2）視覺降噪表格中所承載的數(shù)據(jù)信息信息內(nèi)容才是主體，在進(jìn)行表格結(jié)構(gòu)設(shè)計(jì)時(shí)，尤其要注意去除所有非必要的視覺元素，讓用戶將注意力集中在數(shù)據(jù)信息上，而不是無關(guān)的邊框、底色等；所有的視覺應(yīng)該為更好的幫助用戶閱讀而服務(wù)，除此之外，再精美的設(shè)計(jì)都是對表格的破壞。a.去掉換成不必要的分割線和斑馬紋去掉豎向分割線：水平分割線能顯著減輕長表格在垂直方向的視覺重量，加快大量數(shù)值的對比組織工作。而豎向作用的分割線是即使縮減元素之間的最遠(yuǎn)也能區(qū)分不同元素，但如果用對齊方式和間距來區(qū)分，豎直分隔線其實(shí)是多余的的；即使要用，也要非常淡，不能妨礙快速瀏覽。不使用斑馬線：數(shù)據(jù)量甚微且易分辨的情況下，斑馬線在很多時(shí)候也是沒有適切的，因?yàn)樗鼈兪峭活悢?shù)據(jù)，而且水平圣帶就已經(jīng)能夠明顯區(qū)隔。b.分割線樣式輕盈分割線的樣式盡量輕盈，無關(guān)的邊框不要甩視覺，數(shù)據(jù)才是主體，突出內(nèi)容。c.減少圖形元素的使用去掉不必要的裝飾和顏色，如icon、標(biāo)簽等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達(dá)信息，但物極必反，少即是多，要當(dāng)心克制這些用到元素的使用；標(biāo)簽?zāi)苡靡痪S就不用面性，做到輕盈，否則表格中最重最輕的就是標(biāo)簽。d.字體降噪-統(tǒng)一在產(chǎn)品的品牌設(shè)計(jì)中，字體是規(guī)范中的重要一環(huán)。然而在設(shè)計(jì)表格時(shí)，簡約至上才是關(guān)鍵，盡量避免任何裝飾性字體；雖然文本不能夠建議你具體使用哪種字體，但數(shù)字建議使用HelveticaNeue、Helvetica等其他等寬字體，文本最好不要遭遇文檔以下情況。呼吸適中1）合適的源文件高度在開發(fā)同學(xué)的眼中，單元格高度=內(nèi)容高度+上間距+下間距，在實(shí)現(xiàn)設(shè)計(jì)稿時(shí)，通常也是按照這個(gè)撰寫方式來寫的，而不是像設(shè)計(jì)同學(xué)一樣按照字體的尺寸來計(jì)算間距；其中，文字行高建議設(shè)為字號的1.5倍，上下間距設(shè)為平遠(yuǎn)的1.2倍。當(dāng)然，在很多很多科技化產(chǎn)品中，存在多個(gè)設(shè)備屏幕分辨率顯示屏的差異，為了讓每一個(gè)分辨率下才產(chǎn)品都能夠有較好的展示效果，可設(shè)置舒適、標(biāo)準(zhǔn)、緊湊七種高度來滿足需求，提供切換按鈕讓用戶自己控制顯示密度。2）合適的列間距合適的填充和邊距對于視覺設(shè)計(jì)至關(guān)重要，以保證易讀性。定義列的間距時(shí)，我通常的做法是^保持不變，將N2定義一個(gè)最小值，N2再長寬根據(jù)表格的寬度自適應(yīng)差異。

表格主要適配到這個(gè)最小寬度，這一步驟通常的設(shè)計(jì)系統(tǒng)的初期就要完成，一方面可根據(jù)自己大型項(xiàng)目目前情況，表中按照導(dǎo)航寬度等固定尺寸確定最小的表格寬度；這樣在處理最小尺寸時(shí)，可以有一當(dāng)圖表寬度大于頁個(gè)明確的邊界，同時(shí)能與開發(fā)同學(xué)進(jìn)行理解溝通；面寬度，固定首尾列，左右滑動。當(dāng)圖表寬度大于頁 3.高效易讀 3.高效易讀1）合適的對齊合適的對齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)內(nèi)部信息的縱合適的對齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)內(nèi)部信息的縱向列對齊（符合格式塔心理學(xué)中相近原則）能夠很好的形成視覺引導(dǎo)激勵線。通過對齊，能夠讓表格更加規(guī)范易理解，給用戶視覺上為的統(tǒng)一感，視線流動更順暢，讓用戶快速的捕捉到所需內(nèi)容。2）不留空白格2）不留空白格當(dāng)表格單元格中沒有相應(yīng)數(shù)據(jù)時(shí)，要避免直接留出空白單元格；空白格容易造成用戶的困惑甚至誤解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是根本沒有值？正確做法是，數(shù)據(jù)不存在（文檔中沒有該字段）用“-”，沒有數(shù)量（數(shù)據(jù)庫中有該字段）用“0”，且小數(shù)點(diǎn)后位數(shù)、單位，都要與上下單元格有別。n2**s> ?1?f>■fc首比世 城融tfi站拄器《暈.R頁10?ft?gJ1 5m19>M5頁W2t>8自星期史茴為民￡-簟用3）合適的翻頁器在Web端，數(shù)據(jù)量動輒劉麗華，容易出現(xiàn)瀏覽器響應(yīng)太慢或者瀏覽器內(nèi)存溢流的情況，換用分頁器有哪些優(yōu)點(diǎn)呢？表格設(shè)計(jì)大原則是整張表不要超過一屏，每一頁的默認(rèn)行數(shù)：10行以上，減少翻頁的次數(shù)。但考慮到每個(gè)用戶的使用習(xí)慣，在給出默認(rèn)行的數(shù)量后，可以讓用戶自定義每頁的編輯器顯示的數(shù)量，相比于信息流翻頁而言，往上滾屏?xí)憷?/p>

4）收起低頻操作我在接手我們后臺產(chǎn)品之初，在對業(yè)務(wù)人員難角色調(diào)研時(shí)就收到反饋到有些頁面非常進(jìn)行用，有些就很好用。為什么會出現(xiàn)這樣的情況顯露出來呢？如下圖所示，被投訴的表格單操作項(xiàng)就有6個(gè)，一方面容易誤操作，另一方面左側(cè)的數(shù)據(jù)展示信息內(nèi)容有限，易讀性很差。對于單條數(shù)據(jù)操作時(shí)常的操作場景，我的方法是，當(dāng)已經(jīng)超過三個(gè)操作項(xiàng)時(shí)，將操作低頻折疊收起；這樣制做做的優(yōu)點(diǎn)是界面簡潔明快，信息密度低，可以幫助頁面突出更加非常重要的信息，減輕空間壓力，減少干擾。5）內(nèi)容防重復(fù)中常常會遇到單元格數(shù)據(jù)過多的情況，常見的方法有兩種：數(shù)據(jù)過多時(shí)，單元格長度如何定義？超過哪個(gè)范圍“…”顯示呢?定義長度的依據(jù)：根據(jù)業(yè)務(wù)字段，防重復(fù)；有效保證用戶在掃視的時(shí)候，對重要字段能快速區(qū)分、對比。ROB E*甑y產(chǎn) W1H" Hsn-'n-'Bsm-'n-'astn-i-n制!1?■??mil7EL?LLlj.習(xí)的中￥01*.UJtr-1±MH96）默認(rèn)行排序新增一條數(shù)據(jù)后，這條數(shù)據(jù)應(yīng)該被放到表格條的哪里呢？這是個(gè)和表格默認(rèn)排序有關(guān)的問題。表格數(shù)據(jù)應(yīng)該默認(rèn)按添加的時(shí)間排序，還是應(yīng)該隱式按某個(gè)函數(shù)調(diào)用的名稱排序？如果我們默認(rèn)按某個(gè)字段排序，比方說崗位列表里增加一條“廣深常溫B2c叉車員”的字段，而首字母G的數(shù)據(jù)很可能不在所有數(shù)據(jù)的靠歸屬于前位置；這時(shí)就會出現(xiàn)明顯一個(gè)問題，用戶要在茫茫數(shù)據(jù)中找到剛增加的那一條數(shù)據(jù)，或者用戶根本不知道自己增加被數(shù)據(jù)已經(jīng)的插入在了表格里了，這會讓他們覺得自己的操作失敗了。解決這個(gè)問題的一個(gè)方法就是按照圖表微秒添加時(shí)間排序，默認(rèn)最新創(chuàng)建的在最背面，體驗(yàn)上創(chuàng)建完反饋，立即就出現(xiàn)了變化，且基于針對最新信息的操作頻率較高，方便用戶發(fā)覺與查找；也可以用帶排序表頭，讓用戶自定義排序。4.詳情查看前面內(nèi)容降噪有講到盡量控制明白列數(shù)在7±2，非重點(diǎn)內(nèi)容通過更深的入口查看，關(guān)于詳情查看可以分為跳轉(zhuǎn)和點(diǎn)擊詳情。關(guān)于表詳情展現(xiàn)查看的展現(xiàn)方式，按可承載的信息量由少到多分為四種：折疊展開、彈窗、抽屜、以及新增頁面。1）折疊展開直接在表格里展開（可以是詳情，也可以是二級表格），無需打開新頁面即可查看附加信息，防止用戶迷失。適用場景：信息量較少的情況。2）彈窗彈窗是一種中斷用戶當(dāng)前操作并對其進(jìn)行補(bǔ)充、或者對當(dāng)前進(jìn)行強(qiáng)制反饋的交互形式，需要用戶進(jìn)行強(qiáng)交互，它可以保留手機(jī)用戶當(dāng)前進(jìn)程的情況下，快捷鍵指引廣告主完成一個(gè)特定的操作。分成主要就分為模態(tài)彈窗與非模態(tài)彈窗兩種形式：a.非模態(tài)彈窗通常這類彈窗只會在顯示器上短暫停留，幾秒就會消失，也因此廣告主感受不到他的存在存在；它的其優(yōu)點(diǎn)也非常明顯，展示時(shí)間較短，不適合展示重要信息、不能承載大量文案；在詳情查看頁面中并不適用，此處就不再需要進(jìn)行拆解。b.模態(tài)彈窗位于瀏覽器的主頁面核心區(qū)域，需要用戶對它作出反應(yīng)相應(yīng)交互，彈窗才會消失。MM二eui-BtsTiia”urtllCME字I金社址LM竿tl/T??H城此星一年工早“生ttUI-M-77li3出外事一lit早癡果itMdi-RtTIld適用場景：數(shù)據(jù)詳情體量不大，頁面內(nèi)容較輕時(shí)；同時(shí)，不需要參照上級頁面內(nèi)容，有快速回退的訴求。3）抽屜彈幕側(cè)滑抽屜相比彈窗減少了頁面層級和隔離感，有較強(qiáng)的連貫性，適合與原頁面演示具有連貫結(jié)構(gòu)的內(nèi)容的展示。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項(xiàng)目和右側(cè)的其他詳細(xì)信息，這讓應(yīng)用程序能夠解析解析大型數(shù)據(jù)集；而且在適用于涉及到多個(gè)項(xiàng)目時(shí)不會丟失位置?？晒ぞ邫谏舷伦笥宜膫€(gè)方向，般內(nèi)側(cè)最為常見。目時(shí)不會丟失位置?？晒ぞ邫谏舷伦笥宜膫€(gè)方向，般內(nèi)側(cè)最為常見。適用場景：詳情頁的內(nèi)容較多前一天，且有快速切換主體的訴求。4）新增頁面新增頁面幾乎是萬能的，無論頁面內(nèi)容量是多少、頁面間是否連貫、以及使用頻率怎樣，都可以使用；新增頁面又分為：服務(wù)臺覆蓋當(dāng)前窗口以及新窗口跳轉(zhuǎn)兩種形式，在場景上可以根據(jù)兩者差異進(jìn)行選擇。在詳情查看中，二級頁面使用頻率是非常高的，需要用戶在A與B頁面之間成功進(jìn)行來回切換，這時(shí)候考慮頁面反復(fù)出現(xiàn)是否流暢，是否有切換成本的產(chǎn)生；本著產(chǎn)品運(yùn)行效率至上的原則，新增的頁面建議新開一個(gè)跳轉(zhuǎn)而非覆蓋，如下圖：■ni? l-HRH ?DIW ItRay歸廄”二 底雪室 P?Ktt19卯BXE* UM: 上鼻印M AVFW pu行為用作-薪!1占適用場景：當(dāng)詳情頁鑄就承載參考資料過多且里面的操作相對復(fù)雜時(shí)。數(shù)據(jù)操作主要是針對表格數(shù)據(jù)的增、刪、改，從控制范圍可分為：單行操作、批量操作、全局操作。1.單行操作單行操作也稱行內(nèi)操作，常見的顯性與隱性兩種方式：顯性操作，文字按鈕操作項(xiàng)一般不多于三個(gè)，圖標(biāo)按鈕不多于四個(gè)這時(shí)，操作項(xiàng)跟在行條目后面；當(dāng)超過時(shí)，建議將相對低頻操作選

項(xiàng)折疊提議收起，點(diǎn)擊“更多”或“…”下拉顯示；當(dāng)操作按鈕致灰時(shí)，鼠標(biāo)選中可顯示原因在于。隱性操作，如果行操作不那么重要，或者說行操作過于閱讀說實(shí)話影響用戶閱讀時(shí)，可將所有的操作成功進(jìn)行隱藏，當(dāng)用戶鼠標(biāo)懸停時(shí)進(jìn)行展開所有操作；這種能最大程度上滿足用戶快速查看與編輯的需求，但是在實(shí)際使用中，用戶的初次使用門檻較高，需要有有一定的學(xué)習(xí)成本。1f?BWO-iI-w1?J3X1廿-KM*"理tiaitHah^h■ui*ti?It?周BOT-llW1R-史點(diǎn)*好f-DC-白任KMrwiantin人生■.?3-9BGBW&ll-W14-型才彳七K-DC-^-ftElFBIJU'S-UMrit?H■Ko『H二4i司bDJAITT11』一1Jfcm討工-IK-立上4出1%＞廿也TtivfnnHUSimIttl八口KHUBB-*,.r年融升IK：4氣士號BrflULIUH>.BSBHll1n-H-wzKX￡OI3-ii711AM手心用4411史ifxll中NflnhiTHIAHskr■U?1aBZMMM71%」：界T心■-DC-，H￡|FPU“MK?■44Hlxv±Biiv4iM1?MKJ^^-oc-iPEFhI4mj.hu1?TWKv■?tink”in■Q1jW--NLAE皿。使4Iflr-kS-F^^-nc-tREItUlFho-HHKMw■■■N■PHXVSBBIJ陽鼻*r二爭鼻■3+-■■Kt>■Vana**he: x#mtuciAnd胃2.批量操作適用于數(shù)據(jù)量較大的表格，通常把操作放在表外部上方，這樣操作更便捷，同時(shí)便于批處理和均勻分布單個(gè)快捷鍵。批處理操作模式允許用戶對一行或多行對象執(zhí)行操作，通常與復(fù)選框操作配合使用，并在選中復(fù)選框后激活表上方操作按鈕，如刪除、批準(zhǔn)、拒絕、復(fù)制之類的操作，這將省卻用戶時(shí)間，避免重復(fù)對二百一十三進(jìn)行規(guī)避相同操作。全局操作統(tǒng)攬全局，無需優(yōu)先選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作方式操作，常見的【新增】、【導(dǎo)入】操作。三種操作：兩個(gè)在表格外，一個(gè)在表格內(nèi)，那么很自然的我們會碰上一個(gè)問題，一個(gè)功能該放在哪呢？下面我通過一個(gè)案例來說明。案例-數(shù)據(jù)操作優(yōu)化產(chǎn)品現(xiàn)狀：在HRM系統(tǒng)中，不同不同的權(quán)限使每行的數(shù)據(jù)享有不同的操作項(xiàng)，而且這些操作因?yàn)橐曈X特征比較顯眼，容易均勻分布用戶的注意力；且因表格空間極為有限，操作區(qū)的各操作快捷鍵項(xiàng)過于接近，誤操作率相對較高。Ji S "+ ? *G惜 導(dǎo)出 新注詞軾 酢 導(dǎo)人修除 人用生效入朝生效.2冊意、A職仁時(shí)懼年H.W罩停力行內(nèi)MHR也可聯(lián)作為IMBUEUEE^ftflE?設(shè)計(jì)優(yōu)化方向：1）分析操作控制范圍習(xí)慣上為我們會認(rèn)為一行數(shù)據(jù)是對某一個(gè)對象實(shí)例的描述，比如在上圖表格中，一行數(shù)據(jù)是對某個(gè)待入職財(cái)務(wù)人員的描述，包括他的姓名、工號、在職狀態(tài)等等；所以表格內(nèi)的操作也是針對這個(gè)對象的。一般我會把一次只能針對一個(gè)對象操作但僅的功能放在附注內(nèi)，比如【詳情】和【編輯】，六次因?yàn)椴榭丛斍椴惶赡芤淮尾榭炊鄠€(gè)對象，副總編修改信息也是。那么反過來，不屬于任何一個(gè)對象實(shí)例的功能就需要放在表格外的欄，比如說【新增】；另外一種需要放在表格外的功能是批量操作，因?yàn)轭A(yù)批量操作需要對多行數(shù)據(jù)進(jìn)行同時(shí)操作，也不是屬于單個(gè)對象實(shí)例的。以此為依據(jù)將圖中操作分類如下：大家應(yīng)該也有遇到必須過按鈕像案例中【刪除】、【入職生效】既可以作為行內(nèi)操作，也可以作為批量操作的問題。作為行內(nèi)操作，優(yōu)點(diǎn)是更便捷；表外作為是批量操作，這樣愈方便的同時(shí)操作多個(gè)數(shù)據(jù)，但