创建属于我的个人主页

作者: 银河网站登录  发布:2019-11-27

最早开始了解到产品经理、产品助理这样的职位,其实确实是从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哪里,我一直在考虑如何让浏览者了解,这个模块是可以通过上下浏览切换的。

后来我想到,可以做个堆叠的效果,让用户产生“这叠纸片可以翻动”的想法。

然后就有了下面的效果。而且,当翻动图片后,下面的条数会跟着变化。

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

另外,在必要的地方,我都用鼠标移入提示做了说明,希望以此可以更好引导用户浏览。

写在结尾,至此,这个联系作品就到此为止。虽然小巧,不过希望能以此熟练自己的技术,增长见识。

本文由银河网站登录发布于银河网站登录,转载请注明出处:创建属于我的个人主页

关键词:

上一篇:我遭遇DDos攻击的经历及解决办法
下一篇:没有了