当前位置: 首页 > 科技观察

11个超实用的数据表单设计技巧,快来收藏吧!

时间:2023-03-14 13:29:36 科技观察

大家好,我是TCC翻译情报局,我是李泽辉。数据形式是一种常见的平台设计风格。在看似枯燥乏味的设计中,蕴藏着许多优质的设计体验方式。特别是在信息组织、信息传递、信息承载和可读性方面,数据形式包含许多设计规则和设计模式,使用户能够方便地获取和处理信息。本文介绍了固定页眉、固定侧边栏、自定义栏、分页器、过滤器、数据排序、多选项同时操作的11种设计,简单明了,常用字体样式,项目链接,鼠标悬停,提供数据实用建议的指南表单设计。当然,在实际的数据表单设计中,需要根据产品需求和用户目标进行相应的调整。您在数据表单设计方面有哪些经验?你有过哪些优秀的设计案例?欢迎交流分享~△来自icon8的插图对于大多数SaaS平台来说,数据表单是必不可少的组成部分,它可以让用户获取相关数据和洞察,从而做出正确的决策。作为一名前企业家,我使用过各种SaaS平台,如Mailchimp、Shopify、Klaviyo、Zendesk等。它们提供不同的服务——电子邮件、订单管理、客户服务等解决方案——它们的共同点是需要将数据反馈给用户。数据表单是传输大量数据的最佳方式。数据表格是有效的,因为它们以有序的方式组织信息和数据,使用户可以轻松地扫描、比较和分析他们选择的信息。这篇文章描述了我在设计数据表时遵循的关键设计模式。固定标题对于超过30行的表单尤为重要。如果没有固定的标题,当用户必须向下滚动才能看到所有可用信息时,用户将很难理解和区分多行数据——其中大部分可能是随机数。固定的表头可以帮助他们轻松使用数据表,避免向上滚动查看字段含义。设计技巧我倾向于使用8像素的网格系统进行设计,并将页眉大小保持在16像素(最小值)——防止你的设计看起来笨重和拥挤。△当用户不理解某个数据字段时,固定的表头免去了用户反复向上滚动查看表头内容的麻烦。固定侧边栏对于数据表单,需要两个组件来对所有信息进行排序。一种是表头,用于理解显示的数据。第二种是固定侧边栏,连接每一行数据,常用于项目名称,如事件名称、产品名称、股票名称等。当数据表单需要水平滚动显示隐藏列时,通过固定第一列的项名,可以获得与固定表头相同的组件优势,提高信息传递效率。设计提示在设计固定侧栏时,在栏的右侧添加阴影和垂直分隔线,以提醒用户表格支持水平滚动。△当数据表的列数过多时,固定第一列的项目名称更容易理解表格。CustomColumnCustomColumn允许用户根据自己的喜好选择表单显示内容。当涉及多个指标和数据集时,此功能可以满足不同的用户目标。常用于自助广告平台,如FacebookAdManager、GoogleAds、AdRoll等。这些平台上有各种营销指标,每个用户的优先级不同。△自定义列允许用户根据自己的喜好对数据表进行个性化设置Pagination我从一位开发人员朋友那里学到了对表单进行分页,通过限制正在处理的信息量来减少加载时间。另一种方法是使用渐进式加载,当鼠标滚动到最后一行时,表单会自动加载一组新数据。与后者相比,寻呼机允许用户一次跳过几组数据,满足了用户非连续浏览的需要。设计提示大多数表单每页可以显示超过30行,因此将分页器固定在表单的顶部或底部更加人性化,允许用户在页面之间切换而无需过快的滚动。△使用分页可以减少加载时间,因为它限制了正在处理的信息量。Filter过滤器组件对于筛选目标信息和屏蔽大量无关数据至关重要。日期过滤器是最基本的过滤器,可以根据用户指定的日期显示信息。当每一列都有固定的显示字段时,这意味着信息不是随机的,而是固定选择的,您还可以为单项信息设置过滤器。在过滤器下拉列表中提供复选框功能是个好主意,允许用户选择多个变量——过滤系统越灵活,用户就越容易操纵他们的信息。△过滤器组件非常重要,可以根据用户要求减少显示的数据量。数据排序类似于过滤。可以根据用户需要重新排列信息,调整信息显示的顺序。在大多数情况下,左侧栏会默认对表单进行排序,用户可以点击标题来相应地设置表单的排序方式。您可以向表格标题添加排序,例如按数字或字母顺序对单个数据进行排序。但请不要滥用此功能,它对于状态或类别等特定指标可能是多余的-过滤器处理此数据会更合理。设计技巧尽量避免线条图标并选择区域图标以增加可见性。悬停状态传达了整个区域可点击的视觉提示。△排序类似于过滤,根据用户的需要重新排列信息。多个选项和同时操作复选框允许用户选择多个项目并对所选项目执行某些操作。无需重复相同的步骤,帮助用户节省时间和精力。想象一下所有的行都重复了相同的复选框——这会让你的表单看起来很混乱。设计技巧我通常将复选框大小保持在24px(最小大小)以使布局居中并提高可用性。此外,选定的行会突出显示以增强对比度。△复选框允许用户选择多个项目并对选择的项目执行操作简单和极简“极简主义”这个词用得很多,留白似乎是现在的趋势,但在这种情况下,少即是多。在设计数据表单时,重点应该放在数据本身而不是用户界面上。用户已经在与大量数字和信息进行交互,复杂的界面只会增加用户的认知负担。设计提示无需添加额外的视觉干扰,如不必要的图标、斑马线、随机颜色等。△当你让你的UI设计师发疯时会发生什么?常见字体样式在设计中,排版是样式指南中的关键元素,对于品牌塑造至关重要。但是在设计表格时,您应该遵循上面的说明(简单和最小)并且不要在表格中使用任何复杂的字体样式。DesignTips没有推荐的字体,但建议尽可能避免使用衬线字体,因为它们往往会引起注意并造成额外的视觉负担。另外,避免大写的单词,它会让你的设计看起来很沉重。△衬线字体在表格上看起来很奇怪——不知道大家有没有看到使用衬线字体的数据表格项链接对于特定的表格,项名也可以作为链接,这是一种符合用户习惯形成,用户很容易理解链接会将他们带到哪里。设计技巧在设计文本链接时,使用不同的颜色向用户显示链接——简单地将文本加粗或加下划线并不能提供足够的视觉提示。在设计文本链接时,使用不同的颜色向用户显示链接表单的鼠标悬停动作通常放在最后一列。这种模式适用于信息栏目不多,需要水平滚动的情况。也可以将操作放在第一列或第二列中,这样用户在滚动时就不需要跟踪这一行,但是对于许多操作,它可能会造成认知过载并导致不必要的错误。鼠标悬停保持最小的外观——动作图标和文本仅在用户将鼠标悬停在相应的行上时出现。最后,以上内容只是一个原则性的解释,主要是给大家提供一般性的建议。在实际的数据表单设计中,需要根据具体的产品需求和用户目标进行相应的调整。