交互设计规范

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

相关推荐

  • 如何识别和避免“暗黑用户体验”

    作者:Emily Stevens | 翻译:沙喵〜 审校:Moli用户体验设计是一门创造独特奇妙体验的学问——但设计的产出并不都是像彩虹一样美好灿烂的。即便是本质上强调用户友好的设计产业也会有黑暗的一面,而这些黑暗的欺骗性的设计模式比你想象的更为普遍。去年,用户体验设计公司Sigma点名指出,好几家知名零售商利用欺验性的暗黑用户体验设计从用户那儿赚了更多的钱。出现在耻辱榜上的有电商巨头Amazon、快时尚电商Boohoo.com(英国)...

    2018-03-20
  • UED专访 | “看不见的城市”:带你了解城市地下空间

    由广州市人民政府主办、广州市住房和城乡建设委员会承办、《城市·环境·设计》(UED)杂志社协办、广州地铁设计研究院有限公司支持的“看不见的城市——城市市政与公共交通论坛”作为“2017年广州首届国际设计论坛”的四个分论坛之一,探讨城市骨架中更为基础的市政、公共交通的相关问题,共同解读城市发展与设计中重要的一环。我们邀请到了本场论坛的主持人,广州地铁集团副总工、广州地铁设计院总工、住房城乡建设部专家、城市轨道交通和地下工程专家、教授级高工...

    2018-02-08
  • SKETCH教学视频

    则灵君分享的是“静电的sketch设计教室”教学视频,对于新手自学来讲非常的合适,感谢静电,讲解的非常的清晰明了,视频就在这儿,剩下的就需要你付出时间去学习咯,祝大家学有所成!链接: https://pan.baidu.com/s/1iIbE-DI_yHLayj7wue49yQ 密码: mw25·—END—·

    2018-04-20
  • Excel表格常用快捷键大全之1-10个

    为了小伙伴能更懂Excel 快捷键的具体使用场景,小雅不是单纯的像网上看到的一堆快捷键堆上去就好,做了更详尽的解释,希望大家能喜欢!收藏一下,记住些Excel常用快捷键还是不错的!善用快捷键,新手到高手的蜕变!不废话,进入正题,本篇是1-10个快捷键,后续会陆续为大家呈现更多的Excel快捷键。第一,插入工作表默认情况下,我们新建一个Excel文档,只有3个工作表。3个sheet,即sheet1,sheet2,sheet3。如果这三个s...

    2018-03-17
  • 骁龙835助力VR交互新体验,自由就要6DOF!

    今天,Pico 在北京举办新品发布会上,发布了旗下全球首款同时实现头部和手部 6DOF 追踪及交互的量产 VR 一体机 Pico Neo——搭载Qualcomm® 骁龙™835 移动 VR 平台,带来更加自由、沉浸的 VR 交互体验。Pico Neo 是 Pico 旗下最新一代 VR 一体机产品,搭载了Qualcomm骁龙835移动VR平台,采用一体式 ID 设计,更轻更透气的全包布材料,配备 3K 高清显示屏,4GB 高速 RAM,6...

    2018-01-30
  • AR与用户体验简析

    说道AR想必大家都不陌生,所谓AR就是增强现实技术,现在普遍的应用是在移动端,通过相机拍摄现实场景,并通过AR技术在屏幕上生成想要的图案,使能够栩栩如生的浮现在屏幕上,好似实物就在眼前一样。首先我们值得注意的是个人电脑和智能手机是所有人都想要拥有和使用的产品,一旦产品价格进入消费者能够承受的价位,爆发是完全没有问题的;其次,两者的核心技术其实都集中在CPU、显示屏等电子元件相关领域,这些产品的发展基本上都遵循摩尔定律,即18-24月性能...

    2018-02-27
  • 雪糕游戏(南京上海)聘:运营/商务/主策/主美/原画/程序等

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)公司简介:南京雪糕网络科技有限公司(简称雪糕游戏)是一家集研发、运营、发行为一体的新锐游戏公司。自2015年成立至今,自主研发了《全民神仙》、《行侠仗义五千年》、《童话大乱斗》、《西游记口袋版》等产品;IOS联运了涵盖三国、武侠、魔幻、神话等题材产品,游戏多次在App Store上榜,凭借精准的IOS流量整合能力、优秀的产品运营能力,雪糕游戏IOS联运产品月收入稳定在千万级水平,也为...

    2018-04-08
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18
  • 【干货知识】最全面的交互设计原则和理论汇总(上)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】文章包括:格式塔心理学原则、尼尔森可用性原则、尼尔森F视觉模型、Heuristic Evaluation十原则、费茨定律、席克定律、7+2法则、2秒原理、2/8法则、3次点击法则、界面黄金8法则、jakob nielson原则、KANO模型、0123简单法则、MVP法则、婴儿鸭综合症、包豪斯理念、泰思勒定律、防错原则、奥卡姆剃刀原理、maya法则、信噪比法则、序列效应、功能可见性原则、成...

    2018-04-16
  • AxureUX电商平台WEB端交互原型模板正式发布

    01作品信息作品名称:AxureUX电商平台WEB端交互原型模板作品类型:模板类发布日期:2018-02-25最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:13MB作品编号:TEM006作品售价:¥169.00详细介绍及演示:http://www.axureux.com/home/templateswebec.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品...

    2018-03-04