• 17630273926
如何将可用性和美观性结合起来以实现出色的网站设计
作者:郑州云优化 / 2019-11-14 20:54 / 浏览次数:
如何将可用性和美观性结合起来以实现出色的网站设计
优秀设计的标志是什么?
是否有能力在酒旁站着喝一杯,引用一些自命不凡的法语单词,并成为自己房间中最聪明的人?
没事
那是伟大艺术的印记。无论是用于网站,应用程序还是产品,出色设计的标志正好相反。
每个人都应该能够逐步了解它,了解它的含义,并按预期准确地使用它。无需翻译。
因为设计是结构,所以人们无法使用或只是不想使用的结构是没有意义的。(它的排名也不是很好。)设计必须可用。
但这并不意味着它不会美丽。这不是美与可用性之间的零和游戏。
这更像是纳什均衡。一切都协同工作,以实现最大的利益和最小的损失。
这是在网站上实现它的方法。
1.标记所有图像
在2000年代初爬出AOL聊天室的孩子们带着对表情符号的热爱,从网络的原始渗出中脱颖而出。
变成了对图片的热爱。然后是图标,就像您在Icon8上看到的内容一样。*
影像学
(*我的历史记录可能有点瑕疵。请不要检查我。)
不幸的是,网页设计中的图像学和Ed Hardy衬衫一样有用。您可以使其工作。将其与正确的元素配对,甚至可以提升您的网站。
但是通常,它们等同于您无法放入洗碗机的那种眼花bed乱的火焰状头骨不倒翁。
他们是人们很难记住,造成混乱,并且用户放缓。
换句话说,它们会产生摩擦。和摩擦是一个问题。
但是我知道我无法完全从您手中撬开图像。因此,如果要使用它们,请记住以下几点:
他们需要不止一层信息。状态更改指示器(例如颜色)可以提供帮助,但是没有什么能胜过文本标签。
查看来自Bing的以下示例:
必应图标
那么,为什么带有图标的文本标签的性能要比没有它们的图标好得多?
这可能是由于象征主义的本质。它要求用户通过以前的经验来满足一系列文化条件,以了解所传达的功能。
当您有一个带有图标的双标签和文本配对时,您更有可能从用户的语义记忆中触发提示。
另一方面,纯图标可能会要求用户利用其众所周知的易失性工作内存,尤其是在图标和功能不是很流行的组合时。(例如,如果它们比放大镜更神秘,请搜索。)
因此,如果您打算穿Ed Hardy –我的意思是,使用图标–作为您网站设计的一部分,以提高您的美感,突围您的标签制作商并为其命名。
它可以像InVision一样简单。
视觉影像
或者像Sketch这样更强大的功能。
素描肖像
无论哪种方式,在网页设计中,一张图片并不总值1,000个字。请记住,这样您的用户就不必了。
2.一致对待视觉提示
热门人物和时尚的网站设计有一些共同点:
如果人们喜欢它的外观,那么人们会更愿意宽恕这两个问题。被称为美学可用性效应的用户可以在美观方面弥补一些较小的可用性问题。
但是,当可用性和美观性协同工作时,效果会更加明显。
那么,如何使它们一致地工作?保持视觉提示一致。
记住,风格是一种功能。这是一门语言。
当您将链接涂成蓝色时,您正在向用户传达一些信息:这是可单击的并打开另一个页面。
而且,当您使用阴影将页面上方的按钮提升时,您正在传达它是一个重要的区域并且是交互式的。
顺便说一下,这是它们在材料设计中使用的指导原则。
非重叠表面之间的高程
但是,如果您采用相同的阴影效果并将其应用于文章中间的图片(可能不会链接到任何内容)?
不一致会使两端的通信失效。它使用户学会了比使用您的网站所需要的更多的关系。
在美化方面,品牌内部和品牌之间的设计一致性会以最小的风险(例如,最小最大化策略或纳什均衡)产生最大的回报。
媒介是我最喜欢的设计凝聚力示例之一。
标题大小始终相同。字幕-相同。字体–相同。图标–相同。
无论您在何处着陆或去往何处,您都将获得一致的中级体验。
您遇到的唯一变化是颜色,甚至保持在最低水平。
例如,请考虑由Medium自己的设计负责人撰写的有关结构排版的文章。
现在,看看另一本完全不同的出版物上的文章。
如何结合可用性  出色的网站设计之美
没有猜测。您知道哪些元素是什么以及如何解释每个元素,因为它们在站点中是相同的。
这使得它可以漂亮地使用。
底线:
做出设计选择并坚持下去。视觉不仅仅是吸引人的功能:它们还是您网站语言的一部分。标准化使所有人受益。
3.认真设计(认真)
快速真实地双眼凝视。
做完了吗
此页面最关键的部分是什么?
标头和导航菜单,对不对?
让我们以乔什·麦科伊(Josh McCoy)的有关UX宠物怒吼的出色文章为例。当您斜眼看时,这些是应该突出的要素:
如何结合可用性  出色的网站设计之美
他们为什么脱颖而出?因为它们的样式清晰可见。根据页面的大小和空间关系,您知道什么是重要的。
而且,不管您相信与否,您都在运行一个真实的可用性测试,即squint测试。这是识别信息体系结构问题的一种好方法(便宜)。
这也是确定您是否有太多“重要”元素在争夺注意力的快速而肮脏的方法。(特别是为您,营销朋友大喊大叫。)
如果您(或用户)花了超过几秒钟的时间来识别页面元素之间的关系,则您的网站设计运行得像政府一样。
杂乱无章的元素认为它们比实际更重要,如果确实需要领奖台,则应该去其他论坛提出自己的看法。
这是一个不同的例子。
让我们在MailChimp上运行相同的测试。
睁大眼睛:
MailChimp视觉层次结构
现在,at着眼睛:您是否以相同的顺序确定了重要元素?
MailChimp视觉层次结构
但是,请谨慎使用此策略。
尽管此测试易于运行,并且您应该在网站上的每个新页面上都使用它,但是您需要外部影响。
换句话说,你不能狗食它。不完全的。
您团队中的人员已经知道要在层次结构中寻找什么。
他们在认知上已准备就绪,可以按照您希望的方式通过此测试。
请记住,优秀设计的标志不是具有高学历的人能够解释的。
就是说有人可以在没有任何(或最少的)帮助的情况下走在街上并使用它。
所以斜视您的设计。确定哪些元素是最重要的,并比较它们这应该是最重要的。
然后请别人做同样的事情。
如果结果不同,则说明您存在可用性问题。也可能是一个拥挤的问题。
因此斜视,编辑并再次斜视。
结论
没有功能的形式就是艺术。
没有形式的功能是一种抽象。
两者都不适合您的网站设计。
如果您希望任何人都可以使用它,则不会。
如果要在网站上使用图像,请给它加上标签。玫瑰的别称实际上并不那么甜。
视觉提示也不只是橱窗装饰。它们是您的网站和用户之间共享对话的一部分。使它们一致。否则,你会有汤。
引导您内在的克林特·伊斯特伍德(Clint Eastwood)并在网站的每一页上斜视。每次您更改某项内容时,请再次斜视。然后要求其他人也这样做。
您的网站在美观和实用性之间越和谐,就会有更多的人使用它。
这就是重点,不是吗?
更多Web开发资源:
您必须问的50个问题,以评估您的网站质量
内容改善网站可用性的3种方式
如何避免6种常见的Web设计错误会损害SEO
【郑州云优化】郑州SEO、网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、自媒体营销、微信公众号
如有意向---联系我们
热门栏目
热门资讯
热门标签

网站建设 网站托管 成功案例 新闻动态 关于我们 联系我们 服务器空间 加盟合作 网站优化

备案号:ICP备*********号 网站地图/sitemap 

公司地址:河南省郑州市郑州云优化 咨询QQ:1774525808 手机:17630273926 电话:17630273926