B端體驗(yàn)設(shè)計(jì)專題-表格篇_第1頁
B端體驗(yàn)設(shè)計(jì)專題-表格篇_第2頁
B端體驗(yàn)設(shè)計(jì)專題-表格篇_第3頁
B端體驗(yàn)設(shè)計(jì)專題-表格篇_第4頁
B端體驗(yàn)設(shè)計(jì)專題-表格篇_第5頁
已閱讀5頁,還剩24頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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ù),但

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論