女强穿越玄幻完结小说,盗墓笔记

青島網(wǎng)站制作有效用戶界面的實(shí)用技巧

分類：瀏覽次數(shù)：88500 2018-11-30 00:00:00

滿意回答

2018-11-30 00:00:00

圭谷設(shè)計(jì)已經(jīng)與大家討論過什么是用戶界面，用戶界面應(yīng)該具備什么樣的特點(diǎn)，以及我們可以使用的建設(shè)網(wǎng)站用戶界面的工具，現(xiàn)在讓我們看一些可以應(yīng)用在你的網(wǎng)絡(luò)應(yīng)用或網(wǎng)站上的實(shí)用技術(shù)。

QQ截圖20180905120012

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)建頁面中元素之間的層級(jí)關(guān)系。

2.網(wǎng)站建設(shè)之使用圓角來定義邊界

圓角通常用來改善網(wǎng)站?圖片元素的觀感。它們看起來非常舒服，并且能夠?yàn)槟愕木W(wǎng)站?界面增添平滑感，但這并不是圓角的全部功能。圓角通常定義一個(gè)對(duì)象的邊界。當(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ú)使用顏色和對(duì)比度還不足以吸引用戶的注意。如果一件很重要的事情發(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í)候，可以使用高亮的效果。對(duì)于那種使用很多Ajax 技術(shù)的應(yīng)用來說，這一點(diǎn)特別有用。在這些情況下，頁面中的操作并不會(huì)導(dǎo)致頁面的刷新，高亮的部分彈出來告訴用戶發(fā)生了什么事情。

5.網(wǎng)站建設(shè)之?使用陰影

另外一個(gè)將用戶注意力集中到某一區(qū)域的方法是使用陰影和加深背景。陰影通常被設(shè)置在彈出菜單或者模式窗口四周，像一張?zhí)鹤右粯诱谧×舜翱谒闹艿母蓴_元素。陰影降低了窗口下方其他元素的對(duì)比度，反過來就增強(qiáng)了用戶使用區(qū)域的對(duì)比度。同樣可以在窗口底部使用一個(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)先級(jí)，等等。在表單底部，你會(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)擊。而你可以對(duì)錨鏈接使用內(nèi)邊距來使它變大。對(duì)于列表中的鏈接，就像側(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)建對(duì)話框或者其他需要用戶處理的應(yīng)用時(shí)，使用動(dòng)詞而不要使用像“是的”、“不是”、“好的”這樣的表述。當(dāng)用戶看到像“好的”或者“取消”這樣的選項(xiàng)時(shí)，他們需要去閱讀額外的信息來搞明白他們要做什么。如果你使用動(dòng)詞，例如“保存”、“不保存”和“取消”，用戶就不需要再看其他的消息，他們馬上就知道這個(gè)對(duì)話框或選項(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è)之?上下文敏感的界面元素

如果希望為高級(jí)用戶整合一些額外的功能，但是又不想讓青島網(wǎng)站設(shè)計(jì)?頁面臃腫，這時(shí)就可以通過提供按需增加的上下文元素來實(shí)現(xiàn)。例如，你的應(yīng)用中有一個(gè)帶高級(jí)搜索的搜索條，在沒有使用的時(shí)候只顯示搜索條，當(dāng)用戶單擊時(shí)再顯示一些額外的控件。這樣，網(wǎng)站?界面仍然保持了簡潔，實(shí)現(xiàn)高級(jí)的功能也只需要一次點(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í)間變短了。加載指示器對(duì)短時(shí)的等待非常適用，但是對(duì)于一個(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)性并不僅僅依賴于后臺(tái)代碼結(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)

用戶對(duì)你的應(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è)之?還原操作

人們?cè)趧h除一些東西之后，通常會(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)對(duì)話框

當(dāng)在網(wǎng)站?應(yīng)用程序中進(jìn)行諸如刪除記錄這樣的破壞性操作時(shí)，提供一個(gè)確認(rèn)對(duì)話框，提醒用戶是否確實(shí)要進(jìn)行接下來的操作是非常必要的。特別是當(dāng)刪除按鈕的位置和其他控件非常近的時(shí)候。如果用戶不小心點(diǎn)擊了刪除按鈕，在生效之前用戶可以取消操作。但是，不要過度使用這個(gè)特性，因?yàn)椴槐匾獙?duì)話框拉長了操作過程并讓人生厭。

青島網(wǎng)站建設(shè)哪家好？靠譜的網(wǎng)站建設(shè)公司找圭谷設(shè)計(jì)，5-17年經(jīng)驗(yàn)的專業(yè)團(tuán)隊(duì)為您的網(wǎng)站進(jìn)行一對(duì)一量身定制！響應(yīng)式網(wǎng)站建設(shè)找圭谷設(shè)計(jì)！

標(biāo)簽：