IOS和Android规范,UI看什么?(三)

4年前发布

原创文章 / UI
renata芮娜,禁止转载-禁止商业用途-禁止个人用途

本篇说Material Design 设计方法。虽说国内针对Android设计app的不多,但作为一个优秀的规范,有很多先进的设计理念。特别是响应式布局,栅格化,比例分割,按层级配色,统一图标网格等。

*本文基于ios 10&Android 7官方规范进行解读和写作,理解不恰当之处,欢迎指正。本文标注均基于360dp。


上一篇主要对ios 10的UI设计方法细节进行总结分享,本篇说Material Design 设计方法。作为一个优秀的规范,有很多先进的设计理念。特别是响应式布局,栅格化,比例分割,按层级配色,统一图标网格等。Material Design 对于设计有很多详细的理论和指导,虽说国内针对Android设计app的不多,但方法是通用的,连IOS app设计也受到它的影响,我把自己理解到的和大家一同分享交流~



  • 界面基本元素


包含了一个固定的应用程序栏和浮动按钮。底部栏可在需要附加功能的时候有选择性的进行添加。侧边菜单可以覆盖其他所有的结构元素。

从左到右:侧导航,应用程序栏/主工具栏,内容区域和右侧导航。底部:底部栏。7.0中Android底部也有标签栏了,和IOS不同的是,操作栏在顶部,标签栏在底部。当然最有特点的还是侧导航和FAB按钮了。

852059256001b5b3086ed4391773.jpg



  • 布局


  • 响应式12栅格


MD希望能用一套规范适应所有设备,可以说是为自适应而生的。因此MD采用响应式的的布局。提到这不得不说说他们的响应式12栅格。这是一套弹性的栅格,确保了不同层级的一致性的布局,根据临界点的规划重排不同尺寸的屏幕。

临界点呢,是指响应式页面发生布局变化的关键点,比如当屏幕宽度小于480px时加载一种样式,而当宽度在480px至600px之间时加载另一种样式。世上的屏幕尺寸五花八门,开发者不可能也没有必要为每个尺寸都去做设计,选定几个临界点,在两个临界点之间是延续上一个临界点的布局,这样皆大欢喜。


570c59256022a801216a3ebac011.jpg


MD把屏幕按照大小分成五类,分别是:XS,S ,M ,L, XL。480以下属于XS,600~960属于S,1024~1280属于M,1440~1600属于L,1920以上属于XL。

临界尺寸:宽度包括480、600、840、960、1280、1440、1600像素

栅格:12栅格不是固定不变的,600以下是4栅格,600~720是8栅格,840以上是12栅格。

响应式12栅格主要关注间距,而不是列宽。MD布局中有一个8dp准则。在栅格里,手机通常用16dp,平板通常用24dp。

按照这个理论,如果做720的尺寸,可以分成8栏间距16dp的栅格,每栏76。


  • 比例分割


如果说12栅格主要针对纵向分割,那么横向分割主要是按照宽高比来的。

推荐比例:16:9,3:2,4:3,1:1,3:4,2:3。例如在360dp尺寸做一个2:3的图,那么图片高度是540dp。


330c5925606ca801216a3ef5caf6.jpg



配色


MD的配色风格大胆鲜明,亮点突出,主次分明,阴影柔和。官方建议以原色开始,填充光谱色,推荐了500种颜色。这里就不一一放上来了。

他的配色原则非常明确,颜色要分主次,规范中把颜色划分为三种层级:


主色:应用程序中和组件中最常显示的颜色。

次主色:要区别元素之间的层级,可以根据主色的明度来调整。

辅色:主要用于一些局部强调的小元素中,辅色要与主色拉开对比,可以是主色的补色。


MD简直是设计师入门指南好吗?配色苦手的同学用这个方式配色绝对很安全迅速啊。主色通常可以从品牌色里提取,主图也选取近似色,这样一个和谐又清晰的配色方案搞定啦~


6886592560bca801216a3eeb0838.jpg

c3f7592560a8b5b3086ed4c9dd50.jpg

配色中的警戒线:不要阻碍了用户识别和使用。不论处于产品或者视觉层面都不要这样做。如果有收到这样的需求要拿着规范(怼)温柔的解释清楚。

比如,通篇都是重点,全部加粗加红,或者主色,次主色,辅色三者对比小到看不出,粘在一起。


cb8c592560faa801216a3e9d07ad.jpg

这是在测视力吗?


除了彩色,MD对于黑白的显示效果也非常在意,针对不透明也给出了参考,最小值需要好好记住哦,文字和图标最浅38%。分割线是12%。做WEB的同学,最好不要用透明度标注色值,因为......古老的IE会显示有问题 == 


浅背景文字和图标:

4e535925624aa801216a3ed339ec.jpg

深背景文字和图标:

03a75925625ea801216a3efa35b5.jpg




字体

Roboto是Android上的标准字体,中文字体是Noto Sans。字体单位SP

基础的排版字号为12、14、16、20,34。通常中文要比英文标准大1px。


15875925627bb5b3086ed4f8101f.jpg


对于中文内容来说,行高在23~26dp是比较舒适的。


5630592562b5b5b3086ed4ae66a1.jpg


文本对比度同样推荐7:1。最小不能低于4.5:1。文字与背景过于相似阅读起来就费劲了。


0132592562c7a801216a3e5df3d1.jpg




  • 图标


产品图标设计从现实材料的质感和触感中获。像真实纸张一样被裁剪、折叠、照亮。通过干净清晰的边缘来表现坚固,利用微妙的光影变化来展现材料的哑光质感。请欣赏下图google的理性极客派UI设计师做图标的过程。通过做纸模拍摄来得出阴影的深浅和角度。


55355925631ca801216a3ed093ba.jpg


现在你理解他们的风格了吗?科学到可怕ヽ(*。>Д<)o゜没关系,更理性科学极客的还有,比如之后的阴影高度,高度的颜色和距离也是反复拍摄和精密计算得出的哦。

在设计图标的时候可以使用下面这个图标栅格,有便于建立一致性,一般来说图标四周留有2dp的出血框,图标的边边角角是可以出现在出血框范围的,但是不能超出。

 

c3b75925646cb5b3086ed4e0a308.jpg

产品图标为48dp; 边缘为1dp,但在192 x 192 dp(边沿变为4dp)时将其缩放为400%。

58e9592564a1a801216a3ef9c6f7.jpg

系统图标使用较粗的几何线条,要求是:简洁,直观,可操作,一致。

系统图标为24dp,边缘为1dp,如果图标特别密集可以缩小到20dp。所有圆角和线条都是2dp。  9d16592564bda801216a3eafa537.jpg    c74c592564c3b5b3086ed4219108.jpg

特别注意在图标周围流出空间,就算是20的小图标,操作区域也是48哦。并且彼此间隔至少8dp,才能减少误操作。

76fb59256545b5b3086ed43b95ca.jpg



  • UI控件规格


*基于xhdpi

之前提过几次8dp的概念,MD设计中所有的组件都以8dp宽的方形网格为基准对齐,工具栏中的图标使用4dp宽的网格。

 

1c8a5925658fb5b3086ed4f175a5.jpg

188d59256579b5b3086ed4bbc882.jpg

常用组件尺寸:

  • 标题和列表项:72dp

  • 屏幕的左右边距:16dp

  • 内容距离屏幕的左边距:72dp

  • 侧边导航栏宽度= 屏幕宽度 - 56 dp (最大宽度:320dp)            

  • 底部导航栏高:48


346d592565aea801216a3eec6aa6.jpg


  • 状态栏:24dp

  • App bar高度:56dp

  • App bar的左右边距:16dp

  • App bar图标的上下左边距:16dp

  • App bar标题的左边距:72dp

  • App bar标题的下边距:20dp


f08c59256644b5b3086ed49170b8.jpg


  • 工具栏高度:56dp

  • 标题域高度:80dp

  • 标题域底部边距:8dp

  • 描述域高度:72dp

  • 描述域底部边距:16dp

51235925669eb5b3086ed44e86e3.jpg




  • MD的阴影高度

在第一篇里,我们说MD模拟3D空间,所有对象都有x,y和z轴,z轴用于分层。它规定每层模块占据z轴标准厚度为1dp,相当于160PPI下的1px。


11e3592566dfa801216a3eb07b12.jpg


随着物体的高度增加,阴影会变得更柔和、更大;随着物体高度降低,阴影会变得更锐利、更小。

2b00592566eeb5b3086ed47c89d5.jpg


如果元素的阴影相同,那么表示该物体在改版形状,而不是高度。

2efc592566ffb5b3086ed4642b37.jpg


高度(阴影)的规范


b34c59256731b5b3086ed4e64b88.jpg

6
- 位站酷推荐设计师推荐 -
一下给作者疯狂打call吧!
(推荐 + 收藏 + 关注作者)
+1 +1 +1

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    喜欢TA的作品吗?喜欢就快来夸夸TA吧!
    夸夸

    夸夸

    收录收藏夹
    文章 2
    没有新消息
    已收藏到: