如何定义视觉规范?(APP)

常用的手机APP设计工具:

Sketch:常用来制作线框、界面,偶尔绘制图形。MAC电脑专用移动APP设计软件。也是一款快速设计APP界面的软件。

Illustrator & Photoshop:用作图标设计、图形绘制、照片编辑等。

墨刀、axure & After Effect:用来制作交互复杂的产品原型。

常见的手机APP视觉设计流程:

第一阶段:概念设计和原型设计

包括脑图设计、线框图的设计等等。

第二阶段:视觉定义阶段。

确定了使用哪些字体、颜色、布局、形状等元素。

也属于创意阶段,这个是定义手机APP视觉规范的第一个步骤。或者说是雏形阶段。

主要页面的布局与视觉风格需要反复尝试才能找出最适合目标用户,并且能从竞品中脱颖而出的一套。

第三阶段:界面产出阶段。

即产出数页的高精度视觉APP设计稿,即大家熟知的首页、设置、好友列表、个人资料、、启动页、引导页等等。

一旦手机APP视觉语言确认,我们就可以据此制作一个单独文档来搞定APP视觉规范!

第一步,设定颜色、主字体、图形、边距、留白。

第二步,开始设定更精细的原子:标题、文本字体、按钮和输入框。

最后,在故事板中制作基本的文本和图层:

然后通过右键给它们赋予预设的样式。


矩形会自动嵌套预设的风格样式,正如你手动编辑过该标签一样。通过设置边距,按钮会根据标签文本的长度自动适应,通过留白设置可以将故事板内部元素自动对齐。

我们还可以设置更复杂的组织(例如导航栏)来保持各处的一致性。


在此基础上可以添加更多功能,使得通过设置每个元素来自动生成页面、列表、卡片成为可能。改动设计设定会自动应用到所有元素上。这样能够很方便的测试不同的颜色、字体风格等等的效果。

制作界面模板套件将不费吹灰之力,通过预设原生组件就能实现。

下面就是详细的手机APP定义视觉规范案例:

25学堂

(0)

相关推荐

  • 电商简易视觉规范(设计规范)

    电商的崛起使设计师们拥有了更多的发展的方向,不过在这个大数据及消费的时代,营销信息的更迭也非常迅速.这使电商设计师需要非常清楚自己的设计流程及规范.有幸今天找到一篇与电商规范有关的文章推荐给大家,希望 ...

  • 阿里巴巴(1688) APP 8.0 视觉品牌升级手记

    通过对阿里巴巴APP为什么要改版,分析哪些内容需要改变,对每个改版内容的详细透析,得出最优改版方案.这一切的改版都需要从用户的角度出发,让产品更符合用户的需求. 前言 阿里巴巴副总裁.中国内贸事业部总 ...

  • APP如何同时设计 iOS 和 Android?

    不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App.为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和 iOS 设备上的 App. 在理想的情 ...

  • APP概念设计前后那些事儿(扩充作品集)

    学UI网老虎帮的五月妹子:"很多新手UI设计师缺少项目,而想要尝试App概念设计来进行练习或是筹备作品集时,常会有点无从下手的感觉.本篇文章想要通过自己的设计经历和大家分享一些设计思路和,阐 ...

  • ios视觉设计规范说明

    又一套IOS视觉规范的文档,网站已经有好几套了. 作者:Guoyq =========================关于学ui网========================= xueui.cn ...

  • 5个角度让你的APP更精致

    小编:本文通过图片.文字.色彩.图标.留白这几个维度来解剖APP设计,发现那些微妙的细节.作为UI设计师你只需要比别人多提高1px的细节,你的APP设计就会更精致. 当我们打开一个APP时,从视觉层面 ...

  • 如何制作一款APP的设计规范文档?

    规范文档这个东西,目前大部分中小型公司其实是忽略了去制作这样一个系统性的东西.但设计规范本身是个非常有助于保持产品品牌统一的好东西.所以这次想写下关于APP设计规范文档的内容. 几年以前写设计规范文档 ...

  • 网页UI视觉设计规范

    网站视觉设计规范~!很详细,很赞. 相关好文推荐: 网页UI是如何标注的?(附带WEB UI视觉规范文档) 网页设计基础技巧 photoshop切片使用小技巧 教程来自:优秀网页设计

  • JAVA命名规范

    定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,减少项目组中因为换人而带来的损失.(这些规范并不是一定要绝对遵守,但是一定要让程序有良好的可读性) 操作方法 01 Packag ...