最全,从小白到交互设计大牛的105条设计原则-附PDF资料
用戶界面應該基于用戶心理模型,而不是實現模型。
User interfaces should be based on user mental models rather than implementation?models.
目標導向的交互設計反映了用戶的心理模型。
Goal-directed interactions reflect user mental models.
交互設計不是憑空猜測。
Interaction design is not guesswork.
任何設計成果的評判標準,都要看產品最終滿足用戶或委托開發組織需求的程度。不管設計師技藝多高超,多有創造力,如果沒有清晰而詳細地了解其目標用戶、問題限制及推動設計的商業或組織目標,那么成功的機會不大。僅僅篩選一下從市場調查(盡管這對回答其他類型問題十分重要)之類的定量研究得到的數字和圖表,很難輕易地深入把握這些主題。
這種行為和組織知識需要通過定性研究方法來收集。定量研究方法有很多種,每種方法對理解產品設計輪廓都十分重要。第3章?為用戶建模:人物模型和目標一旦花了大量時間進行實地調查,研究用戶的生活、動機和環境,接著問題自然而然地產生了:如何利用如此巨大的研究數據打造成功的產品?記事本里充滿了對話記錄和觀察結果,很可能我們交流過的每 個人都有些許不同。很難想象,每次做出設計決策時,都要從數百頁筆記中挖掘有用信息。即便有足夠時間,這些筆記提供的信息是否有幫助還不 一定。如何使這些數據變得有意義?如何辨明重點?我們引入了建模(model)這一強大概念解決上述問題。
不要讓用戶感覺自己愚笨。
Don’t make the user feel stupid.
界面設計的關注點在于單個主要人物模型。
Focus the design for each interface on a single primary persona.
在前兩章中,我們討論了如何收集關于用戶的定性信息,如何利用信息創 建模型。通過仔細分析用戶研究結果以及人物模型及其他模型的綜合體,我們創造了一副清晰的畫面來呈現用戶及其各自的目標和用戶目前的情況。接下 來,就到了整個方法的關鍵部分:如何利用對用戶的理解來制訂設計方案,既 能讓用戶滿意、對用戶有所激發,同時又能完成商業目標,突破技術上的限制。
設計產品行為前,首先定義產品會做什么。
Define what the product will do before you design how the product will do it.
設計的早期階段,假定界面是魔法。
In the early stages of design, pretend the interface is magic.
上一章中我們討論了設計過程的前半部分,即利用故事情節或場景劇本來設想理想的用戶交互過程,之后從這些場景和其他來源中對需求進行定義。現在我們終于做好準備,開始設計。
絕對不要向利益相關者展現你不滿意的設計方案,那可能正是他們喜歡的。
Never show a design approach you’re unhappy with; stakeholders just might like it.?
用戶體驗只有一個,即形式和行為的設計必須相互和諧。
There is only one user experience: Form and behavior must be designed in concert.
在本書的介紹中,我們曾提到,目標導向方法包含三方面內容,即原則、類型和過程。然而,還有一點值得提及——實踐。本書花費了大幅篇幅講述上述 三方面內容,我們希望能在本章跟大家分享一些關于目標導向設計的實踐,以及設計團隊如何融入更大的產品團隊。?
本章主要講述三方面內容:一是團隊合作的戰略;二是產品開發的正確方法;三是整合不同組織間團隊合作的技巧。有些最有趣、最重要的設計問題太 大以致無法單獨解決。通常,這些問題牽扯過多,很難拋開其他問題而單個解決。第二部分 設計行為和形式第7章?良好產品行為的基礎如何做出產品設計的決策呢?什么成就了好的設計方案呢?測量設計質量的一個依據,就是產品滿足用戶目標和需求的能力,以及是否適應商業目標和技術限制。但是產品解決方案是否具有可識別、可實現性的特征?我們能否將類似問題的解決方案一般化?要成就好的設計是否要求設計過程具有普遍適用性??答案就在交互設計價值、原則和模式的使用中:設計價值(design values) 為成功、恰當的設計實踐提供了指導方針;設計原則(design principles)為設計有用而令人期待的產品、系統和服務提供了向導;設計模式(design patterns) 針對某些具體的設計問題給出了一般方案。第8章?數字產品的禮儀
研究發現,人類與計算機及其他交互產品之間的對待和反應方式如同人與人之間的交往。我們與軟件的交互也出于本能,是無意識行為,也是不可回避的。這個研究的意義是深遠的,如果希望用戶喜歡我們的軟件,那么當我們設計軟件時,應該讓它表現得像一位舉止得體的人。如果希望用戶能高效地使用我們的如果希望用戶能高效地使用我們的軟件,那么就應該將它設計得像一個幫助和支持自己工作的同事。總之, 應當考慮人與計算機在工作上的角色分配。
人來思考,計算機干活。
The computer does the work, and the person does the thinking.
軟件應該像人一樣體貼。
Software should behave like a considerate human being.
如果用戶愿意操作,就值得程序記住。
If it’s worth it to the user to do it, it’s worth it to the application to remember it.
技術平臺相關的決定最好能融入交互設計的成果。
Decisions about technical platform are best made in concert with interaction design?efforts.
全屏幕使用獨占應用程序,讓它發揮最優效果。
Optimize sovereign applications for full-screen use.
獨占界面應該采用保守的視覺風格。
Sovereign interfaces should feature a conservative visual style.
獨占式應用程序可以使用豐富的輸入方式。
Sovereign applications should exploit rich input.
在獨占應用程序中讓文檔視圖最大化。
Maximize document views within sovereign applications.
暫時應用程序必須簡單、清晰并且意思明確。
Transient applications must be simple, clear, and to the point.
暫時式應用程序只使用一個窗口和視圖。
Transient applications should be limited to a single window and view.
啟動暫時式應用時,它應該處于上一次的位置和配置狀態下。
A transient application should launch to its previous position and configuration.?
信息亭應該針對首次使用者進行優化。
Kiosks should be optimized for first-time use.
大部分技術產品用戶都了解這種感受,即買回一部數字家電或下載一個新 軟件應用,就意味著要開始學習一種新界面;而這種學習過程歷時數天,充滿了 挫折感和失望。此外,許多有經驗的數字產品用戶也可能會沮喪,因為他們總被產品當作新手。看來很難找到一個合適的平衡點,同時滿足新手和專家的要求。
不要將培訓工具固定化。
Don’t weld on training wheels.
沒有人愿意永遠當個新手。
Nobody wants to remain a beginner.
為中級用戶而優化設計。
Optimize for intermediates.
為常見的導航調整界面。
Inflect the interface for typical navigation.
用戶只有獲得充分的回報,才會付出相應的努力。
Users make commensurate effort if the rewards justify it.?
將用戶想象成為非常聰明但很忙碌的人。
Imagine users as very intelligent and very busy.
如果產品設計的目標是讓用戶在使用產品時生產力更高、更有效、更投入, 就必須讓用戶保持正確的心態。本章討論人類心理工程學(mental ergonomics), 主要講述了如何讓產品支撐起用戶的智力和效率,如何避免破壞用戶在投入生產時的專注度,這正是我們希望用戶保持的狀態。
不論界面多酷,越少越好。
No matter how cool your interface is, less of it would be better.?
不要用對話框報告。
Don’t use dialogs to report normalcy.
請求原諒,而不是許可。
Ask forgiveness, not permission.
盡可能地消除每一種練習。
Eliminate excise wherever possible.
不要愚蠢地打斷進程。
Don’t stop the proceedings with idiocy.
不要讓用戶請求許可。
Don’t make users ask for permission.
任何輸出之處應允許輸入。
Allow input wherever you have output.
重大改變必須顯著優秀。
Significant change must be significantly better.
隨著Android、WindowsPhone和iOS的降臨,我們正式進入了交互設計的 后隱喻時代。早期桌面軟件和手持設備的擬物化(skeuomorphism)和過度雕琢的視覺隱喻已成過去。現代設備的UI以內容和數據為中心,把UI控件的認知度降至最低。?這種脫離隱喻之勢姍姍來遲,如此有充足的理由:嚴格奉行隱喻設計毫無必要,卻把界面死死地與物理世界的運行機制捆綁在一起。基于隱喻設計的用戶界面還有一大堆其他問題,如沒有足夠多的隱喻、 縮放效果不好、用戶能否識別出隱喻有待商榷,特別是在跨文化時。隱喻, 尤其是物理隱喻和空間隱喻,在設計大多數數字產品時作用不大。
多數人并不想知道得太多,只想成功地使用產品。
Most people would rather be successful than knowledgeable.
不要讓界面強行適應隱喻。
Never bend your interface to fit a metaphor.
所有的習慣用法都需要學習,而好的習慣用法只需學習一次。
All idioms must be learned; good idioms need to be learned only once.?
豐富的視覺反饋是成功的直接操作的關鍵。
Rich visual feedback is the key to successful direct manipulation.
盡可能用視覺表達順從。
Visually communicate pliancy whenever possible.
出錯可能不是程序的問題,但是程序的責任。
An error may not be your application’s fault, but it is your application’s responsibility.?
審核,不要編輯。
Audit, don’t edit.
自動保存文檔和設置。
Save documents and settings automatically.
把文件放在用戶能找到的地方。
Put files where users can find them.
給用戶提供一個現成模板庫。
Offer users a gallery of ready-to-use templates.
表明這是什么用視覺;明確這是哪一個用文字。
Visually show what; textually tell which.
行為不同的元素要在視覺設計上明顯區分。
Visually distinguish elements that behave differently.
從視覺上傳達功能和行為。
Visually communicate function and behavior.
刪減東西,直到破壞了設計為止,再把最后去掉的東西加上。
Take things away until the design breaks, and then put that last thing back in.
遵守標準,除非有極好的其他選擇。
Obey standards unless there is a truly superior alternative.
一致不意味著僵化。
Consistency doesn’t imply rigidity.
無論是運用哪種交互習慣用法,都要考慮實際運用場景的客觀情況。
The utility of any interaction idiom is context-dependent.
對話框是一個房間,去之前要有個好理由。
A dialog box is another room; have a good reason to go there.
將功能置于需要它們的窗口中。
Provide functions in the window where they are used.
用菜單來提供一條學習的途徑。
Use menus to provide a pedagogic vector.
禁用掉不適用的菜單項。
Disable menu items when they are not applicable.
相同的命令要使用相同的視覺符號。
Use consistent visual symbols on related commands.
工具欄為有經驗的用戶提供快速訪問常用功能的途徑。
Toolbars give experienced users fast access to frequently used functions.
所有工具欄和圖標控件都應該使用工具提示。
Use ToolTips with all toolbar and iconic controls.
瀏覽和選擇任務要同時提供鼠標和鍵盤支持。
Support both mouse and keyboard use for navigation and selection tasks.
用光標形狀變化表明元鍵的用法。
Use cursor hinting to show the meanings of metakeys.
單擊意味選擇數據或對象,或改變控件狀態。
Single-clicking selects data or an object or changes the control state.
雙擊意味著單擊再加上動作。
Double-clicking means single-clicking plus action.
在對象或者數據上按下鼠標意味著選擇。
Mouse-down over an object or data should select the object or data.
在控件上鼠標按下意味著預備動作;鼠標釋放意味著執行動作。
Mouse-down over controls means proposing an action; mouse-up means committing to?an action.
要讓選中這種狀態,在視覺上明確而醒目。
Mouse-down over controls means proposing an action; mouse-up means committing to?an action.
拖放候選對象必須在視覺上表明它們的接受能力。
The selection state should be visually evident and unambiguous.
拖動光標必須在視覺上表明源對象。
Drop candidates must visually indicate their receptivity.
任何可滾動的拖放目標對象都必須支持自動滾屏。
Any scrollable drag-and-drop target must auto-scroll.
所有拖動都要去顫動
Debounce all drags.
任何要求精確對齊的程序必須提供精確滾動的游標工具。
Any program that demands precise alignment must offer a vernier.
大多數移動應用是暫態的。
Most mobile apps have transient posture.
要限制動畫式屏幕轉換的次數和出現的方向。
Limit the number and direction of animated screen transitions.?
用教程引導首次使用的用戶。
Use guided tours to orient first-time users.
用覆蓋層展示手勢的用法。
Use overlays to explain gestures.
采用永久固定的頁眉來保持情境。
Use persistent headers to maintain context.
帶有橫向鏈接的“面包渣”讓導航更快捷。
Breadcrumbs with lateral links help speed navigation.
自動填充、自動推薦、分面搜索可以讓用戶更快地找到所需的東西。
Auto-complete, auto-suggest, and faceted search help users find things faster.?
讓滾動變得更投入。Make scrolling an engaging experience
無限滾動與網站頁腳是互斥的習慣用法。Infinite scrolling and site footers are mutually exclusive idioms.
如果你的網站只有一個版本,一定要把它設計成自適應。
If you have only one version of your site, make it responsive.
鏈接用于導航,按鈕用于動作。
Use links for navigation and buttons for action.
用圖標來區分列表中重要的文本項。
Distinguish important text items in lists with graphic icons.
絕不要水平滾動文本。
Avoid scrolling text horizontally.
有界輸入要使用有界控件。
Use bounded controls for bounded input.
僅供輸出的文本用非編輯控件(顯示控件)顯示。
Use noneditable (display) controls for output-only text.
把主要的交互操作放在主窗口內。
Put primary interactions in the primary window.
對話框適用于放那些主交互流之外的功能。
Dialogs are appropriate for functions that are out of the main interaction flow.
對話框非常適合用來整理關于單一主題或應用程序功能的信息。
Dialogs are appropriate for organizing controls and information about a single domain?object or application function.
在功能對話框的標題中使用動詞。
Use verbs in function dialog title bars.
在屬性對話框的標題中使用對象的名字。
Use object names in property dialog title bars.
區別對待模態對話框與非模態對話框。
Differentiate modeless dialogs from modal dialogs.
不要在非模態對話框中使用終止命令按鈕。
Do not use terminating button commands for modeless dialogs.
不要動態地改變終止命令按鈕的標簽。
Don’t dynamically change the labels of terminating buttons.
應用程序無響應狀態,必須通知用戶。
Inform the user when the application is unresponsive.
絕不要用臨時型對話框作為錯誤對話框或確認對話框。
Never use transitory dialogs as error messages, alerts, or confirmations.
所有交互的習慣用法都有其適用范圍。
All interaction idioms have practical limits.
不要堆疊選項卡。
Don’t stack tabs.
錯誤對話框愚蠢地停止進度,應該避免。
Most error dialogs stop the proceedings with idiocy.
讓錯誤不可能發生。
Make errors impossible.
當軟件告訴用戶他們失敗時,用戶會覺得受到了羞辱。
Users get humiliated when software tells them they failed.
做,不要問。
Do; don’t ask.
讓所有的動作都可以撤銷。
Make all actions reversible.
給用戶提供非模態反饋,避免用戶犯錯。
Provide modeless feedback to help users avoid mistakes.
我也希望更多有志同道合的同學能夠一起加入我們。下面產品設計師(UX+UI)招聘需求,僅僅只有5條:
1. 本科及以上學歷,計算機或者設計類專業為佳:理由:我并不是相信學院派,但相信大學期間養成的思維能力對人的一生有重要影響,所以科班出身為佳,但不是絕對;
2. 熟悉WEB端或移動端軟件設計、交互設計、UI設計規范:理由:我并不是墨守成規的頑固派,但我相信好的設計不是靈光一現,而是站在前人的肩膀上進行超越,不懂行業規范的人,只能是外行和初學者;
3. 懂技術(設計),有開發(設計)經驗為佳:理由:我并不是希望設計師去敲代碼,但是希望把產品腳踏實地做出來,光有天馬行空的想象是不夠的,懂技術可以幫助你更好的理解為什么要這樣做,和更好的和開發溝通;但是如果是技術出身的同學,光會敲代碼也是不夠的,必須要有設計思維,懂設計可以幫助讓你更好的理解為什么要這樣做;
4. 自驅力強,有責任心,善于溝通,有全局觀,有邏輯思維,目標導向性,有效分清楚輕重緩急,與團隊共進退;理由:這一系列是日常的工作思維和方式,因為我們是創業團隊,更多的是在于溝通和責任心,而且你還要逐漸承擔產品經理的角色;
5. 了解人工智能相關技術,有寫作和總結的習慣,對于文字創作感興趣;理由:我們做的是人工智能寫作產品,如果自己產品都不熱愛都不去使用,我相信是不可能做出好產品的,如果你沒有寫過文章可以繞道而行。如有需要加作者的個人微信號,ID:gold3bear ,可以附上作品集。
總結
以上是生活随笔為你收集整理的最全,从小白到交互设计大牛的105条设计原则-附PDF资料的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: WPF详解
- 下一篇: 【STM32】Keil v5下载与安装