LOGO-200LOGO-120x35LOGO-200LOGO-200
  • 首页
  • BIM咨询
  • 培训课程
    • BIM全科高级综合班
      • BIM建筑与结构实战班
      • BIM机电管线实战班
      • BIM建筑装饰实战班
      • 全国BIM技能等级考试班
    • 室内设计就业高级综合班
    • 建筑园林景观表现班
    • 建筑参数化设计犀牛班
    • 工业产品设计犀牛高级班
    • 平面广告设计
    • 淘宝美工网页
    • AutoCAD专项
    • 网课
    • 作品
      • 室内设计作品
      • 建筑犀牛作品
      • 产品设计作品
      • 园林设计作品
      • 平面设计作品
  • 课件
    • 建筑
    • Auto CAD 课件
    • 室内设计课件
    • 建筑犀牛课件
    • SketchUp 课件
    • Lumion 课件
    • 产品设计课件
    • Keyshot
    • BIM课程课件
      • BIM建模结构课件
      • BIM机电课件
      • BIM装饰课件
    • 平面设计课件
      • PS课件
      • AI课件
      • CDR课件
      • ID课件
    • 更多设计经典和教程
      • –室内设计–
      • –建筑设计–
      • –平面设计–
      • –产品设计–
      • –网页设计–
      • –CG插画–
      • –设计动态–
    • BIM技术
      • –BIM资讯–
      • –BIM教程–
      • –BIM案例–
      • –BIM考证–
      • –BIM软件–
  • 资源
    • 软件
    • -材质贴图-
    • -3DMAX模型-
    • -Sketchup模型-
    • -Rhino模型-
    • -BIM模型-
    • -CAD图纸-
    • -室内设计-
    • -建筑规划-
    • -平面设计-
    • -景观园林-
  • 设计答人
  • 管理系统
  • 设计制作
  • 其他
    • 合作企业
    • 招聘求职
    • 最新动态
    • 我们的风采
    • 关于我们
    • 手机版
  • –常用素材包–
  • -材质贴图-
  • -3DMAX模型-
  • -Sketchup模型-
  • -Rhino模型-
  • -BIM模型-
  • -CAD图纸-
  • -室内设计-
  • -建筑规划-
  • -平面设计-
  • -景观园林-
【官网】一个完整的APP是如何从零开始做出来的?
2017年4月10日

第一步(构思部分):想和看

想什么?当然是想我们要创作出一个什么样的作品,可以是自己喜欢的产品,做个redesign什么的。也可以是一个大杂烩功能整合,但是尽量不要做差异太大的两种产品,比如佛学类和陌生人社交(yuepao)这两类的结合就有点坑爹了: 总不能和尚约我们出来一起念经对吧。

看什么?1.互联网热点新闻、黑科技等前沿科技报告。2.国外设计资源网站(behance、dribbble)。3.看自己对什么比较感兴趣,兴趣是支撑你一直坚持设计下去的动力。虽然我自己也不是很喜欢骑单车,蛋疼。

经过前两步应该有一点小想法了吧,那么我们可以开始考虑整一个产品的框架还有风格的走向。在看的过程中你可能对这两点已经有了方向,但是没有落地依然还是很虚的。好那么我们就要拿起你的手中的纸和笔,将你的想法都写下来。无论是什么想法都要写,创意点,功能,交互,风格,目标人群,色彩,等等。这里我们不需要考虑商业问题,因为我们不是在创业,而是在创作。但是逻辑一定要清晰。

 

第二步(交互部分)画和写

构思和画框架,因为时间有限我做出了主要的一些功能和说明。来看一下我写的结构图:

 

未标题-2

 

 

其实功能不多对不对,嗯千万不要给自己挖坑,做一个轻量型的就行了,除非你打算做一年。

理清页面的逻辑这边也是非常重要的一个环节,因为即便这次我们不考虑商业问题,但是用户界面是基于用户操作的,如果连逻辑都梳理不通,那真的就是一个花架子,做UI的朋友这点要注意喔。

好,下面再来看一下我画的纸质原型,字丑多担待:

 

QQ截图20170410153324

 

 

其实看上去页面很多其实只做了几个一级页面,纸质原型的好处就是想到哪就可以改到哪,草稿部分我就不发出来了,辣眼睛。

 

第三步:(视觉)除了磨就是磨

视觉部分占了这次设计的大头,虽然只是短短十几个页面,但是有一半的页面是花了1,2个小时才设计出来的,经常遇到的问题就是花大半个小时设计出一张,不满意重新推翻再设计,反复修改。那么我们在做页面的时候通常需要考虑一下几点:

1. 配色;

一个产品的色彩,大致能反映出该产品的性格、品味、气质。一款优秀的产品,在配色上他也是具有这些特质的。使用的颜色将决定了我们的产品将是一种什么样的风格,是热情,是低调,还是欢乐。那么这次我用了饱和度不高的深蓝色为背景色,搭配一种饱和度不高的亮蓝色和桃色作为产品的主色和辅色,目的是为了让用户感知到有蓝色的运动、科技感,深色的低调收敛感,还有桃色的跳跃,惊喜感。当我们在使用这3种色彩的时候,不是肆无忌惮的乱用,而是需要恰如其分的使用。比如亮蓝色和桃色我们不能大面积的使用这样会破坏整个页面的氛围。

我通常使用,也是很多画原画朋友用的一种方法,就是设计完一张页面,我会缩小的去看整张页面大致的色彩分布情况,亮蓝色和桃色作为引导和提醒使用是最好不过。

2. 信息布局和层次的展现;

说完了配色,说一下信息布局和层次展现的小技巧。思考场景是我们需要先想到的,用户在导航时候的场景,和在添加路线时候的场景是不一样的,操作方式也是不同的,一般信息布局首先我会将相关联的内容靠近摆放,或者沿着视觉流顺序摆放。层次展现一般是控制元素的大小,颜色深浅,粗细,远近等几个因素来区分。

3.是否符合用户操作习惯;

思考用户手指的操作热力图,和使用场景,将重点操作功能置于下部分,信息展现置于上部分、返回在右上角、左滑删除,长按删除等等。

4.交互的连贯性和合理性等等;

比如通常页面的返回是在左上角用箭头的形式展现,如果其中一个页面的返回跑到了右上角用文字展现,这样的方式就是不连贯的,也是违背了用户的操作习惯的设计。

再比如一个箭头给用户的感觉是下拉,但是如果操作结果是跳转页面,那就违背了用户的预期,是不好的体验,就是不合理的。

5.各种状态和极值

这次练习不考虑开发,所以这条就不写了。但是在我们日常项目当中,这些是需要画,并且画的更全面的。

还有每次做设计练习都会先定好一个视觉规范,举几个例子(当然不止这4点):

1.字体:通常我会在一倍尺寸下使用18,16,14,12,10的字体大小,18用于顶部标题,16用作标题或正文,14号可以用作说明,12号可以用做提示,10号字用作小标签。

2.字色:字体颜色通常使用3个层次深浅即可,切忌不能使用纯黑色。

3.线条:1倍图我用的是#dddddd,0.5px。这个其实不用那么死板,就像每台电视机适合自己的参数都是不同的,可能你家产品适合用1px,或者别的颜色。

4.栅格。栅格的用处可是非常大,栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。从报纸、杂志,到手机界面,栅格系统全面渗透到各种信息传达的界面当中。具体什么是栅格系统,不在这里多说,大家可以去百度一下。

还有每次做设计练习都会先定好一个视觉规范,比如用什么字体,用几种字体大小和颜色,线条粗细颜色,主色辅色点睛色的敲定,栅格的排列等等,尽量使所有页面看起来统一有格调。

等等,你问我颜色是怎么搭配的?我又要安利dribbble了,追波每一个作品边上会有一张该作品的配色条,很多优秀的作品的配色都可以做参考。但是这次我选择的配色倒是自己瞎选选出来的,本身做东西喜欢蓝色系,再加上颜色和产品的调性比较搭,然后配上一个桃色,哈哈。

 

第四步(包装/动效)考验排版的时候到了

其实每一步都很让我纠结,有一天我页面做完了打算做长图,想了一天都没想出来,索性放弃了。第二天晚上做了两三个小时就做完了长图。然后开始磨动效,这边使用了principle和ae两个软件,真的灰常好用。

在最后展示作品之前我想说:创意是羽毛,想法是皮肤,工具是肌肉,思维是骨骼,缺一不可。

 

微海报分享

Related posts

2021年2月4日

3dmax 2021 中文


Read more
2020年9月14日

国家职业资格培训鉴定实验基地BIM证书


Read more
2020年9月14日

绿色建筑产业联盟BIM证书考证


Read more
2020年7月7日

你要知道的平面设计形状——点线面


Read more

搜索本站

最新文章

  • 3dmax 2021 中文 2021年2月4日
  • Revit2020 中文 2020年12月3日
  • 广州地铁六号线香雪站BIM咨询案例 2020年9月15日
  • 图学会全国BIM技能等级考试 2020年9月14日
  • 国家职业资格培训鉴定实验基地BIM证书 2020年9月14日
  • 绿色建筑产业联盟BIM证书考证 2020年9月14日
  • 2019全球建筑学院排名TOP 20 2020年9月11日
  • 东莞某停车场改建项目 2020年9月9日

标签云

3DMax软件下载 AutoCAD软件下载 BIM技术 BIM技术经典 BIM教程 BIM软件下载 CG插画 CG插画经典 UI设计 UI设计教程 UI设计素材 Vray软件下载 产品设计作业 产品设计作品 全模型建筑场景 合作企业求才 园林设计作业 地毯 室内家具模型 室内整体模型 室内设计作品 室内设计素材 小砖块 平面设计 平面设计作业 平面设计教程 平面设计经典 平面软件下载 建筑园林素材 建筑犀牛作业 建筑设计经典 我们的风采 技巧 摄影 摄影,技巧 效果图 教程 最新动态 砖墙贴图 网页设计教程 网页设计经典 苹果MAC软件下载 设计动态 设计动态经典 高清贴图

严老师电话|微信|

手机:18902259698

梁老师电话和微信

手机:18902250768

QQ咨询

严老师 QQ 275043888

QQ联系咨询课程

晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

地址:广州天河北路高科大厦A座3001室(地铁三号线华师站B 出口,前行20米左转就入A座大堂, 3号电梯上30楼)联系电话 020-85210826

©2018 晶网设计 粤ICP备10225019号-1
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模
shejizhizuo
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模