01-iOS设计规范参考-PsdHtml.CN大设计师论坛-更年轻的设计师论坛! - 平面设计 网页设计 PS CDR DW AI设计师交流论坛!

Mesmer
论坛版主
论坛版主
  • UID277
  • 点券965点
  • 1周年尊享
  • 喜欢达人
  • 追星一族
阅读:931回复:11

01-iOS设计规范参考

楼主#
更多 发布于:2015-09-25 17:45,来自:北京市

【全网热帖/新帖】



iOS规范参考

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


以iPhone5 设置页面为基础



高度

  1. 状态栏+导航栏 高度 128px,1px分割线,共129px
  2. 列表内小图标大小 58*58px 圆角为12px
  3. 板块与板块之间的间隔为70px(如果状态栏+导航栏有1px分割线的话距离为69px)
  4. 列表高度为86px

图片:setting.jpg




字体

iPhone的系统字体,在设计稿中最接近的中文字体为黑体-简 英文写作Heiti SC 英文字体为helvetica Regular
  1. 导航字体 中体 样式:浑厚 34px
  2. 列表类字体 细体 样式:浑厚 34px


边距

  1. 上下不限制
  2. 左右距离手机屏幕边缘 左右各30px
  3. 列表内图标上下左右间距30px


以iPhone5通知中页面为例

  1. 板块说明文字 26px 细体 浑厚 与板块距离18px
  2. 列表类标对一级标题说明 24px 细体 浑厚 与一级文字距离8px
  3. 列表高度(包含1px分割线)100px

图片:notice.jpg





以iPhone5的APP Store 更新页面为例

  1. 导航上返回/更新的字体:33px 细体 浑厚(没错就是33px —_—|||);箭头与屏幕边框距离为16px
  2. 控件一级菜单栏内tab切换:580x58px(包括2px描边) tab里字体:24px 细体 浑厚
  3. 搜索框:608x56px;圆角12px;搜索框内字体:28px 细体 浑厚
  4. 更新列表内图标: 128x128px ;圆角:30px
  5. 列表高度(列表不包括向下1px分割线):168px,所以icon距离列表20px
  6. 列表内文字:28px 细体 浑厚;说明性文字:24px 细体 浑厚
  7. 列表内部按钮大小92x52px ,包含2px描边,字体大小28px 细体 浑厚
  8. tabbar下部菜单:高度 98px(包含顶部1px分割线);字体20px 细体 浑厚
  9. 更新通知红点大小: 36x36px 红点内数字 helvetica Regular 24px

图片:update.jpg





屏幕像素尺寸与物理尺寸

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

图片:inch.jpg


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

图片:QQ20150423214634.jpg


这里有一个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)
目前就总结了这些,基本能够理解以后,与开发者合作就比较容易,也能够很好的进行视觉还原的工作!

注:© 作品版权归原作者所有未经允许,请勿用于商业!
原文:http://www.jianshu.com/p/6514816a40fa
有志者事竟成,百二秦关终属楚; 苦心人天不负,三千越甲可吞吴。
Mesmer
论坛版主
论坛版主
  • UID277
  • 点券965点
  • 1周年尊享
  • 喜欢达人
  • 追星一族
沙发#
发布于:2015-09-25 17:45,来自:北京市
站位编辑~~
有志者事竟成,百二秦关终属楚; 苦心人天不负,三千越甲可吞吴。
Lucky____问问
论坛版主
论坛版主
  • UID14
  • 点券251点
  • 1周年尊享
板凳#
发布于:2015-09-25 18:12,来自:浙江省杭州市
然后呢
沐沐、
论坛版主
论坛版主
  • UID35
  • 点券357点
  • 1周年尊享
  • 优秀斑竹
  • VIP会员
  • 荣誉会员
地板#
发布于:2015-09-26 17:09,来自:Unknown
bosco零零七
论坛版主
论坛版主
  • UID1005
  • 点券3645点
  • 1周年尊享
4楼#
发布于:2015-11-01 01:04,来自:美国
不错啊
1150271163
新用户
新用户
  • UID1758
  • 点券19点
5楼#
发布于:2015-11-02 22:19,来自:黑龙江省哈尔滨市
挺好的太好了真好啊5
jiashengaa
新用户
新用户
  • UID2038
  • 点券5点
6楼#
发布于:2015-11-08 20:39,来自:广东省珠海市
不错支持下~!~!
zzzzz
新用户
新用户
  • UID15489
  • 点券2点
7楼#
发布于:2016-05-28 15:49,来自:江西省萍乡市
6666666
QN.
QN.
英勇黄铜
英勇黄铜
  • UID15445
  • 点券7点
8楼#
发布于:2016-06-11 10:58,来自:Unknown
达到顶峰
QN.
QN.
英勇黄铜
英勇黄铜
  • UID15445
  • 点券7点
9楼#
发布于:2016-06-11 11:00,来自:Unknown
人纷纷飞
大兔子啦啦啦
新用户
新用户
  • UID18161
  • 点券0点
10楼#
发布于:2016-06-15 22:52,来自:中国
好棒啊
asssd
英勇黄铜
英勇黄铜
  • UID18614
  • 点券2点
  • 1周年尊享
11楼#
发布于:2016-06-21 22:36,来自:江苏省南京市
66666666
游客


返回顶部