當前位置:首頁 » 圖片軟體 » 軟體原型開發圖片
擴展閱讀
電腦桌面怎麼設置圖片 2025-02-02 08:20:34
手繪卡通汽車圖片 2025-02-02 08:19:50
唯美的風景圖片情侶 2025-02-02 08:18:22

軟體原型開發圖片

發布時間: 2023-08-27 05:39:14

① 如何用 Keynote 做App原型設計

靜態圖


1. 先用畫好的線框圖或者直接在keynote里用色塊布局


2. 填充圖片,可調整陰影等基本效果


3. 導出圖片放進手機里


4. 根據用戶反饋調整


動畫效果


1. 利用Keynote自帶的物件動畫


2. 活用Keynote最棒的「神奇移動」轉場效果


3. 手機裝上keynote app打開演示文檔


4. 根據反饋調整效果


交互事件


1. 調整圖片尺寸導入Xcode


2. 僅用針對圖片的簡單代碼


3. 僅用簡單的交互手勢代碼


首先:製作靜態圖


1. 先用畫好的線框圖或者直接在keynote里用色塊布局,keynote提供了多種智能的對齊,布局,格式等等設計方式,整個過程會非常的輕松。比如自動標尺吸附等距等等,比絕大多數原型製作軟體都簡單人性化。



2. 對照一些線框圖可以繼續鋪色塊和布局,這個過程中你會發現這個對齊和吸附的過程是多麼的神奇。



3. 導入圖片,Keynote有很多種方式可以調整素材樣式,包框,陰影,透明圖,實時遮罩等等。是的,你可以用PS慢慢玩,也可以用keynote一鍵完成。



4. 很多人用原型軟體是看中那些控制項,其實大多數控制項還不如自己在Keynote里製作快速。而且Keynote自帶了很多標志和Icon,完全不用到處去找了。比如這個例子里的打分用五星,改個黃色就可以了。



5. 依次類推,可以很快做出很多頁面,導出圖片格式,在手機中查看。



第二階段,假互動,加入動畫效果


具體關於為何這么做,每個階段完後的反饋過程,目標等等原理的東西請大家看視頻或者PDF吧,這里主要說下過程和他們是怎麼充分發揮Keynote在原型製作中的特點的。


比如這個假互動的階段,如果你不用Xcode的話,這個就是交互原型的最後階段了。基本原理就是活用圖片,活用物件動畫,活用轉場動畫,足以做出以假亂真的原型,只要你的測試用戶不要瞎點......


關於Keynote自帶的動畫有非常多種和微調效果,起初我不是很理解,因為很多花哨的效果很難用到幻燈片里,直到開始做原型發現,其實很多動畫經過調整都是很好的交互效果,包括現在看到的一些令人驚艷的反彈,延遲等逼真的細節動作,Keynote早就可以微調模擬了。


據說錘子手機和蘋果的很多交互效果,都是先用Keynote做出來再給工程師寫出來的。(是文末附的許岑視頻中說的,好像是,記不清了,無責任據說預警)


1. 製作動畫有很多方式,可以根據你的職業,習慣選擇不同的方法。



也有很多很巧妙的方式,其中最簡單,最快的就是一定要靈活運用圖片。靈活到什麼程度,我舉個視頻裡面全場爆笑的例子。動畫是這樣的:敲擊鍵盤,字元一個個的蹦著出現在屏幕上。裡面說,我可以只用一行或者乾脆不用代碼就做出來。這個用Keynote就可以實現,各位可以想想。


2. 特別提到一個Keynote獨有的「神奇移動」效果。可以把前一頁中的物件移動或放大到下一頁中。效果非常出眾。



好了,其實至此,絕大多數的動畫效果都可以做出來了。如果不滿足於此,學點簡單的語法,在Xcode里只用針對圖片和交互相關的代碼就可以做出更加逼真的原型了。