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

【广州UI设计培训】:牢记UI设计规则,让你少走弯路?

新闻来源:本站 日期:2022-03-22
对于学习UI设计的初学者来说,很多时候因为经验不足,导致很多简单的设计细节没有做好,如果没有设计导师去指导,可能要经历1-3年才知道的一些设计细节,在今天文章中,我们分享一些基础的界面设计规则,并建议牢记它们,会让你少走弯路。
  对于学习UI设计的初学者来说,很多时候因为经验不足,导致很多简单的设计细节没有做好,如果没有设计导师去指导,可能要经历1-3年才知道的一些设计细节,在今天文章中,我们分享一些基础的界面设计规则,并建议牢记它们,会让你少走弯路。


【广州UI设计培训】:牢记UI设计规则,让你少走弯路?


  1.排版设计


  首先声明一下,在一个项目中不应该使用2种以上的字体,以及它们的多种风格样式。这句话非常重要,希望大家无论如何也要遵循这个原则。下面我们来谈点更具体的细节。

  文字间距

  每当你使用完全由大写字母组成的文字时,不要忘记设置字母间距。这样可以防止字符之间的粘连,也会让文字有更好的可读性。

 文字粗细

  在使用细体和极细体字体的时候要格外注意。中细体字可以用,但要看具体的字体细到啥程度。如果你做的产品最终会被用户在屏幕上看到,那么最好不要使用细体和极细字体,因为它们非常难阅读,在某些屏幕上甚至会造成半像素模煳的效果。

 标题和正文字体大小

  我们来谈谈网页排版。标题的级别有6个(h1-h6)。首先你应该确保你的项目中的标题级别不超过四个,并控制好它们的逻辑和一致性。一个网站或着陆页的最大标题(可能出现在主页面的第一块)可以随心所欲:目前的趋势是鼓励有表现力的排版。但是,确保你的标题的其余部分不要太大,因为太大的文字和太小的文字一样难以阅读。

  现在说下正文。浏览器的默认设置,会以16px大小显示每个文字。这个大小阅读起来是相当舒服的,但我倾向于主文字用不小于17px,附加文字用14px。保留12px作为最小的尺寸,而较小的尺寸由于视力问题或显示器不好而变得几乎无法阅读。记住,要避免近似的尺寸,不要在同一段中使用16px和17px,这样会给产品的外观带来混乱和视觉上的不协调,可能会让人误以为是错误。

  行高

  很少可以直接利用默认行高。通常情况下,必须比默认值稍大一些来提高可读性。这对于大的文本块尤其如此:博客、文章、网站或移动应用的信息块。同样的方法也适用于标题:确保字母上下不会互相碰触。

  内容的层次

  应使用加粗来突出显示文本的重要部分,包括标题、链接和按钮,有时也包括文本中被强调的部分。但如果所有文本内容都被加粗,就会变得不清楚该看哪里,分不清哪些部分更重要。内容需要有一定的层次性。

  文字对比度

  在设计中要特别注意文字的颜色。它应该有足够的对比度,这样文字在任何类型的显示器上都可以易读。这对于经常使用浅灰色的输入字段中的占位符尤其重要。

  2.间距和边距

  负空间(元素之间的“空气”)对于一个好的设计是必不可少的。留白有助于理清元素之间的关系,提升节奏和平衡感。

  去掉多余的框和线

  将多个模块分开的最简单的方法是使用一个框或1px线。但这还不是最好的方法。我见过一些设计作品,框里有框,每个框都有1px框线。在这种情况下,你需要停下来思考:这样做真的合适和必要吗?如今的界面往往到处都是卡片:电商平台里商品的卡片,动物护理应用里的卡片,外卖APP里披萨餐厅的卡片。

  有时使用1px的边框是合理的,但也有其他方法来区分这类元素,比如阴影或间距。最主要的是,卡片之间的外边距应该大于卡片内填充元素的内边距。去掉任何元素上不必要的框架,就可以为内容节省空间。毕竟,内容才是任何产品最重要的部分,所以不要没理由的去掉地为它预留的空间。

  例子2:

  设计导航的网站列表非常多,如果每个网站都要用线来分隔就增加会阅读负担,去掉线增大留白空间反而更适合阅读。

 元素层级

  边距有助于从视觉上确定一个元素是否属于另一个元素。让我们考虑一下新闻网站上的一篇文章的布局。假设它由一张图片、一个标题、3-4行预览文本和发布日期组成。标题应该与内容成为一组,日期的边距应该比标题和文字之间的边距略大一些。最后,图片应该和标题-文本单元的日期一样,甚至更远。不明白么?还是看看下面的图片吧。

  少即是多

  总有一个客户或者经理要求所有的信息必须塞进一个区块或者一张界面上。所以,标题、电话,以及整个菜单、优惠信息都要塞进去。还有,别忘了一个大大的LOGO。我不怎么会谈判,也想不出如何让他们轻易改变主意的办法。

  但至少你可以这样说:用户一次接收的信息越少,他就越容易采取行动。循序渐进的信息接收,可以确保更容易、更愉悦的用户体验。不要让用户在识别你的界面布局时遇到困难,而一堆元素堆积在一起是很难产生美观愉悦的体验。

  不均匀的边缘边距

  如果你在制作海报、banner或我们最喜欢的卡片时,要注意边缘的边距。如果你以经典的从左上角到右下角的方式来布局内容,那让顶部的边距比左侧的边距稍大一点,看起来会比四面均匀的边距更加舒服,美观。  

  以上就是优漫教育小编为大家介绍的“广州UI设计培训牢记UI设计规则,让你少走弯路?”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解 !