‘视觉设计’ 分类的存档

“美工”？“视觉设计师”？在现在这个分工越来越明确的时代，视觉设计师需要更多的了解用户的行为，用色彩去更好的表现内容，引导用户的行为

没有评论网页栅格系统研究（2）：蛋糕的切法

2009年12月7日

首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。

阅读全文…

分类: 前端开发, 视觉设计, 页面实现 标签: , , , , , ,

没有评论网页栅格系统研究（1）：960的秘密

2009年12月7日

研究网页栅格系统前，来看一组数据：

网站 首页页面宽度 px
Yahoo! 950
淘宝 950
MySpace 960
新浪 950
网易 960
Live Search 958
搜狐 950
优酷 960
AOL 960

上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。

再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。

根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.

这是一件很有趣的事情，为什么要选择这个宽度呢？这个宽度值究竟有什么魔力？

阅读全文…

分类: 前端开发, 视觉设计, 页面实现 标签: , , , ,

没有评论【译】在网页设计中，如何使用图标来支持内容？

2009年11月22日

在做视觉设计时，如何高效地使用图标是一门学问：该使用什么样的图标？图标该放在哪里？大小如何？图标的使用是否帮助用户更好更快的理解内容，亦或是增加了他们的理解负担甚至产生误导？今天恰好看到了一篇很好的文章，可以帮助我们了解该如何使用图标来支持内容，故翻译如下：

为什么使用图标？设计就是传达信息：如果你的网站不能吸引用户，这个问题不在于你分享的信息有多重要、有多刺激。在访问一个网站的最初，大多数用户首先扫描页面来寻找视觉上看着有趣的内容，只有某些事物引起了他们的注意力，他们才真正开始阅读。图标是一个简单、有效的方式吸引用户阅读你网站上的内容。  阅读全文…

分类: 视觉设计 标签: ,

没有评论如何设计网页横幅

2009年11月14日

如何设计网页横幅

设计一个吸引人的网页主横幅其实可以很简单，我们思考的只是如何分配区域。

在一个简单的网页中，上方的横幅是最重要的视觉元素。在很多博客网页中，它甚至是唯一的视觉元素。所以它的作用可以说是相当大的。它必须能够与网站的风格配合，并能传达视觉上的信息。它必须让人看上一眼就让人知道这个网站是属于什么类型，风格是什么。这个横幅还必须能够提供简单明了的导航链接。所有这些，我们都可以通过将横幅分成三个区域而轻松实现：每一个区域都具有自己的功能，而我们还要将这三个区域在视觉上统一，使三者具有相似性及协调性。看一下我们在本文中所介绍的例子。

阅读全文…

分类: 视觉设计 标签:

没有评论网页设计从零开始

2009年11月7日

引言

你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。

今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop,我们开始啦！

正文

先看效果图

阅读全文…

分类: 视觉设计 标签: , ,