`
zzhonghe
  • 浏览: 249397 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

GUI设计理念《Don't Make me Think》笔记

阅读更多
第一章:

最有用的一个定律就是这个书名,不要让用户思考,这是做界面最最基本的原则。具体实施会包括许多许多细节,比如图片的暗示,口号,布局,心理研究,习惯用法 等等。

事实上,很多地方都可能会强迫用户去思考:

1.长得不太像按钮的,类似按钮控件
2.搜索框中,过多的选择,或者下拉框
3.前后不一致的描述,让用户疑惑

终极目标就是要让界面做到不言而喻的效果,如果做不到,那也至少能够引导学习,自我解释

所以,我们所设计的界面,首先要有明确的目标,那就是期望用户在网站上做什么操作, 然后就是提供这些操作,最后就是采用合适的界面方式,引导用户来做这些操作。



用户的Web使用方式:
实际上用户在使用Web页面的时候,都是采用一种扫描的方式,告诉的略过一些点,收集部分知识,然后依据目标做出点击的判断。而优秀网页的目标,就是为了让用户在这简短的刹那间,能够捕获到正确的信息,然后做出正确的判断,或者说是引导用户进入我我们所设计的下一步流程当中来。


很多用户对于网页的使用态度,就是能够勉强应付即可, 如果勉强能够应付,就不愿意再去花时间寻找更好的方法,所以,设计的目标就是要让用户在第一时间,找到最正确的使用方法。


网站的设计,是为了扫描而设计的,而不是为了阅读而设计的,就像是一个广告牌一样


设计原则:

1.建立清楚的视觉层次 (字体,越重要越突出来;逻辑相关的部分,视觉也相关,逻辑包含的部分,视觉上嵌套, 这其实就是一种暗示的方法,并且迎合了人们善于分解的习惯)
2.采用习惯用法
3.把页面分成明确定义的区域
4.明显的标记出那些可以点击的地方
5.降低视觉噪声的干扰



选项要明确:
1.对于只有一个选项的单选按钮radio,或者是不能改变的checkbox,都需要坚决避免。因为容易让用户误解,并让其花费相当多的时间去思考。
2.多个选项后面,最后加上一个other,或者none,或者其他选项,确保用户不理解其他选项的时候,能够理解这一个。
3.真正二选一,用户必须做出选择的时候,要给出充分的说明



省略不必要的文字
这个设计目标就是要保持口号响亮,言简意赅。保证说明性的文字,不拖泥带水,只写用户需要做的。
可省略的部分有:
1.欢迎性文字
2.指示说明性的问题,也可以砍掉


导航:

导航分5部分:
1.站点的ID,logo,Home标签,等能够让用户随时回到起点
2.菜单,分类索引,能够让用户找到目标信息  Tab
3.导航条,让用户清楚地地知道自身所处在的位置  --> A --> B -->C
4.设计搜索栏目,这是一种是用习惯,信息量大的网站,必须要搜索栏,而且必须是全文检索
5.适用的用具,比如FQA,How等等,contact us, job, transport等


大部分的页面都需要有这样的导航,不同页面里面,其中导航的元素可以适当增减。
1.ID在所有的页面上都必须要有
2.表单栏目上,填完就关闭的网页,可能只需要有一个logo, ID就可以。


低层次的导航策略:
1.低层次的页面指具体的信息页面,他的标志文字,或者名称,必须是上一级用以进行点击的链接的文字, 这样做是为了保持一致性
2.每个页面都需要有一个名称,并且这个名称必须出现在显眼的位置,合适的位置
3.名称必须和点击的链接保持一致
4.要有指示器,也作为面包屑的一部分


适用标签构建一二级导航菜单;
Tab是很多人的一种习惯用法,就和现实中的书签一样
初始化的时候,应该有一个Tab页面时在选中状态的



后备箱测试(可用性测试的一部分)
1.你知道这是什么网站吗
2.你所在的网页名称是什么
3.页面主要的栏目有哪些
4.接下来你可以做什么
5.你在网站中的什么位置
6.你可以搜索吗



主页的目标:
主页的目标是让用户明白这个网站是做什么的,吸引用户眼球,并且告诉用户,引导怎么开始去做。
放置太多的内容,反而会妨碍到这个目标的实现


主页必须包括的内容:

LogoId, 欢迎广告(口号,导读),栏目,搜索 (注册,登录), 适用工具(contack,privacy policy,job, team等,最下或者最上)

主页的可选内容:

功能推荐,内容推荐,快捷方式,友情链接,内容更新




欢迎广告:

突出口号的力量,
简介,采用why,how, Plus,避免冗长的文字
表现意图(购买,还是浏览信息)
引用外部评价的方式


要点:
使命陈述不是广告:  XX公司是提供世界一流的解决方案..
采用用户可用性测试,回达几个问题, 测试主页的目标是否达到


下拉框不要轻易在页面上适用,缺点在于:
1.不容易找
2.难以被扫描到
3.不好控制,稍微长一点内容的下拉框就等于是无效的下拉框(采用combox来避免这个问题)





界面好感问题:

降低好感的方式:

1.隐藏了用户想看的信息,或者是不及时更新相关信息
2.设计了复杂的规则,并给予惩罚(对密码的要求,既要数字,也有字母,还要一个大写,另外还要有一个符号,长度超多8)
3.询问了不必要的信息,或者是敏感信息
4.敷衍欺骗,比如每次都采用固定程序回复,你的来信很重要,我们正在考虑。确一直没有答复
5.布局不好 (之前说的那些要素没有做到)


增加好感的方式:
1.明确用户能做什么,怎么做
2.告诉想知道的
3.减少步骤
4.给予提问解答的机会
5.协助,提供友好打印页面
6.从错误中恢复的机制: 跳回首页
7.给用户增加的麻烦,而无能为力,必须及时道歉




外观很专业,有表现力,吸引人是必须的, 但是让人感动,有动画,有音效,花哨确不是必须的,出来一些娱乐网站








分享到:
评论

相关推荐

    don't make me think 英文版

    《不让我思考:一种关于网页可用性的常识方法》是由Steve Krug撰写的经典著作,旨在为网页设计者提供实用且易于理解的指导原则。本书首次出版后受到了广泛好评,并在第二版中进一步扩展和完善了其内容。作者Steve ...

    MATLAB GUI设计学习笔记2+程序3

    MATLAB GUI设计学习笔记的第二版和第三版是深入理解并掌握MATLAB GUI开发的宝贵资源。PDF文档可能包含了GUI设计的基本概念、组件使用、事件处理、数据交换、布局管理等方面的内容。通过学习这些笔记,你可以了解到...

    Quest3d GUI设计笔记

    Quest3d GUI 设计笔记 Quest3d 是一款功能强大的 3D 模型设计软件,具有强大的 GUI 设计能力。本笔记将介绍 Quest3d 软件的 GUI 设计,包括常用的 Channel、设计方法、GUI 元素、GUI Container、GUI Skin 等方面的...

    MATLAB GUI设计学习手记(第2版)_matlab_GUI_

    MATLAB GUI设计学习是计算机编程领域的一个重要分支,特别是在科学计算和数据分析中有着广泛的应用。MATLAB(矩阵实验室)是一种高级编程环境,它允许用户通过交互式的图形用户界面(GUI)来开发应用程序,使得非...

    matlab GUI设计学习笔记.iso

    matlab GUI设计学习笔记.iso

    MATLABGUI设计总结-matlab gui 设计总结.doc

    MATLABGUI设计总结-matlab gui 设计总结.doc 最近做毕业设计用到GUI,搜集到了很多资料,现在传上来,和大家一起分亨。 一.10个小问题 二.MATLAB GUI编程中几个有用的程序段 1、 启动 2、 在GUI中使用Axes控件...

    GUI界面设计范例

    GUI(图形用户界面)设计是IT领域中至关重要的一部分,它涉及到如何创建用户友好的、直观的软件交互方式。本范例主要关注MATLAB环境下的GUI设计,这在电信课程设计中是一个常见的话题,因为MATLAB提供了强大的图形和...

    matlab gui设计学习手记

    《MATLAB GUI设计学习手记(第2版)》在第1版的基础上,完善了全书知识结构,突出了gui设计重点,对读者经常遇到的38个问题作了透彻的解答,并提炼出13个专题作了详尽的介绍,最后配以长达17.5小时的免费视频教程对书...

    java gui学习笔记

    首先,GUI界面设计通常涉及各种组件,如按钮(Buttons)、菜单项(MenuItems)、文本字段(TextFields)等。这些组件可以通过继承自JComponent的类来实现,例如JButton、JLabel、JTextArea等。在提供的代码片段中,...

    MATLAB GUI设计学习手记 全本

    《MATLAB GUI设计学习手记》全本是罗华飞编著的一本深入浅出的教学图书,以丰富的实例和详尽的解释帮助读者掌握MATLAB图形用户界面(GUI)设计的方方面面。本书历经修订,其第二版相较于第一版内容更为全面和完善,...

    GUI设计禁忌2.0

    GUI设计禁忌 《结网》推荐,网页设计、页面设计必读!

    MATLAB GUI设计教程

    压缩包中的`.wmv`文件很可能是MATLAB GUI设计的视频教程,包括`matlab_GUI_6.wmv`至`matlab_GUI_2.wmv`,这些资源将逐步展示GUI设计的各个步骤,从基础概念到实际操作,帮助学习者更好地理解和掌握MATLAB GUI设计。...

    MATLAB GUI设计学习手记(第二版)源程序

    本压缩包文件“MATLAB GUI设计学习手记(第二版)源程序”提供了关于MATLAB GUI设计的实例代码和教程,对于想要深入学习MATLAB GUI编程的用户来说,是一份宝贵的资源。 MATLAB GUI设计涉及多个方面,包括组件使用、...

    javagui个人笔记.txt

    个人对学习gui之后的大概笔记主要是针对我自己的学习和理解,有错误的地方望指正

    MATLAB GUI编程 MATLAB中GUI设计领悟 GUI设计知识要点总结整理 共14页.pdf

    MATLAB GUI 编程设计要点总结 MATLAB GUI 编程是 MATLAB 中的一种重要应用,用于设计和开发图形用户界面(GUI)。本文总结了 MATLAB GUI 设计的要点,包括数据传递、GUI 设计、前台和后台设计等。 一、背景介绍 ...

    基于MATLAB GUI设计的数字滤波器设计

    在本文中,我们将深入探讨如何使用MATLAB GUI(图形用户界面)来设计数字滤波器。MATLAB,全称为“矩阵实验室”,是一个强大的数学计算软件,广泛应用于工程、科学和数学领域,尤其在数字信号处理方面表现突出。GUI...

    Java GUI程序设计.pdf

    Java GUI程序设计

    读《MATLABGUI设计学习笔记》的体会.pdf

    《MATLAB GUI设计学习笔记》是一本深入浅出的教程,专为想要提升MATLAB图形用户界面(GUI)设计技能的读者而准备。MATLAB是一种强大的编程环境,尤其适合数值计算和数据分析,而GUI设计则使得用户能通过交互式界面更...

    GUI设计的一般步骤

    GUI设计的一般步骤,很好,能给大家带来帮助,希望大家多多学习,谢谢!!

Global site tag (gtag.js) - Google Analytics