本節書摘來自異步社群《衆妙之門——網站ui設計之道（修訂版）》一書中的第1章，第1.3節，作者【德】smashing magazine，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
我們已經讨論過什麼是使用者界面，使用者界面應該具備什麼樣的特點，以及我們可以使用的建構使用者界面的工具，現在讓我們看一些可以應用在你的網絡應用或網站上的實用技術。
空白指在各種内容元素之間的空白區域，比如标題、正文和按鈕。當在不同元素間建立聯系時，空白是一個非常重要的工具。通過縮小元素之間的空白，能夠把一些相關的項目組成一組。增加這些分組之間的空白能夠更加強調這些分組與其他内容之間的聯系。使用空白，我們可以分組相關的控件，也可以建構頁面中元素之間的層級關系。
gmail的工具欄通過空白的分割突出了3個分組。每個分組中的按鈕都對應着不同的功能。
圓角通常用來改善圖檔元素的觀感。它們看起來非常舒服，并且能夠為你的界面增添平滑感，但這并不是圓角的全部功能。圓角通常定義一個對象的邊界。當看到圓角時，你就知道已經到了容器的邊界。如果是一個直角，後面再跟另一個直角的容器，它們之間的界限會不太明顯。而圓角，或其他任何類似視覺上的處理，都能夠讓分界線變得更為明顯。
注意在ballpark的客戶清單中，圓角是如何來突出每條記錄的界限的。在每個記錄的中間也有兩個直角，但是它們是用作相關資料之間的分割線，而不是一個條目的邊緣。
顔色是一個重要的溝通工具，例如，定義不同的元素。你可以在應用程式中使用不同的顔色來區分不同功能的按鈕。紅色常被用在一些表示破壞性的按鈕上，諸如删除或移動；藍色一般用在标準按鈕上；綠色則用在儲存和更新操作按鈕上。使用代碼着色，我們可以分辨出螢幕中使用者建立的各種各樣的資料，讓它們變得更容易閱讀。
當你在 yammer 上釋出一條資訊的時候，資訊就會滑出并且高亮顯示。
使用動畫來提醒使用者關注。有時候，單獨使用顔色和對比度還不足以吸引使用者的注意。如果一件很重要的事情發生了，你也确實需要確定使用者能夠注意到，那麼就使用動畫。人類的眼睛非常适合捕捉移動的事物，特别是在固定背景中運動物體。如果使用者在他的輔助工作的應用程式中添加一條待辦事項，或者向購物車中加入一件商品，這個時候就可以使用動畫來突出正在發生的事情。例如，當在螢幕中建立一個項目的時候，可以使用高亮的效果。對于那種使用很多ajax技術的應用來說，這一點特别有用。在這些情況下，頁面中的操作并不會導緻頁面的重新整理，高亮的部分彈出來告訴使用者發生了什麼事情。
goplan通過在面闆左側放置不同顔色的标簽，來幫助使用者快速區分不同的項目，比如任務、筆記或者部落格文章。或者部落格文章。
另外一個将使用者注意力集中到某一區域的方法是使用陰影和加深背景。陰影通常被設定在彈出菜單或者模式視窗四周，像一張毯子一樣遮住了視窗四周的幹擾元素。陰影降低了視窗下方其他元素的對比度，反過來就增強了使用者使用區域的對比度。同樣可以在視窗底部使用一個黑色（或亮一點）的半透明層，減少它所覆寫内容部分的視覺幹擾，進而讓使用者的注意力集中在視窗上。
mobileme在模态視窗底部使用了黑色的遮罩層，同時在視窗四周使用了陰影。借此消除視窗以外元素的幹擾，把使用者注意力轉移到視窗中來。
應用程式大多有自己特别的主要和次要界面。例如，當你在一個項目管理應用程式中建立項目時，主表單通常包含項目名稱、項目截止日期、優先級，等等。在表單底部，你會看到一個“建立”按鈕。通常你還會看到一個“取消”按鈕或者文本的連結。因為使用者不經常使用，是以“取消”按鈕并不是很重要，是以，你就可以減少這個按鈕的視覺“分量”。例如，可以把“建立”做成一個按鈕，而“取消”隻做一個沒有任何視覺效果的超連結。這樣中心就放在了主要的操作上，使用者完成表單的時候就能很快地定位到操作按鈕。
這是ballpart客戶建立的一個表單，注意看“create client”按鈕與“cancel”的差別是多麼顯著。
使用帶填充的塊狀連結可以用來友善地将滑鼠定位到連結。網絡應用程式建構在html元素的基礎上，也就意味會使用很多的錨（通常稱為連結）标簽。錨标簽預設是“内聯(inline)”元素，意味着它的寬度和高度隻是在文本的内部。反過來就是說，可以點選的區域和文本的範圍一樣，在很多情況下顯得太小，使用者不能夠很精準、舒服地進行點選。而你可以對錨連結使用内邊距來使它變大。對于清單中的連結，就像側邊欄，将錨連結轉化為“塊元素”是個更好的辦法。通過使用css的“display”屬性，我們可以轉換一個元素的類型，是以給錨連結增加一個“block”屬性,就能将其轉化為一個塊元素，塊元素的寬度和高度就不再局限于文本的尺寸，而預設會擴充到包含它的容器的寬度。這種方法非常适合側邊欄中的連結。
mobileme側邊的導航面闆，使用了帶内邊距的塊狀連結增大了可點選區域，使用者能夠快速地移動滑鼠到這些區域，提升了可用性。
使用者在使用應用程式的時候，總是準備去做一些事情，他們總是在想動詞。“我想儲存這個檔案”或者“我想更新這篇文章”。在建立對話框或者其他需要使用者處理的應用時，使用動詞而不要使用像“是的”、“不是”、“好的”這樣的表述。當使用者看到像“好的”或者“取消”這樣的選項時，他們需要去閱讀額外的資訊來搞明白他們要做什麼。如果你使用動詞，例如“儲存”、“不儲存”和“取消”，使用者就不需要再看其他的消息，他們馬上就知道這個對話框或選項是做什麼的。
backpack在按鈕或連結中很好地運用了動詞，確定每個選擇對使用者都是明白無誤的。
在網頁檔案加載完成後自動激活主表單中的輸入框會給基于表單的應用帶來很大的好處。例如，google的搜尋引擎頁面自動将焦點定位在頁面的輸入框中，因為幾乎所有到達google首頁的人都想在輸入框中鍵入需要查找的内容。在其他的應用環境中自動激活輸入框也非常有用，例如，在那種需要連續輸入的應用中，就像建立購物清單，在輸入第一個物品之後，使用者想接着輸入下一個，是以可以重新激活輸入框，讓使用者快速、持續地進行輸入。
tadalist允許你快速、不斷地輸入待辦事項。當輸入一個任務并且單擊回車後，程式會增加一個新條目，然後把焦點重新定位在輸入框中，等待使用者的下一次輸入。
很多應用程式都有一套與内容緊密相關的控件，例如一個清單中的删除按鈕和記錄的編輯按鈕。為了友善定位，通常這些控件放在了每條記錄的後面，但是這種情況下就造成了大量的重複。多數的時間裡，使用者并不需要這些控件，需要時，也僅僅需要其中一個特定條目的控件。
如果使用懸浮控件，可以在使用者将滑鼠移動到一個特定區域後才顯示，這樣可以簡化界面。例如，當滑鼠停在你想編輯的記錄上時，一個編輯按鈕就會顯現出來，但是其他記錄的編輯按鈕仍然保持隐藏。
懸浮控件是一個很棒的解構和簡化界面的方法，但是在使用這個方法之前，你還需要考慮兩件事情。首先考慮控件是否能被找到。使用者在使用之前，往往需要先找到這個界面中的元素。你的控件是否做得足夠顯著以吸引使用者注意？使用者經常很自然地移動滑鼠，停留在他們正在浏覽的項目上，是以這也許并不是一個大問題，但是仍然值得去思考。其次，移動裝置上的網頁浏覽器也許不能模拟滑鼠的動作，那麼這些控件将無法使用。
basecamp運作使用者上傳多個檔案，但是每次隻顯示一個檔案上傳按鈕。
如果表單中的一個輸入框中需要輸入多個資料記錄，例如，在一段文本之後附加多個檔案，或者向資料庫中的公司記錄裡添加多個人員資訊。這種情況下，可以使用動态擴充表單，以一種優雅的方式來實作需求。因為使用者每次隻能在一個輸入框中進行操作，是以每次也隻需要顯示一個輸入框。當使用者填完并且增加了一條記錄後，程式會在新記錄後再建立一個額外的輸入框，允許使用者鍵入更多的資訊。這種方法替代了同時顯示多個空輸入框的形式，每次你隻需要顯示一個空的輸入框，但是允許使用者輸入需要的内容。
twitter 隻有在滑鼠停留在一個條目上的時候才顯示“回複”和“收藏”按鈕。
界面的簡化需要不斷地思考總結。如果你想要砍掉一些不必要的元素，并且為剩餘的元素更好地利用空間，将标簽放到輸入框内部是一個巧妙的辦法。這不僅節省了空間，也清楚地表明了與輸入框對應的标簽。
mobileme 将标簽放到輸入框内部，使登入界面緊湊而有緻。
如果希望為進階使用者整合一些額外的功能，但是又不想讓頁面臃腫，這時就可以通過提供按需增加的上下文元素來實作。例如，你的應用中有一個帶進階搜尋的搜尋條，在沒有使用的時候隻顯示搜尋條，當使用者單擊時再顯示一些額外的控件。這樣，界面仍然保持了簡潔，實作進階的功能也隻需要一次點選。
使用者将滑鼠移動到搜尋條上時，會顯示一個擴充的搜尋條件，為進階使用者提供一些額外的功能。
使用圖示能夠簡化界面、讓界面看起來更有吸引力，但是在使用之前也有一些因素需要好好考慮。語言幾乎總是比圖示表達得更清楚。寫一個标簽非常容易，隻要表明這個按鈕的作用就行。然而在設計圖示的時候，則需要用有效的意象來描述操作。如果圖示是一些很本土化的東西，你選擇的意象在不同的國家可能會有不同的了解（甚至連垃圾桶的形狀在世界各地都是不同的）。
螢幕中同時沒有太多的圖示，每個圖示都能夠同其他圖示明顯地區分開，這樣圖示才能發揮出最好的作用。這意味着形狀和顔色是建立一套成功圖示的重要因素。使用正确的圖示，能夠讓界面更容易使用。因為一旦使用者熟悉了這些圖示的含義，通過形狀和顔色的差別，使用者就能很快找到他們想要的圖示。
沒有人喜歡等待。等待意味着本來可以做一些有價值的事情的時間裡，你卻什麼都沒有做。但是很不幸，載入每個程式都需要花費一些時間，比如導出一個大文檔或者通過查詢傳回結果，使用者不得不等待。但是，可以通過使用加載訓示器來讓使用者覺得等待的時間變短了[2] 。在加載過程中，可以增加一個訓示器，比如旋轉的動畫或者進度條。研究表明，在訓示器存在的情況下，使用者感覺等待時間變短了 。加載訓示器對短時的等待非常适用，但是對于一個需要一分鐘甚至更多時間的情況呢？如果你在加載的這段時間裡什麼都不能做（假設你已經為減少加載時間做了最大的努力），你還是可以做一些事情來改善使用者的等待體驗。利用這段時間提供娛樂或者資訊。例如，很多應用程式在長時間的等待過程中會顯示一些有趣的提示或技巧。如果使用者确實做不了任何工作，起碼他們可以學到一些新東西。
當使用者通過web界面上傳檔案時，dropbox顯示一個進度條。對于類似的等待時間不定的事件，進度條是必不可少的，這樣使用者就不必猜測他們究竟還要等多長時間。
應用程式的響應性并不僅僅依賴于背景代碼結構的優化。使用者界面同樣也扮演了非常重要的角色。在可視界面中被使用最多的一個元素就是按鈕。在桌面應用程式中，按鈕具有多種狀态，最常見的是按鈕預設狀态和滑鼠單擊後的狀态。
otherinbox在主導航中有一系列圖示，圖示底部都有相應的文字進行說明。
wordpress中按鈕的預設狀态和按下的狀态。
campaign monitor 在初次登入的時候提供了詳細的幫助資訊，同時有一個很大的按鈕将你帶到活動的建立頁面。
按鈕按下的狀态看起來就像真的被按下去那樣。這個狀态提示使用者，他們的單擊已經成功地執行了。像在桌面應用程式一樣，按鈕的按下狀态同樣可以使用在網際網路應用中，為使用者提供一些額外的回報和響應。
當使用者第一次加載應用的時候，螢幕上不會顯示過多的内容；使用者還沒有輸入資料，也沒有什麼好顯示的。在這個空白狀态中添加簡短的幫助資訊，來引導使用者如何開始。為了讓事情更加簡單，你甚至可以在資訊中加入一個連結，将使用者帶到推薦的操作。例如，一個管理電子郵件廣告的程式，使用者建立了一個新賬戶後登入，應該提供給使用者一段幫助資訊，其中包含一個連結到建立新廣告的界面。
使用者對你的應用并不是十分了解，是以一些情況下在應用中合理使用廣告是一個很好的辦法。同時，由于網際網路産品經常會進行一些細微的更新或者時不時推出一些新功能，是以通過廣告的方式讓你的使用者知道這些變更就變得更有意義。一般情況下，可以通過在螢幕中的顯著位置放置一個小塊通知的方式來實作。通知區域應當吸引眼球但又不至于讓使用者分心，影響使用者的正常工作。使用者讀了這個通知以後，應該可以關掉它。
在follow特性的主要輸入區下面，yammer網站提供了一個非常有幫助的提示。使用者讀完以後，可以選擇點選右邊的關閉框關閉。
桌面應用程式最常用的特性之一是，值得信賴的撤消快捷鍵。不小心改變了正在編輯的文檔圖表格式？沒問題，按ctrl+z/cmd+z組合鍵，應用程式會采取撤消操作，把你的文檔恢複到最後一個動作之前的狀态。撤消操作是容錯界面的一個重要工具，它也可以應用在頁面應用程式中。例如，你可以在網頁應用程式中加入這些熟悉的快捷鍵或者顯示一些帶有撤消連結的臨時通知資訊。
每次在gmail中删除一封郵件的時候，都會出現撤消操作的按鈕，允許我們馬上撤消删除操作。
人們在删除一些東西之後，通常會反悔，是以在你的應用程式裡增加額外的保護措施來處理一些比較重要的資料是一個明智的做法。例如，項目管理中的項目檔案。使用者删除一個項目時，将其進行存檔而不是立即删除。如果使用者改變主意，希望把他們需要的項目檔案取回時，程式可以輕松地将它們還原。當使用者發現所有的東西并沒有丢失而感到非常高興時，消耗一點使用者的磁盤空間是值得的。
writeboard允許使用者恢複兩個月内被删除的文檔。
當在應用程式中進行諸如删除記錄這樣的破壞性操作時，提供一個确認對話框，提醒使用者是否确實要進行接下來的操作是非常必要的。特别是當删除按鈕的位置和其他控件非常近的時候。如果使用者不小心點選了删除按鈕，在生效之前使用者可以取消操作。但是，不要過度使用這個特性，因為不必要對話框拉長了操作過程并讓人生厭。
freckle使用确認對話框來確定使用者的誤操作不會造成更大的損失。