Axure元件之文本框的案例

常见的网页、APP是通过各种基本形状的组合模拟出来的,这里重点介绍文本框元件的案例。

以CSDN搜索框为例,案例效果如下图1:

图1

一、案例分析思路:

1)最左侧是CSDN的动态logo;

2)首页、博客、学院、等内容为文本框;

 

二、实战应用:

CSDN的动态logo属于图片应用,这里不做赘述,本次主要讲解文本框的应用。

1)在元件库中找到并添加矩形1,并置于顶端,见图2。

Axure元件之文本框的案例_第1张图片

图2

    2)从图1的标红区域设置矩形元件的位置坐标及长、宽,这里将x设为10,y设为20,w设为800,h设为60,见图3。

Axure元件之文本框的案例_第2张图片

图3

    3)添加图片元件至CSDN的动态logo所在位置,并将x设为15,y设为25,w设为60,h设为50,见图4。

Axure元件之文本框的案例_第3张图片

图4

    4)在表单元件中选择文本框元件,并进行添加,见图5。

Axure元件之文本框的案例_第4张图片

图5

     5)将x、y、w、h分别设置为85、35、60、30,在右侧检视的属性下,类型选择“text”,双击文本框呈现编辑状态,输入:首页,见图6。

Axure元件之文本框的案例_第5张图片

图6

     6)选择首页的文本框,并在属性栏中选择“隐藏边框”,同时调整字号至16,见图7。

 Axure元件之文本框的案例_第6张图片

图7

    7)按照上述步骤继续添加其他文本框至图8样式。

图8

    8)搜索框选择元件矩形1,搜索标志可在元件搜索栏输入“查找”进行添加,见图9。

Axure元件之文本框的案例_第7张图片

图9

    9)在搜索栏之后添加”写博客”和”发Chat”的图片及文本框,一个粗糙的原型就画好了,见图10。

图10

         参考文献:

          [1]小楼一夜听春雨.AxureRP8实战手册:网站和APP原型制作案例精粹.人民邮电出版社.2016.


         做点无意义的事,读点无用的书:

1、生命中第一个爱恋的对象应该是自己,写诗给自己,与自己对话,在一个空间里安静下来,聆听自己的心跳与呼吸。

2、生命真的有意义吗?儒家文化一定强调生命是有意义的,但对存在主义而言,存在是一种状态,本质是存在以后慢慢找到的,没有人可以决定你的本质,除了你自己。所以存在主义说“存在先于本质”,必须先意识到存在的孤独感,才能找到生命的本质。

3、不管生命的意义为何,如果强把自己的意义加在别人身上,那是非常恐怖的事。我相信,意义一定要自己去寻找。

                                                                                                                                                        ——节选自蒋勋《孤独六讲》

你可能感兴趣的:(Axure精进)