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


作者 Abel Avram 譯者 池建強 發布於 2010年11月22日 下午11時45分

 

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

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

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

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

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

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

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

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

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

image

關於字體的數量,Morris建議采用與選擇顏色數量一樣等方式進行,相應級別的UX設計者,選擇相應數量的字體。新手使用一種字體,專家可以使用五種以上的字體。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com