布局和展現相關的建議──給用戶體驗設計者

來源: infoq 發布時間: 2010-11-28 22:18 閱讀: 782 次推薦: 0 原文鏈接 [收藏]

　　Shane Morris是前微軟UX的布道者，現任獨立的UX架構師，在2010年澳大利亞TechEd大會上，他做了一個主題為“Pimp My App”的演講，描述了在創建UX之前應該知道的5件事，構建好的布局的4個步驟和6個如何讓產品更好看的建議。

　　Morris認為UX開發應該遵循以下步驟：首先是遵循信息設計的概念設計，然后是交互設計，最后是呈現設計。雖然UX被認為是創建優雅頁面的藝術/科學，但那只是構建UX的最后一部分。他列出了在做UX之前應該知道的5件事：

UX設計的首要角色不是去確定顏色和字體，而是對顯示的信息進行分類，建立信息流，通過信息流幫助用戶找到自己的方案，解決實際遇到的問題。那么就請跟隨產品的“感情基調”吧。
從用戶、業務、可用性和體驗的角度去設置目標，因為這些因素都會影響設計
當用戶使用產品或訪問某個頁面時，他們在找什么？
提供產品的組織想達到什么目的？
什么使產品具備可用性？易用性？靈活性？適應性？
使用產品的用戶希望獲得什么樣的體驗？這個問題如果由產品的潛在用戶回答就最好了，否則設計者就需要問自己，如果他是消費者，他想看到什么
“你不是你的用戶”。雖然設計者應該想象當用戶使用該產品時想看到的是什么，但他必須記住，這并不是真的理解了用戶喜歡什么，或他感覺用戶喜歡什么。所以，不應該假定所有用戶都會喜歡他喜歡的東西。
每兩到三次Sprint做一次可用性測試，確保新的設計實現沒有問題。
建立對整個產品信息流的良好理解，因為它可以幫助你找到更好的方式去呈現這些信息。設計UI的時候應該從這里開始。

　　Morris還提出了構建良好布局的4個步驟：

繪制工作流程──確定用戶正常工作需要進行的行動序列。
列出你的內容──確定讓工作流正常執行所需的微件（Widget）。恰當的選擇多選框，單選按鈕，調節鈕等，使用正確的術語，例如顯示在按鈕或多選框上的字符。
按照順序為界面元素布局。在頁面上組織可視化元素時必須考慮頁面流，對大多數國家來說都是從上到下，從左到右，同時遵循這些元素的自然順序。
檢查分組。有些元素是彼此密切相關的，所以很自然的把這些元素在頁面上分為一組，這可能需要對元素進行重新排列。

　　他還給出了改進產品界面的6個建議：

刪除每個不需要的元素，推薦簡約的做法。每個修飾都應該有其特殊目的。如果是改進之前設計的產品，那你就需要刪除所有不是真正需要的元素，或擾亂視圖的元素，或對目標有誤導的元素。例如，兩個相關的元素只要一個分組框封裝就可以了，而不是兩個，如果選擇在頁面上通過分組框分離元素，那就需要每個元素一個分組框。
最小變化。字體、布局和顏色的使用都需要深思熟慮。這并不意味著在整個頁面都使用相同的特征，而是應該進行有限的變化。人們更容易被一致的、可預測的圖形界面吸引。
另一方面，變化可以很好的標注應用系統的不同部分或階段。例如，網站中的結帳頁面，應該與其他頁面明顯不同，以提醒客戶這個頁面的目的與提供產品信息的頁面是不同的。
排列整齊。在頁面上把元素排列整齊，盡可能創建可見的流向，這非常重要，可以幫助用戶更好的閱讀頁面的內容。
空間和大小均勻分布。每個元素的大小和空間需要進行平衡設計。視覺會傾向于那些具備熟悉的尺寸和空間的元素，但是如果它們都一樣，那么頁面就會缺乏變化而讓這些元素顯得不自然。
通過分組框、相似性、相鄰和空白來表示分組。
調整可視量。為元素分配不同的可視量──使用顏色、大小、形狀、對比、不對稱、動畫──幫助用戶以一定的順序瀏覽頁面。例如，視覺會更快的注意到比較大的元素，或者與背景色有強烈對比的元素，或者具備暖色調的元素。

　　在使用顏色方面，Morris同樣提出了一些建議：

“如果紅色和綠色沒有過渡色的話，不應該同時出現”──進行顏色組合處理。
最低限度的使用顏色的數量。Morris讓設計者為自己在1-5之間選擇一個數字，1表示沒有UX經驗，5表示設計專家，然后在項目中使用同樣數量的顏色。也就是說，如果開發者認為自己沒有設計技巧，但他需要決定系統要做成什么樣，那他就應該使用一種顏色。如過開發者認為自己是個好的設計者，選擇了3，那就該在系統中使用3種顏色。專家應該能夠駕馭5種以上的顏色，但他可能早就知道這些原則。
背景色應該是中性的──白、灰、黑、海軍藍或棕色──在頁面上這些顏色會與其他大多數顏色搭配得比較好。
如果不知道該選什么顏色，那就使用相同色系的顏色。
從kuler.adobe.com或colourlovers.com上選擇調色板。
請注意色盲的影響，據Morris所言，有10%的男性會有色盲的困擾。vischeck.com網站在這方面對你的設計會有幫助。另外，不應該完全以來顏色進行信息溝通。
冷色調──藍、綠──這些顏色傾向于弱化效果，一般使用在遠離觀察者的元素上，而暖色調──紅、橙──傾向于用在接近觀察者的元素上。例如下面的兩個圖片，我們推薦第一種設計方式。