实例讲解UI设计师的日常工作

来源:网络   作者:热心网友   发布时间:2016-09-06    浏览次数:506

UI设计师


UI全称User Interface,也就是用户界面设计,我只讲移动端,一个好的UI设计师不单单只是做到视觉上的效果,还要考虑到用户层面,可操作性,是要把三者结合去解决问题,而不是去追求一味的视觉,有很多app界面让人觉得难以忍受,原因只有一个,太多的混乱元素,让用户感觉不够直观,没法集中注意力去观察我们要带给他的重点内容,在添加任何一个内容或者细节时,多思考问自己问什么这样做,如果忽略这方面,可想而知这个人一定是很糟糕的UI设计师。


UI全称User Interface,也就是用户界面设计,我只讲移动端,一个好的UI设计师不单单只是做到视觉上的效果,还要考虑到用户层面,可操作性,是要把三者结合去解决问题,而不是去追求一味的视觉,有很多app界面让人觉得难以忍受,原因只有一个,太多的混乱元素,让用户感觉不够直观,没法集中注意力去观察我们要带给他的重点内容,在添加任何一个内容或者细节时,多思考问自己问什么这样做,如果忽略这方面,可想而知这个人一定是很糟糕的UI设计师。

c853573bf34832f8757cb92d7320.jpg

以上几组图标是我日常的练习,请记住只是练习,这样也是你进UI培训的课程,说白了,你自己通过多加练习,知道光影效果,做出来是时间问题,一定要理解,而不是照抄,天天拿出你的本子有空多画画,才是重点,手绘基础一定要有,别光说不练,不懂装懂那才可怕,当然现在icon慢慢扁平化了,拟物的会很少,不代表你可以放弃,现在很多表现形式,你都需要掌握,去不断学习,才能称之为设计师,不然你顶多是美工。


对原型图的理解,不是依葫芦画瓢,而是先思考后动手,理解产品经理或者UE的思路,为什么要这样做,这个页面需要哪些功能和按键,了解用户的阅读习惯,以及一些用户体验的基础知识,这些都是要通过时间去累计的经验,不是那么简单,所以很多从培训班出来的,都是拿些练习的视觉稿在给面试官看,讲不出所以然来,也许短暂的时间让你的设计能力提升上来,但是在思维模式上需要靠的是自己的理解和积累,是不可能速成的,一问便露馅。

69ca573bf36f6ac7253f9a840a7f.jpg


也许你会收到一张这样的图(很多创业型公司不会招UE,会由产品经理来画),好的话你可以见到一张大概的初稿,不好的话,可能直接把写成一篇看不懂的需求文档丢你这(会很悲剧的),你需要再这个基础上去完善你的视觉稿,如果你拿着稿子就开始做或者按他的布局来一摸一样的做,那么说你这位设计师肯定是不合格的,因为没动脑子,我们需要合理去布局每一块位置,考虑怎么样可扩展等,我来说下个这个首页的思路,让大家知道我是怎么思考的,首先分析,这个里面有什么,


1,左上角菜单栏

2, banner

3,通知栏

4,内容区域

5,主菜单栏


以iphone6的尺寸是1334x750px为例(图1),主菜单栏是98px,导航栏为88px,状态栏为40px,那么中间内容区域只剩下1334-98-88-40=1108px,所以再这个范围内容要规划好,他们的占比是多少,我设置的banner高度为320px,中间灰色间隔为20px(背景色为eeeeee),通知栏为60px,字体大小的选择,最小为20号苹方细体,均为描述性用语,重要的数字28号苹方中等,图2可以看到我做了规划,这里我不拿视觉稿说,可以见我之前的作品,如果出现按钮,点击状态的色值又是什么,在5尺寸下,显示到什么地方等一列要考虑到的问题,不是那么简单的,所以很多都是在考你解决问题的思路,好的设计师,在心中都有一套已成型的规范,不会犯常识性错误,所以做起来会事倍功半。怎么样认真对待你的设计,而不是敷衍了事,问你任何一个问题你能答上来,说出你的理由,而不是为了设计而设计,为工作而工作,要的是态度,以及你的思维的模式,视觉方面可以慢慢优化,我说的挺简单,但实际上却很难。以上我还只是初步的说,更深的东西我也需要去摸索和数据支撑再去设计,以上就是仅仅是我个人的思路,高手也可以给我点指导性意见,不胜感激。


7df1573bf38732f8757cb95660e8.jpg


H5的制作,H5的制作好比一个电商店铺装修,整个氛围要烘托出来,视觉感要强,吸引用户研究,有主有次,色彩分明,以及需要前端帮你达到怎么样的效果,都需要做出来,来告诉前端你要的效果,再来就是适配,H5要适配各种机型,所以你要考虑的就不只是这些,每个机型都要去看,是否达到自己的标准,久而久之就给自己一个定了规范,怎么样做符合标准的情况下快速出稿。图片大小当然是越小越好(不损失像素的前提下)一般全部存图的加起来大小为200-400k最好,当然按实际情况来,请大神自行绕道。


3fa6573bf3ad6ac7253f9af765cb.jpg


0d8b573bf3d46ac7253f9a101000.jpg

UI在设计上可能不像做电商那般“随性”,因为他的存是为了解决问题,提供用户方便使用而存在的,用户体验才是核心,我看有很多作品过于形式感,反而不是件好事,当然也要所突破才能更好的完善,这只是个人理解,所以UI的思路需要更贴近产品的思维,才能更好的走下去,如果你没有那也就只是做做图的吧,所以你是你看到这,是否对转型做UI有一定的衡量标准了。


ICON的设计:

用简单图形的方式表达字的意思,让人明白易懂,就像店铺的标示导航一样,起到识别作用,根据不同尺寸存取不同大小,具体可以去看规范。


界面设计:

根据原型图,搭配色彩,合理分配布局,主和次,用户习惯的操作等一系列操作,交互软件最好熟悉,很多设计师都是看着交互原形依葫芦画瓢,交互稿什么样视觉稿就什么样,没经过任何思考,只能被称之“美工”。


H5设计:

是指活动推广图,吸粉的重要途径之一


手绘基础:

必修项目,很多配图可以通过自己的手绘去实现,使其更加统一,更加有趣。

2dcd573bf3ed32f8757cb9adfa5c.jpg



综合上述所说,UI设计更偏向于产品,在视觉的基础上加以学习,如交互,用户心理等,通过长时间的积累,也能成为一名出色的UI设计,短时间的培训只是让你明白一些基础的规范和制作一些图标,意义真的不大,多去阅读好的文章和学习别人作品,多去想想为什么这样做,写到这相信大家对转型做UI有了一定的了解,希望能给到大家帮助,谢谢大家。

联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/4877.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通