网页
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


微信打赏

支付宝打赏