StyleStar Experimental

[AlbertLiquid]

原本的打算是把我收集到的几个不同行业的经典案例都塞在一个帖子里。每个网站的设计都很有特色，背后的逻辑、材质、品牌都值得单独拿出来。我会陆续更新，欢迎大家互动和补充。
Part 1

Obama for America (misc.)/Organizing for America
奥巴马2008年竞选官网（BarackObama.com）是Web 2.0拟物化（Skeuomorphism）风格的一个典型代表。它的设计不仅在当时引领风潮，背后的设计语言也与拟物美学高度呼应。计算机科技在选战中的重要地位日益明显，候选人的个人网站已是竞选利器，YouTube、Facebook 之类的社交网站也是兵家必争之地。比较希拉里和奥巴马两人的网站，以及两方阵营对网络科技的运用，或可窥知何以奥巴马能够赢得18至30岁年轻世代的青睐。网站外观页面简洁，像数字竞选工具箱，核心功能（募捐、电话动员、活动组织）也通过拟物化的进度条、按钮等元素，让抽象的事务参与变得具象可感知。在大型活动中，中央轮换广播箱通常至少每两天更新一次，包含新闻报道或公告。通常附上照片或定制设计的图表，以强调公告内容。这个盒子通常是访客访问网站时首先看到的东西，通常用JavaScript而非Flash实现。

背景中若隐若现的星光和模糊的云层，类似于 Frutiger Aero 中常见的“开阔感（Open）”。设计师在飘带的边缘加入了高光和暗部，看起来像是一条在风中飘扬的真实丝巾或绸缎。流动的曲线打破了网页排版原本的僵硬感，赋予了“动感”和“希望（Hope）”的情绪，是纯粹的扁平化设计很难传达的。

设计成了一个真实的物理水银温度计形态。底部有金属质感的底座，红色的“水银柱”随着数量上升，顶部呈圆弧状。类似 Gamification/游戏化设计，红宝石按钮（Ruby Buttons）接近勃艮第红，带有一种充满活力的质感。网页的主体内容区域（中间的白色/浅灰色部分）边缘带有柔和的阴影，使其看起来像是悬浮在蓝色背景之上的一张实体卡片。投影和浮雕：WATCH THE VIDEO 按钮，利用了双重阴影技巧。底部有深色的投影，内侧又有极淡的阴影（让按钮表面产生下凹感）。
材质决定了权重。红色按钮往往被设计成带有高光和厚度的“红宝石”或“涂漆金属”，在蓝色背景下具有极高的材质对比度（Material Contrast）。这在视觉上创建了一个明确的焦点，确保用户视线不会在复杂的页面中迷失。

Aero 风格中对光滑表面的处理，底部的反射让原本平面的网页拥有了“重力感”。“拍立得照片墙环绕屏幕”的设计，也是当时 Media Center 某些屏保或媒体库界面爱用的视觉语言。在 Windows Vista/Win7 的 Media Center 中，浏览电影库或图片库时，经常会用到这种 Cover Flow（封面流）或网格状的预览墙。WMC 的标志性风格就是“玻璃质感”和“高光塑料”，电视边框顶部有一条明显的白光，模拟强光打在光滑塑料或玻璃边框上的反射。
2009年 很多用户可能还不习惯在线表单。将其拟物化为“纸和笔”，潜意识里降低了用户的填写压力——“我只是像平时写信一样填一下”，提升了转化率（Conversion Rate）。Find Events, Make Calls等选项。类似于电脑键盘上的快捷键提示，暗示用户“点击这里可以直接触发动作”。

页面左上角的视觉焦点是一个打开的深蓝色文件夹，里面露出了一份白色文档。运用了经典的 “层叠（Stacking）”​ 和 “悬浮（Floating）”​ 手法。文件夹和纸张都有轻微的阴影投射在背景上，模拟了真实世界中物体放置在桌面上的物理状态。在数字界面中是对 “权威”、“计划的隐喻。它暗示用户有一份重要的官方文件等待查阅，提升了内容的可信度和庄重感。电话机有金属听筒的光泽和黑色机身的哑光质感 构建了一个具体行动场景。它利用了人们对传统办公场景的熟悉感，降低了用户采取行动的心理门槛
地理空间的拟真（Geospatial Realism）。地图的底色使用了深蓝色，州界线并不完全是死板的几何线条。更重要的是，获胜的州用带有光晕的徽章标记。

有一个 Windows Media Player 8 的控制按钮。地图上的彩色图钉（Push Pins）设计得极具立体感，它们在蓝色背景上的投影复刻了现实中‘钉在公告板上’的视觉效果。

Organizing for America (OFA)​ 网站在 2009 年左右的一个转型页面“倾听之旅（Listening Tours）”，从“展示”转向“互动”的案例。
清晰的“三明治”结构：顶层（Header）：保留了 OFA 的标准 Header，包括 Logo、导航栏（Listening Tours 被高亮选中）、用户信息输入区。这种固定的“头部结构”增强了网站的整体感。中层（Hero & Sidebar）：左侧大面积的主视觉负责传达情感和主题，右侧紧凑的侧边栏负责承载具体的行动指令（Sign Up, Donate）。这种左右分栏的设计，将“感性认知”与“理性行动”清晰地分离开来。底层（Content Feed）：下方的博客区域（Blog Feed）采用了列表形式，提供了更具深度的文本内容（如 Memorial Day Open Thread），满足了核心支持者的阅读需求。

► 显示剧情透露

2008 年奥巴马竞选团队（以及后续的 Organizing for America）的所有线上横幅广告（Banner Ads）、电子邮件主题图和专题页面头图进行了矩阵式排列。绝大多数横幅都采用 “左文右图”​ 的结构。左侧或上方是极具煽动性的大标题（通常是无衬线粗体 Gotham），右侧或下方是人物照片或象征性图标。
高光条（Highlight）：几乎每个小图的顶部或底部都有一条极其细微的白色高光带，模拟玻璃或塑料的边缘反光。投影（Drop Shadow）：每个模块都有统一的微弱投影，营造出一种“悬浮在页面之上”的 3D 感。这些横幅的尺寸和切图方式，显然是为了适配当时各种不同的网页环境（新闻网站、博客、门户网站）。同一套视觉体系下测试不同的文案（Copywriting），比如 "Fight Smears" vs "Out of Touch"，通过观察点击率来优化策略。

展示巴拉克·奥巴马（Barack Obama）竞选期间所使用的图形设计作品集，建议下载后放大观看。

制作团队：
Design Director: Scott Thomas
Design Director: Scott Boms
Graphic Designer: Carla
Rapid Response Design Director: Matt Ipcar
Production Manager: Wade Sherrard
广告设计：Al Rotches

https://www.bluestate.co/case-studies/obama-for-america-2008/

Obama logo ideas that weren’t chosen
A/B 测试经典案例
Obama's online evolution

《Designing Obama》– 奥巴马竞选设计全记录（Google Drive）
全书 338 页，全彩印刷，详细记录了奥巴马竞选活动中标志性的视觉设计体系（如著名的“日出”Logo、Gotham 字体、网站设计、海报艺术等），并收录了大量未公开的设计稿和幕后故事。
格式：PDF（高清全彩，约 77 MB）

请尊重作者和出版方的版权。用于个人学习与研究.

总统就职典礼委员会（www.pic2009.org）

Silverlight 被作为一项促成性技术，为好几个网站所用，允许我们中间无法去现场的人在线共享体验。总统就职典礼委员会和 iStreamPlanet 公司合作，在 Presidential Inaugural Committee 官方网站 www.pic2009.org 上，提供就职典礼活动的现场直播。 该委员会发布了第一个现场录像，转播了当选总统 Obama 坐火车从费城到华盛顿 DC 的活动。 正式的就职仪式、演讲以及庆祝活动在1月20日（星期二）线上现场直播。CNN 和 MSNBC 同时启用了 Microsoft Photosynth（42. Photo Tourism：三维重建和图像渲染结合的典范 - 知乎），以帮助捕捉宣誓观礼活动的体验。 他们把专业摄影师拍的照片和观礼群众上传的照片合成，使用 Silverlight 内建的 DeepZoom（纵深缩放）功能提供一个精妙绝伦的3D检视，以创造一个可交互的庆祝活动的 Photosynth 体验。

Change.gov 网站
2008年11月4日 - 次年1月20日过渡的官方网站。该网站包括博客和职位页面。网站还设有一个栏目，允许访客分享故事或愿景。访客可以使用公民简报手册对自己重要的议题发表评论。通过该网站申请工作的个人必须通过 ChoicePoint 公司进行的严格消费者和犯罪背景调查。该网站采用了知识共享许可协议。

Whitehouse.gov
2001年7月，白宫开始将其网络服务器切换到基于红帽Linux的操作系统，并使用Apache HTTP Server。安装于2009年2月完成。布局清晰，采用jQuery实现动态导航，突出核心新闻与议程。2009年10月，白宫的网络服务器采用了Drupal，这是一个免费且开源的内容管理系统，并运行于LAMP（Linux, Apache, MySQL, PHP）架构之上。
Jan 19, 2009

Jan 20, 2009 之后

Cooliris 的3D Video Wall（原名 PicLens）是一款提供“3D墙”全屏浏览体验的多媒体技术产品。它最初以浏览器插件形式推出，后演变为移动应用，其核心功能是通过一个动态的3D界面来浏览图片和视频。是一个沉浸式的浏览环境，让用户感觉像是在三维空间中飞行，可以快速浏览成千上万的图片和视频项目。该技术支持从Google Images、YouTube、Flickr、Facebook等多种在线平台获取内容

总结

• 在Facebook联合创始人克里斯·休斯的主导下，MyBo以Web 2.0和社交网络（SNS）模式架构，支持用户创建个人主页、组建社群、自行组织线下活动。使品牌从变为可参与的“社区中心”。网站整合了16个社交平台入口，品牌深度嵌入数字生活。

• 引入“活跃指数”和个人募捐进度条（温度计），公开显示支持者的贡献度。游戏化设计将支持行为转化为可视化的成就与社区竞争，极大激发了持续参与和小额捐款的热情。

• 团队采用科学的A/B测试。最著名的测试发现，主图换为家庭照，按钮文案从“Sign Up”改为“Learn More”，使邮件注册率提升40.6%。这一改动背后，将强势的号召加入转化为低门槛的邀请了解，契合用户心理。

[LuckZhou]

感谢分享

[Skyweaver]

Very interesting to learn the design techniques that helped win over an election!