软件界面 怎么使用ui图片素材-教你十分钟学会制作UI界面

第一点:了解你的目标客户群的心态

1、做微任务的目标客户群(如随时随地看看新闻,听听歌,看看电影,聊聊八卦之类):

这类的解决方案是设计的app最好是小而准,不要大而全。越全的功能应用,只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群:比如找地图,看天气,查数据等。

这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群,用来打发消磨时间的:无需求,漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西,帮助客户来打发消磨时光。

第二点:APP原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的APP原型图工具:移动APP原型设计神器POP、axure、Foreui等

第三点:APP视觉设计与设计要点

(1)大概设计板块有APP启动页面设计,APP界面设计的尺寸规范,app图标设计等

一般来说,手机屏幕是从上往下布局的,重要的信息会放在上方。但是在操作上,大部分人都是单手拿手机,常用的操作,要放在界面的下方。

另外还有一个原则,最小的触摸单位,一般是44个像素。如果再小,你的拇指难以触碰,或者容易引发误操作。同时,也不要让界面太拥挤。

所以,设计师必须用减法设计,这个过程需要花时间思考、简化元素。

你必须记住:(1)隐藏设计或者减法设计(2)分区或分类(3)帮用户做决策(4)提高交互创新设计(5)让人有爽快感和新奇感(6)在设计中浸入情感,把握用户的心理。(谈谈如何进行产品设计以及产品情感化设计)

一位大师这样说过“真正的简约设计是:作品必须不断的被简化,一改再改,直到设计最终成形。”

2014年APP设计风格趋向扁平化和卡片化。卡片,扁平化都会是移动app设计的趋势!认为卡片设计确实同时兼具了“拟物”和“极简”2种优势!

第四点:APP界面设计流程

(1).设计APP界面时,学会从优秀APP界面设计作品中寻求灵感,以前的艺术大师,用少量的资源做了大量的设计。

(2).放下工作,休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作,带着全新的眼光工作,比长时间冥思苦想更有

(3).并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存,对比两个版式就能很快分清孰好孰坏。

(4).由于实物展示的相对比例至关重要,所以要及早在不同的目标设备上测试。

(5).整个设计过程中不断问自己“真的需要吗?”。支撑项目时候,找一些讨巧的办法,例如,添加一些有趣的元素、样式会这样会很容易也会很吸引人,但必须始终注意剔除不必要的元素,不断精简。甩掉你费尽心血的部分总是难以割舍,但修改过程必须挑剔。

第五点:APP界面设计测试与预览修正

设计完成之后,我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具:快速在移动终端上预览APP界面设计效果图的方法最后:好的APP界面设计作品必然是要经过不断升级、重复迭代的。一般用axure把appui/ue原型完成了,就交给设计和前端完成了高保真了,具体什么软件,着实不知道。

通常UI设计出来的界面都被保存为.psd文件(PhotoShop Document),这里找到一个简单的示例.psd文件并且使用PhotoShop工具打开并且找到需要切图的图片元素

请点击输入图片描述

请点击输入图片描述

在打开的PhotoShop窗口左侧工具栏中选择裁剪工具,右键点击裁剪工具会打开裁剪工具的右键菜单,选择第三个切图工具

请点击输入图片描述

鼠标变成切图工具图标后从切图图标的左上角到右下角斜拉出一个正方形框,这号包裹住要切的图标,松开鼠标后图片变成如图的样子

请点击输入图片描述

接着点击PhotoShop菜单栏的File->Save As Web...菜单项,也就是保存为Web类型

请点击输入图片描述

在打开的保存为Web对话框中选择保存图片为png格式,接着点击保存按钮

请点击输入图片描述

在保存配置对话框中选择保存为HTML和图片,切片选择所有切片,接着点击保存按钮

请点击输入图片描述

进入前面保存Web对话框中的路径,查看图片目录,发现切图的按钮图标在切片文件夹中,其他的切片是无用的

请点击输入图片描述

1.准备素材

一张背景图和四张人物图像图片、线性图标、准备字体、界面色值。

2.字体

在UI设计中,避免使用有衬线,iOS中英文使用Helvetica,中文使用冬青等一些无线衬字体,尽量使用一些与iOS自有字体相似的字体做设计。

3.选色

基本选择两个颜色,主色、辅色。而高光、阴影基于主色,高光向左上角去选择合适的色值,阴影像右下角选择暗一些的色值。主色选择时很重要的,每一个主体都有一个合适的颜色。

4.画界面

准备好要用的色值、字体、图片素材后,我们就来开始做页面。界面画布尺寸设定:750*1334px,状态栏高度设定:40px,导航栏高度设定:88px,导航栏两侧按钮大小设为36*36px。相对于新手来说是难点,归类起来为两类:一个是蒙板,一个是图层样式的渐变。

画一个320*320px的正圆,关闭3.1的填充,打开描边,设置描边为6px,选择3.2的渐变描边,设置角度为90度,根据自己的需要在3.5中设置色块,就得到2.5的效果。

5.图片处理

将素材拖入后转化为智能对象,调整色彩饱和度和明度以及图层样式,叠加的颜色用的是基于主色又相对较暗的颜色。

6.视觉包装

做完界面后,还有最重要的一步:视觉包装。给自己做的页面做个简单的包装,美化一下自己的界面吧!

以上就是关于制作

UI界面

的相关分享,希望对大家有所帮助,想要了解更多内容,欢迎及时关注本平台!