交互设计规范

交互设计规范+iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。如果是我来做的话,我会使用...

交互设计规范

交互设计规范

+

交互设计规范

交互设计规范

iPhone界面尺寸:320*480640*960640*1136

iPhone64.7英寸(1334×750)iPhone6 Plus5.5英寸(1920×1080)

设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6plus出来后有很多人会使用6的设计效果。

如果是我来做的话,我会使用640×1136,对plus做单独的修改适配,因为plus的屏幕实在是大了,遵循屏大显示更多内容的原则这里本应该是需要修的了。有更好办法的话希望大家可以分享一下。

Ps:作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或者尺寸变更。

交互设计规范

交互设计规范
界面基本组成元素
交互设计规范

交互设计规范

iPhoneapp界面一般由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)

这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。

状态栏(status bar):就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px

导航栏(navigation):显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px

主菜单栏(submenutab):类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px

内容区域(content):展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px

交互设计规范

至于我们经常说的iPhone5/5s640*1136的尺寸,其实就是中间的内容区域高度增加到910px

PS:在最新的iOS7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计iOS7风格的界面的时候多多注意下

交互设计规范

字体大小

iPhone上的字体英文为:HelveticaNeue 。至于中文Mac下用的是黑体,Win下则为华文黑体(最新字体称为黑体-)

下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小。

交互设计规范

切图

切图是APP设计中的一个重要过程,关系到APP的界面实现,及各种适配性还有各种性能

IOS在没6plus前,我们只需要提供两种图,普通图及视网膜屏幕图。

640×1136640×960是一样的)做的设计图的话就会好办一点。直接出设计图上的原大小图标,比如我们命名一个图片叫 img-line.png,我们给开发的图就要改变这个名字叫 img-line@2x.png 就是在后缀名前加上@2x表示视网膜屏的图,iPhone4的还需要把这个图尺寸按比例缩小50%,得到正真的img-line.png。然后把这两个图移交给开发,iPhone6的图在规范里是与5s使用的是一样的,也是@2x图。有些UI则需要做适当的适配,比如拉长,拉高,这个开发会去做。

对于IPhone6 plus的话范里给出的是@3x相信大家也知道是怎么回事,但如果要使用PS放大的话,大家做图的时候就需要使用形状工具来做,放大后还需要仔细微调,这里就不多做讲解

温馨提示: 在出可按的图片切图时需要注意图片的可按区域大小,有时图标很小,实际切出来的放在上面,用手指是按不到的,我们就需要对图片单独处理,拓宽图片的有效区域,这里是拓宽非放大,就是改变画布大小使图片尺寸面积扩大,使图片四周拓宽多余的透明区域 ,从而改变可按大小。

交互设计规范

颜色值问题

交互设计规范

IOS颜色值取 RGB各颜色的值比如某个色值,给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯,有时也用十六进制)Android开发的色值则使用十六进制 #0c2238

在上述步骤中,你可能搜集到了很多的细小的改进意见,这些可能并不影响大局,但产品人的专业性就体现于你对细节的把握。很多知识点,方方面面,很琐碎的,说不定过两天你就忘记了,所以这些细微的地方一定要记下来,。强烈推荐使用脑图进行记录(脑图深度爱好者,离开脑图没法活),然后定期的总结、归纳,你一定会收获很多!

交互设计规范

[ 习惯了孤独 ]

你冷落了我,

我也会慢慢地冷落你;

能习惯有你的陪伴,

也能习惯没有你的孤单。

慢慢地,都淡了,

渐渐地,都忘了!

世上的事就是这样,

当一个人忽略你时,不要伤心,

每个人都有自己的生活,

谁都不可能一直陪你!

交互设计规范

设计是需要陪伴的

交互设计规范

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

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

相关推荐

  • 2019交互设计考研普通长期班招生简章

    “应部分报考交互设计方向考生特殊需求,我们在保证搭建一个完整交互知识框架体系及备考专业课复习完整性标准下,特开设交互设计长期普通班课程。该课程更强调考生的“主动学习”能力。”招生简章开设课程:交互设计长期普通班(线上课程)课程时间:2018年5月中旬——2018年12月初试前(每周3课时)课时       :110课时(每课时1小时)费用      :7500元招生人数:线上课程16人(超数不招生)课程总框架:Part 1▪交互知识学习...

    2018-04-06
  • 想快速玩转Axure,同时提升产品和交互能力,试试这个秘密武器

    腾讯课堂&起点学院联合打造的给产品经理的Axure课程如果你想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?1、没人监督指导,自学还没到一个周,就想放弃2、按教程操作,却出不了效果,又不知错在哪里3、难的知识内容看着费劲,不会技巧,效率低浪费时间那么这个课程很适合你,2280位同学已经通过这个课程摆脱了Axure困扰。这个课程能带给你什么如果你是产品新人,还没有很好的产品作品,axure实战班里做的原型作品,学到的axu...

    2018-04-30
  • 用户体验双语术语,附阿里招聘广场舞达人资深用研专员

    这两天朋友圈被一则特殊的招聘刷屏了。先看看关键词:年薪40万,60+,广场舞 KOL(意见领袖)优先!一时间,网友沸腾了。这则招聘发布于1月16日,来自阿里巴巴集团社会招聘网站。从招聘网页上看,阿里对此职位的描述是“淘宝资深用研专员”,全称“淘宝资深用户研究专员”。记者推算了下,大致为阿里P序列中的P6等级。岗位给出的薪水待遇还不低,年薪范围是35万~40万。感兴趣的小伙伴可以转给符合要求的人士哦!点击阅读原文就可以看到这则招聘了。今天...

    2018-01-30
  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • 【用户体验】从了解用户的注意力开始,创造更优秀的用户体验

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】刚下班回家,今天又没时间写教程了。。。委屈这是一篇源自心理学家和 UX设计师的关于人类注意力研究的文章。在产品团队中,用户体验设计师的工作是输出高可用性、易用性的可交互数字产品。当我们在设计这些产品的时候,我们花费了大量的时间来探索不同的研究方法,了解不同用户的行为、习惯和需求。对于绝大多数的用户而言,在行为模式和心理结构上有着相似的地方,只要有意识地探索,我们能够更好地了解人类的认知过...

    2018-04-04
  • 「Sketch | 译文」用共享样式创建文本系统

    原文作者:Bunin Dmitriy来自:Medium阅读全文大约需要 6 分钟相信字体样式管理对很多新人设计师而言并不是一件容易的事,甚至很多工作多年的设计狮也并没有很好的规划自己的项目字体样式的习惯,这不但增加了设计项目的维护难度,更主要的是随着项目的不断膨胀,你项目中的排版会变得杂乱无章、极不统一。其实使用Sketch来进行字体管理并不复杂,今天带来的是Bunin Dmitriy的一篇关于文本样式系统的文章,不到十分钟可以让你对文...

    2018-04-14
  • Axure RP 8软件安装视频教程

    Axure RP 8下载地址:链接:https://pan.baidu.com/s/1smi2vvf密码:l2oj安装中有问题请咨询私人微信:152374906801、双击打开此文件2、点击next3、选择i  agree然后点击next4、点击bowse更改存储位置建议不要放在C盘然后点击next5、点击next6、点击next7、等待安装8、取消勾选Run Axure RP 8,然后点击Finish9、打开软件的安装目录把复制的la...

    2018-03-04
  • Axure实践第二讲

    Axure实践第二讲---如何有效的在工作中引入原型·页面枝干·添枝加叶·画龙点睛在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。一、功能结构图(页面枝干)1.切入点是功能结构图(自顶向下)从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构...

    2018-03-16
  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • 无障碍的交互设计,需要做到这7点

    先从字面上来理解何为“无障碍”。生活中许多场所中,除了供给正常人使用的区域外,还有一些针对工作人员、特殊人员(残障人士、老弱病残、孕妇等)的无障碍通道/设施,比如:机场、地铁、厕所、展会等。无障碍设施/通道是能够兼容普通人员和特殊人员共同使用的,且相对来说使用起来更为便捷、直接、且省时省力。-交互中的无障碍需要考虑到哪两方面?-那么交互中的无障碍又有哪几层含义呢?从常规的使用人群来看,首先要满足普通人群使用。其次,当一个优秀产品具有一定...

    2018-03-31