圭谷設(shè)計(jì)已經(jīng)與大家討論過什么是用戶界面,用戶界面應(yīng)該具備什么樣的特點(diǎn),以及我們可以使用的建設(shè)網(wǎng)站用戶界面的工具,現(xiàn)在讓我們看一些可以應(yīng)用在你的網(wǎng)絡(luò)應(yīng)用或網(wǎng)站上的實(shí)用技術(shù)。
1.網(wǎng)站建設(shè)之使用空白來構(gòu)建聯(lián)系
空白指在各種內(nèi)容元素之間的空白區(qū)域,比如標(biāo)題、正文和按鈕。當(dāng)在不同網(wǎng)站?元素間建立聯(lián)系時(shí),空白是一個(gè)非常重要的工具。通過縮小元素之間的空白,能夠把一些相關(guān)的項(xiàng)目組成一組。增加這些分組之間的空白能夠更加強(qiáng)調(diào)這些分組與其他內(nèi)容之間的聯(lián)系。使用空白,我們可以分組相關(guān)的控件,也可以構(gòu)建頁面中元素之間的層級關(guān)系。
2.網(wǎng)站建設(shè)之使用圓角來定義邊界
圓角通常用來改善網(wǎng)站?圖片元素的觀感。它們看起來非常舒服,并且能夠?yàn)槟愕木W(wǎng)站?界面增添平滑感,但這并不是圓角的全部功能。圓角通常定義一個(gè)對象的邊界。當(dāng)看到圓角時(shí),你就知道已經(jīng)到了容器的邊界。如果是一個(gè)直角,后面再跟另一個(gè)直角的容器,它們之間的界限會(huì)不太明顯。而圓角,或其他任何類似視覺上的處理,都能夠讓分界線變得更為明顯。
3.網(wǎng)站建設(shè)之?用顏色來表達(dá)含義
顏色是一個(gè)重要的溝通工具,例如,定義不同的元素。你可以在網(wǎng)站?應(yīng)用程序中使用不同的顏色來區(qū)分不同青島網(wǎng)站建設(shè)?功能的按鈕。紅色常被用在一些表示破壞性的按鈕上,諸如刪除或移動(dòng);藍(lán)色一般用在標(biāo)準(zhǔn)按鈕上;綠色則用在保存和更新操作按鈕上。使用代碼著色,我們可以分辨出屏幕中用戶創(chuàng)建的各種各樣的數(shù)據(jù),讓它們變得更容易閱讀。
4.網(wǎng)站建設(shè)之?引導(dǎo)用戶的注意力
使用動(dòng)畫來提醒用戶關(guān)注。有時(shí)候,單獨(dú)使用顏色和對比度還不足以吸引用戶的注意。如果一件很重要的事情發(fā)生了,你也確實(shí)需要確保用戶能夠注意到,那么就使用動(dòng)畫。人類的眼睛非常適合捕捉移動(dòng)的事物,特別是在固定背景中運(yùn)動(dòng)物體。如果用戶在他的輔助工作的應(yīng)用程序中添加一條待辦事項(xiàng),或者向購物車中加入一件商品,這個(gè)時(shí)候就可以使用動(dòng)畫來突出正在發(fā)生的事情。例如,當(dāng)在網(wǎng)站?屏幕中創(chuàng)建一個(gè)項(xiàng)目的時(shí)候,可以使用高亮的效果。對于那種使用很多Ajax 技術(shù)的應(yīng)用來說,這一點(diǎn)特別有用。在這些情況下,頁面中的操作并不會(huì)導(dǎo)致頁面的刷新,高亮的部分彈出來告訴用戶發(fā)生了什么事情。
5.網(wǎng)站建設(shè)之?使用陰影
另外一個(gè)將用戶注意力集中到某一區(qū)域的方法是使用陰影和加深背景。陰影通常被設(shè)置在彈出菜單或者模式窗口四周,像一張?zhí)鹤右粯诱谧×舜翱谒闹艿母蓴_元素。陰影降低了窗口下方其他元素的對比度,反過來就增強(qiáng)了用戶使用區(qū)域的對比度。同樣可以在窗口底部使用一個(gè)黑色(或亮一點(diǎn))的半透明層,減少它所覆蓋內(nèi)容部分的視覺干擾,從而讓用戶的注意力集中在網(wǎng)站?窗口上。
6.網(wǎng)站建設(shè)之?強(qiáng)調(diào)核心的動(dòng)作
網(wǎng)站?應(yīng)用程序大多有自己特別的主要和次要界面。例如,當(dāng)你在青島網(wǎng)站制作應(yīng)用程序中創(chuàng)建項(xiàng)目時(shí),主表單通常包含項(xiàng)目名稱、項(xiàng)目截止日期、優(yōu)先級,等等。在表單底部,你會(huì)看到一個(gè)“創(chuàng)建”按鈕。通常你還會(huì)看到一個(gè)“取消”按鈕或者文本的鏈接。因?yàn)橛脩舨唤?jīng)常使用,所以“取消”按鈕并不是很重要,因此,你就可以減少這個(gè)按鈕的視覺“分量”。例如,可以把“創(chuàng)建”做成一個(gè)按鈕,而“取消”只做一個(gè)沒有任何視覺網(wǎng)站?效果的超鏈接。這樣中心就放在了主要的操作上,用戶完成表單的時(shí)候就能很快地定位到操作按鈕。
7.網(wǎng)站建設(shè)之?使用塊狀鏈接提高效率
使用帶填充的塊狀鏈接可以用來方便地將鼠標(biāo)定位到鏈接。網(wǎng)絡(luò)應(yīng)用程序構(gòu)建在HTML 元素的基礎(chǔ)上,也就意味會(huì)使用很多的錨(通常稱為鏈接)標(biāo)簽。錨標(biāo)簽?zāi)J(rèn)是“內(nèi)聯(lián)(inline)”元素,意味著它的寬度和高度只是在文本的內(nèi)部。反過來就是說,可以點(diǎn)擊的區(qū)域和文本的范圍一樣,在很多情況下顯得太小,用戶不能夠很精準(zhǔn)、舒服地進(jìn)行點(diǎn)擊。而你可以對錨鏈接使用內(nèi)邊距來使它變大。對于列表中的鏈接,就像側(cè)邊欄,將錨鏈接轉(zhuǎn)化為“塊元素”是個(gè)更好的辦法。通過使用CSS 的“display”屬性,我們可以轉(zhuǎn)換一個(gè)元素的類型,所以給錨鏈接增加一個(gè)“block”屬性, 就能將其轉(zhuǎn)化為一個(gè)塊元素,塊元素的寬度和高度就不再局限于文本的尺寸,而默認(rèn)會(huì)擴(kuò)展到包含它的容器的寬度。這種方法非常適合側(cè)邊欄中的鏈接。
8.網(wǎng)站建設(shè)之?用動(dòng)詞作標(biāo)簽
用戶在使用網(wǎng)站?應(yīng)用程序的時(shí)候,總是準(zhǔn)備去做一些事情,他們總是在想動(dòng)詞。“我想保存這個(gè)文件”或者“我想更新這篇文章”。在創(chuàng)建對話框或者其他需要用戶處理的應(yīng)用時(shí),使用動(dòng)詞而不要使用像“是的”、“不是”、“好的”這樣的表述。當(dāng)用戶看到像“好的”或者“取消”這樣的選項(xiàng)時(shí),他們需要去閱讀額外的信息來搞明白他們要做什么。如果你使用動(dòng)詞,例如“保存”、“不保存”和“取消”,用戶就不需要再看其他的消息,他們馬上就知道這個(gè)對話框或選項(xiàng)是做什么的。
9.網(wǎng)站建設(shè)之?輸入時(shí)自動(dòng)/ 重新聚焦
在網(wǎng)站文件加載完成后自動(dòng)激活主表單中的輸入框會(huì)給基于表單的應(yīng)用帶來很大的好處。例如,Google 的搜索引擎頁面自動(dòng)將焦點(diǎn)定位在網(wǎng)站?頁面的輸入框中,因?yàn)閹缀跛械竭_(dá)Google 首頁的人都想在輸入框中鍵入需要查找的內(nèi)容。在其他的應(yīng)用環(huán)境中自動(dòng)激活輸入框也非常有用,例如,在那種需要連續(xù)輸入的應(yīng)用中,就像創(chuàng)建購物清單,在輸入第一個(gè)物品之后,用戶想接著輸入下一個(gè),所以可以重新激活輸入框,讓用戶快速、持續(xù)地進(jìn)行輸入。
10.網(wǎng)站建設(shè)之?使用懸浮控件進(jìn)行簡化和解構(gòu)
很多網(wǎng)站?應(yīng)用程序都有一套與內(nèi)容緊密相關(guān)的控件,例如一個(gè)列表中的刪除按鈕和記錄的編輯按鈕。為了方便定位,通常這些控件放在了每條記錄的后面,但是這種情況下就造成了大量的重復(fù)。多數(shù)的時(shí)間里,用戶并不需要這些控件,需要時(shí),也僅僅需要其中一個(gè)特定條目的網(wǎng)站?控件。
如果使用懸浮控件,可以在用戶將鼠標(biāo)移動(dòng)到一個(gè)特定區(qū)域后才顯示,這樣可以簡化網(wǎng)站?界面。例如,當(dāng)鼠標(biāo)停在你想編輯的記錄上時(shí),一個(gè)編輯按鈕就會(huì)顯現(xiàn)出來,但是其他記錄的編輯按鈕仍然保持隱藏。
懸浮控件是一個(gè)很棒的解構(gòu)和簡化網(wǎng)站?界面的方法,但是在使用這個(gè)方法之前,你還需要考慮兩件事情。首先考慮控件是否能被找到。用戶在使用之前,往往需要先找到這個(gè)網(wǎng)站?界面中的元素。你的控件是否做得足夠顯著以吸引用戶注意?用戶經(jīng)常很自然地移動(dòng)鼠標(biāo),停留在他們正在瀏覽的項(xiàng)目上,所以這也許并不是一個(gè)大問題,但是仍然值得去思考。其次,移動(dòng)設(shè)備上的網(wǎng)站瀏覽器也許不能模擬鼠標(biāo)的動(dòng)作,那么這些控件將無法使用。
11.網(wǎng)站建設(shè)之?動(dòng)態(tài)擴(kuò)展表單
如果表單中的一個(gè)輸入框中需要輸入多個(gè)數(shù)據(jù)記錄,例如,在一段網(wǎng)站?文本之后附加多個(gè)文件,或者向數(shù)據(jù)庫中的公司記錄里添加多個(gè)人員信息。這種情況下,可以使用動(dòng)態(tài)擴(kuò)展表單,以一種優(yōu)雅的方式來實(shí)現(xiàn)需求。因?yàn)橛脩裘看沃荒茉谝粋€(gè)輸入框中進(jìn)行操作,所以每次也只需要顯示一個(gè)輸入框。當(dāng)用戶填完并且增加了一條記錄后,程序會(huì)在新記錄后再創(chuàng)建一個(gè)額外的輸入框,允許用戶鍵入更多的信息。這種方法替代了同時(shí)顯示多個(gè)空輸入框的形式,每次你只需要顯示一個(gè)空的輸入框,但是允許用戶輸入需要的內(nèi)容。
12.網(wǎng)站建設(shè)之?輸入框中的標(biāo)簽
網(wǎng)站?界面的簡化需要不斷地思考總結(jié)。如果你想要砍掉一些不必要的元素,并且為剩余的網(wǎng)站?元素更好地利用空間,將標(biāo)簽放到輸入框內(nèi)部是一個(gè)巧妙的辦法。這不僅節(jié)省了網(wǎng)站?空間,也清楚地表明了與輸入框?qū)?yīng)的標(biāo)簽。
13.網(wǎng)站建設(shè)之?上下文敏感的界面元素
如果希望為高級用戶整合一些額外的功能,但是又不想讓青島網(wǎng)站設(shè)計(jì)?頁面臃腫,這時(shí)就可以通過提供按需增加的上下文元素來實(shí)現(xiàn)。例如,你的應(yīng)用中有一個(gè)帶高級搜索的搜索條,在沒有使用的時(shí)候只顯示搜索條,當(dāng)用戶單擊時(shí)再顯示一些額外的控件。這樣,網(wǎng)站?界面仍然保持了簡潔,實(shí)現(xiàn)高級的功能也只需要一次點(diǎn)擊。
14.網(wǎng)站建設(shè)之?圖標(biāo)
使用網(wǎng)站?圖標(biāo)能夠簡化界面、讓網(wǎng)站?界面看起來更有吸引力,但是在使用之前也有一些因素需要好好考慮。語言幾乎總是比網(wǎng)站?圖標(biāo)表達(dá)得更清楚。寫一個(gè)標(biāo)簽非常容易,只要表明這個(gè)按鈕的作用就行。然而在設(shè)計(jì)網(wǎng)站?圖標(biāo)的時(shí)候,則需要用有效的意象來描述操作。如果圖標(biāo)是一些很本土化的東西,你選擇的意象在不同的國家可能會(huì)有不同的理解(甚至連垃圾桶的形狀在世界各地都是不同的)。
屏幕中同時(shí)沒有太多的網(wǎng)站?圖標(biāo),每個(gè)圖標(biāo)都能夠同其他圖標(biāo)明顯地區(qū)分開,這樣圖標(biāo)才能發(fā)揮出最好的作用。這意味著形狀和顏色是創(chuàng)建一套成功圖標(biāo)的重要因素。使用正確的圖標(biāo),能夠讓界面更容易使用。因?yàn)橐坏┯脩羰煜ち诉@些圖標(biāo)的含義,通過形狀和顏色的區(qū)別,用戶就能很快找到他們想要的圖標(biāo)。
15.網(wǎng)站建設(shè)之?使用加載指示器
沒有人喜歡等待。等待意味著本來可以做一些有價(jià)值的事情的時(shí)間里,你卻什么都沒有做。但是很不幸,載入每個(gè)程序都需要花費(fèi)一些時(shí)間,比如導(dǎo)出一個(gè)大文檔或者通過查詢返回結(jié)果,用戶不得不等待。但是,可以通過使用加載指示器來讓用戶覺得等待的時(shí)間變短了[注釋]。在加載過程中,可以增加一個(gè)指示器,比如旋轉(zhuǎn)的動(dòng)畫或者進(jìn)度條。研究表明,在指示器存在的情況下,用戶感覺等待時(shí)間變短了 。加載指示器對短時(shí)的等待非常適用,但是對于一個(gè)需要一分鐘甚至更多時(shí)間的情況呢?如果你在加載的這段時(shí)間里什么都不能做(假設(shè)你已經(jīng)為減少加載時(shí)間做了最大的努力),你還是可以做一些事情來改善用戶的等待體驗(yàn)。利用這段時(shí)間提供娛樂或者信息。例如,很多應(yīng)用程序在長時(shí)間的等待過程中會(huì)顯示一些有趣的提示或技巧。如果用戶確實(shí)做不了任何工作,起碼他們可以學(xué)到一些新東西。
16.網(wǎng)站建設(shè)之?使用按鈕狀態(tài)提高響應(yīng)性
網(wǎng)站?應(yīng)用程序的響應(yīng)性并不僅僅依賴于后臺代碼結(jié)構(gòu)的優(yōu)化。用戶網(wǎng)站?界面同樣也扮演了非常重要的角色。在可視界面中被使用最多的一個(gè)元素就是按鈕。在桌面應(yīng)用程序中,按鈕具有多種狀態(tài),最常見的是按鈕默認(rèn)狀態(tài)和鼠標(biāo)單擊后的狀態(tài)。
網(wǎng)站?按鈕按下的狀態(tài)看起來就像真的被按下去那樣。這個(gè)狀態(tài)提示用戶,他們的單擊已經(jīng)成功地執(zhí)行了。像在桌面應(yīng)用程序一樣,按鈕的按下狀態(tài)同樣可以使用在互聯(lián)網(wǎng)應(yīng)用中,為用戶提供一些額外的反饋和響應(yīng)。
17.網(wǎng)站建設(shè)之幫助性的空白狀態(tài)
當(dāng)用戶第一次加載應(yīng)用的時(shí)候,屏幕上不會(huì)顯示過多的內(nèi)容;用戶還沒有輸入數(shù)據(jù),也沒有什么好顯示的。在這個(gè)空白狀態(tài)中添加簡短的幫助信息,來引導(dǎo)用戶如何開始。為了讓事情更加簡單,你甚至可以在信息中加入一個(gè)鏈接,將用戶帶到推薦的操作。例如,一個(gè)管理電子郵件廣告的程序,用戶創(chuàng)建了一個(gè)新賬戶后登錄,應(yīng)該提供給用戶一段幫助信息,其中包含一個(gè)鏈接到創(chuàng)建新廣告的界面。
18.網(wǎng)站建設(shè)之?宣傳應(yīng)用的特點(diǎn)
用戶對你的應(yīng)用并不是十分了解,所以一些情況下在應(yīng)用中合理使用廣告是一個(gè)很好的辦法。同時(shí),由于互聯(lián)網(wǎng)產(chǎn)品經(jīng)常會(huì)進(jìn)行一些細(xì)微的更新或者時(shí)不時(shí)推出一些新功能,所以通過廣告的方式讓你的用戶知道這些變更就變得更有意義。一般情況下,可以通過在屏幕中的顯著位置放置一個(gè)小塊通知的方式來實(shí)現(xiàn)。通知區(qū)域應(yīng)當(dāng)吸引眼球但又不至于讓用戶分心,影響用戶的正常工作。用戶讀了這個(gè)通知以后,應(yīng)該可以關(guān)掉它。
19.網(wǎng)站建設(shè)之?撤消操作
桌面網(wǎng)站?應(yīng)用程序最常用的特性之一是,值得信賴的撤消快捷鍵。不小心改變了正在編輯的文檔圖表格式?沒問題,按Ctrl+Z/Cmd+Z 組合鍵,應(yīng)用程序會(huì)采取撤消操作,把你的文檔恢復(fù)到最后一個(gè)動(dòng)作之前的狀態(tài)。撤消操作是容錯(cuò)界面的一個(gè)重要工具,它也可以應(yīng)用在頁面應(yīng)用程序中。例如,你可以在網(wǎng)站應(yīng)用程序中加入這些熟悉的快捷鍵或者顯示一些帶有撤消鏈接的臨時(shí)通知信息。
20.網(wǎng)站建設(shè)之?還原操作
人們在刪除一些東西之后,通常會(huì)反悔,所以在你的網(wǎng)站?應(yīng)用程序里增加額外的保護(hù)措施來處理一些比較重要的數(shù)據(jù)是一個(gè)明智的做法。例如,項(xiàng)目管理中的項(xiàng)目文件。用戶刪除一個(gè)項(xiàng)目時(shí),將其進(jìn)行存檔而不是立即刪除。如果用戶改變主意,希望把他們需要的項(xiàng)目文件取回時(shí),程序可以輕松地將它們還原。當(dāng)用戶發(fā)現(xiàn)所有的東西并沒有丟失而感到非常高興時(shí),消耗一點(diǎn)用戶的磁盤空間是值得的。
21.網(wǎng)站建設(shè)之確認(rèn)對話框
當(dāng)在網(wǎng)站?應(yīng)用程序中進(jìn)行諸如刪除記錄這樣的破壞性操作時(shí),提供一個(gè)確認(rèn)對話框,提醒用戶是否確實(shí)要進(jìn)行接下來的操作是非常必要的。特別是當(dāng)刪除按鈕的位置和其他控件非常近的時(shí)候。如果用戶不小心點(diǎn)擊了刪除按鈕,在生效之前用戶可以取消操作。但是,不要過度使用這個(gè)特性,因?yàn)椴槐匾獙υ捒蚶L了操作過程并讓人生厭。
青島網(wǎng)站建設(shè)哪家好?靠譜的網(wǎng)站建設(shè)公司找圭谷設(shè)計(jì),5-17年經(jīng)驗(yàn)的專業(yè)團(tuán)隊(duì)為您的網(wǎng)站進(jìn)行一對一量身定制!響應(yīng)式網(wǎng)站建設(shè)找圭谷設(shè)計(jì)!
Copyright All Rights GreatGoal Design co.,ltd. 魯ICP備16002128號-3