码迷,mamicode.com
首页 > 其他好文 > 详细

《AxureRP原型设计学习笔记》之骨头班门弄斧篇

时间:2014-08-12 00:43:45      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:原型设计   axure   设计   界面   

懒骨头(http://blog.csdn.net/iamlazybone QQ:124774397 青岛) 

        bubuko.com,布布扣


———— 前言 ————

AxureRP中的RP:Rapid Prototyping,快速原型。

这是产品经理的神奇,作为开发来搞这个东西,有点班门弄斧。

最近边查边搞了一个丑陋的app原型,一点心得,简计于此。

mac下的AxureRP装完之后,默认打开是不显示程序界面的。别跟骨头似的以为没装好,重新下载安装。新建或打开即可。

这是软件界面:

bubuko.com,布布扣

———— 控件 ————

不建议初学者首先下载一些控件库、组件包之类的,一是不利于学习,二是对于视觉洁癖的人来说,最简单的线框图看起来才舒服。

下图就是基本的控件,跟积木一样,几乎什么都能组装出来,而且还清爽好看。用

当然,用的多了就可以搞一套自己的组件库,那才叫一个实用。

bubuko.com,布布扣

Axure还有个非常好的特点就是,控件摆放时,会自定对齐,这点非常好用,妈妈再也不用担心我手抖了,算了,我正经点。

一个好的设计眼里绝对不会容忍一个像素的偏差,

各种简单基本的对齐、填充、比例、间隙等,在设计眼里都能成为致命伤。我喜欢这种矫情。

这种基本控件属于最基本的元素,如果你想让他变成程序世界中的类,可以转换为动态面板

动态面板:我的感受是,可以起名字,可以加动画效果,可以让许多零散的基本控件作为一个整体。

母版:这个概念相当于程序世界中的全局变量,比如APP原型中的手机外壳,就可以作为母版,特点:一改全改。

注意,所有这些控件是分层的,而且层级的调整,会经常用到,所以记住分层快捷键:mac版

bubuko.com,布布扣

———— 事件 ————

事件的添加非常简单,而且每一个控件都能加,比如最基本的点击事件

bubuko.com,布布扣

在页面1放一个按钮,选中按钮,右边选择鼠标单击时。

bubuko.com,布布扣

常用的基本事件有这些:

@ 打开链接

@ 显示隐藏 (注意切换可见性非常实用,而且还能方便的加特效

@ 可上下滚动的列表(这个稍微麻烦,后面详细讲)

@ 返回上一个界面 (非常实用)

@ 设置文本,图片

    @ 设置可用性 等等。 

添加好事件之后,点击预览,就可以看到跳转效果了。

bubuko.com,布布扣

当然别忘了实用条件,有时需要添加条件规范一下。比如,……¥……&%*& 困了,不举例子了。

bubuko.com,布布扣


———— 控件属性 ———— 

bubuko.com,布布扣


一些基本的属性

位置,长宽,透明度,是否圆角,文本阴影,边框颜色粗细,等等,都十分常用。

绝大多数需求都能通过这些来组合出来。

移动这些控件时,有个不成文的规定:

 左右键移动一个像素,按住shift,一次多个像素。

@ 缩放时,按住shift,按比例缩放。

@ 缩放时,按住alt,以图形中心点为缩放原点。

@ 拖动控件时,按住option(alt)键,复制

这些操作在设计软件里,如Photoshop里同样适用。

还有,注意这个小圆点

bubuko.com,布布扣

点击之后,有很多基本图形,很常用。

———— 一些小技巧 ————

建议做原型时,自己建立几个页面,

一个Item界面,把所有的列表的item在这个界面画好,以备复制粘贴用。

一个List界面,用刚才的item来组装成一个个列表,,以备复制粘贴用。

bubuko.com,布布扣

等等,比如一些提示框,顶部标题栏,用的多的都提前做好了,

基础工作做好了,界面就是拖来拖去,把事件链接起来就成。

(哲哲让我别熬夜,我要加快速度了:),有人关心感觉真好)


————————————————————————

———— 最后贴一个滚动列表的例子:————

————————————————————————

1-部件库拖出来一个动态面板

bubuko.com,布布扣

2-右边的部件管理,点击state1,动态面板默认有一个状态,还可以添加多个,(比如几个不同状态页,来做tab控件用

bubuko.com,布布扣

3-下面就进入 state1的编辑界面了,这里所有的东西都是 state1 这个状态页里的。

bubuko.com,布布扣

4-在state1里再次拖放一个动态面板,宽度相同,长度随意,我默认它为两倍高度。

并且双击后来这动态面板 改名为 滚动的view

bubuko.com,布布扣

5-再次双击 滚动的view 的state1状态,进入编辑状态,随便添加一个文本

bubuko.com,布布扣

6- 返回最初的页面,点击动态面板,添加事件: 拖动动态面板时

bubuko.com,布布扣

进入事件编辑界面:

点击移动

选中“滚动的view”,

选中y轴拖动 ,OK

其实添加事件这几步的意思是:当我们滚动最外的小控件时,里面的长控件要跟着鼠标移动,但只是y轴移动,也就是上下拖动了。

bubuko.com,布布扣


还有个Tab的例子,就不记录了,思路是一样的,三个按钮,控制一个动态面板的三个状态。


没啥干货,权当这几天的笔记。

写出来,帮助自己梳理梳理。


Z...z...z...


——————————

哲哲,小名 YIYI ,手工爱好者,文艺范,手艺人,《YiYiの妙舍》创始人,很有自己想法。

bubuko.com,布布扣

《AxureRP原型设计学习笔记》之骨头班门弄斧篇,布布扣,bubuko.com

《AxureRP原型设计学习笔记》之骨头班门弄斧篇

标签:原型设计   axure   设计   界面   

原文地址:http://blog.csdn.net/iamlazybone/article/details/38499691

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!