axure图片笔记

第一章

一.原型图：

1.低保真：讨论功能；评审会；修改

2.中保真

3.高保真：评审；demo演示

4.纸质

5.电子

6.优点：方便修改与沟通

二.axure

1.后缀名：.rp（保存格式）

2.可以生成.html F8

3.预览

4.界面概述：

菜单，工具，页面，元件，母版，绘图操作，检视（样式，注释，属性），概要页面

三.工作流程

1.需求定位分析（产品）

2.视觉交互（设计ux）

3.程序（前端，ios，安卓，后台）

4.测试-运营

四.登录页面（尺寸）

1.375*812

2.列表高度44

3.列表文字17

4.间距15

五.常见名词

1.英寸：对角线的长度

2.像素：组成位图不可分割的元素；没有物理大小；不同的设备尺寸不一样

3.分辨率：横向和纵向像素的数量

4.ppi：pixcel per inch像素每英寸

5.dpi： dot per inch点每英寸

6.物理分辨率：硬件支持

7.逻辑分辨率：软件达到的

8.物理和逻辑的换算：iphone678（@2x）；plus X（@3x）

9.iphone678：

物理 750*1334

逻辑 375*667

倍率 @2x

10.iphone678 plus：

物理 1242*2208

逻辑 414*736

倍率 @3x

11.iphone X：

物理 1125*2436

逻辑 375*812

倍率 @3x

12.视网膜屏：300

四.iphone尺寸

1.在做设计的时候以pt为单位

2.垂直方向的高度：

状态栏：678 / plus (20pt); X (44pt)

标题栏:44pt

列表，按钮：44pt----图标29pt

底部栏 49pt ----文字10pt

开关按钮：31pt 圆 28pt

滑动按钮：30pt 线2pt

3.水平方向：

文字间距：8pt

搜索框左右 8pt

开关 51pt

action sheet 弹出框宽度：100%-8pt-8pt

4.文字大小

标题：20

列表，按钮：17

正文 14

13,12,10

5.字体：苹方

第二章

一.添加交互注释

1.why 设计师拿到交互稿更好做设计，程序员更好的理解和实现

2.how ：1）基本元素属性宽高比，间距

2）交互动画单击跳转到相对应的链接

3）交互跳转逻辑动态交互的方向和逻辑

4）极限值例如：列表图片最多三张

5）状态切换：如果是局部的，可以把几个状态都绘制出来；登陆错误提示；

鼠标状态；网络异常状态；错误状态；初始化状态

二.交互样式

1.设置选项组（单选）

2.右键交互样式：hover，选中，禁用

3.设置事件：属性单击--动作--设置选中--找到设置选中的元素--给值

三.添加交互事件

1.触发元素

2.事件

3.动作

4.要改变的内容

四.切换显示组为例

1.触发元素：btn按钮

2.单击事件：添加条件1，添加条件2

3.显示与隐藏动画

4.显示与隐藏组

5.显示，隐藏，切换

五.跳转链接

1.窗口：blank 新窗口；self 当前窗口

2.页面： axure ；http：外链

六.交互（动作）

1.跳转链接

2.显示隐藏

3.设置文字

4.设置选中

5.设置旋转

七.功能模块分析（以游戏网页为例）

1.首页

搜索框：信息；直接搜索关键词；区=服-分类

banner

页面入口：客服；交易；充值；游戏币交易；装备交易

走势图

热门游戏：端游：出名，利润高，销量好，自营的游戏产品；手游：同上

第三章

一.动态面板

1.定义：可以有多个状态的特殊元件

2.可以通过动态面板切换状态例banner

3.动态面板可以制作滑动效果

二.事件

1.拖动时

2.拖动结束时

三.判断

通过条件取局部的元素的x，y

四.搜索

1.搜索框：搜索方式：语音；图片；文字；二维码；

2.搜索前：搜索分类--手机中通常是tabs展现形式（选项卡切换）

3.信息录入：默认搜索，热搜，历史搜索，搜索提示

4.结果展现：结果大的分类，类型，提供筛选，搜索结果为空的状态

第四章

一.中继器

定义：1.根据数据来显示重复的内容，可以进行增删改查

2.搜索--文本发生改变时：移除筛选器；添加筛选器[[item.title.indexOf(this.text!=-1)]]

二.版式设计中的层次

1.突出主题，画面更耐看

2.方式：1.叠加的方式（前后）

2.近大远小

3.色彩：明度高；饱和度高的在前面；冷暖暖色在前面

4.投影的方式镂空肌理

5.不透明

6.虚实（模糊的在后面）

三.改变不透明度

设置不透明度--inner.y*-1

第五章

一.app版式

1.宫格式：优点：信息准确明了；缺点：信息传达少，文字长度限制；注意：不要超过五个，图标要精美

2.列表--传达比较多的信息，使用太多会显得单调，疲劳

3.卡片式：优点：层次感强，较统一；缺点：消耗过多的空间

4.瀑布流：图片为主，文字为辅，图片要美，稳重产品不适合

5.手风琴：折叠切换；传递信息多，优先选项；打破视觉布局

二.网格设计

三.axure

1.框架

2.图片

3.其他基本元素

4.自定义默认元件

5.快照

6.使用其他库

APP设计

一.统一与变化

1.统一是主导，变化是附属

2.例子：多样化的板式产生变化，一致的字体，卡片样式，间距。颜色产生统一

3.分支主题

二.对比与调和

1.比例关系，间距形成对比

2.文字大小对比

三.对称与平衡：图片，文字，按钮形成画面的平衡，避免出现头重脚轻，左右比例失衡

四.节奏与韵律

1.引导用户阅读：

颜色：黑，淡；饱和；暖色，冷色

大小对比

空白多

上下

左右

黄金比例：1:0.618（黄金分割比）；斐波拉切数列（1:1:2:3:5:8:13......）相邻两个数的比值接近0.618；16:9

2.做设计，先思考安排画面放的内容，再优先级引导

五.亲密与相似

1.相邻的事物相关

2.相似原则（计算器，符号）

图层叠加模式

1.正常

2.越叠越暗：正片叠底----两个图层叠加在一起，叠出来的颜色比原来任何颜色都暗

3.越叠越亮：滤色，线性减淡----两个图层叠加在一块，叠出来的颜色比原来的颜色都亮

4.增加对比度：叠加，柔光----两个颜色叠加在一起，亮的更亮，暗的更暗，以50%明度为界限

5.底片效果

6.颜色效果----会用到“颜色”给图像上色，只改变色相，而不改变明度和饱和度

图层样式

1.投影：1）效果：投影；底部加一个边（亮：滤色；暗：正片叠底）

2）选项：距离--阴影偏移距离；阻塞--阻塞越大边缘越硬；大小--模糊大小

2.外发光：1）效果：给物体边缘外部增加一圈颜色

2）选项：扩展--扩展越大边缘越硬；大小--模糊大小

3.内发光：1）效果：给物体边缘内部增加一圈颜色