axure原型图手机界面尺寸
使用axure原型图手机界面尺寸制作的原型,如果你没有设置自适应视图的话它是不会自动适应任何设备的。若要解释清楚这个问题需要的篇幅比较长,请大家自行参考 Point/Pixel/PPI/DPI 的意思和它们之间的关系。这里不再赘述,直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure 中设置大小即可,设计完毕后在生成 HT ML时设置 手机 /移动设备 中勾选包含视图接口(
include Viewport tag ),并进行配置axure原型图手机界面尺寸,生成 HT ML后再到相应的移动设备中浏览就正常了。
例如:iPhone4 320*480
iPhone5 320*568
iPhone6 375*667
iPhone 6 Plus 414*736
Samsung Galaxy S4 360*640
如何创建APP页面
元件库,创建一个适合自己的元件库,然后载入到Axure。然后每新建一个APP页面的时候,axure原型图手机界面尺寸从左边元件库中拖动到右边,然后直接把位置改成(0,0)。延伸一下,创建元件库的时候尽量把这几个元件都命名一下,比如命名为页面框架,上导航,左按钮,右按钮。这样以后需要修改的时候直接全局搜索即可。
使用母版创建APP页面:可以使用母板的方式来制作,但是设计新APP原型的时候就没办法反复调用了,但是不太推荐。
有些页面需要考虑到重要内容得让用户第一眼就能看到axure原型图手机界面尺寸,比如商品详情页面就需要保证订单在任何屏幕上都应该显示在第一屏幕。延伸阅读了解更多所以从横向标尺那里拉出一条线,有了拉的箭头你在往下拉到667的地方。如果你的APP比较特殊,所有的页面都需要用到一屏线。axure原型图手机界面尺寸那就建一个”固定位置”类型的母版,画一条横线,位置(0,667),宽度400左右。然后“添加到页面-所有页面”即可。
兼顾主流屏幕
虽然你的原型375x667只是iPhone6/6s/7的逻辑分辨率,axure原型图手机界面尺寸但是我们可以在原型中把主流屏幕的分辨率体现出来,如果需要特殊适配的话,单独说明即可。比如Android主流分辨率是720x1280,那原型尺寸是360x640。建一个”固定位置”类型的母版,模板内容是一个360x640的页面,然后批量复制到所有APP页面的底层即可。
关于颜色
线框图的黑白灰之纯美,有利于专心布局界面,axure原型图手机界面尺寸而不用在意界面的颜色搭配。
黑白灰颜色常用的数值是:
文字黑色#282828
文字深灰色#656565
文字浅灰色#98989
边框浅灰色#C3C3C3
背景淡灰色#f2f2f2
按钮背景纯白色#ffffff
综上所述
界面尺寸布局:满屏尺寸750x1334px
高度电量条高度40px,导航栏高度88px,标签栏高度98px;
axure原型图手机界面尺寸各区域图标大小导航栏图标44px,标签栏图标50px;
各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px;
常用的文字大小:32px,30px,28px,26px,24px,22px,20px;
常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,axure原型图手机界面尺寸边框色深灰#CCCCCC;
常用可点击区域的高度:88px;
单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;
常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;
按钮和文本框,原型图做成直角的axure原型图手机界面尺寸,圆角半径是多少,由Ui来设计;
这种情况,需要修改原型。单个页面的逻辑流程图或用户学习使用时间,超过其它页面平均数的axure原型图手机界面尺寸3倍以上;
axure原型图手机界面尺寸相关推荐
- Axure原型图设计工具使用记录
Axure原型图设计工具使用记录 Axure快速入门(01) - 面板介绍 https://blog.51cto.com/u_15294985/3007677 Axure快速入门(02) - 入门例子 ...
- 个人原创作品项目1-“师生助手app”(主要为简短的分享项目灵感来源和市场及需求分析,最后附上产品旧版本的Axure原型图部分交互操作视频)
数据分析展示链接:https://blog.csdn.net/weixin_44869426/article/details/122952469?spm=1001.2014.3001.5502 正文 ...
- android商品尺码界面,多终端产品 | 解析原型画布尺寸和界面尺寸
释放双眼,带上耳机,听听看~! 当我们打开Sketch或Photoshop开始设计产品界面时,首先会习惯性地设置一个画布尺寸,这是我们设计师最习以为常的一个操作,以至于我们几乎从未质疑过画布尺寸的大小 ...
- 【Axure原型图】——动态面板
Axure是很早之前就用过的软件,只是当时并没有深究,但最近在画原型图的时候,发现自已以前会的那点儿皮毛着实干不了啥,仅仅需要修改一下已有的图形,可我却不知道如何下手,不得不重新拾起被遗漏的文件夹,重 ...
- 【Axure原型图】—— 4. Tab Control(选项卡)
创建一个结构,在里面点击一个选项卡,可以显示该选项卡的内容. Step0: 下载练习文件 在这里下载AxureTraining.rp文件,并用Axure RP打开 Step1: GETTING STA ...
- 解决谷歌、qq、edge、360、火狐浏览器打不开Axure原型图问题
一.谷歌.qq.edge.360 第一步:下载插件,解压得到一个axure-chrome-extension的文件夹. 第二步:打开Google浏览器,在地址栏中输入chrome://extensio ...
- 原型图都可以用什么软件做?分享这9款给你
设计师在进行原型设计师时,会使用原型图软件,从产生想法到向开发人员提交项目.无论是构建基本线框还是功能齐全的原型,原型图软件都可以为你节省大量的时间和精力. 如果你是这个领域的新手或者想更新你的原型图 ...
- 交互设计:界面尺寸设计大全
自从七月公开课开始以来,就有不少新加我们的小伙伴在问: "老师,请教下web端原型图长宽一般设置成多少啊?" "老师,web端的输入框一般设计的长宽是多少啊?" ...
- 如何导出Axure原型设计中的图片?零基础入门教程
Axure 是一款广为人知的原型设计工具,特别适用于新手产品经理或产品设计初学者.然而,如果用户想要在浏览器中预览 Axure 原型图,需要安装插件才能实现.而安装完 Axure RP Chrome ...
- 工具下载( 思维导图、原型图)
1.Edraw(画图工具) 百度百科介绍 下载地址:http://www.downza.cn/soft/244028.html 2.xmind(思维导图工具) 百度百科介绍 下载地址:xmind 密码 ...
最新文章
- 计算机组成原理的判断题,2《计算机组成原理A》判断题
- 制定规则者与打破规则者
- 关于织梦系统不支持php中GD库的问题
- 算法 --- 二叉树的最大深度
- I2C总线之(一)---概述
- 12c oracle 修改内存_关于Oracle数据库12c 新特性总结
- 关于Context []startup failed due to previous errors
- 使用Fluent NHibernate和AngularJS的Master Chef(第2部分)ASP.NET Core MVC
- ueditor编辑器图片自定义存放目录及路径修改
- Android 网络通信 之 UDP
- 基于matlab仿真的功率因数测定方法研究,基于MATLAB的单相全控整流电路功率因数测定.pdf...
- 广电CMMB拒考手机电视国标 新面孔IMMB欲分羹
- [论文阅读]PIXER: an automated particle-selection method based on segmentation using deep neural network
- MCtalk对话尚德机构:AI讲师,假套路还是真功夫?
- 青少年编程教育平台后台—登录注册(界面设计)
- 你想学习吗?你会学习吗?你知道该如何学习吗?学习之道-读书笔记
- 有香有臭个性十足“奶酪之国”种类高达345种
- JS 实现别踩白块功能
- 进入docker容器后,按删除键是空格解决办法
- 大企业邮箱品牌排行中,哪个企业邮箱好用?