怎么用axure做微信电脑端界面

Axure：制作PC端聊天窗口原型

人人都是产品经理

2018-08-02 · 人人都是产品经理官方账号 优质科技领域创作者

之前写文档没有用axure，最近才接触这个软件，觉得原型制作还是挺有趣的。闲来琢磨了一下里面的功能，边做边学，做了一个PC端的聊天窗口。现在还不够完善，只是将大概功能实现出来。有更好的解决方案也希望大家能不吝赐教。

效果如下：

好了，接下来进入正题。

一、草图绘制

三个色块矩形叠放，增加矩形阴影，形成层级关系。从大到小分别对应背景、列表栏、输入区域。

添加细节元素图标、文字等，图标可以在其他软件中做好导出直接使用。

然后到了添加元件的步骤，输入栏直接拉一个和输入区域等高的文本框，去掉边框，添加提示文字为“请输入…”即可，左边列表栏我是用中继器做的。（教程大家发过很多，我这里就不重复了）

二、交互制作

1. 第一步制作点击切换列表的交互动效

①先绘制一个蓝色矩形选中条。

②点击文字（未回复/已回复/已结束），添加一个选中状态（我这里是将文字颜色变黑）。

③添加鼠标单击时的事例。

设置选中状态 -未回复（文本标签）为true；其他两个标签选项为false。其他两个标签设置同理，设置完成之后，就可以看到点击有选中效果了。

再显示中继器内容的跟随事件：仍然是鼠标单击时的事例，把未回复（当前标签对应中继器）设置为显示，动画可以设置为向左滑动或者向右滑动，随便设置都可以，统一就行了。接着把剩下的两个中继器内容设置为隐藏。设置完成后，就有下边的列表切换效果了。

再是蓝色矩形条的切换跟随，[[wh.left]]代表蓝色矩形条的x轴起点位置绝对固定到wh这个元件的左端，[[wh.bottom]]代表蓝色矩形条的Y轴位置起点在wh元件的底部，其他两个标签也设置起来，注意，第六步的变量要一一对应起来，比如：我这里wh代表text-未回复，yh代表text-已回复，yj代表text-已结束。

到此为止，切换效果就有了。

2. 接下来就是列表的单行选中效果的制作

这要先说一下，我在中继器中的项目编辑中加了一个矩形作为边界，去掉边框和填充。

①将该矩形添加一个选中状态，我这里简单的做了一个填充颜色。

②将中继器中的内容编组，为这个组设置鼠标单击时的选中状态为true。（设置隐藏 未读数量可以达到点击后红色数字提示气泡消失的效果）

③往下找到组合的设置选项组名称，输入一个名称。

④再选择中继器，把隔离选项组效果的勾去掉就完成了单行选中效果了。

现在单行点击效果也完成了。

3. 右边聊天窗口的交互

①元件组成

首先，头部是一个矩形，随便打上一个联系人的名字。

然后是别人发来的消息显示（因为我这里其实是用的同一个聊天面板，设置改变只是头部文字和未读消息的文字，所以实现出来比较简陋，切换到B联系人时，发给A的消息还是在，你们有好的解决方案可以说一下）。

（1）自己发的消息我是用一个中继器做的，双击进入中继器编辑页面，拉一个图片+矩形框进来，给中继器的列添加对应的属性名。如：内容-neirong、图片-img。

注意：这里不要添加具体内容。

（2）把输入框的隐藏边框给勾上，在提交按钮那儿选择右边的发送按钮。

（3）最后选择提交按钮，添加鼠标单击时的事例。

添加行（我的消息发送），选中刚刚聊天面板中建的中继器然后点击添加行，img对应的是自己的头像，neirong栏可以填写默认变量[[LVAR1]]或者自己定一个，然后点击后面的fx编辑变量，将输入框的文字赋值给它。

设置提交时，将文本框内容清空。

完成之后就能自己发消息啦。

4. 最后就是点击左侧列表，右边聊天面板跟随变化

（1）将右边聊天面板编组，转为动态面板，并设为隐藏。（可以先把面板移到别的地方，添加一个空状态时的文字，再将面板移回原位）

（2）然后为左侧中继器的项目添加鼠标点击时的事例。

第一行为定义num1（全局变量）为鼠标点击中继器项目的所在行数。

第二行为设置点击该项目时使该项目变成选中状态（这个用于前面的单行选中）。

第三行为点击使数量气泡消失。

第四行+第五行 为设置点击刷新聊天面板显示时的状态。

（3）为聊天界面显示时设置文字变化，如点击第一行时显示头部为小明，消息为hello，第二行显示头部为二明，消息为我要睡觉了，以此类推。上一步设置隐藏再显示面板，就是为了刷新这个文字变化。

若要解释清楚像素和分辨率需要的篇幅比较长，请大家参考百度百科。这里金乌直接给大家提供一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure中设置大小即可，设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口（ include Viewport tag ），并进行配置即可。如：iPhone4 320*480iPhone5 320*568Samsung Galaxy S4 360*640Viewport Sizes设备名称 系统平台 像素密度 屏幕尺寸 竖屏尺寸 横屏尺寸Acer Iconia Tab A100 Android 166dpi 7″ 800 1280Acer Iconia Tab A101 Android 170dpi 7″ 600 1024Acer Iconia Tab A200 Android 160dpi 10.1″ 800 1280Acer Iconia Tab A500 Android 149dpi 10.1″ 648 1280Acer Iconia Tab A502 Android 149dpi 10.1″ 800 1280Ainol Novo 7 Elf 2 Android 170dpi 7″ 496 1024Apple iPad iOS 132dpi 9.7″ 768 1024Apple iPad 2 iOS 132dpi 9.7″ 768 1024Apple iPad 3 (and 4) iOS 264dpi 9.7″ 768 1024Apple iPad Mini iOS 163dpi 7.9″ 768 1024Apple iPhone 3G iOS 163dpi 3.5″ 320 480Apple iPhone 3GS iOS 163dpi 3.5″ 320 480Apple iPhone 4 iOS 326dpi 3.5″ 320 480Apple iPhone 4S iOS 326dpi 3.5″ 320 480Apple iPhone 5 iOS 326dpi 4″ 320 568Apple iPod Touch iOS 163dpi 3.5″ 320 480Archos 70b (it2) Android ?? 7″ 600 1024Archos 80G9 Android 160dpi 8″ 768 1024Arnova 7 G2 Android ?? 7″ 480 800Arnova 7FG3 Android ?? 7″ 640 1067Arnova 8C G3 Android 125dpi 8″ 800 1067Arnova 10b G3 Android 160dpi 10.1″ 600 1024ASUS Padfone Android ?? 4.3″ 800 1128ASUS Transformer Pad TF300T Android ?? 10.1″ 800 1280ASUS Transformer TF101 Android 149dpi 10.1″ 800 1280BAUHN AMID-972XS Android ?? 9.7″ 768 1024BlackBerry 9520 Blackberry OS 185dpi 3.25″ 345 691BlackBerry Bold 9360 Blackberry OS 246dpi 2.44″ 320 N/ABlackBerry Bold 9780 Blackberry OS 246dpi 2.44″ 480 N/ABlackBerry Bold 9790 Blackberry OS 246dpi 2.45″ 320 N/ABlackBerry Bold 9900 Blackberry OS 287dpi 2.8″ 356 N/ABlackBerry Curve 9300 Blackberry OS 246dpi 2.45″ 311 N/ABlackBerry Curve 9320 Blackberry OS 164dpi 2.44″ 320 N/ABlackBerry Curve 9380 Blackberry OS 188dpi 3.2″ 320 N/ABlackBerry PlayBook Blackberry Tablet OS 169dpi 7″ 600 1024BlackBerry Torch 9800 Blackberry OS 187.5dpi 3.2″ 320 480BlackBerry Torch 9810 Blackberry OS 250dpi 3.2″ 320 480BlackBerry Z10 Blackberry OS10 355dpi 4.2″ 345 521Google Nexus 5 Android 445dpi 4.95″ 360 598HP Touchpad Android 132dpi 9.7″ 768 1024HP Veer WebOS 197dpi 2.6″ 320 545HTC 7 Mozart Windows Phone 7 252dpi 3.7″ 320 480HTC 7 Trophy Windows Phone 7 245dpi 3.8″ 320 480HTC Desire Android 252dpi 3.7″ 320 533HTC Desire C Android 164dpi 3.5″ 320 480HTC Desire HD Android 216dpi 4.3″ 320 533HTC Desire Z Android 252dpi 3.7″ 480 800HTC Evo 3D Android 256dpi 4.3″ 540 960HTC Legend Android ?? 3.2″ 320 480HTC One S Android 256dpi 4.3″ 360 640HTC One V Android 252dpi 3.7″ 320 533HTC One XL Android 260dpi 4.7″ 360 640HTC Sensation XL Android 198.5dpi 4.7″ 360 640HTC Titan 4G Windows Phone 7 198.5dpi 4.7″ 320 480HTC Velocity 4G Android 245dpi 4.5″ 360 640HTC Wildfire S Android 180dpi 3.2″ 320 480HTC Windows Phone 8X Windows Phone 8 341dpi 4.3″ 320 480Huawei U8650 Android 165dpi 3.5″ 320 480Kindle 3 Kindle 167dpi 6″ 600 N/AKindle Fire HD 7 Android 216dpi 7″ 533 801Kindle Fire HD 8.9 Android 254dpi 8.9″ 533 801Kindle Fire HDX 7″ Android 323dpi 7″ 600 902Kindle Paperwhite Kindle 212dpi 6″ 758 N/AKobo eReader Touch Android N/A (E Ink) 6″ 600 N/ALG Optimus 2X Android 233dpi 4″ 320 533LG Optimus L3 Android 125dpi 3.2″ 320 427LG Optimus Pad Android 168dpi 8.9″ 768 1280LG Viewty KU990 Java 155dpi 3″ 240 400Microsoft Surface (RT) Windows RT 148dpi 10.6″ 768 1366Motorola Defy Android 265dpi 3.7″ 320 569Motorola Droid3 Android 275dpi 4″ 360 599Motorola Droid Razr Android 256dpi 4.3″ 360 640Motorola Milestone Android 265dpi 3.7″ 320 569Motorola Razr HD 4G Android 312dpi 4.7″ 360 598Motorola Razr M 4G Android 312dpi 4.7″ 360 598Motorola Xoom Android 149dpi 10.1″ 800 1280Motorola Xoom 2 Android 149dpi 10.1″ 800 1280Nexus 4 Android 318dpi 4.7″ 384 598Nexus 7 Android 216dpi 7″ 603 966Nexus S Android 233dpi 4″ 320 533Nokia 300 Nokia 167dpi 2.4″ 234 N/ANokia 500 Symbian 229dpi 3.2″ 360 640Nokia 700 Symbian 229dpi 3.2″ 240 427Nokia 2700 S40 200dpi 2″ 240 N/ANokia Lumia 520 Windows Phone 8 233dpi 4″ 320 480Nokia Lumia 610 Windows Phone 7 252dpi 3.7″ 320 480Nokia Lumia 710 Windows Phone 7 252dpi 3.7″ 320 480Nokia Lumia 800 Windows Phone 7 252dpi 3.7″ 320 480Nokia Lumia 820 Windows Phone 8 217dpi 4.3″ 320 480Nokia Lumia 900 Windows Phone 7 217dpi 4.3″ 320 480Nokia Lumia 920 Windows Phone 8 332dpi 4.5″ 320 480Nokia Lumia 1020 Windows Phone 8 332dpi 4.5″ 320 480Nokia Lumia 1520 Windows Phone 8 367dpi 6″ 320 480Nokia N95 S60 154dpi 2.6″ 240 N/ANokia N900 Naemo 267dpi 3.5″ 480 800Panasonic Toughpad A1 Android 127dpi 10.1″ 768 1024Samsung Galaxy Ace Android 165dpi 3.5″ 320 480Samsung Galaxy Ace 2 Android 246dpi 3.8″ 320 533Samsung Galaxy Grand Android 187dpi 5″ 480 800Samsung Galaxy Note Android 285dpi 5.3″ 400 640Samsung Galaxy Note 2 Android 267dpi 5.5″ 360 640Samsung Galaxy Note 10.1 Android 149dpi 10.1″ 800 1280Samsung Galaxy S2 Android 217dpi 4.3″ 320 533Samsung Galaxy S3 Android 306dpi 4.8″ 360 640Samsung Galaxy S3 Mini Android 233dpi 4″ 360 640Samsung Galaxy S4 Android 441dpi 5″ 360 640Samsung Galaxy S4 Mini Android 256dpi 4.3″ 360 640Samsung Galaxy Tab 2 7.0 Android 170dpi 7″ 600 1024Samsung Galaxy Tab 7 Android 170dpi 7″ 600 1024Samsung Galaxy Tab 8.9 Android 170dpi 8.9″ 800 1280Samsung Galaxy Tab 10.1 Android 149dpi 10.1″ 800 1280Samsung Galaxy Tab 10.1 Android 149dpi 10.1″ 800 1280Sony Xperia E Dual Android 164dpi 3.5″ 320 480Tesco Hudl Android 242dpi 7″ 600 799Windows Surface Pro Windows 8 207dpi 10.6″ 1080 1920关于 Viewport 大家可以参考PPK大神的资料！

---