赞助商
立即赞助

用好黄金比例,用协调自然的配比照亮你设计的UI

UI设计3年前 (2021)更新 流光
2.2K 0 0

UI界面否设得足够清晰,各种元素之间否协调、平衡,用户能否轻松感知到屏幕的信息,交互否顺畅舒,这些因素决了整设否效。

为了创造出好设计,专业设计师会近乎所不用其极使用各来提升设计有效度,甚至将数学理论运用到设计。而这,最著名莫过于我们熟知黄金比例了。今天的文章当中,我们将会探讨黄金比例如何运用到UI设当中的。

用好黄金比例,用协调自然的配比照亮你设计的UI

黄金比例是什么?

大自然的进大都是向着协调与平衡的方向靠拢的。许多自然界当中的生物在进都是这样,而数在探索和观察的过程中,发现了这么一个几乎存在于大分自然界事物和生命中的这么一个公式,或者说例,就是今天说的金例。

黄金比例小不同的两事之间存的数学比例,这种比例让这种对比具了突出的学特征,这迷人的数字存于鹦鹉螺的纹,植的叶柄沿黄金分割的角度,人的肚脐于人体的黄金分割点,。黄金分割活中的存数不胜数。

用好黄金比例,用协调自然的配比照亮你设计的UI

黄金比例1:1.618,它构了一完的不对称的比例。

黄比例被发现已经过4000年了,数出土精美艺术品和宏伟代筑,依然可以找到黄比例影子。著名艺术家芬奇和艺术家 萨尔瓦多·利被认为是黄比例忠实追随者,黄比例也成为了他们艺术创作最要、最关键工具。

用好黄金比例,用协调自然的配比照亮你设计的UI

黄金比例在设计中的运用

只所元素都协调搭配能让整设足够协调。设过程中,合理的运用黄金比例控制元素元素之间的小、数比例。入UI设流程之后,许多设师会意识始运用黄金比例。

然,相比而言,平设计师于黄比例青睐更多些。在美术课上,师经常会讲解黄比例理论,过各范例,帮助学生了解黄比例运用法。许多有美术背景UI设计师在创图形时候会此将黄比例作为工具,本能运用进去。在设计些小而有意义元素诸如LOGO和图标时候,尤其是如此。

在针对LOGO和图标计的候,计对于细节的关注度是非常高的。使用黄金比例来构建视觉的候,素和素之间的比例控制是非常讲究的。黄金比例能够增LOGO本身的视觉吸引力,增品牌的识别度和认知度。作为品牌计的核心,在LOGO计中使用黄金比例是非常有说服力的。

黄金比例同样运用在UI设计当中。在UI中,黄金比例最常见的用法是用来控局,将整个UI的排版局使用黄金比例来控和规划,在图的裁剪和处理上,同样以借助黄金比例来控,确图内容的平衡以及图身的长宽比以令人舒适。

用好黄金比例,用协调自然的配比照亮你设计的UI

黄金比例如何提升UI设计?

虽然对于许多计而言,数学是一件恼人的事情,但是它如果能够提升计效果的话,那钻研一下也无妨吧?

平衡的内容

当产品中包含大量的各种各内容的候,计就需要面对这的局面了:对大量的内容进行取舍。这个候,计可以运用黄金比例,将至关重要的、不能被替换的关键内容和其的内容按照1:1.618的比例提取出来,将重要内容优先展示,确保用户能够优先知重要的内容,这一来也更好组织其的功能性的组件。

更有效的视觉层次

既然黄金比例能够控制内容,然也能够让整个视觉层次显得更加清晰直观。在组织其的视觉内容的候,同可以借助黄金比例来控制视觉息的比重,从而营造出对比,轻重缓急更加有韵律的视觉层次。

用好黄金比例,用协调自然的配比照亮你设计的UI

更为高效的排版

在进排版设计时候,设计师需要将内容划分出晰层级。标题、副标题、正文、引用等等,它们有着不权,在视觉上也过大小和距来呈现这距。而这个时候,黄比例也有了用武地。比如,你设定好了标题号大小,那么除以1.618到了副标题号。这样比例控制能够带来漂亮协调视觉体验。

令人满意的第一印象

用户第试用品时候,会快速扫视界,过视觉和体验来判断它们是否喜欢。有名为内脏反应心理学原理指出,们常常能够在几秒钟内决定是否会喜欢某个事物。这反应常比思考更快,在我们尚未意识到时候已经作出了好恶判断。设计师使用黄比例来控制UI各个元素比例、大小和数量时候,很容易让用户品生正反应,或者俗讲,让用户“见钟情”。

用好黄金比例,用协调自然的配比照亮你设计的UI

适当地留白

设中的留白同样非常重的组部分,元素元素之间的亲疏关系,否一致,都通过留白体出的。设师通过控制留白影响整布局,使用黄金比例控制导航的疏密程度往往能够得到比较不错的效果。比如,让行间距行高的1.618倍,能够营造出比较舒的阅读体验。

结语

如何让黄金比例融入整设,每设师都需好好思考的问题。巧妙控制设元素整UI布局中的小比例,借黄金比例让UI加自然,让用户一见倾,并不一件太过困难的事。黄金比例所的学加,不就应该这么使用么?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

昨天立了Flag 要更新关于WWDC的文章,但是一把年纪,熬夜艰辛,只能起床之后再更文章了。 WWDC19 可能是最近几年最令人激动...
2019设计趋势
这是一个移动端的时代,Twitter 的移动客户端经历了很多版本的迭代,但是桌面端的更新改版则非常的克制。 一周之前,Twitter...
twitter
网易UEDC – 朱子健、蒋蕊遥 :良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。 一. 规范很重要 规范和秩序...
交互规范
王M争:用户在使用产品过程中,难免会犯错。一个好的产品可以降低用户犯错的概率,并且提升错误被解决的效率。通俗点说就是帮...
容错性
编者按:文章总结了想要提高审美和设计感,设计师必须要了解的美术基础。 一、美术的重要性 任何类别的设计师都需要有一定的...
历史
为什么会出现下拉刷新,以及在下拉刷新出现之前为什么没有下拉刷新?这些问题的答案似乎显而易见,却又总能带来更多疑问。追...
产品设计
平时的工作中,经常会遇到一些不舒服但是又说不上理由的交互问题。本文作者从争论的点出发,有理有据的说明这些问题,并给出...
App设计
从一开始的立项到现在落地上线,可以说是从零开始进行 APP 全部细节的梳理并且规定规范,这一路走过来还是能总结出很多心得,...
组件化设计