学习Axure RP原型设计

Share Element


由一张图纸过度到一个界面,适用于购物车图片直接跳转到商品详情界面,圆形按钮的超负荷也得以接纳于圆形菜单里

share.gif

1 概述

原型设计是运用开发设计的率先要素。好的原型设计不仅可以起到联系的机能,而且对客户而言应用程序拥有更直观的呈现。原型设计通过情节和布局浮现以及界面布局编排,落成在支付先前时期用户与产品举办交互。进步用户对品种的认可度,有利于项目标促进。上边为大家介绍一款原型设计工具——Axure
RP。

兑现原理

利用android 5.0
提供的法子,完毕共享元素动画的超负荷,达成原理很简短,在界面跳转的时候插足以下代码

  1. java代码

//第一个界面跳转的时候执行
Intent shareIntent = new Intent(MainActivity.this, ShareElementActivity.class);
                                String transitionName = getString(R.string.share_tag);
                                ActivityOptionsCompat transitionActivityOptions
                                        = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, holder.item_image, transitionName);
                                startActivity(shareIntent, transitionActivityOptions.toBundle());

makeSceneTransitionAnimation(Activity activity,View sharedElement,
String sharedElementName)

makeSceneTransitionAnimation中参数sharedElement就是流传第二个界面要与第三个界面共有的view元素,sharedElementName这一个参数可以随便起名,他一定于tag,系统就是基于这几个tag来恒定多个界面元素的职位,然后举行动画渲染的

 //第二个界面动画完成回调监听,控制进出动画效果
 setEnterSharedElementCallback(ImageTransitionUtil.DEFAULT_SHARED_ELEMENT_CALLBACK);

setEnterSharedElementCallback 里面可以兑现自己想要的卡通片效果

  1. 布局文件代码
    那里用系统自带的ImageView就可以,记住,多少个界面跳转activity中的共享元素ImageView,一定要设置这一个属性
    transitionName
    上文说过,这一个就是相当于tag,系统是按照那几个来稳定的,所以肯定要安装。

   <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="@drawable/sample"
            android:transitionName="@string/share_tag"
            />

2 名词解释

Axure RP:Axure
RP是一个规范的飞跃原型设计工具。Axure,代表美利坚合众国Axure集团;RP则是Rapid
Prototyping的缩写,译为快捷原型。

CollapsingToolbarLayout


折叠式的标题栏,这几个是系统提供的卡通片效果,引用系统控件就好了

fold.gif

3 工具介绍

Axure RP是美利坚合营国Axure Software
Solution集团旗舰产品,是一个正式的飞速原型设计工具,负责定义须求和条件、设计功用和界面的专家能够快捷创设应用软件或Web网站的线框图、流程图、原型和标准化表明文档。作为标准的原型设计工具,它能很快、高效的创设原型,同时支持六人合营规划和版本控制管理。

代码完成

  1. gradle里的引用

compile ‘com.android.support:design:22.2.1’

  1. java代码

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_toolbar);
        ButterKnife.bind(this);
        content.setText(R.string.content);

        initToolbar();

    }

    private void initToolbar() {
        collapsingToolbar.setTitle("折叠式标题栏");
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

   //toolbar返回事件实现
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
  1. 布局文件代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="Share Element">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/sample"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="test"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:padding="10dp"/>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

布局文件的一些性质表达

  1. layout_scrollFlags
    • scroll – 想滚动就亟须安装那个。
    • enterAlways – 完成quick return效果,
      当向下活动时,立即呈现View(比如Toolbar)。
    • exitUntilCollapsed –
      向上滚动时裁减View,但可以一定Toolbar一向在地方。
    • enterAlwaysCollapsed –
      当你的View已经设置minHeight属性又采纳此标志时,你的View只可以以细小中度进入,唯有当滚动视图到达顶部时才扩展到一体化高度
  2. layout_collapseMode
    • pin –
      设置为那些方式时,当CollapsingToolbarLayout完全裁减后,Toolbar还足以保留在屏幕上。
    • parallax –
      设置为这些情势时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也得以而且滚动,达成视差滚动效应,平常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
    • layout_collapseParallaxMultiplier(视差因子) –
      设置视差滚动因子,值为:0~1
  3. 使用CollapsingToolbarLayout时务必把title设置到CollapsingToolbarLayout上,设置到Toolbar上不会来得

collapsingToolbar.setTitle(“折叠式标题栏”);

3.1 应用范围

Axure的可视化工作条件足以让你轻松便捷的以鼠标的不二法门创设带有注释的线框图。不用进行编程,就可以在线框图上定义简单连接和高档交互。在线框图的基本功上,可以自动生成HTML(标准通用标记语言下的一个拔取)原型和Word格式的尺度。

Axure
RP的使用者主要包罗商业分析师、信息架构师、可用性专家、产品老董、IT咨询师、用户体验设计师、交互设计师、界面设计师等,别的,架构师、程序开发工程师也在使用Axure。

Reveal Animation


google二伯自从5.0过后对动画效果尤其器重,那里给我们介绍一个波纹效果,也是系统提供的

reveal.gif

已毕原理

  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private Animator animateRevealColorFromCoordinates(ViewGroup viewRoot, @ColorRes int color, int pointx, int pointY) {
        float finalRadius = (float) Math.hypot(viewRoot.getWidth(), viewRoot.getHeight());
        //由于toolbar是自己绘制的所以要减去这个高度
        pointY = pointY - toolbarHeight;
        Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, pointx, pointY, 0, finalRadius);
        viewRoot.setBackgroundColor(ContextCompat.getColor(this, color));
        anim.setDuration(500);
        anim.setInterpolator(new AccelerateDecelerateInterpolator());
        anim.start();
        return anim;
    }

3.2 常用功效

Axure的软件界面总的来说,可以分成9大模块

  1.  菜单栏:和大部分的软件界面一样,都是一些正常的文书、编辑、视图等。
  2.  工具栏:是页面举行编制的有些飞速操作,主要有字体设置、大小设置、页面呈现大小和Axure本身自带的局地很快操作等。
  3.  站点地图:呈树状结构、可以加上、删除页面、也得以对规划中的页面进行重命名操作。
  4.  部件区域:组件集中地方:矩形组件、图片组件、动态面板组件……使用办法是平素拖动部件到页面编辑区域。
  5.  母版区域:共用,复用。
  6.  页面编辑区域:拖动相关的构件进行线框图编辑和相互具体的执行。
  7.  页面交互区域:安装页面属性,交互样式。
  8.  部件属性区域:组件的凝视、组件的互动、组件的属性编辑。
  9.  动态面板区域:安装动态面板的可视与潜伏。

图片 1 

ViewAnimationUtils.createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius)

第一是以此主意,设置在哪个View里绘制波纹,开首点及半径就足以兑现了,很多开源的button波纹效果都是依照这几个完毕重复卷入的

源码在上边,假诺觉得不错,随手协理Star、Fork一下,算是对小编最大的协助啊~

3.3 环境搭建

输入https://www.axure.com.cn/网址,进入Axure官网里点击下载项,就能看的Axure
RP的下载链接了。

图片 2

下载完毕后的设置包如图:

图片 3

双击安装包会弹出安装向导

图片 4 

点击下一步

图片 5 

勾选“我同意”,点击下一步。

图片 6 

挑选安装路径点击下一步。

图片 7 

点击下一步

图片 8 

点击下一步

图片 9 

把运行的勾选项去掉,安装的是英文版,须要展开汉化,所以先不要运行。在网上找一个汉化包,汉化的经过网上都有,这里不做牵线了。安装到位后桌面会冒出一个急迅形式,双击就能够打开Axure
RP软件了。

Github项目地址:MaterialAnim

4 样例讲解

4.1 前期准备

率先需求预备原型设计要用到的素材,输入网站http://www.agileai.com,到
数通畅联官网把需求选用的图样,logo,图标和文字下载下来备用。

  1. 打开Axure
    RP软件,它和大部分的宏图软件的布局形似,那里不一一介绍了。点击工程,选拔页面样式编辑器,在页面样式编辑器里有对齐,字体选项,将页面调试为居中显得,字体选用草书。

图片 10

图片 11 

2.
点击布署,选择网格和扶助线,依据需求举办调剂。网格和扶助线对设计会起到辅助作用。

图片 12 

4.2 编辑图片

1.
先从数通畅联官网首页的顶部开端,在库里拖拽图片到设计区。

图片 13 

2.
双击图片,会让您拔取文件,采用数通畅联logo。

图片 14 

  1. 作用图如下:

图片 15 

按同样的主意继续搭建顶部。接下来碰着关于图片的操作都如上所述,就不再做讲解了。

4.
顶部设计好后点击预览按钮,就可在浏览器里预览效果了。

图片 16 

  1. 预览效果如图:

图片 17 

6.
在页面处右键可以重命名,重命名后,在浏览器里预览时,会浮现出页面名称。

图片 18 

4.3 导航菜单

1.
做导航,在库里选用菜单-水平,将其拖拽到设计区。

图片 19 

2.
默许是五个,点击右键可以激增菜单和子菜单。

图片 20 

3.
当选菜单,在右边编辑区选取样式更改导航背景观和字体颜色。在编辑区上边可以给元件起名,指出选择英文命名,命名格式例如PasswordInput01或Password01,它的含义是序号01的密码输入框。格式表达:“Password”表示主要用途;“Input”表示元件类型,一般景色下可粗略,当有例外类其余同名元件必要区分或称谓不可能明了发布用途的时候使用;“01”表示出现四个同名元件时的号子;单词首字母大写的书写格式便于阅读

图片 21

4.
导航编辑完后为其添加鼠标移动效果,如图:

图片 22 

  1. 点击预览,查看效果。

图片 23 

4.4 滚动字幕

1.
做导航上面的此时此刻职责。在库里拖拽矩形到设计区,长度和导航一致。添加图标,在库里选拔单行文本,输入“当前职分:”和“首页”。

图片 24图片 25

2.
在“当前地点”的右侧是滚动的文字,是动态的,在库里采取动态面板,调整大小,放到左侧。

图片 26 

3.
双击动态面板,弹出动态面板状态管理。点击“+”新增状态。

图片 27 

  1. 双击State1,进入编辑页面,如图:

图片 28 

5.
拔取单行文本拖动到动态面板上,并输入内容。设置鼠标悬停时,字体颜色为革命。

图片 29 

6.
三个情景都编制完毕后,重返原编辑页,在编辑区里双击载入时。

图片 30 

7.
弹出编辑框,在编写框里设置动态面板的动作。如图:

图片 31 

  1. 点击预览,就能见到滚动的效益了。

图片 32 

4.5 轮播图片

1.
做轮播图,轮播图也是动态的,同样也急需动态面板。将动态面板拖动致设计区,调整地点和分寸,并安装情形。然后在抬高一个图片切换提示按钮,也是用动态面板,添加状态,在各种情形里显示分裂的指令样式。如图:

图片 33

2.
点击左边编辑区里的载入时,设动画成效。设置的参数要和轮播的图纸对应。设置参数如图:

图片 34 

  1. 点击预览,查看效果。

图片 35 

接下去配置轮播图上面的情节,配置那几个情节时用地点讲到的技能就足以了,就不做过多表明了。

4.6 再次来到顶部

在最下边有一个回来顶部的按钮,在库里找个矩形和一个箭头,按快速键Ctrl+G,将其构成,然后右键,转换为动态面板。

图片 36 

2.
在库里在挑选一个占位符,放到最下边,透明度设置为0。

图片 37 

3.
增选重临顶部按钮,设置鼠标单击时的参数,如下图:

图片 38 

4.
点击确定,再次回到顶部按钮就安装完毕了。

4.7 悬浮效果

做右边的欢迎咨询,它是生成在左侧的。依照欢迎咨询的样式编辑好后,转换为动态面板,拔取稳定到浏览器,设置参数如图:

图片 39 

2.
到那边,数通畅联官网首页的情节总体做完了,点击预览,就足以看到以假乱真的统筹原型了。

图片 40 

4.8 生成文件

1.
预览小意思后,点击发表按钮,生成html文件。

图片 41 

2.
弹出编辑框,拔取生成路径,点击生成,就足以生成html文件了。

图片 42 

5 心得总计

原型设计是在项目的设计阶段进行的,原型设计对中期的档次开发启到了要命关键的机能,假若规划做的不成就,在开发阶段就会陷入困境。有一个好的原型设计,在和客户谈合营时也会启到相当好的功能,所以学会原型设计足够关键。

在此间只是简单的牵线了Axure
RP工具的选择,它还有许多强大的效劳,若是你感兴趣,可以到Axure
RP官网举办学习。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图