當前位置:首頁 » 網頁前端 » axureweb原型規范
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

axureweb原型規范

發布時間: 2023-03-23 17:29:20

① Axure原型設計:Axure原型加流程圖功能的高效結合

大部分PM使用Visio或者Mindmanager來畫流程圖然後倒入Axure,而很少有人知道Axure自帶的流程圖功能也很實用。尤其是和原型搭配使用,絕對是雙劍合璧,天下無敵。

希望通我使用「原型+流程圖」的多年經驗,讓更多的PM也可以掌握並運用到平常的原型設計工作中。

一、流程圖的通病

目前所有流程圖軟體都存在一個問題,那就是流程圖無法關聯到原型頁面。

無法做到直接點擊流程圖裡面的節點(頁面、功能、操作),展示與之相關的更多信息。這樣子使用上面會很受限。

頁面流程圖無法查看指定頁面詳情

比如我們畫頁面流程圖,展示了所有頁面以及頁面間的流向關系。UI設計師和開發童鞋,有時候需要查看某個頁面的具體內容。

功搜明能流程圖無法查看指定功能詳情

功能流程圖也存在類似的問題,開發童鞋想了解某個功能的具體情況,只能問PM或者自己找對應功能的原型頁面。

功能邏輯圖無法顯示具體控制項

畫一個功能具體的步驟邏輯的時候,有時候我們需要展示一下其中的控制項,比如寫高激下單流程的時候可能需要展示一下付款彈窗。

當然也可以使用原始方法,直接復制過來,第一麻煩第二修改了無法同步。

無法對流程圖節點做注釋

流程圖是由一個個節點連接而成,有時候節點需要寫幾句話注釋一下。不是所有的流程圖軟體都能支持,更主要的是沒辦法做到默認隱藏,點擊展開注釋。除非你把流程導出為html格式,但是這樣子又不能導入到Axure中了。

二、Axure流程圖的介紹

以上這些使用問題,都可以使用Axure的流程圖來滿足。接下來我會一一的來講解如何解決。

先簡單介紹一下Axure的流程圖功能是什麼,其實本質上是一個元件庫。

含有很多種元件,用途各不相同。大家使用的時候盡量遵循其定義的通用規范。當然如果你有特殊需要,可以單獨定義。

三、流程圖如何關聯頁面

Axure提供了兩種操作方法,本質上都是設置「引用頁面」屬性,Flow元件庫中的所有元件都具備該屬性。Dafault默認元件庫中部分元件支持該屬性。

「引用頁面」除了關聯了對應頁面,同時集成了對應頁面的標題。當你修改頁面結構中的頁面標題,這里也會同步更新。

拖拽頁面到工作區

當你畫頁面流程圖的時候,需要展示某個頁面的詳情。

那麼選中Axure左方的頁面結構中的該頁面。

然後拖動到右邊的工作區即可,效果如下圖。

最終的顯示效果請查看我之前的文章,以及我繪畫的 頁面原型圖 。

其中右下角帶有「藍色矩形組」圖標的矩形,代表戚漏襪可以點擊進入該頁面的線框圖,查看詳細的頁面布局、控制項、邏輯等。

設置引用頁面屬性

根據上圖,你應該可以猜到其實拖曳頁面名稱到工作區,是創建了一個頁面並且設置了屬性「引用頁面」到該頁面。所以你也可以這樣做。

拖動Flow元件庫中的元件到工作區

設置屬性「引用頁面」到你所需的頁面

生成原型查看效果。

四、流程圖如何關聯具體功能

方法有2種,大家可以按需參考。

設置「引用頁面」屬性到具體的功能頁面,方法如上。

設置單擊鏈接到具體的功能頁面,再簡單不過。

五、流程圖如何顯示具體控制項

在畫某個功能的具體邏輯時候,我們可以藉助Axure的「頁面快照」功能來展示一些控制項。有助於技術童鞋對功能的理解和實現。

新建頁面快照

從左方的Flow元件庫,拖動」頁面快照」到右方的工作區。

設置引用頁面

方法和上面的類似,但是展示效果有點區別哦。所謂頁面快照是指將引用頁面的具體內容顯示到該元件區域范圍里。比如我引用了 閃電約首頁 這個頁面,那麼效果如下。

修改快照參數

顯示明顯有問題,我們可以修改一下參數。

取消適應比例,然後把該頁面快照元件的尺寸修改成375 x667,然後填充的相對坐標改成(0,0,0,0)。此時快照效果如下。

配置動作

比如你可以設置該頁面隱藏一些控制項,或者展示隱藏的彈框,吐司提示。

大概是這樣子了,在設計商品詳情、購物車、確認訂單的時候,該功能特別適用。有需要的童鞋可以試下。

七、流程圖如何顯示節點的注釋

這個其實很簡單,但是很多PM沒用過。

具體的可以查看我寫過的舊文《 產品邏輯的常用表達法 》,《 Axure最正統的產品邏輯表達法 》。

八、總結

以上這些技巧都是Axure自帶的流程圖功能,只是很少有人系統的總結並分享出來。

希望通過我的文章,大家以後能善用Axure的流程圖。而不是盲目的跟風使用第三方腦圖軟體。

適合產品經理的流程圖軟體就是Axure,配合強大的原型功能。絕對是雙劍合璧,天下無敵。

② 使用Axure製作App原型應該怎樣設置尺寸

製作原型時根據查詢的尺寸在axure中設置大小即可,設計完畢後在生成HTML時設置 手機/移動設備 中勾選包含視圖介面( include Viewport tag ),並進行配置即可。
移動設備解析度與原型尺寸對照表:

2、axure原型製作時還有幾點注意事項:

2.1、頁面命名最好都用英文,以防中文在解壓時出現亂碼;

2.2、APP主頁面不要用index來命名,否則打開Index時默認隱藏側邊欄,後續無法復制URL;

2.3、設計尺寸大小取決於選擇的演示方式:

a).Web APP模式:屏幕高度-ios設備狀態欄高度,eg:設計尺寸=480-20px=460px;

b). APP打開模式:採用設備默認尺寸。

③ Axure 設計網站原型時,網站寬度和高度怎麼設置比較好

【頁面尺寸】網頁的尺寸受限於兩個因素:一個是顯示器屏幕(顯示器現在種類很多,17寸為主流,正在朝19寸及寬屏的方向發展,但目前也有為數不少的15寸顯示器)另一個是瀏覽器軟體(我們常用的IE、遨遊、Friefox等)

【頁面高度】高度是可以向下延展的,所以一般對高度不限制。對於一屏來說一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,所以高度沒有確切值。

【頁面寬度】
1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005
3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001
如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點。也方便做一些浮動層的設計。如果是800的解析度一般都設成770。但也有設成760的。這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求。不過一般我們都會設定的再稍微小一點,因為有些瀏覽器加了插件或者其他的東西寬度會有變化,所以 800的解析度一般設定760左右,1024的設定990左右。
網頁設計標准尺寸參考:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間,就不會出現水平滾動條和垂直滾動條。
3、頁面長度原則上不超過3屏,寬度不超過1屏,每個標准頁面為A4幅面大小,即8.5X11英寸。
4、全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px (另外120*90,120*60也是小圖標的標准尺寸 )
5、每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K

【網頁廣告尺寸】
1、120*120,這種廣告規格適用於產品或新聞照片展示。
2、120*60,這種廣告規格主要用於做LOGO使用。
3、120*90,主要應用於產品演示或大型LOGO。
4、125*125,這種規格適於表現照片效果的圖像廣告。
5、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。
6、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。
7、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。
8、88*31,主要用於網頁鏈接,或網站小型LOGO。

【廣告形式 像素大小 最大尺寸】
BUTTON 120*60(必須用gif) 7K;215*50(必須用gif) 7K
通欄 760*100 25K 靜態圖片或減少運動效果;430*50 15K
超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果
巨幅廣告 336*280 35K;585*120
豎邊廣告 130*300 25K
全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式
圖文混排 各頻道不同 15K
彈出窗口 400*300(盡量用gif) 40K
BANNER 468*60(盡量用gif) 18K
懸停按鈕 80*80(必須用gif) 7K
流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀)

【網頁中的廣告尺寸】
1.首頁右上,尺寸120*60
2.首頁頂部通欄,尺寸468*60
3.首頁頂部通欄,尺寸760*60
4.首頁中部通欄,尺寸580*60
5.內頁頂部通欄,尺寸468*60
6.內頁頂部通欄,尺寸760*60
7.內頁左上,尺寸150*60或300*300
8.下載地址頁面,尺寸560*60或468*60
9.內頁底部通欄,尺寸760*60
10.左漂浮,尺寸80*80或100*100
11.右漂浮,尺寸80*80或100*100

④ 如何用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原型

      原型是產品經理或者交互設計師所設計的某一需求或者某一問題的具體的解決方案。繪制原型的工具有很多,我們公司大多的產品用的都是Axure。用這個軟體,高保真或者低保真原型都能做的很好。那麼,怎樣的原型才適合團隊交流?

      畢竟繪制出來的原型並不是只給自己看的,還要講解給團隊里的成員,UI/前端/開發。特別是進行小組內評審的時候,通過演示原型,需要向他們講解產品內部的邏輯、具體的頁面、動效等,還要向他們詢問設計是否合理,能否實現等,靜心傾聽他們的意見。這時候,原型就是一個思維傳達的工具,將你的想法,翻譯並灌輸給你的團隊成員。同樣,原型是也團隊的交流工具,針對繪制出來的原型,每個人都可以談談自己的看法,交流思想,完善原型不足的地方。

      所以原型繪制出來,必須要有基本的交付標准。

一、原型設計的基本交付標准

1.清楚------讓他人能明白產品是干什麼的,包括什麼功能,有哪些頁面。

需要清楚地表達頁面有哪些內容模塊

需要清楚地表達模塊內部的構成元素

2.清晰------讓隊友知道具體有哪些要求,指導他們如何做

【1】功能操作

  某一個功能可以進行哪些操作,點擊/滑鼠懸浮/拖動等操作,以及頁面會有什麼反應。(方便開發的工作)。

【2】操作路徑

       有一些操作是要跳轉頁面,跳轉的路徑需要標清楚,跳到哪去了,涉及哪些頁面,頁面之間是如何聯系的。防止用戶迷失。

【3】點擊狀態

一些鏈接,按鈕,需要標明它初始的時候是什麼樣,滑鼠懸浮有什麼效果(顏色/下劃線/提示語等),點擊的樣式變化,以及點擊後的樣式。(這些可以為前端的工作提供方便)

【4】信息組合

相關的信息需要組合在一起,比如一些基本信息,姓名/性別/年齡等最好放一塊,不要分開。不相關的保持距離。

【5】位置排序

頁面的布局應該適應用戶的習慣,瀏覽方式、工作任務。突出強調重點,方便用戶的工作。一些數據可以思考一下它們的排列方式,按什麼排序,能方便用戶查找,仍舊是「以用戶為中心」。

3.周全-----產品的各種細節,不頌搭肢能疏忽

【1】交互狀態

     某些重要的操作,交互樣式是怎樣的,效果如何,最好單獨抽出來做成高保真,演示給他人看,讓他們對產品有深入的體驗和感受。

【2】數據顯示

原型上涉及的相關數據做好有真實的案例,將需要獲取的關鍵數據全部展示出來,比如一篇文章,需要的數據:作者、發布時間、瀏覽量、喜歡數、收藏數等,方便開發准備必要的數據介面。

【3】異常考慮

需要考慮一些突發情況的應對,比如斷網、載入太慢、數據已經被刪除了、數據找不到了、沒有訪問許可權等等情況。

【4】配套頁面

產品里的一些功能可能和其他產品有關聯,需要將可能涉及的其他頁麵包括到項目內。比如頁面在wap上手機的瀏覽樣式、一些發送給用戶的消息/簡訊的內容和樣式等等。

4.基本審美

【1】對齊

【2】間距

【3】顏色

【4】字體

推薦大家看看《寫給大家看的設計書》這類易上手的書籍。

5.基本規范

【1】頁面尺寸

       web的寬度有960px、1000px、1200px,App有安卓、iphone5、iphone6等,需要與已有的產品保持統一的尺寸。

【2】字體大小

     標題可以是18px或者16px,內容可以是14px。既要考慮用戶是否看到清,又要考慮美觀。

【3】顏色

     原型不要有太多的顏色,堅持黑白灰,除非要突出,可以用其他的顏色。

【4】彈窗

     彈唱的樣式最野世好做統一,彈窗名+內容+操作按鈕+關閉

【5】元件

   不在原型正文添加過多的截圖、圖標樣式,會對UI的設計造成干擾。

二.Axure的快捷使用技巧

       工欲善其事枝悄必先利其器,工具使用的越嫻熟,才能節省大量時間用於方案的思考。下面將簡要分享Axure繪制原型時的一些快捷操作:

      首先在頂部菜單欄中找到<視圖>,把需要的部件顯示,就可以設置了。

1.組件庫的建立(能提高效率,保證產品層面的統一一致)

2.母版的使用(適用於多頁面通用的部分,修改後,集體自動更新)

3.設置頁面樣式(頁面的字體、背景能一次性設置好)

4.元件的交互樣式

5.元件組合

       把要組合的原件用滑鼠框在一起,按住ctrl+G,成為組合後就可方便復制拖動了。許下按住ctrl+shift+G,也可以點擊選中後,點擊下圖的兩個圖標來組合和取消組合。

6.對齊、居中、平均分布

選中要對其的內容,選擇一種分布樣式,就能快速得到整齊的原型樣式,而不用一個個手動調整。

7.輸入框類型的設置(預設好類型)

一些輸入框,可能需要設置默認文字,可以直接選中了輸入框後,在原件屬性里設置提示文字和一些限制。

8.元件的提示語

        有些文字需要有滑鼠懸浮顯示提示語的動作,可以直接在原件的屬性里設置「原件提示」,輸入要顯示的內容,即可。

三、製作原型的過程

1.梳理功能點-------------------將需求轉化為功能清單,標出重要等級(前提是需求已經梳理清楚)

2.規劃產品結構----------------用Xmind或者筆和紙等工具畫出產品有幾個頁面,每個頁麵包含哪些元素

3.整理原型目錄----------------用Axure添加原型的幾個頁面,考慮頁面之間的跳轉關系

4.設計頁面的布局(打格子)-----用不同的色塊,方框來表示這部分將要表示什麼板塊,設計好頁面的布局

5.填充各模塊的細節----------在方框里把具體的信息和數據填充完整

6.增加少量的交互動作--------------體現在一些涉及到任務的操作

7.頁面注釋-------------完善交互說明

8.審查自檢------------------功能是否覆蓋完全;頁面有沒有缺失;流程是否明確;狀態是否完備

四、原型應用中的經驗

      因為我多是負責後台系統的優化,所以是直接和開發打交道,如果涉及前台頁面,就需要UI先將原型做成圖片,再由前端製作含有動效的demo,開發再按照demo開發。但是不論哪種,繪制出來的原型一定需要讓隊友都明白你的邏輯和要表達的重點。

      第一次負責項目的時候,我用的是高保真,畫完整的原型就花了一星期多,各種動作和交互,恨不得做個虛擬的產品。但是和開發講了原型後,等來驗收項目的時候,才發現,開發大部分都沒有按照原型上的動作來,甚至連細節都有遺漏。一個個催著補上後,我開始思考這種方式是不是不太劃算,太費事費力,結果又不太好。

       後來我看了我上級繪制的原型,都是以靜態頁面為主,可以說是低保真,但是每一種情況都詳細地用圖文描述清楚,點擊之後是什麼樣子,將要獲取什麼數據,失敗了會怎麼樣都有。而且這種方式,完成的特別快。於是我就選取低保真模式的開始畫原型,結果發現,開發有時候並不能將一些動作做好。

       於是我開始「T式原型 」。「T式原型 」就是大部分是以低保真鋪展開,將整個產品的邏輯都直接呈現出來,再在某些需要重點描述的地方用高保真描述深入。所以,我的原型大部分是以 低保真+注釋說明和高保真+動作演示 的組合。 不過對於交互簡單的產品來說,低保真模型足夠了 。

       每個產品繪制原型的習慣和風格都有所不同,但關鍵還是需要進行小組會議來向隊友們講解原型和邏輯,在開發的過程中,需要多溝通。

       另外,分享大家關於AXURE學習的網站,可以在裡面找到免費的軟體安裝包和教學課程。

https://www.axure.com.cn/

如果對文章感興趣,歡迎評論留言,堅持喜歡的事情,加油~

⑥ 怎麼用axure做一個app原型

一、原型默認整體大小為640*960即可,位置為x為0、y為0起始,這樣即可 二、下拉效果可以沖塵做,用動態面板來完成,可以上下拖拽。 三、好稿可以友判孝放在web伺服器上,就可以通過http的方式來訪問。

⑦ axure怎麼做web頁面高保真

一般來說,axure的原型分成兩種,低保真和高保真。低保真就是線框圖,主要作用是給研發交付,做開發的參考,只要能能實現講清楚頁面的功能和邏輯就可以了,特點是高效、快速;而高真原型主要是在產品初期給公司領導、用戶演示,除了要完成低保真的功能,對於原型的界面風格和交互都有要求,高保真的原型特點是效果好、更接近真實的產品,但是開發起來很費事件。這兩種原型適用與不同的需求場景。
對於高保真來說,主要要實現以下幾個方面:
1、頁面布局尺寸要准確,最好能夠實現自動適應屏幕;
2、頁面風格,包括顏色、字體、行間距等,都要按照規范設計,這個階段,往往需要UI的介入;
3、交互要能夠實現,至少要實現所有的菜單功能,並且要實現主要細節頁面;
按照上面的要求,高保真的原型除了基本的原件之外,一般都要使用到動態面板、中繼器、內聯框架等元件,需要產品經理能夠對這些元件掌握的比較好。
總得來說,實現一個高保真的原型是比較復雜的,對於新手來說,還是比較困難的。
不過也有一些現成的pc端的高保真原型框架,可以下載直接使用。

⑧ 通過axure做原型設計生成的html代碼可以讓開發直接用嗎

不可以,Axure 生成的只是原型,是在產品制定時供大家參考了解項目用的。

Axure輸出的HTML文件不能直接用於前端代碼開發,Axure為了模擬交互效果,使用了大量的JS,其中有很多是用不著的內容,前端代碼需要完全重寫。

Axure輸出內容不能取代實際開發中的任何部分,只是為了提高溝通效率。

(8)axureweb原型規范擴展閱讀:

Axure的特性

1.滑鼠及鍵盤交互功能:

支持更多的新特性包括 OnDoubleClick(雙擊), OnContextMenu (右擊),OnMouseDown(滑鼠按鍵按下), OnMouseUp(滑鼠按鍵松開), OnMouseMove(滑鼠指針移動), OnMouseHover(滑鼠指針經過), OnLongClick (滑鼠長按), OnKeyDown(鍵盤按鍵按下), OnKeyUp(鍵盤按鍵松開)。

2.演示文檔:

支持HTML5新特性,以及更好的支持手機演示特性。


3.新增部件樣式控制:

Axure7對於部件修飾功能有較大的改善,包括支持圓角、陰影、描邊等設置。

4.更細化的部件屬性:

更為豐富的部件屬性,可以設置各種形狀、樣式,較Axure RP 6.5單調的形狀而言,也是一種驚喜。

5.更多交互條件:

包括關閉指定窗口、設置錨點以及更為靈活的事件觸發條件,對於移動互聯網產品原型設計有很大幫助。

⑨ 如何進行web頁面原型圖設計

最後半天心不在焉拖拖拽拽把各個部分都搭建好了,可是做出來的頁面慘不忍睹,自己都沒勇氣打開。晚上回家後和鄰居又討論了三個小時,最後熬夜把原型圖完成。雖然最後原型圖也沒有被採納,但是這次原型圖居然受到了表揚,領導說我的原型圖有了提升。今天就寫下這篇文章,為這段時間的工作做一個總結。原型設計前:①�0�2�0�2 重點突出內容:要清楚明了頁面需要突出的內容是什麼,這個在前期的討論中一般就已經確定;②�0�2�0�2 第一功能目的:除了內容以外,功能方面需要突出的是什麼?如引導注冊或像下一級頁面引導流量。③�0�2�0�2 如果是改版要考慮改版要解決的問題是什麼?對於前一版頁面存在什麼問題 畫原型圖要考慮:④�0�2�0�2 內容板塊如何劃分,頁面的內容主要分成幾個模塊,每個模塊內存放的都應該是一些相近的內容;⑤�0�2�0�2 模塊與模塊之間的關聯性:每個模塊與其相近的模塊之間應該有一些邏輯上的關聯性,而不能隨意的進行拼接;⑥�0�2�0�2 頁面的流程:模塊與模塊的上下承接關系,模塊與模塊應該上下存在某些邏輯上的連接性。 頁面完成後:完成原型圖後一定要進行檢查,主要從以下三個方面進行檢查:⑦�0�2�0�2 內容是否完整:對比框架中的每一部分內容檢查是否完整;⑧�0�2�0�2 第一屏是否把最重要的內容展現出來:頁面第一屏以外的內容基本都是輔助內容,如果不能在第一屏就把內容全部展現,基本上就等於內容不完整;⑨�0�2�0�2 功能是否實現:想要表達的功能是否在明顯的地方表現出來;⑩�0�2�0�2 流程是否順暢:把相應的流程走一遍,看是否流暢。 注意tips:①�0�2�0�2 未完成的作品拿出來討論頁面不完整不代表思想不完整,即使是不完整的頁面,裡面應該也要有一個清晰的邏輯圖。通過這種方法可以強迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有屬於自己的清晰思路,對內容、功能和流程自己要先想明白,可以列舉一些具體的問題來輔助理清自己的思路。③�0�2�0�2 堅持自己的想法每一個人都有自己的想法,只要你理清自己的思路,就一定要堅持下去。用自己的邏輯解答別人的疑惑和質疑,形成自己的思路。 關於工具和作圖:之前花了很多時間去研究axure,是學會了一些作圖的技巧,可是漸漸發現這些對頁面的提高基本不大,我是覺得在掌握基本的工具使用時可以暫時忽略工具。頁面最重要的是你的想法,等到想法成熟之後不妨慢慢的考慮工具的深入弊告御,太多的考慮技巧租岩方面的問題反而會模糊視線。思考的過程和畫友鏈圖的時間可以在7:3都無所謂,前期的框架和流程思路想好後,後面的原型圖也就水到渠成了。

⑩ AXURE原型需要做到什麼程度

AXURE做原型分為低保真、高保真兩種,再復雜就是有交互效果的原型。

低保真就是只有線框圖。 純粹的只用線框來表示功能,沒有做任何的渲染。 這種低保真我認為適合在公司內部最初梳理功能、流程,並且不需要想客戶演示時候使用。

高保真原型。 下面我認為都是高保真原型。 前面的只是簡單的很白色渲染,後面是用真正的圖片渲染。 這兩種可以根據客戶類型和項目時間來決定出那種。 前面好處是更接近真實效果,而且不影響美工視覺,出的速度很快。 後面的對美工影響很大。很可能會完全照做。

還有一種就是可以交互的。比如你輸入用戶名和號碼後,點擊登錄會跳轉到首頁。只是數據是靜態數據。這種原型做出來要花很長時間。但卻是搜集客戶需求,避免開發成本的最好原型。因為是可以交互的,最大程度還原產品。 另外原型就是拿來不斷修改的,並不是做了一次就定下。之所以做原型就是開前確定需求功能,避免因客戶需求變動返工。

高保真的原型圖的用途有幾大方面:

一、開發人員需要參與高保真原型圖的設計當中,同時,他需要對這款產品的交付期作一個判斷,而產品經理根據開發人員的判斷,對於整個產品的周期做一個監控;

二、高保真原型圖還需要給你的總監以及老闆看,讓你的管理層知道真實的產品的樣子;

三、用於產品原型測試,把你的產品創意真正的傳遞到用戶眼前。相對於寫在紙上的產品設計文檔,產品原型更加有效,因為這可以讓所有的測試人員以及用戶知道你的產品創意所在。 在製作產品高保真原型的時候,你需要密切的與產品交互設計師進行合作,以將產品設計的盡量的簡單和易用。產品經理與交互設計師最好能在同一處的辦公室辦公,因為這樣能方便對於產品的交流。

在有些公司,產品的交互設計以及產品高保真原型通常也由產品經理來完成。高保真原型的製作涉及的東西更多,不僅僅只是核心功能的設計,有時候一個按鈕是設計和文字的描述就很要命。相信很多產品經理都設計過一些按鈕,如果一個按鈕既要表達狀態也要表達操作,那麼這類的按鈕是十分費神的。

高保真原型的製作軟體目前較為流行的是AXURE,這款軟體設計絕大多數的交互內容。並且使用起來也十分方便。筆者也十分喜歡。在完成高保真原型圖後,你需要做的就是,可用性測試,也就是確定你的設計方案能滿足用戶一看就懂的基本需求。

原型的測試有很多方式,如果某些產品已經擁有自己的用戶群,可以直接在用戶群當中進行測試,如果你的產品沒有,那麼簡單點,公司的同事就是你的測試用戶。在公司中,找出你的目標用戶,用你的高保真原型圖讓她們用用。

製作一個高保真原型圖很耗時間的。但是用戶測試也是必須的,在產品還沒有進入開發前做用戶測試會讓你的產品後續的邏輯更加清晰。無論是客戶端產品還是web端的產品,能用高保真原型做用戶的可行性測試最好還是用原型進行一次的測試。