当前位置: 网站建设 > 网页设计 > 建站经验 >

网页设计技巧 网页表单设计经验分享

时间:2013-03-02 04:13来源:未知 作者:admin 点击:

标签:网页设计技巧 网页表单设计经验分享 经验(30)事实(3)技巧(106)明摆着(1)设计(106)表单(17)分享(42)网页(168)网页设计(881)
事实明摆着你可以选择一个将来时间,结果出现了幽默的反响,恩,不太好。 Tag:教训 分享 设计 技能 网页 网页设计 经验 分享 设计 技巧 网页 网页设计 译者注:我是彻底信任作者就是学神经学的,人老是某方面有问题的时候就是学习这方面货色。语句前后不通,无图无示例,生涩难懂,只能以为是英文中的文言文了,又是坑爹的一段,折腾逝世我了!阿门阿门。 大部分用户不是盲打,在用户测试中,我们可以看到人在输入内容时候都要看键盘。 我好想听到你在叫嚷了:你可以直接在数字文本框中键入数值
网页设计技巧 网页表单设计经验分享》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234N42013.htm

事实明摆着你可以选择一个将来时间,结果出现了幽默的反响,恩,不太好。

Tag:教训   分享  ,网页设计技巧 创建网页背景材质的方法; 设计   技能   网页   网页设计     经验   分享   设计   技巧   网页   网页设计    

译者注:我是彻底信任作者就是学神经学的,人老是某方面有问题的时候就是学习这方面货色。语句前后不通,无图无示例,生涩难懂,只能以为是英文中的文言文了,又是坑爹的一段,折腾逝世我了!阿门阿门。

大部分用户不是盲打,在用户测试中,我们可以看到人在输入内容时候都要看键盘。

我好想听到你在叫嚷了:你可以直接在数字文本框中键入数值啊。是的,你可以,但是,让我们看看浏览器的显示,向上向下的微调箭头使得文本框长得很像我们信任的友人(下拉)选择框。首次使用微调交互的用户(因为长得像下拉框)认为他们不能键入(内容)。

你会惊奇到底有多少相称粗暴的错误新闻出现在这里或那里。

我之前是学神经迷信的,因此研讨过心理学记忆——特殊是短期和工作记忆。现在当面告诉你,不,短期记忆能力不是7+/-2, 4+/-1或是人说三五句话,作为人类的我们擅于处理视觉刺激,局限是数目越小我们做得越好。将表单块分成更小的组可以让评估更容易,往往促使用户进入表单(的东西)来自他们的记忆。

“必填选项的概念类似于离线概念”,我想可能意思指:我们平时访问网页,基本上都是处于在线状况(虽然HTML5有离线访问)(我们没有必要专门在页面上弄个符号(eg. ※)表现当前页面在线),因此,对于网页而言,离线这个概念就意思不大;同样的,表单选项基本上都是需要填写的,特地的使用某个符号标示这个必填的也是多此一举没有多粗心义的概念。

下图为译者的弥补截图:

你知道小星号(*)就表示必填字段?我已经见过很屡次因为这个用户测试失败。作为概念来讲,必填字段没有多大意义,等同离线(这个概念)。对于开发者,这个是很好的,他们提供了一个很好的黑白方式去完成。星号以及必填字段(导致表单完成)失败是因为他是个需要学习的行为。在用户测试中我看到的典范行为是用户在(表单)上面填写表单,结束于某个东西阻止他们时候或者他们碰了某个按钮。

8. 不要在表单中使用垂直分栏(列)

下面很简略例子。输入货泉值。用户可能犯很重大的过错。迫使用户满意某种特定的格局会让用户懊丧,让我们来正视它,这是开发人员这边的偷懒(译者:作者应该认为,对于开发人员而言,匹配固定格式比各种情势都匹配要轻松些,因此,迫使用户知足特定格式是开发人员的一点怠惰)。

因此,作者所说的“短期记忆能力不是7+/-2, 4+/-1或是人说三五句话”是指短期记忆不(只)是用来记住计算值(基于语音1,心中有声音),或是刚说过的几句话(基于语音1,嘴巴有声音),还包括人类善于的视觉加工处理(视空图像处理2),但是不足在于数目有限制,下面这个例子有助于理解这里所说的限制:

我已经做过上百个表单用户测试,为保险公司、假期预订交互设计过一些十分庞杂的表单,以及其余很多。可能你最近使用的某个表单就是我设计的。

不要假设用户通过标签拜访表单,而因此以列的形式导航表单。在用户测试中,这种情况是常见的。大部分情形下,我们看到的是:输入细节,使用鼠标/触控板/手指导击进入下一个字段,然后再输入内容,等~~

你作为用户将心比心想一下,作为用户,看到这个毛病提醒会有什么反映。恼火?或者更蹩脚。亲热友善是轻易的。

电话号码就使用一个字段,同样的,门牌号/街道什么的都是如斯 – 只使用一个文本输入框。。

3. 只有一种按钮类型或最好每个表单就一个按钮

我们也许过多地站在开发者以及软件测试人员的角度去对待表单设计了,网页设计必备的10个SEO小提示,如上面提到的“开发者的黑白方法”,因为我自己也是开发者,所以对于“星号是必填,没有星号选填”很容易理解,但是,实际用户是这种思维习惯,是这样想的吗,网页设计心得 把导航系统做薄?软件测试人员也是作为极其作恶用户(非上面提到的优质用户)去使用表单,一些站在本身角度的认知确实会让我们对表单有经久的错误意识。

这可能是我给出的最直接的提议,但常常是应用率最低的。

与设计师一样,表单也是开发人员的工艺品。了解输入数据可能涌现的错误以及设计敷衍的后端代码是一项挑战(译者:算是对开发人员的赞成,有戴高帽子之嫌,哈哈)。

当初有两个问题。首先,阅读器默认显示的小三角真不是个别的小,网页设计度量单位的比较,点击很繁琐,你还可以设想加菲猫般的手指在iPhone上挣扎的情景。这就是所谓的费茨规律 (Fitt’s Law, 人机交互主要法令,其最基础的观点就是任何时候,当一个人用鼠标来挪动鼠标指针时,屏幕上的目标的某些特点会使得点击变得轻松或者艰苦。目的离的越远,达到就越是吃力。目标越小,就越难点中),越小的东西越难点中。

我的倡议是避开知道它们(指微调表单元素)变得更广泛,或者浏览器开发者整改默认设计。

再次示例:

输入日期确切是个挑战,有些缺点你可以防止。单一的最大问题是错误的处理。

最简单的办法是浮出日历。值得注意的是在英国一周开始于星期一,而在美国则是星期天。假如你的用户注意力不集中,他们可能选择星期天,而实际上他们本想选择礼拜一的,网页设计常见8大问题解答

请确保你的字段组长度大概为4。

你可以通过帮助你的优质用户做取舍来帮助他们。让所有的基本按钮都是一个色彩,每页都只有一个按钮(非根本按钮)来帮助他们做抉择。哪个按钮是我应该点击的呢?哦,很简单嘛,那个大大的色色的按钮!

这就是为什么最好使用挑选框。

类似于注意的中枢系统。重要用于调配留神资源,节制加工过程。

下图为译者补充截图(还是企鹅微博注册页):

6. 日期是个不循分的家伙

译者注:我眼泪都要飙出来了,作者大人你果然很腹黑,怎么只指出问题啊?如何解决完美,以及如何避免至少也要提一下嘛。

HTML5近来东风自得,其供给了许多足以亮瞎双眼的工具用来把玩。我们需要好好思考我们的新玩具是否切当。现在的数字字段(指相似type=“number”的input框)都提供了小小的高低小尖角运行用户往返调数值。

见下图:

7. 表单是开发者的工艺品

对于开发人员而言,不什么挑战好过构建防弹表单(指防备能力很强的表单)了。

本着服务民众的精力,我依据本人的懂得把这段具体说明下:首先要大抵晓得这里的“短期记忆(short-term memory, STM)”是什么东西,1974年,“短期记忆”概念被“工作记忆(working memory, WM)”所取代。工作记忆指的是一个容量有限的体系,用来临时坚持和存储信息,是知觉、长时记忆和动作之间的接口,因而是思维进程的一个基本支持构造。

以上为翻译全文,作者貌似是个英国佬,不安分守己的语句以及一些不太懂的英式风趣可苦了我了。至此,结束,感激浏览。

9. 一个输入框可以搞定的时候就不要使用两个

至于最后的用户表单实现终止我想可能只指:对于大部分畸形使用用户,其表单填写行动终止为被动阻拦或自动点击按钮。所谓被动阻止,可能包括即时的错误提交;主动点击按钮可能包括点击按钮提交等。为寻找案例,我去了企鹅微博绑定注册页面,发明,其表单所以选项都没有必填字段的提示,所有的必填提示均出现在表单提交之时(即“用户触碰了某个按钮”“某些事件的阻止”),这些都是我比拟赞成的——相对照于有些落后(指注册交互)的携程、点评之类,例如携程注册每项都必填,红色星号显然过剩;为空必填即时提示容易中止用户操作,实际是稍稍落伍于趋势可以进一步优化的体验。

译者注:作者又在说些有的没的的,唉~~ 实际上作者意思应该是:我们要赞助用户(站在用户角度,自己作为用户)发问,同时,显示告诉用户想知道的谜底。

有很多设计糟糕的表单,不论你是否爱好他们,表单都是必不可少的。Joe Leech(cxpartners负责用户体验的)将先容其在表单设计上的一些经验。

基于语音的语音环。主要用于记住词的次序。

5. 想想你为何对某事抱有疑难,对于用户感觉又如何

还有一个鲜为人知的心理学原理,叫做“希克法则(Hick’s Law)”,基本观点是入选项增长时,人们下决议的时光就会增加。我知道,这不是rocket science(片子,是对于青春期焦急的笑剧佳作),但仍是值得铭刻于心的规矩。

还是一个艰巨的提问,然而盼望我们尝到了药丸的甜头。

我们可以通过告知我们的优质用户我们为何需要问那样的问题再辅助它们。释怀的应用跟数据共享通常都是好的。

10. 友善点

同样需要注意的是国际日期的格式。在美国,最开始的是月份,而在日本,最前面的是年份。因此,日期4/5/12可以以三种方式解释。

在表单中使用列的最大问题是流动。表单开端于上面,停止语底部,而列的呈现会攻破这种流动。

当要往表单中输入电话号码的时候,会要求增添区号和电话号码,哦,问题来了。用户看不到,或确实记不住这儿有两个输入框,成果第一个框输入了完全数字,如果这个文本框制约了一定数目标字符限度,问题就更糟了。

4. 大块区域

译者注:我想这部门应该是写给开发职员看的吧,意思是说,为了更好的用户休会,你们开发人员不要偷勤,要多辛劳点。而后再用“构建固若金汤的表单”是很有挑衅很有成绩感的事来鼓励开发人员~~

 

2. 不要使用微调

解决方式很简单,可选字段标记,优质用户需要驻足思考是否要填写的字段处标记。

译者注:从原文评论来看,这一段是争议很大的一个处所:是必填字段标记呢仍是非必填字段标记?

下面两张截图以腾讯微博注册页面为例分辨演示:禁止用户填写表单的事件,以及“不标记必填字段”。

--> [网站建设之]网页设计技巧:网页表单设计经验分享

这里所有字段都是必填的

1. 不要标志必填字段

估量没有什么比表单更让设计师出气了。表单不一定可以让(设计师)表示创意,还是可以?我们可能需要从做基本的层面,从新审阅表单,理解表单——表单是用户和软件之间的对话。

良多业务需要问问题,作为设计师的我们可以争得面红耳赤(原文说的是争得脸都蓝了)。有必要提这样的问题,对懂得咱们的业务须要这样能够让我们让步的数据(译者:我想应当指问问题得到的数据)。

下面这些经验教训,我愿望在我开始设计表单事先先学会之。

本文作者语法以及用词上有些怪怪的,加上缺乏必要的示例,所以这段译文(固然中文)理解起来并不顺溜,我个人感到作者的论断应该是准确与公道的(究竟做过大批实际用户使用的测试,比设计师或开发者的冥想要靠谱多),但是,在起因的论述上显得薄弱了点,也可能是由于自己(指译者)这方面了解不深。依照作者的解释,单纯使用(红色的*)星号标注必填字段有必定的学习本钱,会让用户有学习累赘,反而增添犯错多少率。

我折腾了一个图片(如下,点击可以查看超大图),它包括有更多的最佳实际方法,以设计出更好的表单。

忘掉切换啊,点击什么的,表单是我们数字设计师(我想应该是依附盘算机进行设计的设计人员)将面临的最富有的交互。下一次,你要凑合一个表单的时候,不要认为就是要利用难看的CSS后果或是增加美丽的jQuery殊效。表单设计的水是很深的。

因此,作者才请求表单块状区域化(便于视觉记忆 – 短期记忆),同时把持数量在4个左右(多了会超越工作记忆的才能)。

拿回想一个新的七位数的电话号码举例。对大多数人来说,它通常只有六到七个数字。换句话说,工作记忆的能力是有限的。某些脑伤害的病人除了他们听到的最后一个字母外,别的一律回忆不起来,但他们的意识却正常。

视空图像处置器。重要用于加工视觉和空间信息。

下面是我最近遇到的一个例子:

Baddeley提出的工作记忆包含三个局部:

质疑你提出的每个问题。有必要吗?那是什么感到要问这个?

 


(责任编辑:网站建设)
网页设计技巧 网页表单设计经验分享相关文章
上一篇:网页设计技巧 创建网页背景材质的方法 下一篇:网页设计技巧之面包屑设计
回到顶部