分享 《关于我》

分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS

 
简直了，必须推荐给你们看看！HTML开发Mac OS App 视频教程 （分享自 @土豆） O网页链接
 

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

  1. 对于设计或者开发人员更具指导意义
  2. 保持产品视觉与交互的统一
  3. 提高工作效率 
    …

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

以iPhone5 设置页面为基础

高度

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

字体

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

  1. 导航字体 中体 样式：浑厚 34px
  2. 列表类字体 细体 样式：浑厚 34px

边距

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

以iPhone5通知中页面为例

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

以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

屏幕像素尺寸与物理尺寸

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）

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

【优设四月人气教程】

原文地址： deeper29

作者：@-Deeper

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================ 关于优设网 ================

“优设网uisdc.com“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。

【特色推荐】

设计师需要读的100本书：史上最全的设计师图书导航： http://hao.uisdc.com/book/ 。

设计微博：拥有粉丝量94万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。

设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com

———————————————————–

想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？

添加 优秀网页设计 微信号：【youshege】优设哥的全拼

您也可以通过扫描下方二维码快速添加：

UI设计师必收！同行总结可即刻上手的iOS规范参考的更多相关文章

  1. 8个设计师必看的免费UI图标设计资源站

    图标是我们日常APP及网页设计过程中必不可少的元素之一,通过小小的图标,可以快速方便的实现视觉引导和功能划分.在创作时,我们需要寻找各种各样的图标来满足自己的设计需求,非常浪费时间和精力.今天,小编给 ...

  2. 如何减少UI设计师产品与前端工程师的沟通成本

    在日常工作中,UI设计师/产品与前端工程师难免会有一些冲突,这是我的一些小建议. 1.如何减少时间成本 先制作UI组件,再拼接页面 如果UI给前端的是一堆页面,前端需要花一些时间去整理提取UI组件.另 ...

  3. 谈谈我对Ui设计师的一些观点

    做ui设计师3年多了,对ui设计师在工作中也了解了许多. 作为UI设计师,在工作中需要清楚了解设计的目的,尤其是你做的不是大众化产品,不能以个人认知.很强的主题性来确定. 例如针对儿童人群的app时, ...

  4. 《好设计不简单Ⅱ：UI设计师必须了解的那些事》

    <好设计不简单Ⅱ:UI设计师必须了解的那些事> 基本信息 作者: (日)古贺直树 译者: 张君艳 丛书名: 图灵交互设计丛书 出版社:人民邮电出版社 ISBN:9787115363435 ...

  5. UI设计师给的px尺寸单位，安卓如何换算成dp?

    很多UI工程师为了适配IOS,常常拿IOS手机作用参考模型,设计出来的UI稿只有PX标注的.他们也不懂Android的dp和sp单位是怎么回事.这个时候我们Android工程师如果不注意怎么转换的话, ...

  6. 原来这就是 UI 设计师的门槛

    本文主要分享 UI 设计师入行的一些个人经验指南,希望可以带给新入行业的设计师一点帮助! 写在前面 随着互联网的不断发展,特别是移动互联网的不断成熟,视觉设计师也进行了迭代与细分.衍生出的 UI 设计 ...

  7. 网易微专业 UI设计师

    网易云课堂的UI设计师微专业,需要的留言

  8. 超全面！UI设计师如何适配2018新款iPhone

    北京时间9月13日凌晨1点,苹果在美国加利福尼亚州的Apple Park园区召开了2018年苹果秋季新品发布会. 很多人对这次科技界的春晚充满了期待,除了那些让人“剁手”的新品,设计师关注的还有新手机 ...

  9. UI设计师如何提升审美？

    不得不承认,作为一名设计师,独特的审美能力是设计的灵感所在,不过很多刚刚从事UI设计的人,审美能力真的非常的一般,所以心中难免有这样的疑问,我的审美能通过后天的努力提升吗?关于这点,可以非常肯定的说, ...

随机推荐

  1. 课堂随笔04--关于string类的一些基本操作

    //定义一个空字符串 string strA = string.Empty; strA = "abcdesabcskkkkk"; //获取字符串的长度 int i = strA.L ...

  2. [GeekBand] C++ 基础知识之 The Big Three

    本文是GeekBand课程体系中,侯捷老师讲课内容的部分内容总结. 参考书籍如下:Effitive C++ C++ Primer 第五版 http://blog.csdn.net/lwbeyond/a ...

  3. 【codeforces 787A】The Monster

    [题目链接]:http://codeforces.com/contest/787/problem/A [题意] 把b一直加a->得到x 把d一直加c->得到y 然后问你x和y可不可能有相同 ...

  4. PHP基本的文件和文件夹操作常用的汇总

    资源:http://www.ido321.com/835.html 一.基本文件的操作 文件的基本操作有:文件推断.文件夹推断.文件大小.读写性推断.存在性推断及文件时间等 1: <?php 2 ...

  5. 数学概念 —— 奇异性（Singularity，Vertical tangent）

    0. 基本定义 Singularity (mathematics) 数学上的奇异性一般是指,函数在该点未定义(not defined,比如取值为无穷),或者不可微(fails to be well-b ...

  6. 简明Python3教程 18.下一步是什么

    如果你有认真通读本书之前的内容并且实践其中包含的大量例程,那么你现在一定可以熟练使用python了. 同时你可能也编写了一些程序用于验证python特性并提高你的python技能.如果还没有这样做的话 ...

  7. WPF动画旋转（3轴同时旋转问题）

    原文:WPF动画旋转(3轴同时旋转问题) WPF的资料比较少,做起来不是很方便,之前一直有个XYZ3个轴同时旋转的问题,开始的时候以为通过  this.theRotateX.Axis = new Ve ...

  8. ANDROID 中设计模式的採用--结构型模式

            结构型模式中的适配器模式.外观模式.装饰模式.代理模式都属于包装模式,都是对另外的类或对象的包装,仅仅是各自的意图不同. 适配器模式通过对另外的类或对象的包装,将其接口转换为用户期 ...

  9. 计算机程序设计的史诗TAOCP

    倘若你去问一个木匠学徒:你需要什么样的工具进行工作,他可能会回答你:“我只要一把锤子和一个锯”.但是如果你去问一个老木工或者是大师级的建筑师,他会告诉你“我需要一些精确的工具”.由于计算机所解决的问题 ...

  10. OpenWrt 主的发展版本号trunk MT7620N 无线驱动程序bug

    周边环境: OpenWrt Development Trunk: svn co svn://svn.openwrt.org/openwrt/trunk/ BUG: 1. 无线无法建立连接. 2. 无线 ...