24个用户界面设计细节,提升应用程序界面质量

发布时间:2020-07-13 12:20:00

Appui设计看起来可能与界面类似,但对于没有新的或经验不足的设计师,它通常无法控制细节。相似的界面、稍大的字体、1到2种颜色、不清晰的主次区别、稍深的投影、不一致的布局等等,都决定了你的UI界面的质量。

Appui设计看起来可能与界面类似,但对于没有新的或经验不足的设计师,它通常无法控制细节。相似的界面、稍大的字体、1到2种颜色、不清晰的主次区别、稍深的投影、不一致的布局等等,都决定了你的UI界面的质量。

我们将从三个问题和24个案例分析移动应用程序界面的细节。这些往往是新手设计师经常犯的错误。请仔细看一下,你会得到一些东西的。

目录:

 视觉表达问题二,信息传递问题三,概念表达问题

统一图标设计风格

图标设计是整个应用程序设计中重要的部分之一。图标设计风格包括:线形图标、填充图标、脸型图标、平面图标、手绘风格图标和模拟图标。无论我们选择哪种代表,请保持一致性。同一模块采用一种表示方式。如果是线性图标,请保持相同的笔划值。

图标的颜色也应该保持规则和统一。同一颜色是常用的配色方法。如果使用不同色调的配色方法,应保持整体配色的协调性,不要因配色饱和度和对比度过高而影响整体视觉协调性。

当多个图标出现在同一界面时,我们需要保持整体的视觉平衡。不是所有的图标都可以用相同的大小来平衡。由于图标的体积不同,相同大小下不同体积的视觉平衡也不同。例如,相同大小的正方形将显示为大于圆形。因此,我们需要根据图标的音量调整其大小。

在界面设计中,很容易忽略细节。根据界面颜色的不同,在分割线的颜色选择上也需要做相应的调整。由于分界线的功能是区分上下信息层和界面装饰,所以颜色匹配的表现力低于文本信息。一般来说,我们会选择浅色而不是深色,这样界面会更加简洁透明。除了在某些产品场景中,请小心使用深色分割线。

通过投射按钮和卡片,我们可以增强立体感和层次感。当我们进行投影时,我们需要根据不同的背景改变投影的颜色和透明度。

在光背景下,通过选择颜色传感器左上角的位置和透明度,投影的颜色将在10%到40%之间进行调整(个人经验)。通过选择颜色选择器的右下角和透明度,深色背景下的投影颜色将在20%到40%之间进行调整(个人经验)。

投影的权重要符合页面设计的氛围。投影的目的是增强元素的立体感和层次感,而不是影响整个页面的视觉平衡。

设计需要准确把握“度”,过度的设计会干扰信息的交流。减少不必要的UI设计元素,让信息出来。整个界面将更加简洁、清新,不会分散用户的注意力。

画面比例与视界的统一

在字符显示的设计中,如果多个字符并行出现,为了保持视觉平衡,需要调整并行图片的大小和比例,就像所有字符在同一焦距内拍摄一样。我们应该尽量控制地平线的方向,使他们的眼睛处于同一位置。

在一个界面中,三种颜色的匹配相对容易控制。如果有三种以上的颜色搭配,那是对设计师能力的极大考验。如果色彩处理不到位,就会有一场色彩斑斓的“视觉盛宴”。

在选择颜色组合时,使用相似颜色的配色方案可以使颜色更加和谐和混合;如果你想更清楚地突出一些元素,对比色是一个不错的选择。无论您选择什么颜色方案,都应该控制界面中颜色的比例,这样信息传输就不会受到干扰。

通过比较,信息模块可以更加独立,接口层关系更加丰富。在这种情况下,不同的信息模块被不同的背景颜色区分,提高了整个界面的节奏感。色彩的选择可以是同一色彩体系中不同明度的渐变表现,也可以是不同色调的交织与搭配。

图片的质量影响到整个界面的风格。现在越来越多的产品会美化图片,然后展示给用户。目的是提高产品在用户心目中的印象。在设计方案时,还需要仔细选择匹配的图纸,通过后期的裁剪、曲线调整、色彩调整等技术,使同一模块的视觉效果更加和谐。

删除图标副本后,界面将更加“强制”,但您确定用户可以理解图标表达式的含义吗?在设计界面时,图标是用来辅助说明文本所传达的信息。如果删除了文案信息,则图标本身需要具有很强的信息传递能力,以确保用户能够正确识别它。

按钮的设计必须清晰、准确地传达当前的状态,不能为了视觉效果而给用户带来错误的判断。例如,深灰色按钮的用户将了解它是一个禁用状态,并放弃单击。

通过按钮的颜色、大小和风格来引导用户操作,需要加强的地方应该突出,而不是整个界面处于主次不清的状态,分散了用户的注意力,弱化了要传达的界面主旨。

在我们的工作中,总会有大量的文案,不能像概念设计那样随意删除。排版时,正确处理信息之间的层次关系,可以提高用户对信息的识别能力。我们通常采用字号、颜色、空白、层次分割等技术对同一属性的信息进行处理、分类和设计,通过空白的差异来实现层次的区分,使整个信息的排列是主次的,层次清晰。

线通常用来划分同一个类别或具有相同属性的元素;色块则更多地用来划分不同类别或具有不同属性的元素,以达到层次分明、分类清晰的目的。在选择分割形式时,应根据信息之间的关系做出明确的表达,而不是为了视觉效果。

在界面布局过程中,应指定信息呈现的_值,而不是小值。过于理想的长度范围可能会使界面风格更加美观,但落地后,会给用户带来非常不好的体验。

在大量文本信息的布局中,合理使用提示语可以提高用户对信息的理解,快速找到所需信息。提示可以是数字、字母、图形、色块等,只要能有效区分信息层次。

一个好的界面布局就是更好的引导用户阅读和操作。界面布局应该有层次和关键点,而不是简单地列出信息。通过对卡片模块的区分和大小的变化,可以引导用户的视觉,提高用户对界面的理解,提高用户的操作效率。

从左到右,从上到下阅读是我们现有的习惯。如果你想打破这种视觉表现的习惯,你将承受挑战用户体验的巨大压力。

同一界面下圆角与直角的统一

在同一界面设计中,圆角和直角的选择应在界面上更加统一,不应因混用而造成视觉表达的不一致。选择圆角作为视觉语言时,应统一同一模块下圆角的大小,大小不应不一致,使整个界面设计的视觉语言更加规范统一。

设计是为了更好的帮助用户理解界面的操作逻辑。如果你的设计改变了用户的心理和习惯,可能会增加用户的学习成本或者被用户抛弃。在设计界面时,如果我们想设计一些创新的操作规则,我们需要做更多的研究和测试,以确保规则符合用户的心理。

设计表达的一致性

同一信息模块采用统一的设计表达方式,不以增强用户对变化的理解为目的。前后信息设计的多样性在视觉上可能会更加丰富,但用户会明白这是两个不同的模块,操作是否会有所不同,这无形中会增加用户的思考时间和学习成本。

在网页和应用程序的设计中,有许多不同的视觉表达规则。在设计应用程序界面时,要打破网页的一些交互习惯,回归移动用户的习惯,使界面的操作逻辑更加流畅。

表单设计在界面上随处可见,看到无尽表单的用户总是望而却步。为了缓解用户的这种心理活动,我们在设计时通常会将具有相同属性的表单进行组合和总结,并采用逐步填充的方式,让用户感觉内容很少,这样用户就可以通过这种视觉错觉来完成表单的填充。

为了提高应用程序的情感设计,插图的使用越来越普遍。在空界面的设计上,也从纯文本变成了场景的插图表现,给用户带来了更多的愉悦。

我经常看到一些设计稿的整个界面与图纸和随机输入的副本一样,显得很不专业。为了减少视觉着陆的差异,我们在设计时尽量利用真实有效的信息来填写设计稿,从而给决策者在提出建议时提供一个还原真实场景的有效方案。

这里的24个细节只是列表的一小部分,这就要求UI设计师多练习,多看优秀作品,提高美感,学会思考和分析界面的质量。