用户界面设计模式作为一个网页开发者和设计人员,我真的很欣赏一个很好的网站。没有什么比注册一个网站时,他们问你所有的个人信息,而你甚至不知道你得到了什么更令人沮丧的了。

当网站设计没有像它应该的那样直观时,这也是一个令人沮丧的事情。我们知道,作为互联网用户,你在网站上的帐户资料通常包括账单、之前的交易、评论、反馈等等。当一个网站让你不得不搜索执行简单的功能时,它会让用户感到沮丧,可能会阻碍他们成为回头客。用户界面(UI)对于你的业务或创业的成功至关重要。

避免设计灾难,并注意这些重要的UI设计模式。学习如何开发有效的和高流量的网站从地面上来设计基础课程。

1.面包屑

这些是最好的。当你在一个有层次结构的网站上商店>女人>配件>腰带知道你正在浏览什么页面以及你是如何到达那里是很好的。使用breadcrumbs可以修复这个问题,方法是将显示您单击以进入当前正在查看的页面的页面显示出来。通常面包屑会出现在内容的主体上面。

2.顶部菜单和搜索

顶级菜单更好。有时,对于某些应用程序(邮件客户端、音乐播放器等),有一个左侧或右侧菜单是很好的。在网站上,维护一个顶部菜单,如果需要,加上下拉菜单和一个搜索栏,对浏览者来说更友好。我不知道你怎么想,但我在网站上搜索的第一个地方是右上角。不是侧边栏,也不是页脚。这些对页面的简单调整可以真正增强用户的体验。在这个设计网页界面大师班您可以从专家那里学习如何最大化用户界面功能。

3.简单的注册

保持简单!人们不想告诉你他们住在哪里,他们的电话号码或他们的雇主是谁(是的,我以前在登记表上看到过这种情况)。你只需要从他们那里获得用户名和密码——在某些情况下还有他们的名字。当然,如果网站需要货币交易和产品购买,你会希望在他们的个人资料中有一个部分来更新他们的账单和运输信息。另外,确保你的访问者能够找到注册你网站的地方。所以这个小链接通常隐藏在侧边栏的缝隙中,或者在右上角与背景融为一体。不要让人们搜索它——他们不会的。在可用性测试方法你可以学习更多的技巧,使一个网站直观,让用户发现它容易使用,成为回访用户。

4.主操作

在市场营销中,设计师利用颜色、形状和声音下意识地吸引消费者。这可能听起来很疯狂,但绿色可以让人成为一个客户,而红色可能会转移人们。同样的原则也适用于在你的网站上设置某些功能。如果有人决定注册你的网站,他们可以选择“保存”他们的个人资料信息,或者“跳过后再做”,他们很可能会选择更大、更吸引人的按钮……无论如何。无论你想让你的观众做什么——让它脱颖而出。使用明亮的颜色和更大的按钮。通常情况下,“次要”操作(如取消或稍后注册)可以写成简单的链接或暗灰色,以阻止人们选择它。网站设计背后确实有一种心理学参与课程的设计可以带你度过这一切。

5.搜索参数

这更多的是后端开发者的交易,但也有一部分是在设计师的控制之下。让你的网站上的搜索功能对每个人都友好。不要有如此严格的控制,比如你必须进入一个城市,只有一个邮政编码得到结果。设置它,以便您的客户可以使用州、城市或邮政编码进行搜索。它将为你带来更大的好处,也不会让用户感到沮丧。

6.必填字段

真的,从长远来看,这只是为您省去了麻烦。如果您不确定您需要填写的字段-人们可能不会填写它们。当您需要运送产品而没有送货地址时,这可能会造成问题。用星号或标题“required”标记需要填写的字段。

7.一步一步(进展栏)

如果您有一个冗长的注册过程,或者正在管理某种问卷或应用程序,请让用户知道他们在这个过程中的位置。它只是让你的用户知道填写信息需要花费多少时间,可能需要哪些信息,这是良好的UI设计实践。

8.你的和我

当你在亚马逊或Etsy上注册账户时,你会注意到它会用你的名字欢迎你。网站设计也使用了“你的账户”和“我的账户”的方法。UI设计师这样做是为了与用户建立一种融洽的关系。就像一个朋友会跟你说话,这是你的账户和资料。不是我的。有些情况下" my "是合适的,请阅读更多关于对话界面。

9.悬停控制

你知道在Facebook上,你可以把鼠标悬停在你的封面照片上,它会给你选择更改或更新它?这是一个悬停控件。Facebook在整个网站上都在使用这种设计模式,许多其他网站也开始将这种设计模式融入到他们的界面中。它使用户易于控制,而没有感觉混乱与所有的“编辑”,“改变”和“更新”按钮到处。

有些设计元素似乎是显而易见的,因为你已经习惯了每天使用其他具有类似功能的网站。然而,有些东西你可能不知道,希望这篇文章能帮助你对下一个网页设计项目中应该包括什么有新的见解。想要获得更多关于如何让你的网站成为终极用户友好体验的专业建议,请点击这里用户体验课程。

用户界面的顶级课程

用户体验设计要点- Adobe XD UI UX设计
丹尼尔·沃尔特。斯科特
4.6 (30851)
畅销书
学习Figma - UI/UX设计基本培训
迦勒金斯敦
4.5 (7095)
畅销书
使用Adobe Illustrator CC的UI和Web设计
丹尼尔·沃尔特。斯科特
4.7 (2726)
用Material-UI和ReactJS实现高保真设计
圣扎迦利莉丝
4.5 (1291)
畅销书
Adobe XD UI/UX设计,原型和切换从头开始
迦勒金斯敦
4.5 (1408)
畅销书
完整的颤振UI Masterclass | iOS, Android,和Web
马库斯Ng
4.6 (409)
评价最高
Adobe Xd动画-从图标到UI的完整指南
亚历山大Cucukovic
4.5 (131)
网站和手机应用的创意布局设计
默罕默德Ahsan Pervaiz
4.5 (115)
UI/UX设计- Adobe XD从头开始
Mehdi Baoueb
4.5 (90)

更多用户界面课程

用户界面专业的学生也在学习

让你的团队。领导行业。

使用Udemy for Business订阅在线课程库和数字学习工具。

请求一个演示