品牌型号：联想Yoga 14Sitl

系统：Windows 10 64位专业版

软件版本：Axure PR 9

在Axure RP中，制作微信界面可以帮助我们模拟实际应用的布局和功能，而让原型显示为手机样式，能够更加贴近真实的使用场景。以下为大家介绍怎么用Axure做微信界面，怎么在Axure中原型显示手机样式的相关内容。

一、怎么用Axure做微信界面

微信是我们生活中使用频率最高的软件。因为经常使用，我们对于微信的界面是比较熟悉的，它是我们入门学习界面绘制的好素材。为了练习界面的制作，最好的方式是将软件截图后进行一比一的还原。我们既能够通过临摹熟悉Axure的操作，也可以通过这个过程，感受到一些平常没有被留意到的细节，提升设计能力。

1、截图导入Axure RP

因为每个人的手机品牌不一样，手机系统不一样，将微信截图的尺寸是不一样的，你也可以借此了解你手机的比例尺寸。在我们接下来的临摹中，绘制的界面尺寸与你的截图尺寸保持一致即可。我们暂时不考虑界面在不同机型上的适配问题，这个问题比较复杂，会让新手感到迷惑，我们先把重点放在对软件的熟悉上。演示中，我的手机为安卓系统，截图尺寸为428*950px。将截图导入Axure画布中。

2、界面分析

在我们动手制作之前，最好对界面展开分析，做到对各个部分心里有数，再开始制作，能够事半功倍。

我们从上往下扫视微信的界面。

最上方的是状态栏，用于显示时间、电池电量等信息，这是手机系统自带的，不是微信提供的。在大部分的设计场景中，我们是不需要绘制状态栏的。我们只需要放上状态栏的示意图，在APP真正部署到用户手机里的时候，会使用对应手机系统的状态栏进行显示。也就是，在这个部分，无论你对状态栏有怎样的设计见解，设计得多细致，最终都会被替换掉，因此不建议在状态栏部分花费过多的绘制时间，只要传达“这个位置是状态栏”的信息即可。

接下来是标题栏，一般会写着应用名称或当前的页面名称。图示中写着微信（105）,105表示的是未读的消息数。左边有两个点构成的标签，点击可以打开浮窗内容。右边有两个标签，分别是【搜索】和【添加】。

再往下是聊天列表区域。这个部分内容虽多，但经过观察，我们可以发现存在一定的模式。这是由一个个类似的模块构成的。每个模块中左边是聊天的头像，文字显示部分是消息的来源方和消息的简略提示，右边是消息呈现时间。不要忽视，在模块与模块之间有一条灰色的细线进行视觉上的区分。部分消息的右上角有红点的标点提示。

最下方是标签栏，由4个图标和4个文本标签构成。表示可以跳转的标签页面。

分析完成后，我们可以依照从上往下的顺序依次进行绘制。

3、界面绘制

①底部矩形绘制

为了框定绘制的区域，使用矩形定出位置。矩形的大小和截图的大小保持一致。这里的矩形为428*950px。在快捷工具栏处更改矩形的样式：线框描边设置为0像素，颜色可以使用填充颜色中的吸色器，吸取截图中微信原本的灰色。

②状态栏绘制

状态栏部分我们可以直接使用元件库中制作好的状态栏元件，拖拽进画布使用。元件库可以在网络上检索移动端常用的元件库，加载到Axure中，例如这里用的是UXTT-IOS10-V1中的Status Bars。

可以选用四个状态栏其中之一，只是颜色不同而已。它和普通元件的使用一样，直接拖拽进画布即可。这里使用的是Status Bar Light，把它的宽度拉长到与底部矩形的宽度一致。

进一步调整状态栏的颜色为灰色。需要注意，这里状态栏组件被打组了，修改颜色时需要点击一次选中组，再点击一次选中组里的矩形，才能精准修改颜色。可以通过左侧概要面板确认现在的选中是在矩形上。

③标题栏绘制

标题栏整体是一个矩形。从默认元件库中找到矩形元件后，拖拽进入画布，矩形的宽度和高度与截图保持一致，可以用参考线辅助测量。图示矩形的尺寸为428*66px。

这一步不使用矩形元件，直接摆上文字标签和图标也是可行的，只是矩形会让我们的绘制更加规整。放入矩形后，调整矩形的样式，线框描边为0像素，填充颜色为统一的灰色。之后双击矩形，打字输入【微信（105）】，字号是18点，字体加粗。

接下来是图标部分的绘制。左边的图标比较简单，是两个点构成的，我们可以使用圆形元件进行绘制。拖入一个圆形后，修改颜色与原图颜色一致，按照键盘的Ctrl键进行等比例缩放，确定一个合适大小的圆后，复制粘贴出来一个，就有了两个圆。选中两个圆使用Ctrl+G的快捷命令将两个点归为一组，命名为浮窗图标。可以拉入一条横向辅助线，保证浮窗图标的顶部和原图图标的顶部是对齐的。

右侧的图标可以在网络上找素材，最好能够下载到格式为SVG的图标，这种格式在进入Axure后可以方便地对颜色进行修改，适应不同界面的配色需要。图标检索关键字可以是【搜索】、【加号】，可以检索到大量结果，在选择时尽量选择和原图一致的图标。图标应是线描的风格，线的宽度基本要一致，这样界面最终的一致性才高。图标因为具体的造型不同，不能使用绝对的数值控制两个图标一模一样大，这样会造成图标的比例失真，我们只要达到图标视觉上“看上去”是差不多大的即可，这里大概的数值是30*30px。选中两个图标，使用顶部对齐命令。

接着再拖入一个矩形，用于规划电脑登录状态的提示区域。修改矩形的线框描边为0像素，填充颜色为灰色。

打上文字内容【Windows微信已登录】。默认状态下矩形的文字是居中显示的，我们可以在样式面板中把它调整为居左，同时打字的时候往前面打几个空格来控制字体离界面左侧的合适距离。字体颜色改为#A6A6A6。

前面的电脑图标可以将元件库切换为Icons库，检索【电脑】。

将图标元件放入画布中，调整到合适的大小（大致也是30*30px）,并把颜色设置为#A4A4A4。

④聊天列表制作

使用矩形元件标识聊天列表区域的高度。尺寸为428*753px。将矩形的样式设置为线框为0像素，填充颜色为白色。

我们使用图片元件作为头像的占位符，不需要每个头像都专门配图，因为实际运行版本的APP会自动读取数据库中的用户头像进行填充，这里只要起到位置示意作用即可。图片元件的大小可以比对原图的大小，为53*54px。

使用文本标签元件打上文字【文件传输助手】，或者统一概称为【用户昵称】。下方使用文本标签打上缩略聊天内容的示意内容。右边使用文本标签元件打上时间。下方拉入一条直线元件，修改线的宽度为1，颜色为#CCCCCC。将这些元件全部选中后，使用Ctrl+G将它们归为一组。之后可以使用复制粘贴命令快速得到同样的模块内容，一直往下排布，直到填充整个聊天页面区域。

选中所有的模块，进行左对齐和垂直分布的命令。

适当修改模块中的文字显示，尽可能多地呈现多种信息类型，达到更真实的模拟效果。例如为了表示有不同的消息主体类型，可以分别写上用户个人昵称、公众号、订阅号、文件传输助手等。

⑤标签栏的绘制

在网络上下载图标，检索关键字分别可以是【聊天气泡或聊天】、【通讯录】、【发现或指南针】、【我】。找到合适的图标后导入Axure中使用。控制图标的大小基本为30*30px。选中四个图标进行顶部对齐和水平平均分布。使用文本标签打上对应的标签页名字，让图标与文本标签居中对齐。

微信的界面绘制到这里就基本完成了，可以再仔细对比原图做一些细节的调整。

二、怎么在Axure中原型显示手机样式

大部分的设计场景中，我们默认只绘制手机框内的、用于显示的内容。但有时为了提升预览效果的真实性，需要将手机外观一并显示，尤其是在需要区分界面是部署在安卓系统还是苹果系统的情况下。然而，Axure本身无法实现此功能。与墨刀等原型软件不同，Axure无法直接加载手机外框的预览效果。为了在Axure原型中显示手机样式，需要手动进行处理。

1、找到手机外框的素材

网络上有大量相关的素材，可以检索【样机】或【手机外框】，将素材作为图片导入Axure中。也有设计师将各种常用机型外框整理为元件库，我们只要导入元件库，便可以将外框作为元件使用。例如在UXTT-IOS10-V1的组件库里有苹果手机的外框。无论是图片素材还是元件库，尽量选择高质量、高清晰度的外框资源，确保预览效果的清晰与专业。在平时要有意识地收集手机的外框素材，在需要的时候才能高效地进行设计产出，且手机更新换代快，需要及时对素材库进行更新。

2、内容绘制

有了外框的限制，我们的绘制区域被限制在手机中白色的部分。在这个区域内，可以按照需要添加页面内容，例如导航栏、按钮、输入框和图片等元素。需要特别注意的是，由于手机外框已经确定了尺寸和比例，设计时要确保所有内容都能清晰地呈现在屏幕范围内，避免出现内容超出边界或布局紊乱的情况。并且每种机型都有规定的部件尺寸比例，需要查阅对应的设计规范，按照标准进行绘制。此外，设计过程中应预留出适当的边距，防止重要信息被遮挡，尤其是在手机的圆角屏幕或刘海屏设计中，这一点尤为重要。

3、预览

点击预览中后，可以看到带有手机外框的呈现模式，能够更真实地模拟界面运行后的效果。

以上就是怎么用Axure做微信界面，怎么在Axure中原型显示手机样式的全部内容。通过模拟微信界面的布局和功能，可以有效提高设计能力。让原型以手机样式展示，能够贴近真实的使用场景，提供更加精准的模拟效果。