更极致的搜索推荐——“去哪儿酒店”搜索体验【2013年9月版】
作者从2013年去哪儿网的酒店搜索功能出发，深入剖析了平台如何针对两类用户——目标明确型与无明确目标型——设计差异化的服务路径。对于前者，去哪儿提供了“距离筛选”等高效工具，搜索体验流畅；但针对后者，尽管设有价格、档次等个性化搜索入口，用户在结果页仍常陷入筛选的困惑。 文章的核心观察在于，去哪儿虽在入口做了区分，但在搜索结果呈现上，对无目标用户的支持仍显不足。作者进而提出，应引入智能推荐机制，例如基于“去中关村的用户大多住此类酒店”的群体偏好数据进行引导，甚至将推荐延伸至搜索起点，增加“游玩”、“散心”等情景化入口。这篇分析不仅点明了当时产品设计的亮点与缺口，其关于“用推荐服务缓解用户决策焦虑”的思考，在今天看来仍具启发意义。
移动用户体验设计新要素
这篇讲的是，如何将经典的动画艺术原则，巧妙转化为移动用户体验设计的利器。 作者从移动端场景切换中动效处理的难题出发，指出好的动效不仅是装饰，更是传达层级、引导操作的关键要素。文章的核心，是引入了迪士尼动画大师Ollie Johnston和Frank Thomas在其著作《动画的生存法则》中总结的12条基本原则，并论证了这些源于影视动画的原则在今天移动界面上的全新价值。 例如，文章通过对比Flipboard的“硬质”翻页与iBooks的柔性翻页，生动阐释了“挤压与拉伸”原则如何定义元素的物理质感；又以相机App的拍照预备动画为例，说明“预期”原则如何为用户提供操作线索。它强调，恰当运用这些原则，能让界面过渡流畅、层级清晰，甚至带来愉悦感；反之，过度或夸张的动效则会破坏体验。 因此，这篇文章不仅是在推荐一套经典理论，更是在为UX设计师提供一套可操作的“动效心法”。它告诉你，理解动画的原则，是精妙运用动效、提升移动端体验质感的第一步。
网页设计创新式布局与交互
这篇文章探讨了如何跳出传统网页设计的“矩形框架”，通过创新的布局与交互，打造既引人入胜又具备可用性的网站。作者开篇就指出，虽然构思这类创新设计难度很高，但一旦成功，就能创造出令人着迷的用户体验。 核心观点在于，设计师不应局限于常规的形状、配色或导航模式。文章鼓励从“为什么我们总是用矩形？”和“怎样才能做到与众不同？”两个问题出发进行思考，并给出了几个关键原则：创新必须建立在保证可读性与可用性的基础上；设计要清晰传达网站的核心目的；同时要克制，选择一个有趣的核心创意并深入贯彻，避免元素堆砌。 文中通过五个实例具体阐释了这些原则的应用。例如，Lowdi网站用与产品形态相似的异形色块和弹出式气泡进行互动；Steve Vorass的个人站点巧妙运用了“隐藏式导航”，让图片本身承担导航功能，并通过悬停动画提供反馈。这些案例展示了如何将奇思妙想与清晰的结构、流畅的体验相结合，为设计者提供了从概念到实践的具体启发。
创造流动的瞬间—探讨移动端交互动效设计
这篇文章从iOS 7这一标志性设计变革说起，探讨了移动端交互动效如何从“可有可无”的装饰，转变为塑造产品体验、跨越用户心中“情感阀值”的关键要素。 作者详细拆解了iOS 7中那些“创造流动的瞬间”：3D视差带来的景深、模拟现实物理运动的拟真动画、气泡碰撞的弹性效果、体现空间感的缩放与手势跟随。文章不仅停留在描述，更深入剖析了动效的五大核心作用：通过流畅过渡组织界面的时间演进、利用高效反馈减轻用户等待焦虑、增强“直接操纵”的直觉感、巧妙引导隐藏功能，以及最终升华品牌体验与情绪表达。 在此基础上，文章提出了一套实用的设计原则：顺应轻动画趋势、遵循自然运动规律、重视应用内整体动画编排、平衡效果与性能，并强调“恰到好处，服从体验”这一黄金法则。为了将这些理论落地，作者团队还实践性地开发了一款“交互动效库”工具，通过分类收录200余段视频案例，为设计师提供灵感、为开发提供参考代码，解决了动效设计在协作流程中的痛点。
APP「返回键」的进化
这篇讲的是APP里那个小小的“返回键”背后，其实藏着产品设计的核心问题之一——导航与流程。作者从一个有趣的观察切入：最近几年，这个按钮本身正在悄悄“进化”。 他指出了两个显著的趋势。一是位置的移动：从经典的左上角，挪到了更方便单手触及的左下角，比如淘宝和知乎日报。作者认为，这背后是手机屏幕越来越大、越来越难以单手掌握的硬件变化在推动设计改变。二是交互方式的革新：手势操作，尤其是向右滑动返回，正逐渐成为一种更高效的选择，知乎、豆瓣小组等应用已在采用。这显然比精准点击一个按钮更流畅。 文章也点出了其中的矛盾与思考：比如在iOS上，右滑手势可能与列表项的删除操作冲突。而Android早期因物理返回键的坚持，其平台内的返回体验曾长期不够统一。作者没有给出标准答案，而是呈现了这种进化如何平衡平台规范、硬件条件和用户效率——返回的体验，依然在持续演进中。
人人都能用的10条网站易用性技巧
这篇讲的是 WebAIM 团队总结的 10 个基础但关键的网站易用性技巧。作者通过一系列实用建议，展示了如何用相对简单的代码改动，让网站对屏幕阅读器用户更友好，同时也提升了普通用户的交互体验。 文章从最基础的给 Logo 添加替代文本（alt 文本）讲起，这是保障图片信息可访问的第一步。接着深入到了更结构化的层面，比如建议使用 ARIA Landmarks 为页面模块添加语义化角色，帮助辅助技术理解网页布局。对于容易被开发者忽略的焦点样式（focus），文章强调了保留并自定义它的必要性，以服务依赖键盘导航的用户群体。 此外，文中还涵盖了定义表单必填项、合理使用 HTML 标签（如为表格添加 th 表头和 caption 描述）、避免使用“点击此处”这类模糊链接文本，以及警惕 tabindex 属性滥用等具体实践。文章最后推荐了一个在线检测工具，方便开发者快速扫描自己的网站是否存在易用性问题。整篇文章用词直接，配有示例代码，可操作性很强。
禁用状态二三事
设计师常常面临一个两难选择：禁用状态是该固定展示以建立用户认知，还是该隐藏以保持界面清爽？这篇从菜单、工具栏等具体场景切入，深入探讨了禁用状态的展示哲学。文章对比了 Chrome 和 Firefox 处理前进按钮的不同策略——前者保持按钮位置固定以形成操作惯性，后者则根据可用性动态显示，以换取界面的轻量简洁，两者各有其适用场景。 对于更复杂的列表操作，如 Gmail 和 Dropbox 所示，在未选中对象时隐藏专属操作，能在保持工具栏清晰的同时避免禁用项堆积。在引导性更强的表单发布场景，文章对比了新浪微博（禁用按钮仍可点击并给出反馈）与 Facebook（禁用按钮静默不响应）的不同做法，指出按钮的视觉状态应与其实际行为严格一致。 最后，文章总结了四条实用的设计建议：在需要引导用户时，可以考虑去掉禁用；必须使用禁用时，需确保样式区分足够明确；当禁用状态出现得突然时，应提供清晰的解释；甚至可以像 Twitter 和 Flickr 那样，为禁用状态注入动画或趣味文案，使其传达更丰富的信息。
万般设计为阅读【译文】
这篇文章从网页设计师常见的“字体审美陷阱”切入，直指一个核心矛盾：许多设计师沉迷于选择漂亮字体和实现炫酷的OpenType特性，却忽略了排版最根本的目的——服务于阅读本身。 作者认为，优秀的阅读体验建立在深入的项目调研之上。他引导读者跳出自我审美，去关注三个关键维度：首先是“内容”，需要评估文章的可理解性、阅读时间和结构元素；其次是“环境”，必须面对Windows系统字体渲染、多分辨率屏幕适配等现实挑战；最后是“用户”，要考虑包括阅读障碍者在内的广泛群体的真实需求。文中不仅提到了Flesch易读性测试等具体评估工具，还对比了衬线与无衬线字体、应用界面与长文阅读的不同设计策略。 这篇文章的价值在于，它将排版设计从一种视觉艺术拉回到了严谨的功能工程范畴。它提醒设计师，真正的设计功力往往体现在那些“看不见”的细节中——比如确保文字在不同设备上清晰可辨，或是让复杂内容通过合理的节奏变得易于消化。最终，好的排版不是为了让设计圈惊叹，而是为了让普通读者能毫无障碍地获取信息。
复杂产品的响应式设计【流程篇】
这篇讲的是，如何让一个拥有十多个页面的复杂产品（以“玩客”为例）真正、系统地实现全站响应式设计。文章没有停留在理念层面，而是给出了从信息架构到最终测试的完整六步协作流程。 作者首先强调响应式是“设计先行”，流程始于交互设计师明确内容策略与页面分类（如列表页、详情页、操作页）。关键思路是“移动优先”，先设计手机端框架，再拓展至平板和PC端，以此梳理出清晰的响应模式与流体栅格系统。 流程中一个创新的实践是“风格拼贴稿”。在完成PC端模块设计后，视觉和前端不是等待全部设计定稿，而是提前用控件、组件拼贴出模拟页面，统一定义风格并实现组件库代码。这极大提升了多设计师、多前端协作的效率与一致性，也便于后期维护。文章最后指出，在确定核心框架与风格后，拓展其他设备设计稿的工作量远比预想的小，并提醒需尽早与开发协商服务端响应（RESS）策略以优化性能。 整个流程为跨职能团队提供了清晰的行动路线图，证明复杂产品的响应式设计有章可循。
#我的错误案例#一个关于提醒的设计
这篇讲的是一个关于“凌晨房态”的产品设计踩坑故事。作者从快捷酒店行业的一个实际痛点出发：凌晨0-4点预订的用户大多想立刻入住，但酒店系统默认将订单归为当天，导致入住时间混乱。为了解决这个问题，产品在用户预订时增加了一个“请注意入住时间”的提示。 然而，这个看似合理的提醒，在作者亲自凌晨测试后被发现是个“错误案例”。这个提示打断了用户的操作流，让用户从“我只想马上睡觉”变成了“我还得确认你能不能让我马上睡觉”，反而催生了电话确认这一笨重环节，背离了产品应有的流畅体验。作者的朋友“一语中的”，点醒了这个设计的核心矛盾。 最终，他们调整了提醒策略：只在用户主动切换日期到当天时才提示，而对默认的“立刻入住”流程保持自信，不进行干扰。文章由此得出几个务实的启示：必须亲自上手体验才能发现真实痛点；过度提示是对用户和自身设计的不自信；以及跳出思维定式的重要性。这是一个从具体错误中提炼出普适性设计原则的典型复盘。
关于交互Demo设计的一些建议
这篇讲的是交互Demo设计中如何平衡效率与质量的经验。作者从实际项目出发，对比了Axure、Balsamiq和Mockups等常见原型工具的特点——比如Axure功能全面适合高保真演示，Balsamiq的手绘风格则更适合快速构思方案。工具之外，文章的核心价值在于提出了几条非常具体的设计建议：制作Demo应保持“相对中保真”状态，避免耗费精力在过高视觉保真度上；必须遵守栅格规范以减少后续视觉设计的返工；不使用截图或色彩干扰视觉发挥；克制对复杂交互效果的追求。此外，建立个人控件库和善用Master模块化设计能显著提升效率，而坚持版本存档则对项目迭代至关重要。最后作者点明，工具和形式都应服务于清晰表达产品思路与交互逻辑这一根本目的。
人人都能用的10条网站易用性技巧
这篇译文提炼了WebAIM团队提出的10条提升网站易用性的基础技巧，每一条都直指前端开发中容易忽略的细节。文章不仅列出做法，更点明了其背后的技术原理。 比如，它强调为logo添加alt或title属性，不仅是为了让屏幕阅读器“读懂”图片，在网速不佳图片加载失败时，也能为所有用户保留关键信息。又如，针对许多开发者喜欢移除浏览器默认的:focus焦点样式，文章明确反对这种做法，并给出了如何用自定义高亮样式的代码示例，因为这对键盘操作用户至关重要。 此外，文中还涉及使用ARIA Landmarks帮助读屏软件理解页面结构、用aria-required标记表单必填项、以及避免使用tabindex和“点击此处”这类对辅助技术不友好的模糊链接。作者用平实甚至带点幽默的语言（比如“把设计师的鼠标拿走一天”），将这些看似琐碎却影响深远的实践要点娓娓道来。 这些技巧虽然基础，但共同构成了构建一个包容性更强的Web环境的重要基石。
WEB设计中的“帮助用户从错误中恢复”
这篇讲的是WEB产品设计中一个常被忽视但至关重要的点：如何优雅地帮助用户从错误中恢复。文章将用户错误分为“知错”与“不知错”两种情况，其核心差异在于处理方式截然不同：前者需要提供明显的“返回”或“取消”入口来撤销操作，而后者则严重依赖清晰、友好的信息提示进行引导。 对于信息提示，文章引用了Jakob Nielsen的原则，指出好的提示信息需要同时做到五点：明确直接、可理解、措辞礼貌、表达精确、并提供建设性方案。文中以淘宝未登录点击购买时直接弹出登录框而非错误提示为例，说明了如何用更人性化的方式引导用户，而非制造挫败感。 除了文案，文章也强调了交互层面的优化：比如在用户出错后，系统应尽可能保存其已填写的数据，提供及时反馈，并用“选择”代替重复“输入”以减少操作负担。所有这些设计的共同目标是：在用户犯错时，提供一条清晰、友好的“改过”路径，将他们温柔地拉回正轨。
WEB设计中的“操作入口明确”
这篇讲的是WEB产品设计中一个至关重要的原则——“操作入口明确”。作者从电子商务网站信息庞杂、需要高效引导用户的背景出发，强调了清晰、合理的操作入口设计是连接页面枢纽、保障产品“有效性”和用户体验的关键。 文章深入剖析了如何实现这一原则，提出了三个具体方向。首先，通过“强化重点，弱化周边”的视觉布局对比，帮助用户在复杂功能入口中快速锁定目标，就像《唐伯虎点秋香》里需要比较一样。其次，要控制同功能入口数量，避免“过多的选择等于没有选择”，并通过文字或图标让每个入口的功能属性一目了然，类似生活中的指示设计。最后，设计需考虑“新手”、“中间用户”和“专家”等不同用户群体的需求差异，其终极目的都是让用户迅速完成核心任务。 作者总结道，出色的操作入口设计能让用户在信息海洋中自如穿梭，犹如科幻片中的“星际之门”；而失败的设计则会将用户困于迷宫，带来挫败感。这不仅是设计技巧，更是设计师“想用户之所想”的职责体现。
有趣的下拉刷新
这篇讲的是，一个看似普通的交互动作——下拉刷新，如何从功能性操作演变为品牌表达与创意设计的舞台。文章从Twitter获得下拉刷新专利的事件切入，梳理了这项由Tweetie创始人发明的操作如何风靡移动应用。 但作者没有停留在功能层面，而是敏锐地指出：下拉刷新已跳出基础功能，成为一种表现品牌和设计感的元素。文中将这些有趣的实践分为三类：与应用类型巧妙结合的，如拍照应用Cheeze中，下拉会唤出一只老鼠并拍照；与品牌元素深度绑定的，如Flickr的经典双色转圈、Google系产品围绕品牌色的动画、蚂蜂窝“嗡嗡”里振翅的小马蜂；以及完全结合应用整体风格进行创新的。 这篇文章带我们回溯了这个经典交互的源头，并展示了它在当下如何成为设计师的画布——一个小小的下拉手势，竟能承载如此多的巧思与品牌个性。
谈谈页面流程图（附案例）
这篇讲的是在产品设计早期，如何用页面流程图来理清思路、统一团队认知。作者从自己过去偏好业务流程图的习惯出发，指出业务流程图关注“谁在什么条件下做什么”，而页面流程图则进一步具体到用户在不同页面间的操作与跳转路径，帮助设计者系统性地规划交互逻辑，避免过早陷入单页面细节。 文章以“公益捐物网站”为虚拟案例，演示了从一个模糊想法到功能规划的过程。作者强调了页面流程图对产品经理和开发者的双重好处：对设计者，它能快速勾勒全局、评估工作量并聚焦用户任务；对开发者，它是评估工作量、开展编码和提供反馈的高效沟通工具。绘制前的关键步骤包括拷问idea的可行性（如目标用户、价值主张），并列出功能优先级。 通过这篇分享，读者能学到一个实用的工作方法：在画几十张线框图之前，先花几个小时画页面流程图，就能对整个项目心中有数，让后续设计和开发沟通更顺畅。
移动触屏的手指触发尺寸
这篇讲的是移动端设计中一个常被忽视却至关重要的细节：触摸目标的尺寸。文章从苹果、微软、诺基亚等平台各自不同的设计指南出发，指出现有建议（如44px、28×28px）普遍偏小，与用户手指的实际尺寸存在差距。 这种差距会导致用户体验上的明显问题：用户不得不频繁切换手指的按压部位，或用指尖精确定位，这降低了操作效率；当按钮过于密集时，误触邻近目标的概率也大大增加，尤其使用较宽的拇指操作时问题更甚。 作者引用麻省理工学院触摸实验室的研究数据，给出了更符合人体工学的参考值：成年人的食指平均宽度对应45-57像素，而拇指更宽，约72像素。以这些尺寸设计，既能保证操作的精准性，也能提供清晰的交互反馈，这与费茨定律中“目标越大，命中时间越短”的原则一致。 当然，文章也理性地指出，完全按照手指尺寸设计在屏幕有限的手机上并不现实。设计师需要根据屏幕空间与核心功能进行权衡，有时精简导航、减少目标数量，是比单纯放大按钮更可行的方案。
那些宽衣解带的事
这篇讲的是设计师基于和家中长辈的真实互动，观察到并呼吁大家关注产品设计中常被忽视的“老友记”群体的真实需求。 文章从一个看似“宽衣解带”的标题切入，实际探讨的是衣物、日用品等设计对老年人的不友好。作者分享了陪奶奶买衣服的经历：设计师为了方便老人而设计的“假纽扣”套头衫，却因老年人头发稀疏、穿脱会弄乱精心打理的发型而遭到嫌弃；在购买内衣时，常见的背扣款式对老年人极其不友好，而能买到的前扣式“老人内衣”又难以在主流渠道获取。此外，带放大镜的指甲剪因老人腹部阻碍视线而无法使用；许多老人宁愿用伞也不愿拄拐杖，只为避免“无用”的标签，但普通伞的强度又带来安全隐患。 这些细节揭示了现有设计的一个通病：我们常常基于“衰老=能力不足”的刻板印象去简化需求，而非真正深入理解“老友记”们维护尊严、保持独立自主的核心渴望。文章最终发出温和而有力的呼吁：希望从事产品与设计工作的“儿女孙媳”们，在为大众设计时，能更多地将这些具体而微的、关乎体面与自主的需求纳入考量，做出更体贴的工业化产品。
iOS设备上高效演示APP原型的方法总结
这篇讲的是如何在iPhone上高效演示APP原型的方法对比与选择。作者从产品和设计师的实际需求出发，对比了POP、快现、Axure等多种原型工具的上手难度、功能性和效率，并重点分析了将Axure原型导入iOS设备演示的两种主流路径。 关键差异在于“Web APP模式”和“APP打开模式”。前者能生成桌面图标，还原初始体验，但依赖在线环境，存在原型信息安全顾虑。后者需要购买Atomic Web等应用，但支持离线演示，速度更快且更安全，作者个人更推荐这一方式。 文章不仅给出了工具和模式的横向对比，还深入到了具体操作细节：比如如何在Axure中设置生成参数以适配移动设备，演示时需要注意的页面命名规则，以及不同模式下的设计尺寸计算等。这些实操要点对于想要立即上手的读者非常实用，能帮助避免常见坑点，提升演示的真实感和流畅度。
不要让“合理性”成为阻碍设计前行的绊脚石
这篇讲的是设计领域里一种常见的思维定势——对“合理性”的过度依赖，以及它如何悄然扼杀了创新的可能。 作者以iPhone的“3.5英寸单手操作黄金尺寸”为例，指出这种看似不容置疑的“合理性”，在用户真实、多样的使用场景（如沉浸式浏览、效率操作）面前可能站不住脚。而当苹果为了竞争妥协地推出iPhone 5时，这种保守的改变反而招致吐槽。相反，当时被苹果视为“不合理”的三星Galaxy Note，凭借大胆的大屏设计，不仅获得了市场成功，更开辟了新的交互可能性，甚至引发了时尚品牌的配套设计风潮。 文章由此回溯了诸如Moto V70的旋转开屏、Clear的全手势操作、Path的独树一帜等经典案例，指出那些真正令人惊艳的产品，往往都带着一丝“倔强”与“不随大流”的气质。作者的核心观点是：设计师应当警惕“合理性”背后的条条框框，有时需要勇敢地打破常规，用想象力去勾勒更具突破性的产品体验。