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

編輯導(dǎo)語：曾經(jīng)有產(chǎn)品經(jīng)理使用Axure做個人博客，并發(fā)布上線。Axure到底有多少潛力？能否可以挑戰(zhàn)更多的開發(fā)項目成為直接上線可用的產(chǎn)品？

筆者正好利用2020年超長的春節(jié)假期進(jìn)行一次探索。為什么會想到要用一款原型工具去做成品？

主要原因是所見即所得的編輯過程，讓那些需要一定時間學(xué)習(xí)編程才能完成的工作，由普通人來做學(xué)習(xí)成本幾乎可以不計，而且質(zhì)量的穩(wěn)定性更加可靠。

如輪播只要簡單設(shè)置就好，也無需考慮不同瀏覽器之間的代碼兼容性。其次Axure提供了強(qiáng)大的函數(shù)庫，給于了無限可能。

本次的挑戰(zhàn)的工具使用Axure8.0版，項目選擇了作者公司中交互較為復(fù)雜的移動端商城裝修功能。

此功能讓用戶在PC端通過所見即所得的編輯方式，將移動端常見的展示效果，像搭積木一樣，組合設(shè)置成為用戶需要的移動端商城的樣式（如下圖：左邊，裝修組件選擇區(qū)。中間，實際效果預(yù)覽區(qū)。右邊，組件參數(shù)設(shè)置區(qū)）。

本次挑戰(zhàn)的原型已發(fā)布到作者的線上空間，網(wǎng)址如下：

• 不帶Axure導(dǎo)航欄原型地址：http://newoweb.com/fituppage/fituppage.html
• 帶Axure導(dǎo)航欄原型地址：http://newoweb.com/fituppage

探索過程完成的主要功能：

1. 適用于不同屏幕尺寸的自適應(yīng)布局框架。
2. 裝修組件在預(yù)覽區(qū)中的實時顯示。
3. 預(yù)覽區(qū)指定位置插入新的裝修組件。
4. 預(yù)覽區(qū)中刪除已有的裝修組件。
5. 裝修組件組件在預(yù)覽區(qū)中位置的上下調(diào)整。
6. 裝修組件的設(shè)置變更時在預(yù)覽區(qū)中的同步。
7. 公用圖片選擇控件的單選與多選功能。
8. 公用翻頁控件。
9. 裝修組件“圖片列表”功能。
10. 裝修組件“視頻”功能。
11. 裝修組件“標(biāo)題”功能。

因時間有限，其它裝修組件的功能暫未提供，但依據(jù)筆者的經(jīng)驗，是可以實現(xiàn)的。如果需要與后臺通訊則要外掛JS文件處理其中的數(shù)據(jù)。

經(jīng)過這段時間的探索與試驗，總結(jié)下來，Axure可做一些對文件體積不敏感，交互不復(fù)雜的項目。

如：CMS，個人博客等展示類的產(chǎn)品。如果需要一些復(fù)雜的交互，也可以實現(xiàn)，實現(xiàn)的過程中則需要額外注意些事項，有興趣的朋友可以了解后面分享給大家的一些探索中的經(jīng)驗。

一、Axure做前端開發(fā)的優(yōu)缺點

1. 優(yōu)點

所見即所得的編輯效果：雖然只有一個優(yōu)點，但這是很多人的痛點，編程學(xué)習(xí)的東西很多，從HTML，CSS，JS到放棄，而Axure的工作方式讓前端的工作就像畫畫。

2. 缺點

1）成品文件冗余：

以本次項目為例，HTML文件：482KB。JS腳本：855KB（其中jquery庫162KB），CSS文件62KB，頁面數(shù)據(jù)文件：1270KB。

共計2669KB（不含圖片資源）。如果把項目中所有功能做完，HTML文件和頁面數(shù)據(jù)文件可能會更大，這也許是Axure為了存儲原型描述相關(guān)的內(nèi)容，生產(chǎn)的冗余。

2）執(zhí)行效率低：

主要發(fā)生在數(shù)據(jù)集頻繁大量變更時，會導(dǎo)至頁面明顯卡頓，而Axure的數(shù)據(jù)集機(jī)制也導(dǎo)致容易出現(xiàn)大量的數(shù)據(jù)操作。所以筆者只能控制一些界面元件的數(shù)量，降低實時同步頻率，選擇操作間隙更新數(shù)據(jù)等方法，讓卡頓感盡量減少。

3）調(diào)試過程繁瑣：

Axure并沒有現(xiàn)成的較好的調(diào)試方法，需要規(guī)劃一個調(diào)試空間，有興趣的朋友可以看后面的單元測試與集成測試介紹。

4）代碼碎片化：

Axure中所有的代碼都寫在元件上，這個開始沒太在意，但隨著項目的進(jìn)展，影響越來越大最后導(dǎo)致后面幾乎進(jìn)行不下去，最后不得不提出Axure偽代碼規(guī)范的解決方案。

經(jīng)過本次探索，筆者認(rèn)為如果Axure向可視化編程方向努努力，可能會極大的降低前端的開發(fā)門檻或改變開發(fā)方式。

如何使用Axure完成一些復(fù)雜的交互，下面將本次探索的一些經(jīng)驗分享給大家。

二、Axure編程中必備的基礎(chǔ)功能實現(xiàn)

1. 變量

實現(xiàn)變量效果的三種方式：

1. Axure全局變量：利用Axure原生的全局變量功能，這種變量所有頁面共用，可用在跨頁面的數(shù)據(jù)傳遞上。
2. 元件文本記錄：利用元件的文本記錄功能，這種方式保存的變量只在當(dāng)前頁面有效。
3. 數(shù)據(jù)集（中繼器）：用于存取復(fù)雜的數(shù)據(jù)，可以當(dāng)作一個小型的數(shù)據(jù)表用。由于中繼器也是頁面元件，所以只在當(dāng)前頁面有效。數(shù)據(jù)集中的數(shù)據(jù)可以通過文本元件配合篩選獲得或通過篩選配合字符截取完成，筆者推薦前者，因為更直觀簡單易調(diào)試。

2. 條件判定

Axure中每一個元件都可以添加條件判定。但用在模擬功能函數(shù)上，多選按鈕(checkbox)較為適用，因為選擇狀態(tài)可視有利于調(diào)試過程。

3. 循環(huán)

通過定時切換多選按鈕(checkbox)完成。缺點邏輯嚴(yán)謹(jǐn)差一些，需要注意邏輯并行可能的影響?？梢允褂媒没蜴i定等方式避免影響。

4. 自定義功能函數(shù)

通過定時切換多選按鈕(checkbox)完成。由于一個元件上承載的功能有限，所以有時需要多個checkbox組合完成，這種方式我們把他稱為功能函數(shù)組。

5. 命名規(guī)范

對于復(fù)雜的項目，元件多時間命名規(guī)范極為重要。否則再次優(yōu)化，修改無從著手。規(guī)范可以幫助我們看名知其意，也有利于在眾多元件中輕松找到需要的元件。

三、編程過程

1. 設(shè)計過程

• 功能設(shè)計圖：折分功能，幫助理解流程及流程中各動作的影響范圍。
• 功能列表：記錄拆分后的功能列表，幫助你實施時更加有條理，應(yīng)隨著偽代碼的編寫逐步完善。
• 功能影響列表：記錄功能可能影響到的范圍或用戶可能的非正常操作列表，并給出對應(yīng)的解決方案（如有必要可編寫解決方案的偽代碼），應(yīng)隨著偽代碼的編寫逐步完善。

2. 偽代碼編寫

偽代碼是將各元件的協(xié)作，用簡練的文字描述出來的方法。因為Axrue中的功能，都是寫在各各獨立的元件上的，非常碎片化。

對于復(fù)雜一些的功能，編輯不直觀，思維容易被干擾，后期也不利于梳理和閱讀。

本次的項目隨著元件的增加，幾乎到了不可維護(hù)的情況。

所以需要避免在元件中盲目操作導(dǎo)致越發(fā)混亂，同時對于之后的維護(hù)，只需要有對應(yīng)的偽代碼，便可快速了解整個全貌，輕松上手，偽代碼需要與命名規(guī)范結(jié)合使用。（本次使用的Axure偽代碼規(guī)范文檔：http://www.yssycm.com/personal/index.php/2020/03/15/axure-pseudocode-specification/）

3. 創(chuàng)建調(diào)試環(huán)境

調(diào)試即是偽代碼的實施的過程，按偽代碼的內(nèi)容要求，逐一操作創(chuàng)建對應(yīng)的元件并賦于對應(yīng)的功能。

將需要監(jiān)視的變量，數(shù)據(jù)集，功能函數(shù)組，分類陳列，方便運行中查看錯誤產(chǎn)生在那。必要時可增加額外功能元件，幫助觸發(fā)特定的情況。

Axure中的等待命令可以模擬編程調(diào)試中的斷點功能，完成調(diào)試后可以只隱藏不刪除，便于之后再次修改維護(hù)（發(fā)布上線的可以刪除減少一些冗余）。

4. 單元測試與集成測試

將項目中的功能，依據(jù)范圍，目的，拆分為相對獨立的功能模塊，每一個功能模塊在獨立的頁面進(jìn)行編輯和調(diào)試。

最后再組裝到一個頁面中。可以快速定位錯誤的位置，同時預(yù)覽調(diào)試速度也快。

5. 其它相關(guān)事項

• 選擇元件的順序會影響執(zhí)行順序，如果發(fā)生難已理解的錯誤，可以仔細(xì)查看下順序。
• 如果能有一個大的寬屏(2560*1440)的顯示器將極大提高效率與過程的舒適性。
• Axrue發(fā)布后與預(yù)覽時的圖片引用位置是不同的。因為在發(fā)布時會把項目所有用到的圖片進(jìn)行總和，無論在項目中引用過幾次是否在同一個界面中，最后都只會輸出一張，大家共用，一般是輸出到第一次引用此圖片的頁面資源文件夾中，如果項目中有依賴圖片路徑的操作，記的處理。
• 引入外部的CSS文件可以擴(kuò)展Axrue的樣式功能。
• 引入外部的JS文件可以實現(xiàn)更多的交互或?qū)崿F(xiàn)原型中的數(shù)據(jù)與外部系統(tǒng)打通。如果計劃要把數(shù)據(jù)傳送到后臺，偽代碼設(shè)計時就應(yīng)考慮到。

本文由 @鏡緣 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。