阅读更多

31顶
0踩

Web前端

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

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

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

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


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月,我的关于“快速阅读”的书籍《你能读得比现在快10倍》(森林出版社)就热卖了23万册。   到书店的学习书籍区看一下,题目中含有“10倍”字样的书摆得满满...

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

    本文最早为双十一而作,原标题“双 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>  如果这个美国青年是这个样子,我可能就不用往下写了,智商与你我一样,是不是太...

  • 怒肝最新保姆级前端学习路线,速成贴心全面!

    目标:实践前端优化方法,从多个方面优化自己做过的项目,最好能将优化后的网站与原网站进行对比,得到一些数据和体验上的明显提升。 ✅ 性能优化 性能指标 描述:用于衡量一个 Web 页面的性能。 资源:...

  • 白色大气风格的商务团队公司模板下载.zip

    白色大气风格的商务团队公司模板下载.zip

  • vb+access学生学籍管理系统(系统+论文+摘要与目录+实习报告)(2024p5).7z

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于计算机科学与技术等相关专业,更为适合;

Global site tag (gtag.js) - Google Analytics