请选择 进入手机版 | 继续访问电脑版

【设计篇】在界面设计中新手不知道的那些事系列(三)

发表于 2017-12-29 16:00 显示全部楼层 17 261

本帖最后由 孙傲 于 2017-12-30 14:28 编辑

UI设计师如何设计出一个优秀的APP?

 



在2010年的某一天腾讯公司的张小龙突发灵感,想要做一个一款APP它的基本功能是聊天,支持发送语音、短信、视频、图片(表情包)和文字,支持多人群聊,可以实时对讲像对讲机一样,也可以通过摇一摇、搜索、二维码添加好友,一个类似于QQ的聊天工具但又不同于QQ的聊天工具。

 

 

这个APP就是大家所熟悉的“微信”,当然这里不是要说微信,而是要说一个像微信这样优秀的APP要怎么设计出来?需要哪些清晰的思路?

 

blob.png


下面我就带着大家来穿越到微信当初的开发与设计吧


一、确立需求


假如你是微信团队的一员,职位是UI设计,在开发之前你首先要知道你要做一个什么功能,团队的经理张小龙告诉你,他想要有一个可以聊天的APP,那么大家回想一下聊天类的APP应该包含哪些功能?通讯录?个人中心?QQ空间?对!大概也就是这样了。


二、头脑风暴


当领导说完详细需求之后,开发人员、产品经理、就开始研究所要用到的技术、可能遇到的问题,这个讨论的过程中UI设计也是要参与其中,主要是负责提供设计创意以及交互。


三、设计与开发


对于逻辑还有理清思路这个活就有产品经理带领你们了,等你们讨论结束之后,产品经理就会出一个信息框架和一个产品原型。在产品原型里面会有一些标注性文字的说明,还有一些开发人员用到的逻辑流程图。当产品经理把原型交给大家的时候,这时开发和UI就开始进行各自的工作了,作为UI设计的你,自然就是设计一个符合大众审美的APP界面了。

 

制作信息框架工具:xmind思维导图

制作原型工具:Axure 8 Pro绿色破解版

游客,如果您要查看本帖隐藏内容请回复

 

四、界面设计


blob.png


界面设计需要用到两个东西,一个是原型图,另一个是设计规范。原型图又称之为低保真界面,也可以叫做草图,里面包含软件APP所有的界面。设计师要做的就是把草图变成真正的APP界面。


上边说了那么多,现在终于轮到UI设计了,那么接下来,作为UI设计师的我们是时候展示我们真正的技术了!


1.      如何根据原型图设计界面


既然是根据原型设计界面,那么我就让大家见一下所谓的原型图,为了能大家能够印象深刻,我就列举了这样的原型图,分为以下几种:


blob.png



然而这些只是幻觉,现实中的并不是这样,作为一个严格要求自己并且有着强迫症的设计师来说,是绝对不能容忍这样的原型图的,要画就要画高大上的才叫完美!下面才是一个真正的高逼格原型图,建议戴上墨镜小心闪到双眼


blob.png


是不是看到了不一样的曙光,发现了最美的草图!可能有些同学就想了,为什么别人的草图都比我设计的好看?


我怎么样才能画出这样的草图呢?我建议这个你可以私下的去练习这个,对于这个不属于你的职责范围,这是产品经理完成的部分,如果你们的没有产品经理的情况下,那你才有机会去伸展你的才华,画一个让设计都膜拜的草图。


如果你要能工作中遇到一个能画出这样原型的产品经理,你可以说是最幸福的UI设计师了,因为接下来你的主要任务就是给原型上色了,几乎是轻轻松松的就搞完了。


虽然是轻松的,但也不能掉以轻心,上色可不是乱上色的,而是根据产品的logo来确定,主色调,辅助色,并且要制定相应的设计规范。


2.      设计规范的作用


blob.png


那什么是设计规范呢?顾名思义,设计 规范--就是对设计的规则及示范。它贯穿整个APP的设计过程,从颜色、文字、图标等一切和视觉相关的,到用户与机器的交互都有着规范在其中。在之前我写的第一篇文章里面也有提到过设计规范


对于一个刚刚从事UI设计的新人来说,设计的界面就像一个零散的队伍一样,无拘无束,看起来很混乱,自己也不明白为什么会这样。其实是忽略了一样东西,那就是设计规范。常说无规矩不成方圆,所以同样的道理再设计界面的时候,规范也是必不可少的一部分。


在这个社会中大家都知道,只有有秩序的才能让社会安定,人们的生活才会舒适。同样的道理,设计规范也是这样,它是为了让APP更好的开发,减少开发过程中出现错误的频率,降低开发的成本。


这里所说的设计规范才是UI设计的最主要的工作,对于设计规范的制定可以说是这个APP的设计的灵魂。制作设计规范之前,首先通过制作基本页面,来确定整体UI界面的风格,然后制定设计规范,接下来就是按照设计规范开始复制界面,完成整个APP的所有的页面,在根据设计规范做界面的时候,也会遇到一些与设计规范相冲突的情况,这时要根据实际的情况而定,也不是百分之百按照规范来做的,千万不要死脑筋的要死,认为设计规范一定是这样,不能违背。


如何制作设计规范?将在下篇文章中详细说明,后续会有如何让高质量图标有用武之处?如何利用排版提高用户体验?


3.    人性化的交互体验



什么是交互?大家可以简单的理解为:交互就是交流互动,自然也就是与机器设备的交流互动。而我们的交流互动多半都是使用手指的操作,使用点击、滑动来进行和设备之前的交互。交互就是在我们操作设备的时候,引导我们如何操作。


那什么才是最好的交互呢?


交互最流行的一句话就是:把用户当做傻子!为什么这样说呢?其实仔细想想就是这样,越减少用户思考的时间,这个交互用起来就越流畅,用户体验就越轻松。


五、结语


原型和设计规范是一个优秀的APP不可缺少的东西,原型包含着这个APP的所有的功能以及大概的页面,可以看做是APP的骨架,规范包含整个APP的视觉,可以看做是APP的皮肤,而交互就可以看做APP的


UI设计它不是艺术家,而是一个具有匠心的工程师,是利用工具或者方法来完成自己的作品,不想艺术家那样随意和潇洒,我们更要考虑的是我们服务于大众,我们的作品也不仅仅只是我们电脑里面的图片,也不是你们原来单纯的毕业设计,它是附有责任和使命的!




1514175881211518.png


个人微信号,欢迎来扰



往期好文


【设计篇】在界面设计中新手不知道的那些事系列(一)

【设计篇】在界面设计中新手不知道的那些事系列(二)


回复 使用道具
举报
熊猫党

发表于 03-02 12:12 显示全部楼层

路过,支持一下

回复 支持 反对 使用道具
举报
p出我世界

发表于 02-25 08:55 显示全部楼层

回复 支持 反对 使用道具
举报
大道至简

发表于 02-22 18:06 显示全部楼层

回复 支持 反对 使用道具
举报
行运超人

发表于 02-21 06:00 显示全部楼层

回复 支持 反对 使用道具
举报
晴天屁屁

发表于 02-19 07:35 显示全部楼层

围观楼主

回复 支持 反对 使用道具
举报
今夜来微微

发表于 02-16 13:51 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报
biubiuamy

发表于 02-13 06:19 显示全部楼层

回复 支持 反对 使用道具
举报
晴天屁屁

发表于 01-31 22:32 显示全部楼层

回复 支持 反对 使用道具
举报
我不想静静

发表于 01-30 18:28 显示全部楼层

回复 支持 反对 使用道具
举报
12下一页

发表新文章
孙傲

小码哥会员

0

学分

247

学币

259

积分

小码哥会员

Rank: 3Rank: 3

积分
259

关注新浪微博

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育