案例实战!如何将Material Design 带入到实?#20160;分校?- 优设网 - UISDC

案例实战!如何将Material Design 带入到实?#20160;分校?i class="icon-fire">

2016/12/11 10238评论区

material-design-in-practice-1

编者按:在进行App设计时,有没有什么规范参考标准,还是自己想象一个出来?究竟如何去根据iOS的规范具体实现设计落地?今天@Jaret_杰瑞特?(优酷土豆上海部设计经理)这篇用优酷的实战案例带你入门。

最近,与上海的“谷歌开发者社区”(GDG)一起策划并与大家进行了一期关于Material Design的话题分享会。

这几天?#39029;榭战?#24403;天分享的PPT内容再精简整理了一下,并在关键页面配上了对应的文字说明,便于分享给没有来得及到场?#26696;?#22810;的朋友。

usdic—article—20161211

我?#20351;?#24456;多人这个问题:在进行App设计时,有没有什么规范参考标准,还是自己想象一个出来?

许多人说他们使用“iOS”设计规范标准:“iPhone 6的尺寸做App的统一视觉设计,然后再翻到Android的尺寸上。”- 但这只是一个操作方法,并不是具体的规范描述。

于是我继续追问:究竟如何去根据iOS的规范具体实现设计落地?

无数人此刻脱口而出的一个经典回答是:比如“一个按钮范围大小为最小44x44pt”。还有呢?

此刻?#32423;?#26377;少数人说出几个系统默认的顶/底部栏/系统状态栏的高度及应用icon的显示和典型字体的大小尺寸。然而这类系统通用型的固定控件对我们自己的产品设计参考并没有多少实际作用。我不放弃,继续追问,比如:这个list列表里列表项的高度是多高?#22353;?#19979;方的文本间距是如何进行规范的?

有意思的是,此时大多数人的回答突然从“iOS标准”切换到了“行业普遍现象”,即参照大多数现有的产品/竞品来取个数值。比如:大多数的app都把这个高度设置在“54-58”之间。于是乎,除了“按钮的44×44”,以及几个系统固定的顶/底部bar之外,真正涉及到自己的app设计的时候,似乎iOS的设计规范标准一下子又不见了。

所以我发现,?#33756;?#22914;果使用iOS的设计规范并不能解决现在我所遇到的问题。

usdic—article—20161211(1)

面临的主要问题如下:

1. 由于团队属性的特殊性,团队成员会参与多个不同的业务项目,甚至一个大的业务项会拆分单独的几个业务细化到团队中的不同成员。各做各的,?#20174;?#35201;时常合并各自的设计项目或根据业务需求互相维护迭代,故而造成期间的维护和合作成本比?#32454;摺?/p>

2. 公司虽有自己的主业务设计规范,但规范设定笼?#22330;?#19981;清晰且局限(设定规范的团队仅以本身负责的业务涵盖点出发),在实际工作中无法真正给予各业务端有价值的参考。

3. 大型成熟产品不易轻易颠?#19981;?#37325;新设计,特别是各业务端做为模块集成部分时很难有突破。

突?#21697;?#24335;:

寻找一份详尽、系?#36710;?#21448;灵活的设计规范参考来进行具体业务项目的设计开发。

usdic—article—20161211(2)

usdic—article—20161211(3)

usdic—article—20161211(4)

“广泛性”是指从“List列表”高度的建议参考数值到“按钮”大小的规范展示,甚至到“分割线”的粗细;颜色?#21462;?/p>

“扩展性”是指“List列表”的多种细分状态下的各参数建议到“按钮”最小;最大等可能出现的扩展情况等都有详细的说明。

usdic—article—20161211(5)

usdic—article—20161211(6)

不仅有视觉排版的具体参数建议,还有针对动效设计的一些说明。

usdic—article—20161211(7)

甚至包括(弹窗等)操作提示/反馈等文本描述的文义规范?#21462;?/p>

最右侧上方带有标题的弹窗为iOS系统进行“地点精准化”的提示:“开启蓝牙将能改进地理位置的精准?#21462;薄?#25353;钮文字的“OK”容?#33258;?#25104;对?#27809;?#30340;判?#32454;?#25200;,到底是代表:“OK(开启)”还是“OK(我知道了)”?#31354;?#23545;不同的理解可能会对应不同的结果:1. 完成开启一项功能 2. 仅为告知功能,并未触发任何操作

下方带有标题的弹窗为基于Material Design规范进行的弹窗提示:“添加话题及你?#34892;?#36259;的来源到你?#30446;?#20013;”。按钮文字“明白了”。表示仅被告知到信息,不会触发任何操作。

usdic—article—20161211(8)

usdic—article—20161211(9)

Material Design的诞生就是为了解决多设?#31119;?#22810;平台的关系。 Airbnb最新版本的设计很好的?#25925;?#20102;Material Design在多平台下带来的一致性和便捷性。

usdic—article—20161211(10)

我在进行利用Material Design来规范团队设计前,主要罗列了几项困难挑战点及相应的解决这些难题的方式。

usdic—article—20161211(11)

usdic—article—20161211(12)

usdic—article—20161211(13)

usdic—article—20161211(14)

针对?#26696;?#26434;繁多的需求点及展现,该如何运用MD设计”时,我进行了“逆向”的操作整理方式。第一步,先从整理Material Design标准化模板开始入手。先了解需要遵从的规范是看展一切后续工作的前提。如果连本身参考的范本都不足够了解,也就无法进行合理的参照设计。

参考方法:

将Sketch自带或者在Google官网上下载的PS/Ai版本的Sticker Sheet整理拼合出一个典型页面,包含顶部栏,列表,文本及按钮等(如上图)。并将其模块化,并列出其典型扩展性的属性。如上图:带有头像的列表为例。

usdic—article—20161211(15)

回到自己的项目中,在参考之前进行的Material Design典型标准化模块的基础上,对目前的自己的产品也进行一?#25991;?#22359;化的整理。(尽可能依照之前的Material Design模块来整理自身产品的模块)整理完成后,将整理出来的模块按照Material Design的标准参数进行排版排?#23567;?/p>

usdic—article—20161211(16)

在完成上述过程后,我发现根据之前的业务需求?#22270;?#25215;下来的业务属性,完全根据Material Design的标准模块参数去设计,会与其他业务模块形成比较强烈的对比和差异。此时,不得不进行一些调整来弥补和解决这个问题

usdic—article—20161211(17)

在Material Design的规范中提到所有?#30446;?#20214;都是基于8dp的方形标准网格来进行?#20113;?#24067;局设计,文本/图标元素(工具栏上)都是基于4dp的方形标准网格来进行?#20113;?#24067;局设计。

于是,我通过这个信息并结合Material Design提供的参考,自己设定了一个布?#20540;?#25972;的原则 — “4/8原则”(控件元素?#30475;?#26368;小?#20113;?#31227;动一个整“4dp”,最大?#20113;?#31227;动一个整“8dp”?#28304;?#31867;推:2个,3个4dp…,2个,3个8dp…)

usdic—article—20161211(18)

查阅Material Design中提供的参数可以发现基本都是类似4/8这样的调整。 以List列表为例:“2行带头像”项的标准高度为72dp,列表首行与上一模块间距8dp。“2行带头像”项的紧凑模式高度为60(缩减了3个“4dp”),列表首行与上一模块间距4dp(缩减了1个“4dp”)。

usdic—article—20161211(19)

根据业务需求及往期?#25512;?#20182;业务模块的相对统一性,将实际业务产品按照4/8原则的规范进行?#23454;?#30340;调整。例如在“头像列表模块”的高度在标准的“紧凑模式”60dp下,再缩减一个4dp?#20309;?6dp。发表?#27809;?#19982;其发表的评论文本之间的间距由标准的文本间距8dp缩减为4dp。主文本信息的屏幕?#20113;?#20174;标准的左侧72dp缩减为56dp(缩减了2个“8dp”)?#21462;?/p>

usdic—article—20161211(20)

新旧对比:左侧为原版本实现效果,右侧为基于Material Design规范的优化过效果。可以看出在大的布局结构上并没有太大的奇异和过于夸张的布局变化,但在细节和整体的阅读体验上具有明显的提升。

usdic—article—20161211(21)

在兼容平台上,基于Material Design的模块化设计更容易进行不同平台的迁移。利用Sketch中的Resizing功能可以基本实现快速0成本的Android/iOS双平台的适配。

每个项目,每个团队,每个人都有其独特的一些状况和属性, 仅以我个人在实际工作中的一些经历来分享给大家,?#38431;?#22823;家一起讨论并互相学习到更优的一些技巧和经验。

「Material Design 好文合集」

官方译文:

  1. 《中文版来了!新版Material Design 官方动效指南》
  2. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(二)》
  3. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(三)》

学习?#22987;牽?/p>

  1. 《学霸的自学?#22987;牽aterial Design设计规范学习心得》
  2. 《重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习?#22987;恰?/a>

素材篇:

  1. 《新鲜热辣!一组实用的MATERIAL DESIGN风格素材!》

实战教程:

  1. 《重磅改版!网易新闻安卓客户端MATERIAL DESIGN实战》

?#38431;?#20851;注作者微信公众号:

jrtqr

【优设网 原创文章 投稿邮箱:[email protected]

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:?#39134;?#26368;全的设计师?#38469;櫚己劍?a href="http://hao.uisdc.com/book/" target="_blank">http://hao.uisdc.com/book/。
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,?#38431;?#20851;注获取网页设计资源、下载顶尖设计素材。
设计?#24049;?/strong>:全球顶尖设计网站推荐,设计师必备?#24049;劍?a href="http://hao.uisdc.com" target="_blank">http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.51294208.com/material-design-in-practice

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师 扁?#20132;?#35774;计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 设计师专访 字体下载 psd下载 平面设计 设计趋势 ?#27809;?#20307;验设计 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 ?#27809;?#20307;验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

云南时时彩开奖今天