7個(gè)界面設(shè)計(jì)技術(shù)來簡化和整理你的接口
什么是簡單？簡單是自然的生存質(zhì)量，淺顯易懂。這并不奇怪，簡單是興盛在用戶界面設(shè)計(jì)。大多數(shù)人都不喜歡在設(shè)備和軟件的復(fù)雜性。是的，有些人在搞清楚事物如何找到快樂，但對于我們大多數(shù)人來說，無法操作設(shè)備導(dǎo)致浪費(fèi)時(shí)間和沮喪，這并不是一件好事。
如果你能將一個(gè)復(fù)雜的設(shè)備或軟件，在某種程度上重新排列，重組和重新設(shè)計(jì)的界面，使它更容易使用和理解，那么你在路上提供更好的用戶體驗(yàn)。
在這篇文章中我要談的7個(gè)實(shí)用技巧，你可以在網(wǎng)頁設(shè)計(jì)，使您的網(wǎng)站或Web應(yīng)用程序更簡單和更復(fù)雜。

1。模態(tài)窗口。
我相信你能記得之前彈出阻滯劑被引入到Web瀏覽器的日子，當(dāng)你不得不戰(zhàn)斗群的小窗戶往往決定彈出在瀏覽器窗口的頂部，看似與惱人的你唯一的目的。沒有人喜歡那些彈出窗口，并阻斷技術(shù)進(jìn)行了介紹，以阻止他們。但今天，我們看到，有很多清潔工作他們的目的是更好的網(wǎng)絡(luò)培育新的彈出窗口。這些模態(tài)窗口。

模態(tài)窗口是彈出窗口，而是出現(xiàn)在單獨(dú)的瀏覽器窗口中，他們似乎就在當(dāng)前，在頂部的內(nèi)容。模態(tài)窗口需要交互進(jìn)行，所以下面的內(nèi)容通常是黑暗的顯示，以及遮擋干擾噪音的內(nèi)容和視覺集中在上面的窗口。

那么為什么要使用模態(tài)窗口和他們?nèi)绾魏喕愕慕涌?？好吧，如果你看的另類，他們的目的變得清晰多了。使用類似一個(gè)模態(tài)窗口的選擇通常是一個(gè)新的頁面載入。例如，一些網(wǎng)站已經(jīng)為您的帳戶設(shè)置頁面。當(dāng)你點(diǎn)擊設(shè)置鏈接，你采取了新的一頁。但如果只有幾個(gè)設(shè)置選項(xiàng)是否真的值得把用戶重定向到一個(gè)新的頁面？
在很多情況下，這樣的設(shè)置，編輯框和登錄窗體可以顯示一個(gè)模態(tài)窗口的內(nèi)容。這節(jié)省了用戶返回到另一個(gè)網(wǎng)頁。它也減輕了負(fù)荷對Web服務(wù)器作為它有更少的請求處理。

動作方法，一個(gè)項(xiàng)目管理應(yīng)用，顯示整個(gè)應(yīng)用模態(tài)窗口。這里的審美形式。

2。懸停控制。
把更少的事情上板也會使菜容易下咽。如果你的應(yīng)用有許多控件，用戶將需要通過掃描大多數(shù)人找到他們想要的東西。機(jī)會是，一些控件的重要性不及他人，和一些控件使用多的比別人少。你能做的最簡單的就是把從默認(rèn)視圖中隱藏這些控件。
一個(gè)做這個(gè)聰明的辦法是隱藏控件，然后給他們當(dāng)用戶對某些地區(qū)的徘徊。這些是懸?？刂啤＠纾铺?，一個(gè)流行的微博客應(yīng)用程序，顯示在你的列表有飼料跟大家最近說。每個(gè)消息被封裝在它自己的小盒子。有兩個(gè)動作，你可以在每個(gè)消息執(zhí)行：把它添加到你的收藏夾或回復(fù)它。

在所有的消息顯示最喜歡和回復(fù)按鈕會導(dǎo)致雜波。你不可能希望對飼料中的每一條信息，更不可能想添加到您的收藏夾的所有人。所以，Twitter只顯示控件，在合適的環(huán)境中--當(dāng)你的鼠標(biāo)懸停在該消息。這導(dǎo)致了一個(gè)簡單的界面和無損失的功能。有一種危險(xiǎn)的新用戶沒有注意到這些控件的時(shí)候他們隱藏的；然而，許多人傾向于鼠標(biāo)在他們看的東西，所以給了懸停區(qū)域足夠大，這些控件可能會很快發(fā)現(xiàn)。

推特顯示添加到收藏夾和回復(fù)每個(gè)消息的按鈕，當(dāng)你的鼠標(biāo)懸停在它。

3?？刂菩枨?。
另一種方式隱藏的東西是利用JavaScript和顯示一組控件，當(dāng)用戶點(diǎn)擊某個(gè)地方。例如，你可能會對你的網(wǎng)站，允許一些自定義過濾器或高級搜索的搜索框。而不是顯示這些選項(xiàng)默認(rèn)情況下，你可以藏起來，讓他們可以通過在搜索欄的最后一個(gè)按鈕。點(diǎn)擊此按鈕可以顯示選項(xiàng)或?yàn)V波器組。這意味著你保留高級功能的那些用戶誰需要它，同時(shí)簡化界面的人來說，只需要使用簡單的搜索。
不是每個(gè)人都使用一些更高級的或?qū)ｉT的網(wǎng)站上的控件。B Y隱藏它們，你使界面更清潔和更容易理解，因?yàn)樾掠脩粲懈俚脑氐倪^程，找出。選擇什么隱藏什么，保持并不是一件容易的事，它是你的工作，為設(shè)計(jì)師尋找合適的平衡。

kontain，一個(gè)博客程序，他們的搜索提供了先進(jìn)的搜索過濾器，隱藏在搜索欄的下拉菜單。

4。擴(kuò)展形式。
我知道你很熟悉的文件上傳字段Web表單中我們經(jīng)常會看到。它通常是一個(gè)文件瀏覽”按鈕旁邊的小酒吧。想象這樣一種情況，用戶可能會在一次雖然上傳多個(gè)文件。你可以顯示幾個(gè)文件上傳字段，但不是理想的因?yàn)樗鼘㈦s亂的界面，有沒有辦法告訴多少領(lǐng)域用戶的需要。一個(gè)偉大的解決方案，在這種情況下，可以采用一種擴(kuò)展形式。
一旦用戶上傳一個(gè)文件，一個(gè)文件上傳字段將出現(xiàn)在下面，準(zhǔn)備接受更多的。你可以實(shí)現(xiàn)任何其他輸入字段相同的技術(shù)。例如，也許這種形式需要的人你要請一個(gè)團(tuán)隊(duì)或者其他目的一堆郵件地址。而不是有很多的文本字段，你可以有一個(gè)或幾個(gè)，然后當(dāng)用戶填寫，新的創(chuàng)造下面。擴(kuò)大形成這樣一個(gè)偉大的方式來節(jié)省空間和簡化你的接口。

gmail只顯示一個(gè)附件領(lǐng)域撰寫新郵件時(shí)。你可以點(diǎn)擊“附加文件”鏈接，打開更多的你需要他們的時(shí)候。

5。在輸入表單標(biāo)簽。
形式可以快速得到復(fù)雜。你有文本框、標(biāo)簽、文本區(qū)域、下拉菜單、復(fù)選框等等。更重要的是，填寫表格，通常不是很好玩，所以加快進(jìn)程，使形式更簡單會使他們更嚴(yán)峻和更容易使用。一個(gè)方法可以讓你簡單的形式出現(xiàn)，是將標(biāo)簽從外部輸入的區(qū)域內(nèi)。因此，而不是顯示一個(gè)標(biāo)簽旁邊的文本字段，顯示它作為一個(gè)預(yù)充值在文本字段。

這減少了空間很大，萎縮的形式整體規(guī)模。小東西看起來簡單，因此形式上應(yīng)該更容易填寫。也許不可能為更復(fù)雜的形式，你有多種輸入類型做這個(gè)（復(fù)選框、單選按鈕、下拉菜單），但如果你有一些文本字段值得考慮，如登錄形式。
現(xiàn)在，這種方法有一個(gè)缺點(diǎn)，幸運(yùn)的是可以用一個(gè)更深入的實(shí)施解決。當(dāng)用戶第一次加載網(wǎng)頁，他們會看到田野和能夠閱讀標(biāo)簽。一旦他們點(diǎn)擊一個(gè)領(lǐng)域，大多數(shù)形式的這樣會隱藏標(biāo)簽，允許用戶在輸入類型。但如果用戶過早點(diǎn)擊一個(gè)領(lǐng)域，然后忘記它是什么他們注定會打字嗎？他們可能需要點(diǎn)擊的形式獲得標(biāo)簽的出現(xiàn)（希望）。

為了解決這個(gè)問題，而不是完全隱藏的標(biāo)簽，你可以暗當(dāng)用戶點(diǎn)擊就可以了，然后把它藏完全當(dāng)用戶開始輸入。

成員顯示標(biāo)簽內(nèi)輸入字段的登錄屏幕，然后使他們進(jìn)一步的當(dāng)你選擇一個(gè)領(lǐng)域。

6。圖標(biāo)代替文本。
實(shí)現(xiàn)簡單的界面設(shè)計(jì)，你需要減少和去掉所有不必要的或很少使用的零件。這不僅包括控制，但也可以像文本標(biāo)簽。如果你的界面有很多標(biāo)簽，看看它，問問你自己，是所有這些標(biāo)簽的必要嗎？他們大多是顯而易見的？如果一個(gè)標(biāo)簽是指出明顯的東西給予該項(xiàng)目的背景下，你不需要這個(gè)標(biāo)簽，它是過時(shí)的。
給你一個(gè)這樣的例子，想想在一個(gè)博客帖子。每個(gè)帖子標(biāo)題你可能像日期和作者在。貼標(biāo)簽在每一個(gè)像“作者”和“日期：”也許是不必要的。當(dāng)有人看到一名和文章的標(biāo)題，他們認(rèn)為這是作者，日期很有可能下一個(gè)日期。的背景下，以及格式，他們習(xí)慣于從讀別人的博客，給你的用戶的所有線索要立即理解數(shù)據(jù)背后的意義。除去這些標(biāo)簽會給你一個(gè)干凈的界面。

在某些情況下，少了一個(gè)標(biāo)簽不工作，你可以更換標(biāo)簽的圖標(biāo)。一個(gè)圖標(biāo)在一個(gè)文本標(biāo)簽的一些優(yōu)點(diǎn)。它需要更少的空間。它的重點(diǎn)是它的顏色和獨(dú)特的形狀比文字更容易吸引眼球。在某些情況下，傳達(dá)意思一樣有效的文本。例如，如果你有一個(gè)標(biāo)簽“標(biāo)簽：”后面跟一個(gè)列表標(biāo)簽的鏈接，你可以用小標(biāo)簽圖像替換標(biāo)簽。只要你有一個(gè)精通技術(shù)的觀眾，在這種情況下，意義應(yīng)該依然清晰。
當(dāng)然這并不適用于所有情況下，如果有一個(gè)危險(xiǎn)的曖昧，你應(yīng)該發(fā)揮它的安全和使用文本標(biāo)簽。說到這，沒有理由選擇一個(gè)或其他專門的-你可以受益于有吸引力的引人注目的特性圖標(biāo)一起清晰的文本利用起來；但在這種情況下，你會被交易的空間。

高層CRM應(yīng)用，使用標(biāo)簽圖標(biāo)在一個(gè)文本標(biāo)簽放在標(biāo)簽列表。

7。基于上下文的控制。
有幾個(gè)你可以使用接口的設(shè)計(jì)，涉及到語境和一致性的方法。一個(gè)決定，你應(yīng)該保持控制您的應(yīng)用程序或網(wǎng)站一致以確保人們知道一切，不要混淆。另一種方法是改變控件或基于每個(gè)頁面或窗口中導(dǎo)航。基于上下文的方法就是你只顯示用戶需要的東西來完成他們工作在特定語境的任務(wù)。
這兩種方法的一個(gè)很好的例子，可以在微軟的辦公室最近重新設(shè)計(jì)過的界面。Office 2003，以及它的兄弟姐妹，是保持一致的設(shè)計(jì)原則。你有一堆隨時(shí)在屏幕上顯示的工具欄，這些并沒有改變你是否在工作表、圖形、文本或圖片。微軟重新設(shè)計(jì)這個(gè)界面的Office 2007使用基于上下文的方法。在頂部，你現(xiàn)在看到的一條或一組標(biāo)簽。選中時(shí)，E乙酰膽堿選項(xiàng)卡顯示一組控件相關(guān)的任何任務(wù)，無論是校對工作的圖形，或者寫作。
基于上下文的方法允許你顯示較少的控制在任何給定的時(shí)間，但同時(shí)，更多的控制，手頭的任務(wù)有關(guān)的。我不建議使用一般的網(wǎng)頁設(shè)計(jì)上下文重方法因?yàn)榇蠖鄶?shù)網(wǎng)站的人希望看到一致的站點(diǎn)范圍的導(dǎo)航。這是因?yàn)槊恳粋€(gè)網(wǎng)站不同的是，它會如果對特定網(wǎng)站的個(gè)人頁面也不同使瀏覽體驗(yàn)更難。

說到這，這可以用于Web應(yīng)用程序，因?yàn)樗麄儾恢皇呛唵蔚木W(wǎng)站-他們生活在云計(jì)算軟件。人們可能會花很多時(shí)間在一個(gè)Web應(yīng)用程序，將有更多的機(jī)會了解它是如何工作的。一些Web應(yīng)用程序的復(fù)雜性意味著你真的需要利用方法中，因?yàn)槿绻悴贿@樣，會有太多的屏幕在任何時(shí)間任何過程。通過只顯示一些相關(guān)的控制對于一個(gè)給定的任務(wù)，用戶可以找出什么在很短的時(shí)間。

雀斑，一時(shí)間跟蹤應(yīng)用程序，在主工具欄上切換。它的開關(guān)時(shí)間輸入控件和報(bào)表控件之間，只顯示一組在一個(gè)時(shí)間。這是因?yàn)槟爿斎氲臅r(shí)間或做報(bào)告不是兩件事同時(shí)。

結(jié)論…
“達(dá)到簡單的最簡單的方式是通過深思熟慮的還原”–John Maeda，簡單的法則。
讓你的界面小，隱藏的高級功能，把明顯的路徑是一個(gè)簡單的接口。沿著這條路你會面對很多障礙。對于每一個(gè)功能你隱藏或帶走，就會有人抱怨，要求你把它帶回來。但你的用戶，每個(gè)人都有不同的需求和使用您的Web應(yīng)用程序或網(wǎng)站以不同的方式。如果你聽了所有的功能要求和需求，并盡量解決和實(shí)現(xiàn)他們所有的，你不可能到軟件設(shè)計(jì)的天頂。更可能的是，你會陷入膨脹的深坑從它爬出來幾乎是不可能的。

一旦你添加一個(gè)特性，它是很難拿出來，因?yàn)槿藗儠_始使用它，將取決于它。因此，確保每個(gè)功能，每個(gè)界面元素的添加使你意識到你的產(chǎn)品，增加了真正的價(jià)值。更多的功能意味著更多的控件和內(nèi)容。更多的控件和內(nèi)容很難使界面簡單、無雜波。
簡單是所有關(guān)于降低重組復(fù)合成小和管理。如果有什么的話，你應(yīng)該拿走的，而不是添加。產(chǎn)品具有更少的按鈕不一定那么強(qiáng)大-很可能是更好的設(shè)計(jì)。

創(chuàng)新互聯(lián)設(shè)計(jì)文章推薦：

搜索引擎定制優(yōu)化推廣

你的響應(yīng)式網(wǎng)站夠優(yōu)秀嗎?
什么類型的成都網(wǎng)站建設(shè)才真正適合自己企業(yè)的需求呢?

網(wǎng)頁名稱：7個(gè)界面設(shè)計(jì)簡化你的接口
文章URL：http://www.rwnh.cn/news36/19886.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、App設(shè)計(jì)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)