在UI设计中,规范的重要性 已回复

会员ID:UI星期五 男 52岁 时间:2016-10-13 03:02:37

▲图片来源: Dribbble

冷,这西安的天气,真让人受不了

从前几天的投票来看,大家对UI设计中的设计规范和色彩投票数最多,今天我们就先讲讲设计规范.

在讲规范之前,大家把自己的ps好好设置一下.  都是干货哦!

▲图片来源: http://www.xueui.cn/

Photoshop新建文档设置

操作:菜单 → 文件 → 新建

宽度:640像素高度:1136像素(4英寸iPhone设备)分辨率:72像素/英寸(ppi)颜色模式:RGB颜色背景内容:白色(可选)颜色配置文件:不要色彩管理此文件(更多颜色设置后)像素长宽比:方形像素

文本设置

字体我一般把字体设置为犀利,如果你是Photoshop CC版本,它有一个Windows LCD/Mac LCD抗锯齿功能,文字可以为网页一样效果了,所以建议升级到Photoshop CC吧。

操作:首先选定文本 → 字符工具(AA)选择Windows LCD/Mac LCD

导出设置

不管我们是做网页不审设计iOS APP应用程序时,导出图像最好是使用”存储为Web所用格式”来导出。

这里通过”存储为Web格式…”导出PNG-24为例,其中默认设置比较重要,如下图:

操作:菜单 → 文件 → 存储为Web格式所用格式

预设:PNG-24透明:勾选交错:未勾选嵌入颜色配置文件:未勾选 (Photoshop CC版本才有)转换为 sRGB:未勾选质量:两次立方

▲来源: http://www.xueui.cn/

先写这几点,后面再补充.开始讲我们的重点,规范.

规范也可以说是尺寸,平面设计师和UI设计师最大的区别就在与规范利用色彩和尺寸.所以给到开发哪里在会做出更利用与开发者他们开发.

IOS篇

iPhone界面尺寸及分辨率

设备分辨率PPI状态栏高度导航栏高度标签栏高度
 iPhone6 plus设计版1242×2208 px401PPI60px132px146px
 iPhone6 plus放大版1125×2001 px401PPI54px132px146px
 iPhone6 plus物理版1080×1920 px401PPI54px132px146px
 iPhone6750×1334 px326PPI40px88px98px
 iPhone5 – 5C – 5S640×1136 px326PPI40px88px98px
 iPhone4 – 4S640×960 px326PPI40px88px98px
 iPhone & iPod Touch第一代、第二代、第三代320×480 px163PPI20px44px49px

iPhone组成元素

iphone的APP一般由4个元素组成,分别是状态栏 导航栏 主菜单栏以及中间的区域内容

我们拿640*960的尺寸设计,来说说

状态栏:就是信号,运营商,电量的区域,其高度:40px

导航栏:就是当前页面的名称,包含相应的分类跳转按钮,其高度:88px

主菜单栏:类似页面的主菜单,提供整个应用的分类,其高度:98px

内容区域:展示应用的相应内容,这个最麻烦,其高度:734px

字体大小

今天先写到这里,这几个我在准备一些规范的.大家先把这些好好吸收一下.大家可以翻看我以前的文章,有一个设计素材干货的文章,极力的推荐大家好好看看.

THANKS

评论 ( 467 条评论)
科普问题免费提问
无需注册,10分钟内回答