交互设计规范

交互设计规范+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

相关推荐

  • 用户体验升级:《部落冲突》VS《竞逐之国:毁灭时代》

    原文作者:Om Tandon‘用户体验设计’是电子游戏产品的关键组成部分之一,随着手游产业的发展和智能手机的普及,人们接触的手游越来越多,现有的手游体验对多数玩家来说已经不再陌生。为了在同类产品中建立优势,开发者需要不断实现创新,改进并突破这种体验,从而为用户创造新的价值。与上市时间较长的同类手游《部落冲突》相比,Space Ape的RTS新作《竞逐之国:毁灭时代》在用户体验方面实现了突破。我们将两者的‘首次用户体验’、‘编辑模式&基地...

    2018-03-09
  • 产品能力(一)——用户体验要素

    上周开始学习梁宁老师的产品思维三十讲,颇有收获。由于内容很多,分几期总结,与大家一同分享。首先说说我选择学习这门课程的理由,产品能力是一个人的底层能力,之所以这么定义,是因为它具有判断信息,抓住要点,整合有限的资源,把自己的价值打包成一个产品向世界交付,并且获得回报的闭环能力圈。下面我正式开篇,结合我自己的工作经验,总结课程中所学到的知识点。一、产品和好的产品人生无处无产品,工作中提交的邮件和报表,生活中给亲人提供的暖心话语和烹饪的佳肴...

    2018-02-12
  • 产品原型设计(2):母板的创建和使用

    Axure母板:可以将一些页面中的共同之处,比如导航、背景部分等,提取出来,制作为母板。将母板应用于某个页面,则该页 面相当于将模板的内容复制过来。如果有很多页面具有相同的内容,这些页面如果需要修改这些相同的内容时,仅需要在模板中即可完成所有页面的修改。方式一:直接创建母板步骤一:创建Axure母板:在“母板”区直接创建母板里创建了一个名称为“Axure学习平台”的模板步骤二:使用母板选中“Axure学习平台”母板,邮件选择“添加到页面...

    2018-04-08
  • 独家UED手机端 保险投注

    活动时间:2018年3月1日中午12:00至2018年3月31日上午11:59 (北京时间)针对于优惠期间内第一次使用头头移动平台的会员50%本金返还,高达RMB 88手机保险投注!活动详情:1.头头移动平台包括手机网页版版平(m.toutou158.com),UED手机端安卓版和iOS版;2.没有下载头头手机端安卓版和iOS版的会员可以进入官网www.toutou158.com下载;3.头头会员需在优惠期间通过头头手移动平台投注第一笔...

    2018-03-29
  • 作品集 | 交互设计大师的成长轨迹

    致奋斗的你:又是一年花开时,中公教育优就业送走一批批优质学员的同事,又迎来了一群渴望高薪就业,改变现状的U学员。优就业学员在朝九晚九的学习作息中、六大福利的助学保障中、高配的教学设备下、高标准的食宿环境下学习IT技能......相信中公教育的学员一定可以学有所成,实现高薪就业目标!下面,就随小U妹一起来看看近一期学员“小试牛刀”的作品吧:UI交互设计作品01、UI动效展示(部分)UI动效作品展示·《小球飞》UI动效作品展示·《大憨熊》0...

    2018-04-12
  • 场景是如何应用到交互设计的?

    我想在互联网领域,大家对“场景”这个概念并不陌生,但组成场景的关键因素有哪些?场景是如何应用到交互设计的?在工作之余,整理下相关知识,相信对大家的产品日常工作有一定的帮助,感谢大家抽出时间阅读,欢迎批评指正。1.场景的基本概念场景是指用户在一定的时间、地点等特定的情景下为了满足某种需求而触发的使用某种方法解决需求的行动画面。其关键因素包括用户、情景、需求、方法。产品的应用场景就是用户使用产品来解决需求的实际应用场景,比如上班族小张在午餐...

    2018-03-02
  • 如何平衡广告盈利和用户体验?

    如果你是一名手机应用开发者,你肯定知道广告可以为你的应用提供巨大的收入潜力。可以说手机应用就是在为流量主下金子: 到2020年,将会有高达1890亿美元的收入,而其中仅应用内广告带来的收入就会达到1170亿美元。事实上,我们最近对1000多名应用程序开发者进行了调查,发现高达84%的人承认他们通过广告将应用变现 —— 61%的人声称广告带来了最多的收入。但是,一如既往,能力越大,责任越大。作为一名应用开发者,你要负责确保用户的使用体验,...

    2018-04-06
  • UED网站“新视界新体验”运营设计的思考

    2018年3月20号,我们UED网站(ued.z6.gldcg.com)开始首次运营,推送了我们的第一篇文章“新视界新体验——广联达集中采购平台新版设计”,在朋友圈,小火了一把。21号的时候,我对这个事情,又有了新的思考:第一次发文的目的是什么:1、推广我们产品全新界面,新体验;2、推广我们UED的网站;事实上,我们达到了我们的目的,微信群中得到了大家的认可,点赞;朋友圈大家转发和分享;朋友圈留言,要体验我们产品;老客户看到后要求升级产...

    2018-03-22
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • Excel 实现微信动态图表的交互体验

    昨天说的干货贴,文末有下载方法。微信后台有一个不错的动态图表,可以借鉴到我们周报月报的制作中运用:它的交互特征:①鼠标单击上方的扁平化指标选项卡,切换下方的动态图表。②鼠标悬停下方的折线图,会出现小圆点、竖线和提示框突出显示当前数据点。如果用 Excel 仿制,通常是使用窗体控件来制作动态图表,交互效果如下:需要用到的知识点,窗体控件用单选按钮或下拉框,函数用 index 或 offset,这个我们在《让你的图表动起来》课程里已经有专题...

    2018-01-30