中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

怎樣使圖標(biāo)，圖形整齊，圓角完美？這里有超過50個(gè)小技巧，來一起學(xué)習(xí)一下吧。

眼睛是人體一個(gè)很奇怪的器官，因?yàn)樗偸菚?huì)對(duì)我們說謊。但如果你了解了人類視覺的感知特性，你就可以構(gòu)建人性化的設(shè)計(jì)。類型設(shè)計(jì)師不僅可以利用視覺技巧創(chuàng)建刻度且平衡的字體，也有利于幫助界面設(shè)計(jì)師創(chuàng)建人機(jī)溝通。

1. 測(cè)量視覺大小

400像素的正方形和400像素的圓哪一個(gè)大？從幾何的角度來看，圓和正方形的寬度和高度是相同的。但看完下面的圖片我們會(huì)發(fā)現(xiàn)正方形比圓所占的視覺重量多。視覺重量相關(guān)的詞語很適合來描述視覺效果。

如果你不相信已經(jīng)畫好的圖形，下面是對(duì)應(yīng)的數(shù)字指導(dǎo)版本。

看看下面的正方形和圓形圖片在視覺重量中是否相等？

對(duì)我而言，很明顯是相等的。因?yàn)槲覍A形的直徑增加了50像素，所以很難說其中的哪個(gè)圖形所占比重大。

發(fā)生這一情況的原因是，我將第一個(gè)例子（400像素的正方形和圓）和第二個(gè)例子（400像素的正方形，450像素的圓）分別重疊了。注意下面的正方形超出圓的‘a(chǎn)’區(qū)域，圓超出正方形的‘b’區(qū)域。左邊的圓形破壞了整個(gè)正方形，使得正方形中還包括了4個(gè)邊；右邊的圓形和正方形是平衡的，它們都不包含彼此，每個(gè)圖形中都有4個(gè)碎片。

為了在視覺上與正方形保持平衡，可以用菱形或三角形來實(shí)現(xiàn)相同的效果。相比較它們應(yīng)該更寬、更高，這樣與正方形的面積才會(huì)相似。根據(jù)區(qū)域的方法可以很好地完成簡單的形狀。

如何在界面中使用這一特點(diǎn)呢？舉例來說，當(dāng)你創(chuàng)建一組圖標(biāo)時(shí)，最重要是讓它們平衡，所以圖標(biāo)沒有太過突出或是太過微小。如果將圖標(biāo)直接放在正方形區(qū)域中，會(huì)看起來更大。

建議讓視覺上的小圖標(biāo)重量超過的圖標(biāo)本身區(qū)域，讓視覺上較有重量的圖標(biāo)與圖標(biāo)之間的區(qū)域留一些空間，以此來修正不同形狀的圖標(biāo)重量。

一些真實(shí)的視覺上平衡的圖標(biāo)。

圖標(biāo)區(qū)域總是大于圖標(biāo)本身的原因是僅允許非凡塊區(qū)域看起來不小于方塊圖標(biāo)。

最簡單的測(cè)試是用模糊的圖標(biāo)來檢測(cè)視覺平衡。如果圖標(biāo)變成或大或小相似的斑點(diǎn)，它們的視覺比重就是相同的。

但有些時(shí)候我們也會(huì)用現(xiàn)有的圖形，比如，作為分享和喜歡按鈕的社交網(wǎng)絡(luò)商標(biāo)。Facebook和Instagram的圖標(biāo)都是方塊狀的，而Twitter是用一只鳥的剪影來代表的，Pinterest是由一個(gè)環(huán)繞的“P”代表的。這就是為什么Twitter和Pinterest的圖標(biāo)會(huì)大一點(diǎn)，以至于它們和Facebook和Instagram的圖標(biāo)看起來是平衡的。

視覺平衡的另一個(gè)例子是放置在文本框的圓形按鈕。如果按鈕直徑與文本框的高度相等，從我們視角看到的按鈕會(huì)比文本框小一些，但如果放大一點(diǎn)按鈕直徑，整體看上去就會(huì)更加平衡。

但如果改變按鈕風(fēng)格，放大直徑將不是必需的。下面圖片的按鈕和文本狂都是80像素高，由于臨近文本框的按鈕有黑色填充，所以右邊按鈕的重量平衡會(huì)更好些。

謹(jǐn)記：

• 視覺重量是指從人們的視角看到的意義上的物體大小，并不一定和像素大小相等。
• 圓形、菱形、三角形和其他非方塊圖形，這些類似方形的圖形為了達(dá)到視覺平衡需要再放大一些。
• 為了達(dá)到視覺平衡，圖標(biāo)區(qū)域要保留一些空間。這對(duì)設(shè)置圖標(biāo)是至關(guān)重要的。

2. 不同形狀的一致性

視覺一致性是視覺平衡主體和視覺比重現(xiàn)象的邏輯延續(xù)。下面的條紋看起來是否是一樣長?

就像素而言，答案“是”。但一眼看上去下面的條紋會(huì)比上面的條紋更短一些。

再看另一張圖片上的兩條條紋，有什么改變嗎？

對(duì)較低的條紋應(yīng)用了視覺補(bǔ)償。允許尖頭增加20像素超過上面的條紋長度，這個(gè)補(bǔ)償尖頭之間的差距，使兩條條紋的視覺相等。

下面是一些更加復(fù)雜的不同形狀的條紋例子。

如果正在創(chuàng)建折疊條紋的文本海報(bào)或者是把一張有明顯“discount”字眼的產(chǎn)品卡片放在在線商店里，注意要使他們的視覺重量達(dá)到平衡。如果它是一個(gè)長方形，尖頭邊緣應(yīng)該有點(diǎn)其他形狀。

對(duì)于英文的純文字的段落背景應(yīng)該怎樣調(diào)整？這取決于背景的視覺密度。如果背景是淺色的，可以將段落和其他文本一起突出顯示。

由于背景是淺色的，所以不會(huì)中斷正常的文本流。

一個(gè)可以應(yīng)用密集背景的不同方法。下面圖片中，黑色背景與其余的文本對(duì)齊，而其中的白色文本則以縮進(jìn)形式放置。

與淺色背景不同的是，黑色具有很大的視覺重量，如果目標(biāo)是無縫地插入一個(gè)段落，最好是按照下圖所示的方式對(duì)齊。

對(duì)按鈕和輸入欄也是用相同的原理。這并不是固定模式，只是界面的視覺基礎(chǔ)的愿景。

左邊輸入欄的淺色背景可以超過輸入標(biāo)簽和用戶輸入。右邊緣的“Send”按鈕不完全符合右邊緣輸入背景，從視覺角度看更深色的按鈕的視覺重量更重一些。

右邊的輸入欄有固定的邊緣，標(biāo)簽要和邊緣對(duì)齊，用戶在文本框中的輸入的內(nèi)容要縮進(jìn)?！癝end”按鈕的三角形一邊要向右移動(dòng)一點(diǎn)，這樣才能和上面的矩形輸入欄看起來平衡。

對(duì)其的文本和圖標(biāo)按鈕?？聪旅娴陌粹o是以文本為中心嗎？

右邊按鈕用了一個(gè)小竅門，由于右邊緣是三角形，將單詞稍微向左移了一些。此外，像箭頭一樣的按鈕比矩形按鈕的像素寬40，但看起來卻和矩形按鈕是相同的。

文本按鈕不僅要水平對(duì)齊，字和背景還要垂直對(duì)齊。第一個(gè)方法是用于各種操作系統(tǒng)的界面，網(wǎng)站和應(yīng)用程序。基于大寫字母的字體高度（大寫字母高度），等于“H”或“I”的高度。

基本上，大寫字母的上下空間要和按鈕邊緣相等。由于命令名通常都是在標(biāo)題中寫的，有更多的上半部分出頭的英文字母——上半突出部分(l、t、d、b、k、h)，下半突出部分（y、j、g、p）。

另一種方法是用小寫字體（也叫x高度）的高度將名字和背景對(duì)齊。在無襯線字體中，它等于字母“x”的高度。

這個(gè)方法也很有用的，因?yàn)槲谋镜闹饕曈X重量都集中在小寫字母的區(qū)域。

這些方法有什么區(qū)別嗎？是有區(qū)別，但沒有那么大的區(qū)別。

下面是幾個(gè)例子的對(duì)比。左列的“Cancel”和“OK”的大寫字母高度明顯比右邊的好，因?yàn)椤癈ancel”沒有下半突出的部分，“OK”全部都是大寫，所以通常使用按鈕。右列中只有“Sync”按鈕適合小寫字母高度，因?yàn)樗拿Q有上、下突出的元素;“Cancel”和“OK”的單詞似乎太高了。

圖標(biāo)按鈕的情況稍微有些不同。讓我們來看看當(dāng)下流行的圓形按鈕中的“發(fā)送”圖標(biāo)。哪種圖標(biāo)按鈕更能平衡？

或許你已經(jīng)注意到左邊的圖標(biāo)按鈕有問題。這是由不同的對(duì)齊方式形成的。左邊是將圖標(biāo)當(dāng)成矩形。某一程度上這是對(duì)的，因?yàn)楫?dāng)你將一個(gè)SVG或PNG文件發(fā)給開發(fā)者時(shí)它是在平面上的一個(gè)矩形表單。右邊展示了圖標(biāo)所有的尖頭邊緣都與圓形按鈕背景的距離相等。

如果要給開發(fā)者一個(gè)文件，你需要留一些區(qū)域，以至于可以將圖標(biāo)放在右側(cè)視覺背景的中心。

相同的“Play”按鈕。如果直接將圓角矩形和三角形對(duì)齊，看起來會(huì)很奇怪。

如果想讓三角形的視覺位置看上去更好，對(duì)齊并環(huán)繞這個(gè)按鈕背景的圓。

謹(jǐn)記：

• 有尖頭邊緣的形狀應(yīng)該相對(duì)更大一些，便于與相鄰的矩形保持平衡。
• 對(duì)齊大寫字母是在按鈕背景中定位按鈕名稱的一個(gè)廣泛使用且有效的方法。
• 在按鈕上準(zhǔn)確定位三角形圖標(biāo)的一個(gè)有效辦法是用圓環(huán)繞它且與背景對(duì)齊。

3. 視覺圓角

什么可以比圓更圓？之前我從沒考慮過，但就像我在文章開頭所說的一樣，我們的眼睛很奇怪，有時(shí)看到的并不是我們想的那樣?？纯聪旅鎴D片中的圓，哪個(gè)是最平滑的圓形？

我之前問的人會(huì)在3號(hào)和4號(hào)圓之間做選擇。1號(hào)和2號(hào)明顯過窄，5號(hào)過于飽滿。如果重疊第3個(gè)和第4個(gè)，一個(gè)是幾何圓一個(gè)修正圓，我們會(huì)發(fā)現(xiàn)第2個(gè)比第1個(gè)視覺上稍微重一點(diǎn)，所以我們看上去會(huì)更圓一些。

為了說明我的理解，我用三個(gè)著名的集合字體——Futura、Circe和Geometria來表達(dá)字母“o”。因?yàn)楦哔|(zhì)量的字體是基于人類的視覺感知和復(fù)雜的視覺系統(tǒng)而建立的，所以它們的圓形看起來比幾何圖形更圓。這些字母你看上去會(huì)有不舒服的體驗(yàn)嗎？

把這幾個(gè)幾何圓重疊。即使是最幾何的Futura體的“o”也有四個(gè)部分。Circe和Geometria的字母盡管他們的高度和寬度都相等，但還是比圓寬。

在視覺上，一個(gè)經(jīng)過修改的圓(右邊)看起來比一個(gè)幾何圖形(左邊)更圓。

我們應(yīng)該如何運(yùn)用這一現(xiàn)象呢？例如，在Photoshop、Illustrator或Sketch中使用嵌入的圓角特性，但視覺效果不是很好。

人的視線會(huì)立刻看到直線變曲線，但這一變化很不自然。

確定重新考慮我們視覺感知。

這種圓有一個(gè)超出幾何圓的額外的面積，使直線在變曲線時(shí)不那么明顯。

試著去感受這些圓之間的區(qū)別。

我們現(xiàn)在將這一方法用在圓形按鈕上。

你可能會(huì)注意到右側(cè)按鈕的圓角更平滑，看起來更舒服。

應(yīng)用程序的圖標(biāo)也是一樣的。不能簡化地使用標(biāo)準(zhǔn)圓角達(dá)到完美。在討論這一話題前先來看看2個(gè)不同的圓角形狀。

第1個(gè)是在Sketch上創(chuàng)建的圓角矩形。第2個(gè)是超橢圓，也可以叫作拉梅曲線（Lamé curve）。是由法國數(shù)學(xué)家Gabriel Lamé發(fā)現(xiàn)的，根據(jù)使用的公式，從一個(gè)像四角星形狀變成實(shí)際上是圓形的正方形。

Marc Edwards提出了拉梅曲線公式，它的形狀是平滑而完美的。從iOS 7系統(tǒng)開始的圖標(biāo)都是根據(jù)它做成的。

之后這個(gè)形狀被增加了黃金分割比例和網(wǎng)格，為設(shè)計(jì)師引導(dǎo)新的圖標(biāo)。

使用像超橢圓這樣的形狀的主要好處是它們的很圓且光滑的外觀。另一方面，這些非標(biāo)準(zhǔn)的形狀很難插入到真實(shí)的界面中。你可以將多個(gè)SVG組合在一起，將特殊的公式或腳本加入到代碼中，或者使用像Apple為其應(yīng)用圖標(biāo)所做的PNG掩碼。

關(guān)于設(shè)計(jì)過程本身，有一個(gè)簡單的方法可以解決圓角的問題。需要將可轉(zhuǎn)換的圓形效果轉(zhuǎn)換為一個(gè)輪廓，輸入圖形編輯模式，并手動(dòng)移動(dòng)曲線進(jìn)行處理。

區(qū)別在銳角圓形時(shí)會(huì)更為明顯，這對(duì)于繪制正確的視覺道路或地鐵項(xiàng)目是非常重要的。

謹(jǐn)記：

• 幾何上的圓角看起來更像是人為的，因?yàn)榭梢暂p松的看到一條直線變成曲線。
• 正確的視覺圓角需要特殊的公式或某種形狀上的手動(dòng)調(diào)整。

其他需要注意

有時(shí)一個(gè)不理想的幾何圖形看起來更像一個(gè)近似方形。你可能會(huì)想說，“這是什么廢話?”那么，你對(duì)下面的方塊有什么想法？哪個(gè)形狀看起來更像一個(gè)近似方形呢？

如果你選擇左邊的形狀，你就會(huì)聽到公正的視覺的聲音。

當(dāng)我得知我們的眼鏡比它的寬度更敏感時(shí)很驚訝。它解釋了為什么在幾何字體中，字母“o”總是比幾何圓更寬，字母“H”的垂直部分總是比水平部分粗。

原文作者：Slava Shestopalov

原文地址：https://medium.muz.li/optical-effects-9fca82b4cd9a

譯者：SKYUI

本文由 @SKYUI 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議