20个技巧和例程！创建出色的UI图表设计

如今，大多数软件应用程序都使用图表设计来可视化各种软件数据. 在成功简化界面设计的同时，还极大地增强了用户体验. 试想一下，如果市场上的各种监视，财务，保健和旅行软件应用程序不再使用这种直观且引人注目的图表设计，那么整个软件应用程序的用户体验将是可怕的！

更不用说，这种图形设计为设计师提供了更多自由创作和表达自己的空间. 其链接和交互式设计还为设计人员提供了更多界面改进和优化. 可能性，设计师真的很喜欢在实际设计中添加各种图形设计.

这也解释了为什么图表现在广泛用于各种软件（包括Web和App）设计中.

但是，Web和App设计中的图表类型很多，例如常见的饼图，条形图，折线图，时间表，，流程图，直方图，散点图，点图等. 作为设计师和开发人员，我们如何才能完美地设计和还原这种图形设计？别担心！继续阅读，每个人都会找到您想要的答案.

正如乔布斯所说: “设计不应该仅仅停留在外观和个人感觉上，而应该更多地关注其功能. ”

因此，图表的设计不仅应停留在视觉显示上，还应考虑其功能和实用性.

尽管如此，所有类型的图表大多都是权重和度量，条件，规则以及相关计算结果的集合和表示. 但是，对移动和Web软件应用程序的图表设计要求却大不相同. 导致这些差异的核心因素是常见的屏幕尺寸，设备数据处理能力以及相关的技术限制.

此外，由于该图只是整个Web / App设计的一小部分，因此通常只需要产品团队中的设计师，产品所有者或业务分析师即可轻松完成. 但是，对于开发人员来说，由于数据和用户条件的可变性，实现和恢复这种图表设计非常痛苦.

简而言之，无论如何，编辑者都希望以下共享的相关图表设计例程和技术可以帮助每个人有效地避免和解决相关的设计问题和痛点:

1. 您真的需要图表设计来显示数据吗？

在某些设计方案中，直接数字显示在减少界面干扰以及吸引和留住用户方面比复杂且可变的图表显示更为有效. 因此，在具体案例设计过程中，设计人员需要注意实际设计情况以及是否真的需要图表进行数据显示，以有效避免出现浮华情况.

设计时，您还需要检查并确认几次: 所选图表类型是否可以完美呈现各种软件数据. 为确保所选图表类型正确，您可以尝试通过移动设备打开此图表设计以进行测试. 以用户身份查看您是否可以轻松理解图表上显示的所有信息.

此外，应注意，在某些情况下图表web设计，使用2-3个图表分别显示相关数据将比仅使用单个图表更为简洁和直观.

例如，在特定设计中，设计人员可以以滑动方式突出显示每个图表设计并切换设计技能，从而更直观，更酷地显示各种软件数据，并轻松解决单个图表设计中过于复杂的问题. 此外，为了确保用户在每次切换或滑动过程中自然可以专注于当前图表，其他图表设计也应透明地模糊.

在图表设计中，不同数据的颜色匹配也需要设计者仔细选择. 例如，红色不适用于增长势头良好的数据. 为了更直观地显示数据增长进度和渐变变化，更适合匹配渐变颜色.

每种图表设计的目的都是以更加直观和清晰的视觉形式向用户显示各种数据. 为了确保顺利实现此目的，设计人员在交付设计时需要向开发人员提供相应图表信息的详细信息，实现条件以及设计限制，例如名称，时间间隔，图表数据计算公式等对应于各种数据. 确保图表设计完美实现和恢复.

当用于显示简单数据时，图形清晰直观，并且非常实用. 但是，当图表需要显示更复杂的数据（例如比较数据或什至是一些其他计算）时，为了避免对用户造成混淆，设计人员需要考虑是否添加某些图例来解释和指导用户. 当然，在图例设计中，您还需要注意相应描述文字的长度. 由于可以显示数据的移动界面相对较小，因此文字设计时间过长会影响整个图表的布局.

的确，在设计过程中，设计人员通常愿意选择一些简洁而有能力的方法来显示图表中的各种数据（例如，使用一些简短且有能力的标题，文本描述，地址和占位符，屏幕尺寸和设备的布局等）. 但是，在实际设计过程中，现实往往并不令人满意. 例如，在设计移动终端接口图时，由于手机屏幕的显示空间相对有限，因此涉及的大数据的一部分在显示之前需要适当简化和缩小. 当然，为了实现数据简化和减轻重量，也可以结合图表图例进行设计.

假设，我们需要设计一个饼图，分别显示99％，0.75％和0.25％的软件数据. 如何设计使整个图表美观和协调？这是设计人员需要事先考虑的问题.

例如，设计人员可以直接隐藏图表的相关部分，或直接将其显示为灰色并将其标记为“ 0”，或直接添加问号进行显示.

这时，通常来说，设计者可以预先向图表添加空白设计. 它可以是没有任何数据的空白图表设计，也可以是带有特殊占位符的图表设计. 简而言之，设计师可以根据自己的需求进行选择.

众所周知，这种图表元素的设计应由用户的特定数据确定. 为了确保最终设计真正准确和实用，设计人员需要向开发人员说明如何计算X轴和Y轴相关数据，以及图表轴上必须有多少刻度和其他重要信息.

例如，当图表中的数字大于2000时，图标将使用红色渐变进行显示. 数据号小于2000时，可以橙色显示.

这时，设计人员需要向图表添加禁止状态设计.

对于某些图表，数据显示需要一些时间才能从后台检索或计算相关数据. 此时，为了避免给用户带来糟糕的用户体验，设计人员需要添加图表加载状态设计，以清楚地告知用户正在为您加载相关数据.

对于这种问题，不同的设计项目将有不同的情况图表web设计，设计人员需要根据情况做出决定. 例如，响应式图表设计要求设计人员为开发人员提供针对不同设备或系统的多组相关设计数据，以方便开发人员进一步设计和实现.

通常来说，单击图表区域可切换到全屏并查看图表详细信息. 双击以展开图表. 长按以聚焦并突出显示图表的特定区域.

通常来说，只需滑动图表页面或点击相关按钮即可查看相应图表的历史数据. 值得注意的是，设计人员需要为图表数据添加时间限制，并非所有历史信息都可以查看.

例如，以当今流行的减肥卡路里跟踪软件为例，如果用户达到每日卡路里（即卡路里）限制的90％，则设计人员可以在每日卡路里跟踪图中显示相关项目. 多余的数据增长以橙色突出显示. 然后，在超过100％之后，选择红色进行标记，以表明用户偏离了规定的饮食（即每日热量限制）.

图表数据也可以动态显示. 例如，一次显示一个柱形图. 饼图，一次一部分，增加了界面的趣味性和灵活性.

如果设计人员要按升序显示用户数据，则需要在交付过程中向开发工程师明确提出此设计要求.

一般来说，用户可以自由选择要显示或突出显示的图表信息.

我希望上面分析的相关设计技术和例程可以帮助您成功优化Web / App设计中图表的外观和用户体验. 简而言之，在特定的图表设计过程中，设计人员和开发人员需要从不同的角度进行思考:

实际上，图表设计中最有可能出现的问题是，其组成美观，凉爽，数据直观且清晰，但忽略了用户的实际需求. 如果设计者希望避免此类问题，请在设计图表时牢记上述问题和例程.

当然，如果您认为图表设计是完美的，请不要忘记尝试不同的数据系统（例如大小数据集，缺少数据等），以确保图表在各种情况下都是正确的. 对于用户而言，它们都是可读，可识别和可理解的.

正如《小王子》的作者安托万·德·圣艾修伯里（Antoine de Saint-Exupery）所说: “实现完美并非没有，但没有多余. ”

从设计中删除不必要的元素或内容不仅可以简化设计本身，而且可以有效地增强其用户体验.

简而言之，我希望上面介绍的图表设计技术和例程可以帮助设计人员和开发人员解决某些设计问题和痛点，同时成功创建最佳的Web / App设计. 模拟团队翻译

原始作者: . Dashdevs科技人员

原始链接:

500GB年度材料包

扫描下面的QR码

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-288371-1.html