当前位置: 首页 > 编程日记 > 正文

【转】《iOS7 by Tutorials》系列:iOS7的设计精髓(上)

简介:

本文翻译自《iOS7 by Tutorials》一书的第一章“Designing for iOS 7”,主要从程序员角度介绍了iOS7的新设计理念,堪称神作!本文翻译仅作学习交流之用,版权归原作者所有,有删减。非专业翻译人士粗糙之处在所难免,想体会原文精髓的朋友请到Raywenderlich商店支持正版。

—————— by 葛布林大帝

关于作者:

这篇文章的原作者是Jeremy Olson,一个顶级设计师加程序大牛,多款应用位列苹果商店的前100名。虽说本文主题是界面设计,但其伟大的地方在于,它是说给程序猿听的!

目录:

一、iOS7的设计不同以往

  • 1.为什么要为iOS7重新设计?
  • 2.iOS7的新设计原则
  • 3.iOS7的设计关键字:聚焦

二、聚焦于功能

  • 1.应用的定义
  • 2.一个想做所有事的应用,什么都做不了
  • 3.一个为想为所有人设计的应用,谁都吸引不了

三、聚焦于设计基础

  • 1.对比度
  • 2.重复
  • 3.对齐
  • 4.靠近
  • 5.排版

四、聚焦于内容

  • 1.删除不必要的内容
  • 2.内容为王

五、聚焦于交互

  • 1.魔法般的Touch
  • 2.直接操作
  • 3.物理仿真和动画
  • 4.三维
  • 5.手势和导航
  • 6.个性

六、在App世界留下你的印记

七、最后的挑战

一、iOS7的设计不同以往

1.为什么要为iOS7重新设计?

我的团队意识到,花一些时间重新设计我们的应用以适应iOS7是一项有价值的投入。专为iOS7设计的应用将会在苹果商店如鱼得水,因为:

  • 用户
    • 希望自己使用的应用适应iOS7环境
  • 媒体
    • 不想要看起来老旧的应用作为封面
  • 苹果
    • 更喜欢应用迎接他们的新设计原则

2.iOS7的新设计原则

正如许多人一样,刚开始接触iOS7时,我也很不爽它的改变:扁平化、毫无质感并且单调。但过了一段时间我开始喜欢上它,因为我发现了苹果最新的设计原则有迹可循:

  • 新的焦点
    • 所有的重点其实就是让你的视线聚集到内容与交互上,你不再需要总是上下扫视来寻找你需要的内容。
  • 多样化的到来
    • 最好的iOS7应用将不仅仅是模仿“设置”或“日历”的界面。最好的应用将使用新的设计语言作为起点,并且把他们创新到极致。就像iOS6上最好的应用一样,一旦iOS7平台成熟,将会产生大量的多样化应用.

现在让我们一起解开层层包裹,在iOS7上构建伟大的应用吧!

3.iOS7的设计关键字:聚焦

当我开始为iOS7设计应用时,我试图寻找一个词汇来解释所有事情,现在我将要说这个词就是:聚焦。

与很多流行的观点相反,iOS7并不是关于扁平化的设计。它包含了大量惊人的非扁平化元素,事实上iOS7的三维元素比以往任何iOS早起版本都多。相应的,iOS7其实移除让人分心的元素,以聚焦在三个关键概念上(这些概念反复被苹果用来描述他们的新设计哲学):

  • 清晰
    • 聚焦于基本图形设计,把目光放在功能上
  • 顺从
    • 聚焦于内容
  • 深度
    • 聚焦于交互

我相信最好的iOS7应用将会用他们独特的方式阐述这三个概念。

二、聚焦于功能  

伟大的应用并不是从你拿出你的速写本或打开Photoshop开始,相反的,它开始于两个问题:

  • 谁是这个应用的用户?
  • 这个应用解决什么问题?

1.应用的定义

一个应用的定义听起来像这样:谁是应用的使用者?这个应用解决什么问题?而我的应用里,这个定义听起来像这样:为特定用户提高效率

2.一个想做所有事的应用,什么都做不了

你的应用应该聚焦在一个问题上。如果你无法用一句话来描述你的应用是干嘛的,那你的应用一定是太大了,并且很难给人留下深刻印象。这使得用户疑惑你的应用具备哪些功能,并且难以与用户的朋友分享。

3.一个为想为所有人设计的应用,谁都吸引不了

让一个应用为所有人设计其实是一个陷阱。当你的应用为所有人设计,其实就是不为任何人设计。不过如果你为一个特定人群设计应用,并且让他们使用得爽的话,他们就有可能带动另一群人来使用你的应用。

三、聚焦于设计基础

自从iOS7不再强调质感的用户界面元素例如纹理、倾斜和chrome,你需要牢牢抓住图形设计的基础原则。Steven Bradley这样形容它:

当你剥开一件事物的装饰,留下的应该是它的核心基础。很不幸的是,太多的扁平化设计仅仅聚焦在外表的扁平化上,而忽视了最基础的设计准则。”

让我们不要落入这个陷阱。虽然我不能充分满足设计的所有的基本层面,但我至少可以讲一些基本的图形设计原则,让我们开始吧!

1.对比度

1.1.对比度简介

对比度是两个元素之间的视觉差异,它可以通过颜色、纹理或其他元素风格来形成对比。左边的文本具有高对比度,因为文本颜色与背景颜色非常不同,这使得文本非常可见;右侧的文本与背景对比度非常低,这使得它几乎看不见。请注意你的眼睛会自动吸引到左边的框,高对比度元素的合理应用可以让你的设计大放异彩。对比度是一个非常强大的工具,但必须谨慎地使用。如果在屏幕上出现太多的高对比度元素,用户的眼睛会不知道往哪儿放。

1.2.对比度的作用

  • 高亮
    • 强调最重要的元素,淡化次要的元素
  • 秀色可餐
    • 让整体的设计更具视觉活力
  • 状态
    • 显示一个元素的状态是活动还是休眠
  • 可读性
    • 确保文本易于阅读

1.3.对比度之挑战

1.3.1.问题:

一起来看看下面的截图,显然这个用户界面是有缺陷的。但究竟错在哪里?你会怎样解决它?

记下所有你注意到的设计缺陷(提示:它没有使用对比!),接着看看下面有注解的版本:

1.3.2.注解版本

1.3.3.修改版本

啊哈!现在界面看起来好多了!这些新的设计更加美观、专业并且更具功能性。

2.重复

2.1.重复简介

重复听起来像这样:同一个对象或样式重演。如果两个元素有联系,他们应该有着相似的视觉风格。缺乏重复的UI看起来很奇怪,因为人类使用模式思维来感知世界。

2.2.重复之挑战

2.2.1.问题:

再一次,看看下面的屏幕截图。对,它看起来不专业,但是为什么呢?和以前一样,记下任何你的发现(提示:它有很多元素需要重复!)

2.2.2.注解版本:

2.2.3.修改版本:恰当地使用重复,使这个应用更容易直观呈现所需的信息

3.对齐

3.1.对齐简介

对齐是关于视觉对象相互连接的方式。任何程序员应该好好学习对齐,因为定位错误是程序员实现设计时最容易犯错的地方之一。对应的基本思路是,不应在屏幕上任意摆放元素,每一个元素应至少与其他一个元素连接。这可能意味着两件事情:

  • 边缘对齐
    • 沿着边缘线垂直或者水平对齐
  • 居中对齐
    • 居中垂直或水平对齐

3.2.对齐之挑战

3.2.1.问题:来看看下面的截图,看你是否能找出对齐的问题

3.2.2.注解版本:从远处看,下面的屏幕看起来还好。但如果你仔细观察,你会发现,对准误差使画面看起来蓬乱和业余。看下图的对齐线:

3.2.3.修改版本:红色的线表示水平对齐方式,屏幕上的元素没有精确对准的任何其他元素,造成对齐线的杂乱。对齐线是非常有用的工具,利用它调整一下界面,看,更少的对齐线代表元素的整齐,这让用户的眼睛更加舒服:

4.靠近

4.1.靠近简介

靠近指的是,如果一些元素是相关的,他们应该靠在一起。如果两个元素没有关系,他们应该远离对方。开发者往往希望最大化利用屏幕,最好每个像素都塞满东西。虽然这可能是有效的,但也产生了一个混乱的布局。留白,这是你组织元素时最强大的工具,它能帮助你的用户毫不费力的理解各内容的意义。

4.2.靠近之挑战

4.2.1.问题:看看你能不能找出下图的靠近问题

4.2.2.注释版本

4.2.3.修改版本:很明显,无关的元素不当靠近,会使元素之间的关系非常混乱。你将如何解决这些问题?下面是我的一个解决方案,但总有很多不同的方式来解决设计问题。当一切都正确组合时,应用中各元素的功能将更加清晰!

5.排版

5.1.排版原则

下面是排版时要考虑的一些通用规则:

  • 5.1.1.最多使用三种字体
    • 这包括不同字体和同一字体内风格的组合,如字体、颜色、大小、以及粗体和斜体修饰符的组合。太多的字体会打乱你的布局一致性。
  • 5.1.2.有节制地使用文字居中
    • 有时候,你绝对需要居中的文本,如导航栏标题,但经验告诉我们最好尽可能避免使用它。左或右对齐的文本布局通常显得更加专业。
  • 5.1.3.保持你的字体简单
    • 增强文本易读性。
  • 5.1.4.提前测试字体大小
    • iOS7提供用户修改字体大小的选项。一定要提前在你的应用上测试所有能选择的字体大小,使之看起来都一样的舒适。
  • 5.1.5.使用差异较大的字体来区分内容
    • 同一屏幕上尽量少用相似的字体,那会让用户分不清它们的区别。应用差异较大的字体,让用户轻易分辨出它们内容的不同。
  • 5.1.6.使用同一字体的风格变换
    • 灵活运用字体颜色、大小、以及粗体和斜体修饰符的组合,用以突出一些重要的内容。

这么多条要记住可能不容易,其实你只需要记住最关键的一条:让用户界面保持一致。如果应用界面看起来不够舒适,那排版一定出了什么问题。

5.2.排版之挑战

5.2.1.问题:下面的排版出了什么问题?

5.2.2.注释版本

5.2.3.修改版本

这个程序已经变得更漂亮、更实用,而你所做的仅仅是改变字体。

转载于:https://www.cnblogs.com/zhw511006/p/3708463.html

相关文章:

有兴趣的执行一下这段代码

有兴趣的执行一下这段代码:staticpublicstringGetConfigiuageConnString() { Guid dataLinksGuid new Guid("2206cdb2-19c1-11d1-89e0-00c04fd7a829"); Type dataLinksType Type.GetTypeFromCLSID(dataLinksGuid, true); …

python爬虫知识点总结(二十三)Scrapy中Download Middleware的用法

待更新转载于:https://www.cnblogs.com/cthon/p/9424551.html

(C++)输入3个字符串,按从小到大的顺序输出。

#include<cstdio> #include<cstring> //1.利用指针编写两个字符串的比较函数 //2.利用二位字符数组接收3个字符串 //3.输出排序后的字符串 void s_to_b(char str1[10],char str2[10]){char temp[10];strcpy(temp,str1);strcpy(str1,str2);strcpy(str2,temp); }void…

Mysql备份还原数据库之mysqldump实例及参数详细说明

我们在运营项目的过程中肯定会遇到备份数据库&#xff0c;还原数据库的情况&#xff0c;我们一般用一下两种方式来处理&#xff1a; 1.使用into outfile 和 load data infile导入导出备份数据 这种方法的好处是&#xff0c;导出的数据可以自己规定格式&#xff0c;并且导出的是…

女性护理品牌Honeymate获8000万A+轮融资,将与美图公司深度合作

8月5日消息&#xff0c;女性护理品牌“美则Honeymate”于今年7月获美图公司8000万A轮战略融资&#xff0c;资金主要用于品牌扩张以及用户体系、会员体系的建立&#xff0c;也将与美图公司深度合作&#xff0c;为美图超5亿用户创造更多价值。 美则Honeymate&#xff08;深圳市护…

桌面图标不透明的小问题处理

"我的电脑"--"属性"--"高级"--"设置",将下框"在桌面上为图标标签使用阴影"打勾. 在"自定义桌面"里去除相应"桌面网页"项.通过如上两步一般就可以去除图标后面的方框背景, 早上一来遇到位同事问我桌面图…

<论文翻译>RepVGG: Making VGG-style ConvNets Great Again

RepVGG:让VGG风格的卷积网络再一次伟大 文章目录RepVGG:让VGG风格的卷积网络再一次伟大摘要1. Introduction2. Related Work2.1 从单路径到多分支2.2 有效的单路径模型的训练2.3 模型重新参数化2.4 温诺格勒(Winograd)卷积3. 通过结构性重新参数化构建RepVGG3.1 简单就是快&…

关于android布局的两个属性dither和tileMode,background 平铺

http://blog.csdn.net/yuxiaohui78/article/details/8196043转载于:https://www.cnblogs.com/leihupqrst/p/3711725.html

volatile - 如何实现线程安全

2019独角兽企业重金招聘Python工程师标准>>> volatile关键字&#xff0c;在我之前的博客 Volatile - 用途 中已经简单讲解过&#xff0c;当时提出了volatile在多线程中是不安全的。本文将重点介绍一种使用方式&#xff0c;可以实现线程安全。 首先&#xff0c;来看一…

【我翻译的文章】你还需要数据层吗?

随着LINQ的临近发布&#xff0c;独立数据访问层的必要性需要重新进行评估了。它是否仍是应用程序设计的一个重要部分&#xff1f;或者它是否会变成一个过去的附属物&#xff1f; 详细信息请访问&#xff1a;http://www.infoq.com/cn/news/2007/08/DAL转载于:https://www.cnblog…

正则表达式最常用的符号匹配

字符描述\d代表任意数字&#xff0c;就是阿拉伯数字 0-9 这些玩意。\D大写的就是和小写的唱反调&#xff0c;\d 你代表的是任意数字是吧&#xff1f;那么我 \D 就代表不是数字的。\w跟 \w 唱反调&#xff0c;代表不是字母&#xff0c;不是数字&#xff0c;不是下划线的。\n代表…

一道多线程编程题

有意思的一道多线程编程题请用多线程显示&#xff0c;每三个数字为一组&#xff0c;直到30线程A&#xff1a;1线程A&#xff1a;2线程A&#xff1a;3线程B&#xff1a;4线程B&#xff1a;5线程B&#xff1a;6线程A&#xff1a;7线程A&#xff1a;8线程A&#xff1a;9public cla…

垃圾回收机制:

2019独角兽企业重金招聘Python工程师标准>>> 垃圾回收机制&#xff1a; 1、GC通过确定对象是否被活动对象引用来确定是否收集该对象。 2、触发GC的条件 1)GC在优先级最低的线程中运行&#xff0c;一般在应用程序空闲即没有应用线程在运行时被调用。但下面的条件例外…

爬虫入门知识笔记

1.爬虫是什么 定义一&#xff1a; 网络爬虫&#xff08;又被称为网页蜘蛛&#xff0c;网络机器人&#xff09;就是模拟浏览器发送网络请求&#xff0c;接收请求响应&#xff0c;一种按照一定的规则&#xff0c;自动地抓取互联网信息的程序。原则上,只要是浏览器(客户端)能做的事…

SQL SERVER中什么情况会导致索引查找变成索引扫描

原文:SQL SERVER中什么情况会导致索引查找变成索引扫描SQL Server 中什么情况会导致其执行计划从索引查找&#xff08;Index Seek&#xff09;变成索引扫描&#xff08;Index Scan&#xff09;呢&#xff1f; 下面从几个方面结合上下文具体场景做了下测试、总结、归纳。 1&…

wait跟sleep的区别

区别 wait sleep 线程 自动唤醒 object的方法只要 线程碰到wait就要等 待不能指定哪个线程等待 Thread的方法 wait用于同步 在任何地方使用 自动释放锁 不会释放锁 转载于:https://www.cnblogs.com/-try/p/3714954.html

AMD真龙一族网络社区成立

AMD成立了一个网络社区&#xff0c;叫"真龙一族"&#xff0c;在各大厂商里这的确为一创新之举&#xff0c;看来AMD对自己的产品确实是非常的有信心。有打算买电脑的人可进去看看&#xff0c;参考一下。地址http://www.longamd.cn/default.htm转载于:https://www.cnbl…

<论文阅读>CascadePSP: Toward Class-Agnostic and Very High-Resolution Segmentation via Global and...

名词解释&#xff1a; 双三次插值&#xff1a;双三次插值是一种更加复杂的插值方式&#xff0c;它能创造出比双线性插值更平滑的图像边缘。 **标题翻译&#xff1a;**通过全局和局部优化进行面向不可知类和超高像素图像的分割 CascadePSP: Toward Class-Agnostic and Very Hig…

【转】MYSQL入门学习之十:视图的基本操作

转载地址&#xff1a;http://www.2cto.com/database/201212/176775.html 一、视图的基本介绍 www.2cto.com 视图是虚拟的表。与包含数据的表不一样&#xff0c;视图只包含使用时动态检索数据的查询。使用视图需要MySQL5及以后的版本支持。下面是视图的一些常见应用&#xff1…

自动化运维之SaltStack,批量安装httpd实战

SaltStack原理 SaltStack由Master和Minion构成&#xff0c;Master 是服务端&#xff0c; 表示一台服务器&#xff1b;Minion是客户服务端&#xff0c;表示多台服务器。在Master上发送命令给符合条件的Minion,Minin就会执行相应的命令&#xff0c;Master和Minion之间是通过ZeroM…

我的面试(四)补充1

突然想起来前天面试时&#xff0c;考官问我out参数和ref参数的区别。我当时答的是out是出的&#xff0c;ref可以来回传参。也就是说out参数是进不来的&#xff0c;而ref是可以进来了。今天写代码试了试。从新整理一下关于out和ref的区别。static void Function1(out int outPar…

(C++)输入10个整数,将其中最小的数与第一个数对换,把最大的数与最后一个数对换。要求用3个函数实现,分别为输入10个数、进行处理、输出10个数。要求使用指针的方法进行处理。

#include<cstdio> //输入10个整数&#xff0c;将其中最小的数与第一个数对换&#xff0c;把最大的数与最后一个数对换。要求用3个函数实现&#xff0c;分别为输入10个数、进行处理、输出10个数。要求使用指针的方法进行处理。 //编写函数——输入10个数 //编写函数——进…

深入biztalk消息以及消息订阅发布路由机制(二)-消息订阅【转】

一.消息订阅 订阅消息的主体叫订阅服务器&#xff0c;订阅服务器是可以订阅并消费消息的服务&#xff0c;可以作为订阅服务器的服务类型目前有四类&#xff0c;在BizTalkMgmtDb管理数据库中的adm_ServiceClass的Name字段列出了所有可以作为订阅服务器的服务类型&#xff0c;包括…

poj1625Censored!(AC自动机+dp)

链接 第一次做这种题目&#xff0c;参考了下题解&#xff0c;相当于把树扯直了做DP&#xff0c;估计这一类题都是这个套路吧。 状态方程dp[i][next] dp[i][next]dp[i][j] ;dp[i][j]表示长度为i的第J个结点的时候满足题意的num&#xff0c;next为当前j点所能走到的下一个合法的…

图解5G NR帧结构

子载波间隔 与LTE&#xff08;子载波间隔和符号长度&#xff09;相比&#xff0c; NR支持多种子载波间隔&#xff08;在LTE中&#xff0c;只有15 Khz这种子载波间隔&#xff09;。 在3GPP38.211中&#xff0c;有关于NR子载波间隔类型的总结。 具体的子载波间隔类型如下图所示&a…

(C++) A+B 输入输出练习IV 每行的第一个数N,表示本行后面有N个数。 如果N=0时,表示输入结束,且这一行不要计算。

#include<cstdio>/* 4 1 2 3 4 5 1 2 3 4 5 0 */int main(){int n,a;while(scanf("%d",&n),n){int sum 0;for(int i 0;i<n;i){scanf("%d",&a);sum a;}printf("%d\n",sum); }return 0;}

jQuery与其它库冲突的解决方法(转)

原文出处&#xff1a;http://www.jb51.net/article/24014.htm 在jQuery库中&#xff0c;几乎所有的插件都被限制在它的命名空间里。全局的对象都很好地存储在jQuery命名空间里&#xff0c;因此当把jQuery和其它javascript类库一起使用时&#xff0c;不会引起冲突. (注意&#x…

ASP.NET 下载文件方式

protected void Button1_Click(object sender, EventArgs e){/*微软为Response对象提供了一个新的方法TransmitFile来解决使用Response.BinaryWrite下载超过400mb的文件时导致Aspnet_wp.exe进程回收而无法成功下载的问题。代码如下&#xff1a;*/Response.ContentType "a…

ITIL管理思想的执行工具发布

E8.HelpDesk是融入ITIL管理思想&#xff0c;并结合中国企业实施ITIL的实际需求&#xff0c;成功研发ITIL管理思想的执行工具&#xff0c;全面帮助中国企业高效导入ITIL管理体系&#xff0c;提升企业战略执行力。 E8.HelpDesk支持多种服务台管理体系&#xff0c;支持事件管理、问…

(C++)A+B 输入输出练习V 输入的第一行是一个正数N,表示后面有N行。每一行的第一个数是M,表示本行后面还有M个数。

#include<cstdio>/* 2 4 1 2 3 4 5 1 2 3 4 5 */int main(){int n,a;scanf("%d",&n);while(n--){int sum 0,m;scanf("%d",&m);for(int i 0;i<m;i){scanf("%d",&a);sum a;}printf("%d\n",sum); }return 0;}