网站重设计:从混乱到清晰

在数字时代,网站设计不仅仅是为了美观,更是为了提供更好的用户体验。然而,很多时候,网站的设计往往是一种权宜之计,而不是经过深思熟虑的规划。结果往往是页面上堆满了尽可能多的内容,而不是考虑页面上应该放什么。

一个常见的是,网站看起来陈旧、拥挤,用户一打开网站就感到困惑。尽管喜欢旧的设计,就像狗喜欢它那双旧的、磨损的鞋子一样,它很舒服,知道它是怎么工作的,它有需要的一切。但是,还是想要改变。

改变的动机来自于许多开发者共有的问题:一天的时间不够用,需要减少正在做的事情和维护的事情。这导致删除了一些不常被成员使用的网站部分(猜甚至没有注意到它们的消失),同时简化了其他部分的功能,使其更易于使用。

Metro设计语言,或者说以前被称为Metro的设计语言,是重新设计的基础。Metro的核心是内容优先和使用负空间(即空白)。

初步要求很简单:

  • 明显的CodeProject品牌
  • 易于阅读
  • 需要展示的所有内容都放在页面上

第二项要求是显而易见的,但第三项要求是真正的工作开始的地方,它涉及到一些微妙之处。页面上的所有内容都需要一直可见吗?它可以在弹出窗口、下拉菜单、标签或点击通过中显示吗?它应该在哪里显示——在折叠上方还是下方?

第三项要求的一个重要方面是将信息分层。决定什么是最重要的,然后是次重要的,以此类推,直到最不重要的。这会让思想非常集中。

显然,文章很重要,但社区、讨论、问题和答案也很重要。文章永远是第一位的。在首页上,想要明确什么是可能的,但试图展示一切是没有意义的——这是过去犯的一个错误。此外,首页并不是网站上最受欢迎的页面,文章才是。读者不会通过谷歌或必应搜索,然后去首页。他们去看文章或问题。如果需要强调什么,那么文章页面就是做这件事的地方。

希望读者做什么?阅读很多,提交很多文章,享受自己,并点击广告商的广告,就像它们即将过时一样。所有这些都是非常简单的,但如何实现呢?

显然的答案是,引导读者去认为对他们(或对网站)有益的行动。但是,这个简单的要求是在一个又一个网站上看到被忽视的——也有罪。在这方面的圣经是这本书《别让思考》。

设计模式:

  • 提升品牌
  • 提升内容,减少噪音
  • 放松布局——不那么拥挤=易于阅读和查找
  • 提供指导

看看Metro背后的哲学,会发现它基于两件事:内容优先和使用负空间(即空白)。Metro不是关于瓷砖的。那是在触摸屏设备上使用的Metro的实现。真的不喜欢在触摸环境之外使用它,而且看到它一次又一次地被滥用,最初对走Metro之路犹豫不决。此外,看到的例子都被洗掉了,缺乏品牌。如果要做这件事,必须专注于所需要的,而不是以前做过的事情。

线框图:

这似乎很合适,所以开始制作一些线框图来探索这些想法。

第一个展示了最初的想法,本质上是选择的方向。有很多关于链接是橙色的,顶部栏太橙色的讨论,以及间距与字体大小相比太大的讨论,但想法就在那里:说出需要说的话,不要多说。保持干净。

然后它演变成了一个更熟悉的形式:

在这方面有一些基本问题。它的布局很好,很干净,但很无聊。灵魂缺失了,最重要的是,试图阅读白色背景上的橙色让头疼。辩论激烈,最后达成了妥协,转向了深色标题。

除此之外,还有一个问题是首页上的瓷砖正是不想要的:大块的,除了占用屏幕空间之外没有任何目的。它们被调整了。

然而,现在的问题是无法看出哪些项目是链接,哪些不是。最终,蓝色链接被带回来了,来到了今天的位置。

大问题:

自从上次重新设计以来,尝试了多次重新设计网站,但都失败了,因为试图坚持过去的做法,而不是从一张白纸开始。试图换皮而不是重新设计,这永远不会解决基本的信息架构问题。一旦开始考虑内容作为主要焦点,并引导读者去内容,事情就非常、非常快地聚集在一起,最大的问题结果证明是最小的。使用什么图标?甚至使用图标吗?文章之间的填充是多少?论坛的背景颜色是什么?最大的头疼是什么颜色的链接。

下面是想要做的事情。喜欢它。绝对喜欢它。但它让头疼。灰/橙组合并不大喊“新鲜”或“当累了就阅读”。它悄悄地说,“眼睛疲劳”。所以妥协发生了。

真正改变的是什么?

从本质上说,没有太多,但从本质上说,一切都是。首页看到了最大的震动(或者说是震动),文章页面是最精简的。

图片中的进步:

一旦设计最终确定,并且草图提交,在9天的时间里花了115小时来实现CSS、布局和后端代码的更改。广泛使用.LESS,所以抓住了机会将单一CSS文件分解成更易于管理的小块。强烈推荐.LESS。这就是CSS应该的样子。

主要工作是使用Firefox/Firebug完成的,然后是Chrome及其开发工具,最后是IE,特别是IETester。图形是用一个老化、吱吱作响的Fireworks版本完成的(知道,羞耻)。咖啡是由Te Aro提供的。

这里有一些小小的屏幕截图供娱乐。

  • 最初的皮肤。啊。眼睛。
  • 一个接近最终版本的显示,有深色标题和橙色链接
  • 新文章页面的初稿。这需要一点重新布线,但考虑到变化的程度,后端没有太多要做的。
  • 一个接近最终版本。标签仍然有轮廓,顶部导航菜单仍在最后确定,标题大小像溜溜球一样上下移动。咖啡因水平变得危险。

最后的截图是在发布前30分钟。为了清晰,想要深色链接,这样整个页面看起来干净一致,但最终,关于哪些链接可以点击,哪些不可以的潜在混淆超过了美学。

在设计时,至关重要的是不仅要有一个明确的目标,还要清楚地了解认为什么是最重要的。在每一步,都问“否需要这个”,并积极尝试移除认为没有增加价值的项目。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485