導航:首頁 > 軟體資訊 > axure怎麼畫app原型

axure怎麼畫app原型

發布時間:2022-06-17 11:14:06

Ⅰ 怎麼使用 axure畫手機端頁面原型

axure有手機頁面模板,不過官網上是要付費了。
或者,你可以按手機網頁布局畫,當個普通頁面畫就成了,只要你和你的下家能看懂就成。

Ⅱ 如何用axure畫app原型圖

多學習,多練手


畫好原型後

1.下載Axure

2.如果是給itouch或者iPhone用的,比較好辦,直接用320×480的解析度畫好輔助線,然後畫原型

3.按F5生成原型的時候,在「Mobile/Device」選項中可以設置適配移動設備的特殊原型

4.設置說明見下圖:(頁面大小顯示我的這個設置是按320×480的大小,默認不縮放)


Ⅲ 如何用Axure快速製作APP交互原型

目前比較好的解決辦法是:

下載Axure

2.如果是給itouch或者iPhone用的,比較好辦,直接用320×480的解析度畫好輔助線,然後畫原型

3.按F5生成原型的時候,在「Mobile/Device」選項中可以設置適配移動設備的特殊原型

4.設置說明見下圖:(頁面大小顯示我的這個設置是按320×480的大小,默認不縮放)

5.用你的移動設備訪問你生成的原型鏈接(如本地伺服器,或Dropbox託管)6.把該頁面創建一個桌面快捷方式7.完成(有icon,有閃屏)

另:想做滑鼠動作或者復雜的頁面交互比較麻煩,不推薦,盡量簡潔。

Ⅳ 如何用Axure規范地畫出APP原型的交互

創建屬於自己的元件庫

原型製作工具的核心功能無非就是通過元件的堆砌組合,來展示產品的目標形態和效果。Axure自帶的只是一些最基本的元件,而網上的元件庫龐雜混
亂,很難找到滿足需求並且稱心的元件,並且大部分都是點陣圖格式,根本無法修改顏色寬度等數值,製作出來的交互又怎麼能達到精美的水準要求呢?

還好Axure提供了「創建部件庫」的功能,能夠支持我們製作一份屬於自己的元件庫。我們可以通過軟體自帶的基本元件搭配組合出我們常用的圖標、控制項,製作完成後,每次應用的時候還能根據實際情況調整顏色、大小、線寬的數值,從而才能實現交互稿統一完美的風格。

比如,APP中經常會用到一些主頁、分享、搜索、消息....各種圖標,或者我們每次遇到喜歡的圖標,都可以用Axure畫出來,以備不時之需。下邊以圖標為例講一下製作元件庫的具體步驟。

一、創建元件庫「綠色文件」

打開Axure,在元件庫面板「三條橫線」按鈕下拉選項中找到「創建部件庫」功能,點擊會彈出一個另存為對話框,這里需要選擇元件庫文件的存儲位置,並需要輸入元件庫的名稱。

此時,我們可以看到,文件的後綴名為 .rplib,這個就是元件庫的格式,而不同於創作交互原型時正常Axure文件的.rp格式。

輸入文件名稱和存儲位置之後,點擊保存,Axure將重新打開一個新頁面進行元件的編輯。並且我們可以看到,新頁面跟我們平時創造.rp正常文件的
頁面一模一樣,但不要混淆,此時頁面編輯的是我們在正常.rp文件中需要用的基本元件。並且我們回到元件庫存儲的位置可以看到,元件庫.rplib文件圖
標為」綠色「,不同於.rp文件的藍色。

創建好元件庫得」綠色文件「後,基本准備工作已經做完,下邊就進入到製作過程。

二、元件庫分組

通過觀察Axure默認的元件庫,我們可以看到其元件庫是可以按照類別進行分組的。比如默認的分成了:common、forms、flow等等,這樣能更方便我們找到目標元件的位置。

同樣,我們在製作元件庫的時候,也可以進行分組,規則為:在頁面導航面板上,所有的文件夾都是一個分組,所有沒有在文件夾下的頁麵包括其所有子頁面,都隸屬與以元件庫為名的分組下。

分組的規則弄明白之後,我們可以先按照自己對元件庫的規劃進行一個合理的分組,比如要做APP的元件庫,那麼我們可以分成:圖標、控制項、框架 3個常用分組,接下來就進入到具體元件的製作過程。

三、編輯並製作元件

我們以製作一個」我的「頭像圖標為例,首先在圖標分組下,添加一個頁面並命名為」我的「,雙擊進入到元件編輯頁面,編輯操作就跟我們平時製作正常
的.rp文件一模一樣。我們我們可以參考一些app中常常採用的」我的「圖標樣式,然後用Axure默認的基本形狀元件,比如矩形、橫線、圓形等,組合拼
湊成最終比較理想的樣子。

首先我們要明確,Axure中沒有類似PS中的布爾運算(能夠自由的對多個形狀進行編輯,比如合並、相交、減去頂層等),所以會給我們製作元件,尤
其是圖標帶來一定局限性,但好在交互原型並不要求苛刻的細節實現,只要我們能夠很清楚的表示出產品形態,有比較整體的風格就可以了。並且我們用Axure
基本形狀自己勾畫出來的圖標,能很方便的調整顏色大小等,可以適用不同的交互文件,這就是從網上找現成的點陣圖圖標很難達到的便利性。

回到「我的」圖標製作,如圖所示,我一共用到了三個基本形狀來進行拼湊,最終組合成了我們經常能看到的一個圖標樣式,並且一眼就能明白它的含義。雖然沒有更多的細節實現,但對於交互原型稿來說已經完全夠用,關鍵是顏色大小等可以很靈活的進行修改。

按照這個思路,我們可以製作更多的圖標出來,當然還可以製作一些常用控制項比如按鈕、appbar、搜索欄、圖標佔位符等等。如下圖,是我在畫「讀讀日報」原型圖時製作的一個元件庫:

元件庫製作完成之後,然後就進入到最後一個步驟。

四、載入自製元件庫並使用

元件庫製作完成保存在自己常用的資源文件夾中。打開一個正常的.rp文件,同樣是在元件庫面板「三條橫線」按鈕下拉選項中找到「載入部件庫」功能,然後找到製作完成的元件庫文件「綠色圖標」載入。

載入之後,我們就可以在「選擇元件庫」下拉選項中,找到剛剛載入的元件庫並選中,然後我們就可以像使用軟體自帶的元件一樣使用我們自製的元件庫了。

怎麼樣,看到這里你應該學會了如何自製一個元件庫了吧,希望你會花時間動手做一個。當然除了創建部件庫,Axure有很多技巧都需要掌握,比如母版的功能。

學會善用母版

在產品的設計過程中,主導航往往出現在多個頁面,比如APP的底部tab欄。當然不僅僅是導航,當我們頻繁使用任何一組控制項的時候,希望你不是一直都在復制和粘貼,永遠記住,創建一個母版可能是更好的選擇。

使用母版的便利性不單單體現在能夠快速的使用一組控制項,尤其是在設計後期,當我們需要修改某些基本控制項的時候,母版帶來的修改效率一定會讓你深深的愛上這個功能,欲罷不能。

除了學會使用母版,更要學會善用母版。同樣有一點希望能記住,不要把太大的組合對象變成母版。因為越是大的組合對象,越是有可能需要在母版的很多地
方做出修改。此時把一些母版和另外一個母版合並起來一般會是更好的辦法,這樣對母版的修改會更加的靈活,比如下圖,將產品基本信息和可能購買狀態分開成兩
個母版,組合在一起成為產品的完整頁面

制定一套自己的交互風格

學會了創建自己的元件庫,也懂得了善用母版,當然還有其他很多Axure軟體的使用技巧。應該就可以很快速的完成一份交互原型稿了吧,可是又該如何保證交付稿有統一的風格,達到較高的目標水準呢?

首先,我們要熟悉APP的設計規范,符合Android或者iOS的設計理念,對於一些常規的控制項設計規則有一定的了解。這樣設計出來的產品才能符
合這個平台的特性,並且基於大家對相關平台的一些固有認知,很容易能夠達成共識。這也是交互原型作為一個溝通交付物應該達成的目標。

基於對APP設計規范的熟悉,同時在製作過程中,要根據使用場景以及自己的習慣來制定一套自己的交互風格。比如可以定義好APP原型中,正文字體采
用 微軟雅黑 顏色#333333 13字型大小、提示文字為微軟雅黑 顏色#999999
10字型大小、固定的appbar行高為40px,內容據左側屏幕邊緣10px距離......

當然某些規范,比如字體也可以當成一個字體元件,放到我們自製的元件庫中,總之要根據自己的情況靈活的運用。有了一套風格之後,加上創建的元件庫隨意修改顏色大小等,我相信製作出來的交互原型肯定是協調統一的整體。

讀讀日報原型製作

理論方法掌握了,需要實踐的鍛煉才能更好的吸收領悟。我參照「讀讀日報」iOS版,對主要的一些頁面畫了一些交互原型。基本過程和思路就是按照本文所提到的這些內容。

為了更有形象感,從網上找來一個iPhone手機的邊框,並且創建自己的部件庫,繪制了一些常用的圖標和控制項。然後設定了整體的風格,製作過程中也用到了幾個母版提高效率,同時可以使用輔助線幫助自己保證部件的對齊、平均分布等,進而提高布局的美感。

總結

末尾再次拋出我開篇提到的,如何用Axure快速製作APP交互原型的方法論:製作屬於自己的元件庫並要學會善用母版,熟悉APP設計規范並要有自己一套交互風格樣式。

Ⅳ 如何在Axure中正確設置APP原型的尺寸

目前比較好的解決辦法是:

下載Axure

2.如果是給itouch或者iPhone用的,比較好辦,直接用320×480的解析度畫好輔助線,然後畫原型

3.按F5生成原型的時候,在「Mobile/Device」選項中可以設置適配移動設備的特殊原型

4.設置說明見下圖:(頁面大小顯示我的這個設置是按320×480的大小,默認不縮放)

5.用你的移動設備訪問你生成的原型鏈接(如本地伺服器,或Dropbox託管)6.把該頁面創建一個桌面快捷方式7.完成(有icon,有閃屏)

另:想做滑鼠動作或者復雜的頁面交互比較麻煩,不推薦,盡量簡潔。

Ⅵ 如何用Axure快速製作APP交互原型

一、創建元件庫「綠色文件」
打開Axure,在元件庫面板「三條橫線」按鈕下拉選項中找到「創建部件庫」功能,點擊會彈出一個另存為對話框,這里需要選擇元件庫文件的存儲位置,並需要輸入元件庫的名稱。
此時,我們可以看到,文件的後綴名為 .rplib,這個就是元件庫的格式,而不同於創作交互原型時正常Axure文件的.rp格式。
輸入文件名稱和存儲位置之後,點擊保存,Axure將重新打開一個新頁面進行元件的編輯。並且我們可以看到,新頁面跟我們平時創造.rp正常文件的頁面一模一樣,但不要混淆,此時頁面編輯的是我們在正常.rp文件中需要用的基本元件。並且我們回到元件庫存儲的位置可以看到,元件庫.rplib文件圖標為」綠色「,不同於.rp文件的藍色。
創建好元件庫得」綠色文件「後,基本准備工作已經做完,下邊就進入到製作過程。
二、元件庫分組
通過觀察Axure默認的元件庫,我們可以看到其元件庫是可以按照類別進行分組的。比如默認的分成了:common、forms、flow等等,這樣能更方便我們找到目標元件的位置。
同樣,我們在製作元件庫的時候,也可以進行分組,規則為:在頁面導航面板上,所有的文件夾都是一個分組,所有沒有在文件夾下的頁麵包括其所有子頁面,都隸屬與以元件庫為名的分組下。
分組的規則弄明白之後,我們可以先按照自己對元件庫的規劃進行一個合理的分組,比如要做APP的元件庫,那麼我們可以分成:圖標、控制項、框架 3個常用分組,接下來就進入到具體元件的製作過程。
三、編輯並製作元件
我們以製作一個」我的「頭像圖標為例,首先在圖標分組下,添加一個頁面並命名為」我的「,雙擊進入到元件編輯頁面,編輯操作就跟我們平時製作正常的.rp文件一模一樣。我們我們可以參考一些app中常常採用的」我的「圖標樣式,然後用Axure默認的基本形狀元件,比如矩形、橫線、圓形等,組合拼湊成最終比較理想的樣子。
首先我們要明確,Axure中沒有類似PS中的布爾運算(能夠自由的對多個形狀進行編輯,比如合並、相交、減去頂層等),所以會給我們製作元件,尤其是圖標帶來一定局限性,但好在交互原型並不要求苛刻的細節實現,只要我們能夠很清楚的表示出產品形態,有比較整體的風格就可以了。並且我們用Axure基本形狀自己勾畫出來的圖標,能很方便的調整顏色大小等,可以適用不同的交互文件,這就是從網上找現成的點陣圖圖標很難達到的便利性。
回到「我的」圖標製作,如圖所示,我一共用到了三個基本形狀來進行拼湊,最終組合成了我們經常能看到的一個圖標樣式,並且一眼就能明白它的含義。雖然沒有更多的細節實現,但對於交互原型稿來說已經完全夠用,關鍵是顏色大小等可以很靈活的進行修改。
按照這個思路,我們可以製作更多的圖標出來,當然還可以製作一些常用控制項比如按鈕、appbar、搜索欄、圖標佔位符等等。如下圖,是我在畫「讀讀日報」原型圖時製作的一個元件庫:
元件庫製作完成之後,然後就進入到最後一個步驟。
四、載入自製元件庫並使用
元件庫製作完成保存在自己常用的資源文件夾中。打開一個正常的.rp文件,同樣是在元件庫面板「三條橫線」按鈕下拉選項中找到「載入部件庫」功能,然後找到製作完成的元件庫文件「綠色圖標」載入。
載入之後,我們就可以在「選擇元件庫」下拉選項中,找到剛剛載入的元件庫並選中,然後我們就可以像使用軟體自帶的元件一樣使用我們自製的元件庫了。
怎麼樣,看到這里你應該學會了如何自製一個元件庫了吧,希望你會花時間動手做一個。當然除了創建部件庫,Axure有很多技巧都需要掌握,比如母版的功能。
學會善用母版
在產品的設計過程中,主導航往往出現在多個頁面,比如APP的底部tab欄。當然不僅僅是導航,當我們頻繁使用任何一組控制項的時候,希望你不是一直都在復制和粘貼,永遠記住,創建一個母版可能是更好的選擇。
使用母版的便利性不單單體現在能夠快速的使用一組控制項,尤其是在設計後期,當我們需要修改某些基本控制項的時候,母版帶來的修改效率一定會讓你深深的愛上這個功能,欲罷不能。
除了學會使用母版,更要學會善用母版。同樣有一點希望能記住,不要把太大的組合對象變成母版。因為越是大的組合對象,越是有可能需要在母版的很多地方做出修改。此時把一些母版和另外一個母版合並起來一般會是更好的辦法,這樣對母版的修改會更加的靈活,比如下圖,將產品基本信息和可能購買狀態分開成兩個母版,組合在一起成為產品的完整頁面
制定一套自己的交互風格
學會了創建自己的元件庫,也懂得了善用母版,當然還有其他很多Axure軟體的使用技巧。應該就可以很快速的完成一份交互原型稿了吧,可是又該如何保證交付稿有統一的風格,達到較高的目標水準呢?
首先,我們要熟悉APP的設計規范,符合Android或者iOS的設計理念,對於一些常規的控制項設計規則有一定的了解。這樣設計出來的產品才能符合這個平台的特性,並且基於大家對相關平台的一些固有認知,很容易能夠達成共識。這也是交互原型作為一個溝通交付物應該達成的目標。
基於對APP設計規范的熟悉,同時在製作過程中,要根據使用場景以及自己的習慣來制定一套自己的交互風格。比如可以定義好APP原型中,正文字體採用 微軟雅黑 顏色#333333 13字型大小、提示文字為微軟雅黑 顏色#999999 10字型大小、固定的appbar行高為40px,內容據左側屏幕邊緣10px距離......
當然某些規范,比如字體也可以當成一個字體元件,放到我們自製的元件庫中,總之要根據自己的情況靈活的運用。有了一套風格之後,加上創建的元件庫隨意修改顏色大小等,我相信製作出來的交互原型肯定是協調統一的整體。
讀讀日報原型製作
理論方法掌握了,需要實踐的鍛煉才能更好的吸收領悟。我參照「讀讀日報」iOS版,對主要的一些頁面畫了一些交互原型。基本過程和思路就是按照本文所提到的這些內容。
為了更有形象感,從網上找來一個iPhone手機的邊框,並且創建自己的部件庫,繪制了一些常用的圖標和控制項。然後設定了整體的風格,製作過程中也用到了幾個母版提高效率,同時可以使用輔助線幫助自己保證部件的對齊、平均分布等,進而提高布局的美感。

Ⅶ axure 怎麼生成app原型

目前比較好的解決辦法是:
1.下載Axure
2.如果是給itouch或者iPhone用的,比較好辦,直接用320×480的解析度畫好輔助線,然後畫原型
3.按F5生成原型的時候,在「Mobile/Device」選項中可以設置適配移動設備的特殊原型
4.設置說明見下圖:(頁面大小顯示我的這個設置是按320×480的大小,默認不縮放)

5.用你的移動設備訪問你生成的原型鏈接(如本地伺服器,或Dropbox託管)
6.把該頁面創建一個桌面快捷方式
7.完成(有icon,有閃屏)

另:想做滑鼠動作或者復雜的頁面交互比較麻煩,不推薦,盡量簡潔。

Ⅷ axure怎麼畫手機原型

首先,下載ios組合元件庫
Axure製作手機原型

引入外殼(豎)部件,該部件自帶內部框架
Axure製作手機原型
Axure製作手機原型

引入狀態欄A(白)這個元件自帶方法,可自動獲取當前時間,將該部件置於外殼如圖處;
Axure製作手機原型
Axure製作手機原型

雙擊內部框架,在彈窗處設置連接地址,可選擇axure自帶頁面,也可填寫url進行外部地址鏈接
Axure製作手機原型
Axure製作手機原型

此處我設置的是內聯至page1,再對page1頁面添加部分元件,效果如圖
Axure製作手機原型

返回home頁,點擊載入則效果如圖
Axure製作手機原型

Ⅸ 如何用Axure快速製作APP交互原型

創建屬於自己的元件庫
原型製作工具的核心功能無非就是通過元件的堆砌組合,來展示產品的目標形態和效果。Axure自帶的只是一些最基本的元件,而網上的元件庫龐雜混
亂,很難找到滿足需求並且稱心的元件,並且大部分都是點陣圖格式,根本無法修改顏色寬度等數值,製作出來的交互又怎麼能達到精美的水準要求呢?
還好Axure提供了「創建部件庫」的功能,能夠支持我們製作一份屬於自己的元件庫。我們可以通過軟體自帶的基本元件搭配組合出我們常用的圖標、控制項,製作完成後,每次應用的時候還能根據實際情況調整顏色、大小、線寬的數值,從而才能實現交互稿統一完美的風格。
比如,APP中經常會用到一些主頁、分享、搜索、消息....各種圖標,或者我們每次遇到喜歡的圖標,都可以用Axure畫出來,以備不時之需。下邊以圖標為例講一下製作元件庫的具體步驟。
一、創建元件庫「綠色文件」
打開Axure,在元件庫面板「三條橫線」按鈕下拉選項中找到「創建部件庫」功能,點擊會彈出一個另存為對話框,這里需要選擇元件庫文件的存儲位置,並需要輸入元件庫的名稱。
此時,我們可以看到,文件的後綴名為 .rplib,這個就是元件庫的格式,而不同於創作交互原型時正常Axure文件的.rp格式。
輸入文件名稱和存儲位置之後,點擊保存,Axure將重新打開一個新頁面進行元件的編輯。並且我們可以看到,新頁面跟我們平時創造.rp正常文件的
頁面一模一樣,但不要混淆,此時頁面編輯的是我們在正常.rp文件中需要用的基本元件。並且我們回到元件庫存儲的位置可以看到,元件庫.rplib文件圖
標為」綠色「,不同於.rp文件的藍色。
創建好元件庫得」綠色文件「後,基本准備工作已經做完,下邊就進入到製作過程。
二、元件庫分組
通過觀察Axure默認的元件庫,我們可以看到其元件庫是可以按照類別進行分組的。比如默認的分成了:common、forms、flow等等,這樣能更方便我們找到目標元件的位置。
同樣,我們在製作元件庫的時候,也可以進行分組,規則為:在頁面導航面板上,所有的文件夾都是一個分組,所有沒有在文件夾下的頁麵包括其所有子頁面,都隸屬與以元件庫為名的分組下。
分組的規則弄明白之後,我們可以先按照自己對元件庫的規劃進行一個合理的分組,比如要做APP的元件庫,那麼我們可以分成:圖標、控制項、框架 3個常用分組,接下來就進入到具體元件的製作過程。
三、編輯並製作元件
我們以製作一個」我的「頭像圖標為例,首先在圖標分組下,添加一個頁面並命名為」我的「,雙擊進入到元件編輯頁面,編輯操作就跟我們平時製作正常
的.rp文件一模一樣。我們我們可以參考一些app中常常採用的」我的「圖標樣式,然後用Axure默認的基本形狀元件,比如矩形、橫線、圓形等,組合拼
湊成最終比較理想的樣子。
首先我們要明確,Axure中沒有類似PS中的布爾運算(能夠自由的對多個形狀進行編輯,比如合並、相交、減去頂層等),所以會給我們製作元件,尤
其是圖標帶來一定局限性,但好在交互原型並不要求苛刻的細節實現,只要我們能夠很清楚的表示出產品形態,有比較整體的風格就可以了。並且我們用Axure
基本形狀自己勾畫出來的圖標,能很方便的調整顏色大小等,可以適用不同的交互文件,這就是從網上找現成的點陣圖圖標很難達到的便利性。
回到「我的」圖標製作,如圖所示,我一共用到了三個基本形狀來進行拼湊,最終組合成了我們經常能看到的一個圖標樣式,並且一眼就能明白它的含義。雖然沒有更多的細節實現,但對於交互原型稿來說已經完全夠用,關鍵是顏色大小等可以很靈活的進行修改。
按照這個思路,我們可以製作更多的圖標出來,當然還可以製作一些常用控制項比如按鈕、appbar、搜索欄、圖標佔位符等等。如下圖,是我在畫「讀讀日報」原型圖時製作的一個元件庫:
元件庫製作完成之後,然後就進入到最後一個步驟。
四、載入自製元件庫並使用
元件庫製作完成保存在自己常用的資源文件夾中。打開一個正常的.rp文件,同樣是在元件庫面板「三條橫線」按鈕下拉選項中找到「載入部件庫」功能,然後找到製作完成的元件庫文件「綠色圖標」載入。
載入之後,我們就可以在「選擇元件庫」下拉選項中,找到剛剛載入的元件庫並選中,然後我們就可以像使用軟體自帶的元件一樣使用我們自製的元件庫了。
怎麼樣,看到這里你應該學會了如何自製一個元件庫了吧,希望你會花時間動手做一個。當然除了創建部件庫,Axure有很多技巧都需要掌握,比如母版的功能。
學會善用母版
在產品的設計過程中,主導航往往出現在多個頁面,比如APP的底部tab欄。當然不僅僅是導航,當我們頻繁使用任何一組控制項的時候,希望你不是一直都在復制和粘貼,永遠記住,創建一個母版可能是更好的選擇。
使用母版的便利性不單單體現在能夠快速的使用一組控制項,尤其是在設計後期,當我們需要修改某些基本控制項的時候,母版帶來的修改效率一定會讓你深深的愛上這個功能,欲罷不能。
除了學會使用母版,更要學會善用母版。同樣有一點希望能記住,不要把太大的組合對象變成母版。因為越是大的組合對象,越是有可能需要在母版的很多地
方做出修改。此時把一些母版和另外一個母版合並起來一般會是更好的辦法,這樣對母版的修改會更加的靈活,比如下圖,將產品基本信息和可能購買狀態分開成兩
個母版,組合在一起成為產品的完整頁面
制定一套自己的交互風格
學會了創建自己的元件庫,也懂得了善用母版,當然還有其他很多Axure軟體的使用技巧。應該就可以很快速的完成一份交互原型稿了吧,可是又該如何保證交付稿有統一的風格,達到較高的目標水準呢?
首先,我們要熟悉APP的設計規范,符合Android或者iOS的設計理念,對於一些常規的控制項設計規則有一定的了解。這樣設計出來的產品才能符
合這個平台的特性,並且基於大家對相關平台的一些固有認知,很容易能夠達成共識。這也是交互原型作為一個溝通交付物應該達成的目標。
基於對APP設計規范的熟悉,同時在製作過程中,要根據使用場景以及自己的習慣來制定一套自己的交互風格。比如可以定義好APP原型中,正文字體采
用 微軟雅黑 顏色#333333 13字型大小、提示文字為微軟雅黑 顏色#999999
10字型大小、固定的appbar行高為40px,內容據左側屏幕邊緣10px距離......
當然某些規范,比如字體也可以當成一個字體元件,放到我們自製的元件庫中,總之要根據自己的情況靈活的運用。有了一套風格之後,加上創建的元件庫隨意修改顏色大小等,我相信製作出來的交互原型肯定是協調統一的整體。
讀讀日報原型製作
理論方法掌握了,需要實踐的鍛煉才能更好的吸收領悟。我參照「讀讀日報」iOS版,對主要的一些頁面畫了一些交互原型。基本過程和思路就是按照本文所提到的這些內容。
為了更有形象感,從網上找來一個iPhone手機的邊框,並且創建自己的部件庫,繪制了一些常用的圖標和控制項。然後設定了整體的風格,製作過程中也用到了幾個母版提高效率,同時可以使用輔助線幫助自己保證部件的對齊、平均分布等,進而提高布局的美感。
總結
末尾再次拋出我開篇提到的,如何用Axure快速製作APP交互原型的方法論:製作屬於自己的元件庫並要學會善用母版,熟悉APP設計規范並要有自己一套交互風格樣式。

Ⅹ axure怎麼設計手機app的側邊欄原型

1、我們先打開我們的axure軟體,點擊新建,然後將我們的手機模型拖拽進我們的axure,點擊我們的「動態面板」將其往編輯窗口拖拽。如下圖

2、創建好我們的動態面板之後,按住「ctrl+c」將其復制下來,然後雙擊我們的「外層動態面板」下面的state1,然後按住「ctrl+v」將我們的「外層動態面板」復制下來

3、然後雙擊我們的「內層動態面板」下面的state1,然後點擊「矩形」,並將其圖案拖拽到我們的內層動態面板中,調整好位置,並給其填充顏色。

4、在拖進一個佔位符,並調整其位置,如圖所示。

5、然後點擊我們導航欄上面的「外層」,並將我們的「內層」圖案拖拽平移一段距離,如下圖。

6、然後點擊「矩形」,用來量我們「外層」和「內層」之間的距離,方便我們的側邊欄的移動。如下圖。量出距離之後,即可將其刪掉。

7、點擊我們導航欄的「內層」,然後在我們選中我們剛才的「佔位符」,然後點擊我們的「滑鼠單擊時」選項,如下圖。

8、進入我們的「單擊滑鼠時」之後,點擊「移動」,勾選「內層」,然後在下面的「y」內輸入我們剛才量出來的距離,即「-134」

9、點擊上面的「添加條件」選項,選擇「變數值」、「!=」「0」,然後點擊確定。

10、再次重復第八和第九步驟,「y」值改為「134」,其他不變,然後點擊上面的「添加條件」選項,選擇「變數值」、「==」「0」,然後點擊確定。

11、然後再次點擊我們的「case1」,找到並點擊下面的「設置變數值」,勾選「變數」,然後將變數值設為「0」,點擊確定,「case2」我們也重復此動作,只是在設置變數值時,不設為0即可。

12、最後,我們可以預覽我們做出來的效果了,我們按住F5,或者點擊上面的「預覽」,進入網頁之後,我們上下滾動滑鼠即可看出我們的效果了。

閱讀全文

與axure怎麼畫app原型相關的資料

熱點內容
怎麼知道dns伺服器是多少 瀏覽:976
5995用什麼簡便演算法脫式計算 瀏覽:918
電腦上如何上小米雲伺服器地址 瀏覽:919
手機資料解壓密碼 瀏覽:444
44引腳貼片單片機有哪些 瀏覽:692
阿里程序員腦圖 瀏覽:189
廣東編程貓學習班 瀏覽:708
上海數控編程培訓學校 瀏覽:313
怎麼下載我的解壓神器 瀏覽:634
lib文件無用代碼會編譯嗎 瀏覽:28
我的世界嗨皮咳嗽伺服器怎麼下 瀏覽:1002
mvn命令順序 瀏覽:978
車貸還完多少時間解壓 瀏覽:964
java頁面開發 瀏覽:820
學編程的小發明 瀏覽:25
為什麼說程序員喜歡格子 瀏覽:253
代碼編譯後叫什麼 瀏覽:969
電腦文件夾做了保護怎麼刪除 瀏覽:678
php資料庫連接全局 瀏覽:528
葫蘆島有程序員嗎 瀏覽:986