不会编程?Axure一样可以做网站

说起Axure,做产品的朋友再熟悉不过了,它是我们在日程工作中最常见的原型制作软件之一,今天分享的文章,主要是教大家如何使用Axure打造简单的个人网站,不会编程我们依然可以做网站。接下去将分为几个步骤去阐述:1. 这些我们必须知道的小知识axure是可以生成html文件的,这为我们使用它来制作网站提供了可能性axure只能搭建小型的个人网站 ,他不具备数据库,比较适合做展示类的网站和普通网站构建一样,我们需要购买域名和购置虚拟服务器2...

不会编程?Axure一样可以做网站

说起Axure,做产品的朋友再熟悉不过了,它是我们在日程工作中最常见的原型制作软件之一,今天分享的文章,主要是教大家如何使用Axure打造简单的个人网站,不会编程我们依然可以做网站。

接下去将分为几个步骤去阐述:

1. 这些我们必须知道的小知识

  • axure是可以生成html文件的,这为我们使用它来制作网站提供了可能性

  • axure只能搭建小型的个人网站 ,他不具备数据库,比较适合做展示类的网站

  • 和普通网站构建一样,我们需要购买域名和购置虚拟服务器


  2. 利用xmind思维导图,对我们要构建的网站进行知识整理

举个例子,我构建的是一个小型个人展示站

包含以下主要内容:网址导航、常用工具、实用资源、案例展示,通过思维导出对其内容进行

整理如下图所示:

不会编程?Axure一样可以做网站

3. 整理好了内容所需,接下去我们进入制作部分

因为我们是利用Axure去制作网站,在我们平时工作的流程常常是,原型-设计-前端-开发,而这里我们只需进行原型和设计,这里将不再有前后关系,为了节约时间,我们可以把Axure当做设计工具,直接进行页面设计,里面所需的图片素材可以用ps辅助设计。

创建一个项目文件夹用来整理此网站涉及到的全部资源素材

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

对网站全局配色、字体、样式进行布局

采用的是蓝色调,可以看下我的主色、辅助色的配色如下

不会编程?Axure一样可以做网站

利用母版进行top导航的设计

导航布局如下,采用了顶部导航的方式,设置了动态面板并将此转化成母版用于多个页面

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

设置导航频道的点击效果与跳转

如下图所示,有悬停效果和点击跳转的设置

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

网址导航栏目的左侧菜单设置,滑块移动位置的y坐标按具体位置设置,每个元素都要设置

不会编程?Axure一样可以做网站

左侧导航在滚动时触发具体栏目类别,采用的是热区范围来触发,当窗口滚动时触发相应的类别选中

不会编程?Axure一样可以做网站

利用栅格系统对网站进行布局

布置完毕将栅格去除(紫红色是1200px宽度的边界)

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

每个元件尽可能的规范,再进行下一步

拿网址导航页做示例,每个单元模块标题,网址卡片、左侧导航的排布尽可能规范统一,立马包含了各种元素的基本规范如:字体大小、颜色、宽度、悬停交互效果点击跳转效果

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

合理利用中继器做页面的数据关联

常用工具与实用资源页面,采用了中继器来制作,在中继器的微型数据表中,插入对应字段后,关联每项参数的内容(对元件名称进行命名),以后增加一条数据对应改变其内容即可。

如下图包含了图片,标签,标题,详情描述几个内容,在中继器中就要有相应的字段来进行控制

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

4. 制作完毕,接下去要解决的是如何把生成的网站,能让其它人进行访问

(1)我们需要一个域名,可以到阿里云万网去购买https://wanwang.aliyun.com/,我选择的域名是uedart.com的域名;

(2)我们还需要一个服务器,我选择的是海外云虚拟机,不需要备案可以在阿里云进行购买;

(3)都准备好之后,我们要做的是按照阿里云的步骤进行虚拟机的设置布局,下载Filezilla进行关联,将我们axure生成的文件进行上传,上传之后,我们再进行域名的解析,即可通过域名对我们的网站进行外网访问。

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

5. 可能遇到的问题,工具栏明明在生成的时候关闭了,上传之后还是出现了

不会编程?Axure一样可以做网站

可以将index和start的html删除,复制第一个页面的html改名成index重新上传即可,查看我制作完毕的网址http://uedart.com/#g=1&p=网址导航&c=1

不会编程?Axure一样可以做网站

不会编程?Axure一样可以做网站

总结

至此通过以上5个步奏,我们利用Axure完成了一个小型网站设计与制作,当然这并不是一个传统意义上的网站开发,只是借此向大家介绍下,利用Axure的html生成,我们可以简单的处理一个网站的制作,如果只是个人的网站,且不需要过多的复杂功能,此方法足以满足各位的需求,大家也可以利用这样发方式来制作自己的网站。

谢谢大家的观看!

本文作者:时光若刻

不会编程?Axure一样可以做网站

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35561/

(0)
交互精选交互精选
上一篇 2018-03-04
下一篇 2018-03-04

相关推荐

  • 做你家孩子,用户体验真差

    静静的读书,岁月不会骗你回复“晚安”,告诉你一个真相上周末去一个前辈家做客,她儿子才八岁。我去的时候他坐在书房写作业。看到我来了,前辈立马把他召唤出来,让他弹钢琴给我看。他缩着脖子在钢琴前坐下,小心翼翼的弹完了整首曲子,然后在前辈的示意下,回房间继续做作业。哪有一点八岁孩子的蓬勃朝气!前辈却非常得意,说:“我这个儿子,非常争气听话。他每周末要学钢琴、学画画,上两个少儿英语培训班。虽然他不乐意,但我不能让他输在起跑线上。”“我知道比起别的...

    2018-04-18
  • SketchOSM - 从现在开始丰富三维建筑地理信息吧

    SketchOSM是由出品PlaceMaker(一键三维城市)的团队最新出的一个插件,它可以让你在你设计场地的周边地区创建3D参数建筑模型。通过 SketchOSM 创建的模型数据可以直接发布到 OpenStreetMap 网站上,这是一个庞大的可自由存取和编辑的地理信息数据库,可以算是地理信息界的维基百科。之前紫天在使用 PlaceMaker 插件的时候所遇到的一个最大问题就是国内的三维建筑信息太少,有的话也非常不准确。现在有了Ske...

    2018-03-15
  • 双11期间,阿里巴巴UED的设计师都在做什么?

    双11 忍不住剁手的冲动?因为你所有的购物喜好,心理,行为和最终的选择,都被一个神秘组织认真研究过。今天我们拉开幕布,看看这个叫阿里巴巴UED的顶尖设计团队。在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然...

    2018-01-31
  • 交互设计中的“无意识错误”:如何帮助用户防错?

    在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。在讨论用户错误时,一个重要问题是在什么情况下指出用户的错误。「用户错误」这个词似乎暗示用户做错了某些事情,但不仅如此,设计师也犯下了错误,因为他们让用户轻易的做出了错的行为。所以,解决用户错误的方法不是指责用户,让用户再认真一些,或者给他们更多的指导练习,而应该是重新设计软件,让犯错变得困难。两类用户错误在讨论如何避免犯错之...

    2018-03-02
  • 像用户体验设计师那样思考

    [国外设计第158期][图片]插画来自Crafticons培养探索未知的心态(持续)学习用户体验是最需要技巧的事情。因为这不是标准教育中的某个正式课题。它总是以某种神秘不可预测面貌示人,直到你在设计、研发、市场推广(或者其他创意领域)中遭遇到用户体验的具体概念。虽然在用户体验方面

    微信热点 2018-04-18
  • 【技术篇】AR应用交互设计时需要思考的3个问题

    首先我们要了解,AR增强现实通过实时的在现实环境中渲染虚拟数字信息,通过现实和虚拟的结合来帮助用户完成某项任务和活动。AR中的虚拟数字信息通过与现实环境以及用户的实时互动来向用户传递有价值的信息。相比“传统的”2D层面的交互(手机app,web等),AR可支持的是更加丰富的三维层面的交互方式;并且这种方式不再仅限于主动式的交互(点击,滑动)方式,它还包括用户行为的被动触发。本文将向大家介绍一些典型的AR应用以及它们的交互方式,并且和大家...

    2018-03-29
  • 交互设计

    产品设计流程和方法产品设计4大原则交互设计及基本原理(简约4策略)交互设计的作用【未完,待续~~~】

    2018-01-31
  • 四个小故事 每一个都是“极致用户体验”的用心诠释(上)

    古老的印第安人有个习惯当他们移动得太快的时候会停下脚步,安营扎寨耐心等待自己的灵魂前来追赶而身为现代人的我们在开启一段旅程前最重要的事情莫过于挑选一家“想客户所想”的旅行社只有这样才能安心这次我们透过四个小故事向你娓娓道来为什么说驴妈妈客服是“极致用户体验”的先行者即便是大家族,也“一个都不能少”王女士来自苏州,今年40多岁,她十分看重亲情,每隔一段时间,就会带上全家出国旅游——由于出身于一个大家族,王女士每次在驴妈妈报团,几乎没有少于...

    2018-04-11
  • 交互设计的闭环体验

    交互闭环体验的定义交互设计的闭环体验体现在产品的每个功能的细节上,产品可以看作是一整套交互的集合。一般只涉及一种使用场景的交互,只体现为一种功能,且只完成一件事。比如:修改设置、上传文件、设定闹钟、更改密码、打开家用电器、登录、设置状态消息、收藏等。交互设计的闭环体验主要由4方面构成:触发控件:交互闭环的起始点设计规则:交互闭环所遵循的交互方式信息反馈:用户与产品的互动过程关闭(循环)模式:交互闭环过程的结束(循环)模式交互闭环体验的定...

    2018-02-14
  • 同样是券商,为什么你家APP用户体验不好?原来还有这一招...

    券业新力量 | 服务所有券业人的梦想当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放As Long As You Love MeBackstreet Boys - Backstreet's Back导言洞察用户喜好,吸引用户,留住用户,让用户满意,是所有服务业的本质。本文以行为数据切入,从三大方面、两个案例,全方位解析如何利用行为数据提升证券App用户体验。用户体验(User Experience)最早被广泛认知和提及,是在上...

    2018-03-30