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

編輯導(dǎo)語：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為何值得推薦？

Behance是一個設(shè)計網(wǎng)站和社區(qū)，匯聚了大量的優(yōu)質(zhì)原創(chuàng)作品。在2012年，它被Adobe以1.5億美元收入麾下。

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

為適應(yīng)新的發(fā)展趨勢，網(wǎng)站也不斷進行改版，不斷加入新功能，并試圖整合Creative Cloud服務(wù)。

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

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

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

為了探尋Behance成功的原因，將它的網(wǎng)站重新“設(shè)計”一遍似乎是一個不錯的學(xué)習(xí)過程。筆者使用Axure軟件，分享一些Behance在交互功能上的實現(xiàn)方法。

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

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

假如你無法訪問Behance網(wǎng)站，沒關(guān)系，這里是使用Axure重制之后的顯示效果（本文所有g(shù)if動態(tài)圖為原型制作完成后屏幕錄制的效果，否則將會進行圖片備注）。

Behance的導(dǎo)航菜單都收納在了頁面頂部，從左至右依次是：品牌logo、超鏈接文字、搜索、信箱、通知、用戶頭像、apps應(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 時間等待與彈出效果

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

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

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

2.2 字符判斷與實時反饋

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

在Axure中需要進行如下的設(shè)置：

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

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

2.3 即時的狀態(tài)轉(zhuǎn)換：沒必要一直用動態(tài)面板

在該Behance的網(wǎng)站上，文字在被鼠標(biāo)移入時，字體顏色會從低透明度變?yōu)榧儼咨覀兛梢钥焖賲^(qū)分導(dǎo)航板塊，并在操作前后清晰地看到即時的變化。

比如這里的鼠標(biāo)移入的快速轉(zhuǎn)化效果，即當(dāng)鼠標(biāo)移入按鈕上，按鈕顏色由淺藍色變?yōu)樯钏{色，實現(xiàn)即時的狀態(tài)反饋。

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

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

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

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

3.1 圖片變暗小竅門

在Behance上，創(chuàng)作者的頭像和作品是呈現(xiàn)最多的元素（以圖片格式），網(wǎng)站給這些元素加入了超鏈接，因此它們是一種快捷方式。

它們被放置在了為您呈現(xiàn)頁面的上方，創(chuàng)作者和作品分類明確，也突出其重要性。

當(dāng)訪問時鼠標(biāo)移入圓形頭像、方形作品上時，這些圖片會變成深色。

那么，在Axure中如何實現(xiàn)這種效果？

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

在Axure中采用的方式是：

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

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

3.2 動態(tài)面板，Of Course I Still Love You

知名的商業(yè)航空公司SpaceX的可回收火箭會停在一艘叫 “Of Course I Still Love You”的船舶上，讓火箭穩(wěn)定地停好。

在Axure中，動態(tài)面板就好比這艘船，遨游了一圈，發(fā)現(xiàn)它依舊是最愛。

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

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

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

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

另外，卻會遇到一個比較棘手的問題：如何用最簡便的方法實現(xiàn)宮格形式的元素布局？

比如Behance推薦的作品就是默認了一欄4個，從上至下依次鋪開，當(dāng)然要分別包含創(chuàng)作者等信息。

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

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

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

最值得推薦的是Repeater（即中繼器，實際翻譯為復(fù)制器更直接，它相當(dāng)于一個支持?jǐn)?shù)據(jù)庫模擬與綁定、屬性可復(fù)制與修改的效果元件）。

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

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

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

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

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

由于鼠標(biāo)移入和點擊時文字從低透明度（灰白）變?yōu)榧儼咨?，并有三角形向上和向下，因此還需要用到動態(tài)面板。在Axure中：

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

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

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

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

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

4.1 元素左右滾動

在Behance的發(fā)現(xiàn)頁面下，按照軟件類別、行業(yè)類別等進行了作品分類。

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

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

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

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

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

4.1.3 動態(tài)面板

含作品細分標(biāo)簽、下載/關(guān)注按鈕，該面板默認隱藏。

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

為點擊左箭頭新增case條件判斷，當(dāng)動態(tài)面板A狀態(tài)為state0時，移動動態(tài)面板B，顯示動態(tài)面板C， 設(shè)置更改大標(biāo)題和小標(biāo)題的文本。按照此操作，分別為10個狀態(tài)進行條件判斷，右箭頭的操作與左箭頭操作同理。

操作時，存在內(nèi)容聯(lián)動和多種條件判斷。即便在簡化了菜單數(shù)量的情況下，為實現(xiàn)效果依舊比較費時費力。

如果在實際開發(fā)中，可以采用兩三個元件展示出效果并和開發(fā)者溝通，以避免不必要的成本。

4.2 一個按鈕三個功能

網(wǎng)站上有一個按鈕，用戶可以點擊“關(guān)注xxx”，關(guān)注后按鈕文字變成“正在關(guān)注xxx”，當(dāng)鼠標(biāo)移入按鈕，文字顯示為“取消關(guān)注xxx”且按鈕背景為紅色。

實現(xiàn)方法：在一個動態(tài)面板中添加3個狀態(tài)，分別為關(guān)注、正在關(guān)注、取消關(guān)注。添加鼠標(biāo)點擊事件，增加狀態(tài)的條件判斷即可。

5. 實時（直播）頁

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

用戶既可以學(xué)習(xí)（白票），創(chuàng)作者還可以分享自己的觀點和創(chuàng)作技能，獲得關(guān)注，提升商業(yè)價值，同時這也成為Behance官方打造一個出色的藝術(shù)設(shè)計社區(qū)的重要方式。

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

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

5.1 中繼器：復(fù)制你，還可不同于你

1）新建一個動態(tài)面板A，實現(xiàn)裁切效果，保證所有內(nèi)容都在A的范圍內(nèi)。

2）在面板A內(nèi)部新建一個動態(tài)面板B，放入一個箭頭和中繼器。

這樣無論面板B的內(nèi)容如何左右滾動，始終在面板A中。

3）在動態(tài)面板B里面的中繼器中，新增7個元件。

分別取名：rr-thumbnail（視頻封面），rr-title（視頻標(biāo)題），rr-avatar（直播者頭像），rr-name（直播者名字）, rr-time（直播日期）, rr-hour（視頻時長）, rr- softwareicon（軟件圖標(biāo)）, rr-view（觀看數(shù)量）。*只要英文，忽略括號內(nèi)的中文，前綴rr-只是為了好區(qū)分而使用。

4）在動態(tài)面板B里面的中繼器中，命名列屬性。

分別是：thumbnail、title、avatar、name、time、hour、softwareicon、view。

接著在每個列屬性下方新增參數(shù)，點擊右鍵倒入圖片或者直接輸入文字，這需要一一對應(yīng)。

比如：添加第一個直播的內(nèi)容為：視頻封面倒入一張，大標(biāo)題為“hello designer”，作者為“adobe官方”，觀看時長1小時20分，觀看次數(shù)7000次，日期為2020年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，默認值value為[[Item.thumbnail]]。其它的綁定用戶頭像、觀看次數(shù)等，原理相同。

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

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

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

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

6. 個人資料頁

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

而自己在主頁中，可以查看自己的作品、為他人好評的作品集合，還可以編輯草稿，前往專門的頁面創(chuàng)建作品。

登錄后我們可以設(shè)置個人資料，這里就涉及到了狀態(tài)讀取和數(shù)據(jù)回傳。

在Axure中需要使用動態(tài)面板嵌套和多重條件判斷來實現(xiàn)。由于關(guān)聯(lián)較多，因此需要考慮周全。

6.1 狀態(tài)回傳

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

面板內(nèi)部包含4個獨立的資料類別，每個類別包含兩種狀態(tài)：

1. 已完成
2. 未完成

采用了單選框的形式來設(shè)計。

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

其中這里還涉及空字符判斷、文本字?jǐn)?shù)限制與實時反饋：

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

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

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

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

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

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

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

7. 編輯個人資料

點擊頭像可以進入專門的頁面編輯詳細的個人資料，包含：

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

還可以增加自定義欄目。

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

這里比較有趣的是，左右兩部分并非固定地劃分，而是在操作時有顯眼的聯(lián)系，最主要的網(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中，要做到這樣無縫過渡的效果，推薦的方法是使用錨點來當(dāng)作定位觸發(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 實現(xiàn)過程

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

7.2 列表拖動排序

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

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

7.2.1 基本思路

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

7.2.2 主要功能

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

命令：切換動態(tài)面板狀態(tài)、Move。

7.2.3 步驟

1. 新建一個Twitter動態(tài)面板，包含兩個狀態(tài)：1）默認的未選中狀態(tài)，帶陰影；2）被選中的狀態(tài)。
2. 同上，新增其它三個動態(tài)面板，F(xiàn)acebook, YouTube, Instagram。上下排列四個列表。
3. 為Twitter面板添加交互事件：鼠標(biāo)懸浮時切換為面板狀態(tài)2（選中狀態(tài)），鼠標(biāo)移出時切換為狀態(tài)1。
4. 再添加Dragged被拖動事件，執(zhí)行Move移動命令，目標(biāo)為This即本動態(tài)面板，移動參數(shù)為With Drag即移動距離為拖動距離。
5. 最后，再添加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)元件）。
6. 同理，為其它三個動態(tài)面板采用相同的方式即可，用例判斷較多。

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

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

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

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

方法：

1. 新建圓角矩形A元件當(dāng)作背景，大小w300 x h18；
2. 新建圓角矩形B元件，大小為w25 x h18；
3. 鼠標(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)于要考慮4個區(qū)域的相互關(guān)系，有動態(tài)面板嵌套，因此大量的case條件判斷不可避免。

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

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

8.1 中繼器增加和刪除

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

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

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

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

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

利用set size命令來增加元件高度，但當(dāng)隨意增加或刪除“添加的文本“時，如何讓該區(qū)域?qū)崿F(xiàn)自適應(yīng)高度呢？

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

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

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

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

8.3 圖片放大縮?。簡螕艉屯蟿?/h3>

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

8.3.1 基本要求

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

8.3.2 基本步驟

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

9. 職位頁

Behance為商業(yè)公司和創(chuàng)作者提供了招聘服務(wù)，在這里可以篩選眾多的招聘崗位，選中心儀的職位進行應(yīng)聘。

特點：

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

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

9.1 中繼器創(chuàng)建職位列表

先用Axure的中繼器模擬一些職位數(shù)據(jù)：

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

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

9.2 中繼器篩選

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

9.2.1 篩選職位的方式

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

按職位類型和創(chuàng)意領(lǐng)域的篩選，在Axure中操作較為簡單。

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

比較復(fù)雜的是按區(qū)域篩選的操作：

9.2.2 主要步驟

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

9.3 用函數(shù)實現(xiàn)首字符截取

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

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

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

9.4 批量隨機顏色

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

這如何實現(xiàn)？

基本思路：在動態(tài)面板中增加不同顏色作為多個狀態(tài)，利用隨機函數(shù)抽取一個數(shù)字，當(dāng)匹配時便轉(zhuǎn)換到該顏色狀態(tài)下。

1. 新建一個圓形元件并轉(zhuǎn)換為動態(tài)面板Y，添加多個狀態(tài)（如10個），每個狀態(tài)都包含不同的顏色?；?123456789ABCDE順序?qū)顟B(tài)進行命名，如state1, stateA等。
2. 新建一個文本元件X（默認隱藏），值為0123456789ABCDE。
3. 在單擊觸發(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)改變顏色。由于是隨機的，因此顏色每次都為隨機顏色。

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

10. 作品詳情頁

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

10.1 固定側(cè)邊工具欄

新建一個動態(tài)面板，里面包含已經(jīng)設(shè)置好的元件和交互事件。點擊Pin to Browser, 將動態(tài)面板設(shè)置為右側(cè)固定。

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

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

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

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

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

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

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

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

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

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

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

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

顯然，這需要用到中繼器，主要實現(xiàn)方法：

1. 新建評論框、發(fā)表評論按鈕、默認隱藏的提示文本“請輸入評論文本”。
2. 給發(fā)表評論按鈕添加鼠標(biāo)單擊事件，進行評論框字符非空判斷，并相應(yīng)顯示或隱藏提示文本。
3. 在下方新建一個中繼器作為評論顯示列表。
4. 中繼器內(nèi)部的組件包含元件：頭像圖片、用戶名文本、發(fā)布時間文本、評論內(nèi)容文本、刪除圖標(biāo)（默認隱藏）、Fire Event事件按鈕（默認隱藏）、排序id文本（類型為數(shù)字，默認隱藏，此id是為了進行評論的排序）。分別對每個元件進行命名。
5. 中繼器系統(tǒng)的ID分別設(shè)置為：avatar, name, comment, time, id。在Item Loaded事件下，利用set image和Set Text讓中繼器內(nèi)部的組件和系統(tǒng)ID進行一一綁定。
6. 新增一條評論：為按鈕“發(fā)表評論”添加鼠標(biāo)單擊事件，在評論框非空的case條件下，選中命令A(yù)dd Rows，輸入添加需要包含的數(shù)據(jù)類型（倒入頭像、輸入名字、comment需要通過本地變量綁定評論框文本、排序id通過本地變量設(shè)置為[[LVARA-1]]，LVARA為中繼器內(nèi)部組件 “排序id”文本元件，這里保證新增評論的排序id自動在上一條的基礎(chǔ)上減去1，這是后面評論排序的依據(jù)）。
7. 進行評論排序：選擇Add Sort 新增排序，目標(biāo)為中繼器，column類別選為“id”，而排序規(guī)則Sort As選擇數(shù)字Number, 排序的順序Order為升序Ascending。
8. 添加wait等待200ms。
9. 在中繼器里面，事先對按鈕添加鼠標(biāo)單擊事件，進行case條件判斷進行顯示或者隱藏同在中繼器的“刪除圖標(biāo)”，這樣做的目的是保證只有當(dāng)前用戶輸入的評論才會有刪除圖標(biāo)，而其它已評論用戶沒有。
   條件1: 當(dāng)中繼器里面的組件“用戶名”文本值= Donald Trump(假設(shè)以該名字新發(fā)表一條評論)，則顯示刪除圖標(biāo)。
   條件2: 否則（即else if true）隱藏刪除圖標(biāo)。
10. 在wait命令之后，接著添加Fire Event命令，目標(biāo)為中繼器內(nèi)部組件的按鈕“Fire Event”，選擇的執(zhí)行事件為Click or Tap。這樣實現(xiàn)了觸發(fā)顯示/隱藏刪除圖標(biāo)的事件。
11. 通過Set Text將評論框的值設(shè)置為空值（“”），即表示當(dāng)發(fā)表完一條新評論后，原油評論框內(nèi)容要清空。
12. 通過set size命令將評論區(qū)的背景高度增加約100（這個步驟主要針對有邊框的div背景，可選）

由于篇幅所限，不再展開描述其它頁面或者功能板塊，有關(guān)Axure操作的的內(nèi)容結(jié)束。

11. 對Behance網(wǎng)站的評價

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

因此，這種停留在界面展示的原型，還有很多提升空間。假如成本允許，通過前端和后端的開發(fā)建立一個真實可運行的demo, 那樣的原型在功能完成度上都有優(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’lu

本文原型內(nèi)引用的有關(guān)作品來源于Behance官網(wǎng)，僅供學(xué)習(xí)之用。創(chuàng)作者、作品等名稱等為隨機選取，并非真實。有關(guān)作品的版權(quán)歸屬于Behance創(chuàng)作者。

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

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