教你打造完美网站页面布局精选.pdfVIP

教你打造完美网站页面布局 Claudio Guglieri 在纽约广告公司 B- Reel 任职总监 ，他撰写了本网站设计 训指南 ，旨在帮助您了 解设计网站布局的全过程。 开始讲述设计网站布局的主题之前 ，我想先分享自己多年从事设计工作中看到的一些常见错误 ，尤 其是“网站设计 训”中所述的实习生和新手们的通病。 本文罗列了打造完美网站布局的步骤 ，旨在涵盖开始新项目前以及项目设计过程中的各项应知应会 ，适合数字广告公司内就职的所有网站设计师新人阅读。 以下原则不仅包含各种设计细节 ，还提供了常规工作流程 ，从而帮助您出色地完成工作。遵循这些 原则 ，您很快就能上手 ，设计出专业的网站布局。 　　00. 先在纸上整理思绪 　　世界各处城市插图系列简笔 此条显然很重要 ，但是我经常发现一些设计师会跳过这步直接使用 Phot osho p CS6 而不去思考他 们需要解决的问题。设计的目的在于解决问题 ，而这些有待解决的问题无法通过渐变或阴影效果得 到解决 ，而是需要完美的布局和清晰的结构。想一想内容、布局和功能 ，然后再开始上阴影效果。 01. 从顶层框架草图入手 　　草绘基 的框架将帮助你解决 UX 问题 ，并组织布局结构 如果我要做一个项目的外观和感觉 ，第一件事就是先建一个顶层框架 ，可解决所有设计问题。框架 是指内容周围的 UI ，有助于执行操作并进行浏览。其中包括导航和各类组件 ，例如边栏和底栏。 如果你从这点着手设计 ，则设计主页以外的部分时 ，布局内容将了然于心。 02. 为 PS 添加网格 　　以 10 像素基线绘制的 978 网格示例 这步操作非常简单。在 Phot osho p 中着手设计任何内容前 ，你需要创建一个合适的网格。这一步 的道理众所周知 ，如果你没有这么做 ，我可以断言 ，最后的设计总是无法尽善尽美。 借助于网格 ，你能安排不同部分的布局结构;还能指导你按照特定屏幕尺寸要求进行设计 ，并能帮助 你创建相应的模板 ，以便符合间距和其他设计问题。 03. 选择排版样式 　　根据常规经验 ，一个网站布局中所用字型最好不要超过两种 了解不同的字型和配色是项目开发阶段的工作。我建议一个网站中所用字型不要超过两种 ，不过实 际上 ，还需取决于你可用的色系。总之 ，所选字体需便于阅读大量文字 ，且与标题和操作相映成趣 。大胆使用大字体 ，并在使用字型时保持整体一致性和生动感。 04 . 选择主题颜色 　　使用有限的色阶和色调以免产生视觉疲劳 选完要使用的一系列字型后 ，你应开始研究 UI、背景和文本该用什么颜色。关于颜色 ，我建议在处 理常规用户界面是用色及色调需简洁。 根据元素功能在设计 UI 时保持一致性非常重要。想想 Faceboo k、Tw it t er、Q uo ra 和 Vimeo 之类 的网站布局。除 UI 外 ，插图或图形细节部分只要没有干扰组件功能的话 ，在用色方面也没什么限制 。 　　05. 划分布局 　　网站结构越简单 ，用户浏览时就越方便 网站各个部分都需要发挥各自的作用。对于用户而言 ，每个部分都有各自存在的理由 ，并能得到相 应的最终结果。布局需要帮助强调其内容着重显示该部分最重要的信息。实际上 ，一个页面并不需 要太多调用按钮 ，因此每个内容都应推动到最终“我可以在此实现什么目的”。 思考一下 ，你可以为一个简单的目标构想到的最简单的布局 ，并开始添加所需组件。最后你会惊喜 的发现简洁也并非易事。 06. 重新思考已建内容 　　我们真的还需要一个有哪些信誉好的足球投注网站按钮吗?在大多数情况下 ，答案是不。 作为设计人员 ，我们构建了用户浏览互联网的方式 ，需要采取多少步骤才能执行一个简单的操作以 及网站的复杂性都是由我们来决定的。我们一直都在遵循一些设计模式和惯例 ，因为它们切实有效 ，但有时候只是因为没人有足够的时间进行衡量或者重新思考。重新思考组件上已建的交互模式 ， 并看看是否可以进行改进 ，这点至关重要 　　07. 自我挑战 我鼓励每位设计人员不要墨守成规 ，而是在每个项目上进行自我挑战。并非每个项目都要求创新 ， 因此 ，需要我们自己决定是否要增加一些交互设计相关的内容。比如 ，各种自我挑战可能包括使用 新的网格系统、创建新的组件 ，或者甚至包括一些小挑战 ，诸如避免混合模式或者避免使用特定的 颜色 　　08. 注意细节 　　正在进行的游戏项目 ：细节视图 这条也算是老生常谈了 ，但并非始终在成品中得到应用。根据项目的概念 ，“关注点”也会有所不同 。 可以注重小型交互、意想不到的动画或审美感受 ，例如按钮上的小渐变或是背景盒子周围的微妙笔 画之类。但是总的