Methods and systems for transitioning between native content and web content
View Patent ↗In an electronic device, a cover page of a first content item is displayed and a first swipe gesture in a first direction is detected. In response to detecting the first swipe gesture, the electronic device transitions from displaying the cover page to displaying the first content item. During the transition, a portion of the cover page and a portion of the first content item are simultaneously displayed. After the transitioning, the first content item is displayed, and a second swipe gesture is detected in a second direction substantially opposite to the first direction. In response to detecting the second swipe gesture, the electronic device transitions from displaying the first content item to displaying the cover page, during which the portion of the first content item and the portion of the cover page are simultaneously displayed.
1. A method, comprising:
at an electronic device having one or more processors and memory storing instructions for execution by the one or more processors:
downloading, from a first source, a cover page of an article;
displaying, in a social-network interface, the cover page of the article, wherein the article is downloadable from a second source distinct from the first source;
detecting a first swipe gesture in a first direction;
in response to detecting the first swipe gesture, transitioning from display of the cover page of the article to display of the article in the social-network interface, comprising:
decreasing, according to a total distance traversed by the first swipe gesture, an amount of the cover page displayed while proportionally increasing an amount of an intermediate view displayed; and
after a threshold portion, less than all, of the article is downloaded from the second source, ceasing display of the intermediate view and displaying at least a first portion of the article;
while displaying the article, detecting a second swipe gesture in a second direction substantially opposite to the first direction; and
in response to detecting the second swipe gesture and in accordance with a determination that a total distance traversed by the second swipe gesture satisfies a distance threshold, transitioning from display of the article to display of the cover page of the article in the social-network interface, comprising simultaneously displaying the first portion of the article and a first portion of the cover page.
2. The method of claim 1 , further comprising:
detecting a third swipe gesture in a third direction substantially perpendicular to the first direction and the second direction; and
in response to detecting the third swipe gesture, transitioning to display of a cover page of a different article in the social-network interface.
3. The method of claim 2 , wherein:
the third swipe gesture is detected while displaying a respective portion of the article in the social-network interface; and
transitioning to display of the cover page of the different article comprises transitioning from display of the respective portion of the article.
4. The method of claim 3 , further comprising:
after transitioning from display of the respective portion of the article to display of the cover page of the different article:
detecting a fourth swipe gesture in a fourth direction that is opposite to the third direction; and
in response to detecting the fourth swipe gesture, transitioning to display of the respective portion of the article in the social-network interface.
5. The method of claim 4 , wherein the fourth swipe gesture is detected while displaying the cover page of the different article.
6. The method of claim 1 , wherein:
the cover page of the article comprises a title and a byline; and
the article comprises the title, the byline, and a body of content.
7. The method of claim 6 , wherein:
the cover page of the article further comprises a picture; and
the article further comprises a scaled-down version of the picture.
8. The method of claim 1 , wherein:
displaying the cover page of the article is performed within a first application that provides the social-network interface;
transitioning from display of the cover page of the article to display of the article and transitioning from display of the article to display of the cover page of the article are performed within the first application; and
displaying the article is performed within the first application.
9. The method of claim 1 , wherein displaying the article comprises initially displaying a second portion of the article after the cover page is no longer displayed.
10. The method of claim 9 , further comprising:
detecting a third swipe gesture in the first direction; and
in response to detecting the third swipe gesture, displaying a third portion of the article, distinct from the first portion and second portion.
11. The method of claim 1 , further comprising:
detecting a third swipe gesture that occurs before the second swipe gesture, the third swipe gesture being in the second direction and having a magnitude less than a magnitude of the second swipe gesture; and
in response to detecting the third swipe gesture and in accordance with a determination that a total distance traversed by the third swipe gesture does not satisfy the distance threshold, displaying an elastic rebound of a top portion of the article.
12. The method of claim 1 , wherein:
the first swipe gesture is a substantially vertical swipe in the first direction; and
the second swipe gesture is a substantially vertical swipe in the second direction.
13. An electronic device, comprising:
one or more processors; and
memory storing one or more programs for execution by the one or more processors, the one or more programs including instructions for:
downloading, from a first source, a cover page of an article;
displaying, in a social-network interface, the cover page of the article, wherein the article is downloadable from a second source distinct from the first source;
detecting a first swipe gesture in a first direction;
in response to detecting the first swipe gesture, transitioning from display of the cover page of the article to display of the article in the social-network interface, comprising:
decreasing, according to a total distance traversed by the first swipe gesture, an amount of the cover page displayed while proportionally increasing an amount of an intermediate view displayed; and
after a threshold portion, less than all, of the article is downloaded from the second source, ceasing display of the intermediate view and displaying at least a first portion of the article;
while displaying the article, detecting a second swipe gesture in a second direction substantially opposite to the first direction; and
in response to detecting the second swipe gesture and in accordance with a determination that a total distance traversed by the second swipe gesture satisfies a distance threshold, transitioning from display of the article to display of the cover page of the article in the social-network interface, comprising simultaneously displaying the first portion of the article and a first portion of the cover page.
14. A non-transitory computer-readable storage medium storing one or more programs for execution by one or more processors of an electronic device, the one or more programs including instructions for:
downloading, from a first source, a cover page of an article;
displaying, in a social-network interface, the cover page of the article, wherein the article is downloadable from a second source distinct from the first source;
detecting a first swipe gesture in a first direction;
in response to detecting the first swipe gesture, transitioning from display of the cover page of the article to display of the article in the social-network interface, comprising:
decreasing, according to a total distance traversed by the first swipe gesture, an amount of the cover page displayed while proportionally increasing an amount of an intermediate view displayed; and
after a threshold portion, less than all, of the article is downloaded from the second source, ceasing display of the intermediate view and displaying at least a first portion of the article;
while displaying the article, detecting a second swipe gesture in a second direction substantially opposite to the first direction; and
in response to detecting the second swipe gesture and in accordance with a determination that a total distance traversed by the second swipe gesture satisfies a distance threshold, transitioning from display of the article to display of the cover page of the article in the social-network interface, comprising simultaneously displaying the first portion of the article and a first portion of the cover page.
15. The method of claim 1 , wherein:
the first source is a social-network system; and
the second source is a third-party server that is distinct from the social-network system.
16. The method of claim 1 , wherein displaying the intermediate view comprises displaying a blank window.
17. The method of claim 16 , wherein displaying the intermediate view further includes displaying a progress bar that corresponds to the downloading of the article.
18. The method of claim 1 , wherein displaying the intermediate view comprises displaying interactive content.
19. The method of claim 18 , wherein displaying the intermediate view further includes displaying a progress bar that corresponds to the downloading of the article.