app界面设计整套模板-一款APP该如何制作

APP展示图,教大家怎么做这种APP作品展示图

想不想高大上地展示你的APP作品呢?想不想将图片变成APP效果图呢?那就一起来看看下面这个PS教程吧!教程不难,就随小编我一起来学习下怎么用PS将图片变成APP效果展示图吧!

这次我们要做的是一个5S的尺寸的APP效果展现图。

步骤:

1、新建一个画布尺寸为:640*1136,然后保存,命名如:5S效果图模板。

2、再新建一个画布,命名如:效果图展现。

2、再新建一个画布,命名如:效果图展现。

尺寸随意,可以大点,自己看情况吧。

3、将刚才保存的那个5S效果图模板.psd拖到这个画布中。

Ctrl+T变换到合适的尺寸,倾斜到合适的透视效果。

4、然后双击”5S效果图模板”这个图层。

跳到这个画面后。

拖入你想要做的界面。

5、回到这个展示页面。注:这儿忽略了一步,把刚才保存的图层拖过来。

复制一个图层。

按住Option(Alt)+鼠标左键拖动图层往下拽,或者Command(Ctrl)+J,选下面的一个图层,双击图层进入图层样式,选择斜面和浮雕,设置一下参数。

参数自行调整,其中,阴影角度45°可随大环境光线可根据情况自行调整,阴影模式透明度随意,自己看情况调整。

6、然后,从第二个图层开始连续复制多个该图层,每复制的一个图层都在上一个图层的下方,每复制一个图层都往下移一个像素,按住option(Alt)+鼠标左键拖动图层往下拽,可使用键盘上的下方向键来控制。

然后,在最后一个图层上设置一个投影。

然后,在最后一个图层上设置一个投影,参数自行解决。

最后调整下整体环境。

本次教程的好处便是使用了智能对象,它可以让你想展示的界面可以随意替换。

如需展示多个界面的效果,只要多拖进几次那个PSD,然后平面排好后,统一调整透视效果。

当然表现的手法很多,以上只是一种。

比如,也可以再建好的大画布上,画一个矩形的尺寸为640×1136,然后转成智能对象,再双击智能对象,进入调整。

附上@正越升同学的方法,原理相同,细节上处理更加丰富。

一个效果有千万种实现的办法,在这里只提供一个最简单的思路,用PS纯做。

一、扭曲&旋转

导入界面图,然后编辑-扭曲,再旋转,做到如下效果:

二、制作厚度

这一步最关键,选中界面图层,[Ctrl+Alt+T],然后按一下方向键[↑],再按回车。这样就复制了一个图层,并且新的图层在原来基础上往上移动一个像素。

来了,狂按[Ctrl+Alt+Shift+T],这是重复之前的变换操作,这样就会复制出很多个图层,每一个都在之前基础上往上移动一个像素。从而做出厚度效果。

三、改变亮度

保留最上面那个图层,将其他所有界面的图层,合并成一个图层,命名为[厚度]。

然后选中[厚度]图层,使用矩形选框工具+[图像-调整-亮度对比度],对厚度的左边面和右边面分别进行降低亮度20和50处理。

四、阴影

复制[app]图层,改变图层顺序到[厚度]下面,然后使用[高斯模糊]+颜色叠加为黑色+改变不透明度为30%。完工!

好的,关于怎么用PS将图片变成APP效果图的方法就介绍到这里,大家学会了吗?

如何做界面UI设计的展示图

UI设计中制作界面图标的流程:

1、图标创意阶段;

2、草图绘制阶段;

3、草图渲染阶段。

补充:

1、在PS中新建一个所需尺寸的画布并保存,将其命名为UI设计效果图模板。

2、再新建一个画布,命名为界面UI设计效果图展现。尺寸随意。

3、将刚才保存的界面UI设计效果图模板.psd拖到画布中。Ctrl加T变换到合适的尺寸,倾斜到合适的透视效果。

4、然后双击界面UI设计效果图模板这个图层即可。

补充:UI即用户界面的简称。泛指用户的操作界面,包含移动APP,网页,智能穿戴设备等。UI设计主要指界面的样式,美观程度。而使用上,对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

App开屏页如何设计?来看这五个常用的方法

第一印象很重要!很多用户会根据App/网站的初始形象来判断是否能信任这家公司或产品。

那么如何解决快速感知的问题呢?首先将关注点放在App带给我们的第一印象上。合理的启动页能激发用户的潜意识,有助于吸引和留存合适的用户。

在深入研究设计策略之前,先来了解一下启动画面的基本知识。

启动画面指一系列连续的使用体验——从用户点击应用图标开始到内容加载完成为止。通常包括以下五种形式:

1、应用图标(参与启动体验的第一个环节)

2、启动画面(开屏页)

3、开屏页跳转到内容页

4、骨架屏的启动形式(待加载状态)

5、动画式开屏(加载更多内容)

开屏页是产品体验的门户,通过模拟更快的加载时间、创建无缝的启动体验来提升用户体验。

设计不只关注外观,更关注解决特定用户问题的方法。启动页能解决哪些问题呢?

-在潜意识中与用户交流,并设定对未来的预期;

-通过隐藏加载过程来减少可感知的等待时间;

-向用户介绍App的用途和品牌;

-为用户提供愉快的体验。

通过对问题的梳理,这里总结了开屏页设计的5种方法,有效吸引用户的注意力。

从iOS10开始,开发者可以将预定义的图标进行个性化设置。例Bear允许用户根据主题色调整图标的颜色。

MLB允许用户选择自己喜欢的团队作为启动图标。

启动页像是一种持续的营销活动,因为用户每打开一次App就会加深对品牌的印象。

通过在启动页中添加标志性的slogan或者图像,既能强调App的用途也为用户设定了一定的期望。

例如上图的3个应用将品牌logo放在开屏页中,这样的设计对用户的感官有直接的刺激。

上图的History、DocuSign和Ted三个App,通过在开屏中添加标语来强化价值主张。

从点击图标到内容加载,中间有一段可感知的加载时间,如果在这段时间内融入合适的动画,用户能对产品状态有提前的了解。

上图的三个App都利用动画在开屏页和内容页之间建立了无缝的桥梁。

Google,TinyFax和Cinamatic这些App利用动画将图标巧妙地转换成内容。

同样上面的三个App虽然使用的动画不算很细腻,也能完成从初始页到内容的过渡。

有些应用的动效则保持简单,如上图只将标志作为突出展示。

Chick-fil-A在开屏页上添加提示动画,成功将用户引导到内容页。

对于大多数应用来说,使用开屏页+骨架屏的形式更有意义,因为轻量级的应用通常加载速度非常快,骨架屏能获得更流畅的体验。

这些应用在启动页面预加载主页的内容,Breathe(中间)使用与主页内容相似的彩色骨架。Transit(右边)使用地图的骨架作为启动页,加载完成后方便用户直接点击。

上图的应用通过预加载和动画来把握时间,给人一种“即将到来”的印象。

和前面的应用相比,Snow、Dribbble和LaunchPro使用的骨架状态很少。

有些App启动时需要加载大量数据,例如视频、音频,所以需要大量加载时间。

对于这类应用,稍微长一点的动画更有意义。随着数据的缓存和加载时间的缩短,动画可以变得越来越短。

上图的App使用动画来加载数据,给用户带来反馈的时间。

Clashem,Tumbleweed和Chefsfeed使用有趣的动画在加载数据的同时又加强了品牌体验。

看了这么多案例,启动画面到底要显示多长时间呢?这应该考虑应用的配置和加载数据需要的时间。

自定义启动体验以适应不同的使用时间和用户:

·各个阶段的用户要有不一样的启动体验;

·先考虑应用的大小再选择合理的启动页;

·用图像传达信息,动画作为引导;

·尽可能使用独特的图标来进行品牌推广。

希望文章能够让你有所收获～

精彩推荐:

1、聊聊卡片式设计的运用

2、案例分析:栅格系统的布局设计

3、如何设计深色模式?这3点因素需要考虑

4、深度解析:服务蓝图的应用逻辑设计

一般设计一个app的ui需要多少钱?

设计一个app的ui需要多少钱

如今,不少企业都想拥有属于自己企业或产品的

手机APP

,但其中最困扰企业主的问题就是:开发一款手机APP到底需要多少钱?

简单点来说,要视手机APP的需求及质量而言,价位一般在几千到十几万左右,更高端的价格更高。

今天,我们就来详细分析一下这个问题,请继续往下看吧。

一、APP开发款式分为固定款和定制款,两者的价格均不相同

固定款:是指直接套用已有的、现成的APP固定模板,报价是固定的,所需要的功能也是固定的,缺点就是客户拿不到

源代码

,也不能根据企业需求进行定制,由于源代码是封装的,如果企业以后想进行功能升级或系统维护的话,也不能够实现,只能重新开发一个新的软件。

固定款的APP开发时间短,约2~3日的时间即可完成,费用大约在几千到几万之间。

定制款:定制款是指APP的功能全部重新开发,过程比较繁琐,需要美工、策划、APP开发(前台/客户端/手机端)、后台

程序员

等工种协同完成,大型的、功能复杂的APP甚至需要数十人的团队。

由于APP的功能和设计都是定制的,因此价格会高些。定制款的开发时间与开发价格是成正比的,开发时间长,大约在两三个月甚至不定的周期里才能完成,而费用大概在几万甚至十几万左右。

因此,想要知道开发一款手机APP需要花费多少钱,企业主首先必须把APP的详细需求和功能告知APP开发公司,开发公司才能报出一个合理的价格。

二、手机APP平台不同,制作成本也不一样

现在市面上流行的手机APP制作平台主要有两种一般包括两种系统:

安卓系统

(Android)和苹果系统(IOS)。

一般来说,制作苹果系统的手机APP软件费用要比安卓平台的贵一些,因为

苹果公司

对苹果平台的封闭性和手机APP开发语言Objective-C的难度,都让APP开发者加大了苹果系统手机APP开发的难度。

三、APP制作成本包含参与人员的工资

通常情况下,开发一款APP需要

产品经理

、客户端工程师、

后端工程师

和UI设计师各一名,这已经是制作手机APP应用软件比较精简的配置了,所以这些参与人员的工资也是包含在APP制作成本当中的。这些工作人员的月薪加起来可能都会超过4、5万元。

四、APP开发公司的所在地

需要注意的是,同样实力的APP开发公司,在不同的城市也会导致APP的成本费用高一些

视觉设计(APPUI)规范文档怎么写?

在创业公司工作的这几年中,很多工作都要涉及到视觉设计,但一般公司不会那么细,在我脑海中分为三种:

1.平面设计师:限于2d广告设计,比如名片、海报、宣传画册、单页等等,做出来的UI可执行性很低,很多和原生系统相斥,工程师会很头疼。无规范可言。

2.UI设计师:限于软件UI的设计,一般的工程师拿到设计文件执行起来没有很大难度,但是做出来的平面没有创意,从技术上来看一般,想要让人眼前一亮或是加上营销的想法很难。无规范可言。

3.视觉设计师:有很好的审美观念,有平面设计大作,针对不同场所,不同功能的设计有自己独特的见解与经验;有3D设计经验,一般都有家居、建筑设计经验;对于不同系统的软件UI与UE都有研究,并针对不同功能的应用规划其功能流程让UI的不仅美观并且易于上手。对于每一个公司或项目群都有其规范文档。

然而我就遇到过第一种,请不起第二种和第三种,平面压力很大导致辞职的较多,交接工作时我是来一个又要和他重新说一遍,一直觉得应该出个文档,看完之后能够马上上手的那种,现在才知道原来是叫做视觉设计规范文档

注明使用版本、设计操作系统、与开发时要说明的

1.指导分工协作

2.避免重复工作

3.视觉统一,形象加分

4.让思路更加清晰,工作更加高效

视觉设计师、平面设计师、交互设计师、产品经理、程序员、市场运营人员、前端开发、软件测试

色调:确认主题色、组件色

字号:根据实际用途与场景适配,以实际效果良好为准,确定一个适合值即可。

通用组件样式:将整个UI设计中能够通用的组件统一风格,比如:对话框,提示框,确认信息框等

不同状态下组件样式:不同状态下的组件样式一般为相同的,针对使用场景以实际效果为准

间距:框架中的间距、元素与元素之间的间距

图片规范:不同页面、位置、图片的尺寸、颜色等等参数要求

不同适用版本:平板、手机、电脑等不同版本

整体框架修饰:将整体框架固定,作为模板往里填,有利于掌控整体风格

不同级别子页面风格:不同子界面的设计可以完全放给下个设计师,有需要也可以进行限制

第一步确定清晰的流程与思路

第二步:

适配尺寸:android、ios不同系统、不同设备_表格或结构图表现

可参考_ndroid尺寸等规范参考

要注意的是:

anrdoid要切图,将图标和图片元素切为hdpi、xhdpi、xxhdpi三套,放入三个文件夹中打包

ios要切图,将图标和图片元素切为@2x,@3x两套,放入两个文件夹中打包

第三步:

确认主题色与元素色

在appstyle系统统一默认配色中设置为主题色

在其他元素比如:分割线颜色、卡片阴影颜色深度、重要颜色文字深度等等

第四步:

文字

苹果常用字体点这里!

不同地方、用途中文字的字体、字号

第五步:

图标

统一的尺寸,特殊用途的注明、不同状态的请附加

第六步:

按钮

按钮的样式与不同状态的样式、尺寸

悬浮按钮56dp,普通按钮48dp

第七步:

公共控件

比如对话框

第八步:

模块

确定某个模块的风格

第九步:

布局

确定大致布局风格

一次性不能将规范全都覆盖到位,可以不断的添加并注明添加人和时间,经过设计部审核才能生效发布。

如何用UI设计软件做app页面

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

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原型完成了,就交给设计和前端完成了高保真了,具体什么软件,着实不知道。

做一个手机app大概需要多少费用

在移动通信网络速度大幅提升和手机终端的价值不断增强的当前,手机APP依托于手机终端为人们获取信息、知识、娱乐、社交等提供了便捷,APP不断满足使用者个性化需求,能够及时、迅速、有效地切入并迎合社会大众在工作和生活上的需求,这也是制作APP的重要原因。

很多人上来就要问做一个APP多少钱?做一个简单的APP多少钱?或者说我要做个类似美团/淘宝/京东/滴滴打车一样的APP多少钱?

对APP软件功能的要求也要跟着一起变更,通用性的软件已经很难适用企业不断发展的管理需求,因此,企业的需要根据具体情况、具体要求来进行设计软件系统,充分满足个性化开发需求。

80%的人都容易犯的致命错误:以为做个软件很简单,所以描述需求的时候及其模糊;急着要报价,在自己对需求不确定的时候就要报价,然后就按这个报价开始做;不知道自己要什么,想做个商城说要做的是淘宝;网站和手机App区别搞不清楚;以为所有软件都有模板,而且模板都很便宜;自己不知道要做的东西的具体功能,要靠开发商来猜,而且这个时候还要知道报价才能进行下一步沟通。

事实告诉我们,这些问题一定会导致以下结果:项目做出来跟自己想的完全不一样;项目上线的时候漏洞百出,反复修修补补解决不了问题,导致后面必须重做(以滴滴打车为例,找外包做出来没用过一次就直接报废重做);误把自己都不确定需求时得到的不靠谱报价当做真实报价去开始做预算,导致后期资金预算跟不上继而导致项目失控。

造成这些根本原因很简单,大家对需求的理解完全不一样。一般根据项目需求的细化程度,需求想的越仔细开发成本越高。所以,一个真正负责任的公司会仔细的询问你需求的细节。

告诉你,一款APP该如何制作?

APP开发分为两种:传统的外包开发和免编程平台化开发。

1. 选择外包开发需要明确以下几点:

产品定位:分析APP的产品需求、需满足客户的需求内容、制定功能需求,用户需求和产品需求双向考虑。在确定产品功能的时候,可以结合市场上常见的APP进行分析,同时对比类似的竞品APP,进行功能、界面的总结,分析别人这么做的原因。

UI界面及交互设计:协调进行制作整个APP界面作图、切图、修改UI、H5效果等。

功能的开发:分为web网页加壳生成APP、Web网页原生态混编、HTML5开发、原生态开发。

其中,web网页加壳生成APP的开发方式最便宜,是买现成的网站模板,在加壳打包一个APP只需要5分钟,做出来的效果比较差,耗流量,浏览体验极差,访问速度慢等。

Web网页原生态混编是网页部分占80%以上,混编方式的APP效果,要比比第一种稍好。但是如果要做出接近原生态的效果,需要不断的优化和改版,花的钱不比原生态少。而如果不对网页和系统优化,只是简单的拼凑。那么做出来的效果和web加壳的差不多。

HTML5开发,成本大概是原生态APP的50%到30%,也是比较接近原生开发能达到效果的一种方式。但受到各大平台限制其兼容性不足,比较耗系统资源,在低配的手机会卡。手机淘宝的APP就是属于HTML5原生态混编的,相对来说其试错成本小公司不一定能承受。原生态开发是目前最常用和最成熟的方式。一般根据具体功能要求一个APP的开发成本从几千块到几千万不等。越重视细节成本越高。

APP功能实现:单独开发安卓版APP、苹果iOS版APP、电脑端的运营管理后台、手机运营助手、和服务器五大部分。

测试修改上线:APP研发出来后,就是对APP产品的测试、修改bug等。完善后,上架各大应用商店就可以运行了。

2. 选择免编程平台化开发:

这是最新兴起的开发平台,相对来说步骤就简单很多。无需APP外包公司、无需编程开发、无需专业UI设计,可以拼图式极速制作APP。

产品定位:与APP外包步骤相同。

UI界面及交互设计:自助式开发的好处就是有详细的APP功能教程可参考,整套原生APP模板可以借鉴。

上线运行:因为平台自助化模式,制作出来的APP不需要测试、修改。

以上两种完全不同的开发模式各有优点,APP外包可以进行个性化定制开发。平台化开发的好处是快速,适合大众化的APP开发,最重要的是可以节约90%的成本。而选择一款适合自己的才是最好的!