由于平台限制,只在微信公众号@论科技(LunKejiCOM)发私信才能正确获取资料!
建一个网站(二)——原型设计
煮酒论科技
2024-05-04 14:06:14
0

图片

上一节讲了怎么做一个简单的网站

简单到只有一行字:“你好,这是我的第一个网站”

这个网站也太简单了

我想增加一些内容,展示我的个人信息

有图片、有文字、还有社交平台的联系方式

要怎么做呢?

建高楼大厦有设计图纸

建筑工人再根据图纸施工

建网站跟建高楼大厦类似

我们可以先用原型设计软件,如Axure设计一个网站原型

然后再由研发人员实现网站的各种功能

Axure是专业的原型设计软件

它不仅可以用来设计交互性的网站

也可以设计手机APP

是产品经理设计原型的主流工具

Axure软件主界面如下图所示

图片

主要分为六大区域:菜单栏、工具栏、页面、元件、画面、交互

设计原型就像堆乐高积木一样

Axure中的<元件>区提供了很多组装的元件

你可以把其中的元件拖到<画布>

在画布中随意摆放各种元件的位置

你还可以在<工具栏>对元件进行快速排版

<交互>中设计元件的各种交互动作

<页面>是对画布的分类,规划原型的结构

<菜单栏>中是更多原型相关功能的设置

做网站主要用到的元件有“图片”、“文本标签”

交互动作主要是鼠标点击跳转

先在<页面>中新建一个页面,命名为“主页”

图片我们先为网站建个导航栏

在<元件>中拖几个“文本标签”到<画布>中

更改成导航的名字

如首页、科技、汽车、摄影、编程、教程、软件

图片

大家可以根据自己做的网站设计网站导航栏

给网站LOGO预留一个位置

打算在导航栏左边放置一个网站LOGO

从<元件>中拖一个“占位符”输入文字LOGO

在工具栏中设置占位符的大小为LOGO的大小

图片

网站的导航栏就已经做好了

图片

在菜单栏中选择<发布>,然后选择<预览>

就可以在浏览器中预览我们设计的网站了

导航设计好之后接下来设计主页的主要内容

我业爱好喜欢摄影

所以我想展示我拍摄的照片

从<元件>中拖入两个“图片”元件

照片上还要写作品的名字

再从<元件>中拖入两个“文本标签”

左右排版两张图片,并设置每张图片大小为400*300

图片

网站底部留社交媒体的链接

社交媒体网站的LOGO可以从其官网上下载粘贴到Axure中

链接跳转属于交互动作

选中社交媒体的LOGO,在<交互>面板中点击“交互”,切面到交互选项

图片

点击“单击时→打开链接”

社交媒体是一个URL,所以选择“链接到URL或文件路径”

图片

输入你的社交账号主页的网页地址

并点开“更多选项”,在“打开在”选项中选择“新窗口/新标签”

图片

图片添加了链接后在画布会显示一个闪电的标志

图片

在浏览器中预览点击该图片浏览器就会打开链接的网址

最后在底部的左边增加一行版权信息,让网站看起来更对称

图片

首页要展示的内容结构就基本做好了

你可以根据自己的想法增加修改首页的内容

也可以创建更多的页面

让网站丰富起来

这节课就先简单熟悉Axure的界面吧


Axure官网地址:https://www.axure.com/

本地下载:https://www.lunkeji.com/download/axure.exe

Axure9汉化包:https://www.lunkeji.com/download/axure_hanhua.zip

如果遇到地址失效可联系我更正!


相关内容

建一个网站(二)——原型设...
上一节讲了怎么做一个简单的网站简单到只有一行字:“你好,这是我的第...
2024-05-04 14:06:14
劝你建个网站被豆瓣永久封号...
在各大平台上线了我劝你建个网站没想到被一个不入流的豆瓣网给永久封号...
2024-03-09 15:42:35
我劝你建个网站
现在那么多自媒体平台,为什么我还是劝你自己建个网站呢?很重要的原因...
2024-03-08 01:04:22
建一个网站(一)——开发环...
开发网站之前我们需要做一些准备工作我们平时开发一般是用自己的电脑,...
2024-03-07 22:51:58
建一个网站(三)——使用开...
从0开始建一个网站需要掌握太多知识了,普通人如果只是想建个网站,在...
2024-03-07 22:01:16

热门资讯

实锤!鸿蒙微内核LiteOS跟... 我是一个较真的人,之前一直没搞懂LiteOS是否基于某个微内核的自主研发,一帮华为粉丝过来喷我,说什...
建一个网站(一)——开发环境搭... 开发网站之前我们需要做一些准备工作我们平时开发一般是用自己的电脑,在我们的电脑上调试好之后再传到远程...
我劝你建个网站 现在那么多自媒体平台,为什么我还是劝你自己建个网站呢?很重要的原因就是因为网站是自己的地盘,自己的地...
建一个网站(二)——原型设计 上一节讲了怎么做一个简单的网站简单到只有一行字:“你好,这是我的第一个网站”这个网站也太简单了我想增...
建一个网站(三)——使用开源程... 从0开始建一个网站需要掌握太多知识了,普通人如果只是想建个网站,在网上有发布信息的地方,那完全没必要...
做一个网站难吗 教你从0开始做一个网站,也就是说在浏览器输入一个网址就能展示你的网站。这个网站功能很简单,显示一行字...
0基础开发鸿蒙应用,看这一篇 本文面向0基础的小白,让你快速了解开发鸿蒙APP的流程,并且得到一款可以在手机上运行的鸿蒙APP。一...
扒一扒鸿蒙LiteOS内核并不... 说鸿蒙评论区总是攻击我是小米派来的,可以翻翻看看我以前的文章嘛。吐槽一下小米产品小米14亮点还是有的...
从0开始开发一款微信小程序 0基础做一个微信小程序,实现名片展示和拨打电话功能。0、什么是小程序运行在微信之上的轻量级APP,它...
小米Vela正式开源,系统之间... 基于NuttX内核的Vela正式开源,采用Apache 2.0协议。小米的澎湃OS与其它系统之间的关...