网页设计 » 视觉设计 » UI设计初学者容易犯的7个排版细节

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

发表于: 视觉设计. 评论
Sponsor

UI界面的排版看似很简单,但是如果细节没做好,你的界面就会乱,并降低质量。特别是UI设计初学者,有些排版一定要注意好,接下来咱们来看看,这7点可以让你的UI设计质量明显提升所需要注意的问题。

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

7个UI设计排版细节:

01.忽略内容而设计

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

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

a.选择正确的配图

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

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

b.注意重复的列表和块

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

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

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

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

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

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

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

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

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

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

03. 令人沮丧的错误状态

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

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

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

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

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

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

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

a.表单合法性检查

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

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

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

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

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

b.权衡成本和价值

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

04. 元素没有对齐

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

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

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

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

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

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

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

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

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

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

05.对比度过低

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

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

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

Stark下载地址如下,支持Figma,XD和Sketch。

https://www.getstark.co/

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

a.保持留白

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

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

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

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

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

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

06. 图标观感不佳

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

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

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

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

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

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

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

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

07.注意点击区域

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

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

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

原文:https://uxplanet.org/is-your-ui-messy-7-common-mistakes-to-avoid
作者:Denislav Jeliazk

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }