UI设计师切图命名英语/常用英文术语

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名
19317 5 57 2018-08-23

UI设计师切图命名英语/常用英文术语简单收集。

UI设计师常用英语/切图命名英语

切图命名以模块为前缀
如:

模块_类别_功能_状态.png
nav_button_search_default.png/nav_btn_search_def.png(简写)导航搜索按钮(默认状态)
tab_icon_comment_selected.png/菜单栏评论图标(选中状态)

ios切图,实际项目开发过程中,由于时间人力成本等原因,通常只切@2x一套图,以750*1334/iphone6为基稿
设计,输出的切图为@2x图,如需要适配6plus尺寸则需要再切一套@3x的图。

Android切图,由于分辨率不同,需要切多套图适配不同机器,分别为mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi,以720*1280为基稿设计,输出的切图为xhdpi。


输出:
IOS-【@2x图@3x图】+Android-【mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi】共6个文件给开发,把【点九图+图片+logo】单独列出
个别公司会有不同,例如只输出:
IOS-【@2x图@3x图】+Android-【hdpi/xhdpi/xxhdpi】共5个文件夹,把【点九图+图片+logo】单独列出


切图工具:

PC/Mac:大多数情况下有cutterman切图插件在ps中进行,可以直接输出苹果倍数图和安卓适配图。
Mac:Sketch Measure一款极为好用的自动输出标注及切图的插件,但是仅限苹果系统sketch软件使用

标注:Parker/MarkMan/Sketch Measure/标你妹啊-一种在线自动标注软件

Image title

Image title

Image title

Image title

链接了解:

http://www.cutterman.cn/zh
https://zhuanlan.zhihu.com/p/23426898?refer=sketch-app
http://www.biaonimeia.com/login

根据实际情况和进度会有一些不同,要具体情况具体对待。

一大波可爱的英文正向你款款靠近...

界面/interface

启动页:startup page/bootpage

引导页:introductory page

启动:default

首页:homepage/home

图标:icon

按钮:button

导航:nav

广告:banner

图片:image

遮罩:masks

栏:bar

切换开关:switch

列表:list

侧边栏:sidebar

标签:tags/label

我:me

注册:register

菜单:tab

浏览:browse

搜索:search

消息:message/msg

内容:content

其他:else

详情:details

发现:discover

话题:topic

星币:the star money

喜欢:like/love

不喜欢:dislike

收藏:collect

评论:comment

分享:share

定位:location

报名:signup

加入我们:joinus

参与:participate

分割线:cut-off rule

线:line

背景;background/bg

登陆:login

链接:link

头条:headline

地图:map

历史记录:history

时间:time

日期:date

指南:guide

邮箱:email

身份证:ID card

男:man/male

女:women/female


状态/state

显示:display

播放:play

停止:stop

默认:normal/n

选中:selected

按下:pressed/pre

点击:click

点击后:unclick

刷新:refresh

更新:update

弹出:popup

已访问:visited

开:on

关:off

夜间模式:night mode

隐藏:hidden

方位/

左边:left

右边:right

中间:middle

顶部:top

底部:bottom

最开始的:first

第二个:second

第三个:third

最后的:last

页头:header

页脚:footer


开发工具/

操作系统:OS:Operating System

苹果系统:ios

安卓系统:android

字段:fields

前端开发工具:超文本标记语言+层叠样式+脚本动作:Html+css+js

安卓开发语言:JAVA

数据库:MYSQL

数据库甲骨文:ORACLE

微软个人电脑:PC/personal computer

苹果台式电脑:Mac

苹果笔记本:Macbook

网页:WEB

卫星导航系统:GPS/BDS(北斗)

应用程序:Application/APP


人物/

BOSS;老板或者项目负责人

PM:(Product Manager)产品经理

UI :用户界面&设计师,是英文User和 interface的缩写。

UX: (user experience)用户体验/交互&设计师, 国内叫UE,国外叫UX。

GUI:Graphics User Interface 图形用户界面

Customer:消费者/用户


文件格式/

PNG:带透明通道的图片文件

JPG/JPEG:常用图片文件/不带透明通道,压缩率较大,但均衡

PDF:矢量文件集合体,可用ADOBE READER和ADOBE AI或者ADOBE aircrabt打开编辑

SVG:一种网页用矢量文件,可用于开发制作动画,AI可以导出

Gif:导游透明通道的动画图盘/无声音

AI: Adobe Illustrator ;目前最权威的矢量图绘制软件,*.ai是它的格式文件。

psd:PS生成的文件格式,可以再次编辑。

CDR:croel draw生成的格式文件,类似AI的矢量文件,打印社常用这个文件去打印文件

EPS:一种矢量文件,AI和CDR都可以打开

Aep:视频软件AE的源文件

video:视频/mp4/mov/wmv

audio:音频/mp3


软件/

Xmind:一种常用思维导图软件可以导出脑图,有简单修饰功能。

Sketch:苹果系统专属绘图工具,矢量绘图工具,做app很方便

Principle/flinto:苹果系统专属交互原型制作工具,可生成交互演示动画,很好用

Axure:原型制作工具,产品经理用来做原型

PS:在这里不是指游戏机,是目前最强大的图形编辑软件Adobe photoshop。

AI: Adobe Illustrator ;目前最权威的矢量图绘制软件,*.ai是它的格式文件。


行业术语/

图形设计:Graphic Design

以用户为中心设计:UCD:user -centered design

信息架构:IA:information Architect

头脑风暴:Brainstorming

体验层次:Level of Experience

支付宝:Alipay

微信:WeChat

信息架构:Information Architecture

测试,可用性:Test, Usability

全部评论:5

  • 2020-04-20 15:21

    @拾o九:

  • 范三球

    2018-08-29 18:03

    非常感谢您的分享

  • 京鱼小画

    2018-08-24 15:08

    @拾o九: 您好,应该是: user/mine/me_icon__account_recharge@2x 用户中心/图标/账单/充值账单/苹果2倍图... 或者: recharge_icon_account_normal@2x 充值中心/图标/账单/默认/苹果2倍图... 一般支付宝这样的亿级APP会自己制定一套严格切图命名规则,只要按照规则去切图就好了。UI设计师的个人主观性不大,如你对某个命名不确定,可直接问问你们的开发看是否合适,毕竟这些切图最终是交给程序员的。 感谢您的评论,我会持续对本文更新。

  • 拾o九

    2018-08-24 10:40

    请问非功能性也不在某一模块上的图标切图该如何命名?例如支付宝充值记录里的图标。

  • 王雅楠35

    2018-08-23 15:50

    这个好有用

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票