UI入门-你必须会

首先你要会Ps,Ai(Adobe党),这两样工具是必备的作图工具。

一、规范篇(以iPhone6为基础做教程)

1.基本界面:

电池电量条:40px

顶部操作栏(nav)88px

底部导航栏:98px

2.设计字体:

第一套:方正黑体简体、方正中等线黑体(常用)

第二套:华文黑体简体

3.字号:

界面标题:36-40px

界面内容标题:28-32px

界面内容:24-28

辅助文字、备注、说明等:20或22px

4.按钮(图标)尺寸:

顶部:44-52px

底部:44-46px

5.边距

据人体工程学研究,设计稿左右边缘需要空出12-20px的留白,防止误触。

二、切图

iOS篇

1.切图命名规范:

二倍图:XXX@2x.png(5s、6的尺寸下切出来的图)

三倍图:XXX@3x.png(6plus的尺寸下切出来的图)

2.怎么切图?

方案一:利用pscc2014 自带的抽出功能切图(需要将图层或图层组命名)

方案二:利用第三方插件切图(需要将图层或图层组命名)切图插件cutterman

方案三:手动切图(不建议,工作效率太低)

Android篇

点击:Android 点9切图

三、标尺

未完待续。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,499评论 2 237
  • 声明:此次是收集互联网整理,如有侵权请联系本人进行删除 ps:如果大家有的也可以和我讨论,希望你们能提出宝贵建议,...
    小向资源网阅读 11,419评论 2 33
  • 声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,我写的...
    白屏阅读 13,136评论 20 100
  • 以PhotoshopCS6为例,共包括以下六个方面详细笔记一、PhotoshopCS6的安装二、色彩模式及其像素概...
    委婉的鱼阅读 17,038评论 63 352
  • 五一的小长假,我们部门和其他部门一起去了一趟Laguna Bay,它位于菲律宾的吕宋岛,离首都manila大约2小...
    绿芒果君阅读 2,047评论 0 0

友情链接更多精彩内容