网页设计的精髓 第1篇
如果我们设计的数字产品能够让人们方便地达 成目标，他们会感到满意，提高效率，心情愉快。如此一来，人们会高兴 地购买这款产品，还会推荐他人购买。假设我们能够以低成本实现上述目标，就能取得商业上的成功。表面上，这个前提一目了然。只要用户满意，产品就会成功。可是为什么仍有那么多的数字产品难以使用，用起来让人痛苦呢？为什么不能皆大 欢喜、双方共嬴？尽管我们一直在更快、更廉价、更便捷技术的创新道路 上稳步迈进，为什么人们仍会感到沮丧？一言以蔽之，答案是因为在产品规划和开发的过程中，没有把设计作为同等重要的基础环节。
用户界面应该基于用户心理模型，而不是实现模型。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.
##第2章 理解问题：设计研究
任何设计成果的评判标准，都要看产品最终满足用户或委托开发组织需求的程度。不管设计师技艺多高超，多有创造力，如果没有清晰而详细地了解其目标用户、问题限制及推动设计的商业或组织目标，那么成功的机会不大。仅仅筛选一下从市场调查（尽管这对回答其他类型问题十分重要）之类的定量研究得到的数字和图表，很难轻易地深入把握这些主题。 这种行为和组织知识需要通过定性研究方法来收集。定量研究方法有很多种，每种方法对理解产品设计轮廓都十分重要。
一旦花了大量时间进行实地调查，研究用户的生活、动机和环境，接着问题自然而然地产生了：如何利用如此巨大的研究数据打造成功的产品？记事本里充满了对话记录和观察结果，很可能我们交流过的每 个人都有些许不同。很难想象，每次做出设计决策时，都要从数百页笔记中挖掘有用信息。即便有足够时间，这些笔记提供的信息是否有帮助还不 一定。如何使这些数据变得有意义？如何辨明重点？我们引入了建模（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.
在本书的介绍中，我们曾提到，目标导向方法包含三方面内容，即原则、类型和过程。然而，还有一点值得提及——实践。本书花费了大幅篇幅讲述上述 三方面内容，我们希望能在本章跟大家分享一些关于目标导向设计的实践，以及设计团队如何融入更大的产品团队。 本章主要讲述三方面内容：一是团队合作的战略；二是产品开发的正确方法；三是整合不同组织间团队合作的技巧。有些最有趣、最重要的设计问题太 大以致无法单独解决。通常，这些问题牵扯过多，很难拋开其他问题而单个解决。
网页设计的精髓 第2篇
如何做出产品设计的决策呢？什么成就了好的设计方案呢？测量设计质量的一个依据，就是产品满足用户目标和需求的能力，以及是否适应商业目标和技术限制。但是产品解决方案是否具有可识别、可实现性的特征？我们能否将类似问题的解决方案一般化？要成就好的设计是否要求设计过程具有普遍适用性？ 答案就在交互设计价值、原则和模式的使用中：设计价值（design values) 为成功、恰当的设计实践提供了指导方针；设计原则（design principles)为设计有用而令人期待的产品、系统和服务提供了向导；设计模式（design patterns) 针对某些具体的设计问题给出了一般方案。
研究发现，人类与计算机及其他交互产品之间的对待和反应方式如同人与人之间的交往。我们与软件的交互也出于本能，是无意识行为，也是不可回避的。这个研究的意义是深远的，如果希望用户喜欢我们的软件，那么当我们设计软件时，应该让它表现得像一位举止得体的人。如果希望用户能高效地使用我们的如果希望用户能高效地使用我们的软件，那么就应该将它设计得像一个帮助和支持自己工作的同事。总之， 应当考虑人与计算机在工作上的角色分配。
人来思考，计算机干活。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.
在开始设计一个数字产品的交互框架时，要回答的第一个问题是“什么样的平台（platform)和姿态（posture)是合适的？”产品的平台（platform)可以认为是使产品能运转起来的软件和硬件的共同作用体，包括用户交互和产品内部运转。常见平台：桌面端、网站、 手机、数码相机……产品的姿态（posture）是指产品的行为立场，也就是产品对用户的展现方式。姿态讨论的是用户在与产品交互上投入多少精力；以及产品又如何回应这些精力投入。这一决定必须建立在了解产品可能的用户场景和环境基础上。常见的应用姿态分为独占式、暂时式、后台式……
技术平台相关的决定最好能融入交互设计的成果。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.
软件经常包括一些臃肿的交互，要求用户做不必要的工作。界面交互始终需要用户做事情；设计师（或者是其他更重要的人）须将此种必要负担降至最低， 同时还能让用户达到目标。如果设计师和开发者不注意人们为操作技术所需的动作，就会产生繁重的用户体验。用户得费很大力气才能为他们想要执行活动 所需的心理模型与设计的产品界面匹配上。用户与数字产品交互时执行4类工作：认知工作、记忆工作、视觉工作、肢体工作。
尽可能地消除每一种练习。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.
网页设计的精髓 第3篇
无论是运用哪种交互习惯用法，都要考虑实际运用场景的客观情况。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.
2007 年6月，苹果发布了iPhone，几乎一夜间，移动设备的定义发生了翻天覆地的变化。它彻底取代了原来糟糕的用户体验。现在，iPad、Android和微软的多点触摸平板的销量不断增加。对于很多人来说，这样一种非常方便的计算设备，想用的时候按下开关就立即能用，关闭时可以立即保存上次的状态，并且允许直接的多点指尖输入，这一切的一切，都远远优于传统的桌面软件、优于传统的点指输入设备。本章的大部分篇幅，将介绍在设计手机和平板类的移动设备时的注意事项及其设计原则。本章后面，我们还将简要讨论一下其他设备平台的界面，包括公共信息台、公共设备、车载设备的界面。
大多数移动应用是暂态的。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.
今天，需要安装在电脑本地的软件越来越少。并且现在，网页已经成为了人与人之间，以及企业与客户之间的最重要、最流行的沟通渠道。这意味着网页体验的质量是无比重要的，随着越来越多、越来越复杂的软件行为转移到网页上， 网页的交互能力也必须要达到和软件相当的水平。在以往，视觉设计师关注“视觉和感觉”，信息构架师关注内容结构。而现在，这些知识和经验是不够用的。在GitHub上可以很容易找到优秀的UI组件。不过，即使手边有这些大量的现成组件，我们也仍然无法很好地回答一些既重要又简单的问题：我们怎样做才能恰如其分地满足用户的需求和想法，如何才能利用好这些部件，开发出具备良好和连贯用户体验的产品。
采用永久固定的页眉来保持情境。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.
虽然不同平台上的一些视觉设计是不同的，但大部分平台上的控件和对话 框是一样的，它们是用户与各个数字产品的通用交互语言。这些标准的东西，在大部分的GUI开发库里都有，存在着被滥用或误用的可能。本章将概要介绍一些通用的GUI交互控件，还将讨论他们适合使用的环境。
链接用于导航，按钮用于动作。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.