移动万花筒——网页与UI设计

适读人群 ：UI设计师、平面设计师、大众读者
在这个人人手持移动设备的时代，网站或是APP的设计成为了吸引用户眼球的第yi门户，这就对设计师提出了更为严苛的挑战。《移动万花筒：网页与UI设计》一书着眼于多设备时代的UI设计法则，从PC到智能终端，无论是网站还是APP，这本书即教你打造易用的用户界面与完美的用户体验！全书收录近年来全球优秀的设计作品，大量作品在Sites of the Day、The FWA等评选中屡获殊荣。

好的用户界面设计是字体、颜色、版式、平面元素等视觉效果上达到统一，同时也会考虑到数据流和用户体验的平衡关系。《移动万花筒：网页和 UI 设计》收录约100个精彩的设计案例，并通过对7位交互设计精英的采访，从配色方案、网格系统、图标应用、字体设计这四个方面探讨基本元素如何传递实用的功能性和优雅悦目的视觉体验。书中收录近年来全球优秀的设计作品，为读者提供丰富、极具创意、紧跟时代潮流的参考。这些作品对于广大的UI设计师、平面设计师、用户体验专家、网页设计师而言，不仅可以迅速提高设计技能，还可以开阔视野，帮助他们打开创意灵感之门，是一本不可多得的参考书。

三度出版有限公司于2001年由王绍强教授创办，总部设在广州，致力于出版一系列高品质的设计图书，涵盖建筑、室内、平面、产品、艺术、时尚等范围。三度出版放眼全球，联手来自世界各地的设计师和艺术家创办一个国际性的设计交流平台，yin领读者从多个不同的角度认识和审视当代设计。 三度以朴实的行动力，深入事物内在，求索知识和生活；以谦卑的态度，探索艺术与设计，挖掘闪光点，带领读者发现广阔崭新的世界。自出版以来，数百本图书已获得国内外读者的认可，在设计、艺术类出版图书领域占有重要一席之位。为人所知的当属《Design 360°设计与概念杂志》《APD亚太设计年鉴》《对话日本设计》《恋恋植物染》《设计法则100》等。

《移动万花筒：网页与UI设计》通过对7位全球顶jian交互设计师的采访，yin领读者站在国际视野的角度认识网页和UI设计。书中不仅有大量界面设计案例，每个案例都素材丰富、极具创意、紧跟时代潮流。此外还有来自设计师们的详细解读，从视觉和文字、设计思路和学习方法等不同方面引导读者，为设计师提供网页与UI设计的新思路。

◊ 前言............. 006 by 福阿德•马洛克
◊ 配色方案 ◊
012 采访维贾伊•马修斯
016 采访吉米•拉赫里亚里索亚
020 Lifeblood 设计师事务所
022 254sound 创意音频制作工作室
024 Canal 电视台连续剧
026 OFFF 意大利站
028 TOOWAY 手机应用
030 Behance HK
032 Stadia 艺术平台
034 实习招聘网页
036 45˚ 建筑工作室
038 Crea 5 设计组合官网
040 纳玛尔手工珠宝
042 加布丽埃拉•卢比奥官网
044 寿司时间
046 卑尔根国际艺术节
048 马修•加洛维官网
050 Programme 作品集模板
052 《今天乏味无聊》电子杂志
054 & Project 视觉设计工作室
058 艺术家在线作品集
060 加贝特设计工作室
062 苏茜•莱奥
064 范思广告官网
066 未来牙医诊所
068 范妮•阿格尼尔珠宝
070 Enjoy 公共美术馆
072 维拉•利斯特艺术与政治中心
074 蒂特根贸易教育学院
076 感受街头魅力——丰田汽车
078 戈维特 - 布鲁斯特美术馆
080 BBC 广播电台
◊ 网格系统 ◊
084 采访伊丽莎白•恩托文
088 帕帕波利提斯 & 帕帕波利提斯法律公司
090 乔瓦建筑公司
092 布鲁士•康纽官网
094 巴斯建筑设计事务所
096 集装箱艺术家驻地 01
098 Uniform 设计工作室官网
100 安妮•德格里夫官网
102 42 | 54 比利时运动服饰
104 Sixpence Store Fighter Microsite 官网
106 W&CO 设计工作室官网
108 FOLIO.2
110 HAY
114 Brands&People 品牌机构
116 JH.ZANE 服饰
120 能源大学
122 走进博物馆
124 Starlet 化妆学校
126 爱丽丝•莫柔官网
128 Le Salón 模特事务所
130 2014 年北方音乐节
◊ 图标应用 ◊
134 采访 Current Haus 设计工作室
138 采访 Oddds 设计工作室
142 “这是哪里？”导航 App
144 吃出来
146 行程安排应用
148 施蒂里亚数字控股公司
150 彼得历险记
152 巴别塔——通用语言展览
154 劳伦斯•布恩精选
156 Sonder 6 跑酷
158 街头咖啡馆
◊ 字体设计 ◊
162 采访 Sons & Co. 设计工作室
166 采访皮埃尔•阮
170 邦尼•马尔克设计工作室
172 长寿木
174 音频响应式实时绘图设计
176 House of Borel
178 Blacknegative 设计工作室
180 小罗伯特•唐尼官方网站
182 舍沃容工作室
184 何塞•莫拉哈官网
186 克里莫夫设计工作室官网
188 马瓦•巴里尔官网
190 千里之外，发现理想家
192 弗莱彻家具
194 inty ++ 设计工作室
196 ABCo. 咖啡
198 KÒNIC THTR—KÒNICLAB
200 ECC 灯具
202 NuDD x Oddity @ MakerHive
204 布鲁克林海军造船厂
206 ACME
208 佩塔斯器械管理公司
210 AD 杂志
212 Onirim 制片公司
214 小公主
216 DNOVA
218 帕帕赞珠宝
220 高尔文家具
222 萨皮耶格斯技术园
224 TOKYO TOKYO
226 杜海航 2016 个人官网
228 音乐故事学校
230 Te Oro 音乐艺术中心
232 “独立急行”活动
◊ 索引 ◊............. 233
◊ 鸣谢 ◊............. 240

Q1可否为我们做一下自我介绍，您是怎么进入到界面设计这个行业的？大学毕业后我在一家古老的活字印刷店“Hatch Show Print”担任平面设计师，后来还分别在 WGBH 电视台和从事导视系统设计的 2-12 设计工作室工作。在此期间，我自己私下已经开始尝试界面设计。两年后，我发现对我来说，界面设计比我的本职工作更有吸引力。所以，我找到了如今的合伙人克里斯•欧阳（ChrisAuyeung）一起从事网页设计。初的两年，我们在应用程序设计和开发项目里尝试了各种不同的交互可能性和功能。当时我们唯一的客户就是自己了所以我们不用担心产品交付或客户的要求，可以尝试所有的可能性。
Q2请介绍一下您的设计过程，是否有些什么特别的流程或技术？每个项目都是不同的，但是对于已经确定了范围和可交付成果的项目，我们采取一个称作4D的流程：探索（Discovery）、设计（Design）、开发（Development）、部署（Deployment）。在“探索”阶段，我们分析问题，研究潜在用户并确定项目体量。在“设计”阶段，我们会制作一张包含所有数据的网页索引地图和一张图表，将调研的成果进行可视化设计。在“开发”阶段，我们会将设计的内容应用到实际的页面上。在“部署”阶段，我们会将所有内容放上网页，等其经过测试后就可以启用了。
Q3很多网页看起来很漂亮，但浏览体验并不好。请问您怎么整合大量信息，然后传递给用户？网页是为特定目的和特定内容而设计的。其中一个设计过程是构思内容策略，以便使用该媒介传递信息。这个过程需要透彻了解所需传递的信息。设计师的作用是使复杂的信息变得简单。
Q4您怎么确定一个网页使用的配色方案，怎样才是一个好的配色方案？颜色在网页设计中十分重要，这与在其他设计中的重要性是一样的。颜色实用、具有识别性并且可以传递感情。它是一个工具，可以帮助用户解析信息。
Q5您如何看待网页设计中颜色的功能性？颜色可以用来建立层级。我们也可以通过颜色的对比，调动访客的注意力，调整信息的优先顺序。当我们协调地使用颜色时，可以创造秩序和逻辑，为网页建立一个视觉形象。
Q6在网页设计中，颜色对用户能起到怎样的心理暗示作用？颜色可以让用户产生情感波动。可以是电子的、动感的，也可以是安静微妙的。我们可以通过选择不同的颜色来营造不同的情绪。
Q7网页设计的交互性相对印刷设计而言，可以让访客与网页联系。这种特性对颜色的运用是否有什么影响？在网页设计中上，人机的互动建立在虚拟体验上，我们可以通过配色方案建立类似真实的反应。色彩可以用来表现人机交互的不同状态。举个例子，当我们设计按键的时候，我们可以用色彩表现出“未点选”“高亮”“已点选”和“有效状态”。
Q8假如我们已经决定了使用哪几种颜色，那应该怎样运用在一个网页上，是否有一些规范或通用的指引可以让设计师进行参考？我个人不认为有这样的规则。它取决于你需要营造怎样的情感共鸣，并将它传递给该网页的潜在访客。
Q9您为美国平面设计协会制作的网页非常具有视觉冲击力。请问您选择这个配色方案的设计思路是什么？该配色方案来源于美国平面设计协会的视觉形象，那是由母体设计公司（Mother Design）设计的。这个配色方案不止用于网页，还用于论坛上其他相关的设计，包括动态设计、环境设计、印刷物设计及社会资产。
Q10请问美国平面设计协会的网页针对什么用户？潜在使用群体对您的设计有怎样的影响？这个网页的主要使用群体是设计师，因此我们在这个项目中充分拓展并尝试了网页设计的界限。由于设计师可以接受比较大胆的设计，因此我们也做了一些大胆的尝试。我们使用了重叠元素和硬边笔触来进行设计，让这个网页趋于完美的状态。
Q11在这个项目中，您怎么平衡可读性和美感？对我们来说，这两者就像硬币的两面。网页设计毕竟是信息传达，所以我们必须有效、高效地传递信息。保证可读性是基本的要求。

科技的力量仍在不断改变整个地球。过去十年，技术进步改变了我们的生活方式，重塑了人际关系，让我们对未来有了崭新的想象。如今，网民数量已达到 35 亿，这个数字等于 1970 年生活在整个地球的总人数。 商业市场里，各行各业都因技术进步而受到影响。曾经的市场领导者如今要面临互联网上新兴企业的威胁。成熟的行业则不断审视自身。电子商务消灭了中间商，让消费者直接面向企业，同时刺激了购物欲望和实现了用户比对下单。而对消费者而言，这是前所未有的消费时代，他们无需再局限于本地商户。正如《纽约时报》近的报道：“没有任何一家公司，在这场技术革命中可以独善其身。”企业深知他们必须适应这股潮流，才能保证自身的生存和发展。而在此之前，他们从来没有面临这样大的压力，需要保持他们的愿景，配合消费者的节奏。
设计无所不在，它充斥了我们的生活，让人无法忽视。毫无疑问，网页设计是这股潮流中的弄潮儿，几乎九成的消费者受其影响而选择了某个产品或服务。然而，网页设计并不是一件商品。假如品牌是企业的灵魂，那么网页是它的血肉和声音，它与消费者互动，表现品牌美学。一个品牌的交互设计给人带来的体验无非三种：好的、坏的、丑的。糟糕的网页设计不仅对商业是毁灭性的，而且是一种污染—污染了消费者的灵魂。改变行业需要有放手一搏的勇气。对企业而言，如何满足消费者更为刁钻的口味，使其在市场中脱颖而出，这是主要的问题。解决的方案是将互动和情感结合，与消费者产生共鸣，为他们留下持久的印象。
作为设计师，不管项目的大小，我们一直致力创造与众不同的体验。跟随潮流非常容易，也很有诱惑力，尤其是一切事物在互联网上都触手可得。然而我们更喜欢不按模板设计，而是全力以赴地进行设计，就像一场押出所有筹码的赌博。风险与回报总是成正比的。是否有某些特定的设计方案，一定会被人认为是好的设计呢？或许有，或许没有。总之，我相信以下两条设计法则是非常有价值的。第yi，内容需要符合一定的逻辑才显得有价值；第二，要想重塑，先要解构。当我在蒙特利尔创立凤凰创意工作室之前，我已经在设计行业工作了 10 多年时间，此前也曾运营过两间设计工作室，这两条法则从那时起，就成了我的创作原则。
当我和凤凰创意工作室的另一位合伙人路易斯•帕奎特（Louis Paquet）掌握了这两条法则，我们马上有种浴火重生的感觉。在凤凰设计工作室成立仅仅 18 个月后，我们大胆的创意和出色的技术就赢得了 15个重要的设计奖项。我们的成功基于一个灵活的团队，我们根据每个项目的需求而进行及时的调整。我们的每个项目都充分利用了重塑的力量，并根据“永远在线”的网络特质，重新诠释传统的元素，为品牌创造符合交互时代特点的品牌价值。我们从不畏惧挑战行业标准，也不会考虑投机取巧，因为我们要发掘的是有创意的解决方案。终，我们需要重塑的核心目标是，让品牌和客户之间建立联系，赢得他的好感，传递品牌信息。
我从《移动万花筒》这本书中找到了很多灵感，它收录了很多相似的案例，从中我们看到设计师和设计工作室为网页设计注入了新鲜的想法和设计理念。创作的灵感就在你我身边，你永远不知道何时何地能发现它，也许是在翻阅这本令人耳目一新的图书时，也许是在浏览网页时，也许只是简单地在上班的路上。每个网页都是一个改变消费者对某个产品或品牌认识的机会，这将引发连锁反应，可以改变您在市场上的地位，甚至一跃成为领导者。
看过这本书之后，希望你们也能把网页模板抛之脑后，用创新的力量、艺术的气息，并有针对性地设计方案，从而打造你崭新的数字化战略！