• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > UI实战教程!从零开始做App 系列之项目立项+预估时间篇

UI实战教程!从零开始做App 系列之项目立项+预估时间篇

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,经验分享,设计项目等相关知识,希望在学习及工作中可以帮助到您

UI 设计师从零开始做一个App 要经历哪些流程?这个系列的文章会为新手一一讲解。本篇会为你讲解如何做项目立项和项目预估时间,实用高效,新手来收。

列了一个小小的目录:

  • 项目立项
  • 项目预估时间
  • 界面设计
  • 切图标注
  • 视觉还原
  • 上线准备

项目立项篇

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

如果你所在的是一个团队健全的公司,在项目立项时,会把所有相关人员(产品汪、运营喵、设计狮、程序猿等)聚在一起开产品会议,产品汪会讲解项目原型、市场调研分析、市场需求、产品定位、盈利模式等具体的功能模块和跳转逻辑,一起讨论交流原型,不足之处进行改进完善,然后评估项目时间,就可以开工了。

注意:在产品讲解和演示原型时,你一定要认真听,并且要完全理解整个逻辑,你有疑惑或者不理解的地方,一定要提出疑问,让产品解答,不然你的设计稿可能会出现逻辑错误等。

这个时候我们就可以新建项目了,做前期准备了。

我个人的立项建档习惯是以“项目名称+版本号”来命名文件夹,因为这种方法很方便我管理和查找项目文件。有的设计师可能是把所有文件放在一个文件夹里,如果文件较少还行,当文件较多时,那你要哭了,你都不知道哪个是哪个版本的文件了。

反复改稿对于设计师来说,那是家常便饭,当一个页面反复改稿很多次时(也包括3天2头就改这种),很多设计师的源文件应该是这样的:

初稿、初稿1、初稿2…审定稿、审定稿1…修改稿、修改稿1…最终稿、最终稿1……,等等一系列,当我看我这样的源文件时,我想我会吐血,因为太不好区分,哪个是上一版,哪个早一些。

我个人的习惯是以“文件名+改稿日期+改稿次数”来命名,举个栗子,比如“首页_4.10”是最终版,但是4月12日,产品说首页要再加一个通知,那我的文件就是“首页_4.12”,但是前后又改了3次,那就是“首页_4.12.3”一目了然,方便查找要修改的文件。

立项时我只需要给开发的小伙伴说明一下,他们自然会知道哪个文件是最终版的。

这里很认真的提醒一下各位小伙伴们,所有的修改稿都别删掉,千万别删,千万别删掉(重要的事说3遍),每一次的修改都在副本基础上修改,因为当我们改了好多稿后,甲方可能会说“还是第一版好看,回到第一版吧”(不要吐血或砸电脑),所以请千万在副本上进行修改。

千万别指望Ctrl+Z,如果你从没修改过首选项,默认的历史记录只有20步,最大是200步,如果你设置了200步,不怕PS卡奔溃那也是可以的。

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

更多的版本控制方法可以见:

  1. 《来收神器!UI设计师常用的版本控制工具有哪些?》
  2. 《改稿不愁!设计师最常用的三种版本控制方法(附工具盘点)》

项目预估时间

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

举个栗子,比如接到一个APP项目,所有页面总共有70个左右,这时候可能Boss和产品会问你多久图能出完,先别着急答复,你需要先审视所有页面。

1. 确定重要页面

何为重要页面?在如今看颜值的时代,脸就是最重要的,首页就是一款APP的脸。拿首页来说,你可能需要花2天时间来完成,之所有要用2天,是因为你还要确定主色、设计风格、icon设计等等。

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

其实首页确定好后,整个APP的设计风格就基本已经确立,其他的页面做起来也就容易多了。

2.?筛选重复页面

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

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

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

3.?整体预估时间

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

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

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

4.?网页设计预估时间

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

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

欢迎关注作者公众号:UI妹儿

「从零开始设计App 之交互设计系列」

  1. 《设计师怎样从零开始设计一款APP?》
  2. 《从零开始设计一款APP之如何做原型图》
  3. 《基础小课堂!从零开始教你做高保真原型图+UI 设计规范》
  4. 《从零开始设计一款APP之如何做好整理和交接工作》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2017-08-06收集12个实用的网页在线工具
  • 2017-08-06最棒的9个国外免费图片素材网站
  • 2018-08-23用YouTube 为例,让你轻松读懂交互设计7大定律!
  • 2018-08-23查遗补漏!网页设计过程中需要注意的12个常见问题
  • 2017-08-06css前端知识点总结(必看篇)
  • 2017-08-06分享8款提高网页设计出色的CSS工具
  • 2017-08-06网页色彩对比与调和技巧分享
  • 2018-08-23这个帮你改善睡眠的APP,是这样设计出来的
  • 2018-08-23Google对话式交互规范指南(八):通过确认和应答给予用户信心
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:选择架构

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 专访三部曲!Google设计主管如何培养设计文化?
    • 春节专题!App 设计系列之模态弹窗与非模态弹窗
    • 如何适配iPhone X?来看QQ 音乐这个实战案例复盘总结
    • 提前做好这四件事,帮你快速通过设计评审
    • 设计师被“拼多多”的一天…
    • 固定在网页右侧的浮动层实现代码
    • 如何简化操作流程?来看这篇超全面的总结!
    • 「这个控件叫什么」系列之Toast(吐司提示)的曾经、现在与未来
    • 那些很熟悉但又叫不出名字的设计法则:干扰效应
    • Bootstrap3.0学习笔记之表格相关

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有