皇冠官网登录如何设计 一致性和标准 记住并理解为什么它们很重要,并将它们融入到你的工作中. 源自Jakob Nielsen和Rolf Molich的《皇冠官网登录》 用户界面 (UI)的指导方针, “一致性和标准”在一些最成功的公司所创造的许多广泛使用的产品中很明显. Adobe Photoshop等产品, 最初发行于20世纪90年代, 谷歌Gmail, 发行于2000年代中期, 这只是一些广受欢迎的产品体现了这一重要的经验法则吗. 这篇文章将教你如何识别一致性和标准,并解释为什么它们在用户界面设计中很重要.
用户界面设计一致性和标准的两个关键原因
在你设计用户界面的时候, 重要的是要记住发生在人与人之间的互动 认知 以及你所设计的屏幕. 为用户提供方便意味着不强迫他们皇冠官网登录每个任务的新表示或工具集. 当谈到提高时,通过消除困惑来缩短思考过程的长度也是一个肯定的赌注 用户体验.
1. 减少皇冠官网登录
一致性限制了表示动作和操作的方式的数量, 确保用户不必皇冠官网登录每个任务的新表示. 进一步, 建立像遵循平台惯例这样的设计规范,允许用户在不皇冠官网登录全新工具集的情况下完成新任务. 这听起来可能是一个简单的概念, 但也有很多例子表明他们的设计缺乏一致性. Comcast公司的Xfinity网站就是一个典型的例子, 一家美国大众传媒公司. 在网站上, 不仅次要菜单几乎每次用户点击进入另一个页面时都不一致, 但是主菜单也不一致. 让皇冠官网登录来看看并比较一下网站的三个不同页面:主页、My Xfinity和电视.
作者/版权所有人:康卡斯特公司. 版权条款和许可:合理使用.
这是Xfinity网站的主页. 注意,当用户单击进入其他页面时,突出显示主菜单栏和辅助菜单栏的注释区域会有什么不同.
作者/版权所有人:康卡斯特公司. 版权条款和许可:合理使用.
这是Xfinity网站的电视页面. 让用户感到困惑的是颜色如何, 布局, 字体样式看起来与主页不同.
作者/版权所有人:康卡斯特公司. 版权条款和许可:合理使用.
这是Xfinity网站的My Xfinity页面. 上面研究的三个页面在颜色、布局和字体样式上都有很大的不同 导航 menu. 这些差异让用户感到困惑和迷惑,因为它不再像一个网站, 就好像他们是三家不同的公司.
2. 消除混乱
用户倾向于应用他们在你的网站或产品之外经历过的规则, 带来他们自己的一套期望. 知道, 当皇冠官网登录偏离设计标准和惯例时,皇冠官网登录应该注意是否会造成混乱和疏离. 进一步, 用户不应该花时间思考是否不同的单词, 的相互作用, 或者在您的产品上下文中,操作实际上意味着相同的事情. 当人们无法“拼凑”信息时,就会产生混乱, 有时, 阻碍他们取得成就. 当用户在实现他们的目标时受到阻碍, 他们感到愤怒或沮丧是可以理解的. 困惑通常会导致沮丧,这不是什么秘密, 而挫败感会导致糟糕的用户体验. 因此,你应该尽可能地消除每一个接触点上的困惑.
五种方法让你在工作中保持一致性
在用户界面中实现一致性有很多方面. 你可以参考以下5个方法来提高设计的一致性:
1. 语言的选择
你在两种语言中使用的语言 市场营销 文案以及在整个用户流程中使用的措辞不仅会影响你的用户 感知 你的产品, 但当你用不同的术语来表示相同的东西时,也会引起混淆. 这不仅关系到你选择的术语,也关系到你传达信息的语气.
当你的用户正在浏览一个整体友好的电子商务网站时,用一个严重的、威胁性的错误信息吓唬他们,这肯定会扼杀原本良好的用户体验, 例如.
当事物具有相同的含义或执行相同的操作时,它们应该以相同的方式表示, 谷歌的电子邮件设施也是如此, Gmail. 基于客户端电子邮件应用程序的组织风格, Gmail的文件夹被标记为“收件箱”, “草稿”, “发送邮件”, 等. 这些文件夹使用的语言显示了过去使用过电子邮件应用程序的人的熟悉度和一致性.
作者/版权所有人:David Bruce Jr .. 2011. 版权条款和许可:CC BY 2.0
2011版Gmail中的文件夹标签显示了各种熟悉的选项. 这些文件夹使用的语言显示一致性,因为它使用标签“收件箱”, “草稿”, 以及“垃圾邮件”——所有这些对于过去使用过电子邮件应用程序的人来说都很熟悉.
2. 应用UI元素,因为他们最初定义
常用的UI元素, 比如消息窗口, 菜单栏, 图标, 滚动条, 单选按钮, 图形元素通常是一致的,并且具有用户广泛理解的表示形式吗. 例如,单选按钮意味着只允许使用一个选项. 另一方面,只有当用户被允许有多个选项时,才应该使用复选框. 从许多方面来看,HTML5在2014年末击败了Flash技术. 其中一个原因可以说是易于应用和 易用性 开发人员, 设计师, 用户可以享受HTML5在定义UI元素时的一致性和标准.
单选按钮只允许一个选项. 因此,只有HTML的内置单选按钮才有意义 功能 也.
复选框允许多个选项. 因此, 只有HTML的内置复选框在功能上也是这样才有意义.
在UI元素的一致性选择上,一个糟糕的例子出现在BBC新闻网站过去的评论区. 评分最高的用户评论用一个朝南的箭头表示, 然而,用户必须点击朝北的箭头才能提高评论评分. Using a south-facing arrow to represent the highest rated comments is also unintuitive; increasing numbers go up, 而不是下降. 当用户浏览网页的评论部分时,他们可能只是简单地按照箭头的指示行事, 没有阅读操作标签, 这可能导致错误的选择.
如果不使用常用的视觉表现形式,将迫使用户自觉地以一种不舒服的方式使用用户界面, 这会降低他们导航和执行预期任务的速度.
作者/版权所有人:BBC. 版权条款和许可:合理使用.
BBC评论区显示一个向下的箭头表示“评分最高”,向上的箭头表示“评分最低”。. 这种表示方式不一致,用户会感到困惑, 因为“更高”的概念通常等同于向上的箭头,而“更低”则等同于向下的箭头.
3. 在决定布局时考虑各种公认的惯例.
设计师是否应该“复制”其他人如何布局他们的网站或应用程序,这当然是有争议的. 然而, 当你在设计时考虑到用户的视角和认知, 重要的是要理解,人类对事物在屏幕上的视觉位置有很强的记忆力. 您应该利用这一特性,为各种图形元素保留常用的位置,例如将徽标放在左上方, 搜索域在右上角, 退出图标在右上角, 等.
作者/版权所有人:微软公司. 版权条款和许可:合理使用.
作者/版权所有人:苹果公司. 版权条款和许可:合理使用.
微软和苹果的标志都放在左上角, 还有他们网站右上角的搜索栏. 这种形式的布局一致性有助于用户在浏览一个新的和不熟悉的网站时减少迷失.
4. 根据用户的期望进行设计
确保你拥有用户希望在你的网站上看到的特性和功能. 例如, 航空公司网站应该有一个订票系统, 而一个音乐分享网站应该有一个媒体播放器.
作者/版权所有人:Youtube. 版权条款和许可:合理使用.
像YouTube这样的视频分享网站显然需要一个视频播放器. 这是一个很好的一致性的例子,站点的特性和功能支持用户的期望.
5. 在你的网站中创建一致的视觉元素
确保整个网站的视觉元素是一致的.的内容, UI元素, 字体, 背景和颜色应该是和谐的,在每个接触点上都应该是一致的. 如上所述, 坚持以HTML5和CSS3形式存在的技术惯例是保持一致性的一种方法. 与此同时, 在面对颜色和字体等设计决策时,有一个品牌和风格指南可以帮助你.
作者/版权所有人:Jan-Alfred Barclay. Behance公司. 版权条款和许可:CC BY-NC.0
一个为公司设计的风格指南和品牌手册的例子,“Goodnyt”. 有一个风格和品牌手册可以帮助你确保你的视觉元素在你的网站是一致的.
在谷歌的Gmail移动用户界面的2013年版本中可以看到一个颜色和字体选择一致性的坏例子. 尽管可以说,在这种情况下,“意义”不受影响, 不可否认的是,由于屏幕之间视觉元素的任何奇怪差异,用户体验几乎总是会恶化.
作者/版权所有人:谷歌Inc. 版权条款和许可:合理使用.
Gmail应用程序在2013年首次推出时的移动用户界面截图显示,它在颜色框和字体样式的选择上不一致.
拿走
一致性和标准是公认的基本设计原则,应该应用于产品中的所有内容和交互. 在改进设计时,皇冠官网登录可以从几个方面考虑一致性, 这包括皇冠官网登录使用的语言, 皇冠官网登录选择的UI元素, 皇冠官网登录布局网站的方式, 皇冠官网登录包含的功能和特性, 以及皇冠官网登录决定的视觉组件 color 和字体.
一致性通过消除用户不必要的皇冠官网登录和困惑来帮助改善用户体验, 重要的是要记住,你应该在必要的时候使用它,但不要让它限制你在有意义的地方创新设计想法.
遵循标准和惯例并保持一致应该是你可以利用的优势. 它将使您从相对琐碎的设计决策中解脱出来. 这将帮助你节省时间,解放你的思想,这样你就可以进一步改善你的设计和用户体验.
参考文献 & 在哪里了解更多:
课程: 成功软件的UI设计模式
查找更多皇冠老牌网站Jakob Nielsen ' s '的信息增强可用性启发式的解释力.’
想了解更多皇冠老牌网站艺术和设计的区别, 看看这个很酷的博客.
要了解更多皇冠老牌网站一致性的不同方面,请阅读这篇博客文章: 为什么一致性很重要
了解更多皇冠老牌网站平衡一致性和 创新,查看: 在用户界面设计中实现和平衡一致性
英雄图片:作者/版权所有人:GraphBerry. 不正常的艺术. 版权条款和许可:CC BY-SA.0