7個(gè)界面設(shè)計(jì)簡(jiǎn)化你的接口

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

1。模態(tài)窗口。
我相信你能記得之前彈出阻滯劑被引入到Web瀏覽器的日子，當(dāng)你不得不戰(zhàn)斗群的小窗戶往往決定彈出在瀏覽器窗口的頂部，看似與惱人的你唯一的目的。沒(méi)有人喜歡那些彈出窗口，并阻斷技術(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)容和視覺(jué)集中在上面的窗口。

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

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

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

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

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

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

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

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

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

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

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

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

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

6。圖標(biāo)代替文本。
實(shí)現(xiàn)簡(jiǎn)單的界面設(shè)計(jì)，你需要減少和去掉所有不必要的或很少使用的零件。這不僅包括控制，但也可以像文本標(biāo)簽。如果你的界面有很多標(biāo)簽，看看它，問(wèn)問(wèn)你自己，是所有這些標(biāo)簽的必要嗎？他們大多是顯而易見(jiàn)的？如果一個(gè)標(biāo)簽是指出明顯的東西給予該項(xiàng)目的背景下，你不需要這個(gè)標(biāo)簽，它是過(guò)時(shí)的。
給你一個(gè)這樣的例子，想想在一個(gè)博客帖子。每個(gè)帖子標(biāo)題你可能像日期和作者在。貼標(biāo)簽在每一個(gè)像“作者”和“日期：”也許是不必要的。當(dāng)有人看到一名和文章的標(biāo)題，他們認(rèn)為這是作者，日期很有可能下一個(gè)日期。的背景下，以及格式，他們習(xí)慣于從讀別人的博客，給你的用戶的所有線索要立即理解數(shù)據(jù)背后的意義。除去這些標(biāo)簽會(huì)給你一個(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)簽。說(shuō)到這，沒(méi)有理由選擇一個(gè)或其他專門(mén)的-你可以受益于有吸引力的引人注目的特性圖標(biāo)一起清晰的文本利用起來(lái)；但在這種情況下，你會(huì)被交易的空間。

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

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

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

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

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

一旦你添加一個(gè)特性，它是很難拿出來(lái)，因?yàn)槿藗儠?huì)開(kāi)始使用它，將取決于它。因此，確保每個(gè)功能，每個(gè)界面元素的添加使你意識(shí)到你的產(chǎn)品，增加了真正的價(jià)值。更多的功能意味著更多的控件和內(nèi)容。更多的控件和內(nèi)容很難使界面簡(jiǎn)單、無(wú)雜波。
簡(jiǎn)單是所有關(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è)的需求呢?

文章標(biāo)題：7個(gè)界面設(shè)計(jì)簡(jiǎn)化你的接口
URL地址：http://www.muchs.cn/news/19886.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、建站公司、移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

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