1. 程式人生 > >android應用開發-從設計到實現 3-1 原型設計

android應用開發-從設計到實現 3-1 原型設計

原型設計

通過前面幾個章節,我們已經掌握了安卓系統Material Design設計的大致原則。接下來,我們開始嘗試將這些原則和方式運用到實際的專案當中。

效果圖與互動原型

產品原型的設計又可以分成兩個階段,

  1. 高保真效果圖:這是產品的靜態效果圖,圖紙上的設計效果與最後實際產品基本上是一模一樣。產品中使用到的各種圖示都可以從高保真效果圖中截取出來使用(這裡其實指的是使用sketch進行介面原型設計,它可以從效果圖中提取圖示素材)。

  2. 可以互動的原型產品:為了向產品的規劃者(PM-產品經理)確認設計的正確性,同時向後繼的開發人員展示正確的設計意圖,設計師需要創建出一種能具有互動功能的原型產品。這種原型產品就像是一個已經開發完成了的最終產品,可以進行點選操作,具有互動性。

    當然這畢竟只是一個“虛假”的產品,只是具備了展示的功能。

接著創意階段的工作,需要我們將天氣應用框線圖的規劃,變成一個像模像樣的產品原型。設計師需要根據功能點,結合Material Design的設計裡面,創造出一個讓使用者在視覺和互動上滿意的產品。這種創造需要結合設計師的個人能力和經驗。

我們的天氣應用很簡單,它簡化了很多的功能,按照原型設計的兩個階段,可以將他們設計成下面這個樣子,

  • 高保真效果圖:

     sketch_weather_app_static_effect_complete
  • 可以互動的原型產品:

     origami_weather_app_complete

假如設計師設計的產品互動方式,很容易被開發者理解,那麼動態互動原型也是可以不用設計的。不過,為了更加全面的展示設計的具體過程,我們這裡會首先設計一套天氣應用

的高保真效果圖。然後在此基礎上,設計一套可以互動的產品原型。

這裡我們的互動設計,參考了Material DesignAppbar可以上下滑動的效果,

 appbar_scroll_toolbar_txt

設計工具

設計高保真的效果圖時,我們選擇採用了MacOS上才能使用的Sketch。這是一款付費軟體,大家可以在它的官網看到詳細的資訊。官網也提供了功能完善的試用版,作為初次的學習,大家可以通過它來練練手,實際的感受一下。

 sketch_website

Sketch絕對是當今甚至未來幾年應用程式介面設計行業中的主角,越來越多的設計師使用它來進行原型設計。

它的優點有,

  • 體積小,執行時佔用的資源少,效能高;
  • 可以從設計的效果圖中,直接匯出開發時需要使用的圖片;
  • 匯出的圖片可以針對不同螢幕解析度的裝置;
  • 內建了安卓系統、iOS系統常用的公共元件(例如狀態列、常用控制元件、螢幕標準尺寸),可以拿來就用,不必全部重新設計;

設計可互動原型時,使用了FaceBook推出的Origami Studio,它可以把我們的靜態效果圖,轉化成一個可以互動的原型。

 origami_website

使用它有兩個原因,

  1. 這是一個免費的工具,有著強大的動畫互動功能;
  2. Sketch製作的原型檔案,可以直接匯入到Origami Studio當中,減少設計的工作量;

SketchOrigami Studio一前一後互相配合,奠定了一個產品的牢固基石。

本文是《從設計到實現-手把手教你做android應用開發》系列文件中的一篇。感謝您的閱讀和反饋,對本文有任何的意見和建議請留言,我都會盡量一一回復。

如果您覺得本文對你有幫助,請推薦給更多的朋友;或者加入我們的QQ群348702074和更多的小夥伴一起討論;也希望大家能給我出出主意,讓這些文件能講的更好,能最大化的幫助到希望學習開發的夥伴們。

除了CSDN釋出的文章,本系列最新的文章將會首先發布到我的專屬部落格book.anddle.com。大家可以去那裡先睹為快。

同時也歡迎您光顧我們在淘寶的網店安豆的雜貨鋪。店中的積木可以搭配成智慧LED燈,相關的配套文件也可以在這裡看到。

這些相關硬體都由我們為您把關購買,為大家節省選擇的精力與時間。同時也感謝大家對我們這些碼農的支援。

最後再次感謝各位讀者對安豆的支援,謝謝:)