Step 07: Make it ScrollYouTube↗  IA↗(long shot)
Education  52.5K views 158 likes 1 dislikes   17 Dec 2018
Dani Beaumont 27.1K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
Well as you know, screens -- be it web pages or mobile apps -- are rarely all the same
Wie Sie wissen, haben Bildschirme, ob von Web-Seiten oder Apps,
exact height, and this design is a perfect example of that. What usually
selten genau die gleiche Höhe. Dieses Design ist ein gutes Beispiel dafür.
happens when you have a longer screen is that the user is able to scroll down on
Bei einem höheren Bildschirm kann der Benutzer normalerweise nach unten scrollen.
the design. Let's go ahead and implement that for this artboard, I'm going to come
Wir implementieren dies jetzt für diese Zeichenfläche.
here in "Design" mode, and just click on the artboard name here "Blog".
Ich klicke im Designmodus auf den Namen der Zeichenfläche „Blog“.
Notice that the Repeat Grid goes away -- that's okay for right now. With the
Das Wiederholungsraster wird ausgeblendet.
artboard selected I'm going to come to the controls on the right, and in the
Die Zeichenfläche ist ausgewählt und ich wechsle zu den Steuerelementen rechts.
scrolling section I want to click on the drop down and select "Vertical". Coming
Im Abschnitt „Bildlauf“ klicke ich auf die Dropdown-Liste und wähle „Vertikal“.
back to my artboard, I'm going to select the bottom control handle and press and
Dann wähle ich in der Zeichenfläche den unteren Auswahlgriff aus,
drag down until I can see all four of the grid items that I defined, and when I
klicke und ziehe ihn nach unten, bis alle vier Rasterelemente angezeigt werden, die ich definiert habe.
do so notice I get the dotted line indicating the bottom of the viewport. If
Beachten Sie, dass eine gepunktete Linie den unteren Rand des Viewports anzeigt.
for some reason I wanted that to be larger in its default state I can always
Wenn er im Standardzustand höher sein soll,
grab this control handle, and press and drag it down. Right now it's the perfect
kann ich auf diesen Griff klicken und ihn nach unten ziehen.
height for the rest of my site design. Now since that was a rather complicated interaction to implement let's take a quick look at our work. In the "Preview"
Er hat jetzt jedoch die perfekte Höhe für den Rest des Designs. Da diese zu implementierende Interaktion recht kompliziert war, wollen wir unsere Arbeit im Vorschaufenster kurz überprüfen.
window you'll want to make sure that you still have the artboard selected, so go
Sie müssen sicherstellen, dass die Zeichenfläche noch ausgewählt ist.
ahead and click on "Blog" to make sure it is active, and then you can go over to
Klicken Sie also auf „Blog“, damit die Zeichenfläche aktiviert ist.
hit the "Preview Desktop" button there on the upper right-hand corner. I'm going to
Dann können Sie rechts oben auf die Vorschau-Schaltfläche klicken.
use a shortcut key that allows me to do that automatically by hitting either
Ich verwende eine Tastenkombination, um dies automatisch auszuführen, und zwar
Command- or Control and then return on the keyboard. That brings up my "Preview"
durch Drücken der Befehls- oder Strg-Taste und Eingabetaste.
window. I can bring it up a bit higher here. Notice my default viewport there.
Dadurch wird das Vorschaufenster geöffnet. Ich kann es etwas höher ziehen. Hier ist der Standard-Viewport,
But I can come in and scroll down and see the additional items that I've added here in my design.
ich kann aber nach unten zu den zusätzlichen Elementen scrollen, die ich im Design hinzugefügt habe.
Similar videos:

Step 01: Make an Artboard
Dani Beaumont
96.3K views 225 likes 5 dislikes 17 Dec 201850% match

Step 05: Make a List
Dani Beaumont
51.9K views 141 likes 2 dislikes 17 Dec 201850% match

Step 08: Make the Header Sticky
Dani Beaumont
70.8K views 185 likes 41 dislikes 17 Dec 201840% match

Step 04: Preview the Prototype
Dani Beaumont
50K views 146 likes 1 dislikes 17 Dec 201826% match

Step 03: Create Prototype Transitions
Dani Beaumont
80.7K views 230 likes 4 dislikes 17 Dec 201826% match

Step 00: Introduction
Dani Beaumont
107.9K views 481 likes 15 dislikes 17 Dec 201825% match

Step 02: Add an Image
Dani Beaumont
90K views 187 likes 20 dislikes 17 Dec 201820% match

Step 09: Change Styles
Dani Beaumont
48.9K views 140 likes 7 dislikes 17 Dec 201820% match


Settings Privacy About Contact Donate