浙江經(jīng)緯技工學(xué)校 如何用Axure還原Behance網(wǎng)站？原型步驟分解

時間：2023-07-23 09:06:01 | 來源：網(wǎng)站運營

時間：2023-07-23 09:06:01 來源：網(wǎng)站運營

浙江經(jīng)緯技工學(xué)校 如何用Axure還原Behance網(wǎng)站？原型步驟分解：編者按:Behance網(wǎng)站是為職業(yè)藝術(shù)家、以藝術(shù)為生或把藝術(shù)作為一種非常嚴(yán)肅的愛好的人建立的。在Behance上，用戶可以根據(jù)自己的愛好、專業(yè)水平或共同從事的項目建立朋友圈或合作伙伴，這是一個你可以與藝術(shù)家和設(shè)計師分享你的經(jīng)驗和知識并獲得專業(yè)反饋的地方。另外，Behance在交互設(shè)計方面也有值得借鑒的地方。

如果給設(shè)計師推薦一個網(wǎng)站，最推薦哪個？

想必很多人會提到Behance，因為它是Photoshop軟件的公司Adobe旗下的平臺，口碑自然不低。事實上，除了名氣，Behance網(wǎng)站在交互設(shè)計方面還有很多需要探索的地方。

1.基本描述

1.1背景

為什么行為值得推薦？

Behance是一個設(shè)計網(wǎng)站和社區(qū)，聚集了大量高質(zhì)量的原創(chuàng)作品。2012年，它歸Adobe所有，收入1.5億美元。

收購Behance是Adobe大張旗鼓改革的象征。在Adobe的擴張過程中，Behance的商業(yè)和社會屬性不斷加強。

為了適應(yīng)新的發(fā)展趨勢，網(wǎng)站正在不斷修改，增加新的功能，并試圖整合創(chuàng)意云服務(wù)。

實踐證明這是非常成功的:在收購Behance后的十年里，Adobe的股價從30美元左右漲到現(xiàn)在的380美元左右，漲幅超過10倍。股價一路漲紅，市值一年比一年漲。

該網(wǎng)站平均用戶停留時間超過6分鐘，證明平臺內(nèi)容對用戶有吸引力。

這很大程度上是因為Behance不是一個普通的設(shè)計網(wǎng)站，而是一個社交平臺、資源托管網(wǎng)站、分享社區(qū)。它已經(jīng)成為個人創(chuàng)作者和商業(yè)公司的專業(yè)關(guān)系網(wǎng)絡(luò)。

為了探究Behance成功的原因，重新設(shè)計網(wǎng)站似乎是一個很好的學(xué)習(xí)過程。作者用Axure軟件分享了Behance在交互功能中的一些實現(xiàn)方法。

但需要注意的是，這種設(shè)計只是一種再現(xiàn)自然的嘗試，因此不能涵蓋所有方面，有些章節(jié)和細節(jié)會被忽略。

1.2原型整體效果預(yù)覽

如果不能訪問Behance網(wǎng)站，沒關(guān)系，這里是用Axure復(fù)制后的顯示效果(本文所有g(shù)if動態(tài)圖片都是原型制作后屏幕錄制的效果，否則會做圖片備注)。







Behance的導(dǎo)航菜單存儲在頁面頂部，從左到右:品牌標(biāo)志、超鏈接文本、搜索、郵箱、通知、用戶頭像、應(yīng)用程序應(yīng)用程序集等。

導(dǎo)航菜單井然有序，不僅是首頁，每一頁都有固定的導(dǎo)航菜單，以免迷路。頂部導(dǎo)航占用空的小空間，為后面的內(nèi)容主題留出空的大空間，讓用戶很容易被設(shè)計作品所吸引。

我們可以將整個網(wǎng)站分成幾個頁面:

首次訪問頁（未登錄）為您呈現(xiàn)（已登錄）發(fā)現(xiàn)實時（直播）職位搜索等

主要功能包括:

內(nèi)容展示與推薦內(nèi)容上傳編輯搜索內(nèi)容登錄注冊招聘求職用戶評論與關(guān)注等。

2.主頁

以下是您在訪問主頁時會遇到的一些功能交互:

2.1等待時間和彈出效果

第一次加載首頁時，大約3秒后會從下往上彈出注冊框，在Axure中操作簡單。

將注冊彈框設(shè)置為動態(tài)面板并隱藏；為該動態(tài)面板添加show/hide事件，選擇show顯示，動畫為向上劃出；添加wait等待事件，時間3.5s；選擇“bring to front”可以將動態(tài)面板放置在最頂層；實現(xiàn)窗口大小變化時，彈出的面板保持相對瀏覽器的右下角位置。需選中彈出的動態(tài)面板，選擇“Pin to browser”, 位置設(shè)置為水平居右，垂直居底部，并選中“Keep in front (browser only)”。







提示:當(dāng)組件目標(biāo)是This時，它指的是This組件。這可以確保當(dāng)該組件的名稱更改時，事件交互仍然有效。

2.2角色判斷和實時反饋

當(dāng)輸入Behance創(chuàng)建帳戶時，需要對密碼文本字段施加多個約束，并且當(dāng)用戶輸入密碼時需要實時信息反饋。







Axure中需要以下設(shè)置:

為密碼文本框添加一個Text Changed（文本改變時）的事件，只要用戶輸入字符便會觸發(fā)下面的條件反饋信息，給Text Changed設(shè)置多個case（條件，又稱之為用例）進行判斷；反饋信息：新建文本并轉(zhuǎn)換為動態(tài)面板，包含兩個狀態(tài)即輸入符合和不符合。同理，有多少需要考慮到的條件判斷就新建多少個動態(tài)面板；用the length of widget value來判斷字符串的長度；判斷英文大寫和小寫，使用text on widget，選擇包含英文字母，如A，之后務(wù)必選擇Match Any，保證每輸入一次字符都進行判斷。從A-Z，a-z依次分別添加，工作量較大。







實際開發(fā)中，其實這種英文字符判斷通常只需要一兩行代碼，其他字符也是這樣判斷的。

2.3即時狀態(tài)轉(zhuǎn)換:不需要一直使用動態(tài)面板

在Behance網(wǎng)站上，當(dāng)鼠標(biāo)移動文本時，字體顏色將從低透明度變?yōu)榧儼咨?。我們可以快速區(qū)分導(dǎo)航部分，清晰地看到手術(shù)前后的瞬間變化。







比如鼠標(biāo)-在這里的快速轉(zhuǎn)換效果，就是鼠標(biāo)在按鈕上移動，按鈕的顏色從淺藍色變成深藍色，從而實現(xiàn)即時的狀態(tài)反饋。

實現(xiàn)這種多效果變化的方法是使用動態(tài)面板，但是雖然動態(tài)面板非常實用和強大，但有時我們并不需要使用動態(tài)面板。

按鈕自帶的樣式效果（Style Effects）非常實用：MouseOver（鼠標(biāo)懸浮）、MouseDown、Selected、Disabled、Focused等，可以減少對動態(tài)面板的依賴。默認(rèn)的元件如標(biāo)題、段落、文本等都有樣式效果。用起來能提升效率。







這也引出了Axure個人使用的一個基本原則——如果可以的話不要使用動態(tài)面板。

3.為您呈現(xiàn)頁面

3.1調(diào)暗圖片的提示

在Behance中，創(chuàng)作者的頭像和作品是呈現(xiàn)最多的元素(以圖片的形式)，網(wǎng)站在這些元素上添加了超鏈接，所以是捷徑。

它們被放在呈現(xiàn)給你的頁面頂端，創(chuàng)作者和作品被明確分類，這也凸顯了它們的重要性。







當(dāng)你在面試中將鼠標(biāo)移到圓形頭像或正方形作品上時，這些圖片會變暗。

那么，在Axure中如何達到這種效果呢？

如上所述，動態(tài)面板可以建立兩種狀態(tài)，但是狀態(tài)轉(zhuǎn)換太慢。

Axure采用的方法是:

底層為jpg圖片格式作為背景最上層為一個完全透明的幾何形狀元件（顏色為黑色）當(dāng)作遮罩，設(shè)置效果即鼠標(biāo)懸浮后變?yōu)?0%透明度的黑色，并為該元件添加打開鏈接事件即可。

這樣做的好處是不需要使用動態(tài)面板，也不需要用兩張淺圖和深圖來達到效果。

3.2動態(tài)面板，我當(dāng)然還愛你

知名商業(yè)航空公司SpaceX空的可回收火箭將停在一艘名為“我當(dāng)然還愛你”的飛船上，這樣火箭就可以穩(wěn)定的停了。

在Axure中，動態(tài)面板就像這艘船一樣。游來游去，依然是最愛。







Behance推薦的作品以正方形的方式排列，包括作品的封面圖片，作者(團隊)的頭像和名字，以及喜歡和引用的數(shù)量。

不同的是，Behance給這些作品添加了軟件標(biāo)簽。當(dāng)你把鼠標(biāo)移到封面上，就會出現(xiàn)這部作品中用到的創(chuàng)作軟件，比如Adobe自己的illustrator，AdobeXD等。，可以幫助我們快速區(qū)分某一領(lǐng)域的作品。

另外，在創(chuàng)作者這一欄，可以是個人，也可以是涉及多個所有者的一種合作形式，這對于創(chuàng)作者的商業(yè)合作是非常有利的，我們也可以知道，某個作品背后其實有很多人付出了努力。

至于鼠標(biāo)在Axure中移動時新標(biāo)簽的實現(xiàn)方法，用動態(tài)面板就可以了。

另外，還會有一個棘手的問題:如何用最簡單的方法實現(xiàn)元素以正方形的形式布局？

比如Behance推薦的作品默認(rèn)是一欄四個，從上到下展開，當(dāng)然要包含創(chuàng)作者等信息。

當(dāng)這種布局比較簡單但是涉及到多個元素的時候，最原始的方式就是把圖片、文字等元素分開放置，一個一個的修改。

優(yōu)點：可以直接更改內(nèi)容，方便對齊排列和布局。缺點：工作量會很大。

那么有什么快速簡便的方法呢？

最推薦的是repeater(即Repeater，實際上更直接翻譯為Replicator，相當(dāng)于一個支持?jǐn)?shù)據(jù)庫模擬和綁定的效果元素，其屬性可以復(fù)制和修改)。

但在行為上，通常只有一個創(chuàng)造者，但有時有多個所有者。因為這里的不同，如果想讓網(wǎng)站有復(fù)讀機的效果，需要更多的時間來綁定數(shù)據(jù)。

這里用的是原方法，復(fù)讀機的效果如下圖說明。

3.3文字綁定:我會隨著你的改變而改變

Behance支持多種語言，我們可以在頁面底部更改界面語言。比如點擊英文改變英文界面，下面的菜單文字會同步改變。如圖:







這里涉及到一個簡單的效果:文本綁定，數(shù)據(jù)同步更改。

因為當(dāng)鼠標(biāo)移動和點擊時，文本從低透明度(灰白色)變?yōu)榧儼咨?，并且三角形上下移動，所以還需要動態(tài)面板。在Axure中:

將要改變的文本元件設(shè)置為動態(tài)面板，取名為“目標(biāo)語言”，狀態(tài)一里面的文本元件命名為“顯示語言”，即鼠標(biāo)未選中的狀態(tài)；狀態(tài)二里面的文本元件為“顯示語言-白”，即鼠標(biāo)點擊變化的狀態(tài)。將列表中的每個單獨的語言文本元件分別命名為English，日本語等。為每個語言文本元件分別添加鼠標(biāo)單擊事件，選擇Set Text（設(shè)置文本），將“目標(biāo)語言”動態(tài)面板下的兩個狀態(tài)的文本元件，分別和列表語言元件文本綁定，實現(xiàn)文本點擊時同步更改。

這里只需要用Set Text設(shè)置文本，依次操作即可。Set Text可以把目標(biāo)組件的文本變成自己組件的文本，很實用。例如，當(dāng)模擬用戶注冊和自動顯示用戶名時，可以使用這種方法。

注意:如果您想更改兩個文本中的一個，而另一個同步更改，則需要對兩個文本元素都使用“設(shè)置文本”。例如，輸入密碼可以同步更改，無論它是顯示還是隱藏。

4.發(fā)現(xiàn)頁面

這是用Axure制作的最費力的一頁:

4.1元素左右滾動

在Behance的發(fā)現(xiàn)頁面下，作品根據(jù)軟件類別和行業(yè)類別進行分類。

用戶可以從左到右切換10個以上的分類菜單(小矩形)，方法是單擊頁面最左側(cè)和最右側(cè)的三角形箭頭，按順序從左到右來回切換菜單，或者單擊任何菜單而不單擊箭頭，并在下面顯示此部分的內(nèi)容。







4.1.1要實現(xiàn)的功能

點擊可以按次序滾動菜單，左右點擊均需要支持。點擊菜單后，該菜單滾動至居中，并在下方展示該板塊內(nèi)容。任意時候點擊任意菜單，能自動移動該菜單至居中位置。

4.1.2實現(xiàn)思路:動態(tài)面板+復(fù)雜條件判斷

添加動態(tài)面板A：將11個小長方形的菜單等距離排序后放置其中；同時添加兩個向左和向右的箭頭用于添加鼠標(biāo)點擊事件。注意動態(tài)面板的總寬度、菜單的寬度、菜單間距，以便設(shè)置后面的位移距離。動態(tài)面板A需要設(shè)置共10個狀態(tài)（根據(jù)實際有的菜單數(shù)量決定，Behance官網(wǎng)的數(shù)量遠遠不止10個，這里進行了簡化），每個狀態(tài)中分別設(shè)置單一菜單被選中且其它菜單未選中即可。*狀態(tài)命名時可選用從負5到0再到5進行。如state0代表默認(rèn)的“作品精選菜單”，向左為state-1, 向右為state1。新增一個動態(tài)面板B，總寬度為頁面寬度（如1600），把動態(tài)面板A放進B中，實現(xiàn)裁剪效果。這樣，無論面板A怎樣左右位移，它都在面板B當(dāng)中。給動態(tài)面板里面的左箭頭添加鼠標(biāo)點擊命令，選擇Move（移動）事件，這里設(shè)置的參數(shù)是x軸移動210 (即菜單寬度+間距），y軸移動0。點擊箭頭還會觸發(fā)下方的內(nèi)容板塊多內(nèi)內(nèi)容更改：

4.1.3動態(tài)面板

包含作品的分解標(biāo)簽和下載/跟隨按鈕，默認(rèn)隱藏。

大標(biāo)題：Set Text 同步更改文本。小標(biāo)題：Set Text 同步更改文本。

單擊左箭頭添加案例條件判斷，當(dāng)動態(tài)面板A的狀態(tài)為狀態(tài)0時，移動動態(tài)面板B，顯示動態(tài)面板C，設(shè)置并更改標(biāo)題和副標(biāo)題的文本。根據(jù)該操作，分別為10種狀態(tài)判斷條件，右箭頭的操作與左箭頭的操作相同。







操作時有內(nèi)容聯(lián)動，多條件判斷。即使簡化了菜單的數(shù)量，要達到效果還是需要時間和精力的。

在實際開發(fā)中，可以使用兩三個組件來展示效果，并與開發(fā)人員交流，以避免不必要的成本。

4.2一個按鈕的三個功能

網(wǎng)站上有個按鈕。用戶可以點擊“跟隨xxx”。注意后，按鈕文本變?yōu)椤案Sxxx”。當(dāng)鼠標(biāo)移動到按鈕中時，文本顯示“取消xxx”，按鈕背景為紅色。

實現(xiàn)方法:在一個動態(tài)面板中添加三種狀態(tài)，即關(guān)注、關(guān)注和取消關(guān)注。添加鼠標(biāo)點擊事件和添加狀態(tài)的條件判斷。

5.實時(實時)頁面

我們可以在這個頁面上看到各種現(xiàn)場活動和現(xiàn)場視頻回放。行為官員與不同的創(chuàng)作者合作，并帶來了許多免費教程。

用戶不僅可以學(xué)習(xí)(白票)，創(chuàng)作者也可以分享自己的觀點和創(chuàng)作技巧，獲得關(guān)注，提升商業(yè)價值。同時，這也成為Behance打造優(yōu)秀藝術(shù)設(shè)計社區(qū)的重要途徑。







在這個頁面下，直播視頻分為幾個不同的類別，每個類別下的視頻都可以點擊和左右滾動。

在這里，可以使用Axure的Repeater功能。一旦第一次分類完成，其他人只需要復(fù)制然后更改數(shù)據(jù)。

5.1復(fù)讀機:復(fù)制你，也和你不一樣

1)創(chuàng)建一個新的動態(tài)面板a以實現(xiàn)切割效果，并確保所有內(nèi)容都在a的范圍內(nèi)..

2)在面板A里面新建一個動態(tài)面板B，放一個箭頭和中繼器。

這樣，不管面板b的內(nèi)容如何左右滾動，它們總是在面板a中..

3)在動態(tài)面板b中向中繼器添加7個組件。

它們被命名為rr-縮略圖、rr-標(biāo)題、RR-頭像、RR-名稱、RR-時間、RR-小時、RR-軟件圖標(biāo)和RR-視圖*僅英文，忽略括號中的中文，前綴RR-僅用于方便區(qū)分。

4)在動態(tài)面板b的repeater中，命名列屬性。

它們是縮略圖、標(biāo)題、頭像、名稱、時間、小時、軟件圖標(biāo)和視圖。

然后在各列屬性下添加參數(shù)，右鍵倒圖或者直接輸入文字，需要一一對應(yīng)。

比如補充第一次直播的內(nèi)容:倒一個視頻封面，標(biāo)題是“你好設(shè)計師”，作者是“adobe Official”。觀看時間1小時20分鐘，觀看次數(shù)7000次。日期是2020年10月30日。

5)重要的一步是綁定數(shù)據(jù)。

向中繼器添加項目加載命令，并使用設(shè)置文本和設(shè)置圖像來綁定數(shù)據(jù)。

綁定標(biāo)題:選擇設(shè)置文本設(shè)置文本事件，rr-title為目標(biāo)，Text為[[Item.title]]的值。這里的項指的是中繼器中的數(shù)據(jù)庫。

綁定視頻封面:選擇設(shè)置圖像設(shè)置圖像事件，以rr-thumbnail為目標(biāo)，以[[Item.thumbnail]]為默認(rèn)值。其他綁定用戶頭像、觀看次數(shù)等。，有相同的原理。

6)計算每個視頻封面占用的寬度和間隔寬度。

7)向箭頭添加鼠標(biāo)點擊命令，選擇移動事件，以動態(tài)面板B為目標(biāo)，設(shè)置移動距離。

當(dāng)通過簡單的復(fù)制可以實現(xiàn)大面積布局，并且需要獨立改變數(shù)據(jù)時，可以采用中繼器來提高效率。

Axure的中繼器相當(dāng)于一個數(shù)據(jù)庫，里面自己添加不同類型的數(shù)據(jù)，所有的數(shù)據(jù)都有不同的ID，新添加的組件都綁定到這個ID(即item.id名稱)，主要使用Set Text和Set Image來傳輸數(shù)據(jù)。最后，拿出來。除了添加中繼器，還有刪除、搜索、排序等功能。

6.個人數(shù)據(jù)頁面

Behance是一個社區(qū)，每個人都可以有自己的主頁，別人可以查看你的作品，關(guān)注你。

在主頁上，可以查看自己的作品，別人稱贊的作品集，編輯草稿，到專門的頁面創(chuàng)作作品。







登陸后可以設(shè)置個人數(shù)據(jù)，涉及狀態(tài)讀取和數(shù)據(jù)返回。

在Axure中，需要動態(tài)面板嵌套和多條件判斷。因為關(guān)聯(lián)多，需要慎重考慮。

6.1狀態(tài)返回

在頁面的右下角，有一個浮動按鈕。點擊它，彈出“個人數(shù)據(jù)列表”面板。要關(guān)閉此面板，您只需再次單擊按鈕或在面板中選擇“不再顯示此項目”。

面板內(nèi)有4個獨立的數(shù)據(jù)類別，每個類別包含兩種狀態(tài):

已完成未完成

它是以無線電盒的形式設(shè)計的。







分別將4個資料類別設(shè)置成動態(tài)面板，包含選中和未選中兩種狀態(tài)。全部類別作為一個整體的組合。默認(rèn)隱藏；新增一個按鈕為動態(tài)面板，包含兩個狀態(tài)，即可打開時和需收起時，有圖標(biāo)差異；為按鈕添加單擊事件，選擇show/hide 中的顯示面板，動畫為向上劃出，實現(xiàn)單擊按鈕后資料面板向上彈出。此時增加條件判斷使得按鈕可以關(guān)閉面板，操作較為簡單；點擊面板內(nèi)部的類別，再次彈出操作面板，判斷輸入有效性，若“保存”則更改本類別的狀態(tài)為已選中，選“取消”則是未選中。點擊保存或取消或點擊“x”關(guān)閉圖標(biāo)，都需要關(guān)聯(lián)外部的懸浮按鈕的打開與關(guān)閉狀態(tài)。

其中，空文字判斷、文字字?jǐn)?shù)限制、實時反饋也在此涉及:







在Axure中，元素的長度屬性用于判斷文本的字符長度，可以通過多種條件進行設(shè)置。

根據(jù)輸入長度，需要在底部實時反饋提示文本(默認(rèn)設(shè)置為隱藏)，是否輸入了足夠的長度。

比如這里的字符需要是3-20位數(shù)字，那么這個文本框中的文本變更事件的判斷條件是:0(空字符)、非0、0-3、3-22、大于22。添加案例條件判斷時注意提示文本的顯示和隱藏。

同時，在數(shù)據(jù)列表面板中點擊類別后，彈出二級面板，背景顏色為90%黑色，充滿整個屏幕，需要進行自適應(yīng)。

操作方法:將黑色矩形轉(zhuǎn)換成動態(tài)面板，設(shè)為100%寬(僅限瀏覽器)，默認(rèn)隱藏。當(dāng)打開和關(guān)閉外部懸掛按鈕，并點擊輔助面板上的保存、取消和“X”關(guān)閉圖標(biāo)時，應(yīng)該關(guān)聯(lián)該黑色背景的顯示/隱藏狀態(tài)。

數(shù)據(jù)列表面板外的操作完成后，需要將狀態(tài)返回到面板內(nèi)部。例如，添加橫幅后，面板中橫幅類別的狀態(tài)應(yīng)設(shè)置為“已選擇”。

這個頁面需要考慮多個面板的嵌套，多個同級別的內(nèi)部和外部動態(tài)面板的狀態(tài)返回，進行條件判斷，確保沒有邏輯問題。

7.編輯個人數(shù)據(jù)

點擊頭像進入特殊頁面編輯詳細的個人數(shù)據(jù)，包括:

基本信息團隊工作經(jīng)歷關(guān)聯(lián)賬號等欄目

您也可以添加自定義列。







這里的Behance采用典型的左右布局，即左側(cè)是固定的菜單導(dǎo)航列表，右側(cè)是可以上下滑動的內(nèi)容區(qū)域。

這里有意思的是，左右部分不是固定分開的，而是在操作時有明顯的連接。最重要的網(wǎng)頁元素是滾動條指示器。

7.1窗口動態(tài)滾動

當(dāng)鼠標(biāo)上下滾動時，右側(cè)內(nèi)容滾動，左側(cè)的指示器聯(lián)動滾動（切換）在任意位置，點擊左側(cè)的導(dǎo)航菜單，指示器快速滾動切換至該欄目，右側(cè)同樣快速滾動至該導(dǎo)航關(guān)聯(lián)的內(nèi)容區(qū)域。

在Axure中，為了達到這樣的無縫過渡效果，推薦的方法是使用錨點作為定位觸發(fā)器。







7.1.1基本要求

窗口向下/上滾動，右側(cè)內(nèi)容區(qū)域滾動固定的距離，對應(yīng)的指示器要指向相應(yīng)的左側(cè)導(dǎo)航菜單。分別點擊左側(cè)7個導(dǎo)航菜單欄，右側(cè)內(nèi)容滾動到響應(yīng)的錨點位置。

7.1.2實施過程

設(shè)置左側(cè)菜單為動態(tài)面板，包含7個狀態(tài)，每個狀態(tài)單機選中時帶藍色指示器；計算好右側(cè)內(nèi)容每個區(qū)域的高度、間隔；為頁面創(chuàng)建window scrolled (窗口滾動) 事件，若窗口滾動至指定的距離或范圍，左側(cè)的動態(tài)面板要切換到對應(yīng)的狀態(tài)。這里需要增加7個case條件判斷，距離范圍會根據(jù)右側(cè)的內(nèi)容區(qū)域高度不同而不同。設(shè)置為整數(shù)方便計算和對齊；增加7個熱區(qū)元件當(dāng)作錨點定位器，放在頁面最左側(cè)的位置，錨點要分別命名如anchor1,anchor2…anchor7；在動態(tài)面板內(nèi)部，分別對每個狀態(tài)添加鼠標(biāo)單擊事件，單擊時選擇 scroll to widget (滾動至元件) 命令，目標(biāo)為錨點（anchor1…anchor7）, 方向為垂直。

7.2列表拖動排序

在賬號連接中，可以通過添加鏈接來綁定自己的社交媒體賬號。

在Axure中，要實現(xiàn)同一個按鈕的不同功能，需要實現(xiàn)基本的文本非空判斷和動態(tài)面板狀態(tài)判斷。此外，還需要允許通過拖動對社交媒體帳戶列表進行排序。







7.2.1基本思路

使列表可選擇并拖動到目標(biāo)范圍，其他列表相應(yīng)地上下移動一定距離。

7.2.2的主要功能

事件:鼠標(biāo)懸停，鼠標(biāo)退出，拖動，拖放。

命令:切換動態(tài)面板狀態(tài)和移動。













7.2.3步驟

新建一個Twitter動態(tài)面板，包含兩個狀態(tài)：1）默認(rèn)的未選中狀態(tài)，帶陰影；2）被選中的狀態(tài)。同上，新增其它三個動態(tài)面板，F(xiàn)acebook, YouTube, Instagram。上下排列四個列表。為Twitter面板添加交互事件：鼠標(biāo)懸浮時切換為面板狀態(tài)2（選中狀態(tài)），鼠標(biāo)移出時切換為狀態(tài)1。再添加Dragged被拖動事件，執(zhí)行Move移動命令，目標(biāo)為This即本動態(tài)面板，移動參數(shù)為With Drag即移動距離為拖動距離。最后，再添加Dragged Dropped拖動釋放事件，這里需要進行三個case用例判斷，分別是本面板的區(qū)域覆蓋到了Facebook, YouTube, Instagram上，分別要執(zhí)行更換面板狀態(tài)，移動本面板及其它的面板。實現(xiàn)拖動Twitter時可以自動排序。區(qū)域是否覆蓋的判斷邏輯是if area of This(本元件) is over area of widget B（目標(biāo)元件）。同理，為其它三個動態(tài)面板采用相同的方式即可，用例判斷較多。

只要列表中有更多的動態(tài)面板可以拖動，就會有更多的操作步驟和判斷。其實也可以用repeaters通過拖拽進行排序，這里不展開。

7.3模擬上傳圖片，顯示進度條

在Behance網(wǎng)站上，可以更改頭像。只需點擊“替換頭像”或圓形頭像，上傳本地圖像文件面板就會打開(背景全屏90%黑)，選擇圖像文件，然后彈出圖像剪切面板(背景全屏90%黑)。







由于涉及許多面板和按鈕，顯示/隱藏通常用于顯示或關(guān)閉面板和組件。只要判斷不錯，操作也不復(fù)雜，其中一個就是顯示進度條裁剪圖片。







方法:

新建圓角矩形A元件當(dāng)作背景，大小w300 x h18；新建圓角矩形B元件，大小為w25 x h18；鼠標(biāo)單擊事件的時候，為B元件添加set size設(shè)置大小命令，選擇變化后的長度為300，起點為左中位置，設(shè)置延續(xù)時間約3秒。由于是固定長度的進度條，因此制作較為簡單。

8.創(chuàng)建項目頁面

優(yōu)秀的創(chuàng)作者很樂意上傳作品展示，Behance會稱之為創(chuàng)作項目。

從頂部的導(dǎo)航菜單到配置文件頁面，有一個創(chuàng)建項目的入口。藍色文本按鈕和醒目的Div提醒用戶——快速上傳您的作品。







在上傳編輯頁面，支持上傳本地文件，添加文字和嵌入媒體(如YouTube視頻)，調(diào)整布局。

頁面的主要框架是:

上方左側(cè)的步驟指示（1.內(nèi)容，2.封面，3.設(shè)置），右側(cè)是操作按鈕組（預(yù)覽，保存，繼續(xù)）；下方左側(cè)為固定的編輯菜單，右側(cè)為可滑動和動態(tài)調(diào)整高度的內(nèi)容主體區(qū)域。

這里相當(dāng)于考慮了四個區(qū)域之間的關(guān)系，有動態(tài)面板嵌套，所以大量的案例條件判斷是必然的。

為了模擬用戶上傳文件到編輯發(fā)布的過程，在Axure中進行了以下主要操作:

右側(cè)區(qū)域默認(rèn)主體設(shè)置為動態(tài)面板A，包含至少5個狀態(tài)。單擊“上傳文件菜單”，彈出上傳文件窗口，這里同樣有90%黑色背景，考慮好保存和取消的按鈕操作即可。單擊“添加文本”，右側(cè)內(nèi)容區(qū)域Div同步動態(tài)向下擴大高度，同時文本框要支持編輯和刪除。因此這里需要使用中繼器。

8.1中繼器的添加和刪除

用戶添加的文本可以編輯和刪除。沒有比復(fù)讀機更好的方法了。

主體的動態(tài)面板A中的一個狀態(tài)是添加文本時的狀態(tài)，嵌入的動態(tài)面板B中使用中繼器來制作基本元素和顯示/隱藏效果。







單擊外部添加文本組件，添加鼠標(biāo)單擊事件，并選擇添加行以添加新數(shù)據(jù)。目標(biāo)是repeater，添加Row時在widget的動態(tài)面板b的文本框中插入變量[[lvar1]] = text。這樣，點擊菜單添加新的文本。

點擊“刪除文本”組件，在鼠標(biāo)點擊事件上選擇“刪除行”，目標(biāo)為復(fù)讀機，行為This，這是本文新增的數(shù)據(jù)。

8.2組件高度的動態(tài)調(diào)整

使用set size命令增加組件的高度，但是在隨意添加或刪除“添加的文字”時，如何讓這個區(qū)域達到自適應(yīng)高度？

在右側(cè)主體動態(tài)面板a中，可以添加一個矩形組件h作為背景。添加或刪除復(fù)讀機文字時，面板A和背景H的高度要同步改變。

設(shè)置尺寸時，只需要給這個組件增加一定的高度。







比如執(zhí)行一個事件，設(shè)置大小的目標(biāo)是矩形h，高度的參數(shù)是變量值[[LVAR1.height+55]]，變量LVAR1 = widget本身。

面板a也是一樣，這里增加的固定值也可以用中繼器內(nèi)部的動態(tài)面板高度代替。

8.3圖片放大縮小:點擊拖動

我們可以為創(chuàng)建的項目設(shè)置封面，并且封面支持自定義剪輯。







8.3.1基本要求

單擊減號圖標(biāo)“—”圖片縮小，單擊加號“+”圖片放大。向左拖動指示條圓點按鈕，圖片縮小，向右則圖片放大。單擊減號和加號圖標(biāo)時下方的指示條要動態(tài)變化。

8.3.2基本步驟







添加封面圖片取名為F，即要對它進行放大和縮小。新建一個動態(tài)面板G為指示條，包含條形背景（bar-bg）、可左右伸縮的小矩形進度條（bar-progress）、可操作的圓點（bar-button）。新建減號元件，添加鼠標(biāo)單擊事件，選擇命令set size，目標(biāo)為圖片F(xiàn)，參數(shù)置寬度[[LVAR2.width/1.02]]，高度[[LVAR3.height/1.02]]（這里的LVAR3就是元件圖片H），錨點為中心。新建加號元件，操作同減號元件，不過set size時參數(shù)不同，變化為寬度[[LVAR2.width*1.02]]，高度[[LVAR3.height*1.02]]，實現(xiàn)單擊加號便放大圖片。拖動放大圖片：在動態(tài)面板G中，為圓點添加Dragged拖動事件，選擇Move命令，目標(biāo)為This，移動屬性為With Drag x，即只能在x軸上拖動圓點。設(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)，這樣即表示最大的拖動距離為元件的x軸坐標(biāo)+元件寬度。如果不設(shè)置邊界，那么可以在屏幕寬度內(nèi)隨意拖動。設(shè)置進度條效果：在Dragged拖動事件下，選擇set size，目標(biāo)為bar-progress進度條矩形元件，錨點為左居中，高度為4，寬度為變量[[TotalDragX+LVAR1.width]]，（這里的本地變量LVAR1是bar-button）, 即表示，進度條的變化寬度為拖動距離+圓點的寬度。最后，在對減號和加號進行單擊事件時，還可以改變進度條，進行同步改變，這里為了簡化沒有進行操作。

9.位置頁面

Behance為商業(yè)公司和創(chuàng)作者提供招聘服務(wù)，可以篩選眾多的招聘職位，并選擇最喜歡的職位進行申請。







特點:

崗位數(shù)量多可篩選崗位可點擊操作菜單應(yīng)聘

為了達到這種效果，有必要使用中繼器來創(chuàng)建所有帖子信息并允許篩選操作。

9.1中繼器創(chuàng)建作業(yè)列表

使用Axure中繼器模擬一些作業(yè)數(shù)據(jù):







新建一個中繼器，添加多個元件并分別命名。元件分別包含公司logo, 公司名字，城市，國家，職位標(biāo)題，職位描述，職位類型，發(fā)布時間，以及一個默認(rèn)隱藏的彈出面板用于點擊應(yīng)聘等操作。為中繼器設(shè)置數(shù)據(jù)ID，如pic, company, city, country, job等，一一對應(yīng)并補充數(shù)據(jù)。分別綁定ID和元件。即Item Loaded事件時選擇Set Text 和 set image進行操作。

創(chuàng)建職位列表后，您可以查看職位信息。

9.2復(fù)讀機篩選

中繼器的過濾主要取決于添加過濾器命令。

9.2.1篩選職位的方式

按照職位類型篩選：全職、自由職業(yè)者、實習(xí)；按照區(qū)域篩選：選擇國家，行政區(qū)，城市嵌套篩選。（需要的操作最多）；按照創(chuàng)意領(lǐng)域篩選：如web設(shè)計、交互設(shè)計、圖形設(shè)計、插圖等約20個類別。

在Axure中，按職位類型和創(chuàng)意領(lǐng)域篩選易于操作。

例如，篩選全職工作時，步驟為:在“全職”文本框中添加鼠標(biāo)點擊事件，選擇中繼器功能“添加過濾器”，選擇目標(biāo)作為該中繼器(預(yù)先命名)，過濾條件中的規(guī)則為[[item . type = = & # 8216；全職& # 8217；]，并勾選移除其他過濾器，這意味著當(dāng)用戶點擊“全職”時，中繼器的過濾器功能將被觸發(fā)，并且僅顯示類型等于“全職”的數(shù)據(jù)。

更復(fù)雜的是按區(qū)域過濾的操作:







9.2.2的主要步驟

點擊上方菜單“全球”，下方彈出篩選面板，其中包含國家、行政區(qū)、城市等的下拉框，下拉框包含列表數(shù)據(jù)，同時包括兩個操作按鈕：應(yīng)用、刪除；在為按鈕“應(yīng)用”添加單擊事件后，需要多個case條件判斷，保證不同國家、行政區(qū)的組合時能執(zhí)行相應(yīng)的過濾器篩選。

9.3使用函數(shù)截取第一個字符

如何自動截取公司名稱的首字母作為logo？

將公司名稱文本元件取名為A；添加一個新文本元件B；在觸發(fā)事件時選擇Set Text 改變文本，目標(biāo)為文本B, 變化值為[[LVAR1.charAt(0)]]，這里的LVAR1變量指向的是文本元件A。

函數(shù)charAt(0)用于截取一個字符串，其中0代表第一位，1代表第二位，依此類推。

9.4批量隨機顏色

如果貼吧公司沒有上傳logo，系統(tǒng)會自動截取公司名稱的第一個字符，選擇隨機顏色的背景色。

這是如何實現(xiàn)的？

基本思路:在動態(tài)面板中添加不同顏色作為多個狀態(tài)，利用隨機函數(shù)提取一個數(shù)字，匹配時切換到顏色狀態(tài)。







新建一個圓形元件并轉(zhuǎn)換為動態(tài)面板Y，添加多個狀態(tài)（如10個），每個狀態(tài)都包含不同的顏色。基于0123456789ABCDE順序?qū)顟B(tài)進行命名，如state1, stateA等。新建一個文本元件X（默認(rèn)隱藏），值為0123456789ABCDE。在單擊觸發(fā)事件時，選擇切換動態(tài)面板Y的狀態(tài)，值為[[LVAR1.charAt((Math.random()*15).toFixed(0))]]，這里的變量LVAR1為文本X。表示單擊時將會從文本中通過隨機函數(shù)Math.random() 隨機選擇一個值，當(dāng)值和動態(tài)面板的狀態(tài)吻合時切換至該狀態(tài)，從而實現(xiàn)改變顏色。由于是隨機的，因此顏色每次都為隨機顏色。

中繼器可以使用隨機功能，配合Fire Event觸發(fā)可以實現(xiàn)批量隨機色彩效果(如紅綠燈、霓虹燈)。

10.工作詳細信息頁面

當(dāng)我們點擊打開作品時，我們可以進入詳細頁面，那里有創(chuàng)作者信息，所有的作品都被顯示出來，作為注冊用戶，我們也可以進行評論和交互。

10.1固定側(cè)工具欄

創(chuàng)建一個新的動態(tài)面板，其中包含設(shè)置組件和交互式事件。單擊“固定到瀏覽器”，將動態(tài)面板設(shè)置為右側(cè)的固定面板。

10.2同步改變狀態(tài)，同步加一減一

用戶可以對作品進行贊，并顯示贊的總數(shù)；當(dāng)贊取消時，數(shù)量也減少1。

這涉及到三個部分的聯(lián)動變化:

居中點贊按鈕工具欄點贊按鈕下方點贊總數(shù)

在贊按鈕中，每次喜歡或者取消贊的時候，贊的數(shù)量都會顯示在按鈕中。另外，當(dāng)鼠標(biāo)移動到工具欄中的贊按鈕上方時，左側(cè)會彈出“喜歡Ta”或“不欣賞”的文字。

因此，最后涉及三個部分和七個變化:







但是，具體操作比較簡單，主要步驟有:

按鈕、彈出文本等均為動態(tài)面板，包含兩個狀態(tài)。當(dāng)觸發(fā)事件時進行切換，并進行case條件判斷；利用Set Text 設(shè)置文本來傳遞點贊總數(shù)，使得兩個按鈕內(nèi)的文本都能獲得相同的數(shù)值；點贊數(shù)值加1和減1: 創(chuàng)建一個本地變量LVAR1(等于元件“點贊總數(shù)”)，按鈕內(nèi)的文本經(jīng)過Set Text后的值為 [[LVAR1.text+1]]或[[LVAR1.text-1]]。

10.3添加、排序和刪除評論

用戶對作品發(fā)表評論后，該評論將出現(xiàn)在評論區(qū)的頂部。同時，用戶可以點擊刪除評論。

在Axure中，需要實現(xiàn)幾個功能:

新增一條評論為評論排序（最新的評論置頂）刪除評論







顯然，這需要一個中繼器。主要實現(xiàn)方法如下:







新建評論框、發(fā)表評論按鈕、默認(rèn)隱藏的提示文本“請輸入評論文本”。給發(fā)表評論按鈕添加鼠標(biāo)單擊事件，進行評論框字符非空判斷，并相應(yīng)顯示或隱藏提示文本。在下方新建一個中繼器作為評論顯示列表。中繼器內(nèi)部的組件包含元件：頭像圖片、用戶名文本、發(fā)布時間文本、評論內(nèi)容文本、刪除圖標(biāo)（默認(rèn)隱藏）、Fire Event事件按鈕（默認(rèn)隱藏）、排序id文本（類型為數(shù)字，默認(rèn)隱藏，此id是為了進行評論的排序）。分別對每個元件進行命名。中繼器系統(tǒng)的ID分別設(shè)置為：avatar, name, comment, time, id。在Item Loaded事件下，利用set image和Set Text讓中繼器內(nèi)部的組件和系統(tǒng)ID進行一一綁定。新增一條評論：為按鈕“發(fā)表評論”添加鼠標(biāo)單擊事件，在評論框非空的case條件下，選中命令A(yù)dd Rows，輸入添加需要包含的數(shù)據(jù)類型（倒入頭像、輸入名字、comment需要通過本地變量綁定評論框文本、排序id通過本地變量設(shè)置為[[LVARA-1]]，LVARA為中繼器內(nèi)部組件 “排序id”文本元件，這里保證新增評論的排序id自動在上一條的基礎(chǔ)上減去1，這是后面評論排序的依據(jù)）。進行評論排序：選擇Add Sort 新增排序，目標(biāo)為中繼器，column類別選為“id”，而排序規(guī)則Sort As選擇數(shù)字Number, 排序的順序Order為升序Ascending。添加wait等待200ms。在中繼器里面，事先對按鈕添加鼠標(biāo)單擊事件，進行case條件判斷進行顯示或者隱藏同在中繼器的“刪除圖標(biāo)”，這樣做的目的是保證只有當(dāng)前用戶輸入的評論才會有刪除圖標(biāo)，而其它已評論用戶沒有。

條件1: 當(dāng)中繼器里面的組件“用戶名”文本值= Donald Trump(假設(shè)以該名字新發(fā)表一條評論)，則顯示刪除圖標(biāo)。

條件2: 否則（即else if true）隱藏刪除圖標(biāo)。在wait命令之后，接著添加Fire Event命令，目標(biāo)為中繼器內(nèi)部組件的按鈕“Fire Event”，選擇的執(zhí)行事件為Click or Tap。這樣實現(xiàn)了觸發(fā)顯示/隱藏刪除圖標(biāo)的事件。通過Set Text將評論框的值設(shè)置為空值（“”），即表示當(dāng)發(fā)表完一條新評論后，原油評論框內(nèi)容要清空。通過set size命令將評論區(qū)的背景高度增加約100（這個步驟主要針對有邊框的div背景，可選）

由于篇幅有限，其他頁面或功能板塊就不描述了，關(guān)于Axure操作的內(nèi)容就講完了。

11.行為網(wǎng)站評價

雖然已經(jīng)“重新創(chuàng)建”了Behance網(wǎng)站，但是還有很多頁面細節(jié)不完善，省略了一些步驟。大部分?jǐn)?shù)據(jù)只是通過模擬顯示，并不能真正還原網(wǎng)站功能。

所以這種原型停留在界面展示上，還有很多推廣空。如果成本允許，將通過前端和后端的開發(fā)來構(gòu)建一個真實可行的演示。這樣的原型在功能完成上有優(yōu)勢。

以下是對Behance網(wǎng)站的簡要評價。

11.1快樂

導(dǎo)航菜單直觀、簡潔、分類明確；配色風(fēng)格統(tǒng)一，簡潔自然，即便展示大量不同類型的作品依舊不會眼花繚亂；網(wǎng)頁布局以作品為中心；出色的信息傳遞和反饋。

11.2失望

創(chuàng)建項目時的編輯頁面過于“死板”，如果換成定制的富文本編輯器或許更好；個人資料頁面和編輯個人資料頁面部分操作過多，期待統(tǒng)一整合到一個頁面；招聘頁面宮格式板塊布局導(dǎo)致職位像“復(fù)制”一樣，極易引起視覺疲勞，無法找到重點。建議調(diào)整成大小有別、依次排序的布局，并且做好不同職位類型的分區(qū)展示，加入熱門職位、知名招聘方的推薦專區(qū)；糟糕的accessibility (這個問題似乎難以解決)。

12.fu & # 8217镥

本原型引用的相關(guān)作品來自Behance官網(wǎng)，僅供學(xué)習(xí)之用。創(chuàng)作者姓名、作品等。是隨機選擇的，這不是真的。該作品的版權(quán)屬于行為創(chuàng)作者。