欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

解读交互稿模板:如何让设计稿更规范化?

发布时间:2017:11:15 20:38:21 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1317个文字,预计阅读时间4分钟
导语
交互稿应该包含哪些内容?如何搭建一个合理的交互稿结构?

  交互稿应该包含哪些内容?如何搭建一个合理的交互稿结构?

  

解读交互稿模板:如何让设计稿更规范化?

 

  PS:本文适用于移动端,Axure软件制作的文档型交互稿。

  交互稿应该包含哪些内容?

  如何搭建一个合理的交互稿结构?

  各个界面应该如何摆放?

  清晰易读的设计说明应该是怎样的?

  想必作为一个新人,很难完全弄清上面的问题。其实想要画出一份合乎规范的交互稿并不难,只需找前辈的稿子参考一下就能习得十之六七。但由于设计稿大多涉及企业机密,有着较强的产权属性,所以一般很难接触到。

  今天笔者将通过“解读一份交互稿模板”的方式,解决上面的几个问题。

  1. 交互稿应该包含哪些内容?

  交互稿是否只需包含设计方案即可?其实不然。交互稿兼具设计展示、上下游协作、过程记录、版本管理几种作用,所以交互稿一般至少具有以下几个部分的内容:

  

解读交互稿模板:如何让设计稿更规范化?

 

  封面:用于记录版本号、人员、时间等信息;

  更新日志:记录了交互稿更新的信息,方便他人查看,同时也保障了规范性;

  设计过程:包含需求信息、设计资料记录、设计过程记录三方面信息,目的是让自己的设计过程更加结构化,也方便以后回溯设计、总结设计;

  交互稿:交互稿的主体,内含流程图、界面图、设计说明等;

  废纸篓:用于存放废弃的页面,以防后期用到;

  2. 如何组织交互稿结构?

  2.1. 交互稿结构依赖于产品信息架构

  首先需要说明的是,“把所有界面放在一个画布上的无结构式交互稿”一定是不对的,这是很多新人经常会犯的错误。因为这种做法无法适应大型稿件,而且开发同学在错综复杂的网状设计稿中找信息,也是着实辛苦。

  交互稿的结构,应该根据产品信息架构搭建。比如下图是网易云音乐“本地音乐”模块的信息架构和交互稿目录,由产品信息架构可以推导出交互稿目录。可以发现这种一一对应的交互稿目录结构,非常清晰易懂。

  

解读交互稿模板:如何让设计稿更规范化?

 

  网易云音乐“本地音乐”模块

  2.2. 交互稿结构原理

  交互稿结构应当遵循“平台–页面–子页面”这样的原则(下图,这里说的页面不是界面,而是指“一页交互稿”)。每一个页面中承载的对象有2种,一种是单界面,另一种是界面流程(后文解释)。

  

解读交互稿模板:如何让设计稿更规范化?

 

  交互稿结构原则

  我们举个例子,假设有一个“简版的网易新闻”,,那么它的结构可能是下图这样的:

  

解读交互稿模板:如何让设计稿更规范化?

 

  交互稿结构示例

  什么是“单界面”、“界面流程”?单界面相对容易理解,比如上图中的“首页”,就只需要在交互稿的这一页中放置一张“首页”的线框图即可,也就是所谓的“单界面”。那么界面流程是什么呢?其实就是多个界面的串联图(如下图所示)

  

解读交互稿模板:如何让设计稿更规范化?

 

  界面流程

  什么情况下需要使用“流程界面”呢?所有APP都由界面组成,而界面上的元素可以归为3类:内容、入口、功能。“界面流程”一般用来阐述一项“功能”。究其原因,功能与内容和入口都不同,功能一般需要“一连串操作”,比如登录功能、搜索功能。此时我们再看上面的案例,就会很容易理解了。

  3. 每一页交互稿应该是怎样的?

  3.1. 每页交互稿的内容

  一般而言,每一页交互稿应当具备以下几项内容:

  

解读交互稿模板:如何让设计稿更规范化?

 

  单页交互稿示例

  页面标题:建议使用“固定在浏览器顶部”功能让页面标题常驻;

  界面标题:方便交互稿中的互相索引,比如“回到界面B状态”;

  界面:建议尺寸为360*640px,长页面也可自行延伸高度;

  设计说明:逻辑关系、元素状态、小微流程,都可以放在设计说明中;

  流程线:说明界面间逻辑关系,可使用软件自带流程线;

  链接:指向其他页面,比如支线流程,开发同学阅读起来会很方便;

  作者信息:这是设计师的落款,同时也方便他人联系设计师;

  3.2. 网格系统的应用

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:设计沉思录:一次由设计发起的运营探索

下一篇:成为UX设计师:你需要知道的六个基本步骤

  • 18900 文章总数
  • 2374193访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信