网页设计和设计流程的思考:创新式布局和交互设计

2013-12-09 20:54:43  来源:腾讯ISUX 

钱柜娱乐Webjx文章简介:网页设计创新式布局与交互.

基本概念

当我们发展一些新的概念时,打破既有模式的关键点在于牢记基本概念。无论网站看起来有多么酷炫,一定要满足可读性和可用性,否则用户无法浏览访问网站并与内容产生互动。

设计过程中要时刻思考用户的行为,想想他们是如何理解和使用网站的。如果你的用户是超级技术达人,那么导航或者滚动设计只要有一点点的小问题就会被凸显出来。但是如果你的用户是电脑小白,那么你可能只需要关注最基本的导航工具。

用户访问你的网站是有目的性的。当他们进入网站时,他们想要的一定要表现的足够突出。确保你的设计可以表达出网站的真正用途-提供信息咨询、娱乐、商业等等。

不要尝试做很多。挑选一个有趣的想法然后做下去,但是不要尝试同时做很多事情。记住,如果你的网站上有太多的东西的话,用户不会在上面逗留的。找到一条有趣而独特的方式与他们沟通互动。

五个网站实例

那么怎样可以把创造性、可读性和可用性这些特性完美的组合在一起?我们可以看看下面这些网站、他们在做一些新颖的、意想不到又相当精彩的事情。

5

6

Lowdi正在做一件了不起的工作,通过一些不同寻常的图形打造视觉的趣味性。每个色块不仅有一些特定形式的圆角(或是反向的圆角),同时这些色块的形状也和公司所销售的产品相似。即使你不去看屏幕上的Lowdi盒子,你也会想到他。通过滚动,这个盒子(实际上是一个扬声器系统)通过一系列弹出式气泡与你进行交流。这个想法有趣、新鲜,引人入胜。

网站地址:https://lowdi.com/

7

8

Steve Vorass在他的个人作品网站上采用了流行的 “隐藏式导航“ 进行设计。网站在屏幕的顶部简单的展示了项目、作品、联系方式几个模块的导航,但是页面中的图片也同样具有导航功能。每张不同的图片都会跳转到不同的项目。更为重要的是,当你的鼠标悬停在图片上方时,每张图片都会提示点击后打开的内容。整个网站的设计十分简洁,这些意想不到的动画效果同样如此。

网站地址:http://stevevorass.com/

更多