Giter Site home page Giter Site logo

diveintoevernote's Introduction

Evernote交互与实现

意味深长与历久弥新之美,蕴涵于简约之中,于清晰之中,于高效之中。真正的简约远不止是删繁就简,而是在纷繁里建立秩序。——Jonathan Ive

设计师的职责应该是在秩序下规约自己的设计,而又不受限于教条主义。Evernote的新版本很'iOS7',但又有建立于新特性之上的特别演绎。交互实现的方式自然,流畅,还在不经意间心头为之一颤。

每一款顶级的App都有太多可以学习的地方,作为普通用户,也许不会太去关注丰富的交互细节,但是作为App的制造者们:设计师关注视觉,PM关注功能,交互设计师关注交互和结构,程序员思考如何去实现。所以,写这篇文章,目的仅仅是将Evernote这个App当做一个参考,去探究它的交互如何实现,把我不知道的变成我知道的。

UICollectionView+UIDynamicKit

input_bar

和以前的版本一样,Evernote没有使用Tabbar来组织功能选项,而是使用一个滚动视图来放置第一级的功能选项。在实际的实现中,应该会用到滚动视图的子类--UICollectoinView ,因为新版本中使用了UIDynamicKit的特性,而这些新特性,对UICollectoinView又有一些便捷的方法可以使用,还有另外一个重要的愿意是,点击一级功能选项时,呈现二级功能所在的视图控制器时有一个动画效果。

input_bar

对于一款笔记应用来说,记录和阅读是最重要的两个功能。在首屏,为方便新增笔记,输入视图一直保持在可见的位置,视图本身是半透明的,可以看到滚动视图的内容,当到达滚动视图的末尾,自动跟随到项目尾部。在到达滚动视图的两端时,继续滚动,则使用了类似弹簧的特性,增加了一些趣味性。

视图控制器切换动画

input_bar

文章列表与文章内容视图切换

input_bar

文章内容视图之间切换

input_bar

输入视图动画

input_bar

富文本编辑

diveintoevernote's People

Contributors

irusher avatar

Watchers

James Cloos avatar Emilyzyw avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.