发布时间：2022-10-5 分类： 行业资讯
很多时候，我们忙于日常地图和修订，很少理清归纳和思考工作的一些问题和方法，并善于总结反思，以一半的努力达到两倍的结果。今天，U Girl在这里分享她的一些设计经验和技巧，这篇文章收集了前六个精华，希望能给你一些帮助。
目前在业界，iOS的设计规格也不平衡，其中很多仍然是6设备和ios 9系统，现在最新的是iphone 7和iOS 10（更新真的很快）我说的是最新的iOS界面设计规范（Android设计规范，下次再见）
姊妹列出了一个小目录：
一，项目建设
二，项目预计时间
三，界面设计
第四，剪切图标说明
V.视觉恢复
六，在线准备
一，项目项目文章
我是一名UI设计师，所以我在这里所说的是从设计师的角度来解释艺术家应该从头开始在应用程序的过程中做什么。
如果您是一个组织良好的公司，当项目成立时，所有相关人员（产品王，操作喵，设计狮子，程序猿等）将被组合在一起开设产品会议。产品王将解释项目原型和市场。研究分析，市场需求，产品定位，盈利模式等具体功能模块和跳转逻辑，讨论交换原型，改进和完善缺陷，然后评估项目时间，即可开始工作。
注意：当您解释产品并演示原型时，您必须仔细聆听，并且必须完全理解整个逻辑。如果您有疑问或不理解，您必须提出问题并让产品回答。否则，您的设计草案可能看似合乎逻辑。错误等
这时，我们可以建立一个新项目并做好准备。
我的个人项目开发习惯是将文件夹命名为“项目名称+版本号”，因为这种方法对我来说非常方便管理和查找项目文件。一些设计师可能会将所有文件放在一个文件夹中。如果文件很小，如果有更多文件，那么你必须哭。您不知道该文件的哪个版本。
重复修订是设计师的常见做法。当页面被多次重复修改（包括3天和2次更改）时，许多设计人员的源文件应如下所示：
初稿，初稿1，初稿2… …最终稿，最终草案1… …修订草案，修订草案1… …最终稿，最终草案1… …当我看到像我这样的源文件时，我想起了我会呕吐血，因为它太难以区分，这是之前的版本，这是更早的（此时你也看到设计师真的很难，一些几天前，我以为设计师加班，去天堂，天堂没有PS，请点击这里了解详情）
在这种情况下，我只想唱一首诗：甲方已经虐待了我数千次。我希望甲方像初恋一样，有一天要成为一个聚会，并且要滥用世界设计院。
我个人的习惯是用< ;;文件名+修订日期+修订数来命名，例如，栗子，例如“Homepage_4.10”是最终版本，但在4月12日，该产品说主页应该再添加一个。注意，那么我的文件是“Home _4.12”，但它之前和之后已经被改变了3次，也就是说，“Home _4.12.3”rd，一目了然，很容易找到要修改的文件。
当我设置项目时，我只需要向开发合作伙伴解释，他们自然会知道哪个文件是最终版本。
这里的U女孩非常认真地提醒你所有的朋友，不要删除所有修改过的草稿，不要删除它们，不要删除它们（重要的事情说3次），每次修改都是在复制的基础上修改，因为当我们改变很多草稿时，甲方可能会说，“第一个版本很好看，回到第一个版本。”（不要呕吐血或粉碎电脑），所以请数千美元。对副本进行更改。
有人会说我有ctrl + Z，我不怕，你妹妹告诉你不要指望ctrl + Z，如果你从未修改过首选项，默认历史只有20步，最多是200步，如果你设置200步，不怕PS卡崩溃也很宽。
额外插入，对项目的版本控制也非常重要。我使用的项目版本软件控件是SVN。管理项目文件方便快捷，即使我的计算机挂起或系统错误，也可以与本地项目文件同步。所有磁盘都已格式化，我不必担心。我只需更新SVN在线文件，我就会回来。我不会在这里说更多关于SVN的内容。
二，项目估计时间篇
此时，我们已经获得了PRD文档和原型，不用担心打开PS绘图，因为项目的开发需要时间。为了更有效地完成开发进度，整个团队需要将项目时间估计为UI。 ，非常简单，就是几页，看看总共有多少页，然后估算……
U姐给了一个栗子，比如收到一个APP项目，所有的页面总共大约有70个，（纳尼！70页，我的上帝，不要惊讶，70页的APP，不多）
此时，也许老板和产品会问你图片可以完成多长时间。不要担心先回答它。您需要先查看所有页面。他们会一直提醒你，因为他们在线，抓住市场，并希望你每天加班。图，然后上线;敦促你不要照顾他们，让他们急着去（并提醒你你的话，你也可以说：敦促你瘫痪，你快，你来画画，纯粹是个玩笑，如果你敢，那么你真的NB）
1.确定重要页面
什么是重要的页面？在看待面部价值的时代，面部是最重要的，主页是APP的面貌;有许多页面布局主要部分共享相同的布局结构，这也是一个重要的页面。拿主页，你可能需要花2天时间才能完成，所有这些都需要2天，因为你必须确定主要颜色，设计风格，图标设计等，并保证质量（如果你太慢了）你会折磨他：想快点，然后降低质量，有问题，你有责任，拉啦啦~~）
我们都知道鱼和熊的爪子不能兼得。他们想要速度和高品质。这两个是不可能同时保证的，很难平衡它们。
然后选择一个重要的页面，估计时间，等等。在确定主页之后，基本上建立了整个APP的设计风格，并且其他页面更容易做到。
2.过滤重复页面
在应用程序中，实际上有许多页面具有相似的本地结构，因此过滤掉了70页，估计只有一半页面，而且30页没有重复。
插入一句话：在绘图过程中，你无法保证100％保证不会有其他任务，肯定会有一些额外的设计任务，所以不要只估计时间，除非你非常肯定没有额外的。设计任务。
因此，对于剩余的30页，根据我的速度，然后留下足够的时间（超过30％&mdash在实际估计时间;约50％），我可能需要2周完成。
3.总体预计时间
当确定30个主页的时间时，是时候计算剩余的重复页面时间。剩下的40个相当于批次。如果您在一周内购买它们，请不要估计时间太紧。因为你根本不知道老板可能会给你一些事情，你仍然需要担心。最后，你只能自己哭泣。
审查原型→统计筛选页面→重要页面设计（30）→二级页面设计（40）→ review + revision→最终草案
根据我自己估计的时间，有序的不稳定性，以及能够应对突然的设计任务，它在大约3周内完成。在这里，U女孩估计100％失业。
4.网页设计的预计时间
一般来说，如果是大型专题页面设计，我通常估计3天，包括灵感，概念，参考，设计和修改。
如果它是一个代购源码网站，并且有三个级别的页面，大约五页左右，大约需要五天;取决于页数，等等。
三，界面设计篇
我在这里谈论的是从设计师的角度解释一个应用程序应该从头开始做一些事情。
目前在业界，APP接口设计规格也不平衡，其中很多仍然留在6台设备和ios 9系统上，现在最新的是iphone 7和iOS 10（更新真的很快）我说的是最新的iOS界面设计规范（Android设计规范，下次再见）
1.关于设计工具
俗话说：工人必须首先磨练他们的工具。好的工具可以使我们的工作更有效率。我们使用的界面设计最多的是PS和AI。如果您是Mac用户，可以尝试草绘。该软件的版本当然建议用于更高版本，因为该功能更强大，绘图速度更快。
我的个人联系人ps是8.0,8.0– CS4– CS 5– CS 6– CC– CC 2014– CC 2015，截至目前最新的CC 2017，深刻理解，新版本更易于使用。您也可以根据自己的个人习惯选择自己的便利工具。
2，设计草案尺寸
在我们查看设计草案的大小之前，让我们先看一下APP界面的组成。
界面包括：布局图层，图形布局图层和图标图层。
当iPhone 6仍在外出时，它使用640次; 1136 px制作设计稿。自6发布以来，所有设计尺寸均为750次; 1334 px来设计尺寸
U女孩会带你去看看，到目前为止所有的iPhone尺寸（1-3代不必考虑）：
iPhone界面设计规范：
iPhone界面尺寸：
使用750x1334px作为设计草案的标准尺寸的原因：
当中间尺寸向上和向下调整时，界面调整是最小的，也是最方便的调整。
大屏幕时代仍然使用小尺寸作为设计尺寸，这限制了设计师的设计视角。
在设计Android版本时，您只需进行最少的设计调整即可提高设计效率。
所以请为设计工作做750x1334px的设计草案
在文档中建立参考线是一个好习惯。我希望每个人都能养成这种习惯。它易于设置和设置。我习惯设置24像素的距离。我比较了国内外的很多APP。总结是24 Px更合理，这是我个人的习惯，所以不要成为纯文本规则，你可以设置为30 px。
然后你就可以开始设计了
在这里，U女孩会给你一些iPad设计规范：
3.图标设计规范
iPhone图标大小：
图标设计应使用光栅化系统设计
设计尺寸：1024x1024px，可以使用黄金比例设计
4.关于设计字体
让我们来看看字体的历史演变
iOS 9：Helvetica Neue的英文字体
iOS 9：中文字体是为冬青黑色而制作的
↓↓↓
iOS 10：旧金山的英文字体
iOS 10：Apple的中文字体
有关字体大小的问题：
顶部操作栏文字大小：34-38px
标题文字大小：28-34px
正文文字大小：26-30px
辅助文字大小：0-24px
标签栏文字大小：20px
文本的大小只是一个范围，这取决于设计的视觉效果。不要记住它，但要记住字体大小应该是均匀的。
第四，剪切图标说明
1，切削刀具
Cutterman，一个PS插件，切割非常方便，但不支持绿色自由安装版本PS，PS版本相对较高，并且CS 6没有维护和更新。建议安装PS CC及以上版本的官方完整版。最新版本的cutter是3.2.0。
Assistor PS也是PS图标插件插件，也称为工件;我用它，感觉还可以，但是切割和贴标的经验还不高，但是辅助PS的其他辅助功能还是很不错的，比如参考线辅助，圆角尺寸，磁铁功能等。
2，标记工具
PxCook（Pixel Chef）是一款剪切笔记设计工具。自2.0.0版本起，支持PSD文件的文本，颜色和距离进行自动智能识别。
优点是注释和剪切的两种设计集成在一个软件中，并支持Windows和Mac平台。注释功能包括：支持长度，颜色，区域，文本注释;从2.0.0版本开始，整体效率得到了很大提高，建议自动识别注释。
派克，像刀匠一样，派克可以自动计算尺寸，距离，文字大小，阴影，笔划圆角，线高等信息，并根据您的需要贴标签，大大节省您的时间标记，大大提高设计效率。 （你的女孩现在已经被帕克标记了）
但是，parker不是免费的，而是需要60RMB的付费软件。
Mark Man也是一款高效的设计注释工具，支持Win/Mac，免费使用基本功能，免费版的体验也不尽如人意，毕竟它是免费的，如果需要高级功能，则需要支付60RMB。
上述每种工具都有其优点和缺点。在选择方面，它主要基于个人习惯，人们可以轻松选择。
3，页面注释
标签非常重要。兄弟的发展不能完美地恢复设计草案，很大一部分取决于我们的注释;如果你不知道如何标记，你必须与开发兄弟沟通！
沟通是解决问题的有效方法！
在这里，我将粗略谈谈我的标签习惯。我不需要标记每个渲染。您标记的页面可确保每个页面都能顺利开发。
让我举一个我标记的页面的例子：
我们可以从上面的注释中看到要标记的内容是：
文字：字体大小，字体颜色
布局控件属性：控件宽度，背景颜色，透明度，笔触，圆角大小
列表：列表高度，列表颜色，列表中的内容间距
间距：控件之间的距离，左右边距
段落文本：字体大小，字体颜色，行间距
所有属性：如导航栏文字大小，颜色，左右边距，默认间距等，可以提前与开发兄弟交谈，无需标记。
所有页面注释总结为：标准文本，标准间距，标准大小，标准区域
注意：标签的颜色格式是十六进制（例如FF0000）还是RGB（255,0,0）？你需要与开发兄弟讨论，打开他的开发习惯，一般使用十六进制颜色值就好了。 。
4，界面切割图
我仍然用图中的例子来说明:(有一张真相图片）
Icon_alipay.png&RARR; iPhone 1-3代手机（已被忽略）
Icon_alipay@2x.png→ iPhone4/4S/5/5S/6/6S/7对应的尺寸，这就是我们通常所说的2次地图
Icon_alipay@3x.png→ iPhone6P/6SP/7P的大小，这是地图的3倍
可以简单地理解为多重关系，如果您使用750x1334px（iPhone 6/6S/7）尺寸进行设计草图，则切片输出为@ 2x，小1倍，@ 1x，1.5倍大于@ 3x。
我总结了一些在剪辑中经常遇到的问题：
（1）最后需要削减哪些资源，哪些资源不需要削减？
只要它无法在代码中实现和表达，您就需要剪切地图
如果您真的不知道是否要剪切地图并与开发人员沟通，他会告诉您哪些人需要您剪切地图
（2）你需要削减多少套？ （我这里只使用iOS作为标准，Android会稍后再说）
从理论上讲，我们需要削减3组地图以便更好地适应。
在实际工作中，iOS只需要剪切2组图纸，即：@ 2x和@ 3x
（3）如何命名切割，如果没有命名该怎么办？
剪切地图有几点要注意：
剪切输出格式必须是png24，png8和jpg。
在同一模块中，切割的大小应该是一致的
切割输出尺寸必须保持均匀。
为了减小包装的尺寸，所有切割地图在开发后尽可能地被压缩（包装越小，老板越开心越好，它会给你更多的年终奖励）
关于切割表和标签，它就在这里。如果您不知道如何在工作中切割标签，请与开发人员沟通并进行良好沟通。良好的沟通是解决问题的唯一方法。记住不要孤单。如果您有任何问题或疑问，可以给U留言，下次我们会见！
五，视觉修复篇
一个完整的APP，在这样的过程之后：项目项目开始→设计产品原型→设计效果图→进入发展阶段→成功开发进入测试阶段→测试反馈给开发人员进行调试&rarr许多测试证实没有bug和rarr;提交市场，正式推出。
我们都知道，无论设计师的手稿有多精确，开发的产品都会有或多或少的错误。在专业方面，视觉效果将会降低。视觉缩小越高，设计越接近应用程序。精细;相反，情况更糟。
因此，我们需要在此时协调开发以调整UI以更接近我们所做的渲染。 （简单来说，就是给开发一个问题，指出与渲染的不一致，是不是很开心？哈）
我必须选择1px（像素眼睛是这样的）
1.设计师如何进行视觉恢复？
（1）设计视觉调整文件
团队规模很大，建议设计一个视觉调整文章，这样整体开发进度和效率都比较高，因为团队数量很大，你不能去iOS开发兄弟说一个地方来调整，然后再跟Android兄弟再说一遍，你有时间，人不一定有时间，所以有必要设计视觉调整和优化文件。
文档的视觉调整和优化，一目了然，需要指出差异与渲染的区别，应该改变的是iOS调整，Android调整或h5调整等，输出是png和jpg图像格式，最好的输出是PDF格式，开发看似方便，例如，你写一个颜色值，开发可以直接复制。
（2）带上你的板凳，过去并一起开发UI
这种方法非常适合3-4人的小团队，亲自上阵，听写问题，效率也比较高，你需要在开发后准备你的效果图和原型，有一个比较伤害（有一个事实的图片，不同的地方必须发展变化）
2.如何使效果图恢复到高水平？
（1）标准可视界面设计
有必要遵循每个平台的UI设计规范来标准化设计界面，并使用设计规范来了解开发是改善视觉恢复的基本前提。
（2）可视UI控件的规范输出
在绝大多数情况下，为了赶上项目的进度，首先是接口，并遵循设计规范，因此可以保持接口设计和规格并行。
根据您当前的项目经验，您可以先输出基本控制元素规范，包括（颜色，文本，图标，蒙版，投影，按钮，输入框或单个控件）。该规范是一项庞大而繁琐，耐心耐心的工作;这个过程注重每个细节的准确性和合理性。
（3）规格切割和精确标识
我们的切割图和标签是否标准化和准确，直接影响视觉效果的减少程度，因此切割和贴标必须做得更详细，这更有利于提高降低程度
（4）多发展沟通与沟通
U姐总是说一句话：沟通是解决问题最有效的方法，所以更多的联系与兄弟的发展沟通，如果条件允许，请坐着发展;面对问题及时和面对面的协商解决，达成共识，修改，敲定，解决。
六，在线准备
当开发应用程序并通过测试时，有必要为正式发布做好准备，但在发布之前，我们的设计师需要合作并在上线前做一些工作。你姐姐带你去看看需要做些什么。工作？
1.应用程序图标（APP图标）
（1）iOS图标
这是iOS开发工具Xcode提供的APP图标的大小（这是U女孩写这篇文章的特殊目的，U和开发之间的关系非常好），乍一看难道不是很可怕吗？开发是根据iOS的系统版本设置的，但你是一名设计师，你是根据iPhone的版本绘制的，所以没有那么多。实际上，我的开发同事要求以下几种尺寸：
因为我需要这么多图标，所以我无法全部添加。我只能选择最好的尺寸。我的开发兄弟让我提供以下图标大小：
1024× APP Store的1024 Retina APP图标
512× APP Store的512个APP图标
120倍; 120 6及以下主屏尺寸
180× 180 6加主屏幕图标大小
58&次; 58具有视网膜显示的设备上的设置
87× 87 iPhone 6 Plus上的设置
80× 80聚焦具有视网膜显示的设备
注意：这里应该注意iOS系统可以自动将图像裁剪成圆角，因此在提交图标时，您只需要提交方形PNG格式。
让我们来看看Apple的官方APP图标规范：
（2）Android图标
Android的图标比iOS少。我们只需要提供一些尺寸，但我们需要增加2套，圆角和直角，因为有些地方会被使用。
512x512px
192x192px
144x144像素
96x96px
72x72px
48x48px
由于Android有很多型号，不同屏幕密度的手机图标大小不同，所以U女孩无法给你相应图标的位置。
2，启动页面（启动图像）
这也是iOS开发工具Xcode提供的LaunchImage的大小。我们需要为开发工程师提供4种尺寸：
640x960px iPhone 4/4s
640x1136px iPhone 5/5s/5c/SE
750x1334px iPhone 6/6S/7
1242x2208px iPhone 6 plus/6S plus/7 plus
2208x1242px iPhone 6 plus/6S plus/7 plus的水平尺寸。如果我们的应用程序支持横向模式，您将需要制作横向屏幕启动页面。
注意：启动页面必须为PNG格式。建议在开发之前压缩所有图像。
3，商店页面（Launch Image）
这是Apple的官方在线提交页面，您需要上传APP图标，版本号和应用程序说明。
您需要在这里添加商店页面，最多5个png或jpg文件格式的商店页面，并且还支持视频格式
这是<农药“的商店传单。 APP：
以下是其他商店页面尺寸的附加页面，我们必须在之前提供4套尺寸：
不久前，iOS开发兄弟告诉我，现在商店页面只需要设置一个大小：750x1334px，没关系，这对我们来说减少了很多工作
这是Apple的官方商店页面规范：
有很多Android应用程序市场，但总体来说它相对一致，我们需要为Android商店页面提供2套大小：
480x854px
720x1280px
你会给你一个关于整个APP开发过程的评论：
一个完整的APP，在这样的过程之后：项目项目开始→设计产品原型→设计效果图→进入发展阶段→成功开发进入测试阶段→测试反馈给开发人员进行调试&rarr许多测试证实没有bug和rarr;提交市场，正式推出。
当我们上网时，我们仍然需要做一些必要的准备工作：
设置了一个楠木案例，三香香，紫砂香炉，当时点燃了沉三次，之前三种香味烧掉了，可以顺利推出，这是必不可少的，记得要记住!!!
关于《一款APP设计的从0到1》的iOS系列全部完成，希望我能给你很多帮助; U女孩只是一种工作方法，一种好的工作方法可以用更少的钱做更多的事情，并且在特定的工作中也具有灵活性。务必与开发和沟通沟通。良好的沟通是解决问题的唯一方法。如果您有疑问，可以给U留言。下次我们会见！
作者：U姐，生活中的UI设计师，等着你缝妹妹哟。微信公众号：UI女孩（ID：UIfaner）
本文最初由@U妹儿出版，未经许可不得转载。
该地图由作者提供
