以下是一条来自显而易见船长(也就是我)的特别观察
带有特殊信息的横幅
LOGO 平台 ↓ 解决方案 ↓ 定价
大胆的声明
号召性用语
小插图网格
大型粗体页脚
©2018— Chris Coyier (@chriscoyier) 2018 年 1 月 30 日
它给人一种(尤其陈腐)关于网站同质化™ 的评论。我想它确实是。在我整理 无服务器的力量 时,我浏览了很多网站。我发现 SaaS 网站的导航经常非常含糊不清。产品?解决方案?哪个适合我?我需要购买产品和解决方案吗?有时候它们让我感到很笨,感觉自己不够了解,无法成为客户。为什么要不直接告诉我你的东西到底做什么呢?
不过,关于网站同质化™ 的评论本身就由来已久。 其中最令人印象深刻的是 Jon Gold 的评论
你正在设计的网站是哪一个? pic.twitter.com/ZD0uRGTqqm
— Jon Gold (@jongold) 2016 年 2 月 2 日
Dave Ellis 也有一篇很好的文章

这种风格已经成为主流,客户开始要求它。这种情况不止一次地发生在我身上。我创建了一些遵循这种模式的网站。这当然也是另一个原因。如果客户看到很多风格相同的网站,他们会开始要求设计成这种风格。
Mary Collins 表示 Dave 的观点一针见血

我自己并不确定自己有多在意。如果一个网站没有完成它想要做的事情,那我会在意。设计在这里出现了失败。但如果一个网站的设计有点无聊,但能满足所有人的需求,那就没问题。无聊万岁。虽然我承认,当一家设计机构自己的网站看起来像重复造车时,这特别讽刺。
我的情绪状态更可能对你的商业模式 感到好奇,并且对你的成功感到嫉妒,而不是对你的设计感到厌烦。
只要我还在扮演“反面角色”,如果每个网站的设计都与其他网站完全不同,我想情况会更糟。每次都要重新学习每个新网站的工作原理,就意味着不能利用“可供性”,而“可供性”可以让人们在新的体验中立即提高效率。
不过,可以公平地说,设计独特性和可供性并不一定冲突。你一定可以设计一个视觉上独一无二的网站,但人们仍然知道如何使用下拉菜单。
多年来,人们一直为网站同质化™ 寻找替罪羊。框架的流行。扁平化设计的趋势。性能阻碍了创造力。用户的期望。研究告诉我们,我们现有的模式是有效的。网站基本上都在尝试做相同的事情。甚至响应式设计也是一个受欢迎的“替罪羊”。我们不妨将样式指南/模式库也扔到堆里。
所以,我再次重申,我不确定自己有多在意。部分原因在于以下两点
- 设计师拥有他们需要的所有工具来制作他们喜欢的独特网站。
- 网站中有大量的金钱,也有大量的人试图获取它。
如果设计独特性是一个可以推动任何类型企业成功率的杠杆,那么相信我,它会被更频繁地使用。
在这方面,我一直问自己一个问题:是什么促使人们从空白开始,使用原生 JavaScript 而不是 jQuery 等等,最终导致网站同质化?
我上次遇到这个问题时,试图倡导使用 Bootstrap,试图用 Linux 发行版来作类比。我当时争论说,基本上有两种方法
– 使用内核,选择一个 init 系统(init vs upstart vs systemd),基本上从头开始组装所有东西…
– 或者从 Debian 或 Ubuntu 派生
恕我直言,其中一个似乎比另一个更轻松。选择 Bootstrap 或 Debian 看起来是一个更安全的选择,因为你从成千上万/数百万其他与你一起测试它的人那里获益。
如果你的主要任务是为客户构建一个网站(客户很可能要求你构建一个类似于其他网站的网站)。或者如果你的主要任务是为自己的公司构建一个网站,而网站的独特性不是它的主要目标。而且如果你注定要从统计学上收敛到网站同质化,无论出于何种原因...为什么还要从头开始?
当你身处网页设计师的位置时,我理解被告知“直接使用 Bootstrap 并调整旋钮”是多么刺耳。我听到有人说“我的手艺比这更有价值”,这通常是正确的。但同时,你将是永远为不太流行的浏览器解决问题的那个人(不,IE 不是唯一一个当你忽略这个问题时被你抛在后面的浏览器)。你会意识到这些几行 CSS 和 JavaScript 代码已经累积起来了。那么,你的网站和你的手艺有什么独特之处是 Bootstrap、Foundation 或 Bulma 做不到的?
除了“一千个读者心中有一千个哈姆雷特”之外,我认为你最好有一个强烈的理由离开“站在巨人的肩膀上”。
你怎么看?你刚刚读到的内容是目光短浅的吗?
Chris,这是一篇好文章。我唯一不同意的是
“设计师拥有他们需要的所有工具来制作他们喜欢的独特网站。”
CSS 对设计环境来说过于限制和复杂。每当我试图设计一些独特的东西时,我都会撞到 CSS 的预期,而这并不是我想要的。
CSS 的底层复杂性使得创建利用其功能的设计工具变得非常困难。我认为网页设计工具的成熟度在 10 分制中只有 2 分,而相比之下,Photoshop 在位图编辑成熟度方面则达到了 9/10。
我个人希望网页设计能够看到更美好的未来。
Oliver,也许你可以开始学习 Gridd css / 变量 / 和动画...在那里你可以看到你可以走多远...
在用户体验设计方面,我会说
第一个设计得更好(我的意思是,从线框图的角度来说,因为它还没有实际内容)
它之所以对大多数客户有效,是因为他们可以在主页上简单、简洁地展示他们的信息。一个主张/6 个内容选项,只有一个号召性用语,这意味着只有一个操作,并且足够的信息来做出决定(作为用户)。
它可以作为获取潜在客户的登陆页面,这是企业最重视的事情之一。
唯一的问题是,这确实是目前最简单的方法。
第二个网站有 3 种内容类型和 3 个号召性用语。
在这种情况下,这个网站只是在提供信息,没有明确的目标。
它存在一个问题
事实证明,之字形布局不利于网页阅读。(不是我说的,而是雅各布·尼尔森在他的可用性博客中说的)
https://www.nngroup.com/articles/zigzag-page-layout/
它可能适合展示 2 种产品的页面。但实际上有 3 个号召性用语,这意味着用户有 3 个选择。用户会选择哪一个?
为什么它仍然是一个趋势?
1. 我们不需要好的内容让它发光。客户不会给你好的内容。
2. 它实际上很容易制作。
3. 如果你在好的文案和内容上投入重点,它可以用于获取潜在客户。
为什么设计师会抱怨?(我想他们会相信是第一个)
实际上,这场讨论应该围绕移动优先线框图展开,因为有些页面现在有 70% 的移动流量。所以不存在问题(两者在移动设备上看起来都一样。只有号召性用语存在问题)
1. 提出一个基于商业决策而不是美学的合理解决方案非常复杂。许多层级的人会抱怨。而你只是一个设计师。
2. 因为他们认为只有美学很重要。他们根本不在乎理解“媒介”。
3. 最后,也是同样重要的是,要理解谁是用户,他们的需求是什么。他们如何消费信息?他们要完成的页面基本目标是什么?获取潜在客户、仅向用户提供信息,或者其他什么?
请你分享一个你设计的例子吗?我想要挑战自己,看看你所说的工具是否过于限制 - 也许 Dropbox 或 WeTransfer 链接会很好。
Mazu,为什么你在评论的开头就假设我不了解 CSS Grid 或 CSS 变量?我一直都在努力学习尽可能多的现代 CSS,包括 Grid 和 CSS 变量。
Grid 很有帮助,但它不是万能药。
我喜欢类比。我认为网站正在接近汽车或房屋已经存在一段时间的状态(大体上相同,但在这些大体的框架内有艺术自由)。
对于汽车来说,四个轮子是典型的规范,乘客位于前轮和后轮之间,发动机位于前部,以便在正面碰撞时可以利用它的重量来保护乘客等等。
对于房屋来说,90 度角是标准,弯曲的墙壁通常会被避免。窗户通常从腰部延伸到头顶以上,屋顶倾斜以应对降雨等等。
对于网站来说,同样的模式正在出现。导航位于顶部,下方是一个吸引注意力的元素,下方是细节的分解。这些模式在约 20 年的网站设计过程中效果良好。虽然并非所有人都使用相同的颜色、图像、元素大小等等,但毫无疑问,它们都具有一定的基础、功能性(因此具有吸引力)形式。
我完全理解这种流行趋势。它极简、简单、逻辑清晰,看起来也很不错。客户之前经常见过这种布局,希望自己的网站看起来也类似,因为……他们知道它有效!从用户的角度来看,各个页面和不同网站之间的这种一致性确实有其优势。这类网站由于可预测性,不需要太多的认知负担。用户知道预期是什么,以及在哪里查找特定信息。话虽如此,这也导致了一种彻头彻尾的可笑的一致性。我现在有点厌倦了,但是 所有该死的 Bootstrap 网站 确实说明了这一点(就像这篇文章中的推文一样)。难怪粗犷主义网页设计运动像这样爆发了!
虽然我很喜欢 WordPress,但我认为主题的出现也与之息息相关。购买一个主题,更新内容和图像,你就可以拥有一个全新的网站。
我喜欢这篇文章,也喜欢上面提到的具体引用。
无论他们给出什么理由让你不成为客户,只要他们没有针对你,而且他们不是快消品/大众市场,那就没问题。
Oliver - 我认为 CSS 网格将有助于解决这个问题。当然,许多人会使用它来重建这种设计,但它可以做更多的事情。
关于这个网站趋势 - 它很熟悉而且“有效”(虽然我想知道有多少断言这一点的人对不同的设计进行了测试),但我不知道我们是否陷入了局部最大值。即使假设这种方法效果很好,它是否适合所有类型的网站的最佳设计?我认为不太可能。但是,如果它效果很好并且易于制作响应式,那么很难说服大家去测试其他几种设计,因为这需要大量的设计和开发时间和精力(以及资金)。
一个问题是,人们完全停止设计网站。他们设置一个模板,并一直使用它进行线框图,直到网站准备发布。
下一个问题是任何形式的“侧边栏”的概念。对于“非 UX 设计师”来说,这很难思考。他们基本上被解决响应式问题的方法所淹没。
50% 的屏幕/50% 的印刷设计师很乐意跳上“Bootstrap 思维列车”,因为他们经常听到“这不可能做到”。
摆脱限制 - 放弃“移动优先”的想法 - 去创造视觉上令人惊叹的东西 - 之后再寻找技术和 SEO 解决方案。- 或者使用主题和 CMS 实施一个经济实惠的网站。
是的,摆脱为超过 50% 使用手机访问你网站的人设计一流体验的束缚。
天哪,我只怪 Bootstrap* ……(* 正确,我其实不太喜欢它)。我之前遇到过这种情况,你设计了一些东西,可能有一些新想法,然后当开发人员拿到设计时,他们就直接用 Bootstrap 模板化它,不交付,并使用技术细节作为理由解释为什么你的设计无法实现。(他们就是不能在该死的 Bootstrap 之外思考/编码)
他们可以。这取决于预算。独特设计的开发需要比预算的时间长 5-10 倍。我曾尝试向客户提供报价,说明设计费用为 £x,构建费用为 £x*5。客户不仅会抱怨,而且我们的创意总监也会抱怨为什么不是 50/50 分配。结果是,框架占用了大部分开发工作,导致设计受到限制。
“当开发人员拿到设计时”
所以,更早地把设计交给他们,让他们参与进来。有些设计是无法实现的,无论 Bootstrap 是否存在。
十多年前,我们没有那么多的限制,因为人们可以使用 Flash 构建像素完美的交互式位图网站。而且,哇哦,谈谈可用性噩梦吧!
设计趋势变得更加规范,但可用性要求你坚持人们所熟悉的模式。此外,根据我的亲身经验,95% 的网站工作的收入都不足以实现独特的设计,以及研究设计是否有效所需的时间和费用。高质量的摄影、字体使用和插图通常可以提供必要的独特性,同时保持相同的框架;这一切都以更低的价格实现。
我确实认为,网页设计很快就会迎来复兴,因为 CSS 网格等新技术让设计摆脱了旧的浮动限制。也许这一次,它不会像 90 年代后期/00 年代初期那样混乱。
这很有趣,但我感觉这种一致性并不仅仅存在于网页设计中,它也存在于所有的“传统设计”中,名片就是一个例子,或者……你知道……书籍。
我觉得这主要反映了媒介的外观,而且无论是书籍还是名片,即使结构是“可识别的”,设计细节总是会存在,以创造差异。这并不意味着我们不应该尝试实现独特性,只是当我们做到的时候,它会变得特别。
封面
版权页 ©️2018
目录
前言
内容(通常分为章节)
相关书籍列表
作者简介
封底
但没有人抱怨书籍的结构过于相似……
你见过韩国网站吗?它们基本上都一样,而且已经这样十年左右了。我认为,它们在一定程度上遵循这种模式是为了让最终用户更容易使用。
这只是“数字时代”的功能主义。一切都是循环的!
让我们将网站的一致性与其他需要一段时间才能发展起来的东西进行比较,例如汽车。有很多元素不会改变……4 个轮子……方向盘……座椅……车门。如果你去掉了这些功能中的任何一个,或者彻底改变了它们的功能或设计,人们会认为你疯了。我们今天仍然使用圆形车轮,因为无论你如何装饰它,它都能完美地工作。普遍性是常见的。如果你愿意,可以称之为“无聊”。但这就是让任何开过车的人都能跳进另一辆车,然后出发,而不需要太多熟悉度的原因。
你可以选择将汽车设计成大众车型或凯迪拉克。只要保持发动机的位置不变就行了。
好吧,与汽车制造行业的比较并不相关。我告诉你为什么 - 我学过工业产品设计。
汽车制造业是一个非常昂贵的流程,需要比人力资源更多的资源。此外,它是一个复杂经济依赖关系的庞大生态系统。它与石油/能源行业、轮胎行业、金属行业联系在一起。这是一项极其微妙的业务,因为如果你做错了事情:就会发生事故,人们会丧生。而且存在激烈的竞争。如果你有一点偏差,你就有可能失去所有信誉和市场份额。
尽管如此,制造商们认为他们必须继续坚持许多愚蠢的规范:比如依赖该死的石油。直到埃隆·马斯克发明了特斯拉……
所以你说网页设计就像汽车行业?恕我直言,这完全是无关的。当然,人们很保守,他们喜欢看到事物以相同的顺序出现,即使它很糟糕(微软的设计……)。但这并不意味着一些演变不会发生,也不意味着存在任何重大风险。没有。我们必须推动网络发展:因为它的成本低廉、操作简单、适合所有人。人们只需要具备知识、技能和一台电脑就可以构建一个网站(当然还需要一个主机)。这与汽车行业完全不同。
如果人们对自己的决定和行动真正有意识和谨慎,他们早就停止浪费时间在 Facebook 上,牺牲自己的数据了。
网页设计还有很大的发展空间。而我们设计师对此负有责任。至少在一定程度上。否则,谁来负责呢?
你提议的是对我们当前陷入的网络困境进行颠覆。这不仅需要一些强大的原创性,还需要一些先进的网页开发技巧。这是一种稀有品种。这些品种确实要求高价,而且通常很难复制。当它变得容易复制时,它就会变成商品,就像我们今天到处看到的那些设计一样。人们争先恐后地从中获利,然后它就变成了常态。
我会将今天的网站与今天的 iPhone 进行比较。都是微小的变化,大多数是营销炒作,还有一些偶然添加的功能,这些功能由黑客提供,他们的想法被购买、推广或复制。新的后端编辑器、聊天机器人、animoji 等等。但必须有一些重大的突破才能实现全面的改进,包括设计/可供性以及风格/外观。
我在这篇文章上读了很多评论,并且提出了“相同性”的问题。让我先自我介绍一下,我一直从事这方面的工作,从互联网从Unix Software Labs问世以来,我已经见证了诸多变化。我们需要记住网站是用来赚钱的工具。如果它们做不到这一点,那么设计就不重要。首先,我们要考虑客户角色,你是在向谁销售?其次是原型,也就是“相同性”。人们习惯于以某种特定的方式看待事物,当我们尝试做一些不同的事情时,人们会说“那行不通”。这里有一个完美的例子:他们说我们应该制作30秒或更短的社交媒体内容。我在2017年采用了相反的做法,营销数据显示,60-90秒的社交媒体内容获得了更高的互动率。现在,就网页设计而言,我正在做混合媒体网站(视频/动画/音乐),并与社交媒体相结合。一刀切的做法不再奏效,所以必须有人做一些不同的事情,而我可能是其中之一。AMP网站现在正在开发中,包含视频内容。我做网站、视频和动画,是因为我的创意愿景。创造力是无法教授的。星际迷航的第一集失败了,但看看它孕育了什么。继续努力,祝你好运,在电影院见。LMAO
很棒的东西!
好吧,CSS-tricks 与众不同——左边有一个大的导航栏——有人在使用上遇到过严重的问题吗?
Steven Hay:
有趣的是,我昨天刚参加了一个设计评审会议,有人想更改标准页眉链接的名称,因为它太“无聊”了,并且与其他所有网站上的名称相同。我认为这很好,因为我只要看一下就知道那个链接会做什么,所以不要让我思考!
相同性既不好也不坏。它是一种存在状态。了解如何使用它,你就可以将相同性变成优势。正如其他人提到的,当网站提供功能上的相同性时,它们减少了用户学习新系统的必要性。从这个意义上说,你可以使用相同性来改善最终用户的体验。
另一方面,如果你是一个“设计师”,而你的网站看起来和其他所有网站一样,那你还不够努力。@Oliver 可以看看像 Awwwards 和 CSS Awards 这样的网站,看看你能将设计推进到什么程度。CSS 并不是相同性的原因。
需要思考才能知道什么时候相同性是好的,什么时候是不好的。