UI设计常识

这两天好友的媳妇开始找UI方向的工作,因为没有完整的参与过一个项目从开始的需求分析到成功上线,多少有点对自己信心不足,我是这两天离职,也是对自己找工作没有信心,打脸了。周末大家在一起吃饭的时候多少交流了一些想法和经验,希望能帮她找到一个好的团队,好的工作。今天做个总结,希望能够帮到更多的人。(持续更新中)

请认真阅读以下两本读物。

了解平台中常用的尺寸及相对应的规范

Paste_Image.png

网上有很多关于尺寸总结的文章,但很多总结的都不是很全面,推荐一个网站尺寸规范,在这里你可以你不光可以看到现在2个平台主流手机的尺寸大小,设计规范,Icon设计规范,主流手机的屏幕分辨率。同时这里也集合了Web的相关设计规范及相关的占有率,相信对你一定有所帮助。

切图的相关知识

一个App通常会有很多张切图,iPhone现在会需要@1x,@2x,@3x等图片,Android现在至少需要hdpi,xhdpi,xxhdpi等三种图片尺寸,如此庞大的图片怎么命名和存档才能让开发人员快速找到他需要使用图片呢?
在一个App中切图主要可以分为:背景(bg),按钮(btn),图片(img或pic),图标(icon)等。通常情况下,命名都是按照切图的性质来命名。如:bg_xxx.png、btn_xxx.png,在iOS中,如果的是Retina 屏,通常会在命名的后面加上@2x.png和@3x.png。这里需要注意的的是在通常情况下,我们的命名都希望通用在iOS和Android两个平台,但是因为历史原因Android对图片之间的连接线(-)不支持,所以推荐大家都采用(_)。

  • 背景(bg_xxx.png)
    通常情况下,背景是作为App某一个页面的大的底图或者导航栏(navbar)的背景
  • 按钮(btn_xxx.png)
    在一个App中按钮一般都存在两种状态一般(normal)和点击(highlight),如果你对于App的的细节追求卓越,那你需要设计四种状态一般(normal),点击(highlight),选中(selected),不可点击(disabled)但在命名的时候对于这些状态我们只需要简写就可以了

一般:btn_xxx_n.png,点击:btn_xxx_h.png,选中:btn_xxx_s.png,不可点击:btn_xxx_d.png

  • 图片:pic-xxx.png 或是 img-xxx.png
  • 照片:pho-xxx.png
  • 导航栏:navbar_xxx_n.png
  • 标签栏:tabbar_xxx_n.png
  • 图标:icon_xxx.png

一般按钮及icon在App切图中都会存在多种状态,所以这里的_n 就是用来标注当前切图所代表的状态。在做切图的时候,通常我们都会建立一个GUI文件,在这个GUI文件中,我们把App中所有涉及到切图的文件都汇总到一起,这样会很方便我们的管理和切图。

切图工具推荐

在iPhone6级6Plas还没有出来的时候用这个插件可以搞定iOS级Android两个平台的产品,现在稍稍有个问题,不支持@3x图片输出。不过作者已经在官网上写了声明,不久就会支持啦。使用帮助帖子

国内的开发者做的,效果也很好,作者也开发了其他的一些可以提高设计效率的小插件。大家在使用之前最好线看一下“使用帮助”。

标注软件相关

方便,快捷的标注软件,很多的小的细节都做的很用心。2种版本,付费版和免费版,付费版支持二次修改,免费版只能不支持。60人民币一年,值得拥有.

1.长度标注针对移动端设计,支持px与dp直接的单位转换2.注释的文字字体样式可以自定义3.自带实时放大镜,省却了反复放大的操作。4.长度标注的数字可以自己手动改,设计时可以小小的偷个懒~5.标注的各种颜色可以自定义,灵活性不错。他家的另一款工具也很不错,推荐一下:Colorcube

标示文件只要按一个按钮,选中的图层会自己跑完。完全自动,不用自己拉线对个半天。设定好线的颜色、文字颜色,其他就都交给计算机处理了(19$)

基于PS的一个的插件,也是非常好用,容易上手,但是要每个月9.9$,好丧心病狂。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 141,714评论 1 298
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,817评论 1 254
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,456评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,811评论 0 174
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,501评论 1 252
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,648评论 1 173
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,305评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,107评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,870评论 6 228
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,441评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,211评论 2 213
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,531评论 1 225
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,189评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,074评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,433评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,596评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,953评论 0 164
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,423评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,515评论 2 229

推荐阅读更多精彩内容