雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

怎么設(shè)計(jì)網(wǎng)頁(yè)電話表格?表格設(shè)計(jì)沒(méi)有你想的那么簡(jiǎn)單

Time: 2020-01-02


相信小伙伴每天都會(huì)上網(wǎng)沖浪,每天會(huì)瀏覽很多網(wǎng)頁(yè)來(lái)尋找我們想要的知識(shí),小伙伴有沒(méi)有想過(guò)這些網(wǎng)頁(yè)是怎么設(shè)計(jì)的呢?相信肯定想過(guò),下面我們就說(shuō)說(shuō)怎么設(shè)計(jì)網(wǎng)頁(yè)電話表格。


Web頁(yè)面中的表格設(shè)計(jì),遠(yuǎn)沒(méi)那么簡(jiǎn)單

  作為頁(yè)面布局的重要組成部分,表格的身影隨處可見(jiàn)。了解與熟知To B業(yè)務(wù)平臺(tái)軟件設(shè)計(jì)的工作人員都應(yīng)該知道,表格在平臺(tái)應(yīng)用中的重要性。表格出現(xiàn)的概率不是一般的多,內(nèi)容信息的排列布局、大量數(shù)據(jù)的展示、眾多功能操作的按鈕擺放,一般都會(huì)用到相應(yīng)的表格,而且表格的樣式類別也是多種多樣。表格的設(shè)計(jì)也遠(yuǎn)遠(yuǎn)沒(méi)你想象中的那沒(méi)簡(jiǎn)單,可以說(shuō)要想設(shè)計(jì)出滿足業(yè)務(wù)需求、符合用戶心智模型的表格不是那么的輕而易舉。

  列表,英文釋義為L(zhǎng)ist。百度釋義為:以表格為容器,裝載著文字或圖表的一種形式,叫列表。如,班主任點(diǎn)名的花名冊(cè),就是一個(gè)列表;QQ軟件的好友列表等等。

  表格,英文釋義為T(mén)able,又稱為表,即是一種可視化交流模式,又是一種組織整理數(shù)據(jù)的手段,主要承載數(shù)據(jù)的歸納、展示與對(duì)比的功能,是列表的一種。

  表單,英文釋義為Form。表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。如當(dāng)我們注冊(cè)某個(gè)網(wǎng)站的賬號(hào)時(shí),填寫(xiě)個(gè)人信息的頁(yè)面,就是一個(gè)表單。表格經(jīng)常和其他界面元素一起協(xié)同使用,用于展示和操作結(jié)構(gòu)化數(shù)據(jù),并經(jīng)常用于詳情信息的入口。通常表格的組成元素以及相關(guān)元素會(huì)有多個(gè)部分,筆者根據(jù)自己設(shè)計(jì)表格的工作經(jīng)驗(yàn)將表格概括為篩選區(qū)、表頭、正文以及底欄等四個(gè)部分。


1.jpg

(圖片來(lái)自網(wǎng)絡(luò))



  網(wǎng)頁(yè)設(shè)計(jì)自適應(yīng)的表格怎么做

  1, 自適應(yīng)寬度:

  td {

  width: 1px;

  white-space: nowrap; /* 自適應(yīng)寬度*/

  word-break: keep-all; /* 避免長(zhǎng)單詞截?cái)?,保持全?*/

  }

  2,自適應(yīng)高度

  table {

  table-layout: fixed;

  width: 100%;

  }

  將所有列設(shè)置為固定寬度,顯然是不能滿足此類要求的,但是若把全部的列都設(shè)置為百分比,恐怕在某些尺寸,或分辨率下,會(huì)變得很難看。在Bigtree看來(lái),比較習(xí)慣于用如下的方式來(lái)處理——在表格列數(shù)不是很多的前提下——將大部分列寬用固定值設(shè)置死,留下一列不設(shè)置寬度,將table的寬度設(shè)置為屏幕的百分比(譬如95%、98%等)。


2.png

(圖片來(lái)自網(wǎng)絡(luò))


  電話表格頁(yè)面怎么設(shè)計(jì)

  表格的類型

  表格是一種對(duì)數(shù)據(jù)進(jìn)行組織整理的手段。大體上可分為四類,入口型表格、設(shè)置型表格、純記錄型表格以及被動(dòng)生成型表格。這四類表格對(duì)應(yīng)提供的功能以及用戶行為是有所區(qū)分的。在我所負(fù)責(zé)的簽到和工作匯報(bào)的管理后臺(tái)頁(yè)面中只包含兩類表格:設(shè)置型表格與純記錄型表格。

  設(shè)置型表格

  用戶使用設(shè)置型表格主要進(jìn)行的操作是快速掃視,搜索到需要進(jìn)行增、刪、改、查的內(nèi)容。簽到后臺(tái)中用到的設(shè)置型表格有(管理員對(duì)簽到規(guī)則以及人員規(guī)則進(jìn)行查看和編輯)、簽到管理員設(shè)置(管理員對(duì)簽到管理員及其權(quán)限進(jìn)行設(shè)置)。

  純記錄型表格

  純記錄型表格在大多數(shù)情況下只是作為一個(gè)數(shù)據(jù)的存放地而存在的。簽到后臺(tái)中用到的純記錄表格有簽到記錄表(員工及負(fù)責(zé)人查看或?qū)С鲎约旱暮灥接涗?、各類明細(xì)報(bào)表(管理員及負(fù)責(zé)人查看或?qū)С鰡T工的簽到明細(xì))。


3.jpg

(圖片來(lái)自網(wǎng)絡(luò))


  

電話表格在設(shè)計(jì)時(shí)應(yīng)該注意什么

  根據(jù)不同角色用戶對(duì)表格的使用行為中可以看出,在這兩類表格設(shè)計(jì)上最重要的就是易讀性和效率。即要在保證閱讀舒適性的同時(shí)突出重要信息以便于查找。

  1. 用戶的目標(biāo)是什么,而不是業(yè)務(wù)邏輯是什么

  企業(yè)后臺(tái)頁(yè)面經(jīng)常會(huì)出現(xiàn)的一個(gè)問(wèn)題就是數(shù)據(jù)展示的邏輯是按照業(yè)務(wù)邏輯來(lái)展示,而非用戶的角度來(lái)展示的。當(dāng)你質(zhì)疑這一點(diǎn)時(shí),產(chǎn)品經(jīng)理還會(huì)言之鑿鑿地說(shuō)“業(yè)務(wù)邏輯就是這樣的”,讓人啼笑皆非。

  例如簽到記錄表,對(duì)用戶來(lái)說(shuō)最重要的是「簽到狀態(tài)」這個(gè)信息,但是業(yè)務(wù)上的邏輯是先展示你的各種簽到明細(xì),最后才展示簽到狀態(tài)。因此按照業(yè)務(wù)邏輯來(lái)設(shè)計(jì)的話就會(huì)將無(wú)用信息固定在了左側(cè),用戶最關(guān)心的信息反而排列在最后一列,大大降低了使用效率。

  2. 告訴用戶「你從哪里來(lái)」「你要到哪里去」

  用戶在使用設(shè)置型表格和純記錄型表格時(shí)的主要目的都是檢視頁(yè)面、找到自己要操作的項(xiàng)。因此在頁(yè)面設(shè)計(jì)時(shí)要清晰地告訴用戶你現(xiàn)在在看什么,以及你關(guān)心的數(shù)據(jù)在哪里。

  例如簽到記錄表,由于表格自身屬性原因,數(shù)據(jù)量大是無(wú)法避免的,用戶在查看表格時(shí)比較吃力,容易不知道自己現(xiàn)在看的是哪里,因此給這一行提供一個(gè)懸浮的狀態(tài)顯示。對(duì)于用戶關(guān)心的異常信息,可以通過(guò)標(biāo)紅等方式去展示,讓用戶在掃視過(guò)程中就能快速找到目標(biāo)。


  怎么設(shè)計(jì)網(wǎng)頁(yè)電話表格?讀完上面相信小伙伴肯定知道了怎么設(shè)計(jì)網(wǎng)頁(yè)電話表格了,是不是對(duì)于不懂編程的你有點(diǎn)困難呢,其實(shí)是很簡(jiǎn)單的,小伙伴可以請(qǐng)教一下身邊的大神哦,相信很快就能學(xué)會(huì)。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)