使用Axure制作「今日头条」高保真原型

题外图：摄于2019.3.10

引言

本文一方面用于完成笔者的实验报告——原型设计
另一方面给大家介绍Axure基本操作，以头条为例，制作一款高保真原型
因时间紧迫，故大部分内容使用截图，如有时间更推荐原创
出现错误，烦请见谅

环境与工具

• Mac OS
• Axure

分析路径

首先使用Xmind制作出今日头条的交互功能框架，按照路线制作原型会让我们的思路更清晰，起到事半功倍的效果

交互路径

前期工作

• 截取手机主界面、今日头条首页、西瓜视频、小视频、我的几大模块
• 找到一个手机外壳png素材

第一部分：实现基本跳转

• 将手机外壳与桌面重叠放置，调整好尺寸
• 在今日头条app处建立等大小的热区
• 设置交互：鼠标点击时，逐渐显示Slogan-等待1500毫秒-当前窗口打开首页

手机桌面
交互功能

• 以此类推，将首页下方菜单栏分别建立四个热区，对应跳转至四个界面，同时将四个热区打包成组，分别用在四个界面下方

  
  四个热区

打包组合

至此，基本的跳转功能已经实现
点击发布、点击编辑资料、频道筛选等功能与点击切换界面制作方式一致，在此不多赘述

第二部分：实现内容滑动

• 对滑动内容分别截图再拼接，注意不要出现断层
• 在首页屏幕中央建立动态面板first，尺寸设置和内容滑动模块同样大小
• 在动态面板界面二次建立动态面板second，尺寸设置和内容整个篇幅同样大小，并置入滑动内容图

• 设置交互功能：secong动态面板垂直移动

  
  first

second 设置交互功能

还有些细节暂未处理

• 拖动时没有边界限制

我们建立两个热区，命名hot1、hot2,分别位于内容模块上下边界

hot1 hot2

对second动态面板设置交互条件：如果边界未接触则移动回原位

滑动条件

• 拖动时上方出现刷新按钮，只需在内容模块下放置按钮图片即可

至此，内容拖动部分已完成，频道滑动等功能制作方式一致，不多赘述

第三部分：细节功能

搜索栏

• 首先点击搜索框热区跳转至搜索界面

• 搜索界面处放置文本框，类型设置为Text，可添加初始灰字

  
  搜索热区

文本框属性

频道切换

• 以 关注 和 推荐 为例，同时设置热区，注意位于最顶层，设置点击显示对应的界面，另一个界面隐藏

  
  关注与推荐频道热区

对应切换隐藏显示

至此，今日头条大部分功能已经实现。

总结

• 在制作过程中，务必要注意热区，图层的上下级优先关系，否则会出现链接错误或无法点击的情况
• 在时间充裕的情况下，尽可能找更多的素材来制作原型
• 如有问题欢迎评论交流