表格设计 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享12项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

作品集指导

优设设计专家语音在线指导

开通VIP

领取更多设计师实用特权

投稿

表格设计话题

首页
设计文章
表格设计

一键收藏！9个超实用B端表格设计Tips

9图 1/9

一键收藏！9个超实用B端表格设计Tips

掌握表格设计，就掌握 B 端设计的半壁江山！（5000字完整版）

产品

掌握表格设计，就掌握 B 端设计的半壁江山！（5000字完整版）

作为 B 端设计最重要的模块之一，希望大家可以学以致用。

2022/02/07

掌握表格设计，就掌握 B 端设计的半壁江山！

UI

掌握表格设计，就掌握 B 端设计的半壁江山！

今天分享的是 B 端项目复杂组件中出现频率最高的表格组件，帮助大家更好地掌握表格的设计和应用。

2022/01/14

想设计 B 端表格？掌握这 3 个原则就不会错！

产品

想设计 B 端表格？掌握这 3 个原则就不会错！

良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制，具体细节本文由百度的高手一一为你解析。

2021/08/05

UI

数据可视化必修课：表格篇

在后台系统、数据类产品、B 端产品中，表格作为最常用的一种数据整理的组件，其重要性不用过多赘述。我给大家整理了一份关于表格的攻略。

2021/03/19

如何设计一份体验好的表单？来看这篇超全总结！

UI

如何设计一份体验好的表单？来看这篇超全总结！

本文从表单拆分、表单类型和表单页设计步骤 3 个方面，详细阐述了表单的设计方法。

2021/01/03

如何设计B端表格？这篇近5000字的干货帮你完全掌握！

UI

如何设计B端表格？这篇近5000字的干货帮你完全掌握！

如何让冰冷的表格转化成更直观、更高可读性、更美观的展示形式呢？本文用将近5000字的干货，帮你完全掌握B端表格设计。

2020/12/30

上万字干货！超全面的B端设计指南：表格篇（下）

UI

上万字干货！超全面的B端设计指南：表格篇（下）

本文总结了10个大家常见的表格问题，同时也给出相应的解决方法。

2020/12/18

从易读性和易操作性两大方面，教你做好表格设计

网页

从易读性和易操作性两大方面，教你做好表格设计

如何设计一个准确、高效、易用的表格，是一件考验设计师功底的事。本文从易读性和易操作性两大方面帮你学会设计一个表格。

2020/12/10

一万两千字！超详细的Web表格设计指南

网页

一万两千字！超详细的Web表格设计指南

本文从表格的布局与构成、表格的视觉、表格的交互三大角度，层层深入讲解，帮你完整掌握Web表格设计的方法。

2020/12/02

万字干货！超全面的B端设计指南：表格篇（上）

UI

万字干货！超全面的B端设计指南：表格篇（上）

B端表格设计与C端有很大的不同，无论是表格的展示形式以及承载内容上都有非常大的差异。今天我们就来聊聊表格，探讨一下B端表格究竟应该如何设计。

2020/11/09

可能是最详细的表格设计完全手册！

产品

可能是最详细的表格设计完全手册！

本文从表格的组成元素、优秀表格的设计技巧、表格的操作交互等，给你一份全面的设计指南。一、表格应用表格，是一种常见的信息组织整理手段，常用于信息收集（展示）、数据分析、归纳整理等活动中，在互联网产品应用中，非常适合于：1. 需要组织和展示大量信息数据表格结构简单，分隔归纳明确，特别适合组织和展示大量的信息内容，且易于用户浏览和获取信息。2. 当信息数据需要进行多种复杂操作时需要对信息进行排序、搜索、筛选、分页、自定义选项等操作。

2018/09/23

免费高效！用 Paddy 让你的 Sketch 学会自动排版！

教程

免费高效！用 Paddy 让你的 Sketch 学会自动排版！

徐小马：很多中后台项目的界面设计涉及大量的表格，每份终稿的输出，都要经历反复的调整间距、边距、对齐，Sketch 自带的排版功能已经远远不够用了。所以推荐给大家一个自动排版的插件：Paddy，合理的使用会提升设计师的时薪。一、阅读准备和核心流程插件官网：GitHub - Paddy相关下载：插件 | 演示文档掌握三个核心功能即可快速上手，笔者在这里以一张简单表格的制作为例子。

2018/04/24

简单实用！七步学会用 Sketch 搭建复杂表格

教程

简单实用！七步学会用 Sketch 搭建复杂表格

徐小马：笔者之前去华润置地东北大区做用户调研，需要现场理解需求，快速搭建用于用户测试的可交互原型。由于方案中涉及大量的表格，有点措手不及。回来后，我构思做一个 Sketch 模版沉淀，以防下次再遇到这种情况。

2018/02/01

表格行高如何设定？来看腾讯设计师的总结！

教程

表格行高如何设定？来看腾讯设计师的总结！

表格的行高可以直接影响到一屏可以展示多少行信息，即对信息密度有所影响；除此之外，表格的行高也影响着整个表格的易读性。所以本文将从信息密度和易读性两个方面来讨论一下行高应该如何定。一. 信息密度1. 一屏显示多少行对用户到底有没有影响？

2017/11/30

手机端表格设计：我整理了一套循序渐进的处理方法

教程

手机端表格设计：我整理了一套循序渐进的处理方法

Z Yuhan：对于手机端的表格设计，本文将为你提供了一些思考方向，希望能够带给你启发。表格似乎和移动设备很难融合，强行贴上还真有些毁三观。即便是想方设法地避免，也总会有这样那样的原因，而不得不同时面对它们的时候。

2017/10/25

移动端设计

实战经验！如何做好网页后台的表单和表格设计？

教程

实战经验！如何做好网页后台的表单和表格设计？

矢量人生（作者）：一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，下面跟大家分享后台中的表格和表单的设计细节。当接到一个全新的网页后台项目时，首先确定设计风格，然后考虑这个后台尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，除非有规定，否则你可以选择任意主流尺寸作为基尺寸来设计网页。

2017/08/09

让数据阅读更舒适！带你玩转表格设计

教程

让数据阅读更舒适！带你玩转表格设计

hardwear：想必多数同学曾经学习计算机就是从Word开始，其中一项重要的学习任务就是创建表格，如今在网络页面里表格随处可见，尤其是商业产品里充满了大量的数据，要没有这些表格估计看内容得吐血…… 表格形形色色，默默无闻的呈现着数据，阅读起来如何最为顺畅，如何才能从表格里发掘出重要信息，有哪些可以对表格进行的操作，梳理一下以供参考。在后台界面，表格对数据的维护和体现是最常见的，那么也推荐您看看一组惊艳的后台管理界面设计1.行高是表格浏览时的重要参数行高是表格非常重要的参数，行高间距直接影响着阅读的...

2013/10/07

教程

提高表格可读性的一些技巧

表格的应用DLIN：由于工作原因，经常接触到表格。我们发现，表格不但广泛的运用在各类数据收集和分析，同时通过表格这样一种二维矩阵来整理和陈列信息时（即便最后的展示方式并非一个典型的表格样式），能够很好的表达信息之间的逻辑关系，易于帮助理解横纵信息之间的关系。在实际的网页设计应用中，表格横纵相互独立又相互关联的模式尤其适用于：1.组织和展示大量的信息表格简单的结构不但能包含大量的信息，且同时保证信息的可读性,便于读者快速扫描信息、从大量的条目中找到所需的信息。

2013/06/14

没有更多内容了

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营