华为商城网站设计分析如何开一个自己的网站

02高保真基础

1.高保真原型的要素

（1）静态高保真原型图

• 尺寸：严格按照截图比例，参考线

• 色彩：使用吸取颜色，注意渐变色

• 贴图：矢量图/位图，截取，覆盖等

（2）动态高保真原型图

• 交互：页面切换，点击动效，数据变化

• 演示：PC浏览器、手机APP

2.演示：用Axure绘制页面（朋友圈，聊天会话）

（1）页面尺寸：默认为Auto，点击下拉框有各种选项

（2）图片、线框图尺寸：建议设置为统一尺寸，方便后续设备上演示。视频中建议设置为375*812

（3）复制后调整尺寸：将上节课作业复制到本节课演习中，会涉及尺寸调整。

• 整体选中，shift+拖动边角进行等比缩放。

• 文字调整：字号大小及自动适合文本高度/宽度

（4）图标素材

• iconfont：iconfont-阿里巴巴矢量图标库

• 复制SVG代码，直接粘贴至Axure中

• 粘贴后为图片，点击图片右键-变换图片-转换SVG图片为形状，可以通过填充改变颜色，任意放大缩小（矢量图）不失真

（5）文字大小：不要小于12号字体，因为Chrome浏览器是默认12号字体，即使设置为12号以下，浏览时也会变为12号。

（6）裁剪图片：右键单击图片-裁剪图片。

（7）编辑点

• 方法一：点击元件右键-变换形状-编辑点。

• 鼠标移至边框，可以增删编辑点。

• 方法二：选中元件后，双击边框即可进入编辑点。

• 编辑完成后再不可进行圆角设置。

（8）调整元件中文字的对齐及边距

3.作业：用Axure绘制页面（我的、登录）