首页

日本网页设计的特殊案例
一个本不应耗时8周的项目

日本网页设计有何不同？

在2013年Randomwire的博客文章中，作者（David）指出了日本设计中一个引人注目的矛盾。尽管日本在国际上以极简主义生活方式闻名，但其网站却呈现出奇特的极繁主义风格。这些页面采用了多种鲜艳的颜色（打破了三色设计原则）、小型图像以及大量文字。您可以通过2022年11月拍摄的这些截图亲自查看。

该博客文章列举了一些可能的原因，这些原因随后得到了文化专家、同行设计师以及感到沮丧的市民的支持。

我好奇这一理论是否仍然成立，以及是否可以采取更定量的方法……所以我做了。

我发现

在将每个国家最受欢迎网站的2,671张图片通过AI分析后，我能够根据相似性将全球网页设计模式进行分类

存在由同一小部分全球热门网站（谷歌、推特、脸书、维基百科、等）的截图，以及常见的视觉网页特征（验证码页面和GDPR隐私政策弹窗）。

然而，仔细观察图像右上角的聚类，可以发现一种模式

垂直方向上，图像从深色过渡到浅色

水平方向（坦白说更像是对角线，但不管怎样），图像从大多为空白到文字密集再到图像密集

有趣的是，日本的热门网站似乎避免使用空白-深色设计

这与其他国家包含完整设计类型的行为不同

这表明日本在较浅颜色和/或更密集的网页设计集中度上相对独特。

这让我们提出下一个问题：为什么？

为什么日本网页设计与众不同？

原始理论列出了多种可能原因，包括城市景观、语言障碍和风险规避型消费行为。

我将这些观点与我在推特上与亚洲互联网用户进行的对话相结合，识别出3个主要可能原因：

书写系统

日语书写系统与韩语和汉语共享大量表意文字，这些文字被统称为CJK字符。这类字符数量庞大，但与拉丁字体相比，愿意为其设计字体的设计师寥寥无几。因此，日本网页设计师可选择的字体较少，且无法通过大小写来形成视觉层次。

这些字体体积较大也可能导致加载速度较慢。

然而，其他CJK地区（使用CJK字符的地区）并不一定与日本呈现相同的模式。虽然相似，但这些其他地区对深色设计更为开放，同时也有一些“极简主义”的选项。

文化差异

日本被认为拥有更保守的文化，可能要求消费品提供更多信息。这些信息展示方式可能受该地区城市结构影响，如明亮灯光和紧凑空间的普遍存在。

然而，当将日本与具有某些文化相似性的区域邻国进行比较时—— 没有明显的模式。

如果我们尝试根据社会经济和政治特征（全球北方与全球南方）对国家进行分组，肯定没有模式。

技术

要理解这一论点，我们需要了解软件和硬件如何塑造了当今网站的外观。这里有一篇精彩的博客，讲述了互联网的早期发展，以及另一篇博客，记录了热门网站的演变，还有我制作的一段YouTube视频，其中包含了大致完整的故事。

但事情的重点是：

互联网最初是作为在台式电脑上共享文档的工具而创建的
这种文档共享功能很快扩展到互动式多媒体体验
这些发展迅速且缺乏标准化，导致了大量独特的网站设计（这些设计经常崩溃）
最终，由于网站数量过多，探索互联网变得令人沮丧地不稳定且难以导航。
网络标准和搜索引擎的兴起导致了网站设计风格的减少
智能手机的普及进一步因屏幕尺寸和数据计划的限制，导致页面上可显示的内容减少——从而催生了极简主义网页设计

因此，日本的网页设计错过了第6步（或比世界其他地区更晚达到这一阶段），原因有三。

日本是一个老龄化国家

日本是世界上最古老的国家之一（即平均公民年龄比许多其他国家更高）。这些人群使用互联网的方式有所不同——他们似乎仍停留在适合互联网早期版本的直觉模式中（来源）。

日本在采用新技术方面较为缓慢

这一情况因日本普遍不愿更新软件而进一步加剧。这一观点得到以下事实的支持：当微软宣布停止对Internet Explorer的支持时，日本仍有半数企业仍在使用该浏览器（来源），以及日本互联网之父村井纯指出，该国对互联网技术的积极抵制导致其“落后于美国” (来源)。

日本拥有独特的手机文化

，而全球智能手机普及始于iPhone，日本虽领先数年——但孤军奋战。本文指出：

[日本手机]在1999年具备电子邮件功能，2000年推出摄像头手机，2001年实现第三代网络，2002年支持完整音乐下载，2004年引入电子支付，2005年实现数字电视功能。

结果是，日本的智能手机文化与世界其他地区独立发展。由于自早期以来就以文字为主，因此对大图片的重视程度较低，文字内容更易被接受。

由于日本在这一论点中具有独特性，很难找到可比地区。相反，让我们看看网站随时间的变化。如果日本受到全球智能手机革命的影响，我们预计其网页设计会在2010年左右发生转变。但事实并非如此——几乎到了可笑的程度。

Japan

America

因此，很明显，iPhone/智能手机的推出并未对日本产生与世界其他地区（或至少是英语国家）相同的影响。

事实上，21世纪初的设计差异表明，日本早已走上了一条独立的设计道路……但这种趋势会持续下去吗？

不太可能，日本正逐步与世界其他地区的技术接轨，因为年轻一代希望如此（如这段视频中Mayuko所详细阐述的），同时也因为企业停止对旧技术的支持，他们别无选择。

方法论

该项目可分为三个部分：数据收集、数据处理和数据分析。

数据收集

我首先使用SEM Rush的Open.Trends服务，查找每个国家跨所有行业的顶级网站。虽然这可以手动完成，但我使用Python库BeautifulSoup和Selenium-Python自动化了该过程（你也可以在此情况下使用Requests库，但我已经导入了Selenium，哈哈）。以下是一段伪代码，供您了解具体实现方式：

 # 运行函数获取Open.Trends网站上列出的国家列表

countries = getCountries()

# 初始化一个字典来存储信息
d = {
     'country':[],
    'website':[],
    'visits':[]
}

# 遍历该列表
for country in countries:
  # 按照 SEMrush 的 URL 格式，使用格式化字符串插入国家名称
  url = f'https://www.semrush.com/trending-websites/{country}/all'

  # 使用 Selenium WebDriver 访问该 URL
  driver.get(url)

  # 将页面信息传递给BeautifulSoup
  soup = BeautifulSoup(driver.page_source, ‘html.parser’)

  # 使用BeautifulSoup提取表格数据
  results = getTableData(soup)

  # 将结果传递给字典
  d[‘country’] = results[‘country’]
  d[‘website’] = results[‘website’]
  d[‘visits’] = results[‘visits’]

# 将数据保存到文件中
df = pandas.DataFrame(d)
df.save_csv(‘popular_websites.csv’, index=False)

注意：此数据的质量取决于SEM Rush方法的准确性。我没有深入研究这一点，因为他们的列表与类似服务相当。

现在你应该有一个每个国家最受欢迎网站的字典。其中很多网站可能是色情内容或恶意软件，甚至两者兼有。让我们尝试使用Cyren URL Lookup API过滤掉其中一些。这是一个使用“机器学习、启发式算法和人工分析”来分类网站的服务。

以下是更多伪代码：

 # 遍历我们找到的所有网站
for i in range(len(df[‘website’])):
  # 选择网站
  url = df.loc(i, ‘website’)
  # 调用该网站的API
  category = getCategory(url)
  # 保存结果
  df.loc[i, ‘category’] = category

# 过滤掉所有不希望的分类
undesireable = [...
df = df.loc[df[‘category’] in undesireable]

# 保存此数据框以避免重复操作
df.save_csv(‘popular_websites_filtered.csv’, index=False)

注意：Cyren URL 查询 API 每个用户每月提供 1,000 次免费查询。

完全独立的注意：你可以使用像temp-mail这样的服务来创建临时电子邮件地址。

现在是时候获取一些网站的截图了！如果您想截取全屏截图，则需要使用 Selenium-Python 的 Firefox 网页驱动程序。如果不需要，任何网页驱动程序均可。然而，您可能不希望使用全屏截图，因为网页大小差异较大，这可能导致最终结果难以解读。

 def acceptCookies(...):
  # 该函数可能包含多个try-except块
  # 用于在各种语言中搜索标有“接受/同意/允许cookie”的按钮
  # 坦白说，我大概在三分之一处就放弃了

def notBot(...):
  # 部分网站会在授予访问权限前显示验证码
  # 存在绕过验证码的方法
  # 我甚至没尝试过，但你可以试试

# 遍历网站
for i in range(len(df[‘website’])):
  url = df.loc[i, ‘website’]
  driver.get(url)

  # 等待页面加载
  # 你不应该使用静态 sleep 调用，但我用了
  sleep(5)
  notBot(driver)
  sleep(2)
  acceptCoookies(driver)
  sleep(2)

  # 截取屏幕截图
  driver.save_screenshot(f'homepage_{country.upper()}_{url}.webp')

  # 此调用仅适用于 Firefox 网页驱动程序
  driver.save_full_page_screenshot(f'homepage_{country.upper()}_{url}.webp')

注意：在执行此操作时，您可以使用 VPN 导航至相应的国家/地区，以增加看到本地网页的可能性。

数据处理

我主要参考了Grigory Serebryakov 在 LearnOpenCV 上的这篇教程。该教程使用了 ResNet 模型的实现来提取图像特征。你可以从他的博客文章中获取代码，但我们需要以不同的方式加载图像。我们可以使用andrewjong的方法（来源）。我们需要保存图像文件路径以便在最终可视化中使用。

 class ImageFolderWithPaths(datasets.ImageFolder):
    “”"自定义数据集，包含图像文件路径。继承自
    torchvision.datasets.ImageFolder
    “”"

    # 重写__getitem__方法。这是数据加载器调用的方法
    def __getitem__(self, index):
        # 这是ImageFolder通常返回的内容
        original_tuple = super(ImageFolderWithPaths, self).__getitem__(index)
        # 图像文件路径
        path = self.imgs[index][0]
        # 创建一个包含原始数据和路径的新元组
        tuple_with_path = (original_tuple + (path,))
        return tuple_with_path

现在我们可以使用该方法加载图像。

 # 确定包含所有图像的路径
# 如果希望按国家进行标注，需要将它们分类到不同文件夹中

root_path = ‘...’

# 转换数据以确保形状一致
transform = transforms.Compose(transforms.Resize((255, 255)),
                                 transforms.ToTensor()])

dataset = ImageFolderWithPaths(root, transform=transform)

# 加载数据
dataloader = torch.utils.data.DataLoader(dataset, batch_size=32, shuffle=True)

接下来我们初始化并运行我们的模型。我需要稍微修改Serebryakov的代码，以适应我们图像的加载方式。

 # 初始化模型
model = ResNet101(pretrained=True)
model.eval()
model.to(device)

# 初始化变量以存储结果
features = None
labels = [ ]
image_paths = [ ]

# 运行模型
for batch in tqdm(dataloader, desc=‘运行模型推理’):

  images = batch[0].to(‘cpu’)
  labels += batch[1]
  image_paths += batch[2]

  output = model.forward(images)
  # 将张量转换为 NumPy 数组
  current_features = output.detach().numpy()

  if features is not None:
      features = np.concatenate((features, current_features))
  else:
      features = current_features

# 将标签转换为字符串形式
labels = [dataset.classes[e] for e in labels]

# 保存数据
np.save(‘images.npy’, images)
np.save(‘features.npy’, features)
with open(‘labels.pkl’, ‘wb’) as f:
  pickle.dump(labels, f)
with open(‘image_paths.pkl’, ‘wb’) as f:
  pickle.dump(image_paths, f)

现在我们应该有4组数据，分别包含图像路径、标签、图像及其提取的特征。

数据分析

我们首先将数据通过sci-kit的tsne实现进行处理。这基本上将我们的多维特征数组压缩为2D坐标，我们可以将其绘制在图表上。我们可以将截图的缩小版本映射到这些坐标上，以查看机器如何组织我们的网站。

 # t-SNE中的s代表随机（随机）  
# 设置种子以获得可重复的结果  
seed = 10  
random.seed(seed)  
torch.manual_seed(seed)  
np.random.seed(seed)  

# 运行tsne  
n_components = 2  
tsne = TSNE (n_components)
tsne_result = tsne.fit_transform(features)

# 将坐标缩放并移动到 [0, 1] 范围
tx = scale_to_01_range(tsne_result[:, 0])
ty = scale_to_01_range(tsne_result[:, 1])

# 绘制图像
for image_path, image, x, y in zip(image_paths, images, tx, ty):
  # 读取图像
  image = cv2.imread(image_path)

  # 调整图像大小
  image = cv2.resize(image, (150,100))

  # 根据图像的tsne坐标计算其尺寸
  tlx, tly, brx, bry = compute_plot_coordinates(image, x, y)

  # 使用 numpy 子数组索引将图像映射到 t-SNE 坐标
  tsne_plot[tl_y:br_y, tl_x:br_x, :] = image

cv2.imshow(‘t-SNE’, tsne_plot)
cv2.waitKey()

现在我们可以寻找图像中的任何视觉模式。我在上文各节中详细描述了我的发现。

t-SNE visualization of website screenshotos.

有何不同？

我希望通过书写系统、文化（地理和经济层面）以及技术这三个视角来理解这些数据。因此，我找到了包含这些信息的数据集：书写系统，带有区域代码的ISO国家，以及全球南北分界线。这些数据需要通过额外的谷歌搜索进行补充，以确保我们为数据集中的每个国家都标注了标签。

以下是使用此新分析数据的基本流程。

 analysis_data =# 导入数据

# 初始化一个列表以捕获一组并行标签
# 这样我们就可以通过书写系统等标签来标记数据，而不是直接使用国家名称
new_labels = [

# 遍历现有标签并将其用于更新 new_labels
for label in labels:
  # 根据旧标签（国家名称）选择 new_label
  new_label = analysis_data[‘country’ == label]
  new_labels.append (new_label)

# 使用 new_labels 为散点图着色，并使用 tsne_results
tsne_df = pd.DataFrame({‘tsne_1’: tx, ‘tsne_2’: ty, ‘label’: new_labels})
sns.scatterplot(x=‘tsne_1’, y=‘tsne_2’, data=tsne_df, hue=‘label’)

注意：该技术参数采用了一种更定性的方法，因此未在此处包含。

我们可以在上文的各节中看到这些比较的结果

tsne implementation comparing poopular websites in japan and the usa.

为什么会不同？

一个正在进行中的项目答案

参考文献

1996年7月11日，O. N.（未注明日期）。W3目录历史。2022年11月1日检索自https://scg.unibe.ch/archive/software/w3catalog/

20年SEO：搜索引擎优化简史。(2021年2月27日). 搜索引擎期刊. https://www.searchenginejournal.com/seo-guide/seo-history/

Abdelaal, A. (2019年10月11日). 基于Python和Keras的图像重建自动编码器. Stack Abuse. https://stackabuse.com/autoencoders-for-image-reconstruction-in-python-and-keras/

Brownlee, J. (2020年12月6日). 自编码器特征提取用于分类. 机器学习精通。https://machinelearningmastery.com/autoencoder-for-classification/

维基媒体项目贡献者。（2022年9月25日）。中日韩字符。维基百科。https://en.wikipedia.org/wiki/CJK_characters

Google字体：Noto Sans. (n.d.). Google字体. 2022年11月16日检索自https://fonts.google.com/noto/specimen/Noto+Sans/about

Google字体：Noto Sans繁体中文. (n.d.). Google字体. 2022年11月16日检索自https://fonts.google.com/noto/specimen/Noto+Sans+TC/about

霍尔特，K. (2022年6月16日). 报告显示日本半数企业尚未放弃Internet Explorer。Engadget。https://www.engadget.com/microsoft-internet-explorer-japan-business-151751069.html

Little, C. (2021年9月28日)。网页设计的历史——Tiller Digital。Tiller。https://tillerdigital.com/blog/the-history-of-web-design/

麦戈文，D.（2018年）。日本网页设计的真相. 多语言. https://multilingual.com/issues/aug-sep-2018/the-truth-about-japanese-web-design/

村井, J. (2015年10月9日). 日本互联网的诞生与演变. Nippon.Com. https://www.nippon.com/en/features/c01905/

nathancy. (2022年3月27日). 使用OpenCV检查图像相似性. Stack Overflow. https://stackoverflow.com/a/71634759

ricmac. (n.d.). 网页开发历史. 网页开发历史. 2022年10月7日检索自https://webdevelopmenthistory.com/

全球搜索引擎市场份额. (n.d.). StatCounter全球统计数据。2022年11月2日检索自https://gs.statcounter.com/search-engine-market-share#yearly-2009-2022

塞格尔，D.（2011年2月12日）。搜索优化及其不为人知的秘密。 《纽约时报》. https://www.nytimes.com/2011/02/13/business/13search.html?_r=1&pagewanted=all

Sonnad, N. (2015年12月18日). 创建中文字体的漫长、极其曲折且引人入胜的过程. Quartz. https://qz.com/522079/the-long-incredibly-tortuous-and-fascinating-process-of-creating-a-chinese-font

工作人员. (2013年10月3日). 实例说明！老年人无法使用的网站示例. MamiOn有限公司-电脑与数学培训、企业培训 | 面向成人的电脑及数学培训。支持面对面及在线形式。亦提供内容制作等服务. https://mamion.net/2013/10/実例で納得！老年人无法使用的网站示例/

斯蒂芬妮. (2017年7月30日). 自我选择偏见. 统计学指南. https://www.statisticshowto.com/self-selection-bias/

斯特恩, T. (2015年6月24日). 25年来的SEO趋势演变. 搜索引擎土地. https://searchengineland.com/evolution-seo-trends-25-years-223424

田渕, H. (2009年7月20日). 为什么日本的智能手机没有走向全球. 《纽约时报》。https://www.nytimes.com/2009/07/20/technology/20cell.html

塔克森，E.（2022年9月27日）。图像聚类分步指南。走向数据科学。https://towardsdatascience.com/a-step-by-step-guide-for-clustering-images-4b45f9906128

网站总数。 (n.d.)。互联网实时统计。2022年11月2日检索自https://www.internetlivestats.com/total-number-of-websites/

t-SNE用于特征可视化. (2020年4月12日). LearnOpenCV – 学习OpenCV、PyTorch、Keras、TensorFlow，附带示例和教程。https://learnopencv.com/t-sne-for-feature-visualization/

Woodford, C. (n.d.). 宽带互联网的工作原理以及 ADSL 与拨号上网的区别：解释这些内容！2022 年 11 月 2 日检索自 https://web.archive.org/web/20110913021130/http://www.explainthatstuff.com//howbroadbandworks.htmlZDNET 编辑部。(2005年9月26日). 2005年9月主要搜索引擎市场份额：谷歌——56.9%，雅虎——21.2%，微软——8.9%。ZDNET. https://www.zdnet.com/article/top-search-engines-in-september-2005-google-56-9-yahoo-21-2-msn-8-9/