精华内容
下载资源
问答
  • Android UI 设计规范

    千次阅读 2020-01-10 12:00:10
    不透明度 16进制值 100% FF 95% F2 90% E6 85% D9 80% CC 75% BF 70% B3 65% A6 60% 99 55% 8C 50% 80 45% 73 40% 66 35% 59 30% 4D 25% 40 20% 33 15% 26 10% 1A 5% 0D 0% 00 1.4 标注 Android 设计规范中间距单位...

    1. 基础常识

    1.1 主流屏幕尺寸

    标识屏幕尺寸
    hdpi480 * 800
    xhdpi720 * 1280
    xxhdpi1080 * 1920

    1.2 图标尺寸

    标识启动图标尺寸菜单图标尺寸
    mdpi48 * 48 (160 DPI )24 * 24
    hdpi72 * 72(240 DPI)36 * 36
    xhdpi96 * 96 (320 DPI)48 * 48
    xxhdpi144 * 144(480 DPI )72 * 72
    xxxhdpi192 * 192 (640 DPI)96 * 96

    1.3 颜色值

    Android 定义颜色color时有6位或8位值的区别,6位(如:#0470C4)就是RGB,值8位(如:#1E000000)头两位是透明度,后6位是RGB值,00是完全透明,FF是完全不透明,比较适中的透明度值是 1E。

    不透明度16进制值

    格式如#00FFFFFF,前两位代表不透明度的十六进制。00表示完全透明,FF就是全不透明。依次递增。

    不透明度16进制值
    100%FF
    95%F2
    90%E6
    85%D9
    80%CC
    75%BF
    70%B3
    65%A6
    60%99
    55%8C
    50%80
    45%73
    40%66
    35%59
    30%4D
    25%40
    20%33
    15%26
    10%1A
    5%0D
    0%00

    1.4 标注

    • Android 设计规范中间距单位是 dp,dp 在 Android 机上不同的密度转换后的 px 是不一样的,所以按照设计图的 px 转换成 dp 也是不一样的。
      现在,多数标注工具都支持 dp 标注功能,比如 MarkMan,如果UI设计者是按照1280*720的尺寸设计的效果图,在标注时选择xhdpi即可:

    使用 MarkMan 进行 dp 标注

    DP/PX在线转换工具:http://pixplicity.com/dp-px-converter/

    • 字体大小单位是 sp

    1.5 切图

    注意:切图素材文件大小尽量保持 <= 200Kb,主要为png格式。

    2. Material Design相关

    Material Design,中文名:质感设计,是由 Google 推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

    想要深入了解 Material Design,还是建议有空通读一遍官方文档。不过,牢记以下要点,基本能做到90%了。实际上,Google 官方的应用也有不遵照规范的地方,不能太拘泥于条条框框。

    Material Design 中文版文档

    2.1 核心思想

    Material Design 的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

    Material Design 是最重视跨平台体验的一套设计语言。由于规范严格细致,保证它在各个平台使用体验高度一致。

    2.2 材质与空间

    • 材质

    Material Design 中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。

    这些是纸片的魔法特性,真实纸片所不具备的能力:

    • 纸片可以伸缩、改变形状
    • 纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分
    • 多张纸片可以拼接成一张
    • 一张纸片可以分裂成多张
    • 纸片可以在任何位置凭空出现

    不过,魔法纸片有些效果是禁止的:

    • 一项操作不能同时触发两张纸片的反馈

    • 层叠的纸片,海报高度不能相同

    • 纸片不能互相穿透

    • 纸片不能弯折

    • 纸片不能产生透视,必须平行于屏幕

    • 空间

    Material Design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。

    所有元素都有默认的海拔高度,对它进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样的操作,抬升的高度是一致的。

    注意:这不止是设计中的概念,开发人员确实可以通过一个值来控制元素的海拔高度和投影。

    2.3 动画

    Material Design 重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。

    • ** easing **

    动画要贴近真实世界,就要重视 easing。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。

    • ** 水波反馈 **

    所有可点击的元素,都应该有这样的反馈效果。通过这个动画,将点击的位置与所操作的元素关联起来,体现了 Material Design 动画的功能性。

    • ** 转场效果 **

    通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息。

    从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然。

    多个相似元素,动画的设计要有先后次序,起到引导视线的作用。

    相似元素的运动,要符合统一的规律。

    • ** 细节动画 **

    通过图标的变化和一些细节来达到令人愉悦的效果

    2.4 颜色

    颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。

    Appbar 背景使用主色,状态栏背景使用深一级的主色或20%透明度的纯黑

    小面积需要高亮显示的地方使用辅助色。
    其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现(包括图标和分隔线),而且透明度限定了几个值。

    黑色:[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]
    白色:[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]

    2.5 图标

    • ** 桌面图标 **

    桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影。注意避免以下问题:

    • 不要给彩色元素加投影

    • 层叠不要超过两层

    • 折角不要放在左上角

    • 带投影的元素要完整展现,不能被图标边缘裁剪

    • 如果有折痕,放在图片中央,并且最多只有一条

    • 带折叠效果的图标,表面不要有图案

    • 不能透视、弯曲

    • ** 小图标 **

    优先使用material design默认图标。设计小图标时,使用最简练的图形来表达,图形不要带空间感。

    活动区域

    修饰区域

    小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。

    小图标同样有栅格系统。线条、空隙尽量保持2dp宽,圆角半径2dp。特殊情况相应调整。

    小图标的颜色使用纯黑与纯白,通过透明度调整:
    黑色:[54% 正常状态] [26% 禁用状态]
    白色:[100% 正常状态] [30% 禁用状态]

    2.6 图片

    • ** 选用图片 **

    描述具体事物,优先使用照片。然后可以考虑使用插画。

    • ** 图片上的文字 **

    图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间,浅色的遮罩透明度在40%-60%之间。

    对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。

    • ** 提取颜色 **

    Android L可以从图片中提取主色,运用在其他UI元素上。

    • ** 图片加载过程 **

    图片的加载过程非常讲究,透明度、曝光度、饱和度3个指标依次变化,效果相当细腻。

    2.7 文字

    • 字体

    英文字体使用Roboto,中文字体使用Noto。

    Roboto有6种字重:Thin, Light, Regular, Medium, Bold 和 Black。

    Noto有7种字重:Thin, Light, DemiLight, Regular, Medium, Bold 和 Black。

    • 文字排版

    常用字号:

    • 12sp 小字提示
    • 14sp(桌面端13sp) 正文/按钮文字
    • 16sp(桌面端15sp) 小标题
    • 20sp Appbar文字
    • 24sp 大标题
    • 34sp/45sp/56sp/112sp 超大号文字

    长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。

    2.8 布局

    所有可操作元素最小点击区域尺寸:48dp X 48dp。

    栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:

    • 顶部状态栏高度:24dp
    • Appbar最小高度:56dp
    • 底部导航栏高度:48dp
    • 悬浮按钮尺寸:56x56dp/40x40dp
    • 用户头像尺寸:64x64dp/40x40dp
    • 小图标点击区域:48x48dp
    • 侧边抽屉到屏幕右边的距离:56dp
    • 卡片间距:8dp
    • 分隔线上下留白:8dp
    • 大多元素的留白距离:16dp
    • 屏幕左右对齐基线:16dp
    • 文字左侧对齐基线:72dp

    另外注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计。

    还有非常多规范,不详细列举,遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多,距离与尺寸要相应增大。

    2.9 组件(Components)

    显示效果

    标准示例

    底部动作条是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。

    通常以列表形式出现,支持上下滚动。

    也可以是网格式的。

    按钮由文字和/或图标组成,文字及图标必须能让人轻易地和点击后展示的内容联系起来。

    主要的按钮有三种:

    • 悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。
    • 浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。
    • 扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。

    悬浮响应按钮

    浮动按钮

    扁平按钮

    最重要且随处用到的操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。扁平按钮适合用在简单的界面,例如对话框中。

    使用悬浮按钮要遵循以下规则:

    • 建议只用一个悬浮按钮
    • 悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘
    • 悬浮按钮不能被其他元素盖住,也不能挡住其他按钮
    • 列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项
    • 悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线

    悬浮按钮有两种尺寸:56x56dp/40x40dp

    卡片是包含一组特定数据集的纸片,数据集含有各种相关信息,例如,关于单一主题的照片,文本,和链接。卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容,但如果需要它可以临时扩展(例如,显示评论栏)。卡片不会翻转以展示其背后的信息。

    **卡片集**是**卡片**的一个平面布局

    即使在同一个列表中,卡片的内容和布局方式也可以不一样。

    卡片统一带有2dp的圆角。

    在以下情况考虑使用卡片:

    • 同时展现多种不同内容
    • 卡片内容之间不需要进行比较
    • 包含了长度不确定的内容,比如评论
    • 包含丰富的内容与操作项,比如赞、滚动条、评论
    • 本该是列表,但文字超过3行
    • 本该是网格,但需要展现更多文字

    卡片最多有两块操作区域。辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单。其余部分都是主操作区。

    ** 卡片布局准则 **

    字体设计
    正文:14 sp 或 16 sp
    标题:24 sp 或更大
    扁平按钮:Roboto Medium, 14 sp, 10 sp 字间距

    移动设备上的卡片间距
    屏幕边界与卡片间留白:8 dp
    卡片间留白:8 dp

    内容留白
    16 dp

    纸片是一种小块的用来呈现复杂实体的块,比如说日历的事件或联系人。它可以包含一张图片,一个短字符串(必要时可能被截取的字符串),或者是其它的一些与实体对象有关的简洁的信息。Chips 可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图,或者是弹出与 Chip 实体相关的操作菜单。

    狭小空间内表现复杂信息的一个组件,比如日期、联系人选择器。

    Dialogs 用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。 Dialog 可以是用一种 取消/确定 的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入 。

    一些复杂的操作,尤其是每个决策都需要相关解释说明的情况下是不适合使用 Dialog 形式的。

    Dialog 包含了一个标题(可选),内容 ,事件。
    标题:主要是用于简单描述下选择类型。它是可选的,要需要的时候赋值即可。
    内容:主要是描述要作出一个什么样的决定 。
    事件:主要是允许用户通过确认一个具体操作来继续下一步活动。

    Dividers 主要用于管理和分隔列表和页面布局内的内容,以便让内容生成更好的视觉效果及空间感。示例中呈现的分隔线是一种弱规则,弱到不会去打扰到用户对内容的关注。

    列表中有头像、图片等元素时,使用内嵌分隔线,左端与文字对齐。

    没有头像、图标等元素时,需要用通栏分隔线

    图片本身就起到划定区域的作用,相册列表不需要分隔线

    谨慎使用分隔线,留白和小标题也能起到分隔作用。能用留白的地方,优先使用留白。分隔线的层级高于留白。

    通栏分隔线的层级高于内嵌分隔线

    网格列表是一种标准列表视图的可选组件。网格列表与应用于布局和其他可视视图中的网格有着明显的区别。

    网格由单元格构成,单元格中的瓦片用来承载内容

    瓦片可以横跨多个单元格

    瓦片内容包括主要内容(primary content)和次要内容(secondary content)。主要内容是有着重要区别的内容,典型的如图片。次要内容可以是一个动作按钮或者文本。

    为瓦片内容提供一个默认图片。
    网格只能垂直滚动。单个瓦片不支持滑动手势,也不鼓励使用拖放操作。
    网格中的单元格间距是2dp或8dp。

    列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。

    列表由单一连续的列构成,该列又等分成相同宽度称为行(rows)的子部分。行是瓦片(tiles)的容器。瓦片中存放内容,并且在列表中可以改变高度。

    如果列表项内容文字超过3行,请改用卡片。如果列表项的主要区别在于图片,请改用网格。

    列表包含主操作区与副操作区。副操作区位于列表右侧,其余都是主操作区。在同一个列表中,主、副操作区的内容与位置要保持一致。

    在同一个列表中,滑动手势操作保持一致。

    主操作区与副操作区的图标或图形元素是列表控制项,列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作,也可以包含快捷键提示、二级菜单等提示信息。

    顺序固定的菜单,操作频繁的选项放在上面。
    顺序可变的菜单,可以把之前用过的选项排在前面,动态排序。
    菜单尽量不要超过2级。

    当前不可用的选项要显示出来,让用户知道在特定条件可以触发这些操作。

    菜单原地展开,盖住当前选项,当前选项应该成为菜单的第一项。

    菜单的当前选项,始终与当前选项水平对齐。

    靠近屏幕边缘时,位置可适当错开。

    菜单过长时,需要显示滚动条。

    菜单从当前选项固定位置展开,不要跟随点击位置改变。

    菜单到上下留出8dp距离。

    选择器提供了一个简单的方法来从一个预定义集合中选取单个值。

    日期选择器

    时间选择器

    线形进度条只出现在纸片的边缘

    环形进度条也分时间已知和时间未知两种

    环形进度条可以用在悬浮按钮上

    加载详细信息时,也可以使用进度条

    下拉刷新的动画比较特殊,列表不动,出现一张带有环形进度条的纸片。

    滑块左右两边可以放置图标

    或是可编辑文本框

    非连续的滑块,需要标出具体数值

    Snackbars至多包含一个操作项,不能包含图标。不能出现一个以上的Snackbars。

    Snackbars在移动设备上,出现在底部。在PC上,应该悬浮在屏幕左下角。

    不一定要用户响应的提示,可以使用Snackbars。非常重要的提示,必须用户来决定的,应该用对话框。

    Snackbars不能遮挡住悬浮按钮,悬浮按钮要上移让出位置。

    Snackbars的留白比较大,24dp。

    toasts和Snackbars类似,样式和位置可以自定义,建议遵循Snackbars的规则设计。

    小标题是列表或网格中的特殊瓦片,描述列表内容的分类、排序等信息。

    滚动时,如果列表较长,小标题会固定在顶部,直到下一个小标题将它顶上去。

    存在浮动按钮时,小标题要让出位置,与文字对齐。

    开关允许用户选择选择项。一共有三种类型的开关:复选框、单选按钮和 on/off 开关。

    单选按钮(Radio button)

    复选框(Checkbox)

    开关(Switch)

    在一个 app 中,tabs 使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单。

    扩展的 app bar + tab bar

    加入检索 + app bar + tab bar

    默认的 app bar + tab bar

    默认的 app bar + 可滚动的 tab bar

    和 tab 指示器一样的字体颜色

    被锁定滚动的 tab bar

    tab只用来展现不同类型的内容,不能当导航菜单使用。tab至少2项,至多6项。

    tab文字要显示完整,字号保持一致,不能折行,文字与图标不能混用。

    文本框可以让用户输入文本。它们可以是单行的,带或不带滚动条,也可以是多行的,并且带有一个图标。点击文本框后显示光标,并自动显示键盘。除了输入,文本框可以进行其他任务操作,如文本选择(剪切,复制,粘贴)以及数据的自动查找功能。

    简单一根横线就能代表输入框,可以带图标

    激活状态和错误状态,横线的宽度变为2dp,颜色改变

    输入框点击区域高度至少48dp,但横线并不在点击区域的底部,还有8dp距离。

    输入框提示文字,可以在输入内容后,缩小停留在输入框左上角

    整个点击区域增高,提示文字也是点击区域的一部分

    通栏输入框是没有横线的,这种情况下通常有分隔线将输入框隔开

    右下角可以加入字数统计。字数统计不要默认显示,字数接近上限时再显示出来。

    通栏输入框也可以有字数统计,单行的字数统计显示在同一行右侧

    错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。

    字数限制与错误提示都会使点击区域增高。

    同时有多个输入框错误时,顶部要有一个全局的错误提示

    输入框尽量带有自动补全功能。

    提示只用在小图标上,文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。

    触摸提示(左)和鼠标提示(右)的尺寸是不同的,背景都带有90%的透明度。

    2.10 模式(patterns)

    Tabs

    Bottom navigation bar 1

    Bottom navigation bar 2

    Navigation drawer

    侧边抽屉从左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。

    侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部。抽屉收起时,会保留之前的滚动位置。

    列表较短不需要滚动时,设置和帮助反馈跟随在列表后面。

    设置和帮助反馈通常放在侧边抽屉中。如果没有侧边抽屉,则放在Appbar的下拉菜单底部。

    设置界面只能包含设置项,诸如关于、反馈之类的界面,入口应该放在其他地方。

    设置项使用通栏分隔线来分组。7项以下不必分组。如果某项独立一组,考虑把它放在顶部(重要)或放在底部的“其他”一栏中(不重要)。设置项较多时尝试合并,比如把两个相关的勾选项合并成一个多选项。设置项非常多时,使用子界面。

    2.11 资源

    2.12 实践

    知乎安卓客户端Material Design实战规范:http://www.tuyiyi.com/v/40056.html


    欢迎各位小伙伴加入我的qq群:开发一群:454430053 开发二群:537532956   这里已经有很多小伙伴在等你了,快来加入我们吧!

    展开全文
  • Android-APP-UI设计规范
  • 安卓UI设计规范

    2013-05-23 11:50:55
    最新安卓4.1的系统UI开发TYD,三星风格抽屉式操作界面
  • 公司移动 UI 设计规范 说明书 移动 UI 设计规范说明书 修改记录 制定日期 生效日期 制定 / 修订 内容摘要 版本 拟稿 审查 2015.09 2015.09 初稿 0.1 2015.08 2015.08 修订 1.0 1前言 本文档主要为 UI 设计师和前端...
  • 无规矩不成方圆,我们的UI界面设计也是一样,具有设计规范系统建议的规范可以让我们设计具有统一性,界面视觉更美观,今天主要分享安卓版的ui界面规范。概念篇本文主要针对UI界面设计中安卓版的规范进行分享,如果...

    无规矩不成方圆,我们的UI界面设计也是一样,具有设计规范,系统建议的规范可以让我们设计具有统一性,界面视觉更美观,今天主要分享安卓版的ui界面规范。

    概念篇

    本文主要针对UI界面设计中安卓版的规范进行分享,如果你是新手,你就需要仔细的阅读,可能你需要先了解一些基础概念,如果你是牛哄哄的大神,可以选择直接拉到中间,也可以看看,给我奖励咯~互相探讨分享。

    76445485_1.png

    像素

    像素(px)简单的来说就是颜色点。我们的屏幕都是由很多的小块的颜色构成的,这每一个颜色块我们就把它称为像素,如下图所示。就拿我们从小的伙伴马里奥来做个例子,整张就是通过很多不同颜色的点构成的,把所有的颜色点集合再一起,就成了图,而组成的这些点就是我们的像素了。

    76445485_2.png

    DPI

    DPI指的是像素/英寸,直接翻译过来就是每英寸里面有多少个像素点,这个就是DPI。dpi的数值越大,就越清晰,同样拿我们的马里奥举例。第一张图是100dpi的,第二章是10000dpi的,但是的大小一致。简单点说就是一样大小的,第二张上的像素点比第一张多,所以就质量就更加的细腻,更加的清晰。

    76445485_3.png

    分辨率

    分辨率其实跟我们dpi解释差不多,只是范围不同。我们整个显示器,电脑屏幕都是由这些像素构成的,分辨率的意思就是我们整个屏幕里面有多少个像素点,像素越多,我们看到的屏幕越清晰。例如常见的iPhone5的分辨率是640*1136,也就是说屏幕的宽有640个像素,屏幕的高有1136个像素的意思。

    SP

    SP是安卓中专门为字体设计的单位,由于我们市场上安卓手机的分辨率越来越多,所以去适配的时候就出现了很多的麻烦,数据太多。所以安卓为了更好的适配给出了这个设计单位。在mdpi密度的屏幕中:1px=1sp。主要用于字体显示,可以根据用户的字体大小进行缩放,打个比方:

    76445485_4.png

    上面对应的是三种分辨率的屏幕显示,第一个是一倍的mdpi,第二个是两倍的xhdpi,第三个是三倍的xxhdpi。如果mdpi上的字体是12px,那么所对应的是12sp。因为sp在任何分辨率上都不会改变,所以也都是12sp,而xhdpi的字体大小显示就是:12*2=24px,xxhdpi的字体大小显示就是12*3=36px,以此类推。

    DP

    DP也是一个为了安卓适配时用到的单位,安卓为了适配不同分辨率给出的单位,它也不会因为屏幕分辨率大小不一样而发生变化。适配分辨率的时候也是记住,在mdpi密度的屏幕中:1dp=1px,其余的分辨率用倍率乘以这个dp值就行了,如图所示。

    76445485_5.png

    好了,介绍了基本的几个概念,那可能有的人就不明白了,为什么要了解这些概念?

    目前的市场上的手机有不同的分辨率:160/320/480dpi等。所以,我们不可能去记住那么多的数据,因此我们就通过DP这个单位和与PX的转化去记住。注意的是转化的时候不止是图标转化,间距和所有元素的大小也要相应的进行改变。而且还有一点值得注意的是,因为我们设计常用单位是PX ,设计的时候我们用这个单位,但是开发人员则用dp ,所以在这个设计过程中去适配不同的手机,安卓使用dp这个单位来进行px之间的转化,就是一个上述概念中的一个使用单位。

    那么怎么去适配?单位之间怎么转化才可以让开发人员准确的还原我们的设计图,以及在设计过程中该怎么规范设计,去适配不同分辨率的手机呢?

    76445485_6.png

    现在市场上有很多种的系统、比如我们的安卓,苹果、黑莓、windows phone等,身为一个ui设计师,我们都应该对这些系统有所了解,了解完之后再去做APP界面就会更加的得心应手。上表是一张安卓版本的设计参考规范表,首先了解市场上用得最多安卓的分辨率种类:LDPI、MDPI、HDPI、XHDPI、XXHDPI。

    首先我们从上往下来分析上表:

    第一行就是我们的手机分辨率,这个是一定要记住的,比较重要的,我们去做设计图的时候就是利用它的这个分辨率作为尺寸的。

    第二行是密度值,这个是手机出厂的时候手机厂商给的,就是一个英寸里面有的颜色点,比如LDPI这个分辨率的,它每一个英寸里面就有120个颜色点,所以密度值越高,屏幕越清晰,接下来的比例就只是一个相对应的比例了,没什么好说,接下来看一下下面的倍率关系。

    以MDPI为基准,也就是说MDPI是一个一倍的分辨率,那么其它的都给出了它们相应的倍率,去适配的时候就是通过记住这个倍率去进行大小尺寸的转换。那么我们有这么多的分辨率,对应的就有这么多的尺寸,我们去设计的时候应该拿哪一个的尺寸来作为设计稿呢?一般去选择设计稿的时候有两种方法:

    方法1:以一个基本的尺寸(MDPI=320*480或者XHDPI=720*1280) 开始,之后将其缩放到不同的屏幕尺寸。

    方法2:从最大的屏幕尺寸开始,之后为小屏幕去掉一些 UI 元素。

    因为MDPI是一倍的,而XHDPI是两倍,都是整数倍,容易去适配其它的分辨率,如果以XHDPI为设计稿,设计的所有数值都要求是双数的,去转换的时候才能保证不出现小数点,第二种方法的话就比较难去控制,所以一般还是建议用第一种,当然最好的方式自然是每一个分辨率都单独去做一套界面图。

    了解完这些分辨率和用什么尺寸做标准之后,接下来让我们直接看一下界面设计要注意的一些规范。首先先从界面的布局尺寸开始:

    布局规范表

    76445485_7.png

    责任编辑:横走网

    展开全文
  • android ui设计规范

    2013-03-06 14:18:15
    android规范android ui设计规范
  • 另外在项目中很多重要实时依据,我也整理了数据入口供参考,我也做了部分归纳,也希望所有无论是产品,用户体验设计师还是UI设计师,可以做到有据可查,不要盲目拍脑袋。iPhone界面尺寸设备分辨率PPI状态栏高度导航...

    根据网上的一些数据做了归纳,关于尺寸整理是在其他网站找的,具体原始作者是谁我也无从查证,如果原作者看到了可以联系我,我会标识出来出处。另外在项目中很多重要实时依据,我也整理了数据入口供参考,我也做了部分归纳,也希望所有无论是产品,用户体验设计师还是UI设计师,可以做到有据可查,不要盲目拍脑袋。

    iPhone界面尺寸设备分辨率PPI状态栏高度导航栏高度标签栏高度iPhone6 plus设计版1242×2208 px401PPI60px132px146px

    iPhone6 plus放大版1125×2001 px401PPI54px132px146px

    iPhone6 plus物理版1080×1920 px401PPI54px132px146px

    iPhone6750×1334 px326PPI40px88px98px

    iPhone5\5C\5S640×1136 px326PPI40px88px98px

    iPhone4\4S640×960 px326PPI40px88px98px

    iPhone\iPod\Touch1,2,3320×480 px163PPI20px44px49px

    da35ed20441cdb853411fa361567cde1.png

    iPhone图标尺寸设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏iPhone6 Plus (@3×)1024×1024 px180×180 px114×114 px87×87 px75×75 px66×66 px

    iPhone6 (@2×)1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px

    iPhone5\5C\5S (@2×)1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px

    iPhone4\4S (@2×)1024×1024 px120×120 px114×114 px58×58 px75×75 px44×44 px

    iPhone\iPod\Touch1,2,31024×1024 px120×120 px57×57 px29×29 px38×38 px30×30 px

    iPad的设计尺寸设备尺寸分辨率状态栏高度导航栏高度标签栏高度iPad...2048×1536 px264PPI40px88px98px

    iPad 1 - 21024×768 px132PPI20px44px49px

    iPad Mini1024×768 px163PPI20px44px49px

    da35ed20441cdb853411fa361567cde1.png

    iPad图标尺寸设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏iPad...1024×1024 px180×180 px144×144 px100×100 px50×50 px44×44 px

    iPad 1 - 21024×1024 px90×90 px72×72 px50×50 px25×25 px22×22 px

    iPad Mini1024×1024 px90×90 px72×72 px50×50 px25×25 px22×22 px

    e71c95cdfed2c03af59b8930a036b0fe.png

    Android SDK模拟机的尺寸

    屏幕大小低密度(120)中等密度(160)高密度(240)超高密度(320)小屏幕QVGA(240×320)480×640

    普通屏幕WQVGA400(240×400)

    WQVGA432(240×432)HVGA(320×480)WVGA800(480×800)

    WVGA854(480×854)

    600×1024640×960

    大屏幕WVGA800 *(480×800)

    WVGA854 *(480×854)WVGA800 *(480×800)

    WVGA854 *(480×854)

    600x1024

    超大屏幕1024×6001024×768 1280×76

    8WXGA(1280×800)1536×1152

    1920×1152

    1920×12002048×1536

    2560×1600

    Android的图标尺寸屏幕大小启动操作栏上下文系统通知最细笔画320×480 px48×48 px32×32 px16×16 px24×24 px不小于2 px

    480×800px

    480×854px

    540×960px72×72 px48×48 px24×24 px36×36 px不小于3 px

    720×1280 px48×48 dp32×32 dp16×16 dp24×24 dp不小于2 dp

    1080×1920 px144×144 px96×96 px48×48 px72×72 px不小于6 px

    百度流量研究院,提供了“浏览器市场份额”、“操作系统市场份额”、“分辨率使用情况”、“网民地域分布”、“网民上网时间分布”和“流量入口选择”六个报告,每个报告都有全局整体分布及每个具体对象过去2年的历史趋势数据。同时也分为移动端,PC端不同维度和专注方向的数据统计,其中移动端的用户属性,使用行为,移动设备相信对做移动端市场的朋友还是有一定价值,但提醒一下对于PC端分辨率的统计,其中一条360X640不要意外这个其实是手机浏览器。

    Talkingdata智能数据平台包含数据、技术、方案集成等多类合作伙伴的协作平台。同时他们也提供了一些不错的数据报告可以供我们平时做产品的时候作为数据依据,辅助我们更好的做好判断。

    【友盟+】数据报告源自对应用程序每一次启动的挖掘和分析,可以充分展现移动应用的使用细节、发展状况及行业整体趋势, 为移动应用行业 提供准确 、全面、深入的数据观察。

    0

    展开全文
  • 原标题:干货|超全面的移动端UI 设计规范整理汇总(下)来源:优秀网页设计六、APP版式设计规范版式设计又叫做版面编辑,即在有限的版面空间里,将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。...

    原标题:干货|超全面的移动端UI 设计规范整理汇总(下)

    来源:优秀网页设计

    六、APP版式设计规范

    版式设计又叫做版面编辑,即在有限的版面空间里,将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感,在 UI设计中版面设计的原则有哪些呢?

    1. 对齐

    对齐是贯穿版式设计的最基础,最重要的原则之一,它能建立起一种整齐划一的外观,带给用户有序一致的浏览体验。

    cdf1eb2c7c205de758db0b773efdb5dd.png

    2. 对称

    对称是宇宙间的设计哲学,是对立统一规律的本质属性,呈现出一种和谐自然的美,在应用界面的设计中,引导页设计、注册登录输入框和按钮等无一不是对称的设计。

    65910f7e0f4f305cb3854b8b724260d3.png

    3. 分组

    物以类聚,人以群分。分组是将同类别的信息组合在一起,直观的呈现在用户的面前,这样的设计能够减少用户的认知负担,在移动端界面的设计中最常见的分组方式就是卡片,为用户选择提供专注而又明确的浏览体验。

    dacf1fc91bbca997356b7de6304d251a.png

    七、界面文字设计规范

    文字是 APP 中最核心的元素,是产品传达给用户的主要内容,所以说文字在 APP 的设计中是非常重要的,那么,文字的字体如何选择,字号如何设定,是否加粗,颜色如何设置?

    在一款 APP 中字号范围一般在20-36之间(@2x),当然 iOS 11中出现了大标题的设计,字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。

    a6e4eac858a3c0acdbed5bd253d915fd.png

    关于字体:在 iOS 9推出之前设计师普遍采用华文黑体、谷歌思源、冬青等字体进行设计,iOS 9推出了苹果自己的字体——苹方!自此之后苹方字体被广泛应用于移动端设计中。

    关于字体颜色和是否加粗:字体的颜色设置我们一般很少用纯黑色,一般用深灰色和浅灰色、细体和粗体(注意要用字体本身的字重,不能用 PS 的加粗功能)来区分重要信息和次要信息,进行信息层级的划分。

    0e75e8bfedeabda401a1c7812322af83.png

    八、设计适配

    iOS 主流设备的分辨率分别是640x1136px(@2x)(iPhone SE)、750 x1134px(@2x)(iPhone6s/7/8)、1242x2208px(@3x)(iPhone 6s/7/8 Plus)、1125x2436px(@3x)/750x1624px(@2x)(iPhone X)。

    在设计设计中设计师需要设计一套基准设计图来达到适配多个分辨率的目的,我们可以选择中间尺寸750 x1134px作为基准,向下适配640x1136px,向上适配1242x2208px和750x1624px/1125x2436px。

    ee6a0f54750fa17c007cbac9db147387.png

    1. 750×1334向下适配640×1136

    由于750x1334px和640x1136px两个尺寸的界面都是2倍的像素倍率,因此它们的切片大小是相同的,即系统图标、文字和高度都无需适配,需要适配的是宽度。

    为了让大家了解适配的原则,我们以文字描述和图示的方式进行750x1334px到640x1136px的界面推导。

    绘制一个750x1334px的设计图,这是最常见的首页设计图,从上至下分别是状态栏、导航栏、首焦图、主要入口、分割、列表。

    b5a6717770482183e5e4c805e263c7a1.png

    下面开始进行适配,上面提到了由于750x1334px到640x1136px都是2倍的像素倍率,界面的图标、文字大小等都是相同的,所以我们不需要改变图像大小,只需将画布大小改成640x1136px即可,然后再改变横向元素的间距以达到适配的目的。

    首先打开750x1334px的设计稿,执行 Command+Alt+C(改变画布大小的快捷键),鼠标左键单击「定位」的左上角的格子,设置宽高为640和1136,点击「确定」。

    1a0abefb463e725bfb9efc462e6901dd.png

    改变画布大小之后,设计稿的右边和下边都被裁切(上面左图中半透明蒙版覆盖区域),画布缩小成640x1136px。

    上面左图裁切到右图适配完成,做了如下调整。

    导航栏右边的图标向左移动保持和原来的右边距一致,标题居中。

    首焦图高度除以1.17(750/640=1.17得到)后居中,宽度640px。

    主要入口右边的图标向左移动保持和原来的右边距一致,各图标的间距等宽。

    2. 750×1334向上适配1242×2208

    由于750x1334px界面是2倍的像素倍率,而1242x2208px是3倍的像素倍率,也就是说1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍,所以我们在进行适配的时候直接将界面的图像大小变为原来的1.5倍,然后调整画布大小为1242x2208px,最后调整界面图标和元素的横向间距的大小完成适配。

    上面说了整体思路,下面我们来说说具体怎么适配。

    首先对750x1334px的画布执行 Command+Alt+I 命令(调整图像大小),单位设置为百分比,宽高设置为150%,点击「确定」,调整之后的画布大小为1125x2001px。

    bb98c834ccb03bb10dce0b7157d0a16e.png

    紧接着对1.5倍之后的1125x2001px界面执行 Command+Alt+C(调整画布大小),鼠标单击「定位」左上角的格子,调整宽高为1242和2208px,点击「确定」。

    424e6d3d9c46e9bad73a7f135ea4c13f.png

    上面左图拓展画布到右图完成适配做了如下调整:

    导航栏右边的图标向右移动保持和原来的右边距一致,标题居中。

    首焦图的高度乘以1.65(1242/750=1.65得到)后居中,宽度1242px。

    主要入口右边的图标向右移动和原来的右边距一致,各图标的间距等宽。

    注:分割线仍是1px。

    3. 750×1334向上适配1125x2436px(@3x)

    与苹果之前发布的 iOS设备相比,iPhone X 的像素分辨率发生了变化,为1125x2436px(@3x),在实际工作中为了方便向上和向下的适配,我们仍然可以选择熟悉的 iPhone 7(750x1334px)的尺寸作为模版进行设计,只是高度增加了290px;设计尺寸为:750x1624px(@2x)。设计完成之后将设计稿的图像大小拓展1.5倍即可得到1125x2436px(@3x)尺寸的设计稿。

    在适配的时候需要注意,状态栏由之前的40px增加到88px,标签底部预留68px用于放置主页指示器,如下图所示。

    90335777324253548f42d9d06456a0e5.png

    关于主页指示器的适配涉及到两种情况:底部出现标签栏、工具栏等操作设计时,需要将底色下延68px并填充原有颜色,这样的处理可以让底部设计更佳简洁舒适,没有功能操作时,页面底部不需要填充颜色,只需盖住主页指示器即可。

    28bde67c951b68b3dd749bf1502a0d58.png

    对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。但对于如:新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。

    b603758f0998aef8ef5c59cf3e5fa3b0.png

    九、切图规范

    当界面设计定稿之后,设计师需要对图标进行切片提供给开发工程师,通常我们只需要对 icon 进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。

    6fa570d52128f0c3d613ed5dff60fc46.png

    1. 输出切片

    先将设计稿中的图标重新排列在一张新的画布中,保证同样尺寸的图标间距相同,这样做的好处是为图标建立一个控件库,有利于图标的整理。

    给每一个图标建立好参考线之后,用 PS 自带的切片功能,沿着建立好的每个图标的参考线画框即可,注意最后要输出 PNG 格式的切片(PNG 格式拥有更多的颜色和细节并且支持透明)。

    在具体操作时首先要将画布背景色去掉,让画布变成透明,做好切片后执行文件-存储为 Web 所用格式,在对话框中选择 PNG 格式,点击「存储」即可。

    68d96d66ff77caa9bab846365a91e75f.png

    注:图中标签栏图标的底色块是为了保证统一的切片尺寸,可以根据色块建立参考线,具体切图时要将色块去掉。

    2. 切片命名

    切片命名的通用规范是,界面_功能_状态.png。名称应使用英文命名,不要使用数字或者符号作为开头,使用下划线进行连接,例如一个首页处于正常状态下的按钮命名是 home_btn_nor@2x.png。其中界面首页是 home、空间按钮是 btn、状态正常是 normal。为了命名的正确性,设计师需要先和合作的开发工程师进行沟通确认。

    十、设计稿标注

    当界面设计定稿之后,设计师需要对界面进行标注给开发工程师在还原界面时进行参考。借助一些专业的标注工具有利于我们提高工作效率,常用的标注工具有 Mark Man 或 PX Cook。

    在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度;界面的背景颜色、不透明度;各个图标、列表、文字之间的间距。

    67c0625fff4e6387d77c4c6b2f8ccda3.png

    界面标注的作用是给开发工程师提供参考,因此在标注之前需要和开发工程师进行沟通,了解他们的工作方式,标注完成之后宣讲你的注意事项,以更快捷高效的完成工作,并且最大限度的完成视觉高的还原。

    总结

    本文整理汇总了包括界面尺寸、控件间距、版式设计规范、文字设计规范、设计适配、标注、切图等等一系列的移动端UI设计规范,在此期间查阅了大量的资料,共耗时一周完成本文的编写,希望为刚刚从事 UI设计的设计师们提供入门级别的帮助。

    至于为什么只总结了 iOS系统设计规范,而没有 Android系统的设计规范,在这里说明一下,本来安卓系统设计规范也是要涵盖的,但通过查阅资料发现安卓设计规范介绍少之又少,并且标准不统一,借鉴意义不大,所以省略了这部分规范的编写。

    责任编辑:

    展开全文
  • UI : 2022年iOS/Android UI设计规范(1)

    万次阅读 多人点赞 2018-03-27 16:50:43
    1.设计稿与切片稿 a.尺寸 设计稿:iPhone6 750*1334 【2倍】 切图稿:iPhone6 2208*1242【3倍】 Android 1920*1080 ... Android设计时只需做最小的设计调整,提升设计效率 b.切图 IOS切图——3份: ...
  • Android N 系统UI界面设计 Sketch格式 Android N、Android 系统UI设计、app UI、sketch、UI系统、UI规范设计、系统UI设计
  • Android UI规范

    2014-07-31 11:42:55
    Android UI设计规范文档 1 设计原则 2 风格 2.1 设备和显示 Android 驱动了数百万的手机、平板和其它设备,兼容了各种屏幕宽度和比例。利用 Android 灵活的布局系统,您可以创造出从平板到手机都看起来很优雅的应用...
  • UI设计与分享(八)——设计规范UI设计与分享(八)——设计规范UI设计与分享(八)——设计规范UI设计与分享(八)——设计规范
  • 对于UI设计这类需要创新的人而言,想要深入发展,获得高薪,那么必须要有创意。创意对于个人而言,也并不是与生俱来,...那市面上常见的iOS和AndroidUI设计规范是什么呢?又有何区别呢?一、Android设计规范众所周...
  • 手机APP-UI设计规范

    2018-10-26 10:16:04
    手机APP-UI设计规范,IOS和安卓尺寸换算标准,字体大小,统一页面规范等
  • UI 设计规范 IOS Android 系统主流尺寸整理 iPhone 界面尺寸 设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度 12422208 px 401PPI 60px 132px 146px iPhone6P 6SP7P 7501334 px 326PPI 40px 88px 98px iPhone6 - ...
  • Android UI设计》PDF

    2018-08-21 10:24:36
    Android UI设计》面向创建移动应用的产品经理、设计师和开发者,系统讲解了从事Android UI设计必须要掌握的Android平台的主要技术和特性,全面总结了Android UI的设计原理、设计理念和设计模式,并通过一个综合的...
  • UI设计师必备|Android设计尺寸规范

    千次阅读 2020-10-06 11:14:11
    1、字体使用规范 中文字体:思源黑体Source Han Sans / Noto(是一个字体,叫法不同而已) 英文字体:Roboto 注意:安卓的字号单位是SP 720×1280常见的字体大小: 24px、26px、28px、30px、32px、34px,36px...
  • 发现自己从小到大,有些错误一直在犯,两条:童年——现在丢东西——忘记保存粗心错最简单的选择题——忘记最基本的交互设计规范——————————————————————————从优设网抄一遍。Android平台...
  • Android界面设计规范 Android切图标注 安卓开发单位换算 总结 一. 基础概念 1. 什么是DPI? DPI(Dots Per Inch):每英寸点数,表示指屏幕密度。是测量空间点密度的单位,最初应用于打印技术中...
  • 安卓pad设计规范.docx

    2021-06-04 13:46:08
    安卓pad设计规范安卓pad设计规范篇一:Android尺寸标注设计大全和Android切图规范 Android尺寸标注设计大全和Android切图规范 发布于: XX 年 11 月 25 日 by admin 如何让APP设计,APP切图高效的与开发对接,似乎并...
  • Android 4.0 UI设计规范

    千次阅读 2013-08-09 13:43:24
    在拜读和翻译了Android design设计指导后,对比Android 4.0与Android2.3及之前版本的app设计指导,总结了Android 4.0设计的10大改变: 1. 导航栏 (详见模式PATTERNS>导航Navigation)  由之前的物理按键导航(返回...
  • UI——day3.IOS设计规范

    2020-11-13 15:03:07
    一.IOS尺寸规范 PPI(Pixels Per Inch)︰像素密度,所表示的是每英寸所拥有的像素数量PPI数值越高,即代表显示屏能够以越高的密度显示图像。从而得出,显示的密度越高...1)启动图标要求的设计尺寸:1024*1024 圆角180p
  • 没有特殊要求下,建议使用常用1.25行倍值 字体颜色:在安卓设计中很少使用某种色号控制,他是通过纯黑或纯白不透明度控制它的一个显示. 亮色背景上的黑色文本: 1.最重要的文本使用87%的不透明度 2.次要文本也就是较低...
  • Android 仿360ui设计源码

    2021-03-17 21:52:15
    这是android源码仿360恶意广告拦截扫描UI效果,布局主要是采用framelayout,然后主要用到的点就是gallery的setselection,图片是采用的360的截图,可以说是国内android ui设计的经典之作。 
  • 对象为UI设计师和Android工程师等开发人员。2.方法有千种,开发工程师有万个,仅供参考,不喜就拿着你的建议留言,勿喷。3.文档的本质是备份与查看,对外方便协作与对内提升效率。4.文档不是万能的,如果文档查看...
  • 作者详细介绍了安卓的尺寸规范,DP和PX单位之间的转化、栅格化排版、图标规范、切图规范、尺寸标注等。对于设计师有很好的指导作用。
  • Android UI设计规范(google)

    千次阅读 2015-04-07 14:45:31
    字体大小字体颜色 字体行高字间距设计
  • UI设计--苹果和安卓APP界面尺寸规范

    千次阅读 2019-05-23 15:58:57
    2017版

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,249
精华内容 10,099
关键字:

安卓系统ui设计规范