《UI设计》课件——UI设计--ios设计规范.pptxVIP

;;;IOS是什么？;IOS中的UI设计;IOS图标进化;物理像素、逻辑像素、倍率;px：pixel，像素，电子屏幕上组成一幅图画或照片的最基本单元

pt:point，点，印刷行业常用单位，等于1/72英寸

当photoshop中新建画布的分辨率为72ppi(即72dpi时)，1pt=1px；当新建画布分辨率为72*2=144ppi时，1pt=2px;界面设计尺寸及栏高度;;边距和间距;通常左右边距最小为20px，这样的距离可以展示更多的内容，不建议比20还小，否则就会使界面内容过于拥挤，给用户的浏览带来视觉负担。30px是非常舒服的距离，是绝大多数应用的首选边距。;不留边距，通常被应用在卡片式布局中图片通栏显示，这种图片通栏显示的设置方式，更容易让用户将注意力集中到每个图文的内容本身，其视觉流在向下浏览时因为没有留白的引导被图片直接割裂，造成在图片上停留更长时间。;（2）卡片间距

在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。

以iOS（750*1334px）为例，设置页面不需要承载太多的信息，因此采用了较大的70px作为卡片间距，有利于减轻用户的阅读负担，而通知中心承载了大量的信息，过大的间距会让浏览变得不连贯和界面视觉松散，因此采用了较小的16px作为卡片的间距。;（3）内容间距

在UI设计中内容布局时，一定要重视邻近性原则的运用，比如在右面这款轻芒阅读APP的主界面中，每一个应用名称都远离其他图标，与对应的图标距离较近，保持亲密的关系，也让用户的浏览变得更直观，如果应用名称与上下图标距离相同，就分不出它是属于上面还是下面，从而让用户产生错乱的感觉。;内容布局;内容布局;双栏卡片的布局形式，比较常见于以图片信息为主导的App。例如一些商城的商品陈列页面。这种形式与卡片式类似，但它能在一屏里显示更多的内容，至少4张卡片。同时，由于分开左右两??的显示，用户可以更加方便地对比左右两栏卡片的内容。;界面图片设计比例;控件规范;搜索栏;筛选栏;开关;提示栏;控件配色;建立统一风格的图标;界面文字设计规范;字体的颜色设置我们一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗体（注意要用字体本身的字重，不能用PS的加粗功能）来区分重要信息和次要信息，进行信息层级的划分。;字体;为ios而设计，ios新特性;首先，去除了UI元素让应用的核心功能呈现的更加直接并强调其相关性。

其次，直接使用iOS的系统主题让其成为应用的UI，这样能给用户统一的视觉感受。

最后，保证你设计的UI可以适应各种设备和不同的操作模式，这样用户可以在不同的场景下舒适地享用你的应用。;以内容为核心;保证清晰度;用深度来体现层次;适应性布局;标准手势;可交互元素吸引用户点击;输入信息的方式要简单;1.所有部件的尺寸必须是双数；

2.字号规范大：32/34/36正文：30/28/24/22辅助提示：18/20；

3.普通屏幕下，最小触控点为44*44；

4.常用灰色背景色#eeeeee;1像素线常用色值为#e8e8e8；常用灰色文字：#333如果背景为白色，1像素线也可为#eeeeee；

5.除了广告图片，其他部件最好用形状工具绘制；

6.设计时，可点击的部件尽量和四周边框保持一定距离（一般控制左右20-30px的空间）；

7.设计时，要保持一个使用者而非设计者的思想。因为手机的可显示范围小，所以布局的时候要考虑逻辑性，比如什么时候需要标签栏，什么页面需要标签按钮，都需要好好考虑在使用中的意义；

8.模块常用间距20-30px。;;dp*ppi/160=px;Android的设计尺寸及单位

在设计界面时，经常会借助栅格系统进行辅助设计，栅格的最小单位为8dp。;Android的控件设计规范

按钮;Android的控件设计规范

卡片;对话框

Android的对话框中内容由标题、正文和操作按钮组成，对话框四周的留白通常为24dp。Android的对话框分为有操作项对话框、不带操作项对话框和全屏对话框。

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

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

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

④完成选项操作后，需要确定后才会提交。;①点击对话框中的列表项会直接发出操作，并关闭对话框。

②点击对话框外的区域将会关闭对话框。;全屏对话框右上角的操作项一般