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