如何用Axure还原Behance网站？原型制作步骤分解

编辑导语：Behance网站是为专业艺术家、以艺术谋生或者将艺术作为一个非常严肃爱好的人而建立的。在Behance上，用户可以根据爱好、专业水平或者正在一起做的项目来建立朋友圈或合作伙伴圈，是一个能与艺术家和设计师分享你的经验和知识并且获得专业反馈的地方。除此之外，Behance在交互设计上其实也有值得我们借鉴的地方。

如果为设计师推荐一个网站，哪一个最值得推荐呢？

想必很多人都会提到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来判断字符串的长度；