可視界面設計就是讓用戶能夠在他們的電子設備屏幕上看到你的界面的物理表現(xiàn)的過程??梢暯缑嬖O計的主要目的是通過精心制作合適的可視界面,讓用戶理解應用程序的用途以及如何操作應用程序。
可視界面設計由一系列過程組成。選擇合適的類型、對齊每個元素、將不同元素以一種有意義的方式組合起來,用戶界面中不同的功能和特性借此傳遞給了用戶。下面就是可視界面設計中的一些主要元素。
1.2.1 布局和定位
布局規(guī)定了界面中所有可視元素的結構。通過元素之間的距離,還確定了元素之間的層級和相互關系。元素距離比較近表明它們之間存在相互關聯(lián),例如圖標下面的標簽。定位也能改變整個界面的流暢性。例如將標簽放在文本輸入框的上面,而不是左邊,這樣我們就可以方便地從上往下掃描所有元素,而不需要先看左邊,然后再找右邊哪個輸入框與其對應。
1.2.2 形狀和尺寸
形狀通常用來區(qū)分元素。例如,通過改變圖標的外形,能夠讓它們被更快、更容易地辨認出來。尺寸經常用來表示重要性,越大的元素就越重要。尺寸也可以改變可點擊控件的可用性。費茨定律告訴我們,一個可點擊區(qū)域越大,用戶將鼠標移動到該區(qū)域就更快。把經常使用的按鈕做大,不僅讓用戶的點擊變得更容易,同時提升了點擊率。
1.2.3 顏色
很多地方都用到顏色。一種顏色在與它反差強烈的背景色下是能夠吸引人的注意(比如,在白色背景中的一個亮黃色警示箱)。不同的顏色可以表示不同的意義。例如,紅色經常用來表示危險或停止(交通燈里的紅燈),所以最好用紅色來表示錯誤信息。而綠色一般用來表示成功或者繼續(xù)進行的信號,所以應當用在表示這類信息的內容上。顏色也可以用來突出顯示一些關系,例如在編輯的時候,根據按鈕的關系,以不同顏色高亮顯示,來幫助用戶識別。
創(chuàng)造一個產品的外觀和感覺并不是可視界面設計的主要目的,而僅僅是一個部分。最主要的目的還是溝通:通過溝通的行為幫助用戶理解應用程序。
在使用顏色的時候要記住兩件事。首先,不同文化中顏色代表的含義有所不同,所以確保你的目標用戶能夠識解你所選顏色的含義。其次,不要忘記色盲用戶,在區(qū)分不同元素時,多花一些心思,使用一些顏色以外的技巧,例如一個圖表中的長條。如果用戶是色盲,他們就不能區(qū)分特定的顏色,多數(shù)色盲患者都是紅綠色盲,所以你需要使用其他的方法,例如形狀、材質等。
1.2.4 對比
一個元素周圍的黑暗或者明亮將會對元素在界面上的可用性產生影響,這其實就是對比度在起作用。白色背景中的黑色文本具有高對比度,比起白色背景中的灰色文字,更容易辨認和閱讀。調低一些元素的對比度,將它們融入到背景當中,用戶就能夠區(qū)分出重要元素和次要元素。
1.2.5 材質
在交互設計中有一個概念叫做Affordance。Affordance 是一種能夠讓用戶明白如何使用一種東西的特質。以把手為例,做一個單向門的最好辦法就是在拉的這一面安裝一個把手,在推的那一面裝一個平坦的手柄擋板??吹介T,人們自然就知道什么時候拉、什么時候推,因為門把手已經告訴了人們如何去使用。也就是
說,提供了最好的互動方式,來讓用戶集中精力于正確的一個上面。
我們可以把這個主意應用到用戶界面設計中,在屏幕上使用材質。例如,在可視界面中一些元素是可以拖拽的,就像在一個窗口的四角,我們可以對這個窗口進行縮放。為了讓用戶知道可以點擊、拖拽它,通常會使用一些粗糙介質的突起?,F(xiàn)實生活中,那些可以用手拉的物品通常會具有比較粗糙的材質。這個主意被轉移到了屏幕上,不同的是我們不再用手指,而是用鼠標來進行拖拽。
Copyright All Rights GreatGoal Design co.,ltd. 魯ICP備16002128號-3