青岛网站建设
Hi,are you ready?

准备好开始了吗?
那就与我们取得联系吧

有一个品牌项目想和我们谈谈吗?您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话,让我们听到你的声音!

填写您的项目信息

青岛设计公司

青岛网站制作有效用户界面的实用技巧

2016.11.05

       圭谷设计已经与大家讨论过什么是用户界面,用户界面应该具备什么样的特点,以及我们可以使用的建设网站用户界面的工具,现在让我们看一些可以应用在你的网络应用或网站上的实用技术。

1.网站建设之使用空白来构建联系

       空白指在各种内容元素之间的空白区域,比如标题、正文和按钮。当在不同网站元素间建立联系时,空白是一个非常重要的工具。通过缩小元素之间的空白,能够把一些相关的项目组成一组。增加这些分组之间的空白能够更加强调这些分组与其他内容之间的联系。使用空白,我们可以分组相关的控件,也可以构建页面中元素之间的层级关系。

2.网站建设之使用圆角来定义边界

       圆角通常用来改善青岛网站建设图片元素的观感。它们看起来非常舒服,并且能够为你的网站界面增添平滑感,但这并不是圆角的全部功能。圆角通常定义一个对象的边界。当看到圆角时,你就知道已经到了容器的边界。如果是一个直角,后面再跟另一个直角的容器,它们之间的界限会不太明显。而圆角,或其他任何类似视觉上的处理,都能够让分界线变得更为明显。

3.网站建设之用颜色来表达含义

       颜色是一个重要的沟通工具,例如,定义不同的元素。你可以在网站应用程序中使用不同的颜色来区分不同青岛网站建设公司功能的按钮。红色常被用在一些表示破坏性的按钮上,诸如删除或移动;蓝色一般用在标准按钮上;绿色则用在保存和更新操作按钮上。使用代码着色,我们可以分辨出屏幕中用户创建的各种各样的数据,让它们变得更容易阅读。

4.网站建设之引导用户的注意力

       使用动画来提醒用户关注。有时候,单独使用颜色和对比度还不足以吸引用户的注意。如果一件很重要的事情发生了,你也确实需要确保用户能够注意到,那么就使用动画。人类的眼睛非常适合捕捉移动的事物,特别是在固定背景中运动物体。如果用户在他的辅助工作的应用程序中添加一条待办事项,或者向购物车中加入一件商品,这个时候就可以使用动画来突出正在发生的事情。例如,当在网站屏幕中创建一个项目的时候,可以使用高亮的效果。对于那种使用很多Ajax 技术的应用来说,这一点特别有用。在这些情况下,页面中的操作并不会导致页面的刷新,高亮的部分弹出来告诉用户发生了什么事情。

5.网站建设之使用阴影

       另外一个将用户注意力集中到某一区域的方法是使用阴影和加深背景。阴影通常被设置在弹出菜单或者模式窗口四周,像一张毯子一样遮住了窗口四周的干扰元素。阴影降低了窗口下方其他元素的对比度,反过来就增强了用户使用区域的对比度。同样可以在窗口底部使用一个黑色(或亮一点)的半透明层,减少它所覆盖内容部分的视觉干扰,从而让用户的注意力集中在网站窗口上。

6.网站建设之强调核心的动作

       网站应用程序大多有自己特别的主要和次要界面。例如,当你在青岛网站制作应用程序中创建项目时,主表单通常包含项目名称、项目截止日期、优先级,等等。在表单底部,你会看到一个“创建”按钮。通常你还会看到一个“取消”按钮或者文本的链接。因为用户不经常使用,所以“取消”按钮并不是很重要,因此,你就可以减少这个按钮的视觉“分量”。例如,可以把“创建”做成一个按钮,而“取消”只做一个没有任何视觉网站效果的超链接。这样中心就放在了主要的操作上,用户完成表单的时候就能很快地定位到操作按钮。

7.网站建设之使用块状链接提高效率

       使用带填充的块状链接可以用来方便地将鼠标定位到链接。网络应用程序构建在HTML 元素的基础上,也就意味会使用很多的锚(通常称为链接)标签。锚标签默认是“内联(inline)”元素,意味着它的宽度和高度只是在文本的内部。反过来就是说,可以点击的区域和文本的范围一样,在很多情况下显得太小,用户不能够很精准、舒服地进行点击。而你可以对锚链接使用内边距来使它变大。对于列表中的链接,就像侧边栏,将锚链接转化为“块元素”是个更好的办法。通过使用CSS 的“display”属性,我们可以转换一个元素的类型,所以给锚链接增加一个“block”属性, 就能将其转化为一个块元素,块元素的宽度和高度就不再局限于文本的尺寸,而默认会扩展到包含它的容器的宽度。这种方法非常适合侧边栏中的链接。

8.网站建设之用动词作标签

       用户在使用网站应用程序的时候,总是准备去做一些事情,他们总是在想动词。“我想保存这个文件”或者“我想更新这篇文章”。在创建对话框或者其他需要用户处理的应用时,使用动词而不要使用像“是的”、“不是”、“好的”这样的表述。当用户看到像“好的”或者“取消”这样的选项时,他们需要去阅读额外的信息来搞明白他们要做什么。如果你使用动词,例如“保存”、“不保存”和“取消”,用户就不需要再看其他的消息,他们马上就知道这个对话框或选项是做什么的。

9.网站建设之输入时自动/ 重新聚焦

       网站文件加载完成后自动激活主表单中的输入框会给基于表单的应用带来很大的好处。例如,Google 的搜索引擎页面自动将焦点定位在网站页面的输入框中,因为几乎所有到达Google 首页的人都想在输入框中键入需要查找的内容。在其他的应用环境中自动激活输入框也非常有用,例如,在那种需要连续输入的应用中,就像创建购物清单,在输入第一个物品之后,用户想接着输入下一个,所以可以重新激活输入框,让用户快速、持续地进行输入。

10.网站建设之使用悬浮控件进行简化和解构

       很多网站应用程序都有一套与内容紧密相关的控件,例如一个列表中的删除按钮和记录的编辑按钮。为了方便定位,通常这些控件放在了每条记录的后面,但是这种情况下就造成了大量的重复。多数的时间里,用户并不需要这些控件,需要时,也仅仅需要其中一个特定条目的网站控件。
       如果使用悬浮控件,可以在用户将鼠标移动到一个特定区域后才显示,这样可以简化网站界面。例如,当鼠标停在你想编辑的记录上时,一个编辑按钮就会显现出来,但是其他记录的编辑按钮仍然保持隐藏。
       悬浮控件是一个很棒的解构和简化网站界面的方法,但是在使用这个方法之前,你还需要考虑两件事情。首先考虑控件是否能被找到。用户在使用之前,往往需要先找到这个网站界面中的元素。你的控件是否做得足够显著以吸引用户注意?用户经常很自然地移动鼠标,停留在他们正在浏览的项目上,所以这也许并不是一个大问题,但是仍然值得去思考。其次,移动设备上的网站浏览器也许不能模拟鼠标的动作,那么这些控件将无法使用。

11.网站建设之动态扩展表单

       如果表单中的一个输入框中需要输入多个数据记录,例如,在一段网站文本之后附加多个文件,或者向数据库中的公司记录里添加多个人员信息。这种情况下,可以使用动态扩展表单,以一种优雅的方式来实现需求。因为用户每次只能在一个输入框中进行操作,所以每次也只需要显示一个输入框。当用户填完并且增加了一条记录后,程序会在新记录后再创建一个额外的输入框,允许用户键入更多的信息。这种方法替代了同时显示多个空输入框的形式,每次你只需要显示一个空的输入框,但是允许用户输入需要的内容。

12.网站建设之输入框中的标签

       网站界面的简化需要不断地思考总结。如果你想要砍掉一些不必要的元素,并且为剩余的网站元素更好地利用空间,将标签放到输入框内部是一个巧妙的办法。这不仅节省了网站空间,也清楚地表明了与输入框对应的标签。

13.网站建设之上下文敏感的界面元素

       如果希望为高级用户整合一些额外的功能,但是又不想让青岛网站设计页面臃肿,这时就可以通过提供按需增加的上下文元素来实现。例如,你的应用中有一个带高级搜索的搜索条,在没有使用的时候只显示搜索条,当用户单击时再显示一些额外的控件。这样,网站界面仍然保持了简洁,实现高级的功能也只需要一次点击。

14.网站建设之图标

       使用网站图标能够简化界面、让网站界面看起来更有吸引力,但是在使用之前也有一些因素需要好好考虑。语言几乎总是比网站图标表达得更清楚。写一个标签非常容易,只要表明这个按钮的作用就行。然而在设计网站图标的时候,则需要用有效的意象来描述操作。如果图标是一些很本土化的东西,你选择的意象在不同的国家可能会有不同的理解(甚至连垃圾桶的形状在世界各地都是不同的)。
       屏幕中同时没有太多的网站图标,每个图标都能够同其他图标明显地区分开,这样图标才能发挥出最好的作用。这意味着形状和颜色是创建一套成功图标的重要因素。使用正确的图标,能够让界面更容易使用。因为一旦用户熟悉了这些图标的含义,通过形状和颜色的区别,用户就能很快找到他们想要的图标。

15.网站建设之使用加载指示器

       没有人喜欢等待。等待意味着本来可以做一些有价值的事情的时间里,你却什么都没有做。但是很不幸,载入每个程序都需要花费一些时间,比如导出一个大文档或者通过查询返回结果,用户不得不等待。但是,可以通过使用加载指示器来让用户觉得等待的时间变短了[注释]。在加载过程中,可以增加一个指示器,比如旋转的动画或者进度条。研究表明,在指示器存在的情况下,用户感觉等待时间变短了 。加载指示器对短时的等待非常适用,但是对于一个需要一分钟甚至更多时间的情况呢?如果你在加载的这段时间里什么都不能做(假设你已经为减少加载时间做了最大的努力),你还是可以做一些事情来改善用户的等待体验。利用这段时间提供娱乐或者信息。例如,很多应用程序在长时间的等待过程中会显示一些有趣的提示或技巧。如果用户确实做不了任何工作,起码他们可以学到一些新东西。

16.网站建设之使用按钮状态提高响应性

       网站应用程序的响应性并不仅仅依赖于后台代码结构的优化。用户网站界面同样也扮演了非常重要的角色。在可视界面中被使用最多的一个元素就是按钮。在桌面应用程序中,按钮具有多种状态,最常见的是按钮默认状态和鼠标单击后的状态。

       网站按钮按下的状态看起来就像真的被按下去那样。这个状态提示用户,他们的单击已经成功地执行了。像在桌面应用程序一样,按钮的按下状态同样可以使用在互联网应用中,为用户提供一些额外的反馈和响应。

17.网站建设之帮助性的空白状态

       当用户第一次加载应用的时候,屏幕上不会显示过多的内容;用户还没有输入数据,也没有什么好显示的。在这个空白状态中添加简短的帮助信息,来引导用户如何开始。为了让事情更加简单,你甚至可以在信息中加入一个链接,将用户带到推荐的操作。例如,一个管理电子邮件广告的程序,用户创建了一个新账户后登录,应该提供给用户一段帮助信息,其中包含一个链接到创建新广告的界面。

18.网站建设之宣传应用的特点

       用户对你的应用并不是十分了解,所以一些情况下在应用中合理使用广告是一个很好的办法。同时,由于互联网产品经常会进行一些细微的更新或者时不时推出一些新功能,所以通过广告的方式让你的用户知道这些变更就变得更有意义。一般情况下,可以通过在屏幕中的显著位置放置一个小块通知的方式来实现。通知区域应当吸引眼球但又不至于让用户分心,影响用户的正常工作。用户读了这个通知以后,应该可以关掉它。

19.网站建设之撤消操作

       桌面网站应用程序最常用的特性之一是,值得信赖的撤消快捷键。不小心改变了正在编辑的文档图表格式?没问题,按Ctrl+Z/Cmd+Z 组合键,应用程序会采取撤消操作,把你的文档恢复到最后一个动作之前的状态。撤消操作是容错界面的一个重要工具,它也可以应用在页面应用程序中。例如,你可以在网站应用程序中加入这些熟悉的快捷键或者显示一些带有撤消链接的临时通知信息。

20.网站建设之还原操作

       人们在删除一些东西之后,通常会反悔,所以在你的网站应用程序里增加额外的保护措施来处理一些比较重要的数据是一个明智的做法。例如,项目管理中的项目文件。用户删除一个项目时,将其进行存档而不是立即删除。如果用户改变主意,希望把他们需要的项目文件取回时,程序可以轻松地将它们还原。当用户发现所有的东西并没有丢失而感到非常高兴时,消耗一点用户的磁盘空间是值得的。

21.网站建设之确认对话框

       当在网站应用程序中进行诸如删除记录这样的破坏性操作时,提供一个确认对话框,提醒用户是否确实要进行接下来的操作是非常必要的。特别是当删除按钮的位置和其他控件非常近的时候。如果用户不小心点击了删除按钮,在生效之前用户可以取消操作。但是,不要过度使用这个特性,因为不必要对话框拉长了操作过程并让人生厌。

       青岛网站建设哪家好靠谱的网站建设公司找圭谷设计,5-17年经验的专业团队为您的网站进行一对一量身定制!响应式网站建设找圭谷设计!

Are you interested in ?

对圭谷感兴趣吗?

有关我们服务的更多信息,请联系

朱总13805329405 / 18661461613(同微信号)

与我们 合作

与圭谷设计合作,您将会得到更成熟全面的网站建设服务。我们以客户至上,同时也相互挑战,力求呈现较好的网站建设成果。

网站建设热线:

138 0532 9405

fixed top

TOP

QQ客服

免费电话

暂不需要
立即在线咨询