编写引言：Behance网址是为技术专业艺术大师、以造型艺术维持生计或是将造型艺术做为一个十分严肃认真喜好的人而创建的。在Behance上，客户能够依据喜好、技术专业水准或是已经一起做的新项目来创建微信朋友圈或合作方圈，是一个能与艺术大师和室内设计师共享你的工作经验和专业知识而且得到技术专业意见反馈的地区。此外，Behance在人机交互上实际上也是有非常值得大家参考的地区。

编写引言：Behance网址是为技术专业艺术大师、以造型艺术维持生计或是将造型艺术做为一个十分严肃认真喜好的人而创建的。在Behance上，客户能够依据喜好、技术专业水准或是已经一起做的新项目来创建微信朋友圈或合作方圈，是一个能与艺术大师和室内设计师共享你的工作经验和专业知识而且得到技术专业意见反馈的地区。此外，Behance在人机交互上实际上也是有非常值得大家参考的地区。

假如为室内设计师强烈推荐一个网站，哪一个最非常值得强烈推荐呢？

想来很多人都是会提及Behance，因为它是Photoshop手机软件隶属企业Adobe集团旗下的服务平台，知名度当然不低。实际上除开知名度，Behance网址在人机交互上面有许多非常值得讨论的地区。

1. 基本上叙述 1.1 情况

Behance为什么非常值得强烈推荐？

Behance是一个网站设计和小区，聚集了很多的高品质原创作品。在2012年，它被Adobe以1.五亿美金收益手下。

回收Behance是Adobe处心积虑改革创新的代表，在Adobe扩大的全过程中，Behance盈利性和社交媒体特性都持续加强。

为融入新的发展趋向，网址也持续开展重做，持续添加新作用，并尝试融合Creative Cloud服务项目。

实践经验证明它是很取得成功的：回收Behance十年时间内，Adobe企业股票价格从约$30涨到如今的约$380，上涨幅度超出10倍。股票价格一路标红，总市值年年飙升。

该网址均值客户停留時间超出六分钟，足够证实服务平台內容对客户的诱惑力。

这非常大水平上是由于Behance并不是一个一般的网站设计，它或是一个社交网络平台、資源代管网站与分享平台。它变成了一个为本人原创者、商业服务企业打造出的岗位关联互联网。

为了更好地探索Behance取得成功的缘故，将它的网址再次“设计方案”一遍好像是一个非常好的学习过程。小编应用Axure手机软件，共享一些Behance在互动作用上的完成方式。

但是必须留意的是，这只是是一个尝试重置特性的设计方案，因此没法考虑周全，一些版块和关键点将被忽视。

1.2 原形总体实际效果浏览

倘若你无法打开Behance网址，没事儿，这儿是应用Axure重置以后的表明实际效果（文中全部gif动态图为原形制做进行后录制屏幕的实际效果，不然可能开展照片备注名称）。

Behance的导航栏菜单都收纳整理在了网页页面顶端，从左至右先后是：知名品牌logo、网页链接文本、检索、邮箱、通告、用户头像、apps运用结合等。

导航栏菜单秩序井然，不但是主页，在每一个网页页面客户都能够浏览到这一固定不动的导航栏菜单，不会迷途。顶端导航栏的占有室内空间小，给下边的內容行为主体空出了非常大的主题活动室内空间，客户能够很轻轻松松的被设计产品吸引住。

我们可以将总体的网址分成好多个网页页面：

• 初次浏览页（未登录）
• 为您展现（已登陆）
• 发觉
• 即时（直播间）
• 岗位
• 检索等

关键作用包括：

• 內容展现与强烈推荐
• 內容提交编写
• 检索內容
• 用户注册
• 求职招聘
• 用户评价与关心等。

下边是在浏览主页的时候会碰到的一些作用互动：

2.1 時间等候与弹出来实际效果

在初次加载主页时，历经约3秒，会由下往上弹出来用户注册框，这类实际效果在Axure中实际操作非常简单。

1. 将申请注册弹窗设定为动态面板并掩藏；
2. 为该动态面板加上show/hide事情，挑选show表明，动漫为往上划到；
3. 加上wait等候事情，時间3.5s；
4. 挑选“bring to front”能够将动态面板置放在最高层；
5. 完成对话框尺寸转变 时，弹出来的控制面板维持相对性电脑浏览器的右下方部位。需选中枪出的动态面板，挑选“Pin to browser”, 部位设定为水准居右，竖直居底端，并选定“Keep in front (browser only)”。

温馨提醒：元件总体目标为This时，指的是本元件，This能够确保在本元件变更名称时事情互动仍合理。

2.2 标识符分辨与即时意见反馈

进到Behance建立帐户时必须对登陆密码文本域开展多种标准管束，而且在客户输入支付密码时，必须即时反馈机制。

在Axure中必须开展以下的设定：

1. 为登陆密码文本框加上一个Text Changed（文本更改时）的事情，只需客户键入标识符便会开启下边的标准意见反馈信息内容，给Text Changed设定好几个case（标准，又称作测试用例）开展分辨；
2. 意见反馈信息内容：新创建文本并变换为动态面板，包括2个情况即键入合乎和不符。同样，有多少必须充分考虑的标准分辨就新创建多少个动态面板；
3. 用the length of widget value来分辨字符串数组的长短；
4. 分辨英文大写和小写字母，应用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中怎样完成这类实际效果？

以上文上述，动态面板创建2个情况就可以，可是情况变换很慢。

在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中：

1. 即将更改的文本元件设定为动态面板，起名叫“目标语言”，情况一里边的文本元件取名为“表明语言表达”，即电脑鼠标未选定的情况；情况二里边的文本元件为“表明语言表达-白”，即鼠标单击转变 的情况。
2. 将目录中的每一个独立的语言表达文本元件各自取名为English，日本语等。
3. 为每一个语言表达文本元件各自加上鼠标点击事情，挑选Set Text（设定文本），将“目标语言”动态面板下的2个情况的文本元件，各自和目录语言表达元件文本关联，完成文本点一下时同歩变更。

这儿只需采用Set Text 设定文本，先后实际操作就可以。Set Text 能够将总体目标元件的文本更改成本身元件的文本，作用好用。例如仿真模拟会员注册快速登录表明登录名时能够采用这一方式。

留意：假如要完成2个文本变更随意一个，此外一个随着同歩变更，必须给2个文本元件都应用Set Text。例如输入支付密码，不管表明/掩藏，键入都能够同歩变更。

4. 发觉页

它是用Axure制做最费劲的一个网页页面：

4.1 原素上下翻转

在Behance的发觉网页页面下，依照手机软件类型、行业分类等开展了著作归类。

客户能够上下转换著作超出10个归类菜单（小正方形），方式是点一下各自坐落于网页页面最左边和最右边的三角箭头符号，完成菜单按序上下往返转换，还可以不点一下箭头符号，随意点一下一个菜单，下边展现该版块的內容。

4.1.1 必须完成的作用

1. 点一下能够按顺序翻转菜单，上下点一下均必须适用。
2. 点一下菜单后，该菜单翻转至垂直居中，并在下边展现该版块內容。
3. 随意情况下点一下随意菜单，能全自动挪动该菜单至垂直居中部位。

4.1.2 完成构思：动态面板 繁杂的标准分辨

1. 加上动态面板A：将11个小正方形的菜单等间距排列后置放在其中；另外加上2个往左边和向右的箭头用以加上鼠标单击事情。留意动态面板的总总宽、菜单的总宽、菜单间隔，便于设定后边的偏移间距。
2. 动态面板A必须设定共10个情况（依据具体有的菜单总数决策，Behance官方网站的总数远远地不仅10个，这儿开展了简单化），每一个情况中各自设定单一菜单被选定且其他菜单未选定就可以。*情况取名时可采用从负5到0再到5开展。如state0意味着默认设置的“著作优选菜单”，往左边为state-1, 往右边为state1。
3. 增加一个动态面板B，总总宽为网页页面总宽（如1600），把动态面板A放入B中，完成剪裁实际效果。那样，不管控制面板A如何上下偏移，它都是在控制面板B之中。
4. 给动态面板里边的左箭头加上鼠标单击指令，挑选Move（挪动）事情，这儿设定的主要参数是x轴挪动210 (即菜单总宽 间隔），y轴挪动0。
5. 点一下箭头符号还会继续开启下边的內容版块多内內容变更：

4.1.3 动态面板

含著作细分化标识、免费下载/关心按键，该控制面板默认设置掩藏。

• 大文章标题：Set Text 同歩变更文本。
• 副标题：Set Text 同歩变更文本。

为点一下左箭头增加case标准分辨，当动态面板A情况为state0时，挪动动态面板B，表明动态面板C， 设定变更大文章标题和副标题的文本。依照此实际操作，各自为10个情况开展标准分辨，右箭头的实际操作与左箭头实际操作同样。

实际操作时，存有內容连动和多种多样标准分辨。就算在简单化了菜单总数的状况下，为完成实际效果依然比较费时费力。

如果在实际开发中，可以采用两三个元件展示出效果并和开发者沟通，以避免不必要的成本。

4.2 一个按钮三个功能

网站上有一个按钮，用户可以点击“关注xxx”，关注后按钮文字变成“正在关注xxx”，当鼠标移入按钮，文字显示为“取消关注xxx”且按钮背景为红色。

实现方法：在一个动态面板中添加3个状态，分别为关注、正在关注、取消关注。添加鼠标点击事件，增加状态的条件判断即可。

5. 实时（直播）页

我们可以在该页面看到各种直播活动和直播视频回放，Behance官方和不同类型的创作者合作，带来了许多免费的教程。

用户既可以学习（白票），创作者还可以分享自己的观点和创作技能，获得关注，提升商业价值，同时这也成为Behance官方打造一个出色的艺术设计社区的重要方式。

在这个页面下，直播的视频有多个不同的划分，每个分类下的视频可以点击后左右滚动。

这里可以使用Axure的Repeater (中继器)功能，一旦做好第一个分类，其它的只要复制一下再更改数据即可。

5.1 中继器：复制你，还可不同于你

1）新建一个动态面板A，实现裁切效果，保证所有内容都在A的范围内。

2）在面板A内部新建一个动态面板B，放入一个箭头和中继器。

这样无论面板B的内容如何左右滚动，始终在面板A中。

3）在动态面板B里面的中继器中，新增7个元件。

分别取名：rr-thumbnail（视频封面），rr-title（视频标题），rr-avatar（直播者头像），rr-name（直播者名字）, rr-time（直播日期）, rr-hour（视频时长）, rr- softwareicon（软件图标）, rr-view（观看数量）。*只要英文，忽略括号内的中文，前缀rr-只是为了好区分而使用。

4）在动态面板B里面的中继器中，命名列属性。

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

接着在每个列属性下方新增参数，点击右键倒入图片或者直接输入文字，这需要一一对应。

比如：添加第一个直播的内容为：视频封面倒入一张，大标题为“hello designer”，作者为“adobe官方”，观看时长1小时20分，观看次数7000次，日期为2年10月30日。

5）重要的一步，绑定数据。

为中继器增加item loaded命令，使用Set Text和Set Image来绑定数据。

绑定大标题：选择Set Text 设置文本事件，目标为rr-title,设置为text，值为[[Item.title]]。这里的item代指的是中继器里面数据库。

绑定视频封面：选择set image设置图像事件, 目标为rr-thumbnail，默认值value为[[Item.thumbnail]]。其它的绑定用户头像、观看次数等，原理相同。

6）计算好每个视频封面占用的宽度和间隔宽度。

7）为箭头添加鼠标点击命令，选择Move移动事件，目标为动态面板B，设置好移动的距离。

当遇到可以通过单纯的复制来实现大面积布局且需要单独更改数据的时候，可以采用中继器，以提升效率。

Axure的中继器相当于一个数据库，由自己添加不同类型的数据，这些数据都有一个不同的ID，新增的元件经过与该ID绑定（即item.id名字），主要使用Set Text和Set Image来传输数据。最后展示出来。中继器除了增加，还有删除、查找、排序等功能。

6. 个人资料页

Behance是一个社区，因此每个人都可以拥有自己的主页，别人可以查看你的作品，关注你。

而自己在主页中，可以查看自己的作品、为他人好评的作品集合，还可以编辑草稿，前往专门的页面创建作品。

登录后我们可以设置个人资料，这里就涉及到了状态读取和数据回传。

在Axure中需要使用动态面板嵌套和多重条件判断来实现。由于关联较多，因此需要考虑周全。

6.1 状态回传

在页面右下角，有一个悬浮按钮，点击可以弹出“个人资料清单”面板，要关闭这一面板只需要再次点击按钮或者选择面板内部的“不再显示此项”。

面板内部包含4个独立的资料类别，每个类别包含两种状态：

1. 已完成
2. 未完成

采用了单选框的形式来设计。

1. 分别将4个资料类别设置成动态面板，包含选中和未选中两种状态。全部类别作为一个整体的组合。默认隐藏；
2. 新增一个按钮为动态面板，包含两个状态，即可打开时和需收起时，有图标差异；
3. 为按钮添加单击事件，选择show/hide 中的显示面板，动画为向上划出，实现单击按钮后资料面板向上弹出。此时增加条件判断使得按钮可以关闭面板，操作较为简单；
4. 点击面板内部的类别，再次弹出操作面板，判断输入有效性，若“保存”则更改本类别的状态为已选中，选“取消”则是未选中。点击保存或取消或点击“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 实现过程

1. 设置左侧菜单为动态面板，包含7个状态，每个状态单机选中时带蓝色指示器；
2. 计算好右侧内容每个区域的高度、间隔；
3. 为页面创建window scrolled (窗口滚动) 事件，若窗口滚动至指定的距离或范围，左侧的动态面板要切换到对应的状态。这里需要增加7个case条件判断，距离范围会根据右侧的内容区域高度不同而不同。设置为整数方便计算和对齐；
4. 增加7个热区元件当作锚点定位器，放在页面最左侧的位置，锚点要分别命名如anchor1,anchor2…anchor7；
5. 在动态面板内部，分别对每个状态添加鼠标单击事件，单击时选择 scroll to widget (滚动至元件) 命令，目标为锚点（anchor1…anchor7）, 方向为垂直。

在账户连接中，可以通过添加链接的方式绑定自己的社交媒体账户。

在Axure中，需要实现基本的文本非空判断、动态面板状态判断实现同一按钮不同功能。此外，需要允许社交媒体账号列表能拖动排序。

7.2.1 基本思路

使列表可选中并拖动至目标范围，其它列表相应上下移动一定距离。

7.2.2 主要功能

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

命令：切换动态面板状态、Move。

7.2.3 步骤

1. 新建一个Twitter动态面板，包含两个状态：1）默认的未选中状态，带阴影；2）被选中的状态。
2. 同上，新增其它三个动态面板，Facebook, YouTube, Instagram。上下排列四个列表。
3. 为Twitter面板添加交互事件：鼠标悬浮时切换为面板状态2（选中状态），鼠标移出时切换为状态1。
4. 再添加Dragged被拖动事件，执行Move移动命令，目标为This即本动态面板，移动参数为With Drag即移动距离为拖动距离。
5. 最后，再添加Dragged Dropped拖动释放事件，这里需要进行三个case用例判断，分别是本面板的区域覆盖到了Facebook, YouTube, Instagram上，分别要执行更换面板状态，移动本面板及其它的面板。实现拖动Twitter时可以自动排序。区域是否覆盖的判断逻辑是if area of This(本元件) is over area of widget B（目标元件）。
6. 同理，为其它三个动态面板采用相同的方式即可，用例判断较多。

只要列表中要拖动的动态面板越多，操作步骤和判断就越多。实际上还可以用中继器来实现拖动排序，不过这里不再展开。

7.3 模拟上传图片并显示进度条

在Behance网站上，允许更换头像。只需点击“替换头像”或者圆形头像，会打开上传本地图片文件面板（背景是全屏90%黑），选中图像文件，再弹出图像裁切面板（背景是全屏90%黑）。

由于涉及多个面板和按钮，因此会经常用到 show/hide （显示/隐藏）来显示或关闭面板和元件，只要做好判断，操作并不复杂，其中一处是显示裁剪图片的进度条。

方法：

1. 新建圆角矩形A元件当作背景，大小w300 x h18；
2. 新建圆角矩形B元件，大小为w25 x h18；
3. 鼠标单击事件的时候，为B元件添加set size设置大小命令，选择变化后的长度为300，起点为左中位置，设置延续时间约3秒。由于是固定长度的进度条，因此制作较为简单。

优秀的创作者乐于上传自己的作品进行展示，Behance将称之为创建项目。

从顶部的导航菜单到个人资料页，都提供了创建项目的入口。蓝色的文字按钮和醒目的Div，无不提醒着用户——快上传你的作品啊。

在上传编辑页面中，支持本地文件上传、添加文本和嵌入媒体（比如YouTube视频）,还能调整布局。

页面主要框架是：

• 上方左侧的步骤指示（1.内容，2.封面，3.设置），右侧是操作按钮组（预览，保存，继续）；
• 下方左侧为固定的编辑菜单，右侧为可滑动和动态调整高度的内容主体区域。

这里，相当于要考虑4个区域的相互关系，有动态面板嵌套，因此大量的case条件判断不可避免。

为了模拟出用户上传文件到编辑发布的流程，在Axure中进行了以下主要的操作：

1. 右侧区域默认主体设置为动态面板A，包含至少5个状态。
2. 单击“上传文件菜单”，弹出上传文件窗口，这里同样有90%黑色背景，考虑好保存和取消的按钮操作即可。
3. 单击“添加文本”，右侧内容区域Div同步动态向下扩大高度，同时文本框要支持编辑和删除。因此这里需要使用中继器。

用户添加的文本是可以编辑和删除的，这除了中继器，没有更好的办法了。

在主体动态面板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 基本要求

1. 单击减号图标“—”图片缩小，单击加号“+”图片放大。
2. 向左拖动指示条圆点按钮，图片缩小，向右则图片放大。
3. 单击减号和加号图标时下方的指示条要动态变化。

8.3.2 基本步骤

1. 添加封面图片取名为F，即要对它进行放大和缩小。
2. 新建一个动态面板G为指示条，包含条形背景（bar-bg）、可左右伸缩的小矩形进度条（bar-progress）、可操作的圆点（bar-button）。
3. 新建减号元件，添加鼠标单击事件，选择命令set size，目标为图片F，参数置宽度[[LVAR2.width/1.02]]，高度[[LVAR3.height/1.02]]（这里的LVAR3就是元件图片H），锚点为中心。
4. 新建加号元件，操作同减号元件，不过set size时参数不同，变化为宽度[[LVAR2.width*1.02]]，高度[[LVAR3.height*1.02]]，实现单击加号便放大图片。
5. 拖动放大图片：在动态面板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轴坐标+元件宽度。如果不设置边界，那么可以在屏幕宽度内随意拖动。
6. 设置进度条效果：在Dragged拖动事件下，选择set size，目标为bar-progress进度条矩形元件，锚点为左居中，高度为4，宽度为变量[[TotalDragX+LVAR1.width]]，（这里的本地变量LVAR1是bar-button）, 即表示，进度条的变化宽度为拖动距离+圆点的宽度。
7. 最后，在对减号和加号进行单击事件时，还可以改变进度条，进行同步改变，这里为了简化没有进行操作。

Behance为商业公司和创作者提供了招聘服务，在这里可以筛选众多的招聘岗位，选中心仪的职位进行应聘。

特点：

• 岗位数量多
• 可筛选岗位
• 可点击操作菜单应聘

为了实现这样的效果，需要利用中继器来创建全部的岗位信息，并允许筛选操作。

9.1 中继器创建职位列表

先用Axure的中继器模拟一些职位数据：

1. 新建一个中继器，添加多个元件并分别命名。元件分别包含公司logo, 公司名字，城市，国家，职位标题，职位描述，职位类型，发布时间，以及一个默认隐藏的弹出面板用于点击应聘等操作。
2. 为中继器设置数据ID，如pic, company, city, country, job等，一一对应并补充数据。
3. 分别绑定ID和元件。即Item Loaded事件时选择Set Text 和 set image进行操作。

创建好了职位列表之后，可以进行查看职位信息。

9.2 中继器筛选

中继器的筛选主要依赖Add Filter（添加过滤器）命令进行。

9.2.1 筛选职位的方式

1. 按照职位类型筛选：全职、自由职业者、实习；
2. 按照区域筛选：选择国家，行政区，城市嵌套筛选。（需要的操作最多）；
3. 按照创意领域筛选：如web设计、交互设计、图形设计、插图等约20个类别。

按职位类型和创意领域的筛选，在Axure中操作较为简单。

例如：筛选全职的是职位时，步骤为：为“全职”文本框添加鼠标单击事件，选择中继器的功能Add Filter，目标选中为此中继器（提前命名好），过滤条件中规则为[[item.type == ‘全职’]]，并勾选Remove other filters，即表示用户单击“全职”时，触发中继器的过滤功能，只显示类型等于“全职”的数据。

比较复杂的是按区域筛选的操作：

9.2.2 主要步骤

1. 点击上方菜单“全球”，下方弹出筛选面板，其中包含国家、行政区、城市等的下拉框，下拉框包含列表数据，同时包括两个操作按钮：应用、删除；
2. 在为按钮“应用”添加单击事件后，需要多个case条件判断，保证不同国家、行政区的组合时能执行相应的过滤器筛选。

如何自动截取公司名称的首字母作为logo？

• 将公司名称文本元件取名为A；
• 添加一个新文本元件B；
• 在触发事件时选择Set Text 改变文本，目标为文本B, 变化值为[[LVAR1.charAt(0)]]，这里的LVAR1变量指向的是文本元件A。

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

9.4 批量随机颜色

假如发布职位的公司未上传logo，那么系统将自动截取公司名称首字符，并选用随机颜色的背景颜色。

这如何实现？

基本思路：在动态面板中增加不同颜色作为多个状态，利用随机函数抽取一个数字，当匹配时便转换到该颜色状态下。

1. 新建一个圆形元件并转换为动态面板Y，添加多个状态（如10个），每个状态都包含不同的颜色。基BCDE顺序对状态进行命名，如state1, stateA等。
2. 新建一个文本元件X（默认隐藏），值BCDE。
3. 在单击触发事件时，选择切换动态面板Y的状态，值为[[LVAR1.charAt((Math.random*15).toFixed(0))]]，这里的变量LVAR1为文本X。表示单击时将会从文本中通过随机函数Math.random 随机选择一个值，当值和动态面板的状态吻合时切换至该状态，从而实现改变颜色。由于是随机的，因此颜色每次都为随机颜色。

可在中继器中进行随机函数的使用，通过配合Fire Event事件触发，可实现批量的随机颜色效果（比如红绿灯、霓虹灯效果）。

10. 作品详情页

当我们点击打开作品，可以进入详情页面，这里有创作者信息，全部的作品展示，作为注册用户还可以进行评论和互动。

10.1 固定侧边工具栏

新建一个动态面板，里面包含已经设置好的元件和交互事件。点击Pin to Browser, 将动态面板设置为右侧固定。

10.2 同步改变状态、同步加一减一

用户可以对作品进行点赞，并显示总的点赞数量；当取消点赞时，数量也随之减去1。

这里涉及三个部分的联动变化：

1. 居中点赞按钮
2. 工具栏点赞按钮
3. 下方点赞总数

在点赞按钮中，每次点赞或取消赞，按钮里都会显示点赞的数量。此外，当鼠标移入工具栏点赞按钮上，会在其左侧弹出文本“给Ta点赞”或“不欣赏”。

因此最终涉及的是三个部分、七处变化：

不过具体操作相对简单，主要步骤：

1. 按钮、弹出文本等均为动态面板，包含两个状态。当触发事件时进行切换，并进行case条件判断；
2. 利用Set Text 设置文本来传递点赞总数，使得两个按钮内的文本都能获得相同的数值；
3. 点赞数值加1和减1: 创建一个本地变量LVAR1(等于元件“点赞总数”)，按钮内的文本经过Set Text后的值为 [[LVAR1.text+1]]或[[LVAR1.text-1]]。

用户对作品进行评论后，此条评论将出现在评论区的最上方。同时，用户可以点击删除该条评论。

在Axure中，需要实现几个功能：

1. 新增一条评论
2. 为评论排序（最新的评论置顶）
3. 删除评论

显然，这需要用到中继器，主要实现方法：

1. 新建评论框、发表评论按钮、默认隐藏的提示文本“请输入评论文本”。
2. 给发表评论按钮添加鼠标单击事件，进行评论框字符非空判断，并相应显示或隐藏提示文本。
3. 在下方新建一个中继器作为评论显示列表。
4. 中继器内部的组件包含元件：头像图片、用户名文本、发布时间文本、评论内容文本、删除图标（默认隐藏）、Fire Event事件按钮（默认隐藏）、排序id文本（类型为数字，默认隐藏，此id是为了进行评论的排序）。分别对每个元件进行命名。
5. 中继器系统的ID分别设置为：avatar, name, comment, time, id。在Item Loaded事件下，利用set image和Set Text让中继器内部的组件和系统ID进行一一绑定。
6. 新增一条评论：为按钮“发表评论”添加鼠标单击事件，在评论框非空的case条件下，选中命令Add Rows，输入添加需要包含的数据类型（倒入头像、输入名字、comment需要通过本地变量绑定评论框文本、排序id通过本地变量设置为[[LVARA-1]]，LVARA为中继器内部组件 “排序id”文本元件，这里保证新增评论的排序id自动在上一条的基础上减去1，这是后面评论排序的依据）。
7. 进行评论排序：选择Add Sort 新增排序，目标为中继器，column类别选为“id”，而排序规则Sort As选择数字Number, 排序的顺序Order为升序Ascending。
8. 添加wait等待200ms。
9. 在中继器里面，事先对按钮添加鼠标单击事件，进行case条件判断进行显示或者隐藏同在中继器的“删除图标”，这样做的目的是保证只有当前用户输入的评论才会有删除图标，而其它已评论用户没有。

   条件1: 当中继器里面的组件“用户名”文本值= Donald Trump(假设以该名字新发表一条评论)，则显示删除图标。

   条件2: 否则（即else if true）隐藏删除图标。

10. 在wait命令之后，接着添加Fire Event命令，目标为中继器内部组件的按钮“Fire Event”，选择的执行事件为Click or Tap。这样实现了触发显示/隐藏删除图标的事件。
11. 通过Set Text将评论框的值设置为空值（“”），即表示当发表完一条新评论后，原油评论框内容要清空。
12. 通过set size命令将评论区的背景高度增加约100（这个步骤主要针对有边框的div背景，可选）

条件1: 当中继器里面的组件“用户名”文本值= Donald Trump(假设以该名字新发表一条评论)，则显示删除图标。

条件2: 否则（即else if true）隐藏删除图标。

由于篇幅所限，不再展开描述其它页面或者功能板块，有关Axure操作的的内容结束。

11. 对Behance网站的评价

虽然对Behance网站进行了“重新制作”，但是还有很多页面细节没有完善，省略了一些步骤。大部分的数据也仅限于通过模拟进行展示，无法真实地还原网站功能。

因此，这种停留在界面展示的原型，还有很多提升空间。假如成本允许，通过前端和后端的开发建立一个真实可运行的demo, 那样的原型在功能完成度上都有优势。

以下是对Behance网站的简单评价。

11.1 令人愉悦之处

• 导航菜单直观、简洁、分类明确；
• 配色风格统一，简洁自然，即便展示大量不同类型的作品依旧不会眼花缭乱；
• 网页布局以作品为中心；
• 出色的信息传递和反馈。

• 创建项目时的编辑页面过于“死板”，如果换成定制的富文本编辑器或许更好；
• 个人资料页面和编辑个人资料页面部分操作过多，期待统一整合到一个页面；
• 招聘页面宫格式板块布局导致职位像“复制”一样，极易引起视觉疲劳，无法找到重点。建议调整成大小有别、依次排序的布局，并且做好不同职位类型的分区展示，加入热门职位、知名招聘方的推荐专区；
• 糟糕的accessibility (这个问题似乎难以解决)。

本文原型内引用的有关作品来源于Behance官网，仅供学习之用。创作者、作品等名称等为随机选取，并非真实。有关作品的版权归属于Behance创作者。

本文由 @STARMAN 原创发布于人人都是产品经理，未经作者许可，禁止转载

题图来自Unsplash，基于CC0协议