UI 设计规范

从设计稿尺寸、屏幕适配、切图、ios/android设计规范等方面讲解UI设计规范的入门知识。

1.设计稿尺寸

(1)app界面构成:布局层,图文排版层,图标层;

界面构成

(2)ios设计搞尺寸:750*1334 px (4.7英寸)
ios界面设计尺寸规范
ps新建预设图
界面分区
ios界面各部分尺寸
ipad设计规范
iphone图标尺寸
iphone图标尺寸

图标用栅格化系统设计
图标设计

(3)设计字体:
iOS 9:英文字体为Helvetica Neue iOS 9:中文字体由为冬青黑 iOS 10:英文字体为San Francisco iOS 10:中文字体为苹方
字体标准

关于字体大小的问题:
顶部操作栏文字大小 34-38px
标题文字大小 28-34px
正文文字大小 26-30px
辅助性文字大小 20-24px
Tab bar文字大小 20px

文字大小只是一个范围,这要根据设计的视觉效果来决定,不要死记硬背,但是切记,字体大小要用偶数。

2.UI

UI定义:
user interface,系统和用户指甲 进行交互和信息交换的媒介,是实现信息的内部形式与人类可接受形式之间当转换;

3.ios&安卓设计标准规范:

1

4.尺寸和切图

各屏幕适配——不同的dpi及屏幕尺寸

(1)专用词

dpi(像素密度)
dpi一般包含:mdi~160dpi、hdpi~240dpi、xhdpi~320dpi、xxhdpi~480dpi
dp即为dip:device independent pixels(设备独立像素)
表示长度、高度等属性时用。
sp=scaled pixels(放大像素). 主要用于字体显示best for textsize。
设置字体时用

(2)换算公式
dp=px /(dpi/160)
dpi=(√(横向分辨率^2+纵向分辨率^2))/屏幕尺寸
sp计算同dp

(3)常用dpi举例
2

(4)原则:
简洁,高效,移动化,情感化,卡片化设计,反馈,一致性,亲密性
1

(5)android设计规范:
3
4
5
6

Thanks!