用Axure还原微信操作列表：尺寸规范、交互链路与真机预览全攻略

简介：围绕微信操作列表的Axure原型及配套页面文件，适合UI/UX设计师、产品经理以及需要熟悉Axure原型构建的开发者参考。内容聚焦微信交互界面中操作列表的布局设计与页面流转，提供可直观演示的网页原型与源工程，帮助快速理解功能模块划分、点击跳转和状态变化，避免从零绘制。压缩包共182个文件，大小10.01MB，主要包含15个html页面、13个css样式、15个js交互脚本、82个png效果图、37个svg矢量图标、10个gif动图以及1个rp源文件等，静态素材与可运行页面兼顾。目前已有1460人学习下载，适合作为微信风格原型设计的参照样例。通过这份原型包，可以直观查看微信操作列表在消息、联系人、发现等场景中的交互表现，也可直接在自己的Axure工程中复用页面布局、图标素材和跳转逻辑，提升原型产出效率。 做原型做到第三年，我终于发现一个特别奇怪的现象：很多产品新人拿到“画一个微信风格页面”这种需求时，第一反应是去下载一套现成的微信高保真原型模板，然后往里填内容。这个做法本身没错，但填完之后，交互细节一塌糊涂——按钮点了没反应，操作列表弹出来收不回去，真机预览时字小得跟蚂蚁一样。

我今天想聊的，就是用Axure从零搭一套微信操作列表原型页面。不是让你照着微信抄一遍，而是带你理解微信这种“操作列表”组件背后的交互逻辑、尺寸规范、状态切换，以及你需要在Axure里怎么做，才能让原型既好看、又能拿去评审和演示。

1. 微信操作列表的“设计内功”：先读懂微信的尺寸与交互规范

很多新手画原型，上来就拉矩形、拖文本框，结果画出来的东西跟微信放在一起，一眼就能看出不是同一个体系。问题不是出在配色，而是出在你根本没理解微信的栅格、字号、间距和行高规范。

1.1 画布尺寸怎么选：别再迷信750×1334

先说一个最常见的坑。网上大量微信原型模板用的是750×1334这套“设计尺寸”，这是早年以iPhone 6/7/8时代推荐的导出尺寸。但在Axure里做原型，你面对的是“交互演示”场景，你要考虑的是：原型页面上文字多大合适、真机预览时点起来順不顺手。

我自己的习惯是用375×667起步，也就是iPhone 8的逻辑分辨率。逻辑分辨率的意思，你可以理解为手机屏幕上“视觉长度”的单位，和物理像素不是一回事。375就是你在手机上看到的一行能放多少个点，用这个尺寸画原型，元件的宽度、字号、间距都可以直接参考真实App的视觉呈现。

如果你需要兼顾全面屏（比如iPhone 14、15），可以再把画布调到375×812。但注意，你不需要每个页面都做两套，只要保证“宽度是375的倍数”，做一版即可。因为你在Axure里做原型，重点是演示交互和逻辑，而不是做视觉稿。

1.2 微信列表的组成结构：状态栏、导航栏、列表项、操作菜单

微信整体页面可以拆成四个层：最上面是状态栏（显示时间、信号、电量），下面是导航栏（页面标题栏），中间是内容区（列表项），再往下是底部或中部弹出的操作列表。

操作列表在交互设计里有一个专门的叫法：Action Sheet。微信里最常见的场景，是你按住一条聊天记录，或者在“我”页面点击某个选项后，屏幕下半部分弹出一个半透明的操作菜单，上面是几个操作按钮，点击后执行动作或关闭菜单。

一个标准微信列表项，通常包含四个要素：左侧图标（或头像）、中间标题文字、右侧的箭头符号（也叫“chevron”）、以及一条底部分割线。这里有一个很少人注意的细节：微信的列表分割线并不是从最左边开始画的，而是从图标右侧对齐的位置开始的，通常缩进13~16px。也就是说，分割线会避开图标区域，看起来更通透。

1.3 尺寸与字号的参考值：直接抄作业的速查表

下面这套数值我踩过很多坑才固定下来，推荐你直接存下来用：

这套数值不是拍脑袋来的。微信整体采用的是大字号、高可读性的设计，17px是iOS系统正文的标准字号，44px则是苹果人机交互指南里建议的最小触控区域。你做原型时把字号、行高、间距往这上面靠，出来的页面自然有“微信味”。

2. 搭建操作列表页面的完整流程：从导航栏到半屏弹层

理解了规范和参数，下面进入实操。我会按顺序带你从头做一遍，从页面骨架到弹层交互，每一步都说清楚我为什么这么做。

2.1 页面骨架：状态栏、导航栏和列表内容区

第一步，打开Axure，新建页面，画布设成375×667。

状态栏可以直接用矩形工具画一条40px高的深色区块，也可以干脆不画，用一段深灰色矩形在上面占位。因为状态栏在演示时不会有人去点它，你做原型的核心是把内容区做对。

导航栏我用一个高44px的矩形，底部加一条1px的分割线。微信的导航栏背景通常是浅灰色（#EDEDED）或白色，标题居中显示。你可以在导航栏左侧放一个“返回”箭头，右侧放“更多”按钮，方便演示页面跳转。

中间的内容区，我建议放6到8个列表项，这样页面高度刚好能撑满一屏。每个列表项我推荐“图标 + 标题 + 箭头”的结构。图标可以用椭圆、矩形组合画几个简单的图形代替，不用特别精细，因为原型阶段最重要的是位置和交互表达。标题用一个17px的文本框，左侧对齐。右侧箭头不用去找图标库，直接用一个8×14的矩形，旋转45度，再把下半部分裁掉，就得到一个小箭头。

提示：Axure里旋转元件后，需要打开“交互”面板给它一个热区，否则箭头只有中间很小一块区域能被点中。基础操作是先全选箭头，右键“转换为动态面板”，再把动态面板的整个区域作为点击热区。

2.2 操作列表（Action Sheet）的搭建与定位方式

最关键的一步来了：操作列表。我习惯在页面里放一个动态面板，命名为“ActionSheet”，默认是隐藏状态。

这个动态面板里放两个东西：第一个是遮罩层，一个铺满全屏的半透明黑色矩形，透明度设为50%。第二个是操作列表本体，一个白色圆角矩形，上面放三到五个操作项，每个操作项高50px左右，文字居中。底部可以再加一个“取消”按钮，和操作项之间留约8px间距，形成另一块圆角卡片。

微信里操作列表的弹出方式是从底部滑上来，而不是直接显示。所以在Axure里，我把这个动态面板的初始位置设在画布最下方（y = 667），当用户点击触发按钮时，用“移动”交互把它从底部移动到目标位置。移动的动画时长我习惯设250ms，缓动效果选“缓入缓出”，这样弹出手感会比较自然，不会“啪”的一下直接出现在屏幕上。

2.3 设计导览：为什么说高保真不是高复杂度

做完页面骨架，我想多说一句：高保真原型不等于高复杂度原型。很多人以为要把微信的每个像素都复刻出来才算高保真，其实错了。在原型阶段，你需要做的是把布局结构、层级关系、交互状态表达清楚。

微信列表那种毛玻璃效果、头像渐变、背景模糊，在Axure里很难做，也没必要做。你评审的时候，业务方和研发更关心的是：这个操作列表从哪里触发、点了之后有几个选项、每个选项点了之后干什么、能不能取消关闭。只要这四条链路完整，你的原型就是合格的。真正需要高保真的，是给视觉设计做参考的时候，到时候自然会走Figma或Sketch。

3. 交互状态的设置：点击、弹出、关闭、反馈的关键链路

原型不做交互，跟PPT没区别。操作列表的交互链路其实可以拆成四段：触发、弹出、选择、关闭。任何一段断了，演示效果都会大打折扣。

3.1 触发与弹出：从“点击列表项”到“菜单滑入”

我给每一个列表项都加了交互：单击时，显示“ActionSheet”动态面板，同时把动态面板移动到目标位置。

这里有一个许多新手容易踩的坑：动态面板初始是隐藏的，如果你直接给它设置“移动”交互，它会先以隐藏状态移动，然后才显示，表现起来就是弹层从底部闪现上来，少了滑动过程。正确的做法是：单击时并行触发两个动作——先“显示”动态面板，再“移动”动态面板。Axure里这两个动作要在同一个用例里设置成“同时”执行，而不是“等待上一个动作完成”。这样显示和移动同时进行，才能看到完整的滑动弹入效果。

3.2 点击选项后的反馈：高亮、关闭和业务跳转

操作列表弹出后，点击每个操作项，微信通常有两个反应：一是操作项短暂高亮一下，二是执行对应的动作（比如跳转到另一个页面、弹出提示框、或者关闭菜单），同时菜单回落。

在Axure里，我给每个操作项设置了“鼠标按下时”高亮的效果：选中该元件，在“交互”面板里添加“按下”事件，设置填充色浅灰；再添加“松开”事件，恢复白色。这样就做出了类似微信的“按钮按下反馈“，演示时体验会好很多。

点击项之后的动作，我一般用以下几种方式：

• 跳转设置：选中操作项“单击时”，选择“打开链接”，跳转到对应页面。
• 提示反馈：用Axure的全局变量加一个Toast提示，或者直接用“触发事件”弹出一个轻提示框。
• 关闭菜单：再次隐藏“ActionSheet”动态面板，并将其移回底部。

这里注意一个细节：如果你同时做了“按下高亮”和“单击跳转”，要让高亮先显示，跳转在松开后发生。Axure里可以把高亮放在“按下”事件，跳转放在“单击”事件，两者并不冲突。

3.3 点击遮罩关闭菜单：层级关系决定事件归属

操作列表有个常见习惯：点击遮罩区域，菜单关闭。这个交互在Axure里实现很简单：给遮罩层加一个“单击时隐藏ActionSheet”的事件就行。

但这里就又有一个经验点：遮罩层和操作列表本身在同一个动态面板里，遮罩层在上层，操作列表在下层，还是反过来的？我的做法是：遮罩层和操作列表在同一个动态面板内，遮罩层在动态面板的底层，操作列表在顶层。这样点击操作列表时不会误触遮罩，点击遮罩（列表周围的空白区域）时才会触发关闭。

如果你把遮罩层放在操作列表上面，点击操作列表就会被遮罩挡住，导致选项点了没反应。这个层级问题，我见过不下五次，都是新人在评审前一晚对着原型干瞪眼，结果发现是动态面板内部层级的锅。

4. 手机端预览与屏幕适配：真机调试中的常见坑

你以为页面做好了，交互也设好了，就完事了吗？原型这东西，电脑上看和手机上看是两个世界。平时评审如果用浏览器预览还好，一旦领导说“你发我手机上看看”，问题就全出来了。

4.1 为什么你手机预览的字那么小

最常见的情况是：Axure画布设置的是750×1324，但手机屏幕宽度只有375或414个逻辑点。Axure在手机浏览器里预览时，默认会把整张画布等比缩小到屏幕宽度，所以你在电脑上觉得刚刚好的17px字，到了手机上可能只剩8px，根本看不清。

解决办法有两个：一是从一开始就用375宽度的画布（这也是我前面坚持375×667的原因）。二是在Axure的“发布”设置里，选择“自适应视图”，或者手动设置缩放方式为“适合宽度”。但我个人推荐第一种，画布窄一点，设计时反而会更专注，不会做出“电脑上看刚刚好、手机上一坨”的页面。

4.2 真机调试时，操作列表的滑动动效丢失了

还有一个坑：很多人在电脑浏览器里预览时，缓存没刷新，改了交互不生效。或者更隐蔽——Axure在手机浏览器里对CSS动画的支持和桌面端不完全一致，特别是旧版本，有时候“移动”动画在真机上会变成瞬移，没有过渡效果。

遇到这种情况，我的排查顺序是：先刷新浏览器强缓存（电脑上按Ctrl+F5），然后在“发布预览”里选择“移动设备”模式，最后再用扫码预览。如果还是瞬移，可以把动画时长调高到400ms试试。还是不行的话，就换一种实现方式：不用“移动”，改用“显示/隐藏动态面板”加“面板状态切换”，把两个位置提前做成不同状态，用“向后滑动”代替“移动”。

4.3 浏览器与微信内置浏览器的预览差异

还有一个很现实的场景：你发给老板或客户，他们可能在微信里直接打开你的原型链接。这里要注意，Axure的预览链接默认走的是Axure Cloud或本地服务器，微信内置浏览器对这类外链的加载会有一些限制，比如证书问题、跳转提示等。

我的习惯是，发布前用Axure的“生成HTML文件”功能，把原型导出成静态文件，放到公司的测试服务器或对象存储上，生成一个可直接访问的链接。这样兼容性最好，不依赖Axure账号，也不会因为操作频繁而触发风控。导出时记得勾选“包含所有页面”，还有“移动设备”选项，这样手机访问体验会更接近原生App。

5. 把页面做成可复用资产：元件库、母版与团队协作

一套原型画完之后，如果你只是自己用，那到第4节就可以结束了。但如果你在一个产品团队里，或者你画的这套微信风格原型要给多个项目复用，那你有必要再做一步：把页面沉淀成可复用的资产。

5.1 用母版固化导航栏、状态栏和操作列表

Axure里的“母版”功能，适合用来放那些在每个页面都会出现、且交互逻辑一致的模块。比如状态栏、返回导航栏、底部操作列表。

我把状态栏和导航栏做成一个母版，命名“微信-顶部框架”；把操作列表动态面板做成另一个母版，命名“微信-ActionSheet”。这样新建页面时，拖一个母版进去，导航和弹层就都带上了，不用每个页面重新画一遍。以后想改导航栏颜色或弹层圆角，只要改母版，全项目同步更新，省下的时间非常可观。

这里提醒一点：母版里的动态面板如果加了交互，拖到新页面后，交互会自动带过去，不需要重新设置。但如果你在母版里用了“单击时触发”内部的某个按钮，要注意这个按钮的事件在母版里设置好后，新页面里修改事件会影响到所有引用该母版的页面，所以团队协作时，要对母版的修改权做一个约定，避免互相覆盖。

5.2 自建微信风格元件库，比下载模板更靠谱

我见过很多新人喜欢下载现成的“微信Axure元件库”，但用起来常常出现问题：有些元件是图片格式，不能改字；有些是旧版Axure文件，RP9打开报错；还有一些元件的命名全是拼音缩写，根本看不懂。

我的建议是：自己花一小时建一套极简微信元件库。元件库里只放6类东西：状态栏（一个成品矩形组合）、导航栏（含各种左侧返回/右侧按钮组合）、列表项（图标+文字+箭头组合）、按钮（主按钮、次按钮、警示按钮）、头像（圆形占位）、操作列表（成品菜单组合）。每个元件命名用“微信-组件-名称”的格式，方便检索。

这套元件库的好处是，你每做一个新项目，不需要重新画基础组件，只要拖出来改文字、改颜色就行，还能保证所有产出页面风格统一。评审时你能快速迭代，改一个原型从一两个小时压缩到二十分钟，效率差距就是这么来的。

5.3 团队协作时，原型里的注释与说明怎么写

最后分享一个小习惯：我在操作列表的每个选项下面，都会用一个红色的“注释”标签写清楚点击后的跳转逻辑或接口依赖。比如“点击删除，弹出二次确认框”“点击转发，跳转选择联系人页”。研发看原型时，最怕业务逻辑藏在交互里不说清楚，注释写明白了，评审会上的无效讨论能少一半。

我还会在页面右侧拉一条“逻辑说明区”，把操作列表的触发条件、边界情况（比如列表为空时怎么展示、操作中网络失败怎么提示）写在里面。这条区域只在电脑端预览时显示，不影响手机端的演示布局。很多我不写注释的原型，过两个月自己看都忘了当时为什么这么设计，写了注释之后，历史项目复盘也轻松很多。

操作列表这个组件，单独看是移动端最基础的交互模式之一，但它在Axure里做得好不好，直接能看出一名产品设计者对“信息层级”和“交互状态”的理解程度。这个原型做完后，你可以继续往里面加的东西还有很多：下拉刷新、列表搜索、左滑删除、甚至套上中继器做动态数据。那都是后话了，先把一个操作列表做到“能演示、能评审、能复用”，你的Axure功力已经超过一大半产品新人了。

本文还有配套的精品资源，点击获取