使用者介面設計的概念

原文出處：http://bokardo.com/principles-of-user-interface-design/

共有20條。

嘗試翻譯成中文，並加上一些自己的意見跟例子，有錯誤煩請指教。 : )


使用者介面設計的原則
Principles of User Interface Design


前言：

「設計不僅只是簡單的組裝、排列或是編輯，設計是為了增加價值及意義，說明、簡捷化、明確化、調整、突顯、戲劇化、說服甚至是有趣一點」- Paul Rand

"To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse." - Paul Rand


1. 「明確目標」為首要任務

對任何介面而言，明確目標是首要也是最重要的任務，人們必須要能辨別那是什麼，才能有效使用你設計的介面，你要關心使用者為何需要介面、讓使用者了解介面能幫助他們和什麼互動，讓使用者能預測使用介面後會有什麼效果，這樣就能讓使用者順利的操作介面。神祕感和延遲出現是有保留的空間可以使用的，但是不可以引起任何的困惑，「明確目標」為使用者帶來信心有助於後續的操作。100個明確的畫面勝過1張但是不知道在做什麼的畫面。

Clarity is job #1
Clarity is the first and most important job of any interface.
To be effective using an interface you've designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. While there is room for mystery and delayed gratification in interfaces, there is no room for confusion. Clarity inspires confidence and leads to further use. One hundred clear screens is preferable to a single cluttered one.

讓我想到一些網站為了想要有所謂"社群"的互動，加上很多奇怪的功能，結合facebook帳號等等，但如果加上社群的互動會影響到原先的目標，這設計就失去了原本網站的目的了！


2. 介面是為了互動而存在

介面的存在是為了讓人和世界可以互動，介面可以幫助人們確認、明白、使用或展現關係、把我們群聚在一起或是將我們分開、讓我們體驗及給予我們授權服務。使用者介面的作用不只是為突顯介面設計本身的藝術，也不是一個紀念碑。介面完成互動的任務的效率是可以被測量的。最好的介面設計可以啓發、喚醒、加強我們和世界的關聯。

Interfaces exist to enable interaction
Interfaces exist to enable interaction between humans and our world. They can help clarify, illuminate, enable, show relationships, bring us together, pull us apart, manage our expectations, and give us access to services. The act of designing interfaces is not Art. Interfaces are not monuments unto themselves. Interfaces do a job and their effectiveness can be measured. They are not just utilitarian, however. The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.



3. 不息代價的取得注意力

我們生活在一個容易被打擾的世界，其實很難靜下心來閱讀，因為無時不刻會有事物嘗試打斷你或是吸引你的注意力。注意力是寶貴的。別在你的應用程式側欄裡塞滿一堆讓人分心的東西...永遠要記得這個畫面一開始是為了什麼目的設計的。如果是為了讓人閱讀，最起碼等到都讀完了才跳廣告(如果一定要放的話)。保持注意力不止你的讀者開心，最後的結果也會變得比較好。把這視為首要目標之一，注意力是先覺條件，不計代價的保護他們。

We live in a world of interruption. It's hard to read in peace anymore without something trying to distract us and direct our attention elsewhere. Attention is precious. Don't litter the side of your applications with distractible material…remember why the screen exists in the first place. If someone is reading let them finish reading before showing that advertisement (if you must). Honor attention and not only will your readers be happier, your results will be better. When use is the primary goal, attention becomes the prerequisite. Conserve it at all costs.



4. 保持使用者的掌控權

人們在自己能掌控的環境下會感到最舒適，輕率的軟體設計奪走這份舒適感，強迫使用者進行不如自己預期的互動，令人困惑的路徑及讓人驚嚇的結果。 利用定期重整系統狀態、描述因果關係讓使用者能掌控 (如果你這樣做，以上就會發生)，另外對每次的操作結果做出提示。不用擔心說了"顯而易見"的癈話，因為通常 "顯而易見"這件事並不存在....

Keep users in control
Humans are most comfortable when they feel in control of themselves and their environment. Thoughtless software takes away that comfort by forcing people into unplanned interactions, confusing pathways, and surprising outcomes. Keep users in control by regularly surfacing system status, by describing causation (if you do this that will happen) and by giving insight into what to expect at every turn. Don't worry about stating the obvious…the obvious almost never is.



5. 直覺式操作是最好的

無存在感的介面，就是最棒的介面、像我們平常操作實體的東西一樣。由於這不是每次都能達成，隨著元素的資訊不斷增加，我們設計介面來幫助我們和元素互動。加上不一定需要的圖層是件簡單的事，或是加個華麗的按鈕、Chrome、圖片、選項、處理效能、視窗、附件...結果我們就在忙著變換這些UI元素然後忘了重要的事。你應該緊抓原始目的的直覺...設計出盡可能精簡的界面，盡量置入人們天生就習慣的手勢，這樣一來順暢的界面會讓使用者覺得自己是直覺得在操作想動作的目標物件。

Direct manipulation is best
The best interface is none at all, when we are able to directly manipulate the physical objects in our world. Since this is not always possible, and objects are increasingly informational, we create interfaces to help us interact with them. It is easy to add more layers than necessary to an interface, creating overly-wrought buttons, chrome, graphics, options, preferences, windows, attachments, and other cruft so that we end up manipulating UI elements instead of what's important. Instead, strive for that original goal of direct manipulation…design an interface with as little a footprint as possible, recognizing as much as possible natural human gestures. Ideally, the interface is so slight that the user has a feeling of direct manipulation with the object of their focus.



6. 一個畫面一個主要任務

設計每個畫面都要提供使用者有價值的單一操作，讓介面更好學習、好用，新增或擴充也更簡易。一個畫面有兩個以上的主要操作很容易讓人困惑。就像撰寫文章要有單一強力的主題，每個畫面也都應該有單一且明確的存在目的。

One primary action per screen
Every screen we design should support a single action of real value to the person using it. This makes it easier to learn, easier to use, and easier to add to or build on when necessary. Screens that support two or more primary actions become confusing quickly. Like a written article should have a single, strong thesis, every screen we design should support a single, strong action that is its raison d'etre.

這讓我想到註冊一些資訊常常有過長的表單，常到你怎麼滾動都滾不完，如果可以嘗試切開任務，讓使用者對任務有體驗，會是一個較好的方式


7. 次要的動作保持在次要

畫面上有單一的主要主題時可以擁有多重的次要動作，不過要讓它保持在次要！就像是你必須先擁有一篇文章，你才能有東西讓人分享到 Twitter 上....文章存在的目的是為了讓人可以閱讀可以了解。讓次要得動作放在次要得位置，可以讓他們以比較輕量化的方式呈現，或是等你主要的動作結束後它才會呈現。

Keep secondary actions secondary
Screens with a single primary action can have multiple secondary actions but they need to be kept secondary! The reason why your article exists isn't so that people can share it on Twitter…it exists for people to read and understand it. Keep secondary actions secondary by making them lighter weight visually or shown after the primary action has been achieved.

先有東西，才能分享給大家，如果是要經營一個內容需要靠User來經營的網站，就應該要想辦法把內容建立起來，再去思考怎麼散播出去的問題。


8. 提供自然的下一步

很少有互動是註定被放在最後的，所以請貼心的為使用你的系統的人設計每一個"下一步"的互動方式。你要預期未來的每一個互動跟每一個可能，設計出來的東西要能符合每一個可能。就樣我們跟其它人開始一段談話，為了能進一步互動提供一個好開頭。別讓人不知所措的停留在那

Provide a natural next step
Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface. Anticipate what the next interaction should be and design to support it. Just as we like in human conversation, provide an opening for further interaction. Don't leave a person hanging because they've done what you want them to do…give them a natural next step that helps them further achieve their goals.



9. 外觀是跟隨行為改變的 (如同樣式必須配合功能)

人事物按照我們所預期的去進行會讓我們感覺到最安心舒適。當某人或某件事的行為始終按照我們所期望的的去進行，我們會感到跟他們保持一個友好的關係。設計元素就應該按照他們應該要有的行為去設計。意思就是，當有人只要光看著一個元素，就應該要能預測這個元素是做什麼的。就像是如果它是個按鈕，它就應該要長得像一個按鈕，不要用什麼可愛的互動覆蓋基礎的行為，先將你的創造力放在為這些互動的關心上。

Appearance follows behavior (aka form follows function)
Humans are most comfortable with things that behave the way we expect. Other people, animals, objects, software. When someone or something behaves consistently with our expectations we feel like we have a good relationship with it. To that end designed elements should look like how they behave. In practice this means that someone should be able to predict how an interface element will behave merely by looking at it. If it looks like a button it should act like a button. Don't get cute with the basics of interaction…keep your creativity for higher order concerns.



10. 保持一致性

跟著前面的規則，視覺元素應該要保持一致性，除非他們的行為是不同的。行為相同的元素看起來應該要相同，但是不相像的元素要保持他們的不一致性。新手設計師通常在會把相同視覺處理 (使用重複的程式碼) 用在其實應該要用不同的視覺處理比較是適合的情況上，這點需要多花點努力去了解。

Consistency matters
Following on the previous principle, screen elements should not appear consistent with each other unless they behave consistently with each other. Elements that behave the same should look the same. But it is just as important for unlike elements to appear unlike (be inconsistent) as it is for like elements to appear consistent. In an effort to be consistent novice designers often obscure important differences by using the same visual treatment (often to re-use code) when different visual treatment is appropriate.



11. 強烈的視覺變化運作最佳

強烈的視覺變化可以讓畫面有清晰的層次感。也就是說當使用者每次都看到有相同順序的相同項目，比較弱的視覺變化給予使用者較少的線索讓目光停留在特定的項目上，最後會讓使用者感覺到困惑跟混亂。在變化繁雜的環境中，保持一種強烈的視覺層次是很困難的，因為視覺的重量是相對的。當所有東西都是粗體呈現，那就沒有所謂的"粗體"了。當有一個視覺強烈的元素加到畫面中時，設計者應該要重新調整頁面上所有元素的重量分配，才能再次呈現出視覺的強弱變化。大多數人不會注意到視覺重量這件事，但這其實是最簡單的設計方法，你只要加強某項或削弱某項。

Strong visual hierarchies work best

A strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen. That is, when users view the same items in the same order every time. Weak visual hierarchies give little clue about where to rest one's gaze and end up feeling cluttered and confusing. In environments of great change it is hard to maintain a strong visual hierarchy because visual weight is relative: when everything is bold, nothing is bold. Should a single visually heavy element be added to a screen, the designer may need to reset the visual weight of all elements to once again achieve a strong hierarchy. Most people don't notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design.



12. 靈巧的編排以滅少判斷的需要

如同 John Maeda 在他的書中提到的，簡單、靈巧的編排螢幕上的元素可以讓使用者看到更多。這樣做人們可以更快更簡單了解你設計的介面，因為你已經用你的設計清楚的說明了內容彼此的關係。將相同元素圈起來，利用方向跟位置呈現自然的關聯。透過巧妙的安排降低使用者對你的內容認知的負擔，他們不用花時間去思考哪些東西跟哪些東西有關連，因為你已經把關聯做好了。不要強使用者花時間去思考，用你的設計的關聯直接呈現在頁面上給他們看。

Smart organization reduces cognitive load

As John Maeda says in his book Simplicity, smart organization of screen elements can make the many appear as the few. This helps people understand your interface easier and more quickly, as you've illustrated the inherent relationships of content in your design. Group together like elements, show natural relationships by placement and orientation. By smartly organizing your content you make it less of a cognitive load on the user…who doesn't have to think about how elements are related because you've done it for them. Don't force the user to figure things out…show them by designing those relationships into your screens.


13. Highlight 不要只用顏色做變化

有關物理的顏色呈現主要決定在光線的變化，就像我們可以看到樹一整天的在太陽下的光影有非常不一樣的變化。在物理的世界裡，顏色跟陰影有很大的關係，顏色不能被當成只是一個表面的色彩。我們可以用高亮彩的顏色，幫助吸引注意力，但這不是唯一的方法，如果是一個需要長時間閱讀的介面，可以採用柔和的背景，降低整體的亮度，突顯你要注意的顏色。當然也可用活潑亮麗的色彩當背景，但是要確保可以適合你的觀眾。

Highlight, don't determine, with color

The color of physical things changes as light changes. In the full light of day we see a very different tree than one outlined against a sunset. As in the physical world, where color is a many-shaded thing, color should not determine much in an interface. It can help, be used for highlighting, be used to guide attention, but should not be the only differentiator of things. For long-reading or extended screen hours, use light or muted background colors, saving brighter hues for your accent colors. Of course there is a time for vibrant background colors as well, just be sure that it is appropriate for your audience.



14. 分斷說明

只在螢幕上呈現最需要的資訊。如果要吸引人們抉擇，只能出現足夠的資訊，讓他們選擇，然後後續逐漸深入之後細節。避免試圖一次就呈現跟解釋全部的資訊，如果可以的話，將可以延遲出現的資訊逐步的呈現，這樣會讓你的資訊更清楚。

Progressive disclosure

Show only what is necessary on each screen. If people are making a choice, show enough information to allow them the choice, then dive into details on a subsequent screen. Avoid the tendency to over-explain or show everything all at once. When possible, defer decisions to subsequent screens by progressively disclosing information as necessary. This will keep your interactions more clear.



15. 幫助及說明使用連結

在理想的介面設計中，「幫助」或「說明」其實是沒有必要，因為介面是應該是要可以讓人學習跟可以使用的。「幫助」是幫助上下文能串連的東西，應該是在真的有需要的時候才出現，平常應該是隱藏的狀態。讓人們自己去尋求幫助，讓他們自己找到問題的答案，這些權責在他們的身上，我們才能知道他們到底需要什麼。重點不在把「幫助」「說明」放在可能需要的地方，重要的是你要確認人們可以順暢的使用你的介面設計。

Help people inline

In ideal interfaces, help is not necessary because the interface is learnable and usable. The step below this, reality, is one in which help is inline and contextual, available only when and where it is needed, hidden from view at all other times. Asking people to go to help and find an answer to their question puts the onus on them to know what they need. Instead build in help where it is needed…just make sure that it is out of the way of people who already know how to use your interface



16. 關鍵時刻: 簡化使用者導覽

第一次使用經驗是最重要的，也是設計師常常忽略的。為了讓使用者更快的上手，最好的設計就是設計良好的第一次導覽，也就是還沒開始使用過得第一次接觸。這樣的導覽不能從一張空白的畫布開始解說起...應該要提供一個方式跟指引，加入使用者進入狀況，多數這樣的導覽會混雜著內容的互動，當使用者開始了解你的規則，他們更能成功使用你設計的介面。

A crucial moment: the zero state

The first time experience with an interface is crucial, yet often overlooked by designers. In order to best help our users get up to speed with our designs, it is best to design for the zero state, the state in which nothing has yet occurred. This state shouldn't be a blank canvas…it should provide direction and guidance for getting up to speed. Much of the friction of interaction is in that initial context…once people understand the rules they have a much higher likelihood of success.

Dropbox 跟 Cacoo 的使用者導覽都是不錯的案例。


17. 已知問題最有價值

人們會尋求去尋求那已知問題的答案，並非淺在問題或是會來可能會發生的問題。因次，請避免去設計出那些「假設問題」的介面，觀察那些實際已經發生的行為，並設計介面去解決這些已知的問題。當然這樣沒有那些天馬行空的創意來的有趣，但這些是最實際可以解決人們在使用你的介面時遇到的問題。

Existing problems are most valuable

People seek out solutions to problems they already have, not potential problems or problems of the future. Therefore, resist creating interfaces for hypothetical problems, observe existing behavior and design to solve existing problems. This isn't as exciting as blue sky wondering but can be much more rewarding as people will actually use your interface.



18. 最棒的設計肉眼看不到

「對厲害的設計感到好奇感」通常不會被大家注意。其中的原因，一個成功的設計，使用者會專注在他想要達到的目標，而非這個介面長得如何...當他們順利的達到目的，他們會感到滿足，不需要額外對這些狀況最其它反應。當一個設計師，要達到這樣是滿困難的，我們很少收到正面的回應，我們很少知道哪些設計是好的。但，厲害的設計師是設計出好介面的核心，而且他們也知道快樂的使用者通常是沉默的。

Great design is invisible

A curious property of great design is that it usually goes unnoticed by the people who use it. One reason for this is that if the design is successful the user can focus on their own goals and not the interface…when they complete their goal they are satisfied and do not need to reflect on the situation. As a designer this can be tough…as we receive less adulation when our designs are good. But great designers are content with a well-used design…and know that happy users are often silent.



19. 從其他設計領域開始下手

視覺及平面設計，排版，文案，資訊架構學和視覺設計......所有這些都是界面設計的一部分。他們都都有自己的專業，不要企圖跟他們劃分界線，或看不起其他的領域，從他們身上學到學到很多專業且幫助你，更可以從看似無關的東西學起，接觸你不熟悉的領域，從出版、寫程式、書本裝訂 、玩滑板、空手道......等等？

Build on other design disciplines

Visual and graphic design, typography, copywriting, information architecture and visualization…all of these disciplines are part of interface design. They can be touched upon or specialized in. Do not get into turf wars or look down on other disciplines: grab from them the aspects that help you do your work and push on. Pull in insights from seemingly unrelated disciplines as well…what can we learn from publishing, writing code, bookbinding, skateboarding, firefighting, karate?



20. 介面存在是為了讓人能使用

在大多數的設計學科中，成功最簡單的定義就是當有人願意去使用就是好的設計。像是一個漂亮椅子但坐起來不舒服，沒有人願意坐，這就是一個失敗的設計。因次介面的存在就為了創造一個好用的環境去讓人使用，就像你設計了一個好用的設計品。設計絕對不是拿來滿足設計師的雄心壯志，最重要的是它要「能用」！

Interfaces exist to be used

As in most design disciplines, interface design is successful when people are using what you've designed. Like a beautiful chair that is uncomfortable to sit in, design has failed when people choose not to use it. Therefore, interface design can be as much about creating an environment for use as it is creating an artifact worth using. It is not enough for an interface to satisfy the ego of its designer: it must be used!