如何用Axure還原Behance網(wǎng)站?原型制作步驟分解

STARMAN
6 評(píng)論 7312 瀏覽 39 收藏 53 分鐘
🔗 产品经理的职业发展路径主要有四个方向:专业线、管理线、项目线和自主创业。管理线是指转向管理岗位,带一个团队..

編輯導(dǎo)語(yǔ):Behance網(wǎng)站是為專業(yè)藝術(shù)家、以藝術(shù)謀生或者將藝術(shù)作為一個(gè)非常嚴(yán)肅愛好的人而建立的。在Behance上,用戶可以根據(jù)愛好、專業(yè)水平或者正在一起做的項(xiàng)目來建立朋友圈或合作伙伴圈,是一個(gè)能與藝術(shù)家和設(shè)計(jì)師分享你的經(jīng)驗(yàn)和知識(shí)并且獲得專業(yè)反饋的地方。除此之外,Behance在交互設(shè)計(jì)上其實(shí)也有值得我們借鑒的地方。

如果為設(shè)計(jì)師推薦一個(gè)網(wǎng)站,哪一個(gè)最值得推薦呢?

想必很多人都會(huì)提到Behance,因?yàn)樗荘hotoshop軟件所屬公司Adobe旗下的平臺(tái),名氣自然不低。其實(shí)除了名氣,Behance網(wǎng)站在交互設(shè)計(jì)上有很多值得探討的地方。

1. 基本描述

1.1 背景

Behance為何值得推薦?

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

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

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

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

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

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

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

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

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

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

Behance的導(dǎo)航菜單都收納在了頁(yè)面頂部,從左至右依次是:品牌logo、超鏈接文字、搜索、信箱、通知、用戶頭像、apps應(yīng)用集合等。

導(dǎo)航菜單井然有序,不僅是首頁(yè),在每個(gè)頁(yè)面用戶都可以訪問到這個(gè)固定的導(dǎo)航菜單,不至于迷失。頂部導(dǎo)航的占用空間小,給下面的內(nèi)容主體留出了很大的活動(dòng)空間,用戶可以很輕松地被設(shè)計(jì)作品吸引。

我們可以將整體的網(wǎng)站分為幾個(gè)頁(yè)面:

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

主要功能包含:

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

2. 首頁(yè)

下面是在訪問首頁(yè)時(shí)會(huì)遇到的一些功能交互:

2.1 時(shí)間等待與彈出效果

在首次載入首頁(yè)時(shí),經(jīng)過約3秒,會(huì)由下往上彈出登錄注冊(cè)框,這種效果在Axure中操作比較簡(jiǎn)單。

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

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

2.2 字符判斷與實(shí)時(shí)反饋

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

在Axure中需要進(jìn)行如下的設(shè)置:

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

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

2.3 即時(shí)的狀態(tài)轉(zhuǎn)換:沒必要一直用動(dòng)態(tài)面板

在該Behance的網(wǎng)站上,文字在被鼠標(biāo)移入時(shí),字體顏色會(huì)從低透明度變?yōu)榧儼咨?,我們可以快速區(qū)分導(dǎo)航板塊,并在操作前后清晰地看到即時(shí)的變化。

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

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

  • 按鈕自帶的樣式效果(Style Effects)非常實(shí)用:MouseOver(鼠標(biāo)懸?。ouseDown、Selected、Disabled、Focused等,可以減少對(duì)動(dòng)態(tài)面板的依賴。
  • 默認(rèn)的元件如標(biāo)題、段落、文本等都有樣式效果。用起來能提升效率。

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

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

3.1 圖片變暗小竅門

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

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

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

那么,在Axure中如何實(shí)現(xiàn)這種效果?

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

在Axure中采用的方式是:

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

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

3.2 動(dòng)態(tài)面板,Of Course I Still Love You

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

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

Behance 推薦的作品以宮格方式排列,分別包含了作品封面圖、作者(團(tuán)隊(duì))頭像和名字,還有點(diǎn)贊數(shù)和查閱數(shù)。

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

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

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

另外,卻會(huì)遇到一個(gè)比較棘手的問題:如何用最簡(jiǎn)便的方法實(shí)現(xiàn)宮格形式的元素布局?

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

面對(duì)這種布局簡(jiǎn)單但涉及多個(gè)元素的時(shí)候,最原始的辦法是分別每個(gè)放置圖片、文本等元件,一個(gè)一個(gè)地更改。

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

那么有什么方法既可以快速又簡(jiǎn)單?

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

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

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

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

Behance支持多語(yǔ)言,我們?cè)陧?yè)面底部可以更改界面語(yǔ)言。比如點(diǎn)擊English,變成英文界面,下面的菜單文字隨之同步改變。如圖:

這里涉及到一個(gè)簡(jiǎn)單的效果:文本綁定,數(shù)據(jù)同步變化。

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

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

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

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

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

這是用Axure制作最費(fèi)力的一個(gè)頁(yè)面:

4.1 元素左右滾動(dòng)

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

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

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

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

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

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

4.1.3 動(dòng)態(tài)面板

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

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

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

操作時(shí),存在內(nèi)容聯(lián)動(dòng)和多種條件判斷。即便在簡(jiǎn)化了菜單數(shù)量的情況下,為實(shí)現(xiàn)效果依舊比較費(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í)(直播)頁(yè)

我們可以在該頁(yè)面看到各種直播活動(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è)頁(yè)面下,直播的視頻有多個(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í)長(zhǎng)), 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)擊右鍵倒入圖片或者直接輸入文字,這需要一一對(duì)應(yīng)。

比如:添加第一個(gè)直播的內(nèi)容為:視頻封面倒入一張,大標(biāo)題為“hello designer”,作者為“adobe官方”,觀看時(shí)長(zhǎng)1小時(shí)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ù)庫(kù)。

綁定視頻封面:選擇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ù)庫(kù),由自己添加不同類型的數(shù)據(jù),這些數(shù)據(jù)都有一個(gè)不同的ID,新增的元件經(jīng)過與該ID綁定(即item.id名字),主要使用Set Text和Set Image來傳輸數(shù)據(jù)。最后展示出來。中繼器除了增加,還有刪除、查找、排序等功能。

6. 個(gè)人資料頁(yè)

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

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

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

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

6.1 狀態(tài)回傳

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

面板內(nèi)部包含4個(gè)獨(dú)立的資料類別,每個(gè)類別包含兩種狀態(tài):

  1. 已完成
  2. 未完成

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

  1. 分別將4個(gè)資料類別設(shè)置成動(dòng)態(tài)面板,包含選中和未選中兩種狀態(tài)。全部類別作為一個(gè)整體的組合。默認(rèn)隱藏;
  2. 新增一個(gè)按鈕為動(dòng)態(tài)面板,包含兩個(gè)狀態(tài),即可打開時(shí)和需收起時(shí),有圖標(biāo)差異;
  3. 為按鈕添加單擊事件,選擇show/hide 中的顯示面板,動(dòng)畫為向上劃出,實(shí)現(xiàn)單擊按鈕后資料面板向上彈出。此時(shí)增加條件判斷使得按鈕可以關(guān)閉面板,操作較為簡(jiǎn)單;
  4. 點(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屬性來判斷文本的字符長(zhǎng)度,通過多個(gè)條件設(shè)置即可。

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

比如這里的字符需要是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)更換為已選中。

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

7. 編輯個(gè)人資料

點(diǎn)擊頭像可以進(jìn)入專門的頁(yè)面編輯詳細(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)頁(yè)元素是滾動(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)固定的距離,對(duì)應(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)過程

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

7.2 列表拖動(dòng)排序

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

在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 步驟

  1. 新建一個(gè)Twitter動(dòng)態(tài)面板,包含兩個(gè)狀態(tài):1)默認(rèn)的未選中狀態(tài),帶陰影;2)被選中的狀態(tài)。
  2. 同上,新增其它三個(gè)動(dòng)態(tài)面板,F(xiàn)acebook, YouTube, Instagram。上下排列四個(gè)列表。
  3. 為Twitter面板添加交互事件:鼠標(biāo)懸浮時(shí)切換為面板狀態(tài)2(選中狀態(tài)),鼠標(biāo)移出時(shí)切換為狀態(tài)1。
  4. 再添加Dragged被拖動(dòng)事件,執(zhí)行Move移動(dòng)命令,目標(biāo)為This即本動(dòng)態(tài)面板,移動(dòng)參數(shù)為With Drag即移動(dòng)距離為拖動(dòng)距離。
  5. 最后,再添加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)元件)。
  6. 同理,為其它三個(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%黑),選中圖像文件,再?gòu)棾鰣D像裁切面板(背景是全屏90%黑)。

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

方法:

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

8. 創(chuàng)建項(xiàng)目頁(yè)

優(yōu)秀的創(chuàng)作者樂于上傳自己的作品進(jìn)行展示,Behance將稱之為創(chuàng)建項(xiàng)目。

從頂部的導(dǎo)航菜單到個(gè)人資料頁(yè),都提供了創(chuàng)建項(xiàng)目的入口。藍(lán)色的文字按鈕和醒目的Div,無不提醒著用戶——快上傳你的作品啊。

在上傳編輯頁(yè)面中,支持本地文件上傳、添加文本和嵌入媒體(比如YouTube視頻),還能調(diào)整布局。

頁(yè)面主要框架是:

  • 上方左側(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)行了以下主要的操作:

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

8.1 中繼器增加和刪除

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

在主體動(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 圖片放大縮小:?jiǎn)螕艉屯蟿?dòng)

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

8.3.1 基本要求

  1. 單擊減號(hào)圖標(biāo)“—”圖片縮小,單擊加號(hào)“+”圖片放大。
  2. 向左拖動(dòng)指示條圓點(diǎn)按鈕,圖片縮小,向右則圖片放大。
  3. 單擊減號(hào)和加號(hào)圖標(biāo)時(shí)下方的指示條要?jiǎng)討B(tài)變化。

8.3.2 基本步驟

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

9. 職位頁(yè)

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ù):

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

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

9.2 中繼器篩選

中繼器的篩選主要依賴Add Filter(添加過濾器)命令進(jìn)行。

9.2.1 篩選職位的方式

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

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

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

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

9.2.2 主要步驟

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

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

如何自動(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)下。

  1. 新建一個(gè)圓形元件并轉(zhuǎn)換為動(dòng)態(tài)面板Y,添加多個(gè)狀態(tài)(如10個(gè)),每個(gè)狀態(tài)都包含不同的顏色?;?123456789ABCDE順序?qū)顟B(tài)進(jìn)行命名,如state1, stateA等。
  2. 新建一個(gè)文本元件X(默認(rèn)隱藏),值為0123456789ABCDE。
  3. 在單擊觸發(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. 作品詳情頁(yè)

當(dāng)我們點(diǎn)擊打開作品,可以進(jìn)入詳情頁(yè)面,這里有創(chuàng)作者信息,全部的作品展示,作為注冊(cè)用戶還可以進(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)、同步加一減一

用戶可以對(duì)作品進(jìn)行點(diǎn)贊,并顯示總的點(diǎn)贊數(shù)量;當(dāng)取消點(diǎn)贊時(shí),數(shù)量也隨之減去1。

這里涉及三個(gè)部分的聯(lián)動(dòng)變化:

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

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

因此最終涉及的是三個(gè)部分、七處變化:

不過具體操作相對(duì)簡(jiǎn)單,主要步驟:

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

10.3 評(píng)論的增加、排序、刪除

用戶對(duì)作品進(jìn)行評(píng)論后,此條評(píng)論將出現(xiàn)在評(píng)論區(qū)的最上方。同時(shí),用戶可以點(diǎn)擊刪除該條評(píng)論。

在Axure中,需要實(shí)現(xiàn)幾個(gè)功能:

  1. 新增一條評(píng)論
  2. 為評(píng)論排序(最新的評(píng)論置頂)
  3. 刪除評(píng)論

顯然,這需要用到中繼器,主要實(shí)現(xiàn)方法:

  1. 新建評(píng)論框、發(fā)表評(píng)論按鈕、默認(rèn)隱藏的提示文本“請(qǐng)輸入評(píng)論文本”。
  2. 給發(fā)表評(píng)論按鈕添加鼠標(biāo)單擊事件,進(jìn)行評(píng)論框字符非空判斷,并相應(yīng)顯示或隱藏提示文本。
  3. 在下方新建一個(gè)中繼器作為評(píng)論顯示列表。
  4. 中繼器內(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)論的排序)。分別對(duì)每個(gè)元件進(jìn)行命名。
  5. 中繼器系統(tǒng)的ID分別設(shè)置為:avatar, name, comment, time, id。在Item Loaded事件下,利用set image和Set Text讓中繼器內(nèi)部的組件和系統(tǒng)ID進(jìn)行一一綁定。
  6. 新增一條評(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ù))。
  7. 進(jìn)行評(píng)論排序:選擇Add Sort 新增排序,目標(biāo)為中繼器,column類別選為“id”,而排序規(guī)則Sort As選擇數(shù)字Number, 排序的順序Order為升序Ascending。
  8. 添加wait等待200ms。
  9. 在中繼器里面,事先對(duì)按鈕添加鼠標(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)。
  10. 在wait命令之后,接著添加Fire Event命令,目標(biāo)為中繼器內(nèi)部組件的按鈕“Fire Event”,選擇的執(zhí)行事件為Click or Tap。這樣實(shí)現(xiàn)了觸發(fā)顯示/隱藏刪除圖標(biāo)的事件。
  11. 通過Set Text將評(píng)論框的值設(shè)置為空值(“”),即表示當(dāng)發(fā)表完一條新評(píng)論后,原油評(píng)論框內(nèi)容要清空。
  12. 通過set size命令將評(píng)論區(qū)的背景高度增加約100(這個(gè)步驟主要針對(duì)有邊框的div背景,可選)

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

11. 對(duì)Behance網(wǎng)站的評(píng)價(jià)

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

因此,這種停留在界面展示的原型,還有很多提升空間。假如成本允許,通過前端和后端的開發(fā)建立一個(gè)真實(shí)可運(yùn)行的demo, 那樣的原型在功能完成度上都有優(yōu)勢(shì)。

以下是對(duì)Behance網(wǎng)站的簡(jiǎn)單評(píng)價(jià)。

11.1 令人愉悅之處

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

11.2 令人失望之處

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

12. fu’lu

本文原型內(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 能幫我們做個(gè)behance原型及開發(fā)文檔嗎?

    來自廣東 回復(fù)
  2. 原型預(yù)覽鏈接 可以放到頂部 不然無法圍觀大佬作品

    來自浙江 回復(fù)
  3. Axure認(rèn)證專家,以后可以考慮出個(gè)用Axure直接做網(wǎng)站的教程都綽綽有余了

    來自上海 回復(fù)
  4. 強(qiáng)啊大佬,收藏了

    來自廣東 回復(fù)
  5. 厲害厲害,做得真不錯(cuò)!

    來自四川 回復(fù)
    1. 謝謝。

      來自廣東 回復(fù)