同行总结可即刻上手的IOS规范参考

   最近一直在研究移动端的设计,不同于创意稿,侧重于想法,视觉传达,较少考虑开发成本,或者产品需求。要上线的设计稿需要严格的视觉规范,而非单个页面的展示,是一个整体、统一、成套的系统。需要考虑也比较多,时间,人力,质量都必须去考虑。所以,决定为新的移动端产品做一套视觉规范。也有以下有几个好处:

  对于设计或者开发人员更具指导意义

  保持产品视觉与交互的统一

  提高工作效率

  …

  以下是在写视觉规范前一部分对iPhone几个较为典型界面的总结,一方面是了解苹果的一些默认数值,另一方面是对视觉规范有个大体的参考基础。

  以iPhone5 设置页面为基础

  高度

  状态栏+导航栏 高度 128px,1px分割线,共129px,

  列表内小图标大小 58*58px 圆角为12px

  板块与板块之间的间隔为70px(如果状态栏+导航栏有1px分割线的话距离为69px)

  列表高度为86px


  字体

  iPhone的系统字体,在设计稿中最接近的中文字体为黑体-简 英文写作Heiti SC 英文字体为helvetica Regular

  导航字体 中体 样式:浑厚 34px

  列表类字体 细体 样式:浑厚 34px

  边距

  上下不限制

  左右距离手机屏幕边缘 左右各30px

  列表内图标上下左右间距30px

  以iPhone5通知中页面为例

  板块说明文字 26px 细体 浑厚 与板块距离18px

  列表类标对一级标题说明 24px 细体 浑厚 与一级文字距离8px

  列表高度(包含1px分割线)100px


  以iPhone5的APP Store 更新页面为例

  导航上返回/更新的字体:33px 细体 浑厚(没错就是33px —_—|||);箭头与屏幕边框距离为16px

  控件一级菜单栏内tab切换:580x58px(包括2px描边) tab里字体:24px 细体 浑厚

  搜索框:608x56px;圆角12px;搜索框内字体:28px 细体 浑厚

  更新列表内图标: 128x128px ;圆角:30px

  列表高度(列表不包括向下1px分割线):168px,所以icon距离列表20px

  列表内文字:28px 细体 浑厚;说明性文字:24px 细体 浑厚

  列表内部按钮大小92x52px ,包含2px描边,字体大小28px 细体 浑厚

  tabbar下部菜单:高度 98px(包含顶部1px分割线);字体20px 细体 浑厚

  更新通知红点大小: 36x36px 红点内数字 helvetica Regular 24px


  屏幕像素尺寸与物理尺寸

  pixels per inch 每英寸上像素点数量,iPhone3gs和iPhone4s屏幕大小同为3.5英寸。但是iPhone4s是将一个像素分为了4个像素。


  也就是说按原本的尺寸设计适合只需要建立320x480px的画布(iPhone 3gs),视网膜屏出现以后就是将宽和高都乘以2倍。640x960px(iPhone 4s)由于图片从大放小效果不会受到影响,但从小放大就会出现质量偏差,所以设计师们会以大尺寸为设计标准。这样适配各个屏幕尺寸比较省时。

  开发者在xcode上开发的屏幕选择和设计师是不一样的,他们只需要选择手机的物理尺寸即可如下图:


  这里有一个pt的概念,下面是引用《通俗易懂!超全面的移动端尺寸基础知识科普指南》的一段文字:

  1倍:1pt=1dp=1px(mdpi、iPhone 3gs)

  1.5倍:1pt=1dp=1.5px(hdpi)

  2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

  3倍:1pt=1dp=3px(xxhdpi、iPhone 6)

  4倍:1pt=1dp=4px(xxxhdpi)

  目前就总结了这些,基本能够理解以后,与开发者合作就比较容易,也能够很好的进行视觉还原的工作!

时间: 2024-10-28 14:34:48

同行总结可即刻上手的IOS规范参考的相关文章

iOS代码规范

这篇规范一共分为三个部分: 核心原则:介绍了这篇代码规范所遵循的核心原则. 通用规范:不局限于iOS的通用性的代码规范(使用C语言和Swift语言). iOS规范:仅适用于iOS的代码规范(使用Objective-C语言). 一. 核心原则 原则一:代码应该简洁易懂,逻辑清晰 因为软件是需要人来维护的.这个人在未来很可能不是你.所以首先是为人编写程序,其次才是计算机: 不要过分追求技巧,降低程序的可读性. 简洁的代码可以让bug无处藏身.要写出明显没有bug的代码,而不是没有明显bug的代码.

奔向三张,不破不立:一个iOS开发工程师的职业规划思考

  大前天下午快下班那会儿,跟念茜聊了一下各自的工作现状,发现她现在碰到的一些职业规划上的困惑,跟我在一年多前的情况非常相似.而我经过一年多来的不断思考和调整,已经基本明确了自己的职业规划,发展的方向变得越来越清晰,配合我个人较强的执行力,困惑越来越少,事情也正在朝着越来越好的方向发展.念茜和我是iOS开发行业中的普通年轻从业人员,因此我们的困惑具有一定的代表性.今天,我就跟大家说说这两年来我的职业规划心路历程,供大家参考.   看过书上自序部分的朋友都知道,我从读硕士开始,就已经进入iOS领域

通过微信Android和iOS版看两大系统差异

由于设计师或者产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照自己的使用习惯进行设计,导致大部分设计师或产品经理做出的设计都是基于iOS规范或习惯.而安卓则照搬iOS.这对于安卓开发而言是个灾难,很多组件本可以直接调用系统,由于按照IOS的设计,则需要开发自己写,研发成本变得很高. 如果设计师或者产品经理有的异常场景状态没有想到,导致安卓开发没有组件调用,为了省事就直接调用安卓自带组件,导致整个产品在视觉风格上面既有产品风格的组件又有安卓系统

WWDC15 Session笔记 - iOS 9 多任务分屏要点

本文是我的 WWDC15 笔记中的一篇,涉及的 Session 有 Getting Started with Multitasking on iPad in iOS 9 Multitasking Essentials for Media-Based Apps on iPad in iOS 9 Optimizing Your App for Multitasking on iPad in iOS 9 iOS 9 多任务综述 iOS 9 中最引人注目的新特性就是多任务了,在很久以前的越狱开发里就已经

PC、iOS、Android通用的交互设计

本文作者@一大坨黄 供职@微博UDChttp://www.aliyun.com/zixun/aggregation/11452.html">设计中心 .近年来,在技术方式,网页自适应的兴起.微软Win8系统的发布,都在试图解决一个问题:让同一产品能在平板.PC等多平台下同时使用. 由此可见,替换掉冗余的多版本开发模式,发展通用性,是未来产品发展的一种趋势.因此,设计师也要在不同的平台规范和习惯中寻找共同点. 针对多平台这一问题,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供

iOS 9多任务分屏要点

iOS 9 多任务综述 iOS 9 中最引人注目的新特性就是多任务了,在很久以前的越狱开发里就已经出现过类似的插件,而像是 Windows Surface 系列上也已经有分屏多任务的特性,可以让用户同时使用两个或多个 app.iOS 9 中也新加入类似的特性.iOS 9 中的多任务有三种表现形式,临时出现和交互的滑动覆盖 (Slide Over),真正的分屏同时操作两个 app 的分割视图 (Split View),以及在其他 app 里依然可以进行视频播放的画中画 (Picture in Pi

iOS Runntime 动态添加类方法并调用-class_addMethod_IOS

上手开发 iOS 一段时间后,我发现并不能只着眼于完成需求,利用闲暇之余多研究其他的开发技巧,才能在有限时间内提升自己水平.当然,"其他开发技巧"这个命题对于任何一个开发领域都感觉不找边际,而对于我来说,尝试接触 objc/runtime 不失为是开始深入探索 iOS 开发的第一步. 刚了解 runtime 当然要从比较简单的 api 开始,今天就罗列整理一下 class_addMethod 的相关点: 首先从文档开始. /** * Adds a new method to a cla

iOS开发系列--通知与消息机制

概述 在多数移动应用中任何时候都只能有一个应用程序处于活跃状态,如果其他应用此刻发生了一些用户感兴趣的那么通过通知机制就可以告诉用户此时发生的事情.iOS中通知机制又叫消息机制,其包括两类:一类是本地通知:另一类是推送通知,也叫远程通知.两种通知在iOS中的表现一致,可以通过横幅或者弹出提醒两种形式告诉用户,并且点击通知可以会打开应用程序,但是实现原理却完全不同.今天就和大家一块去看一下如何在iOS中实现这两种机制,并且在文章后面会补充通知中心的内容避免初学者对两种概念的混淆. 本地通知 推送通

PHP的PSR规范中文版

FIG组织在制定跟PHP相关规范,简称PSR.目前已有4个代码规范,近期抽空翻译成了中文版.建议做PHP的同学都关注一下. 文档仓库地址:https://github.com/hfcorriez/fig-standards 所有已接受的规范参考:https://github.com/hfcorriez/fig-standards/tree/zh_CN/%E6%8E%A5%E5%8F%97 代码样式规范 本指南的意图是为了减少不同开发者在浏览代码时减少认知的差异. 为此列举一组如何格式化PHP代码