app引导页面如何添加(app引导页模板)

app引导页面如何添加,app引导页模板

内容导航：

如何App实现引导页和欢迎页

如何正确设计App引导页

如何做App登陆，注册，引导，布局

怎么在引导里添加OS 怎么在引导里添加OS＜br

一、如何App实现引导页和欢迎页

欢迎页：这个在我们的微信里面就有这个，我们每一次打开微信的时候都有一个地球，那么这样就是欢迎页。欢迎页具有良好的数据缓存作用。引导页：就是我们没次安装一个app的时候，前面都有几个图片。那么这个引导页有哪些作用，第一：它有教我们怎么使用这个app和接受这app。第二：有宣传的作用。我们在这个功能中用到的知识点有ViewPage、ViewPage的适配器PageAdapter、ViewPage的滑动改变事件、、RadioGroupRadioButton的点击事件。好，现在我们接下来上代码了。这个就是我的项目结构。其中是欢迎页、是引导页、是ViewPage的适配、BasePageListen实现页面滑动的接口。第一个我们先写WActivity这个类。package
;import ;import ;import ferences;import ;import Activity;import ;public class
WActivity extends AppCompatActivity { private SharedPreferences sp; private
boolean isFirst; //欢迎页面 @Override protected void onCreate(Bundle
savedInstanceState) { (savedInstanceState); setContentView(_w); //获得共享参数对象
sp=getSharedPreferences(“first”, _PRIVATE); //参数二 如果sp文件中没有记录的话 返回的默认值
isFirst=n(“isFirst”,true); //这里面的判断就是 如果是第一次进入app 那就跳转引导页 //不是第一次就跳到主页面 new
Handler().postDelayed(new Runnable() { editor; Intent intent; @Override public
void run() { if(isFirst){ intent =new Intent(,); startActivity(intent); ();
//把数据保存到sp里面 //获取可以向sp里面写入数据的对象 editor=(); n(“first”,false); //提交我们的数据 ();
}else { intent=new Intent(,); startActivity(intent); (); } } },1500);
}}下面我们就写MyAdpter这个类import ;import ter;import ;import ;import ;import ;/ *
Created by OFFICE on 2016/8/9. */public class MyAdapter extends PagerAdapter{
private List< ImageView > list; private Context context; public
MyAdapter(Context context, List list) { = context; = list; } @Override public
int getCount() { return (); } @Override public boolean isViewFromObject(View
view, Object object) { return view==object; } @Override public Object
instantiateItem(ViewGroup container, int position) { ((position)); return
(position); } //里面有一个方法必须删除super.不删除会报错 @Override public void
destroyItem(ViewGroup container, int position, Object object) {
w((View)object); }}我们写BasePageListen这个类import ;/ * Created by OFFICE on
2016/8/9. */public class BasePageListen implements ngeListener{ @Override
public void onPageScrolled(int position, float positionOffset, int
positionOffsetPixels) { } @Override public void onPageSelected(int position) {
} @Override public void onPageScrollStateChanged(int state) {
}}最后我们写FActivitimport ;import ;import Activity;import ;import ;import ;import
on;import p;import ;import ;//引导页public class FActivity extends
AppCompatActivity { private List list; private RadioGroup radioGroup; private
ViewPager viewPager; private ImageView imageView1; @Override protected void
onCreate(Bundle savedInstanceState) { (savedInstanceState);
setContentView(_f); viewPager= (ViewPager) findViewById(); radioGroup=
(RadioGroup) findViewById(p); imageView1= (ImageView) findViewById() ;
initView(); kListener(new stener() { @Override public void onClick(View v) {
Intent intent = new Intent(, ); startActivity(intent); (); } }); MyAdapter
myAdapter=new MyAdapter(this,list); r(myAdapter); //viewPage变动RadioButton也在变动
ChangeListener(new BasePageListen(){ @Override public void onPageSelected(int
position) { RadioButton radioButton= (RadioButton) t(position); d(true);
if(position==()-1){ lity(); }else { lity(); } } });
//当点击RadioButton的时候，viewpage也在改变 kedChangeListener(new ChangeListener() {
@Override public void onCheckedChanged(RadioGroup group, int checkedId) {
tItem(checkedId); } }); } private void initView(){ int [] images={1,2,3};
list=new ArrayList(); for(int i=0;i<;i++){ ImageView imageView=new
ImageView(this); esource(images[i]); (imageView); RadioButton radioButton=new
RadioButton(this); //设置radioButton的id (i); //把ReaioButton放在group
(radioButton); } //设置默认选中的第一个按钮 //获得下标为0的按钮对象 RadioButton radioButton=
(RadioButton) t(0); d(true); }}好了，复制上去就可以实现上面的效果。

二、如何正确设计App引导页

• 目的区分根据引导页的目的、出发点不同，可以将其分为功能介绍类、使用说明类、推广类、问题解决类，一般引导页不会超过5页。
  功能介绍类功能介绍类引导页主要是对产品的主要功能进行展示，让用户对产品主功能有一个大致的了解。
  采用的形式大多以文字配合界面、插图的方式来展现。
  以易信为例，采用文字与水彩插图结合的方式，文字分为2个层次，大标题与小标题，大标题是对主功能的概括，小文字是对其功能模块的详细描述或进一步补充说明。

• 2使用说明类使用说明类引导页是对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。
  这类引导页大多采用箭头、圆圈进行标识，以手绘风格为主。
  以虾米音乐的引导页为例，对于较难发现的播放队列、歌词的操作方式进行的箭头引导来说明。

• 3推广类推广类引导页除了有一些产品功能的介绍外，更多是想传达产品的态度，让用户更明白这个产品的情怀，并考虑与整个产品风格、公司形象相一致。
  这一类的引导页如果做的不够吸引人，用户只会不耐烦地想快速划过。
  而制作精良、有趣的引导页，用户会驻足观赏。
  以淘宝旅行为例，淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用，在你出行前就帮你计划好所有的行程安排，只要一个行李箱，说走就走，与产品的理念相契合。
  而另外一款应用，选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。

• 4问题解决类问题解决类通过描述在实际生活中会遇到的问题，直击痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。
  例如QQ浏览器的引导页设计，通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题（搜不到小说、看小说花钱、小说更新需要等）。

• 表现方式文字与界面组合这是最常见的引导页面，简短的文字+该功能的界面，主要是运用在功能介绍类与使用说明类引导页。
  这种方式能较为直接地传达产品的主要功能，缺点在与过于模式化，显得千篇一律。

• 文字与插图组合文字与插图的组合方式也是目前常见的形式之一。
  插图多具象，以使用场景、照片为主，来表现文字内容。

• 动态效果与音乐除了静态页面外，开始流行具有动态效果的页面。
  在单个页面采用动画的形式，考虑好各个组件的先后快慢，打破原有的沉寂，让页面动起来。
  同时结合动效可以考虑页面间切换的方式，将默认的左右滑动改为上下滑动或过几秒自动切换到下一页。
  在浏览引导页的时候，可以试着加入一些与动效节奏相符合的音乐，会是一种更加新颖的方式。

• 视频展示在打开后通过播放视频的方式来介绍产品或传递一种理念，这种方式多见于偏生活记录类的应用，如拍照、运动类应用，给人传达青春活力、积极乐观的生活态度。
  优点：直观，动感，生活化。
  缺点：应用较大，视频播放会出现卡顿的情况。

• 总结以上已经针对引导页的目的差异以及表现方式进行了相关归类，在具体的设计中还得注意一些原则，它们会让你的设计更加吸引人，信息传达的效果更好。
  文案言简意赅，突出核心根据爱尔兰哲学家汉密尔顿观察发现的7±2效应，一个人的短时记忆至少能回忆出5个字，最多回忆9个，即7±2个。
  因此展示的文案要控制在9个字以内，超过后用户容易遗忘、出现记忆偏差。
  如果表达起来困难，可以辅助一小段文字进行解释或补充。
  因此在最终文案的确定上，要突出重点，多余的文字尽可能地进行删减。
  如果文案删减后字数还是过多，因考虑对文字进行分层，通过空格或逗号或换行的方式进行视觉优化。
  精准贴切的文案也十分重要，将专业的术语转换成用户听得懂的语言。
  尤其对于通过照片来表现主题的引导页设计，文案与照片的吻合度，直接影响到情感传达的效果。

• 视觉聚焦在单个引导页中，信息不宜过多，只阐述一个目的，所有元素都围绕这个目的进行展开。
  视觉聚焦包括两部分，一是文案的处理，要注意层次，主标题与副标题要形成对比；二是引导页中的界面、场景、文案具象化元素，要有一个视觉聚焦点，多个视觉元素的排布采用中心扩散的方式，聚焦点的视觉面积最大，同时与扩散的元素拉开对比。
  这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。
  同时结合视线流动的规律，从上到下，从左到右，从大到小。
  因此可以根据这个视线流的规律来进行引导页的设计。
  如下图为天猫客户端的引导页，分析其视觉流发现，浏览的顺序从插图到主文案，再到辅助文案，缺点在首次看到的是插图而不是文案，插图相对文字理解相对困难，因此未能快速地获取该页的主要信息，可以考虑将文案与插图的位置进行互换，这样会好一些。

• 富于情感化文案具象化通过具体的元素、场景来表现文案，采用写实、半写实的方式进行表现，有些应用还会配以水彩风格。
  以天猫为例，天猫是一款购物应用，在设计上通过商场、店铺的实际场景的具体描绘，渲染轻松、欢快的购物过程。

• 页面动效、页面间交互方式的差异化之前对于表现方式的归类已经讲到了动画及页面切换方式，如果增加了页面动效，利用动效，包括放大、缩小、平移、滚动、弹跳，表现形式更加多样化，会让引导页更有趣，注意力更为集中。
  而页面间的切换方式除了传统的卡片左右滑动的方式外，可以结合线条、箭头等进行引导，通常会配合动效。
  例如网易新闻客户端、印象笔记·食记，它们在引导页的设计上采用了线条作为主线贯穿整个引导页面，小圆点显示当前的浏览进度，滑动的过程中有滚动视差的效果。

• 与产品、公司基调相一致引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致，这样在用户还未使用具体产品前就给产品定下一个对应的基调。
  产品的特性决定了引导页的风格，产品是消费类、娱乐类、工具类还是其他，根据不同的产品特性决定了引导页是走轻松娱乐、小清新，还是规整、趣味性的风格，在最终的表现形式上也就会有完全不同的展现，是插图、界面、动画还是其他。
  如淘宝的娱乐、豆瓣的清新文艺、百度的工具、蝉游记的休闲等等，通过对比就能发现他们在引导页设计上的差异。
  这样一方面有利于产品一脉相承，与产品使用体验相一致；另一方面也会进一步强化公司形象。
  以来往为例，来往是一款针对个人用户的及时通讯应用，主打扎堆、阅后即焚、敲门等与微信不一样有趣的功能，也是想给用户创造不一样的IM沟通方式。
  因此在引导页的设计上通过趣味性、甚至有点搞怪的动作与表情来表现来往是这样一款有趣、欢乐多的产品。
  又如网易彩票，引导页的主色选用了与网易自身的红色相一致的红色，在公司产品系统性上保持高度的一致性。

• 总结想做好引导页的设计，在理解用户对引导页需求的基础上，怀揣热爱产品的情怀，依靠精致的布局，巧妙的构思，贴切的氛围渲染，再加一点点特色。
  当然光讲是枯燥的，还是需要设计师在具体的设计中不断实践，总结出新的观点与方法，探索出别具一格的引导页设计。

三、如何做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界面设计作品必然是要经过不断升级、重复迭代的。

四、怎么在引导里添加OS 怎么在引导里添加OS＜br

答：是这样的新建一个图层用钢笔画出你要用的引导线右键点你画引导线的那个图层转换为引导层拖拉这个引导图层到你需要引导的图层上面刚刚上面就好不要太高要不就把引导层放在图层上面了