网页

1、常见电脑屏幕分辨率

2、设计通用分辨率及规范：设计图通用分辨率1920*1080（新建画布大小）；设计的主体内容区域（即网站的版块功能区）是900~1200px

3、网页设计常用布局

4、字体字号使用规范

网页正文字体：宋体、思源黑体

字号：最小12px（也是常规字号）；14px（多用于标题）；16px（多用于标题）；18px（多用于标题）等，字号选择需是偶数，不要太大

Android

1、手机屏幕常见分辨率合集

2、设计通用分辨率规范

画布新建：720*1280px

状态栏：50px

导航栏：96px

菜单栏：96px

两边适当留白建议：24px/30px

3、字体字号使用规范

注：做APP设计时，根据人体工学原理字号尽量不要太小，尽量去符合人体阅读，太小会造成视觉疲劳，太大也会导致信息显示不全面容易遗漏信息。字号的设置没有一个完全规范的设定，可以根据手机屏幕做相应调整，为适应开发最好用偶数号字

4、APPicon大小合集

APP上线需要各种尺寸的logo来适用于各个平台以及备案等，设计师需要做的是准备好各个尺寸的logo（APPicon）打包给项目经理。

注：列出的是基本需要的尺寸；由于Android机型及平台比较多而杂，有的特殊尺寸项目经理会反馈设计师

5、切图

安卓手机的市面占有率可谓是很高的，而且机型繁多！那么，问题来了；这种情况下图标如何去适应不同机型以及屏幕分辨率呢？按照dpi的大小，Google吧图标分成了四种模式，即：XXHDPI、XHDPI、HDPI、MDPI，由于Android4.3的出现，现在已经有了XXXHDPI。

Ios

1、手机屏幕常见分辨率合集

2、设计通用分辨率规范

画布新建：750*1334px

状态栏：40px

导航栏：88px

菜单栏：98px

两边适当留白建议：24px/30px

3、字体字号使用规范

PingFang SC,苹方字体(也称苹方黑体)是苹果公司出行的一套官方字体

注：做APP设计时，根据人体工学原理字号尽量不要太小，尽量去符合人体阅读，太小会造成视觉疲劳，太大也会导致信息显示不全面容易遗漏信息。字号的设置没有一个完全规范的设定，可以根据手机屏幕做相应调整，为适应开发最好用偶数号字

4、APPicon大小合集（1024、180、152、120、87、80、76、60、58、40、29）

APP上线需要各种尺寸的logo来适用于各个平台以及备案等，设计师需要做的是准备好各个尺寸的logo（APPicon）打包给项目经理。

5、切图

三倍图：对应1242*2208的屏幕来切的 iPhone plus (abc@3x.png)

二倍图：对应750*1334的屏幕来切的 iPhone6 (abc@2x.png)

一倍图：在二倍图的基础上压缩成50%  (abc.png)

UI设计常用插件

切图：Cutterman

标注：Parker

辅助线：GuideGuide

UI设计类网站推荐

国内：站酷（http://www.zcool.com.cn）

优设（http://www.uisdc.com）

花瓣（http://huaban.com）

Iconfont（http://iconfont.cn）

千库网（http://588ku.com）

国外：Behance（https://www.behance.net）

Droidddle（https://dribbble.com/）

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/24001.html

微信打赏

支付宝打赏