搜索
Hype九九自拍 首頁 學習 教程 查看內容

Mike手把手系列之 (二) 教你如何用Hype做全設備適配

2015-6-15 23:28| 發布者: MIke| 查看: 21234| 評論: 4|原作者: Mike

今天帶給大家的是一個Hype中可以說是設計師們用的最廣泛也最渴望的功能之一,就是響應式布局。同樣也是Hype這款交互軟件比較具有代表性的功能之一。那么,什么是響應式布局呢----響應式布局是Ethan Marcotte在2010年 ...

這里先給大家介紹一款Hype在手機上預覽的app(Hype Reflect)。你可以在手機端實時預覽你在Hype中制作的場景,通過點擊Hype界面上方靠右位置的預覽按鈕,展開的選項中選擇你當前的所使用的手機設備來預覽。

那么下面就正式開始我們這一次的教程:

1.本次我們做的是手機設備上的適配,打開Hype,默認場景的大小為400*600。對于目前的市場和項目設計的經驗來說,我們初步把最小的設備寬度尺寸設定為640px,當然這是我們設計的尺寸。而在前端代碼實現的時候,我們會發現比例剛好是他的一半。所以,在Hype中,我們就把最小的寬度尺寸設定為320px。


至于為什么要設置這個參數,是因為我們需要對不同設備(比如平板和電腦)通過響應式布局中的斷點寬度,制作多個布局,來對不同設備進行寬度范圍斷點。這樣Hype就能判斷當前設備寬度所在的范圍,從而來顯示對應的布局界面。不過對于只需要其中一類設備來適配的話,我們就只需要做對應的斷點范圍就夠了,就像上圖中所示的一樣。不過如果出現特殊的頁面沒法在不同設備下完好顯示的話,可能就需要特殊的方式對待,就像對待不同設備的方法一樣,我們需要通過在320px-550px之間再次進行范圍寬度斷點。來適配在不同手機設備寬度的情況下,依舊顯示完美。斷點有兩種方式:一種你點擊在布局右邊的十字按鈕,來添加布局。第二種是在場景——響應式布局下面通過設置參數大小來斷點寬度/點擊新增布局按鈕。

這里我們先將高度設置成3300px,考慮到后面內容比較多,當然這個你可以任意設置。將頭部圖片拖入到Hype中,這里提一點,不同手機設備的屏幕寬度是不一樣的,有大有小,之所以將下一個響應式布局的斷點寬度定在550px,550px以上基本就是適配平板的初始寬度。所以我們要讓320px至550px之間屏幕寬度的手機設備都能適配,因此需要將圖片的寬度盡量設置的大一下,以便能夠伸縮適配大屏手機設備。

2.這個時候我們先將圖片成組,成組快捷鍵是option+command+g。大家記住這個快捷鍵,因為成組這個功能在我們的制作過程中會經常用到。通過成組我們可以更好的對頁面各個板塊和板塊之間進行管理和分類,也方便我們對場景中的不同元素執行同一行為的好方法。成組后,會出現一個黃色的區域框,這個黃色線框的區域就是這個成組實際顯示的區域,我們將他命名為Part1簡寫成P1,將這個組的寬度拉至和場景同寬,當然你也可以點到度量下面的放置中的寬度設置成320。將內容概覽的選項設置成隱藏,這個時候我們發現,實際區域外面的圖片已經都隱藏了,有點類似于Sketch里面的mask功能。之后我們需要在布局大小寬度后面的縮放勾選上,因為我們需要將寬度以百分比的方式適配設備。

之后我們將模塊選到度量,在下面我們看到一個可調布局的板塊,這里我們要著重講解一下他的用途:

可調布局里面大致分為三塊,第一塊是“固定和伸縮”,第二塊是“預覽”,第三塊是“縮放行為”。圖一為默認狀態,我們可以發現預覽模塊是沒激活的,我們需要通過設置縮放來激活這個模塊。當我們點擊按鈕“編輯縮放設置”的時候,默認將我們跳轉到圖二所示的位置,紅色框標記著的就是需要我們勾選是否讓寬度和高度通過百分比縮放。當我們將寬度的縮放勾選后,我們會發現圖一的預覽模塊已經激活,也就是圖三所顯示的狀態。這是激活后的默認狀態,我們發現“固定與縮放”模塊中,上和左的兩個圖釘呈藍色點亮狀態,其他呈灰色未點擊狀態。在“預覽”模塊的左上角有一個藍色的正方形。我們發現通過點亮邊“固定和縮放”里面圖釘和雙向箭頭時,右邊的預覽模塊會相應地做出改變。

這里我列舉了幾種情況給大家介紹一下:

圖一我們發現,當把右邊圖釘點亮時,正方形顯示在了線框的上方居中的位置(上居中)。圖二,當將4個圖釘點亮后我們發現正方形則顯示在了整個線框區域的正中間(正居中),而圖三我們將左右雙向箭頭點亮時,會發現正方形被拉長了,并且橫向鋪滿了線框(左右平鋪)。而圖4當我們把所有都點亮時我們發現正方形上下同時填充滿了屏幕(全鋪)。整個過程我們可以得出一個結論:上下左右4個圖釘是控制元素顯示上下左右4個位置的,而左右雙向箭頭和上下雙向箭頭則是控制左右平鋪和上下平鋪的。

基本了解了可調布局后,我們接下去講解,為了讓圖片居中顯示,所以我們需要點亮右邊的圖釘,這個時候我們在chrome上預覽一下效果,我們發線圖片正中顯示了,不過顯示的只有場景的大小。


3.為了讓圖片橫向平鋪展開,所以我們需要點亮左右雙向箭頭,這個時候我們在可調布局的預覽里面發現藍色的正方形已經橫向平鋪了。那好,讓我們預覽一下效果,我們可以看到之前被我們隱藏的橫向區域的圖片已經全部顯示出來了。不過他并沒有像之前我們想的一樣,橫向鋪滿整個屏幕,只是把圖片居中全部顯示出來了而已。


4.這里我們需要展開成組,點到圖片層,在可調布局里面將所有的圖釘和雙向箭頭點亮以便讓圖片保持比例放大并且可以鋪滿整個屏幕。當我們都點亮時,我們會發現下面的縮放行為被激活了。這里我們講解一下縮放行為:點擊展開下拉框我們發現選項有“伸縮”,“保留寬高比”,“縮小以適合”和“展開以填充”。“伸縮”其實就是當你需要平鋪的時候,他只是在將圖片拉伸鋪滿屏幕。而“保留寬高比”是讓圖片始終保持寬高比例,不拉伸。而“縮小以適合”和“展開以填充”則是相反的意思,當他執行的時候,會把圖片等比例放大縮小來填充鋪滿整個屏幕。這里我們選擇了“展開以填充”。預覽效果時,我們會發現圖片已經放大鋪滿了屏幕,當我們將瀏覽器橫向縮小時,圖片會始終保持著比例縮小,不拉伸。


5.之后我們插入2個文本文件,居中放置。選中這2個文本層 option+command+g 將他們成組,命名為T1,之后在可調布局里面點亮右邊的圖釘,將他始終保持原個位置,并且居中。這個時候我們預覽一下,會發現無論怎么拖動瀏覽器寬度,成組的T1文件始終顯示在瀏覽器的原位置的正中間。

6.上圖是我們下一步需要完成的內容,這里我們需要一個地圖的素材,和一個制作位置亮點標識的圈。首先我們將2個素材導入到場景中,并居中放置。并將他們成組,命名為Map,下一步我們需要制作動效圈。

這里我們需要講到一個知識點,之后在場景中我們也會應用到。就是符號,和持久符號,在上圖中我們可以看到他們兩者的大致區別所在,符號:是可以重復使用的組件,包含元素,時間線和動畫,雙擊以編輯。而持久符號可以在不同場景直接共享當前內容,不過他們兩則之間是可以互相轉換的。

7.這里我們先將Map組通過可調布局實現居中顯示。之后打開Map組,點選到圈圖層,右鍵選擇持久符號,這里會彈出一個提示框讓我們選擇,添加到當前場景或添加到所有場景。這就是我們之前說的持久符號的功能,能對所有場景共享,這里我們只選擇添加到當前場景。這個時候我們發現,原先圖層左邊的圓圈已經變成了像拼圖塊狀的一個形狀,這就說明該元素已經轉化成了持久符號,我們雙擊進入編輯模式。


在編輯模式下面我們會發現,左邊出現了一個符號的模塊,在這個模塊的類型中我們可以看到,符號和持久符號之間是可以相互轉換的。同樣也有可添加編輯的動畫時間線,和下面給出可執行的動作,所以我們是可以給符號單獨設置動作的。

簡單介紹完了符號模塊后,我們繼續前面的講解如何制作位置亮點標識的圈:先將圖層復制一層,并將其和原先的圖層重疊,開啟紅色按鈕錄制動畫,制作一個放大然后逐漸消失的動效:將復制的圖層放大以后,移動至中心位置,將其的透明度降到0。這樣我們就完成了 這個閃爍圈的動畫,我們將這個動畫復制,點右鍵使用動畫粘貼,通過動畫粘貼我們可以完整地將元素的動畫時間軸復制下來。然后我們將這復制的兩層錯開,讓他有個層次感。拖動至合適位置后,再后面的時間軸上,加一個開始時間線-主時間線的關鍵幀,讓他能夠在場景中無限循環。點擊chrome進行預覽,他已經顯示在屏幕的中間了,效果還不錯。

8.之后我們將文章的標題和內容復制到場景中,居中放置,和前面一樣的操作,將他們成組,在可調布局中點亮右邊的圖釘,讓其在屏幕中間居中顯示。

9.導入我們的素材圖片,放大到適合的位置將其成組,命名為P3。通過調整成組的框色區域框,留下我們需要顯示這張圖片合適的位置,在內容概覽中,將其設置為隱藏,隱藏掉除場景以外的圖片內容。將該成組在可調布局中設置成橫向平鋪。此時我們還需要將圖片等比例鋪滿整個屏幕。所以我要展開P3成組,點到圖片這一層,將其可調布局中的圖釘和雙向箭頭全部點亮。ok,操作完成后,讓我們在chrome中瀏覽效果吧。拖動瀏覽器的寬度我們發現。圖片會隨著屏幕寬度的改變而等比例填充滿整個屏幕。

10.這一步的操作和前面一樣我就直接帶過了。

這里我要補充一點,圖上所示:我們也可以對文字單獨進行編組,來讓他適配屏幕大小。操作一樣,我們將這段文字成組,在可調布局里,將其右邊的圖釘點亮,左右雙向箭頭點亮,讓這個成組本文,橫向平鋪屏幕。同樣,我們展開成組,點選文字層,將其可調布局設置同樣的操作:點亮右邊圖釘和左右雙向箭頭。預覽一下效果,我們發現,當我們改變瀏覽器屏幕寬度的時候,文字也會根據不同屏幕寬度做出相應的適配。


好了,這里我已經將如何適配不同手機設備的方法教給大家了。

至于設配全設備的話,就像上圖所示的一樣,我們就需要對界面排版做出調整,因為在不同的設備下面,屏幕的寬度是很不一樣的,如在平板和電腦中的話我們就需要做多個布局設計,并且通過斷點寬度范圍來適配了。手機設備斷點范圍:320px-550px,平板設備斷點范圍:550px-768px。768px-960px這個范圍,他這里團案標識是橫向的平板,這里我們可以理解成一般的電腦屏幕就行了,最后960px至以上就是指大屏高分辨率電腦屏幕。但是具體對元素的操作步驟方法是一樣的。我們只需要設計出不同設備時候的界面就可以了,這里我就不列舉了,相信大家了解手機設備適配的話,全設備適配也不在話下了吧。

在下面的下載中,我會附上官方案例和我此次做的案例文件。供大家學習參考。

鏈接: http://pan.baidu.com/s/1gd0H3Sv 密碼: r2fw

16

鮮花

握手

雷人

路過

雞蛋

剛表態過的朋友 (16 人)

發表評論

最新評論

引用 CHANCE 2016-4-8 16:50
沒懂啊,符號那個頁面是怎么出來的啊?
引用 Gmax 2016-1-22 10:12
您好,能出個視頻講解一下嗎,初學者..有點看不太懂 謝謝!!
引用 MIke 2015-8-13 15:04
建議不錯,會考慮的
引用 tonycm 2015-7-27 13:29
gif 動畫太大.建議容易搞錯的才步驟才放GIF動畫.其他的直接截圖. 或者直接錄視頻放出來

查看全部評論(4)

為廣大Hype愛好者提供一個學習交流的平臺

正在努力制作Hype教程,盡可能為大家帶來最新的體驗!

Copyright © 2015 Comsenz Inc. Powered by Discuz! X3.1

返回頂部