網頁設計 ? 視覺設計 ? 視覺錯覺:對稱的UI并非看上去的那樣

視覺錯覺:對稱的UI并非看上去的那樣

發表于: 視覺設計. 評論
Sponsor

我們在UI設計中經常會遇到圖形理論和視覺偏好上的沖突,這時候應該以視覺偏好為標準去決定方案的輸出,即便它不符合理論,但只要符合人眼的視覺偏好,這就是好的方案。視覺錯覺是人眼奇妙的生理特征。大家在設計領域的精進中,對視覺錯覺的了解是非常有必要的,這能夠讓我們了解視覺的特征,從而做出符合視覺偏好的設計。

視覺錯覺:對稱的UI并非看上去的那樣

我擁有被饋贈的禮物——可疑的超能力,能夠一眼就發現設計作品在視覺上的缺陷。對于這種缺陷我就像擁有蜘蛛俠的蜘蛛感應,每當我看見不對齊、扭曲、或者不美觀的東西時,我的后腦勺就會發出刺痛感。

當我看到人們的時候蜘蛛感應就會發作(看那些碩大的手掌!她的頭很小!我的天哪那指甲!它們看上去像是痣!)我嘗試著去阻止這種感覺,然而我不能抗衡我自己這種超能力。

當我看到UI的時候,也會出現蜘蛛感應:無論是在開發新產品、為他人提供建議抑或只是在使用軟件,我一看到UI就立即發現設計上的問題。

因此,為了擺脫這種負擔,我決定整理出一個由視覺錯覺和其他設計原因引起的常見的UI視覺錯覺案例集,并附上我的改正建議,希望這能幫助這個世界創造出更好看的UI(也幫助我擺脫這種不想要的“禮物”)

享受怪胎的表演!(我知道我不會)

01. 說明文本過淺

你有沒有注意到放置在填充形狀旁邊的文本顏色看起來更淺亮?

這是字體平滑效果,使得文本看起來比原始顏色更淺,字體越小,這種視覺效果越強。

下面是示例:

視覺錯覺:對稱的UI并非看上去的那樣

左邊的綠色說明文本看上去比綠色按鈕更亮;

右邊通過使用略深的綠色,帶有一點兒欺騙般,神奇地解決了這個問題。

02. 小字體,更纖細

在某些字體家族中,使用更小的字號會導致文本更加纖細和半透明化(字體平滑效果使然)。

如果你堅持要用小字號(有時候這會營造某種感覺),那就按你想要的來,但請務必加粗:

視覺錯覺:對稱的UI并非看上去的那樣

使用粗體,你的設計仍保持整潔,說明文本依舊纖細,但更加引人注目,而且清晰易讀。

03. 背景圖片上難以閱讀的文本

在背景圖片上放置文本是一種常見的做法,但如果圖片是動態變化的,你要確保無論背景顏色如何,文本都保持可讀性。

這可以通過足夠的對比度和漸變底色來實現:

視覺錯覺:對稱的UI并非看上去的那樣

半透明漸變圖層是一種好方法,即便是放置在淺色背景圖片上也可以確保文本保持可讀性。

本文提供幾種增加對比度而不影響設計整體美感的方法。

順便說一句,我在觀看演講中經常看到這個問題,所以在設計幻燈片時也可以用這種方法。

04. 行距錯誤

說起文本,這是一個重要的內容,處理大字體時,行距可能會成為一個問題:

視覺錯覺:對稱的UI并非看上去的那樣

一個好的經驗法則是,根據字體的不同,將行距設置為比字體大小2pt-5pt。

處理形狀:

彼此相鄰放置不同的形狀會導致一些意外的視覺錯覺。

這是一個著名的米勒-萊爾錯覺示例:

視覺錯覺:對稱的UI并非看上去的那樣

上面2個形狀感覺沒對齊,盡管它們實際上完美對齊。

感覺2個箭頭的長度不一樣,盡管線條實際上是相同的(我知道,我復制/粘貼它們)。

有時,這些視覺錯覺會使你的設計不準確,考慮到你努力使它100%準確,這太可惜了。

在這種情況下,你可能需要一點兒欺騙,微調一些元素,使其中一條線條比另一條線更長,盡一切努力消除視覺錯覺使其看起來對齊:

視覺錯覺:對稱的UI并非看上去的那樣

讓我們深入研究一些真實的UI示例。

05. 元素不對齊

這是一個經典:

視覺錯覺:對稱的UI并非看上去的那樣

左邊 —— 按鈕的圓形邊緣引起的視覺不對齊效果。

右邊 —— 解決這種問題的方法:一種稱為”視覺補正“的技術(通常用在字體中),通過將按鈕往左側微移來修正不對齊的錯覺。

06. 表單對齊的不一致

當表單使用不同元素時(不同形狀、邊框或者水平對齊方式),可能會發生視覺錯覺,使得表單看上去似乎沒有對齊:

視覺錯覺:對稱的UI并非看上去的那樣

左邊 —— 每種元素的設計都略有不同(有些邊框是橢圓形的,有些不是),盡管有明確的對齊策略,但結果讓人感覺完全扭曲。

有許多可能的解決方法 —— 我選擇將所有的圓角改成方角,并將所有的說明文本和邊框對齊。

元素類型更加一致,左對齊的效果就愈加明顯,整個表單變得更加整潔和設計良好。

使用圖標

你是否有過使用的圖標感覺上不對齊的經歷?

下面這些圖標全部來自同一個系列,有同樣的大小和對齊方式。由于每個圖標的性質(和視覺重量)不同,這個系列的圖標在對齊上的表現不太理想。

視覺錯覺:對稱的UI并非看上去的那樣

07. 不對齊的圖標

有時你要做一點兒欺騙,移動/調整某些圖標的大小使其視覺上的對齊:

視覺錯覺:對稱的UI并非看上去的那樣

左邊 —— 一些圖標感覺很大(電話、音頻),而有些圖標則因其設計和物理中心的不同而感覺沒有對齊。

一個可選的解決方案是選擇外觀一致的圖標使其看上去一致(比如一組圓形圖標)。

另一個解決方案(前文介紹過)是微調每個圖標,使其并排放置時的效果更符合人眼視覺偏好。

這意味著你可能要將圖標放置在實際設計中,對其進行修改,重復試錯幾次,直到設計看上去完美為止。

08. 不對稱的圖形

我們在元素中心位置使用非對稱圖形(比如三角形)時,幾何中心會造成視覺上的錯誤,使人感覺圖形放錯位置。

下面是關于”播放“按鈕的經典示例:

視覺錯覺:對稱的UI并非看上去的那樣

左邊的示例是完美的居中(幾何意義上),但右邊的示例看上去更好。

解決方案是微調不對稱對象,直到視覺上的對齊為止。

09. 不同的圖標主題

如果你使用一些現成的圖標,最重要的是選擇看上去像是來自同一系列的圖標。

通常,我們會陷入漫長的尋找過程中,尋找那些最好看的圖標,卻忽略了不同圖標之間的視覺差異。

這是可能發生的情況:

視覺錯覺:對稱的UI并非看上去的那樣

從上面的示例中你可以看出:使用不同主題的圖標(不同形狀、不同重量)使得UI給人的感受是不專業的。

用戶可能經驗不足以說出問題所在,但他們會注意到問題出現在哪里……

確保選擇的是共享相同的調色板、主題形狀、重量和線條寬度的圖標。

10. 按鈕說明文本多行顯示

有時候設計會比復制更好。

下面是示例:

視覺錯覺:對稱的UI并非看上去的那樣

當然,”添加到收藏“比”收藏夾“更好地解釋了按鈕的作用,但是按鈕下方有兩行文本是不可接受的,不僅內容看起來沒有對齊,而且還可能使得放置在這些按鈕下方的所有內容復雜化。

發生這種情況時,設計應該占據上風,修改副本以符合設計規范:要么將所有的按鈕改成兩行內容;要么將“添加到收藏夾”說明文本縮寫成“收藏夾”。

11. 長文本

用戶體驗寫作應該是設計流程中的一環。一些設計考慮因素將決定文本的長度,而某些文本考慮因素將決定設計。

根據經驗,文本應該簡潔明了:

視覺錯覺:對稱的UI并非看上去的那樣

正如他們所說:“寫作很容易,你要做的就是消除錯誤單詞……”。

12. 點擊對象太小

12年后,設計師(和開發者)仍然在創建這些太小而無法點擊的按鈕:

視覺錯覺:對稱的UI并非看上去的那樣

根據尼爾森·諾曼的說法:交互元素必須滿足1cm x 1cm(0.4in x 0.4in)以支持足夠的選擇空間并防止胖手指的點擊錯誤。

蘋果公司在12年前就說過,但找到不容易點擊的按鈕仍然非常容易。解決方法也很明顯:按鈕的尺寸要大于視覺內容的大小(無論是圖標還是文本)。

13. 煩人的邊框半徑

聽說過加斯特羅錯覺嗎?(又名:片段錯覺)

視覺錯覺:對稱的UI并非看上去的那樣

誠然,里面那個形狀的半徑看起來更大,但這只是視覺上的錯誤。實際上,兩個半徑是相同的,但眼睛無法捕捉它們的一致性。

將圓形按鈕放在圓形框架中,會發生相同的事情:

視覺錯覺:對稱的UI并非看上去的那樣

在上面的示例中,框架和按鈕都是一樣的圓角邊框,但它們看起來就是不一樣。

在這種情況下,“欺騙”是通過在框架中使用完全不同的曲率,以消除視覺錯覺。

14. 惱人的邊框(一般而言)

說起邊框,太多的線條會讓你的設計顯得擁擠。

設計師經常討論留白,但隨著產品的演化和新特征的引入(有時沒有經過適當的設計流程),框架和邊框不知不覺間出現:

視覺錯覺:對稱的UI并非看上去的那樣

擺脫便捷,改用空格分隔每組元素,就不會造成不必要的混亂。

15. 使用灰色而不是透明度

許多設計師在標題中使用不同的灰色陰影,從而在標題、副標題和正文之間建立層次結構。

不幸的是,當文本放在彩色元素(例如背景圖像)上時,灰色往往失效了。因此,我們應該使用一定透明度的白色來讓元素吸收背景色:

視覺錯覺:對稱的UI并非看上去的那樣

使用透明度來代替純灰色,這會讓你的半透明元素融合背景顏色,使其感覺上更自然。

這是一個很小的設計技巧,可以帶來更好的結果。

附贈內容:討厭的深色模式

我實際上是在幾個月前就寫好這篇文章,自開始寫作以來,iOS 13 已經發布,深色模式也已經引入。

蘋果公司聲稱它“經過精心設計,讓屏幕上的每個元素都更容易被您的眼睛看到”。但如果你使用過一段時間的深色模式,你就會注意到情況并非如此。這是有原因的:iOS的深色模式使用純黑色作為背景,而純黑色會導致眼睛疲勞。

根據UX Movemen的說法:白色具有100%的顏色亮度,黑色具有0%的顏色亮度。如此大的顏色對比度導致用戶看到截然不同的亮度級別,這會在他們閱讀的時候使他們的眼睛更加努力地適應這種亮度差異。

這個問題的解決方案是用深灰色而不是純黑色作為背景:

視覺錯覺:對稱的UI并非看上去的那樣

不幸的是,蘋果自帶App和目前為止我所嘗試的大多數App都是用純黑色作為背景,這會導致對眼睛的過度刺激。

有兩個App使用深灰色背景來實現深色模式,Slack和Notion。希望會有更多的App采用這種替代方案來實現實際上更適合人眼的深色主題。

以上就是今日份的分享。感謝閱讀!

參考閱讀:

UX Movement(https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/)

原文作者:Gil Bouhnick
原文地址:https://www.mobilespoon.net/2019/08/visually-distorted-when-ui-looks-all.html
翻譯作者:Poto | UI設計師
編輯整理:鉛筆頭 | 設計達人編輯組

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }