020-29815005
预约专线时间:09:00-23:59

UI设计初学者容易犯的排版细节

新闻来源:优漫本站 日期:2023-05-12
UI界面的排版看似很简单,但是如果细节没做好,你的界面就会乱,并降低质量。特别是UI设计初学者,有些排版一定要注意好,如果你的UI界面感觉乱,那么这排版细节一定要避免。

  UI界面的排版看似很简单,但是如果细节没做好,你的界面就会乱,并降低质量。特别是UI设计初学者,有些排版一定要注意好,如果你的UI界面感觉乱,那么这排版细节一定要避免。


UI设计初学者容易犯的排版细节


  01.忽略内容而设计

  如果您想提高自己的技能,请设计一些可能成为产品最终目标的产品。它将实际显示哪些图像,标题有多长?因为,一旦您将真实的内容填满你的设计稿,您的精美设计就会变的异常难看。

  具体来说,在开始进行UI设计之前,您需要知道页面的每个部分都将显示哪种内容。您还需要知道内容的最小和最大显示长度,正确处理折行。

  a.选择正确的配图

  如果作为概念设计稿,那么选择你能拿到的最好的配图当然是可行的。但是一旦你要为真实的应用创建设计,那么配图的质量就必须要考虑。所以,尽量选择跟主题相关的配图,而不是在图库中的跟主题毫无关联的。只有在这种情况下,你才能真实了解最终的成品是什么样子的。

  b.注意重复的列表和块

  通常情况下,列表有以下几种形式:图像+文本,图标+文本,数字+文本等。您应该考虑用哪种形式可以让信息更有效的表达。

  对于描述功能的小文本块,您可以使用三列布局。但是,如果您有多于五行的文本,并且需要全部显示而没有省略号,则必须用另一种视觉解决方案。为什么呢?因为手机阅读者没有阅读较长的文本的习惯。此时,可以使用水平滚动或者两列布局的列表。

  另外,要考虑一下内容区块的极端情况,比如列表的文字最长和最短大概有多少字数。优秀的设计师应该始终主动思考。以考虑客户将来可能需要扩展UI的可能性。

  02.区分主要动作和次要动作

  注意到上图哪里有区别了吗?“Login”“忘记密码”“GetStart”三个按钮变成了一个。在做设计时,我们必须区分按钮的主次,这就要求你要明白,你现在在设计的这个页面,最重要的功能是什么,然后对这些功能进行排序,主要功能突出显示,次要内容则弱化。因为用户可能还要去找它们,但是它们没有那么重要,但是是必须的。所以,右图优化后的效果是不是更好呢?

  区分主按钮和次要按钮(辅助功能)的方法:

  对主按钮和辅助按钮使用不同的视觉权重。视觉重量最强的按钮将获得更多关注。

  因此,请使用强烈的颜色,粗体文本和大小为主要按钮赋予视觉效果。对次要动作则相反。

  03.令人沮丧的错误状态

  在设计用户界面时,请不要忘记任何用户界面的主要目的:在用户和服务之间提供尽可能平滑的交互。不要让用户感觉到沮丧,即使在用户出错的时候。

  设计人员应向用户提供有关状态的明确反馈,尤其是在出现错误状态的情况下。因此,错误通知应满足以下简单规则:

  它们应该是可识别且引人注意的(例如,红色是常见的UI模式,指示错误)。

  他们应该清楚地说明发生了什么,以及用户如何解决该错误。

  它们应该是上下文的。最好在与它们相关的元素附近显示错误消息。

  它们不应具有刺激性。您的用户是否对错误已经足够烦恼了?

  设计师还应注意意外错误(例如,服务器错误,找不到页面)。任何错误消息都是用户流程的障碍。因此,我们需要帮助用户进行处理,提供任何可能的解决方案,并设法消除不良体验,尤其是这不是用户犯错的情况下。例如,一个好的解决方案可能是设计404和500页的插图或动画。

  a.表单合法性检查

  在设计错误状态时,请尽量避免惹恼用户。特别要注意所有可能的形式检查。

  例如,假设您有一个包含必填字段的表单。这意味着开发人员会进行相应的检查,“所有必填字段都不能为空。”假设用户尝试以随机顺序填写表格。当第一个必填字段失去焦点状态时,它将返回错误:“请填写此字段。这是必需的!”

  我们可怜的用户大声说:“等等,我只是在表单字段之间单击,甚至没有单击’提交’!”而且情况甚至可能变得更糟。例如,假设您有另一个检查,“提交”按钮将被禁用,直到所有必填字段不再为空。

  请考虑一秒钟。您的可怜用户没有做任何事情,也无法提交表格,但是您已经将他的几个错误归咎于他了。这肯定会激怒任何人,因此最好避免这种情况。

  b.权衡成本和价值

  不要听那些试图告诉您的开发人员,这将花费您很大的精力来以您想要的方式来实现。切记:不避免此问题将使您付出代价,你的客户将会流失。这是必须要做的,没有商讨的余地。

  04.元素没有对齐

  许多设计师认为使用网格会限制您的创造力,从某种意义上说,这是事实。但是,如果您是UI设计的初学者,我认为有必要在打破规则之前首先学习这些规则。

  适当的填充和间距可使布局看起来整洁有序,同时使读者更容易阅读和理解信息。

  在逻辑块周围应设置相同大小的空间(例如,在顶部和底部以及左侧和右侧)。如果空间不均匀,您的页面将显得凌乱,并且用户可能不会平等地考虑每个部分。

  填充太小意味着用户无法将内容分解为逻辑块。为了防止逻辑部分混合在一起,请将它们分开并在它们之间插入较大的空间。

  维护视觉层次结构的一种简单方法是遵循以下简单规则:不同逻辑块之间的填充应大于每个块内标题和文本之间的填充。例如,假设您有一长串包含标题,副标题和段落的文本:

  将标题padding-bottom设置为40px,然后跟随一段文本。

  将段落padding-bottom设置为10px。

  如果段落后有副标题,则将其顶部填充为30px(即,段落与子标题顶部之间的间隔为30px),将底部填充为20px(即,子标题底部与段落之间的间隔)将为20px,大于段落之间的间隔)。

  这将把重点放在最重要和最大的元素上。最大的文本(标题)周围有较大的空间。但是这个空间应该更接近跟随它的相关元素。

  05.对比度过低

  大多数设计必须要考虑到大多数人,其中包括盲人,色盲和视力障碍的用户。通常,我们会尝试设计看起来不错的产品,而忽略了要与我们的产品进行交互的不同用户。

  成熟的设计师更倾向于克制的做设计。比如将文字缩小到8px甚至更小,使用浅灰色阴影(因为它看起来不错)。虽然它更适合我的UI界面布局,但是它忽略了有视力障碍的访客。

  WCAG(Web内容可访问性指南)提到,必须要保证4.5:1的对比度。为了确保您符合这些标准,请下载Stark,它将检查您的设计是否可访问。

  a.保持留白

  如果您将两个完全不同的元素放置在彼此非常靠近的位置,那么用户将不会理解哪个元素是“主要”元素。这就是为什么我们可以说对比不仅是对元素应用不同的视觉样式,而且还涉及使用留白的艺术。这是因为有时为了使元素形成对比,您需要使用空格分隔它们。

  留白对于使您的内容易于用户阅读很重要。当然,留白可能会被不正确地使用:有太多的留白或将太多的内容塞满了一个很小的区域。许多广告过多的网站也缺乏足够的留白。

  b.确保文本和图像有足够的对比度

  避免将低对比度的文本复制放置在图像上。文字和背景之间应有足够的对比。要突出显示副本,请在图像上放置一个对比滤镜。黑色是一种流行的颜色,但是您也可以使用明亮的颜色,将它们混合和匹配。

  另一种选择是从一开始就使用对比图像。在这种情况下,您可以将副本放置在照片或图像的深色部分的顶部。

  06.图标观感不佳

  当您需要通过小符号表达含义或简要说明说明时,图标非常有用。它们还是现代界面的基本组成部分,尤其是在移动设备上。在应用程序中,图标通常等同于按钮。这就是为什么选择正确的视觉图像以符合元素含义的原因非常重要。

  您需要使用非常简单且通用的图像来讲述故事,每个人都可以理解。您需要将这些图标与UI的整体样式进行匹配。然后,您需要将它们以SVG格式提供给开发人员。

  有些设计师喜欢用免费的图标,这些图标单个看起来都不错,但是一旦放到一起,就不太协调了。那么如何来避免这种混乱呢?

  线宽-调整大小后,所有图标的线宽应相等。否则,它们不会非常明显。

  圆角半径—如果您的图标包含一些矩形形状,请比较集合中每个图标的圆角半径。如果不同的图标不同,则最好对其进行修复。

  风格形状(用于轮廓图标)—可以是矩形或圆形。

  尽管使用免费图标并没有错,但最好还是谨慎使用它们。使用免费图标会使项目看起来廉价,并且在某些情况下不专业。此外,还有很多免费的图标,人们可以立即识别出来。为什么?他们已经看到它们到处都在使用。

 07.注意点击区域

  触摸区域太小会让用户抓狂,因为它们会使用户难以完成所需的动作。我们所有人都经历过在智能手机上点击错误按钮,并在屏幕加载错误时必须等待的挫败感!

  因此,在设计可点击元素时,请记住,成人食指的平均宽度为1.6到2厘米,以创建手指友好的目标。触摸目标的宽度至少为45–57像素。这将为用户提供足够的空间来击中目标,而不必担心准确性。

  零基础想学好UI设计就业,优漫动游UI设计培训机构报名系统学习是最好的学习方式,从零基础到高级实训,全程有专业老师授课辅导。优漫动游UI设计培训以就业为导向,依据企业需求制定课程大纲,内容涵盖、平面设计、Web网页设计、移动界面设计、交互设计以及C4D三维设计、H5推广页面设计等知识点。