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

使用Axure制作「今日头条」高保真原型_第1张图片
题外图:摄于2019.3.10

引言

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

环境与工具

  • Mac OS
  • Axure

分析路径

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


使用Axure制作「今日头条」高保真原型_第2张图片
交互路径

前期工作

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

第一部分:实现基本跳转

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

使用Axure制作「今日头条」高保真原型_第3张图片
交互功能
  • 以此类推,将首页下方菜单栏分别建立四个热区,对应跳转至四个界面,同时将四个热区打包成组,分别用在四个界面下方


    使用Axure制作「今日头条」高保真原型_第4张图片
    四个热区
使用Axure制作「今日头条」高保真原型_第5张图片
打包组合

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

第二部分:实现内容滑动

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


    使用Axure制作「今日头条」高保真原型_第6张图片
    first
使用Axure制作「今日头条」高保真原型_第7张图片
second
使用Axure制作「今日头条」高保真原型_第8张图片
设置交互功能

还有些细节暂未处理

  • 拖动时没有边界限制

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


hot1
使用Axure制作「今日头条」高保真原型_第9张图片
hot2

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


使用Axure制作「今日头条」高保真原型_第10张图片
滑动条件
  • 拖动时上方出现刷新按钮,只需在内容模块下放置按钮图片即可

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

第三部分:细节功能

搜索栏

  • 首先点击搜索框热区跳转至搜索界面
  • 搜索界面处放置文本框,类型设置为Text,可添加初始灰字


    使用Axure制作「今日头条」高保真原型_第11张图片
    搜索热区
使用Axure制作「今日头条」高保真原型_第12张图片
文本框属性

频道切换

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


    关注与推荐频道热区
使用Axure制作「今日头条」高保真原型_第13张图片
对应切换隐藏显示

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

总结

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

你可能感兴趣的:(使用Axure制作「今日头条」高保真原型)