欢迎来到合肥浪讯网络科技有限公司官网
咨询服务热线：400-099-8848
咨询服务热线：400-099-8848
如何让搜索引擎自动送流量上门 |
| 发布时间：2016-11-01 文章来源： 浏览次数：3254 |
| Claudio Guglieri 在纽约广告公司 B-Reel 任职总监，他撰写了本网站设计培训指南，旨在匡助您了解设计网站布局的全过程。 开始讲述设计网站布局的主题之前，我想先分享自己多年从事设计工作中看到的一些常见错误，尤其是“网站设计培训”中所述的实习生和新手们的通病。 本文罗列了打造完美网站布局的步骤，旨在涵盖开始新项目前以及项目设计过程中的各项应知应会，适合数字广告公司内就职的所有网站设计师新人阅读。 以下原则不仅包含各种设计细节，还提供了常规工作流程，从而匡助您精彩地完成工作。遵循这些原则，您很快就能上手，设计出专业的网站布局。 01. 先在纸上收拾整顿思绪 initial sketch 世界各处城市插图系列简笔 此条显然很重要，但是我常常发现一些设计师会跳过这步直接使用 Photoshop CS6 而不去思索他们需要解决的题目。设计的目的在于解决题目，而这些有待解决的题目无法通过渐变或暗影效果得到解决，而是需要完美的布局和清楚的结构。想一想内容、布局和功能，然后再开始上暗影效果。 02. 从顶层框架草图入手 UX sketch 草绘基本的框架将匡助你解决 UX 题目，并组织布局结构 假如我要做一个项目的外观和感觉，第一件事就是先建一个顶层框架，可解决所有设计题目。框架是指内容附近的 UI，有助于执行操纵并进行浏览。其中包括导航和各类组件，例如边栏和底栏。 假如你从这点着手设计，则设计主页以外的部门时，布局内容将了然于心。 03. 为 PSD 添加网格 grid 以 10 像素基线绘制的 978 网格示例 这步操纵非常简朴。在 Photoshop 中着手设计任何内容前，你需要创建一个合适的网格。这一步的道理众所周知，假如你没有这么做，我可以断言，最后的设计老是无法尽善尽美。 借助于网格，你能铺排不同部门的布局结构;还能指导你按照特定屏幕尺寸要求进行设计，并能匡助你创建相应的模板，以便符合间距和其他设计题目。 04. 选择排版样式 typography 根据常规经验，一个网站布局中所用字型最好不要超过两种 了解不同的字型和配色是项目开发阶段的工作。我建议一个网站中所用字型不要超过两种，不外实际上，还需取决于你可用的色系。总之，所选字体需便于阅读大量文字，且与标题和操纵相映成趣。大胆勇敢使用大字体，并在使用字型时保持整体一致性和生动感。 05. 选择主题颜色 colours 使用有限的色阶和色调以免产生视觉疲惫 选完要使用的一系列字型后，你应开始研究 UI、背景和文本该用什么颜色。关于颜色，我建议在处理常规用户界面是用色及色调需简洁。 根据元素功能在设计 UI 时保持一致性非常重要。想想 Facebook、Twitter、Quora 和 Vimeo 之类的网站布局。除 UI 外，插图或图形细节部门只要没有干扰组件功能的话，在用色方面也没什么限制。 06. 划分布局 B-reel homepage 网站结构越简朴，用户浏览时就越利便 网站各个部门都需要施展各自的作用。对于用户而言，每个部门都有各自存在的理由，并能得到相应的终极结果。布局需要匡助夸大其内容着重显示该部门最重要的信息。实际上，一个页面并不需要太多调用按钮，因此每个内容都应推动到终极“我可以在此实现什么目的”。 思索一下，你可认为一个简朴的目标构想到的最简朴的布局，并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。 07. 重新思索已建内容 search button 我们真的还需要一个搜索按钮吗?在大多数情况下，谜底是不。 作为设计职员，我们构建了用户浏览互联网的方式，需要采取多少步骤才能执行一个简朴的操纵以及网站的复杂性都是由我们来决定的。我们一直都在遵循一些设计模式和惯例，由于它们切实有效，但有时候只是由于没人有足够的时间进行衡量或者重新思索。重新思索组件上已建的交互模式，并看看是否可以进行改进，这点至关重要。 08. 自我挑战 我鼓励每位设计职员不要墨守成规，而是在每个项目长进行自我挑战。并非每个项目都要求立异，因此，需要我们自己决定是否要增加一些交互设计相关的内容。好比，各种自我挑战可能包括使用新的网格系统、创建新的组件，或者甚至包括一些小挑战，诸如避免混合模式或者避免使用特定的颜色。 09. 留意细节 game work in progress 正在进行的游戏项目：细节视图 这条也算是须生常谈了，但并非始终在成品中得到应用。根据项目的概念，“关注点”也会有所不同。 可以注重小型交互、意想不到的动画或审美感慨感染，例如按钮上的小渐变或是背景盒子附近的微妙笔画之类。但是总的来说，假如你乐在其中，这种感慨感染非常重要，而且非常天然。 10. 当真对待每个组件，就当参加设计比赛 video component 注重每个组件，一加一大于二 我必需承认这并不是我首创的理论。过去曾在 Fantasy Interactive 上听到这种说法，当时我就震动了，这句话如斯明确中肯。每个组件都需单独设计，使其卓绝超凡。有时候，设计师会将一些部门归为最不重要的内容，终极并不会对其引起正视。 11. 进步设计作品清楚度 blurry pixels 避免泛起像素恍惚的现象，尝试准确设置笔触效果和背景之间的对比度或背景颜色 除美学考量之外，有些共同的题目需要予以避免，从而创造出一个干净准确的作品。尝试进步设计清楚度时应留意以下几点：梯度条带、恍惚的边沿、字体渲染选项(部门字体取决于字体大小，最好在特定的渲染模式下查看)以及与背景融合的笔触效果。 以上列出了一些基本留意事项，但实际上需要留意的题目还有良多。务必以整体视角检查设计，看看是不是都非常完美，然后再单独分析每个组件还有什么题目。 12. 收拾整顿 PSD 假如你通过 Photoshop 进行设计，那么这点至关重要(结合网格使用)。不管项目有多大，有多少设计师介入其中，你都需要保证文件干净。这样就能保证不同部门都能轻松导出，从而进步设计流程的速度，并能处理与其他设计师共享的文件。 13. 设计最好的情况，但为最坏的情况做预备 Clear app 谨记不同设备和尺寸大小上如何让你的设计施展作用 作为设计师，我们的工作就是通过不同的限制解决题目。网页设计过程中，会碰到各种限制，包括概念和技术题目以及内容相关的题目。 我们需要创建一个网站，其不仅可以在理想状态下运行，同时也可以在最糟糕的环境下运行。例如，用户可使用相称小的屏幕查看网站，此时网站上的内容看起来支离破碎。 但是，鉴于我们展示设计作品的目的，我个人强烈建议为其创建最佳环境。因此我们将要显示最理想的内容量，同时以最佳浏览器尺寸进行展示，也就是用户最常用的环境。 14. 陷溺于设计，因爱生恨 假如你钻研设计，我保证你已经干过这种事。只要完成一项设计就会倍感自豪，设计已经成为糊口的一部门了。还会截图，与其他设备比较，将其设为桌面背景，甚至打印出来挂在墙上。 整个过程中，我达到某个临界点，终极产生厌恶;我开始发现各种缺点和错误，然后进行修改。不喜欢自己以前的设计是成熟的表现，也就是说，你终极发现自己的题目。 15. 与客户交流前避免铺张太多时间设计概念 提交交互概念或设计外观与体验时，你需要确保你和客户尽快同步。初始概念通过审核后，你可以稍作放松，然后开始设计。 但是假如提交后初始概念后，并未深得客户的欢心，你就应该收集各种反馈，以便第二次提交的概念方案能够符合客户的要求。 16. 和你的开发者成为挚友 developer Rafael Mumme 开发者创意十足，而且热爱自己的工作，和你一样。但是他们并非老是在项目一开始就介入其中，而且大多时候，他们都是在概念设计敲定之后才开始介入设计的，因此他们的创意工作就遭到了扼杀。这种流程是错误的;一些非常优秀的想法主意都是开发团队提出的。分享你的概念，你会惊喜地发现他们会把它变成更加美观、更加便于设计。 17. 展示：说明时请将受众想象为四岁儿童 展示作品和设计作品一样重要。使用错误的展示方式，可能会埋没优秀的设计或者使其惨遭淘汰。谨记，受众第一次看到你的设计时，并不了解你了然于心的各个重点。 18. 肯定自己的创意，但不要成为其奴隶 了解何时宣传自己的创意，或是了解团队或客户何时会产生不合，这里存在一个小小的临界点。作为设计师，你需要坚信自己的设计，但是你也应乐于接受他人意见，快速改变自己的创意以及展开后续调整。不要健忘条条大路通罗马。 19. 开发过程中跟进设计 假如您在广告公司中工作，你必需明白，固然你刚刚完成的一个项目已经投入开发，你不得不参加另一个新项目的设计，这是家常便饭。大家普遍以为 PSD 和样式表提交后就万事大吉了，这是分歧错误的，实在一切还刚刚开始。 假如你真的关心自己的设计和交互理念是否完全贯彻，可以实时与开发者友人沟通，并尽量提供匡助，以便达到至臻至美的效果。 20. 逐步正在设计的作品 style sheets 与大家分享样式表和正在设计的组件 作为设计团队的一员，我们不仅但愿看到终极的成品，同时也想看一看正在设计的作品。有时候，出于种种原因，项目最优秀的部门可能会被忽略，然后一直存放在归档文件夹中。项目完成并获得客户/制作方认可后，可以着手进行改善，如有可能，可以创建案例研究，分析设计中的作品以及终极并未采用的作品。这有助于匡助拓宽团队知识，同时你也能收集宝贵的反馈意见。 Claudio Guglieri 目前在纽约国际电子广告公司 B-Reel 就任艺术总监。之 前在 Fantasy Interactive 任艺术总监，负责领导和制作客户端交互体验，如 Google、EA CNN、Nikelodeon、History Channel、Range Roverand Microsoft。如有任何题目，可 @claudioguglieri。 |
