UI里的切图有行业规范吗

2020-12-10 16:01发布

8条回答
小猪仔
2楼 · 2020-12-11 11:10

一、切图资源尺寸为双数

智能手机屏幕大小都是双数值,例如iPhone7的屏幕分辨率为750×1334px。为了以为保证工程师在开发时切图资源高清显示,切图资源的尺寸必须为双数。智能手机能识别的最小单位为1px,1px在智能手机中不能被分为两份,所以如果为单数切图的话,手机系统会自动拉伸切图从而导致切图元素边缘模糊,造成开发出来的APP界面效果与原稿效果差距甚远。

二、图标切图输出应根据标准尺寸输出且考虑手机适配

在切图资源输出中,图标切图输出是非常重要的一个部分。在开发中,各机型的屏幕分辨率都不一样,这就需要我们针对一些大屏机型进行适配。

为了适配大分辨率手机,例如iPhone 7plus,在切图时,图标需要输出@2x和@3x的切图,其中@2x的切图能满足双平台大部分机型的适配要求,@3x是用来适配iPhone手机的各种plus版本的手机。

@3x是@2x尺寸的1.5倍,比如一个图标切图@2x尺寸为44px,那么@3x尺寸是66px。

三、尽量降低图片文件大小,提升APP使用速度

图片切图在切图资源中也是非常重要的,例如启动页面、默认图、广告图、新手引导页等。

图片切图通常情况下,文件大小都是相对较大的,不利于用于在使用APP过程中加载页面。所以尽量压缩图片文件大小。

四、可点击部件应当注意其点击区域不小于88px

在iPhone3(320×480px)普通显示屏下,制定了点击区域数值为44px;在iPhone 7(750×1334px)的Retina显示屏下点击区域变成了88px;不管是320×480px尺寸下的44px,还是750×1344px尺寸下的88px,换算成物理尺寸后大致在7mm-9mm之间。

早在人机工程学研究中得出结论,认为人类舒适的触及范围需要在7-9mm,所以iOS官方空间尺寸经常是88px的数值,例如菜单栏的高度就是88px。

五、可点击部件要把相关状态都切图输出,例如:正常状态、点击状态。

在切图时,不能只输出正常状态,还要注意不能遗漏其他状态的切图。这个也是新人经常会出现的失误。


yuixan
3楼 · 2020-12-11 11:49

一般有以下规范:

一、切图资源尺寸为双数

二、图标切图输出应根据标准尺寸输出且考虑手机适配

三、尽量降低图片文件大小,提升APP使用速度

四、可点击部件应当注意其点击区域不小于88px

五、可点击部件要把相关状态都切图输出,例如:正常状态、点击状态。


用户555666
4楼 · 2020-12-11 13:52

一、切图资源尺寸为双数

二、图标切图输出应根据标准尺寸输出且考虑手机适配

三、尽量降低图片文件大小,提升APP使用速度

四、可点击部件应当注意其点击区域不小于88px

五、可点击部件要把相关状态都切图输出,例如:正常状态、点击状态。


1234567
5楼 · 2020-12-11 14:13

一、切图资源尺寸为双数

二、图标切图输出应根据标准尺寸输出且考虑手机适配

三、尽量降低图片文件大小,提升APP使用速度

四、可点击部件应当注意其点击区域不小于88px

五、可点击部件要把相关状态都切图输出,例如:正常状态、点击状态。


皮卡皮卡-李
6楼 · 2020-12-14 13:57

        移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力


yy123456
7楼 · 2020-12-15 10:38

可点击部件要把相关状态都切图输出,例如:正常状态、点击状态

阿怪
8楼 · 2020-12-17 13:37

一、切图资源尺寸为双数

二、图标切图输出应根据标准尺寸输出且考虑手机适配

三、尽量降低图片文件大小,提升APP使用速度

四、可点击部件应当注意其点击区域不小于88px

五、可点击部件要把相关状态都切图输出,例如:正常状态、点击状态。


八九
9楼 · 2020-12-28 17:47

切图严格来说并不是Ui设计师的工作

而是前端工程师的工作

指的是将设计师的设计转化为网页

是一种将设计师的“理想”转化为“现实”的工作

将psd进行切片重组 利用div+css js等等前端开发代码来生成网页的一种技术


相关问题推荐

  • 回答 100

    个人感受,有机会得话就直接先进大厂吧。如果没有机会也可以这样:前期可以先进入小型的公司:优点:自身成长较快,一般情况下,小型企业资金和人员都有限,这就需要你独挡一面,充分理解项目的全流程设计。可能短短两三个月你就脱胎换骨。管理更直接,没有中...

  • 回答 5

    前端跟ui的话都有各自的一个发展,这个也说不好。

  • 回答 24

    AE是做动效的软件,现在UI必须会动效设计。

  • 回答 23

    UI设计现在的市场还是蛮不错的呢,需求量比较大,而且你还有一定的基础,比较好学的,建议选择大一点的机构,有一定的保障,可以实地考察一下

  • Sketch可以抠图吗?2020-09-09 09:23
    回答 10

    Sketch是可以做一些简单的抠图操作的

  • 回答 24

    是的,UI主要是设计,会使用设计类软件就可以,不过会简单的前端代码,找工作会比较有有事的。

  • 回答 24

    可以学,不过你之前没有接触过这个的话,你可能自学起来还是比较难得,最好还是去找个靠谱的培训机构,从入门开始学起

  • UI需要美术基础吗2020-12-16 15:28
    回答 22

    对于设计来说,创意想法是一方面,想到能否准确的表达出自己的想法又是一方面,就比如说有美术基础的会有更多的表现形式,常用到的技能有手绘,写实图标等,优势更多的体现在技能上。UI设计对于视觉表达只是其中的一个方面,只要是被广大用户认可接受的表达都...

  • 回答 9

    首先来说平面设计,通常指的是线下生活中传达信息为主的视觉设计。也是我们常说的视觉传达设计。主要目的是将视觉作为沟通和表现的方式,更好地宣传品牌信息。在我们的日常生活中常见的有标识、出版物、平面广告、海报、广告牌、标志和产品包装。而网页设计则...

  • 回答 11

    没有美术基础可以学习UI设计吗?关于这个问题,我在这里想要先给大家介绍下美术基础是指什么,UI当中需要的又是什么,很多人因为自己没有美术技术就害怕学不好等问题。那么我们首先要了解UI设计当中的美术基础指的是什么,UI设计中的美术基础主要是以素描手绘...

  • 回答 10

    现在对UI设计师的要求,更多的是一种全能型人才,手绘、插画、交互、动效等什么都要会,十八般武艺,UI设计师得会十七成半。  投递简历的时候,你会在很多招聘UI设计师上的任职要求里看到会插画的,有一定手绘能力优先。UI设计中插画到底有多重要呢?  1,...

  • 回答 12

    ps软件通常指的是 Adobe Photoshop,简称PS,是由 Adobe Systems 开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。PS 有很多功能,在图像、图形、文字、视频、出版等各方面都...

  • 回答 5

    矢量蒙板用矢量图形建立蒙板,以约束其下面一层图像的显示和隐藏,矢量蒙板只能用矢量工具(钢笔、自由钢笔、矢量图形)来编辑。图层蒙板通过像素来约束下面图层的显示和隐藏,可以通过像素工具(画笔,橡皮插等工具)画编辑。剪切蒙板则通其本身形状对下面图...

  • 回答 3

    设计师在进行信息的编排与构建时,已经花了较多的时间与精力理解了产品的全部信息和信息之间的层级关系。但是,用户接收信息是从一些具体的信息片段开始,然后到另一个信息片段,他们需要将这些具体的信息补全成设计师脑海中的信息地图。设计师的信息地图是立...

  • 回答 2

    作为一个设计师的最重要技能之一就是你要学习如何去选择排版。这是因为文本是设计师与用户沟通的主要方式之一。排版能成就你的设计,也能毁灭你的设计。一个美观又复杂的排版。有些人将他们全部的事业奉献在了排版上。值得庆幸的是,他们的工作是有据可查的,...

  • 回答 3

    漂亮美观的设计作品,就是好的设计吗?当我在media上发表第一篇文章时,有一位读者问了我一个问题,引起了我的共鸣。她说评判设计的优劣是一种偏主观性的行为,她想知道,是否有人能够设计出一套能够辨别出优秀设计作品的准则。于是我生出了为什么我自己不试...

没有解决我的问题,去提问