site topic资讯中心
首页
>
网站学院
>
关于Web设计中导航与主页的设计原则
分享新闻到:

关于Web设计中导航与主页的设计原则

来源:      时间:2017-07-27 09:17:43      浏览:2378

最近在读Steve Krug的Don’t Make Me Think,本文基本是自己的读书笔记第二篇,拿出来做下总结和大家分享一下。想看第一篇的小伙伴,可点击查看

QQ截图20170726090452.jpg

今天的主要内容是介绍一下Web设计中导航与主页的设计原则。

以下原则主要用在开放性的门户网站中,这类网站中用户流量较大,且用户注意力极容易被分散,这时一个Web页面的瞬间识别性直接关系到用户转化率,也就显得尤为重要。

而对一些比较专业的或指定性的网站,政府网站等,用户面临缺少其他选择,网站缺少替代性的情况,以下原则可能没有前者这么性命攸关,但也同样具有相当的指导意义。

一、导航设计——街头指示牌和面包屑

1、记住一个事实 :如果在网站上找不到方向,人们会放弃使用你的网站

(1)网络导航 101 法则

人们进入站点时会遵循一个类似的过程:

(2)Web与真实世界中的差异

不论我是来闲逛还是来寻找固定内容,我能清晰地知道自己在哪,能去哪(明细分类),以及如何回去(主菜单)。

(3)导航的用途

如今我们逛一些相当成熟的购物网站(比如淘宝)的时候,甚至比在百货商厦中的感觉更清晰。我能更便捷地找到自己想要的东西。(商品分类,新品促销,其他功能。。。)

Web导航的用法基于实际导航用法,但我认为web导航现在已经实现了对现实世界导航的超越。(可快速跳转,试错成本低)

(4)只要跺三次脚,说“我要回家”

让一个“返回主页”的按钮始终可见,这一点很重要,用户可以随时(在短时间内)回到主页,可以有效地减少用户迷失方向的焦虑。

(5)提供搜索

搜索的设计要注意三点:

(6)关于页面名称

(7)你在这里——关于“面包屑”

面包屑帮你找到来时的路,其实就是级联菜单。

你能清晰的知道自己在哪,如何来的。也可以快速回去。

(8)喜欢标签(TAB)的四个理由

(9)“后备厢测试”

想象你被蒙上双眼,所在车子后备厢中,车子开动一段时间后,把你放在网站某个内容的某个页面上,你能迅速的判断出:

如果可以,说明这个页面设计良好。

这个页面设计还蛮清晰的对不对?

二、首先要承认,主页不由你控制

1. 主页的任务

2. 你还要面临的一些不利因素

3. 第一个受害者

由于上面的几个不利因素,主页很容易变得非常复杂,这时最重要的事情往往被忘记——传达整体形象

忘记整体形象的五大错误理由:

4. 如何传达整体形象

5. 没什么比得上一个好口号——Slogan

推荐几个不错的Slogan:

(1)阅读

  • 网易新闻:有态度的新闻门户

  • ONE:复杂世界里一个就够了

  • 简书:交流故事,沟通想法

  • 一席:听君一席话

  • 大眼:呈现世界精彩

(2)出行

  • 面包旅行:与世界分享你的旅行经验

  • 蝉游记:发现旅行之美

  • 旅行加:方便快捷的一站式旅行助手

  • Uber :你的专属司机

  • Airbnb台湾站:躺在山海间,睡在人情里

(3)财务

  • 支付宝:改变因我而来

  • 随手记:理财第一步

  • 挖财:爱记账 会生活

(4)购物

  • 京东:多·快·好·省(「这才是最直接最长情的告白」)

  • 手机淘宝:随时随地,想淘就淘

  • 什么值得买:高性价比产品网购推荐,值得您常来看看

(5)音乐

  • 网易云音乐:听见·好时光!

  • QQ音乐:听我想听的歌

  • 豆瓣FM:与喜欢的音乐不期而遇

  • 落网:我们记录独立音乐

(6)视频

  • 爱奇艺视频:悦享品质

  • 优酷:世界都在看

  • 迅雷看看:你的随身电影院

(7)生活

  • Kitchen Stories:anyone can cook

  • 下厨房:唯有美食与爱不可辜负

  • 美团外卖:把世界送到你手中

  • 百度外卖:我们想要给你更多

  • 饿了么:叫外卖,上饿了么

  • 百度云:云上的日子,你我共享

  • any.do:Organize anything with Any.do

  • 豆瓣:汇聚一亿人的生活趣味

(以上摘自知乎,侵删)

6. 从哪里开始?

当进入一个新的网站,快速扫描主页之后,我们应该明白无误地知道:

7. 下拉框的问题

为了节省空间,设计师常常会想方设法创造一些空间,比如……下拉框——遗憾的是,他们存在几个问题:

8. 节约主页

因为主页的内容实在太重要,所有利益相关者都想在主页加上自己的内容(分一杯羹),这样很容易造成过度使用,需要其他方法来缓解这种需求,比如其他热门页面进行推介。

今天的内容先讲到这里,有时间我会给大家分享最后几章的内容。谢谢~

作者:@M‘Shawn


在线客服
热线电话

扫一扫 加我微信
程序耗时:0.004秒