最新消息:文章中包含代码时,请遵守代码高亮规范!

UI设计师基础设计规范【原创】

Android Shirley 344浏览 0评论

网页

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。

 

名称 倍率 分辨率 Icon尺寸
MDPI 1倍 320*480 48*48
HDPI 1.5倍 480*800 72*72
XHDPI 2倍 720*1280 96*96
XXHDPI 3倍 1080*1920 114*114
XXXHDPI 4倍 2160*3840(4K) 192*192

 

 

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


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Shirley的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!