50個小技巧提升用戶界面的視覺效果

  眼睛是人體一個很奇怪的器官,因為它總是會對我們說謊。但如果你了解了人類視覺的感知特性,你就可以構建人性化的設計。類型

  400像素的正方形和400像素的圓哪一個大?從幾何的角度來看,圓和正方形的寬度和高度是相同的。但看完下面的圖片我們會發現正方形比圓所占的視覺重量多。視覺重量相關的詞語很適合來描述視覺效果。

  對我而言,很明顯是相等的。因為我將圓形的直徑增加了50像素,所以很難說其中的哪個圖形所占比重大。

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

  為了在視覺上與正方形保持平衡,可以用菱形或三角形來實現相同的效果。相比較它們應該更寬、更高,這樣與正方形的面積才會相似。根據區域的方法可以很好地完成簡單的形狀。

  如何在界面中使用這一特點呢?舉例來說,當你創建一組圖標時,最重要是讓它們平衡,所以圖標沒有太過突出或是太過微小。如果將圖標直接放在正方形區域中,會看起來更大。

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

  最簡單的測試是用模糊的圖標來檢測視覺平衡。如果圖標變成或大或小相似的斑點,它們的視覺比重就是相同的。

  但有些時候我們也會用現有的圖形,比如,作為分享和喜歡按鈕的社交網絡商標。Facebook和Instagram的圖標都是方塊狀的,而Twitter是用一只鳥的剪影來代表的,Pinterest是由一個環繞的“P”代表的。這就是為什么Twitter和Pinterest的圖標會大一點,以至于它們和Facebook和Instagram的圖標看起來是平衡的。

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

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

  對較低的條紋應用了視覺補償。允許尖頭增加20像素超過上面的條紋長度,這個補償尖頭之間的差距,使兩條條紋的視覺相等。

  如果正在創建折疊條紋的文本海報或者是把一張有明顯“discount”字眼的產品卡片放在在線商店里,注意要使他們的視覺重量達到平衡。如果它是一個長方形,尖頭邊緣應該有點其他形狀。

  對于英文的純文字的段落背景應該怎樣調整?這取決于背景的視覺密度。如果背景是淺色的,可以將段落和其他文本一起突出顯示。

  一個可以應用密集背景的不同方法。下面圖片中,黑色背景與其余的文本對齊,而其中的白色文本則以縮進形式放置。

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

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

  右邊的輸入欄有固定的邊緣,標簽要和邊緣對齊,用戶在文本框中的輸入的內容要縮進。“Send”按鈕的三角形一邊要向右移動一點,這樣才能和上面的矩形輸入欄看起來平衡。

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

  文本按鈕不僅要水平對齊,字和背景還要垂直對齊。第一個方法是用于各種操作系統的界面,網站和應用程序?;詿笮醋幟傅淖痔甯叨?大寫字母高度),等于“H”或“I”的高度。

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

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

  下面是幾個例子的對比。左列的“Cancel”和“OK”的大寫字母高度明顯比右邊的好,因為“Cancel”沒有下半突出的部分,“OK”全部都是大寫,所以通常使用按鈕。右列中只有“Sync”按鈕適合小寫字母高度,因為它的名稱有上、下突出的元素;“Cancel”和“OK”的單詞似乎太高了。

  圖標按鈕的情況稍微有些不同。讓我們來看看當下流行的圓形按鈕中的“發送”圖標。哪種圖標按鈕更能平衡?

  或許你已經注意到左邊的圖標按鈕有問題。這是由不同的對齊方式形成的。左邊是將圖標當成矩形。某一程度上這是對的,因為當你將一個SVG或PNG文件發給開發者時它是在平面上的一個矩形表單。右邊展示了圖標所有的尖頭邊緣都與圓形按鈕背景的距離相等。

  什么可以比圓更圓?之前我從沒考慮過,但就像我在文章開頭所說的一樣,我們的眼睛很奇怪,有時看到的并不是我們想的那樣??純聰旅嬙計械腦?,哪個是最平滑的圓形?

  我之前問的人會在3號和4號圓之間做選擇。1號和2號明顯過窄,5號過于飽滿。如果重疊第3個和第4個,一個是幾何圓一個修正圓,我們會發現第2個比第1個視覺上稍微重一點,所以我們看上去會更圓一些。

  為了說明我的理解,我用三個著名的集合字體——Futura、Circe和Geometria來表達字母“o”。因為高質量的字體是基于人類的視覺感知和復雜的視覺系統而建立的,所以它們的圓形看起來比幾何圖形更圓。這些字母你看上去會有不舒服的體驗嗎?

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

  我們應該如何運用這一現象呢?例如,在Photoshop、Illustrator或Sketch中使用嵌入的圓角特性,但視覺效果不是很好。

  應用程序的圖標也是一樣的。不能簡化地使用標準圓角達到完美。在討論這一話題前先來看看2個不同的圓角形狀。

  第1個是在Sketch上創建的圓角矩形。第2個是超橢圓,也可以叫作拉梅曲線(Lamé curve)。是由法國數學家Gabriel Lamé發現的,根據使用的公式,從一個像四角星形狀變成實際上是圓形的正方形。

  Marc Edwards提出了拉梅曲線公式,它的形狀是平滑而完美的。從iOS 7系統開始的圖標都是根據它做成的。

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

  關于設計過程本身,有一個簡單的方法可以解決圓角的問題。需要將可轉換的圓形效果轉換為一個輪廓,輸入圖形編輯模式,并手動移動曲線進行處理。

  有時一個不理想的幾何圖形看起來更像一個近似方形。你可能會想說,“這是什么廢話?”那么,你對下面的方塊有什么想法?哪個形狀看起來更像一個近似方形呢?

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

  網站在前期的時候都是很難上排名的嗎,那么是因為你的網站基礎優化都沒做好,怎么可能會有排名呢,首頁說到了基礎的優化那就要從根本的地方說起。前期就是先把網站的設計和網...

  隨著情人節的結束,2月份的設計圈干貨大合集悄然更新。新的工具新的資源,依然是以往的分量,依然是相同的味道。和過去的合集相似,免費的素材、工具、服務占據了列表中9成的...

  每個網站都是由不同功能不同類型的頁面構成的,當用戶打開錯誤鏈接的時候,網站的404頁面就派上用場了。一個可靠的404頁面在告知用戶他們走錯地方的同時,還應當引導用戶繼續瀏...

  今天來給大家講講如何用Axure實現上下滾動效果。 如何實現上下滾動效果: 讓內容在顯示區域滾動; 內容面板沒有接觸到頂部時,讓內容面板移動至頂部; 內容面板接觸到頂部,沒有接...

  你還在加班為每一個小功能的實現自己“碼碼碼”嗎?今天想早點下班的你,快來看看我最新發現的工具包吧!有了他們,這些功能你只需要直接用,或者用一點時間把他們優化的比作者創造時更...

  @Mockplus原型設計 :許多人可能認為搜索框不需要設計,畢竟這只是兩個簡單的元素。然而,在內容繁雜的網站中,搜索框通常是最常用的設計元素。當用戶遇到相對復雜的網站時,他們...

  一個出彩的登錄界面,將提升產品的品質,賦予產品獨特的氣質。登錄界面也是一個發揮情感化設計,提升用戶體驗,拉近與用戶之間距離的兵家必爭之地。 現在很多的大型網站把登錄...

  這篇文章,給大家分享一個后臺設計的小技巧。 后臺產品的判斷標準 我們已經將后臺產品定義為一款辦公性質的產品,滿足用戶在工作當中的一些需求。這讓后臺產品的好壞能夠簡單...

  好的設計往往需要好的內容作為基礎支撐。無論是內容還是設計,想要讓兩者最大化的搭配,往往是需要進行調整和優化才行。 當你的內容需要遷移到移動端上的時候,要怎么讓內容和...

  網頁首屏的重要性是不言而喻的,用戶打開網頁的第一眼看到的就是首屏中的信息,它是網頁的門面,顏值擔當,也是給予用戶第一印象的核心部分,也是品牌形象呈現的窗口。 值得一...

上一篇:蘇州網站建設公司對于網站長尾關鍵詞的分析
下一篇:「青島市seo」網上商城系統哪家好?從五方面入手
安徽快三

歡迎掃描關注我們的微信公眾平臺!

歡迎掃描關注我們的微信公眾平臺!

{ganrao}