如果為設計師推薦一個網站，哪一個最值得推薦呢？

想必很多人都會提到Behance，因為它是Photoshop軟件所屬公司Adobe旗下的平臺，名氣自然不低。其實除了名氣，Behance網站在交互設計上有很多值得探討的地方。

1. 基本描述

1.1 背景

Behance為何值得推薦？Behance是一個設計網站和社區，匯聚了大量的優質原創作品。在2012年，它被Adobe以1.5億美元收入麾下。收購Behance可以看作是Adobe大張旗鼓改革的象征，在Adobe擴張的過程中，Behance商業性和社交屬性都不斷強化。為適應新的發展趨勢，網站也不斷進行改版，不斷加入新功能，并試圖整合Creative Cloud服務。

實踐證明這是很成功的：收購Behance十年時間內，Adobe公司股價從約$30漲到了現在的約$380，漲幅超過10倍。股價一路飄紅，市值年年攀升。

該網站平均用戶駐留時間超過6分鐘，足以證明平臺內容對用戶的吸引力。這很大程度上是因為Behance不是一個普通的設計網站，它還是一個社交平臺、資源托管站點與分享社區。它成為了一個為個人創作者、商業公司打造的職業關系網絡。

為了探尋Behance成功的原因，將它的網站重新“設計”一遍似乎是一個不錯的學習過程。筆者使用Axure軟件，分享一些Behance在交互功能上的實現方法。

不過需要注意的是，這僅僅是一個試圖重制性質的設計，因而無法面面俱到，某些板塊和細節將被忽略。

1.2 原型整體效果預覽

假如你無法訪問Behance網站，沒關系，這里是使用Axure重制之后的顯示效果（本文所有gif動態圖為原型制作完成后屏幕錄制的效果，否則將會進行圖片備注）。

Behance的導航菜單都收納在了頁面頂部，從左至右依次是：品牌logo、超鏈接文字、搜索、信箱、通知、用戶頭像、apps應用集合等。

導航菜單井然有序，不僅是首頁，在每個頁面用戶都可以訪問到這個固定的導航菜單，不至于迷失。頂部導航的占用空間小，給下面的內容主體留出了很大的活動空間，用戶可以很輕松地被設計作品吸引。

我們可以將整體的網站分為幾個頁面：首次訪問頁（未登錄）、為您呈現（已登錄）、發現、實時（直播）、職位、搜索等。主要功能包含：內容展示與推薦、內容上傳編輯、搜索內容、登錄注冊、招聘求職、用戶評論與關注等。

2. 首頁

下面是在訪問首頁時會遇到的一些功能交互：

2.1 時間等待與彈出效果

在首次載入首頁時，經過約3秒，會由下往上彈出登錄注冊框，這種效果在Axure中操作比較簡單。

• 將注冊彈框設置為動態面板并隱藏；

• 為該動態面板添加show/hide事件，選擇show顯示，動畫為向上劃出；

• 添加wait等待事件，時間3.5s；

• 選擇“bring to front”可以將動態面板放置在最頂層；

• 實現窗口大小變化時，彈出的面板保持相對瀏覽器的右下角位置。需選中彈出的動態面板，選擇“Pin to browser”, 位置設置為水平居右，垂直居底部，并選中“Keep in front (browser only)”。

溫馨提示：元件目標為This時，指的是本元件，This可以保證在本元件更改名字時事件交互仍有效。

2.2 字符判斷與實時反饋

進入Behance創建賬戶時需要對密碼文本域進行多重條件約束，并且在用戶輸入密碼時，需要實時信息反饋。

在Axure中需要進行如下的設置：

• 為密碼文本框添加一個Text Changed（文本改變時）的事件，只要用戶輸入字符便會觸發下面的條件反饋信息。給Text Changed設置多個case（條件，又稱之為用例）進行判斷；

• 反饋信息：新建文本并轉換為動態面板，包含兩個狀態即輸入符合和不符合。同理，有多少需要考慮到的條件判斷就新建多少個動態面板；

• 用the length of widget value來判斷字符串的長度；

• 判斷英文大寫和小寫，使用text on widget，選擇包含英文字母，如A，之后務必選擇Match Any，保證每輸入一次字符都進行判斷。從A-Z，a-z依次分別添加，工作量較大。

在實際開發中，其實這種英文字符判斷通常只需要一兩行代碼，其它字符判斷同理。

2.3 即時的狀態轉換：沒必要一直用動態面板

在該Behance的網站上，文字在被鼠標移入時，字體顏色會從低透明度變為純白色，我們可以快速區分導航板塊，并在操作前后清晰地看到即時的變化。

比如這里的鼠標移入的快速轉化效果，即當鼠標移入按鈕上，按鈕顏色由淺藍色變為深藍色，實現即時的狀態反饋。

為實現這種多重效果變化的方法是使用動態面板，但盡管動態面板非常實用和強大，有的時候我們沒必要用動態面板。

按鈕自帶的樣式效果（Style Effects）非常實用：MouseOver（鼠標懸浮）、MouseDown、Selected、Disabled、Focused等，可以減少對動態面板的依賴。

默認的元件如標題、段落、文本等都有樣式效果。用起來能提升效率。

這也得出一條個人使用Axure的基本原則：如果可以不用動態面板就不使用。

3. 為您呈現頁

3.1 圖片變暗小竅門

在Behance上，創作者的頭像和作品是呈現最多的元素（以圖片格式），網站給這些元素加入了超鏈接，因此它們是一種快捷方式。它們被放置在了為您呈現頁面的上方，創作者和作品分類明確，也突出其重要性。

當訪問時鼠標移入圓形頭像、方形作品上時，這些圖片會變成深色。那么，在Axure中如何實現這種效果？

如上文所述，動態面板建立兩個狀態即可，但是狀態轉換太慢。

在Axure中采用的方式是：

• 底層為jpg圖片格式作為背景。

• 最上層為一個完全透明的幾何形狀元件（顏色為黑色）當作遮罩，設置效果即鼠標懸浮后變為30%透明度的黑色，并為該元件添加打開鏈接事件即可。

這樣做的好處是，不用使用動態面板，也不用費力使用兩張一淺一深的圖片來達到效果。

3.2 動態面板，Of Course I Still Love You

知名的商業航空公司SpaceX的可回收火箭會停在一艘叫 “Of Course I Still Love You”的船舶上，讓火箭穩定地停好。在Axure中，動態面板就好比這艘船，遨游了一圈，發現它依舊是最愛。

Behance 推薦的作品以宮格方式排列，分別包含了作品封面圖、作者（團隊）頭像和名字，還有點贊數和查閱數。

不同之處是，Behance為這些作品增加了軟件標簽。當你把鼠標移入到封面上，會出現該作品使用的創作軟件，比如Adobe自家的illustrator、AdobeXD等，這樣能幫助我們快速區分某領域的作品。

此外，創作者一欄中，既可以是個人也可以是包含多個所有者的合作形式，這非常利于創作者們的商業合作，我們也能知道某一作品背后其實有多個人付出了努力。

至于Axure中鼠標移入出現新的標簽的實現方法，只要用動態面板就可以了。

另外，卻會遇到一個比較棘手的問題：如何用最簡便的方法實現宮格形式的元素布局？比如Behance推薦的作品就是默認了一欄4個，從上至下依次鋪開。當然要分別包含創作者等信息。

面對這種布局簡單但涉及多個元素的時候，最原始的辦法是分別每個放置圖片、文本等元件，一個一個地更改。

• 優點：可以直接更改內容，方便對齊排列和布局。

• 缺點：工作量會很大。

那么有什么方法既可以快速又簡單？

最值得推薦的是Repeater（即中繼器，實際翻譯為復制器更直接，它相當于一個支持數據庫模擬與綁定、屬性可復制與修改的效果元件）。

但在Behance上，創作者通常只為1位，但是有時候會有多位所有者。因為這里的差別，如果用中繼器想要把網站的效果做出來就比較多花點時間綁定數據。

在這里使用的是原始的方法，下文會有中繼器的效果展示和說明。

3.3 文本綁定：你變我也跟著變

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

這里涉及到一個簡單的效果：文本綁定，數據同步變化。

由于鼠標移入和點擊時文字從低透明度（灰白）變為純白色，并有三角形向上和向下，因此還需要用到動態面板。在Axure中：

• 將要改變的文本元件設置為動態面板，取名為“目標語言”，狀態一里面的文本元件命名為“顯示語言”，即鼠標未選中的狀態；狀態二里面的文本元件為“顯示語言-白”，即鼠標點擊變化的狀態。

• 將列表中的每個單獨的語言文本元件分別命名為English，日本語等。

• 為每個語言文本元件分別添加鼠標單擊事件，選擇Set Text（設置文本），將“目標語言”動態面板下的兩個狀態的文本元件，分別和列表語言元件文本綁定，實現文本點擊時同步更改。

這里只要用到Set Text 設置文本，依次操作即可。Set Text 可以將目標元件的文本更改為自身元件的文本，功能實用。比如模擬用戶注冊自動登錄顯示用戶名時可以用到這一方法。

注意：如果要實現兩個文本更改任意一個，另外一個隨之同步更改，需要給兩個文本元件都使用Set Text。比如輸入密碼，無論顯示/隱藏，輸入都可以同步更改。

4. 發現頁

這是用Axure制作最費力的一個頁面：

4.1 元素左右滾動

在Behance的發現頁面下，按照軟件類別、行業類別等進行了作品分類。

用戶可以左右切換作品超過10個分類菜單（小長方形），方法是點擊分別位于頁面最左側和最右側的三角箭頭，實現菜單按順序左右來回切換，也可以不點擊箭頭，任意點擊一個菜單，下方展示該板塊的內容。

4.1.1 需要實現的功能

• 點擊可以按次序滾動菜單，左右點擊均需要支持。

• 點擊菜單后，該菜單滾動至居中，并在下方展示該板塊內容。

• 任意時候點擊任意菜單，能自動移動該菜單至居中位置。

4.1.2 實現思路：動態面板+復雜的條件判斷

• 添加動態面板A：將11個小長方形的菜單等距離排序后放置其中；同時添加兩個向左和向右的箭頭用于添加鼠標點擊事件。注意動態面板的總寬度、菜單的寬度、菜單間距，以便設置后面的位移距離。

• 動態面板A需要設置共10個狀態（根據實際有的菜單數量決定，Behance官網的數量遠遠不止10個，這里進行了簡化），每個狀態中分別設置單一菜單被選中且其它菜單未選中即可。*狀態命名時可選用從負5到0再到5進行。如state0代表默認的“作品精選菜單”，向左為state-1, 向右為state1。

• 新增一個動態面板B，總寬度為頁面寬度（如1600），把動態面板A放進B中，實現裁剪效果。這樣，無論面板A怎樣左右位移，它都在面板B當中。

• 給動態面板里面的左箭頭添加鼠標點擊命令，選擇Move（移動）事件，這里設置的參數是x軸移動210 (即菜單寬度+間距），y軸移動0。

• 點擊箭頭還會觸發下方的內容板塊多內內容更改：
  

1. --動態面板C：含作品細分標簽、下載/關注按鈕。該面板默認隱藏。

2. --大標題：Set Text 同步更改文本。

3. --小標題：Set Text 同步更改文版。

• 為點擊左箭頭新增case條件判斷，當動態面板A狀態為state0時，移動動態面板B，顯示動態面板C, 設置更改大標題和小標題的文本。按照此操作，分別為10個狀態進行條件判斷。

• 右箭頭的操作與左箭頭操作同理。

操作時，存在內容聯動和多種條件判斷。即便在簡化了菜單數量的情況下，為實現效果依舊比較費時費力。如果在實際開發中，可以采用兩三個元件展示出效果并和開發者溝通，以避免不必要的成本。

4.2 一個按鈕三個功能

網站上有一個按鈕，用戶可以點擊“關注xxx”，關注后按鈕文字變成“正在關注xxx”，當鼠標移入按鈕，文字顯示為“取消關注xxx”且按鈕背景為紅色。

實現方法：在一個動態面板中添加3個狀態，分別為關注、正在關注、取消關注。添加鼠標點擊事件，增加狀態的條件判斷即可。

5. 實時（直播）頁

我們可以在該頁面看到各種直播活動和直播視頻回放，Behance官方和不同類型的創作者合作，帶來了許多免費的教程。

用戶既可以學習（白票），創作者還可以分享自己的觀點和創作技能，獲得關注，提升商業價值，同時這也成為Behance官方打造一個出色的藝術設計社區的重要方式。

在這個頁面下，直播的視頻有多個不同的劃分，每個分類下的視頻可以點擊后左右滾動。

這里可以使用Axure的Repeater (中繼器)功能，一旦做好第一個分類，其它的只要復制一下再更改數據即可。

5.1 中繼器：復制你，還可不同于你

• 新建一個動態面板A，實現裁切效果，保證所有內容都在A的范圍內。

• 在面板A內部新建一個動態面板B，放入一個箭頭和中繼器。這樣無論面板B的內容如何左右滾動，始終在面板A中。

• 在動態面板B里面的中繼器中，新增7個元件，分別取名：rr-thumbnail（視頻封面），rr-title（視頻標題），rr-avatar（直播者頭像），rr-name（直播者名字）, rr-time（直播日期）, rr-hour（視頻時長）, rr- softwareicon（軟件圖標）, rr-view（觀看數量）。*只要英文，忽略括號內的中文，前綴rr-只是為了好區分而使用。

• 在動態面板B里面的中繼器中，命名列屬性，分別是：thumbnail，title，avatar，name, time, hour, softwareicon, view。接著在每個列屬性下方新增參數，點擊右鍵倒入圖片或者直接輸入文字。這需要一一對應。
  

比如添加第一個直播的內容為：視頻封面倒入一張，大標題為“hello designer”,作者為“adobe官方”，觀看時長1小時20分，觀看次數7000次，日期為2020年10月30日。

重要的一步，綁定數據。

• 為中繼器增加item loaded命令，使用Set Text和Set Image來綁定數據。

• 綁定大標題：選擇Set Text 設置文本事件，目標為rr-title,設置為text，值為[[Item.title]]。這里的item代指的是中繼器里面數據庫。

• 綁定視頻封面：選擇set image設置圖像事件, 目標為rr-thumbnail，默認值value為[[Item.thumbnail]]。
  其它的綁定用戶頭像、觀看次數等，原理相同。

• 計算好每個視頻封面占用的寬度和間隔寬度。為箭頭添加鼠標點擊命令，選擇Move移動事件，目標為動態面板B，設置好移動的距離。

當遇到可以通過單純的復制來實現大面積布局且需要單獨更改數據的時候，可以采用中繼器，以提升效率。

Axure的中繼器相當于一個數據庫，由自己添加不同類型的數據，這些數據都有一個不同的ID，新增的元件經過與該ID綁定（即item.id名字），主要使用Set Text和Set Image來傳輸數據。最后展示出來。中繼器除了增加，還有刪除、查找、排序等功能。

6. 個人資料頁

Behance是一個社區，因此每個人都可以擁有自己的主頁，別人可以查看你的作品，關注你。而自己在主頁中，可以查看自己的作品、為他人好評的作品集合，還可以編輯草稿，前往專門的頁面創建作品。

登錄后我們可以設置個人資料，這里就涉及到了狀態讀取和數據回傳。

在Axure中需要使用動態面板嵌套和多重條件判斷來實現。由于關聯較多，因此需要考慮周全。

6.1 狀態回傳

在頁面右下角，有一個懸浮按鈕，點擊可以彈出“個人資料清單”面板，要關閉這一面板只需要再次點擊按鈕或者選擇面板內部的“不再顯示此項”。

面板內部包含4個獨立的資料類別，每個類別包含兩種狀態：

• 已完成

• 未完成

采用了單選框的形式來設計。

• 分別將4個資料類別設置成動態面板，包含選中和未選中兩種狀態。全部類別作為一個整體的組合。默認隱藏；

• 新增一個按鈕為動態面板，包含兩個狀態，即可打開時和需收起時，有圖標差異；

• 為按鈕添加單擊事件，選擇show/hide 中的顯示面板，動畫為向上劃出，實現單擊按鈕后資料面板向上彈出。此時增加條件判斷使得按鈕可以關閉面板，操作較為簡單；

• 點擊面板內部的類別，再次彈出操作面板，判斷輸入有效性，若“保存”則更改本類別的狀態為已選中，選“取消”則是未選中。點擊保存或取消或點擊“x”關閉圖標，都需要關聯外部的懸浮按鈕的打開與關閉狀態。

其中這里還涉及空字符判斷、文本字數限制與實時反饋：

在Axure中，利用元件的length屬性來判斷文本的字符長度，通過多個條件設置即可。

根據輸入長度還需要在下方實時反饋提示文本（設置為默認隱藏），是否輸入了足夠的長度。

比如這里的字符需要是3-20位，那么文本框的text changed本文變化事件的判斷情況有：0（空字符）、非0、0到3、3到22、大于22，注意在新增case條件判斷的同時顯示和隱藏提示文本即可。

同時，點擊資料清單面板里面的類別之后彈出了二級面板，背景顏色為90%黑色，并且是填充了整個屏幕，因此需要做到自適應。

操作方法：將黑色矩形轉換為動態面板，設置為100% wide ( browser only)，默認隱藏。當打開、關閉外部的懸浮按鈕，以及點擊二級面板的保存、取消、“x”關閉圖標，都要關聯此黑色背景的show/hide狀態。

在資料清單面板外部的操作完成后需要將狀態返回給面板內部，比如增加橫幅后應同時設置面板里面橫幅類的狀態更換為已選中。

該頁面需要考慮多個面板的嵌套、多個內外部和同級的動態面板的狀態回傳，做好條件判斷，確保沒有邏輯問題。

7. 編輯個人資料

點擊頭像可以進入專門的頁面編輯詳細的個人資料，包含：基本信息、團隊、工作經歷、關聯賬號等欄目，還可以增加自定義欄目。

Behance在這里采用了典型的左右布局，即左邊是固定的菜單導航列表，右側是可上下滑動內容區域。

這里比較有趣的是，左右兩部分并非固定地劃分，而是在操作時有顯眼的聯系，最主要的網頁元素是滾動條指示器。

7.1 窗口動態滾動

• 當鼠標上下滾動時，右側內容滾動，左側的指示器聯動滾動（切換）

• 在任意位置，點擊左側的導航菜單，指示器快速滾動切換至該欄目，右側同樣快速滾動至該導航關聯的內容區域。

在Axure中，要做到這樣無縫過渡的效果，推薦的方法是使用錨點來當作定位觸發器。

7.1.1 基本要求

• 窗口向下/上滾動，右側內容區域滾動固定的距離，對應的指示器要指向相應的左側導航菜單。

• 分別點擊左側7個導航菜單欄，右側內容滾動到響應的錨點位置。

7.1.2 實現過程

• 設置左側菜單為動態面板，包含7個狀態，每個狀態單機選中時帶藍色指示器；

• 計算好右側內容每個區域的高度、間隔；

• 為頁面創建window scrolled (窗口滾動) 事件，若窗口滾動至指定的距離或范圍，左側的動態面板要切換到對應的狀態。這里需要增加7個case條件判斷，距離范圍會根據右側的內容區域高度不同而不同。設置為整數方便計算和對齊；

• 增加7個熱區元件當作錨點定位器，放在頁面最左側的位置，錨點要分別命名如anchor1,anchor2…anchor7；

• 在動態面板內部，分別對每個狀態添加鼠標單擊事件，單擊時選擇 scroll to widget (滾動至元件) 命令，目標為錨點（anchor1…anchor7）, 方向為垂直。

7.2 列表拖動排序

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

在Axure中，需要實現基本的文本非空判斷、動態面板狀態判斷實現同一按鈕不同功能。此外，需要允許社交媒體賬號列表能拖動排序。

7.2.1 基本思路

使列表可選中并拖動至目標范圍，其它列表相應上下移動一定距離。

7.2.2 主要功能

事件：Mouse Hover, Mouse Exit, Dragged, Drag Dropped。

命令：切換動態面板狀態、Move。

7.2.3 步驟

• 新建一個Twitter動態面板，包含兩個狀態：1）默認的未選中狀態，帶陰影；2）被選中的狀態。

• 同上，新增其它三個動態面板，Facebook, YouTube, Instagram。上下排列四個列表。

• 為Twitter面板添加交互事件：鼠標懸浮時切換為面板狀態2（選中狀態），鼠標移出時切換為狀態1。

• 再添加Dragged被拖動事件，執行Move移動命令，目標為This即本動態面板，移動參數為With Drag即移動距離為拖動距離。

• 最后，再添加Dragged Dropped拖動釋放事件，這里需要進行三個case用例判斷，分別是本面板的區域覆蓋到了Facebook, YouTube, Instagram上，分別要執行更換面板狀態，移動本面板及其它的面板。實現拖動Twitter時可以自動排序。區域是否覆蓋的判斷邏輯是if area of This(本元件) is over area of widget B（目標元件）。

• 同理，為其它三個動態面板采用相同的方式即可。用例判斷較多。

只要列表中要拖動的動態面板越多，操作步驟和判斷就越多。實際上還可以用中繼器來實現拖動排序，不過這里不再展開。

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

在Behance網站上，允許更換頭像。只需點擊“替換頭像”或者圓形頭像，會打開上傳本地圖片文件面板（背景是全屏90%黑），選中圖像文件，再彈出圖像裁切面板（背景是全屏90%黑）。

由于涉及多個面板和按鈕，因此會經常用到 show/hide （顯示/隱藏）來顯示或關閉面板和元件，只要做好判斷，操作并不復雜，其中一處是顯示裁剪圖片的進度條。

方法：

• 新建圓角矩形A元件當作背景，大小w300 x h18；

• 新建圓角矩形B元件，大小為w25 x h18；

• 鼠標單擊事件的時候，為B元件添加set size設置大小命令，選擇變化后的長度為300，起點為左中位置，設置延續時間約3秒。由于是固定長度的進度條，因此制作較為簡單。

8. 創建項目頁

優秀的創作者樂于上傳自己的作品進行展示，Behance將稱之為創建項目。

從頂部的導航菜單到個人資料頁，都提供了創建項目的入口。藍色的文字按鈕和醒目的Div，無不提醒著用戶：快上傳你的作品啊。

在上傳編輯頁面中，支持本地文件上傳、添加文本和嵌入媒體（比如YouTube視頻）,還能調整布局。

頁面主要框架是：

• 上方左側的步驟指示（1.內容，2.封面，3.設置），右側是操作按鈕組（預覽，保存，繼續）；

• 下方左側為固定的編輯菜單，右側為可滑動和動態調整高度的內容主體區域。

這里，相當于要考慮4個區域的相互關系，有動態面板嵌套，因此大量的case條件判斷不可避免。

為了模擬出用戶上傳文件到編輯發布的流程，在Axure中進行了以下主要的操作：

• 右側區域默認主體設置為動態面板A，包含至少5個狀態。

• 單擊“上傳文件菜單”，彈出上傳文件窗口，這里同樣有90%黑色背景，考慮好保存和取消的按鈕操作即可。

• 單擊“添加文本”，右側內容區域Div同步動態向下擴大高度，同時文本框要支持編輯和刪除。因此這里需要使用中繼器。

8.1 中繼器增加和刪除

用戶添加的文本是可以編輯和刪除的，這除了中繼器，沒有更好的辦法了。

在主體動態面板A里面的一個狀態為添加文本時的狀態，這里嵌入的動態面板B中使用中繼器做好基本的元件和show/hide效果。

單擊外部的“添加文本”元件，添加鼠標單擊事件，選中Add Rows進行添加新數據。目標為中繼器，添加Row時插入變量[[LVAR1]] = text on widget動態面板B內的文本框。這樣就實現了單擊菜單新增一個文本。

其中點擊“刪除文本”元件，在鼠標單擊事件上選擇Delete Rows，目標為中繼器，Row為This即本條新增的數據。

8.2 動態調整元件高度

利用set size命令來增加元件高度，但當隨意增加或刪除“添加的文本“時，如何讓該區域實現自適應高度呢？

在右側的主體動態面板A中，可以添加一個矩形元件H當作背景。當新增或者刪除中繼器文本時，面板A和背景H都要同步改變高度。

在set size時，只需要在本元件身上增加一定高度即可。

如執行事件時，set size的目標為矩形H，高度的參數為變量值 [[LVAR1.height+55]]，而變量LVAR1 = widget 本元件。

同樣的方式適用于面板A。這里增加的固定值還可以換為中繼器內部的動態面板高度。

8.3 圖片放大縮小：單擊和拖動

我們可以對創建的項目設置封面，封面是支持自定義裁剪的。

8.3.1 基本要求

• 單擊減號圖標“—”圖片縮小，單擊加號“+”圖片放大。

• 向左拖動指示條圓點按鈕，圖片縮小，向右則圖片放大。

• 單擊減號和加號圖標時下方的指示條要動態變化。

8.3.2 基本步驟

• 添加封面圖片取名為F，即要對它進行放大和縮小。

• 新建一個動態面板G為指示條，包含條形背景（bar-bg）、可左右伸縮的小矩形進度條（bar-progress）、可操作的圓點（bar-button）。

• 新建減號元件，添加鼠標單擊事件，選擇命令set size，目標為圖片F，參數置寬度[[LVAR2.width/1.02]]，高度[[LVAR3.height/1.02]]（這里的LVAR3就是元件圖片H），錨點為中心。

• 新建加號元件，操作同減號元件，不過set size時參數不同，變化為寬度[[LVAR2.width*1.02]]，高度[[LVAR3.height*1.02]]，實現單擊加號便放大圖片。

• 拖動放大圖片：在動態面板G中，為圓點添加Dragged拖動事件，選擇Move命令，目標為This，移動屬性為With Drag x，即只能在x軸上拖動圓點。設置邊界，左邊大于bar-bg的x軸坐標位置，參數為left is greater than [[LVAR1.x]]，(本地變量里要設置LVAR1為 bar-bg元件)。右邊邊界同理，參數為right is less than or equal [[LVAR1.x+LVAR1.width]], (這里的LVAR1為元件bar-bg)，這樣即表示最大的拖動距離為元件的x軸坐標+元件寬度。如果不設置邊界，那么可以在屏幕寬度內隨意拖動。

• 設置進度條效果：在Dragged拖動事件下，選擇set size，目標為bar-progress進度條矩形元件，錨點為左居中，高度為4，寬度為變量[[TotalDragX+LVAR1.width]]，（這里的本地變量LVAR1是bar-button）, 即表示，進度條的變化寬度為拖動距離+圓點的寬度。

• 最后，在對減號和加號進行單擊事件時，還可以改變進度條，進行同步改變，這里為了簡化沒有進行操作。

9. 職位頁

Behance為商業公司和創作者提供了招聘服務，在這里可以篩選眾多的招聘崗位，選中心儀的職位進行應聘。

特點：崗位數量多、可篩選崗位、可點擊操作菜單應聘。

為了實現這樣的效果，需要利用中繼器來創建全部的崗位信息，并允許篩選操作。

9.1 中繼器創建職位列表

先用Axure的中繼器模擬一些職位數據：

• 新建一個中繼器，添加多個元件并分別命名。元件分別包含公司logo, 公司名字，城市，國家，職位標題，職位描述，職位類型，發布時間，以及一個默認隱藏的彈出面板用于點擊應聘等操作。

• 為中繼器設置數據ID，如pic, company, city, country, job等，一一對應并補充數據。

• 分別綁定ID和元件。即Item Loaded事件時選擇Set Text 和 set image進行操作。

創建好了職位列表之后，可以進行查看職位信息。

9.2 中繼器篩選

中繼器的篩選主要依賴Add Filter（添加過濾器）命令進行。

在Behance上，篩選職位的方式有三種：

• 按照職位類型篩選：全職、自由職業者、實習；

• 按照區域篩選：選擇國家，行政區，城市嵌套篩選。（需要的操作最多）；

• 按照創意領域篩選：如web設計、交互設計、圖形設計、插圖等約20個類別。

按職位類型和創意領域的篩選，在Axure中操作較為簡單。

例如：篩選全職的是職位時，步驟為：為“全職”文本框添加鼠標單擊事件，選擇中繼器的功能Add Filter，目標選中為此中繼器（提前命名好），過濾條件中規則為[[item.type == ‘全職’]]，并勾選Remove other filters，即表示用戶單擊“全職”時，觸發中繼器的過濾功能，只顯示類型等于“全職”的數據。

比較復雜的是按區域篩選的操作：

主要步驟：

• 點擊上方菜單“全球”，下方彈出篩選面板，其中包含國家、行政區、城市等的下拉框，下拉框包含列表數據，同時包括兩個操作按鈕：應用、刪除；

• 在為按鈕“應用”添加單擊事件后，需要多個case條件判斷，保證不同國家、行政區的組合時能執行相應的過濾器篩選。

9.3 用函數實現首字符截取

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

• 將公司名稱文本元件取名為A；

• 添加一個新文本元件B；

• 在觸發事件時選擇Set Text 改變文本，目標為文本B, 變化值為[[LVAR1.charAt(0)]]，這里的LVAR1變量指向的是文本元件A。

• 函數charAt(0)用于截取字符串，0代表第一位，1代表第二位，以此類推。

9.4 批量隨機顏色

假如發布職位的公司未上傳logo，那么系統將自動截取公司名稱首字符，并選用隨機顏色的背景顏色。

這如何實現？

基本思路：在動態面板中增加不同顏色作為多個狀態，利用隨機函數抽取一個數字，當匹配時便轉換到該顏色狀態下。

• 新建一個圓形元件并轉換為動態面板Y，添加多個狀態（如10個），每個狀態都包含不同的顏色。基于0123456789ABCDE順序對狀態進行命名，如state1, stateA等。

• 新建一個文本元件X（默認隱藏），值為0123456789ABCDE。

• 在單擊觸發事件時，選擇切換動態面板Y的狀態，值為[[LVAR1.charAt((Math.random()*15).toFixed(0))]]，這里的變量LVAR1為文本X。表示單擊時將會從文本中通過隨機函數Math.random() 隨機選擇一個值，當值和動態面板的狀態吻合時切換至該狀態，從而實現改變顏色。由于是隨機的，因此顏色每次都為隨機顏色。

可在中繼器中進行隨機函數的使用，通過配合Fire Event事件觸發，可實現批量的隨機顏色效果（比如紅綠燈、霓虹燈效果）。

10. 作品詳情頁

當我們點擊打開作品，可以進入詳情頁面，這里有創作者信息，全部的作品展示，作為注冊用戶還可以進行評論和互動。

10.1 固定側邊工具欄

新建一個動態面板，里面包含已經設置好的元件和交互事件。點擊Pin to Browser, 將動態面板設置為右側固定。

10.2 同步改變狀態、同步加一減一

用戶可以對作品進行點贊，并顯示總的點贊數量；當取消點贊時，數量也隨之減去1。

這里涉及三個部分的聯動變化：

• 居中點贊按鈕

• 工具欄點贊按鈕

• 下方點贊總數

在點贊按鈕中，每次點贊或取消贊，按鈕里都會顯示點贊的數量。此外，當鼠標移入工具欄點贊按鈕上，會在其左側彈出文本“給Ta點贊”或“不欣賞”。

因此最終涉及的是三個部分、七處變化：

不過具體操作相對簡單，主要步驟：

• 按鈕、彈出文本等均為動態面板，包含兩個狀態。當觸發事件時進行切換，并進行case條件判斷；

• 利用Set Text 設置文本來傳遞點贊總數，使得兩個按鈕內的文本都能獲得相同的數值；

• 點贊數值加1和減1: 創建一個本地變量LVAR1(等于元件“點贊總數”)，按鈕內的文本經過Set Text后的值為 [[LVAR1.text+1]]或[[LVAR1.text-1]]。

10.3 評論的增加、排序、刪除

用戶對作品進行評論后，此條評論將出現在評論區的最上方。同時，用戶可以點擊刪除該條評論。

在Axure中，需要實現幾個功能：

• 新增一條評論

• 為評論排序（最新的評論置頂）

• 刪除評論

顯然，這需要用到中繼器，主要實現方法：

• 新建評論框、發表評論按鈕、默認隱藏的提示文本“請輸入評論文本”。

• 給發表評論按鈕添加鼠標單擊事件，進行評論框字符非空判斷，并相應顯示或隱藏提示文本。

• 在下方新建一個中繼器作為評論顯示列表。

• 中繼器內部的組件包含元件：頭像圖片、用戶名文本、發布時間文本、評論內容文本、刪除圖標（默認隱藏）、Fire Event事件按鈕（默認隱藏）、排序id文本（類型為數字，默認隱藏，此id是為了進行評論的排序）。分別對每個元件進行命名。

• 中繼器系統的ID分別設置為：avatar, name, comment, time, id。在Item Loaded事件下，利用set image和Set Text讓中繼器內部的組件和系統ID進行一一綁定。

• 新增一條評論：為按鈕“發表評論”添加鼠標單擊事件，在評論框非空的case條件下，選中命令Add Rows，輸入添加需要包含的數據類型（倒入頭像、輸入名字、comment需要通過本地變量綁定評論框文本、排序id通過本地變量設置為[[LVARA-1]]，LVARA為中繼器內部組件 “排序id”文本元件，這里保證新增評論的排序id自動在上一條的基礎上減去1，這是后面評論排序的依據）。

• 進行評論排序：選擇Add Sort 新增排序，目標為中繼器，column類別選為“id”，而排序規則Sort As選擇數字Number, 排序的順序Order為升序Ascending。

• 添加wait等待200ms。

• 在中繼器里面，事先對按鈕添加鼠標單擊事件，進行case條件判斷進行顯示或者隱藏同在中繼器的“刪除圖標”，這樣做的目的是保證只有當前用戶輸入的評論才會有刪除圖標，而其它已評論用戶沒有。
  --條件1: 當中繼器里面的組件“用戶名”文本值= Donald Trump(假設以該名字新發表一條評論)，則顯示刪除圖標。
  --條件2: 否則（即else if true）隱藏刪除圖標。

• 在wait命令之后，接著添加Fire Event命令，目標為中繼器內部組件的按鈕“Fire Event”，選擇的執行事件為Click or Tap。這樣實現了觸發顯示/隱藏刪除圖標的事件。

• 通過Set Text將評論框的值設置為空值（“”），即表示當發表完一條新評論后，原油評論框內容要清空。

• 通過set size命令將評論區的背景高度增加約100（這個步驟主要針對有邊框的div背景，可選）

由于篇幅所限，不再展開描述其它頁面或者功能板塊，有關Axure操作的的內容結束。

11. 對Behance網站的評價

雖然對Behance網站進行了“重新制作”，但是還有很多頁面細節沒有完善，省略了一些步驟。大部分的數據也僅限于通過模擬進行展示，無法真實地還原網站功能。

因此，這種停留在界面展示的原型，還有很多提升空間。假如成本允許，通過前端和后端的開發建立一個真實可運行的demo, 那樣的原型在功能完成度上都有優勢。

以下是對Behance網站的簡單評價。

令人愉悅之處：

• 導航菜單直觀、簡潔、分類明確。

• 配色風格統一，簡潔自然，即便展示大量不同類型的作品依舊不會眼花繚亂。

• 網頁布局以作品為中心。

• 出色的信息傳遞和反饋。

令人失望之處：

• 創建項目時的編輯頁面過于“死板”，如果換成定制的富文本編輯器或許更好。

• 個人資料頁面和編輯個人資料頁面部分操作過多，期待統一整合到一個頁面。

• 招聘頁面宮格式板塊布局導致職位像“復制”一樣，極易引起視覺疲勞，無法找到重點。建議調整成大小有別、依次排序的布局，并且做好不同職位類型的分區展示，加入熱門職位、知名招聘方的推薦專區。

• 糟糕的accessibility (這個問題似乎難以解決)。

12.原型在線預覽

鏈接：https://www.pmdaniu.com/storage/121016/5e77b8c7ea82b3f29ded1e41c011d476-71493/start.html

附錄：本文原型內引用的有關作品來源于Behance官網，僅供學習之用。創作者、作品等名稱等為隨機選取，并非真實。有關作品的版權歸屬于Behance創作者。