• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 為移動端方案設計而生的Demo使用秘籍—- 設計教程




    教學主題: 為移動端方案設計而生的Demo使用秘籍

    大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

    今天的這個教學主題是: 為移動端方案設計而生的Demo使用秘籍

    這教學的重點為這幾點 [ 秘籍,使用,移動,頁面,原型,Demoo,一個,app,手勢 ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    之前提到騰訊出了一款輕便高效的Demo演示工具,今天這篇文章以全民K歌原型製作為例,介紹從無到有創建一個原型的流程,並在每一個流程中介紹該流程的技巧。

    之前提到騰訊出了一款輕便高效的Demo演示工具,今天這篇文章以全民K歌原型製作為例,介紹從無到有創建一個原型的流程,並在每一個流程中介紹該流程的技巧。

    對於每一位設計師的日常工作來說,如何有效闡述自己的方案是非常關鍵的一步,如果只是一張原型圖方案,無論標註得多麼清楚,都會有一定的溝通理解成本,所以通常都會需要一個原型demo來幫助大家對方案進行直觀的演示,以此闡明方案的各類細節、操作體驗等等。為了幫助大家在移動互聯網時代,快速、簡單地製作原型demo,Demoo應運而生。

    Demoo是基於web設計搭建的一款在瀏覽器內進行可視化操作的工具。通過上傳平面稿件,用手勢或觸點熱區的方式把界面關係連接起來,加入連接轉場特效,輸出一份仿真APP的、可體驗操作的設計方案,滿足在電腦、會議投影現場及手機上體驗操作。

    Step 1:導入圖片

    涉及技巧:批量導入

    在設計工具中,我已經設計好了全民K歌5個主要頁面的圖並命名好保存在文件夾中,準備開始製作原型。如圖所示,Demoo支持批量導入圖片,將我需要的圖片全部選中,拖放到虛框內,即可完成圖片導入工作。導入后,就相當於你已經把app原材料都放到工作台啦,之後操作起來就會特別方便。

    為移動端方案設計而生的Demo使用秘籍

    涉及技巧:圖片排序

    Demoo支持我們對圖片進行拖動排序整理,在標題欄區域鼠標停留,即可發現鼠標指針變為十字型,此時可拖動頁面。友情提示:按照app主tab邏輯擺放頁面,後面建立tab跳轉時,會更輕鬆哦!

    為移動端方案設計而生的Demo使用秘籍

    Step 2:建立tab之間的跳轉

    涉及技巧:運用複製粘貼熱區,快速建立鏈接

    導入之後,自然就是將各個頁面建立跳轉鏈接了,在需要跳轉鏈接的地方,拖動鼠標,即可建立一個熱區,鬆開鼠標可以看到熱區小尾巴,點擊對應跳轉的頁面,再次點擊,一個鏈接完成。這時候,你們會意識到,這麼多跳轉,那我得要點多少次呀?Demoo有個非常驚人的設計是——熱區可複製!!!這就意味着,所有頁面,相同的跳轉可以通過複製來減少操作。這一點在tab的製作過程中省非常多事兒。舉例來看,所有導航裡面的“發現”其實都是鏈接到第二個頁面,於是,我只需要創建一個熱區鏈接,在接下來的幾個頁面中複製粘貼熱區,其他幾個頁面就快速建立好熱區了!最有效的是,複製粘貼的過程中,熱區的位置還不會變!

    為移動端方案設計而生的Demo使用秘籍

    為移動端方案設計而生的Demo使用秘籍

    Step 3:為長頁面固定滾動區域

    涉及技巧:記住頂部bar和底部導航的高度,準確設定滾動區域不留白

    以圖示為例,動態頁面非常長,需要模擬頁面滾動的效果,實際app中,頂bar和底部導航是不會動的,這時候,只需要拖動上下固定的錨點來固定位置就好了。這裡Demoo有一個值得讚美的小細節是,當你拖動錨點時,會放大顯示頁面中間的位置,並且展示錨點拖動的像素值,所以你只要記住頂bar和底部導航的高度,你一定可以拖到一個完美的位置,沒有白邊。

    為移動端方案設計而生的Demo使用秘籍

    Step 4:設置頁面滑動手勢

    涉及技巧:雙擊手勢區域,快速設置手勢熱點

    大屏幕手機越來越泛濫的時候,手勢滑動成為一個很常見的操作,Demoo也可以模擬手勢操作哦!

    如圖所示頁面左邊的一排手指,就是用來設定手勢的,從上到下分別對應左滑、右滑、上滑、下滑的手勢操作,可以根據需要選擇。雙擊手勢,即可出現和熱區尾巴一樣的藍色連接線,在對應需要停留的頁面點擊即可完成手勢操作的設定,完成後,手指變成藍色,示意有手勢操作。圖中,我給了這個頁面一個右滑返回到首頁的操作,模擬手勢返回。

    為移動端方案設計而生的Demo使用秘籍

    Step 5:建立頁面切換方向,打磨細節

    涉及技巧:鼠標停留在切換示意區,預覽動畫效果

    真實的app中,頁面間常常通過方向來示意層級關係,例如重新創建的流程,通常創建頁面會從底部向上呼起,於是,在建立熱區鏈接過程時,我們需要對鏈接進行方向設定。如圖示,我將點歌台呼起的頁面出現形式,設定為從下往上出。如果不是很確定切換效果,Demoo很細心的在這裡設計了動畫預覽,鼠標停留在小方塊上時,會有微動畫示意,多看幾遍也就明白了。

    為移動端方案設計而生的Demo使用秘籍

    Step 6:在手機中預覽原型效果

    涉及技巧:將原型添加到手機桌面,模擬最真實的app體驗

    Demoo支持大家用手Q掃一掃在手機上查看原型,然而在手Q里打開鏈接特別不穩定,一不小心返回了,又要重新掃一遍二維碼。有一個技巧是,可以將原型添加到桌面,且只要設置好,Demoo可以做到app的圖標和閃屏完整模擬,讓你體驗從手機桌面打開app的真實感!點擊屏幕右側的設置,上傳好app圖標和閃屏之後,用手機QQ掃二維碼打開頁面,然後用分享在safari中打開鏈接,在safari中設置分享到屏幕,於是,大功告成,你可以從桌面打開這個app了!是不是傻傻分不清楚是app還是app原型呢!

    為移動端方案設計而生的Demo使用秘籍

    為移動端方案設計而生的Demo使用秘籍

    至此,一個app原型的設計就完整了,歡迎大家掃二維碼圍觀這個簡單的原型。當年全民K歌3.0提案的時候,就拿着這個原型去給產品經理看,產品經理都驚呆了喲!

    為移動端方案設計而生的Demo使用秘籍

    最後,聽說很多試用過的朋友都在詢問,如何在Demoo中模擬浮層的效果,Demoo其實更擅長的是頁面之間的跳轉,那麼如何模擬呢?這裡給大家一個小技巧。

    Step 1:將沒有浮層和有浮層的兩張圖,導入demoo

    為移動端方案設計而生的Demo使用秘籍

    Step 2:在沒有浮層的圖中,點擊出浮層的區域建立熱點,連接到有浮層狀態頁面。

    為移動端方案設計而生的Demo使用秘籍
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    Step 3:在有浮層頁面建立點擊空白返回沒有浮層頁面的熱點鏈接(注意選擇過渡動畫為漸隱哦)

    為移動端方案設計而生的Demo使用秘籍
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    沒錯,用兩個狀態的跳轉,就可以模擬浮層出現啦~ 當然,這個技巧在動效上還不夠完美,劇透一下,Demoo團隊正在全力完善浮層的設計哦,相信後續會有更好用的方法。

    看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

    希望我們所介紹的 為移動端方案設計而生的Demo使用秘籍 這教學會喜歡

    文章標題: 骨子愛創意- 為移動端方案設計而生的Demo使用秘籍–轉載請註明來源處

    本教學分類為平面理論教程中的 設計教程相關教學

    文章相關關鍵字為: 秘籍,使用,移動,頁面,原型,Demoo,一個,app,手勢

    本文永久連結 :為移動端方案設計而生的Demo使用秘籍

    本文轉載自 :VIA