app设计规范和设计指导原则_详解app设计基本原则

app设计规范和设计指导原则_详解app设计基本原则,第1张

app设计规范和设计指导原则_详解app设计基本原则 现在的Android手机界面样式千差万别,因为手机厂商都有自己独立的一套主题系统,不同品牌的Android手机主题和交互方式也有很大的区别。


这里就针对Android原生Material Design(Google 公司推出的设计语言,翻译为“质感设计”)进行分解,让大家清楚Material Design中的一些设计规范。


Material Design的设计规范细致入微,有很多的设计非常巧妙。


要注意一点,我们必须掌握这些设计规范,但是不应该拘泥于设计规范,而是要去打破它(实际上,Google官方应用也没有全部遵循设计规范,所以不要被条条框框限制住)。


Android的设计原则Material Design的核心理念是还原最真实的体验,保留最原始的形态、空间和过渡变化。


其Material最为重视的就是跨平台的适配性,通过规范化保障了体验的高度一致,这是Google最为独特的地方。


Material Design的作用是统一规范,在平台自适配的同时降低了开发和学习成本。


如下图所示,白色的卡片和导航根据不同机型进行有效地适配,Material Design遵循这一理念,不仅统一了各平台的视觉,而且有效地降低了开发成本。


Material Design的适配» 核心视觉载体(魔法纸片)Material Design中的“魔法纸片”是最重要的信息载体元素,纸片可以层叠、合并或分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形,改变形状。


在处理纸片内容时,例如缩小纸片时,内容大小保持不变,多张纸片可以拼接成一张,而且纸片可以在任何位置凭空出现,如图所示。


魔法纸片» 层级空间在Material Design中引入了Z轴空间,元素离底部越远,投影越重,其中每个元素的基本厚度为1dp,如图所示。


层级空间» 动画Material Design可以还原真实世界的动画运动轨迹,例如加速和减速、急速开始、急速停止等,如图 所示。


强调动画不只是为了装饰,更是为了表达出界面、元素之间的关系。


还原真实世界的动画运动轨迹在Material Design的动画效果中经常会用到水波效果,该效果可以更好地体现 *** 作的位置和与控件按钮之间的关系,如图所示。


水波效果Material Design的转场动画效果可以强调界面与界面之间的关系和层级。


点击图片或按钮后会以圆心点放大的动画进行过渡,有效地体现了页面与页面之间的切换关系,如图所示。


转场动画子父关系的过渡子父关系的过渡在Material Design中,可以巧妙地运用有序的动画来引导用户的阅读视线,这样不仅让界面变得生动活泼,也可以加强用户对界面层级的理解,如图所示。


用动画引导阅读视线Android的控件设计规范Android的界面设计中控件主要包括按钮、卡片、对话框、列表、分割线、菜单、加载方式、选择框和输入框等。


» 按钮Android的按钮控件分为悬浮型按钮、色块型按钮和图形化按钮等,层级依次递减。


悬浮型按钮使用的配色在界面中比较突出,按钮中的图案比较简明,主要作用是加强用户对按钮的 *** 作性,有时候为了避免遮挡,按钮会在下拉的时候自动隐藏,如图所示。


悬浮型按钮色块型按钮从视觉上看起来点击性很强,给用户一种想触碰它的感觉,所以通常放在页面中最重要的按钮上,以方便用户进行寻找,如图所示。


色块型按钮图形化按钮在视觉上看起来比较“轻”,用在界面中时,在视觉上会给人一种整体的感受,经常用在按钮比较多或按钮重复比较多的界面中,这样会让界面显得更为平衡,如图所示。


图形化按钮» 卡片Android的卡片规范统一设计为2dp的圆角,如图1所示。


在界面中需要展现多种内容或是在内容块中包含了丰富的 *** 作,例如点赞、滑动条和评论等 *** 作时,一般都会用到卡片进行设计,如图2所示。


图1 卡片设计规范图2 卡片的用途» 对话框Android的对话框中内容由标题、正文和 *** 作按钮组成,对话框四周的留白通常为24dp,如图所示。


Android的对话框分为有 *** 作项对话框、不带 *** 作项对话框和全屏对话框。


对话框设计规范有 *** 作项对话框如下图所示,在设计时需要注意以下四点。


①点击对话框的区域,不会关闭对话框。


②取消的 *** 作放在对话框的左边。


③ *** 作项的文案要具体,不能只写“是”和“否”。


④完成选项 *** 作后,需要确定后才会提交。


有 *** 作项对话框无 *** 作项对话框如下图所示,在设计时需要注意以下两点。


①点击对话框中的列表项会直接发出 *** 作,并关闭对话框。


②点击对话框外的区域将会关闭对话框。


无 *** 作项对话框全屏对话框右上角的 *** 作项一般是保存、发送、添加、分享、更新和创建之类的 *** 作,这些 *** 作可以是可点状态,也可以是不可点击状态,而左上角一般是取消或返回 *** 作,如图所示。


全屏对话框» 列表Android列表的主 *** 作在左侧,辅助 *** 作在右侧(辅助 *** 作可以是勾选、开关和展开等),如图1所示。


另外,同一列表的 *** 作手势是一致的,如图2所示。


图1 Android列表图2 列表 *** 作的手势保持一致» 分割线Android的分割线如下图所示,在设计时需要注意以下4点。


①列表左边如果有头像或图标元素,其中列表与列表的分割线需要与文字对齐,右边留白。


②列表在左边没有元素时,可以将分割线拉通,使用左右无缝隙的分割线。


③分割线的颜色不要太深,粗细不要超出一个单位(1dp或1px),否则容易导致割裂感太强。


④在使用通栏分割线进行分割时,内容层级要高于左边有留白分割线分割的内容。


Android的分割线» 菜单在点击Android的菜单控件时,菜单控件会在当前页面中展开,其中当前选定中项的背景颜色会显示为灰色,如图1所示。


如果可以选择的项目比较多,菜单项会以滚动条的方式进行显示,用户可以通过上下滑动的方式找到合适的选项,如图2所示。


Android的菜单以滚动条显示菜单项 » 加载方式在Android的加载控件中有进度条加载和环形加载两种方式。


其中进度条加载分为已知加载、未知加载、缓冲加载和未知加载查找4种加载方式,这些加载进度条只出现在卡片的边缘,如图所示。


加载进度条只出现在卡片边缘已知加载进度条:这种加载方式是从左往右进行加载,加载的进度条会填充颜色,直到满格加载完为止,如图所示。


已知加载进度条未知加载进度条:这种加载方式表现为有色线条从左往右循环位移,直到加载完毕进度条消失为止,如图所示。


未知加载进度条缓冲加载进度条:这种加载方式的进度条首先会从左往右进行预加载,同时进度条会显示为蓝灰色的点状效果,当完整地读取数据后进度条才会进行颜色填充,如图所示。


缓冲加载进度条未知加载查找进度条:这种加载方式出现的频率比较低,其加载形式分为两个动画组合,首先有色线条会从右往左循环位移表示查找数据,查找到数据后再进行颜色加载,同时颜色会从左往右进行填充,如图所示。


未知加载查找进度条环形加载不仅可以在页面信息加载中使用,还可以在悬浮按钮中使用,例如点击下载的按钮进度条出现在按钮边缘,如图所示。


进度条出现在悬浮按钮上环形加载也分为已知加载和未知加载两种,其中已知加载的效果和进度条的已知加载效果一样,都会进行颜色加载填充,而未知加载的圆弧不会闭合,如图所示。


环形加载» 输入框Android的输入框通常用横线来设计,粗细为2dp,如图所示。


激活后的输入框的横线颜色会高亮显示,没有激活的输入框横线会显示为灰色。


另外,不可点击的输入框文字及横线都会显示为灰色效果。


Android的输入框» 选择框在填写信息的时候会用到选择框,例如单选、多选和开关等,其中单选的样式通常为圆形点,多选为方形加勾选,开关为左关右开,如图所示。


从视觉上来看,有颜色的状态表示选中状态,灰色的状态表示未选定或关闭状态。


ndroid的选择框Android的设计尺寸及单位在设计界面时,经常会借助栅格系统进行辅助设计,栅格的最小单位为8dp,如图所示。


栅格系统在Android系统中,界面大小一般设计为1080px×1920px,其中状态栏高度为72px,导航栏高度168px,在导航栏中使用的icon的大小范围为64px×64px,而底部栏的高度则为144px,如图所示。


界面常用设计尺寸在信息流的设计中,左右的间距会保持一致,通常设定为32px,从而保证有足够的留白,如图所示。


信息流中的文本、图片和头像都会依据间距进行左右对齐,以此来保证页面的规则性。


信息流的留白间距在1080px×1920px的设计图中,文字要有主次。


把字号大小分为3个级别,例如主文案的昵称会设置为46px,描述文字会设置为36px,而最小字号的时间等信息文字的大小会设置为30px,如图所示。


设计图中的字号设定在界面中经常会出现单行列表的样式,这种样式的高度为144px,列表中的文字字号大小为44px,如图所示。


其中列表被点击或选中的效果可以统一设置为品牌色的色值,而透明度可以设置为10%,这样的设计会让品牌印象贯穿在整个页面中,更容易让用户记住产品的特点。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/642404.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-17
下一篇 2022-04-17

发表评论

登录后才能评论

评论列表(0条)

保存