创意十足的web布局及交互设计

富有灵感和创意的设计与一般设计的区别在于,它不那么容易被想到和实现,一旦它被实现,一个非常有趣并且迷人的网站就诞生了。
网站几乎每天都能见到,但是不是每一个网站你都会说“真希望我也能想到过!”
设计者们正在做的是一项伟大的工作,那就是提出且合并各种高水平设计的网站,这些网站都是最新颖的原创作品,同时还保持了很高的可用性。不规则的颜色、形状,及其导航就可以生成最有趣、最吸引人的网站。当然,能想到这个点子是很难的,实现起来也有一定的困难。
但 是说不准哪天你做的东西能引起一个新的流行趋势,产生很大的点击率,或者以你无法想象的一种方式来“工作”。对于设计者和开发者而言,最重要的是要记住 web设计无论看起来多么牛,必须高效可用。通过在设计过程中结合创造性的思维和对关键特性的仔细分析,伟大的和最新的网站概念将会不断的涌现。
跳出固有思维模




第一个问题是“为什么?”
为什么我们在制作网站草图的时候总是画矩形框?
为什么“一直”是那几种特定的颜色或字体?
为什么所用的照片都是完美的4×6屏幕高宽比?
第二个问题是我们怎样做到不同?
越来越多的网站用兴趣和创造性的布局来回答上面第二个问题,从使用圆形到使用吸引人的照片和颜色,似乎没有起到显著的作用来创建新的导航和滚动方式。
怎样对待基本概念?
当形成打破常规的新概念时重要的是记住基本概念。无论一个网站看起来多么酷,它必须具有可读性和可用性,否则人们不会前往该网站并进行内容交互。
在设计的阶段,要记得不断思考你的用户和他们的想法及他们怎么使用网站。如果是高级用户的话,那么在导航和滚动特性上只要存在一点不方便使用的地方,都会使他们印象深刻。但是如果用户是计算机初学者,你就应该坚持普通的导航工具。
你的访问者为了一个原因来到你的网站。当他们到达该网站时这个原因需要加强。确保你的设计能提供给用户所需要的所有准确信息、娱乐、电子商务等等。
不要做的过多!意思是,针对一个有兴趣的方向一直做下去,但是不要尝试太多的东西。记住,如果有太多的东西出现在你的网站上,那么用户是不会停留住多久的。找到一个兴趣和唯一的方式来和他们互动。
五个站点聚集在一起
那么什么使他们聚集在一起?创造性、可读性和可用性。我们见过一些网站做的东西很新、超乎想象并且非常棒。


lowdi 在做一个伟大的工作,他们用常态之外的形状来创造视觉上的兴趣点。不仅每个盒子都有圆角(或反向圆角),被着色的框架类似于该公司正在出售的产品的形状。 即使你没有在屏幕上看到Lowdi的盒子,你已经记住了它。随着滚动,这个盒子(这是一个扬声器系统)使用一系列弹出的气泡与你“对话”。这种概念非常有 趣、新鲜并超级迷人。


Steve Vorass 利用“隐藏导航”展示了他的各种项目。投资组合类型的网站使用一种在屏幕顶端的简单的“工作、概要、联系”导航,同时图像也是导航工具。每张不同类型的图 像将带你到不同的项目。更重要的是,当你的鼠标悬停在图片上时,他们会提醒你点击后将带你到哪里。网站的整体设计有一种简单的外观和意想不到的像墙一样的 动画效果。


Caava Design 引人注目的地方在于图像选择和有趣的形状,但是更具有创意的是滚动。整个网站建立在时间轴上。每个图像“气泡”带你到另一个信息级别。使它特别的是你根本不需要看懂时间轴就能导航和明白这个网站。它是一个功能非常强大的组织。


Joint的网站向我们展示了标签本身就是一个具有创造性的设计业务。每个页面给你用来导航的可点击的选择。这个方案很简单,仅用灰色和白色(除了友情链接会包括彩色照片)但悬停效果和可读性是很奇妙的。它会让你想一直点击下去来看看到底这个网站是什么样子。


Ballantyne 使用很棒的图片组合、有趣的形状和非常酷的滚动效果让你着迷。时装零售商的网站上展示了一个很棒的产品选择页面,同时提供有趣的公司和产品信息。每个滚动 轴通过上下按钮移动三个图片面板来显示新图片。滚动效果在几个屏幕间持续,你会不由自主地想看看接下来会发生什么。另外,酷酷的斜边使滚动的效果变的更加 无缝和有趣。
创意十足的web布局及交互设计的更多相关文章
- Web交互设计优化的简易check list
Web交互设计优化的简易check list 00 | 时间: 2011-02-11 | 28,842 Views 交互设计, 用户研究 “优化已有产品的体验”,这是用户体验相关岗位职责中常见的描 ...
- 响应式web布局设计实战总结教程
响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...
- 第三阶段:3.Web端产品设计:4.产品设计-交互设计
交互设计主要做框架层以及结构层.包括交互关系,信息结构,界面布局,导航设计,信息内容. 导航关系非常重要. 这是框架层. 这是结构层. 要素就是信息内容.
- web设计经验<三>值得你深入了解的交互设计5大支柱
随着单页式设计和移动端的兴起,网页中的交互设计越来越重要了.为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解. 正如同我们在<交互设计最佳实践(卷1)>中所述,要做好交互设计 ...
- 【附案例】UI交互设计不会做?设计大神带你开启动效灵感之路
随着网络技术的创新发展,如今UI交互设计应用越来越广泛,显然已经成为设计的主流及流行的必然趋势.UI界面交互设计中的动效包括移动,滑块,悬停效果,GIF动画等.UI界面交互设计为何越来越受到青睐?它有 ...
- Hover States - 有趣的用户界面及交互设计
Hover States 一组新潮的和有趣的用户界面和交互设计的集合.Hover States 的目标是要成为设计师和开发人员灵感来源,向人们展示目前人们正在做的各种网站中令人惊奇的效果.他们认为交互 ...
- Origami – 用于 Quartz 的免费的交互设计框架
Origami 是一个为 Quartz Composer 开发的免费的工具包——由Facebook设计团队创建,让交互设计原型更加简单,不需要编程. 如今,大多数设计师通过创建静态原型来表达要实现的应 ...
- Unity3D与iOS的交互设计<ViewController 的跳转>
原地址:http://www.aichengxu.com/article/%CF%B5%CD%B3%D3%C5%BB%AF/28797_12.html Unity3D与iOS的交互设计<View ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
随机推荐
- .NET程序员走向高端必读书单汇总
.NET程序员走向高端必读书单汇总 一.知识树 1. 基本能力 1.1 数学 1.2 英语 1.3 语言表达 2. 计算机组织与体系结构 3. 算法与数据结构 4. 操作系统 5. 计算机网络 6. ...
- (转)SQL 优化原则
一.问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用 系统提交实际应用后,随着数据库中数据的增加,系 ...
- border-radius结合transition的一个小应用(动画)
<head lang="en"> <meta charset="UTF-8"> <title></title> ...
- IOS开发基础知识--碎片36
1:tabBarController跳转到另一个一级页面 当我们用tabBarController时,若已经到其中一个TabBar的子页,又要跳转到某一个一级的页面时,可以这样写 //这样就可以避免跳 ...
- UIWebView加载本地html文件
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight-)]; ...
- iOS --NSAttributedString
字符属性可以应用于 attributed string 的文本中. 文/iOS_成才录(简书作者) 原文链接:http://www.jianshu.com/p/03a741246737 著作权归作者所 ...
- Play Framework 完整实现一个APP(十)
1.定制Comment列表 新增加Comment list页面,执行命令行 > play crud:ov --template Comments/list 会生成/app/views/Comme ...
- ORACLE 12C新特性——CDB与PDB
Oracle 12C引入了CDB与PDB的新特性,在ORACLE 12C数据库引入的多租用户环境(Multitenant Environment)中,允许一个数据库容器(CDB)承载多个可插拔数据库( ...
- JS/JQuery针对不同类型元素的操作(radio、select、checkbox)
一.select下拉框 I:javascript方法 1:获取选中的值 F1: var myselect=document.getElementById("test");或者 ...
- Oracle索引梳理系列(六)- Oracle索引种类之函数索引
版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...