博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS 7设计备忘单
阅读量:5268 次
发布时间:2019-06-14

本文共 1231 字,大约阅读时间需要 4 分钟。

iOS 7  IOS6。。。苹果每一代系统UI对应不同的使用终端都有一些设计规范和数值参考,因此在博客上收录此文章以待日后参考。
 
除了网格外,苹果还在icon的尺寸、常用元素以及字体等多个方面进行了更新设计。而iOS 7正式版和新一代iPhone发布后,或许有些元素还会更新,所以如果你有很好的资源,欢迎推荐到这里,让我们把这个文章做的更加丰满。
 
Resolutions & Display Specifications 
 
 
App Icons
 
 
icon在iOS 7中发生了明显的改变,苹果引入了网格系统,圆角设计不同于此前iOS的设计。具体变化可参看:
 
Rounded corners
在iOS 7中,旧的icon圆角已经不见了,苹果引入了一个新图形,被 命名为"superellipse" 。由于苹果并没有发布官方的图形模板,所以不少设计师似乎无从下手。迄今为止,我见过的做好的icon模板是 ,如果你打算为iOS 7设计icon,这个模板是个不错的参考。和往常一样,icon圆角不应该被包含在最终的输出资源中,但如果你想为icon添加效果(比如描边和阴影),那么你在设计过程中还是需要把圆角考虑进去。
 
Grid system
苹果提供了一个黄金比例的网格系统,可以用来正确地调整和对齐icon上的元素。无论如何,网格模板都是非常重要的。
 
User Interface
 
 
iOS 7用扁平化的设计对自身进行了彻底颠覆,几乎移除了所有的渐变和阴影效果,常用的设计元素在某些情况下也发生了改变。
 
 
Status Bar
iOS 7状态栏大小和iOS 6一样,只不过内容外观发生了一些变化。你可以控制背景颜色,以适应你app的外观设计。或者你可以使用默认的颜色主题(黑色和白色)。在iOS 7默认的大部分app中,状态栏和导航栏是融为一体的,中间没有任何间隔。
 
Navigation Bar
导航栏一般包含标题,基本的导航以及行动执行按钮(比如返回按钮、编辑按钮...)横屏模式下,导航栏的高度常常会收缩至32pt,以展现更多内容。
 
 
Table Views
现在,表格(列表)使用了全屏宽度展示,能在视觉上区分不同的table view的只有标题。
 
Iconography
在iOS 7中,不少app并没有用颜色进行填充,而是用1pt厚度的线条勾勒出了icon轮廓。不过,经典的icon仍用颜色进行了填充。
 
Typography
Helvetica Neue仍是iOS默认的字体,但普通文本显得要更细一些,而不是此前的粗体。需要突出强调的文本用的是中粗字体,比如导航栏中的标题。当然,也有其他可选的字体 。一般来说,大部分设计元素上的字体被增强了,可能是因为iOS 7引入了更细的字体。
按钮通常是有颜色的文本链接,但iOS 7中按钮已经是无边框的设计,通过隐喻支持功能。
 

转载于:https://www.cnblogs.com/zerow01/p/3326739.html

你可能感兴趣的文章
html标签的嵌套规则
查看>>
[Source] Machine Learning Gathering/Surveys
查看>>
HTML <select> 标签
查看>>
tju 1782. The jackpot
查看>>
湖南多校对抗赛(2015.03.28) H SG Value
查看>>
hdu1255扫描线计算覆盖两次面积
查看>>
hdu1565 用搜索代替枚举找可能状态或者轮廓线解(较优),参考poj2411
查看>>
bzoj3224 splay板子
查看>>
程序存储问题
查看>>
Mac版OBS设置详解
查看>>
优雅地书写回调——Promise
查看>>
android主流开源库
查看>>
AX 2009 Grid控件下多选行
查看>>
PHP的配置
查看>>
Struts框架----进度1
查看>>
Round B APAC Test 2017
查看>>
MySQL 字符编码问题详细解释
查看>>
Ubuntu下面安装eclipse for c++
查看>>
让IE浏览器支持CSS3圆角属性的方法
查看>>
巡风源码阅读与分析---nascan.py
查看>>