商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 万博体育娱乐 > 网站设计 >

UI实战案例!一个完整的APP是如何从零开始做出来

发表日期:2017-06-30 17:24万博娱乐体育浏览次数: 本文关键词:app运营,app开发,交互设计

 

  今天这篇是一个完整的App 产出过程,从构思,画原型,到定视觉风格和规范,再到出视觉稿和动效,都是由一个人完成的,本篇就此次作品的流程讲解一下。

  欢迎关注作者应骏的微信公众号「shejishiyj」UI设计狮联盟。

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

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

  看什么?

  1.互联网热点新闻、黑科技等前沿科技报告。

  2.国外设计资源网站(我主要还是上上追波、比汉子、站酷、UI中国)。

  3.看自己对什么比较感兴趣,兴趣是支撑你一直坚持设计下去的动力。虽然我自己也不是很喜欢骑单车,蛋疼。

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

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

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

  

usdic—course——20161205

 

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

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

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

  

usdic—course——20161205(1)
usdic—course——20161205

 

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

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

  视觉部分占了这次设计的大头,虽然只是短短十几个页面,但是有一半的页面是花了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两个软件,真的灰常好用。

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

  

uu20161205
iPhone SE Copy 7
iPhone SE Copy 8
如没特殊注明,文章均来自网络! 转载请注明来自:http://www.bluecatslive.com/news/wzsj/5177.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5371

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:642

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:633

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:623

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:618

相关文章

交互设计基本功!聊聊搜索框设...

@Mockplus原型设计 :许多人可能认为搜索框不需要设计,毕竟这只是两个简单的元素。然而,在内容繁杂的网站中,搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时,他们...

日期:2018-01-05 浏览次数:68

三个维度,解析产品的交互设计...

本文以微信首页为例,用三个维度系统地解析一个产品的交互设计的方方面面。 首先我们来做个互动,请各位看官打开自己的微信,然后看到你的微信首页: 然后仔细观察看到了什么...

日期:2018-01-05 浏览次数:72

案例分析:怎样避免交互设计中...

刻板印象有好有坏。在合适的场景、时间、项目中,去最大化它的积极作用,尽量避免它的消极作用,才能真正的平衡设计、工作,甚至生活。 一直在看奇葩说,听到很多次的一个词叫...

日期:2018-01-05 浏览次数:70

表单的交互设计:基于单选场景...

在做表单设计时,究竟该选用哪种控件,只要是根据情况而定的,无论哪种选择都有其优缺点,这就要结合选项数目、空间大小等因素,选择一种形式,可以最大程度的方便用户使用。...

日期:2018-01-05 浏览次数:67

新手进阶手册!成为交互设计师...

毕业后加入百度成为一名交互设计师已经整整两年了,这里把一些想法体会,工作职场的相关经历写下来,以供新人参考。 最早接触交互设计时觉得学交互设计非常酷炫,例如像钢铁侠...

日期:2018-01-05 浏览次数:68

随机推荐

让用户“看见” 是一种心机行为...

超全面干货!弹窗设计的5条基本...

说走就走!勾引你出门旅游的网...

网站设计之卡式布局运用策略...

弹框体系总结...

网站建设首页设计图文混排的技...