.jpg)
一、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界面，所有的图标都要自己做吗
第一点：了解你的目标客户群的心态
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种优势！
三、一般ui设计app有多少个界面
这个没有统一标准，最基本的app界面类型一般有八种，包括启动页、引导页、蒙层引导、空白页、登录注册页、首页、个人中心页、列表页。
1.启动页
启动页是指用户打开应用软件时看到的过渡页面，通常有1-5秒的时间，主要用来缓解用户等待应用启动时的焦虑情绪。
2.引导页
引导页是指用户安装或更新app后首次启动，出现在启动页之后进入主界面之前的界面，帮助用户更加清晰的了解产品定位与功能服务。
3.蒙层引导
蒙层引导指在产品界面上用黑色半透明的蒙版进行遮罩，然后搭配文字、插画等元素对界面进行标注，引导用户完成功能的操作。
4.空白页
空白页是指用户在使用产品时遇到的因无数据展示而中断体验的场景。空状态并不全指异常状态，并不局限于产生错误的异常场景。
5.登录注册页
登录注册页面是用户使用大部分app第一个涉及到交互的操作界面，一般的注册方式有三种：手机号注册、邮箱注册、第三方登录。
6.首页
首页是一个app最重要的模块，不同产品定位的app首页的布局架构也有很大的不同。比如社交类和电商类的app表现形式就完全不同。我们在设计的时候需要根据产品的定位和功能选择合适的展示方式。
7.个人中心页
个人中心页面是个人信息和功能点的集合入口，也叫“我的”，用户在这里可以个人相关的资料信息及其他相关功能数据等。个人中心有两种角色的划分，一种是仅自己可见的个个人中心，另一种是展示给他人看的个人主页。
8.列表页
列表页指用列表形式来展示文字、图片等信息的页面。列表页的表现形式有一排单个、一排两个或一排多个等，根据需要展示的内容来选择合适的形式。
