4. UNDERSTANDING VISUAL HIERARCHY & UI PATTERNS
How to visually prioritize the elements of your web UI
如何視覺地優先化您的網站使用者介面元素
More than being creative, a good artist must also consider subtleties like composition, colors, size, what to include, and — perhaps more importantly — what to leave out. That’s no easy feat, which is why we hold the masters like da-Vinci and Van Gogh in such high regard.
不只是有創意，一位好的藝術家也必須考慮細微之處，像是組成、色彩、大小、要包含什麼以及也許更重要的是：要省去什麼，那種成就不簡單，這是為何我們如此推崇像是達文西、梵谷之類的大師。
Photo credit: http://fitness.reebok.com/be-more-human/
Web UI designers must do the same. A website is a form of visual art in its own right, and follows many of the same rules as more traditional artforms. It is the science of aesthetics, mixed with the principles of business, and an extraordinary website interface must feel effortless yet enticing. We’ll explain how to create a visual hierarchy and use UI patterns as a starting point.
網站使用者設計師必須做同樣的事情，網站在本身固有的特點就是一種視覺藝術形式，而且它如同很多傳統藝術形式般遵從了相同的規則，它是審美科學，混合著商務原則，而且一個出色的網站界面必須令人覺得不費力卻又很迷人。我們會說明如何創造視覺階層以及把使用者介面模式當成起始點。
Creating Visual Organization
創造視覺組織
In his paper Communicating with Visual Hierarchy, Luke Wroblewski, author and Senior Principal of Product Design at Yahoo!, explains that the visual presentation of a web interface
is essential for:
作家以及Yahoo產品設計資深首席 Luke Wroblewski在他的簡報「和視覺階層溝通」中說明網站界面的視覺呈現對以下是不可缺少的：
- Informing users — Like an invisible hand, the interface should guide users from one action to the next without feeling overbearing. For example, payment processor Square leads you through its value propositions as you scroll down, with relevant calls to action each step of the way.
- 通知使用者：像一隻看不見的手，界面應該引導用戶到下一個行動而不令用戶感到蠻橫。舉例來說，支付處理商Square在你往下捲動時帶領你瀏覽它們的價值定位，並在瀏覽每項的流程中附上行動連結。
- Communicating content relationships — The interface should present content in a way that matches how users prioritize information. For example, popular design website Abduzeedo includes broad categories at the top, featured content in the middle, and detailed categories in the footer.
溝通內容關係：界面應該在某種方式上呈現內容，可讓用戶知道如何優先化資訊，舉例 來說，熱門設計網站Abduzeedo 在頂端有廣泛分類、中間有特徵內容和底端的詳細分類。
- Creating emotional impact — People visit restaurants for more than just an edible meal. They want taste, texture, presentation, and a memorable ambiance. Interface design is no different, and people may actually be more prone to forgive your site’s shortcomings if you produce a positive emotional response. For example, Wufoo is a perfect example of a site with an interface that’s usable and pleasurable.
- 創造情感衝擊：人們逛餐廳不僅只是為了可口的食物，他們想要品味、材質、呈現和可紀念的氣氛。和室內設計沒什麼不同，如果你的網站產生正面情感反應，人們可能事實上傾向原諒你網站的缺點。舉例來說，Wufoo是一個界面可用和愉悅完美的網站例子。
The end goal of your UI design is to answer three questions
1.What is this? (Usefulness)
2.How do I use it? (Usability)
3.Why should I care? (Desirability)
您使用者介面設計的終極目標是要回答三個問題
1.這是什麼？（實用性）
2.我怎麼使用它（易用性）
3.我為何要關注它（希求）
1. SCANNING PATTERNS: THE PREDICTABILITY OF THE HUMAN EYE
掃描模式：人眼預測性
Just as with a scurrying movement in the corner of your eye or a sexy walk from someone across the street, the human eye is drawn automatically to certain points of interest. While some of this depends on the person, the majority of people tend to follow definite trends — including how they view a web page.
就像在你眼角裡亂竄移動或是某人性感地穿過街頭，人眼會對有一定興趣的東西所自動吸引，雖然一些興趣因人而異，大部份人傾向去追隨明確的趨勢（包含他們如何看網頁）
In an article on visual principles, Alex Bigman, Design Writer for 99Designs, talks about the two predominant reading patterns for cultures who read left to right.
Alex Bigman和99Designs的設計作家在視覺原則的一篇文章中，聊到從左閱讀到右邊的文化中關於兩種顯著地閱讀模式。
- Photo credit: time.com