觉得是个异常好用的软件,效果分析&lt

最早起初询问到产品经营、产品助理这样的职务,其实真正是从Axure起始的。明白到这是一个“画图软件”,感觉和PPT差不多嘛。后来对成品的志趣越来长远,也逐年自己捣鼓一下它的功力,感觉是个可怜好用的软件!在这里品尝用Axure做一个简单的个人主页,以此练习,并记下下了思路和细节。

<h6>效果分析</h6>

先放上网址(Axure分享网站真的加载很慢):http://eu9nm1.axshare.com/\#c=2

  1. 经过点击右上角的图标切换扫码、账号登录情势;
  2. 在扫码登录页面,鼠标移入、移出二维码时,二维码平行移动,并且弹出图片的动态效果;
  3. 在账号登录页面,当文本框获取关节后,输入框的边框为红色。失去主旨后,边框颜色为绿色。

规定核心

既然是个人主页,所以自己想既包含简历内容,再添加一点简历不能反映得东西。所以初阶将主页设置为

民用联系格局(最重点嘛~)、教育经验、工作经验、个人力量、训练著作、兴趣爱好(包括平日揭橥小说所用网址)

等多少个板块。

![](https://upload-images.jianshu.io/upload_images/69370-77e752e57b3eaaa8.gif)

淘宝登录原型预览

确立风格

自然想做成网页同时用手机操作风格,发现1280*720用网页看的话,一个屏幕很可能装不下!所以折中之后,将界面改小了。然后自己希望

总体页面通过左右滑行切换内容,并且可以透过最底部的按钮,疾速进入目的页面。

这样在浏览让越来越简便易行。如图:

确立风格之后,大家就足以进入下一步啦~!

接下去,进入各类分页面的情节设计。由于初衷就是考虑简单磨练,并且模拟手机界面,所以每一页只留最少的东西。具体的想法为:

主页:留下姓名、联系模式等。

春风化雨页:加个校徽好了。

民用练习:只放近日的著述。

个人爱好:图+文。

这样的设计之后就起来了最初的页面消息排布啦~!如下图:

(各主页图)

<h6>元件组成介绍</h6>

主页面动作计划

自己觉得Axure7.0的动态面板是一个特别好用的预制构件。我几乎用动态面板做了三四层的嵌套。对于一个知道程序语言的人来说,这样的嵌套并不算难。难的是需要用怎么样表现格局才能将切换体验做好,并且雅观。自觉水平有限,所以努力!

反正滑动效果

本身将四个页面都做成主页面的一个动态面板的6个state。并安装逻辑

当在某个页面时,向左切换来它的前一个页面,向右切换来它的下一个页面。

换成C语言就是:

If(this=state2)

{

if(slip direction=left)

365体育网站,this=state3;

if(slip direction=right)

this=state1;

}

就如此,虽然烦琐了点,但是对此6个页面,工作量也不算大。假诺工作量大,就要需求更好的优化措施了。这里并没有再追究。如图:

底层按钮动作

我是先上网收集了连带的图标,然后对各个图标举行单独设置的。

实际也很粗略,只要在安装单击图标的时候,让动态面板切换来对应的页面就足以了。如图:

  1. 扫码登录页面元件介绍。

页面内容设计

少数页面需要再做效果,用以容纳更多的音讯。所以,在各个页面有着更多的操作成效。

办事经历页面

由于工作经历的篇幅比较多,基本无法遵照总体的书体风格装进去。所以我着想做了个抽屉式的内容举行。

实际效能为:

在正规状态下接受,当要查阅时,点击标题就能实行,再度点击能关闭。

如图:

在这边运用了隐藏/突显部件,同时带动/推动元件。将详细内容做成隐藏,然后在鼠标单击时,交互动作设置为呈现,同时有助于下方的部件

就能做出抽屉效果。

民用训练页面设计

个人磨炼中自己放了一个竞品分析的ppt。

哪些才能让浏览者看到局部情节吧?

自家想到了仿佛相册的tab功用。最终的结果就是内外带来可以切换ppt页数,可是另一些就是Axure的享受网页打开特别慢,所以自己只放了3张ppt,然后做了个外表链接,指导用户自动查看。如图:

以此效用落实也是凭借动态面板。

新建一个动态面板,将三张ppt放在多少个不同的state。然后和主页面切换一样设置即可。不同的是反正拖动改成左右拖动。

兴趣爱好页面设计

在这些页面我打算放上几张温馨的录像照片。最好能切换查看,同时还是可以够大图查看。

据此自己的筹划思路为:

反正做肯定的切换指导,并且单击图片可以放手图片查看。

如图:

这么些意义等同凭借动态面板。

切换图片的动态面板命名为“壁画切换”,只要在首页再安装一个动态面板“油画放大”,并且安装为隐蔽。然后设置逻辑为:只要单击“版画切换”,则基于“素描切换”当前的图样改动“素描放大”的情景,同时改变状态为体现。

如图:

![](https://upload-images.jianshu.io/upload_images/69370-081dc820ce33e6df.png)

动态面板\_扫码登录.png

细节丰盛

全部小说到此地其实以及算完成了。不过,

为了率领用户使用产品,我愿意做一些细节来进展提醒,最好不影响到用户的体会,同时又有效。符合帕累托改善最好了。

主页切换提醒

为了辅导刚打开页面的用户滑动主页切换,我在主页加载两秒后,做了一个手指动作的引导,如图:

在页面载入的时候做逻辑如下:

在底部图标上,当鼠标移入时,会有影子效果,我觉着这么会生出立体感,增大用户点击的或是。

除此以外,我找了颜色各异的平等图标,在某个页面时,对应的图标用肉色代表。将近来页面对应的图标棕色版本置顶,其他置于底部即可。如图:

一样的,在工作经历页面,鼠标移入标题之后,颜色变化,同样是为着指引用户点击。相同的效用,还有兴趣爱好的简书、博客园主页入口,鼠标移入后会有黑影变化。

图形切换效果指点

在竞品分析ppt哪儿,我直接在设想如何让浏览者领会,这一个模块是足以经过内外浏览切换的。

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

然后就有了上边的效用。而且,当查看图片后,下面的条数会随之变动。

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

除此以外,在必要的地点,我都用鼠标移入提醒做了求证,希望以此可以更好带领用户浏览。

写在最终,至此,那些关系随笔就到此截至。即便小巧,然则希望能以此熟知自己的技能,增长见识。

  1. 账号登录页面元件介绍。
![](https://upload-images.jianshu.io/upload_images/69370-6b55fa0f0246bebb.png)

动态面板\_账户登录.png

<h6>实现步骤</h6>

  • 设计动态面板

    1. 开拓 Axure
      ,新建文件,在画布中拖入动态面板,并且安装动态面版宽度和冲天均为
      350。
    2. 下一场双击动态面板,打开面板状态管理窗口,为面板多扩充一个意况(面板变为五个情景),并且将面板重命名,命名随意,方便个人知道即可。如下图显示,其中
      scan_code 状态就是内需寄放扫码登录界面的构件,user_name
      状态就是存放用户名登录界面的部件;
    ![](https://upload-images.jianshu.io/upload_images/69370-6194d8527a722c9f.png)

    动态面板管理界面
  • <b>设计 scan_code 页面</b>

    1. 鼠标双击「scan_code」,打开scan_code页面;
    2. 将面板背景颜色调整为 #F0F8FA;
    3. 在页面中拖入一个矩形,选中矩形后右键,将矩形转换为自定义形状,调整图形形状为去掉右上角的五边形。去掉右上角是为了呈现右上角的图标。
    4. 拖放一张电脑 icon 到右上角,图标可以在
      iconfont
      这些网站找到。

      365体育网站 1

      scan_code添加五边形和电脑图标

    5. 安插二维码和手机图片,设置二维码图片大小为
      140*140,将手机图片设置为隐匿。

    ![](https://upload-images.jianshu.io/upload_images/69370-bb62c47910dcd61f.png)

    插入二维码图片和手机图片

6.  设置鼠标移入时用例。第一个,设置鼠标移入二维码区域时,当前组件(二维码)移动,设置参数为:绝对位置、x=30,y=78,动画为线性、时间为500毫秒;第二个,设置等待时间300毫秒;第三个,显示弹窗图片,动画为逐渐,时间为200毫米。(思路是加上等待时间的300毫秒,二维码停止移动时图片完全显示出来)



    ![](https://upload-images.jianshu.io/upload_images/69370-4598ec71c3007a75.png)

    设置鼠标移入二维码时水平左移



    ![](https://upload-images.jianshu.io/upload_images/69370-f55626e3e29b5c31.png)

    设置显示弹窗图片

7.  设置鼠标移出二维码用例。选中二维码,新增鼠标移出用例,当前组件(二维码)移动,设置参数为:绝对位置、x=110,y=78,动画为线性、时间为500毫秒;第二个,设置等待时间200毫秒;第三个,显示弹窗图片,动画为逐渐,时间为300毫米。(思路是当二维码移动将要接触图片的时候,图片开始隐藏)



    ![](https://upload-images.jianshu.io/upload_images/69370-d0e374adcbefecca.png)

    设置鼠标移出二维码时水平右移



    ![](https://upload-images.jianshu.io/upload_images/69370-fba8c520b2031e0b.png)

    设置隐藏弹窗图片

8.  经过上面的步骤,scan\_code
    主要的交互效果已经完成,接下来就是将其他的文本元素补齐就好了,这些内容比较好理解,所以不过多讲述;补齐其他元件后,scan\_code完整的元件目录如下;



    ![](https://upload-images.jianshu.io/upload_images/69370-3952a430a6bd0300.png)

    scan\_code完整的元件



    完成上面的步骤之后,scan\_code 页面的已经完成,看一下实际效果:



    ![](https://upload-images.jianshu.io/upload_images/69370-418dccf0d4d579fd.gif)

    scan\_code页面的实际效果
  • <b>设计 user_name 状态</b>

    1. 鼠标双击「user_name」,打开 user_name 页面;
    2. 相同的,将面板背景颜色调整为 #F0F8FA;
    3. 跟前边一样,添加任意图形和右上角图标;
    ![](https://upload-images.jianshu.io/upload_images/69370-5f64ea5f00aee885.png)

    user\_name 添加五边形和半个二维码图标

4.  设置用户名输入框。首先,插入icon文本,使用FontAwesome字体,(关于FontAwesome字体请移步:[如何在Axure
    RP 8 中规范使用 Font Awesome
    图标库完成设计](https://link.jianshu.com?t=http://www.woshipm.com/rp/578031.html),大小为37\*40。第二,插入文本框,260 \*
    40,设置文本框属性隐藏边框,提示文字:会员名/邮箱/手机号。第三,添加矩形框,大小为298\*42,并且放置在icon和文本框底部。  

    ![](https://upload-images.jianshu.io/upload_images/69370-a19fc3debce25514.png)

    设置用户名输入框

5.  设置密码输入框。跟设置用户名输入框一样的形式添加密码输入框。



    ![](https://upload-images.jianshu.io/upload_images/69370-cefd5fdb280214aa.png)

    设置密码输入框



    6.设置文本框获取焦点后用例。选择用户名输入框,添加获取焦点时用例,用户名输入框底下的矩形框(用户名框)选中状态为Ture。在添加用例,当文本框失去焦点时,用户名框状态为False.



    ![](https://upload-images.jianshu.io/upload_images/69370-a9a86877ee36f71e.png)

    设置用户名输入框底下的矩形框为选中

6.  设置用户名框被选中时的交互样式。前面一步中,输入框获取焦点后,底下的矩形框(用户名框)就会被选中,所以需要继续设置用户名框被选中时边框颜色又灰色变为蓝色。(简单理解就是输入框获取焦点可以触发用户名框选中,用户名框选中就会变色。)



    ![](https://upload-images.jianshu.io/upload_images/69370-08bbc4f7f7fc925e.png)

    设置用户名框被选中时的交互样式

7.  设置密码输入框获取焦点后的交互效果。跟用户名输入框一样设置密码输入框,达到相同的效果。
8.  完善页面其余的信息,完善后整个user\_name状态下元件组成。



    ![](https://upload-images.jianshu.io/upload_images/69370-8b4990090240b846.png)

    user\_name元件组成

user_name状态页面已经到位,全部的法力如下:

365体育网站 2

user_name全体效应

  • <b>设置点击右上角图标切换扫码登录和账号登录页面。</b>
    原型制作到这一步,基本已经完成,可是还一直不起到动态面板的功力,关键的时候到了,接下去就是安装通过点击右上角的图标实现不同登录界面的切换。

    1. 设置scan_code状态页点击右上角半个电脑转换为账号登录。拔取右上角的电脑图标,添加一个单击用例,添加「设置面板状态」,配置动态中当选动态面板,采纳情形为user_name。
    ![](https://upload-images.jianshu.io/upload_images/69370-243f0bd3d5c28a8b.png)

    为右上角电脑图标添加单击用例

2.  设置user\_name状态页点击右上角半个二维码转换为扫码登录。跟上面同样的操作,选择右上角的半个二维码图标,添加一个单击用例,添加「设置面板状态」,配置动态中选中动态面板,选择状态为scan\_code。



    ![](https://upload-images.jianshu.io/upload_images/69370-452d361bd3df2cd0.png)

    为右上角二维码图标添加单击用例

最后,整个原型基本完成,可能还亟需扩展一些附加的底细需要持续优化,需要逐步调整,不过基本相符Tmall登录界面,全部的预览效果如下。

365体育网站 3

Tmall登录原型预览

<h6>总计这多少个原型涉及到的知识点</h6>

  1. 经过移入移出鼠标实现元件的活动、突显和潜伏之间的切换。
  2. 通过取得关节实现任何的部件选中,并且实现被入选的团伙交互样式的更动。
  3. 通过切换动态面板的例外情形实现不同页面的切换。

原型文件下载地址:
http://pan.baidu.com/s/1jIp4YmM

相关文章