一起来看看淘宝首页的个性化
这篇讲的是淘宝首页从“商品为王”转向“以人为中心”后的个性化改造实践。它没有停留在理念层面，而是深入到了让运营和前端团队“头疼”的技术实现细节。 文章的核心是解决一个复杂问题：如何在满足几十个业务模块灵活配置的同时，实现基于用户兴趣的“千人千面”排序和展示？作者详细拆解了前端面临的四大挑战：数据源极其分散（接口超过15个）、模块渲染依赖两次串行请求导致效率瓶颈、业务ID与模板ID需要繁琐的人工匹配，以及多数据源下的兜底容灾逻辑异常复杂。 为了解决这些难题，他们遵循“首屏快、滚动流畅”的黄金准则，并通过对模块位置、模板、内容进行分层个性化与开关控制来平衡运营需求与算法效果。文章以实际改版为例，不仅展示了多彩的模块与多套模板设计，更坦诚地讨论了当时未能用上但“很靠谱”的数据过滤体系，体现了工程实践的务实与思考。最后，作者将话题引向了性能优化，为下篇内容埋下了伏笔。
手机UI设计基础-尺寸&单位
这篇讲的是手机UI设计中让很多新手头疼的尺寸与单位问题。作者从移动端开发和设计的常见困惑出发，系统梳理了iPhone与Android两大平台的核心概念和适配思路。 文章首先厘清了iPhone的分辨率、屏幕尺寸、像素密度（PPI）以及逻辑分辨率（pt）与物理分辨率（px）的关系，并以表格形式清晰列出了从初代iPhone到iPhone 6 Plus的换算规律（如iPhone 6s为1pt=2px）。针对机型众多的适配难题，作者提出了一套实用的工作流：以iPhone 6的750px宽度作为设计基准稿，使用矢量元素设计，标注后同步输出用于切图的@3x资源；开发端则基于此使用自动布局，再向上向下适配更大和更小的屏幕。 对于Android平台，文章介绍了dp、sp、dpi等关键单位，并建议以1080px宽（xxhdpi）作为通用设计尺寸。最后，文章还延伸至移动端Web，指出通过设置viewport代码（如width=device-width），可以让px单位等同于逻辑像素使用，从而在不同设备上实现统一的页面宽度（如640px）。 整篇文章将碎片化的尺寸知识串联成清晰的适配逻辑，不仅解释了“是什么”，更给出了“怎么做”的具体路径，对理清设计与开发协作的流程很有帮助。
如何设计好用的触控手势
这篇文章从儿童和长辈都能轻松上手的触控设备现象切入，探讨了如何设计出既自然又高效的触控手势。 触控手势作为自然用户界面（NUI）的体现，通过模拟现实世界的动作（如滑动、缩放）降低了交互门槛。文章强调，设计时必须考虑用户身处的“移动情景”——注意力分散、操作时间碎片化、任务易中断等复杂环境，这些都对手势的易用性提出了更高要求。 那么，什么才算“好用”的手势？作者总结了几个关键特征：动作简单到可以单手在拥挤交通工具上完成；容易记忆且符合认知习惯；具备实用性，让用户无需多余操作；提供即时反馈，让用户清楚操作状态。 在具体设计上，文章给出了几条核心准则：手势必须符合大多数人的自然习惯；一个应用的手势数量最好控制在5个以内，以降低记忆成本；根据应用类型差异化设计——效率工具适合单手手势，游戏可以适当增加复杂手势以提升乐趣；同时，像《Flappy Bird》那样适度、克制地运用手势，往往能达到最直接有效的效果。最后，提供视觉或震动反馈，并确保操作可逆，能极大增强用户操控的信心与安全感。
关于可访问性的 7 个地方（For 每个人）
这篇文章讲的是，设计师如何让产品真正面向所有人。作者开篇就点明了一个核心矛盾：在理想世界里，设计师负责创意，开发人员负责实现无障碍功能；但现实中，只有当设计本身考虑了可访问性，残障用户才能顺利使用产品。 文章为设计师提供了符合Section 508和WCAG标准的“设计准备”指南，重点讲解了四个关键原则。首先是心态上的转变：可访问性不是创新的阻碍，而是新的设计约束，它能激发面向所有用户的更优方案。其次，针对视觉设计，文章给出了两个具体准则：绝不能仅靠颜色来传递信息（例如，表单的错误状态不能只用红色表示），因为这会影响色盲和弱视用户；文本与背景之间必须保持至少4.5:1的对比度（大字体可放宽至3:1），并推荐了Color Safe等工具辅助配色。 最后，文章强调了键盘导航的重要性，批评了常见的“outline:0”CSS写法，这会让依赖键盘的用户失去视觉焦点指示。作者建议设计师必须为键盘焦点提供清晰的视觉标示。文章通过BBC和Salesforce等实例，将抽象的规范转化为可感知的设计实践。
交互设计是什么？可以吃吗？
这篇讲的是交互设计到底是什么，以及它如何“隐藏”在我们的日常中。作者从一个轻松的概念辨析出发，指出交互设计的核心往往追求“无感”，而非表面的“科技感”。文章梳理了交互设计作为交叉学科的广泛范畴——它扎根于人（心理学）、机（计算机工程）、美（设计）三大领域，并重点讨论了在人机交互界面中，设计师如何规划用户与产品的“对话”路径与关键节点。 最有趣的部分在于，作者将交互设计思维“降维”应用到生活场景中：用约会全过程和一封精心构思的邮件作为案例，拆解了其中无数可优化的细节与“对话”节点。这生动地说明，好的交互设计本质是体贴的“预设”，其最高境界正是让人浑然不觉，只觉得顺畅自然。 文章最终想传达的是，交互设计并非遥不可及的专业黑话，而是一种可以用来审视和改善一切体验的思维方式——从治疗我们面对复杂科技产品时的“认知失调”，到有理有据地评判身边的设计优劣。它让“体验”这个词变得具体可操作。
Android桌面应用的设计探讨
The request was rejected because it was considered high risk
APP设计中便捷的单手操作
这篇讲的是如何让APP的单手操作更顺手。作者从Steven Hoober对1333名用户的研究出发——49%的人习惯单手操作，其中拇指的可触及范围有限，且触控屏只识别按压的几何中心——引出了“视觉目标”与“触控目标”（热区）分离设计的核心原则。 文章系统总结了四类提升单手效率的手势设计：一是利用左右滑动实现页面切换，但需权衡操作热区大小与误触风险（如iOS边缘返回与应用内任意位置返回）；二是通过手势在信息维度间切换（如日历的周/日切换、文章的概要/详情切换）；三是将内容相关操作（如点赞、删除）隐藏在对条目的滑动操作后，以节约屏幕空间；四是提炼高频功能并用简洁手势（如下拉、上划）快速呼出（如微博写作、亮度调节）。 作者通过对比网易云阅读与iOS设置、新浪微博与Fuubo等实例，点明了不同设计方案对操作成本与学习门槛的影响。整体上，文章揭示了好的单手手势设计并非一味求简，而是需要在操作便捷性、场景契合度与防误触之间找到平衡点。
移动设备的用户行为数据如何追踪
这篇讲的是后PC时代，移动设备上追踪用户行为所面临的独特挑战和现有技术路径。作者从一个核心矛盾出发：我们既想沿用PC端的成熟方法，又不得不面对用户在手机、平板、电脑之间，在App和浏览器之间频繁切换的现实。 文章深入剖析了为解决“跨域”与“跨界”追踪难题所衍生的技术。比如，在App端，平台曾依赖Android_ID、IMEI等持久性设备标识，但因隐私争议，苹果已弃用UDID并转向开发者自建标识。在移动网页端，第三方Cookie的有效性因平台而异，Safari默认关闭它，迫使行业转向“数字指纹”或利用第一方Cookie配合IP等临时标识进行关联。 最棘手的部分在于如何打通App与移动网站这两个孤立的“沙盒”。文中详细说明了通过广告点击中的唯一URL参数进行映射的方法，但也点明了这些方案普遍受制于操作系统严格的隐私政策和技术限制。总的来说，这篇文章清晰地勾勒出了移动追踪的技术图景——它是一场在用户体验、数据准确性与隐私保护之间不断寻求平衡的复杂博弈。
通过设计让APP变快的6个方法
这篇讲的是，当程序员们忙于代码优化时，设计师如何通过一些巧妙的交互设计，让APP在用户感知上“跑”得更快。 文章从几个常见的用户痛点切入，指出响应速度不仅是技术问题，更是设计问题。作者提出了六种具体的设计策略：例如，让耗时操作在后台静默执行，而不是用进度条“绑架”用户；在数据尚未完全加载时，先显示本地缓存或框架性内容，制造“已载入大半”的心理错觉；在用户点击前就预判其意图并提前加载数据，就像微信消息在点击发送后立即出现在对话框里，而网络传输在后台完成。 这些方法都旨在优化用户的心智模型，减少等待感。文章还指出了设计的边界，比如预加载不能影响系统性能，缓存也要控制大小以免占用过多空间。通过分析淘宝、微博、云阅读等产品的实例，文章清晰地展示了如何将“界面先行，网络随后”的原则落地，让流畅的体验掩盖了必要的网络延迟。
支付方式选择页面的设计
这篇文章讲的是支付环节这个“临门一脚”的页面设计，看似简单，却常常因为糟糕的设计阻碍用户完成付款。作者从国际网站需要支持多样化支付方式的现实背景出发，重点剖析了几个典型的设计误区。 比如，像Office Max那样把信用卡和账单选项的单选按钮分开摆放，或者Avon把支付选项和对应的表单区域在视觉上割裂，都会破坏“邻近性”原则，让用户难以理解选项间的互斥关系，甚至不知道自己当前处于哪个支付流程。更极端的案例是Diapers.com，在页面上同时堆砌多个支付表单和不同颜色的按钮，让用户完全不知道下一步该点哪里。 作者通过这些反面案例，引出了设计支付方式选择界面的核心原则：将所有支付选项集中布局、清晰标示当前激活状态、只展开与当前选项相关的表单区域，并可考虑预设最流行的支付方式来加速流程。文章的最终目的，是帮助设计者在支持多种支付方式的复杂性与用户操作的流畅性之间找到平衡，减少选择困难，确保用户能顺利付款。
侧边栏交互的利弊
侧拉菜单的设计看似节省了空间，但它可能正在悄然损害你的用户参与度。这篇文章指出，多项A/B测试和用户研究数据显示，这种“汉堡包菜单”导航模式的使用可能弊大于利。 作者从用户体验角度出发，深入剖析了这一模式存在的四大核心问题：首先它“不易发现”，隐藏的特性违背了“不在眼前，就不会想到”的直觉；其次它“效率更低”，强制的打开动作增加了操作步骤；再者它常常与iOS等平台的原生导航规范发生冲突；最后，它让信息呈现变得“不直观”，难以引导用户。 文章并未止于批评，而是进一步讨论了设计的权衡。它提醒我们，节省屏幕空间不应以牺牲导航清晰度或违背基本人机交互原则为代价，并提供了在何种极少情况下才应考虑使用侧拉菜单的思考方向。对于移动端设计师而言，这是一次对常见设计惯性的必要审视。
Think Aloud－适合设计师的可用性方法
这篇讲的是设计领域一个经典又实用的用户研究方法——Think Aloud（出声思考）。它源于1982年IBM，并由Jakob Nielsen在可用性工程中推广，核心在于让测试用户在操作产品原型或界面时，即时地说出看到的、想到的和疑惑的内容，帮助设计师直接捕捉用户最真实的交互心智。 文章重点分析了该方法相较于其他测试的独特优势：它经济高效（仅需2-8名用户）、结果可靠、形式灵活（适用于从纸面原型到上线产品的任何阶段），并且因为过程直观，极具说服力。作者进一步拆解了具体操作流程：从准备模拟真实场景的测试界面、设计明确任务脚本，到邀请合适的用户进行训练与测试，最后从用户的即时反馈中解读设计问题。文中以电商页面的“尺码助手”功能为实例，展示了如何通过用户一边操作一边的自述，发现入口隐蔽、操作路径不符合预期等设计痛点。 总的来说，Think Aloud是帮助设计师和团队在早期阶段快速、低成本地验证设计假设、洞察用户真实反应的利器，它强调获取交互过程中即时的、主观的反馈，让优化决策更有据可依。
高效输出移动app产品原型
这篇讲的是如何快速高效地完成移动App产品原型设计。作者针对原型制作过程中思路不清、协作繁琐、体验不真实等痛点，提出了一套分三步走的系统方案。 核心方法在于化繁为简：首先，用“界面标题+主要内容”这种极简卡片来绘制产品流程图，确保整体逻辑正确，也便于快速讨论调整。接着，利用一套预制的Axure高保真控件库，设计师只需修改文字颜色和位置，就能迅速组装出规范的原型界面，大幅提升效率。最后，通过Flinto等工具将静态原型转化为可点击的动态演示，让团队或用户能在手机上获得真实的产品体验感受。 整套流程强调的是从宏观思路到微观执行的连贯性，通过标准化和工具化，把原型制作从耗时的设计任务，转变为可快速验证产品想法的清晰路径。
Google移动网站设计原则
这篇讲的是Google与AnswerLab联合发布的一份白皮书，专注于移动网站的设计原则。它并非泛泛而谈，而是基于大量真实用户研究，系统性地提炼出了25条具体设计准则。 这些准则被归纳到五个核心领域：主页与网站导航、网站搜索、电子商务与转化、表单设计以及整体的可用性与表单因素。文章清晰地指出，遵循这些经过验证的最佳实践，是打造一个既能取悦用户、又能有效驱动商业转化率的优秀移动网站的关键。 对于从事移动端UI/UX设计、产品策划或前端开发的朋友来说，这份白皮书提供了一套非常具体的设计检查清单。文内附有百度网盘链接，方便读者获取完整版PDF进行深度参考。
Android Wear设计指南
这篇讲的是Android Wear如何为智能手表这种“新形式”构建专属UI设计语言。作者开篇点明，可穿戴设备的交互核心围绕“建议”与“询问”两个方面展开。前者通过“上下文流”实现，用户垂直滑动查看一张张信息卡片，应用可将最相关的内容主动插入其中；后者则依赖“提示卡片”，用户通过语音“好的，Google”或上滑唤出一系列可点击的操作提示。 文章进一步阐释了贯穿设计的核心原则：设备应具备情境感知能力，做到信息呈现及时、简短且交互极简（如手势与语音），像一位懂你的私人助理，只在必要时打扰。这些原则具体落实在通知UI模式中：通知卡片需为“一瞥”而非阅读设计，优先级对应其紧迫性，允许最多三个操作按钮，并强调了图像在提供上下文信息时的作用与尺寸规范。 整篇指南清晰地描绘了如何将Android体验从手机屏幕延伸至手腕，强调通过智能、克制且直觉化的交互，让技术自然融入日常生活。
导航的信息架构
这篇讲的是导航设计里的一个核心矛盾：用户期待导航简单可预测，但内容本身却需要被发现。作者从信息架构的角度切入，提出构建理想导航系统需要先回答四个关键问题，其中前两个——如何组织内容与解释导航选项——正是信息架构要解决的根基。 文章重点剖析了“元数据”在导航中的作用。作者指出，盲目向用户展示所有类别（如完整的索引或搜索框）并不可取，反而会导致混乱。真正的解决方案是将元数据分为“重要”、“可选”和“无关紧要”三类。比如对于食谱网站，“菜式”通常是最重要的类别，应优先呈现。 更巧妙的是，当存在多个重要类别时（如服装网站同时需考虑“类型”和“性别”），作者建议不要将它们都堆砌在顶层导航，而是采用逐级显示的策略。例如，LL Bean网站就先让用户选择“男装”或“女装”，再在下拉菜单中展示具体的服装类别，这使得导航既精简又层次清晰。文章提供的这套从分析元数据重要性到设计分层菜单的思路，为解决复杂的导航设计提供了切实可行的路径。
关于Feed流信息的加载方式
作者从微信使用中的几个具体场景出发，讨论了信息流产品在加载新内容时的交互设计问题。比如在刷朋友圈、看长文或浏览群聊记录时，中断后返回，往往需要反复查找上次阅读位置，体验不够顺畅。 文章将问题提炼为：对于Feed流内容，新内容该如何加载？并以新浪微博和Twitter作为对比案例。Twitter的做法是，加载新内容后页面会停留在加载线，用明确标记告知用户上次的位置，继续下拉即可自然阅读新内容。而新浪微博则会在下拉时自动将旧内容顶下去，用户需要来回滚动才能衔接上阅读进度，交互路径相对割裂。 作者认为Twitter的交互更自然连贯，阅读成本更低。通过这一具体功能的对比，文章揭示了内容流产品中一个容易被忽略但直接影响用户体验的细节设计。
[译文]设计转场动效
这篇译文探讨了一个设计师们常忽略的细节：状态之间的转场动效。文章指出，许多设计师专注于像素级的按钮、图标和表单，但当用户点击按钮后，界面是如何从状态A“切换”到状态B的，这个过程往往被视为理所当然。作者认为，这种生硬的跳转在真实世界中并不存在，而利用好“时间”这个被忽视的维度，动效就能成为功能性工具，而不仅仅是装饰。 文章通过对比静态设计与动效设计，清晰地阐述了两者的关键差异。静态设计是孤立的画面，无法描述过程；而精心设计的动效（例如应用缓冲曲线调整动画节奏）则能引导用户的视觉，解释信息的流动。具体例子中，文章对比了列表新增条目时直接跳变与平滑展开填充的体验差异，也对比了常见的侧滑跳转与将详情页视为内嵌展开的交互逻辑。作者指出，后者能让用户更直观地理解自己所处的层级深度，从而减少对面包屑导航的依赖。 这些思路的核心在于让数字界面的过渡更贴近我们对物理世界的认知习惯。通过赋予界面变化以符合直觉的时间与空间逻辑，交互不仅能变得更流畅自然，也能在无形中传递更清晰的系统状态信息，最终提升整体体验的优雅度与可用性。
触屏键盘设计准则（内附绝密小抄）【译】
这篇文章从一次大规模可用性测试出发，聚焦于一个被广泛忽视却影响深远的细节：移动端触屏键盘的交互设计。作者指出，尽管触屏交互被认为更直观，但手机打字体验却常常令人沮丧，容易出错。 核心问题在于，许多网站在表单输入中未能巧妙利用触屏键盘的特性。文章提炼出5条关键设计准则，并揭示了残酷的现实——在测试的头部电商网站中，92%在地址输入框未禁用自动更正，导致“weathermen”这类错误更正被用户忽略并提交；60%在需要输入电话、信用卡号时，仍调出笨拙的标准键盘而非更大、更精准的数字键盘。 作者不仅给出了问题分析，还提供了具体的HTML代码解决方案，如使用``和`type="tel"`来调用专用键盘。这些准则超越了电商场景，适用于任何涉及触屏输入的移动网页设计，旨在通过微小的技术调整，显著降低用户输入错误率，提升交互的流畅感与用户信任。
标准化之路：关于产品设计规范
这篇讲的是产品设计规范在互联网团队中的意义与实践之道。作者从产品与业务的平衡关系切入，指出好的规范能定义如何设计出一个既满足业务目标、又让用户易用的产品。 文章的核心观点是，设计规范并非死板的约束，而是通过简约、清晰、高效的体系在纷繁中建立秩序。它详细拆解了规范的三大价值：指导性（凝聚经验，让团队各安其职）、有效性（基于业务与场景穷尽可能，形成合理模板）、可复用（提升视觉、前端及整体协作效率，并保障用户体验一致性）。文中以“赞”按钮的交互设计为例，生动说明了如何从简单反馈进化到优雅且考虑周全的体验。 作者也清醒地指出，规范的约束往往来自人，而非规范本身。它需要与时俱进，避免成为“古董”，并站在一定高度具备前瞻性。最后强调了实施时机的重要性：规范化是产品迭代中自然沉淀的“进化”，而非在产品未准备好时强行推行的“革命”，磨刀不误砍柴工。