最早开始了解到产品经理、产品助理这样的职位，其实确实是从Axure开始的。了解到这是一个“画图软件”，感觉和PPT差不多嘛。后来对产品的兴趣越来浓厚，也逐渐自己捣鼓一下它的功能，感觉是个非常好用的软件！在这里尝试用Axure做一个简单的个人主页，以此练习，并记录下了思路和细节。
先放上网址（Axure分享网站真的加载很慢）：http://eu9nm1.axshare.com/#c=2
确定主题
既然是个人主页，所以我想既包含简历内容，再添加一点简历无法体现得东西。所以初步将主页设置为
个人联系方式（最重要嘛~）、教育经历、工作经历、个人能力、练习作品、兴趣爱好（包括经常发布作品所用网址）
等几个板块。
确立风格
本来想做成网页并且用手机操作风格，发现1280*720用网页看的话，一个屏幕很可能装不下！所以折中之后，将界面改小了。然后我希望
整个页面通过左右滑动切换内容，并且可以通过最底部的按钮，快捷进入目标页面。
这样在浏览让更加便捷。如图：
确立风格之后，我们就可以进入下一步啦~！
接下来，进入每个分页面的内容设计。由于初衷就是设想简单练习，并且模拟手机界面，所以每一页只留最少的东西。具体的想法为：
主页：留下姓名、联系方式等。
教育页：加个校徽好了。
个人练习：只放最近的作品。
个人喜好：图+文。
这样的规划之后就开始了最初的页面信息排布啦~！如下图：
主页面动作设计
我觉得Axure7.0的动态面板是一个非常好用的元件。我几乎用动态面板做了三四层的嵌套。对于一个懂得程序语言的人来说，这样的嵌套并不算难。难的是需要用什么表现形式才能将切换体验做好，并且好看。自觉水平有限，所以尽力！
左右滑动效果
我将六个页面都做成主页面的一个动态面板的6个state。并设置逻辑
当在某个页面时，向左切换到它的前一个页面，向右切换到它的下一个页面。
换成C语言就是：
If（this=state2）
{
if（slip direction=left）
this=state3；
if（slip direction=right）
this=state1；
}
就这样，虽然繁琐了点，不过对于6个页面，工作量也不算大。如果工作量大，就要需求更好的优化方法了。这里并没有再深究。如图：
底部按钮动作
我是先上网收集了相关的图标，然后对每个图标进行单独设置的。
其实也很简单，只要在设置单击图标的时候，让动态面板切换到相应的页面就可以了。如图：
页面内容设计
某些页面需要再做效果，用以容纳更多的信息。所以，在每个页面有着更多的操作效果。
工作经历页面
由于工作经历的字数比较多，基本不能按照整体的字体风格装进去。所以我考虑做了个抽屉式的内容展开。
具体功能为：
在正常情况下收起，当要查看时，点击标题就能展开，再次点击能关闭。
如图：
在这里使用了隐藏/显示元件，同时拉动/推动元件。将详细内容做成隐藏，然后在鼠标单击时，交互动作设置为显示，同时推动下方的元件
就能做出抽屉效果。
个人练习页面设计
个人练习中我放了一个竞品分析的ppt。
如何才能让浏览者看到部分内容呢？
我想到了类似相册的tab功能。最后的结果就是上下拉动可以切换ppt页数，但是另一点就是Axure的分享网页打开特别慢，所以我只放了3张ppt，然后做了个外部链接，引导用户自行查看。如图：
这个效果实现也是依靠动态面板。
新建一个动态面板，将三张ppt放在三个不同的state。然后和主页面切换一样设置即可。不同的是左右拖动改成上下拖动。
兴趣爱好页面设计
在这个页面我打算放上几张自己的摄影照片。最好能切换查看，同时还能够大图查看。
所以我的设计思路为：
左右做明显的切换引导，并且单击图片可以放大图片查看。
如图：
这个效果同样依靠动态面板。
切换图片的动态面板命名为“摄影切换”，只要在首页再设置一个动态面板“摄影放大”，并且设置为隐藏。然后设置逻辑为：只要单击“摄影切换”，则根据“摄影切换”当前的图片改动“摄影放大”的状态，同时更改状态为显示。
如图：
细节添加
整个作品到这里其实以及算完成了。不过，
为了引导用户使用产品，我希望做一些细节来进行提示，最好不影响到用户的体验，同时又有效。符合帕累托改善最好了。
主页切换提示
为了引导刚打开页面的用户滑动主页切换，我在主页加载两秒后，做了一个手指动作的引导，如图：
在页面载入的时候做逻辑如下：
在底部图标上，当鼠标移入时，会有阴影效果，我认为这样会产生立体感，增大用户点击的可能。
另外，我找了颜色不同的同样图标，在某个页面时，对应的图标用黑色表示。将当前页面对应的图标黑色版本置顶，其他置于底部即可。如图：
同样的，在工作经历页面，鼠标移入标题之后，颜色变化，同样是为了引导用户点击。相同的效果，还有兴趣爱好的简书、乐乎主页入口，鼠标移入后会有阴影变化。
图片切换效果引导
在竞品分析ppt哪里，我一直在考虑如何让浏览者了解，这个模块是可以通过上下浏览切换的。
后来我想到，可以做个堆叠的效果，让用户产生“这叠纸片可以翻动”的想法。
然后就有了下面的效果。而且，当翻动图片后，下面的条数会跟着变化。
这个效果是在动态面板模块下，直接用两条矩形框填色后完成。在切换动态面板内容的时候，设置隐藏矩形框和推拉，就可以达到这个效果。
另外，在必要的地方，我都用鼠标移入提示做了说明，希望以此可以更好引导用户浏览。
写在结尾，至此，这个联系作品就到此为止。虽然小巧，不过希望能以此熟练自己的技术，增长见识。
