app原型设计是连接需求和开发落地的桥梁。而设计app原型又分为低保真和高保真,很多小伙伴弄不明白其中区别,网上也没有详细的案例。所以今天就带大家用在线UI设计工具Pixso,一起从低保真到高保真连贯的设计一款app原型。以Pixso资源社区的音乐类app为例,手把手教大家设计出高保真app原型。

音乐播放社交APP

1. 设计低保真app原型

app原型设计其实是抽丝剥茧的过程,从一个个矩形框逐渐细化,从页面分区到元素设计的过程,所以低保真app原型设计的核心是用快的速度概括出页面的内容。

第一步:新建画布

打开Pixso工作台,创建一个空的画布,画板尺寸选择iPhone 13 mini(375x812)。

iPhone 13 mini画板尺寸

第二步:app原型页面分区

根据音乐APP原型设计的需求,将页面划分成四个区域,分别是搜索栏、标题栏、列表栏、播放栏。使用矩形工具绘制出四个区域的矩形,将它们居中对齐,用来确定位置。

app原型页面分区

第三步:细化app原型分区

在四个app原型设计分区的基础上继续细化,控制好位置和间距。

  • 标题栏划分成四个文字标题,用矩形工具创建40x20xp的矩形,用来代替标题栏文字,按住Shift键复制出其他四个,间距设置42xp。

  • 列表栏每条列表包含头像和文字两部分,用矩形工具创建60x60xp头像矩形,再用矩形工具创建257x60xp文字矩形,然后按住Shift键复制出其他五个,每条信息框间距设为24xp。

  • 播放栏使用矩形工具绘制出五个播放图标,播放键居中所以放的最大,图标尺寸为54x54xp,其他四个图标在两侧依次排列,尺寸为24x24xp,间距为24xp。

细化app原型分区

设计低保真app原型主要解决功能分区、元素大小间距、用户操作体验等初步app原型的框架设计。可以看出几乎都是使用矩形工具快速绘制完成的,需要注意每个矩形的尺寸和间距,因为这里给出的尺寸和间距就是高保真app原型设计的尺寸和间距了,所以这里一定要耐心调整到合适的位置。

调整后的app原型分区

2. 细化低保真app原型

很多教程到这里就会直接开始设计高保真app原型了,其实在低保真和最终稿之间还有一个深化局部的工作,主要是解决每个区域的app原型计,让页面看起来更加整体。

第一步:增加app搜索栏原型设计细节

app原型搜索栏一共有三部分组成:搜索框、图标、文字。

  • 搜索框:给矩形设置16的圆角,让矩形看起来更加柔和。

  • 图标:在右上角插件中选择阿里巴巴图标库,在其中找到搜索图标,拖拽到框中上下居中对齐,色值:636E84。

  • 文字:选择文字工具输入文字,在背景框中上下居中对齐,字体选择思源黑体,字号15,色值:636E84。

最后在界面顶部添加上时间、电池和网络等图标。页面顶部就算深入完成了。

app搜索栏原型设计细节

第二步:增加app标题栏原型设计细节

标题栏根据需求一共有四个类目:热门、歌手、综合、歌单。文字需要做出默认和选中效果的区别,这里除了做了字体放大还添加了圆点进行点缀,文字间距根据之前矩形位置居中即可。

  • 默认文字:思源黑体-常规,14号字体,色值:E0E0E0。

  • 选中文字:思源黑体-粗体,16号字体,色值:F2F2F2。

app标题栏原型设计细节

第三步:增加app列表栏原型设计细节

列表栏包括头像、歌曲名、歌手名三部分组成,需要注意头像和文字的间距,这里调整了一个稍微舒适有点的16xp的间距。

  • 头像框:给矩形设置12的圆角,让矩形看起来更加柔和。

  • 歌曲名:思源黑体-常规,16号字体,色值:00091F。

  • 歌手名:思源黑体-常规,14号字体,色值:828282。

app列表栏原型设计细节

第四步:增加app播放栏原型设计细节

播放栏的元素是最多的,包含了五个图标,这里可以在右上角插件中选择阿里巴巴图标库,在其中找到对应图标,拖拽到框中上下居中对齐,色值:E8E8E8。中间的播放也改成圆形,54x54xp。

需要注意的是这里调整了下5个图标的间距,更具排版亲近原则,播放和上一曲、下一曲的逻辑关系接近,所以它们三个的间距会近一些,间距20xp。播放顺序和播放列表与其他按钮逻辑稍远,所以间距相对较远,间距40xp。

app播放栏原型设计细节

这个阶段的app原型已经非常接近最终效果了,在低保真和高保真之间起到了承上启下的作用,主要解决页面排版、空间布局、字体图标等细节的设计问题,让界面看起来更加丰富。

低保真app原型

3. 设计高保真app原型

第一步:增加原型层次感

在列表栏和播放栏添加40xp的圆角,模拟抽屉效果,让页面看起来更有层次感。

增加原型层次感

第二步:app原型颜色搭配

颜色搭配分为主色、辅助色和中性色,主色一般会使用品牌相关的颜色,或者符合产品调性的颜色,这里使用了蓝色作为主色,辅助色和中性色使用了深灰色和白色。

  • 主色:背景添加上主色-蓝色,色值:0079FF,整体更加符合品牌配色。

  • 辅助色:底部播放栏添加深色,色值:0E173B,让播放栏更加明确,同时画面有深色压住,视觉上更加稳定。

  • 播放按钮使用同样的蓝色,色值:0079FF,在播放栏中更加突出。

app原型颜色搭配

第三步:调整app原型设计细节

搜索栏白底显得过于突兀了,这里将搜索框透明度降低到20%,搜索栏图标和文字改为白色。最后模拟一下头像图片,将画面丰富一下,这样音乐app原型的页面就完成了。

调整app原型设计细节

最后来看下高保真app原型设计的最终效果,高保真原型的主要解决了页面的颜色搭配、调整细节、增加层次感等设计问题,让页面更加完整。

高保真app原型设计最终效果

4. app原型设计标准及总结

将页面中所涉及到的元素按钮制作成组件,可以更好的方便后续页面的设计使用。

制作组件库

通过以上步骤可以清晰的看出,一个app原型从低保真到高保真的转变,这里总结一下三个阶段的主要作用:

  • 低保真app原型页面功能分区、元素大小间距、用户操作体验等初步原型设计。

  • 深入低保真app原型页面排版、空间布局、字体图标等细节的设计,让界面更加丰富。

  • 高保真app原型颜色搭配、调整细节、增加层次感等设计,让页面更加完整。

从低保真到高保真的app原型

5. 使用高效设计工具Pixso设计原型

新一代智能设计工具Pixso在设计app原型上有非常多的神仙功能,不仅可以提高画面品质,还可以大幅提高工作效率。下面列举几个在app原型设计中常用的功能,相信用过之后就再也回不去了。Pixso承诺对个人用户永久免费,企业和团队现在免费试用体验,内置的所有功能皆可免费使用。这对于想尝试更好设计工具的设计师来说是非常好的选择。

Pixso插图

  • 原型起始线框:内置各类设备标准尺寸,可选择手机、平板、电脑、网页、智能手机等设备尺寸,自动创建标准线框图。

  • 智能选择:当有多个要对齐的对象时,智能选择可以将选中的对象图层,均匀排布成行和列。

  • 布尔运算:支持合并形状、减去顶层、区域相交、排除重叠等设计复杂高阶图形。

  • 事件触发器:可选择鼠标或触摸交互,通过单击、拖拽、悬停、鼠标移入离开等触发原型交互事件。

  • 原型跳转:设置该操作,使原型或画板的容器滚动,跳转到顶层框架内的任意对象,导航到另一个画板或打开一个外部链接。

  • 批量导图:当设计稿中有大量的图片需求,可以直接选择批量导入/导出图片,加快设计效率。