Signal to BuildSIGNAL TO BUILD中文Owner sign in ↗Explore curated knowledge, course notes and methods, with their existing content and sources preserved.
These notes are in Chinese; English translations are not yet available.
Google UX 证书 Course 2(构思)+ Course 3(Build Wireframes & Low-Fi Prototypes)。设计构思(目标陈述公式 + HMW + Crazy Eights + 竞品调研 5 步)+ 用户流程图(4 形状:圆形动作/矩形页面/菱形决策/箭头)+ 故事板(4 元素 + 6 格 + 全景 vs 特写两类)+ 保真度概念 + 线框图(纸质→数字 + 倒推练习 + 行业标准画法)+ 信息架构 IA(组织/层级/顺序 + Dan Brown 8 原则 + sitemap 父子结构)+ Figma 入门 + 格式塔原则(相似/接近/共同区域/闭合/连续/对称)+ 低保真原型(Figma 连接 + 纸面原型 5 好处 + 移动优先)。面向 PM,讲清"从想法到可点击草稿"这一段
Nielsen Norman Group 导航与搜索交互模式知识库,25 篇精华按主题聚类成 7 块,读者=产品经理,术语行内解释,决策导向(何时用/怎么选/反例)。①全局与定向导航:面包屑 Breadcrumbs(11 条指南·补充不替代·显层级非会话路径·末项不可点·扁平站点不用·桌面全路径移动端只留父级)/本地导航 Local Navigation(同级+子级·倒 L 布局·超 2-3 层切面包屑·别压过全局导航)/空间记忆 Spatial Memory(稳定布局+反复交互·街区级 vs 门牌号级·别用自适应界面·宽浅层级·迷你地图/缩略图概览)。②菜单形态:汉堡菜单 Hamburger(2015 旧判定降可用性→如今已被识别但仍多一步成本·标准三横线+左上角+加 Menu 标签·11 条)/上下文菜单 Contextual Menus(kebab 竖三点/meatball 横三点·只放次要非关键操作·贴近内容·≤10-12 项·禁齿轮禁汉堡触发·点前看不出内容用 tooltip)/放大镜图标 Magnifying-Glass(移动省空间桌面降可发现性·桌面保留文本框 ≥27 字符·右上角·回车+点击都能提交)/菜单设计清单 17 条 UX Guidelines(大屏显导航·当前位置·点击优于悬停·避免多级级联用巨型菜单·长页固定菜单)。③页内内容组织:标签页 Tabs(导航标签 vs 页内标签别混用·选中态清晰·标签列表在面板上方·1-2 词·按频率排默认首位)/手风琴 Accordions(渐进式披露·减杂乱缩页长·碎片化访问+可发现性差·FAQ/分步流程/移动端长页适用·需全看/短内容/深层级/连续阅读不用)/Tabs vs Accordions 抉择(少而长用 Tabs·多而短用 Accordions·都不适合跨块对比)/页内链接 In-Page Links(锚链接/跳转链接·长页才值·标'目录/本页内容'·折叠面板/标签页替代对比表)/目录 ToC(决策树:主体 vs 侧栏·粘性 vs 非粘性·垂直/水平/多列·明确标签·链接标签与章节标题一致·含返回顶部·提升 SERP 子链接)。④全局元素:页脚 Footers 101(7 类组件:工具链接/门垫导航/次要任务/网站地图/见证奖项/子品牌/用户互动+无限滚动迷你页脚+上下文页脚·层级 ≤2 级·别折叠手风琴页脚)/粘性头 Sticky Headers(完全粘性 vs 部分粘性·内容占比最大化 16pt/1cm·不透明高对比·动画 300-400ms 避免 stalker menu·评估是否真需要)/移动端子导航 Mobile Subnavigation(折叠面板<6 子类/章节菜单 6-15/分类着陆页>15·顺序菜单易迷失+物理返回键陷阱)。⑤搜索行为:关键词探寻 Keyword Foraging(搜索前的搜索·不知道术语名·分面系统教术语·别造品牌新词 SmartClean)/搜索引擎塑造注视 Google vs 百度(SERP 演变·百度右侧栏低相关致横幅盲视·改心智模型需~1 年)。⑥搜索结果与功能:复杂 SERP 弹球模式 Pinball Pattern(从线性扫描转跳跃·首位点击率 51%→28%·前三 59%·第六 36%·研究任务 20% 折叠下点击·二页仅 2%)/三大 SERP 功能 Featured Snippets+People Also Ask+Knowledge Panels(路标/吸睛/改查询/给快答·站内搜索可借鉴·特色摘要 74% 关注率)/富搜索建议 Enriched Suggestions(60 次仅用 7 次·与搜索心态错位·加载慢·横幅盲视·误为促销·保留纯文本自动补全)/企业内部搜索 Intranet-Search(高期望低信任·显式搜索框非图标·单一搜索框·分列结果·日期元数据·固定结果·分页非无限滚动·设计+流程并重)。⑦筛选与评估:筛选类别与值 Filter Categories(类别+值两组件·合适/可预测/无行话/按优先级·分层过滤·术语加工具提示)/分页替代 Alternatives to Pagination(无限加载 vs 显示更多·<40 项才用无限·显总数/已加载/剩余·记住位置 bounce back·亚马逊海量仍用传统分页)/树测试 Tree Testing(无主持任务测 IA 标签·成功率 <40 差/61-80 良/>90 优·直接性·首次点击·多重分类 Polyhierarchy·vs 卡片分类)。
Nielsen Norman Group 信息架构(Information Architecture, IA)知识库 6 篇精华。先把 IA 定义讲清:IA = 组织·分类·命名内容并设计内容关系的实践(不是单一工件,是持续优化过程)。三条主轴:①IA 三模型——可见导航 Visible Navigation(前台 Front Stage,菜单/链接/面包屑/折叠面板,贴用户心智模型)/ 底层 IA 结构 Underlying IA Structure(后台 Back Stage,全站页面关系蓝图≈网站地图 Sitemap)/ 分类法与元数据 Taxonomies & Metadata(概念关系图,组织'概念'而非'内容',更技术化);并辨析 IA vs 网站地图(IA 是整体实践含内容清单 Content Inventory·内容审计 Content Audit·IA UX 研究如卡片分类 Card Sorting/树测试 Tree Testing·分类法标签,网站地图只是其可视化产物,nngroup.com 示例 3 级蓝/绿/黄节点)。②结构选择——扁平 vs 深层层级(Flat vs Deep Hierarchies):扁平可见性强·交互成本低但信息过载,深层顶层简洁但认知负担+点击路径长;新西兰政府 15 顶级类别扁平 vs 安永 5 顶级类别深层(服务下 11 子类·咨询下 10 子类);结论=避免极端·适度扁平优于适度深层·用户研究是关键。③导航与内容页落地——左侧垂直导航 Left-Side Vertical Navigation(容纳多分类·可扩展·易扫描,用户 80% 注意力在左半屏,阿伯尔餐厅 13 类·Slack/Gmail,反例埃森哲单'服务'藏全部·Nua 自行车内容/装饰比 5:1→12:1·5 条最佳实践:左对齐醒目/不重复导航/图标配文字/长菜单优化/移动端适配);分类法 Taxonomy 全流程(受控词汇 Controlled Vocabulary·层级·不可扩展,支撑分面导航 Faceted Navigation 美国国会图书馆/搜索建议世界银行,对比叙词表 Thesaurus·本体论 Ontology,8 步构建法 BARTOC.org);隐私政策/使用条款页 5 大常见错误(语言晦涩·缺概述·排版差≥14pt·导航不全·位置不符预期,正例 LinkedIn/eBay/Google·反例 Forever21/Ameren/Spotify 全大写)。读者=产品经理,术语行内解释,决策导向(何时用/怎么选/反例)。