首頁

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

ui設(shè)計分享達(dá)人

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


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


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


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

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

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


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

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

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


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

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

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


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

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

無序列表:無序列表的各個列表項之間沒有順序級別之分,為并列關(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ù)的對比,使數(shù)據(jù)能夠進(jìn)行多維度的展示,保證數(shù)據(jù)的完整性。


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






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

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

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


1) 表格痛點(diǎn)


形式單一

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


組件聯(lián)動多

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

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


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

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

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


2) 表格拆解

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

5

4

3

2

1

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


a.標(biāo)題

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

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


b.工具欄

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


c.表頭

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


d.單元格

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


e.分頁

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

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





你知道表格類型的多少決定你了設(shè)計表格的下限。

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

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


1) 基礎(chǔ)表格

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


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

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

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


Tapd

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


Teambition

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

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


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

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

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

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


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



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

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

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


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

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

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




1) 表格尺寸

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

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

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

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


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

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

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

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

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

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



2) 工具欄設(shè)計

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

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

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


信息分區(qū):

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

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


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

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

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


內(nèi)容呼吸:

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

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


3) 表格設(shè)計

經(jīng)??吹揭恍┦秩唠s的表頭,甚至它喪失了表頭的真正含義。在實(shí)際情況下,盡可能明確、簡單的講出表頭的內(nèi)容,以免造成表格的宣兵奪主。當(dāng)然也會存在一些專業(yè)術(shù)語,這時候,給一個Tooltips再合適不過。


4) 單元格設(shè)計


在表格中,單元格的行高是一直都是一個難以控制的變量,因?yàn)樾懈邥苯涌刂票砀裰械男畔⒚芏?,而信息密度永遠(yuǎn)是一個無法量化的元素。而在我們設(shè)計過程中,需要采取盒子模型的方式,讓你的設(shè)計更加落地。


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

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


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

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

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

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

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


人員角色展示

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

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


進(jìn)度條


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

表格空白處理

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



b.單元格行高


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

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

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


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

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

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

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


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


c.表格分割

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

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

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

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

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


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

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

d.行、列凍結(jié)


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

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

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




5) 分頁設(shè)計

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

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


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

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

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


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

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


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


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



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



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


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

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


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


簡潔型:


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

迷你型:

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

完整型:

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

分頁固定:

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

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




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


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


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


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

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

數(shù)據(jù)篩選瀏覽:通過自己對數(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)中。這也就我們常說的增刪改查的“增”


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


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

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

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

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

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


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


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



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

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


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

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

文章來源:站酷    作者:CE青年


藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


CSS偽類:empty讓我眼前一亮

前端達(dá)人

最近看過我文章的都知道:我最近在負(fù)責(zé)一個微信小程序的項目,在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是某天早上我看著wxml文件中一堆wx:if/elsehidden突然很煩躁,先不說wx:if導(dǎo)致的性能問題,就是標(biāo)簽上也是冗雜的。


接著上一篇文章【微信小程序自定義組件庫yPicker組件分析及省市區(qū)三級聯(lián)動實(shí)現(xiàn)】,在其中我分析了這么一個例子 —— 省市區(qū)三級聯(lián)動的自定義實(shí)現(xiàn),在其中有詳細(xì)代碼這里就不多說,說說如何調(diào)用:

我當(dāng)時是這么想的:一方面出于“不在JavaScript里寫太多東西”的考慮,另一方面,由于省、市、區(qū)我是分別用三個變量來實(shí)現(xiàn)的,所以JavaScript里就關(guān)注這三個變量,比如之間的空格或其它東西都拿到wxml文件里。就像這樣:

<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view wx:if="{{provinces&&citys&&areas}}" class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="placeholder depart_content befselect" wx:else>請選擇當(dāng)前位置</view> <view class="desc">如有變動請修改后再次提交</view> </view> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

(因?yàn)檎{(diào)用涉及到后來改動的只有在點(diǎn)擊彈窗里的“確認(rèn)”按鈕時在事件中將那三個變量分別賦給這段代碼中出現(xiàn)的三個變量 —— 否則會只要改動不管是點(diǎn)取消還是確認(rèn)已經(jīng)發(fā)生改變了,這樣不妥!)

其布局是這樣的:

.departments{ width: 100%; height: 96rpx; display: flex; align-items: center; font-size: 36rpx; font-weight: 347; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .location{ position: relative; border-bottom: 1rpx solid rgba(0,0,0,.009); display: flex; align-items: flex-start; padding-top: 20rpx; } .desc{ position: absolute; right: 19rpx; bottom: 4rpx; color: rgb(63,142,255); font-size: 23rpx; } .departments .depart_title{ width: 20%; } .departments .depart_content{ margin-left: 10%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .departments .placeholder{ width: 69%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

location


在決定了要替換這里的wx:if以后,你首先要想:用什么替換?
wx:if作用是判斷“是否存在”,如果不存在(條件不滿足)就切換到wx:else或是wx:elif的邏輯里!

OK,想到這里,你應(yīng)該能想到一個css偽類::empty !它的作用和我們想要的效果一樣:判斷如果元素(內(nèi)容)為空的話…
我迅速對代碼做了改動:

<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="desc">如有變動請修改后再次提交</view> </view> 
  • 1
  • 2
  • 3
  • 4
  • 5

然后在class - depart_content上加了這個偽類:

.placeholder:empty::before{ content: "請選擇當(dāng)前位置"; color: rgba(0,0,0,.6); } 
  • 1
  • 2
  • 3
  • 4

wx
一片空白!

經(jīng)過查閱資料::empty偽類表示如果標(biāo)簽內(nèi)容為空,那么內(nèi)容區(qū)域如果帶有空格,也是不會被匹配到的!

在寫標(biāo)簽時一定要注意這一點(diǎn):標(biāo)簽內(nèi)是否有空格或換行?。〒Q行常常被解析為一個空格)
遇到非單標(biāo)簽一定注意閉合標(biāo)簽!

最后解決辦法是:在js中將三個變量用空格相連接,再渲染到頁面上即可!
wx-position
(其實(shí)這里是一個自定義的選擇器,而自動定位就是往高德地圖發(fā)送了請求獲取到省市區(qū)字段而已,代碼就不寫了。。。)


到這里我們會發(fā)現(xiàn)一個事:上面我們不僅用了empty偽類,還用了before偽元素!

其實(shí)這一點(diǎn)很平常 —— 畢竟只有empty是添加不了內(nèi)容的(似乎縱觀css,只有before和after這樣偽元素可以向頁面中添加內(nèi)容,不管是文字還是圖片之類的)

我認(rèn)為更應(yīng)該關(guān)注到的是兩個地方:

  1. 偽元素中沒有用position定位!一般來說對一個(存在內(nèi)容的)元素來說,為其設(shè)置“前置”(before)/“后置”(after)樣式都需要定位:規(guī)定其顯示的地方。不然大概率偽元素中的文字是顯示不出來的,通過本文的empty可以猜測:他被原本存在的內(nèi)容覆蓋住了。
  2. 從第一點(diǎn)可以得出::before 和 :after 偽元素向標(biāo)簽內(nèi)插入內(nèi)容、圖形,并不會影響empty偽類的匹配!

這個特性實(shí)用的一批。


由上,可見此偽類最大的用處就是“字段缺失提示”!這是非常實(shí)用的。而且把這項任務(wù)交給CSS也可以減輕許多“(布局)負(fù)擔(dān)”、體驗(yàn)更好、維護(hù)起來也更方便!

比如:我在項目優(yōu)化時就將所有有請求的字段都加上了統(tǒng)一類名:

.ym-empty:empty::before{ content: "暫無數(shù)據(jù),請重試", display: block; text-align: center; color: rgba(0,0,0,.6); /** 其它定位、字體更改操作 */ }


作者:,轉(zhuǎn)載


炫酷的大數(shù)據(jù)可視化設(shè)計賞析(八)

前端達(dá)人

隨著大數(shù)據(jù)產(chǎn)業(yè)的發(fā)展,越來越多的公司開始實(shí)現(xiàn)數(shù)據(jù)資源的管理和應(yīng)用,尤其是一些在日常生活中經(jīng)常使用大屏幕的大中型企業(yè)。此時,用戶界面設(shè)計者需要呈現(xiàn)相應(yīng)的視覺效果。


隨著信息化的發(fā)展,智慧城市、智能油田、政務(wù)云、企業(yè)云等一系列信息化目標(biāo)逐一實(shí)現(xiàn)。實(shí)現(xiàn)了以云平臺為目標(biāo)的各資源管控、資源業(yè)務(wù)的管理。隨著管控觸角的延伸、云存儲的各種大數(shù)據(jù),如何監(jiān)控、分析、展示出核心數(shù)據(jù)和重點(diǎn)數(shù)據(jù)其尤為重要。

在集團(tuán)企業(yè)中、以運(yùn)維中心人員為用戶群體,通過大屏實(shí)時掌握業(yè)務(wù)數(shù)據(jù)情況,在系統(tǒng)設(shè)計時既要考慮數(shù)據(jù)的直觀性,又要考慮視覺疲勞,在其界面構(gòu)思上要結(jié)合行業(yè)特點(diǎn)、數(shù)據(jù)特性進(jìn)行策劃,以立體感形式表現(xiàn)更佳。


接下來為大家介紹大屏可視化的UI設(shè)計。

jhk-1603104719964.jpg

jhk-1603104817863.jpg

jhk-1603866385802.jpg

jhk-1603866400790.jpg

jhk-1603866541134.jpg

jhk-1603866858741.jpg

jhk-1603866852818.jpg

jhk-1603866817588.jpg

jhk-1603866706529.jpg

jhk-1603866625088.jpg

jhk-1603866613876.jpg

jhk-1603866605141.jpg

jhk-1603866919828.png

jhk-1603866924130.jpg

jhk-1603866965540.jpg

jhk-1603867076475.jpg

jhk-1603867083483.jpg

jhk-1603867144749.jpg

jhk-1603867206051.jpg

WechatIMG565.png

WechatIMG607.jpeg



 --大屏UI設(shè)計--

--大數(shù)據(jù)可視化ui設(shè)計賞析--

(圖片均來源于網(wǎng)絡(luò))

點(diǎn)擊查看更多UI/UE設(shè)計案例??????

  藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



    更多精彩文章:

       

 大數(shù)據(jù)可視化設(shè)計賞析(一)

  大數(shù)據(jù)可視化設(shè)計賞析(二)

  大數(shù)據(jù)可視化設(shè)計賞析(三)

  大數(shù)據(jù)可視化設(shè)計賞析(四)

  大數(shù)據(jù)可視化設(shè)計賞析(五)

  大數(shù)據(jù)可視化設(shè)計賞析(六)

  大數(shù)據(jù)可視化設(shè)計賞析(七)




解讀地圖設(shè)計

資深UI設(shè)計者

通過閱讀“地圖基礎(chǔ)知識及通用設(shè)計原則”,相信大家已經(jīng)對地圖及其設(shè)計有了一定認(rèn)知,本篇我們來了解下如何實(shí)踐。


Part 1. 上篇要點(diǎn)回顧


- 核心設(shè)計原則

  • 符合制圖學(xué)和公眾認(rèn)知

  • 保證識別度

  • 清晰有層次

  • 細(xì)分地圖模式

  • 具有品牌特性



- 元素分類

  • 點(diǎn)元素:地名、POI等

  • 線元素:道路、地鐵線、水系線、鐵路線、航線、邊界線等

  • 面元素:陸地、草地、湖泊海洋、AOI等

*名詞解釋:POI, Point of Information的縮寫,即“信息點(diǎn)”。一個POI可以是一棟房子、一個商鋪

*名詞解釋:AOI, Area of Interest的縮寫,即“信息面”。指的是區(qū)域狀的地理實(shí)體,如醫(yī)院、小區(qū)等


Part 2. 設(shè)計背景


為了實(shí)現(xiàn)“讓出行更美好”的使命,今年乘客端新增了自駕導(dǎo)航。地圖貫穿了該產(chǎn)品的全流程,且首頁、路線規(guī)劃頁、導(dǎo)航中等場景用戶需求都不相同。然而已有的模式,從配色到信息展現(xiàn),都不符合首頁地圖的場景需求,于是需要重新設(shè)計。


以下詳解設(shè)計過程。


Part 3. 設(shè)計落地


- 設(shè)計關(guān)鍵詞推導(dǎo)


根據(jù)自駕導(dǎo)航的目標(biāo),拆解出了首頁地圖的設(shè)計目標(biāo):

  • 構(gòu)建適合自駕場景的瀏覽地圖

  • 提升地圖體驗(yàn)與設(shè)計品質(zhì),提高用戶滿意度和好感度

  • 打造具有滴滴品牌調(diào)性的地圖


用戶需求及習(xí)慣表明:在首頁主要是明確自身定位、查看其他位置信息,且視距基本是手持距離。那么“構(gòu)建適合自駕場景的瀏覽地圖”關(guān)鍵點(diǎn)就在于識別度,更好的展示重點(diǎn)信息,保證用戶讀圖效率。


“提升地圖體驗(yàn)與設(shè)計品質(zhì),打造具有滴滴品牌調(diào)性的地圖”的目標(biāo),可以通過視覺手段實(shí)現(xiàn)。在瀏覽場景,用戶使用地圖的時間不固定,為避免長時間瀏覽產(chǎn)生疲憊感,地圖配色需要更舒適,對比度也要適中。這點(diǎn)也與自駕導(dǎo)航整體的設(shè)計關(guān)鍵詞“輕量”不謀而合,于是推導(dǎo)出了關(guān)鍵詞輕量化、品牌感。


- 設(shè)計地圖方案


明確設(shè)計關(guān)鍵詞后,開始著手設(shè)計。關(guān)鍵詞中的輕量化、品牌感基本上決定了這款地圖的調(diào)性,識別度則重點(diǎn)影響信息展現(xiàn)。上篇提到,設(shè)計時可以把地圖元素拆分成點(diǎn)、線、面三類,按照由大到小的順序設(shè)計,即先確定配色,再設(shè)計文字圖標(biāo)等信息,以免元素過多互相干擾。


1、設(shè)計整體配色


輕量化傳達(dá)輕量化的感受需要控制取色范圍,于是我們制定了顏色使用規(guī)則(下圖)。


  • 色相:以冷色為主,醫(yī)院(紅色系)等具有公眾認(rèn)知的顏色可除外;顏色從品牌色系中選取

  • 明度:限定顏色的明度范圍,選取中間-略高的部分,平衡顏色對比度

  • 飽和度:避免使用高飽和度的顏色,保證配色的舒適感


通過分析顏色,我們對傳達(dá)輕量化的感受有了大致的把握。那么品牌感如何體現(xiàn)呢?


品牌感具有品牌調(diào)性的地圖能更好的融入產(chǎn)品設(shè)計風(fēng)格,也能夠區(qū)別于競品,這在滴滴全流程的設(shè)計中都十分重要。在地圖上我們主要用顏色及圖標(biāo)繪制表達(dá)品牌調(diào)性。


  • 顏色:結(jié)合輕量化的用色規(guī)則,從品牌色系中選取,使地圖配色與其他組件更加融合

  • 圖標(biāo)繪制:沿用滴滴設(shè)計規(guī)范中的圖標(biāo)繪制語言,如圓角、簡單形狀等,拉齊視覺感受




最終根據(jù)“輕量化”和“品牌感”這兩個關(guān)鍵詞,設(shè)計出了地圖配色的效果圖。



2、設(shè)計地圖信息


配色確定后,即可開啟POI圖標(biāo)+文字、AOI文字、道路文字、以及各類行政區(qū)劃文字的設(shè)計。


識別度設(shè)計地圖信息時,保證基本識別度的方式,可通過文字顏色、字號大小、圖標(biāo)繪制等實(shí)現(xiàn)。但是要做到清晰有重點(diǎn),就要關(guān)注信息間的層次感。


以POI信息為例。回顧下此時的用戶需求:了解自身定位、查看其他位置信息。從這點(diǎn)可以鎖定第一展示優(yōu)先級應(yīng)為POI——地圖上定位最精準(zhǔn)的信息種類。而已有的圖標(biāo)識別度較弱,無法滿足需求,于是我們進(jìn)行了重繪。通過用色表達(dá)圖標(biāo)類型、首選有公眾認(rèn)知的載體作為表意、增強(qiáng)顏色飽和度及對比度,搭配文字顏色,從視覺上把POI信息提升至第一順位。


用同樣的方法,根據(jù)重要程度,通過設(shè)計拉開了信息的視覺層級:POI>道路名稱>AOI名稱>行政區(qū)劃信息



3、整體調(diào)整


在完成了配色和信息設(shè)計后,我們需要整合所有元素統(tǒng)一調(diào)整。此時,通常會出現(xiàn)元素互相干擾的問題,我們可以回歸到場景需求中解決此類問題,按照信息的重要程度調(diào)整,最終形成完整方案。



Part 4. 設(shè)計驗(yàn)證


地圖方案落地后,我們會關(guān)注設(shè)計品質(zhì)的驗(yàn)證。由于地圖的工具屬性,驗(yàn)證其設(shè)計品質(zhì)及用戶滿意度一直是行業(yè)內(nèi)較困難的事情。地圖既是一種圖形語言,又承載了大量的信息,且需符合場景需求,要驗(yàn)證的內(nèi)容非常多。因此我們建立了地圖評測模型,從美觀度、識別度、讀圖效率等多維度進(jìn)行評測,量化地圖設(shè)計品質(zhì)。


通過對自駕導(dǎo)航首頁地圖的兩輪調(diào)研,我們回收了大量有效結(jié)論,如用戶對道路等級的關(guān)注程度、如何使用AOI信息等等。新版地圖在美觀度、識別度等方面均得到了用戶的認(rèn)可。


了解用戶的聲音,能更好的幫助我們深耕地圖設(shè)計領(lǐng)域、全力推動地圖體驗(yàn)優(yōu)化。



Part 5. 未來形態(tài)暢想


當(dāng)前科技發(fā)展迅速,近些年出現(xiàn)的HUD、AR等導(dǎo)航,用現(xiàn)實(shí)世界的畫面代替了地圖,不需要轉(zhuǎn)換思維、記憶地圖語言,讓人與世界的連接更輕松便捷。我們不妨順著這個趨勢大膽的暢想一番,在未來的某天,世界的數(shù)據(jù)會植入我們腦中,不再有陌生的地方,現(xiàn)有的地圖形態(tài)也許會消失,因?yàn)樗驮谖覀兡_下。


文章來源:站酷    作者:CDX創(chuàng)意設(shè)計中心


藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如何建立招聘平臺的用戶標(biāo)簽體系?

資深UI設(shè)計者

目前基于用戶畫像的標(biāo)簽體系在各行各業(yè)開始得到應(yīng)用,對于涉及范圍廣,專業(yè)知識深的互聯(lián)網(wǎng)招聘領(lǐng)域來說,建立標(biāo)簽體系的難點(diǎn)是什么呢?應(yīng)該如何建立標(biāo)簽體系?怎么驗(yàn)證標(biāo)簽體系的準(zhǔn)確性?文章對這三個問題展開了分析探討,與大家分享。

一、招聘領(lǐng)域建立標(biāo)簽體系的難點(diǎn)

電商行業(yè)客觀來說屬于比較簡單的toC領(lǐng)域,知識網(wǎng)絡(luò)是比較容易理解的通用知識,可通過用戶的購買習(xí)慣、偏好、商品品類等建立標(biāo)簽體系。醫(yī)療行業(yè)屬于專業(yè)性強(qiáng)的領(lǐng)域,建立標(biāo)簽體系必須要懂醫(yī)療技術(shù)的專家團(tuán)隊才可以,但是易于操作的是,只需要醫(yī)療一個領(lǐng)域?qū)<揖涂梢酝瓿蓪I(yè)的標(biāo)簽體系建設(shè)。

但對于招聘行業(yè)來說,行業(yè)、職位涉及范圍廣,且專業(yè)性強(qiáng),因?yàn)楦餍懈鳂I(yè)的公司和求職者都會通過招聘平臺建立聯(lián)系,而且有很多高精專的職位和候選人,怎么評估B/C端之間專業(yè)技能、工種、行業(yè)之間的匹配度,確是一大難點(diǎn),而且理論上來說需要集齊各個行業(yè)、各種職位的專家人員才能建立起招聘行業(yè)的標(biāo)簽體系,但這在現(xiàn)實(shí)中要怎么操作呢?

那么機(jī)器是否可以自動完成招聘領(lǐng)域的標(biāo)簽體系建設(shè)呢?用NLP抽取職位JD中的描述并將其聚類,比如抽取Java、spring、Unix、Visio、Excel等工具技能,原型設(shè)計、交互設(shè)計、需求分析等工作內(nèi)容技能,用戶運(yùn)營、產(chǎn)品運(yùn)營、數(shù)據(jù)運(yùn)營等工作方向技能,這是互聯(lián)網(wǎng)從業(yè)者最熟悉的開發(fā)、產(chǎn)品、運(yùn)營的工作內(nèi)容和技能,如果機(jī)器可以識別這些類別標(biāo)簽就很完美了。

但現(xiàn)實(shí)卻是看似的完美與和諧,萬一Java是出現(xiàn)在了招聘專員的職位描述中呢?用戶寫的是“負(fù)責(zé)招聘Java工程師”,假如Visio出現(xiàn)在Java工程師的描述中呢?假如Excel出現(xiàn)在運(yùn)營專員的職位描述中呢?這些技能還是不是這個崗位的核心能力?

首先,Java出現(xiàn)在招聘專員出其實(shí)是可以用硬規(guī)則過濾掉的,比如限制職位和技能的關(guān)系,也就是說不是所有技能都滿足所有職位,有的技能只適用于某些職位,在其他職位內(nèi)就是無效信息。

其次,需求分析是不是產(chǎn)品經(jīng)理的技能標(biāo)簽?zāi)??有的人說肯定是了,這個回答可以說對也可以說不對,對是因?yàn)樾枨蠓治龃_實(shí)是產(chǎn)品的必備能力和工作內(nèi)容,不對是因?yàn)樗械漠a(chǎn)品經(jīng)理都需要需求分析,那這個能力還是該產(chǎn)品經(jīng)理區(qū)別于其他產(chǎn)品經(jīng)理的能力嗎?

最后Excel會出現(xiàn)在運(yùn)營專員內(nèi)、也會出現(xiàn)在招聘專員內(nèi),也會出現(xiàn)在統(tǒng)計專員內(nèi),那么它還是個核心的技能標(biāo)簽嗎?

通過以上分析可得到以下歸納性的總結(jié):

  1. 不是所有技能都適用于所有的職位,應(yīng)該定義每個職位的核心技能標(biāo)簽體系,因?yàn)榉呛诵牡募寄苡袝r候不僅無效還會起到反作用;
  2. 不是所有該職位需要的技能或者做的工作內(nèi)容都是該職位的技能標(biāo)簽,因?yàn)樗窃搷徫坏耐ㄓ媚芰]有區(qū)別度,技能標(biāo)簽應(yīng)該是該職位工種的核心技能且是可以區(qū)別不同職位或簡歷的。

所以通過以上分析可知,純NLP機(jī)器識別的方式不能完成招聘領(lǐng)域的標(biāo)簽體系建設(shè),因?yàn)闄C(jī)器沒辦法在一個崗位的眾多技能中篩選出哪些是重要的知識技能,哪些是不重要的知識技能。

二、如何建立招聘領(lǐng)域的標(biāo)簽體系

1. 基于靜態(tài)信息的通用標(biāo)準(zhǔn)化標(biāo)簽

招聘領(lǐng)域的標(biāo)簽大家首先可以想到的就是學(xué)歷、工作年限、薪資范圍等比較通用的職位/簡歷端匹配維度,當(dāng)然這些顯性通用的標(biāo)簽早已被各招聘平臺做成了結(jié)構(gòu)化的篩選項。

其次還有一些比較小眾的維度要求,比如有的職位要求海外經(jīng)歷、黨員、國企工作經(jīng)歷、籍貫、年齡等,有些平臺也把其中的某些維度做成了平臺上的結(jié)構(gòu)化標(biāo)簽。

不過這些不是我們研究的重點(diǎn),我們主要研究的是每個職位專業(yè)的知識方向的技能。

2. 基于靜態(tài)信息的專業(yè)知識精細(xì)化標(biāo)簽

建立專業(yè)知識標(biāo)簽體系的重點(diǎn)就是建立專業(yè)的崗位研究專家團(tuán)隊,想要做某個崗位的專業(yè)知識標(biāo)簽研究,肯定需要熟悉該崗位的人員,是選擇從事該崗位工作的人員呢,還是對這類崗位有所了解的HR人員呢?

因此就這兩類人員進(jìn)行了調(diào)研與分析,最終發(fā)現(xiàn)從事該崗位的人雖然對所從事的崗位了解比較深入,但對其他相關(guān)的崗位未必了解,也不太了解招聘過程中用戶的感知與思維;

HR人員雖然在專業(yè)深度上對崗位的了解不是很深入,但所了解的崗位范圍廣,只要從事過某個行業(yè)的HR工作,基本都熟悉該行業(yè)所有的崗位與關(guān)注的重點(diǎn)技能,且HR經(jīng)常使用招聘平臺,有用戶感知,對用戶行為與邏輯都非常了解,所以HR更適合做崗位專業(yè)知識研究,而且該專家團(tuán)隊最好是來自各個不同行業(yè)的HR人員。

團(tuán)隊建好了,大概的研究思路也有了,接下來就可以好好研究標(biāo)簽體系具體的生產(chǎn)流程與規(guī)則了,對此進(jìn)行了如下圖的總結(jié):

體系建立的目的肯定是運(yùn)用在算法的推薦與搜索中,初期可以通過離線的漏斗數(shù)據(jù)轉(zhuǎn)化對比(命中標(biāo)簽與未命中標(biāo)簽的轉(zhuǎn)化對比)來驗(yàn)證該標(biāo)簽體系的離線匹配效果,再者可通過灰度實(shí)驗(yàn),小流量上線實(shí)驗(yàn)來驗(yàn)證實(shí)際線上的匹配效果。

專業(yè)知識標(biāo)簽關(guān)注的只是匹配度的準(zhǔn),最終線上使用肯定還要考慮用戶是否活躍,B端HR是否著急要人,C端求職者是否在找工作,如何平衡專業(yè)知識的準(zhǔn)與用戶行為的活之間的權(quán)重也一大難點(diǎn),要找到那個準(zhǔn)與活平衡的比例區(qū)間,在這個區(qū)間內(nèi)線上能實(shí)現(xiàn)最大的用戶達(dá)成,這方面在此不多做分析,需要算法同學(xué)多次調(diào)整模型才能達(dá)成。

3. 基于動態(tài)信息的用戶行為標(biāo)簽

基于用戶行為的用戶畫像標(biāo)簽體系在電商領(lǐng)域中運(yùn)用廣泛,在招聘領(lǐng)域此類標(biāo)簽體系同樣適用,只不過電商領(lǐng)域中的“查看-聯(lián)系賣家-購買”行為在招聘領(lǐng)域變成了“查看-開聊-達(dá)成約面”行為。

電商平臺中的協(xié)同過濾理論在招聘平臺也同樣適用,只是變成了基于相似職位的過濾和基于相似候選人的過濾。有的企業(yè)以往達(dá)成的多數(shù)是名校候選人,那么我們就知道該企業(yè)偏好有名校教育經(jīng)歷的;有的企業(yè)招聘銷售崗更傾向于在專業(yè)知識體系中的有軟件銷售經(jīng)驗(yàn)的候選人,那么我們就知道該企業(yè)偏好軟件行業(yè)的銷售候選人。

通過用戶畫像體系我們可以評估用戶的偏好,以期在該用戶以后的推薦中使用其偏好,達(dá)到更好的效果。

三、招聘領(lǐng)域靜動態(tài)標(biāo)簽體系的綜合運(yùn)用

靜態(tài)通用標(biāo)簽是所有職類共用的標(biāo)簽特征,屬于大批量標(biāo)準(zhǔn)化的生產(chǎn)與運(yùn)營,通用標(biāo)簽生產(chǎn)完善了,可以實(shí)現(xiàn)粗礦式大步快跑節(jié)奏的匹配達(dá)成;

而專業(yè)知識標(biāo)簽是每類職位專業(yè)的標(biāo)簽特征,是小批量精細(xì)化的生產(chǎn)與運(yùn)營,在前面大步快跑達(dá)到一定匹配度之后,再結(jié)合精細(xì)化的小步快跑方式,逐步將每個職類的顆粒度劃分為更精細(xì)化的顆粒度,達(dá)到更高匹配程度;

在前面標(biāo)準(zhǔn)化、精細(xì)化兩輪分類之后數(shù)據(jù)已經(jīng)被分成了一個個小類,但卻沒有衡量單個用戶偏好的特征標(biāo)簽,而動態(tài)的用戶行為標(biāo)簽就是單個用戶個性化的偏好特征標(biāo)簽,用戶的偏好有可能是通用的學(xué)歷、年限特征,也可能是專業(yè)知識中某個技術(shù)框架、某種產(chǎn)品品類特征。

最終,靜態(tài)標(biāo)準(zhǔn)化通用標(biāo)簽、專業(yè)知識精細(xì)化標(biāo)簽、動態(tài)行為個性化偏好標(biāo)簽,三者相互作用、相輔相成,提升招聘領(lǐng)域線上效果的匹配準(zhǔn)確度。

文章來源:人人都是產(chǎn)品經(jīng)理    作者:艷杰


藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


JavaScript語法、語句、關(guān)鍵字保留字、變量

前端達(dá)人

第三章 基本概念

3.1 語法

3.1.1 區(qū)分大小寫

  1. 變量名test和Test完全不同

3.1.2 標(biāo)識符:變量、函數(shù)、屬性的名字,或者函數(shù)的參數(shù)

  1. 命名規(guī)則
    • 第一個字符必須是一個字母、下劃線、或者美元符號$
    • 其他字符可以是字母、下劃線、美元符號、數(shù)字
  2. 采用駝峰大小寫格式:第一個字母小寫,剩下每個單詞首字母大寫。
    • for example:myName、herAge。
    • 駝峰式命名雖不是強(qiáng)制要求,但可以視為一種最佳實(shí)踐。

3.1.3 注釋

包括單行注釋和塊級注釋。

  1. 單行注釋:以兩個斜杠開頭。如下所示:
// alert(“HelloWorld!”) 
  • 1
  1. 塊級注釋:以一個斜杠和一個星號(/*)開頭,以一個星號和一個斜杠結(jié)尾。如下所示:
/*
這是一個
多行的
塊級注釋
*/ 
  • 1
  • 2
  • 3
  • 4
  • 5

3.1.4 嚴(yán)格模式

  1. 定義:為JavaScript定義的一種不同的解析與執(zhí)行模型。
  2. 使用方法:
    • 在整個腳本中啟用嚴(yán)格模式,可以在頂部添加代碼“use strict”;。
    • 也可以在函數(shù)內(nèi)部的上方包含這條編譯指示。
  3. 使用效果:嚴(yán)格模式下,ECMAScript3中的一些不確定行為會得到處理,而且對某些不安全的操作也會拋出錯誤。嚴(yán)格模式下,js的執(zhí)行效果會有很大不同。

3.1.5 語句

  • ECMAScript中的語句以一個分號結(jié)尾,但非必需。
  • 若省略分號,則由解析器確定語句的結(jié)尾。
  • 建議不要省略分號,因?yàn)閷懮辖馕銎骶筒槐匾倩〞r間推測應(yīng)該在哪里插入分號了。

3.2 關(guān)鍵字和保留字

ECMA-262描述了一組具有特定用途的關(guān)鍵字和一組不能用做標(biāo)識符的保留字。

  1. 關(guān)鍵字:可以用于表示控制語句的開始或結(jié)束、或用于執(zhí)行特定操作等。
  2. 保留字:保留字雖然在這門語言中還沒有特定的用途,但他們有可能在將來被用作關(guān)鍵字。

3.3 變量

  • ECMAScript的變量是松散類型,即可以用來保存任何類型的數(shù)據(jù)。
  • 定義變量時要用var操作符,后跟變量名,例如var message,當(dāng)然了,也可以直接在定義的時候?qū)ψ兞孔鲆粋€初始化,例如var message = ‘hi’ ;
  • 這段的意思是變量message中保存了一個字符串“hi”。像這樣初始化變量并不會把它標(biāo)記為字符串類型,初始化的過程就只是給變量賦了一個值。
  • 因此,劃重點(diǎn),可以在修改變量的同時修改值的類型。例如:
var message = ‘hi’ ;
message = 100 ;   //有效,但不推薦
//這個例子代表變量message一開始保存了一個字符串“hi”,然后該值又被一個數(shù)字值100取代了。 
  • 1
  • 2
  • 3
  • 有一點(diǎn)需要注意,用var操作符定義的變量將成為該變量的作用域中的局部變量。也就是說如果在函數(shù)中使用var定義一個變量,那么這個變量在函數(shù)退出后就會被銷毀。例如:
function test(){
    var  message = ‘hi’ ; //局部變量
} ;
test();
alert(message); //錯誤

//為什么是錯誤?
//這里,變量message是在函數(shù)里用var定義的,當(dāng)函數(shù)被調(diào)用時,就會創(chuàng)建該變量并為其賦值。而在此之后,這個變量會立即被銷毀。所以在執(zhí)行alerat()那行代碼的時候message已經(jīng)被銷毀了,因此報錯。 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

那么,該怎么解決呢?

  • 在函數(shù)內(nèi)部省略掉var操作符,就可以創(chuàng)建一個全局變量,例子:
function test(){
    message = ‘hi’ ; //局部變量
} ;
test();
alert(message); // hi
//在函數(shù)內(nèi)部不用var會創(chuàng)建全局變量。
//但我們并不提倡這種做法,因?yàn)榫植孔饔糜蛑卸x的全局變量很難去維護(hù)。
//所以我們應(yīng)該選擇在開始就定義好所有的變量。

日歷

鏈接

個人資料

存檔