Skip to main content

微软:视觉参考

让复杂的工作和技术任务变得熟悉、可理解。系统性体现为跨平台层级、清楚反馈、可访问性和真实使用场景。

先看真实案例​

真实原图、手册页与网页实录。正文显示压缩预览,点击可看清晰大图;出处与日期见图注。

官网与产品页面实录​

以下为官方页面的真实浏览器实录,包含产品首屏、功能区域和部分移动端页面。点击“清晰大图”查看文字与界面细节;出处与日期见图注。

字体、数字与斜体 · 案例与活动 · 官方账号与宣传矩阵

原文内容摘要​

下面直接摘要原始资料中的规则、做法与案例内容。每段附出处;后面的视觉观察另有标记。

Fluent Web 字号有明确语义档位​

Fluent 以 Segoe 为主要字体,同时按平台采用系统字体。Web 字号表包含 Caption 1 12/16px、Body 1 14/20px、Subtitle 2 16/22px、Title 3 24/32px、Title 1 32/40px 和 Display 68/92px 等字号/行高组合。Regular、Semibold、Bold 对应不同强调程度。这些数值服务产品界面,不应原样视为海报标题尺寸。

来源:原始资料。官方原文摘要。

Windows 的可变字体同时调粗细与阅读尺寸​

Windows 排版文档说明 Segoe UI Variable 包含 weight 与 optical size 两条轴:字重从 Thin 100 到 Bold 700,光学尺寸默认自动处理。小字号优先保证内部空间和辨识度,大字号改善轮廓表现。可变字体的价值是按实际显示环境调整字形,并非只增加更多粗细档位。

来源:原始资料。官方原文摘要。

字体、数字与斜体​

字体、数字与斜体

我们先试排“产品开放日 Product Day”,再试排表单中的提示与错误信息。同一套公司传播可以有共同层级,但平台文字需要照顾不同系统与语言。

本页资料的原文摘要​

Fluent Web 字号有明确语义档位​

Fluent 以 Segoe 为主要字体,同时按平台采用系统字体。

来源:原文。官方原文摘要。

Windows 的可变字体同时调粗细与阅读尺寸​

Windows 排版文档说明 Segoe UI Variable 包含 weight 与 optical size 两条轴:字重从 Thin 100 到 Bold 700,光学尺寸默认自动处理。

来源:原文。官方原文摘要。

更完整的来源摘要与版本范围见公司主文章的原文摘要。

官方资料告诉了我们什么​

Fluent 2 Typography是产品字体规则入口;Windows Typography具体说明 Windows 的系统字体和语言回退。两者都不等于所有微软海报采用同一个字体包。

Windows 文档把 Segoe UI Variable 的可变控制分成字重与光学尺寸;非拉丁文字按语言选择相应字体。文档同时说明 Windows 的常规文字层级不纳入 Bold 与 Italic,强调方式需依该界面规则选择。这是平台范围的事实,不能扩大为微软在所有媒介“禁止斜体”。原文

斜体怎么试​

先检查字体是否提供真正的 italic 款式。英文单词可以试排真实斜体,中文标题若要倾斜则单独保留一份原始版本,比较阅读和形状。正文、错误信息和活动细则优先保持稳定;倾斜实验只用于自己的展示标题,不作为 Fluent 官方参数。

不要把 Segoe UI Variable 的“可变”理解成所有可变字体都支持倾斜。轴的种类由具体字体决定。

下载与许可​

本轮没有把 Segoe 系列核验为面向任意公司官网、海报和字体再分发的通用资源。使用平台内置字体、嵌入 Web 字体、把文件交给别人,是不同使用方式,需要分别读取许可。

回到微软索引,或继续看活动与系列物料。

原始资料补充:思源黑体 · 阿里字体平台。

案例与活动​

案例与活动

本页展开 微软 的三个案例方向,并给出一套可实际制作的自有项目。来源与作者方案分别记录,具体原始入口和年份保留在文末。

逐项拆解​

1. Fluent 2​

研究多平台组件与基础规则,自己的网页和移动端使用同一语义,不机械复制尺寸。

作者拆解。 沿着基础值、语义角色、组件和页面四层研究。先看规则表达什么,再找按钮、卡片、表单或列表如何调用。默认状态之外,继续检查加载、空内容、错误、完成与恢复,视觉应当帮助用户知道下一步。

迁移到自己的项目。 按工作任务组织入口,展示真实演示、产品组合、支持与学习路径。 先用自有真实内容制作,再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系,原品牌的名称、素材和含义不自动迁移。

可交付产物。 一页语义角色表、一个状态完整的组件和一条可完成的页面路径。用长文字、空结果与错误情况验证,不只交默认画面。

2. Typography​

比较 Web 与 Windows 等平台 type ramp,先确认适用平台再使用数值。

作者拆解。 先把资料拆成家族、文件、款式与用途,确认是字体项目、品牌使用指南还是网页实现。然后比较大标题、长正文、数字、代码和字幕五种用途。可变轴和斜体只记实际提供的款式,专有字形与开放字体分别记录。

迁移到自己的项目。 Fluent 2 主字体与不同平台原生字体有明确分工,Web Body 1 为 14/20;Windows Segoe UI Variable 属于平台说明,中文另核对。 先用自有真实内容制作,再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系,原品牌的名称、素材和含义不自动迁移。

可交付产物。 一份字体资源台账、一页角色表和五张真实文字样张。样张包含中英混排、最长标题与数字变化,能解释每个款式为什么这样用。

3. Microsoft Design 与 Build​

研究设计故事和开发者学习的分工,活动发布之后提供教程与实践入口。

作者拆解。 从受众与承诺开始,追到议程、演示、实作、支持和会后资料。记录封面负责邀请、详情负责解释、规则负责限定、结果负责证明。主视觉要和这些阶段一起延伸,不能只研究一张海报。

迁移到自己的项目。 办开发者大会与工作效率工坊,课程、Demo、文档与回放形成连续学习路径。 先用自有真实内容制作,再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系,原品牌的名称、素材和含义不自动迁移。

可交付产物。 一张活动参与路径、八类系列物料和一页会后归档。参加者能够从邀请走到准备、参与、完成与继续使用。

原始案例资料与历史说明​

下面保留原来收集的来源和版本。新增的作者分析与原始事实分开使用。 我们准备举办一次企业工具开放日。参考 Build 时,先看演讲和演示怎样解释技术;参考 Imagine Cup 时,先看项目、资格和参赛过程怎样介绍。活动名字相近并不意味着物料和流程相同。

两类官方参考​

入口性质可以研究的内容本轮限制
Build官方开发者大会发布、演讲、演示、学习与回放的入口组织页面依赖脚本,没有逐个读取全部交互
Imagine Cup官方学生创新赛事参赛对象、项目叙事、资格与阶段当届规则需要按最新页面读取
Microsoft Design官方设计项目内容工作场景、产品设计与解释方式项目案例有自己的范围,不代表所有活动
Fluent 2官方产品系统报名、表单、状态与可访问性入口组件规则不能直接代替主视觉

调性怎么保持​

用三个问题检查:标题是否讲清用途,图片是否提供证据,操作说明是否告诉人下一步。所有物料的字体、图形和文案从同一份自有规则取值;Windows 平台字体设置只用于适合的平台界面。

本页未提供微软官方海报源文件或 PPT 母版。更完整的自有活动流程见制作清单。

官方账号与宣传矩阵​

官方账号与宣传矩阵

如果我们要做一次「开发者大会与学生创新赛」,可以研究 微软 怎样把公司介绍、产品内容、活动页面和社交账号连接起来。先辨认账号身份,再观察成品的标题、画面、文案和行动入口。

品牌边界与内容定位​

Microsoft 公司、Microsoft Design、Azure/Microsoft 365/Windows/Xbox 产品与开发者活动分层。

主要研究对象是企业团队、开发者、设计师、消费者与学生。下面的内容定位与制作方案是作者的观察和练习建议:企业生产力与技术能力通过任务演示、课程和案例建立。它们不是该公司公开披露的内部运营制度,也不代表固定的发文频率。

自有发布平台与承接入口​

这些入口包括网站、新闻、设计系统、代码、活动、商业服务和企业资料。网站与账号是不同记录:活动网站承接报名或信息,社交账号负责把人带过去。表中“观察内容”说明我们应该研究什么,不表示完整读取了所有子页面。

平台或栏目层级观察内容
Microsoft 官网公司与产品品牌与产品导航
Microsoft Blogs新闻与公司观点公司文章与产品信息的编排
Microsoft Design设计设计文章与独立设计账号
Fluent 2设计系统企业产品界面与规范
Microsoft Learn开发者与学习教程、文档和学习内容
Microsoft Build大会演讲、开发者内容与参会路径
Imagine Cup学生赛事参赛对象与项目表达

官方账号与证据​

A 是官网页面中的出站链接记录;即使平台主页需要登录,链接来源仍可查。B 是平台公开资料或平台矩阵收录,逐号认证/官网互链未全部复核。Q 是官方文字、二维码或图标,仅能确认表内写出的信息。H 是历史官方记录,需要复核现状。主页可用性、当前昵称和活跃状态可能变化。

平台账号或官方入口业务与市场范围身份依据
XmicrosoftdesignMicrosoft DesignA · 官网出站链接;出处
Instagrammicrosoft.designMicrosoft DesignA · 官网出站链接;出处
LinkedInMicrosoft DesignMicrosoft DesignA · 官网出站链接;出处
YouTubeMicrosoft Design 频道 IDMicrosoft DesignA · 官网出站链接;出处
FacebookMicrosoft DesignMicrosoft DesignA · 官网出站链接;出处
LinkedInMicrosoft公司/职业平台B · 平台公开资料;出处

只出现二维码时,不补猜微信 ID;出现微博内容转载页时,不把它当作已取得的微博主页。GitHub 项目、知乎专栏和 Discord 活动邀请按其实际形态记录,不能与公司主品牌账号混算。

各平台覆盖状态​

这一表方便检查国内与国际渠道。它记录本轮证据覆盖,不是“有号/无号”的判定,也不声称已经收齐所有国家、业务和历史账号。

平台本轮记录核对状态
微信公众号本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号
微信视频号本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号
微博本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号
抖音本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号
B站本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号
小红书本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号
LinkedInMicrosoft Design;MicrosoftA/B;详见上表
XmicrosoftdesignA;详见上表
YouTubeMicrosoft Design 频道 IDA;详见上表
Instagrammicrosoft.designA;详见上表
FacebookMicrosoft DesignA;详见上表
TikTok本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号
Threads本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号
Pinterest本轮未取得可引用的官方账号证据待核对;不表示该公司没有账号

本公司特别需要分清的地方​

  • 本轮核实最完整的是 Microsoft Design 子矩阵,不据此声称获得微软所有主品牌与产品账号。
  • Microsoft 的平台资料页另有记录。
  • Xbox 官网链接属于产品网站,不属于 X 社交账号。

一次发布或活动怎样串联​

这个例子用于我们自己的「开发者大会与学生创新赛」,不是对 微软 真实排期的复述。可以从 Microsoft 官网 和上表的活动/内容入口观察呈现方式,再按自己的受众选渠道。

阶段内容与格式适合的渠道层下一步
公布主题官网专题与一张主海报:项目名称、面向谁、参加后能得到什么自己的公司官网+已确认身份的主品牌账号进入一张完整的项目说明页
说明价值产品/作品演示;长文解释一次真实任务;短视频只选一个结果产品内容线+专业文章+视频平台试用、阅读教程或了解赛题
展示人物与议题嘉宾卡、作品卡、议程卡;长图中的信息保持可编辑活动内容线+公众号/社交图片查看完整嘉宾介绍、时间与报名条件
帮助参与FAQ、报名/提交步骤、示例文件、直播观看说明活动页+社区/客服内容线完成报名、作品提交或收藏直播入口
活动当天直播包装、演讲 PPT、现场屏幕、可实时使用的说明现场与视频平台;社交账号发布精选信息观看、互动与获得资料
活动结束回放目录、作品与结果、资料索引、完整案例官网归档+专业/社区内容线;品牌号摘要导览继续学习、试用产品或参加下一次活动

比赛另做一张信息母表,保存赛题版本、资格、时区、截止时间、提交文件、评审方式、奖励和咨询入口。社交卡片可以简短,母表和规则页需要完整;临时变更同步到全部承接渠道。

官网、公众号、图片、视频和 PPT 的一致性​

物料共同保留按媒介改变
官网自己的品牌身份、项目标题、主视觉主题与信息来源补全详情、条件、目录和可使用的入口
公众号/长文标题用词、图片主题、配色层级与链接目标开篇说明受众与收益;正文加入过程、规则和答疑
社交海报/封面项目名称、主图主题、日期与账号归属重排信息;为头像、平台控件和裁切留出空间
短视频/长视频/直播品牌署名、字幕样式、图形与章节词汇先给演示或具体问题;短视频删减信息,长视频保留步骤和章节
PPT/现场屏幕同一名称、字体系列、色彩角色和图表表达根据观看距离重新设置字号与信息密度,不缩小公众号长图直接投屏
比赛/作品/嘉宾系列一致的编号、头像或作品展示位置、署名方式为不同长度姓名与不同尺寸作品准备替代布局

字体、斜体、角色、摄影和图形的具体规则继续看本公司的视觉资料与横向字体地图。先查资源许可与规范范围,再给自己的品牌写一份可重复使用的规则。

尚未完成核对的分支​

  • 集团 X/Facebook/Instagram 主账号的官网互链。
  • Azure、Windows、Microsoft 365、Xbox 各区域号。
  • Microsoft Research 和中文招聘账号。

复核时保存平台、显示名称、固定 ID/handle、主页 URL、认证主体、市场/语言、官网出处、当前页面截图日期与活动归属。只靠搜索同名账号或第三方排行榜,无法补齐身份链。记录模板和渠道分工见总导航与发布执行手册。

本页账号收集与来源核对日期:2026-09-30。没有发送消息、关注账号或进入需要登录的账号后台。

官方资料与视觉观察​

官方资料、真实案例与视觉观察

这篇把 微软 拆成“原始资料、设计判断、案例、制作方案、活动执行与传播矩阵”。适合研究 企业团队、开发者、设计师、消费者与学生 的内容。引用链接与读取状态是资料记录;标为作者拆解、练习或建议的部分是为自有品牌设计的方法。 具体字体、色号和组件参数只在取得明确来源时记为官方值。

原始资料与读取状态​

Fluent、Windows 字体、Microsoft Design、Build 和各产品分别核对;平台字体栈并非所有营销物料统一字体。

资料本次核对与适用边界
Fluent 2已读取公开文本;不代表逐项核验全部内页
Fluent Typography已读取公开文本;不代表逐项核验全部内页
Microsoft Design已读取公开文本;不代表逐项核验全部内页
Windows Typography已读取公开文本;不代表逐项核验全部内页
Microsoft Trademark Guidelines保留既有官方入口;本次未重新读取文件全文
Build保留既有官方入口;本次未重新读取文件全文
Imagine Cup保留既有官方入口;本次未重新读取文件全文
Microsoft 官网保留既有官方入口;本次未重新读取文件全文
Microsoft Blogs保留既有官方入口;本次未重新读取文件全文
Microsoft Learn保留既有官方入口;本次未重新读取文件全文

收集与复查日期:2026-09-30。历史活动保留其届次;当前主站可能已切换下一届。HTTP 200 不代表已读取脚本内所有内容,也不代表资源许可已经确认。

先理解这套表达如何成立​

信息先后与视觉焦点​

界面截图与工作场景结合,图形解释连接和层次,材质效果只强化对象关系。

作者建议先找一条完整路径:从封面或首屏进入详情,再进入操作、报名、获取或回放。记录主标题怎样改变、同一种图形怎样反复出现、证明材料在哪一层出现。成熟的视觉需要在这条路径上仍然清楚;单张好看的图不能代替完整体验。

配色的角色​

作者用中性背景承接工作内容,主题色区分产品与活动;操作、反馈和警告使用语义角色。

做自己的系统时,先定义背景、正文、身份强调、分类、状态五类角色。不要先画十张图再逐张取色。主题色可以出现在封面与章节页,长说明、规则、规格和表单回到稳定底色。每个状态都写出名称,颜色之外还有文字或符号。

图像与图形怎样分工​

界面截图与工作场景结合,图形解释连接和层次,材质效果只强化对象关系。 同一组素材为官网、海报、公众号、视频和演示准备不同裁切。主体完整版本用于详情,局部版本用于解释,缩略版本用于入口。每个版本记录原图、主体位置、文字安全区和署名,避免后期反复猜裁切。

动态与语言​

遵循用户操作显示反馈,用层级移动解释界面变化;舞台演示让观众看懂任务开始与结束。

调性可以概括成“企业生产力与技术能力通过任务演示、课程和案例建立”,这是作者提炼。邀请、操作指引、规则和结果公告承担不同任务:邀请说机会,指引说动作,规则说条件,结果说事实。把四类文本放在一起校对,能发现看似统一但实际上语气混乱的地方。

三个案例方向的详细拆解​

下面每个方向都给出研究方法与可做的产物。它们是基于上方资料范围的作者分析;受限页面没有被补写成已读取的内部规范。

1. Fluent 2​

研究多平台组件与基础规则,自己的网页和移动端使用同一语义,不机械复制尺寸。

作者拆解。 沿着基础值、语义角色、组件和页面四层研究。先看规则表达什么,再找按钮、卡片、表单或列表如何调用。默认状态之外,继续检查加载、空内容、错误、完成与恢复,视觉应当帮助用户知道下一步。

迁移到自己的项目。 按工作任务组织入口,展示真实演示、产品组合、支持与学习路径。 先用自有真实内容制作,再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系,原品牌的名称、素材和含义不自动迁移。

可交付产物。 一页语义角色表、一个状态完整的组件和一条可完成的页面路径。用长文字、空结果与错误情况验证,不只交默认画面。

2. Typography​

比较 Web 与 Windows 等平台 type ramp,先确认适用平台再使用数值。

作者拆解。 先把资料拆成家族、文件、款式与用途,确认是字体项目、品牌使用指南还是网页实现。然后比较大标题、长正文、数字、代码和字幕五种用途。可变轴和斜体只记实际提供的款式,专有字形与开放字体分别记录。

迁移到自己的项目。 Fluent 2 主字体与不同平台原生字体有明确分工,Web Body 1 为 14/20;Windows Segoe UI Variable 属于平台说明,中文另核对。 先用自有真实内容制作,再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系,原品牌的名称、素材和含义不自动迁移。

可交付产物。 一份字体资源台账、一页角色表和五张真实文字样张。样张包含中英混排、最长标题与数字变化,能解释每个款式为什么这样用。

3. Microsoft Design 与 Build​

研究设计故事和开发者学习的分工,活动发布之后提供教程与实践入口。

作者拆解。 从受众与承诺开始,追到议程、演示、实作、支持和会后资料。记录封面负责邀请、详情负责解释、规则负责限定、结果负责证明。主视觉要和这些阶段一起延伸,不能只研究一张海报。

迁移到自己的项目。 办开发者大会与工作效率工坊,课程、Demo、文档与回放形成连续学习路径。 先用自有真实内容制作,再放入最长标题、不同图片与异常状态检验。保留的是有解释力的结构关系,原品牌的名称、素材和含义不自动迁移。

可交付产物。 一张活动参与路径、八类系列物料和一页会后归档。参加者能够从邀请走到准备、参与、完成与继续使用。

可以直接查看的媒体例子​

以下来自公开 HTML 的媒体链接,便于查看原始例子;文件存在不等于允许任意使用。没有将它们标成内部模板或完成逐帧分析。

类型原始媒体入口所在页面
图片Let creativity flowFluent 2
图片原页媒体文件Fluent Typography
图片MicrosoftMicrosoft Design
图片Several words rendered in Segoe UI VariableWindows Typography

字体、字号、数字与斜体​

Fluent 2 主字体与不同平台原生字体有明确分工,Web Body 1 为 14/20;Windows Segoe UI Variable 属于平台说明,中文另核对。

斜体怎样成为规则​

把同一短英文分别用直立款、字体实际提供的 Italic/Oblique 或倾斜轴排出。观察字形、倾角、字宽与旁边中文的关系。若字体没有对应款式,软件的合成倾斜要标为作者处理。中文正文、议程、规则与长注释保持直立;速度感可以由构图与动效承担。可变字体使用范围从实际字体文件读取,不能由另一款字体的数值推断。

宣传平台、账号与矩阵怎样配合​

平台官方入口样本所属范围
XmicrosoftdesignMicrosoft Design
Instagrammicrosoft.designMicrosoft Design
LinkedInMicrosoft DesignMicrosoft Design
YouTubeMicrosoft Design 频道 IDMicrosoft Design

完整名称、主页、业务边界和身份依据见宣传平台与账号章节。A 表示官网出站链接;B 表示平台公开依据;Q 表示官网名称或二维码;H 表示历史官方记录。不同等级不混作已经核实当前账号 ID。

具体发布链:宣布时给主题与入口;解释时给可见样例;提醒时给日期与准备;进行时给现场任务;结束时给结果与资料。每次发布只选一个主要行动,并保证账号名称、项目名称与页面信息一致。

交付前的检查与修正​

需要检查常见问题修正动作
品牌层次公司、产品、活动混成一层按“Fluent、Windows 字体、Microsoft Design、Build 和各产品分别核对;平台字体栈并非所有营销物料统一字体。”重新标注来源与用途
文字中英混排、型号或长标题破版用实际最长内容试排,调整字重、行数与层级
图像场景与宣传结论没有对应按本页素材分工补过程、细节与结果
系列每张图换字体、颜色和装饰固定角色与组件,只让内容变化
动态演示被包装遮住,字幕看不完按任务顺序减镜头,留出结果观看时间
活动报名之后不知道下一步补准备、确认、现场支持、提交与回顾
渠道所有账号转同一张图按解释、演示、行动与归档分别制作内容

本页章节​

继续使用跨媒介指南、字体选型与斜体实验和活动完整物料清单整理自己的规则。

回到公司目录 · 视觉与物料指南 · 活动与传播指南