任務(wù)管理移動(dòng)端Axure原型設(shè)計(jì)模板詳解
一、模板概述
本模板是一款使用Axure8制作的任務(wù)管理APP高保真原型模板。其設(shè)計(jì)核心清晰，功能全面，整體風(fēng)格簡(jiǎn)潔清新。該模板主要包含待辦事項(xiàng)、日程安排、數(shù)據(jù)統(tǒng)計(jì)、個(gè)人中心四大模塊，適用于移動(dòng)端原型設(shè)計(jì)，并可作為拓展的模板使用。
二、組件豐富
除了主要模塊外，本模板還包含了宮格式導(dǎo)航、日歷、中繼器、表單、動(dòng)作面板、圖表、卡片等多種移動(dòng)端常用組件。這些組件可直接復(fù)制或拖拽到項(xiàng)目中使用，大大節(jié)省了設(shè)計(jì)時(shí)間，同時(shí)也為初學(xué)者提供了一款友好的Axure交互入門學(xué)習(xí)的模板。
三. Axure原型制作基礎(chǔ)
Axure是一款常用的原型制作工具，無(wú)需HTML/CSS/JavaScript基礎(chǔ)，用戶也可以輕松制作出具有良好交互效果的原型圖。本模板以金烏的《AxureRP7網(wǎng)站和APP原型制作從入門到精通》一書(shū)為參考，系統(tǒng)地介紹了Axure這款工具及其設(shè)計(jì)思想。
四、設(shè)計(jì)思想及基礎(chǔ)概念解析
在原型設(shè)計(jì)之前，我們需要明確幾個(gè)基礎(chǔ)概念：什么是用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)，它們之間有著怎樣的關(guān)系？什么是UE、UX？如何理解“可用性”？線框圖、原型、視覺(jué)稿的區(qū)別是什么？
線框圖是一種低保真圖，以“黑白灰”線條表達(dá)；原型圖中高保真，可代表最終產(chǎn)品，用于利益相關(guān)者溝通；視覺(jué)稿高保真，注重視覺(jué)效果。
身為產(chǎn)品經(jīng)理或設(shè)計(jì)師，我們需要綜合表達(dá)不同的信息，在多種條件下找到平衡，創(chuàng)建最佳的用戶體驗(yàn)。值得注意的是，工具只是手段，最重要的還是設(shè)計(jì)師本身的思想和能力。
五、Axure工作區(qū)域介紹及操作技巧
Axure工作臺(tái)上常用的功能區(qū)域包括菜單欄、工具欄、站點(diǎn)地圖、部件面板等。我們還可以通過(guò)視圖>重置視圖來(lái)重置Axure工作臺(tái)。熟悉這些功能區(qū)域和操作方法，可以更好地利用Axure進(jìn)行設(shè)計(jì)，提高工作效率。
章節(jié)一：Axure站點(diǎn)地圖與部件面板介紹
站點(diǎn)地圖
站點(diǎn)地圖是用于在Axure中增加、刪除和組織原型的頁(yè)面，幫助我們有效地管理項(xiàng)目結(jié)構(gòu)和頁(yè)面布局。
部件面板
部件面板是Axure中的核心功能之一，用于管理各種部件庫(kù)，包括Axure內(nèi)建部件、第三方部件及用戶自定義部件。通過(guò)部件面板，用戶可以輕松拖拽所需部件至原型設(shè)計(jì)區(qū)域，快速構(gòu)建頁(yè)面線框圖。
章節(jié)二：Axure內(nèi)置常用部件概覽
Axure內(nèi)置部件簡(jiǎn)介
Axure提供了豐富的內(nèi)置部件，這些部件可用于創(chuàng)建各種類型的頁(yè)面線框圖。常見(jiàn)的內(nèi)置部件包括按鈕、文本框、圖像框、形狀、表單控件等。
章節(jié)三：Axure部件操作與頁(yè)面樣式設(shè)置
Axure部件操作
在Axure中，用戶可以對(duì)部件進(jìn)行多種操作，如復(fù)制、粘貼、刪除、調(diào)整大小、更改屬性等。還可以對(duì)部件進(jìn)行分組、對(duì)齊和層疊管理，以便更好地組織原型設(shè)計(jì)。
頁(yè)面樣式PageStyle常用操作
頁(yè)面樣式是原型設(shè)計(jì)中不可或缺的一部分。在Axure中，可以通過(guò)PageStyle設(shè)置頁(yè)面的背景、字體、顏色等樣式屬性，還可以添加陰影、圓角等特效，使原型更加生動(dòng)逼真。
章節(jié)四：Axure交互基礎(chǔ)
交互概念及構(gòu)成
交互是Axure中的核心功能之一，用于將靜態(tài)的線框圖轉(zhuǎn)換為可交互的HTML原型。一個(gè)交互由、用例和動(dòng)作三個(gè)基本單元構(gòu)成。是交互的觸發(fā)條件，用例是用戶與應(yīng)用程序或網(wǎng)站之間的交互流程，動(dòng)作是交互執(zhí)行的結(jié)果。
章節(jié)五：Axure中的、用例與動(dòng)作
Events（When）
是交互的觸發(fā)條件，決定了交互在什么時(shí)候發(fā)生。Axure中的可分為頁(yè)面和部件兩大類。通過(guò)合理設(shè)置，可以實(shí)現(xiàn)對(duì)原型的不同操作和控制。
用例Cases（Where）
用例是用戶與應(yīng)用程序或網(wǎng)站之間交互流程的抽象表達(dá)。在Axure中，一個(gè)可以包含一個(gè)或多個(gè)用例，每個(gè)用例封裝了一個(gè)獨(dú)立的路徑。通過(guò)用例，可以創(chuàng)建的多個(gè)執(zhí)行路徑，以響應(yīng)用戶的不同操作或其他條件。
動(dòng)作Actions
動(dòng)作是交互執(zhí)行的結(jié)果，定義了原型在觸發(fā)時(shí)的具體行為。在Axure中，一個(gè)用例可以包含一個(gè)或多個(gè)動(dòng)作。通過(guò)合理設(shè)置動(dòng)作，可以實(shí)現(xiàn)原型的各種交互效果，提升用戶體驗(yàn)。
通過(guò)以上五個(gè)章節(jié)的介紹，希望能夠幫助讀者更好地理解Axure的功能和使用方法，更好地利用Axure創(chuàng)建出色的原型設(shè)計(jì)。如何用Axure打造完美的APP交互原型
一、了解Axure中的動(dòng)作（Actions）
二、如何用Axure畫(huà)APP原型圖
你需要下載并安裝Axure軟件。如果你是為iTouch或iPhone設(shè)計(jì)，可以使用320×480的分辨率，并畫(huà)好輔助線來(lái)幫助你。按F5生成原型時(shí)，你可以在“Mobile/Device”選項(xiàng)中選擇適配移動(dòng)設(shè)備的特殊原型。 接下來(lái)是如何讓你的移動(dòng)設(shè)備訪問(wèn)生成的原型鏈接。你可以選擇將原型放置在本地服務(wù)器或者像Dropbox這樣的云存儲(chǔ)平臺(tái)上。然后，將頁(yè)面創(chuàng)建一個(gè)桌面快捷方式，完成設(shè)置后，你的APP原型圖就具備了基本的交互功能。 需要注意的是，對(duì)于復(fù)雜的鼠標(biāo)動(dòng)作或頁(yè)面交互，建議在設(shè)計(jì)中保持簡(jiǎn)潔。過(guò)多的交互可能會(huì)讓用戶感到困惑。三、創(chuàng)建屬于自己的元件庫(kù)
原型制作工具的核心在于通過(guò)元件的堆砌組合來(lái)展示產(chǎn)品的目標(biāo)形態(tài)和效果。Axure自帶的元件可能無(wú)法滿足我們的所有需求。創(chuàng)建屬于自己的元件庫(kù)是非常重要的。 你可以通過(guò)Axure軟件自帶的基本元件搭配組合出常用的圖標(biāo)、控件等。然后，每次應(yīng)用時(shí)都可以根據(jù)實(shí)際情況調(diào)整顏色、大小、線寬的數(shù)值，從而實(shí)現(xiàn)交互稿統(tǒng)一完美的風(fēng)格。例如，APP中經(jīng)常使用的主頁(yè)、分享、搜索、消息等圖標(biāo)，都可以自己繪制并保存到元件庫(kù)中。 創(chuàng)建元件庫(kù)的具體步驟如下：打開(kāi)Axure，在元件庫(kù)面板中找到“創(chuàng)建部件庫(kù)”功能。點(diǎn)擊后，選擇元件庫(kù)的存儲(chǔ)位置并輸入名稱。你會(huì)看到一個(gè)后綴名為.rplib的元件庫(kù)文件。輸入名稱并保存后，Axure將打開(kāi)一個(gè)新頁(yè)面進(jìn)行元件的編輯。 為了讓元件庫(kù)更加有序，你可以參考Axure默認(rèn)的元件庫(kù)，按照類別對(duì)元件進(jìn)行分組。這樣，當(dāng)你在制作原型時(shí)，就可以方便地找到所需的元件，提高制作效率。四、制作精美的APP交互原型
在創(chuàng)建了屬于自己的元件庫(kù)后，你就可以開(kāi)始制作APP交互原型了。通過(guò)組合使用元件庫(kù)中的元件，你可以快速搭建出APP的基本結(jié)構(gòu)。然后，通過(guò)添加動(dòng)作和交互效果，讓APP具備更多的交互功能。 為了制作出精美的交互原型，你需要注意細(xì)節(jié)和色彩搭配。保持設(shè)計(jì)的簡(jiǎn)潔性，避免過(guò)多的交互和復(fù)雜的動(dòng)畫(huà)效果。這樣，你就可以打造出完美的APP交互原型了。五、總結(jié)
通過(guò)了解Axure中的動(dòng)作、畫(huà)APP原型圖的方法、創(chuàng)建元件庫(kù)以及制作APP交互原型的過(guò)程，你就可以使用Axure打造出完美的APP交互原型。需要注意的是，設(shè)計(jì)過(guò)程中要保持學(xué)習(xí)的態(tài)度，多練習(xí)、多嘗試，不斷提高自己的設(shè)計(jì)水平。
一、規(guī)劃元件庫(kù)分組
在Axure RP中制作元件庫(kù)時(shí)，首先需要確定元件的分類和分組方式。就如同文件夾在電腦中的組織方式，我們可以將元件庫(kù)分為幾個(gè)主要分組，如圖標(biāo)、控件和框架等。這樣的分組方式可以讓我們更方便地找到目標(biāo)元件，提高工作效率。
二、元件制作與編輯
以制作一個(gè)“我的”頭像圖標(biāo)為例。在圖標(biāo)分組下創(chuàng)建一個(gè)新頁(yè)面并命名為“我的”，進(jìn)入元件編輯頁(yè)面。這里，我們可以參考其他APP中的圖標(biāo)樣式，使用Axure的基本形狀元件（如矩形、圓形等）進(jìn)行組合和拼湊。雖然Axure沒(méi)有像Photoshop那樣的布爾運(yùn)算功能，但我們可以利用基本形狀自由組合，制作出符合要求的圖標(biāo)。這種方式的優(yōu)點(diǎn)在于，我們可以方便地調(diào)整圖標(biāo)的大小和顏色，以適應(yīng)不同的交互文件。這在從網(wǎng)上找現(xiàn)成的位圖圖標(biāo)時(shí)是很難實(shí)現(xiàn)的便利性。
三、創(chuàng)建自定義元件庫(kù)
制作完成一系列元件后，我們可以將其保存為自定義元件庫(kù)。這個(gè)元件庫(kù)可以包含我們制作的圖標(biāo)、控件等元件。在Axure RP中打開(kāi)一個(gè)新的項(xiàng)目文件，通過(guò)載入部件庫(kù)功能，我們可以將自制的元件庫(kù)載入到項(xiàng)目中。之后，我們就可以在元件庫(kù)面板中選擇剛剛載入的元件庫(kù)，像使用軟件自帶的元件一樣使用我們自制的元件。通過(guò)這種方式，我們可以大大提高工作效率，統(tǒng)一產(chǎn)品的設(shè)計(jì)風(fēng)格。
四、學(xué)會(huì)使用母版功能
除了創(chuàng)建元件庫(kù)，Axure RP中的母版功能也是非常重要的。在產(chǎn)品設(shè)計(jì)中，一些基本控件如主導(dǎo)航會(huì)出現(xiàn)在多個(gè)頁(yè)面。我們可以通過(guò)創(chuàng)建母版來(lái)快速使用這些控件。當(dāng)需要修改這些基本控件時(shí)，母版的便利性就體現(xiàn)出來(lái)了。我們只需要修改母版，就可以應(yīng)用到所有使用該母版的頁(yè)面。但需要注意的是，不要把太大的組合對(duì)象變成母版，因?yàn)檫@可能會(huì)帶來(lái)修改上的不便。學(xué)會(huì)使用母版功能并善用，可以大大提高我們的工作效率。
通過(guò)以上步驟，我們應(yīng)該已經(jīng)掌握了如何在Axure RP中創(chuàng)建和使用元件庫(kù)的基本方法。希望這些技巧能幫助你更好地使用Axure RP進(jìn)行設(shè)計(jì)工作。除了元件庫(kù)和母版功能，Axure RP還有很多其他技巧等待你去學(xué)習(xí)和掌握?？焖僦谱鲄f(xié)調(diào)統(tǒng)一的APP交互原型：方法與規(guī)范
=========================
一、引言
隨著移動(dòng)應(yīng)用的普及，快速且高效地制作APP交互原型成為設(shè)計(jì)者的必備技能。如何將不同的設(shè)計(jì)元素組合成協(xié)調(diào)統(tǒng)一的頁(yè)面，并保證設(shè)計(jì)符合平臺(tái)特性，這是我們需要解決的問(wèn)題。接下來(lái)，讓我們一起探討如何利用Axure軟件來(lái)達(dá)成這一目標(biāo)。
二、母版與元件庫(kù)的運(yùn)用
將設(shè)計(jì)元素進(jìn)行模塊化，將常用的設(shè)計(jì)母版合并，是提高設(shè)計(jì)效率的關(guān)鍵。例如，將產(chǎn)品基本信息和可能購(gòu)買狀態(tài)分開(kāi)成兩個(gè)母版，組合在一起成為產(chǎn)品的完整頁(yè)面。熟悉并善用母版，可以大大提高工作效率。創(chuàng)建自己的元件庫(kù)，將常用的設(shè)計(jì)元素進(jìn)行歸類整理，便于后續(xù)使用。
三、熟悉APP設(shè)計(jì)規(guī)范與制定交互風(fēng)格
要制作出符合Android或iOS設(shè)計(jì)理念的交互原型，必須熟悉其設(shè)計(jì)規(guī)范。了解常規(guī)控件的設(shè)計(jì)規(guī)則，確保設(shè)計(jì)的產(chǎn)品能夠符合平臺(tái)的特性。根據(jù)個(gè)人習(xí)慣和使用場(chǎng)景，制定一套自己的交互風(fēng)格。例如，定義字體、顏色、布局等細(xì)節(jié)，確保整體設(shè)計(jì)的協(xié)調(diào)統(tǒng)一。
四、實(shí)踐案例：讀讀日?qǐng)?bào)原型制作
掌握了理論方法后，需要實(shí)踐的鍛煉來(lái)更好地吸收領(lǐng)悟。以「讀讀日?qǐng)?bào)」iOS版為例，對(duì)主要頁(yè)面進(jìn)行交互原型的制作。結(jié)合前文提到的內(nèi)容，實(shí)踐過(guò)程中靈活運(yùn)用元件庫(kù)和母版，使用輔助線保證部件的對(duì)齊和平均分布，提高布局的美感。
五、總結(jié)與展望
通過(guò)實(shí)踐，我們總結(jié)出快速制作APP交互原型的方法論：創(chuàng)建并善用元件庫(kù)和母版，熟悉APP設(shè)計(jì)規(guī)范并制定自己的交互風(fēng)格。這些方法不僅能幫助我們提高工作效率，還能保證設(shè)計(jì)的協(xié)調(diào)統(tǒng)一。隨著技術(shù)的不斷進(jìn)步和設(shè)計(jì)理念的不斷更新，我們期待未來(lái)有更多的設(shè)計(jì)工具和技巧出現(xiàn)，讓設(shè)計(jì)更加便捷、高效。
要快速且高效地制作APP交互原型，需要掌握一定的設(shè)計(jì)技巧和規(guī)范。通過(guò)實(shí)踐鍛煉，不斷積累經(jīng)驗(yàn)和總結(jié)方法，我們可以不斷提高自己的設(shè)計(jì)能力，為用戶帶來(lái)更好的體驗(yàn)。希望本文的內(nèi)容能對(duì)廣大設(shè)計(jì)師有所幫助，共同推動(dòng)移動(dòng)應(yīng)用設(shè)計(jì)的發(fā)展。 Axure設(shè)計(jì)圖：如何用Axure繪制APP原型圖和星型圖形
第一章：如何用Axure繪制簡(jiǎn)單的星型圖形
打開(kāi)AxureRP8軟件，開(kāi)始設(shè)計(jì)之旅。從基本元件面板中拖出一個(gè)名為“Box1”的元件。接著，選中該元件，會(huì)出現(xiàn)一系列圖形窗口。在這些窗口中，選擇星型圖形。右鍵點(diǎn)擊星型圖形，將其轉(zhuǎn)換為圖像。這樣，一個(gè)簡(jiǎn)單的星型圖形就繪制完成了。
第二章：如何用Axure繪制APP原型圖
要繪制APP原型圖，首先需要下載并安裝Axure軟件。對(duì)于iOS設(shè)備，可以使用320×480的分辨率設(shè)置輔助線。在繪制過(guò)程中，可以按F5生成原型，并在“Mobile/Device”選項(xiàng)中設(shè)置適配移動(dòng)設(shè)備的特殊原型。完成繪制后，可以通過(guò)本地服務(wù)器或Dropbox將原型分享給他人。
第三章：簡(jiǎn)潔設(shè)計(jì)，有效交互
在Axure中，盡管可以設(shè)計(jì)復(fù)雜的頁(yè)面交互，但為了保持原型圖的簡(jiǎn)潔和明了，建議避免過(guò)于復(fù)雜的設(shè)計(jì)。主要聚焦于頁(yè)面的核心功能和用戶體驗(yàn)，通過(guò)簡(jiǎn)單的交互來(lái)展示APP的主要特點(diǎn)。
第四章：Axure系列教程：HighCharts統(tǒng)計(jì)圖表設(shè)計(jì)
Axure不僅可以設(shè)計(jì)APP原型圖，還可以設(shè)計(jì)統(tǒng)計(jì)圖表。主要有兩種方法：一是利用Excel設(shè)計(jì)統(tǒng)計(jì)圖表，然后導(dǎo)入到Axure；二是利用HighCharts設(shè)計(jì)動(dòng)態(tài)統(tǒng)計(jì)圖表。HighCharts能夠提供更為動(dòng)態(tài)和交互的統(tǒng)計(jì)圖表設(shè)計(jì)體驗(yàn)。
第五章：注意事項(xiàng)與操作說(shuō)明
在利用Excel設(shè)計(jì)統(tǒng)計(jì)圖表時(shí)，需要注意的是，這種方式創(chuàng)建的圖表是靜態(tài)的，無(wú)法進(jìn)行修改。而利用HighCharts設(shè)計(jì)時(shí)，需要按F8生成網(wǎng)頁(yè)后才能看到動(dòng)態(tài)效果。HighCharts的相關(guān)文件需要妥善放置，以確保其正常運(yùn)行。
Axure是一款功能強(qiáng)大的設(shè)計(jì)工具，無(wú)論是繪制簡(jiǎn)單的星型圖形還是復(fù)雜的APP原型圖，都能輕松應(yīng)對(duì)。只要掌握基本操作和注意事項(xiàng)，就能設(shè)計(jì)出專業(yè)且吸引人的作品。
