散文網(wǎng) » 生活 »日常 » UI設(shè)計(jì)師，你真的了解平滑圓角嗎？（附使用指南）

UI設(shè)計(jì)師，你真的了解平滑圓角嗎？（附使用指南）

2022-05-06 12:21 作者:靜電的UI設(shè)計(jì)教室 0人讀過(guò) | 我要投稿

據(jù)說(shuō)點(diǎn)擊藍(lán)色字體關(guān)注同學(xué)都升職加薪了

靜電說(shuō)：圓角這個(gè)概念在iOS 13開(kāi)始普及，圓角平滑可以應(yīng)用于應(yīng)用中的任何元素中。我們都知道，在Figma或者Sketch中使用圓角是太稀松平常的事情了，但是圓角真的那么簡(jiǎn)單嗎？并不是。

通常情況下，我們所使用的圓角是普通的圓角，而在iOS的圖標(biāo)中，我們所使用的圖標(biāo)的圓角被稱為“超橢圓”。

效果是不是不太明顯？但是如果你放大了看的話，會(huì)發(fā)現(xiàn)確實(shí)有區(qū)別，正是這點(diǎn)差異造成了我們觀感的區(qū)別：

如何在Figma中應(yīng)用圓角平滑呢？

圓角平滑工具實(shí)際上隱藏在Figma的圓角工具集。確保打開(kāi)“獨(dú)立角”，在右側(cè)的三個(gè)點(diǎn)按鈕中，您會(huì)找到角平滑工具。

此值可以設(shè)置為 0–100%，其中 60% 是 iOS 的圓角數(shù)值。

在Sketch中也可以應(yīng)用圓角平滑，只需要在下拉菜單中選擇“平滑”選項(xiàng)即可。

為什么要使用圓角平滑呢？

其實(shí)原因非常簡(jiǎn)單，它可以讓人眼更容易的從一個(gè)元素過(guò)渡到另一個(gè)元素?？聪旅娴膱D：

下圖是常規(guī)圓角，試試看：

換成平滑圓角呢？

這樣明白我在說(shuō)什么了吧？即使在設(shè)計(jì)中顏色值有點(diǎn)模糊（如上面的橙色和陰影），眼睛也更容易從一個(gè)元素過(guò)渡到另一個(gè)元素。

這是因?yàn)槿祟?lèi)的光學(xué)系統(tǒng)通常遵循直線，當(dāng)眼睛遇到拐角時(shí)，您的光學(xué)系統(tǒng)會(huì)做與您物理到達(dá)拐角時(shí)相同的事情，它想要停下來(lái)。

但是，對(duì)于上面的圓形示例，情況就不同了。人眼會(huì)跟隨曲線，但隨后會(huì)更容易地從曲線上移開(kāi)，因?yàn)闆](méi)有角落可以卡住。所以發(fā)生的情況是，邊界由更多的直線建立，但由曲線緩和。這使我們能夠擁有獨(dú)立的元素，而不會(huì)讓它們之間的視覺(jué)過(guò)渡非常生硬。

但為什么一定是超橢圓呢？

它使曲線本身變得平滑，因此到圓角的過(guò)渡也是平滑的，而不僅僅是角本身。

讓我們實(shí)際看看這個(gè)。

那在真實(shí)的UI設(shè)計(jì)中，它會(huì)是什么樣的呢？

從縮略圖看起來(lái)可能差別不是很大，但是我們放大一頁(yè)頁(yè)的看，它會(huì)對(duì)您的 UI 在視覺(jué)上遍歷的“難易”程度產(chǎn)生重大影響。