纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页photoshop教程图片处理

怎样设计出受欢迎的网站引导页? 网页设计技巧教程学习

网页制作   2021-06-28 我要评论

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?编者按:迎客入门该大方热情还是谦卑有序?是张灯结彩还是朴素平常?对于引导页来说这都得看产品的调性今天分享一篇好文针对不同类型的软件提出切实可行的具体建议是引导页设计不可多得的好教程赶紧来学习吧!

当你第一次打开一款应用的时候常常会看到精美的引导页设计它们在你未使用产品之前提前告知你产品的主要功能与特点第一次印象的好坏会极大地影响到后续的产品使用体验因此各个公司都在努力将这几个页面设计好从一开始就引人入胜那接下来我跟大家一起来探讨关于引导页的设计

一、 目的区分

根据引导页的目的、出发点不同可以将其分为功能介绍类、使用说明类、推广类、问题解决类一般引导页不会超过5页

1. 功能介绍类

功能介绍类引导页主要是对产品的主要功能进行展示让用户对产品主功能有一个大致的了解采用的形式大多以文字配合界面、插图的方式来展现

以易信为例采用文字与水彩插图结合的方式文字分为2个层次大标题与小标题大标题是对主功能的概括小文字是对其功能模块的详细描述或进一步补充说明

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

2. 使用说明类

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

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

3. 推广类

推广类引导页除了有一些产品功能的介绍外更多是想传达产品的态度让用户更明白这个产品的情怀并考虑与整个产品风格、公司形象相一致这一类的引导页如果做的不够吸引人用户只会不耐烦地想快速划过而制作精良、有趣的引导页用户会驻足观赏

以淘宝旅行为例淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用在你出行前就帮你计划好所有的行程安排只要一个行李箱说走就走与产品的理念相契合而另外一款应用选用恬静、安逸的照片配以简洁的文字来渲染产品的基调

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

4. 问题解决类

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

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

二、表现方式

1. 文字与界面组合

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

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

2. 文字与插图组合

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

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

3. 动态效果与音乐

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

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

4. 视频展示

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

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

三、 总结

以上已经针对引导页的目的差异以及表现方式进行了相关归类在具体的设计中还得注意一些原则它们会让你的设计更加吸引人信息传达的效果更好

1. 文案言简意赅突出核心

根据爱尔兰哲学家汉密尔顿观察发现的7±2效应一个人的短时记忆至少能回忆出5个字最多回忆9个即7±2个因此展示的文案要控制在9个字以内超过后用户容易遗忘、出现记忆偏差如果表达起来困难可以辅助一小段文字进行解释或补充因此在最终文案的确定上要突出重点多余的文字尽可能地进行删减如果文案删减后字数还是过多因考虑对文字进行分层通过空格或逗号或换行的方式进行视觉优化

精准贴切的文案也十分重要将专业的术语转换成用户听得懂的语言尤其对于通过照片来表现主题的引导页设计文案与照片的吻合度直接影响到情感传达的效果

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

2. 视觉聚焦

在单个引导页中信息不宜过多只阐述一个目的所有元素都围绕这个目的进行展开

视觉聚焦包括两部分一是文案的处理要注意层次主标题与副标题要形成对比;二是引导页中的界面、场景、文案具象化元素要有一个视觉聚焦点多个视觉元素的排布采用中心扩散的方式聚焦点的视觉面积最大同时与扩散的元素拉开对比这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素同时结合视线流动的规律从上到下从左到右从大到小因此可以根据这个视线流的规律来进行引导页的设计

如下图为天猫客户端的引导页分析其视觉流发现浏览的顺序从插图到主文案再到辅助文案缺点在首次看到的是插图而不是文案插图相对文字理解相对困难因此未能快速地获取该页的主要信息可以考虑将文案与插图的位置进行互换这样会好一些

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

3. 富于情感化

A. 文案具象化

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

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

B. 页面动效、页面间交互方式的差异化

之前对于表现方式的归类已经讲到了动画及页面切换方式如果增加了页面动效利用动效包括放大、缩小、平移、滚动、弹跳表现形式更加多样化会让引导页更有趣注意力更为集中

而页面间的切换方式除了传统的卡片左右滑动的方式外可以结合线条、箭头等进行引导通常会配合动效例如网易新闻客户端、印象笔记·食记它们在引导页的设计上采用了线条作为主线贯穿整个引导页面小圆点显示当前的浏览进度滑动的过程中有滚动视差的效果

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

4. 与产品、公司基调相一致

引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致这样在用户还未使用具体产品前就给产品定下一个对应的基调产品的特性决定了引导页的风格产品是消费类、娱乐类、工具类还是其他根据不同的产品特性决定了引导页是走轻松娱乐、小清新还是规整、趣味性的风格在最终的表现形式上也就会有完全不同的展现是插图、界面、动画还是其他如淘宝的娱乐、豆瓣的清新文艺、百度的工具、蝉游记的休闲等等通过对比就能发现他们在引导页设计上的差异

这样一方面有利于产品一脉相承与产品使用体验相一致;另一方面也会进一步强化公司形象

以来往为例来往是一款针对个人用户的及时通讯应用主打扎堆、阅后即焚、敲门等与微信不一样有趣的功能也是想给用户创造不一样的IM沟通方式因此在引导页的设计上通过趣味性、甚至有点搞怪的动作与表情来表现来往是这样一款有趣、欢乐多的产品

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

又如网易彩票引导页的主色选用了与网易自身的红色相一致的红色在公司产品系统性上保持高度的一致性

网页设计技巧教程学习:如何设计出受欢迎的网站引导页?

总结

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


相关文章

猜您喜欢

  • 白发魔女图片 教你利用PS简单打造出白发魔女的形象照片

    教你利用PS简单打造出白发魔女的形象照片白发魔女图片PS染发教程本教程介绍怎样把人物的头发染白思路:多次用反相等操作把黑色部分全部变白然后擦掉不要的部分只保留白色头发再简单调色和柔化处理即可打造漂亮的新白发魔女 最终效果 原图..
  • 学习用Lightroom软件给夜景少女人像照片制作出电影胶片效果

    学习用Lightroom软件给夜景少女人像照片制作出电影胶片效果效果1: 效果2: 一、环境及设备 照片都是在19点到20点之间拍摄的光线环境恶劣没有辅助光源仅仅依靠仙女棒和远处的路灯所以拍出来的原片有点糟糕 通过分析我们发现照片偏黄脸部过..

网友评论

Copyright 2020 www.gamerfx.net 【游戏天空】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式