UI界面设计规范

北京/UI设计师/8年前/3410浏览
UI界面设计规范

设计规范是UI设计师的基础


 af91593760fda8012193a387516d.jpg iPhone界面尺寸



4de9593761b4a8012193a3b6a9d7.jpg iPhone app 图标

a330593761e1a8012193a33cee37.jpgd406593761f7a8012193a3407832.jpg 启动图标

     做1024×1024尺寸,一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就

        ok了。 提交时提交没有阴影圆角的直角方形。

     267459376e62a8012193a3b46974.jpg

378559376270a8012193a3fddfef.jpg Android 启动图标切图尺寸

92f459376308a8012193a3c3dade.jpg7da65937631ca8012193a3ab0cad.jpg 常见的字体大小

      24px、26px、28px、30px、32px、34px,36px等等。


a73059376353a8012193a38ce04b.jpg  字体

        中文用苹方黑,英文用San Francisco,如果安不上也可以用Helvetica代替偶数的。最小字号20px。


b377593763a8a8012193a3ace3a3.jpg  IOS开发里单位是pt

     750×1334尺寸的换算关系 1pt=2px,那么就是程序员拿到我们的px单位的标注设计稿,除以2就等

        于pt。


571f5937644aa8012193a3e53663.jpgAndroid安卓系统dp/sp/px换算

    d5a3593771b0a8012193a361cef6.jpg仅需参考主要由程序员换算


cfa059376545a8012193a3706f12.jpg 界面里的小图标常见的尺寸

         24px、32px,48px等,记住4的倍数比较好。

        注意图标需要统一尺寸,以眼睛视觉为主,调整尺寸看上去一样。方形的比圆形的看着要大,需要调整

        下。


bec5593767e9a8012193a3ae4342.jpg 界面里的按钮常见的尺寸

       所有能点击的图片不能小于44px(普通屏幕,以Retain屏幕基准设计时则是88px),实在小的图片可以切上

       空白的像素以满足设计要求。


5cdb59376635a8012193a3c57fcc.jpg 设计稿实时预览

       安装一个Ps Mirror可以在iphone上实时观看效果。


00f959376689a8012193a3a25422.jpg 标注工具

     马克鳗

        Parker标

        PxCook 像素大厨

        一键标注神器-zeplin


14cc59376719a8012193a35213b0.jpg 交接给程序

      最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。


dfe059376740a8012193a387d810.jpg 引导页

      值得注意的是引导页切图需要单独设计多套(640×1136、750×1334、1242×2208)这个不要傻傻

      的Cutterman切几套图,那么就很尴尬了!

a506593770baa8012193a3b2870f.jpg









84
Report
|
161
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
8月的“话”
Homepage recommendation
大家都在看
Log in