教你快速如何去整理总结移动端UI设计规范

关于移动端UI设计规范的案例,25学堂也分享了很多,只要大家在25学堂官网搜索框输入“设计规范”,就至少20种不同APP成熟案例的UI设计方案和设计规范案例。

最近,在APP设计交流群里,很多小伙伴反应看完这些APP设计规范,自己还是不知道怎么去整理,或者说有木有一定的套路来弄。

下面我们就看看史上最简单的,最有效的教你快速去整理总结移动端UI设计规范信息图参考。

0135db599e9813a8012017946c2704.jpg

 

 

但是看完以上的整理总结移动端UI设计规范信息图案例,

25学堂的小编还是想来跟大家,好好回顾下移动端UI设计规范的详细整理过程。

router_app

 

 

一、UI 设计规范的使用对象及场景

1、产品和设计团队参照共享的设计规范。

不管是跟外部的用户体验设计公司合作,还是内部的设计团队执行设计,UI 设计规范都是用来体现大家在产品设计沟通后一致确认的方案输出,以及为后续的产品迭代提供参照依据。

2、为项目相关的技术同事(如前端工程师、iOS / Android 工程师)实际开发和重构提供保障。

技术在实际产品开发的时候,往往喜欢模式化,因为开发的工具语言往往有库、类这样的模块化思维。UI 设计规范通过对一系列元素模块的具体规范,既能与产品开发实现完成对接,同时又便于工程师理解。

 

二、什么时候输出UI 设计规范

一般都是产品高保真界面经过产品、设计和技术共同讨论确认后。如果产品的高保真界面 OK,同时内部设计资源相对有富余,对应的产品设计师就可以整理一份初版的 UI 设计规范,然后后面再填充优化。

 

三、UI 设计规范的三种类型

1、平台(系统)性质,主要对于其平台内生态的设计指南,

例如 Google Material DesignApple Watch Human Interface GuidelinesUbuntu Design

2、品牌物料,主要提供给媒体、第三方公司等用于公关报道和设计

(PS:貌似国内很少看到有这种整理,导致一些媒体报道的 logo 图片千奇百怪),例如 Dribbble - Logo Downloads & Brand GuidelinesLinkedIn Brand Guidelineshttps://www.facebookbrand.com/

3、产品业务相关,主要是产品设计和实现层面的方案,Web 产品居多,同时很多是与前端技术成果相结合,

例如 Starbucks Style GuideOverview | Atlassian Design Guidelines

 

四、UI 设计规范的具体内容划分:

⭐️  品牌 Logo 及相关物料规范;

⭐️  字体排版(Typography),即界面版式设计;

⭐️  颜色(Color)规范,产品主要的颜色库;

⭐️  图标库(Icon);

⭐️  控件库(UI Toolkit),Web 产品与 APP 产品表现形式可能有所差异;

⭐️  视觉框架(Visual Hierarchy),定义产品的交互框架结构,与信息架构相关;

 

以上四点就是整理总结UI设计规范的知识点。希望对各位有帮助

每天更新,
全站高品质素材免费下载!