中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

好久沒動手寫點什么了，翻看之前寫的一些關于Axure技能的教程，有些不忍直視，感覺寫的有些凌亂，所以決定重開一個篇章。

在新的教程中，不再是單純的教大家如何使用Axure這個工具創建原型，而是引入一種新的思路，讓大家以產品經理規劃產品的方式去創建通用性高、復用性高、可交互的產品原型組件。

友情提示：以下組件的規劃設計是以iPhone手機為藍本，思路可套用在安卓機型或是PC端

產品名稱：移動端產品原型組件（適用機型iPhone5）

產品定位：為需要經常畫產品原型的產品經理提供便利，方便其快速創建可讀性高的產品原型

市場分析：通過在各個產品群收集到的數據顯示，對于絕大多數需要畫產品原型的產品經理而言，都希望能夠擁有一套有價值的產品原型組件，方便其使用，而通過對市面上已有的產品組件下載量發現，該類產品的用戶需求量巨大

用戶分析：人人都是產品經理

競品分析：市面上，產品原型組件已有非常成熟的產品供用戶下載使用，但是，絕大多數的組件復用性不高，缺乏交互，需要用戶二次開發。對于一些新手而言，使用成本較高，而對于熟手而言，反而更傾向于重新開發設計

盈利分析：免費，無盈利

產品結構：無

產品功能：導航欄，標簽欄，單行列表…（待后期迭代完善）

備注：以上內容僅供參考，不同公司對產品立項有不同要求，但大致就是那么樣一個結構，寫這些內容只是讓你對產品經理所做的事有個大概的概念。

下面我們就具體的功能，開始這次的產品經理基本技能教學。

產品功能：導航欄

功能描述：顯示當前頁面標題

功能分析：無

制作方法：

1. 創建矩形組件：尺寸：320 x 44 像素，填充顏色：#000000，取消顯示邊框；雙擊該組件添加文本：頁面標題，字體顏色：#FFFFFF，將該組件命名為：導航欄
2. 添加OnLoad事件：設置當前文本的值為[[PageName]]
3. 將該組件轉為母版

這是個比較簡單的功能，但是為什么還要拿出來單獨當做教程的一部分來講？正如上面所說的，我們要制作的組件要體現出3大特性：通用性高、復用性高、可交互，那他是如何應用的呢？

從上不難看出，我們在使用該組件時，直接拖到目標頁面即可，并不需要額外設置什么，該組件便會自動獲取目標頁面的名稱，事實上，在我們創建產品的原型中，對于頁面的命名一般都相對比較規范，那么我們做過一遍的事情，為什么還要在組件上特別再做一次呢？而且在我們修改頁面名稱時，導航欄的名稱也會隨著改變，是不是很方便！

導航欄的樣式相對而言比較固定，如果不喜歡我的初始設定，可以自己在母版中對該組件進行樣式的調整。

方法論：這個組件使用的頻率非常的高，而且是個產品經理就會做，但像這樣處理的并不多，在這里提出這個簡單的例子，就是要告訴大家，善于發現解決問題的最佳方法，用以提高自己的工作效率。

產品功能：標簽欄

功能描述：應用分頁控制

功能分析：在我們接收到這個產品需求功能的時候，理論上應該思考一下幾個問題：標簽欄上需要幾個功能按鈕？元素構成是什么？點擊事件如何控制？帶著思考，我們應該多參考一下市面上主流的APP標簽欄的形式，從而去規劃該功能應該如何設計。通過調研，我們可以清楚的了解，APP的標簽欄功能按鈕的個數一般控制在2-5個，構成元素一般是圖標+文字，而點擊事件則是跳轉到功能按鈕相對應的頁面，而當跳轉至對應頁面時，對應的功能按鈕需要高亮顯示，用于告知用戶當前該頁面屬于當前功能。

制作方法：

1、創建基本組件（復雜的組件構成）

根據功能分析，明確組件構成：

特別需要說明一點，對于文字的樣式處理，有點特別，在這里，我用了IOS8的文字圖標，基本設置是：IOS8文字圖標（回車）+文字，其中文字圖標的字號為20px，文字的字號為10px，行間距為20，對齊方式：居中，底部對齊。這是個人喜好問題，我個人對內容的呈現有點偏執，可以按自己的習慣定義。之所以用IOS8文字圖標，是因為容易控制且方便快速插入圖標。

這里的圖標展示方式提供2種：文字圖標和圖片圖標，根據個人喜好選擇，稍后會演示如何使用。

其中我們將圖標+文字+熱點組合成為動態面板，而動態面板是中繼器的子組件，然后將中繼器+底部背景組成母版，各個元素的順序參看上圖。具體順序為什么這樣排列，大家可以思考下。

2、為中繼器構建數據集（提供數據來源）

為中繼器構造數據集時，需要對應組件基本的元素：txticon（文本圖標） iconImgNormal（圖片圖標未選中） iconImgSelected（圖片圖標選中）

title（按鈕名稱），其中，iconImgNormal為常態的圖片圖標的值，而iconImgSelected為高亮時圖片圖標的值

3、為對應的組件添加相應的交互事件

4、交互樣式及交互事件

該部分的內容是為了滿足上述所提到的點擊按鈕跳轉到對應頁面時高亮所選中的按鈕，其中，因為中繼器的特殊性，選擇的處理方法是增加一個選中時的圖片圖標用以替換正常狀態下的圖片圖標

特別提示：對于有多種樣式的統一Axure原生組件，賦值時需要用富文本！參看之前關于中繼器的教程：

如何使用Axure中繼器創建復雜的列表（二）

這個例子看起來相對比較復雜，用到的Axure原生組件較多，同時對不同的組件添加了相對應的事件，但思考一下，這些事件其實并不復雜，主要是對組件進行了賦值、簡單移動、重設大小，偶爾用到一些判斷。

在經過漫長的制作過程后，這個組件能給我們提供如何的便利呢？

也就是在我們拖拽該組件進入對應頁面后，只需要對其中的中繼器進行賦值，之后所有的操作便無需再管，更多展示效果：

至此，第一階段的教程就結束了，還是那句話，照著做，是個人都能做出來，但是如何利用教程所教，將這些技能應用到別的地方，卻是需要不斷去思考的。

當你會做上面的實例的時候，可以想想，如果我要實現下面的效果，需要在上面的組件中，做怎樣的修改？

下一篇，會告知如何解決上面的問題，并會做一個相對而言更為復雜的組件，以下是演示效果：

有興趣的可以先試著做一下，思路和標簽欄組件一樣，只是多了一些判斷，使用方法仍是僅需要修改數據就能夠展示不同的樣式。

題外話：關于這個項目——移動端產品原型組件，或許會持續下去，繼續添加好用的原型組件，或許不會，看大家意見的反饋！關于文中提到的文字圖標，請百度“IOS8-Icons”

作者：iFantasy ,微信公眾號（微信公眾號：產品設計曹蜀黍），一起交流！

本文由 @iFantasy 原創發布于人人都是產品經理。未經許可，禁止轉載