网站设计的“该做”和“不该做”的事情

网页设计是一个棘手的问题。在创建网站时,你需要考虑很多事情。为了简化这个任务,我准备了一份清单,列出了每个web设计者应该考虑的原则和不该做的原则。好消息是它们都是简单的原则。

让我们开始吧!


1。不管设备是什么,都提供类似的体验

访问者会使用多种不同的设备来访问你的网站:他们可以访问你的网站或笔记本电脑、平板电脑、手机、音乐播放器甚至手表。用户体验设计的一个重要组成部分是确保无论访问者如何看待你的网站,他们都应该有类似的体验,不管他们使用的是什么设备。


如果一个访客在他们的手机上看到你的网站,他们应该能够找到他们所需要的一切,而不需要麻烦,就像他们在家里的桌面上浏览你的网站一样。

2。设计简单易用的清晰的导航

导航是可用性的基础。记住,如果用户无法找到自己的网站,那么你的网站有多好也无关紧要。这就是为什么你的网站上的导航应该是:

•简单(每个站点都应该有最简单的结构)

•清除(导航选项对于访问者来说是不言而喻的)

•一致的(主页的导航系统在每个页面上都应该是相同的)

设计你的导航,让访问者尽可能少的点击,同时还能很容易地浏览和定位他们需要去的地方。

3。更改访问链接的颜色

链接是这个导航过程中的一个关键因素。当访问链接不改变颜色时,用户可能会无意中再次访问相同的页面。

了解你的过去和现在的位置会让你更容易决定下一步去哪里。


4。让你的页面更容易浏览

当用户访问你的网站时,他们更有可能快速浏览屏幕,而不是阅读所有的内容。因此,如果一个访问者想要找到内容或者完成一个任务,他们就会扫描,直到找到他们需要去的地方。作为一名设计师,你可以通过设计好的视觉层次来帮助他们。可视层次结构指的是元素的排列或表示方式,其含义是重要的(例如,它们的眼睛应该首先关注,其次,等等)。

做一些重要的事情,比如屏幕标题、登录表单、导航条目或其他重要内容,这样访问者就能马上看到。



5。仔细检查所有的链接

当用户单击站点上的链接并收到404错误页面时,很容易感到沮丧。当访问者在搜索内容时,他们希望每一个链接都能把他们带到他们所说的内容,而不会出现404错误或他们没有预料到的其他地方。


6。确保可点击的元素看起来像一个

对象的外观如何告诉用户如何使用它。视觉元素看起来像是链接或按钮,但不是可点击的(即没有链接的下划线的单词,有调用动作但没有超链接的元素)很容易让用户感到迷惑。用户需要知道页面的哪些区域是普通的静态内容,哪些区域是可点击的(或可点击的)。


动物园的攀爬:橙色的盒子是一个按钮吗?答案是:没有。形状和标签使元素看起来像一个按钮,而不是。


不做

1。让你的访问者等待内容载入

网络用户的注意力广度和耐心都非常小。根据NNGroup研究:

10秒是让用户的注意力集中在一个任务上的限制

当访问者不得不等待你的站点加载时,他们会变得很沮丧,并且很有可能离开你的站点,如果它的加载速度不够快的话。即使是设计最精美的加载指示器,如果加载时间太长,也会迫使用户离开站点。

2。在新标签页打开链接

这种粗鲁的行为将禁用后退按钮,这是用户返回以前站点的正常方式。


3。让广告推广来抢戏

促销和广告会让他们的内容失色,让用户更难完成任务。并不是说任何看起来像广告的东西都被用户忽视了(这种现象被称为“横幅盲”)。


4。劫持滚动

滚动劫持是指设计人员/开发人员在他们的网站上操纵滚动条的行为。这可以包括动画效果,固定的滚动点,甚至是对滚动条本身的重新设计。对于许多用户来说,被劫持的滚动是最让人讨厌的事情之一,因为它可以控制他们。当你设计一个网站或用户界面时,你想让用户通过网站或应用程序来控制他们的浏览和移动。


Mac Pro页面使用了一些令人讨厌的滚动效果。它使用单页视差布局,用点表示页面的每个部分。

5。自动播放视频和声音

在后台自动播放视频、音乐或声音会刺激用户。这些元素应该谨慎使用,只有在适当和预期的情况下才可以使用。


Facebook的视频被设置为自动播放,但是没有声音会出现,除非用户在某种程度上暗示他们正在观看视频(例如通过与视频互动)。


6。为了美观而牺牲可用性

网站或用户界面的设计永远不应该影响用户在屏幕上消费内容的能力。重要的是避免在内容后面有繁忙的背景,糟糕的颜色方案会阻碍网站的可读性或者颜色对比度不够(比如下面的例子)。



字体的低对比度一直是个坏主意。

7。使用闪烁的文本和广告




文  ||  Pi_VISION

2017年10月31日

365无戒训练挑战营 第七天

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,053评论 25 707
  • 专业人员用一套规范去评估产品。 原则:尼尔森10原则,尼尔森扩展原则,首页可用性原则,八项黄金法则,hhs网页设计...
    Asherdon阅读 2,377评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • 愚人节 ——我爱你 ——哈哈哈,想套路我!?
    葬爱家族双刀小蛇王阅读 173评论 0 0
  • 今天是开学的第六天,今天也要军训汇报展演,今天下午就进行了军训汇报展演。 第一项教官先进行示范,教...
    初二13李佳阳阅读 414评论 0 1