第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

一款APP设计的从0到1之:iOS篇(精华版)(2)

时间:2017-12-07 10:20来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
额外再插一句,对于项目的版本控制也是很重要的,我用的项目版本软件控制是SVN,管理项目文件方便高效,可以和本地项目文件同步,就算我的电脑挂,

  额外再插一句,对于项目的版本控制也是很重要的,我用的项目版本软件控制是SVN,管理项目文件方便高效,可以和本地项目文件同步,就算我的电脑挂,或装系统手误把所有磁盘格式化了,我也不用担心,我只要同步更新SVN线上文件就都回来了,关于SVN这里就不多说了。

  

674a59a8114ea801211d2586e39d.jpg

  二、项目预估时间篇

  此时此刻,我们已经拿到了PRD文档和原型,先别着急去打开PS画图,因为一个项目的开发是需要时间的,为了更高效的完成开发进度,整个团队都需要预估项目时间,作为UI,很简单,那就是数页面,看总共有多少个页面,再详细预估……

  U妹举个栗子,比如接到一个APP项目,所有页面总共有70个左右,(纳尼!70个页面,我的天啦,不要惊讶,70个页面对于一个APP来说,一点也不多)

  这时候可能boss和产品会问你多久图能出完,先别着急答复,你需要先审视所有页面,他们会没完没了的催你,因为他们着急上线,抢占市场,恨不得让你天天加班作图,然后搞上线;催你不要管,让他们尽情催去吧(再催你的话,你也可以说:催你麻痹,你快,你来画,纯属玩笑,如果你敢,那你真NB)

  1、确定重要页面

  何为重要页面?在如今看颜值的时代,脸就是最重要的,首页就是一款APP的脸;还有很多页面布局主体部分共用相同布局结构,这也是重要页面。拿首页来说,你可能需要花2天时间来完成,之所有要用2天,是因为你还要确定主色、设计风格、icon设计等等,还有就是保证质量(如果谁嫌你慢,你就折磨怼他:想要快行啊,那就降低质量呗,出了问题,你负责啊,啦啦啦~~)

  

4fc359a81185a8012028a97dd39b.jpg

  我们都知道鱼和熊掌不可兼得,既想要快速度,还想要高质量,这2者是不可能同时保证的,也很难去平衡的

  然后再挑选一个重要页面,预估用时,然后以此类推,其实首页确定好后,整个APP的设计风格就基本已经确立,其他的页面做起来也就容易多了。

  2、筛选重复页面

  一款APP里,其实有好多页面都是局部结构类似的,所以70个页面,这样筛选下来,估计也就只有一半,30个页面是不重复的。

  插一句:你在做图的过程中,不可能100%保证不会有其他任务,肯定会有一些额外的设计任务,所以,不要把时间估的刚刚好,除非你非常确定不会有额外的设计任务。

  所以,就这剩余的30个页面,按照我的速度,再留出充足的时间的话(在实际预估时间上多30%—50%左右),我大概需要2周时间完成。

  3、整体预估时间

  当确定了30个主要页面的时间,现在就要把其余的重复页面时间算进来,剩余的这40个就相当于批量的,一周时间稳稳购了,千万不要把时间估的太紧,因为你完全不知道boss可能会在你不经意丢给你一个东西让你做,而且还是要的很着急的那种,最后哭的只能是你自己了。

  审视原型→统计筛选页面→重要页面设计(30个)→次页面设计(40个)→审稿+改稿→定稿

  按照自己的预估时间,有序不稳,且能够应对突发设计任务的情况下,差不多3周时间完成,这里U妹是在100%不加班的预估时间。

  4、网页设计预估时间

  一般而言,如果是比较大型的专题页面设计,我一般会预估3天时间,包括从灵感、构思、参考、设计、修改。

  如果是网站,并且有三级页面,大致5个页面左右,大致需要5天时间;具体可根据页面的多少,依次类推进行预估。

  三、界面设计篇

  这里说的都是从设计师的角度去阐述一款APP从无到有的一个过程中,设计师应该干的事。

  目前在行业里,关于APP界面设计规范也是层次不齐,很多都还停留在6的设备和ios 9的系统之上,而现在最新的是iphone 7和iOS 10了(更新换代真的很快),我这里说的是最新的iOS 界面设计规范(Android设计规范,我们下次见)

  1、关于设计工具

  俗话说:工欲善其事必先利其器,好的工具可以让我们的工作效率更高,做界面设计我们用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度也就更快。

  我个人刚接触ps是从8.0开始,8.0 – CS4 – CS 5 – CS 6 – CC – CC 2014 – CC 2015,一直到现在的最新的CC 2017,深刻体会,新的版本更好用。也可以根据个人习惯,选择自己顺手的工具就好。

  2、设计稿尺寸

  在看设计稿尺寸之前,我们先来了解一下APP界面设计构成

  

141359a81610a8012028a9a91c6d.jpg

  界面构成由:布局层、图文排版层和图标层。

  在iPhone 6还没出的时候,都是用640×1136 px来做设计稿的,自从6的发布,所有的设计稿尺寸以750×1334 px来做设计稿尺寸

  

113059a811d3a8012028a987480d.jpg

  U妹再带大家来看看,到目前为止所有iPhone的尺寸(1-3代就不用考虑了):

  iPhone界面设计规范:

  

9ce659a81b51a801211d2582af02.jpg

  iPhone 界面尺寸:

  

2fbe59a81b68a8012028a90a7e20.jpg

  

01d959a81624a8012028a93f9f13.jpg

  以750x1334px作为设计稿标准尺寸的原由:

  从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。

  大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。

  设计安卓版本时只需做最小的设计调整,提升设计效率。

  所以做设计稿事请以750x1334px来做设计稿

  

5fb559a81d32a8012028a90416bc.jpg

  

b94459a81ba3a8012028a9311281.jpg

  

d19f59a81b8ea801211d254fb259.jpg

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕