編寫引言：Behance網(wǎng)址是為技術(shù)專業(yè)藝術(shù)大師、以造型藝術(shù)維持生計(jì)或是將造型藝術(shù)做為一個(gè)十分嚴(yán)肅認(rèn)真喜好的人而創(chuàng)建的。在Behance上，客戶能夠依據(jù)喜好、技術(shù)專業(yè)水準(zhǔn)或是已經(jīng)一起做的新項(xiàng)目來創(chuàng)建微信朋友圈或合作方圈，是一個(gè)能與藝術(shù)大師和室內(nèi)設(shè)計(jì)師共享你的工作經(jīng)驗(yàn)和專業(yè)知識(shí)而且得到技術(shù)專業(yè)意見反饋的地區(qū)。此外，Behance在人機(jī)交互上實(shí)際上也是有非常值得大家參考的地區(qū)。
編寫引言：Behance網(wǎng)址是為技術(shù)專業(yè)藝術(shù)大師、以造型藝術(shù)維持生計(jì)或是將造型藝術(shù)做為一個(gè)十分嚴(yán)肅認(rèn)真喜好的人而創(chuàng)建的。在Behance上，客戶能夠依據(jù)喜好、技術(shù)專業(yè)水準(zhǔn)或是已經(jīng)一起做的新項(xiàng)目來創(chuàng)建微信朋友圈或合作方圈，是一個(gè)能與藝術(shù)大師和室內(nèi)設(shè)計(jì)師共享你的工作經(jīng)驗(yàn)和專業(yè)知識(shí)而且得到技術(shù)專業(yè)意見反饋的地區(qū)。此外，Behance在人機(jī)交互上實(shí)際上也是有非常值得大家參考的地區(qū)。
假如為室內(nèi)設(shè)計(jì)師強(qiáng)烈推薦一個(gè)網(wǎng)站，哪一個(gè)最非常值得強(qiáng)烈推薦呢？
想來很多人都是會(huì)提及Behance，因?yàn)樗荘hotoshop手機(jī)軟件隸屬企業(yè)Adobe集團(tuán)旗下的服務(wù)平臺(tái)，知名度當(dāng)然不低。實(shí)際上除開知名度，Behance網(wǎng)址在人機(jī)交互上面有許多非常值得討論的地區(qū)。
1. 基本上敘述 1.1 情況
Behance為什么非常值得強(qiáng)烈推薦？
Behance是一個(gè)網(wǎng)站設(shè)計(jì)和小區(qū)，聚集了很多的高品質(zhì)原創(chuàng)作品。在2012年，它被Adobe以1.五億美金收益手下。
回收Behance是Adobe處心積慮改革創(chuàng)新的代表，在Adobe擴(kuò)大的全過程中，Behance盈利性和社交媒體特性都持續(xù)加強(qiáng)。
為融入新的發(fā)展趨向，網(wǎng)址也持續(xù)開展重做，持續(xù)添加新作用，并嘗試融合Creative Cloud服務(wù)項(xiàng)目。
實(shí)踐經(jīng)驗(yàn)證明它是很取得成功的：回收Behance十年時(shí)間內(nèi)，Adobe企業(yè)股票價(jià)格從約$30漲到如今的約$380，上漲幅度超出10倍。股票價(jià)格一路標(biāo)紅，總市值年年飆升。
該網(wǎng)址均值客戶停留時(shí)間超出六分鐘，足夠證實(shí)服務(wù)平臺(tái)內(nèi)容對客戶的誘惑力。
這非常大水平上是由于Behance并不是一個(gè)一般的網(wǎng)站設(shè)計(jì)，它或是一個(gè)社交網(wǎng)絡(luò)平臺(tái)、資源代管網(wǎng)站與分享平臺(tái)。它變成了一個(gè)為本人原創(chuàng)者、商業(yè)服務(wù)企業(yè)打造出的崗位關(guān)聯(lián)互聯(lián)網(wǎng)。
為了更好地探索Behance取得成功的緣故，將它的網(wǎng)址再次“設(shè)計(jì)方案”一遍好像是一個(gè)非常好的學(xué)習(xí)過程。小編應(yīng)用Axure手機(jī)軟件，共享一些Behance在互動(dòng)作用上的完成方式。
但是必須留意的是，這只是是一個(gè)嘗試重置特性的設(shè)計(jì)方案，因此沒法考慮周全，一些版塊和關(guān)鍵點(diǎn)將被忽視。
1.2 原形總體實(shí)際效果瀏覽
倘若你無法打開Behance網(wǎng)址，沒事兒，這兒是應(yīng)用Axure重置以后的表明實(shí)際效果（文中全部gif動(dòng)態(tài)圖為原形制做進(jìn)行后錄制屏幕的實(shí)際效果，不然可能開展照片備注名稱）。
Behance的導(dǎo)航欄菜單都收納整理在了網(wǎng)頁頁面頂端，從左至右先后是：知名品牌logo、網(wǎng)頁鏈接文本、檢索、郵箱、通告、用戶頭像、apps運(yùn)用結(jié)合等。
導(dǎo)航欄菜單秩序井然，不但是主頁，在每一個(gè)網(wǎng)頁頁面客戶都能夠?yàn)g覽到這一固定不動(dòng)的導(dǎo)航欄菜單，不會(huì)迷途。頂端導(dǎo)航欄的占有室內(nèi)空間小，給下邊的內(nèi)容行為主體空出了非常大的主題活動(dòng)室內(nèi)空間，客戶能夠很輕輕松松的被設(shè)計(jì)產(chǎn)品吸引住。
我們可以將總體的網(wǎng)址分成好多個(gè)網(wǎng)頁頁面：
- 初次瀏覽頁（未登錄）
- 為您展現(xiàn)（已登陸）
- 發(fā)覺
- 即時(shí)（直播間）
- 崗位
- 檢索等
關(guān)鍵作用包括：
- 內(nèi)容展現(xiàn)與強(qiáng)烈推薦
- 內(nèi)容提交編寫
- 檢索內(nèi)容
- 用戶注冊
- 求職招聘
- 用戶評(píng)價(jià)與關(guān)心等。
下邊是在瀏覽主頁的時(shí)候會(huì)碰到的一些作用互動(dòng)：
2.1 時(shí)間等候與彈出來實(shí)際效果
在初次加載主頁時(shí)，歷經(jīng)約3秒，會(huì)由下往上彈出來用戶注冊框，這類實(shí)際效果在Axure中實(shí)際操作非常簡單。
- 將申請注冊彈窗設(shè)定為動(dòng)態(tài)面板并掩藏；
- 為該動(dòng)態(tài)面板加上show/hide事情，挑選show表明，動(dòng)漫為往上劃到；
- 加上wait等候事情，時(shí)間3.5s；
- 挑選“bring to front”能夠?qū)?dòng)態(tài)面板置放在最高層；
- 完成對話框尺寸轉(zhuǎn)變 時(shí)，彈出來的控制面板維持相對性電腦瀏覽器的右下方部位。需選中槍出的動(dòng)態(tài)面板，挑選“Pin to browser”, 部位設(shè)定為水準(zhǔn)居右，豎直居底端，并選定“Keep in front (browser only)”。
溫馨提醒：元件總體目標(biāo)為This時(shí)，指的是本元件，This能夠確保在本元件變更名稱時(shí)事情互動(dòng)仍合理。
2.2 標(biāo)識(shí)符分辨與即時(shí)意見反饋
進(jìn)到Behance建立帳戶時(shí)必須對登陸密碼文本域開展多種標(biāo)準(zhǔn)管束，而且在客戶輸入支付密碼時(shí)，必須即時(shí)反饋機(jī)制。
在Axure中必須開展以下的設(shè)定：
- 為登陸密碼文本框加上一個(gè)Text Changed（文本更改時(shí)）的事情，只需客戶鍵入標(biāo)識(shí)符便會(huì)開啟下邊的標(biāo)準(zhǔn)意見反饋信息內(nèi)容，給Text Changed設(shè)定好幾個(gè)case（標(biāo)準(zhǔn)，又稱作測試用例）開展分辨；
- 意見反饋信息內(nèi)容：新創(chuàng)建文本并變換為動(dòng)態(tài)面板，包括2個(gè)情況即鍵入合乎和不符。同樣，有多少必須充分考慮的標(biāo)準(zhǔn)分辨就新創(chuàng)建多少個(gè)動(dòng)態(tài)面板；
- 用the length of widget value來分辨字符串?dāng)?shù)組的長短；
- 分辨英文大寫和小寫字母，應(yīng)用text on widget，挑選包括英語字母，如A，以后盡量挑選Match Any，確保每鍵入一次標(biāo)識(shí)符都開展分辨。從A-Z，a-z先后各自加上，勞動(dòng)量很大。
在具體開發(fā)設(shè)計(jì)中，實(shí)際上這類英文字符分辨一般 只必須一二行編碼，其他標(biāo)識(shí)符分辨同樣。
2.3 及時(shí)的情況變換：沒必要一直用動(dòng)態(tài)面板
在該Behance的網(wǎng)址上，文本在被電腦鼠標(biāo)移進(jìn)時(shí)，字體樣式會(huì)從低清晰度變成白色，我們可以迅速區(qū)別導(dǎo)航欄版塊，并在實(shí)際操作前后左右清楚地見到及時(shí)的轉(zhuǎn)變 。
例如這兒的電腦鼠標(biāo)移進(jìn)的迅速轉(zhuǎn)換實(shí)際效果，即當(dāng)鼠標(biāo)移進(jìn)按鍵上，按鍵色調(diào)由淡藍(lán)色變成暗藍(lán)色，完成及時(shí)的情況意見反饋。
為完成這類多種實(shí)際效果轉(zhuǎn)變 的方式是應(yīng)用動(dòng)態(tài)面板，但雖然動(dòng)態(tài)面板十分好用和強(qiáng)勁，有的情況下大家沒必要用動(dòng)態(tài)面板。
- 按鍵內(nèi)置的款式實(shí)際效果（Style Effects）十分好用：MouseOver（電腦鼠標(biāo)飄浮）、MouseDown、Selected、Disabled、Focused等，能夠降低對動(dòng)態(tài)面板的依靠。
- 默認(rèn)設(shè)置的元件如文章標(biāo)題、文章段落、文本等都是有款式實(shí)際效果。用起來能提高高效率。
這也得到一條本人應(yīng)用Axure的基本準(zhǔn)則——假如能無需動(dòng)態(tài)面板也不應(yīng)用。
3. 為您展現(xiàn)頁 3.1 照片發(fā)暗小技巧
在Behance上，原創(chuàng)者的頭像圖片和著作是展現(xiàn)數(shù)最多的原素（以圖片的格式），網(wǎng)址給這種原素添加了網(wǎng)頁鏈接，因而他們是一種快捷方式圖標(biāo)。
他們被置放在了為您展現(xiàn)網(wǎng)頁頁面的上邊，原創(chuàng)者和著作歸類確立，也突顯其必要性。
當(dāng)瀏覽時(shí)電腦鼠標(biāo)移進(jìn)圓形頭像、正方形著作處時(shí)，這種照片會(huì)變?yōu)樯钭厣?/p>
那麼，在Axure中怎樣完成這類實(shí)際效果？
以上文上述，動(dòng)態(tài)面板創(chuàng)建2個(gè)情況就可以，可是情況變換很慢。
在Axure中選用的方法是：
- 最底層為jpg圖片的格式做為情況
- 頂部為一個(gè)徹底全透明的幾何圖形樣子元件（色調(diào)為灰黑色）作為蒙版，設(shè)定實(shí)際效果即電腦鼠標(biāo)飄浮后變成30%清晰度的灰黑色，并且為該元件加上開啟連接事情就可以。
那樣做的益處是，無需應(yīng)用動(dòng)態(tài)面板，也無需費(fèi)勁應(yīng)用二張一淺一深的照片來達(dá)到效果。
3.2 動(dòng)態(tài)面板，Of Course I Still Love You
著名的商業(yè)服務(wù)國際航空公司SpaceX的可回收利用火箭彈會(huì)停在一艘叫 “Of Course I Still Love You”的船只上，讓火箭彈平穩(wěn)地停穩(wěn)。
在Axure中，動(dòng)態(tài)面板就如同這艘船，暢游了一圈，發(fā)覺它依然是最喜歡。
Behance 強(qiáng)烈推薦的著作以宮格方法排序，各自包括了作品封面圖、創(chuàng)作者（精英團(tuán)隊(duì)）頭像圖片和名稱，也有關(guān)注點(diǎn)贊數(shù)和查看數(shù)。
不同點(diǎn)是，Behance為這種著作提升了手機(jī)軟件標(biāo)識(shí)。如果你把電腦鼠標(biāo)移進(jìn)到封面圖上，會(huì)發(fā)生該著作應(yīng)用的寫作手機(jī)軟件，例如Adobe自己的illustrator、AdobeXD等，那樣能幫助我們迅速區(qū)別某行業(yè)的著作。
除此之外，原創(chuàng)者一欄中，既能夠是本人還可以是包括好幾個(gè)使用者的協(xié)作方式，這十分有利于原創(chuàng)者們的商業(yè)合作，大家也可以了解某一著作身后實(shí)際上有多本人投入了勤奮。
對于Axure中電腦鼠標(biāo)移進(jìn)發(fā)生新的標(biāo)識(shí)的完成方式，只需用動(dòng)態(tài)面板就可以了。
此外，卻會(huì)碰到一個(gè)較為繁雜的難題：怎樣用最簡單的方式完成宮格方式的原素合理布局？
例如Behance強(qiáng)烈推薦的著作便是默認(rèn)設(shè)置了一欄4個(gè)，從上至下先后鋪平，自然要各自包括原創(chuàng)者等信息內(nèi)容。
應(yīng)對這類合理布局簡易但涉及到好幾個(gè)原素的情況下，最初的方法是各自每一個(gè)置放照片、文本等元件，一個(gè)一個(gè)地變更。
- 優(yōu)勢：能夠立即變更內(nèi)容，便捷兩端對齊排序和合理布局。
- 缺陷：勞動(dòng)量會(huì)非常大。
那麼有什么方法既能夠迅速又簡單？
最非常值得強(qiáng)烈推薦的是Repeater（即中繼器，具體漢語翻譯為復(fù)制器更立即，它等同于一個(gè)適用數(shù)據(jù)庫查詢仿真模擬與關(guān)聯(lián)、特性可拷貝與改動(dòng)的實(shí)際效果元件）。
但在Behance上，原創(chuàng)者一般 只求1位，可是有時(shí)會(huì)出現(xiàn)多名使用者。由于這兒的區(qū)別，假如用中繼器要想把網(wǎng)址的實(shí)際效果做出去就比較多花一點(diǎn)時(shí)間關(guān)聯(lián)數(shù)據(jù)信息。
在這兒應(yīng)用的是初始的方式，下面會(huì)出現(xiàn)中繼器的實(shí)際效果展現(xiàn)和表明。
3.3 文本關(guān)聯(lián)：你變因?yàn)槲腋S變
Behance適用多語言表達(dá)，我們在網(wǎng)頁頁面底端能夠變更頁面語言表達(dá)。例如點(diǎn)一下English，變成英文頁面，下邊的菜單文本隨著同歩更改。如圖所示：
這兒牽涉到一個(gè)簡易的實(shí)際效果：文本關(guān)聯(lián)，數(shù)據(jù)庫同步轉(zhuǎn)變 。
因?yàn)殡娔X鼠標(biāo)移進(jìn)和點(diǎn)一下時(shí)文本從低清晰度（灰白色）變成白色，并有三角形往上和往下，因而還必須采用動(dòng)態(tài)面板。在Axure中：
- 即將更改的文本元件設(shè)定為動(dòng)態(tài)面板，起名叫“目標(biāo)語言”，情況一里邊的文本元件取名為“表明語言表達(dá)”，即電腦鼠標(biāo)未選定的情況；情況二里邊的文本元件為“表明語言表達(dá)-白”，即鼠標(biāo)單擊轉(zhuǎn)變 的情況。
- 將目錄中的每一個(gè)獨(dú)立的語言表達(dá)文本元件各自取名為English，日本語等。
- 為每一個(gè)語言表達(dá)文本元件各自加上鼠標(biāo)點(diǎn)擊事情，挑選Set Text（設(shè)定文本），將“目標(biāo)語言”動(dòng)態(tài)面板下的2個(gè)情況的文本元件，各自和目錄語言表達(dá)元件文本關(guān)聯(lián)，完成文本點(diǎn)一下時(shí)同歩變更。
這兒只需采用Set Text 設(shè)定文本，先后實(shí)際操作就可以。Set Text 能夠?qū)⒖傮w目標(biāo)元件的文本更改成本身元件的文本，作用好用。例如仿真模擬會(huì)員注冊快速登錄表明登錄名時(shí)能夠采用這一方式。
留意：假如要完成2個(gè)文本變更隨意一個(gè)，此外一個(gè)隨著同歩變更，必須給2個(gè)文本元件都應(yīng)用Set Text。例如輸入支付密碼，不管表明/掩藏，鍵入都能夠同歩變更。
4. 發(fā)覺頁
它是用Axure制做最費(fèi)勁的一個(gè)網(wǎng)頁頁面：
4.1 原素上下翻轉(zhuǎn)
在Behance的發(fā)覺網(wǎng)頁頁面下，依照手機(jī)軟件類型、行業(yè)分類等開展了著作歸類。
客戶能夠上下轉(zhuǎn)換著作超出10個(gè)歸類菜單（小正方形），方式是點(diǎn)一下各自坐落于網(wǎng)頁頁面最左邊和最右邊的三角箭頭符號(hào)，完成菜單按序上下往返轉(zhuǎn)換，還可以不點(diǎn)一下箭頭符號(hào)，隨意點(diǎn)一下一個(gè)菜單，下邊展現(xiàn)該版塊的內(nèi)容。
4.1.1 必須完成的作用
- 點(diǎn)一下能夠按順序翻轉(zhuǎn)菜單，上下點(diǎn)一下均必須適用。
- 點(diǎn)一下菜單后，該菜單翻轉(zhuǎn)至垂直居中，并在下邊展現(xiàn)該版塊內(nèi)容。
- 隨意情況下點(diǎn)一下隨意菜單，能全自動(dòng)挪動(dòng)該菜單至垂直居中部位。
4.1.2 完成構(gòu)思：動(dòng)態(tài)面板 繁雜的標(biāo)準(zhǔn)分辨
- 加上動(dòng)態(tài)面板A：將11個(gè)小正方形的菜單等間距排列后置放在其中；另外加上2個(gè)往左邊和向右的箭頭用以加上鼠標(biāo)單擊事情。留意動(dòng)態(tài)面板的總總寬、菜單的總寬、菜單間隔，便于設(shè)定后邊的偏移間距。
- 動(dòng)態(tài)面板A必須設(shè)定共10個(gè)情況（依據(jù)具體有的菜單總數(shù)決策，Behance官方網(wǎng)站的總數(shù)遠(yuǎn)遠(yuǎn)地不僅10個(gè)，這兒開展了簡單化），每一個(gè)情況中各自設(shè)定單一菜單被選定且其他菜單未選定就可以。*情況取名時(shí)可采用從負(fù)5到0再到5開展。如state0意味著默認(rèn)設(shè)置的“著作優(yōu)選菜單”，往左邊為state-1, 往右邊為state1。
- 增加一個(gè)動(dòng)態(tài)面板B，總總寬為網(wǎng)頁頁面總寬（如1600），把動(dòng)態(tài)面板A放入B中，完成剪裁實(shí)際效果。那樣，不管控制面板A如何上下偏移，它都是在控制面板B之中。
- 給動(dòng)態(tài)面板里邊的左箭頭加上鼠標(biāo)單擊指令，挑選Move（挪動(dòng)）事情，這兒設(shè)定的主要參數(shù)是x軸挪動(dòng)210 (即菜單總寬 間隔），y軸挪動(dòng)0。
- 點(diǎn)一下箭頭符號(hào)還會(huì)繼續(xù)開啟下邊的內(nèi)容版塊多內(nèi)內(nèi)容變更：
4.1.3 動(dòng)態(tài)面板
含著作細(xì)分化標(biāo)識(shí)、免費(fèi)下載/關(guān)心按鍵，該控制面板默認(rèn)設(shè)置掩藏。
- 大文章標(biāo)題：Set Text 同歩變更文本。
- 副標(biāo)題：Set Text 同歩變更文本。
為點(diǎn)一下左箭頭增加case標(biāo)準(zhǔn)分辨，當(dāng)動(dòng)態(tài)面板A情況為state0時(shí)，挪動(dòng)動(dòng)態(tài)面板B，表明動(dòng)態(tài)面板C， 設(shè)定變更大文章標(biāo)題和副標(biāo)題的文本。依照此實(shí)際操作，各自為10個(gè)情況開展標(biāo)準(zhǔn)分辨，右箭頭的實(shí)際操作與左箭頭實(shí)際操作同樣。
實(shí)際操作時(shí)，存有內(nèi)容連動(dòng)和多種多樣標(biāo)準(zhǔn)分辨。就算在簡單化了菜單總數(shù)的狀況下，為完成實(shí)際效果依然比較費(fèi)時(shí)費(fèi)力。
如果在實(shí)際開發(fā)中，可以采用兩三個(gè)元件展示出效果并和開發(fā)者溝通，以避免不必要的成本。
4.2 一個(gè)按鈕三個(gè)功能
網(wǎng)站上有一個(gè)按鈕，用戶可以點(diǎn)擊“關(guān)注xxx”，關(guān)注后按鈕文字變成“正在關(guān)注xxx”，當(dāng)鼠標(biāo)移入按鈕，文字顯示為“取消關(guān)注xxx”且按鈕背景為紅色。
實(shí)現(xiàn)方法：在一個(gè)動(dòng)態(tài)面板中添加3個(gè)狀態(tài)，分別為關(guān)注、正在關(guān)注、取消關(guān)注。添加鼠標(biāo)點(diǎn)擊事件，增加狀態(tài)的條件判斷即可。
5. 實(shí)時(shí)（直播）頁
我們可以在該頁面看到各種直播活動(dòng)和直播視頻回放，Behance官方和不同類型的創(chuàng)作者合作，帶來了許多免費(fèi)的教程。
用戶既可以學(xué)習(xí)（白票），創(chuàng)作者還可以分享自己的觀點(diǎn)和創(chuàng)作技能，獲得關(guān)注，提升商業(yè)價(jià)值，同時(shí)這也成為Behance官方打造一個(gè)出色的藝術(shù)設(shè)計(jì)社區(qū)的重要方式。
在這個(gè)頁面下，直播的視頻有多個(gè)不同的劃分，每個(gè)分類下的視頻可以點(diǎn)擊后左右滾動(dòng)。
這里可以使用Axure的Repeater (中繼器)功能，一旦做好第一個(gè)分類，其它的只要復(fù)制一下再更改數(shù)據(jù)即可。
5.1 中繼器：復(fù)制你，還可不同于你
1）新建一個(gè)動(dòng)態(tài)面板A，實(shí)現(xiàn)裁切效果，保證所有內(nèi)容都在A的范圍內(nèi)。
2）在面板A內(nèi)部新建一個(gè)動(dòng)態(tài)面板B，放入一個(gè)箭頭和中繼器。
這樣無論面板B的內(nèi)容如何左右滾動(dòng)，始終在面板A中。
3）在動(dòng)態(tài)面板B里面的中繼器中，新增7個(gè)元件。
分別取名：rr-thumbnail（視頻封面），rr-title（視頻標(biāo)題），rr-avatar（直播者頭像），rr-name（直播者名字）, rr-time（直播日期）, rr-hour（視頻時(shí)長）, rr- softwareicon（軟件圖標(biāo)）, rr-view（觀看數(shù)量）。*只要英文，忽略括號(hào)內(nèi)的中文，前綴rr-只是為了好區(qū)分而使用。
4）在動(dòng)態(tài)面板B里面的中繼器中，命名列屬性。
分別是：thumbnail、title、avatar、name、time、hour、softwareicon、view。
接著在每個(gè)列屬性下方新增參數(shù)，點(diǎn)擊右鍵倒入圖片或者直接輸入文字，這需要一一對應(yīng)。
比如：添加第一個(gè)直播的內(nèi)容為：視頻封面倒入一張，大標(biāo)題為“hello designer”，作者為“adobe官方”，觀看時(shí)長1小時(shí)20分，觀看次數(shù)7000次，日期為2年10月30日。
5）重要的一步，綁定數(shù)據(jù)。
為中繼器增加item loaded命令，使用Set Text和Set Image來綁定數(shù)據(jù)。
綁定大標(biāo)題：選擇Set Text 設(shè)置文本事件，目標(biāo)為rr-title,設(shè)置為text，值為[[Item.title]]。這里的item代指的是中繼器里面數(shù)據(jù)庫。
綁定視頻封面：選擇set image設(shè)置圖像事件, 目標(biāo)為rr-thumbnail，默認(rèn)值value為[[Item.thumbnail]]。其它的綁定用戶頭像、觀看次數(shù)等，原理相同。
6）計(jì)算好每個(gè)視頻封面占用的寬度和間隔寬度。
7）為箭頭添加鼠標(biāo)點(diǎn)擊命令，選擇Move移動(dòng)事件，目標(biāo)為動(dòng)態(tài)面板B，設(shè)置好移動(dòng)的距離。
當(dāng)遇到可以通過單純的復(fù)制來實(shí)現(xiàn)大面積布局且需要單獨(dú)更改數(shù)據(jù)的時(shí)候，可以采用中繼器，以提升效率。
Axure的中繼器相當(dāng)于一個(gè)數(shù)據(jù)庫，由自己添加不同類型的數(shù)據(jù)，這些數(shù)據(jù)都有一個(gè)不同的ID，新增的元件經(jīng)過與該ID綁定（即item.id名字），主要使用Set Text和Set Image來傳輸數(shù)據(jù)。最后展示出來。中繼器除了增加，還有刪除、查找、排序等功能。
6. 個(gè)人資料頁
Behance是一個(gè)社區(qū)，因此每個(gè)人都可以擁有自己的主頁，別人可以查看你的作品，關(guān)注你。
而自己在主頁中，可以查看自己的作品、為他人好評(píng)的作品集合，還可以編輯草稿，前往專門的頁面創(chuàng)建作品。
登錄后我們可以設(shè)置個(gè)人資料，這里就涉及到了狀態(tài)讀取和數(shù)據(jù)回傳。
在Axure中需要使用動(dòng)態(tài)面板嵌套和多重條件判斷來實(shí)現(xiàn)。由于關(guān)聯(lián)較多，因此需要考慮周全。
6.1 狀態(tài)回傳
在頁面右下角，有一個(gè)懸浮按鈕，點(diǎn)擊可以彈出“個(gè)人資料清單”面板，要關(guān)閉這一面板只需要再次點(diǎn)擊按鈕或者選擇面板內(nèi)部的“不再顯示此項(xiàng)”。
面板內(nèi)部包含4個(gè)獨(dú)立的資料類別，每個(gè)類別包含兩種狀態(tài)：
- 已完成
- 未完成
采用了單選框的形式來設(shè)計(jì)。
- 分別將4個(gè)資料類別設(shè)置成動(dòng)態(tài)面板，包含選中和未選中兩種狀態(tài)。全部類別作為一個(gè)整體的組合。默認(rèn)隱藏；
- 新增一個(gè)按鈕為動(dòng)態(tài)面板，包含兩個(gè)狀態(tài)，即可打開時(shí)和需收起時(shí)，有圖標(biāo)差異；
- 為按鈕添加單擊事件，選擇show/hide 中的顯示面板，動(dòng)畫為向上劃出，實(shí)現(xiàn)單擊按鈕后資料面板向上彈出。此時(shí)增加條件判斷使得按鈕可以關(guān)閉面板，操作較為簡單；
- 點(diǎn)擊面板內(nèi)部的類別，再次彈出操作面板，判斷輸入有效性，若“保存”則更改本類別的狀態(tài)為已選中，選“取消”則是未選中。點(diǎn)擊保存或取消或點(diǎn)擊“x”關(guān)閉圖標(biāo)，都需要關(guān)聯(lián)外部的懸浮按鈕的打開與關(guān)閉狀態(tài)。
其中這里還涉及空字符判斷、文本字?jǐn)?shù)限制與實(shí)時(shí)反饋：
在Axure中，利用元件的length屬性來判斷文本的字符長度，通過多個(gè)條件設(shè)置即可。
根據(jù)輸入長度還需要在下方實(shí)時(shí)反饋提示文本（設(shè)置為默認(rèn)隱藏），是否輸入了足夠的長度。
比如這里的字符需要是3-20位，那么文本框的text changed本文變化事件的判斷情況有：0（空字符）、非0、0到3、3到22、大于22，注意在新增case條件判斷的同時(shí)顯示和隱藏提示文本即可。
同時(shí)，點(diǎn)擊資料清單面板里面的類別之后彈出了二級(jí)面板，背景顏色為90%黑色，并且是填充了整個(gè)屏幕，因此需要做到自適應(yīng)。
操作方法：將黑色矩形轉(zhuǎn)換為動(dòng)態(tài)面板，設(shè)置為100% wide ( browser only)，默認(rèn)隱藏。當(dāng)打開、關(guān)閉外部的懸浮按鈕，以及點(diǎn)擊二級(jí)面板的保存、取消、“x”關(guān)閉圖標(biāo)，都要關(guān)聯(lián)此黑色背景的show/hide狀態(tài)。
在資料清單面板外部的操作完成后需要將狀態(tài)返回給面板內(nèi)部，比如增加橫幅后應(yīng)同時(shí)設(shè)置面板里面橫幅類的狀態(tài)更換為已選中。
該頁面需要考慮多個(gè)面板的嵌套、多個(gè)內(nèi)外部和同級(jí)的動(dòng)態(tài)面板的狀態(tài)回傳，做好條件判斷，確保沒有邏輯問題。
7. 編輯個(gè)人資料
點(diǎn)擊頭像可以進(jìn)入專門的頁面編輯詳細(xì)的個(gè)人資料，包含：
- 基本信息
- 團(tuán)隊(duì)
- 工作經(jīng)歷
- 關(guān)聯(lián)賬號(hào)等欄目
還可以增加自定義欄目。
Behance在這里采用了典型的左右布局，即左邊是固定的菜單導(dǎo)航列表，右側(cè)是可上下滑動(dòng)內(nèi)容區(qū)域。
這里比較有趣的是，左右兩部分并非固定地劃分，而是在操作時(shí)有顯眼的聯(lián)系，最主要的網(wǎng)頁元素是滾動(dòng)條指示器。
7.1 窗口動(dòng)態(tài)滾動(dòng)
- 當(dāng)鼠標(biāo)上下滾動(dòng)時(shí)，右側(cè)內(nèi)容滾動(dòng)，左側(cè)的指示器聯(lián)動(dòng)滾動(dòng)（切換）
- 在任意位置，點(diǎn)擊左側(cè)的導(dǎo)航菜單，指示器快速滾動(dòng)切換至該欄目，右側(cè)同樣快速滾動(dòng)至該導(dǎo)航關(guān)聯(lián)的內(nèi)容區(qū)域。
在Axure中，要做到這樣無縫過渡的效果，推薦的方法是使用錨點(diǎn)來當(dāng)作定位觸發(fā)器。
7.1.1 基本要求
- 窗口向下/上滾動(dòng)，右側(cè)內(nèi)容區(qū)域滾動(dòng)固定的距離，對應(yīng)的指示器要指向相應(yīng)的左側(cè)導(dǎo)航菜單。
- 分別點(diǎn)擊左側(cè)7個(gè)導(dǎo)航菜單欄，右側(cè)內(nèi)容滾動(dòng)到響應(yīng)的錨點(diǎn)位置。
7.1.2 實(shí)現(xiàn)過程
- 設(shè)置左側(cè)菜單為動(dòng)態(tài)面板，包含7個(gè)狀態(tài)，每個(gè)狀態(tài)單機(jī)選中時(shí)帶藍(lán)色指示器；
- 計(jì)算好右側(cè)內(nèi)容每個(gè)區(qū)域的高度、間隔；
- 為頁面創(chuàng)建window scrolled (窗口滾動(dòng)) 事件，若窗口滾動(dòng)至指定的距離或范圍，左側(cè)的動(dòng)態(tài)面板要切換到對應(yīng)的狀態(tài)。這里需要增加7個(gè)case條件判斷，距離范圍會(huì)根據(jù)右側(cè)的內(nèi)容區(qū)域高度不同而不同。設(shè)置為整數(shù)方便計(jì)算和對齊；
- 增加7個(gè)熱區(qū)元件當(dāng)作錨點(diǎn)定位器，放在頁面最左側(cè)的位置，錨點(diǎn)要分別命名如anchor1,anchor2…anchor7；
- 在動(dòng)態(tài)面板內(nèi)部，分別對每個(gè)狀態(tài)添加鼠標(biāo)單擊事件，單擊時(shí)選擇 scroll to widget (滾動(dòng)至元件) 命令，目標(biāo)為錨點(diǎn)（anchor1…anchor7）, 方向?yàn)榇怪薄?/li>
在賬戶連接中，可以通過添加鏈接的方式綁定自己的社交媒體賬戶。
在Axure中，需要實(shí)現(xiàn)基本的文本非空判斷、動(dòng)態(tài)面板狀態(tài)判斷實(shí)現(xiàn)同一按鈕不同功能。此外，需要允許社交媒體賬號(hào)列表能拖動(dòng)排序。
7.2.1 基本思路
使列表可選中并拖動(dòng)至目標(biāo)范圍，其它列表相應(yīng)上下移動(dòng)一定距離。
7.2.2 主要功能
事件：Mouse Hover, Mouse Exit, Dragged, Drag Dropped。
命令：切換動(dòng)態(tài)面板狀態(tài)、Move。
7.2.3 步驟
- 新建一個(gè)Twitter動(dòng)態(tài)面板，包含兩個(gè)狀態(tài)：1）默認(rèn)的未選中狀態(tài)，帶陰影；2）被選中的狀態(tài)。
- 同上，新增其它三個(gè)動(dòng)態(tài)面板，F(xiàn)acebook, YouTube, Instagram。上下排列四個(gè)列表。
- 為Twitter面板添加交互事件：鼠標(biāo)懸浮時(shí)切換為面板狀態(tài)2（選中狀態(tài)），鼠標(biāo)移出時(shí)切換為狀態(tài)1。
- 再添加Dragged被拖動(dòng)事件，執(zhí)行Move移動(dòng)命令，目標(biāo)為This即本動(dòng)態(tài)面板，移動(dòng)參數(shù)為With Drag即移動(dòng)距離為拖動(dòng)距離。
- 最后，再添加Dragged Dropped拖動(dòng)釋放事件，這里需要進(jìn)行三個(gè)case用例判斷，分別是本面板的區(qū)域覆蓋到了Facebook, YouTube, Instagram上，分別要執(zhí)行更換面板狀態(tài)，移動(dòng)本面板及其它的面板。實(shí)現(xiàn)拖動(dòng)Twitter時(shí)可以自動(dòng)排序。區(qū)域是否覆蓋的判斷邏輯是if area of This(本元件) is over area of widget B（目標(biāo)元件）。
- 同理，為其它三個(gè)動(dòng)態(tài)面板采用相同的方式即可，用例判斷較多。
只要列表中要拖動(dòng)的動(dòng)態(tài)面板越多，操作步驟和判斷就越多。實(shí)際上還可以用中繼器來實(shí)現(xiàn)拖動(dòng)排序，不過這里不再展開。
7.3 模擬上傳圖片并顯示進(jìn)度條
在Behance網(wǎng)站上，允許更換頭像。只需點(diǎn)擊“替換頭像”或者圓形頭像，會(huì)打開上傳本地圖片文件面板（背景是全屏90%黑），選中圖像文件，再彈出圖像裁切面板（背景是全屏90%黑）。
由于涉及多個(gè)面板和按鈕，因此會(huì)經(jīng)常用到 show/hide （顯示/隱藏）來顯示或關(guān)閉面板和元件，只要做好判斷，操作并不復(fù)雜，其中一處是顯示裁剪圖片的進(jìn)度條。
方法：
- 新建圓角矩形A元件當(dāng)作背景，大小w300 x h18；
- 新建圓角矩形B元件，大小為w25 x h18；
- 鼠標(biāo)單擊事件的時(shí)候，為B元件添加set size設(shè)置大小命令，選擇變化后的長度為300，起點(diǎn)為左中位置，設(shè)置延續(xù)時(shí)間約3秒。由于是固定長度的進(jìn)度條，因此制作較為簡單。
優(yōu)秀的創(chuàng)作者樂于上傳自己的作品進(jìn)行展示，Behance將稱之為創(chuàng)建項(xiàng)目。
從頂部的導(dǎo)航菜單到個(gè)人資料頁，都提供了創(chuàng)建項(xiàng)目的入口。藍(lán)色的文字按鈕和醒目的Div，無不提醒著用戶——快上傳你的作品啊。
在上傳編輯頁面中，支持本地文件上傳、添加文本和嵌入媒體（比如YouTube視頻）,還能調(diào)整布局。
頁面主要框架是：
- 上方左側(cè)的步驟指示（1.內(nèi)容，2.封面，3.設(shè)置），右側(cè)是操作按鈕組（預(yù)覽，保存，繼續(xù)）；
- 下方左側(cè)為固定的編輯菜單，右側(cè)為可滑動(dòng)和動(dòng)態(tài)調(diào)整高度的內(nèi)容主體區(qū)域。
這里，相當(dāng)于要考慮4個(gè)區(qū)域的相互關(guān)系，有動(dòng)態(tài)面板嵌套，因此大量的case條件判斷不可避免。
為了模擬出用戶上傳文件到編輯發(fā)布的流程，在Axure中進(jìn)行了以下主要的操作：
- 右側(cè)區(qū)域默認(rèn)主體設(shè)置為動(dòng)態(tài)面板A，包含至少5個(gè)狀態(tài)。
- 單擊“上傳文件菜單”，彈出上傳文件窗口，這里同樣有90%黑色背景，考慮好保存和取消的按鈕操作即可。
- 單擊“添加文本”，右側(cè)內(nèi)容區(qū)域Div同步動(dòng)態(tài)向下擴(kuò)大高度，同時(shí)文本框要支持編輯和刪除。因此這里需要使用中繼器。
用戶添加的文本是可以編輯和刪除的，這除了中繼器，沒有更好的辦法了。
在主體動(dòng)態(tài)面板A里面的一個(gè)狀態(tài)為添加文本時(shí)的狀態(tài)，這里嵌入的動(dòng)態(tài)面板B中使用中繼器做好基本的元件和show/hide效果。
單擊外部的“添加文本”元件，添加鼠標(biāo)單擊事件，選中Add Rows進(jìn)行添加新數(shù)據(jù)。目標(biāo)為中繼器，添加Row時(shí)插入變量[[LVAR1]] = text on widget動(dòng)態(tài)面板B內(nèi)的文本框。這樣就實(shí)現(xiàn)了單擊菜單新增一個(gè)文本。
其中點(diǎn)擊“刪除文本”元件，在鼠標(biāo)單擊事件上選擇Delete Rows，目標(biāo)為中繼器，Row為This即本條新增的數(shù)據(jù)。
8.2 動(dòng)態(tài)調(diào)整元件高度
利用set size命令來增加元件高度，但當(dāng)隨意增加或刪除“添加的文本“時(shí)，如何讓該區(qū)域?qū)崿F(xiàn)自適應(yīng)高度呢？
在右側(cè)的主體動(dòng)態(tài)面板A中，可以添加一個(gè)矩形元件H當(dāng)作背景。當(dāng)新增或者刪除中繼器文本時(shí)，面板A和背景H都要同步改變高度。
在set size時(shí)，只需要在本元件身上增加一定高度即可。
如執(zhí)行事件時(shí)，set size的目標(biāo)為矩形H，高度的參數(shù)為變量值 [[LVAR1.height+55]]，而變量LVAR1 = widget 本元件。
同樣的方式適用于面板A。這里增加的固定值還可以換為中繼器內(nèi)部的動(dòng)態(tài)面板高度。
8.3 圖片放大縮?。簡螕艉屯蟿?dòng)
我們可以對創(chuàng)建的項(xiàng)目設(shè)置封面，封面是支持自定義裁剪的。
8.3.1 基本要求
- 單擊減號(hào)圖標(biāo)“—”圖片縮小，單擊加號(hào)“+”圖片放大。
- 向左拖動(dòng)指示條圓點(diǎn)按鈕，圖片縮小，向右則圖片放大。
- 單擊減號(hào)和加號(hào)圖標(biāo)時(shí)下方的指示條要?jiǎng)討B(tài)變化。
8.3.2 基本步驟
- 添加封面圖片取名為F，即要對它進(jìn)行放大和縮小。
- 新建一個(gè)動(dòng)態(tài)面板G為指示條，包含條形背景（bar-bg）、可左右伸縮的小矩形進(jìn)度條（bar-progress）、可操作的圓點(diǎn)（bar-button）。
- 新建減號(hào)元件，添加鼠標(biāo)單擊事件，選擇命令set size，目標(biāo)為圖片F(xiàn)，參數(shù)置寬度[[LVAR2.width/1.02]]，高度[[LVAR3.height/1.02]]（這里的LVAR3就是元件圖片H），錨點(diǎn)為中心。
- 新建加號(hào)元件，操作同減號(hào)元件，不過set size時(shí)參數(shù)不同，變化為寬度[[LVAR2.width*1.02]]，高度[[LVAR3.height*1.02]]，實(shí)現(xiàn)單擊加號(hào)便放大圖片。
- 拖動(dòng)放大圖片：在動(dòng)態(tài)面板G中，為圓點(diǎn)添加Dragged拖動(dòng)事件，選擇Move命令，目標(biāo)為This，移動(dòng)屬性為With Drag x，即只能在x軸上拖動(dòng)圓點(diǎn)。設(shè)置邊界，左邊大于bar-bg的x軸坐標(biāo)位置，參數(shù)為left is greater than [[LVAR1.x]]，(本地變量里要設(shè)置LVAR1為 bar-bg元件)。右邊邊界同理，參數(shù)為right is less than or equal [[LVAR1.x+LVAR1.width]], (這里的LVAR1為元件bar-bg)，這樣即表示最大的拖動(dòng)距離為元件的x軸坐標(biāo)+元件寬度。如果不設(shè)置邊界，那么可以在屏幕寬度內(nèi)隨意拖動(dòng)。
- 設(shè)置進(jìn)度條效果：在Dragged拖動(dòng)事件下，選擇set size，目標(biāo)為bar-progress進(jìn)度條矩形元件，錨點(diǎn)為左居中，高度為4，寬度為變量[[TotalDragX+LVAR1.width]]，（這里的本地變量LVAR1是bar-button）, 即表示，進(jìn)度條的變化寬度為拖動(dòng)距離+圓點(diǎn)的寬度。
- 最后，在對減號(hào)和加號(hào)進(jìn)行單擊事件時(shí)，還可以改變進(jìn)度條，進(jìn)行同步改變，這里為了簡化沒有進(jìn)行操作。
Behance為商業(yè)公司和創(chuàng)作者提供了招聘服務(wù)，在這里可以篩選眾多的招聘崗位，選中心儀的職位進(jìn)行應(yīng)聘。
特點(diǎn)：
- 崗位數(shù)量多
- 可篩選崗位
- 可點(diǎn)擊操作菜單應(yīng)聘
為了實(shí)現(xiàn)這樣的效果，需要利用中繼器來創(chuàng)建全部的崗位信息，并允許篩選操作。
9.1 中繼器創(chuàng)建職位列表
先用Axure的中繼器模擬一些職位數(shù)據(jù)：
- 新建一個(gè)中繼器，添加多個(gè)元件并分別命名。元件分別包含公司logo, 公司名字，城市，國家，職位標(biāo)題，職位描述，職位類型，發(fā)布時(shí)間，以及一個(gè)默認(rèn)隱藏的彈出面板用于點(diǎn)擊應(yīng)聘等操作。
- 為中繼器設(shè)置數(shù)據(jù)ID，如pic, company, city, country, job等，一一對應(yīng)并補(bǔ)充數(shù)據(jù)。
- 分別綁定ID和元件。即Item Loaded事件時(shí)選擇Set Text 和 set image進(jìn)行操作。
創(chuàng)建好了職位列表之后，可以進(jìn)行查看職位信息。
9.2 中繼器篩選
中繼器的篩選主要依賴Add Filter（添加過濾器）命令進(jìn)行。
9.2.1 篩選職位的方式
- 按照職位類型篩選：全職、自由職業(yè)者、實(shí)習(xí)；
- 按照區(qū)域篩選：選擇國家，行政區(qū)，城市嵌套篩選。（需要的操作最多）；
- 按照創(chuàng)意領(lǐng)域篩選：如web設(shè)計(jì)、交互設(shè)計(jì)、圖形設(shè)計(jì)、插圖等約20個(gè)類別。
按職位類型和創(chuàng)意領(lǐng)域的篩選，在Axure中操作較為簡單。
例如：篩選全職的是職位時(shí)，步驟為：為“全職”文本框添加鼠標(biāo)單擊事件，選擇中繼器的功能Add Filter，目標(biāo)選中為此中繼器（提前命名好），過濾條件中規(guī)則為[[item.type == ‘全職’]]，并勾選Remove other filters，即表示用戶單擊“全職”時(shí)，觸發(fā)中繼器的過濾功能，只顯示類型等于“全職”的數(shù)據(jù)。
比較復(fù)雜的是按區(qū)域篩選的操作：
9.2.2 主要步驟
- 點(diǎn)擊上方菜單“全球”，下方彈出篩選面板，其中包含國家、行政區(qū)、城市等的下拉框，下拉框包含列表數(shù)據(jù)，同時(shí)包括兩個(gè)操作按鈕：應(yīng)用、刪除；
- 在為按鈕“應(yīng)用”添加單擊事件后，需要多個(gè)case條件判斷，保證不同國家、行政區(qū)的組合時(shí)能執(zhí)行相應(yīng)的過濾器篩選。
如何自動(dòng)截取公司名稱的首字母作為logo？
- 將公司名稱文本元件取名為A；
- 添加一個(gè)新文本元件B；
- 在觸發(fā)事件時(shí)選擇Set Text 改變文本，目標(biāo)為文本B, 變化值為[[LVAR1.charAt(0)]]，這里的LVAR1變量指向的是文本元件A。
函數(shù)charAt(0)用于截取字符串，0代表第一位，1代表第二位，以此類推。
9.4 批量隨機(jī)顏色
假如發(fā)布職位的公司未上傳logo，那么系統(tǒng)將自動(dòng)截取公司名稱首字符，并選用隨機(jī)顏色的背景顏色。
這如何實(shí)現(xiàn)？
基本思路：在動(dòng)態(tài)面板中增加不同顏色作為多個(gè)狀態(tài)，利用隨機(jī)函數(shù)抽取一個(gè)數(shù)字，當(dāng)匹配時(shí)便轉(zhuǎn)換到該顏色狀態(tài)下。
- 新建一個(gè)圓形元件并轉(zhuǎn)換為動(dòng)態(tài)面板Y，添加多個(gè)狀態(tài)（如10個(gè)），每個(gè)狀態(tài)都包含不同的顏色。基BCDE順序?qū)顟B(tài)進(jìn)行命名，如state1, stateA等。
- 新建一個(gè)文本元件X（默認(rèn)隱藏），值BCDE。
- 在單擊觸發(fā)事件時(shí)，選擇切換動(dòng)態(tài)面板Y的狀態(tài)，值為[[LVAR1.charAt((Math.random*15).toFixed(0))]]，這里的變量LVAR1為文本X。表示單擊時(shí)將會(huì)從文本中通過隨機(jī)函數(shù)Math.random 隨機(jī)選擇一個(gè)值，當(dāng)值和動(dòng)態(tài)面板的狀態(tài)吻合時(shí)切換至該狀態(tài)，從而實(shí)現(xiàn)改變顏色。由于是隨機(jī)的，因此顏色每次都為隨機(jī)顏色。
可在中繼器中進(jìn)行隨機(jī)函數(shù)的使用，通過配合Fire Event事件觸發(fā)，可實(shí)現(xiàn)批量的隨機(jī)顏色效果（比如紅綠燈、霓虹燈效果）。
10. 作品詳情頁
當(dāng)我們點(diǎn)擊打開作品，可以進(jìn)入詳情頁面，這里有創(chuàng)作者信息，全部的作品展示，作為注冊用戶還可以進(jìn)行評(píng)論和互動(dòng)。
10.1 固定側(cè)邊工具欄
新建一個(gè)動(dòng)態(tài)面板，里面包含已經(jīng)設(shè)置好的元件和交互事件。點(diǎn)擊Pin to Browser, 將動(dòng)態(tài)面板設(shè)置為右側(cè)固定。
10.2 同步改變狀態(tài)、同步加一減一
用戶可以對作品進(jìn)行點(diǎn)贊，并顯示總的點(diǎn)贊數(shù)量；當(dāng)取消點(diǎn)贊時(shí)，數(shù)量也隨之減去1。
這里涉及三個(gè)部分的聯(lián)動(dòng)變化：
- 居中點(diǎn)贊按鈕
- 工具欄點(diǎn)贊按鈕
- 下方點(diǎn)贊總數(shù)
在點(diǎn)贊按鈕中，每次點(diǎn)贊或取消贊，按鈕里都會(huì)顯示點(diǎn)贊的數(shù)量。此外，當(dāng)鼠標(biāo)移入工具欄點(diǎn)贊按鈕上，會(huì)在其左側(cè)彈出文本“給Ta點(diǎn)贊”或“不欣賞”。
因此最終涉及的是三個(gè)部分、七處變化：
不過具體操作相對簡單，主要步驟：
- 按鈕、彈出文本等均為動(dòng)態(tài)面板，包含兩個(gè)狀態(tài)。當(dāng)觸發(fā)事件時(shí)進(jìn)行切換，并進(jìn)行case條件判斷；
- 利用Set Text 設(shè)置文本來傳遞點(diǎn)贊總數(shù)，使得兩個(gè)按鈕內(nèi)的文本都能獲得相同的數(shù)值；
- 點(diǎn)贊數(shù)值加1和減1: 創(chuàng)建一個(gè)本地變量LVAR1(等于元件“點(diǎn)贊總數(shù)”)，按鈕內(nèi)的文本經(jīng)過Set Text后的值為 [[LVAR1.text+1]]或[[LVAR1.text-1]]。
用戶對作品進(jìn)行評(píng)論后，此條評(píng)論將出現(xiàn)在評(píng)論區(qū)的最上方。同時(shí)，用戶可以點(diǎn)擊刪除該條評(píng)論。
在Axure中，需要實(shí)現(xiàn)幾個(gè)功能：
- 新增一條評(píng)論
- 為評(píng)論排序（最新的評(píng)論置頂）
- 刪除評(píng)論
顯然，這需要用到中繼器，主要實(shí)現(xiàn)方法：
- 新建評(píng)論框、發(fā)表評(píng)論按鈕、默認(rèn)隱藏的提示文本“請輸入評(píng)論文本”。
- 給發(fā)表評(píng)論按鈕添加鼠標(biāo)單擊事件，進(jìn)行評(píng)論框字符非空判斷，并相應(yīng)顯示或隱藏提示文本。
- 在下方新建一個(gè)中繼器作為評(píng)論顯示列表。
- 中繼器內(nèi)部的組件包含元件：頭像圖片、用戶名文本、發(fā)布時(shí)間文本、評(píng)論內(nèi)容文本、刪除圖標(biāo)（默認(rèn)隱藏）、Fire Event事件按鈕（默認(rèn)隱藏）、排序id文本（類型為數(shù)字，默認(rèn)隱藏，此id是為了進(jìn)行評(píng)論的排序）。分別對每個(gè)元件進(jìn)行命名。
- 中繼器系統(tǒng)的ID分別設(shè)置為：avatar, name, comment, time, id。在Item Loaded事件下，利用set image和Set Text讓中繼器內(nèi)部的組件和系統(tǒng)ID進(jìn)行一一綁定。
- 新增一條評(píng)論：為按鈕“發(fā)表評(píng)論”添加鼠標(biāo)單擊事件，在評(píng)論框非空的case條件下，選中命令A(yù)dd Rows，輸入添加需要包含的數(shù)據(jù)類型（倒入頭像、輸入名字、comment需要通過本地變量綁定評(píng)論框文本、排序id通過本地變量設(shè)置為[[LVARA-1]]，LVARA為中繼器內(nèi)部組件 “排序id”文本元件，這里保證新增評(píng)論的排序id自動(dòng)在上一條的基礎(chǔ)上減去1，這是后面評(píng)論排序的依據(jù)）。
- 進(jìn)行評(píng)論排序：選擇Add Sort 新增排序，目標(biāo)為中繼器，column類別選為“id”，而排序規(guī)則Sort As選擇數(shù)字Number, 排序的順序Order為升序Ascending。
- 添加wait等待200ms。
- 在中繼器里面，事先對按鈕添加鼠標(biāo)單擊事件，進(jìn)行case條件判斷進(jìn)行顯示或者隱藏同在中繼器的“刪除圖標(biāo)”，這樣做的目的是保證只有當(dāng)前用戶輸入的評(píng)論才會(huì)有刪除圖標(biāo)，而其它已評(píng)論用戶沒有。
條件1: 當(dāng)中繼器里面的組件“用戶名”文本值= Donald Trump(假設(shè)以該名字新發(fā)表一條評(píng)論)，則顯示刪除圖標(biāo)。
條件2: 否則（即else if true）隱藏刪除圖標(biāo)。
- 在wait命令之后，接著添加Fire Event命令，目標(biāo)為中繼器內(nèi)部組件的按鈕“Fire Event”，選擇的執(zhí)行事件為Click or Tap。這樣實(shí)現(xiàn)了觸發(fā)顯示/隱藏刪除圖標(biāo)的事件。
- 通過Set Text將評(píng)論框的值設(shè)置為空值（“”），即表示當(dāng)發(fā)表完一條新評(píng)論后，原油評(píng)論框內(nèi)容要清空。
- 通過set size命令將評(píng)論區(qū)的背景高度增加約100（這個(gè)步驟主要針對有邊框的div背景，可選）
條件1: 當(dāng)中繼器里面的組件“用戶名”文本值= Donald Trump(假設(shè)以該名字新發(fā)表一條評(píng)論)，則顯示刪除圖標(biāo)。
條件2: 否則（即else if true）隱藏刪除圖標(biāo)。
由于篇幅所限，不再展開描述其它頁面或者功能板塊，有關(guān)Axure操作的的內(nèi)容結(jié)束。
11. 對Behance網(wǎng)站的評(píng)價(jià)
雖然對Behance網(wǎng)站進(jìn)行了“重新制作”，但是還有很多頁面細(xì)節(jié)沒有完善，省略了一些步驟。大部分的數(shù)據(jù)也僅限于通過模擬進(jìn)行展示，無法真實(shí)地還原網(wǎng)站功能。
因此，這種停留在界面展示的原型，還有很多提升空間。假如成本允許，通過前端和后端的開發(fā)建立一個(gè)真實(shí)可運(yùn)行的demo, 那樣的原型在功能完成度上都有優(yōu)勢。
以下是對Behance網(wǎng)站的簡單評(píng)價(jià)。
11.1 令人愉悅之處
- 導(dǎo)航菜單直觀、簡潔、分類明確；
- 配色風(fēng)格統(tǒng)一，簡潔自然，即便展示大量不同類型的作品依舊不會(huì)眼花繚亂；
- 網(wǎng)頁布局以作品為中心；
- 出色的信息傳遞和反饋。
- 創(chuàng)建項(xiàng)目時(shí)的編輯頁面過于“死板”，如果換成定制的富文本編輯器或許更好；
- 個(gè)人資料頁面和編輯個(gè)人資料頁面部分操作過多，期待統(tǒng)一整合到一個(gè)頁面；
- 招聘頁面宮格式板塊布局導(dǎo)致職位像“復(fù)制”一樣，極易引起視覺疲勞，無法找到重點(diǎn)。建議調(diào)整成大小有別、依次排序的布局，并且做好不同職位類型的分區(qū)展示，加入熱門職位、知名招聘方的推薦專區(qū)；
- 糟糕的accessibility (這個(gè)問題似乎難以解決)。
本文原型內(nèi)引用的有關(guān)作品來源于Behance官網(wǎng)，僅供學(xué)習(xí)之用。創(chuàng)作者、作品等名稱等為隨機(jī)選取，并非真實(shí)。有關(guān)作品的版權(quán)歸屬于Behance創(chuàng)作者。
本文由 @STARMAN 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
