首页高端网站建设正文

网页原型系统的设计（网页原型系统的设计步骤）

高端网站建设 2024-07-05T22:27:08 15

本文目录一览： 1、web端及移动端原型设计规范 2、

本文目录一览：

端口类型：目前需设计的端口主要有：web端（即网页）、移动端（APP、小程序等移动设备）、IPAD（IPAD是一种移动设备，但也有自己特定的尺寸）、智能设备（例如智能电视、智能手表等等）。由于我更多接触的是web端和小程序端口，后面会以这两个为主。

首先，我们需要了解规范的移动端页面尺寸，即宽度为375像素，高度为667像素（单位为px）。对于较长的页面，如首页，可以适当调整以容纳更多内容。但若高度超过667像素，务必确保状态栏保持在底部，并遵循规范进行制作。其次，iOS人机交互指南对重要模块有明确的高度要求。

．已上传至蓝湖协作平台的高保真界面，应根据平台中的标注尺寸进行精确还原，Web界面还原度不得低于95%；移动端还原度为100%（精确到一像素）。2．开发人员完成视觉部分内容以后，必须由UI设计师及前端技术负责人进行校对工作。

项目前两期建设主要是以数据信息的采集、汇集、为主，目前随着移动互联网的成熟和发展，便于使用者摆脱时间空间限制，随时随地追身办公，亟需将数据的应用分析内容、成果以移动端服务的形式推送给各级数据使用者。

学会HTML HTML是网页内容的载体内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。要熟练掌握div、table、ul li 、p、span等这些标签，这些都是最常用的。学习CSS（Cascading Style Sheets）—样式。

网页原型系统的设计（网页原型系统的设计步骤）

1、一定要画信息结构图（即产品层面的数据模型），主要用于理清产品结构。画一下脑图，列一个excel表单，详细程度依据自己习惯即可，需要和用户配合起来设计。这个是和普通原型设计比较不同的一点，如果是改版还需要特别标注和旧版的区别，以及旧数据的清理或迁移方案。

2、如果实在没有想法的话，可以多看看同类型的网站后台设计，寻找设计灵感。高效实用的原型设计工具好的设计想法，也需要称手的原型工具进行制作、测试和迭代。这方面，摹客MOckplus就是不错的工具，操作简单快速、链接分享、反馈收集、真机演示等等，能够实现团队快速设计和迭代。

3、是交互设计/原型设计的基本依据，是逻辑基础。如果你都没想好页面流转的顺序，那么你画的原型一定不是可以确定下来的版本（2）代表了用户的操作过程，先画页面流程图能迅速发现体验问题。

1、双击页面空白处，开始编辑第一个页面。从元件库中拖拽矩形2元件到画布上，并根据需求调整尺寸，例如1920*1080像素，这通常是苹果手机Plus版本的分辨率。选择占位符元件来代表登录页面中的图片位置，如logo。使用矩形1和文本框元件创建登录字样的输入框。复制矩形元件来创建密码输入框。

2、首先我们打开一个已经设计好了的网页原型。然后点击软件右上角的发布按钮，找到生成HTML文件一项。或者直接在打开的网页原型中按F8，使用快捷键打开。选择存放HTML文件的目标文件夹。选择需要立即打开的浏览器，也可以选择不打开，只生成HTML文件。点击生成，需要等待几秒钟。

3、选择占位符。占位符一般代表的是原型当中的图片的位置，这里使用占位符代表登录页面当中经常出现的logo之类的信息，当然如果想要使得更美观一些的话，也可以选择使用图片。

4、将密码输入框元件中，矩形命名为“矩形2”，文本框命名为“密码”，文本框元件属性设置为：密码、隐藏边框，增加提示文件“登录密码”，三个元件排列好组合，命名为“密码输入框”。参考网页登录样式，将各元件在界面中排列好。

双击页面空白处，开始编辑第一个页面。从元件库中拖拽矩形2元件到画布上，并根据需求调整尺寸，例如1920*1080像素，这通常是苹果手机Plus版本的分辨率。选择占位符元件来代表登录页面中的图片位置，如logo。使用矩形1和文本框元件创建登录字样的输入框。复制矩形元件来创建密码输入框。

利用组件里的线框工具进行拖拽，可随意拖拽形成大概布局，然后可以在线框中进行编辑，选择需要的字体颜色大小，线框粗细等，如下图所示；二，利用组件里的扩展功能，绘制你所需要的搜索框，表单等功能；利用图片功能可以导入你所需要的图片使布局图变得更有直观性；如下图所示；导入完后，还可以随意缩放图片大小。

第一步，打开Axure RP 0，绘制页面的基本框架。第二步，从元件库中选择“矩形”元件，拖动到画布上，并调整其样式，包括大小、颜色填充和边框。第三步，设计左侧的导航框架。创建一个较小的矩形，并设置特有的样式。第四步，向矩形中添加文字。

乔晟 22859 0