IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

7个技巧,帮你搞定网页首图设计

Catherine • 2017-06-06 06:28 • 交互设计

首屏设计的7个技巧,它们并不复杂,却能帮你的首图设计更上一层楼。

文章目录[隐藏]

  • 1、使用惊艳的图片
  • 2、强化导航元素的运用
  • 3、清晰的信息传达方式
  • 4、试试超大字体元素
  • 5、遵循基本的阅读模式
  • 6、引入可点击的元素
  • 7、简单的图层设计
  • 结语

首屏设计的7个技巧,它们并不复杂,却能帮你的首图设计更上一层楼。

7个技巧,帮你搞定网页首图设计

网页首屏的重要性是不言而喻的,用户打开网页的第一眼看到的就是首屏中的信息,它是网页的门面,颜值担当,也是给予用户第一印象的核心部分,也是品牌形象呈现的窗口。

值得一提的是,网页首页的首屏当然是要好好设计的,而其他页面的首屏也不能忽略。毕竟相当一部分的用户并不是从首页入口进入你的网页的。

今天分享一下首屏设计的7个技巧,它们并不复杂,却能帮你的首图设计更上一层楼。

1、使用惊艳的图片

7个技巧,帮你搞定网页首图设计

相当一部分的网页首屏是使用图片作为视觉传达的主体,而无论是选择图片、视频、动画还是其他的视觉化的元素,每个Banner或者说带有标题的内容区块最好是带有漂亮、惊艳的视觉化元素作为支撑。当然,最常用的还是图片。

首图在首屏中的重要性无疑是巨大的,它不仅要漂亮,还要同网站内容深入地结合搭配起来。所以,它的设计还可以更加深入一些。

单独的图片表现力是有限的,通过排版设计,将它同其他的元素结合起来使用会有不错的效果:

  • 文字与标题
  • LOGO 和品牌标识
  • 按钮和行为召唤语句
  • 导航元素
  • 搜索框

在进行排版设计的时候,应该注意几点:锐利搞分辨率的图片和标题文本之间应该保持良好的对比度;人们希望看到脸和表情,这会更容易传递情绪和感情;注意引导用户和网站首屏进行互动。

2、强化导航元素的运用

7个技巧,帮你搞定网页首图设计

在首屏当中,元素与元素之间是相互配合构成整体设计的,而导航是首屏当中无法忽略的一个重要组成部分,无论你喜欢的是完整展开的导航,还是为了干净的布局而将导航隐藏在汉堡菜单中,导航的设计应该和首屏的整体设计合而唯一的。

导航的目的是将用户引导到他们想去的不同页面,所以,推荐使用置顶悬浮式导航,这样用户不论浏览到页面哪个地方都能够轻松跳转。

导航元素在首屏当中,和其他的元素组合使用的时候,它们会和其他的元素构成对比,还能形成层次感,而这种层次感的构建和整个设计方案息息相关,应该根据具体情况具体安排。

3、清晰的信息传达方式

7个技巧,帮你搞定网页首图设计

视觉传达是一项系统工程,单靠一张图片是不够的。所以,你需要系统的考虑整个首屏的信息传达:

  • 首屏是否告诉了用户可以做什么,或者用户能从中获得什么内容?
  • 首屏是否向用户传达了唯一的、清晰的、易于理解的信息?
  • 首屏是否为用户提供了直观可交互的控件(按钮、输入框、跳转链接等)?
  • 用户能否从首屏跳转到下一个页面/步骤?

这些问题能够帮你梳理出整个首屏的细节设计思路。

4、试试超大字体元素

7个技巧,帮你搞定网页首图设计

想要让首屏更加醒目,超大的字体总是最有效的办法。即使文字内容很简单,当用户打开首屏的时候也会一眼就注意到它们,在阅读其他内容之前,只会注意这些内容。

尽管字体和排版千变万化,但是在字体的选取和首屏设计上尽量遵循下面的的两个规则来进行:

  • 首页首屏上的展示性的内容采用更加引人注意的字体,和其他地方截然不同
  • 其他页面的正文和主要文本部分,选用统一的、简约耐看的字体,甚至整体排版框架也保持一致

5、遵循基本的阅读模式

7个技巧,帮你搞定网页首图设计

用户研究领域的先驱 Nielsen Norman Group 曾经针对这一用户行为进行了深入的研究,为设计师和可用性设计专家们提供了更好的素材和设计依据。

简而言之,当人们访问某个网站的时候,尤其是初次访问网站的时候,他们通常不会特别仔细的查看所有的内容,而是快速的扫视,找到能够吸引他们注意力的信息,这些内容就是他们继续停留在这个网站上的理由。通过眼动测试和不同实验,他们发现访问者的视觉浏览模式,可以归结为几种典型的模式。设计师 Steven Bradley 在自己的文章中,总结了这三种常见的模式:古腾堡式,Z图模式和F图模式。

古腾堡式:对于信息结构层次并不那么分明的网页,用户常常会使用古腾堡式的浏览模式,用户大范围扫视页面内容,整个视线路径是一个大号的Z,其中最开始的两个视觉驻留点就在页头上。

Z图模式也不难理解,用户从上到下,视线沿着Z字形来回扫视,用户会左右快速扫视,视线的起点首先是左上角,行跨顶部一栏到右上角,然后向下延伸。

F图模式,或者说是F式布局,我们就更加熟悉了。在Nielsen Norman Group 的研究当中,这种阅读模式最为典型:

  • 用户先会沿着水平方向浏览,优先浏览内容块的上部,这个时候的眼动构成了字母F 最上面一横。
  • 接下来视线会沿着屏幕左侧向下垂直扫视,寻找段落中能引起兴趣点的内容,当他们发现引起他们兴趣的内容之时,继续横向仔细浏览,而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些,而这个视线轨迹则构成了字母F 中间的一横。
  • 接下来用户会将视线移到屏幕左侧,继续向下浏览。

所以,将最关键的元素置于用户的浏览路径上,让用户可以更轻松地消化信息,也能最高效地执行交互。

6、引入可点击的元素

7个技巧,帮你搞定网页首图设计

你的网站首屏能够吸引用户去操作么?它是否包含有可点击的元素?

想要引导用户,首屏几乎是完美的存在。在这里,你可以使用行为召唤按钮来引导用户点击跳转到特定的地方,可以用来吸引用户邮件订阅,但是无论如何,尽量让整个首屏集中执行特定的任务,而不要因为过多的可操作选项让用户分心。

不知道想要在首屏当中包含哪些元素?选择你最希望用户执行的操作,所有的元素都围绕着它来设计。

7、简单的图层设计

7个技巧,帮你搞定网页首图设计

想要将上面提及的技巧都融会贯通、呈现在你的网页首图当中?那么你需要让所有的元素高效、合理地整合在一起,用简单的几个分层,将它们收纳到一起。

分层对象能够帮你搞定这个问题。在确定需要呈现哪些元素以及各个部分的功能之后,将不同功能的元素用不同的分层来承载。分层尽量简单,这样不仅更加易于控制,也是让设计更加专注于核心的视觉和功能。

多尝试几次,找到真正高效的搭配,让用户打开首屏的时候真正被惊艳到。

结语

首屏的设计往往处于整个设计流程当中靠前的位置,随后在设计其他子页面的时候,设计师难免会松懈。其实,这些子页面和首屏是同样重要的,两者要协调统一,才能让用户打开网页的时候始终保持一致的体验。

 

原文作者:Carrie Cousins

原文地址:designshack

译者:@陈子木

译文地址:优设网

本文由 @陈子木 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/33784/

ARBannerF式布局logoPStipsUIUXWEB交互产品产品经理体验分享动画可用性品牌品牌形象字体导航引导总结技巧按钮排版排版设计控件搜索框用户用户引导用户研究用户行为素材细节细节设计网站网页首图网页首屏视觉设计设计师设计思路设计方案设计流程译文转载邮件链接首屏设计
赞 (0)
CatherineCatherine
0
生成海报
接下来炎热的8月,这3个设计趋势会更加流行
上一篇 2017-06-05 22:20
设计实战|城市指南网站着陆页是这样设计出来的
下一篇 2017-06-06 18:39

相关推荐

  • 短期记忆与用户体验:为脑力的局限而设计 交互设计

    短期记忆与用户体验:为脑力的局限而设计

    人类大脑不适于抽象思考和记忆数据,但网站常常要求我们这么做。许多可用性指南都取决于认知局限。

    2017-04-27
  • 微信热点

    【每周开眼】这一周你应该看到的交互设计圈最棒的设计作品

    Duang Duang Duang!【五一免费体验营】“五一”3天假 出去玩? 还是提升专业能力? 来新易,将两者结合!小长假结束了!考研党又纷纷开始了图书馆的占座活动又开始了肖秀荣英语I英语II工业设计史世界现代设计史画手绘呀,搞透视,搞线条,搞设计辛苦了一天就这么结束了哦不是该来一波优秀的设计作品洗洗眼睛了小新给大家准备了晚间夜宵【洗眼睛必备】交互圈国内外大神的优秀作品从中我们不但审美可以得到提升最重要的我们可以学到很多设计的创意方...

    2018-04-08
  • 微信热点

    【软件安装】Axure RP 7.0软件图文安装教程

    1、会员覆盖工作、学习、生活娱乐,并不断更新更多有价值的精品软件2、安装中有任何问题请咨询小白资料网私人微信:xbzw88888888【特别推荐】加小白官方微信:xbzw88888888,就可免费领取:快速入门自学视频课程Axure RP 7.0软件图文安装教程软件介绍:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的...

    2018-03-13
  • 三八XX节专题页设计该怎么玩?看这篇就够了! 交互设计

    三八XX节专题页设计该怎么玩?看这篇就够了!

    在本文中,作者将带大家看下,那些围绕着妇女节的专题页面可以怎么玩?一起来look~look~

    2017-05-07
  • 实例分析:从搜索结果看地图搜索的交互设计 交互设计

    实例分析:从搜索结果看地图搜索的交互设计

    每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

    2017-05-11
  • CHI2017 交互设计在较热门的研究领域如何继续创新? 交互设计

    CHI2017 交互设计在较热门的研究领域如何继续创新?

    什么是CHI? 今天跟大家分享一个学术会议SIG CHI,全称Special Interest Group on Computer-Human Interaction,顾名思义,这是研究人与计算机互动的一个学术会议。但希望大家别被「学术」两个字吓到,因为这个会议…

    2017-05-31
  • 设计原则中的5种信息组织方式 交互设计

    设计原则中的5种信息组织方式

    要以用户能够轻松使用和理解的方式组织信息。用数据来回答用户的疑问。以更贴合用户目标的方式来呈现信息,就能创造出更好用的产品。“信息或许是无限的,但是……组织信息的方式是有限的,因为它们只能通过LATCH原则来组织:位置(Location)、字母表(Alphabet)、时间(Time)、分类(Category)、层次(Hierarchy)。”——Wurman, 1996“我做了太多次尝试,试图用某种其他方式来组织信息,但最终都会回归这5种之一。”——Wurman, 1996比如说,设计一套特别的服务时,我们应该考虑不同物品的位置关系,它们如何分布。超市货架的设计就是很好的例子,在物理空间中组织信息。比如字典和通讯录,无论是虚拟的还是物理的。举例:日历和会议日程、邮箱收件箱、项目计划、有趣的Facebook时间线、电商平台的订单列表、消息应用,还有许多。这种信息组织方式充斥着真实世界和虚拟世界。从购物与工业,到Pinterest上的分类和Twitter的标签。例如:从小到大,从低到高,从开心到不开心等等。给服务和产品标星打分、计分表、能效等级、尺寸等等。

    2017-08-04
  • 交互译文—清晰度,可读性和可理解性:让用户阅读你的文章 交互设计

    交互译文—清晰度,可读性和可理解性:让用户阅读你的文章

    所谓成本是指:阅读你的文字所带来的长时间、理解内容带来的困惑、混乱的排版所带来的负面情绪等。
    所谓收益是指:阅读你的文字能让我获得的信息内容和质量,以及获得的积极情绪。

    2017-05-31
  • 为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法 交互设计

    为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

    你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结出一套优化方法来分享给大家,相互启发。

    2017-05-09
  • 微信热点

    用通俗的方式告诉你什么是「交互设计」

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-11
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress