The Animation Tools Learn iOS Design - 笔记

Posted on Edited on

Learn iOS Design 是 Design Code 第一本，详细介绍了iOS 设计的方方面面，几乎每篇都是理论加工具。总体很全面，还有待进一步的实践中得到提高。

Core Philosophies

讲解了设计的哲学，和最低的三个要求：consider the touch interface, make the text readable and optimize for the iPhone 5, 6 and 6 Plus.

iOS is driven by 3 core philosophies: deference, clarity and depth.

In Retina, typography should have a minimum size of 11pt. The optimal size for reading is around 16pt.

Designing for iOS 9

详细讲解了 iOS 9 上常见控件的合理布局大小。

iOS uses vibrant colors to bring out the buttons.

iOS often uses neutral colors to serve as the background and menu areas.

iOS-Colors

Learn Colors

色彩运用和对比是 HSB 在数值上更有易于理解和对比。
下面介绍了：单色系、相似色、互补色、中间色、反色等色彩运用。将用的中间色的色板、颜色的含义、原质化设计(Material Design)颜色、阶梯色(UI Gradients)。

use colors only to draw attention to a button or element of importance.

I suggest starting with a vibrant, pastel color that is Primary or Secondary.

These are the colors used by Apple in their native apps. They’re vibrant and perfect for buttons, icons and actionable items.

I can easily map in my mind how much Hue, Saturation and Brightness. Those values make a lot more sense to me.

Meaning In Colors：I suggest reading this guide about colors.

This is a nice collection of gradients: http://uigradients.com

Learn Typography

介绍了一些字体常用使用，和字体网站。

字体一些基础知识：位置线、有无衬线字体

Typography-Basics

Let’s look at these 5 rules of good typography and apply them to modern design for mobile and for Websites.

The font size should be at least 11pt to be readable on the iPhone, iPad and Apple Watch. While that is the minimum value, the recommended size for the body text is actually15-18pt.

At 12-18pt, use Regular. At 18-24pt, use Light, at 24-32pt, use Thin and at 32pt or more, use Ultralight. Notice that for each scale, the text remains readable while looking clean and sophisticated.

Typography-LineHeight

“People say design isn’t art. It isn’t. Great design is art.”

字体资源网站：

* Google Fonts
* Typekit
* fonts.com

Learn Animations

介绍动画在交互中的作用，和一些基本原则，以及一些做动画原型的工具。

Good animations enhance, bad animations distract.

Good animations should provide feedback on taps and gestures, and give a sense of direct manipulation.

Modern apps tend to use Spring and Ease animations much more than Linear.

Animation-Good

Animation Curve

On Spring, an animation framework that I created for iOS, I made available a bunch of preset animations that combine many transforms at once. They can be inexpensively integrated to your app, without even learning how to code. 和 IBAnimatable 类似的一个不用代码的动画库。

效果视频：https://designcode.io/cloud/chapter1/Animation-Spring.mp4

Animations Shouldn’t Last Longer Than 1 second.

“Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.” 

– Steve Jobs

The Animation Tools:

  • Principle
  • Flinto for Mac
  • Pixate
  • Origami
  • Framer
  • After Effects

UI Icons

好水的一章，介绍一些图标的网站。

图标要表意，避免于其他app混淆，除非故意为之。

UI Sounds

音效也是应用增强体验的一个方面，可应用在通知、正操作反馈和负操作反馈。

Design Inspiration

介绍获取涉及灵感的方式：观察生活中的技艺，看书，和一些网站。

书：

  • Becoming Steve Jobs
  • Steve Jobs by Walter Isaacson
  • Jony Ive: The Genius Behind Apple’s Greatest Products
  • Dieter Rams
  • Elon Musk
  • The Tipping Point,
  • Outliers,
  • Blink,
  • David and Goliath
  • What The Dog Saw

网站：Twitter、Medium、Sidebar

it’s about 10% reading, 30% writing and collecting, and 60% design and code.

Design Principles

介绍了设计常见的几个原则和作者个人的一些建议：自学能力、尽可能少的设计、三原则法、一万小时法、做梦想的事、休息为强者准备的。

Getting Your Product Out There

介绍了产品运营的一些建议。

Benefits, Not Features