BACK >
网页设计稿如何脱颖而出?
作者:吾诺瀚卓    浏览次数:199    日期:2017-11-21

我提交了网页设计稿,可为什么被退回来了?

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

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

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

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

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

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

网页设计稿如何脱颖而出?

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

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

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

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

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

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

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

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

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

网页设计稿如何脱颖而出?

a 网易云音乐「本地音乐」模块

2. 交互稿结构原理

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

网页设计稿如何脱颖而出?

a 交互稿结构原则

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

网页设计稿如何脱颖而出?

b 交互稿结构示例

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

网页设计稿如何脱颖而出?

c 界面流程

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