资讯频道 → Web前端
阅读更多

31顶
0踩

Web前端

翻译新闻 创建优质单页网站的6个秘诀

2011-07-28 10:55 by 见习记者 lihuapi 评论(1) 有9835人浏览
website design one-page 单页网站
毫无疑问，单页网站一度备受青睐。它们既非个人用途，也非用作商业用途。一旦你设计的单页网站卓越超群，这将为你带来无穷无尽的好处。一个好的单页网站不再取决于它内容上的厚重感，要知道你只有一页的空间来承载你的观点。所以尽可能的摒弃那些过时的动画技巧。此外，大多数单页网站在它们的布局上都不落俗套。要想做到一览无余，同时又要保持布局错落有致，这真是难上加难啊！

单页网站的潜在用途是不拘一格的，有些非常流行的单页网站是个人组合的，有些则是商业用途，用作销售产品或者服务。

如果你真切希望设计出一个别出心裁的单页网站，那么以下这些观点将助你一臂之力。（点击图片查看网站，精彩不容错过！）


1.保持专注

让一切变得尽可能的简单。如果你有可能设计单页网站的话，你真的不需要强调网站内容的多少。单页网站不在乎那么一点点皮毛，它们需要正中要点的内容。如果你是一名设计师，考虑组合设计时，不要在无关紧要的事情上发愣，请专注于你的设计。

尽可能地摒弃网站上的累赘，专注在网站的核心要点上。这对任何网站都适用，对于多页网站而言，即便在内容上有些繁杂，也无大碍。因为用户通常都会找到它们想要的信息。而单页网站却显得孤注一掷，一旦用户找不到想要的信息，他们就会弃之而去。


你很清楚的这个商业网站在卖什么
网站的组合堪称完美


2.保持布局合理的层次结构

在维护访客的同时，单页网站应该展示你的产品或者服务。好的网站布局有助于彰显网站的用途。作为一名设计人员，你需要有驾驭能力，引导用户的关注点。

人们会很自然地先关注大事情，再关注小事情。所以充分利用好这一点，要重点突出。
传递信息的机会难得可贵，所以好好珍惜吧！如果你确实需要发布很多网站内容，那么请考虑多页网站吧！


虽然这个网站有很多关注点，但你一眼就能发现重点
虽然你明白这个网站的用途，但是讲究层次的话效果会更好


3.保持清晰的导航风格

有些单页网站是一些静态网页，这些网页上的导航栏会将访客引入到外部网站上。比如一个音乐家可能会在他们的网站上标注“视频”选项的导航栏，方便访客登录到他们的YouTube账号上。当然，这没有什么不对的。

它的确让一切变得更加简单。但访客们唯一需要清楚地知道：他们是什么时候被引入到了外部网站的。

如果你的单页网站是为了宣传产品，在没有任何信息作出提前通知的情况下，提供的购买链接直接引导消费者登录到购买平台上，你将会面临着损失大笔生意的风险。

你的目标是要让一切变得尽可能地简单。要知道网站上的链接有可能出现无效的情况，所以请考虑采用一些图标或者标题文字，让访客知道他们当前的位置。


不要采纳这个网站提供链接的方式，链接上没有任何提示
这个网站的设计和编码非同寻常，然而标注绿色圆圈的链接让人有些混淆不清


4.大力提倡富有创意的设计

现在我们到了最有趣的部分：用单页网站来充分展示魅力。没有谁愿意看到老态龙钟，一成不变的网站。不要被条条框框所束缚，让设计步入更高的级别。富有创意的设计会吸引大量访客纷纷关注你的产品，并且过目不忘。

你没必要处处设计相同的背景，可以选择跨区域更换背景，设想滚动单页网站的感觉就像在切换幻灯片，是不是很惬意？

尽可能的完善设计，无论是用大图片来横跨整个浏览器窗口还是制作一个大的说明背景，这些别具心裁的亮点都会让你的网站熠熠生辉。


这个网站的设计风格俨然名副其实的海报，让人大吃一惊
这个网站的风格很清晰，让你会情不自禁的停下来仔细观赏


5.代码实现强大的功能

单页网站应该保持较好的交互性，用户体验显得尤为重要。请务必关注细节，代码会让你的网站步入更好的层次。

需要注意的事项包括色彩的搭配和链接的操作，设计外观和表单的操作，提交和错误信息提示等等。确保所有这些与设计保持一致。


一个将代码运行在单页网站上既好又简单的方法
滚动效果让人难以置信


6.创造动态效果

除了关注代码细节，你可以用代码来创建一些动态效果，避免网站过于乏味。让你网站尽可能的充满生活情趣，适当地添加一些有趣的动画效果，会让你的网站脱颖而出。
像jQuery等语言被公认为可以用来创建网站上的动态效果。无论你是想通过不同角度来创建内容的淡化效果，还是将背景设计成幻灯片，请记得让观众参与进来，保持较好的互动性。


背景是动画，虽然我不太明白这个网站的真正寓意，但是整体看起来很整齐
过渡效果堪称完美


英文原文：http://www.webdesignerdepot.com/2011/07/6-tips-to-create-better-one-page-websites/
  • 大小: 86.2 KB
  • 大小: 89.7 KB
  • 大小: 89.6 KB
  • 大小: 83.7 KB
  • 大小: 87 KB
  • 大小: 88.3 KB
  • 大小: 82.3 KB
  • 大小: 73 KB
  • 大小: 78.2 KB
  • 大小: 85.1 KB
  • 大小: 79.3 KB
  • 大小: 79.7 KB
31
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 george_space 2011-07-28 23:14
我的个人网站也保持一个单页面好久了两年多了，不是为了美观，因为没时间管理网站，又舍不得丢掉域名，就花点钱先占着，放个单页面充充场面。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Java-5-异常

    Ø 课堂讨论要点：   1. 异常与错误 a. 错误(error)： 语法错误， 逻辑错误        错误是系统的设计缺陷，必须返回软件公司修复。   b. 异常(exception)    现代软件在运行过程中，往往容易受到周边因素的影响，比如网络意外中断，磁盘文件被误删除，用户录入了不正确的数据，导致软件运行中断，我们把这种不是因为软件自身原因，而是软件运行环境的意外，导致

  • Java面试题1

    首先需要创建一个统一的响应对象，例如或Resultcode：响应码，用于表示请求是否成功。message：响应信息，描述请求的结果或错误详情。data：实际的数据，如果有的话。在这个类中定义失败和成功的返回格式@Data//设置默认值200，表示“成功”resultData.setMsg("成功");​​​18、你在开发前端过程用到了什么组件（你对前端的看法）Pinia ：新一代状态管理工具，是 Vue 的存储库，它允许跨组件/页面共享状态。

  • php的优秀案例,单页Web设计优秀案例_php

    单页网站设计正快速成为web应用开发标准，单页网站是指只有一个页面的网站，这种形式的网站曾经非常流行，但并不是每个网站都适合做成单页。很多开发者的作品集网站会设计成单页网站，在内容很少而需要追求创意的...

  • 单页Web设计优秀案例

    单页网站设计正快速成为Web应用开发标准，单页网站是指只有一个页面的网站，这种形式的网站曾经非常流行，但并不是每个网站都适合做成单页。很多开发者的作品集网站会设计成单页网站，在内容很少而需要追求创意的...

  • 前端进阶 & 面试必备，优质资源、好文整理分享！

    前言 前端技术日新月异，随着 大前端 的趋势，想要成为一名合格的前端工程师，需要学习掌握的东西更是宽泛。...闲话少说，这次给大家整理分享一些前端进阶的优质学习资源，希望对大家有所帮助！ 个人博客地址

  • 15个用于React，Angular和Vue.js的最佳现代JavaScript管理模板

    使用这些功能强大的管理模板之一，可以减轻您的下一个前端应用程序构建的负担。 无论您是喜欢使用React，Angular还是Vue.js， ThemeForest上都有一系列可用的模板，可以轻松创建漂亮的交互式UI。 这些模板使用最...

  • 顶级项目管理工具 Top 10

    我说速度是因为Asana是精心设计的单页应用程序的一个很好的例子。一切都是在你点击的那一刻瞬间发生的，当你在匆忙（压力下）做事时，这样会很方便。 以下是Asana的一些值得注意的功能： 工作量：   工作负载( ...

  • 60分钟企业经营战略

    后来又加入“快速阅读”这项事业中，不到6月，我的关于“快速阅读”的书籍《你能读得比现在快１０倍》（森林出版社）就热卖了２３万册。   到书店的学习书籍区看一下，题目中含有“１０倍”字样的书摆得满满...

  • 双十二大前端工程师读书清单

    本文最早为双十一而作，原标题“双 11 大前端工程师读书清单”，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊...发布完本次 Chat 预告后，捕捉到了一个友善的吐槽：“读书清单也要收费？”。的确，只是一...

  • Vue.js入门指南：从基础到进阶，掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)

    在本篇博客中，我们将带您逐步了解Vue.js，从入门到进阶，全面掌握这个现代JavaScript框架的核心概念和高级特性。我们将从Vue.js的基础安装和"Hello World"开始，逐步深入到模板语法、数据绑定、组件化开发、常用...

  • 全栈工程师指南

    这是一本不止于全栈工程师的学习手册，它也包含了如何成为一个 Growth Hacker 的知识。 全栈工程师是未来 谨以此文献给每一个为成为优秀全栈工程师奋斗的人。 技术在过去的几十年里进步很快，也将在未来的几...

  • Angular.js

    Auth0 出的优质教程，教你如何用 Angular.js 开发一个基于 Electron 的桌面应用 用 Docker 搭建 Angular 前端应用 最佳 Docker 实践 Using Angular 1.x With ES6 and Webpack new workflow for Angular 1.x ...

  • Top 10 顶级项目管理工具

    不，这不是标题党(clickbait) —— 我已经看到两家软件公司（我在那里工作）因为项目管理不善而在1 - 2年内濒临破产，其他一些人看到他们的产品发布推迟了几个月。虽然我同意，与其他大多数学科一样，项目管理中也有...

  • Dan Abramov 访谈实录

    译者注：本译文是在「在线对话 React.js 核心开发者」一个半小时直播的基础上进行的原文翻译，包括了直播中的所有问答内容，尽可能保留了 Dan 回答的中心语义，部分表达为了语句通顺、方...

  • 效率丨顶级项目管理工具 Top10

    不，这不是标题党(clickbait) —— 我已经看到两家软件公司（我在那里工作）因为项目管理不善而在1 - 2年内濒临破产，其他一些人看到他们的产品发布推迟了几个月。虽然我同意，与其他大多数学科一样，项目管理中也有...

  • 赤手空拳如何成就百万富翁？ 赤手空拳如何成就百万富翁？——网络营销之七（第四招：百度文库+)...

    （当个包工头，成为今天的“百万富翁”，这个一点不稀奇，我的几个中学同学就是，刚开放，当个“万元户”都了不起！）<wbr></wbr> 　如果这个美国青年是这个样子，我可能就不用往下写了，智商与你我一样，是不是太...

  • 基于Maxwell设计的经典280W 4025RPM高效率科尔摩根12极39槽TBM无框力矩电机：生产与学习双重应用案例,基于Maxwell设计的经典280W高转速科尔摩根TBM无框力矩电机：7615

    基于Maxwell设计的经典280W 4025RPM高效率科尔摩根12极39槽TBM无框力矩电机：生产与学习双重应用案例,基于Maxwell设计的经典280W高转速科尔摩根TBM无框力矩电机：7615系列案例解析与应用实践,基于maxwwell设计的经典280W，4025RPM 内转子 科尔摩根 12极39槽 TBM无框力矩电机，7615系列。 该案例可用于生产，或者学习用，（157） ,maxwell设计; 280W; 4025RPM内转子; 科尔摩根; 12极39槽TBM无框力矩电机; 7615系列; 生产/学习用。,基于Maxwell设计，高功率280W 12极39槽TBM无框力矩电机：生产与学习双用途案例

  • 基于碳交易的微网优化模型的Matlab设计与实现策略分析,基于碳交易的微网优化模型的Matlab设计与实现探讨,考虑碳交易的微网优化模型matlab ,考虑碳交易; 微网优化模型; MATLAB;,基

    基于碳交易的微网优化模型的Matlab设计与实现策略分析,基于碳交易的微网优化模型的Matlab设计与实现探讨,考虑碳交易的微网优化模型matlab ,考虑碳交易; 微网优化模型; MATLAB;,基于Matlab的碳交易微网优化模型研究

Global site tag (gtag.js) - Google Analytics