1. 蓝湖xd
一、UI设计作品如果是作为展示作品集的话格式一般为pdf格式。
二、如果是平时工作完成过后保存的格式,要具体根据自己用的设计软件确定。用PS的话,格式为psd.
用XD的话,格式直接导出来就行。
用sketch的话,格式就是sketch。
但是现在一般根据开发的流程来说,最后都是要上传到蓝湖这种开发平台,方便开发实现。
2. 蓝湖xd怎么切图
第一、市场分析
商业分析能体现出做某个产品的商业价值,这是对产品整个生命周期最宏观的指导性文件,报告就是这个工作的产出文件。简单的说就是行业前景,意思就是这款新的产品是否有商业价值,产品投放后的回报是多少,这一步应该是高层甚至是创始人对整个市场的把控得出的结论,值得一提的是,新产品和已有产品上新模块功能,在此阶段的分析差别是很大的,新产品的分析难度更大;而已有产品由于已经积累了一定的数据,对行业、用户等都有了较深的理解,做新模块功能时阻力往往会小很多。
第二、产品定位
这个词其实在刚参加工作的同学们听到后,其实挺虚的,我在刚做UI的时候,听到什么产品定位啊,市场分析啊这类的词,其实比较犯困的,想着直接告诉我需求就好了,干嘛还要说这么多虚词,但是工作到3-5年后,其实这些是至关重要的,我认为产品定位的关键信息其实就是指这个产品是干什么的,比如微信就是社交,ins就是照片分享生活,其次就是这个app可以解决什么问题、用户年龄段的分布。
第三、需求阶段
确定了市场方向,就要找到该方向上都有哪些需求是急需被解决的,。在需求环节,你同时也会注意到很多该市场方向上的直接竞争对手和间接竞争对手。这个阶段就跟我们UI很贴近了,市场分析和产品定位都确定后,就该找痛点了,要明确哪些需求是急需被解决的。在这里,PM往往会输出一分竞品分析报告,罗列出竞品的优劣,部分会采用SWOT进行分析。
第四、产品设计
这个环节和UI是密不可分的,因为我们在每次做需求的时候,都会看到这个东西,是和我们息息相关的,最熟悉的工作。pm在这个环节里其实就是画原型,写文档;但其实据我这么多年的经验来说,真正牛逼的pm还是很少的,主要表现在原型绘制粗糙、文档描述遗漏以及在UI设计中,反推了不少优于PM的点等等。还有一个原因是大多数资历较浅的pm善于抄竞品,但是往往不知两个产品是由本质的区别。这个阶段基本是由PM和UE完成,交互完成后,会内部进行交互评审,确认交互方案后方可给到UI设计师。
我们在工作中会看到形形色色的原型交互图,但是画的好的其实少之又少,基本见到的就是下面这种的…是不是很惨不忍睹….
PM要在整个产品规划中达到什么目标呢?产品规划中要达到的目标,其实就是产品价值。产品规划中要明确每个阶段的目标是什么,所有的决策和行为都是围绕着这个目标来进行的,最终以数据等可考核的方式来判断是否解决了问题。这就要求阶段性的目标是明确的,比如用户活跃度、成交量等指标,这些都是验证前面几步是否有效的依据。切忌把产品规划做成空中楼阁,无法执行的假大空文件,会严重影响从0-1产品的生命周期。
第五、需求评审
这个基本是产品需求确认后,由产品拉会,每个负责项目的职能人员参会,一般有PM、UE、UI、RD、FE、QA、这五种职责的人参加,进行评审。会议中由PM进行需求文档(大公司一般用wiki)的阐述,根据经验,一般研发提问题最多,原因是因为评审前PM和UE和UI都进行了确认无误,研发和测试也有提一些风险性的问题,比如这个是否可以直接调用代码,如果不行,可能会进行风险预警;还有技术上是否有难点等等。评审完后,研发会进行一个排期。
第六、UI设计师介入,这里分为几点要说:
1.我们拿到项目后,尤其是从来没做过的,不要急于下手去撸图,先要搞清楚产品的意图目的,其次仔细走查整个产品线(这里主要看一下整体app设计调性,字体字号,间距些),然后我们要去进行竞品分析(这里的分析和产品的分析不太一样,我们主要去看视觉层,也就是说找找参考,看看别家是怎么设计的,然后再结合我们的设计意图去下手去做。)
2.当我们决定下手去设计后,要给我们的整体设计进度进行时间预估,然后给出设计排期,排期要根据页面设计+修改的时间进行计算,这样可以避免项目延期,按我来说,比如10个界面,我给自己3天设计,然后给上游确认后,1天修改,那么就是4天时间,如果时间富裕可以再加一天的缓冲,那么就是3+1+1,就是五个工作日;排期最好用keynote或者excel做一个表格,列出具体页面具体出图时间,细化一下比较好。
3.在设计中,我们一般按照@2x进行设计,确保UI规范的正确执行(这里包括icon是否粗细统一、视觉重量是否一致、字体自重是否统一,间距是否按照倍数、颜色是否跟整体产品调性保持统一呢?)
4.切图标注,在@2x的设计图中,切图icon/背景。切图分两种:第一可以切刀切(规定好热区,直接按快捷键s就行),第二可以用组件切(规定好热区,直接右键创建组件,然后双进进去,导出即可);命名规范新手肯定是以中文命名,也是可以的,不过还是要按照正确的方式来命名,一般是:在哪里/是什么/状态/倍数。当然你也可以有更明确的规范。一切ok后,可以上传到蓝湖了。但是部分公司现在用figma~也是很不错的。
5.开发完后,我们需要对我们的UI设计稿进行视觉还原,也就是走查联调阶段。强调一下(没有什么是技术写不了的,如果开发说没法做,那么他一定是很懒)这个阶段很重要,据我的经验,有的开发还原度极低,基本50%,有些大厂有个原则是:如果开发还原度低于60%,那么打回开发重新调整后再去走查。基本走查字体字号字重、颜色、间距、icon、边距这些规范类的东西,你会发现开发真的是写的不太好~~~,走查联调基本达到95%就差不多ok了。
走查联调的步骤是:我们要用好几部不同品牌的测试手机去看,因为可能一部手机ok的话,另一部可能会出现小的误差,比如还要兼容适配刘海屏,@3x的屏等等问题,我们在测试手机上把每个界面截图后,放到wiki里,标注问题所在,然后再把UI图贴图给开发做参考,这样开发看起来就很明确了。联调一次如果还有问题,可以有2次3次联调,待开发还原到90%的时候,我们可以搬个小板凳去开发旁边亲自调细节问题,直到自己满意为止。
6.QA测试环节
这个环节其实绝大多数设计师的通俗感受就是:测试就是用来提bug的~没错儿,通俗来说确实是这样的,bug的确是影响整个产品的最大的障碍,项目上线必须确保无bug才行,解bug的优先级是最高的。准确来说,QA是check研发实现的功能与产品、UI、交互设计的是否一致。找些异常情况、及优化,把控项目的质量环节,其实大家可以理解为类似风控吧~
这里有一个小点就是:正式全量上线前会先上线到tips环境,那么什么是tips呢?其实就是为了测试,有时候测试环境的数据和线上不同,可能有些问题在测试环境体现不出来,所以要先到tips,tips环境与线上共用数据。
7.产品验收环节
产品从0-1的过程中,产品验收是非常重要的一个环节,产品验收的最终结果是上线,不过在此之前可能会经过反复的修改。
产品上线之前需要通过测试、UI验收和产品验收,这是控制产品质量的必要手段。产品验收更重要的是通过产品角度验收开发是否满足了产品需求,侧重点在于业务逻辑,对需求负责。
3. 蓝湖xd插件用不了
说的简单点两者最大的区别就在于,平面都是印刷的东西多一些,当然也有一部分是荧屏显示的。而UI用最简单直观的理解其实就是说都是关于屏幕上显示的东西!
在细点的说,平面涉及的都是一些静态的东西,比如海报啊,易拉宝,名片,等等。而UI几乎都是一些动态的界面,但是需要设计做的是一个静态的界面,至于动态怎么加上去,那是前端和交互去加的!
最直观的,ui设计用ps做的东西都是RGB格式,也就是所谓的三色,屏幕上显示的格式!而平面设计用ps做的大多都是CMYK格式,也就是四色打印机喷色用的格式!
前后两者其实也是有很大关系的,UI设计前期的基础就是平面设计!例如,排版啊,色彩搭配啊,这些都是基础,用到UI里面,就会利用这些基础怎么让界面更简单明了,更容易让人看起来舒服,更容易操作,等等!
4. 蓝湖xd插件灰色
UI设计师的要求掌握了PS,Illustrator,AE,DW,Indesign,ARP,XD这几款软件和思维导图,蓝湖,墨刀这几款插件完美足够啦,插件可以自己选学,如果把这几款软件都学会啦,基本的UI设计工作是完全没有问题的。
一、Photoshop
Photoshop是图像编辑和设计软件,相信大家再熟悉不过了。现在不光是设计行业,一些非设计类岗位在招聘人员的时候也更加倾向于会使用Photoshop的人,因为现在很多行业都会用到PS来简单改图,新媒体行业更是如此。那么UI设计行业的从业者当然就得更加精于Photoshop,才能够做出更好的设计、拿到更高的薪资。Photoshop是设计的基础,不管是UI设计还是平面设计、网页设计、电商设计,都需要熟练运用Photoshop,Photoshop也可以说是设计行业的门槛,掌握了它,才能够迈入UI设计行业。
二、Illustrator
Illustrator是矢量图形和插图软件。它主要用来做页数多的宣传品,也可以完成一些简单的图像编辑。复杂的图层设计会先用Photoshop完成,再导入Illustrator进行排列。它是高阶UI设计师需要的技能,也是在UI设计中比较常用到的软件。所以有对ui设计师心动的你还不快到地方获取资料学习的企鹅圈前三个是108中间是379最后是6051。
三、Indesign
Indesign主要用于图书和讲义的排版,也是UI设计师经常用到的,虽然它不能做太多样式的设计、但是排版还是比较有效率的。
四、XD
XD主要用于用户体验设计和原型创建,更多的用于UI交互设计。一些网站设计以及app软件的设计大多数会用到它。不过它对系统的级别和配置要求比较高。
五、CAD
CAD是一个草图绘画软件,用于室内设计、工业设计等三维设计,在设计师当中也算是常用软件之一。有这项技能的UI设计师的工资往往会比没有这项技能的高出很多。
六、各类手绘软件
虽然一些设计软件也可以进行手绘,但是毕竟不是专业的手绘软件,画笔的种类较少,有时候不能很好的表达设计师的思想,所以设计师们在手绘时更倾向于用专业的手绘软件。具体用哪款软件就见仁见智了,设计师会根据手感和习惯,来选择手绘软件。
5. 蓝湖xd插件禁用
XD的优势在于支持 Windws,吊打不至于,工具哪个更好取决于个人,而且两者都可以用蓝湖标注切图,我觉得都挺不错的。
6. 蓝湖xd插件
Mac平台目前最主流的UI设计软件就属【Sketch】了,国内外的一线公司基本上都是使用这款软件做UI设计的,包括国内现在很多中小互联网公司,大部也是用Sketch做为主力设计软件的。
我就下面几点特殊说明下吧
Sketch 是最强大的移动应用矢量绘图设计工具,对于网页设计和移动设计者来说,比PhotoShop好用很多!尤其是在移动应用设计方面,Sketch 的优点在于使用简单,学习曲线低
目前最新版为Sketch 58,需要macOS High Sierra(10.13.4)或更高版本系统。
Sketch是专为像你这样的UI设计师设计的。
有非常实用的功能,直观的界面和强大的插件,它有助于你更专注于做最好的设计。
Sketch软件界面,简单清新,易操作
顶部的工具栏包含所有重要的工具和操作。 右侧的检查器可以调整所选图层的属性。 左侧窗格是图层列表,并列出文档中的所有图层和图板。 最后但并非最不重要的是,中间的画布是您将看到您的设计的地方。
没有浮动面板。 相反,检查器会适应每一时刻向您展示所需的工具,并隐藏所有其他工具。 这样你总是有一个完全视野的视图画布。
Sketch的画布
Sketch的画布是无限大小的; 您可以在任何方向无限滚动,因此您可以完全自由地设置您的绘图区域。
如果您想在无限画布中定义一个固定框架,只需插入一个或多个画板。 例如,当设计移动界面时,许多设计师为应用程序中的每个屏幕创建一个“画板”,并按外观顺序排列。
您可以在具有无限精度的独立于分辨率的视图中查看画布,也可以打开像素预览,您将会准确了解每个像素在导出为位图格式(如JPG或PNG)时的外观。
检查器
右侧的检查器可让您调整当前图层的设置或当前工具的选项。当您选择图层时,您将看到检查器分为几个部分。
触摸栏
对于MacBook Pro用户,Touch Bar可以作为任何应用程序中的附加窗格,Sketch也不例外。根据您在应用程序中的操作,Touch Bar将显示与该特定上下文相关的控件和快捷方式。
Sketch Mirror iOS设备实时预览(Android借助第三方APP也可以实时预览)
Sketch Mirror允许您通过Wi-Fi网络在iPhone或iPad上实时预览您的设计,或通过USB闪电线连接。结合本地分享,您还可以使用网络浏览器在任何设备上预览您的设计。
通过插件Sketch Measure一键导出Html 免去标注烦恼
当然了,你也可以使用在线工具,例如【蓝湖】等,不过如果对保密要求高的公司,建议使用离线插件吧,毕竟把源文件上传,容易信息泄漏的。不过付费部署企业级服务器也是可以的,这样安全也是有保障的,我们一般都是使用离线插件的,Sketch Measure还是挺好用得。
下载安装包双击 Sketch Measure.sketchplugin 完成安装
执行 Plugin > Sketch Measure > Toolbar 或使用快捷键 control ⌃ + shift ⇧ + B
AEUX-Sketch一键导入AE工具-支持最新版Sketch前身是Sketch2AE
喜欢用Sketch做图,然后用AE做动画的同学们的福音啊
使用您喜欢的工具进行UX动效设计
AEUX是After Effects和Sketch 52+的一组面板,用于将图层传输到After Effects,从视觉设计到动效。
AEUX以前称为Sketch2AE,旨在跟上人们为屏幕设计的最新方式。
本次更新,修复了 AE CC 2019 插件安装不了的BUG
工作流程
只需点击几下,即可将动画图层直接传输到Ae中
Sketch
从顶部插件菜单中打开Sketch中的插件面板
在Sketch中选择图层
使用以下任一方式传
Ae -layer数据的选择在幕后传输
导出AEUX.json – 图层数据保存为文件
图像(如有必要)将导出到您指定位置的磁盘
导出完成后会弹出通知
切换到After Effects
After Effects
从顶部菜单“ 窗口”>“扩展”中打开AEUX面板。
点击构建
Sketch的图层数据现在在幕后的应用程序之间传输。一旦可以在Ae中构建图层,您将在面板中收到蓝色徽章和图层计数的通知。粘贴一堆代码的日子已经一去不复返了。确保面板在Ae中打开。
拖放
可以将图层数据导出为独立的.json文件。通过单击导入