<form id="9lvxn"></form>

      <address id="9lvxn"></address>

        用戶界面設計中的視覺差異

        微鼎云

        2017-05-11 19:07 瀏覽13615

        我們的眼睛很奇怪,因為它經常對我們說謊。但如果你了解人類視覺感知的這種特性,你就能設計出更友好的用戶界面。如果你是一個字體設計者,通過利用人眼的視覺特性,你就能設計出“看上去”更加和諧的字體。如果你是設計用戶和機器交流方式的界面設計師,了解這種視覺特性,對你的工作也會十分有用。究竟這種視覺特性是什么?請繼續往下看。

          1. 幾何視角和人眼視角

          你覺得下圖中的正方形和圓哪個較高?

          是不是感覺左邊的正方形比右邊的圓大很多。但是如果我告訴你,從幾何的角度來看,它們的寬度和高度是一樣的。我知道你一定覺得我再騙你,那我只能標注一下刻度了。

          我們再來看一張圖,你看一下這張圖中的正方形和圓的高度(直徑)是不是一樣?

          對我來說,正方形的高度和圓的直徑看上去是一樣的,換句話說,我不能馬上告訴你它們哪個更大。不知道你是不是也有相同的感覺?

          其實,是因為我把圓的直徑增加了50像素。

          為了說明這個問題,我把上面兩個例子(一個是:400像素的正方形和圓;另一個是:長為400像素的正方形和直徑為450像素的圓)中的圖形重疊后得到如下圖所示的圖。

          如上圖所示,左邊中的正方形比圓形多了區域a的部分,右邊中的圓形比正方形多了區域b的部分。左圖中的正方形完全包住了圓形,而右圖中的正方形和圓形相對比較均衡。他們兩個沒有任何一方完全包住了另一方,相反,他們都比對方多出了四個區域。而且,右圖中的正方形和圓形的部分區域是重合的,雖然正方形的寬度和圓的直徑是不一樣的。

          我們可以在正方形和菱形的對比中發現同樣的現象。為了讓他們看上去一樣,正方形要稍微寬一點、稍微高一點?;诿娣e大小的處理方式在各種簡單的形狀是完全有效的。

          有沒有覺得上圖中1比2大,3比4大?

          那在我們設計界面時,我們怎樣運用這種原則呢?

          舉個例子,當你設計一組圖標時,很重要的一點是讓這組圖標看上去是一樣大的,這樣就不會有某些圖標過于突出,也不會有某些圖標看起來太小。如果我們直接把圖標放到正方形區域里,那么,那些比較方的圖標看起來會更大一點。如下圖所示。

          有沒有覺得2比1大,4比3大?

          因此,我建議在設計圖標時,稍微調整一下不同形狀的圖標的大小。讓那些看起來小一點的圖標稍微大一點,而讓那些看起來比較大的圖標稍微小一點。如下圖所示。

          事實上,現在很多圖標確實做了這樣的微調。

          現在我們應該清楚為什么圖標區總是比圖標本身大一點了吧——僅僅是因為想讓不是方形的圖標看上去和方形的圖標一樣大。

          其實,最簡單的測試用戶視覺區域大小的方式是模糊圖標。如果模糊后圖標產生的像素差不多,那這些圖標看上去也就是一樣大的了。

          但是實際工作中,我們經常要用到已經存在的圖標。比如,經常用于分享和點贊的社交網站logo。Facebook和Instagram的圖標是方形的,而Twitter的logo是一個鳥的輪廓,Pinterest的logo是被圓包圍的“P”。這也是為什么Twitter和Pinterest的圖標比Facebook和Instagram大一點的原因,因為這樣它們四個的圖標看上去才是一樣大的。

          另一個視覺平衡的例子如下圖,當一個文本框后放著一個圓形的按鈕時。如果圓形按鈕的直徑等于文本框的高度,那么這個圓形按鈕看上去會比文本框小一點。但是如果你把圓形按鈕的直徑變大一點點,整個設計看起來會更均衡。

          但是如果你調整了圓形按鈕的風格,那就不需要調整按鈕的直徑了,如下圖所示。圓形按鈕和文本框的高都是80像素,但是由于圓形按鈕填充了黑色的背景色,兩者就看不出來哪個小了。

          總結(敲黑板):

          視覺大小是人類眼睛感知道的物體的大小和意義,這和物體實際的像素大小不一定相等。

          圓形、菱形、三角形等其它非正方形的圖標需要稍微大一點,這樣才能和其它正方形的圖標看上去一樣大。

          圖標應該要留有一定的空間用于視覺平衡。這對一組圖標看上去一樣大是非常重要的。

          2 不同形狀的一致性

          視覺一致是對視覺平衡話題和視覺重量話題的邏輯延伸。拿下圖中的條紋舉例子,你看一下它們的長度一樣嗎?

          從像素的角度來說,它們的長度是完全相同的。然而,很多人乍一看,都會覺得下邊的條紋短一點。

          再看一下這張圖,你覺得它們的長度還一樣嗎?

          我借鑒了視覺補償原理,將下邊的條紋長度增加了20像素,以補償兩個條紋之間上的視覺差距,使得這兩個條紋的長度看起來一樣。

          當然,還有一些更成熟的不同形狀的條紋的例子,如下圖所示。

          因此,如果你正在設計海報折疊效果的條紋效果,或者你正往電子商城里的產品上系打折的條紋,確保這些條紋看上去均衡。尖銳的條紋邊緣應該超出其它形狀一點點,尤其是長方形的條紋。

          那純文本和帶有背景色的段落要怎么放置呢?這取決于段落背景的視覺密度。如果背景色比較明亮,那么你可以在純文本里突出顯示段落。

          由于背景色比較明亮,通常不會打斷用戶閱讀的文本流。

          但是如果背景色更暗一點,這種方法就不再適用了。如下圖,黑色背景和剩下的文字對齊,而白色文字往里面縮進了幾個字符。

          為什么要這么做呢?和明亮的背景色不同的是,黑色的背景色有大量的視覺重量,如果把它放在段落中間,和其它的段落間距沒什么區別,那么最好的放置方式是和文字對齊,而不是突出一部分。

          同樣是原則適用于按鈕和輸入框的位置擺放中,如下圖。這并不是一個標準,僅僅只是考慮到界面的視覺效果。

          左圖中,輸入框的亮背景色可以稍微超出輸入框和用戶輸入的部分?!鞍l送”按鈕的右側并不需要完全和輸入框的右邊對齊,因為發送按鈕的背景色比較深,人眼看起來更重一點。

          右圖中,輸入框有黑色邊框,我把輸入框和文字標簽對齊了,把用戶輸入的內容往輸入框里縮進了一點?!鞍l送”按鈕有一邊是三角形的,因此,我把它稍微向右放了一點點,以讓它和正方形的輸入框看上去比較和諧。

          上圖中,我們提到了文字和圖標按鈕的對齊,現在我們就要討論一下這部分。如下圖,你看一下,文字相對按鈕是居中的嗎?

          你能發現,我把右邊按鈕中的文字稍微往左邊移動了一點嗎?因為右邊按鈕的右邊緣是三角形,而不是正方形。另外,右邊按鈕比左邊按鈕寬了40像素,使得它們看上去是一樣大的。如下圖所示。

          文字按鈕不僅有水平對齊,也存在文字和背景的垂直對齊。我想告訴大家的第一種方法經常在各種操作系統、網站和應用界面設計中使用。它是根據字體大寫字母的高度(所謂的的大寫字母高度)對齊的,它的高度等于大寫字母“H”或“I”的高度。

          基本上,在按鈕中,大寫字母距按鈕頂部和底部的距離都是相等的。這是合理的,因為按鈕的名字都是寫在標題中的,而且英文字母中的上行字母(ascender,字母向上斜,比如:l、t、d、b、k、h)比下行字母多(descender,字母向下斜,比如:y、j、g、p)。

          另一種方法是在文字按鈕中根據小寫字母的高度對齊(所謂的X高度)。在sans和sans serif字體中,這個高度等于字母“x”的高度,不要驚訝哦~

          這種方法也是合理的,因為文字的主要光學重量會集中到小寫字母所在的區域。

          那這兩種方法之間有什么區別嗎?

          雖然這兩種方法之間有區別,但是區別不是很大,如下圖。

          我們再來看幾個例子。

          下圖中的左側所代表的是根據大些字母對齊的方式,這也是“Cancel”和“OK”按鈕最常見的擺放形式。因為“Cancel”沒有下行字母,“OK”都是大寫字母。

          下圖中的右側所代表的是根據x高的對齊方式。這對“Sync”按鈕來說是最好的擺放形式,因為它剛好有一個上行字母和一個下行字母。相對來說,“Cancel”和“OK”的擺放形式看上去有點靠上。

          而在圖標按鈕中又有些許不同。讓我們把常見的“發送”圖標放在一個圓形的按鈕中,如下圖。你看一下哪種放置方式看起來更和諧?

          可能你已經注意到上圖左邊的按鈕看上去不太對勁。這是因為不同的對齊方式引起的。第一個按鈕把三角形的圖標當成了矩形。在某種程度上它是對的,因為當你把SVG或PNG格式的圖標發給研發時,研發會把它放在一個正方形的區域里。而第二個按鈕在放置圖標時保證圖標每個角到圓形按鈕邊緣一致。如下圖所示。

          當你在給研發準備圖標時,你需要預留一些區域,以保證研發把圖標放在正方形的背景里可以居中,并且看上去是和諧的。

          這在“播放”按鈕中也是一樣的。如果你直接把三角形的圖標居中放在正方形的背景里,如下圖左邊所示,它看上去會很奇怪。

          但如果你想要三角形看上去和諧,那你可以把它當成一個圓形,然后讓正方形的背景和它居中對齊。

          總結(敲黑板):

          帶有棱角的形狀要比沒有棱角的形狀稍微大一點,才能和正方形的物體看上去一樣大。

          大寫字母對齊廣泛使用在有背景的按鈕上放置按鈕名字時。

          有效處理三角形圖標在按鈕上的放置位置的方法是,將三角形當成一個圓形,然后再和背景對齊。

          3 光學圓角

          有什么東西會比圓形更圓呢?之前我一直以為這種東西是不存在的。但是正如我在文章開頭說的那樣,我們的眼睛很奇怪,有時候它感知到的事物并不是我們期待的那樣。

          你看一下下圖中哪個圓是最圓的?

          這個問題我問了很多人,他們都會在 圖3 和 圖4中選擇。圖1 和圖2明顯不夠圓,而圖5看起來太扁了。如果我們把圖3的幾何圓和圖4的變體圓重疊在一起,我們會發現,圖4看起來會比圖3更圓一點,如下圖,左圖為上圖的圖3,右圖為上圖的圖4,中間為兩者的重疊圓。

          為了更好地說明這個問題,我以字母“o”的三個常見幾何字體為例:Futura、Circle和Geometria。由于高質量的字體都是以人類視覺感知系統的基礎上、使用先進的視覺建設系統而建立的,我想他們比幾何上的圓看起來更圓。你是不是也有這種感覺呢?

          我們把幾何上的圓和上面三個圖重疊起來得到下面這個圖。即使是最接近幾何圖形的字體Futura居然也突出了四部分,而字體Circle和字體Geometric都比幾何上的圓更寬。當然,這個比較是在高度和寬度都一樣的前提下進行的。

          因此,從視覺這個角度講,根據相關規則調整后的圓會比幾何上的圓看起來更圓。如下圖所示。

          左邊為幾何上的圓。

          那我們在設計時如何利用這種現象呢?

          是的,你沒猜錯,我們在設計圓角的時候可以利用這種現象。如果你使用當下流行的Photoshop、Illustrator或Sketch等圖像編輯軟件畫圖,畫出來的圖是幾何上的圖形,而不是看上去更和諧的圖。如下圖所示。

          有沒有覺得這個圓角是一條直線突然變成了曲線,換句話說,這個圓角看上去一點都不自然。

          我根據我們的視覺感知微調了一下這個圓角,如下圖。

          我在本身的圓角上又增加了一個區域,使得直線到曲線的漸變看上去更加平和。如下圖。

          你可以從下圖看一下兩張圓角之間的區別。

          我們也可以在圓角按鈕上使用這個方法,如下圖。

          我猜你已經發現上圖中右邊的按鈕的圓角看上去更加平滑,看起來更舒服一點。

          同樣,我們也可以把它運用到app icon的設計上。一個并不簡單的圓角使用標準達到了一個完美的結果。但是既然我們已經談到這個話題,我們不妨自己試一試這兩個圓角有什么區別。

          如上圖,左側的圖是我用Sketch畫出來的標準的圓形。右側的圖是superllipse,也就是俗稱的 Lamé curve。 Lamé curve是法國數據家Gabriel Lamé發現的。

          Marc Edwards指出Lamé curve的公式會產生更佳平滑、看上去更加完美的形狀。iOS 7 之后的圖標也在使用它。

          之后,這個形狀又根據黃金分割比和指導新圖標設計的網格調整為如下圖所示,但這已經是另外一件事情了。

          使用像superellipse這樣的形狀最大的好處就是他們看起來更圓、更平滑。但是,這種非標準形狀很難使用到真實的界面中去。它們應該可以將多個特殊公式的SVG合并得出,或者使用一些腳本,或者像蘋果公司在它們的app 圖標上做的那樣使用PNG的蒙版。

          那在設計過程中,如果調整圓角呢?

          你需要將默認的圓角轉換為大綱,然后打開形狀編輯模式,手動調整曲線的位置,如下圖。

          調整后的圓角比精確輸入的圓角度數看起來更加形象,這對視覺校正圖像來說是很重要的。

          左:調整前

          總結(敲黑板):

          幾何上的圓角看起來更假一點,因為你能很明顯地看出是一條直線突然變成了一個曲線。

          視覺校正的圓角需要特殊的公式或者手動調整形狀。

          彩蛋

          有些時候,你是不是覺得自己畫出來的正方形看起來并不正,也不方?

          你可能會想,這不是胡說嗎?那么,請看一下下圖中的兩個正方形,哪一個看起來更方一點呢?

          哪個更像正方形?

          如果你的選擇是左邊那個,那么你可能是聽從了來自無偏光學感知的內心聲音。

          其實右邊更方正。

          就我個人而言,當我知道我們的眼睛對物體的高度比寬度更敏感時,我感到十分驚訝。而這也解釋了為什么幾何字體字母“o”的寬度比幾何上更寬、大寫字母“H”垂直的部分為什么總比水平的部分更寬。


        完全免费在线视频网站,网红主播自拍喷水,网红主播在线观看,未满十八岁视频网站,d2天堂直播在线观看