麦子学院 2016-09-07 20:55
网页设计的设计原则
回复:0 查看:2392
最近在看网页设计中的经典书《点石成金》，学到了很多网页设计的原则，这里总结了一下，对
入门网页设计的小伙伴很有好处。
一、用户实际上是如何使用网站的？
作者经过大量观察发现，用户使用网站的方式与工程师设想的使用方式，差别巨大；
· 1
、我们不是阅读，而是扫描。网页设计师精心准备的文字，在用户看来，更像以每小时
100
公里的速度驶过的广告牌。
o
我们总是处于忙碌之中
o
我们知道自己不必阅读所有的内容
o
我们善于扫描，会自动忽略不需要的信息
· 2
、我们不做最佳选择，而是满意即可
o
用户很忙，没时间寻找最佳策略，而是寻找第一个合理选项（
满意策略
）
o
就算猜错了可以马上重来（刷新和倒退按钮是网页浏览里最常用的地方）
· 3
、我们不是追根问底，而是勉强应付。用户使用产品，往往对其运作原理不感兴趣（不喜欢看使用说明），甚至有错误的认识，但这不妨碍他们用得很好。
o
了解工作机制没必要。
o
如果发现某个策略有效，就一直用它，不管多难用，很少主动寻找更好的方法。（这一点我深有同感，我之前一直用Surface
自带的中文输入法
——
智能识别很烂，打字很不方便，但是只要还能用，我就懒得去下载别的输入法！）
针对这些情况，我们需要相应地做出符合用户行为特点的网站来，我们的目的是：把网站设计得快速和清晰，让它尽量的一目了然、不言而喻、自我解释，减少用户自己瞎猜瞎捉摸的时间，简而言之，“
不要让用户思考
”
。
Krug的可用性三定律是：
·
别让用户思考。
·
点击多少次都没关系，只要每次点击都是无需思考、明确无误的选择。
·
去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。
一个紧接着而来的问题是，用户最容易思考哪些问题，以及在那些地方最容易犯浑？
·
我在网页的什么位置？——
导航栏在哪？怎么回到首页？怎么去网站其他页面？
·
我该从哪开始？——
这个页面主要是什么内容？网页布局怎样？是不是眼花缭乱？
·
这个页面什么最重要？——
哪个部分最先吸引了我？
·
有哪些栏目可以选择？——
栏目清单？导航？
·
我可以点击它吗？——
有没有超链接显示、可点击标志？
·
这句话是什么意思？——
有没有太多用户不懂的术语？有没有直观演示？
你可以把这些问题用来检测网页的可用性，打开一个网站后快速看一遍，然后回答自己，这种问题自检法法十分直观有效。
二、针对扫描设计的5个方法
· 1
、在每个页面上建立清楚的视觉层次。
o
越重要的部分越突出。
o
逻辑上相关的部分视觉上也相关。
o
逻辑上包含的部分在视觉上进行嵌套。
· 2
、尽量利用习惯用法。
o
借鉴其他纸媒的习惯法。
o
借鉴主流的网页设计。
o
抑制重新发明轮子的冲动，除非它也很好上手，并且能带来很大的价值。
· 3
、把页面划分成明确定义的区域。
· 4
、明显标志可以点击的地方：如果一个东西可以点击，你要把它明确地告诉用户。
· 5
、最大限度降低干扰。
三、减少网页文字
作者引用了E.B.Whited
《风格的要素》里的一段话：
“
有力的文字都很简练。句子里不该有多余的文字，段落中不该有多余的句子。同样，画上不应有多余的线条，机器上不应该有多余的零件。
”
减少网页上的文字可以让页面更简洁，重要的内容跟突出。可以从以下几点着手：
·
消灭欢迎词。
·
精简说明文字。
·
让信息出现在它该出现的地方。
四、导航设计
可以将在超市的导航系统和网站导航系统类比，用户使用你网站，也遵循同样的过程：
·
你通常是为了寻找某个目标
·
你会决定先人工咨询还是自己先找找
·
如果自己浏览，你会去找导航系统，一层层点击
·
找到了；或者没找到，返回主页（后退键和主页非常重要），或者直接离开
网站导航的好处：
·
它告诉我们当前的位置（层级菜单）
·
它给了我们固定的感觉
·
它告诉如何浏览网站
·
它让我们对网站建造者留下好印象
在网站的不同页面，导航也不一样（比如主页和表单页），但大致的组成是一样，主要有五个部分：
· 1
、站点
ID
：表明一个网站的最基本标志，需要在每个页面出现、强化。
· 2
、栏目：主导航条（
Primary Navigation
），可进一步分出二级导航。
· 3
、实用工具：帮助我们使用站点，比如登录、注册、联系我们、帮助、搜索、主页、隐私声明等等，不要在导航条上放太多。
· 4
、主页：一个明显的可以把我们送回主页的按钮。
· 5
、搜索：搜索框要简洁醒目，如果有选项，要谨慎它本身会不会让用户产生疑惑。
其他在导航设计中用到的部分还有：层级分割的“
你在这里
”
、标签。
五、主页设计
主页主要包含：站点标志、导航、搜索、导读、内容更新、友情链接、注册登录等，主要需要肩负三大责任：传达整体形象、告知使用方法、建立用户的信用。
如何传达整体形象？
·
口号：清楚、言之有物、长度适中，不要太笼统（不要和宗旨混淆）
·
欢迎广告
主页导航可以其他页面导航不一样，它可以更大，有更多的描述。设计主页的时候，要注意合理分配版面。接下来，作者花了不少篇幅，分析了具体的主页设计的案列，很有参考性。
六、可用性测试
在网页设计中，工程师和设计师往往各持己见，工程师认为人们喜欢功能又多又酷的网站，设计师则喜欢视觉上有趣的网站，这还只是技术层面的分歧，当讨论上升到经理那儿，又有市场的要求。面对这种分歧，最好的解决办法就是做可用性测试。
除了第一章的“
问题自检法
”
，我们还需要邀请一些真实的用户来参与测试。一般来说：
·
如果想建立一个优秀的网站，一定要测试
·
测试一个用户也比不做测试好
·
早点测试好过最后测试50
位用户（越晚越难伤筋动骨）
·
测试对象是谁并不重要
·
测试时一个迭代的过程
·
没什么比现场用户的反应更重要
作者推荐了一种比较省钱省时间的测试方法：
·
招募测试对象，和对象做一些相互介绍
·
打开主页，询问对象对主页的一般印象（可用性问题）
·
让对象执行一些特定的任务，看他是不是可以按网站的设计意图来使用
·
引导对象在测试过程中说出自己每个选择背后的想法
·
测试做完后立刻回顾测试结果，并着手解决：
o
忽略皮划艇问题（用户可以自己尝试解决的问题）
o
抵制添加冲动，改为删除干扰信息
o
不要太看重人们对新功能的要求
o
抓住够得着的果子：恍然大悟型；便宜型
o
善于平衡，修改的同时不破坏已有的正常部分
七、可用性是基本礼貌
到目前为止，作者一直在论述如何让网页清晰简洁，简而言之：容易理解的程度。可用性还有另外一个重要部分：能为用户提供更多的服务。例如：
·
不要隐藏用户想知道的信息
·
不要向用户索取太多个人信息
·
不要敷衍用户
·
不要设置障碍（必须浏览很多没有必要的图片或广告）
·
减少步骤
·
容易从错误中恢复
·
及时提供解答
·
如有错误要记得道歉
·
提供其他协助服务，比如打印页面等
·
考虑一些特殊人士（盲人、左撇子）的使用习惯
o
让所有的内容都可以通过键盘访问
o
为图片增加alt
文本
原文来自：简书／仓廪一间