`

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交互界面设计的一些指导性原则: 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...

    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进行代码版本控制,协同开发,是现代开发流程中的必备技能...

    WebApi和访问WebApi两个项目(更新过)

    这样的设计符合面向对象的原则,提高了代码的可维护性和可扩展性。 总结起来,"WebApi和访问WebApi两个项目(更新过)"涉及到的知识点包括WebApi的基本架构、控制器设计、路由配置、模型绑定、过滤器、HttpClient的...

    Microsoft.Web.Infrastructure.rar

    软件设计原则之一就是依赖倒置,而依赖注入是实现这一原则的有效手段。Microsoft.Web.Infrastructure库支持简单但强大的依赖注入,使得对象之间的依赖关系可以通过构造函数或属性注入来解耦,提高代码的可测试性...

Global site tag (gtag.js) - Google Analytics