UI设计里如何切图?_第2页回答

2021-03-29 09:26发布

12条回答
三岁奶猫
2楼 · 2021-03-30 13:41

APP切图基本知识点以及注意事项:
1、考虑适配Android 各种复杂的分辨率,如主流的1280X720, 800X480, 640X480,480X320,以及各种非主流分辨率。
2、.9神器  png
3、PNG24+jpg
4、可交互控件尽量不小于最小可操作尺寸:android规范是48dp
5、图片中的可视元素尽量在文件中居中,便于对齐和标注
6、能用代码实现尽量避免用图,如单色色值、渐变、文字、分割线等
7、考虑控件的通用性总之切图是个技术活。所以,小伙伴们不得忽视切图的魅力!
APP切图的基本元素的设计
1、按钮的设计
1、你可以真正点击的区域应该尽量大些,至少不应该小于一个手指的宽度,那样的话点击的命中率要高,否则会有“点击不灵敏”的感觉,当然并不是真正的不灵敏,而是没有点中操作的区域。(用户可不管这些理由,多为用户考虑哦)。
2、对于RadioButton、CheckBox至少应该出3个状态的图:正常、点击、选中。有时不能为了方便就只出两个图:正常、选中。这种情况在点击的过程中也有“响应迟钝”的感觉,因为毕竟在点击状态没有换图。
2、排版的设计
对于整体上的设计应该尽量考虑到好用、实用,而不是能用。我自己的体会是这样的。
1、凡是要响应点击或者其他事件的部分应该尽量和屏幕四周的边框保持一定的距离。如果你非得把这部分放在屏幕边上,那么最好放大操作区域。因为屏幕边上点击并不是那么好用(如果设备加了一个保护套,那么屏幕边上就会很难点),至少我用过的有边框的设备,也就是说屏幕边上直接用手去点大部分情况是点不中的。
2、背景和内容的对比度一定要合适。作为有美术基础的都知道这点,但是很多时候在设计的时候就犯这样的错。你的设计一定要考虑到使用环境,如在阳光下。如果对比度不够的话那么在强光的环境下就不好用了,背景和内容就融为一体了,很难分辨。
3、尽量少用对话框。尤其是网页中都会有很多的对话框,久而久之人们对对话框也就产生了反感(至少我是这么认为的),能以更好的方式做提示的情况下就尽量避免用对话框,非用不可的情况下那么建议一个界面不超过两处。老是弹对话框的应用,最终弹走的是用户。
4、界面简洁。这点有两重意思,其一就是界面完成的功能很明确、简洁,其二是同类操作尽量在一个界面完成。感觉上这两点有冲突,其实不然,如果真的不能做到既界面简洁又功能统一那么这个设计最好还是再设计设计。比如用户信息输入功能中第一个界面完成用户名输入、密码,确定后进入第二个界面进行设置头像。像这样的界面的个人认为太罗嗦了。既然都是完成用户信息的功能,那么完全可以设计到一个界面中。这样一来可以把整个功能做得更紧凑,少用一个界面更简洁。
5、使用一定的动画。使用动画进行界面的过度让人感觉更柔和、亲近。现在的应用太多了,而且功能强大,你的应用需要脱颖而出那么就必须与众不同,有时一些简单的动画会给你的应用增色不少。
6、整体布局。我不是专业的美工不过见过很多优秀的应用,应该有发言权吧,呵呵。优秀的应用有些共同的地方,现在总结一下。无论是出于什么考虑,在界面上应该避免左右布局严重不平衡,当然也有故意设计成不对称美的。比如界面的最下面一栏有两个横着排版的按钮,那么这两个按钮最好整体上居中,若是偏左或是偏右那么就有左右不平衡的感觉,要么是左重右轻,要么是左轻右重,看上去有一部分比较空。
7、屏幕适配。Android开发中最麻烦的问题之一就是屏幕适配的问题,硬件厂商太多,屏幕尺寸太多。一个好的应用应该尽可能多的适配更多的屏幕。UI设计过程中就应该考虑到屏幕变宽、变高、变窄、变短的过程中UI应该如何适配。整体上有个原则,屏幕的适配不要改变整体的布局,也就是布局是不变的只是对图形进行拉伸而已(关键是如何拉伸)。

元则清
3楼 · 2021-03-30 17:34

切图是设计师交付给开发的产物之一,设计稿完成后,设计师需要将其切成便于制作成页面的图片。设计师切图时就需要用到切图工具,比如摹客,可以自动切图(支持Sketch、Adobe XD、PS的设计稿),设计师只需在设计稿上进行切图标记,上传至摹客即可,无需手动,开发可以自主下载和使用。

不想说话-
4楼 · 2021-03-31 17:24

通常UI设计出来的界面都被保存为.psd文件(PhotoShop Document),这里找到一个简单的示例.psd文件并且使用PhotoShop工具打开并且找到需要切图的图片元素

在打开的PhotoShop窗口左侧工具栏中选择裁剪工具,右键点击裁剪工具会打开裁剪工具的右键菜单,选择第三个切图工具

鼠标变成切图工具图标后从切图图标的左上角到右下角斜拉出一个正方形框,这号包裹住要切的图标,松开鼠标后图片变成如图的样子

接着点击PhotoShop菜单栏的File->Save As Web...菜单项,也就是保存为Web类型

在打开的保存为Web对话框中选择保存图片为png格式,接着点击保存按钮

在保存配置对话框中选择保存为HTML和图片,切片选择所有切片,接着点击保存按钮

进入前面保存Web对话框中的路径,查看图片目录,发现切图的按钮图标在切片文件夹中,其他的切片是无用的

 0人赞  添加讨论(0)


俞渝
5楼 · 2021-04-07 10:38

可以使用一些轻便工具或者插件:PXcook(像素大厨)、蓝湖

相关问题推荐

  • 回答 195

    你好:关于需要学习几个月能找工作,我的理解和建议如下:1. 首先要确认自身是否有相关的专业积累?因为UI只是设计者手中的工具,它是内在设计思想有效的表达途径。学习软件很容易,但只是掌握工具的运用是远远不够的。2. 如果有相关专业的知识积累,那么工具...

  • 回答 166

    哈哈哈哈  看你是想成多少资产的富婆喽能担起富婆这个称号起码要过百吧UI设计的平均工资是挺高的月入过万不是梦但是在现在这个高消费的社会环境下光靠这个还不够毕竟你一年不吃不喝才12万你可以做UI多赞些钱,然后再做副业...

  • UE和UI是一样的吗2020-11-23 15:33
    回答 98

    UI是英文User Interface的缩写。翻译成中文就是:用户界面,也称人机界面。是指用户和某些系统进行交互方法的集合,这些系统不单单指电脑程序,还包括某种特定的机器,设备,复杂的工具等。UE是英文User Experience的缩写,翻译成中文就是用户体验。是指用户...

  • 回答 8

    不麻烦 首先把这个部分解组 快捷键是 CTRL+SHIFT+G 然后点这个区域 如果点到不需要的元素 就CTRL+3 锁定隐藏,然后再继续点 点到只剩下需要的元素, 把元素弄出来 然后 CTRL+SHIFT+3 显示锁定隐藏,把没用元素删除就可以了。 如果直接点到了需要的元素 同样CT...

  • UI要学多久2020-08-10 19:00
    回答 95
    已采纳

    学会到就业的程度 一般时间为4个月左右,120天时间。 这里说的4个月时间,并不是所有人都是4个月可以学会的, 和学习方法,学习用心程度,学习时间都有关。 如果用错误的学习方法,学4个月是不可能学会的。...

  • 回答 86
    已采纳

    对于UI设计来说,更加看重的是个人的设计能力和理念,以及操作能力,和男女的性别没有太大的关系。

  • 回答 76
    已采纳

    靠谱肯定都靠谱的,就看你自己的兴趣爱好,发展前景都很好,大前端是一种网站搭建,小程序开发等用户端口开发的技术,UI设计就是纯纯的设计师岗位,将设计思维和理念融入到产品运营的每一个交互环节中...

  • 什么叫交互性?2020-04-23 11:40
    回答 6

    其实生活中也有交互性,比如两个人之间的聊天沟通,带有双方的互动都叫做交互。互联网中的交互更多体现在任何互联网设备之间的使用和反馈。

  • 回答 2

    1、初步调查  前期调研对于LOGO设计非常重要。具体周期看项目规模和预算。免费提供logo设计建议和各行业logo设计参考案例。一般情况下,这个时间大约是3天,我们会详细了解企业,对竞争对手的企业logo进行调查分析,这样可以更准确的控制方向,避免logo设计...

  • 回答 1

       永远不要忘记调研  好的设计总是从调研开始。品牌创建需要你预先考虑到所有的细节。  创建品牌、设计LOGO之前需要进行广泛的调研。考虑到在这个过程中你需要对环境和背景中所有的细节都有所掌控,在预算上就一定要留下足够的余地。  此外,你的解...

  • 回答 1

     一、具象表现形式:  具象表现是忠实于客观物象的自然形态,对客观物象采用经过高度概括与提炼的具象图形进行设计的一种表现形式。它具有鲜明的形象特征,是对现实对象的浓缩与精炼、概括与简化,突出和夸张其本质因素。标志设计的形态不可能像绘画的形式...

  • 回答 1

    1.设计应在详尽明了设计对象的使用目的、适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行。2.设计须充分考虑其实现的可行性,针对其应用形式、材料和制作条件采取相应的设计手段。同时还要顾及应用于其它视觉传播方式(如印刷、广告、映像...

  • 回答 1

    Looka Smashinglogo Freelogodesign Hatchful 

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

  • 回答 1

      Naldzgraphics这个网站据说是个人创办的网站,上面所有的内容都是站主本人在日常中通过手机整理上传的。不过就算如此,网站还是收集了大量的平面设计素材。  Brandsof theWorld是世界知名LOGO资源库网站。上面收录了海量的世界知名Logo图标,而且还提供EP...

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

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