2024年3月14日发(作者：)

其实你也可以轻松设计微信原型

微信作为我们日常使用频率最高的App产品，我们每天的启动次数与使用时长几乎占据了使

用移动终端的一半时间。学习产品设计的你，是否有没有想过有一天我们自己也可以设计出

可交互的微信原型界面。微信是一个超级庞大的App，由于时间原因本文只讲解到微信的二

级页面，更深层次的页面不再展开，线框图的使用也不在此文中详细讲解，重点讲解如何通

过Axure实现相关交互效果，讲述实现过程中的思路和方法。

我们先来了解下移动端App设计时的尺寸如何设置，要搞清楚这个问题得知道屏幕分辨率和物理像

素的相关一系列问题，如要讲述清楚，可能需要单开一篇文章，大家可以查看移动设备的界面设计

尺寸了解相关知识。

一、准备工作

以1280*720为我们的设计尺寸，确定了尺寸后，打开Axure，设置全局辅助线，养成设置辅助线的

习惯可以帮我们将原型做的更规范、更美观，做出高质量的线框图。打开手机中的微信，我们先来

观察下微信的一级主界面，主要包含：微信、通讯录、发现和我共四个频道页面。界面中的顶部显

示时间、电量的状态栏、以及上方的顶部导航和底部的导航栏在设计中使用的频率较高，我们可以

将这些经常用到的内容设置为母版，简化我们的操作。状态栏的高度设置40，顶部导航高度设置

为90，底部导航高度设置为100，宽度统一为720。设置下母版的拖放行为，状态栏的拖放行为设置

为固定位置（固定坐标0，0），顶部导航的拖放行为设置为脱离母版，底部导航的拖放行为设置为

脱离母版。（因上下两个导航在每个页面中的内容略有不同，所以设置为脱离母版，即在页面中对

此内容进行修改操作不会影响到原母版内容）

尺寸和母版设定完毕后，准备各一级、二级页面的线框图，此处省略一万字，不在此啰嗦说明。

微信和通信录界面中的瀑布流列表内容，可以通过中继器快速实现效果，这样做出来的保真度会

更高，交互更流畅。中继器的使用方法请参照手把手教您使用Axure7.0的中继器(Repeater)

二、设计交互

2.1 频道页交互（一级页面）

观察交互

通过观察我们得知各频道页（一级页面）存在以下交互行为：1）底部导航栏icon默认为镂空样式，

文字为黑色，当前页的icon则为绿色填充效果，文字导航也为相同绿色；2）点击底部导航中的icon

或文字均可跳转到对应的一级界面；3）微信频道：上下滑动手势可以查看页面内容，点击搜索icon

跳转至搜索界面，点击加号按钮可以弹出隐藏的功能菜单项，再次点击则菜单隐藏；4）通讯录

频道：上下滑动手势可以查看联系人列表内容，点击搜索icon跳转至搜索界面，点击加号按钮可以

弹出隐藏的功能菜单项，再次点击则菜单隐藏；5）上下滑动手势可以查看联系人列表内容，点击

搜索icon跳转至搜索界面，点击加号按钮可以弹出隐藏的功能菜单项，再次点击则菜单隐藏，点击

朋友圈、扫一扫等各通栏项均可以跳转至对应的二级页面；6）上下滑动手势可以查看联系人列表

内容，点击搜索icon跳转至搜索界面，点击加号按钮可以弹出隐藏的功能菜单项，再次点击则菜单

隐藏，点击相册、收藏等各通栏项均可以跳转至对应的二级页面，点击我频道中的二维码缩略图弹

出二维码名片。

设计交互：实现的思路与方法

1、底部导航交互

为每个icon及文字设置单击事件，利用热区覆盖在对应的icon及文字上，为每个热区设置单击事件

，单击时跳转至对应的频道页，导航栏的交互也可以在母版中设置好。（线框图阶段将每个频道页

的icon及文字设置为绿色）