Axure7.0训练——创立属于自我的个人主页

最早起始询问到产品经营、产品助理那样的职务,其实真正是从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啥地方,我直接在考虑怎么让浏览者通晓,那么些模块是足以透过内外浏览切换的。

新兴本人想开,可以做个堆叠的功用,让用户暴发“这叠纸片可以查阅”的想法。

下一场就有了上边的效果。而且,当查看图片后,上面的条数会随着变动。

其一意义是在动态面板模块下,直接用两条矩形框填色后完成。在切换动态面板内容的时候,设置隐藏矩形框和推拉,就可以达到这多少个效用。

除此以外,在必要的地方,我都用鼠标移入提醒做了注明,希望以此可以更好指点用户浏览。

写在最终,至此,这些关系作品就到此截至。尽管小巧,但是希望能以此了然自己的技术,增长见识。