2014年，我创立了 MOTE 机构，与 Rembrant Van der Mijnsbrugge 合作。我们专注于电子商务，在客户品牌旅程的每个阶段与其合作——从最初的市场策略和品牌形象设计，到设计、开发和营销——始终专注于可持续增长。在我15年的电子商务网站设计经验中，我为从独立品牌到财富500强公司的各类客户塑造了战略。我很高兴分享我在职业生涯中积累的网站设计技巧和建议。
设计即沟通，是一种对话。它具有吸引受众、传递信息和唤起情感的力量，这些都会直接影响消费者的决策。
优秀的设计提升了对话的质量。特别是在电子商务领域，你需要为客户提供充分的信息，使其感到自信并做出购买决定。
设计精良的网页有助于创造引人入胜的客户体验，从而强化品牌形象并推动销售和客户留存等绩效指标。
为了开启你自己的对话，以下是过去十年为客户端设计网站时总结出的核心技巧。
优秀网站设计的六大要素
- 无障碍性
- 配色方案
- 图片和视频
- 功能性
- 导航
- 排版
优秀的网页设计往往归结于这六个核心元素的相互作用：
1. 无障碍性
无障碍性既是法律考量，也是设计考量。从设计角度看，更好的无障碍性会带来更佳的总体用户体验。
例如，拥挤的布局和闪烁的动画会导致神经多样性人群过度刺激，也会给普通用户带来视觉疲劳并降低内容理解力。从一开始就考虑认知轻松感及其他网络无障碍原则，有助于做出更多包容性设计选择，让所有用户都能顺畅浏览。
Shopify 内置了无障碍功能，例如为图片添加替代文本的能力。包含替代文本是一个低投入高回报的起点，对无障碍性和搜索引擎优化（SEO）均有益处。你还可以使用无障碍应用或聘请团队审计网站，确保符合 W3C 合规性（最佳网页设计的基础标准），重点关注以下方面：
- 动画与运动
- 表单、输入项和错误
- 流程与任务完成
- 图像与媒体替代方案
- 交互式组件
- 输入/方向
- 布局
- 跨视图的一致性
- 政策与保护
- 文本与措辞
- 帮助与反馈
- 用户控制
2. 色彩调色板
色彩会影响网页设计的其他所有元素，因为颜色决定了内容的突出程度及背景融合度，这在文本可读性上尤为重要。
你不必在可读性上牺牲品牌特色。例如，黑白对比强烈的配色方案（如白底黑字）可读性更高，但可以通过使用米白色和炭灰色代替纯黑纯白来调整对比度。
即使在米白色这样的单一颜色中，也可以融入品牌特色；有些偏向灰蓝色调，有些则更温暖偏奶油色。选择的颜色应与品牌契合，并在整个网站及品牌接触点中保持一致。
3. 图片与视频
即使品牌调色板很微妙，仍可通过摄影、视频和其他视觉素材增添色彩点缀。融入品牌图像是将多种颜色引入网站的绝佳方式，能生动展现品牌个性，也可随季节更替调整以改变网站外观。
在产品摄影方面，标准化美学风格是明智之举，能让访客获得一体化的视觉体验。例如，在相同的略带米白色背景上拍摄所有产品，并使用相同质量的自然光。
至于生活方式摄影和摄像，则有更大空间强化品牌叙事。例如，珠宝设计师 Jacquie Aiche 的网站展示了品牌大使及名人夫妇 Adam Levine 和 Behati Prinsloo 的视频照片。
名人代言是建立品牌信任感极佳的社会认同。Adam 和 Behati 佩戴该品牌珠宝随意相拥的画面，将 Jacquie Aiche 定位为大胆而浪漫的风格。
4. 功能性
归根结底，网站需实现既定目的，无论是销售产品还是提供信息。这意味着功能性与外观同样重要。每当添加设计元素时，请衡量其对网站速度的影响。
例如，若选择嵌入视频，可考虑添加图片回退方案。如果用户网络不稳定导致视频加载缓慢，回退图片会立即显示，而非让用户等待。
请记住，即使你在电脑上设计网站，客户也可能通过手机或平板浏览。事实上，移动商务占超过一半的电子商务销售额。因此，许多企业主选择响应式设计，使网站根据设备自动调整，为移动端购物者创造更优化的体验。
5. 导航
导航设计的核心是创建漏斗，让用户以最少点击次数找到所需内容。在设计时无需另辟蹊径，应遵循直观的网站导航惯例。
例如，将导航链接放在左侧、标志放在中间，以及将搜索、用户注册和购物车等工具放在右上角，以满足用户预期。
6. 排版
优秀的排版能引导视线顺畅阅读。例如，较大文字可强调重要信息，并通过创建视觉层次增强理解力。
设计元素的选择还能加强品牌视觉识别度。在排版中，字体系列（typeface）是设计本身，字体（font）是具体实现。例如，Arial Bold、Italic 和 Regular 是 Arial 字体系列中的不同字体。构建视觉识别系统时，选择一到两种互补的字体系列并在整个品牌宣传中使用会有所帮助。Shopify 内置的许多字体系列非常出色，启动主题时易于选择。
例如，Basic Commercial Light 是很好的替代方案，可取代通用的 Arial 或 Helvetica，后者被 Shopify 上的奢侈品牌如 The Row 使用。
你也可以从独立字体铸造厂授权高级字体系列。Klim 和商业字体是打造经得起时间考验的品牌设计的可靠选择。一些铸造厂推出契合当下潮流且略带实验性的系列，如 Schick Toikka 和 Pangram Pangram。
每一款字体都有独特的故事与灵感，字形中微妙的细节差异正是赋予品牌独特声音与语调的关键。
网站设计必备技巧
- 平衡预期与非预期元素
- 根据应用场景选择字体
- 做减法
- 注意行宽
- 避免使用纯白色
- 为最糟糕的浏览体验进行设计
每个网站各不相同，但在设计时以下指导原则始终适用：
平衡预期与非预期元素
人类擅长模式识别。感觉直观的网站通常反复运用强大的底层模式。
所谓的网页设计最佳实践，不过是因重复过多成为惯例，用户对此习以为常。例如，电商网站右上角期望看到“bag”、“cart”或相关图标。用户虽不会刻意注意这些模式，但会察觉到缺失。
遵循的最佳实践越多——如导航栏在左、购物车在右上、产品描述在图右——新用户越容易浏览。
但这也有阴暗面：“千篇一律的平庸感”。当网站过度优化且缺乏个性时就会出现这种情况。这就是为什么排版、图像和色彩等品牌元素很重要——它们让你能在保持导航直观的同时，打造强烈的品牌体验。
根据应用场景选择字体
选择排版时最常见的陷阱是选用不适合具体文本类型的字体。
例如，行动号召按钮或产品描述需要清晰的大小、字重和行长，以确保即时理解。如果字体难以辨认，可能导致视觉疲劳，使用户未采取行动就离开。
但对于大型展示标题，则有更大的创意灵活性。如果有全宽横幅写着“新品上市”，由于尺寸大，可在保持可读性的同时使用更多装饰和花体效果。
精简内容
采取少即是多的方法通常能带来更出色的体验。你可以像护肤公司 Klur 那样，为产品包装和网站使用同一种字体。一般来说，尽量避免使用超过两种品牌字体，或许加第三种作为点缀，以免让访客感到不堪重负或错失品牌认知机会。
例如，Klur 采用无衬线字体与等宽字体组合。标题和菜单用等宽字体突出显示，产品名称和描述用无衬线字体确保易读，不同的字重提供了额外区分度。
品牌颜色种类较少也能产生更强视觉冲击力。需要足够颜色形成对比（至少两种），但不宜过多以免分散注意力。
注意行长度
如果网站包含产品描述等文本块，构建底层网格时行长度是重要考量。
如果一行文字横跨整个页面，眼睛需从左移到右再返回，这会非常疲劳。
这就是为什么常见最佳实践是在产品描述页将图片放左半部分、文字放右半部分——这样眼睛只需移动页面宽度的一半距离。
避免纯白色
由于背光屏幕和蓝光发射设备的影响，纯白色对眼睛可能非常疲劳。
相反，应选择略带米白色的调色板及深炭灰色调，而非全黑高对比度。这是一种细微设计，用户可能无法察觉，但能让网站显得深思熟虑，并提升整体可访问性。
为最糟糕的浏览体验进行设计
设计和测试网站时可能处于完美 Wi-Fi 环境，但需确保用户在任何条件下都能找到内容。
想象用户在飞机上用信号不稳定的手机购物，每次加载都可能断开或极慢。如果某元素在此条件下无法工作，需有备用方案。请遵循优化网站速度的最佳实践，例如禁用移动端视频自动播放并使用异步加载优先展示重要内容。
网站设计常见问题解答
如何设计优秀的网站？
一个优秀专业的网站具有沉浸感和体验感，并能真实展现品牌形象。但设计也体现克制，因为网站归根结底需要正常运作。鉴于大量用户通过移动设备浏览，响应式设计尤为重要。若缺乏技能，可与信誉良好的设计师合作，或选择优质的预设计模板。
为什么网页设计很难？
挑战在于平衡相互冲突的优先级。只专注功能性，网站可能枯燥乏味；若美观置于易用性之上，设计可能让访问者沮丧。
如何利用色彩改善网站设计？
通过在导航栏、按钮和重要文本中使用高对比度颜色组合来改善设计。选择米白色而非纯白作为背景色让眼睛休息。此外，还可通过生活方式摄影和产品包装等视觉元素添加大胆色彩点缀。