​​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
​​                                                   
​​I. F-PATTERN
  • ​​F模式               
​​ 
​​Typically for text-heavy websites like blogs, the F-Pattern comes from the reader first scanning a vertical line down the left side of the text looking for keywords or points of interest in the paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines. The end result is something that looks like the letters F or E. As shown in Web UI Patterns 2014, CNN and NYTimes both use the F Pattern. 
​​一般來說有大量文字的網站像是部落格，F模式從讀者第一次向下沿文字左方的垂直線掃描尋找關鍵字或是段落的起始句子而來，當讀者發現一些他們喜歡的東西時，他們瀏覽開始形成水平線正常閱讀，這最終的結果看起來像是字母F或是E。就如同2014年網站使用者介面模組所展示地，CNN以及紐約時報都使用F模組。
​​                                                              
​​Jakob Nielson of the Nielson Norman Group conducted a readability study based on 232 users scanning thousands of websites and elaborates on the practical implications of the F-Pattern:             
​​尼爾森諾曼集團（Nielsen Norman Group）的Jakob Nielson進行一項232位使用者瀏覽數千個網站的可讀性研究，他並闡述F模式的實務含義：
​​                                                        
  • ​​Users will rarely read every word of your text.        
  • ​​The first two paragraphs are the most important and should contain your hook. 
  • ​​Start paragraphs, subheads, and bullet points with enticing keywords. 
  • ​​用戶很少閱讀您文章的每個字。
  • ​​前兩段是最重要的且應該要包含您的賣點。
  • ​​段落、副標題、項目符號的起頭要附上迷人的關鍵字。
​​ 
​​How could this impact the interface design of your website? Take a look below. 
​​這如何衝擊到您網站的介面設計呢？ 看看下面。
​​                        
  • ​​Photo credit: speckyboy.com 
​​                                                        
​​You can see in the above image that the most important content can be seen
​​in a few seconds, with more detailed content (and a call to action) presented immediately below for quick scanning. The F-pattern can be very helpful for sites that want to embed advertising or calls to action in a way that doesn’t overwhelm the content. Just remember that content is always king, and the sidebar exists to get users involved in a deeper level. 
​​你可以在上方圖片看到最重要的內容會在幾秒內被看見，以及更詳細的內容（和呼籲採取行動）為了快速掃讀立即呈現在下方，F模式對想要嵌入廣告或是立即採取行動的網站而言很有幫助，而這種方式並不會覆蓋內容，只需記得內容總是王者，而且存在側邊欄讓使用者參與更深。
​​              
​​As with all patterns, the F-Pattern is a guideline — rather than a template — because the F-pattern can feel boring after the top rows of the “F”. As you’ll see below, Kickstarter adds in some widgets (laid out horizontally) to keep the design visually interesting beyond the first 1000 pixels. 
​​如同所有模式一樣，F模式只是一種準則而不是模組，因為F模式在最上排之後會令人感覺無聊，就您在下圖所看見的Kichstarter增加了些小工具(widgets ，水平佈局）讓視覺設計在超過1000像素後還是很有趣。
​​                                
  • ​​                Photo credit: kickstarter.com
​​                                                   
​​II. Z-PATTERN
​​Z模式
​​                                                   
​​Z-Pattern scanning occurs on pages that are not centered on the text. The reader first scans a horizontal line across the top of the page, whether because of the menu bar, or simply out of a habit of reading left-to-right from the top. When the eye reaches the end, it shoots down and left (again based on the reading habit), and repeats a horizontal search on the lower part of the page.        
​​Z掃描模式在文字不是居中的頁面會出現，讀者首先沿著頁面頂端掃描水平線，是否因為是選單欄或僅僅是從頂端左邊到右邊的閱讀習慣。當眼睛目線到了盡頭時，眼神向下並向左邊（一樣是依其閱讀習慣）速移，然後重複在頁面底端做水平搜尋。
​​ 
​​                                
​​                                        Photo credit: mailchimp.com
​​                                                        
​​The Z-Pattern is applicable to almost any web interface since it addresses the core website requirements such as hierarchy, branding, and calls to action. The Z-pattern is perfect for interfaces where simplicity is a priority and the call to action is the main takeaway. Forcing a Z-pattern for a website with complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of order to simpler layouts (and increase conversion rates). Here’s a few best practices to keep in mind                   
​​ 由於Z模式能處理網站像是階層、品牌推廣、以及呼籲採取行動等核心需求，它幾乎可使用在任何網站界面。Z模式在介面簡易為優先且呼籲採取行動是主要焦點時是非常完美的選擇。強迫把Z模式用在複雜內容的網站上可能不會像F模式能運作，但是Z模式能幫助我們帶來對極簡佈局（以及增加轉換率）的秩序感。下面有些最佳實例可以記在心頭。
​​                                
​​ 
  • ​​Background — Separate the background to keep the user’s sight within your framework. 
  • ​​背景－將背景區隔出來使得使用者目線在您的框架內
  • ​​Point #1 - This is a prime location for your logo.
  • ​​編號1 ：您標誌的主要位置
  • ​​Point #2- Adding a colorful secondary call to action can help guide users along the Z-pattern.
  • ​​ 編號2:加入多彩次要呼籲行動能引導使用者沿著Z模式
  • ​​Center of Page - A Featured Image Slider in the center of the page will separate the top and bottom sections and guide the eyes along the Z path.
  • ​​頁面中間－在頁面中間一個有特徵的圖片滑桿（Image Slider)能區隔頂端以及底端區塊並且能引導目線沿著Z路徑移動。
  • ​​Point #3 - Adding icons that start here and move along the bottom axis can guide the users to the final call to action at Point #4.
  • ​​編號3：從這裡開始加入圖標然後沿著底軸移動，這能夠引導使用者到在編號4最後的呼籲行動。
  • ​​Point #4 - This is the finish line, and an ideal place for your primary Call to Action.
  • ​​編號4:這裡是完成線，一個放置您主要呼籲行動的理想地點
​​                                     
​​Predicting where the user’s eye will go can be a huge advantage. Before arranging the elements on your page, prioritize the most and least important ones. Once you know what you want your users to see, it’s just a simple matter of placing them in the pattern’s “hot spots” for the right interactions. 
​​能預測使用者的視線會往哪邊跑是個大優勢，在排列您頁面元素前，優先化最重要和最不重要的元素。一旦你知道你想讓使用者看到什麼，它就只是一件簡單的事，放它們在模式的“熱點”而有正確的互動。
​​                                                    
​​You can even extend the Z Pattern throughout the entirety of the page, repeating Points 1-4 if you feel that more value propositions are needed before the call-to- action. As you’ll see below, this is exactly what Evernote does by starting with a “Sign Up Now” call-to-action, guiding users through a few selling points, and finishing their “repeated Z pattern” with payment option calls-to-action. 
​​你甚至於可以延伸Z模式貫穿整個頁面，如果你覺得放置呼籲行動前有更多價值定位需要就就重複編號1～4吧。就您在下方所看見的，這正好是Evernote所做的：從“現在就註冊”呼籲行動開始，接著引導使用者經過少數幾個賣點，最後用付費選項呼籲行動完成他們的“重複Z模式”。
​​ 
​​                                        
  • ​​Photo credit: evernote.com
  • ​​ 
​​                                                   
​
​2. CONTRAST: GENERATING INTEREST
​​對比：產生興趣
​​                             
​​To best explain the use of contrast, let’s go back to Luke Wroblewski. Plainly put, contrast is the occurrence of two different elements positioned close together. In web UI design, these elements can be colors (more in Chapter 5), textures, shapes, direction, or size, to name the important ones.                                
​​為了用最好的方式解釋對比使用，咱們回去Luke Wroblewski的論述吧 。簡單說，對比是兩種不同元素緊密放置在一起的事件，在網站使用者介面設計裡，這些元素可以是色彩（更多內容在第五章）、材質、形式、方向、或是大小，到命名最重要的一個。
​​ 
​​           
​​ 
​​                                                   
​​                        
​​                                
​​                                        
​​Alternating between different sized fonts and colors creates an instant hierarchy to your interface. For instance, as you can see below for Constant Contact, changing from a light background to dark background immediately separates the primary call to action of “Try it FREE” from the navigation menu and secondary “Call Us” call to action. Combined with the Z-pattern of the site, the treatment provides a clear visual hierarchy that highlights the email submission form followed by the mid-page navigation menu.
​​在不同大小的文字和色彩間輪換為您的介面創造出瞬間的階層。舉例來說，就您在下面看到的Constant Contact，淺色背景變成深色背景即時地分別了主要的呼籲採取行動“Try it FREE”和導覽清單以及次要呼籲採取行動“Call Us”之間地視覺。和這個網站的Z模式結合在一起，這種處理方式提供了清楚地視覺階層－將電子信箱提交表單以及隨後頁面中間的瀏覽表單彰顯出來。
  • ​​                               
  • ​​                        Photo credit: constantcontact.com
​​                                                   
​​Brandon Jones, looks at how the use of color and size affect first impressions of objects in an interface. Using the below image as an example, most people won’t just see two circles on first glance — instead, they’ll likely see “a black circle and a smaller red circle”. In this sense, contrast in interface items is very powerful since differentiation is the default human response.
​​Brandon Jones寫的文章提到顏色以及大小使用如何影響介面裡物件的第一印象。使用下面圖片為例，大部份人不會第一眼只看到兩個圓，而是，他們可能會看見“一個黑色圓圈和小一點的紅色圓圈”，在這個意義上，由於差別化是人類預設的反應，所以介面項目裡的對比很強大。
​​                        
​​ 
​
​3. TOOLS OF THE TRADE: COLOR, SIZE, AND SPACE 
​​                                                   
​​When “painting” the web interface, don’t forget to use your most powerful visual tools: color, size, and space. Alex Bigman believes that colors and size manage attention, while spacing helps manage visual relationships. 
​​把網頁介面上色時，不要忘記使用你最強而有力的視覺工具：色彩、大小以及空間。Alex Bigman相信色彩和大小管理注意力，而間隔空間幫忙管理視覺關係。
​​                         
​​I. COLOR 
​​色彩
​​ 
​​In a nutshell, bright colors stand out from muted colors. This may seem obvious, but the important takeaway is its application: you can exploit this to draw your user’s attention where you want. Additionally, certain colors can help set the mood of the entire site (blues are tranquil, reds are aggressive, etc.).
​​簡單來說，亮色可以從融合色中脫穎而出。這或許似乎很明顯，但最重要的關鍵點是它的應用：您可以充分利用來吸引使用者專注在你想要的地方，另外，某些顏色能幫忙設定整個網站的情緒（藍色是寧靜、紅色是有侵略性等......)
​​ 
​​               
​​                        Photo credit: fitbit.com
​​                        
​​ Fitbit’s use of color in their Z-pattern interface above is especially clever. The bright use of magenta immediately places the calls to action near the top of the visual hierarchy, but also matches the color of the “Get Active” button — subconsciously signaling that the two concepts are related. Similar shades of blue are also used in the fitness goals and product sections, which cleverly creates an association between the two (and draws clicks to the most valuable parts of the interface).                                                  
​​上方的圖中，Fitbit在Z模式介面裡使用的顏色相當聰明。亮品紅色的運用立即地把呼籲採取行動放置在視覺階層地頂端，而且也匹配“Get Active"按鈕的色彩，這兩種概念潛意識地通知我們是有關聯性的。相似地藍色色階也用在健康目標和產品分區，這聰明地創作出這兩者間的關聯（以及吸引用戶對這介面中最重要的部份點擊）。
​​                             
​​II. SIZE 
​​                                                   
​​Size, particularly for text, is a powerful tool in that it circumvents the traditional rules of left-to-right and up-to-down reading. That means a large word or phrase in the bottom right-hand corner might be the first thing a person reads. Moreover, size can add emphasis to the actual message or content, making it more significant.
​​大小，特別是文字，是種有力的工具來避開由左到右和由上到下閱讀的傳統規則，這意味著在右邊底部角落的大型文字或是片語也許是人們閱讀到地第一個事件。此外，大小能增加實際訊息或是內容的重視，讓它更有重要意義。
​​ 
​​                        
​​                Photo credit: http://getactive.sj-stmk.org
​​                                                   
​​ When it comes to the size of text, a typography study conducted by Smashing Magazine on 50 popular website interfaces found that headings usually stay between 18 and 29 pixels with body copy ranging between 12 and 14 pixels. Of course, this is just a guideline (and will apply more to content-heavy sites), but shows that you still want to maintain a sense of proportion.
​​ 當提到文字大小時，Smashing Magazine進行了文字編排學研究，在50個熱門地網站界面中發現標題大小經常維持在18～29像素，而正文落在12～14像素範圍，當然，這只是個指南（而且更能應用在需大量文章內容的網站），但是它顯示出你仍舊想去維持比例感。
​​ 
​​ III. SPACE
​​ 空間
​​ 
​​ One of the most important tricks in making something pretty is the absolute absence of something pretty. Cluttering too many attractive images together is a quick way to ruin them all. It’s important that your web interface has breathing room and that you space everything out. Reducing the amount of “visual noise” will make the points you want to keep even stronger.
​​ 一個讓某些東西漂亮的重要訣竅是讓某些漂亮的東西絕對缺席。把過多吸引人的圖片塞滿是件很迅速的方式把全部都破壞掉。網站介面有呼吸空間以及把每項都間隔出來是很重要的，減少“視覺雜訊”的數量會讓你想維持住的點更強烈。
​​ 
​​ 
​​                                                   
​​                        Photo credit: houzz.com
​​                        
​​ In fact, Dmitry Fadeyev, founder of Usaura, advises that white space actually improves comprehension. A 2004 study found that strategic use of white space improved comprehension by almost 20%. While spacing didn’t affect how people performed on the website, it did affect user satisfaction and experience (which is equally, if not more, important). As you can see above, the large content margin, padding, and paragraph spacing used by Houzz makes the content easier to read (and encourages interaction with links and sidebars).
​​實際上，Usaura的創辦人Dmitry Fadeyev建議白色空間實際上會增進理解力，2004年的研究中發現策略性地使用白色空間會增加幾乎20%的理解力。白色空間不僅影響人們如何在網站上如何操作，它也影響了使用者滿意度和經驗（即便沒有更多，也是相同重要），就您在上方圖示看見的，Houzz使用大的內容外邊距、內邊距、段落間隔，這讓內容更容易閱讀（以及鼓勵和連結和側邊欄互動）。
​​ 
​
​4. TEST YOUR VISUAL HIERARCHY: BLUR TECHNIQUE 
​​測試您的視覺階層：模糊技巧
​​                                                   
​​Now that we’ve discussed how different interface elements affect visual prioritization, let’s look at a simple way to test your hierarchy. Designer at Rackspace Lee Munroe offers a great method we’ll call the Blurring Technique.                                        
​​既然我們已經討論了不同介面元素如何影響視覺優先權，咱們看一個簡單的方式來測試您的階層。Rackspace公司的設計師Lee Munroe提供一個很棒的方法，我們稱之為模糊技巧。
​​ 
​​Basically, look at a blurred version of your site and see what elements stand out. If it’s not what you want to stand out, it’s time to go back and make some revisions. The blurred version will present a bare bones representation of your visual hierarchy, allowing you to evaluate your interface fresh without any distractions. To spare your eyesight (or a trip to the bar), take a screenshot of your site and add a 5-10 px Gaussian blur in Photoshop. 
​​基本上，看一下你網站的模糊化版本，看看什麼元素比較突出，如果它不是你想要的突出結果，那該是回去做些修改的時候了，模糊化版本將呈現出您視覺階層的裸露骨架，允許你在不分心下評估新介面，為了省下您的眼力（或是逛一下欄位），截一下網站圖片並在Photoshop裡增加5～10像素的高斯模糊。
​​ 
​​                        
​​                Photo credit: wufoo.com. Edited from original.
​​                                  
​​Wufoo’s homepage passes the blur test because the prominent items are the
​​sign up and product feature buttons, both of which should be priorities on any homepage. The shape of the sign up bar makes it stand out, while the white space around the features buttons draws the eye by creating “breathing room”. 
​​因為顯著的項目是註冊以及產品特徵按鈕，Wufoo的首頁通過模糊化測試，這兩者在任何首頁上應該優先考慮，註冊欄的形狀讓它突出，而圍繞在特徵按鈕的白色空間創造出呼吸空間吸引了注目。
​​                                        
​
​Selecting and Applying Web UI Patterns 
​​選擇以及應用網站使用者介面模式                                
​​                                        
​​Once you’ve determined the overall visual hierarchy of the website, you still need to determine the fine details of your web interface such as how users can input data, how the site provides feedback, and many other functional and aesthetic factors. The best ways to consistently address these needs are UI patterns. You’ll rarely be able to create an interface just by stitching different patterns together, but they are a great foundation for customization. 
​​一旦您已經決定網站整體的視覺呈現，您依舊需要決定網站界面的精緻細節，像是使用者如何輸入資料、網站如何提供意見回饋，以及很多其它的功能性和美感因素。最好的方法是持續地稱這些需求為使用者介面模式，你很少只靠著縫合不同模式在一起而創造出介面，但它們針對客製化而言是偉大基礎。
​​                                       
​​In Web UI Design Patterns 2014, we explained the proper application of web UI patterns by looking at 63 examples from sites like Facebook or Pinterest. A UI design pattern is a reusable solution to a commonly occurring problem — not just a feature that can be plugged into your design or a finished design ready to be coded. It’s best to think of them as best practices for core site functions such as: 
​​在2014網站使用者介面設計模式裡，我們看了63個像是Facebook或是Pinterest的網站，藉由這些例子說明了網站使用者介面模式的適當應用。使用者介面設計模式是針對經常產生問題的可重複使用解答，它不僅只是一個可以插進設計裡的特徵或是準備寫程式給已經完成的設計，最好把它們想成網站核心功能的最佳實例，例如：
  • ​​Getting Input- How will users provide your date,and how will the site give them feedback?
  • ​​開始輸入：用戶如何提供您日期，網站如何給他們客戶回饋？
  • ​​Navigation- What menus and tabs will guide the user along?
  • ​​瀏覽：那種清單以及選項卡(tabs)能指引用戶？
  • ​​Content Structuring - How is your content presented and accessed?
  • ​​內容架構：您的內容如何呈現以及取得？
  • ​​Social Sharing- How can your site encourage more social sharing and interaction?
  • ​​社交分享：您網站如何鼓勵更多社交分享和互動？
​​                                       
​​Photo credit
​​ 
​​                                                   
​​Anders Toxboe, designer at Benjamin Interactive in Copenhagen, theorizes that patterns can aid a site in three ways: context, flow, and implementation.
​​哥本哈根Benjamin Interactive的設計師Anders Toxboe建構了模式可以在三方面幫助網站的理論：情境、流程、實作。
​​                             
​​The broadest benefit of patterns, implementation, is the most cut-and-dry. A search box should be in the upper right-hand corner, form labels should be directly under the field box, etc. Instead of recreating the hierarchy for each page, a UI pattern ensures site-wide consistency. 
​​模式最廣泛的用處，實作，是最老生常談的，搜尋框應該在右上角，表單標籤應該直接就在字段框（field box)下等...... 使用者介面模式確保整個網站的一致性，而不是為每個頁面再創造出階層。
​​                                         
​​When using patterns for flow, things get a bit more interesting. Patterns of this type force the designer to answer critical questions about their site. Would my
​​site benefit more from lazy or account registration? What is the best way to get input from my users, given my target audience and the type of site? (Answering these questions will be easier by referencing your personas and scenarios from the previous chapter.) 
​​當為流程使用模式時，事情變得多一點有趣了，這個形式模式強迫設計師回答關於這網站的關鍵問題，我的網站會從懶人登入或是帳號登入獲得更多好處嗎？在已知的目標族群和網站型態下，從我用戶獲得資料的最佳方式是什麼？(參考先前章節的人物角色和場景，讓您比較容易回答這些問題。）
​​ 
​​Last (but in the grand scheme of things, first) we have patterns of context. This is basically choosing what type of site you want, and following patterns specific to that type. For example, let’s say you’re building a site for a professional entertainer: you’ll need to include things like an event calendar, biography, and portfolio. If you’re making a ecommerce site, you won’t get very far without a checkout system. 
​​最後（但在第一事件大構想中）我們有情境模式，這基本上挑選你想要那種型態的網站，而遵從針對那型態的模式，舉例來說，比方說你正在建構一個給專業藝人使用的網站，您會需要包含一些東西，像是活動行事曆、自傳、和作品集。如果您在製造電子商務網站，您距離收銀台系統不會很遠。
​​ 
​
​1. SELECTING THE RIGHT UI PATTERNS 
  • ​​選擇適當的使用者介面模式
​​The process for selecting a UI pattern can be simplified as:
​​選擇使用者介面模式的過程能簡化成
​​1. Figure out the problems that need to be solved. 
​​了解需要被解決的問題。      
​​2. Find out how others have solved it.
​​了解別人如何解決這問題。      
​​3. Examine a good example of its use on other sites. 
​​檢查其它網站上使用它的好例子。                      
​​                       
​​The criteria for determining the right pattern is elaborated on by Melissa Joy Kung, Editor-in-Chief of Technori, in her post about the topic. While the above process is focused on finding the right patterns, hers discusses how to decide whether or not a pattern is right for you. She illustrates her points through the example of a “ratings” style pattern used by Rotten Tomatoes: 
​​Technori的主編Melissa Joy Kung在她文章中有關於這主題，她闡述了決定正確模式的標準。雖然上述的程序焦點在找到正確的模式，她也討論了如何判斷這模式是否適合你，她藉由Rotten Tomatoes使用的“評分”風格模式為例圖解說明她的要點。
​​                                                   
​​                        
​​                                
  • ​​Photo credit: www.rottentomatoes.com/tv/unbreakable-kimmy-schmidt/s01/ 
​​            
  1. ​​Define the pattern — Understand what the pattern does. As shown above, the ratings patterns gives users quick feedback and allows their voice to be heard, plus it is useful in collecting user data.
  1. ​​ Find a strong example- Search the web and find a site that uses the pattern well,in this case, Rotten Tomatoes.
  1. ​​List the problems the pattern solves- For the ratings example,it creates more reliable and direct feedback, it makes the site more interactive and fun, and it gives the users' options more weight,which they appreciate.
  1. ​​Know when to use the pattern - Be aware of when the pattern is appropriate. A ratings pattern is used when your product requires additional feedback, or when you want to expand on existing feedback like a written review.
  1. ​​Know how to use the pattern- Know the technical details. A good use of the rating pattern will include an aggregated average of the user ratings,an option to change the rating later, a display that lights up when you hover on it,a cue to let the user know their rating is accepted , etc.
​​     
  1. ​​定義模式－了解模式在做什麼，如同上面展示的，評分模式能給用戶快速回饋並允許他們的聲音被聽見，另外它在收集資料方面也很有用。
  1. ​​找強而有力的範例－搜尋網站，找到把這模式用得好地網站，在這案例裡是Rotten Tomatoes。
  1. ​​列出模式解決的問題－對這“評分”例子，它創造更可靠和直接的回饋，它讓網站更有互動性更加有趣，它也給了用戶更多評分權重選項，這是讓用戶欣賞的。
  1. ​​知道何時使用模式－要意識到何時使用模式是合適的，當您產品需要額外回饋意見時，或是當你想拓展現存的回饋像是寫好的評論時，評分模式才會用到。
  1. ​​知道如何使用模式－知道詳細的技術，妥善利用的評分模式包含使用者評價的總平均、稍後修改評分的選項、當游標移到上頭時畫面會被點亮、一個提示讓用戶知道他們的評比已經被接受等......
​​                                      
​
​2. PATTERN LIBRARIES
​​模式庫
​​                                   
​​Unless you’re a hardened UI designer with years of experience, it’s hard to keep track of all the patterns at your disposal. Missing out on a useful pattern can waste your time with finding a solution that others have thought of already. In order to stay up-to-date, below are some quick references for pattern libraries.
​​除非你是位有多年經驗老練的使用者介面設計師，不然很難追蹤所有供你處置的模式，錯過一個有用的模式可能會浪費你的時間找到一個別人已經想過的答案，為了掌握最新訊息，下面有些針對模式庫的快速參考。
​​ 
  • ​​UI Patterns- A convenient web pattern library with patterns organized by category; however, it has not been updated recently.
  • ​​Pattern Tap- A community of designers for web design education and resources.
  • ​​Web UI Kit - Collection of 30 patterns compatible for Axure, Omnigraffle, Photoshop and Sketch.
  • ​​UI Patterns－模式用目錄組織起來，一個方便性的網頁模式庫。
  • ​​Pattern Tap- 提供網站設計教育和資源的設計師社群網站
  • ​​Web UI Kit- 相容於Axure, Omnigraffle, Photoshop和Sketch的30種模式組
​​                                                
​​For a comprehensive source of UI patterns, you can check out this listing of over 40 online pattern libraries from Smashing Magazine. 
​​對於更全面的使用者介面模式，您可以看看從Smashing Magazine列出地超過40種線上模式庫。
​​                                        
​
​Takeaway 
​​重點精華
​​                                            
​​Understanding visual hierarchy and applying design patterns are two of the most important skills in good web UI design. They are fundamental and interconnected: once you know how to visually prioritize information, you’ll have a better grasp of how to apply existing design patterns.                                
​​了解視覺階層和應用設計階層在良好的網站界面設計裡是兩種最重要的技能，它們是基礎而且相互連結的：一旦您知道如何視覺上優先化資訊，您會對於如何應用在現存設計模式上有較佳地了解。
​​                             
​​Prioritize your interface based on how people scan for information. Then, apply color, contrast, color, size, and spacing for further accentuation. In the next chapter, we’ll delve deeper into design principles, specifically more of the “why” behind the hierarchies and patterns we’ve discussed.
​​依照人們如何掃描資訊來優先化您的介面，然後應用色彩、對比、大小和間隔來進一步強化訊息。在下一章，我們會更深入設計原則，特別在我們已討論的階層以及模式後面，有更多會在“為何”這樣。
​​                
​​                
​​                                
​​                        
​​                
​​                        
​​                
​​                
​​                        
​​                
​​                                        
​​                                
​​                        
​​                
​​                                        
​​                                
​​                        
​​                
​​                                
​​                        
​​                
​​                                
​​                        
​​                
​​                                
​​                        
​​                
​​ 
​​                                        
​​                                
​​                        
​​                
​​                                                                         
​​                        
​​                
​​ 
​​