编者按:Behance网站是为职业艺术家、以艺术为生或把艺术作为一种非常严肃的爱好的人建立的。在Behance上，用户可以根据自己的爱好、专业水平或共同从事的项目建立朋友圈或合作伙伴，这是一个你可以与艺术家和设计师分享你的经验和知识并获得专业反馈的地方。另外，Behance在交互设计方面也有值得借鉴的地方。

如果给设计师推荐一个网站，最推荐哪个？

想必很多人会提到Behance，因为它是Photoshop软件的公司Adobe旗下的平台，口碑自然不低。事实上，除了名气，Behance网站在交互设计方面还有很多需要探索的地方。

1.基本描述

1.1背景

为什么行为值得推荐？

Behance是一个设计网站和社区，聚集了大量高质量的原创作品。2012年，它归Adobe所有，收入1.5亿美元。

收购Behance是Adobe大张旗鼓改革的象征。在Adobe的扩张过程中，Behance的商业和社会属性不断加强。

为了适应新的发展趋势，网站正在不断修改，增加新的功能，并试图整合创意云服务。

实践证明这是非常成功的:在收购Behance后的十年里，Adobe的股价从30美元左右涨到现在的380美元左右，涨幅超过10倍。股价一路涨红，市值一年比一年涨。

该网站平均用户停留时间超过6分钟，证明平台内容对用户有吸引力。

这很大程度上是因为Behance不是一个普通的设计网站，而是一个社交平台、资源托管网站、分享社区。它已经成为个人创作者和商业公司的专业关系网络。

为了探究Behance成功的原因，重新设计网站似乎是一个很好的学习过程。作者用Axure软件分享了Behance在交互功能中的一些实现方法。

但需要注意的是，这种设计只是一种再现自然的尝试，因此不能涵盖所有方面，有些章节和细节会被忽略。

1.2原型整体效果预览

如果不能访问Behance网站，没关系，这里是用Axure复制后的显示效果(本文所有gif动态图片都是原型制作后屏幕录制的效果，否则会做图片备注)。

Behance的导航菜单存储在页面顶部，从左到右:品牌标志、超链接文本、搜索、邮箱、通知、用户头像、应用程序应用程序集等。

导航菜单井然有序，不仅是首页，每一页都有固定的导航菜单，以免迷路。顶部导航占用空的小空间，为后面的内容主题留出空的大空间，让用户很容易被设计作品所吸引。

我们可以将整个网站分成几个页面:

首次访问页（未登录）为您呈现（已登录）发现实时（直播）职位搜索等

主要功能包括:

内容展示与推荐内容上传编辑搜索内容登录注册招聘求职用户评论与关注等。

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动态面板，我当然还爱你

知名商业航空公司SpaceX空的可回收火箭将停在一艘名为“我当然还爱你”的飞船上，这样火箭就可以稳定的停了。

在Axure中，动态面板就像这艘船一样。游来游去，依然是最爱。

Behance推荐的作品以正方形的方式排列，包括作品的封面图片，作者(团队)的头像和名字，以及喜欢和引用的数量。

不同的是，Behance给这些作品添加了软件标签。当你把鼠标移到封面上，就会出现这部作品中用到的创作软件，比如Adobe自己的illustrator，AdobeXD等。，可以帮助我们快速区分某一领域的作品。

另外，在创作者这一栏，可以是个人，也可以是涉及多个所有者的一种合作形式，这对于创作者的商业合作是非常有利的，我们也可以知道，某个作品背后其实有很多人付出了努力。

至于鼠标在Axure中移动时新标签的实现方法，用动态面板就可以了。

另外，还会有一个棘手的问题:如何用最简单的方法实现元素以正方形的形式布局？

比如Behance推荐的作品默认是一栏四个，从上到下展开，当然要包含创作者等信息。

当这种布局比较简单但是涉及到多个元素的时候，最原始的方式就是把图片、文字等元素分开放置，一个一个的修改。

优点：可以直接更改内容，方便对齐排列和布局。缺点：工作量会很大。

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

最推荐的是repeater(即Repeater，实际上更直接翻译为Replicator，相当于一个支持数据库模拟和绑定的效果元素，其属性可以复制和修改)。

但在行为上，通常只有一个创造者，但有时有多个所有者。因为这里的不同，如果想让网站有复读机的效果，需要更多的时间来绑定数据。

这里用的是原方法，复读机的效果如下图说明。

3.3文字绑定:我会随着你的改变而改变

Behance支持多种语言，我们可以在页面底部更改界面语言。比如点击英文改变英文界面，下面的菜单文字会同步改变。如图:

这里涉及到一个简单的效果:文本绑定，数据同步更改。

因为当鼠标移动和点击时，文本从低透明度(灰白色)变为纯白色，并且三角形上下移动，所以还需要动态面板。在Axure中:

将要改变的文本元件设置为动态面板，取名为“目标语言”，状态一里面的文本元件命名为“显示语言”，即鼠标未选中的状态；状态二里面的文本元件为“显示语言-白”，即鼠标点击变化的状态。将列表中的每个单独的语言文本元件分别命名为English，日本语等。为每个语言文本元件分别添加鼠标单击事件，选择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。点击箭头还会触发下方的内容板块多内内容更改：

4.1.3动态面板

包含作品的分解标签和下载/跟随按钮，默认隐藏。

大标题：Set Text 同步更改文本。小标题：Set Text 同步更改文本。

单击左箭头添加案例条件判断，当动态面板A的状态为状态0时，移动动态面板B，显示动态面板C，设置并更改标题和副标题的文本。根据该操作，分别为10种状态判断条件，右箭头的操作与左箭头的操作相同。

操作时有内容联动，多条件判断。即使简化了菜单的数量，要达到效果还是需要时间和精力的。

在实际开发中，可以使用两三个组件来展示效果，并与开发人员交流，以避免不必要的成本。

4.2一个按钮的三个功能

网站上有个按钮。用户可以点击“跟随xxx”。注意后，按钮文本变为“跟随xxx”。当鼠标移动到按钮中时，文本显示“取消xxx”，按钮背景为红色。

实现方法:在一个动态面板中添加三种状态，即关注、关注和取消关注。添加鼠标点击事件和添加状态的条件判断。

5.实时(实时)页面

我们可以在这个页面上看到各种现场活动和现场视频回放。行为官员与不同的创作者合作，并带来了许多免费教程。

用户不仅可以学习(白票)，创作者也可以分享自己的观点和创作技巧，获得关注，提升商业价值。同时，这也成为Behance打造优秀艺术设计社区的重要途径。

在这个页面下，直播视频分为几个不同的类别，每个类别下的视频都可以点击和左右滚动。

在这里，可以使用Axure的Repeater功能。一旦第一次分类完成，其他人只需要复制然后更改数据。

5.1复读机:复制你，也和你不一样

1)创建一个新的动态面板a以实现切割效果，并确保所有内容都在a的范围内..

2)在面板A里面新建一个动态面板B，放一个箭头和中继器。

这样，不管面板b的内容如何左右滚动，它们总是在面板a中..

3)在动态面板b中向中继器添加7个组件。

它们被命名为rr-缩略图、rr-标题、RR-头像、RR-名称、RR-时间、RR-小时、RR-软件图标和RR-视图*仅英文，忽略括号中的中文，前缀RR-仅用于方便区分。

4)在动态面板b的repeater中，命名列属性。

它们是缩略图、标题、头像、名称、时间、小时、软件图标和视图。

然后在各列属性下添加参数，右键倒图或者直接输入文字，需要一一对应。

比如补充第一次直播的内容:倒一个视频封面，标题是“你好设计师”，作者是“adobe Official”。观看时间1小时20分钟，观看次数7000次。日期是2020年10月30日。

5)重要的一步是绑定数据。

向中继器添加项目加载命令，并使用设置文本和设置图像来绑定数据。

绑定标题:选择设置文本设置文本事件，rr-title为目标，Text为[[Item.title]]的值。这里的项指的是中继器中的数据库。

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

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

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

当通过简单的复制可以实现大面积布局，并且需要独立改变数据时，可以采用中继器来提高效率。

Axure的中继器相当于一个数据库，里面自己添加不同类型的数据，所有的数据都有不同的ID，新添加的组件都绑定到这个ID(即item.id名称)，主要使用Set Text和Set Image来传输数据。最后，拿出来。除了添加中继器，还有删除、搜索、排序等功能。

6.个人数据页面

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

在主页上，可以查看自己的作品，别人称赞的作品集，编辑草稿，到专门的页面创作作品。

登陆后可以设置个人数据，涉及状态读取和数据返回。

在Axure中，需要动态面板嵌套和多条件判断。因为关联多，需要慎重考虑。

6.1状态返回

在页面的右下角，有一个浮动按钮。点击它，弹出“个人数据列表”面板。要关闭此面板，您只需再次单击按钮或在面板中选择“不再显示此项目”。

面板内有4个独立的数据类别，每个类别包含两种状态:

已完成未完成

它是以无线电盒的形式设计的。

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

其中，空文字判断、文字字数限制、实时反馈也在此涉及:

在Axure中，元素的长度属性用于判断文本的字符长度，可以通过多种条件进行设置。

根据输入长度，需要在底部实时反馈提示文本(默认设置为隐藏)，是否输入了足够的长度。

比如这里的字符需要是3-20位数字，那么这个文本框中的文本变更事件的判断条件是:0(空字符)、非0、0-3、3-22、大于22。添加案例条件判断时注意提示文本的显示和隐藏。

同时，在数据列表面板中点击类别后，弹出二级面板，背景颜色为90%黑色，充满整个屏幕，需要进行自适应。

操作方法:将黑色矩形转换成动态面板，设为100%宽(仅限浏览器)，默认隐藏。当打开和关闭外部悬挂按钮，并点击辅助面板上的保存、取消和“X”关闭图标时，应该关联该黑色背景的显示/隐藏状态。

数据列表面板外的操作完成后，需要将状态返回到面板内部。例如，添加横幅后，面板中横幅类别的状态应设置为“已选择”。

这个页面需要考虑多个面板的嵌套，多个同级别的内部和外部动态面板的状态返回，进行条件判断，确保没有逻辑问题。

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的主要功能

事件:鼠标悬停，鼠标退出，拖动，拖放。

命令:切换动态面板状态和移动。

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（目标元件）。同理，为其它三个动态面板采用相同的方式即可，用例判断较多。

只要列表中有更多的动态面板可以拖动，就会有更多的操作步骤和判断。其实也可以用repeaters通过拖拽进行排序，这里不展开。

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

在Behance网站上，可以更改头像。只需点击“替换头像”或圆形头像，上传本地图像文件面板就会打开(背景全屏90%黑)，选择图像文件，然后弹出图像剪切面板(背景全屏90%黑)。

由于涉及许多面板和按钮，显示/隐藏通常用于显示或关闭面板和组件。只要判断不错，操作也不复杂，其中一个就是显示进度条裁剪图片。

方法:

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

8.创建项目页面

优秀的创作者很乐意上传作品展示，Behance会称之为创作项目。

从顶部的导航菜单到配置文件页面，有一个创建项目的入口。蓝色文本按钮和醒目的Div提醒用户——快速上传您的作品。

在上传编辑页面，支持上传本地文件，添加文字和嵌入媒体(如YouTube视频)，调整布局。

页面的主要框架是:

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

这里相当于考虑了四个区域之间的关系，有动态面板嵌套，所以大量的案例条件判断是必然的。

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

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

8.1中继器的添加和删除

用户添加的文本可以编辑和删除。没有比复读机更好的方法了。

主体的动态面板A中的一个状态是添加文本时的状态，嵌入的动态面板B中使用中继器来制作基本元素和显示/隐藏效果。

单击外部添加文本组件，添加鼠标单击事件，并选择添加行以添加新数据。目标是repeater，添加Row时在widget的动态面板b的文本框中插入变量[[lvar1]] = text。这样，点击菜单添加新的文本。

点击“删除文本”组件，在鼠标点击事件上选择“删除行”，目标为复读机，行为This，这是本文新增的数据。

8.2组件高度的动态调整

使用set size命令增加组件的高度，但是在随意添加或删除“添加的文字”时，如何让这个区域达到自适应高度？

在右侧主体动态面板a中，可以添加一个矩形组件h作为背景。添加或删除复读机文字时，面板A和背景H的高度要同步改变。

设置尺寸时，只需要给这个组件增加一定的高度。

比如执行一个事件，设置大小的目标是矩形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复读机筛选

中继器的过滤主要取决于添加过滤器命令。

9.2.1筛选职位的方式

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

在Axure中，按职位类型和创意领域筛选易于操作。

例如，筛选全职工作时，步骤为:在“全职”文本框中添加鼠标点击事件，选择中继器功能“添加过滤器”，选择目标作为该中继器(预先命名)，过滤条件中的规则为[[item . type = = & # 8216；全职& # 8217；]，并勾选移除其他过滤器，这意味着当用户点击“全职”时，中继器的过滤器功能将被触发，并且仅显示类型等于“全职”的数据。

更复杂的是按区域过滤的操作:

9.2.2的主要步骤

点击上方菜单“全球”，下方弹出筛选面板，其中包含国家、行政区、城市等的下拉框，下拉框包含列表数据，同时包括两个操作按钮：应用、删除；在为按钮“应用”添加单击事件后，需要多个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固定侧工具栏

创建一个新的动态面板，其中包含设置组件和交互式事件。单击“固定到浏览器”，将动态面板设置为右侧的固定面板。

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网站的简要评价。

11.1快乐

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

11.2失望

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

12.fu & # 8217镥

本原型引用的相关作品来自Behance官网，仅供学习之用。创作者姓名、作品等。是随机选择的，这不是真的。该作品的版权属于行为创作者。