网站设计说明书axure(网站设计说明书功能需求分析)

网站设计 43
今天给各位分享网站设计说明书axure的知识,其中也会对网站设计说明书功能需求分析进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、怎么学Axure网站原型设计的问题

今天给各位分享网站设计说明书axure的知识,其中也会对网站设计说明书功能需求分析进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

怎么学Axure网站原型设计的问题

学习axure rp可以分为以下几个阶段:

一、新手级:

是指刚刚接触原型设计,这个时期主要是打基础。先熟悉AxureRP的工作台,有哪些功能及组件,以及一些基本的操作,弄清楚每个组件是干什么用的。

在新手阶段,主要还是以熟悉为主,可以去网上找点前人总结的经验。再者就是要自己尝试着去用一遍里面的功能,可以做一些简单的页面原型,可以是没有任何交互的,也可以是带点交互的。

二、学徒级:

等到熟悉了AxureRP的所有功能之后,要开始实际应用其去设计一般的中低保真的原型了。光知道组件怎么用了还不够,还要配合交互事件,交互动作,条件判断,甚至是变量一起去实现某个交互的功能。如果说新手阶段是打基础的阶段,那么这个阶段其实就是一个融会贯通的过程,把所掌握的知识活学活用,真正的结合起来去实现一个整体的原型设计要求,这样才能掌握AxureRP的核心功能。

这个阶段的学习前期主要是模仿为主,首先要能看懂别人做的原型实例,看看人家是怎么设计的,然后依样画葫芦,自己动手做一个。

三、大师级

AxureRP自身所带的交互事件和动作已经能实现现有产品层面上的大部分交互效果,只要做基本上都可以用原型来实现。这个阶段可以试着做一些实现起来比较困难的实例,并可以尝试着开始做一些整站或者整体产品的效果,前面都大多停留在单个页面,单个实例的原型设计上,这里就要求能完成更整体的效果,出来的是一个产品的完整的原型。

最后要说明一下的就是,AxureRP只是一种原型设计工具而已,做交互设计最重要的还是想法,工具只是用来帮实现想法的。不必过于追求技术,不必过于追求视觉表现。把握好整个产品方向的同时,应专注于交互流程、页面内交互、布局结构的创新和优化。按照上面坚持下去,学习axure不在难!

利用axure进行响应式自适应网站的设计

在axure 8发布以后,可以利用几项技术(axure自动生成自适应html、前后端分离、响应式网站设计、restful接口、json或xml等)进一步简化网站的开发,该设计模式的主要流程如下:

1. 产品经理利用axure设计原型。

2. 原型讨论定型后由UI人员设计图标,更新到axure原型中。

3. 由axure生成 自适应的响应式网站 设计的html文件。

参考:

注意:axure发布项目生成html时,在左侧的“ 移动设备 ”这个设置页,需要 勾选“包含视口标签”,不勾选“禁止页面垂直滚动”,宽度设置为“device-width”, 高度留空不设置,初始缩放倍数绝对不能设置 ,最小缩放倍数设置为“0.1”,最大缩放倍数设置为10,允许用户缩放留空不设置 ,ios部分可以不理默认即可。另外需要 axure 8以上版本才能普遍适配手机 屏幕。

4a. 前端开发人员全盘使用上面生成的html文件、资源文件、axure的js文件,在各个页面上以前后端分离方式添加业务逻辑的实现(比如在html中加入jquery的ajax,和后端交互数据)。

4b. 后端开发人员设计和实现业务逻辑和前后端接口(4b可以和3、4a步骤同步进行),比如前后端使用restful的json封装作为前后端接口的数据交互。

5. 单元测试、集成测试、灰度测试,bug修复,发布上线。

该模式问题 : 一旦axure原型有修改,前端怎么能更快适配该修改(现在是文件比较方式,类似git的merge)。

Axure教程 | 初级电子商务网站设计

从头开始学习创建一个电子商务网站

本教程将引导您逐步构建一个电子商务网站,在创建过程中,将使用Axure原型的多个核心功能:如母板、动态面板。我们将从头开始整个创建整个过程。

部件使用:图片、矩形、按钮形状、图片热区、动态面板、占位符、文本框、文本面板

交互事件:Onclick

动作:“移动面板”、“隐藏面板”、“设置面板状态为指定状态”、“将面板置于顶层”、“将面板置于底层”、“等待时间(毫秒)”

01

创建页首母板

1

创建新母板

第一步,创建一个有LOGO和导航的页首。在多个页面中都会使用到这个页首,所以将使用母板来制作页首。

在母板窗口,点击“添加母板”按钮。轻点新建的母板名称并修改名称为“Header”。

双击Header母板打开编辑窗口,在线框图窗口的顶部标签页,可以查看正在编辑的页面和母板。

如果标签页显示,正在编辑的页面为“Header”,那么Header母板己经被打开。

2

添加Logo图片

第二步从部件窗口拖图片部件到线框图中,双击图片部件导入压缩包中的“Logo.png”图片。

导入提示是否自动调整对象大小,如果需要自动调整就选择“确定”。图片会保持原大小被导入,而不按部件的大小导入。

3

添加导航按钮

接下来,在Logo下,添加3个按钮形状部件。

向下拖动部件窗口下拉条,找出按钮形状部件(不是按钮部件)。拖3个按钮形状部件到线框图。双击每个按钮部件修改部件文本,并修改部件标签内容分别为:Men’s, Women’s, 和Sale.

全选3个按钮形状,使用工具栏中的“线条颜色”设置按钮边线为白色(鼠标点击并在按钮上拖出一个选择区,即可全选3个按钮)。

4

添加水平线

添加一个水平线,将页首和下面的内容分开。

拖动"水平线"部件到线框图中,拖拽水平线左右两端的修改尺寸的控制柄,可以调整水平线的长度。用工具栏中的“线条样式”、“线条颜色”编辑样式为点虚线、颜色为蓝色。

5

在Home页面添加页首

从母板窗口拖页首母板到Home页面。定位在X:200;Y50

母板默认有粉色的遮罩,如果要关闭遮罩,可以在主菜单栏选择“线框图-显示母板遮罩”。

02

创建产品缩略图和“快速查看”按钮

1

添加产品缩略图

Home页面,拖入图片部件并交图片部件放在页首母板的下面。

双击部件导入 “Jeans1-1.png”文件,添加第二个图片部件,导入“Jeans2-1.png”文件。

按住shift键并拖拽图片一角,调整图片比例为宽150;高225。

2

添加“快速查看”按钮

拖一个按钮形状到第一张产品图片上,双击按钮形状修改文本为“快速查看”

“快速查看”按钮只有在鼠标经过图片时才会显示。所以要将图片转换为动态面板才可以动态的显示或隐藏按钮。右键按钮形状,快捷菜单选择“转换-按换为动态面板”,将图片放入动态面板中。

3

编辑名称并隐藏快速视图按钮

在动态面板管理窗口,修改动态面板名称为:QuickViewButton。修改名称可以让面板在设置交互时更易辨认。

右键动态面板,快捷菜单选择“编辑动态面板-设为隐藏”,将按钮设置为默认隐藏。这时动态面板会变成黄色。

4

动态显示按钮

使用“鼠标移入时”事件,设置当鼠标经过产品图片时显示“快速查看”按钮。

点击产品图片,在部性属性面板窗口的交互标签,双击“鼠标移入时”事件添加用例,打开用例编辑器。

5

添加“显示快速查看按钮”动作

左边栏中,选择“显示面板”。然后在右边栏中选中QuickViewButton复选框,配置显示的面板,点击确认。

使用鼠标移出时事件隐藏“快速查看”按钮,交互会出现错误。因为当鼠标经过“快速查看”按钮时,鼠标移出时事件就被启动,“快速查看”按钮将被隐藏。

可以在产品图片四边环绕图像映射区,再在图像映射区域上使用“鼠标移入时”事件,就可以隐藏“快速查看”按钮了。

图片映射区是可以设置交互和注释的透明区域。

6

创建图片“热区”

在产品图片上拖入一个图片热区,图片热区的四个边要比产品图片的四个边留多10px。

右键快捷菜单,选择“顺序-置于底层”,将图片热区放到产品图片和动态面板的下面。

7

使用图片热区隐藏动态面板

选中图片热区,双击部件属性窗口交互标签中的“当鼠标移入时”事件。

用例编辑器中,左边栏选择“隐藏面板”动作,右边栏中点选QuickViewButtont复选框,选择确定。

03

详细产品弹出面板和图片播放器

1

创建详细产品弹出面板

添加矩形部件到线框图,修改矩形大小为:600*450,将矩形放在线框图页面的中间。

2

转换为动态面板并设置为隐

当“快速查看”按钮被点击时,详细产品弹出面板要动态的显示,所以将详细产品弹出面板转换为动态面板。

右键矩形,快捷菜单选择“转换-转换为动态面板”,并将转换的动态面板命名为“ProductPopup”。

在“快速查看”按钮被点击前,详细产品弹出面板要被隐藏,所以右键动态面板,快捷菜单选择“编辑动态面板-设为隐藏”。

3

快速查看按钮添加显示面板

现在给快速查看按钮添加交互,当快速按钮被点击时,显示详细产品弹出层.

动态面板管理窗口,双击QuickStartButton面板下的State1(状态1),打开快速查看按钮编辑页,选择“快速查看”按钮,在Onclick事件中添加用例,设置用例动作“显示面板”,并将显示面板配置到显示ProductPopup。

4

关闭按钮添加隐藏面板动作

下一步,在“详细产品弹出面板”添加关闭弹出面板按钮

动态面板管理窗口,双击ProductPopup面板下的State1(状态1)打开状态编辑页,添加占位符在右上角。调整尺寸为:40*40。提示:在工具栏可以编辑部件尺寸。

placeholder面板OnClick事件用例,用例设置“隐藏ProductPopup”动作。

5

添加产品大图

在这步中,添加当点击缩略图时,产品图片播放的动画视图。

编辑详细产品弹出面板,拖入图片部件到线框图,双击导入“Jeans1-1.png”。将图片放到左上角。

6

添加产品缩略图

拖入3个图片部件到图片的下方,导入Jeans1-1, Jeans1-2, 和Jeans1-3,做为缩略图。拖拽图片边框调整图片尺寸时,按住shift键,保存图片按比例缩放。

7

建立图片播放动画窗口

我们下面将使用到一个叫“开窗”的技术,即我们将一个动态面板放置到另一个动态面板内。利用外部面板的尺寸,控制只显示里面动态面板的一部分。

右键产品大图,快捷菜单选择“转换-转换为动态面板”,将产品大图转换为动态面板。在动态面板编辑器中,重命名面板名称为““SlideshowWindow”。注意:部件属性窗口的标签栏也自随着面板重命名自动修改了名称。

8

将多产品图片转换为动态面板

动态面板编辑器中,打开SlideshowWindow面板的State1(状态1),在Jeans1-1图片的右边添加Jean1-2和Jeans1-3图片。

要使用这三张图片在窗口中动态的切换,我们将三张图片转换为动态面板。

全选三张图片(按住shift键点击每张图片,或者点击拖动鼠标圈选所有图片)右键,快捷菜单选择“转换-转换为动态面板”,将三张图片转换为动态面板。在动态面板管理窗口重新命名动态面板为“SlideshowContent”。

9

添加OnClick事件移动动态面板

下一步,添加交互让SlideshowContent面板从左边移动到右边。

返回ProductPopup面板,点击第一个缩略图添加OnClick事件用例。在用例编辑器中,选择"移动面板"动作,设置移动面板SlideshowContent到坐标:X0;Y0。注意:要设置为移动到(绝对定位),而不是移动在(相对定位)。然后设置动画“摆动”,时间500ms。

10

重复设置另外两个缩略图

在另外两个缩略图上重复设置Click事件。因为图片的宽度是240px,所以第二个缩略图的事件动作设置为“移动SlideshowContent到 -240x,0y”。第三个缩略图动作设置为“移动SlideshowContent到-480x, 0y”。

如果想查看交互效果,可以生成原型,图片播放动画己经可以显示了。

04

“加入购物车”

1

创建“加入购物车”按钮

拖入按钮形状部件到弹出面板的右下角。在工具栏将按钮颜色设置为蓝色,字体颜色设置为白色。按钮形状文本修改为“Add to Cart”。

2

创建购物信息弹出面板

下一步,创建点击“Add to Cart”按钮时显示的“处理中”和“己添加”提示信息。

拖一个矩形部件到弹出面板的中间。设置背景色为淡灰色;字体颜色为黑色。编辑矩形文本为“Processing...(处理中)”。

右键矩形部件,快捷菜单中选择“转换-转换为动态面板”。右键动态面板,快捷菜单选择“编辑动态面板-设为隐藏”

3

添加“Added to Cart”状态

命名动态面板为“MessagesPopup”,并设置状态1名称为“Processing(处理中)”。

右键“Processing”状态,快捷菜单选择“添加状态”,添加状态2,重新命名状态2为“AddedToCart”。

4

创建“added to cart”信息

打开 “Processing”状态,右键点击矩形,快捷菜单选择“复制”。下一步

打开“AddedToCart”状态,右键空线框图,快捷菜单选择“粘贴”。

编辑按钮属性 - 设置当确认选项己经被添加到购物车时,按钮填充色为绿色。双击编辑按钮文本为“Successfully added to Cart(己成功加入购物车)”。

5

设置加入购物车交互

下一步,设置交互:点击“add to cart(加入购物车)”按钮,显示“Processing(处理中)”1秒钟,再显示“Added to Cart(己成功加入购物车)”1秒钟,然后隐藏弹出面板。

返回ProductPopup面板,选中““Add to Cart(加入购物车)”按钮。双击OnClick事件添加用例,打开用例编辑器。在这个用例中要添加5个动作。

6

添加显示/隐藏购物信息弹出面板动作

1.设置“MessagesPopup”面板到 ”Processing”状态。在右下角,在进行动画的下拉选单选择“淡入淡出”。注意:“设置面板到指定状态”动作将自动显示面板,所以不需要再添加“显示面板”动作。

2.等待1000毫秒,这个动作设置第一个面板在第二个运作发生前,持续显示1秒。1000毫秒=1秒。

7

切换购物信息弹出面板状态

3.设置面板状态到“AddedtoCart”。设置“MessagesPopup”面板从“Processing”状态切换到“AddedtoCart”状态。勾选“MessagesPopup”复选框,在复选框下方的“选择状态”下拉选单中,选择“AddedtoCart”状态。

4.再次等待1000毫秒。

8

添加隐藏购物信息弹出面板动作

5.隐藏面板。勾选MessagesPopup复选框,动画选择“淡入淡出”。

点击“确定”。生成原型并测试,新手电子商务网站制作教程部分介绍完毕。

Axure 设计网站原型时,网站宽度和高度怎么设置比较好

【页面尺寸】网页的尺寸受限于两个因素:一个是显示器屏幕(显示器现在种类很多,17寸为主流,正在朝19寸及宽屏的方向发展,但目前也有为数不少的15寸显示器)另一个是浏览器软件(我们常用的IE、遨游、Friefox等)

【页面高度】高度是可以向下延展的,所以一般对高度不限制。对于一屏来说一般没有一个固定值,因为每个人的浏览器的工具栏不同,所以高度没有确切值。

【页面宽度】

1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005

3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001

如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点。也方便做一些浮动层的设计。如果是800的分辨率一般都设成770。但也有设成760的。这些需要明白并且牢记,不然很可能做出来不符合浏览器要求。不过一般我们都会设定的再稍微小一点,因为有些浏览器加了插件或者其他的东西宽度会有变化,所以 800的分辨率一般设定760左右,1024的设定990左右。

网页设计标准尺寸参考:

1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。

2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间,就不会出现水平滚动条和垂直滚动条。

3、页面长度原则上不超过3屏,宽度不超过1屏,每个标准页面为A4幅面大小,即8.5X11英寸。

4、全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px (另外120*90,120*60也是小图标的标准尺寸 )

5、每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K

【网页广告尺寸】

1、120*120,这种广告规格适用于产品或新闻照片展示。

2、120*60,这种广告规格主要用于做LOGO使用。

3、120*90,主要应用于产品演示或大型LOGO。

4、125*125,这种规格适于表现照片效果的图像广告。

5、234*60,这种规格适用于框架或左右形式主页的广告链接。

6、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。

7、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。

8、88*31,主要用于网页链接,或网站小型LOGO。

【广告形式 像素大小 最大尺寸】

BUTTON 120*60(必须用gif) 7K;215*50(必须用gif) 7K

通栏 760*100 25K 静态图片或减少运动效果;430*50 15K

超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果

巨幅广告 336*280 35K;585*120

竖边广告 130*300 25K

全屏广告 800*600 40K 必须为静态图片,FLASH格式

图文混排 各频道不同 15K

弹出窗口 400*300(尽量用gif) 40K

BANNER 468*60(尽量用gif) 18K

悬停按钮 80*80(必须用gif) 7K

流媒体 300*200(可做不规则形状但尺寸不能超过300*200) 30K 播放时间 小于5秒60帧(1秒/12帧)

【网页中的广告尺寸】

1.首页右上,尺寸120*60

2.首页顶部通栏,尺寸468*60

3.首页顶部通栏,尺寸760*60

4.首页中部通栏,尺寸580*60

5.内页顶部通栏,尺寸468*60

6.内页顶部通栏,尺寸760*60

7.内页左上,尺寸150*60或300*300

8.下载地址页面,尺寸560*60或468*60

9.内页底部通栏,尺寸760*60

10.左漂浮,尺寸80*80或100*100

11.右漂浮,尺寸80*80或100*100

关于网站设计说明书axure和网站设计说明书功能需求分析的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫码二维码