2014-04-24 分類: 網(wǎng)站建設(shè)
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ū)iT的網(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)用戶填寫,新的創(chuàng)造下面。擴(kuò)大形成這樣一個(gè)偉大的方式來(lái)節(jié)省空間和簡(jiǎn)化你的接口。
gmail只顯示一個(gè)附件領(lǐng)域撰寫新郵件時(shí)。你可以點(diǎn)擊“附加文件”鏈接,打開更多的你需要他們的時(shí)候。
5。在輸入表單標(biāo)簽。
形式可以快速得到復(fù)雜。你有文本框、標(biāo)簽、文本區(qū)域、下拉菜單、復(fù)選框等等。更重要的是,填寫表格,通常不是很好玩,所以加快進(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)該更容易填寫。也許不可能為更復(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)用戶開始輸入。
成員顯示標(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è)或其他專門的-你可以受益于有吸引力的引人注目的特性圖標(biāo)一起清晰的文本利用起來(lái);但在這種情況下,你會(huì)被交易的空間。
高層CRM應(yīng)用,使用標(biāo)簽圖標(biāo)在一個(gè)文本標(biāo)簽放在標(biāo)簽列表。
7?;谏舷挛牡目刂啤?br/>有幾個(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ì)工作的圖形,或者寫作。
基于上下文的方法允許你顯示較少的控制在任何給定的時(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)用程序,在主工具欄上切換。它的開關(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ì)開始使用它,將取決于它。因此,確保每個(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īng)式網(wǎng)站夠優(yōu)秀嗎?
什么類型的成都網(wǎng)站建設(shè)才真正適合自己企業(yè)的需求呢?
文章標(biāo)題:7個(gè)界面設(shè)計(jì)簡(jiǎn)化你的接口
URL地址:http://redsoil1982.com.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)
猜你還喜歡下面的內(nèi)容