原型图绘制技巧

news2024/11/26 23:39:28

针对于 Axure RP绘图软件。

1、拉辅助线

  • 目的,确定画布大小尺寸
  • 从上面和左面的刻度尺上,点击鼠标,拖动,就可以拉出一条线。

2、画布底模设为组件

右键转换为母版,方便后续其他页面使用

3、按钮

  • 按钮字体不要太大,

  • 字体要和按钮边框有合适间距,不能太窄

4、原型图字体

  • 范围为12~18,常用大小为16、18
  • 主体字体和附体字体颜色深浅不一,大小也不一致,要区别开,主深辅浅,主大辅小,具体细节慢慢匹配琢磨,例如

5、画框

里面填充的颜色要和边框颜色同色系,如,浅灰就都选浅灰,边框颜色要比填充颜色深一度,体现细微对比度

6、原型图整体颜色

参考网站,Element

层次感,整个大的页面布局要选同色系的,如,选浅灰,页面要用不同深度的浅灰,使页面看起来有层次感。

关联性,可根据颜色的深浅,体现出模块之间的关联性

7、横排文档布局

要注意左面写了文件名图标等,右面也一定要放些东西,如日期、作者名等,不然版面显得空荡,不美观

8、图标

参考网站,iconfont-阿里巴巴矢量图标库 

  • 里面可搜索并下载需要的图标

  • 开发可用SVG下载,原型图设计可以PNG下载

  • 下载下来后可将该图标复制粘贴到Axure RP中。
  • 注意,选用同类型的图标,如果选用简约,就都用简约。点击作者头像可以找到同类型的图标,但是一般一个作者的图标不够选,可以在多个相似图标类型的作者里凑齐图标。

9.菜单栏的制作

  • 文字要和图标有些许错位,(什么样的图标配什么样的文字要自己细细匹配尝试,时间紧急的情况下可以不注重这些细节,大方向做好就好)

  • 图标可存为组件,右键转换为母版,下次就可以在其他页面批量使用。

10.画原型图前的准备 ⭐

先思考整个软件框架,梳理流程,串起业务,确定:

  • 分辨率的大小,一般是1920*1080
  • 有那些批量的、高频用到的组件提前画出来,存为母版,方便后续使用

如此,便可快速绘制出原型图!

11.和开发讨论

对于一些布局排版,可以抽空和开发人员讨论讨论,怎样摆放可以方便他们的开发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1985597.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Material-UI】Button 组件自定义详解

文章目录 一、自定义 Button 组件的基础1. 基于 styled 方法的自定义2. styled 方法详解3. 覆盖默认样式 二、高级自定义技巧1. 主题色彩与调色板2. 无障碍性与响应式设计 三、集成与测试1. 集成到项目中2. 测试自定义样式 四、总结 在使用 Material-UI 开发 Web 应用时&#x…

动态贝叶斯网络DBN介绍

动态贝叶斯网络DBN介绍 1. 引言2. 贝叶斯网络与动态贝叶斯网络2.1 贝叶斯网络简介2.2 动态贝叶斯网络详细介绍2.3 两种网络对比 3. 搭建动态贝叶斯网络的方法3.1 定义网络结构3.2 参数学习3.3 推理3.4 结构学习和参数学习的方法3.4.1 结构学习3.4.2 参数学习 4. 总结5. 参考文献…

【医学影像】无痛安装mamba

去年编辑的一个帖子。摆了一段时间后重新回归,发送一下作为状态分界线。 很癫狂的体验,man,what can i say! issue查看我的狗急跳墙状态 1.确定版本 cuda nvcc -Vpython python --versiontorch pip show torch2.下载对应版本…

电燃灶(电焰灶)、燃气灶、电磁炉,谁更契合中国人的烹饪习惯?

中国人的烹饪文化源远流长,丰富多样的烹饪方式和独特的口味需求造就了对炉灶的严格要求。在现代厨房中,电燃灶(电焰灶)、燃气灶和电磁炉成为了常见的选择。那么,究竟哪一种更适合中国人的烹饪习惯呢? 一、明…

[Paddle] 从零安装 Paddle 框架

1 安装前准备 1.1 安装环境 本机安装环境如下: 运行环境操作系统Ubuntu 22.04.4 LTS (Jammy Jellyfish)CPUIntel Core™ i5-12400显卡NVIDIA GeForce RTX 4090 1.2 验证 GPU 是否为 NVIDIA GPU 在命令行输入以下代码,以验证您的 GPU 是否是 NVIDIA …

零基础报考软考只是为了证书,应该报考初级还是中级呢?

证书的价值仍然非常吸引人~ 软考不仅是技术水平考核,也是评定职称资格的考试,是评定职称的主要条件。国有企业和事业单位的员工可以凭借软考中级以上的证书申请中级职称、副高级职称或者高级职称。此外,软考对于提升职位和加薪有着重要的作用…

嘉立创EDA专业版本创建自定义元件和封装

嘉立创EDA专业版本创建自定义元件和封装 1.新建封装2.新建元件1.新建封装 然后保存就可以了 2.新建元件 这里主要添加新建的封装

DisplayFusion显示器使用好助手

目录 一、软件基本信息 a) 官网: b) 下载: c) 功能概述 二、软件安装 三、几个应用场景 1、显示器分割 2、应用发送到桌面 3、桌面壁纸设置 4、任务栏设置 5、其它 四、授权 初识DisplayFusion还是在2017年,当时有个LED…

CSP-J复赛 模拟题4

1. 删数游戏: 题目描述 两名同学在黑板上做删数游戏,游戏规则如下: 两名同学先一起在黑板上写了n个数字,同学A先擦掉一个数字,之后同学B再擦掉一个数字,轮流进行,直到黑板上只剩下最后一个数字&#xff…

Vue脚手架的安装(超详细篇,保姆级教程)

一、环境安装 1.软件下载 官网:https://github.com/coreybutler/nvm-windows/releases 官网往下滑,找到这个nvm-setup.zip,然后进行下载 2.安装 下载后,双击进行安装,注意安装目录不要出现中文和空格 安装后,打开cm…

时间序列分析基础20问

时间序列分析是一类特殊的数据分析问题。它是对连续间隔离散时间序列的观察。在现实世界中的应用包括天气预测模型、股市预测等。 本文通过20个问题,深入解析时间序列分析的基础概念和方法。 1. 什么是时间序列数据? 时间序列数据是按照时间顺序排列的、…

谷粒商城实战笔记-129-商城业务-商品上架-nested数据类型场景

文章目录 扁平化处理扁平化处理导致的检索问题 解决方案:使用 nested 结构 在es的数据类型中有一个nested类型,本讲将重点讨论这个类型。 扁平化处理 PUT my_index/doc/1 {"group" : "fans","user" : [{"first&quo…

软件测试中APP上线测试的流程,湖南软件测评公司分享

在当今数字化高速发展的时代,移动应用(APP)的普及使得软件测试显得尤为重要。作为推动软件质量提升的重要环节,APP上线测试的流程决定了软件能否顺利进入市场。 APP上线测试并非一蹴而就,而是需要经过严格的分步流程。该流程包括需求分析、测…

工业5G路由器驱动矿山无人值守及井下监控数据传输

矿山行业作为国民经济发展的重要组成部分,其生产效率和安全性一直被广泛关注着。随着信息技术的飞速发展,矿山数字化转型已成为必然趋势。矿山井下环境复杂,传统的人工巡检和监控方式存在效率低、成本高、安全隐患大等问题。 由于户外矿山和…

前端项目发布到Nginx里报Failed to load module script错误

错误信息: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec. 报错原因&…

Python3+selenium3

Python3selenium3 下载python3以上版本,链接:https://www.python.org/57 下载之后,直接安装,安装在C盘之外的磁盘环境变量 (1)安装完成后,看下这个目录D:\python\Scripts,有没pip.…

【大模型LLM面试合集】大语言模型架构_MoE经典论文简牍

2.MoE经典论文简牍 参考资料: MoE (Mixture-of-Experts) 经典文章简读Mixture-of-Experts (MoE) 经典论文一览 1.开创工作 1.1 Adaptive mixtures of local experts, Neural Computation’1991 期刊/会议:Neural Computation (1991)论文链接&#x…

pe节空白区添加的代码

再此之前需要了解节表(假设我们都理解了) 以一个程序为例: 如上图所示一个正长的程序运行后是这样的,我们想对该程序做点手脚,在弹出该页面之前,先弹出我们给他指定的东西。 最终实现结果: 首先弹出我们…

尚硅谷谷粒商城项目笔记——八、安装node.js【电脑CPU:AMD】

八、安装node.js 注: [!NOTE] 查看本机系统 官网选择node.js版本 1傻瓜式安装,注意选择路径 图一 图二 至此,nodejs安装完成! 2环境配置 找到安装nodejs的路径新增 node_global 和node_cache文件夹 创建完两个空文件夹&#x…

【学习总结】MySQL篇

MySql 事务ACID 原子性 事务是不可分割的最小单元,一个事务的若干sql操作。要么统一成功,要么统一失败。(redoLog) 持久性 数据库的数据在宕机,丢失数据的情况下。可以回滚数据,这由mysql的日志完成&a…