`

web原则

 
阅读更多
I should never have to devote a millisecond of thought to whether things are clickable—or not.

I could list dozens of other things that visitors to a site shouldn’t spend their time thinking about, like:
> Where am I?
> Where should I begin?
> Where did they put _____?
> What are the most important things on this page?
> Why did they call it that?

If you want to design effective Web pages, though, you have to learn to live with three facts about real-world Web use.

FACT OF LIFE #1:
We don’t read pages. We scan them.

FACT OF LIFE #2:
We don’t make optimal choices. We satisfice.

FACT OF LIFE #3:
We don’t figure out how things work.We muddle through.

> Create a clear visual hierarchy on each page
> Take advantage of conventions
> Break pages up into clearly defined areas
> Make it obvious what’s clickable
> Minimize noise.

Pages with a clear visual hierarchy have three traits:


> The more important something is, the more prominent it is.

> Things that are related logically are also related visually.

> Things are “nested” visually to show what’s part of what.


Getting rid of all those words that no one is going to read has several beneficial effects:

> It reduces the noise level of the page.
> It makes the useful content more prominent.
> It makes the pages shorter, allowing users to see more of each page
at a glance without scrolling.

Happy talk must die

Instructions must die

And now for something completely different


People won’t use your Web site if they can’t find their way around it.

Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for, and to tell us where we are. And we’ve just talked about a third:
> It gives us something to hold on to.

But navigation has some other equally important—and easily overlooked—functions:
> It tells us what’s here.

> It tells us how to use the site.

> It gives us confidence in the people who built it.

There are four things you need to know about page names:
> Every page needs a name. Just as every corner should have a street sign,every page should have a name.

> The name needs to be in the right place.

> The name needs to be prominent.

> The name needs to match what I clicked.

About.com has the best Breadcrumbs implementation I know of, and it illustrates several “best practices.”
> Put them at the top.
> Use > between levels.
> Use tiny type
> Use the words “You are here.”
> Boldface the last item.
> Don’t use them instead of a page name.

I think they’re an excellent navigation choice for large sites. Here’s why:
> They’re self-evident.
> They’re hard to miss.
> They’re slick.
> They suggest a physical space.

slavishly imitate these three key attributes:
> They were drawn correctly.
> They were color coded.
> There was a tab selected when you enter the site.

you should be able to answer these questions without hesitation:
> What site is this? (Site ID)
> What page am I on? (Page name)
> What are the major sections of this site? (Sections)
> What are my options at this level? (Local navigation)
> Where am I in the scheme of things? (“You are here” indicators)
> How can I search?

Here’s one to show you how it’s done.
1. Site ID
2. Page name
3. Sections and subsections
4. Local navigation
5. “You are here” indicator(s)
6. Search

Think about all the things the Home page has to accommodate:
> Site identity and mission.
> Site hierarchy.
> Search.
> Teases.
> Timely content.
> Deals.
> Shortcuts.
> Registration.
> Show me what I’m looking for.
> …and what I’m not looking for.
> Show me where to start.
> Establish credibility and trust.

As quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time:
What is this?
What can I do here?
What do they have here?
Why should I be here—and not somewhere else?
分享到:
评论

相关推荐

    web界面设计原则

    ### Web界面设计原则详解 #### 引言 Web界面设计是一项综合艺术与科学的技能,旨在创造既美观又实用的在线体验。良好的Web界面不仅能够吸引用户,还能引导他们高效地完成目标。本文将深入探讨Web界面设计的核心...

    什么是web2.0 Web 2.0特征Web 2.0七大原则Web 2.0的设计模式

    Web 2.0的七大原则包括: 1. 数据是网络的核心:用户生成的内容和数据驱动了Web 2.0的应用发展。 2. 使用开放标准和API:开放的协议和接口促进数据的交换和应用的互操作性。 3. 长尾理论:通过服务大量小众需求,...

    WEB交互界面设计和验收的指导性原则

    "WEB交互界面设计和验收的指导性原则" 在WEB开发过程中,交互界面的设计对用户体验的影响非常大。以下是WEB交互界面设计的一些指导性原则: 1. 输入控件的自动聚焦和可用键盘切换输入焦点:在页面加载完成后,自动...

    Web数据库设计原则 精品资料.pptx

    Web数据库设计原则 Web数据库设计原则是指在设计Web数据库时需要遵循的一些基本原则和规则,这些原则和规则的遵循可以确保Web数据库的安全、可靠、灵活和高效。Web数据库设计原则主要包括Web数据库概述、Web数据库...

    web开发必须注意的9大原则

    安全开发需要注意的9大原则,为了系统的安全,我们在开发过程中必须注意...9大安全原则分别是1web部署原则、身份认证原则、会话管理原则、权限管理原则、敏感数据保护原则、安全日志原则、输入校检原则、输出编码原则

    Web数据库设计原则.pptx

    【Web数据库设计原则】主要涉及Web数据库的基本概念、选择、连接方法以及在实际应用中的实现。以下是关于这些知识点的详细说明: 7.1 Web数据库概述: Web数据库是通过Web技术来访问和操作数据库的一种方式。它允许...

    web模板web主题web按钮

    通过学习和借鉴这些模板、主题和按钮,可以提升网页设计技能,更好地理解和掌握Web前端开发中的布局、样式和交互设计原则。总的来说,这些素材对于提升网站质量和用户体验有着显著的帮助。在实际工作中,应根据项目...

    自己学习系统架构整理出的学习笔记

    同时,你将接触到RESTful Web服务设计,这是一种更轻量级、更符合Web原则的服务设计模式,广泛用于现代API的构建。 架构解密-从分布式到微服务_PDF电子书下载 高清 带索引书签目录_Leader-us 著_电子工业出版社 (1)...

    PWAs逼近原生应用的利器Project Fug.pptx

    该项目旨在通过暴露原生平台的能力给Web平台,使Web应用能够执行原本只有原生应用才能完成的任务,而不损害核心的Web原则,如用户安全、隐私和信任。 Project Fugu通过定义新的API和功能来实现这一目标,并遵循W3C...

    侯伯薇-Web App界面设计原则与实践

    ### 侯伯薇-Web App界面设计原则与实践 #### Web App定义与区别 侯伯薇在《Web App界面设计原则与实践》中首先明确了Web App的概念:它是指那些通过浏览器进行访问的应用程序,与传统的桌面应用程序(如Winform App...

    超全的Web渗透自我学习资料合集(64篇).zip

    web渗透: web安全原则 web渗透: web渗透测试清单 web渗透: 自动化漏洞扫描 web渗透: Google Hacking web渗透: web服务器指纹识别 web渗透: 枚举web服务器应用 web渗透: 识别web应用框架 web渗透: 配置管理测试 web...

    web渗透系列教学下载共64份.zip

    web渗透--1--web安全原则.pdf web渗透--10--不安全的HTTP方法.pdf web渗透--11--登录认证安全测试.pdf web渗透--12--浏览器缓存攻击测试.pdf web渗透--13--目录遍历文件包含测试.pdf web渗透--14--目录浏览漏洞测试....

    OpenBMC WEBUI开发文档

    可访问性的原则和实践包括: * 遵守 WCAG 2.1 规范 * 验证标签顺序是否遵循应用程序的流程 * 验证键盘交互是否适用于所有元素 * 使用响应式设计来支持缩放水平 * 总是优先使用语义标记而不是 ARIA 翻译 OpenBMC ...

    Java Web设计模式之OCP(开闭原则)

    在Java Web开发中,遵循OCP原则有助于提高代码的可维护性和可复用性。以下是对这一原则的详细解释和应用实例: 1. **定义**: - 开闭原则指出,一个软件模块应当对扩展开放,即能够容易地添加新功能而不影响现有...

    分布式web技术介绍01分布式web服务框架简介 共11页.ppt

    9. 分布式 web 框架的设计原则:分布式 web 框架的设计原则包括高可用性、可靠性、可扩展性和可管理性等。 10. 分布式 web 框架的部署方式:分布式 web 框架的部署方式包括 All-Active 部署模式等。 通过了解...

    Web程序设计 第5版

    8. **API与Web服务**:了解RESTful API的设计原则,以及如何使用XMLHttpRequest或fetch API进行异步通信,是构建Web服务的关键。 9. **版本控制**:使用Git进行代码版本控制,协同开发,是现代开发流程中的必备技能...

    RESTful Web Services 中文版 高清 PDF 电子书

    综上所述,《RESTful Web Services 中文版》是一本介绍了REST原则、ROA设计、如何开发RESTful Web服务及其最佳实践的教科书,它不仅面向理论的讲解,更着重于实践指导和真实案例的分析,适合广大Web开发和架构设计...

    System.Web.Http.dll,System.Web.Http.WebHost.dll

    在.NET框架中,`System.Web.Http.dll`和`System.Web.Http.WebHost.dll`是两个非常重要的组件,它们在开发Web API应用时起着核心...通过这两个库,开发者可以轻松地构建出符合REST原则的、跨平台的、易于测试的Web服务。

Global site tag (gtag.js) - Google Analytics