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

设计实战|城市指南网站着陆页是这样设计出来的

Catherine • 2017-06-06 18:39 • 交互设计

今天咱们要聊的是“城市指南”(Big City Guide)网站这一概念设计案例研究。

文章目录[隐藏]

  • 任务
  • 设计过程

今天咱们要聊的是“城市指南”(Big City Guide)网站这一概念设计案例研究。

设计实战|城市指南网站着陆页是这样设计出来的

有人说,世界是一本书,不愿远行的人只能读到其中的一页。的确,旅行是我们生命中最有意义的几件事之一,其间我们有机会看见新的风景,遭遇新的事情,结实新的朋友,获得珍贵的人生经历。更重要的是,一次愉悦的旅行能够为生活注入能量,获得非同凡响的灵感。今天,旅行比起过去更加方便,其中网络也扮演了极其重要的角色。互联网将不同国家和地区的各种信息散步在整个网络的每一个角落,当你准备出行的时候,只需要稍加搜集就能制定出一个不错的旅行方案。

设计实战|城市指南网站着陆页是这样设计出来的

和许多设计师一样,来自 Tubik Studio 的设计师 Tania Bashkatova 也热衷于穿梭于不同的城市,体验不同的风情,享受不一样的生活。也正是因此,她对于如何将城市的风情和自然的体验结合起来呈现给用户,有自己独到的想法。而这也促成了今天咱们要聊的“城市指南”(Big City Guide)网站这一概念设计案例研究。

设计实战|城市指南网站着陆页是这样设计出来的

任务

设计“城市指南”的着陆页,包含其中主要的UI界面,确保新用户引导流程中的整个用户体验足够优秀,引导用户了解它的基本功能。

设计过程

“城市指南”(BCG)是Tubik Studio 的 UI星期五活动中的首个项目,想必在Dribbble 上关注了Tubik Studio 的朋友们都知道我们的这一传统活动。设计是在 UI 星期五 活动中将会有一整天的时间来创建一个特定的概念设计项目,这个项目会有特定的要求,同时设计师也可以自由地将自己的想法和激情融入其中。

而这次的活动当中,概念设计项目所包含的任务,是让设计师整合资源设计出一套着陆页,为用户提供全世界各地的主要城市的信息。在着陆页设计中,设计师通常能够更好地将背景图片的信息呈现能力凸显出来。而Tania 打算为每个城市挑选一张足以传达情绪和氛围的照片,并围绕它来做整个视觉设计。所以,最终她选取的解决方案是在着陆页展示3个城市,以横向滚动轮播图的形式展现,并挑选一套动效来强化展示效果和体验。Tania 选取了三个著名的国家首都,而接下来她要考虑的是如何将这三个风格不同的城市统一到一套视觉设计中来。

城市指南所展示的第一个城市是柏林。这个城市有许多值得一看的景点,这也使得图片的挑选工作量更大了。为了呈现出对的感觉,Tania 最后挑了两张图片作为备选。

设计实战|城市指南网站着陆页是这样设计出来的 

设计实战|城市指南网站着陆页是这样设计出来的

虽然这两张图片都有这不错的表现力,但是后者能够更好地表现柏林这个城市的坚实感和未来感,Tania 也更加青睐这张图片。城市的名称位于整个排版设计的中心处,风格大胆有力,可读性良好。柏林的名字和巨塔尖锐的顶端相互接驳,而文字和塔尖相互遮盖的关系,让他们看起来仿佛客观存在于塔尖之上,呈现出一种独特的真实感。

第二个城市选择了马德里。作为西班牙首都,马德里延续自中世纪的建筑群是它最有特色的部分之一。但是这并不正确。马德里是现代欧洲的商业中心之一,所以Tania 决定将它现代化的一面呈现出来。

设计实战|城市指南网站着陆页是这样设计出来的 

设计实战|城市指南网站着陆页是这样设计出来的

不过,将现代风格优先纳入到考虑范围内,是出于整体设计一致性的考量,在排版设计上,也延续了柏林页面的设计,城市的名字和图片中的建筑再次融为一体。副标题的文案同样进行了精心的设计,呈现出这个城市活力四射的特征。而这个仿佛漩涡的回廊成为了最终的选择。

不过在这个地方,设计师犯了一个有趣的错误。西班牙首府名为马德里没错,但是美国的爱荷华州也有个马德里,而这张旋转走廊的图其实是来自美国而非西班牙,如果没有去过那个地方,单靠互联网有时候确实很容易犯错。当然,总是有修改机会的。

最后一个城市,Tania 选择了斯德哥尔摩。这同样是一个现代气息浓郁且拥有足够文化积淀的城市。斯德哥尔摩同样是一个个性十足的地方,个性十足的城市风景让Tania 挑花了眼,她尝试了许多不同的图片作为视觉设计的基础。

设计实战|城市指南网站着陆页是这样设计出来的 

设计实战|城市指南网站着陆页是这样设计出来的

然而,所有的城市照片都无法传达出斯德哥尔摩的独特之处,作为一个气质突出的北欧城市,斯德哥尔摩和大自然一直有着亲密的关系,而这也使得Tania 决定尝试探索斯德哥尔摩自然的一面。

这是斯德哥尔摩的页面最终的版本。页面的排布和之前的两个基本一致。壮美的北欧森林呈现出来了斯德哥尔摩的另外一个面孔。

整个着陆页的设计采用了用户易于识别的排版布局,和清晰的层次结构。整个页面的左上角是可点击的LOGO,点击它可以随时回到首页。导航菜单允许用户快速浏览完整的城市列表,查看博客,或者直接点开地图。除此之外,注册服务和搜索功能这些基本的功能也都是存在的。

整个城市指南最关键的部分,其实是这些城市的描述性的文案。由于页面的整体设计突出的是城市的气质和名称,所以城市的简介主要是依靠这些文案来呈现。而文本下面的CTA按钮则为用户提供了阅读更多内容的机会。此外,用户还能通过底部的社交网络按钮来关注网站的动态。

整个着陆页设计的最后一个阶段的工作是由动效设计师 Kirill Erokhin 来完成的。

设计实战|城市指南网站着陆页是这样设计出来的

这些静态的页面有着不同的背景颜色,而在最终的展示性动画当中,页面底部背景挑选了一种于不同页面都能相合的深蓝色。动效的加入,让整个着陆页的设计充满了互动感,而交互上设计师提供了多种不同的可能性:顶部的基督徒和底部的按钮,为了让用户注意到它们,设计师给这些组件赋予了和整个网页色调对比强烈的红色。

正如同我们所看到的,尽管所有的城市的风格不同,但是设计师尽量让他们的页面在设计上统一起来。这种和而不同的设计让页面的个性保存了下来,又拥有了拓展的可能性。整个着陆页灵活的构造,让它可以根据实际需求而进行快速的调整,功能的完整性则保证了它的实用性。

 

原文作者:Tubik Studio

原文地址:uxplanet

译者:@陈子木

译文地址:优设网

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

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

ARgifGUIlogoPSUIUI界面UX互联网交互产品产品经理体验动态动效动效设计动画可读性导航工作引导引导流程指南按钮排版排版设计搜索功能文案新用户新用户引导服务未来案例概念设计灵感用户用户体验用户引导界面着陆页着陆页设计网站视觉视觉设计设计设计师设计案例设计经验译文资源转载轮播图
赞 (0)
CatherineCatherine
0
生成海报
7个技巧,帮你搞定网页首图设计
上一篇 2017-06-06 06:28
一个小小城市选择控件引发的深度思考
下一篇 2017-06-07 11:50

相关推荐

  • 微信热点

    《用户体验可视化指南》视频讲书(6)

    《用户体验可视化指南》书中第2章的第2部分从伦敦地铁地图,看体验地图的元素、范围和根据目标的取舍。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享从这里开始讲绘制共线图前的5个思考点:视角、范围、焦点、结构和用途。蓉姐在这节视频中主要讲解了视角和范围这2点。1、视角有2个决定因素,目标用户和想要绘制的体验类型。a. 每类目标用户,在产品互动的关键触点上,应该是有明显差异的。哪些企业的主目标用户,哪些是次级...

    2018-04-10
  • 微信热点

    超好看APP交互设计~

    设计APP,不是简单的把界面绘制好,漂亮的色彩搭配、可爱、卡通或者扁平化的图标设计等等。如今的移动APP界面设计,更要追求有趣与实用的完美结合。今天,小编分享来自印度的设计师Joney vino的超好看APP交互设计作品。第一款是APP交互设计是关于免费试驾APP的选车界面与整个选车的流程。整个过程就是把选车类型、日期、人数等功能元素在流畅的界面转换场景当中完成。追求一气呵成。很不错的免费试驾体验。第二个APP交互设计当中的有趣、创意与...

    2018-03-03
  • 交互设计

    如何成功运用扁平化设计与色彩趋势

    经验分类: 经验/观点 / 自译外文 原作者: Carrie Cousins  翻译:蒋灿 我们在Designmodo上已经聊了很多有关扁平化设计趋势的内容。 之前瞎说了很多,也给大家展示了大量不错的示例,还开发了一套免费的用户界面以…

    2014-09-14
  • 微信热点

    用户体验才是核心竞争力 英雄互娱《一起来冒险》趣味至上

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)近几年来,随着手游用户增长速度趋于平稳,手游数量的增多,人口红利的优势已经消失殆尽,如何曝光率成为困扰所有开发商的共同难题。在买量成本水涨船高的情况下,靠忠实玩家形成的用户口碑形成病毒传播则成了很多游戏的“制胜法宝”。经过了几年的发展之后,玩家们越来越懂游戏,千篇一律的复刻已经无法提起人们的兴趣,人们有了自己对于游戏的追求,这也是市场上越来越多细分品类游戏成功的主要原因,比如《纪念碑...

    2018-01-30
  • 交互设计

    交互设计的5个常见错误

    交互设计从来都不容易。它包括了用户行为的深度分析,和一丝不苟的规划。随着新技术和交互设计模式的出现,事情并不会变容易。 艳丽的图片、顺畅的鼠标悬停效果和意外的动画,不再那么容易引起用户注意了。但难题却…

    2015-11-09
  • 值得你深入了解的交互设计五大支柱 交互设计

    值得你深入了解的交互设计五大支柱

    1、用户角色(Persona):Persona文档(控制在2~5个)通常需要包含你的目标用户。作为Persona中的虚构的角色,它的属性和特征是 基于产品研究和用户定位来设定的,用作后续设计过程中所面对的“理想用户”,本质上,它就是一个占位符。作为人物设定,其中会包含个人信息,远不止于年龄 和收入信息这么简单。Persona 文档的目标是利用角色来验证你的目标用户是如何感受如何看待你的设计的。
    2、移情地图(Empathy Map):它像是一个轻量级的Persona文档,在资源短缺时间紧的状况下,可以使用这个文档。Empathy Map 将 Persona 中的角色的个性和性格部分移除了,更加专注于用户在特定情况下的感受。
    3、用户剧本(User Scenario):如果Persona 是帮你设计了一个故事中的角色,那么User Scenario 就是故事的剧本。用户剧本通常是围绕着一个特定目标来设计的。比如说,第二天是母亲节,要为母亲预订一份礼物。目标很明确,要达成目标,用户需要点击几次 按钮,走哪些流程,需要多长时间,如何在过程中融入情感,贯穿始终。对整个用户流程有了预判之后,设计师对于UI和UX的设计就有了把握。
    4、用户地图(Customer Journey Map):这份文档同上门的用户剧本很像,但是它比起前者跨度更大,贯穿体验设计始终。设计人员可以对产品的背景有更深入的了解才能更好地设计,而产品投 入使用之后也不是最终结束,这也是跨度如此之大的原因所在。用户旅图将会涵盖角色信息、用户剧本和移情地图的全部信息。这么设定并不是要让用户旅图成为一 个大杂烩,而是要将用户性格和用户流程、交互过程结合到一起来看待问题,每个阶段不同环节,都牵涉到不同的情绪和情感。Affordance 是 James J. Gibson 造出来的一个词,Gibson 是20世纪最重要的认知心理学家之一,他的生态学式视知觉论和直接知觉为认知心理学开辟了新的领地。affordance 是 afford (提供、给予、承担)的名词形式,环境的 affordance 是指这个环境可提供给动物的属性,无论是好的还是坏的,所以我认为“可供性”是一个合适的翻译。Gibson 用来解释 affordance 的例子是这样的:如果一块地表面接近水平(而不是倾斜的),接近平整的(而不是凸起或凹陷的),以及充分延伸的(与动物的尺寸相关),如果地表面的物质是 坚硬的(与动物的重量相关),我们可称它为基底、场地或地面,它是可以站上去的(stan-on-able),可让四足或两足动物保持竖直姿势,它是可以 行走(walk-on-able)和跑动(run-over-able)的,它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的(sink- into-able)。列出的四项属性——水平、平整、延伸和坚硬——它们是这个表面的物理属性,如果以物理中使用的度量衡去衡量它们的话,但是对于特定 动物的支撑可供性,它们必须与动物关联上才可以被衡量,它们不是抽象的物理属性,它们是为所指动物特定的,与动物的姿势和行为相关,所以 affordance 不能像我们在物理中那样来衡量。能指和所指是语言学上的一对概念,能指意为语言文字的声音,形象;所指则是语言的意义本身。按照语言学家或者哲学家们的划分,人们试图通过语言表达出来的东西叫”所指”,而语言实际传达出来的东西叫”能指”。

    2017-06-04
  • 微信热点

    交互设计文档怎么写? | 设计基础

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。对于一个设计团队来说,统一的文档规范和设计规范,不仅能够减少合作方的学习成本,提升设计师和设计部门影响力。即使产品不同需求不同设计师不同...

    2018-02-09
  • IxD案例

    Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • 微信热点

    Axure实例:即刻 app 产品需求文档

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放不了了之冰淇 - 分手快乐作者:T.zh来源:简书以下我的Axure原型截图:目录:1.概述1.1产品介绍1.2需求整理2.版本信息2.1修订历史2.2版本规划3.产品逻辑3.1产品信息图3.2产品结构图3.3部分业务流程图4.产品设计4.1全局说明4.2部分功能需求说明4.3部分交互设计1. 概述1.1 产品介绍1.1.1 文档属性1.1.2 产品综述1.2 需求整理1.2.1...

    2018-03-08
  • 影响网页内容的七种设计误区 交互设计

    影响网页内容的七种设计误区

    如果你的设计当中出现了这些问题,请不要担心。它们的解决方案并不复杂,通常也不需要经过复杂的重设计来完善,只需要进行适当的调整即可。

    2017-05-03
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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