有人说 ， 世界是一本书 ， 不愿远行的人只能读到其中的一页 。的确 ， 旅行是我们生命中最有意义的几件事之一 ， 其间我们有机会看见新的风景 ， 遭遇新的事情 ， 结实新的朋友 ， 获得珍贵的人生经历 。更重要的是 ， 一次愉悦的旅行能够为生活注入能量 ， 获得非同凡响的灵感 。今天 ， 旅行比起过去更加方便 ， 其中网络也扮演了极其重要的角色 。互联网将不同国家和地区的各种信息散步在整个网络的每一个角落 ， 当你准备出行的时候 ， 只需要稍加搜集就能制定出一个不错的旅行方案 。
和许多设计师一样 ， 来自 Tubik Studio 的设计师 Tania Bashkatova 也热衷于穿梭于不同的城市 ， 体验不同的风情 ， 享受不一样的生活 。也正是因此 ， 她对于如何将城市的风情和自然的体验结合起来呈现给用户 ， 有自己独到的想法 。而这也促成了今天咱们要聊的“城市指南”(Big City Guide)网站这一概念设计案例研究 。
任务
【设计实战！城市指南网站着陆页是这样设计出来的】
设计“城市指南”的着陆页 ， 包含其中主要的UI界面 ， 确保新用户引导流程中的整个用户体验足够优秀 ， 引导用户了解它的基本功能 。
设计过程
“城市指南”(BCG)是Tubik Studio 的 UI星期五活动中的首个项目 ， 想必在Dribbble 上关注了Tubik Studio 的朋友们都知道我们的这一传统活动 。设计是在 UI 星期五 活动中将会有一整天的时间来创建一个特定的概念设计项目 ， 这个项目会有特定的要求 ， 同时设计师也可以自由地将自己的想法和激情融入其中 。
而这次的活动当中 ， 概念设计项目所包含的任务 ， 是让设计师整合资源设计出一套着陆页 ， 为用户提供全世界各地的主要城市的信息 。在着陆页设计中 ， 设计师通常能够更好地将背景图片的信息呈现能力凸显出来 。而Tania 打算为每个城市挑选一张足以传达情绪和氛围的照片 ， 并围绕它来做整个视觉设计 。所以 ， 最终她选取的解决方案是在着陆页展示3个城市 ， 以横向滚动轮播图的形式展现 ， 并挑选一套动效来强化展示效果和体验 。Tania 选取了三个著名的国家首都 ， 而接下来她要考虑的是如何将这三个风格不同的城市统一到一套视觉设计中来 。
城市指南所展示的第一个城市是柏林 。这个城市有许多值得一看的景点 ， 这也使得图片的挑选工作量更大了 。为了呈现出对的感觉 ， Tania 最后挑了两张图片作为备选 。
虽然这两张图片都有这不错的表现力 ， 但是后者能够更好地表现柏林这个城市的坚实感和未来感 ， Tania 也更加青睐这张图片 。城市的名称位于整个排版设计的中心处 ， 风格大胆有力 ， 可读性良好 。柏林的名字和巨塔尖锐的顶端相互接驳 ， 而文字和塔尖相互遮盖的关系 ， 让他们看起来仿佛客观存在于塔尖之上 ， 呈现出一种独特的真实感 。
第二个城市选择了马德里 。作为西班牙首都 ， 马德里延续自中世纪的建筑群是它最有特色的部分之一 。但是这并不正确 。马德里是现代欧洲的商业中心之一 ， 所以Tania 决定将它现代化的一面呈现出来 。
推荐阅读
- 想提示用户有错误？不会这五个设计方法怎么行
- 转化率低是设计师的问题？这锅我们不背！
- 4种障碍设计方法，改善产品用户体验
- 细说设计“十大可用性原则”
- 产品必修课：网页设计的目的有哪些？
- 如何判断你的网站是否应该重新设计?
- 设计实战：视觉设计如何继承品牌基因
- 图形为主和信息密集型网站首页的设计方法
- 网站界面设计的研究方向与意义
- 网页设计 网页设计六条配色原则