如何精簡(jiǎn)用戶界面

0 評(píng)論 3576 瀏覽 2 收藏 10 分鐘

簡(jiǎn)潔、易用、友好、直觀。這些詞語(yǔ)經(jīng)常被提及,但在執(zhí)行過(guò)程中經(jīng)常被遺忘。這是因?yàn)檐浖δ艿膹?fù)雜性所導(dǎo)致的。如何處理好軟件的復(fù)雜功能往就可以決定它的命運(yùn)。一個(gè)復(fù)雜的界面會(huì)讓用戶不知如何操作。如果,減少?gòu)?fù)雜的操作過(guò)程并精簡(jiǎn)操作界面,那該軟件的用戶體驗(yàn)就大大的提升了。

去除無(wú)用的功能

研究發(fā)現(xiàn):80%的用戶僅僅使用軟件20%的功能。而那些沒(méi)用的功能不僅浪費(fèi)開發(fā)時(shí)間,也使得軟件更加難以使用(這些功能對(duì)用戶的阻礙作用大于有用價(jià)值)。軟件試圖盡力可以把任何事都做好。而一個(gè)成功的軟件應(yīng)是簡(jiǎn)練精干的,可單獨(dú)智能化的解決單個(gè)問(wèn)題。

精簡(jiǎn)的軟件可通過(guò)削減功能得到。通過(guò)默認(rèn)去除的方法判斷一個(gè)功能是否有必要保留。將軟件所有的功能進(jìn)行真正的篩選。如果該功能不能幫助大多數(shù)用戶完成日常的任務(wù),那么可以將其排除在外。刪除功能是艱難的,當(dāng)整理完畢后看到用戶順暢的使用軟件。你就會(huì)知道多么值得去做這件事情了。

隱藏復(fù)雜部分

如果實(shí)在無(wú)法去除某個(gè)復(fù)雜功能,那么就將其隱藏。通常情況下,不常使用的功能要比經(jīng)常使用的功能占據(jù)更多的屏幕空間。而優(yōu)秀的界面應(yīng)該確保最常用的功能在最顯著的位置,將不常用的功能隱藏。

當(dāng)我們重新設(shè)計(jì)CMS系統(tǒng)時(shí),我們無(wú)法去除一個(gè)復(fù)雜的功能:批量編輯功能。在之前的版本里,在主屏幕上有一整排的批量編輯按鈕。約占據(jù)了屏幕30%的區(qū)域,但我們發(fā)覺(jué)很少有人會(huì)用到此功能。我們的解決方法是,放置一個(gè)小圖標(biāo)并在旁邊顯示數(shù)值以示下拉列表里有幾個(gè)選項(xiàng)。點(diǎn)擊圖標(biāo)或數(shù)字則顯示下拉列表。通過(guò)這種方式節(jié)省了大量的空間,也不會(huì)干擾用戶使用那些最基本的功能。

最小化視覺(jué)干擾

我們已經(jīng)討論了通過(guò)去除與隱藏的方式降低界面復(fù)雜性的方法。但減少“視覺(jué)感知”的復(fù)雜性也是很重要的。最小化視覺(jué)干擾將使得界面看上去易于使用。減少視覺(jué)干擾的兩個(gè)方法是:空白與對(duì)比。

空白,是指介于各個(gè)元素之間的間隙。它應(yīng)是你默認(rèn)的布局工具。經(jīng)典法則之一:如果可以使用空白就不要放置其他設(shè)計(jì)元素。如果用這種方式布局,你會(huì)很驚訝調(diào)整界面的空白就可以完成布局了。

雖然使用空白多多益善,但也要盡可能的保證有對(duì)比感。設(shè)計(jì)理論家“ddd”說(shuō):設(shè)計(jì)師應(yīng)使用最小的視覺(jué)變化來(lái)表達(dá)想法。事實(shí)上這就是意味著元素之間要有主次感。

你可以看到修改過(guò)的版本有很重的黑線,與之前的邊框不同。那個(gè)版本視覺(jué)干擾更小呢?(當(dāng)然是原來(lái)的更好)大量的空白區(qū)域減少視覺(jué)干擾并讓人覺(jué)得更舒適。

做減法、重復(fù)使用,循環(huán)利用

當(dāng)軟件成形后,問(wèn)題經(jīng)常發(fā)生在程序的各個(gè)結(jié)合部分。存在的問(wèn)題往往可以通過(guò)相同方法加以解決。界面中應(yīng)使用相同的組件。使用相同組件的兩個(gè)好處:減少開發(fā)所需時(shí)間;給人一致的使用體驗(yàn),如果用戶學(xué)會(huì)使用一個(gè)操作,他們就可以把相同的操作行為運(yùn)用到進(jìn)行其他操作中去。

在設(shè)計(jì)CMS過(guò)程中,我們?cè)诒韱悟?yàn)證上花費(fèi)了大量的時(shí)間。我們用紅色框出無(wú)效的區(qū)域,甚至增加紅色的提示框來(lái)說(shuō)明每個(gè)填寫表單的環(huán)節(jié)有多少錯(cuò)誤。

在之后的開發(fā)過(guò)程中,我們?cè)谛枨罅斜碇性黾恿税姹颈容^的功能。與其創(chuàng)建全新的框架,不如使用在已有的框架上進(jìn)行改進(jìn)。我們用藍(lán)框標(biāo)出已修改的表單,并使用藍(lán)色提示框標(biāo)注該區(qū)域。通過(guò)這種方法我們快速部署到用戶已經(jīng)熟悉的界面上。

重復(fù)使用元素是另一種可以減少界面復(fù)雜的方法,因?yàn)橛脩艨梢匝杆俚氖煜ぼ浖?/p>

空白狀態(tài)不應(yīng)空白

空白狀態(tài)是指界面無(wú)數(shù)據(jù)時(shí)的樣子,如用戶初次使用軟件。作為設(shè)計(jì)師,我們花費(fèi)大部分精力用來(lái)設(shè)計(jì)如何最好的展示內(nèi)容,但時(shí)常忘記如何展示無(wú)數(shù)據(jù)的樣子。

如何建立合理的默認(rèn)值是很重要的。軟件的空白狀態(tài)通常是給用戶的第一印象,用戶通過(guò)第一印象來(lái)考慮是否來(lái)使用軟件。好的空白狀態(tài)可有助于用戶學(xué)習(xí)使用軟件的途徑,幫助用戶學(xué)會(huì)初次使用軟件的基礎(chǔ)操作。

Versions的mac版本顯然在程序的空白狀態(tài)投入了很多心思。在首次運(yùn)行的時(shí)候,程序突出了兩大人們可能會(huì)用得到的功能。

再次重復(fù):不要忘記空白狀態(tài)!

相關(guān)展示

我們已經(jīng)見(jiàn)過(guò)大量界面混亂,復(fù)雜的軟件。然而,有效的減少程序的復(fù)雜性有點(diǎn)難度。

Invoice Machine 的界面十分的簡(jiǎn)約。示例顯示它非常節(jié)約擴(kuò)展部分并注重細(xì)節(jié)。
Freckle只是確保你可以跟蹤自己的時(shí)間。簡(jiǎn)潔的界面閃現(xiàn)活力,將例行任務(wù)變得有趣。
Image Spark黑白色的漸變。界面幾乎沒(méi)視覺(jué)干擾,易于使用。
Ballpark有簡(jiǎn)潔的界面,用色不跳。

Krop,其核心就兩個(gè)表單:地址與關(guān)鍵詞。


Fever網(wǎng)站的整個(gè)目的就是減少你與感興趣博客之間的距離。它通過(guò)非常簡(jiǎn)單獨(dú)特的方式來(lái)實(shí)現(xiàn)。
Screenr 是個(gè)驚人的簡(jiǎn)單截屏并發(fā)布到Twitter的軟件。值得注意的是沒(méi)有的功能它有,但其他類似軟件有的功能它都沒(méi)有。


Squarespace 在隱藏復(fù)雜功能方面做得很好。雖然它是網(wǎng)絡(luò)的發(fā)布平臺(tái),它把功能隱藏在一個(gè)簡(jiǎn)潔的界面中。

總結(jié)

  • 減掉不必要的功能;
  • 然后隱藏那些不能減掉的功能;
  • 減少視覺(jué)噪音并重復(fù)利用元素;
  • 使用空白幫助用戶;

中文地址:http://blog.uxredesign.com/interactive-design/minimizing-complexity-in-user-interfaces/

原文地址:http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!