题外图：摄于2019.3.10
引言
本文一方面用于完成笔者的实验报告——原型设计
另一方面给大家介绍Axure基本操作，以头条为例，制作一款高保真原型
因时间紧迫，故大部分内容使用截图，如有时间更推荐原创
出现错误，烦请见谅
环境与工具
- Mac OS
- Axure
分析路径
首先使用Xmind制作出今日头条的交互功能框架，按照路线制作原型会让我们的思路更清晰，起到事半功倍的效果
交互路径
前期工作
- 截取手机主界面、今日头条首页、西瓜视频、小视频、我的几大模块
- 找到一个手机外壳png素材
第一部分：实现基本跳转
- 将手机外壳与桌面重叠放置，调整好尺寸
- 在今日头条app处建立等大小的热区
- 设置交互：鼠标点击时，逐渐显示Slogan-等待1500毫秒-当前窗口打开首页
手机桌面
交互功能
-
以此类推，将首页下方菜单栏分别建立四个热区，对应跳转至四个界面，同时将四个热区打包成组，分别用在四个界面下方
四个热区
打包组合
至此，基本的跳转功能已经实现
点击发布、点击编辑资料、频道筛选等功能与点击切换界面制作方式一致，在此不多赘述
第二部分：实现内容滑动
- 对滑动内容分别截图再拼接，注意不要出现断层
- 在首页屏幕中央建立动态面板first，尺寸设置和内容滑动模块同样大小
- 在动态面板界面二次建立动态面板second，尺寸设置和内容整个篇幅同样大小，并置入滑动内容图
-
设置交互功能：secong动态面板垂直移动
first
second
设置交互功能
还有些细节暂未处理
- 拖动时没有边界限制
我们建立两个热区，命名hot1、hot2,分别位于内容模块上下边界
hot1
hot2
对second动态面板设置交互条件：如果边界未接触则移动回原位
滑动条件
- 拖动时上方出现刷新按钮，只需在内容模块下放置按钮图片即可
至此，内容拖动部分已完成，频道滑动等功能制作方式一致，不多赘述
第三部分：细节功能
搜索栏
- 首先点击搜索框热区跳转至搜索界面
-
搜索界面处放置文本框，类型设置为Text，可添加初始灰字
搜索热区
文本框属性
频道切换
-
以 关注 和 推荐 为例，同时设置热区，注意位于最顶层，设置点击显示对应的界面，另一个界面隐藏
关注与推荐频道热区
对应切换隐藏显示
至此，今日头条大部分功能已经实现。
总结
- 在制作过程中，务必要注意热区，图层的上下级优先关系，否则会出现链接错误或无法点击的情况
- 在时间充裕的情况下，尽可能找更多的素材来制作原型
- 如有问题欢迎评论交流
网友评论