優秀視覺/互動設計的三要素

發表於2013-08-30

伯樂線上注:本文來自文章譯者 小刀c 的投稿(英文譯文)。如果其他朋友也有不錯的原創或譯文,可以嘗試推薦給伯樂線上

 

僅從基礎層面來看,在我看來優秀的視覺互動設計有三個部分組成,或者說需要滿足三個要素。每個部分的滿足程度將直接影響整體作品的質量。如果都滿足了,作品就達到了最好的境界;如果只是一兩個滿足了,作品質量也就馬馬虎虎;如果沒有一個滿足,那東西肯定稀爛。這三個部分便是:

  • 清晰的介面元素
  • 元素間的關聯
  • 作品各部分的組成效果

3 Parts of Good Visual Interface Design

清晰的介面元素指的是每個元素都清楚的表達了自己的功能和可互動性(或者affordances,譯註:可以理解為”可供性”,在此推薦ID公社的一篇文章)。這些元素是否容易看到,其中文字是否易於辨別?按鈕是否看起來就像按鈕,並且使用者是否知道它可以點選(可以互動)?列表看起來是不是像列表,且使用者是否明白這些項的型別?控制元件喊的圖示(icon)是否有辨讀性?每一個互動元素,都以不同的清晰度呈現給使用者它們各自能夠做什麼以及如何使用。

元素間的關聯是指類似於元素組合起來將內容組織成一個有一定含義的單元,或者元素將對比、尺寸的變化來構建一種視覺層級,以此來引導使用者的注意。文字中有標題,或者列表緊靠這標題,就是為了讓其意有所指;按鈕中一定會有的文字是將其作為標註從而讓按鈕易於理解;一組有關聯的項必須很明確的和其他無關聯的項隔開,就是為了讓其能夠理解為它們是一組;最重要的控制元件和內容一定要讓它們作為首要元素脫穎於頁面,等等。設計師通過使用顏色、對比和空間來組織介面,以此讓使用者很容易地互動與理解。

最後,我們將各部分有機地結合起來。將介面作為一個有機的整體而不是獨立部分呈現會給使用者美感的印象。因為單個元素在扮演各自的角色的同時以某種有意義的方式和其他元素連線,所有元素結合起來可以作為一個單元,一個統一的介面。建築師裝飾單獨的窗戶、門廊、牆壁以及屋頂並這些有機組合為一間房間,而訪客則會將這些部分作為整體參觀和體驗,並會對這些效果做出評價。統一的介面將前面的兩個部分以一種巧妙地有特定目的方式結合,這樣也就達到美感的效果1。

上面的解釋,例如,為什麼許多網站的可用性很好,介面卻很醜陋。設計師只關心可用性而不管美感,或許是確保了每個元素能夠清楚的表達其功能;或許是沒有使用icon,取而代之的是清晰的文字標籤;或許是為理解力低的使用者增加了引導的描述;或許使用了明顯的對比巨大的字型;或許將頁面根據不同意義分組依次來吸引眼球到重要的內容,也就導致了整體介面完全缺乏美感,使整個介面看起來像一個造型醜陋功能完備的聯合收割機而不是一個有著優雅的流線型外殼的小轎車。明晰的元素並不能確保整體介面的美觀。要做到美觀,頁面上所有不同的元素需要和諧連線在一起,這樣才能使之變成一個有機的整體性的介面。


於此相反的是,許多好的看的站點的易用性很差。當你只想要建立一個整體美觀的效果,讓元素協調而統一就不難實現。現今的許多設計師喜歡使用蒙著的,淺灰色的字型,但這些字型通常可讀性很差。他們這樣做的原因是,他們將文字僅僅是作為構建整體頁面的基礎材料而不是需要著重處理的關鍵元素。他們使用漂亮的大字標題,有趣的大圖(hero image),新穎的選單作為站點的全部組合,然後才順便處理下文字,為了不影響他們美麗的設計,又讓字型變得又小又淺,最後為了美觀犧牲了可用性。

另一個形式大於功能的例子是,使用意思不明確的icon。icon比文字標籤更小也更優雅,單從可用性考慮,它們卻不是一個很好的考慮。人們通常不是很清楚icon代表了什麼,還需要花時間去滑鼠移到按鈕來閱讀工具提示(tooltip),除非這些icon非常普遍。icon大都被設計成有著相同長寬的方形圖案,對視覺設計師來說它們是構建作品的理想選擇。設計師玩玩會沉迷於icon所帶來的視覺效果,因為文字標籤尺寸不可控轉而擁抱簡介的優雅的icon,同樣為了美觀犧牲了可用性。

這三點的順序也非常重要。一個華而不實的作品比不上一個醜陋卻好用的作品(除非,它的功能就是變得美觀)。因此我們首先得保證所有介面元素都是明晰的,然後確保元素之間的有著良好的關聯,最後再確保作品是一個美觀的整體。所有這些過程都是同時發生——例如,你在裝飾單個元素的同時你會建立它們之間的關聯,同時一開始你便確定了你最後想要的達到的視覺效果——但是,這三個點的完成順序卻影響了最終作品的是否表現的恰如其分。

最終,當所有的三點都很好的實現,所有的元素都很清晰,元素間定義了良好的關聯,整體構造成一種栩栩如生的審美形象,我們便完成了一個好看而又好用的介面2;一個能夠表達自己功能同時有著統一的樣式和視覺印象的介面。

  1. 有時候或許會這樣,當我們完成第二點的時候第三點恰好也滿足了——例如,一旦你解決了元素將的關聯,和諧的整體自然而然的形成了。是的,一種協調的感覺達到了,但是我們想要的不僅僅是這些。我們在最後一步需要達到的是一種美感的效果,是一種設計師想要達到的視覺樣式。舉個例子,許多的新聞網站,它們都有著十分相同的內容單元(最新標題列表,連結部分,等等),並且各自都有著明晰的定義,但是每一個網站最終都需要與其他的區別開來——你有機會組合你的作品讓人慾罷不能。
  2. 我的意思是美麗優雅和諧的感覺,而這些感覺來自於良好組織的設計,設計中的每個元素服務於其他的一切卻並不出格。有些設計可以通過增加樣式和裝飾來錦上添花,有些就不行,就需要保持其簡介的形式。

相關文章