UI设计规范之黄金设计法则
作者:优漫动游 2022-09-24 16:55 查看: 529

  设计语言是一个很庞大的设计体系,包括字体、网格系统、颜色、图形等等,很多初学者在做移动端的时候,往往对各种设备的界面尺寸和系统设计规范不是十分清楚,仅凭个人感觉和经验去绘制界面,心里并没有一个清晰的概念。本文中,我们将揭示有效UI设计规范的黄金法则,从排版开始,指导你的UI设计过程的基本规则。



UI设计规范之黄金设计法则


  规则1.不超过三种主颜色


  颜色会对设计产生巨大影响——这是毫无疑问的。但这不一定是关于它们有多漂亮。谈到UI设计,颜色通常是我们最喜欢涉足的事情之一,在创建设计系统时,它扮演着许多不同的角色。

  •选择你的颜色

  推荐使用的格式:

  广告语颜色(也是主要品牌颜色)

  中性浅色(适合文字较多的内容)

  中性深色(更适合UI元素,也适合深色模式)

  •创建调色板

  通常,将稍浅和稍暗分别视为10%的额外白色和10%的额外黑色。完成后,在每个画板上显示印刷样式的副本。

  •检查对比度水平

  接下来,我们需要检查我们的颜色以获得最佳颜色对比度。Pixso是一款在线协作设计工具,可以将所有设计稿放在一个文件中进行检查。

 规则2.关于易读性和可读性

  出色的排版归结为易读性和可读性,在设计系统中,字体大小、行高、段落间距和字母间距的设计方式应提高可读性和易读性。

 •字体大小

  根据全球咨询网联盟发布的WCAG 2.0,Web内容可访问性指南定义最小可接受字体大小为18pt。要注意视觉层次以及此基本大小如何将自己与摘要文本。

  接下来,选择字体。现在,你可能会注意到一些字体是18px<p>和22px<h3>看起来并没有什么不同。我们在这里有两个选择:调整字体大小,或者考虑为标题使用不同的字体。

  •行高

  最佳行高可确保文本行之间有足够的间距,以实现良好的可读性。行高应该是字体大小的1.5倍。因此,在你的UI设计工具中的“Line”(或类似)下,只需将字体大小乘以-至少-1.5。例如,如果正文是18px,那么行高需要为27px(18*1.5)。

  •段落间距

  段落间距(或文本间距)与行高类似,magic multiplier是2x(意思是字体大小的两倍)。例如,如果字体大小是18px,那么在进入下一个文本块之前应该有36px的空间。

  •共享样式风格

  如果你的UI设计工具支持(Pixso支持创建样式),将这些版式的样式转换为“本地组件”,以使其快速可重用,同时确保视觉一致性。

  规则3.CTA按钮需要层次结构

  大多数关于CTA按钮的用处是引导用户采取行动——可点击并传达视觉层次结构。

 •尺寸

  创建多尺寸的按钮时保持文本大小比例相步变化,建议常规按钮文本为18px(与正文文本相同),但大小有3种变化:

  正常:高度44像素(圆角:5像素)大:高54像素(圆角:10像素)超大:高度64像素(圆角:15像素)

  这使我们可以在不依赖颜色的情况下,强调某些按钮,并且还可以嵌套按钮(例如,在外观最小的表单字段中使用按钮)。

  •阴影

  阴影应该用来增加深度,因此建议交互性。所有按钮和表单域变体的单一阴影样式都很好——不需要任何花哨的东西。

  •交互性

  每个按钮类型都需要一个变体来指示其悬停状态。这向用户阐明了这是可点击交互状态,促使用户进一步深度使用。这实际上是创建设计系统的更复杂的地方之一,因为创建状态时最常用的就是更改按钮颜色的样式。

 规则4.统一设计系统

  设计系统决定了各种样式的应用规范。例如,什么样的文本样式可以用于强调作用,什么时候需要左对齐,什么时候需要居中对齐。设计系统不是一次性可以完成的任务,应当在实践中不断更新优化它

 规则5.设计元素必须一致

  将设计元素转换为组件,有利于重复使用它们,从而帮助我们加快工作流程并保持整个设计的一致性。组件可以节省大量时间,在Pixso可以随意切换一个组件的多种状态,设计师能更加高效地去创建和复用组件。

  以上就是优漫教育小编为大家介绍的“UI设计培训】:UI设计规范之黄金设计法则”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解 !  
预约申请试听课
填写下面表单即可预约申请试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑! 担心就业?一地学习,可全国推荐就业!
IT培训问答
开班时间

微信客服